:root{
  --blue:#1f78ff;
  --green:#2ecc40;
  --ink:#0a0f1a;
  --bg:#f7fbff;
  --card:#ffffff;
  --ink-2:#1d263b;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.5;
}
h1,h2,h3{font-family: Nunito, Inter, sans-serif; margin:0 0 .5rem}
h1{font-size: clamp(2rem, 3.5vw + 1rem, 4rem);}
h1 span{color:var(--green)}
h2{font-size: clamp(1.6rem, 1.2vw + 1.2rem, 2.2rem)}
p.lead{font-size:1.125rem; color:var(--ink-2)}
.container{width:min(1120px, 92vw); margin-inline:auto}
.site-header{
  position:sticky; top:0; z-index:10;
  background:#0c57cb; /* deep blue header to match brand */
  color:#fff; border-bottom:2px solid rgba(255,255,255,.15)
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding: .8rem 0}
.brand{display:flex; align-items:center; gap:.6rem; color:#fff; text-decoration:none; font-weight:800}
.brand-logo{height:44px; width:auto}
.brand-text{font-size:1.125rem}
.nav{display:flex; align-items:center; gap:1rem}
.nav a{color:#fff; text-decoration:none; font-weight:700; opacity:.95}
.nav a:hover{opacity:1; text-decoration:underline}
.btn{
  display:inline-block; border:none; border-radius:999px; padding:.8rem 1.2rem;
  font-weight:800; text-decoration:none; background:var(--green); color:#06220e;
  box-shadow: 0 8px 20px rgba(46,204,64,.25); cursor:pointer
}
.btn:hover{transform: translateY(-1px)}
.btn.ghost{background:transparent; color:#fff; border:2px solid #fff; box-shadow:none}
.btn.primary{background:var(--green); color:#06220e}
.btn.small{padding:.55rem .9rem; font-size:.95rem}
.hero{
  background:linear-gradient(180deg, #1270f1 0%, #1b82ff 50%, #e6f2ff 50%, #f7fbff 100%);
  color:#fff; padding:2rem 0 0
}
.hero-grid{display:grid; grid-template-columns: 1.05fr .95fr; align-items:center; gap:2rem}
.hero-copy{padding:1rem 0 2rem}
.cta-row{display:flex; gap:.8rem; margin:1rem 0}
.badges{display:flex; gap:.6rem; flex-wrap:wrap}
.badge{background:#fff; color:#0a3b15; border-radius:999px; padding:.35rem .75rem; font-weight:800; font-size:.85rem}
.hero-art img{width:100%; height:auto; display:block; border-radius:20px; box-shadow:0 16px 40px rgba(0,0,0,.18)}

.preorder{padding:3rem 0 2rem; background:#e6f2ff; border-top:3px solid #b7d4ff}
.preorder-inner{display:flex; align-items:center; justify-content:center}
.countdowns{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:1rem 0 1.2rem}
.timer{font-family: Nunito, Inter, sans-serif; font-weight:900; font-size:1.25rem; color:#0a0f1a}

.products{padding:3rem 0}
.grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:1.2rem}
.card{
  background:var(--card); padding:1rem; border-radius:16px; box-shadow:0 10px 24px rgba(0,0,0,.08);
  display:flex; flex-direction:column; align-items:flex-start; gap:.5rem;
}
.card img{width:100%; height:auto; border-radius:12px; background:#f2f6ff}
.note{color:#4a5568; font-size:.95rem; margin-top:1rem}

.about{padding:3rem 0; background:#fff}
.about-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:2rem; align-items:start}
.newsletter{display:flex; gap:.6rem; align-items:center; flex-wrap:wrap}
.newsletter input{padding:.8rem 1rem; border-radius:12px; border:2px solid #dbe5ff; flex:1; min-width:220px}
.form-msg{margin: .4rem 0 0; font-size:.95rem; color:#0a3b15}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}

.site-footer{padding:2rem 0; background:#0a0f1a; color:#b9c2cf}
.footer-grid{display:grid; grid-template-columns:1fr auto; align-items:center; gap:1rem}
.footer-logo{height:36px; width:auto; display:block; margin-bottom:.4rem}
.footer-links{display:flex; gap:1rem}
.footer-links a{color:#e6f2ff; text-decoration:none}
.footer-links a:hover{text-decoration:underline}

/* Responsive */
@media (max-width: 960px){
  .hero-grid{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 560px){
  .grid{grid-template-columns:1fr}
}