/* ============================================================
   Visalto Media — Design Tokens

   Palette per brief: primary #738e38, secondary #ede8d0,
   accent #cbcbcb. The raw primary hex only clears ~3:1 against
   both white and the secondary cream (large-text/UI-only per
   WCAG), so two derived dark variants are added — primary-deep
   and primary-mid — computed to guarantee 4.5:1+ with white and
   with the muted light-text color used throughout. These are
   refinements of the same brand green for AA compliance, not a
   different color. See body-text/background pairings below for
   the verified ratios.

   Headline font: brief specified "HARMONY" (Behance/Artem
   Nevsky) — that typeface is a paid commercial license via a
   third-party marketplace (Pixel Surplus), free for personal
   use only. Visalto Media is a commercial use case, and I can't
   purchase or download a licensed font on your behalf, so
   Playfair Display substitutes here (same elegant-serif
   register, and it's what the actual Visalto logo wordmark
   already uses). Swap in HARMONY's files later if you buy a
   license — the --font-display variable is the only thing that
   needs to change.

   Body font: Geist (Vercel), confirmed live on Google Fonts.
   ============================================================ */

:root {
  /* Primary green family (derived for AA — see header note) */
  --primary: #738e38;         /* brief's raw hex — large surfaces, big headings, icons/UI on light bg only (3:1) */
  --primary-deep: #4e6126;    /* dark section bg + button bg — 6.9:1 with white */
  --primary-mid: #43531f;     /* card-within-dark-section bg — 5.6:1 with muted light text */
  --primary-deepest: #2e3a16; /* deepest section bg (footer/audit) */
  --primary-hover: #5c7530;   /* button hover — 5.2:1 with white */
  --primary-line: rgba(255, 255, 255, 0.14);

  /* Secondary (cream) */
  --secondary: #ede8d0;
  --secondary-deep: #e3dec4;
  --secondary-line: rgba(35, 40, 27, 0.13);

  /* Accent (neutral gray) — borders/dividers; safe as an icon/text
     color only on dark bg (8.9:1 there), not on light bg (1.6:1) */
  --accent: #cbcbcb;
  --accent-deep: #9a9a9a;

  /* Text */
  --ink: #23281b;              /* on secondary: 11.8:1 */
  --ink-muted: #5b6152;        /* on secondary: 5.2:1 */
  --text-light: #ede8d0;       /* beige/cream, same tone as --secondary — on primary-deep: 5.6:1, primary-mid: 6.8:1 */
  --text-light-muted: #d2d5c4; /* on primary-deep: 4.6:1, on primary-mid: 5.6:1 */

  /* Type */
  --font-display: "Playfair Display", "Georgia", serif;
  --font-body: "Geist", "Segoe UI", Arial, sans-serif;

  /* Layout */
  --max-width: 1160px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--secondary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0;
  font-weight: 600;
}

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

img,
svg {
  max-width: 100%;
  display: block;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.skip-link {
  position: absolute;
  top: -48px;
  left: 16px;
  background: var(--primary-deep);
  color: var(--text-light);
  padding: 12px 18px;
  border-radius: 6px;
  z-index: 100;
  transition: top 0.2s var(--ease);
  font-weight: 600;
}

.skip-link:focus {
  top: 16px;
}

/* Consistent on-brand keyboard focus ring, replacing the default
   blue outline everywhere it would otherwise clash with the palette */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--primary-deep);
  outline-offset: 2px;
  border-radius: 4px;
}

.section-dark a:focus-visible,
.section-dark button:focus-visible,
.section-deep a:focus-visible,
.section-deep button:focus-visible,
.section-deep input:focus-visible,
.section-deep select:focus-visible,
.section-deep textarea:focus-visible {
  outline-color: #fff;
}

/* ============================================================
   Signature flanking-line eyebrow (from the "— MEDIA —" mark
   on the Visalto logo)
   ============================================================ */

.eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ink-muted);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.eyebrow::before,
.eyebrow::after {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--primary);
  display: inline-block;
  transform-origin: center;
}

.reveal .eyebrow::before,
.reveal .eyebrow::after,
.reveal-stagger .eyebrow::before,
.reveal-stagger .eyebrow::after {
  transform: scaleX(0);
  transition: transform 0.5s var(--ease) 0.15s;
}

.reveal.is-visible .eyebrow::before,
.reveal.is-visible .eyebrow::after,
.reveal-stagger.is-visible .eyebrow::before,
.reveal-stagger.is-visible .eyebrow::after {
  transform: scaleX(1);
}

.eyebrow.on-dark {
  color: var(--text-light);
}

.eyebrow.on-dark::before,
.eyebrow.on-dark::after {
  background: var(--text-light);
}

.eyebrow.center {
  justify-content: center;
}

/* ============================================================
   Buttons
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 32px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--font-body);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn-primary {
  background: var(--primary-deep);
  color: var(--text-light);
  box-shadow: 0 10px 26px rgba(78, 97, 38, 0.32);
}

.btn-primary:hover {
  background: var(--primary-hover);
  box-shadow: 0 14px 30px rgba(92, 117, 48, 0.38);
}

.btn-secondary {
  background: transparent;
  color: var(--text-light);
  border-color: var(--primary-line);
}

.btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn-block {
  width: 100%;
}

/* ============================================================
   Header
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(46, 58, 22, 0.94);
  backdrop-filter: blur(10px);
  border-top: 4px solid var(--secondary);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.site-header.is-scrolled {
  border-bottom-color: var(--primary-line);
  box-shadow: 0 10px 30px rgba(15, 20, 8, 0.22);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
}

.logo-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-lockup img,
.logo-lockup .vm-mark {
  height: 34px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3));
}

.logo-lockup .word {
  font-family: "Rajdhani", "Segoe UI", Arial, sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-light);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1;
}

.logo-lockup .word span {
  display: block;
  font-family: var(--font-body);
  font-size: 0.56rem;
  letter-spacing: 0.32em;
  color: var(--text-light-muted);
  font-weight: 600;
  margin-top: 3px;
}

.nav-links {
  display: flex;
  gap: 40px;
  align-items: center;
}

.nav-links a:not(.btn) {
  color: var(--text-light-muted);
  font-weight: 500;
  font-size: 0.9rem;
  position: relative;
  padding: 4px 0;
  transition: color 0.2s ease;
}

.nav-links a:not(.btn):hover {
  color: var(--text-light);
}

.nav-links .btn {
  padding: 11px 26px;
  font-size: 0.86rem;
}

/* ============================================================
   Section scaffolding
   ============================================================ */

section {
  padding: 120px 0;
  position: relative;
}

.section-dark {
  background: var(--primary-deep);
  color: var(--text-light);
}

.section-deep {
  background: var(--primary-deepest);
  color: var(--text-light);
}

.section-alt {
  background: var(--secondary-deep);
}

.section-header {
  max-width: 640px;
  margin: 0 auto 60px;
  text-align: center;
}

.section-header h2 {
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  margin: 16px 0 18px;
}

.section-header p {
  color: var(--ink-muted);
  font-size: 1.08rem;
  margin: 0;
}

.section-dark .section-header p,
.section-deep .section-header p {
  color: var(--text-light-muted);
}

.section-dark .section-header h2,
.section-deep .section-header h2 {
  color: var(--text-light);
}

/* ============================================================
   Hero
   ============================================================ */

.hero {
  background: var(--primary-deep);
  color: var(--text-light);
  padding: 100px 0 84px;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 48% at 50% 20%, rgba(237, 232, 208, 0.22), transparent 72%);
  pointer-events: none;
  z-index: 0;
}

.hero .container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-logo {
  width: min(132px, 28vw);
  height: auto;
  margin: 0 auto 16px;
  display: block;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.4));
}

/* Constellation of the industries we serve, orbiting the hero.
   Own content (our real icon set), own palette — not a copy of
   any reference image, just the same "network around a hub"
   idea reimplemented with Visalto's own data.

   Height is capped (not inset:0) and pinned to the top — the
   hero grew tall once the tilt card was folded into it, and an
   SVG spanning the full height would center its viewBox in that
   extra space, pushing every node down past the headline. */
.hero-network {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 800px;
  max-height: 100%;
  z-index: 0;
  pointer-events: none;
}

.hero-network svg {
  width: 100%;
  height: 100%;
}

.hero-network .link {
  fill: none;
  stroke: rgba(237, 232, 208, 0.28);
  stroke-width: 1.2;
  stroke-dasharray: 5 7;
  animation: link-flow 3.5s linear infinite;
}

@keyframes link-flow {
  to {
    stroke-dashoffset: -24;
  }
}

.hero-network .node-ring {
  fill: var(--primary-deepest);
  stroke: rgba(237, 232, 208, 0.55);
  stroke-width: 1.2;
}

.hero-network .node-pulse {
  fill: none;
  stroke: var(--text-light);
  stroke-width: 1.4;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: node-ping 3.2s ease-out infinite;
  animation-delay: var(--float-delay, 0s);
}

@keyframes node-ping {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }
  75%, 100% {
    transform: scale(1.55);
    opacity: 0;
  }
}

.hero-network .node-icon {
  fill: none;
  stroke: var(--text-light);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-network .node {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: node-enter 0.7s var(--ease) forwards, node-float 5s ease-in-out infinite;
  animation-delay: var(--float-delay, 0s), var(--float-delay, 0s);
}

@keyframes node-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes node-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

@media (max-width: 900px) {
  .hero-network {
    display: none;
  }
}

/* Scroll cue, pointing at the tilt showcase directly below */
.hero-scroll-cue {
  position: relative;
  z-index: 1;
  margin-top: 52px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--text-light-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.hero-scroll-cue .cue-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--primary-line);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: cue-bounce 2.2s ease-in-out infinite;
}

.hero-scroll-cue svg {
  width: 16px;
  height: 16px;
}

.hero-scroll-cue path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes cue-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* Connects the logo mark to the headline as one lockup instead of
   two stacked elements — echoes the mark's angular hexagon facets. */
.hero-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 130px;
  margin: 2px auto 20px;
}

.hero-divider::before,
.hero-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary));
}

.hero-divider::after {
  background: linear-gradient(90deg, var(--primary), transparent);
}

.hero-divider span {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  background: var(--primary);
  transform: rotate(45deg);
}

/* The active mark is a geometric hexagon crest with no wordmark of
   its own to trace a typeface from, so the headline is set in
   Rajdhani — a rigid, technical geometric sans with sharp, square
   terminals — instead of the site's usual serif, matching the
   mark's angular, engineered construction. */
.hero h1 {
  font-family: "Rajdhani", "Segoe UI", Arial, sans-serif;
  color: var(--text-light);
  font-size: clamp(2.3rem, 4.8vw, 3.8rem);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0 0 14px;
}

/* Flat gold, same hue as the mark — no gradient. Lightened from the
   mark's mid-tone gold (#b5893f, ~2.2:1) to this shade so large
   uppercase text still clears the 3:1 AA large-text minimum
   against the dark hero background (~3.7:1). */
.hero h1 .gold {
  color: #ddb876;
}

.hero .tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  color: var(--accent);
  margin: 0 0 26px;
}

.hero .lead {
  font-size: 1.15rem;
  color: var(--text-light-muted);
  max-width: 620px;
  margin: 0 auto 40px;
  line-height: 1.7;
}

.hero .lead strong {
  color: var(--text-light);
  font-weight: 600;
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ============================================================
   Scroll-tilt showcase
   (vanilla re-implementation of the requested ContainerScroll
   effect — same rotate/scale/translate behavior driven by
   scroll progress, no React/framer-motion dependency so it
   drops into this static, no-build site. See script.js)
   ============================================================ */

.scroll-tilt-viewport {
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1400px;
  margin-top: 64px;
  width: 100%;
}

.scroll-tilt-card {
  width: min(860px, 88vw);
  height: min(380px, 46vh);
  border: 3px solid rgba(255, 255, 255, 0.16);
  border-radius: 26px;
  background: var(--primary-deepest);
  box-shadow: 0 30px 70px rgba(9, 12, 4, 0.45);
  padding: 10px;
  will-change: transform, opacity;
  transform-style: preserve-3d;
  opacity: 0.4;
  transform: rotateX(42deg) translateY(70px) scale(0.78);
}

.scroll-tilt-card-inner {
  width: 100%;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(160deg, #566b2b 0%, var(--primary-deepest) 78%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scroll-tilt-visual {
  width: 100%;
  height: 100%;
  padding: 36px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
}

.scroll-tilt-visual .stat-row {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

.scroll-tilt-visual .stat .num {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  color: var(--text-light);
  line-height: 1;
}

.scroll-tilt-visual .stat .label {
  font-size: 0.78rem;
  color: var(--text-light-muted);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.scroll-tilt-visual svg {
  width: 100%;
  height: auto;
  max-height: 150px;
}

.scroll-tilt-visual .ascent-line {
  fill: none;
  stroke: var(--text-light);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.scroll-tilt-visual .ascent-fill {
  fill: url(#ascentGradient);
  opacity: 0.35;
}

/* ============================================================
   Who we help — industries
   ============================================================ */

.industry-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--secondary-line);
  border: 1px solid var(--secondary-line);
  border-radius: 14px;
  overflow: hidden;
}

.industry-item {
  background: var(--secondary);
  padding: 40px 20px;
  text-align: center;
  transition: background 0.3s ease, transform 0.3s ease;
}

.industry-item:hover {
  background: var(--primary-deep);
  transform: translateY(-2px);
}

.industry-item:hover h3,
.industry-item:hover .icon {
  color: var(--text-light);
}

.industry-item .icon {
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto 18px;
  color: var(--primary);
  transition: color 0.3s ease;
}

.industry-item:hover .icon {
  color: var(--accent);
}

.industry-item .icon svg {
  width: 100%;
  height: 100%;
}

.industry-item h3 {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  transition: color 0.3s ease;
}

/* ============================================================
   Calculator
   ============================================================ */

.calc-card {
  background: var(--primary-mid);
  border: 1px solid var(--primary-line);
  border-radius: 20px;
  padding: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

.calc-inputs .field {
  margin-bottom: 26px;
}

.calc-inputs label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-light-muted);
  margin-bottom: 10px;
}

.calc-inputs label .val {
  font-family: var(--font-display);
  color: var(--text-light);
  font-size: 1.15rem;
  font-weight: 600;
}

.calc-inputs input[type="range"] {
  width: 100%;
  accent-color: var(--primary);
  height: 4px;
  cursor: pointer;
}

.calc-inputs input[type="number"] {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--primary-line);
  background: var(--primary-deepest);
  color: var(--text-light);
  font-family: var(--font-body);
  font-size: 0.95rem;
}

.calc-inputs input[type="number"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(203, 203, 203, 0.25);
}

.calc-results {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.calc-headline {
  border-bottom: 1px solid var(--primary-line);
  padding-bottom: 26px;
}

.calc-headline .eyebrow {
  margin-bottom: 10px;
}

.calc-headline .amount {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  color: var(--text-light);
  line-height: 1;
}

.calc-headline .amount span {
  color: var(--accent);
}

.calc-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.calc-stats .stat .num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--text-light);
}

.calc-stats .stat .label {
  font-size: 0.8rem;
  color: var(--text-light-muted);
  margin-top: 4px;
}

.calc-chart {
  margin-top: 4px;
}

.calc-chart svg {
  width: 100%;
  height: 96px;
  overflow: visible;
}

.calc-chart #calc-line {
  fill: none;
  stroke: url(#calcLineGradient);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.calc-chart .area {
  opacity: 0.18;
  fill: var(--accent);
  stroke: none;
}

/* A glowing, pulsing marker on the final month — the growth curve
   naturally flattens as retention saturates, so the payoff moment
   gets a bit of visual energy instead of just trailing off flat. */
.calc-endpoint {
  fill: #ddb876;
}

.calc-endpoint-pulse {
  fill: none;
  stroke: #ddb876;
  stroke-width: 1.5;
  opacity: 0.6;
  transform-box: fill-box;
  transform-origin: center;
  animation: calc-endpoint-ping 2.2s ease-out infinite;
}

@keyframes calc-endpoint-ping {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  75%, 100% {
    transform: scale(3);
    opacity: 0;
  }
}

.calc-note {
  font-size: 0.78rem;
  color: var(--text-light-muted);
  line-height: 1.6;
}

/* ============================================================
   How we do it
   ============================================================ */

.method-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 24px;
}

.method-item {
  text-align: center;
}

.method-item .icon {
  display: block;
  width: 46px;
  height: 46px;
  margin: 0 auto 16px;
  color: var(--primary);
}

.method-item .icon svg {
  width: 100%;
  height: 100%;
}

.method-item h3 {
  font-family: var(--font-body);
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

/* ============================================================
   Features (3-column, icon + 2-sentence copy)
   ============================================================ */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.feature-card {
  background: var(--secondary);
  border: 1px solid var(--secondary-line);
  border-radius: 16px;
  padding: 40px 32px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(35, 40, 27, 0.1);
}

.feature-card .icon {
  display: block;
  width: 48px;
  height: 48px;
  color: var(--primary-deep);
  margin-bottom: 22px;
}

.feature-card .icon svg {
  width: 100%;
  height: 100%;
}

.feature-card h3 {
  font-size: 1.15rem;
  margin: 0 0 12px;
}

.feature-card p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.96rem;
  line-height: 1.65;
}

/* ============================================================
   Pricing
   ============================================================ */

.pricing-group {
  margin-bottom: 64px;
}

.pricing-group:last-child {
  margin-bottom: 0;
}

.pricing-group-title {
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  margin: 0 0 28px;
}

.pricing-grid {
  display: grid;
  gap: 28px;
}

.pricing-grid-2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 800px;
  margin: 0 auto;
}

.pricing-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.pricing-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--secondary);
  border: 1px solid var(--secondary-line);
  border-radius: 16px;
  padding: 32px 28px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(35, 40, 27, 0.1);
}

.pricing-card.is-featured {
  background: var(--primary-deep);
  border-color: var(--primary-line);
  color: var(--text-light);
}

.pricing-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary-deep);
}

.is-featured .pricing-tag {
  color: var(--accent);
}

.pricing-card h4 {
  font-size: 1.3rem;
  margin: 8px 0 12px;
}

.is-featured h4 {
  color: var(--text-light);
}

.pricing-price {
  font-family: var(--font-display);
  font-size: 1.85rem;
  color: var(--ink);
  margin-bottom: 10px;
  line-height: 1.2;
}

.pricing-price span {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink-muted);
}

.is-featured .pricing-price {
  color: var(--text-light);
}

.is-featured .pricing-price span {
  color: var(--text-light-muted);
}

.pricing-subfee {
  font-size: 0.74rem;
  color: var(--ink-muted);
  margin: -4px 0 14px;
}

.is-featured .pricing-subfee {
  color: var(--text-light-muted);
}

.pricing-desc {
  font-size: 0.88rem;
  color: var(--ink-muted);
  margin: 0 0 22px;
  line-height: 1.5;
}

.is-featured .pricing-desc {
  color: var(--text-light-muted);
}

.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;
  width: 100%;
  max-width: 240px;
  text-align: left;
}

.pricing-features li {
  position: relative;
  padding-left: 20px;
  font-size: 0.87rem;
  color: var(--ink);
  line-height: 1.4;
}

.pricing-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary-deep);
}

.is-featured .pricing-features li {
  color: var(--text-light);
}

.is-featured .pricing-features li::before {
  background: var(--accent);
}

.pricing-note {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--ink-muted);
  margin: 0 0 22px;
  line-height: 1.5;
}

.is-featured .pricing-note {
  color: var(--text-light-muted);
}

.pricing-card:not(.is-featured) .btn-secondary {
  color: var(--primary-deep);
  border-color: var(--secondary-line);
}

.pricing-card:not(.is-featured) .btn-secondary:hover {
  background: var(--primary-deep);
  border-color: var(--primary-deep);
  color: var(--text-light);
}

/* ============================================================
   Reveal
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(30px) scale(0.98);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px) scale(0.93);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.02s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.07s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.12s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.17s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.22s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.27s; }
.reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 0.32s; }
.reveal-stagger.is-visible > *:nth-child(8) { transition-delay: 0.37s; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   Audit form
   ============================================================ */

.form-card {
  max-width: 680px;
  margin: 0 auto;
  background: var(--primary-mid);
  border: 1px solid var(--primary-line);
  border-radius: 18px;
  padding: 48px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-group {
  margin-bottom: 22px;
}

.form-group label {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 8px;
  color: var(--text-light-muted);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--primary-line);
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: var(--font-body);
  color: var(--text-light);
  background: var(--primary-deepest);
  transition: border-color 0.2s ease;
}

.form-group select option {
  color: var(--ink);
  background: var(--secondary);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--text-light-muted);
  opacity: 0.8;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(203, 203, 203, 0.25);
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.form-disclaimer {
  font-size: 0.8rem;
  color: var(--text-light-muted);
  margin-top: 18px;
  text-align: center;
}

.honeypot-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

.form-error {
  background: rgba(214, 92, 74, 0.16);
  border: 1px solid rgba(214, 92, 74, 0.4);
  color: #f5d6d0;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 0.88rem;
  margin: 0 0 20px;
}

/* ============================================================
   Thank you page
   ============================================================ */

.thanks-page {
  min-height: 64vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 90px 24px;
  background: var(--primary-deep);
  color: var(--text-light);
}

.thanks-page .icon-badge {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin: 0 auto 26px;
  animation: pop-in 0.5s var(--ease) both;
}

@keyframes pop-in {
  from {
    opacity: 0;
    transform: scale(0.7);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.thanks-page h1 {
  color: var(--text-light);
  margin: 0 0 12px;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
}

.thanks-page p {
  color: var(--text-light-muted);
  font-size: 1.05rem;
  max-width: 480px;
  margin: 0 auto 28px;
}

/* ============================================================
   Footer
   ============================================================ */

.site-footer {
  background: var(--primary-deepest);
  color: var(--text-light-muted);
  padding: 48px 0;
}

.footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-row .logo-lockup .word {
  color: var(--text-light);
}

.footer-nav {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}

.footer-nav a {
  color: var(--text-light-muted);
  font-size: 0.88rem;
  transition: color 0.2s ease;
}

.footer-nav a:hover {
  color: var(--text-light);
}

.footer-bottom {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--primary-line);
  font-size: 0.8rem;
  text-align: center;
  color: var(--text-light-muted);
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 900px) {
  .industry-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .method-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .calc-card {
    grid-template-columns: 1fr;
  }

  .pricing-grid-2,
  .pricing-grid-3 {
    grid-template-columns: 1fr;
    max-width: 460px;
  }
}

@media (max-width: 640px) {
  section {
    padding: 80px 0;
  }

  .hero {
    padding: 64px 0 56px;
  }

  .nav-links {
    gap: 14px;
  }

  .nav-links a:not(.btn) {
    display: none;
  }

  .industry-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .method-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .calc-card {
    padding: 32px 22px;
  }

  .calc-stats {
    grid-template-columns: 1fr 1fr;
  }

  .form-card {
    padding: 30px 22px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .footer-row {
    flex-direction: column;
    text-align: center;
  }

  .footer-nav {
    justify-content: center;
  }

  .scroll-tilt-card {
    height: min(420px, 54vh);
  }

  .scroll-tilt-visual {
    padding: 24px;
    gap: 20px;
  }

  .scroll-tilt-visual .stat-row {
    gap: 24px;
  }
}