* { box-sizing: border-box }
html, body, #app { height: 100% }
body {
  margin: 0;
  background: radial-gradient(1200px 800px at 80% -10%, rgba(68,214,43,.15), transparent 60%) , var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--color-text); text-decoration: none }
.container { width: min(100% - 2*var(--gutter), var(--container)); margin-inline: auto }
.grid {
  display: grid;
  gap: var(--space-6);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: var(--radius-2);
  background: linear-gradient(180deg, #56F03C, #2AAE20);
  color: #0b0d10;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(68,214,43,.35);
  border: 0;
  cursor: pointer;
}
.btn.secondary {
  background: transparent;
  color: var(--color-text);
  border: 1px solid #2d333a;
}
header.site {
  position: sticky; top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--color-surface) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #1f242a;
}
header .bar {
  display: flex; align-items: center; gap: var(--space-6);
  padding: var(--space-4) 0;
}
.brand { display: flex; align-items: center; gap: var(--space-3); font-weight: 800; letter-spacing: .3px }
.brand .mark { width: 28px; height: 28px; border-radius: 8px; background: #44D62B; display: grid; place-items: center; color: #0b0d10; font-weight: 900 }
.nav { margin-left: auto; display: none; gap: var(--space-4) }
.nav a { opacity: .9 }
.nav a.active { color: #44D62B }
@media (min-width: 768px) { .nav { display: inline-flex } }
main { display: block }
.section {
  padding: clamp(48px, 10vw, 120px) 0;
  border-bottom: 1px solid #171b20;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.01) 30%, transparent);
}
.hero {
  display: grid;
  gap: var(--space-6);
}
.hero h1 { font-size: var(--step-4); margin: 0 0 var(--space-4) }
.hero p.lead { font-size: var(--step-1); color: var(--color-muted); margin: 0 0 var(--space-6) }
.cluster { display: flex; gap: var(--space-3); flex-wrap: wrap }
.card {
  background: var(--color-surface);
  border: 1px solid #1e2329;
  border-radius: var(--radius-2);
  padding: var(--space-6);
  box-shadow: var(--shadow-1);
}
.badge {
  display: inline-flex; gap: 8px; align-items: center;
  padding: 6px 10px; border-radius: 999px;
  background: #111519; border: 1px solid #242a31; font-size: .9rem;
}
.logo-row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-4) }
.logo { display: grid; place-items: center; height: 56px; background: #0f1317; border: 1px dashed #242a31; border-radius: var(--radius-1) }
.features { grid-template-columns: repeat(1, 1fr) }
@media (min-width: 768px){ .features { grid-template-columns: repeat(3, 1fr) } }
.pricing { grid-template-columns: repeat(1, 1fr) }
@media (min-width: 1024px){ .pricing { grid-template-columns: repeat(3, 1fr) } }
footer {
  padding: var(--space-8) 0;
  color: var(--color-muted);
}
input, select, textarea {
  background: var(--color-surface-2); color: var(--color-text); border: 1px solid #2a3139; border-radius: var(--radius-1);
  padding: 12px 14px; width: 100%;
}
.form-row { display: grid; gap: var(--space-4) }
@media (min-width: 768px){ .form-row { grid-template-columns: 1fr 1fr } }
form .actions { display: flex; gap: var(--space-4); align-items: center }
.visually-hidden { position: absolute; clip: rect(0 0 0 0); clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; }
.skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus { left: 8px; top: 8px; width: auto; height: auto; padding: 8px 12px; background: #111519; border: 1px solid #2a3139; border-radius: 8px; }
@media (max-width: 767.98px){
  .logo-row { grid-template-columns: repeat(2, minmax(0,1fr)) }
}