:root{
  --bg:#090b09;
  --bg2:#0d100d;
  --panel:#111511;
  --panel2:#151a15;
  --text:#e8ece7;
  --muted:#808980;
  --green:#3f7f4b;
  --green-soft:#25452c;
  --line:#202720;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 75% 7%, rgba(43,78,50,.16), transparent 25%),
    var(--bg);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
a{color:inherit;text-decoration:none}
button{font:inherit}

.nav{
  position:sticky;top:0;z-index:30;
  height:68px;padding:0 5vw;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(9,11,9,.84);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.05)
}
.brand{display:flex;gap:10px;align-items:center;font-size:14px;font-weight:900;letter-spacing:.035em}
.brand-dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 18px rgba(63,127,75,.55)}
.nav nav{display:flex;gap:24px}
.nav nav a{font-size:11px;font-weight:800;letter-spacing:.11em;color:#8d968d;transition:.2s}
.nav nav a:hover{color:#cbd2cb}

.hero{
  width:min(1160px,90vw);
  min-height:calc(100vh - 68px);
  margin:auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) 390px;
  gap:64px;
  align-items:center;
  padding:58px 0 72px;
}
.kicker,.tiny-label,.section-label{
  color:#668b6c;font-size:11px;font-weight:900;letter-spacing:.16em
}
.hero h1{
  margin:15px 0 20px;
  max-width:650px;
  font-size:clamp(58px,6.3vw,96px);
  line-height:.86;
  letter-spacing:-.065em;
  font-weight:950;
}
.hero-text{font-size:20px;color:#8a938a;margin:0 0 28px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.social-btn{
  padding:13px 16px;border-radius:10px;
  border:1px solid #273027;background:#111511;
  font-size:12px;font-weight:900;letter-spacing:.05em;
  color:#c7cec7;transition:.2s
}
.social-btn:hover{border-color:#3f5543;background:#151b16;transform:translateY(-1px)}
.mini-ca{
  width:min(430px,100%);
  margin-top:14px;padding:11px 13px;
  display:flex;align-items:center;gap:12px;
  border:1px solid #1f261f;border-radius:10px;background:#0d100d;
}
.mini-ca span{font-size:10px;font-weight:900;color:#5f8065;letter-spacing:.12em}
.mini-ca code{font-size:12px;color:#697169}

.generator-card{
  width:100%;max-width:390px;justify-self:end;
  padding:16px;border:1px solid var(--line);border-radius:20px;
  background:rgba(17,21,17,.8);
  box-shadow:0 28px 80px rgba(0,0,0,.28)
}
.generator-top{display:flex;justify-content:space-between;align-items:end;margin-bottom:12px}
.generator-top h2{font-size:22px;margin:5px 0 0;letter-spacing:-.035em}
.counter{font-size:11px;color:#697269;font-weight:800}
.meme-frame{
  width:100%;max-width:315px;aspect-ratio:1/1;margin:auto;
  overflow:hidden;border-radius:14px;border:1px solid #252c25;background:#050605
}
.meme-frame img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.controls{display:grid;grid-template-columns:50px 1fr 50px;gap:8px;margin-top:10px}
.small-btn,.random-btn,.download-btn{
  border-radius:9px;border:1px solid #283028;cursor:pointer;font-weight:900
}
.small-btn{height:46px;background:#0d100d;color:#b5bcb5}
.random-btn{height:46px;background:#294b31;color:#cbd8ce;border-color:#355f3f}
.download-btn{width:100%;height:40px;margin-top:8px;background:transparent;color:#707970;font-size:11px;letter-spacing:.08em}
.small-btn:hover,.download-btn:hover{background:#151a15}
.random-btn:hover{background:#31583a}

.section{
  width:min(1140px,92vw);
  margin:0 auto;padding:105px 0;
  border-top:1px solid var(--line)
}
.section-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:80px;margin-top:30px}
.section h3,.bottom-cta h3{
  font-size:clamp(42px,6vw,72px);line-height:.95;letter-spacing:-.055em;margin:0
}
.section p{color:var(--muted);line-height:1.65}
.steps{display:grid;gap:10px}
.step{
  display:grid;grid-template-columns:42px 1fr;column-gap:12px;
  padding:18px;border:1px solid var(--line);background:#0d100d;border-radius:13px
}
.step span{grid-row:1/3;color:#5c7f62;font-size:11px;font-weight:900}
.step b{font-size:15px}
.step p{margin:4px 0 0;font-size:13px}

.about-card{margin-top:30px;max-width:800px}
.about-card p{font-size:18px;max-width:670px}
.muted{color:#646c64!important}

.roadmap{margin-top:30px;border-top:1px solid var(--line)}
.roadmap-item{
  display:grid;grid-template-columns:70px 1fr;gap:12px;
  padding:26px 0;border-bottom:1px solid var(--line)
}
.roadmap-item>span{color:#5d7d62;font-size:12px;font-weight:900}
.roadmap-item b{font-size:16px;letter-spacing:.02em}
.roadmap-item p{margin:5px 0 0;font-size:14px}

.bottom-cta{
  width:min(1060px,90vw);margin:0 auto;padding:110px 0;text-align:center;border-top:1px solid var(--line)
}
.bottom-cta h3{margin:12px 0 25px}
.centered{justify-content:center}

footer{
  height:72px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;
  border-top:1px solid var(--line);color:#596159;font-size:11px;font-weight:900;letter-spacing:.08em
}

@media(max-width:860px){
  .nav nav{gap:14px}
  .nav nav a{font-size:9px}
  .hero{
    min-height:auto;grid-template-columns:1fr;gap:42px;padding:70px 0 72px
  }
  .hero-copy{text-align:center}
  .hero-actions{justify-content:center}
  .mini-ca{margin:14px auto 0}
  .generator-card{justify-self:center;max-width:360px}
  .meme-frame{max-width:300px}
  .section-grid{grid-template-columns:1fr;gap:35px}
}
@media(max-width:560px){
  .nav{height:62px;padding:0 18px}
  .brand{font-size:12px}
  .nav nav{display:none}
  .hero{width:calc(100% - 28px);padding:48px 0 58px;gap:34px}
  .hero h1{font-size:clamp(62px,21vw,95px)}
  .hero-text{font-size:17px}
  .social-btn{flex:1;min-width:130px;text-align:center}
  .generator-card{max-width:330px;padding:12px;border-radius:16px}
  .meme-frame{max-width:270px;border-radius:12px}
  .generator-top h2{font-size:19px}
  .section{width:calc(100% - 32px);padding:75px 0}
  .section h3,.bottom-cta h3{font-size:46px}
  .roadmap-item{grid-template-columns:44px 1fr}
  .bottom-cta{padding:80px 0}
}

@media(min-width:861px){
  .nav{justify-content:flex-start}
  .brand{flex:0 0 auto}
  .main-nav{
    margin-left:clamp(150px,20vw,320px);
    gap:34px;
  }
}
.hero-copy{min-width:0;position:relative;z-index:1}
.generator-card{position:relative;z-index:2;overflow:hidden}

@media(min-width:1100px){
  .section,
  .bottom-cta{
    position:relative;
    left:-55px;
  }
}


/* v6 refinements */
@media(min-width:861px){
  .main-nav{
    margin-left:auto !important;
    margin-right:clamp(80px,9vw,155px) !important;
    gap:38px !important;
  }
}

/* Selvo-style clean generator: no extra outer card/window */
.generator-card{
  max-width:350px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
}
.generator-top{
  margin:0 0 10px !important;
  align-items:center !important;
}
.generator-top h2{display:none !important}
.meme-frame{
  max-width:310px !important;
  border-radius:14px !important;
  border:1px solid #202820 !important;
}
.controls{max-width:310px;margin:10px auto 0 !important}
.download-btn{display:block;max-width:310px;margin:8px auto 0 !important}

/* Cleaner How To Buy */
.how-head,.roadmap-head{
  display:flex;justify-content:space-between;align-items:end;gap:40px;margin-top:28px;margin-bottom:34px
}
.how-head h3,.roadmap-head h3{font-size:clamp(46px,5.2vw,70px) !important}
.how-head p,.roadmap-head p{max-width:360px;margin:0 0 5px;text-align:right}
.buy-flow{
  display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:16px;align-items:stretch
}
.buy-card{
  min-height:150px;padding:24px;border:1px solid #202820;border-radius:18px;
  background:linear-gradient(145deg,#0d110d,#101510);
  display:flex;flex-direction:column;justify-content:flex-end
}
.buy-card span{margin-bottom:auto;color:#5f8e67;font-size:11px;font-weight:900;letter-spacing:.12em}
.buy-card b{font-size:18px;letter-spacing:.01em}
.buy-card p{margin:8px 0 0;font-size:13px;color:#717a71}
.flow-arrow{display:flex;align-items:center;color:#405645;font-size:22px}

/* Simple meme-native roadmap */
.roadmap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.roadmap-card{
  min-height:175px;padding:22px;border:1px solid #202820;border-radius:18px;
  background:#0d110d;display:flex;flex-direction:column
}
.roadmap-card span{font-size:11px;color:#5f8e67;font-weight:900;letter-spacing:.12em}
.roadmap-card b{margin-top:auto;font-size:18px;letter-spacing:.02em}
.roadmap-card small{margin-top:8px;color:#737d73;font-size:13px;line-height:1.45}

@media(max-width:860px){
  .generator-card{max-width:330px !important}
  .meme-frame,.controls,.download-btn{max-width:290px !important}
  .how-head,.roadmap-head{display:block}
  .how-head p,.roadmap-head p{text-align:left;margin-top:14px}
  .buy-flow{grid-template-columns:1fr;gap:10px}
  .flow-arrow{display:none}
  .buy-card{min-height:120px}
  .roadmap-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .generator-card{max-width:310px !important}
  .meme-frame,.controls,.download-btn{max-width:270px !important}
  .roadmap-grid{grid-template-columns:1fr}
}


/* v8 — subtle ambient black/green background */
body{
  position:relative;
  overflow-x:hidden;
  background:#090b09;
}

/* Keep the whole site above the decorative background without breaking sticky nav. */
main, footer{
  position:relative;
  z-index:1;
}

.nav{
  position:sticky !important;
  top:0;
  z-index:50;
}

.ambient-bg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  background:#090b09;
}

.ambient-blob{
  position:absolute;
  display:block;
  border-radius:50%;
  filter:blur(95px);
  opacity:.12;
  will-change:transform;
  background:#315b39;
}

.blob-one{
  width:42vw;
  height:42vw;
  min-width:420px;
  min-height:420px;
  top:-16vw;
  right:-10vw;
  animation:ambientFloatOne 24s ease-in-out infinite alternate;
}

.blob-two{
  width:34vw;
  height:34vw;
  min-width:360px;
  min-height:360px;
  left:-14vw;
  top:38vh;
  opacity:.08;
  background:#27472e;
  animation:ambientFloatTwo 30s ease-in-out infinite alternate;
}

.blob-three{
  width:28vw;
  height:28vw;
  min-width:300px;
  min-height:300px;
  right:12vw;
  bottom:-12vw;
  opacity:.065;
  background:#365d3e;
  animation:ambientFloatThree 34s ease-in-out infinite alternate;
}

@keyframes ambientFloatOne{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-7vw,10vh,0) scale(1.08)}
}
@keyframes ambientFloatTwo{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(9vw,-7vh,0) scale(1.1)}
}
@keyframes ambientFloatThree{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-5vw,-8vh,0) scale(1.06)}
}

@media(prefers-reduced-motion:reduce){
  .ambient-blob{animation:none!important}
}


/* v9 — Selvo-inspired launch section treatment, adapted for Dog With Nozzle */
.buy-section{
  width:min(1220px,92vw);
}

.buy-heading{
  margin-top:30px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:40px;
}
.buy-heading h3{
  margin:0;
  font-size:clamp(54px,6vw,84px);
  line-height:.92;
  letter-spacing:-.06em;
}
.buy-heading > p{
  width:min(340px,100%);
  margin:10px 0 0;
  text-align:right;
  color:#778077;
  font-size:14px;
  line-height:1.7;
}

.buy-steps{
  margin-top:34px;
  display:grid;
  grid-template-columns:1fr 32px 1fr 32px 1fr 32px 1fr;
  align-items:center;
  gap:10px;
}
.buy-card{
  min-height:210px;
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border:1px solid #252c25;
  border-radius:20px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.01),rgba(255,255,255,0)),
    rgba(13,16,13,.72);
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.buy-card:hover{
  transform:translateY(-2px);
  border-color:#344235;
  background:rgba(16,20,16,.84);
}
.buy-number{
  margin-bottom:auto;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  color:#5f9569;
}
.buy-card h4{
  margin:0 0 8px;
  font-size:18px;
  letter-spacing:-.025em;
}
.buy-card p{
  margin:0;
  color:#7c857c;
  font-size:13px;
  line-height:1.55;
}
.buy-arrow{
  color:#426049;
  text-align:center;
  font-size:20px;
  opacity:.75;
}

.launch-tools{
  display:grid;
  grid-template-columns:minmax(0,1fr) 286px;
  gap:14px;
  margin-top:22px;
}
.contract-box{
  min-height:66px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:18px;
  align-items:center;
  padding:10px 12px 10px 20px;
  border:1px solid #2a302a;
  border-radius:15px;
  background:rgba(10,12,10,.78);
}
.contract-label{
  font-size:10px;
  font-weight:900;
  letter-spacing:.13em;
  color:#687168;
}
.contract-box code{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#d5dbd5;
  font-size:13px;
  font-weight:800;
}
.copy-ca{
  min-width:82px;
  min-height:44px;
  border-radius:12px;
  border:1px solid #485248;
  background:#111511;
  color:#dce2dc;
  font-weight:900;
  cursor:not-allowed;
  opacity:.68;
}
.pump-btn{
  min-height:66px;
  padding:0 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border-radius:15px;
  border:1px solid #31523a;
  background:rgba(25,48,30,.32);
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
}
.pump-btn small{
  color:#667268;
  font-size:9px;
  letter-spacing:.08em;
}
.pump-btn.disabled{
  pointer-events:none;
  opacity:.7;
}

.hero-pump-link{
  width:min(430px,100%);
  margin-top:8px;
  padding:10px 13px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  border:1px solid #233027;
  border-radius:10px;
  background:rgba(17,21,17,.74);
  font-size:10px;
  font-weight:900;
  letter-spacing:.11em;
  color:#78917d;
}
.hero-pump-link span{
  color:#5d665f;
}
.hero-pump-link.disabled{
  pointer-events:none;
}

@media(max-width:1050px){
  .buy-steps{
    grid-template-columns:1fr 1fr;
    gap:12px;
  }
  .buy-arrow{display:none}
  .launch-tools{
    grid-template-columns:1fr;
  }
}
@media(max-width:650px){
  .buy-heading{
    display:block;
  }
  .buy-heading > p{
    width:auto;
    text-align:left;
    margin-top:14px;
  }
  .buy-steps{
    grid-template-columns:1fr;
  }
  .buy-card{
    min-height:170px;
  }
  .contract-box{
    grid-template-columns:1fr auto;
    gap:8px;
  }
  .contract-label{
    grid-column:1/-1;
  }
}


/* v10 — Dog With Nozzle's own How To Buy identity */
.nozzle-buy{
  width:min(1120px,90vw);
}
.nozzle-buy-intro{
  display:grid;
  grid-template-columns:1fr 390px;
  gap:70px;
  align-items:end;
}
.nozzle-buy-intro h3{
  margin:14px 0 0;
  font-size:clamp(58px,7vw,94px);
  line-height:.88;
  letter-spacing:-.065em;
}
.nozzle-buy-intro>p{
  margin:0 0 6px;
  color:#778077;
  font-size:14px;
  line-height:1.65;
}

.fuel-route{
  position:relative;
  margin-top:48px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.fuel-route:before{
  content:"";
  position:absolute;
  left:34px;
  top:25%;
  bottom:25%;
  width:1px;
  background:linear-gradient(transparent,#36533c,transparent);
  opacity:.75;
}
.fuel-stop{
  position:relative;
  min-height:132px;
  padding:22px 24px;
  display:grid;
  grid-template-columns:52px 1fr;
  gap:16px;
  align-items:center;
  border:1px solid #252d26;
  border-radius:14px;
  background:rgba(12,15,12,.62);
}
.fuel-stop:nth-child(2),
.fuel-stop:nth-child(4){
  transform:translateY(24px);
}
.stop-index{
  width:38px;height:38px;
  display:grid;place-items:center;
  border:1px solid #304034;
  border-radius:50%;
  color:#60916a;
  font-size:10px;
  font-weight:900;
  background:#0b0e0b;
}
.stop-copy h4{
  margin:0 0 7px;
  font-size:17px;
  letter-spacing:.01em;
}
.stop-copy p{
  margin:0;
  font-size:13px;
  color:#747d75;
}
.nozzle-launch-bar{
  margin-top:48px;
  display:grid;
  grid-template-columns:1fr 245px;
  gap:10px;
}
.nozzle-contract{
  min-height:58px;
  padding:9px 10px 9px 18px;
  display:grid;
  grid-template-columns:34px 1fr 74px;
  align-items:center;
  gap:12px;
  border-top:1px solid #2a332b;
  border-bottom:1px solid #2a332b;
}
.nozzle-contract>span{
  color:#5f8967;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
}
.nozzle-contract code{
  color:#b7beb8;
  font-size:12px;
  font-weight:800;
}
.nozzle-contract button{
  height:38px;
  border:1px solid #354137;
  border-radius:8px;
  background:#0e120f;
  color:#6d766e;
  font-weight:900;
}
.nozzle-pump{
  min-height:58px;
  padding:0 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid #31513a;
  border-radius:10px;
  background:rgba(31,65,38,.22);
  color:#91a495;
  font-size:11px;
  font-weight:900;
  letter-spacing:.06em;
}
.nozzle-pump span{
  color:#56645a;
  font-size:8px;
}
.nozzle-pump.disabled{pointer-events:none}

@media(max-width:760px){
  .nozzle-buy-intro{grid-template-columns:1fr;gap:18px}
  .fuel-route{grid-template-columns:1fr;margin-top:30px}
  .fuel-stop:nth-child(2),.fuel-stop:nth-child(4){transform:none}
  .fuel-route:before{display:none}
  .nozzle-launch-bar{grid-template-columns:1fr}
}


/* v11 — flying gas canisters + occasional green pops */
.ambient-bg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  background:
    radial-gradient(circle at 78% 12%,rgba(27,52,32,.10),transparent 29%),
    #090b09;
}
.ambient-blob{display:none!important}
.canister-sky,.blast-layer{position:absolute;inset:0;overflow:hidden}
.gas-can{
  position:absolute;
  left:-90px;
  width:30px;
  height:38px;
  opacity:.16;
  border:1px solid rgba(82,125,91,.72);
  border-radius:5px 5px 7px 7px;
  background:linear-gradient(145deg,rgba(41,74,48,.38),rgba(18,34,22,.18));
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.18);
  will-change:transform;
}
.gas-can:before{
  content:"";
  position:absolute;
  width:11px;height:7px;
  left:6px;top:-6px;
  border:2px solid rgba(82,125,91,.55);
  border-bottom:0;
  border-radius:4px 4px 0 0;
}
.gas-can:after{
  content:"";
  position:absolute;
  width:8px;height:4px;
  right:-5px;top:5px;
  border-radius:2px;
  background:rgba(82,125,91,.48);
}
.green-blast{
  position:absolute;
  width:10px;height:10px;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.2);
  background:rgba(68,145,82,.42);
  box-shadow:
    0 0 16px 7px rgba(55,128,69,.20),
    0 0 42px 20px rgba(42,106,55,.11);
  animation:greenPop 900ms ease-out forwards;
}
.green-blast:before,.green-blast:after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:64px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(92,159,103,.32),transparent);
  transform:translate(-50%,-50%);
}
.green-blast:after{transform:translate(-50%,-50%) rotate(90deg)}
@keyframes greenPop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.15)}
  20%{opacity:.65}
  100%{opacity:0;transform:translate(-50%,-50%) scale(4.6)}
}
@media(max-width:700px){
  .gas-can{opacity:.11;transform:scale(.82)}
}
@media(prefers-reduced-motion:reduce){
  .canister-sky,.blast-layer{display:none}
}


/* v12 — refined canister field: multi-direction, already in motion on load */
.gas-can{
  opacity:.11;
  border-color:rgba(86,126,93,.50);
  background:linear-gradient(145deg,rgba(42,74,49,.26),rgba(18,34,22,.12));
  filter:blur(.05px);
}
.gas-can.near{
  opacity:.16;
  filter:blur(0);
}
.gas-can.far{
  opacity:.065;
  filter:blur(.35px);
}
.green-blast{
  background:rgba(66,140,80,.34);
  box-shadow:
    0 0 14px 6px rgba(55,128,69,.16),
    0 0 38px 18px rgba(42,106,55,.08);
}


/* v13 — custom animated night-fuel background */
.ambient-bg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  background:
    linear-gradient(180deg,#070907 0%,#090b09 48%,#070907 100%);
}

.night-shimmer{
  position:absolute;
  inset:-20%;
  background:
    repeating-linear-gradient(
      118deg,
      transparent 0 86px,
      rgba(52,86,59,.035) 86px 88px,
      transparent 88px 176px
    );
  opacity:.65;
  transform:translate3d(-3%,0,0);
  animation:shimmerMove 28s linear infinite;
}

.light-sweep{
  position:absolute;
  width:72vw;
  height:16vw;
  min-width:650px;
  min-height:120px;
  border-radius:50%;
  filter:blur(70px);
  opacity:.095;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(55,102,65,.10) 22%,
    rgba(76,132,88,.38) 50%,
    rgba(55,102,65,.10) 78%,
    transparent 100%
  );
  will-change:transform;
}

.sweep-one{
  top:12%;
  left:-55vw;
  transform:rotate(-10deg);
  animation:sweepAcrossOne 20s ease-in-out infinite;
}

.sweep-two{
  bottom:7%;
  right:-60vw;
  opacity:.065;
  transform:rotate(8deg);
  animation:sweepAcrossTwo 27s ease-in-out infinite;
}

.dust-field{
  position:absolute;
  inset:0;
  opacity:.20;
  background-image:
    radial-gradient(circle,rgba(113,143,118,.38) 0 1px,transparent 1.3px),
    radial-gradient(circle,rgba(79,111,84,.24) 0 1px,transparent 1.2px);
  background-size:190px 190px,260px 260px;
  background-position:22px 44px,110px 150px;
  animation:dustDrift 34s linear infinite;
  mask-image:linear-gradient(to bottom,transparent 0%,black 18%,black 82%,transparent 100%);
}

@keyframes shimmerMove{
  from{transform:translate3d(-3%,0,0)}
  to{transform:translate3d(7%,0,0)}
}

@keyframes sweepAcrossOne{
  0%{transform:translate3d(0,0,0) rotate(-10deg)}
  50%{transform:translate3d(145vw,12vh,0) rotate(-6deg)}
  100%{transform:translate3d(145vw,12vh,0) rotate(-6deg)}
}

@keyframes sweepAcrossTwo{
  0%{transform:translate3d(0,0,0) rotate(8deg)}
  45%{transform:translate3d(-145vw,-9vh,0) rotate(4deg)}
  100%{transform:translate3d(-145vw,-9vh,0) rotate(4deg)}
}

@keyframes dustDrift{
  from{background-position:22px 44px,110px 150px}
  to{background-position:92px 5px,40px 205px}
}

@media(prefers-reduced-motion:reduce){
  .night-shimmer,.light-sweep,.dust-field{animation:none!important}
}

.canister-sky,.blast-layer,.gas-can,.green-blast,.ambient-blob{display:none!important}


/* v14 — visible meme traffic background */
.ambient-bg{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 110%,rgba(42,79,49,.22),transparent 43%),
    linear-gradient(180deg,#070907,#090b09 55%,#060806);
}
.night-shimmer,.light-sweep,.dust-field{display:none!important}

.meme-traffic{position:absolute;inset:0;overflow:hidden}
.road-glow{
  position:absolute;
  left:-10%;right:-10%;bottom:-9vh;height:25vh;
  opacity:.22;
  background:
    repeating-linear-gradient(90deg,transparent 0 10%,rgba(65,103,72,.18) 10.2% 10.5%,transparent 10.7% 20%);
  transform:perspective(420px) rotateX(66deg);
  transform-origin:bottom;
  filter:blur(.3px);
}

.meme-object{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  user-select:none;
  will-change:transform;
  opacity:.17;
  filter:saturate(.65);
  text-shadow:0 0 20px rgba(54,111,65,.12);
}
.meme-object.big{opacity:.22}
.meme-object.far{opacity:.09;filter:blur(.45px) saturate(.5)}

.fuel-tag{
  padding:7px 11px;
  border:1px solid rgba(71,112,79,.42);
  border-radius:999px;
  background:rgba(15,27,17,.34);
  color:rgba(116,157,124,.75);
  font-size:9px;
  font-weight:900;
  letter-spacing:.13em;
}
.pop-ring{
  position:absolute;
  width:14px;height:14px;border-radius:50%;
  border:2px solid rgba(72,145,84,.52);
  transform:translate(-50%,-50%) scale(.2);
  animation:memePop .75s ease-out forwards;
  box-shadow:0 0 22px rgba(62,134,75,.18);
}
@keyframes memePop{
  0%{opacity:.8;transform:translate(-50%,-50%) scale(.2)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(5)}
}
@media(max-width:700px){
  .meme-object{opacity:.12}
  .meme-object.big{opacity:.16}
}
@media(prefers-reduced-motion:reduce){
  .meme-traffic{display:none}
}


/* v15 — slightly larger meme-generator preview only */
.generator-card{
  max-width:420px;
}
.meme-frame{
  max-width:340px;
}
@media(max-width:860px){
  .generator-card{max-width:385px}
  .meme-frame{max-width:320px}
}
@media(max-width:560px){
  .generator-card{max-width:350px}
  .meme-frame{max-width:290px}
}


/* v16 — slightly larger preview + device-safe responsive navigation */
.generator-card{
  width:100% !important;
  max-width:390px !important;
}
.meme-frame,
.controls,
.download-btn{
  max-width:335px !important;
}

/* Anchor destinations always clear the sticky header. */
#how,#about,#roadmap{
  scroll-margin-top:92px;
}

/* Prevent section contents from visually crowding one another. */
.section{
  position:relative;
  isolation:isolate;
  min-width:0;
}
.section + .section{
  margin-top:18px;
}
.nozzle-buy,
#about,
#roadmap{
  overflow:visible;
}

/* Tablet */
@media(max-width:860px){
  .generator-card{max-width:365px !important}
  .meme-frame,.controls,.download-btn{max-width:315px !important}

  .hero{
    width:min(94vw,720px);
  }

  .section{
    width:min(92vw,720px);
  }

  #how,#about,#roadmap{
    scroll-margin-top:88px;
  }
}

/* Phone: keep navigation usable instead of hiding it. */
@media(max-width:560px){
  .nav{
    height:auto !important;
    min-height:82px;
    padding:10px 14px 8px !important;
    display:grid !important;
    grid-template-columns:1fr;
    gap:8px;
    align-content:center;
  }

  .brand{
    justify-self:start;
    font-size:11px;
    white-space:nowrap;
  }

  .nav nav,
  .main-nav{
    display:flex !important;
    width:100%;
    gap:7px !important;
    margin:0 !important;
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .nav nav::-webkit-scrollbar{display:none}

  .nav nav a{
    flex:0 0 auto;
    font-size:8px !important;
    letter-spacing:.08em;
    padding:7px 9px;
    border:1px solid rgba(255,255,255,.055);
    border-radius:999px;
    background:rgba(13,16,13,.72);
  }

  .hero{
    width:calc(100% - 24px) !important;
    padding:38px 0 54px !important;
    gap:30px !important;
  }

  .generator-card{max-width:340px !important}
  .meme-frame,.controls,.download-btn{max-width:300px !important}

  .section{
    width:calc(100% - 28px) !important;
    padding:68px 0 !important;
    margin-top:0 !important;
  }

  #how,#about,#roadmap{
    scroll-margin-top:112px;
  }

  .nozzle-buy-intro,
  .roadmap-head{
    gap:14px;
  }

  .fuel-route,
  .roadmap-grid{
    min-width:0;
  }

  .fuel-stop,
  .roadmap-card,
  .about-card,
  .nozzle-launch-bar{
    min-width:0;
    max-width:100%;
  }

  .nozzle-contract{
    min-width:0;
    overflow:hidden;
  }

  .nozzle-contract code{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .hero h1{
    overflow-wrap:anywhere;
  }
}

/* Very small phones */
@media(max-width:380px){
  .generator-card{max-width:318px !important}
  .meme-frame,.controls,.download-btn{max-width:284px !important}
  .nav nav a{padding:6px 8px}
  .hero h1{font-size:56px !important}
  .section h3,.bottom-cta h3{font-size:40px !important}
}

/* Wide desktop / laptop guardrails */
@media(min-width:1400px){
  .hero{width:min(1220px,88vw)}
  .section{width:min(1180px,88vw)}
}

/* Download status feedback without changing layout. */
.download-btn.is-working{
  opacity:.72;
  cursor:wait;
}


/* v17 — cleaner background distribution */
.meme-object{
  opacity:.13;
}
.meme-object.big{
  opacity:.17;
}
.meme-object.far{
  opacity:.075;
}
@media(max-width:700px){
  .meme-object{opacity:.10}
  .meme-object.big{opacity:.13}
}


/* v18 — download UX hardening across desktop/mobile/in-app browsers */
.download-btn{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  -webkit-user-select:none;
  min-height:46px;
}
.download-btn.is-working{
  pointer-events:none;
  opacity:.72;
}
.download-fallback-note{
  position:fixed;
  left:50%;
  bottom:max(18px,env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:9999;
  width:min(92vw,430px);
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  background:rgba(7,10,7,.96);
  color:#eef4ee;
  font:700 12px/1.35 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  text-align:center;
  box-shadow:0 12px 36px rgba(0,0,0,.35);
}
.download-fallback-note button{
  margin-left:8px;
  border:0;
  border-radius:999px;
  padding:7px 10px;
  background:#eef4ee;
  color:#0a0d0a;
  font:900 11px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  cursor:pointer;
}
@media(max-width:560px){
  .download-btn{min-height:48px;font-size:11px}
}

/* v20 instant download: never leave button in a loading/dark state */
.download-btn.is-working{opacity:1!important;cursor:pointer!important}


/* v22 — single draggable meme-text layer (generator only) */
.meme-frame{position:relative;overflow:hidden;touch-action:none}
.meme-text-overlay{
  position:absolute;left:50%;top:12%;transform:translate(-50%,-50%);
  max-width:92%;padding:3px 7px;box-sizing:border-box;
  color:#fff;font-family:Impact,Haettenschweiler,"Arial Narrow Bold",Arial,sans-serif;
  font-size:clamp(22px,3.1vw,36px);font-weight:900;line-height:1;text-align:center;
  text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  -webkit-text-stroke:1.5px #000;text-shadow:0 2px 2px #000,1px 1px 0 #000,-1px -1px 0 #000;
  cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;z-index:4;display:none
}
.meme-text-overlay.is-dragging{cursor:grabbing}
.text-tool{display:flex;gap:7px;max-width:350px;margin:9px auto 0}
.text-tool input{min-width:0;flex:1;height:40px;border:1px solid #283029;border-radius:9px;background:#0d100d;color:#dbe4dc;padding:0 12px;font:700 11px/1 Arial,sans-serif;letter-spacing:.08em;outline:none;text-transform:uppercase}
.text-tool input:focus{border-color:#46664c;background:#101510}
.text-tool input::placeholder{color:#687168}
.text-tool button{width:40px;height:40px;border:1px solid #283029;border-radius:9px;background:#0d100d;color:#727b73;font-size:20px;cursor:pointer}
.text-tool button:hover{background:#151a15;color:#cbd8ce}
.text-hint{max-width:350px;margin:6px auto 0;text-align:center;color:#4f5850;font:700 8px/1.2 Arial,sans-serif;letter-spacing:.12em}
@media(max-width:720px){.text-tool,.text-hint{max-width:315px}.meme-text-overlay{font-size:clamp(20px,7vw,32px)}}
@media(max-width:420px){.text-tool,.text-hint{max-width:300px}}


/* V26 — launch countdown only */
.launch-countdown{
  margin:18px 0 14px;
  width:min(100%,430px);
}
.launch-date{
  margin-bottom:9px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
  color:rgba(238,244,239,.72);
}
.countdown-clock{
  display:flex;
  align-items:center;
  gap:7px;
}
.countdown-clock > div{
  min-width:58px;
  padding:8px 7px 7px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:9px;
  background:rgba(255,255,255,.025);
  text-align:center;
}
.countdown-clock strong{
  display:block;
  font-size:20px;
  line-height:1;
  letter-spacing:.04em;
  color:#f3f6f3;
}
.countdown-clock span{
  display:block;
  margin-top:5px;
  font-size:7px;
  font-weight:900;
  letter-spacing:.12em;
  color:rgba(238,244,239,.42);
}
.countdown-clock b{
  font-size:16px;
  color:rgba(238,244,239,.28);
}
@media(max-width:560px){
  .launch-countdown{width:100%;max-width:340px}
  .countdown-clock{gap:5px}
  .countdown-clock > div{min-width:52px;padding:8px 5px 7px}
  .countdown-clock strong{font-size:18px}
  .launch-date{font-size:9px}
}




/* V30 — 15s FUEL RUSH competitive mini game */
.nav-play-btn{
  appearance:none;
  -webkit-appearance:none;
  border:1px solid rgba(118,184,130,.56);
  border-radius:8px;
  background:#315b39;
  color:#f4f8f4;
  padding:9px 13px;
  font:900 10px/1 Arial,sans-serif;
  letter-spacing:.11em;
  cursor:pointer;
  transition:transform .16s ease,background .16s ease,border-color .16s ease;
}
.nav-play-btn:hover{transform:translateY(-1px);background:#3f7048;border-color:rgba(138,201,149,.72)}

.fuel-game-modal{
  position:fixed; inset:0; z-index:99999;
  display:none; align-items:center; justify-content:center;
  padding:18px;
}
.fuel-game-modal.is-open{display:flex}
.fuel-game-backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.fuel-game-window{
  position:relative; z-index:1;
  width:min(700px,96vw); max-height:94vh; overflow:auto;
  padding:22px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:20px;
  background:#0b0e0b;
  box-shadow:0 30px 90px rgba(0,0,0,.58);
}
.fuel-game-x{
  position:absolute; top:12px; right:14px;
  width:34px; height:34px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:9px; background:#111611; color:#eef4ee;
  font-size:22px; cursor:pointer;
}
.fuel-game-head h2{
  margin:7px 0 7px;
  font-size:clamp(36px,7vw,62px);
  line-height:.9; letter-spacing:-.05em;
}
.fuel-game-head p{
  margin:0 44px 16px 0;
  color:rgba(238,244,239,.52); font-size:13px;
}
.fuel-game-hud{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:8px; margin-bottom:10px;
}
.fuel-game-hud div{
  padding:9px 7px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:10px;
  background:#0f130f;
  text-align:center;
}
.fuel-game-hud span{
  display:block; margin-bottom:5px;
  color:rgba(238,244,239,.37);
  font-size:7px; font-weight:900; letter-spacing:.14em;
}
.fuel-game-hud strong{color:#f2f6f2;font-size:18px}

.fuel-game-stage{
  position:relative;
  min-height:330px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background:
    radial-gradient(circle at 17% 47%,rgba(63,127,75,.18),transparent 30%),
    radial-gradient(circle at 82% 47%,rgba(255,255,255,.04),transparent 30%),
    linear-gradient(180deg,#111711,#080b08);
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}
.fuel-game-dog{
  position:absolute; left:28px; bottom:26px;
  width:140px; text-align:center; pointer-events:none;
}
.fuel-dog-head{
  font-size:88px; line-height:1;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.38));
}
.fuel-dog-can{margin-top:-8px;font-size:44px;line-height:1}

.fuel-game-target-box{
  position:absolute;
  right:45px; top:50%;
  width:220px; height:220px;
  transform:translateY(-50%);
  display:grid; place-items:center;
  text-align:center;
  pointer-events:none;
}
.fuel-game-target-object{
  font-size:118px; line-height:1;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.28));
  transition:transform .12s ease;
}
.fuel-game-target-object.bump{animation:fuelTargetPop .2s ease}
@keyframes fuelTargetPop{50%{transform:scale(1.09) rotate(-2deg)}}
.fuel-game-target-name{
  position:absolute; bottom:10px;
  font-size:9px; font-weight:900; letter-spacing:.16em;
  color:rgba(238,244,239,.45);
}
.fuel-hole{
  position:absolute;
  width:42px; height:42px;
  border:3px solid rgba(154,217,164,.95);
  border-radius:50%;
  background:rgba(49,91,57,.22);
  box-shadow:0 0 0 6px rgba(63,127,75,.10),0 0 22px rgba(90,166,103,.20);
}
.fuel-hole:after{
  content:"";
  position:absolute; inset:10px;
  border-radius:50%;
  background:#101610;
}

.fuel-nozzle{
  position:absolute;
  left:145px; top:210px;
  width:72px; height:42px;
  cursor:grab;
  transform:translate(-50%,-50%);
  z-index:5;
  touch-action:none;
}
.fuel-nozzle.is-dragging{cursor:grabbing}
.fuel-nozzle-handle{
  position:absolute; left:8px; top:13px;
  width:42px; height:24px;
  border-radius:7px 5px 8px 7px;
  background:#1f2520;
  border:2px solid #303831;
  box-shadow:0 5px 10px rgba(0,0,0,.3);
}
.fuel-nozzle-handle:after{
  content:"";
  position:absolute; left:12px; bottom:-14px;
  width:11px; height:20px;
  border-radius:3px;
  background:#252d26;
  transform:rotate(16deg);
}
.fuel-nozzle-spout{
  position:absolute; left:44px; top:10px;
  width:34px; height:8px;
  border-radius:5px;
  background:#404840;
  transform:rotate(-11deg);
  transform-origin:left center;
}
.fuel-nozzle-spout:after{
  content:"";
  position:absolute; right:-7px; top:-1px;
  width:11px; height:10px;
  border-radius:2px;
  background:#353d36;
}
.fuel-pop{
  position:absolute;
  z-index:10;
  pointer-events:none;
  opacity:0;
  transform:translate(-50%,-50%) scale(.8);
  font-size:18px;
  font-weight:1000;
  letter-spacing:.04em;
  color:#f4f8f4;
  text-shadow:0 2px 8px #000;
}
.fuel-pop.show{animation:fuelPop .5s ease}
@keyframes fuelPop{
  0%{opacity:0;transform:translate(-50%,-40%) scale(.8)}
  20%{opacity:1;transform:translate(-50%,-55%) scale(1.08)}
  100%{opacity:0;transform:translate(-50%,-95%) scale(1)}
}
.fuel-main-button{
  width:100%; min-height:54px; margin-top:12px;
  border:1px solid rgba(122,180,132,.42);
  border-radius:12px; background:#315b39; color:#f4f8f4;
  font-size:12px; font-weight:900; letter-spacing:.14em;
  cursor:pointer;
}
.fuel-main-button:hover{background:#3f7048}
.fuel-game-message{
  min-height:20px; padding-top:8px;
  text-align:center;
  color:rgba(238,244,239,.45);
  font-size:9px; font-weight:900; letter-spacing:.13em;
}

@media(max-width:620px){
  .fuel-game-window{padding:16px}
  .fuel-game-hud{grid-template-columns:repeat(2,1fr)}
  .fuel-game-stage{min-height:290px}
  .fuel-game-dog{left:10px;bottom:18px;width:100px}
  .fuel-dog-head{font-size:64px}
  .fuel-dog-can{font-size:34px}
  .fuel-game-target-box{right:10px;width:160px;height:180px}
  .fuel-game-target-object{font-size:86px}
  .fuel-nozzle{left:105px;top:210px}
  .fuel-hole{width:38px;height:38px}
}


/* V31 — PREMIUM VISUAL PASS ONLY
   No layout, content, countdown, randomizer, download, or game logic changes. */

:root{
  --premium-bg:#080b09;
  --premium-surface:#0d120e;
  --premium-surface-2:#111913;
  --premium-surface-3:#152019;
  --premium-green:#3f7f4b;
  --premium-green-soft:#78a06f;
  --premium-ivory:#f1efe7;
  --premium-muted:#929a92;
  --premium-brass:#bda15b;
}

/* richer page depth */
html,body{
  background:
    radial-gradient(ellipse at 50% 5%,rgba(48,78,54,.10),transparent 42%),
    linear-gradient(180deg,#090d0a 0%,var(--premium-bg) 48%,#070907 100%) !important;
  color:var(--premium-ivory);
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(circle at 15% 18%,rgba(77,126,85,.055),transparent 22%),
    radial-gradient(circle at 82% 42%,rgba(189,161,91,.025),transparent 24%);
}

/* nav becomes a subtle premium glass strip */
.site-header{
  background:rgba(7,10,8,.88) !important;
  border-bottom-color:rgba(126,158,132,.12) !important;
  box-shadow:0 12px 40px rgba(0,0,0,.20);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.brand,
.site-nav a{
  color:rgba(241,239,231,.82) !important;
}
.site-nav a:hover{color:var(--premium-ivory) !important}
.brand-dot{
  box-shadow:0 0 13px rgba(91,158,104,.34);
}

/* warm white typography */
.hero h1,
h1,h2,h3,
.generator-title{
  color:var(--premium-ivory) !important;
  text-shadow:0 1px 0 rgba(255,255,255,.025),0 16px 40px rgba(0,0,0,.18);
}
.hero-copy,
.hero-sub,
.section p,
.muted{
  color:var(--premium-muted);
}
.kicker,
.section-label,
.eyebrow,
.tiny-label{
  color:var(--premium-green-soft) !important;
}

/* elevated controls/cards */
.social-btn,
.mini-ca,
.pump-row,
.generator-controls button,
.generator-controls input,
.download-btn,
.text-controls input,
.text-controls button{
  background:linear-gradient(180deg,rgba(18,27,20,.92),rgba(11,16,12,.94)) !important;
  border-color:rgba(137,164,141,.15) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 9px 26px rgba(0,0,0,.13);
}
.social-btn:hover,
.download-btn:hover,
.text-controls button:hover{
  border-color:rgba(120,160,111,.34) !important;
  background:linear-gradient(180deg,#162119,#101711) !important;
}

/* generator image gets a cleaner framed presentation */
.generator-frame,
.meme-frame,
.preview-wrap{
  border-color:rgba(170,184,170,.15) !important;
  box-shadow:
    0 24px 65px rgba(0,0,0,.30),
    0 0 0 1px rgba(255,255,255,.018);
}

/* primary green actions get more dimension */
.random-btn,
.nav-play-btn,
.fuel-main-button{
  background:linear-gradient(180deg,#416f49,#31583a) !important;
  border-color:rgba(134,185,143,.38) !important;
  color:#f4f2ea !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 8px 24px rgba(21,54,28,.20);
}
.random-btn:hover,
.nav-play-btn:hover,
.fuel-main-button:hover{
  background:linear-gradient(180deg,#4a7d53,#386541) !important;
  border-color:rgba(148,199,157,.54) !important;
}

/* restrained brass accent: countdown + fuel/game only */
.launch-date{
  color:rgba(213,198,151,.78) !important;
}
.countdown-clock > div{
  background:linear-gradient(180deg,rgba(19,27,20,.95),rgba(11,15,12,.96)) !important;
  border-color:rgba(189,161,91,.15) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 8px 20px rgba(0,0,0,.13);
}
.countdown-clock strong{
  color:#f1eee4 !important;
}
.countdown-clock span{
  color:rgba(189,161,91,.56) !important;
}

/* section separation without changing spacing/layout */
.section{
  position:relative;
}
.section:before{
  content:"";
  position:absolute;
  left:5%;
  right:5%;
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(126,158,132,.10),transparent);
  pointer-events:none;
}

/* how-to-buy / roadmap cards: richer dark green surfaces */
.buy-step,
.roadmap-card,
.roadmap-step,
.step-card,
.about-card{
  background:
    linear-gradient(145deg,rgba(19,29,21,.86),rgba(10,14,11,.92)) !important;
  border-color:rgba(137,164,141,.13) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.018),
    0 18px 45px rgba(0,0,0,.12);
}

/* game modal matches the premium site */
.fuel-game-window{
  background:
    radial-gradient(circle at 15% 0%,rgba(63,127,75,.11),transparent 30%),
    linear-gradient(180deg,#101711,#090c0a) !important;
  border-color:rgba(143,170,147,.18) !important;
  box-shadow:0 35px 110px rgba(0,0,0,.68) !important;
}
.fuel-game-stage{
  background:
    radial-gradient(circle at 17% 47%,rgba(63,127,75,.20),transparent 30%),
    radial-gradient(circle at 82% 47%,rgba(189,161,91,.045),transparent 28%),
    linear-gradient(180deg,#121a14,#080b09) !important;
}
.fuel-game-hud div{
  background:linear-gradient(180deg,#121a14,#0c110d) !important;
  border-color:rgba(140,166,144,.13) !important;
}
.fuel-game-hud strong{color:var(--premium-ivory) !important}
.fuel-hole{
  border-color:#78a06f !important;
  box-shadow:0 0 0 6px rgba(63,127,75,.10),0 0 25px rgba(100,165,111,.22) !important;
}

/* footer/detail polish */
footer,
.footer{
  border-top-color:rgba(126,158,132,.10) !important;
  color:rgba(241,239,231,.42) !important;
}

::selection{
  background:rgba(63,127,75,.58);
  color:#fff;
}


/* V32 — PREMIUM REFINEMENT 2 (visual only) */

/* richer ambient lighting without brightening the whole site */
body{
  background:
    radial-gradient(900px 520px at 23% 34%,rgba(54,92,62,.085),transparent 68%),
    radial-gradient(760px 460px at 75% 33%,rgba(100,91,57,.035),transparent 72%),
    linear-gradient(180deg,#090d0a 0%,#080b09 52%,#070907 100%) !important;
}

/* hero gets subtle editorial depth */
.hero{
  position:relative;
}
.hero:after{
  content:"";
  position:absolute;
  left:50%;
  top:12%;
  bottom:10%;
  width:1px;
  background:linear-gradient(180deg,transparent,rgba(147,171,151,.07),transparent);
  pointer-events:none;
}
.hero h1{
  letter-spacing:-.052em;
  text-shadow:
    0 1px 0 rgba(255,255,255,.035),
    0 22px 55px rgba(0,0,0,.24);
}

/* small labels feel more deliberate */
.kicker,.section-label,.eyebrow,.tiny-label{
  letter-spacing:.16em !important;
  text-shadow:0 0 18px rgba(96,153,106,.10);
}

/* subtle premium sheen on important surfaces */
.generator-frame,
.meme-frame,
.preview-wrap,
.buy-step,
.roadmap-card,
.roadmap-step,
.step-card,
.about-card{
  position:relative;
}
.generator-frame:after,
.meme-frame:after,
.preview-wrap:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055);
}

/* buttons: less flat, more tactile */
.social-btn,
.download-btn,
.random-btn,
.nav-play-btn,
.fuel-main-button{
  position:relative;
  overflow:hidden;
}
.social-btn:after,
.download-btn:after,
.random-btn:after,
.nav-play-btn:after,
.fuel-main-button:after{
  content:"";
  position:absolute;
  left:-35%;
  top:-120%;
  width:45%;
  height:300%;
  transform:rotate(20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.055),transparent);
  transition:left .45s ease;
  pointer-events:none;
}
.social-btn:hover:after,
.download-btn:hover:after,
.random-btn:hover:after,
.nav-play-btn:hover:after,
.fuel-main-button:hover:after{
  left:115%;
}

/* countdown: refined metal-like micro accent */
.countdown-clock > div{
  position:relative;
  overflow:hidden;
}
.countdown-clock > div:before{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(211,190,126,.26),transparent);
}
.launch-date{
  letter-spacing:.11em !important;
}

/* CA/Pump rows feel like actual premium UI fields */
.mini-ca,
.pump-row{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 10px 28px rgba(0,0,0,.10) !important;
}

/* clearer hierarchy in lower sections */
.buy-step,
.roadmap-card,
.roadmap-step,
.step-card,
.about-card{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 20px 50px rgba(0,0,0,.16) !important;
}
.buy-step:hover,
.roadmap-card:hover,
.roadmap-step:hover,
.step-card:hover,
.about-card:hover{
  border-color:rgba(130,168,136,.22) !important;
  background:linear-gradient(145deg,rgba(22,34,25,.90),rgba(11,16,12,.94)) !important;
}

/* cleaner scroll bar on desktop */
@media (pointer:fine){
  *{scrollbar-width:thin;scrollbar-color:#263a2b #090c09}
  ::-webkit-scrollbar{width:9px}
  ::-webkit-scrollbar-track{background:#090c09}
  ::-webkit-scrollbar-thumb{
    background:linear-gradient(#2e4733,#223527);
    border:2px solid #090c09;
    border-radius:999px;
  }
}

/* preserve clean mobile composition */
@media(max-width:760px){
  .hero:after{display:none}
  body{
    background:
      radial-gradient(560px 360px at 50% 25%,rgba(54,92,62,.075),transparent 72%),
      linear-gradient(180deg,#090d0a,#070907) !important;
  }
}


/* V34 — cross-device hardening only */
html,body{max-width:100%;overflow-x:hidden}
img,canvas{max-width:100%}
button,a,input{-webkit-tap-highlight-color:transparent}
button{touch-action:manipulation}

/* Keep PLAY accessible on phones even when the normal nav links collapse. */
@media(max-width:560px){
  .nav nav{
    display:flex !important;
    align-items:center;
    gap:0 !important;
  }
  .nav nav a{display:none !important}
  .nav-play-btn{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    min-height:40px;
    padding:8px 11px !important;
    white-space:nowrap;
  }

  .hero-actions .social-btn{
    min-height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .small-btn,.random-btn,.download-btn,
  .text-tool input,.text-tool button,
  .fuel-main-button,.fuel-game-x{
    min-height:44px;
  }

  .fuel-game-modal{
    padding:
      max(10px,env(safe-area-inset-top))
      max(10px,env(safe-area-inset-right))
      max(10px,env(safe-area-inset-bottom))
      max(10px,env(safe-area-inset-left)) !important;
  }
  .fuel-game-window{
    width:100% !important;
    max-height:calc(100dvh - 20px) !important;
    overscroll-behavior:contain;
  }
}

/* Tiny-phone guardrail */
@media(max-width:360px){
  .nav{padding-left:12px !important;padding-right:12px !important}
  .brand{font-size:10px !important;gap:7px}
  .brand-dot{width:7px;height:7px}
  .nav-play-btn{font-size:8px !important;padding:8px 9px !important}
  .hero{width:calc(100% - 20px) !important}
  .generator-card{width:100% !important}
}

/* Landscape phone: keep game usable without clipping */
@media(max-height:520px) and (orientation:landscape){
  .fuel-game-window{max-height:96dvh !important;padding:12px !important}
  .fuel-game-head p{margin-bottom:8px !important}
  .fuel-game-stage{min-height:210px !important}
}


/* V39 — sticky top bar fix only */
.site-header{
  position:sticky !important;
  top:0 !important;
  z-index:10000 !important;
  width:100%;
}



/* V40 — header persistence fix only.
   Use fixed instead of sticky so the top bar cannot disappear while scrolling. */
.nav{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  z-index:100000 !important;
}

/* Preserve the exact page position/spacing now that the header is out of document flow. */
body{
  padding-top:68px !important;
}

@media(max-width:560px){
  body{
    padding-top:82px !important;
  }
}


/* V47 — classic condensed meme caption typography only */
.meme-text{
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif !important;
  font-weight: 900 !important;
  font-stretch: condensed;
  letter-spacing: 0 !important;
}

/* V48 — mobile Fuel Rush viewport hardening only.
   Keep the close control permanently reachable on phones and prevent modal scroll jumps. */
body.fuel-game-scroll-locked{
  position:fixed !important;
  left:0;
  right:0;
  width:100%;
  overflow:hidden !important;
}

@media(max-width:760px){
  .fuel-game-modal{
    align-items:flex-start !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding-top:max(10px,env(safe-area-inset-top)) !important;
    padding-right:max(10px,env(safe-area-inset-right)) !important;
    padding-bottom:max(10px,env(safe-area-inset-bottom)) !important;
    padding-left:max(10px,env(safe-area-inset-left)) !important;
  }
  .fuel-game-window{
    width:100% !important;
    max-height:calc(100dvh - max(20px,env(safe-area-inset-top) + env(safe-area-inset-bottom))) !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  .fuel-game-x{
    position:fixed !important;
    top:max(12px,calc(env(safe-area-inset-top) + 8px)) !important;
    right:max(12px,calc(env(safe-area-inset-right) + 8px)) !important;
    z-index:100002 !important;
    width:44px !important;
    height:44px !important;
    min-height:44px !important;
    display:flex !important;
    align-items:center;
    justify-content:center;
    line-height:1 !important;
    background:#111611 !important;
    box-shadow:0 8px 24px rgba(0,0,0,.42);
  }
  .fuel-game-head{padding-right:44px}
}

@media(max-width:360px){
  .fuel-game-window{padding:14px !important}
  .fuel-game-head h2{font-size:clamp(32px,11vw,44px) !important}
  .fuel-game-head p{font-size:12px !important}
}

/* V49 — requested mobile game close visibility fix only.
   Keep the Fuel Rush modal above the fixed site header so the existing X is visible immediately. */
@media(max-width:760px){
  .fuel-game-modal{
    z-index:100001 !important;
  }
}