:root {
  --bg: #050505;
  --panel: #0d0d0f;
  --panel-2: #141418;
  --line: #1f1f24;
  --line-2: #2a2a31;
  --text: #f3f4f6;
  --muted: #8b8f98;
  --accent: #3d7bff;
  --accent-2: #7aa5ff;
  --green: #22c55e;
  --red: #ef4444;
  --yellow: #facc15;
  --max: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.55; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
h1 { font-size: clamp(2.6rem, 7vw, 5.4rem); }
h1 span { color: var(--accent-2); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3 { font-size: 1.25rem; letter-spacing: -0.02em; }
.lead { color: var(--muted); font-size: 1.05rem; max-width: 56ch; }
.eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-2); }
.eyebrow::before { content: ""; display: inline-block; width: 18px; height: 1px; background: var(--accent-2); vertical-align: middle; margin-right: 10px; opacity: 0.7; }

/* brand mark: the CMY overlap logo as an SVG */
.mark { display: block; width: 26px; height: 26px; }
.mark-sm { width: 18px; height: 18px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.05rem; }

/* pills */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 24px; border-radius: 999px; border: 1px solid var(--line-2); font: inherit; font-weight: 600; font-size: 0.95rem; color: var(--text); background: var(--panel); cursor: pointer; white-space: nowrap; }
.pill:hover { background: var(--panel-2); border-color: #3a3a44; }
.pill i { font-style: normal; }
.pill-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.pill-accent:hover { background: #2f6cf0; border-color: #2f6cf0; }
.pill-dark { background: #0a0a0c; }

/* nav */
.nav { position: sticky; top: 0; z-index: 20; background: rgba(5,5,5,0.85); backdrop-filter: blur(10px); }
.nav-row { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; }
.nav-links { display: flex; gap: 8px; }
.nav-links .pill, .nav-cta { padding: 10px 18px; font-size: 0.9rem; }
.nav-right { display: flex; align-items: center; gap: 8px; }
.nav-tag { color: var(--muted); font-size: 0.85rem; font-weight: 500; margin-left: -4px; margin-right: auto; }
.pill-dc { padding: 9px 14px; gap: 8px; border-color: rgba(34,197,94,0.45); background: rgba(34,197,94,0.07); color: var(--text); font-size: 0.875rem; }
.pill-dc:hover { border-color: var(--green); background: rgba(34,197,94,0.14); }
.pill-dc svg { color: #cfe9d8; }
.nav-row > .nav-right { opacity: 0; animation: fade 0.6s ease-out forwards; animation-delay: calc(0.2s + var(--intro-offset, 0s)); }

/* hero */
.hero { padding: 120px 0 110px; text-align: center; }
.hero-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(34,197,94,0.35); background: rgba(34,197,94,0.08); color: var(--green); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.badge b { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.hero .eyebrow { margin-top: -6px; }
.hero h1 { max-width: 14ch; }
.cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
.dots { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 0.85rem; color: var(--muted); font-weight: 500; }
.dots li::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); margin-right: 9px; vertical-align: 2px; }
.dots-center { justify-content: center; margin-top: 26px; }

.price-pill { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; border: 1px solid rgba(122,165,255,0.45); background: var(--panel); font-size: 0.8rem; font-weight: 600; color: #d7dbe3; letter-spacing: 0.04em; text-transform: uppercase; margin-top: 6px; transition: border-color 0.2s ease, transform 0.2s ease; }
.price-pill b { color: var(--accent-2); font-size: 0.95rem; letter-spacing: 0; }
.price-pill .pp-sep { color: var(--muted); }
.price-pill .pp-note { color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 500; }
.price-pill i { font-style: normal; color: var(--text); transition: transform 0.2s ease; }
.price-pill:hover { border-color: var(--accent-2); transform: translateY(-2px); }
.price-pill:hover i { transform: translateX(4px); }

/* split sections */
.split { padding: 80px 0; }
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split-rev .split-grid { align-items: start; }
.split-copy { display: flex; flex-direction: column; gap: 18px; }
.split-copy h2 { margin-top: -6px; }
.checks { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 14px; }
.checks li { position: relative; padding-left: 30px; }
.checks li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: rgba(34,197,94,0.14); color: var(--green); font-size: 0.72rem; font-weight: 700; }
.checks b { display: block; font-weight: 600; }
.checks span { display: block; color: var(--muted); font-size: 0.925rem; }
.checks-sm { gap: 10px; font-size: 0.925rem; color: #c6c9d0; }
.from-row { display: flex; align-items: center; gap: 22px; margin-top: 8px; }
.from { color: var(--muted); font-size: 0.9rem; }
.from b { color: var(--text); font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em; margin-left: 4px; }

/* comparison: two real frames, nothing to adjust */
.compare { position: relative; aspect-ratio: 602 / 269; overflow: hidden; border-radius: 14px; border: 1px solid var(--line-2); background: #000; }
.compare-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare-after { position: absolute; top: 0; bottom: 0; right: 0; width: 50%; overflow: hidden; }
.compare-after .compare-img { width: auto; height: 100%; left: auto; right: 0; }
.compare-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: #fff; pointer-events: none; }
.compare-handle span { position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: #fff; color: #111; display: grid; place-items: center; font-size: 16px; font-weight: 700; box-shadow: 0 2px 12px rgba(0,0,0,0.6); }
.compare-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.compare-tag { position: absolute; top: 12px; padding: 5px 10px; border-radius: 999px; background: rgba(0,0,0,0.7); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; pointer-events: none; }
.compare-tag-l { left: 12px; }
.compare-tag-r { right: 12px; background: var(--accent); color: #fff; }

/* the app recreation: fixed logical size, scaled to fit its column */
.app-scale { position: relative; width: 100%; aspect-ratio: 760 / 486; }
.app { position: absolute; top: 0; left: 0; width: 760px; height: 486px; transform-origin: top left; background: #0d121b; border: 1px solid #2c3647; border-radius: 12px; box-shadow: 0 30px 60px rgba(0,0,0,0.6); font-size: 11.5px; color: #e8edf4; overflow: hidden; display: flex; flex-direction: column; user-select: none; }
.app-title { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border-bottom: 1px solid #222b3a; }
.app-name { font-weight: 600; font-size: 12.5px; }
.app-chip { padding: 3px 9px; border-radius: 4px; font-weight: 600; font-size: 10.5px; }
.app-chip-blue { background: #2f7df6; color: #fff; }
.app-title-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.app-status { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 4px; background: rgba(34,197,94,0.14); color: var(--green); font-weight: 600; font-size: 10.5px; }
.app-status b, .app-help-t b, .app-foot-msg b { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.app-lic { padding: 3px 8px; border-radius: 4px; background: #161d2a; color: #8d97a8; font-weight: 700; font-size: 10px; letter-spacing: 0.05em; margin-right: 10px; }
.app-win { color: #8d97a8; font-size: 11px; padding: 0 4px; }
.app-body { display: grid; grid-template-columns: 150px 1fr 170px; gap: 12px; padding: 12px 14px; flex: 1; }
.app-h { margin: 4px 0 8px; font-size: 10px; color: #8d97a8; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.app-prof { display: flex; align-items: center; gap: 8px; padding: 9px 10px; margin-bottom: 6px; border: 1px solid #222b3a; border-radius: 6px; background: #111722; font-weight: 500; }
.app-prof.is-on { background: #2f7df6; border-color: #2f7df6; color: #fff; }
.app-ico { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; background: #161d2a; font-size: 10px; }
.app-prof.is-on .app-ico { background: rgba(255,255,255,0.22); }
.app-ico-cold { color: #7cc4ff; } .app-ico-warm { color: var(--yellow); } .app-ico-night { color: #9ad67c; }
.app-dot { margin-left: auto; width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,0.22); }
.app-empty { padding: 14px 10px; border: 1px dashed #2c3647; border-radius: 6px; color: #8d97a8; text-align: center; font-size: 11px; }
.app-empty small { display: block; font-size: 10px; margin-top: 3px; opacity: 0.8; }
.app-card { background: #111722; border: 1px solid #222b3a; border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; }
.app-card-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 10px; }
.app-card-head small { display: block; font-size: 9.5px; color: #8d97a8; }
.app-card-head > span:first-child { font-weight: 600; font-size: 13px; }
.app-reset { color: #8d97a8; font-size: 10.5px; background: transparent; border: 0; padding: 0; }
.app-row { display: grid; grid-template-columns: 70px 1fr 22px 44px; align-items: center; gap: 10px; padding: 6px 0; }
.app-track { position: relative; height: 3px; border-radius: 2px; background: #2c3647; }
.app-track::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--fill, 50%); background: #2f7df6; border-radius: 2px; }
.app-track-green::before { background: var(--green); }
.app-track-rainbow { background: linear-gradient(90deg, #e53e3e, #f6ad55, #68d391, #4299e1, #9f7aea); }
.app-track-rainbow::before { display: none; }
.app-track i { position: absolute; top: 50%; left: var(--pos, 50%); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.app-track { cursor: ew-resize; touch-action: none; }
.app-track::after { content: ""; position: absolute; left: 0; right: 0; top: -10px; bottom: -10px; }
.app button { font: inherit; color: inherit; cursor: pointer; }
.app-prof { width: 100%; text-align: left; }
.app-reset:hover, .app-ic:hover { color: #e8edf4; }
.app-ic { color: #8d97a8; text-align: center; border: 1px solid #222b3a; border-radius: 4px; height: 20px; line-height: 18px; font-size: 11px; background: transparent; padding: 0; }
.app-val { text-align: center; border: 1px solid #222b3a; border-radius: 4px; height: 22px; line-height: 20px; font-variant-numeric: tabular-nums; background: #0e131c; }
.app-right { display: flex; flex-direction: column; gap: 8px; }
.app-help { margin-bottom: 4px; }
.app-help-t { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12.5px; margin-bottom: 8px; }
.app-check { color: #8d97a8; font-size: 10.5px; margin-bottom: 4px; }
.app-check::before { content: "✓"; color: var(--green); margin-right: 6px; }
.app-btn { display: block; text-align: center; padding: 8px 10px; border: 1px solid #2c3647; border-radius: 6px; font-weight: 600; background: #111722; }
.app-btn-blue { background: #2f7df6; border-color: #2f7df6; color: #fff; margin-top: 8px; }
.app-foot { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 14px; border-top: 1px solid #222b3a; color: #8d97a8; font-size: 10.5px; }
.app-foot-msg { display: inline-flex; align-items: center; gap: 6px; }
.app-foot-msg strong { color: #e8edf4; }
.app-foot-right { display: flex; align-items: center; gap: 10px; color: #e8edf4; }
.app-foot-right .app-btn { padding: 6px 12px; }
.app-foot-right .app-btn-blue { margin: 0; }
.app-toggle { width: 30px; height: 16px; border-radius: 8px; background: #2c3647; position: relative; border: 0; padding: 0; }
.app-toggle.is-on { background: #2f7df6; }
.app-toggle i { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.app-toggle.is-on i { left: 16px; }
.app-foot-right .app-btn { font: inherit; }

/* live preview under the menu */
.demo-col { display: flex; flex-direction: column; gap: 14px; }
.live { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-2); background: #000; }
.live img { width: 100%; }
.live .compare-tag { right: 12px; background: var(--accent); color: #fff; }
.try { color: var(--text); font-size: 0.95rem; font-weight: 500; padding: 12px 16px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel); }

/* stats */
.stats { padding: 80px 0 60px; }
.stats-head { margin-bottom: 28px; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats-grid > div { padding: 28px 24px; border-right: 1px solid var(--line); }
.stats-grid > div:last-child { border-right: 0; }
.stats-grid b { display: block; font-size: 2.2rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; margin-bottom: 8px; }
.stats-grid span { color: var(--muted); font-size: 0.9rem; }

/* centered section heads */
.center-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 44px; }
.center-head .lead { max-width: 52ch; }

/* features */
.features { padding: 90px 0; }
.feat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.feat-grid article { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 26px 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.feat-grid .num { position: absolute; top: 20px; right: 20px; font-size: 0.8rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.feat-grid article p:last-child { color: var(--muted); font-size: 0.925rem; }

/* pricing */
.pricing { padding: 90px 0; }
.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 820px; margin: 0 auto; }
.price { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 30px 28px 28px; display: flex; flex-direction: column; gap: 14px; }
.price-best { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.price h3 { font-size: 1.6rem; }
.amt { font-size: 2.8rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.amt small { font-size: 0.9rem; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-left: 8px; }
.price .pill { margin-top: 6px; width: 100%; }
.pay-note { text-align: center; color: var(--muted); font-size: 0.925rem; margin-top: 18px; }
.pay-note a { color: var(--accent-2); font-weight: 600; border-bottom: 1px solid rgba(122,165,255,0.4); }

/* resellers */
.resellers { padding: 90px 0; }
.reseller-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 820px; margin: 0 auto; }
.reseller { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; gap: 6px; }
.reseller:hover { border-color: var(--line-2); background: var(--panel-2); }
.reseller b { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
.reseller .host { color: var(--muted); font-size: 0.875rem; }
.reseller p { color: var(--muted); font-size: 0.925rem; margin: 10px 0 14px; }
.reseller .link { color: var(--accent-2); font-weight: 600; font-size: 0.9rem; }
.verified { position: absolute; top: 24px; right: 24px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); border: 1px solid rgba(34,197,94,0.4); background: rgba(34,197,94,0.08); border-radius: 999px; padding: 5px 10px; }

/* final cta */
.final { padding: 100px 0 110px; border-top: 1px solid var(--line); }
.final .center-head { margin-bottom: 0; }
.final .pill { margin-top: 6px; }

/* footer */
.foot { border-top: 1px solid var(--line); padding: 48px 0 32px; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 32px; }
.foot-brand { display: flex; flex-direction: column; gap: 14px; }
.foot-brand p { color: var(--muted); font-size: 0.9rem; max-width: 34ch; }
.foot-grid > div:not(.foot-brand) { display: flex; flex-direction: column; gap: 10px; font-size: 0.925rem; }
.foot-grid > div:not(.foot-brand) a { color: #c6c9d0; }
.foot-grid > div:not(.foot-brand) a:hover { color: var(--text); }
.foot-grid .eyebrow::before { display: none; }
.foot-legal { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); text-align: center; color: var(--muted); font-size: 0.8rem; }

@media (max-width: 980px) {
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: inline-flex; }
  .hero { padding: 80px 0 70px; }
  .nav-tag { display: none; }
  .price-pill { flex-wrap: wrap; justify-content: center; }
  .price-pill .pp-note { display: none; }
  .split { padding: 56px 0; }
  .split-grid { grid-template-columns: 1fr; gap: 32px; }
  .split-rev .split-copy { order: 2; }
  .stats-grid { grid-template-columns: 1fr; }
  .stats-grid > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .stats-grid > div:last-child { border-bottom: 0; }
  .feat-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .feat-grid, .price-grid, .reseller-grid, .foot-grid { grid-template-columns: 1fr; }
  .cta-row .pill { width: 100%; }
  .from-row { flex-wrap: wrap; }
  .nav-row { height: 64px; }
}

/* ---- motion ------------------------------------------------------------ */
/* Hero: staggered rise on load */
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.hero-inner > * { opacity: 0; animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; animation-delay: calc(var(--d, 0s) + var(--intro-offset, 0s)); }
.hero-inner > :nth-child(1) { --d: 0.05s; }
.hero-inner > :nth-child(2) { --d: 0.15s; }
.hero-inner > :nth-child(3) { --d: 0.25s; }
.hero-inner > :nth-child(4) { --d: 0.45s; }
.hero-inner > :nth-child(5) { --d: 0.6s; }
html[data-intro] { --intro-offset: 0.8s; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.nav-row > .brand { opacity: 0; animation: fade 0.6s ease-out forwards; animation-delay: calc(var(--d, 0s) + var(--intro-offset, 0s)); }
.nav-row > .nav-cta { --d: 0.2s; }
.badge b { animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Scroll reveal: elements get .reveal from the script, .in when they enter view */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--i, 0) * 90ms); }
.reveal.in { opacity: 1; transform: none; }

/* Hover: pills, cards */
.pill { transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; }
.pill:hover { transform: translateY(-2px); }
.pill-accent:hover { box-shadow: 0 10px 30px rgba(61,123,255,0.35); }
.pill i { transition: transform 0.18s ease; }
.pill:hover i { transform: translateX(4px); }
.feat-grid article, .price, .reseller { transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
.feat-grid article:hover, .reseller:hover { transform: translateY(-4px); border-color: var(--line-2); }
.price:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
.price-best:hover { box-shadow: 0 20px 50px rgba(61,123,255,0.18), 0 0 0 1px var(--accent) inset; }

/* Comparison handle: breathe until the first drag */
.compare-handle span { transition: transform 0.2s ease; }
.compare:not(.touched) .compare-handle span { animation: breathe 1.8s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { box-shadow: 0 2px 12px rgba(0,0,0,0.6), 0 0 0 0 rgba(255,255,255,0.35); } 50% { box-shadow: 0 2px 12px rgba(0,0,0,0.6), 0 0 0 12px rgba(255,255,255,0); } }
.compare:hover .compare-handle span { transform: scale(1.08); }

/* Menu: knobs glide when a profile is picked, not while dragging */
.app.glide .app-track i { transition: left 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
.app.glide .app-track::before { transition: width 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
.app-prof { transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease; }
.app-prof:hover:not(.is-on) { background: #161d2a; border-color: #2c3647; }
.app-prof:active { transform: scale(0.98); }
.app-toggle, .app-toggle i { transition: background 0.2s ease, left 0.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
.live img { transition: filter 0.25s ease; }
.live .compare-tag { transition: opacity 0.2s ease; }
.live .compare-tag.swap { opacity: 0; }

/* Stats: numbers pop */
.stats-grid b { display: block; transform-origin: left center; }
.stats-grid > div.in b { animation: pop 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes pop { from { transform: scale(0.7); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- entry overlay ------------------------------------------------------ */
.intro { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; background: var(--bg); }
html[data-intro] .intro { display: flex; animation: intro-out 0.25s cubic-bezier(0.2, 0, 1, 0.9) 0.85s both; }
.intro-mark { position: relative; width: clamp(6.5rem, 9vw, 8.5rem); aspect-ratio: 1; isolation: isolate; }
.intro-mask { position: absolute; display: block; overflow: hidden; mix-blend-mode: multiply; }
.intro-piece, .intro-piece svg { display: block; width: 100%; height: 100%; }
.intro-cyan    { left: 26.3%; top: 8.3%;  width: 53.4%; height: 53.4%; }
.intro-magenta { left: 8.7%;  top: 30.7%; width: 52.6%; height: 52.6%; }
.intro-yellow  { left: 34.5%; top: 34.5%; width: 57%;   height: 57%; }
html[data-intro] .intro-mask[data-reveal], html[data-intro] .intro-mask[data-reveal] > .intro-piece { animation-duration: 0.32s; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); animation-fill-mode: both; }
html[data-intro] .intro-magenta, html[data-intro] .intro-magenta > .intro-piece { animation-delay: 0.09s; }
html[data-intro] .intro-yellow,  html[data-intro] .intro-yellow  > .intro-piece { animation-delay: 0.18s; }
html[data-intro] .intro-mask[data-reveal=down] { animation-name: mask-down; }
html[data-intro] .intro-mask[data-reveal=down] > .intro-piece { animation-name: piece-down; }
html[data-intro] .intro-mask[data-reveal=across] { animation-name: mask-across; }
html[data-intro] .intro-mask[data-reveal=across] > .intro-piece { animation-name: piece-across; }
html[data-intro] .intro-mask[data-reveal=up] { animation-name: mask-up; }
html[data-intro] .intro-mask[data-reveal=up] > .intro-piece { animation-name: piece-up; }
@keyframes mask-down { 0% { transform: translateY(-100%); } }
@keyframes piece-down { 0% { transform: translateY(100%); } }
@keyframes mask-across { 0% { transform: translateX(-100%); } }
@keyframes piece-across { 0% { transform: translateX(100%); } }
@keyframes mask-up { 0% { transform: translateY(100%); } }
@keyframes piece-up { 0% { transform: translateY(-100%); } }
@keyframes intro-out { to { opacity: 0; visibility: hidden; } }

/* ---- legal pages -------------------------------------------------------- */
.legal { padding: 70px 0 100px; }
.legal-wrap { max-width: 760px; }
.legal h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin: 10px 0 8px; }
.legal-meta { color: var(--muted); font-size: 0.875rem; margin-bottom: 36px; }
.legal h2 { font-size: 1.2rem; margin: 36px 0 10px; letter-spacing: -0.02em; }
.legal p, .legal li { color: #c6c9d0; line-height: 1.65; }
.legal p + p { margin-top: 12px; }
.legal ul { padding-left: 22px; margin: 10px 0; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--accent-2); border-bottom: 1px solid rgba(122,165,255,0.4); }
.legal-callout { padding: 18px 20px; border: 1px solid rgba(239,68,68,0.4); background: rgba(239,68,68,0.08); border-radius: 12px; color: var(--text) !important; font-weight: 600; margin-bottom: 8px; }

/* ---- nav extras ---------------------------------------------------------- */
.nav-links .pill.is-active { background: var(--panel-2); border-color: #3a3a44; color: #fff; }
.nav-burger { display: none; width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--line-2); background: #0a0a0c; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0; }
.nav-burger span { display: block; width: 18px; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-mobile { display: none; flex-direction: column; gap: 6px; padding: 8px 24px 20px; border-top: 1px solid var(--line); background: rgba(5,5,5,0.97); }
.nav-mobile:not([hidden]) { display: flex; animation: rise 0.25s ease-out both; }
.nav-mobile a { padding: 14px 6px; font-weight: 600; font-size: 1.05rem; border-bottom: 1px solid var(--line); }
.nav-mobile a.pill { border-bottom: 1px solid var(--accent); margin-top: 12px; }
.dc-count { font-size: 0.8rem; font-weight: 700; color: var(--green); white-space: nowrap; padding-left: 8px; border-left: 1px solid rgba(34,197,94,0.35); }
.dc-count::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); margin-right: 6px; vertical-align: 1px; }
.dc-count[hidden] { display: none; }
.build-status { display: block; margin-bottom: 8px; color: #c6c9d0; }
.build-status::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); margin-right: 8px; vertical-align: 1px; }
.build-status[hidden] { display: none; }

/* ---- faq ----------------------------------------------------------------- */
.faq { padding: 90px 0; }
.faq-list { max-width: 760px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-weight: 600; font-size: 1.05rem; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--muted); font-weight: 400; flex: none; transition: transform 0.2s ease, background 0.2s ease; }
.faq-list details[open] summary::after { transform: rotate(45deg); background: var(--panel-2); color: var(--text); }
.faq-list details p { padding: 0 44px 22px 0; color: var(--muted); line-height: 1.6; max-width: 64ch; }
.faq-list details p a { color: var(--accent-2); border-bottom: 1px solid rgba(122,165,255,0.4); }
@media (max-width: 980px) { .nav-right .nav-burger { display: inline-flex; } }
@media (max-width: 600px) {
  .pill-dc { padding: 9px 12px; }
  .pill-dc .dc-label { display: none; }
  .dc-count { padding-left: 0; border-left: 0; }
}

/* =====================================================================
   Atmosphere + stage hero
   ===================================================================== */
#haze { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; filter: blur(40px); transform: scale(1.15); opacity: 0.9; }
body { position: relative; }
main, .foot { position: relative; z-index: 1; }
.nav { position: sticky; z-index: 20; }

.hero { padding: 96px 0 40px; }
.hero-inner { gap: 20px; }
.hero h1 { max-width: 13ch; }
.hero-sub { color: #b9c0cc; font-size: 1.1rem; max-width: 50ch; text-align: center; }
.social { display: inline-flex; align-items: center; gap: 10px; margin-top: 4px; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(34,197,94,0.35); background: rgba(34,197,94,0.07); color: #d7dbe3; font-size: 0.9rem; font-weight: 500; transition: border-color 0.2s ease, background 0.2s ease; }
.social svg { color: var(--green); }
.social b { font-weight: 700; color: var(--text); }
.social i { font-style: normal; color: var(--green); }
.social:hover { border-color: var(--green); background: rgba(34,197,94,0.14); }

/* the stage: live frame behind, the menu floating over it in perspective */
.stage { position: relative; width: 100%; max-width: 1060px; margin: 36px auto 0; perspective: 1800px; }
.stage .live { border-radius: 18px; box-shadow: 0 40px 120px rgba(0,0,0,0.6); }
.stage .live img { filter: url(#f-live); }
.stage .live::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, rgba(5,5,5,0.55)); pointer-events: none; }
.stage .live .compare-tag { top: 14px; right: 14px; }
.tilt { position: relative; z-index: 2; width: 760px; margin: -44px auto 0; transform-style: preserve-3d; animation: float 6s ease-in-out infinite alternate; }
.tilt .app-scale { transform: rotateX(10deg) rotateY(-12deg) rotateZ(1deg); transform-origin: 50% 50%; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.stage:hover .tilt { animation-play-state: paused; }
.stage:hover .tilt .app-scale { transform: none; }
.tilt .app { box-shadow: 0 50px 120px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.04); }
@keyframes float { from { transform: translateY(0); } to { transform: translateY(-14px); } }
.stage-hint { margin-top: 26px; text-align: center; color: var(--muted); font-size: 0.85rem; }

/* profiles row */
.profiles-row { padding: 80px 0; }
.profiles-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.profiles-grid h2 { margin: 10px 0 14px; }
.profiles-grid .checks { margin-top: 4px; }

/* cards get a faint top light like Skript's panels */
.feat-grid article, .price, .reseller, .demo-panel { background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0)) , var(--panel); }
.feat-grid article { border-radius: 18px; }

@media (max-width: 1100px) {
  .tilt { width: 640px; }
}
@media (max-width: 980px) {
  .hero { padding: 64px 0 24px; }
  .stage { perspective: none; }
  .tilt { width: 100%; margin: 14px 0 0; animation: none; }
  .tilt .app-scale { transform: none; }
  .stage-hint { margin-top: 12px; }
  .profiles-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ---- status line ---------------------------------------------------------- */
.status-bar { position: relative; z-index: 21; background: rgba(34,197,94,0.07); border-bottom: 1px solid rgba(34,197,94,0.18); font-size: 0.8rem; color: #c9d4cc; }
.status-row { display: flex; align-items: center; justify-content: center; gap: 10px; height: 34px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(34,197,94,0.18); animation: blink 1.6s ease-in-out infinite; }
.status-sep { color: rgba(201,212,204,0.4); }
.status-link { color: var(--green); font-weight: 600; margin-left: 6px; }
#status-build[hidden] { display: none; }
#status-build[hidden] + .status-link { margin-left: 0; }
.status-bar .status-sep:has(+ #status-build[hidden]) { display: none; }

/* ---- how it works --------------------------------------------------------- */
.how { padding: 90px 0 40px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: step; }
.steps li { position: relative; background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0)), var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 28px 24px 26px; display: flex; flex-direction: column; gap: 10px; }
.steps li::after { content: "→"; position: absolute; right: -16px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--text); font-size: 1rem; line-height: 1; z-index: 1; }
.steps li:last-child::after { display: none; }
.step-num { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; color: var(--accent-2); }
.steps h3 { font-size: 1.2rem; }
.steps p { color: var(--muted); font-size: 0.95rem; }
.steps a { color: var(--accent-2); border-bottom: 1px solid rgba(122,165,255,0.4); }

/* ---- comparison table ------------------------------------------------------ */
.compare-sec { padding: 60px 0 40px; }
.cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.cmp { width: 100%; border-collapse: collapse; min-width: 640px; }
.cmp th, .cmp td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line); font-size: 0.95rem; vertical-align: top; }
.cmp th { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 700; background: rgba(255,255,255,0.02); }
.cmp tbody tr:last-child td { border-bottom: 0; }
.cmp td:first-child { color: var(--text); font-weight: 600; width: 32%; }
.cmp td { color: var(--muted); }
.cmp .cmp-cw { background: rgba(61,123,255,0.07); }
.cmp th.cmp-cw { color: var(--accent-2); }
.cmp .yes, .cmp .no, .cmp .part { display: inline-flex; align-items: center; gap: 8px; }
.cmp .yes::before, .cmp .no::before, .cmp .part::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.cmp .yes { color: var(--text); } .cmp .yes::before { background: var(--green); }
.cmp .no::before { background: var(--red); }
.cmp .part::before { background: var(--yellow); }

/* ---- mobile buy bar -------------------------------------------------------- */
.buybar { display: none; }
@media (max-width: 600px) {
  .buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(5,5,5,0.92); backdrop-filter: blur(10px); border-top: 1px solid var(--line-2); transform: translateY(0); transition: transform 0.25s ease; }
  .buybar[hidden] { display: flex; transform: translateY(110%); }
  .buybar-price { font-size: 0.85rem; color: var(--muted); }
  .buybar-price b { color: var(--text); }
  .buybar .pill { padding: 11px 18px; font-size: 0.9rem; }
  body { padding-bottom: 72px; }
  .steps { grid-template-columns: 1fr; }
  .steps li::after { right: auto; left: 50%; top: auto; bottom: -22px; transform: translateX(-50%) rotate(90deg); }
  .status-row { font-size: 0.72rem; gap: 8px; }
  .status-bar .status-link { display: none; }
}
@media (max-width: 980px) and (min-width: 601px) {
  .steps { grid-template-columns: 1fr; }
  .steps li::after { display: none; }
}

/* ---- pricing nudge + payment marks ----------------------------------------- */
.nudge { color: var(--muted); font-size: 0.875rem; margin-top: -4px; }
.nudge-good { color: #b7e4c7; }
.save { display: inline-block; vertical-align: middle; margin-left: 10px; padding: 4px 9px; border-radius: 999px; background: rgba(34,197,94,0.14); color: var(--green); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.pay { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 26px; color: #c6c9d0; font-size: 0.9rem; font-weight: 500; }
.pay li { display: inline-flex; align-items: center; gap: 9px; }
.pay-ico { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 800; font-size: 0.9rem; color: #fff; }
.pay-pp { background: #0d3b8f; font-style: italic; font-family: Georgia, serif; }
.pay-btc { background: #f7931a; }
.pay-ltc { background: #345d9d; }
.pay-sol { background: #111; display: inline-flex; flex-direction: column; justify-content: center; gap: 2px; padding: 0 6px; }
.pay-sol i { display: block; height: 3px; border-radius: 1px; background: linear-gradient(90deg, #9945ff, #14f195); }
.pay-sol i:nth-child(2) { transform: translateX(-2px); }
.pay-note { color: var(--muted); font-weight: 400; }
.pay-note::before { content: "·"; margin-right: 12px; color: var(--line-2); }

/* ---- Discord members ------------------------------------------------------ */
.dc-widget { margin-top: 36px; width: 100%; max-width: 560px; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px 22px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.dc-widget[hidden] { display: none; }
.dc-widget-head { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 0.9rem; }
.dc-widget-head b { color: var(--text); }
.dc-members { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.dc-members li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); font-size: 0.85rem; }
.dc-members img { width: 24px; height: 24px; border-radius: 50%; }
.dc-members i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.dc-members i.idle { background: var(--yellow); } .dc-members i.dnd { background: var(--red); }

/* ---- loader mini-demo ------------------------------------------------------ */
.loader-demo { margin-top: 8px; padding: 14px; border-radius: 12px; background: #0a1119; border: 1px solid #1e2a3b; display: flex; flex-direction: column; gap: 10px; }
.ld-input { height: 38px; border-radius: 8px; background: #121c28; border: 1px solid #1e2a3b; display: flex; align-items: center; justify-content: center; font-family: ui-monospace, Consolas, monospace; font-size: 0.85rem; letter-spacing: 0.14em; color: #e7ecf5; }
.ld-input.ok { border-color: #22c55e; }
.ld-caret { width: 1px; height: 16px; background: #8395ac; margin-left: 2px; animation: blink 1s steps(2) infinite; }
.ld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ld-btn { height: 34px; border-radius: 8px; display: grid; place-items: center; font-size: 0.8rem; font-weight: 600; background: #121c28; border: 1px solid #1e2a3b; color: #e7ecf5; transition: background 0.3s ease, color 0.3s ease, opacity 0.3s ease; }
.ld-btn.done { background: rgba(34,197,94,0.15); border-color: rgba(34,197,94,0.5); color: #22c55e; }
.ld-btn-dl { opacity: 0.45; }
.ld-btn-dl.ready { opacity: 1; background: #3b82f6; border-color: #3b82f6; color: #fff; }

/* ---- profile thumbnails ---------------------------------------------------- */
.thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 44px; }
.thumb { position: relative; padding: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #000; cursor: pointer; font: inherit; color: var(--text); transition: transform 0.25s ease, border-color 0.25s ease; }
.thumb:hover { transform: translateY(-4px); border-color: var(--accent); }
.thumb.is-on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.thumb img { display: block; width: 100%; aspect-ratio: 602 / 269; object-fit: cover; }
.thumb span { position: absolute; left: 10px; bottom: 10px; padding: 5px 10px; border-radius: 999px; background: rgba(5,5,5,0.75); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.thumbs-note { text-align: center; color: var(--muted); font-size: 0.85rem; margin-top: 14px; }

/* ---- parallax on the stage ------------------------------------------------- */
.tilt .app-scale { transform: rotateX(var(--rx, 10deg)) rotateY(var(--ry, -12deg)) rotateZ(1deg); }
.stage:hover .tilt .app-scale { transform: rotateX(var(--rx, 10deg)) rotateY(var(--ry, -12deg)) rotateZ(1deg); }
.tilt:hover .app-scale, .tilt.active .app-scale { transform: none !important; }
.stage:hover .tilt { animation-play-state: running; }
.tilt:hover { animation-play-state: paused; }

@media (max-width: 980px) { .thumbs { grid-template-columns: 1fr 1fr; } .tilt .app-scale { transform: none !important; } }
@media (max-width: 600px) { .pay { gap: 10px 16px; } .pay-note { flex-basis: 100%; justify-content: center; } .pay-note::before { display: none; } }

/* ---- wide sub-page (reseller program) ------------------------------------- */
.page { padding: 70px 0 100px; }
.page h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin: 10px 0 18px; max-width: 16ch; }
.page-lead { font-size: 1.15rem; max-width: 60ch; }
.page-cta { margin: 26px 0 56px; justify-content: flex-start; }
.page-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 40px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.page-grid .checks { margin-top: 16px; gap: 18px; }
.page-steps-head { margin: 64px 0 28px; }
.page-apply { margin-top: 72px; padding: 40px; border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0)), var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.page-apply h2 { margin-top: 2px; }
.reseller-cta { text-align: center; color: var(--muted); margin-top: 22px; font-size: 0.95rem; }
.reseller-cta a { color: var(--accent-2); font-weight: 600; border-bottom: 1px solid rgba(122,165,255,0.4); }
@media (max-width: 980px) { .page-grid { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 600px) { .page-cta .pill { width: 100%; } .page-apply { padding: 26px 22px; } }

/* reseller plans */
.plans-head { margin: 8px 0 28px; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 56px; }
.plan { background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0)), var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.plan h3 { font-size: 1.5rem; }
.plan-sub { color: var(--muted); }
@media (max-width: 980px) { .plans { grid-template-columns: 1fr; } }

.pay-logo { width: 26px; height: 26px; object-fit: contain; display: block; }

.plans { grid-template-columns: repeat(3, 1fr); }
.plan-brand { position: relative; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset, 0 30px 80px rgba(61,123,255,0.12); }
.plan-brand::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 18px 18px 0 0; background: linear-gradient(90deg, #00B5E8 0 33%, #EC0A8D 33% 66%, #FFE800 66% 100%); }
.plan-flag { position: absolute; top: 22px; right: 22px; padding: 5px 10px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
@media (max-width: 1100px) { .plans { grid-template-columns: 1fr 1fr; } .plan-brand { grid-column: 1 / -1; } }
@media (max-width: 700px) { .plans { grid-template-columns: 1fr; } }
.pay li { line-height: 26px; }
.plan-brand { overflow: hidden; } .plan-brand::before { border-radius: 0; }
.plan-brand::before { display: none; }

/* ---- safety band ---------------------------------------------------------- */
.safe { padding: 20px 0 10px; }
.safe-card { border: 1px solid rgba(34,197,94,0.35); background: linear-gradient(180deg, rgba(34,197,94,0.08), rgba(34,197,94,0.02)); border-radius: 20px; padding: 34px 34px 30px; }
.safe-head { display: flex; gap: 22px; align-items: flex-start; }
.safe-shield { flex: none; width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; background: rgba(34,197,94,0.15); color: var(--green); }
.safe-head .eyebrow { color: var(--green); }
.safe-head .eyebrow::before { background: var(--green); }
.safe-head h2 { margin: 8px 0 12px; }
.safe-grid { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.safe-grid li { background: rgba(5,5,5,0.45); border: 1px solid rgba(34,197,94,0.2); border-radius: 14px; padding: 16px 18px; }
.safe-grid b { display: flex; align-items: center; gap: 8px; font-size: 1rem; }
.safe-grid b::before { content: "✓"; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: rgba(34,197,94,0.18); color: var(--green); font-size: 0.72rem; }
.safe-grid span { display: block; color: var(--muted); font-size: 0.9rem; margin-top: 6px; }
@media (max-width: 980px) { .safe-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .safe-head { flex-direction: column; gap: 14px; } .safe-card { padding: 24px 20px; } .safe-grid { grid-template-columns: 1fr; } }

/* ---- vouches -------------------------------------------------------------- */
.vouches { padding: 90px 0 40px; }
.vouch-grid { columns: 4 240px; column-gap: 14px; }
.vouch { break-inside: avoid; margin: 0 0 14px; padding: 20px 20px 16px; border-radius: 16px; border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0)), var(--panel); }
.vouch blockquote { margin: 0 0 14px; font-size: 1.02rem; line-height: 1.5; color: var(--text); }
.vouch figcaption { display: flex; align-items: center; gap: 10px; font-size: 0.875rem; }
.vouch figcaption b { font-weight: 600; }
.vouch time { margin-left: auto; color: var(--muted); font-size: 0.8rem; }
.vouch-av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 0.8rem;
  background: rgba(61,123,255,0.18); color: var(--accent-2); }
.vouch-note { text-align: center; color: var(--muted); margin-top: 14px; font-size: 0.925rem; }
.vouch-note a { color: var(--accent-2); font-weight: 600; border-bottom: 1px solid rgba(122,165,255,0.4); }

.vouch-more { display: none; }
.vouches.collapsed .vouch:nth-child(n+13) { display: none; }
.vouch-toggle { display: flex; justify-content: center; margin-top: 6px; }
.vouch time { white-space: nowrap; flex: none; } .vouch figcaption b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* nav tagline: one line, spaced from the logo, hidden when the nav gets tight */
.nav-tag { white-space: nowrap; margin-left: 14px; }
@media (max-width: 1320px) { .nav-tag { display: none; } }