:root{
  --ink:#0b1220; --muted:#667085; --panel:#0d1226; --bg:#070b16;
  --grad-a:#7c3aed; --grad-b:#06b6d4; --grad-c:#22c55e; --card:#0f172a;
  --ring:#ffffff30; --ring-strong:#ffffff60; --white:#f8fafc;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:"Manrope",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--white)}

/* Background visuals */
.bg{position:fixed;inset:0;overflow:hidden;z-index:-1}
.grid{position:absolute;inset:-40px;background:radial-gradient(circle at 20% 10%,#ffffff07 0,transparent 40%),radial-gradient(circle at 80% 30%,#ffffff07 0,transparent 40%),radial-gradient(circle at 60% 80%,#ffffff05 0,transparent 40%)}
.blob{position:absolute;filter:blur(50px);opacity:.65;mix-blend-mode:screen;border-radius:50%}
.blob.a{width:520px;height:520px;background:conic-gradient(from 120deg,var(--grad-a),var(--grad-b),var(--grad-c));left:-120px;top:-120px;animation:float1 14s ease-in-out infinite}
.blob.b{width:520px;height:520px;background:conic-gradient(from 10deg,var(--grad-b),var(--grad-c),var(--grad-a));right:-140px;bottom:-140px;animation:float2 16s ease-in-out infinite}
@keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,20px)}}
@keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,-30px)}}

/* Top nav */
.nav{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;padding:14px 22px;background:linear-gradient(180deg,#070b16,rgba(7,11,22,.6) 60%,transparent);backdrop-filter:saturate(140%) blur(6px)}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--grad-a),var(--grad-b));display:grid;place-items:center;font-weight:800}
.name{font-weight:800;letter-spacing:.2px}
.links a{color:#c7d2fe;text-decoration:none;margin:0 10px;opacity:.9}
.links a:hover{opacity:1}
.cta{padding:10px 14px;border-radius:10px;background:linear-gradient(135deg,var(--grad-b),var(--grad-a));color:white;text-decoration:none;font-weight:700}

/* Hero */
.wrap{max-width:1100px;margin:0 auto;padding:24px}
.hero{padding:80px 0 20px;display:grid;grid-template-columns:1.2fr 1fr;gap:22px;align-items:start}
.hero h1{font-size:48px;line-height:1.05;margin:0 0 10px}
.hero h1 span{background:linear-gradient(135deg,var(--grad-a),var(--grad-b),var(--grad-c));-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{color:#cbd5e1;max-width:680px}
.actions{margin:22px 0;display:flex;gap:12px;flex-wrap:wrap}
.btn{padding:12px 16px;border-radius:14px;text-decoration:none;font-weight:700;border:1px solid transparent}
.btn.primary{background:linear-gradient(135deg,var(--grad-c),var(--grad-b));color:#07111f}
.btn.ghost{border-color:var(--ring);color:#e2e8f0;background:#ffffff10}
.btn:hover{box-shadow:0 0 0 6px var(--ring)}

.stats{display:flex;gap:14px;flex-wrap:wrap;margin:26px 0}
.card{background:linear-gradient(180deg,#10172a,#0b1222);border:1px solid var(--ring);border-radius:16px;padding:16px 18px;min-width:160px;box-shadow:0 10px 30px rgba(0,0,0,.25)}

.hero-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:34px 0 12px}
.hero-photo{background:linear-gradient(180deg,#10172a,#0b1222);border:1px solid var(--ring);border-radius:18px;overflow:hidden;box-shadow:0 14px 40px rgba(0,0,0,.28);display:flex;flex-direction:column;min-height:100%}
.hero-photo img{width:100%;height:220px;object-fit:cover;display:block}
.hero-photo figcaption{padding:14px 16px;color:#cbd5e1;font-size:14px;line-height:1.5}

.num{font-size:32px;font-weight:800}
.label{color:#9fb2c8;margin-top:4px}

/* Hero map card */
.hero-map{position:relative;height:420px;border-radius:18px;overflow:hidden;border:1px solid var(--ring);background:#0a1020;box-shadow:0 18px 50px rgba(0,0,0,.35)}
#landingMap{position:absolute;inset:0}
.neon-overlay{position:absolute;inset:0;pointer-events:none;display:block;background:linear-gradient(135deg,rgba(124,58,237,.22),rgba(6,182,212,.22)),radial-gradient(800px 800px at 10% 20%,rgba(34,197,94,.18),transparent 60%);mix-blend-mode:color-dodge}

/* Minimal Leaflet marker styles (reuse from app) */
.pp-icon{background:transparent;border:none}
.pp-dot{width:12px;height:12px;border-radius:50%;border:2px solid #07111f;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.pp-dot.padel{background:var(--grad-c)}
.pp-dot.pickle{background:var(--grad-b)}

/* Features */
.features{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:40px 0}
.feature{background:linear-gradient(180deg,#0f172a,#0b1222);border:1px solid var(--ring);border-radius:16px;padding:18px;min-height:140px}
.feature .icon{font-size:24px;margin-bottom:8px}
.feature h3{margin:0 0 4px}
.feature p{margin:0;color:#cbd5e1}

/* How */
.how{margin:40px 0}
.how h2{margin:0 0 12px}
.how ol{padding-left:20px;color:#cbd5e1}
.how li{margin:8px 0}

/* About */
.about{margin:40px 0;color:#cbd5e1}
.about h2{margin:0 0 10px;color:#e2e8f0}

.footer{padding:30px 22px;color:#9fb2c8;border-top:1px solid var(--ring)}

@media (max-width: 980px){
  .features{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero h1{font-size:38px}
  .hero{grid-template-columns:1fr}
  .hero-map{height:320px;margin-top:6px}
  .hero-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 640px){
  .features{grid-template-columns:1fr}
  .hero{padding-top:60px}
  .hero-gallery{grid-template-columns:1fr}
  .hero-photo img{height:200px}
}