/* Velo Intelligence — Last Mile AI homepage
   Palette: Shadow Grey #1D2331 · Platinum #F2F3F5 · Tangerine #E12E1D
   Gold #FFD902 · Digital Blue #0A70F7 · Ground #12181f */

*{box-sizing:border-box;}
html,body{margin:0;background:#12181f;scroll-behavior:smooth;}
#vh-root{background:#12181f;font-family:'Poppins',sans-serif;font-weight:300;color:#F2F3F5;}
a{color:#0A70F7;text-decoration:none;}
a:hover{color:#F2F3F5;}
img{max-width:100%;}

/* ── animations ── */
@keyframes riseB{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}
@keyframes drawB{from{stroke-dashoffset:560;}to{stroke-dashoffset:0;}}
@keyframes popB{from{opacity:0;transform:scale(.4);}to{opacity:1;transform:none;}}
@keyframes revealUp{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:none;}}
.riseB{animation:riseB .9s cubic-bezier(.2,.7,.2,1) both;}
[data-reveal].in{animation:revealUp .85s cubic-bezier(.2,.7,.2,1) both;}
#vh-root.rm [data-reveal]{animation:none !important;}
.route-draw{animation:drawB 2.4s ease .3s both;}
.route-pop{transform-box:fill-box;transform-origin:center;}
.route-pop-1{animation:popB .5s ease .2s both;}
.route-pop-2{animation:popB .5s ease 1.4s both;}
.route-pop-3{animation:popB .6s ease 2.4s both;}
@media(prefers-reduced-motion:reduce){.riseB,[data-reveal].in,.route-draw,.route-pop{animation:none !important;}}

/* ── header ── */
#vh-header{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  padding:20px 6vw;transition:background .3s ease,backdrop-filter .3s ease,border-color .3s ease;
  border-bottom:1px solid transparent;}
#vh-header.scrolled{background:rgba(18,24,31,.86);backdrop-filter:blur(12px);border-bottom-color:rgba(242,243,245,.1);}
.brand{display:flex;align-items:center;}
.brand-logo{height:34px;width:auto;display:block;}
.vh-nav{display:flex;gap:34px;align-items:center;font-size:14px;}
.vh-nav-links{display:flex;gap:34px;align-items:center;}
.vh-nav-links a{color:rgba(242,243,245,.8);white-space:nowrap;}
@media(max-width:1080px){.vh-nav-links{display:none;}}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;
  font-family:'Poppins',sans-serif;font-weight:500;cursor:pointer;white-space:nowrap;text-align:center;
  border:1px solid transparent;background:transparent;transition:background .2s ease;text-decoration:none;}
.btn-primary{border-color:#0A70F7;color:#F2F3F5;}
.btn-primary:hover{background:rgba(10,112,247,.14);color:#F2F3F5;}
.btn-primary-ink{border-color:#0A70F7;color:#1D2331;}
.btn-primary-ink:hover{background:rgba(10,112,247,.1);color:#1D2331;}
.btn-outline{border-color:rgba(242,243,245,.4);color:#F2F3F5;}
.btn-outline:hover{background:rgba(242,243,245,.08);color:#F2F3F5;}
.btn-ghost{border-color:rgba(242,243,245,.35);color:#F2F3F5;}
.btn-ghost:hover{background:rgba(242,243,245,.08);color:#F2F3F5;}
.btn-ghost-light{border-color:rgba(242,243,245,.3);color:rgba(242,243,245,.85);}
.btn-ghost-light:hover{background:rgba(242,243,245,.06);color:#F2F3F5;}
.btn-sm{height:40px;padding:0 22px;font-size:14px;flex-shrink:0;}
.btn:disabled{opacity:.55;cursor:default;}

/* ── layout helpers ── */
.sec{padding:clamp(104px,16vh,200px) 7vw;scroll-margin-top:84px;}
.sec-light{background:#F2F3F5;color:#1D2331;}
.sec-dark{background:#1D2331;}
.sec-ground{background:#12181f;}
.wrap{max-width:1180px;margin:0 auto;}
.wrap-mid{max-width:820px;margin:0 auto;}
.wrap-faq{max-width:840px;margin:0 auto;}
.center{text-align:center;}
.mx-auto{margin-left:auto;margin-right:auto;}
.mb-sm{margin-bottom:22px;}
.mb-lg{margin-bottom:40px;}
.mt-md{margin-top:18px;}
.w-16{max-width:16ch;}
.w-17{max-width:17ch;}
.w-18{max-width:18ch;}
.w-52{max-width:52ch;}
.w-58{max-width:58ch;}
.w-60{max-width:60ch;}
.w-62{max-width:62ch;}

/* ── shared type ── */
.eyebrow{font-family:'Bebas Neue',sans-serif;letter-spacing:.4em;font-size:14px;}
.eyebrow-red{color:#E12E1D;}
.eyebrow-gold{color:#FFD902;}
.h2{font-family:'Sora',sans-serif;font-weight:800;font-size:clamp(30px,4vw,56px);line-height:1.06;
  letter-spacing:-.015em;margin:0;text-wrap:balance;}
.h2-xl{font-size:clamp(32px,4.6vw,64px);line-height:1.03;letter-spacing:-.02em;}
.para-dark{font-size:clamp(16px,1.4vw,20px);line-height:1.7;color:rgba(242,243,245,.72);margin:24px 0 0;}
.para-ink{font-size:clamp(16px,1.4vw,20px);line-height:1.7;color:rgba(29,35,49,.72);margin:26px 0 0;}

/* ── hero ── */
.hero{min-height:92vh;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:6vw;padding:6vh 7vw 12vh;}
.hero-eyebrow{letter-spacing:.42em;font-size:16px;margin-bottom:24px;}
.hero-h1{font-family:'Sora',sans-serif;font-weight:800;font-size:clamp(40px,5.4vw,82px);line-height:1.02;
  letter-spacing:-.02em;margin:0;max-width:15ch;text-wrap:balance;}
.hero-lede{font-size:clamp(16px,1.4vw,20px);line-height:1.65;color:rgba(242,243,245,.72);max-width:52ch;margin:28px 0 0;}
.hero-form-wrap{margin-top:38px;}
.hero-fine{font-size:12px;color:rgba(242,243,245,.5);margin-top:14px;}
.vh-route{position:relative;height:64vh;display:flex;align-items:center;justify-content:center;}
.route-svg{width:100%;height:100%;max-width:340px;overflow:visible;}

/* pill (mailchimp) forms */
.pill-form{display:inline-flex;align-items:center;border-radius:999px;gap:10px;max-width:100%;flex-wrap:wrap;}
.pill-form-dark{background:rgba(242,243,245,.06);border:1px solid rgba(242,243,245,.16);padding:6px 6px 6px 22px;}
.pill-form-light{background:#fff;border:1px solid rgba(29,35,49,.16);padding:7px 7px 7px 24px;margin:38px auto 0;justify-content:center;}
.pill-input{background:transparent;border:none;outline:none;color:#F2F3F5;font-family:'Poppins',sans-serif;font-size:15px;width:210px;}
.pill-input::placeholder{color:rgba(242,243,245,.45);}
.pill-input-ink{color:#1D2331;font-size:16px;width:240px;}
.pill-input-ink::placeholder{color:rgba(29,35,49,.4);}
.pill-btn{height:44px;padding:0 26px;font-size:15px;}
.pill-form-light .pill-btn{height:48px;padding:0 30px;font-size:16px;}
.hp{position:absolute;left:-5000px;}

/* ── problem ── */
.stat-row{display:flex;align-items:center;gap:28px;margin-top:52px;padding-top:32px;
  border-top:1px solid rgba(29,35,49,.14);flex-wrap:wrap;}
.stat-num{font-family:'Sora',sans-serif;font-weight:800;font-size:clamp(52px,7vw,88px);color:#E12E1D;line-height:.9;}
.stat-text{font-size:clamp(16px,1.5vw,21px);line-height:1.5;color:rgba(29,35,49,.78);max-width:40ch;}
.ask{font-family:'Sora',sans-serif;font-weight:600;font-size:clamp(20px,2.2vw,30px);line-height:1.3;
  color:#1D2331;margin:56px 0 0;max-width:22ch;text-wrap:balance;}

/* ── how ── */
.vh-3{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:80px;}
.how-card{background:rgba(242,243,245,.05);border:1px solid rgba(242,243,245,.12);border-radius:24px;padding:46px 40px;}
.how-num{font-family:'Sora',sans-serif;font-weight:800;font-size:15px;color:#0A70F7;}
.how-h{font-family:'Sora',sans-serif;font-weight:700;font-size:22px;margin:14px 0 10px;color:#F2F3F5;}
.how-p{font-size:14px;line-height:1.65;color:rgba(242,243,245,.7);margin:0;}
.disclaimer{font-size:12px;color:rgba(242,243,245,.5);margin:26px 0 0;}

/* ── story / model ── */
.story-sec{position:relative;overflow:hidden;}
.story-marble{position:absolute;right:-4vw;bottom:-10vh;height:90vh;opacity:.12;pointer-events:none;}
.story-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:5vw;align-items:center;position:relative;}
.story-side{display:flex;flex-direction:column;align-items:center;gap:18px;}
.book-mock{width:min(280px,70vw);aspect-ratio:2/3;border-radius:10px;
  background:linear-gradient(160deg,#232c40,#12181f);box-shadow:0 30px 60px rgba(0,0,0,.45);
  border:1px solid rgba(242,243,245,.12);padding:34px 28px;display:flex;flex-direction:column;}
.book-kicker{font-family:'Bebas Neue',sans-serif;letter-spacing:.3em;font-size:12px;color:#E12E1D;}
.book-mid{flex:1;display:flex;align-items:center;}
.book-title{font-family:'Sora',sans-serif;font-weight:800;font-size:34px;line-height:1.02;color:#F2F3F5;letter-spacing:-.01em;}
.book-foot{display:flex;align-items:center;gap:8px;}
.book-author{font-size:11px;letter-spacing:.16em;color:rgba(242,243,245,.55);margin-left:4px;}
.dot{border-radius:50%;flex-shrink:0;}
.dot-gold{width:9px;height:9px;background:#FFD902;}
.dot-red{width:9px;height:9px;background:#E12E1D;}
.book-foot .dot-red{width:7px;height:7px;}
.story-cap{font-size:13px;color:rgba(29,35,49,.6);text-align:center;max-width:30ch;}
.cover-btn{gap:9px;height:44px;padding:0 22px;font-size:14.5px;}

/* ── trust ── */
.vh-4{display:grid;grid-template-columns:repeat(4,1fr);gap:44px 36px;margin-top:80px;}
.pillar{border-left:2px solid #0A70F7;padding:6px 0 6px 20px;}
.pillar-h{font-family:'Sora',sans-serif;font-weight:700;font-size:18px;margin:0 0 10px;color:#F2F3F5;}
.pillar-p{font-size:14.5px;line-height:1.6;color:rgba(242,243,245,.68);margin:0;}

/* ── waitlist ── */
.waitlist-sec{background:radial-gradient(120% 130% at 15% 10%,#ffffff 0%,#F2F3F5 55%);color:#1D2331;
  padding:clamp(120px,18vh,220px) 7vw;position:relative;overflow:hidden;}
.waitlist-fine{font-size:12px;color:rgba(29,35,49,.6);margin-top:18px;}

/* ── investor strip + Q&A ── */
.investor-strip{background:#1D2331;color:#F2F3F5;padding:56px 7vw;}
.inv-head-row{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.inv-lead{font-size:15.5px;line-height:1.55;max-width:64ch;}
.inv-lead strong{font-weight:600;}
.inv-lead span{color:rgba(242,243,245,.72);}
.inv-open-btn{height:44px;padding:0 24px;font-size:14.5px;}
.inv-panel{margin-top:36px;padding-top:32px;border-top:1px solid rgba(242,243,245,.16);}
.inv-panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;margin-bottom:30px;}
.inv-panel-title{font-family:'Sora',sans-serif;font-weight:700;font-size:19px;margin:0 0 6px;}
.inv-panel-sub{font-size:14px;line-height:1.6;color:rgba(242,243,245,.62);margin:0;max-width:60ch;}
.inv-progress{display:flex;gap:8px;align-items:center;margin-top:4px;}
.inv-dot{width:26px;height:4px;border-radius:2px;background:rgba(242,243,245,.18);transition:background .3s ease;}
.inv-dot.active{background:#0A70F7;}
.inv-dot.done{background:rgba(10,112,247,.55);}
.inv-step{animation:riseB .4s ease both;}
.inv-q{font-family:'Sora',sans-serif;font-weight:700;font-size:clamp(20px,2.4vw,28px);line-height:1.25;
  letter-spacing:-.01em;margin:0 0 24px;max-width:26ch;text-wrap:balance;}
.inv-q-opt{font-family:'Poppins',sans-serif;font-weight:300;font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(242,243,245,.45);margin-left:10px;vertical-align:middle;}
.vh-inv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:820px;}
.fl{display:block;}
.fl-cap{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(242,243,245,.5);margin-bottom:8px;}
.ifield{height:48px;padding:0 16px;border-radius:10px;border:1px solid rgba(242,243,245,.2);
  background:rgba(242,243,245,.06);color:#F2F3F5;font-family:'Poppins',sans-serif;font-weight:300;
  font-size:15px;outline:none;width:100%;}
.ifield:focus{border-color:#0A70F7;}
.ifield::placeholder{color:rgba(242,243,245,.45);}
.iselect{padding:0 12px;}
.iselect:invalid{color:rgba(242,243,245,.45);}
.iselect option{color:#1D2331;}

/* custom dropdown (replaces native popup so it matches the site) */
.cs{position:relative;}
.cs-native{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;}
.cs-trigger{width:100%;height:48px;padding:0 42px 0 16px;border-radius:10px;
  border:1px solid rgba(242,243,245,.2);background:rgba(242,243,245,.06);color:#F2F3F5;
  font-family:'Poppins',sans-serif;font-weight:300;font-size:15px;text-align:left;cursor:pointer;
  display:flex;align-items:center;position:relative;}
.cs-trigger::after{content:"";position:absolute;right:18px;top:50%;width:9px;height:9px;
  border-right:2px solid rgba(242,243,245,.6);border-bottom:2px solid rgba(242,243,245,.6);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;}
.cs.open .cs-trigger{border-color:#0A70F7;}
.cs.open .cs-trigger::after{transform:translateY(-30%) rotate(225deg);}
.cs-trigger.cs-empty{color:rgba(242,243,245,.45);}
.cs-panel{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:60;
  background:#232c3c;border:1px solid rgba(242,243,245,.16);border-radius:12px;
  box-shadow:0 24px 50px rgba(0,0,0,.5);padding:6px;display:none;max-height:280px;overflow:auto;}
.cs.open .cs-panel{display:block;}
.cs.open{z-index:60;}
.cs-opt{padding:12px 14px;border-radius:8px;font-size:15px;color:rgba(242,243,245,.85);cursor:pointer;}
.cs-opt:hover{background:rgba(10,112,247,.14);color:#F2F3F5;}
.cs-opt.sel{background:rgba(10,112,247,.2);color:#F2F3F5;}
.itextarea{height:auto;padding:14px 16px;line-height:1.55;resize:vertical;margin-top:16px;max-width:820px;}
.inv-choices{display:flex;flex-direction:column;gap:12px;max-width:620px;}
.choice{display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:12px;
  border:1px solid rgba(242,243,245,.16);background:rgba(242,243,245,.04);cursor:pointer;
  font-size:15px;color:rgba(242,243,245,.85);transition:border-color .2s ease,background .2s ease;}
.choice:hover{border-color:rgba(10,112,247,.5);background:rgba(10,112,247,.06);}
.choice input{width:18px;height:18px;accent-color:#0A70F7;flex-shrink:0;}
.choice:has(input:checked){border-color:#0A70F7;background:rgba(10,112,247,.1);color:#F2F3F5;}
.inv-nav{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:30px;}
.inv-nav-right{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-left:auto;}
.inv-note{font-size:12.5px;line-height:1.5;color:rgba(242,243,245,.5);max-width:44ch;}
.inv-back-btn{height:48px;padding:0 22px;font-size:14.5px;}
.inv-next-btn{height:48px;padding:0 30px;font-size:15.5px;}
.inv-done{max-width:640px;margin:8px auto 0;text-align:center;background:rgba(242,243,245,.04);
  border:1px solid rgba(242,243,245,.12);border-radius:20px;padding:clamp(28px,4vw,44px);}
.inv-done-h{font-family:'Sora',sans-serif;font-weight:800;font-size:clamp(22px,2.6vw,32px);color:#F2F3F5;margin:14px 0 12px;}
.inv-done-p{font-size:14.5px;line-height:1.65;color:rgba(242,243,245,.68);margin:0;}

/* ── faq ── */
.vh-faq{border-top:1px solid rgba(242,243,245,.14);padding:24px 0;}
.vh-faq-last{border-bottom:1px solid rgba(242,243,245,.14);}
.vh-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;
  gap:20px;font-family:'Sora',sans-serif;font-weight:600;font-size:clamp(17px,1.8vw,21px);color:#F2F3F5;}
.vh-faq summary::-webkit-details-marker{display:none;}
.vh-q-plus{color:#E12E1D;font-size:26px;transition:transform .25s ease;line-height:1;}
.vh-faq[open] .vh-q-plus{transform:rotate(45deg);}
.faq-a{font-size:15.5px;line-height:1.7;color:rgba(242,243,245,.7);margin:16px 0 0;max-width:70ch;}

/* ── footer ── */
.footer{background:#0d1117;padding:clamp(48px,7vh,88px) 6vw 40px;border-top:1px solid rgba(242,243,245,.08);}
.footer-top{max-width:1180px;margin:0 auto;display:flex;justify-content:space-between;gap:40px;
  flex-wrap:wrap;align-items:flex-start;}
.footer-brand{max-width:32ch;}
.footer-logo{height:32px;width:auto;display:block;margin-bottom:18px;}
.footer-blurb{font-size:13.5px;line-height:1.6;color:rgba(242,243,245,.5);margin:16px 0 0;}
.footer-cols{display:flex;gap:56px;flex-wrap:wrap;}
.footer-col{display:flex;flex-direction:column;gap:12px;font-size:14px;}
.footer-cap{font-size:12px;letter-spacing:.2em;color:rgba(242,243,245,.4);text-transform:uppercase;}
.footer-col a{color:rgba(242,243,245,.75);}
.footer-bottom{max-width:1180px;margin:44px auto 0;padding-top:22px;border-top:1px solid rgba(242,243,245,.08);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12.5px;color:rgba(242,243,245,.42);}
.footer-legal{max-width:74ch;}

/* ── responsive ── */
@media(max-width:860px){.vh-hero,.hero{grid-template-columns:1fr;}.vh-route{display:none;}
  .story-grid{grid-template-columns:1fr;}.vh-3{grid-template-columns:1fr;}.vh-4{grid-template-columns:1fr 1fr;}}
@media(max-width:720px){.vh-inv{grid-template-columns:1fr;}.inv-nav-right{width:100%;justify-content:space-between;}}

/* ── mobile: single sign-up, button outside the field box ── */
@media(max-width:720px){
  /* remove the header sign-up (waitlist lives in the page body) */
  #vh-header .btn-sm{display:none;}
  /* pill forms unwrap: input on top, full-width button beneath */
  .pill-form{display:flex;flex-direction:column;align-items:stretch;gap:12px;
    background:transparent;border:none;border-radius:0;padding:0;width:100%;max-width:420px;}
  .pill-form-light{margin:32px auto 0;}
  .pill-input{width:100%;height:52px;padding:0 18px;border-radius:12px;
    border:1px solid rgba(242,243,245,.24);background:rgba(242,243,245,.06);}
  .pill-input-ink{border:1px solid rgba(29,35,49,.2);background:#fff;}
  .pill-btn{width:100%;height:52px;}
}


/* ── GPU acceleration for smooth fast-scroll (no reflow-heavy props) ── */
.hero, .card, .vote-card, img, .animate-on-scroll {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}
/* prevent layout shift while images load */
img { content-visibility: auto; }

/* centre max-width blocks in centered wrappers (mx-auto is overridden by
   component margin shorthands like .para-ink{margin:26px 0 0}). Doubled class
   raises specificity so auto margins always win. */
.mx-auto.mx-auto { margin-left: auto; margin-right: auto; }