:root{
  --orange:#ff6a00;
  --orange2:#ff8a2a;
  --black:#0a0a0a;
  --black2:#101010;
  --panel:#151515;
  --panel2:#1a1a1a;
  --line:#2b2b2b;
  --text:#f7f7f5;
  --muted:#9d9d9a;
  --soft:#d4d4cf;
  --green:#72d68a;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--black);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}
a{text-decoration:none;color:inherit}
button{font:inherit}
.container{width:min(1180px,calc(100% - 42px));margin:auto}
.nav{position:sticky;top:0;z-index:50;background:rgba(10,10,10,.88);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.08)}
.navrow{height:72px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:900;letter-spacing:-.5px}
.mark{width:31px;height:31px;border-radius:9px;background:var(--orange);display:grid;place-items:center;box-shadow:0 0 0 1px rgba(255,255,255,.08) inset}
.mark:before{content:"HP";font-size:10px;color:#fff;font-weight:1000;letter-spacing:-1px}
.navlinks{display:flex;align-items:center;gap:30px;color:#b9b9b5;font-size:14px;font-weight:650}
.navlinks a:hover{color:#fff}
.navright{display:flex;align-items:center;gap:10px}
.btn{border:0;border-radius:11px;padding:12px 18px;font-weight:800;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn:hover{transform:translateY(-1px)}
.btn-orange{background:var(--orange);color:white;box-shadow:0 8px 30px rgba(255,106,0,.22)}
.btn-dark{background:#161616;color:white;border:1px solid #343434}
.btn-ghost{background:transparent;color:#ddd}
.hero{padding:90px 0 70px;position:relative}
.hero:before{content:"";position:absolute;left:50%;top:-180px;width:760px;height:520px;transform:translateX(-50%);background:radial-gradient(circle,rgba(255,106,0,.16),transparent 68%);pointer-events:none}
.badge{width:max-content;margin:0 auto 22px;border:1px solid rgba(255,106,0,.35);background:rgba(255,106,0,.08);color:#ff9a50;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:800;letter-spacing:.2px}
.hero-copy{text-align:center;position:relative;z-index:1}
.hero h1{font-size:clamp(48px,6vw,78px);line-height:.99;letter-spacing:-4.2px;max-width:980px;margin:0 auto 24px;font-weight:950}
.hero h1 .accent{color:var(--orange)}
.hero p{max-width:720px;margin:0 auto;color:#b1b1ad;font-size:20px;line-height:1.6}
.actions{display:flex;justify-content:center;gap:12px;margin:34px 0 52px}
.micro{display:flex;justify-content:center;gap:24px;color:#82827f;font-size:12px;margin-top:-36px;margin-bottom:42px}
.micro span:before{content:"✓";color:var(--orange);margin-right:6px;font-weight:900}
.app-shell{max-width:1110px;margin:0 auto;border:1px solid #2c2c2c;background:#0e0e0e;border-radius:22px;padding:10px;box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 1px rgba(255,106,0,.03);position:relative}
.app{border:1px solid #262626;background:#111;border-radius:15px;min-height:560px;display:grid;grid-template-columns:190px 1fr;overflow:hidden}
.sidebar{background:#0c0c0c;border-right:1px solid #262626;padding:20px 14px}
.sidebrand{display:flex;align-items:center;gap:8px;font-weight:850;font-size:13px;margin-bottom:24px}.sidebrand .mark{width:23px;height:23px;border-radius:7px}.sidebrand .mark:before{font-size:8px}
.navitem{padding:10px 11px;border-radius:8px;color:#8f8f8b;font-size:12px;margin:3px 0;display:flex;align-items:center;gap:9px}.navitem.active{background:#1b1b1b;color:#fff}.navdot{width:16px;height:16px;border:1px solid #3b3b3b;border-radius:4px}.navitem.active .navdot{border-color:var(--orange);background:rgba(255,106,0,.16)}
.mainapp{padding:22px 24px 30px}.appbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.appbar h3{margin:0;font-size:17px}.today{font-size:11px;color:#83837f}.newbtn{background:var(--orange);border:0;color:white;padding:8px 11px;border-radius:8px;font-size:11px;font-weight:850}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}.stat{background:#171717;border:1px solid #292929;border-radius:10px;padding:14px}.stat small{color:#7f7f7a;font-size:10px}.stat strong{display:block;font-size:21px;margin-top:6px;letter-spacing:-.8px}.up{color:var(--green);font-size:9px;margin-left:5px}
.pipeline{background:#151515;border:1px solid #292929;border-radius:12px;padding:14px}.ptop{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}.ptop b{font-size:12px}.pill{font-size:9px;border:1px solid #333;padding:5px 7px;border-radius:999px;color:#92928f}
.cols{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.col{background:#101010;border:1px solid #242424;border-radius:9px;padding:9px;min-height:260px}.colhead{display:flex;justify-content:space-between;font-size:9px;color:#9a9a97;margin-bottom:8px;text-transform:uppercase;letter-spacing:.7px}.count{background:#242424;border-radius:99px;padding:1px 5px;color:#c7c7c2}.job{background:#191919;border:1px solid #2a2a2a;border-radius:8px;padding:10px;margin-bottom:8px}.job b{font-size:10px;display:block;margin-bottom:4px}.job span{font-size:8px;color:#7f7f7b}.job .money{color:#fff;float:right;font-weight:800}.job.orange{border-color:rgba(255,106,0,.45);box-shadow:0 0 0 1px rgba(255,106,0,.04) inset}.rec-tag{font-size:7px!important;color:#ff9a50!important;background:rgba(255,106,0,.12);padding:3px 5px;border-radius:4px;display:inline-block;margin-top:6px}
.ribbon{border-top:1px solid #222;border-bottom:1px solid #222;padding:24px 0;overflow:hidden;background:#0d0d0d}.ribbon-label{text-align:center;color:#666;font-size:10px;font-weight:850;letter-spacing:1.8px;margin-bottom:16px}.marquee{overflow:hidden;mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}.track{display:flex;width:max-content;animation:scroll 24s linear infinite;gap:42px}.tag{color:#6f6f6c;font-size:15px;font-weight:850;white-space:nowrap}.tag i{display:inline-block;width:7px;height:7px;background:var(--orange);border-radius:50%;margin-right:8px}@keyframes scroll{to{transform:translateX(-50%)}}
.section{padding:96px 0;border-top:1px solid #1f1f1f}.kicker{color:var(--orange);text-transform:uppercase;letter-spacing:1.5px;font-size:11px;font-weight:900;margin-bottom:12px}.section h2{font-size:clamp(34px,4vw,54px);letter-spacing:-2.6px;line-height:1.04;margin:0 0 16px}.section-intro{max-width:660px;color:#9c9c98;font-size:18px;line-height:1.6;margin:0}.center{text-align:center;margin-left:auto;margin-right:auto}.whygrid{display:grid;grid-template-columns:1.1fr .9fr;gap:54px;align-items:center;margin-top:54px}.whycards{display:grid;grid-template-columns:1fr;gap:12px}.whycard{border:1px solid #2a2a2a;background:#131313;border-radius:14px;padding:20px}.whycard strong{font-size:16px}.whycard p{color:#878783;font-size:13px;line-height:1.55;margin:8px 0 0}.metricbox{border:1px solid #303030;background:linear-gradient(145deg,#151515,#0e0e0e);border-radius:20px;padding:24px;box-shadow:0 25px 60px rgba(0,0,0,.35)}.metric-top{display:flex;justify-content:space-between;align-items:start;margin-bottom:22px}.metric-top small{color:#81817d}.metric-top strong{display:block;font-size:34px;margin-top:6px}.orangechip{background:rgba(255,106,0,.12);color:#ff9a50;border:1px solid rgba(255,106,0,.25);font-size:9px;padding:6px 8px;border-radius:999px}.bars{height:180px;display:flex;align-items:end;gap:9px;border-bottom:1px solid #2b2b2b;padding:0 4px}.bar{width:100%;background:#2b2b2b;border-radius:5px 5px 0 0;position:relative;transform:scaleY(0);transform-origin:bottom;transition:transform .75s cubic-bezier(.2,.8,.2,1)}.bar:nth-child(2){transition-delay:.08s}.bar:nth-child(3){transition-delay:.16s}.bar:nth-child(4){transition-delay:.24s}.bar:nth-child(5){transition-delay:.32s}.bar:nth-child(6){transition-delay:.4s}.bar:nth-child(7){transition-delay:.48s}.metricbox.is-visible .bar{transform:scaleY(1)}.bar.orange{background:linear-gradient(#ff8a2a,#ff6a00)}.months{display:flex;justify-content:space-around;color:#666;font-size:8px;margin-top:9px}.metricfoot{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}.mini{background:#111;border:1px solid #252525;border-radius:9px;padding:11px}.mini span{font-size:8px;color:#777}.mini b{display:block;margin-top:4px;font-size:14px}
.featuregrid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;margin-top:50px}.feature{background:#131313;border:1px solid #282828;border-radius:18px;padding:24px;overflow:hidden;min-height:280px;position:relative}.feature h3{margin:0 0 8px;font-size:21px;letter-spacing:-.6px}.feature p{color:#8f8f8b;line-height:1.55;font-size:13px;margin:0;max-width:420px}.span7{grid-column:span 7}.span5{grid-column:span 5}.span6{grid-column:span 6}.featurevisual{margin-top:24px;border:1px solid #2b2b2b;background:#0e0e0e;border-radius:12px;padding:12px;min-height:145px}.flowrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.node{background:#191919;border:1px solid #303030;border-radius:9px;padding:10px 12px;font-size:10px;color:#ccc}.node.active{border-color:rgba(255,106,0,.55);background:rgba(255,106,0,.09);color:#fff}.arrow{color:#555;font-size:12px}.autoline{display:flex;align-items:center;gap:9px;padding:9px;border-bottom:1px solid #222;font-size:9px}.autoline:last-child{border-bottom:0}.autoicon{width:24px;height:24px;border-radius:7px;background:rgba(255,106,0,.12);color:var(--orange);display:grid;place-items:center;font-weight:900}.autoend{margin-left:auto;color:#6c6c68}.portalcard{background:#f3f3ef;color:#151515;border-radius:10px;padding:14px}.portalcard .portalhead{display:flex;justify-content:space-between;font-size:10px;font-weight:850}.portalservice{display:flex;align-items:center;justify-content:space-between;background:white;border:1px solid #ddd;border-radius:8px;padding:10px;margin-top:9px}.portalservice b{font-size:9px}.portalservice span{font-size:8px;color:#777}.add{background:var(--orange);color:white;border:0;border-radius:6px;padding:6px 8px;font-size:8px;font-weight:850}.insightsgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.ibox{border:1px solid #292929;background:#171717;border-radius:8px;padding:10px}.ibox span{font-size:8px;color:#777}.ibox b{display:block;font-size:16px;margin-top:4px}.tinyline{height:30px;margin-top:7px;display:flex;align-items:end;gap:3px}.tinyline i{display:block;width:100%;background:#333;border-radius:2px}.tinyline i:last-child,.tinyline i:nth-last-child(2){background:var(--orange)}
.map{height:160px;position:relative;overflow:hidden;background:#0d0d0d;border-radius:10px}.road{position:absolute;height:1px;background:#292929;width:130%;transform:rotate(-16deg);left:-20%;top:45%}.road.r2{transform:rotate(26deg);top:66%}.road.r3{transform:rotate(4deg);top:24%}.pin{position:absolute;width:14px;height:14px;border-radius:50% 50% 50% 0;background:#555;transform:rotate(-45deg);border:2px solid #111}.pin.orange{background:var(--orange)}.pin:nth-of-type(4){left:20%;top:38%}.pin:nth-of-type(5){left:34%;top:60%}.pin:nth-of-type(6){left:52%;top:28%}.pin:nth-of-type(7){left:67%;top:55%}.pin:nth-of-type(8){left:80%;top:34%}.legend{display:flex;gap:12px;margin-top:10px;font-size:8px;color:#797975}.legend b:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#555;margin-right:5px}.legend b.o:before{background:var(--orange)}
.moregrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}.more{background:#121212;border:1px solid #272727;border-radius:14px;padding:18px}.more .mi{width:32px;height:32px;border-radius:8px;background:rgba(255,106,0,.11);color:var(--orange);display:grid;place-items:center;font-size:13px;font-weight:900;margin-bottom:14px}.more b{font-size:13px}.more p{font-size:11px;color:#787874;line-height:1.5;margin:7px 0 0}
.pricingwrap{max-width:760px;margin:45px auto 0}.pricecard{background:#131313;border:1px solid rgba(255,106,0,.4);border-radius:20px;padding:30px;position:relative;box-shadow:0 0 0 1px rgba(255,106,0,.03) inset}.pricecard .label{position:absolute;top:18px;right:18px;background:rgba(255,106,0,.12);color:#ff9a50;border:1px solid rgba(255,106,0,.24);padding:6px 8px;border-radius:999px;font-size:9px;font-weight:850}.pricecard h3{font-size:24px;margin:0 0 8px}.pricecard>p{color:#858581;margin:0 0 22px}.pricefeatures{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:22px 0}.pricefeatures span{font-size:12px;color:#bdbdb8}.pricefeatures span:before{content:"✓";color:var(--orange);font-weight:900;margin-right:7px}
.faq{max-width:820px;margin:40px auto 0}.faq details{border-top:1px solid #292929;padding:18px 2px}.faq details:last-child{border-bottom:1px solid #292929}.faq summary{cursor:pointer;font-weight:750;list-style:none}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:"+";float:right;color:var(--orange);font-size:20px}.faq details[open] summary:after{content:"−"}.faq p{color:#8f8f8b;line-height:1.6;font-size:13px;max-width:720px}
.final{padding:85px 0}.finalbox{border:1px solid #2d2d2d;background:radial-gradient(circle at 50% 0,rgba(255,106,0,.13),transparent 56%),#111;border-radius:24px;text-align:center;padding:65px 20px}.finalbox h2{font-size:clamp(36px,5vw,60px);margin:0 0 14px;letter-spacing:-3px}.finalbox p{color:#92928e;max-width:600px;margin:0 auto 28px;font-size:16px;line-height:1.6}
footer{border-top:1px solid #202020;padding:34px 0 50px;color:#747470}.footerrow{display:flex;justify-content:space-between;align-items:center}.footerlinks{display:flex;gap:22px;font-size:12px}.copyright{font-size:11px}
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:100;align-items:center;justify-content:center;padding:18px}.modal.show{display:flex}.modalbox{width:min(500px,100%);background:#131313;border:1px solid #333;border-radius:18px;padding:24px}.modalbox h3{margin:0 0 6px;font-size:25px}.modalbox p{margin:0 0 16px;color:#8f8f8b;font-size:13px}.close{float:right;border:0;background:none;color:#aaa;font-size:25px;cursor:pointer}.field{width:100%;background:#0d0d0d;color:#fff;border:1px solid #303030;border-radius:9px;padding:12px 13px;margin:6px 0;outline:none}.field:focus{border-color:var(--orange)}
@media(max-width:940px){.navlinks{display:none}.hero{padding-top:65px}.app{grid-template-columns:1fr}.sidebar{display:none}.stats{grid-template-columns:repeat(2,1fr)}.cols{grid-template-columns:repeat(2,1fr)}.whygrid{grid-template-columns:1fr}.span7,.span5,.span6{grid-column:span 12}.moregrid{grid-template-columns:1fr 1fr}.featuregrid{grid-template-columns:repeat(12,1fr)}}
@media(max-width:620px){.container{width:min(100% - 28px,1180px)}.hero h1{letter-spacing:-2.6px}.hero p{font-size:16px}.actions{flex-direction:column}.actions .btn{width:100%}.micro{gap:10px;flex-wrap:wrap}.app-shell{padding:6px;border-radius:16px}.mainapp{padding:14px 12px}.stats{grid-template-columns:1fr 1fr}.cols{grid-template-columns:1fr}.col:nth-child(n+3){display:none}.section{padding:70px 0}.section-intro{font-size:16px}.moregrid{grid-template-columns:1fr}.pricefeatures{grid-template-columns:1fr}.footerrow{align-items:flex-start;gap:24px;flex-direction:column}.navright .btn-ghost{display:none}}

/* ===== 2026 LIGHT HERO + ALTERNATING FEATURES REDESIGN ===== */
:root{--paper:#fbfbfa;--ink:#101010;--paper-muted:#666b70;--paper-line:#e7e7e3;--orange:#ff5a0a;--orange2:#ff7a1a}
body{background:#0a0a0a}
.nav{background:#181818;border-bottom:0;box-shadow:0 1px 0 rgba(255,255,255,.04)}
.navrow{height:76px}
.nav .container{width:min(1180px,calc(100% - 42px))}
.nav .brand{font-size:21px}.nav .mark{width:34px;height:34px;border-radius:10px}
.navlinks{gap:42px;color:#d3d3d0}.navright{gap:18px}.navright .btn-orange{padding:13px 22px}

.hero-light{position:relative;background:linear-gradient(180deg,#fff 0%,#fbfbfa 72%,#f8f8f5 100%);color:var(--ink);padding:64px 0 28px;overflow:hidden}
.hero-light:before,.hero-light:after{content:"";position:absolute;pointer-events:none;border-radius:50%;filter:blur(0)}
.hero-light:before{width:820px;height:820px;right:-260px;top:-330px;background:radial-gradient(circle,rgba(255,90,10,.11),rgba(255,90,10,.025) 42%,transparent 68%)}
.hero-light:after{width:1200px;height:340px;left:-280px;bottom:-190px;border:1px solid #f0f0ed;box-shadow:0 0 0 70px rgba(245,245,242,.45),0 0 0 140px rgba(248,248,246,.7);transform:rotate(-6deg)}
.hero-layout{display:grid;grid-template-columns:1.04fr .96fr;gap:42px;align-items:center;position:relative;z-index:2;min-height:460px}
.hero-left{padding-top:12px}
.hero-badge{display:inline-flex;align-items:center;gap:9px;background:#f1f2f2;border:1px solid #e6e7e7;color:#272727;border-radius:999px;padding:8px 13px;font-size:12px;font-weight:800;margin-bottom:25px}
.hero-badge .bolt{color:var(--orange);font-size:18px;line-height:1}
.hero-light h1{font-size:clamp(42px,3.7vw,46px);line-height:1.04;letter-spacing:-3px;margin:0 0 22px;font-weight:950;max-width:760px}
.hero-light h1 .accent{display:block;color:var(--orange)}
.hero-light .lead{font-size:20px;line-height:1.55;color:#666b70;max-width:650px;margin:0}
.hero-actions{display:flex;gap:16px;margin:32px 0 30px}.hero-actions .btn{min-width:178px;padding:16px 22px;font-size:15px;border-radius:10px}
.hero-actions .btn-outline{background:#fff;color:#171717;border:2px solid #1c1c1c;box-shadow:0 3px 0 rgba(0,0,0,.03)}
.hero-micro{display:flex;gap:24px;flex-wrap:wrap;color:#5e6367;font-size:12px;font-weight:650}.hero-micro span:before{content:"✓";color:var(--orange);margin-right:8px;font-weight:950;font-size:16px}
.hero-product-wrap{position:relative;display:flex;align-items:flex-start;justify-content:flex-end;padding-top:4px;min-height:430px}
.hero-product-glow{position:absolute;width:360px;height:360px;right:110px;top:55px;border-radius:50%;background:rgba(255,104,32,.11)}
.hero-dots{position:absolute;width:120px;height:120px;background-image:radial-gradient(rgba(255,90,10,.35) 1.5px,transparent 1.5px);background-size:15px 15px;right:470px;top:38px;opacity:.8}
.hero-app-shell{position:relative;width:640px;max-width:100%;margin-top:16px;border:1px solid #343434;background:#0e0e0e;border-radius:18px;padding:7px;box-shadow:0 22px 55px rgba(0,0,0,.22),0 0 0 1px rgba(255,90,10,.03);z-index:2;transform:translateX(18px)}
.hero-app{border:1px solid #272727;background:#111;border-radius:12px;min-height:355px;display:grid;grid-template-columns:130px 1fr;overflow:hidden}
.hero-sidebar{background:#0c0c0c;border-right:1px solid #292929;padding:14px 10px}.hero-sidebrand{display:flex;align-items:center;gap:6px;font-weight:850;font-size:9px;margin-bottom:14px}.hero-sidebrand .mark{width:17px;height:17px;border-radius:5px}.hero-sidebrand .mark:before{font-size:6px}
.hero-navitem{padding:6px 7px;border-radius:6px;color:#858581;font-size:8px;margin:2px 0;display:flex;align-items:center;gap:6px}.hero-navitem.active{background:#202020;color:#fff}.hero-navdot{width:10px;height:10px;border:1px solid #454545;border-radius:3px}.hero-navitem.active .hero-navdot{border-color:var(--orange);background:rgba(255,90,10,.14)}
.hero-mainapp{padding:14px 15px 16px}.hero-appbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px}.hero-appbar h3{margin:0;font-size:12px}.hero-today{font-size:7px;color:#858581}.hero-newbtn{background:var(--orange);border:0;color:#fff;padding:6px 8px;border-radius:6px;font-size:7px;font-weight:850}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:9px}.hero-stat{background:#171717;border:1px solid #2a2a2a;border-radius:7px;padding:8px}.hero-stat small{color:#81817d;font-size:6px}.hero-stat strong{display:block;font-size:13px;margin-top:3px;letter-spacing:-.4px}.hero-up{color:#74d88c;font-size:6px;margin-left:3px}
.hero-pipeline{background:#151515;border:1px solid #292929;border-radius:8px;padding:8px}.hero-ptop{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.hero-ptop b{font-size:8px}.hero-pill{font-size:6px;border:1px solid #333;padding:3px 5px;border-radius:999px;color:#92928f}
.hero-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.hero-col{background:#101010;border:1px solid #242424;border-radius:6px;padding:5px;min-height:150px}.hero-colhead{display:flex;justify-content:space-between;font-size:6px;color:#999;margin-bottom:5px;text-transform:uppercase;letter-spacing:.35px}.hero-count{background:#242424;border-radius:99px;padding:1px 4px;color:#c7c7c2}.hero-job{background:#191919;border:1px solid #2a2a2a;border-radius:6px;padding:6px;margin-bottom:5px}.hero-job b{font-size:6.5px;display:block;margin-bottom:3px}.hero-job span{font-size:5.5px;color:#7f7f7b}.hero-job .money{color:#fff;float:right;font-weight:800}.hero-job.orange{border-color:rgba(255,90,10,.55)}.hero-rec-tag{font-size:4.8px!important;color:#ff9a50!important;background:rgba(255,90,10,.12);padding:2px 3px;border-radius:3px;display:inline-block;margin-top:3px}
.floating-stat{position:absolute;z-index:4;display:flex;align-items:center;gap:11px;background:#fff;color:#171717;border:1px solid #ecece8;border-radius:14px;padding:11px 16px;box-shadow:0 18px 40px rgba(0,0,0,.14);font-weight:800;line-height:1.1;white-space:nowrap}.stat-copy{display:flex;flex-direction:column;gap:3px;min-width:0}.floating-stat b{font-size:17px;letter-spacing:-.3px}.floating-stat small{color:#5e6367;font-weight:650;font-size:11.5px}.fs-leads{left:-26px;bottom:78px}.fs-agree{right:-22px;bottom:26px}.fs-agree b{font-size:23px;color:var(--orange)}.fs-agree small{font-size:11px;color:#313131}.stat-icon{flex:0 0 auto;display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#e9f8ea;color:#52b76c}.stat-bars{flex:0 0 auto;display:inline-flex;align-items:end;gap:3px;width:31px;height:28px}.stat-bars i{width:6px;background:var(--orange);border-radius:5px}.stat-bars i:nth-child(1){height:9px}.stat-bars i:nth-child(2){height:18px}.stat-bars i:nth-child(3){height:27px}
.hero-note{position:absolute;right:-10px;top:-30px;color:var(--orange);font-weight:800;font-size:13px;transform:rotate(-5deg);z-index:5}.hero-note:after{content:"↙";display:block;font-size:30px;line-height:1;margin-left:-8px;margin-top:-3px}

.hero-authority{position:relative;z-index:3;margin-top:2px}.authority-card{background:rgba(255,255,255,.72);border:1px solid #ecece8;border-radius:22px;padding:16px 18px 14px;box-shadow:0 16px 40px rgba(0,0,0,.06);backdrop-filter:blur(8px)}.authority-top{text-align:center;color:#858784;font-size:11px;font-weight:900;letter-spacing:1.7px;margin-bottom:14px}.logo-marquee{overflow:hidden;mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}.logo-track{display:flex;align-items:center;gap:18px;width:max-content;animation:scroll 28s linear infinite}.logo-pill{display:flex;align-items:center;justify-content:center;min-width:184px;height:62px;padding:12px 22px;background:#fff;border:1px solid #ededea;border-radius:16px;box-shadow:0 8px 18px rgba(0,0,0,.04)}.logo-pill img{max-width:132px;max-height:28px;display:block;object-fit:contain;filter:none}

@media(prefers-reduced-motion:reduce){.logo-track{animation:none}.bar{transition:none;transform:scaleY(1)}}

.features-light{background:#fbfbfa;color:#111;padding:92px 0 110px;border-top:0}
.features-light .features-head{text-align:center;max-width:800px;margin:0 auto 72px}.features-light .feature-badge{display:inline-flex;align-items:center;gap:8px;background:#f1f2f2;border:1px solid #e7e7e5;color:#2b2b2b;border-radius:999px;padding:7px 12px;font-size:10px;font-weight:850;margin-bottom:18px}.features-light .feature-badge b{color:var(--orange);font-size:15px}.features-light h2{font-size:clamp(40px,4.6vw,62px);letter-spacing:-3.2px;line-height:1.02;margin:0 0 12px}.features-light h2 .accent{color:var(--orange)}.features-sub{color:#667078;font-size:17px;line-height:1.5;max-width:700px;margin:0 auto}
.feature-rows{display:flex;flex-direction:column;gap:68px}.feature-row{display:grid;grid-template-columns:minmax(280px,.88fr) minmax(0,1.12fr);gap:64px;align-items:center;min-height:330px}.feature-row.reverse{grid-template-columns:minmax(0,1fr) minmax(280px,.84fr)}.feature-copy{padding:12px 0}.feature-num{display:flex;align-items:center;gap:12px;color:var(--orange);font-size:12px;font-weight:900;margin-bottom:14px}.feature-num:after{content:"";width:22px;height:1px;background:var(--orange)}.feature-copy h3{font-size:32px;letter-spacing:-1.4px;margin:0 0 10px}.feature-copy p{font-size:16px;line-height:1.55;color:#606a72;margin:0;max-width:525px}
.product-shot{position:relative;width:100%;max-width:560px;justify-self:start;border:1px solid #222;background:#111;border-radius:14px;padding:7px;box-shadow:0 16px 34px rgba(0,0,0,.14),0 0 0 1px rgba(255,90,10,.05);overflow:visible}.product-shot:before{content:"";position:absolute;width:100px;height:100px;left:-45px;top:-35px;background-image:radial-gradient(rgba(255,90,10,.35) 1.3px,transparent 1.3px);background-size:13px 13px;z-index:-1}.lead-shot,.workflow-shot{max-width:728px}.map-shot,.portal-shot{max-width:560px}.feature-row:not(.reverse) .product-shot{justify-self:end}.feature-row.reverse .product-shot{justify-self:start}.shot-inner{height:286px;border-radius:9px;overflow:hidden;background:#f7f7f6;display:grid;grid-template-columns:115px 1fr}.shot-sidebar{background:#111315;color:#979a9a;padding:12px 9px}.shot-brand{display:flex;align-items:center;gap:6px;color:#fff;font-size:8px;font-weight:850;margin-bottom:12px}.shot-brand .mark{width:17px;height:17px;border-radius:5px}.shot-brand .mark:before{font-size:6px}.shot-nav{padding:6px 7px;border-radius:5px;font-size:7px;margin:2px 0;display:flex;align-items:center;gap:5px}.shot-nav.active{background:var(--orange);color:#fff}.shot-nav:before{content:"○";font-size:9px}.shot-main{background:#fff;color:#1b1b1b;padding:13px;overflow:hidden}.shot-top{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ededeb;padding-bottom:8px;margin-bottom:10px}.shot-search{background:#f5f5f3;border:1px solid #e5e5e2;color:#999;border-radius:5px;padding:6px 9px;font-size:6px;min-width:170px}.avatar{width:21px;height:21px;border-radius:50%;background:#f0f0ed;display:grid;place-items:center;font-size:6px;font-weight:800}.lead-layout{display:grid;grid-template-columns:1fr 116px;gap:12px}.lead-form h4,.portal-main h4{margin:0 0 8px;font-size:12px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.formfield label{display:block;font-size:6px;color:#606060;margin-bottom:3px}.formbox{border:1px solid #dededa;border-radius:4px;padding:6px;color:#aaa;font-size:6px;background:#fff}.formfield.full{grid-column:span 2}.lead-detail{background:#f8f9f9;border:1px solid #e4e4e1;border-radius:7px;padding:10px}.lead-detail b{font-size:8px}.detail-line{font-size:6px;color:#6c6c68;border-bottom:1px solid #e5e5e3;padding:7px 0}.save-lead{width:100%;border:0;background:var(--orange);color:#fff;border-radius:5px;padding:7px;font-size:7px;font-weight:850;margin-top:10px}

.map-shot .shot-inner{grid-template-columns:115px 1fr}.map-main{position:relative;background:#ecebe7;overflow:hidden}.map-gridline{position:absolute;background:#fff;opacity:.96}.map-gridline.h1{left:0;right:0;height:9px;top:35%}.map-gridline.h2{left:0;right:0;height:7px;top:68%}.map-gridline.v1{top:0;bottom:0;width:8px;left:28%}.map-gridline.v2{top:0;bottom:0;width:7px;left:64%}.map-road{position:absolute;width:110%;height:10px;background:#fff;left:-5%;top:52%;transform:rotate(-9deg);box-shadow:0 0 0 1px #ddd}.park{position:absolute;background:#cbeebd;border-radius:18px;opacity:.9}.park.p1{width:92px;height:54px;left:10%;top:55%}.park.p2{width:70px;height:45px;right:8%;top:20%}.map-filters{position:absolute;top:9px;left:10px;display:flex;gap:5px;z-index:4}.filterchip{background:#fff;border:1px solid #ddd;border-radius:5px;padding:5px 7px;font-size:6px;box-shadow:0 2px 7px rgba(0,0,0,.05)}.map-pin{position:absolute;width:10px;height:10px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#2e86ff;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.25)}.map-pin.o{background:var(--orange)}.map-pin.g{background:#20b46a}.map-pin.p{background:#7a4de8}.map-popup{position:absolute;right:28px;top:104px;background:#fff;border-radius:7px;padding:9px 12px;width:150px;box-shadow:0 5px 18px rgba(0,0,0,.15);font-size:7px;z-index:4}.map-popup b{display:block;font-size:8px;margin-bottom:2px}.green-tag{display:inline-block;background:#e4f7e9;color:#2b9d50;border-radius:4px;padding:3px 5px;font-size:6px;margin-top:5px}

.workflow-main{background:#fff;color:#181818;padding:12px}.workflow-head{display:flex;justify-content:space-between;align-items:start;border-bottom:1px solid #eee;padding-bottom:8px}.workflow-head h4{font-size:11px;margin:0}.workflow-head p{font-size:6px;color:#727272;margin:2px 0 0}.active-chip{color:#2e9f55;background:#e7f8eb;border-radius:99px;padding:3px 5px;font-size:6px}.save-workflow{background:var(--orange);color:#fff;border:0;border-radius:5px;padding:6px 8px;font-size:6px;font-weight:850}.workflow-canvas{position:relative;height:206px;background-image:radial-gradient(#e2e2de 1px,transparent 1px);background-size:12px 12px;padding:24px 12px}.wf-row{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:2}.wf-row + .wf-row{margin-top:34px}.wf-node{width:79px;background:#fff;border:1px solid #deded9;border-radius:7px;padding:7px 5px;text-align:center;box-shadow:0 2px 7px rgba(0,0,0,.04)}.wf-icon{width:21px;height:21px;border-radius:50%;display:grid;place-items:center;background:#eef6ff;color:#277fe7;font-size:10px;margin:0 auto 4px}.wf-node:nth-child(1) .wf-icon{background:#eaf9ef;color:#2baa58}.wf-node:nth-child(3) .wf-icon{background:#fff2e8;color:var(--orange)}.wf-node:nth-child(4) .wf-icon{background:#f3ecff;color:#7645da}.wf-node b{display:block;font-size:6px}.wf-node span{font-size:5px;color:#777}.wf-arrow{color:#9b9b98;font-size:11px}.wf-connector{position:absolute;left:53px;right:53px;top:66px;border-top:1px solid #bfc3c3}.wf-down{position:absolute;right:48px;top:67px;height:57px;border-right:1px solid #bfc3c3;border-bottom:1px solid #bfc3c3;width:78%;border-radius:0 0 10px 0}

.portal-shot .shot-inner{grid-template-columns:115px 1fr}.portal-main{display:grid;grid-template-columns:1.15fr .85fr;gap:9px;background:#fff;padding:11px}.portal-card-ui,.insight-card-ui{border:1px solid #dededb;border-radius:8px;background:#fff;padding:10px}.portal-person{display:flex;gap:7px;align-items:center;border-bottom:1px solid #eee;padding-bottom:8px}.portal-person .face{width:24px;height:24px;border-radius:50%;background:#f1e6d8;display:grid;place-items:center;font-size:7px;font-weight:800}.portal-person b{font-size:8px;display:block}.portal-person span{font-size:5.5px;color:#777}.planbox{border:1px solid #e6e6e2;border-radius:6px;padding:8px;margin-top:9px}.planbox .active-chip{float:right}.planbox b{font-size:8px;display:block}.planbox small{font-size:5.5px;color:#777}.next-visit{color:#2baa58!important;font-weight:800}.quick-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:9px}.quick-actions div{border:1px solid #e5e5e1;border-radius:5px;padding:6px 3px;text-align:center;font-size:5.5px}.insight-head{display:flex;justify-content:space-between;font-size:8px;font-weight:800;margin-bottom:8px}.insight-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.insight-tile{border:1px solid #e7e7e3;border-radius:6px;padding:8px}.insight-tile b{font-size:13px;display:block}.insight-tile span{font-size:5.5px;color:#777}.insight-tile em{display:block;color:#31a85b;font-size:5.5px;font-style:normal;margin-top:4px}
.feature-more{margin-top:78px;border-top:1px solid #e5e5e1;padding-top:34px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.feature-more .more-lite{padding:0 10px}.more-lite .mi{width:34px;height:34px;border-radius:9px;background:#fff1e8;color:var(--orange);display:grid;place-items:center;font-weight:900;margin-bottom:12px}.more-lite b{font-size:14px}.more-lite p{font-size:12px;line-height:1.5;color:#70767a;margin:6px 0 0}

/* Dark section after light product story */
#why{background:#0a0a0a;border-top:0}.features-light + #why{border-top:0}

@media(max-width:1050px){.hero-layout{grid-template-columns:1fr;gap:20px}.hero-left{text-align:center;max-width:800px;margin:auto}.hero-badge{margin-left:auto;margin-right:auto}.hero-light h1{margin-left:auto;margin-right:auto}.hero-light .lead{margin:auto}.hero-actions,.hero-micro{justify-content:center}.hero-product-wrap{justify-content:center;min-height:420px}.hero-app-shell{transform:none;margin-top:18px}.hero-note{right:10px}.hero-authority{margin-top:12px}.feature-row,.feature-row.reverse{grid-template-columns:1fr;gap:26px}.feature-row.reverse .product-shot{order:2}.feature-row.reverse .feature-copy{order:1}.feature-copy{text-align:center}.feature-num{justify-content:center}.feature-copy p{margin:auto}.product-shot,.lead-shot,.workflow-shot,.map-shot,.portal-shot{width:100%;margin:auto}.lead-shot,.workflow-shot{max-width:760px}.map-shot,.portal-shot{max-width:620px}.feature-more{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.navlinks{display:none}.hero-light{padding-top:48px;padding-bottom:20px}.hero-light h1{font-size:49px;letter-spacing:-3px}.hero-light .lead{font-size:17px}.hero-actions{flex-direction:column}.hero-actions .btn{width:100%}.hero-micro{gap:10px 16px}.hero-product-wrap{min-height:380px;margin-top:12px}.hero-app-shell{width:min(620px,100%);transform:scale(.92);transform-origin:center top}.hero-note{display:none}.fs-leads{left:5px;bottom:65px;transform:scale(.82);transform-origin:left bottom}.fs-agree{right:0;bottom:38px;transform:scale(.82);transform-origin:right bottom}.hero-authority{margin-top:8px}.authority-card{padding:14px 12px 12px;border-radius:18px}.authority-top{font-size:9px;letter-spacing:1.3px;margin-bottom:10px}.logo-pill{min-width:146px;height:54px;padding:10px 16px}.logo-pill img{max-width:104px;max-height:22px}.features-light{padding:72px 0 85px}.features-light .features-head{margin-bottom:50px}.features-light h2{font-size:40px;letter-spacing:-2px}.feature-rows{gap:50px}.feature-copy h3{font-size:27px}.product-shot,.lead-shot,.workflow-shot,.map-shot,.portal-shot{max-width:100%;width:100%}.shot-inner{height:250px;grid-template-columns:90px 1fr}.shot-sidebar{padding:9px 6px}.shot-nav{font-size:6px}.feature-more{grid-template-columns:1fr}.portal-main{grid-template-columns:1fr}.insight-card-ui{display:none}.map-filters{flex-wrap:wrap;max-width:75%}.map-popup{right:12px;top:95px;width:118px;padding:7px 9px}.lead-layout{grid-template-columns:1fr 98px;gap:8px}.shot-search{min-width:0;width:70%}.workflow-canvas{padding:18px 8px;height:188px}.wf-node{width:63px;padding:6px 4px}.wf-arrow{font-size:9px}}
@media(max-width:520px){.hero-light h1{font-size:40px;letter-spacing:-2.4px}.hero-light .lead{font-size:15px}.hero-micro{font-size:12px}.hero-layout{min-height:auto}.hero-product-wrap{min-height:320px}.product-shot{padding:5px;border-radius:12px}.authority-card{padding:12px 10px 10px;border-radius:16px}.logo-track{gap:12px}.logo-pill{min-width:122px;height:48px;padding:8px 12px;border-radius:14px}.logo-pill img{max-width:88px;max-height:18px}.shot-inner{height:218px;grid-template-columns:72px 1fr}.shot-brand{font-size:7px;margin-bottom:8px}.shot-nav{padding:4px 5px;font-size:5.2px}.shot-search,.formbox,.formfield label,.detail-line,.workflow-head p,.wf-node span,.quick-actions div,.portal-person span,.insight-tile span,.insight-tile em{font-size:5px}.lead-form h4,.portal-main h4,.workflow-head h4{font-size:10px}.lead-layout{grid-template-columns:1fr 84px}.lead-detail{padding:7px}.save-lead,.save-workflow{font-size:6px;padding:6px}.map-popup{display:none}.filterchip{font-size:5px;padding:4px 6px}.workflow-canvas{height:165px;padding:14px 6px;background-size:10px 10px}.wf-node{width:54px;padding:5px 3px}.wf-icon{width:17px;height:17px;font-size:8px}.wf-connector{left:35px;right:35px;top:54px}.wf-down{top:55px;right:34px;height:48px}.portal-main{padding:8px}.portal-card-ui{padding:8px}.quick-actions{gap:4px}.insight-tile b{font-size:11px}}

/* Responsive polish for tablets and phones */
.authority-card{border-color:rgba(255,90,10,.24);background:linear-gradient(120deg,rgba(255,245,238,.96),rgba(243,250,255,.96) 45%,rgba(255,249,229,.96));box-shadow:0 18px 44px rgba(255,90,10,.13),0 8px 22px rgba(35,92,132,.08)}
.authority-top{color:#5e6367}
.logo-pill{border-color:rgba(255,255,255,.82);box-shadow:0 8px 22px rgba(24,30,38,.1),inset 0 1px 0 rgba(255,255,255,.9)}
.logo-pill:nth-child(5n+1){background:linear-gradient(135deg,#fff3ec,#fff)}
.logo-pill:nth-child(5n+2){background:linear-gradient(135deg,#edf8ff,#fff)}
.logo-pill:nth-child(5n+3){background:linear-gradient(135deg,#fff9df,#fff)}
.logo-pill:nth-child(5n+4){background:linear-gradient(135deg,#eef3ff,#fff)}
.logo-pill:nth-child(5n+5){background:linear-gradient(135deg,#f4efff,#fff)}
.logo-pill img[alt="Mapbox"]{max-width:146px;max-height:32px}

@media(max-width:1050px){
  .container,.nav .container{width:min(100% - 48px,920px)}
  .navrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px}
  .brand{min-width:0;white-space:nowrap}
  .hero-light{padding-top:52px}
  .hero-layout{min-height:auto}
  .hero-product-wrap{width:min(100%,700px);margin:20px auto 0}
  .hero-note{right:22px;top:-24px}
  .hero-authority{margin-top:28px}
  .features-light .features-head{margin-bottom:58px}
  .feature-row{min-height:0}
  .whygrid{gap:34px}
}

@media(max-width:760px){
  .container,.nav .container{width:min(100% - 32px,720px)}
  .navrow{height:66px;gap:10px}
  .nav .brand{font-size:18px}
  .nav .mark{width:30px;height:30px}
  .navright{gap:6px;shrink:0}
  .navright .btn{padding:10px 13px;font-size:12px}
  .hero-light{padding-top:38px}
  .hero-light h1{font-size:clamp(38px,7.5vw,54px);letter-spacing:-2px;line-height:1}
  .hero-light .lead{max-width:560px}
  .hero-product-wrap{min-height:0;padding:0 0 38px}
  .hero-app-shell{margin-top:10px;transform:none}
  .hero-note{display:none}
  .fs-leads{left:-5px;bottom:7px;transform:scale(.78);transform-origin:left bottom}
  .fs-agree{right:-5px;bottom:7px;transform:scale(.78);transform-origin:right bottom}
.hero-authority{margin-top:6px}
  .authority-card{padding:15px 12px 13px;border-radius:16px}
  .logo-marquee{mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent)}
  .logo-track{gap:12px;animation-duration:22s}
  .logo-pill{min-width:142px;height:54px;padding:9px 16px;border-radius:12px}
  .logo-pill img{max-width:105px;max-height:24px}
  .logo-pill img[alt="Mapbox"]{max-width:116px;max-height:28px}
  .section{padding:72px 0}
  .section h2{letter-spacing:-1px}
  .whygrid{margin-top:36px}
  .metric-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px}
  .metric-top>div{min-width:0}
  .metric-top strong{font-size:30px}
  .feature-more{margin-top:52px}
  .pricecard{padding:26px 22px}
}

@media(max-width:520px){
  .container,.nav .container{width:min(100% - 24px,480px)}
  .navrow{height:62px}
  .nav .brand{font-size:16px;gap:7px}
  .nav .mark{width:28px;height:28px}
  .navright .btn-orange{padding:10px 12px;font-size:11px}
  .hero-light{padding-top:30px}
  .hero-badge{font-size:10px;padding:7px 10px;margin-bottom:18px}
.hero-light h1{font-size:clamp(30px,8.5vw,36px);letter-spacing:-1.6px;margin-bottom:14px}
.hero-actions{gap:10px;margin:18px 0 16px}
  .hero-actions .btn{min-width:0;padding:14px 18px}
  .hero-micro{display:grid;grid-template-columns:1fr 1fr;text-align:left;gap:8px 12px;font-size:10px}
  .hero-micro span:last-child{grid-column:1/-1}
  .hero-product-wrap{padding-bottom:14px;margin-top:8px}
  .hero-app-shell{width:100%;padding:5px;border-radius:13px}
  .hero-app{grid-template-columns:76px minmax(0,1fr);min-height:270px}
  .hero-sidebar{padding:9px 6px}
  .hero-sidebrand{font-size:6px}
  .hero-navitem{font-size:5.5px;padding:4px;gap:4px}
  .hero-navdot{width:7px;height:7px}
  .hero-mainapp{min-width:0;padding:9px 8px 10px}
  .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-stat:nth-child(n+3){display:none}
  .hero-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-col:nth-child(n+3){display:none}
  .floating-stat{display:none}
  .authority-top{font-size:8px;letter-spacing:1px}
  .logo-track{gap:10px;animation-duration:18s}
  .logo-pill{min-width:128px;height:50px}
  .logo-pill img{max-width:96px;max-height:22px}
  .logo-pill img[alt="Mapbox"]{max-width:106px;max-height:26px}
  .features-light{padding:62px 0 72px}
  .features-light .features-head{margin-bottom:42px}
  .features-light h2{font-size:36px;letter-spacing:-1px}
  .features-sub{font-size:15px}
  .feature-rows{gap:44px}
  .feature-copy{text-align:left;padding:0}
  .feature-num{justify-content:flex-start}
  .feature-copy p{margin:0}
  .shot-inner{grid-template-columns:1fr;height:224px}
  .shot-sidebar{display:none}
  .map-shot .shot-inner,.portal-shot .shot-inner{grid-template-columns:1fr}
  .section{padding:60px 0}
  .section h2{font-size:34px}
  .metricbox{padding:18px 14px;border-radius:15px}
  .metric-top strong{font-size:26px}
  .bars{height:145px;gap:6px}
  .metricfoot{gap:6px}
  .mini{padding:9px 7px}
  .pricecard .label{position:static;display:inline-block;margin-bottom:16px}
  .pricefeatures{grid-template-columns:1fr}
  .final{padding:58px 0}
  .finalbox{padding:48px 16px;border-radius:18px}
  .finalbox h2{font-size:36px;letter-spacing:-1px}
  .footerrow{gap:20px}
}

@media(max-width:360px){
  .nav .brand{font-size:14px}
  .navright .btn-orange{padding:9px 10px}
  .hero-light h1{font-size:30px}
  .hero-app{grid-template-columns:64px minmax(0,1fr)}
  .hero-sidebar{padding:7px 4px}
  .hero-sidebrand{gap:3px}
  .hero-sidebrand .mark{width:14px;height:14px}
  .logo-pill{min-width:116px}
}


/* ===== Tablet + mobile optimization pass ===== */
html{-webkit-text-size-adjust:100%}
body{overflow-x:hidden}
img,svg,video{max-width:100%;height:auto}

@media(hover:none){
  .btn,.hero-actions .btn,.save-lead,.hero-newbtn{min-height:44px}
  .faq-q,.faq-item summary{min-height:44px}
}

/* iPad portrait / landscape */
@media(min-width:761px) and (max-width:1180px){
  .container{width:min(100% - 44px,1180px)}
  .hero-light{padding-top:56px}
  .hero-light h1{font-size:clamp(40px,6vw,56px);letter-spacing:-2.4px}
  .hero-light .lead{font-size:18px;max-width:640px}
  .hero-note{top:-18px;right:6px;font-size:13px}
  .hero-app-shell{width:min(720px,100%)}
  .fs-leads{transform:scale(.9);transform-origin:left bottom}
  .fs-agree{transform:scale(.9);transform-origin:right bottom}
  .features-light h2{font-size:clamp(34px,5vw,46px)}
  .feature-more{grid-template-columns:1fr 1fr}
  .shot-inner{height:300px}
  .logo-pill{min-width:160px;height:62px}
  .pricefeatures{grid-template-columns:1fr 1fr}
}

/* keep the ribbon comfortable on every tablet width */
@media(max-width:1180px){
  .logo-marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
}

/* phones */
@media(max-width:700px){
  .container{width:min(100% - 24px,1180px)}
  .navrow{gap:10px}
  .brand{font-size:17px}
  .hero-light h1{font-size:clamp(30px,8.6vw,36px)}
  .features-light h2,.section h2{font-size:clamp(28px,8.4vw,38px);letter-spacing:-1.6px}
  .feature-copy p,.features-sub,.section-intro{font-size:15.5px}
  .pricefeatures{grid-template-columns:1fr}
  .footerrow{flex-direction:column;align-items:flex-start;gap:18px}
}

@media(max-width:420px){
  .navright .btn-orange{padding:9px 14px;font-size:13px}
  .hero-micro{flex-direction:column;align-items:center;gap:8px}
}

@media(max-width:1180px){
  .navrow{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:14px}
  .navright{display:flex;align-items:center;gap:10px;flex:0 0 auto}
  .navlinks{display:flex;gap:18px;flex:0 1 auto;min-width:0}
}
@media(max-width:1100px){.navlinks{display:none}}

/* ===== Responsive rebuild: phone and iPad ===== */
@media(max-width:1100px){
  .hero-light{padding-top:38px;padding-bottom:24px}
  .hero-layout{gap:24px}
  .hero-left{padding-top:0}
  .hero-badge{margin-bottom:18px}
  .hero-light h1{margin-bottom:16px;line-height:1.02}
  .hero-actions{margin:24px 0 22px}
  .hero-product-wrap{margin-top:6px}
  .hero-authority{margin-top:12px}
}

/* iPad landscape uses the width instead of stacking a tall desktop layout. */
@media(min-width:900px) and (max-width:1100px){
  .hero-light{padding-top:38px}
  .hero-layout{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:30px;align-items:center}
  .hero-left{text-align:left;max-width:none;margin:0}
  .hero-badge{margin-left:0;margin-right:0}
  .hero-light h1{font-size:42px;letter-spacing:-2px;margin-left:0;margin-right:0}
  .hero-light .lead{font-size:17px;margin:0}
  .hero-actions,.hero-micro{justify-content:flex-start}
  .hero-actions{gap:10px}
  .hero-actions .btn{min-width:150px}
  .hero-micro{display:grid;grid-template-columns:1fr 1fr;gap:7px 12px}
  .hero-micro span:last-child{grid-column:1/-1}
  .hero-product-wrap{width:100%;min-height:360px;margin:0;padding:0;align-items:center}
  .hero-app-shell{width:100%;margin:0;transform:none}
  .hero-app{grid-template-columns:108px minmax(0,1fr);min-height:326px}
  .hero-sidebar{padding:12px 8px}
  .hero-navitem{padding:5px;font-size:7px}
  .hero-mainapp{min-width:0;padding:12px 10px}
  .hero-note{display:none}
  .floating-stat{display:none}
  .hero-authority{margin-top:22px}
}

/* iPad portrait */
@media(min-width:601px) and (max-width:899px){
  .hero-light{padding-top:42px}
  .hero-layout{gap:18px}
  .hero-light h1{font-size:46px;letter-spacing:-2px}
  .hero-light .lead{font-size:17px;line-height:1.5}
  .hero-actions{margin:22px 0 20px}
  .hero-product-wrap{width:min(100%,660px);min-height:350px;margin:8px auto 0;padding:0}
  .hero-app-shell{width:100%;margin:0}
  .hero-app{min-height:330px}
  .hero-note{display:none}
  .hero-authority{margin-top:18px}
  .authority-card{padding:14px}
}

/* Phones: true single-column composition with no scaled desktop canvas. */
@media(max-width:600px){
  .container,.nav .container{width:calc(100% - 24px);max-width:none}
  .navrow{height:62px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
  .nav .brand{min-width:0;font-size:15px;gap:7px;letter-spacing:0}
  .nav .mark{width:28px;height:28px;flex:0 0 28px}
  .navright{gap:0}
  .navright .btn-ghost{display:none}
  .navright .btn-orange{min-height:42px;padding:9px 13px;font-size:12px;white-space:nowrap}

  .hero-light{padding:28px 0 18px}
  .hero-light:before{width:520px;height:520px;right:-300px;top:-250px}
  .hero-light:after{display:none}
  .hero-layout{display:flex;flex-direction:column;min-height:0}
  /* phone order: intro text, then the dashboard image, then buttons + checkmarks */
  .hero-left{display:contents}
  .hero-light h1{order:1}
  .hero-light .lead{order:2}
  .hero-product-wrap{order:3}
  .hero-actions{order:4}
  .hero-micro{order:5}
  .hero-badge{max-width:100%;padding:6px 9px;font-size:9px;gap:6px;margin-bottom:17px;white-space:nowrap}
  .hero-badge .bolt{font-size:15px}
  .hero-light h1{width:100%;max-width:none;font-size:clamp(25px,8vw,32px);line-height:1.05;letter-spacing:-1px;white-space:nowrap;margin:0 0 14px}
  .hero-light h1 .accent{white-space:nowrap}
  .hero-light .lead{max-width:360px;font-size:15px;line-height:1.5;padding:0 2px}
  .hero-actions{display:grid;grid-template-columns:1fr;gap:10px;align-self:stretch;width:100%;max-width:320px;margin:26px auto 18px}
  .hero-actions .btn{width:100%;min-width:0;min-height:52px;padding:14px 18px;font-size:16px;font-weight:800;border-radius:12px;white-space:nowrap}
  .hero-micro{display:flex;flex-direction:column;align-items:flex-start;width:max-content;gap:9px;margin:6px auto 0;text-align:left;font-size:12.5px;font-weight:600;line-height:1.3}
  .hero-micro span{min-width:0;width:max-content}
  .hero-micro span:before{margin-right:7px;font-size:15px}
  .hero-micro span:last-child{grid-column:auto}

  .hero-product-wrap{display:block;width:100%;min-height:0;margin:26px auto 0;padding:0;overflow:visible}
  .hero-product-glow,.hero-dots,.hero-note,.floating-stat{display:none}
  /* phone: keep the full desktop dashboard composition, just shrink it */
  .hero-app-shell{width:640px;max-width:none;height:auto;margin:0 auto;transform:none;overflow:visible;zoom:.56}
  .hero-app{display:grid;height:auto;overflow:hidden}
  .hero-sidebar{display:block}
  .hero-mainapp{height:auto;min-width:0}
  .hero-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hero-stat:nth-child(n+3){display:block}
  .hero-cols{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hero-col:nth-child(n+3){display:block}
  .hero-job:nth-child(n+3){display:block}

  .hero-authority{margin-top:14px}
  .authority-card{padding:12px 8px 10px;border-radius:14px}
  .authority-top{font-size:8px;letter-spacing:.8px;margin-bottom:9px}
  .logo-marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
  .logo-track{gap:9px;animation-duration:18s}
  .logo-pill{min-width:116px;height:46px;padding:7px 10px;border-radius:10px}
  .logo-pill img{max-width:88px;max-height:20px}
  .logo-pill img[alt="Mapbox"]{max-width:96px;max-height:23px}

  .features-light .feature-badge{display:none}
  .features-light{padding:56px 0 64px}
  .features-light .features-head{margin-bottom:38px}
  .features-light h2,.section h2{font-size:32px;line-height:1.08;letter-spacing:-1px}
  .features-sub,.feature-copy p,.section-intro{font-size:15px;line-height:1.55}
  .feature-rows{gap:42px}
  .feature-row,.feature-row.reverse{gap:20px}
  .feature-copy{text-align:left;padding:0}
  .feature-num{justify-content:flex-start;margin-bottom:10px}
  .feature-copy h3{font-size:26px;letter-spacing:-.6px}
  .product-shot{padding:5px;border-radius:11px;overflow:hidden}
  .shot-inner{height:220px;grid-template-columns:1fr}
  .shot-sidebar{display:none}
  .section{padding:56px 0}
  .whygrid{margin-top:30px;gap:28px}
  .metricbox{padding:16px 12px}
  .metric-top strong{font-size:25px}
  .metricfoot{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
  .mini{min-width:0;padding:8px 5px}
  .mini b{font-size:12px}
  .pricecard{padding:22px 18px}
  .finalbox{padding:42px 15px}
  .finalbox h2{font-size:34px}
}

@media(max-width:340px){
  .nav .brand{font-size:14px}
  .navright .btn-orange{padding:8px 10px;font-size:11px}
  .hero-light h1{font-size:25px}
  .hero-light .lead{font-size:14px}
}

/* floating stat cards: only where there is room for them */
@media(max-width:1100px){.floating-stat{display:none}}
@media(min-width:1101px) and (max-width:1320px){
  .fs-leads{left:-10px;bottom:70px;transform:scale(.9);transform-origin:left bottom}
  .fs-agree{right:-8px;bottom:22px;transform:scale(.9);transform-origin:right bottom}
}

/* phone: scale the dashboard to the available width */
@media(min-width:561px) and (max-width:600px){.hero-app-shell{zoom:.82}}
@media(min-width:521px) and (max-width:560px){.hero-app-shell{zoom:.76}}
@media(min-width:481px) and (max-width:520px){.hero-app-shell{zoom:.70}}
@media(min-width:431px) and (max-width:480px){.hero-app-shell{zoom:.62}}
@media(min-width:391px) and (max-width:430px){.hero-app-shell{zoom:.56}}
@media(min-width:361px) and (max-width:390px){.hero-app-shell{zoom:.51}}
@media(max-width:360px){.hero-app-shell{zoom:.45}}
/* ribbon sits lower so it clears the dashboard */
@media(min-width:1101px){.hero-authority{margin-top:78px}}
@media(min-width:601px) and (max-width:1100px){.hero-authority{margin-top:46px}}
@media(max-width:600px){.hero-authority{margin-top:34px}}

/* desktop hero polish: floating callouts pushed to the corners, roomier stack */
@media(min-width:1101px){
  /* everything ~10-15% bigger now that there's room */
  .hero-light h1{font-size:clamp(38px,3.1vw,45px);letter-spacing:-2.4px;margin-bottom:22px}
  .hero-light .lead{font-size:19px;max-width:520px}
  .hero-actions .btn{min-width:184px;padding:16px 26px;font-size:15.5px}
  .hero-actions{gap:16px}
  .hero-micro{font-size:12.5px;gap:22px;flex-wrap:nowrap;white-space:nowrap}
  .hero-micro span:before{font-size:18px}
  .hero-app-shell{width:100%}
  .hero-note{right:-78px;top:-62px;font-size:15px}
  .fs-leads{left:-46px;bottom:6px}
  .fs-agree{right:-58px;bottom:6px}
  .hero-actions{margin:46px 0 34px}
  .hero-micro{margin-top:8px;gap:30px}
  .hero-authority{margin-top:26px}
}

@media(min-width:1101px){
  .hero-layout{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);align-items:start;min-height:min(560px,max(440px,calc(100vh - 348px)))}
  .hero-note{right:-30px;top:-58px}
}
@media(min-width:1420px){.hero-note{right:-44px;top:-64px}}

@media(min-width:1101px) and (max-width:1419px){
  .fs-agree{right:-22px}
  .fs-leads{left:-30px}
}
@media(min-width:1101px){.hero-left{padding-top:30px}}

/* --- hero refresh: wider landscape dashboard, ambient dot field, deeper depth --- */
.hero-badge{display:none}
.hero-note,.floating-stat{display:none!important}

.hero-dots{
  width:210px;height:230px;right:auto;left:-18px;top:26px;opacity:1;
  background-image:radial-gradient(rgba(255,90,10,.55) 1.6px,transparent 1.6px);
  background-size:16px 16px;
  -webkit-mask-image:linear-gradient(115deg,#000 8%,rgba(0,0,0,.35) 62%,transparent 92%);
  mask-image:linear-gradient(115deg,#000 8%,rgba(0,0,0,.35) 62%,transparent 92%);
}
.hero-product-glow{
  width:440px;height:440px;right:60px;top:20px;
  background:radial-gradient(circle at 50% 50%,rgba(255,104,32,.20),rgba(255,104,32,.06) 55%,transparent 72%);
  filter:blur(6px);
}
.hero-app-shell{
  box-shadow:
    0 2px 6px rgba(20,12,4,.06),
    0 18px 38px -12px rgba(20,12,4,.28),
    0 48px 90px -28px rgba(120,52,10,.34),
    0 0 0 1px rgba(255,120,40,.10);
}
.hero-app-shell:before{
  content:"";position:absolute;inset:-26px -18px -46px -18px;z-index:-1;border-radius:32px;
  background:radial-gradient(60% 60% at 50% 60%,rgba(255,104,32,.16),transparent 72%);
  filter:blur(18px);pointer-events:none;
}
.hero-app-shell:after{
  content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,0) 38%);
}

@media(min-width:1101px){
  .hero-layout{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr)}
  .hero-app-shell{width:100%;transform:translateX(10px)}
  .hero-app{min-height:0}
  .hero-col{min-height:112px}
  .hero-product-wrap{min-height:400px}
  .hero-dots{left:-86px;top:24px;width:200px;height:270px;-webkit-mask-image:linear-gradient(255deg,#000 12%,rgba(0,0,0,.35) 62%,transparent 94%);mask-image:linear-gradient(255deg,#000 12%,rgba(0,0,0,.35) 62%,transparent 94%)}
  .hero-authority{margin-top:96px}
  .hero-left{padding-top:64px}
}
@media(min-width:1420px){
  .hero-app-shell{transform:translateX(18px)}
}
@media(max-width:1100px){
  .hero-dots{display:none}
}