/* Roughnote: "viewfinder" theme. Teal-black field, iris and crosshair motifs, HUD readouts.
   Brand: Roughnote teal #17B6C6 (#1FD0DB on dark), deep #0D7C96, Signal Orange #F47B20 used as the one hot accent. */
:root {
  color-scheme: dark;
  --bg: #03161A; --bg2: #051F25; --bg3: #08303A; --panel: #0A2A31; --line: rgba(31,208,219,.16); --line2: rgba(31,208,219,.32);
  --tx: #E9FBFC; --body: #C4DCDF; --mu: #86AEB3;
  --t: #1FD0DB; --t2: #17B6C6; --deep: #0D7C96; --or: #F47B20; --red: #FF5D6C; --amb: #FFB547; --grn: #2BC46B;
  --h: "Sora", "Segoe UI", system-ui, sans-serif; --b: "Manrope", "Segoe UI", system-ui, sans-serif; --m: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --gl: max(18px, env(safe-area-inset-left, 0px)); --gr: max(18px, env(safe-area-inset-right, 0px));
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; background: var(--bg); color: var(--body); font: 400 17px/1.6 var(--b); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(70% 50% at 80% 0%, rgba(31,208,219,.12), transparent 60%), radial-gradient(50% 40% at 0% 100%, rgba(13,124,150,.18), transparent 60%); }
a { color: var(--t); }
h1, h2, h3, h4 { font-family: var(--h); color: var(--tx); margin: 0; line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
h2 { font-size: clamp(2rem, 4.6vw, 3.3rem); font-weight: 800; max-width: 22ch; }
h3 { font-size: 1.2rem; font-weight: 700; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 12px; top: 12px; z-index: 99; background: var(--or); color: #120700; padding: 8px 12px; border-radius: 8px; }
.wrap { max-width: 1200px; margin: 0 auto; padding-left: var(--gl); padding-right: var(--gr); }
.narrow { max-width: 820px; }
.small { font-size: .88rem; color: var(--mu); }
.c { text-align: center; }
.sub { color: var(--mu); font-size: 1.1rem; max-width: 62ch; margin-top: 14px; }
.frame { font: 700 .72rem/1 var(--m); letter-spacing: .18em; text-transform: uppercase; color: var(--t); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.frame::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--or); box-shadow: 0 0 12px var(--or); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 22px; border-radius: 999px; font: 700 1rem/1 var(--b); text-decoration: none; border: 0; cursor: pointer; white-space: nowrap; transition: transform .15s, box-shadow .2s, background .2s; }
.btn:hover { transform: translateY(-2px); }
.btn.sm { min-height: 40px; padding: 0 16px; font-size: .9rem; }
.btn-or { background: var(--or); color: #170800; box-shadow: 0 12px 34px -12px rgba(244,123,32,.9); }
.btn-ghost { color: var(--tx); border: 1px solid var(--line2); background: rgba(31,208,219,.05); }
.btn-ghost:hover { border-color: var(--t); }
.tag { display: inline-block; font: 700 .66rem/1 var(--m); letter-spacing: .14em; text-transform: uppercase; padding: 6px 9px; border-radius: 6px; }
.tag.red { color: var(--red); background: rgba(255,93,108,.12); } .tag.g { color: var(--grn); background: rgba(43,196,107,.12); }

/* Nav */
.nav { position: sticky; top: 0; z-index: 40; background: rgba(3,22,26,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top, 0px); }
.nav .in { max-width: 1200px; margin: 0 auto; padding: 0 var(--gr) 0 var(--gl); height: 66px; display: flex; align-items: center; gap: 18px; }
.nav .logo img { display: block; height: 46px; width: auto; }
.nav nav { display: flex; gap: 20px; margin-left: auto; }
.nav nav a { color: var(--body); text-decoration: none; font-weight: 600; font-size: .95rem; }
.nav nav a:hover { color: var(--t); }
@media (max-width: 900px) { .nav nav { display: none; } .nav .btn { margin-left: auto; } }
@media (max-width: 420px) { .nav .logo img { height: 38px; } }

/* Hero viewfinder */
.hero { position: relative; padding: 70px 0 90px; overflow: hidden; }
.vf { position: absolute; inset: 18px; pointer-events: none; }
.vf .c { position: absolute; width: 38px; height: 38px; border: 2px solid var(--line2); }
.vf .tl { left: 0; top: 0; border-right: 0; border-bottom: 0; } .vf .tr { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.vf .bl { left: 0; bottom: 0; border-right: 0; border-top: 0; } .vf .br { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.hud { position: absolute; left: 70px; right: 70px; display: flex; justify-content: space-between; gap: 12px; font: 700 .68rem/1 var(--m); letter-spacing: .14em; color: var(--mu); pointer-events: none; }
.hud.top { top: 30px; } .hud.bot { bottom: 30px; }
.hud .rec { color: var(--red); animation: blink 1.4s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }
@media (max-width: 760px) { .hud { left: 30px; right: 30px; } .hud span:nth-child(n+3) { display: none; } }
.hgrid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; align-items: center; }
@media (max-width: 900px) { .hgrid { grid-template-columns: 1fr; } }
.kick { font: 700 .76rem/1 var(--m); letter-spacing: .16em; text-transform: uppercase; color: var(--t); margin-bottom: 18px; }
.hero h1 { font-size: clamp(2.9rem, 8vw, 5.6rem); font-weight: 800; letter-spacing: -.04em; line-height: .98; }
.hero .g { background: linear-gradient(90deg, var(--t), #8CF3F8 45%, var(--t2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { font-size: clamp(1.05rem, 2vw, 1.22rem); color: var(--body); max-width: 54ch; margin: 22px 0 28px; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.chips-row { list-style: none; padding: 0; margin: 26px 0 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.chips-row li { font-size: .86rem; font-weight: 600; color: var(--tx); border: 1px solid var(--line2); border-radius: 999px; padding: 7px 12px; background: rgba(31,208,219,.06); }
.beta { font: 700 .7rem/1 var(--m); letter-spacing: .14em; text-transform: uppercase; color: var(--or); }
.hshot { position: relative; display: grid; place-items: center; min-height: 520px; }
.iris { position: absolute; width: min(520px, 100%); aspect-ratio: 1; display: grid; place-items: center; }
.iris svg { width: 100%; height: 100%; }
.iris .blades path { fill: rgba(13,124,150,.25); stroke: rgba(31,208,219,.35); stroke-width: .6; transform-origin: 0 0; animation: iris 1.6s cubic-bezier(.2,.8,.2,1) .2s both; }
.iris .blades { animation: spin 60s linear infinite; transform-origin: 0 0; }
@keyframes iris { from { transform: scale(.35) rotate(-40deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* Phone mock */
.phone { position: relative; width: min(330px, 100%); border-radius: 38px; padding: 14px; background: linear-gradient(160deg, #0E3640, #061C21); border: 1px solid var(--line2); box-shadow: 0 50px 100px -40px rgba(31,208,219,.55), inset 0 0 0 6px #04161A; }
.phone > * { position: relative; }
.ph-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; font: 700 .7rem/1.2 var(--m); color: var(--mu); letter-spacing: .06em; }
.ph-top .ok, .ph-top .cnt { color: var(--grn); }
.ph-card { background: #082A31; border: 1px solid var(--line); border-radius: 22px; padding: 16px; display: grid; gap: 12px; }
.ph-lbl { display: flex; align-items: center; gap: 10px; }
.ph-lbl b { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--t); color: #022; font: 800 1.3rem/1 var(--h); }
.ph-lbl span { color: var(--tx); font-weight: 700; } .ph-lbl em { margin-left: auto; font-style: normal; font-size: .8rem; color: var(--mu); }
.ph-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ph-photos span { height: 64px; border-radius: 12px; display: grid; place-items: end start; padding: 8px; font: 700 .64rem/1 var(--m); color: var(--grn); background: linear-gradient(135deg, #0F3F48, #0A2F36), repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 6px, transparent 6px 12px); border: 1px solid var(--line); }
.ph-dims { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ph-dims div { background: #04191E; border-radius: 12px; padding: 10px 12px; font: 700 2.1rem/1 var(--m); color: var(--tx); font-variant-numeric: tabular-nums; }
.ph-dims small { display: block; font-size: .62rem; color: var(--mu); margin-bottom: 6px; letter-spacing: .12em; }
.ph-dims sup { font-size: .9rem; color: var(--t); margin-left: 3px; }
.ph-mt { font: 700 .7rem/1 var(--m); color: var(--t); letter-spacing: .1em; text-transform: uppercase; }
.ph-flags { display: flex; gap: 6px; flex-wrap: wrap; }
.fl { font-size: .74rem; font-weight: 700; color: var(--amb); border: 1px solid rgba(255,181,71,.5); background: rgba(255,181,71,.08); border-radius: 999px; padding: 5px 9px; }
.ph-note { font-size: .84rem; color: var(--body); background: #04191E; border-left: 3px solid var(--amb); padding: 8px 10px; border-radius: 0 10px 10px 0; }
.ph-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 8px 4px; font: 700 .7rem/1 var(--m); color: var(--amb); }
.ph-next { color: var(--t); }
.hero-phone { animation: rise 1s cubic-bezier(.2,.8,.2,1) .6s both; }
@keyframes rise { from { transform: translateY(40px); opacity: 0; } }

/* Sections */
.sec { padding: 100px 0; position: relative; }
.sec.dark { background: linear-gradient(180deg, var(--bg2), #04191E); border-block: 1px solid var(--line); }
.pains { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.pains article { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 24px; display: grid; gap: 12px; align-content: start; }
.pains p { color: var(--mu); }
@media (max-width: 860px) { .pains { grid-template-columns: 1fr; } }
.punch { margin-top: 34px; font-size: 1.2rem; color: var(--body); max-width: 60ch; } .punch b { color: var(--tx); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.split > div > p { margin-top: 16px; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 36px; } }
.ticks { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 30px; }
.ticks li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-size: .75rem; font-weight: 800; color: #022; background: var(--t); }
.ticks b { color: var(--tx); }

/* Demo */
.demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 56px; align-items: center; }
@media (max-width: 860px) { .demo { grid-template-columns: 1fr; justify-items: center; } .dcopy { justify-self: stretch; } }
.dcopy > p { margin-top: 16px; }
.steps { list-style: none; padding: 0; margin: 24px 0 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.steps li { font: 700 .74rem/1 var(--m); letter-spacing: .06em; padding: 9px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--mu); cursor: pointer; transition: all .2s; }
.steps li.on { color: #022; background: var(--t); border-color: var(--t); }
.steps li.done { color: var(--grn); border-color: rgba(43,196,107,.5); }
.demo-phone { width: min(360px, 100%); }
.timer { color: var(--or); font-size: .9rem; }
.dscreens { background: #082A31; border: 1px solid var(--line); border-radius: 22px; padding: 16px; min-height: 380px; position: relative; overflow: hidden; }
.ds { display: none; gap: 12px; animation: slide .35s ease both; }
.ds.on { display: grid; }
@keyframes slide { from { opacity: 0; transform: translateX(24px); } }
.ds h4 { font: 700 .7rem/1 var(--m); letter-spacing: .14em; text-transform: uppercase; color: var(--mu); }
.pick { display: flex; flex-wrap: wrap; gap: 7px; }
.pick button, .chipgrid button { font: 600 .9rem/1 var(--b); color: var(--tx); background: #04191E; border: 1px solid var(--line2); border-radius: 12px; padding: 12px 13px; cursor: pointer; transition: all .15s; }
.pick button:hover, .chipgrid button:hover { border-color: var(--t); }
.pick button.on { background: var(--t); color: #022; border-color: var(--t); }
.pick.small button { padding: 8px 10px; font-size: .8rem; }
.pick.multi button.on, .chipgrid button.on { background: rgba(255,181,71,.15); color: var(--amb); border-color: var(--amb); }
.hint { font-size: .8rem; color: var(--mu); }
.dimbox { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dim { text-align: left; background: #04191E; border: 2px solid var(--line); border-radius: 14px; padding: 10px 12px; color: var(--tx); font: 700 1.8rem/1 var(--m); cursor: pointer; font-variant-numeric: tabular-nums; min-height: 72px; }
.dim small { display: block; font-size: .6rem; color: var(--mu); letter-spacing: .14em; margin-bottom: 6px; }
.dim.on { border-color: var(--t); box-shadow: 0 0 0 4px rgba(31,208,219,.15); }
.pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pad button, .fr button { font: 700 1.15rem/1 var(--m); color: var(--tx); background: #0C343D; border: 0; border-radius: 10px; padding: 11px 0; cursor: pointer; }
.pad button:active, .fr button:active { background: var(--deep); }
.pad .ok { background: var(--t); color: #022; } .pad .del { color: var(--mu); }
.fr { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.fr button { font-size: .72rem; padding: 10px 0; color: var(--t); }
.hand { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hand button { background: #04191E; border: 2px solid var(--line); border-radius: 14px; color: var(--tx); font-weight: 700; padding: 10px; cursor: pointer; display: grid; gap: 6px; justify-items: center; }
.hand svg { width: 80px; height: 60px; fill: none; stroke: var(--mu); stroke-width: 3; }
.hand .sw { stroke: var(--t); stroke-dasharray: 4 4; }
.hand button.on { border-color: var(--t); }
.shots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.shot { aspect-ratio: 3/4; border-radius: 16px; border: 2px dashed var(--line2); background: #04191E; color: var(--tx); display: grid; place-items: center; align-content: center; gap: 4px; cursor: pointer; font: inherit; }
.shot .cam { font-size: 2rem; color: var(--t); }
.shot small { color: var(--red); font: 700 .62rem/1 var(--m); letter-spacing: .1em; text-transform: uppercase; }
.shot.taken { border-style: solid; border-color: var(--grn); background: linear-gradient(160deg, #134B55, #0A2F36); }
.shot.taken small { color: var(--grn); } .shot.taken .cam { color: var(--grn); }
.req { display: grid; gap: 6px; padding: 12px; border-radius: 12px; border: 1px solid var(--amb); background: rgba(255,181,71,.07); font-size: .84rem; }
.req b { color: var(--amb); font: 700 .66rem/1 var(--m); letter-spacing: .14em; text-transform: uppercase; }
.req span::before { content: "→ "; color: var(--amb); }
.done { text-align: center; display: grid; gap: 8px; justify-items: center; padding: 20px 0; }
.done .big { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: var(--grn); color: #02170A; font-size: 2.6rem; font-weight: 800; box-shadow: 0 0 40px rgba(43,196,107,.5); animation: pop .4s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes pop { from { transform: scale(.3); } }
.done b { color: var(--tx); font: 800 1.3rem/1.1 var(--h); }
.done p { color: var(--mu); font-size: .9rem; }
.done .tm b { color: var(--or); font: 700 1rem var(--m); }
.ph-bar button { font: 700 .82rem/1 var(--b); border-radius: 999px; padding: 11px 16px; cursor: pointer; border: 0; }
.ph-bar .ghost { background: transparent; color: var(--mu); border: 1px solid var(--line2); }
.ph-bar .go { background: var(--or); color: #170800; }
.ph-bar .go:disabled { background: #22414A; color: var(--mu); cursor: not-allowed; }
.miss { color: var(--amb); }

/* Feature cards */
.fgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 36px; }
@media (max-width: 1000px) { .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .fgrid { grid-template-columns: 1fr; } }
.fcard { text-align: left; font: inherit; color: inherit; cursor: pointer; background: linear-gradient(170deg, #0B2F37, #071F25); border: 1px solid var(--line); border-radius: 20px; padding: 22px; display: grid; gap: 10px; align-content: start; position: relative; overflow: hidden; transition: transform .2s, border-color .2s; }
.fcard::after { content: "+"; position: absolute; right: 16px; top: 14px; font: 700 1.3rem/1 var(--m); color: var(--t); }
.fcard:hover { transform: translateY(-4px); border-color: var(--t); }
.fcard .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem; color: var(--t); background: rgba(31,208,219,.1); border: 1px solid var(--line2); }
.fcard p { color: var(--mu); font-size: .93rem; }

/* Flags */
.flagbox { background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 22px; display: grid; gap: 18px; }
.chipgrid { display: flex; flex-wrap: wrap; gap: 8px; }
.flagout { min-height: 150px; border-radius: 14px; background: #04191E; padding: 16px; display: grid; gap: 10px; align-content: start; }
.flagout .idle { color: var(--mu); }
.fo-row { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; animation: slide .3s ease both; }
.fo-row b { color: var(--amb); }
.fo-row span { font-size: .84rem; color: var(--body); grid-column: 2; }
.fo-row i { grid-row: span 3; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-style: normal; background: rgba(255,181,71,.15); color: var(--amb); }

/* Offline */
.netdemo { background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 22px; display: grid; gap: 16px; }
.netbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
#netState { font: 700 .82rem/1 var(--m); padding: 9px 12px; border-radius: 999px; }
#netState.off { color: var(--amb); background: rgba(255,181,71,.1); } #netState.on { color: var(--grn); background: rgba(43,196,107,.1); }
.switch { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--tx); cursor: pointer; }
.switch input { position: absolute; opacity: 0; }
.switch span { width: 50px; height: 28px; border-radius: 99px; background: #22414A; position: relative; transition: background .2s; }
.switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .2s; }
.switch input:checked + span { background: var(--grn); } .switch input:checked + span::after { transform: translateX(22px); }
.switch input:focus-visible + span { outline: 2px solid var(--or); outline-offset: 3px; }
.queue { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.queue li { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; background: #04191E; border-radius: 12px; padding: 12px 14px; font-size: .9rem; color: var(--tx); }
.queue i { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: #12343C; overflow: hidden; }
.queue i b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--t), var(--grn)); transition: width 1.4s ease; }
.queue em { font: 700 .66rem/1 var(--m); font-style: normal; color: var(--amb); letter-spacing: .1em; text-transform: uppercase; align-self: center; }
.queue li.sent em { color: var(--grn); }

/* Tabs */
.tabs { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 6px; margin: 30px 0 22px; border-radius: 999px; border: 1px solid var(--line2); background: #04191E; }
.tabs button { font: 700 .9rem/1 var(--b); color: var(--mu); background: none; border: 0; border-radius: 999px; padding: 11px 18px; cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--t); color: #022; }
.tp { display: none; gap: 18px; animation: slide .3s ease both; }
.tp.on { display: grid; }
.tp > p, .cap { color: var(--body); max-width: 70ch; }
.tp b, .cap b { color: var(--tx); }
.soon { font: 700 .64rem/1 var(--m); letter-spacing: .12em; text-transform: uppercase; color: var(--or); border: 1px solid rgba(244,123,32,.5); padding: 4px 7px; border-radius: 6px; margin-left: 6px; }
.mode-ill { background: #04191E; border: 1px solid var(--line); border-radius: 20px; padding: 20px; min-height: 230px; }
.cards-ill { display: grid; gap: 8px; max-width: 520px; }
.cards-ill div { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; color: var(--tx); font-weight: 600; font-size: .92rem; }
.cards-ill b { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: #0F3E47; color: var(--t); font-family: var(--h); }
.cards-ill span { font: 700 .7rem/1 var(--m); color: var(--grn); }
.cards-ill .open { border-color: var(--t); } .cards-ill .open span { color: var(--amb); }
.cards-ill .open p { grid-column: 2 / -1; font: 500 .8rem/1.3 var(--m); color: var(--mu); }
.wall-ill { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.wall-ill div { aspect-ratio: 4/3; border-radius: 12px; display: grid; place-items: center; align-content: center; color: var(--tx); font-weight: 700; background: linear-gradient(150deg, #155561, #0A2F36), repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 4px, transparent 4px 10px); border: 1px solid var(--line); }
.wall-ill b { font-family: var(--h); font-size: 1.4rem; }
.wall-ill .fl { border-color: var(--amb); color: var(--amb); } .wall-ill .miss { background: #04191E; border: 2px dashed var(--red); color: var(--red); }
.conv-ill { display: grid; gap: 12px; max-width: 520px; }
.conv-ill .rail { display: flex; gap: 6px; overflow: hidden; }
.conv-ill .rail span { min-width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--panel); color: var(--mu); font: 700 1rem var(--h); }
.conv-ill .rail .on { background: var(--t); color: #022; }
.conv-ill .big { background: var(--panel); border: 1px solid var(--t); border-radius: 16px; padding: 18px; color: var(--tx); }
.conv-ill .big b { font: 800 2.4rem/1 var(--h); color: var(--t); } .conv-ill .big p { font: 500 .9rem/1.5 var(--m); color: var(--body); }
.conv-ill .pn { display: flex; justify-content: space-between; font: 700 .8rem var(--m); color: var(--t); }

/* Gate */
.gate-phone { justify-self: center; }
.gate-list { background: #082A31; border: 1px solid var(--line); border-radius: 22px; padding: 12px; display: grid; gap: 8px; min-height: 230px; align-content: start; }
.gi { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; background: #04191E; font-size: .88rem; color: var(--tx); transition: all .3s; }
.gi b { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-family: var(--h); }
.gi.bad b { background: rgba(255,93,108,.15); color: var(--red); } .gi.warn b { background: rgba(255,181,71,.15); color: var(--amb); }
.gi.fixed b { background: rgba(43,196,107,.15); color: var(--grn); } .gi.fixed span { color: var(--mu); text-decoration: line-through; }
.gi button { font: 700 .76rem/1 var(--b); color: #022; background: var(--t); border: 0; border-radius: 999px; padding: 8px 12px; cursor: pointer; }
.gi em { font: 700 .62rem/1 var(--m); font-style: normal; color: var(--amb); text-transform: uppercase; letter-spacing: .1em; }
.who { color: var(--mu); }

/* Setup windows */
.win { background: #04191E; border: 1px solid var(--line2); border-radius: 18px; overflow: hidden; box-shadow: 0 40px 80px -50px rgba(31,208,219,.6); }
.wbar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: #072329; font: 700 .74rem/1 var(--m); color: var(--mu); }
.wbar i { width: 10px; height: 10px; border-radius: 50%; background: #1E4A53; }
.wbar span { margin-left: 8px; } .wbar .sample { margin-left: auto; font-style: normal; color: var(--or); }
.wbody { padding: 18px; display: grid; gap: 16px; overflow-x: auto; }
.frow { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.frow label { display: grid; gap: 6px; flex: 1 1 240px; font: 700 .7rem/1 var(--m); color: var(--mu); letter-spacing: .1em; text-transform: uppercase; }
.frow input { font: 500 1rem var(--b); color: var(--tx); background: #082A31; border: 1px solid var(--line2); border-radius: 10px; padding: 11px 12px; }
.tbl { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 460px; }
.tbl th { text-align: left; font: 700 .66rem/1 var(--m); letter-spacing: .12em; text-transform: uppercase; color: var(--mu); padding: 8px 10px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 11px 10px; border-bottom: 1px solid var(--line); color: var(--tx); }
.pill { font: 700 .7rem/1 var(--m); padding: 5px 9px; border-radius: 999px; background: #12343C; color: var(--body); }
.pill.t { background: rgba(31,208,219,.15); color: var(--t); } .pill.g { background: rgba(43,196,107,.15); color: var(--grn); } .pill.a { background: rgba(255,181,71,.15); color: var(--amb); }
.lists { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .lists { grid-template-columns: 1fr; } }
.lists div { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lists h5 { width: 100%; margin: 0 0 4px; font: 700 .68rem/1 var(--m); letter-spacing: .12em; text-transform: uppercase; color: var(--mu); }
.lists span { font-size: .86rem; font-weight: 600; color: var(--tx); border: 1px solid var(--line2); border-radius: 10px; padding: 8px 10px; }
.lists .on { background: var(--t); color: #022; border-color: var(--t); }
.lists .add, .tpls .add { color: var(--t); border-style: dashed; }
.tpls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .tpls { grid-template-columns: 1fr 1fr; } }
.tpls button { font: 700 .95rem/1.2 var(--b); color: var(--tx); background: #082A31; border: 1px solid var(--line2); border-radius: 14px; padding: 18px 12px; display: grid; gap: 6px; }
.tpls .on { border-color: var(--t); box-shadow: 0 0 0 3px rgba(31,208,219,.15); }
.tpls small { font: 500 .74rem var(--m); color: var(--t); }

/* Tech */
.arch { display: grid; gap: 10px; margin: 36px 0; }
.layer { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line2); }
.layer b { width: 170px; color: var(--tx); font-family: var(--h); }
@media (max-width: 640px) { .layer b { width: 100%; } }
.layer span { font: 600 .84rem/1 var(--b); padding: 9px 12px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--body); }
.layer .ghost { border-style: dashed; color: var(--mu); }
.skins { background: linear-gradient(90deg, rgba(31,208,219,.12), transparent); }
.engine { background: linear-gradient(90deg, rgba(244,123,32,.14), transparent); border-color: rgba(244,123,32,.45); }
.device { background: linear-gradient(90deg, rgba(13,124,150,.2), transparent); }
.cloud { background: linear-gradient(90deg, rgba(43,196,107,.1), transparent); }
.tgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1000px) { .tgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tgrid { grid-template-columns: 1fr; } }
.tgrid div { padding: 20px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); display: grid; gap: 8px; align-content: start; }
.tgrid p { color: var(--mu); font-size: .93rem; }

/* Stack */
.chain { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 14px; align-items: stretch; margin: 36px 0 26px; }
.chain > i { align-self: center; color: var(--or); font-style: normal; font-size: 1.6rem; }
@media (max-width: 860px) { .chain { grid-template-columns: 1fr; } .chain > i { justify-self: center; transform: rotate(90deg); } }
.ln { --k: var(--t); text-decoration: none; color: var(--tx); background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 20px; display: grid; gap: 6px; transition: border-color .2s, transform .2s; }
.ln:hover { border-color: var(--k); transform: translateY(-3px); }
.ln.me { border-color: var(--t); box-shadow: 0 0 0 4px rgba(31,208,219,.1); }
.ln img { width: 56px; height: 56px; margin-bottom: 6px; }
.ln small { font: 700 .68rem/1 var(--m); letter-spacing: .14em; text-transform: uppercase; color: var(--k); }
.ln span { color: var(--mu); font-size: .92rem; }
.leaks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 860px) { .leaks { grid-template-columns: 1fr; } }
.leaks div { background: #04191E; border: 1px solid var(--line); border-radius: 18px; padding: 18px; display: grid; gap: 8px; align-content: start; }
.leaks p { font-size: .93rem; }

/* Roadmap */
.road { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 36px 0 16px; }
@media (max-width: 1000px) { .road { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .road { grid-template-columns: 1fr; } }
.col { border-radius: 20px; padding: 20px; border: 1px solid var(--line); background: var(--panel); position: relative; overflow: hidden; }
.col::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; }
.col.live::before { background: var(--grn); } .col.now::before { background: var(--t); } .col.next::before { background: var(--or); } .col.later::before { background: var(--mu); }
.col h3 { margin-bottom: 12px; }
.col ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: .93rem; }

/* FAQ */
.faq { display: grid; gap: 10px; margin-top: 30px; }
.faq details { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 4px 18px; }
.faq summary { cursor: pointer; padding: 14px 0; font-weight: 700; color: var(--tx); list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--t); font-family: var(--m); }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 0 16px; color: var(--mu); }

/* Form */
.cta-sec { background: radial-gradient(60% 80% at 80% 50%, rgba(244,123,32,.12), transparent 70%); }
.form { background: var(--panel); border: 1px solid var(--line2); border-radius: 22px; padding: clamp(18px, 3vw, 28px); display: grid; gap: 14px; }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .form .two { grid-template-columns: 1fr; } }
.form label { display: grid; gap: 6px; font: 700 .7rem/1.3 var(--m); letter-spacing: .1em; text-transform: uppercase; color: var(--mu); }
.form input, .form textarea, .form select { width: 100%; font: 500 16px/1.4 var(--b); color: var(--tx); background: #04191E; border: 1px solid var(--line2); border-radius: 12px; padding: 12px 14px; }
.form textarea { min-height: 120px; resize: vertical; }
.form input:focus, .form textarea:focus, .form select:focus { outline: none; border-color: var(--t); box-shadow: 0 0 0 3px rgba(31,208,219,.2); }
.hp { position: absolute; left: -9999px; }
.formmsg { min-height: 1.4em; font-weight: 700; } .formmsg.ok { color: var(--grn); } .formmsg.err { color: var(--red); }

/* Footer */
.foot { border-top: 1px solid var(--line); padding: 44px 0 calc(env(safe-area-inset-bottom, 0px) + 90px); }
.foot .wrap { display: grid; gap: 20px; }
.flogo { height: 54px; width: auto; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot nav a { color: var(--body); text-decoration: none; font-weight: 600; }
.foot nav a:hover { color: var(--t); }
.prod { display: inline-flex; align-items: center; gap: 14px; width: fit-content; padding: 10px 16px; border-radius: 14px; border: 1px solid var(--line2); text-decoration: none; color: var(--tx); font-weight: 700; }
.prod img { height: 40px; width: auto; }
.prod:hover { border-color: var(--or); }
.legal { font-size: .82rem; color: var(--mu); }

/* Help */
.helpbtn { position: fixed; z-index: 50; right: var(--gr); bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); display: inline-flex; align-items: center; gap: 8px; font: 700 .95rem/1 var(--b); color: #022; background: var(--t); border: 0; border-radius: 999px; padding: 12px 16px 12px 12px; cursor: pointer; box-shadow: 0 14px 40px -12px rgba(31,208,219,.9); }
.helpbtn span { width: 26px; height: 26px; border-radius: 50%; background: #022; color: var(--t); display: grid; place-items: center; font-weight: 800; }
.help { position: fixed; z-index: 60; right: 0; top: 0; bottom: 0; width: min(400px, 100%); background: #04191E; border-left: 1px solid var(--line2); padding: calc(env(safe-area-inset-top, 0px) + 18px) 18px 18px; display: grid; grid-template-rows: auto auto 1fr auto; gap: 14px; box-shadow: -30px 0 80px rgba(0,0,0,.6); animation: drawer .3s ease both; }
.help[hidden] { display: none; }
@keyframes drawer { from { transform: translateX(100%); } }
.hhead { display: flex; justify-content: space-between; align-items: center; color: var(--tx); font-family: var(--h); font-size: 1.2rem; }
.hhead button, .mx { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line2); background: none; color: var(--tx); font-size: 1.4rem; cursor: pointer; }
#helpQ { font: 500 16px var(--b); color: var(--tx); background: #082A31; border: 1px solid var(--line2); border-radius: 12px; padding: 12px 14px; }
.hlist { overflow-y: auto; display: grid; gap: 8px; align-content: start; }
.hlist details { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 2px 14px; }
.hlist summary { cursor: pointer; padding: 12px 0; font-weight: 700; color: var(--tx); }
.hlist p { padding-bottom: 12px; color: var(--mu); font-size: .92rem; }
.hfoot { font-size: .9rem; color: var(--mu); }

/* Modals */
.scrim { position: fixed; inset: 0; z-index: 55; background: rgba(1,10,12,.7); backdrop-filter: blur(4px); }
.modal { z-index: 80; width: min(560px, calc(100% - 32px)); max-height: calc(100% - 60px); overflow-y: auto; border: 1px solid var(--t); border-radius: 24px; background: linear-gradient(170deg, #0B2F37, #04191E); color: var(--body); padding: 30px 26px 26px; box-shadow: 0 50px 120px -30px rgba(31,208,219,.5); }
.modal[open] { animation: zoomin .35s cubic-bezier(.2,1.2,.4,1) both; }
@keyframes zoomin { from { transform: scale(.85); opacity: 0; } }
.modal::backdrop { background: rgba(1,10,12,.75); backdrop-filter: blur(4px); }
.modal h3 { font-size: 1.8rem; margin-bottom: 12px; }
.modal .mx { position: absolute; right: 16px; top: 16px; }
.modal > p { margin-bottom: 10px; }

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } }

/* Inner pages */
.prose h1, .narrow.c h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.02; margin: 6px 0 18px; }
.prose h2 { font-size: 1.3rem; margin: 28px 0 8px; }
.prose p { margin-bottom: 12px; }
.narrow.c .ctas { justify-content: center; margin-top: 22px; }