/* ============================================================
   COLLECTORS CERTIFIED GRADING — style.css
   Palette: #061019 bg · #162735 panel · #94ADC4/#A6C4E0 muted
            #1492FD→#57DAF9 gradient · #36D4F9 cyan · #1E79D4 blue
   ============================================================ */

:root {
  --bg: #0a0e13;
  --panel: #162735;
  --panel-2: #0d1c2b;
  --text: #ffffff;
  --muted: #A6C4E0;
  --dim: #94ADC4;
  --cyan: #36D4F9;
  --blue: #1E79D4;
  --green: #3DD68C;   /* gain / savings — the positive half of .up/.down */
  --orange: #FF7A1A;
  --orange-soft: rgba(255, 122, 26, .14);
  --grad: linear-gradient(90deg, #1492FD, #57DAF9);
  --grad-soft: linear-gradient(135deg, rgba(20,146,253,.25), rgba(87,218,249,.12));
  --radius: 18px;
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-mark: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
  --shadow-glow: 0 0 40px rgba(54, 212, 249, .22);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body { overflow-x: clip; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

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

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: 17px;
  letter-spacing: .8px; text-transform: uppercase;
  padding: 12px 26px; border-radius: 999px; border: none; cursor: pointer;
  transition: transform .25s cubic-bezier(.2,.9,.3,1.4), box-shadow .25s, background .25s, border-color .25s;
  white-space: nowrap;
}
.btn-primary {
  background: var(--grad); color: #04121f;
  box-shadow: 0 4px 24px rgba(20,146,253,.45);
}
.btn-primary:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 34px rgba(54,212,249,.6); }
.btn-ghost {
  background: rgba(166,196,224,.06); color: var(--text);
  border: 1px solid rgba(166,196,224,.25);
}
.btn-ghost:hover { border-color: var(--cyan); background: rgba(54,212,249,.08); transform: translateY(-2px); }
.btn-sm { padding: 9px 18px; font-size: 14px; }
.btn-lg { padding: 15px 32px; font-size: 16px; }
.btn-block { width: 100%; }

.text-link { color: var(--cyan); font-weight: 600; transition: opacity .2s; }
.text-link:hover { opacity: .75; }

/* ---------------- Nav ---------------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding: 14px 0;
  transition: background .35s, backdrop-filter .35s, box-shadow .35s, padding .35s;
}
.nav.scrolled {
  padding: 8px 0;
  background: rgba(6,16,25,.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(166,196,224,.12);
}
.nav-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav-logo { width: 168px; height: auto; }
.nav-links { display: flex; gap: 22px; }
.nav-links a {
  font-size: 14px; font-weight: 500; color: var(--muted);
  position: relative; transition: color .2s;
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: -5px; height: 2px; width: 0;
  background: var(--grad); border-radius: 2px; transition: width .25s;
}
.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after { width: 100%; }
.nav-links a.active { color: var(--text); }
.nav-links a.active::after { width: 100%; }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.nav-burger { display: none; background: none; border: none; cursor: pointer; padding: 6px; }
.nav-burger span { display: block; width: 22px; height: 2px; background: var(--text); margin: 5px 0; border-radius: 2px; transition: .3s; }

/* ---------------- Hero ---------------- */
.hero { height: 280vh; position: relative; }
.hero-sticky {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
#particles { position: absolute; inset: 0; width: 100%; height: 100%; }

.orb { position: absolute; border-radius: 50%; filter: blur(90px); }
.orb-1 { width: 560px; height: 560px; background: #1E79D4; top: -200px; left: -160px; opacity: .32; animation: drift 16s ease-in-out infinite alternate; }
.orb-2 { width: 460px; height: 460px; background: #b3541e; bottom: -200px; right: -100px; opacity: .18; animation: drift 20s ease-in-out infinite alternate-reverse; }
@keyframes drift {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(60px, -40px) scale(1.15); }
}

/* stadium spotlight beams */
.beam {
  position: absolute; top: -12%; width: 190px; height: 85%;
  background: linear-gradient(180deg, rgba(255,244,224,.16), rgba(255,244,224,.04) 55%, transparent);
  filter: blur(26px);
  transform-origin: top center;
  mix-blend-mode: screen;
}
.beam-1 { left: 12%; transform: rotate(16deg); animation: sway 11s ease-in-out infinite alternate; }
.beam-2 { left: 46%; width: 240px; opacity: .8; transform: rotate(-6deg); animation: sway 14s ease-in-out infinite alternate-reverse; }
.beam-3 { right: 8%; transform: rotate(-18deg); animation: sway 12s ease-in-out infinite alternate; }
@keyframes sway {
  from { transform: rotate(var(--r, 12deg)); opacity: .65; }
  to   { transform: rotate(calc(var(--r, 12deg) - 8deg)); opacity: 1; }
}
.beam-1 { --r: 16deg; } .beam-2 { --r: -6deg; } .beam-3 { --r: -18deg; }

/* hardwood court glow at the floor of the arena */
.court-glow {
  position: absolute; left: -10%; right: -10%; bottom: -6%; height: 34%;
  background:
    radial-gradient(ellipse 60% 90% at 50% 100%, rgba(255,140,60,.20), transparent 70%),
    radial-gradient(ellipse 90% 100% at 50% 115%, rgba(122,63,20,.30), transparent 75%);
}
.court-glow::after {
  content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 560px; height: 280px;
  border: 2px solid rgba(255,170,90,.14); border-bottom: none;
  border-radius: 280px 280px 0 0;
}

.hero-content {
  position: relative; z-index: 2;
  max-width: 1180px; margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 40px;
  width: 100%;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--cyan);
  background: rgba(54,212,249,.08);
  border: 1px solid rgba(54,212,249,.25);
  padding: 8px 16px; border-radius: 999px; margin-bottom: 26px;
}
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); animation: pulse 2s infinite; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,122,26,.6); }
  70%  { box-shadow: 0 0 0 10px rgba(255,122,26,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,122,26,0); }
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(58px, 7.5vw, 104px);
  line-height: .92; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.hero-title .line { display: block; overflow: hidden; }
.hero-sub { font-size: 18px; color: var(--muted); max-width: 500px; margin-bottom: 34px; }
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 46px; }
.hero-ctas.center { justify-content: center; margin-bottom: 0; }

.hero-stats { display: flex; gap: 44px; flex-wrap: wrap; }
.stat { display: flex; flex-direction: column; }
.stat-num {
  font-family: var(--font-display); font-size: 42px; font-weight: 700; line-height: 1.1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-label { font-size: 13px; color: var(--dim); letter-spacing: .5px; }

.scroll-cue {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 2;
  width: 26px; height: 42px; border: 2px solid rgba(166,196,224,.4); border-radius: 14px;
  display: flex; justify-content: center; padding-top: 7px;
}
.scroll-cue-wheel { width: 4px; height: 8px; background: var(--cyan); border-radius: 2px; animation: wheel 1.8s infinite; }
@keyframes wheel { 0% { opacity: 1; transform: translateY(0); } 70% { opacity: 0; transform: translateY(12px); } 100% { opacity: 0; } }

/* ---------------- 3D Slab ---------------- */
.scene {
  perspective: 1400px;
  display: flex; flex-direction: column; align-items: center; gap: 26px;
  justify-self: center;
}
.slab {
  position: relative;
  width: min(300px, 74vw);
  aspect-ratio: 720 / 1190;
  transform-style: preserve-3d;
  will-change: transform;
}
.slab-face {
  position: absolute; inset: 0;
  border-radius: 22px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.slab-front {
  background: linear-gradient(160deg, rgba(190,220,245,.16), rgba(120,160,200,.05) 40%, rgba(190,220,245,.13));
  border: 1px solid rgba(200,230,255,.35);
  box-shadow:
    inset 0 0 30px rgba(200,230,255,.08),
    0 30px 80px rgba(0,0,0,.55),
    var(--shadow-glow);
  overflow: hidden;
  transform: translateZ(10px);
}
.slab-back {
  transform: rotateY(180deg) translateZ(10px);
  background: linear-gradient(160deg, #0c1e30, #061019 60%, #0c2236);
  border: 1px solid rgba(200,230,255,.25);
  box-shadow: 0 30px 80px rgba(0,0,0,.55), var(--shadow-glow);
  overflow: hidden;
}

/* slab product photos — fill the front & back faces edge to edge */
.slab-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.card-glare {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(
    circle at calc(var(--gx, 50) * 1%) calc(var(--gy, 40) * 1%),
    rgba(255,255,255,.55), rgba(255,255,255,.12) 22%, transparent 55%
  );
  mix-blend-mode: overlay;
}
.slab-sheen {
  position: absolute; inset: 0; pointer-events: none; border-radius: 22px;
  background: linear-gradient(
    calc(var(--sheen, 115) * 1deg),
    transparent 30%, rgba(255,255,255,.14) 47%, rgba(255,255,255,.3) 50%, rgba(255,255,255,.14) 53%, transparent 70%
  );
}

.tap-rings span {
  position: absolute; inset: 0; border: 1.5px solid rgba(54,212,249,.5); border-radius: 50%;
  animation: ring 2.6s ease-out infinite;
}
.tap-rings span:nth-child(2) { animation-delay: .85s; }
.tap-rings span:nth-child(3) { animation-delay: 1.7s; }
@keyframes ring {
  from { transform: scale(.55); opacity: 1; }
  to   { transform: scale(1.5); opacity: 0; }
}

.slab-shadow {
  width: 70%; height: 26px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(54,212,249,.35), transparent 70%);
  filter: blur(6px);
}
.scene-hint { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--dim); opacity: .7; }

/* ---------------- Ticker ---------------- */
/* HIDDEN, not deleted (Jacob, 2026-08-30): the lines it scrolls (prices,
   add-on costs) went stale, and he chose hiding over maintaining them.
   The markup stays in index.html so bringing it back is deleting the one
   line below — but its CONTENT would still need re-sourcing from live
   Settings before it earns the screen again. */
.ticker { display: none; }
.ticker {
  border-top: 1px solid rgba(166,196,224,.12);
  border-bottom: 1px solid rgba(166,196,224,.12);
  background: rgba(22,39,53,.5);
  overflow: hidden; padding: 14px 0;
  position: relative; z-index: 3;
}
.ticker-track {
  display: flex; gap: 56px; width: max-content;
  animation: ticker 30s linear infinite;
}
.ticker-track span {
  font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: 3px;
  color: var(--dim); white-space: nowrap;
}
/* D146 — the marquee is TWO IDENTICAL HALVES and the loop is translateX(-50%), so a
   colour rule has to repeat on the SAME CYCLE as the content or the seam flickers. The
   ticker carried six segments a half and `:nth-child(odd)` happened to line up; taking
   the subgrading price off it left FIVE, at which odd/even inverts across the repeat and
   every segment changes colour once per pass — the same words, orange then grey, on a
   loop. Colouring by position within the five instead makes both halves identical. The
   one cost is that slots 5 and 1 sit next to each other in the same colour at the seam,
   which is unavoidable with an odd count and is the smaller of the two artefacts.
   IF THE SEGMENT COUNT CHANGES, CHANGE THIS: the 5 in each selector is that count. */
.ticker-track span:nth-child(5n+1),
.ticker-track span:nth-child(5n+3),
.ticker-track span:nth-child(5n+5) { color: #FFA75C; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------------- Sections ---------------- */
.section { padding: 110px 0; position: relative; }
.section-alt {
  background:
    radial-gradient(ellipse 60% 50% at 80% 0%, rgba(30,121,212,.10), transparent),
    linear-gradient(180deg, rgba(22,39,53,.45), rgba(22,39,53,.15));
}
.section-head { text-align: center; max-width: 680px; margin: 0 auto 64px; }
.kicker {
  display: inline-block; font-family: var(--font-display); font-size: 17px; font-weight: 700;
  letter-spacing: 4px; text-transform: uppercase; color: var(--orange); margin-bottom: 12px;
}
.section-head h2, .split-copy h2, .cta-banner h2 {
  font-family: var(--font-display); font-size: clamp(38px, 4.6vw, 58px);
  font-weight: 700; letter-spacing: .5px; line-height: 1.02; margin-bottom: 18px;
  text-transform: uppercase;
}
.section-head p { color: var(--muted); font-size: 17px; }
.fine-print { text-align: center; color: var(--dim); font-size: 13px; margin-top: 28px; }

/* ---------------- Pricing add-ons ---------------- */
.addon-panel {
  margin-top: 34px;
  background: rgba(22,39,53,.55);
  border: 1px solid rgba(166,196,224,.15);
  border-radius: 22px;
  padding: 28px 30px;
}
.addon-head h3 { font-family: var(--font-display); font-size: 20px; letter-spacing: 1px; }
.addon-head p { font-size: 13px; color: var(--dim); margin-top: 4px; }
.addon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; }
.addon {
  padding: 16px 18px;
  background: rgba(6,16,25,.5);
  border: 1px solid rgba(166,196,224,.12);
  border-radius: 14px;
}
.addon-name { display: block; font-weight: 600; font-size: 15px; }
/* D147 — the Other Grading Services tiles gained a Submit Cards button, so they need the
   .price-card column treatment: the tile is a flex column and the feature list takes the
   slack, which is what puts three buttons on one line under lists of different lengths.
   Those lists are admin data (D138), so their lengths WILL diverge - aligning by a fixed
   padding would look right today and drift the first time a bullet is added in Settings.
   Scoped to #servicePanel on purpose: the Specialist Handling and Order Types tiles share
   the .addon class, carry no button, and must not move. */
#servicePanel .addon { display: flex; flex-direction: column; }
#servicePanel .addon .feat-list { flex: 1; }
/* 30px, not a number that looked right: it is exactly what `.price-card ul` puts below
   the last bullet of the Full Grade cards, which is the gap Jacob pointed at on the 20+
   card. That card is the honest reference because its list is the tallest, so its flex
   slack is zero and the 30px is all you are seeing. Measured on both, not eyeballed. */
#servicePanel .addon .btn { margin-top: 30px; }
.addon-price {
  display: block; font-family: var(--font-display); font-size: 24px; font-weight: 700;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  margin: 4px 0 8px;
}
.addon-price small { font-size: 13px; }
.addon p { font-size: 13px; color: var(--dim); margin: 0; }
@media (max-width: 720px) {
  .addon-grid { grid-template-columns: 1fr; }
  .addon-panel { padding: 22px 20px; }
}

/* ---------------- Pricing & plan cards ---------------- */
.price-grid, .plan-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch;
}
.price-card, .plan-card {
  position: relative;
  background: linear-gradient(170deg, rgba(166,196,224,.07), rgba(166,196,224,.02));
  border: 1px solid rgba(166,196,224,.15);
  border-radius: var(--radius);
  padding: 36px 30px;
  display: flex; flex-direction: column;
  transition: transform .35s, border-color .35s, box-shadow .35s;
}
.price-card:hover, .plan-card:hover {
  transform: translateY(-8px);
  border-color: rgba(54,212,249,.5);
  box-shadow: 0 20px 50px rgba(0,0,0,.4), 0 0 30px rgba(54,212,249,.12);
}
.price-card.featured, .plan-card.featured {
  background: linear-gradient(170deg, rgba(20,146,253,.14), rgba(87,218,249,.04));
  border-color: rgba(54,212,249,.45);
  box-shadow: 0 0 44px rgba(20,146,253,.18);
}
.badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(90deg, #E05E00, #FF9A3D); color: #1a0d02;
  font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase;
  padding: 5px 16px; border-radius: 999px;
}
.price-card h3, .plan-card h3 { font-family: var(--font-display); font-size: 20px; margin-bottom: 12px; }
.price { font-family: var(--font-display); font-size: 52px; font-weight: 700; line-height: 1; margin-bottom: 6px; }
.price sup { font-size: 24px; vertical-align: super; color: var(--cyan); }
.price small { font-size: 24px; }
.price span { font-size: 15px; font-weight: 400; color: var(--dim); }
/* the toggled amount is a <span> only so JS can swap it — it must keep the
   full .price type, not the small dim styling meant for the /yr · /mo suffix */
.price .plan-price { font-size: inherit; font-weight: inherit; color: inherit; }
.trial { font-size: 12.5px; color: var(--dim); margin-bottom: 6px; }
.price-card ul, .plan-card ul { margin: 22px 0 30px; flex: 1; }
.price-card li, .plan-card li {
  padding: 8px 0 8px 30px; position: relative; color: var(--muted); font-size: 14.5px;
  border-bottom: 1px dashed rgba(166,196,224,.1);
}
/* own line — "(additional fees apply)" must never break mid-phrase */
.plan-card li small { display: block; font-size: 12.5px; color: var(--dim); }
.price-card li::before, .plan-card li::before, .check-list li::before {
  content: ''; position: absolute; left: 2px; top: 13px;
  width: 15px; height: 15px; border-radius: 50%;
  background:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23061019" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>') center/9px no-repeat,
    var(--grad);
}

/* ---------------- How It Works link-out (grading section) ---------------- */
.how-cta { text-align: center; margin: -24px 0 44px; }

/* ---------------- Billing toggle (Cloud Card plans) ---------------- */
.billing-toggle {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  margin: -30px 0 46px;
}
.bt-switch {
  display: inline-flex; gap: 4px; padding: 5px;
  background: rgba(166,196,224,.07);
  border: 1px solid rgba(166,196,224,.18);
  border-radius: 999px;
}
.bt-opt {
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  letter-spacing: 1.2px; text-transform: uppercase;
  padding: 10px 28px; border-radius: 999px; border: none; cursor: pointer;
  background: transparent; color: var(--muted);
  transition: background .3s, color .3s, box-shadow .3s;
}
.bt-opt:hover { color: var(--text); }
.bt-opt.is-active {
  background: var(--grad); color: #04121f;
  box-shadow: 0 4px 18px rgba(20,146,253,.4);
}
.bt-note {
  font-family: var(--font-display); font-size: 14px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase; color: var(--green);
}
.plan-save {
  font-size: 13px; font-weight: 600; color: var(--cyan);
  margin-bottom: 6px; min-height: 18px;
}
@media (max-width: 480px) {
  .bt-opt { padding: 10px 20px; font-size: 14px; }
  .bt-note { text-align: center; }
  /* Phones only: the two hero CTAs stacked because together they were wider
     than the screen. Force them onto one shared row and shrink to fit.
     Scoped to .hero so desktop and the bottom CTA-banner buttons are untouched. */
  .hero .hero-ctas { flex-wrap: nowrap; gap: 10px; width: 100%; }
  .hero .btn-lg { flex: 1 1 0; min-width: 0; padding: 13px 10px; font-size: 13px; }
  .hero .btn-primary svg { display: none; }   /* drop the arrow so the label fits half-width */

  /* About-section mini-slabs (10 / 9.5 / 10): the % lefts + fixed 170px width
     overflowed right on phones; a fixed-width stack then skewed left on narrow
     screens. Fix: size down to ~78% and anchor every card to the stack's CENTER
     (left:50% + margin-left) so the trio stays centered at ANY width. Rotations/
     z-index inherit from base; parent selector wins on specificity, not order. */
  .split-visual .about-card-stack { height: 236px; }
  .about-card-stack .mini-slab { width: 132px; height: 186px; font-size: 38px; border-radius: 14px; }
  .about-card-stack .ms-1 { left: 50%; margin-left: -132px; top: 22px; }
  .about-card-stack .ms-2 { left: 50%; margin-left: -66px;  top: 0; }
  .about-card-stack .ms-3 { left: 50%; margin-left: 0;      top: 34px; }
}

/* ---------------- Steps ---------------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.step {
  position: relative;
  background: linear-gradient(170deg, rgba(166,196,224,.06), rgba(166,196,224,.02));
  border: 1px solid rgba(166,196,224,.13);
  border-radius: var(--radius);
  padding: 34px 26px;
  transition: transform .35s, border-color .35s;
  overflow: hidden;
}
.step:hover { transform: translateY(-6px); border-color: rgba(54,212,249,.4); }
.step-num {
  position: absolute; top: 12px; right: 18px;
  font-family: var(--font-display); font-size: 62px; font-weight: 800;
  color: rgba(255,122,26,.16);
}
.step-icon {
  width: 54px; height: 54px; border-radius: 14px;
  background: var(--grad-soft); border: 1px solid rgba(54,212,249,.3);
  display: flex; align-items: center; justify-content: center;
  color: var(--cyan); margin-bottom: 20px;
}
.step-icon svg { width: 26px; height: 26px; }
.step h3 { font-family: var(--font-display); font-size: 18px; margin-bottom: 10px; }
.step p { font-size: 14px; color: var(--muted); }

/* ---------------- Split sections ---------------- */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: center; }
.split-copy p { color: var(--muted); margin-bottom: 16px; }
.check-list { margin-top: 24px; }
.check-list li { position: relative; padding: 9px 0 9px 32px; color: var(--muted); }

.phone-tap {
  position: relative; margin: 0 auto;
  width: 280px; height: 280px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
}
.tap-rings { position: absolute; inset: 40px; }
.tap-qr {
  width: 110px; height: 110px; border-radius: 28px;
  background: linear-gradient(160deg, #14283c, #0a1a2a);
  border: 1px solid rgba(54,212,249,.4);
  box-shadow: var(--shadow-glow);
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
}
.tap-caption {
  position: relative; z-index: 1;
  font-family: var(--font-display); font-size: 11px; letter-spacing: 2px; color: var(--cyan);
  background: rgba(54,212,249,.08); border: 1px solid rgba(54,212,249,.3);
  padding: 8px 14px; border-radius: 999px;
}

/* ---------------- Programs ---------------- */
.program-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.program-card {
  background: linear-gradient(170deg, rgba(166,196,224,.07), rgba(166,196,224,.02));
  border: 1px solid rgba(166,196,224,.15);
  border-radius: var(--radius);
  padding: 38px 30px;
  transition: transform .35s, border-color .35s, box-shadow .35s;
}
.program-card:hover {
  transform: translateY(-8px); border-color: rgba(54,212,249,.5);
  box-shadow: 0 20px 50px rgba(0,0,0,.4);
}
.program-icon {
  font-size: 30px; width: 62px; height: 62px; border-radius: 16px;
  background: var(--grad-soft); border: 1px solid rgba(54,212,249,.3);
  display: flex; align-items: center; justify-content: center; margin-bottom: 22px;
}
.program-card h3 { font-family: var(--font-display); font-size: 20px; margin-bottom: 12px; }
.program-card p { font-size: 14.5px; color: var(--muted); margin-bottom: 20px; }

/* ---------------- About visual ---------------- */
.about-card-stack { position: relative; height: 340px; }
.mini-slab {
  position: absolute; width: 170px; height: 240px; border-radius: 16px;
  background: linear-gradient(160deg, rgba(190,220,245,.14), rgba(120,160,200,.04));
  border: 1px solid rgba(200,230,255,.3);
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 44px;
  transition: transform .5s;
}
.mini-slab span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ms-1 { left: 6%; top: 40px; transform: rotate(-8deg); z-index: 1; }
.ms-2 { left: 32%; top: 10px; transform: rotate(2deg); z-index: 2; box-shadow: 0 24px 60px rgba(0,0,0,.6), var(--shadow-glow); }
.ms-3 { left: 58%; top: 55px; transform: rotate(9deg); z-index: 1; }
.about-card-stack:hover .ms-1 { transform: rotate(-13deg) translateX(-14px); }
.about-card-stack:hover .ms-2 { transform: rotate(0deg) translateY(-12px); }
.about-card-stack:hover .ms-3 { transform: rotate(14deg) translateX(14px); }

/* ---------------- CTA banner ---------------- */
.cta-banner {
  padding: 110px 0; text-align: center;
  background:
    radial-gradient(ellipse 55% 90% at 50% 100%, rgba(20,146,253,.22), transparent),
    var(--bg);
  border-top: 1px solid rgba(166,196,224,.1);
}
.cta-banner p { color: var(--muted); margin-bottom: 34px; }

/* ---------------- Footer ---------------- */
.footer { border-top: 1px solid rgba(166,196,224,.12); background: #040c13; padding-top: 64px; }
/* D96 — four columns: brand + Explore / Company / Legal. The Programs column is
   commented out of every footer for launch; restore it and this goes back to
   `2fr 1fr 1fr 1fr 1fr`. */
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 48px; }
.footer-brand p { color: var(--dim); font-size: 14px; margin-top: 16px; }
.footer-col h4 { font-family: var(--font-display); font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 16px; color: var(--muted); }
.footer-col a { display: block; color: var(--dim); font-size: 14px; padding: 5px 0; transition: color .2s; }
.footer-col a:hover { color: var(--cyan); }
.footer-bottom {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid rgba(166,196,224,.08);
  padding-top: 22px; padding-bottom: 22px;
  color: var(--dim); font-size: 13px;
}

/* ---------------- Modal ---------------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(4,10,16,.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal {
  position: relative; width: 100%; max-width: 400px;
  background: linear-gradient(170deg, #14283c, #0a1826);
  border: 1px solid rgba(166,196,224,.2);
  border-radius: 24px; padding: 40px 34px;
  transform: translateY(20px) scale(.97); transition: transform .3s;
  box-shadow: 0 40px 100px rgba(0,0,0,.6), var(--shadow-glow);
}
.modal-overlay.open .modal { transform: translateY(0) scale(1); }
.modal-close {
  position: absolute; top: 16px; right: 16px;
  background: rgba(166,196,224,.08); border: none; color: var(--muted);
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 13px;
  transition: background .2s;
}
.modal-close:hover { background: rgba(166,196,224,.2); }
.modal-logo { width: 150px; margin: 0 auto 14px; }
.modal h3 { font-family: var(--font-display); text-align: center; font-size: 24px; margin-bottom: 24px; }
.modal label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 16px; }
.modal input {
  width: 100%; margin-top: 6px;
  background: rgba(6,16,25,.7); border: 1px solid rgba(166,196,224,.2);
  border-radius: 12px; padding: 12px 16px; color: var(--text); font-size: 15px;
  outline: none; transition: border-color .2s, box-shadow .2s;
}
.modal input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(54,212,249,.15); }
.modal .forgot { display: block; text-align: right; font-size: 13px; color: var(--cyan); margin-bottom: 20px; }
.modal-divider {
  display: flex; align-items: center; gap: 14px; margin: 22px 0;
  color: var(--dim); font-size: 12px;
}
.modal-divider::before, .modal-divider::after { content: ''; flex: 1; height: 1px; background: rgba(166,196,224,.15); }
.modal-social { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal-register { text-align: center; font-size: 13.5px; color: var(--dim); margin-top: 22px; }
.modal-register a { color: var(--cyan); font-weight: 600; }

/* ---------------- Reveal animations ---------------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.price-grid .reveal:nth-child(2), .plan-grid .reveal:nth-child(2) { transition-delay: .1s; }
.price-grid .reveal:nth-child(3), .plan-grid .reveal:nth-child(3) { transition-delay: .2s; }
.steps .reveal:nth-child(2) { transition-delay: .08s; }
.steps .reveal:nth-child(3) { transition-delay: .16s; }
.steps .reveal:nth-child(4) { transition-delay: .24s; }
.program-grid .reveal:nth-child(2) { transition-delay: .1s; }
.program-grid .reveal:nth-child(3) { transition-delay: .2s; }

/* ---------------- Responsive ---------------- */
@media (max-width: 1020px) {
  .hero { height: 240vh; }
  .hero-content { grid-template-columns: minmax(0, 1fr); gap: 44px; text-align: center; }
  .hero-copy, .scene { min-width: 0; max-width: 100%; }
  .hero-copy { order: 2; display: flex; flex-direction: column; align-items: center; }
  .scene { order: 1; margin-top: 70px; }
  .slab { width: min(260px, 70vw); }
  .hero-title { font-size: clamp(36px, 7vw, 56px); }
  .hero-stats { justify-content: center; gap: 30px; }
  .steps, .price-grid, .plan-grid, .program-grid { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; gap: 44px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1080px) {
  .nav-links { display: none; position: fixed; top: 60px; left: 16px; right: 16px;
    flex-direction: column; gap: 4px;
    background: rgba(10,22,34,.97); border: 1px solid rgba(166,196,224,.15);
    border-radius: 16px; padding: 16px; z-index: 99; }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 10px 12px; }
  .nav-burger { display: block; }
}
@media (max-width: 640px) {
  .nav-actions .btn-ghost { display: none; }
  .nav-inner { padding: 0 16px; gap: 12px; }
  .nav-logo { width: 128px; }
  .nav-actions { gap: 8px; }
  .nav-actions .btn-primary { padding: 8px 12px; font-size: 12.5px; }
  .eyebrow { font-size: 10.5px; letter-spacing: 1px; padding: 7px 12px; }
  .hero-sub { max-width: 100%; }
  .slab { width: min(250px, 68vw); }
  .steps, .price-grid, .plan-grid, .program-grid { grid-template-columns: 1fr; }
  /* phones: hero flows naturally; the slab still spins via the JS scroll fallback */
  .hero { height: auto; }
  .hero-sticky { position: relative; height: auto; min-height: 100vh; padding: 96px 0 56px; }
  .hero-content { gap: 34px; }
  .scene { margin-top: 0; }
  .slab { width: min(230px, 62vw); }
  .hero-title { font-size: clamp(30px, 9vw, 40px); }
  .hero-sub { font-size: 15px; }
  .hero-stats { gap: 20px; }
  .stat-num { font-size: 24px; }
  .scroll-cue { display: none; }
  .section { padding: 72px 0; }
  .scene-hint { display: none; }
}

/* ---------------- Cloud Card partner panel ---------------- */
.split-cta { margin-top: 28px; }
.partner-panel {
  margin: 0 auto; max-width: 360px; text-align: center;
  background: linear-gradient(160deg, rgba(190,220,245,.10), rgba(120,160,200,.03));
  border: 1px solid rgba(200,230,255,.25); border-radius: 24px;
  padding: 48px 36px;
  box-shadow: 0 30px 80px rgba(0,0,0,.45), var(--shadow-glow);
}
.partner-logo { width: 84px; margin: 0 auto 18px; }
.partner-word { font-family: var(--font-mark); font-size: 26px; letter-spacing: 3px; }
.partner-word b { font-weight: 700; color: var(--cyan); }
.partner-panel p { color: var(--dim); font-size: 13.5px; margin: 10px 0 22px; }
.partner-tags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.partner-tags span {
  font-family: var(--font-display); font-size: 13px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--cyan);
  background: rgba(54,212,249,.08); border: 1px solid rgba(54,212,249,.3);
  padding: 5px 12px; border-radius: 999px;
}

/* ============================================================
   MY PORTFOLIO PAGE
   ============================================================ */
.pf-body .nav {
  background: rgba(6,16,25,.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.pf-main { padding: 150px 0 90px; }

.pf-head { text-align: center; max-width: 760px; margin: 0 auto 48px; }
.pf-head h1 {
  font-family: var(--font-display); font-size: clamp(42px, 6vw, 72px);
  font-weight: 700; letter-spacing: .5px; line-height: 1.02;
  text-transform: uppercase; margin-bottom: 14px;
}
.pf-powered { color: var(--muted); font-size: 15.5px; }
.pf-powered em { color: var(--dim); font-size: .88em; }

/* gain/loss status colors — always paired with ▲/▼ and a signed value */
.up { color: var(--green); }
.down { color: #F76F72; }

/* summary: hero figure + stat tiles */
.pf-summary {
  display: grid; grid-template-columns: 1.1fr 1.6fr; gap: 20px;
  margin-bottom: 20px; align-items: stretch;
}
.pf-hero, .pf-tile, .pf-panel {
  background: linear-gradient(170deg, rgba(166,196,224,.07), rgba(166,196,224,.02));
  border: 1px solid rgba(166,196,224,.15);
  border-radius: var(--radius);
}
.pf-hero {
  display: flex; flex-direction: column; justify-content: center;
  padding: 30px 34px; gap: 6px;
}
.pf-hero-label { font-size: 13px; color: var(--dim); letter-spacing: .5px; }
.pf-hero-value {
  font-family: var(--font-mark); font-weight: 700;
  font-size: clamp(42px, 4.6vw, 58px); line-height: 1.05;
}
.pf-hero-delta { font-size: 14.5px; font-weight: 600; }

.pf-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pf-tile { padding: 20px 24px; display: flex; flex-direction: column; gap: 3px; justify-content: center; }
.pf-tile-label { font-size: 12.5px; color: var(--dim); }
.pf-tile-value { font-family: var(--font-mark); font-size: 26px; font-weight: 600; line-height: 1.15; }
.pf-tile-sub { font-size: 12.5px; font-weight: 600; }

/* panels */
.pf-panel { padding: 26px 28px; margin-bottom: 20px; }
.pf-panel-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.pf-panel-title { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.pf-panel-title h2 {
  font-family: var(--font-display); font-size: 24px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase;
}
.pf-panel-sub { font-size: 13px; color: var(--dim); }
.pf-range-delta { font-size: 14px; font-weight: 600; }

/* range / period tabs */
.pf-range-tabs {
  display: flex; gap: 4px;
  background: rgba(6,16,25,.55);
  border: 1px solid rgba(166,196,224,.15);
  padding: 4px; border-radius: 999px;
}
.pf-range-tab, .pf-period-tab {
  background: none; border: none; color: var(--dim);
  font-family: var(--font-body); font-size: 12.5px; font-weight: 600;
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  transition: color .2s, background .2s;
}
.pf-range-tab:hover, .pf-period-tab:hover { color: var(--text); }
.pf-range-tab.active, .pf-period-tab.active { background: var(--grad); color: #04121f; }

/* chart */
.pf-chart-wrap { position: relative; height: 340px; }
#pfChart { display: block; width: 100%; height: 100%; outline: none; border-radius: 8px; }
#pfChart:focus-visible { box-shadow: 0 0 0 2px rgba(54,212,249,.5); }
.pf-tooltip[hidden] { display: none; }
.pf-tooltip {
  position: absolute; pointer-events: none; z-index: 5;
  display: flex; flex-direction: column; gap: 1px;
  background: rgba(6,16,25,.94);
  border: 1px solid rgba(54,212,249,.35);
  border-radius: 10px; padding: 8px 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.pf-tip-value { font-family: var(--font-mark); font-weight: 700; font-size: 15px; }
.pf-tip-date { font-size: 11.5px; color: var(--dim); }

/* tables */
.pf-table-details { margin-top: 14px; }
.pf-table-details summary { cursor: pointer; font-size: 13px; color: var(--dim); transition: color .2s; }
.pf-table-details summary:hover { color: var(--cyan); }
.pf-table-scroll { overflow-x: auto; margin-top: 12px; }
.pf-table-scroll table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pf-table-scroll th {
  text-align: left; font-family: var(--font-display); font-size: 12.5px;
  font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--dim); padding: 10px 14px;
  border-bottom: 1px solid rgba(166,196,224,.15); white-space: nowrap;
}
.pf-table-scroll td {
  padding: 12px 14px; color: var(--muted);
  border-bottom: 1px dashed rgba(166,196,224,.1);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pf-table-scroll th:not(:first-child), .pf-table-scroll td:not(:first-child) { text-align: right; }
.pf-table-scroll tr:last-child td { border-bottom: none; }
.hold-card strong { display: block; color: var(--text); font-weight: 600; }
.hold-card span { font-size: 12.5px; color: var(--dim); }

/* top movers */
.pf-movers { display: flex; flex-direction: column; }
.mover {
  display: flex; align-items: center; gap: 16px;
  padding: 13px 6px;
  border-bottom: 1px dashed rgba(166,196,224,.1);
}
.mover:last-child { border-bottom: none; }
.mover-rank {
  width: 30px; height: 30px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--cyan);
  background: rgba(54,212,249,.08); border: 1px solid rgba(54,212,249,.25);
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
}
.mover-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mover-info strong { color: var(--text); font-size: 15px; }
.mover-info span {
  font-size: 12.5px; color: var(--dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mover-price { text-align: right; display: flex; flex-direction: column; }
.mover-price strong { font-family: var(--font-mark); font-size: 16px; font-variant-numeric: tabular-nums; }
.chg { font-size: 12.5px; font-weight: 600; }

@media (max-width: 900px) {
  .pf-summary { grid-template-columns: 1fr; }
  .pf-chart-wrap { height: 280px; }
}
@media (max-width: 640px) {
  .pf-main { padding: 116px 0 60px; }
  .pf-panel { padding: 20px 16px; }
  .pf-tiles { gap: 12px; }
  .pf-chart-wrap { height: 240px; }
  .pf-panel-head { align-items: flex-start; }
  .mover-info span { max-width: 170px; }
}

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .orb, .ticker-track, .card-sparkles, .pulse-dot, .scroll-cue-wheel,
  .tap-rings span { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
}