:root{
  --bg:#0f1113;
  --card:#0f1720;
  --accent:#0ea5ff;
  --muted:#96a0aa;
  --glass: rgba(255,255,255,0.03);
  --green:#22c55e;
  --neon: #28f6ff;
  --neon-strong:#00d4ff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  background:linear-gradient(180deg,var(--bg) 0%, #071018 100%);
  color:#e6eef6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  min-height:100vh;
  /* allow page scrolling so footer can be reached on small viewports */
  overflow:auto;
  padding-bottom:28px;
}

/* background video + overlays */
.bg-video{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(70%) blur(6px) brightness(0.6) saturate(50%);
  z-index:0;
  pointer-events:none;
}
.bg-blur{
  position:fixed;
  inset:0;
  background:rgba(4,6,8,0.25);
  z-index:1;
  pointer-events:none;
}
.bg-noise{
  position:fixed;
  inset:0;
  background-image:linear-gradient(transparent, rgba(0,0,0,0.05));
  mix-blend-mode:overlay;
  opacity:0.08;
  z-index:2;
  pointer-events:none;
}
.bg-radial{
  position:fixed;
  inset:0;
  background:radial-gradient(ellipse at center, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.85) 60%);
  z-index:3;
  pointer-events:none;
}

/* container */
.app{
  position:relative;
  z-index:4;
  width:100%;
  max-width:980px;
  /* softened card so background reads more */
  background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
  border-radius:12px;
  padding:14px;
  box-shadow:
    0 8px 30px rgba(1,4,10,0.65),
    inset 0 1px 0 rgba(255,255,255,0.01);
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

/* header - stronger game branding */
.top{
  display:flex;
  gap:12px;
  align-items:center;
  align-content:center;
}
/* emblem container with pulse to suggest game power */
.hero-emblem{
  width:84px;
  height:84px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.12));
  box-shadow: 0 10px 40px rgba(0,0,0,0.6), inset 0 0 40px rgba(0,212,255,0.02);
  -webkit-filter: drop-shadow(0 10px 30px rgba(0,0,0,0.6));
  filter: drop-shadow(0 10px 30px rgba(0,0,0,0.6));
  position:relative;
  overflow:visible;
  margin-right:6px;
}
.hero-emblem img{ width:64px; height:64px; object-fit:contain; transform:translateZ(0); }
.hero-emblem::after{
  content:'';
  position:absolute;
  inset:-6px;
  border-radius:18px;
  background:radial-gradient(circle at 50% 20%, rgba(0,212,255,0.06), transparent 25%);
  filter:blur(12px);
  opacity:0.9;
  pointer-events:none;
  animation:emblemPulse 3.6s infinite ease-in-out;
}
@keyframes emblemPulse{
  0%{ transform:scale(1); opacity:0.9 }
  50%{ transform:scale(1.04); opacity:1 }
  100%{ transform:scale(1); opacity:0.9 }
}

/* brand text */
.brand-title{ margin:0; font-size:18px; letter-spacing:0.6px; color:#eaf6ff; font-weight:800; text-shadow: 0 6px 20px rgba(0,0,0,0.6); }
.subtitle{ margin:0; color:var(--muted); font-size:13px; margin-top:2px; }
.tagline{ margin:4px 0 0; color:var(--neon); font-size:12px; opacity:0.95; }

/* responsive tweak */
@media (max-width:720px){
  .hero-emblem{ width:72px; height:72px; }
  .hero-emblem img{ width:54px; height:54px; }
  .brand-title{ font-size:16px }
}

/* frosted visible animated backdrop overlay (more visible movement) */
.bg-overlay-blur{
  position:fixed;
  inset:0;
  z-index:2;
  background:linear-gradient(180deg, rgba(2,6,10,0.28) 0%, rgba(1,3,6,0.52) 60%);
  backdrop-filter: blur(6px) saturate(90%);
  pointer-events:none;
  mix-blend-mode:normal;
}

/* form */
.form{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.field{
  display:flex;
  flex:1 1 200px;
  flex-direction:column;
  gap:6px;
}
.field span{font-size:13px;color:var(--muted)}
input[type="text"]{
  padding:10px 12px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.04);
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  color:inherit;
  outline:none;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.6);
}

/* gauges */
.gauges{
  display:flex;
  gap:16px;
  justify-content:space-between;
  flex-wrap:wrap;
}
.gauge-wrap{
  flex:1 1 320px;
  background:transparent;
  padding:10px;
  border-radius:10px;
}
.gauge-label{color:var(--muted);font-size:13px;margin-bottom:6px}
.gauge{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:6px;
}
.dial{
  width:100%;
  max-width:320px;
  height:140px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:8px;
  position:relative;
  overflow:visible;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  padding-bottom:10px;
}

/* needle */
.needle{
  width:3px;
  height:68px;
  background:linear-gradient(180deg,#ffd166,#ff7b00);
  position:absolute;
  bottom:28px;
  left:50%;
  transform-origin:50% 100%;
  transform:rotate(-90deg);
  border-radius:2px;
  box-shadow:0 4px 12px rgba(0,0,0,0.6);
}
.tickmarks{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 100%, rgba(0,0,0,0.2) 0 6px, transparent 7px),
    linear-gradient(transparent, transparent);
  pointer-events:none;
}
.gauge-value{
  position:absolute;
  bottom:6px;
  left:50%;
  transform:translateX(-50%);
  font-weight:700;
  color:#fff;
  font-size:16px;
  text-shadow:
    0 0 6px rgba(40,246,255,0.08),
    0 8px 20px rgba(0,0,0,0.6);
}

/* neon style for values */
.neon{
  color:var(--neon);
  text-shadow:
    0 0 6px rgba(40,246,255,0.8),
    0 0 18px rgba(0,212,255,0.5),
    0 6px 20px rgba(0,0,0,0.6);
  transition: text-shadow 120ms ease, transform 120ms ease;
}
.vibrate{
  animation:neon-vibe 220ms ease-in-out 2;
}
@keyframes neon-vibe{
  0%{transform:translateX(0)}
  20%{transform:translateX(-2px)}
  40%{transform:translateX(2px)}
  60%{transform:translateX(-2px)}
  80%{transform:translateX(2px)}
  100%{transform:translateX(0)}
}

/* engraved metal track with neon fill controlled via CSS var --pct (0..100) */
input[type="range"]{
  -webkit-appearance:none;
  appearance:none;
  height:50px;
  padding:0 6px;
  background:transparent;
  display:block;
  --pct:0;
}
input[type="range"]::-webkit-slider-runnable-track{
  height:14px;
  border-radius:14px;
  position:relative;
  background:
    linear-gradient(180deg,#0b0e10,#0a0c0d);
  box-shadow:
    inset 0 10px 22px rgba(0,0,0,0.75),
    inset 0 -8px 18px rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.04);
}
/* neon fill that grows with value: simulates neon flooding the groove */
input[type="range"]::-webkit-slider-runnable-track::before{
  content:'';
  position:absolute;
  left:6px;
  right:6px;
  top:50%;
  height:6px;
  transform:translateY(-50%);
  border-radius:6px;
  background:linear-gradient(90deg, rgba(0,212,255,0.0), rgba(0,212,255,0.7));
  box-shadow: 0 0 18px rgba(0,212,255,0.12), inset 0 0 18px rgba(0,212,255,0.06);
  width: calc(var(--pct) * 1%);
  pointer-events:none;
}
input[type="range"]::-moz-range-track{
  height:14px;
  border-radius:14px;
  background:linear-gradient(180deg,#0b0e10,#0a0c0d);
  box-shadow: inset 0 10px 22px rgba(0,0,0,0.75), inset 0 -8px 18px rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.04);
}

/* knurled metal pot knob (thumb) */
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:38px;
  height:38px;
  margin-top:-12px;
  border-radius:50%;
  background:linear-gradient(180deg,#3a3f43,#17191b);
  border:2px solid rgba(255,255,255,0.06);
  box-shadow:
    0 10px 26px rgba(0,0,0,0.72),
    inset 0 2px 8px rgba(255,255,255,0.03);
  position:relative;
  transition:transform 120ms ease, box-shadow 180ms ease;
  background-image:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.04), transparent 8%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0 2px, rgba(0,0,0,0.08) 2px 4px);
  cursor:pointer;
  outline:none;
}
/* small bevel ring to emphasize metal edge */
input[type="range"]::-webkit-slider-thumb::after{
  content:'';
  position:absolute;
  inset:4px;
  border-radius:50%;
  box-shadow: inset 0 -6px 12px rgba(0,0,0,0.6), inset 0 4px 8px rgba(255,255,255,0.02);
  pointer-events:none;
}
input[type="range"]::-moz-range-thumb{
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(180deg,#3a3f43,#17191b);
  border:2px solid rgba(255,255,255,0.06);
  box-shadow:0 10px 26px rgba(0,0,0,0.72), inset 0 2px 8px rgba(255,255,255,0.03);
  cursor:pointer;
}

/* hover glow for thumb and stronger neon cast into groove */
input[type="range"]:hover::-webkit-slider-thumb,
input[type="range"]:focus::-webkit-slider-thumb{
  transform:scale(1.06);
  box-shadow:
    0 12px 32px rgba(0,0,0,0.72),
    0 0 34px rgba(0,212,255,0.12);
}

/* controls */
.controls{
  display:flex;
  gap:8px;
  align-items:center;
  margin-top:10px;
}
.btn{
  background:linear-gradient(180deg,#151a1f, #0e1114);
  color:var(--accent);
  border:1px solid rgba(255,255,255,0.04);
  padding:8px 10px;
  border-radius:8px;
  min-width:56px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.6);
}

/* summary */
.summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  border-radius:10px;
  background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.02));
  border:1px solid rgba(255,255,255,0.03);
  box-shadow: 0 8px 28px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.01);
}
.buy{
  padding:12px 16px;
  background:linear-gradient(90deg, rgba(40,246,255,1), rgba(0,212,255,1));
  color:#04111b;
  font-weight:900;
  border-radius:12px;
  text-decoration:none;
  min-width:190px;
  text-align:center;
  box-shadow:0 18px 56px rgba(0,212,255,0.18), 0 2px 10px rgba(0,0,0,0.45);
  transition: transform 200ms cubic-bezier(.2,.9,.3,1), box-shadow 200ms ease;
  letter-spacing:0.6px;
}
.buy::before{
  content:'💎';
  margin-right:8px;
  display:inline-block;
  transform:translateY(-1px);
}
.buy:hover{
  transform:translateY(-4px) scale(1.01);
  box-shadow:0 28px 86px rgba(0,212,255,0.25);
}
.foot{font-size:12px;color:var(--muted);text-align:center;padding-top:6px}

/* responsive */
@media (max-width:720px){
  .gauges{flex-direction:column}
  .logo-wrap{width:64px;height:64px}
  .brand-title{font-size:16px}
}

/* ---------- NEW Heat-Neon palette & layout ---------- */
:root{
  --bg:#0c0b0b;
  --card:#0f0d0d;
  --muted:#bdb6b0;
  --glass: rgba(255,255,255,0.04);
  --hot-1: #ff0000; /* blood red */
  --hot-2: #ff8c00; /* neon orange */
  --filament: linear-gradient(90deg, var(--hot-1), var(--hot-2));
  --neon-hot: #ff7a18;
  --neon-hot-strong: #ff9b3d;
  --whatsapp-green: #25D366;
  --text:#f6efe9;
}

/* base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  background:linear-gradient(180deg,var(--bg) 0%, #070606 100%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:block;
  padding-top:78px; /* reserve header */
  min-height:100vh;
  /* allow page scrolling so footer is reachable on smaller screens */
  overflow:auto;
  padding-bottom:28px;
}

/* fixed glass nav */
.navglass{
  position:fixed;
  top:8px;
  left:8px;
  right:8px;
  height:62px;
  z-index:90;
  border-radius:12px;
  backdrop-filter: blur(8px) saturate(120%);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.18));
  border:1px solid rgba(255,140,30,0.06);
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
  display:flex;
  align-items:center;
  justify-content:center;
}
.nav-inner{
  width:100%;
  max-width:1180px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 14px;
}
.nav-left{ display:flex; align-items:center; gap:10px; }
.logo-wrap{ width:52px; height:52px; border-radius:8px; overflow:hidden; display:flex; align-items:center; justify-content:center; box-shadow: 0 8px 30px rgba(255,110,30,0.06); }
.logo-wrap img{ width:44px; height:44px; object-fit:contain; filter: drop-shadow(0 6px 18px rgba(255,110,30,0.12)); }
.site-name .line1{ font-weight:800; font-size:14px; color:var(--text); }
.site-name .line2{ font-size:11px; color:var(--muted); }

/* nav links */
.nav-right{ display:flex; gap:14px; align-items:center; }
.nav-link{ color:var(--muted); text-decoration:none; font-weight:600; font-size:13px; padding:8px 10px; border-radius:8px; transition:all 160ms ease; }
.nav-link:hover{ color:var(--neon-hot); transform:translateY(-2px); box-shadow: 0 8px 28px rgba(255,120,30,0.06) }

/* mobile toggle button */
.nav-toggle{
  display:none;
  background:transparent;
  border:0;
  color:var(--neon-hot);
  padding:8px;
  margin-right:6px;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  cursor:pointer;
}
.nav-toggle svg{ display:block; opacity:0.95; filter: drop-shadow(0 6px 18px rgba(255,110,30,0.06)); }

/* mobile nav open state */
#primary-nav{
  transition: max-height 280ms ease, opacity 240ms ease;
}
#primary-nav.open{
  display:flex;
  flex-direction:column;
  position:fixed;
  top:74px;
  right:12px;
  background:linear-gradient(180deg, rgba(0,0,0,0.72), rgba(0,0,0,0.86));
  padding:12px;
  border-radius:10px;
  gap:8px;
  z-index:95;
  box-shadow:0 12px 40px rgba(0,0,0,0.6);
  min-width:180px;
}

/* ensure nav-right hides on small screens but toggle visible */
@media (max-width:920px){
  .nav-right{ display:none; }
  .nav-toggle{ display:flex; }
}

/* background layers */
.bg-slideshow{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.bg-slideshow img{
  position:absolute;
  inset: -10% -10% -10% -10%;
  width:auto;
  height:calc(100% + 20%);
  object-fit:cover;
  opacity:0;
  filter:grayscale(50%) blur(8px) brightness(0.55) contrast(90%) saturate(80%);
  transform:scale(1.04) translateY(0);
  will-change:transform,opacity,filter;
  animation:slideFade 28s linear infinite;
}
/* sparks overlay */
.bg-sparks{
  position:fixed; inset:0; z-index:3; pointer-events:none;
  background-image: radial-gradient(circle at 10% 10%, rgba(255,140,30,0.06), transparent 6%),
                    radial-gradient(circle at 80% 30%, rgba(255,60,20,0.04), transparent 6%),
                    radial-gradient(circle at 40% 80%, rgba(255,100,30,0.03), transparent 6%);
  mix-blend-mode:screen;
  opacity:0.85;
  filter:blur(6px);
  animation:emberMove 6s linear infinite;
}
@keyframes emberMove{ 0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)} }

@keyframes slideFade{
  0%{ opacity:0; transform:scale(1.05) translateY(0); }
  8%{ opacity:0.24; transform:scale(1.03) translateY(-2%); }
  25%{ opacity:0.42; transform:scale(1.01) translateY(-1%); }
  45%{ opacity:0.52; transform:scale(1.00) translateY(0); }
  60%{ opacity:0.4; transform:scale(1.01) translateY(1%); }
  80%{ opacity:0.22; transform:scale(1.03) translateY(2%); }
  100%{ opacity:0; transform:scale(1.05) translateY(0); }
}

/* main app card */
.app{
  position:relative;
  z-index:8;
  width:100%;
  max-width:1180px;
  margin:24px auto;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.12));
  border-radius:12px;
  padding:18px;
  box-shadow: 0 18px 64px rgba(0,0,0,0.7);
}

/* hero */
.hero{ display:flex; gap:12px; align-items:center; margin-bottom:6px; }
.hero-emblem{ width:84px; height:84px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.12)); box-shadow: 0 12px 40px rgba(0,0,0,0.6); }
.hero-emblem img{ width:64px; height:64px; filter: drop-shadow(0 8px 30px rgba(255,110,30,0.12)); }
.brand-title{ margin:0; font-size:20px; letter-spacing:0.6px; color:var(--text); font-weight:800; text-shadow: 0 6px 20px rgba(0,0,0,0.6); }
.subtitle{ margin:0; color:var(--muted); font-size:13px; margin-top:2px; }
.tagline{ margin:4px 0 0; color:var(--neon-hot); font-size:12px; opacity:0.95; }

/* form & controls */
.form{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.field{ display:flex; flex:1 1 200px; flex-direction:column; gap:6px; }
.field span{ font-size:13px; color:var(--muted) }
input[type="text"]{ padding:10px 12px; border-radius:8px; border:1px solid rgba(255,255,255,0.03); background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.06)); color:inherit; outline:none; }

/* gauges area */
.gauges{ display:flex; gap:16px; justify-content:space-between; flex-wrap:wrap; }
.gauge-wrap{ flex:1 1 320px; padding:10px; border-radius:10px; background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.02)); border:1px solid rgba(255,255,255,0.02); }
.gauge-label{ color:var(--muted); font-size:13px; margin-bottom:6px; }
.dial{ width:100%; max-width:320px; height:140px; border-radius:12px; position:relative; display:flex; justify-content:center; align-items:flex-end; padding-bottom:10px; box-shadow: inset 0 6px 20px rgba(0,0,0,0.7); background: linear-gradient(180deg, rgba(255,60,10,0.02), rgba(0,0,0,0.12)); }

/* filament glow rim */
.dial::before{ content:''; position:absolute; inset:6px; border-radius:10px; pointer-events:none; box-shadow: 0 0 40px rgba(255,110,30,0.08) inset, 0 10px 40px rgba(0,0,0,0.6); }

/* needle styled to hot filament */
.needle{ width:4px; height:78px; background:linear-gradient(180deg,var(--hot-1),var(--hot-2)); position:absolute; bottom:30px; left:50%; transform-origin:50% 100%; transform:rotate(-90deg) translateX(-50%); border-radius:2px; box-shadow: 0 12px 34px rgba(255,110,30,0.18), 0 0 32px rgba(255,140,30,0.12); transition: transform 420ms cubic-bezier(.2,.9,.3,1); }

/* gauge value neon-hot */
.gauge-value{ position:absolute; bottom:6px; left:50%; transform:translateX(-50%); font-weight:800; color:var(--neon-hot); font-size:16px; text-shadow: 0 0 8px rgba(255,120,40,0.7), 0 0 24px rgba(255,90,30,0.22); }

/* input track filament fill */
input[type="range"]::-webkit-slider-runnable-track::before{ background:linear-gradient(90deg,var(--neon-hot),var(--neon-hot-strong)); box-shadow: 0 0 22px rgba(255,120,30,0.12), inset 0 0 18px rgba(255,90,20,0.06); }

/* thumb glow warmer */
input[type="range"]::-webkit-slider-thumb{ background:linear-gradient(180deg,#2b1f1f,#1a1513); box-shadow: 0 12px 34px rgba(255,110,30,0.12), inset 0 2px 8px rgba(255,230,200,0.02); }

/* neon classes tuned to hot */
.neon{ color:var(--neon-hot); text-shadow: 0 0 16px rgba(255,120,30,0.9), 0 0 40px rgba(255,90,20,0.25); transition: all 120ms ease; }
.vibrate{ animation:neon-vibe 220ms ease-in-out 2; box-shadow: 0 0 44px rgba(255,110,30,0.12); }
.overload{ animation: overloadFlash 520ms ease-in-out; }
@keyframes overloadFlash{ 0%{ text-shadow:0 0 8px rgba(255,120,30,0.45)} 40%{ text-shadow:0 0 28px rgba(255,140,40,0.95); transform:scale(1.03)} 100%{ text-shadow:0 0 12px rgba(255,100,30,0.5)} }

/* controls and buttons */
.btn{ background:linear-gradient(180deg,#121010,#0e0d0d); color:var(--neon-hot); border:1px solid rgba(255,255,255,0.03); padding:8px 10px; border-radius:8px; box-shadow: 0 8px 26px rgba(0,0,0,0.6); }
.btn:active{ transform:translateY(1px); }

/* buy button: keep WhatsApp green for call-to-action */
.buy{ padding:12px 16px; background: linear-gradient(90deg, var(--whatsapp-green), #1db954); color:#052006; font-weight:900; border-radius:12px; text-decoration:none; min-width:190px; text-align:center; box-shadow: 0 18px 56px rgba(37,211,102,0.12); transition: transform 200ms ease; }
.buy::before{ content:'💎'; margin-right:8px; display:inline-block; transform:translateY(-1px); }
.buy:hover{ transform:translateY(-3px); box-shadow: 0 28px 86px rgba(37,211,102,0.18); }

/* info columns */
.info-columns{ display:flex; gap:16px; margin-top:18px; }
.info-card{ flex:1 1 200px; background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.06)); padding:14px; border-radius:10px; text-align:center; border:1px solid rgba(255,255,255,0.02); }
.icon{ font-size:28px; margin-bottom:8px; }
.neon-icon{ color:var(--neon-hot); text-shadow: 0 0 16px rgba(255,120,30,0.9), 0 0 36px rgba(255,90,20,0.18); }

/* steps */
.steps{ display:flex; gap:12px; margin-top:16px; justify-content:space-between; }
.step{ flex:1 1 0; background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.04)); padding:12px; border-radius:10px; text-align:center; border:1px solid rgba(255,255,255,0.02); }
.step .num{ width:44px; height:44px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:var(--filament); color:#0b0605; font-weight:900; box-shadow: 0 12px 38px rgba(255,110,30,0.12); margin-bottom:8px; }

/* footer */
.site-footer{
  margin-top:18px;
  padding:18px;
  border-radius:10px;
  background:linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.1));
  border-top:2px solid rgba(255,110,30,0.12);
  color:var(--muted);
  display:block;
  z-index:12;
}
.footer-inner{
  max-width:1180px;
  margin:0 auto;
  display:flex;
  gap:18px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
}

/* left column */
.footer-left{
  flex:1 1 360px;
  min-width:220px;
}
.footer-left .legal{ font-size:13px; color:var(--muted); margin-bottom:6px; }
.footer-left .site-info{ font-size:13px; color:var(--muted); margin-bottom:6px; }
.footer-left .disclaimer{ font-size:12px; color:rgba(255,255,255,0.62); opacity:0.9; margin-top:6px; }

/* center column: payment logos */
.footer-center{
  flex:0 1 260px;
  text-align:center;
  min-width:180px;
}
.footer-center .pay-label{ font-size:13px; color:var(--muted); margin-bottom:8px; }
.payment-logos{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;
}
.payment-logos img{
  height:36px;
  width:auto;
  display:block;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.6));
  border-radius:6px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06));
  padding:6px 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}

/* right column: support */
.footer-right{
  flex:0 1 300px;
  min-width:200px;
  text-align:right;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.footer-right .support{ font-weight:800; color:var(--text); }
.support-links{ display:flex; flex-direction:column; gap:6px; }
.support-links a{ color:var(--neon-hot); text-decoration:none; font-weight:600; }
.socials{ font-size:13px; color:var(--muted); }

/* responsive adjustments */
@media (max-width:920px){
  .footer-inner{ padding-top:8px; gap:12px; }
  .footer-right, .footer-center, .footer-left{ text-align:left; min-width:100%; }
  .footer-right{ order:3 }
  .footer-center{ order:2 }
  .footer-left{ order:1 }
  .payment-logos{ justify-content:flex-start }
}

/* responsive */
@media (max-width:920px){ .info-columns{ flex-direction:column } .steps{ flex-direction:column } .nav-right{ display:none } .navglass{ padding:0 10px } }

/* Gauge visual improvements: rim, inner glow, glass highlight and smoother needle animation */
.dial{
  width:100%;
  max-width:320px;
  height:140px;
  background:
    radial-gradient(120% 80% at 50% 20%, rgba(255,255,255,0.02), rgba(255,255,255,0.008)),
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:12px;
  position:relative;
  overflow:visible;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  padding-bottom:10px;
  box-shadow:
    inset 0 6px 18px rgba(0,0,0,0.7),
    inset 0 -10px 30px rgba(0,0,0,0.6),
    0 10px 30px rgba(0,0,0,0.6);
  border:1px solid rgba(255,255,255,0.02);
}

/* decorative rim */
.dial::before{
  content:'';
  position:absolute;
  inset:6px;
  border-radius:10px;
  pointer-events:none;
  box-shadow: 0 0 30px rgba(0,212,255,0.035) inset, 0 10px 40px rgba(0,0,0,0.6);
}

/* top glossy highlight */
.dial::after{
  content:'';
  position:absolute;
  left:6%;
  right:6%;
  top:6%;
  height:32%;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  mix-blend-mode:overlay;
  pointer-events:none;
  filter:blur(8px);
  opacity:0.9;
}

/* tickmarks subtle radial gradient for depth */
.tickmarks{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 100%, rgba(0,0,0,0.22) 0 6px, transparent 7px),
    linear-gradient(transparent, transparent);
  pointer-events:none;
  mix-blend-mode:multiply;
}

/* needle: stronger gradient, glow, shadow and smooth transition */
.needle{
  width:4px;
  height:78px;
  background:linear-gradient(180deg,#ffe6b8,#ff8a00 55%, #ff5e00);
  position:absolute;
  bottom:30px;
  left:50%;
  transform-origin:50% 100%;
  transform:rotate(-90deg) translateX(-50%);
  border-radius:2px;
  box-shadow:
    0 8px 24px rgba(0,0,0,0.7),
    0 0 22px rgba(255,120,10,0.06),
    0 0 10px rgba(0,212,255,0.04) inset;
  transition: transform 420ms cubic-bezier(.2,.9,.3,1), box-shadow 200ms ease;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,0.6));
}

/* small needle hub */
.needle::before{
  content:'';
  position:absolute;
  left:50%;
  bottom:-8px;
  transform:translateX(-50%);
  width:18px;
  height:18px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff6e6, #ffbd7a 30%, #2b2f33 70%);
  box-shadow:0 6px 18px rgba(0,0,0,0.6), 0 0 14px rgba(255,140,30,0.12);
}

/* glow for numeric values and summary */
.neon{
  color:var(--neon);
  text-shadow:
    0 0 10px rgba(40,246,255,0.95),
    0 0 28px rgba(0,212,255,0.45),
    0 8px 26px rgba(0,0,0,0.6);
}

/* subtle animated rim light when user moves fast (class added by JS) */
.vibrate{
  animation:neon-vibe 220ms ease-in-out 2;
  box-shadow: 0 0 36px rgba(0,212,255,0.12);
}

/* overload sparkle effect */
.overload{
  animation: overloadFlash 520ms ease-in-out;
}
@keyframes overloadFlash{
  0%{ text-shadow: 0 0 8px rgba(0,212,255,0.4), 0 0 28px rgba(0,212,255,0.2); transform:scale(1) }
  40%{ text-shadow: 0 0 22px rgba(0,212,255,0.95), 0 0 56px rgba(0,212,255,0.4); transform:scale(1.03) }
  100%{ text-shadow: 0 0 10px rgba(0,212,255,0.5); transform:scale(1) }
}

/* ensure controls and thumbs pick up a faint ambient glow */
.btn{
  background:linear-gradient(180deg,#151a1f, #0e1114);
  color:var(--accent);
  border:1px solid rgba(255,255,255,0.04);
  padding:8px 10px;
  border-radius:8px;
  min-width:56px;
  box-shadow: 0 8px 26px rgba(0,0,0,0.6), 0 0 18px rgba(0,212,255,0.02) inset;
  transition: transform 140ms ease, box-shadow 180ms ease;
}
.btn:active{ transform:translateY(1px); box-shadow: 0 6px 18px rgba(0,0,0,0.6); }

/* slightly brighter buy button and soft pulse to draw attention */
.buy{
  padding:10px 14px;
  background:linear-gradient(90deg,var(--neon),var(--neon-strong));
  color:#04111b;
  font-weight:800;
  border-radius:10px;
  text-decoration:none;
  min-width:170px;
  text-align:center;
  box-shadow:0 14px 48px rgba(0,212,255,0.16);
  transform:translateZ(0);
  transition: transform 240ms ease, box-shadow 240ms ease;
}
.buy:hover{
  transform:translateY(-3px);
  box-shadow:0 22px 68px rgba(0,212,255,0.2);
}