.heroRoot{ position:relative; width:100%; }

@keyframes wordReveal{0%{opacity:0;filter:blur(16px);transform:translateY(28px) scale(1.05);}55%{opacity:1;filter:blur(3px);}100%{opacity:1;filter:blur(0);transform:translateY(0) scale(1);}}
@keyframes lineDrift1{0%{transform:translateX(-14px);opacity:.35;}50%{transform:translateX(14px);opacity:.8;}100%{transform:translateX(-14px);opacity:.35;}}
@keyframes lineDrift2{0%{transform:translateX(10px);opacity:.25;}50%{transform:translateX(-10px);opacity:.65;}100%{transform:translateX(10px);opacity:.25;}}
@keyframes numberFloat{0%{transform:translateY(0);opacity:0;}15%{opacity:.16;}85%{opacity:.16;}100%{transform:translateY(-46px);opacity:0;}}
@keyframes gradientShift{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}
@keyframes buttonGlow{0%{box-shadow:0 12px 34px rgba(255,122,84,.26);}50%{box-shadow:0 18px 48px rgba(255,122,84,.5);}100%{box-shadow:0 12px 34px rgba(255,122,84,.26);}}
@keyframes depthA{0%{transform:translate(0,0) scale(1);}50%{transform:translate(60px,-40px) scale(1.08);}100%{transform:translate(0,0) scale(1);}}
@keyframes depthB{0%{transform:translate(0,0) scale(1);}50%{transform:translate(-50px,40px) scale(1.1);}100%{transform:translate(0,0) scale(1);}}
@keyframes depthC{0%{transform:translate(0,0) scale(1);}50%{transform:translate(40px,50px) scale(1.06);}100%{transform:translate(0,0) scale(1);}}

/* ---------- Desktop stage ---------- */
.heroDesktop{
  position:relative;width:100%;overflow:hidden;
  background:linear-gradient(180deg,#0F1B3D 0%,#0F1B3D 36%,#FBF9F4 36%,#FBF9F4 100%);
}
#heroArcCanvas{ position:absolute;top:0;left:0;width:100%;z-index:1;pointer-events:none; }

.depthBlob{ position:absolute; border-radius:50%; filter:blur(34px); z-index:0; pointer-events:none; }
.depthA{ left:-18vw; top:46%; width:72vw; height:72vw; background:radial-gradient(circle,rgba(15,27,61,.07),transparent 68%); animation:depthA 34s ease-in-out infinite; }
.depthB{ right:-20vw; top:62%; width:78vw; height:78vw; background:radial-gradient(circle,rgba(15,27,61,.06),transparent 68%); filter:blur(38px); animation:depthB 42s ease-in-out infinite; }
.depthC{ left:8vw; top:82%; width:64vw; height:64vw; background:radial-gradient(circle,rgba(15,27,61,.05),transparent 68%); animation:depthC 38s ease-in-out infinite; }

.heroStage{
  position:relative; width:1440px; transform-origin:top left; overflow:hidden; background:transparent; z-index:2;
}

.heroSection{ position:relative; width:1440px; height:820px; z-index:2; }

.heroLedger{ position:absolute; inset:0; overflow:hidden; z-index:5; opacity:1; transition:opacity .5s ease; }
.ledgerLine{ position:absolute; height:1px; background:linear-gradient(90deg,transparent,#FF7A54,#FFC24A,transparent); }
.ledgerNum{ position:absolute; font-family:ui-monospace,monospace; font-size:13px; color:#FF7A54; }
.ledgerNum:nth-child(odd){ color:#FFC24A; }

.heroLogo{ position:absolute; top:24px; left:40px; height:72px; width:auto; z-index:20; }

.heroText{ position:relative; z-index:10; height:100%; display:flex; flex-direction:column; justify-content:flex-start; padding:120px 100px 0; max-width:920px; box-sizing:border-box; }
.heroKicker{ margin:0 0 18px; font-family:'Inter',sans-serif; font-weight:500; font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,154,122,.65); animation:wordReveal .9s cubic-bezier(.2,.8,.2,1) both; }
.heroH1{ margin:0 0 28px; font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:82px; line-height:1.02; letter-spacing:-.02em; color:#F5F3EE; }
.wReveal{ display:inline-block; animation:wordReveal .9s cubic-bezier(.2,.8,.2,1) both; }
.heroAccentWord{
  animation:wordReveal .9s cubic-bezier(.2,.8,.2,1) both, gradientShift 6s ease-in-out .9s infinite;
  background:linear-gradient(100deg,#FF7A54,#FFC24A,#FF7A54); background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.heroSub{ margin:0 0 40px; font-family:'Inter',sans-serif; font-weight:400; font-size:20px; line-height:1.5; color:rgba(245,243,238,.62); max-width:560px; }
.heroCtaLink{ text-decoration:none; display:inline-block; }
.heroCtaBtn{
  font-family:'Inter',sans-serif; font-weight:600; font-size:17px; letter-spacing:-.01em; color:#0F1B3D;
  background:linear-gradient(100deg,#FF7A54,#FFC24A); border:none; border-radius:10px; padding:18px 32px; cursor:pointer;
  box-shadow:0 12px 34px rgba(255,122,84,.32); transition:transform .25s ease, box-shadow .25s ease;
  animation:buttonGlow 4s ease-in-out infinite;
}
.heroCtaBtn:hover{ transform:translateY(-2px) scale(1.02); box-shadow:0 16px 40px rgba(255,122,84,.42); }

.positioningSection{ position:relative; width:1440px; height:1460px; z-index:2; }

.headBlock{ position:absolute; left:120px; top:150px; width:900px; z-index:3; transform-origin:left center; opacity:0; }
.posH2{ margin:0 0 18px; font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:84px; line-height:1.0; letter-spacing:-.025em; color:#0F1B3D; }
.posSub{ margin:0; font-family:'Inter',sans-serif; font-weight:400; font-size:23px; line-height:1.5; color:#45506B; max-width:560px; opacity:0; }

.statBlock{ position:absolute; z-index:3; opacity:0; }
.stat1{ left:300px; top:470px; width:440px; }
.stat2{ left:900px; top:760px; width:470px; }
.stat3{ left:340px; top:1010px; width:470px; }
.statNumWrap{ position:relative; height:110px; }
.statNum{ position:absolute; left:0; top:-8px; font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:98px; line-height:1; letter-spacing:-.03em; transform-origin:left center; color:#0F1B3D; opacity:0; }
.stat3 .statNum{ font-size:88px; }
.statText{ margin-top:16px; opacity:0; }
.statLabel{ font-family:'Inter',sans-serif; font-weight:600; font-size:14px; letter-spacing:.08em; text-transform:uppercase; color:#C85A34; margin-bottom:8px; }
.statDesc{ font-family:'Inter',sans-serif; font-weight:400; font-size:18px; line-height:1.5; color:#45506B; max-width:380px; }
.stat2 .statDesc{ max-width:400px; }
.stat3 .statDesc{ max-width:400px; }

/* ---------- Mobile / tablet-portrait reflow (<=820px) ---------- */
.heroMobile{ display:none; }
@media(max-width:820px){
  .heroDesktop{ display:none; }
  .heroMobile{ display:block; }
}

.mRev{ opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.mRev.in{ opacity:1; transform:translateY(0); }
@keyframes mArcDraw{from{stroke-dashoffset:640;}to{stroke-dashoffset:0;}}
@keyframes mSpark{0%,100%{opacity:.28;transform:translate(0,0);}50%{opacity:1;transform:translate(var(--sx,0),var(--sy,0));}}
@keyframes mScrollDrift{0%{opacity:0;transform:translateY(0);}25%{opacity:1;}72%{opacity:.8;}100%{opacity:0;transform:translateY(18px);}}
@keyframes mNumFloat{0%{transform:translateY(0);opacity:0;}18%{opacity:.42;}82%{opacity:.42;}100%{transform:translateY(-46px);opacity:0;}}
@keyframes mArcUp{0%{opacity:0;transform:translate(0,0);}14%{opacity:1;}82%{opacity:.85;}100%{opacity:0;transform:translate(var(--ux,22px),var(--uy,-150px));}}
@keyframes mOrbit{from{transform:rotate(0deg) translateX(var(--r,34px)) rotate(0deg);}to{transform:rotate(360deg) translateX(var(--r,34px)) rotate(-360deg);}}

.mHeroSection{ position:relative; background:#0F1B3D; overflow:hidden; padding:44px 22px 68px; display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; box-sizing:border-box; }
.mGlowTop{ position:absolute; right:-28%; top:-12%; width:120%; height:72%; background:radial-gradient(circle,rgba(255,150,90,.16),transparent 64%); filter:blur(30px); pointer-events:none; z-index:0; }
.mGlowBottom{ position:absolute; left:-24%; bottom:-18%; width:132%; height:62%; background:radial-gradient(circle,rgba(255,150,90,.12),transparent 66%); filter:blur(34px); pointer-events:none; z-index:0; }
.mArcSvg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; opacity:.9; }
.mArcPath{ stroke-dasharray:640; animation:mArcDraw 2.2s ease-out .25s both; filter:drop-shadow(0 0 6px rgba(255,150,90,.5)); }
.mArcUp{ position:absolute; z-index:1; border-radius:50%; opacity:0; animation-name:mArcUp; animation-timing-function:ease-in-out; animation-iteration-count:infinite; }
.mOrbHost{ position:absolute; left:50%; top:50%; width:0; height:0; pointer-events:none; z-index:3; }
.mOrb{ position:absolute; top:-2px; left:-2px; width:4px; height:4px; border-radius:50%; animation-name:mOrbit; animation-timing-function:linear; animation-iteration-count:infinite; }

.mLedgerNums{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; font-family:ui-monospace,monospace; font-size:13px; letter-spacing:.02em; }
.mLedgerNums div{ position:absolute; }

.mHeroInner{ position:relative; z-index:2; max-width:560px; margin:0 auto; width:100%; flex:1; display:flex; flex-direction:column; }
.mLogoWrap{ position:relative; display:inline-block; align-self:flex-start; }
.mLogo{ height:52px; width:auto; display:block; }
.mHeroBody{ margin-top:clamp(22px,8vh,80px); }
.mKicker{ margin:30px 0 16px; font-family:'Inter',sans-serif; font-weight:500; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,154,122,.7); }
.mH1{ margin:0 0 22px; font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:clamp(34px,9.5vw,60px); line-height:1.04; letter-spacing:-.02em; color:#F5F3EE; }
.mAccentWord{ background:linear-gradient(100deg,#FF7A54,#FFC24A,#FF7A54); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:gradientShift 6s ease-in-out infinite; }
.mSub{ margin:0 0 32px; font-family:'Inter',sans-serif; font-size:17px; line-height:1.5; color:rgba(245,243,238,.66); }
.mCtaBtn{ width:100%; min-height:54px; font-family:'Inter',sans-serif; font-weight:600; font-size:17px; color:#0F1B3D; background:linear-gradient(100deg,#FF7A54,#FFC24A); border:none; border-radius:12px; padding:16px 28px; cursor:pointer; box-shadow:0 12px 34px rgba(255,122,84,.32); animation:buttonGlow 4s ease-in-out infinite; }

.mScrollCue{ position:absolute; left:50%; bottom:16px; transform:translateX(-50%); z-index:2; width:6px; height:22px; pointer-events:none; }
.mScrollCue span{ position:absolute; left:50%; top:0; width:5px; height:5px; margin-left:-2.5px; border-radius:50%; background:radial-gradient(circle,#fff,#FF7A54 60%,transparent); }
.mScrollCue span:last-child{ width:4px; height:4px; margin-left:-2px; background:radial-gradient(circle,#fff,#FFC24A 60%,transparent); }

.mStatsSection{ position:relative; background:#FBF9F4; overflow:hidden; padding:74px 22px 96px; }
.mStatsHead{ max-width:560px; margin:0 auto; text-align:center; }
.mStatsH2{ margin:0 0 14px; font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:clamp(34px,8.5vw,54px); line-height:1.02; letter-spacing:-.025em; color:#0F1B3D; }
.mStatsSub{ margin:0; font-family:'Inter',sans-serif; font-size:17px; line-height:1.5; color:#45506B; }
.mStatsList{ max-width:520px; margin:52px auto 0; display:flex; flex-direction:column; gap:46px; }
.mStat{ text-align:center; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.mStatNum{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:clamp(58px,17vw,92px); line-height:1; letter-spacing:-.03em; color:#0F1B3D; transition:color .3s ease, text-shadow .3s ease; }
.mStat[data-order="1"] .mStatNum, .mStat[data-order="2"] .mStatNum{ font-size:clamp(52px,15vw,92px); }
.mStat.pulse .mStatNum{ color:#C85A34; text-shadow:0 0 26px rgba(255,122,84,.45); }
.mStatLabel{ margin-top:12px; font-family:'Inter',sans-serif; font-weight:600; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:#C85A34; }
.mStatDesc{ margin:8px auto 0; max-width:360px; font-family:'Inter',sans-serif; font-size:16px; line-height:1.5; color:#45506B; }

@media (prefers-reduced-motion: reduce){
  .heroAccentWord, .mAccentWord, .heroCtaBtn, .mCtaBtn, .ledgerLine, .ledgerNum,
  .depthBlob, .mArcUp, .mOrb, .mScrollCue span, .mLedgerNums div{ animation:none !important; }
}