/* v6 final - background only behind glass card */
:root{
  --primary:#2a7fff;
  --primary-600:#1e6af5;
  --ink:#0b1a2b;
  --muted:#4c5d73;
  --surface:#ffffff;
  --border: rgba(2,6,23,0.12);
  --shadow: 0 14px 44px rgba(0,0,0,0.16);
  --radius: 22px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Tajawal', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background: var(--surface);
}

.container{width: min(1100px, 92%); margin-inline:auto}

.topbar{
  position: sticky; top:0; background: rgba(255,255,255,0.85);
  backdrop-filter: blur(8px); border-bottom:1px solid var(--border); z-index:10;
}
.topbar-inner{display:flex; justify-content:flex-end; padding:10px 0}

.chip{
  border:1px solid var(--border);
  border-radius: 999px; padding:8px 14px; font-weight:600; background:#fff; cursor:pointer;
}
.chip-ghost{opacity:0.7}
.chip-primary{background: var(--primary); color:#fff; border-color: var(--primary)}

.hero{
  padding: clamp(28px, 5vw, 56px) 0 72px;
  display:flex; flex-direction:column; align-items:center;
  background:#fff;
}

.glass{
  position:relative;
  width: min(760px, 100%);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
}

.glass-bg{
  position:absolute; inset:0;
  background:url('https://i.postimg.cc/zX8sN3tb/motor-hero-1.webp') center/cover no-repeat;
  filter:brightness(0.9);
  z-index:0;
}

.glass::after{
  content:"";
  position:absolute; inset:0;
  background:rgba(255,255,255,0.86);
  backdrop-filter: blur(8px);
  z-index:1;
}

.glass .content{
  position:relative; z-index:2;
  padding: clamp(18px, 3vw, 32px);
  text-align:center;
}

.badge{
  margin: 0 auto 12px;
  display:flex; align-items:center; gap:12px;
  background: linear-gradient(180deg, #f8fbff, #ffffff);
  border:1px solid var(--border);
  padding:12px 18px; border-radius:16px;
  width:max-content; box-shadow:0 8px 22px rgba(0,0,0,.08);
}
.badge-icon{
  display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  background: radial-gradient(75% 75% at 50% 30%, #ffffff, #dceaff);
  color:var(--primary); font-size:22px;
}
.badge-title{font-size:14px; color:var(--muted)}
.badge-value{font-size:18px; font-weight:800; color:var(--ink)}

.headline{
  margin:14px 0 8px; font-size: clamp(26px, 5vw, 40px);
  line-height:1.25; font-weight:800; color: var(--primary-600);
}
.subhead{margin:0 auto 18px; color:var(--muted); font-size:18px; max-width:620px;}

.cta{
  display:inline-block; padding:14px 24px; border-radius:999px;
  background:linear-gradient(180deg,var(--primary),var(--primary-600));
  color:#fff; text-decoration:none; font-weight:800; font-size:19px; box-shadow: var(--shadow);
}
.features{margin-top:18px;}
.features-pills{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.feature.pill{
  padding:10px 14px; border-radius:999px;
  background:#fff; border:1px solid rgba(42,127,255,0.35); font-weight:700;
}

.promo-below{
  margin-top:20px; display:inline-block; padding:10px 16px;
  border-radius:999px; border:1px solid rgba(2,6,23,0.08);
  background:rgba(255,255,255,0.9); color:var(--ink); font-weight:700;
  box-shadow:0 4px 14px rgba(0,0,0,.07);
}

.footer{padding:38px 0 60px; text-align:center; color: var(--muted)}
.footer .legal{display:flex; gap:10px; justify-content:center; align-items:center; flex-wrap:wrap}
.footer .legal a{color:var(--muted); text-decoration:none; font-weight:600}
.footer .legal a:hover{color: var(--primary)}
.footer .dot{opacity:.5}