/* ==========================================================================
   FuelDrop — Design System
   Font: DM Sans — Headings 800, Body 500, Labels 11px/1.5ls uppercase
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700;9..40,800;9..40,900&family=DM+Mono:wght@400;500&display=swap');

:root{
  /* --- brand tokens (fixed) --- */
  --primary: #00E5A0;
  --primary-dim: #00E5A033;
  --accent: #FF6B2C;
  --accent-dim: #FF6B2C33;
  --bg: #0A0A0F;
  --bg-raise: #0D0D14;
  --card: #16161F;
  --card-hi: #1C1C28;
  --line: #26263480;
  --text: #F0F0FF;
  --muted: #8888AA;

  /* --- derived --- */
  --primary-glow: 0 0 40px rgba(0,229,160,.35);
  --accent-glow: 0 0 40px rgba(255,107,44,.35);
  --gradient-primary: linear-gradient(135deg,#00E5A0,#00B8FF 120%);
  --gradient-accent: linear-gradient(135deg,#FF6B2C,#FFB23C 120%);
  --gradient-mesh: radial-gradient(circle at 15% 20%, rgba(0,229,160,.16), transparent 45%),
                    radial-gradient(circle at 85% 0%, rgba(255,107,44,.12), transparent 40%),
                    radial-gradient(circle at 50% 100%, rgba(0,184,255,.10), transparent 45%);

  /* --- type scale --- */
  --font-display: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'DM Mono', 'SF Mono', monospace;

  --fs-h1: clamp(2.6rem, 3.2vw + 1.6rem, 5.25rem);
  --fs-h2: clamp(2rem, 1.7vw + 1.4rem, 3.25rem);
  --fs-h3: clamp(1.35rem, .8vw + 1.1rem, 1.85rem);
  --fs-h4: clamp(1.05rem, .3vw + .95rem, 1.25rem);
  --fs-lead: clamp(1.05rem, .4vw + .95rem, 1.3rem);
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-label: .6875rem; /* 11px */

  --lh-tight: 1.08;
  --lh-heading: 1.18;
  --lh-body: 1.65;

  /* --- spacing / radius --- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --section-pad: clamp(4.5rem, 6vw, 8rem);
  --edge: clamp(1.25rem, 4vw, 3rem);
  --maxw: 1280px;

  --ease: cubic-bezier(.16,.8,.24,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

/* ==========================================================================
   Reset
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}
body{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
img,svg{ display:block; max-width:100%; }
input,select,textarea{ font:inherit; color:inherit; }

/* ==========================================================================
   Base
   ========================================================================== */
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-display);
  font-weight:500;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}

body::before{
  content:'';
  position:fixed; inset:0;
  background:var(--gradient-mesh);
  pointer-events:none;
  z-index:0;
  opacity:.9;
}

.noise{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:800;
  line-height:var(--lh-heading);
  letter-spacing:-.02em;
  margin:0;
}
h1{ font-size:var(--fs-h1); line-height:var(--lh-tight); letter-spacing:-.03em; }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); }
h4{ font-size:var(--fs-h4); }

p{ margin:0; color:var(--muted); }
.lead{ font-size:var(--fs-lead); color:var(--text); font-weight:500; }

.label{
  font-size:var(--fs-label);
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--primary);
}
.label.muted{ color:var(--muted); }
.label.accent{ color:var(--accent); }

.mono{ font-family:var(--font-mono); }

::selection{ background:var(--primary); color:#04120c; }

/* scrollbar */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:#26263a; border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background:var(--primary); }

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--edge); position:relative; z-index:2; }
section{ position:relative; z-index:2; padding-block:var(--section-pad); }
.section-tight{ padding-block:clamp(2.5rem,4vw,4rem); }

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.logo-img {
  height: 45px;
  width: auto;
}

.logo-text {
  font-size: 1.5rem;
  font-weight: 700;
  color: #222;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:var(--fs-label); font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted); margin-bottom:1.25rem;
}
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--primary); box-shadow:0 0 10px var(--primary); flex:none; }

.head-row{
  display:flex; justify-content:space-between; align-items:flex-end; gap:2rem;
  margin-bottom:clamp(2.5rem,4vw,3.5rem);
}
.head-row p{ max-width:32ch; }

.grid{ display:grid; gap:1.5rem; }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-4{ grid-template-columns:repeat(4,1fr); }

.divider{ height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent); border:none; margin:0; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:1rem 1.75rem;
  border-radius:var(--radius-pill);
  font-weight:700; font-size:.95rem;
  white-space:nowrap;
  transition:transform .35s var(--ease-spring), box-shadow .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
  isolation:isolate;
  overflow:hidden;
}
.btn:active{ transform:scale(.96); }

.btn-primary{
  background:var(--gradient-primary);
  color:#04120c;
  box-shadow:0 8px 30px -8px rgba(0,229,160,.55);
}
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 14px 36px -8px rgba(0,229,160,.7); }

.btn-accent{
  background:var(--gradient-accent);
  color:#1a0900;
  box-shadow:0 8px 30px -8px rgba(255,107,44,.55);
}
.btn-accent:hover{ transform:translateY(-3px); box-shadow:0 14px 36px -8px rgba(255,107,44,.7); }

.btn-ghost{
  background:rgba(240,240,255,.03);
  border:1px solid var(--line);
  color:var(--text);
  backdrop-filter:blur(6px);
}
.btn-ghost:hover{ border-color:var(--primary); background:rgba(0,229,160,.06); transform:translateY(-3px); }

.btn-text{
  padding:.4rem 0; border-radius:0;
  color:var(--text); font-weight:700;
  border-bottom:1px solid var(--line);
}
.btn-text:hover{ border-color:var(--primary); color:var(--primary); }

.btn-sm{ padding:.7rem 1.25rem; font-size:.85rem; }

.btn .shine{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);
  transform:translateX(-120%);
}
.btn:hover .shine{ transition:transform .8s var(--ease); transform:translateX(120%); }

/* ==========================================================================
   Nav
   ========================================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:1.35rem var(--edge);
  display:flex; align-items:center; justify-content:space-between;
  transition:padding .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  padding-block:.85rem;
  background:rgba(10,10,15,.72);
  backdrop-filter:blur(16px) saturate(140%);
  border-color:var(--line);
}

.logo{
  position:relative;
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-display); font-weight:800; font-size:1.15rem;
  letter-spacing:-.02em;
  padding:.35rem .5rem;
  border-radius:8px;
  isolation:isolate;
}
.logo-mark{
  width:30px; height:30px; border-radius:9px;
  background:var(--gradient-primary);
  display:grid; place-items:center;
  font-size:1rem;
  box-shadow:0 0 0 1px rgba(0,229,160,.25), 0 6px 20px -6px rgba(0,229,160,.6);
  flex:none;
  transition:transform .5s var(--ease-spring);
}
.logo:hover .logo-mark{ transform:rotate(-14deg) scale(1.08); }

.logo-text{ position:relative; }
.logo-text::after{
  content:''; position:absolute; left:0; bottom:-4px; height:2px; width:100%;
  background:var(--gradient-primary);
  transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
}
.logo:hover .logo-text::after{ transform:scaleX(1); }

.logo::before{
  content:''; position:absolute; inset:-6px; z-index:-1;
  border:1px solid var(--primary);
  border-radius:12px;
  opacity:0; transform:scale(.85);
  transition:opacity .35s var(--ease), transform .35s var(--ease-spring);
}
.logo:hover::before{ opacity:.55; transform:scale(1); }
.logo.clicked::before{
  animation:logoFrame .6s var(--ease) forwards;
}
.logo.clicked .logo-mark{ animation:logoPop .55s var(--ease-spring); }
@keyframes logoFrame{
  0%{ opacity:.9; transform:scale(.9); box-shadow:0 0 0 0 rgba(0,229,160,.5); }
  60%{ opacity:1; transform:scale(1.06); box-shadow:0 0 0 6px rgba(0,229,160,0); }
  100%{ opacity:0; transform:scale(1.12); }
}
@keyframes logoPop{
  0%{ transform:scale(1); }
  40%{ transform:scale(.85) rotate(-8deg); }
  100%{ transform:scale(1); }
}

.nav-links{ display:flex; align-items:center; gap:2.5rem; }
.nav-links a{
  font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted);
  position:relative; padding-block:.3rem;
}
.nav-links a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--primary); transform:scaleX(0); transform-origin:right;
  transition:transform .35s var(--ease);
}
.nav-links a:hover{ color:var(--text); }
.nav-links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav-links a.active{ color:var(--text); }
.nav-links a.active::after{ transform:scaleX(1); background:var(--gradient-primary); }

.nav-cta{ display:flex; align-items:center; gap:1rem; }

.nav-burger{
  display:none; flex-direction:column; gap:5px; padding:.5rem; z-index:110;
}
.nav-burger span{ width:22px; height:2px; background:var(--text); border-radius:2px; transition:transform .35s var(--ease), opacity .35s var(--ease); }
.nav-burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2){ opacity:0; }
.nav-burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:99;
  background:rgba(10,10,15,.98); backdrop-filter:blur(20px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.25rem;
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility 0s linear .4s;
}
.mobile-menu.open{ opacity:1; visibility:visible; transform:translateY(0); transition:opacity .4s var(--ease), transform .4s var(--ease); }
.mobile-menu a{ font-size:1.6rem; font-weight:800; }

/* progress bar tied to scroll (fuel flow) */
.flow-progress{
  position:fixed; top:0; left:0; height:3px; z-index:200;
  background:var(--gradient-primary);
  width:0%;
  box-shadow:0 0 12px rgba(0,229,160,.7);
  transition:width .1s linear;
}

/* ==========================================================================
   Reveal-on-scroll
   ========================================================================== */
[data-reveal]{
  opacity:0; transform:translateY(28px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal].in{ opacity:1; transform:translateY(0); }
[data-reveal="scale"]{ transform:translateY(0) scale(.92); }
[data-reveal="scale"].in{ transform:scale(1); }
[data-reveal="left"]{ transform:translateX(-32px); }
[data-reveal="left"].in{ transform:translateX(0); }
[data-reveal="right"]{ transform:translateX(32px); }
[data-reveal="right"].in{ transform:translateX(0); }

/* ==========================================================================
   Cards
   ========================================================================== */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:clamp(1.5rem,2vw,2.25rem);
  position:relative;
  transition:transform .5s var(--ease), border-color .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease);
}
.card:hover{
  transform:translateY(-6px);
  border-color:rgba(0,229,160,.35);
  background:var(--card-hi);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.6);
}
.card-icon{
  width:50px; height:50px; border-radius:14px;
  display:grid; place-items:center; font-size:1.35rem;
  background:rgba(0,229,160,.1);
  margin-bottom:1.25rem;
  transition:transform .5s var(--ease-spring), background .4s var(--ease);
}
.card:hover .card-icon{ transform:scale(1.08) rotate(-6deg); background:rgba(0,229,160,.18); }
.card h3{ margin-bottom:.6rem; font-size:1.15rem; }
.card p{ font-size:.925rem; }

.card-accent .card-icon{ background:rgba(255,107,44,.1); }
.card-accent:hover{ border-color:rgba(255,107,44,.35); }
.card-accent:hover .card-icon{ background:rgba(255,107,44,.18); }

/* pill badges */
.pill{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem .9rem; border-radius:var(--radius-pill);
  background:rgba(240,240,255,.04); border:1px solid var(--line);
  font-size:.8rem; font-weight:600; color:var(--muted);
}

/* ==========================================================================
   Footer
   ========================================================================== */
footer{
  position:relative; z-index:2;
  border-top:1px solid var(--line);
  padding-block:clamp(3.5rem,5vw,5.5rem) 2rem;
  background:linear-gradient(180deg,transparent,rgba(0,229,160,.03));
}
.footer-top{
  display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:3rem;
  padding-bottom:3rem; margin-bottom:2rem; border-bottom:1px solid var(--line);
}
.footer-brand p{ margin-top:1rem; max-width:34ch; font-size:.9rem; }
.footer-social{ display:flex; gap:.75rem; margin-top:1.5rem; }
.footer-social a{
  width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
  border:1px solid var(--line); font-size:.85rem;
  transition:all .35s var(--ease);
}
.footer-social a:hover{ border-color:var(--primary); background:rgba(0,229,160,.08); transform:translateY(-3px); }

.footer-col h4{ font-size:var(--fs-label); text-transform:uppercase; letter-spacing:.15em; color:var(--text); margin-bottom:1.25rem; }
.footer-col a, .footer-col .frow{ display:block; font-size:.9rem; color:var(--muted); margin-bottom:.85rem; transition:color .3s var(--ease), transform .3s var(--ease); }
.footer-col a:hover{ color:var(--primary); transform:translateX(3px); }

.footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.footer-bottom p{ font-size:.8rem; }
.footer-legal{ display:flex; gap:1.5rem; }
.footer-legal a{ font-size:.8rem; color:var(--muted); }
.footer-legal a:hover{ color:var(--text); }

.footer-newsletter{
  display:flex; gap:.6rem; margin-top:1.25rem;
}
.footer-newsletter input{
  background:rgba(240,240,255,.04); border:1px solid var(--line); border-radius:var(--radius-pill);
  padding:.8rem 1.1rem; color:var(--text); font-size:.85rem; width:100%; min-width:0;
  transition:border-color .3s var(--ease);
}
.footer-newsletter input:focus{ outline:none; border-color:var(--primary); }
.footer-newsletter button{
  flex:none; width:44px; height:44px; border-radius:50%;
  background:var(--gradient-primary); color:#04120c; display:grid; place-items:center; font-weight:800;
  transition:transform .3s var(--ease-spring);
}
.footer-newsletter button:hover{ transform:scale(1.08) rotate(8deg); }

/* ==========================================================================
   Utility
   ========================================================================== */
.text-center{ text-align:center; }
.mx-auto{ margin-inline:auto; }
.mt-1{ margin-top:1rem; } .mt-2{ margin-top:2rem; } .mt-3{ margin-top:3rem; }
.mb-1{ margin-bottom:1rem; } .mb-2{ margin-bottom:2rem; } .mb-3{ margin-bottom:3rem; }
.flex{ display:flex; } .items-center{ align-items:center; } .gap-1{ gap:1rem; } .gap-2{ gap:2rem; }
.hide-mobile{ display:initial; }
.show-mobile{ display:none; }

.glow-blob{
  position:absolute; border-radius:50%; filter:blur(80px); z-index:0; pointer-events:none;
  opacity:.5;
}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--primary); outline-offset:3px; border-radius:4px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1080px){
  .g-4{ grid-template-columns:repeat(2,1fr); }
  .footer-top{ grid-template-columns:1fr 1fr; row-gap:2.5rem; }
}
@media (max-width:860px){
  .nav-links{ display:none; }
  .nav-burger{ display:flex; }
  .g-3{ grid-template-columns:1fr 1fr; }
  .hide-mobile{ display:none; }
  .show-mobile{ display:initial; }
}
@media (max-width:640px){
  .g-2,.g-3,.g-4{ grid-template-columns:1fr; }
  .head-row{ flex-direction:column; align-items:flex-start; }
  .footer-top{ grid-template-columns:1fr; }
  .nav-cta .btn-ghost{ display:none; }
  section{ padding-block:clamp(3.25rem,10vw,5rem); }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative; overflow:hidden;
  padding-top:clamp(8rem,10vw,10rem);
  padding-bottom:clamp(4rem,6vw,6rem);
}
.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:center;
}
.text-gradient{
  background:var(--gradient-primary);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-actions{ flex-wrap:wrap; }
.hero-facts{
  display:flex; flex-wrap:wrap; gap:.6rem 1rem; margin-top:2.25rem;
  padding-top:1.75rem; border-top:1px solid var(--line);
}
.hero-facts span{ font-size:.8rem; color:var(--muted); font-weight:600; }

/* Phone mockup */
.phone-stage{ position:relative; display:flex; justify-content:center; perspective:1200px; transition:transform .1s linear; }
.phone-glow{
  position:absolute; inset:10% 15%; z-index:-1; border-radius:50%;
  background:radial-gradient(circle, rgba(0,229,160,.35), transparent 70%);
  filter:blur(50px);
}
.phone-glow.accent{ background:radial-gradient(circle, rgba(255,107,44,.3), transparent 70%); }
.phone{
  width:280px; background:#0D0D14; border:10px solid #1c1c28;
  border-radius:42px; padding:14px; box-shadow:0 40px 80px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(240,240,255,.04);
  position:relative;
}
.phone-lg{ width:300px; }
.phone-notch{
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  width:90px; height:22px; background:#0D0D14; border-radius:12px; z-index:5;
}
.phone-screen{
  background:linear-gradient(180deg,#101018,#0A0A0F); border-radius:30px;
  padding:2.75rem 1.15rem 1.25rem; min-height:480px; position:relative; overflow:hidden;
}
.app-status{ display:flex; justify-content:space-between; font-size:.7rem; color:var(--muted); margin-bottom:1rem; font-family:var(--font-mono); }
.app-greet h4{ font-size:1.1rem; margin-top:.25rem; }
.wallet-card{
  background:linear-gradient(155deg, rgba(0,229,160,.14), rgba(22,22,31,.6));
  border:1px solid rgba(0,229,160,.25);
  border-radius:20px; padding:1.25rem; margin-top:1.25rem;
}
.wallet-amount{ font-size:2.1rem; font-weight:800; margin:.25rem 0; letter-spacing:-.02em; }
.small{ font-size:.78rem; }
.wallet-stats{ display:flex; gap:1.5rem; margin-top:1rem; }
.wallet-stats div{ display:flex; flex-direction:column; gap:.15rem; }
.wallet-stats strong{ font-size:1rem; }
.wallet-actions{ display:flex; gap:.6rem; margin-top:1.25rem; }
.wa-btn{
  flex:1; padding:.7rem .5rem; border-radius:12px; font-size:.75rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:.35rem;
  transition:transform .3s var(--ease-spring);
}
.wa-btn.primary{ background:var(--gradient-primary); color:#04120c; }
.wa-btn.accent{ background:var(--gradient-accent); color:#1a0900; }
.wa-btn:hover{ transform:translateY(-2px); }
.wa-btn.full{ width:100%; }
.activity-row{
  display:grid; grid-template-columns:32px 1fr auto; align-items:center; gap:.7rem;
  padding:.65rem 0; border-bottom:1px solid var(--line); font-size:.78rem;
}
.activity-row .av{ width:32px; height:32px; border-radius:50%; background:#22222f; display:grid; place-items:center; font-size:.75rem; font-weight:700; }
.activity-row strong{ display:block; font-size:.8rem; }
.activity-row small{ color:var(--muted); font-size:.68rem; }
.activity-row .amt{ text-align:right; font-weight:700; font-size:.8rem; }
.activity-row .amt em{ display:block; font-style:normal; font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.activity-row .amt .ok{ color:var(--primary); }
.activity-row .amt .pending{ color:var(--accent); }
.activity-row .amt .expired{ color:var(--muted); }
.input-mock{
  background:rgba(240,240,255,.04); border:1px solid var(--line); border-radius:12px;
  padding:.8rem .9rem; font-size:.78rem; margin-top:.5rem; display:flex; justify-content:space-between; color:var(--muted);
}
.amount-chips{ display:flex; gap:.5rem; margin-top:.5rem; }
.chip{
  flex:1; text-align:center; padding:.6rem; border-radius:10px; font-size:.8rem; font-weight:700;
  background:rgba(240,240,255,.04); border:1px solid var(--line); color:var(--muted);
}
.chip.active{ background:rgba(0,229,160,.14); border-color:var(--primary); color:var(--primary); }
.redeem-amount{ font-size:2.4rem; font-weight:800; text-align:center; margin:1.25rem 0 .5rem; }
.qr-box{
  width:150px; height:150px; margin:0 auto 1rem; border-radius:18px;
  background:#fff; color:#0A0A0F; display:grid; place-items:center; font-size:2.5rem;
  position:relative; overflow:hidden;
}
.qr-scan{
  position:absolute; left:0; right:0; height:3px; background:var(--primary); box-shadow:0 0 12px var(--primary);
  animation:scanMove 2.2s ease-in-out infinite;
}
@keyframes scanMove{ 0%,100%{ top:6%; } 50%{ top:94%; } }
.ok{ color:var(--primary); font-weight:700; }
.phone-tabbar{
  display:flex; justify-content:space-around; margin-top:.75rem; padding-top:.75rem; border-top:1px solid var(--line);
}
.phone-tabbar span{ font-size:1.1rem; display:flex; flex-direction:column; align-items:center; gap:.2rem; opacity:.55; }
.phone-tabbar span small{ font-size:.6rem; color:var(--muted); font-weight:600; }

/* Steps / flow line */
.steps-flow{ position:relative; margin-top:1rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.steps-line{ position:absolute; top:34px; left:0; width:100%; height:6px; z-index:0; }
.step-card{
  position:relative; z-index:1; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:1.75rem; transition:transform .5s var(--ease), border-color .5s var(--ease);
}
.step-card:hover{ transform:translateY(-6px); border-color:var(--primary); }
.step-num{
  width:52px; height:52px; border-radius:16px; display:grid; place-items:center;
  background:var(--gradient-primary); color:#04120c; font-weight:800; font-size:1.1rem; margin-bottom:1rem;
  box-shadow:0 8px 24px -6px rgba(0,229,160,.5);
}
.step-card:nth-child(3) .step-num, .step-card:nth-child(4) .step-num{ background:var(--gradient-accent); box-shadow:0 8px 24px -6px rgba(255,107,44,.5); }

/* App preview grid */
.app-preview-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:3rem; align-items:center; }
.app-tabs{ display:flex; flex-direction:column; gap:1rem; }
.app-tab{
  display:flex; align-items:center; gap:1rem; text-align:left;
  padding:1.1rem 1.25rem; border-radius:16px; border:1px solid var(--line); background:var(--card);
  transition:all .35s var(--ease);
}
.app-tab-ico{ font-size:1.3rem; }
.app-tab strong{ display:block; font-size:.95rem; }
.app-tab small{ color:var(--muted); font-size:.78rem; }
.app-tab:hover{ border-color:var(--primary); transform:translateX(4px); }
.app-tab.active{ border-color:var(--primary); background:rgba(0,229,160,.08); box-shadow:0 0 0 1px rgba(0,229,160,.2); }
.app-panel{ display:none; animation:panelIn .5s var(--ease); }
.app-panel.active{ display:block; }
@keyframes panelIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }

/* CTA band */
.cta-band{
  position:relative; text-align:center; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:clamp(3rem,5vw,4.5rem) 2rem; overflow:hidden;
}
.cta-band h2{ max-width:24ch; margin-inline:auto; }
.cta-checks{ flex-wrap:wrap; justify-content:center; font-size:.85rem; color:var(--muted); }

/* Mini steps / callouts */
.mini-steps{ margin-top:1.5rem; display:flex; flex-direction:column; gap:1rem; }
.mini-steps li{ display:flex; gap:1rem; align-items:flex-start; }
.mini-steps li span{
  flex:none; width:26px; height:26px; border-radius:8px; background:rgba(0,229,160,.12); color:var(--primary);
  display:grid; place-items:center; font-size:.75rem; font-weight:800;
}
.card-accent .mini-steps li span{ background:rgba(255,107,44,.12); color:var(--accent); }
.mini-steps strong{ display:block; font-size:.9rem; color:var(--text); margin-bottom:.15rem; }
.mini-steps p{ font-size:.83rem; }
.callout{
  margin-top:1.5rem; padding:1rem 1.15rem; border-radius:14px; font-size:.82rem;
  background:rgba(0,229,160,.08); border:1px solid rgba(0,229,160,.2); color:var(--text);
}
.callout.accent{ background:rgba(255,107,44,.08); border-color:rgba(255,107,44,.2); }
.fleet-banner{
  display:grid; grid-template-columns:auto 1fr auto; gap:1.75rem; align-items:center;
  background:linear-gradient(120deg, rgba(255,107,44,.08), rgba(22,22,31,.4));
  border:1px solid rgba(255,107,44,.25); border-radius:var(--radius-lg); padding:2rem;
}
.fleet-icon{ font-size:2rem; width:64px; height:64px; border-radius:18px; background:rgba(255,107,44,.12); display:grid; place-items:center; }

/* Why grid */
.why-item{
  padding:1.5rem; border-radius:var(--radius-lg); border:1px solid var(--line); background:var(--card);
  transition:transform .5s var(--ease), border-color .5s var(--ease);
}
.why-item:hover{ transform:translateY(-6px); border-color:var(--primary); }
.why-check{
  display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%;
  background:var(--gradient-primary); color:#04120c; font-weight:800; margin-bottom:1rem;
}
.why-item h4{ font-size:1rem; margin-bottom:.4rem; }
.why-item p{ font-size:.83rem; }

/* Investor card */
.investor-card{
  position:relative; overflow:hidden; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:clamp(2.5rem,4vw,4rem);
}
.investor-stats{ position:relative; z-index:1; }
.stat-num{ font-size:clamp(1.75rem,2vw,2.4rem); font-weight:800; font-family:var(--font-mono); color:var(--primary); }
.bg-raise{ background:var(--bg-raise); }

/* ==========================================================================
   Responsive — hero/phone/steps/app-preview
   ========================================================================== */
@media (max-width:1080px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; }
  .app-preview-grid{ grid-template-columns:1fr; }
  .app-tabs{ flex-direction:row; overflow-x:auto; }
  .app-tab{ flex:none; min-width:200px; }
}
@media (max-width:860px){
  .steps-flow{ grid-template-columns:1fr; }
  .steps-line{ display:none; }
  .using-grid{ grid-template-columns:1fr; }
  .fleet-banner{ grid-template-columns:1fr; text-align:center; }
  .fleet-banner .btn{ margin-inline:auto; }
}
@media (max-width:640px){
  .phone{ width:250px; }
  .hero-facts{ gap:.5rem .75rem; }
  .investor-card{ text-align:center; }
  .investor-stats{ text-align:left; }
}

/* ==========================================================================
   Page hero (about / services / waitlist)
   ========================================================================== */
.page-hero{
  position:relative; overflow:hidden;
  padding-top:clamp(8rem,10vw,9.5rem); padding-bottom:clamp(3rem,5vw,4rem);
  text-align:center;
}
.page-hero .eyebrow{ justify-content:center; }
.page-hero h1{ max-width:20ch; margin-inline:auto; }
.page-hero .lead{ max-width:56ch; margin:1.25rem auto 0; }
.page-hero-stats{
  display:flex; justify-content:center; gap:clamp(1.5rem,4vw,3.5rem); margin-top:3rem;
  flex-wrap:wrap;
}
.page-hero-stats div{ text-align:center; }
.page-hero-stats .stat-num{ font-size:clamp(1.5rem,2vw,2rem); }

/* ==========================================================================
   About page
   ========================================================================== */
.origin-grid{ display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.origin-quote{
  border-left:3px solid var(--primary); padding-left:1.5rem; margin-top:1.5rem;
  font-size:1.1rem; color:var(--text); font-weight:600; font-style:normal;
}
.origin-quote cite{ display:block; margin-top:.75rem; font-size:.8rem; color:var(--muted); font-style:normal; font-weight:600; }

.timeline{ position:relative; margin-top:2rem; }
.timeline::before{
  content:''; position:absolute; left:19px; top:8px; bottom:8px; width:2px;
  background:linear-gradient(180deg, var(--primary), var(--accent));
}
.timeline-item{ position:relative; padding-left:3.5rem; padding-bottom:2.5rem; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-dot{
  position:absolute; left:0; top:0; width:40px; height:40px; border-radius:50%;
  background:var(--card); border:2px solid var(--primary); display:grid; place-items:center;
  font-size:1rem; z-index:1;
}
.timeline-item h4{ margin-bottom:.35rem; }
.timeline-item .label{ margin-bottom:.5rem; display:block; }

.values-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }

.founder-card{
  display:grid; grid-template-columns:auto 1fr; gap:2rem; align-items:center;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:2.5rem;
}
.founder-avatar{
  width:96px; height:96px; border-radius:50%; background:var(--gradient-primary);
  display:grid; place-items:center; font-size:2rem; font-weight:800; color:#04120c; flex:none;
}

@media (max-width:860px){
  .origin-grid{ grid-template-columns:1fr; gap:2.5rem; }
  .values-grid{ grid-template-columns:1fr 1fr; }
  .founder-card{ grid-template-columns:1fr; text-align:center; }
  .founder-avatar{ margin-inline:auto; }
}
@media (max-width:640px){ .values-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   Services page
   ========================================================================== */
.tier-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.tier-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(2rem,3vw,2.75rem); position:relative; overflow:hidden;
}
.tier-card.featured{ border-color:var(--primary); box-shadow:0 0 0 1px rgba(0,229,160,.25), 0 30px 60px -30px rgba(0,229,160,.35); }
.tier-badge{
  position:absolute; top:1.5rem; right:1.5rem; font-size:var(--fs-label); font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--primary); background:rgba(0,229,160,.1); padding:.4rem .8rem; border-radius:var(--radius-pill);
}
.tier-card .card-icon{ margin-bottom:1.5rem; }
.tier-list{ margin-top:1.75rem; display:flex; flex-direction:column; gap:.85rem; }
.tier-list li{ display:flex; gap:.75rem; align-items:flex-start; font-size:.9rem; color:var(--text); }
.tier-list li::before{ content:'✓'; color:var(--primary); font-weight:800; flex:none; }

.feature-row{
  display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center;
  padding-block:clamp(2.5rem,4vw,3.5rem);
}
.feature-row:not(:last-child){ border-bottom:1px solid var(--line); }
.feature-row.reverse{ direction:rtl; }
.feature-row.reverse > *{ direction:ltr; }
.feature-visual{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:2.5rem; display:grid; place-items:center; min-height:280px; position:relative; overflow:hidden;
}
.feature-visual .big-icon{ font-size:4rem; filter:drop-shadow(0 10px 30px rgba(0,229,160,.4)); }
.feature-list{ margin-top:1.25rem; display:flex; flex-direction:column; gap:.6rem; }
.feature-list li{ display:flex; gap:.6rem; font-size:.9rem; color:var(--muted); }
.feature-list li::before{ content:'—'; color:var(--primary); }

.faq-list{ display:flex; flex-direction:column; gap:1rem; max-width:820px; margin-inline:auto; }
.faq-item{ background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.faq-q{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:1.35rem 1.6rem; text-align:left; font-weight:700; font-size:.98rem;
}
.faq-q .plus{ flex:none; font-size:1.3rem; color:var(--primary); transition:transform .4s var(--ease); font-weight:400; }
.faq-item.open .faq-q .plus{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .45s var(--ease); }
.faq-item.open .faq-a{ max-height:280px; }
.faq-a p{ padding:0 1.6rem 1.5rem; font-size:.9rem; }

@media (max-width:860px){
  .tier-grid{ grid-template-columns:1fr; }
  .feature-row, .feature-row.reverse{ grid-template-columns:1fr; direction:ltr; gap:2rem; }
  .feature-row.reverse .feature-visual{ order:-1; }
}

/* ==========================================================================
   Waitlist page
   ========================================================================== */
.waitlist-layout{ display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:flex-start; }
.waitlist-form-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(2rem,3vw,2.75rem); position:relative; overflow:hidden;
}
.form-field{ margin-bottom:1.35rem; }
.form-field label{ display:block; font-size:var(--fs-label); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:.6rem; }
.form-field input, .form-field select{
  width:100%; background:rgba(240,240,255,.04); border:1px solid var(--line); border-radius:12px;
  padding:.9rem 1rem; color:var(--text); font-size:.95rem; transition:border-color .3s var(--ease), background .3s var(--ease);
}
.form-field input:focus, .form-field select:focus{ outline:none; border-color:var(--primary); background:rgba(0,229,160,.04); }
.role-toggle{ display:flex; gap:.75rem; }
.role-toggle button{
  flex:1; padding:.9rem; border-radius:12px; border:1px solid var(--line); background:rgba(240,240,255,.03);
  font-size:.85rem; font-weight:700; color:var(--muted); transition:all .3s var(--ease);
}
.role-toggle button.active{ border-color:var(--primary); color:var(--primary); background:rgba(0,229,160,.08); }
.form-submit{ width:100%; margin-top:.5rem; justify-content:center; }
.form-note{ font-size:.78rem; color:var(--muted); text-align:center; margin-top:1rem; }

#waitlist-form{ transition:opacity .3s var(--ease); }
#waitlist-form.submitting{ opacity:.6; pointer-events:none; }
.waitlist-success{ display:none; text-align:center; padding:2rem 0; }
#waitlist-form.done{ display:none; }
#waitlist-form.done + .waitlist-success{ display:block; }
.success-check{
  width:72px; height:72px; border-radius:50%; background:var(--gradient-primary); color:#04120c;
  display:grid; place-items:center; font-size:2rem; margin:0 auto 1.5rem; animation:successPop .6s var(--ease-spring);
}
@keyframes successPop{ 0%{ transform:scale(0); } 70%{ transform:scale(1.15); } 100%{ transform:scale(1); } }

.waitlist-benefits{ display:flex; flex-direction:column; gap:1.5rem; }
.benefit-row{ display:flex; gap:1.25rem; align-items:flex-start; }
.benefit-row .card-icon{ margin-bottom:0; }

.social-proof{
  display:flex; align-items:center; gap:1.5rem; margin-top:2.5rem; padding:1.5rem;
  background:rgba(0,229,160,.06); border:1px solid rgba(0,229,160,.2); border-radius:16px;
}
.avatar-stack{ display:flex; }
.avatar-stack span{
  width:36px; height:36px; border-radius:50%; background:var(--card-hi); border:2px solid var(--bg);
  display:grid; place-items:center; font-size:.75rem; font-weight:800; margin-left:-10px;
}
.avatar-stack span:first-child{ margin-left:0; }

@media (max-width:960px){
  .waitlist-layout{ grid-template-columns:1fr; gap:2.5rem; }
}