/* SKYBANANAS site layout (/). Components live in components.css, values in tokens.css.
   Media query widths can't use variables: keep 900px / 640px in sync with
   layout.breakpoint in tokens/tokens.json (build.py --check verifies). */

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

/* Nav */
.nav {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--color-bg) 85%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--color-border);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: var(--layout-nav); }
.brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.brand img { height: 30px; width: auto; }
.brand-name { font-weight: var(--font-heavy); letter-spacing: 0.08em; font-size: 14px; }
.nav-links { display: flex; align-items: center; gap: var(--space-7); }
.nav-links a:not(.btn) { text-decoration: none; font-weight: var(--font-medium); color: var(--color-text-muted); }
.nav-links a:not(.btn):hover, .nav-links a[aria-current] { color: var(--color-text); }

/* Hero */
.hero { padding: var(--space-32) 0; }
.hero .eyebrow { margin-bottom: var(--space-7); }
.lead { max-width: 620px; margin-top: var(--space-7); color: var(--color-text-muted); }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-10); }

/* Sections */
.section { padding: var(--space-28) 0; }
.section h2 { max-width: 820px; }
.section-lead { max-width: 640px; margin-top: var(--space-6); color: var(--color-text-muted); }
.on-dark .section-lead { color: var(--color-inverse-text-muted); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-14); }
.steps {
  list-style: none; padding: 0; margin: var(--space-14) 0 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5);
}

/* Contact */
.section-accent { background: var(--color-accent); color: var(--color-ink); }
.contact { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap; }
.contact p { margin-top: var(--space-4); }

/* Footer */
.footer { padding: var(--space-10) 0; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; color: var(--color-inverse-text-muted); }
.footer img { height: 26px; width: auto; }
.footer a { color: var(--color-inverse-text-muted); }
.footer a:hover { color: var(--color-inverse-text); }

/* Responsive */
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-10); }
}
@media (max-width: 640px) {
  .wrap { padding: 0 var(--layout-gutter-sm); }
  .nav-links a:not(.btn) { display: none; }
  .brand-name { display: none; }
  .hero { padding: var(--space-20) 0 var(--space-24); }
  .section { padding: var(--space-20) 0; }
  .steps { grid-template-columns: 1fr; }
  .card, .tile { padding: var(--space-6); }
  .contact .btn { width: 100%; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}