:root{
  --red:#ef1018;
  --red-dark:#bd070d;
  --black:#040608;
  --panel:#0a0d0f;
  --panel2:#111518;
  --line:#2a3035;
  --text:#f7f7f7;
  --muted:#b8bec3;
  --yellow:#ffc52d;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--black);color:var(--text);font-family:Inter,Arial,sans-serif}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%}

.site-header{
  position:fixed;z-index:50;top:0;left:0;right:0;height:102px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:0 4.5vw;
  background:linear-gradient(180deg,rgba(3,5,7,.98),rgba(3,5,7,.82),rgba(3,5,7,0));
  transition:.25s ease;
}
.site-header.scrolled{height:82px;background:rgba(3,5,7,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}
.logo{display:flex;align-items:center;gap:12px;min-width:max-content}
.gauge{width:58px;height:58px;border-radius:50%;border:7px dashed #fff;border-right-color:var(--red);border-bottom-color:var(--red);transform:rotate(-28deg);filter:drop-shadow(0 0 8px rgba(239,16,24,.3))}
.logo-text{font:italic 800 24px/.85 "Barlow Condensed",sans-serif;letter-spacing:.4px}
.logo-text strong{color:var(--red);font-size:31px}
.main-nav{display:flex;align-items:center;gap:28px;font:700 16px "Barlow Condensed",sans-serif;text-transform:uppercase}
.main-nav a{position:relative;padding:10px 0}
.main-nav a:after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--red);transition:.2s}
.main-nav a:hover:after{right:0}
.header-call{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,var(--red),#d2070e);padding:14px 22px;transform:skew(-11deg);font:700 15px/1.05 "Barlow Condensed",sans-serif;text-transform:uppercase;box-shadow:0 12px 30px rgba(239,16,24,.18)}
.header-call>*{transform:skew(11deg)}
.phone-icon{font-size:20px}
.header-call strong{font-size:18px}
.menu-toggle{display:none;background:none;border:1px solid var(--line);color:#fff;font-size:27px;padding:6px 11px;border-radius:6px}

.hero{
  min-height:760px;position:relative;display:flex;align-items:center;
  padding:140px 4.5vw 70px;
  background-image:url("assets/hero.jpg");
  background-size:cover;background-position:center center;
  border-bottom:1px solid var(--line);overflow:hidden;
}
.hero-overlay{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(1,3,5,.96) 0%,rgba(1,3,5,.88) 35%,rgba(1,3,5,.25) 67%,rgba(1,3,5,.1) 100%),
  linear-gradient(0deg,rgba(1,3,5,.72),transparent 35%);
}
.hero-content{position:relative;z-index:2;max-width:680px}
.eyebrow{text-transform:uppercase;color:#d7dadd;font:700 15px "Barlow Condensed",sans-serif;letter-spacing:2px;margin:0 0 14px}
.hero h1{font:italic 900 clamp(68px,7.4vw,112px)/.82 "Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.5px;margin:0 0 28px;text-shadow:0 5px 20px #000}
.hero h1 span,.hero h2 span{color:var(--red)}
.hero h2{font:italic 800 clamp(27px,3vw,38px) "Barlow Condensed",sans-serif;margin:0 0 24px}
.hero-intro{font-size:18px;line-height:1.7;color:#eef0f1;margin:0}
.hero-actions{display:flex;gap:18px;margin:32px 0 38px}
.btn{display:inline-flex;align-items:center;gap:11px;padding:18px 28px;font:italic 800 21px "Barlow Condensed",sans-serif;text-transform:uppercase;transform:skew(-8deg);transition:.2s}
.btn>*{transform:skew(8deg)}
.btn-primary{background:linear-gradient(135deg,var(--red),var(--red-dark));box-shadow:0 12px 35px rgba(239,16,24,.22)}
.btn-secondary{border:2px solid #fff;background:rgba(8,10,12,.72)}
.btn:hover{transform:skew(-8deg) translateY(-2px)}
.rating{display:flex;align-items:center;gap:14px}
.rating .stars{color:var(--yellow);font-size:32px;letter-spacing:2px}
.rating strong{font:700 26px "Barlow Condensed",sans-serif}
.rating small{display:block;margin-top:3px;color:#d1d5d8}
.speed-panel{
  position:absolute;z-index:3;right:4.5vw;bottom:38px;
  min-width:285px;padding:24px 32px 22px;background:rgba(5,5,5,.9);
  border-left:5px solid var(--red);transform:skew(-12deg);
  box-shadow:0 18px 45px rgba(0,0,0,.45);
  font-family:"Barlow Condensed",sans-serif;text-transform:uppercase
}
.speed-panel>*{display:block;transform:skew(12deg)}
.speed-panel>span{font-style:italic;font-weight:700}
.speed-panel>strong{color:var(--red);font-style:italic;margin:2px 0 7px}
.speed-panel div{display:flex;align-items:flex-end;gap:12px}
.speed-panel b{font:italic 900 66px/.8 "Barlow Condensed";color:var(--red)}
.speed-panel em{font-style:italic;font-size:22px;line-height:.92}

.benefits{display:grid;grid-template-columns:repeat(6,1fr);background:#080b0d;border-bottom:1px solid var(--line)}
.benefits article{min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px 10px;border-right:1px solid var(--line)}
.benefits article:last-child{border-right:0}
.benefit-icon{font-size:35px;color:var(--red);margin-bottom:12px;filter:drop-shadow(0 0 8px rgba(239,16,24,.3))}
.benefits h3{font:italic 800 18px/1.08 "Barlow Condensed",sans-serif;text-transform:uppercase;margin:0}
.benefits h3:after{content:"";display:block;width:42px;height:3px;background:var(--red);margin:14px auto 0}

.process{padding:48px 4.5vw 62px;background:
  linear-gradient(rgba(5,8,10,.93),rgba(4,6,8,.96)),
  url("assets/process.jpg") center/cover no-repeat}
.section-heading{display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:34px}
.section-heading h2{font:italic 900 clamp(31px,4vw,44px) "Barlow Condensed",sans-serif;text-transform:uppercase;margin:0}
.section-heading strong{color:var(--red)}
.speed-lines{width:110px;height:20px;background:linear-gradient(var(--red),var(--red)) 100% 2px/65% 3px no-repeat,linear-gradient(var(--red),var(--red)) 100% 9px/82% 3px no-repeat,linear-gradient(var(--red),var(--red)) 100% 16px/100% 3px no-repeat}
.speed-lines.reverse{transform:scaleX(-1)}
.process-grid{display:grid;grid-template-columns:1fr 58px 1fr 58px 1fr;align-items:center;gap:12px}
.process-card{position:relative;background:linear-gradient(#171b1f,#090c0e);border:1px solid #43494e;border-radius:17px;overflow:hidden;padding-bottom:22px;box-shadow:0 20px 40px rgba(0,0,0,.25)}
.step-label{position:absolute;z-index:2;top:12px;left:12px;font:italic 900 31px "Barlow Condensed";text-transform:uppercase;text-shadow:0 2px 8px #000}
.step-label span{background:var(--red);padding:3px 10px;margin-right:8px}
.card-visual{height:205px;background-image:url("assets/approved-design.jpg");background-size:100% auto;filter:saturate(.8) contrast(1.05)}
.card-visual.phone{background-position:left 65%}
.card-visual.advice{background-position:center 66%}
.card-visual.install{background-position:right 66%}
.process-card h3{font:italic 800 22px "Barlow Condensed";text-transform:uppercase;margin:16px 22px 4px}
.process-card p{color:#e1e4e6;line-height:1.55;margin:0 22px}
.process-arrow{font-size:54px;color:var(--red);text-align:center;text-shadow:0 0 18px rgba(239,16,24,.35)}

.brands{padding:30px 4.5vw;background:#090c0e;border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center}
.brands p{color:var(--muted);margin:0 0 18px}
.brand-row{display:flex;align-items:center;justify-content:space-around;flex-wrap:wrap;gap:24px}
.brand-row span{font:italic 900 clamp(23px,3vw,34px) "Barlow Condensed";color:#c4c8cb;letter-spacing:1px}

.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.reviews article{background:#0b0e10;padding:34px 4vw}
.reviews .stars{color:var(--yellow);font-size:24px;letter-spacing:2px}
.reviews blockquote{font:italic 700 22px/1.35 "Barlow Condensed";margin:15px 0}
.reviews strong{color:#bfc4c7;font-size:14px}

.contact-section{display:grid;grid-template-columns:.85fr 1.6fr;gap:55px;padding:60px 4.5vw 46px;background:
  linear-gradient(90deg,rgba(4,6,8,.98),rgba(4,6,8,.83)),
  url("assets/contact.jpg") center/cover no-repeat}
.contact-copy h2{font:italic 900 clamp(54px,6vw,78px)/.82 "Barlow Condensed";text-transform:uppercase;margin:0 0 17px}
.contact-copy h2 span{color:var(--red)}
.contact-copy h3{font:italic 700 25px "Barlow Condensed";text-transform:uppercase;margin:0 0 22px;padding-bottom:14px;border-bottom:1px solid #353a3e}
.contact-copy ul{list-style:none;margin:0 0 26px;padding:0}
.contact-copy li{margin:10px 0}
.contact-copy li:before{content:"☑";color:var(--red);margin-right:10px}
.contact-details{color:#cfd3d6;line-height:1.6}
.contact-details a:hover{color:var(--red)}

.quote-form{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:22px;background:rgba(16,19,22,.92);border:1px solid #363c41;border-radius:18px;align-self:center;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.field label{position:absolute;left:-9999px}
.field input,.field select,.field textarea{width:100%;border:1px solid transparent;border-radius:4px;background:linear-gradient(135deg,#323539,#292c2f);color:#fff;padding:18px 16px;font:15px Inter;outline:none}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(239,16,24,.12)}
.field textarea{height:58px;resize:vertical}
.submit-btn{grid-column:1/-1;border:0;color:#fff;background:linear-gradient(135deg,#fa161e,#d6080e);padding:19px 24px;font:italic 900 24px "Barlow Condensed";text-transform:uppercase;cursor:pointer;transform:skew(-5deg);box-shadow:0 12px 28px rgba(239,16,24,.2)}
.submit-btn:hover{filter:brightness(1.08)}
.form-note{grid-column:1/-1;text-align:center;color:#d4d7da;margin:0;font-size:14px}
.form-success{grid-column:1/-1;background:#0f2f1d;border:1px solid #22c55e;color:#dfffea;padding:14px;border-radius:6px;text-align:center}

.site-footer{display:flex;justify-content:center;gap:34px;flex-wrap:wrap;padding:16px 4.5vw;background:#080b0d;border-top:1px solid var(--line);color:#d3d6d8;font-size:14px}
.site-footer a:hover{color:var(--red)}

.whatsapp{position:fixed;z-index:60;right:22px;bottom:22px;width:90px;height:90px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#20bd55;color:#fff;font:800 11px/1.05 Inter;text-align:center;text-transform:uppercase;box-shadow:0 0 28px rgba(32,189,85,.55);transition:.2s}
.whatsapp:hover{transform:scale(1.05)}
.wa-icon{font-size:30px;line-height:1;margin-bottom:3px}

@media(max-width:1050px){
  .main-nav{gap:17px}
  .main-nav a{font-size:14px}
  .header-call{padding:12px 15px}
  .benefits{grid-template-columns:repeat(3,1fr)}
  .benefits article:nth-child(3){border-right:0}
  .process-grid{grid-template-columns:1fr}
  .process-arrow{transform:rotate(90deg)}
  .contact-section{grid-template-columns:1fr}
}
@media(max-width:760px){
  .site-header{height:82px;padding:0 18px}
  .logo-text{font-size:18px}
  .logo-text strong{font-size:24px}
  .gauge{width:43px;height:43px;border-width:5px}
  .header-call{display:none}
  .menu-toggle{display:block}
  .main-nav{position:fixed;top:82px;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:25px;background:rgba(4,6,8,.98);transform:translateX(100%);transition:.25s}
  .main-nav.open{transform:translateX(0)}
  .main-nav a{width:100%;padding:17px 0;border-bottom:1px solid var(--line);font-size:22px}
  .hero{min-height:700px;padding:112px 20px 45px;background-position:58% center}
  .hero-overlay{background:linear-gradient(90deg,rgba(1,3,5,.96),rgba(1,3,5,.79) 72%,rgba(1,3,5,.35))}
  .hero h1{font-size:68px}
  .hero h2{font-size:28px}
  .hero-intro{font-size:16px}
  .hero-actions{flex-direction:column;align-items:flex-start}
  .speed-panel{display:none}
  .benefits{grid-template-columns:repeat(2,1fr)}
  .benefits article:nth-child(odd){border-right:1px solid var(--line)}
  .benefits article:nth-child(even){border-right:0}
  .section-heading .speed-lines{display:none}
  .process{padding-inline:18px}
  .brands{padding-inline:18px}
  .reviews{grid-template-columns:1fr}
  .contact-section{padding:48px 18px 35px}
  .quote-form{grid-template-columns:1fr}
  .submit-btn,.form-note{grid-column:auto}
  .site-footer{flex-direction:column;align-items:center;gap:8px;text-align:center}
  .whatsapp{width:74px;height:74px}
}