/* Home-specific styles — cinematic scroll sequence */

/* ============= HERO ============= */
.hero{position:relative;min-height:100vh;padding:160px var(--pad) 0;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}
.hero-bg{position:absolute;inset:0;pointer-events:none}
.hero-glow{position:absolute;border-radius:50%;filter:blur(80px)}
.hero-glow.g1{width:700px;height:700px;top:-200px;right:-150px;background:radial-gradient(circle, rgba(0,224,255,0.22), transparent 70%)}
.hero-glow.g2{width:500px;height:500px;bottom:-200px;left:-100px;background:radial-gradient(circle, rgba(212,168,90,0.10), transparent 70%)}
#dropletCanvas{position:absolute;inset:0;width:100%;height:100%;opacity:0.55}

.hero-grid{position:relative;display:grid;grid-template-columns:240px 1fr 220px;gap:60px;align-items:start;flex:1;z-index:2}
.hero-meta{display:flex;flex-direction:column;gap:24px}
.hero-meta-stack{display:flex;flex-direction:column;gap:18px;margin-top:30px}
.hero-meta-stack > div{padding-top:14px;border-top:1px solid var(--line)}
.hero-meta-stack .mono{font-size:10px;letter-spacing:0.2em;color:var(--text-mute);text-transform:uppercase}
.hero-meta-big{font-family:var(--display);font-size:48px;color:var(--text);display:block;margin-top:6px;line-height:1}

.hero-title{padding-top:30px;text-align:left}
.hero-title h1{font-size:clamp(60px,11vw,180px);line-height:0.92}
.hero-title h1 .line{display:block}
.hero-title h1 .outline{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,0.6);padding-left:0.1em}
.hero-title .lead{margin-top:30px;max-width:50ch}
.hero-cta{display:flex;gap:12px;margin-top:36px;flex-wrap:wrap}

.hero-scroll-cue{display:flex;flex-direction:column;align-items:flex-end;gap:14px;margin-top:auto;padding-bottom:30px;justify-self:end}
.hero-scroll-cue .mono{font-size:10px;letter-spacing:0.22em;color:var(--text-mute);text-transform:uppercase;writing-mode:vertical-rl;transform:rotate(180deg)}
.hero-scroll-cue .scroll-line{width:1px;height:80px;background:linear-gradient(to bottom, var(--accent), transparent);position:relative;overflow:hidden}
.hero-scroll-cue .scroll-line::after{content:"";position:absolute;top:0;left:-1px;width:3px;height:20px;background:var(--accent);box-shadow:0 0 12px var(--accent);animation:scrollPulse 2s ease-in-out infinite}
@keyframes scrollPulse{0%{transform:translateY(-20px);opacity:0}50%{opacity:1}100%{transform:translateY(80px);opacity:0}}

.hero-ticker{position:relative;border-top:1px solid var(--line);overflow:hidden;padding:18px 0;z-index:2;background:rgba(6,8,12,0.6);backdrop-filter:blur(8px)}
.hero-ticker-track{display:flex;gap:32px;white-space:nowrap;animation:marq 30s linear infinite;font-family:var(--mono);font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:var(--text-mute)}
.hero-ticker-track .dotsep{color:var(--accent)}

@media(max-width:1000px){
  .hero-grid{grid-template-columns:1fr;gap:30px}
  .hero-meta-stack{flex-direction:row}
  .hero-scroll-cue{display:none}
}

/* ============= SEQUENCE ============= */
.sequence{height:280vh;position:relative;background:#04060a}
.seq-sticky{position:sticky;top:0;height:100vh;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center}

.seq-bg{position:absolute;inset:0;opacity:0;transition:opacity .35s ease}
.seq-bg[data-phase="approach"]{background:radial-gradient(ellipse at center, #0a0f1a 0%, #04060a 70%)}
.seq-bg[data-phase="water"]{background:radial-gradient(ellipse at center, #06283a 0%, #02101a 70%)}
.seq-bg[data-phase="foam"]{background:radial-gradient(ellipse at center, #0c1a2a 0%, #050c14 70%)}
.seq-bg[data-phase="shine"]{background:radial-gradient(ellipse at center, #1a1408 0%, #0a0904 70%)}
.seq-bg.on{opacity:1}

/* ===== 3D STAGE ===== */
.seq-3d{position:absolute;inset:0;perspective:1400px;perspective-origin:50% 35%;pointer-events:none;z-index:2}

/* Perspective floor grid */
.seq-floor{
  position:absolute;left:50%;bottom:-10%;width:200%;height:100%;
  transform:translateX(-50%) rotateX(72deg);
  transform-origin:center top;
  background:
    linear-gradient(to right, rgba(0,224,255,0.18) 1px, transparent 1px) 0 0 / 80px 100%,
    linear-gradient(to bottom, rgba(0,224,255,0.18) 1px, transparent 1px) 0 0 / 100% 80px;
  mask-image:radial-gradient(ellipse at 50% 0%, #000 0%, #000 30%, transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%, #000 0%, #000 30%, transparent 70%);
  animation:floorFlow 12s linear infinite;
}
@keyframes floorFlow{from{background-position:0 0, 0 0}to{background-position:0 0, 0 80px}}

/* Orbiting wireframe geometry */
.seq-orbit{position:absolute;top:50%;left:50%;transform-style:preserve-3d;transform:translate(-50%,-50%);width:0;height:0}
.seq-cube{
  position:absolute;top:0;left:0;
  width:64px;height:64px;
  transform-style:preserve-3d;
  animation:orbit var(--dur,14s) linear infinite;
  animation-delay:calc(var(--ang,0deg) / 360deg * -1 * var(--dur,14s));
  transform-origin:0 0;
}
.seq-cube.small{width:44px;height:44px}
.seq-cube.tiny{width:30px;height:30px}
.seq-cube .f{
  position:absolute;width:100%;height:100%;
  border:1px solid rgba(0,224,255,0.55);
  background:
    linear-gradient(135deg, rgba(0,224,255,0.04), rgba(0,224,255,0.10));
  box-shadow:inset 0 0 14px rgba(0,224,255,0.15), 0 0 14px rgba(0,224,255,0.18);
  backdrop-filter:blur(2px);
}
.seq-cube .f-front{transform:translateZ(32px)}
.seq-cube .f-back{transform:translateZ(-32px) rotateY(180deg)}
.seq-cube .f-left{transform:rotateY(-90deg) translateZ(32px)}
.seq-cube .f-right{transform:rotateY(90deg) translateZ(32px)}
.seq-cube .f-top{transform:rotateX(90deg) translateZ(32px)}
.seq-cube .f-bot{transform:rotateX(-90deg) translateZ(32px)}
.seq-cube.small .f-front{transform:translateZ(22px)}
.seq-cube.small .f-back{transform:translateZ(-22px) rotateY(180deg)}
.seq-cube.small .f-left{transform:rotateY(-90deg) translateZ(22px)}
.seq-cube.small .f-right{transform:rotateY(90deg) translateZ(22px)}
.seq-cube.small .f-top{transform:rotateX(90deg) translateZ(22px)}
.seq-cube.small .f-bot{transform:rotateX(-90deg) translateZ(22px)}
.seq-cube.tiny .f-front{transform:translateZ(15px)}
.seq-cube.tiny .f-back{transform:translateZ(-15px) rotateY(180deg)}
.seq-cube.tiny .f-left{transform:rotateY(-90deg) translateZ(15px)}
.seq-cube.tiny .f-right{transform:rotateY(90deg) translateZ(15px)}
.seq-cube.tiny .f-top{transform:rotateX(90deg) translateZ(15px)}
.seq-cube.tiny .f-bot{transform:rotateX(-90deg) translateZ(15px)}

@keyframes orbit{
  0%   {transform:rotateY(0deg)   translateX(var(--r,240px)) rotateY(0deg)   rotateX(20deg) rotate3d(1,1,0,0deg)}
  25%  {transform:rotateY(90deg)  translateX(var(--r,240px)) rotateY(-90deg) rotateX(20deg) rotate3d(1,1,0,90deg)}
  50%  {transform:rotateY(180deg) translateX(var(--r,240px)) rotateY(-180deg) rotateX(20deg) rotate3d(1,1,0,180deg)}
  75%  {transform:rotateY(270deg) translateX(var(--r,240px)) rotateY(-270deg) rotateX(20deg) rotate3d(1,1,0,270deg)}
  100% {transform:rotateY(360deg) translateX(var(--r,240px)) rotateY(-360deg) rotateX(20deg) rotate3d(1,1,0,360deg)}
}

/* Orbit rings */
.seq-ring{
  position:absolute;top:0;left:0;border-radius:50%;
  border:1px dashed rgba(0,224,255,0.18);
  transform-style:preserve-3d;
}
.seq-ring.r1{width:480px;height:480px;margin:-240px 0 0 -240px;transform:rotateX(72deg);animation:ringPulse 6s ease-in-out infinite}
.seq-ring.r2{width:720px;height:720px;margin:-360px 0 0 -360px;transform:rotateX(72deg);animation:ringPulse 6s ease-in-out infinite reverse}
@keyframes ringPulse{50%{opacity:0.4;border-color:rgba(0,224,255,0.32)}}

/* Phase-driven cube color tint */
.sequence[data-active="1"] .seq-cube .f{border-color:rgba(120,220,255,0.7);background:linear-gradient(135deg, rgba(120,220,255,0.06), rgba(120,220,255,0.14));box-shadow:inset 0 0 18px rgba(120,220,255,0.2), 0 0 18px rgba(120,220,255,0.3)}
.sequence[data-active="2"] .seq-cube .f{border-color:rgba(255,255,255,0.55);background:linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.12));box-shadow:inset 0 0 18px rgba(255,255,255,0.15), 0 0 18px rgba(255,255,255,0.18)}
.sequence[data-active="3"] .seq-cube .f{border-color:rgba(212,168,90,0.7);background:linear-gradient(135deg, rgba(212,168,90,0.08), rgba(212,168,90,0.16));box-shadow:inset 0 0 18px rgba(212,168,90,0.18), 0 0 22px rgba(212,168,90,0.32)}
.sequence[data-active="3"] .seq-floor{
  background:
    linear-gradient(to right, rgba(212,168,90,0.22) 1px, transparent 1px) 0 0 / 80px 100%,
    linear-gradient(to bottom, rgba(212,168,90,0.22) 1px, transparent 1px) 0 0 / 100% 80px;
}

@media(max-width:760px){
  .seq-cube{display:none}
  .seq-ring{display:none}
}

.seq-effects{position:absolute;inset:0;pointer-events:none}
#waterCanvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .6s}
#waterCanvas.on{opacity:1}

.seq-foam{position:absolute;inset:0;opacity:0;transition:opacity .6s}
.seq-foam.on{opacity:1}
.seq-foam span{position:absolute;border-radius:50%;background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95), rgba(255,255,255,0.45) 60%, rgba(255,255,255,0.05) 100%);box-shadow:0 0 24px rgba(255,255,255,0.18);animation:foamRise 6s ease-in-out infinite}
.seq-foam span:nth-child(1){width:80px;height:80px;left:8%;bottom:-100px;animation-delay:.0s}
.seq-foam span:nth-child(2){width:50px;height:50px;left:18%;bottom:-100px;animation-delay:.4s}
.seq-foam span:nth-child(3){width:120px;height:120px;left:26%;bottom:-100px;animation-delay:.8s;animation-duration:7s}
.seq-foam span:nth-child(4){width:60px;height:60px;left:38%;bottom:-100px;animation-delay:1.2s}
.seq-foam span:nth-child(5){width:90px;height:90px;left:48%;bottom:-100px;animation-delay:1.6s;animation-duration:8s}
.seq-foam span:nth-child(6){width:40px;height:40px;left:58%;bottom:-100px;animation-delay:.3s}
.seq-foam span:nth-child(7){width:110px;height:110px;left:66%;bottom:-100px;animation-delay:2.0s;animation-duration:6.5s}
.seq-foam span:nth-child(8){width:70px;height:70px;left:76%;bottom:-100px;animation-delay:1.0s}
.seq-foam span:nth-child(9){width:55px;height:55px;left:84%;bottom:-100px;animation-delay:2.4s}
.seq-foam span:nth-child(10){width:100px;height:100px;left:92%;bottom:-100px;animation-delay:.6s;animation-duration:7.5s}
.seq-foam span:nth-child(11){width:45px;height:45px;left:14%;bottom:-100px;animation-delay:2.8s}
.seq-foam span:nth-child(12){width:75px;height:75px;left:54%;bottom:-100px;animation-delay:3.2s}
@keyframes foamRise{
  0%{transform:translateY(0) scale(0.6);opacity:0}
  20%{opacity:0.9}
  100%{transform:translateY(-120vh) scale(1.1);opacity:0}
}

.seq-shine-burst{
  position:absolute;inset:0;opacity:0;
  background:
    radial-gradient(circle at 30% 50%, rgba(212,168,90,0.18), transparent 35%),
    radial-gradient(circle at 70% 50%, rgba(255,225,160,0.14), transparent 40%);
  transition:opacity .8s;
}
.seq-shine-burst.on{opacity:1}

.seq-car-wrap{position:relative;z-index:3;width:min(78vw, 1000px);aspect-ratio:16/9;transition:transform .45s cubic-bezier(.2,.7,.2,1), filter .45s;perspective:1200px}
.seq-car{position:relative;width:100%;height:100%;transform:rotateY(var(--yrot,0deg)) rotateZ(var(--tilt,0deg));transition:transform .12s linear;transform-style:preserve-3d}

/* ===== CSS CAR (used inside .cin-car) ===== */
.css-car{position:absolute;inset:0;animation:carBob 2.2s ease-in-out infinite}
@keyframes carBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

.cc-shadow{
  position:absolute;left:6%;right:6%;bottom:-3%;height:14px;
  background:radial-gradient(ellipse,rgba(0,224,255,0.45),transparent 70%);
  filter:blur(10px);z-index:0;
  animation:carShadow 4s ease-in-out infinite;
}
@keyframes carShadow{0%,100%{transform:scaleX(1);opacity:0.55}50%{transform:scaleX(0.95);opacity:0.7}}

/* Body — main silhouette via clip-path */
.cc-body{
  position:absolute;left:3%;right:3%;top:22%;bottom:18%;
  background:linear-gradient(180deg, #2c3548 0%, #181d28 55%, #0b0e16 100%);
  clip-path:polygon(
    0% 78%,    /* front bumper bottom-left */
    2% 50%,    /* front bumper up */
    7% 38%,   /* fender front */
    16% 35%,  /* hood front */
    30% 23%,  /* base of windshield */
    38% 5%,   /* top of A-pillar */
    62% 0%,   /* roof */
    78% 12%,  /* C-pillar top */
    86% 32%,  /* trunk */
    93% 36%,  /* rear fender */
    98% 50%,  /* rear bumper top */
    100% 78%, /* rear bumper */
    100% 100%,/* bottom right */
    0% 100%   /* bottom left */
  );
  box-shadow:inset 0 -10px 20px rgba(0,0,0,0.4), inset 0 30px 50px rgba(255,255,255,0.04);
  filter:drop-shadow(0 8px 18px rgba(0,224,255,0.18));
}

/* Reflective highlight strip on top of hood/roof */
.cc-shell{
  position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.10) 30%, transparent 60%);
  clip-path:inherit;
  pointer-events:none;
}

/* Windows — front windshield (slanted), side window, rear */
.cc-windshield{
  position:absolute;left:33%;right:38%;top:6%;height:24%;
  background:linear-gradient(135deg, rgba(0,224,255,0.28), rgba(255,255,255,0.08) 50%, rgba(0,0,0,0.4));
  clip-path:polygon(15% 100%, 30% 0%, 95% 0%, 100% 100%);
  border-top:1px solid rgba(255,255,255,0.1);
}
.cc-window{
  position:absolute;left:52%;right:24%;top:8%;height:20%;
  background:linear-gradient(160deg, rgba(0,224,255,0.18), rgba(0,0,0,0.5) 80%);
  clip-path:polygon(0% 0%, 90% 0%, 100% 100%, 5% 100%);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.cc-rear-window{
  position:absolute;left:62%;right:18%;top:10%;height:22%;
  background:linear-gradient(190deg, rgba(0,224,255,0.14), rgba(0,0,0,0.55));
  clip-path:polygon(0% 0%, 100% 100%, 0% 100%);
  pointer-events:none;
}

/* Body details */
.cc-door-line{
  position:absolute;left:50%;top:28%;width:1px;height:32%;
  background:rgba(255,255,255,0.06);
  pointer-events:none;
}
.cc-side-line{
  position:absolute;left:8%;right:8%;top:55%;height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.08) 20%, rgba(255,255,255,0.08) 80%, transparent);
  pointer-events:none;
}
.cc-headlight{
  position:absolute;left:5%;top:48%;width:6%;height:9%;
  background:radial-gradient(ellipse at 30% 50%, #ffe7a0 0%, #d4a85a 35%, transparent 70%);
  border-radius:50% 50% 50% 0;
  box-shadow:0 0 24px #d4a85a, 0 0 8px #fff5d0;
  transform:rotate(-15deg);
}
.cc-taillight{
  position:absolute;right:5%;top:46%;width:5%;height:6%;
  background:radial-gradient(ellipse, #ff5c5c 0%, #b02020 60%, transparent 80%);
  border-radius:6px;
  box-shadow:0 0 18px #ff5c5c;
}
.cc-grille{
  position:absolute;left:3.5%;top:58%;width:8%;height:14%;
  background:repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,0.5) 2px 4px), rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:2px 6px 6px 2px;
}
.cc-mirror{
  position:absolute;left:46%;top:22%;width:4%;height:5%;
  background:linear-gradient(180deg,#2c3548,#0b0e16);
  border-radius:6px 6px 2px 2px;
  box-shadow:0 2px 4px rgba(0,0,0,0.4);
}

/* Wheels */
.cc-wheel{
  position:absolute;bottom:6%;width:13%;aspect-ratio:1;
  background:radial-gradient(circle at 35% 35%, #3a4252 0%, #14181f 70%);
  border-radius:50%;
  box-shadow:inset 0 0 0 2px #06080c, inset 0 0 0 5px #2a3040, 0 4px 12px rgba(0,0,0,0.6);
  z-index:5;
  animation:wheelSpin 1.4s linear infinite;
}
.cc-wheel.front{right:11%}
.cc-wheel.rear{left:11%}
.cc-wheel .cc-rim{
  position:absolute;inset:18%;border-radius:50%;
  background:
    conic-gradient(from 0deg, #aab4c2 0deg 18deg, #4a5260 18deg 36deg, #aab4c2 36deg 54deg, #4a5260 54deg 72deg, #aab4c2 72deg 90deg, #4a5260 90deg 108deg, #aab4c2 108deg 126deg, #4a5260 126deg 144deg, #aab4c2 144deg 162deg, #4a5260 162deg 180deg, #aab4c2 180deg 198deg, #4a5260 198deg 216deg, #aab4c2 216deg 234deg, #4a5260 234deg 252deg, #aab4c2 252deg 270deg, #4a5260 270deg 288deg, #aab4c2 288deg 306deg, #4a5260 306deg 324deg, #aab4c2 324deg 342deg, #4a5260 342deg 360deg);
  box-shadow:inset 0 0 0 2px #1c222d;
}
.cc-wheel .cc-rim::after{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:24%;height:24%;background:#1c222d;border-radius:50%;
  box-shadow:0 0 0 2px #aab4c2;
}
@keyframes wheelSpin{to{transform:rotate(360deg)}}

/* Phase-triggered overlays via .cinema[data-scene] */
.cinema[data-scene="2"] .cc-water-streams{opacity:1}
.cinema[data-scene="3"] .cc-foam-cover{opacity:1}
.cinema[data-scene="4"] .cc-shine-sweep{opacity:1}
.cinema[data-scene="4"] .cc-body{filter:drop-shadow(0 8px 30px rgba(212,168,90,0.55)) brightness(1.05)}
.cinema[data-scene="0"] .cc-wheel{animation-duration:3.5s}
.cinema[data-scene="1"] .cc-wheel{animation-duration:0.6s}
.cinema[data-scene="2"] .cc-wheel{animation-duration:1.0s}
.cinema[data-scene="3"] .cc-wheel{animation-duration:1.6s}
.cinema[data-scene="4"] .cc-wheel{animation-duration:1.2s}

/* ===== PHASE OVERLAYS ===== */

/* Water streams running down the car body */
.cc-water-streams{position:absolute;inset:22% 3% 18% 3%;pointer-events:none;opacity:0;transition:opacity .5s;clip-path:polygon(0% 78%,2% 50%,7% 38%,16% 35%,30% 23%,38% 5%,62% 0%,78% 12%,86% 32%,93% 36%,98% 50%,100% 78%,100% 100%,0% 100%)}
.sequence[data-active="1"] .cc-water-streams{opacity:1}
.cc-water-streams span{
  position:absolute;top:-10%;width:2px;height:30%;
  background:linear-gradient(180deg, transparent, rgba(140,220,255,0.9), rgba(140,220,255,0.4));
  border-radius:2px;
  animation:waterRun 0.7s linear infinite;
}
.cc-water-streams span:nth-child(1){left:12%;animation-delay:0s}
.cc-water-streams span:nth-child(2){left:24%;animation-delay:.08s;height:40%}
.cc-water-streams span:nth-child(3){left:36%;animation-delay:.16s;height:35%}
.cc-water-streams span:nth-child(4){left:48%;animation-delay:.04s;height:42%}
.cc-water-streams span:nth-child(5){left:60%;animation-delay:.2s;height:38%}
.cc-water-streams span:nth-child(6){left:72%;animation-delay:.12s;height:36%}
.cc-water-streams span:nth-child(7){left:84%;animation-delay:.24s;height:32%}
.cc-water-streams span:nth-child(8){left:92%;animation-delay:.06s;height:28%}
@keyframes waterRun{0%{transform:translateY(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(380%);opacity:0}}

/* Foam — white blobs popping on the body */
.cc-foam-cover{position:absolute;inset:22% 3% 18% 3%;pointer-events:none;opacity:0;transition:opacity .5s;clip-path:polygon(0% 78%,2% 50%,7% 38%,16% 35%,30% 23%,38% 5%,62% 0%,78% 12%,86% 32%,93% 36%,98% 50%,100% 78%,100% 100%,0% 100%)}
.sequence[data-active="2"] .cc-foam-cover{opacity:1}
.cc-foam-cover span{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95), rgba(255,255,255,0.55) 60%, rgba(255,255,255,0.1));
  box-shadow:0 0 20px rgba(255,255,255,0.3);
  transform:scale(0);
  animation:foamPop 1.8s ease-out infinite;
}
.cc-foam-cover span:nth-child(1){left:8%;top:35%;width:14%;aspect-ratio:1;animation-delay:.0s}
.cc-foam-cover span:nth-child(2){left:22%;top:20%;width:10%;aspect-ratio:1;animation-delay:.3s}
.cc-foam-cover span:nth-child(3){left:36%;top:14%;width:12%;aspect-ratio:1;animation-delay:.6s}
.cc-foam-cover span:nth-child(4){left:52%;top:10%;width:9%;aspect-ratio:1;animation-delay:.2s}
.cc-foam-cover span:nth-child(5){left:64%;top:20%;width:13%;aspect-ratio:1;animation-delay:.9s}
.cc-foam-cover span:nth-child(6){left:78%;top:30%;width:10%;aspect-ratio:1;animation-delay:.5s}
.cc-foam-cover span:nth-child(7){left:12%;top:60%;width:11%;aspect-ratio:1;animation-delay:.7s}
.cc-foam-cover span:nth-child(8){left:30%;top:55%;width:14%;aspect-ratio:1;animation-delay:.4s}
.cc-foam-cover span:nth-child(9){left:50%;top:62%;width:9%;aspect-ratio:1;animation-delay:1.0s}
.cc-foam-cover span:nth-child(10){left:66%;top:55%;width:12%;aspect-ratio:1;animation-delay:.1s}
.cc-foam-cover span:nth-child(11){left:82%;top:60%;width:10%;aspect-ratio:1;animation-delay:1.1s}
.cc-foam-cover span:nth-child(12){left:18%;top:45%;width:8%;aspect-ratio:1;animation-delay:1.4s}
.cc-foam-cover span:nth-child(13){left:42%;top:38%;width:10%;aspect-ratio:1;animation-delay:1.6s}
.cc-foam-cover span:nth-child(14){left:70%;top:42%;width:9%;aspect-ratio:1;animation-delay:1.2s}
@keyframes foamPop{0%{transform:scale(0);opacity:0}20%{transform:scale(1);opacity:1}80%{transform:scale(1.1);opacity:1}100%{transform:scale(0.6);opacity:0}}

/* Shine — moving highlight sweep + glow */
.cc-shine-sweep{
  position:absolute;inset:22% 3% 18% 3%;pointer-events:none;opacity:0;transition:opacity .35s;
  clip-path:polygon(0% 78%,2% 50%,7% 38%,16% 35%,30% 23%,38% 5%,62% 0%,78% 12%,86% 32%,93% 36%,98% 50%,100% 78%,100% 100%,0% 100%);
  background:linear-gradient(110deg,
    transparent 35%,
    rgba(255,225,160,0.0) 42%,
    rgba(255,225,160,0.55) 50%,
    rgba(255,255,220,0.85) 52%,
    rgba(255,225,160,0.55) 54%,
    transparent 60%
  );
  background-size:300% 300%;
  animation:shineSweep 1.4s ease-in-out infinite;
}
.sequence[data-active="3"] .cc-shine-sweep{opacity:1}
.sequence[data-active="3"] .cc-body{filter:drop-shadow(0 8px 30px rgba(212,168,90,0.55)) brightness(1.05)}
@keyframes shineSweep{0%{background-position:-100% 0}100%{background-position:200% 0}}

@media(max-width:760px){
  .seq-car-wrap{width:92vw}
}

.sequence[data-active="0"] .seq-car-wrap{transform:translateX(-22%) scale(0.86);filter:brightness(0.75)}
.sequence[data-active="1"] .seq-car-wrap{transform:translateX(0) scale(1);filter:brightness(1.1) saturate(1.25)}
.sequence[data-active="2"] .seq-car-wrap{transform:translateX(0) scale(1.04);filter:brightness(1.15) contrast(1.08)}
.sequence[data-active="3"] .seq-car-wrap{transform:translateX(14%) scale(1.06);filter:brightness(1.3) saturate(1.4) drop-shadow(0 0 40px rgba(212,168,90,0.6))}

.seq-hud{position:absolute;top:24px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:14px;z-index:5}
.seq-progress{width:min(70vw,560px);height:2px;background:rgba(255,255,255,0.1);border-radius:2px;overflow:hidden}
.seq-progress-fill{height:100%;width:0;background:linear-gradient(90deg, var(--accent), var(--gold));transition:width .15s linear;box-shadow:0 0 12px var(--accent)}
.seq-phases{display:flex;gap:30px;justify-content:center;flex-wrap:wrap}
.seq-phase{display:flex;align-items:center;gap:8px;opacity:0.4;transition:opacity .4s}
.seq-phase.on{opacity:1}
.seq-phase .num{font-family:var(--mono);font-size:10px;color:var(--accent);letter-spacing:0.15em}
.seq-phase .lbl{font-family:var(--mono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--text)}

.seq-copy{position:absolute;bottom:60px;left:var(--pad);right:var(--pad);max-width:580px;z-index:5;opacity:0;transform:translateY(20px);transition:opacity .3s, transform .3s;pointer-events:none}
.seq-copy.on{opacity:1;transform:none}
.seq-copy .display{margin-top:14px;font-size:clamp(32px,4.5vw,64px)}
.seq-copy .lead{margin-top:14px;font-size:15px;max-width:48ch}

@media(max-width:760px){
  .seq-car-wrap{width:88vw}
  .seq-phases{gap:14px}
  .seq-phase .lbl{display:none}
  .seq-copy{bottom:30px}
}

/* ============= PROOF ============= */
.proof{padding:120px var(--pad);border-bottom:1px solid var(--line)}
.proof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.proof-item{display:flex;flex-direction:column;gap:8px;padding:30px 0;border-top:1px solid var(--line)}
.proof-num{font-size:clamp(48px,6vw,84px);line-height:1;color:var(--text)}
.proof-num .plus{color:var(--accent);font-size:0.55em;margin-left:4px;vertical-align:top}
.proof-item .mono{font-size:11px;letter-spacing:0.2em;color:var(--text-mute);text-transform:uppercase}
@media(max-width:760px){.proof-grid{grid-template-columns:repeat(2,1fr);gap:20px}}

/* ============= PACKAGES ============= */
.packages{padding:140px var(--pad);position:relative}
.packages::before{content:"";position:absolute;top:20%;right:-200px;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle, rgba(0,224,255,0.06), transparent 70%);pointer-events:none}

.pkg-toggle{display:inline-flex;padding:6px;background:var(--bg-2);border:1px solid var(--line);border-radius:999px;align-self:flex-end}
.pkg-toggle button{padding:10px 18px;border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-mute);transition:all .25s}
.pkg-toggle button.active{background:var(--accent);color:#000}
.pkg-toggle .save{display:inline-block;margin-left:6px;font-size:9px;color:var(--gold);opacity:0.85}
.pkg-toggle button.active .save{color:rgba(0,0,0,0.6)}

.pkg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:20px}
.pkg{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-lg);padding:36px;display:flex;flex-direction:column;gap:24px;position:relative;transition:all .3s}
.pkg:hover{border-color:var(--line-strong);transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(0,224,255,0.18)}
.pkg.featured{background:linear-gradient(180deg,#0e1822,#0a1018);border-color:rgba(0,224,255,0.25)}
.pkg.featured::before{content:"";position:absolute;inset:0;border-radius:var(--radius-lg);padding:1px;background:linear-gradient(140deg, rgba(0,224,255,0.4), transparent 50%);-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}

.pkg-head h3{font-size:32px;margin-top:14px}
.pkg-head p{margin-top:10px;font-size:14px}
.pkg-price{padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pkg-price .amount{font-family:var(--display);font-size:54px;line-height:1;display:block;color:var(--text)}
.pkg-price .amount .pre{font-size:0.4em;color:var(--text-mute);font-family:var(--mono);letter-spacing:0.1em;margin-right:8px}
.pkg-price .per{font-family:var(--mono);font-size:11px;letter-spacing:0.15em;color:var(--text-mute);text-transform:uppercase;margin-top:6px;display:block}
.pkg-list{list-style:none;display:flex;flex-direction:column;gap:10px;flex:1}
.pkg-list li{padding-left:22px;position:relative;font-size:14px;color:#c8ccd4}
.pkg-list li::before{content:"○";position:absolute;left:0;color:var(--accent)}

.pkg-footer{margin-top:60px;padding-top:32px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.pkg-footer .mono{font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--text-mute)}

@media(max-width:900px){.pkg-grid{grid-template-columns:1fr}}

/* ============= HOW ============= */
.how{padding:140px var(--pad);border-top:1px solid var(--line)}
.how-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.how-step{padding:32px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-lg);display:flex;flex-direction:column;gap:14px;min-height:240px;transition:all .3s}
.how-step:hover{border-color:var(--accent);background:#0e1822}
.how-num{font-size:10px;letter-spacing:0.22em;color:var(--accent);text-transform:uppercase}
.how-step h3{font-size:24px}
.how-step p{font-size:14px}
@media(max-width:900px){.how-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.how-grid{grid-template-columns:1fr}}

/* ============= GALLERY BEFORE/AFTER ============= */
.gallery{padding:140px var(--pad);background:var(--bg-1);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.gallery-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.ba-card{display:flex;flex-direction:column;gap:14px}
.ba-slider{position:relative;aspect-ratio:16/10;border-radius:var(--radius-lg);overflow:hidden;cursor:ew-resize;user-select:none}
.ba{position:absolute;inset:0}
.ba .slot{height:100%;border-radius:0}
.ba-after{clip-path:inset(0 0 0 50%)}
.ba-after .slot{background:
  repeating-linear-gradient(135deg, rgba(212,168,90,0.05) 0 14px, rgba(212,168,90,0.10) 14px 28px),
  linear-gradient(180deg,#1a1408,#0a0904);
  border-color:rgba(212,168,90,0.3);color:var(--gold)}
.ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--accent);transform:translateX(-50%);pointer-events:none}
.ba-handle-dot{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:36px;height:36px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 6px rgba(0,224,255,0.2), 0 0 30px var(--accent)}
.ba-handle-dot::before,.ba-handle-dot::after{content:"";position:absolute;top:50%;width:8px;height:8px;border-top:2px solid #000;transform-origin:center}
.ba-handle-dot::before{left:8px;transform:translateY(-50%) rotate(-45deg);border-left:2px solid #000}
.ba-handle-dot::after{right:8px;transform:translateY(-50%) rotate(135deg);border-left:2px solid #000}
.ba-label{font-size:11px;letter-spacing:0.15em;color:var(--text-mute);text-transform:uppercase}
@media(max-width:900px){.gallery-grid{grid-template-columns:1fr}}

/* ============= TESTIMONIALS ============= */
.testimonials{padding:140px var(--pad)}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.testi{padding:36px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-lg);display:flex;flex-direction:column;gap:18px}
.testi .stars{color:var(--gold);font-size:18px;letter-spacing:2px}
.testi blockquote{font-family:var(--body);font-size:17px;line-height:1.5;color:#e6e9ee;flex:1}
.testi figcaption{display:flex;align-items:center;gap:12px;padding-top:18px;border-top:1px solid var(--line)}
.testi .avatar{width:42px;height:42px;border-radius:50%;background:radial-gradient(circle at 30% 30%, var(--c,#5ad4c4), #161b24)}
.testi strong{display:block;font-weight:600;font-size:14px}
.testi figcaption span{font-family:var(--mono);font-size:10px;letter-spacing:0.14em;color:var(--text-mute);text-transform:uppercase}
@media(max-width:900px){.testi-grid{grid-template-columns:1fr}}

/* ============= ECO ============= */
.eco{padding:140px var(--pad);border-top:1px solid var(--line);background:var(--bg-1)}
.eco-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:80px;align-items:center}
.eco-meter{display:flex;flex-direction:column;gap:18px}
.eco-meter-bar{height:80px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;position:relative;display:flex;align-items:center;padding:0 24px;overflow:hidden}
.eco-meter-bar::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--p,8%);background:linear-gradient(90deg, rgba(0,224,255,0.25), rgba(0,224,255,0.05))}
.eco-meter-bar.full::before{width:100%;background:linear-gradient(90deg, rgba(255,92,92,0.25), rgba(255,92,92,0.05))}
.eco-meter-bar .mono{position:relative;font-size:14px;letter-spacing:0.16em;color:var(--text);text-transform:uppercase;z-index:1}
.eco-pill{margin-top:24px;padding:10px 16px;display:inline-block;background:var(--bg-2);border:1px solid var(--line);border-radius:999px}
.eco-pill .mono{font-size:10px;letter-spacing:0.18em;color:var(--text-mute)}
@media(max-width:900px){.eco-grid{grid-template-columns:1fr;gap:40px}}

/* ============= PARTNERS ============= */
.partners{padding:80px var(--pad);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.partners-label{display:block;text-align:center;font-size:11px;letter-spacing:0.22em;color:var(--text-mute);text-transform:uppercase;margin-bottom:36px}
.partners-row{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.partners-row .display{font-size:clamp(20px,2.4vw,30px);color:#888f9a;letter-spacing:0.01em;transition:color .3s;text-transform:uppercase}
.partners-row .display:hover{color:var(--text)}
.partners-row .dotsep{color:var(--accent)}

/* ============= CTA ============= */
.cta{padding:140px var(--pad)}
.cta-inner{position:relative;border-radius:var(--radius-lg);padding:120px 60px;text-align:center;overflow:hidden;background:linear-gradient(180deg,#0a1018,#04060a);border:1px solid var(--line)}
.cta-bg{position:absolute;inset:0;background:
  radial-gradient(circle at 20% 20%, rgba(0,224,255,0.18), transparent 50%),
  radial-gradient(circle at 80% 80%, rgba(212,168,90,0.12), transparent 50%);
}
.cta-inner > *{position:relative;z-index:1}
.cta-inner h2{margin-top:14px;font-size:clamp(48px,8vw,120px)}
.cta-row{display:flex;gap:14px;justify-content:center;margin-top:40px;flex-wrap:wrap}
.cta-guarantee{display:block;margin-top:36px;font-size:11px;letter-spacing:0.2em;color:var(--text-mute);text-transform:uppercase}