* { box-sizing: border-box; }
html, body {
margin: 0; padding: 0;
background: #0a0a0c;
color: #d0d0d6;
font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
}
a { color: #4ade80; text-decoration: none; }
a:hover { text-decoration: underline; }
/* ── Top bar ─────────────────────────────── */
.nav {
display: flex; align-items: center; gap: 12px;
padding: 16px 28px;
border-bottom: 1px solid #1a1a20;
position: sticky; top: 0;
background: rgba(10,10,12,.9);
backdrop-filter: blur(10px);
z-index: 10;
}
.brand { font-weight: 800; font-size: 16px; color: #fff; letter-spacing: -.01em; }
.brand span { color: #4ade80; }
.nav-links { display: none; gap: 22px; margin-left: 28px; }
.nav-links a { color: #8a8a94; font-size: 13.5px; font-weight: 500; }
.nav-links a:hover { color: #fff; text-decoration: none; }
@media (min-width: 820px) { .nav-links { display: flex; } }
.nav-right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.nav-btn {
padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 600;
border: 1px solid #26262c; background: #131316; color: #bbb; cursor: pointer;
}
.nav-btn:hover { background: #1c1c22; color: #fff; }
.nav-btn.primary { background: #14682e; border-color: #1a7f4b; color: #fff; }
.nav-btn.primary:hover { background: #1a8039; }
/* ── Layout ──────────────────────────────── */
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 28px; }
.hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; padding: 60px 0 52px; align-items: start; }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; gap: 40px; padding: 44px 0; } }
.hero-proof {
display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 20px;
}
.hero-proof > div {
flex: 1 1 96px; background: #0d0d11; border: 1px solid #23232c;
border-radius: 12px; padding: 10px 12px;
}
/* Keep all three on one row on a phone — wrapping 2+1 looked like a mistake. */
@media (max-width: 430px) {
.hero-proof { gap: 7px; }
.hero-proof > div { padding: 9px 8px; }
.hero-proof b { font-size: 16px; }
.hero-proof span { font-size: 10.5px; }
}
.hero-proof b {
display: block; color: #fff; font-size: 19px; font-weight: 800;
letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.hero-proof span { display: block; font-size: 11.5px; color: #7a7a86; margin-top: 2px; }
.badge {
display: inline-flex; align-items: center; gap: 7px;
padding: 5px 12px; border-radius: 999px; margin-bottom: 20px;
background: #0d1410; border: 1px solid #1a5c33; color: #4ade80;
font-size: 12.5px; font-weight: 600;
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px #4ade80; }
h1 { font-size: 44px; line-height: 1.1; color: #fff; margin: 0 0 18px; letter-spacing: -.03em; }
h1 span { color: #4ade80; }
@media (max-width: 900px) { h1 { font-size: 33px; } }
.lede { font-size: 17px; color: #9a9aa4; margin: 0 0 26px; max-width: 48ch; }
.points { list-style: none; padding: 0; margin: 0 0 28px; }
.points li { padding: 7px 0 7px 28px; position: relative; color: #c4c4cc; font-size: 14.5px; }
.points li::before {
content: "✓"; position: absolute; left: 0; top: 7px;
color: #4ade80; font-weight: 800;
}
/* ── Auth card ───────────────────────────── */
.card {
background: #101014; border: 1px solid #1e1e26; border-radius: 14px;
padding: 26px 24px; position: sticky; top: 90px;
}
.card h2 { margin: 0 0 4px; font-size: 18px; color: #fff; }
.card .sub { font-size: 13px; color: #6a6a74; margin: 0 0 20px; }
.card input {
width: 100%; padding: 11px 13px; margin-bottom: 10px;
background: #0a0a0e; border: 1px solid #23232c; border-radius: 9px;
color: #e0e0e6; font-size: 14px; font-family: inherit;
}
.card input:focus { outline: none; border-color: #1a7f4b; }
.card input::placeholder { color: #3a3a44; }
.card button.submit {
width: 100%; padding: 12px; margin-top: 4px;
background: #14682e; border: 1px solid #1a7f4b; border-radius: 9px;
color: #fff; font-size: 14px; font-weight: 700; cursor: pointer;
}
.card button.submit:hover { background: #1a8039; }
.card button.submit:disabled { opacity: .55; cursor: default; }
.swap { margin-top: 14px; font-size: 13px; color: #6a6a74; text-align: center; }
.note {
margin-top: 16px; padding: 11px 13px; font-size: 12.5px; line-height: 1.5;
background: #0d1410; border: 1px solid #16301f; border-radius: 9px; color: #8fae9c;
}
.msg { margin-top: 12px; font-size: 13px; min-height: 18px; }
.msg.err { color: #ff8a8a; }
.msg.ok { color: #4ade80; }
/* ── Trust strip ─────────────────────────── */
.strip {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
background: #1a1a20; border: 1px solid #1a1a20; border-radius: 14px; overflow: hidden;
}
@media (max-width: 720px) { .strip { grid-template-columns: repeat(2, 1fr); } }
.strip .cell { background: #0d0d11; padding: 20px 18px; text-align: center; }
.strip .num { font-size: 24px; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.strip .num span { color: #4ade80; }
.strip .lbl { font-size: 12px; color: #7a7a84; margin-top: 4px; }
/* ── Sections ────────────────────────────── */
.band { border-top: 1px solid #1a1a20; padding: 56px 0; }
.band-head { text-align: center; max-width: 640px; margin: 0 auto 36px; }
h3 { font-size: 27px; color: #fff; margin: 0 0 12px; letter-spacing: -.02em; }
@media (max-width: 900px) { h3 { font-size: 23px; } }
.band-head p { font-size: 15.5px; color: #8a8a94; margin: 0; }
.grid3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
@media (max-width: 820px) { .grid3 { grid-template-columns: 1fr; } }
.tile { background: #101014; border: 1px solid #1e1e26; border-radius: 12px; padding: 22px; }
.tile .ico {
width: 40px; height: 40px; border-radius: 10px; margin-bottom: 14px;
display: flex; align-items: center; justify-content: center; font-size: 20px;
background: #14261b; border: 1px solid #1a5c33;
}
.tile.ai { border-color: #2a1e3a; background: linear-gradient(160deg, #14101c 0%, #0e0d13 100%); }
.tile.ai .ico { background: #1c1230; border-color: #5b2a86; }
.tile.ai .tag {
display: inline-block; margin-bottom: 12px; padding: 3px 9px; border-radius: 999px;
font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
background: #1c1230; border: 1px solid #5b2a86; color: #c39bff;
}
.tile h4 { margin: 0 0 7px; font-size: 15.5px; color: #fff; }
.tile p { margin: 0; font-size: 13.5px; color: #85858f; line-height: 1.55; }
.step-n {
display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px; border-radius: 8px; margin-bottom: 12px;
background: #14261b; border: 1px solid #1a7f4b; color: #4ade80;
font-size: 13px; font-weight: 800;
}
/* ── Results / proof ─────────────────────── */
.proof { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: center; }
@media (max-width: 820px) { .proof { grid-template-columns: 1fr; } }
.proof-copy h3 { text-align: left; margin-bottom: 14px; }
.proof-copy p { color: #9a9aa4; font-size: 15px; margin: 0; }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pill {
padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
background: #0d1410; border: 1px solid #16301f; color: #8fae9c;
}
.insights {
background: linear-gradient(160deg, #14141a 0%, #0d0d11 100%);
border: 1px solid #23232c; border-radius: 16px; padding: 22px;
}
.insights-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.insights-top .t { font-size: 13px; color: #8a8a94; font-weight: 600; }
.insights-top .live { font-size: 11px; color: #4ade80; display: flex; align-items: center; gap: 6px; }
.insights-top .live .dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 6px #4ade80; }
.insights h5 { margin: 0 0 2px; font-size: 26px; color: #fff; font-weight: 800; letter-spacing: -.02em; }
.insights .sub2 { font-size: 12.5px; color: #6a6a74; margin: 0 0 18px; }
.geo { display: flex; flex-direction: column; gap: 11px; }
.geo-row { display: grid; grid-template-columns: 110px 1fr 44px; align-items: center; gap: 10px; }
.geo-row .c { font-size: 12.5px; color: #b8b8c0; }
.geo-row .bar { height: 7px; border-radius: 4px; background: #1c1c24; overflow: hidden; }
.geo-row .bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #7c3aed, #ec4899); }
.geo-row .p { font-size: 12px; color: #8a8a94; text-align: right; font-variant-numeric: tabular-nums; }
/* ── Framed proof photos ─────────────────── */
.shot { border: 1px solid #23232c; border-radius: 16px; overflow: hidden; background: #0d0d11; }
.shot img { display: block; width: 100%; height: auto; }
.shot.tall img { max-height: 380px; object-fit: cover; object-position: center 30%; }
.shot.crop img { max-height: 440px; object-fit: cover; object-position: center 22%; }
.shot .cap {
padding: 11px 16px; font-size: 12.5px; color: #7a7a84;
border-top: 1px solid #1a1a20; display: flex; align-items: center; gap: 7px;
}
.shot .cap .dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 6px #4ade80; }
/* ── Two big feature cards ───────────────── */
.feature-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 820px) { .feature-2 { grid-template-columns: 1fr; } }
.fbig { background: #101014; border: 1px solid #1e1e26; border-radius: 14px; padding: 26px; }
.fbig .ico { width: 44px; height: 44px; border-radius: 11px; margin-bottom: 16px;
display: flex; align-items: center; justify-content: center; font-size: 22px;
background: #14261b; border: 1px solid #1a5c33; }
.fbig h4 { margin: 0 0 8px; font-size: 18px; color: #fff; }
.fbig p { margin: 0 0 16px; font-size: 14px; color: #8a8a94; line-height: 1.6; }
.opt-row { display: flex; gap: 8px; flex-wrap: wrap; }
.opt { flex: 1; min-width: 130px; padding: 12px 14px; border-radius: 10px; background: #0d0d11; border: 1px solid #23232c; }
.opt .name { font-size: 13.5px; font-weight: 700; color: #e0e0e6; margin-bottom: 3px; }
.opt .desc { font-size: 12px; color: #7a7a84; line-height: 1.45; }
/* ── Final CTA ───────────────────────────── */
.cta-band {
text-align: center; padding: 60px 28px;
background: radial-gradient(600px 200px at 50% 0%, #14261b 0%, transparent 70%);
border-top: 1px solid #1a1a20;
}
.cta-band h3 { margin-bottom: 10px; }
.cta-band p { color: #9a9aa4; margin: 0 auto 26px; max-width: 480px; }
.cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.tg {
padding: 13px 24px; border-radius: 10px; font-weight: 700; font-size: 15px;
background: #1d6fa5; border: 1px solid #2b8fd0; color: #fff;
display: inline-flex; align-items: center; gap: 8px;
}
.tg:hover { background: #2380bd; text-decoration: none; }
.cta-ghost {
padding: 13px 24px; border-radius: 10px; font-weight: 700; font-size: 15px;
background: transparent; border: 1px solid #2a2a32; color: #e0e0e6; cursor: pointer;
}
.cta-ghost:hover { background: #16161c; }
footer { border-top: 1px solid #1a1a20; padding: 28px 0 44px; font-size: 12.5px; color: #55555e; }
footer a { color: #7a7a84; }
.donate-card {
max-width: 640px; margin: 0 auto; text-align: center;
background: #101014; border: 1px solid #1e2a20; border-radius: 18px;
padding: 34px 28px;
}
.donate-card .donate-emoji { font-size: 30px; margin-bottom: 6px; }
.donate-card h3 { margin: 0 0 10px; }
.donate-card p { color: #9a9aa4; font-size: 14.5px; margin: 0 auto 20px; max-width: 500px; }
.eth-row {
display: flex; align-items: stretch; gap: 8px; max-width: 480px; margin: 0 auto;
flex-wrap: wrap; justify-content: center;
}
.eth-row code {
flex: 1; min-width: 0; word-break: break-all; text-align: center;
background: #0a0a0c; border: 1px solid #1e2a20; border-radius: 10px;
padding: 12px 14px; font-size: 13px; color: #4ade80; font-family: ui-monospace, Menlo, monospace;
}
.eth-copy {
padding: 12px 20px; border-radius: 10px; font-weight: 700; font-size: 14px; cursor: pointer;
background: #14682e; border: 1px solid #1a7f4b; color: #eafff0; white-space: nowrap;
}
.eth-copy:hover { background: #178036; }
.eth-note { margin-top: 12px; font-size: 12px; color: #6a6a72; }
/* ── Results figures ─────────────────────── */
.statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 12px; max-width: 900px; margin: 0 auto 24px; }
.stat-c { background: #0d0d11; border: 1px solid #23232c; border-radius: 14px;
padding: 16px 14px; text-align: center; }
.stat-c .n { font-size: 26px; font-weight: 800; color: #fff; letter-spacing: -.02em;
font-variant-numeric: tabular-nums; }
.stat-c .l { font-size: 12px; color: #7a7a86; margin-top: 4px; }
.stat-c .n.green { color: #4ade80; }
/* ── Reviews ─────────────────────────────── */
.rev-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 18px; }
.rev { background: #0d0d11; border: 1px solid #23232c; border-radius: 16px;
overflow: hidden; display: flex; flex-direction: column; }
.rev blockquote { margin: 0; padding: 18px 18px 4px; font-size: 15.5px; line-height: 1.55;
color: #e6e6ec; }
.rev blockquote b { color: #4ade80; font-weight: 700; }
.rev .who { padding: 8px 18px 16px; font-size: 12px; color: #7a7a86; }
.rev img { width: 100%; height: auto; display: block; border-top: 1px solid #1a1a20; }
/* ── Pricing ─────────────────────────────── */
.price-card { max-width: 620px; margin: 0 auto; background: #0d0d11;
border: 1px solid #2f6b46; border-radius: 18px; padding: 26px; text-align: center; }
.price-big { font-size: 44px; font-weight: 800; color: #fff; letter-spacing: -.03em; }
.price-big small { font-size: 15px; font-weight: 600; color: #7a7a86; letter-spacing: 0; }
.price-list { list-style: none; padding: 0; margin: 18px 0 22px; text-align: left;
display: grid; gap: 8px; }
.price-list li { padding-left: 24px; position: relative; }
.price-list li::before { content: "✓"; position: absolute; left: 0; color: #4ade80; font-weight: 700; }
/* ── Affiliate + collab ──────────────────── */
.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 720px) { .two-up { grid-template-columns: 1fr; } }
.panel { background: #0d0d11; border: 1px solid #23232c; border-radius: 16px; padding: 22px; }
.panel h4 { margin: 10px 0 8px; color: #fff; font-size: 17px; }
.panel .ico { font-size: 26px; }
.discord { display: inline-block; margin-top: 14px; background: #5865F2; color: #fff;
padding: 10px 18px; border-radius: 10px; font-weight: 700; font-size: 14px; }
.discord:hover { text-decoration: none; filter: brightness(1.1); }
/* ── FAQ ─────────────────────────────────── */
.faq { max-width: 780px; margin: 0 auto; display: grid; gap: 10px; }
.faq details { background: #0d0d11; border: 1px solid #23232c; border-radius: 12px; padding: 14px 16px; }
.faq summary { cursor: pointer; font-weight: 700; color: #fff; font-size: 15px; }
.faq summary::marker { color: #4ade80; }
.faq p { margin: 10px 0 0; color: #b6b6c0; }
/* ── Article / guide pages ───────────────────────────────────────────────── */
.article-body{max-width:820px;margin:0 auto}
.article-body p{line-height:1.75}
.article-body h4{margin-top:0}
.lede{font-size:1.05rem;opacity:.92}
.crumb{max-width:820px;margin:0 auto 18px;font-size:.85rem;opacity:.6}
.crumb a{color:inherit}
.guide-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
max-width:1000px;margin:0 auto}
.callout{border-left:3px solid #2FBF71;padding:14px 18px;margin:22px 0;
background:rgba(47,191,113,.06);border-radius:0 10px 10px 0}
.callout p:last-child{margin-bottom:0}
/* ── Comparison tables (guide pages) ─────────────────────────────────────── */
.cmp-wrap{max-width:1000px;margin:0 auto;overflow-x:auto;border:1px solid #1e1e26;border-radius:12px;
-webkit-overflow-scrolling:touch}
.cmp{width:100%;min-width:680px;border-collapse:collapse;font-size:13.5px}
.cmp th,.cmp td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid #1e1e26}
.cmp thead th{background:#101014;color:#fff;font-weight:700}
.cmp tbody th{color:#fff;font-weight:700;white-space:nowrap}
.cmp td{color:#85858f;line-height:1.55}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp-note{max-width:1000px;margin:14px auto 0;font-size:13px;color:#7a7a86;text-align:center}
/* ── Side gutters on narrow screens ──────────────────────────────────────── */
/* Guide pages put their sections straight in with no .wrap, so on a phone the text
and cards touched the screen edge; every footer's inline padding:0 on .wrap did the same. */
.guide .band{padding-left:16px;padding-right:16px}
footer{padding-left:16px;padding-right:16px}
.guide .tile p + p{margin-top:12px} /* .tile p sets margin:0, so paragraphs in a card ran together */
/* ── Homepage heading levels (2026-09-26) ─────────────────────────────────── */
/* Section titles moved h3 -> h2 and the login/sign-up titles became plain text, so the
page outline reads h1 > sections instead of h1 > "Create your account". Same look. */
h2 { font-size: 27px; color: #fff; margin: 0 0 12px; letter-spacing: -.02em; }
@media (max-width: 900px) { h2 { font-size: 23px; } }
.proof-copy h2 { text-align: left; margin-bottom: 14px; }
.cta-band h2 { margin-bottom: 10px; }
.donate-card h2 { margin: 0 0 10px; }
.card .card-title { margin: 0 0 4px; font-size: 18px; line-height: normal; font-weight: 700; color: #fff; }
h1 .h1-sub { display: block; margin-top: 14px; font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; color: #b6b6c0; }
@media (max-width: 900px) { h1 .h1-sub { font-size: 17px; } }