/* ══════════════════════════════════════════════════════════════════════
   SUPREME DIAMOND DETAILING — iOS 26 LIQUID GLASS DESIGN SYSTEM
   
   Core principles from Apple's Liquid Glass language:
   · Translucent surfaces that refract & blur content behind them
   · Elements float in layers — not pinned to a static plane  
   · Controls are bubbles, not bars
   · Generous space — content breathes
   · Fluid motion — cubic-bezier deceleration everywhere
   · Gold as the accent material, not just a color
   ══════════════════════════════════════════════════════════════════════ */

/* ─── REFERRAL PROGRAM ──────────────────────────────────────────────── */
#referral {
  padding: 5.5rem 2rem;
  background: linear-gradient(180deg, var(--navy-2) 0%, var(--navy-3) 100%);
  position: relative; overflow: hidden;
}
#referral::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,transparent,rgba(200,168,75,.15),transparent);
}
.referral-inner { max-width: 1000px; margin: 0 auto; }
.referral-cards { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.5rem; align-items: center; margin: 2.5rem 0; }
.referral-card {
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(50px) saturate(2); -webkit-backdrop-filter: blur(50px) saturate(2);
  border: 1px solid rgba(255,255,255,.09); border-radius: var(--radius);
  padding: 2.2rem 2rem; text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 8px 32px rgba(0,0,0,.25);
  transition: transform .4s var(--ease), border-color .4s;
}
.referral-card:hover { transform: translateY(-5px); border-color: rgba(200,168,75,.22); }
.referral-card.gold-card {
  background: rgba(200,168,75,.08);
  border-color: rgba(200,168,75,.25);
  box-shadow: inset 0 1px 0 rgba(255,220,120,.15), 0 8px 32px rgba(200,168,75,.12);
}
.referral-amount {
  font-family: var(--font-accent); font-size: 3.8rem; font-weight: 700; line-height: 1;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: .4rem;
}
.referral-card-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--silver-light); margin-bottom: .5rem; }
.referral-card-desc { font-size: .85rem; color: var(--silver-muted); line-height: 1.7; }
.referral-arrow { font-size: 2rem; color: rgba(200,168,75,.4); text-align: center; flex-shrink: 0; }
.referral-how { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin: 2rem 0; }
.referral-step {
  display: flex; align-items: center; gap: .7rem;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-sm); padding: .8rem 1.2rem;
  font-size: .82rem; color: var(--silver-muted); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.referral-step-num {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: rgba(200,168,75,.15); border: 1px solid rgba(200,168,75,.3);
  color: var(--gold); font-size: .7rem; font-weight: 800; font-family: var(--font-ui);
  display: flex; align-items: center; justify-content: center;
}
@media(max-width:640px){ .referral-cards{grid-template-columns:1fr;} .referral-arrow{transform:rotate(90deg);} }

/* ─── SMS STRIP ──────────────────────────────────────────────────────── */
#sms-strip {
  padding: 2rem 2rem;
  background: linear-gradient(90deg, #060e1a 0%, #08111e 50%, #060e1a 100%);
  border-top: 1px solid rgba(37,99,235,.2); border-bottom: 1px solid rgba(37,99,235,.2);
}
.sms-inner { max-width: 760px; margin: 0 auto; display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; justify-content: center; text-align: center; }
.sms-icon { font-size: 2.2rem; flex-shrink: 0; }
.sms-text h4 { font-family: var(--font-display); font-size: 1.15rem; color: #ffffff; margin-bottom: .3rem; }
.sms-text p { font-size: .88rem; color: var(--silver-dim); line-height: 1.65; }
.sms-text strong { color: #93c5fd; }
.sms-cta {
  display: inline-flex; align-items: center; gap: .5rem; flex-shrink: 0;
  background: rgba(37,99,235,.18); border: 1px solid rgba(37,99,235,.35);
  color: #93c5fd; font-family: var(--font-ui); font-size: .72rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; padding: .75rem 1.6rem;
  border-radius: 50px; text-decoration: none; transition: all .28s var(--ease);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: inset 0 1px 0 rgba(147,197,253,.12), 0 4px 18px rgba(37,99,235,.2);
}
.sms-cta:hover { background: rgba(37,99,235,.28); border-color: rgba(37,99,235,.55); transform: translateY(-2px); }

/* ─── VEHICLE HISTORY PROFILE ────────────────────────────────────────── */
#vehicle-history {
  padding: 5.5rem 2rem;
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
  position: relative;
}
#vehicle-history::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(200,168,75,.15),transparent); }
.vh-inner { max-width: 1060px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.vh-mockup {
  background: rgba(255,255,255,.04); backdrop-filter: blur(50px) saturate(2); -webkit-backdrop-filter: blur(50px) saturate(2);
  border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius);
  overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 24px 64px rgba(0,0,0,.4);
}
.vh-mockup-header {
  background: rgba(200,168,75,.1); border-bottom: 1px solid rgba(200,168,75,.15);
  padding: 1rem 1.4rem; display: flex; align-items: center; gap: .8rem;
}
.vh-mockup-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(200,168,75,.5); }
.vh-mockup-title { font-family: var(--font-accent); font-size: .62rem; letter-spacing: .18em; color: var(--gold); }
.vh-mockup-body { padding: 1.4rem; }
.vh-entry {
  display: flex; gap: 1rem; align-items: flex-start; padding: .85rem 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.vh-entry:last-child { border-bottom: none; }
.vh-entry-date { font-size: .62rem; color: var(--silver-muted); font-family: var(--font-ui); letter-spacing: .06em; white-space: nowrap; padding-top: .1rem; min-width: 70px; }
.vh-entry-badge {
  font-size: .54rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  padding: .18rem .55rem; border-radius: 4px; white-space: nowrap; flex-shrink: 0;
}
.vh-badge-gold { background: rgba(200,168,75,.15); color: var(--gold); border: 1px solid rgba(200,168,75,.2); }
.vh-badge-blue { background: rgba(37,99,235,.15); color: #93c5fd; border: 1px solid rgba(37,99,235,.2); }
.vh-badge-green { background: rgba(22,163,74,.15); color: #4ade80; border: 1px solid rgba(22,163,74,.2); }
.vh-entry-desc { font-size: .82rem; color: var(--silver-muted); line-height: 1.55; }
.vh-perks { display: flex; flex-direction: column; gap: .75rem; margin-top: 1.5rem; }
.vh-perk { display: flex; align-items: flex-start; gap: .8rem; }
.vh-perk-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: .05rem; }
.vh-perk-text strong { display: block; font-family: var(--font-display); font-size: .95rem; color: var(--silver-light); margin-bottom: .18rem; }
.vh-perk-text span { font-size: .85rem; color: var(--silver-muted); line-height: 1.65; }
@media(max-width:768px){ .vh-inner{grid-template-columns:1fr;} }

/* ─── TRUST TICKER BAR ──────────────────────────────────────────────── */
#trust-ticker {
  background: linear-gradient(90deg, rgba(200,168,75,.12) 0%, rgba(200,168,75,.07) 50%, rgba(200,168,75,.12) 100%);
  border-bottom: 1px solid rgba(200,168,75,.18);
  padding: .4rem 1rem;
  overflow: hidden; white-space: nowrap;
  font-family: var(--font-ui); font-size: .62rem; letter-spacing: .18em;
  color: rgba(200,168,75,.75); text-transform: uppercase; font-weight: 600;
  position: relative; z-index: 201;
}
#trust-ticker .ticker-inner {
  display: inline-block;
  animation: tickerScroll 34s linear infinite;
}
#trust-ticker .ticker-inner:hover { animation-play-state: paused; }
@keyframes tickerScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ─── GUARANTEE SECTION ─────────────────────────────────────────────── */
#guarantee {
  padding: 4rem 2rem;
  background: linear-gradient(135deg, #0d1e2e 0%, #0a1825 50%, #0d1e2e 100%);
  border-top: 1px solid rgba(200,168,75,.18);
  border-bottom: 1px solid rgba(200,168,75,.18);
  position: relative; overflow: hidden;
}
#guarantee::before {
  content: '◆';
  position: absolute; right: 4rem; top: 50%; transform: translateY(-50%);
  font-size: 12rem; color: rgba(200,168,75,.03); line-height: 1; pointer-events: none;
}
.guarantee-inner { max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr auto; gap: 3rem; align-items: center; }
.guarantee-seal {
  width: 110px; height: 110px; border-radius: 50%;
  background: radial-gradient(circle, rgba(200,168,75,.15) 0%, rgba(200,168,75,.05) 100%);
  border: 2px solid rgba(200,168,75,.3);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 0 0 6px rgba(200,168,75,.06), inset 0 2px 0 rgba(255,220,120,.2);
  text-align: center; flex-shrink: 0;
}
.guarantee-seal-icon { font-size: 2rem; display: block; }
.guarantee-seal-text { font-family: var(--font-accent); font-size: .5rem; letter-spacing: .2em; color: var(--gold); text-transform: uppercase; margin-top: .3rem; }
.guarantee-text h3 { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; color: var(--silver-light); margin-bottom: .5rem; }
.guarantee-text h3 em { font-style: italic; color: var(--gold-light); }
.guarantee-text p { font-size: .95rem; color: var(--silver-dim); line-height: 1.75; }
.guarantee-badges { display: flex; flex-direction: column; gap: .65rem; flex-shrink: 0; }
.guarantee-badge {
  display: flex; align-items: center; gap: .6rem;
  background: rgba(255,255,255,.04); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
  border: 1px solid rgba(200,168,75,.2); border-radius: var(--radius-sm);
  padding: .6rem .9rem; font-size: .72rem; color: var(--silver-dim); font-weight: 500;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
.guarantee-badge svg { color: var(--gold); flex-shrink: 0; }
@media(max-width:768px){ .guarantee-inner{grid-template-columns:1fr;text-align:center;} .guarantee-seal{margin:0 auto;} .guarantee-badges{flex-direction:row;flex-wrap:wrap;justify-content:center;} }

/* ─── COMPETITOR COMPARISON TABLE ───────────────────────────────────── */
#vs-section {
  padding: 4rem 2rem 3rem;
  background: linear-gradient(180deg, var(--navy-3) 0%, var(--navy-2) 100%);
  position: relative;
}
#vs-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg,transparent,rgba(200,168,75,.15),transparent); }
.vs-table-wrap { max-width: 900px; margin: 0 auto; border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(200,168,75,.15); box-shadow: 0 24px 64px rgba(0,0,0,.4); }
.vs-row { display: grid; grid-template-columns: 2fr repeat(3,1fr); }
.vs-row.header {
  background: rgba(200,168,75,.1); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);
  border-bottom: 1px solid rgba(200,168,75,.2);
}
.vs-row:not(.header) { background: rgba(255,255,255,.03); border-bottom: 1px solid rgba(255,255,255,.05); }
.vs-row:not(.header):hover { background: rgba(255,255,255,.05); }
.vs-row:last-child { border-bottom: none; }
.vs-cell { padding: .9rem 1.2rem; display: flex; align-items: center; justify-content: center; font-size: .82rem; color: var(--silver-muted); border-right: 1px solid rgba(255,255,255,.05); }
.vs-cell:last-child { border-right: none; }
.vs-cell.feature { justify-content: flex-start; font-weight: 500; color: var(--silver-dim); padding-left: 1.6rem; }
.vs-cell.sdd { color: var(--gold-light); font-weight: 700; background: rgba(200,168,75,.06); }
.vs-cell.header-cell { font-family: var(--font-ui); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }
.vs-cell.header-cell.sdd { color: var(--gold); font-size: .64rem; }
.vs-check-yes { color: #22c55e; font-size: 1.1rem; }
.vs-check-no  { color: rgba(255,100,100,.5); font-size: 1.1rem; }
.vs-check-part{ color: rgba(200,168,75,.7); font-size: .8rem; font-weight: 700; }
@media(max-width:640px){
  .vs-cell.feature { font-size:.75rem; padding-left:.9rem; }
  .vs-cell { padding:.75rem .7rem; font-size:.75rem; }
}

/* ─── EV/GREEN CALLOUT STRIP ─────────────────────────────────────────── */
#ev-strip {
  padding: 2.5rem 2rem;
  background: linear-gradient(90deg, #061a0e 0%, #081f11 50%, #061a0e 100%);
  border-top: 1px solid rgba(22,163,74,.25); border-bottom: 1px solid rgba(22,163,74,.25);
}
.ev-inner { max-width: 960px; margin: 0 auto; display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; justify-content: center; }
.ev-badge {
  background: linear-gradient(135deg, #15803d, #16a34a);
  color: #fff; font-family: var(--font-ui); font-size: .6rem; font-weight: 800;
  letter-spacing: .22em; text-transform: uppercase; padding: .38rem 1rem;
  border-radius: 50px; white-space: nowrap; flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(22,163,74,.3);
}
.ev-text { font-size: .95rem; color: var(--silver-dim); line-height: 1.75; }
.ev-text strong { color: #4ade80; }

/* ─── URGENCY CTA STRIP ──────────────────────────────────────────────── */
#urgency-cta {
  padding: 3rem 2rem;
  background: linear-gradient(135deg, #0d1825 0%, #0a1420 60%, #0d1825 100%);
  border-top: 1px solid rgba(200,168,75,.2); border-bottom: 1px solid rgba(200,168,75,.2);
  text-align: center; position: relative; overflow: hidden;
}
#urgency-cta::before {
  content: 'BOOK NOW'; position: absolute; left: -1rem; top: 50%; transform: translateY(-50%);
  font-family: var(--font-accent); font-size: 7rem; font-weight: 900;
  color: rgba(200,168,75,.06); white-space: nowrap; pointer-events: none; line-height: 1;
}
.urg-inner { position: relative; z-index: 1; }
.urg-tagline { font-family: var(--font-serif); font-style: italic; font-size: 1.3rem; color: var(--silver-dim); margin-bottom: 1rem; }
.urg-tagline strong { color: var(--gold-light); font-style: normal; }
.urg-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ─── LIQUID GLASS MATERIAL SYSTEM ─────────────────────────────────── */

/* 3 glass tiers — like iOS layering */
.glass-1 {
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(40px) saturate(1.8) brightness(1.05);
  -webkit-backdrop-filter: blur(40px) saturate(1.8) brightness(1.05);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.08),
    0 8px 32px rgba(0,0,0,.28);
}
.glass-2 {
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(60px) saturate(2) brightness(1.08);
  -webkit-backdrop-filter: blur(60px) saturate(2) brightness(1.08);
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: 
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -1px 0 rgba(0,0,0,.06),
    0 12px 40px rgba(0,0,0,.32);
}
.glass-gold {
  background: rgba(200,168,75,.12);
  backdrop-filter: blur(40px) saturate(2);
  -webkit-backdrop-filter: blur(40px) saturate(2);
  border: 1px solid rgba(200,168,75,.28);
  box-shadow: 
    inset 0 1px 0 rgba(255,220,120,.2),
    0 8px 30px rgba(200,168,75,.15);
}

/* ─── ROOT / BASE ──────────────────────────────────────────────────── */
:root {
  --navy:    #02060c;
  --navy-2:  #060e18;
  --navy-3:  #0a1825;
  --navy-4:  #102030;
  --silver:  #f0f5f8;
  --silver-light: #ffffff;
  --silver-dim:   #c8dce8;
  --silver-muted: #7a9ab8;
  --gold:         #c8a84b;
  --gold-light:   #e8c96a;
  --gold-bright:  #f8e080;
  --gold-dim:     #7a6020;
  --radius:    20px;
  --radius-sm: 14px;
  --radius-xs:  8px;
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --safe-top:    env(safe-area-inset-top,0px);
  --safe-bottom: env(safe-area-inset-bottom,0px);
  --font-display: 'Playfair Display',serif;
  --font-ui:      'DM Sans',sans-serif;
  --font-serif:   'Cormorant Garamond',serif;
  --font-accent:  'Cinzel',serif;
  --transition: all .4s var(--ease);
}

/* ─── BASE ─────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html,body { overflow-x: hidden; max-width: 100%; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }
img, video, iframe, svg { max-width: 100%; height: auto; }
section { overflow-x: clip; } div { max-width: 100%; }
body {
  font-family: var(--font-ui);
  line-height: 1.75;
  color: var(--silver-dim);
  background: var(--navy);
  overflow-x: hidden;
  /* Subtle grain — iOS texture */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.022'/%3E%3C/svg%3E");
  background-size: 200px;
}
::selection { background: rgba(200,168,75,.22); color: #fff; }
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--navy); }
::-webkit-scrollbar-thumb { background: rgba(200,168,75,.28); border-radius: 2px; }
h1,h2,h3,h4 { color: var(--silver-light); }
p { line-height: 1.78; }
a:focus-visible,button:focus-visible {
  outline: 1.5px solid rgba(200,168,75,.5);
  outline-offset: 3px; border-radius: 6px;
}
section { scroll-margin-top: 80px; }

/* ─── ANIMATIONS ───────────────────────────────────────────────────── */
@keyframes fadeup   { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }
@keyframes fadein   { from{opacity:0} to{opacity:1} }
@keyframes floatY   { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(-7px)} }
@keyframes sbar     { 0%{transform:scaleY(0);transform-origin:top;opacity:0} 20%{opacity:1} 50%{transform:scaleY(1);transform-origin:top;opacity:1} 51%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom;opacity:0} }
@keyframes pring    { from{transform:scale(.95);opacity:.7} to{transform:scale(1.65);opacity:0} }
@keyframes goldPulse{ 0%,100%{box-shadow:0 6px 28px rgba(200,168,75,.42)} 50%{box-shadow:0 6px 28px rgba(200,168,75,.42),0 0 0 8px rgba(200,168,75,0)} }
@keyframes shimmer  { 0%{background-position:-200% center} 100%{background-position:200% center} }
@keyframes sddot    { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-4px)} }

/* ─── REVEAL ──────────────────────────────────────────────────────── */
.reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity .72s var(--ease), transform .72s var(--ease);
}
.reveal.visible { opacity: 1; transform: none; }
.reveal.rd1 { transition-delay: .12s; }
.reveal.rd2 { transition-delay: .24s; }
.reveal.rd3 { transition-delay: .36s; }

/* ─── EYEBROW / SECTION HEADER ─────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-ui);
  font-size: .6rem; letter-spacing: .44em; text-transform: uppercase;
  color: var(--gold); font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  margin-bottom: .85rem;
}
.eyebrow::before,.eyebrow::after {
  content: ''; display: inline-block; width: 24px; height: 1px;
  background: rgba(200,168,75,.4);
}
.sec-title {
  font-family: var(--font-display);
  font-size: clamp(1.85rem,3.2vw,2.8rem);
  font-weight: 600; color: var(--silver-light);
  letter-spacing: .01em; line-height: 1.08; text-align: center;
}
.sec-title em { font-style: italic; font-weight: 400; color: var(--gold-light); }
.sec-sub {
  font-family: var(--font-serif); font-style: italic;
  font-size: 1rem; color: rgba(200,218,230,.6);
  text-align: center; margin-top: .8rem; line-height: 1.72;
}
.sec-head { text-align: center; margin-bottom: 3rem; }

/* ─── DIVIDER ──────────────────────────────────────────────────────── */
.divider-gold {
  height: 1px;
  background: linear-gradient(90deg,transparent 0%,rgba(200,168,75,.18) 30%,rgba(200,168,75,.3) 50%,rgba(200,168,75,.18) 70%,transparent 100%);
}

/* ─── BUTTONS — Liquid Glass pills ──────────────────────────────────── */
.btn-gold {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 46px; padding: .9rem 2.2rem;
  background: linear-gradient(135deg, rgba(240,200,100,.9) 0%, rgba(200,160,60,.95) 100%);
  color: #0a1a0a;
  font-family: var(--font-ui); font-size: .76rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  border-radius: 50px; text-decoration: none; border: none; cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,240,160,.4),
    0 4px 20px rgba(200,168,75,.3),
    0 1px 3px rgba(0,0,0,.2);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  position: relative; overflow: hidden;
}
.btn-gold::after {
  content: ''; position: absolute; inset: 0; border-radius: 50px;
  background: linear-gradient(135deg,rgba(255,255,255,.18),transparent 55%);
  pointer-events: none;
}
.btn-gold:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: inset 0 1px 0 rgba(255,240,160,.4), 0 8px 32px rgba(200,168,75,.5), 0 2px 6px rgba(0,0,0,.25);
}
.btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 46px; padding: .88rem 2rem;
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(40px) saturate(1.8); -webkit-backdrop-filter: blur(40px) saturate(1.8);
  color: var(--gold);
  font-family: var(--font-ui); font-size: .74rem; font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase;
  border: 1px solid rgba(200,168,75,.3); border-radius: 50px;
  text-decoration: none; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 12px rgba(0,0,0,.2);
  transition: all .3s var(--ease);
}
.btn-outline:hover {
  background: rgba(200,168,75,.12);
  border-color: rgba(200,168,75,.55);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 6px 22px rgba(200,168,75,.18);
}

/* ─── NAV — Floating glass capsule ────────────────────────────────── */
#topnav {
  position: fixed; top: 30px; left: 0; right: 0; z-index: 200;
  padding: calc(.85rem + var(--safe-top)) 2rem .85rem;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(4,10,20,.88);
  backdrop-filter: blur(50px) saturate(2.2); -webkit-backdrop-filter: blur(50px) saturate(2.2);
  border-bottom: 1px solid rgba(200,168,75,.1);
  transition: padding .35s var(--ease), background .35s;
}
#topnav.scrolled {
  padding-top: calc(.4rem + var(--safe-top)) !important;
  padding-bottom: .4rem !important;
  background: rgba(2,6,12,.96) !important;
  box-shadow: 0 1px 0 rgba(200,168,75,.1), 0 4px 30px rgba(0,0,0,.5);
}
.nav-logo { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.nav-diamond { width: 28px; height: 32px; transition: opacity .25s; }
.nav-logo:hover .nav-diamond { opacity: .75; }
.nav-wordmark {
  font-family: var(--font-accent); font-size: .7rem;
  letter-spacing: .1em; color: var(--silver-light); font-weight: 600;
  display: flex; flex-direction: column; line-height: 1.2;
}
.nav-wordmark small {
  font-size: .5rem; letter-spacing: .2em; color: var(--gold);
  font-family: var(--font-ui); font-weight: 400; opacity: .75;
}
.nav-desktop { display: flex; align-items: center; gap: 2rem; }
.nav-desktop a {
  font-family: var(--font-ui); font-size: .64rem; letter-spacing: .18em;
  font-weight: 500; text-transform: uppercase;
  color: var(--silver-muted); text-decoration: none;
  position: relative; transition: color .25s; padding: .2rem 0;
}
.nav-desktop a::after {
  content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: center;
  transition: transform .3s var(--ease);
}
.nav-desktop a:hover { color: var(--gold-light); }
.nav-desktop a:hover::after { transform: scaleX(1); }
.nav-book {
  background: rgba(200,168,75,.12) !important;
  border: 1px solid rgba(200,168,75,.28) !important;
  color: var(--gold) !important;
  border-radius: 50px !important;
  padding: .38rem 1.1rem !important;
  backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important;
  transition: all .28s var(--ease) !important;
}
.nav-book:hover {
  background: rgba(200,168,75,.2) !important;
  border-color: rgba(200,168,75,.5) !important;
}
.nav-book::after { display: none !important; }
.ham-btn {
  display: none; background: none; border: none; cursor: pointer;
  width: 44px; height: 44px; align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
}
.ham-btn span {
  display: block; width: 22px; height: 1.5px;
  background: var(--silver-dim); transition: all .3s var(--ease); transform-origin: center;
}
@media(max-width:900px) { .nav-desktop{display:none;} .ham-btn{display:flex;} }

/* ─── DRAWER ───────────────────────────────────────────────────────── */
#sideDrawer {
  position: fixed; top: 0; right: 0;
  width: min(340px,100vw); height: 100%; z-index: 300;
  background: rgba(3,8,16,.97);
  backdrop-filter: blur(60px) saturate(2); -webkit-backdrop-filter: blur(60px) saturate(2);
  border-left: 1px solid rgba(200,168,75,.12);
  transform: translateX(100%); transition: transform .44s var(--ease);
  display: flex; flex-direction: column;
  padding-top: calc(1.5rem + var(--safe-top));
}
#sideDrawer.open { transform: translateX(0); }
.drawer-close {
  position: absolute; top: calc(1rem + var(--safe-top)); right: 1.2rem;
  background: none; border: none; color: var(--silver-muted); font-size: 1.4rem;
  cursor: pointer; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center; transition: color .2s;
}
.drawer-close:hover { color: var(--gold); }
.drawer-links { flex: 1; overflow-y: auto; padding: 1rem 0; display: flex; flex-direction: column; }
.drawer-link {
  font-family: var(--font-ui); font-size: .76rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--silver-muted); text-decoration: none;
  padding: .95rem 2rem; border-bottom: 1px solid rgba(197,210,220,.05);
  display: flex; align-items: center; gap: .8rem;
  transition: all .22s var(--ease);
}
.drawer-link:hover { color: var(--gold-light); padding-left: 2.4rem; background: rgba(200,168,75,.04); }
.drawer-icon { font-size: .95rem; width: 20px; text-align: center; }
.drawer-foot { padding: 1.5rem 2rem calc(1.5rem + var(--safe-bottom)); }
.drawer-book {
  display: flex; align-items: center; justify-content: center;
  background: var(--gold); color: #040a04;
  font-family: var(--font-ui); font-size: .7rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  padding: .88rem; border-radius: 50px; text-decoration: none;
  margin-bottom: .7rem; transition: background .25s;
}
.drawer-book:hover { background: var(--gold-light); }
.drawer-call {
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(200,168,75,.3); color: var(--gold);
  font-family: var(--font-ui); font-size: .7rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  padding: .84rem; border-radius: 50px; text-decoration: none;
  margin-bottom: 1rem; transition: all .25s;
}
.drawer-call:hover { background: rgba(200,168,75,.08); }
.drawer-socials { display: flex; justify-content: center; gap: .5rem; }
.drawer-social-icon {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(197,210,220,.06); border: 1px solid rgba(197,210,220,.1);
  font-size: .9rem; text-decoration: none; transition: all .22s;
}
.drawer-social-icon:hover { border-color: rgba(200,168,75,.3); background: rgba(200,168,75,.08); }
#drawerOverlay {
  position: fixed; inset: 0; z-index: 290; background: rgba(0,0,0,.7);
  backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity .35s;
}
#drawerOverlay.open { opacity: 1; pointer-events: all; }

/* ─── HERO ─────────────────────────────────────────────────────────── */
#hero {
  min-height: 92svh; display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  padding: calc(5rem + var(--safe-top)) 2rem 3.5rem;
}
.hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 65% at 50% 15%, rgba(18,40,62,.9), transparent 65%),
    radial-gradient(ellipse 55% 45% at 5% 100%, rgba(200,168,75,.05), transparent 55%),
    radial-gradient(ellipse 55% 45% at 95% 5%, rgba(200,168,75,.04), transparent 55%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
}
.hero-grid {
  position: absolute; inset: 0; opacity: .022;
  background-image:
    linear-gradient(rgba(200,168,75,.6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,168,75,.6) 1px, transparent 1px);
  background-size: 72px 72px;
}
.ring {
  position: absolute; left: 50%; top: 46%;
  border-radius: 50%; border: 1px solid rgba(200,168,75,.1);
  transform: translate(-50%,-50%); pointer-events: none;
}
.ring.r1 { width:280px;height:280px; animation:pring 5s ease-out infinite; }
.ring.r2 { width:520px;height:520px; animation:pring 5s ease-out 1.3s infinite; }
.ring.r3 { width:800px;height:800px; animation:pring 5s ease-out 2.6s infinite; }
.ring.r4 { width:1100px;height:1100px; animation:pring 5s ease-out 3.9s infinite; }
.hero-content {
  position: relative; z-index: 2; text-align: center;
  max-width: 900px; display: flex; flex-direction: column; align-items: center;
}
.hero-pill {
  font-family: var(--font-ui); font-size: .58rem; letter-spacing: .36em; text-transform: uppercase;
  color: var(--gold); font-weight: 600;
  /* Liquid Glass pill */
  background: rgba(200,168,75,.1);
  backdrop-filter: blur(40px) saturate(2); -webkit-backdrop-filter: blur(40px) saturate(2);
  border: 1px solid rgba(200,168,75,.25);
  border-radius: 50px; padding: .38rem 1.2rem;
  box-shadow: inset 0 1px 0 rgba(255,220,120,.15), 0 2px 12px rgba(200,168,75,.12);
  margin-bottom: 1.5rem; display: inline-block;
  animation: fadeup .9s var(--ease) .2s both;
}
.hero-h1 {
  font-family: var(--font-display);
  font-size: clamp(3.5rem,11vw,9rem);
  font-weight: 700; line-height: .88; letter-spacing: .02em; color: var(--silver-light);
  animation: fadeup .9s var(--ease) .34s both;
}
.hero-h1 em {
  display: block; font-style: italic; font-weight: 400; letter-spacing: .05em;
  background: linear-gradient(135deg,var(--gold-bright) 0%,var(--gold-light) 40%,var(--gold) 85%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-subtitle {
  font-family: var(--font-accent); font-size: clamp(.65rem,1.4vw,.9rem);
  letter-spacing: .62em; text-transform: uppercase; color: rgba(200,168,75,.5);
  margin-top: .5rem; animation: fadeup .9s var(--ease) .46s both;
}
.hero-tagline {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(1rem,2vw,1.28rem); color: rgba(196,216,228,.62);
  letter-spacing: .04em; line-height: 1.58;
  margin: 1.5rem 0 2rem;
  animation: fadeup .9s var(--ease) .56s both;
}
.hero-vehicles {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: .25rem .7rem; margin-bottom: 2.4rem;
  animation: fadeup .9s var(--ease) .66s both;
}
.hero-vehicles span {
  font-size: .6rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(155,180,200,.42); font-weight: 400;
}
.hero-btns {
  display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap;
  animation: fadeup .9s var(--ease) .76s both; margin-bottom: 4.5rem;
}
.hero-scroll {
  position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .48rem;
  color: rgba(155,180,200,.42); text-decoration: none; z-index: 3;
  animation: fadeup .9s var(--ease) 1.2s both, floatY 3s ease-in-out 2.2s infinite;
  white-space: nowrap; transition: color .25s;
}
.hero-scroll:hover { color: var(--gold); }
.hero-scroll span { font-size: .5rem; letter-spacing: .3em; text-transform: uppercase; }
.scroll-bar { width: 1px; height: 30px; background: linear-gradient(to bottom,var(--gold),transparent); animation: sbar 2.4s ease-in-out infinite; }

/* ─── WHY — Liquid Glass cards ─────────────────────────────────────── */
#why {
  padding: 3.5rem 2rem;
  background: linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 100%);
  position: relative;
}
#why::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,transparent,rgba(200,168,75,.16),transparent);
}
.why-inner {
  max-width: 1080px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4,1fr); gap: 1.2rem;
}
.why-card {
  /* Liquid Glass */
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(40px) saturate(1.8); -webkit-backdrop-filter: blur(40px) saturate(1.8);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius);
  padding: 2rem 1.6rem; text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 4px 24px rgba(0,0,0,.22);
  position: relative; overflow: hidden;
  transition: transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.why-card::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg,transparent,rgba(200,168,75,.5),transparent);
  opacity: 0; transition: opacity .4s;
}
.why-card:hover {
  transform: translateY(-7px) scale(1.02);
  border-color: rgba(200,168,75,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 24px 56px rgba(0,0,0,.45), 0 0 0 1px rgba(200,168,75,.08);
}
.why-card:hover::after { opacity: 1; }
.why-num {
  font-family: var(--font-accent); font-size: 2.9rem; font-weight: 700; line-height: 1;
  background: linear-gradient(135deg,var(--gold-bright),var(--gold),#9a7020);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: .6rem; letter-spacing: .03em; display: block;
}
.why-label { font-family: var(--font-display); font-size: .98rem; font-weight: 600; color: var(--silver-light); letter-spacing: .02em; margin-bottom: .5rem; }
.why-desc  { font-size: .86rem; line-height: 1.72; color: var(--silver-muted); font-weight: 300; }
@media(max-width:900px) { .why-inner{grid-template-columns:repeat(2,1fr);} }
@media(max-width:480px) { .why-inner{grid-template-columns:1fr;} }

/* ─── SERVICE AREA ─────────────────────────────────────────────────── */
#service-area {
  padding: 6rem 2rem;
  background: linear-gradient(180deg,var(--navy-2) 0%,var(--navy-3) 100%);
}
.sa-home {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  /* Liquid Glass gold tint */
  background: rgba(200,168,75,.08);
  backdrop-filter: blur(40px) saturate(2); -webkit-backdrop-filter: blur(40px) saturate(2);
  border: 1px solid rgba(200,168,75,.22);
  border-radius: var(--radius);
  padding: 1.6rem 2rem; margin-bottom: 1.3rem;
  box-shadow: inset 0 1px 0 rgba(255,220,120,.15), 0 4px 24px rgba(200,168,75,.08);
}
.sa-home-badge { font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); font-weight: 700; font-family: var(--font-ui); display: block; margin-bottom: .5rem; }
.sa-home-name  { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--silver-light); margin-bottom: .32rem; }
.sa-home-cities{ font-size: .88rem; color: var(--silver-muted); line-height: 1.65; }
.sa-home-tag   { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(200,168,75,.48); font-weight: 600; font-family: var(--font-ui); white-space: nowrap; flex-shrink: 0; }
.sa-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 1rem; margin-bottom: 2rem; }
.sa-card {
  /* Liquid Glass */
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(40px) saturate(1.8); -webkit-backdrop-filter: blur(40px) saturate(1.8);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius); padding: 1.6rem 1.3rem; text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 4px 20px rgba(0,0,0,.2);
  transition: transform .4s var(--ease), border-color .4s, box-shadow .4s; position: relative;
}
.sa-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg,transparent,rgba(200,168,75,.4),transparent);
  opacity: 0; transition: opacity .4s; border-radius: var(--radius) var(--radius) 0 0;
}
.sa-card:hover { transform: translateY(-5px); border-color: rgba(200,168,75,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 18px 42px rgba(0,0,0,.38); }
.sa-card:hover::before { opacity: 1; }
.sa-icon   { font-size: 1.8rem; margin-bottom: .65rem; line-height: 1; }
.sa-name   { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--silver-light); margin-bottom: .38rem; letter-spacing: .01em; }
.sa-cities { font-size: .78rem; color: var(--silver-muted); line-height: 1.65; margin-bottom: .85rem; }
.sa-badge  { display: inline-block; font-size: .54rem; letter-spacing: .18em; text-transform: uppercase; background: rgba(200,168,75,.1); border: 1px solid rgba(200,168,75,.2); color: var(--gold); border-radius: 50px; padding: .2rem .65rem; font-weight: 600; font-family: var(--font-ui); }
.sa-trust  { display: flex; align-items: center; justify-content: center; gap: .85rem; flex-wrap: wrap; font-size: .82rem; color: var(--silver-muted); }
.sa-dot    { color: rgba(200,168,75,.3); }
.sa-trust-link { color: var(--gold); text-decoration: none; transition: color .2s; }
.sa-trust-link:hover { color: var(--gold-light); }
@media(max-width:900px) { .sa-grid{grid-template-columns:repeat(3,1fr);} .sa-home{flex-direction:column;align-items:flex-start;gap:.8rem;} }
@media(max-width:580px) { .sa-grid{grid-template-columns:repeat(2,1fr);} }

/* ─── PACKAGES ─────────────────────────────────────────────────────── */
#packages {
  padding: 6rem 2rem;
  background: var(--navy-2); position: relative;
}
#packages::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 800px;
  background: radial-gradient(ellipse 70% 50% at 50% 0%,rgba(200,168,75,.03),transparent);
  pointer-events: none;
}
.pkg-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: .4rem; margin-bottom: 2.8rem; }
.pkg-tab {
  font-family: var(--font-ui); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600; padding: .46rem 1.15rem; border-radius: 50px;
  border: 1px solid rgba(255,255,255,.08); color: var(--silver-muted);
  /* Liquid Glass pill */
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
  cursor: pointer; min-height: 36px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: all .28s var(--ease);
}
.pkg-tab:hover { border-color: rgba(200,168,75,.28); color: var(--gold); }
.pkg-tab.active {
  background: rgba(200,168,75,.14);
  border-color: rgba(200,168,75,.4); color: var(--gold-light);
  box-shadow: inset 0 1px 0 rgba(255,220,120,.18), 0 0 0 1px rgba(200,168,75,.12);
}
#pkg-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; max-width: 1100px; margin: 0 auto; }
.pkg-card {
  /* Liquid Glass */
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(50px) saturate(2); -webkit-backdrop-filter: blur(50px) saturate(2);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius); overflow: visible;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 4px 24px rgba(0,0,0,.22);
  transition: transform .42s var(--ease), border-color .42s, box-shadow .42s;
}
.pkg-card:hover {
  transform: translateY(-7px) scale(1.01);
  border-color: rgba(200,168,75,.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 28px 65px rgba(0,0,0,.5), 0 0 0 1px rgba(200,168,75,.08);
}
.pkg-card.flagship {
  background: rgba(200,168,75,.07);
  border-color: rgba(200,168,75,.25);
}
.pkg-top-bar { height: 2px; background: rgba(255,255,255,.06); }
.pkg-top-bar.gold { background: linear-gradient(90deg,transparent,rgba(200,168,75,.7),transparent); }
.pkg-head { padding: 1.6rem 1.7rem .9rem; display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.pkg-cat  { font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--silver-muted); font-weight: 600; margin-bottom: .38rem; }
.pkg-cat.gold { color: var(--gold); }
.pkg-name { font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; color: var(--silver-light); letter-spacing: .01em; }
.pkg-name.gold { color: var(--gold-light); }
.pkg-tagline { font-family: var(--font-serif); font-style: italic; font-size: .82rem; color: var(--silver-muted); margin-top: .14rem; line-height: 1.55; }
.pkg-emoji { font-size: 1.6rem; flex-shrink: 0; margin-top: .1rem; }
.pkg-price-row { display: flex; align-items: baseline; gap: .4rem; padding: .8rem 1.7rem .7rem; border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); }
.pkg-price-from { font-size: .58rem; letter-spacing: .17em; text-transform: uppercase; color: var(--silver-muted); }
.pkg-price-amt  { font-family: var(--font-display); font-size: 2.2rem; font-weight: 700; color: var(--silver-light); line-height: 1; letter-spacing: .01em; }
.pkg-body { padding: 1.1rem 1.7rem 1.2rem; }
.pkg-li { display: flex; align-items: flex-start; gap: .6rem; font-size: .88rem; color: var(--silver-muted); line-height: 1.62; padding: .32rem 0; border-bottom: 1px solid rgba(255,255,255,.04); }
.pkg-li:last-child { border-bottom: none; }
.pkg-btn { display: block; margin: 0 1.7rem 1.7rem; padding: .88rem; text-align: center; border-radius: var(--radius-sm); font-family: var(--font-ui); font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; transition: all .28s var(--ease); }
.pkg-btn-solid {
  background: linear-gradient(135deg,var(--gold-light),var(--gold));
  color: #040a04;
  box-shadow: inset 0 1px 0 rgba(255,240,160,.3), 0 4px 18px rgba(200,168,75,.32);
}
.pkg-btn-solid:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,240,160,.4), 0 8px 28px rgba(200,168,75,.5); }
.pkg-btn-outline { background: rgba(255,255,255,.04); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.12); color: var(--silver-dim); box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }
.pkg-btn-outline:hover { border-color: rgba(200,168,75,.4); color: var(--gold); background: rgba(200,168,75,.08); }
@media(max-width:1020px) { #pkg-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:640px)  { #pkg-grid{grid-template-columns:1fr;} }

/* ─── SERVICES ─────────────────────────────────────────────────────── */
#services {
  padding: 6rem 2rem;
  background: linear-gradient(180deg,var(--navy-2) 0%,var(--navy-3) 50%,var(--navy-2) 100%);
}
.svc-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; max-width: 1100px; margin: 0 auto; }
.svc-card {
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(50px) saturate(2); -webkit-backdrop-filter: blur(50px) saturate(2);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius); padding: 2.2rem 1.9rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 4px 24px rgba(0,0,0,.2);
  position: relative; overflow: hidden;
  transition: transform .42s var(--ease), border-color .42s, box-shadow .42s;
}
.svc-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg,transparent,rgba(200,168,75,.5),transparent);
  opacity: 0; transition: opacity .42s;
}
.svc-card:hover::before { opacity: 1; }
.svc-card:hover { transform: translateY(-6px); border-color: rgba(200,168,75,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 24px 56px rgba(0,0,0,.45); }
.svc-num  { font-family: var(--font-accent); font-size: .6rem; letter-spacing: .3em; color: rgba(200,168,75,.4); margin-bottom: .75rem; }
.svc-icon { color: var(--gold); opacity: .75; margin-bottom: 1.1rem; width: 28px; height: 28px; transition: opacity .3s,transform .4s var(--ease); }
.svc-card:hover .svc-icon { opacity: 1; transform: scale(1.1); }
.svc-name { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--silver-light); letter-spacing: .01em; margin-bottom: .65rem; }
.svc-desc { font-size: .9rem; line-height: 1.75; color: var(--silver-muted); font-weight: 300; margin-bottom: 1.2rem; }
.svc-features { list-style: none; display: flex; flex-direction: column; gap: .38rem; }
.svc-features li { font-size: .84rem; color: rgba(138,172,196,.92); line-height: 1.6; display: flex; align-items: flex-start; gap: .5rem; }
.svc-features li::before { content: '◆'; font-size: .34rem; color: rgba(200,168,75,.5); flex-shrink: 0; margin-top: .38em; }
@media(max-width:900px) { .svc-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:580px) { .svc-grid{grid-template-columns:1fr;} }

/* ─── GALLERY ──────────────────────────────────────────────────────── */
#gallery { background: var(--navy-3); padding: 0; }
.gallery-header,.gallery-tabs { padding: 0 2rem; }
.gi { position: relative; overflow: hidden; cursor: pointer; }
.gi img { width: 100%; height: 100%; object-fit: cover; transition: transform .78s var(--ease), filter .4s; filter: brightness(.93) saturate(.9); }
.gi:hover img { transform: scale(1.08); filter: brightness(1.05) saturate(1.1); }
.gi-overlay { position: absolute; inset: 0; background: linear-gradient(transparent 30%,rgba(2,6,12,.9)); opacity: 0; transition: opacity .4s; }
.gi:hover .gi-overlay { opacity: 1; }
.gi-label { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.2rem 1rem .9rem; transform: translateY(8px); transition: transform .4s var(--ease); }
.gi:hover .gi-label { transform: translateY(0); }
.gi-label-name { font-family: var(--font-display); font-size: .88rem; font-weight: 600; color: #fff; letter-spacing: .01em; margin-bottom: .18rem; }
.gi-label-tag  { font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.before-badge  { position: absolute; top: .6rem; left: .6rem; background: #ef4444; color: #fff; font-size: .56rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; padding: .18rem .6rem; border-radius: 4px; z-index: 2; }

/* ─── MEMBERSHIP ───────────────────────────────────────────────────── */
#membership { padding: 6rem 2rem; background: linear-gradient(180deg,var(--navy-2) 0%,var(--navy) 100%); position: relative; }
#subCards { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; max-width: 1100px; margin: 0 auto; margin-bottom: 2.5rem; }
#silver-price,#gold-price,#diamond-price { font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; color: var(--silver-light); line-height: 1; }
#compTable > div { padding: .85rem 1.6rem; }
#compTable > div > div { font-size: .85rem; line-height: 1.6; }
@media(max-width:900px) { #subCards{grid-template-columns:repeat(2,1fr) !important;} #subCards>div:nth-child(2){order:-1;} }
@media(max-width:580px) { #subCards{grid-template-columns:1fr !important;} }

/* ─── TESTIMONIALS ─────────────────────────────────────────────────── */
#testimonials { padding: 6rem 2rem; background: rgba(2,5,8,.98); position: relative; }
#testimonials::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg,transparent,rgba(200,168,75,.15),transparent); }
.testi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.3rem; max-width: 1200px; margin: 0 auto; }
.testi-card {
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(50px) saturate(2); -webkit-backdrop-filter: blur(50px) saturate(2);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius); padding: 2rem 1.9rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 4px 20px rgba(0,0,0,.2);
  position: relative; overflow: hidden;
  transition: transform .42s var(--ease), border-color .42s, box-shadow .42s;
}
.testi-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg,transparent,rgba(200,168,75,.28),transparent); opacity: 0; transition: opacity .42s; }
.testi-card:hover::before { opacity: 1; }
.testi-card:hover { transform: translateY(-5px); border-color: rgba(200,168,75,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 22px 52px rgba(0,0,0,.42); }
.testi-stars { font-size: 1rem; letter-spacing: .12rem; margin-bottom: .85rem; background: linear-gradient(90deg,var(--gold-bright),var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.testi-text   { font-family: var(--font-serif); font-style: italic; font-size: 1.02rem; line-height: 1.8; color: rgba(200,218,230,.85); margin-bottom: 1.3rem; }
.testi-sep    { height: 1px; background: rgba(255,255,255,.06); margin-bottom: 1rem; }
.testi-author { font-family: var(--font-display); font-size: .9rem; font-weight: 600; color: var(--silver-light); }
.testi-role   { font-size: .72rem; color: var(--silver-muted); margin-top: .15rem; letter-spacing: .04em; }
@media(max-width:900px) { .testi-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:580px) { .testi-grid{grid-template-columns:1fr;} }

/* ─── CONTACT ──────────────────────────────────────────────────────── */
#contact { padding: 6rem 2rem 5rem; background: var(--navy); }
.contact-inner { max-width: 1100px; margin: 0 auto; }
.contact-grid  { display: grid; grid-template-columns: 1fr 1.1fr; gap: 3rem; align-items: start; }
.ci { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.6rem; }
.ci-icon {
  width: 40px; height: 40px; border-radius: var(--radius-sm); flex-shrink: 0;
  background: rgba(200,168,75,.08); border: 1px solid rgba(200,168,75,.18);
  display: flex; align-items: center; justify-content: center; color: var(--gold);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  transition: all .25s;
}
.ci:hover .ci-icon { background: rgba(200,168,75,.14); border-color: rgba(200,168,75,.3); }
.ci-label { font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(160,185,200,.45); font-weight: 600; margin-bottom: .28rem; }
.ci-value { font-size: .96rem; color: var(--silver-dim); font-weight: 500; line-height: 1.5; text-decoration: none; transition: color .2s; }
a.ci-value:hover { color: var(--gold-light); }
.social-links-grid { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.social-pill {
  font-size: .66rem; letter-spacing: .1em; color: var(--silver-muted);
  background: rgba(255,255,255,.04); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.1); border-radius: 50px;
  padding: .3rem .8rem; text-decoration: none; transition: all .22s var(--ease);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.social-pill:hover { border-color: rgba(200,168,75,.3); color: var(--gold); background: rgba(200,168,75,.07); }
.book-pill { background: rgba(200,168,75,.1); border-color: rgba(200,168,75,.25); color: var(--gold); }
.promise-box { background: rgba(200,168,75,.06); border: 1px solid rgba(200,168,75,.14); border-radius: var(--radius); padding: 1.4rem 1.6rem; margin: 1.5rem 0; box-shadow: inset 0 1px 0 rgba(255,220,120,.1); }
.promise-quote { font-family: var(--font-serif); font-style: italic; font-size: 1.15rem; color: var(--gold-light); margin-bottom: .3rem; }
.promise-by { font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(200,168,75,.5); }
.map-wrap iframe { width: 100%; height: 280px; border-radius: var(--radius); border: 1px solid rgba(200,168,75,.12); display: block; }
.map-link { display: block; text-align: center; font-size: .66rem; letter-spacing: .15em; text-transform: uppercase; color: var(--gold); text-decoration: none; margin-top: .7rem; transition: color .2s; }
.map-link:hover { color: var(--gold-light); }
.contact-form { background: rgba(255,255,255,.04); backdrop-filter: blur(50px) saturate(2); -webkit-backdrop-filter: blur(50px) saturate(2); border: 1px solid rgba(255,255,255,.09); border-radius: var(--radius); padding: 2rem 2rem 1.8rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.09); }
.contact-form input,.contact-form select,.contact-form textarea {
  width: 100%; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-sm); color: var(--silver-dim); font-family: var(--font-ui); font-size: .9rem; padding: .78rem 1rem; margin-bottom: .8rem; outline: none; transition: border-color .22s; -webkit-appearance: none;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus { border-color: rgba(200,168,75,.4); }
.contact-form textarea { height: 110px; resize: vertical; line-height: 1.6; }
.contact-form select { cursor: pointer; }
.contact-form select option { background: var(--navy-3); color: var(--silver-dim); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media(max-width:768px) { .contact-grid{grid-template-columns:1fr;} .form-row{grid-template-columns:1fr;} }

/* ─── VIDEO ─────────────────────────────────────────────────────────── */
#video-section { padding: 5rem 2rem; background: var(--navy-3); }
.vid-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem; max-width: 1200px; margin: 0 auto; }
.vid-card { border-radius: var(--radius); overflow: hidden; position: relative; background: rgba(255,255,255,.04); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,.09); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 4px 20px rgba(0,0,0,.2); transition: border-color .38s,box-shadow .38s,transform .38s var(--ease); }
.vid-card:hover { border-color: rgba(200,168,75,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 16px 42px rgba(0,0,0,.4); transform: translateY(-4px); }
.vid-card video { width: 100%; display: block; }
.vid-card-info { padding: 1rem 1.2rem 1.1rem; }
.vid-card-title { font-family: var(--font-display); font-size: .95rem; font-weight: 600; color: var(--silver-light); margin-bottom: .25rem; }
.vid-card-sub   { font-size: .72rem; letter-spacing: .1em; color: var(--silver-muted); }
@media(max-width:768px) { .vid-grid{grid-template-columns:1fr;} }

/* ─── CERTIFIED ─────────────────────────────────────────────────────── */
#certified { padding: 6rem 2rem; background: linear-gradient(180deg,var(--navy-3) 0%,var(--navy-2) 100%); position: relative; }
#certified::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg,transparent,rgba(200,168,75,.15),transparent); }
.certified-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.2fr; gap: 4rem; align-items: center; }
@media(max-width:768px) { .certified-inner{grid-template-columns:1fr;} }

/* ─── SOCIAL BAR ────────────────────────────────────────────────────── */
#social-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 150;
  padding-bottom: env(safe-area-inset-bottom,0px);
  /* Liquid Glass bar */
  background: rgba(4,10,20,.88);
  backdrop-filter: blur(60px) saturate(2.2); -webkit-backdrop-filter: blur(60px) saturate(2.2);
  border-top: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 -1px 0 rgba(200,168,75,.08), 0 -4px 30px rgba(0,0,0,.4);
}
.socialbar-inner { display: flex; justify-content: center; align-items: center; gap: .35rem; padding: .45rem .8rem; flex-wrap: wrap; }
.socialbar-label { font-size: .54rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(200,168,75,.4); font-weight: 600; margin-right: .4rem; }
.sbar-pill {
  font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
  color: var(--silver-muted); text-decoration: none;
  padding: .36rem .75rem; border-radius: 50px;
  background: rgba(255,255,255,.04); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: all .22s var(--ease); font-family: var(--font-ui);
  min-height: 32px; display: inline-flex; align-items: center;
}
.sbar-pill:hover { color: var(--gold); border-color: rgba(200,168,75,.25); background: rgba(200,168,75,.08); }
.sbar-gold { color: var(--gold); border-color: rgba(200,168,75,.2); background: rgba(200,168,75,.08); }
.sbar-call { color: var(--gold); border-color: rgba(200,168,75,.2); }

/* ─── FOOTER ────────────────────────────────────────────────────────── */
footer { background: var(--navy); border-top: 1px solid rgba(255,255,255,.06); padding: 2.5rem 2rem calc(4.5rem + var(--safe-bottom)); }
.footer-inner { max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: .75rem; text-align: center; }
.footer-brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.footer-name  { font-family: var(--font-display); font-size: .92rem; font-weight: 600; color: var(--silver-light); letter-spacing: .04em; }
.footer-tagline { font-family: var(--font-serif); font-style: italic; font-size: .9rem; color: rgba(200,168,75,.5); }
.footer-links { display: flex; gap: 1.4rem; flex-wrap: wrap; justify-content: center; }
.footer-links a { font-size: .66rem; letter-spacing: .1em; color: rgba(155,180,200,.3); text-decoration: none; transition: color .2s; }
.footer-links a:hover { color: var(--gold); }
.footer-copy { font-size: .68rem; color: rgba(155,180,200,.28); letter-spacing: .06em; }

/* ─── CHAT ──────────────────────────────────────────────────────────── */
#sdChat { position: fixed; bottom: calc(4.5rem + env(safe-area-inset-bottom,0px)); right: 1.5rem; z-index: 500; }
#sdChatBtn {
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg,var(--gold-light),var(--gold));
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; color: #040a04;
  box-shadow: inset 0 1px 0 rgba(255,240,160,.4), 0 6px 28px rgba(200,168,75,.42);
  transition: all .3s var(--ease); position: relative;
  animation: goldPulse 3s ease-in-out infinite;
}
#sdChatBtn:hover { transform: scale(1.08); }
#sdChatBadge { position: absolute; top: -3px; right: -3px; width: 18px; height: 18px; border-radius: 50%; background: #ef4444; color: #fff; font-size: .56rem; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid var(--navy); }
#sdChatPanel { position: absolute; bottom: 66px; right: 0; width: 330px; max-width: calc(100vw - 2rem); background: rgba(4,10,20,.96); backdrop-filter: blur(60px) saturate(2.2); -webkit-backdrop-filter: blur(60px) saturate(2.2); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 24px 70px rgba(0,0,0,.8); display: none; flex-direction: column; overflow: hidden; }
#sdChatPanel.open { display: flex; animation: fadeup .3s var(--ease) both; }
#sdChatHead { padding: .9rem 1.1rem; background: rgba(255,255,255,.03); border-bottom: 1px solid rgba(255,255,255,.07); display: flex; align-items: center; gap: .7rem; }
#sdChatHead img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; object-position: center top; border: 2px solid rgba(200,168,75,.35); }
.sdchat-name { font-family: var(--font-accent); font-size: .74rem; color: #fff; letter-spacing: .06em; }
.sdchat-status { font-size: .58rem; color: #22c55e; display: flex; align-items: center; gap: .3rem; margin-top: .1rem; }
#sdChatClose { margin-left: auto; background: none; border: none; color: var(--silver-muted); font-size: 1rem; cursor: pointer; padding: .2rem; transition: color .2s; }
#sdChatClose:hover { color: var(--gold); }
#sdChatMsgs { flex: 1; overflow-y: auto; padding: .85rem .95rem; display: flex; flex-direction: column; gap: .55rem; max-height: 300px; scrollbar-width: thin; scrollbar-color: rgba(200,168,75,.2) transparent; }
.sdmsg { display: flex; }
.sdmsg.bot { justify-content: flex-start; }
.sdmsg.usr { justify-content: flex-end; }
.sdmsg-bbl { max-width: 84%; padding: .52rem .78rem; border-radius: 12px; font-size: .82rem; line-height: 1.6; font-family: var(--font-ui); }
.sdmsg.bot .sdmsg-bbl { background: rgba(255,255,255,.06); backdrop-filter: blur(20px); color: var(--silver-dim); border-radius: 3px 12px 12px 12px; }
.sdmsg.usr .sdmsg-bbl { background: rgba(200,168,75,.16); color: var(--gold-light); border: 1px solid rgba(200,168,75,.22); border-radius: 12px 12px 3px 12px; }
.sdtyping { display: flex; gap: 4px; align-items: center; padding: .48rem .78rem; background: rgba(255,255,255,.06); border-radius: 12px; width: fit-content; }
.sdtyping span { width: 5px; height: 5px; border-radius: 50%; background: var(--silver-muted); animation: sddot 1.2s ease-in-out infinite; }
.sdtyping span:nth-child(2) { animation-delay: .2s; }
.sdtyping span:nth-child(3) { animation-delay: .4s; }
#sdQuicks { display: flex; flex-wrap: wrap; gap: .35rem; padding: .55rem .85rem; border-top: 1px solid rgba(255,255,255,.06); }
.sdq { font-size: .66rem; padding: .28rem .65rem; border-radius: 50px; cursor: pointer; background: rgba(255,255,255,.05); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.1); color: var(--silver-muted); transition: all .18s; font-family: var(--font-ui); min-height: 30px; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.sdq:hover { border-color: rgba(200,168,75,.3); color: var(--gold); background: rgba(200,168,75,.08); }
#sdInputRow { display: flex; gap: .45rem; padding: .65rem .85rem; border-top: 1px solid rgba(255,255,255,.06); }
#sdInput { flex: 1; background: rgba(255,255,255,.05); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; color: #fff; padding: .5rem .75rem; font-family: var(--font-ui); font-size: .82rem; outline: none; transition: border-color .2s; }
#sdInput:focus { border-color: rgba(200,168,75,.4); }
#sdInput::placeholder { color: rgba(104,136,160,.55); }
#sdSend { background: var(--gold); border: none; color: #040a04; border-radius: 8px; padding: .48rem .85rem; font-size: .7rem; font-weight: 700; cursor: pointer; font-family: var(--font-ui); letter-spacing: .1em; transition: all .2s; }
#sdSend:hover { background: var(--gold-light); }

/* ─── RESPONSIVE GLOBAL ─────────────────────────────────────────────── */
@media(max-width:768px) {
  html { font-size: 15px; }
  #why,#service-area,#packages,#services,#membership,#testimonials,#contact,#certified,#gallery { padding-left: 1.2rem !important; padding-right: 1.2rem !important; }
  .sec-title { font-size: clamp(1.7rem,6vw,2.3rem); }
  .hero-h1 { font-size: clamp(3rem,12vw,5rem); }
}


/* ── MOBILE COMPATIBILITY FIXES ── */

/* Fix 1: -webkit-text-size-adjust (already in html{} but ensure it exists) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Fix 2: Font smoothing on body */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Fix 3: Tap highlight — remove blue flash on iOS tap */
* { -webkit-tap-highlight-color: transparent; }
a, button, [onclick], .pkg-tab, .sdq, .sbar-pill, .why-card, .sa-card,
.pkg-card, .svc-card, .testi-card { -webkit-tap-highlight-color: transparent; }

/* Fix 4: Input font-size 16px on mobile — prevents iOS auto-zoom */
@media(max-width: 768px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* Bonus: Active states for touch — iOS liquid glass feel */
@media(hover: none) and (pointer: coarse) {
  .why-card:active   { transform: scale(.98); }
  .pkg-card:active   { transform: scale(.98); }
  .svc-card:active   { transform: scale(.98); }
  .testi-card:active { transform: scale(.98); }
  .sa-card:active    { transform: scale(.98); }
  .btn-gold:active   { transform: scale(.97); }
  .btn-outline:active{ transform: scale(.97); }
}

/* ── SOCIAL BAR — slim floating Liquid Glass strip ── */
#social-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 150;
  padding: .5rem 1rem calc(.5rem + env(safe-area-inset-bottom, 0px));
  background: rgba(3,8,16,.82);
  backdrop-filter: blur(60px) saturate(2.5);
  -webkit-backdrop-filter: blur(60px) saturate(2.5);
  border-top: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 -1px 0 rgba(200,168,75,.07), 0 -8px 32px rgba(0,0,0,.3);
}
.sbar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  max-width: 500px;
  margin: 0 auto;
}
#social-bar .sbar-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  height: 34px;
  padding: 0 .9rem;
  border-radius: 50px;
  font-family: var(--font-ui);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  color: var(--silver-muted);
  transition: all .25s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
/* Icon-only pills — square */
#social-bar .sbar-pill:not(.sbar-primary):not(.sbar-call) {
  width: 34px;
  padding: 0;
  font-size: .9rem;
  letter-spacing: 0;
}
#social-bar .sbar-pill:hover,
#social-bar .sbar-pill:active {
  background: rgba(200,168,75,.12);
  border-color: rgba(200,168,75,.3);
  color: var(--gold);
  transform: translateY(-2px);
}
#social-bar .sbar-primary {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  border-color: transparent;
  color: #040a04;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,240,160,.35), 0 3px 14px rgba(200,168,75,.32);
}
#social-bar .sbar-primary:hover {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-light));
  color: #040a04;
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255,240,160,.4), 0 6px 22px rgba(200,168,75,.5);
}
#social-bar .sbar-call {
  background: rgba(200,168,75,.1);
  border-color: rgba(200,168,75,.22);
  color: var(--gold);
  box-shadow: inset 0 1px 0 rgba(255,220,120,.1);
}
#social-bar .sbar-call:hover {
  background: rgba(200,168,75,.18);
  border-color: rgba(200,168,75,.45);
}
/* Footer gets bottom padding for bar */
footer {
  padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)) !important;
}

/* ── NO HORIZONTAL OVERFLOW ── */

/* 1. Lock the whole page — belt AND suspenders */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* 2. Hero must clip its rings (r4 = 1100px wide) */
#hero {
  overflow: hidden;
}

/* 3. Rings stay inside hero — clip at source */
.ring {
  pointer-events: none;
  /* Ensure rings don't leak outside hero bounds */
  will-change: transform, opacity;
}

/* 4. All sections — never wider than viewport */
section, footer, #social-bar {
  max-width: 100vw;
  overflow-x: hidden;
}

/* 5. Inner wrappers — no bleed */
.why-inner, #pkg-grid, .svc-grid, .testi-grid,
.vid-grid, .certified-inner, .contact-inner,
.footer-inner, .sa-grid, .area-grid-inner,
#subCards {
  width: 100%;
  box-sizing: border-box;
}

/* 6. All absolute/fixed positioned elements — clip if needed */
.hero-bg, .hero-grid {
  overflow: hidden;
  max-width: 100%;
}

/* ── PERFORMANCE: content-visibility for off-screen sections ── */
#testimonials, #contact, #certified, #membership, #gallery {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}
/* Reserve space so scrollbar doesn't jump */
.why-card, .pkg-card, .svc-card, .testi-card, .sa-card {
  contain: layout style paint;
}

/* Reserve space before images load — prevents layout shift */
/* removed — was breaking aspect */
/* Fade in as they load */
/* removed — was hiding images */


/* ── IMAGE SPACE RESERVATION (no fade, no opacity) ── */
img[src^="images/"] {
  background-color: rgba(10,22,34,.4);
}

/* ── FROM JSX: Vehicle size pricing toggle ── */
.pkg-sz-bar { display:flex; gap:.4rem; padding:.6rem 1.7rem .4rem; }
.pkg-sz-btn {
  flex:1; padding:.45rem .2rem;
  border-radius:8px; font-family:var(--font-ui); font-size:.62rem;
  font-weight:700; letter-spacing:.1em; text-transform:capitalize;
  cursor:pointer; transition:all .22s var(--ease);
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
  color:var(--silver-muted);
}
.pkg-sz-btn.active {
  background:rgba(200,168,75,.18);
  border-color:rgba(200,168,75,.45);
  color:var(--gold-light);
}

/* ── FROM JSX: Add-ons section ── */
.addon-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.9rem; max-width:1100px; margin:0 auto; }
.addon-card {
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(40px) saturate(1.8); -webkit-backdrop-filter:blur(40px) saturate(1.8);
  border:1px solid rgba(255,255,255,.09); border-radius:var(--radius-sm);
  padding:1.1rem 1.2rem;
  display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  transition:border-color .3s var(--ease), transform .3s var(--ease);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.addon-card:hover { border-color:rgba(200,168,75,.22); transform:translateY(-2px); }
.addon-name { font-size:.88rem; color:var(--silver-dim); font-weight:500; line-height:1.4; }
.addon-price { font-family:var(--font-display); font-size:1.1rem; color:var(--gold-light); font-weight:700; white-space:nowrap; flex-shrink:0; }

/* ── FROM JSX: Business / Fleet section ── */
.biz-card {
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(40px) saturate(1.8); -webkit-backdrop-filter:blur(40px) saturate(1.8);
  border:1px solid rgba(255,255,255,.09); border-radius:var(--radius);
  padding:1.8rem 2rem; margin-bottom:1.2rem;
  display:flex; align-items:flex-start; gap:1.2rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  transition:border-color .38s var(--ease), transform .38s var(--ease);
}
.biz-card:hover { border-color:rgba(200,168,75,.2); transform:translateY(-3px); }
.biz-icon { font-size:1.8rem; flex-shrink:0; margin-top:.15rem; }
.biz-badge {
  font-size:.55rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700;
  font-family:var(--font-ui); border-radius:4px; padding:.18rem .6rem;
  display:inline-block; margin-bottom:.4rem;
}

/* ── FROM JSX: Loyalty tiers ── */
.loyalty-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; max-width:1100px; margin:0 auto; }
.loyalty-card {
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(40px) saturate(1.8); -webkit-backdrop-filter:blur(40px) saturate(1.8);
  border:1px solid rgba(255,255,255,.09); border-radius:var(--radius);
  padding:1.8rem 1.4rem; text-align:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  transition:transform .38s var(--ease), border-color .38s;
}
.loyalty-card:hover { transform:translateY(-5px); }
.loyalty-icon { font-size:2.2rem; margin-bottom:.6rem; display:block; }
.loyalty-name { font-family:var(--font-display); font-size:1rem; font-weight:600; color:var(--silver-light); margin-bottom:.3rem; }
.loyalty-range { font-size:.7rem; letter-spacing:.12em; color:var(--silver-muted); margin-bottom:.6rem; }
.loyalty-perk { font-size:.84rem; color:var(--silver-dim); line-height:1.6; }

/* ── FROM JSX: EV/Eco badges ── */
.pkg-badge-ev  { background:linear-gradient(90deg,#16a34a,#15803d); }
.pkg-badge-eco { background:linear-gradient(90deg,#22c55e,#16a34a); }

/* ── Responsive ── */
@media(max-width:768px){
  .addon-grid { grid-template-columns:1fr; }
  .loyalty-grid { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:480px){
  .loyalty-grid { grid-template-columns:1fr 1fr; }
}

/* ── TESTIMONIALS MARQUEE ── */
@keyframes testiScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
#testiTrack .testi-card {
  min-width: 320px;
  max-width: 320px;
  flex-shrink: 0;
}
@media(max-width:600px){
  #testiTrack .testi-card { min-width:280px; max-width:280px; }
}

/* ══ DARK / LIGHT MODE ══════════════════════════════════════════════ */
body.light {
  --navy:   #f0f4f8;
  --navy-2: #e8eef5;
  --navy-3: #dde6f0;
  --gold:       #8a6a1a;
  --gold-light: #7a5a14;
  --gold-bright:#9a7a24;
  --silver-light: #1a2030;
  --silver-dim:   #2a3040;
  --silver-muted: #4a5060;
  background: #f0f4f8;
  color: #1a2030;
}
body.light .glass-nav,
body.light #topnav {
  background: rgba(240,244,248,.88) !important;
  border-color: rgba(0,0,0,.1) !important;
}
body.light .pkg-card,
body.light .why-card,
body.light .svc-card,
body.light .testi-card,
body.light .addon-card,
body.light .biz-card,
body.light .loyalty-card,
body.light .sa-card,
body.light .contact-form {
  background: rgba(255,255,255,.75) !important;
  border-color: rgba(0,0,0,.08) !important;
}
body.light section {
  background: var(--navy) !important;
}
body.light #hero {
  background: linear-gradient(160deg,#d8e6f8 0%,#e8eef5 60%,#c8d6e8 100%) !important;
}
body.light .sec-title,
body.light .why-num,
body.light .pkg-name,
body.light h1, body.light h2, body.light h3 {
  color: #0a1428 !important;
}
body.light .hero-sub,
body.light .sec-sub,
body.light .eyebrow {
  color: rgba(20,30,50,.65) !important;
}
body.light #social-bar {
  background: rgba(240,244,248,.88) !important;
}
body.light .nav-link { color: #1a2030 !important; }
body.light input, body.light select, body.light textarea {
  background: rgba(255,255,255,.9) !important;
  color: #1a2030 !important;
  border-color: rgba(0,0,0,.15) !important;
}
body.light #themeToggle { color: #1a2030; }

/* ══ BEFORE/AFTER SLIDER ══════════════════════════════════════════ */
.ba-wrap {
  position: relative; overflow: hidden; border-radius: var(--radius);
  cursor: ew-resize; user-select: none; -webkit-user-select: none;
  border: 1px solid rgba(200,168,75,.2);
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
}
.ba-wrap img { display: block; width: 100%; height: 280px; object-fit: cover; }
.ba-after {
  position: absolute; inset: 0; overflow: hidden;
  width: 50%;
  transition: none;
}
.ba-after img { position: absolute; top: 0; left: 0; width: 100%; }
.ba-divider {
  position: absolute; top: 0; bottom: 0;
  left: 50%; width: 3px;
  background: linear-gradient(180deg,var(--gold),var(--gold-light));
  transform: translateX(-50%);
  cursor: ew-resize; z-index: 10;
}
.ba-handle {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--gold); border: 3px solid #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 800; color: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
  pointer-events: none;
}
.ba-label {
  position: absolute; bottom: .8rem;
  font-family: var(--font-ui); font-size: .6rem;
  letter-spacing: .18em; font-weight: 700;
  padding: .25rem .7rem; border-radius: 4px;
  text-transform: uppercase;
}
.ba-label-before {
  left: .8rem; background: rgba(239,68,68,.75); color: #fff;
}
.ba-label-after {
  right: .8rem; background: rgba(34,197,94,.75); color: #fff;
}

/* ══ VIDEO PLAY OVERLAYS ══════════════════════════════════════════ */
.vid-wrap { position: relative; border-radius: var(--radius); overflow: hidden; cursor: pointer; }
.vid-wrap video { display: block; width: 100%; }
.vid-play-btn {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(200,168,75,.92);
  border: 3px solid rgba(255,255,255,.85);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; pointer-events: none;
  box-shadow: 0 6px 28px rgba(0,0,0,.45);
  transition: transform .25s, opacity .25s;
}
.vid-wrap:hover .vid-play-btn { transform: translate(-50%,-50%) scale(1.1); }
.vid-wrap.playing .vid-play-btn { opacity: 0; }
.vid-title-bar {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: .8rem 1rem;
  background: linear-gradient(transparent,rgba(2,6,12,.85));
  font-family: var(--font-ui); font-size: .75rem;
  letter-spacing: .12em; color: var(--gold-light);
  text-transform: uppercase; pointer-events: none;
}


/* ════════════════════════════════════════════════════════
   UNIVERSAL CAROUSEL  — Supreme Diamond Detailing
   Works on: packages, services, addons, loyalty, blog,
             testimonials, business cards
════════════════════════════════════════════════════════ */
.car-outer {
  position: relative;
  margin: 0 -1.5rem;         /* bleed to edges */
  max-width: calc(100% + 3rem);
}
.car-track-wrap {
  overflow: hidden;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  padding: 0 1.5rem 1.25rem;
}
.car-track-wrap.is-dragging { cursor: grabbing; }
.car-track {
  display: flex;
  gap: 1.1rem;
  transition: transform .45s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}
/* Snap off during drag */
.car-track.no-transition { transition: none; }

/* ── Arrow buttons ── */
.car-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(200,168,75,.35);
  background: rgba(10,24,37,.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--gold);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background .2s, border-color .2s, transform .2s;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.car-btn:hover {
  background: rgba(200,168,75,.18);
  border-color: rgba(200,168,75,.65);
  transform: translateY(-50%) scale(1.06);
}
.car-btn.car-prev { left: 0; }
.car-btn.car-next { right: 0; }
.car-btn:disabled { opacity: .28; pointer-events: none; }

/* ── Dot indicators ── */
.car-dots {
  display: flex;
  justify-content: center;
  gap: .45rem;
  margin-top: 1.4rem;
}
.car-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(200,168,75,.22);
  border: none;
  cursor: pointer;
  transition: background .25s, transform .25s;
  padding: 0;
}
.car-dot.active {
  background: var(--gold);
  transform: scale(1.4);
}

/* ── Edge fade masks ── */
.car-outer::before,
.car-outer::after {
  content: '';
  position: absolute;
  top: 0; bottom: 1.25rem;
  width: 3rem;
  pointer-events: none;
  z-index: 5;
}
.car-outer::before {
  left: 0;
  background: linear-gradient(90deg, var(--section-bg, var(--navy-2)), transparent);
}
.car-outer::after {
  right: 0;
  background: linear-gradient(270deg, var(--section-bg, var(--navy-2)), transparent);
}

/* ── Card widths in carousel mode ── */
/* Packages */
#pkg-grid.car-track .pkg-card       { min-width: 280px; max-width: 280px; }
/* Services */
.svc-grid.car-track .svc-card       { min-width: 260px; max-width: 260px; }
/* Add-ons */
.addon-grid.car-track .addon-card   { min-width: 200px; max-width: 200px; }
/* Loyalty */
.loyalty-grid.car-track .loyalty-card { min-width: 220px; max-width: 220px; }
/* Testimonials */
#testiTrack.car-track .testi-card   { min-width: 300px; max-width: 300px; flex-shrink: 0; }
/* Blog */
.blog-car-track .blog-card          { min-width: 280px; max-width: 280px; }
/* Business */
.biz-car-track .biz-card            { min-width: 260px; max-width: 260px; }

/* ── Kill old grid layouts when carousel active ── */
#pkg-grid.car-track     { display: flex !important; }
.svc-grid.car-track     { display: flex !important; }
.addon-grid.car-track   { display: flex !important; }
.loyalty-grid.car-track { display: flex !important; }
.biz-car-track          { display: flex !important; }
.blog-car-track         { display: flex !important; }

/* ── Kill old testiScroll marquee animation ── */
#testiTrack.car-track   {
  animation: none !important;
  width: auto !important;
  display: flex !important;
}


<style id="traffic-offer-section-style">
.traffic-offer{position:relative;overflow:hidden;padding:clamp(4.2rem,7vw,6.4rem) 2rem;background:linear-gradient(180deg,#0a1825 0%,#060e18 52%,#0a1825 100%);text-align:center;border-top:1px solid rgba(200,168,75,.15);border-bottom:1px solid rgba(200,168,75,.15);}
.traffic-offer::before{content:"";position:absolute;inset:-20%;background:radial-gradient(ellipse 46% 38% at 50% 0%,rgba(200,168,75,.13),transparent 62%),radial-gradient(ellipse 34% 28% at 12% 78%,rgba(196,220,235,.06),transparent 70%);pointer-events:none;}
.traffic-offer>*{position:relative;z-index:1;}
.traffic-offer .eyebrow{justify-content:center;margin:0 auto .85rem;}
.traffic-offer h2{font-family:var(--font-display);font-size:clamp(2rem,5vw,3.8rem);line-height:.98;font-weight:700;letter-spacing:-.04em;color:#ffffff;margin:0 0 1rem;}
.traffic-offer>p:not(.eyebrow),.traffic-offer .offer-hook{max-width:790px;margin:0 auto;color:var(--silver-dim);font-size:clamp(.95rem,1.7vw,1.08rem);line-height:1.75;}
.traffic-offer .offer-hook strong{color:#ffffff;font-weight:700;}
.offer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;max-width:1020px;margin:2.2rem auto 1.1rem;}
.offer-grid>div{background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.05));border:1px solid rgba(200,168,75,.28);border-radius:24px;padding:1.45rem 1.2rem;box-shadow:0 20px 50px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.06);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;}
.offer-grid>div:hover{transform:translateY(-4px);border-color:rgba(200,168,75,.36);box-shadow:0 28px 70px rgba(0,0,0,.34),0 0 0 1px rgba(200,168,75,.06) inset;}
.offer-grid h3{font-family:var(--font-display);font-size:1.05rem;letter-spacing:-.01em;color:#f0f5f8;margin:0 0 .55rem;}
.offer-grid p{font-family:var(--font-display);font-size:clamp(1.35rem,2.4vw,1.8rem);font-weight:700;color:var(--gold-light);margin:0 0 .45rem;}
.offer-grid span{display:block;color:var(--silver-dim);font-size:.82rem;line-height:1.55;}
.offer-proof{display:grid;grid-template-columns:1.15fr .85fr;gap:1rem;max-width:1020px;margin:1rem auto 2rem;text-align:left;}
.offer-proof-card{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);border-radius:22px;padding:1.15rem 1.2rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);}
.offer-proof-card h3{font-family:var(--font-display);font-size:1rem;color:var(--silver-light);margin:0 0 .5rem;}
.offer-proof-card p{color:var(--silver-muted);font-size:.86rem;line-height:1.7;margin:0;}
.offer-proof-list{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.85rem;}
.offer-proof-list span,.offer-local-keywords span{display:inline-flex;align-items:center;border:1px solid rgba(200,168,75,.16);background:rgba(200,168,75,.055);border-radius:999px;color:var(--silver-light);font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:.42rem .62rem;}
.offer-local-keywords{max-width:1020px;margin:.2rem auto 1.9rem;display:flex;gap:.45rem;justify-content:center;flex-wrap:wrap;}
.offer-featured{max-width:1020px;margin:2.2rem auto 1.2rem;display:grid;grid-template-columns:1.05fr .95fr;gap:1rem;text-align:left;}
.offer-featured-card{background:linear-gradient(135deg,rgba(200,168,75,.2),rgba(255,255,255,.07));border:1px solid rgba(200,168,75,.45);border-radius:28px;padding:1.55rem;box-shadow:0 28px 80px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.08);}
.offer-featured-card h3{font-family:var(--font-display);font-size:clamp(1.25rem,2.5vw,1.85rem);color:var(--silver-light);margin:0 0 .5rem;letter-spacing:-.02em;}
.offer-featured-card p{color:var(--silver-dim);font-size:.92rem;line-height:1.7;margin:.45rem 0;}
.offer-featured-card .price{font-family:var(--font-display);font-size:2rem;font-weight:800;color:var(--gold-light);margin:.25rem 0 .65rem;}
.offer-badge{display:inline-flex;align-items:center;gap:.4rem;border:1px solid rgba(200,168,75,.28);background:rgba(200,168,75,.1);color:var(--gold-light);border-radius:999px;padding:.42rem .7rem;font-size:.63rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.85rem;}
.offer-featured-list{display:grid;gap:.48rem;margin-top:.8rem;}
.offer-featured-list span{color:#e8eef2;font-size:.82rem;line-height:1.55;}
.offer-note-card{background:rgba(255,255,255,.07);border:1px solid rgba(200,168,75,.18);border-radius:28px;padding:1.55rem;align-self:stretch;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);}
.offer-note-card h3{font-family:var(--font-display);font-size:1.15rem;color:var(--silver-light);margin:0 0 .7rem;}
.offer-note-card p{color:var(--silver-dim);font-size:.88rem;line-height:1.7;margin:0 0 .8rem;}
.combo-grid{grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;}
.combo-grid>div{position:relative;text-align:left;}
.combo-grid>div.featured{border-color:rgba(200,168,75,.38);background:linear-gradient(180deg,rgba(200,168,75,.11),rgba(255,255,255,.03));}
.combo-grid small{display:inline-flex;margin-bottom:.7rem;color:var(--gold-light);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;}
.combo-grid ul{list-style:none;padding:0;margin:.75rem 0 0;display:grid;gap:.34rem;}
.combo-grid li{color:var(--silver-dim);font-size:.75rem;line-height:1.45;padding-left:1rem;position:relative;}
.combo-grid li::before{content:'✦';position:absolute;left:0;top:0;color:rgba(200,168,75,.7);font-size:.62rem;}
.combo-upsell{display:block;margin-top:.75rem;color:var(--gold-light)!important;font-size:.72rem!important;font-weight:700;}
.traffic-offer .cta-row{display:flex;gap:.75rem;justify-content:center;align-items:center;flex-wrap:wrap;}
.traffic-offer .cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.95rem 1.45rem;border-radius:999px;background:linear-gradient(135deg,var(--gold),var(--gold-light));color:#061018;text-decoration:none;font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:.76rem;box-shadow:0 16px 45px rgba(200,168,75,.22);}
.traffic-offer .cta.secondary{background:rgba(255,255,255,.04);color:var(--silver-light);border:1px solid rgba(200,168,75,.23);box-shadow:none;}
.traffic-offer .cta:hover{filter:brightness(1.06);transform:translateY(-1px);}
@media(max-width:980px){.combo-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.offer-featured{grid-template-columns:1fr;}}@media(max-width:760px){.traffic-offer{padding:4rem 1rem;}.offer-grid,.offer-proof,.offer-featured{grid-template-columns:1fr;gap:.85rem;margin:1.6rem auto 1.2rem;}.combo-grid{grid-template-columns:1fr;}.offer-proof{text-align:center}.traffic-offer .cta{width:100%;max-width:360px}.offer-local-keywords{justify-content:flex-start;overflow:auto;flex-wrap:nowrap;padding-bottom:.25rem}.offer-local-keywords span{white-space:nowrap}}

.vs-table-wrap {
  max-width: 660px;
  margin: 0 auto;
  border-radius: 16px;
  overflow-x: auto;
  border: 1px solid rgba(200,168,75,.15);
  -webkit-overflow-scrolling: touch;
}
.vs-row {
  display: grid;
  grid-template-columns: 1.7fr 1.1fr 1fr 1fr;
  min-width: 440px;
}
.vs-row.header {
  background: rgba(6,14,26,.98);
  border-bottom: 1px solid rgba(200,168,75,.2);
}
.vs-row:not(.header) {
  background: rgba(6,14,26,.85);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.vs-row:not(.header):nth-child(even) { background: rgba(10,20,34,.9); }
.vs-row:last-of-type { border-bottom: none; }
.vs-cell {
  padding: .75rem .85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  color: var(--silver-muted);
}
.vs-cell.feature {
  justify-content: flex-start;
  color: #d4e4f0;
  font-size: .8rem;
  font-weight: 500;
  padding-left: 1.1rem;
}
.vs-cell.sdd {
  background: rgba(200,168,75,.09);
  border-left: 1px solid rgba(200,168,75,.18);
  border-right: 1px solid rgba(200,168,75,.18);
}
.vs-cell.header-cell {
  font-family: var(--font-ui);
  font-size: .56rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--silver-muted);
  padding: .85rem .75rem;
}
.vs-cell.header-cell.sdd {
  color: var(--gold);
  background: rgba(200,168,75,.14);
  border-left: 1px solid rgba(200,168,75,.25);
  border-right: 1px solid rgba(200,168,75,.25);
  border-bottom: 2px solid var(--gold);
}
.vs-cell.header-cell.feature {
  color: #9bb5c8;
  padding-left: 1.1rem;
}
.vs-check-yes {
  color: #4ade80;
  font-size: 1rem;
  font-weight: 700;
}
.vs-check-no {
  color: rgba(255,90,90,.4);
  font-size: .95rem;
}
.vs-check-part {
  font-family: var(--font-ui);
  font-size: .58rem;
  letter-spacing: .08em;
  color: rgba(200,168,75,.6);
  font-weight: 600;
  text-transform: uppercase;
}
.vs-scroll-hint {
  text-align: center;
  font-family: var(--font-ui);
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--silver-muted);
  margin-top: .5rem;
  opacity: .6;
  display: none;
}
@media(max-width: 600px) {
  .vs-scroll-hint { display: block; }
  .vs-cell { padding: .65rem .6rem; font-size: .74rem; }
  .vs-cell.feature { padding-left: .75rem; font-size: .75rem; }
}