/* Karts2Me marketing site — shared by home + funnel pages */
:root{
  --navy-950:#010C1F; --navy-900:#021433; --navy-800:#04204A; --navy-700:#073876; --navy-600:#0B4FA8; --navy-100:#E6EEF9;
  --or-500:#FA8411; --or-400:#FFA23D; --or-100:#FFF0DF; --or-700:#B45309;
  --green:#2F8F5B; --bg:#F4F6FA; --line:#E3E8F0; --text:#141B2D; --muted:#566074; --white:#fff;
  --display:'Space Grotesk','Inter',system-ui,sans-serif; --body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sh-2:0 2px 4px rgba(7,24,58,.04),0 12px 28px -10px rgba(7,24,58,.16); --sh-3:0 6px 12px rgba(7,24,58,.06),0 32px 64px -20px rgba(7,24,58,.34);
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box} html{scroll-behavior:smooth; scroll-padding-top:84px} html,body{overflow-x:hidden; max-width:100%}
body{margin:0; background:#fff; color:var(--text); font:16px/1.6 var(--body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--display); margin:0; letter-spacing:-.02em; color:var(--navy-800); line-height:1.1}
p{margin:0} a{color:inherit} img,svg{display:block; max-width:100%}
:focus-visible{outline:3px solid #1A73E8; outline-offset:3px; border-radius:6px}
.skip{position:absolute; left:-9999px; top:8px; background:#000; color:#fff; padding:10px 14px; border-radius:8px; z-index:1000} .skip:focus{left:8px}
.wrap{max-width:1160px; margin:0 auto; padding:0 24px}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:650; letter-spacing:.09em; text-transform:uppercase; color:var(--or-700)}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--or-500); border-radius:2px}
.on-dark .eyebrow{color:var(--or-400)}
.lead{font-size:18px; color:var(--muted); max-width:56ch}
.on-dark .lead{color:rgba(255,255,255,.76)}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 24px; border-radius:14px; font:650 15px/1 var(--body); text-decoration:none; border:1.5px solid transparent; cursor:pointer; white-space:nowrap; transition:transform .18s var(--ease), box-shadow .2s var(--ease), background .2s, border-color .2s}
.btn:active{transform:scale(.98)}
.btn-or{background:linear-gradient(180deg,var(--or-400),var(--or-500)); color:#2B1500; box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 12px 26px -10px rgba(250,132,17,.85)}
.btn-or:hover{transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 18px 32px -10px rgba(250,132,17,.9)}
.btn-navy{background:linear-gradient(180deg,var(--navy-600),var(--navy-800)); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 12px 24px -10px rgba(7,56,118,.7)}
.btn-navy:hover{transform:translateY(-2px)}
.btn-line{background:transparent; color:var(--navy-700); border-color:var(--line)} .btn-line:hover{border-color:var(--navy-700); background:var(--navy-100)}
.on-dark .btn-line{color:#fff; border-color:rgba(255,255,255,.28)} .on-dark .btn-line:hover{background:rgba(255,255,255,.1); border-color:#fff}
.btn-lg{padding:17px 30px; font-size:16px; border-radius:16px}

/* header */
header.site{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.82); backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4); border-bottom:1px solid rgba(227,232,240,.8)}
header.site.dark{background:rgba(2,20,51,.94); border-bottom-color:rgba(255,255,255,.08)}
.nav{display:flex; align-items:center; justify-content:space-between; height:72px; gap:20px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none}
.brand img{width:36px; height:36px; border-radius:10px; box-shadow:0 6px 14px -6px rgba(4,32,74,.6)}
.brand b{font:700 20px var(--display); color:var(--navy-800); letter-spacing:-.02em} .brand b i{font-style:normal; color:var(--or-500)}
header.dark .brand b{color:#fff}
.links{display:flex; gap:6px; align-items:center}
.links a{font-size:14.5px; font-weight:550; text-decoration:none; padding:9px 14px; border-radius:10px; color:var(--text); transition:background .15s}
.links a:hover{background:rgba(7,56,118,.07)} .links a[aria-current="page"]{color:var(--navy-700); background:var(--navy-100)}
header.dark .links a{color:rgba(255,255,255,.86)} header.dark .links a:hover{background:rgba(255,255,255,.1)} header.dark .links a[aria-current="page"]{background:rgba(255,255,255,.14); color:#fff}
.nav-cta{display:flex; gap:10px; align-items:center}
.dark .btn-line{color:#fff; border-color:rgba(255,255,255,.3)} .dark .btn-line:hover{background:rgba(255,255,255,.1); border-color:#fff}
.nav-cta .btn{padding:11px 18px; font-size:14px; border-radius:12px}
.burger{display:none; width:44px; height:44px; border:none; background:none; border-radius:12px; cursor:pointer; color:var(--navy-800)} header.dark .burger{color:#fff}
.drawer{display:none; flex-direction:column; padding:8px 24px 20px; border-top:1px solid var(--line); background:#fff}
header.dark .drawer{background:var(--navy-900); border-top-color:rgba(255,255,255,.1)}
.drawer a{padding:14px 0; font-weight:600; text-decoration:none; border-bottom:1px solid var(--line)} header.dark .drawer a{color:#fff; border-bottom-color:rgba(255,255,255,.1)}
.drawer .btn{margin-top:16px; border:none}

/* hero */
.hero{position:relative; color:#fff; background:var(--navy-900); overflow:hidden; isolation:isolate}
.hero::before{content:""; position:absolute; inset:0; z-index:-2; background:
  radial-gradient(900px 520px at 85% -5%, rgba(11,79,168,.75), transparent 62%),
  radial-gradient(700px 480px at -5% 105%, rgba(250,132,17,.28), transparent 60%),
  linear-gradient(180deg,var(--navy-800),var(--navy-950))}
.hero::after{content:""; position:absolute; inset:0; z-index:-1; opacity:.5; background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:56px 56px; -webkit-mask-image:radial-gradient(ellipse at 70% 30%,#000 10%,transparent 70%); mask-image:radial-gradient(ellipse at 70% 30%,#000 10%,transparent 70%)}
.hero h1{color:#fff; font-size:clamp(38px,5.6vw,68px); line-height:1.03; letter-spacing:-.035em; max-width:13ch}
.hero h1 em{font-style:normal; background:linear-gradient(90deg,var(--or-400),#FFC27A); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; padding:84px 0 96px}
.hero .lead{margin-top:22px}
.cta-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:34px}
.chips{display:flex; gap:10px; flex-wrap:wrap; margin-top:30px}
.chip{display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:99px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); font-size:13.5px; font-weight:550; color:rgba(255,255,255,.9)}
.chip svg{color:var(--or-400)}
.fine{font-size:13px; color:rgba(255,255,255,.6); margin-top:16px}

/* device mockups */
.stage{position:relative; display:flex; justify-content:center; align-items:center; min-height:520px}
.phone{position:relative; width:290px; height:580px; border-radius:46px; background:#0B1326; padding:11px; box-shadow:0 0 0 1.5px rgba(255,255,255,.14),0 50px 90px -25px rgba(0,0,0,.7),0 0 120px -30px rgba(250,132,17,.35); transform:rotate(3deg)}
.phone .scr{position:relative; width:100%; height:100%; border-radius:36px; overflow:hidden; background:#F4F6FA; color:var(--text)}
.phone .notch{position:absolute; top:10px; left:50%; width:84px; height:22px; border-radius:99px; background:#0B1326; transform:translateX(-50%); z-index:5}
.map{position:absolute; inset:0; background:
  radial-gradient(circle at 30% 40%, #E3EFE0 0 14%, transparent 15%),
  radial-gradient(circle at 78% 62%, #DCE9F7 0 18%, transparent 19%),
  linear-gradient(135deg,#EEF2F7,#E4EAF2)}
.map::before{content:""; position:absolute; inset:0; background-image:linear-gradient(0deg,rgba(255,255,255,.9) 6px,transparent 6px),linear-gradient(90deg,rgba(255,255,255,.9) 6px,transparent 6px); background-size:74px 74px; background-position:18px 30px; opacity:.85}
.route{position:absolute; inset:0}
.pin{position:absolute; width:18px; height:18px; border-radius:50%; border:4px solid #fff; box-shadow:0 4px 10px rgba(0,0,0,.25)}
.sheetm{position:absolute; left:10px; right:10px; bottom:10px; background:#fff; border-radius:26px; padding:16px; box-shadow:0 -6px 30px -6px rgba(2,20,51,.3)}
.sheetm h5{margin:0; font:700 15px var(--display); color:var(--navy-800)}
.sheetm small{color:var(--muted); font-size:12px}
.row{display:flex; align-items:center; gap:10px}
.av{width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--navy-600),var(--navy-800)); color:#fff; display:flex; align-items:center; justify-content:center; font:700 14px var(--display); flex-shrink:0}
.mbtn{display:block; text-align:center; margin-top:12px; padding:13px; border-radius:14px; background:linear-gradient(180deg,var(--navy-600),var(--navy-800)); color:#fff; font:650 14px var(--body)}
.floatcard{position:absolute; background:#fff; color:var(--text); border-radius:18px; padding:12px 16px; box-shadow:var(--sh-3); font-size:13px; display:flex; align-items:center; gap:10px; z-index:3}
.floatcard b{font:700 14px var(--display); color:var(--navy-800); display:block}
.floatcard .ic{width:34px; height:34px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:var(--or-100); color:var(--or-700)}
.floatcard .ic.g{background:#E5F5EC; color:var(--green)} .floatcard .ic.b{background:var(--navy-100); color:var(--navy-700)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.bob{animation:bob 6s ease-in-out infinite} .bob.d2{animation-delay:-3s}

.laptop{position:relative; width:min(560px,100%); border-radius:16px; background:#fff; box-shadow:var(--sh-3),0 0 0 1px rgba(255,255,255,.12); overflow:hidden; transform:perspective(1600px) rotateY(-9deg) rotateX(3deg); color:var(--text)}
.laptop .bar{display:flex; gap:6px; padding:10px 14px; background:#EDF1F7; border-bottom:1px solid var(--line)}
.laptop .bar i{width:10px; height:10px; border-radius:50%; background:#CBD3E0}
.dash{display:grid; grid-template-columns:128px 1fr; min-height:340px}
.dash aside{background:linear-gradient(190deg,var(--navy-700),var(--navy-900)); padding:14px 10px; display:flex; flex-direction:column; gap:6px}
.dash aside .lg{display:flex; align-items:center; gap:7px; color:#fff; font:700 12px var(--display); padding:2px 6px 10px}
.dash aside .lg img{width:22px; height:22px; border-radius:7px}
.dash aside span{padding:8px 10px; border-radius:9px; font-size:11px; color:rgba(255,255,255,.7); font-weight:550}
.dash aside span.on{background:rgba(250,132,17,.22); color:#fff; box-shadow:inset 0 0 0 1px rgba(250,132,17,.35)}
.dash main{padding:16px; background:var(--bg)}
.dash h6{margin:0 0 10px; font:700 15px var(--display); color:var(--navy-800)}
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.kpi{background:#fff; border-radius:12px; padding:10px 12px; box-shadow:0 1px 2px rgba(7,24,58,.06)}
.kpi small{display:block; font-size:9.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:650}
.kpi b{font:700 20px var(--display); color:var(--navy-800)}
.dmap{margin-top:10px; height:130px; border-radius:12px; position:relative; overflow:hidden}
.zone{position:absolute; border:2px solid var(--or-500); background:rgba(250,132,17,.16); border-radius:14px}
.tbl{margin-top:10px; background:#fff; border-radius:12px; padding:4px 12px; box-shadow:0 1px 2px rgba(7,24,58,.06)}
.tbl div{display:flex; justify-content:space-between; font-size:11px; padding:7px 0; border-bottom:1px solid var(--line)} .tbl div:last-child{border:none}
.tag{padding:2px 8px; border-radius:99px; font-size:10px; font-weight:650; background:#E5F5EC; color:#1F7A4A} .tag.o{background:var(--or-100); color:var(--or-700)}

/* sections */
section{position:relative} .sec{padding:104px 0} .sec.alt{background:var(--bg)} .sec.dark{background:linear-gradient(180deg,var(--navy-800),var(--navy-950)); color:#fff} .sec.dark h2,.sec.dark h3{color:#fff}
.head{max-width:680px; margin-bottom:56px} .head.center{margin-left:auto; margin-right:auto; text-align:center} .head.center .lead{margin-left:auto; margin-right:auto}
.head h2{font-size:clamp(30px,4vw,46px); margin:14px 0 16px; letter-spacing:-.03em}
.strip{background:#fff; border-bottom:1px solid var(--line)}
.strip .wrap{display:grid; grid-template-columns:repeat(3,1fr); gap:0}
.strip .it{display:flex; gap:14px; align-items:center; padding:26px 24px; border-right:1px solid var(--line)} .strip .it:last-child{border:none}
.strip .ic{width:44px; height:44px; border-radius:14px; background:var(--navy-100); color:var(--navy-700); display:flex; align-items:center; justify-content:center; flex-shrink:0}
.strip span{display:block; line-height:1.5}
.strip b{display:block; font:650 15px var(--display); color:var(--navy-800)} .strip span{font-size:13.5px; color:var(--muted)}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; counter-reset:s}
.step{position:relative; padding:32px 28px; border-radius:24px; background:#fff; border:1px solid var(--line); box-shadow:var(--sh-2); counter-increment:s}
.step::before{content:counter(s,decimal-leading-zero); font:700 14px var(--display); color:var(--or-700); background:var(--or-100); padding:6px 12px; border-radius:99px; display:inline-block; margin-bottom:18px}
.step h3{font-size:22px; margin-bottom:10px} .step p{color:var(--muted); font-size:15px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.feat{padding:30px 28px; border-radius:24px; background:#fff; border:1px solid var(--line); transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s}
.feat:hover{transform:translateY(-4px); box-shadow:var(--sh-2); border-color:transparent}
.feat .ic{width:48px; height:48px; border-radius:15px; background:linear-gradient(135deg,var(--navy-600),var(--navy-800)); color:#fff; display:flex; align-items:center; justify-content:center; margin-bottom:20px; box-shadow:0 10px 20px -10px rgba(7,56,118,.7)}
.feat h3{font-size:19px; margin-bottom:8px} .feat p{font-size:14.5px; color:var(--muted)}
.sec.dark .feat{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.1)} .sec.dark .feat p{color:rgba(255,255,255,.7)}
.split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
.checks{list-style:none; margin:28px 0 0; padding:0; display:grid; gap:16px}
.checks li{display:flex; gap:14px; align-items:flex-start; font-size:16px}
.checks svg{flex-shrink:0; margin-top:2px; color:var(--green)}
.checks b{color:var(--navy-800)}
.panel{border-radius:28px; background:linear-gradient(160deg,var(--navy-700),var(--navy-900)); color:#fff; padding:40px; box-shadow:var(--sh-3); position:relative; overflow:hidden}
.panel::after{content:""; position:absolute; right:-80px; top:-80px; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle,rgba(250,132,17,.35),transparent 70%)}
.panel h3{color:#fff; font-size:26px; margin-bottom:12px} .panel p{color:rgba(255,255,255,.78)}
.faq{max-width:820px; margin:0 auto; display:grid; gap:12px}
.faq details{background:#fff; border:1px solid var(--line); border-radius:18px; padding:0 24px; transition:box-shadow .2s}
.faq details[open]{box-shadow:var(--sh-2)}
.faq summary{list-style:none; cursor:pointer; padding:22px 0; font:650 17px var(--display); color:var(--navy-800); display:flex; justify-content:space-between; gap:16px; align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font:400 26px/1 var(--body); color:var(--or-500); transition:transform .25s var(--ease)} .faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 0 22px; color:var(--muted); font-size:15.5px}
.cta-band{margin:0 24px; border-radius:36px; padding:80px 24px; text-align:center; color:#fff; position:relative; overflow:hidden; background:radial-gradient(700px 360px at 85% 0%,rgba(250,132,17,.35),transparent 60%),linear-gradient(160deg,var(--navy-700),var(--navy-900))}
.cta-band h2{color:#fff; font-size:clamp(30px,4.4vw,52px); max-width:18ch; margin:0 auto 16px; letter-spacing:-.03em}
.cta-band p{color:rgba(255,255,255,.78); max-width:48ch; margin:0 auto 32px; font-size:18px}
.cta-band .cta-row{justify-content:center; margin-top:0}
.also{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
.also a{display:flex; gap:18px; align-items:center; padding:26px; border-radius:24px; border:1px solid var(--line); background:#fff; text-decoration:none; transition:transform .25s var(--ease), box-shadow .25s}
.also a:hover{transform:translateY(-3px); box-shadow:var(--sh-2)}
.also .ic{width:52px; height:52px; border-radius:16px; background:var(--or-100); color:var(--or-700); display:flex; align-items:center; justify-content:center; flex-shrink:0}
.also b{font:700 18px var(--display); color:var(--navy-800); display:block} .also span{color:var(--muted); font-size:14.5px}

/* hub (home) */
.paths{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:-64px; position:relative; z-index:5}
.path{display:flex; flex-direction:column; padding:34px 30px; border-radius:28px; background:#fff; border:1px solid var(--line); box-shadow:var(--sh-3); text-decoration:none; transition:transform .3s var(--ease)}
.path:hover{transform:translateY(-6px)}
.path .ic{width:54px; height:54px; border-radius:17px; display:flex; align-items:center; justify-content:center; margin-bottom:22px; color:#fff; background:linear-gradient(135deg,var(--navy-600),var(--navy-800))}
.path.o .ic{background:linear-gradient(135deg,var(--or-400),var(--or-500)); color:#2B1500}
.path.g .ic{background:linear-gradient(135deg,#3DAA73,var(--green))}
.path h3{font-size:26px; margin-bottom:10px} .path p{color:var(--muted); font-size:15px; flex:1}
.path .go{margin-top:24px; font-weight:650; color:var(--navy-700); display:flex; align-items:center; gap:8px}
.path:hover .go svg{transform:translateX(4px)} .path .go svg{transition:transform .2s}
.venues{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.venue{padding:24px; border-radius:22px; background:#fff; border:1px solid var(--line)} .venue h3{font-size:17px; margin:14px 0 6px} .venue p{font-size:14px; color:var(--muted)}
.venue .ic{width:42px; height:42px; border-radius:13px; background:var(--navy-100); color:var(--navy-700); display:flex; align-items:center; justify-content:center}

/* footer */
footer.site{background:var(--navy-950); color:rgba(255,255,255,.7); padding:72px 0 36px; margin-top:96px}
.ft{display:flex; justify-content:space-between; gap:48px; flex-wrap:wrap; padding-bottom:48px}
.ft p{max-width:34ch; font-size:14px; margin-top:16px}
.ft .cols{display:flex; gap:72px; flex-wrap:wrap} .ft h4{color:#fff; font:700 13px var(--body); letter-spacing:.1em; text-transform:uppercase; margin-bottom:16px}
.ft a{display:block; text-decoration:none; font-size:14.5px; margin-bottom:11px; color:rgba(255,255,255,.7)} .ft a:hover{color:#fff}
.fb{border-top:1px solid rgba(255,255,255,.1); padding-top:26px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:13px}
footer .brand b{color:#fff}

/* sticky mobile CTA */
.mcta{display:none; position:fixed; left:12px; right:12px; bottom:max(12px,env(safe-area-inset-bottom)); z-index:70; padding:10px; border-radius:20px; background:rgba(2,20,51,.92); backdrop-filter:blur(14px); box-shadow:0 20px 40px -10px rgba(0,0,0,.5); transform:translateY(140%); transition:transform .35s var(--ease)}
.mcta.show{transform:none} .mcta .btn{width:100%}

/* reveal */
.rv{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)} .rv.in{opacity:1; transform:none}
.js-off .rv{opacity:1; transform:none}

@media (max-width:980px){
  .links,.nav-cta .btn-line{display:none} .burger{display:inline-flex; align-items:center; justify-content:center} .drawer.open{display:flex}
  .hero-grid{grid-template-columns:1fr; padding:56px 0 72px; gap:28px} .stage{min-height:0; order:2; padding:24px 0 8px}
  .phone{transform:none; width:270px; height:540px} .laptop{transform:none}
  .steps,.grid3,.paths,.venues{grid-template-columns:1fr} .venues{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr; gap:36px} .strip .wrap{grid-template-columns:1fr} .strip .it{border-right:none; border-bottom:1px solid var(--line)}
  .also{grid-template-columns:1fr} .sec{padding:72px 0} .cta-band{margin:0 12px; border-radius:28px; padding:60px 20px}
  .mcta{display:block} .floatcard{display:none} .paths{margin-top:-40px}
  .dash{grid-template-columns:96px 1fr}
}
@media (max-width:520px){ .wrap{padding:0 18px} .venues{grid-template-columns:1fr} .cta-row .btn{flex:1 1 100%} .ft .cols{gap:40px} .nav-cta .btn-or{padding:10px 14px} }
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important; transition:none !important; scroll-behavior:auto !important} .rv{opacity:1; transform:none}}