/* Cipher Sans — StateNull-SecCom heading typeface. Built on the OFL Space Grotesk, renamed per the OFL
   (a modified font must not use the reserved name) and self-hosted (subset woff2, ~47KB, cached). */
@font-face{font-family:'Cipher Sans';font-style:normal;font-weight:300 700;font-display:swap;src:url('/.well-known/cipher-sans.woff2') format('woff2')}
:root{
  /* StateNull-SecCom brand template — Deep Blue base · Ultraviolet accent · Cryptographic Gold · Cyber-White ink.
     These CSS variables are the single source of truth for the theme. The operator Appearance panel in the
     admincenter overrides them at runtime via /b2b/admincenter/api/appearance (best-effort, same-origin).
     LIGHT is the default; the dark values live in :root[data-theme="dark"] below and are chosen by the
     header theme toggle (localStorage key 'sn_theme'). */
  --bg:#f5f7fb;--bg2:#ffffff;--card:#ffffff;--card2:#f2f5fa;--cardg:#f2f5fa;--tile:#eef2f9;--line:#e4e9f2;--line2:#d3dae7;
  --ink:#0c1424;--mut:#55668a;--dim:#5f6f92;
  --accent:#3560d8;--accent2:#8b5cf6;--teal:#07713f;--amber:#8a5a10;--em2:#07713f;--solid:#3d63d6;
  --gold:#8a5a10;--gold2:#8f5f14;--uv:#8b5cf6;--deepblue:#e8edf7;
  /* gold used as a FILL behind dark text stays light in both themes */
  --goldfill:#e8b84b;--goldfill2:#f6d585;
  --headerbg:rgba(255,255,255,.78);--headerline:#e4e9f2;--pillbg:rgba(255,255,255,.7);--aurora-op:.22;
  --glow:0 1px 3px rgba(12,20,36,.07),0 12px 32px rgba(12,20,36,.10);
  --radius:16px;--maxw:1140px;
}
:root[data-theme="dark"]{
  --bg:#070f22;--bg2:#0a1630;--card:#0e1c3c;--card2:#102247;--cardg:#0a1530;--tile:#0c1733;--line:#1c2f57;--line2:#294a86;
  --ink:#eef3ff;--mut:#a3b4d6;--dim:#728ab4;
  --accent:#5b8cff;--accent2:#9366ff;--teal:#33d6b8;--amber:#ffc24b;--em2:#5fe6c6;--solid:#5b8cff;
  --gold:#e8b84b;--gold2:#f6d585;--uv:#9366ff;--deepblue:#16294a;
  --goldfill:#e8b84b;--goldfill2:#f6d585;
  --headerbg:rgba(6,10,22,.72);--headerline:rgba(27,44,82,.7);--pillbg:rgba(13,23,51,.6);--aurora-op:.6;
  --glow:0 0 0 1px rgba(91,140,255,.16),0 24px 60px -22px rgba(80,110,255,.5);
}
*{box-sizing:border-box}html,body{margin:0;scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:16px/1.65 -apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--accent);background:linear-gradient(90deg,rgba(91,140,255,.14),rgba(139,92,255,.14));border:1px solid var(--line2);border-radius:999px;padding:6px 13px}
.eyebrow .led{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px var(--teal);animation:pulse 2.4s infinite}
.btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;font:inherit;font-weight:800;font-size:15px;padding:13px 22px;border-radius:12px;color:#06101f;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 14px 30px -12px rgba(91,140,255,.7);transition:transform .15s,box-shadow .15s;white-space:nowrap}
.btn:hover{transform:translateY(-2px);box-shadow:0 20px 40px -12px rgba(91,140,255,.8)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line2);box-shadow:none}
.btn.ghost:hover{background:rgba(91,140,255,.08);border-color:var(--accent)}
.btn.sm{padding:9px 15px;font-size:14px}
h1,h2,h3{font-family:'Cipher Sans',-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;letter-spacing:-.4px;line-height:1.1;margin:0}
.muted{color:var(--mut)}.dim{color:var(--dim)}

/* header */
header{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:var(--headerbg);border-bottom:1px solid var(--headerline)}
/* ⚠️ THIS HEADER IS AT ITS WIDTH LIMIT. Measured at a 1280px viewport: the row needed 1199px inside
   a 1140px wrap even BEFORE the language picker — it survived only by spilling into the wrap's
   padding. Adding the picker took it to 1311px, past the viewport, and the whole page gained a
   horizontal scrollbar. The gaps here and on .links/.right are tightened to pay for the picker.
   Anything else added to this row needs the same measurement first (nav.scrollWidth vs innerWidth),
   not a guess. */
.nav{display:flex;align-items:center;gap:16px;height:66px}
/* ⚠️ direction:ltr IS LOAD-BEARING — the company's own name is otherwise rendered backwards.
   .brand is a flex row over [crest] "State" <span>Null</span>. Under dir="rtl" a flex row reverses
   visual order, so the Arabic and Urdu header read "NullState". Measured on the live page before the
   fix: the "Null" span sat at x=1041 and "State" at x=1089 — left to right, Null came first.
   isolate keeps the surrounding Arabic from re-ordering it again. A no-op on every LTR language. */
.brand{font-family:'Cipher Sans',-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;font-weight:900;font-size:21px;letter-spacing:.3px;display:flex;align-items:center;gap:9px;white-space:nowrap;flex-shrink:0;direction:ltr;unicode-bidi:isolate}
.brand .mk{width:15px;height:15px;border-radius:5px;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 0 14px rgba(91,140,255,.7)}
.brand span{background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
/* margin-inline-start, not margin-left: the physical property indents the wrong edge under dir="rtl". */
.nav .links{display:flex;gap:12px;margin-inline-start:6px}
.nav .links a{color:var(--mut);font-size:14.5px;font-weight:600;position:relative;padding:4px 0;white-space:nowrap}
.nav .links a:hover{color:var(--ink)}
.nav .links a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:right .25s}
.nav .links a:hover::after{right:0}
.nav .right{margin-inline-start:auto;display:flex;align-items:center;gap:8px}
.dropdown{position:relative}
.dropdown>button{background:transparent;border:1px solid var(--line2);color:var(--ink);font:inherit;font-weight:600;font-size:14px;padding:9px 14px;border-radius:10px;cursor:pointer;display:flex;align-items:center;gap:7px}
.dropdown>button:hover{border-color:var(--accent)}
.menu{position:absolute;right:0;top:48px;width:280px;background:var(--card2);border:1px solid var(--line2);border-radius:14px;padding:8px;box-shadow:var(--glow);opacity:0;visibility:hidden;transform:translateY(-8px);transition:.18s}
.dropdown.open .menu{opacity:1;visibility:visible;transform:none}
.menu a{display:flex;gap:12px;align-items:flex-start;padding:11px 12px;border-radius:10px}
.menu a:hover{background:rgba(91,140,255,.1)}
.menu .ic{font-size:18px;line-height:1.3}.menu b{font-size:14px}.menu small{color:var(--dim);font-size:12px;display:block}
.burger{display:none;margin-left:auto;background:transparent;border:1px solid var(--line2);border-radius:10px;color:var(--ink);width:42px;height:38px;font-size:18px;cursor:pointer}
.sn-theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:0 0 auto;padding:0;border-radius:10px;border:1px solid var(--line2);background:transparent;color:var(--ink);cursor:pointer;transition:color .15s ease,border-color .15s ease,background .15s ease}
.sn-theme-toggle:hover{color:var(--accent);border-color:var(--accent)}
.sn-theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sn-theme-toggle .sn-sun{display:none}
:root[data-theme="dark"] .sn-theme-toggle .sn-sun{display:block}
:root[data-theme="dark"] .sn-theme-toggle .sn-moon{display:none}
/* Language picker — same control as the portal and /signup, so the site has ONE affordance for this.
   Its own <label> text is visually hidden: the globe carries the meaning for someone who cannot read
   the current language, which is exactly the person who needs this control. Laid out with inline-flex
   + gap, which mirrors correctly under dir="rtl" without a second rule. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.langpick{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;color:var(--mut);border:1px solid var(--line2);border-radius:10px;padding:5px 9px;height:38px;cursor:pointer;background:transparent}
.langpick:hover{border-color:var(--accent);color:var(--ink)}
.langpick:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.langpick svg{flex:0 0 auto;display:block}
.langpick select{appearance:none;background:transparent;border:0;color:inherit;font:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:0 2px;max-width:7.2em}
.langpick select:focus{outline:none}
/* The globe is redundant while the language NAME is visible, and this header cannot afford its 21px
   (see the .nav note above), so it is dropped below 1400px and the name carries the meaning.
   ⚠️ The select itself is NEVER hidden or shrunk to zero: below 900px the nav links collapse into the
   burger and this control is the ONLY way left to change language, so making it unclickable there
   would strand every mobile visitor in whatever language they happened to load. */
@media(max-width:1400px){.langpick svg{display:none}.langpick{padding:5px 8px}}
/* Phone widths: the row is brand + controls + burger and it does not all fit (measured at 375px —
   440px of content in a 375px viewport, i.e. a sideways-scrolling page). "Sign in" is what gives
   way, because it is ALREADY the second entry in the mobile menu directly below, whereas the
   language picker is by then the only way left to change language. Tighter nav gap buys the rest. */
@media(max-width:560px){#navLogin{display:none}.nav{gap:10px}}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mobile{display:none;border-top:1px solid var(--line);background:var(--bg2)}
.mobile a{display:block;padding:13px 22px;color:var(--mut);border-bottom:1px solid var(--line);font-weight:600}
.mobile .btn{margin:14px 22px;display:flex;justify-content:center}
/* Section labels for the grouped mobile menu — quiet dividers, not tappable, so the eye can scan
   groups instead of a 13-item flat list. */
.mobsec{padding:16px 22px 7px;font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);background:var(--bg);border-bottom:1px solid var(--line)}
/* ⚠️ 1240px, not 900px. The full link row needs ~1205px of header, so between 900 and ~1210 it
   overflowed the viewport and the page scrolled sideways — a PRE-EXISTING bug (the row already
   needed 1199px before the language picker existed), just never measured. Collapsing to the burger
   at 1240 means the links only ever show when they actually fit. */
@media(max-width:1240px){.nav .links{display:none}.nav .right{display:flex;gap:8px;margin-inline-end:6px}.nav .right .btn.sm:not(.ghost){display:none}.burger{display:block}.mobile.show{display:block}}
/* portal final C4-08 — …and 1240px is only where ENGLISH fits. Measured at 1440 in German: the row needed 1485px ("So
   funktioniert es", "Anwendungsfälle", "App herunterladen") and the language picker was cut off at the viewport edge. A
   breakpoint cannot know the language, so the row MEASURES itself (fitNav, below) and collapses to the same burger state
   when its own content does not fit — in any language, at any width, after every translation pass. */
/* the bar may use more of a wide screen than the reading column does (the links are one line, not a paragraph) */
header>.wrap{max-width:max(var(--maxw),min(1360px,calc(100vw - 48px)))}
:root.nav-snug .nav{gap:12px}:root.nav-snug .nav .links{gap:10px;margin-inline-start:2px}:root.nav-snug .nav .links a{font-size:13.5px}:root.nav-snug .langpick svg{display:none}:root.nav-snug .brand{font-size:19px}
/* The burger sits on the right edge beside the controls, never floated to the middle of the bar by a second auto margin. */
@media(max-width:1240px){.burger{margin-left:0;margin-inline-start:0}}:root.nav-tight .burger{margin-left:0;margin-inline-start:0}
:root.nav-tight .nav .links{display:none}:root.nav-tight .nav .right{display:flex;gap:8px;margin-inline-end:6px}:root.nav-tight .nav .right .btn.sm:not(.ghost){display:none}:root.nav-tight .burger{display:block}:root.nav-tight .mobile.show{display:block}

/* hero */
.hero{position:relative;padding:74px 0 40px;overflow:hidden}
.aurora{position:absolute;inset:-20% -10% auto -10%;height:760px;z-index:0;filter:blur(36px);opacity:var(--aurora-op);
  background:
   radial-gradient(620px 360px at 72% 8%,rgba(91,140,255,.42),transparent 60%),
   radial-gradient(520px 320px at 18% 0%,rgba(139,92,255,.34),transparent 60%),
   radial-gradient(440px 300px at 50% 36%,rgba(51,214,184,.16),transparent 60%);
  animation:drift 16s ease-in-out infinite alternate}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(34px,5vw,56px);margin:18px 0 16px}
.hero h1 em{font-style:normal;background:linear-gradient(135deg,var(--teal),var(--em2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{font-size:19px;color:var(--mut);max-width:560px;margin:0 0 26px}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap}
.pills{display:flex;gap:9px;flex-wrap:wrap;margin-top:28px}
.pill{font-size:12.5px;color:var(--mut);border:1px solid var(--line2);background:var(--pillbg);border-radius:999px;padding:7px 13px;display:flex;gap:7px;align-items:center}
.pill b{color:var(--teal)}
@media(max-width:920px){.hero .wrap{grid-template-columns:1fr}.heroart{order:-1}}
.hero .wrap>*{min-width:0}.heroart{max-width:100%}

/* hero artwork: device cluster */
/* .heroart and .demo draw a DARK product mockup (the app's own default theme) in BOTH site themes.
   Pin the surface variables locally so the illustration keeps its app look on a light page. */
/* --accent is pinned to the dark-theme blue here too: this illustration stays dark in BOTH themes,
   so the light-theme accent (darkened for AA on white) would be unreadable inside it. */
.heroart,.demo{--accent:#5b8cff;--bg:#070f22;--bg2:#0a1630;--card:#0e1c3c;--card2:#102247;--tile:#0c1733;
  --line:#1c2f57;--line2:#294a86;--ink:#eef3ff;--mut:#a3b4d6;--dim:#8ea6d4;--teal:#33d6b8;--amber:#ffc24b;
  --glow:0 0 0 1px rgba(91,140,255,.16),0 24px 60px -22px rgba(80,110,255,.5)}
.heroart{position:relative;height:430px}
.win{position:absolute;border-radius:16px;border:1px solid var(--line2);background:linear-gradient(180deg,#0e1a3a,#0b1430);box-shadow:var(--glow)}
.win.app{width:90%;left:0;top:24px;height:300px;animation:float 7s ease-in-out infinite}
.win .bar{height:34px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:7px;padding:0 13px}
.dot3{width:10px;height:10px;border-radius:50%;background:#33405f}.dot3.r{background:#ff6b6b}.dot3.y{background:#ffc24b}.dot3.g{background:#46d39a}
.win .barlabel{margin-left:8px;font-size:12px;color:var(--dim)}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px}
.tile{height:108px;border-radius:11px;position:relative;overflow:hidden;background:radial-gradient(120px 90px at 50% 40%,rgba(91,140,255,.35),#0c1733);border:1px solid var(--line)}
.tile .av{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 0 24px rgba(91,140,255,.6)}
.tile.two .av{background:linear-gradient(135deg,var(--teal),#46d39a)}
.tile .nm{position:absolute;left:10px;bottom:8px;font-size:11px;color:#cfe0ff;background:rgba(0,0,0,.35);padding:2px 7px;border-radius:6px}
.tile .live{position:absolute;right:8px;top:8px;font-size:9px;font-weight:800;color:#fff;background:#ff5a6a;border-radius:5px;padding:2px 6px;letter-spacing:.5px}
.callbar{display:flex;justify-content:center;gap:12px;padding:6px 0 12px}
.cbtn{width:38px;height:38px;border-radius:50%;background:#13224a;border:1px solid var(--line2);display:grid;place-items:center;font-size:15px}
.cbtn.end{background:#ff4d5e;border-color:#ff4d5e}
.wave{position:absolute;left:0;right:0;bottom:0;height:22px;display:flex;align-items:flex-end;gap:3px;padding:0 12px;opacity:.8}
.wave i{flex:1;background:linear-gradient(180deg,var(--accent),var(--accent2));border-radius:2px;animation:eq 1.1s ease-in-out infinite}
.phone{position:absolute;right:-6px;bottom:0;width:174px;height:330px;border-radius:26px;border:1px solid var(--line2);background:linear-gradient(180deg,#0f1c40,#0a1330);box-shadow:var(--glow);padding:12px 10px;animation:float 7s ease-in-out infinite .8s}
.phone .notch{width:54px;height:6px;border-radius:6px;background:#33405f;margin:2px auto 12px}
.bub{max-width:78%;padding:8px 11px;border-radius:13px;font-size:12px;margin:7px 0;opacity:0;transform:translateY(6px);animation:bubin .5s forwards}
.bub.me{margin-left:auto;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#06101f;border-bottom-right-radius:4px}
.bub.you{background:#152549;color:#dce7ff;border:1px solid var(--line);border-bottom-left-radius:4px}
.searchbar{margin-top:12px;background:#0a1430;border:1px solid var(--line2);border-radius:10px;padding:8px 11px;font-size:12px;color:#cfe0ff;display:flex;align-items:center;gap:7px}
.searchbar .cur{color:var(--accent);font-weight:800}
.hit{margin-top:8px;display:flex;align-items:center;gap:8px;font-size:12px;color:#cfe0ff;background:#10204a;border:1px solid var(--line);border-radius:9px;padding:7px 9px}
.hit .av2{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--teal),#46d39a)}
.tag{color:var(--accent);font-weight:800}

/* marquee */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg2);overflow:hidden;padding:13px 0}
.mtrack{display:flex;gap:34px;white-space:nowrap;width:max-content;animation:scroll 26s linear infinite;color:var(--dim);font-weight:700;font-size:14px;letter-spacing:.3px}
.mtrack span{display:flex;align-items:center;gap:34px}.mtrack b{color:var(--accent)}

/* sections */
section{padding:74px 0;position:relative}
.sec-head{text-align:center;max-width:680px;margin:0 auto 46px}
.sec-head h2{font-size:clamp(26px,3.4vw,38px);margin:10px 0}
.sec-head p{color:var(--mut);font-size:17px;margin:0}
[data-reveal]{will-change:opacity,transform}
.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.js [data-reveal].in{opacity:1;transform:none}

/* pipeline */
.pipe{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;position:relative;margin-top:20px}
.pnode{text-align:center;padding:18px 10px;border-radius:14px;background:var(--card);border:1px solid var(--line);position:relative;z-index:1;transition:.3s}
.pnode .pic{font-size:26px}.pnode h4{margin:8px 0 4px;font-size:15px}.pnode p{margin:0;font-size:12.5px;color:var(--dim)}
.pnode.hot{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 16px 40px -18px rgba(91,140,255,.7);transform:translateY(-4px)}
.pline{position:absolute;top:46px;left:8%;right:8%;height:2px;background:linear-gradient(90deg,var(--line2),var(--line2));z-index:0;overflow:visible}
.ppacket{position:absolute;top:-4px;left:0;width:10px;height:10px;border-radius:50%;background:var(--teal);box-shadow:0 0 14px var(--teal);animation:travel 5s linear infinite}
@media(max-width:820px){.pipe{grid-template-columns:1fr 1fr}.pline{display:none}}

/* showcase */
.tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:26px}
.tab{cursor:pointer;border:1px solid var(--line2);background:var(--card);color:var(--mut);font:inherit;font-weight:700;font-size:13.5px;padding:10px 15px;border-radius:11px;display:flex;gap:8px;align-items:center;transition:.2s}
.tab:hover{color:var(--ink)}
.tab.active{color:#06101f;background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent}
.panes{position:relative;background:linear-gradient(180deg,var(--card),var(--cardg));border:1px solid var(--line);border-radius:20px;padding:8px;box-shadow:var(--glow)}
.pane{display:none;grid-template-columns:1fr 1fr;gap:28px;align-items:center;padding:26px}
.pane.show{display:grid;animation:fade .5s}
.pane .copy h3{font-size:23px;margin-bottom:10px}
.pane .copy p{color:var(--mut);margin:0 0 16px}
.feat-li{list-style:none;padding:0;margin:0}
.feat-li li{display:flex;gap:10px;align-items:flex-start;margin:9px 0;font-size:14.5px;color:var(--mut)}
.feat-li li .ck{color:var(--teal);font-weight:900}
.demo{height:260px;border-radius:14px;border:1px solid var(--line);background:radial-gradient(360px 220px at 60% 20%,rgba(91,140,255,.16),#0a1430);position:relative;overflow:hidden;display:grid;place-items:center}
@media(max-width:780px){.pane.show{grid-template-columns:1fr}.demo{order:-1}}

/* advantages */
.adv{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.acard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;transition:.25s}
.acard:hover{transform:translateY(-4px);border-color:var(--line2);box-shadow:0 22px 50px -26px rgba(91,140,255,.6)}
.acard .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:22px;background:linear-gradient(135deg,rgba(91,140,255,.2),rgba(139,92,255,.2));border:1px solid var(--line2)}
.acard h3{font-size:17px;margin:14px 0 7px}.acard p{margin:0;color:var(--mut);font-size:14px}
@media(max-width:860px){.adv{grid-template-columns:1fr}}

/* security */
.sec{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.badge{font-size:12.5px;font-weight:700;color:var(--ink);background:var(--tile);border:1px solid var(--line2);border-radius:10px;padding:8px 12px;display:flex;gap:8px;align-items:center}
.badge .s{color:var(--teal)}
.shield{position:relative;height:300px;display:grid;place-items:center}
.ring{position:absolute;border:1px solid var(--line2);border-radius:50%;animation:spin 18s linear infinite}
.ring.r1{width:280px;height:280px}.ring.r2{width:200px;height:200px;animation-duration:13s;animation-direction:reverse;border-style:dashed}
.ring.r3{width:120px;height:120px;animation-duration:9s}
.lock{width:84px;height:84px;border-radius:22px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:grid;place-items:center;font-size:38px;box-shadow:0 0 50px rgba(91,140,255,.55)}
.orb{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--teal);box-shadow:0 0 12px var(--teal)}
@media(max-width:820px){.sec{grid-template-columns:1fr}.shield{order:-1}}

/* deploy */
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.dcard{background:linear-gradient(180deg,var(--card),var(--cardg));border:1px solid var(--line2);border-radius:18px;padding:26px}
.dcard h3{font-size:20px;margin-bottom:6px}.dcard p{color:var(--mut);margin:0 0 14px}
.dcard .tagrow{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 18px}
.dtag{font-size:12px;color:var(--mut);background:var(--tile);border:1px solid var(--line2);border-radius:8px;padding:4px 9px}
@media(max-width:760px){.two{grid-template-columns:1fr}}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:center}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px 12px}
.stat b{display:block;font-size:34px;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{color:var(--mut);font-size:13.5px}
@media(max-width:760px){.stats{grid-template-columns:1fr 1fr}}

/* cta band */
.band{background:linear-gradient(135deg,rgba(91,140,255,.16),rgba(139,92,255,.16));border:1px solid var(--line2);border-radius:22px;padding:46px;text-align:center;box-shadow:var(--glow)}
.band h2{font-size:clamp(24px,3vw,34px);margin-bottom:10px}.band p{color:var(--mut);margin:0 0 22px}

/* the film */
.filmwrap{border:1px solid var(--line2);border-radius:22px;overflow:hidden;box-shadow:var(--glow);background:#06101f}
.filmwrap video{display:block;width:100%;height:auto}
.filmmeta{color:var(--mut);font-size:14px;margin-top:12px;text-align:center}
.filmmeta a{color:var(--accent);text-decoration:none}.filmmeta a:hover{text-decoration:underline}

/* footer */
footer{border-top:1px solid var(--line);padding:48px 0 30px;color:var(--dim);font-size:14px}
.fcols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:26px;margin-bottom:28px}
.fcols h5{color:var(--ink);font-size:13px;text-transform:uppercase;letter-spacing:.6px;margin:0 0 12px}
.fcols a{display:block;color:var(--mut);padding:5px 0}.fcols a:hover{color:var(--ink)}
.fbar{border-top:1px solid var(--line);padding-top:18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
@media(max-width:760px){.fcols{grid-template-columns:1fr 1fr}}

/* layman + expert layers */
.claims{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:860px){.claims{grid-template-columns:1fr}}
.xp{margin-top:12px;border-top:1px dashed var(--line);padding-top:6px}
.xp summary{cursor:pointer;color:var(--accent);font-size:12.5px;font-weight:700;list-style:none}
.xp summary::before{content:"▸ "}.xp[open] summary::before{content:"▾ "}
.xp div{font-size:12.5px;color:var(--dim);margin:8px 0 0;line-height:1.55}
.xp code{color:var(--mut);background:var(--tile);border:1px solid var(--line);border-radius:5px;padding:1px 5px;font-size:11.5px}
/* Chip carries DARK ink, so its fill must stay BRIGHT in both themes (the themed --amber is a
   text colour and goes dark in light mode — using it here would be dark-on-dark). */
.beta{font-size:10px;font-weight:800;letter-spacing:.5px;color:#06101f;background:#ffc24b;border-radius:5px;padding:2px 6px;vertical-align:2px;margin-left:6px}
.seal-chip{position:absolute;right:8px;top:8px;font-size:9px;font-weight:800;color:#06101f;background:var(--teal);border-radius:5px;padding:2px 6px;letter-spacing:.4px}
.vrow{display:flex;justify-content:center;gap:8px;padding:6px 0 12px;flex-wrap:wrap}
.vrow span{font-size:11px;color:var(--teal);border:1px solid rgba(51,214,184,.4);background:rgba(51,214,184,.08);border-radius:7px;padding:3px 8px}

/* brand crest mark */
.crest{width:26px;height:26px;flex:0 0 auto;filter:drop-shadow(0 3px 8px rgba(91,140,255,.4))}
.brand .crest{width:26px;height:26px}
footer .brand .crest{width:22px;height:22px}
.gd{color:var(--gold)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em}

/* the trust shift — philosophy hook */
#trust h2 em{font-style:normal;background:linear-gradient(135deg,var(--gold),var(--gold2));-webkit-background-clip:text;background-clip:text;color:transparent}
.trustgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
@media(max-width:900px){.trustgrid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.trustgrid{grid-template-columns:1fr}}
.tcard{position:relative;background:linear-gradient(180deg,var(--card),var(--cardg));border:1px solid var(--line);border-radius:16px;padding:20px 19px;transition:.25s}
.tcard:hover{transform:translateY(-4px);border-color:var(--line2);box-shadow:0 22px 50px -26px rgba(147,102,255,.55)}
.tcard .tn{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;font-weight:900;font-size:15px;color:#0a1428;background:linear-gradient(135deg,var(--goldfill),var(--goldfill2));box-shadow:0 6px 18px -8px rgba(232,184,75,.7)}
.tcard h4{font-size:16px;margin:13px 0 6px;letter-spacing:-.2px}
.tcard>p{margin:0;color:var(--mut);font-size:13.7px;line-height:1.58}
.tcard .sn{display:block;margin-top:11px;font-size:12.7px;color:var(--mut);border-top:1px solid var(--line);padding-top:10px;line-height:1.55}
.tcard .sn b{color:var(--gold2);font-weight:800}
.thesis{margin-top:22px;background:linear-gradient(135deg,rgba(232,184,75,.10),rgba(147,102,255,.12));border:1px solid var(--line2);border-radius:18px;padding:24px 28px;font-size:16px;line-height:1.62;box-shadow:var(--glow)}
.thesis .gd{background:linear-gradient(135deg,var(--gold),var(--gold2));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}

/* keyframes */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes drift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-30px,18px) scale(1.06)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes eq{0%,100%{height:5px}50%{height:20px}}
@keyframes bubin{to{opacity:1;transform:none}}
@keyframes scroll{to{transform:translateX(-50%)}}
@keyframes travel{0%{left:0}100%{left:100%}}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.js [data-reveal]{opacity:1;transform:none}}

/* Layout additions only. Original StateNull brand tokens, font, logo and icons are in brand.css. */
html{scroll-padding-top:110px}body{overflow-x:hidden}.pm-skip{position:absolute;left:20px;top:-100px;z-index:100;background:var(--card);padding:12px}.pm-skip:focus{top:5px}
.pm-review{background:var(--card2);border-bottom:1px solid var(--line);font-size:11px;color:var(--mut);line-height:1.3}.pm-review>.wrap{max-width:1360px;display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:38px}.pm-review>div>span{font-weight:700;letter-spacing:.45px}.pm-review i{font-style:normal;opacity:.5;padding:0 5px}.pm-review>div>div{display:flex;gap:18px}.pm-review a{padding:11px 0}.pm-review a[aria-current]{color:var(--accent);font-weight:800}.presentation .pm-review{display:none}.pm-compare{border-left:1px solid var(--line2);padding-left:18px!important}
.nav .links a.pm-active,.mobile a.pm-active{color:var(--accent);font-weight:800}.nav .links a.pm-active::after{right:0}.nav{height:72px}.nav .links{gap:17px}.nav .links a{font-size:13.5px}.nav .brand{font-size:21px}.langpick{font-size:12px}.nav .right .btn{font-size:12px;padding:9px 12px}.pm-hero{position:relative;overflow:hidden;padding:62px 0 50px}.pm-herogrid{display:grid;grid-template-columns:1.04fr .96fr;gap:38px;align-items:center;position:relative;z-index:1}.pm-herocopy{padding:10px 0}.pm-hero h1{font-size:clamp(36px,4.2vw,56px);line-height:1.09;letter-spacing:-1.9px;margin:22px 0}.pm-hero h1 em{font-style:normal;color:var(--teal)}.pm-lead{font-size:18px;line-height:1.75;color:var(--mut);max-width:510px;margin:0 0 26px}.pm-ctas{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.pm-ctas .btn{min-height:48px;justify-content:center}.btn:not(.ghost){color:#fff}:root[data-theme="dark"] .btn:not(.ghost){color:#06101f}.pm-small{font-size:12px;color:var(--dim);line-height:1.6;margin:17px 0 0}.pm-hero .pills{margin-top:24px}.pm-hero .pill{font-size:11px;padding:6px 10px}.pm-stage{position:relative;height:570px;min-width:0;background:radial-gradient(ellipse at 50% 50%,rgba(91,140,255,.12),transparent 65%)}.pm-phone{position:absolute;margin:0;width:222px;background:#0b1120;padding:6px;border-radius:27px;border:1px solid #33405f;box-shadow:0 22px 45px -18px rgba(12,20,36,.4);overflow:hidden}.pm-phone img{display:block;width:100%;height:auto;border-radius:21px}.pm-phone figcaption,.pm-browser figcaption{font-size:9px;font-weight:600;background:#0c1424;color:#cbd5ed;padding:6px 7px;text-align:center;line-height:1.2}.pm-stage-a .pm-phone{left:0;top:10px;z-index:2}.pm-browser{position:absolute;margin:0;width:240px;background:#f5f7fb;border:1px solid var(--line2);border-radius:13px;box-shadow:0 25px 55px -20px rgba(12,20,36,.35);overflow:hidden}.pm-browser img{display:block;width:100%;height:auto}.pm-browserbar{background:#0e1c3c;color:#b6c5e4;font-size:9px;padding:9px 10px;display:flex;gap:9px;align-items:center;white-space:nowrap}.pm-browserdots{color:#5b8cff;font-size:7px;letter-spacing:2px}.pm-stage-a .pm-browser{right:0;top:47px;z-index:1}.pm-stage-note{position:absolute;bottom:0;left:5px;font-size:12px;line-height:1.7;color:var(--mut)}.pm-stage-note strong{color:var(--ink);font-weight:700}.pm-stage-b .pm-phone{left:0;top:12px;width:217px;z-index:2}.pm-stage-b .pm-browser{right:0;top:49px;width:232px}.pm-stage-b{height:570px}
.pm-ways{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding-top:0;padding-bottom:20px}.pm-way{display:flex;align-items:center;justify-content:center;gap:12px;padding:22px 15px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:13px;font-weight:700}.pm-way+.pm-way{border-left:1px solid var(--line)}.pm-icon{width:42px;height:42px;flex:0 0 auto;display:inline-grid;place-items:center;border:1px solid var(--line2);background:linear-gradient(135deg,rgba(91,140,255,.1),rgba(139,92,255,.1));border-radius:12px;color:var(--accent)}.pm-way .pm-icon{width:34px;height:34px;border:0;background:transparent}
.pm-section{padding:68px 0}.pm-section h2{font-size:clamp(28px,3vw,38px);line-height:1.18;letter-spacing:-1px;margin:16px 0}.pm-sectionhead{max-width:690px;margin-bottom:34px}.pm-sub{font-size:16px;line-height:1.75;color:var(--mut);margin:12px 0 24px;max-width:650px}.pm-sectionhead .pm-sub{margin-bottom:0}.pm-featuregrid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 38px}.pm-feature{display:flex;align-items:flex-start;gap:16px;padding:24px 0;border-top:1px solid var(--line)}.pm-feature h3{font-size:17px;line-height:1.35;margin:0 0 8px}.pm-feature p{font-size:14px;color:var(--mut);margin:0;line-height:1.7}.pm-soft{background:var(--bg2);border-block:1px solid var(--line)}.pm-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.pm-steps article{border-top:1px solid var(--line2);padding-top:24px}.pm-stepno{display:inline-grid;place-items:center;width:37px;height:37px;border-radius:10px;color:var(--gold);font-family:'Cipher Sans',sans-serif;font-weight:700;font-size:14px;background:var(--tile);border:1px solid var(--line2);margin-bottom:18px}.pm-steps h3,.pm-drivers h3{font-size:18px;line-height:1.3;margin:0 0 10px}.pm-steps p,.pm-drivers p{font-size:14px;line-height:1.7;margin:0;color:var(--mut)}.pm-usecases{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.pm-usecases article{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:25px}.pm-index{color:var(--gold);font-size:10px;font-weight:800;letter-spacing:1px;display:block;margin-bottom:19px}.pm-usecases h3{font-size:20px;line-height:1.3;letter-spacing:-.3px}.pm-usecases p{color:var(--mut);font-size:14px;line-height:1.75;margin:16px 0 0}
.pm-privacy{border-top:1px solid var(--line);background:var(--card2)}.pm-privacygrid{display:grid;grid-template-columns:1fr 1fr;gap:70px}.pm-privacycall{display:flex;gap:14px;margin:26px 0 22px}.pm-privacycall b{font-size:14px;line-height:1.4}.pm-privacycall p{font-size:13px;color:var(--mut);line-height:1.8;margin:7px 0}.pm-textlink{color:var(--accent);font-size:13px;font-weight:700;display:inline-block}.pm-textlink:hover{text-decoration:underline}.pm-faq details{border-bottom:1px solid var(--line2);padding:18px 0}.pm-faq summary{font-size:14px;line-height:1.5;font-weight:700;cursor:pointer;list-style:none;position:relative;padding-right:25px}.pm-faq summary::after{content:'+';position:absolute;right:0;top:-3px;font-size:22px;color:var(--accent);font-weight:400}.pm-faq details[open] summary::after{content:'−'}.pm-faq details p{font-size:13px;line-height:1.8;color:var(--mut);margin:12px 25px 0 0}.pm-faq{align-self:center}.pm-last{padding:64px 0}.band .eyebrow{margin-bottom:5px}.band h2{max-width:780px;margin:18px auto}.pm-center{justify-content:center}.pm-drivers{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.pm-drivers article{padding:24px 0 0;border-top:1px solid var(--line2)}.pm-market{font-size:11px;line-height:1.8;color:var(--dim);margin:30px 0 0;padding-top:20px;border-top:1px solid var(--line)}.pm-market a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}.two .dcard h3{font-size:24px;line-height:1.25;margin:8px 0 14px}.two .dcard{padding:30px}.dcard .pm-index{margin-bottom:12px}.dcard p{font-size:14px;line-height:1.75}.pm-split{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;align-items:center}.pm-capabilities>div{display:flex;gap:18px;padding:20px 0;border-top:1px solid var(--line)}.pm-capabilities>div:last-child{border-bottom:1px solid var(--line)}.pm-capabilities b{font-size:15px}.pm-capabilities p{font-size:13px;color:var(--mut);margin:5px 0 0}.pm-scope{display:flex;flex-wrap:wrap;gap:13px 22px;border:1px solid var(--line2);border-radius:12px;background:var(--card);padding:20px 24px;margin-top:35px;font-size:12px}.pm-scope span{color:var(--mut)}.pm-scope b{font-weight:600;color:var(--ink)}.fcols{grid-template-columns:1.5fr 1fr 1fr 1fr}.fcols .brand{display:inline-flex;padding:0;color:var(--ink)}.fbar{font-size:11px}.fbar a{color:inherit}.band{box-shadow:none}
@media(max-width:1320px){.nav .links{display:none}.burger{display:block;margin-left:0}.nav .right .btn:not(.ghost){display:none}.mobile.show{display:block}}@media(max-width:960px){.pm-herogrid{grid-template-columns:1fr 1fr;gap:25px}.pm-hero h1{font-size:42px}.pm-lead{font-size:16px}.pm-stage{height:470px}.pm-phone{width:180px}.pm-browser{width:190px}.pm-stage-b .pm-phone{width:176px}.pm-stage-b .pm-browser{width:184px}.pm-privacygrid{gap:35px}.pm-drivers{grid-template-columns:1fr 1fr}.pm-split{gap:35px}.pm-review .pm-compare{display:none}.pm-review>div>span{font-size:9px}.pm-review>div>div{gap:14px}.pm-ways{padding-bottom:0}.pm-way{padding-inline:8px;font-size:12px;gap:6px}}
@media(max-width:760px){.pm-hero{padding:38px 0 28px}.pm-herogrid{grid-template-columns:1fr;gap:20px}.pm-herocopy{padding:0}.pm-hero h1{font-size:clamp(35px,7.5vw,48px);letter-spacing:-1.2px;margin:18px 0}.pm-lead{max-width:570px;font-size:17px;line-height:1.7;margin-bottom:22px}.pm-stage{height:470px;width:390px;max-width:100%;justify-self:center;margin-top:5px}.pm-stage-a .pm-phone{width:180px;left:7px}.pm-stage-a .pm-browser{width:190px;right:6px;top:40px}.pm-stage-b .pm-phone{width:178px;left:7px}.pm-stage-b .pm-browser{width:188px;right:6px;top:40px}.pm-stage-note{left:9px;bottom:0;font-size:11px}.pm-hero .pills{margin-top:18px}.pm-way{padding:16px 8px;font-size:12px}.pm-ways{grid-template-columns:1fr 1fr}.pm-way:nth-child(3){border-left:0;border-top:0}.pm-way:nth-child(4){border-top:0}.pm-section{padding:44px 0}.pm-section h2{font-size:29px;letter-spacing:-.7px}.pm-sectionhead{margin-bottom:25px}.pm-featuregrid{gap:0;grid-template-columns:1fr}.pm-feature{padding:20px 0}.pm-feature h3{font-size:16px}.pm-sub{font-size:15px}.pm-steps{grid-template-columns:1fr;gap:22px}.pm-steps article{display:grid;grid-template-columns:40px 1fr;column-gap:16px;padding-top:20px}.pm-steps .pm-stepno{grid-row:1/3;margin:0}.pm-steps h3{font-size:17px}.pm-steps p{grid-column:2}.pm-usecases{grid-template-columns:1fr;gap:14px}.pm-usecases article{padding:24px}.pm-usecases h3 br{display:none}.pm-usecases h3{font-size:20px}.pm-index{margin-bottom:13px}.pm-privacygrid{grid-template-columns:1fr;gap:10px}.pm-last{padding:40px 0}.band{padding:30px 20px}.band h2{font-size:28px}.pm-split{grid-template-columns:1fr;gap:12px}.pm-drivers{gap:22px}.pm-drivers h3{font-size:17px}.pm-scope{padding:20px;gap:12px 18px}.pm-scope span{width:100%}.two .dcard{padding:24px}.two .dcard h3{font-size:23px}.fcols{grid-template-columns:1fr 1fr;gap:28px}.fcols>div:first-child{grid-column:1/-1}.fcols>div:first-child p{max-width:100%!important}footer{padding:32px 0 24px}.pm-review>.wrap{display:block;padding-block:8px}.pm-review>div>span{display:block;margin-bottom:5px}.pm-review>div>div{gap:22px}.pm-review a{padding:2px 0}.pm-review{font-size:10px}.pm-review i{padding:0 2px}.nav{height:66px}.nav .right{gap:6px}.nav .brand{font-size:20px}.nav .right .btn{padding:8px 10px}.pm-hero .pm-small{max-width:330px}.pm-privacycall{margin-top:20px}}
@media(max-width:400px){.wrap{padding-inline:18px}.nav{gap:8px}.nav .brand{gap:6px;font-size:19px}.nav .right{margin-right:0}.langpick{padding:4px 6px;font-size:11px}.sn-theme-toggle{width:34px;height:34px}.burger{width:35px;height:34px}.pm-stage{height:420px;width:340px}.pm-stage-a .pm-phone,.pm-stage-b .pm-phone{width:159px;left:0}.pm-stage-a .pm-browser,.pm-stage-b .pm-browser{width:167px;right:0}.pm-stage-note{left:0;font-size:10px}.pm-hero .eyebrow{font-size:10px;letter-spacing:.3px}.pm-hero .pm-ctas{gap:8px}.pm-hero .btn{padding:12px 16px;font-size:14px}.pm-drivers{grid-template-columns:1fr}.pm-ways .pm-way{font-size:11px;gap:4px}.pm-way .pm-icon{width:28px}.pm-review>div>div{gap:17px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}