/* ═══════════════════════════════════════════════════════
   ZOOVIT — Main Stylesheet
   All component styles in one file for simplicity.
═══════════════════════════════════════════════════════ */

/* ── Layout ── */
.container { max-width:var(--max-w); margin:0 auto; padding:0 var(--section-px); width:100%; }
section { padding:var(--section-py) 0; }
.section-header { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:40px; gap:20px; flex-wrap:wrap; }

/* ── Typography ── */
.section-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-size:var(--text-xs);
  font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue); margin-bottom:14px;
}
.section-eyebrow::before { content:''; width:20px; height:2px; background:var(--blue); border-radius:1px; flex-shrink:0; }
.section-title { font-family:var(--font-display); font-size:var(--text-2xl); font-weight:800; color:var(--navy); line-height:1.1; letter-spacing:-.022em; }
.section-title em { font-style:italic; color:var(--blue); }
.section-sub { margin-top:14px; font-size:var(--text-base); color:var(--gray-text); line-height:1.78; max-width:520px; }
.page-title { font-family:var(--font-display); font-size:clamp(28px,4vw,52px); font-weight:800; color:var(--navy); line-height:1.1; margin-bottom:14px; }
.page-title em { color:var(--blue); font-style:italic; }

/* ── Buttons ── */
.btn { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-weight:700; font-size:var(--text-sm); border-radius:50px; padding:12px 26px; cursor:pointer; border:none; transition:var(--trans); text-decoration:none; white-space:nowrap; }
.btn-primary { background:var(--blue); color:var(--white); box-shadow:0 6px 24px rgba(23,97,176,.3); }
.btn-primary:hover { background:var(--navy); transform:translateY(-2px); box-shadow:0 10px 32px rgba(12,51,96,.35); }
.btn-amber { background:var(--amber); color:var(--dark); box-shadow:0 6px 24px rgba(245,165,35,.35); }
.btn-amber:hover { background:var(--amber-dark); transform:translateY(-2px); }
.btn-outline { background:transparent; color:var(--navy); border:1.5px solid var(--gray-soft); }
.btn-outline:hover { border-color:var(--blue); color:var(--blue); background:var(--pale); }
.btn-ghost-white { background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.28); color:white; }
.btn-ghost-white:hover { background:rgba(255,255,255,.22); }
.btn-lg { padding:16px 36px; font-size:15px; }

/* ── View-all link ── */
.view-all-link { font-size:var(--text-sm); font-weight:700; color:var(--blue); display:inline-flex; align-items:center; gap:5px; transition:gap .2s; white-space:nowrap; }
.view-all-link svg { width:14px; height:14px; stroke:var(--blue); fill:none; stroke-width:2.5; transition:transform .2s; }
.view-all-link:hover { gap:9px; }
.view-all-link:hover svg { transform:translateX(3px); }

/* ── Scroll reveal ── */
.reveal { opacity:0; transform:translateY(26px); transition:opacity .6s ease,transform .6s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ══════════════════════════════════════
   NAVIGATION
══════════════════════════════════════ */
#zoovit-nav {
  position:fixed; top:0; left:0; right:0; height:var(--nav-h); z-index:1000;
  background:rgba(255,255,255,.97); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--sky-light); transition:box-shadow .25s;
}
#zoovit-nav.scrolled { box-shadow:var(--shadow-md); }
.nav-inner { max-width:var(--max-w); height:100%; margin:0 auto; padding:0 var(--section-px); display:flex; align-items:center; gap:6px; }
.nav-logo { display:flex; align-items:center; gap:10px; flex-shrink:0; margin-right:14px; text-decoration:none; }
.nav-logo-img { width:40px; height:40px; object-fit:contain; border-radius:8px; }
.nav-logo-text { font-family:var(--font-display); font-size:21px; font-weight:800; color:var(--navy); letter-spacing:-.025em; white-space:nowrap; }
.nav-links { display:flex; align-items:center; gap:1px; margin-left:auto; }
.nav-link { font-family:var(--font-body); font-size:13.5px; font-weight:500; color:var(--gray-text); padding:7px 11px; border-radius:8px; white-space:nowrap; transition:var(--trans-fast); position:relative; text-decoration:none; }
.nav-link:hover { color:var(--navy); background:var(--pale); }
.nav-link--active { color:var(--blue)!important; background:var(--pale); font-weight:600; }
.nav-link--active::after { content:''; position:absolute; bottom:-1px; left:8px; right:8px; height:2px; background:var(--blue); border-radius:1px; }
.nav-link--login { display:inline-flex; align-items:center; gap:5px; border:1.5px solid var(--gray-soft); border-radius:50px; padding:7px 14px!important; font-weight:600!important; color:var(--navy)!important; }
.nav-link--login:hover { border-color:var(--sky); background:var(--pale)!important; color:var(--blue)!important; }
.nav-link--login svg { flex-shrink:0; }
.nav-cta { background:var(--blue); color:var(--white)!important; font-family:var(--font-body); font-weight:700; font-size:13px; padding:9px 20px; border-radius:50px; transition:var(--trans); white-space:nowrap; margin-left:8px; text-decoration:none; display:inline-block; box-shadow:0 4px 14px rgba(23,97,176,.28); }
.nav-cta:hover { background:var(--navy); transform:translateY(-1px); }

/* Desktop: ensure hamburger is hidden when nav links are visible */
@media (min-width:861px) {
  .nav-hamburger { display:none!important; }
  .nav-mobile-menu { display:none!important; }
  .nav-mobile-menu.open { display:none!important; }
}

/* NAV — For Brands special style */
.nav-cta-brands {
  background: linear-gradient(135deg,var(--amber),var(--amber-dark));
  color: var(--dark)!important;
  font-family:var(--font-body); font-weight:800; font-size:13px;
  padding:9px 20px; border-radius:50px; transition:var(--trans);
  white-space:nowrap; margin-left:8px; text-decoration:none;
  display:inline-block; box-shadow:0 4px 14px rgba(245,165,35,.35);
}
.nav-cta-brands:hover { transform:translateY(-1px); box-shadow:0 8px 20px rgba(245,165,35,.4); }

.nav-hamburger { display:none; flex-direction:column; justify-content:center; gap:5px; padding:8px; margin-left:auto; border-radius:8px; transition:background .18s; }
.nav-hamburger:hover { background:var(--pale); }
.nav-hamburger span { display:block; width:22px; height:2.5px; background:var(--navy); border-radius:2px; transition:all .3s ease; transform-origin:center; }
.nav-hamburger.open span:nth-child(1) { transform:translateY(7.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform:translateY(-7.5px) rotate(-45deg); }
.nav-mobile-menu { display:none; position:fixed; top:var(--nav-h); left:0; right:0; background:var(--white); border-bottom:1px solid var(--sky-light); padding:8px 16px 20px; flex-direction:column; gap:2px; z-index:999; box-shadow:0 16px 48px rgba(12,51,96,0.18); max-height:calc(100vh - var(--nav-h)); overflow-y:auto; }
.nav-mobile-menu.open { display:flex; }
.nav-mobile-menu .nav-link { font-size:15px; padding:12px 16px; border-radius:10px; display:block; width:100%; color:var(--gray-text); font-weight:500; text-decoration:none; transition:background .15s,color .15s; }
.nav-mobile-menu .nav-link:hover { background:var(--pale); color:var(--navy); }
.nav-mobile-menu .nav-link--active::after { display:none; }
.nav-mobile-menu .nav-link--active { border-left:3px solid var(--blue); padding-left:13px; color:var(--blue)!important; background:var(--pale); font-weight:600; }
.nav-mobile-menu .nav-cta, .nav-mobile-menu .nav-cta-brands { text-align:center; padding:13px 20px; border-radius:50px; margin-top:10px; display:block; margin-left:0; width:100%; }

/* ══════════════════════════════════════
   WHATSAPP FLOATING BUTTON
══════════════════════════════════════ */
.wa-float {
  position:fixed; bottom:24px; right:24px; z-index:998;
  display:flex; align-items:center; gap:10px;
  background:linear-gradient(135deg,#25D366,#1da851);
  color:white; padding:13px 22px 13px 16px;
  border-radius:50px; font-family:var(--font-body);
  font-weight:700; font-size:14px; text-decoration:none;
  box-shadow:0 8px 28px rgba(37,211,102,.45);
  transition:var(--trans);
}
.wa-float:hover { transform:translateY(-3px); box-shadow:0 14px 36px rgba(37,211,102,.55); color:white; }
.wa-float__icon { width:32px; height:32px; flex-shrink:0; }
.wa-float__icon svg { width:100%; height:100%; }
.wa-float__pulse {
  position:absolute; inset:0; border-radius:50px;
  background:rgba(37,211,102,.35);
  animation:waPulse 2.4s infinite; z-index:-1;
}
@keyframes waPulse { 0%{transform:scale(1);opacity:.6} 70%{transform:scale(1.35);opacity:0} 100%{opacity:0} }
@media (max-width:480px) { .wa-float { bottom:16px; right:16px; padding:11px 16px 11px 12px; font-size:13px; } .wa-float__icon { width:26px; height:26px; } }

/* ══════════════════════════════════════
   HERO
══════════════════════════════════════ */
.hero { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:calc(var(--nav-h) + 60px) var(--section-px) 80px; position:relative; overflow:hidden; background:linear-gradient(168deg,#ddeefb 0%,#eaf5ff 42%,#f6fbff 100%); }
.hero-dot-grid { position:absolute; inset:0; background-image:radial-gradient(circle,rgba(12,51,96,.07) 1px,transparent 1px); background-size:28px 28px; mask-image:radial-gradient(ellipse 80% 65% at 50% 50%,black 15%,transparent 80%); -webkit-mask-image:radial-gradient(ellipse 80% 65% at 50% 50%,black 15%,transparent 80%); }
.hero-glow-l { position:absolute; top:-100px; left:-180px; width:560px; height:560px; border-radius:50%; background:radial-gradient(circle,rgba(74,163,232,.2) 0%,transparent 70%); pointer-events:none; }
.hero-glow-r { position:absolute; bottom:-60px; right:-120px; width:480px; height:480px; border-radius:50%; background:radial-gradient(circle,rgba(245,165,35,.12) 0%,transparent 70%); pointer-events:none; }
.hero-inner { position:relative; z-index:1; text-align:center; width:100%; max-width:800px; margin:0 auto; }
.hero-badge { display:inline-flex; align-items:center; gap:9px; background:white; border:1px solid var(--gray-soft); border-radius:50px; padding:7px 18px 7px 10px; margin-bottom:30px; box-shadow:var(--shadow-xs); animation:fadeUp .5s ease both; }
.hero-badge-dot { width:8px; height:8px; background:var(--amber); border-radius:50%; animation:pulseDot 2s infinite; flex-shrink:0; }
@keyframes pulseDot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.7;transform:scale(1.25)} }
.hero-badge span { font-size:13px; color:var(--navy); font-weight:500; }
.hero-h1 { font-family:var(--font-display); font-size:var(--text-hero); font-weight:600; color:var(--navy); line-height:1.07; letter-spacing:-.022em; margin-bottom:22px; animation:fadeUp .5s .08s ease both; }
.hero-h1 em { font-style:italic; color:var(--blue); }
.hero-h1 .u-amber { position:relative; display:inline-block; color:var(--navy); }
.hero-h1 .u-amber::after { content:''; position:absolute; bottom:-4px; left:0; right:0; height:4px; background:var(--amber); border-radius:2px; }
.hero-sub { font-size:clamp(16px,1.8vw,19px); color:var(--gray-text); line-height:1.75; max-width:620px; margin:0 auto 40px; animation:fadeUp .5s .16s ease both; }
.hero-search-block { animation:fadeUp .5s .24s ease both; width:100%; max-width:640px; margin:0 auto 24px; }
.hero-search { display:flex; align-items:center; background:white; border-radius:var(--r-lg); border:2px solid var(--gray-soft); box-shadow:var(--shadow-md); overflow:hidden; transition:border-color .2s,box-shadow .2s; }
.hero-search:focus-within { border-color:var(--sky); box-shadow:0 8px 40px rgba(74,163,232,.22); }
.hero-search-icon { padding:0 16px; display:flex; align-items:center; flex-shrink:0; }
.hero-search-icon svg { width:19px; height:19px; stroke:var(--sky); stroke-width:2.5; fill:none; }
.hero-search input { flex:1; padding:17px 0; font-size:15px; color:var(--dark); border:none; outline:none; background:transparent; min-width:0; }
.hero-search input::placeholder { color:#a8bbc9; }
.hero-search-div { width:1px; height:28px; background:var(--gray-soft); flex-shrink:0; }
.hero-city-pick { display:flex; align-items:center; gap:7px; padding:0 18px; cursor:pointer; white-space:nowrap; font-size:14px; font-weight:600; color:var(--navy); flex-shrink:0; }
.hero-city-pick svg { width:13px; height:13px; fill:var(--sky); }
.hero-search-btn { background:var(--blue); color:white; font-weight:700; font-size:14px; padding:17px 26px; border:none; transition:background .2s; white-space:nowrap; flex-shrink:0; font-family:var(--font-body); }
.hero-search-btn:hover { background:var(--navy); }
.cat-pills { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; animation:fadeUp .5s .32s ease both; }
.cat-pill { display:flex; align-items:center; gap:6px; background:white; border:1.5px solid var(--gray-soft); border-radius:50px; padding:8px 16px; font-size:13px; font-weight:500; color:var(--navy); cursor:pointer; transition:var(--trans); box-shadow:var(--shadow-xs); text-decoration:none; }
.cat-pill:hover { border-color:var(--sky); color:var(--blue); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.cat-pill-icon { font-size:14px; }
.hero-scroll-hint { position:absolute; bottom:28px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; color:rgba(12,51,96,.3); font-size:10px; letter-spacing:.1em; font-weight:700; animation:bounceHint 2.5s infinite; }
.scroll-rod { width:1px; height:30px; background:linear-gradient(to bottom,transparent,rgba(12,51,96,.2)); }
@keyframes bounceHint { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(6px)} }
@keyframes fadeUp { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }

/* ══════════════════════════════════════
   CITY STRIP
══════════════════════════════════════ */
.city-strip { background:var(--navy); overflow:hidden; border-top:1px solid rgba(74,163,232,.18); }
.city-strip-inner { max-width:var(--max-w); margin:0 auto; display:flex; overflow-x:auto; scrollbar-width:none; padding:0 var(--section-px); }
.city-strip-inner::-webkit-scrollbar { display:none; }
.city-chip { display:flex; align-items:center; gap:10px; padding:16px 24px; flex-shrink:0; cursor:pointer; border-right:1px solid rgba(255,255,255,.05); transition:background .2s; }
.city-chip:hover { background:rgba(255,255,255,.06); }
.city-chip.active { background:rgba(74,163,232,.14); }
.city-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.18); }
.city-chip.active .city-dot { background:var(--amber); }
.city-name { font-size:13.5px; font-weight:700; color:white; }
.city-count { font-size:11px; color:rgba(255,255,255,.38); margin-top:2px; }
.city-chip.active .city-name { color:var(--amber); }

/* ══════════════════════════════════════
   FEATURED BUSINESSES
══════════════════════════════════════ */
.featured-section { background:var(--white); padding:var(--section-py) 0; }
.featured-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr; grid-template-rows:auto auto; gap:20px; }
.featured-card--hero { grid-row:1/3; display:flex; flex-direction:column; }
.featured-card { background:var(--white); border-radius:var(--r-xl); border:1.5px solid var(--gray-soft); overflow:hidden; cursor:pointer; transition:var(--trans); position:relative; }
.featured-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:var(--sky-light); }
.featured-card__banner { height:120px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.featured-card--hero .featured-card__banner { height:200px; }
.featured-card__banner-pat { position:absolute; inset:0; background-image:radial-gradient(circle,rgba(255,255,255,.08) 1px,transparent 1px); background-size:18px 18px; }
.featured-card__avatar { width:68px; height:68px; border-radius:18px; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:24px; color:white; position:relative; z-index:1; box-shadow:0 8px 24px rgba(0,0,0,.2); border:3px solid rgba(255,255,255,.25); }
.featured-card--hero .featured-card__avatar { width:88px; height:88px; font-size:30px; }
.featured-card__badge { position:absolute; top:14px; right:14px; background:var(--amber); color:var(--dark); font-family:var(--font-display); font-size:10px; font-weight:700; padding:4px 12px; border-radius:20px; letter-spacing:.04em; z-index:2; }
.featured-card__body { padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; }
.featured-card__tags { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.featured-card__tag { font-size:10px; font-weight:700; padding:3px 10px; border-radius:20px; letter-spacing:.04em; }
.featured-card__tag--city { background:var(--pale); color:var(--blue); }
.featured-card__tag--cat  { background:var(--gray-bg); color:var(--gray-text); }
.featured-card__tag--offer{ background:var(--amber-light); color:#9a5800; }
.featured-card__name { font-family:var(--font-display); font-size:18px; font-weight:800; color:var(--navy); margin-bottom:5px; line-height:1.2; }
.featured-card--hero .featured-card__name { font-size:22px; }
.featured-card__cat { font-size:12px; color:var(--gray-text); margin-bottom:10px; }
.featured-card__desc { font-size:13px; color:var(--gray-text); line-height:1.65; flex:1; margin-bottom:16px; font-weight:300; }
.featured-card__footer { display:flex; align-items:center; justify-content:space-between; padding-top:14px; border-top:1px solid var(--gray-soft); }
.featured-card__rating { display:flex; align-items:center; gap:5px; font-size:12px; color:var(--gray-text); }
.featured-card__stars { color:var(--amber); font-size:12px; }
.featured-card__cta { background:var(--pale); color:var(--blue); font-size:12px; font-weight:700; padding:8px 16px; border-radius:50px; font-family:var(--font-display); transition:background .2s,color .2s; }
.featured-card:hover .featured-card__cta { background:var(--blue); color:white; }

/* ══════════════════════════════════════
   RECENT LISTINGS
══════════════════════════════════════ */
.recent-section { background:var(--gray-bg); padding:var(--section-py) 0; }
.recent-live-dot { display:inline-flex; align-items:center; gap:7px; background:#e6f9ef; color:#1a7a4a; font-family:var(--font-display); font-size:11px; font-weight:700; padding:5px 13px; border-radius:20px; letter-spacing:.04em; }
.recent-live-dot::before { content:''; width:7px; height:7px; background:#1a7a4a; border-radius:50%; animation:livePulse 2s infinite; }
@keyframes livePulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.4)} }
.recent-list { display:flex; flex-direction:column; gap:12px; }
.recent-row { background:var(--white); border-radius:var(--r-lg); border:1.5px solid var(--gray-soft); padding:18px 22px; display:flex; align-items:center; gap:18px; cursor:pointer; transition:var(--trans); position:relative; overflow:hidden; text-decoration:none; }
.recent-row:hover { transform:translateX(4px); box-shadow:var(--shadow-sm); border-color:var(--sky-light); }
.recent-row::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--blue); transform:scaleY(0); transform-origin:bottom; transition:transform .22s ease; border-radius:0 2px 2px 0; }
.recent-row:hover::before { transform:scaleY(1); }
.recent-row__avatar { width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:18px; color:white; flex-shrink:0; }
.recent-row__info { flex:1; min-width:0; }
.recent-row__name { font-family:var(--font-display); font-size:15px; font-weight:700; color:var(--navy); margin-bottom:3px; }
.recent-row__meta { font-size:12px; color:var(--gray-text); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.recent-row__sep { width:3px; height:3px; border-radius:50%; background:var(--gray-soft); }
.recent-row__tags { display:flex; gap:6px; flex-shrink:0; }
.recent-row__tag { font-size:10px; font-weight:700; padding:3px 10px; border-radius:20px; }
.recent-row__tag--city { background:var(--pale); color:var(--blue); }
.recent-row__tag--offer { background:var(--amber-light); color:#9a5800; }
.recent-row__tag--new { background:#e6f9ef; color:#1a7a4a; }
.recent-row__time { font-size:11px; color:var(--gray-text); white-space:nowrap; flex-shrink:0; }
.recent-row__arrow { width:32px; height:32px; border-radius:50%; background:var(--gray-bg); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .2s,transform .2s; }
.recent-row__arrow svg { width:14px; height:14px; stroke:var(--gray-text); fill:none; stroke-width:2.5; transition:stroke .2s; }
.recent-row:hover .recent-row__arrow { background:var(--blue); transform:translateX(2px); }
.recent-row:hover .recent-row__arrow svg { stroke:white; }

/* ══════════════════════════════════════
   BRAND CARDS GRID
══════════════════════════════════════ */
.brands-section { background:var(--gray-bg); }
.brands-header { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:32px; gap:20px; flex-wrap:wrap; }
.brands-filter-tabs { display:flex; gap:7px; flex-wrap:wrap; margin-top:22px; }
.ftab { padding:9px 20px; border-radius:50px; font-size:13px; font-weight:500; border:1.5px solid var(--gray-soft); background:white; color:var(--gray-text); cursor:pointer; transition:var(--trans-fast); font-family:var(--font-display); }
.ftab:hover { border-color:var(--sky); color:var(--blue); }
.ftab.active { background:var(--blue); border-color:var(--blue); color:white; }
.brands-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:16px; }
.brand-card { background:white; border-radius:var(--r-lg); border:1.5px solid var(--gray-soft); padding:26px; cursor:pointer; transition:var(--trans); position:relative; overflow:hidden; text-decoration:none; display:block; }
.brand-card::after { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--blue); transform:scaleX(0); transform-origin:left; transition:transform .3s ease; border-radius:var(--r-lg) var(--r-lg) 0 0; }
.brand-card:hover { transform:translateY(-5px); border-color:var(--sky-light); box-shadow:var(--shadow-lg); }
.brand-card:hover::after { transform:scaleX(1); }
.brand-card-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:16px; }
.brand-avatar { width:54px; height:54px; border-radius:15px; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:20px; color:white; flex-shrink:0; }
.brand-badges { display:flex; flex-direction:column; align-items:flex-end; gap:5px; }
.b-badge { font-size:10px; font-weight:700; padding:4px 11px; border-radius:20px; letter-spacing:.04em; font-family:var(--font-display); }
.b-badge.city  { background:var(--pale); color:var(--blue); }
.b-badge.offer { background:var(--amber-light); color:#9a5800; }
.brand-name { font-family:var(--font-display); font-size:17px; font-weight:700; color:var(--navy); margin-bottom:4px; }
.brand-cat { font-size:12px; color:var(--gray-text); margin-bottom:11px; }
.brand-desc { font-size:13px; color:var(--gray-text); line-height:1.65; margin-bottom:18px; font-weight:300; }
.brand-card-footer { display:flex; align-items:center; justify-content:space-between; }
.brand-city-tag { display:flex; align-items:center; gap:5px; font-size:12px; color:var(--blue); font-weight:500; }
.brand-city-tag svg { width:11px; height:11px; fill:var(--sky); }
.brand-view-btn { background:var(--pale); color:var(--blue); font-size:12px; font-weight:700; padding:8px 16px; border-radius:50px; font-family:var(--font-display); transition:background .2s,color .2s; }
.brand-card:hover .brand-view-btn { background:var(--blue); color:white; }
.brands-load-more {
  text-align:center;
  margin-top:52px;
  padding:36px;
  background:linear-gradient(135deg,var(--pale) 0%,#ddf0fc 100%);
  border-radius:var(--r-xl);
  border:1.5px solid var(--sky-light);
  position:relative;
  overflow:hidden;
}
.brands-load-more::before {
  content:'';
  position:absolute; inset:0;
  background-image:radial-gradient(circle,rgba(12,51,96,.045) 1px,transparent 1px);
  background-size:22px 22px;
  pointer-events:none;
}
.brands-load-more__inner {
  position:relative; z-index:1;
  display:flex; flex-direction:column;
  align-items:center; gap:10px;
}
.brands-load-more__label {
  font-family:var(--font-display);
  font-size:var(--text-xs); font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--blue); margin-bottom:4px;
}
.brands-load-more__count {
  font-family:var(--font-display);
  font-size:var(--text-xl); font-weight:800;
  color:var(--navy); line-height:1;
}
.brands-load-more__sub {
  font-size:var(--text-sm); color:var(--gray-text); margin-bottom:6px;
}
.load-more-btn {
  display:inline-flex; align-items:center; gap:10px;
  background:var(--blue); color:white;
  font-family:var(--font-display); font-weight:700; font-size:15px;
  padding:16px 40px; border-radius:50px; cursor:pointer;
  border:none; transition:var(--trans);
  box-shadow:0 8px 28px rgba(23,97,176,.35);
  position:relative; overflow:hidden;
}
.load-more-btn::after {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.12),transparent);
  border-radius:50px;
}
.load-more-btn:hover {
  background:var(--navy);
  transform:translateY(-3px);
  box-shadow:0 14px 36px rgba(12,51,96,.4);
}
.load-more-btn:disabled {
  opacity:.6; cursor:not-allowed;
  transform:none; box-shadow:none;
}
.load-more-btn svg {
  width:18px; height:18px; flex-shrink:0;
  transition:transform .3s;
}
.load-more-btn:hover:not(:disabled) svg { transform:translateY(3px); }
.brands-load-more__note {
  font-size:12px; color:var(--gray-mid); margin-top:4px;
  display:flex; align-items:center; gap:6px;
}
.brands-load-more__note::before {
  content:''; width:24px; height:1px;
  background:var(--sky-light);
}
.brands-load-more__note::after {
  content:''; width:24px; height:1px;
  background:var(--sky-light);
}

/* ══════════════════════════════════════
   OFFERS STRIP
══════════════════════════════════════ */
.offers-strip { background:var(--navy); padding:24px var(--section-px); }
.offers-label { font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.38); margin-bottom:14px; display:flex; align-items:center; gap:10px; }
.offers-label::after { content:''; flex:1; height:1px; background:rgba(255,255,255,.07); }
.offers-scroll { display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; padding-bottom:3px; }
.offers-scroll::-webkit-scrollbar { display:none; }
.offer-chip { display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); border-radius:50px; padding:11px 20px; flex-shrink:0; cursor:pointer; transition:background .2s; }
.offer-chip:hover { background:rgba(255,255,255,.13); }
.offer-tag-icon { font-size:14px; }
.offer-brand { font-family:var(--font-display); font-size:13px; font-weight:700; color:white; }
.offer-detail { font-size:12px; color:rgba(255,255,255,.48); }
.offer-sep { width:1px; height:16px; background:rgba(255,255,255,.1); }
.offer-city { font-size:11px; font-weight:600; color:var(--amber); font-family:var(--font-display); }

/* ══════════════════════════════════════
   HOW IT WORKS
══════════════════════════════════════ */
.hiw-section { background:white; }
.hiw-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:36px; margin-top:56px; }
.hiw-step { position:relative; }
.hiw-step:not(:last-child)::after { content:''; position:absolute; top:34px; left:calc(100% - 14px); width:28px; height:2px; background:linear-gradient(to right,var(--sky-light),transparent); }
.hiw-num { width:68px; height:68px; border-radius:20px; background:var(--pale); display:flex; align-items:center; justify-content:center; font-size:30px; margin-bottom:22px; position:relative; }
.hiw-num::before { content:''; position:absolute; inset:-3px; border-radius:23px; background:linear-gradient(135deg,var(--sky-light),transparent); z-index:-1; }
.hiw-step h3 { font-family:var(--font-display); font-size:18px; font-weight:700; color:var(--navy); margin-bottom:11px; }
.hiw-step p { font-size:14px; color:var(--gray-text); line-height:1.75; font-weight:300; }

/* ══════════════════════════════════════
   CATEGORIES GRID
══════════════════════════════════════ */
.cats-section { background:var(--gray-bg); }
.cats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:12px; margin-top:44px; }
.cat-card { background:white; border-radius:var(--r-md); border:1.5px solid var(--gray-soft); padding:26px 20px; text-align:center; cursor:pointer; transition:var(--trans); text-decoration:none; display:block; }
.cat-card:hover { transform:translateY(-5px); border-color:var(--sky); box-shadow:var(--shadow-md); }
.cat-card-icon { font-size:34px; display:block; margin-bottom:13px; }
.cat-card-name { font-family:var(--font-display); font-size:14px; font-weight:700; color:var(--navy); margin-bottom:5px; }
.cat-card-count { font-size:12px; color:var(--gray-text); }

/* ══════════════════════════════════════
   NEW BRANDS
══════════════════════════════════════ */
.new-brands-section { background:var(--pale); padding:var(--section-py) 0; }
.new-brands-header { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:28px; flex-wrap:wrap; gap:16px; }
.new-badge { display:inline-flex; align-items:center; gap:7px; background:var(--amber); color:var(--dark); font-family:var(--font-display); font-size:11px; font-weight:700; padding:6px 14px; border-radius:20px; letter-spacing:.04em; }
.new-brands-scroll { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.new-brand-card { background:white; border-radius:var(--r-md); padding:20px; display:flex; align-items:center; gap:14px; cursor:pointer; transition:var(--trans); box-shadow:var(--shadow-sm); border:1.5px solid transparent; }
.new-brand-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--sky-light); }
.nbc-avatar { width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:17px; color:white; flex-shrink:0; }
.nbc-name { font-family:var(--font-display); font-size:14px; font-weight:700; color:var(--navy); }
.nbc-meta { font-size:12px; color:var(--gray-text); margin-top:3px; }
.nbc-new { margin-left:auto; font-size:10px; font-weight:700; background:var(--amber-light); color:#9a5800; padding:4px 10px; border-radius:20px; white-space:nowrap; font-family:var(--font-display); flex-shrink:0; }

/* ══════════════════════════════════════
   TRUST SECTION
══════════════════════════════════════ */
.trust-section { background:white; }
.trust-inner { display:grid; grid-template-columns:1fr 2fr; gap:72px; align-items:center; }
.trust-stats { display:flex; flex-direction:column; gap:16px; margin-top:32px; }
.trust-stat { padding:24px; background:var(--pale); border-radius:var(--r-md); border:1px solid var(--sky-light); transition:box-shadow .2s; }
.trust-stat:hover { box-shadow:var(--shadow-sm); }
.ts-num { font-family:var(--font-display); font-size:clamp(36px,4vw,48px); font-weight:800; color:var(--navy); line-height:1; }
.ts-label { font-size:14px; color:var(--gray-text); margin-top:5px; font-weight:300; }
.trust-quotes { display:flex; flex-direction:column; gap:16px; }
.quote-card { padding:26px; background:var(--gray-bg); border-radius:var(--r-md); border:1.5px solid var(--gray-soft); position:relative; transition:box-shadow .2s; }
.quote-card:hover { box-shadow:var(--shadow-md); }
.quote-card::before { content:'\201C'; position:absolute; top:10px; right:22px; font-family:var(--font-display); font-size:64px; font-weight:800; color:var(--sky-light); line-height:1; pointer-events:none; }
.quote-card__text { font-size:15px; color:var(--dark); line-height:1.72; margin-bottom:16px; font-style:italic; font-weight:300; }
.quote-card__by { display:flex; align-items:center; gap:11px; }
.quote-avatar { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:13px; font-weight:700; color:white; flex-shrink:0; }
.quote-card__name { font-size:13px; font-weight:700; color:var(--navy); font-family:var(--font-display); }
.quote-card__brand { font-size:12px; color:var(--gray-text); margin-top:2px; }

/* ══════════════════════════════════════
   BEHAVIOUR CHANGE BANNER
══════════════════════════════════════ */
.bchange { background:var(--navy); padding:clamp(72px,10vw,120px) var(--section-px); text-align:center; position:relative; overflow:hidden; }
.bchange::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 80% at 50% 50%,rgba(74,163,232,.14) 0%,transparent 70%); }
.bchange::after { content:''; position:absolute; inset:0; background-image:radial-gradient(circle,rgba(255,255,255,.035) 1px,transparent 1px); background-size:32px 32px; }
.bchange-inner { position:relative; z-index:1; max-width:800px; margin:0 auto; }
.bchange-eyebrow { font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.32); margin-bottom:22px; font-family:var(--font-display); }
.bchange-headline { font-family:var(--font-display); font-size:clamp(30px,6vw,68px); font-weight:800; color:white; line-height:1.07; letter-spacing:-.026em; }
.bchange-headline em { font-style:normal; color:var(--amber); }
.bchange-sub { font-size:clamp(16px,2vw,19px); color:rgba(255,255,255,.45); margin-top:22px; font-weight:300; }

/* ══════════════════════════════════════
   INDEX/LANDING PAGE STYLES
   (self-contained for index.php)
══════════════════════════════════════ */
.lp-nav { position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:18px 5%; background:rgba(255,255,255,.88); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid rgba(74,163,232,.15); box-shadow:0 4px 24px rgba(0,0,0,.02); }
.lp-logo { display:flex; align-items:center; gap:10px; }
.lp-logo-icon { width:42px; height:42px; min-width:42px; display:flex; align-items:center; justify-content:center; }
.lp-logo-icon img { width:100%; height:100%; object-fit:contain; }
.lp-logo-text { font-size:22px; font-weight:800; background:linear-gradient(145deg,#0e3a6e,#1a6bbf); -webkit-background-clip:text; color:transparent; font-family:'Archivo',sans-serif; }
.lp-nav-links { display:flex; align-items:center; gap:20px; }
.lp-nav-links a { color:#5a6a7a; font-size:14px; font-weight:600; text-decoration:none; transition:color .2s; font-family:'Archivo',sans-serif; }
.lp-nav-links a:hover { color:#0e3a6e; }
.lp-cta { background:#1a6bbf; color:white!important; padding:12px 32px; border-radius:60px; font-size:16px; font-weight:700; text-decoration:none; font-family:'Archivo',sans-serif; transition:all .3s; box-shadow:0 8px 20px rgba(26,107,191,.3); }
.lp-cta:hover { background:#0e3a6e; transform:translateY(-3px); }

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
footer { background:var(--footer-bg); font-family:var(--font-body); }
.footer-top-band { background:linear-gradient(180deg,#0d2040 0%,var(--footer-bg) 100%); padding:60px var(--section-px) 0; position:relative; overflow:hidden; }
.footer-top-band::before { content:''; position:absolute; top:-80px; left:50%; transform:translateX(-50%); width:800px; height:300px; border-radius:50%; background:radial-gradient(ellipse,rgba(23,97,176,.18) 0%,transparent 70%); pointer-events:none; }
.footer-newsletter { max-width:var(--max-w); margin:0 auto; background:linear-gradient(135deg,rgba(23,97,176,.25) 0%,rgba(12,51,96,.4) 100%); border:1px solid rgba(74,163,232,.22); border-radius:var(--r-xl); padding:36px 40px; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; margin-bottom:56px; position:relative; z-index:1; }
.footer-newsletter__text h4 { font-family:var(--font-display); font-size:20px; font-weight:700; color:var(--white); margin-bottom:5px; }
.footer-newsletter__text p { font-size:14px; color:rgba(255,255,255,.6); line-height:1.5; }
.footer-newsletter__form { display:flex; gap:8px; flex-shrink:0; }
.footer-newsletter__input { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); border-radius:50px; padding:11px 20px; font-size:14px; color:white; outline:none; width:230px; transition:border-color .2s; font-family:var(--font-body); }
.footer-newsletter__input::placeholder { color:rgba(255,255,255,.4); }
.footer-newsletter__input:focus { border-color:var(--sky); }
.footer-newsletter__btn { background:var(--amber); color:var(--dark); border:none; border-radius:50px; padding:11px 22px; font-weight:700; font-size:14px; cursor:pointer; transition:var(--trans-fast); white-space:nowrap; font-family:var(--font-body); }
.footer-newsletter__btn:hover { background:var(--amber-dark); transform:translateY(-1px); }
.footer-main { max-width:var(--max-w); margin:0 auto; padding:0 var(--section-px) 48px; display:grid; grid-template-columns:2.2fr 1fr 1fr 1fr; gap:48px; }
.footer-logo { display:flex; align-items:center; gap:10px; text-decoration:none; margin-bottom:16px; }
.footer-logo-img { width:36px; height:36px; object-fit:contain; border-radius:7px; }
.footer-logo-text { font-family:var(--font-display); font-size:20px; font-weight:800; color:var(--white); letter-spacing:-.02em; }
.footer-tagline { font-size:14px; color:rgba(255,255,255,.62); line-height:1.7; max-width:240px; margin-bottom:24px; }
.footer-socials { display:flex; gap:10px; margin-bottom:28px; }
.footer-social-btn { width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; transition:var(--trans-fast); cursor:pointer; text-decoration:none; }
.footer-social-btn:hover { background:var(--blue); border-color:var(--blue); }
.footer-social-btn svg { width:16px; height:16px; fill:none; stroke:rgba(255,255,255,.7); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.footer-social-btn:hover svg { stroke:white; }
.footer-app-note { font-size:12px; color:rgba(255,255,255,.35); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:50px; padding:6px 14px; display:inline-block; }
.footer-col h5 { font-family:var(--font-body); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.75); margin-bottom:18px; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.07); }
.footer-links { display:flex; flex-direction:column; gap:11px; }
.footer-links a { font-size:14px; color:rgba(255,255,255,.58); transition:color .15s; display:flex; align-items:center; gap:6px; }
.footer-links a::before { content:''; width:0; height:1px; background:var(--sky); transition:width .2s; flex-shrink:0; }
.footer-links a:hover { color:rgba(255,255,255,.95); }
.footer-links a:hover::before { width:12px; }
.footer-divider { max-width:var(--max-w); margin:0 auto; height:1px; background:rgba(255,255,255,.07); margin-left:var(--section-px); margin-right:var(--section-px); }
.footer-bottom { max-width:var(--max-w); margin:0 auto; padding:22px var(--section-px) 30px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.footer-copy { font-size:13px; color:rgba(255,255,255,.32); }
.footer-legal { display:flex; gap:22px; flex-wrap:wrap; }
.footer-legal a { font-size:12px; color:rgba(255,255,255,.32); transition:color .15s; }
.footer-legal a:hover { color:rgba(255,255,255,.7); }

/* ══════════════════════════════════════
   PAGE HERO (inner pages)
══════════════════════════════════════ */
.page-hero { padding:calc(var(--nav-h) + 48px) var(--section-px) 48px; background:linear-gradient(160deg,var(--pale) 0%,var(--white) 60%); border-bottom:1px solid var(--gray-soft); position:relative; overflow:hidden; }
.page-hero::before { content:''; position:absolute; top:-80px; right:-80px; width:400px; height:400px; background:radial-gradient(circle,rgba(74,163,232,.12) 0%,transparent 70%); pointer-events:none; }
.page-hero .container { position:relative; z-index:1; }
.breadcrumb { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--gray-text); margin-bottom:18px; }
.breadcrumb a { color:var(--blue); font-weight:500; }
.breadcrumb svg { width:12px; height:12px; stroke:var(--gray-text); fill:none; stroke-width:2; }

/* ══════════════════════════════════════
   ABOUT PAGE
══════════════════════════════════════ */
.about-hero { min-height:72vh; background:linear-gradient(162deg,#0c3360 0%,#1761b0 55%,#1e86c0 100%); display:flex; align-items:center; padding:calc(var(--nav-h) + 64px) var(--section-px) 80px; position:relative; overflow:hidden; }
.about-hero__bg-dots { position:absolute; inset:0; background-image:radial-gradient(circle,rgba(255,255,255,.055) 1px,transparent 1px); background-size:28px 28px; pointer-events:none; }
.about-hero__glow-left { position:absolute; top:-120px; left:-160px; width:580px; height:580px; border-radius:50%; background:radial-gradient(circle,rgba(74,163,232,.22) 0%,transparent 65%); pointer-events:none; }
.about-hero__glow-right { position:absolute; bottom:-80px; right:-120px; width:460px; height:460px; border-radius:50%; background:radial-gradient(circle,rgba(245,165,35,.14) 0%,transparent 65%); pointer-events:none; }
.about-hero__inner { position:relative; z-index:1; max-width:var(--max-w); margin:0 auto; width:100%; }
.about-hero__eyebrow { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); border-radius:50px; padding:6px 18px; font-family:var(--font-display); font-size:var(--text-xs); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.9); margin-bottom:28px; }
.about-hero__h1 { font-family:var(--font-display); font-size:var(--text-3xl); font-weight:800; color:white; line-height:1.08; letter-spacing:-.025em; margin-bottom:22px; max-width:780px; }
.about-hero__h1 em { font-style:italic; color:var(--amber); }
.about-hero__sub { font-size:clamp(16px,1.8vw,20px); color:rgba(255,255,255,.78); line-height:1.72; max-width:620px; margin-bottom:44px; }
.about-hero__stats { display:flex; align-items:center; gap:0; flex-wrap:wrap; row-gap:20px; }
.about-stat { text-align:left; }
.about-stat__num { font-family:var(--font-display); font-size:clamp(30px,4vw,44px); font-weight:800; color:white; line-height:1; }
.about-stat__label { font-size:13px; color:rgba(255,255,255,.55); margin-top:5px; }
.about-stat__divider { width:1px; height:48px; background:rgba(255,255,255,.18); margin:0 32px; flex-shrink:0; }
.about-mission { padding:var(--section-py) 0; background:var(--white); }
.about-mission__inner { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.about-mission__body { font-size:var(--text-base); color:var(--gray-text); line-height:1.8; margin-top:18px; }
.about-mission__right { display:flex; flex-direction:column; gap:16px; }
.about-mission__card { background:var(--gray-bg); border:1.5px solid var(--gray-soft); border-radius:var(--r-lg); padding:26px 24px; transition:var(--trans); }
.about-mission__card:hover { box-shadow:var(--shadow-sm); border-color:var(--sky-light); }
.about-mission__card--highlight { background:var(--pale); border-color:var(--sky-light); box-shadow:var(--shadow-xs); }
.about-mission__card-icon { font-size:28px; margin-bottom:12px; display:block; }
.about-mission__card h3 { font-family:var(--font-display); font-size:17px; font-weight:700; color:var(--navy); margin-bottom:8px; }
.about-mission__card p { font-size:14px; color:var(--gray-text); line-height:1.72; }
.about-values { padding:var(--section-py) 0; background:var(--gray-bg); }
.about-values__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:44px; }
.about-value-card { background:var(--white); border:1.5px solid var(--gray-soft); border-radius:var(--r-lg); padding:30px 24px; position:relative; overflow:hidden; transition:var(--trans); }
.about-value-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--sky-light); }
.about-value-card__num { font-family:var(--font-display); font-size:44px; font-weight:800; color:var(--gray-soft); line-height:1; position:absolute; top:16px; right:20px; }
.about-value-card__icon { font-size:34px; display:block; margin-bottom:16px; }
.about-value-card h3 { font-family:var(--font-display); font-size:17px; font-weight:700; color:var(--navy); margin-bottom:10px; }
.about-value-card p { font-size:14px; color:var(--gray-text); line-height:1.75; }
.about-diff { padding:var(--section-py) 0; background:var(--white); }
.about-diff__inner { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.about-diff__list { list-style:none; display:flex; flex-direction:column; gap:18px; margin-top:32px; }
.about-diff__list li { display:flex; align-items:flex-start; gap:14px; font-size:var(--text-base); color:var(--gray-text); line-height:1.65; }
.about-diff__list-icon { width:26px; height:26px; border-radius:50%; background:#e6f9ef; color:#1a7a4a; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; flex-shrink:0; margin-top:1px; }
.about-diff__list strong { color:var(--navy); }
.about-diff__visual { position:relative; height:400px; background:linear-gradient(135deg,var(--pale) 0%,#ddf0fc 100%); border-radius:var(--r-xl); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.about-diff__visual::before { content:''; position:absolute; inset:0; background-image:radial-gradient(circle,rgba(12,51,96,.05) 1px,transparent 1px); background-size:22px 22px; }
.about-diff__center { width:100px; height:100px; border-radius:24px; background:white; box-shadow:var(--shadow-md); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; z-index:2; font-family:var(--font-display); font-weight:800; font-size:13px; color:var(--navy); }
.about-diff__bubble { position:absolute; background:white; border-radius:50px; padding:10px 18px; display:flex; align-items:center; gap:8px; font-family:var(--font-body); font-size:13px; font-weight:600; color:var(--navy); box-shadow:var(--shadow-sm); z-index:2; white-space:nowrap; animation:floatB 5s ease-in-out infinite; }
.about-diff__bubble-icon { font-size:16px; }
.about-diff__bubble--1 { top:18%;  left:6%;  animation-delay:0s; }
.about-diff__bubble--2 { top:18%;  right:6%; animation-delay:1.2s; }
.about-diff__bubble--3 { bottom:22%; left:8%; animation-delay:2.4s; }
.about-diff__bubble--4 { bottom:22%; right:6%; animation-delay:.6s; }
@keyframes floatB { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.about-team { padding:var(--section-py) 0; background:var(--gray-bg); }
.about-team__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:44px; }
.about-team-card { background:var(--white); border:1.5px solid var(--gray-soft); border-radius:var(--r-lg); padding:30px 24px 24px; text-align:center; transition:var(--trans); }
.about-team-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--sky-light); }
.about-team-card__avatar { width:80px; height:80px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:26px; color:white; margin:0 auto 18px; box-shadow:var(--shadow-sm); }
.about-team-card__name { font-family:var(--font-display); font-size:16px; font-weight:700; color:var(--navy); margin-bottom:4px; }
.about-team-card__role { font-size:13px; color:var(--blue); font-weight:600; margin-bottom:12px; }
.about-team-card__bio { font-size:13.5px; color:var(--gray-text); line-height:1.7; margin-bottom:18px; }
.about-team-card__links { display:flex; gap:8px; justify-content:center; }
.about-team-card__link { width:32px; height:32px; border-radius:8px; background:var(--gray-bg); border:1px solid var(--gray-soft); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:var(--gray-text); text-decoration:none; transition:var(--trans-fast); }
.about-team-card__link:hover { background:var(--blue); color:white; border-color:var(--blue); }
.about-timeline { padding:var(--section-py) 0; background:var(--white); }
.about-timeline__inner { display:grid; grid-template-columns:1fr 2fr; gap:80px; align-items:start; }
.about-timeline__steps { display:flex; flex-direction:column; gap:0; position:relative; padding-left:28px; }
.about-timeline__steps::before { content:''; position:absolute; left:10px; top:12px; bottom:12px; width:2px; background:linear-gradient(to bottom,var(--blue) 0%,var(--sky-light) 70%,transparent 100%); }
.about-tl-item { display:flex; gap:24px; padding-bottom:40px; position:relative; }
.about-tl-item:last-child { padding-bottom:0; }
.about-tl-item__dot { width:22px; height:22px; border-radius:50%; flex-shrink:0; margin-top:3px; position:absolute; left:-34px; border:3px solid var(--white); z-index:1; }
.about-tl-item__dot--done   { background:var(--blue); box-shadow:0 0 0 2px var(--sky-light); }
.about-tl-item__dot--active { background:var(--amber); box-shadow:0 0 0 2px var(--amber-light); animation:tlPulse 2s infinite; }
.about-tl-item__dot--future { background:var(--gray-soft); box-shadow:0 0 0 2px var(--gray-soft); }
@keyframes tlPulse { 0%,100%{box-shadow:0 0 0 2px var(--amber-light)} 50%{box-shadow:0 0 0 6px rgba(245,165,35,.2)} }
.about-tl-item__content { flex:1; }
.about-tl-item__date { font-family:var(--font-display); font-size:var(--text-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--blue); margin-bottom:6px; }
.about-tl-item__content h3 { font-family:var(--font-display); font-size:18px; font-weight:700; color:var(--navy); margin-bottom:8px; }
.about-tl-item__content p { font-size:14px; color:var(--gray-text); line-height:1.75; }
.about-cta-band { background:linear-gradient(135deg,var(--navy) 0%,#1a3a6e 100%); padding:64px 0; position:relative; overflow:hidden; }
.about-cta-band::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 80% at 50% 50%,rgba(74,163,232,.15) 0%,transparent 70%); pointer-events:none; }
.about-cta-band::after { content:''; position:absolute; inset:0; background-image:radial-gradient(circle,rgba(255,255,255,.03) 1px,transparent 1px); background-size:28px 28px; pointer-events:none; }
.about-cta-band__inner { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.about-cta-band__h2 { font-family:var(--font-display); font-size:clamp(22px,3vw,34px); font-weight:800; color:white; margin-bottom:10px; line-height:1.2; }
.about-cta-band__sub { font-size:var(--text-base); color:rgba(255,255,255,.62); line-height:1.65; max-width:460px; }
.about-cta-band__actions { display:flex; align-items:center; gap:18px; flex-shrink:0; flex-wrap:wrap; }
.about-cta-band__link { font-size:15px; font-weight:700; color:rgba(255,255,255,.8); text-decoration:none; transition:color .18s; }
.about-cta-band__link:hover { color:white; }

/* ══════════════════════════════════════
   INDEX COMPARISON TABLE (reused in about)
══════════════════════════════════════ */
.compare-table { margin-top:48px; border-radius:var(--r-xl); overflow:hidden; border:2px solid var(--sky-light); box-shadow:var(--shadow-md); }
.compare-header { display:grid; grid-template-columns:2fr 1.5fr 1.5fr; background:var(--navy); }
.col-head { padding:24px 30px; font-family:var(--font-display); font-weight:700; font-size:17px; }
.col-head:first-child { color:rgba(255,255,255,.7); }
.col-head.zoovit { color:var(--amber); display:flex; align-items:center; gap:12px; }
.zoovit-star { background:var(--amber); color:var(--dark); font-size:12px; padding:4px 14px; border-radius:30px; font-weight:800; }
.col-head.others { color:rgba(255,255,255,.6); }
.compare-row { display:grid; grid-template-columns:2fr 1.5fr 1.5fr; border-top:1px solid var(--sky-light); transition:background .2s; }
.compare-row:hover { background:var(--pale); }
.compare-row:nth-child(even) { background:#fafdff; }
.compare-row:nth-child(even):hover { background:var(--pale); }
.compare-cell { padding:22px 30px; font-size:16px; display:flex; align-items:center; gap:14px; }
.compare-cell.label { font-weight:700; color:var(--dark); }
.compare-cell.yes { color:#166b37; }
.compare-cell.no  { color:#b13e00; }
.yes-icon,.no-icon { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.yes-icon { background:#e2f3e4; }
.no-icon  { background:#ffebe2; }
.yes-icon svg,.no-icon svg { width:16px; height:16px; }

/* ══════════════════════════════════════
   STAKES SECTION
══════════════════════════════════════ */
.stakes-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:64px; }
.stake-card { padding:36px; border-radius:var(--r-xl); background:linear-gradient(145deg,#fffaf5,#fff5ec); border:1px solid #ffdec2; position:relative; overflow:hidden; transition:var(--trans); box-shadow:var(--shadow-xs); }
.stake-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-md); border-color:#f5b26b; }
.stake-card::before { content:''; position:absolute; top:-20px; right:-20px; width:140px; height:140px; background:rgba(245,166,35,.05); border-radius:50%; }
.stake-num { font-family:var(--font-display); font-size:52px; font-weight:900; color:#f5b78b; line-height:1; margin-bottom:18px; }
.stake-card h4 { font-size:20px; font-weight:800; color:#b34a00; margin-bottom:14px; font-family:var(--font-display); }
.stake-card p { font-size:16px; color:#6b3f2c; line-height:1.7; }

/* ══════════════════════════════════════
   FAQ
══════════════════════════════════════ */
.faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:64px; }
.faq-item { background:white; border-radius:var(--r-xl); border:2px solid var(--sky-light); overflow:hidden; transition:var(--trans); }
.faq-item:hover { border-color:var(--sky); box-shadow:0 12px 28px rgba(74,163,232,.15); }
.faq-q { padding:24px 28px; font-weight:700; font-size:17px; color:var(--dark); cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-family:var(--font-display); user-select:none; }
.faq-arrow { width:36px; height:36px; background:var(--pale); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:var(--trans); }
.faq-arrow svg { width:18px; height:18px; stroke:var(--blue); transition:var(--trans); }
.faq-item.open .faq-arrow { transform:rotate(180deg); background:var(--blue); }
.faq-item.open .faq-arrow svg { stroke:white; }
.faq-a { max-height:0; overflow:hidden; transition:max-height .5s ease,padding .3s; font-size:16px; color:var(--gray-text); line-height:1.7; padding:0 28px; }
.faq-item.open .faq-a { max-height:300px; padding:0 28px 28px; }

/* ══════════════════════════════════════
   GUIDE STEPS (landing)
══════════════════════════════════════ */
.guide-steps { display:flex; flex-direction:column; gap:0; margin-top:64px; max-width:860px; }
.guide-step { display:grid; grid-template-columns:80px 1fr; gap:32px; padding-bottom:52px; position:relative; }
.guide-step:not(:last-child)::after { content:''; position:absolute; left:39px; top:80px; bottom:10px; width:2px; background:linear-gradient(to bottom,var(--sky),transparent); }
.step-circle { width:80px; height:80px; border-radius:50%; background:linear-gradient(145deg,var(--blue),var(--navy)); color:white; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:900; font-size:28px; flex-shrink:0; z-index:2; box-shadow:0 12px 24px rgba(23,97,176,.4); }
.step-content h4 { font-size:24px; font-weight:800; color:var(--dark); margin-bottom:12px; margin-top:18px; font-family:var(--font-display); }
.step-content p { font-size:18px; color:var(--gray-text); line-height:1.7; }

/* ══════════════════════════════════════
   CONTACT / FORM STYLES
══════════════════════════════════════ */
.contact-section { background:linear-gradient(135deg,#0b2c4f,#13548f); position:relative; overflow:hidden; padding:var(--section-py) 0; }
.contact-section::before { content:''; position:absolute; top:-150px; right:-150px; width:700px; height:700px; background:rgba(74,163,232,.15); border-radius:50%; pointer-events:none; }
.contact-inner { display:grid; grid-template-columns:1fr 1.2fr; gap:90px; align-items:center; position:relative; z-index:2; }
.contact-left .section-title { color:white; }
.contact-left .section-sub { color:rgba(255,255,255,.85); }
.contact-urgency { margin-top:40px; padding:26px 28px; background:rgba(0,0,0,.2); backdrop-filter:blur(8px); border:1px solid rgba(245,166,35,.5); border-radius:var(--r-xl); }
.contact-urgency strong { color:var(--amber); font-family:var(--font-display); font-size:20px; display:block; margin-bottom:6px; font-weight:800; }
.contact-urgency span { font-size:16px; color:rgba(255,255,255,.9); }
.slots-bar { margin-top:18px; height:10px; background:rgba(255,255,255,.15); border-radius:5px; overflow:hidden; }
.slots-fill { height:100%; width:62%; background:linear-gradient(90deg,var(--amber),#ffb84d); border-radius:5px; }
.slots-label { font-size:14px; color:rgba(255,255,255,.65); margin-top:10px; }
.form-card { background:white; border-radius:var(--r-2xl); padding:48px; box-shadow:0 50px 110px rgba(0,0,0,.5); }
.form-card h3 { font-size:28px; font-weight:900; color:var(--dark); margin-bottom:8px; font-family:var(--font-display); }
.form-card p { font-size:16px; color:var(--gray-text); margin-bottom:30px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-group.full { grid-column:1/-1; }
.form-group label { font-size:15px; font-weight:600; color:var(--dark); margin-bottom:6px; display:block; }
.form-group input, .form-group select, .form-group textarea { width:100%; padding:16px 20px; border:1.5px solid #e2eaf2; border-radius:var(--r-md); font-size:17px; font-family:var(--font-body); color:var(--dark); background:#f8fafd; outline:none; transition:var(--trans); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:var(--sky); background:white; box-shadow:0 0 0 5px rgba(74,163,232,.1); }
.form-group textarea { height:120px; resize:vertical; }
.form-submit { width:100%; margin-top:28px; background:linear-gradient(135deg,var(--blue),var(--navy)); color:white; font-family:var(--font-body); font-weight:800; font-size:18px; padding:20px; border:none; border-radius:60px; cursor:pointer; transition:var(--trans); box-shadow:0 12px 32px rgba(23,97,176,.5); }
.form-submit:hover:not(:disabled) { background:linear-gradient(135deg,var(--navy),#0a2a4a); transform:translateY(-3px); box-shadow:0 20px 40px rgba(12,51,96,.6); }
.form-submit:disabled { opacity:.8; cursor:not-allowed; }
.form-note { text-align:center; font-size:13px; color:#b0bec9; margin-top:18px; }

/* Contact page info cards */
.contact-page-layout { display:grid; grid-template-columns:1fr 420px; gap:56px; align-items:start; padding:56px var(--section-px); max-width:var(--max-w); margin:0 auto; }
.contact-info-cards { display:flex; flex-direction:column; gap:20px; }
.contact-card { background:white; border-radius:var(--r-lg); border:1.5px solid var(--gray-soft); padding:28px; display:flex; gap:20px; align-items:flex-start; transition:var(--trans); }
.contact-card:hover { box-shadow:var(--shadow-sm); border-color:var(--sky-light); }
.contact-card-icon { width:48px; height:48px; border-radius:14px; background:var(--pale); display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.contact-card h4 { font-size:15px; font-weight:700; color:var(--navy); margin-bottom:6px; font-family:var(--font-display); }
.contact-card p { font-size:13.5px; color:var(--gray-text); line-height:1.6; }
.contact-card a { color:var(--blue); font-weight:600; }

/* ══════════════════════════════════════
   BLOG STYLES
══════════════════════════════════════ */
.blog-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:28px; margin-top:40px; }
.blog-card { background:white; border-radius:var(--r-lg); border:1.5px solid var(--gray-soft); overflow:hidden; transition:var(--trans); cursor:pointer; display:flex; flex-direction:column; text-decoration:none; }
.blog-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:var(--sky-light); }
.blog-card-img { height:200px; display:flex; align-items:center; justify-content:center; font-size:48px; flex-shrink:0; }
.blog-card-body { padding:24px; display:flex; flex-direction:column; flex:1; }
.blog-tag { display:inline-block; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; background:var(--pale); color:var(--blue); padding:4px 12px; border-radius:50px; margin-bottom:12px; width:fit-content; }
.blog-card-title { font-family:var(--font-display); font-size:19px; font-weight:700; color:var(--navy); line-height:1.3; margin-bottom:10px; }
.blog-card-excerpt { font-size:13.5px; color:var(--gray-text); line-height:1.65; flex:1; margin-bottom:18px; }
.blog-card-meta { display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--gray-soft); padding-top:14px; font-size:12px; color:var(--gray-text); }

/* ══════════════════════════════════════
   NEWS STYLES
══════════════════════════════════════ */
.news-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:24px; }
.news-card { background:white; border-radius:var(--r-lg); border:1.5px solid var(--gray-soft); overflow:hidden; transition:var(--trans); cursor:pointer; display:flex; flex-direction:column; }
.news-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--sky-light); }
.news-card-img { height:180px; display:flex; align-items:center; justify-content:center; font-size:44px; }
.news-card-body { padding:22px; display:flex; flex-direction:column; flex:1; }
.news-source { font-size:11px; font-weight:700; color:var(--blue); letter-spacing:.06em; text-transform:uppercase; }
.news-date { font-size:11px; color:var(--gray-text); }
.news-card-title { font-family:var(--font-display); font-size:17px; font-weight:700; color:var(--navy); line-height:1.3; margin-bottom:10px; margin-top:8px; }
.news-card-excerpt { font-size:13px; color:var(--gray-text); line-height:1.65; flex:1; margin-bottom:16px; }
.news-tag { font-size:11px; padding:4px 12px; border-radius:50px; background:var(--pale); color:var(--blue); font-weight:600; }

/* ══════════════════════════════════════
   BUSINESS FILTER
══════════════════════════════════════ */
.filter-layout { display:grid; grid-template-columns:280px 1fr; gap:32px; align-items:start; padding:40px var(--section-px); max-width:var(--max-w); margin:0 auto; }
.filter-panel { position:sticky; top:calc(var(--nav-h) + 18px); background:white; border-radius:var(--r-lg); border:1.5px solid var(--gray-soft); padding:28px; }
.filter-panel-title { font-family:var(--font-display); font-size:17px; font-weight:700; color:var(--navy); margin-bottom:24px; display:flex; align-items:center; justify-content:space-between; }
.filter-reset { font-size:12px; color:var(--blue); font-weight:600; cursor:pointer; }
.filter-group { margin-bottom:26px; }
.filter-group-label { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gray-text); margin-bottom:12px; display:block; }
.filter-options { display:flex; flex-direction:column; gap:8px; }
.filter-opt { display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--dark); cursor:pointer; }
.filter-opt input[type="checkbox"] { width:16px; height:16px; accent-color:var(--blue); border-radius:4px; flex-shrink:0; cursor:pointer; }
.filter-opt-count { font-size:11px; color:var(--gray-text); margin-left:auto; }
.listing-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; flex-wrap:wrap; gap:12px; }
.listing-title { font-family:var(--font-display); font-size:22px; font-weight:700; color:var(--navy); }
.listing-count { font-size:13px; color:var(--gray-text); margin-top:2px; }
.listing-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; }
.pagination { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:48px; flex-wrap:wrap; }
.page-btn { width:40px; height:40px; border-radius:var(--r-sm); border:1.5px solid var(--gray-soft); background:white; font-size:14px; font-weight:600; color:var(--navy); cursor:pointer; transition:var(--trans-fast); display:flex; align-items:center; justify-content:center; }
.page-btn:hover { border-color:var(--sky); color:var(--blue); }
.page-btn.active { background:var(--blue); border-color:var(--blue); color:white; }

/* ══════════════════════════════════════
   LOGIN
══════════════════════════════════════ */
.login-page { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:100px var(--section-px) 60px; background:linear-gradient(140deg,var(--pale) 0%,white 55%,var(--gray-bg) 100%); position:relative; overflow:hidden; }
.login-page::before { content:''; position:absolute; top:-120px; right:-120px; width:500px; height:500px; background:radial-gradient(circle,rgba(74,163,232,.1) 0%,transparent 70%); pointer-events:none; }
.login-card { background:white; border-radius:var(--r-xl); border:1.5px solid var(--gray-soft); padding:48px; max-width:460px; width:100%; box-shadow:var(--shadow-lg); position:relative; z-index:1; }
.login-title { font-family:var(--font-display); font-size:28px; font-weight:800; color:var(--navy); margin-bottom:6px; }
.login-sub { font-size:14px; color:var(--gray-text); margin-bottom:32px; }
.login-tabs { display:flex; background:var(--gray-bg); border-radius:var(--r-md); padding:4px; gap:4px; margin-bottom:28px; }
.login-tab-btn { flex:1; padding:10px; border-radius:calc(var(--r-md) - 2px); border:none; font-size:14px; font-weight:600; cursor:pointer; color:var(--gray-text); background:transparent; transition:var(--trans); font-family:var(--font-body); }
.login-tab-btn.active { background:white; color:var(--navy); box-shadow:0 2px 8px rgba(12,51,96,.1); }
.login-divider { display:flex; align-items:center; gap:16px; font-size:12px; color:var(--gray-text); margin:22px 0; }
.login-divider::before,.login-divider::after { content:''; flex:1; height:1px; background:var(--gray-soft); }
.social-login-btn { width:100%; display:flex; align-items:center; justify-content:center; gap:12px; padding:13px; border:1.5px solid var(--gray-soft); border-radius:var(--r-md); font-size:14px; font-weight:600; color:var(--dark); background:white; cursor:pointer; transition:var(--trans-fast); margin-bottom:12px; font-family:var(--font-body); }
.social-login-btn:hover { border-color:var(--sky); background:var(--gray-bg); }

/* ══════════════════════════════════════
   SUPPORT
══════════════════════════════════════ */
.support-search-wrap { max-width:600px; margin:32px auto 0; }
.support-search { display:flex; align-items:center; gap:12px; background:white; border:2px solid var(--sky-light); border-radius:50px; padding:6px 8px 6px 22px; box-shadow:var(--shadow-sm); }
.support-search:focus-within { border-color:var(--sky); box-shadow:0 0 0 4px rgba(74,163,232,.12); }
.support-search input { flex:1; border:none; background:transparent; font-size:15px; color:var(--dark); outline:none; font-family:var(--font-body); }
.support-search button { background:var(--blue); color:white; border:none; padding:11px 24px; border-radius:50px; font-weight:700; font-size:14px; cursor:pointer; transition:background .2s; font-family:var(--font-body); }
.support-search button:hover { background:var(--navy); }
.faq-cats { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px; padding:40px 0; }
.faq-cat-card { background:white; border-radius:var(--r-lg); border:1.5px solid var(--gray-soft); padding:28px 22px; text-align:center; cursor:pointer; transition:var(--trans); }
.faq-cat-card:hover { border-color:var(--sky); transform:translateY(-3px); box-shadow:var(--shadow-sm); }
.faq-cat-icon { font-size:32px; margin-bottom:12px; display:block; }
.faq-cat-name { font-size:14px; font-weight:700; color:var(--navy); margin-bottom:4px; font-family:var(--font-display); }
.faq-cat-count { font-size:12px; color:var(--gray-text); }
.accordion-item { border:1.5px solid var(--gray-soft); border-radius:var(--r-md); margin-bottom:10px; overflow:hidden; background:white; }
.accordion-head { display:flex; align-items:center; justify-content:space-between; padding:18px 22px; cursor:pointer; transition:background .15s; font-size:15px; font-weight:600; color:var(--navy); gap:16px; }
.accordion-head:hover { background:var(--gray-bg); }
.accordion-head.open { background:var(--pale); color:var(--blue); }
.accordion-chevron { width:18px; height:18px; flex-shrink:0; transition:transform .3s; stroke:currentColor; fill:none; stroke-width:2; }
.accordion-head.open .accordion-chevron { transform:rotate(180deg); }
.accordion-body { max-height:0; overflow:hidden; transition:max-height .3s ease,padding .3s; font-size:14px; color:var(--gray-text); line-height:1.75; }
.accordion-body.open { max-height:400px; padding:0 22px 20px; }

/* ══════════════════════════════════════
   STORE / BUSINESS DETAIL
══════════════════════════════════════ */
.biz-hero { background:white; border-bottom:1px solid var(--gray-soft); }
.biz-hero-inner { max-width:var(--max-w); margin:0 auto; display:grid; grid-template-columns:1fr auto; align-items:center; gap:32px; padding:calc(var(--nav-h) + 32px) var(--section-px) 40px; border-bottom:1px solid var(--gray-soft); flex-wrap:wrap; }
.biz-hero-left { display:flex; gap:28px; align-items:flex-start; }
.biz-logo-big { width:88px; height:88px; border-radius:22px; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:28px; color:white; flex-shrink:0; box-shadow:0 8px 28px rgba(12,51,96,.2); }
.biz-name { font-family:var(--font-display); font-size:clamp(24px,3vw,38px); font-weight:800; color:var(--navy); margin-bottom:6px; }
.biz-cat-line { font-size:14px; color:var(--gray-text); margin-bottom:12px; }
.biz-badges { display:flex; gap:8px; flex-wrap:wrap; }
.biz-badge { font-size:11px; font-weight:700; padding:5px 14px; border-radius:50px; letter-spacing:.04em; }
.biz-badge.city     { background:var(--pale); color:var(--blue); }
.biz-badge.offer    { background:var(--amber-light); color:#a06000; }
.biz-badge.verified { background:#e6f9ef; color:#1a7a4a; }
.biz-action-btn { display:flex; align-items:center; gap:10px; padding:14px 22px; border-radius:50px; border:none; font-size:14px; font-weight:700; cursor:pointer; transition:var(--trans); font-family:var(--font-body); text-decoration:none; justify-content:center; }
.biz-action-btn.primary   { background:var(--blue); color:white; }
.biz-action-btn.primary:hover { background:var(--navy); transform:translateY(-1px); }
.biz-action-btn.secondary { background:white; color:var(--navy); border:1.5px solid var(--gray-soft); }
.biz-action-btn.secondary:hover { border-color:var(--sky); color:var(--blue); }
.biz-action-btn.whatsapp  { background:#25D366; color:white; }
.biz-action-btn.whatsapp:hover { background:#1eb458; }
.biz-detail-layout { display:grid; grid-template-columns:1fr 320px; gap:40px; align-items:start; padding:48px var(--section-px); max-width:var(--max-w); margin:0 auto; }

/* ══════════════════════════════════════
   CATEGORIES PAGE
══════════════════════════════════════ */
.cats-hero-page { padding:calc(var(--nav-h) + 56px) var(--section-px) 56px; background:linear-gradient(160deg,var(--pale) 0%,#d8ecfb 48%,var(--white) 100%); position:relative; overflow:hidden; }
.cats-hero-page__dots { position:absolute; inset:0; background-image:radial-gradient(circle,rgba(12,51,96,.06) 1px,transparent 1px); background-size:26px 26px; mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,black 20%,transparent 80%); -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,black 20%,transparent 80%); }
.cats-hero-page__glow { position:absolute; top:-90px; right:-100px; width:480px; height:480px; border-radius:50%; background:radial-gradient(circle,rgba(74,163,232,.16) 0%,transparent 70%); pointer-events:none; }
.cats-hero-page__inner { position:relative; z-index:1; max-width:680px; }
.cats-h1 { font-family:var(--font-display); font-size:var(--text-3xl); font-weight:800; color:var(--navy); line-height:1.08; letter-spacing:-.022em; margin-bottom:16px; }
.cats-h1 em { font-style:italic; color:var(--blue); }
.cats-search { display:flex; align-items:center; gap:10px; background:var(--white); border:2px solid var(--sky-light); border-radius:var(--r-lg); padding:6px 8px 6px 20px; max-width:520px; box-shadow:var(--shadow-sm); transition:border-color .2s,box-shadow .2s; }
.cats-search:focus-within { border-color:var(--sky); box-shadow:0 0 0 4px rgba(74,163,232,.12); }
.cats-search svg { width:18px; height:18px; stroke:var(--sky); fill:none; stroke-width:2.2; flex-shrink:0; }
.cats-search input { flex:1; border:none; background:transparent; font-size:15px; color:var(--dark); outline:none; font-family:var(--font-body); }
.cats-search input::placeholder { color:#a8bbc9; }
.cats-search-btn { background:var(--blue); color:white; border:none; border-radius:var(--r-md); padding:11px 22px; font-weight:700; font-size:14px; cursor:pointer; transition:background .2s; font-family:var(--font-body); white-space:nowrap; }
.cats-search-btn:hover { background:var(--navy); }
.cats-stat-row { display:flex; gap:36px; flex-wrap:wrap; margin-top:32px; }
.cats-stat__num { font-family:var(--font-display); font-size:30px; font-weight:800; color:var(--navy); line-height:1; }
.cats-stat__label { font-size:13px; color:var(--gray-text); margin-top:3px; }
.cats-feat-section { background:var(--navy); padding:var(--section-py) 0; }
.cats-feat-section .section-eyebrow { color:var(--amber); }
.cats-feat-section .section-eyebrow::before { background:var(--amber); }
.cats-feat-section .section-title { color:white; }
.cats-feat-section .section-title em { color:var(--amber); }
.cats-feat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:40px; }
.cat-feat-card { border-radius:var(--r-xl); padding:36px 30px; position:relative; overflow:hidden; cursor:pointer; transition:var(--trans); text-decoration:none; display:block; }
.cat-feat-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-xl); }
.cat-feat-card__bg { position:absolute; inset:0; background-image:radial-gradient(circle,rgba(255,255,255,.07) 1px,transparent 1px); background-size:20px 20px; }
.cat-feat-card__count { position:absolute; top:16px; right:18px; background:rgba(255,255,255,.15); color:white; font-size:11px; font-weight:700; padding:4px 12px; border-radius:20px; font-family:var(--font-display); z-index:1; }
.cat-feat-card__icon { font-size:52px; display:block; margin-bottom:18px; position:relative; z-index:1; }
.cat-feat-card__name { font-family:var(--font-display); font-size:22px; font-weight:800; color:white; margin-bottom:8px; position:relative; z-index:1; }
.cat-feat-card__desc { font-size:13.5px; color:rgba(255,255,255,.7); line-height:1.65; margin-bottom:22px; position:relative; z-index:1; }
.cat-feat-card__cta { display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25); color:white; font-family:var(--font-display); font-size:13px; font-weight:700; padding:9px 18px; border-radius:50px; transition:background .2s; z-index:1; position:relative; }
.cat-feat-card__cta:hover { background:rgba(255,255,255,.28); }
.cats-all-section { background:var(--white); padding:var(--section-py) 0; }
.city-pill-bar { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:36px; }
.city-pill { display:flex; align-items:center; gap:7px; background:var(--white); border:1.5px solid var(--gray-soft); border-radius:50px; padding:8px 16px; font-size:13px; font-weight:600; color:var(--navy); cursor:pointer; transition:var(--trans-fast); font-family:var(--font-body); }
.city-pill:hover { border-color:var(--sky); color:var(--blue); }
.city-pill.active { background:var(--blue); border-color:var(--blue); color:white; }
.city-pill__dot { width:7px; height:7px; border-radius:50%; background:var(--gray-soft); flex-shrink:0; }
.city-pill.active .city-pill__dot { background:rgba(255,255,255,.55); }
.cats-big-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(195px,1fr)); gap:16px; }
.cat-big-card { background:var(--white); border-radius:var(--r-lg); border:1.5px solid var(--gray-soft); padding:26px 20px 20px; cursor:pointer; transition:var(--trans); text-decoration:none; display:block; position:relative; overflow:hidden; }
.cat-big-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:var(--blue); transform:scaleX(0); transform-origin:left; transition:transform .3s ease; }
.cat-big-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--sky-light); }
.cat-big-card:hover::after { transform:scaleX(1); }
.cat-big-card__icon { font-size:38px; display:block; margin-bottom:15px; transition:transform .2s; }
.cat-big-card:hover .cat-big-card__icon { transform:scale(1.1); }
.cat-big-card__name { font-family:var(--font-display); font-size:15px; font-weight:700; color:var(--navy); margin-bottom:4px; }
.cat-big-card__count { font-size:12px; color:var(--gray-text); margin-bottom:14px; }
.cat-big-card__tags { display:flex; gap:5px; flex-wrap:wrap; }
.cat-big-card__tag { font-size:10px; font-weight:600; background:var(--gray-bg); color:var(--gray-text); padding:3px 9px; border-radius:20px; }
.cats-no-results { display:none; text-align:center; padding:60px 0; }
.cats-no-results__icon { font-size:48px; margin-bottom:16px; }
.cats-cta { background:linear-gradient(135deg,var(--navy) 0%,#1a3a6e 100%); padding:var(--section-py) var(--section-px); text-align:center; position:relative; overflow:hidden; }
.cats-cta::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 80% at 50% 50%,rgba(74,163,232,.15) 0%,transparent 70%); }
.cats-cta::after { content:''; position:absolute; inset:0; background-image:radial-gradient(circle,rgba(255,255,255,.035) 1px,transparent 1px); background-size:28px 28px; }
.cats-cta__inner { position:relative; z-index:1; max-width:620px; margin:0 auto; }
.cats-cta__title { font-family:var(--font-display); font-size:clamp(28px,5vw,52px); font-weight:800; color:white; line-height:1.1; margin-bottom:14px; letter-spacing:-.02em; }
.cats-cta__title em { color:var(--amber); font-style:italic; }
.cats-cta__sub { font-size:clamp(15px,1.7vw,17px); color:rgba(255,255,255,.6); margin-bottom:32px; }
.cats-cta__btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width:1024px) {
  .featured-grid { grid-template-columns:1fr 1fr; }
  .featured-card--hero { grid-row:auto; }
  .about-values__grid { grid-template-columns:1fr 1fr; }
  .about-team__grid { grid-template-columns:1fr 1fr; }
  .cats-feat-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:900px) {
  .hiw-grid { grid-template-columns:1fr; gap:28px; }
  .hiw-step::after { display:none; }
  .trust-inner { grid-template-columns:1fr; gap:40px; }
  .biz-hero-inner { grid-template-columns:1fr; }
  .biz-detail-layout { grid-template-columns:1fr; }
  .stakes-grid { grid-template-columns:1fr 1fr; }
  .faq-grid { grid-template-columns:1fr; }
  .contact-inner { grid-template-columns:1fr; gap:64px; }
  .contact-page-layout { grid-template-columns:1fr; }
  .filter-layout { grid-template-columns:1fr; }
  .filter-panel { position:static; }
}
@media (max-width:860px) {
  .about-mission__inner { grid-template-columns:1fr; gap:40px; }
  .about-diff__inner { grid-template-columns:1fr; gap:48px; }
  .about-timeline__inner { grid-template-columns:1fr; gap:40px; }
  .about-diff__visual { height:280px; }
  .about-cta-band__inner { flex-direction:column; align-items:flex-start; }
  .about-hero__stats { gap:0; }
  .about-stat__divider { margin:0 20px; height:36px; }
  .footer-main { grid-template-columns:1fr 1fr 1fr; gap:36px; }
  .footer-brand { grid-column:1/-1; }
  .footer-newsletter { padding:28px; }
  /* ── FIX: hide desktop nav links, show hamburger ── */
  .nav-links { display:none!important; }
  .nav-hamburger { display:flex!important; }
}
@media (max-width:640px) {
  .hero { padding-top:calc(var(--nav-h) + 36px); }
  .hero-search { border-radius:var(--r-md); }
  .hero-search-div,.hero-city-pick { display:none; }
  .hero-search-btn { padding:17px 18px; font-size:13px; }
  .featured-grid { grid-template-columns:1fr; }
  .recent-row__time { display:none; }
  .brands-grid { grid-template-columns:1fr; }
  .cats-grid { grid-template-columns:repeat(3,1fr); }
  .about-values__grid { grid-template-columns:1fr; }
  .about-team__grid { grid-template-columns:1fr 1fr; }
  .cats-big-grid { grid-template-columns:repeat(2,1fr); }
  .cats-feat-grid { grid-template-columns:1fr; }
  .form-grid { grid-template-columns:1fr; }
  .form-card { padding:36px 24px; }
  .stakes-grid { grid-template-columns:1fr; }
  .compare-table { overflow-x:auto; display:block; }
  .compare-header,.compare-row { min-width:680px; }
  .guide-step { grid-template-columns:1fr; gap:18px; }
  .footer-main { grid-template-columns:1fr 1fr; gap:28px; padding-bottom:36px; }
  .footer-newsletter { flex-direction:column; align-items:flex-start; }
  .footer-newsletter__form { width:100%; }
  .footer-newsletter__input { flex:1; }
  .blog-grid { grid-template-columns:1fr; }
  .news-grid { grid-template-columns:1fr; }
}
@media (max-width:480px) {
  .cats-grid { grid-template-columns:repeat(2,1fr); }
  .about-team__grid { grid-column:1; }
  .footer-main { grid-template-columns:1fr; }
  .about-stat__divider { display:none; }
  .about-hero__stats { gap:24px; }
}

/* ── Load more spinner ── */
@keyframes spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }