/* ══════════════════════════════════════════
   INTRO — cinematic homepage opener
   1:1 extraction of index.html's <style> block, scoped under #intro-root
   (which stands in for index.html's own `:root`/`html,body` rules) so
   dropping this file into another page can't leak tokens or force
   overflow:hidden on the whole document.
   ══════════════════════════════════════════ */
#intro-root{
  --gold:#c9a227;--gold-l:#eace55;--gold-d:#8a6d0a;
  --bg:#ffffff;--text:#140d06;--muted:#5c4c30;
  --border:rgba(201,162,39,0.2);
  --photo-w:clamp(220px,30vw,420px);
  position:fixed;inset:0;z-index:10000;
  width:100%;height:100%;overflow:hidden;
  background:var(--bg);color:var(--text);
  font-family:'Raleway',sans-serif;
}
@media(max-width:900px){#intro-root{--photo-w:0px}}
:where(#intro-root) *,:where(#intro-root) *::before,:where(#intro-root) *::after{margin:0;padding:0;box-sizing:border-box}

/* ── HANDOFF — home.html-only: the intro plays once per session, then
   fades out to reveal #main-content underneath. #main-content stays
   visible by default (never hidden via opacity) so a JS error in the
   intro can never black out the real site. ── */
body.intro-lock{overflow:hidden;height:100vh}
#intro-root.intro-fade-out{opacity:0;pointer-events:none;transition:opacity .65s ease}
#main-content.revealed{animation:mainReveal .5s ease}
#main-content.revealed.no-anim{animation:none}
@keyframes mainReveal{from{opacity:.4}to{opacity:1}}

/* ── CANVAS LAYERS ── */
#bg-canvas{position:fixed;inset:0;pointer-events:none;z-index:1;will-change:transform}
#fx-c     {position:fixed;inset:0;pointer-events:none;z-index:2;will-change:transform}
#pt-canvas{position:fixed;inset:0;pointer-events:none;z-index:3;will-change:transform}

/* ── LEFT PHOTO PANEL ── */
#photo-panel{
  position:fixed;top:0;left:0;bottom:0;width:var(--photo-w);
  z-index:1;overflow:hidden;pointer-events:none;
  background:url("../owner.jpg") center 14% / cover no-repeat;
}
#photo-panel::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,13,6,.18) 0%,transparent 22%,transparent 78%,rgba(20,13,6,.3) 100%);
}
#photo-panel::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 50%,var(--bg) 100%);
}
#photo-divider{
  position:fixed;top:0;bottom:0;left:var(--photo-w);width:1px;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(201,162,39,.4) 15%,rgba(201,162,39,.4) 85%,transparent);
}
@media(max-width:900px){#photo-panel,#photo-divider{display:none}}

/* ── OVERLAYS ── */
#grain{
  position:fixed;inset:0;z-index:9995;pointer-events:none;opacity:0.35;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
  background-size:200px;
}
#vignette{
  position:fixed;inset:0;z-index:9994;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,transparent 20%,rgba(20,15,5,0.10) 100%);
}
#scanlines{
  position:fixed;inset:0;z-index:9993;pointer-events:none;opacity:0.025;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,1) 0px,rgba(0,0,0,1) 1px,transparent 1px,transparent 3px);
  animation:scanMove 8s linear infinite;
}
@keyframes scanMove{0%{background-position:0 0}100%{background-position:0 100px}}

#bar-top,#bar-bot{
  position:fixed;left:0;width:100%;height:clamp(30px,5vh,60px);
  background:#fff;z-index:9996;pointer-events:none;
  animation:barReveal .6s ease forwards;
}
#bar-top{top:0}
#bar-bot{bottom:0}
@keyframes barReveal{from{transform:scaleY(2)}to{transform:scaleY(1)}}

/* ── WORLDWIDE DELIVERY TICKER (lives inside top bar) ── */
#ticker{
  position:absolute;inset:0;overflow:hidden;
  display:flex;align-items:center;
  border-bottom:1px solid rgba(201,162,39,.15);
  mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
}
#ticker-track{display:flex;align-items:center;white-space:nowrap;animation:tickerScroll 28s linear infinite;will-change:transform}
.ticker-seg{display:flex;align-items:center;flex-shrink:0}
.ticker-item{
  font-family:'Raleway',sans-serif;font-size:clamp(8px,1.05vh,11px);font-weight:700;
  letter-spacing:.25em;text-transform:uppercase;color:var(--gold-d);
  padding:0 16px;position:relative;
}
.ticker-item::after{
  content:'';position:absolute;right:-1.5px;top:50%;width:3px;height:3px;
  transform:translateY(-50%) rotate(45deg);background:rgba(201,162,39,.55);
}
.ticker-item.ticker-hl{color:var(--gold)}
@keyframes tickerScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

#mblur{
  position:fixed;inset:0;z-index:9991;pointer-events:none;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;transition:opacity .06s ease;
}
#flash{
  position:fixed;inset:0;z-index:9992;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse at center,rgba(255,245,210,0.95) 0%,rgba(255,255,255,0.55) 45%,transparent 100%);
  transition:opacity .12s ease;
}

/* ── SHAKE WRAPPER ── */
#shake{position:absolute;inset:0}
@keyframes SHAKE{
  0%,100%{transform:translate(0)}
  8%{transform:translate(-8px,4px) rotate(-.3deg)}
  18%{transform:translate(8px,-4px) rotate(.3deg)}
  28%{transform:translate(-5px,-6px) rotate(-.2deg)}
  38%{transform:translate(6px,3px) rotate(.2deg)}
  48%{transform:translate(-4px,5px) rotate(-.15deg)}
  58%{transform:translate(5px,-3px) rotate(.15deg)}
  68%{transform:translate(-3px,2px)}
  78%{transform:translate(3px,-2px)}
  88%{transform:translate(-1px,1px)}
}
.exploding{animation:SHAKE .45s ease both !important}

/* ── HUD ── */
#prog-track{position:fixed;bottom:clamp(30px,5vh,60px);left:0;width:100%;height:2px;background:rgba(201,162,39,0.06);z-index:9997}
#prog-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--gold-d),var(--gold),var(--gold-l));box-shadow:0 0 10px rgba(201,162,39,0.5)}
#timer{
  position:fixed;top:clamp(34px,6.5vh,68px);right:24px;
  font-family:'Raleway',sans-serif;font-size:10px;font-weight:600;letter-spacing:.3em;
  color:var(--muted);z-index:9997;
}
#mute-btn{
  position:fixed;top:clamp(34px,6.5vh,68px);left:22px;
  background:transparent;border:1px solid rgba(201,162,39,.28);
  color:rgba(201,162,39,.75);font-size:13px;cursor:pointer;
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  z-index:9999;transition:all .2s;font-family:'Raleway',sans-serif;letter-spacing:0;
}
#mute-btn:hover{border-color:var(--gold);color:var(--gold)}
#skip-btn{
  position:fixed;top:clamp(58px,11vh,96px);right:24px;
  background:transparent;border:1px solid rgba(201,162,39,.28);
  color:rgba(201,162,39,.75);font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  padding:9px 14px;cursor:pointer;font-family:'Raleway',sans-serif;
  z-index:9999;transition:all .2s;
}
#skip-btn:hover{border-color:var(--gold);color:var(--gold)}
#skip-btn.hidden{display:none}
#nav-prev,#nav-next{
  position:fixed;top:50%;transform:translateY(-50%);
  background:rgba(255,255,255,.7);border:1px solid rgba(201,162,39,.32);
  color:rgba(138,109,10,.85);font-size:15px;line-height:1;cursor:pointer;
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  z-index:9999;transition:transform .2s,border-color .2s,color .2s,opacity .2s;
  font-family:'Raleway',sans-serif;box-shadow:0 4px 16px rgba(0,0,0,.06);
}
#nav-prev{left:16px}
#nav-next{right:16px}
#nav-prev:hover,#nav-next:hover{border-color:var(--gold);color:var(--gold-d);transform:translateY(-50%) scale(1.08)}
#nav-prev:active,#nav-next:active{transform:translateY(-50%) scale(.92)}
#nav-prev.disabled,#nav-next.disabled{opacity:.28;pointer-events:none}
@media(max-width:600px){#nav-prev,#nav-next{width:34px;height:34px;font-size:13px}}
#dots{
  position:fixed;bottom:clamp(36px,6.2vh,70px);left:50%;transform:translateX(-50%);
  display:flex;gap:8px;z-index:9997;
}
.dot{
  width:5px;height:5px;border-radius:50%;
  background:rgba(201,162,39,0.2);border:1px solid rgba(201,162,39,0.3);
  transition:all .4s ease;cursor:pointer;
}
.dot{pointer-events:all}
.dot.on{background:var(--gold);border-color:var(--gold);box-shadow:0 0 6px var(--gold)}


/* ── SCENE BASE ── */
.scene{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding-left:var(--photo-w);
  opacity:0;z-index:3;pointer-events:none;
  transition:opacity 1.1s ease;
}
.scene.active{
  opacity:1;z-index:10;pointer-events:all;
}
.scene.instant{transition:none}

/* ── IMPACT TEXT ANIMATIONS ── */
@keyframes slamIn{
  from{opacity:0;transform:scale(1.3) translateY(-8px)}
  to  {opacity:1;transform:scale(1)   translateY(0)}
}
@keyframes crashLeft{
  from{opacity:0;transform:translateX(70px)}
  to  {opacity:1;transform:translateX(0)}
}
@keyframes crashRight{
  from{opacity:0;transform:translateX(-70px)}
  to  {opacity:1;transform:translateX(0)}
}
@keyframes dropIn{
  from{opacity:0;transform:translateY(-44px) scale(.82)}
  to  {opacity:1;transform:translateY(0)     scale(1)}
}
@keyframes riseIn   {from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn   {from{opacity:0}to{opacity:1}}
@keyframes nameReveal{from{opacity:0;transform:scale(.88) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes expandBar{from{width:0}to{width:100%;opacity:1}}

/* ── COMET STREAKS ── */
.comet{
  position:absolute;pointer-events:none;
  height:1px;background:linear-gradient(90deg,transparent,rgba(201,162,39,.75),transparent);
  animation:cometFly linear both;
}
@keyframes cometFly{
  from{transform:translateX(-120%);opacity:1}
  to  {transform:translateX(200vw); opacity:0}
}

/* ════════════════════════════════
   SCENE 1 — OPENING
════════════════════════════════ */
#s1{background:radial-gradient(ellipse at 50% 55%,#fff5da 0%,var(--bg) 65%);background-origin:content-box;background-clip:content-box}
.s1-ring{
  position:absolute;border-radius:50%;
  border:1px solid rgba(201,162,39,0.07);
  animation:ringPulse 4s ease-in-out infinite;
}
.s1-ring:nth-child(1){width:clamp(280px,58vmin,600px);height:clamp(280px,58vmin,600px)}
.s1-ring:nth-child(2){width:clamp(210px,44vmin,450px);height:clamp(210px,44vmin,450px);border-color:rgba(201,162,39,.11);animation-delay:.6s}
.s1-ring:nth-child(3){width:clamp(140px,29vmin,300px);height:clamp(140px,29vmin,300px);border-color:rgba(201,162,39,.18);animation-delay:1.2s}
@keyframes ringPulse{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.025)}}
.s1-burst{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 50%,rgba(201,162,39,0.08) 0%,transparent 60%);
  opacity:0;animation:burstIn 1s ease forwards 1s;
}
@keyframes burstIn{0%{opacity:0;transform:scale(.6)}60%{opacity:1}100%{opacity:.4;transform:scale(1)}}
.s1-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center}
.s1-pre{
  font-family:'Raleway',sans-serif;font-size:clamp(8px,1vw,11px);font-weight:700;
  letter-spacing:.55em;text-transform:uppercase;color:var(--gold);
  opacity:0;animation:dropIn .65s cubic-bezier(.16,1,.3,1) forwards .5s;
}
.s1-name-wrap{
  position:relative;margin:14px 0 10px;
  opacity:0;animation:slamIn .9s cubic-bezier(.16,1,.3,1) forwards .95s;
}
.s1-name,.s1-name-g1,.s1-name-g2{
  font-family:'Playfair Display',serif;font-size:clamp(46px,9vw,110px);
  font-weight:900;letter-spacing:.04em;line-height:1;
  background:linear-gradient(135deg,#7a5f08 0%,var(--gold) 28%,var(--gold-l) 50%,var(--gold) 72%,#7a5f08 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.s1-name{
  filter:drop-shadow(0 0 40px rgba(201,162,39,.22));
  animation:shimmer 3.5s linear infinite 2.8s;
}
@keyframes shimmer{0%{background-position:200% center}100%{background-position:-200% center}}
.s1-name-g1,.s1-name-g2{position:absolute;top:0;left:0;width:100%;pointer-events:none;opacity:0}
.s1-name-g1{
  filter:drop-shadow(0 0 2px rgba(255,100,50,0.7));
  animation:glitch1 6s ease-in-out infinite 3s;
}
.s1-name-g2{
  filter:drop-shadow(0 0 2px rgba(50,200,255,0.5));
  animation:glitch2 6s ease-in-out infinite 3s;
}
@keyframes glitch1{
  0%,88%,100%{opacity:0;transform:translate(0)}
  89%{opacity:.7;transform:translate(-4px,1px);clip-path:polygon(0 15%,100% 15%,100% 40%,0 40%)}
  90%{opacity:.7;transform:translate(3px,-1px);clip-path:polygon(0 55%,100% 55%,100% 70%,0 70%)}
  91%{opacity:0;transform:translate(0)}
}
@keyframes glitch2{
  0%,88%,100%{opacity:0;transform:translate(0)}
  89.5%{opacity:.5;transform:translate(4px,-1px);clip-path:polygon(0 65%,100% 65%,100% 85%,0 85%)}
  90.5%{opacity:.5;transform:translate(-3px,2px);clip-path:polygon(0 25%,100% 25%,100% 38%,0 38%)}
  91.5%{opacity:0}
}
.s1-bar{width:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);animation:expandBar 1s ease forwards 2s}
.s1-post{
  font-family:'Raleway',sans-serif;font-size:clamp(9px,1.1vw,13px);font-weight:300;
  letter-spacing:.38em;text-transform:uppercase;color:rgba(20,13,6,.8);margin-top:10px;
  opacity:0;animation:crashLeft .7s cubic-bezier(.16,1,.3,1) forwards 2s;
}
.s1-badge{
  display:flex;align-items:center;gap:12px;margin-top:22px;
  border:1px solid rgba(255,110,20,.4);padding:10px 24px;
  background:rgba(255,110,20,.05);
  box-shadow:0 4px 22px rgba(255,90,10,.14);
  opacity:0;animation:crashRight .7s cubic-bezier(.16,1,.3,1) forwards 2.6s;
}
.s1-badge-dot{width:6px;height:6px;border-radius:50%;background:#ff7a1a;box-shadow:0 0 8px rgba(255,122,26,.8);animation:pulseDot 1.5s ease-in-out infinite}
.s1-badge-text{
  font-family:'Raleway',sans-serif;font-size:clamp(10.5px,1.15vw,13.5px);font-weight:800;
  letter-spacing:.28em;text-transform:uppercase;
  animation:fireBlink 1.3s ease-in-out infinite;
}
@keyframes pulseDot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.5}}
@keyframes fireBlink{
  0%,100%{color:#c62a00;text-shadow:0 0 6px rgba(255,122,26,.5),0 0 16px rgba(255,61,0,.3);opacity:1}
  50%{color:#ff9a1f;text-shadow:0 0 16px rgba(255,183,3,.9),0 0 30px rgba(255,61,0,.6);opacity:.5}
}

/* ════════════════════════════════
   SCENE 2 — HOOK + MAP
════════════════════════════════ */
#s2{flex-direction:row;gap:clamp(24px,5vw,90px);padding:0 clamp(28px,5vw,70px);padding-left:calc(var(--photo-w) + clamp(28px,5vw,70px));
    background:radial-gradient(ellipse at 70% 50%,#fff8ea 0%,var(--bg) 60%);background-origin:content-box;background-clip:content-box}
.s2-text{flex:1;max-width:460px;display:flex;flex-direction:column;gap:18px}
.s2-eyebrow{
  font-family:'Raleway',sans-serif;font-size:clamp(8px,.9vw,11px);font-weight:700;
  letter-spacing:.5em;text-transform:uppercase;color:var(--gold);
  opacity:0;animation:dropIn .6s cubic-bezier(.16,1,.3,1) forwards .3s;
}
.s2-h1{
  font-family:'Playfair Display',serif;font-size:clamp(30px,5vw,62px);
  font-weight:700;line-height:1.12;overflow:hidden;
  opacity:0;animation:slamIn .85s cubic-bezier(.16,1,.3,1) forwards .6s;
}
.s2-h1 em{font-style:italic;color:var(--gold)}
.s2-p{
  font-family:'Raleway',sans-serif;font-size:clamp(11px,1.2vw,14px);font-weight:300;
  line-height:1.85;color:rgba(20,13,6,.85);
  opacity:0;animation:crashLeft .7s cubic-bezier(.16,1,.3,1) forwards 1s;
}
.s2-pills{display:flex;gap:8px;flex-wrap:wrap;opacity:0;animation:crashRight .7s cubic-bezier(.16,1,.3,1) forwards 1.4s}
.s2-pill{
  font-family:'Raleway',sans-serif;font-size:9px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  border:1px solid var(--border);padding:6px 14px;position:relative;overflow:hidden;
}
.s2-pill::before{
  content:'';position:absolute;inset:0;
  background:rgba(201,162,39,0.06);
  transform:scaleX(0);transform-origin:left;
  animation:pillFill .5s ease forwards;
}
.s2-pill:nth-child(1)::before{animation-delay:1.6s}
.s2-pill:nth-child(2)::before{animation-delay:1.75s}
.s2-pill:nth-child(3)::before{animation-delay:1.9s}
@keyframes pillFill{to{transform:scaleX(1)}}
.s2-map{flex:1;max-width:400px;opacity:0;animation:crashLeft .8s cubic-bezier(.16,1,.3,1) forwards .7s}
@media(max-width:680px){#s2{flex-direction:column;gap:20px;padding:0 24px}.s2-map{max-width:100%;width:100%}}

/* ════════════════════════════════
   SCENE 3 — HOW IT WORKS
════════════════════════════════ */
#s3{gap:clamp(24px,3.5vh,40px);padding:0 clamp(20px,4vw,60px);padding-left:calc(var(--photo-w) + clamp(20px,4vw,60px))}
.s3-eyebrow{
  font-family:'Raleway',sans-serif;font-size:clamp(8px,.9vw,11px);font-weight:700;
  letter-spacing:.6em;text-transform:uppercase;color:var(--gold);
  opacity:0;animation:dropIn .6s cubic-bezier(.16,1,.3,1) forwards .3s;
}
.s3-title{
  font-family:'Playfair Display',serif;font-size:clamp(26px,3.8vw,48px);font-weight:700;
  text-align:center;margin-top:-14px;
  opacity:0;animation:slamIn .8s cubic-bezier(.16,1,.3,1) forwards .5s;
}
.s3-steps{display:flex;align-items:flex-start;width:100%;max-width:1180px}
.s3-step{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;opacity:0}
.s3-step:nth-child(1){animation:crashRight .75s cubic-bezier(.16,1,.3,1) forwards .9s}
.s3-step:nth-child(3){animation:dropIn .75s cubic-bezier(.16,1,.3,1) forwards 1.4s}
.s3-step:nth-child(5){animation:crashLeft .75s cubic-bezier(.16,1,.3,1) forwards 1.9s}
.s3-step:nth-child(7){animation:dropIn .75s cubic-bezier(.16,1,.3,1) forwards 2.7s}
.s3-conn{
  flex:0 0 clamp(26px,4vw,56px);display:flex;align-items:center;padding-top:48px;
  opacity:0;overflow:hidden;
}
.s3-conn:nth-child(2){animation:fadeIn .4s ease forwards 1.2s}
.s3-conn:nth-child(4){animation:fadeIn .4s ease forwards 1.7s}
.s3-conn:nth-child(6){animation:fadeIn .4s ease forwards 2.4s}
.s3-conn-line{height:1px;background:linear-gradient(90deg,transparent,rgba(201,162,39,.5),transparent);width:0}
.s3-conn:nth-child(2) .s3-conn-line{animation:growLine .7s ease forwards 1.3s}
.s3-conn:nth-child(4) .s3-conn-line{animation:growLine .7s ease forwards 1.8s}
.s3-conn:nth-child(6) .s3-conn-line{animation:growLine .7s ease forwards 2.5s}
@keyframes growLine{to{width:100%}}
.s3-num{
  font-family:'Playfair Display',serif;font-size:40px;font-weight:700;line-height:1;
  color:rgba(138,109,10,.65);-webkit-text-stroke:1px rgba(138,109,10,.65);margin-bottom:8px;
}
.s3-circle{
  width:52px;height:52px;border-radius:50%;border:1px solid rgba(201,162,39,.3);
  display:flex;align-items:center;justify-content:center;margin-bottom:12px;
  background:rgba(201,162,39,.03);position:relative;transition:all .3s;
}
.s3-circle::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(201,162,39,.07)}
.s3-h{font-family:'Playfair Display',serif;font-size:clamp(13px,1.7vw,18px);font-weight:600;margin-bottom:8px;line-height:1.25}
.s3-p{font-family:'Raleway',sans-serif;font-size:clamp(10.5px,1vw,13px);font-weight:500;color:rgba(30,22,12,.88);line-height:1.65;max-width:150px}
.s3-note{
  font-family:'Raleway',sans-serif;font-size:clamp(11px,1.05vw,14px);font-weight:700;
  letter-spacing:.18em;color:var(--gold-d);text-transform:uppercase;
  opacity:0;animation:crashLeft .7s cubic-bezier(.16,1,.3,1) forwards 3.5s;
  border-top:1px solid rgba(201,162,39,.22);padding-top:14px;text-align:center;
}
@media(max-width:900px){
  .s3-steps{flex-wrap:wrap;max-width:520px;row-gap:22px}
  .s3-step{flex:1 1 40%;min-width:130px}
  .s3-conn{display:none}
}

/* ════════════════════════════════
   SCENE 4 — BENEFITS
════════════════════════════════ */
#s4{
  gap:clamp(18px,3vh,34px);
  background:radial-gradient(ellipse at 50% 90%,#fff8ea 0%,var(--bg) 55%);
  background-origin:content-box;background-clip:content-box;
  padding:0 clamp(20px,4vw,60px);
  padding-left:calc(var(--photo-w) + clamp(20px,4vw,60px));
}
.s4-eyebrow{
  font-family:'Raleway',sans-serif;font-size:clamp(8px,.9vw,11px);font-weight:700;
  letter-spacing:.6em;text-transform:uppercase;color:var(--gold);
  opacity:0;animation:dropIn .6s cubic-bezier(.16,1,.3,1) forwards .3s;
}
.s4-title{
  font-family:'Playfair Display',serif;font-size:clamp(24px,3.5vw,44px);font-weight:700;
  text-align:center;margin-top:-14px;
  opacity:0;animation:slamIn .8s cubic-bezier(.16,1,.3,1) forwards .5s;
}
.s4-stats{
  display:flex;align-items:center;gap:0;flex-wrap:wrap;justify-content:center;
  border:1px solid rgba(201,162,39,.08);background:rgba(201,162,39,.02);
  padding:clamp(14px,2vh,22px) clamp(16px,3.2vw,40px);
  opacity:0;animation:crashRight .8s cubic-bezier(.16,1,.3,1) forwards .8s;
  width:100%;max-width:900px;
}
.s4-stat{flex:1;min-width:110px;display:flex;flex-direction:column;align-items:center;text-align:center}
.s4-stat-val{
  font-family:'Playfair Display',serif;font-size:clamp(28px,4.5vw,52px);
  font-weight:900;line-height:1;
  background:linear-gradient(135deg,var(--gold-d),var(--gold),var(--gold-l));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 0 12px rgba(201,162,39,.25));
}
.s4-stat-unit{font-family:'Playfair Display',serif;font-size:clamp(16px,2.5vw,26px);font-weight:900;display:inline;
  background:inherit;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.s4-stat-label{font-family:'Raleway',sans-serif;font-size:clamp(8px,.8vw,10px);font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.s4-stat-div{width:1px;height:48px;background:rgba(201,162,39,.12);margin:0 clamp(8px,1.5vw,22px);flex-shrink:0}
@media(max-width:560px){.s4-stat-div{display:none}}
.s4-cards{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(12px,2vw,36px)}
.s4-card{
  flex:1;min-width:160px;max-width:240px;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(16px,2.5vh,26px) 16px;
  border:1px solid rgba(201,162,39,.07);background:rgba(201,162,39,.02);
  position:relative;opacity:0;
  transform-style:preserve-3d;transition:transform .1s ease;
  will-change:transform;
}
.s4-card::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:38px;height:1px;background:var(--gold)}
.s4-card::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 0%,rgba(201,162,39,.04) 0%,transparent 70%);
  opacity:0;transition:opacity .3s;
}
.s4-card:hover::after{opacity:1}
.s4-card:nth-child(1){animation:crashRight .8s cubic-bezier(.16,1,.3,1) forwards 1.3s}
.s4-card:nth-child(2){animation:slamIn   .8s cubic-bezier(.16,1,.3,1) forwards 1.7s}
.s4-card:nth-child(3){animation:crashLeft .8s cubic-bezier(.16,1,.3,1) forwards 2.1s}
.s4-icon{width:52px;height:52px;margin-bottom:14px}
.s4-card-title{font-family:'Playfair Display',serif;font-size:clamp(15px,1.8vw,20px);font-weight:700;color:var(--gold-d);margin-bottom:8px;line-height:1.25}
.s4-card-desc{font-family:'Raleway',sans-serif;font-size:clamp(10px,.9vw,12px);font-weight:300;color:var(--muted);line-height:1.75}

/* ════════════════════════════════
   SCENE 5 — CTA
════════════════════════════════ */
#s5{gap:18px;background:radial-gradient(ellipse at 50% 35%,#fff3df 0%,var(--bg) 60%);background-origin:content-box;background-clip:content-box}
.s5-rings{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}
.s5-ring{
  position:absolute;border-radius:50%;
  border:1px solid rgba(201,162,39,.06);
  animation:ringExpand 4.5s ease-out infinite;
  top:50%;left:50%;transform:translate(-50%,-50%);
}
.s5-ring:nth-child(1){width:200px;height:200px;animation-delay:0s}
.s5-ring:nth-child(2){width:200px;height:200px;animation-delay:1.1s}
.s5-ring:nth-child(3){width:200px;height:200px;animation-delay:2.2s}
.s5-ring:nth-child(4){width:200px;height:200px;animation-delay:3.3s}
@keyframes ringExpand{
  from{width:200px;height:200px;opacity:.7;border-color:rgba(201,162,39,.15)}
  to{width:min(90vw,900px);height:min(90vw,900px);opacity:0;border-color:rgba(201,162,39,.02)}
}
.s5-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:16px}
.s5-pre{
  font-family:'Raleway',sans-serif;font-size:clamp(8px,.9vw,11px);font-weight:700;
  letter-spacing:.6em;text-transform:uppercase;color:var(--gold);
  opacity:0;animation:dropIn .6s cubic-bezier(.16,1,.3,1) forwards .3s;
}
.s5-h{
  font-family:'Playfair Display',serif;font-size:clamp(40px,7.5vw,92px);
  font-weight:900;text-align:center;line-height:1.02;
  background:linear-gradient(135deg,var(--gold-d),var(--gold),var(--gold-l),var(--gold));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 0 30px rgba(201,162,39,.35));
  opacity:0;animation:slamIn .9s cubic-bezier(.16,1,.3,1) forwards .7s;
}
.s5-sub{
  font-family:'Raleway',sans-serif;font-size:clamp(9px,1.1vw,13px);font-weight:300;
  letter-spacing:.28em;text-transform:uppercase;color:var(--muted);
  opacity:0;animation:crashRight .7s cubic-bezier(.16,1,.3,1) forwards 1.2s;
}
.s5-sep{
  width:80px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  opacity:0;animation:fadeIn .6s ease forwards 1.6s;
}
.s5-contacts{
  display:flex;flex-direction:column;gap:11px;align-items:center;
  opacity:0;animation:crashLeft .8s cubic-bezier(.16,1,.3,1) forwards 1.9s;
}
.s5-row{display:flex;align-items:center;gap:14px;font-family:'Raleway',sans-serif}
.s5-label{font-size:9px;font-weight:700;letter-spacing:.35em;text-transform:uppercase;color:var(--gold);min-width:72px;text-align:right}
.s5-vl{width:1px;height:15px;background:rgba(201,162,39,.28)}
.s5-val{font-size:clamp(12px,1.3vw,15px);font-weight:400;letter-spacing:.04em}
.s5-val a{color:inherit;text-decoration:none}
.s5-val a:hover{text-decoration:underline;color:var(--gold)}
.s5-btn{
  font-family:'Raleway',sans-serif;font-size:clamp(14px,1.7vw,18px);font-weight:800;
  letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold-d);border:2px solid var(--gold-d);background:transparent;
  box-shadow:0 4px 26px rgba(201,162,39,.28),0 0 0 rgba(201,162,39,0);
  padding:clamp(16px,2.2vh,20px) clamp(38px,5.5vw,60px);cursor:pointer;position:relative;overflow:hidden;
  opacity:0;animation:slamIn .8s cubic-bezier(.16,1,.3,1) forwards 2.4s;
  transition:color .35s;margin-top:6px;
  display:inline-block;text-decoration:none;
}
.s5-btn::before{
  content:'';position:absolute;inset:0;background:var(--gold-d);
  transform:scaleX(0);transform-origin:left;
  transition:transform .4s cubic-bezier(.16,1,.3,1);z-index:0;
}
.s5-btn:hover::before{transform:scaleX(1)}
.s5-btn:hover{color:var(--bg);opacity:1;animation:none}
.s5-btn span{position:relative;z-index:1}
.s5-btn-ring{
  position:absolute;inset:-12px;border:1px solid rgba(201,162,39,.2);
  pointer-events:none;
  animation:btnRingPulse 2s ease-in-out infinite 3s;opacity:0;
}
@keyframes btnRingPulse{0%,100%{opacity:0;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}
@media(max-width:420px){.s5-btn-ring{inset:0}}