/* Light first screen (preview 2026-09-30): same words, lighter look, like tealvpn.com.
   Only the top block changes. The architecture console stays dark ON PURPOSE:
   a dark product card on a light page reads as "real product". */
.top{background:#F6F7F3;color:#0B1220}
.top::before{background-image:linear-gradient(#E4E8E0 1px,transparent 1px),linear-gradient(90deg,#E4E8E0 1px,transparent 1px);opacity:.75}
.top::after{background:radial-gradient(closest-side,rgba(45,75,234,.11),transparent)}
.mast nav a{color:#4F5B6B}
.mast nav a:hover{color:#0B1220}
.mast nav a.nav-cta{color:#0B1220;border-color:#C9CFC6;background:#fff}
.mast nav a.nav-cta:hover{border-color:var(--accent)}
h1 em{color:#5B6678}
.lede{color:#4F5B6B}
.btn-primary{background:#0B1220;color:#fff}
.btn-primary:hover{background:#1F2A44}
.btn-ghost{border-color:#C9CFC6;color:#0B1220;background:#fff}
.btn-ghost:hover{border-color:var(--accent)}
.platform-note{color:#4F5B6B}
.console{box-shadow:0 28px 70px rgba(11,18,32,.20),0 2px 6px rgba(11,18,32,.10)}
/* tighter first screen */
.hero{padding-block:clamp(28px,5vh,56px) clamp(24px,4vh,40px)}
.hero-row{margin-top:28px}

/* contact form (replaces the mailto-only link; mailto stays as the fallback) */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.contact-form{display:grid;gap:12px;margin-top:22px;max-width:520px}
.contact-form input[type=email],.contact-form textarea{width:100%;font:400 16px/1.5 var(--body);color:var(--ink);background:#fff;border:1px solid var(--rule-2);border-radius:14px;padding:13px 16px}
.contact-form textarea{resize:vertical;min-height:96px}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.contact-form .btn{justify-self:start;cursor:pointer}
.contact-form .btn:disabled{opacity:.6;cursor:wait}
.cf-msg{margin:0;font-size:15px;color:var(--dim)}
.cf-msg[data-state=ok]{color:#0F7A4B;font-weight:600}
.cf-msg[data-state=err]{color:#B3261E}
.cf-alt{margin:0;font-size:14px;color:var(--dim)}
.cf-alt a{text-decoration:underline}
.contact-form.done input,.contact-form.done textarea,.contact-form.done button,.contact-form.done .cf-alt{display:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
/* the contact card is dark: give the form a light button and readable helper text there */
.cta-card .btn-primary{background:#fff;color:#0B1220}
.cta-card .btn-primary:hover{background:#DCE3FF}
.cta-card .cf-msg,.cta-card .cf-alt{color:#A9B4CA}
.cta-card .cf-msg[data-state=ok]{color:#7EE2B0}
.cta-card .cf-msg[data-state=err]{color:#FFB4A8}
.cta-card .cf-alt a,.cta-card .cf-msg a{color:#fff}
.cf-msg:empty{display:none}
.contact-form{align-content:start}
.contact-form{position:relative;z-index:1}

/* 3D imagery */
.hero--3d{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:center;gap:clamp(16px,4vw,56px)}
.hero--3d h1{font-size:clamp(40px,5.2vw,86px)}
.hero-3d{width:100%;max-width:470px;justify-self:center}
.rule-3d{display:block;width:100%;height:auto;margin:0 0 6px;mix-blend-mode:multiply}
@media(max-width:820px){.hero--3d{grid-template-columns:1fr}.hero-3d{max-width:300px;margin-top:8px}}
.hero--3d .hero-row{grid-template-columns:1fr;gap:22px;margin-top:22px}
.hero--3d .lede{max-width:52ch}
@font-face{font-family:"Instrument Sans";src:url("img/instrument-sans-latin-v1.woff2") format("woff2");font-weight:400 700;font-display:swap}
/* live app screen (Teal Pro) drawn in HTML, placed in the phone with matrix3d; timed by the video */
.fh-ui{position:absolute;left:0;top:0;width:1043px;height:2517px;overflow:hidden;transform-origin:0 0;background:#101718;color:#f2f5ee;font-family:"Instrument Sans","Inter",system-ui,sans-serif;--pc:0;--pn:0;-webkit-font-smoothing:antialiased}
.fh-ui *{box-sizing:border-box;margin:0}
.fh-ui .isl{position:absolute;left:50%;top:34px;width:290px;height:86px;margin-left:-145px;border-radius:44px;background:#000;z-index:5}
.fh-ui .hd{position:absolute;left:66px;right:66px;top:170px;height:70px;display:flex;align-items:center;justify-content:space-between}
.fh-ui .brand{display:flex;align-items:center;gap:22px;font-size:54px;font-weight:650;letter-spacing:-.02em}
.fh-ui .brand svg{width:74px;height:74px;color:#7fd3bb}
.fh-ui .brand small{font-size:40px;font-weight:400;opacity:.7;margin-left:-8px;letter-spacing:.02em}
.fh-ui .pro{font-size:44px;font-weight:550;color:#91d6be}
.fh-ui .ttl{position:absolute;left:0;right:0;top:318px;height:110px;text-align:center;font-size:92px;font-weight:600;letter-spacing:-.025em}
.fh-ui .ttl span,.fh-ui .lab span{position:absolute;left:0;right:0;top:0}
.fh-ui .ttl .t-off{opacity:calc(1 - var(--pc) - var(--pn))}
.fh-ui .ttl .t-con{opacity:calc(var(--pc) - var(--pn))}
.fh-ui .ttl .t-on{opacity:var(--pn)}
.fh-ui .sub{position:absolute;left:0;right:0;top:436px;text-align:center;font-size:42px;color:rgba(242,245,238,.62);opacity:calc(var(--pc) - var(--pn))}
.fh-ui .orb{position:absolute;left:191px;top:700px;width:660px;height:660px}
.fh-ui .ring{position:absolute;inset:0;border-radius:50%;border:5px solid #91d6be;opacity:calc(.32 + .5*var(--pc) + .18*var(--pn))}
.fh-ui .spin{position:absolute;inset:-2px;border-radius:50%;opacity:calc(var(--pc) - var(--pn));background:conic-gradient(from var(--rot,0deg),rgba(145,214,190,0) 0deg,rgba(145,214,190,0) 250deg,#91d6be 350deg,rgba(145,214,190,0) 360deg);-webkit-mask:radial-gradient(circle,transparent 318px,#000 319px);mask:radial-gradient(circle,transparent 318px,#000 319px)}
.fh-ui .disc{position:absolute;inset:36px;border-radius:50%;background:#182425;transition:none}
.fh-ui .fill{position:absolute;inset:36px;border-radius:50%;background:#91d6be;opacity:var(--pn);transform:scale(calc(.86 + .14*var(--pn)))}
.fh-ui .bird{position:absolute;left:50%;top:150px;width:250px;height:250px;margin-left:-125px;color:#7fd3bb}
.fh-ui .bird.b-dk{color:#0f1f1b;opacity:var(--pn)}
.fh-ui .bird.b-lt{opacity:calc(1 - var(--pn))}
.fh-ui .lab{position:absolute;left:0;right:0;top:454px;height:70px;text-align:center;font-size:58px;font-weight:600}
.fh-ui .lab .l-off{color:#91d6be;opacity:calc(1 - var(--pc) - var(--pn))}
.fh-ui .lab .l-con{color:#91d6be;opacity:calc(var(--pc) - var(--pn))}
.fh-ui .lab .l-on{color:#10201c;opacity:var(--pn)}
.fh-ui .body{position:absolute;left:0;right:0;top:0;bottom:0}
.fh-ui .orb,.fh-ui .loc,.fh-ui .chip,.fh-ui .data,.fh-ui .hr,.fh-ui .ip,.fh-ui .ipv,.fh-ui .cd{transform:translateY(calc(var(--pc)*46px - var(--pn)*46px))}
.fh-ui .card{position:absolute;left:66px;right:66px;background:#192324;border-radius:50px}
.fh-ui .loc{top:1400px;height:196px}
.fh-ui .flag{position:absolute;border-radius:50%;overflow:hidden}
.fh-ui .fl-de{background:linear-gradient(#141414 0 33.3%,#d0102a 33.3% 66.6%,#ffce00 66.6%)}
.fh-ui .fl-lt{background:linear-gradient(#f2b705 0 33.3%,#0b8a3d 33.3% 66.6%,#c1272d 66.6%)}
.fh-ui .fl-us{background:repeating-linear-gradient(#c8323e 0 7.7%,#f6f4ef 7.7% 15.4%)}
.fh-ui .fl-us:after{content:"";position:absolute;left:0;top:0;width:52%;height:54%;background:#2b3f7a}
.fh-ui .loc .flag{left:34px;top:50px;width:96px;height:96px}
.fh-ui .loc .fn{position:absolute;left:160px;top:36px;font-size:52px;font-weight:600}
.fh-ui .loc .fc{position:absolute;left:160px;top:104px;font-size:42px;color:rgba(242,245,238,.6)}
.fh-ui .loc .chg{position:absolute;right:36px;top:34px;font-size:46px;font-weight:650}
.fh-ui .loc .ms{position:absolute;right:36px;top:104px;font-size:42px;color:rgba(242,245,238,.62);display:flex;gap:16px;align-items:center}
.fh-ui .bars{display:flex;align-items:flex-end;gap:6px;height:36px}
.fh-ui .bars i{width:9px;border-radius:3px;background:#91d6be;display:block;opacity:calc(.22 + .78*var(--pn))}
.fh-ui .bars i:nth-child(1){height:14px}.fh-ui .bars i:nth-child(2){height:24px}.fh-ui .bars i:nth-child(3){height:36px}
.fh-ui .chip{position:absolute;top:1628px;height:146px;width:449px;border-radius:50px;background:#192324}
.fh-ui .chip.a{left:66px}.fh-ui .chip.b{left:527px}
.fh-ui .chip .flag{left:34px;top:34px;width:78px;height:78px}
.fh-ui .chip span{position:absolute;left:138px;top:40px;font-size:46px;font-weight:550}
.fh-ui .data{top:1816px;height:190px}
.fh-ui .data .fn{position:absolute;left:34px;top:38px;font-size:46px;font-weight:600}
.fh-ui .data .fu{position:absolute;left:34px;top:104px;font-size:42px;color:rgba(242,245,238,.62)}
.fh-ui .data .fr{position:absolute;right:36px;top:64px;font-size:50px;font-weight:650}
.fh-ui .hr{position:absolute;left:76px;right:76px;top:2036px;height:2px;background:#2b3938}
.fh-ui .ip{position:absolute;left:66px;top:2068px;font-size:42px;color:rgba(242,245,238,.6)}
.fh-ui .ipv{position:absolute;left:66px;top:2120px;font-size:50px;font-weight:600;height:64px;width:520px}
.fh-ui .ipv span{position:absolute;left:0;top:0;white-space:nowrap}
.fh-ui .ipv .i-off{opacity:calc(1 - var(--pc))}
.fh-ui .ipv .i-con{opacity:calc(var(--pc) - var(--pn))}
.fh-ui .ipv .i-on{opacity:var(--pn)}
.fh-ui .cd{position:absolute;right:66px;top:2100px;font-size:46px;color:rgba(242,245,238,.85)}
.fh-ui .nav{position:absolute;left:0;right:0;bottom:0;height:262px;border-top:2px solid #2b3938;background:#101718}
.fh-ui .nav div{position:absolute;top:36px;width:210px;text-align:center;font-size:36px;color:rgba(242,245,238,.6)}
.fh-ui .nav svg{display:block;width:62px;height:62px;margin:14px auto 12px}
.fh-ui .nav .on{color:#91d6be}
.fh-ui .nav .on b{position:absolute;left:50%;top:0;width:170px;height:96px;margin-left:-85px;border-radius:30px;background:#203230;z-index:-1}
.fh-ui .hi{position:absolute;left:50%;bottom:26px;width:340px;height:12px;margin-left:-170px;border-radius:6px;background:rgba(242,245,238,.55)}
.fh-ui{transform:matrix3d(0.353885906,-0.0555168954,0,-5.04775098e-05,-0.0338192977,0.367552618,0,-1.9600051e-05,0,0,1,0,260.818079,120.44585,0,1);z-index:1;border-radius:150px}
.fh{position:relative;width:100%;aspect-ratio:2/3;overflow:visible;--k:.4;-webkit-mask-image:linear-gradient(to bottom,#000 82%,transparent 100%);mask-image:linear-gradient(to bottom,#000 82%,transparent 100%)}
.fh-stage{position:absolute;left:0;top:0;width:1024px;height:1536px;transform-origin:0 0;transform:scale(var(--k))}
.fh-bg,.fh-hand,.fh-press{position:absolute;left:0;top:0;width:1024px;height:1536px;pointer-events:none}
.fh-bg{z-index:0}.fh-hand{z-index:2}.fh-press{z-index:3;opacity:0}