:root {
  --bg: #f6f9ff;
  --surface: #ffffff;
  --alt: #edf6ff;
  --text: #0f2642;
  --muted: #45678c;
  --orange: #ff8a00;
  --blue: #1ba9ff;
  --red: #ff4b4b;
  --green: #55c84e;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 10% 0%, rgba(255,138,0,.1), transparent 26%),
    radial-gradient(circle at 90% 10%, rgba(27,169,255,.12), transparent 30%),
    var(--bg);
}
.wrap { max-width: 1140px; margin: 0 auto; padding: 0 1rem; }

.topbar {
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #d8e9ff;
  position: sticky;
  top: 0;
  z-index: 10;
}
.nav { display:flex; justify-content:space-between; align-items:center; min-height:70px; gap:.75rem; }
.nav-row { display:flex; gap:.55rem; flex-wrap:wrap; }
.logo { font-weight: 900; font-size: 1.15rem; letter-spacing:.25px; }
.logo span {
  color: #ff5a1f;
  text-shadow: 0 1px 0 #fff, 0 0 18px rgba(255,90,31,.22);
}

.hero {
  padding: 3rem 0 2.6rem;
  background:
    radial-gradient(circle at 12% 20%, rgba(255,75,75,.16), transparent 28%),
    radial-gradient(circle at 78% 14%, rgba(85,200,78,.18), transparent 24%),
    radial-gradient(circle at 46% 3%, rgba(255,216,77,.22), transparent 20%),
    linear-gradient(180deg, #fff5e9 0%, #eef8ff 56%, #f6f9ff 100%);
}
.hero-grid {
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 2rem;
  align-items: center;
}
.eyebrow {
  display:inline-block;
  background:#fff;
  border:1px solid #cfe6ff;
  color:#1f5d94;
  border-radius:999px;
  padding:.28rem .7rem;
  font-size:.82rem;
  font-weight:700;
}
h1 {
  font-size: clamp(2.1rem,4.8vw,3.8rem);
  line-height: 1.06;
  margin: .35rem 0 .45rem;
  letter-spacing: -.4px;
}
h1 span { color: #0b6fc3; }
.lead { color: #2c4f77; font-size: 1.06rem; max-width: 62ch; }

.cta-row { display:flex; align-items:center; gap:.85rem; flex-wrap:wrap; margin-top: 1rem; }
.text-link {
  color:#0d6fbe;
  font-weight:700;
  text-decoration:none;
}
.text-link:hover { text-decoration: underline; }

.hero-image {
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg,#fff,#f4f9ff);
  box-shadow: 0 18px 40px rgba(25,85,152,.2);
  border:1px solid #d7eaff;
}
.hero-image img {
  width: 100%;
  max-height: 460px;
  object-fit: contain;
  display:block;
}

.section { padding: 3.1rem 0; }
.alt {
  background: linear-gradient(180deg,#eef7ff,#f7fbff);
  border-top: 1px solid #d8ecff;
  border-bottom: 1px solid #d8ecff;
}
h2 { margin: 0 0 1rem; font-size: 2rem; letter-spacing: -.2px; }

.gallery-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 1rem; }
.gallery-grid figure {
  margin:0;
  background: transparent;
  border-radius: 14px;
  overflow:hidden;
}
.gallery-grid img {
  width:100%;
  height:240px;
  object-fit: cover;
  border-radius:14px;
  border:1px solid #d8eaff;
  box-shadow: 0 12px 26px rgba(31,88,148,.14);
}
.gallery-grid img.pack-shot {
  object-fit: contain;
  background: #f7fbff;
  padding: 8px;
}
.gallery-grid figcaption { padding:.55rem .2rem 0; color:#355b84; font-weight:700; }
.trust-row {
  margin-top: 1rem;
  display:flex;
  gap:.55rem;
  flex-wrap:wrap;
}
.trust-row span {
  background: rgba(255,255,255,.85);
  border:1px solid #d4e8ff;
  color:#245685;
  border-radius: 999px;
  padding:.34rem .72rem;
  font-weight:700;
  font-size:.84rem;
}

.rules-sub { color: var(--muted); margin: -.2rem 0 1rem; font-weight: 600; }
.rules-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  gap:.8rem;
}
.rule-item {
  padding:1rem 1rem;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.72));
  border:1px solid #d6e9ff;
}
.rule-item h3 { margin:.1rem 0 .45rem; font-size: 1.03rem; }
.rule-item p { margin:0; color:#395d84; }

.kit-sub { color: var(--muted); margin: -.2rem 0 1rem; font-weight: 600; }
.kit-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  gap:.75rem;
}
.kit-item {
  background: rgba(255,255,255,.86);
  border: 1px solid #d7eaff;
  border-radius: 12px;
  padding: .9rem .9rem;
  display:flex;
  flex-direction:column;
  gap:.35rem;
}
.kit-item span { color:#3a5f86; }

.preorder {
  max-width: 820px;
  text-align:center;
  padding: 1.4rem 1rem;
  border-radius: 16px;
  background: linear-gradient(125deg, rgba(255,138,0,.12), rgba(27,169,255,.12));
  border:1px solid #cfe5ff;
}
.waitlist-form { display:flex; justify-content:center; gap:.6rem; flex-wrap:wrap; margin-top:.5rem; }
input[type='email'] {
  padding:.73rem .86rem;
  border:1px solid #b9dcff;
  border-radius: 12px;
  min-width:280px;
  font-size: 1rem;
}
.form-msg { color:#255684; font-weight:600; }

.manufacture-block {
  padding: 1.2rem 1rem;
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  border:1px solid #d3e8ff;
}

.btn {
  background: linear-gradient(180deg,#ffa632,var(--orange));
  color:#10243e;
  border:none;
  border-radius: 12px;
  padding:.72rem 1rem;
  font-weight:800;
  text-decoration:none;
  display:inline-block;
}
.btn:hover { filter: brightness(1.03); transform: translateY(-1px); }
.btn-outline {
  background: rgba(255,255,255,.85);
  border:1px solid var(--blue);
  color:#0f5f9d;
}
.btn-small { padding:.46rem .82rem; font-size:.9rem; }

.footer {
  text-align:center;
  padding: 1.4rem 1rem;
  color:#3b618a;
  background:#edf7ff;
  border-top:1px solid #d7eaff;
}

@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr; }
}