@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --navy: #1A2B3C;
  --navy-light: #243a4f;
  --gold: #C9A96E;
  --gold-light: #D4BA88;
  --champagne: #E8DCC8;
  --bg: #F5F5F7;
  --bg-white: #FFFFFF;
  --text-primary: #1A2B3C;
  --text-secondary: #4A5568;
  --text-light: #8A94A6;
  --border: #E2E8F0;
  --shadow-sm: 0 1px 3px rgba(26,43,60,0.06);
  --shadow-md: 0 4px 16px rgba(26,43,60,0.08);
  --shadow-lg: 0 8px 32px rgba(26,43,60,0.12);
  --shadow-xl: 0 16px 48px rgba(26,43,60,0.16);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: 'Inter', -apple-system, sans-serif;
  color: var(--text-primary);
  background: var(--bg);
  line-height: 1.7;
  overflow-x: hidden;
}

h1,h2,h3,h4 { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; line-height: 1.2; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }

/* ─── NAV ─── */
.navbar {
  position: fixed; top:0; left:0; right:0; z-index:1000;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow .3s;
}
.navbar.scrolled { box-shadow: var(--shadow-md); }
.navbar .container { display:flex; align-items:center; justify-content:space-between; height:72px; }
.logo { display:flex; flex-direction:column; text-decoration:none; line-height:1; }
.logo-main { font-family:'Playfair Display',serif; font-size:1.5rem; font-weight:700; color:var(--navy); letter-spacing:3px; }
.logo-sub { font-family:'Inter',sans-serif; font-size:.7rem; font-weight:300; color:var(--text-light); letter-spacing:2px; margin-top:2px; }
.logo-sub .amp { font-weight:500; }
.nav-links { display:flex; gap:2rem; list-style:none; align-items:center; }
.nav-links a { text-decoration:none; color:var(--text-secondary); font-size:.875rem; font-weight:500; letter-spacing:.5px; transition:color .3s; position:relative; }
.nav-links a::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:1.5px; background:var(--gold); transition:width .3s; }
.nav-links a:hover { color:var(--navy); }
.nav-links a:hover::after { width:100%; }
.nav-cta {
  background: var(--navy); color:#fff!important; padding:.6rem 1.4rem; border-radius:4px;
  font-size:.8rem!important; letter-spacing:1px; text-transform:uppercase; transition: all .3s!important;
}
.nav-cta::after { display:none!important; }
.nav-cta:hover { background:var(--gold)!important; color:var(--navy)!important; }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:4px; }
.hamburger span { width:24px; height:2px; background:var(--navy); transition:all .3s; }

/* ─── HERO ─── */
.hero {
  min-height:100vh; display:flex; align-items:center; position:relative;
  background: url('hero-bg.jpg') center top / cover no-repeat;
  overflow:hidden; padding-top:72px;
}
.hero::before {
  content:''; position:absolute; top:0; left:0; right:0; bottom:0;
  background: linear-gradient(160deg, rgba(15,28,40,0.82) 0%, rgba(26,43,60,0.75) 50%, rgba(10,18,28,0.88) 100%);
  z-index:0;
}
.hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; position:relative; z-index:1; }
.hero-content { padding:2rem 0; }
.hero-badge {
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(201,169,110,0.1); border:1px solid rgba(201,169,110,0.2);
  padding:.4rem 1rem; border-radius:2px; margin-bottom:2rem;
}
.hero-badge span { font-size:.75rem; color:var(--gold); letter-spacing:2px; text-transform:uppercase; font-weight:500; }
.hero h1 { font-size:3.2rem; color:#fff; margin-bottom:1.5rem; }
.hero h1 .gold { color:var(--gold); }
.hero-desc { font-size:1.1rem; color:rgba(255,255,255,0.65); line-height:1.8; margin-bottom:2.5rem; max-width:520px; }
.hero-actions { display:flex; gap:1rem; flex-wrap:wrap; }
.btn-primary {
  background:var(--gold); color:var(--navy); padding:.85rem 2rem; border:none; border-radius:3px;
  font-family:'Inter',sans-serif; font-size:.85rem; font-weight:600; letter-spacing:1px;
  text-transform:uppercase; cursor:pointer; transition:all .3s; text-decoration:none;
}
.btn-primary:hover { background:#b8943f; transform:translateY(-2px); box-shadow:0 8px 24px rgba(201,169,110,0.3); }
.btn-outline {
  background:transparent; color:#fff; padding:.85rem 2rem; border:1px solid rgba(255,255,255,0.2);
  border-radius:3px; font-family:'Inter',sans-serif; font-size:.85rem; font-weight:500;
  letter-spacing:1px; text-transform:uppercase; cursor:pointer; transition:all .3s; text-decoration:none;
}
.btn-outline:hover { border-color:var(--gold); color:var(--gold); }
.hero-visual { display:flex; justify-content:center; align-items:center; }
.hero-stats { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.stat-card {
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);
  padding:2rem; border-radius:4px; text-align:center; transition:all .4s;
  backdrop-filter:blur(8px);
}
.stat-card:hover { background:rgba(201,169,110,0.08); border-color:rgba(201,169,110,0.2); transform:translateY(-4px); }
.stat-number { font-family:'Playfair Display',serif; font-size:2.5rem; color:var(--gold); font-weight:700; }
.stat-label { font-size:.8rem; color:rgba(255,255,255,0.5); margin-top:.5rem; letter-spacing:1px; text-transform:uppercase; }

/* ─── TRUST BAR ─── */
.trust-bar { background:var(--bg-white); padding:2.5rem 0 2rem; border-bottom:1px solid var(--border); overflow:hidden; }
.trust-label { text-align:center; font-size:.75rem; color:var(--text-light); letter-spacing:2px; text-transform:uppercase; margin-bottom:1.5rem; }
.marquee-container { overflow:hidden; position:relative; width:100%; mask-image:linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%); -webkit-mask-image:linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%); }
.marquee-track { display:flex; gap:3.5rem; animation:marquee-scroll 60s linear infinite; width:max-content; }
.marquee-track:hover { animation-play-state:paused; }
@keyframes marquee-scroll { 0%{transform:translateX(0)} 100%{transform:translateX(-33.33%)} }
.trust-item { display:flex; align-items:center; gap:.75rem; opacity:.7; transition:opacity .3s; flex-shrink:0; cursor:default; }
.trust-item:hover { opacity:1; }
.trust-item span { font-size:1rem; color:var(--text-secondary); font-weight:500; letter-spacing:.5px; white-space:nowrap; }

/* ─── SECTIONS ─── */
.section { padding:6rem 0; }
.section-dark { background:var(--navy); color:#fff; }
.section-alt { background:var(--bg-white); }
.section-header { text-align:center; max-width:640px; margin:0 auto 4rem; }
.section-header .label {
  font-size:.75rem; color:var(--gold); letter-spacing:3px; text-transform:uppercase;
  font-weight:600; margin-bottom:.75rem; display:block;
}
.section-header h2 { font-size:2.4rem; color:var(--text-primary); margin-bottom:1rem; }
.section-dark .section-header h2 { color:#fff; }
.section-header p { color:var(--text-secondary); font-size:1.05rem; }
.section-dark .section-header p { color:rgba(255,255,255,0.6); }

/* ─── SERVICES ─── */
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.service-card {
  background:var(--bg-white); border:1px solid var(--border); padding:3rem 2.5rem;
  border-radius:12px; position:relative; overflow:hidden;
  transition:all 0.5s cubic-bezier(0.25,1,0.5,1);
  display:flex; flex-direction:column; cursor:pointer;
}
.service-card::before {
  content:''; position:absolute; top:0; left:0; width:100%; height:100%;
  background:var(--navy); transform:scaleY(0); transform-origin:bottom;
  transition:transform 0.5s cubic-bezier(0.25,1,0.5,1); z-index:0;
}
.service-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent; }
.service-card:hover::before, .service-card.active::before { transform:scaleY(1); }
.service-card > * { position:relative; z-index:1; transition:color 0.4s ease; }

.service-card h3 { font-size:1.4rem; margin-bottom:1rem; color:var(--text-primary); }
.service-card:hover h3, .service-card.active h3 { color:#fff; }
.service-card p { color:var(--text-secondary); font-size:.95rem; line-height:1.6; margin-bottom:1.5rem; }
.service-card:hover p, .service-card.active p { color:rgba(255,255,255,0.8); }

.service-card-details {
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows 0.5s cubic-bezier(0.25,1,0.5,1);
}
.service-card-details > div {
  overflow:hidden; opacity:0; transform:translateY(10px);
  transition:all 0.5s cubic-bezier(0.25,1,0.5,1);
}
.service-card:hover .service-card-details,
.service-card.active .service-card-details { grid-template-rows: 1fr; }
.service-card:hover .service-card-details > div,
.service-card.active .service-card-details > div { opacity:1; transform:translateY(0); transition-delay:0.1s; }

.service-card ul { list-style:none; padding-top:0.5rem; border-top:1px solid rgba(255,255,255,0.1); margin-top:0.5rem; }
.service-card li { padding:.4rem 0; color:rgba(255,255,255,0.9); font-size:.9rem; display:flex; align-items:flex-start; gap:.5rem; }
.service-card li::before { content:'—'; color:var(--gold); font-weight:700; flex-shrink:0; }

/* Mobile tap handles hover states naturally */

/* ─── PROCESS ─── */
.process-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; position:relative; }
.process-grid::before {
  content:''; position:absolute; top:40px; left:12%; right:12%;
  height:1px; background:rgba(255,255,255,0.1); z-index:0;
}
.process-grid::after {
  content:''; position:absolute; top:40px; left:12%; width:0;
  height:1px; background:var(--gold); z-index:0;
  transition:width 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.process-grid:has(.process-step:nth-child(1):hover)::after, .process-grid.active-1::after { width: 0%; }
.process-grid:has(.process-step:nth-child(2):hover)::after, .process-grid.active-2::after { width: 25%; }
.process-grid:has(.process-step:nth-child(3):hover)::after, .process-grid.active-3::after { width: 50%; }
.process-grid:has(.process-step:nth-child(4):hover)::after, .process-grid.active-4::after { width: 76%; }

.process-step { text-align:center; position:relative; z-index:1; transition:all 0.5s cubic-bezier(0.25, 1, 0.5, 1); }

.process-grid:has(.process-step:hover) .process-step:not(:hover),
.process-grid.step-active .process-step:not(.active) { opacity:0.3; transform:scale(0.95); }
.process-step:hover, .process-step.active { opacity:1; transform:scale(1.05) translateY(-5px); z-index:2; }

.step-number {
  width:64px; height:64px; border:2px solid var(--gold); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Playfair Display',serif; font-size:1.4rem; color:var(--gold);
  margin:0 auto 1.5rem; background:var(--navy); transition:all .3s; position:relative;
}
.step-number::after {
  content:''; position:absolute; top:-6px; left:-6px; right:-6px; bottom:-6px;
  border:1px solid var(--gold); border-radius:50%; opacity:0; transform:scale(0.8);
  transition:all 0.4s ease; pointer-events:none;
}
.process-step:hover .step-number, .process-step.active .step-number { background:var(--gold); color:var(--navy); box-shadow:0 0 20px rgba(201,169,110,0.4); }
.process-step:hover .step-number::after, .process-step.active .step-number::after {
  animation:pulse-ring 2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}
@keyframes pulse-ring { 0% { transform:scale(1); opacity:0.6; } 100% { transform:scale(1.6); opacity:0; } }

.process-step h4 { color:rgba(255,255,255,0.8); font-size:1.1rem; margin-bottom:.75rem; transition:color 0.3s; }
.process-step p { color:rgba(255,255,255,0.5); font-size:.85rem; line-height:1.6; transition:color 0.3s; }
.process-step:hover h4, .process-step.active h4 { color:#ffffff; }
.process-step:hover p, .process-step.active p { color:#ffffff; }

/* ─── TRANSACTIONS ─── */
.transactions-wrapper {
  overflow:hidden; width:100vw; position:relative; padding:1rem 0;
  margin-left:calc(-50vw + 50%);
  mask-image:linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  -webkit-mask-image:linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}
.transactions-grid {
  display:flex; width:max-content; gap:2rem;
  animation:marquee-tx 40s linear infinite;
}
.transactions-grid:hover { animation-play-state:paused; }
@keyframes marquee-tx { 0%{transform:translateX(-50%)} 100%{transform:translateX(0)} }
.transaction-card {
  width:420px; flex-shrink:0;
  background:#FDFBF7; border:1px solid rgba(201,169,110,0.15); box-shadow:var(--shadow-sm);
  border-radius:12px; padding:2.5rem; position:relative;
  overflow:hidden; transition:all .4s; cursor:pointer;
}
.transaction-card::before {
  content:''; position:absolute; top:0; left:0; bottom:0; width:4px; background:var(--gold);
}
.transaction-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--gold); }
.tx-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:1.5rem; gap:1rem; }
.tx-title { font-family:'Playfair Display',serif; font-size:1.15rem; color:var(--navy); font-weight:700; line-height:1.4; }
.tx-badge {
  background:var(--navy); color:#fff; padding:.3rem .75rem;
  font-size:.65rem; letter-spacing:1px; text-transform:uppercase; border-radius:4px; font-weight:600;
  white-space:nowrap;
}
.tx-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:1.5rem; }
.tx-metric-label { font-size:.7rem; color:var(--text-secondary); text-transform:uppercase; letter-spacing:1px; margin-bottom:.25rem; font-weight:600; }
.tx-metric-value { font-size:1rem; color:var(--navy); font-weight:700; }
.tx-desc { font-size:.85rem; color:var(--text-secondary); line-height:1.7; margin-bottom:1.5rem; font-weight:500; }
.tx-cta {
  display:inline-flex; align-items:center; gap:.5rem; color:var(--navy);
  font-size:.8rem; font-weight:700; text-decoration:none; transition:gap .3s;
}
.tx-cta:hover { gap:.75rem; }
/* ─── TEAM ─── */
.team-section { background: var(--bg); position: relative; overflow: hidden; }
.team-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 5rem; align-items: center; }
.team-content .label { color: var(--gold); }
.team-content h2 { font-size: 2.8rem; margin-bottom: 1.5rem; color: var(--navy); }
.team-intro { font-size: 1.2rem; color: var(--text-secondary); margin-bottom: 3rem; line-height: 1.6; font-weight: 500; }
.team-features { display: flex; flex-direction: column; gap: 2.5rem; margin-bottom: 3rem; }
.team-feature { display: flex; gap: 1.5rem; align-items: flex-start; }
.tf-icon { 
  width: 54px; height: 54px; background: var(--navy); color: var(--gold); 
  border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: var(--shadow-md);
}
.tf-text h4 { font-family: 'Inter', sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--navy); margin-bottom: 0.5rem; }
.tf-text p { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.6; }
.team-quote { 
  padding-left: 2rem; border-left: 3px solid var(--gold); 
  font-style: italic; color: var(--navy); font-size: 1.1rem; font-weight: 500;
  margin-top: 2rem;
}
.team-image-wrap { position: relative; }
.image-frame { position: relative; z-index: 2; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-xl); }
.team-img { width: 100%; height: auto; display: block; filter: contrast(1.05) brightness(1.02); }
@media(max-width: 1024px) {
  .team-grid { grid-template-columns: 1fr; gap: 4rem; }
  .team-image-wrap { max-width: 600px; margin: 0 auto; }
}
@media(max-width: 768px) {
  .team-content h2 { font-size: 2.2rem; }
  .team-intro { font-size: 1.1rem; }
  .tf-icon { width: 48px; height: 48px; }
}

/* ─── CONTACT ─── */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; }
.contact-info h2 { font-size:2rem; margin-bottom:1rem; }
.contact-info p { color:var(--text-secondary); margin-bottom:2rem; }
.contact-features { list-style:none; }
.contact-features li { display:flex; align-items:flex-start; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--border); }
.contact-features li:last-child { border:none; }
.cf-icon { width:40px; height:40px; background:rgba(201,169,110,0.1); border-radius:4px; display:flex; align-items:center; justify-content:center; color:var(--gold); flex-shrink:0; }
.cf-text h4 { font-family:'Inter',sans-serif; font-size:.95rem; font-weight:600; margin-bottom:.25rem; }
.cf-text p { font-size:.85rem; color:var(--text-light); margin:0; }
.contact-form-wrap {
  background:var(--bg-white); border:1px solid var(--border); border-radius:4px;
  padding:2.5rem; box-shadow:var(--shadow-sm);
}
.contact-form-wrap h3 { font-size:1.3rem; margin-bottom:.5rem; }
.contact-form-wrap > p { font-size:.85rem; color:var(--text-light); margin-bottom:2rem; }
.form-group { margin-bottom:1.25rem; }
.form-group label { display:block; font-size:.8rem; font-weight:600; color:var(--text-primary); letter-spacing:.5px; text-transform:uppercase; margin-bottom:.5rem; }
.form-group input, .form-group select, .form-group textarea {
  width:100%; padding:.75rem 1rem; border:1px solid var(--border); border-radius:3px;
  font-family:'Inter',sans-serif; font-size:.9rem; color:var(--text-primary);
  background:var(--bg); transition:border-color .3s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline:none; border-color:var(--gold); }
.form-group textarea { resize:vertical; min-height:100px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-privacy { font-size:.75rem; color:var(--text-light); margin-bottom:1.5rem; line-height:1.6; }
.form-privacy a { color:var(--gold); }
.btn-submit {
  width:100%; background:var(--navy); color:#fff; padding:1rem; border:none; border-radius:3px;
  font-family:'Inter',sans-serif; font-size:.85rem; font-weight:600; letter-spacing:1px;
  text-transform:uppercase; cursor:pointer; transition:all .3s;
}
.btn-submit:hover { background:var(--gold); color:var(--navy); }

/* ─── FOOTER ─── */
.footer { background:var(--navy); padding:4rem 0 2rem; border-top:1px solid rgba(255,255,255,0.05); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; margin-bottom:3rem; }
.footer-brand .logo-main { color:#fff; }
.footer-brand .logo-sub { color:rgba(255,255,255,0.4); }
.footer-brand .logo-sub .amp { color:var(--gold); }
.footer-desc { font-size:.85rem; color:rgba(255,255,255,0.4); margin-top:1rem; line-height:1.7; max-width:300px; }
.footer-col h4 { font-family:'Inter',sans-serif; font-size:.75rem; font-weight:600; color:rgba(255,255,255,0.5); letter-spacing:2px; text-transform:uppercase; margin-bottom:1.25rem; }
.footer-col ul { list-style:none; }
.footer-col li { margin-bottom:.75rem; }
.footer-col a { color:rgba(255,255,255,0.5); font-size:.85rem; text-decoration:none; transition:color .3s; }
.footer-col a:hover { color:var(--gold); }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.08); padding-top:2rem; display:flex; justify-content:space-between; align-items:center; }
.footer-bottom p { font-size:.8rem; color:rgba(255,255,255,0.3); }
.footer-legal { display:flex; gap:1.5rem; }
.footer-legal a { font-size:.8rem; color:rgba(255,255,255,0.3); text-decoration:none; transition:color .3s; }
.footer-legal a:hover { color:var(--gold); }

/* ─── ANIMATIONS ─── */
.fade-up { opacity:0; transform:translateY(30px); transition:all .7s cubic-bezier(.16,1,.3,1); }
.fade-up.visible { opacity:1; transform:translateY(0); }
.fade-up-delay-1 { transition-delay:.15s; }
.fade-up-delay-2 { transition-delay:.3s; }
.fade-up-delay-3 { transition-delay:.45s; }

/* ─── RESPONSIVE ─── */
@media(max-width:1024px){
  .hero h1{font-size:2.5rem}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .process-grid::before, .process-grid::after { display:none; }
}
@media(max-width:768px){
  .nav-links{display:none;position:fixed;top:72px;left:0;right:0;background:var(--bg-white);flex-direction:column;padding:2rem;gap:1.5rem;border-bottom:1px solid var(--border);box-shadow:var(--shadow-lg)}
  .nav-links.open{display:flex}
  .hamburger{display:flex}
  .hero{min-height:80vh; background-position: center 80px; background-color: #0f1c28;}
  .hero-grid{grid-template-columns:1fr}
  .hero-visual{display:none}
  .hero h1{font-size:2rem}
  .services-grid{grid-template-columns:1fr}
  .transaction-card { width:85vw; padding:1.5rem; }
  .contact-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .trust-bar .container{gap:2rem}
  .footer-bottom{flex-direction:column;gap:1rem;text-align:center}

  /* Process Vertical Line */
  .process-grid { grid-template-columns:1fr; gap:3rem; }
  .process-grid::before {
    display:none;
  }
  .process-grid::after {
    display:none;
  }
}
@media(max-width:480px){
  .hero h1{font-size:1.6rem}
  .hero{min-height:75vh; background-position: center 80px; background-color: #0f1c28;}
  .hero-stats{grid-template-columns:1fr}
  .section{padding:4rem 0}
  
  /* Compact Transaction Cards */
  .transaction-card { padding: 1.5rem; }
  .tx-header { flex-direction: column; gap: 0.75rem; align-items: flex-start; }
  .tx-title { font-size: 1.05rem; }
  .tx-metrics { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 1rem; }
  .tx-metric-label { font-size: 0.65rem; }
  .tx-metric-value { font-size: 0.85rem; }
  .tx-desc { font-size: 0.8rem; margin-bottom: 1rem; }
  
  .filter-bar {
    flex-direction:row; flex-wrap:nowrap; justify-content:flex-start;
    overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
    padding-bottom:0.5rem;
  }
  .filter-bar::-webkit-scrollbar { display:none; }
  .filter-btn { white-space:nowrap; flex-shrink:0; }
}