/* ============================================================
   Cerebrium Consulting — Colors & Type
   The source of truth for all brand visual tokens.
   Fonts are loaded via Google Fonts (see @import at top).
   ============================================================ */



@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-300.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-400.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-600.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-700.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ── CORE BRAND COLORS ─────────────────────────────────── */
  --cc-cyan:       #73EFEC;   /* Cerebrium Cyan. Primary accent. The "signal." */
  --cc-amber:      #C8924A;   /* Warmth. Human hand. Bullseye of the logo. */
  --cc-charcoal:   #1e1e1e;   /* Authority. Primary dark surface. */
  --cc-gray:       #848383;   /* Supporting text. The quiet voice. */

  /* ── SURFACES ──────────────────────────────────────────── */
  --cc-bg-light:   #EBECEE;   /* Cool gray. Primary light surface. NOT pure white. */
  --cc-bg-white:   #ffffff;   /* True white. Documents, dense data only. */
  --cc-bg-dark:    #141416;   /* Deep charcoal. Dark-mode page surface. */
  --cc-bg-card:    #1a1a1d;   /* Card surface on dark bg. */

  /* ── BORDERS ───────────────────────────────────────────── */
  --cc-border-light: rgba(30,30,30,0.08);
  --cc-border-mid:   rgba(30,30,30,0.12);
  --cc-border-dark:  rgba(132,131,131,0.15);
  --cc-border-cyan:  rgba(115,239,236,0.20);
  --cc-border-amber: rgba(200,146,74,0.20);

  /* ── SEMANTIC / STATE ──────────────────────────────────── */
  --cc-do:         #4CAF7D;   /* Do / positive / approved */
  --cc-dont:       #E05252;   /* Don't / error / rejected */

  /* ── CYAN / AMBER TINTS (recurring UI helpers) ─────────── */
  --cc-cyan-04:    rgba(115,239,236,0.04);
  --cc-cyan-06:    rgba(115,239,236,0.06);
  --cc-cyan-08:    rgba(115,239,236,0.08);
  --cc-cyan-12:    rgba(115,239,236,0.12);
  --cc-cyan-20:    rgba(115,239,236,0.20);
  --cc-amber-05:   rgba(200,146,74,0.05);
  --cc-amber-12:   rgba(200,146,74,0.12);

  /* ── TEXT ROLES (light surface) ────────────────────────── */
  --cc-fg-1:       #1e1e1e;   /* Primary body */
  --cc-fg-2:       #3a3a3a;   /* Long-form paragraph */
  --cc-fg-3:       #848383;   /* Quiet / meta */
  --cc-fg-invert:  #ffffff;
  --cc-fg-invert-2: rgba(255,255,255,0.82);
  --cc-fg-invert-3: rgba(200,200,200,0.75);

  /* ── TYPE FAMILIES ─────────────────────────────────────── */
  --cc-font-display: 'Hind Siliguri', 'Helvetica Neue', Arial, sans-serif;
  --cc-font-body:    'Hind Siliguri', 'Helvetica Neue', Arial, sans-serif;
  --cc-font-ui:      'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --cc-font-serif:   'Lora', Georgia, 'Times New Roman', serif;

  /* ── SPACING (÷4 base unit) ────────────────────────────── */
  --cc-sp-1:  4px;
  --cc-sp-2:  8px;
  --cc-sp-3:  16px;
  --cc-sp-4:  20px;
  --cc-sp-5:  24px;   /* ★ most-used */
  --cc-sp-6:  32px;
  --cc-sp-7:  48px;
  --cc-sp-8:  64px;   /* ★ most-used large */
  --cc-sp-9:  96px;
  --cc-sp-10: 128px;

  /* ── RADII ─────────────────────────────────────────────── */
  --cc-radius-pill:   999px;   /* badges, tags, chips */
  --cc-radius-sm:     6px;
  --cc-radius-md:     10px;    /* inputs, small buttons */
  --cc-radius-lg:     14px;    /* cards */
  --cc-radius-xl:     16px;    /* standard card */
  --cc-radius-2xl:    20px;    /* hero blocks */

  /* ── MOTION ────────────────────────────────────────────── */
  --cc-ease-out:       cubic-bezier(0.16, 1, 0.3, 1);       /* primary */
  --cc-ease-in-out:    cubic-bezier(0.45, 0, 0.55, 1);
  --cc-ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);   /* sparingly */
  --cc-dur-instant:    80ms;
  --cc-dur-fast:       160ms;
  --cc-dur-standard:   280ms;
  --cc-dur-deliberate: 480ms;
  --cc-dur-cinematic:  700ms;
  --cc-dur-pageload:   900ms;

  /* ── SHADOWS (soft, never heavy) ───────────────────────── */
  --cc-shadow-1: 0 1px 2px rgba(30,30,30,0.04), 0 1px 4px rgba(30,30,30,0.03);
  --cc-shadow-2: 0 2px 12px rgba(0,0,0,0.07);
  --cc-shadow-3: 0 4px 20px rgba(0,0,0,0.12);

  /* ── TOP BRAND RULE (cyan→amber→void) ──────────────────── */
  --cc-rule-brand: linear-gradient(90deg, #73EFEC 0%, #C8924A 55%, transparent 100%);
}

/* ============================================================
   SEMANTIC TYPE ROLES
   Use these instead of manually restating family/weight/size.
   All sizes use clamp() so they respond across viewports.
   ============================================================ */

.cc-eyebrow {
  font-family: var(--cc-font-ui);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cc-cyan);
}

.cc-chapter-tag {
  display: inline-flex; align-items: center;
  background: var(--cc-cyan-08);
  border: 1px solid var(--cc-cyan-20);
  border-radius: var(--cc-radius-pill);
  padding: 0.35rem 0.9rem;
  font-family: var(--cc-font-ui);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cc-cyan);
}

.cc-h1 {
  font-family: var(--cc-font-display);
  font-size: clamp(2.4rem, 6vw, 4.8rem);
  font-weight: 300;
  line-height: 1.02;
  color: inherit;
}
.cc-h1 strong { font-weight: 700; }
.cc-h1 em {
  font-style: italic;
  font-family: var(--cc-font-serif);
  color: var(--cc-gray);
  font-size: 0.82em;
}

.cc-h2 {
  font-family: var(--cc-font-display);
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  font-weight: 300;
  line-height: 1.1;
}
.cc-h2 strong { font-weight: 700; }
.cc-h2 em     { font-style: normal; color: var(--cc-cyan); }

.cc-h3 {
  font-family: var(--cc-font-display);
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 700;
  line-height: 1.15;
}

.cc-h4 {
  font-family: var(--cc-font-display);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.2;
}

.cc-p {
  font-family: var(--cc-font-body);
  font-size: clamp(0.88rem, 1.4vw, 1.02rem);
  font-weight: 400;
  line-height: 1.85;
  color: var(--cc-fg-2);
}
.cc-p strong { color: var(--cc-fg-1); font-weight: 600; }

.cc-p-sm {
  font-family: var(--cc-font-body);
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--cc-gray);
}

.cc-meta {
  font-family: var(--cc-font-ui);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cc-gray);
}

.cc-pull-quote {
  font-family: var(--cc-font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  line-height: 1.5;
  padding-left: 2rem;
  border-left: 3px solid var(--cc-cyan);
  color: var(--cc-fg-1);
}

.cc-code, code.cc-code {
  font-family: 'SF Mono', 'Menlo', Consolas, monospace;
  font-size: 0.82em;
  background: var(--cc-cyan-06);
  color: var(--cc-charcoal);
  padding: 0.1em 0.4em;
  border-radius: 4px;
}

/* ============================================================
   THE BRAND RULE — 2px cyan→amber gradient across top of hero
   ============================================================ */
.cc-brand-rule {
  height: 2px;
  background: var(--cc-rule-brand);
  width: 100%;
}

html,body{margin:0;padding:0;background:#fff;}
*{box-sizing:border-box;}
button{font-family:inherit;}
a{color:inherit;}
.section{padding:clamp(72px,9vw,120px) clamp(1.5rem,6vw,7rem);}
.container{max-width:1240px;margin:0 auto;width:100%;}
.eyebrow{font-family:var(--cc-font-ui);font-size:11px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--cc-gray);display:flex;align-items:center;gap:14px;}
.eyebrow .num{color:var(--cc-amber);}
.eyebrow .rule{flex:0 0 40px;height:1px;background:var(--cc-amber);}
.h-display{font-family:var(--cc-font-display);font-weight:300;color:var(--cc-charcoal);line-height:1.08;margin:0;letter-spacing:-0.005em;}
.h-display em{font-family:var(--cc-font-serif);font-style:italic;font-weight:400;color:var(--cc-cyan);}
.body-lg{font-family:var(--cc-font-body);font-size:18px;line-height:1.75;color:var(--cc-fg-2);max-width:640px;}
.btn-cyan{background:var(--cc-cyan);color:var(--cc-charcoal);border:none;border-radius:10px;padding:15px 28px;font-family:var(--cc-font-ui);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:transform .2s var(--cc-ease-out);text-decoration:none;display:inline-block;}
.btn-cyan:hover{transform:translateY(-1px);}
.btn-ghost{background:transparent;color:var(--cc-charcoal);border:1px solid var(--cc-border-light);border-radius:10px;padding:15px 28px;font-family:var(--cc-font-ui);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;text-decoration:none;display:inline-block;}
.btn-ghost.on-dark{color:#fff;border-color:rgba(255,255,255,.22);}
.mono{font-family:'JetBrains Mono','Consolas','Monaco',monospace;}