:root{
  --bg:#0b0d12; /* deep graphite */
  --panel: rgba(255,255,255,0.06);
  --text:#e6e9ef;
  --muted:#9aa5b1;
  --accent:#6ee1ff; /* cyan */
  --accent-2:#8b6cff; /* purple */
  --ok:#38d39f; --warn:#ffcc66; --err:#ff6b6b;
  --radius:14px; --gap:16px; --maxw:1200px;
  --shadow: 0 10px 30px rgba(0,0,0,0.35);
}
*{box-sizing:border-box}
html,body{margin:0; padding:0; background:radial-gradient(1200px 600px at 80% -10%, rgba(110,225,255,0.10), transparent 60%), radial-gradient(1000px 500px at 10% -20%, rgba(139,108,255,0.10), transparent 60%), var(--bg); color:var(--text); font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;}
a{color:inherit; text-decoration:none}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
header{position:sticky; top:0; backdrop-filter:saturate(150%) blur(12px); background:linear-gradient(to bottom, rgba(11,13,18,0.9), rgba(11,13,18,0.6)); border-bottom:1px solid rgba(255,255,255,0.06); z-index:50}
.nav{display:flex; align-items:center; justify-content:space-between; height:72px}
.brand{display:flex; align-items:center; gap:12px}
.brand img{width:28px; height:28px}
.brand .name{font-weight:700; letter-spacing:0.2px}
.links{display:flex; gap:22px}
.links a{color:var(--muted)}
.cta{display:inline-flex; align-items:center; gap:10px; background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#051018; font-weight:700; padding:12px 16px; border-radius:12px; box-shadow:var(--shadow)}
.cta.secondary{background:transparent; color:var(--text); border:1px solid rgba(255,255,255,0.14)}

.hero{display:grid; grid-template-columns:1.1fr 0.9fr; gap:32px; align-items:center; padding:64px 0 40px}
.tag{display:inline-block; padding:6px 10px; border-radius:999px; background:rgba(110,225,255,0.12); color:var(--accent); border:1px solid rgba(110,225,255,0.35); font-weight:600; font-size:12px}
h1{font-size:52px; line-height:1.06; margin:14px 0 16px}
.sub{color:var(--muted); font-size:18px; line-height:1.6}
.hero-ctas{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap}
.panel{background:var(--panel); border:1px solid rgba(255,255,255,0.08); border-radius:var(--radius); box-shadow:var(--shadow)}
.hero-visual{aspect-ratio:16/10; overflow:hidden; position:relative}
.hero-visual img, .hero-visual video{width:100%; height:100%; object-fit:cover; display:block; filter:saturate(110%)}

.logos{opacity:0.8; border-top:1px solid rgba(255,255,255,0.06); border-bottom:1px solid rgba(255,255,255,0.06); padding:22px 0; margin:8px 0 24px}

.features{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:32px 0}
.card{padding:18px; display:flex; flex-direction:column; gap:8px}
.card h3{margin:0; font-size:18px}
.card p{margin:0; color:var(--muted)}

.how{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.step{padding:18px}
.step .num{font-weight:700; color:var(--accent)}

/* What Mapp does / How it helps */
.what{display:grid; gap:18px; margin:32px 0}
.what-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.about-intro{padding:18px}
.what .item{padding:18px}

/* Responsive tweak for what-section */
@media (max-width: 1000px){ .what-grid{grid-template-columns:1fr;} }

.demo{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:32px 0}
.editor{padding:0; overflow:hidden}
.toolbar{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; border-bottom:1px solid rgba(255,255,255,0.07); background:linear-gradient(to bottom, rgba(255,255,255,0.06), rgba(255,255,255,0.03))}
.code{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:13px; line-height:1.6; padding:14px}

/* Pricing section: center a single card like typical SaaS pricing */
.pricing{display:grid; grid-template-columns:repeat(2, minmax(260px, 1fr)); gap:18px; justify-content:center; margin:40px 0}
.price-card{padding:22px}

.price-tier{padding:26px; max-width:560px; width:100%; display:flex; flex-direction:column; gap:14px}
.price-tier .tier-badge{align-self:flex-start; font-weight:700; font-size:12px; padding:6px 10px; border-radius:999px; background:rgba(110,225,255,0.12); color:var(--accent); border:1px solid rgba(110,225,255,0.35)}

.price{display:flex; align-items:flex-end; gap:6px; margin-top:6px}
.price .amount{font-size:42px; font-weight:800; line-height:1}
.price .per{color:var(--muted); font-weight:600; margin-bottom:6px}

.price-tier .sub{margin-top:-4px}

.plan-features{list-style:none; padding:0; margin:4px 0 8px; display:grid; gap:8px}
.plan-features li{display:flex; align-items:flex-start; gap:10px; color:var(--muted)}
.plan-features li::before{content:"✓"; color:var(--ok); font-weight:700; margin-top:0.5px}

/* Full-width CTA at bottom of the card */
.cta.full{justify-content:center; width:100%; text-align:center}

.faq{display:grid; grid-template-columns:1fr; gap:24px; margin:24px 0}
details{padding:16px}
/* FAQ grouping */
.faq-group{border-top:1px solid rgba(255,255,255,0.08); padding-top:12px}
.faq-group h3{margin:0 0 8px; font-size:16px; color:var(--text); opacity:0.9}
.faq-items{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media (max-width: 1000px){ .faq-items{grid-template-columns:1fr;} }

/* Download dropdown */
.download-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:8px}
.dropdown{position:relative; display:inline-block}
.dropdown-toggle{cursor:pointer}
/* Make dropdown opaque to avoid see-through over hero/video */
.menu{position:absolute; top:calc(100% + 8px); right:0; min-width:340px; background:#0b0d12; /* solid theme bg */ border:1px solid rgba(255,255,255,0.12); border-radius:12px; box-shadow:var(--shadow); padding:8px; display:none; z-index:60; backdrop-filter:none}
.menu.open{display:block}
.menu a{display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-radius:10px; color:var(--text)}
.menu a:hover{background:rgba(255,255,255,0.08)}
.menu .hint{color:var(--muted); font-size:12px; margin-left:8px}
.menu a .size{margin-left:auto}

/* Section separators */
.section-sep{height:2px; background:linear-gradient(90deg, rgba(0,0,0,0), rgba(110,225,255,0.45), rgba(139,108,255,0.45), rgba(0,0,0,0)); border:0; margin:44px 0; border-radius:2px}
/* Optional subtle band to emphasize blocks */
.section-band{background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.06); border-radius:16px; padding:16px}

footer{margin:40px 0 60px; color:var(--muted)}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:18px}
.fine{opacity:0.8; font-size:12px; margin-top:12px}

/* Responsive */
@media (max-width: 1000px){ .hero{grid-template-columns:1fr} .demo{grid-template-columns:1fr} .features, .how, .faq, .pricing{grid-template-columns:1fr;} .section-sep{margin:34px 0} }

/* Small Beta badge in nav */
.beta-badge{
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--muted);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.2px;
}

/* Announcement bar under sticky header */
.announce{ background: rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.08); }
.announce .inner{ max-width: var(--maxw); margin: 0 auto; padding: 8px 24px; font-size: 13px; color: var(--muted); display: flex; gap: 10px; align-items: center; justify-content: center; text-align: center; }
.announce .pill{ padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.16); color: #fff; font-weight: 700; font-size: 11px; }
.announce a{ text-decoration: underline; }