/*
Theme Name: AUTO KSP Detailing
Theme URI: https://autokspdetailing.ca
Author: AUTO KSP Detailing
Description: Luxury one-page WordPress theme for AUTO KSP Detailing with services, pricing, booking form, and email notifications.
Version: 1.0
License: GPLv2 or later
Text Domain: auto-ksp-detailing
*/

:root{
  --red:#d71920;
  --black:#050505;
  --dark:#0b0b0b;
  --card:#141414;
  --line:#292929;
  --text:#ffffff;
  --muted:#aaaaaa;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family: Arial, Helvetica, sans-serif;
  background:var(--black);
  color:var(--text);
  line-height:1.6;
}
a{text-decoration:none;color:inherit}
.container{width:92%;max-width:1180px;margin:auto}
header{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:80px 20px;
  background:
    linear-gradient(rgba(0,0,0,.72),rgba(0,0,0,.92)),
    url('https://images.unsplash.com/photo-1542362567-b07e54358753?auto=format&fit=crop&w=1800&q=85');
  background-size:cover;
  background-position:center;
}
.logo{
  width:420px;
  max-width:92%;
  margin-bottom:28px;
  border-radius:22px;
  box-shadow:0 0 55px rgba(215,25,32,.35);
}
h1{
  font-size:clamp(38px,6vw,72px);
  letter-spacing:4px;
  line-height:1;
  margin-bottom:14px;
  text-transform:uppercase;
}
.hero-sub{
  font-size:22px;
  letter-spacing:2px;
  color:var(--red);
  font-weight:bold;
  text-transform:uppercase;
  margin-bottom:12px;
}
.hero-text{font-size:19px;color:#ddd;max-width:760px;margin:auto auto 30px}
.buttons{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn{
  display:inline-block;
  padding:15px 25px;
  border-radius:999px;
  font-weight:bold;
  text-transform:uppercase;
  letter-spacing:1px;
  border:1px solid #fff;
  transition:.25s;
}
.btn-red{background:var(--red);border-color:var(--red)}
.btn:hover{transform:translateY(-3px)}
section{padding:80px 0}
.section-dark{background:var(--dark)}
.title{
  text-align:center;
  font-size:clamp(32px,4vw,48px);
  text-transform:uppercase;
  letter-spacing:3px;
  margin-bottom:10px;
}
.subtitle{text-align:center;color:var(--muted);margin-bottom:42px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px}
.card{
  background:linear-gradient(180deg,#151515,#070707);
  border:1px solid var(--line);
  border-radius:22px;
  padding:30px;
  position:relative;
  box-shadow:0 18px 50px rgba(0,0,0,.35);
}
.card.popular{border:2px solid var(--red);box-shadow:0 0 35px rgba(215,25,32,.18)}
.badge{
  display:inline-block;
  background:var(--red);
  padding:7px 13px;
  border-radius:999px;
  font-size:13px;
  font-weight:bold;
  margin-bottom:14px;
}
.card h3{font-size:25px;text-transform:uppercase;margin-bottom:10px}
.price{font-size:31px;color:var(--red);font-weight:900;margin-bottom:18px}
ul{list-style:none}
li{margin:9px 0;color:#ddd}
li:before{content:"✓";color:var(--red);margin-right:8px;font-weight:bold}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.promo{
  background:linear-gradient(135deg,var(--red),#530005);
  border-radius:28px;
  text-align:center;
  padding:45px 25px;
  box-shadow:0 25px 70px rgba(215,25,32,.25);
}
.promo h2{font-size:clamp(32px,5vw,56px);text-transform:uppercase;line-height:1}
.promo p{font-size:20px;margin-top:12px;color:#ffe8e8}
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.why div{
  background:#121212;
  border-left:4px solid var(--red);
  border-radius:16px;
  padding:24px;
}
.why h3{margin-bottom:8px}
form{
  max-width:680px;
  margin:auto;
  background:#111;
  border:1px solid var(--line);
  border-radius:22px;
  padding:30px;
}
input,select,textarea{
  width:100%;
  padding:15px;
  margin-bottom:14px;
  border-radius:10px;
  background:#050505;
  border:1px solid #333;
  color:#fff;
  font-size:16px;
}
textarea{min-height:110px}
button{width:100%;border:0;cursor:pointer;font-size:16px}
.alert{
  max-width:680px;
  margin:0 auto 20px;
  padding:16px;
  border-radius:12px;
  text-align:center;
  font-weight:bold;
}
.alert.success{background:#123b20;color:#c9ffd7;border:1px solid #2d8a45}
.alert.error{background:#3b1212;color:#ffd0d0;border:1px solid #8a2d2d}
.policy{
  background:#0b0b0b;
  padding:55px 20px;
  text-align:center;
}
.policy p{color:#bbb;max-width:740px;margin:auto}
footer{
  background:#020202;
  padding:30px 15px;
  text-align:center;
  color:#aaa;
}
.sticky{
  position:fixed;
  bottom:16px;
  right:16px;
  background:var(--red);
  color:#fff;
  padding:14px 20px;
  border-radius:999px;
  font-weight:bold;
  box-shadow:0 15px 40px rgba(215,25,32,.4);
  z-index:50;
}
@media(max-width:700px){
  .logo{width:330px}
  .sticky{left:16px;text-align:center}
}