:root { color-scheme: dark; --blue:#86b6fe; --blue-soft:#b9d4ff; --violet:#a98bfa; --cyan:#69dfec; --ink:#090d15; --bg:#0c111b; --surface:#121926; --line:#27354a; --text:#f5f8ff; --muted:#9caac0; --max:1180px; }
* { box-sizing:border-box; }
html { background:var(--ink); color:var(--text); font:16px/1.6 Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; scroll-behavior:smooth; }
body { min-height:100vh; margin:0; overflow-x:hidden; background:radial-gradient(circle at 50% -10%,#172a48 0,var(--bg) 38rem,var(--ink) 85rem); }
body::before { position:fixed; z-index:-1; inset:0; background-image:linear-gradient(rgb(134 182 254 / 3.5%) 1px,transparent 1px),linear-gradient(90deg,rgb(134 182 254 / 3.5%) 1px,transparent 1px); background-size:56px 56px; mask-image:linear-gradient(to bottom,black,transparent 70%); content:""; }
a { color:inherit; text-underline-offset:.2em; }
.site-header,.site-footer,main { width:min(var(--max),calc(100% - 40px)); margin-inline:auto; }
.site-header { display:flex; min-height:82px; align-items:center; justify-content:space-between; border-bottom:1px solid rgb(255 255 255 / 9%); }
.wordmark { display:inline-flex; align-items:center; gap:10px; color:var(--blue); font-weight:780; letter-spacing:.12em; text-decoration:none; }
.wordmark img { border-radius:9px; box-shadow:0 5px 18px rgb(0 0 0 / 28%); }
.site-header nav,.site-footer nav { display:flex; align-items:center; gap:28px; }
.site-header nav a,.site-footer nav a { color:var(--muted); font-size:.86rem; text-decoration:none; }
.site-header nav a:hover,.site-footer nav a:hover,.text-link:hover { color:var(--blue); }
.hero { display:grid; min-height:680px; grid-template-columns:.88fr 1.12fr; gap:60px; align-items:center; padding:86px 0 96px; }
.eyebrow { margin:0 0 16px; color:var(--blue); font-size:.72rem; font-weight:760; letter-spacing:.16em; text-transform:uppercase; }
.status-dot { display:inline-block; width:7px; height:7px; margin:0 10px 1px 0; border-radius:50%; background:var(--cyan); box-shadow:0 0 14px var(--cyan); }
h1,h2,h3,p { text-wrap:pretty; }
h1 { margin:0; font-size:clamp(3.25rem,6.2vw,6rem); letter-spacing:-.062em; line-height:.94; }
h1 span { color:var(--blue); }
.hero-lede { max-width:590px; margin:28px 0; color:var(--muted); font-size:clamp(1.06rem,2vw,1.26rem); }
.hero-actions { display:flex; align-items:center; gap:24px; margin-top:34px; }
.button { display:inline-flex; min-height:46px; align-items:center; justify-content:center; padding:0 20px; border:1px solid var(--blue); border-radius:12px; color:#08111f; background:var(--blue); font-size:.86rem; font-weight:720; text-decoration:none; }
.button:hover { background:var(--blue-soft); }
.button-muted { color:var(--blue-soft); background:rgb(134 182 254 / 10%); cursor:default; }
.text-link { color:var(--muted); font-size:.9rem; font-weight:650; text-decoration:none; }
.trust-list { display:flex; flex-wrap:wrap; gap:9px 22px; margin:30px 0 0; padding:0; color:#7f8da3; font-size:.74rem; list-style:none; }
.trust-list li::before { margin-right:8px; color:var(--cyan); content:"✓"; }
.product-stage { position:relative; min-height:560px; display:grid; place-items:center; isolation:isolate; }
.glow { position:absolute; z-index:-2; border-radius:50%; filter:blur(70px); opacity:.32; }
.glow-a { width:280px; height:280px; top:9%; right:8%; background:var(--blue); }
.glow-b { width:220px; height:220px; bottom:8%; left:6%; background:var(--violet); }
.order-window { width:min(100%,620px); overflow:hidden; border:1px solid rgb(164 190 229 / 24%); border-radius:23px; background:#f4f6f9; box-shadow:0 42px 110px rgb(0 0 0 / 55%),0 0 0 8px rgb(255 255 255 / 2%); color:#252b34; transform:perspective(1200px) rotateY(-3deg) rotateX(1deg); }
.window-bar { display:flex; min-height:52px; align-items:center; justify-content:space-between; padding:0 22px; background:#11151d; color:#dce4f0; }
.window-brand { font-size:.78rem; font-weight:700; letter-spacing:.04em; }
.window-status { padding:4px 9px; border-radius:999px; background:#253143; color:#c8d6e8; font-size:.66rem; }
.extension-bar { display:grid; min-height:54px; grid-template-columns:1fr auto auto auto; gap:18px; align-items:center; padding:0 20px; background:#20252d; color:#aeb5c0; }
.extension-brand { color:var(--blue); font-size:.72rem; font-weight:800; letter-spacing:.14em; }
.tab { position:relative; padding:17px 4px 14px; font-size:.69rem; }
.tab.active { color:var(--blue); font-weight:720; }
.tab.active::after { position:absolute; right:0; bottom:0; left:0; height:2px; background:var(--blue); content:""; }
.menu-dot { color:var(--blue); letter-spacing:2px; }
.order-body { padding:24px; }
.order-heading,.order-row,.paid-row { display:flex; align-items:center; justify-content:space-between; }
.order-heading { margin-bottom:11px; color:#6d7786; font-size:.72rem; font-weight:700; text-transform:uppercase; }
.order-row { min-height:74px; border-top:1px solid #dfe4eb; }
.item { display:flex; align-items:center; gap:13px; font-size:.81rem; font-weight:680; }
.item small,.money small { display:block; margin-top:2px; color:#788291; font-size:.66rem; font-weight:500; }
.swatch { width:32px; height:32px; flex:0 0 auto; border-radius:10px; box-shadow:inset 0 0 0 1px rgb(0 0 0 / 7%); }
.swatch-violet { background:linear-gradient(135deg,#e5dcff,#9773e7); }
.swatch-blue { background:linear-gradient(135deg,#d5e6ff,#6ca2e9); }
.swatch-cyan { background:linear-gradient(135deg,#d8fbff,#5fd2dc); }
.money { min-width:100px; text-align:right; }
.money strong { font-size:.91rem; }
.paid-row { margin-top:12px; padding:18px 16px; border-radius:13px; background:#e7edf6; }
.paid-row > span:first-child small,.paid-row > span:first-child strong { display:block; }
.paid-row > span:first-child small { color:#6e7887; font-size:.66rem; }
.paid-row > span:first-child strong { margin-top:2px; font-size:1.22rem; }
.rate-line { display:grid; min-height:48px; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:0 24px; border-top:1px solid #d7dce4; background:#eef1f5; color:#667181; font-size:.68rem; }
.rate-track { height:1px; background:#c9d0da; }
.rate-track i { display:block; width:43%; height:1px; background:#679fea; }
.floating-chip { position:absolute; display:grid; width:92px; height:92px; place-items:center; border-radius:23px; box-shadow:0 24px 44px rgb(0 0 0 / 42%); }
.floating-chip span { font-size:2rem; font-weight:800; line-height:1; }
.floating-chip small { margin-top:-15px; font-size:.59rem; font-weight:750; letter-spacing:.1em; text-transform:uppercase; }
.chip-native { right:-2%; bottom:3%; background:var(--blue); color:#0c1627; transform:rotate(7deg); }
.chip-checkout { top:4%; left:0; background:#30274a; color:#d9ccff; transform:rotate(-8deg); }
.feature-intro { display:grid; grid-template-columns:1fr 1.25fr; column-gap:80px; align-items:end; padding:115px 0 50px; border-top:1px solid var(--line); }
.feature-intro .eyebrow { grid-column:1 / -1; }
h2 { margin:0; font-size:clamp(2.4rem,5vw,4.2rem); letter-spacing:-.052em; line-height:1.02; }
.feature-intro > p:last-child { margin:0; color:var(--muted); font-size:1.08rem; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:24px 0 120px; }
.feature-grid article { min-height:300px; padding:30px; border:1px solid var(--line); border-radius:20px; background:linear-gradient(145deg,rgb(24 33 49 / 90%),rgb(13 19 30 / 78%)); }
.feature-number { color:var(--blue); font:700 .7rem/1 ui-monospace,SFMono-Regular,Consolas,monospace; }
h3 { margin:105px 0 12px; font-size:1.32rem; letter-spacing:-.025em; }
.feature-grid p { margin:0; color:var(--muted); font-size:.91rem; }
.how { display:grid; grid-template-columns:1fr 1fr; gap:85px; align-items:start; padding:110px 70px; border:1px solid var(--line); border-radius:26px; background:linear-gradient(125deg,#121d2f,#121724 58%,#1d1730); }
.how > div > p:last-child { margin-top:28px; color:var(--muted); }
.how ol { margin:0; padding:0; list-style:none; }
.how li { display:grid; grid-template-columns:38px 1fr; gap:17px; padding:23px 0; border-bottom:1px solid rgb(255 255 255 / 10%); }
.how li > span { display:grid; width:34px; height:34px; place-items:center; border:1px solid #4c6384; border-radius:50%; color:var(--blue); font-size:.75rem; }
.how strong,.how small { display:block; }
.how strong { margin-bottom:4px; }
.how small { color:var(--muted); font-size:.78rem; }
.privacy-callout { display:grid; grid-template-columns:112px 1fr auto; gap:38px; align-items:center; margin:96px 0; padding:44px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.privacy-callout h2 { font-size:clamp(2rem,4vw,3.2rem); }
.privacy-callout p:last-child { margin-bottom:0; color:var(--muted); }
.privacy-mark { display:grid; width:96px; height:96px; place-items:center; border:1px solid #315178; border-radius:50%; background:radial-gradient(circle,rgb(134 182 254 / 18%),transparent 67%); }
.privacy-mark span { position:relative; width:30px; height:36px; border:3px solid var(--blue); border-radius:8px; }
.privacy-mark span::before { position:absolute; width:18px; height:18px; top:-15px; left:3px; border:3px solid var(--blue); border-bottom:0; border-radius:13px 13px 0 0; content:""; }
.closing { max-width:870px; margin:0 auto; padding:100px 0 130px; text-align:center; }
.closing p:not(.eyebrow) { color:var(--muted); font-size:1.05rem; }
.closing a { color:var(--blue); font-weight:700; text-decoration:none; }
.site-footer { display:flex; min-height:160px; align-items:center; justify-content:space-between; border-top:1px solid var(--line); }
.site-footer p { max-width:510px; margin:14px 0 0; color:#748197; font-size:.72rem; }
.page-shell { width:min(860px,calc(100% - 40px)); margin:0 auto; padding:88px 0 110px; }
.page-shell .lede { margin:26px 0 50px; color:var(--muted); font-size:1.12rem; }
.page-shell section { margin:18px 0; padding:28px 30px; border:1px solid var(--line); border-radius:18px; background:var(--surface); }
.page-shell h1 { font-size:clamp(3rem,7vw,5.2rem); }
.page-shell h2 { margin-bottom:12px; font-size:1.35rem; letter-spacing:-.025em; }
.page-shell section p:last-child { margin-bottom:0; }
.page-shell dt { margin-top:14px; font-weight:700; }
.page-shell dd { margin:4px 0 16px; color:var(--muted); }
.page-shell li { margin:8px 0; }
.disclaimer { margin-top:46px; color:#77849a; font-size:.78rem; }
@media (max-width:980px) { .hero{grid-template-columns:1fr;padding-top:70px}.hero-copy{max-width:720px}.product-stage{min-height:520px}.feature-intro{grid-template-columns:1fr;gap:24px}.feature-grid{grid-template-columns:1fr}.feature-grid article{min-height:210px}h3{margin-top:60px}.how{grid-template-columns:1fr;gap:38px;padding:62px 44px}.privacy-callout{grid-template-columns:90px 1fr}.privacy-callout .button{grid-column:2;justify-self:start} }
@media (max-width:680px) { .site-header{min-height:70px}.site-header nav a:first-child{display:none}.site-header nav,.site-footer nav{gap:16px}.hero{min-height:auto;gap:20px;padding:58px 0 78px}h1{font-size:clamp(3rem,14vw,4.8rem)}.hero-actions{align-items:flex-start;flex-direction:column;gap:15px}.product-stage{min-height:430px}.order-window{transform:none}.extension-bar{gap:9px;padding-inline:12px}.order-body{padding:18px}.swatch{width:26px;height:26px}.floating-chip{display:none}.feature-intro{padding-top:85px}.feature-grid{padding-bottom:82px}.how{padding:44px 24px}.privacy-callout{grid-template-columns:1fr;padding:42px 0}.privacy-callout .button{grid-column:1}.privacy-mark{width:76px;height:76px}.site-footer{align-items:flex-start;flex-direction:column;gap:28px;justify-content:center;padding:42px 0}.site-footer nav{flex-wrap:wrap}.page-shell{padding-top:58px}.page-shell section{padding:23px 21px} }
@media (prefers-reduced-motion:no-preference) { .button,a { transition:color 150ms ease,background 150ms ease,border-color 150ms ease; } }
@media (forced-colors:active) { .order-window,.feature-grid article,.how,.page-shell section { border:1px solid CanvasText; } }