@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --color-bg: #fbfcfd;
  --color-bg-2: #f2f5f7;
  --color-bg-white: #ffffff;
  --color-bg-rgb: 251, 252, 253;
  --color-bg-white-rgb: 255, 255, 255;
  --color-surface: rgba(14,165,233,0.03);
  --color-surface-hover: rgba(14,165,233,0.06);
  --color-text: #0f1720;
  --color-text-secondary: #4a5761;
  --color-text-muted: #93a1ac;

  --color-accent: #e90d33;
  --color-accent-2: #73e207;
  --color-accent-3: #08c8e3;
  --color-accent-warm: #e3b940;
  --color-accent-soft: #f1e3e5;
  --color-accent-2-soft: #eaf2e2;
  --color-accent-3-soft: #e3f0f2;
  --color-accent-warm-soft: #f0ede4;

  --color-star: #e3b940;
  --color-success: #159a52;
  --color-badge: #e90d33;
  --color-info: #08c8e3;
  --color-border: #e4e9ed;
  --color-border-light: #eef2f5;

  --color-footer-bg: #0b1017;
  --color-footer-text: #e6edf2;
  --color-footer-muted: #7d8b96;
  --color-footer-link: #b6c1cb;
  --color-footer-border: rgba(255,255,255,0.08);
  --color-footer-social-bg: rgba(255,255,255,0.06);
  --color-footer-social-border: rgba(255,255,255,0.1);

  --font-heading: 'Fraunces', 'Georgia', serif;
  --font-body: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --shadow-xs: 0 1px 2px rgba(15,23,32,0.04);
  --shadow-sm: 0 1px 3px rgba(15,23,32,0.05);
  --shadow-md: 0 4px 14px rgba(15,23,32,0.06);
  --shadow-lg: 0 12px 30px rgba(15,23,32,0.08);
  --shadow-xl: 0 22px 48px rgba(15,23,32,0.10);
}

/* ── Techy hairline system + monospace touches ─────────────────────────── */
body {
  background:
    linear-gradient(var(--color-border-light) 1px, transparent 1px) 0 0 / 100% 40px,
    var(--color-bg);
  background-attachment: fixed;
  letter-spacing: 0.1px;
}

.site-header {
  border-bottom: 1px solid var(--color-border);
  background: rgba(var(--color-bg-white-rgb),0.85);
}
.logo-text { letter-spacing: -0.5px; }
.nav-link.active { color: var(--color-accent-3); background: var(--color-accent-3-soft); }
.announcement-bar { background: #0b1017; letter-spacing: 0.5px; }
.announcement-bar strong { color: var(--color-accent-3); }

/* ── Hero — centered, cool duotone glow ────────────────────────────────── */
.hero {
  background:
    linear-gradient(180deg, #ffffff 0%, var(--color-bg-2) 100%);
  text-align: center;
}
.hero-content { text-align: center; }
.hero-actions { justify-content: center; }
.hero-subtitle { max-width: 520px; margin-left: auto; margin-right: auto; }
.hero::before {
  content: '';
  position: absolute;
  top: -40%; left: 50%;
  width: 900px; height: 900px;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 50% 40%, rgba(8,200,227,0.10) 0%, transparent 55%),
    radial-gradient(circle at 65% 60%, rgba(14,165,233,0.07) 0%, transparent 50%);
  pointer-events: none;
}
.hero-badge {
  color: var(--color-accent-3);
  background: var(--color-accent-3-soft);
  border: 1px solid rgba(8,200,227,0.35);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.hero-title { letter-spacing: -1.2px; }

/* ── Ghost-outline CTAs ─────────────────────────────────────────────────── */
.btn { border-radius: var(--radius-sm); }
.btn-primary {
  background: transparent;
  color: var(--color-text);
  border: 1.5px solid var(--color-text);
  box-shadow: none;
}
.btn-primary:hover {
  background: var(--color-text);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  filter: none;
}
.btn-outline {
  border: 1.5px solid var(--color-accent-3);
  color: var(--color-accent-3);
  background: transparent;
}
.btn-outline:hover { background: var(--color-accent-3-soft); }

/* ── Section headings ───────────────────────────────────────────────────── */
.section-title { letter-spacing: -0.6px; }

/* ── Product cards — fine hairlines + muted duotone frames ──────────────── */
.product-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: none;
}
.product-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-accent-3);
  box-shadow: var(--shadow-lg);
}
.card-image-wrapper {
  background: var(--color-bg-2);
}
.card-image-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(150deg, rgba(8,200,227,0.14) 0%, rgba(15,23,32,0.12) 100%);
  mix-blend-mode: multiply;
  opacity: 0.55;
  transition: opacity var(--transition);
  pointer-events: none;
}
.product-card:hover .card-image-wrapper::after { opacity: 0.15; }
.card-brand { color: var(--color-accent-3); font-family: var(--font-mono); letter-spacing: 1px; }
.card-title a:hover { color: var(--color-accent-3); }

/* Ghost CTA inside cards */
.card-body { flex: 1; display: flex; flex-direction: column; }
.card-body .btn-cta { margin-top: auto; }
.btn-cta {
  background: transparent;
  color: var(--color-text);
  border: 1.5px solid var(--color-border);
  box-shadow: none;
  border-radius: var(--radius-sm);
}
.btn-cta:hover {
  background: var(--color-text);
  color: #fff;
  border-color: var(--color-text);
  box-shadow: none;
  filter: none;
}

/* ── Monospace price tags ───────────────────────────────────────────────── */
.price-current, .price-original, .price-big, .price-was,
.price-save, .chart-price-label, .reviews-big-number {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum' 1;
}
.price-current { letter-spacing: -0.3px; }
.card-price {
  padding-top: 8px;
  border-top: 1px solid var(--color-border-light);
}

/* ── Categories ─────────────────────────────────────────────────────────── */
.category-card { border-radius: var(--radius-md); }
.category-card:hover { border-color: var(--color-accent-2); }
.category-icon { background: var(--color-accent-2-soft); color: #4a9e05; border-radius: var(--radius-sm); }

/* ── Newsletter (accent-2) ──────────────────────────────────────────────── */
.newsletter-form button { background: #4a9e05; }
.newsletter-form button:hover { background: #3d8404; }
.newsletter-form input:focus { border-color: var(--color-accent-2); }

/* ── FAQ (accent-3) ─────────────────────────────────────────────────────── */
.faq-item[open] { border-color: var(--color-accent-3); }
.faq-item[open] .faq-question::after { color: var(--color-accent-3); }

/* ── Guide + Top Picks (accent-warm) ────────────────────────────────────── */
.guide-number { background: var(--color-accent-warm); color: #4a3a08; }
.top-pick-rank { color: #b8901f; }
.top-pick-tag { color: #8a6c14; }

/* ── Stats bar — cyan → sky duotone ─────────────────────────────────────── */
.stats-section {
  background: linear-gradient(135deg, #08c8e3 0%, #0ea5e9 100%);
}
.stat-number { font-family: var(--font-mono); }

/* ── New widgets ────────────────────────────────────────────────────────── */
.price-history-section,
.user-reviews-section {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.chart-bar {
  background: linear-gradient(180deg, var(--color-accent-3-soft) 0%, var(--color-accent-3) 100%);
}
.chart-bar-current {
  background: linear-gradient(180deg, rgba(21,154,82,0.4) 0%, var(--color-success) 100%);
  box-shadow: 0 0 12px rgba(21,154,82,0.25);
}
.review-avatar { background: var(--color-accent-3); }
.review-bar-fill { background: var(--color-star); }

.pros-cons-widget,
.delivery-widget {
  background: var(--color-bg-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.delivery-item svg { color: var(--color-accent-3); }

.social-proof-popup {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent-3);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.popup-icon { background: var(--color-success); }

/* ── Footer accents ─────────────────────────────────────────────────────── */
.social-links a:hover { background: var(--color-accent-3); border-color: var(--color-accent-3); }

/* ── Card guard rails ───────────────────────────────────────────────────── */
.product-card { display: flex; flex-direction: column; }
.card-body { flex: 1; display: flex; flex-direction: column; }
.btn-cta { margin-top: auto; }