/* ============================================================
   main.css — Design System
   CheapRedLightBed.com
   Style: Modern B2B SaaS · Light theme
   Inspired by: Stripe · Linear · Webflow · HubSpot
   ============================================================ */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;0,14..32,800&display=swap');

/* ============================================================
   1. COLOR SYSTEM
   ============================================================ */
:root {

  /* ── Brand / Accent ──────────────────────────────────────── */
  --color-accent:       #e11d48;
  --color-accent-hi:    #f43f5e;
  --color-accent-deep:  #be123c;
  --color-accent-dim:   rgba(225, 29, 72, 0.08);
  --color-accent-glow:  rgba(225, 29, 72, 0.18);

  /* ── Text ────────────────────────────────────────────────── */
  --color-ink:          #0f172a;
  --color-ink-2:        #1e293b;
  --color-body:         #475569;
  --color-muted:        #94a3b8;
  --color-placeholder:  #cbd5e1;

  /* ── Backgrounds ─────────────────────────────────────────── */
  --color-bg:           #ffffff;
  --color-bg-soft:      #f8fafc;
  --color-bg-muted:     #f1f5f9;
  --color-surface:      #ffffff;

  /* ── Borders ─────────────────────────────────────────────── */
  --color-border:       #e2e8f0;
  --color-border-hi:    #cbd5e1;

  /* ── Semantic ────────────────────────────────────────────── */
  --color-success:      #10b981;
  --color-warning:      #f59e0b;
  --color-error:        #ef4444;

  /* ── Backward-compatible aliases ─────────────────────────── */
  --clr-bg:          var(--color-bg);
  --clr-bg-2:        var(--color-bg-soft);
  --clr-bg-3:        var(--color-bg-muted);
  --clr-surface:     var(--color-surface);
  --clr-border:      var(--color-border);
  --clr-border-hi:   var(--color-border-hi);
  --clr-red:         var(--color-accent);
  --clr-red-hi:      var(--color-accent-hi);
  --clr-red-dim:     var(--color-accent-dim);
  --clr-red-glow:    var(--color-accent-glow);
  --clr-white:       var(--color-ink);
  --clr-off-white:   var(--color-ink-2);
  --clr-text:        var(--color-body);
  --clr-text-dim:    var(--color-muted);
  --clr-label:       var(--color-muted);

  /* ============================================================
     2. TYPOGRAPHY
     ============================================================ */
  --font-display:  'Inter', system-ui, sans-serif;
  --font-body:     'Inter', system-ui, sans-serif;
  --font-mono:     ui-monospace, 'SF Mono', 'Fira Code', monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;

  --leading-tight:   1.2;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
  --leading-loose:   1.75;

  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* ============================================================
     3. SPACING (8px base grid)
     ============================================================ */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 5vw, 2.5rem);

  /* ============================================================
     4. BORDER RADIUS — Rounded, modern
     ============================================================ */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ============================================================
     5. SHADOWS — Soft, layered
     ============================================================ */
  --shadow-xs:        0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-sm:        0 1px 3px 0 rgba(0,0,0,0.08), 0 1px 2px -1px rgba(0,0,0,0.05);
  --shadow-md:        0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-lg:        0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.05);
  --shadow-xl:        0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04);
  --shadow-card:      0 1px 3px 0 rgba(0,0,0,0.08), 0 1px 2px -1px rgba(0,0,0,0.05);
  --shadow-card-hover:0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.05);
  --shadow-accent:    0 4px 14px 0 rgba(225,29,72,0.25);

  /* ── Motion ──────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition:  0.2s var(--ease-out);
  --transition-slow: 0.35s var(--ease-out);
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

body {
  background-color: var(--color-bg);
  color: var(--color-body);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; font: inherit; border: none; background: none; }
address { font-style: normal; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-ink);
  letter-spacing: -0.025em;
  /* Natural case — modern SaaS does NOT use all-caps for headings */
}

h1 {
  font-size: clamp(var(--text-4xl), 6vw, var(--text-6xl));
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.03em;
  line-height: 1.1;
}
h2 {
  font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
  letter-spacing: -0.025em;
}
h3 {
  font-size: clamp(var(--text-xl), 2.5vw, var(--text-3xl));
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
}
h4 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.015em;
}
h5 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
}

p { margin-bottom: var(--space-4); }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
  color: var(--color-body);
}

/* ── Section label / eyebrow ────────────────────────────────  */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}
.section-label::before {
  content: '';
  display: block;
  width: 16px;
  height: 2px;
  background: var(--color-accent);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.section-heading { margin-bottom: var(--space-4); }
.section-sub {
  font-size: var(--text-lg);
  color: var(--color-body);
  max-width: 52ch;
  line-height: var(--leading-loose);
}

/* ── Utility ─────────────────────────────────────────────── */
.text-accent { color: var(--color-accent); }
.text-muted  { color: var(--color-muted); }
.text-ink    { color: var(--color-ink); }
.text-red    { color: var(--color-accent); }
.text-dim    { color: var(--color-muted); }
.text-mono   { font-family: var(--font-mono); font-size: 0.9em; }
.text-label  {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================
   SPACING
   ============================================================ */
.section    { padding: var(--space-24) 0; }
.section--lg { padding: var(--space-32) 0; }
.section--sm { padding: var(--space-16) 0; }
.divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-16) 0;
}

/* ============================================================
   IMAGE PLACEHOLDER RULES
   No SVG graphics — all image areas use <img> with object-fit.
   Neutral placeholder: easy to swap when real images arrive.
   ============================================================ */
.card-image,
.product-card-image,
.post-card-image,
.carousel-slide {
  background: var(--color-bg-muted);
  overflow: hidden;
}
.card-image img,
.product-card-image img,
.post-card-image img,
.carousel-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}

/* Old placeholder divs → neutral background */
.card-image-placeholder,
.product-card-placeholder,
.carousel-placeholder,
.article-cover-placeholder,
.post-card-image-placeholder {
  background: linear-gradient(135deg, var(--color-bg-muted) 0%, var(--color-bg-soft) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.placeholder-model,
.carousel-placeholder-model,
.article-cover-placeholder-title {
  color: rgba(15, 23, 42, 0.05);
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.02em;
}
.placeholder-glow,
.carousel-placeholder-glow,
.article-cover-glow,
.post-placeholder-glow {
  background: radial-gradient(circle, var(--color-accent-dim) 0%, transparent 70%);
}

/* ============================================================
   FORM ELEMENTS
   ============================================================ */
.form-group { display: flex; flex-direction: column; gap: var(--space-2); }

.form-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  color: var(--color-ink-2);
  text-transform: none;
}

.form-input,
.form-select,
.form-textarea {
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  padding: 0.65em 0.9em;
  width: 100%;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-dim);
}
.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-placeholder);
}
.form-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9em center;
  padding-right: 2.5em;
  -webkit-appearance: none;
}
.form-select option { background: var(--color-bg); color: var(--color-ink); }
.form-textarea { resize: vertical; min-height: 120px; line-height: var(--leading-relaxed); }

/* ── Spec tag pill ───────────────────────────────────────── */
.spec-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--color-body);
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* ============================================================
   SPECIFIC OVERRIDES for components that had hardcoded values
   ============================================================ */

/* Header blur backdrop */
.site-header {
  background: rgba(255,255,255,0.94) !important;
}

/* Hero grid lines — very subtle */
.hero::before,
.page-hero::before,
.services-hero::before,
.contact-hero::before,
.blog-hero::before,
.article-hero::before {
  background-image:
    linear-gradient(rgba(15,23,42,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,0.035) 1px, transparent 1px);
}
.hero::after {
  background: radial-gradient(circle, rgba(225,29,72,0.06) 0%, transparent 70%);
}

/* Hero panel */
.hero-panel {
  background: var(--color-surface);
  border-color: var(--color-border);
  box-shadow: var(--shadow-xl);
}
.hero-product-row { background: var(--color-bg-soft); }
.hero-product-row:hover { background: var(--color-accent-dim); }

/* Process / steps */
.process-step { background: var(--color-surface); }
.process-step:hover { background: var(--color-bg-soft); }

/* Sidebar CTA */
.sidebar-cta {
  background: var(--color-accent-dim);
  border-color: rgba(225,29,72,0.15);
}

/* Footer CTA bar */
.footer-cta-bar .btn--ghost {
  color: #ffffff;
  border-color: rgba(255,255,255,0.45);
}
.footer-cta-bar .btn--ghost:hover {
  background: rgba(255,255,255,0.15);
  border-color: #ffffff;
}

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}
.reveal.is-visible  { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ============================================================
   STAT BLOCK
   ============================================================ */
.stat-block { display: flex; flex-direction: column; gap: var(--space-1); }
.stat-number {
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
  font-weight: var(--weight-extrabold);
  color: var(--color-ink);
  line-height: 1;
  letter-spacing: -0.03em;
}
.stat-number span { color: var(--color-accent); }
.stat-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}