:root{
  --gold:#ffcc00;
  --dark:#070707;
  --text:#ffffff;
  --radius:22px;
  --radius2:28px;
  --shadow:0 18px 60px rgba(0,0,0,.55);
  --shadow2:0 12px 26px rgba(0,0,0,.40);

  --topbar-h: 0px;
  --nav-h: 72px;

  --carousel-gap: 14px;
  --carousel-side-peek: 34px;
  --carousel-slide-w: min(78vw, 440px);

  --widget-w: 310px;
  --widget-h: 420px;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 700px at 15% 10%, rgba(255,204,0,.08), transparent 60%),
    radial-gradient(900px 600px at 85% 20%, rgba(255,255,255,.05), transparent 65%),
    var(--dark);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; }

/* Accessibility helpers */
.skip-link{
  position:absolute; left:12px; top:12px;
  padding:10px 14px; border-radius:12px;
  background:#000; color:#fff; border:2px solid var(--gold);
  z-index:10000; transform:translateY(-160%);
  transition:transform .18s ease;
}
.skip-link:focus{ transform:translateY(0); }
.sr-only{
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important;
}
:focus{ outline:none; }
:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }

.reveal{ opacity:1; transform:none; }
html.js .reveal{ opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease; }
html.js .reveal.show{ opacity:1; transform:translateY(0); }

/* Topbar */
.topbar{
  background:rgba(0,0,0,.65);
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:10px 5%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  font-size:.85rem;
  color:rgba(255,255,255,.78);
  z-index:1200;
  flex-wrap:wrap;
}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 12px; border-radius:999px;
  background:rgba(255,204,0,.10);
  border:1px solid rgba(255,204,0,.25);
  color:rgba(255,255,255,.92);
  font-weight:900; white-space:nowrap;
}
.topbar a{ color:rgba(255,255,255,.92); font-weight:900; }
.topbar a:hover{ color:var(--gold); }

/* Nav */
nav{
  position:sticky; top:0; z-index:1100;
  background:rgba(10,10,10,.88);
  backdrop-filter:blur(16px);
  padding:14px 5%;
  display:flex; justify-content:space-between; align-items:center;
  border-bottom:2px solid rgba(255,204,0,.65);
  gap:10px;
}
.brand{ display:flex; align-items:center; gap:12px; min-width:240px; }
.brand-logo{ width:65px; height:65px; border-radius:50%; overflow:hidden; }
.brand-logo img{ width:100%; height:100%; object-fit:cover; transform:scale(1.06); }
.brand-text h1{ font-size:1.05rem; margin:0; font-weight:900; text-transform:uppercase; letter-spacing:.8px; line-height:1.05; }
.brand-text h1 span{ color:var(--gold); }
.brand-text .tagline{ margin-top:4px; font-size:.78rem; font-weight:700; color:rgba(255,255,255,.72); }

.nav-links{ display:flex; gap:10px; align-items:center; }
.nav-links a{
  padding:10px 12px; border-radius:999px;
  font-weight:900; text-transform:uppercase; letter-spacing:.6px;
  font-size:.85rem; color:rgba(255,255,255,.92);
  transition:transform .18s ease, background .18s ease, color .18s ease;
  white-space:nowrap;
}
.nav-links a:hover{ color:var(--gold); background:rgba(255,204,0,.10); transform:translateY(-1px); }
.nav-cta{ display:flex; gap:10px; align-items:center; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 16px; border-radius:999px;
  font-weight:900; text-transform:uppercase; letter-spacing:.6px;
  font-size:.86rem;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  box-shadow:var(--shadow2);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
  cursor:pointer;
  z-index:5; white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); border-color:rgba(255,204,0,.45); background:rgba(255,204,0,.10); color:var(--gold); box-shadow:0 16px 40px rgba(0,0,0,.45); }
.btn-gold{ border:none; background:linear-gradient(135deg,#ffe58a,var(--gold)); color:#000; }
.btn-gold:hover{ background:linear-gradient(135deg,#fff,#ffe58a); color:#000; }

.burger{
  display:none; width:44px; height:44px; border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  box-shadow:var(--shadow2);
  align-items:center; justify-content:center; gap:6px; cursor:pointer;
  z-index:5;
}
.burger span{ width:20px; height:2px; background:rgba(255,255,255,.92); display:block; border-radius:999px; }

/* Desktop sticky CTA */
.desktop-sticky-cta{
  position:fixed; right:18px; top:50%; transform:translateY(-50%);
  z-index:9997; display:none; flex-direction:column; gap:10px;
}
.sticky-btn{ width:190px; justify-content:center; border-radius:18px; padding:14px; box-shadow:0 22px 70px rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.12); background:rgba(10,10,10,.55); backdrop-filter:blur(14px);
}
.sticky-btn.call{ background:linear-gradient(135deg,#ffe58a,var(--gold)); color:#000; border:none; }

/* Mobile menu */
.mobile-panel{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.72); backdrop-filter:blur(10px); z-index:9999; padding:16px; }
.mobile-card{ background:rgba(10,10,10,.92); border:1px solid rgba(255,255,255,.12); border-radius:22px; padding:14px; box-shadow:var(--shadow); max-width:560px; margin:12px auto 0; }
.mobile-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 6px 14px; border-bottom:1px solid rgba(255,255,255,.10); margin-bottom:12px; }
.icon-btn{ width:42px; height:42px; border-radius:14px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); display:grid; place-items:center; cursor:pointer;
  z-index:5; color:rgba(255,255,255,.92); }
.mobile-links{ display:grid; gap:10px; padding:6px; }
.mobile-links a{ padding:14px 14px; border-radius:16px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); font-weight:900; text-transform:uppercase; letter-spacing:.6px; font-size:.92rem; }

/* Hero */
.hero{
  position:relative; min-height:86svh; display:grid; place-items:center; text-align:center;
  padding: calc(var(--topbar-h) + var(--nav-h) + 24px) 5% 28px;
  background:
    linear-gradient(rgba(0,0,0,.68), rgba(0,0,0,.84)),
    url('https://res.cloudinary.com/dixal2c3q/image/upload/f_auto,q_auto/v1768364091/WhatsApp_Image_2026-01-13_at_10.30.27_PM_uaqcxr.jpg');
  background-size:cover; background-position:center; overflow:hidden;
}
.hero-content{ position:relative; z-index:2; max-width:980px; }
.kicker{ display:inline-flex; align-items:center; gap:10px; padding:9px 14px; border-radius:999px; border:1px solid rgba(255,204,0,.28); background:rgba(255,204,0,.10);
  font-weight:900; text-transform:uppercase; font-size:.82rem; margin-bottom:18px; }
.hero-content h2{ font-size:clamp(2.1rem, 7.4vw, 5rem); font-weight:900; line-height:1.05; margin:0 0 18px; text-transform:uppercase; letter-spacing:-1px; }
.hero-content h2 span{ color:var(--gold); }
.hero-content p{ font-size:1.06rem; color:rgba(255,255,255,.78); max-width:820px; margin:0 auto 26px; font-weight:700; }
.hero-actions{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:10px; }

/* Sections */
.section-title{ text-align:center; margin:0 0 18px; text-transform:uppercase; font-weight:900; font-size:clamp(1.85rem, 4.2vw, 2.7rem); }
.section-title span{ color:var(--gold); }
.section-sub{ text-align:center; margin:0 auto 40px; max-width:860px; color:rgba(255,255,255,.72); font-weight:700; padding:0 10px; }

.offers-container{ padding:78px 5% 40px; }
.offers-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:18px; margin-top:24px; }
.offer-card{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius); padding:28px 22px; text-align:center; position:relative; overflow:hidden; transition:transform .18s ease, border-color .18s ease, background .18s ease; }
.offer-card:hover{ transform:translateY(-6px); border-color:rgba(255,204,0,.35); background:rgba(255,204,0,.06); }
.offer-card.featured{ border-color:rgba(255,204,0,.75); background:rgba(255,204,0,.08); transform:translateY(-4px); }
.offer-card h3{ font-size:2.6rem; margin:0; color:var(--gold); font-weight:900; }
.offer-card p{ font-weight:900; font-size:1.1rem; margin:12px 0 8px; text-transform:uppercase; }
.offer-card small{ color:rgba(255,255,255,.70); font-weight:700; }
.badge{ background:linear-gradient(135deg,#ffe58a,var(--gold)); color:#000; padding:6px 12px; border-radius:999px; font-weight:900; font-size:.78rem; position:absolute; top:16px; right:16px; }

/* Carousels */
.media-container{ padding:80px 5%; }
.carousel-wrap{ max-width:1100px; margin: 18px auto 0; position:relative; }
.carousel{ overflow:hidden; border-radius:22px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03); box-shadow:0 18px 70px rgba(0,0,0,.50); }
.track{ display:flex; gap:var(--carousel-gap); padding: 18px calc(var(--carousel-side-peek)); overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.track::-webkit-scrollbar{ display:none; }
.slide{ flex: 0 0 var(--carousel-slide-w); scroll-snap-align:center; border-radius:18px; overflow:hidden; position:relative; border:1px solid rgba(255,255,255,.10); background:rgba(0,0,0,.35);
  transform: scale(.92); opacity:.78; transition: transform .22s ease, opacity .22s ease, border-color .22s ease;
}
.slide.is-active{ transform: scale(1); opacity:1; border-color: rgba(255,204,0,.35); }
.slide img, .slide video{ width:100%; height:300px; object-fit:cover; display:block; background:#000; }
.slide::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 60%, rgba(0,0,0,.72)); pointer-events:none; }
.slide-badge{ position:absolute; left:12px; top:12px; z-index:3; display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:999px; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.14);
  font-weight:900; text-transform:uppercase; letter-spacing:.6px; font-size:.72rem;
}
.slide-badge i{ color:var(--gold); }

.car-btn{ position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:46px; height:46px; border-radius:16px; border:1px solid rgba(255,255,255,.14);
  background:rgba(10,10,10,.55); backdrop-filter: blur(10px); box-shadow:0 18px 60px rgba(0,0,0,.55); color:rgba(255,255,255,.92); cursor:pointer;
  z-index:5; display:grid; place-items:center;
}
.car-btn:hover{ border-color:rgba(255,204,0,.45); background:rgba(255,204,0,.10); color:var(--gold); }
.car-prev{ left:-10px; } .car-next{ right:-10px; }
.carousel-hint{ text-align:center; margin:12px 0 0; color:rgba(255,255,255,.62); font-weight:800; font-size:.92rem; }

/* Contact */
.contact-section{ padding:80px 5%; background:rgba(255,255,255,.03); }
.contact-box{ max-width:980px; margin:0 auto; display:grid; grid-template-columns:1.1fr 1fr; gap:26px; align-items:start; }
.contact-info, form{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius2); padding:22px; }
.check{ margin:10px 0; display:flex; align-items:flex-start; gap:10px; color:rgba(255,255,255,.84); font-weight:800; }
.check i{ color:var(--gold); margin-top:3px; }
input, select, textarea{ width:100%; padding:14px; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.16); border-radius:14px; color:#fff; margin-bottom:12px; }
textarea{ min-height:110px; resize:vertical; }
.btn-submit{ width:100%; padding:16px; background:linear-gradient(135deg,#ffe58a,var(--gold)); color:#000; border:none; border-radius:16px; font-weight:900; cursor:pointer;
  z-index:5; text-transform:uppercase; }
.form-note{ margin:10px 0 0; color:rgba(255,255,255,.68); font-weight:700; font-size:.9rem; }

/* Footer */
footer{ text-align:center; padding:44px 5% 110px; color:rgba(255,255,255,.60); border-top:1px solid rgba(255,255,255,.08); }
.footer-links{ margin-top:14px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.footer-link-pill{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05);
  font-weight:900; text-transform:uppercase; letter-spacing:.6px; font-size:.78rem; color:rgba(255,255,255,.85);
}
.trusted-wrap{ max-width:1100px; margin: 0 auto 24px; padding: 18px 16px; border-radius:22px; border:1px solid rgba(255,255,255,.10);
  background: radial-gradient(520px 180px at 20% 0%, rgba(255,204,0,.10), transparent 60%), rgba(255,255,255,.03);
  box-shadow:0 18px 70px rgba(0,0,0,.45);
}
.trusted-title{ display:flex; align-items:center; justify-content:center; gap:10px; font-weight:900; text-transform:uppercase; letter-spacing:.7px; color:rgba(255,255,255,.78); font-size:.92rem; margin-bottom:14px; }
.trusted-title i{ color:var(--gold); }
.brand-strip{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; align-items:center; }
.brand-mark{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:10px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.30); font-weight:900; color:rgba(255,255,255,.84); letter-spacing:.4px; text-transform:uppercase; font-size:.78rem;
}
.dot{ width:8px; height:8px; border-radius:50%; background:var(--gold); display:inline-block; box-shadow:0 0 0 4px rgba(255,204,0,.12); }

/* ===== Garage Widget (new design) ===== */
.garage-widget{
  position:fixed;
  left:12px;
  right:auto;
  top:55%;
  transform:translateY(-50%);
  z-index:9996;
  display:block;
  pointer-events:none;
}
.garage-widget .gift-tab{
  z-index:30;
  margin-left:0;
  margin-right:0;
  pointer-events:auto;

  z-index:10010;
  pointer-events:auto;
}

.garage-widget .garage-frame{
  z-index:20;
  margin-left:66px;
  margin-right:0;
  pointer-events:auto;

  width:var(--widget-w);
  height:var(--widget-h);
  position:relative;
}


.gift-tab{
  position:absolute;
  left:0;
  right:auto;
  top:50%;
  transform:translateY(-50%);
  width:56px;
  height:78px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(10,10,10,.74);
  backdrop-filter:blur(12px);
  box-shadow:0 18px 70px rgba(0,0,0,.55);
  color:rgba(255,255,255,.92);
  display:grid;
  place-items:center;
  gap:6px;
  cursor:pointer;
  z-index:50;
  transition: transform .22s ease;
}
.gift-tab i{ color:var(--gold); font-size:18px; }
.gift-tab span{ font-weight:900; letter-spacing:.8px; font-size:.72rem; }

.garage-frame{
  z-index:20;
  width:var(--widget-w);
  height:var(--widget-h);
  border-radius:26px;
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(380px 220px at 20% 0%, rgba(255,204,0,.08), transparent 70%),
    rgba(10,10,10,.60);
  backdrop-filter:blur(16px);
  box-shadow:0 22px 80px rgba(0,0,0,.62);
  overflow:hidden;
  position:relative;
  transition: transform .22s ease, opacity .22s ease;
}
.garage-frame.is-collapsed{
  transform: translateX(-120%) scale(.98);
  opacity:0;
  pointer-events:none;
}

.garage-caption{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 14px;
  border-bottom:1px solid rgba(255,255,255,.10);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.7px;
  font-size:.82rem;
  background:rgba(0,0,0,.25);
}
.cap-left{ display:inline-flex; align-items:center; gap:10px; color:rgba(255,255,255,.88); }
.garage-caption .pct{ color:var(--gold); }

.garage-inside{
  position:relative;
  z-index:1;
  overflow:hidden;
  position:absolute;
  inset:52px 0 10px 0;
  padding:18px 18px calc(88px + env(safe-area-inset-bottom));
  display:block;
  text-align:center;
}
.inside-state{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.inside-title{
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:1px;
  color:rgba(255,255,255,.85);
  font-size:1.02rem;
}
.inside-offer{
  font-weight:900;
  color:var(--gold);
  font-size:1.65rem;
  line-height:1.05;
  text-transform:uppercase;
}
.inside-sub{
  font-weight:700;
  color:rgba(255,255,255,.60);
}
.inside-unlocked{
  align-content:unset;
}
.unlocked-top{
  font-weight:900;
  letter-spacing:.9px;
  text-transform:uppercase;
  color:rgba(255,255,255,.84);
  margin-bottom:6px;
}
.unlocked-main{
  font-weight:900;
  text-transform:uppercase;
  color:var(--gold);
  font-size:2.15rem;
  line-height:1.05;
}
.unlocked-main span{ color:rgba(255,255,255,.95); }
.unlocked-sub{
  margin-top:6px;
  font-weight:700;
  color:rgba(255,255,255,.62);
}
.claim-btn{
  position:relative;
  margin-top:12px;
  width:min(240px, 88%);
  border:none;
  border-radius:16px;
  padding:14px 14px;
  background:linear-gradient(135deg,#ffe58a,var(--gold));
  color:#000;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.8px;
  cursor:pointer;
  z-index:5;
  box-shadow:0 18px 50px rgba(0,0,0,.55);
}
.claim-btn:hover{ filter:brightness(1.03); }

.unlocked-bar{
  position:absolute;
  left:18px; right:18px; bottom:18px;
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
}
.unlocked-bar > div{
  width:100%;
  height:100%;
  background:linear-gradient(90deg,#ffe58a,var(--gold));
}

/* The door overlays inside content (so locked state is hidden until open) */
.door{
  z-index:3;
  position:absolute;
  left:10px;
  right:10px;
  top:52px;
  bottom:22px;
  border-radius:22px;
  /* Opaque door so offer is NOT visible while closed */
  background:
    radial-gradient(420px 240px at 50% 0%, rgba(255,204,0,.08), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)),
    #0b0b0b;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.55),
    0 22px 70px rgba(0,0,0,.45);
  transform:translateY(0%);
  will-change:transform;
  z-index:5;
  overflow:hidden;
  pointer-events:none;
}

/* Make door look like real panel door */
.door-top{
  height:90px;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border-bottom:1px solid rgba(255,255,255,.10);
  position:relative;
}
.door-windows{
  position:absolute;
  left:50%;
  top:18px;
  transform:translateX(-50%);
  display:flex;
  gap:10px;
}
.door-windows span{
  width:34px;
  height:34px;
  border-radius:12px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.55);
}
.door-panels{
  display:grid;
  grid-template-rows: 1fr 1fr 1fr;
  height: calc(100% - 90px);
}
.door-panels div{
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(0,0,0,.35);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.door-handle{
  position:absolute;
  right:24px;
  top:48%;
  transform:translateY(-50%);
  width:16px; height:38px;
  border-radius:12px;
  background:rgba(255,204,0,.70);
  box-shadow:0 0 0 6px rgba(255,204,0,.10);
}

.door-label{
  position:absolute;
  left:16px;
  bottom:14px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.8px;
  font-size:.86rem;
  color:rgba(255,255,255,.92);
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding:12px 12px;
  border-radius:18px;
  border:1px solid rgba(255,204,0,.40);
  background:rgba(0,0,0,.35);
}
.door-label i{ color:var(--gold); }
.door-label span{ color:var(--gold); }

.door-glow{
  position:absolute;
  inset:0;
  background:radial-gradient(260px 120px at 50% 0%, rgba(255,204,0,.18), transparent 60%);
  opacity:0;
  transition:opacity .2s ease;
  pointer-events:none;
}

.garage-progress{
  position:absolute;
  left:0; right:0; bottom:0;
  height:10px;
  background:rgba(255,255,255,.06);
  z-index:6;
}
.garage-progress > div{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,#ffe58a,var(--gold));
}

/* Responsive */
@media (max-width:980px){
  :root{ --nav-h: 66px; --carousel-slide-w: min(82vw, 440px); }
  .nav-links, .nav-cta{ display:none; }
  .burger{ display:inline-flex; }
  .brand{ min-width:0; }
  .brand-text .tagline{ display:none; }
  .brand-logo{ width:56px; height:56px; }
  .brand-text h1{ font-size:.92rem; }
  .contact-box{ grid-template-columns:1fr; }
  .car-prev{ left:6px; } .car-next{ right:6px; }

  /* Widget on mobile: smaller + lower so it doesn't block hero */
  :root{ --widget-w: 280px; --widget-h: 392px; }
  .garage-widget{ right:10px; top:62%; left:auto; }
  .gift-tab{ right:0; top:50%; }
}

@media (min-width:981px){
  .desktop-sticky-cta{ display:flex; }
}

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
  html.js .reveal{ opacity:1 !important; transform:none !important; }
  html{ scroll-behavior:auto; }
  .door{ transform:none !important; }
}[hidden]{display:none !important;}



/* Widget collapse */
.garage-widget.is-collapsed .garage-frame{
  z-index:20;
  transform: translateX(calc(-100% - 72px));
  opacity:0;
  pointer-events:none;
}
.garage-widget .garage-frame{
  z-index:20;
  transition: transform .22s ease, opacity .22s ease;
}

/* ===== Accessibility Widget (FAB + Panel) ===== */
.a11y-fab{
  position:fixed;
  left:18px;
  bottom:18px;
  z-index:10001;
  width:56px;
  height:56px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(10,10,10,.55);
  backdrop-filter:blur(14px);
  box-shadow:0 22px 80px rgba(0,0,0,.60);
  color:rgba(255,255,255,.92);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}
.a11y-fab:hover{
  transform:translateY(-1px);
  border-color:rgba(255,204,0,.45);
  background:rgba(255,204,0,.10);
  color:var(--gold);
}
.a11y-fab i{ font-size:1.35rem; }

.a11y-panel{
  position:fixed;
  inset:0;
  z-index:10002;
  display:none;
  padding:16px;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(10px);
}
.a11y-card{
  max-width:560px;
  margin:10vh auto 0;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(10,10,10,.92);
  box-shadow:0 22px 90px rgba(0,0,0,.70);
  padding:16px;
}
.a11y-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:6px 6px 14px;
  border-bottom:1px solid rgba(255,255,255,.10);
  margin-bottom:12px;
}
.a11y-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.8px;
}
.a11y-title i{ color:var(--gold); }

.a11y-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:10px;
  padding:6px;
}
.a11y-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.92);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.6px;
  font-size:.82rem;
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}
.a11y-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(255,204,0,.45);
  background:rgba(255,204,0,.10);
  color:var(--gold);
}
.a11y-btn.is-on{
  border-color:rgba(255,204,0,.70);
  background:rgba(255,204,0,.12);
  color:var(--gold);
}
.a11y-reset{
  grid-column:1 / -1;
  border-style:dashed;
}
.a11y-note{
  margin:10px 6px 0;
  color:rgba(255,255,255,.62);
  font-weight:800;
  font-size:.92rem;
}

/* On very small screens keep FAB above mobile sticky bar */
@media (max-width:560px){
  /* Keep A11Y button above any bottom bars */
  .a11y-fab{
    bottom: calc(18px + var(--fab-h));
  }

  /* Mobile deal widget: small side panel, never full-screen */
  :root{
    --widget-w: 240px;
    --widget-h: 320px;
  }
  .garage-widget{
    left:10px;
    top:72%;
  }
  .gift-tab{
    width:54px;
    height:74px;
    border-radius:18px;
  }
  .garage-widget .garage-frame{
    margin-left:60px;
  }
}


/* Ensure Claim button is always visible on mobile (not covered by the door or safe-area) */
.inside-unlocked .unlocked-top{ margin-top:8px; }
.inside-unlocked .unlocked-main{ margin:8px 0 0; }
.inside-unlocked .unlocked-sub{ margin:6px 0 0; color:rgba(255,255,255,.70); font-weight:800; }
.inside-unlocked .claim-btn{
  margin-top:auto;
  margin-bottom:14px;
}
.unlocked-bar{
  bottom: max(14px, env(safe-area-inset-bottom));
}

.sms-consent-row{
  margin-top:14px;
}

.sms-consent{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:14px;
  line-height:1.4;
  color:#cfcfcf;
  opacity:.95;
  cursor:pointer;
  user-select:none;
}

.sms-consent input{
  margin-top:3px;
  width:16px;
  height:16px;
  accent-color:#f5c542;
  flex:0 0 auto;
}

.sms-consent a{
  text-decoration:underline;
  color:#f5c542;
}