/* Frontifier site: shared tokens, navigation, footer and page components. Black "pro" product pages. */
:root{
  color-scheme: dark;
  --bg:#000; --surface:#0e0e10; --tile:#151517; --raise:#1c1c1f; --line:#2a2a2e;
  --fg:#f5f5f7; --muted:#86868b; --soft:#a1a1a6; --link:#2997ff;
  --smartacy:#19d3e6; --austy:#8b6bff; --marvis:#ff6a8b; --orbit:#b6f36a;
  --display:"Inter Tight","Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --arabic:"IBM Plex Sans Arabic","Geeza Pro",Tahoma,sans-serif;
  --gl:max(22px,env(safe-area-inset-left,0px)); --gr:max(22px,env(safe-area-inset-right,0px));
  --ease:cubic-bezier(.25,.1,.25,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:17px;line-height:1.47;letter-spacing:-.022em;-webkit-font-smoothing:antialiased;overflow-x:clip}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:rgba(22,22,23,.8)}
img{max-width:100%}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--link);outline-offset:3px;border-radius:6px}
.wrap{padding-left:var(--gl);padding-right:var(--gr);max-width:1068px;margin-inline:auto;box-sizing:content-box}
.wide{max-width:1260px}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.025em;margin:0;text-wrap:balance}

/* NAV */
.gnav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;height:48px;background:rgba(22,22,23,.8);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(255,255,255,.06)}
.gnav-in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1080px}
.gnav .logo img{height:22px;width:auto;display:block;opacity:.92}
.gnav ul{list-style:none;margin:0;padding:0;display:flex;gap:26px}
.gnav ul a{font-size:12px;color:#e8e8ed;opacity:.8;transition:opacity .2s;white-space:nowrap}
.gnav ul a:hover,.gnav ul a[aria-current="page"]{opacity:1}
.gnav .right{display:flex;align-items:center;gap:14px}
.gnav .lang{font-size:12px;color:#e8e8ed;opacity:.8}
.gnav .lang:hover{opacity:1}
.gnav .cta{font-size:12px;padding:5px 12px;border-radius:999px;background:var(--fg);color:#000;font-weight:500;white-space:nowrap}
.menu-btn{display:none;background:none;border:0;color:var(--fg);width:36px;height:36px;padding:0;cursor:pointer;align-items:center;justify-content:center}
.menu-btn span{display:block;width:16px;height:1.5px;background:currentColor;position:relative;transition:transform .3s}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:currentColor;transition:transform .3s}
.menu-btn span::before{top:-5px}.menu-btn span::after{top:5px}
.menu-open .menu-btn span{background:transparent}
.menu-open .menu-btn span::before{transform:translateY(5px) rotate(45deg)}
.menu-open .menu-btn span::after{transform:translateY(-5px) rotate(-45deg)}
.mnav{position:fixed;inset:calc(48px + env(safe-area-inset-top,0px)) 0 0;z-index:49;background:rgba(0,0,0,.96);backdrop-filter:blur(20px);padding:24px var(--gr) 40px var(--gl);overflow:auto;display:none}
.menu-open .mnav{display:block}
.mnav a{display:block;font-family:var(--display);font-weight:600;font-size:28px;letter-spacing:-.02em;padding:8px 0;color:#e8e8ed}
@media (max-width:980px){.gnav ul{display:none}.menu-btn{display:inline-flex}}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:11px 22px;border-radius:999px;font-size:17px;background:var(--link);color:#fff;border:0;font-family:inherit;cursor:pointer;transition:background .2s}
.btn:hover{background:#0077ed}
.btn.ghost{background:transparent;color:var(--link);border:1px solid var(--link)}
.btn.ghost:hover{background:var(--link);color:#fff}
.more{color:var(--link);font-size:17px;display:inline-flex;align-items:center}
.more:hover{text-decoration:underline}
.more::after{content:"›";font-size:1.15em;line-height:1;margin-inline-start:4px}
.actions{display:flex;gap:28px;align-items:center;justify-content:center;flex-wrap:wrap}
.avail{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:var(--soft);padding:5px 12px;border-radius:999px;background:var(--raise)}
.avail::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c,var(--link))}

/* PAGE HERO */
.phero{padding-block:clamp(72px,10vw,130px) clamp(40px,6vw,72px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;position:relative}
.phero::before{content:"";position:absolute;left:50%;top:0;width:min(900px,90%);height:100%;transform:translateX(-50%);background:radial-gradient(50% 50% at 50% 30%,color-mix(in oklab,var(--c,#2997ff) 18%,transparent),transparent 70%);pointer-events:none;z-index:-1}
.eyebrow{font-family:var(--display);font-size:clamp(19px,2vw,22px);font-weight:600;color:var(--c,var(--soft));letter-spacing:-.01em}
.phero h1{font-size:clamp(44px,7vw,88px);line-height:1.04;letter-spacing:-.035em;max-width:14ch}
.phero .plogo{height:clamp(44px,6.5vw,76px);width:auto;margin-block:4px 6px}
.phero .plogo.sm{height:clamp(70px,10vw,112px)}
.lede{font-family:var(--display);font-weight:600;font-size:clamp(21px,2.4vw,28px);line-height:1.25;letter-spacing:-.02em;color:var(--muted);max-width:30ch;margin:0}
.lede b{color:var(--fg);font-weight:600}
.post-hero h1{font-size:clamp(34px,4.4vw,56px);line-height:1.1;max-width:22ch}
.post-hero .lede{font-size:clamp(18px,1.8vw,22px);max-width:40ch}

/* SECTIONS */
.sec{padding-block:clamp(72px,9vw,120px);border-top:1px solid #111}
.sec-h{text-align:center;display:grid;justify-items:center;gap:14px;margin-bottom:clamp(40px,5vw,64px)}
.sec-h h2{font-size:clamp(36px,5vw,60px);line-height:1.06;letter-spacing:-.035em;max-width:18ch}
.sec-h p{color:var(--muted);font-size:clamp(18px,1.8vw,21px);max-width:44ch;margin:0}
.grid{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:12px}
.card{background:var(--surface);border-radius:22px;padding:32px 28px;display:grid;gap:10px;align-content:start;min-width:0;position:relative;overflow:hidden}
.card h3{font-size:22px;letter-spacing:-.02em;line-height:1.2}
.card p{margin:0;color:var(--muted);font-size:16px;line-height:1.5}
.card .big{font-family:var(--display);font-weight:600;font-size:clamp(40px,5vw,56px);line-height:1;letter-spacing:-.04em;color:var(--c,var(--fg))}
.card.link{transition:background .3s}
.card.link:hover{background:var(--tile)}
.card .more{font-size:15px;margin-top:6px}
.card .clogo{height:26px;width:auto;margin-bottom:6px}
.card .clogo.sm{height:40px}
.card.glow::after{content:"";position:absolute;inset:auto -20% -60% -20%;height:90%;background:radial-gradient(closest-side,color-mix(in oklab,var(--c) 40%,transparent),transparent);opacity:.5;pointer-events:none;z-index:0}
.card>*{position:relative;z-index:1}
@media (max-width:900px){.grid{--n:2!important}}
@media (max-width:600px){.grid{--n:1!important}}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(32px,5vw,72px);align-items:center;padding-block:clamp(48px,6vw,80px)}
.split.rev>:first-child{order:2}
.split h3{font-size:clamp(28px,3.4vw,40px);line-height:1.1;letter-spacing:-.03em;margin-bottom:14px}
.split p{color:var(--muted);margin:0 0 14px;font-size:18px}
.split p b{color:var(--fg);font-weight:500}
@media (max-width:860px){.split{grid-template-columns:1fr}.split.rev>:first-child{order:0}}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ticks li{display:grid;grid-template-columns:20px 1fr;gap:10px;color:var(--soft);font-size:16px}
.ticks li::before{content:"✓";color:var(--c,var(--link));font-weight:600}
.tbl-wrap{overflow-x:auto;border-radius:18px;background:var(--surface)}
table.tbl{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
.tbl th,.tbl td{padding:14px 18px;text-align:start;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{font-size:13px;font-weight:600;color:var(--muted)}
.tbl tr:last-child td{border-bottom:0}
.tbl td.c{text-align:center}
.tbl .yes{color:#30d158}.tbl .no{color:#48484a}
.num{font-variant-numeric:tabular-nums}
.layers{display:grid;gap:10px}
.layer{border-radius:18px;padding:22px 24px;background:var(--surface);display:grid;grid-template-columns:200px 1fr;gap:16px;align-items:center;border:1px solid var(--line)}
.layer b{font-family:var(--display);font-size:20px;letter-spacing:-.02em}
.layer span{color:var(--muted)}
.layer:nth-child(1){border-color:color-mix(in oklab,var(--marvis) 40%,var(--line))}
.layer:nth-child(2){border-color:color-mix(in oklab,var(--austy) 40%,var(--line))}
.layer:nth-child(3){border-color:color-mix(in oklab,var(--smartacy) 40%,var(--line))}
@media (max-width:640px){.layer{grid-template-columns:1fr;gap:6px}}
.flow{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:10px;counter-reset:f}
.flow div{background:var(--surface);border-radius:18px;padding:22px 20px;display:grid;gap:8px;align-content:start;min-width:0}
.flow small{color:var(--muted);font-size:13px;font-weight:500}
.flow b{font-family:var(--display);font-size:18px;letter-spacing:-.02em}
.flow span{color:var(--muted);font-size:15px}
@media (max-width:900px){.flow{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.flow{grid-template-columns:1fr}}

/* CTA BAND */
.band{text-align:center;padding-block:clamp(80px,10vw,140px);display:grid;justify-items:center;gap:18px;border-top:1px solid #111}
.band h2{font-size:clamp(36px,5vw,64px);letter-spacing:-.035em;line-height:1.05;max-width:16ch}
.band p{color:var(--muted);font-size:19px;margin:0;max-width:40ch}

/* PROSE (legal, blog, docs) */
.prose{max-width:720px;margin-inline:auto;padding-block:0 clamp(80px,10vw,120px)}
.prose h2{font-size:28px;margin:48px 0 14px;letter-spacing:-.02em}
.prose h3{font-size:20px;margin:28px 0 10px}
.prose p,.prose li{color:#d2d2d7;font-size:17px;line-height:1.7}
.prose ul,.prose ol{padding-inline-start:22px}
.prose a{color:var(--link)}
.prose .meta{color:var(--muted);font-size:14px;text-align:center;margin-bottom:28px}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;background:var(--raise);padding:2px 6px;border-radius:6px}
.prose pre{background:var(--surface);border-radius:14px;padding:16px 18px;overflow-x:auto;font-size:14px;line-height:1.6}
.prose blockquote{margin:24px 0;padding:4px 0 4px 20px;border-inline-start:3px solid var(--link);color:var(--fg);font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:-.02em}

/* CHANGELOG / LISTS */
.timeline{max-width:820px;margin-inline:auto;display:grid;gap:0;padding-bottom:clamp(80px,10vw,120px)}
.entry{display:grid;grid-template-columns:150px 1fr;gap:24px;padding-block:32px;border-top:1px solid var(--line)}
.entry time{color:var(--muted);font-size:15px;font-variant-numeric:tabular-nums}
.entry .prod{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--c)}
.entry .prod::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c)}
.entry h3{font-size:22px;margin:8px 0 10px}
.entry ul{margin:0;padding-inline-start:20px;color:var(--soft)}
.entry li{margin-bottom:6px}
@media (max-width:640px){.entry{grid-template-columns:1fr;gap:8px}}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-bottom:clamp(80px,10vw,120px)}
.post{background:var(--surface);border-radius:22px;overflow:hidden;display:grid;grid-template-rows:180px auto;transition:transform .4s var(--ease)}
.post:hover{transform:translateY(-4px)}
.post .art{background:radial-gradient(60% 80% at 30% 30%,color-mix(in oklab,var(--c) 60%,transparent),transparent 70%),radial-gradient(60% 80% at 80% 80%,color-mix(in oklab,var(--c2) 50%,transparent),transparent 70%),#0a0a0b}
.post .txt{padding:24px;display:grid;gap:8px;align-content:start}
.post small{color:var(--muted);font-size:13px}
.post h3{font-size:22px;line-height:1.2}
.post p{margin:0;color:var(--muted);font-size:15px}
@media (max-width:900px){.posts{grid-template-columns:1fr}}
.status-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 24px;border-top:1px solid var(--line);flex-wrap:wrap}
.status-row:first-child{border-top:0}
.status-row img{height:22px;width:auto}
.status-row img.sm{height:32px}
.status-pill{font-size:13px;font-weight:500;padding:5px 12px;border-radius:999px;background:var(--raise);color:var(--soft)}
.press-logo{background:#000;border:1px solid var(--line);border-radius:18px;height:160px;display:grid;place-items:center;padding:24px}
.press-logo img{max-height:64px;width:auto}
.press-logo.light{background:#f5f5f7}
.swatch{height:96px;border-radius:16px;background:var(--c)}
.coming{max-width:620px;margin-inline:auto;text-align:center;padding-bottom:clamp(80px,10vw,120px);color:var(--muted)}

/* FOOTER */
.foot{background:var(--surface);color:var(--muted);font-size:12px;letter-spacing:-.01em;padding-block:28px calc(28px + env(safe-area-inset-bottom,0px))}
.foot .lead{padding-bottom:16px;border-bottom:1px solid var(--line);line-height:1.6}
.foot .lead a{color:var(--link)}
.fcols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;padding-block:22px;border-bottom:1px solid var(--line)}
.fcols h4{margin:0 0 10px;font-size:12px;font-weight:600;color:#e8e8ed;letter-spacing:-.01em}
.fcols ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.fcols a:hover{text-decoration:underline;color:var(--fg)}
.legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:16px}
.legal nav{display:flex;gap:16px;flex-wrap:wrap}
.legal a:hover{color:var(--fg)}
@media (max-width:760px){.fcols{grid-template-columns:1fr 1fr}}

/* APP MOCKS (shared with the home page) */
.app{background:var(--surface);border:1px solid #2c2c30;border-radius:18px;overflow:hidden;box-shadow:0 50px 100px -30px rgba(0,0,0,.9),0 0 0 6px #0a0a0b,0 0 0 7px #222;display:grid;grid-template-columns:200px minmax(0,1fr);min-height:400px;font-size:14px;letter-spacing:-.01em}
.side{background:#0a0a0b;border-inline-end:1px solid var(--line);padding:16px 12px;display:grid;align-content:start;gap:2px}
.side .dots{display:flex;gap:7px;padding:2px 6px 16px}
.side .dots i{width:11px;height:11px;border-radius:50%;background:#2c2c30}
.side .dots i:nth-child(1){background:#ff5f57}.side .dots i:nth-child(2){background:#febc2e}.side .dots i:nth-child(3){background:#28c840}
.side .brand{font-weight:600;font-size:14px;padding:4px 8px 12px;display:flex;align-items:center;gap:8px}
.side .brand::before{content:"";width:16px;height:16px;border-radius:5px;background:var(--c)}
.side a{padding:7px 8px;border-radius:7px;color:var(--soft);font-size:13px}
.side a.on{background:var(--raise);color:var(--fg)}
.main{padding:22px;display:grid;gap:12px;align-content:start;min-width:0}
.main-h{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:4px}
.main-h strong{font-size:18px;font-weight:600;letter-spacing:-.02em}
.mcard{background:var(--tile);border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:grid;gap:6px;min-width:0}
.k{color:var(--muted);font-size:12.5px}
.rowx{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;padding:3px 9px;border-radius:999px;background:var(--raise);color:var(--soft);white-space:nowrap}
.chip.ok{color:#30d158;background:rgba(48,209,88,.12)}
.chip.wait{color:var(--c);background:color-mix(in oklab,var(--c) 14%,transparent)}
.b2{font:inherit;font-size:12.5px;padding:6px 13px;border-radius:999px;border:0;background:var(--raise);color:var(--fg)}
.b2.p{background:var(--c);color:#000;font-weight:600}
.bars{display:grid;gap:10px}
.bars .b{display:grid;grid-template-columns:92px 1fr 44px;align-items:center;gap:12px;font-size:12.5px;color:var(--soft)}
.bars .t{height:6px;border-radius:3px;background:var(--raise);overflow:hidden}
.bars .t span{display:block;height:100%;width:var(--p);background:var(--c);border-radius:3px}
.net svg{width:100%;height:auto;display:block}
@media (max-width:740px){.app{grid-template-columns:1fr;min-height:0}.side{display:none}}

/* REVEAL ON SCROLL (visible at rest; only nudges) */
.rv{transition:transform .9s var(--ease),opacity .9s var(--ease)}
.rv.pre{transform:translateY(24px);opacity:.001}

/* ARABIC / RTL */
[dir="rtl"]{--display:"IBM Plex Sans Arabic","Inter Tight",Tahoma,sans-serif;--body:"IBM Plex Sans Arabic","Inter",Tahoma,sans-serif}
[dir="rtl"] body,[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4,[dir="rtl"] .lede,[dir="rtl"] .eyebrow,[dir="rtl"] .card .big,[dir="rtl"] .mnav a{letter-spacing:0}
[dir="rtl"] h1,[dir="rtl"] h2{line-height:1.25}
[dir="rtl"] .more::after{content:"‹"}
[dir="rtl"] .prose blockquote{padding:4px 20px 4px 0}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}.rv.pre{transform:none;opacity:1}}