/* dark-theme.css — Single source of truth for dark theme across all pages */

/* ===== CSS VARIABLES ===== */
:root {
  --bg: #0d1121;
  --bg-elevated: #161c33;
  --bg-card: rgba(22, 28, 51, .65);
  --border: rgba(56, 63, 94, .5);
  --border-hover: rgba(99, 102, 241, .4);
  --text: #f0f2f8;
  --text-secondary: #a3a8c3;
  --text-muted: #6b7194;
  --cyan: #06b6d4;
  --violet: #7c3aed;
  --rose: #e11d48;
  --amber: #f59e0b;
  --indigo: #6366f1;
  --gradient: linear-gradient(135deg, #06b6d4, #6366f1, #7c3aed);
}

/* ===== BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ===== BACKGROUND EFFECTS ===== */
.bg-grid {
  position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(99,102,241,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,.04) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none; z-index: 0;
}
.bg-glow {
  position: fixed; top: -30%; left: 50%; transform: translateX(-50%);
  width: 1400px; height: 1400px;
  background: radial-gradient(ellipse, rgba(99,102,241,.1) 0%, rgba(30,35,64,.5) 35%, rgba(20,24,41,.3) 60%, transparent 80%);
  pointer-events: none; z-index: 0;
}
.bg-glow-2 {
  position: fixed; bottom: -40%; left: 50%; transform: translateX(-50%);
  width: 1200px; height: 1200px;
  background: radial-gradient(ellipse, rgba(6,182,212,.06) 0%, rgba(20,24,41,.3) 40%, transparent 70%);
  pointer-events: none; z-index: 0;
}

/* ===== LAYOUT ===== */
.wrap {
  position: relative; z-index: 1;
  max-width: 1120px; margin: 0 auto; padding: 0 32px;
}
section { padding: 80px 0; }

/* ===== NAV ===== */
nav {
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  background: rgba(13, 17, 33, .85);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: 1120px; margin: 0 auto; padding: 0 32px;
  height: 64px; display: flex; align-items: center; justify-content: space-between;
}
.nav-brand {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 700; color: var(--text); text-decoration: none;
}
.nav-brand img { border-radius: 8px; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-link {
  font-size: 14px; font-weight: 500; color: var(--text-secondary);
  text-decoration: none; transition: color .2s;
}
.nav-link:hover { color: var(--text); }
.nav-coffee { color: #FFDD00 !important; display: inline-flex; align-items: center; gap: 5px; }
.nav-coffee:hover { color: #ffe94d !important; }

/* ===== BUTTONS ===== */
.btn-install {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 24px; background: var(--gradient); color: #fff;
  font-size: 14px; font-weight: 700; border-radius: 10px; text-decoration: none;
  letter-spacing: .2px; transition: transform .2s, box-shadow .2s;
  box-shadow: 0 4px 20px rgba(99,102,241,.3), 0 0 0 1px rgba(99,102,241,.2);
}
.btn-install:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(99,102,241,.4), 0 0 0 1px rgba(99,102,241,.3);
}
.btn-install svg { flex-shrink: 0; }
/* Added to Chrome state (owner, 21 October 2026). A page that knows the visitor has the extension (the extension opened it,
   or the extension itself answered the site bridge: upgrade.js, upgrade-success.js) keeps the header button in
   its slot and shows "Added to Chrome" over it, the way the Web Store does. It stays a link to the same store listing
   (to view it or leave a review) and says so on hover and focus: "Added to Chrome" gives way to "View in Store". The Add
   to Chrome content stays laid out under the overlay, so the slot never changes size and nothing shifts; only
   opacity animates. Only pages whose button carries the .bi-done overlay change. */
.btn-install:has(.bi-done) { position: relative; }
/* The installed state is a status, not a call to action: it does not lift on hover like Add to Chrome. */
html[data-extension-hint="opened"] .btn-install:has(.bi-done):hover, html[data-extension="present"] .btn-install:has(.bi-done):hover { transform: none; }
.btn-install .bi-done { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; background: #0c2823; box-shadow: 0 0 0 1px rgba(52,211,153,.6) inset; color: #6ee7b7; font-weight: 700; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, background-color .2s ease, visibility 0s linear .25s; }
.btn-install .bi-done > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; transition: opacity .2s ease; }
.btn-install .bi-done .bi-b { opacity: 0; color: #d1fae5; }
html[data-extension-hint="opened"] .btn-install:has(.bi-done), html[data-extension="present"] .btn-install:has(.bi-done) { box-shadow: none; }
html[data-extension-hint="opened"] .btn-install .bi-done, html[data-extension="present"] .btn-install .bi-done { opacity: 1; visibility: visible; transition: opacity .25s ease, background-color .2s ease; }
html[data-extension-hint="opened"] .btn-install:hover .bi-done, html[data-extension="present"] .btn-install:hover .bi-done, html[data-extension-hint="opened"] .btn-install:focus-visible .bi-done, html[data-extension="present"] .btn-install:focus-visible .bi-done { background: #0f3a31; }
.btn-install:hover .bi-done .bi-a, .btn-install:focus-visible .bi-done .bi-a { opacity: 0; }
.btn-install:hover .bi-done .bi-b, .btn-install:focus-visible .bi-done .bi-b { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .btn-install .bi-done, .btn-install .bi-done > span { transition: none; } }
.btn-install-hero { padding: 14px 36px; font-size: 16px; border-radius: 14px; }
.btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 28px; background: transparent; color: var(--text-secondary);
  font-size: 14px; font-weight: 600; border-radius: 12px; text-decoration: none;
  border: 1px solid var(--border); transition: color .2s, border-color .2s, background .2s;
}
.btn-secondary:hover {
  color: var(--text); border-color: var(--border-hover);
  background: rgba(99,102,241,.05);
}

/* ===== HERO ===== */
.hero { text-align: center; padding: 48px 0 24px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 16px; border-radius: 20px;
  font-size: 12px; font-weight: 700; letter-spacing: .5px;
  color: var(--cyan); background: rgba(6,182,212,.08);
  border: 1px solid rgba(6,182,212,.2); margin-bottom: 16px;
}
.hero-badge-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan); animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(.8); }
}
.hero h1 {
  font-size: clamp(36px, 5vw, 56px); font-weight: 800;
  line-height: 1.15; letter-spacing: -1.5px; margin-bottom: 14px;
}
.hero h1 .grad {
  background: var(--gradient);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-sub {
  font-size: 17px; color: var(--text-secondary);
  max-width: 560px; margin: 0 auto 20px; line-height: 1.7;
}
.hero-actions {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; flex-wrap: wrap; margin-bottom: 12px;
}
.hero-note { font-size: 13px; color: var(--text-muted); margin-top: 8px; }
.hero-note svg { vertical-align: -2px; margin-right: 4px; }
.hero-pills {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px;
}
.hero-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 20px;
  font-size: 13px; font-weight: 500; color: var(--text-secondary);
  background: var(--bg-card); border: 1px solid var(--border);
}
.hero-pill svg { flex-shrink: 0; }

/* ===== SECTION HEADINGS ===== */
.features-head { text-align: center; margin-bottom: 56px; }
.features-head h2 {
  font-size: 36px; font-weight: 800; letter-spacing: -.5px; margin-bottom: 12px;
}
.features-head p {
  font-size: 17px; color: var(--text-secondary); max-width: 480px; margin: 0 auto;
}

/* ===== FEATURE CARDS ===== */
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feat-card {
  padding: 28px 24px; border-radius: 16px;
  background: var(--bg-card); border: 1px solid var(--border);
  backdrop-filter: blur(8px); transition: border-color .3s, transform .3s, box-shadow .3s;
}
.feat-card:hover {
  border-color: var(--border-hover); transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,.3);
}
.feat-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.feat-icon.cy { background: rgba(6,182,212,.1); }
.feat-icon.vi { background: rgba(124,58,237,.1); }
.feat-icon.am { background: rgba(245,158,11,.1); }
.feat-icon.ro { background: rgba(225,29,72,.1); }
.feat-icon.gr { background: rgba(16,185,129,.1); }
.feat-icon.in { background: rgba(99,102,241,.1); }
.feat-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.feat-card p { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }

/* ===== STATS BAR ===== */
.stats-bar {
  display: flex; justify-content: center; gap: 48px;
  padding: 40px 0; margin-top: 16px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.stat { text-align: center; }
.stat-value {
  font-size: 32px; font-weight: 800; letter-spacing: -1px;
  background: var(--gradient);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.stat-label { font-size: 13px; color: var(--text-muted); font-weight: 500; margin-top: 2px; }

/* ===== SCROLL REVEAL ===== */
.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.feat-card.reveal { transition-delay: calc(var(--i, 0) * 80ms); }

/* ===== DARK BROWSER FRAME OVERRIDES ===== */
.sec { margin-bottom: 0; }
.brow {
  border-color: var(--border) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,.4) !important;
  background: var(--bg-elevated) !important;
}
.brow-tabs { background: #1a1f35 !important; }
.brow-tab { background: #222842 !important; color: #a3a8c3 !important; }
.brow-tab-x { color: #6b7194 !important; }
.brow-tab-new { color: #6b7194 !important; }
.brow-bar { background: #1e2340 !important; border-bottom-color: var(--border) !important; }
.brow-url { background: rgba(11,14,24,.5) !important; color: #6b7194 !important; border-color: var(--border) !important; }
.brow-body { background: #111528 !important; }
.fake { opacity: .2 !important; }
.fk { background: rgba(99,102,160,.15) !important; }
.fk.hd { background: rgba(99,102,160,.2) !important; }
.fk-img { background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(6,182,212,.06)) !important; }
.ext-drop {
  background: #1e2340 !important; border-color: var(--border) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,.4) !important;
}
.ext-h b { color: #e0e3f0 !important; }
.ext-h span { color: #6b7194 !important; }
.ext-sub { color: #6b7194 !important; }
.ext-row-name { color: #e0e3f0 !important; }
.ext-sep { background: var(--border) !important; }
.ext-manage { color: #a3a8c3 !important; }
.ext-manage svg { stroke: #a3a8c3 !important; }
.popup-over {
  background: #1e2340 !important; border-color: var(--border) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.4) !important;
}
.po-head { color: #e0e3f0 !important; }
.po-val { color: #e0e3f0 !important; }
.po-pm { background: rgba(99,102,160,.1) !important; color: #6b7194 !important; }
.po-add { background: rgba(124,58,237,.1) !important; }
.po-play { background: rgba(6,182,212,.1) !important; }
.wm {
  background: rgba(20,24,41,.92) !important; backdrop-filter: blur(14px);
  box-shadow: 0 4px 24px rgba(0,0,0,.4), inset 0 0 0 1px rgba(56,63,94,.4) !important;
}
.wm-grip { color: rgba(124,58,237,.3) !important; }
.wm-stats .val { color: #a3a8c3 !important; }
.wm-int { color: #6b7194 !important; }
.wm-int span { color: #4a5078 !important; }

/* ===== FOOTER ===== */
footer { border-top: 1px solid var(--border); padding: 32px 0; }
.footer-inner {
  max-width: 1120px; margin: 0 auto; padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between;
}
.footer-brand {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-muted);
}
.footer-links { display: flex; gap: 24px; }
.footer-links a {
  font-size: 13px; color: var(--text-muted); text-decoration: none; transition: color .2s;
}
.footer-links a:hover { color: var(--text-secondary); }

/* ===== CTA SECTION ===== */
.cta-section {
  text-align: center; position: relative;
  padding: 80px 40px; border-radius: 24px;
  background: linear-gradient(135deg, rgba(6,182,212,.06), rgba(99,102,241,.08), rgba(124,58,237,.06));
  border: 1px solid rgba(99,102,241,.15); overflow: hidden;
}
.cta-section::before {
  content: ''; position: absolute; top: -50%; left: 50%; transform: translateX(-50%);
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(99,102,241,.1) 0%, transparent 60%);
  pointer-events: none;
}
.cta-section h2 {
  font-size: 40px; font-weight: 800; letter-spacing: -1px; margin-bottom: 16px; position: relative;
}
.cta-section h2 .grad {
  background: var(--gradient);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.cta-section p {
  font-size: 17px; color: var(--text-secondary); margin-bottom: 32px;
  max-width: 440px; margin-left: auto; margin-right: auto; position: relative;
}
.cta-section .btn-install { position: relative; }
.cta-trust { display: flex; justify-content: center; gap: 24px; margin-top: 20px; }
.cta-trust-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-muted);
}
.cta-trust-item svg { flex-shrink: 0; }

/* ===== DONATE ===== */
.donate-section { padding: 40px 0 80px; }
.donate-card {
  max-width: 520px; margin: 0 auto; text-align: center;
  padding: 40px 32px; border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,221,0,.04), rgba(255,165,0,.04));
  border: 1px solid rgba(255,221,0,.12);
}
.donate-icon {
  width: 56px; height: 56px; border-radius: 16px;
  background: rgba(255,221,0,.08);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.donate-card h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.donate-card p { font-size: 15px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 20px; }
.donate-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 28px; background: #FFDD00; color: #1a1a1a;
  font-size: 14px; font-weight: 700; border-radius: 12px; text-decoration: none;
  transition: transform .2s, box-shadow .2s; box-shadow: 0 4px 16px rgba(255,221,0,.2);
}
.donate-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255,221,0,.3); }

/* ===== REVIEWS ===== */
.reviews-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  max-width: 840px; margin: 0 auto;
}
.review-card {
  padding: 24px; border-radius: 16px;
  background: var(--bg-card); border: 1px solid var(--border);
}
.review-stars { display: flex; gap: 2px; margin-bottom: 12px; }
.review-stars svg { flex-shrink: 0; }
.review-text {
  font-size: 14px; color: var(--text-secondary); line-height: 1.6;
  margin-bottom: 12px; font-style: italic;
}
.review-author { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.reviews-cta { text-align: center; margin-top: 24px; }
.reviews-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: var(--indigo);
  text-decoration: none; transition: color .2s;
}
.reviews-link:hover { color: var(--cyan); }
.review-card.reveal { transition-delay: calc(var(--i, 0) * 120ms); }

/* ===== HERO VISUAL (browser mockup with crosshairs + widget + popup) ===== */
.hero-visual { position: relative; max-width: 840px; margin: 24px auto 0; }
.hero-browser {
  position: relative; border-radius: 16px; border: 1px solid var(--border);
  background: var(--bg-elevated); overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.03), 0 24px 80px rgba(0,0,0,.5), 0 0 120px rgba(99,102,241,.06);
}
.hb-bar {
  display: flex; align-items: center; gap: 8px; padding: 12px 16px;
  background: rgba(25, 30, 50, .9); border-bottom: 1px solid var(--border);
}
.hb-dots { display: flex; gap: 6px; }
.hb-dots span { width: 10px; height: 10px; border-radius: 50%; background: rgba(56, 63, 94, .6); }
.hb-url {
  flex: 1; margin-left: 8px; padding: 5px 14px; border-radius: 8px;
  background: rgba(11,14,24,.6); font-size: 12px; color: var(--text-muted);
  font-family: 'SF Mono', Monaco, Consolas, monospace;
}
.hb-ext { display: flex; align-items: center; gap: 4px; }
.hb-ext-icon {
  width: 28px; height: 28px; border-radius: 6px; background: rgba(99,102,241,.15);
  display: flex; align-items: center; justify-content: center;
}
.hb-body { position: relative; background: #111528; overflow: hidden; }
.hb-fake { padding: 32px 40px; opacity: .15; }
.hb-fk { height: 8px; background: rgba(99,102,160,.2); border-radius: 4px; margin-bottom: 10px; }
.hb-fk.hd { height: 12px; width: 45%; margin-bottom: 18px; }
.hb-fk.w90{width:88%} .hb-fk.w80{width:76%} .hb-fk.w70{width:65%} .hb-fk.w60{width:55%} .hb-fk.w50{width:44%}
.hb-fk-img { width:55%;height:60px;background:linear-gradient(135deg,rgba(99,102,241,.1),rgba(6,182,212,.1));border-radius:8px;margin:18px 0; }

/* crosshair targets */
.hb-target { position: absolute; width: 40px; height: 40px; margin: -20px 0 0 -20px; }
.hb-target svg { width: 40px; height: 40px; }
.hb-target::after {
  content: ''; position: absolute; top: 50%; left: 50%; width: 12px; height: 12px;
  margin: -6px 0 0 -6px; border-radius: 50%; border: 2px solid var(--violet);
  animation: target-ripple 2.5s ease-out infinite;
}
@keyframes target-ripple { 0%{transform:scale(1);opacity:.6} 100%{transform:scale(4);opacity:0} }
.hb-t1 { left: 20%; top: 30%; }
.hb-t2 { left: 55%; top: 52%; }
.hb-t3 { left: 38%; top: 76%; }
/* staggered entrance */
.hb-target svg { opacity: 0; transform: scale(0); animation: xh-pop .4s cubic-bezier(.34,1.56,.64,1) forwards; }
.hb-t1 svg { animation-delay: .6s; }
.hb-t2 svg { animation-delay: 1s; }
.hb-t3 svg { animation-delay: 1.4s; }
@keyframes xh-pop { to { opacity: 1; transform: scale(1); } }
.hb-t1::after { animation-delay: .8s; }
.hb-t2::after { animation-delay: 1.2s; }
.hb-t3::after { animation-delay: 1.6s; }

/* click ripples */
.hb-click-ring {
  position: absolute; width: 8px; height: 8px; border-radius: 50%;
  background: rgba(6,182,212,.3); animation: click-ring-anim 2s ease-out infinite;
}
.hb-cr1 { left:20%;top:30%;margin:-4px 0 0 -4px;animation-delay:.2s }
.hb-cr2 { left:55%;top:52%;margin:-4px 0 0 -4px;animation-delay:1s }
.hb-cr3 { left:38%;top:76%;margin:-4px 0 0 -4px;animation-delay:1.8s }
@keyframes click-ring-anim { 0%{transform:scale(1);opacity:.6} 50%{transform:scale(6);opacity:0} 100%{transform:scale(6);opacity:0} }

/* floating widget in hero */
.hb-widget {
  position: absolute; right: 20px; top: 50%; width: 72px; padding: 8px;
  background: rgba(20, 24, 41, .9); backdrop-filter: blur(16px);
  border-radius: 28px; border: 1px solid rgba(56, 63, 94, .6);
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  display: flex; flex-direction: column; align-items: center; gap: 4px; z-index: 5;
  animation: widget-slide .6s .4s cubic-bezier(.22,1,.36,1) both;
}
@keyframes widget-slide { from{opacity:0;transform:translateY(-50%) translateX(24px)} to{opacity:1;transform:translateY(-50%) translateX(0)} }
.hw-grip { font-size:8px;color:rgba(124,58,237,.4);letter-spacing:2px;line-height:1;padding:2px 0;user-select:none }
.hw-btn { border-radius:50%;display:flex;align-items:center;justify-content:center }
.hw-del { width:28px;height:28px;background:rgba(225,29,72,.12) }
.hw-play { width:38px;height:38px;background:var(--cyan);box-shadow:0 2px 12px rgba(6,182,212,.4);animation:hw-glow 3s ease-in-out infinite alternate }
@keyframes hw-glow { 0%{box-shadow:0 2px 12px rgba(6,182,212,.3)} 100%{box-shadow:0 4px 24px rgba(6,182,212,.5),0 0 40px rgba(6,182,212,.15)} }
.hw-add { width:28px;height:28px;background:rgba(124,58,237,.12) }
.hw-stats { display:grid;grid-template-columns:repeat(3,1fr);text-align:center;font-size:7px;color:var(--text-muted);font-weight:600;letter-spacing:.3px;width:100%;padding:1px 2px }
.hw-stats .v { font-size:12px;color:var(--text-secondary);font-weight:700 }
.hw-int { font-size:10px;color:var(--text-muted);font-weight:700;font-family:'SF Mono',Monaco,monospace }

/* popup preview */
.hero-popup {
  position: absolute; top: -24px; left: -32px; width: 190px;
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 12px 48px rgba(0,0,0,.6), 0 0 0 1px rgba(99,102,241,.15);
  opacity: 0; transform: translateY(16px);
  animation: popup-enter 1s 1.5s cubic-bezier(.22,1,.36,1) forwards; z-index: 10;
}
.hero-popup img { width: 100%; display: block; }
@keyframes popup-enter { to { opacity: 1; transform: translateY(0); } }

@media (max-width: 900px) { .hero-popup { width: 150px; left: -16px; top: -16px; } }
@media (max-width: 640px) { .hero-popup { display: none; } .hero-visual { margin-top: 20px; } }

/* ===== BROWSER DEMO ANIMATION (18s with step labels) ===== */
/* Pre-animation intro in browser demo */
.brow-start-hint {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 50; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 24px 36px; border-radius: 18px; text-align: center;
  background: rgba(13,17,33,.85); border: 1px solid rgba(99,102,241,.2);
  backdrop-filter: blur(8px); pointer-events: none;
  opacity: 0; animation: bshAppear 1s .5s ease forwards;
}
@keyframes bshAppear {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.9); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.bsh-icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(99,102,241,.1); border: 1px solid rgba(99,102,241,.2);
  display: flex; align-items: center; justify-content: center; margin-bottom: 4px;
}
.bsh-title { font-size: 16px; font-weight: 700; color: var(--text); }
.bsh-sub { font-size: 13px; color: var(--text-muted); }
.anim-active .brow-start-hint { animation: bshFade .8s ease forwards; }
@keyframes bshFade {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.95); }
}

.demo-brow-wrap { max-width: 780px; margin: 0 auto; }
.demo-brow-wrap .anim-active .ptr { animation: ptrPath2 18s ease-in-out both; }
@keyframes ptrPath2 {
  0%{top:90px;left:calc(100% - 140px);opacity:0}
  1%{top:90px;left:calc(100% - 140px);opacity:1}
  8%{top:63px;left:calc(100% - 85px);opacity:1}
  9%{top:63px;left:calc(100% - 85px);opacity:1;transform:scale(.85)}
  10%{top:63px;left:calc(100% - 85px);opacity:1;transform:scale(1)}
  14%{top:63px;left:calc(100% - 85px);opacity:1}
  21%{top:211px;left:calc(100% - 60px);opacity:1}
  22%{top:211px;left:calc(100% - 60px);opacity:1;transform:scale(.85)}
  23%{top:211px;left:calc(100% - 60px);opacity:1;transform:scale(1)}
  28%{top:211px;left:calc(100% - 60px);opacity:1}
  34%{top:63px;left:calc(100% - 116px);opacity:1}
  35%{top:63px;left:calc(100% - 116px);opacity:1;transform:scale(.85)}
  36%{top:63px;left:calc(100% - 116px);opacity:1;transform:scale(1)}
  40%{top:63px;left:calc(100% - 116px);opacity:1}
  46%{top:170px;left:calc(100% - 204px);opacity:1}
  47%{top:170px;left:calc(100% - 204px);opacity:1;transform:scale(.85)}
  48%{top:170px;left:calc(100% - 204px);opacity:1;transform:scale(1)}
  50%{top:170px;left:calc(100% - 204px);opacity:1}
  55%{top:193px;left:22%;opacity:1}
  56%{top:193px;left:22%;opacity:1;transform:scale(.85)}
  57%{top:193px;left:22%;opacity:1;transform:scale(1)}
  61%{top:339px;left:35%;opacity:1}
  62%{top:339px;left:35%;opacity:1;transform:scale(.85)}
  63%{top:339px;left:35%;opacity:1;transform:scale(1)}
  67%{top:271px;left:52%;opacity:1}
  68%{top:271px;left:52%;opacity:1;transform:scale(.85)}
  69%{top:271px;left:52%;opacity:1;transform:scale(1)}
  72%{top:271px;left:52%;opacity:1}
  78%{top:259px;left:calc(100% - 59px);opacity:1}
  79%{top:259px;left:calc(100% - 59px);opacity:1;transform:scale(.85)}
  80%{top:259px;left:calc(100% - 59px);opacity:1;transform:scale(1)}
  84%{top:259px;left:calc(100% - 59px);opacity:0}
  100%{top:259px;left:calc(100% - 59px);opacity:0}
}
.demo-brow-wrap .anim-active .hl-puzzle{animation:hlPulse 2s .8s ease-in-out forwards}
.demo-brow-wrap .anim-active .hl-pin{animation:hlPulse 2.5s 2.8s ease-in-out forwards}
.demo-brow-wrap .anim-active .hl-sac{animation:hlPulse 2.5s 5.2s ease-in-out forwards}
.demo-brow-wrap .anim-active .ext-drop{animation:dropShow 3.5s 1.6s ease-out both}
.demo-brow-wrap .anim-active .cr-puzzle{animation:clickRing .6s 1.5s ease-out forwards}
.demo-brow-wrap .anim-active .cr-pin{animation:clickRing .6s 3.9s ease-out forwards}
.demo-brow-wrap .anim-active .cr-sac{animation:clickRing .6s 6.2s ease-out forwards}
.demo-brow-wrap .anim-active .cr-add{animation:clickRing .6s 8.4s ease-out forwards}
.demo-brow-wrap .anim-active .cr-p1{animation:clickRing .6s 10.0s ease-out forwards}
.demo-brow-wrap .anim-active .cr-p2{animation:clickRing .6s 11.1s ease-out forwards}
.demo-brow-wrap .anim-active .cr-p3{animation:clickRing .6s 12.2s ease-out forwards}
.demo-brow-wrap .anim-active .cr-play{animation:clickRing .6s 14.1s ease-out forwards}
.demo-brow-wrap .anim-active .pin-b{animation:pinOn .3s 3.9s ease-out forwards}
.demo-brow-wrap .anim-active .sac-tb{animation:sacPop .5s 5.0s cubic-bezier(.34,1.56,.64,1) both}
.demo-brow-wrap .anim-active .sac-tb::after{animation:sacGlow 1s 5.5s ease-in-out 2 both}
.demo-brow-wrap .anim-active .popup-over{animation:popupShowD 3.5s 6.4s ease-out both}
@keyframes popupShowD{0%{opacity:0;transform:translateY(-8px) scale(.96)}8%{opacity:1;transform:translateY(0) scale(1)}82%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-5px) scale(.98)}}
.demo-brow-wrap .anim-active .wm{animation:wmSlide .5s 8.5s ease-out both}
.demo-brow-wrap .anim-active .target.t1 svg{animation:xPop .35s 10.0s ease-out both}
.demo-brow-wrap .anim-active .target.t2 svg{animation:xPop .35s 11.1s ease-out both}
.demo-brow-wrap .anim-active .target.t3 svg{animation:xPop .35s 12.2s ease-out both}
.demo-brow-wrap .anim-active .pts0{animation:ptsD0 18s both}.demo-brow-wrap .anim-active .pts1{animation:ptsD1 18s both}
.demo-brow-wrap .anim-active .pts2{animation:ptsD2 18s both}.demo-brow-wrap .anim-active .pts3{animation:ptsD3 18s both}
@keyframes ptsD0{0%,54%{opacity:1}56%,100%{opacity:0}}@keyframes ptsD1{0%,54%{opacity:0}56%,60%{opacity:1}62%,100%{opacity:0}}
@keyframes ptsD2{0%,60%{opacity:0}62%,66%{opacity:1}68%,100%{opacity:0}}@keyframes ptsD3{0%,66%{opacity:0}68%,100%{opacity:1}}
.demo-brow-wrap .anim-active .clk0{animation:clkD0 18s both}.demo-brow-wrap .anim-active .clk1{animation:clkD1 18s both}
.demo-brow-wrap .anim-active .clk2{animation:clkD2 18s both}.demo-brow-wrap .anim-active .clk3{animation:clkD3 18s both}
@keyframes clkD0{0%,80%{opacity:1}82%,100%{opacity:0}}@keyframes clkD1{0%,80%{opacity:0}82%,85%{opacity:1}87%,100%{opacity:0}}
@keyframes clkD2{0%,85%{opacity:0}87%,90%{opacity:1}92%,100%{opacity:0}}@keyframes clkD3{0%,90%{opacity:0}92%,100%{opacity:1}}
.demo-brow-wrap .anim-active .cyc0{animation:cycD0 18s both}.demo-brow-wrap .anim-active .cyc1{animation:cycD1 18s both}
@keyframes cycD0{0%,77%{opacity:1}78%,100%{opacity:0}}@keyframes cycD1{0%,77%{opacity:0}78%,100%{opacity:1}}
.demo-brow-wrap .anim-active .wm-play-ico{animation:icoHide .01s 14.1s both}
.demo-brow-wrap .anim-active .wm-pause-ico{animation:icoShow .01s 14.1s both}
.demo-brow-wrap .anim-active .wm-play{animation:playToStop .4s 14.1s ease-out both,stopGlow 1.5s 14.5s infinite alternate both}
.demo-brow-wrap .anim-active .target.t1::after{animation:ripple 2.1s 14.5s ease-out infinite none}
.demo-brow-wrap .anim-active .target.t2::after{animation:ripple 2.1s 15.0s ease-out infinite none}
.demo-brow-wrap .anim-active .target.t3::after{animation:ripple 2.1s 15.5s ease-out infinite none}
.demo-brow-wrap .anim-active .target.t1::before{animation:rippleFill 2.1s 14.5s ease-out infinite none}
.demo-brow-wrap .anim-active .target.t2::before{animation:rippleFill 2.1s 15.0s ease-out infinite none}
.demo-brow-wrap .anim-active .target.t3::before{animation:rippleFill 2.1s 15.5s ease-out infinite none}
/* step labels */
.demo-label{position:absolute;z-index:65;padding:7px 16px;border-radius:10px;color:#fff;font-size:13px;font-weight:700;font-family:'Inter',sans-serif;white-space:nowrap;opacity:0;pointer-events:none;letter-spacing:.2px;background:rgba(99,102,241,.88);backdrop-filter:blur(8px);box-shadow:0 4px 16px rgba(0,0,0,.3)}
.demo-label::after{content:'';position:absolute;width:8px;height:8px;background:inherit;transform:rotate(45deg)}
.dl-puzzle{top:48px;right:130px}.dl-puzzle::after{right:-4px;top:10px}
.dl-pin{top:230px;right:30px}.dl-pin::after{top:-4px;right:24px}
.dl-open{top:48px;right:155px}.dl-open::after{right:-4px;top:10px}
.dl-add{top:162px;right:300px}.dl-add::after{right:-4px;top:10px}
.dl-place{top:30%;left:8%;transform:translateY(-50%);background:rgba(124,58,237,.88)}.dl-place::after{display:none}
.dl-play{top:252px;right:100px}.dl-play::after{right:-4px;top:10px}
.dl-enjoy{top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#06b6d4,#6366f1);font-size:18px;padding:10px 24px}.dl-enjoy::after{display:none}
.demo-brow-wrap .anim-active .dl-puzzle{animation:dlFade 2.2s .1s ease both}
.demo-brow-wrap .anim-active .dl-pin{animation:dlFade 2.8s 2.0s ease both}
.demo-brow-wrap .anim-active .dl-open{animation:dlFade 2.6s 4.6s ease both}
.demo-brow-wrap .anim-active .dl-add{animation:dlFade 2.6s 6.6s ease both}
.demo-brow-wrap .anim-active .dl-place{animation:dlFadeP 4.5s 8.5s ease both}
.demo-brow-wrap .anim-active .dl-play{animation:dlFade 2.6s 12.2s ease both}
.demo-brow-wrap .anim-active .dl-enjoy{animation:dlFadeE 3.5s 14.6s ease both}
@keyframes dlFade{0%{opacity:0}8%{opacity:1}88%{opacity:1}100%{opacity:0}}
@keyframes dlFadeP{0%{opacity:0}5%{opacity:1}90%{opacity:1}100%{opacity:0}}
@keyframes dlFadeE{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}10%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}20%{opacity:1;transform:translate(-50%,-50%) scale(1)}85%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(.95)}}

/* ===== FEATURE SHOWCASES ===== */
.showcase {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
  align-items: center; padding: 64px 0; border-top: 1px solid var(--border);
}
.showcase:first-of-type { border-top: none; margin-top: 48px; }
.showcase.rev { direction: rtl; }
.showcase.rev > * { direction: ltr; }
.showcase-label {
  font-size: 12px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; margin-bottom: 10px;
}
.showcase-label.cy { color: var(--cyan); }
.showcase-label.vi { color: var(--violet); }
.showcase-label.am { color: var(--amber); }
.showcase-content h3 { font-size: 28px; font-weight: 800; letter-spacing: -.3px; margin-bottom: 12px; line-height: 1.2; }
.showcase-content p { font-size: 15px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 20px; }
.showcase-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.showcase-list li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-secondary); }
.showcase-list li svg { flex-shrink: 0; }
.showcase-demo {
  border-radius: 20px; padding: 40px;
  background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(6,182,212,.06));
  border: 1px solid rgba(99,102,241,.15);
  display: flex; align-items: center; justify-content: center;
  min-height: 300px; position: relative; overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.03);
}
.showcase-demo.glow-cy { background: linear-gradient(135deg, rgba(6,182,212,.1), rgba(6,182,212,.03)); border-color: rgba(6,182,212,.15); }
.showcase-demo.glow-vi { background: linear-gradient(135deg, rgba(124,58,237,.1), rgba(124,58,237,.03)); border-color: rgba(124,58,237,.15); }
.showcase-demo.glow-am { background: linear-gradient(135deg, rgba(245,158,11,.08), rgba(245,158,11,.03)); border-color: rgba(245,158,11,.12); }
.showcase-demo.glow-gr { background: linear-gradient(135deg, rgba(16,185,129,.08), rgba(16,185,129,.03)); border-color: rgba(16,185,129,.12); }
.showcase-demo.glow-ro { background: linear-gradient(135deg, rgba(225,29,72,.08), rgba(225,29,72,.03)); border-color: rgba(225,29,72,.12); }
.showcase-demo.glow-in { background: linear-gradient(135deg, rgba(99,102,241,.1), rgba(99,102,241,.03)); border-color: rgba(99,102,241,.15); }

/* widget demo */
.sc-widget { width:80px;padding:8px;background:rgba(20,24,41,.95);backdrop-filter:blur(16px);border-radius:32px;border:1px solid rgba(56,63,94,.5);box-shadow:0 8px 40px rgba(0,0,0,.5);display:flex;flex-direction:column;align-items:center;gap:5px;animation:sc-float 6s ease-in-out infinite }
@keyframes sc-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.sc-grip { display:grid;grid-template-columns:repeat(3,1fr);gap:3px 5px;padding:3px 12px }
.sc-grip i { width:4px;height:4px;border-radius:50%;background:rgba(124,58,237,.4);display:block }
.sc-btn { border-radius:50%;display:flex;align-items:center;justify-content:center }
.sc-del { width:30px;height:30px;background:rgba(225,29,72,.12) }
.sc-play { width:44px;height:44px;background:var(--cyan);box-shadow:0 4px 20px rgba(6,182,212,.4) }
.sc-add { width:30px;height:30px;background:rgba(124,58,237,.12) }
.sc-stats { display:grid;grid-template-columns:repeat(3,1fr);text-align:center;font-size:7px;color:var(--text-muted);font-weight:600;letter-spacing:.3px;width:100%;padding:2px 4px }
.sc-stats .v { font-size:13px;color:var(--text-secondary);font-weight:700 }
.sc-int { font-size:11px;color:var(--text-muted);font-weight:700;font-family:'SF Mono',Monaco,monospace }
.sc-edge { position:absolute;top:10%;bottom:10%;width:2px;border-radius:1px }
.sc-edge-l { left:0;background:var(--indigo);box-shadow:0 0 8px rgba(99,102,241,.5);animation:sc-edge-l 6s ease infinite }
.sc-edge-r { right:0;background:var(--indigo);box-shadow:0 0 8px rgba(99,102,241,.5);animation:sc-edge-r 6s ease infinite }
@keyframes sc-edge-r { 0%,30%{opacity:.6} 35%{opacity:0} 65%{opacity:0} 70%,100%{opacity:.6} }
@keyframes sc-edge-l { 0%,30%{opacity:0} 35%{opacity:.6} 65%{opacity:.6} 70%{opacity:0} 100%{opacity:0} }

/* crosshair demo */
.sc-xh-scene { position:relative;width:100%;height:100%;min-height:220px }
.sc-xh { position:absolute;width:32px;height:32px;margin:-16px 0 0 -16px }
.sc-xh svg { width:32px;height:32px;opacity:0;animation:sc-xh-pop 5s ease both infinite }
.sc-xh-2 svg { animation-delay:1.5s } .sc-xh-3 svg { animation-delay:3s }
.sc-xh::after { content:'';position:absolute;top:50%;left:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;border:2px solid var(--violet);opacity:0;animation:sc-xh-ring 5s ease both infinite }
.sc-xh-2::after { animation-delay:1.5s } .sc-xh-3::after { animation-delay:3s }
@keyframes sc-xh-pop { 0%,8%{opacity:0;transform:scale(0)} 14%,72%{opacity:1;transform:scale(1)} 80%,100%{opacity:0;transform:scale(0)} }
@keyframes sc-xh-ring { 0%,14%{opacity:0;transform:scale(1)} 18%{opacity:.5;transform:scale(1)} 30%{opacity:0;transform:scale(4)} 100%{opacity:0} }
.sc-line { position:absolute;left:16px;right:16px;height:6px;background:rgba(99,102,160,.08);border-radius:3px }

/* humanize */
.sc-hz { display:flex;flex-direction:column;gap:16px;width:100% }
.sc-hz-label { font-size:11px;font-weight:700;color:var(--text-muted);letter-spacing:.5px }
.sc-hz-row { position:relative;height:20px }
.sc-hz-line { position:absolute;top:50%;left:0;right:0;height:2px;background:rgba(99,102,160,.15);transform:translateY(-50%) }
.sc-hz-dot { width:10px;height:10px;border-radius:50%;position:absolute;top:50%;transform:translateY(-50%);opacity:0 }
.sc-hz-dot.cy { background:var(--cyan) } .sc-hz-dot.am { background:var(--amber) }
.sc-hz-dot.r1{left:10%;animation:sc-hz-d 4s 0s ease infinite}.sc-hz-dot.r2{left:30%;animation:sc-hz-d 4s .6s ease infinite}.sc-hz-dot.r3{left:50%;animation:sc-hz-d 4s 1.2s ease infinite}.sc-hz-dot.r4{left:70%;animation:sc-hz-d 4s 1.8s ease infinite}.sc-hz-dot.r5{left:90%;animation:sc-hz-d 4s 2.4s ease infinite}
.sc-hz-dot.h1{left:8%;animation:sc-hz-d 4s 0s ease infinite}.sc-hz-dot.h2{left:32%;animation:sc-hz-d 4s .4s ease infinite}.sc-hz-dot.h3{left:48%;animation:sc-hz-d 4s 1.3s ease infinite}.sc-hz-dot.h4{left:65%;animation:sc-hz-d 4s 1.7s ease infinite}.sc-hz-dot.h5{left:88%;animation:sc-hz-d 4s 2.8s ease infinite}
@keyframes sc-hz-d { 0%,5%{opacity:0;transform:translateY(-50%) scale(0)} 12%{opacity:1;transform:translateY(-50%) scale(1.3)} 18%,65%{opacity:1;transform:translateY(-50%) scale(1)} 75%,100%{opacity:0;transform:translateY(-50%) scale(0)} }

/* pause viz */
.sc-pause-viz { display:flex;align-items:center;gap:24px }
.sc-pause-state { display:flex;flex-direction:column;align-items:center;gap:10px }
.sc-pause-ico { width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center }
.sc-pause-pill { padding:5px 16px;border-radius:12px;font-size:11px;font-weight:700;letter-spacing:.5px }
.sc-state-play { animation:sc-pz-a 4s ease-in-out infinite } .sc-state-pause { animation:sc-pz-b 4s ease-in-out infinite }
.sc-pause-arrow { animation:sc-pz-arrow 4s ease-in-out infinite }
@keyframes sc-pz-a { 0%,40%{opacity:1;transform:scale(1)} 50%,90%{opacity:.3;transform:scale(.92)} 100%{opacity:1;transform:scale(1)} }
@keyframes sc-pz-b { 0%,40%{opacity:.3;transform:scale(.92)} 50%,90%{opacity:1;transform:scale(1)} 100%{opacity:.3;transform:scale(.92)} }
@keyframes sc-pz-arrow { 0%,40%{opacity:.3} 45%{opacity:1} 50%,90%{opacity:.3} 95%{opacity:1} 100%{opacity:.3} }

/* speed viz */
.sc-speed { text-align:center;width:100%;max-width:240px }
.sc-speed-val { font-size:56px;font-weight:800;letter-spacing:-2px;color:var(--rose);line-height:1;margin-bottom:16px;animation:sc-speed-pulse 2s ease-in-out infinite }
.sc-speed-unit { font-size:24px;font-weight:600;letter-spacing:0;opacity:.6 }
@keyframes sc-speed-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
.sc-speed-bar { height:6px;border-radius:3px;background:rgba(225,29,72,.1);margin-bottom:8px;overflow:hidden }
.sc-speed-fill { height:100%;width:5%;border-radius:3px;background:linear-gradient(90deg,var(--rose),#f43f5e);box-shadow:0 0 12px rgba(225,29,72,.4);animation:sc-speed-bar 3s ease-in-out infinite }
@keyframes sc-speed-bar { 0%,100%{width:5%} 50%{width:95%} }
.sc-speed-labels { display:flex;justify-content:space-between;font-size:10px;color:var(--text-muted);font-weight:600 }

/* iframe viz */
.sc-iframe { width:100%;max-width:260px }
.sc-iframe-outer { border:2px solid rgba(99,102,241,.2);border-radius:10px;overflow:hidden }
.sc-iframe-bar { padding:6px 12px;font-size:10px;font-weight:700;color:var(--text-muted);background:rgba(99,102,241,.06);border-bottom:1px solid rgba(99,102,241,.1);letter-spacing:.3px }
.sc-iframe-bar-inner { background:rgba(124,58,237,.06);border-color:rgba(124,58,237,.1);color:var(--violet) }
.sc-iframe-body { padding:16px;min-height:120px;position:relative }
.sc-iframe-inner { border:2px dashed rgba(124,58,237,.25);border-radius:8px;overflow:hidden }
.sc-iframe-body-inner { padding:12px;min-height:80px;position:relative;display:flex;align-items:center;justify-content:center }

/* privacy viz */
.sc-privacy { position:relative;display:flex;align-items:center;justify-content:center;animation:sc-priv-pulse 3s ease-in-out infinite }
.sc-privacy-check { position:absolute;bottom:-4px;right:-8px;width:28px;height:28px;border-radius:50%;background:var(--bg-elevated);border:2px solid rgba(16,185,129,.3);display:flex;align-items:center;justify-content:center }
@keyframes sc-priv-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }

@media (max-width: 900px) {
  .showcase { grid-template-columns: 1fr; gap: 32px; }
  .showcase.rev { direction: ltr; }
}

/* ===== STEPS (How It Works) ===== */
.steps {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; counter-reset: step;
}
.step {
  position: relative; padding: 32px 24px; border-radius: 16px;
  background: var(--bg-card); border: 1px solid var(--border); text-align: center;
}
.step-num {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; margin-bottom: 16px;
}
.step-num.s1 { background: rgba(6,182,212,.1); color: var(--cyan); border: 1px solid rgba(6,182,212,.2); }
.step-num.s2 { background: rgba(124,58,237,.1); color: var(--violet); border: 1px solid rgba(124,58,237,.2); }
.step-num.s3 { background: rgba(16,185,129,.1); color: #10b981; border: 1px solid rgba(16,185,129,.2); }
.step h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.step p { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }
.step:not(:last-child)::after {
  content: ''; position: absolute; top: 51px; right: -13px;
  width: 24px; height: 2px;
  background: linear-gradient(90deg, var(--border), transparent);
}
.step.reveal { transition-delay: calc(var(--i, 0) * 120ms); }

/* ===== KEYBOARD SHORTCUTS ===== */
.kbd-actions {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 12px; max-width: 640px; margin: 0 auto;
}
.kbd-action {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; border-radius: 14px;
  background: var(--bg-card); border: 1px solid var(--border); transition: border-color .2s;
}
.kbd-action:hover { border-color: var(--border-hover); }
.kbd-action-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.kbd-action-icon.cy { background: rgba(6,182,212,.1); }
.kbd-action-icon.vi { background: rgba(124,58,237,.1); }
.kbd-action-icon.am { background: rgba(245,158,11,.1); }
.kbd-action-icon.in { background: rgba(99,102,241,.1); }
.kbd-action-name { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.kbd-action-desc { font-size: 12px; color: var(--text-muted); }
.kbd-action.reveal { transition-delay: calc(var(--i, 0) * 100ms); }
.kbd-note { text-align: center; font-size: 13px; color: var(--text-muted); margin-top: 20px; }
.kbd-note code {
  padding: 2px 8px; border-radius: 4px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  font-size: 12px; color: var(--text-secondary);
}

/* ===== SCROLL HINT ===== */
.scroll-hint-landing {
  text-align: center; padding: 24px 0 8px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer;
}
.scroll-hint-landing .sh-text {
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  letter-spacing: .3px; transition: color .2s;
}
.scroll-hint-landing:hover .sh-text { color: var(--indigo); }
.scroll-hint-landing .sh-arrow {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(99,102,241,.12), rgba(6,182,212,.12));
  display: flex; align-items: center; justify-content: center;
  animation: sh-bounce 2s ease-in-out infinite;
  transition: background .2s, box-shadow .2s;
}
.scroll-hint-landing:hover .sh-arrow {
  background: linear-gradient(135deg, rgba(99,102,241,.25), rgba(6,182,212,.25));
  box-shadow: 0 4px 16px rgba(99,102,241,.2);
}
@keyframes sh-bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)} }

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
  .step:not(:last-child)::after { display: none; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
  .features-grid { grid-template-columns: 1fr; }
  .features-head h2 { font-size: 26px; }
  .stats-bar { gap: 24px; flex-wrap: wrap; }
  .nav-links { gap: 16px; }
  .nav-link.hide-mobile { display: none; }
  .footer-inner { flex-direction: column; gap: 16px; text-align: center; }
  .cta-section h2 { font-size: 28px; }
  /* Two rows that never learned to wrap, beside .stats-bar above, which did.
     Measured at 375px before this line existed: .footer-links laid out 461px
     wide, so upgrade.html and upgrade-success.html rendered 418px inside a 375px
     viewport and background-mode.html 382px — three pages that slide sideways
     under a thumb. .cta-trust squeezed its three chips to 71px each, where
     "Privacy-first" needs 75px before its icon is counted, and broke it across
     the hyphen.
     ONLY flex-wrap, deliberately: a candidate that also set row-gap and
     justify-content changed the layout of six pinned pages that had no problem,
     because those two apply whether or not anything overflows. */
  .footer-links { flex-wrap: wrap; }
  .cta-trust { flex-wrap: wrap; }
  /* .nav-inner is a plain flex row (no wrap, justify-content: space-between)
     splitting ~311px at 375px between .nav-brand and .btn-install; neither had
     white-space: nowrap, so the label was the item that gave way. Measured on
     this tree before this rule existed: guide.html, how-it-works.html,
     index.html, support.html, upgrade.html and upgrade-success.html rendered
     the wordmark "Speed Auto / Clicker" at 48px instead of 28, and the same six
     read "+ Add to / Chrome" at 64.8px instead of 42.4.

     white-space: nowrap ALONE is not an option here, on the same evidence the
     footer fix above already recorded: forcing the label onto one line without
     shrinking it first only grows the element's min-content width, and a plain
     flex item does not shrink below that — the row would widen instead of
     wrapping. Shrinking the type and the button's padding first pays for the
     line, exactly as the footer rule above pays with flex-wrap; nowrap here
     only removes the option to wrap once the line already fits.

     Scoped to .nav-inner: .btn-install is reused, unscoped, on the larger
     hero CTA (.btn-install-hero) further down these same pages, which is a
     separate control in a much wider column — shrinking it too would be an
     unrelated visual change this fix has no reason to make, and it keeps
     wrapping exactly as before.

     Verified after, at 375px: every .nav-inner .nav-brand and
     .nav-inner .btn-install on all six pages render at or under one line's
     content height, and document.scrollingElement.scrollWidth stays equal to
     the 375px viewport on every one of the 16 live pages plus the 6 frozen
     snapshots (deploy/prod/frozen-site/, served with this stylesheet — the
     freeze pins page bytes, not CSS) at both 375px and 1280px. */
  .nav-inner .nav-brand { font-size: 14px; gap: 8px; white-space: nowrap; }
  .nav-inner .btn-install { padding: 10px 14px; font-size: 13px; white-space: nowrap; }
  .kbd-actions { grid-template-columns: 1fr; }
  .reviews-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 28px; letter-spacing: -.5px; }
  .hero-sub { font-size: 15px; }
}
@media (max-width: 480px) {
  .hero-actions { flex-direction: column; }
  .btn-install-hero { width: 100%; justify-content: center; }
  .btn-secondary { width: 100%; justify-content: center; }
}
/* Narrow phones (320 to 359px): the wordmark and the install button share the row, so both shrink a little. Every page, so none of
   them scrolls sideways (it used to live in upgrade-comparison-v4.css and only the pricing page had it). */
@media(max-width:359px){.nav-inner{padding-left:14px;padding-right:14px;gap:8px}.nav-inner .nav-brand{font-size:12px;gap:5px}.nav-inner .nav-brand img{width:22px;height:22px}.nav-inner .btn-install{padding:10px 9px;font-size:11px;gap:5px}}