/* ============================================================
   FontFuel.com — Retro fuel station, à la Tech
   Tesla-diner translation: brushed steel, neon roofline,
   white soffit glow, electric-blue charge accent.
   ============================================================ */

/* ---------- Self-hosted fonts ---------- */
/* UI / "tech" voice */
@font-face { font-family:"Plex Cond"; src:url("fonts/IBMPlexSansCondensed-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Plex Cond"; src:url("fonts/IBMPlexSansCondensed-Medium.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Plex Cond"; src:url("fonts/IBMPlexSansCondensed-SemiBold.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face { font-family:"Plex Cond"; src:url("fonts/IBMPlexSansCondensed-Bold.woff2") format("woff2"); font-weight:700; font-display:swap; }

/* Showcase families */
@font-face { font-family:"Grungy Old Typewriter"; src:url("fonts/GrungyOldTypewriter-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Grungy Old Typewriter"; src:url("fonts/GrungyOldTypewriter-Italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"GOT Fat"; src:url("fonts/GrungyOldTypewriter-Fat.woff2") format("woff2"); font-display:swap; }
@font-face { font-family:"GOT Ghost"; src:url("fonts/GrungyOldTypewriter-Ghost.woff2") format("woff2"); font-display:swap; }
@font-face { font-family:"GOT Smooth"; src:url("fonts/GrungyOldTypewriter-Smooth.woff2") format("woff2"); font-display:swap; }
@font-face { font-family:"GOT Starved"; src:url("fonts/GrungyOldTypewriter-Starved.woff2") format("woff2"); font-display:swap; }
@font-face { font-family:"Angie Lou"; src:url("fonts/AngieLou-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Angie Lou"; src:url("fonts/AngieLou-Italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"Designer Notes Pro"; src:url("fonts/DesignerNotesPro-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Designer Notes Pro"; src:url("fonts/DesignerNotesPro-Bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Designer Notes Pro"; src:url("fonts/DesignerNotesPro-Italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"Designer Notes"; src:url("fonts/DesignerNotes-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Designer Notes"; src:url("fonts/DesignerNotes-Bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"PSI Leaves"; src:url("fonts/PSILeaves-Regular.woff2") format("woff2"); font-display:swap; }
@font-face { font-family:"Industrial Sketch"; src:url("fonts/RidpathSketch-Regular.woff2") format("woff2"); font-display:swap; }
@font-face { font-family:"Lunar Stencil"; src:url("fonts/LunarStencil-Regular.woff2") format("woff2"); font-display:swap; }

/* ---------- Tokens ---------- */
:root{
  --night-1:#0a0e1a;
  --night-2:#05070d;
  --night-3:#0e1424;
  --ink:#e9eef6;
  --ink-dim:#9aa6bd;
  --ink-faint:#6b7689;

  --volt-deep:#0673b0;    /* deep electric */
  --volt:#0693cf;         /* brand electric blue (from the logo) */
  --volt-bright:#2bb8ff;  /* bright charge */
  --charge:#0693cf;       /* electric charge */
  --charge-soft:#5fe0ff;  /* cyan glow */

  --steel-hi:#f4f7fb;
  --steel-mid:#aab3c2;
  --steel-lo:#6c7585;

  --panel:rgba(18,24,38,.66);
  --panel-edge:rgba(255,255,255,.10);
  --panel-edge-hot:rgba(120,180,255,.35);

  --maxw:1180px;
  --ui:"Plex Cond", "IBM Plex Sans Condensed", system-ui, sans-serif;
}

*{box-sizing:border-box;}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--ui);
  color:var(--ink);
  background:var(--night-2);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

/* Deep night sky with subtle stars + horizon glow */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(120% 80% at 50% -10%, #16203a 0%, var(--night-1) 42%, var(--night-2) 100%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 20% 18%, rgba(255,255,255,.55), transparent),
    radial-gradient(1px 1px at 73% 9%, rgba(255,255,255,.40), transparent),
    radial-gradient(1px 1px at 86% 30%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 35% 7%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.5px 1.5px at 12% 32%, rgba(255,255,255,.30), transparent),
    radial-gradient(1px 1px at 58% 22%, rgba(255,255,255,.30), transparent);
  opacity:.7;
}

/* ---------- Shared helpers ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.steel{
  background:linear-gradient(176deg,#ffffff 0%,#d9dee7 30%,#8c95a6 50%,#eef2f8 63%,#aeb7c6 82%,#cfd6e1 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.5));
}
.bolt{color:var(--volt-bright);filter:drop-shadow(0 0 6px rgba(43,184,255,.7));}
.eyebrow{
  font-weight:600;letter-spacing:.32em;text-transform:uppercase;
  font-size:.72rem;color:var(--charge-soft);
}
.section-tag{display:flex;align-items:center;gap:.7rem;justify-content:center;margin-bottom:.5rem;}
.section-tag::before,.section-tag::after{content:"";height:1px;width:48px;background:linear-gradient(90deg,transparent,var(--panel-edge-hot));}
.section-tag::after{background:linear-gradient(90deg,var(--panel-edge-hot),transparent);}
.h2{
  font-size:clamp(1.9rem,4.6vw,3.1rem);font-weight:700;letter-spacing:-.01em;
  text-align:center;margin:.1rem 0 .2rem;line-height:1.04;
}
.lead{text-align:center;color:var(--ink-dim);max-width:620px;margin:0 auto;font-size:1.05rem;}

/* Neon CTA (the "charge handle") */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--ui);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  font-size:.82rem;padding:.72rem 1.25rem;border-radius:999px;cursor:pointer;
  border:1px solid var(--panel-edge);background:rgba(255,255,255,.04);color:var(--ink);
  transition:.25s ease;white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);}
.btn-hot{
  border-color:rgba(6,147,207,.55);color:#fff;
  background:linear-gradient(180deg,rgba(6,147,207,.22),rgba(6,147,207,.18));
  box-shadow:0 0 0 1px rgba(6,147,207,.25), 0 8px 26px -8px rgba(6,147,207,.6), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-hot:hover{box-shadow:0 0 0 1px rgba(43,184,255,.5), 0 10px 30px -6px rgba(6,147,207,.85), inset 0 1px 0 rgba(255,255,255,.25);}
.btn-charge{border-color:rgba(34,168,255,.45);color:var(--charge-soft);}
.btn-charge:hover{box-shadow:0 0 22px -6px rgba(34,168,255,.7);background:rgba(34,168,255,.08);}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;
  backdrop-filter:blur(10px);
  background:linear-gradient(180deg,rgba(5,7,13,.7),rgba(5,7,13,0));
  transition:background .3s;
}
.nav.scrolled{background:rgba(5,7,13,.82);border-bottom:1px solid var(--panel-edge);}
.nav-brand{display:flex;align-items:center;gap:.5rem;font-weight:700;letter-spacing:.04em;font-size:1.05rem;}
.nav-brand .mark{font-size:1.1rem;}
.nav-links{display:flex;gap:1.6rem;align-items:center;}
.nav-links a{font-size:.82rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);transition:.2s;}
.nav-links a:hover{color:var(--charge-soft);}
.nav-links .btn{padding:.5rem 1rem;}
@media(max-width:720px){.nav-links a:not(.btn){display:none;}}

/* ============================================================
   HERO — the diner at night
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;text-align:center;
  padding:clamp(196px,25vh,300px) 24px 90px;overflow:hidden;}

/* concentric neon roofline canopy (SVG) — sits high, just under the nav */
.roofline{position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:176%;height:clamp(230px,38vh,470px);
  pointer-events:none;z-index:0;}

/* bright white soffit glow band — sits just under the canopy */
.soffit{position:absolute;left:50%;top:23%;transform:translate(-50%,-50%);
  width:128vw;height:230px;pointer-events:none;z-index:0;
  background:radial-gradient(58% 100% at 50% 50%, rgba(255,255,255,.95), rgba(214,232,255,.34) 42%, transparent 72%);
  filter:blur(24px);opacity:.6;mix-blend-mode:screen;}

.hero-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:1.1rem;}

.hero-badge{
  display:inline-flex;align-items:center;gap:.55rem;padding:.4rem .9rem;border-radius:999px;
  border:1px solid rgba(34,168,255,.3);background:rgba(34,168,255,.07);
  font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--charge-soft);
  box-shadow:0 0 24px -8px rgba(34,168,255,.6);
}
.hero-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--charge);box-shadow:0 0 8px var(--charge);animation:pulse 2.2s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}

.wordmark{
  font-weight:700;letter-spacing:-.02em;line-height:.9;margin:.2rem 0;
  font-size:clamp(3.4rem,12vw,8.2rem);position:relative;
  display:flex;align-items:center;gap:.06em;
}
.wordmark .lower{color:var(--volt-bright);
  -webkit-text-fill-color:var(--volt-bright);background:none;
  filter:drop-shadow(0 0 18px rgba(43,184,255,.55));}
.wordmark::after{content:"";position:absolute;left:8%;right:8%;bottom:-.06em;height:2px;
  background:linear-gradient(90deg,transparent,var(--volt),var(--volt-bright),transparent);
  filter:blur(1px);opacity:.8;}

.hero-tag{font-size:clamp(1.05rem,2.4vw,1.5rem);color:var(--ink);font-weight:500;max-width:680px;}
.hero-tag b{color:#fff;}
.hero-sub{color:var(--ink-dim);max-width:560px;font-size:1rem;margin-top:-.3rem;}

.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;margin-top:.6rem;}

.scrollcue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;
  color:var(--ink-faint);font-size:.7rem;letter-spacing:.25em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:.4rem;}
.scrollcue .chev{width:18px;height:18px;border-right:2px solid var(--ink-faint);border-bottom:2px solid var(--ink-faint);
  transform:rotate(45deg);animation:bob 1.8s infinite;}
@keyframes bob{0%,100%{transform:rotate(45deg) translate(0,0);opacity:.4;}50%{transform:rotate(45deg) translate(3px,3px);opacity:1;}}

/* ============================================================
   SECTION SHELL
   ============================================================ */
section{position:relative;padding:96px 0;}
.section-head{margin-bottom:48px;}

/* ============================================================
   THE PUMPS — font cards as charging stalls
   ============================================================ */
.pumps{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
@media(max-width:820px){.pumps{grid-template-columns:1fr;}}

.pump{
  position:relative;border-radius:18px;overflow:hidden;
  background:
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 18%),
    var(--panel);
  border:1px solid var(--panel-edge);
  backdrop-filter:blur(12px);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  display:flex;flex-direction:column;
}
.pump:hover{transform:translateY(-4px);border-color:var(--panel-edge-hot);
  box-shadow:0 30px 70px -28px rgba(0,0,0,.95), 0 0 40px -16px rgba(34,168,255,.4), inset 0 1px 0 rgba(255,255,255,.12);}

/* pump header strip */
.pump-top{display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--panel-edge);
  background:linear-gradient(180deg,rgba(10,14,24,.6),rgba(10,14,24,.2));}
.pump-led{display:flex;align-items:center;gap:.5rem;font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-dim);font-weight:600;}
.pump-led .led{width:8px;height:8px;border-radius:50%;background:var(--volt-bright);
  box-shadow:0 0 8px var(--volt-bright);}
.pump-led.charge .led{background:var(--charge);box-shadow:0 0 8px var(--charge);}
.pump-grade{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);font-weight:600;}

/* specimen stage */
.specimen{padding:30px 22px 14px;min-height:170px;display:flex;flex-direction:column;
  justify-content:center;gap:12px;text-align:center;position:relative;}
.specimen .big{font-size:clamp(2.4rem,7vw,3.8rem);line-height:1;color:#fff;word-break:break-word;}
.specimen .sub{color:var(--ink-dim);font-size:clamp(1.1rem,3vw,1.4rem);line-height:1.1;}

/* style chips (Grungy) */
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:4px 22px 0;}
.chip{font-size:.95rem;padding:.28rem .7rem;border-radius:8px;color:#fff;
  border:1px solid var(--panel-edge);background:rgba(255,255,255,.03);line-height:1;}

/* leaves grid */
.leafgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;padding:6px 22px 0;}
.leafgrid span{font-family:"PSI Leaves";font-size:1.7rem;text-align:center;color:var(--charge-soft);
  filter:drop-shadow(0 0 6px rgba(34,168,255,.35));}

/* pump meta + actions */
.pump-meta{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:16px 20px;margin-top:auto;border-top:1px solid var(--panel-edge);
  background:linear-gradient(0deg,rgba(10,14,24,.55),transparent);}
.pump-name{font-weight:700;font-size:1.18rem;letter-spacing:.01em;margin:0;}
.pump-name a{color:inherit;text-decoration:none;transition:color .2s;}
.pump-name a:hover{color:var(--volt-bright);}
#pumps .pump-name a:hover{color:var(--volt);}
.pump-styles{font-size:.74rem;color:var(--ink-faint);letter-spacing:.05em;text-transform:uppercase;}
.price{text-align:right;}
.price .kwh{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--charge-soft);display:block;}
.price .amt{font-size:1.25rem;font-weight:700;color:#fff;}
.pump-actions{display:flex;gap:.6rem;padding:0 20px 20px;}
.pump-actions .btn{flex:1;justify-content:center;}

/* coming soon */
.pump.soon{border-style:dashed;opacity:.96;}
.pump.soon .specimen .big{color:var(--steel-mid);}
.soon-tag{position:absolute;top:14px;right:14px;z-index:3;font-size:.64rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:#0a0e1a;background:var(--volt-bright);
  padding:.3rem .6rem;border-radius:6px;box-shadow:0 0 18px -4px var(--volt-bright);}
.garage-note{padding:0 20px 22px;text-align:center;color:var(--ink-faint);font-size:.85rem;}

/* ============================================================
   LIVE TESTER — "pump your own words"
   ============================================================ */
.tester{max-width:980px;margin:0 auto;border-radius:20px;overflow:hidden;
  border:1px solid var(--panel-edge);background:var(--panel);backdrop-filter:blur(14px);
  box-shadow:0 30px 80px -36px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.08);}
.tester-console{display:flex;flex-wrap:wrap;gap:14px;align-items:center;
  padding:18px 20px;border-bottom:1px solid var(--panel-edge);
  background:linear-gradient(180deg,rgba(10,14,24,.65),rgba(10,14,24,.25));}
.tester-input{flex:1 1 260px;display:flex;align-items:center;gap:.6rem;
  background:rgba(0,0,0,.35);border:1px solid var(--panel-edge);border-radius:10px;padding:.55rem .8rem;}
.tester-input:focus-within{border-color:var(--panel-edge-hot);box-shadow:0 0 0 3px rgba(34,168,255,.12);}
.tester-input .ic{color:var(--volt-bright);font-size:1rem;}
.tester-input input{flex:1;background:none;border:none;outline:none;color:#fff;
  font-family:var(--ui);font-size:1rem;letter-spacing:.02em;}
.seg{display:flex;gap:4px;background:rgba(0,0,0,.3);border:1px solid var(--panel-edge);border-radius:10px;padding:4px;}
.seg button{font-family:var(--ui);font-size:.78rem;font-weight:600;letter-spacing:.03em;
  color:var(--ink-dim);background:none;border:none;padding:.42rem .7rem;border-radius:7px;cursor:pointer;transition:.2s;white-space:nowrap;}
.seg button.on{color:#0a0e1a;background:linear-gradient(180deg,var(--volt-bright),var(--volt));box-shadow:0 0 16px -4px rgba(43,184,255,.7);}
.seg button:hover:not(.on){color:#fff;}
.size-ctl{display:flex;align-items:center;gap:.6rem;color:var(--ink-dim);font-size:.78rem;font-weight:600;}
.size-ctl input[type=range]{-webkit-appearance:none;appearance:none;width:120px;height:4px;border-radius:4px;
  background:linear-gradient(90deg,var(--charge),var(--volt-bright));outline:none;}
.size-ctl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;
  background:#fff;cursor:pointer;box-shadow:0 0 10px rgba(34,168,255,.8);}

.tester-stage{padding:48px 28px;min-height:220px;display:flex;align-items:center;justify-content:center;text-align:center;
  transition:background .3s;}
.tester-stage.light{background:#f4f6fa;}
#testerText{color:#fff;line-height:1.05;word-break:break-word;transition:color .3s;}
.tester-stage.light #testerText{color:#11151f;}

/* ============================================================
   THE OPERATOR — bio
   ============================================================ */
.operator{display:grid;grid-template-columns:300px 1fr;gap:48px;align-items:center;max-width:980px;margin:0 auto;}
@media(max-width:760px){.operator{grid-template-columns:1fr;text-align:center;gap:28px;}}
.op-photo{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--panel-edge-hot);
  box-shadow:0 24px 60px -28px rgba(0,0,0,.9), 0 0 50px -20px rgba(34,168,255,.5);}
.op-photo::after{content:"";position:absolute;inset:0;border-radius:16px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);pointer-events:none;}
.op-photo .badge{position:absolute;bottom:10px;left:10px;font-size:.62rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:#0a0e1a;background:var(--volt-bright);padding:.28rem .55rem;border-radius:5px;}
.op-body h3{font-size:1.5rem;margin:.2rem 0 .1rem;font-weight:700;}
.op-body .role{color:var(--charge-soft);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;}
.op-body p{color:var(--ink-dim);line-height:1.7;font-size:1.04rem;margin:1rem 0;}
.op-body p b{color:var(--ink);}
.op-meta{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;margin-top:1rem;color:var(--ink-faint);font-size:.82rem;}
.op-meta span{display:inline-flex;align-items:center;gap:.4rem;}
.op-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.3rem;}
@media(max-width:760px){.op-actions{justify-content:center;}.op-meta{justify-content:center;}}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{padding:54px 0 40px;border-top:1px solid var(--panel-edge);text-align:center;}
.footer .fmark{font-size:1.4rem;font-weight:700;letter-spacing:.02em;display:inline-flex;align-items:center;gap:.4rem;}
.footer .ftag{color:var(--ink-faint);font-size:.85rem;margin:.5rem 0 1.3rem;letter-spacing:.04em;}
.footer-links{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.3rem;}
.footer-links a{color:var(--ink-dim);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;font-weight:500;transition:.2s;}
.footer-links a:hover{color:var(--charge-soft);}
.copyright{color:var(--ink-faint);font-size:.76rem;letter-spacing:.05em;}

/* ============================================================
   EMBLEM / LOGO LOCKUP
   ============================================================ */
.emblem{display:block;}
.emblem-sm{width:30px;height:30px;}
.emblem-lg{width:104px;height:104px;filter:drop-shadow(0 6px 20px rgba(0,0,0,.6));}
.emblem-ft{width:40px;height:40px;}

.lockup{display:flex;flex-direction:column;align-items:center;gap:.6rem;}
.lockup .kicker{font-size:.7rem;font-weight:600;letter-spacing:.34em;text-transform:uppercase;
  color:var(--ink-faint);margin-top:.2rem;}
.nav-brand .emblem-sm{flex:0 0 auto;}

/* actual FontFuel logo (lifted SVG) */
.nav-logo{height:34px;width:auto;display:block;}
.wordmark-logo{margin:.3rem 0 0;display:flex;justify-content:center;}
.logo-stack{position:relative;display:block;width:clamp(290px,44vw,540px);
  aspect-ratio:439.86 / 272.09;filter:drop-shadow(0 10px 34px rgba(6,147,207,.30));}
.logo-stack img,.logo-stack canvas{position:absolute;inset:0;width:100%;height:100%;}
.logo-font{z-index:1;}
.logo-fuel{z-index:2;}
.fuel-fizz{z-index:3;pointer-events:none;}
.fmark img{width:clamp(132px,20vw,168px);height:auto;margin:0 auto;
  filter:drop-shadow(0 6px 20px rgba(6,147,207,.22));}

/* ============================================================
   "FILL THE TANK" — charge bar + power-on
   ============================================================ */
.charge-bar{position:relative;width:188px;height:5px;border-radius:99px;overflow:hidden;
  background:rgba(255,255,255,.08);border:1px solid var(--panel-edge);margin-top:.2rem;}
.charge-bar i{position:absolute;inset:0;transform-origin:left;border-radius:99px;
  background:linear-gradient(90deg,var(--charge),var(--volt-bright),var(--volt));
  box-shadow:0 0 12px rgba(43,184,255,.6);
  animation:fill 3.4s cubic-bezier(.3,.7,.3,1) infinite;}
@keyframes fill{0%{transform:scaleX(0);opacity:.6;}55%{transform:scaleX(1);opacity:1;}
  78%{transform:scaleX(1);opacity:1;}100%{transform:scaleX(1);opacity:0;}}
.charge-bar .spark{position:absolute;top:50%;width:8px;height:8px;border-radius:50%;background:#fff;margin-top:-4px;margin-left:-4px;
  box-shadow:0 0 10px #fff,0 0 18px var(--volt-bright);
  animation:sparkrun 3.4s cubic-bezier(.3,.7,.3,1) infinite;}
@keyframes sparkrun{0%{left:0;opacity:0;}10%{opacity:1;}55%{left:100%;opacity:1;}60%,100%{left:100%;opacity:0;}}

/* ---------- Hero entrance sequence ----------
   curves draw in -> logo arrives -> charge line finishes.
   Hidden states live ONLY inside no-preference so reduced-motion shows everything. */
@media (prefers-reduced-motion: no-preference){
  .roofline .arc{stroke-dasharray:1;stroke-dashoffset:1;animation:arcDraw 1.25s ease-out forwards;}
  .roofline .a1{animation-delay:.12s;}
  .roofline .a2{animation-delay:.30s;}
  .roofline .a3{animation-delay:.48s;}
  .roofline .a4{animation-delay:.64s;}
  @keyframes arcDraw{to{stroke-dashoffset:0;}}

  .soffit{opacity:0;animation:soffitIn 1.1s ease-out .9s forwards;}
  @keyframes soffitIn{to{opacity:.6;}}

  .hero-badge{opacity:0;animation:heroFade .7s ease-out .55s both;}
  /* script "font" fades in; FUEL is built by the plasma fuse (JS), so start it hidden */
  .logo-font{opacity:0;animation:logoIn 1s cubic-bezier(.2,.75,.25,1) .9s both;}
  .logo-fuel{clip-path:inset(0 100% 0 0);}
  @keyframes logoIn{0%{opacity:0;transform:translateY(24px) scale(.955);}100%{opacity:1;transform:none;}}
  .lockup .kicker{opacity:0;animation:heroRise .7s ease-out 2.5s both;}

  /* charge line = the finishing touch: appears as the fuse completes, then fills */
  .charge-bar{opacity:0;animation:heroRise .55s ease-out 2.7s both;}
  .charge-bar i,.charge-bar .spark{animation-delay:2.85s;}

  .lockup .kicker{animation-delay:2.55s;}
  .hero-tag{opacity:0;animation:heroRise .7s ease-out 2.0s both;}
  .hero-sub{opacity:0;animation:heroRise .7s ease-out 2.15s both;}
  .hero-cta{opacity:0;animation:heroRise .7s ease-out 2.3s both;}
  .scrollcue{opacity:0;animation:heroFade .8s ease-out 3.0s both;}

  @keyframes heroFade{0%{opacity:0;}100%{opacity:1;}}
  @keyframes heroRise{0%{opacity:0;transform:translateY(14px);}100%{opacity:1;transform:none;}}
}

/* ============================================================
   RICHER SPECIMENS — expandable drawer
   ============================================================ */
.spec-toggle{display:flex;align-items:center;justify-content:center;gap:.45rem;width:100%;
  padding:11px;background:rgba(255,255,255,.02);border:none;border-top:1px solid var(--panel-edge);
  color:var(--ink-dim);font-family:var(--ui);font-size:.74rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;cursor:pointer;transition:.2s;}
.spec-toggle:hover{color:var(--charge-soft);background:rgba(34,168,255,.05);}
.spec-toggle .arr{transition:transform .3s;font-size:.7rem;}
.spec-toggle[aria-expanded="true"] .arr{transform:rotate(180deg);}
.spec-drawer{max-height:0;overflow:hidden;transition:max-height .45s ease;
  border-top:1px solid transparent;}
.spec-drawer.open{max-height:640px;border-top-color:var(--panel-edge);}
.spec-inner{padding:20px 22px 24px;}
.spec-row{margin-bottom:16px;}
.spec-row:last-child{margin-bottom:0;}
.spec-row .lbl{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);
  font-weight:600;margin-bottom:6px;}
.spec-row .glyphs{color:#fff;line-height:1.25;word-break:break-word;}
.spec-row .upper{font-size:1.6rem;}
.spec-row .lower{font-size:1.6rem;}
.spec-row .nums{font-size:1.4rem;color:var(--charge-soft);}
.spec-sizes div{color:#fff;line-height:1.18;margin:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.spec-leaffull{display:grid;grid-template-columns:repeat(10,1fr);gap:8px;}
.spec-leaffull span{font-family:"PSI Leaves";font-size:1.5rem;text-align:center;color:var(--charge-soft);}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1;transform:none;}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto!important;}
  .reveal{opacity:1;transform:none;}
  .roofline .arc{stroke-dasharray:none!important;stroke-dashoffset:0!important;}
}

/* ============================================================
   LIGHT SECTIONS — Pumps + Tester form one white "service bay"
   (black hero → WHITE pumps+tester → dark operator+footer)
   ============================================================ */
#pumps,#tester{background:#eef2f7;}
#pumps .eyebrow,#tester .eyebrow{color:var(--volt);}
#pumps .section-tag::before,#tester .section-tag::before{background:linear-gradient(90deg,transparent,rgba(6,147,207,.45));}
#pumps .section-tag::after,#tester .section-tag::after{background:linear-gradient(90deg,rgba(6,147,207,.45),transparent);}
#pumps .h2,#tester .h2{color:#0f1622;}
#pumps .lead,#tester .lead{color:#55617a;}

/* --- pump cards on white --- */
#pumps .pump{background:#fff;border-color:#dde4ee;
  box-shadow:0 22px 54px -34px rgba(20,40,80,.4), inset 0 1px 0 #fff;}
#pumps .pump:hover{border-color:rgba(6,147,207,.45);
  box-shadow:0 28px 64px -30px rgba(20,40,80,.5), 0 0 38px -16px rgba(6,147,207,.35), inset 0 1px 0 #fff;}
#pumps .pump-top{background:linear-gradient(180deg,#f6f9fd,#eef3f9);border-bottom-color:#e4eaf3;}
#pumps .pump-led{color:#55617a;}
#pumps .pump-grade{color:#8a93a6;}
#pumps .specimen .big{color:#11151f;}
#pumps .specimen .sub{color:#55617a;}
#pumps .chip{color:#11151f;border-color:#dde4ee;background:#f4f7fb;}
#pumps .pump-meta{border-top-color:#e4eaf3;background:linear-gradient(0deg,#f6f9fd,transparent);}
#pumps .pump-name{color:#0f1622;}
#pumps .pump-styles{color:#8a93a6;}
#pumps .price .amt{color:#0f1622;}
#pumps .btn:not(.btn-hot){color:#0f1622;border-color:#d4dcea;background:#f4f7fb;}
#pumps .btn:not(.btn-hot):hover{border-color:rgba(6,147,207,.45);background:#eef4fb;}
/* solid electric button on white — high contrast */
#pumps .btn-hot{color:#fff;border-color:transparent;
  background:linear-gradient(180deg,#23ace4,#0589c4);
  box-shadow:0 10px 24px -10px rgba(6,147,207,.7), inset 0 1px 0 rgba(255,255,255,.28);}
#pumps .btn-hot:hover{box-shadow:0 12px 30px -8px rgba(6,147,207,.9), inset 0 1px 0 rgba(255,255,255,.35);}
#pumps .spec-toggle{color:#55617a;border-top-color:#e4eaf3;background:#fafcff;}
#pumps .spec-toggle:hover{color:var(--volt);background:#eef5fc;}
#pumps .spec-drawer.open{border-top-color:#e4eaf3;}
#pumps .spec-row .lbl{color:#8a93a6;}
#pumps .spec-row .glyphs,#pumps .spec-sizes div{color:#11151f;}
#pumps .spec-row .nums{color:var(--volt);}
#pumps .leafgrid span,#pumps .spec-leaffull span{color:var(--volt);}
#pumps .pump.soon{border-color:#cdd6e4;}
#pumps .pump.soon .specimen .big{color:#5b6577;}
#pumps .garage-note{color:#8a93a6;}

/* --- tester card on white --- */
#tester .tester{background:#fff;border-color:#dbe3ef;
  box-shadow:0 26px 64px -34px rgba(20,40,80,.45), inset 0 1px 0 #fff;}
#tester .tester-console{background:linear-gradient(180deg,#f7f9fd,#eef2f8);border-bottom-color:#e2e8f2;}
#tester .tester-input{background:#fff;border-color:#d4dcea;}
#tester .tester-input input{color:#0f1622;}
#tester .tester-input input::placeholder{color:#9aa6bd;}
#tester .seg{background:#eef2f8;border-color:#dbe3ef;}
#tester .seg button{color:#55617a;}
#tester .seg button:hover:not(.on){color:#0f1622;}
#tester .size-ctl{color:#55617a;}
#tester .tester-stage{background:#fff;}
#tester .tester-stage.dark{background:#0a0e1a;}
#tester #testerText{color:#11151f;}
#tester .tester-stage.dark #testerText{color:#fff;}