:root{
  color-scheme: dark;
  --bg: #0b1020;
  --bg2: #080b16;
  --text: #eaf0ff;
  --muted: rgba(234,240,255,.72);
  --muted2: rgba(234,240,255,.55);
  --card: rgba(255,255,255,.06);
  --card2: rgba(255,255,255,.08);
  --border: rgba(255,255,255,.12);
  --border2: rgba(255,255,255,.18);
  --accent: #00D4FF;
  --accent2:#2F80FF;
  --shadow: 0 24px 60px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
img,svg,video,canvas{max-width:100%; height:auto}


html,body{height:100%; max-width:100%; overflow-x:hidden}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 700px at 20% -10%, rgba(47,128,255,.24), transparent 60%),
    radial-gradient(1000px 700px at 90% 10%, rgba(0,212,255,.20), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  color: var(--text);
}

.text-muted{color: var(--muted) !important;}

.border-soft{border:1px solid var(--border) !important;}

.nav-glass{
  background: rgba(10,14,28,.55);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.navbar .nav-link{color: rgba(234,240,255,.78) !important;}
.navbar .nav-link:hover{color: #fff !important;}

.navbar .nav-link{white-space:nowrap;}
.navbar .navbar-nav{gap: 6px;}
@media (max-width: 1200px){
  .navbar .nav-link{font-size:.95rem; padding-left:.55rem; padding-right:.55rem;}
}
@media (max-width: 992px){
  .navbar .navbar-collapse{padding-top:10px;}
  .navbar .navbar-nav{gap:2px;}
}

.brand-mark{
  width:34px;height:34px;border-radius:12px;
  display:grid;place-items:center;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 10px 25px rgba(0,212,255,.18);
}

.badge-soft{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(234,240,255,.85) !important;
}

.btn-accent{
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border: none;
  color: white;
  box-shadow: 0 18px 42px rgba(0,212,255,.18);
}
.btn-accent:hover{filter: brightness(1.06); color:white;}

.hero{
  position: relative;
  padding: 96px 0 64px;
  background: url('../img/hero_collage.jpg') center/cover no-repeat;
}
.hero-overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(1000px 700px at 20% 0%, rgba(0,0,0,.35), rgba(0,0,0,.85)),
    linear-gradient(180deg, rgba(11,16,32,.35), rgba(11,16,32,.95));
}

.hero-badge{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:10px 14px;
  border-radius:999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(234,240,255,.88);
}

.glass-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.hero-thumb{
  width: 84px;
  height: 68px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--border);
}

.mini-stat{
  display:flex;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}

.mini-stat__icon{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}

.section{
  padding: 72px 0;
}

.section-alt{
  background: rgba(255,255,255,.02);
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.section-title{margin-bottom: 22px;}
.kicker{
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .78rem;
  color: rgba(234,240,255,.68);
}

.form-select, .form-control{
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: var(--text) !important;
}
.form-select:disabled{opacity:.55}

.form-select:focus, .form-control:focus{
  box-shadow: 0 0 0 .25rem rgba(0,212,255,.14) !important;
  border-color: rgba(0,212,255,.45) !important;
}

/* Inputs should ALWAYS read light-on-dark */
.form-control::placeholder,
.form-select::placeholder,
textarea.form-control::placeholder{
  color: rgba(234,240,255,.62) !important;
}

/* Chrome autofill: keep text light */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color: rgba(234,240,255,.92) !important;
  transition: background-color 9999s ease-in-out 0s;
  caret-color: rgba(234,240,255,.92);
}

/* Best-effort styling for native dropdown list */
.form-select option{
  color: rgba(234,240,255,.92);
  background: #0b1020;
}


.table-modern{
  border-radius: 14px;
  overflow: hidden;
}
.table-modern thead th{
  background: rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.table-modern td, .table-modern th{
  border-color: rgba(255,255,255,.08) !important;
}

.car-thumb{
  width: 128px;
  height: 86px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
}

.soft-panel{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
}
.soft-panel__icon{
  width: 42px;
  height: 42px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}

.accordion{
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: rgba(255,255,255,.10);
  --bs-accordion-btn-color: rgba(234,240,255,.90);
  --bs-accordion-color: rgba(234,240,255,.80);
  --bs-accordion-active-bg: rgba(255,255,255,.06);
  --bs-accordion-active-color: #fff;
  --bs-accordion-btn-focus-box-shadow: none;
}

.stage-card__top{display:flex;flex-direction:column;align-items:flex-start;gap:10px;}
.stage-title{font-size:1.55rem; letter-spacing:-0.02em; line-height:1.15;}
.stage-title:after{content:""; display:block; height:2px; width:58px; margin-top:10px; border-radius:2px; background: linear-gradient(90deg, var(--accent), var(--accent2)); opacity:.95;}
@media (max-width: 576px){.stage-title{font-size:1.35rem;}}

.workshot{
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
}

.step{display:flex;gap:14px;align-items:flex-start;}
.step__num{
  width: 42px;
  height: 42px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: linear-gradient(135deg, rgba(0,212,255,.22), rgba(124,58,237,.22));
  border: 1px solid rgba(255,255,255,.14);
  font-weight: 700;
}

.cta{
  padding: 28px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(0,212,255,.18), rgba(124,58,237,.12));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
}

.footer{
  padding-top: 18px;
}
.footer-divider{
  height: 1px;
  margin-bottom: 14px;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,.65), rgba(47,128,255,.65), transparent);
  opacity: .95;
  filter: drop-shadow(0 0 10px rgba(0,212,255,.18));
}
.footer-credits{
  letter-spacing: .04em;
}
.footer-credits .credit-name{
  color: var(--text);
  font-weight: 650;
}

.link-light{color: rgba(234,240,255,.88);}
.link-light:hover{color:#fff;}

@media (max-width: 991px){
  .hero{padding: 72px 0 54px;}
}



/* ------------------------------------------------------------
   ESYPerformance – Premium visuals
------------------------------------------------------------ */

.brand-logo{
  height: 40px;
  width: auto;
  display: block;
}
.brand-logo--mark{
  height: 34px;
}

.footer-logo{
  width: 22px;
  height: 22px;
  opacity: .92;
}

.hero{
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.hero-mosaic{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.mosaic-tile{
  position: relative;
  display: block;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
  transform: translateZ(0);
}
.mosaic-tile img{
  width: 100%;
  height: 90px;
  object-fit: cover;
  display: block;
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.02);
  transition: transform .35s ease;
}
.mosaic-tile:hover img{ transform: scale(1.06); }
.mosaic-tile::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(420px 140px at 0% 0%, rgba(0,212,255,.22), transparent 60%),
    radial-gradient(420px 140px at 100% 0%, rgba(124,58,237,.22), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.78));
  opacity: .9;
  transition: opacity .25s ease;
}
.mosaic-chip{
  position:absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  font-size: .78rem;
  font-weight: 600;
  padding: 7px 10px;
  border-radius: 999px;
  color: rgba(234,240,255,.92);
  background: rgba(12,16,30,.55);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  white-space: nowrap;
}
.mosaic-tile:hover{
  border-color: rgba(255,255,255,.18);
}
.mosaic-tile:hover::after{
  opacity: .78;
}

/* Media grid (Proces) */
.media-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
}
.media-grid__img{
  width:100%;
  height:100%;
  min-height: 160px;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
}
.media-grid__img:nth-child(1){
  grid-row: 1 / span 2;
  min-height: 332px;
}

/* Slightly more premium spacing on large screens */
@media (min-width: 992px){
  .hero{padding: 108px 0 76px;}
}

/* Mosaic responsive */
@media (max-width: 991px){
  .hero-mosaic{grid-template-columns: repeat(2, 1fr);}
  .mosaic-tile img{height: 96px;}
}
@media (max-width: 420px){
  .hero-mosaic{grid-template-columns: 1fr;}
  .mosaic-tile img{height: 120px;}
}

/* ------------------------------------------------------------
   Luxury micro-animations (subtle, not kitsch)
------------------------------------------------------------ */
.glass-card, .mosaic-tile, .table-modern tbody tr{
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease, filter .18s ease;
}

.glass-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 26px 70px rgba(0,0,0,.52);
}

.mosaic-tile:hover{
  transform: translateY(-2px);
  filter: brightness(1.03);
}

.btn, .btn-accent{
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.btn:hover{
  transform: translateY(-1px);
}

.btn-accent{
  position: relative;
  overflow: hidden;
}
.btn-accent::after{
  content:'';
  position:absolute; inset:-40%;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%);
  transform: translateX(-60%) rotate(10deg);
  transition: transform .55s ease;
  pointer-events:none;
}
.btn-accent:hover::after{
  transform: translateX(30%) rotate(10deg);
}

/* Scroll reveal (very soft) */
.reveal{
  opacity: 0;
  transform: translateY(10px);
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
  transition: opacity .55s ease, transform .55s ease;
}

/* ------------------------------------------------------------
   Power Graph (UI only) – modern dyno-like widget
------------------------------------------------------------ */
.graph-card{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 16px;
}

.graph-toolbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.stage-switch{
  display:inline-flex;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.10);
}

.stage-switch button{
  border: 0;
  background: transparent;
  color: rgba(234,240,255,.82);
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease, color .18s ease;
  font-size: 14px;
}

.stage-switch button:hover{
  background: rgba(255,255,255,.07);
  transform: translateY(-1px);
}

.stage-switch button.is-active{
  background: linear-gradient(135deg, rgba(0,212,255,.35), rgba(47,128,255,.35));
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
}

.stage-switch button:disabled{
  opacity: .45;
  cursor: not-allowed;
}

.graph-wrap{
  margin-top: 12px;
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(900px 280px at 20% 0%, rgba(0,212,255,.16), transparent 55%),
    radial-gradient(900px 280px at 85% 20%, rgba(47,128,255,.16), transparent 60%),
    rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);
}

.graph-svg{
  width: 100%;
  height: auto;
  display:block;
}

.graph-legend{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
}

.legend-item{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  color: rgba(234,240,255,.78);
  font-size: 13px;
}

.legend-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(234,240,255,.55);
  box-shadow: 0 0 0 3px rgba(255,255,255,.06);
}
.legend-dot.tuned{
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,212,255,.12);
}
.legend-dot.torque{
  background: var(--accent2);
  box-shadow: 0 0 0 3px rgba(47,128,255,.12);
}

.graph-note{
  margin-top: 12px;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}

.graph-note .mini-chart{
  width: 156px;
  height: 70px;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  display:grid;
  place-items:center;
}

.graph-note ul{
  margin: 0;
  padding-left: 18px;
  color: rgba(234,240,255,.78);
}
.graph-note li{ margin: 6px 0; }

.graph-disclaimer{
  color: rgba(234,240,255,.60);
  font-size: 12px;
  margin-top: 8px;
}


/* ------------------------------------------------------------
   Fuel rubric – Petrol vs Diesel (safe tuning)
------------------------------------------------------------ */
.fuel-card{
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  position: relative;
  overflow: hidden;
}
.fuel-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(520px 160px at 0% 0%, rgba(0,212,255,.16), transparent 60%),
    radial-gradient(520px 160px at 100% 0%, rgba(47,128,255,.12), transparent 60%);
  opacity:.9;
}
.fuel-card > *{ position: relative; }

.fuel-card__title{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: .2px;
  margin-bottom: 10px;
}
.fuel-card__title i{
  width: 30px; height: 30px;
  border-radius: 10px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--accent);
}
.fuel-card--diesel .fuel-card__title i{ color: var(--accent2); }

.fuel-card ul{
  margin: 0;
  padding-left: 18px;
}
.fuel-card li{ margin-bottom: 6px; }


.stage-switch button.is-missing{
  opacity: .62;
  border: 1px dashed rgba(234,240,255,.24);
}
.stage-switch button.is-missing:hover{
  opacity: .85;
}

.feature-card ul{ padding-left: 18px; }
.feature-card li{ margin-bottom: 6px; }

.feature-icon{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom: 12px;
  background: linear-gradient(135deg, rgba(0,212,255,.20), rgba(47,128,255,.20));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
  color: rgba(234,240,255,.92);
}


/* Mobile overflow guard */
@media (max-width: 420px){
  .hero-mosaic{ grid-template-columns: 1fr; }
  .mosaic-tile img{ height: 120px; }
  .brand-logo{ width: 120px; }
  .navbar .badge-soft{ display:none; }
  .graph-legend{ flex-wrap: wrap; gap: 10px; }
}


/* ECU icon (replaces image) */
.ecu-icon-box{
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.10), rgba(255,255,255,.04) 45%, rgba(255,255,255,.02) 100%);
  display: grid;
  place-items: center;
}
.ecu-icon-box i{
  font-size: 46px;
  opacity: .9;
}


/* Mini pills (quick summary) */
.mini-pill{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  min-width: 160px;
}
.mini-pill__k{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255,255,255,.65);
}
.mini-pill__v{
  font-size: 14px;
  font-weight: 700;
}


/* Autofill contrast fix */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color: var(--text) !important;
  transition: background-color 9999s ease-in-out 0s;
  box-shadow: 0 0 0px 1000px rgba(255,255,255,.05) inset !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}

/* FORCE_LIGHT_FORM_TEXT */
:root{ --formText:#e6eef8; --formPlaceholder:rgba(230,238,248,.55); --formBg:rgba(255,255,255,.06); }
.form-control, .form-select, textarea.form-control{
  color: var(--formText) !important;
  background-color: var(--formBg) !important;
}
.form-control::placeholder, textarea.form-control::placeholder{
  color: var(--formPlaceholder) !important;
}
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color: var(--formText) !important;
  transition: background-color 9999s ease-in-out 0s;
  caret-color: var(--formText) !important;
}
select option{
  color: var(--formText);
  background-color: #0b1220;
}