/* ===================================================================
   Home Page Specific Styles - Improved Design
   =================================================================== */

/* ───────────────────────────────────────────────────────────────────
   HERO - the market network
   A canvas fills the section, a vignette and a film grain sit over it,
   and the copy sits on top. All three layers use positive z-indexes so
   nothing can paint over the headline.
   ─────────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 74vh;
  padding: var(--space-16) var(--space-4);
  text-align: center;
  /* what shows if the canvas never paints */
  background: linear-gradient(180deg, #070b15 0%, #0a1220 55%, #050810 100%);
}

@media (min-width: 768px) {
  .hero {
    min-height: 80vh;
    padding: var(--space-16) var(--space-6);
  }
}

.hero-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
  pointer-events: none;
}

.hero-vignette {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 50% 38%,
    rgba(5, 8, 16, 0) 0%,
    rgba(5, 8, 16, 0.15) 55%,
    rgba(3, 5, 10, 0.72) 100%
  );
}

.hero-grain {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.hero-content {
  position: relative;
  z-index: 2;
  /* sits above centre, so the price line has the lower third to itself.
     The canvas keep-out zone is measured from this box, so it follows. */
  transform: translateY(-5vh);
}

@media (min-width: 768px) {
  .hero-content {
    transform: translateY(-8vh);
  }
}

.hero-eyebrow {
  color: #59c0ff;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  margin: 0;
  --rise: 8px;
  animation: hero-rise 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s both;
}

.hero h1 {
  color: #eef2f8;
  font-size: clamp(34px, 6.4vw, 84px);
  line-height: 1.04;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 18px auto 14px;
  max-width: 16ch;
  text-shadow: 0 2px 28px rgba(3, 5, 10, 0.55);
  --rise: 14px;
  animation: hero-rise 1.15s cubic-bezier(0.2, 0.8, 0.2, 1) 0.32s both;
}

.hero-sub {
  color: rgba(238, 242, 248, 0.58);
  font-size: clamp(15px, 1.7vw, 19px);
  max-width: 46ch;
  line-height: 1.55;
  margin: 0 auto;
  --rise: 10px;
  animation: hero-rise 1.15s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s both;
}

/* The entrance moves the copy, it does not reveal it. Opacity is deliberately
   left out of both the elements and these keyframes: anything that animated it
   from 0 - a base opacity:0, or a from-state pinned by fill-mode backwards -
   leaves the headline invisible whenever the animation does not advance, which
   is exactly how the hero copy used to disappear. Transform-only cannot fail
   that way: at rest, mid-animation or with animations off, the text is opaque. */
@keyframes hero-rise {
  from {
    transform: translateY(var(--rise, 10px));
  }
  to {
    transform: none;
  }
}

/* The copy must never depend on the animation having run. */
@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow,
  .hero h1,
  .hero-sub {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Features Grid */
.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin: var(--space-6) 0;
}

@media (min-width: 768px) {
  .features-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-8);
    margin: var(--space-8) 0;
  }
}

@media (min-width: 1024px) {
  .features-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-12);
    margin: var(--space-8) 0;
  }
}

.feature {
  background-color: var(--color-black-muted);
  padding: var(--space-6);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-gray-400);
  border-left: 3px solid var(--color-gold);
  transition: all var(--transition-normal);
}

@media (min-width: 768px) {
  .feature {
    padding: var(--space-8);
  }
}

.feature:hover {
  transform: translateY(-2px);
  border-color: var(--color-gold);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

/* Card artwork. The sources are square and their subjects are centred, so the
   image keeps a 1:1 box rather than being cropped to a letterbox. width/height
   are on the <img> too, so the grid reserves the space before the file lands
   and the cards do not jump as they load. */
.feature-media {
  display: block;
  margin-bottom: var(--space-5);
}

.feature-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-md);
  background-color: var(--color-black);
}

.feature h3 {
  color: var(--color-white);
  margin-top: 0;
  margin-bottom: var(--space-2);
  font-weight: 600;
  font-size: var(--text-base);
}

@media (min-width: 768px) {
  .feature h3 {
    font-size: var(--text-lg);
  }
}

.feature p {
  color: var(--color-gray-300);
  font-size: var(--text-xs);
  line-height: var(--leading-loose);
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .feature p {
    font-size: var(--text-sm);
  }
}

/* ───────────────────────────────────────────────────────────────────
   FORMULA NETWORK - the mathematics band
   A canvas fills the section and paints its own background, so the
   section reads as a full-bleed interlude between the hero and the
   pillars below. See assets/js/formula-network.js
   ─────────────────────────────────────────────────────────────────── */

.formula-network {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-10) var(--space-4);
  min-height: 62vh;
  touch-action: manipulation;
  /* what shows if the canvas never paints - mirrors drawBackground() */
  background: linear-gradient(180deg, #050810 0%, #0b1730 100%);
}

@media (min-width: 768px) {
  .formula-network {
    min-height: 70vh;
    padding: var(--space-10) var(--space-6);
  }

}

.formula-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
  pointer-events: none;
}

/* A black seam between the hero and the maths band. Both canvases end and
   begin on #050810, so the divider is pure black to stay visible against them.
   shared.css gives every <section> a border-bottom, so the hero already draws
   a rule above this band; the divider is a <div> and gets none, so it repeats
   that same rule below itself and the black band reads as a framed seam. */
.band-divider {
  height: 5vh;
  min-height: 24px;
  background: #000;
  border-bottom: 1px solid var(--color-gray-400);
}

/* Informative copy over the artwork, not a headline: set left against the
   site's content gutter, on a panel in the hero's own ground colour
   (--color-black / #050810) so the band sits in the same world as the section
   above it. The panel carries the copy's contrast, so the artwork runs behind
   it untouched - no keep-out zone and no vignette. Each sentence is one line;
   the sizes below are tuned so neither wraps or overflows down to 320px. */
.formula-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: 1fr 1fr;
  /* One gap at every width. A 768px override used to sit above this rule at
     the same specificity, so it never applied and desktop has always rendered
     this value; phones asked for 16px until it read as a single block. */
  row-gap: var(--space-10);
  justify-items: start;
  text-align: left;
}

/* Two equal rows, so the gap between them straddles the column's middle, and
   the column is centred in the band: the midpoint between the panels is the
   band's midpoint whatever the panels' own heights. Centring a flex column
   instead only centres its outer bounds, which drifts off the middle as soon
   as one panel wraps to more lines than the other. */
.formula-copy-lead {
  align-self: end;
}

.formula-copy-alt {
  align-self: start;
  justify-self: end;
}

/* Both panels share one lead size and one sub size. The sizes are set by the
   longest line of the four - the second panel's lead, at 23.3px of width per
   font-pixel - so matching them costs the "Math" line its old 42px ceiling. */

.formula-copy {
  display: inline-block;
  max-width: 100%;
  padding: var(--space-6) var(--space-8);
  border-radius: var(--radius-lg);
  background: rgba(var(--rgb-black), 0.82);
  border: 1px solid rgba(var(--rgb-navy), 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}

.formula-lead {
  color: rgba(238, 242, 248, 0.62);
  font-size: clamp(11px, 2.6vw, 34px);
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
  white-space: nowrap;
}

.formula-sub {
  color: rgba(238, 242, 248, 0.45);
  font-size: clamp(13px, 1.7vw, 19px);
  line-height: 1.5;
  margin: 0;
  white-space: nowrap;
}

/* On a phone the band is tall and the panel floated in the middle of it, so
   the copy sat below the fold of the section. It rides near the top instead. */
/* Phones get their own treatment rather than a squeezed desktop one. Holding
   one line per sentence here pins the lead to its 11-13px floor - the same
   size as its own sub-line, so the pair reads as four identical lines of small
   print. The lines wrap instead, the type returns to a readable scale with
   hierarchy between lead and sub, and both panels take the container's width
   so their edges line up. */
@media (max-width: 767px) {
  .formula-content {
    justify-items: stretch;
  }

  .formula-copy {
    padding: var(--space-5);
  }

  .formula-copy-alt {
    justify-self: stretch;
  }

  .formula-lead,
  .formula-sub {
    white-space: normal;
  }

  .formula-lead {
    font-size: clamp(19px, 5vw, 26px);
    margin-bottom: var(--space-2);
  }

  .formula-sub {
    font-size: clamp(14px, 3.4vw, 16px);
  }
}

@media (min-width: 1024px) {
  .formula-copy-lead {
    margin-left: calc(
      -0.5 * (
        2 * var(--space-6)
        + (100vw - 2 * var(--space-6)
           - min(var(--container-max), 100vw - 2 * var(--space-6))) / 2
      )
    );
  }

  .formula-copy-alt {
    margin-right: calc(
      -0.5 * (
        2 * var(--space-6)
        + (100vw - 2 * var(--space-6)
           - min(var(--container-max), 100vw - 2 * var(--space-6))) / 2
      )
    );
  }
}

/* Call to Action Buttons */
.cta-buttons {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-8);
}

/* Responsive */
@media (max-width: 768px) {
  .hero {
    padding: var(--space-12) var(--space-4);
  }

  .features-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .cta-buttons {
    flex-direction: column;
    gap: var(--space-6);
  }

  .cta-buttons .btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .hero {
    padding: var(--space-12) var(--space-4);
  }

  .features-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin: var(--space-4) 0;
  }

  .cta-buttons {
    gap: var(--space-8);
  }
}

/* Forced Colours - drop the artwork, keep a plain readable header */
@media (forced-colors: active) {
  .hero-canvas,
  .hero-vignette,
  .hero-grain,
  .formula-canvas {
    display: none;
  }

  .formula-network {
    min-height: 0;
  }
}