/* ============================================================
   THE DREAM FORGE COMPANY — Design System
   ============================================================ */

:root {
  /* Brand palette */
  --midnight-navy: #0F2747;
  --midnight-navy-deep: #081A32;
  --obsidian-black: #111315;
  --arch-white: #F7F7F4;
  --arch-white-warm: #EDEDE7;
  --ice-blue: #DCEEFF;
  --ice-blue-dim: rgba(220, 238, 255, 0.65);
  --ice-blue-glow: rgba(220, 238, 255, 0.14);

  /* Neutrals derived from the palette */
  --line: rgba(220, 238, 255, 0.14);
  --line-strong: rgba(220, 238, 255, 0.28);
  --line-dark: rgba(15, 39, 71, 0.15);
  --muted: rgba(247, 247, 244, 0.62);
  --muted-dark: rgba(17, 19, 21, 0.60);

  /* Type */
  --font-serif: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-sans:  "Inter", "Söhne", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* Type scale (fluid) */
  --fs-eyebrow: clamp(0.72rem, 0.68rem + 0.15vw, 0.78rem);
  --fs-body:    clamp(1rem, 0.95rem + 0.25vw, 1.06rem);
  --fs-lede:    clamp(1.15rem, 1rem + 0.7vw, 1.35rem);
  --fs-h4:      clamp(1.25rem, 1.1rem + 0.75vw, 1.6rem);
  --fs-h3:      clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem);
  --fs-h2:      clamp(2rem, 1.6rem + 2.2vw, 3.2rem);
  --fs-h1:      clamp(2.8rem, 2rem + 4vw, 5.2rem);
  --fs-hero:    clamp(3.4rem, 2.4rem + 6vw, 7.5rem);

  /* Spacing rhythm */
  --gutter: clamp(1.25rem, 2vw, 2rem);
  --section-y: clamp(5rem, 8vw, 9rem);
  --page-max: 1440px;
  --content-max: 1200px;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 240ms;
  --dur-med: 520ms;
  --dur-slow: 900ms;
  --dur-cinematic: 1400ms;
}

/* ------------------------------------------------------------
   Reset & base
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--midnight-navy-deep);
  color: var(--arch-white);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
a { color: inherit; text-decoration: none; }

/* Selection */
::selection { background: var(--ice-blue); color: var(--midnight-navy); }

/* Focus */
:focus-visible {
  outline: 2px solid var(--ice-blue);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ------------------------------------------------------------
   Type utility classes
   ------------------------------------------------------------ */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ice-blue);
}
.eyebrow--muted { color: var(--muted); }

.serif { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.01em; }
.serif-light { font-family: var(--font-serif); font-weight: 300; }

h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 400; margin: 0; line-height: 1.05; letter-spacing: -0.015em; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.15; }
h4 { font-size: var(--fs-h4); line-height: 1.25; }

p { margin: 0 0 1em; }
.lede { font-size: var(--fs-lede); line-height: 1.5; color: var(--arch-white); max-width: 60ch; }
.body-dim { color: var(--muted); }

/* Divider used throughout the brand */
.hairline {
  display: inline-block;
  width: 48px;
  height: 1px;
  background: var(--line-strong);
  vertical-align: middle;
}
.hairline--wide { width: 88px; }

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.95em 1.6em;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid var(--line-strong);
  color: var(--arch-white);
  background: transparent;
  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);
  will-change: transform;
}
.btn:hover {
  background: var(--ice-blue);
  color: var(--midnight-navy);
  border-color: var(--ice-blue);
  transform: translateY(-1px);
}
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--arch-white);
  color: var(--midnight-navy);
  border-color: var(--arch-white);
}
.btn--primary:hover {
  background: var(--ice-blue);
  color: var(--midnight-navy);
  border-color: var(--ice-blue);
}

.btn--ghost { border-color: var(--line); }

.btn__arrow {
  width: 14px; height: 10px;
  transition: transform var(--dur-fast) var(--ease-out);
}
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ------------------------------------------------------------
   Layout primitives
   ------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--content-max);
  padding-inline: var(--gutter);
  margin-inline: auto;
}
.container--wide { max-width: var(--page-max); }

.section {
  padding-block: var(--section-y);
  position: relative;
}
.section--dark { background: var(--midnight-navy-deep); }
.section--midnight { background: var(--midnight-navy); }
.section--obsidian { background: var(--obsidian-black); }
.section--light { background: var(--arch-white); color: var(--midnight-navy); }
.section--light h1, .section--light h2, .section--light h3, .section--light h4 { color: var(--midnight-navy); }
.section--light .body-dim { color: var(--muted-dark); }
.section--light .hairline { background: var(--line-dark); }

/* Section header pattern */
.section-head {
  display: flex; flex-direction: column; gap: 1.25rem;
  max-width: 60ch;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.section-head--center { align-items: center; text-align: center; margin-inline: auto; }

/* ------------------------------------------------------------
   Navigation
   ------------------------------------------------------------ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 1.25rem clamp(1.25rem, 3vw, 2.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  transition: background var(--dur-med) var(--ease-out),
              backdrop-filter var(--dur-med) var(--ease-out),
              padding var(--dur-med) var(--ease-out),
              border-color var(--dur-med) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(15, 39, 71, 0.88);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  padding-block: 0.85rem;
  border-color: var(--line);
}
.nav__brand {
  /* The brand identity is carried by the massive baked DF logo in every hero
     and section slide, and by the footer lockup. The tiny nav brand adds
     visual noise and competes with the big logo moment — hide it entirely. */
  display: none;
}
.nav__monogram, .nav__wordmark { display: none; }
.nav__list {
  display: flex; align-items: center; gap: 1.5rem;
  list-style: none; padding: 0; margin: 0;
}
/* Give the brand a hard boundary from nav links */
.nav__brand + nav { margin-left: 1.25rem; }
.nav__list a {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--arch-white);
  opacity: 0.85;
  padding-block: 0.5rem;
  position: relative;
  transition: opacity var(--dur-fast), color var(--dur-fast);
}
.nav__list a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--ice-blue);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-med) var(--ease-out);
}
.nav__list a:hover { color: var(--ice-blue); opacity: 1; }
.nav__list a:hover::after { transform: scaleX(1); }
.nav__list a.is-active { color: var(--ice-blue); opacity: 1; }
.nav__list a.is-active::after { transform: scaleX(1); }

.nav__cta {
  padding: 0.7em 1.15em;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  white-space: nowrap;
  flex-shrink: 0;
}

/* "Replay intro" — subtle utility icon (not a CTA) */
.nav__replay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--ice-blue);
  opacity: 0.55;
  border: 1px solid rgba(168, 208, 230, 0.28);
  border-radius: 50%;
  margin-right: 0.6rem;
  transition: opacity var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.nav__replay span { display: none; }
.nav__replay svg { width: 13px; height: 13px; }
.nav__replay:hover {
  opacity: 1;
  color: var(--midnight-navy);
  background: var(--ice-blue);
  border-color: var(--ice-blue);
}
@media (max-width: 1200px) { .nav__replay { display: none; } }

.nav__toggle {
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border: 1px solid var(--line-strong);
}
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  content: ""; display: block; width: 18px; height: 1px; background: var(--arch-white);
  transition: transform var(--dur-fast) var(--ease-out);
}
.nav__toggle span { position: relative; }
.nav__toggle span::before { position: absolute; top: -6px; }
.nav__toggle span::after  { position: absolute; top:  6px; }

/* Mobile nav */
@media (max-width: 940px) {
  .nav__list, .nav__cta { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav.is-open .nav__list {
    display: flex; flex-direction: column; gap: 1.5rem;
    position: fixed; inset: 72px 0 0 0;
    background: var(--midnight-navy-deep);
    padding: 3rem var(--gutter);
    align-items: flex-start;
    animation: navSlide 380ms var(--ease-out);
  }
  .nav.is-open .nav__list a { font-size: 1.2rem; letter-spacing: 0.08em; }
  .nav.is-open .nav__cta { display: inline-flex; margin-top: 1rem; }
  @keyframes navSlide { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
  .nav.is-open .nav__toggle span { background: transparent; }
  .nav.is-open .nav__toggle span::before { transform: translateY(6px) rotate(45deg); }
  .nav.is-open .nav__toggle span::after  { transform: translateY(-6px) rotate(-45deg); }
}

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
.footer {
  /* Match the logo's baked navy background exactly (sampled from the asset)
     so the logo lockup reads as a seamless part of the footer, not a pasted card. */
  background: #010715;
  color: var(--arch-white);
  padding-block: clamp(3.5rem, 6vw, 5.5rem) 2rem;
  border-top: 1px solid var(--line);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 3rem 2rem;
  align-items: flex-start;
}
@media (max-width: 940px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
.footer__brand img {
  max-width: 260px;
  margin-bottom: 1rem;
  display: block;
}
.footer__brand { position: relative; }
.footer__tagline {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--ice-blue-dim);
  max-width: 30ch;
}
.footer h5 {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ice-blue);
  margin: 0 0 1.2rem;
  font-weight: 500;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.footer li a {
  font-size: 0.92rem;
  color: var(--arch-white);
  opacity: 0.72;
  transition: opacity var(--dur-fast), color var(--dur-fast);
}
.footer li a:hover { opacity: 1; color: var(--ice-blue); }

.footer__meta {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  font-size: 0.8rem;
  color: var(--muted);
  letter-spacing: 0.06em;
}
.footer__pillars {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  color: var(--ice-blue-dim);
}
.footer__pillars span { margin-inline: 0.5em; opacity: 0.4; }

/* ------------------------------------------------------------
   Reveal animation (scroll-triggered)
   ------------------------------------------------------------ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 80ms; }
.reveal[data-delay="2"] { transition-delay: 160ms; }
.reveal[data-delay="3"] { transition-delay: 240ms; }
.reveal[data-delay="4"] { transition-delay: 320ms; }
.reveal[data-delay="5"] { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------
   Utility grids
   ------------------------------------------------------------ */
.grid { display: grid; gap: 2rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); gap: 1.5rem; }
@media (max-width: 1200px) { .grid-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 940px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-2 { grid-template-columns: 1fr; } .grid-5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; } }

/* Hairline framed card */
.card {
  position: relative;
  padding: 2rem 1.75rem;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
  transition: border-color var(--dur-med) var(--ease-out), background var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.card:hover {
  border-color: var(--ice-blue-dim);
  background: linear-gradient(180deg, rgba(220,238,255,0.05), rgba(220,238,255,0));
  transform: translateY(-3px);
}
.card__index {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--ice-blue);
  margin-bottom: 1.5rem;
  display: block;
}
.card__title { font-family: var(--font-serif); font-size: 1.6rem; margin: 0 0 0.75rem; letter-spacing: -0.01em; }
.card__body { color: var(--muted); font-size: 0.95rem; line-height: 1.6; }

/* Text link with arrow */
.text-link {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ice-blue);
  padding-block: 0.4em;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.text-link:hover { border-color: var(--ice-blue); }
.text-link svg { transition: transform var(--dur-fast) var(--ease-out); }
.text-link:hover svg { transform: translateX(4px); }

/* Blueprint grid overlay (used sparingly for atmosphere) */
.blueprint-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(220, 238, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(220, 238, 255, 0.05) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  opacity: 0.5;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

/* Nav Sign In — matches other nav links exactly, separated by subtle divider */
.nav__list .nav__signin {
  padding-left: 1.25rem;
  margin-left: 0.5rem;
  position: relative;
  white-space: nowrap;
}
.nav__list .nav__signin::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.18);
}

/* Start Free Trial — primary auth CTA, replaces old Start Your Vision */
.nav__cta--trial {
  background: var(--ice-blue, #B8D4E8) !important;
  border: 1px solid var(--ice-blue, #B8D4E8) !important;
  color: var(--midnight-navy, #0A0F1D) !important;
  white-space: nowrap;
}
.nav__cta--trial:hover {
  background: #FFFFFF !important;
  border-color: #FFFFFF !important;
  color: var(--midnight-navy, #0A0F1D) !important;
}

/* At narrower widths, the nav has too many items — tighten spacing progressively */
@media (max-width: 1500px) {
  .nav__list { gap: 1.1rem; }
  .nav__list a { font-size: 0.72rem; letter-spacing: 0.12em; }
  .nav__cta { padding: 0.65em 1em; font-size: 0.68rem; letter-spacing: 0.16em; }
  .nav { padding-inline: 1.5rem; }
}
@media (max-width: 1250px) {
  .nav__list { gap: 0.85rem; }
  .nav__list a { font-size: 0.68rem; letter-spacing: 0.1em; }
  .nav__list .nav__signin { padding-left: 0.9rem; margin-left: 0.35rem; }
}

/* On tablet/mobile hamburger — sign-in divider removed for stacked layout */
@media (max-width: 900px) {
  .nav__list .nav__signin { padding-left: 0; margin-left: 0; }
  .nav__list .nav__signin::before { display: none; }
}