/* 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; }
.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) ===== */
.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 6.4s 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; }
  .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; }
}