/* ═══════════════════════════════════════════════
   GoVoloom — Unified Design System
   Primary: warm brown-gold (#8b7355)
   Display: Cormorant Garamond + system sans-serif
   ═══════════════════════════════════════════════ */

:root {
  /* Brand */
  --v-primary: #8b7355;
  --v-primary-deep: #6d5a40;
  --v-primary-soft: rgba(139,115,85,.12);
  --v-primary-bg: rgba(139,115,85,.06);

  /* Neutrals */
  --v-ink: #1a1a1a;
  --v-ink-secondary: #4a4a4a;
  --v-ink-mute: #6b6b6b;
  --v-ink-light: #8a857c;

  /* Surfaces */
  --v-canvas: #ffffff;
  --v-canvas-soft: #f9f9f9;
  --v-canvas-warm: #faf8f5;
  --v-dark: #0a0d14;
  --v-dark-elevated: #1a1a1a;

  /* Borders */
  --v-hairline: rgba(139,115,85,.15);
  --v-hairline-light: rgba(0,0,0,.06);

  /* Typography */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Spacing scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 80px;
  --space-5xl: 120px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0,0,0,.04);
  --shadow-md: 0 8px 24px rgba(0,0,0,.06);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.08);

  /* Transitions */
  --ease-out: cubic-bezier(.22,1,.36,1);
  --duration-fast: .2s;
  --duration-normal: .4s;
  --duration-slow: .7s;
}

/* ─── Reset & Base ─── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth }
body {
  font-family: var(--font-body);
  color: var(--v-ink);
  background: var(--v-canvas);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  font-size: 15px;
}
img { max-width:100%; height:auto; display:block }
a { color:inherit; text-decoration:none }

/* ─── Layout ─── */
.v-container { max-width:1100px; margin:0 auto; padding:0 var(--space-xl) }
.v-container-narrow { max-width:800px; margin:0 auto; padding:0 var(--space-xl) }
.v-container-wide  { max-width:1200px; margin:0 auto; padding:0 var(--space-xl) }

.v-section       { padding: var(--space-4xl) 0 }
.v-section-soft  { background: var(--v-canvas-soft) }
.v-section-warm  { background: var(--v-canvas-warm) }
.v-section-dark  { background: var(--v-dark); color:#fff }

/* ─── Typography ─── */
.v-eyebrow {
  font-size:10px; font-weight:500;
  color:var(--v-primary); letter-spacing:2px;
  text-transform:uppercase; margin-bottom:var(--space-md);
}
.v-eyebrow-light { color: rgba(255,255,255,.35) }

.v-title-xl {
  font-family:var(--font-display); font-size:3.2rem; font-weight:500;
  line-height:1.12; letter-spacing:-.5px; color:var(--v-ink);
}
.v-title-lg {
  font-family:var(--font-display); font-size:2.2rem; font-weight:500;
  line-height:1.15; letter-spacing:-.3px; color:var(--v-ink);
}
.v-title-md {
  font-family:var(--font-display); font-size:1.6rem; font-weight:500;
  line-height:1.2; color:var(--v-ink);
}
.v-title-sm {
  font-family:var(--font-display); font-size:1.3rem; font-weight:500;
  line-height:1.25; color:var(--v-ink);
}

.v-text-lead {
  font-size:1.05rem; color:var(--v-ink-mute);
  line-height:1.8; max-width:540px;
}
.v-text-body {
  font-size:.9rem; color:var(--v-ink-mute); line-height:1.7;
}
.v-text-small {
  font-size:.82rem; color:var(--v-ink-light); line-height:1.7;
}
.v-text-caption {
  font-size:.72rem; color:var(--v-ink-light);
  letter-spacing:.5px; text-transform:uppercase;
}

/* Dark section text */
.v-section-dark .v-title-xl,
.v-section-dark .v-title-lg,
.v-section-dark .v-title-md,
.v-section-dark .v-title-sm { color:#fff }
.v-section-dark .v-text-lead { color:rgba(255,255,255,.5) }
.v-section-dark .v-text-body { color:rgba(255,255,255,.45) }

/* ─── Buttons ─── */
.v-btn {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-size:13px; font-weight:600;
  padding:14px 32px; border:none; cursor:pointer;
  transition:all var(--duration-fast) var(--ease-out);
  text-decoration:none; white-space:nowrap;
}
.v-btn-primary {
  background:#fff; color:var(--v-dark);
}
.v-btn-primary:hover {
  background:#e0e0e0; transform:translateY(-2px);
}
.v-btn-outline {
  background:transparent; color:#fff;
  border:1px solid rgba(255,255,255,.25);
}
.v-btn-outline:hover {
  border-color:#fff;
}
.v-btn-outline-dark {
  background:transparent; color:var(--v-ink);
  border:1px solid rgba(42,42,42,.25);
  padding:12px 24px; font-size:10px;
  font-weight:500; letter-spacing:2px; text-transform:uppercase;
}
.v-btn-outline-dark:hover {
  background:var(--v-ink); color:#fff;
  border-color:var(--v-ink); transform:translateY(-2px);
  box-shadow:var(--shadow-md);
}
.v-btn-solid-dark {
  background:var(--v-ink); color:#fff;
  padding:14px 36px;
}
.v-btn-solid-dark:hover {
  background:#333; transform:translateY(-2px);
}

/* ─── Cards ─── */
.v-card {
  background:var(--v-canvas);
  border:1px solid var(--v-hairline-light);
  border-radius:var(--radius-sm);
  padding:var(--space-xl);
  transition:all var(--duration-fast) var(--ease-out);
}
.v-card:hover {
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  border-color:rgba(139,115,85,.25);
}
.v-card-img {
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--radius-sm); display:block;
  transition:transform .8s var(--ease-out);
}
.v-card:hover .v-card-img { transform:scale(1.04) }

/* ─── Stats ─── */
.v-stat-num {
  font-family:var(--font-display); font-size:2.6rem;
  font-weight:500; line-height:1; margin-bottom:4px;
}
.v-stat-label {
  font-size:.72rem; color:var(--v-ink-light);
  letter-spacing:.8px; text-transform:uppercase;
}
.v-section-dark .v-stat-num { color:#fff }
.v-section-dark .v-stat-label { color:rgba(255,255,255,.7) }

/* ─── Process / QC Steps ─── */
.v-step {
  display:flex; align-items:flex-start; gap:var(--space-lg);
  padding:var(--space-lg) 0;
  border-top:1px solid var(--v-hairline);
}
.v-step-num {
  font-family:var(--font-display); font-size:2rem;
  color:var(--v-primary); font-weight:500;
  min-width:56px; text-align:center; line-height:1;
}
.v-step-body h4 {
  font-size:1rem; font-weight:500; color:var(--v-ink);
  margin-bottom:2px;
}
.v-step-body p {
  font-size:.82rem; color:var(--v-ink-light); line-height:1.6; margin:0;
}
.v-step-checks {
  list-style:none; padding:0; margin:0;
  font-size:.82rem; color:var(--v-ink-mute); line-height:2;
}
.v-step-checks li {
  padding-left:var(--space-md); position:relative;
}
.v-step-checks li::before {
  content:'—'; position:absolute; left:0; color:var(--v-primary);
}

/* ─── Category Row ─── */
.v-cat-row {
  display:grid; grid-template-columns:1fr 7fr 4fr;
  gap:var(--space-2xl); align-items:center;
  padding:var(--space-2xl) 0;
  border-bottom:1px solid var(--v-hairline);
}
.v-cat-row:first-of-type { border-top:1px solid var(--v-hairline) }
.v-cat-num {
  font-family:var(--font-display); font-size:2.2rem;
  color:var(--v-primary); font-weight:500; opacity:.6;
}
.v-cat-row:hover .v-cat-num { opacity:1 }
.v-cat-img {
  overflow:hidden; border-radius:var(--radius-sm);
}
.v-cat-img img {
  width:100%; aspect-ratio:4/3; object-fit:cover;
  transition:transform .8s var(--ease-out);
}
.v-cat-row:hover .v-cat-img img { transform:scale(1.03) }
.v-cat-info h3 {
  font-family:var(--font-display); font-size:1.5rem;
  font-weight:500; margin-bottom:6px;
}
.v-cat-link {
  display:inline-block; font-size:10px; color:var(--v-primary);
  letter-spacing:1.5px; text-transform:uppercase;
  text-decoration:none; margin-top:12px;
  border-bottom:1px solid transparent;
  padding-bottom:2px; transition:all var(--duration-fast);
}
.v-cat-row:hover .v-cat-link { border-bottom-color:var(--v-primary) }

/* ─── Cert Item ─── */
.v-cert-item {
  background:var(--v-canvas); padding:var(--space-lg);
  border-radius:var(--radius-sm); text-align:center;
  border:1px solid rgba(0,0,0,.04);
  transition:all var(--duration-fast);
}
.v-cert-item:hover {
  transform:translateY(-2px); box-shadow:var(--shadow-sm);
}
.v-cert-abbr { font-size:1rem; font-weight:600; color:var(--v-primary); margin-bottom:4px }
.v-cert-name { font-size:.72rem; color:var(--v-ink-light) }

/* ─── FAQ ─── */
.v-faq {
  border-bottom:1px solid var(--v-hairline); padding:var(--space-md) 0;
}
.v-faq summary {
  font-size:.9rem; font-weight:500; color:var(--v-ink);
  cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; align-items:center;
}
.v-faq summary::after {
  content:'+'; font-size:1.2rem; color:var(--v-primary);
  font-weight:300; transition:all var(--duration-fast);
}
.v-faq[open] summary::after { content:'−' }
.v-faq p {
  font-size:.82rem; color:var(--v-ink-mute);
  line-height:1.8; padding-top:var(--space-sm); margin:0;
}

/* ─── Grid utilities ─── */
.v-grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-xl) }
.v-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-xl) }
.v-grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-lg) }
.v-grid-6 { display:grid; grid-template-columns:repeat(6,1fr); gap:var(--space-md) }

/* ─── Reveal Animation ─── */
.v-reveal { opacity:1; transform:translateY(0) }
html.js .v-reveal {
  opacity:0; transform:translateY(24px);
  transition:all var(--duration-slow) var(--ease-out);
}
html.js .v-reveal.visible { opacity:1; transform:translateY(0) }
.v-reveal {
  opacity:0; transform:translateY(24px);
  transition:all var(--duration-slow) var(--ease-out);
}
.v-reveal.visible { opacity:1; transform:translateY(0) }

/* ─── Scroll reveal JS helper ─── */
/* Usage: add class="v-reveal" to any element, include the script below */

/* ─── Responsive ─── */
@media (max-width: 1024px) {
  .v-grid-4 { grid-template-columns:repeat(2,1fr) }
  .v-grid-6 { grid-template-columns:repeat(3,1fr) }
}

@media (max-width: 768px) {
  .v-title-xl { font-size:2.4rem }
  .v-title-lg { font-size:1.8rem }
  .v-section { padding:var(--space-3xl) 0 }
  .v-grid-2,
  .v-grid-3,
  .v-grid-4,
  .v-grid-6 { grid-template-columns:1fr }
  .v-cat-row { grid-template-columns:1fr; gap:var(--space-lg) }
  .v-cat-img { order:-1 }
  .v-step { gap:var(--space-md) }
}

@media (max-width: 480px) {
  .v-title-xl { font-size:2rem }
  .v-container, .v-container-narrow, .v-container-wide { padding:0 var(--space-md) }
}