/* =========================================================
   FLAGMAN BRILLIANT — premium motor oil site
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --bg: #060606;
  --bg-1: #0b0b0b;
  --bg-2: #121212;
  --panel: #131313;
  --panel-2: #1a1a1a;
  --line: rgba(216,168,60,.20);
  --line-soft: rgba(255,255,255,.08);

  /* richer, more contrasted gold — deeper base + bright shimmer highlight */
  --gold: #b8862f;
  --gold-2: #f2cf7c;
  --gold-3: #7a5518;
  --gold-hi: #fff3cf;
  --gold-deep: #513a10;
  --ink: #f5f1e6;
  --ink-dim: #cabfa6;
  --muted: #a89c86;
  --muted-2: #7d7360;

  --red: #b5342f;
  --green: #3aa860;

  --radius: 18px;
  --radius-sm: 10px;
  --container: 1240px;

  --ease: cubic-bezier(.22,.9,.25,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);

  color-scheme: dark;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection{ background: var(--gold); color: #171208; }

img{ max-width:100%; height:auto; display:block; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  margin:0; font-family:'Oswald', 'Manrope', sans-serif; font-weight:600;
  letter-spacing:.005em; text-transform: uppercase;
}
p{ margin:0; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}

/* subtle grain / vignette over whole page */
body::before{
  content:"";
  position: fixed; inset:0;
  pointer-events:none;
  z-index: 2;
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(216,168,60,.08), transparent 60%),
    radial-gradient(ellipse 80% 50% at 100% 100%, rgba(216,168,60,.06), transparent 60%);
  mix-blend-mode: screen;
}

/* reusable gold shimmer text — moving highlight sweep */
.gold-shimmer{
  background: linear-gradient(100deg, var(--gold-3) 0%, var(--gold) 22%, var(--gold-hi) 45%, var(--gold) 62%, var(--gold-3) 100%);
  background-size: 240% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation: shimmer-sweep 6s linear infinite;
  text-transform: uppercase;
}
@keyframes shimmer-sweep{
  0%{ background-position: 0% 50%; }
  100%{ background-position: -240% 50%; }
}

/* =========================== */
/* Scrollbar                     */
/* =========================== */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background: var(--bg); }
::-webkit-scrollbar-thumb{ background: linear-gradient(var(--gold-3), var(--gold)); border-radius:10px; }

/* =========================== */
/* Section chrome                */
/* =========================== */
.section{ position: relative; padding: 130px 0; }
.section--tight{ padding: 90px 0; }
.section-kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Oswald',sans-serif; font-weight:600; font-size:13px;
  letter-spacing:.26em; text-transform:uppercase; color: var(--gold-2);
  margin-bottom: 18px;
}
.section-kicker::before{
  content:""; width:34px; height:2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-hi));
}
.section-title{
  font-size: clamp(28px, 4vw, 46px);
  color: var(--ink);
  max-width: 820px;
  margin-bottom: 20px;
  line-height: 1.08;
}
.section-title em{
  font-style: normal;
}
.section-lead{
  font-size: 17px; color: var(--muted); max-width: 640px;
  margin-bottom: 46px; text-transform:none;
}
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:40px;
  margin-bottom: 46px;
}
.section-head .section-title,
.section-head .section-lead{ margin-bottom:0; }

.divider{
  height:1px; width:100%;
  background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold-hi) 50%, var(--gold) 80%, transparent);
  opacity:.5;
}

/* reveal-on-scroll */
[data-reveal]{
  opacity:0; transform: translateY(28px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
[data-reveal].is-visible{ opacity:1; transform:none; }
[data-reveal-scale]{ opacity:0; transform: scale(.92); transition: opacity .9s var(--ease), transform .9s var(--ease); }
[data-reveal-scale].is-visible{ opacity:1; transform:none; }
.stagger > *{ transition-delay: calc(var(--i, 0) * 80ms); }

/* =========================== */
/* Buttons                       */
/* =========================== */
.btn{
  position: relative;
  display: inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 15px 30px;
  border-radius: 100px;
  font-weight: 700; font-size: 14px; letter-spacing:.04em; text-transform:uppercase;
  font-family:'Oswald', sans-serif;
  cursor: pointer; border: 1px solid transparent;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s, background .3s, color .3s;
  white-space: nowrap;
  isolation: isolate;
}
.btn:active{ transform: scale(.97); }

.btn--gold{
  background: linear-gradient(120deg, var(--gold-3), var(--gold-2) 30%, var(--gold-hi) 50%, var(--gold-2) 70%, var(--gold-3));
  background-size: 220% 100%;
  animation: shimmer-sweep 5s linear infinite;
  color: #1a1409;
  box-shadow: 0 10px 30px -10px rgba(216,168,60,.6);
  overflow:hidden;
}
.btn--gold::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.6) 45%, transparent 60%);
  transform: translateX(-120%);
  transition: transform .8s var(--ease);
}
.btn--gold:hover::before{ transform: translateX(120%); }
.btn--gold:hover{ transform: translateY(-2px); box-shadow: 0 16px 36px -8px rgba(216,168,60,.7); }

.btn--ghost{
  background: rgba(255,255,255,.02);
  border-color: rgba(216,168,60,.45);
  color: var(--ink);
}
.btn--ghost:hover{ border-color: var(--gold-2); background: rgba(216,168,60,.1); transform: translateY(-2px); }

.btn--sm{ padding: 11px 20px; font-size:12.5px; }
.btn--block{ width:100%; }
.btn[disabled]{ opacity:.4; cursor:not-allowed; }

.link-arrow{
  display:inline-flex; align-items:center; gap:8px; font-weight:700; color: var(--gold-2);
  font-size: 13px; font-family:'Oswald',sans-serif; letter-spacing:.03em; text-transform:uppercase;
}
.link-arrow svg{ transition: transform .3s var(--ease); }
.link-arrow:hover svg{ transform: translateX(4px); }

/* =========================== */
/* Header                        */
/* =========================== */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  padding: 20px 0;
  transition: padding .4s var(--ease), background .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled{
  padding: 12px 0;
  background: rgba(6,6,6,.82);
  backdrop-filter: blur(16px) saturate(140%);
  border-color: var(--line);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap: 24px; }

.brand{ display:flex; align-items:center; gap:12px; }
.brand-logo-img{ height:30px; width:auto; flex:none; }
.brand-sub{ font-size:9.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold-2); margin-top:4px; font-family:'Oswald',sans-serif; }

.main-nav{ display:flex; align-items:center; gap: 34px; }
.main-nav a{
  font-size: 12.5px; font-weight:600; color: var(--ink-dim); letter-spacing:.06em; text-transform:uppercase;
  font-family:'Oswald',sans-serif;
  position:relative; padding: 4px 0;
}
.main-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background: linear-gradient(90deg,var(--gold),var(--gold-hi));
  transition: right .35s var(--ease);
}
.main-nav a:hover{ color: var(--ink); }
.main-nav a:hover::after{ right:0; }

.header-cta{ display:flex; align-items:center; gap:14px; }
.burger{
  display:none; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line); background: rgba(255,255,255,.03);
  align-items:center; justify-content:center; cursor:pointer;
}
.burger span, .burger span::before, .burger span::after{
  content:""; display:block; width:16px; height:1.5px; background: var(--ink); position:relative;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.burger span::before{ position:absolute; top:-5px; }
.burger span::after{ position:absolute; top:5px; }

/* mobile drawer */
.mobile-drawer{
  position: fixed; inset:0; z-index:99;
  background: rgba(5,5,5,.98);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px;
  opacity:0; visibility:hidden; transform: translateY(-12px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear .35s;
}
.mobile-drawer.is-open{ opacity:1; visibility:visible; transform:none; transition: opacity .35s var(--ease), transform .35s var(--ease); }
.mobile-drawer a{ font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:.03em; text-transform:uppercase; font-size: 24px; color: var(--ink); }
.mobile-drawer .btn{ margin-top:10px; }

/* =========================== */
/* Hero                          */
/* =========================== */
.hero{
  position: relative;
  min-height: 100svh;
  display:flex; align-items:center;
  padding-top: 120px; padding-bottom: 60px;
  overflow: clip;
  background: radial-gradient(ellipse 70% 60% at 30% 20%, #131110 0%, var(--bg) 62%);
}
.hero-bg{
  position:absolute; inset:-10%; z-index:0;
  background-image: url('../img/bg-oil.jpg');
  background-size: cover; background-position: center;
  opacity:.30;
  filter: blur(30px) saturate(125%) brightness(.9);
  transform: scale(1.08);
  mask-image: radial-gradient(ellipse 65% 60% at 68% 42%, rgba(0,0,0,.9), transparent 72%);
}
.hero canvas#particles{
  position:absolute; inset:0; z-index:1; width:100%; height:100%;
}
.hero .container{
  position: relative; z-index:2;
  display:grid; grid-template-columns: 1.05fr .95fr; align-items:center; gap: 40px;
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  padding: 8px 16px 8px 8px; border-radius:100px;
  background: rgba(216,168,60,.1); border:1px solid rgba(216,168,60,.4);
  font-family:'Oswald',sans-serif;
  font-size:12.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color: var(--gold-2);
  margin-bottom: 26px;
}
.hero-eyebrow i{
  width:22px; height:22px; border-radius:50%;
  background: linear-gradient(135deg,var(--gold-hi),var(--gold-3));
  display:inline-flex; align-items:center; justify-content:center;
  font-style:normal; font-size:12px; color:#1a1409; font-weight:800;
}
.hero h1{
  font-size: clamp(38px, 5.6vw, 68px);
  line-height: 1.04;
  color: var(--ink);
  text-wrap: balance;
}
.hero h1 em{ font-style: normal; }
.hero-lead{
  margin-top: 24px; font-size: 18px; color: var(--muted); max-width: 480px;
  text-transform:none;
}
.hero-actions{ display:flex; gap:16px; margin-top: 40px; flex-wrap:wrap; }
.hero-stats{
  display:flex; gap: 34px; margin-top: 62px; flex-wrap:wrap;
}
.hero-stat b{
  display:block; font-family:'Oswald',sans-serif; font-weight:600; font-size: 28px; color: var(--gold-2);
}
.hero-stat span{ font-size: 12px; color: var(--muted-2); text-transform:uppercase; letter-spacing:.08em; }

.hero-visual{ position: relative; display:flex; justify-content:center; }
.hero-bottle-wrap{
  position: relative; width: min(380px, 80%);
  max-height: 62svh;
  filter: drop-shadow(0 40px 60px rgba(0,0,0,.6));
  transition: transform .25s var(--ease-soft);
  will-change: transform;
}
.hero-bottle-wrap img{ width:100%; height:auto; max-height: 62svh; object-fit:contain; margin: 0 auto; }
.hero-glow{
  position:absolute; left:50%; top:56%; width:120%; aspect-ratio:1;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(216,168,60,.4), transparent 62%);
  filter: blur(6px);
  z-index:-1;
  animation: pulse-glow 5s ease-in-out infinite;
}
.hero-ring{
  position:absolute; left:50%; top:60%; width:78%; aspect-ratio:1; transform:translate(-50%,-50%);
  border-radius:50%; border:1px solid rgba(216,168,60,.3);
  z-index:-1;
}
.hero-ring.r2{ width:100%; border-color: rgba(216,168,60,.16); }
@keyframes pulse-glow{ 0%,100%{ opacity:.7; } 50%{ opacity:1; } }

.hero-scroll{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color: var(--muted-2);
  font-family:'Oswald',sans-serif;
  z-index:3;
}
.hero-scroll .line{ width:1px; height:34px; background: linear-gradient(var(--gold), transparent); position:relative; overflow:hidden; }
.hero-scroll .line::after{
  content:""; position:absolute; left:0; top:-100%; width:100%; height:100%; background: var(--gold-hi);
  animation: scrolldown 1.8s ease-in-out infinite;
}
@keyframes scrolldown{ 0%{ top:-100%;} 60%{ top:100%;} 100%{ top:100%;} }

/* =========================== */
/* Trust strip                   */
/* =========================== */
.trust-strip{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background: linear-gradient(180deg, rgba(216,168,60,.05), transparent);
}
.trust-strip .container{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap: 26px;
  padding: 28px 28px;
}
.trust-item{ display:flex; align-items:center; gap:12px; color: var(--muted); font-size:13px; font-weight:600; font-family:'Oswald',sans-serif; letter-spacing:.02em; text-transform:uppercase; }
.trust-item svg{ color: var(--gold-2); flex:none; }

/* =========================== */
/* Showcase banner (Фон.png)     */
/* =========================== */
.showcase{
  position: relative;
  min-height: 420px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  border-bottom: 1px solid var(--line);
}
.showcase-bg{
  position:absolute; inset:0;
  background-image:url('../img/bg-oil.jpg');
  background-size:cover; background-position:center;
}
.showcase-bg::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(6,6,6,.55), rgba(6,6,6,.78) 55%, var(--bg) 100%);
}
.showcase-inner{ position:relative; z-index:1; text-align:center; padding: 90px 24px; }
.showcase-inner .section-kicker{ justify-content:center; }
.showcase-inner .section-kicker::before{ display:none; }
.showcase h2{
  font-size: clamp(30px, 5vw, 58px);
  margin: 0 auto 18px;
  max-width: 820px;
  line-height:1.08;
}
.showcase p{ color: var(--ink-dim); max-width: 560px; margin: 0 auto; font-size:16px; text-transform:none; }

/* =========================== */
/* VHVI section                  */
/* =========================== */
.vhvi{ background: linear-gradient(180deg, var(--bg), var(--bg-1) 40%, var(--bg)); }
.vhvi-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items:center; }
.vhvi-copy p{ color: var(--muted); font-size: 15.5px; margin-bottom:18px; }
.vhvi-points{ display:grid; gap: 18px; margin-top: 30px; }
.vhvi-point{ display:flex; gap:16px; align-items:flex-start; }
.vhvi-point .num{
  flex:none; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--gold); color: var(--gold-2);
  background: rgba(216,168,60,.08);
  display:flex; align-items:center; justify-content:center; font-family:'Oswald',sans-serif; font-size:14px; font-weight:600;
}
.vhvi-point h4{ font-family:'Oswald',sans-serif; text-transform:none; letter-spacing:.01em; font-weight:600; font-size:15.5px; color: var(--ink); margin-bottom:4px; }
.vhvi-point p{ font-size: 14px; color: var(--muted); margin:0; }

.vhvi-panel{
  background: linear-gradient(160deg, var(--panel), var(--panel-2));
  border: 1px solid var(--gold-deep);
  border-radius: var(--radius);
  padding: 40px;
  position: relative; overflow:hidden;
}
.vhvi-panel::after{
  content:""; position:absolute; inset:-40% -40% auto auto; width:60%; aspect-ratio:1;
  background: radial-gradient(circle, rgba(216,168,60,.2), transparent 65%);
}
.vi-chart{ position:relative; z-index:1; }
.vi-chart-title{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color: var(--muted-2); margin-bottom: 26px; font-family:'Oswald',sans-serif; }
.vi-row{ display:grid; grid-template-columns: 130px 1fr 56px; align-items:center; gap:14px; margin-bottom:20px; }
.vi-row .label{ font-size:13px; color: var(--muted); font-weight:600; font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.01em; }
.vi-row .track{ height:10px; border-radius:100px; background: rgba(255,255,255,.05); overflow:hidden; }
.vi-row .fill{ height:100%; border-radius:100px; width:0; transition: width 1.4s var(--ease); background: linear-gradient(90deg, var(--gold-3), var(--muted-2)); }
.vi-row.is-flagman .fill{ background: linear-gradient(90deg, var(--gold-3), var(--gold-hi)); box-shadow: 0 0 18px rgba(216,168,60,.6); }
.vi-row .val{ font-family:'Oswald',sans-serif; font-weight:600; font-size:16px; text-align:right; color: var(--ink); }
.vi-row.is-flagman .label, .vi-row.is-flagman .val{ color: var(--gold-2); }
.vi-foot{ margin-top: 22px; font-size:12px; color: var(--muted-2); text-transform:none; }

.temp-range{ position:relative; z-index:1; margin-top: 38px; padding-top: 32px; border-top:1px solid var(--line); }
.temp-range .vi-chart-title{ margin-bottom: 18px; }
.temp-track{ position:relative; height:6px; border-radius:10px; background: linear-gradient(90deg,#3a7fc9,var(--gold) 50%,#c24b2c); margin: 30px 6px 12px; }
.temp-track .dot{
  position:absolute; top:50%; width:16px; height:16px; border-radius:50%; background:#fff; border:3px solid var(--bg-1);
  transform: translate(-50%,-50%); box-shadow:0 0 0 3px rgba(255,255,255,.15);
}
.temp-track .dot.min{ left:2%; } .temp-track .dot.max{ left:98%; }
.temp-labels{ display:flex; justify-content:space-between; font-size:13px; color: var(--muted); text-transform:none; }
.temp-labels b{ color: var(--ink); font-family:'Oswald',sans-serif; font-weight:600; font-size:18px; display:block; text-transform:uppercase; }

/* =========================== */
/* Product lineup                */
/* =========================== */
.lineup{ background: var(--bg-1); }
.lineup-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.oil-card{
  background: linear-gradient(165deg, var(--panel), var(--bg-1) 120%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 26px 28px;
  position: relative; overflow:hidden;
  transition: transform .55s var(--ease), border-color .4s, box-shadow .5s;
  transform-style: preserve-3d;
}
.oil-card:hover{ border-color: var(--card-color, var(--gold)); box-shadow: 0 30px 60px -30px rgba(0,0,0,.7), 0 0 0 1px var(--line); }
.oil-card::before{
  content:""; position:absolute; top:-30%; right:-30%; width:70%; aspect-ratio:1; border-radius:50%;
  background: radial-gradient(circle, var(--card-color, var(--gold)) 0%, transparent 70%);
  opacity:.16; pointer-events:none;
}
.oil-card-top{ display:flex; justify-content:space-between; align-items:flex-start; gap: 14px; }
.oil-card-badge{
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-family:'Oswald',sans-serif;
  color: var(--card-color); padding:6px 12px; border-radius:100px;
  background: var(--card-color-soft); border:1px solid color-mix(in srgb, var(--card-color) 50%, transparent);
}
.oil-card-sae{ font-family:'Oswald',sans-serif; font-weight:600; font-size:19px; color:var(--ink); text-align:right; }
.oil-card-sae small{ display:block; font-family:'Manrope',sans-serif; font-size:10.5px; color:var(--muted-2); font-weight:700; letter-spacing:.08em; text-transform:uppercase; }

.oil-card-media{
  position:relative; height:220px; margin: 6px 0 14px;
  display:flex; align-items:center; justify-content:center;
}
.oil-card-media img{ max-height:100%; max-width:100%; width:auto; height:auto; object-fit:contain; filter: drop-shadow(0 18px 26px rgba(0,0,0,.55)); transition: transform .5s var(--ease); }
.oil-card:hover .oil-card-media img{ transform: translateY(-6px) scale(1.03); }

.oil-card h3{ font-size: 24px; color: var(--ink); margin-bottom:6px; }
.oil-card .tagline{ font-size:13.5px; color: var(--card-color); font-weight:700; margin-bottom:12px; text-transform:none; }
.oil-card .desc{ font-size:13.5px; color: var(--muted); margin-bottom: 16px; text-transform:none; }

.oil-card .specs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom: 18px; }
.oil-card .specs span{
  font-size:11px; padding:5px 10px; border-radius:8px; color: var(--ink-dim);
  background: rgba(255,255,255,.04); border:1px solid var(--line-soft);
  font-family:'Oswald',sans-serif; letter-spacing:.02em;
}

.oil-card .price-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.pack-toggle{ display:inline-flex; border:1px solid var(--line); border-radius:100px; padding:3px; gap:2px; }
.pack-toggle button{
  border:none; background:transparent; padding:6px 14px; border-radius:100px; font-size:12px; font-weight:700; color: var(--muted); cursor:pointer;
  font-family:'Oswald',sans-serif; letter-spacing:.02em; text-transform:uppercase;
  transition: all .3s var(--ease);
}
.pack-toggle button.is-active{ background: var(--card-color); color:#171208; }
.price-tag{ font-family:'Oswald',sans-serif; font-weight:600; font-size: 23px; color: var(--ink); }
.price-tag small{ font-family:'Manrope',sans-serif; font-size:12px; color: var(--muted-2); font-weight:700; text-transform:none; }

.oil-card .actions{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.oil-card .actions .btn{ padding:12px 14px; font-size:12px; }
.oil-card .qr-link{
  margin-top: 12px; display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:12px; color: var(--muted-2); cursor:pointer; padding-top:4px;
  font-family:'Oswald',sans-serif; letter-spacing:.02em; text-transform:uppercase;
}
.oil-card .qr-link:hover{ color: var(--gold-2); }

/* =========================== */
/* Selector section              */
/* =========================== */
.selector{ background: var(--bg); position:relative; }
.mode-tabs{ display:flex; gap:12px; margin-bottom: 40px; flex-wrap:wrap; }
.mode-tab{
  flex:1 1 260px; text-align:left; cursor:pointer;
  padding: 22px 24px; border-radius: var(--radius-sm);
  background: var(--panel); border:1px solid var(--line);
  transition: all .4s var(--ease);
  display:flex; gap:16px; align-items:center;
}
.mode-tab .ic{
  flex:none; width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: rgba(216,168,60,.12); color: var(--gold-2); transition: all .4s var(--ease);
}
.mode-tab b{ display:block; font-size:14.5px; color: var(--ink); font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.01em; }
.mode-tab span{ font-size:12.5px; color: var(--muted-2); text-transform:none; }
.mode-tab.is-active{ border-color: var(--gold); background: linear-gradient(160deg, rgba(216,168,60,.12), var(--panel)); }
.mode-tab.is-active .ic{ background: var(--gold); color:#171208; }

.mode-panel{ display:none; }
.mode-panel.is-active{ display:block; animation: fadein .5s var(--ease); }
@keyframes fadein{ from{ opacity:0; transform: translateY(10px);} to{ opacity:1; transform:none; } }

.picker{
  background: linear-gradient(160deg, var(--panel), var(--bg-1));
  border:1px solid var(--line); border-radius: var(--radius);
  padding: 36px;
}
.picker-search{ position:relative; margin-bottom: 8px; }
.picker-search input{
  width:100%; padding: 17px 50px 17px 20px; border-radius:100px;
  background: rgba(255,255,255,.03); border:1px solid var(--line); color: var(--ink);
  font-size:15px; outline:none; transition: border-color .3s;
}
.picker-search input:focus{ border-color: var(--gold); }
.picker-search svg{ position:absolute; right:20px; top:50%; transform:translateY(-50%); color: var(--muted-2); }

/* text-only autocomplete dropdown */
.autocomplete{ position:relative; }
.autocomplete-list{
  position:absolute; left:0; right:0; top: calc(100% + 8px); z-index: 20;
  background: var(--panel-2); border:1px solid var(--gold-deep); border-radius: 14px;
  max-height: 360px; overflow-y:auto; box-shadow: 0 24px 50px -20px rgba(0,0,0,.7);
  display:none;
}
.autocomplete-list.is-open{ display:block; }
.autocomplete-list button{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px; width:100%;
  padding: 13px 20px; text-align:left; border:none; background:transparent; cursor:pointer;
  border-bottom:1px solid var(--line-soft); color: var(--ink); font-size:14px;
}
.autocomplete-list button:last-child{ border-bottom:none; }
.autocomplete-list button:hover, .autocomplete-list button.is-active{ background: rgba(216,168,60,.1); color: var(--gold-2); }
.autocomplete-list .years{ font-size:12px; color: var(--muted-2); flex:none; }
.autocomplete-empty{ padding:18px 20px; color: var(--muted); font-size:13.5px; }

/* brand / model / generation drill-down (text only) */
.drill{ display:grid; gap:10px; }
.drill-brand{ border:1px solid var(--line); border-radius:14px; background: rgba(255,255,255,.02); overflow:hidden; }
.drill-brand > .drill-head{
  display:flex; align-items:center; justify-content:space-between; padding: 16px 20px; cursor:pointer;
  font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:.02em; text-transform:uppercase; font-size:14.5px; color: var(--ink);
}
.drill-brand > .drill-head .chev{ transition: transform .3s var(--ease); color: var(--gold-2); }
.drill-brand.is-open > .drill-head .chev{ transform: rotate(90deg); }
.drill-body{ display:none; border-top:1px solid transparent; }
.drill-brand.is-open > .drill-body{ display:block; border-top-color: var(--line-soft); }
.drill-model{ border-bottom:1px solid var(--line-soft); }
.drill-model:last-child{ border-bottom:none; }
.drill-model > .drill-head{ padding: 13px 20px 13px 34px; font-size:13.5px; font-weight:500; text-transform:none; font-family:'Manrope',sans-serif; color:var(--ink-dim); }
.drill-model > .drill-head .chev{ transition: transform .3s var(--ease); color: var(--muted-2); }
.drill-model.is-open > .drill-head .chev{ transform: rotate(90deg); }
.drill-gens{ display:none; flex-wrap:wrap; gap:8px; padding: 4px 20px 16px 34px; }
.drill-model.is-open .drill-gens{ display:flex; }
.drill-gens button{
  padding:9px 14px; border-radius:10px; font-size:12.5px; font-weight:600;
  background: rgba(255,255,255,.03); border:1px solid var(--line); color: var(--muted);
  cursor:pointer; transition: all .3s var(--ease); text-align:left;
}
.drill-gens button:hover{ border-color: var(--gold); color: var(--gold-2); background: rgba(216,168,60,.08); }
.drill-gens button .y{ display:block; font-size:11px; color: var(--muted-2); margin-top:2px; }
.drill-search{ margin-bottom:18px; }

/* fuel step */
.fuel-step{
  margin-top: 22px; padding: 26px; border-radius: var(--radius-sm);
  background: rgba(216,168,60,.05); border:1px solid var(--gold-deep);
}
.fuel-step .picked-car{ font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase; color: var(--gold-2); font-size:15px; margin-bottom:4px; }
.fuel-step .picked-years{ font-size:12.5px; color: var(--muted-2); margin-bottom:18px; }
.fuel-options{ display:flex; gap:14px; flex-wrap:wrap; }
.fuel-options button{
  flex:1 1 160px; padding: 18px; border-radius:14px; text-align:center; cursor:pointer;
  background: rgba(255,255,255,.02); border:1px solid var(--line);
  font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:.03em; text-transform:uppercase; font-size:14px; color:var(--ink);
  transition: all .3s var(--ease);
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.fuel-options button svg{ color: var(--gold-2); }
.fuel-options button:hover{ border-color: var(--gold); background: rgba(216,168,60,.08); transform: translateY(-2px); }
.back-link{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color: var(--muted-2); cursor:pointer; margin-bottom:16px; font-family:'Oswald',sans-serif; letter-spacing:.02em; text-transform:uppercase; }
.back-link:hover{ color: var(--gold-2); }

.results-meta{ font-size:12.5px; color: var(--muted-2); margin-bottom:14px; text-transform:none; }

/* text-only compatible cars list (QR mode) */
.text-list{ display:grid; gap:8px; max-height: 420px; overflow-y:auto; padding-right:6px; margin-right:-6px; }
.text-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding: 14px 18px; border-radius: 12px; background: rgba(255,255,255,.02); border:1px solid var(--line-soft);
  cursor:pointer; transition: all .25s var(--ease);
}
.text-row:hover{ border-color: var(--gold); background: rgba(216,168,60,.06); }
.text-row .name{ font-size:13.5px; font-weight:600; color: var(--ink); }
.text-row .years{ font-size:12px; color: var(--muted-2); flex:none; }
.no-results{ text-align:center; padding: 50px 20px; color: var(--muted); }

/* match result panel */
.match-panel{ margin-top: 30px; }
.match-stage{
  display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap: 28px;
  padding: 34px; border-radius: var(--radius);
  background: linear-gradient(160deg, var(--panel), var(--bg-1));
  border: 1px solid var(--gold);
  position: relative; overflow:hidden;
}
.match-stage::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(216,168,60,.2), transparent 70%);
  opacity:0; transition: opacity .6s var(--ease);
}
.match-stage.is-matched::before{ opacity:1; }
.match-side{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; height:100%; justify-content:center; }
.match-side img{ max-height: 210px; max-width:100%; width:auto; object-fit:contain; filter: drop-shadow(0 16px 22px rgba(0,0,0,.55)); }
.match-side b{ font-size:14px; color: var(--ink); font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase; }
.match-side span{ font-size:12px; color: var(--muted-2); }
.match-mid{ display:flex; flex-direction:column; align-items:center; gap:10px; color: var(--gold-2); }
.match-mid .spark{
  width:54px; height:54px; border-radius:50%; border:1px solid var(--gold);
  display:flex; align-items:center; justify-content:center; position:relative;
}
.match-mid .spark svg{ width:22px; height:22px; opacity:0; transform: scale(.4); transition: all .5s var(--ease) .3s; }
.match-stage.is-matched .match-mid .spark svg{ opacity:1; transform:none; }
.match-mid .spark::after{
  content:""; position:absolute; inset:-8px; border-radius:50%; border:1px solid rgba(216,168,60,.3);
  animation: none;
}
.match-stage.is-matched .match-mid .spark::after{ animation: ring-pulse 1.8s ease-out infinite; }
@keyframes ring-pulse{ 0%{ transform:scale(.8); opacity:1;} 100%{ transform:scale(1.6); opacity:0;} }
.match-mid small{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--muted-2); font-family:'Oswald',sans-serif; }

.match-explain{
  margin-top: 26px; padding: 26px 30px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.02); border:1px solid var(--line-soft);
}
.match-explain h4{ font-size:18px; color: var(--gold-2); margin-bottom:10px; text-transform:none; }
.match-explain p{ color: var(--muted); font-size:14.5px; text-transform:none; }
.match-cta{ display:flex; gap:14px; margin-top:22px; flex-wrap:wrap; align-items:center; }
.match-cta .price-tag{ margin-right:auto; }

/* QR / scan mode */
.qr-picker-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin-bottom:8px; }
.qr-pick{
  border:1px solid var(--line); border-radius:14px; padding:16px; text-align:center; cursor:pointer;
  background: rgba(255,255,255,.02); transition: all .3s var(--ease);
}
.qr-pick:hover, .qr-pick.is-active{ border-color: var(--pick-color, var(--gold)); background: color-mix(in srgb, var(--pick-color, var(--gold)) 10%, transparent); }
.qr-pick img{ height:70px; margin: 0 auto 8px; }
.qr-pick b{ font-size:12px; color: var(--ink); display:block; font-family:'Oswald',sans-serif; letter-spacing:.02em; text-transform:uppercase; }

.scan-cta{ display:flex; justify-content:center; margin: 4px 0 28px; }

.scan-result{ margin-top: 28px; }
.scan-banner{
  display:flex; align-items:center; gap:16px; padding: 18px 24px; border-radius: 14px; margin-bottom: 24px;
  background: rgba(216,168,60,.08); border:1px solid var(--gold-deep);
}
.scan-banner img{ height:56px; width:auto; }
.scan-banner b{ color: var(--gold-2); display:block; font-size:15px; font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase; }
.scan-banner span{ font-size:12.5px; color: var(--muted); text-transform:none; }

.fuel-toggle-inline{ display:flex; gap:8px; margin: 14px 0 20px; }
.fuel-toggle-inline button{
  padding:9px 18px; border-radius:100px; font-size:12px; font-weight:700; font-family:'Oswald',sans-serif; letter-spacing:.03em; text-transform:uppercase;
  background: rgba(255,255,255,.03); border:1px solid var(--line); color: var(--muted); cursor:pointer; transition: all .3s var(--ease);
}
.fuel-toggle-inline button.is-active{ border-color: var(--gold); color: var(--gold-2); background: rgba(216,168,60,.1); }

.fallback-card{
  padding: 28px; border-radius: var(--radius-sm); border:1px solid rgba(198,45,45,.4);
  background: rgba(198,45,45,.07); margin-top:18px;
}
.fallback-card .warn{ display:flex; gap:12px; align-items:flex-start; color:#e08a86; font-weight:700; font-size:14px; margin-bottom:14px; text-transform:none; }
.fallback-card .ideal{ display:flex; gap:20px; align-items:center; flex-wrap:wrap; padding-top:14px; border-top:1px solid rgba(255,255,255,.06); }
.fallback-card .ideal img{ height:90px; width:auto; }

/* =========================== */
/* Modal / QR / Scanner           */
/* =========================== */
.modal-overlay{
  position: fixed; inset:0; z-index: 200;
  background: rgba(4,4,4,.85); backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center; padding: 24px;
  opacity:0; visibility:hidden; transition: opacity .35s var(--ease), visibility 0s linear .35s;
}
.modal-overlay.is-open{ opacity:1; visibility:visible; transition: opacity .35s var(--ease); }
.modal-box{
  background: linear-gradient(160deg, var(--panel), var(--bg-1)); border:1px solid var(--gold);
  border-radius: var(--radius); padding: 40px; max-width: 380px; width:100%; text-align:center;
  transform: scale(.92); transition: transform .35s var(--ease); position:relative;
}
.modal-overlay.is-open .modal-box{ transform:none; }
.modal-close{
  position:absolute; top:18px; right:18px; width:36px; height:36px; border-radius:50%;
  border:1px solid var(--line); background:rgba(255,255,255,.03); cursor:pointer; color:var(--ink); z-index:2;
}
.modal-box #qrcode{ display:flex; justify-content:center; margin: 20px auto; padding:14px; background:#fff; border-radius:14px; width:fit-content; }
.modal-box h3{ font-size:19px; color:var(--gold-2); margin-bottom:8px; text-transform:uppercase; }
.modal-box p{ font-size:13.5px; color: var(--muted); margin-bottom: 18px; text-transform:none; }

.scanner-box{ max-width: 420px; }
.scanner-video-wrap{
  position:relative; border-radius:16px; overflow:hidden; background:#000; aspect-ratio: 1;
  border: 1px solid var(--gold-deep); margin-bottom:18px;
}
.scanner-video-wrap video{ width:100%; height:100%; object-fit:cover; }
.scanner-video-wrap .frame{
  position:absolute; inset: 14%; border: 2px solid var(--gold-2); border-radius:16px;
  box-shadow: 0 0 0 2000px rgba(0,0,0,.35);
}
.scanner-status{ font-size:13px; color:var(--muted); min-height: 20px; }

/* =========================== */
/* Buy strip                     */
/* =========================== */
.buy-strip{
  background: linear-gradient(120deg, #141005, #0b0904 60%);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.buy-strip .container{
  display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
  padding: 60px 28px;
}
.buy-strip h3{ font-size: 27px; max-width:420px; text-transform:uppercase; }
.buy-actions{ display:flex; gap:16px; flex-wrap:wrap; }

/* =========================== */
/* FAQ / About                   */
/* =========================== */
.about-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap:60px; align-items:center; }
.about-media{ position:relative; border-radius: var(--radius); overflow:hidden; aspect-ratio: 4/5; border:1px solid var(--line); }
.about-media img{ width:100%; height:100%; object-fit:cover; }
.about-media::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 50%, rgba(6,6,6,.85)); }
.stat-badge{
  position:absolute; bottom:24px; left:24px; right:24px;
  display:flex; justify-content:space-between; gap:14px;
}
.stat-badge div b{ display:block; font-family:'Oswald',sans-serif; font-weight:600; font-size:25px; color:var(--gold-2); }
.stat-badge div span{ font-size:11px; color: var(--muted); text-transform:uppercase; letter-spacing:.06em; }

.faq{ display:grid; gap:14px; }
.faq-item{ border:1px solid var(--line); border-radius: 14px; background: var(--panel); overflow:hidden; }
.faq-q{ padding:20px 24px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; gap:14px; }
.faq-q b{ font-size:14.5px; color: var(--ink); font-weight:600; font-family:'Oswald',sans-serif; text-transform:none; letter-spacing:.01em; }
.faq-q .plus{ flex:none; width:26px; height:26px; border-radius:50%; border:1px solid var(--line); position:relative; }
.faq-q .plus::before, .faq-q .plus::after{ content:""; position:absolute; background: var(--gold-2); left:50%; top:50%; transform:translate(-50%,-50%); transition: transform .3s var(--ease); }
.faq-q .plus::before{ width:10px; height:1.4px; }
.faq-q .plus::after{ width:1.4px; height:10px; }
.faq-item.is-open .plus::after{ transform: translate(-50%,-50%) rotate(90deg) scale(0); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .4s var(--ease); }
.faq-a p{ padding: 0 24px 22px; color: var(--muted); font-size:14px; text-transform:none; }
.faq-item.is-open .faq-a{ max-height:240px; }

/* =========================== */
/* Footer                        */
/* =========================== */
.site-footer{ background: var(--bg-1); padding: 70px 0 30px; border-top:1px solid var(--line); }
.footer-top{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 50px; }
.footer-brand p{ color: var(--muted); font-size:13.5px; margin-top:16px; max-width:280px; text-transform:none; }
.footer-col b{ display:block; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color: var(--gold-2); margin-bottom:16px; font-family:'Oswald',sans-serif; }
.footer-col a, .footer-col span{ display:block; font-size:13.5px; color: var(--muted); margin-bottom:11px; }
.footer-col a:hover{ color: var(--ink); }
.footer-bottom{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-top:26px; border-top:1px solid var(--line); font-size:12px; color: var(--muted-2); text-transform:none; }

/* =========================== */
/* Responsive                    */
/* =========================== */
@media (max-width: 1080px){
  .hero .container{ grid-template-columns: 1fr; text-align:center; }
  .hero-lead{ margin-left:auto; margin-right:auto; }
  .hero-actions{ justify-content:center; }
  .hero-stats{ justify-content:center; }
  .hero-visual{ order:-1; margin-bottom: 10px; }
  .vhvi-grid{ grid-template-columns: 1fr; }
  .about-grid{ grid-template-columns: 1fr; }
  .lineup-grid{ grid-template-columns: repeat(2,1fr); }
  .footer-top{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px){
  .main-nav, .header-cta .btn--ghost{ display:none; }
  .burger{ display:flex; }
  .section{ padding: 90px 0; }
  .lineup-grid{ grid-template-columns: 1fr; }
  .qr-picker-grid{ grid-template-columns: repeat(2,1fr); }
  .match-stage{ grid-template-columns:1fr; text-align:center; }
  .match-mid{ flex-direction:row; justify-content:center; }
  .section-head{ flex-direction:column; align-items:flex-start; gap:16px; }
  .footer-top{ grid-template-columns: 1fr; gap:30px; }
  .buy-strip .container{ flex-direction:column; align-items:flex-start; }
  .oil-card .actions{ grid-template-columns:1fr; }
  .trust-strip .container{ justify-content:center; text-align:center; }
  .fuel-options{ flex-direction:column; }
}