.hero-cinema{
    --accent:#8FAFC1;
    --accent-soft:#DCE7EA;
    --white:#F2EFE7;
    --black:#050505;
    --text-muted:rgba(224,232,232,.78);
    --ease:cubic-bezier(.19,1,.22,1);
  }
  .hero-cinema,.hero-cinema *{box-sizing:border-box}
  .hero-cinema{margin:0;min-height:100svh;background:#000;color:var(--white);font-family:var(--sans);overflow:hidden;position:relative;}
  .scene{position:relative;width:100vw;height:100vh;min-height:640px;background:#000;isolation:isolate;overflow:hidden}

  
  .base-frame{
    position:absolute;inset:-1.5%;z-index:1;
    background-image:url("assets/hero/cinematic-cityscape-desktop.webp");
    background-size:cover;
    background-position:center center;
    transform:scale(1.012);
    animation:cameraPush 16s var(--ease) infinite alternate;
    will-change:transform, background-position;
  }

  
  .grade{position:absolute;inset:0;z-index:2;pointer-events:none;background:
    radial-gradient(circle at 68% 38%, rgba(255,181,70,.12), transparent 24%),
    linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.12) 45%, rgba(0,0,0,.42) 100%),
    linear-gradient(180deg, rgba(0,0,0,.42) 0%, transparent 28%, rgba(0,0,0,.68) 100%);
    mix-blend-mode:multiply;opacity:.72}

  .vignette{position:absolute;inset:-12%;z-index:8;pointer-events:none;background:radial-gradient(ellipse at center, transparent 34%, rgba(0,0,0,.28) 62%, rgba(0,0,0,.86) 100%)}

  
  .cloud-veil{position:absolute;inset:-20%;z-index:4;pointer-events:none;opacity:.22;mix-blend-mode:screen;background:
    radial-gradient(ellipse at 78% 23%, rgba(255,209,126,.42) 0 5%, transparent 18%),
    radial-gradient(ellipse at 63% 31%, rgba(255,174,80,.22) 0 8%, transparent 26%),
    radial-gradient(ellipse at 48% 20%, rgba(255,255,255,.08) 0 8%, transparent 28%),
    linear-gradient(105deg, transparent 0 35%, rgba(255,220,150,.08) 48%, transparent 64%);
    filter:blur(16px);animation:cloudDrift 24s linear infinite alternate;will-change:transform,opacity}

  
  .sun-ray{position:absolute;z-index:5;pointer-events:none;left:42%;top:-15%;width:60%;height:130%;opacity:.2;mix-blend-mode:screen;background:linear-gradient(103deg, transparent 0 39%, rgba(255,208,112,.1) 45%, rgba(255,176,64,.28) 50%, rgba(255,225,148,.08) 56%, transparent 64%);filter:blur(11px);transform:translateX(-2%) rotate(-1deg);animation:sunRay 13s var(--ease) infinite alternate}

  
  .reflection{position:absolute;z-index:6;pointer-events:none;left:-8%;top:0;width:56%;height:100%;opacity:.16;mix-blend-mode:screen;background:
    linear-gradient(100deg, transparent 0 34%, rgba(255,193,91,.32) 38%, transparent 44%),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(255,210,137,.04) 19px 21px, transparent 22px 48px);
    filter:blur(1.5px);animation:reflectionPass 11s var(--ease) infinite alternate}

  .film-noise{position:absolute;inset:0;z-index:9;pointer-events:none;opacity:.045;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.62'/%3E%3C/svg%3E");animation:noiseShift .42s steps(2,end) infinite}

  .content{position:relative;z-index:12;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;padding:6vh 5vw}
  .content-inner{position:relative;max-width:980px;margin-top:0;text-shadow:0 3px 22px rgba(0,0,0,.82),0 1px 2px rgba(0,0,0,.75)}
  .content-inner::before{content:"";position:absolute;z-index:-1;left:50%;top:52%;width:min(1040px,94vw);height:min(560px,62vh);transform:translate(-50%,-50%);background:radial-gradient(ellipse at center, rgba(0,0,0,.54) 0%, rgba(0,0,0,.34) 40%, rgba(0,0,0,.14) 62%, transparent 78%);filter:blur(18px);pointer-events:none}
  .eyebrow{font-size:clamp(10px,.9vw,14px);letter-spacing:.42em;text-transform:uppercase;color:var(--accent-soft);font-weight:500;margin-bottom:3.2vh;text-shadow:0 2px 14px rgba(0,0,0,.9)}
  .title{margin:0;line-height:.86;font-family:var(--serif);font-weight:400;letter-spacing:.22em;text-transform:uppercase;font-size:clamp(56px,7.65vw,134px)}
  .title .first{display:block;color:var(--white)}
  .title .last{display:block;color:var(--accent);text-shadow:0 2px 18px rgba(0,0,0,.86),0 0 22px rgba(143,175,193,.18);letter-spacing:.22em;margin-top:.06em}
  .rule{width:86px;height:1px;background:var(--accent);opacity:.8;margin:3vh auto}
  .desc{font-size:clamp(15px,1.08vw,19px);line-height:1.78;color:#F2EFE7;max-width:780px;margin:0 auto 5vh;text-shadow:0 2px 18px rgba(0,0,0,.92),0 1px 2px rgba(0,0,0,.9)}
  .metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:min(5vw,72px);max-width:700px;margin:0 auto}
  .metric{position:relative}
  .metric:not(:first-child)::before{content:"";position:absolute;left:calc(-1 * min(3vw,45px));top:8px;bottom:8px;width:1px;background:rgba(255,255,255,.16)}
  .metric strong{display:block;text-shadow:0 2px 18px rgba(0,0,0,.82),0 0 20px rgba(143,175,193,.16);font-family:var(--serif);font-weight:400;font-size:clamp(38px,3.4vw,64px);color:var(--accent);line-height:1}
  .metric span{display:block;margin-top:14px;font-size:clamp(10px,.7vw,12px);line-height:1.55;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted);text-shadow:0 2px 12px rgba(0,0,0,.86)}

  .nav{position:absolute;z-index:14;top:34px;left:42px;right:42px;display:flex;align-items:center;justify-content:space-between;gap:30px}
  .monogram{font-family:var(--serif);font-size:30px;letter-spacing:.02em;color:var(--accent);text-decoration:none}
  .menu{display:flex;align-items:center;gap:clamp(24px,4vw,72px);font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:rgba(242,239,231,.86)}
  .download{color:var(--accent-soft);text-decoration:none;white-space:nowrap;text-shadow:0 2px 12px rgba(0,0,0,.8)}

  .scroll{position:absolute;z-index:14;bottom:31px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--accent);font-size:10px;letter-spacing:.28em;text-transform:uppercase}
  .mouse{width:20px;height:42px;border:1px solid var(--accent);border-radius:20px;position:relative;opacity:.9}
  .mouse:after{content:"";position:absolute;left:50%;top:9px;width:3px;height:3px;border-radius:50%;background:var(--accent);transform:translateX(-50%);animation:mouseDot 1.8s ease-in-out infinite}

  @keyframes cameraPush{0%{transform:scale(1.012) translate3d(0,0,0)}100%{transform:scale(1.048) translate3d(-.65%,.25%,0)}}
  @keyframes cloudDrift{0%{transform:translate3d(-2%,0,0) scale(1)}100%{transform:translate3d(4%,-1%,0) scale(1.04)}}
  @keyframes sunRay{0%{transform:translateX(-3%) rotate(-1.3deg);opacity:.12}55%{opacity:.24}100%{transform:translateX(4%) rotate(.4deg);opacity:.18}}
  @keyframes reflectionPass{0%{transform:translateX(-8%);opacity:.08}45%{opacity:.22}100%{transform:translateX(10%);opacity:.13}}
  @keyframes noiseShift{0%{transform:translate(0,0)}100%{transform:translate(-2%,1%)}}
  @keyframes mouseDot{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,15px)}}

  @media(max-width:900px){
    .scene{min-height:720px}
    .base-frame{background-position:58% center}
    .nav{top:24px;left:24px;right:24px}
    .menu{gap:22px;font-size:10px;letter-spacing:.18em}
    .menu a:not(.download){display:none}
    .title{letter-spacing:.14em;font-size:clamp(50px,11.2vw,92px)}
    .title .last{letter-spacing:.14em}
    .desc{max-width:620px}
    .metrics{gap:20px}
  }
  @media(min-width:761px) and (max-width:1180px){
    .menu{
      gap:0;
      margin-left:auto;
    }
    .menu a:not(.download){display:none!important}
  }
  @media(max-width:560px){
    .scene{min-height:760px}
    .base-frame{background-position:63% center}
    .content{padding:105px 24px 78px}
    .eyebrow{letter-spacing:.3em}
    .title{font-size:clamp(42px,14vw,72px);letter-spacing:.1em}
    .desc{font-size:13px;line-height:1.75}
    .metrics{grid-template-columns:1fr;gap:18px;max-width:260px}
    .metric strong{font-size:42px}
    .metric span{margin-top:6px;letter-spacing:.18em}
    .scroll{bottom:20px}
  }
  @media(prefers-reduced-motion:reduce){.hero-cinema *, .hero-cinema *::before, .hero-cinema *::after{animation:none!important;transition:none!important}.base-frame{transform:scale(1.02)}}


  
  .cloud-veil{opacity:.34!important;animation:cloudDriftV3 18s linear infinite alternate!important;filter:blur(22px)!important;background:
    radial-gradient(ellipse at 74% 20%, rgba(255,220,150,.48) 0 4%, transparent 19%),
    radial-gradient(ellipse at 60% 26%, rgba(255,179,80,.28) 0 7%, transparent 24%),
    radial-gradient(ellipse at 48% 18%, rgba(255,255,255,.10) 0 9%, transparent 28%),
    linear-gradient(105deg, transparent 0 30%, rgba(255,220,150,.11) 45%, transparent 67%)!important;}

  .cloud-band{position:absolute;inset:-18% -22%;z-index:4;pointer-events:none;mix-blend-mode:screen;will-change:transform,opacity;filter:blur(18px)}
  .cloud-band.a{opacity:.26;background:
    radial-gradient(ellipse at 73% 24%, rgba(255,235,180,.36) 0 4%, transparent 18%),
    radial-gradient(ellipse at 82% 17%, rgba(255,190,90,.20) 0 7%, transparent 24%),
    radial-gradient(ellipse at 63% 31%, rgba(255,255,255,.10) 0 8%, transparent 24%);
    animation:cloudSweepA 22s linear infinite alternate;}
  .cloud-band.b{opacity:.18;mix-blend-mode:overlay;background:
    radial-gradient(ellipse at 68% 28%, rgba(255,210,140,.42) 0 7%, transparent 25%),
    radial-gradient(ellipse at 52% 19%, rgba(255,255,255,.09) 0 10%, transparent 30%),
    linear-gradient(100deg, transparent 0 44%, rgba(255,221,150,.12) 54%, transparent 72%);
    filter:blur(30px);animation:cloudSweepB 34s linear infinite alternate;}

  
  .sun-core{position:absolute;z-index:7;pointer-events:none;left:73.5%;top:35%;width:11vw;height:11vw;min-width:105px;min-height:105px;border-radius:50%;opacity:.42;mix-blend-mode:screen;background:
    radial-gradient(circle, rgba(255,247,205,.92) 0 3%, rgba(255,196,82,.56) 8%, rgba(255,159,38,.22) 22%, transparent 58%);
    filter:blur(9px);transform:translate(-50%,-50%);animation:sunSetV3 18s cubic-bezier(.45,0,.15,1) infinite alternate;will-change:transform,opacity;}
  .sun-beam{position:absolute;z-index:6;pointer-events:none;left:53%;top:-20%;width:58%;height:145%;opacity:.26;mix-blend-mode:screen;background:
    linear-gradient(102deg, transparent 0 43%, rgba(255,231,167,.08) 47%, rgba(255,180,60,.36) 51%, rgba(255,230,160,.10) 57%, transparent 69%);
    filter:blur(14px);transform:rotate(-3deg);animation:sunBeamV3 18s cubic-bezier(.45,0,.15,1) infinite alternate;will-change:transform,opacity;}

  
  .sun-occluder{position:absolute;z-index:8;pointer-events:none;left:61%;top:16%;width:42%;height:38%;opacity:.0;mix-blend-mode:multiply;background:
    radial-gradient(ellipse at 56% 48%, rgba(0,0,0,.55) 0 13%, rgba(0,0,0,.30) 27%, transparent 57%),
    radial-gradient(ellipse at 76% 36%, rgba(0,0,0,.38) 0 10%, transparent 36%);
    filter:blur(22px);animation:sunOccludeV3 18s cubic-bezier(.45,0,.15,1) infinite alternate;will-change:transform,opacity;}

  .sky-pulse{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.0;background:linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.38));animation:skyPulseV3 18s cubic-bezier(.45,0,.15,1) infinite alternate;}

  .reflection{opacity:.24!important;animation:reflectionPassV3 9s var(--ease) infinite alternate!important;}

  @keyframes cloudDriftV3{0%{transform:translate3d(-5%,1%,0) scale(1.03);opacity:.18}50%{opacity:.37}100%{transform:translate3d(7%,-2%,0) scale(1.08);opacity:.26}}
  @keyframes cloudSweepA{0%{transform:translate3d(-8%,2%,0) scale(1.05);opacity:.18}45%{opacity:.32}100%{transform:translate3d(9%,-3%,0) scale(1.1);opacity:.22}}
  @keyframes cloudSweepB{0%{transform:translate3d(5%,-1%,0) scale(1.02);opacity:.10}52%{opacity:.24}100%{transform:translate3d(-7%,3%,0) scale(1.09);opacity:.16}}
  @keyframes sunSetV3{0%{transform:translate(-50%,-50%) translate3d(-10px,-4px,0) scale(1.04);opacity:.56}48%{opacity:.43}100%{transform:translate(-50%,-50%) translate3d(28px,34px,0) scale(.82);opacity:.22}}
  @keyframes sunBeamV3{0%{transform:translate3d(-2%,0,0) rotate(-3deg);opacity:.36}50%{opacity:.22}100%{transform:translate3d(5%,3%,0) rotate(-1deg);opacity:.13}}
  @keyframes sunOccludeV3{0%{transform:translate3d(-14%,0,0) scale(1);opacity:.05}55%{opacity:.30}100%{transform:translate3d(9%,5%,0) scale(1.08);opacity:.42}}
  @keyframes skyPulseV3{0%{opacity:.00}55%{opacity:.08}100%{opacity:.18}}
  @keyframes reflectionPassV3{0%{transform:translateX(-12%);opacity:.10}42%{opacity:.30}100%{transform:translateX(18%);opacity:.16}}



  
  .base-frame{
    inset:-8%;
    transform-origin:center center;
    transform:scale(.94) translate3d(0,0,0);
    animation:cameraApproachV4 12s var(--ease) forwards!important;
  }
  @keyframes cameraApproachV4{
    0%{transform:scale(.94) translate3d(0,0,0)}
    100%{transform:scale(1.012) translate3d(0,0,0)}
  }
  @media(prefers-reduced-motion:reduce){.base-frame{transform:scale(1.012)!important}}



  
  .hero-cinema{
    --accent:#6F9FA3;
    --accent-strong:#A9C4C2;
    --accent-deep:#294A4D;
    --accent-line:rgba(111,159,163,.42);
    --white:#F2EFE7;
    --text-muted:rgba(232,230,222,.80);
    --text-body:#F2EFE7;
  }

  .monogram,
  .download,
  .scroll{
    color:var(--accent-strong);
    text-shadow:0 2px 14px rgba(0,0,0,.86),0 0 16px rgba(111,159,163,.16);
  }
  .mouse{border-color:rgba(169,196,194,.80)}
  .mouse:after{background:var(--accent-strong)}
  .rule{background:rgba(169,196,194,.76)}
  .eyebrow{color:rgba(232,230,222,.86)}

  .title .first{
    color:var(--white);
    text-shadow:0 3px 24px rgba(0,0,0,.92);
  }
  .title .last{
    color:var(--accent);
    text-shadow:0 3px 24px rgba(0,0,0,.95),0 0 18px rgba(111,159,163,.14);
  }
  .desc{
    color:var(--text-body);
    max-width:840px;
    text-shadow:0 4px 24px rgba(0,0,0,.98),0 1px 4px rgba(0,0,0,.95);
  }

  
  .content-inner::before{
    width:min(1140px,96vw);
    height:min(630px,68vh);
    background:
      radial-gradient(ellipse at center, rgba(0,0,0,.72) 0%, rgba(0,0,0,.48) 38%, rgba(0,0,0,.22) 64%, transparent 82%);
    filter:blur(22px);
  }

  
  .metrics{
    grid-template-columns:repeat(3,minmax(160px,1fr));
    gap:clamp(40px,4.8vw,72px);
    max-width:700px;
    align-items:start;
  }
  .metric{
    min-width:0;
    display:grid;
    grid-template-rows:88px auto;
    justify-items:center;
    text-align:center;
  }
  .metric strong{
    width:4.2ch;
    height:88px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    color:var(--accent-strong);
    font-variant-numeric:tabular-nums lining-nums;
    font-feature-settings:'tnum' 1,'lnum' 1;
    line-height:.86;
    letter-spacing:-.02em;
    text-shadow:0 3px 22px rgba(0,0,0,.96),0 0 18px rgba(169,196,194,.14);
  }
  .metric span{
    margin-top:16px;
    min-height:42px;
    color:rgba(232,230,222,.80);
    text-align:center;
  }
  .metric:not(:first-child)::before{
    left:calc(-.5 * clamp(44px,5.4vw,86px));
    top:9px;
    bottom:4px;
    background:rgba(111,159,163,.22);
  }

  @media(max-width:900px){
    .metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;max-width:680px}
    .metric{grid-template-rows:74px auto}
    .metric strong{height:74px;width:4ch}
  }
  @media(max-width:560px){
    .metrics{grid-template-columns:1fr;gap:18px;max-width:280px}
    .metric{grid-template-rows:auto auto}
    .metric strong{height:auto;width:auto;line-height:.9}
    .metric span{margin-top:8px;min-height:0}
  }


  
  body.is-loading{overflow:hidden}
  .preloader{
    position:fixed;
    inset:0;
    z-index:9999;
    display:grid;
    place-items:center;
    background:
      radial-gradient(circle at 52% 44%, rgba(111,159,163,.08), transparent 34%),
      radial-gradient(circle at 20% 82%, rgba(255,255,255,.026), transparent 28%),
      #030404;
    color:#F2EFE7;
    transition:opacity 900ms var(--ease), visibility 900ms var(--ease), transform 900ms var(--ease);
    will-change:opacity, transform;
  }
  .preloader.is-hidden{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:scale(1.012);
  }
  .preloader::before{
    content:"";
    position:absolute;
    inset:-30%;
    opacity:.05;
    background-image:
      linear-gradient(115deg, transparent 0 48%, rgba(143,175,193,.28) 50%, transparent 52% 100%),
      repeating-linear-gradient(0deg, rgba(255,255,255,.22) 0 1px, transparent 1px 4px);
    transform:translateX(-8%);
    animation:preloaderLight 4200ms var(--ease) forwards;
  }
  .preloader::after{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(ellipse at center, transparent 0 45%, rgba(0,0,0,.72) 82%, rgba(0,0,0,.94) 100%),
      linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.54));
    pointer-events:none;
  }
  .preloader-noise{
    position:absolute;
    inset:0;
    z-index:1;
    opacity:.045;
    mix-blend-mode:screen;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
    animation:noiseMove 900ms steps(2,end) infinite;
  }
  .preloader-content{
    position:relative;
    z-index:2;
    width:min(1280px, calc(100vw - 56px));
    padding:0 24px;
  }
  .preloader-topline{
    margin:0 0 28px;
    font-family:var(--sans);
    text-transform:uppercase;
    letter-spacing:.22em;
    font-size:11px;
    color:rgba(242,239,231,.48);
  }
  .loader-row{
    margin-top:38px;
    width:min(640px, 58vw);
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:18px;
  }
  .loader-percent{
    min-width:5ch;
    text-align:right;
    color:#8FAFC1;
    font-family:var(--sans);
    letter-spacing:.12em;
    font-size:11px;
    font-variant-numeric:tabular-nums lining-nums;
    font-feature-settings:'tnum' 1,'lnum' 1;
    text-shadow:0 0 22px rgba(143,175,193,.18);
  }
  .preloader-quote{
    margin:0;
    max-width:1180px;
    font-family:var(--serif);
    font-size:clamp(32px, 4.4vw, 76px);
    line-height:1.06;
    letter-spacing:-.05em;
    font-weight:400;
    text-shadow:0 22px 54px rgba(0,0,0,.78);
  }
  .quote-line{
    display:block;
    min-height:1.08em;
    white-space:pre-wrap;
  }
  .quote-line + .quote-line{margin-top:.08em}
  .quote-accent{
    color:#8FAFC1;
    text-shadow:0 0 30px rgba(143,175,193,.18), 0 22px 52px rgba(0,0,0,.75);
  }
  .type-caret{
    display:inline-block;
    width:.45ch;
    height:.82em;
    margin-left:.08em;
    transform:translateY(.1em);
    background:#8FAFC1;
    box-shadow:0 0 20px rgba(143,175,193,.24);
    animation:caretBlink 760ms steps(1,end) infinite;
  }
  .loader-track{
    width:100%;
    height:1px;
    background:rgba(242,239,231,.16);
    overflow:hidden;
  }
  .loader-fill{
    display:block;
    width:0%;
    height:100%;
    background:#8FAFC1;
    box-shadow:0 0 24px rgba(143,175,193,.34);
    transition:width 90ms linear;
  }
  @keyframes caretBlink{0%,49%{opacity:1}50%,100%{opacity:.12}}
  @keyframes preloaderLight{0%{transform:translateX(-18%) rotate(0deg);opacity:.025}50%{opacity:.08}100%{transform:translateX(8%) rotate(.8deg);opacity:.045}}
  @keyframes noiseMove{0%{transform:translate(0,0)}100%{transform:translate(-3%,2%)}}
  @media(max-width:640px){
    .preloader-content{width:100%;padding:0 22px;text-align:left}
    .preloader-topline{margin-bottom:24px;font-size:10px;letter-spacing:.18em}
    .preloader-quote{font-size:clamp(32px, 10vw, 48px);line-height:1.08;letter-spacing:-.055em}
    .loader-row{width:100%;margin-top:30px;gap:14px}
    .loader-percent{font-size:10px}
  }
  @media(prefers-reduced-motion:reduce){
    .preloader::before,.preloader-noise,.type-caret{animation:none}
    .preloader{transition:opacity 250ms ease, visibility 250ms ease}
  }



  
  @media (max-width: 760px){
    .hero-cinema{margin:0;min-height:100svh;background:#000;color:var(--white);font-family:var(--sans);overflow:hidden;position:relative;}
    .scene{
      width:100vw;
      height:100svh;
      min-height:0;
      overflow:hidden;
    }
    .base-frame{
      inset:-2%;
      background-size:cover;
      background-position:58% 50%;
      transform:scale(1.02);
      animation:cameraPushMobile 16s var(--ease) infinite alternate!important;
    }
    .grade{
      opacity:.86;
      background:
        radial-gradient(circle at 67% 38%, rgba(255,181,70,.11), transparent 24%),
        linear-gradient(90deg, rgba(0,0,0,.64) 0%, rgba(0,0,0,.30) 48%, rgba(0,0,0,.52) 100%),
        linear-gradient(180deg, rgba(0,0,0,.50) 0%, rgba(0,0,0,.16) 30%, rgba(0,0,0,.78) 100%);
    }
    .vignette{
      inset:-16%;
      background:radial-gradient(ellipse at center, transparent 25%, rgba(0,0,0,.34) 56%, rgba(0,0,0,.91) 100%);
    }
    .cloud-veil{opacity:.28!important;filter:blur(24px)!important;}
    .cloud-band.a{opacity:.20;}
    .cloud-band.b{opacity:.18;}
    .sun-core{opacity:.18;}
    .sun-beam{opacity:.16;}
    .reflection{opacity:.12;left:-18%;width:70%;}

    .nav{
      top:max(18px, env(safe-area-inset-top));
      left:20px;
      right:20px;
      gap:18px;
    }
    .monogram{
      font-size:24px;
      color:var(--accent-soft);
      text-shadow:0 2px 16px rgba(0,0,0,.9);
    }
    .menu{
      gap:0;
      margin-left:auto;
      font-size:10px;
      letter-spacing:.16em;
    }
    .menu a:not(.download){display:none!important;}
    .download{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:34px;
      padding:0 12px;
      border:1px solid rgba(220,231,234,.34);
      border-radius:999px;
      background:rgba(0,0,0,.18);
      backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px);
      color:var(--accent-soft);
      letter-spacing:.12em;
    }

    .content{
      align-items:flex-end;
      justify-content:center;
      text-align:center;
      padding:88px 20px calc(42px + env(safe-area-inset-bottom));
    }
    .content-inner{
      width:100%;
      max-width:390px;
      margin:0 auto;
      transform:translateY(0);
    }
    .content-inner::before{
      width:110vw;
      height:72vh;
      top:56%;
      background:radial-gradient(ellipse at center, rgba(0,0,0,.78) 0%, rgba(0,0,0,.54) 36%, rgba(0,0,0,.24) 64%, transparent 82%);
      filter:blur(20px);
    }
    .eyebrow{
      font-size:10px;
      letter-spacing:.28em;
      margin-bottom:14px;
      color:rgba(220,231,234,.86);
    }
    .title{
      font-size:clamp(46px, 13.4vw, 64px);
      line-height:.9;
      letter-spacing:.055em;
      text-wrap:balance;
    }
    .title .last{
      letter-spacing:.035em;
      margin-top:.04em;
    }
    .rule{
      width:58px;
      margin:18px auto 16px;
      opacity:.8;
    }
    .desc{
      max-width:350px;
      margin:0 auto 26px;
      font-size:13.2px;
      line-height:1.62;
      color:rgba(239,236,226,.86);
      text-shadow:0 3px 22px rgba(0,0,0,1),0 1px 3px rgba(0,0,0,.96);
    }
    .metrics{
      width:100%;
      max-width:350px;
      grid-template-columns:repeat(3,minmax(0,1fr))!important;
      gap:0!important;
      padding-top:15px;
      border-top:1px solid rgba(220,231,234,.18);
    }
    .metric{
      grid-template-rows:auto auto!important;
      min-width:0;
      padding:0 7px;
    }
    .metric:not(:first-child)::before{
      display:block!important;
      left:0!important;
      top:3px!important;
      bottom:2px!important;
      width:1px;
      background:rgba(143,175,193,.22)!important;
    }
    .metric strong{
      width:auto!important;
      height:auto!important;
      font-size:clamp(27px, 8.2vw, 35px)!important;
      line-height:.95!important;
      align-items:flex-end;
    }
    .metric span{
      margin-top:8px!important;
      min-height:0!important;
      font-size:8.4px!important;
      line-height:1.36!important;
      letter-spacing:.10em!important;
      color:rgba(232,230,222,.74);
    }
    .scroll{display:none;}

    .preloader-content{
      width:100%;
      padding:0 22px;
      text-align:left;
    }
    .preloader-topline{
      margin-bottom:28px;
      font-size:10px;
      letter-spacing:.18em;
    }
    .preloader-quote{
      min-height:132px;
      font-size:clamp(28px, 8.7vw, 40px);
      line-height:1.14;
      letter-spacing:-.045em;
      max-width:360px;
    }
    .loader-row{
      width:100%;
      max-width:360px;
      margin-top:32px;
      gap:12px;
    }
    .loader-percent{
      min-width:44px;
      font-size:10px;
      letter-spacing:.12em;
      text-align:right;
    }
  }

  @media (max-width: 380px){
    .content{padding-left:18px;padding-right:18px;padding-bottom:34px;}
    .title{font-size:clamp(42px, 13vw, 54px);letter-spacing:.045em;}
    .desc{font-size:12.4px;line-height:1.56;margin-bottom:20px;}
    .metric strong{font-size:28px!important;}
    .metric span{font-size:7.8px!important;letter-spacing:.08em!important;}
    .preloader-quote{font-size:clamp(26px, 8.4vw, 34px);min-height:120px;}
  }

  @media (orientation: landscape) and (max-height: 520px){
    .content{align-items:center;padding:70px 24px 24px;}
    .content-inner{max-width:620px;}
    .line,.rule{display:none;}
    .title{font-size:clamp(42px, 8vw, 72px);}
    .desc{margin-bottom:18px;font-size:12px;line-height:1.45;max-width:560px;}
    .metrics{max-width:520px;}
    .metric span{font-size:7.6px!important;}
  }

  @keyframes cameraPushMobile{
    0%{transform:scale(1.00) translate3d(0,0,0)}
    100%{transform:scale(1.055) translate3d(-1.2%,.25%,0)}
  }



  
  .nav-actions{display:flex;align-items:center;gap:18px;margin-left:auto}
  .hero-lang-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:38px;
    padding:0 13px;
    border-radius:999px;
    background:rgba(8,12,14,.38);
    border:1px solid rgba(242,239,231,.16);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.045),0 12px 34px rgba(0,0,0,.32);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    color:rgba(242,239,231,.72);
    font-family:var(--sans);
    font-size:11px;
    line-height:1;
    letter-spacing:.14em;
    text-transform:uppercase;
    white-space:nowrap;
    user-select:none;
  }
  .hero-lang-toggle:hover{
    background:rgba(10,16,18,.48);
    border-color:rgba(169,196,194,.34);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 14px 38px rgba(0,0,0,.38),0 0 22px rgba(111,159,163,.12);
  }
  .hero-lang-toggle:focus-within{
    outline:1px solid rgba(169,196,194,.72);
    outline-offset:4px;
  }
  .hero-lang-toggle__option{
    appearance:none;
    -webkit-appearance:none;
    border:0;
    background:transparent;
    color:rgba(242,239,231,.52);
    font:inherit;
    letter-spacing:inherit;
    line-height:1;
    margin:0;
    padding:0;
    text-transform:inherit;
    text-decoration:none;
    cursor:pointer;
  }
  .hero-lang-toggle__option.is-active{color:#A9C4C2}
  .hero-lang-toggle__option:focus{outline:0}
  .hero-lang-toggle__divider{
    margin:0 7px;
    color:rgba(242,239,231,.34);
  }
  .burger{display:none;width:42px;height:42px;border:1px solid rgba(220,231,234,.28);border-radius:999px;background:rgba(0,0,0,.20);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:0;align-items:center;justify-content:center;flex-direction:column;gap:4px;cursor:pointer;color:var(--accent-soft)}
  .burger span{display:block;width:17px;height:1px;background:currentColor;transition:transform 420ms var(--ease),opacity 300ms ease;width:17px}
  body.drawer-open .burger span:nth-child(1){transform:translateY(5px) rotate(42deg)}
  body.drawer-open .burger span:nth-child(2){opacity:0}
  body.drawer-open .burger span:nth-child(3){transform:translateY(-5px) rotate(-42deg)}

  .mobile-drawer{position:fixed;z-index:13;inset:0;background:radial-gradient(circle at 70% 30%, rgba(111,159,163,.10), transparent 34%),linear-gradient(180deg, rgba(2,4,5,.94), rgba(2,4,5,.88));backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);opacity:0;visibility:hidden;pointer-events:none;transform:scale(1.015);transition:opacity 520ms var(--ease),visibility 520ms var(--ease),transform 520ms var(--ease)}
  body.drawer-open .mobile-drawer{opacity:1;visibility:visible;pointer-events:auto;transform:scale(1)}
  .drawer-menu{position:absolute;left:24px;right:24px;top:50%;transform:translateY(-46%);display:grid;gap:24px}
  .drawer-menu a{font-family:var(--serif);text-decoration:none;color:var(--white);font-size:clamp(30px,9.5vw,48px);line-height:1;letter-spacing:.02em;text-transform:uppercase;text-shadow:0 14px 42px rgba(0,0,0,.85)}
  .drawer-menu a .drawer-menu__index{display:inline-block;min-width:34px;margin-right:12px;font-family:var(--sans);font-size:10px;letter-spacing:.18em;color:var(--accent-strong);vertical-align:middle;transform:translateY(-.3em)}
  .drawer-menu__text{font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit}
  .desc-mobile{display:none}

  @media (max-width:760px){
    .nav{z-index:30}
    .menu{display:none!important}
    .nav-actions{gap:9px}
    .hero-lang-toggle{
      height:36px;
      padding:0 11px;
      font-size:10px;
      letter-spacing:.12em;
    }
    .hero-lang-toggle__divider{margin:0 6px}
    .burger{display:flex}
    .download{min-height:40px!important;padding:0 13px!important;font-size:9px!important;letter-spacing:.10em!important}
    .desc-desktop{display:none}
    .desc-mobile{display:inline}
    .desc{max-width:min(390px,calc(100vw - 28px));font-size:12.8px!important;line-height:1.46!important;margin-bottom:24px!important;letter-spacing:-.01em;color:rgba(239,236,226,.88)}
    .content{padding-left:14px!important;padding-right:14px!important}
    .content-inner{max-width:410px!important}
    .title{font-size:clamp(44px,13.8vw,66px)!important}
    .metrics{max-width:370px!important}
  }
  @media (max-width:380px){
    .desc{font-size:12px!important;line-height:1.42!important;max-width:352px!important;margin-bottom:20px!important}
    .download{font-size:8.5px!important;padding:0 11px!important}
    .burger{width:40px;height:40px}
    .drawer-menu{gap:21px;left:22px;right:22px}
  }



  
  @media (max-width:760px){
    .base-frame{
      
      background-position:22% 50%!important;
      animation:cameraPushMobileV17 16s var(--ease) infinite alternate!important;
    }
    .nav{
      
      top:calc(max(18px, env(safe-area-inset-top)) + 7vh)!important;
    }
    .content-inner{
      
      transform:translateY(-5vh)!important;
    }
  }

  @media (max-width:380px){
    .nav{top:calc(max(16px, env(safe-area-inset-top)) + 6vh)!important;}
    .content-inner{transform:translateY(-4.5vh)!important;}
  }

  @keyframes cameraPushMobileV17{
    0%{transform:scale(1.00) translate3d(0,0,0)}
    100%{transform:scale(1.055) translate3d(-.6%,.18%,0)}
  }



  
  @media (max-width:760px){
    .base-frame{
      
      inset:-4.5%!important;
      background-position:36% 50%!important;
      animation:cameraPushMobileV18 18s var(--ease) infinite alternate!important;
    }

    .burger{
      width:48px!important;
      height:48px!important;
      border-radius:999px!important;
      border:1px solid rgba(220,231,234,.36)!important;
      background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.012))!important;
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.035), 0 18px 42px rgba(0,0,0,.34)!important;
      backdrop-filter:blur(18px)!important;
      -webkit-backdrop-filter:blur(18px)!important;
      gap:6px!important;
      position:relative!important;
    }
    .burger::before{
      content:"";
      position:absolute;
      inset:8px;
      border-radius:999px;
      border:1px solid rgba(143,175,193,.13);
      pointer-events:none;
    }
    .burger span{
      width:18px!important;
      height:1px!important;
      background:rgba(242,245,242,.86)!important;
      transform-origin:center!important;
    }
    .burger span:nth-child(1){width:14px!important;transform:translateX(-2px)}
    .burger span:nth-child(2){width:20px!important;background:var(--accent-soft)!important}
    .burger span:nth-child(3){width:14px!important;transform:translateX(2px)}
    body.drawer-open .burger span:nth-child(1){width:20px!important;transform:translateY(7px) rotate(45deg)!important}
    body.drawer-open .burger span:nth-child(2){opacity:0!important;transform:scaleX(.4)!important}
    body.drawer-open .burger span:nth-child(3){width:20px!important;transform:translateY(-7px) rotate(-45deg)!important}

    .mobile-drawer{
      inset:0!important;
      background:
        radial-gradient(circle at 76% 18%, rgba(143,175,193,.12), transparent 30%),
        linear-gradient(90deg, rgba(0,0,0,.36), rgba(0,0,0,.58) 36%, rgba(3,6,7,.94) 100%)!important;
      backdrop-filter:blur(18px) saturate(1.1)!important;
      -webkit-backdrop-filter:blur(18px) saturate(1.1)!important;
      transform:translateX(18px)!important;
    }
    body.drawer-open .mobile-drawer{transform:translateX(0)!important}
    .mobile-drawer::before{
      content:"";
      position:absolute;
      top:calc(max(26px, env(safe-area-inset-top)) + 8vh);
      right:24px;
      width:min(78vw,360px);
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(220,231,234,.32), rgba(143,175,193,.28));
    }
    .mobile-drawer::after{
      content:"";
      position:absolute;
      right:24px;
      top:calc(max(26px, env(safe-area-inset-top)) + 8vh);
      bottom:34px;
      width:1px;
      background:linear-gradient(180deg, rgba(143,175,193,.38), rgba(220,231,234,.10), transparent);
    }
    .drawer-menu{
      left:auto!important;
      right:34px!important;
      width:min(76vw,340px)!important;
      top:50%!important;
      transform:translateY(-43%)!important;
      gap:0!important;
      border-left:1px solid rgba(220,231,234,.12);
      padding-left:22px;
    }
    .drawer-menu a{
      display:flex!important;
      align-items:center!important;
      justify-content:space-between!important;
      padding:18px 0!important;
      border-bottom:1px solid rgba(220,231,234,.10)!important;
      font-family:var(--sans)!important;
      font-size:12px!important;
      line-height:1!important;
      letter-spacing:.24em!important;
      color:rgba(242,245,242,.88)!important;
      text-transform:uppercase!important;
      text-shadow:0 12px 36px rgba(0,0,0,.75)!important;
    }
    .drawer-menu a:first-child{border-top:1px solid rgba(220,231,234,.10)!important}
    .drawer-menu a::after{
      content:"";
      width:28px;
      height:1px;
      background:linear-gradient(90deg, rgba(143,175,193,.20), rgba(220,231,234,.78));
      transform:scaleX(.72);
      transform-origin:right;
      transition:transform 420ms var(--ease), opacity 420ms var(--ease);
      opacity:.78;
    }
    .drawer-menu a:hover::after{transform:scaleX(1);opacity:1}
    .drawer-menu a span{
      min-width:30px!important;
      margin-right:10px!important;
      font-size:9px!important;
      letter-spacing:.16em!important;
      color:rgba(169,196,194,.86)!important;
      transform:none!important;
    }
  }

  @media (max-width:380px){
    .base-frame{background-position:37% 50%!important;inset:-4%!important;}
    .burger{width:46px!important;height:46px!important;}
    .drawer-menu{right:28px!important;width:min(78vw,320px)!important;padding-left:18px!important;}
    .drawer-menu a{font-size:11px!important;letter-spacing:.21em!important;padding:16px 0!important;}
  }

  @keyframes cameraPushMobileV18{
    0%{transform:scale(.965) translate3d(0,0,0)}
    100%{transform:scale(1.018) translate3d(-.25%,.12%,0)}
  }



  
  @media (max-width:760px){
    .base-frame{
      
      inset:0%!important;
      background-size:cover!important;
      background-position:40% 50%!important;
      animation:cameraPushMobileV19 18s var(--ease) infinite alternate!important;
    }
    .vignette{
      background:radial-gradient(ellipse at center, transparent 22%, rgba(0,0,0,.30) 56%, rgba(0,0,0,.90) 100%)!important;
    }
    .cloud-veil{opacity:.28!important;}
    .content-inner::before{
      top:49%!important;
      width:110vw!important;
      height:62vh!important;
      background:radial-gradient(ellipse at center, rgba(0,0,0,.76) 0%, rgba(0,0,0,.52) 38%, rgba(0,0,0,.20) 64%, transparent 84%)!important;
    }
  }
  @media (max-width:380px){
    .base-frame{background-position:40% 50%!important; inset:0!important;}
  }
  @keyframes cameraPushMobileV19{
    0%{transform:scale(1.000) translate3d(0,0,0)}
    100%{transform:scale(1.010) translate3d(-.18%,.10%,0)}
  }


  
  .scene{
    --tilt-bg-x:0px;
    --tilt-bg-y:0px;
    --tilt-light-x:0px;
    --tilt-light-y:0px;
    --tilt-cloud-x:0px;
    --tilt-cloud-y:0px;
  }
  @media (max-width:760px){
    .base-frame{
      animation:cameraPushMobileV20 20s var(--ease) infinite alternate!important;
      transform-origin:center center!important;
      will-change:transform!important;
    }
    .cloud-veil{
      opacity:.36!important;
      animation:cloudVeilMobileV20 24s linear infinite alternate!important;
      will-change:transform,opacity!important;
    }
    .cloud-band.a{
      opacity:.30!important;
      animation:cloudSweepMobileV20A 28s linear infinite alternate!important;
      will-change:transform,opacity!important;
    }
    .cloud-band.b{
      opacity:.20!important;
      animation:cloudSweepMobileV20B 32s linear infinite alternate!important;
      will-change:transform,opacity!important;
    }
    .sun-core{
      animation:sunSetMobileV20 22s var(--ease) infinite alternate!important;
      will-change:transform,opacity!important;
    }
    .sun-beam,
    .sun-ray{
      animation:sunBeamMobileV20 18s var(--ease) infinite alternate!important;
      will-change:transform,opacity!important;
    }
    .reflection{
      animation:reflectionMobileV20 20s var(--ease) infinite alternate!important;
      will-change:transform,opacity!important;
    }
    .film-noise{animation:noiseShift 1.6s steps(2,end) infinite alternate!important;}
  }
  @keyframes cameraPushMobileV20{
    0%{transform:scale(1.000) translate3d(var(--tilt-bg-x),var(--tilt-bg-y),0)}
    100%{transform:scale(1.014) translate3d(calc(-0.20% + var(--tilt-bg-x)),calc(.10% + var(--tilt-bg-y)),0)}
  }
  @keyframes cloudVeilMobileV20{
    0%{transform:translate3d(calc(-5% + var(--tilt-cloud-x)),calc(1% + var(--tilt-cloud-y)),0) scale(1.03);opacity:.22}
    50%{opacity:.42}
    100%{transform:translate3d(calc(7% + var(--tilt-cloud-x)),calc(-2% + var(--tilt-cloud-y)),0) scale(1.09);opacity:.30}
  }
  @keyframes cloudSweepMobileV20A{
    0%{transform:translate3d(calc(-10% + var(--tilt-cloud-x)),calc(2% + var(--tilt-cloud-y)),0) scale(1.04);opacity:.20}
    48%{opacity:.36}
    100%{transform:translate3d(calc(8% + var(--tilt-cloud-x)),calc(-3% + var(--tilt-cloud-y)),0) scale(1.10);opacity:.25}
  }
  @keyframes cloudSweepMobileV20B{
    0%{transform:translate3d(calc(6% + var(--tilt-cloud-x)),calc(-1% + var(--tilt-cloud-y)),0) scale(1.02);opacity:.10}
    54%{opacity:.24}
    100%{transform:translate3d(calc(-7% + var(--tilt-cloud-x)),calc(3% + var(--tilt-cloud-y)),0) scale(1.08);opacity:.18}
  }
  @keyframes sunSetMobileV20{
    0%{transform:translate(-50%,-50%) translate3d(calc(-8px + var(--tilt-light-x)),calc(-5px + var(--tilt-light-y)),0) scale(1.02);opacity:.54}
    52%{opacity:.40}
    100%{transform:translate(-50%,-50%) translate3d(calc(24px + var(--tilt-light-x)),calc(31px + var(--tilt-light-y)),0) scale(.82);opacity:.24}
  }
  @keyframes sunBeamMobileV20{
    0%{transform:translate3d(calc(-3% + var(--tilt-light-x)),var(--tilt-light-y),0) rotate(-2.6deg);opacity:.30}
    52%{opacity:.18}
    100%{transform:translate3d(calc(4% + var(--tilt-light-x)),calc(3% + var(--tilt-light-y)),0) rotate(-1deg);opacity:.14}
  }
  @keyframes reflectionMobileV20{
    0%{transform:translate3d(calc(-12% + var(--tilt-light-x)),var(--tilt-light-y),0);opacity:.10}
    45%{opacity:.28}
    100%{transform:translate3d(calc(16% + var(--tilt-light-x)),var(--tilt-light-y),0);opacity:.15}
  }
  @media (prefers-reduced-motion:reduce){
    .scene{--tilt-bg-x:0px!important;--tilt-bg-y:0px!important;--tilt-light-x:0px!important;--tilt-light-y:0px!important;--tilt-cloud-x:0px!important;--tilt-cloud-y:0px!important;}
  }



  
  .menu a{
    color:inherit!important;
    text-decoration:none!important;
    -webkit-tap-highlight-color:transparent;
    transition:color 260ms ease, opacity 260ms ease;
  }
  .menu a:hover{color:rgba(244,241,234,.98)!important;opacity:1;}

  @media (min-width:761px){
    .base-frame{
      inset:-2.6%!important;
      background-size:cover!important;
      background-position:50% 50%!important;
      transform-origin:center center!important;
      animation:cameraPushDesktopV22 22s var(--ease) infinite alternate!important;
      will-change:transform!important;
    }
    .monogram{
      color:rgba(244,241,234,.94)!important;
      text-shadow:0 2px 16px rgba(0,0,0,.82),0 0 14px rgba(111,159,163,.10)!important;
    }
    .menu{
      color:rgba(244,241,234,.80)!important;
    }
    .download{
      color:rgba(244,241,234,.88)!important;
      border:1px solid rgba(244,241,234,.18);
      border-radius:999px;
      padding:11px 16px 10px;
      background:rgba(0,0,0,.10);
      backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 10px 30px rgba(0,0,0,.18);
    }
    .download:hover{
      color:var(--accent-strong)!important;
      border-color:rgba(169,196,194,.36);
    }
  }
  @keyframes cameraPushDesktopV22{
    0%{transform:scale(.982) translate3d(0,0,0)}
    100%{transform:scale(1.035) translate3d(-.48%,.22%,0)}
  }

  @media (max-width:760px){
    
    .base-frame{
      inset:0!important;
      background-size:cover!important;
      background-position:40% 50%!important;
      animation:cameraPushMobileV20 20s var(--ease) infinite alternate!important;
    }
    .download{
      color:var(--accent-soft)!important;
      border-color:rgba(220,231,234,.34)!important;
      padding:0 13px!important;
      background:rgba(0,0,0,.18)!important;
    }
    .monogram{color:var(--accent-soft)!important;}
  }



  
  body.is-loading .base-frame,
  body.is-loading .cloud-veil,
  body.is-loading .sun-core,
  body.is-loading .sun-ray,
  body.is-loading .reflection{
    animation-play-state:paused!important;
  }

  .preloader::before{
    opacity:.9!important;
    background:
      radial-gradient(circle at 18% 50%, rgba(143,175,193,.16), transparent 34%),
      radial-gradient(circle at 74% 44%, rgba(255,214,148,.08), transparent 32%),
      linear-gradient(105deg, transparent 0 36%, rgba(143,175,193,.07) 48%, transparent 62%);
    filter:blur(26px)!important;
    animation:preloaderCinematicDriftV23 6200ms cubic-bezier(.19,1,.22,1) forwards!important;
    will-change:transform,opacity!important;
  }
  .preloader::after{
    opacity:.62!important;
    background:
      linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.52)),
      radial-gradient(circle at 50% 50%, transparent 0 38%, rgba(0,0,0,.62) 82%, rgba(0,0,0,.9) 100%)!important;
    animation:preloaderVignetteBreathV23 5200ms ease-in-out forwards!important;
  }
  .preloader-noise{
    opacity:.065!important;
    animation:noiseMove 700ms steps(2,end) infinite!important;
  }
  .loader-fill{
    box-shadow:0 0 16px rgba(143,175,193,.32), 0 0 34px rgba(143,175,193,.12)!important;
  }
  @keyframes preloaderCinematicDriftV23{
    0%{transform:translate3d(-5%,1%,0) scale(1.02);opacity:.46}
    45%{opacity:.88}
    100%{transform:translate3d(4%,-1%,0) scale(1.08);opacity:.58}
  }
  @keyframes preloaderVignetteBreathV23{
    0%{opacity:.42;transform:scale(1)}
    55%{opacity:.66;transform:scale(1.015)}
    100%{opacity:.54;transform:scale(1.025)}
  }

  @media (min-width:761px){
    body.is-loading .base-frame{transform:scale(.958) translate3d(0,0,0)!important;}
    body.is-hero-ready .base-frame{
      animation:cameraPushDesktopV23 16s cubic-bezier(.19,1,.22,1) forwards!important;
      will-change:transform!important;
    }
    body.is-hero-ready .cloud-veil{animation:cloudDriftDesktopV23 22s linear infinite alternate!important;}
    body.is-hero-ready .sun-core{animation:sunSetDesktopV23 18s cubic-bezier(.45,0,.15,1) infinite alternate!important;}
    body.is-hero-ready .sun-ray{animation:sunBeamDesktopV23 18s cubic-bezier(.45,0,.15,1) infinite alternate!important;}
    body.is-hero-ready .reflection{animation:reflectionDesktopV23 14s cubic-bezier(.19,1,.22,1) infinite alternate!important;}
  }
  @keyframes cameraPushDesktopV23{
    0%{transform:scale(.958) translate3d(.25%,0,0)}
    100%{transform:scale(1.035) translate3d(-.50%,.22%,0)}
  }
  @keyframes cloudDriftDesktopV23{
    0%{transform:translate3d(-6%,1%,0) scale(1.02);opacity:.20}
    50%{opacity:.38}
    100%{transform:translate3d(7%,-2%,0) scale(1.08);opacity:.30}
  }
  @keyframes sunSetDesktopV23{
    0%{transform:translate(-50%,-50%) translate3d(-14px,-6px,0) scale(1.05);opacity:.52}
    50%{opacity:.40}
    100%{transform:translate(-50%,-50%) translate3d(32px,38px,0) scale(.82);opacity:.23}
  }
  @keyframes sunBeamDesktopV23{
    0%{transform:translate3d(-3%,0,0) rotate(-3deg);opacity:.34}
    50%{opacity:.22}
    100%{transform:translate3d(6%,3%,0) rotate(-1deg);opacity:.13}
  }
  @keyframes reflectionDesktopV23{
    0%{transform:translateX(-14%);opacity:.09}
    42%{opacity:.31}
    100%{transform:translateX(19%);opacity:.15}
  }

  @media (max-width:760px){
    body.is-loading .base-frame{transform:scale(1.000) translate3d(0,0,0)!important;}
    body.is-hero-ready .base-frame{animation:cameraPushMobileV23 18s var(--ease) infinite alternate!important;}
    body.is-hero-ready .cloud-veil{animation:cloudVeilMobileV23 22s linear infinite alternate!important;}
    body.is-hero-ready .sun-core{animation:sunSetMobileV23 20s var(--ease) infinite alternate!important;}
    body.is-hero-ready .sun-ray{animation:sunBeamMobileV23 18s var(--ease) infinite alternate!important;}
    body.is-hero-ready .reflection{animation:reflectionMobileV23 18s var(--ease) infinite alternate!important;}
  }
  @keyframes cameraPushMobileV23{
    0%{transform:scale(1.000) translate3d(var(--tilt-bg-x),var(--tilt-bg-y),0)}
    100%{transform:scale(1.016) translate3d(calc(-0.22% + var(--tilt-bg-x)),calc(.12% + var(--tilt-bg-y)),0)}
  }
  @keyframes cloudVeilMobileV23{
    0%{transform:translate3d(calc(-6% + var(--tilt-cloud-x)),calc(1% + var(--tilt-cloud-y)),0) scale(1.03);opacity:.24}
    50%{opacity:.38}
    100%{transform:translate3d(calc(8% + var(--tilt-cloud-x)),calc(-2% + var(--tilt-cloud-y)),0) scale(1.10);opacity:.31}
  }
  @keyframes sunSetMobileV23{
    0%{transform:translate(-50%,-50%) translate3d(calc(-10px + var(--tilt-light-x)),calc(-6px + var(--tilt-light-y)),0) scale(1.02);opacity:.52}
    50%{opacity:.39}
    100%{transform:translate(-50%,-50%) translate3d(calc(26px + var(--tilt-light-x)),calc(34px + var(--tilt-light-y)),0) scale(.82);opacity:.24}
  }
  @keyframes sunBeamMobileV23{
    0%{transform:translate3d(calc(-4% + var(--tilt-light-x)),var(--tilt-light-y),0) rotate(-2.6deg);opacity:.32}
    50%{opacity:.21}
    100%{transform:translate3d(calc(5% + var(--tilt-light-x)),calc(3% + var(--tilt-light-y)),0) rotate(-1deg);opacity:.14}
  }
  @keyframes reflectionMobileV23{
    0%{transform:translate3d(calc(-13% + var(--tilt-light-x)),var(--tilt-light-y),0);opacity:.10}
    45%{opacity:.27}
    100%{transform:translate3d(calc(17% + var(--tilt-light-x)),var(--tilt-light-y),0);opacity:.15}
  }
  @media(prefers-reduced-motion:reduce){
    .preloader::before,.preloader::after,.preloader-noise{animation:none!important;}
    body.is-hero-ready .base-frame,body.is-hero-ready .cloud-veil,body.is-hero-ready .sun-core,body.is-hero-ready .sun-ray,body.is-hero-ready .reflection{animation:none!important;}
  }



  
  .preloader::before{
    inset:0!important;
    opacity:.72!important;
    background:
      radial-gradient(circle at 22% 48%, rgba(143,175,193,.135), transparent 38%),
      radial-gradient(circle at 66% 42%, rgba(143,175,193,.055), transparent 34%),
      radial-gradient(circle at 82% 72%, rgba(255,255,255,.028), transparent 30%)!important;
    filter:blur(32px)!important;
    transform:translate3d(0,0,0) scale(1)!important;
    animation:preloaderSoftBreathV24 6200ms cubic-bezier(.19,1,.22,1) forwards!important;
    pointer-events:none!important;
    overflow:hidden!important;
  }
  .preloader::after{
    inset:0!important;
    background:
      radial-gradient(circle at 50% 50%, transparent 0 42%, rgba(0,0,0,.58) 84%, rgba(0,0,0,.92) 100%),
      linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.54))!important;
    transform:none!important;
    animation:preloaderVignetteBreathV24 5400ms ease-in-out forwards!important;
    pointer-events:none!important;
  }
  @keyframes preloaderSoftBreathV24{
    0%{opacity:.50;transform:translate3d(-1.2%,.4%,0) scale(1.01)}
    52%{opacity:.76;transform:translate3d(.4%,-.3%,0) scale(1.035)}
    100%{opacity:.58;transform:translate3d(1%,-.6%,0) scale(1.055)}
  }
  @keyframes preloaderVignetteBreathV24{
    0%{opacity:.44}
    58%{opacity:.62}
    100%{opacity:.54}
  }


  
  .metrics{
    align-items:start!important;
  }
  .metric{
    display:grid!important;
    grid-template-rows:clamp(54px,5.2vw,88px) auto!important;
    align-items:start!important;
    justify-items:center!important;
  }
  .metric strong{
    display:flex!important;
    align-items:flex-end!important;
    justify-content:center!important;
    height:clamp(54px,5.2vw,88px)!important;
    min-height:clamp(54px,5.2vw,88px)!important;
    width:4.25ch!important;
    line-height:0.92!important;
    padding:0!important;
    margin:0!important;
    font-variant-numeric:tabular-nums lining-nums!important;
    font-feature-settings:'tnum' 1,'lnum' 1!important;
    transform:none!important;
  }
  .metric span{
    margin-top:14px!important;
  }

  @media(max-width:900px){
    .metric{grid-template-rows:64px auto!important;}
    .metric strong{height:64px!important;min-height:64px!important;width:4.05ch!important;line-height:.94!important;}
  }

  @media(max-width:560px){
    .metric{grid-template-rows:38px auto!important;}
    .metric strong{
      height:38px!important;
      min-height:38px!important;
      width:3.8ch!important;
      line-height:.96!important;
      align-items:flex-end!important;
    }
    .metric span{margin-top:8px!important;}
  }

  @media(max-width:380px){
    .metric{grid-template-rows:36px auto!important;}
    .metric strong{height:36px!important;min-height:36px!important;}
  }




  
@media (max-width:760px){
  .base-frame{background-image:url("assets/hero/cinematic-cityscape-desktop.webp");}
}

@media (prefers-reduced-motion: reduce){
  .hero-cinema .base-frame,
  .hero-cinema .cloud-veil,
  .hero-cinema .cloud-band,
  .hero-cinema .sky-pulse,
  .hero-cinema .sun-beam,
  .hero-cinema .sun-core,
  .hero-cinema .sun-occluder,
  .hero-cinema .sun-ray,
  .hero-cinema .reflection,
  .hero-cinema .film-noise{
    animation:none!important;
    transition:none!important;
  }
}

.nav.hero-global-nav{
  position:fixed!important;
  z-index:10000!important;
  top:28px!important;
  left:32px!important;
  right:32px!important;
  padding:10px 12px 10px 14px;
  border:1px solid rgba(220,231,234,.20);
  border-radius:999px;
  background:linear-gradient(180deg, rgba(12,18,19,.42), rgba(8,12,13,.24));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 18px 54px rgba(0,0,0,.32);
  backdrop-filter:blur(18px) saturate(1.35);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);
  transition:transform 420ms var(--ease), opacity 260ms ease;
  will-change:transform, opacity;
}

.mobile-drawer.hero-global-drawer{
  z-index:9998!important;
}

body.hero-nav-hidden:not(.drawer-open) .nav.hero-global-nav{
  opacity:0;
  pointer-events:none;
  transform:translateY(calc(-100% - 48px));
}

@media(min-width:761px) and (max-width:1180px){
  .burger{
    display:flex;
  }

  .scene{
    min-height:0;
  }

  .content{
    padding:clamp(96px,12vh,128px) clamp(32px,5vw,56px) clamp(90px,10vh,116px);
  }

  .content-inner{
    width:min(100%,900px);
    margin-top:0;
  }

  .eyebrow{
    margin-bottom:clamp(16px,2vh,22px);
  }

  .title{
    font-size:clamp(60px,7.6vw,90px)!important;
    line-height:.88;
    letter-spacing:clamp(.09em,1.6vw,.16em);
  }

  .title .last{
    letter-spacing:clamp(.09em,1.6vw,.16em);
  }

  .rule{
    margin:clamp(18px,2.2vh,24px) auto;
  }

  .desc{
    max-width:760px;
    margin-bottom:clamp(30px,4vh,42px);
    font-size:clamp(14px,1.7vw,17px);
    line-height:1.65;
  }

  .metrics{
    width:min(100%,680px);
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0!important;
    padding-top:clamp(12px,1.7vh,18px);
  }

  .metric{
    grid-template-rows:clamp(54px,6vw,66px) auto!important;
    padding:0 clamp(12px,2vw,22px);
  }

  .metric strong{
    height:clamp(54px,6vw,66px)!important;
    min-height:clamp(54px,6vw,66px)!important;
    font-size:clamp(42px,5vw,56px)!important;
  }

  .metric span{
    margin-top:10px!important;
    font-size:clamp(9px,1.05vw,11px);
    letter-spacing:.16em;
  }

  .metric:not(:first-child)::before{
    display:block!important;
    left:0!important;
    top:4px!important;
    bottom:3px!important;
    background:rgba(143,175,193,.22)!important;
  }
}

@media(min-width:761px) and (max-width:900px){
  .content-inner{
    max-width:760px;
    transform:translateY(-18px);
  }

  .desc{
    max-width:680px;
  }

  .metrics{
    width:min(100%,clamp(560px,77vw,620px));
  }
}

@media(min-width:761px) and (max-width:1180px) and (max-height:760px){
  .title{
    font-size:clamp(58px,7.2vw,82px)!important;
  }
}

@media(min-width:1181px) and (max-height:760px){
  .eyebrow{
    margin-bottom:14px;
  }

  .title{
    font-size:clamp(76px,6.7vw,96px)!important;
  }

  .rule{
    margin:16px auto;
  }

  .desc{
    margin-bottom:24px;
    line-height:1.62;
  }
}

@media(max-width:760px){
  .nav.hero-global-nav{
    top:calc(max(16px, env(safe-area-inset-top)) + 16px)!important;
    left:14px!important;
    right:14px!important;
    padding:8px 8px 8px 10px;
    border-radius:30px;
  }
}

/* HERO_final_v1: desktop/tablet video layer. Mobile stays on the existing scene. */
@media(min-width:761px){
  .hero-desktop-video{
    position:absolute;
    inset:0;
    z-index:1;
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:50% 50%;
    background:#000;
    opacity:0;
    pointer-events:none;
  }

  body.hero-video-active .hero-desktop-video{
    opacity:1;
  }

  body.hero-video-active .hero-cinema .base-frame{
    opacity:0;
    animation:none!important;
  }

  body.hero-video-active .hero-cinema .cloud-veil,
  body.hero-video-active .hero-cinema .cloud-band,
  body.hero-video-active .hero-cinema .sky-pulse,
  body.hero-video-active .hero-cinema .sun-beam,
  body.hero-video-active .hero-cinema .sun-core,
  body.hero-video-active .hero-cinema .sun-occluder,
  body.hero-video-active .hero-cinema .sun-ray,
  body.hero-video-active .hero-cinema .reflection,
  body.hero-video-active .hero-cinema .vignette,
  body.hero-video-reduced-motion .hero-cinema .cloud-veil,
  body.hero-video-reduced-motion .hero-cinema .cloud-band,
  body.hero-video-reduced-motion .hero-cinema .sky-pulse,
  body.hero-video-reduced-motion .hero-cinema .sun-beam,
  body.hero-video-reduced-motion .hero-cinema .sun-core,
  body.hero-video-reduced-motion .hero-cinema .sun-occluder,
  body.hero-video-reduced-motion .hero-cinema .sun-ray,
  body.hero-video-reduced-motion .hero-cinema .reflection,
  body.hero-video-reduced-motion .hero-cinema .vignette,
  body.hero-video-settled .hero-cinema .cloud-veil,
  body.hero-video-settled .hero-cinema .cloud-band,
  body.hero-video-settled .hero-cinema .sky-pulse,
  body.hero-video-settled .hero-cinema .sun-beam,
  body.hero-video-settled .hero-cinema .sun-core,
  body.hero-video-settled .hero-cinema .sun-occluder,
  body.hero-video-settled .hero-cinema .sun-ray,
  body.hero-video-settled .hero-cinema .reflection,
  body.hero-video-settled .hero-cinema .vignette{
    opacity:0!important;
    animation:none!important;
  }

  body.hero-video-active .hero-cinema .grade,
  body.hero-video-reduced-motion .hero-cinema .grade,
  body.hero-video-settled .hero-cinema .grade{
    z-index:2;
    background:linear-gradient(180deg, rgba(5,8,14,.18) 0%, rgba(5,8,14,.38) 44%, rgba(5,8,14,.66) 100%);
    mix-blend-mode:normal;
    opacity:0;
    transition:opacity 1.2s cubic-bezier(.22,1,.36,1);
  }

  body.hero-video-overlay-visible .hero-cinema .grade,
  body.hero-video-reduced-motion .hero-cinema .grade,
  body.hero-video-settled .hero-cinema .grade{
    opacity:1;
  }

  body.hero-video-active .hero-cinema .content-inner::before{
    opacity:0;
  }

  body.hero-video-active .hero-cinema .eyebrow,
  body.hero-video-active .hero-cinema .title,
  body.hero-video-active .hero-cinema .rule,
  body.hero-video-active .hero-cinema .desc,
  body.hero-video-active .hero-cinema .metrics,
  body.hero-video-active .hero-cinema .scroll{
    opacity:0;
    transform:translateY(14px);
    transition:opacity 800ms cubic-bezier(.22,1,.36,1), transform 900ms cubic-bezier(.22,1,.36,1);
  }

  body.hero-video-show-eyebrow .hero-cinema .eyebrow,
  body.hero-video-show-title .hero-cinema .title,
  body.hero-video-show-description .hero-cinema .rule,
  body.hero-video-show-description .hero-cinema .desc,
  body.hero-video-show-metrics .hero-cinema .metrics{
    opacity:1;
    transform:translateY(0);
  }

  body.hero-video-content-complete .hero-cinema .eyebrow,
  body.hero-video-content-complete .hero-cinema .title,
  body.hero-video-content-complete .hero-cinema .rule,
  body.hero-video-content-complete .hero-cinema .desc,
  body.hero-video-content-complete .hero-cinema .metrics{
    opacity:1;
    transform:translateY(0);
  }

  body.hero-video-content-complete .hero-cinema .scroll{
    opacity:1;
    transform:translateX(-50%) translateY(0);
  }

  body.hero-video-active .hero-cinema .scroll{
    transform:translateX(-50%) translateY(14px);
  }

  body.hero-video-active.hero-video-content-complete .hero-cinema .scroll{
    transform:translateX(-50%) translateY(0);
  }

  body.hero-video-reduced-motion .hero-cinema .base-frame,
  body.hero-video-settled .hero-cinema .base-frame{
    inset:0!important;
    background-image:url("assets/hero/hero-river-flight-fallback-end.webp");
    background-position:50% 50%!important;
    transform:none!important;
    animation:none!important;
  }

  body.hero-video-settled .hero-cinema .content-inner::before{
    opacity:0;
  }
}