@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');
/* Night-chase palette: dark slate like the app, topo contour lines, radar cyan used sparingly, amber/gold for Pro */
:root{--bg:#12181D;--bg2:#161D23;--panel:#1B242B;--panel2:#212C34;--line:#2A363F;--line2:#344450;--tx:#E6EBEE;--mut:#93A1AB;
  --amber:#E8A317;--gold-t:#EBC060;--red:#E5484D;--green:#5DBB78;--cyan:#5EC4DB;
  --gold:linear-gradient(160deg,#F7D98B 0%,#E8A317 48%,#C88A0E 100%);
  --display:'Barlow Condensed','Arial Narrow',Arial,sans-serif;--body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--tx);font:17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
a{color:var(--tx);text-decoration-color:var(--amber);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--gold-t)}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.02;margin:0 0 .4em;letter-spacing:.005em;color:#F3F6F7}
h1{font-size:clamp(44px,6.2vw,80px)}h2{font-size:clamp(34px,4.6vw,54px)}h3{font-size:25px;font-weight:600}
p{max-width:66ch}
.wrap{max-width:1140px;margin:0 auto;padding:0 22px}
.mut{color:var(--mut)}
/* nav */
nav.top{position:sticky;top:0;z-index:50;background:rgba(18,24,29,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
nav.top .wrap{display:flex;align-items:center;gap:24px;height:66px}
.brand{display:flex;align-items:center;gap:10px;font:700 27px var(--display);color:#F3F6F7;text-decoration:none}
.brand img{width:36px;height:36px}
nav.top .links{display:flex;gap:22px;margin-left:auto;align-items:center}
nav.top .links a{text-decoration:none;font-weight:500;font-size:16px;color:#C9D2D8}
nav.top .links a:hover{color:#fff}
@media(max-width:760px){nav.top .links a.hide-sm{display:none}}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 22px;border-radius:9px;font:600 16px var(--body);border:1.5px solid var(--line2);color:var(--tx);background:var(--panel);cursor:pointer;text-decoration:none}
.btn:hover{border-color:#5A6C78;color:#fff;background:var(--panel2)}
.btn.pri{background:var(--gold);color:#241a05;border:1px solid #B07A0C;box-shadow:inset 0 1px 0 rgba(255,244,214,.55),0 2px 10px -4px rgba(232,163,23,.5)}
.btn.pri:hover{filter:brightness(1.06);color:#241a05}
.btn .crown{width:17px;height:17px}
.btn.sm{padding:8px 15px;font-size:15px}
nav.top .links a.btn.pri{color:#241a05}
.btn[disabled]{opacity:.55;cursor:wait}
/* hero */
.hero{position:relative;overflow:hidden;padding:70px 0 64px;border-bottom:1px solid var(--line);background:
  radial-gradient(700px 420px at 78% 38%,rgba(94,196,219,.09),transparent 70%),
  radial-gradient(520px 360px at 12% 100%,rgba(232,163,23,.07),transparent 70%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400' viewBox='0 0 600 400'%3E%3Cg fill='none' stroke='%23202C34' stroke-width='1.3'%3E%3Cpath d='M-20 300c80-40 140-10 210-50s120-110 210-100 160 60 220 40'/%3E%3Cpath d='M-20 330c90-35 150-5 225-45s130-105 215-95 150 55 200 40'/%3E%3Cpath d='M-20 360c90-30 160 0 240-40s140-95 220-85 140 50 180 40'/%3E%3Cpath d='M-20 270c70-45 130-20 195-55s110-115 200-105 170 60 240 40'/%3E%3Cpath d='M-20 240c60-50 120-30 180-60s100-120 190-110 180 60 260 40'/%3E%3Cpath d='M-20 210c60-50 110-40 170-65s95-125 185-115 190 60 270 40'/%3E%3C/g%3E%3C/svg%3E") center/1000px auto repeat,var(--bg)}
.hero .grid{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center}
@media(max-width:920px){.hero .grid{grid-template-columns:1fr}}
.hero p.lead{font-size:20px;color:#B9C4CB;margin:18px 0 0}
.live{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--mut);border:1px solid var(--line);background:rgba(27,36,43,.7);border-radius:20px;padding:5px 14px 5px 10px;margin-bottom:22px}
.live b{color:var(--tx);font-weight:500}.live .dot{width:8px;height:8px;border-radius:50%;background:var(--green)}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0 12px}
.fine{font-size:15px;color:var(--mut)}
/* the map panel with a radar sweep (signature element) */
.panel{position:relative;background:var(--panel);border:1px solid var(--line2);border-radius:16px;padding:12px;box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.panel .scope{position:relative;border-radius:10px;overflow:hidden}
.panel svg{display:block;width:100%;height:auto}
.sweep{position:absolute;left:57.7%;top:33.3%;width:150%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,rgba(94,196,219,.22),rgba(94,196,219,0) 22%,transparent 100%);animation:sweep 6s linear infinite;mix-blend-mode:screen}
@keyframes sweep{to{transform:translate(-50%,-50%) rotate(360deg)}}
.panel .legend{display:flex;flex-wrap:wrap;gap:14px;padding:11px 4px 2px;color:#B9C4CB;font-size:13px}
.panel .legend span{display:inline-flex;align-items:center;gap:6px}
.panel .legend i{width:12px;height:12px;border-radius:3px;display:inline-block}
/* sections */
section{padding:80px 0;border-bottom:1px solid var(--line)}
section.alt{background:var(--bg2)}
.intro{max-width:700px;margin-bottom:38px}
.feat{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(max-width:820px){.feat{grid-template-columns:1fr}}
.feat .f{display:grid;grid-template-columns:52px 1fr;gap:16px;padding:22px 22px 22px 20px;background:var(--panel);border:1px solid var(--line);border-radius:12px}
.feat .f.is-pro{border-color:#4A3D1C;background:linear-gradient(180deg,#1F242A,var(--panel) 60%)}
.feat .ic{width:46px;height:46px;border-radius:11px;display:grid;place-items:center;background:var(--panel2);border:1px solid var(--line2);color:var(--cyan)}
.feat .f.is-pro .ic{color:var(--gold-t);border-color:#4A3D1C;background:#262219}
.feat .f svg{width:26px;height:26px}
.feat h3{margin:0 0 5px;display:flex;align-items:center;flex-wrap:wrap;gap:8px}.feat p{margin:0;color:var(--mut);font-size:16px}
.pro{display:inline-flex;align-items:center;gap:4px;font:700 12.5px var(--body);letter-spacing:.04em;color:#241a05;background:var(--gold);border-radius:5px;padding:1px 7px 1px 5px;box-shadow:inset 0 1px 0 rgba(255,244,214,.5)}
.pro svg{width:12px!important;height:12px!important}
/* pricing */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
@media(max-width:900px){.plans{grid-template-columns:1fr}}
.plan{padding:28px 26px;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:14px}
.plan.best{border:1.5px solid #8A6516;background:linear-gradient(180deg,#242218,var(--panel) 45%);position:relative}
.plan .price{font:700 58px var(--display);margin:10px 0 2px;color:#F3F6F7}.plan .price small{font:500 17px var(--body);color:var(--mut)}
.plan .note2{font-size:15px;color:var(--mut);min-height:24px}
.plan ul{list-style:none;padding:0;margin:18px 0 24px;flex:1}
.plan li{padding:7px 0 7px 24px;position:relative;font-size:16px;color:#CED6DB}
.plan li::before{content:"";position:absolute;left:2px;top:15px;width:10px;height:6px;border-left:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(-45deg)}
.plan.best li::before,.plan.gold-l li::before{border-color:var(--gold-t)}
.plan li.no{color:#6F7D86}.plan li.no::before{border:0;top:17px;width:10px;height:2px;background:#56646D;transform:none}
.flag{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;font:600 14px var(--body);background:var(--gold);color:#241a05;border-radius:6px;padding:2px 10px 2px 7px;margin-bottom:12px}
.flag svg{width:14px;height:14px}
table.cmp{width:100%;border-collapse:separate;border-spacing:0;font-size:16px;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
table.cmp td,table.cmp th{padding:13px 18px;border-bottom:1px solid var(--line);text-align:left}
table.cmp th{font:700 20px var(--display);color:#F3F6F7;background:var(--panel2)}table.cmp tr:last-child td{border-bottom:0}
table.cmp td+td,table.cmp th+th{text-align:center;width:90px}
table.cmp th:last-child{color:var(--gold-t)}
.yes{color:var(--green);font-weight:700}.nope{color:#56646D}
/* forms */
.auth{max-width:440px;margin:56px auto;background:var(--panel);border:1px solid var(--line2);border-radius:16px;padding:32px;box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
label{display:block;font-size:15px;font-weight:500;margin:16px 0 6px;color:#CED6DB}
input[type=email],input[type=password],input[type=text]{width:100%;padding:13px 14px;border-radius:9px;border:1px solid var(--line2);background:#141B20;color:var(--tx);font:17px var(--body)}
input:focus{outline:3px solid rgba(232,163,23,.45);border-color:var(--amber)}
.err{color:#F08A8D;font-size:15px;min-height:22px;margin-top:10px}.okmsg{color:var(--green);font-weight:500}
.check{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--mut);margin-top:16px;font-weight:400}.check input{margin-top:5px;accent-color:var(--amber)}
.btn.oauth{width:100%;margin-top:10px;justify-content:flex-start;background:#141B20;border-width:1px}
.btn.oauth:hover{border-color:#5A6C78}
.btn.oauth .oi{width:26px;height:26px;border-radius:6px;display:grid;place-items:center;font:700 14px var(--body);color:#fff}
.or{display:flex;align-items:center;gap:12px;margin:20px 0 4px;color:var(--mut);font-size:14px}.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.box{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px}
/* faq, guide */
details{border-top:1px solid var(--line);padding:16px 0}details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-weight:600;font-size:18px}details p{color:var(--mut);margin:10px 0 0}
.step{display:grid;grid-template-columns:56px 1fr;gap:18px;padding:26px 0;border-top:1px solid var(--line)}
.step .n{font:700 46px/1 var(--display);color:var(--amber)}
.step h3{margin:2px 0 6px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.step p{margin:0 0 8px;color:var(--mut)}
.kbd{font:500 14px var(--body);padding:2px 8px;border-radius:5px;border:1px solid var(--line2);background:var(--panel2);white-space:nowrap;color:var(--tx)}
.toc{position:sticky;top:90px}.toc a{display:block;padding:5px 0;font-size:16px;text-decoration:none;color:var(--mut)}.toc a:hover{color:var(--tx)}
.doc{display:grid;grid-template-columns:230px 1fr;gap:44px}@media(max-width:860px){.doc{grid-template-columns:1fr}.toc{position:static}}
.note{border-left:4px solid var(--red);background:var(--panel);padding:14px 18px;border-radius:0 10px 10px 0;font-size:16px;color:#CED6DB}
footer{padding:36px 0;color:var(--mut);font-size:15px}
footer .wrap{display:flex;gap:20px;flex-wrap:wrap;align-items:center}footer .fl{margin-left:auto;display:flex;gap:18px}footer a{color:#B9C4CB}
.center{text-align:center}.mt{margin-top:26px}
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:6px;font:600 14px var(--body);vertical-align:6px}
.badge svg{width:13px;height:13px}
.badge.pro{background:var(--gold);color:#241a05}.badge.lite{background:var(--panel2);color:var(--mut);border:1px solid var(--line2)}.badge.trial{background:#2a2416;color:var(--gold-t);border:1px solid #6b5420}
.meter{height:8px;border-radius:4px;background:var(--panel2);overflow:hidden;border:1px solid var(--line)}.meter i{display:block;height:100%;background:var(--amber)}
nav.top .links a{white-space:nowrap}.live b{white-space:nowrap}
@media(max-width:520px){nav.top .wrap{gap:12px}.brand{font-size:24px}.brand img{width:30px;height:30px}nav.top .links{gap:14px}nav.top .links a.btn.sm{padding:7px 12px;font-size:14px}.live{font-size:13px}}
/* ---- hero v3: gradient highlights, radar scope, perks ticker ---- */
.grad,.hl{background:linear-gradient(100deg,#F7D98B 0%,#E8A317 35%,#D1789A 65%,#A98BFF 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.grad{animation:shine 9s ease-in-out infinite alternate;padding-bottom:.06em}
.hl{font-weight:600}
@keyframes shine{to{background-position:100% 0}}
.scope-wrap{display:flex;justify-content:center}
.radar{display:block;width:min(100%,480px);height:auto;filter:drop-shadow(0 30px 50px rgba(0,0,0,.55))}
.ticker{overflow:hidden;border-bottom:1px solid var(--line);background:var(--bg2);padding:16px 0;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker .track{display:flex;width:max-content;animation:marquee 45s linear infinite}
.ticker:hover .track{animation-play-state:paused}
.ticker .row{display:flex;gap:12px;padding-right:12px}
@keyframes marquee{to{transform:translateX(-50%)}}
.pk{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;padding:9px 16px 9px 10px;border-radius:30px;background:var(--panel);border:1px solid var(--line);font-size:15px;color:#CED6DB}
.pk .pi{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--panel2);color:var(--cyan)}.pk .pi svg{width:16px;height:16px}
.pk .crown{width:15px;height:15px;color:var(--gold-t)}
.pk.pro-pk{border-color:#4A3D1C}.pk.pro-pk .pi{color:var(--gold-t);background:#262219}
@media (prefers-reduced-motion:reduce){.ticker .track{animation:none}}
/* ---- calmer hero + app preview ---- */
.grad{animation:none!important;background-position:0 0}
.hero{padding:64px 0 72px}
.ticker .track{animation-duration:80s}
.ticker{background:var(--bg);border-top:1px solid var(--line)}
.show{padding:84px 0 88px;background:var(--bg2)}
.demo-wrap{border-radius:14px;border:1px solid var(--line2);overflow:hidden;box-shadow:0 40px 80px -40px rgba(0,0,0,.8);background:#161b20}
.demo{display:block;width:100%;height:auto}
.demo .scene{opacity:0;transition:opacity .7s ease;pointer-events:none}
.demo .sc-tab{opacity:0;transition:opacity .4s}
.demo-wrap[data-scene="0"] .scene[data-s="0"],.demo-wrap[data-scene="1"] .scene[data-s="1"],.demo-wrap[data-scene="2"] .scene[data-s="2"]{opacity:1}
.demo-wrap[data-scene="0"] .sc-a,.demo-wrap[data-scene="1"] .sc-b,.demo-wrap[data-scene="2"] .sc-c{opacity:1}
.demo .pop,.demo .drop,.demo .bar,.demo .fill,.demo .draw,.demo .heat{transform-box:fill-box}
.run .pop{animation:dpop .5s ease both;animation-delay:var(--d,0s)}
.run .pop.d2{--d:.35s}.run .pop.d3{--d:.7s}.run .pop.d4{--d:1.05s}
.run .drop{animation:ddrop .55s cubic-bezier(.2,1.4,.4,1) both;animation-delay:var(--d,0s)}
.run .bar{transform-origin:50% 100%;animation:dbar .7s ease-out both;animation-delay:var(--d,0s)}
.run .fill{transform-origin:0 50%;animation:dfill 3.2s ease-in-out .9s both}
.run .draw{stroke-dasharray:1;animation:ddraw 1.6s ease-in-out 2.2s both}
.run .heat{animation:dheat 1.6s ease both}
.run .drift{animation:ddrift 9s linear infinite alternate}
.run .pulse{animation:dpulse 2.4s ease-in-out infinite}
@keyframes dpop{from{opacity:0;transform:translateY(6px)}}
@keyframes ddrop{from{opacity:0;transform:translateY(-18px)}}
@keyframes dbar{from{transform:scaleY(0)}}
@keyframes dfill{from{transform:scaleX(0)}}
@keyframes ddraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes dheat{from{opacity:0}}
@keyframes ddrift{from{transform:translate(-26px,18px)}to{transform:translate(26px,-14px)}}
@keyframes dpulse{50%{stroke-opacity:.45}}
.dtabs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
@media(max-width:760px){.dtabs{grid-template-columns:1fr;gap:8px}.dtab span{display:none}}
.dtab{position:relative;text-align:left;background:transparent;border:0;border-top:2px solid var(--line2);padding:14px 4px 4px;color:var(--mut);cursor:pointer;font:15px/1.45 var(--body)}
.dtab b{display:block;color:#C9D2D8;font-weight:600;font-size:16px;margin-bottom:3px}
.dtab span{font-size:14.5px}
.dtab i{position:absolute;left:0;top:-2px;height:2px;width:0;background:var(--amber)}
.dtab.on b{color:#fff}.dtab.on i{width:100%}
.dtab.on.timing i{width:0;animation:dprog var(--dur,9s) linear forwards}
@keyframes dprog{to{width:100%}}
.dtab:hover b{color:#fff}
@media (prefers-reduced-motion:reduce){.run *{animation:none!important}}
.dtab{display:flex;flex-direction:column;justify-content:flex-start}
/* ---- app preview from real screenshots ---- */
.demo-wrap .chrome{display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;background:#20272e;border-bottom:1px solid #2f3a43}
.demo-wrap .chrome span{width:10px;height:10px;border-radius:50%;background:#3a4652}
.demo-wrap .chrome em{margin:0 auto;font:normal 12px var(--body);color:#8b97a1;background:#161b20;border-radius:10px;padding:2px 16px;transform:translateX(-24px)}
.demo-wrap .frames{position:relative;aspect-ratio:1440/900;background:#161b20}
.demo-wrap .scene{position:absolute;inset:0;opacity:0;transition:opacity .7s ease}
.demo-wrap[data-scene="0"] .scene[data-s="0"],.demo-wrap[data-scene="1"] .scene[data-s="1"],.demo-wrap[data-scene="2"] .scene[data-s="2"],.demo-wrap[data-scene="3"] .scene[data-s="3"]{opacity:1}
.demo-wrap .fr{position:absolute;inset:0;width:100%;height:100%;display:block}
.demo-wrap .f2{opacity:0}
.demo-wrap .scene.run .f2{animation:frin .9s ease 4.6s both}
@keyframes frin{from{opacity:0}to{opacity:1}}
.dtabs{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.dtabs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.dtabs{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.demo-wrap .scene.run .f2{animation:none;opacity:0}}

/* ---- password strength + code entry ---- */
.pwm{display:flex;gap:5px;margin-top:9px}.pwm i{flex:1;height:5px;border-radius:3px;background:var(--line2);transition:background .2s}
.pwm[data-s="0"] i.on{background:#E5484D}.pwm[data-s="1"] i.on{background:#E8833A}.pwm[data-s="2"] i.on{background:#E8C417}.pwm[data-s="3"] i.on{background:#5DBB78}.pwm[data-s="4"] i.on{background:#3FCF8E}
.pwl{font-size:14px;margin-top:6px;min-height:20px;color:var(--mut)}
.pwl .s0{color:#F08A8D}.pwl .s1{color:#F0A267}.pwl .s2{color:#E8C417}.pwl .s3{color:#7FCF95}.pwl .s4{color:#3FCF8E}.pwl b{font-weight:600}
.codein{font:600 30px/1 var(--body)!important;letter-spacing:.45em;text-align:center;padding:14px 10px!important}
.pwtoggle{float:right;font-size:14px;font-weight:500;color:var(--mut);cursor:pointer;background:none;border:0;padding:0}