/* STZ16 landing visual tokens — geometry only, content and structure stay untouched. */
:root{
  /* 8px spacing scale */
  --space-1:8px;
  --space-2:16px;
  --space-3:24px;
  --space-4:32px;
  --space-5:40px;
  --space-6:48px;
  --space-8:64px;
  --space-12:96px;
  /* one predictable shape language */
  --radius-control:12px;
  --radius-card:16px;
  --radius-panel:24px;
  --radius-pill:999px;
  /* type scale */
  --type-xs:12px;
  --type-sm:14px;
  --type-body:16px;
  --type-h3:24px;
  --type-h2:clamp(36px,4vw,52px);
  --type-h1:clamp(44px,5.2vw,72px);
  --control-height:48px;
}

/* Section rhythm: every major block starts on the same 96/64px cadence. */
section{padding-block:var(--space-12)}
.head{gap:var(--space-4);margin-bottom:var(--space-4)}
.head h2,.video-copy h2,.tech-copy h2,.conversion h2{font-size:var(--type-h2);line-height:1.04;letter-spacing:-.04em}

/* Shared shape tokens for the landing components. */
.btn,.hero-premium .hero-actions .btn,.lead-form .btn,.quiz-result-form .btn{min-height:var(--control-height);padding:0 var(--space-3);border-radius:var(--radius-control);font-size:var(--type-sm);line-height:1.2}
.mobile-bar .btn{min-height:var(--control-height)}
.btn.ghost{border-radius:var(--radius-control)}
.badge,.tab{border-radius:var(--radius-pill)}
.quiz-shell,.video-frame,.facade-scheme,.tech-copy,.compare-visual,.factory-card,.lead-form{border-radius:var(--radius-panel)}
.option,.video-facts span,.form-promise{border-radius:var(--radius-control)}
.product{border-radius:var(--radius-card)}
.product-media{border-radius:0}
.product-body{padding:var(--space-3)}
.catalog-grid{gap:var(--space-2)}
.quiz-side,.quiz-main{padding:var(--space-5)}
.video-layout,.tech-grid,.factory-grid,.conversion-grid{gap:var(--space-4)}
.compare-visual{padding:var(--space-3) var(--space-4) var(--space-3)}
.lead-form{padding:var(--space-3)}

@media(max-width:640px){
  section{padding-block:var(--space-8)}
  .head{gap:var(--space-2);margin-bottom:var(--space-3)}
  .quiz-main,.quiz-side,.tech-copy,.facade-scheme{padding:var(--space-3)}
  .compare-visual{padding:var(--space-3) var(--space-2)}
  .lead-form{padding:var(--space-3)}
}

@media(prefers-reduced-motion:reduce){
  .btn{transition:none!important}
}