/* SecureFit Solutions — premium automotive-security theme (2026 refresh)
   Loaded after the base styles on every page. Overrides presentation only:
   no content, links, prices, schema or scripts are affected. */

:root{
  --bg:#070A0F;
  --surface:#0E141C;
  --surface-alt:#0A0F16;
  --surface-2:#131B25;
  --navy:#070A0F;
  --navy-2:#111923;
  --border:rgba(255,255,255,.09);
  --border-strong:rgba(120,200,255,.30);
  --text:#EAF2F8;
  --text-2:#94A6B8;
  --text-on-navy:#EAF2F8;
  --text-on-navy-2:#94A6B8;
  --accent:#22D3EE;
  --accent-2:#2563EB;
  --accent-hover:#67E8F9;
  --accent-ink:#03151C;
  --ready:#34D399;
  --armed:#FB7185;
  --star:#FBBF24;
  --radius:16px;
  --radius-sm:12px;
  --shadow-float:0 24px 60px -20px rgba(0,0,0,.85);
  --glow:0 0 0 1px rgba(34,211,238,.22), 0 18px 50px -24px rgba(34,211,238,.55);
  --grad-accent:linear-gradient(135deg,#22D3EE 0%,#3B82F6 100%);
}

html{background:var(--bg)}
body{
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(37,99,235,.20), transparent 60%),
    radial-gradient(900px 520px at 4% 8%, rgba(34,211,238,.12), transparent 62%),
    var(--bg);
  background-attachment:fixed;
  color:var(--text);
  letter-spacing:.005em;
}
h1,h2,h3{letter-spacing:-.015em}
h1{line-height:.94}
p{color:var(--text-2)}
.section-head p{color:var(--text-2)}
section{padding:104px 0;position:relative}
.alt{background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0));border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
:focus-visible{outline:3px solid rgba(34,211,238,.75);outline-offset:3px;border-radius:6px}
::selection{background:rgba(34,211,238,.3)}

/* Keep section headings clean and unadorned. */
.section-head h2::before{content:none}

/* ---------- Buttons ---------- */
.btn{border-radius:999px;font-weight:700;letter-spacing:.01em;min-height:52px;padding:14px 28px;
  transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease,background .2s ease,border-color .2s ease,color .2s}
.btn-primary{background:var(--grad-accent);color:var(--accent-ink);box-shadow:0 12px 34px -14px rgba(34,211,238,.9)}
.btn-primary:hover{background:linear-gradient(135deg,#67E8F9,#3B82F6);color:var(--accent-ink);transform:translateY(-2px);box-shadow:0 18px 44px -14px rgba(34,211,238,1)}
.btn-ghost{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.20);color:var(--text);backdrop-filter:blur(6px)}
.btn-ghost:hover{border-color:var(--accent);color:var(--text);background:rgba(34,211,238,.10);transform:translateY(-2px)}
.on-navy .btn-ghost{color:var(--text)}
.wa{background:#25D366;color:#04240F;box-shadow:0 12px 30px -16px rgba(37,211,102,.9)}
.wa:hover{background:#33e176;color:#04240F}

/* ---------- Navigation ---------- */
.nav .container{height:78px;gap:26px}
.nav.scrolled{background:rgba(7,10,15,.82);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);box-shadow:0 1px 0 rgba(255,255,255,.07),0 18px 40px -30px #000}
.logo{font-size:1.55rem;letter-spacing:.02em}
.logo-mark{background:var(--grad-accent);border-radius:11px;box-shadow:0 8px 22px -10px rgba(34,211,238,.9)}
.logo-mark svg{stroke:#03151C}
.nav-links a{font-size:.95rem;font-weight:600;letter-spacing:.01em;position:relative;padding-bottom:3px}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;border-radius:2px;background:var(--grad-accent);transition:right .25s cubic-bezier(.2,.7,.2,1)}
.nav-links a:hover::after{right:0}
.nav-cta{min-height:44px;padding:10px 22px}
.nav.open .nav-links{background:rgba(7,10,15,.98);backdrop-filter:blur(18px);top:78px;border-top:1px solid var(--border);padding-bottom:20px}
.nav.open{background:rgba(7,10,15,.98)}

/* ---------- Hero ---------- */
.hero{
  padding:168px 0 104px;
  background:
    linear-gradient(180deg,rgba(7,10,15,.94) 0%,rgba(7,10,15,.74) 34%,rgba(7,10,15,.90) 78%,var(--bg) 100%),
    url("../images/hero-night.jpg") center 38%/cover no-repeat, var(--bg);
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(760px 420px at 12% 30%, rgba(34,211,238,.16), transparent 65%),
    linear-gradient(90deg,rgba(7,10,15,.92) 0%,rgba(7,10,15,.42) 58%,rgba(7,10,15,.20) 100%);
}
.hero::after{background:radial-gradient(circle,rgba(37,99,235,.22) 0%,rgba(37,99,235,0) 65%)}
.hero .container{gap:64px;position:relative;z-index:1}
.hero h1{font-size:clamp(3rem,6.4vw,5rem);text-shadow:0 8px 40px rgba(0,0,0,.6)}
.hero p.lead{color:#C3D2DE;font-size:1.3rem}
.hero .crumb-on-navy,.hero .crumb-on-navy a{color:var(--text)!important;opacity:.72}
.hero-phone{font-size:1.75rem}
.hero-phone svg{color:var(--accent)}
.trust{
  gap:12px;margin-top:32px;padding:18px;border:1px solid var(--border);border-radius:16px;
  background:rgba(10,15,22,.62);backdrop-filter:blur(10px);display:grid;grid-template-columns:1fr 1fr;
}
.trust span{font-size:.94rem;color:#CBD8E4;font-weight:600}
.trust svg{color:var(--accent);width:18px;height:18px}
.trust b{color:#fff}
.trust .stars{color:var(--star);letter-spacing:1px}

/* ---------- Cards (shared) ---------- */
.card,.step,.quiz-wrap,form,.mobile-note,.review,.price{
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  border:1px solid var(--border);
  border-radius:var(--radius);
  backdrop-filter:blur(6px);
}
.card,.price,.step{position:relative;overflow:hidden}
.card::after,.price::after{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,rgba(34,211,238,.55),transparent);opacity:0;transition:opacity .3s}
.card.hover:hover,.price:hover{transform:translateY(-5px);border-color:var(--border-strong);box-shadow:var(--glow)}
.card.hover:hover::after,.price:hover::after{opacity:1}
.price{transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .25s,border-color .25s}
.card li svg,.price li svg,.pill svg,.mobile-note svg{color:var(--accent)}
.svc .icon{background:rgba(34,211,238,.12);border:1px solid rgba(34,211,238,.28);border-radius:12px;width:48px;height:48px}
.svc .icon svg{color:var(--accent)}
.mobile-note{border-left:3px solid var(--accent);border-radius:var(--radius)}
.step::before{background:var(--grad-accent);color:var(--accent-ink)}

/* ---------- Ghost wheel demo ---------- */
.demo{
  background:linear-gradient(180deg,rgba(19,27,37,.92),rgba(9,13,19,.94));
  border:1px solid rgba(120,200,255,.20);
  border-radius:22px;padding:30px;
  box-shadow:var(--shadow-float),inset 0 1px 0 rgba(255,255,255,.06);
}
.demo::before{content:"";position:absolute}
.demo-head h2{letter-spacing:.02em;text-transform:uppercase;font-size:1.05rem;color:#B9CBDA}
.status{border-radius:999px;letter-spacing:.04em;text-transform:uppercase;font-size:.75rem}
.wbtn{fill:#1B2734;stroke:rgba(120,200,255,.22)}
.wbtn:hover{fill:#25384B}
.wbtn.press{fill:var(--accent)}
.wbtn.press .wlabel{fill:#03151C}
.dot{border-color:rgba(120,200,255,.35)}
.dot.on{background:var(--accent);border-color:var(--accent);box-shadow:0 0 14px rgba(34,211,238,.8)}
.demo.ready{border-color:rgba(52,211,153,.45);box-shadow:0 0 0 1px rgba(52,211,153,.25),0 24px 60px -24px rgba(52,211,153,.5)}

/* ---------- Threat comparison ---------- */
.threat{background:transparent}
.threat .stat b{background:var(--grad-accent);-webkit-background-clip:text;background-clip:text;color:transparent}
.vs-col{border-radius:18px;padding:30px;backdrop-filter:blur(6px)}
.vs-col.bad{background:linear-gradient(180deg,rgba(251,113,133,.10),rgba(251,113,133,.03));border-color:rgba(251,113,133,.28)}
.vs-col.good{background:linear-gradient(180deg,rgba(52,211,153,.10),rgba(52,211,153,.03));border-color:rgba(52,211,153,.32)}
.threat-replay{border-radius:999px;border-color:rgba(255,255,255,.22)}
.threat-replay:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- Recommendation quiz ---------- */
.quiz-wrap{padding:44px;box-shadow:var(--shadow-float)}
.quiz-q{font-size:1.7rem}
.quiz-opt{background:rgba(255,255,255,.04);border:1.5px solid var(--border);border-radius:14px;padding:20px 22px;color:var(--text);min-height:64px}
.quiz-opt:hover{border-color:var(--accent);background:rgba(34,211,238,.10);transform:translateY(-2px)}
.quiz-progress span{background:rgba(255,255,255,.12);height:5px;border-radius:3px}
.quiz-progress span.done{background:var(--grad-accent)}
.quiz-result .icon{background:var(--grad-accent);box-shadow:0 14px 40px -16px rgba(34,211,238,.9)}
.quiz-result .icon svg{color:var(--accent-ink)}
.quiz-result .amt{background:var(--grad-accent);-webkit-background-clip:text;background-clip:text;color:transparent}
.quiz-restart{color:var(--text-2)}

/* ---------- Gallery ---------- */
.shot{border-radius:14px;border:1px solid var(--border)}
.shot img{transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .4s}
.shot:hover img{transform:scale(1.06);filter:saturate(1.1)}
.shot figcaption{background:linear-gradient(transparent,rgba(3,6,10,.92));font-weight:600;padding:34px 14px 12px}

/* ---------- Reviews ---------- */
.reviews{background:transparent}
.big{background:var(--grad-accent);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:5.5rem}
.review{padding:30px;transition:transform .22s,border-color .22s,box-shadow .25s}
.review:hover{transform:translateY(-4px);border-color:var(--border-strong);box-shadow:var(--glow)}
.review blockquote{color:#DCE7F0}
.score a{color:var(--accent)}

/* ---------- Pricing ---------- */
.price .amt{background:var(--grad-accent);-webkit-background-clip:text;background-clip:text;color:transparent}
.price .amt small{color:var(--text-2);-webkit-text-fill-color:var(--text-2)}
.price.featured{border-color:rgba(34,211,238,.55);box-shadow:var(--glow)}
.price.featured::before{background:var(--grad-accent);color:var(--accent-ink);border-radius:999px}
.price.value{border-color:rgba(52,211,153,.5)}
.price.value::before{background:#34D399;color:#04241A;border-radius:999px}

/* ---------- Trust pills / areas ---------- */
.pill{background:rgba(255,255,255,.05);border-color:rgba(120,200,255,.25);border-radius:999px;padding:9px 16px;color:var(--text)}
.areas-list a{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14);color:var(--text);transition:border-color .2s,background .2s,transform .2s}
.areas-list a:hover{border-color:var(--accent);background:rgba(34,211,238,.10);transform:translateY(-2px)}
.photo-tag{background:rgba(7,10,15,.85);border:1px solid var(--border);border-radius:999px}
.team-photo{border-radius:18px;border:1px solid var(--border)}

/* ---------- FAQ ---------- */
details{border-bottom:1px solid var(--border)}
details:first-of-type{border-top:1px solid var(--border)}
summary{font-size:1.25rem;padding:22px 0}
summary:hover{color:var(--accent)}

/* ---------- Quote form ---------- */
.quote{background:transparent}
form{padding:36px;box-shadow:var(--shadow-float)}
input,select,textarea{background:rgba(255,255,255,.04);border:1.5px solid var(--border);color:var(--text);border-radius:12px;min-height:52px}
input::placeholder,textarea::placeholder{color:#6B7C8D}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(34,211,238,.14)}
select option{background:#0E141C;color:var(--text)}
.fmsg.ok{color:#34D399}

/* ---------- Footer ---------- */
footer.site{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,0)),#05080C;border-top:1px solid var(--border)}
.fgrid a:hover{color:var(--accent)}

/* ---------- Sticky mobile bar ---------- */
.sticky{
  background:rgba(8,12,18,.86);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  border-top:1px solid rgba(120,200,255,.18);box-shadow:0 -14px 40px -18px #000;padding:10px 12px calc(12px + env(safe-area-inset-bottom));
}
.sticky .btn{min-height:50px;border-radius:14px;font-size:.95rem}

/* ---------- Consent + WhatsApp widget ---------- */
.consent{background:rgba(11,16,23,.96);border-color:var(--border);border-radius:16px;backdrop-filter:blur(14px)}
.consent a{color:var(--accent)}
.consent-accept{background:var(--grad-accent);color:var(--accent-ink);border-radius:999px}
.consent-decline{border-radius:999px}
.consent-actions button{min-height:44px}
.wa-widget{box-shadow:0 14px 40px -14px rgba(37,211,102,.85)}
.skip-link{background:var(--accent);color:var(--accent-ink)}

/* ---------- Motion ---------- */
.reveal{transform:translateY(22px)}
.card,.review,.shot,.price{will-change:transform}

@media (max-width:960px){
  .hero{padding-top:132px;background-position:center 30%}
  .trust{grid-template-columns:1fr}
}
@media (max-width:640px){
  section{padding:72px 0}
  .hero{padding:118px 0 76px}
  .hero h1{font-size:clamp(2.35rem,10vw,3.2rem);line-height:1.02}
  .hero p.lead{font-size:1.1rem}
  .fgrid{grid-template-columns:1fr}
  .quiz-wrap{padding:24px}
  .demo{padding:22px;border-radius:18px}
  .big{font-size:4rem}
}
@media (prefers-reduced-motion:reduce){
  .card.hover:hover,.price:hover,.review:hover,.areas-list a:hover,.quiz-opt:hover,.btn:hover{transform:none}
}

/* ---------- Fixes: nav fit + pricing badges ---------- */
.nav-links{gap:22px}
.nav-links a,.nav-phone,.nav-cta{white-space:nowrap}
.nav-phone{font-size:.95rem}
@media (max-width:1200px) and (min-width:961px){
  .nav .container{gap:18px}
  .nav-links{gap:16px}
  .nav-links a{font-size:.875rem}
  .nav-phone{font-size:.875rem}
  .nav-cta{padding:10px 16px;font-size:.9rem}
}
.price{overflow:visible}
.price::after{display:none}
.price.featured::before,.price.value::before{white-space:nowrap;top:-15px;left:24px;padding:6px 14px;box-shadow:0 10px 24px -12px rgba(0,0,0,.9)}
.card{overflow:visible}

/* Finance (Klarna / Clearpay) messaging */
.finance-note{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:28px;padding:16px 20px;border:1px solid rgba(56,189,248,.28);border-radius:14px;background:linear-gradient(180deg,rgba(56,189,248,.10),rgba(56,189,248,.03))}
.finance-note svg{width:24px;height:24px;flex:0 0 auto;color:var(--accent,#38bdf8)}
.finance-note p{margin:0;font-size:.95rem;line-height:1.5}
.finance-note b{display:block;font-size:1rem;margin-bottom:2px}
.finance-brands{display:flex;gap:8px;margin-left:auto;align-items:center}
.finance-brands span{font-weight:700;font-size:.78rem;letter-spacing:.04em;padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);white-space:nowrap}
.brand-badge{display:inline-flex;align-items:center;gap:5px;font-weight:800;font-size:.78rem;letter-spacing:.02em;padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12);white-space:nowrap;line-height:1}
.brand-badge svg{width:14px;height:14px;flex:none}
.brand-badge.klarna{background:#0B0B0B;color:#fff}
.brand-badge.klarna svg{fill:#F56CFE}
.brand-badge.clearpay{background:#CA4783;color:#fff}
.brand-badge.clearpay svg{fill:#fff}
.finance-inline{margin:10px 0 0;font-size:.88rem;opacity:.85}
@media (max-width:640px){.finance-brands{margin-left:0}}