/* ==========================================================================
   Ampere Energy Desk — instrument panel
   The page is dressed as a piece of metering equipment: a graphite housing,
   amber filament as the only energised colour, and mono type for every number
   that a real meter would print.
   ========================================================================== */

:root{
  /* housing */
  --panel:      #0C0F14;
  --bay:        #141922;
  --bay-2:      #1A2029;
  --wire:       #262E3B;
  --wire-soft:  #1E2530;

  /* energised */
  --filament:   #F2A03D;
  --arc:        #FFD07A;
  --burn:       #E0473F;

  /* print */
  --readout:    #EEF1F6;
  --label:      #8D97A6;
  --label-dim:  #5F6875;

  --sans:  "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cond:  "IBM Plex Sans Condensed", "IBM Plex Sans", system-ui, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --gutter: 20px;
  --max:    1180px;
  --rule:   1px solid var(--wire);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--panel);
  color:var(--readout);
  font:400 16px/1.7 var(--sans);
  letter-spacing:.005em;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px;
  clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}

:focus-visible{
  outline:2px solid var(--arc);
  outline-offset:3px;
}

/* ---------- shared bits ------------------------------------------------ */

.eyebrow{
  margin:0 0 18px;
  font:500 11px/1 var(--mono);
  letter-spacing:.22em;
  color:var(--filament);
  display:flex; align-items:center; gap:9px;
}
.eyebrow__tick{
  width:22px; height:1px;
  background:var(--filament);
  flex:none;
}

.btn{
  display:inline-flex; align-items:center; gap:12px;
  padding:15px 22px;
  border-radius:3px;
  font:600 15px/1.25 var(--cond);
  letter-spacing:.03em;
  text-decoration:none;
  transition:transform .16s ease, background-color .16s ease, border-color .16s ease;
}
.btn__ico{ width:26px; height:26px; flex:none; }
.btn__sub{
  display:block;
  margin-top:3px;
  font:400 11px/1.3 var(--mono);
  letter-spacing:.06em;
  opacity:.68;
}

.btn--live{
  background:var(--filament);
  color:#15100A;
  box-shadow:0 0 0 1px rgba(255,208,122,.35), 0 12px 30px -14px rgba(242,160,61,.8);
}
.btn--live:hover{ background:var(--arc); transform:translateY(-1px); }

.btn--ghost{
  border:var(--rule);
  color:var(--readout);
  background:transparent;
}
.btn--ghost:hover{ border-color:var(--filament); color:var(--arc); }

/* ---------- panel rail ------------------------------------------------- */

.rail{
  position:sticky; top:0; z-index:60;
  background:rgba(12,15,20,.88);
  backdrop-filter:blur(10px);
  border-bottom:var(--rule);
}
.rail__in{
  max-width:var(--max); margin:0 auto;
  padding:11px var(--gutter);
  display:flex; align-items:center; gap:16px;
}

.mark{ display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto; }
.mark__lamp{
  width:9px; height:9px; border-radius:50%;
  background:var(--filament);
  box-shadow:0 0 0 3px rgba(242,160,61,.16), 0 0 12px 2px rgba(242,160,61,.55);
  animation:pulse 3.4s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.42} }

.mark__text{ display:flex; flex-direction:column; line-height:1; }
.mark__name{
  font:700 17px/1 var(--cond);
  letter-spacing:.12em;
}
.mark__sub{
  margin-top:3px;
  font:500 9px/1 var(--mono);
  letter-spacing:.3em;
  color:var(--label-dim);
}

.rail__nav{ display:none; gap:26px; }
.rail__nav a{
  font:500 12px/1 var(--mono);
  letter-spacing:.1em;
  color:var(--label);
  text-decoration:none;
}
.rail__nav a:hover{ color:var(--arc); }

.rail__cta{
  padding:9px 16px;
  border:1px solid var(--filament);
  border-radius:3px;
  color:var(--filament);
  font:600 12px/1 var(--cond);
  letter-spacing:.09em;
  text-decoration:none;
  white-space:nowrap;
}
.rail__cta:hover{ background:var(--filament); color:#15100A; }

/* ---------- hero ------------------------------------------------------- */

.hero{
  position:relative;
  padding:56px var(--gutter) 64px;
  background:
    linear-gradient(180deg, rgba(12,15,20,.5) 0%, rgba(12,15,20,.35) 55%, var(--panel) 100%),
    url("../images/hero-bg.jpg") center / cover no-repeat;
}
.hero__grid{
  max-width:var(--max); margin:0 auto;
  display:grid; gap:40px;
}

.hero__title{
  margin:0 0 22px;
  font:700 clamp(34px,8.6vw,58px)/1.06 var(--cond);
  letter-spacing:-.015em;
}
.hero__title em{
  font-style:normal;
  color:var(--filament);
}
.hero__lead{
  margin:0 0 30px;
  max-width:44ch;
  color:#B9C2CF;
  font-size:15.5px;
}
.hero__acts{ display:flex; flex-wrap:wrap; gap:12px; }

/* ---------- the load meter -------------------------------------------- */

.meter{
  margin:0;
  background:linear-gradient(180deg, var(--bay-2), var(--bay));
  border:var(--rule);
  border-radius:5px;
  box-shadow:0 30px 70px -34px #000, inset 0 1px 0 rgba(255,255,255,.045);
  overflow:hidden;
}

.meter__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 18px;
  border-bottom:var(--rule);
  background:rgba(0,0,0,.24);
}
.meter__title{
  font:600 11px/1 var(--mono);
  letter-spacing:.26em;
  color:var(--label);
}
.meter__lamp{
  width:7px; height:7px; border-radius:50%;
  background:var(--filament);
  box-shadow:0 0 10px 1px rgba(242,160,61,.7);
  animation:pulse 2.2s ease-in-out infinite;
}

.meter__input{ padding:20px 18px 6px; }
.meter__label{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  font:500 11px/1 var(--mono);
  letter-spacing:.13em;
  color:var(--label);
  text-transform:uppercase;
}
.meter__out{
  font:600 20px/1 var(--mono);
  color:var(--readout);
  letter-spacing:0;
}

.meter__slider{
  -webkit-appearance:none; appearance:none;
  width:100%; margin:16px 0 8px;
  height:22px; background:transparent; cursor:pointer;
}
.meter__slider::-webkit-slider-runnable-track{
  height:4px; border-radius:2px;
  background:linear-gradient(90deg, var(--filament) var(--pos,10%), var(--wire) var(--pos,10%));
}
.meter__slider::-moz-range-track{
  height:4px; border-radius:2px; background:var(--wire);
}
.meter__slider::-moz-range-progress{
  height:4px; border-radius:2px; background:var(--filament);
}
.meter__slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:20px; height:20px; margin-top:-8px;
  border-radius:50%;
  background:#E9EDF3;
  border:4px solid #2A323F;
  box-shadow:0 0 0 1px var(--filament), 0 4px 12px -2px #000;
}
.meter__slider::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%;
  background:#E9EDF3; border:4px solid #2A323F;
  box-shadow:0 0 0 1px var(--filament);
}

.meter__scale{
  display:flex; justify-content:space-between;
  font:400 9.5px/1 var(--mono);
  letter-spacing:.06em;
  color:var(--label-dim);
}

/* segmented level bars */
.bay{ padding:22px 18px 8px; display:grid; gap:18px; }

.bay__row{ display:grid; grid-template-columns:1fr auto; gap:6px 10px; align-items:center; }
.bay__key{
  font:500 10px/1 var(--mono);
  letter-spacing:.19em;
  color:var(--label);
}
.bay__val{
  font:600 15px/1 var(--mono);
  text-align:right;
  white-space:nowrap;
}
.bay__track{
  grid-column:1 / -1;
  height:12px;
  background:rgba(0,0,0,.4);
  border:1px solid var(--wire-soft);
  border-radius:2px;
  overflow:hidden;
}
.bay__fill{
  display:block; height:100%; width:0;
  transition:width .45s cubic-bezier(.2,.7,.3,1);
  background-image:
    linear-gradient(90deg, currentColor, currentColor),
    repeating-linear-gradient(90deg, #000 0 1px, transparent 1px 6px);
  background-blend-mode:multiply;
  box-shadow:0 0 14px -2px currentColor;
}
.bay__row--burn{ color:var(--burn); }
.bay__row--burn .bay__val{ color:var(--burn); }
.bay__row--rent{ color:var(--filament); }
.bay__row--rent .bay__val{ color:var(--filament); }

.readout{
  margin:12px 18px 0;
  padding:18px;
  border-top:var(--rule);
  text-align:center;
}
.readout__key{
  margin:0;
  font:500 10px/1 var(--mono);
  letter-spacing:.24em;
  color:var(--label);
}
.readout__val{
  margin:10px 0 8px;
  font:600 clamp(32px,9vw,44px)/1 var(--mono);
  color:var(--arc);
  text-shadow:0 0 26px rgba(255,208,122,.3);
}
.readout__note{
  margin:0;
  font:400 11.5px/1.5 var(--mono);
  color:var(--label);
}

.meter__fine{
  margin:0;
  padding:14px 18px 16px;
  border-top:var(--rule);
  background:rgba(0,0,0,.2);
  font:400 10.5px/1.6 var(--mono);
  color:var(--label-dim);
}

/* ---------- stat strip -------------------------------------------------- */

.strip{
  border-top:var(--rule); border-bottom:var(--rule);
  background:var(--bay);
  display:grid; grid-template-columns:repeat(2,1fr);
}
.strip__item{
  margin:0;
  padding:20px 16px;
  border-right:var(--rule); border-bottom:var(--rule);
  text-align:center;
}
.strip__item:nth-child(2n){ border-right:0; }
.strip__item:nth-last-child(-n+2){ border-bottom:0; }
.strip__item dt{
  font:500 9.5px/1 var(--mono);
  letter-spacing:.18em;
  color:var(--label-dim);
  text-transform:uppercase;
}
.strip__item dd{
  margin:9px 0 0;
  font:700 26px/1 var(--cond);
  letter-spacing:.01em;
  color:var(--arc);
}
.strip__item dd small{
  font:400 10px/1 var(--mono);
  letter-spacing:.1em;
  color:var(--label);
  margin-left:5px;
}

/* ---------- sections ---------------------------------------------------- */

.sec{ padding:64px var(--gutter); }
.sec--bay{ background:var(--bay); border-block:var(--rule); }

.sec__head{ max-width:var(--max); margin:0 auto 36px; }
.sec__title{
  margin:0 0 14px;
  font:700 clamp(26px,6.4vw,38px)/1.15 var(--cond);
  letter-spacing:-.01em;
  max-width:23ch;
}
.sec__sub{
  margin:0;
  max-width:52ch;
  color:#A9B3C1;
  font-size:15px;
}
.sec__foot{
  max-width:var(--max);
  margin:22px auto 0;
  font:400 12px/1.6 var(--mono);
  color:var(--label-dim);
}

/* ---------- the two meters --------------------------------------------- */

.ways{
  max-width:var(--max); margin:0 auto;
  display:grid; gap:16px;
}
.way{
  padding:26px 22px;
  border:var(--rule);
  border-radius:4px;
  background:linear-gradient(180deg, rgba(255,255,255,.022), transparent);
}
.way--burn{ border-color:rgba(224,71,63,.34); }
.way--rent{ border-color:rgba(242,160,61,.4); }

.way__tag{
  margin:0 0 14px;
  font:500 10px/1 var(--mono);
  letter-spacing:.2em;
  color:var(--label-dim);
}
.way--burn .way__tag{ color:var(--burn); }
.way--rent .way__tag{ color:var(--filament); }

.way__title{
  margin:0 0 12px;
  font:700 24px/1.2 var(--cond);
  letter-spacing:.01em;
}
.way__body{ margin:0 0 20px; color:#A9B3C1; font-size:14.5px; }
.way__line{
  margin:0;
  padding-top:16px;
  border-top:var(--rule);
  font:400 13px/1 var(--mono);
  color:var(--label);
}
.way__line b{
  font-weight:600; font-size:20px;
  color:var(--burn);
}
.way__line--good b{ color:var(--filament); }

/* keys-never-move plate */
.plate{
  max-width:var(--max);
  margin:44px auto 0;
  padding:26px 22px;
  border:var(--rule);
  border-radius:4px;
  background:
    radial-gradient(120% 90% at 12% 50%, rgba(242,160,61,.09), transparent 62%),
    var(--bay);
  display:grid; gap:22px; align-items:center;
}
.plate img{
  width:104px;
  filter:drop-shadow(0 16px 30px rgba(0,0,0,.7));
  justify-self:start;
}
.plate__title{
  margin:0 0 10px;
  font:700 21px/1.2 var(--cond);
}
.plate__body{ margin:0; color:#A9B3C1; font-size:14.5px; }

/* ---------- tariff ------------------------------------------------------ */

.tariff__scroll{
  max-width:var(--max); margin:0 auto;
  overflow-x:auto;
  border:var(--rule);
  border-radius:4px;
  background:var(--panel);
  -webkit-overflow-scrolling:touch;
}
.tariff{
  width:100%;
  min-width:560px;
  border-collapse:collapse;
  font-variant-numeric:tabular-nums;
}
.tariff thead th{
  padding:14px 16px;
  border-bottom:var(--rule);
  background:rgba(0,0,0,.3);
  font:500 10px/1 var(--mono);
  letter-spacing:.16em;
  color:var(--label);
  text-align:right;
  white-space:nowrap;
}
.tariff thead th:first-child{ text-align:left; }

.tariff tbody th{
  padding:16px;
  border-bottom:var(--rule);
  font:600 15px/1.2 var(--mono);
  text-align:left;
  color:var(--readout);
  white-space:nowrap;
}
.tariff tbody th span{
  display:block;
  margin-top:5px;
  font:400 11px/1.3 var(--sans);
  letter-spacing:0;
  color:var(--label-dim);
}
.tariff tbody td{
  padding:16px;
  border-bottom:var(--rule);
  font:500 15px/1 var(--mono);
  text-align:right;
  color:#C6CEDA;
  white-space:nowrap;
}
.tariff tbody tr:last-child th,
.tariff tbody tr:last-child td{ border-bottom:0; }

.tariff tbody tr.is-pick{ background:rgba(242,160,61,.07); }
.tariff tbody tr.is-pick td{ color:var(--arc); }
.tariff tbody tr.is-pick th{ box-shadow:inset 2px 0 0 var(--filament); }

.notes{
  max-width:var(--max);
  margin:22px auto 0;
  padding:0;
  list-style:none;
}
.notes li{
  position:relative;
  padding-left:20px;
  margin-bottom:9px;
  font-size:13.5px;
  color:var(--label);
}
.notes li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:9px; height:1px; background:var(--filament);
}

/* ---------- supply steps ------------------------------------------------ */

.steps{
  max-width:var(--max);
  margin:0 auto;
  padding:0; list-style:none;
  counter-reset:none;
}
.step{
  display:grid;
  grid-template-columns:88px 1fr;
  gap:18px;
  padding:26px 0;
  border-top:var(--rule);
  align-items:center;
}
.step:last-child{ border-bottom:var(--rule); }

.step__art{
  margin:0;
  display:grid; place-items:center;
  align-self:center;
}
.step__art img{
  max-width:100%;
  max-height:88px;
  width:auto;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.7));
}

.step__no{
  margin:0 0 7px;
  font:500 10px/1 var(--mono);
  letter-spacing:.22em;
  color:var(--filament);
}
.step__title{
  margin:0 0 8px;
  font:700 19px/1.25 var(--cond);
}
.step__body p{ margin:0 0 8px; color:#A9B3C1; font-size:14.5px; }
.step__meta{
  margin:0 !important;
  font:500 10.5px/1 var(--mono) !important;
  letter-spacing:.14em;
  color:var(--label-dim) !important;
  text-transform:uppercase;
}

.band{
  max-width:var(--max);
  margin:40px auto 0;
  border:var(--rule);
  border-radius:4px;
  overflow:hidden;
}
.band img{ width:100%; }
.band figcaption{
  padding:14px 18px;
  border-top:var(--rule);
  background:var(--bay);
  font:400 12.5px/1.6 var(--sans);
  color:var(--label);
}

/* ---------- api --------------------------------------------------------- */

.code{
  max-width:var(--max); margin:0 auto;
  border:var(--rule);
  border-radius:4px;
  overflow:hidden;
  background:var(--panel);
}
.code__bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px;
  border-bottom:var(--rule);
  background:rgba(0,0,0,.3);
}
.code__file{
  font:500 11px/1 var(--mono);
  letter-spacing:.1em;
  color:var(--label);
}
.code__copy{
  padding:6px 12px;
  border:var(--rule);
  border-radius:3px;
  background:transparent;
  color:var(--label);
  font:500 10.5px/1 var(--mono);
  letter-spacing:.12em;
  cursor:pointer;
}
.code__copy:hover{ border-color:var(--filament); color:var(--arc); }

.code__body{
  margin:0;
  padding:18px 16px;
  overflow-x:auto;
  font:400 12.5px/1.85 var(--mono);
  color:#B6C0CD;
  tab-size:2;
}
.code__body code{ color:inherit; }

.specs{
  max-width:var(--max);
  margin:20px auto 0;
  display:grid; gap:1px;
  background:var(--wire);
  border:var(--rule);
  border-radius:4px;
  overflow:hidden;
}
.spec{ margin:0; padding:16px 18px; background:var(--panel); }
.spec dt{
  font:500 9.5px/1 var(--mono);
  letter-spacing:.2em;
  color:var(--label-dim);
  text-transform:uppercase;
}
.spec dd{ margin:8px 0 0; font-size:14px; color:#C6CEDA; }

/* ---------- faq --------------------------------------------------------- */

.faq{ max-width:var(--max); margin:0 auto; border-top:var(--rule); }
.faq__item{ border-bottom:var(--rule); }

.faq__q{
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 34px 20px 0;
  position:relative;
  background:none; border:0;
  color:var(--readout);
  font:600 16px/1.4 var(--cond);
  letter-spacing:.01em;
  text-align:left;
  cursor:pointer;
}
.faq__q::after,
.faq__q::before{
  content:""; position:absolute; right:6px; top:50%;
  width:13px; height:1.5px;
  background:var(--filament);
  transition:transform .22s ease;
}
.faq__q::before{ transform:rotate(90deg); }
.faq__item.is-open .faq__q::before{ transform:rotate(0); }

.faq__a{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .28s ease;
}
.faq__item.is-open .faq__a{ grid-template-rows:1fr; }
.faq__a > div{ overflow:hidden; }
.faq__a p{
  margin:0;
  padding:0 0 22px;
  max-width:62ch;
  color:#A9B3C1;
  font-size:14.5px;
}
.faq__a b{ color:var(--arc); font-weight:600; }

/* ---------- closing ----------------------------------------------------- */

.close{
  padding:70px var(--gutter) 76px;
  text-align:center;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(242,160,61,.12), transparent 68%),
    var(--bay);
  border-top:var(--rule);
}
.close__ico{
  width:132px; margin:0 auto 26px;
  filter:drop-shadow(0 22px 34px rgba(0,0,0,.7));
}
.close__title{
  margin:0 0 14px;
  font:700 clamp(28px,7vw,42px)/1.12 var(--cond);
}
.close__lead{
  margin:0 auto 30px;
  max-width:42ch;
  color:#A9B3C1;
  font-size:15px;
}
.close__acts{ display:flex; justify-content:center; }
.close__hours{
  margin:26px 0 0;
  font:400 11.5px/1.6 var(--mono);
  color:var(--label-dim);
}

/* ---------- footer ------------------------------------------------------ */

.foot{
  padding:40px var(--gutter) 46px;
  border-top:var(--rule);
}
.foot__in{
  max-width:var(--max); margin:0 auto 26px;
  display:grid; gap:20px;
}
.foot__name{
  display:block;
  font:700 16px/1 var(--cond);
  letter-spacing:.12em;
}
.foot__name em{ font-style:normal; color:var(--label-dim); }
.foot__tag{
  display:block; margin-top:7px;
  font:400 11px/1 var(--mono);
  letter-spacing:.14em;
  color:var(--label-dim);
}
.foot__nav{ display:flex; flex-wrap:wrap; gap:8px 22px; }
.foot__nav a{
  font:500 12px/1 var(--mono);
  letter-spacing:.08em;
  color:var(--label);
  text-decoration:none;
}
.foot__nav a:hover{ color:var(--arc); }

.foot__fine{
  max-width:var(--max);
  margin:0 auto 18px;
  padding-top:22px;
  border-top:var(--rule);
  font-size:12.5px;
  line-height:1.75;
  color:var(--label-dim);
}
.foot__copy{
  display:block;
  max-width:var(--max);
  margin:0 auto;
  font:400 11px/1 var(--mono);
  letter-spacing:.1em;
  color:var(--label-dim);
}

/* ==========================================================================
   Wider viewports
   ========================================================================== */

@media (min-width:600px){
  :root{ --gutter:32px; }
  .strip{ grid-template-columns:repeat(4,1fr); }
  .strip__item{ border-bottom:0; }
  .strip__item:nth-child(2n){ border-right:var(--rule); }
  .strip__item:last-child{ border-right:0; }
  .ways{ grid-template-columns:1fr 1fr; }
  .specs{ grid-template-columns:repeat(2,1fr); }
  .plate{ grid-template-columns:auto 1fr; gap:32px; padding:32px; }
  .plate img{ width:92px; }
}

@media (min-width:900px){
  .rail__nav{ display:flex; }
  .hero{ padding:88px var(--gutter) 96px; }
  .hero__grid{ grid-template-columns:1fr 470px; gap:56px; align-items:center; }
  .sec{ padding:96px var(--gutter); }
  .sec__head{ margin-bottom:48px; }
  .specs{ grid-template-columns:repeat(4,1fr); }
  .step{ grid-template-columns:150px 1fr; gap:34px; padding:36px 0; }
  .step__art img{ max-height:124px; }
  .plate img{ width:132px; }
  .close__ico{ width:170px; }
  .foot__in{ grid-template-columns:1fr auto; align-items:center; }
  .readout__val{ font-size:52px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* ==========================================================================
   2026 interaction polish
   A restrained motion layer keeps the industrial-console concept intact while
   adding depth, hierarchy and much clearer feedback on scroll and hover.
   ========================================================================== */

:root{
  --page-progress:0;
  --ease-out:cubic-bezier(.2,.78,.2,1);
  --glow:rgba(242,160,61,.22);
}

body{
  background:
    radial-gradient(900px 520px at 78% 8%, rgba(242,160,61,.055), transparent 64%),
    var(--panel);
}

body::before{
  content:"";
  position:fixed; inset:0; z-index:80;
  pointer-events:none;
  opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}

.rail{
  box-shadow:0 16px 46px rgba(0,0,0,.16);
}
.rail::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px;
  height:2px;
  background:linear-gradient(90deg, var(--filament), var(--arc));
  box-shadow:0 0 14px var(--glow);
  transform:scaleX(var(--page-progress));
  transform-origin:left;
  will-change:transform;
}
.rail__nav a{
  position:relative;
  padding-block:8px;
  transition:color .2s ease;
}
.rail__nav a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:1px;
  height:1px; background:var(--filament);
  transform:scaleX(0); transform-origin:left;
  transition:transform .28s var(--ease-out);
}
.rail__nav a:hover::after,
.rail__nav a.is-active::after{ transform:scaleX(1); }
.rail__nav a.is-active{ color:var(--arc); }

.hero{
  isolation:isolate;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:-20%; z-index:-1;
  background-image:
    linear-gradient(rgba(242,160,61,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242,160,61,.035) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:linear-gradient(to bottom, #000, transparent 74%);
  mask-image:linear-gradient(to bottom, #000, transparent 74%);
  transform:perspective(700px) rotateX(57deg) translateY(-8%);
  transform-origin:center top;
  animation:grid-drift 16s linear infinite;
}
.hero::after{
  content:"";
  position:absolute; z-index:-1;
  width:52vw; height:52vw; right:-18vw; top:-28vw;
  border-radius:50%;
  background:radial-gradient(circle, rgba(242,160,61,.12), transparent 68%);
  filter:blur(8px);
  animation:hero-glow 7s ease-in-out infinite alternate;
}
.hero__grid{ position:relative; z-index:1; }
.motion-ready .hero__copy{ animation:hero-copy-in .78s var(--ease-out) both; }
.motion-ready .meter{ animation:meter-in .9s .12s var(--ease-out) both; }

@keyframes grid-drift{
  to{ background-position:0 64px, 64px 0; }
}
@keyframes hero-glow{
  from{ opacity:.45; transform:scale(.92); }
  to{ opacity:1; transform:scale(1.08); }
}
@keyframes hero-copy-in{
  from{ opacity:0; transform:translateY(22px); }
  to{ opacity:1; transform:none; }
}
@keyframes meter-in{
  from{ opacity:0; transform:translateY(26px) scale(.985); }
  to{ opacity:1; transform:none; }
}

.btn,
.rail__cta{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.btn::after,
.rail__cta::after{
  content:"";
  position:absolute; z-index:-1; inset:-2px;
  background:linear-gradient(105deg, transparent 34%, rgba(255,255,255,.22) 48%, transparent 62%);
  transform:translateX(-120%);
  transition:transform .62s var(--ease-out);
}
.btn:hover::after,
.rail__cta:hover::after{ transform:translateX(120%); }
.btn:active,
.rail__cta:active{ transform:translateY(1px) scale(.985); }
.btn--live{
  box-shadow:
    0 0 0 1px rgba(255,208,122,.35),
    0 14px 34px -16px rgba(242,160,61,.9),
    inset 0 1px 0 rgba(255,255,255,.28);
}

.meter{
  --meter-rx:0deg;
  --meter-ry:0deg;
  position:relative;
  transform:perspective(1100px) rotateX(var(--meter-rx)) rotateY(var(--meter-ry));
  transform-style:preserve-3d;
  transition:transform .3s var(--ease-out), border-color .3s ease, box-shadow .3s ease;
}
.meter::before{
  content:"";
  position:absolute; inset:0; z-index:3;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(128deg, rgba(255,255,255,.055), transparent 28% 72%, rgba(242,160,61,.035));
}
.meter:hover{
  border-color:#364150;
  box-shadow:0 38px 90px -38px #000, 0 0 42px -30px var(--filament), inset 0 1px 0 rgba(255,255,255,.065);
}
.meter__lamp,
.mark__lamp{ will-change:opacity, box-shadow; }
.meter__slider::-webkit-slider-thumb{
  transition:transform .18s ease, box-shadow .18s ease;
}
.meter__slider:hover::-webkit-slider-thumb{
  transform:scale(1.12);
  box-shadow:0 0 0 1px var(--filament), 0 0 18px var(--glow), 0 4px 12px -2px #000;
}
.bay__fill{ transition:width .52s var(--ease-out); }

.way,
.plate,
.spec,
.step,
.code,
.faq__item{
  transition:border-color .28s ease, background-color .28s ease, transform .3s var(--ease-out), box-shadow .3s ease;
}
.way:hover,
.plate:hover,
.spec:hover{
  transform:translateY(-4px);
  border-color:#394453;
  box-shadow:0 22px 44px -34px #000;
}
.way--rent:hover{ border-color:rgba(242,160,61,.62); }
.way--burn:hover{ border-color:rgba(224,71,63,.54); }
.step:hover{ background:linear-gradient(90deg, rgba(242,160,61,.045), transparent 72%); }
.step__art img,
.plate img,
.close__ico{ transition:transform .5s var(--ease-out), filter .5s ease; }
.step:hover .step__art img,
.plate:hover img{ transform:translateY(-4px) scale(1.035); }
.close:hover .close__ico{
  transform:translateY(-6px) rotate(-2deg);
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.75)) drop-shadow(0 0 18px rgba(242,160,61,.16));
}
.faq__q{ transition:color .22s ease, background-color .22s ease; }
.faq__q:hover{ color:var(--arc); background:rgba(242,160,61,.025); }
.faq__item.is-open{ border-color:#3A414C; background:rgba(255,255,255,.012); }

.motion-ready .reveal-item{
  opacity:0;
  transform:translateY(24px);
  transition:
    opacity .72s var(--ease-out) var(--reveal-delay,0ms),
    transform .72s var(--ease-out) var(--reveal-delay,0ms);
}
.motion-ready .reveal-item.is-visible{
  opacity:1;
  transform:none;
}

.close{
  position:relative;
  overflow:hidden;
}
.close::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:repeating-radial-gradient(circle at 50% 0%, transparent 0 46px, rgba(242,160,61,.025) 47px 48px);
  -webkit-mask-image:linear-gradient(#000, transparent 84%);
  mask-image:linear-gradient(#000, transparent 84%);
}
.close > *{ position:relative; }

@media (hover:hover) and (pointer:fine){
  .rail__cta:hover{ box-shadow:0 0 22px rgba(242,160,61,.2); }
}

@media (max-width:599px){
  .hero::before{ background-size:44px 44px; opacity:.7; }
  .hero::after{ width:100vw; height:100vw; right:-55vw; top:-35vw; }
  .meter{ transform:none !important; }
  .way:hover,
  .plate:hover,
  .spec:hover{ transform:none; }
}

@media (prefers-reduced-motion:reduce){
  .hero::before,
  .hero::after{ animation:none !important; }
  .motion-ready .hero__copy,
  .motion-ready .meter,
  .motion-ready .reveal-item{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
  .rail::after{ transition:none; }
}

/* ==========================================================================
   Light theme
   The same metering language, rebuilt as a bright operations desk. The hero
   now uses a real image panel instead of burying photography under an overlay.
   ========================================================================== */

:root{
  --panel:#F7F9FB;
  --bay:#FFFFFF;
  --bay-2:#F2F5F7;
  --wire:#DCE3E9;
  --wire-soft:#E9EEF2;
  --filament:#E88718;
  --arc:#B95D06;
  --burn:#C9443B;
  --readout:#17232E;
  --label:#667482;
  --label-dim:#8C98A3;
  --glow:rgba(232,135,24,.2);
  --rule:1px solid var(--wire);
}

body{
  color:var(--readout);
  background:
    radial-gradient(900px 560px at 78% 4%, rgba(232,135,24,.08), transparent 64%),
    var(--panel);
}
body::before{
  opacity:.055;
  mix-blend-mode:multiply;
}

.rail{
  background:rgba(255,255,255,.9);
  box-shadow:0 16px 46px rgba(32,47,61,.08);
}
.mark__lamp{
  box-shadow:0 0 0 3px rgba(232,135,24,.13), 0 0 13px rgba(232,135,24,.32);
}
.rail__cta{
  color:#A45108;
  background:#FFF8EF;
}
.rail__cta:hover{ color:#fff; background:var(--filament); }

.hero{
  padding-top:64px;
  background:
    radial-gradient(620px 420px at 82% 12%, rgba(232,135,24,.09), transparent 70%),
    linear-gradient(180deg, #FFFFFF 0%, #F5F8FA 100%);
  border-bottom:var(--rule);
}
.hero::before{
  opacity:.5;
  background-image:
    linear-gradient(rgba(167,91,12,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167,91,12,.045) 1px, transparent 1px);
}
.hero::after{
  background:radial-gradient(circle, rgba(232,135,24,.11), transparent 68%);
}
.hero__title{ color:#14212C; }
.hero__title em{ color:#C66A0A; }
.hero__lead{ color:#526271; }

.hero__photo{
  position:relative;
  min-width:0;
  height:clamp(220px,46vw,340px);
  margin:0;
  overflow:hidden;
  border:1px solid #D5DEE5;
  border-radius:18px;
  background:#17232E;
  box-shadow:0 28px 70px -38px rgba(27,43,56,.52);
}
.hero__photo::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, transparent 42%, rgba(8,15,21,.72) 100%);
}
.hero__photo img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform 1.1s var(--ease-out), filter .5s ease;
}
.hero__photo:hover img{ transform:scale(1.025); filter:saturate(1.05); }
.hero__photo figcaption{
  position:absolute; left:18px; right:18px; bottom:15px; z-index:2;
  display:flex; align-items:center; gap:9px;
  margin:0;
  color:#F7FAFC;
  font:500 10.5px/1.35 var(--mono);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.hero__photo-live{
  width:8px; height:8px; flex:none;
  border-radius:50%;
  background:#FFD079;
  box-shadow:0 0 0 4px rgba(255,208,121,.16), 0 0 12px rgba(255,208,121,.8);
  animation:pulse 2.2s ease-in-out infinite;
}
.motion-ready .hero__photo{ animation:meter-in .82s .06s var(--ease-out) both; }

.btn--live{
  color:#231609;
  box-shadow:0 14px 34px -17px rgba(209,111,11,.55), inset 0 1px 0 rgba(255,255,255,.38);
}
.btn--live:hover{ color:#231609; }
.btn--ghost{ background:#fff; color:#283744; }

.meter{
  background:linear-gradient(180deg, #FFFFFF, #F7F9FB);
  border-color:#D5DEE5;
  box-shadow:0 32px 72px -42px rgba(22,35,46,.52), inset 0 1px 0 #fff;
}
.meter::before{
  background:linear-gradient(128deg, rgba(255,255,255,.74), transparent 30% 72%, rgba(232,135,24,.035));
}
.meter:hover{
  border-color:#C4D0D9;
  box-shadow:0 38px 82px -42px rgba(22,35,46,.58), 0 0 44px -34px rgba(232,135,24,.55), inset 0 1px 0 #fff;
}
.meter__head,
.tariff thead th,
.code__bar{ background:#F0F4F7; }
.meter__slider::-webkit-slider-thumb{
  background:#fff;
  border-color:#D0D9E0;
  box-shadow:0 0 0 1px var(--filament), 0 5px 14px -5px rgba(30,44,57,.35);
}
.meter__slider::-moz-range-thumb{ background:#fff; border-color:#D0D9E0; }
.bay__track{ background:#EEF2F5; }
.bay__fill{ background-blend-mode:normal; box-shadow:none; }
.readout__val{ color:#B95D06; text-shadow:0 8px 28px rgba(232,135,24,.14); }
.meter__fine{ background:#F2F5F7; }

.strip{
  background:#FFFFFF;
  box-shadow:0 16px 46px -40px rgba(22,35,46,.45);
}
.strip__item dd{ color:#B95D06; }
.sec--bay{ background:#F0F4F7; }
.sec__sub,
.way__body,
.plate__body,
.step__body p,
.faq__a p,
.close__lead{ color:#5D6C79; }

.way{
  background:linear-gradient(180deg, #FFFFFF, #FAFBFC);
  box-shadow:0 20px 48px -42px rgba(22,35,46,.55);
}
.plate{
  background:
    radial-gradient(120% 90% at 12% 50%, rgba(232,135,24,.1), transparent 62%),
    #FFFFFF;
  box-shadow:0 24px 54px -44px rgba(22,35,46,.58);
}
.plate img,
.step__art img{ filter:drop-shadow(0 14px 22px rgba(45,58,68,.2)); }

.tariff__scroll,
.code,
.spec{ background:#FFFFFF; }
.tariff tbody td,
.spec dd{ color:#435463; }
.tariff tbody tr.is-pick{ background:#FFF5E8; }
.tariff tbody tr:hover{ background:#F7FAFC; }
.tariff tbody tr.is-pick:hover{ background:#FFF1DD; }
.code__body{ color:#3D5161; }
.specs{ background:#DCE3E9; }

.way:hover,
.plate:hover,
.spec:hover{ border-color:#C5D0D8; box-shadow:0 24px 52px -38px rgba(22,35,46,.38); }
.step:hover{ background:linear-gradient(90deg, rgba(232,135,24,.055), transparent 72%); }
.faq__q:hover{ color:#A45108; background:#FFF9F2; }
.faq__item.is-open{ border-color:#D2DAE0; background:#FBFCFD; }

.close{
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(232,135,24,.14), transparent 68%),
    #FFFFFF;
}
.close::before{
  background:repeating-radial-gradient(circle at 50% 0%, transparent 0 46px, rgba(185,93,6,.035) 47px 48px);
}
.close__ico{ filter:drop-shadow(0 22px 34px rgba(38,51,62,.2)); }
.foot{ background:#F2F5F7; }

@media (min-width:900px){
  .hero{ padding-block:78px 92px; }
  .hero__grid{
    grid-template-columns:repeat(12,minmax(0,1fr));
    gap:0 34px;
    align-items:start;
  }
  .hero__copy{
    grid-column:1 / 7;
    grid-row:1 / span 2;
    align-self:center;
    padding-right:20px;
  }
  .hero__photo{
    grid-column:7 / 13;
    grid-row:1;
    height:350px;
  }
  .meter{
    grid-column:7 / 13;
    grid-row:2;
    z-index:3;
    margin:-96px 34px 0;
  }
}

@media (max-width:899px){
  .hero__photo{ order:2; }
  .meter{ order:3; }
}

@media (prefers-reduced-motion:reduce){
  .motion-ready .hero__photo{ animation:none !important; opacity:1 !important; transform:none !important; }
  .hero__photo-live{ animation:none !important; }
}

/* ---------- floating conversion button -------------------------------- */

.fixed-contact{
  position:fixed; left:50%; right:auto; bottom:24px; z-index:75;
  width:min(306px, calc(100vw - 32px));
  transform:translateX(-50%);
  display:flex; align-items:center; gap:12px;
  min-width:0;
  padding:12px 14px 12px 12px;
  border:1px solid rgba(255,255,255,.56);
  border-radius:18px;
  background:linear-gradient(135deg, #F5A12D, #E47B0A);
  color:#211508;
  text-decoration:none;
  box-shadow:
    0 18px 38px -14px rgba(180,82,0,.58),
    0 0 0 1px rgba(232,135,24,.14),
    0 0 30px rgba(232,135,24,.34),
    inset 0 1px 0 rgba(255,255,255,.42);
  isolation:isolate;
  animation:fixed-contact-bob 2.35s ease-in-out infinite;
  transition:transform .22s var(--ease-out), box-shadow .22s ease, filter .22s ease;
}
.fixed-contact::before{
  content:"";
  position:absolute; inset:-7px; z-index:-1;
  border:2px solid rgba(232,135,24,.42);
  border-radius:23px;
  animation:fixed-contact-ring 2.35s ease-out infinite;
}
.fixed-contact:hover{
  transform:translateX(-50%) scale(1.035);
  filter:brightness(1.03);
  box-shadow:
    0 22px 44px -14px rgba(180,82,0,.66),
    0 0 0 1px rgba(232,135,24,.18),
    0 0 42px rgba(232,135,24,.48),
    inset 0 1px 0 rgba(255,255,255,.5);
}
.fixed-contact:active{ transform:translateX(-50%) scale(.985); }
.fixed-contact__icon{
  width:42px; height:42px; flex:none;
  display:grid; place-items:center;
  border-radius:13px;
  background:rgba(255,255,255,.88);
  box-shadow:0 8px 18px -10px rgba(70,33,0,.55);
}
.fixed-contact__icon img{ width:27px; height:27px; object-fit:contain; }
.fixed-contact__copy{ min-width:0; line-height:1.15; }
.fixed-contact__copy strong{
  display:block;
  font:700 15px/1.15 var(--cond);
  letter-spacing:.02em;
}
.fixed-contact__copy small{
  display:block; margin-top:4px;
  font:500 9.5px/1.2 var(--mono);
  opacity:.7;
  white-space:nowrap;
}
.fixed-contact__arrow{
  margin-left:auto;
  font:600 21px/1 var(--mono);
  transition:transform .22s var(--ease-out);
}
.fixed-contact:hover .fixed-contact__arrow{ transform:translateX(3px); }

@keyframes fixed-contact-bob{
  0%,100%{ margin-bottom:0; }
  50%{ margin-bottom:10px; }
}
@keyframes fixed-contact-ring{
  0%{ opacity:.6; transform:scale(.94); }
  72%,100%{ opacity:0; transform:scale(1.11); }
}

@media (max-width:599px){
  .fixed-contact{
    left:50%; right:auto;
    bottom:calc(14px + env(safe-area-inset-bottom));
    width:calc(100vw - 32px);
  }
  .fixed-contact__copy small{ white-space:normal; }
  .foot{ padding-bottom:124px; }
}

@media (prefers-reduced-motion:reduce){
  .fixed-contact,
  .fixed-contact::before{ animation:none !important; }
}