:root {
  --brand:#00AEEF;
  --brand-dark:#008fc3;
  --text:#0f172a;
  --muted:#475569;
  --bg:#ffffff;
}
* { box-sizing:border-box }
html,body {
  padding:0;
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
  color:var(--text);
  background:var(--bg);
}
a { color:var(--brand); text-decoration:none }
a:hover { text-decoration:underline }
.container { max-width:1140px; margin:0 auto; padding:0 20px }
.btn {
  display:inline-block;
  padding:14px 20px;
  border-radius:12px;
  background:var(--brand);
  color:#fff;
  font-weight:700;
  box-shadow:0 4px 16px rgba(0,0,0,.12);
  transition:transform .06s ease, background .2s;
}
.btn:hover { background:var(--brand-dark); transform:translateY(-1px) }
.btn.secondary { background:#111827 }
.btn.ghost { background:transparent; border:2px solid var(--brand); color:var(--brand) }
.badge { height:54px; display:inline-flex; align-items:center }

header.site-header {
  position:sticky;
  top:0;
  backdrop-filter:saturate(180%) blur(10px);
  background:rgba(255,255,255,.7);
  border-bottom:1px solid rgba(0,0,0,.06);
  z-index:50;
}
.nav { display:flex; align-items:center; justify-content:space-between; padding:12px 0 }
.brand { display:flex; gap:12px; align-items:center }
.brand img { width:40px; height:40px; border-radius:10px }
.brand .name { font-weight:800; letter-spacing:.2px }
.menu a { margin-left:16px; font-weight:600; color:#0f172a }

.hero {
  background:linear-gradient(135deg,#00AEEF 0%,#44bff0 50%,#67c8f2 100%);
  color:white;
}
.hero .wrap {
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:32px;
  align-items:center;
  padding:64px 0;
}
.hero h1 { font-size:52px; line-height:1.05; margin:0 0 16px }
.hero p.lead { font-size:20px; color:#f1f5f9 }
.hero .cta { display:flex; gap:12px; flex-wrap:wrap; margin-top:12px }
.hero .mock {
  background:white;
  border-radius:24px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  overflow:hidden;
}
.hero .mock img { width:100%; display:block }

.how { padding:64px 0 }

/* ✅ NEW colorful card grid for “How it works” */
.card-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px;
  margin-top:24px;
}
.how-card {
  border-radius:18px;
  padding:22px;
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
  display:flex;
  align-items:flex-start;
  gap:14px;
  transition:0.3s ease;
}
.how-card:hover {
  transform:translateY(-6px);
  box-shadow:0 10px 22px rgba(0,0,0,0.12);
}
.how-card .icon {
  font-size:36px;
  flex-shrink:0;
}
.how-card h3 {
  margin:0 0 6px;
  color:#0f172a;
}
.how-card p {
  color:#37474F;
  line-height:1.5;
  margin:0;
}
.note-card {
  grid-column:1 / -1;
  background:#FFF3E0;
  border-radius:16px;
  padding:20px;
  box-shadow:0 4px 10px rgba(0,0,0,0.07);
}
.note-card h4 {
  margin:0 0 6px;
  color:#E65100;
}
.note-card p {
  color:#37474F;
  margin:4px 0;
}

/* ✅ Default 3-column structure (unchanged below) */
.features { padding:32px 0 64px }
.features ul { columns:2; gap:24px; margin:0; padding-left:18px }
.gallery { padding:32px 0 }
.gallery .row { display:grid; grid-template-columns:repeat(4,1fr); gap:12px }
.gallery img { width:100%; border-radius:12px; border:1px solid rgba(0,0,0,.08) }
.pricing { padding:32px 0 64px }
.pricing .boxes { display:grid; grid-template-columns:repeat(2,1fr); gap:20px }
.box { border:2px solid rgba(0,0,0,.08); border-radius:18px; padding:22px }
.box h3 { margin-top:0 }
.faq { padding:32px 0 64px }
.faq details { border:1px solid rgba(0,0,0,.08); border-radius:12px; padding:14px 16px; margin-bottom:12px }

footer {
  border-top:1px solid rgba(0,0,0,.08);
  padding:28px 0;
  color:var(--muted);
  font-size:14px;
}
footer .cols {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  align-items:center;
}

.notice { font-size:12px; color:#e2e8f0; margin-top:8px }

.sticky-cta {
  position:fixed;
  bottom:16px;
  left:50%;
  transform:translateX(-50%);
  background:#111827;
  color:#fff;
  border-radius:999px;
  padding:10px 18px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  display:none;
}

@media (max-width:1024px) {
  .hero .wrap { grid-template-columns:1fr; gap:20px }
  .hero h1 { font-size:40px }
  .features ul { columns:1 }
  .gallery .row { grid-template-columns:repeat(2,1fr) }
  .pricing .boxes { grid-template-columns:1fr }
}

@media (max-width:640px) {
  .menu { display:none }
  .sticky-cta { display:inline-flex }
  .hero h1 { font-size:34px }
}

#floatingBtn {
  position:fixed;
  bottom:20px;
  right:20px;
  z-index:9999;
  animation:floatIn 0.5s ease-in-out;
}
#floatingBtn a {
  background:#00AEEF;
  color:#fff;
  padding:14px 24px;
  border-radius:50px;
  font-weight:700;
  box-shadow:0 4px 12px rgba(0,0,0,0.2);
  transition:all 0.3s ease;
}
#floatingBtn a:hover {
  background:#008fc3;
  transform:scale(1.05);
}
@keyframes floatIn {
  from { opacity:0; transform:translateY(40px); }
  to { opacity:1; transform:translateY(0); }
}