/* ============================================================
   GLASS SPLIT theme — extracted from o-glass-split.html so the
   P / Q / R layout mockups all share one skin.
   Deep navy, frosted glass, ambient light, cyan + gold, Sora.
   ============================================================ */
:root{
  --bg:#070B14; --bg-2:#0C1220;
  --glass:rgba(255,255,255,.045); --glass-2:rgba(255,255,255,.07);
  --cyan:#6EC1E4; --cyan-dp:#4E9FC4; --gold:#C48F56;
  --txt:#EAF0F7; --dim:#8C9AAE; --line:rgba(255,255,255,.1);
  --disp:"Sora",system-ui,sans-serif; --sans:"Inter",system-ui,sans-serif;
  --e:cubic-bezier(.16,1,.3,1); --pop:cubic-bezier(.34,1.56,.64,1); --r:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--txt);font-family:var(--sans);font-size:16.5px;
  line-height:1.75;font-weight:300;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:min(1240px,90vw);margin-inline:auto}

/* ambient surface */
.amb{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;background:var(--bg)}
.amb i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5}
.amb i:nth-child(1){width:52vw;height:52vw;left:-14vw;top:-8vw;
  background:radial-gradient(circle,rgba(110,193,228,.3),transparent 68%);animation:drift1 26s ease-in-out infinite alternate}
.amb i:nth-child(2){width:44vw;height:44vw;right:-12vw;top:34vh;
  background:radial-gradient(circle,rgba(196,143,86,.26),transparent 68%);animation:drift2 32s ease-in-out infinite alternate}
.amb i:nth-child(3){width:38vw;height:38vw;left:24vw;bottom:-12vw;
  background:radial-gradient(circle,rgba(84,110,220,.24),transparent 68%);animation:drift1 38s ease-in-out infinite alternate-reverse}
@keyframes drift1{to{transform:translate(9vw,7vh) scale(1.16)}}
@keyframes drift2{to{transform:translate(-8vw,-9vh) scale(1.1)}}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* type */
h1,h2,h3,.display{font-family:var(--disp);font-weight:600;letter-spacing:-.03em;line-height:1.05;margin:0}
.display{font-size:clamp(2.2rem,5.2vw,4.1rem)}
.grad-text{background:linear-gradient(100deg,#fff 30%,var(--cyan) 75%,var(--gold) 105%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{font-family:var(--disp);font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--cyan);font-weight:400;margin:0}
p{color:var(--dim)}

/* progress + nav */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:80;transform:scaleX(0);
  transform-origin:0 50%;background:linear-gradient(90deg,var(--cyan),var(--gold))}
nav{position:fixed;inset:0 0 auto;z-index:70;padding:1.4rem 0;transition:padding .5s var(--e)}
nav.stuck{padding:.7rem 0}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  padding:.65rem 1.3rem;border-radius:16px;border:1px solid transparent;transition:.5s var(--e)}
nav.stuck .nav-inner{background:rgba(12,18,32,.62);backdrop-filter:blur(20px) saturate(150%);
  border-color:var(--line);box-shadow:0 10px 40px -18px rgba(0,0,0,.9)}
.brand{font-family:var(--disp);font-weight:600;font-size:1.15rem;letter-spacing:-.02em}
.navlinks{display:flex;gap:1.9rem;font-size:.84rem}
.navlinks a{color:var(--dim);transition:color .35s}
.navlinks a:hover{color:var(--txt)}
@media(max-width:1040px){.navlinks{display:none}}
@media(max-width:560px){.nav-cta{display:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;position:relative;overflow:hidden;
  padding:.85rem 1.7rem;border-radius:12px;border:1px solid transparent;font:inherit;font-size:.85rem;
  font-weight:500;background:linear-gradient(135deg,var(--cyan),var(--cyan-dp));color:#04121B;
  transition:.4s var(--e)}
.btn span{position:relative;z-index:2}
.btn::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1;
  background:linear-gradient(135deg,#fff,var(--cyan));opacity:0;transition:opacity .4s var(--e)}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px -12px rgba(110,193,228,.65)}
.btn:hover::before{opacity:1}
.btn-line{background:var(--glass);color:var(--txt);border:1px solid var(--line);backdrop-filter:blur(12px)}
.btn-line::before{background:rgba(255,255,255,.1)}
.btn-line:hover{box-shadow:none;border-color:rgba(255,255,255,.25)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* glass panel primitive */
.panel{background:var(--glass);backdrop-filter:blur(16px);border:1px solid var(--line);
  border-radius:var(--r);position:relative;overflow:hidden;
  transition:border-color .45s var(--e),background .45s var(--e),transform .55s var(--e)}
.panel:hover{border-color:rgba(110,193,228,.4);background:var(--glass-2)}
.panel.glow::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(110,193,228,.14),transparent 62%);
  opacity:0;transition:opacity .45s}
.panel.glow:hover::after{opacity:1}
.panel>*{position:relative;z-index:1}

/* reveal */
.reveal{opacity:0;transform:translateY(30px);
  transition:opacity 1.05s var(--e),transform 1.05s var(--e)}
.reveal.in{opacity:1;transform:none}
section{position:relative;padding:clamp(5.5rem,12vw,9.5rem) 0}

/* media figures — dissolve into the navy */
.fig{margin:0;position:relative;overflow:hidden;border-radius:var(--r);border:1px solid var(--line)}
.fig img{width:100%;object-fit:cover;will-change:transform}
.fig::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(7,11,20,.8),transparent 46%)}
.fig-about img{aspect-ratio:1536/1536}
.fig-master img{aspect-ratio:1361/1460}

/* platform stat cards — real links, live numbers */
.plat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.1rem}
.plat-card{display:flex;flex-direction:column;gap:.4rem;padding:1.5rem 1.5rem 1.4rem;cursor:pointer}
.plat-card svg{width:24px;height:24px;fill:var(--cyan);transition:.4s var(--pop)}
.plat-card:hover svg{transform:scale(1.18) rotate(-6deg);fill:var(--gold)}
.plat-card b{font-family:var(--disp);font-weight:600;font-size:clamp(1.8rem,3.6vw,2.5rem);
  line-height:1;color:var(--txt);letter-spacing:-.03em;margin-top:.5rem}
.plat-card small{font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;color:var(--dim)}
.plat-card .follow{margin-top:.7rem;font-size:.78rem;color:var(--cyan);display:inline-flex;
  align-items:center;gap:.4rem;opacity:0;transform:translateX(-6px);transition:.4s var(--e)}
.plat-card:hover .follow{opacity:1;transform:none}
.plat-card .follow::after{content:"→";transition:transform .35s var(--e)}
.plat-card:hover .follow::after{transform:translateX(4px)}
.live-dot{display:inline-flex;align-items:center;gap:.45rem;font-size:.64rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim)}
.live-dot i{width:7px;height:7px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 0 0 rgba(110,193,228,.55);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(110,193,228,0)}100%{box-shadow:0 0 0 0 rgba(110,193,228,0)}}

/* split bar */
.split{max-width:420px}
.split-row{display:flex;justify-content:space-between;align-items:baseline;padding:.5rem 0}
.split-row span{font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--dim)}
.split-row b{font-family:var(--disp);font-weight:600;font-size:1.5rem;color:var(--txt)}
.split-bar{height:3px;position:relative;overflow:hidden;background:rgba(255,255,255,.08);border-radius:99px}
.split-bar i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--cyan),var(--gold));transition:width 1.9s var(--e) .2s}
.split.in .split-bar i{width:var(--w,60%)}

/* signup + forms */
.signup{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.signup input{flex:1 1 220px;min-width:0}
label{display:block;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:.5rem}
input,textarea{width:100%;font:inherit;background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-radius:12px;padding:.85rem 1.05rem;color:var(--txt);transition:.35s var(--e)}
input::placeholder{color:var(--dim)}
input:focus,textarea:focus{border-color:var(--cyan);background:rgba(110,193,228,.06);outline:none}
textarea{resize:vertical;min-height:130px}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;padding:clamp(1.6rem,3.5vw,2.4rem)}
@media(max-width:600px){.contact-form{grid-template-columns:1fr}}
.f.full{grid-column:1/-1}

/* why list */
.why-list{list-style:none;margin:0;padding:0}
.why-list li{position:relative;display:grid;grid-template-columns:auto 1fr;gap:1.4rem;align-items:baseline;
  padding:1.5rem 0;border-top:1px solid var(--line);transition:padding-left .55s var(--e)}
.why-list li:last-child{border-bottom:1px solid var(--line)}
.why-list li:hover{padding-left:1.1rem}
.why-n{font-family:var(--disp);font-size:.9rem;color:var(--gold)}
.why-t{font-family:var(--disp);font-weight:400;font-size:clamp(1.4rem,3.4vw,2.5rem);transition:color .45s}
.why-list li:hover .why-t{color:var(--cyan)}
.why-rule{position:absolute;left:0;right:0;bottom:0;height:1px;grid-column:1/-1}
.why-rule::after{content:"";position:absolute;inset:0;width:0;
  background:linear-gradient(90deg,var(--cyan),var(--gold));transition:width .8s var(--e)}
.why-list li:hover .why-rule::after{width:100%}

/* brand rail */
.brand-rail{overflow:hidden;margin-top:2.5rem;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent)}
.brand-row{display:flex;align-items:center;gap:clamp(2.5rem,6vw,5rem);width:max-content;will-change:transform}
.brand-row img{height:38px;width:auto;object-fit:contain;filter:grayscale(1) brightness(2.6);opacity:.5;
  transition:.45s var(--e)}
.brand-row img:hover{opacity:1;transform:scale(1.1)}

/* socials + footer */
.socials{display:flex;gap:.7rem}
.socials a{width:46px;height:46px;display:grid;place-items:center;border:1px solid var(--line);
  border-radius:11px;background:var(--glass);transition:.45s var(--pop)}
.socials svg{width:18px;height:18px;fill:var(--dim);transition:fill .4s}
.socials a:hover{border-color:var(--cyan);transform:translateY(-3px)}
.socials a:hover svg{fill:var(--cyan)}
footer{padding:3rem 0 6rem;border-top:1px solid var(--line);font-size:.76rem;color:var(--dim)}
footer .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* switcher */
.switcher{position:fixed;left:50%;bottom:1.1rem;translate:-50% 0;z-index:90;display:flex;gap:.3rem;
  border-radius:99px;padding:.3rem;background:rgba(12,18,32,.8);border:1px solid var(--line);
  backdrop-filter:blur(20px)}
.switcher a{font-size:.74rem;padding:.5rem 1rem;border-radius:99px;color:var(--dim);transition:.3s;white-space:nowrap}
.switcher a:hover{color:var(--txt)}
.switcher a.on{background:var(--cyan);color:#04121B;font-weight:600}
@media(max-width:620px){.switcher a{padding:.42rem .62rem;font-size:.66rem}}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .reveal{opacity:1!important;transform:none!important}
  .amb i{animation:none!important}
  [data-para]{transform:none!important}
}