/* =======================================================================
   SignPOS — Site-wide Premium Enhancement Overlay
   Brand theme preserved:  #b80000 (red) · #ff8c00 (orange) · #ffd700 (gold)
   Linked LAST on every page so shared cosmetic classes upgrade cohesively.
   ======================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&display=swap');

:root {
  --brand-red:    #b80000;
  --brand-orange: #ff8c00;
  --brand-gold:   #ffd700;
  --ink:          #1d1d22;
  --muted:        #6b6b73;
  --grad:         linear-gradient(90deg, var(--brand-red), var(--brand-orange), var(--brand-gold));
  --grad-btn:     linear-gradient(to right, var(--brand-orange), var(--brand-red));
  --card-radius:  18px;
  --shadow-sm:    0 8px 24px rgba(20,16,30,.07);
  --shadow-md:    0 16px 40px rgba(30,12,0,.13);
}

/* ---- Distinctive display face for headings (body font untouched) ---- */
h1, h2, h3,
.section-title, .section-title1,
.navbar-brand, .primary-text {
  font-family: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  letter-spacing: -0.01em;
}

/* ---- Navbar: frosted, subtle brand hairline ---- */
.navbar.sticky-top {
  -webkit-backdrop-filter: saturate(150%) blur(8px);
          backdrop-filter: saturate(150%) blur(8px);
  background: rgba(255,255,255,.86) !important;
  border-bottom: 1px solid rgba(184,0,0,.06);
}

/* ---- Section titles: bigger + gradient accent underline ---- */
.section-title { position: relative; font-size: clamp(1.6rem, 2.6vw, 2.1rem) !important; }
.section-title::after {
  content: ""; display: block;
  width: 54px; height: 4px; border-radius: 4px;
  margin-top: 12px; background: var(--grad);
}
.text-center .section-title::after,
.section-title.text-center::after { margin-left: auto; margin-right: auto; }

/* ---- Buttons ---- */
.btn-warning {
  background: var(--grad-btn) !important;
  color: #fff !important; border: none !important;
  border-radius: 50px !important; font-weight: 700 !important; letter-spacing: .3px;
  box-shadow: 0 10px 24px rgba(184,0,0,.26) !important;
  transition: transform .28s ease, box-shadow .28s ease, background .28s ease !important;
}
.btn-warning:hover {
  background: linear-gradient(to right, var(--brand-red), var(--brand-orange)) !important;
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(184,0,0,.34) !important;
}
.btn-danger, .btn-danger:focus, .btn-danger:active {
  background: var(--grad-btn) !important; border: none !important;
  border-radius: 50px !important; font-weight: 700 !important; color: #fff !important;
  box-shadow: 0 10px 24px rgba(184,0,0,.24) !important;
  transition: transform .28s ease, box-shadow .28s ease, background .28s ease !important;
}
.btn-danger:hover {
  background: linear-gradient(to right, var(--brand-red), var(--brand-orange)) !important;
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(184,0,0,.32) !important;
}
.btn-light { border-radius: 50px !important; font-weight: 700; }
.btn-outline-danger, .btn-outline-warning { border-radius: 50px !important; font-weight: 700; }

/* ---- Cards (incl. variants): refined surface + lift + gradient top accent + ring on hover ---- */
.card, .ai-card, .about-card, .policy-card, .dealer-card {
  border: 1px solid rgba(20,16,30,.05) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--shadow-sm) !important;
  background: #fff !important;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease !important;
  overflow: hidden; position: relative;
}
.card::before, .ai-card::before, .about-card::before, .policy-card::before, .dealer-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad); transform: scaleX(0); transform-origin: left;
  transition: transform .35s ease; z-index: 2;
}
.card::after, .ai-card::after, .about-card::after, .policy-card::after, .dealer-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(135deg, rgba(255,215,0,.85), rgba(255,140,0,.55), rgba(184,0,0,.7));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .35s ease; pointer-events: none; z-index: 2;
}
.card:hover, .ai-card:hover, .about-card:hover, .policy-card:hover, .dealer-card:hover {
  transform: translateY(-8px); box-shadow: var(--shadow-md) !important;
}
.card:hover::before, .ai-card:hover::before, .about-card:hover::before, .policy-card:hover::before, .dealer-card:hover::before { transform: scaleX(1); }
.card:hover::after,  .ai-card:hover::after,  .about-card:hover::after,  .policy-card:hover::after,  .dealer-card:hover::after  { opacity: 1; }

/* ---- Innovative AI section: keep SVG icons at the original compact size ---- */
.ai-icon {
  width: 60px;
  height: 60px;
  display: block;
  margin: 0 auto;
}

/* ---- Light hero (about / features / refund / privacy / terms / dealers): premium upgrade ---- */
.hero, .dealer-hero {
  background:
    radial-gradient(720px 400px at 82% 16%, rgba(255,215,0,0.22), transparent 60%),
    radial-gradient(560px 380px at 12% 78%, rgba(184,0,0,0.10), transparent 62%),
    linear-gradient(to bottom, #ffffff 0%, #fafafa 100%) !important;
  padding: 110px 0 70px !important;
  position: relative;
  overflow: hidden;
}
.hero::before, .hero::after,
.dealer-hero::before, .dealer-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}
.hero::before, .dealer-hero::before {
  width: 380px; height: 380px;
  right: -120px; top: -120px;
  background: radial-gradient(circle, rgba(255,215,0,0.45), rgba(255,140,0,0.20) 60%, transparent 75%);
  animation: blobFloat 12s ease-in-out infinite alternate;
}
.hero::after, .dealer-hero::after {
  width: 320px; height: 320px;
  left: -120px; bottom: -120px;
  background: radial-gradient(circle, rgba(184,0,0,0.22), transparent 65%);
  animation: blobFloat 14s ease-in-out infinite alternate-reverse;
}
@keyframes blobFloat {
  from { transform: translate(0, 0)         scale(1);    }
  to   { transform: translate(22px, 30px)   scale(1.06); }
}
.hero .container, .dealer-hero .container { position: relative; z-index: 1; }
.hero h1, .dealer-hero h2 {
  font-size: clamp(2.2rem, 4.6vw, 3.4rem) !important;
  font-weight: 800 !important;
  line-height: 1.1;
  animation: spFadeUp .9s both !important;
}
.hero h1 span, .dealer-hero h2 span {
  background: linear-gradient(90deg, var(--brand-red), var(--brand-orange), var(--brand-gold)) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
/* Add gradient highlight on key brand words even without a <span> wrapper */
.dealer-hero h2::first-line { /* no-op fallback */ }
.hero p, .dealer-hero p {
  font-size: 1.15rem !important;
  color: #555 !important;
  max-width: 680px;
  margin-left: auto; margin-right: auto;
  animation: spFadeUp .9s .12s both !important;
}

/* ---- Footer: unified premium dark with gold top accent ---- */
.footer, body > footer {
  background: #1b1b1f !important;
  color: #cfcfd6 !important;
  border-top: none !important;
  border-top-left-radius: 26px !important;
  border-top-right-radius: 26px !important;
  position: relative; margin-top: 48px;
}
.footer::before, body > footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad);
}
.footer a, body > footer a { color: #e9e9ee !important; text-decoration: none; }
.footer a:hover, body > footer a:hover { color: var(--brand-gold) !important; }

/* ---- Gentle entrance for cards + titles (load fallback when JS is off) ---- */
@media (prefers-reduced-motion: no-preference) {
  .card, .ai-card, .about-card, .policy-card, .dealer-card { animation: spFadeUp .6s both; }
  .section-title, h2.fw-bold { animation: spFadeUp .8s both; }
  .row > .col-md-4:nth-child(2) > .card,
  .row > .col-md-4:nth-child(2) > .ai-card { animation-delay: .12s; }
  .row > .col-md-4:nth-child(3) > .card,
  .row > .col-md-4:nth-child(3) > .ai-card { animation-delay: .24s; }
  .row > .col-md-3:nth-child(2) > .card { animation-delay: .10s; }
  .row > .col-md-3:nth-child(3) > .card { animation-delay: .20s; }
  .row > .col-md-3:nth-child(4) > .card { animation-delay: .30s; }
}
@keyframes spFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- When JS is present, swap to scroll-reveal (smoother + triggers on scroll) ---- */
[data-sp-js="1"] .card,
[data-sp-js="1"] .ai-card,
[data-sp-js="1"] .about-card,
[data-sp-js="1"] .policy-card,
[data-sp-js="1"] .dealer-card,
[data-sp-js="1"] .about-img,
[data-sp-js="1"] .dealer-img,
[data-sp-js="1"] .office-img,
[data-sp-js="1"] .section-title,
[data-sp-js="1"] h2.fw-bold {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
  animation: none !important;
}
[data-sp-js="1"] .is-in {
  opacity: 1 !important;
  transform: none !important;
}
/* Staggered reveal across grid columns */
[data-sp-js="1"] .row > [class*="col-"]:nth-child(2) > .card,
[data-sp-js="1"] .row > [class*="col-"]:nth-child(2) > .ai-card { transition-delay: .10s; }
[data-sp-js="1"] .row > [class*="col-"]:nth-child(3) > .card,
[data-sp-js="1"] .row > [class*="col-"]:nth-child(3) > .ai-card { transition-delay: .20s; }
[data-sp-js="1"] .row > [class*="col-"]:nth-child(4) > .card { transition-delay: .30s; }
@media (prefers-reduced-motion: reduce) {
  [data-sp-js="1"] .card,
  [data-sp-js="1"] .ai-card,
  [data-sp-js="1"] .about-card,
  [data-sp-js="1"] .policy-card,
  [data-sp-js="1"] .dealer-card,
  [data-sp-js="1"] .about-img,
  [data-sp-js="1"] .dealer-img,
  [data-sp-js="1"] .office-img,
  [data-sp-js="1"] .section-title,
  [data-sp-js="1"] h2.fw-bold {
    opacity: 1 !important; transform: none !important;
  }
}

/* ---- Brand sparkles on hero sections (injected by enhance.js) ---- */
.hero-spark {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  z-index: 1; opacity: 0;
  filter: blur(.4px);
  box-shadow: 0 0 8px currentColor;
  animation: heroTwinkle 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes heroTwinkle {
  0%, 100% { opacity: 0; transform: scale(.6); }
  50%      { opacity: .9; transform: scale(1);  }
}

/* ---- Images: subtle zoom + warm shadow on hover ---- */
.about-img, .dealer-img, .office-img {
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease !important;
}
.about-img:hover, .dealer-img:hover, .office-img:hover {
  transform: scale(1.025);
  box-shadow: 0 22px 48px rgba(184,0,0,.18) !important;
}

/* ---- Section backgrounds: subtle warm washes for cohesion ---- */
section.bg-light {
  background:
    radial-gradient(620px 320px at 90% 0%, rgba(255,215,0,0.10), transparent 60%),
    radial-gradient(420px 300px at 5% 100%, rgba(184,0,0,0.06), transparent 60%),
    #f8f9fa !important;
}
section.bg-white {
  background:
    radial-gradient(540px 280px at 100% 100%, rgba(255,215,0,0.08), transparent 60%),
    #ffffff !important;
}