/* =====================================================================
   PREMIUM LAYER: floating glass navigation, glass surfaces, cinema video,
   scroll-linked motion. Added 24 Sep 2026.
   ===================================================================== */
:root{--glass:rgba(255,255,255,.58);--glass-strong:rgba(255,255,255,.74);--glass-line:rgba(255,255,255,.78);--glass-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 18px 50px -24px rgba(11,23,54,.32),0 0 0 1px rgba(11,23,54,.05)}
a.btn-primary,a.btn-primary:visited,button.btn-primary{color:#fff}

/* floating glass header */
.site-h{position:fixed;top:14px;left:0;right:0;z-index:60;padding-inline:16px;background:none!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.nav-shell{max-width:1180px;margin:0 auto;height:70px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 10px 0 16px;border-radius:24px;background:var(--glass);-webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow);transition:height .35s ease,background .35s ease,box-shadow .35s ease}
.site-h.scrolled .nav-shell{height:62px;background:var(--glass-strong);box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 22px 60px -26px rgba(11,23,54,.45),0 0 0 1px rgba(11,23,54,.06)}
.site-h .logo img{height:50px;width:auto;transition:height .35s ease}
.site-h.scrolled .logo img{height:44px}
.site-h .nav{display:flex;align-items:center;gap:2px;padding:5px;border-radius:16px;background:rgba(11,23,54,.045);box-shadow:inset 0 1px 2px rgba(11,23,54,.06)}
.site-h .nav a{font:560 .92rem/1 var(--body);color:var(--ink-2);padding:10px 14px;border-radius:11px;text-decoration:none;transition:background .25s,color .25s,box-shadow .25s}
.site-h .nav a:hover{background:rgba(255,255,255,.85);color:var(--ink);box-shadow:0 1px 2px rgba(11,23,54,.08)}
.site-h .nav a[aria-current=page]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(11,23,54,.14),0 0 0 1px rgba(11,23,54,.04)}
.nav-actions{display:flex;align-items:center;gap:8px}
.nav-cta{border-radius:16px!important;padding:13px 18px!important}
.btn-primary{position:relative;overflow:hidden}
.btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s ease}
.btn-primary:hover::after{transform:translateX(120%)}
.site-h .menu-btn{display:none;background:rgba(255,255,255,.7);border-color:rgba(11,23,54,.08)}
@media (max-width:1080px){
  .site-h .nav{display:none}
  .site-h .menu-btn{display:flex}
  .nav-shell{height:64px}
  .site-h .logo img{height:44px}
  .menu-open .site-h .nav{display:flex;position:fixed;inset:92px 16px auto 16px;max-height:calc(100vh - 110px);overflow:auto;flex-direction:column;align-items:stretch;gap:4px;padding:12px;border-radius:24px;background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow)}
  .menu-open .site-h .nav a{font-size:1.1rem;padding:16px;border-radius:14px;border:0}
}
@media (max-width:520px){.nav-cta{display:none!important}}

/* space for the floating header */
.hero{padding-top:clamp(128px,14vw,168px)}
.page-hero{padding-top:clamp(128px,13vw,170px)}

/* glass surfaces */
.glass{background:var(--glass);-webkit-backdrop-filter:saturate(170%) blur(20px);backdrop-filter:saturate(170%) blur(20px);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow)}
.wash,.sec.soft{background:radial-gradient(900px 460px at 0% 0%,rgba(37,99,235,.10),transparent 60%),radial-gradient(900px 460px at 100% 100%,rgba(124,58,237,.12),transparent 60%),radial-gradient(600px 300px at 60% 40%,rgba(6,182,212,.06),transparent 70%),#F7F8FC}
.problem,.card,.post-card,.scen,.work-card,.why,.result-card,.form-card,.faq details,details.more,.plan{background:rgba(255,255,255,.66);-webkit-backdrop-filter:saturate(170%) blur(18px);backdrop-filter:saturate(170%) blur(18px);border-color:rgba(255,255,255,.9);box-shadow:var(--glass-shadow)}
.cap{background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.025));-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);border-color:rgba(255,255,255,.14);box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 30px 60px -30px rgba(0,0,0,.6)}
.spot{position:relative;isolation:isolate}
.spot::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .3s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(124,58,237,.14),transparent 45%)}
.spot:hover::before{opacity:1}
.cap.spot::before{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(157,180,255,.22),transparent 45%)}

/* Apple-style centred hero with cinema stage */
.hero-v2 .wrap.hero-center{display:grid;justify-items:center;text-align:center;grid-template-columns:1fr}
.hero-v2 h1{font-size:clamp(2.7rem,1.2rem + 5vw,5.6rem);max-width:15ch;margin:22px auto 22px;letter-spacing:-.035em}
.hero-v2 .lead{margin:0 auto 34px;max-width:44rem;text-align:center}
.hero-v2 .cta-row,.hero-v2 .hero-note{justify-content:center}
.grad-text.shimmer{background-size:200% 100%;animation:shimmer 8s ease-in-out infinite}
@keyframes shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.cinema-wrap{margin-top:clamp(40px,6vw,72px);perspective:1400px}
.cinema{position:relative;border-radius:34px;overflow:hidden;aspect-ratio:16/8.4;min-height:420px;background:radial-gradient(120% 120% at 20% 10%,#E9EDFF,#F4EEFF 45%,#EAF7FB);box-shadow:0 60px 120px -50px rgba(40,30,120,.55),0 0 0 1px rgba(255,255,255,.7) inset;transform:scale(calc(.92 + var(--p,1) * .08)) rotateX(calc((1 - var(--p,1)) * 7deg));transform-origin:50% 0;will-change:transform}
.cinema video,.cinema .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cinema .stage{position:absolute;inset:0;height:auto;min-width:0}
.cinema .stage::before{display:none}
.cinema .mock{background:rgba(255,255,255,.72);-webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);border:1px solid rgba(255,255,255,.85);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 40px 80px -36px rgba(20,20,80,.55)}
.cinema .m-browser{left:4%;top:8%;width:46%;height:78%}
.cinema .m-chat{right:4%;left:auto;top:auto;bottom:6%;width:min(300px,26%)}
.cinema .m-flow{left:30%;right:auto;bottom:5%;width:min(350px,30%)}
.cinema video{filter:saturate(1.08)}
.cinema::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.28),transparent 45%),linear-gradient(0deg,rgba(255,255,255,.18),transparent 30%)}
.cinema .stage{z-index:1}
.cinema .stage-cap{right:18px;bottom:14px;color:rgba(11,23,54,.55)}
@media (max-width:900px){.cinema{aspect-ratio:auto;height:640px;min-height:0}.cinema .m-browser{left:5%;right:5%;width:auto;top:4%;height:50%}.cinema .m-chat{right:5%;left:auto;top:auto;bottom:29%;width:min(300px,80%)}.cinema .m-flow{left:5%;right:auto;bottom:4%;width:min(340px,88%)}}

/* video blocks */
.vid{position:relative;border-radius:28px;overflow:hidden;box-shadow:0 50px 100px -50px rgba(11,23,54,.55);aspect-ratio:16/10;background:#DDE3F5}
.vid video,.vid img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.vid .chip-float{position:absolute;left:18px;bottom:18px;z-index:1}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.bg-video{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.bg-video video{width:100%;height:100%;object-fit:cover;opacity:.42}
.bg-video::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0B1736 0%,rgba(11,23,54,.45) 28%,rgba(11,23,54,.45) 72%,#0B1736 100%)}
.dark > .wrap{position:relative;z-index:1}

/* refined motion */
.js .reveal{opacity:0;transform:translateY(26px) scale(.985);filter:blur(8px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),filter .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js .reveal.in{opacity:1;transform:none;filter:none}
[data-speed]{will-change:transform}
@media (prefers-reduced-motion:reduce){.cinema{transform:none!important}.js .reveal{filter:none}}
.big-quote{font:700 clamp(1.8rem,1rem + 2.6vw,3.2rem)/1.15 var(--display);letter-spacing:-.025em;max-width:22ch;margin:0 auto;text-align:center}
.work-card .shot .badge{display:none}
.hero-v2 .cinema-wrap{display:block}
.shot .kind{position:absolute;left:14px;top:14px;font:600 .7rem/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;padding:8px 11px;border-radius:999px;color:var(--ink);background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);border:1px solid rgba(255,255,255,.9);box-shadow:0 8px 20px -10px rgba(11,23,54,.35)}
.btn-secondary.glass{background:rgba(255,255,255,.6);border-color:rgba(255,255,255,.9)}
.btn-secondary.glass:hover{background:rgba(255,255,255,.85)}
.chip.glass{background:rgba(255,255,255,.7);border-color:rgba(255,255,255,.9);color:var(--ink)}
.site-h .nav .m-only{display:none}
@media (max-width:1080px){.menu-open .site-h .nav .m-only{display:block;margin-top:6px;text-align:center;color:#fff;background:var(--grad);font-weight:650}}
.honesty{background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.ticker{background:linear-gradient(90deg,rgba(247,248,255,.8),rgba(251,247,255,.8))}
.cta-band{box-shadow:0 60px 120px -60px rgba(76,29,149,.7),0 1px 0 rgba(255,255,255,.25) inset}
.m-cta{background:rgba(255,255,255,.72);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-top:1px solid rgba(255,255,255,.9)}
[data-speed]{translate:0 var(--py,0px)}
@media (max-width:640px){
  .cinema{height:560px;border-radius:26px}
  .cinema .m-browser{left:5%;right:5%;width:auto;top:4%;height:56%}
  .cinema .m-chat{left:auto;right:5%;top:auto;bottom:5%;width:82%}
  .cinema .m-flow{display:none}
  .hero-v2 .cta-row .btn{min-width:230px;justify-content:center}
}
.capture .site-h,.capture .m-cta{display:none!important}