:root {
  --bg: #070b11;
  --bg-soft: #0b111a;
  --panel: rgba(17, 25, 37, .78);
  --panel-strong: #111a27;
  --line: rgba(148, 163, 184, .16);
  --text: #f8fafc;
  --muted: #9aa8ba;
  --blue: #1578ff;
  --blue2: #0d5ee8;
  --green: #36d58d;
  --shadow: 0 28px 70px rgba(0,0,0,.42);
  --radius: 22px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 50% -10%, rgba(21,120,255,.20), transparent 35%),
    radial-gradient(circle at 85% 18%, rgba(36,84,145,.12), transparent 25%),
    var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
}
a { color: inherit; }
.wrap { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }
.nav {
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(18px);
  background: rgba(7,11,17,.72);
  border-bottom: 1px solid rgba(148,163,184,.09);
}
.nav-inner { height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.brand { display:flex; align-items:center; gap:12px; font-weight: 760; font-size: 20px; text-decoration:none; }
.brand img { width: 38px; height: 38px; border-radius: 10px; box-shadow: 0 0 28px rgba(21,120,255,.24); }
.nav-links { display:flex; align-items:center; gap:24px; font-size: 14px; color: #b7c2d1; }
.nav-links a { text-decoration:none; }
.nav-links a:hover { color:white; }
.hero { padding: 88px 0 54px; text-align:center; }
.eyebrow {
  display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border:1px solid rgba(54,213,141,.22);
  background:rgba(54,213,141,.07); color:#8af0bc; border-radius:999px; font-size:13px; font-weight:650;
}
.eyebrow::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 16px rgba(54,213,141,.75); }
h1 { max-width: 850px; margin: 22px auto 18px; font-size: clamp(42px, 6vw, 72px); line-height: 1.03; letter-spacing:-.045em; }
.lead { max-width: 760px; margin:0 auto; color:#b5c0cf; font-size: clamp(17px,2.2vw,21px); }
.hero-actions { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:30px; }
.btn {
  min-height:52px; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:0 20px;
  border-radius:13px; border:1px solid var(--line); text-decoration:none; font-weight:700; transition:.18s ease; cursor:pointer;
}
.btn.primary { background:linear-gradient(180deg,var(--blue),var(--blue2)); border-color:rgba(73,143,255,.58); box-shadow:0 12px 28px rgba(21,120,255,.22); }
.btn.primary:hover { transform:translateY(-1px); box-shadow:0 16px 34px rgba(21,120,255,.30); }
.btn.secondary { background:rgba(255,255,255,.035); }
.btn.secondary:hover { background:rgba(255,255,255,.065); }
.btn.disabled { opacity:.58; cursor:default; pointer-events:none; }
.store-mark { width:20px;height:20px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px; }
.store-mark i { background:#fff; display:block; }
.hero-shot { margin: 50px auto 0; position:relative; max-width:1120px; }
.hero-shot::before { content:""; position:absolute; inset:6% 12% -3%; background:rgba(21,120,255,.20); filter:blur(70px); border-radius:40px; z-index:-1; }
.hero-shot img { width:100%; display:block; border-radius:20px; border:1px solid rgba(148,163,184,.20); box-shadow:var(--shadow); }
.trust-strip { display:flex; justify-content:center; flex-wrap:wrap; gap:10px 18px; color:#93a2b5; margin-top:23px; font-size:13px; }
.trust-strip span::before { content:"✓"; color:#65e6aa; margin-right:7px; }
section { padding:72px 0; }
.section-head { max-width:720px; margin-bottom:30px; }
.section-head h2 { font-size: clamp(30px,4vw,44px); letter-spacing:-.03em; margin:0 0 10px; }
.section-head p { color:var(--muted); margin:0; }
.grid6 { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.card { background:linear-gradient(180deg,rgba(18,28,41,.80),rgba(12,19,29,.78)); border:1px solid var(--line); border-radius:18px; padding:22px; }
.feature-icon { width:42px;height:42px;border-radius:12px; display:grid;place-items:center; background:rgba(21,120,255,.12); border:1px solid rgba(21,120,255,.20); margin-bottom:15px; font-size:20px; }
.card h3 { margin:0 0 7px; font-size:17px; }
.card p { margin:0; color:#9fadc0; font-size:14px; }
.split { display:grid; grid-template-columns:1.02fr .98fr; gap:36px; align-items:center; }
.bridge-visual { position:relative; padding:12px 56px 58px 0; min-width:0; }
.bridge-screen { position:relative; overflow:hidden; border:1px solid rgba(148,163,184,.22); border-radius:18px; background:#0d1219; box-shadow:var(--shadow); }
.bridge-screen::after { content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.025); border-radius:inherit; }
.bridge-screen img { width:100%; display:block; }
.extension-popover { position:absolute; right:0; bottom:0; width:min(310px,58%); padding:13px; border:1px solid rgba(75,154,255,.38); border-radius:16px; background:linear-gradient(180deg,rgba(15,21,30,.98),rgba(10,15,22,.98)); box-shadow:0 24px 65px rgba(0,0,0,.58),0 0 35px rgba(21,120,255,.12); }
.extension-head { display:flex; align-items:center; gap:9px; padding:0 2px 10px; }
.extension-head img { width:30px; height:30px; border-radius:8px; }
.extension-head strong,.extension-head span { display:block; }
.extension-head strong { font-size:15px; }
.extension-head span { color:#8796aa; font-size:10px; margin-top:1px; }
.extension-status { display:flex; gap:9px; align-items:center; padding:9px 10px; border:1px solid rgba(54,213,141,.18); border-radius:10px; background:rgba(54,213,141,.07); }
.extension-status i { width:9px; height:9px; border-radius:50%; flex:0 0 9px; background:#45dd98; box-shadow:0 0 12px rgba(69,221,152,.65); }
.extension-status b,.extension-status span { display:block; }
.extension-status b { font-size:11px; }
.extension-status span { color:#8ea1b5; font-size:9px; margin-top:1px; }
.extension-card { margin-top:9px; padding:10px; border:1px solid rgba(148,163,184,.15); border-radius:10px; background:#141b24; }
.extension-label { display:block; color:#aeb9c7; font-size:9px; font-weight:700; margin-bottom:7px; }
.extension-login { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px; border:1px solid #2b3644; border-radius:8px; background:#0f161f; }
.extension-login b,.extension-login small { display:block; }
.extension-login b { font-size:10px; }
.extension-login small { color:#8393a6; font-size:8px; margin-top:1px; }
.extension-login > span { padding:6px 8px; border-radius:7px; background:#126ef0; font-size:8px; font-weight:750; white-space:nowrap; }
.bridge-badge { position:absolute; left:18px; bottom:14px; display:flex; align-items:center; gap:7px; padding:7px 10px; border:1px solid rgba(148,163,184,.16); border-radius:999px; background:rgba(7,11,17,.92); color:#aeb9c8; font-size:10px; box-shadow:0 12px 32px rgba(0,0,0,.35); }
.bridge-badge span { color:#52dda0; font-size:10px; }
.points { display:grid; gap:16px; }
.point { display:flex; gap:13px; }
.point b { display:block; margin-bottom:3px; }
.point p { margin:0; color:#9eacbe; font-size:14px; }
.tick { flex:0 0 28px; height:28px; border-radius:9px; display:grid; place-items:center; background:rgba(54,213,141,.10); color:#7deab4; border:1px solid rgba(54,213,141,.17); }
.browser-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }
.browser-card { position:relative; overflow:hidden; min-height:178px; }
.browser-top { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.browser-logo-img { width:48px; height:48px; object-fit:contain; flex:0 0 48px; filter:drop-shadow(0 8px 16px rgba(0,0,0,.20)); }
.browser-card .btn { width:100%; margin-top:18px; min-height:46px; }
.browser-card small { color:#8291a5; }
.security { background:linear-gradient(180deg,rgba(10,16,24,.15),rgba(13,22,33,.76)); border-top:1px solid rgba(148,163,184,.08); border-bottom:1px solid rgba(148,163,184,.08); }
.security-box { display:grid; grid-template-columns:.8fr 1.2fr; gap:36px; align-items:center; }
.lock-orb { width:180px; aspect-ratio:1; margin:auto; border-radius:42px; display:grid; place-items:center; font-size:72px; background:radial-gradient(circle at 50% 35%,rgba(21,120,255,.33),rgba(21,120,255,.05) 58%,transparent 72%); border:1px solid rgba(21,120,255,.16); box-shadow:0 0 70px rgba(21,120,255,.12); }
.support-head { margin-bottom:24px; }
.support-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:16px; }
.support-card { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:16px; position:relative; overflow:hidden; }
.support-card::after { content:""; position:absolute; inset:auto -80px -100px auto; width:220px; height:220px; border-radius:50%; filter:blur(10px); pointer-events:none; }
.discord-card { background:linear-gradient(125deg,rgba(88,101,242,.14),rgba(18,28,41,.88) 65%); border-color:rgba(114,127,255,.20); }
.discord-card::after { background:radial-gradient(circle,rgba(88,101,242,.18),transparent 66%); }
.kofi-card { background:linear-gradient(125deg,rgba(255,95,95,.08),rgba(18,28,41,.88) 65%); }
.kofi-card::after { background:radial-gradient(circle,rgba(255,95,95,.12),transparent 66%); }
.support-icon { width:48px; height:48px; border-radius:14px; display:grid; place-items:center; font-size:22px; border:1px solid rgba(255,255,255,.08); }
.discord-icon { background:#5865F2; border-color:rgba(255,255,255,.12); }
.discord-icon img { width:27px; height:27px; display:block; object-fit:contain; }
.kofi-icon { background:rgba(255,95,95,.10); }
.support-copy h3 { margin:0 0 6px; font-size:22px; }
.support-copy p { margin:0; color:#9faec1; line-height:1.55; }
.discord-btn { grid-column:1 / -1; width:max-content; min-width:220px; background:linear-gradient(180deg,#6676ff,#5865f2); color:white; border-color:rgba(255,255,255,.06); }
.discord-btn:hover { filter:brightness(1.08); transform:translateY(-1px); }
.kofi-link { grid-column:1 / -1; display:inline-block; width:max-content; }
.kofi-link img { max-width:180px; display:block; }
.footer { padding:34px 0 48px; color:#8796aa; font-size:13px; }
.footer-inner { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; border-top:1px solid rgba(148,163,184,.11); padding-top:25px; }
.footer-links { display:flex; flex-wrap:wrap; gap:17px; }
.footer-links a { text-decoration:none; }
.footer-links a:hover { color:white; }
.legal { max-width:860px; padding:56px 0 80px; }
.legal h1 { text-align:left; font-size:44px; margin:0 0 12px; }
.legal h2 { margin-top:32px; font-size:22px; }
.legal p,.legal li { color:#aab6c6; }
.notice { padding:14px 16px; border:1px solid rgba(255,185,80,.22); background:rgba(255,185,80,.07); border-radius:12px; color:#f2c77e; }
@media(max-width:900px){ .grid6,.browser-grid{grid-template-columns:1fr 1fr}.split,.security-box,.support-grid{grid-template-columns:1fr}.nav-links{display:none}.hero{padding-top:64px}.bridge-visual{max-width:760px;margin:0 auto} }
@media(max-width:620px){ .wrap{width:min(100% - 24px,1160px)}.grid6,.browser-grid,.support-grid{grid-template-columns:1fr}section{padding:54px 0}.hero{padding:50px 0 36px}h1{font-size:43px}.hero-actions .btn{width:100%}.hero-shot{margin-top:34px}.card{padding:19px}.legal h1{font-size:36px}.bridge-visual{padding:6px 0 112px}.extension-popover{width:88%;right:6%;bottom:0}.bridge-badge{left:8px;bottom:80px} }

@media(max-width:620px){ .discord-btn,.kofi-link{width:100%}.discord-btn{justify-content:center}.kofi-link img{margin:auto}.support-card{grid-template-columns:auto 1fr} }