:root{--brand-from:#5B7CFF;--brand-to:#8B5CF6;--accent:#7C3AED;--accent-2:#6366F1;--text:#0B1020;--muted:#5B6477;--bg:#F7F9FF;}
*{box-sizing:border-box} html,body{margin:0;padding:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;color:var(--text);background:linear-gradient(180deg,#fff 0%, var(--bg) 100%)}
.container{max-width:1080px;margin:0 auto;padding:24px} .header{display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.2px} .logo-mark{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--brand-from),var(--brand-to));display:inline-block} .logo-text{font-size:20px}
.lang-theme{opacity:.85;font-size:14px} .hero{text-align:center;padding:88px 24px 48px;background:radial-gradient(1200px 600px at 50% -200px, rgba(99,102,241,.18), transparent)}
.h1{font-size:64px;line-height:1.05;margin:0;background:linear-gradient(135deg,var(--brand-from),var(--brand-to));-webkit-background-clip:text;background-clip:text;color:transparent}
.subh{font-size:22px;font-weight:700;margin-top:18px} .lead{max-width:760px;margin:14px auto 28px;color:var(--muted);font-size:18px}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .btn{appearance:none;border:0;border-radius:12px;padding:12px 18px;font-weight:600;cursor:pointer}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:white;box-shadow:0 8px 16px rgba(99,102,241,.25)} .btn-secondary{background:white;border:1px solid #E5E7EB;color:#111827}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:36px auto;max-width:1080px}
.card{background:white;border:1px solid #EDF0F6;border-radius:16px;padding:18px;box-shadow:0 4px 10px rgba(12,15,30,.04)} .card h3{margin:0 0 6px 0;font-size:18px} .card p{margin:0;color:var(--muted)}
.waitlist{margin-top:28px} .input{padding:12px 14px;border:1px solid #E5E7EB;border-radius:10px;min-width:260px} .footer{padding:28px 24px;border-top:1px solid #E9ECF5;color:#6B7280;font-size:14px} .small{font-size:12px;color:#6B7280}
@media (max-width:640px){.h1{font-size:42px} .subh{font-size:18px}}

/* 4x4 unit grid */
.unit-grid {
  list-style: none;
  padding: 0;
  margin: 24px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* ← force 4 columns */
  gap: 16px;
  max-width: 1080px;                     /* keep it tidy */
}

.unit-pill {
  background: #fff;
  border: 1px solid #EDF0F6;
  border-radius: 16px;
  padding: 14px 16px;
  text-align: center;
  font-weight: 600;
  color: var(--text);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}
.unit-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(12,15,30,.08);
  background: #FBFBFF;
  border-color: #E5E7EB;
}

/* Optional: nicer on small screens (2 columns) */
@media (max-width: 640px) {
  .unit-grid { grid-template-columns: repeat(2, 1fr); }
}