/* =========================================================
   AI OS Blueprint — Design Tokens
   The terminal-noir system. Cyan accents on near-black.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,300..700;1,9..40,300..700&family=JetBrains+Mono:wght@300;400;500;600&display=swap');

:root {
  /* ---------- COLOR ---------- */
  /* Surfaces (dark stack — lightest on top) */
  --bg:              #06080d; /* page */
  --bg-elevated:     #0c1019; /* sections */
  --bg-card:         #0f1520; /* cards */
  --bg-card-hover:   #141c2b;
  --surface:         #1a2235; /* surface accents */

  /* Lines */
  --border:          #1e2a3d;
  --border-bright:   #2a3a52;

  /* Type */
  --text:            #e8edf5;
  --text-secondary:  #8a95a8;
  --text-muted:      #5a6478;

  /* Brand accents */
  --accent:          #00e5ff; /* cyan — the signal color */
  --accent-dim:      rgba(0,229,255,.12);
  --accent-glow:     rgba(0,229,255,.25);

  --gold:            #eeb544; /* secondary — pricing, "wake up" CTAs */
  --gold-dim:        rgba(238,181,68,.10);
  --gold-glow:       rgba(238,181,68,.25);

  /* Status */
  --red:             #ff4757; /* errors, "this is NOT" */
  --green:           #2ed573; /* success, "this IS" */
  --yellow:          #febc2e; /* terminal warnings */

  /* ---------- TYPE ---------- */
  --font-display:    'Instrument Serif', Georgia, serif;
  --font-body:       'DM Sans', system-ui, sans-serif;
  --font-mono:       'JetBrains Mono', ui-monospace, monospace;

  /* Display scale — Instrument Serif italic (clamps fluidly) */
  --t-display-xl:    clamp(3rem, 6vw, 4.8rem);    /* hero */
  --t-display-lg:    clamp(2.2rem, 4vw, 3.5rem);  /* section titles */
  --t-display-md:    clamp(1.8rem, 3.5vw, 2.6rem);
  --t-display-sm:    1.5rem;                       /* card headers */

  /* Kicker scale — DM Sans 700 UPPERCASE, very tight, line-height 0.9.
     The print-guide voice. Loud, blocky, command-line declarative.
     Pair with cyan emphasis on the second line. */
  --t-kicker-mega:   clamp(4rem, 9vw, 7.5rem);   /* cover hero */
  --t-kicker-xl:     clamp(2.6rem, 5vw, 4rem);   /* section openers */
  --t-kicker-lg:     clamp(2rem, 4vw, 3rem);     /* secondary kickers */
  --t-kicker-md:     1.6rem;                      /* punch-strip heads */
  --t-kicker-sm:     1.15rem;                     /* card labels */

  /* Body */
  --t-lead:          1.15rem; /* hero subhead */
  --t-body-lg:       1.05rem;
  --t-body:          1rem;
  --t-body-sm:       0.9rem;

  /* Mono / labels */
  --t-mono:          0.78rem;
  --t-mono-sm:       0.72rem;
  --t-mono-xs:       0.65rem;

  /* Tracking */
  --track-tight:     -0.02em;
  --track-normal:     0;
  --track-wide:       0.05em;
  --track-wider:      0.10em;
  --track-widest:     0.15em;

  /* Leading */
  --lead-tight:      1.05;
  --lead-snug:       1.35;
  --lead-normal:     1.65;
  --lead-loose:      1.8;

  /* ---------- SPACING ---------- */
  --s-1:   0.25rem;   /*  4 */
  --s-2:   0.5rem;    /*  8 */
  --s-3:   0.75rem;   /* 12 */
  --s-4:   1rem;      /* 16 */
  --s-5:   1.5rem;    /* 24 */
  --s-6:   2rem;      /* 32 */
  --s-7:   2.5rem;    /* 40 */
  --s-8:   3rem;      /* 48 */
  --s-9:   4rem;      /* 64 */
  --s-10:  6rem;      /* 96 */
  --s-11:  7rem;      /* 112 — section padding */

  --container:       1200px;

  /* ---------- RADIUS ---------- */
  /* Brand is mostly hard-edged (zero radius). Curves are reserved for
     phone / message UIs and round status dots. */
  --r-0:    0;
  --r-sm:   4px;     /* tiny chips */
  --r-md:   6px;     /* terminals, panels */
  --r-lg:   12px;    /* phone mock, scenario blocks */
  --r-pill: 999px;

  /* ---------- SHADOWS / GLOWS ---------- */
  --shadow-sm:   0 4px 12px rgba(0,0,0,.25);
  --shadow-md:   0 12px 40px rgba(0,0,0,.30);
  --shadow-lg:   0 20px 60px rgba(0,0,0,.50);
  --glow-cyan:   0 8px 30px var(--accent-glow);
  --glow-gold:   0 6px 24px var(--gold-glow);

  /* ---------- MOTION ---------- */
  --ease-standard:  cubic-bezier(.16,1,.3,1);
  --ease-in-out:    cubic-bezier(.4,0,.2,1);
  --t-fast:   0.25s;
  --t-base:   0.35s;
  --t-slow:   0.7s;

  /* ---------- LAYOUT ---------- */
  --grid-line: 80px;
}

/* =========================================================
   Base resets used across every preview / page
   ========================================================= */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: var(--lead-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent); color: var(--bg); }

/* The signature subtle 80px grid that sits behind every page */
.grid-bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: var(--grid-line) var(--grid-line);
  opacity: .08;
}

/* SVG noise overlay — present on every screen, opacity .4 */
.noise {
  content: '';
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
  opacity: .4;
}

.container { max-width: var(--container); margin: 0 auto; padding: 0 2rem; }

/* Eyebrow / section tag — used everywhere */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  font-weight: 400;
  color: var(--accent);
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.eyebrow::before {
  content: ''; width: 24px; height: 1px; background: var(--accent);
}

/* =========================================================
   KICKER — the heavy uppercase headline pattern
   Used on print guides, section openers, promotion pages.
   ========================================================= */
.kicker {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  line-height: 0.93;
  color: var(--text);
}
.kicker em { font-style: normal; color: var(--accent); }
.kicker.mega { font-size: var(--t-kicker-mega); letter-spacing: -0.035em; line-height: 0.88; }
.kicker.xl   { font-size: var(--t-kicker-xl); }
.kicker.lg   { font-size: var(--t-kicker-lg); }
.kicker.md   { font-size: var(--t-kicker-md); }

/* Diamond bullet list — the editorial bullet style */
ul.diamond {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0.4rem;
}
ul.diamond > li {
  font-size: var(--t-body); line-height: 1.5;
  color: var(--text); padding-left: 1.3rem; position: relative;
}
ul.diamond > li::before {
  content: '\25C6';
  position: absolute; left: 0; top: 0.1em;
  color: var(--accent); font-size: 0.85em;
}
ul.diamond.gold > li::before { color: var(--gold); }
ul.diamond.dim > li::before { color: var(--text-muted); }
ul.diamond.dim > li { color: var(--text-secondary); }