:root {
  --red: #d71920;
  --red-bright: #f22b33;
  --red-dark: #8e0d12;
  --black: #070707;
  --panel: #111214;
  --panel-2: #17181b;
  --silver: #c9cbd0;
  --white: #ffffff;
  --muted: #aeb1b7;
  --line: #303136;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  background: var(--black);
  color: var(--white);
  line-height: 1.62;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
button, input, textarea { font: inherit; }
.skip-link { position: fixed; left: 10px; top: -60px; z-index: 100; background: white; color: black; padding: 10px; }
.skip-link:focus { top: 10px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 86px;
  padding: 10px max(4vw, calc((100vw - var(--max))/2));
  background: rgba(5,5,5,.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #27282b;
}
.brand img { width: 160px; height: 64px; object-fit: cover; object-position: 50% 38%; border-radius: 5px; }
nav { display: flex; align-items: center; gap: 23px; }
nav a { text-decoration: none; font-size: .77rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
nav a:hover, nav a:focus-visible { color: var(--red-bright); }
.nav-cta { padding: 11px 15px; background: var(--red); border-radius: 4px; }
.nav-cta:hover { color: white; background: var(--red-bright); }
.menu-toggle { display: none; color: white; border: 1px solid #444; background: #151515; border-radius: 4px; padding: 10px 13px; font-weight: 800; }

.hero {
  min-height: 675px;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 64px;
  align-items: center;
  padding: 92px max(5vw, calc((100vw - var(--max))/2));
  background:
    radial-gradient(circle at 84% 43%, rgba(206,238,255,.13), transparent 12%),
    radial-gradient(circle at 78% 50%, rgba(215,25,32,.30), transparent 36%),
    linear-gradient(105deg,#030303 0%,#090909 54%,#16090a 100%);
  overflow: hidden;
}
.eyebrow { margin: 0 0 13px; color: var(--red-bright); font-weight: 900; text-transform: uppercase; letter-spacing: .14em; font-size: .75rem; }
h1, h2, h3 { line-height: 1.08; margin-top: 0; text-transform: uppercase; }
h1 { margin-bottom: 24px; font-size: clamp(3.35rem,7vw,6.85rem); letter-spacing: -.055em; }
h1 span { color: var(--red); }
h2 { font-size: clamp(2rem,4vw,3.55rem); letter-spacing: -.03em; }
h3 { letter-spacing: -.015em; }
.lead { max-width: 740px; color: #d9d9dc; font-size: 1.08rem; }
.microcopy { color: var(--muted); font-size: .78rem; margin-top: 14px; }
.actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 30px; }
.button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; padding: 0 22px; border: 0; border-radius: 4px; text-decoration: none; text-transform: uppercase; font-weight: 900; letter-spacing: .025em; cursor: pointer; }
.primary { color: white; background: var(--red); }
.primary:hover, .primary:focus-visible { background: var(--red-bright); }
.secondary { color: white; background: rgba(0,0,0,.25); border: 1px solid #67686d; }
.secondary:hover { border-color: white; }

.hero-card { position: relative; padding: 38px; background: linear-gradient(145deg,#191a1d,#090909); border: 1px solid #37383d; border-radius: 15px; box-shadow: 0 32px 85px rgba(0,0,0,.56); overflow: hidden; }
.hero-card:after { content:""; position:absolute; width:300px; height:300px; right:-155px; bottom:-180px; border-radius:50%; background:rgba(215,25,32,.19); filter:blur(18px); }
.hero-card h2 { font-size: 2rem; }
.hero-card p, .hero-card li { color: #d4d5d8; }
.hero-card ul { padding-left: 19px; }
.hero-card li::marker { color: var(--red-bright); }
.headlight { width: 140px; height: 90px; margin-bottom: 28px; border-radius: 60% 15% 45% 15%; transform: skewX(-8deg); background: linear-gradient(155deg,#d9f3ff 0 9%,#758a99 10% 16%,#242b31 18% 34%,#090909 36%); border: 3px solid #42484e; box-shadow: 0 0 35px rgba(188,231,255,.65), -90px 8px 65px rgba(255,255,255,.16); }
.headlight span { display:block; width:35px; height:35px; margin:21px 0 0 26px; border-radius:50%; background:white; box-shadow:0 0 28px white; }

.trust-strip { display: grid; grid-template-columns: repeat(4,1fr); border-block: 1px solid #2c2d31; background: #101113; }
.trust-strip div { padding: 25px 18px; text-align: center; border-right: 1px solid #2c2d31; }
.trust-strip div:last-child { border-right: 0; }
.trust-strip strong, .trust-strip span { display: block; }
.trust-strip strong { color: var(--red-bright); text-transform: uppercase; font-size: .84rem; }
.trust-strip span { color: var(--muted); font-size: .78rem; }

.section { padding: 92px max(5vw, calc((100vw - var(--max))/2)); }
.alt { background: var(--panel); }
.section-heading { max-width: 760px; margin-bottom: 43px; }
.section-heading > p:last-child { color: var(--muted); }

.cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.card { min-height: 250px; padding: 31px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(160deg,#191a1d,#0b0b0c); }
.card .number { color: var(--red-bright); font-size: 1.75rem; font-weight: 900; }
.card h3 { margin: 27px 0 12px; }
.card p { color: var(--muted); margin-bottom: 0; }

.process { list-style: none; display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin: 0; padding: 0; }
.process li { display: flex; gap: 14px; padding: 24px 21px; border-top: 3px solid var(--red); background: #090909; }
.process li > span { display: grid; place-items: center; flex: 0 0 41px; height: 41px; border-radius: 50%; background: var(--red); font-weight: 900; }
.process h3 { margin-bottom: 7px; }
.process p { margin: 0; color: var(--muted); font-size: .88rem; }

.comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.comparison-panel { min-height: 355px; position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px; border-radius: 9px; overflow: hidden; }
.comparison-panel .badge { position: absolute; left: 22px; top: 22px; padding: 7px 12px; color: white; background: rgba(0,0,0,.72); text-transform: uppercase; font-size: .75rem; font-weight: 900; }
.comparison-panel h3 { margin: 24px 0 0; }
.comparison-panel.before { background: linear-gradient(145deg,#4a4437,#16140f); }
.comparison-panel.after { background: linear-gradient(145deg,#26323c,#07090a); border:1px solid #3d4c57; }
.lens { width: 76%; height: 140px; align-self: center; margin-bottom: 28px; border-radius: 55% 18% 50% 17%; transform: skewX(-8deg); }
.before .lens { background: radial-gradient(circle at 38% 42%,#d6c58d 0 7%,#a99c72 8% 16%,#7d7459 18% 31%,#4f493b 33% 60%,#312e27 62%); border: 4px solid #7f765d; box-shadow: 0 0 25px rgba(205,181,108,.24); filter: blur(.25px); }
.after .lens { background: radial-gradient(circle at 38% 42%,#fff 0 5%,#cbefff 6% 12%,#6d8799 14% 25%,#242e36 27% 53%,#0b0e10 56%); border: 4px solid #667684; box-shadow: 0 0 45px rgba(199,236,255,.58), -70px 0 50px rgba(255,255,255,.12); }
.disclaimer { color: var(--muted); font-size: .75rem; }

.about { display: grid; grid-template-columns: 1fr 1fr; gap: 66px; align-items: center; }
.about > div:last-child { color: #d6d6d8; font-size: 1.02rem; }

.faq-list { display: grid; gap: 12px; }
details { border: 1px solid var(--line); border-radius: 7px; background: #111214; }
summary { padding: 20px 22px; cursor: pointer; text-transform: uppercase; font-weight: 800; }
details p { margin: 0; padding: 0 22px 22px; color: var(--muted); }

.quote { display: grid; grid-template-columns: .82fr 1.18fr; gap: 60px; background: linear-gradient(135deg,#7c090e,#1a0304 68%); }
.quote a { font-weight: 800; }
form { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding: 29px; background: rgba(0,0,0,.52); border: 1px solid rgba(255,255,255,.15); border-radius: 9px; }
label { display: grid; gap: 6px; font-size: .77rem; font-weight: 800; text-transform: uppercase; }
.full, form small { grid-column: 1/-1; }
input, textarea { width: 100%; padding: 13px; color: white; background: #101010; border: 1px solid #48484c; border-radius: 4px; }
input:focus, textarea:focus { outline: 2px solid white; outline-offset: 2px; }
textarea { resize: vertical; }
form .button { width: fit-content; }
form small { color: #d2d2d4; }
.hidden-field { display: none; }

footer { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; padding: 37px max(5vw, calc((100vw - var(--max))/2)); border-top: 1px solid #26272a; background: #040404; }
footer img { width: 112px; height: 82px; object-fit: cover; object-position: 50% 38%; border-radius: 5px; }
.footer-contact strong, .footer-contact span, .footer-contact a { display: block; text-decoration: none; }
.footer-contact span, .footer-contact a, footer p { color: var(--muted); font-size: .79rem; }
.mobile-actions { display: none; }

.thank-you { min-height: 100vh; display:grid; place-items:center; padding:30px; background:radial-gradient(circle at 50% 30%,rgba(215,25,32,.28),transparent 35%),#070707; }
.thank-you-card { width:min(680px,100%); text-align:center; padding:45px; border:1px solid var(--line); border-radius:12px; background:#111214; }
.thank-you-card img { width:190px; margin:0 auto 25px; border-radius:6px; }
.thank-you-card p { color:var(--muted); }

@media (max-width: 930px) {
  .menu-toggle { display: block; }
  nav { display: none; position: absolute; left: 0; right: 0; top: 86px; flex-direction: column; align-items: stretch; padding: 18px; background: #080808; border-bottom: 1px solid #333; }
  nav.open { display: flex; }
  nav a { padding: 11px; }
  .hero { grid-template-columns: 1fr; }
  .trust-strip, .cards, .process { grid-template-columns: 1fr 1fr; }
  .about, .quote { grid-template-columns: 1fr; }
  footer { grid-template-columns: 1fr; text-align: center; }
  footer img { margin: auto; }
}

@media (max-width: 620px) {
  body { padding-bottom: 64px; }
  h1 { font-size: 3.3rem; }
  .hero { min-height: auto; padding: 60px 22px 72px; }
  .section { padding: 72px 22px; }
  .trust-strip, .cards, .process, .comparison { grid-template-columns: 1fr; }
  form { grid-template-columns: 1fr; padding: 21px; }
  label { grid-column: 1/-1; }
  .comparison-panel { min-height: 300px; }
  .lens { width: 88%; height: 112px; }
  .mobile-actions { position: fixed; z-index: 35; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(3,1fr); background: #0b0b0b; border-top: 1px solid #3d3e42; }
  .mobile-actions a { padding: 14px 8px; color: white; text-align: center; text-decoration: none; text-transform: uppercase; font-size: .78rem; font-weight: 900; }
  .mobile-actions a:nth-child(2) { background: #18191b; }
  .mobile-actions a:nth-child(3) { background: var(--red); }
}

.card-kicker{margin:0 0 8px;color:var(--red-bright);font-size:.72rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.why{background:linear-gradient(135deg,#080808,#130506)}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.why-grid article{padding:27px;border:1px solid var(--line);border-radius:8px;background:rgba(18,18,20,.82)}
.why-grid strong{color:var(--red-bright);font-size:1.6rem}
.why-grid h3{margin:22px 0 9px}
.why-grid p{margin:0;color:var(--muted);font-size:.9rem}
@media(max-width:930px){.why-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.why-grid{grid-template-columns:1fr}}

/* Version 2: real results gallery and 3-year guarantee */
.results-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;margin-top:2.2rem}.result-card{background:#111;border:1px solid #292929;border-radius:18px;overflow:hidden;box-shadow:0 18px 45px rgba(0,0,0,.24)}.result-card.featured-result{grid-column:1/-1}.result-pair{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:#e31e24}.result-pair figure{position:relative;margin:0;min-height:290px;background:#080808;overflow:hidden}.featured-result .result-pair figure{min-height:390px}.result-pair img{width:100%;height:100%;object-fit:cover;display:block}.photo-label{position:absolute;z-index:2;top:14px;left:14px;padding:.45rem .75rem;border-radius:999px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:.75rem;box-shadow:0 4px 14px rgba(0,0,0,.35)}.before-label{background:#151515;color:#fff}.after-label{background:#e31e24;color:#fff}.result-copy{padding:1.15rem 1.3rem 1.35rem}.result-copy h3{margin:0 0 .35rem}.result-copy p{margin:0;color:#c8c8c8}.gallery-cta{margin-top:2rem;padding:1.3rem 1.5rem;border-left:4px solid #e31e24;background:#111;display:flex;align-items:center;justify-content:space-between;gap:1rem;border-radius:0 14px 14px 0}.gallery-cta p{margin:0}.warranty-teaser{display:grid;grid-template-columns:140px 1fr;align-items:center;gap:2rem;background:linear-gradient(135deg,#171717,#090909);border-top:1px solid #2a2a2a;border-bottom:1px solid #2a2a2a}.warranty-icon{width:120px;height:120px;border:5px solid #e31e24;border-radius:50%;display:grid;place-items:center;font-size:4rem;font-weight:900;color:#fff;box-shadow:0 0 0 10px rgba(227,30,36,.12)}.warranty-teaser h2{margin:.25rem 0 .7rem}.warranty-teaser .button{margin-top:.8rem}.warranty-hero{padding-top:clamp(5rem,10vw,8rem);padding-bottom:clamp(3rem,8vw,6rem);background:radial-gradient(circle at 80% 20%,rgba(227,30,36,.18),transparent 35%),#090909}.warranty-hero h1{font-size:clamp(3.4rem,9vw,7rem);line-height:.9;margin:.4rem 0 1.2rem}.warranty-hero h1 span{color:#e31e24}.warranty-content{max-width:1100px}.warranty-summary,.warranty-terms,.warranty-note,.warranty-claim{background:#111;border:1px solid #292929;border-radius:18px;padding:clamp(1.4rem,3vw,2.2rem);margin-bottom:1.5rem}.warranty-columns{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:1.5rem}.warranty-box{padding:clamp(1.4rem,3vw,2.2rem);border-radius:18px}.warranty-box.covered{background:#111;border:1px solid #315b3a}.warranty-box.excluded{background:#111;border:1px solid #633338}.warranty-box ul,.warranty-terms ol{padding-left:1.25rem}.warranty-box li,.warranty-terms li{margin:.75rem 0;line-height:1.55}.warranty-note{border-left:5px solid #e31e24}.warranty-claim a{color:#ff5b60}.legal-note{font-size:.9rem;color:#aaa}.warranty-cta{align-items:center}.brand img{max-height:64px;width:auto;display:block}
@media(max-width:760px){.results-gallery{grid-template-columns:1fr}.result-card.featured-result{grid-column:auto}.result-pair figure,.featured-result .result-pair figure{min-height:250px}.gallery-cta{align-items:flex-start;flex-direction:column}.warranty-teaser{grid-template-columns:1fr;text-align:left}.warranty-icon{width:90px;height:90px;font-size:3rem}.warranty-columns{grid-template-columns:1fr}.warranty-hero h1{font-size:clamp(3rem,16vw,5rem)}}
@media(max-width:500px){.result-pair{grid-template-columns:1fr}.result-pair figure,.featured-result .result-pair figure{min-height:280px}.photo-label{top:10px;left:10px}}

/* Version 3 enhancements */
.value-callout {
  margin: 1.25rem 0 0;
  padding: .9rem 1rem;
  border-left: 4px solid var(--red-bright);
  background: rgba(215,25,32,.09);
  color: #f2f2f2;
  font-weight: 700;
}
.results-gallery { gap: 2rem; }
.result-card {
  overflow: hidden;
  border: 1px solid #2d2f34;
  border-radius: 18px;
  background: linear-gradient(145deg,#151619,#0d0e10);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
}
.result-pair {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 3px;
  background: #26282d;
}
.result-pair figure { position: relative; margin: 0; min-height: 300px; background: #090909; }
.result-pair img { width: 100%; height: 100%; min-height: 300px; max-height: 520px; object-fit: cover; }
.result-copy { padding: 1.2rem 1.3rem 1.35rem; }
.photo-label {
  position: absolute; z-index: 2; top: 14px; left: 14px;
  padding: .4rem .75rem; border-radius: 999px;
  font-size: .76rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase;
  box-shadow: 0 5px 18px rgba(0,0,0,.35);
}
.before-label { background: rgba(12,12,12,.9); color: #fff; border: 1px solid rgba(255,255,255,.25); }
.after-label { background: var(--red); color: #fff; }
.mobile-action-bar { display: none; }
@media (max-width: 760px) {
  body { padding-bottom: 64px; }
  .result-pair { grid-template-columns: 1fr 1fr; }
  .result-pair figure, .result-pair img { min-height: 210px; max-height: 300px; }
  .mobile-action-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: grid; grid-template-columns: repeat(3,1fr);
    background: #080808; border-top: 1px solid #35363a;
    box-shadow: 0 -8px 24px rgba(0,0,0,.35);
  }
  .mobile-action-bar a {
    display: flex; align-items: center; justify-content: center;
    min-height: 58px; padding: .55rem .35rem;
    text-decoration: none; font-size: .78rem; font-weight: 900; text-transform: uppercase;
    border-right: 1px solid #303136;
  }
  .mobile-action-bar a:nth-child(2) { background: var(--red); }
  .mobile-action-bar a:last-child { border-right: 0; }
}
@media (max-width: 520px) {
  .result-pair { grid-template-columns: 1fr; }
  .result-pair figure, .result-pair img { min-height: 280px; max-height: 390px; }
}