/* ══════════════════════════════════════════════════════════
   TradesOnSmash — layout.css   Ed. 04
   Nav, pinned hero, sections, marquee, pricing, FAQ, footer.
   ══════════════════════════════════════════════════════════ */

/* 128px top AND bottom stacked to 256px of dead band between every
   section. Trimmed, and adjacent sections share the gap rather than
   each paying for it in full. */
.sec {
  position: relative;
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(2.75rem, 5.5vw, 5rem) var(--gut);
}
.sec + .sec { padding-top: clamp(1.75rem, 3.5vw, 3rem); }

/* ─── STICKY NAV ───────────────────────────────────────── */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 700;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .6rem var(--gut);
  background: rgba(7,7,10,.72);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--hair);
  transform: translateY(-105%);
  transition: transform .38s cubic-bezier(.2,.8,.3,1);
}
.nav.is-stuck { transform: translateY(0); }
.nav__brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.nav__logo { width: 40px; height: 40px; border-radius: var(--r-sm); box-shadow: 0 0 18px rgba(139,80,193,.55); }
.nav__name { font-family: var(--f-display); font-weight: 700; font-size: .95rem; letter-spacing: .04em; text-transform: uppercase; }
.nav__links { display: flex; align-items: center; gap: clamp(.8rem, 2vw, 1.8rem); }
.nav__links a:not(.btn) {
  font-family: var(--f-mono); font-size: .72rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-dim); text-decoration: none;
  /* WCAG 2.2 AA (2.5.8): the text sits at 19px tall, which is a fiddly
     target on a touch iPad. Padding grows the hit area past 24px
     without moving the label or changing the bar's height. */
  display: inline-flex; align-items: center; min-height: 24px;
  padding: .3rem .1rem;
  transition: color .2s ease, text-shadow .2s ease;
}
.nav__links a:not(.btn):hover { color: var(--green); text-shadow: var(--glow-green); }

/* ─── HERO (pinned + scrubbed) ─────────────────────────── */

/* The pin reserves scroll runway below the copy, so the hero already
   has slack at the bottom. Sitting the copy low in the viewport closes
   the gap to the ticker instead of stacking centring slack on top of
   pin slack. */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; }
/* Legibility scrim: keeps headline contrast high over the 3D scene
   without hiding the depth behind it. Contrast first, spectacle second. */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 70% 65% at 28% 50%, rgba(7,7,10,.92), rgba(7,7,10,.55) 55%, transparent 78%);
}
.hero__in {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--maxw); margin: 0 auto;
  padding: clamp(3rem, 6vh, 5rem) var(--gut) clamp(2rem, 4vh, 3.5rem);
}
.hero__mark { display: inline-flex; align-items: center; gap: 1rem; text-decoration: none; margin-bottom: clamp(1.6rem, 5vh, 3rem); }
.hero__logo {
  width: clamp(66px, 9vw, 104px); height: auto; border-radius: var(--r-md);
  box-shadow: 0 0 34px rgba(139,80,193,.55), 0 0 80px rgba(95,212,163,.18);
  cursor: pointer;
}
.hero__wm { display: flex; flex-direction: column; line-height: 1.1; }
.hero__wm b { font-family: var(--f-display); font-weight: 700; font-size: clamp(1rem, 2.4vw, 1.55rem); text-transform: uppercase; }
.hero__wm span { font-family: var(--f-mono); font-size: .6rem; letter-spacing: .26em; text-transform: uppercase; color: var(--green); }

.hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.hero__trust { margin: 1.4rem 0 0; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em; color: var(--text-faint); }
/* Keeps a short phrase from breaking across lines and stranding a
   fragment like "in" on its own -- used in the trust lines, which are
   a run of separate claims rather than flowing prose. */
.nowrap { white-space: nowrap; }
.hero__trust b { color: var(--green); font-weight: 600; }

.hero__scroll {
  position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%);
  font-family: var(--f-mono); font-size: .6rem; letter-spacing: .28em;
  text-transform: uppercase; color: var(--text-faint);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.hero__scroll::after {
  content: ""; width: 1px; height: 34px;
  background: linear-gradient(var(--green), transparent);
}

/* SplitText targets: chars animate, so give them a stacking context */
.split { display: inline-block; }
.split .char { display: inline-block; will-change: transform, opacity; }

/* ─── MARQUEE (social proof) ───────────────────────────── */

.marquee {
  position: relative; overflow: hidden;
  /* the duplicated track is intentionally wider than the viewport;
     contain it so it cannot create document-level scroll width */
  max-width: 100vw;
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  background: rgba(12,12,18,.55);
  padding: .9rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track { display: flex; width: max-content; gap: 3rem; will-change: transform; }
.marquee__item {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--f-mono); font-size: .78rem;
  letter-spacing: .12em; color: var(--green-deep); white-space: nowrap;
}
.marquee__item b { color: var(--green); font-weight: 600; text-shadow: var(--glow-green); }
.marquee__item::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--purple); margin-left: 3rem; box-shadow: 0 0 8px var(--purple); }

/* ─── PRODUCT SECTIONS ─────────────────────────────────── */

/* The canvas is a fixed 1.88:1 slab, so it is roughly half the height of
   the text beside it and can never match it. Centring it left ~220px of
   void above AND below. Instead both columns start at the top and the
   media sticks while the taller text scrolls past it -- the leftover
   space becomes travel rather than emptiness. The text column is capped
   so the two never drift far apart in the first place. */
.feat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.feat--flip { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.feat--flip .feat__media { order: -1; }
.feat > div { max-width: 58ch; }

.feat__name { font-family: var(--f-display); font-weight: 700; font-size: clamp(2.4rem, 6.2vw, 4.4rem); line-height: .95; letter-spacing: -.02em; text-transform: uppercase; margin: 0 0 .5rem; }
.feat__tag { font-size: clamp(1.05rem, 2.2vw, 1.4rem); font-weight: 500; margin: 0 0 1.4rem; }
.feat__body { color: var(--text-dim); margin: 0 0 1.8rem; max-width: 46ch; }

/* Two-up inside the method sections: a single 5-item column ran ~240px
   taller than the canvas beside it, which is what opened the void in
   the lower left. Pairing them halves the list and widens the text
   block to match the media. */
.speclist { list-style: none; margin: 0 0 1.8rem; padding: 0; }
.feat .speclist {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1rem, 2.5vw, 2rem);
}
.speclist li { display: flex; gap: .8rem; align-items: baseline; padding: .72rem 0; border-bottom: 1px solid var(--hair); font-size: .93rem; }
.speclist li::before { content: "//"; font-family: var(--f-mono); font-size: .7rem; opacity: .8; }
.speclist--green  li::before { color: var(--green); }
.speclist--purple li::before { color: var(--purple-lift); }

.quote {
  margin: 0 0 2rem; padding: 1rem 1.2rem;
  border-left: 3px solid currentColor; border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem); font-weight: 500; line-height: 1.4;
  background: rgba(255,255,255,.04);
}
.quote--green  { color: var(--green); }
.quote--purple { color: var(--purple-lift); }

.feat__media { position: sticky; top: clamp(5rem, 12vh, 7.5rem); }
.feat__media canvas, .feat__media svg { display: block; width: 100%; height: auto; }

/* ─── METRICS (odometer) ───────────────────────────────── */

.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: var(--r-lg); overflow: hidden; }
.metric { background: rgba(12,12,18,.72); padding: clamp(1.4rem, 3vw, 2.2rem) 1.2rem; text-align: center; }
.metric__v {
  display: flex; justify-content: center; align-items: baseline;
  font-family: var(--f-mono); font-weight: 600;
  font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.metric:nth-child(odd)  .metric__v { color: var(--green);       text-shadow: var(--glow-green); }
.metric:nth-child(even) .metric__v { color: var(--purple-lift); text-shadow: var(--glow-purple); }

/* odometer: a column of digits that slides vertically */
.odo { display: inline-block; height: 1em; overflow: hidden; }
.odo__strip { display: block; will-change: transform; }
.odo__strip span { display: block; height: 1em; line-height: 1; }

.metric__k { display: block; margin-top: .7rem; font-family: var(--f-mono); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-faint); }

/* ─── PRICING (morph transition target) ────────────────── */

/* The gate is a decorative wave, not a spacer. It used to add a flat
   120px band on top of the pricing section's own padding, which read as
   a dead gap rather than a transition. Shorter, and the section behind
   it pulls up so the wave overlaps instead of stacking. */
.morph-gate { position: relative; height: 84px; margin-bottom: -1px; overflow: hidden; pointer-events: none; }
.morph-gate svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.morph-gate + .sec { padding-top: clamp(1rem, 2vw, 1.75rem); }

.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 1.8rem); align-items: stretch; }
/* two tiers: keep them from stretching to billboard width */
.tiers--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; margin-inline: auto; }
.tier { display: flex; flex-direction: column; padding: clamp(1.5rem, 3vw, 2.2rem); }
.tier__name { font-family: var(--f-display); font-weight: 700; font-size: 1.35rem; text-transform: uppercase; margin: 0 0 .3rem; }
.tier__for { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 1.4rem; }
.tier__price { font-family: var(--f-mono); font-weight: 600; font-size: clamp(2.2rem, 5vw, 3rem); line-height: 1; margin: 0 0 1.4rem; font-variant-numeric: tabular-nums; }
.tier__price i { font-style: normal; font-size: .8rem; letter-spacing: .14em; color: var(--text-faint); }
.tier__list { list-style: none; margin: 0 0 1.8rem; padding: 0; flex: 1; }
.tier__list li { display: flex; gap: .6rem; align-items: baseline; padding: .55rem 0; font-size: .88rem; color: var(--text-dim); border-bottom: 1px solid var(--hair); }
.tier__list li::before { content: "+"; font-family: var(--f-mono); }

.tier--green  .tier__name, .tier--green  .tier__price { color: var(--green); text-shadow: var(--glow-green); }
.tier--green  .tier__list li::before { color: var(--green); }
.tier--purple .tier__name, .tier--purple .tier__price { color: var(--purple-lift); text-shadow: var(--glow-purple); }
.tier--purple .tier__list li::before { color: var(--purple-lift); }
.tier--purple .btn--ghost { color: var(--purple-lift); background: rgba(139,80,193,.08); border-color: rgba(139,80,193,.5); }
.tier--purple .btn--ghost:hover { background: rgba(139,80,193,.16); border-color: var(--purple-lift); box-shadow: var(--glow-purple); }

/* recommended tier: soft particle halo + magenta */
.tier--best { border-color: rgba(216,127,240,.55); }
.tier--best .tier__name, .tier--best .tier__price { color: var(--magenta); text-shadow: var(--glow-mag); }
.tier--best .tier__list li::before { color: var(--magenta); }
/* Same rule as the closer canvas: match the 420x620 buffer so the
   halo orbits stay circular rather than stretching with the card. */
.tier__halo {
  position: absolute;
  top: 50%; left: 50%;
  width: 420px; height: 620px;
  margin: -310px 0 0 -210px;
  max-width: none;
  pointer-events: none;
  z-index: 0;
}
.tier__flag {
  align-self: flex-start; margin-bottom: .9rem; padding: .3rem .75rem; border-radius: 999px;
  font-family: var(--f-mono); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
  color: #14061A; background: var(--magenta); box-shadow: var(--glow-mag);
}
.tier > *:not(.tier__halo) { position: relative; z-index: 1; }

/* the saving, stated in the tier itself rather than left as homework */
.tier__note {
  margin: -.9rem 0 1.3rem;
  font-family: var(--f-mono); font-size: .66rem;
  letter-spacing: .08em; color: var(--text-faint);
}
.tier__note s { opacity: .8; }
.tier__note b { color: var(--magenta); font-weight: 600; text-shadow: 0 0 10px rgba(216,127,240,.4); }

.pricing__math {
  margin: clamp(1.6rem, 3vw, 2.2rem) auto 0; max-width: 62ch; text-align: center;
  font-size: .95rem; color: var(--text-dim);
}
.pricing__math b { color: var(--green); font-weight: 600; }

.pricing__after { margin-top: clamp(2rem, 4vw, 3rem); text-align: center; }
.pricing__trust { margin: 1rem 0 0; font-family: var(--f-mono); font-size: .74rem; letter-spacing: .1em; color: var(--text-faint); }
.pricing__trust b { color: var(--green); font-weight: 600; }

/* ─── FAQ (calm: height morph only) ────────────────────── */

.faq__list { border-top: 1px solid var(--hair); }
.qa { border-bottom: 1px solid var(--hair); }
.qa__q {
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
  width: 100%; padding: 1.3rem .2rem; cursor: pointer; text-align: left;
  background: none; border: 0; color: var(--text);
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1rem, 2vw, 1.2rem); text-transform: uppercase;
  transition: color .25s ease;
}
.qa__q:hover, .qa[open] .qa__q { color: var(--green); }
.qa__m { position: relative; flex: 0 0 18px; height: 18px; }
.qa__m::before, .qa__m::after { content: ""; position: absolute; background: var(--green-deep); transition: transform .3s ease, opacity .3s ease; }
.qa__m::before { top: 8px; left: 0; width: 18px; height: 2px; }
.qa__m::after  { left: 8px; top: 0; width: 2px; height: 18px; }
.qa.is-open .qa__m::after { transform: scaleY(0); opacity: 0; }
.qa__a { overflow: hidden; height: 0; }
.qa__a p { margin: 0; padding: 0 .2rem 1.4rem; max-width: 68ch; color: var(--text-dim); font-size: .93rem; }

/* ─── FOOTER ───────────────────────────────────────────── */

.closer { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.4rem; position: relative; }
.closer__stage { position: relative; display: grid; place-items: center; }
.closer__logo {
  width: clamp(150px, 22vw, 240px); height: auto; border-radius: var(--r-lg);
  box-shadow: 0 0 50px rgba(139,80,193,.6), 0 0 120px rgba(95,212,163,.2);
  cursor: pointer;
}
/* Canvas CSS box must match its 700x500 drawing buffer, or the
   convergence ellipse gets stretched and reads off-centre. */
.closer__canvas {
  position: absolute;
  top: 50%; left: 50%;
  width: 700px; height: 500px;
  margin: -250px 0 0 -350px;
  max-width: none;
  pointer-events: none;
}

.foot {
  position: relative; z-index: 1;
  border-top: 1px solid var(--hair); padding: 1.4rem var(--gut);
  display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; align-items: center; justify-content: space-between;
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint);
}

/* easter-egg toast */
.egg {
  position: fixed; left: 50%; bottom: 2rem; transform: translate(-50%, 20px);
  z-index: 1200; padding: .7rem 1.3rem; border-radius: 999px;
  background: rgba(12,12,18,.92); border: 1px solid var(--magenta);
  box-shadow: var(--glow-mag);
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--magenta);
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.egg.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ─── RESPONSIVE ───────────────────────────────────────── */

@media (max-width: 980px) {
  .feat, .feat--flip { grid-template-columns: minmax(0, 1fr); }
  .feat--flip .feat__media { order: 0; }
  /* Sticky only earns its keep beside a taller text column. Once the
     grid stacks, the media sits ABOVE the prose, so sticking would pin
     the chart over the copy the reader is trying to reach. */
  .feat__media { position: static; }
  .tiers { grid-template-columns: minmax(0, 1fr); }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .nav__links a:not(.btn) { display: none; }
  /* At 390px the CTA and the wordmark were overlapping by 6px -- the
     logo mark alone still identifies the brand, and the CTA is the
     reason the bar is there, so the word yields rather than collides. */
  .nav__name { display: none; }
  /* Two spec columns need ~58ch to breathe; below that the labels wrap
     mid-phrase and the pairing costs more than the space it saves. */
  .feat .speclist { grid-template-columns: minmax(0, 1fr); }
  /* 11.5px mono with wide tracking is a squint on a phone, and this is
     the line that states the billing terms -- the last place to be
     coy. Bumped over 14px and the letter-spacing eased so the extra
     size does not force an awkward wrap. */
  .hero__trust, .pricing__trust {
    font-size: .82rem; letter-spacing: .05em; line-height: 1.7;
  }
}

/* ─── SOCIAL LINKS (footer) ────────────────────────────── */
/* 40px round targets clear WCAG 2.5.8 (24px) with room to spare on
   touch. Icons sit at text-dim and light up green on hover/focus, so
   the row reads as part of the HUD rather than six loud brand colours. */
.social {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.social__a {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  color: var(--text-dim);
  border: 1px solid var(--hair);
  background: rgba(255,255,255,.02);
  transition: color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.social__ico { width: 18px; height: 18px; fill: currentColor; }
.social__a:hover, .social__a:focus-visible {
  color: var(--green); border-color: rgba(95,212,163,.55);
  box-shadow: var(--glow-green); transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .social__a { transition: none; }
  .social__a:hover, .social__a:focus-visible { transform: none; }
}
@media (max-width: 720px) {
  /* Stack the footer so the icon row gets its own line on a phone. */
  .foot { flex-direction: column; align-items: flex-start; }
}