@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root { --bg:#0b0f12; --surface:#10161b; --surface-2:#151d23; --line:#2a3941; --line-soft:#1d2930; --text:#edf4f5; --muted:#92a0a7; --faint:#65747c; --cyan:#63d9e8; --max:1180px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--text); background:var(--bg); font-family:'Space Grotesk',system-ui,sans-serif; line-height:1.55; background-image:linear-gradient(rgba(99,217,232,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(99,217,232,.035) 1px,transparent 1px); background-size:48px 48px; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; background:radial-gradient(circle at 78% 8%,rgba(42,126,145,.16),transparent 32%),radial-gradient(circle at 4% 55%,rgba(39,68,75,.12),transparent 28%); }
a { color:inherit; text-decoration:none; }
a:hover { color:var(--cyan); }
:focus-visible { outline:2px solid var(--cyan); outline-offset:4px; }
.skip-link { position:absolute; left:-999px; top:12px; z-index:30; padding:10px 14px; background:var(--cyan); color:#071014; }
.skip-link:focus { left:12px; }
.site-header { position:relative; z-index:10; border-bottom:1px solid var(--line-soft); background:rgba(11,15,18,.86); backdrop-filter:blur(16px); }
.header-inner,.content-shell,.footer-inner { width:min(var(--max),calc(100% - 48px)); margin:0 auto; }
.header-inner { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:32px; }
.brand-link,.footer-brand { display:flex; align-items:center; gap:11px; font-size:20px; font-weight:600; letter-spacing:-.03em; }
.brand-mark { width:35px; height:35px; border-radius:10px; object-fit:cover; box-shadow:0 0 24px rgba(99,217,232,.2); }
.brand-mark.small { width:25px; height:25px; border-radius:7px; }
.nav-links,.footer-links { display:flex; align-items:center; gap:24px; color:var(--muted); font-size:13px; }
.nav-links a,.footer-links a { transition:color .18s ease; }
.nav-cta { color:var(--text)!important; padding:10px 14px; border:1px solid var(--line); border-radius:7px; background:var(--surface-2); }
.nav-cta:hover { border-color:var(--cyan); color:var(--cyan)!important; }
.section-surface { position:relative; overflow:hidden; border-bottom:1px solid var(--line-soft); }
.hero-grid { min-height:700px; display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:center; gap:44px; padding-top:78px; padding-bottom:88px; }
.hero-copy { position:relative; z-index:2; max-width:570px; }
.hero-kicker,.section-kicker { margin:0 0 18px; color:var(--cyan); font-family:'DM Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.signal-dot,.live-dot { display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:50%; background:var(--cyan); box-shadow:0 0 12px var(--cyan); vertical-align:1px; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { letter-spacing:-.045em; line-height:1.06; }
h1 { max-width:590px; margin-bottom:25px; font-size:clamp(48px,6.2vw,82px); font-weight:600; }
h2 { margin-bottom:16px; font-size:clamp(30px,4vw,52px); font-weight:600; }
h3 { margin-bottom:12px; font-size:21px; }
.lead { max-width:550px; margin-bottom:30px; color:#bcc7ca; font-size:18px; line-height:1.65; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:46px; padding:0 18px; border:1px solid var(--line); border-radius:7px; font-size:13px; font-weight:600; transition:transform .18s ease,border-color .18s ease,background .18s ease; }
.button:hover { color:var(--text); transform:translateY(-2px); }
.button.primary { border-color:var(--cyan); color:#061014; background:var(--cyan); box-shadow:0 8px 30px rgba(99,217,232,.16); }
.button.primary:hover { background:#91e9f3; }
.button.secondary { background:rgba(21,29,35,.72); }
.button.secondary:hover { border-color:var(--cyan); }
.hero-note { display:flex; align-items:center; gap:10px; margin-top:34px; color:var(--muted); font-size:12px; }
.note-mark { display:grid; place-items:center; width:24px; height:24px; color:var(--cyan); border:1px solid var(--line); border-radius:50%; }
.hero-visual { position:relative; min-height:540px; }
.visual-glow { position:absolute; width:76%; height:70%; top:11%; left:13%; border-radius:50%; background:rgba(63,177,199,.11); filter:blur(70px); }
.screen-frame { position:absolute; overflow:hidden; margin:0; border:1px solid #43535b; background:#0e1418; box-shadow:0 24px 70px #0009; }
.screen-frame img { display:block; width:100%; height:100%; object-fit:cover; }
.screen-frame figcaption { position:absolute; left:13px; bottom:12px; padding:7px 10px; border:1px solid rgba(120,153,161,.42); border-radius:5px; color:#dbe9eb; background:rgba(8,12,15,.75); backdrop-filter:blur(8px); font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.06em; text-transform:uppercase; }
.desktop-frame { top:17px; right:0; width:94%; aspect-ratio:1.6; border-radius:10px; transform:perspective(1400px) rotateY(-4deg) rotateX(2deg); }
.mobile-frame { right:5%; bottom:-18px; z-index:2; width:26%; aspect-ratio:.49; border-radius:20px; transform:rotate(4deg); }
.mobile-frame figcaption { left:7px; right:7px; bottom:8px; padding:5px 6px; font-size:7px; }
.mobile-frame .live-dot { width:5px; height:5px; margin-right:4px; }
.signal-strip { border-bottom:1px solid var(--line-soft); background:#0d1317; }
.signal-grid { display:grid; grid-template-columns:repeat(3,1fr); }
.signal-grid>div { display:flex; flex-direction:column; gap:6px; padding:25px 24px; border-left:1px solid var(--line-soft); }
.signal-grid>div:last-child { border-right:1px solid var(--line-soft); }
.signal-grid strong { color:var(--text); font-size:15px; font-weight:500; }
.signal-grid span { color:var(--faint); font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.04em; text-transform:uppercase; }
.section { padding:120px 0; }
.section-muted { border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); background:linear-gradient(120deg,rgba(22,34,40,.7),rgba(11,15,18,.82)); }
.section-heading { margin-bottom:48px; }
.split-heading { display:grid; grid-template-columns:1fr .72fr; gap:70px; align-items:end; }
.section-heading h2 { max-width:650px; }
.section-intro { margin:0; color:var(--muted); font-size:16px; line-height:1.75; }
.feature-grid { display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:14px; }
.feature-card { position:relative; min-height:260px; padding:28px; border:1px solid var(--line); border-radius:9px; background:linear-gradient(145deg,rgba(23,33,39,.86),rgba(13,19,23,.78)); }
.feature-card:hover { border-color:#4b6973; }
.feature-card-wide { background:linear-gradient(145deg,rgba(29,65,73,.74),rgba(14,24,28,.88)); }
.feature-index { color:var(--cyan); font-family:'DM Mono',monospace; font-size:11px; }
.feature-card h3 { margin-top:92px; }
.feature-card p { max-width:250px; margin:0; color:var(--muted); font-size:14px; line-height:1.65; }
.feature-arrow { position:absolute; right:25px; bottom:23px; color:var(--cyan); font-size:21px; }
.product-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:90px; align-items:center; }
.product-copy>p:not(.section-kicker) { max-width:510px; color:var(--muted); font-size:16px; line-height:1.75; }
.check-list { display:grid; gap:14px; margin:28px 0; padding:0; list-style:none; color:#c9d3d6; font-size:14px; }
.check-list li { position:relative; padding-left:25px; }
.check-list li::before { content:"✓"; position:absolute; left:0; color:var(--cyan); font-family:'DM Mono',monospace; }
.text-link { color:var(--cyan); font-size:13px; font-weight:600; }
.capability-panel { border:1px solid #3a555e; border-radius:9px; background:#0c1317; box-shadow:0 24px 55px #0005; }
.capability-top { display:flex; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line); color:#82949b; font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.1em; }
.panel-status { color:var(--cyan); }
.capability-body { padding:33px 29px 30px; }
.capability-line { display:flex; flex-direction:column; gap:8px; padding:18px 0; border-bottom:1px solid var(--line-soft); }
.line-label { color:var(--faint); font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.12em; }
.capability-line strong { color:#dbe7e9; font-size:14px; font-weight:500; letter-spacing:.02em; }
.capability-meter { height:5px; margin:27px 0 11px; overflow:hidden; border-radius:8px; background:#1e2b30; }
.capability-meter span { display:block; height:100%; border-radius:8px; background:linear-gradient(90deg,var(--cyan),#a3f1e9); box-shadow:0 0 16px var(--cyan); }
.capability-body small { color:var(--faint); font-family:'DM Mono',monospace; font-size:10px; }
.privacy-section { padding-top:108px; padding-bottom:108px; }
.privacy-grid { display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:start; }
.privacy-grid>div:first-child>p:not(.section-kicker) { max-width:500px; color:var(--muted); font-size:16px; line-height:1.75; }
.policy-links { border-top:1px solid var(--line); }
.policy-links a { display:flex; align-items:center; justify-content:space-between; padding:20px 0; border-bottom:1px solid var(--line); color:#ced9dc; font-size:15px; }
.policy-links a span:last-child { color:var(--cyan); font-size:20px; }
.closing-strip { border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); background:#121b20; }
.closing-inner { display:flex; align-items:center; justify-content:space-between; gap:30px; padding-top:52px; padding-bottom:52px; }
.closing-inner h2 { margin:0; font-size:36px; }
.closing-inner .section-kicker { margin-bottom:11px; }
.site-footer { padding:27px 0 33px; color:var(--faint); font-size:12px; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:25px; }
.footer-brand { color:var(--text); font-size:15px; }
.footer-links { gap:18px; font-size:12px; }
.legal-page { min-height:calc(100vh - 150px); padding:94px 0 120px; }
.legal-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:90px; align-items:start; }
.legal-copy { max-width:750px; }
.legal-copy h1,.page-hero h1 { margin-bottom:20px; font-size:clamp(42px,6vw,70px); }
.legal-copy h2 { margin-top:54px; margin-bottom:14px; font-size:27px; }
.legal-copy p,.legal-copy li { color:#afbdc1; font-size:16px; line-height:1.8; }
.legal-copy ul { padding-left:22px; }
.legal-copy a,.page-hero a { color:var(--cyan); }
.side-panel { position:sticky; top:110px; padding:24px; border:1px solid var(--line); border-radius:9px; background:linear-gradient(145deg,#142127,#0d1317); }
.side-label,.card-number { color:var(--cyan); font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.side-panel h2 { margin-top:38px; font-size:26px; }
.side-panel p { color:var(--muted); font-size:14px; line-height:1.7; }
.side-panel a { color:var(--cyan); font-size:13px; font-weight:600; }
.page-hero { max-width:760px; margin-bottom:56px; }
.page-hero .lead { max-width:700px; }
.support-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-bottom:80px; }
.support-card { padding:29px; border:1px solid var(--line); border-radius:9px; background:var(--surface); }
.support-card h2 { margin-top:52px; font-size:28px; }
.support-card .check-list { margin-bottom:0; }
.faq-list { border-top:1px solid var(--line); }
.faq-row { display:grid; grid-template-columns:.7fr 1.3fr; gap:55px; padding:29px 0; border-bottom:1px solid var(--line); }
.faq-row h2 { margin:0; font-size:22px; }
.faq-row p { margin:0; color:var(--muted); font-size:15px; line-height:1.75; }
.data-list { display:grid; gap:12px; padding:0!important; list-style:none!important; }
.data-list li { display:flex; flex-direction:column; gap:5px; padding:18px 20px; border-left:2px solid var(--cyan); background:var(--surface); }
.data-list strong { color:var(--text); font-size:15px; }
.data-list span { color:var(--muted); font-size:14px; }
.not-found { display:grid; place-items:start; align-content:center; gap:17px; min-height:100vh; width:min(650px,calc(100% - 48px)); margin:auto; }
.not-found .brand-mark { width:58px; height:58px; margin-bottom:30px; }
.not-found h1 { margin:0; font-size:clamp(42px,7vw,70px); }
.not-found p:not(.section-kicker) { margin:0 0 16px; color:var(--muted); font-size:17px; }
@media (max-width:900px) { .nav-links { gap:14px; } .nav-links>a:not(.nav-cta) { display:none; } .hero-grid { grid-template-columns:1fr; padding-top:65px; } .hero-copy { max-width:680px; } .hero-visual { min-height:455px; } .desktop-frame { right:0; width:96%; } .mobile-frame { right:4%; width:28%; } .split-heading,.product-grid,.privacy-grid,.legal-layout { grid-template-columns:1fr; gap:38px; } .feature-grid { grid-template-columns:1fr 1fr; } .feature-card-wide { grid-column:span 2; } .side-panel { position:static; max-width:440px; } }
@media (max-width:620px) { .header-inner,.content-shell,.footer-inner { width:min(100% - 32px,var(--max)); } .header-inner { min-height:66px; } .brand-link { font-size:18px; } .nav-cta { padding:8px 10px; font-size:11px; } .hero-grid { min-height:0; padding-top:56px; padding-bottom:52px; } h1 { font-size:48px; } .lead { font-size:16px; } .hero-visual { min-height:300px; margin-top:10px; } .desktop-frame { top:10px; width:100%; border-radius:7px; } .mobile-frame { bottom:-15px; width:29%; border-radius:13px; } .screen-frame figcaption { font-size:8px; } .signal-grid { grid-template-columns:1fr; } .signal-grid>div { padding:16px 0; border-left:0; border-right:0!important; } .section { padding:76px 0; } .feature-grid,.support-grid { grid-template-columns:1fr; } .feature-card-wide { grid-column:auto; } .feature-card { min-height:220px; } .feature-card h3 { margin-top:65px; } .closing-inner,.footer-inner { align-items:flex-start; flex-direction:column; } .closing-inner h2 { font-size:31px; } .footer-inner { gap:18px; } .footer-links { flex-wrap:wrap; } .legal-page { padding:66px 0 80px; } .legal-copy h2 { margin-top:42px; font-size:24px; } .legal-copy p,.legal-copy li { font-size:15px; } .faq-row { grid-template-columns:1fr; gap:10px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }