/* =====================================================================
   NovaCompass design tokens
   Source of truth: live computed styles of
   nc-professional-compass.web.app (master brand, "Night Sky")
   child-intelligence.web.app (kids sub-brand, "Jelly")
   Extracted 5 Oct 2026. Values below are what the browser actually renders.
   ===================================================================== */

/* Fonts. EN uses Space Grotesk + Jost. Neither covers Cyrillic well,
   so RU swaps display and labels to Manrope (the live site does this). */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Jost:wght@400;500;600&family=Manrope:wght@500;600;700&family=Inter:wght@400;500&family=Cormorant+Garamond:ital,wght@1,500&family=Fredoka:wght@600;700&family=Nunito:wght@500;700;800&display=swap');

:root {
  /* ---------- Master brand: Night Sky ---------- */
  --nc-base:          #07060C;               /* page background, under the starfield */
  --nc-text-1:        #EDE8DE;               /* headings, logo */
  --nc-text-2:        rgba(240,235,226,.87); /* body copy */
  --nc-text-3:        rgba(240,235,226,.71); /* secondary copy, card text */
  --nc-text-4:        rgba(240,235,226,.55); /* captions, footer, field labels */

  --nc-gold:          #E8B94F;               /* THE accent: eyebrows, active toggle, CTA, quote rule */
  --nc-gold-deep:     #B98A38;               /* end stop of CTA gradient */
  --nc-gold-muted:    #C9A24B;
  --nc-ink-on-gold:   #1A1610;               /* text on gold surfaces */
  --nc-error:         #E2957A;               /* soft terracotta for inline errors */

  /* supporting palette, use sparingly (charts, report axes) */
  --nc-terracotta:    #B4623E;
  --nc-azure:         #3E6FD9;
  --nc-sage:          #6F8A71;
  --nc-green:         #3F7D5C;

  /* glass */
  --nc-glass:         rgba(255,255,255,.085);
  --nc-glass-pill:    rgba(255,255,255,.07);
  --nc-glass-line:    rgba(255,255,255,.20);
  --nc-glass-blur:    blur(24px) saturate(1.6);
  --nc-card-bg:       linear-gradient(148deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,.075) 44%, rgba(255,255,255,.09) 100%);
  --nc-card-line:     rgba(255,255,255,.22);
  --nc-card-shadow:   0 30px 80px rgba(0,0,0,.62), 0 2px 10px rgba(0,0,0,.35);
  --nc-card-blur:     blur(3px) saturate(1.85) brightness(1.32);
  --nc-inset:         rgba(0,0,0,.28);       /* segmented control track */
  --nc-field:         rgba(255,255,255,.05);
  --nc-field-line:    rgba(255,255,255,.16);

  /* type families */
  --nc-f-display: 'Space Grotesk', 'Manrope', -apple-system, 'Segoe UI', sans-serif;
  --nc-f-label:   'Jost', 'Manrope', -apple-system, 'Segoe UI', sans-serif;
  --nc-f-body:    'Inter', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --nc-f-quote:   'Cormorant Garamond', Georgia, serif;   /* Nora's voice only */
  --nc-f-code:    SFMono-Regular, Menlo, Consolas, monospace; /* access codes only */

  /* type scale (desktop, px) */
  --nc-h1: 54px;  --nc-h1-track: -0.028em;   /* -1.512px at 54 */
  --nc-h2: 46px;  --nc-h2-track: -0.028em;
  --nc-h3: 27px;  --nc-h3-track: -0.028em;
  --nc-h4: 21px;  --nc-h4-track: -0.028em;
  --nc-lead: 19px;
  --nc-body: 16px;
  --nc-small: 14.5px;
  --nc-caption: 13px;
  --nc-eyebrow: 12.5px; --nc-eyebrow-track: 0.26em;  /* 3.25px at 12.5 */
  --nc-label: 11.5px;   --nc-label-track: 0.10em;

  /* radii */
  --nc-r-card: 28px;
  --nc-r-panel: 30px;
  --nc-r-field: 16px;
  --nc-r-btn: 44px;
  --nc-r-pill: 40px;

  /* layout */
  --nc-container: 1052px;   /* content column width on the live page */
  --nc-gutter: 24px;

  /* ---------- Kids sub-brand: Jelly (Child Potential 360 only) ---------- */
  --kid-paper:   #FBF7FF;
  --kid-paper-2: #F4ECFF;
  --kid-ink:     #1A1530;
  --kid-ink-2:   #3D3458;
  --kid-ink-3:   #6E6390;
  --kid-violet:  #7C5CFF;
  --kid-violet-2:#5F3CF0;
  --kid-rose:    #FF6EA3;
  --kid-peach:   #FF9D6E;
  --kid-mint:    #5FD4A8;
  --kid-gold:    #FFC043;
  --kid-sky:     #6EC5FF;
  --kid-blob-1:  #FCE7FF;  --kid-blob-2: #DCD0FF;  --kid-blob-3: #FFD6E8;  --kid-blob-4: #FFF4D6;
  --kid-line:    rgba(124,92,255,.14);
  --kid-card-shadow: 0 24px 80px -28px rgba(63,38,160,.30), 0 4px 14px -4px rgba(63,38,160,.10);
  --kid-soft-shadow: 0 18px 60px -20px rgba(91,60,220,.35), 0 6px 18px -8px rgba(91,60,220,.20);
  --kid-f-display: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --kid-f-body:    'Nunito', system-ui, sans-serif;
  --kid-r-card: 24px;
  --kid-r-btn: 18px;
}

/* Russian: swap display + labels to Manrope (Cyrillic-safe). Body Inter and quote Cormorant both have Cyrillic. */
html[lang="ru"] {
  --nc-f-display: 'Manrope', -apple-system, 'Segoe UI', sans-serif;
  --nc-f-label:   'Manrope', -apple-system, 'Segoe UI', sans-serif;
}
html[lang="ru"] h1 { font-size: 42px; } /* RU headlines run ~25% longer, the live site drops 54 -> 42 */

/* ---------------- base ---------------- */
body {
  margin: 0;
  background: var(--nc-base);
  color: var(--nc-text-2);
  font: 400 var(--nc-body)/1.65 var(--nc-f-body);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4 { font-family: var(--nc-f-display); color: var(--nc-text-1); font-weight: 600; margin: 0; }
h1 { font-size: var(--nc-h1); line-height: 1.1;  letter-spacing: var(--nc-h1-track); }
h2 { font-size: var(--nc-h2); line-height: 1.04; letter-spacing: var(--nc-h2-track); }
h3 { font-size: var(--nc-h4); line-height: 1.05; letter-spacing: var(--nc-h4-track); font-weight: 500; }

/* ---------------- components ---------------- */
.nc-eyebrow {            /* "HOW IT WORKS" */
  font: 500 12px/1.65 var(--nc-f-label); letter-spacing: .22em; text-transform: uppercase; color: var(--nc-gold);
}
.nc-chip {               /* hero pill: "● NOVACOMPASS · CAREER EXPLORATION" */
  display: inline-flex; align-items: center; gap: 12px; padding: 12px 24px;
  font: 600 var(--nc-eyebrow)/1 var(--nc-f-label); letter-spacing: var(--nc-eyebrow-track); text-transform: uppercase;
  color: var(--nc-gold); background: rgba(255,255,255,.09); border: 1px solid var(--nc-glass-line);
  border-radius: var(--nc-r-pill); backdrop-filter: var(--nc-glass-blur);
}
.nc-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--nc-gold); }
.nc-lead { font-size: var(--nc-lead); line-height: 1.7; color: var(--nc-text-2); }

.nc-card {               /* glass card: steps, privacy, quote */
  background: var(--nc-card-bg); border: 1px solid var(--nc-card-line); border-radius: var(--nc-r-card);
  box-shadow: var(--nc-card-shadow); backdrop-filter: var(--nc-card-blur); padding: 40px 32px;
}
.nc-btn {                /* primary CTA, gold gradient pill */
  display: inline-flex; align-items: center; justify-content: center; min-height: 58px; padding: 0 32px;
  font: 500 16px/1 var(--nc-f-display); color: var(--nc-ink-on-gold);
  background: linear-gradient(135deg, var(--nc-gold), var(--nc-gold-deep));
  border: 0; border-radius: var(--nc-r-btn); box-shadow: 0 18px 48px rgba(232,185,79,.28); cursor: pointer; text-decoration: none;
}
.nc-btn--ghost {         /* secondary, never gold */
  background: var(--nc-glass); color: var(--nc-text-1); border: 1px solid var(--nc-glass-line); box-shadow: none;
}
.nc-seg { display: flex; padding: 4px; background: var(--nc-inset); border: 1px solid rgba(255,255,255,.13); border-radius: var(--nc-r-panel); }
.nc-seg > button {
  flex: 1; min-height: 54px; border: 0; border-radius: 26px; background: transparent; color: var(--nc-text-3);
  font: 600 var(--nc-label)/1.2 var(--nc-f-label); letter-spacing: var(--nc-label-track); text-transform: uppercase;
}
.nc-seg > button[aria-pressed="true"] { background: var(--nc-gold); color: var(--nc-ink-on-gold); }
.nc-lang {               /* EN / RU toggle, top right */
  display: inline-flex; padding: 4px; gap: 2px; background: var(--nc-glass-pill); border: 1px solid var(--nc-glass-line);
  border-radius: 30px; backdrop-filter: var(--nc-glass-blur);
}
.nc-lang > button { border: 0; background: none; padding: 6px 12px; border-radius: 24px; color: var(--nc-text-3);
  font: 600 11px/1 var(--nc-f-label); letter-spacing: .16em; text-transform: uppercase; }
.nc-lang > button[aria-pressed="true"] { background: var(--nc-gold); color: var(--nc-ink-on-gold); }
.nc-quote {              /* Nora's voice */
  font: italic 500 25px/1.45 var(--nc-f-quote); color: var(--nc-text-1);
  border-left: 3px solid var(--nc-gold); padding-left: 24px;
}
.nc-quote cite { display: block; margin-top: 16px; font: 500 11.5px/1 var(--nc-f-label); letter-spacing: .2em;
  text-transform: uppercase; color: var(--nc-text-4); font-style: normal; }
.nc-logo-mark {          /* round gold-ring mark with 4-point star */
  width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid rgba(232,185,79,.85);
  box-shadow: 0 0 34px rgba(232,185,79,.28); display: grid; place-items: center; color: var(--nc-gold);
}
.nc-wordmark { font: 700 19px/1.1 var(--nc-f-display); letter-spacing: -0.02em; color: var(--nc-text-1); }
.nc-wordmark small { display: block; font: 500 9.5px/1.1 var(--nc-f-label); letter-spacing: .3em; text-transform: uppercase; color: var(--nc-text-4); }
.nc-footer { border-top: 1px solid rgba(255,255,255,.08); padding: 48px 0; font-size: 12.5px; color: var(--nc-text-4); }

/* Kids sub-brand surface, used as a framed "window" inside the night-sky page */
.kid-surface {
  background: var(--kid-paper); color: var(--kid-ink); font-family: var(--kid-f-body);
  border-radius: var(--nc-r-card); position: relative; overflow: hidden;
}
.kid-surface h3 { font-family: var(--kid-f-display); color: var(--kid-ink); font-weight: 700; letter-spacing: 0; }
.kid-btn { background: linear-gradient(135deg, var(--kid-violet), var(--kid-violet-2)); color: #fff; border-radius: var(--kid-r-btn);
  font: 700 17px/1 var(--kid-f-display); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), var(--kid-soft-shadow); }

@media (max-width: 720px) {
  :root { --nc-h1: 38px; --nc-h2: 32px; --nc-lead: 17px; }
  html[lang="ru"] h1 { font-size: 32px; }
  .nc-card { padding: 28px 22px; }
}