/*!
 * TaxVault — premium pass for the landing hero, the closing CTA band and the
 * footer. Pure overrides on the built site; selectors are compound so they
 * outrank Tailwind's single-class utilities without !important.
 *
 * Colour comes from the site's own --lx-* tokens so both themes stay coherent.
 */

/* ============================================================ HERO ======= */
section.pt-28.pb-24.overflow-hidden {
  --tv-gold: 212, 175, 55;
  --tv-grid: rgba(26, 24, 23, .075);
  --tv-glow-a: rgba(212, 175, 55, .22);
  --tv-glow-b: rgba(124, 140, 220, .16);
  position: relative;
  isolation: isolate;
  border-bottom: 0;
  background:
    radial-gradient(760px 400px at 50% -60px, var(--tv-glow-a), transparent 70%),
    radial-gradient(900px 540px at 88% 112%, var(--tv-glow-b), transparent 66%),
    var(--lx-bg);
}
.dark section.pt-28.pb-24.overflow-hidden {
  --tv-grid: rgba(255, 255, 255, .048);
  --tv-glow-a: rgba(212, 175, 55, .20);
  --tv-glow-b: rgba(64, 86, 170, .26);
}

/* A fine grid, masked to a soft ellipse, so the field reads as depth rather
   than as wallpaper. */
section.pt-28.pb-24.overflow-hidden::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--tv-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tv-grid) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 72% 62% at 50% 36%, #000 28%, transparent 76%);
          mask-image: radial-gradient(ellipse 72% 62% at 50% 36%, #000 28%, transparent 76%);
}

/* Gold horizon where the hero meets the next section. */
section.pt-28.pb-24.overflow-hidden::after {
  content: "";
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(920px, 82%); height: 1px; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(var(--tv-gold), .6), transparent);
}

section.pt-28.pb-24.overflow-hidden > div.relative { position: relative; z-index: 1; }

/* The existing blur blob was at 5% - barely there. */
section.pt-28.pb-24.overflow-hidden > div.absolute.inset-0 > div {
  width: 860px; height: 440px; top: -140px;
  background: rgba(var(--tv-gold), .15);
}

/* badge */
section.pt-28.pb-24.overflow-hidden .glass-gold.rounded-full {
  background: linear-gradient(180deg, rgba(var(--tv-gold), .17), rgba(var(--tv-gold), .08));
  border: 1px solid rgba(var(--tv-gold), .40);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 8px 28px rgba(var(--tv-gold), .14);
  letter-spacing: .01em;
}

/* headline */
section.pt-28.pb-24.overflow-hidden h1 { letter-spacing: -.035em; line-height: 1.03; }
section.pt-28.pb-24.overflow-hidden h1 > span.text-luxury-gold {
  background: linear-gradient(100deg, #f5d77a 0%, #d4af37 46%, #b8932f 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.dark section.pt-28.pb-24.overflow-hidden h1 > span.text-luxury-gold {
  filter: drop-shadow(0 0 26px rgba(212, 175, 55, .28));
}

/* primary + secondary CTA */
section.pt-28.pb-24.overflow-hidden div.justify-center.mb-12 > :first-child {
  background: linear-gradient(180deg, #ecc75a 0%, #d4af37 54%, #c29a28 100%);
  color: #1a1500;
  border: 1px solid rgba(160, 122, 18, .6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    0 1px 0 rgba(0, 0, 0, .18),
    0 10px 30px rgba(212, 175, 55, .36);
  transition: transform .2s ease, box-shadow .2s ease;
}
section.pt-28.pb-24.overflow-hidden div.justify-center.mb-12 > :first-child:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    0 2px 0 rgba(0, 0, 0, .18),
    0 16px 40px rgba(212, 175, 55, .46);
}
section.pt-28.pb-24.overflow-hidden div.justify-center.mb-12 > :nth-child(2) {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
  transition: transform .2s ease, border-color .2s ease;
}
section.pt-28.pb-24.overflow-hidden div.justify-center.mb-12 > :nth-child(2):hover {
  transform: translateY(-1px);
  border-color: rgba(var(--tv-gold), .5);
}

/* stat cards */
section.pt-28.pb-24.overflow-hidden .glass.rounded-2xl {
  border: 1px solid var(--lx-border);
  border-top-color: rgba(var(--tv-gold), .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 10px 30px rgba(0, 0, 0, .09);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.dark section.pt-28.pb-24.overflow-hidden .glass.rounded-2xl {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 14px 40px rgba(0, 0, 0, .45);
}
section.pt-28.pb-24.overflow-hidden .glass.rounded-2xl:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--tv-gold), .45);
}

/* ======================================================= CTA BAND ======= */
section.py-20.text-center.overflow-hidden {
  --tv-gold: 212, 175, 55;
  isolation: isolate;
  border-top: 0; border-bottom: 0;
  background:
    radial-gradient(680px 360px at 50% 0%, rgba(var(--tv-gold), .16), transparent 70%),
    var(--lx-bg);
}
section.py-20.text-center.overflow-hidden::before,
section.py-20.text-center.overflow-hidden::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  width: min(920px, 82%); height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(var(--tv-gold), .5), transparent);
}
section.py-20.text-center.overflow-hidden::before { top: 0; }
section.py-20.text-center.overflow-hidden::after  { bottom: 0; }

section.py-20.text-center.overflow-hidden .glass-gold.rounded-2xl {
  width: 64px; height: 64px;
  background: linear-gradient(160deg, rgba(var(--tv-gold), .28), rgba(var(--tv-gold), .10));
  border: 1px solid rgba(var(--tv-gold), .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 12px 32px rgba(var(--tv-gold), .22);
  color: #d4af37;
}
section.py-20.text-center.overflow-hidden h2 { letter-spacing: -.025em; }
section.py-20.text-center.overflow-hidden a[class*="bg-luxury-gold"],
section.py-20.text-center.overflow-hidden button[class*="bg-luxury-gold"] {
  background: linear-gradient(180deg, #ecc75a 0%, #d4af37 54%, #c29a28 100%);
  color: #1a1500;
  border: 1px solid rgba(160, 122, 18, .6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 12px 34px rgba(212, 175, 55, .36);
  transition: transform .2s ease, box-shadow .2s ease;
}
section.py-20.text-center.overflow-hidden a[class*="bg-luxury-gold"]:hover,
section.py-20.text-center.overflow-hidden button[class*="bg-luxury-gold"]:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 18px 44px rgba(212, 175, 55, .46);
}

/* ========================================================= FOOTER ======= */
footer.bg-luxury-surface {
  --tv-gold: 212, 175, 55;
  --tv-dot: rgba(26, 24, 23, .11);
  position: relative; isolation: isolate;
  border-top: 0;
  background:
    radial-gradient(640px 320px at 10% 0%, rgba(var(--tv-gold), .11), transparent 66%),
    linear-gradient(180deg, var(--lx-surface) 0%, var(--lx-bg) 100%);
}
.dark footer.bg-luxury-surface { --tv-dot: rgba(255, 255, 255, .055); }

footer.bg-luxury-surface::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent 0%, rgba(var(--tv-gold), .55) 28%,
                              rgba(var(--tv-gold), .55) 72%, transparent 100%);
}
footer.bg-luxury-surface::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(var(--tv-dot) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .7), transparent 88%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, .7), transparent 88%);
}

/* column headings get a short gold rule beneath */
footer.bg-luxury-surface .uppercase.tracking-widest {
  color: var(--lx-text);
  font-size: 11px; letter-spacing: .18em;
  position: relative; padding-bottom: 10px;
}
footer.bg-luxury-surface .uppercase.tracking-widest::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 22px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #d4af37, #f5d77a);
}

/* links */
footer.bg-luxury-surface a.text-sm.text-luxury-secondary {
  display: inline-block;
  transition: color .2s ease, transform .2s ease;
}
footer.bg-luxury-surface a.text-sm.text-luxury-secondary:hover {
  color: #d4af37; transform: translateX(3px);
}

/* brand tile */
footer.bg-luxury-surface .w-9.h-9 {
  box-shadow:
    0 0 0 1px rgba(var(--tv-gold), .38),
    0 8px 20px rgba(var(--tv-gold), .18),
    inset 0 1px 0 rgba(255, 255, 255, .22);
}

/* pills: South Africa / SSL Secured */
footer.bg-luxury-surface .flex.gap-2.flex-wrap > * {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
  display: inline-flex; align-items: center; gap: 6px;
}

/* trust list in the Get Started column */
footer.bg-luxury-surface .mt-6.space-y-2 > div { gap: 8px; }

/* bottom bar */
footer.bg-luxury-surface .border-t.mt-12.pt-8 { border-top: 0; position: relative; }
footer.bg-luxury-surface .border-t.mt-12.pt-8::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, rgba(var(--tv-gold), .35), var(--lx-border) 38%,
                              var(--lx-border) 62%, rgba(var(--tv-gold), .35));
}
footer.bg-luxury-surface .border-t.mt-12.pt-8 a:hover { color: #d4af37; }

/* ============================================= inline icon slots (JS) == */
.tv-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.15em; height: 1.15em; vertical-align: -.18em; flex: 0 0 auto;
}
.tv-ico svg { width: 100%; height: 100%; display: block; }
.tv-ico-flag svg { border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .18); }
.tv-ico-lock svg, .tv-ico-bolt svg { fill: none; stroke: #d4af37; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tv-ico-shield svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
section.py-20.text-center.overflow-hidden .tv-ico { width: 30px; height: 30px; vertical-align: middle; }

@media (prefers-reduced-motion: reduce) {
  section.pt-28.pb-24.overflow-hidden *, footer.bg-luxury-surface * { transition: none !important; }
}


/* ================================================ footer download block == */
footer.bg-luxury-surface .tv-dl {
  --tv-gold: 212, 175, 55;
  display: flex; align-items: center; gap: 16px;
  margin-top: 4px; padding: 14px;
  border-radius: 18px;
  background: linear-gradient(160deg, var(--lx-elevated), var(--lx-surface));
  border: 1px solid var(--lx-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 30px rgba(0,0,0,.10);
  width: fit-content; max-width: 100%;
}
.dark footer.bg-luxury-surface .tv-dl {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 14px 36px rgba(0,0,0,.45);
  border-top-color: rgba(var(--tv-gold), .35);
}
footer.bg-luxury-surface .tv-dl-qr {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-decoration: none; flex: 0 0 auto;
}
footer.bg-luxury-surface .tv-dl-card {
  display: block; padding: 8px; border-radius: 14px; background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 6px 18px rgba(0,0,0,.18);
  transition: transform .2s ease, box-shadow .2s ease;
}
footer.bg-luxury-surface .tv-dl-card img { display: block; border-radius: 6px; }
footer.bg-luxury-surface .tv-dl-qr:hover .tv-dl-card {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(var(--tv-gold), .55), 0 12px 28px rgba(var(--tv-gold), .25);
}
footer.bg-luxury-surface .tv-dl-cap {
  font-size: 13px; font-weight: 700; letter-spacing: .01em; color: var(--lx-text);
}
footer.bg-luxury-surface .tv-dl-sub { font-size: 11px; color: var(--lx-muted); margin-top: -4px; }
footer.bg-luxury-surface .tv-dl-badges { display: flex; flex-direction: column; gap: 10px; margin: 0; }
/* The badges are inline SVGs. Give the wrapper the width and let the SVG
   fill it, so it scales in proportion instead of collapsing to its viewBox. */
/* Each badge is <button><img width="160" style="width:160px;height:auto">.
   The inline style outranks any stylesheet rule, so !important is the only
   way to let the wrapper width drive the image. Sized so the two badges
   together stand exactly as tall as the QR card (badge is ~3.55:1):
   phone: content 400px; card = 116 + 16 = 132 -> (132 - 10) / 2 = 61px each -> 216px;
   132 + 16 + 216 + 28 padding = 392. */
footer.bg-luxury-surface .tv-dl-badges > * { display: block; width: 216px; flex: 0 0 auto; }
footer.bg-luxury-surface .tv-dl-badges img,
footer.bg-luxury-surface .tv-dl-badges svg {
  display: block !important; width: 100% !important; height: auto !important;
}
footer.bg-luxury-surface .tv-dl-badges > * {
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 6px 16px rgba(0,0,0,.28);
}
/* From md up the footer is a 4-column grid and the brand column is ~230px,
   so the block goes compact to keep QR and badges side by side. */
/* Tiers keyed to the brand column's own width via container queries.
   Every tier keeps the two badges exactly as tall as the QR card (badge is
   ~3.55:1) and the whole row inside the column. Base = narrowest column. */
footer.bg-luxury-surface .tv-dl-host { container-type: inline-size; }

/* <262px (iPad portrait 4-col, ~212): card 58+12=70 -> 31px badges -> 110px; total 208 */
footer.bg-luxury-surface .tv-dl { --qr: 58px; --qpad: 6px; gap: 8px; padding: 10px; }
footer.bg-luxury-surface .tv-dl-card { padding: var(--qpad); border-radius: 12px; }
footer.bg-luxury-surface .tv-dl-card img { width: var(--qr); height: var(--qr); }
/* The caption was wider than a small QR card, which widened the whole left
   column and pushed the badges out of the panel. Lock the column to the card
   and let the caption wrap beneath it. */
footer.bg-luxury-surface .tv-dl-qr { width: calc(var(--qr) + 2 * var(--qpad)); }
footer.bg-luxury-surface .tv-dl-cap,
footer.bg-luxury-surface .tv-dl-sub { width: 100%; text-align: center; white-space: normal; line-height: 1.15; }
footer.bg-luxury-surface .tv-dl-badges { gap: 8px; }
footer.bg-luxury-surface .tv-dl-badges > * { width: 110px; }
footer.bg-luxury-surface .tv-dl-cap { font-size: 11px; }
footer.bg-luxury-surface .tv-dl-sub { font-size: 10px; }

/* 262-379px (desktop 4-col, ~274): card 78+12=90 -> 41px -> 146px; total 270 */
@container (min-width: 262px) {
  footer.bg-luxury-surface .tv-dl { --qr: 78px; gap: 10px; padding: 12px; }
  footer.bg-luxury-surface .tv-dl-badges > * { width: 146px; }
  footer.bg-luxury-surface .tv-dl-cap { font-size: 12px; }
}

/* >=380px (phone single column, ~400): card 116+16=132 -> 61px -> 216px; total 392 */
@container (min-width: 380px) {
  footer.bg-luxury-surface .tv-dl { --qr: 116px; --qpad: 8px; gap: 16px; padding: 14px; }
  footer.bg-luxury-surface .tv-dl-card { border-radius: 14px; }
  footer.bg-luxury-surface .tv-dl-badges { gap: 10px; }
  footer.bg-luxury-surface .tv-dl-badges > * { width: 216px; }
  footer.bg-luxury-surface .tv-dl-cap { font-size: 13px; }
  footer.bg-luxury-surface .tv-dl-sub { font-size: 11px; }
}
@media (max-width: 380px) {
  footer.bg-luxury-surface .tv-dl { flex-direction: column; align-items: flex-start; }
}