/* shareRide - shared styles for index / fair-pricing / eco-impact */
:root{
  --green:#0B6B45; --green-deep:#084F33; --green-dark:#063421;
  --orange:#F57F20; --orange-soft:#F5A056; --orange-deep:#D66711;
  --mint:#8FD6B2; --mint-bg:#EDF6F1;
  --ink:#0E1A2B; --body:#2E3A4D; --muted:#5C6776;
  --line:#E2E6EC; --gray-bg:#F8F9FB;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --serif:'Source Serif 4',Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--sans);color:var(--ink);background:#fff;line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--green);text-decoration:none}
a:hover{color:var(--green-deep)}
input[type="range"]{accent-color:var(--orange);width:100%}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:16px 64px;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink)}
.brand-word{font:800 21px/1 var(--sans)}
.brand-word b{color:var(--green);font-weight:800}
.brand-sub{font:500 10px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.nav-links{display:flex;align-items:center;gap:32px;font:500 15px/1 var(--sans)}
.nav-links a.active{color:var(--green-deep);font-weight:700}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;cursor:pointer;
  border-radius:12px;font:600 15px/1 var(--sans);padding:12px 22px;color:#fff;background:var(--green);transition:background .15s}
.btn:hover{background:var(--green-deep);color:#fff}
.btn--orange{background:var(--orange);font-size:16px;padding:16px 28px}
.btn--orange:hover{background:var(--orange-deep)}
.btn--lg{font-size:16px;padding:16px 28px}

/* ---------- Sections ---------- */
.sec{padding:96px}
.sec--gray{background:var(--gray-bg)}
.sec--dark{background:var(--green-dark);color:#fff}
.sec--mint{background:var(--mint-bg)}
.eyebrow{font:600 13px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--green);margin-bottom:16px}
.eyebrow--mint{color:var(--mint)}
.h2{font:700 44px/1.1 var(--sans);letter-spacing:-.02em}
.h2--serif{font:700 48px/1.1 var(--serif)}
.lead{font:400 18px/1.55 var(--sans);color:var(--body)}
.sec--dark .lead{color:rgba(255,255,255,.85)}

/* ---------- Grids ---------- */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:stretch}
.g2-wide{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}

/* ---------- Cards & tiles ---------- */
.tile{background:var(--mint-bg);border-radius:24px;padding:36px}
.tile--sm{border-radius:16px;padding:32px}
.tile--dark{background:var(--green-dark);color:#fff}
.card{background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:0 2px 8px rgba(14,26,43,.06)}
.card-img{position:relative;height:200px}
.card-img img{width:100%;height:100%;object-fit:cover}
.card-badge{position:absolute;top:14px;left:14px;font:600 12px/1 var(--sans);color:#fff;background:var(--green);padding:7px 12px;border-radius:999px}
.card-badge--soon{color:var(--green-dark);background:var(--orange-soft)}
.card-body{padding:28px}
.card-body h3{font:600 22px/1.25 var(--sans);margin:0 0 8px}
.card-body p{font:400 15px/1.55 var(--sans);color:var(--body);margin:0 0 20px}
.glass{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:28px}

/* ---------- Feature rows (why / safety) ---------- */
.feat{display:flex;gap:16px}
.feat svg{flex:0 0 auto;margin-top:2px}
.feat h4{font:600 17px/1.3 var(--sans);margin:0 0 4px}
.feat p{font:400 15px/1.5 var(--sans);color:var(--body);margin:0}

/* ---------- Hero (photo) ---------- */
.hero{position:relative;height:680px}
.hero--short{height:520px}
.hero-media{position:absolute;inset:0;overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(105deg,rgba(6,52,33,.92) 0%,rgba(8,79,51,.62) 55%,rgba(8,79,51,.18) 100%)}
.hero-content{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 96px;max-width:780px}
.hero-h{font:700 64px/1.08 var(--serif);letter-spacing:-.02em;color:#fff}
.hero-h em{font-style:normal;color:var(--orange-soft)}
.hero-p{font:400 19px/1.55 var(--sans);color:rgba(255,255,255,.92);margin:24px 0 36px;max-width:560px}

/* ---------- Impact strip ---------- */
.strip{display:grid;grid-template-columns:1fr 1fr 1fr;background:var(--green-dark)}
.strip-cell{padding:28px 64px;border-right:1px solid rgba(255,255,255,.12)}
.strip-cell:last-child{border-right:0}
.strip-n{font:800 28px/1.1 var(--sans);color:#fff}
.strip-n em{font-style:normal;color:var(--orange-soft)}
.strip-l{font:500 13px/1.4 var(--sans);color:var(--mint);letter-spacing:.06em;text-transform:uppercase;margin-top:6px}

/* ---------- Calculator panels ---------- */
.calc{background:var(--green-deep);border-radius:24px;padding:40px;color:#fff;box-shadow:0 8px 24px rgba(14,26,43,.08)}
.calc--dark{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14)}
.calc-row{display:flex;justify-content:space-between;align-items:baseline}
.calc-label{font:600 16px/1 var(--sans)}
.calc-val{font:700 16px/1 var(--sans);color:var(--orange-soft)}
.calc input[type="range"]{margin:16px 0 32px}
.opts{display:grid;gap:10px}
.opts-6{grid-template-columns:repeat(6,1fr)}
.opts-3{grid-template-columns:repeat(3,1fr)}
.opt{background:rgba(255,255,255,.10);color:#fff;font:600 15px/1 var(--sans);text-align:center;padding:13px 0;border-radius:10px;cursor:pointer;border:0;transition:background .15s}
.opt small{display:block;font:400 11px/1 var(--sans);margin-top:5px;opacity:.8}
.opt.active{background:var(--orange)}
.calc-note{font:400 12px/1.5 var(--sans);color:rgba(255,255,255,.65)}
.result{background:#fff;border:1px solid var(--line);border-radius:24px;padding:40px;box-shadow:0 2px 8px rgba(14,26,43,.06)}
.result-kicker{font:600 12px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.result-big{display:flex;align-items:baseline;gap:10px;margin:12px 0 28px}
.result-big .n{font:800 64px/1 var(--sans);color:var(--green)}
.result-big .u{font:700 20px/1 var(--sans);color:var(--muted)}
.break{border-top:1px solid var(--line);padding-top:24px;display:flex;flex-direction:column;gap:14px;font:400 15px/1.4 var(--sans);color:var(--body)}
.break-row{display:flex;justify-content:space-between;gap:16px}
.break-row b{font-weight:600;color:var(--ink)}
.break-row.eco span{color:var(--green);font-weight:600}
.break-row.eco b{color:var(--green)}
.break-row.total{border-top:1px solid var(--line);padding-top:14px}
.break-row.total span{font-weight:700;color:var(--ink)}
.break-row.total b{font-weight:800;color:var(--orange)}

/* ---------- Dark stat tiles (eco) ---------- */
.dstat-l{font:600 12px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--mint)}
.dstat-n{font:800 40px/1.1 var(--sans);color:#fff;margin-top:10px}
.dstat-n.orange{color:var(--orange-soft)}

/* ---------- Pipeline (eco) ---------- */
.pipe{display:grid;grid-template-columns:380px 1fr;gap:32px;align-items:stretch}
.pipe-steps{display:flex;flex-direction:column;gap:12px}
.pstep{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:20px 24px;cursor:pointer;transition:all .22s cubic-bezier(.2,.8,.2,1);text-align:left;font-family:var(--sans)}
.pstep-num{font:800 15px/1 var(--sans);color:var(--green);background:var(--mint-bg);border-radius:999px;
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.pstep-t{font:600 16px/1.3 var(--sans);color:var(--ink)}
.pstep-s{font:400 13px/1.4 var(--sans);color:var(--muted)}
.pstep.active{background:var(--green);border-color:var(--green)}
.pstep.active .pstep-num{background:rgba(255,255,255,.15);color:#fff}
.pstep.active .pstep-t{color:#fff}
.pstep.active .pstep-s{color:rgba(255,255,255,.75)}
.pipe-detail{background:var(--green-dark);border-radius:24px;padding:48px;color:#fff;display:flex;flex-direction:column;justify-content:center}
.pipe-dots{display:flex;gap:8px;margin-top:32px}
.pipe-dot{height:6px;width:20px;background:rgba(255,255,255,.25);border-radius:999px;cursor:pointer;border:0;padding:0;transition:all .22s cubic-bezier(.2,.8,.2,1)}
.pipe-dot.active{width:40px;background:var(--orange-soft)}

/* ---------- Islands (eco) ---------- */
@keyframes island-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes island-shadow{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.82);opacity:.55}}
.island-card{border:1px solid var(--line);border-radius:24px;background:#fff;box-shadow:0 2px 8px rgba(14,26,43,.06);transition:all .22s cubic-bezier(.2,.8,.2,1)}
.island-card.voted{border:1.5px solid var(--green)}
.island-stage{position:relative;height:250px;padding:24px 24px 0}
.island-tag{position:absolute;top:14px;left:14px;z-index:2;font:600 12px/1 var(--sans);color:var(--green-dark);background:var(--mint-bg);padding:7px 12px;border-radius:999px}
.island-art{height:190px;display:flex;align-items:center;justify-content:center;animation:island-bob 5s ease-in-out infinite}
.island-art img{max-width:260px;height:185px;object-fit:contain}
.island-shadow{width:150px;height:18px;margin:6px auto 0;background:radial-gradient(ellipse at center,rgba(6,52,33,.35) 0%,rgba(6,52,33,0) 70%);animation:island-shadow 5s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.island-art,.island-shadow{animation:none}}
.pill{font:600 12px/1 var(--sans);color:var(--green);background:var(--mint-bg);padding:6px 12px;border-radius:999px}
.pill--gray{color:var(--muted);background:#F1F3F7}
.meter{height:8px;background:#F1F3F7;border-radius:999px;overflow:hidden}
.meter > div{height:100%;background:var(--green);border-radius:999px;transition:width .32s cubic-bezier(.2,.8,.2,1)}
.vote-btn{display:block;width:100%;text-align:center;font:600 15px/1 var(--sans);color:var(--green);background:#fff;
  border:1.5px solid var(--green);padding:13px 0;border-radius:12px;cursor:pointer;transition:all .15s cubic-bezier(.2,.8,.2,1)}
.island-card.voted .vote-btn{background:var(--green);color:#fff}

/* ---------- Rules list (pricing) ---------- */
.rule{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 24px;display:flex;gap:14px;align-items:baseline}
.rule-num{font:800 15px/1 var(--sans);color:var(--orange)}
.rule span:last-child{font:400 15px/1.5 var(--sans);color:var(--body)}

/* ---------- CTA band + footer ---------- */
.cta-band{padding:80px 96px;background:var(--mint-bg);display:flex;align-items:center;justify-content:space-between;gap:48px;flex-wrap:wrap}
.footer{padding:48px 96px;background:var(--green-dark);display:flex;flex-direction:column;gap:24px}
.footer-top{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.footer-links{display:flex;gap:32px;font:500 14px/1 var(--sans);flex-wrap:wrap}
.footer-links a{color:rgba(255,255,255,.85)}
.footer-links a:hover{color:#fff}
.footer-bottom{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap}
.footer-note{font:400 13px/1.5 var(--sans);color:rgba(255,255,255,.6)}
.footer-site{font:600 13px/1.5 var(--sans);color:var(--mint)}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .sec{padding:72px 40px}
  .cta-band{padding:64px 40px}
  .footer{padding:40px 40px}
  .nav{padding:14px 24px}
  .hero-content{padding:0 40px}
  .strip-cell{padding:24px 32px}
  .g2-wide{gap:40px}
  .pipe{grid-template-columns:1fr}
  .h2{font-size:36px}
  .hero-h{font-size:52px}
}
@media (max-width:840px){
  .nav-links{display:none}
  .sec{padding:56px 20px}
  .cta-band{padding:48px 20px}
  .footer{padding:36px 20px}
  .hero{height:auto;min-height:560px}
  .hero-content{position:relative;padding:120px 20px 64px}
  .hero-h{font-size:40px}
  .hero-p{font-size:17px}
  .g2,.g2-wide,.g3,.g4,.strip{grid-template-columns:1fr}
  .strip-cell{border-right:0;border-bottom:1px solid rgba(255,255,255,.12)}
  .strip-cell:last-child{border-bottom:0}
  .g2-wide{gap:32px}
  .h2{font-size:30px}
  .h2--serif{font-size:32px}
  .pipe-detail{padding:32px 24px}
  .calc,.result{padding:28px 20px}
  .hero--short{min-height:440px}
}