/* ============================================================
   CARBON BLAST AUTO — design system v3 (high-end polish)
   Bebas Neue + Barlow · deep black · disciplined blue/gold
   ============================================================ */

:root{
  --dark:#07090c;
  --mid:#0e1115;
  --panel:#10141a;
  --border:rgba(255,255,255,.07);
  --border-2:rgba(255,255,255,.13);

  --text:#f4f7fa;
  --muted:rgba(244,247,250,.58);
  --faint:rgba(244,247,250,.36);

  --blue:#4EB3E8;
  --blue-dark:#2980B9;
  --blue-dim:rgba(78,179,232,.08);
  --blue-border:rgba(78,179,232,.28);
  --blue-glow:rgba(78,179,232,.22);

  --gold:#E8A020;
  --gold-dim:rgba(232,160,32,.09);
  --gold-border:rgba(232,160,32,.30);

  --red:#cc2200;
  --red-acc:#e8472b;
  --red-dim:rgba(232,71,43,.09);
  --red-border:rgba(232,71,43,.32);

  --violet:#b69cff;
  --violet-dim:rgba(182,156,255,.10);
  --violet-border:rgba(182,156,255,.34);
  --violet-glow:rgba(182,156,255,.22);

  --display:'Bebas Neue', Impact, sans-serif;
  --cond:'Barlow Condensed', sans-serif;
  --body:'Barlow', system-ui, sans-serif;

  --maxw:1200px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--dark); color:var(--text);
  font-family:var(--body); font-weight:400; line-height:1.65; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--blue); color:#04121c; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }

/* ---------- type ---------- */
h1,h2,h3{ font-family:var(--display); font-weight:400; letter-spacing:.012em; line-height:.92; }

.eyebrow{
  font-family:var(--cond); font-weight:600; font-size:12px; letter-spacing:.34em;
  text-transform:uppercase; color:var(--blue);
  display:inline-flex; align-items:center; gap:14px;
}
.eyebrow::before{ content:''; width:34px; height:1px; background:var(--blue); opacity:.55; }
.eyebrow.gold{ color:var(--gold); }
.eyebrow.gold::before{ background:var(--gold); }

.section-label{
  font-family:var(--cond); font-weight:600; font-size:12px; letter-spacing:.34em;
  text-transform:uppercase; color:var(--blue); margin-bottom:16px;
  display:flex; align-items:center; gap:14px;
}
.section-label::before{ content:''; width:34px; height:1px; background:var(--blue); opacity:.55; }
.section-label[style*="text-align:center"]{ justify-content:center; }
.section-label[style*="text-align:center"]::after{ content:''; width:34px; height:1px; background:var(--blue); opacity:.55; }
.section-label.gold{ color:var(--gold); }
.section-label.gold::before{ background:var(--gold); }
.section-label.red{ color:var(--red-acc); }
.section-label.red::before{ background:var(--red-acc); }
.section-label.violet{ color:var(--violet); }
.section-label.violet::before{ background:var(--violet); }

.section-h2{ font-size:clamp(40px,5vw,64px); margin-bottom:20px; }
.section-sub{ font-size:16.5px; font-weight:400; color:var(--muted); max-width:580px; line-height:1.7; margin-bottom:0; }
.sec-head{ max-width:640px; }
.sec-head.center{ margin-inline:auto; text-align:center; }
.sec-head.center .section-sub{ margin-inline:auto; }
.lead{ font-size:17px; color:var(--muted); line-height:1.7; max-width:58ch; text-wrap:pretty; }
strong{ color:var(--text); font-weight:600; }

/* ---------- layout ---------- */
.section{ padding:clamp(84px,10vw,132px) 0; }
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 44px; }
.rule-top{ border-top:1px solid var(--border); }
.bg-mid{ background:var(--mid); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  font-family:var(--cond); font-weight:700; font-size:14px; letter-spacing:.2em;
  text-transform:uppercase; padding:17px 36px; white-space:nowrap;
  background:var(--blue); color:#04121c; border:1px solid var(--blue);
  transition:background .25s var(--ease), color .25s, transform .25s var(--ease), box-shadow .25s, border-color .25s;
}
.btn::after{ content:'→'; font-family:var(--body); font-weight:600; transition:transform .25s var(--ease); }
.btn:hover{ background:#72c5f0; border-color:#72c5f0; transform:translateY(-2px); box-shadow:0 14px 34px -14px var(--blue-glow); }
.btn:hover::after{ transform:translateX(4px); }
.btn-outline{ background:transparent; color:var(--text); border-color:var(--border-2); }
.btn-outline:hover{ background:transparent; border-color:var(--blue); color:var(--blue); box-shadow:none; }
.btn-gold{ background:var(--gold); border-color:var(--gold); color:#1b1203; }
.btn-gold:hover{ background:#f2b441; border-color:#f2b441; box-shadow:0 14px 34px -14px rgba(232,160,32,.35); }
.btn-red{ background:var(--red-acc); border-color:var(--red-acc); color:#fff; }
.btn-red:hover{ background:#f25b3f; border-color:#f25b3f; box-shadow:0 14px 34px -14px rgba(232,71,43,.4); }
.btn-violet{ background:var(--violet); border-color:var(--violet); color:#160d2e; }
.btn-violet:hover{ background:#c7b3ff; border-color:#c7b3ff; box-shadow:0 14px 34px -14px var(--violet-glow); }
.btn-dark{ background:#000; color:#fff; border-color:#000; }
.btn-dark:hover{ background:#16181b; border-color:#16181b; box-shadow:0 14px 30px -14px rgba(0,0,0,.5); }
.btn-ghost-dark{ background:transparent; color:#000; border:1px solid rgba(0,0,0,.4); }
.btn-ghost-dark:hover{ background:rgba(0,0,0,.07); border-color:#000; box-shadow:none; }
.btn-sm{ padding:11px 24px; font-size:13px; letter-spacing:.16em; }

/* ---------- nav ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:0 44px; height:80px;
  background:rgba(7,9,12,.78); backdrop-filter:blur(18px) saturate(1.3);
  border-bottom:1px solid var(--border);
}
.brand{ display:inline-flex; flex-direction:row; align-items:center; gap:13px; line-height:0; flex-shrink:0; }
.brand img{ height:42px; width:auto; }
.brand .auto-tab{
  display:inline-flex; align-items:center; justify-content:center;
  text-align:center; background:var(--red); color:#fff;
  font-family:var(--cond); font-weight:800; font-size:19px; line-height:1; letter-spacing:.4em; text-indent:.4em;
  padding:7px 12px;
}
.nav-links{ display:flex; align-items:center; gap:2px; }
.nav-links a{
  position:relative;
  font-family:var(--cond); font-weight:600; font-size:14.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); padding:9px 15px; transition:color .2s;
}
.nav-links a::after{
  content:''; position:absolute; left:15px; right:15px; bottom:3px; height:1px;
  background:var(--blue); transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease);
}
.nav-links a:hover{ color:var(--text); }
.nav-links a:hover::after, .nav-links a.active::after{ transform:scaleX(1); }
.nav-links a.active{ color:var(--blue); }
.nav-cta{ display:flex; align-items:center; gap:22px; flex-shrink:0; }
.nav-phone{ font-family:var(--cond); font-weight:600; font-size:14.5px; letter-spacing:.1em; color:var(--muted); white-space:nowrap; transition:color .2s; }
.nav-phone:hover{ color:var(--blue); }
.nav-toggle{ display:none; width:42px; height:42px; background:none; border:1px solid var(--border-2); color:#fff; align-items:center; justify-content:center; }
.nav-toggle svg{ width:20px; height:20px; }

.mobile-menu{
  position:fixed; inset:0 0 0 auto; width:min(86vw,340px); z-index:120;
  background:var(--mid); border-left:1px solid var(--border);
  transform:translateX(100%); transition:transform .4s var(--ease);
  display:flex; flex-direction:column; padding:28px;
}
.mobile-menu.open{ transform:none; }
.mobile-menu a{ font-family:var(--cond); font-weight:600; font-size:22px; letter-spacing:.08em; text-transform:uppercase; padding:15px 0; border-bottom:1px solid var(--border); color:var(--muted); transition:color .2s, padding-left .2s; }
.mobile-menu a:hover{ color:var(--blue); padding-left:6px; }
.mm-close{ align-self:flex-end; width:42px; height:42px; background:none; border:1px solid var(--border-2); color:#fff; font-size:17px; margin-bottom:18px; }
.menu-backdrop{ position:fixed; inset:0; z-index:110; background:rgba(0,0,0,.65); backdrop-filter:blur(2px); opacity:0; visibility:hidden; transition:.3s; }
.menu-backdrop.open{ opacity:1; visibility:visible; }

/* ---------- hero ---------- */
.hero{ position:relative; min-height:94vh; display:flex; align-items:center; overflow:hidden; padding:140px 0 90px; }
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg image-slot, .hero-bg .ph{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; background:transparent; }
.hero-video.is-empty{ display:none; }
.hero-bg::after{
  content:''; position:absolute; inset:0; z-index:1; opacity:var(--ov, 1);
  background:
    linear-gradient(to top, var(--dark) 0%, transparent 28%),
    linear-gradient(100deg, rgba(7,9,12,.96) 8%, rgba(7,9,12,.78) 48%, rgba(7,9,12,.25) 100%);
}
.hero .wrap{ position:relative; z-index:2; }
.hero-inner{ max-width:690px; }
.hero h1{ font-size:clamp(56px,7.2vw,100px); line-height:.9; margin:26px 0 26px; }
.hero h1 .ac{ color:var(--blue); }
.hero h1 .ac-gold{ color:var(--gold); }
.hero-sub{ font-size:17.5px; color:rgba(244,247,250,.74); max-width:480px; margin-bottom:40px; line-height:1.7; text-wrap:pretty; }
.hero-btns{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-trust{ display:flex; align-items:center; gap:30px; margin-top:52px; padding-top:32px; border-top:1px solid var(--border); flex-wrap:wrap; }
.trust-item{ display:flex; align-items:center; gap:10px; font-family:var(--cond); font-weight:500; font-size:14.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.trust-dot{ width:5px; height:5px; background:var(--blue); flex-shrink:0; box-shadow:0 0 8px var(--blue-glow); }

/* badge */
.badge{ display:inline-flex; align-items:center; gap:10px; border:1px solid var(--blue-border); background:var(--blue-dim); padding:9px 18px; }
.badge .bd-dot{ width:6px; height:6px; border-radius:50%; background:var(--blue); }
.badge .bd-text{ font-family:var(--cond); font-weight:600; font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--blue); }

/* price block */
.price-block{ display:inline-flex; flex-direction:column; padding:20px 32px; margin-bottom:30px; }
.price-block.fill{ background:var(--gold); color:#000; }
.price-block.bordered{ border:1px solid var(--blue-border); background:var(--blue-dim); }
.price-block.bordered-red{ border:1px solid var(--red-border); background:var(--red-dim); }
.price-block.bordered-red .pl{ color:var(--red-acc); opacity:1; }
.price-block.bordered-violet{ border:1px solid var(--violet-border); background:var(--violet-dim); }
.price-block.bordered-violet .pl{ color:var(--violet); opacity:1; }
.price-block .pl{ font-family:var(--cond); font-weight:600; font-size:11px; letter-spacing:.28em; text-transform:uppercase; opacity:.7; }
.price-block.bordered .pl{ color:var(--blue); opacity:1; }
.price-block .pv{ font-family:var(--display); font-size:54px; line-height:1; letter-spacing:.01em; }
.price-block .pg{ font-family:var(--cond); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; opacity:.55; margin-top:4px; }

/* ---------- page hero (interior) ---------- */
.page-hero{ position:relative; padding:170px 0 76px; overflow:hidden; border-bottom:1px solid var(--border); }
.page-hero::before{ content:''; position:absolute; top:-46%; right:-8%; width:600px; height:600px; background:radial-gradient(circle, var(--blue-dim), transparent 68%); z-index:0; }
.page-hero .wrap{ position:relative; z-index:1; }
.breadcrumb{ font-family:var(--cond); font-weight:600; font-size:12px; letter-spacing:.26em; text-transform:uppercase; color:var(--faint); }
.breadcrumb a{ transition:color .2s; }
.breadcrumb a:hover{ color:var(--blue); }
.page-hero h1{ font-size:clamp(52px,7.4vw,96px); margin:20px 0 22px; }
.page-hero h1 .ac{ color:var(--blue); }
.page-hero .lead{ max-width:620px; }

/* ---------- footer ---------- */
.site-footer{ border-top:1px solid var(--border); background:#05070a; padding:80px 0 40px; }
.foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:44px; }
.site-footer h4{ font-family:var(--cond); font-weight:600; font-size:12px; letter-spacing:.26em; text-transform:uppercase; color:var(--faint); margin-bottom:20px; }
.site-footer ul{ list-style:none; display:flex; flex-direction:column; gap:12px; }
.site-footer ul a{ font-family:var(--cond); font-weight:500; font-size:15.5px; letter-spacing:.05em; color:var(--muted); transition:color .2s; }
.site-footer ul a:hover{ color:var(--blue); }
.foot-contact{ font-family:var(--cond); font-weight:500; font-size:15.5px; letter-spacing:.04em; color:var(--muted); line-height:2.05; }
.foot-contact a{ transition:color .2s; }
.foot-contact a:hover{ color:var(--blue); }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; gap:18px; margin-top:56px; padding-top:26px; border-top:1px solid var(--border); font-family:var(--cond); font-weight:500; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); flex-wrap:wrap; }

/* ---------- placeholders / image slots ---------- */
image-slot{ background:repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 12px, transparent 12px 24px), var(--panel); border:1px solid var(--border); color:var(--faint); font-family:var(--cond)!important; letter-spacing:.06em; }
.ph{ position:relative; overflow:hidden; background:repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 14px, transparent 14px 28px), var(--panel); border:1px solid var(--border); display:grid; place-items:center; }
.ph .ph-l{ font-family:var(--cond); font-weight:500; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); text-align:center; padding:0 18px; }

/* ---------- reveal (additive, never hides content) ---------- */
@keyframes cbaUp{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }
.reveal{ opacity:1; }
.reveal.in{ animation:cbaUp .85s var(--ease) both; }
.reveal.d1.in{ animation-delay:.08s; } .reveal.d2.in{ animation-delay:.16s; }
.reveal.d3.in{ animation-delay:.24s; } .reveal.d4.in{ animation-delay:.32s; }
@media (prefers-reduced-motion:reduce){ .reveal.in{ animation:none; } }

/* ---------- utilities ---------- */
.center{ text-align:center; }
.mx-auto{ margin-inline:auto; }
.mt-l{ margin-top:46px; }

@media (max-width:1000px){
  .nav-links, .nav-phone{ display:none; }
  .nav-cta > .btn{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:34px; }
}
@media (max-width:600px){
  .wrap{ padding:0 24px; }
  .site-header{ padding:0 24px; }
  .foot-grid{ grid-template-columns:1fr; }
  .hero{ min-height:auto; padding:130px 0 70px; }
  .hero-trust{ gap:18px; }
}