/* ============================================================
   Infini Cards — Design System
   Self-hosted fonts (drop real files into /assets/fonts/), no CDN.
   ============================================================ */

@font-face {
  font-family: 'SFProDisplay';
  src: url('/assets/fonts/SF-Pro-Display-Regular.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'SFProDisplay';
  src: url('/assets/fonts/SF-Pro-Display-Semibold.woff2') format('woff2');
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: 'InterLocal';
  src: url('/assets/fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'PoppinsLocal';
  src: url('/assets/fonts/Poppins-Medium.woff2') format('woff2');
  font-weight: 500; font-display: swap;
}

:root {
  --bg: #FFFFFF;
  --text: #111111;
  --secondary: #666666;
  --border: #ECECEC;
  --accent: #000000;
  --accent-inverse: #FFFFFF;
  --surface: #FAFAFA;
  --radius: 24px;
  --radius-sm: 14px;
  --container: 1200px;
  --font-display: 'SFProDisplay', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'InterLocal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-dashboard: 'PoppinsLocal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ease: cubic-bezier(.16,1,.3,1);
}
:root[data-theme="dark"], body.dark {
  --bg: #0B0B0C;
  --text: #F5F5F5;
  --secondary: #A0A0A0;
  --border: #232323;
  --accent: #FFFFFF;
  --accent-inverse: #000000;
  --surface: #141414;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B0B0C; --text: #F5F5F5; --secondary: #A0A0A0; --border: #232323; --accent: #FFFFFF; --accent-inverse: #000000; --surface: #141414;
  }
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0; background:var(--bg); color:var(--text); font-family:var(--font-body);
  -webkit-font-smoothing:antialiased; transition: background .25s var(--ease), color .25s var(--ease);
}
h1,h2,h3,h4{ font-family:var(--font-display); letter-spacing:-0.02em; margin:0 0 12px; line-height:1.1; }
p{ line-height:1.6; color:var(--secondary); margin:0 0 16px; }
a{ color:inherit; text-decoration:none; }
img,video{ max-width:100%; display:block; }
.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

/* ---------- Announcement bar ---------- */
.announcement-bar{ background:var(--accent); color:var(--accent-inverse); overflow:hidden; white-space:nowrap; padding:9px 0; font-size:13px; font-weight:500; }
.announcement-track{ display:inline-block; padding-left:100%; animation: marquee 18s linear infinite; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-100%);} }

/* ---------- Navbar ---------- */
.navbar{ position:sticky; top:0; z-index:100; background:color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--border); }
.navbar-inner{ display:flex; align-items:center; justify-content:space-between; height:72px; gap:24px; }
.brand{ font-family:var(--font-display); font-weight:600; font-size:20px; letter-spacing:-0.02em; display:flex; align-items:center; gap:10px; }
.brand-logo-img{ height:32px; width:auto; max-width:160px; object-fit:contain; display:block; }
.brand-logo-text{ display:inline-block; }
.nav-links{ display:flex; gap:28px; font-size:14px; font-weight:500; }
.nav-links a{ color:var(--secondary); transition:color .15s; }
.nav-links a:hover{ color:var(--text); }
.nav-actions{ display:flex; align-items:center; gap:14px; }
.nav-search input{ border:1px solid var(--border); border-radius:100px; padding:9px 16px; font-size:13px; background:var(--surface); color:var(--text); width:180px; outline:none; transition:width .2s var(--ease), border-color .2s; }
.nav-search input:focus{ width:230px; border-color:var(--accent); }
.icon-btn{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; transition:background .15s; }
.icon-btn:hover{ background:var(--surface); }
.mobile-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; }
.mobile-toggle span{ width:22px; height:2px; background:var(--text); }
.mobile-menu{ display:none; flex-direction:column; padding:12px 24px 20px; border-top:1px solid var(--border); }
.mobile-menu a{ padding:12px 0; font-size:15px; border-bottom:1px solid var(--border); }
.mobile-menu.open{ display:flex; }
@media (max-width:900px){
  .nav-links,.nav-search,.nav-actions .icon-btn:nth-child(2){ display:none; }
  .mobile-toggle{ display:flex; }
}

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:15px 28px; border-radius:100px; font-size:15px; font-weight:600; cursor:pointer; border:none; transition:transform .2s var(--ease), opacity .2s; }
.btn-primary{ background:var(--accent); color:var(--accent-inverse); }
.btn-primary:hover{ transform:translateY(-2px); opacity:.9; }
.btn-outline{ background:transparent; border:1.5px solid var(--border); color:var(--text); }
.btn-outline:hover{ border-color:var(--accent); }
.btn-whatsapp{ background:#25D366; color:#fff; }
.btn-whatsapp:hover{ opacity:.9; transform:translateY(-2px); }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none; }

/* ---------- Hero ---------- */
.hero{ padding:64px 0 96px; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.hero-eyebrow{ font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:var(--secondary); margin-bottom:20px; }
.hero h1{ font-size:56px; margin-bottom:24px; }
.hero p.lead{ font-size:18px; max-width:460px; margin-bottom:32px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-media{ border-radius:var(--radius); overflow:hidden; background:var(--surface); aspect-ratio:4/5; }
.hero-media video, .hero-media img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero h1{ font-size:38px; }
}

/* ---------- Section scaffolding ---------- */
section{ padding:88px 0; }
.section-head{ text-align:center; max-width:640px; margin:0 auto 48px; }
.section-head h2{ font-size:36px; }
.reveal{ opacity:0; transform:translateY(32px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Product grid / cards ---------- */
.product-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
@media (max-width:1100px){ .product-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .product-grid{ grid-template-columns:1fr;} }
.product-card{ border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--bg); transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.product-card:hover{ transform:translateY(-6px); box-shadow:0 24px 48px rgba(0,0,0,.08); }
.product-card .thumb{ aspect-ratio:1; background:var(--surface); position:relative; overflow:hidden; }
.product-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.product-card:hover .thumb img{ transform:scale(1.06); }
.product-card .badge{ position:absolute; top:12px; left:12px; background:var(--accent); color:var(--accent-inverse); font-size:11px; font-weight:700; padding:4px 10px; border-radius:100px; text-transform:uppercase; letter-spacing:.06em; }
.product-card .body{ padding:20px; }
.product-card h3{ font-size:16px; margin-bottom:6px; }
.product-card .price-row{ display:flex; align-items:baseline; gap:8px; margin-top:8px; }
.product-card .price{ font-weight:700; font-size:16px; }
.product-card .price-strike{ text-decoration:line-through; color:var(--secondary); font-size:13px; }

/* ---------- Product detail ---------- */
.product-detail{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; }
@media (max-width:960px){ .product-detail{ grid-template-columns:1fr; } }
.gallery-main{ border-radius:var(--radius); overflow:hidden; aspect-ratio:1; background:var(--surface); margin-bottom:14px; }
.gallery-main img,.gallery-main video{ width:100%; height:100%; object-fit:cover; }
.gallery-thumbs{ display:flex; gap:10px; overflow-x:auto; }
.gallery-thumbs img{ width:76px; height:76px; object-fit:cover; border-radius:12px; border:2px solid transparent; cursor:pointer; }
.gallery-thumbs img.active{ border-color:var(--accent); }
.buy-card{ border:1px solid var(--border); border-radius:var(--radius); padding:28px; position:sticky; top:96px; }
.variant-group{ margin:18px 0; }
.variant-label{ font-size:13px; font-weight:600; margin-bottom:8px; }
.swatches{ display:flex; gap:10px; flex-wrap:wrap; }
.swatch{ width:36px; height:36px; border-radius:50%; border:2px solid var(--border); cursor:pointer; }
.swatch.selected{ border-color:var(--accent); box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.pill-option{ padding:9px 16px; border:1.5px solid var(--border); border-radius:100px; font-size:13px; cursor:pointer; }
.pill-option.selected{ border-color:var(--accent); background:var(--accent); color:var(--accent-inverse); }
.qty-stepper{ display:inline-flex; align-items:center; border:1px solid var(--border); border-radius:100px; }
.qty-stepper button{ width:38px; height:38px; background:none; border:none; font-size:18px; cursor:pointer; }
.qty-stepper input{ width:40px; text-align:center; border:none; background:none; font-size:15px; color:var(--text); }
.stock-indicator{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--secondary); margin:14px 0; }
.stock-dot{ width:8px; height:8px; border-radius:50%; background:#0a8a3f; }
.stock-dot.low{ background:#d97706; }
.countdown-banner{ background:var(--surface); border-radius:var(--radius-sm); padding:14px 18px; font-size:13px; font-weight:600; margin-bottom:18px; display:flex; justify-content:space-between; }

/* ---------- Specs / tabs ---------- */
.tabs{ display:flex; gap:8px; border-bottom:1px solid var(--border); margin:64px 0 32px; }
.tab-btn{ padding:14px 4px; margin-right:24px; background:none; border:none; font-size:15px; font-weight:600; color:var(--secondary); border-bottom:2px solid transparent; cursor:pointer; }
.tab-btn.active{ color:var(--text); border-color:var(--accent); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }
.spec-row{ display:flex; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--border); font-size:14px; }
.spec-row span:first-child{ color:var(--secondary); }

/* ---------- Testimonials / marquee ---------- */
.testimonial-card{ border:1px solid var(--border); border-radius:var(--radius); padding:28px; min-width:320px; margin-right:20px; background:var(--bg); }
.stars{ color:#F5A623; font-size:14px; margin-bottom:12px; }
.testimonial-marquee{ display:flex; overflow:hidden; }
.testimonial-track{ display:flex; animation:scrollx 40s linear infinite; }
@keyframes scrollx{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ---------- Reels ---------- */
.reels-row{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; justify-content:flex-start; }
.reels-row.fits{ justify-content:center; }
.reel-card{ scroll-snap-align:start; flex:0 0 240px; aspect-ratio:9/16; border-radius:var(--radius); overflow:hidden; background:#000; position:relative; }
.reel-card video{ width:100%; height:100%; object-fit:cover; }

/* ---------- FAQ ---------- */
.faq-item{ border-bottom:1px solid var(--border); }
.faq-q{ display:flex; justify-content:space-between; align-items:center; padding:20px 0; cursor:pointer; font-weight:600; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s var(--ease); }
.faq-a p{ padding-bottom:20px; }
.faq-item.open .faq-a{ max-height:400px; }
.faq-item.open .faq-q .chev{ transform:rotate(180deg); }

/* ---------- Stats ---------- */
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
.stat-num{ font-family:var(--font-display); font-size:44px; font-weight:600; }
@media (max-width:700px){ .stats-grid{ grid-template-columns:repeat(2,1fr);} }

/* ---------- Forms ---------- */
.form-card{ max-width:440px; margin:0 auto; border:1px solid var(--border); border-radius:var(--radius); padding:40px; }
label{ display:block; font-size:13px; font-weight:600; margin:16px 0 6px; }
input,select,textarea{ width:100%; padding:13px 16px; border:1px solid var(--border); border-radius:12px; font-size:15px; background:var(--bg); color:var(--text); outline:none; font-family:inherit; }
input:focus,select:focus,textarea:focus{ border-color:var(--accent); }
.alert{ padding:14px 16px; border-radius:12px; font-size:14px; margin-bottom:16px; }
.alert-error{ background:#FFF4F4; border:1px solid #FFD7D7; color:#B00020; }
.alert-success{ background:#F2FBF5; border:1px solid #CFEFDA; color:#0a8a3f; }
body.dark .alert-error{ background:#2a1414; color:#ff8080; }
body.dark .alert-success{ background:#0f2418; color:#5ee0a0; }

/* ---------- Footer ---------- */
.site-footer{ border-top:1px solid var(--border); padding:72px 0 32px; margin-top:60px; }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1.4fr; gap:32px; }
.footer-col h4{ font-size:13px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:16px; }
.footer-col a{ display:block; color:var(--secondary); font-size:14px; padding:6px 0; }
.footer-col a:hover{ color:var(--text); }
.footer-newsletter form{ display:flex; gap:8px; margin-top:8px; }
.footer-newsletter input{ flex:1; }
.footer-bottom{ margin-top:56px; padding-top:24px; border-top:1px solid var(--border); font-size:13px; color:var(--secondary); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.social-icons{ display:flex; gap:10px; align-items:center; }
.social-icon{ display:flex; align-items:center; justify-content:center; width:36px; height:36px; min-width:36px; min-height:36px; flex:0 0 36px; border-radius:50%; border:1px solid var(--border); color:var(--secondary); transition:color .15s, border-color .15s, transform .15s; box-sizing:border-box; }
.social-icon svg{ width:16px; height:16px; display:block; flex-shrink:0; }
.social-icon:hover{ color:var(--text); border-color:var(--accent); transform:translateY(-2px); }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } .footer-bottom{ justify-content:center; text-align:center; } }

/* ---------- WhatsApp FAB ---------- */
.whatsapp-fab{ position:fixed; bottom:24px; right:24px; width:58px; height:58px; border-radius:50%; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 12px 28px rgba(0,0,0,.2); z-index:90; transition:transform .2s; }
.whatsapp-fab:hover{ transform:scale(1.08); }

/* ---------- Social proof toast ---------- */
.social-proof-toast{
  position:fixed; left:24px; bottom:24px; z-index:85; max-width:320px;
  background:var(--bg); border:1px solid var(--border); border-radius:16px; padding:14px 40px 14px 16px;
  box-shadow:0 16px 40px rgba(0,0,0,.12); opacity:0; transform:translateY(12px); pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease); font-size:13px;
}
.social-proof-toast.visible{ opacity:1; transform:none; pointer-events:auto; }
.social-proof-text{ color:var(--text); line-height:1.4; }
.social-proof-close{ position:absolute; top:8px; right:10px; background:none; border:none; color:var(--secondary); font-size:16px; cursor:pointer; line-height:1; }
@media (max-width:600px){ .social-proof-toast{ left:16px; right:16px; bottom:88px; max-width:none; } }

/* ---------- Modal ---------- */
.modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; align-items:center; justify-content:center; z-index:200; padding:20px; }
.modal-overlay.open{ display:flex; }
.modal-box{ background:var(--bg); border-radius:var(--radius); padding:36px; max-width:440px; width:100%; max-height:90vh; overflow-y:auto; }
.modal-box h3{ font-size:22px; margin-bottom:8px; }
.modal-close{ float:right; background:none; border:none; font-size:22px; cursor:pointer; color:var(--secondary); }

/* ---------- Utilities ---------- */
.mt-0{margin-top:0;} .center{text-align:center;} .muted{color:var(--secondary);}
.badge-soft{ display:inline-block; padding:4px 12px; border-radius:100px; background:var(--surface); font-size:12px; font-weight:600; }