/* ========================================
   Где Бензин — landing styles (dark theme)
   ======================================== */

/* --- Reset --- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%}

body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:#1A1714;
  color:#F5F0E8;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

a{color:#F59E0B;text-decoration:none}
a:hover{text-decoration:underline}
img{display:block;max-width:100%;height:auto}

/* --- Layout --- */
.w{max-width:1100px;margin:0 auto;padding:0 1.25rem}

/* --- Header --- */
.hdr{padding:.875rem 0;border-bottom:1px solid #3A342B}
.hdr .w{display:flex;align-items:center;justify-content:space-between}
.hdr-logo{
  font-family:'Unbounded',cursive;font-weight:700;
  font-size:1.125rem;color:#F59E0B;
}
.hdr-logo:hover{text-decoration:none}
.hdr-link{font-size:.8125rem;color:#A69F8F}
.hdr-link:hover{color:#F5F0E8;text-decoration:none}

/* --- Buttons --- */
.btn-p,.btn-o{
  display:inline-block;padding:.75rem 1.75rem;border-radius:8px;
  font-weight:600;font-size:1rem;text-decoration:none;
  transition:background .15s,border-color .15s;
}
.btn-p{background:#F59E0B;color:#1A1714}
.btn-p:hover{background:#D97706;text-decoration:none}
.btn-o{border:1px solid #F59E0B;color:#F59E0B;background:transparent}
.btn-o:hover{background:rgba(245,158,11,.08);text-decoration:none}

/* --- Hero --- */
.hero{padding:3rem 0 2rem;text-align:center}
.hero-col{display:flex;flex-direction:column;align-items:center}
.hero-icon{margin-bottom:.75rem}
.hero h1{
  font-family:'Unbounded',cursive;font-weight:800;
  font-size:2rem;line-height:1.15;margin-bottom:.625rem;
}
.hero-sub{color:#A69F8F;max-width:520px;font-size:.9375rem}
.hero-btns{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center;margin-top:1.5rem}

/* --- Summary section --- */
.summary{padding:2.5rem 0}
.summary h2{
  font-family:'Unbounded',cursive;font-weight:700;
  font-size:1.375rem;text-align:center;margin-bottom:1.75rem;
}

/* --- Region card grid --- */
.grid{display:grid;grid-template-columns:1fr;gap:1rem}

.card{
  display:flex;flex-direction:column;gap:.375rem;
  background:#242019;border:1px solid #3A342B;border-radius:12px;
  padding:1.125rem 1.125rem 1rem 1.375rem;
  border-left:4px solid #3A342B;
  color:inherit;
  transition:border-color .15s,transform .15s;
}
.card:hover{border-color:#5A5347;transform:translateY(-2px);text-decoration:none}
.card--green{border-left-color:#34D399}
.card--amber{border-left-color:#F59E0B}
.card--red{border-left-color:#F87171}

.card-region{font-size:1.125rem;font-weight:600;color:#F5F0E8}
.card-hero{display:flex;flex-direction:column}
.card-num{
  font-size:2.5rem;font-weight:700;line-height:1.1;
  color:#F59E0B;
  font-variant-numeric:tabular-nums;
}
.card-fuel{font-size:.875rem;color:#A69F8F;margin-top:.125rem}
.card-time{font-size:.75rem;color:#706A5E;font-variant-numeric:tabular-nums}

/* --- Color helpers --- */
.c-green{color:#34D399}
.c-red{color:#F87171}

/* --- How it works --- */
.how{padding:2.5rem 0}
.how h2{
  font-family:'Unbounded',cursive;font-weight:700;
  font-size:1.375rem;text-align:center;margin-bottom:2rem;
}
.steps{display:grid;grid-template-columns:1fr;gap:2.5rem}
.step{text-align:center}
.step-n{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.5rem;height:2.5rem;border-radius:50%;
  background:#F59E0B;color:#1A1714;
  font-family:'Unbounded',cursive;font-weight:700;font-size:1.125rem;
  margin-bottom:1rem;
}

/* Phone frame for screenshots */
.phone{
  width:240px;
  margin:0 auto 1rem;
  border:1px solid #3A342B;border-radius:20px;
  padding:6px;background:#242019;
  overflow:hidden;
}
.phone img{width:100%;height:auto;display:block;border-radius:14px}

/* Screenshot hover + cursor */
.screen-img{cursor:zoom-in;transition:transform .2s}
.screen-img:hover{transform:scale(1.04)}

/* Lightbox dialog */
#lb{
  border:none;background:none;padding:0;
  max-width:100vw;max-height:100vh;
  overflow:visible;
}
#lb::backdrop{background:rgba(0,0,0,.85)}
#lb img{max-height:90vh;max-width:92vw;display:block;margin:auto;border-radius:12px}
#lb-close{
  position:fixed;top:1rem;right:1rem;
  background:none;border:none;color:#F5F0E8;
  font-size:2rem;line-height:1;cursor:pointer;
  width:2.5rem;height:2.5rem;
  display:flex;align-items:center;justify-content:center;
}
#lb-close:hover{color:#F59E0B}

.step h3{font-size:1rem;font-weight:600;margin-bottom:.25rem}
.step p{font-size:.8125rem;color:#A69F8F;max-width:240px;margin:0 auto}

/* --- CTA --- */
.cta{padding:2.5rem 0}
.cta-box{
  border:2px dashed #F59E0B;border-radius:12px;
  padding:2rem;text-align:center;
  max-width:640px;margin:0 auto;
}
.cta-box h2{
  font-family:'Unbounded',cursive;font-weight:700;
  font-size:1.25rem;margin-bottom:.5rem;
}
.cta-box p{color:#A69F8F;font-size:.9375rem;margin-bottom:1.25rem}

/* --- Geography SEO block --- */
.geo{padding:2rem 0}
.geo h2{
  font-family:'Unbounded',cursive;font-weight:700;
  font-size:1.25rem;margin-bottom:.75rem;
}
.geo p{color:#A69F8F;font-size:.875rem;line-height:1.65;max-width:800px}

/* --- Footer --- */
.ftr{padding:1.5rem 0;border-top:1px solid #3A342B;font-size:.8125rem;color:#706A5E}
.ftr-inner{display:flex;flex-direction:column;gap:.625rem}
.ftr-col{display:flex;flex-direction:column;gap:.125rem}
.ftr-label{color:#A69F8F;font-weight:600}
.ftr-text{color:#706A5E}
a.ftr-text{color:#A69F8F}
a.ftr-text:hover{color:#F5F0E8}
.ftr-links{display:flex;gap:1rem;flex-wrap:wrap}
.ftr-links a{color:#A69F8F}
.ftr-links a:hover{color:#F5F0E8}
.ftr-copy{color:#504A40}

/* --- Region page: fuel tiles --- */
.fuel-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}
.fuel-tile{
  background:#242019;border:1px solid #3A342B;border-radius:12px;
  padding:1rem;text-align:center;
  display:flex;flex-direction:column;gap:.25rem;
}
.fuel-tile-name{font-size:.875rem;color:#A69F8F}
.fuel-tile-num{
  font-size:2.5rem;font-weight:700;line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.fuel-tile-of{font-size:.75rem;color:#A69F8F}
.region-total{text-align:center;font-size:.8125rem;color:#706A5E;margin-top:1rem}

/* --- Districts --- */
.districts{padding:2rem 0}
.districts h2{
  font-family:'Unbounded',cursive;font-weight:700;
  font-size:1.25rem;margin-bottom:1rem;
}
.dist-list{list-style:none;columns:2;column-gap:2rem}
.dist-list li{padding:.25rem 0;font-size:.875rem;color:#A69F8F}

/* ========================
   Responsive  >=768px
   ======================== */
@media(min-width:768px){
  .hero h1{font-size:3rem}
  .grid{grid-template-columns:repeat(2,1fr)}
  .card-num{font-size:2.5rem}
  .steps{grid-template-columns:repeat(3,1fr)}
  .fuel-grid{grid-template-columns:repeat(3,1fr)}
  .dist-list{columns:3}
  .ftr-inner{flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:flex-start}
}