/* ===============================
   EP Electrocenter — Apple/Stripe Dark UI
   (drop-in base theme + keeps your existing classes)
=============================== */

:root {
  --bg: #0b0d12;
  --bg2: #0f1117;
  --fg: #e7e7ea;
  --muted: rgba(210, 220, 235, 0.72);

  --brand: #1f6feb;
  --brand2: #7c3aed;
  --accent: #22c55e;
  --warn: #ffb74d;
  --danger: #ff4d4f;

  --card: rgba(255,255,255,0.045);
  --card2: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.08);
  --border2: rgba(255,255,255,0.12);

  --glass: rgba(16, 18, 26, 0.58);
  --glass-strong: rgba(16, 18, 26, 0.72);

  --radius: 18px;
  --radius-sm: 14px;

  --shadow: 0 18px 55px rgba(0,0,0,0.45);
  --shadow-soft: 0 10px 28px rgba(0,0,0,0.35);

  --ring: 0 0 0 4px rgba(31,111,235,0.22);

  --container: 1120px;

  --header-grad:
    radial-gradient(900px 280px at 50% 0%, rgba(99,102,241,.22), transparent 60%),
    radial-gradient(900px 280px at 15% 20%, rgba(34,197,94,.10), transparent 55%),
    radial-gradient(900px 320px at 85% 30%, rgba(124,58,237,.14), transparent 55%),
    linear-gradient(to bottom, rgba(11,13,18,.70), rgba(11,13,18,.92));
}

/* ===== FORCE FIX FOOTER LOGO ===== */
footer .footer-logo img,
.site-footer .footer-logo img,
.footer-logo img{
  width: 48px !important;
  height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  object-fit: contain !important;
  display: block;
  flex-shrink: 0;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.1);
}

@media (max-width: 560px){
  footer .footer-logo img,
  .site-footer .footer-logo img,
  .footer-logo img{
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--fg);
  background: radial-gradient(1200px 500px at 50% 0%, rgba(99,102,241,.12), transparent 60%), var(--bg);
  overflow-y: scroll;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===== Better base typography (no forced global center) ===== */
h1, h2, h3, h4, h5, h6 { margin: 0; letter-spacing: .2px; }
h1 { font-weight: 900; line-height: 1.1; }
h2 { font-weight: 900; }
h3 { font-weight: 800; }
p { margin: 0; color: rgba(210,220,235,.88); line-height: 1.45; }
small { color: var(--muted); }

/* ===== Layout ===== */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 22px;
}
main.container { position:relative; }

.grid { display:grid; gap:16px; }
.grid-two { grid-template-columns: 1fr 1fr; align-items: stretch; }

@media (max-width: 900px) {
  .grid-two { grid-template-columns: 1fr; }
  .container { padding: 14px; }
}

/* ===== Panels / cards ===== */
.glass { -webkit-backdrop-filter: blur(12px) saturate(130%); backdrop-filter: blur(12px) saturate(130%); }

.panel {
  background: var(--glass);
  border: 1px solid var(--border);

/* ===== Link clarity + mobile button padding ===== */
.home-cta-link{
  color: #fff;
}

.home-cta-link + .home-cta-link::before{
  content: "-";
  display: inline-block;
  color: rgba(255,255,255,.6);
  margin: 0 8px 0 2px;
}

.footer-link{
  color: #fff;
}

.footer-bottom .footer-link + .footer-link::before{
  content: "-";
  color: rgba(255,255,255,.6);
  margin: 0 8px;
}

.footer-dot{ display:none; }

@media (max-width: 560px){
  .home-cta-primary{
    padding: 14px 16px;
  }

  .home-cta-secondary{
    padding: 12px 14px;
  }

  .home-panel-cta .btn{
    padding: 12px 16px;
  }

  .nav-menu a{
    padding: 12px 14px;
  }

  .home-cta-link + .home-cta-link::before{ display:none; }
  .footer-bottom .footer-link + .footer-link::before{ display:none; }
}

/* ===== Link bullets ===== */
.footer-link::before,
.home-cta-link::before{
  content: "•";
  color: rgba(255,255,255,.75);
  margin-right: 6px;
}

.footer-link::before{ margin-left: 0; }

/* Footer logo size consistency */
.footer-logo img{
  width: 48px;
  height: 48px;
  max-width: 48px;
  max-height: 48px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

/* ===== Footer mobile polish ===== */
.site-footer{
  padding-bottom: 90px;
}

.footer-inner{
  padding: 16px 0 12px;
}

.footer-brand{
  display:flex;
  gap: 12px;
  align-items:center;
}

.footer-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink: 0;
}

.footer-logo img{
  width: 48px;
  height: 48px;
  max-width: 48px;
  max-height: 48px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

.footer-title{
  font-size: 16px;
}

.footer-pills .pill{
  font-size: 12px;
  padding: 7px 10px;
}

/* Make links feel tappable */
.footer-link{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 8px;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.footer-link:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}

/* Columns: desktop default already ok; mobile stack nicely */
@media (max-width: 900px){
  .footer-cols{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .footer-col{
    padding: 12px;
  }
  .footer-links-grid{
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* Mobile: improve spacing + hierarchy */
@media (max-width: 560px){
  .footer-brand{
    padding: 12px;
    align-items:flex-start;
  }

  .footer-logo img{
    width: 40px;
    height: 40px;
    max-width: 40px;
    max-height: 40px;
  }

  .footer-muted{
    font-size: 12.5px;
    line-height: 1.55;
  }

  .footer-col-title{
    font-size: 14px;
    margin-bottom: 8px;
  }

  /* Make first 2 links in Contact look like buttons */
  .footer-col:first-child .footer-link{
    font-weight: 800;
  }
  .footer-col:first-child .footer-link[href^="tel:"]{
    justify-content:center;
    background: rgba(99,102,241,.14);
    border-color: rgba(99,102,241,.22);
  }

  .footer-fineprint{
    padding: 12px;
  }

  .footer-bottom{
    justify-content:center;
    text-align:center;
    flex-direction: column;
    gap: 6px;
  }
  .footer-dot{ display:none; }
}
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

/* subtle inner highlight */
.panel::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(255,255,255,.05), transparent 30%);
  pointer-events:none;
}

.panel-cover {
  height: 190px;
  border-radius: calc(var(--radius) - 6px);
  background: none;
  border: 0;
  box-shadow: none;
  background-size: cover;
  background-position: center;
  margin-bottom: 16px;
  position: relative;
  overflow:hidden;
}
.panel-cover::after{
  content:"";
  position:absolute; inset:0;
  background: none;
  pointer-events:none;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
  position: relative;
  overflow: hidden;
}
.card:hover{
  transform: translateY(-2px);
  border-color: var(--border2);
  background: rgba(255,255,255,0.07);
  text-decoration:none;
}

.card-cover {
  height: 140px;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  margin-bottom: 12px;
  border: 0;
  position:relative;
  overflow:hidden;
}
.card-cover::after{
  content:"";
  position:absolute; inset:0;
  background: none;
  pointer-events:none;
}

/* ===== Hero ===== */
.hero { padding: 22px 12px; text-align:center; }
.hero p { max-width: 820px; margin: 10px auto 0 auto; }

/* ===== Inputs ===== */
label { font-size: 14px; color: var(--muted); display:block; margin-bottom:6px; text-align:left; }
input, select, textarea {
  width:100%;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.28);
  color: var(--fg);
  outline: none;
  transition: box-shadow .14s ease, border-color .14s ease, background .14s ease;
  text-align:left;
}
input:focus, select:focus, textarea:focus{
  border-color: rgba(31,111,235,0.45);
  box-shadow: var(--ring);
  background: rgba(0,0,0,.35);
}

/* ===== Buttons ===== */
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background: linear-gradient(135deg, rgba(31,111,235,1), rgba(124,58,237,.78));
  color:#fff;
  border: 0;
  padding: 11px 15px;
  border-radius: 14px;
  font-weight: 800;
  cursor:pointer;
  box-shadow: 0 16px 34px rgba(31,111,235,.18);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
  text-decoration:none;
}
.btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
  text-decoration:none;
}
.btn:active{ transform: translateY(0px); }

.btn.secondary{
  background: rgba(255,255,255,.07);
  border: 1px solid var(--border);
  color: rgba(230,238,255,.92);
  box-shadow: none;
  font-weight: 800;
}
.btn.secondary:hover{
  background: rgba(255,255,255,.10);
  border-color: var(--border2);
}

.cart-continue{
  padding: 10px 16px;
  font-size: 14px;
  text-decoration: none;
}

/* ===== Pills / badges ===== */
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: rgba(230,238,255,.90);
  background: rgba(255,255,255,.06);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  text-decoration:none;
}

.pill a{
  color: inherit;
  text-decoration: none;
}

.pill a:hover{
  text-decoration: none;
}

.pill.back { background: rgba(255,255,255,.06); border-color: var(--border); }
.pill.back:hover { background: rgba(255,255,255,.10); text-decoration:none; }

/* ===== Price/time tags ===== */
.price-tag{
  display:inline-flex; align-items:center; gap:6px;
  background: rgba(255,255,255,.06);
  color:#fff;
  border:1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  padding: 8px 12px;
  font-weight: 900;
  letter-spacing: .2px;
}
.price-tag.tbd{
  background: rgba(255, 183, 77, 0.15);
  color: #ffb74d;
  border-color: rgba(255, 183, 77, 0.35);
}
.time-tag{
  display:inline-flex; align-items:center; gap:6px;
  background: rgba(255,255,255,.05);
  color: rgba(230,238,255,.92);
  border:1px solid var(--border);
  border-radius: 14px;
  padding: 8px 12px;
  font-weight: 800;
}

/* ===== Lists / horizontal cards ===== */
.list-cards { display:grid; grid-template-columns:1fr; gap: 14px; margin-top: 10px; padding: 0 4px 6px; }
.h-card{
  display:grid;
  grid-template-columns: minmax(180px, 34%) 1fr;
  align-items:center;
  gap: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow-soft);
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.h-card:hover{
  transform: translateY(-2px);
  border-color: var(--border2);
  background: rgba(255,255,255,.06);
}
.h-card-cover{
  width:100%;
  aspect-ratio: 16/9;
  border-radius: 12px;
  background-size: cover;
  background-position:center;
  border: 0;
  position:relative;
  overflow:hidden;
}
.h-card-cover::after{
  content:"";
  position:absolute; inset:0;
  background: none;
  pointer-events:none;
}
.h-card-body h3{ margin:0 0 6px; color: rgba(230,238,255,.96); text-align:left; }
.h-card-body p { margin:0; color: rgba(203,213,225,.90); text-align:left; }

/* ===== Reviews carousel ===== */
.reviews-section { margin-top: 16px; padding: 18px; }
.reviews-section .hero { padding: 12px 8px 6px; }
.reviews-section .hero h2 { margin: 0; }
.reviews-section .hero p { margin: 8px auto 0; }
.review-carousel { position: relative; margin: 12px auto 0; max-width: 720px; width: 100%; }
.review-track {
  display:flex;
  gap:0;
  overflow-x:hidden;
  scroll-snap-type:x mandatory;
  scroll-snap-stop: always;
  align-items: stretch;
  padding: 4px 0 8px;
  width: 100%;
}
.review-track::-webkit-scrollbar { height:8px; }
.review-track::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius:999px; }
.review-track .review-card {
  flex: 0 0 100%;
  min-width: 100%;
  max-width: 100%;
  width: 100%;
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  gap:8px;
}

@media (max-width: 900px) {
  .review-carousel { max-width: 100%; }
  .review-track { overflow-x: hidden; }
  .review-track .review-card { flex: 0 0 100%; width: 100%; }
}
.review-card strong { color: rgba(230,238,255,.96); }
.review-stars { letter-spacing:1px; color:#fbbf24; font-size:14px; }
.review-time { color: var(--muted); font-size:12px; }
.review-text { margin: 0; color: var(--muted); text-align:left; white-space: pre-wrap; }
.review-actions { display:flex; gap:8px; justify-content:center; margin-top:10px; }
.review-btn {
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color:#e8eefc;
  padding:6px 12px;
  border-radius:999px;
  cursor:pointer;
  font-weight: 700;
}
.review-btn:hover { background: rgba(255,255,255,.10); }

/* ===== Utility grids ===== */
.resp-grid-3 { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px; }
@media (max-width: 900px) { .resp-grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) { .resp-grid-3 { grid-template-columns: 1fr; } }

.resp-grid-2 { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
@media (max-width: 720px) { .resp-grid-2 { grid-template-columns: 1fr; } }

/* ===== Services grid helpers (kept from you) ===== */
.services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.services-grid .card { color:#fff; }
.services-grid .card h3, .services-grid .card p { color:#fff; }
.services-grid .card { min-width: 0; }
.services-grid .card h3 { word-break: break-word; overflow-wrap: anywhere; }
.services-grid .card:hover { text-decoration:none; }

.brands-grid .card-cover { height: 120px; background-size: contain; background-repeat: no-repeat; background-position: center; }
.brands-grid .card { text-align: center; color: #fff; }
.brands-grid .card:hover { text-decoration: none; }
.brands-grid .card h3 { color:#fff; }

/* Repairs diagnostics grid: desktop 3, tablets 2, phones 1 */
.diag-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.diag-grid .card { text-align: left; }
@media (max-width: 900px) { .diag-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 480px) { .diag-grid { grid-template-columns: 1fr; } }

/* ===== Header ===== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--header-grad);
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 35px rgba(0,0,0,.35);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}

.site-header .container { max-width:100%; margin:0; padding-left:0; padding-right:0; }

.header-inner{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 22px;
  padding: 10px 0;
  position: relative;
}

.header-banner{
  display:flex;
  align-items:center;
  padding-left: 14px;
  position: relative;
  z-index: 1;
}
.header-banner img{
  height: 122px;
  width:auto;
  display:block;

  /* Fade edges so banner blends */
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  filter: drop-shadow(0 12px 26px rgba(0,0,0,.45));
}

/* Language switch */
.lang-switch { position:absolute; top: 10px; right: 16px; z-index: 3000; }
.btn-lang{
  background: rgba(0,0,0,.25);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 11px;
  display:flex;
  align-items:center;
  gap: 8px;
  font-weight: 900;
  cursor:pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: background .14s ease, border-color .14s ease, transform .14s ease;
}
.btn-lang:hover{ background: rgba(255,255,255,.07); border-color: var(--border2); transform: translateY(-1px); }
.btn-lang.active { background: var(--brand); border-color: rgba(31,111,235,.7); color:#fff; }
.btn-lang svg { width:18px; height:12px; display:block; border-radius:2px; }

.lang-details { position: relative; z-index: 3001; }
.lang-details summary { list-style: none; }
.lang-details summary::-webkit-details-marker { display:none; }
.lang-menu{
  position:absolute;
  right:0;
  margin-top:8px;
  background: rgba(0,0,0,.35);
  border:1px solid var(--border);
  border-radius: 14px;
  padding: 10px;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  z-index: 3002;
}

/* Prevent banner clicks when language menu is open */
.lang-open .header-banner { pointer-events: none; }

/* Header nav bottom-right */
.nav-links{
  position:absolute;
  right: 16px;
  bottom: 10px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap: wrap;
  justify-content:flex-end;
  padding-left: 14px;
  padding-right: 14px;
}

/* ALL NAV BUTTONS (links + dropdowns) */
.nav-btn,
.nav-links a,
.nav-links summary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px 14px;
  border-radius:999px;
  font-weight:600;
  font-size:14px;
  color:var(--fg);
  text-decoration:none;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor:pointer;
  transition:all .2s ease;
}

/* Hover */
.nav-btn:hover,
.nav-links a:hover,
.nav-links summary:hover{
  background:rgba(255,255,255,0.12);
  border-color:rgba(255,255,255,0.15);
  transform:translateY(-1px);
  text-decoration:none;
}

/* Active/open dropdown */
.nav-details[open] > summary{
  background:rgba(255,255,255,0.16);
  border-color:rgba(255,255,255,0.20);
}

/* Remove default arrow */
.nav-links summary{ list-style:none; }
.nav-links summary::-webkit-details-marker{ display:none; }

/* Custom arrow */
.nav-links summary::after{
  content:'▾';
  font-size:12px;
  opacity:.6;
  transition:transform .2s ease;
}

/* ===== HOME HERO ===== */
.home-hero { padding: 18px; margin-bottom: 16px; overflow: hidden; }
.home-hero-wrap{
  position: relative;
  border-radius: 18px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.10);
  text-align: center;
  background:
    radial-gradient(900px 280px at 50% 0%, rgba(99,102,241,.22), transparent 60%),
    radial-gradient(900px 280px at 15% 30%, rgba(34,197,94,.10), transparent 55%),
    radial-gradient(900px 320px at 85% 40%, rgba(124,58,237,.14), transparent 55%),
    rgba(255,255,255,.04);
}

.home-hero-title{
  margin: 0;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.02;
}
.home-hero-title .hero-line1,
.home-hero-title .hero-line2{
  display: block;
  font-size: clamp(28px, 4.2vw, 44px);
}
.home-hero-title .hero-line2{
  opacity: .95;
  margin-top: 4px;
}

.home-hero-local{
  display:flex;
  gap: 8px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top: 12px;
}

.home-hero-sub{
  max-width: 860px;
  margin: 12px auto 0;
  color: rgba(210,220,235,.88);
  font-size: 15px;
  line-height: 1.55;
}

.home-hero-cta{ margin-top: 14px; display:flex; flex-direction:column; gap: 10px; align-items:center; }
.home-cta-row{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }

.home-hero-pills{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top: 12px;
}

.home-hero-note{
  margin-top: 12px;
  color: rgba(210,220,235,.66);
  font-size: 13px;
}

/* ===== Cleaner Home CTA ===== */
.home-hero-cta-clean{
  margin-top: 14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 10px;
}

.home-cta-primary{
  min-width: 260px;
  padding: 14px 18px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.home-cta-row{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.home-cta-secondary{
  min-width: 140px;
  padding: 12px 14px;
  opacity: .95;
}

.home-cta-chips{
  display:flex;
  gap: 8px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top: 2px;
}

.home-cta-links{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-top: 2px;
  color: rgba(210,220,235,.78);
  font-size: 13px;
}

.home-cta-link{
  color: rgba(235,242,255,.90);
  text-decoration: none;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}

.home-cta-link:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}

.home-cta-dot{ opacity: .6; }

@media (max-width: 520px){
  .home-cta-primary{ min-width: 100%; }
  .home-cta-secondary{ min-width: 160px; }
}

/* ===== BUTTONS ===== */
.home-hero .btn,
.home-two .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius: 14px;
  padding: 12px 16px;
  text-decoration:none;
}
.home-hero .btn-primary,
.home-two .btn-primary{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
}
.home-hero .btn-primary:hover,
.home-two .btn-primary:hover{ transform: translateY(-1px); }
.home-hero .btn-secondary,
.home-two .btn-secondary{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
}
.home-hero .btn-secondary:hover,
.home-two .btn-secondary:hover{ transform: translateY(-1px); }
.home-hero .btn-ghost,
.home-two .btn-ghost{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
}
.home-hero .btn-ghost:hover,
.home-two .btn-ghost:hover{ transform: translateY(-1px); }

.home-hero .home-cta-btn{ min-width: 220px; }

/* ===== PILLS ===== */
.home-hero .pill,
.home-two .pill,
.reviews-section .pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(230,235,245,.92);
  font-size: 13px;
}
.home-hero .pill-strong{
  background: rgba(99,102,241,.18);
  border-color: rgba(99,102,241,.25);
}

/* ===== TWO COLUMN WRAP ===== */
.home-two{ gap: 16px; }

/* ===== PANEL HERO ===== */
.home-panel-hero{ padding-top: 6px; text-align:center; }
.home-panel-hero h2{ margin:0; }
.home-panel-hero p{ margin-top: 10px; color: rgba(210,220,235,.88); }
.home-inline-pills{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top: 14px; }
.home-panel-cta{ margin-top: 16px; }

/* ===== CARDS ===== */
.home-cards{ margin-top: 12px; }
.home-cards .h-card{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  transition: transform .15s ease, border-color .15s ease;
}
.home-cards .h-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.18);
}
.home-cards .h-card-cover{
  height: 140px;
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) contrast(1.02);
}
.home-cards .h-card-body{ padding: 14px; }
.home-cards .h-card-body h3{ margin: 0 0 6px; font-size: 16px; }
.home-cards .h-card-body p{ margin: 0; color: rgba(210,220,235,.85); font-size: 14px; line-height: 1.5; }

/* ===== REVIEWS ===== */
.reviews-section .reviews-hero{ text-align:center; }
.reviews-section .reviews-hero h2{ margin:0; }
.reviews-section .reviews-sub{ color: rgba(210,220,235,.88); margin-top: 6px; }
.reviews-section .reviews-pill{ margin: 8px auto 0; justify-content:center; }

.reviews-section .review-carousel{ margin-top: 10px; }
.reviews-section .review-track{
  display:flex;
  gap: 12px;
  overflow:auto;
  scroll-snap-type: x mandatory;
  padding: 8px 2px;
}
.reviews-section .review-card{
  min-width: 280px;
  scroll-snap-align: start;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: 14px;
}
.reviews-section .review-head{ display:flex; justify-content:space-between; gap:8px; align-items:center; }
.reviews-section .review-stars{ opacity:.9; }
.reviews-section .review-time{ margin-top: 6px; font-size: 12px; opacity:.7; }
.reviews-section .review-text{ margin-top: 8px; color: rgba(210,220,235,.88); line-height: 1.5; }

.reviews-section .review-actions{
  display:flex;
  justify-content:center;
  gap: 10px;
  margin-top: 10px;
}
.reviews-section .review-btn{
  border-radius: 14px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: rgba(240,245,255,.92);
}

/* ===== MOBILE ===== */
@media (max-width: 520px){
  .home-hero .home-cta-btn{ min-width: 100%; }
  .home-cards .h-card-cover{ height: 120px; }
  .reviews-section .review-card{ min-width: 86%; }
}

/* Rotate arrow when open */
.nav-details[open] summary::after{ transform:rotate(180deg); }

/* ===== DROPDOWN MENU ===== */
.nav-details { position: relative; }
.nav-menu{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  display:none;
  flex-direction:column;
  gap:8px;
  padding:10px;
  min-width:200px;
  background:rgba(20,24,33,0.9);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  z-index: 90;
}
.nav-details[open] .nav-menu{ display:flex; }

/* Dropdown links same style but full width */
.nav-menu a{
  width:100%;
  text-align:center;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:999px;
  padding:8px 12px;
}
.nav-menu a:hover{ background:rgba(255,255,255,0.12); }

/* ===== Floating cart/chat ===== */
.cart-fab{
  position:relative;
  width:48px;
  height:48px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--border);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow: var(--shadow-soft);
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.cart-fab:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
  border-color: var(--border2);
  text-decoration:none;
}
.cart-icon{ width:22px; height:22px; display:block; color:#fff; }
.cart-badge{
  position:absolute;
  top:-6px; right:-6px;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  font-size: 12px;
  padding: 0 7px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0;
  color:#fff;
  background: var(--danger);
  border-color: transparent;
  font-weight: 900;
}
.cart-count{
  margin:0;
  color: var(--danger);
  border-color: rgba(255,77,79,.45);
  background: rgba(255,77,79,0.15);
  font-weight: 900;
  min-width: 28px;
  text-align:center;
}
@keyframes bump { 0%{transform:scale(1);} 35%{transform:scale(1.18);} 100%{transform:scale(1);} }
.cart-count.pulse, .cart-badge.pulse { animation: bump 350ms ease-in-out; }

/* Chat attach button */
#chat-send .chat-attach-btn{
  min-width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  font-size: 18px;
}

/* Chat end button */
#staff-chat{
  position: relative;
}
.chat-panel-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 8px;
  margin-bottom: 8px;
  padding-right: 34px;
}
.chat-panel-head h3{
  flex: 1 1 auto;
  min-width: 0;
}
.chat-end-btn{
  position: static;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2);
  background: #ff4d4f;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.28);
}
#chat-panel .chat-end-btn{
  position: absolute;
  top: 8px;
  right: 8px;
}
.chat-end-float{
  position: absolute;
  top: 8px;
  right: 8px;
}
.chat-end-btn:hover{
  background: #ff2b2b;
}
.chat-end-btn:active{
  transform: translateY(1px);
}

@media (max-width: 900px) {
  .chat-panel-head{
    gap: 6px;
  }
  .chat-panel-head h3{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .chat-end-btn{
    background: #ff4d4f !important;
    color: #fff !important;
  }
}

/* Footer */
footer{
  margin-top: 34px;
  padding: 22px 24px;
  border-top: 1px solid rgba(255,255,255,.08);
  color: rgba(210,220,235,.68);
  text-align:center;
  background: radial-gradient(900px 280px at 50% 0%, rgba(99,102,241,.10), transparent 65%), rgba(0,0,0,.12);
}

/* ===== Variant cards: ensure consistent internal layout (kept from you) ===== */
.variant-card { display:flex; flex-direction: column; }
.variant-card h3.qty-row { display:flex; align-items:center; justify-content:center; gap:8px; min-height: calc(1.25em * 2); text-align:center; }
.variant-card h3.qty-row span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; font-weight: 900; }
.variant-card .card-cover { flex: 0 0 auto; }
.variant-card > .qty-row:last-of-type { margin-top: auto; }

/* ===== Mobile adjustments (kept + polished) ===== */
@media (max-width: 900px) {
  .header-inner { justify-content: center; flex-direction: column; align-items: center; gap: 8px; }
  .header-banner { padding-left: 0; }
  .header-banner img { height: clamp(60px, 18vw, 96px); }
  .site-header .container { padding-left: 14px; padding-right: 14px; }

  .lang-switch {
    position: fixed;
    top: 8px;
    right: 12px;
    z-index: 3000;
  }
  .lang-menu {
    position: fixed;
    top: 48px;
    right: 12px;
    z-index: 3001;
  }
  .lang-details[open] .lang-menu { pointer-events: auto; }
  .lang-details[open] { z-index: 3002; }
  .lang-details[open] + .header-banner { pointer-events: none; }

  /* Hide nav by default and show hamburger */
  .nav-links { display:none !important; position: static; }
  body.nav-open .nav-links{ display:flex !important; }
  .mobile-toggle { display:inline-flex !important; align-items:center; gap:8px; }

  /* ===== MOBILE NAV: premium look ===== */
  body.nav-open .nav-links{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:14px;
    margin:10px 14px 14px;
    border-radius:16px;
    background: rgba(20,24,33,0.72);
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 16px 38px rgba(0,0,0,.45);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
  }

  body.nav-open .nav-links .nav-btn,
  body.nav-open .nav-links a,
  body.nav-open .nav-links summary{
    width:100%;
    min-height:48px;
    padding:12px 14px;
    border-radius:14px;
    justify-content:center;
    text-align:center;
    font-size:15px;
    font-weight:800;
    letter-spacing:.1px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
  }

  body.nav-open .nav-links .nav-btn:hover,
  body.nav-open .nav-links a:hover,
  body.nav-open .nav-links summary:hover{
    transform:none;
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.16);
  }
  body.nav-open .nav-links .nav-btn:active,
  body.nav-open .nav-links a:active,
  body.nav-open .nav-links summary:active{
    transform: scale(0.99);
    filter: brightness(1.06);
  }

  body.nav-open .nav-details{ width:100%; }
  body.nav-open .nav-details .nav-menu{
    position: static !important;
    top:auto !important;
    right:auto !important;
    display:none;
    margin:8px 0 0;
    padding:10px;
    border-radius:14px;
    background: rgba(0,0,0,0.18);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow:none !important;
    transform:none !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }
  body.nav-open .nav-details[open] .nav-menu{ display:flex; }

  body.nav-open .nav-menu a{
    width:100%;
    min-height:44px;
    border-radius:12px;
    font-weight:700;
    font-size:14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
  }

  body.nav-open .nav-details summary{ position:relative; }
  body.nav-open .nav-details summary::after{
    content:'▾';
    position:absolute;
    right:12px;
    opacity:.65;
    font-size:13px;
    transition: transform .2s ease;
  }
  body.nav-open .nav-details[open] summary::after{ transform: rotate(180deg); }

  body.nav-open .nav-links a[onclick*="openLiveChat"]{
    background: linear-gradient(135deg, rgba(31,111,235,0.95), rgba(34,197,94,0.95));
    border: none;
    color:#fff;
    box-shadow: 0 10px 22px rgba(31,111,235,.25);
  }

  #mobile-nav-toggle{
    min-height:42px;
    padding:10px 12px;
    border-radius:12px;
    font-weight:800;
    letter-spacing:.2px;
  }

  .lang-switch{
    padding: 10px 14px;
    display:flex;
    justify-content:flex-end;
  }
  .btn-lang{
    min-height:40px;
    border-radius:999px;
    padding:8px 12px;
    font-weight:800;
  }

  #nav-backdrop { display:none; }
  .container { padding: 14px; }
  .panel-cover { height: 160px; }
  .card-cover { height: 120px; }
  .h-card { grid-template-columns: minmax(160px, 40%) 1fr; }
}

@media (max-width: 480px) {
  .header-banner img { height: clamp(52px, 16vw, 84px); }
  .btn { padding: 10px 12px; border-radius: 14px; }
  .lang-switch {
    position: fixed;
    top: 8px;
    right: 12px;
    z-index: 3000;
    padding: 0;
  }
  .lang-menu {
    position: fixed;
    top: 48px;
    right: 12px;
    z-index: 3001;
  }
  #floating-cart { right: 12px !important; bottom: 12px !important; }
  #cart-panel { right: 12px !important; bottom: 72px !important; min-width: 90vw !important; max-height: 65vh !important; }
  #chat-panel { right: 12px !important; bottom: 72px !important; min-width: 90vw !important; max-height: 70vh !important; }
  #chat-messages { height: 38vh !important; }
  #chat-send { flex-wrap: wrap !important; }
  #chat-send #chat-input { flex: 1 1 100% !important; min-height: 44px; }
  #chat-send .btn,
  #chat-send .nav-btn { flex: 1 1 auto; }
  .h-card { grid-template-columns: 1fr; }
  .h-card-cover { aspect-ratio: 16/10; }
}

/* Force 3 columns on mobile for specific grids (home cards) */
@media (max-width: 600px) {
  .grid-3-mobile { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
  .grid-3-mobile .card { padding: 12px; }
  .grid-3-mobile .card-cover { height: 96px; }
  .grid-3-mobile h3 { font-size: .95rem; }
  .grid-3-mobile p { font-size: .85rem; }
}

/* ===== Home hero mobile polish ===== */
.home-hero-title { font-size: clamp(1.35rem, 4.5vw, 2.2rem); }
.home-hero-sub { font-size: clamp(.95rem, 3.2vw, 1.05rem); line-height: 1.45; }

@media (max-width: 600px) {
  .home-hero-wrap { padding: 16px !important; }
  .home-hero-cta { gap: 8px !important; }

  /* Buttons: 2-up + 1-down (cleaner than 3 cramped) */
  .home-cta-main, .home-cta-secondary {
    width: calc(50% - 4px);
    padding: 10px 12px;
  }
  .home-cta-secondary:last-child { width: 100%; }

  /* Pills: 2 columns grid so they don't look random */
  .home-hero-pills {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px !important;
    justify-content: stretch !important;
  }
  .home-hero-pills .pill {
    width: 100%;
    justify-content: center;
    padding: 8px 10px;
    font-size: 12.5px;
  }

  /* Note smaller & tighter */
  .home-hero-note {
    margin-top: 10px !important;
    font-size: 12px !important;
    line-height: 1.35;
  }
}

@media (max-width: 380px) {
  /* Very small phones: buttons full width */
  .home-cta-main, .home-cta-secondary { width: 100%; }
  .home-hero-pills { grid-template-columns: 1fr; }
}

/* ===== Home hero: perfect mobile centering & no ugly breaks ===== */
.home-hero-wrap { text-align:center; }
.home-hero-title{
  margin:0;
  font-weight:900;
  letter-spacing:-0.02em;
  line-height:1.05;
  font-size: clamp(1.4rem, 4.6vw, 2rem);
  text-align: center;
}

/* Force clean 2-line title (no random word splits) */
.home-hero-title .hero-line1,
.home-hero-title .hero-line2{
  display:block;
  white-space: normal;
}
.home-hero-title .hero-line2{
  margin-top:6px;
  font-weight:900;
  opacity:.92;
}

/* Subtitle: compact, centered, readable */
.home-hero-sub{
  max-width: 34rem !important;
  margin-left:auto !important;
  margin-right:auto !important;
  line-height: 1.45;
  font-size: clamp(.95rem, 3.4vw, 1.05rem);
}

/* CTA: always uniform */
.home-hero-cta{
  margin-top:16px;
  display:flex;
  flex-direction:column;   /* stack by default (best for mobile) */
  gap:10px;
  align-items:center;
  width: 100%;
}
.home-cta-btn{
  width: min(520px, 100%);
  max-width: 520px;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  white-space: nowrap;     /* prevent button text from breaking in ugly ways */
  margin-left: auto;
  margin-right: auto;
}

/* Pills: uniform 2x2 grid on mobile */
@media (max-width: 600px){
  .home-hero-wrap{ padding:16px !important; }

  .home-hero-title{
    font-size: clamp(1.3rem, 5.2vw, 1.7rem);
  }

  .home-hero-title .hero-line1{ max-width: 22ch; margin: 0 auto; }

  .home-hero-cta{ align-items: center; }
  .home-cta-btn{ width: 100%; max-width: 420px; }

  .home-hero-pills{
    display:grid !important;
    grid-template-columns: 1fr 1fr;
    gap:8px !important;
    justify-content:center !important;
    max-width: 520px;
    margin-left:auto;
    margin-right:auto;
  }
  .home-hero-pills .pill{
    width:100%;
    padding:8px 10px;
    font-size: 12.5px;
    text-align:center;
    display:flex;
    justify-content:center;
    align-items:center;
  }

  .home-hero-note{
    max-width: 520px;
    margin-left:auto;
    margin-right:auto;
    font-size: 12px !important;
    line-height: 1.35;
  }
}

/* Very small phones: pills become 1 column */
@media (max-width: 380px){
  .home-hero-pills{ grid-template-columns: 1fr !important; }
}

/* ===== HEADER polish ===== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  background: rgba(10,12,16,.55);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 12px 0; }

.header-banner img{
  width: 100%;
  max-width: 520px;
  height: auto;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 35px rgba(0,0,0,.25);
}

.nav-links{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  padding: 10px 12px 14px;
}

@media (min-width: 901px){
  .nav-links{
    position:absolute;
    top:10px;
    right:16px;
    bottom:auto;
    z-index: 40;
  }
}

.nav-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: rgba(235,242,255,.92);
  text-decoration:none;
  cursor:pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.nav-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
}

.nav-details summary{ list-style:none; }
.nav-details summary::-webkit-details-marker{ display:none; }

.nav-menu{
  position:absolute;
  margin-top:10px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,12,16,.85);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  min-width: 220px;
}

.nav-menu a{
  display:block;
  padding: 10px 10px;
  border-radius: 12px;
  color: rgba(235,242,255,.92);
  text-decoration:none;
}

.nav-menu a:hover{ background: rgba(255,255,255,.08); }

/* ===== Footer (new) ===== */
.site-footer{
  margin-top: 18px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(10,12,16,.55);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

.footer-inner{ padding: 18px 0 14px; }

.footer-brand{
  display:flex;
  gap: 12px;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}

.footer-brand > div{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
}

.footer-logo img{
  width: 48px;
  height: 48px;
  max-width: 48px;
  max-height: 48px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  object-fit: cover;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

.footer-title{
  display:block;
  font-size: 16px;
  letter-spacing: -0.01em;
}

.footer-muted{
  color: rgba(210,220,235,.78);
  font-size: 13px;
  line-height: 1.45;
}

.footer-pills{ display:flex; gap:8px; flex-wrap:wrap; margin-top: 10px; justify-content:center; }

.footer-cols{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin-top: 12px;
}

.footer-col{
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}

.footer-col-title{
  font-weight: 900;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.footer-link{
  color: rgba(235,242,255,.90);
  text-decoration:none;
  display:inline-flex;
  gap: 8px;
  align-items:center;
  padding: 6px 0;
}

.footer-link:hover{ text-decoration: underline; }

.footer-links-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
}

.footer-fineprint{
  margin-top: 12px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}

.footer-disclaimer{ margin-top: 10px; display:flex; flex-direction:column; gap: 6px; }

.footer-bottom{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  align-items:center;
  color: rgba(210,220,235,.72);
  font-size: 13px;
}

.footer-dot{ opacity: .6; }

/* ===== Responsive ===== */
@media (max-width: 900px){
  .footer-cols{ grid-template-columns: 1fr; }
  .nav-links{ justify-content:flex-start; }
  .header-banner img{ max-width: 100%; }
}

/* ===== Home CTA: responsive, mobile-first ===== */
.home-hero-cta-clean{
  margin-top: 14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 10px;
  width: 100%;
}

/* PC default */
.home-cta-primary{
  min-width: 260px;
  padding: 14px 18px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.home-cta-row{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

.home-cta-secondary{
  min-width: 140px;
  padding: 12px 14px;
  opacity: .95;
}

.home-cta-chips{
  display:flex;
  gap: 8px;
  justify-content:center;
  flex-wrap:wrap;
  width: 100%;
}

.home-cta-links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  margin-top: 2px;
  width: 100%;
  color: rgba(210,220,235,.78);
  font-size: 13px;
}

/* ===== MOBILE ===== */
@media (max-width: 560px){

  /* Make hero padding tighter on small screens */
  .home-hero-wrap{ padding: 16px !important; border-radius: 16px; }

  /* Primary button full width */
  .home-cta-primary{
    width: 100%;
    min-width: 0;
  }

  /* Secondary buttons as 2 columns */
  .home-cta-row{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .home-cta-secondary{
    width: 100%;
    min-width: 0;
    padding: 12px 12px;
  }

  /* Chips centered but not cramped */
  .home-cta-chips{
    justify-content:center;
    gap: 8px;
  }
  .home-cta-chips .pill{
    font-size: 12px;
    padding: 7px 10px;
  }

  /* Links stack cleanly */
  .home-cta-links{
    flex-direction: column;
    gap: 8px;
  }
  .home-cta-dot{ display:none; }

  .home-cta-link{
    width: 100%;
    text-align:center;
    justify-content:center;
  }

  .home-hero-title .hero-line1,
  .home-hero-title .hero-line2{
    font-size: 28px;
    line-height: 1.05;
  }
  .home-hero-sub{
    font-size: 14px;
    line-height: 1.55;
  }
}

/* ===== Mobile nav hard-hide (final override) ===== */
@media (max-width: 900px){
  body:not(.nav-open) .nav-links,
  body:not(.nav-open) #primary-nav{
    display:none !important;
  }
  body.nav-open .nav-links,
  body.nav-open #primary-nav{
    display:flex !important;
  }
}