/* ─── DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  /* brand gradient — jewel-tone PCM tricolor.
     ga/gb/gc are the SIGNATURE deep tones used in the hero gradient and large
     surfaces. The lt variants are slightly brighter for use on near-black bg
     where small text/UI accents need lift. Both lines stay high-chroma so
     nothing reads pale. */
  --ga: #c41e3a;   /* crimson — Physics */
  --gb: #1559a3;   /* deep electric blue — Chemistry */
  --gc: #117540;   /* forest emerald — Mathematics */
  --g-brand:    linear-gradient(135deg, var(--ga) 0%, var(--ga) 28%, var(--gb) 50%, var(--gb) 60%, var(--gc) 100%);
  --g-brand-h:  linear-gradient(90deg,  var(--ga) 0%, var(--ga) 28%, var(--gb) 50%, var(--gb) 60%, var(--gc) 100%);
  --g-brand-45: linear-gradient(45deg,  var(--ga) 0%, var(--ga) 28%, var(--gb) 50%, var(--gb) 60%, var(--gc) 100%);

  /* dark palette — near-black with blue undertone */
  --bg0: #03060e;
  --bg1: #080d1c;
  --bg2: #0e1730;
  --bg3: #15233f;

  /* text — slightly brighter txt1 so body copy doesn't fade */
  --txt0: #f5f7ff;
  --txt1: #d0dcf0;
  --txt2: #7c90ad;
  --txt3: #3c5176;

  /* accents — saturated jewel tones, NOT pinks/skies/limes */
  --red:      #c41e3a;
  --red-lt:   #ee3a55;
  --red-glow: rgba(196,30,58,0.26);
  --blue:     #1559a3;
  --blue-lt:  #3d8fd9;
  --blue-glow:rgba(21,89,163,0.26);
  --green:    #117540;
  --green-lt: #2ec070;
  --green-glow:rgba(17,117,64,0.22);

  /* surfaces */
  --card-bg:      rgba(8,13,28,0.78);
  --card-border:  rgba(208,220,240,0.12);
  --nav-bg:       rgba(3,6,14,0.84);
  --nav-border:   rgba(208,220,240,0.14);
  --form-bg:      rgba(3,6,14,0.60);
  --form-border:  rgba(208,220,240,0.24);

  /* typography */
  --sans: 'Barlow Condensed', sans-serif;
  --body: 'Barlow', sans-serif;
  --mono: 'Share Tech Mono', monospace;

  /* spacing */
  --gut: clamp(20px, 6vw, 72px);
  --nav-h: 56px;
}

/* light mode — warm editorial cream + deep ink + jewel-tone accents
   (Indian newsprint / textbook mood — deliberately not the ed-tech pastel reflex) */
:root[data-theme="light"] {
  --bg0: #faf4e6;   /* warm parchment */
  --bg1: #f4ecd8;
  --bg2: #ede2c8;
  --bg3: #e3d4b3;

  --txt0: #08101c;  /* deeper ink */
  --txt1: #1f3050;
  --txt2: #4d5f7e;
  --txt3: #8090aa;

  /* push deeper than the dark-mode tones — on cream the eye desaturates */
  --ga: #93162b;
  --gb: #0a3d6b;
  --gc: #0a5a30;
  --g-brand:    linear-gradient(135deg, var(--ga) 0%, var(--ga) 28%, var(--gb) 50%, var(--gb) 60%, var(--gc) 100%);
  --g-brand-h:  linear-gradient(90deg,  var(--ga) 0%, var(--ga) 28%, var(--gb) 50%, var(--gb) 60%, var(--gc) 100%);
  --g-brand-45: linear-gradient(45deg,  var(--ga) 0%, var(--ga) 28%, var(--gb) 50%, var(--gb) 60%, var(--gc) 100%);

  --red:      #93162b;
  --red-lt:   #a81e36;
  --red-glow: rgba(147,22,43,0.14);
  --blue:     #0a3d6b;
  --blue-lt:  #134371;
  --blue-glow:rgba(10,61,107,0.14);
  --green:    #0a5a30;
  --green-lt: #0f6638;
  --green-glow:rgba(10,90,48,0.12);

  --card-bg:     rgba(255,250,238,0.92);
  --card-border: rgba(8,16,28,0.14);
  --nav-bg:      rgba(250,244,230,0.92);
  --nav-border:  rgba(8,16,28,0.16);
  --form-bg:     rgba(255,250,238,0.80);
  --form-border: rgba(8,16,28,0.22);
}

/* ─── RESET ─────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
}
body {
  font-family: var(--body);
  background: var(--bg0);
  color: var(--txt0);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  line-height: 1.55;
  overflow-x: hidden;
  transition: background-color .3s ease, color .3s ease;
}
a { color: var(--red-lt); text-decoration: none; }
a:hover { color: var(--txt0); }

/* ─── NOISE GRAIN (dark mode only) ─────────────────────────── */
:root[data-theme="dark"] body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 999;
  opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* grid substrate */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(to right,  rgba(184,198,228,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(184,198,228,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
}
:root[data-theme="light"] body::before {
  background-image:
    linear-gradient(to right,  rgba(13,20,33,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(13,20,33,0.05) 1px, transparent 1px);
}
:root[data-theme="light"] body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 999;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

/* ─── SHARED UTILITIES ──────────────────────────────────────── */
.gt { color: var(--red-lt); }
.tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--txt2);
  display: inline-flex; align-items: center; gap: 6px;
}
.tag::before { content: '['; color: var(--ga); }
.tag::after  { content: ']'; color: var(--ga); }
.tag.b::before,.tag.b::after { color: var(--blue-lt); }
.tag.g::before,.tag.g::after { color: var(--green-lt); }

.sec-h {
  font-family: var(--sans);
  font-weight: 900;
  line-height: 0.94;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  font-size: clamp(40px, 8vw, 80px);
  color: var(--txt0);
  margin-top: 14px;
}
.sec-h .r { color: var(--red-lt); }
.sec-h .b { color: var(--blue-lt); }
.sec-h .g { color: var(--green-lt); }

.sec-sub {
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.6;
  color: var(--txt1);
  max-width: 62ch;
  margin-top: 18px;
}

section {
  position: relative;
  z-index: 5;
  padding: clamp(72px, 11vh, 120px) var(--gut) clamp(56px, 9vh, 100px);
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
}

/* gradient card border technique */
.card-gb {
  background:
    linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
    var(--g-brand) border-box;
  border: 1px solid transparent;
}
.card-gb:hover {
  background:
    linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
    linear-gradient(135deg, var(--ga) 0%, var(--gb) 52%, var(--gc) 100%) border-box;
  box-shadow: 0 0 40px rgba(196,30,58,0.12), 0 0 80px rgba(21,89,163,0.08);
}