/* ===== Tokens ===== */
:root {
  --orange: #EE5102;
  --deep-blue: #0B1533;
  --off-white: #FAF8F3;
  --light-blue: #3D8BFD;
  --text-black: #111111;
  --white: #FFFFFF;

  --font-display: "Archivo Black", sans-serif;
  --font-body: "Space Grotesk", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  --rule-light: rgba(17, 17, 17, 0.14);
  --rule-dark: rgba(255, 255, 255, 0.16);

  --content-max: 700px;
  --label-col: 150px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text-black);
  background: var(--off-white);
  line-height: 1.6;
}

h1, h2, h3 { margin: 0; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

/* ===== Utility ===== */
.tag-mono {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tag-accent { color: var(--orange); }
.tag-on-dark { color: var(--light-blue); }

.on-dark { color: var(--off-white); }

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.2rem;
  text-decoration: none;
  padding: 0.75rem 1.5rem;
  border-radius: 2px;
  border: 1px solid transparent;
}

.btn-primary {
  background: var(--orange);
  color: var(--white);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: #d64a02;
}

:focus-visible {
  outline: 2px solid var(--light-blue);
  outline-offset: 3px;
}

/* ===== Ring mark ===== */
.ring-mark { display: block; overflow: visible; }
.ring-mark--sm { width: 26px; height: 26px; }
.ring-mark--bg { width: 100%; height: 100%; transition: opacity 0.2s ease-out; }

.ring-mark .ring {
  fill: none;
  stroke: var(--orange);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.ring-mark--bg .ring { stroke-width: 3; }

.ring-mark .dot { fill: var(--orange); }

/* SVG's default transform-origin is unreliable across browsers (often the
   viewport's top-left, not the shape's own center) -- pin it explicitly so
   every scale animation (pulse, snap) expands from the true center instead
   of drifting toward one corner. */
.ring-mark .ring,
.ring-mark .dot {
  transform-box: fill-box;
  transform-origin: center;
}

/* ambient pulse: rings fade/expand on a slow, staggered loop */
.ring-mark--pulse .ring-1 { animation: ring-pulse 3.2s ease-in-out infinite; }
.ring-mark--pulse .ring-2 { animation: ring-pulse 3.2s ease-in-out infinite; animation-delay: 0.4s; }
.ring-mark--pulse .ring-3 { animation: ring-pulse 3.2s ease-in-out infinite; animation-delay: 0.8s; }

@keyframes ring-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.94); }
  50% { opacity: 1; transform: scale(1.04); }
}

/* click-to-snap: sharp burst outward, then reset */
.snap-active .ring-1 { animation: ring-snap 0.5s cubic-bezier(0.2, 0.9, 0.3, 1); }
.snap-active .ring-2 { animation: ring-snap 0.5s cubic-bezier(0.2, 0.9, 0.3, 1) 0.05s; }
.snap-active .ring-3 { animation: ring-snap 0.5s cubic-bezier(0.2, 0.9, 0.3, 1) 0.1s; }
.snap-active .dot { animation: dot-snap 0.5s cubic-bezier(0.2, 0.9, 0.3, 1); }

@keyframes ring-snap {
  0% { opacity: 1; transform: scale(0.7); }
  60% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.6); }
}

@keyframes dot-snap {
  0%, 70% { transform: scale(1); }
  85% { transform: scale(1.4); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .ring-mark--pulse .ring { animation: none; opacity: 0.6; }
  .snap-active .ring,
  .snap-active .dot { animation: none !important; }
}

/* hero load-in: one-time cascading reveal, not repeated */
@keyframes reveal-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-topbar { animation: reveal-up 0.6s ease-out both; }
.hero-headline .line { display: block; animation: reveal-up 0.6s ease-out both; }
.hero-headline .line:nth-child(1) { animation-delay: 0.18s; }
.hero-headline .line:nth-child(2) { animation-delay: 0.3s; }
.hero-headline .line:nth-child(3) { animation-delay: 0.42s; }
.hero-bottom { animation: reveal-up 0.6s ease-out 0.62s both; }

@media (prefers-reduced-motion: reduce) {
  .hero-topbar,
  .hero-headline .line,
  .hero-bottom {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ===== Hero ===== */
.hero {
  position: relative;
  z-index: 0;
  overflow: hidden;
  background: var(--deep-blue);
  color: var(--off-white);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem clamp(1.5rem, 5vw, 4rem) 2.5rem;
}

/* Hero halo — ambient gradient glow, part of the finalized brand system
   (see docs/superpowers/specs/2026-07-05-snapping-shrimp-gradient-brand-design.md).
   The radius itself is animated (via a registered custom property) rather
   than scaling the whole layer with `transform`, so the browser recalculates
   the gradient analytically every frame instead of resampling an
   already-rasterized bitmap -- scaling a soft gradient bitmap is what was
   causing visible banding at the top/edges when the animation contracted. */
@property --halo-radius {
  syntax: '<length>';
  inherits: false;
  initial-value: 780px;
}
@keyframes hero-halo-breathe {
  0%, 100% { opacity: 0.5; --halo-radius: 640px; }
  50% { opacity: 1; --halo-radius: 900px; }
}
@keyframes hero-halo-drift {
  0%, 100% { filter: saturate(1); }
  50% { filter: saturate(1.35); }
}
.hero-halo {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Orange fades fully to alpha-0 before blue starts (both boundary stops
     are transparent), so the two never directly RGB-blend -- blending
     orange straight into blue mathematically passes through a muddy
     red/mauve midpoint no matter what color is picked for it. */
  background: radial-gradient(circle var(--halo-radius) at 78% 48%,
    rgba(255,138,61,0.75) 0%,
    rgba(255,120,45,0.63) 14%,
    rgba(255,110,30,0.55) 24%,
    rgba(247,95,15,0.44) 34%,
    rgba(238,81,2,0.28) 45%,
    rgba(238,81,2,0) 55%,
    rgba(61,139,253,0) 62%,
    rgba(61,139,253,0.16) 74%,
    rgba(30,80,160,0.07) 88%,
    rgba(11,21,51,0) 100%);
  animation: hero-halo-breathe 2.5s ease-in-out infinite, hero-halo-drift 4s ease-in-out infinite;
}

/* subtle grain to mask gradient banding */
.hero-halo::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.05;
  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-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule-dark);
}

.hero-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-body);
}

.wordmark-whisper { font-size: 15px; font-weight: 500; color: #999999; }
.wordmark-shout { font-family: var(--font-display); font-size: 1.1rem; letter-spacing: 0.02em; color: var(--off-white); }

.tag-topbar { color: var(--light-blue); }

.hero-body {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 3rem 0;
}

.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 8vw, 6rem);
  line-height: 1.04;
  /* Widened from 16ch (tuned for the old, shorter hero copy) so the longest
     current line, "→ engaging courses." (20 chars), holds on one line. */
  max-width: 21ch;
}

.hero-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule-dark);
}

/* ===== Sections ===== */
.section {
  padding: clamp(3rem, 8vw, 6rem) clamp(1.5rem, 5vw, 4rem);
  border-top: 1px solid var(--rule-light);
}

.section--dark {
  background: var(--deep-blue);
  border-top-color: var(--rule-dark);
}

.section-grid {
  display: grid;
  grid-template-columns: var(--label-col) 1fr;
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

.section-label { padding-top: 0.3rem; }

/* .tag-mono is nowrap by default (right for the short topbar/hero tags), but this
   column is a fixed 150px (--label-col) and a couple of section labels -- this one
   ("AND STUDENTS FINISH IT") included -- render wider than that, overflowing the
   column and bleeding into the heading beside it. Scoped to section labels only, so
   the short tags elsewhere on the page keep their intended single-line look. */
.section-label .tag-mono {
  white-space: normal;
}

.section-content { max-width: var(--content-max); }

.section-content h2 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.2;
  margin-bottom: 1.25rem;
}

.section-content h3 { font-size: 1.1rem; font-weight: 700; }

/* --- What we do --- */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.step {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 1rem;
}

.fig {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: #C84402;
  padding-top: 0.15rem;
}

.step-body h3 { margin-bottom: 0.4rem; }

/* --- Founders --- */
.founders-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 1.5rem;
}

.founder h3 { margin-bottom: 0.5rem; }

/* --- Try-it demos --- */
/* Stacked, not side-by-side: these components are designed to be read at
   close to their own natural width (~620-680px); splitting the 700px content
   column in half cramped them on desktop. One at a time, full width. */
.demo-grid {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  margin-top: 2rem;
}

.demo-card {
  margin: 0; /* reset the browser default <figure> margin (1em 40px) that was silently narrowing it */
}

.demo-card figcaption {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 0.6rem;
}

.demo-card iframe {
  display: block;
  width: 100%;
  border: 1px solid var(--rule-light);
  border-radius: 2px;
  background: var(--white);
}

/* --- Track record --- */
.track-group-heading {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-black);
}

.track-group-heading:first-of-type { margin-top: 1.5rem; }

.track-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.track-list li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.ring-bullet {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--orange);
  transform: translateY(-1px);
}

/* --- Contact form --- */
.contact-form {
  margin-top: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 480px;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-row label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.form-row .optional {
  text-transform: none;
  color: rgba(17, 17, 17, 0.6);
  letter-spacing: 0;
}

.form-row input,
.form-row textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-black);
  background: var(--white);
  border: 1px solid rgba(17, 17, 17, 0.46);
  border-radius: 2px;
  padding: 0.65rem 0.75rem;
  resize: vertical;
}

.form-row input:focus-visible,
.form-row textarea:focus-visible {
  outline: 2px solid var(--light-blue);
  outline-offset: 1px;
  border-color: var(--light-blue);
}

.contact-form .btn {
  align-self: flex-start;
  border: none;
}

.form-fine {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: rgba(17, 17, 17, 0.6);
  max-width: 40ch;
}

/* --- About the name --- */
.section--about-name {
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.snap-demo {
  position: absolute;
  top: 50%;
  right: clamp(-40px, 4vw, 40px);
  transform: translateY(-50%);
  width: clamp(280px, 32vw, 520px);
  height: clamp(280px, 32vw, 520px);
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  z-index: 0;
}

.snap-demo .ring-mark--bg { opacity: 0.55; }
.snap-demo.snap-active .ring-mark--bg { opacity: 1; }

.section--about-name .section-grid {
  position: relative;
  z-index: 1;
}

.snap-label {
  display: block;
  margin-top: 1.75rem;
  color: var(--light-blue);
}

/* ===== Footer ===== */
.footer {
  background: var(--deep-blue);
  color: var(--off-white);
  padding: clamp(3rem, 8vw, 5rem) clamp(1.5rem, 5vw, 4rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.footer-fine {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: rgba(250, 248, 243, 0.6);
  margin-top: 1rem;
}

/* ===== Responsive ===== */
@media (max-width: 720px) {
  .section-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .founders-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .demo-grid {
    gap: 1.5rem;
  }

  .hero-bottom {
    align-items: flex-start;
  }

  .step {
    grid-template-columns: 3rem 1fr;
  }

  /* "behind the text" doesn't work in a single narrow column --
     fall back to a centered mark below the text, like the rest of the page's flow. */
  .snap-demo {
    position: static;
    display: block;
    width: 200px;
    height: 200px;
    margin: 2rem auto 0;
    transform: none;
  }

  .snap-demo .ring-mark--bg { opacity: 0.9; }
  .snap-demo.snap-active .ring-mark--bg { opacity: 1; }

  .snap-label { text-align: center; }

  /* stacked wordmark lockup, per the brand board's tight-space variant
     (Figma node 39:3: 16px/2.4px-tracking whisper, 6px gap, 40px shout --
     scaled to ~65% here so it doesn't dominate a compact mobile nav bar,
     same ratios so "snapping shrimp" still tracks out to STUDIO's width). */
  .hero-topbar {
    flex-wrap: wrap;
    row-gap: 0.75rem;
  }

  .tag-topbar { margin-left: auto; }

  .wordmark {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .wordmark-whisper {
    font-size: 10px;
    letter-spacing: 0.15em;
    color: #a6a6a6;
    white-space: nowrap;
  }

  .wordmark-shout {
    font-size: 26px;
    line-height: 1;
  }
}