html{-webkit-text-size-adjust:100%}
[hidden]{display:none!important}
img,svg{max-width:100%}
/* Layout: dark-first product-marketing site for an app studio. Deep navy ground, dot grid, slow light fields, glass panels on a 1180px measure. Home sells the studio; the SCJ app and the B2B services each get their own page; company data lives only on Company and Contact. */
:root{
  --bg:#05070C; --bg-2:#0A0E16; --fg:#F1F4F9; --muted:#8C96A8; --dim:#5C6779;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --glass:rgba(255,255,255,.035); --glass-2:rgba(255,255,255,.06); --dot:rgba(255,255,255,.10);
  --accent:#5B8CFF; --accent-2:#22D3EE; --violet:#8B5CF6; --on-accent:#05070C; --ok:#34D399;
  --glow-a:rgba(91,140,255,.55); --glow-b:rgba(34,211,238,.35); --glow-c:rgba(139,92,246,.35);
  --phone:#0B1019; --phone-edge:#1C2433;
  --font-display:'Schibsted Grotesk','Helvetica Neue',Arial,sans-serif;
  --font-body:'Instrument Sans','Helvetica Neue',Arial,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#F4F6FA; --bg-2:#FFFFFF; --fg:#0B1220; --muted:#55627A; --dim:#7B8698;
    --line:rgba(11,18,32,.09); --line-2:rgba(11,18,32,.16); --glass:rgba(255,255,255,.7); --glass-2:rgba(255,255,255,.95); --dot:rgba(11,18,32,.12);
    --accent:#2F63F5; --accent-2:#0891B2; --violet:#6D28D9; --on-accent:#FFFFFF; --ok:#059669;
    --glow-a:rgba(47,99,245,.22); --glow-b:rgba(8,145,178,.16); --glow-c:rgba(109,40,217,.14);
    --phone:#0B1019; --phone-edge:#2A3446;
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --bg:#F4F6FA; --bg-2:#FFFFFF; --fg:#0B1220; --muted:#55627A; --dim:#7B8698;
  --line:rgba(11,18,32,.09); --line-2:rgba(11,18,32,.16); --glass:rgba(255,255,255,.7); --glass-2:rgba(255,255,255,.95); --dot:rgba(11,18,32,.12);
  --accent:#2F63F5; --accent-2:#0891B2; --violet:#6D28D9; --on-accent:#FFFFFF; --ok:#059669;
  --glow-a:rgba(47,99,245,.22); --glow-b:rgba(8,145,178,.16); --glow-c:rgba(109,40,217,.14);
  --phone:#0B1019; --phone-edge:#2A3446;
  color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--fg); font-family:var(--font-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
a{color:inherit; text-decoration:none}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}
h1,h2,h3,h4{font-family:var(--font-display); margin:0; line-height:1.05; letter-spacing:-0.025em; text-wrap:balance}
h1{font-size:clamp(2.7rem,6.4vw,5.2rem); font-weight:800}
h2{font-size:clamp(2rem,4.2vw,3.2rem); font-weight:700}
h3{font-size:1.15rem; font-weight:700; letter-spacing:-0.015em}
p{margin:0}
.wrap{max-width:1180px; margin-inline:auto; padding-inline:clamp(16px,4vw,40px)}
.mono{font-family:var(--font-mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.lead{font-size:1.12rem; color:var(--muted); max-width:56ch; line-height:1.65}
.grad{background:linear-gradient(92deg,var(--accent) 0%,var(--accent-2) 55%,var(--violet) 110%); -webkit-background-clip:text; background-clip:text; color:transparent}
.btn{display:inline-flex; align-items:center; gap:9px; padding:13px 20px; border-radius:999px; font-weight:600; font-size:.95rem; border:1px solid var(--line-2); color:var(--fg); background:var(--glass); cursor:pointer; font-family:var(--font-body); line-height:1.1; white-space:nowrap; transition:transform .15s ease,border-color .15s ease,background .15s ease}
.btn:hover{border-color:var(--fg); transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:var(--on-accent); border-color:transparent; box-shadow:0 10px 30px -10px var(--glow-a)}
.btn-primary:hover{border-color:transparent; box-shadow:0 14px 36px -10px var(--glow-a)}
.btn-sm{padding:9px 14px; font-size:.85rem}
.btn svg{width:16px; height:16px}
section{scroll-margin-top:80px}
.sec{padding-block:clamp(72px,9vw,130px); position:relative}
.sec-head{display:grid; gap:18px; max-width:760px; margin-bottom:clamp(36px,5vw,64px)}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-2); width:fit-content}
.eyebrow::before{content:""; width:18px; height:1px; background:var(--accent-2)}

/* Ambient background */
.field{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.field::before{content:""; position:absolute; inset:0; background-image:radial-gradient(var(--dot) 1px,transparent 1.2px); background-size:26px 26px; mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 20%,transparent 75%); -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 20%,transparent 75%)}
.orb{position:absolute; border-radius:50%; filter:blur(70px); opacity:.9; will-change:transform}
.orb.a{width:560px; height:560px; background:var(--glow-a); top:-180px; right:-80px; animation:drift 22s ease-in-out infinite alternate}
.orb.b{width:420px; height:420px; background:var(--glow-b); bottom:-160px; left:10%; animation:drift 28s ease-in-out infinite alternate-reverse}
.orb.c{width:360px; height:360px; background:var(--glow-c); top:30%; left:-140px; animation:drift 32s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(60px,40px,0)}}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} .orb,.phone-wrap,.float,.btn,.track{animation:none!important; transition:none!important} }

/* Top bar */
.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:40; backdrop-filter:blur(14px) saturate(1.3); background:color-mix(in srgb,var(--bg) 72%,transparent); border-bottom:1px solid var(--line)}
.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; height:64px}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800; font-size:1.15rem; letter-spacing:-0.04em}
.logo{width:28px; height:28px; display:block; filter:drop-shadow(0 4px 14px var(--glow-a))}
.nav{display:flex; align-items:center; gap:26px}
.nav a{font-size:.92rem; font-weight:500; color:var(--muted); transition:color .15s}
.nav a:hover{color:var(--fg)}
.nav .btn{color:var(--fg)}
.menu{display:none; background:var(--glass); border:1px solid var(--line-2); color:var(--fg); font:inherit; font-size:.85rem; padding:8px 12px; border-radius:999px; cursor:pointer}
@media (max-width:820px){
  .menu{display:inline-block}
  .nav{display:none; position:absolute; left:0; right:0; top:64px; flex-direction:column; align-items:stretch; gap:0; background:var(--bg-2); border-bottom:1px solid var(--line)}
  .nav.open{display:flex}
  .nav a{padding:14px clamp(16px,4vw,40px); border-top:1px solid var(--line); color:var(--fg)}
  .nav .btn{margin:12px clamp(16px,4vw,40px) 14px; justify-content:center}
}

/* Hero */
.hero{position:relative; padding-block:clamp(56px,8vw,120px) clamp(48px,6vw,96px); overflow:hidden}
.hero .wrap{position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(28px,5vw,72px); align-items:center}
.hero-copy{display:grid; gap:26px; min-width:0}
.pill{display:inline-flex; align-items:center; gap:10px; padding:7px 12px 7px 8px; border-radius:999px; border:1px solid var(--line-2); background:var(--glass); font-family:var(--font-mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); width:fit-content}
.pill i{width:18px; height:18px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2)); display:inline-grid; place-items:center; color:var(--on-accent)}
.pill i svg{width:10px; height:10px}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap}
.proofs{display:flex; flex-wrap:wrap; gap:10px 22px; padding-top:6px}
.proofs span{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}
.proofs span::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 18%,transparent)}
@media (max-width:920px){ .hero .wrap{grid-template-columns:1fr} }

/* Phone mockup */
.stage{position:relative; min-height:560px; display:grid; place-items:center; perspective:1400px; min-width:0}
.stage-glow{position:absolute; width:70%; height:70%; border-radius:50%; background:radial-gradient(circle,var(--glow-a) 0%,transparent 65%); filter:blur(40px); pointer-events:none}
.phone-wrap{transform:rotateY(-16deg) rotateX(7deg) rotateZ(-2deg); transform-style:preserve-3d; animation:hover 7s ease-in-out infinite}
@keyframes hover{0%,100%{transform:rotateY(-16deg) rotateX(7deg) rotateZ(-2deg) translateY(0)}50%{transform:rotateY(-16deg) rotateX(7deg) rotateZ(-2deg) translateY(-10px)}}
.phone{width:290px; max-width:100%; aspect-ratio:9/19.2; border-radius:44px; background:var(--phone); border:2px solid var(--phone-edge); box-shadow:0 60px 120px -40px rgba(0,0,0,.9),0 0 0 8px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.05); padding:12px; position:relative}
.phone::before{content:""; position:absolute; top:14px; left:50%; transform:translateX(-50%); width:88px; height:26px; border-radius:16px; background:#000; z-index:2}
.screen{width:100%; height:100%; border-radius:34px; background:linear-gradient(180deg,#0E1524 0%,#0A0F1A 100%); color:#F1F4F9; overflow:hidden; display:grid; grid-template-rows:auto auto 1fr auto; gap:12px; padding:52px 16px 18px; position:relative}
.screen .st{position:absolute; top:16px; left:0; right:0; display:flex; justify-content:space-between; padding:0 24px; font-family:var(--font-mono); font-size:.62rem; color:#C7CFDD}
.s-head .l{font-family:var(--font-mono); font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; color:#8C96A8}
.s-head h4{font-family:var(--font-display); font-size:1.25rem; font-weight:700; letter-spacing:-0.02em; color:#F1F4F9; margin-top:2px}
.ring-card{display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center; padding:12px; border-radius:16px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08)}
.ring{width:64px; height:64px}
.ring circle{fill:none; stroke-width:6; stroke-linecap:round}
.ring .track-c{stroke:rgba(255,255,255,.1)}
.ring .val{stroke:url(#ringGrad); stroke-dasharray:163; stroke-dashoffset:41; transform:rotate(-90deg); transform-origin:50% 50%}
.ring-card strong{display:block; font-family:var(--font-display); font-size:1rem; letter-spacing:-0.01em}
.ring-card span{font-size:.72rem; color:#8C96A8}
.s-list{display:grid; gap:8px; align-content:start}
.s-item{display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06)}
.s-item .ck{width:20px; height:20px; border-radius:7px; border:1.5px solid rgba(255,255,255,.2); display:grid; place-items:center}
.s-item.done .ck{background:linear-gradient(135deg,#5B8CFF,#22D3EE); border-color:transparent; color:#05070C}
.s-item .ck svg{width:11px; height:11px}
.s-item b{display:block; font-weight:600; font-size:.8rem}
.s-item small{font-family:var(--font-mono); font-size:.56rem; color:#8C96A8; letter-spacing:.04em}
.s-item .tm{font-family:var(--font-mono); font-size:.58rem; color:#8C96A8}
.s-item.done .tm{color:#34D399}
.s-cta{display:grid; place-items:center; padding:12px; border-radius:14px; background:linear-gradient(135deg,#5B8CFF,#22D3EE); color:#05070C; font-weight:700; font-size:.85rem}
.chart{display:grid; gap:6px; padding:12px; border-radius:16px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08)}
.chart .l{display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:.58rem; color:#8C96A8; letter-spacing:.05em; text-transform:uppercase}
.bars{display:grid; grid-template-columns:repeat(14,1fr); gap:4px; align-items:end; height:64px}
.bars i{display:block; border-radius:3px 3px 1px 1px; background:linear-gradient(180deg,#22D3EE,#5B8CFF)}
.bars i.n{background:rgba(255,255,255,.12)}
.streak{display:grid; grid-template-columns:repeat(7,1fr); gap:6px}
.streak i{aspect-ratio:1; border-radius:6px; background:rgba(255,255,255,.08); display:grid; place-items:center; font-family:var(--font-mono); font-size:.55rem; color:#8C96A8}
.streak i.on{background:linear-gradient(135deg,#5B8CFF,#22D3EE); color:#05070C}
.float{position:absolute; padding:12px 14px; border-radius:14px; background:var(--glass-2); border:1px solid var(--line-2); backdrop-filter:blur(12px); box-shadow:0 20px 50px -20px rgba(0,0,0,.7); display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center; font-size:.8rem; min-width:210px; animation:bob 9s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.float .ic{width:30px; height:30px; border-radius:9px; display:grid; place-items:center; color:var(--on-accent); background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.float .ic svg{width:15px; height:15px}
.float b{display:block; font-weight:600}
.float span{font-family:var(--font-mono); font-size:.6rem; color:var(--muted); letter-spacing:.04em}
.float.f1{top:12%; left:0; animation-delay:-2s}
.float.f2{bottom:14%; right:0; animation-delay:-5s}
.screens{position:relative; display:grid; place-items:center; min-height:520px}
.screens .phone-wrap{animation:none; transform:rotateY(12deg) rotateX(4deg) rotateZ(2deg)}
.screens .stage-glow{background:radial-gradient(circle,var(--glow-c) 0%,transparent 65%)}
.duo{display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:center; justify-items:center; position:relative; min-height:560px}
.duo .phone-wrap{animation:none}
.duo .phone-wrap:first-child{transform:rotateY(14deg) rotateX(4deg) translateY(30px)}
.duo .phone-wrap:last-child{transform:rotateY(-14deg) rotateX(4deg) translateY(-30px)}
.duo .phone{width:250px}
@media (max-width:920px){ .stage{min-height:620px} .float.f1{left:2%} .float.f2{right:2%} }
@media (max-width:640px){ .duo{grid-template-columns:1fr; min-height:0} .duo .phone-wrap{transform:none!important} }
@media (max-width:480px){ .phone{width:250px} .float{min-width:170px; font-size:.72rem} .float b{font-size:.74rem} .stage{min-height:580px} }

/* Ticker */
.ticker{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-2); overflow:hidden; position:relative}
.ticker::before,.ticker::after{content:""; position:absolute; top:0; bottom:0; width:120px; z-index:2; pointer-events:none}
.ticker::before{left:0; background:linear-gradient(90deg,var(--bg-2),transparent)}
.ticker::after{right:0; background:linear-gradient(270deg,var(--bg-2),transparent)}
.track{display:flex; width:max-content; animation:scroll 42s linear infinite}
.track span{display:inline-flex; align-items:center; gap:14px; padding:16px 28px; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); white-space:nowrap}
.track span::after{content:""; width:5px; height:5px; border-radius:50%; background:var(--accent)}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){ .track{flex-wrap:wrap; width:auto} }

/* Featured app card */
.featured{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:center; padding:clamp(24px,4vw,48px); border-radius:28px; border:1px solid var(--line-2); background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 12%,var(--bg-2)),color-mix(in srgb,var(--violet) 10%,var(--bg-2))); position:relative; overflow:hidden}
.featured .copy,.featured .screens{min-width:0; position:relative; z-index:1}
.featured > .orb{position:absolute; z-index:0}
.featured .orb{opacity:.5}
.featured .name{display:flex; align-items:center; gap:14px}
.featured .name .logo{width:52px; height:52px}
.featured .name h3{font-size:2rem; letter-spacing:-0.04em}
.featured .name .mono{margin-top:2px; display:block}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chips span{font-family:var(--font-mono); font-size:.62rem; letter-spacing:.05em; text-transform:uppercase; padding:6px 10px; border-radius:999px; border:1px solid var(--line-2); background:var(--glass); color:var(--muted)}
.featured .copy{display:grid; gap:20px}
.featured .screens{min-height:480px}
@media (max-width:920px){ .featured{grid-template-columns:1fr} .featured .screens{order:-1; min-height:520px} }
.more{margin-top:22px; color:var(--muted); font-size:.95rem; max-width:64ch}

/* Feature cards */
.feat{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,80px); align-items:center}
.feat > *{min-width:0}
.flist{display:grid; gap:14px}
.fcard{display:grid; grid-template-columns:auto 1fr; gap:16px; padding:20px; border-radius:18px; background:var(--glass); border:1px solid var(--line); transition:border-color .15s,background .15s}
.fcard:hover{border-color:var(--line-2); background:var(--glass-2)}
.fcard .ic{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 22%,transparent),color-mix(in srgb,var(--accent-2) 22%,transparent)); border:1px solid var(--line-2); color:var(--accent-2)}
.fcard .ic svg{width:20px; height:20px}
.fcard p{color:var(--muted); font-size:.95rem; margin-top:4px}
@media (max-width:920px){ .feat{grid-template-columns:1fr} .feat .screens{order:-1} }

/* Services */
.sgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.scard{padding:22px; border-radius:18px; background:var(--glass); border:1px solid var(--line); display:grid; gap:12px; align-content:start; min-width:0; position:relative; overflow:hidden}
.scard::after{content:""; position:absolute; inset:auto -40px -60px auto; width:160px; height:160px; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--accent) 25%,transparent),transparent 70%); pointer-events:none}
.scard .ic{width:40px; height:40px; border-radius:11px; display:grid; place-items:center; border:1px solid var(--line-2); background:var(--glass-2); color:var(--accent-2)}
.scard .ic svg{width:19px; height:19px}
.scard p{color:var(--muted); font-size:.93rem}
.scard ul{margin:0; padding-left:18px; color:var(--muted); font-size:.9rem; display:grid; gap:4px}
@media (max-width:1000px){ .sgrid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .sgrid{grid-template-columns:1fr} }
.who{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px}
.who span{padding:8px 14px; border-radius:999px; border:1px solid var(--line-2); background:var(--glass); font-size:.88rem; color:var(--fg)}
.proc{display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin-top:8px}
.pstep{position:relative; border-top:1px solid var(--line-2); padding:20px 20px 8px 0; display:grid; gap:8px; align-content:start; min-width:0}
.pstep::before{content:""; position:absolute; top:-4px; left:0; width:7px; height:7px; border-radius:50%; background:var(--accent-2)}
.pstep .n{font-family:var(--font-mono); font-size:.64rem; letter-spacing:.06em; color:var(--accent-2)}
.pstep p{color:var(--muted); font-size:.9rem}
@media (max-width:900px){ .proc{grid-template-columns:1fr; border-left:1px solid var(--line-2); padding-left:22px} .pstep{border-top:0; padding:0 0 24px} .pstep::before{top:6px; left:-26px} }

/* Technology layers */
.layers{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,72px); align-items:start}
.layers > *{min-width:0}
.stack{display:grid; gap:12px}
.layer{display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start; padding:22px; border-radius:18px; background:var(--glass); border:1px solid var(--line)}
.layer .n{font-family:var(--font-mono); font-size:.66rem; letter-spacing:.06em; color:var(--accent-2); padding-top:4px}
.layer p{color:var(--muted); font-size:.95rem; margin-top:6px}
.layer .tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px}
.layer .tags span{font-family:var(--font-mono); font-size:.6rem; letter-spacing:.05em; text-transform:uppercase; padding:5px 8px; border-radius:6px; border:1px solid var(--line-2); color:var(--muted)}
.log{border-radius:18px; border:1px solid var(--line-2); background:linear-gradient(180deg,var(--glass-2),var(--glass)); overflow:hidden; box-shadow:0 40px 90px -50px rgba(0,0,0,.8); position:sticky; top:96px}
.log-head{display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line); font-family:var(--font-mono); font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.log-head i{display:inline-flex; gap:6px}
.log-head i b{width:9px; height:9px; border-radius:50%; background:var(--line-2); display:inline-block}
.log-body{padding:8px 0; font-family:var(--font-mono); font-size:.74rem}
.ev{display:grid; grid-template-columns:22px 92px 1fr auto; gap:12px; align-items:center; padding:11px 16px; border-bottom:1px solid var(--line); min-width:0}
.ev:last-child{border-bottom:0}
.ev .dot{width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 18%,transparent); justify-self:center}
.ev .dot.wait{background:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent); animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--accent) 8%,transparent)}}
.ev .t{color:var(--dim); font-variant-numeric:tabular-nums}
.ev .k{color:var(--fg); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ev .k em{font-style:normal; color:var(--accent-2)}
.ev .s{color:var(--muted); font-size:.62rem; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap}
.log-foot{padding:12px 16px; border-top:1px solid var(--line); font-size:.78rem; color:var(--muted); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}
@media (max-width:920px){ .layers{grid-template-columns:1fr} .log{position:static} .ev{grid-template-columns:18px 1fr auto} .ev .t{display:none} }

/* FAQ */
.faq{display:grid; gap:10px; max-width:820px}
.faq details{border:1px solid var(--line); border-radius:14px; background:var(--glass); padding:0 20px}
.faq summary{cursor:pointer; padding:16px 0; font-weight:600; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:var(--font-mono); color:var(--accent-2); font-size:1.1rem}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--muted); padding-bottom:18px; font-size:.95rem}

/* CTA band */
.cta{position:relative; overflow:hidden; border-radius:28px; border:1px solid var(--line-2); padding:clamp(40px,6vw,72px); background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 16%,var(--bg-2)),color-mix(in srgb,var(--violet) 14%,var(--bg-2)))}
.cta .orb{opacity:.6}
.cta .in{position:relative; display:grid; gap:18px; max-width:640px}
.cta .actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:8px}

/* Footer */
.foot{border-top:1px solid var(--line); padding-block:44px 28px; background:var(--bg-2)}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px}
.foot-grid > *{min-width:0}
.foot h4{font-family:var(--font-mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; font-weight:500; color:var(--muted); margin:0 0 14px}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:.92rem}
.foot ul a{color:var(--muted); transition:color .15s}
.foot ul a:hover{color:var(--fg)}
.foot .tagline{color:var(--muted); margin-top:14px; max-width:40ch; font-size:.92rem}
.foot-bottom{border-top:1px solid var(--line); margin-top:32px; padding-top:16px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.04em; color:var(--dim)}
@media (max-width:760px){ .foot-grid{grid-template-columns:1fr 1fr} .foot-grid > :first-child{grid-column:1 / -1} }

/* Secondary pages */
.page{position:relative}
.page .hero{padding-bottom:clamp(32px,5vw,64px)}
.page .narrow{max-width:860px; position:relative}
.back{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:28px}
.back:hover{color:var(--fg)}
.page .updated{font-family:var(--font-mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:14px 0 30px; padding-bottom:22px; border-bottom:1px solid var(--line)}
.page .legal-body h2{font-size:1.25rem; margin-top:34px; margin-bottom:10px; letter-spacing:-0.01em}
.page .legal-body p,.page .legal-body li{max-width:72ch}
.page .legal-body p + p{margin-top:10px}
.page .legal-body ul{padding-left:20px; margin:8px 0}
.page .legal-body li + li{margin-top:6px}
a.inl{color:var(--accent-2)}
.panel{border:1px solid var(--line-2); border-radius:18px; background:var(--glass); overflow:hidden}
.panel .ph{display:flex; justify-content:space-between; align-items:center; padding:12px 18px; border-bottom:1px solid var(--line)}
.panel dl{margin:0; display:grid; grid-template-columns:auto 1fr}
.panel dt,.panel dd{margin:0; padding:13px 18px; border-top:1px solid var(--line); font-size:.95rem}
.panel dt{font-family:var(--font-mono); font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); white-space:nowrap; padding-top:16px}
.panel dd{font-variant-numeric:tabular-nums}
.panel dt:first-of-type,.panel dt:first-of-type + dd{border-top:0}
@media (max-width:520px){ .panel dl{grid-template-columns:1fr} .panel dt{padding-bottom:0} .panel dd{border-top:0; padding-top:4px} }
.cgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:34px}
.ccard{padding:22px; border-radius:18px; background:var(--glass); border:1px solid var(--line); display:grid; gap:10px; min-width:0; align-content:start}
.ccard .val{font-family:var(--font-display); font-weight:700; font-size:1.15rem; letter-spacing:-0.015em; word-break:break-word; user-select:all}
.ccard address{font-style:normal; line-height:1.55; font-size:.95rem}
.ccard .row{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
@media (max-width:760px){ .cgrid{grid-template-columns:1fr} }
.summary{border:1px solid var(--line-2); border-radius:16px; padding:18px 20px; background:var(--glass); margin-bottom:8px}
.summary strong{display:block; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-2); margin-bottom:8px}
.summary ul{margin:0; padding-left:18px}

/* ===== Section themes (explicit light/dark rhythm, like a holding site) ===== */
.dark{ --bg:#05070C; --bg-2:#0A0E16; --fg:#F1F4F9; --muted:#8C96A8; --dim:#5C6779; --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14); --glass:rgba(255,255,255,.035); --glass-2:rgba(255,255,255,.06); --dot:rgba(255,255,255,.10); --accent:#5B8CFF; --accent-2:#22D3EE; --violet:#8B5CF6; --on-accent:#05070C; --ok:#34D399; --glow-a:rgba(91,140,255,.55); --glow-b:rgba(34,211,238,.35); --glow-c:rgba(139,92,246,.35); background:var(--bg); color:var(--fg) }
.light{ --bg:#F5F7FB; --bg-2:#FFFFFF; --fg:#0B1220; --muted:#55627A; --dim:#7B8698; --line:rgba(11,18,32,.09); --line-2:rgba(11,18,32,.16); --glass:rgba(255,255,255,.8); --glass-2:#FFFFFF; --dot:rgba(11,18,32,.14); --accent:#2F63F5; --accent-2:#0891B2; --violet:#6D28D9; --on-accent:#FFFFFF; --ok:#059669; --glow-a:rgba(47,99,245,.16); --glow-b:rgba(8,145,178,.12); --glow-c:rgba(109,40,217,.10); background:var(--bg); color:var(--fg) }
.light .btn-primary{color:#FFFFFF}
.light .fcard .ic,.light .scard .ic{color:var(--accent)}

/* ===== Brand lockup ===== */
.brand em{font-style:normal; font-weight:500; opacity:.75; margin-left:6px}

/* ===== Orbit diagram (hero) ===== */
.orbit{position:relative; width:min(100%,540px); aspect-ratio:1; margin-inline:auto; min-width:0}
.orbit .ring{position:absolute; border-radius:50%; border:1px solid var(--line-2)}
.orbit .r1{inset:8%} .orbit .r2{inset:22%} .orbit .r3{inset:36%}
.orbit .r1{border-style:dashed; animation:spin 90s linear infinite}
.orbit .r3{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
@keyframes spin{to{transform:rotate(360deg)}}
.orbit .center{position:absolute; left:50%; top:50%; width:108px; height:108px; transform:translate(-50%,-50%); border-radius:50%; background:#05070C; border:1px solid var(--line-2); display:grid; place-items:center; box-shadow:0 0 0 14px rgba(91,140,255,.07),0 0 90px -10px var(--glow-a)}
.orbit .center .logo{width:46px; height:46px}
.node{position:absolute; transform:translate(-50%,-50%); display:grid; justify-items:center; gap:7px; width:100px; text-align:center}
.node i{width:42px; height:42px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line-2); background:var(--glass-2); color:var(--fg); backdrop-filter:blur(6px)}
.node i svg{width:18px; height:18px}
.node span{font-family:var(--font-mono); font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); white-space:nowrap}
.node.hot i{background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:var(--on-accent); border-color:transparent; box-shadow:0 0 34px -6px var(--glow-a)}
.node.hot span{color:var(--fg)}
@media (prefers-reduced-motion: reduce){ .orbit .r1{animation:none} }
@media (max-width:480px){ .node{width:78px} .node i{width:36px; height:36px} .node span{font-size:.52rem} }

/* ===== Phone trio (who we are) ===== */
.trio{position:relative; display:flex; justify-content:center; align-items:flex-end; min-height:540px; min-width:0}
.trio .ph{position:relative}
.trio .phone{width:215px; box-shadow:0 40px 90px -40px rgba(0,0,0,.55),0 0 0 6px rgba(0,0,0,.08)}
.trio .ph:nth-child(1){transform:rotate(-9deg) translate(36px,26px); z-index:1}
.trio .ph:nth-child(2){transform:translateY(-22px); z-index:2}
.trio .ph:nth-child(3){transform:rotate(9deg) translate(-36px,26px); z-index:1}
.trio .lab{position:absolute; padding:7px 12px; border-radius:999px; background:var(--glass-2); border:1px solid var(--line-2); font-size:.8rem; font-weight:600; box-shadow:0 10px 30px -14px rgba(0,0,0,.4); z-index:3}

.trio .s-list{gap:6px} .trio .s-item{padding:8px 10px}
.trio .screen{padding:44px 12px 14px; gap:10px}
.trio .ring{width:52px; height:52px}
.trio .s-head h4{font-size:1.05rem}

/* ===== Three-up plain cards ===== */
.three{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:44px}
.pcard{padding:24px; border-radius:18px; border:1px solid var(--line); background:var(--glass-2); display:grid; gap:12px; align-content:start; min-width:0}
.pcard .ic{width:42px; height:42px; border-radius:12px; border:1px solid var(--line-2); display:grid; place-items:center; color:var(--accent); background:var(--glass)}
.pcard .ic svg{width:19px; height:19px}
.pcard p{color:var(--muted); font-size:.95rem}
@media (max-width:760px){ .three{grid-template-columns:1fr} }
.avail{display:grid; gap:10px; margin-top:26px}
.avail .mono{color:var(--accent)}
.avail .row{display:flex; flex-wrap:wrap; gap:8px}
.avail .row span{display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:10px; border:1px solid var(--line-2); background:var(--glass-2); font-size:.85rem; font-weight:600}
.avail .row span svg{width:16px; height:16px; color:var(--accent)}

/* ===== Ecosystem diagram ===== */
.eco{display:grid; justify-items:center; gap:0; max-width:920px; margin-inline:auto}
.ebox{border:1px solid var(--line-2); border-radius:18px; background:var(--glass); padding:24px 26px; text-align:center; display:grid; gap:10px; min-width:0; width:100%; position:relative}
.ebox h3{font-size:1.15rem}
.ebox .tags{display:flex; flex-wrap:wrap; justify-content:center; gap:6px 16px; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.ebox .tags b{font-weight:500; color:var(--fg)}
.ebox .brand{justify-content:center}
.eline{width:1px; height:40px; background:var(--line-2)}
.erow{display:grid; grid-template-columns:1fr 1fr; gap:48px; width:100%; position:relative}
.erow::before{content:""; position:absolute; left:50%; top:50%; width:48px; height:1px; background:var(--line-2); transform:translateX(-50%)}
.eco .top{max-width:600px} .eco .bottom{max-width:760px}
.ebox .cols{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:6px}
.ebox .cols > div{display:grid; gap:6px}
.ebox .cols strong{font-size:.8rem}
.ebox .cols .tags{justify-content:center}
.ebox .icons{display:flex; justify-content:center; gap:22px; margin-top:6px; flex-wrap:wrap}
.ebox .icons span{display:grid; justify-items:center; gap:6px; font-family:var(--font-mono); font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.ebox .icons i{width:44px; height:44px; border-radius:12px; border:1px solid var(--line-2); background:var(--glass-2); display:grid; place-items:center; color:var(--fg)}
.ebox .icons i svg{width:20px; height:20px}
.ebox .icons i.off{opacity:.35; text-decoration:line-through}
@media (max-width:760px){ .erow{grid-template-columns:1fr; gap:18px} .erow::before{display:none} .ebox .cols{grid-template-columns:1fr} }


/* ===== Fixes: featured card and phone trio ===== */
.featured .screens{min-height:0; padding:10px 0; perspective:1200px}
.featured .phone{width:240px}
.featured .screens .phone-wrap{transform:rotateY(10deg) rotateX(3deg)}
@media (max-width:920px){ .featured .screens{order:-1; min-height:0} }
.trio{min-height:0; padding:28px 0 34px}
.trio .phone{width:clamp(140px,17vw,215px)}
@media (max-width:920px){ .trio .phone{width:clamp(150px,26vw,215px)} }
.trio .lab{z-index:4}

/* ===== Telemetry chips around the orbit ===== */
.tele{position:absolute; display:inline-flex; align-items:center; gap:8px; padding:7px 11px; border-radius:8px; background:var(--glass-2); border:1px solid var(--line-2); backdrop-filter:blur(8px); font-family:var(--font-mono); font-size:.62rem; letter-spacing:.03em; color:var(--fg); box-shadow:0 14px 40px -18px rgba(0,0,0,.8); animation:bob 9s ease-in-out infinite; white-space:nowrap; z-index:2}
.tele em{font-style:normal; color:var(--accent-2)}
.tele i{width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 20%,transparent)}
.tele i.wait{background:var(--accent); animation:pulse 1.6s ease-in-out infinite}
.tele.t1{left:-3%; top:18%; animation-delay:-3s}
.tele.t2{right:-5%; top:74%; animation-delay:-6s}
.tele.t3{left:16%; bottom:0; animation-delay:-1s}
@media (max-width:560px){ .tele{display:none} }

/* ===== Animated data lines in the ecosystem diagram ===== */
.eline{background:repeating-linear-gradient(180deg,var(--accent-2) 0 6px,transparent 6px 12px); background-size:1px 24px; animation:flowy 1.1s linear infinite; opacity:.85}
@keyframes flowy{to{background-position:0 24px}}
.erow::before{background:repeating-linear-gradient(90deg,var(--accent-2) 0 6px,transparent 6px 12px); background-size:24px 1px; animation:flowx 1.1s linear infinite; opacity:.85}
@keyframes flowx{to{background-position:24px 0}}
@media (prefers-reduced-motion: reduce){ .eline,.erow::before{animation:none} }

/* ===== Architecture strip ===== */
.arch{display:grid; grid-template-columns:1fr 40px 1fr 40px 1fr 40px 1fr; align-items:stretch; gap:0; margin-top:48px}
.anode{border:1px solid var(--line-2); border-radius:14px; background:var(--glass); padding:16px 18px; display:grid; gap:4px; min-width:0}
.anode strong{font-family:var(--font-display); font-size:1rem; letter-spacing:-0.01em}
.anode small{color:var(--muted); font-size:.8rem}
.alink{position:relative}
.alink::before{content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:repeating-linear-gradient(90deg,var(--accent-2) 0 6px,transparent 6px 12px); background-size:24px 1px; animation:flowx 1.1s linear infinite}
.alink::after{content:""; position:absolute; right:-1px; top:50%; width:7px; height:7px; border-top:1px solid var(--accent-2); border-right:1px solid var(--accent-2); transform:translateY(-50%) rotate(45deg)}
@media (max-width:900px){ .arch{grid-template-columns:1fr} .alink{height:34px} .alink::before{left:50%; right:auto; top:0; bottom:0; width:1px; height:auto; background:repeating-linear-gradient(180deg,var(--accent-2) 0 6px,transparent 6px 12px); background-size:1px 24px; animation:flowy 1.1s linear infinite} .alink::after{right:auto; left:50%; top:auto; bottom:-1px; transform:translateX(-50%) rotate(135deg)} }

/* ===== Spec ruler ===== */
.ruler{display:grid; grid-template-columns:repeat(5,1fr); margin-top:28px; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--glass)}
.ruler div{padding:18px 16px; border-left:1px solid var(--line); display:grid; gap:2px; min-width:0}
.ruler div:first-child{border-left:0}
.ruler b{font-family:var(--font-display); font-size:1.9rem; letter-spacing:-0.03em; line-height:1; background:linear-gradient(92deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.ruler span{font-family:var(--font-mono); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
@media (max-width:760px){ .ruler{grid-template-columns:1fr 1fr} .ruler div:nth-child(3){border-left:0} .ruler div:nth-child(n+3){border-top:1px solid var(--line)} .ruler div:nth-child(5){grid-column:1 / -1} }


.sec,.hero,.ticker{overflow-x:clip}
.screen > *{min-width:0}
.chart,.chart .l,.bars,.streak{min-width:0}
.chart .l span{min-width:0}
.streak i{aspect-ratio:auto; height:24px}
.trio .streak{gap:3px} .trio .streak i{height:18px; font-size:.5rem}


.top.dark{background:color-mix(in srgb,var(--bg) 78%,transparent)}
.orbit .ring{border-color:color-mix(in srgb,var(--fg) 18%,transparent)}
.orbit .r1{border-color:color-mix(in srgb,var(--accent-2) 45%,transparent)}
@media (max-width:640px){
  .trio{display:flex; flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; gap:18px; padding:12px 6px 26px; justify-content:flex-start; align-items:flex-start; -webkit-overflow-scrolling:touch; scrollbar-width:none}
  .trio::-webkit-scrollbar{display:none}
  .trio .ph{flex:0 0 auto; scroll-snap-align:center; transform:none!important}
  .trio .phone{width:215px}
  .trio .lab{display:none}
}

.featured{background:radial-gradient(620px 620px at 100% 0%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 62%),linear-gradient(135deg,color-mix(in srgb,var(--accent) 12%,var(--bg-2)),color-mix(in srgb,var(--violet) 10%,var(--bg-2)))}
.featured .copy{grid-column:1; grid-row:1}
.featured .screens{grid-column:2; grid-row:1}
@media (max-width:920px){ .featured .copy{grid-column:1; grid-row:2} .featured .screens{grid-column:1; grid-row:1} }