:root{
  --lime:#b7d300;
  --lime-deep:#819600;
  --ink:#101113;
  --muted:#68717c;
  --line:#e7e9e7;
  --soft:#f6f7f4;
}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);font-family:Manrope,Arial,sans-serif;background:#fff}
button,input{font:inherit}

.landing{min-height:100vh;display:flex;flex-direction:column;overflow:hidden}

/* ---------- top bar ---------- */
.topbar{height:96px;max-width:1280px;width:100%;margin:auto;padding:0 5.2vw;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;text-decoration:none}
.footer em{color:var(--lime);font-style:normal}
.brand-logo{height:64px;width:auto;border-radius:10px;display:block}
.nav-links{display:flex;gap:42px}
.nav-links a{color:var(--ink);font-size:11px;font-weight:800;text-transform:uppercase;text-decoration:none;letter-spacing:.8px}
.nav-links a:hover{color:var(--lime-deep)}

.login-button{border:1.5px solid var(--lime);background:#fff;border-radius:6px;color:var(--lime-deep);font-weight:800;font-size:12px;text-transform:uppercase;padding:12px 26px;cursor:pointer;transition:background .18s,color .18s}
.login-button:hover{background:var(--lime);color:var(--ink)}

/* ---------- hero ---------- */
.hero{max-width:1280px;width:100%;margin:auto;padding:3vw 5.2vw;display:grid;grid-template-columns:1fr .9fr;align-items:center;gap:40px;flex:1}
.eyebrow{color:#9cb500;letter-spacing:.3px;font-size:11px;font-weight:800;margin:0 0 20px}
.hero h1{font-size:clamp(43px,5vw,75px);line-height:1.06;letter-spacing:-4px;margin:0}
.hero h1 span{color:var(--lime)}
.hero-text{font-size:16px;line-height:1.9;max-width:420px;margin:24px 0}
.hero-actions{display:flex;align-items:center;gap:24px}
.primary-action{background:var(--ink);border:1.5px solid var(--ink);color:#fff;border-radius:6px;font-weight:800;font-size:12px;text-transform:uppercase;padding:15px 22px;cursor:pointer;text-decoration:none;display:inline-block;transition:transform .18s}
.primary-action:hover{transform:translateY(-2px)}
.primary-action span{color:var(--lime);font-size:16px;margin-left:8px}
.ghost-action{color:var(--ink);font-size:12px;font-weight:800;text-transform:uppercase;text-decoration:none;border-bottom:2px solid var(--lime)}
.microcopy{color:var(--muted);font-size:11px;margin-top:16px}

/* ---------- radar signature ---------- */
.radar-stage{position:relative;width:min(460px,90%);aspect-ratio:1;margin:auto;justify-self:end}
.radar-ring{position:absolute;inset:6%;border:3px solid var(--ink);border-right-color:transparent;border-radius:50%;transform:rotate(-32deg);opacity:.9}
.radar-sweep{position:absolute;inset:6%;border-radius:50%;background:conic-gradient(from 0deg,rgba(183,211,0,.28),transparent 70deg);animation:sweep 6s linear infinite}
.ping{position:absolute;inset:6%;border:2px solid var(--lime);border-radius:50%;opacity:0;animation:ping 4s ease-out infinite}
.ping.p2{animation-delay:2s}
.radar-pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-58%)}
.pin-head{display:block;width:74px;height:92px;background:var(--lime);clip-path:polygon(50% 100%,0 35%,12% 4%,88% 4%,100% 35%);position:relative;filter:drop-shadow(0 8px 22px rgba(183,211,0,.55))}
.pin-head:after{content:"";position:absolute;width:26px;height:26px;border-radius:50%;background:#fff;left:24px;top:20px}
.radar-route{position:absolute;inset:0;width:100%;height:100%}
.route-path{stroke:var(--lime);stroke-width:3;stroke-linecap:round;stroke-dasharray:640;stroke-dashoffset:640;animation:draw 5s ease-in-out infinite alternate;filter:drop-shadow(0 0 5px rgba(183,211,0,.6))}
.route-dot{fill:var(--ink)}
.coords{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);font:12px 'DM Mono',monospace;color:var(--muted);letter-spacing:1px;white-space:nowrap}
.radar-tag{position:absolute;top:2%;right:0;font:10px 'DM Mono',monospace;letter-spacing:2px;color:var(--ink);background:var(--soft);border:1px solid var(--line);border-radius:20px;padding:6px 12px}
.radar-tag:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px var(--lime);margin-right:7px;animation:blink 1.6s ease-in-out infinite}

@keyframes sweep{to{transform:rotate(360deg)}}
@keyframes ping{0%{transform:scale(.55);opacity:.7}80%{transform:scale(1.08);opacity:0}100%{opacity:0}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes blink{50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.radar-sweep,.ping,.route-path,.radar-tag:before{animation:none}.route-path{stroke-dashoffset:0}}

/* ---------- value row ---------- */
.value-row{border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr);max-width:1280px;width:100%;margin:auto;padding:34px 5.2vw}
.value-row article{padding:0 28px;text-align:center;border-right:1px solid var(--line)}
.value-row article:first-child{padding-left:0}
.value-row article:last-child{border:none}
.icon{color:var(--lime);font-size:34px}
.value-row h2{font-size:14px;margin:10px 0 6px}
.value-row p{font-size:11px;line-height:1.6;max-width:190px;margin:auto;color:var(--muted)}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line);max-width:1280px;width:100%;margin:auto;padding:20px 5.2vw 26px;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted)}
.footer strong{color:var(--ink);letter-spacing:-.5px}
.footer a{color:var(--lime-deep);font-weight:700;text-decoration:none}

/* ---------- login modal ---------- */
.modal-backdrop{background:#111a;position:fixed;z-index:10;inset:0;display:grid;place-items:center;padding:20px}
.modal-backdrop[hidden]{display:none}
.login-modal{background:#fff;width:min(440px,100%);padding:44px;border-radius:14px;position:relative;box-shadow:0 20px 70px #0005}
.close{border:0;background:none;font-size:30px;cursor:pointer;position:absolute;right:20px;top:15px}
.modal-logo{height:56px;width:auto;border-radius:8px;display:block;margin-bottom:30px}
.login-modal h2{font-size:37px;letter-spacing:-2px;margin:0}
.login-modal>p:not(.eyebrow):not(.login-help){color:var(--muted);font-size:14px;line-height:1.6}
.modal-go{width:100%;text-align:center;margin-top:12px}
.login-help{font-size:11px;color:var(--muted);text-align:center;margin:20px 0 0}

/* ---------- mobile ---------- */
@media(max-width:820px){
  .topbar{height:75px;padding:0 20px}
  .nav-links{display:none}
  .brand-logo{height:46px}
  .login-button{padding:9px 14px;font-size:10px}
  .hero{display:block;padding:45px 24px 25px}
  .hero h1{letter-spacing:-2.5px}
  .hero-actions{flex-wrap:wrap;gap:16px}
  .radar-stage{width:min(300px,80%);margin:45px auto 25px;justify-self:center}
  .pin-head{width:52px;height:64px}
  .pin-head:after{width:18px;height:18px;left:17px;top:14px}
  .value-row{grid-template-columns:repeat(2,1fr);padding:20px}
  .value-row article{padding:15px 8px!important;border-bottom:1px solid var(--line)}
  .footer{flex-direction:column;gap:6px;text-align:center}
  .login-modal{padding:32px 24px}
  .modal-logo{height:44px;margin-bottom:24px}
}