/* ───────────────────────────────────────────────────────────────────
   EduMS landing page — same palette as the in-app NeuColors / Brand.
   Source of truth:   lib/theme/neu.dart  +  lib/theme/app_theme.dart
   ─────────────────────────────────────────────────────────────────── */

:root {
  /* ── Surfaces — direct mapping of NeuColors (lib/theme/neu.dart) ──
     Neumorphism rule: every "card" uses the SAME --bg as its parent.
     The shape is suggested by paired soft shadows, not by a tonal
     surface change. So --card / --card-hi all equal --bg. */
  --bg:           #1C2230;   /* NeuColors.bgDark / surfaceDark */
  --neu-shadow-d: #0E121B;   /* NeuColors.darkShadowDark — bottom-right */
  --neu-shadow-l: #2A3347;   /* NeuColors.lightShadowDark — top-left  */
  --card:         var(--bg); /* alias kept for legacy selectors        */
  --card-hi:      var(--bg);
  --brand-dark:   #1E1A18;   /* Brand.brandDark — splash/icon backdrop */

  /* Ink (NeuColors.text* / muted*) */
  --ink:       #E6EEF8;   /* NeuColors.textDark */
  --ink-dim:   #9FB0CC;   /* NeuColors.mutedDark */
  --ink-faint: #6B7A94;   /* NeuColors.mutedLight (still readable on dark) */

  /* Brand accents (Brand.*) */
  --accent:    #FF7A3D;   /* Brand.seed — saffron */
  --accent-2:  #F59E0B;   /* Brand.amber — gradient pair */
  --accent-dn: #E85A1F;   /* Brand.seedDark — pressed */
  --success:   #10B981;   /* Brand.success */
  --danger:    #EF4444;   /* Brand.danger */
  /* Tab-icon-color hints (used on feature cards only) */
  --purple:    #8B7ADC;
  --teal:      #5EC3C8;

  /* Borders only used on rims of inset/concave fields, not on convex
     extrusions (those rely purely on paired shadows for shape). */
  --border:    rgba(230, 238, 248, 0.06);
  --border-hi: rgba(230, 238, 248, 0.12);

  /* ── Neu shadow tokens (translation of Neu.convex / Neu.inset) ──
     Convex / raised: dark-shadow bottom-right + light-shadow top-left.
     Inset  / pressed: same two shadows but inverted into the surface. */
  --neu-out:
     8px  8px 18px var(--neu-shadow-d),
    -8px -8px 18px var(--neu-shadow-l);
  --neu-out-sm:
     5px  5px 12px var(--neu-shadow-d),
    -5px -5px 12px var(--neu-shadow-l);
  --neu-out-lg:
     12px 12px 26px var(--neu-shadow-d),
    -12px -12px 26px var(--neu-shadow-l);
  --neu-in:
     inset 5px  5px 10px var(--neu-shadow-d),
     inset -5px -5px 10px var(--neu-shadow-l);
  --neu-in-sm:
     inset 3px  3px  6px var(--neu-shadow-d),
     inset -3px -3px  6px var(--neu-shadow-l);

  /* Legacy aliases — kept so older selectors don't break while we
     transition them to the neu tokens above. */
  --shadow-up:  var(--neu-in-sm);
  --shadow-out: var(--neu-out);

  --max:       1200px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
  font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  /* Neumorphism wants a perfectly uniform surface so the paired shadows
     read as "this card extrudes from the same material as the page." A
     single solid bg colour is the right answer; we keep the brand glow
     as a separate, pointer-events-none decoration confined to the hero. */
  background: var(--bg);
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 12px;
}

h1 { font-size: clamp(2.2rem, 5vw, 4rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.15rem; }
h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-faint); margin-bottom: 14px; }

p  { margin: 0 0 14px; color: var(--ink-dim); }
.section-sub { color: var(--ink-dim); max-width: 640px; margin-bottom: 36px; font-size: 0.98rem; }

.accent { color: var(--accent); }

/* ── Nav ──────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px max(20px, calc(50% - var(--max) / 2)) 14px max(20px, calc(50% - var(--max) / 2));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  /* A faint soft-shadow rim under the bar, mirroring how a neu
     'top sheet' would catch light. No hard border. */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em;
}
.brand img {
  border-radius: 10px;
  /* Tiny convex bump so the icon looks moulded into the bar */
  box-shadow:
     3px  3px  6px var(--neu-shadow-d),
    -3px -3px  6px var(--neu-shadow-l);
}
.brand strong { color: var(--accent); font-weight: 900; }
.nav-links { display: flex; align-items: center; gap: 28px; font-size: 0.92rem; color: var(--ink-dim); }
.nav-links a:hover { color: var(--ink); }
.nav-links .cta-link {
  color: var(--bg);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  padding: 8px 16px; border-radius: 999px; font-weight: 800;
  /* Convex pill for the CTA — keeps the saffron gradient but adds
     the paired neu shadows so it sits in the same physical world
     as everything else on the page. */
  box-shadow:
     4px  4px 10px var(--neu-shadow-d),
    -4px -4px 10px var(--neu-shadow-l),
     0 6px 18px rgba(255, 122, 61, 0.30);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.nav-links .cta-link:hover {
  /* Slight press */
  box-shadow:
     2px  2px  6px var(--neu-shadow-d),
    -2px -2px  6px var(--neu-shadow-l),
     0 3px 10px rgba(255, 122, 61, 0.30);
  transform: translateY(1px);
}
@media (max-width: 720px) {
  .nav-links a:not(.cta-link) { display: none; }
}

/* ── Sections ─────────────────────────────────────────────────────── */
section {
  max-width: var(--max);
  margin: 0 auto;
  padding: 80px 24px;
  position: relative;
}
@media (max-width: 720px) { section { padding: 56px 20px; } }

/* ── Hero ─────────────────────────────────────────────────────────── */
.hero { padding-top: 56px; padding-bottom: 56px; }
.hero-glow {
  position: absolute; pointer-events: none; border-radius: 50%; filter: blur(80px);
}
/* Soft saffron + amber accent washes — kept very low-opacity so they
   don't fight the neumorphic uniform-surface read. */
.glow-1 { width: 540px; height: 540px; background: rgba(255, 122, 61, 0.10); top: -140px; right: -120px; }
.glow-2 { width: 420px; height: 420px; background: rgba(245, 158, 11, 0.08); bottom: -160px; left: -80px; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
}

.eyebrow {
  /* Neumorphic inset pill — looks like a pressed-in label rim cut into
     the page surface. The accent colour comes through the text only. */
  display: inline-block;
  font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase;
  font-weight: 800; color: var(--accent);
  background: var(--bg);
  padding: 8px 16px; border-radius: 999px; margin-bottom: 20px;
  box-shadow: var(--neu-in-sm);
}
.lede { font-size: 1.1rem; color: var(--ink-dim); margin-bottom: 28px; max-width: 540px; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.store-badge {
  /* Convex (Neu.convex) — extruded button. No border; shape is given by
     the dual shadow. Hover presses it in slightly. */
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 22px; border-radius: 16px;
  background: var(--bg);
  color: var(--ink);
  box-shadow: var(--neu-out-sm);
  transition: box-shadow 0.18s ease, transform 0.18s ease, color 0.18s ease;
}
.store-badge:hover {
  color: var(--accent);
  box-shadow: var(--neu-in-sm);
  transform: translateY(1px);
}
.store-badge:active {
  box-shadow: var(--neu-in);
}
.store-badge svg { flex-shrink: 0; }
.store-badge span { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.store-badge small { font-size: 0.65rem; color: var(--ink-dim); letter-spacing: 0.05em; text-transform: uppercase; }
.store-badge strong { font-size: 1.05rem; font-weight: 800; }

.footnote { font-size: 0.82rem; color: var(--ink-faint); margin-top: 18px; }

.hero-phone {
  display: flex; justify-content: center; align-items: center;
}
.phone-wrap {
  /* Hero illustration plinth — square-ish neu card holding an SVG.
     Same dual-shadow extrusion as everything else on the page. */
  width: min(440px, 90%); aspect-ratio: 1 / 1;
  border-radius: 32px;
  background: color-mix(in srgb, var(--accent) 4%, var(--bg));
  padding: 28px;
  box-shadow: var(--neu-out-lg);
  transform: perspective(1400px) rotateY(-3deg) rotateX(1deg);
  transition: transform 0.4s ease, box-shadow 0.3s ease;
  display: flex; align-items: center; justify-content: center;
}
.phone-wrap:hover {
  transform: perspective(1400px) rotateY(-1deg) rotateX(0);
}
.phone-wrap svg {
  width: 100%; height: 100%; display: block;
}

/* ── Trust strip ──────────────────────────────────────────────────── */
.trust {
  padding: 28px 24px;
  margin: 0 auto 0;
}
.trust-row {
  /* Convex slab — paired neu shadows, surface = page bg */
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  background: var(--bg);
  border-radius: 22px;
  padding: 24px;
  box-shadow: var(--neu-out);
}
.trust-row > div {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center;
}
.trust-row strong { font-size: 1.4rem; color: var(--accent); font-weight: 900; }
.trust-row span { font-size: 0.8rem; color: var(--ink-dim); }
@media (max-width: 720px) {
  .trust-row { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}

/* ── Features ─────────────────────────────────────────────────────── */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 880px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .features-grid { grid-template-columns: 1fr; } }

.feature {
  /* Convex card. Surface == page bg; shape comes from neu shadow pair. */
  background: var(--bg);
  border-radius: 20px;
  padding: 24px;
  box-shadow: var(--neu-out-sm);
  transition: box-shadow 0.22s ease, transform 0.22s ease;
}
.feature:hover {
  /* Press in slightly so the card feels physically responsive */
  box-shadow: var(--neu-in-sm);
  transform: translateY(1px);
}
.feature h3 { margin-bottom: 8px; }
.feature p  { font-size: 0.92rem; color: var(--ink-dim); margin-bottom: 0; }
.feature-icon {
  /* Tinted concave (Neu.tinted): a soft accent-coloured cup with a
     gentle inward shadow, like a dyed indent in the surface. */
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--c) 18%, var(--bg));
  font-size: 22px; margin-bottom: 16px;
  box-shadow:
    inset 2px 2px 4px var(--neu-shadow-d),
    inset -2px -2px 4px var(--neu-shadow-l),
    0 0 18px color-mix(in srgb, var(--c) 25%, transparent);
}

/* ── Personas (replaces the old screenshots row) ────────────────────
   Three character cards (Student / Owner / Tutor) sitting on convex
   neu plinths. Each contains an inline SVG illustration. */
.personas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 880px) { .personas-grid { grid-template-columns: 1fr; } }

.persona {
  background: var(--bg);
  border-radius: 24px;
  padding: 24px;
  box-shadow: var(--neu-out-sm);
  display: flex; flex-direction: column;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.persona:hover {
  box-shadow: var(--neu-out);
  transform: translateY(-2px);
}
.persona-art {
  /* Inset "screen" inside the card containing the SVG illustration. */
  background: color-mix(in srgb, var(--c, var(--accent)) 8%, var(--bg));
  border-radius: 18px;
  padding: 18px;
  margin-bottom: 18px;
  box-shadow: var(--neu-in-sm);
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3;
}
.persona-art svg { width: 100%; height: 100%; display: block; }
.persona h3 { margin: 0 0 6px; }
.persona p  { font-size: 0.92rem; color: var(--ink-dim); margin-bottom: 0; }
.persona-tag {
  display: inline-block;
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 800;
  color: var(--c, var(--accent));
  margin-bottom: 10px;
}

/* ── Hero illustration ────────────────────────────────────────────
   The phone-wrap is now an SVG canvas, not a phone. The neu shape
   styling is already on .phone-wrap above; we just give the SVG a
   sensible aspect inside it. */
.hero-art-svg {
  width: 100%;
  display: block;
}

/* ── Pricing ──────────────────────────────────────────────────────── */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 720px) { .pricing-grid { grid-template-columns: 1fr; } }

.plan {
  /* Convex pricing card — same neu vocabulary as features but bigger */
  background: var(--bg);
  border-radius: 24px;
  padding: 30px;
  display: flex; flex-direction: column;
  box-shadow: var(--neu-out);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.plan.plan-online {
  /* Tinted convex (Neu.tinted) — saffron blend behind the surface +
     extra accent glow. Reads as "the same material, but warmer". */
  background: color-mix(in srgb, var(--accent) 6%, var(--bg));
  box-shadow:
     8px  8px 18px var(--neu-shadow-d),
    -8px -8px 18px var(--neu-shadow-l),
     0 0 32px rgba(255, 122, 61, 0.18);
}
.plan header { margin-bottom: 18px; }
.plan h3 { font-size: 1.4rem; margin: 8px 0 6px; }
.plan p { font-size: 0.92rem; }

.badge {
  /* Inset chip — looks etched into the card */
  display: inline-block;
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 900;
  padding: 6px 12px; border-radius: 999px;
  background: var(--bg);
  box-shadow: var(--neu-in-sm);
}
.badge-success { color: var(--success); }
.badge-muted   { color: var(--ink-dim); }

.price {
  display: flex; align-items: baseline; gap: 10px;
  padding: 18px;
  border-radius: 18px;
  background: var(--bg);
  box-shadow: var(--neu-in);     /* pressed-in well — like a screen field */
  margin: 14px 0 20px;
}
.price .big { font-size: 2.6rem; font-weight: 900; letter-spacing: -0.02em; color: var(--accent); }
.plan-cash .price .big { color: var(--ink); }
.price .sub { font-size: 0.85rem; color: var(--ink-dim); }

/* Dual-price block — shows ₹0 prepaid AND 20% commission as equal-weight
   facts so users can't read "₹0" as "completely free." */
.price.price-dual {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 18px 0;
}
.price-dual .price-row {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; text-align: center;
}
.price-dual .price-row .big { font-size: 2.2rem; line-height: 1; }
.price-dual .price-row .sub {
  font-size: 0.78rem; color: var(--ink-dim);
  line-height: 1.35;
}
.price-dual .price-row-secondary .big-secondary {
  color: var(--accent-2);            /* amber — distinct from prepaid color */
  font-size: 2.2rem; font-weight: 900; letter-spacing: -0.02em;
}
.price-dual .price-plus {
  font-size: 1.6rem; font-weight: 900;
  color: var(--ink-faint);
  line-height: 1;
  user-select: none;
}

.plan ul { list-style: none; padding: 0; margin: 0 0 24px; }
.plan li {
  position: relative; padding-left: 28px; padding-block: 7px;
  font-size: 0.92rem; color: var(--ink-dim);
}
.plan li::before {
  /* Tiny inset bullet well */
  content: ""; position: absolute; left: 0; top: 11px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--bg);
  box-shadow: var(--neu-in-sm);
}
.plan li::after {
  content: ""; position: absolute; left: 6px; top: 15px;
  width: 5px; height: 9px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
}
.plan-cash li::after  { border-color: var(--ink-dim); }

.plan-cta {
  /* Convex saffron pill that presses on hover */
  margin-top: auto;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 20px; border-radius: 14px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #1a0e07;
  box-shadow:
     5px  5px 12px var(--neu-shadow-d),
    -5px -5px 12px var(--neu-shadow-l),
     0 10px 24px rgba(255, 122, 61, 0.30);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.plan-cta:hover {
  box-shadow:
     2px  2px  8px var(--neu-shadow-d),
    -2px -2px  8px var(--neu-shadow-l),
     0 4px 14px rgba(255, 122, 61, 0.30);
  transform: translateY(1px);
}
.plan-cta-muted {
  background: var(--bg);
  color: var(--ink);
  box-shadow: var(--neu-out-sm);
}
.plan-cta-muted:hover {
  box-shadow: var(--neu-in-sm);
}

.plan-tag {
  display: inline-block;
  font-size: 0.7rem; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}
.plan-cash .plan-tag { color: var(--ink-dim); }

.plan-example {
  /* Inset note — like a small recessed strip inside the card */
  font-size: 0.82rem; color: var(--ink-dim);
  background: var(--bg);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 0 0 20px;
  line-height: 1.5;
  box-shadow: var(--neu-in-sm);
}

.regulatory {
  text-align: center; font-size: 0.85rem; color: var(--ink-dim);
  margin-top: 28px;
}
.regulatory code {
  font-family: 'SF Mono', ui-monospace, 'JetBrains Mono', Menlo, monospace;
  font-size: 0.78rem;
  background: var(--bg);
  border-radius: 6px;
  padding: 2px 8px;
  color: var(--accent);
  box-shadow: var(--neu-in-sm);
}

/* ── Final CTA ───────────────────────────────────────────────────── */
.final-cta { padding: 80px 24px 60px; }
.final-cta-inner {
  /* Tinted convex slab — saffron-warmed surface, paired neu shadows */
  max-width: 760px; margin: 0 auto;
  text-align: center;
  background: color-mix(in srgb, var(--accent) 6%, var(--bg));
  border-radius: 28px;
  padding: 48px 30px;
  box-shadow:
     12px 12px 26px var(--neu-shadow-d),
    -12px -12px 26px var(--neu-shadow-l),
     0 0 60px rgba(255, 122, 61, 0.16);
}
.final-cta-inner h2 { margin-bottom: 10px; }
.final-cta-inner p { margin: 0 auto 24px; max-width: 480px; }
.final-cta-inner .cta-row { justify-content: center; }

/* ── Footer ──────────────────────────────────────────────────────── */
.footer {
  /* No hard border or tonal block. The footer just continues the page
     surface; spacing alone separates it from the content above. */
  background: var(--bg);
  padding: 64px max(20px, calc(50% - var(--max) / 2)) 28px;
  margin-top: 60px;
}
.footer-grid {
  display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px;
  margin-bottom: 36px;
}
@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
.footer .brand { margin-bottom: 12px; }
.footer h4 { color: var(--ink-dim); }
.footer a:not(.brand) {
  display: block; font-size: 0.92rem; color: var(--ink-dim);
  padding: 6px 0;
  transition: color 0.15s ease;
}
.footer a:not(.brand):hover { color: var(--accent); }
.footer .muted { color: var(--ink-faint); font-size: 0.85rem; }

.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px;
  margin-top: 16px;
  font-size: 0.82rem; color: var(--ink-faint);
  /* Soft "rim" via a very subtle inset-top shadow rather than a hard line */
  box-shadow: inset 0 1px 0 var(--neu-shadow-d), inset 0 2px 0 var(--neu-shadow-l);
}
@media (max-width: 560px) {
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
}

/* ───────────────────────────────────────────────────────────────────
   FAQ
   ─────────────────────────────────────────────────────────────────── */
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 1000px;
}
@media (max-width: 720px) { .faq-grid { grid-template-columns: 1fr; } }

.faq-item {
  /* Convex pill — collapses to inset "pressed" when opened */
  background: var(--bg);
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
  box-shadow: var(--neu-out-sm);
  transition: box-shadow 0.25s ease;
}
.faq-item[open] {
  box-shadow: var(--neu-in-sm);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  font-weight: 700;
  color: var(--ink);
  user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary > span:first-child { flex: 1; line-height: 1.4; }
.faq-chev {
  /* Round neu chev that flips when the item opens */
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg);
  color: var(--accent);
  font-weight: 900; font-size: 1.1rem;
  flex-shrink: 0;
  box-shadow: var(--neu-out-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.faq-item[open] .faq-chev {
  transform: rotate(45deg);
  box-shadow: var(--neu-in-sm);
}
.faq-item p {
  padding: 0 22px 20px;
  margin: 0;
  font-size: 0.94rem;
  color: var(--ink-dim);
  line-height: 1.6;
}
.faq-item p a { color: var(--accent); border-bottom: 1px dashed rgba(255, 122, 61, 0.4); }

/* ───────────────────────────────────────────────────────────────────
   About / Maker
   ─────────────────────────────────────────────────────────────────── */
.about-card {
  /* Tinted convex slab */
  background: color-mix(in srgb, var(--accent) 5%, var(--bg));
  border-radius: 28px;
  padding: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  box-shadow:
     12px 12px 26px var(--neu-shadow-d),
    -12px -12px 26px var(--neu-shadow-l),
     0 0 60px rgba(255, 122, 61, 0.10);
}
@media (max-width: 880px) { .about-card { grid-template-columns: 1fr; padding: 28px; gap: 28px; } }

.eyebrow-amber {
  color: var(--accent-2);
}
.about-copy h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.about-lede {
  font-size: 1rem;
  color: var(--ink-dim);
  margin: 0 0 22px;
  max-width: 460px;
}

.about-stats {
  list-style: none; padding: 0; margin: 0 0 22px;
  display: grid; grid-template-columns: repeat(3, auto);
  gap: 22px;
}
.about-stats li {
  display: flex; flex-direction: column; gap: 2px;
}
.about-stats strong {
  font-size: 1.5rem; font-weight: 900;
  color: var(--accent); letter-spacing: -0.02em;
}
.about-stats span {
  font-size: 0.78rem; color: var(--ink-dim);
  text-transform: uppercase; letter-spacing: 0.08em;
}

.about-ids {
  display: flex; flex-wrap: wrap; gap: 10px 18px;
  margin: 0 0 22px;
  font-size: 0.85rem;
}
.about-ids > div { display: flex; align-items: center; gap: 8px; }
.about-ids-key {
  font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint);
}
.about-ids code {
  font-family: 'SF Mono', ui-monospace, 'JetBrains Mono', Menlo, monospace;
  font-size: 0.78rem;
  background: var(--bg);
  border-radius: 8px;
  padding: 4px 10px;
  color: var(--ink);
  box-shadow: var(--neu-in-sm);
}

.about-cta {
  display: inline-flex; align-items: center;
  padding: 14px 20px; border-radius: 14px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #1a0e07;
  box-shadow:
     5px  5px 12px var(--neu-shadow-d),
    -5px -5px 12px var(--neu-shadow-l),
     0 8px 22px rgba(255, 122, 61, 0.30);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.about-cta:hover {
  box-shadow:
     2px  2px  6px var(--neu-shadow-d),
    -2px -2px  6px var(--neu-shadow-l),
     0 4px 12px rgba(255, 122, 61, 0.30);
  transform: translateY(1px);
}

.about-portfolio-title {
  font-size: 0.78rem; font-weight: 900;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 14px;
}
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.portfolio-tile {
  /* Tiny convex chip */
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  align-items: center;
  padding: 14px 16px;
  background: var(--bg);
  border-radius: 14px;
  box-shadow: var(--neu-out-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.portfolio-tile:hover {
  box-shadow: var(--neu-in-sm);
  transform: translateY(1px);
}
.portfolio-mark {
  grid-row: 1 / 3;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--c) 18%, var(--bg));
  color: var(--c);
  font-weight: 900; font-size: 1.05rem;
  box-shadow:
    inset 2px 2px 4px var(--neu-shadow-d),
    inset -2px -2px 4px var(--neu-shadow-l);
}
.portfolio-name { font-weight: 800; font-size: 0.92rem; color: var(--ink); }
.portfolio-tag  { font-size: 0.74rem; color: var(--ink-dim); }
.portfolio-tile-current {
  background: color-mix(in srgb, var(--accent) 8%, var(--bg));
  box-shadow:
     5px  5px 12px var(--neu-shadow-d),
    -5px -5px 12px var(--neu-shadow-l),
     0 0 20px rgba(255, 122, 61, 0.18);
}
.portfolio-tile-current .portfolio-tag { color: var(--accent); font-weight: 700; }

/* Eyebrow as a clickable link variant — a pressable inset pill */
.eyebrow-link {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.eyebrow-link:hover {
  box-shadow: var(--neu-out-sm);
  transform: translateY(-1px);
}
.eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 122, 61, 0.20);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255, 122, 61, 0.20); }
  50%      { box-shadow: 0 0 0 6px rgba(255, 122, 61, 0.05); }
}

/* ───────────────────────────────────────────────────────────────────
   Footer enhancements (social, brand block, legal IDs)
   ─────────────────────────────────────────────────────────────────── */
.footer-by {
  font-size: 0.85rem;
  color: var(--ink-dim);
  margin: 14px 0 16px;
  line-height: 1.55;
}
.footer-by a strong { color: var(--ink); }
.footer-by a:hover strong { color: var(--accent); }

.footer-social {
  display: flex; gap: 8px;
  margin-bottom: 8px;
}
.footer-social a {
  /* Small neu pill — circular convex button */
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--bg);
  color: var(--ink-dim);
  box-shadow: var(--neu-out-sm);
  transition: box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease;
  padding: 0; /* override .footer a */
}
.footer-social a:hover {
  color: var(--accent);
  box-shadow: var(--neu-in-sm);
  transform: translateY(1px);
}

.footer-legal {
  font-size: 0.78rem;
  color: var(--ink-dim);
  margin: 12px 0 0;
  line-height: 1.7;
}
.footer-legal code {
  font-family: 'SF Mono', ui-monospace, 'JetBrains Mono', Menlo, monospace;
  font-size: 0.74rem;
  background: var(--bg);
  border-radius: 6px;
  padding: 2px 8px;
  color: var(--ink);
  box-shadow: var(--neu-in-sm);
}

/* ───────────────────────────────────────────────────────────────────
   Parallax + 3D scroll-reveal animations
   ─────────────────────────────────────────────────────────────────── */

/* Establish a 3D viewport so child rotateX/rotateY actually has depth */
html { perspective: 1500px; }
body { transform-style: preserve-3d; }

/* Reveal pattern — softer than before so it co-operates with the neu
   "everything is the same surface" feel. Cards rise slightly with a
   gentle scale-up, no aggressive tilt. */
.reveal {
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  transition:
    opacity   0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.is-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Stagger children in a grid — set --i: <n> on each so they cascade in.
   Caps at 8 so we don't accumulate huge delays on long lists. */
.reveal { transition-delay: calc(min(var(--i, 0), 8) * 60ms); }

/* Hero illustration — controlled by JS via CSS custom properties.
   Subtle scroll-driven tilt only (less than the old phone version). */
.phone-wrap {
  transform: perspective(1400px)
             rotateY(calc(-3deg + var(--ry, 0deg)))
             rotateX(calc(1deg + var(--rx, 0deg)))
             translateY(var(--ty, 0px));
  transition: transform 0.15s linear;
}
.phone-wrap:hover {
  transform: perspective(1400px)
             rotateY(calc(-1deg + var(--ry, 0deg)))
             rotateX(calc(0deg + var(--rx, 0deg)))
             translateY(var(--ty, 0px));
}

/* Hero glow parallax — JS sets --gy. The glows drift slower than scroll,
   creating depth. */
.hero-glow {
  transform: translate3d(0, var(--gy, 0px), 0);
  will-change: transform;
}

/* Feature cards lift on scroll-into-view + on hover with a 3D tilt */
.feature {
  transform-style: preserve-3d;
}
.feature:hover {
  transform: translateY(-4px) rotateX(2deg) rotateY(-2deg);
}

/* Plan cards — featured (Online) sits forward in 3D space */
.plan-online {
  transform: translateZ(0);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.18s ease;
}
.plan-online:hover {
  transform: translateZ(20px) translateY(-4px);
}
.plan-cash {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.18s ease;
}
.plan-cash:hover {
  transform: translateY(-3px);
}

/* Sticky-ish floating motion on the hero glows on idle (subtle) */
@keyframes glow-drift-1 {
  0%, 100% { translate: 0 0; }
  50%      { translate: 18px -12px; }
}
@keyframes glow-drift-2 {
  0%, 100% { translate: 0 0; }
  50%      { translate: -14px 16px; }
}
.glow-1 { animation: glow-drift-1 14s ease-in-out infinite; }
.glow-2 { animation: glow-drift-2 18s ease-in-out infinite; }

/* Respect users who don't want motion */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .phone-wrap { transform: perspective(1400px) rotateY(-6deg) rotateX(2deg); transition: none; }
  .hero-glow { transform: none; animation: none; }
  .plan-online:hover, .plan-cash:hover, .feature:hover { transform: none; }
  html { perspective: none; }
}