/* ==========================================================================
   AWI Design Overhaul — Override Layer
   Loaded AFTER inline <style> blocks. Cascades over slate-900/Inter defaults.
   Source plan: AWI Promo/plans/website-design-overhaul.md
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  --awi-bg:           #0a0a0a;            /* true near-black body */
  --awi-surface:      #111114;            /* cards / panels */
  --awi-surface-hi:   #161619;            /* hover / elevated */
  --awi-line:         rgba(255,255,255,.08);
  --awi-line-strong:  rgba(255,255,255,.14);

  --awi-text:         #ffffff;
  --awi-text-soft:    #c7ccd4;
  --awi-text-mute:    rgba(255,255,255,.55);
  --awi-text-faint:   rgba(255,255,255,.35);

  --awi-accent:       #3b82f6;            /* brand blue, single accent */
  --awi-accent-soft:  #60a5fa;
  --awi-accent-tint:  rgba(59,130,246,.10);
  --awi-accent-line:  rgba(59,130,246,.32);

  --awi-ok:           #10b981;
  --awi-warn:         #f59e0b;
  --awi-bad:          #ef4444;

  --awi-r-sm:  6px;
  --awi-r-md:  10px;
  --awi-r-lg:  14px;

  --awi-font-sans: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --awi-font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- Phase 1: Typography ---------- */
html, body {
  font-family: var(--awi-font-sans) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.font-num,
.blog-meta span:not(.blog-category),
.compare-table td:not(:first-child),
.service-card .icon,
.process-num,
.why-item .num,
.service-num,
.stat-value,
.kpi-value {
  font-family: var(--awi-font-mono) !important;
  font-feature-settings: "tnum" 1, "ss01" 1;
  letter-spacing: -0.01em;
}

/* Drop the gradient-text on every heading except H1 */
h2, h3, h4, h5, h6,
.section-title,
.blog-content h2,
.blog-content h3,
.blog-content h4 {
  background: none !important;
  -webkit-text-fill-color: var(--awi-text) !important;
  color: var(--awi-text) !important;
}

/* H1 keeps gradient but uses cleaner stops */
h1, .hero h1, .blog-article h1, .section-title.is-hero {
  background: linear-gradient(135deg, #ffffff 0%, #94a3b8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Phase 2: Colour palette ---------- */
body {
  background: var(--awi-bg) !important;
  color: var(--awi-text);
}

/* Tame the radial accent overlay */
.bg-gradient {
  background:
    radial-gradient(ellipse at 20% 15%, rgba(59,130,246,0.07) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 85%, rgba(59,130,246,0.04) 0%, transparent 55%) !important;
  opacity: 1;
}

nav {
  background: rgba(10,10,10,0.85) !important;
  border-bottom: 1px solid var(--awi-line) !important;
}

/* Strip secondary accents (purple, pink) — re-tint generic chips to brand blue.
   .analytics-tag stays green (it's a "Coming Soon" status — severity colour). */
.section-label,
.hero-tag,
.blog-category,
.category-chip {
  background: var(--awi-accent-tint) !important;
  border-color: var(--awi-accent-line) !important;
  color: var(--awi-accent-soft) !important;
  border-radius: var(--awi-r-sm) !important;
  padding: 5px 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

/* Status chips keep severity colour, lose the pill */
.analytics-tag {
  background: rgba(16, 185, 129, 0.10) !important;
  border: 1px solid rgba(16, 185, 129, 0.30) !important;
  color: #34d399 !important;
  border-radius: var(--awi-r-sm) !important;
  padding: 5px 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

/* ---------- Phase 3: Surface treatment (drop glassmorphism) ---------- */
.problem-card,
.service-card,
.why-item,
.blog-card,
.analytics-features,
.blog-cta,
.source-list,
.feature-card,
.testimonial-card,
.faq-item {
  background: var(--awi-surface) !important;
  border: 1px solid var(--awi-line) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: var(--awi-r-lg) !important;
  box-shadow: none !important;
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}

.problem-card:hover,
.service-card:hover,
.feature-card:hover,
.blog-card:hover {
  background: var(--awi-surface-hi) !important;
  border-color: var(--awi-line-strong) !important;
}

/* Tighten card padding ~15% */
.service-card     { padding: 30px !important; }
.problem-card     { padding: 28px !important; }
.analytics-features { padding: 24px !important; }
.analytics-box    { padding: 48px !important; border-radius: 18px !important; }
.blog-cta         { padding: 32px !important; border-radius: var(--awi-r-lg) !important; }

/* Featured analytics card — keep a tinted treatment but lose the purple */
.analytics-box,
.featured-card {
  background:
    linear-gradient(135deg, rgba(59,130,246,0.10) 0%, rgba(59,130,246,0.03) 100%) !important;
  border: 1px solid var(--awi-accent-line) !important;
  backdrop-filter: none !important;
}

/* Icon containers — drop pastel-tinted squares, go monochrome */
.problem-card .icon,
.feature-card .icon,
.why-item .num {
  background: var(--awi-accent-tint) !important;
  border: 1px solid var(--awi-accent-line) !important;
  color: var(--awi-accent-soft) !important;
  border-radius: var(--awi-r-md) !important;
}

/* Service-card numbered badges (01/02/03) — keep solid brand blue, square corners */
.service-card .icon,
.process-num {
  background: var(--awi-accent) !important;
  border: none !important;
  color: #ffffff !important;
  border-radius: var(--awi-r-md) !important;
  box-shadow: none !important;
  font-family: var(--awi-font-mono) !important;
  letter-spacing: -0.02em;
}

/* Buttons */
.btn { border-radius: var(--awi-r-md) !important; }
.btn-primary {
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%) !important;
  box-shadow: 0 2px 10px rgba(59,130,246,.25) !important;
}
.btn-primary:hover {
  box-shadow: 0 4px 18px rgba(59,130,246,.35) !important;
  transform: translateY(-1px);
}
.btn-secondary {
  background: transparent !important;
  border: 1px solid var(--awi-line-strong) !important;
  color: var(--awi-text) !important;
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.22) !important;
}

/* Compare tables */
.compare-table {
  border-radius: var(--awi-r-lg) !important;
  overflow: hidden;
  border: 1px solid var(--awi-line) !important;
}
.compare-table th {
  background: rgba(59,130,246,0.08) !important;
  color: var(--awi-accent-soft) !important;
}
.compare-table td {
  background: var(--awi-surface) !important;
}

/* Blockquote — drop the rounded gradient pillow */
.blog-content blockquote {
  background: rgba(255,255,255,0.02) !important;
  border-left: 3px solid var(--awi-accent) !important;
  border-radius: 0 !important;
  padding: 20px 24px !important;
}

/* Source list */
.source-list {
  border-radius: var(--awi-r-lg) !important;
  padding: 22px 26px !important;
}

/* ---------- Phase 4: Icons (monochrome) ---------- */
/* Pastel-tinted icon containers neutralised via the rules above; emoji or
   inline SVG inside renders on a brand-blue tint. Pages that get real Lucide
   SVGs (homepage, analytics) wrap them in .icon and rely on these rules: */
.icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
}
.service-card .icon svg { width: 28px; height: 28px; stroke: #ffffff; }

/* Hamburger / floating buttons unchanged */

/* ---------- Phase 5: Surface-specific ---------- */
/* Homepage hero */
.hero h1 .accent {
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Blog article meta — dates and read-times in mono */
.blog-article .blog-meta { font-size: 13px; color: var(--awi-text-mute); }
.blog-article .blog-meta span { font-feature-settings: "tnum" 1; }
.blog-article .blog-meta .blog-category { font-family: var(--awi-font-sans) !important; }

/* Blog subtitle — single accent left border */
.blog-subtitle { border-left-color: var(--awi-accent) !important; }

/* Footer */
footer { border-top-color: var(--awi-line) !important; }
.footer-copyright { font-family: var(--awi-font-mono); font-size: 12px; letter-spacing: 0.02em; }

/* ---------- Generic links ---------- */
a { color: var(--awi-accent-soft); }
.blog-content a { color: var(--awi-accent-soft) !important; }
.blog-content a:hover { color: #93bbfc !important; }

/* ---------- Selection ---------- */
::selection { background: rgba(59,130,246,0.35); color: #ffffff; }

/* ---------- Phase 6: Homepage density ---------- */
/* Tighten the marketing-heavy vertical padding by ~35%. Applies to index.html
   and analytics.html — the only pages using these classes. */
.section          { padding: 64px 50px !important; }
.analytics-cta    { padding: 64px 50px !important; }
.final-cta        { padding: 64px 50px !important; }
.final-cta-box    { padding: 48px 40px !important; border-radius: var(--awi-r-lg) !important; }
footer            { padding: 40px 50px !important; }

/* Hero: kill the 90vh stretch — let content size itself */
.hero {
  min-height: auto !important;
  padding: 130px 50px 56px !important;
}
.hero h1     { margin-bottom: 18px !important; }
.hero p      { margin-bottom: 28px !important; }
.hero-tag    { margin-bottom: 20px !important; }

/* Section headers: less air above the grid */
.problem-header,
.services-header,
.why-header { margin-bottom: 36px !important; }

/* Card grid gaps — slightly tighter */
.problem-grid,
.services-grid,
.process-grid { gap: 20px !important; }

@media (max-width: 768px) {
  .section,
  .analytics-cta,
  .final-cta { padding: 48px 20px !important; }
  .hero      { padding: 100px 20px 40px !important; }
  .final-cta-box { padding: 32px 22px !important; }
}

/* ---------- Reduced motion respect ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}