/* =====================================================================
   Future Consulting Services — Brand Tokens
   ---------------------------------------------------------------------
   Adapted from the Fusion Design System type/space scale, with a
   bespoke dark-cinematic palette derived from the FCS logo:
   deep navy/near-black backgrounds + mint accent.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ── Surfaces (dark-mode native) ─────────────────────────────────── */
  --bg-0:        #06090F;   /* deepest — page */
  --bg-1:        #0A0F18;   /* default surface */
  --bg-2:        #10172300; /* (unused, kept for clarity) */
  --bg-elev-1:   #0E1521;   /* card */
  --bg-elev-2:   #131B2A;   /* card hover */
  --bg-elev-3:   #182236;   /* nested surface */

  /* Subtle gradient backgrounds */
  --bg-radial:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(133, 230, 198, 0.10), transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 110%, rgba(70, 130, 180, 0.06), transparent 60%);

  /* ── Lines & borders ─────────────────────────────────────────────── */
  --line-1:      rgba(255, 255, 255, 0.06);   /* hairline */
  --line-2:      rgba(255, 255, 255, 0.10);   /* default */
  --line-3:      rgba(255, 255, 255, 0.14);   /* hover */
  --line-mint:   rgba(133, 230, 198, 0.30);

  /* ── Foregrounds ─────────────────────────────────────────────────── */
  --fg-0:        #FFFFFF;
  --fg-1:        #E6ECF5;   /* primary text */
  --fg-2:        #B4BECD;   /* body */
  --fg-3:        #7A8699;   /* secondary / meta */
  --fg-4:        #4D5871;   /* placeholder */

  /* ── Brand accents (extracted from logo) ─────────────────────────── */
  --mint:        #85E6C6;   /* primary accent — orbital ring color */
  --mint-bright: #A8F0D4;
  --mint-deep:   #4FC9A1;
  --mint-glow:   rgba(133, 230, 198, 0.40);
  --mint-soft:   rgba(133, 230, 198, 0.08);

  --steel:       #6B8FB8;   /* cool secondary */
  --ice:         #BFE3FF;   /* cold blue tint */
  --graphite:    #2A3344;

  /* ── FusionSuite sub-brand (gold) ──────────────────────────────── */
  --gold:        #F2C94C;   /* FusionSuite accent — eyebrow, CTA, nav item */
  --gold-bright: #FFE08A;
  --gold-deep:   #D4A93A;
  --gold-glow:   rgba(242, 201, 76, 0.40);
  --gold-soft:   rgba(242, 201, 76, 0.10);
  --line-gold:   rgba(242, 201, 76, 0.30);

  /* Status (kept understated) */
  --success:     #4ADE80;
  --warning:     #FBBF24;
  --danger:      #F87171;

  /* ── Gradients ───────────────────────────────────────────────────── */
  --grad-mint:
    linear-gradient(135deg, #85E6C6 0%, #4FC9A1 100%);
  --grad-mint-glow:
    linear-gradient(135deg, rgba(133, 230, 198, 0.20) 0%, rgba(133, 230, 198, 0) 100%);
  --grad-text:
    linear-gradient(180deg, #FFFFFF 0%, #B4BECD 100%);
  --grad-card:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
  --grad-border:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 100%);

  /* ── Shadows ─────────────────────────────────────────────────────── */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md:  0 8px 24px -8px rgba(0, 0, 0, 0.50);
  --shadow-lg:  0 24px 60px -12px rgba(0, 0, 0, 0.60);
  --shadow-mint:0 0 40px -8px rgba(133, 230, 198, 0.35);
  --shadow-focus: 0 0 0 3px rgba(133, 230, 198, 0.30);

  /* ── Radii ───────────────────────────────────────────────────────── */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 24px;
  --r-pill: 999px;

  /* ── Spacing (8px grid) ──────────────────────────────────────────── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px; --s-11: 160px;

  --container: 1280px;
  --container-narrow: 960px;
  --section-py: 120px;

  /* ── Motion ──────────────────────────────────────────────────────── */
  --ease-out:  cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-std:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  150ms;
  --dur-base:  240ms;
  --dur-slow:  400ms;
  --dur-xslow: 800ms;

  /* ── Typography ──────────────────────────────────────────────────── */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* Display scale (we use larger sizes than Fusion — cinematic) */
  --fs-12: 0.75rem;   --fs-13: 0.8125rem; --fs-14: 0.875rem;
  --fs-15: 0.9375rem; --fs-16: 1rem;      --fs-18: 1.125rem;
  --fs-20: 1.25rem;   --fs-24: 1.5rem;    --fs-30: 1.875rem;
  --fs-36: 2.25rem;   --fs-48: 3rem;      --fs-60: 3.75rem;
  --fs-72: 4.5rem;    --fs-84: 5.25rem;   --fs-96: 6rem;
}

/* ── Base reset ────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
*::selection { background: var(--mint); color: var(--bg-0); }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: 1.55;
  color: var(--fg-1);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}

body {
  background:
    var(--bg-radial),
    var(--bg-0);
  background-attachment: fixed;
  min-height: 100vh;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

/* ── Type primitives ───────────────────────────────────────────────── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px; height: 1px;
  background: var(--gold);
  opacity: 0.7;
}

.h-display {
  font-weight: 600;
  font-size: clamp(2.75rem, 5.5vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--fg-0);
}
.h-1 {
  font-weight: 600;
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--fg-0);
}
.h-2 {
  font-weight: 600;
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--fg-0);
}
.h-3 {
  font-weight: 600;
  font-size: var(--fs-24);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--fg-0);
}
.h-4 {
  font-weight: 600;
  font-size: var(--fs-18);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--fg-0);
}

.lead {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.55;
  color: var(--fg-2);
  font-weight: 400;
  max-width: 64ch;
}

.body { color: var(--fg-2); }
.body-sm { font-size: var(--fs-14); color: var(--fg-2); }
.meta { font-size: var(--fs-13); color: var(--fg-3); }

.mono { font-family: var(--font-mono); font-feature-settings: normal; }

.text-grad {
  background: var(--grad-text);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.text-mint { color: var(--mint); }

/* ── Layout primitives ─────────────────────────────────────────────── */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--s-6); }
.container-narrow { width: 100%; max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--s-6); }
.section { padding-block: var(--section-py); position: relative; }

.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2) 20%, var(--line-2) 80%, transparent);
}

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px;
  padding: 0 22px;
  border-radius: var(--r-md);
  font-size: var(--fs-14);
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.btn-lg { height: 52px; padding: 0 28px; font-size: var(--fs-15); border-radius: var(--r-md); }
.btn-sm { height: 36px; padding: 0 16px; font-size: var(--fs-13); }

.btn-primary {
  background: var(--gold);
  color: #1B1100;
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(242, 201, 76, 0.50), 0 0 40px -8px var(--gold-glow);
}
.btn-primary:hover {
  background: var(--gold-bright);
  box-shadow: 0 0 0 1px rgba(255, 224, 138, 0.70), 0 0 50px -8px var(--gold-glow);
}
.btn-primary:active { transform: translateY(1px); }

.btn-ghost {
  background: transparent;
  color: var(--fg-1);
  border: 1px solid var(--line-2);
}
.btn-ghost:hover {
  border-color: var(--line-3);
  background: rgba(255, 255, 255, 0.03);
}

.btn-link {
  height: auto;
  padding: 0;
  background: none;
  color: var(--fg-1);
  gap: 6px;
}
.btn-link:hover { color: var(--mint); }

/* Arrow that nudges on hover */
.btn .arrow {
  display: inline-block;
  transition: transform var(--dur-base) var(--ease-out);
}
.btn:hover .arrow { transform: translateX(3px); }

/* ── Chips & tags ──────────────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-1);
  font-size: var(--fs-12);
  color: var(--fg-2);
  letter-spacing: 0.01em;
}
.chip-mint {
  background: rgba(133, 230, 198, 0.08);
  border-color: var(--line-mint);
  color: var(--mint);
}
.chip .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 8px var(--mint-glow);
}

/* ── Cards ─────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-elev-1);
  background-image: var(--grad-card);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  transition:
    background var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
  position: relative;
  overflow: hidden;
}
.card:hover {
  border-color: var(--line-3);
  background-color: var(--bg-elev-2);
}

/* Glow border (premium hover treatment) */
.card-glow { position: relative; }
.card-glow::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--line-mint), transparent 50%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  pointer-events: none;
}
.card-glow:hover::before { opacity: 1; }

/* ── Grid background pattern ───────────────────────────────────────── */
.grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, black, transparent 80%);
}

/* ── Reveal-on-scroll ──────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.reveal.in {
  opacity: 1;
  transform: none;
}
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.reveal-stagger.in > * {
  opacity: 1; transform: none;
}
.reveal-stagger.in > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0ms !important; transition-duration: 0ms !important; }
}

/* ── Scrollbar ─────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-0); }
::-webkit-scrollbar-thumb {
  background: var(--bg-elev-3);
  border-radius: 6px;
  border: 2px solid var(--bg-0);
}
::-webkit-scrollbar-thumb:hover { background: var(--graphite); }