:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f7f7f5;
  background: #02070b;
  --green: #58c52b;
  --green-2: #88ef27;
  --muted: #b8c1ca;
  --panel: rgba(9, 20, 28, 0.86);
  --line: rgba(255, 255, 255, 0.11);
  --red: #ff3b30;
  --orange: #ffb000;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 88% 18%, rgba(61, 181, 28, .2), transparent 24rem), radial-gradient(circle at 19% 19%, rgba(4, 81, 132, .17), transparent 30rem), #02070b; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
main { width: min(100% - 48px, 1320px); margin: 0 auto; overflow: hidden; }

.site-header, .footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 38px 0; }
.logo { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 25px; white-space: nowrap; }
.logo-text span { color: var(--green); }
.logo-mark { position: relative; width: 54px; height: 28px; border: 4px solid #fff; border-top-left-radius: 20px; border-top-right-radius: 20px; border-bottom: 0; display: flex; align-items: flex-end; gap: 3px; padding: 0 10px 3px; box-shadow: -3px 3px 0 rgba(88, 197, 43, .55); }
.logo-mark:before, .logo-mark:after { content: ""; position: absolute; bottom: -3px; width: 8px; height: 8px; border-radius: 99px; background: #fff; }
.logo-mark:before { left: -2px; } .logo-mark:after { right: -2px; }
.logo-mark span { display: block; width: 7px; border-radius: 4px 4px 0 0; background: var(--green-2); }
.logo-mark span:nth-child(1) { height: 11px; } .logo-mark span:nth-child(2) { height: 17px; } .logo-mark span:nth-child(3) { height: 22px; }
.phone .logo { transform: scale(.48); transform-origin: left center; width: 75px; height: 24px; overflow: visible; }
.desktop-nav { display: flex; gap: 45px; font-weight: 700; font-size: 14px; }
.desktop-nav a, .footer a { color: #fff; opacity: .9; }
.header-cta, .primary-button { border-radius: 9px; background: linear-gradient(135deg, #6bdd30, #47b51e); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; gap: 14px; box-shadow: 0 18px 40px rgba(73, 185, 34, .19); }
.header-cta { padding: 18px 35px; }
.menu-button { display: none; background: transparent; border: 0; color: white; }

.hero { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 56px; min-height: 650px; position: relative; }
.hero:after, .feature-panel:after { content: ""; position: absolute; inset: 20% 0 auto 20%; width: 470px; height: 330px; opacity: .45; background-image: radial-gradient(var(--green) 1px, transparent 1px); background-size: 15px 15px; border-radius: 50%; transform: rotate(-18deg); z-index: -1; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(54px, 7vw, 78px); line-height: .98; letter-spacing: -3px; margin-bottom: 28px; }
h1 span { color: var(--green); display: inline-block; }
.hero-copy p { color: var(--muted); font-size: 20px; line-height: 1.8; max-width: 620px; }
.store-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hero-copy .store-row { margin-top: 42px; }
.store-badge { width: 169px; height: 58px; border: 1px solid rgba(255,255,255,.65); border-radius: 7px; display: inline-flex; align-items: center; gap: 10px; justify-content: center; background: #050505; font-weight: 600; font-size: 21px; line-height: .9; }
.store-badge small { display: block; font-size: 9px; letter-spacing: .3px; }
.play-triangle { width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 24px solid #39d353; filter: drop-shadow(7px 0 #ffcf26) drop-shadow(-3px 0 #2488ff); }
.hero-visual { position: relative; min-height: 660px; display: flex; align-items: center; justify-content: center; }
.hero-visual .phone:first-child { transform: rotate(8deg) translateX(24px); z-index: 2; }
.hero-visual .phone:last-child { transform: rotate(8deg) translate(-6px, 26px); }

.phone { width: 292px; height: 580px; border: 4px solid #303b3a; border-radius: 42px; background: linear-gradient(140deg, #20251f, #030608 45%, #172217); padding: 10px; box-shadow: 0 34px 90px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.35); flex: 0 0 auto; }
.phone-screen { height: 100%; border-radius: 32px; background: #03090e; padding: 20px; overflow: hidden; position: relative; }
.phone-screen:before { content: ""; position: absolute; top: 0; left: 34%; width: 92px; height: 24px; background: #000; border-radius: 0 0 14px 14px; }
.phone-status, .phone-top { display: flex; justify-content: space-between; align-items: center; font-size: 10px; font-weight: 800; position: relative; z-index: 2; }
.refill { color: var(--green-2); border: 1px solid var(--green); border-radius: 12px; padding: 4px 8px; font-size: 11px; }
.gauge { width: 186px; height: 168px; margin: 25px auto 4px; display: grid; place-items: center; position: relative; }
.arc { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from -135deg, var(--green) 0 28%, var(--orange) 42%, #ff4b3f 63%, transparent 64%); mask: radial-gradient(circle, transparent 54%, black 56%); }
.gauge strong { font-size: 55px; color: var(--green); line-height: 1; margin-top: 28px; }
.gauge span { color: #aab3ba; font-size: 11px; }
.gauge em { color: var(--green-2); border: 1px solid var(--green); border-radius: 8px; padding: 7px 14px; font-style: normal; font-weight: 800; font-size: 12px; }
.bars { display: flex; align-items: end; gap: 5px; height: 28px; margin: 8px 0 16px; }
.bars span { height: 7px; flex: 1; background: #697078; opacity: .7; } .bars .hot { background: var(--green-2); height: 24px; opacity: 1; }
.engine-card, .summary-card, .trip-total, .score-card, .stats-grid div { background: #0b1720; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.engine-card { display: flex; gap: 14px; padding: 15px; align-items: center; }
.dot { width: 31px; height: 31px; border-radius: 99px; background: radial-gradient(circle, var(--green-2) 3px, rgba(88,197,43,.2) 4px); }
.engine-card strong { color: var(--green); display:block; } .engine-card small { color: #dce3e8; font-size: 10px; }
.stats-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.stats-grid div { padding: 13px; } .stats-grid small, .trip-total small, .summary-card small, .score-card small { color: #95a0a8; display:block; } .stats-grid strong { font-size: 17px; }
.phone-actions { display:grid; grid-template-columns: 1fr 1fr; gap:8px; margin-top:8px; } .phone-actions button { height:42px; border-radius:9px; background: transparent; color: var(--orange); border: 1px solid var(--orange); font-weight:800; } .phone-actions button:last-child { color: var(--red); border-color: var(--red); }
.trip-total { padding: 21px; text-align:center; margin-top: 28px; } .trip-total strong { font-size: 43px; }
.summary-card, .score-card { margin-top: 8px; padding: 14px; } .summary-card strong { color: var(--orange); } .score-card strong { color: var(--green); font-size: 36px; }
.meter, .progress { height: 9px; border-radius: 99px; background: rgba(255,255,255,.12); overflow:hidden; } .meter span { display:block; width:91%; height:100%; background: linear-gradient(90deg, var(--green), var(--orange), var(--red)); }
.new-trip { width: 100%; height: 50px; border: 0; border-radius: 9px; margin-top: 18px; color: white; background: linear-gradient(135deg, #68da2e, #4abb20); font-weight: 900; }

.eyebrow { color: var(--green); text-transform: uppercase; font-weight: 900; letter-spacing: .3px; margin-bottom: 12px; }
.how { text-align: center; padding: 10px 0 42px; }
.how h2, .feature-panel h2, .problem h2, .download h2, .journey h2 { font-size: clamp(34px, 4vw, 46px); line-height: 1.08; letter-spacing: -1.4px; }
.steps { display:grid; grid-template-columns: repeat(3, 1fr); gap: 70px; text-align: left; margin-top: 52px; }
.step { display:flex; gap: 18px; align-items: flex-start; position:relative; }
.step span { color: var(--green-2); font-size: 35px; font-weight: 900; line-height: 1; } .step:nth-child(2) span { color: var(--orange); } .step h3 { font-size: 22px; margin: 0 0 12px; } .step p, .feature-panel p, .problem p, .download p, .journey p { color: var(--muted); line-height:1.65; }

.feature-panel, .problem, .download, .journey { background: linear-gradient(135deg, rgba(10,24,32,.93), rgba(4,9,14,.86)); position: relative; overflow: hidden; }
.feature-panel { display:grid; grid-template-columns: 1fr 1fr; align-items:center; min-height: 420px; padding: 36px 70px; margin: 32px 0; }
.feature-panel.reverse .panel-phone { order:2; } .feature-panel.reverse:after { inset: 20% 10% auto auto; background-image: radial-gradient(var(--orange) 1px, transparent 1px); }
.panel-phone { height: 405px; overflow: hidden; display:flex; justify-content:center; align-items:flex-start; filter: drop-shadow(0 0 54px rgba(88,197,43,.28)); }
.reverse .panel-phone { filter: drop-shadow(0 0 54px rgba(255,176,0,.22)); }
.check-list { list-style:none; padding:0; margin: 28px 0 0; display:grid; gap: 15px; font-size: 18px; color: #dce2e7; }
.check-list li { display:flex; align-items:center; gap: 12px; } .check-list svg { background: var(--green); color:#031006; border-radius:50%; padding:3px; }
.orange-text { color: var(--orange); } .red-text { color: var(--red); }

.problem { display:grid; grid-template-columns: 1fr 330px; gap: 42px; padding: 42px 58px; margin: 34px 0; }
.problem-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 42px; }
.problem-grid p { color:#fff; margin: 0; line-height:1.35; }
.solution-card { border-left: 1px solid rgba(255,255,255,.3); padding-left: 40px; align-self:center; } .solution-card h3 { color: var(--green); font-size: 26px; }
.journey { display:none; padding: 34px; margin-bottom: 28px; }
.comparison-card { border:1px solid var(--green); border-radius:12px; padding:24px 30px; background: linear-gradient(135deg, rgba(80,197,43,.2), rgba(7,16,10,.75)); margin-top: 18px; } .comparison-card span, .saving span { color: var(--green); font-weight:900; } .comparison-card strong { display:block; font-size:36px; margin-top:10px; } .comparison-card b { display:block; color:var(--green-2); font-size:30px; margin-top:14px; } .progress i { display:block; width:97%; height:100%; background:var(--green-2); }
.aggressive { border-color: var(--red); background: linear-gradient(135deg, rgba(255,59,48,.22), rgba(12,6,6,.75)); } .aggressive span { color:#ff6b5f; } .aggressive .progress i { width:91%; background:#ff4d43; }
.vs { width:72px; height:72px; border-radius:50%; display:grid; place-items:center; margin:-10px auto; background:#0e1b24; border:1px solid rgba(255,255,255,.2); font-weight:900; font-size:24px; position:relative; z-index:2; }
.saving { text-align:center; color:var(--green); margin:30px 0 10px; } .saving strong { display:block; font-size:38px; }
.download { display:flex; align-items:center; justify-content:space-between; gap:44px; padding: 27px 70px; margin-top: 32px; } .download h2 { margin-bottom: 6px; }
.footer { padding-bottom: 32px; } .footer nav { display:flex; gap:55px; color:var(--muted); }

@media (max-width: 900px) {
  main { width: min(100% - 18px, 430px); }
  .site-header { padding: 29px 26px; margin-top: 14px; }
  .desktop-nav, .header-cta { display:none; } .menu-button { display:block; }
  .logo { font-size: 20px; } .logo-mark { width:43px; height:22px; border-width:3px; padding:0 8px 2px; }
  .hero { display:block; min-height: 0; padding: 52px 29px 0; }
  h1 { font-size: 44px; letter-spacing: -1.7px; } .hero-copy p { font-size: 16px; line-height:1.7; }
  .store-row { gap: 8px; } .store-badge { width: calc(50% - 4px); height: 49px; font-size: 16px; }
  .hero-visual { min-height: 570px; justify-content:flex-start; margin-left:-24px; } .hero-visual .phone:first-child { transform: rotate(-7deg) scale(.75) translate(-36px, 0); } .hero-visual .phone:last-child { transform: rotate(7deg) scale(.75) translate(-172px, 20px); }
  .how { background: var(--panel); text-align:left; padding: 50px 29px; }
  .steps { grid-template-columns:1fr; gap:52px; margin-top:42px; }
  .feature-panel { grid-template-columns:1fr; padding: 38px 32px; margin: 0; } .feature-panel.reverse .panel-phone { order:0; } .panel-phone { order:2; height: 520px; margin-top:26px; } .panel-copy { order:1; }
  .problem { grid-template-columns:1fr; padding: 38px 32px; } .problem-grid { grid-template-columns:1fr; gap: 20px; } .solution-card { border-left:0; padding: 28px 0 0; background: transparent; }
  .journey { display:block; } .download { display:block; padding: 30px; } .download .store-row { margin-top: 20px; }
  .footer { border:0; flex-wrap:wrap; padding: 34px 18px; } .footer nav { order:3; width:100%; justify-content:space-between; gap:10px; font-size:12px; }
}
.icon { display: inline-grid; place-items: center; line-height: 1; font-style: normal; }
.icon:before { font-size: 1.8em; }
.icon-check:before { content: "✓"; font-size: 13px; font-weight: 900; }
.apple-logo:before { content: ""; font-size: 28px; }
.xmark { color: var(--red); font-size: 25px; font-weight: 300; }
.check-list .icon { width: 18px; height: 18px; background: var(--green); color:#031006; border-radius:50%; padding:3px; flex: none; }
.menu-button { font-size: 36px; line-height: 1; }