/* =========================================================================
   Outcome Evolution — Design Tokens
   Brand: dark, premium, B2B AI consultancy. "Tech Tree" metaphor:
   cool teal/blue foundation evolving into warm gold success.
   Base 16px • Minor Third (1.2) scale • 8px spacing grid
   ========================================================================= */

/* --- Webfont imports ----------------------------------------------------- */
/* All three families load LOCALLY from /fonts (user-supplied brand TTFs).   */
/* Poppins ships as 9 static weights × roman+italic.                         */
/* Inter + Fira Code ship as variable fonts (single file covers the range).  */

/* Inter — variable (opsz + wght axes) */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype-variations"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url("fonts/Inter-Italic-VariableFont_opsz,wght.ttf") format("truetype-variations"); }

/* Fira Code — variable (wght axis) */
@font-face { font-family: "Fira Code"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("fonts/FiraCode-VariableFont_wght.ttf") format("truetype-variations"); }

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 100; font-display: swap;
  src: url("fonts/Poppins-Thin.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 100; font-display: swap;
  src: url("fonts/Poppins-ThinItalic.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 200; font-display: swap;
  src: url("fonts/Poppins-ExtraLight.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 200; font-display: swap;
  src: url("fonts/Poppins-ExtraLightItalic.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("fonts/Poppins-Light.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 300; font-display: swap;
  src: url("fonts/Poppins-LightItalic.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/Poppins-Regular.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/Poppins-Italic.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/Poppins-Medium.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 500; font-display: swap;
  src: url("fonts/Poppins-MediumItalic.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/Poppins-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 600; font-display: swap;
  src: url("fonts/Poppins-SemiBoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/Poppins-Bold.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 700; font-display: swap;
  src: url("fonts/Poppins-BoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("fonts/Poppins-ExtraBold.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 800; font-display: swap;
  src: url("fonts/Poppins-ExtraBoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 900; font-display: swap;
  src: url("fonts/Poppins-Black.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 900; font-display: swap;
  src: url("fonts/Poppins-BlackItalic.ttf") format("truetype"); }

:root {
  /* -------------------------------- COLORS ------------------------------ */
  /* Core gradient endpoints — the "evolution" arc */
  --core-blue:        #00C4CC;   /* foundation / digital links */
  --core-gold:        #FFD700;   /* outcome / primary CTA */

  /* Accents */
  --accent-glow-cyan: #00E5FF;   /* hover / focus glow */
  --accent-teal:      #0088CC;   /* deep flat blue */
  --accent-amber:     #F7A026;   /* deep flat amber */
  --accent-bronze:    #B8860B;   /* metallic gold / chart series */

  /* Neutrals — dark by default */
  --neutral-white:        #FFFFFF;
  --neutral-text-light:   #E0E0E0;
  --neutral-text-mid:     #A0A0A0;
  --neutral-separator:    #505050;
  --neutral-surface:      #2A2A2A;  /* cards, panels */
  --neutral-surface-hi:   #303030;  /* card hover */
  --neutral-deep:         #1A2530;  /* alt section bg */
  --neutral-black:        #121212;  /* app background */
  --neutral-pitch:        #0A0A0A;  /* footers / overlays */

  /* Tag-specific surfaces */
  --tag-cyan-bg:      #003333;

  /* Semantic */
  --semantic-success: #28A745;
  --semantic-warning: #F7C107;
  --semantic-error:   #DC3545;
  --semantic-info:    #007BFF;

  /* Gradients (the brand signature) — pass through a bright white highlight,
     mirroring the way the cyan and gold halves of the Tech Tree meet at
     the trunk on the brand banner. NEVER blend cyan→gold directly: that
     produces a muddy green middle that is explicitly off-brand. */
  --gradient-evolution:       linear-gradient(90deg,
                                #00C4CC 0%, #C8EAEC 38%, #FFFFFF 50%, #FFEEBA 62%, #FFD700 100%);
  --gradient-evolution-diag:  linear-gradient(135deg,
                                #00C4CC 0%, #C8EAEC 38%, #FFFFFF 50%, #FFEEBA 62%, #FFD700 100%);
  --gradient-foundation:      linear-gradient(180deg, var(--neutral-black) 0%, var(--neutral-deep) 100%);

  /* Aliases — semantic foreground/background */
  --bg:        var(--neutral-black);
  --bg-alt:    var(--neutral-deep);
  --surface:   var(--neutral-surface);
  --surface-2: var(--neutral-surface-hi);
  --fg:        var(--neutral-white);
  --fg-muted:  var(--neutral-text-light);
  --fg-dim:    var(--neutral-text-mid);
  --border:    var(--neutral-separator);
  --link:      var(--core-blue);
  --link-hover:var(--accent-glow-cyan);
  --cta:       var(--core-gold);

  /* --------------------------------- TYPE ------------------------------- */
  --font-display: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "Fira Code", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Scale — Minor Third (1.2) from 16px base. Display extends upward. */
  --fs-caption: 0.813rem; /* 13px */
  --fs-body:    1rem;     /* 16px */
  --fs-lead:    1.2rem;   /* 19.2px */
  --fs-h3:      1.438rem; /* 23px */
  --fs-h2:      1.75rem;  /* 28px */
  --fs-h1:      2.063rem; /* 33px */
  --fs-display: 3.05rem;  /* 49px — hero */
  --fs-hero:    4.39rem;  /* 70px — landing hero */

  /* Line heights */
  --lh-tight:    1.2;
  --lh-snug:     1.3;
  --lh-body:     1.65;
  --lh-caption:  1.45;

  /* Letter spacing */
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-caption: 0.01em;
  --tracking-wide:    0.08em;  /* monospace tags, eyebrows */

  /* ------------------------------- SPACING ------------------------------ */
  /* 8px grid; 4px micro-spacing only */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   16px;
  --space-4:   24px;
  --space-5:   32px;
  --space-6:   48px;
  --space-7:   64px;
  --space-8:   128px;

  /* ---------------------------- RADII / BORDERS ------------------------- */
  /* Tight, technical — never soft consumer-app. */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;   /* hard cap */
  --border-1:  1px solid var(--neutral-separator);
  --border-1-faint: 1px solid #333333;

  /* ------------------------------ ELEVATION ----------------------------- */
  /* Avoid heavy drop shadows. Prefer 1px borders + inner glows. */
  --shadow-inset-1: inset 0 1px 0 rgba(255,255,255,0.04);
  --shadow-glow-cyan: 0 0 0 1px var(--accent-glow-cyan), 0 0 16px rgba(0,229,255,0.35);
  --shadow-glow-gold: 0 0 0 1px var(--core-gold), 0 0 18px rgba(255,215,0,0.30);
  --shadow-card:    0 1px 0 0 rgba(255,255,255,0.03) inset, 0 0 0 1px #333;
  --shadow-modal:   0 30px 80px rgba(0,0,0,0.6);

  /* ------------------------------- MOTION ------------------------------- */
  /* Snappy, mechanical. Never bouncy. */
  --ease-snap: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-1:     120ms;
  --dur-2:     150ms;
  --dur-3:     240ms;

  /* ------------------------------- LAYOUT ------------------------------- */
  --container-tablet:  720px;
  --container-desktop: 960px;
  --container-large:   1200px;
  --gutter-mobile:     16px;
  --gutter:            24px;
}

/* =========================================================================
   Semantic element styles — applied to bare HTML so prototypes look
   on-brand by default. Designs can override per component.
   ========================================================================= */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-3) 0;
}
h1 { font-size: var(--fs-h1); font-weight: 700; }
h2 { font-size: var(--fs-h2); font-weight: 600; }
h3 { font-size: var(--fs-h3); font-weight: 500; }
h4 { font-size: var(--fs-body); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--fg-muted); }

p     { margin: 0 0 var(--space-4) 0; color: var(--fg-muted); }
small,
.caption { font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: var(--tracking-caption); color: var(--fg-dim); }

a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--dur-2) var(--ease-snap);
}
a:hover { color: var(--link-hover); text-decoration: underline; }

code, kbd, pre, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

hr {
  border: 0;
  border-top: var(--border-1);
  margin: var(--space-5) 0;
}

::selection { background: rgba(0, 229, 255, 0.35); color: var(--neutral-white); }

/* Utility — eyebrow / kicker label (monospace, all caps) */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--accent-glow-cyan);
}

/* Utility — gradient text (signature evolution arc) */
.text-evolution {
  background: var(--gradient-evolution);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* =========================================================================
   Unified Navigation and Header Layout (Outcome Evolution V1)
   ========================================================================= */

body > header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 90px;
  background-color: rgba(18, 18, 18, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--neutral-separator);
  z-index: 1000;
  display: flex;
  align-items: center;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.logo-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.logo-divider {
  width: 1px;
  height: 38px;
  background: linear-gradient(180deg, transparent, var(--neutral-separator), transparent);
}

.logo-text-group {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.logo-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--neutral-white);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.logo-tagline {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 9px;
  color: var(--neutral-text-mid);
  letter-spacing: 0.32em;
  margin-top: 5px;
  text-transform: uppercase;
}

nav ul {
  display: flex;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav a {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  text-transform: uppercase;
  color: var(--neutral-text-mid);
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: color var(--dur-1) var(--ease-snap);
}

nav a:hover {
  color: var(--accent-glow-cyan);
  text-decoration: none;
}

nav a.active {
  color: var(--neutral-white) !important;
  border-bottom: 2px solid var(--core-gold);
  padding-bottom: 4px;
}

/* Dropdown Navigation */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background-color: rgba(22, 28, 36, 0.95); /* Deeper, solid frost */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--neutral-separator);
  border-radius: var(--radius-md);
  padding: 8px 0;
  min-width: 280px;
  width: max-content; /* Prevent awkward text wrapping */
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s var(--motion-snappy);
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
  z-index: 100;
  list-style: none;
  display: flex;
  flex-direction: column; /* Force vertical stacking */
}

.dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(8px);
}

.dropdown-menu li {
  margin: 0 !important;
  width: 100%;
}

.dropdown-menu a {
  display: block;
  padding: 12px 24px;
  color: var(--neutral-text-light);
  font-family: var(--font-body);
  font-size: 0.938rem;
  text-transform: none;
  letter-spacing: normal;
  transition: all 0.15s ease;
  border-bottom: none;
  white-space: nowrap; /* Prevent inline wrapping */
}

.dropdown-menu a:hover {
  background-color: rgba(0, 196, 204, 0.1);
  color: var(--neutral-white);
  padding-left: 28px; /* subtle indent on hover */
}