/* ============================================================
   AiDOOS — Marketing System
   Single source of tokens + utility classes for /templates/ pages.
   See DESIGN-MARKETING.md for intent and rules.

   Usage:
     {% load static %}
     <link rel="stylesheet" href="{% static 'css/marketing-system.css' %}">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400..700&display=swap" rel="stylesheet">

   And at the top of {% block body %}:
     <script>document.documentElement.classList.add('m-js');</script>

   Reveal-on-scroll JS lives at the bottom of this file's consumer page
   or can be inlined; see §Reveal.
   ============================================================ */


/* ─── Tokens (primitives) ─────────────────────────────────── */
:root {
  /* Ink ramp (ink → ink-4) */
  --m-ink:        oklch(22% 0.020 264);
  --m-ink-2:      oklch(38% 0.018 264);
  --m-ink-3:      oklch(56% 0.014 264);
  --m-ink-4:      oklch(72% 0.012 264);

  /* Surfaces */
  --m-canvas:     oklch(99.2% 0.003 264);   /* page background */
  --m-surface:    oklch(97.5% 0.005 264);   /* cards (top of gradient) */
  --m-surface-2:  oklch(95.5% 0.006 264);   /* cards (bottom of gradient) */
  --m-tint:       oklch(96.5% 0.008 264);   /* light tint blocks */

  /* Hairlines */
  --m-hair:        oklch(91% 0.010 264);
  --m-hair-strong: oklch(82% 0.014 264);

  /* Accent (brand blue) */
  --m-accent:        oklch(55% 0.230 264);
  --m-accent-hover:  oklch(49% 0.235 264);
  --m-accent-tint:   oklch(96.5% 0.025 264);
  --m-accent-on:     oklch(99% 0.004 264);

  /* Type */
  --m-font-display: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --m-font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* Type scale (fluid) */
  --m-t-caption: clamp(0.72rem, 0.78vw, 0.78rem);
  --m-t-body:    clamp(0.95rem, 1.05vw, 1.04rem);
  --m-t-lede:    clamp(1.05rem, 1.3vw, 1.22rem);
  --m-t-h3:      clamp(1.2rem, 1.6vw, 1.4rem);
  --m-t-h2:      clamp(1.9rem, 3.4vw, 2.9rem);
  --m-t-h1:      clamp(2.1rem, 4.2vw, 3.375rem);
  --m-t-display: clamp(2.8rem, 6vw, 4.5rem);

  /* Spacing rhythm */
  --m-space-section:    clamp(80px, 9vw, 120px);
  --m-space-section-lg: clamp(104px, 11vw, 152px);
  --m-space-block:      clamp(40px, 5vw, 64px);
  --m-space-gutter:     clamp(18px, 1.8vw, 28px);

  /* Radius (matches product app) */
  --m-r-control:  8px;
  --m-r-button:   10px;
  --m-r-card:     14px;
  --m-r-card-lg:  16px;
  --m-r-pill:     9999px;   /* chips/toggles/eyebrows only — never buttons */

  /* Elevation (subtle, ink-tinted) */
  --m-e1: 0 1px 2px rgba(23,25,28,0.04), 0 1px 3px rgba(23,25,28,0.06);
  --m-e2: 0 2px 4px rgba(23,25,28,0.04), 0 4px 12px rgba(23,25,28,0.08);
  --m-e3: 0 4px 8px rgba(23,25,28,0.05), 0 12px 32px rgba(23,25,28,0.12);
  --m-e-blue:       0 6px 18px rgba(45,91,255,0.28);
  --m-e-blue-hover: 0 10px 26px rgba(45,91,255,0.34);

  /* Motion */
  --m-d-fast:   120ms;
  --m-d-base:   180ms;
  --m-d-slow:   240ms;
  --m-d-slower: 460ms;
  --m-ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --m-ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --m-ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
}


/* ─── Base utility classes ────────────────────────────────── */

/* Section wrapper — applies max-width + vertical rhythm */
.m-section {
  max-width: 1180px;
  margin: var(--m-space-section) auto;
  padding: 0;
  color: var(--m-ink);
  font-family: var(--m-font-display);
}
.m-section--lg  { margin: var(--m-space-section-lg) auto; }
.m-section--tight { max-width: 1080px; }
.m-section * { box-sizing: border-box; }


/* ─── Type roles ──────────────────────────────────────────── */
.m-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  font-family: var(--m-font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--m-ink-3);
}
.m-kicker::before {
  content: "";
  width: 30px;
  height: 2px;
  background: var(--m-accent);
}

.m-eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: var(--m-r-pill);
  background: var(--m-surface);
  border: 1px solid var(--m-hair);
  font-family: var(--m-font-display);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--m-ink-2);
}

.m-display, .m-h1, .m-h2, .m-h3 {
  margin: 0;
  font-family: var(--m-font-display);
  color: var(--m-ink);
  font-weight: 700;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.m-display { font-size: var(--m-t-display); line-height: 1.04; letter-spacing: -0.035em; }
.m-h1      { font-size: var(--m-t-h1);      line-height: 1.04; letter-spacing: -0.03em; }
.m-h2      { font-size: var(--m-t-h2);      line-height: 1.05; }
.m-h3      { font-size: var(--m-t-h3);      line-height: 1.2;  font-weight: 600; }

.m-lede {
  margin: 0;
  font-family: var(--m-font-display);
  font-size: var(--m-t-lede);
  line-height: 1.5;
  font-weight: 450;
  color: var(--m-ink-2);
  max-width: 44ch;
}
.m-body {
  margin: 0;
  font-family: var(--m-font-display);
  font-size: var(--m-t-body);
  line-height: 1.55;
  color: var(--m-ink-2);
  max-width: 72ch;
}
.m-caption {
  margin: 0;
  font-family: var(--m-font-mono);
  font-size: var(--m-t-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--m-ink-3);
}

.m-em { font-style: normal; color: var(--m-accent); }
.m-mark { color: var(--m-ink); font-weight: 600; }


/* ─── Buttons (all 10px radius, no pill) ──────────────────── */
.m-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border: 1px solid transparent;
  border-radius: var(--m-r-pill);
  font-family: var(--m-font-display);
  font-size: 0.94rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--m-d-base) ease,
    color      var(--m-d-base) ease,
    border-color var(--m-d-base) ease,
    box-shadow var(--m-d-base) ease,
    transform  var(--m-d-fast) ease;
}
.m-btn:active { transform: translateY(1px); }
.m-btn .arr { transition: transform var(--m-d-slow) var(--m-ease-out-expo); }
.m-btn:hover .arr { transform: translateX(4px); }

.m-btn--primary {
  background: var(--m-accent);
  color: var(--m-accent-on);
  box-shadow: var(--m-e-blue);
}
.m-btn--primary:hover { background: var(--m-accent-hover); box-shadow: var(--m-e-blue-hover); }

.m-btn--strong {
  background: var(--m-ink);
  color: var(--m-accent-on);
  box-shadow: 0 6px 18px rgba(23,25,28,0.16);
}
.m-btn--strong:hover { background: oklch(16% 0.020 264); box-shadow: 0 10px 26px rgba(23,25,28,0.22); }

.m-btn--outline {
  background: transparent;
  color: var(--m-ink);
  border-color: var(--m-hair-strong);
}
.m-btn--outline:hover { border-color: var(--m-ink); background: oklch(96% 0.005 264); }

.m-btn--ghost {
  background: transparent;
  color: var(--m-ink);
  padding-left: 10px;
  padding-right: 10px;
}
.m-btn--ghost:hover { color: var(--m-accent); }


/* ─── Cards (subtle gradient surface) ─────────────────────── */
.m-card {
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 1.6vw, 24px);
  border: 1px solid var(--m-hair);
  border-radius: var(--m-r-card-lg);
  background: linear-gradient(180deg, var(--m-surface) 0%, var(--m-surface-2) 100%);
}
.m-card__art {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: clamp(20px, 2.4vw, 30px);
  color: oklch(46% 0.025 264);
}
.m-card__art svg {
  width: auto;
  height: 40px;
  display: block;
  overflow: visible;
}
.m-card__art .ln    { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
.m-card__art .ln--s { stroke: oklch(75% 0.014 264); }
.m-card__art .fl    { fill: currentColor; stroke: none; }
.m-card__label { margin: 0 0 12px; font-size: clamp(1.05rem, 1.2vw, 1.18rem); line-height: 1.2; font-weight: 600; color: var(--m-ink); }
.m-card__text  { margin: 0; font-size: clamp(0.92rem, 1vw, 0.98rem); line-height: 1.5; color: oklch(33% 0.02 264); font-weight: 475; }


/* ─── Atoms: hairline, stat, two-col head ─────────────────── */
.m-hair { height: 1px; background: var(--m-hair); border: 0; margin: 0; }

.m-stat__num {
  display: block;
  margin-bottom: 8px;
  font-family: var(--m-font-display);
  font-size: clamp(2.6rem, 5vw, 4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--m-ink);
}
.m-stat__txt { margin: 0; font-size: clamp(0.92rem, 1.05vw, 1rem); line-height: 1.5; color: var(--m-ink-2); max-width: 30ch; }

/* Hero/proof-style two-column head: kicker spans top, headline left, lede right */
.m-headgrid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 760px) {
  .m-headgrid { grid-template-columns: 1fr; gap: clamp(16px, 3vw, 22px); }
}


/* ─── Reveal-on-scroll ────────────────────────────────────── */
/* JS guards: only apply hide-state when JS is available, to avoid no-script breakage. */
html.m-js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity   var(--m-d-slower) var(--m-ease-out-expo),
    transform var(--m-d-slower) var(--m-ease-out-expo);
  will-change: opacity, transform;
}
html.m-js [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html.m-js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .m-btn, .m-btn .arr { transition: none !important; }
}


/* ─── Keyframe animations (opt-in) ────────────────────────── */
@keyframes m-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes m-slide-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes m-scale-in {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}
.m-anim-fade-in  { animation: m-fade-in  var(--m-d-slow) var(--m-ease-out-expo); }
.m-anim-slide-up { animation: m-slide-up var(--m-d-slow) var(--m-ease-out-expo); }
.m-anim-scale-in { animation: m-scale-in var(--m-d-base) var(--m-ease-out-expo); }


/* ─── Reveal-on-scroll JS (paste into page once) ──────────────
   Inline at the start of {% block body %}:
     <script>document.documentElement.classList.add('m-js');</script>

   And at the end of body:
     <script>
     (function () {
       var STAGGER_MS = 90;
       var prefersReduced = window.matchMedia &&
         window.matchMedia('(prefers-reduced-motion: reduce)').matches;
       var all = document.querySelectorAll('[data-reveal]');
       if (!all.length) return;
       if (prefersReduced) {
         all.forEach(function (el) { el.classList.add('is-visible'); });
         return;
       }
       document.querySelectorAll('[data-reveal-stagger]').forEach(function (g) {
         g.querySelectorAll('[data-reveal]').forEach(function (el, i) {
           el.style.transitionDelay = (i * STAGGER_MS) + 'ms';
         });
       });
       if (!('IntersectionObserver' in window)) {
         all.forEach(function (el) { el.classList.add('is-visible'); });
         return;
       }
       var groupIO = new IntersectionObserver(function (entries) {
         entries.forEach(function (entry) {
           if (entry.isIntersecting) {
             entry.target.querySelectorAll('[data-reveal]').forEach(function (el) {
               el.classList.add('is-visible');
             });
             groupIO.unobserve(entry.target);
           }
         });
       }, { threshold: 0.08, rootMargin: '0px 0px -6% 0px' });
       document.querySelectorAll('[data-reveal-stagger]').forEach(function (g) { groupIO.observe(g); });
       var soloIO = new IntersectionObserver(function (entries) {
         entries.forEach(function (entry) {
           if (entry.isIntersecting) {
             entry.target.classList.add('is-visible');
             soloIO.unobserve(entry.target);
           }
         });
       }, { threshold: 0.15, rootMargin: '0px 0px -8% 0px' });
       all.forEach(function (el) {
         if (!el.closest('[data-reveal-stagger]')) soloIO.observe(el);
       });
     })();
     </script>
   ──────────────────────────────────────────────────────────── */