*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}

:root{
  --bg:#000;
  --cyan:#33b5ff;
  --magenta:#d81b60;
  --text:#fff;
  --muted:#b0b0b0;
  --panel:rgba(255,255,255,0.04);
  --stroke:rgba(255,255,255,0.12);
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  min-height:100vh;
}

.bg{
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 600px at 20% 15%, rgba(216,27,96,.25), transparent 60%),
    radial-gradient(1000px 700px at 80% 20%, rgba(51,181,255,.25), transparent 60%),
    radial-gradient(1200px 900px at 50% 95%, rgba(51,181,255,.18), transparent 65%);
}

.container{
  max-width:1040px;
  margin:auto;
  padding:26px 18px 80px;
}

.hero{text-align:center;}

.badge{
  display:inline-flex;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid var(--stroke);
  margin-bottom:16px;
}

.badge-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--magenta),var(--cyan));
}

.nav{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-bottom:20px;
}

.nav a{
  color:var(--text);
  text-decoration:none;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--stroke);
}

.logo-frame{
  display:inline-block;
  padding:14px;
  border-radius:16px;
  border:1px solid var(--stroke);
  margin-bottom:14px;
}

.logo{
  width:260px;
  max-width:80vw;
}

.title{
  font-size:3rem;
  color:var(--cyan);
  margin-bottom:10px;
}

.hero-lead{
  font-size:1.1rem;
  margin-bottom:10px;
}

.subtext{
  color:var(--muted);
  margin-bottom:18px;
}

.divider{
  width:200px;
  height:2px;
  background:linear-gradient(90deg,var(--magenta),var(--cyan));
  margin:0 auto 20px;
}

.cta-row{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

.btn{
  padding:12px 18px;
  border-radius:12px;
  text-decoration:none;
  font-weight:700;
  border:1px solid var(--stroke);
}

.btn.primary{
  background:linear-gradient(135deg,var(--magenta),var(--cyan));
  color:#000;
}

.btn.ghost{
  color:var(--text);
}

.section{
  background:var(--panel);
  border:1px solid var(--stroke);
  border-radius:18px;
  padding:26px 20px;
  margin-top:36px;
}

.section-title{
  font-size:1.6rem;
  margin-bottom:8px;
}

.section-lead{
  color:var(--muted);
  margin-bottom:18px;
}

.center{text-align:center;}

.cards.one{
  max-width:800px;
  margin:auto;
}

.card{
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:18px;
}

.card h3{color:var(--cyan);}

.card ul{
  margin-top:12px;
  padding-left:18px;
}

.card-cta{
  margin-top:16px;
  display:flex;
  justify-content:center;
  gap:12px;
}

.form .grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

/* FAQ accordion styling */
details.faq{
  background: var(--panel2);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 14px 14px;
  margin-top: 12px;
}

details.faq summary{
  cursor: pointer;
  font-weight: 900;
  color: #eaf7ff;
  list-style: none;
}

details.faq summary::-webkit-details-marker{ display:none; }

details.faq summary::after{
  content: "＋";
  float: right;
  color: var(--cyan);
  font-weight: 900;
}

details.faq[open] summary::after{
  content: "−";
}

details.faq p{
  margin-top: 10px;
  color: #d7d7d7;
  line-height: 1.7;
}
.hero{
  padding: 18px 10px 22px;
  margin-bottom: 6px;
}