:root{
  --bg:            #0A0A0A;
  --bg-alt:        #131313;
  --card:          #1A1A1A;
  --card-2:        #1F1F1F;
  --line:          rgba(255,255,255,0.09);
  --text:          #F4F4EF;
  --text-muted:    #9B9B95;
  --accent:        #D4FF3D;
  --accent-2:      #A7E017;
  --accent-ink:    #10140A; /* text-on-accent */

  --font-display:  'Anton', sans-serif;
  --font-body:     'Manrope', sans-serif;

  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 8px;
  --radius-pill: 999px;
}

/* =========================================================
   Base
   ========================================================= */
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
}
::selection{ background: var(--accent); color: var(--accent-ink); }

h1,h2,h3,h4,.font-display{
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.04;
  letter-spacing: 0.2px;
  color: var(--text);
}
h1{ font-size: clamp(2.6rem, 5.4vw, 4.6rem); }
h2{ font-size: clamp(2rem, 3.6vw, 3rem); }
h3{ font-size: 1.35rem; }

p{ color: var(--text-muted); }

a{ color: inherit; text-decoration: none; }
a:hover{ color: var(--accent); }

.container-xl{ max-width: 1280px; margin: 0 auto; padding: 0 20px; }

img{ max-width: 100%; display:block; }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* =========================================================
   Utility text / eyebrows
   ========================================================= */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.eyebrow::before{
  content:"";
  width: 8px; height: 8px;
  background: var(--accent);
  clip-path: polygon(50% 0%, 65% 35%, 100% 40%, 70% 60%, 80% 100%, 50% 75%, 20% 100%, 30% 60%, 0% 40%, 35% 35%);
}
.text-muted-2{ color: var(--text-muted); }
.text-accent{ color: var(--accent); }

/* =========================================================
   Buttons
   ========================================================= */
.btn-bolt{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background: var(--accent);
  color: var(--accent-ink) !important;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 15px 30px;
  border-radius: var(--radius-pill);
  border: none;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
  box-shadow: 0 0 0 0 rgba(212,255,61,0);
  white-space: nowrap;
}
.btn-bolt:hover{
  background: #fff;
  color: var(--accent-ink) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -8px rgba(212,255,61,0.55);
}
.btn-bolt-outline{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background: transparent;
  color: var(--text) !important;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,0.25);
  transition: all .25s ease;
  white-space: nowrap;
}
.btn-bolt-outline:hover{
  border-color: var(--accent);
  color: var(--accent) !important;
  background: rgba(212,255,61,0.06);
}
.btn-sm-link{
  display:inline-flex; align-items:center; gap:8px;
  font-weight: 800; font-size: 0.78rem; letter-spacing: 1px; text-transform: uppercase;
  color: var(--text);
  border-bottom: 1px solid rgba(255,255,255,0.3);
  padding-bottom: 3px;
}
.btn-sm-link:hover{ color: var(--accent); border-color: var(--accent); }

/* =========================================================
   Topbar + Navbar
   ========================================================= */
.topbar{
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  padding: 8px 0;
}
.topbar a{ color: var(--accent-ink); text-decoration: underline; }

.navbar-alfa{
  background: rgba(10,10,10,0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
  position: sticky; top: 0; z-index: 999;
}
.brand-logo{
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display:flex; align-items:center; gap:10px;
}
.brand-logo .bolt-mark{
  width: 30px; height: 30px;
  color: var(--accent);
}
.nav-links{ display:flex; gap: 34px; list-style:none; margin:0; padding:0; }
.nav-links a{
  font-weight: 700; font-size: 0.86rem; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--text); position: relative; padding: 4px 0;
}
.nav-links a.active{ color: var(--accent); }
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0;
  background: var(--accent); transition: width .25s ease;
}
.nav-links a:hover::after, .nav-links a.active::after{ width: 100%; }

.navbar-toggler-alfa{
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: transparent;
}
.navbar-toggler-alfa .bar{ display:block; width:22px; height:2px; background:#fff; margin:4px 0; }

/* =========================================================
   Hero (bolt-field background)
   ========================================================= */
.hero{
  position: relative;
  padding: 70px 0 100px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero-bg-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 20%, black 40%, transparent 90%);
  pointer-events: none;
}
.hero-glow{
  position:absolute; width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle, rgba(212,255,61,0.28), transparent 65%);
  filter: blur(10px);
  top: -220px; right: -160px;
  pointer-events: none;
}
.hero-kicker{
  display:inline-flex; align-items:center; gap:10px;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 8px 16px; font-size: 0.72rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent); margin-bottom: 26px; background: rgba(212,255,61,0.05);
}
.hero h1{ margin-bottom: 22px; }
.hero h1 .outline{
  -webkit-text-stroke: 1.5px var(--text);
  color: transparent;
}
.hero h1 .accent{ color: var(--accent); }
.hero-lead{ font-size: 1.05rem; max-width: 480px; margin-bottom: 34px; }
.hero-cta-row{ display:flex; align-items:center; gap:22px; flex-wrap: wrap; }

.hero-stats{
  display:flex; gap: 34px; margin-top: 54px; flex-wrap: wrap;
}
.hero-stats .stat b{
  font-family: var(--font-display); font-size: 1.8rem; color: var(--text); display:block;
}
.hero-stats .stat span{ font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); }

.hero-visual{
  position: relative;
  display:flex; align-items:center; justify-content:center;
  min-height: 420px;
}
.hero-bolt-badge{
  position:absolute; top: 6%; left: 4%;
  background: var(--accent); color: var(--accent-ink);
  border-radius: 50%; width: 96px; height: 96px;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  font-family: var(--font-display); text-align:center; line-height:1;
  box-shadow: 0 20px 40px -14px rgba(212,255,61,0.5);
  transform: rotate(-8deg);
}
.hero-bolt-badge span{ font-size: 1.5rem; }
.hero-bolt-badge small{ font-family: var(--font-body); font-size: 0.55rem; font-weight:800; letter-spacing:.5px; text-transform:uppercase; }

/* =========================================================
   Section spacing / dividers
   ========================================================= */
.section{ padding: 100px 0; }
.section-sm{ padding: 70px 0; }
.section-dark{ background: var(--bg-alt); }
.section-black{ background: var(--bg); }
.divider-line{ border: none; border-top: 1px solid var(--line); margin: 0; }

.bolt-ticker{
  overflow: hidden; white-space: nowrap;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--bg-alt);
  padding: 16px 0;
}
.bolt-ticker .track{
  display:inline-flex; gap: 40px; animation: ticker 26s linear infinite;
}
.bolt-ticker span{
  font-family: var(--font-display); font-size: 0.95rem; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-muted); display:inline-flex; align-items:center; gap:14px;
}
.bolt-ticker svg{ width:16px; height:16px; color: var(--accent); }
@keyframes ticker{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }

/* =========================================================
   About teaser / split sections
   ========================================================= */
.split-media{
  position: relative; border-radius: var(--radius-lg); overflow:hidden;
  aspect-ratio: 4/5; background: linear-gradient(155deg, #1c1c1c, #0d0d0d);
  border: 1px solid var(--line);
}
.split-media.tall{ aspect-ratio: 3/4; }
.split-media .grad-blob{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 30% 20%, rgba(212,255,61,0.22), transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(212,255,61,0.12), transparent 50%);
}

.stat-pill-badge{
  position:absolute; bottom: -26px; left: -26px;
  background: var(--card); border:1px solid var(--line);
  border-radius: var(--radius-md); padding: 22px 26px;
  box-shadow: 0 24px 50px -20px rgba(0,0,0,0.7);
}
.stat-pill-badge b{ font-family: var(--font-display); font-size: 2.2rem; color: var(--accent); display:block; }
.stat-pill-badge span{ font-size: 0.72rem; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }

.avatar-row{ display:flex; align-items:center; gap: 14px; margin-top: 28px; }
.avatar-row .stack{ display:flex; }
.avatar-row .stack .dot{
  width: 38px; height: 38px; border-radius: 50%;
  border: 2px solid var(--bg); margin-left:-10px;
  background: linear-gradient(135deg,#2a2a2a,#151515);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-size:0.7rem; color: var(--accent);
}
.avatar-row .stack .dot:first-child{ margin-left:0; }
.stars{ color: var(--accent); letter-spacing: 2px; font-size: 0.85rem; }

/* =========================================================
   Cards — Formula / Product category cards
   ========================================================= */
.formula-card{
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 34px 28px; height: 100%; transition: transform .3s ease, background .3s ease, border-color .3s ease;
  position: relative;
}
.formula-card:hover{ transform: translateY(-6px); border-color: rgba(212,255,61,0.4); }
.formula-card .icon-badge{
  width: 56px; height: 56px; border-radius: 16px;
  background: rgba(212,255,61,0.1); color: var(--accent);
  display:flex; align-items:center; justify-content:center; margin-bottom: 24px;
  font-size: 1.4rem;
}
.formula-card.is-accent{
  background: var(--accent); color: var(--accent-ink);
}
.formula-card.is-accent h3, .formula-card.is-accent p{ color: var(--accent-ink); }
.formula-card.is-accent .icon-badge{ background: rgba(16,20,10,0.12); color: var(--accent-ink); }
.formula-card.is-accent .btn-sm-link{ color: var(--accent-ink); border-color: rgba(16,20,10,0.4); }
.formula-card h3{ margin-bottom: 10px; font-size: 1.15rem; }
.formula-card p{ font-size: 0.92rem; margin-bottom: 20px; }

.formula-visual{
  border-radius: var(--radius-lg); overflow:hidden; border: 1px solid var(--line);
  background: linear-gradient(160deg,#191919,#0c0c0c); position:relative; min-height: 320px;
}

/* =========================================================
   Why choose us
   ========================================================= */
.why-stat-card{
  background: var(--card); border:1px solid var(--line); border-radius: var(--radius-md);
  padding: 26px; text-align:center;
}
.why-stat-card b{ font-family: var(--font-display); font-size: 2.4rem; display:block; color: var(--accent); }
.why-stat-card span{ font-size: 0.75rem; text-transform: uppercase; letter-spacing:1px; color: var(--text-muted); }

/* =========================================================
   Comparison (ordinary vs alfa boost) — replaces before/after
   ========================================================= */
.compare-wrap{
  display:grid; grid-template-columns: 1fr 1fr; border-radius: var(--radius-lg); overflow:hidden;
  border: 1px solid var(--line);
}
.compare-col{ padding: 46px 36px; min-height: 340px; }
.compare-col.ordinary{ background: var(--card); }
.compare-col.alfa{ background: var(--accent); color: var(--accent-ink); }
.compare-col h4{ font-family: var(--font-display); text-transform: uppercase; font-size:1.3rem; margin-bottom: 22px;}
.compare-col.alfa h4{ color: var(--accent-ink); }
.compare-col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; }
.compare-col li{ display:flex; gap:12px; align-items:flex-start; font-size:0.92rem; color: var(--text-muted); }
.compare-col.alfa li{ color: rgba(16,20,10,0.85); font-weight:600; }
.compare-col li svg{ flex:none; width:18px; height:18px; margin-top:2px; }
.compare-col.ordinary li svg{ color:#7a7a75; }
.compare-col.alfa li svg{ color: var(--accent-ink); }
.compare-tag{
  position:absolute; top:20px; right:20px; background: var(--bg); color:var(--accent);
  font-size:0.65rem; font-weight:800; letter-spacing:1px; padding:6px 12px; border-radius: var(--radius-pill);
}

/* =========================================================
   Product pricing / bottle cards (home teaser)
   ========================================================= */
.toggle-pill{
  display:inline-flex; background: var(--card); border:1px solid var(--line); border-radius: var(--radius-pill);
  padding: 5px; gap:4px;
}
.toggle-pill button{
  border:none; background: transparent; color: var(--text-muted); font-weight:800; font-size:0.78rem;
  letter-spacing:0.8px; text-transform:uppercase; padding:10px 22px; border-radius: var(--radius-pill);
  transition: all .25s ease;
}
.toggle-pill button.active{ background: var(--accent); color: var(--accent-ink); }

.price-card{
  background: var(--card); border:1px solid var(--line); border-radius: var(--radius-lg);
  overflow:hidden; height:100%; display:flex; flex-direction:column;
}
.price-card .price-head{ padding: 30px 30px 0; }
.price-card .price-visual{
  margin: 22px 0 0; aspect-ratio: 16/10; position:relative; overflow:hidden;
  background: linear-gradient(160deg,#1d1d1d,#0b0b0b);
}
.price-card .price-body{ padding: 26px 30px 30px; flex:1; display:flex; flex-direction:column; }
.price-card .amount{ font-family: var(--font-display); font-size: 2.6rem; color: var(--text); }
.price-card .amount sub{ font-family: var(--font-body); font-size: 0.85rem; font-weight:700; color: var(--text-muted); }
.price-card.featured{ border-color: var(--accent); box-shadow: 0 30px 60px -30px rgba(212,255,61,0.35); }
.price-card .feat-list{ list-style:none; padding:0; margin: 20px 0 26px; display:flex; flex-direction:column; gap:12px; }
.price-card .feat-list li{ display:flex; gap:10px; align-items:center; font-size:0.88rem; color: var(--text-muted); }
.price-card .feat-list svg{ width:16px; height:16px; color: var(--accent); flex:none; }
.ribbon-save{
  position:absolute; top:16px; left:16px; background: var(--bg); color: var(--accent);
  font-size:0.65rem; font-weight:800; padding:6px 12px; border-radius: var(--radius-pill); letter-spacing:0.5px;
}

/* =========================================================
   Bottle illustration (signature SVG element)
   ========================================================= */
.bottle-stage{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding: 18px;
}
.bottle-stage svg{ width: auto; height: 92%; max-width: 100%; filter: drop-shadow(0 30px 30px rgba(0,0,0,0.55)); }

/* =========================================================
   Testimonials
   ========================================================= */
.testi-card{
  background: var(--card); border:1px solid var(--line); border-radius: var(--radius-lg);
  padding: 30px; height: 100%;
}
.testi-card .quote-mark{ font-family: var(--font-display); font-size: 2.6rem; color: var(--accent); line-height:1; }
.testi-card p{ font-size: 0.95rem; color: var(--text); margin: 14px 0 22px; }
.testi-person{ display:flex; align-items:center; gap:12px; }
.testi-person .ava{
  width: 44px; height: 44px; border-radius:50%; background: linear-gradient(135deg,#2a2a2a,#141414);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); color:var(--accent); font-size:0.85rem;
}
.testi-person b{ display:block; font-size:0.88rem; }
.testi-person span{ font-size: 0.75rem; color: var(--text-muted); }
.testi-card.is-accent{ background: var(--accent); }
.testi-card.is-accent p, .testi-card.is-accent .quote-mark{ color: var(--accent-ink); }
.testi-card.is-accent .testi-person span{ color: rgba(16,20,10,0.7); }
.testi-card.is-accent .testi-person b{ color: var(--accent-ink); }

/* =========================================================
   Brand strip
   ========================================================= */
.brand-strip{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap: 34px;
  opacity: 0.55;
}
.brand-strip .bmark{ display:flex; align-items:center; gap:8px; font-family: var(--font-display); font-size:1rem; letter-spacing:0.5px; text-transform:uppercase; color: var(--text); }
.brand-strip svg{ width:20px; height:20px; color: var(--accent); }

/* =========================================================
   Team
   ========================================================= */
.team-card{ position:relative; border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--line); }
.team-media{ aspect-ratio: 3/4; background: linear-gradient(165deg,#1c1c1c,#0a0a0a); position:relative; }
.team-media .grad-blob{ position:absolute; inset:0; background: radial-gradient(circle at 40% 20%, rgba(212,255,61,0.18), transparent 55%); }
.team-info{
  position:absolute; left:14px; right:14px; bottom:14px;
  background: rgba(10,10,10,0.75); backdrop-filter: blur(8px);
  border:1px solid var(--line); border-radius: var(--radius-md);
  padding: 14px 16px; display:flex; align-items:center; justify-content:space-between;
}
.team-info b{ display:block; font-size:0.92rem; }
.team-info span{ font-size:0.72rem; color: var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; }
.team-info .social{ width:34px; height:34px; border-radius:50%; background: var(--accent); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; }

/* =========================================================
   Contact form panel
   ========================================================= */
.form-panel{
  background: var(--card); border:1px solid var(--line); border-radius: var(--radius-lg);
  padding: 44px;
}
.form-panel label{ font-size:0.72rem; font-weight:800; letter-spacing:1px; text-transform:uppercase; color: var(--text-muted); margin-bottom:8px; display:block; }
.form-panel .form-control, .form-panel .form-select{
  background: var(--bg-alt); border:1px solid var(--line); color: var(--text);
  border-radius: var(--radius-sm); padding: 13px 16px; font-size:0.92rem;
}
.form-panel .form-control::placeholder{ color: #6b6b66; }
.form-panel .form-control:focus, .form-panel .form-select:focus{
  background: var(--bg-alt); border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 3px rgba(212,255,61,0.15);
}
.contact-info-card{
  background: var(--accent); color: var(--accent-ink); border-radius: var(--radius-lg); padding: 30px;
  display:flex; align-items:center; gap:16px;
}
.contact-info-card .ic{ width:50px; height:50px; border-radius:50%; background: rgba(16,20,10,0.12); display:flex; align-items:center; justify-content:center; flex:none; }
.contact-info-card b{ display:block; font-size:1rem; }
.contact-info-card span{ font-size:0.78rem; opacity:0.75; }

/* =========================================================
   Page banner (about / contact / product)
   ========================================================= */
.page-banner{
  padding: 64px 0 54px; text-align:center; position:relative; overflow:hidden;
  border-bottom: 1px solid var(--line);
}
.page-banner .crumb{ font-size:0.8rem; color: var(--text-muted); text-transform:uppercase; letter-spacing:1px; margin-top: 10px; }
.page-banner .crumb .accent{ color: var(--accent); }

/* =========================================================
   Final CTA banner
   ========================================================= */
.cta-banner{
  background: var(--accent); border-radius: var(--radius-lg);
  padding: 60px 50px; position: relative; overflow:hidden;
}
.cta-banner h2, .cta-banner p{ color: var(--accent-ink); }
.cta-banner p{ opacity:0.75; }
.cta-banner .btn-bolt{ background: var(--accent-ink); color: var(--accent) !important; }
.cta-banner .btn-bolt:hover{ background:#000; }
.cta-banner .btn-bolt-outline{ border-color: rgba(16,20,10,0.4); color: var(--accent-ink) !important; }
.cta-banner .btn-bolt-outline:hover{ background: rgba(16,20,10,0.08); color: var(--accent-ink) !important; }

/* =========================================================
   Blog / news
   ========================================================= */
.blog-card{ border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--line); background: var(--card); height:100%; }
.blog-media{ aspect-ratio: 16/10; background: linear-gradient(160deg,#1c1c1c,#0a0a0a); position:relative; }
.blog-media .tag{ position:absolute; top:14px; left:14px; background: var(--accent); color: var(--accent-ink); font-size:0.65rem; font-weight:800; letter-spacing:0.5px; padding:6px 12px; border-radius: var(--radius-pill); text-transform:uppercase; }
.blog-body{ padding:24px; }
.blog-meta{ font-size:0.72rem; text-transform:uppercase; letter-spacing:0.8px; color: var(--text-muted); margin-bottom:10px; }
.blog-body h3{ font-size:1.05rem; margin-bottom: 12px; }

/* =========================================================
   Footer
   ========================================================= */
.footer{ background: var(--bg-alt); border-top: 1px solid var(--line); padding-top: 74px; }
.footer h5{ font-size:0.78rem; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color: var(--text); margin-bottom:20px; }
.footer ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.footer ul a{ font-size:0.9rem; color: var(--text-muted); }
.footer ul a:hover{ color: var(--accent); }
.footer p{ font-size:0.9rem; }
.footer-bottom{font-size:0.8rem;color: var(--text-muted);}
.social-round{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; }
.social-round:hover{ border-color: var(--accent); background: rgba(212,255,61,0.08); }
.footer-wordmark{
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 12vw, 9rem);
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,255,255,0.14);
  text-align:center;
  margin: 20px 0 0;
  letter-spacing: 2px;
  user-select:none;
}

/* =========================================================
   Product page — grid cards
   ========================================================= */
.filter-pills{ display:flex; gap:10px; flex-wrap:wrap; }
.filter-pills button{
  background: var(--card); border:1px solid var(--line); color: var(--text-muted);
  font-weight:800; font-size:0.76rem; letter-spacing:0.6px; text-transform:uppercase;
  padding: 11px 20px; border-radius: var(--radius-pill); transition: all .25s ease;
}
.filter-pills button.active, .filter-pills button:hover{ background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

.product-card{
  background: var(--card); border:1px solid var(--line); border-radius: var(--radius-lg);
  overflow:hidden; height:100%; display:flex; flex-direction:column; transition: transform .3s ease, border-color .3s ease;
}
.product-card:hover{ transform: translateY(-6px); border-color: rgba(212,255,61,0.4); }
.product-media{ aspect-ratio: 1/1; position:relative; background: linear-gradient(160deg,#1c1c1c,#0a0a0a); }
.product-media .badge-tag{
  position:absolute; top:14px; left:14px; background: var(--accent); color:var(--accent-ink);
  font-size:0.62rem; font-weight:800; letter-spacing:0.5px; padding:6px 11px; border-radius: var(--radius-pill); text-transform:uppercase;
}
.product-media .wish{
  position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%;
  background: rgba(10,10,10,0.6); border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
}
.product-body{ padding: 22px; flex:1; display:flex; flex-direction:column; }
.product-body .cat{ font-size:0.68rem; text-transform:uppercase; letter-spacing:1px; color: var(--accent); font-weight:800; margin-bottom:8px; }
.product-body h3{ font-size:1.05rem; margin-bottom:8px; }
.product-body .stars{ margin-bottom: 12px; }
.product-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:16px; }
.product-foot .amount{ font-family: var(--font-display); font-size:1.35rem; color: var(--text); }
.product-foot .amount del{ font-family: var(--font-body); font-size:0.78rem; color: var(--text-muted); margin-left:6px; }
.icon-btn-cart{
  width:44px; height:44px; border-radius:50%; background: var(--accent); color:var(--accent-ink) !important;
  display:flex; align-items:center; justify-content:center; transition: all .25s ease; flex:none;
}
.icon-btn-cart:hover{ background:#fff; transform: scale(1.06); }

/* Featured product spotlight */
.spotlight-stage{
  border-radius: var(--radius-lg); border:1px solid var(--line); background: linear-gradient(160deg,#1a1a1a,#0a0a0a);
  aspect-ratio: 1/1; position:relative; overflow:hidden;
}
.spotlight-thumbs{ display:flex; gap:12px; margin-top:16px; }
.spotlight-thumbs .thumb{ width:72px; height:72px; border-radius: var(--radius-sm); border:1px solid var(--line); background: linear-gradient(160deg,#1c1c1c,#0c0c0c); }
.spotlight-thumbs .thumb.active{ border-color: var(--accent); }
.ingredient-list{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap: 14px 24px; }
.ingredient-list li{ display:flex; gap:10px; align-items:flex-start; font-size:0.9rem; color: var(--text-muted); }
.ingredient-list svg{ width:16px; height:16px; color: var(--accent); flex:none; margin-top:2px; }
.qty-select{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius: var(--radius-pill); overflow:hidden; }
.qty-select button{ background: transparent; border:none; color: var(--text); width:42px; height:42px; font-size:1.1rem; }
.qty-select button:hover{ background: rgba(212,255,61,0.1); color: var(--accent); }
.qty-select .qty-val{ width:44px; text-align:center; font-weight:800; }

/* =========================================================
   About page extras
   ========================================================= */
.value-card{ display:flex; gap:18px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.value-card:last-child{ border-bottom:none; }
.value-card .num{ font-family: var(--font-display); font-size: 1.6rem; color: var(--accent); flex:none; width: 54px; }
.value-card h4{ font-size: 1.05rem; text-transform: none; margin-bottom:6px; font-family: var(--font-body); font-weight:800; }
.value-card p{ font-size:0.92rem; margin:0; }

.timeline-row{ display:flex; gap:24px; }
.timeline-row .yr{ font-family: var(--font-display); font-size:1.1rem; color: var(--accent); flex:none; width:70px; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 991.98px){
  .nav-links{ display:none; }
  .compare-wrap{ grid-template-columns: 1fr; }
  .stat-pill-badge{ position:static; margin-top: -40px; margin-left:20px; display:inline-block; }
  .footer-wordmark{ font-size: clamp(2.6rem, 16vw, 6rem); }
}
@media (max-width: 767.98px){
  .section{ padding: 64px 0; }
  .hero{ padding: 46px 0 60px; text-align:left; }
  .hero-stats{ gap: 22px; }
  .cta-banner{ padding: 40px 26px; text-align:center; }
  .ingredient-list{ grid-template-columns: 1fr; }
}

.brand-logo img{
width: 120px;
}
.products-section{
    background: #000;
}
.footer-lg-box{
      background: #d4ff3d;
    padding: 20px;
    border-radius: 20px;
}
.footer-lg-box .ab-footer-title {
color: #000;
}
.footer-lg-box ul li {
color: #000;
}
.footer-lg-box ul li i{
    color: #000;
}
.footer-lg-box ul li a:hover{
    color: #000;
}
.split-media img{
      object-fit: cover;
    width: 100%;
    height: 100%;
}
.contact-info-card a:hover{
    color: #000;
}

section#pricing {
    margin-top: 100px;
}