/*
Theme Name: Simba Cement 2026
Theme URI: https://www.simbacement.co.ke/
Author: Simba Cement
Description: Modern responsive WordPress theme for Simba Cement.
Version: 1.0.0
Text Domain: simba-cement
*/

/* ═══════════════════════════════════════════════════════════
   SIMBA CEMENT — 2026 MODERN ANIMATED WEBSITE
   ═══════════════════════════════════════════════════════════ */

:root{
  --ink:#0a1733;
  --ink-2:#152449;
  --blue:#124fd4;
  --blue-2:#1e6bff;
  --orange:#ff6a1a;
  --orange-2:#ffb020;
  --cream:#f7f4ee;
  --muted:#687086;
  --line:#e5e8ef;
  --shadow: 0 20px 60px -20px rgba(10,23,51,.25);
  --shadow-hover: 0 30px 80px -20px rgba(18,79,212,.35);
  --radius: 18px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:Manrope,system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  color:var(--ink);
  background:#fff;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

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

/* ═══════════ PRELOADER (branded, logo as avatar) ═══════════ */
.preloader{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  transition: opacity .6s var(--ease), visibility .6s var(--ease);
}
.preloader-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 30% 20%, rgba(18,79,212,.35), transparent 40%),
    radial-gradient(circle at 70% 80%, rgba(255,106,26,.25), transparent 40%),
    linear-gradient(135deg, #061128 0%, #0a1733 60%, #0f2450 100%);
}
.preloader-inner{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:22px;
  padding:0 20px;
}
.preloader-logo-wrap{
  position:relative;
  width:180px; height:180px;
  display:grid; place-items:center;
}
.preloader-logo{
  width:150px; height:150px; object-fit:contain;
  filter: drop-shadow(0 10px 30px rgba(255,106,26,.5));
  animation: logoPulse 1.8s ease-in-out infinite;
}
.preloader-orbit{
  position:absolute; inset:0;
  border-radius:50%;
  border:2px solid transparent;
}
.orbit1{
  border-top-color:#ff6a1a; border-right-color:#ff6a1a;
  animation: spin 1.4s linear infinite;
}
.orbit2{
  inset:-16px;
  border-bottom-color:#1e6bff; border-left-color:#1e6bff;
  animation: spin 2.2s linear infinite reverse;
}
.orbit3{
  inset:-32px;
  border-top-color: rgba(255,255,255,.25);
  animation: spin 3.2s linear infinite;
}
.preloader-text{
  font-family:'Space Grotesk',sans-serif;
  font-size:22px; letter-spacing:.35em; font-weight:700;
  color:#fff;
  background: linear-gradient(90deg,#fff,#ffd08a,#fff);
  background-size: 200% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  animation: shine 2.4s linear infinite;
}
.preloader-sub{
  font-size:12px; letter-spacing:.25em; color:#8ea6d6; font-weight:600;
}
.preloader-bar{
  width:200px; height:3px; background:rgba(255,255,255,.12);
  border-radius:99px; overflow:hidden;
}
.preloader-bar span{
  display:block; height:100%;
  background: linear-gradient(90deg, var(--orange), var(--orange-2), var(--blue));
  width:0%; border-radius:99px;
  animation: barFill 1.4s var(--ease) forwards;
}
.preloader.done{ opacity:0; visibility:hidden; pointer-events:none; }

@keyframes spin { to{ transform: rotate(360deg) } }
@keyframes logoPulse {
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.08); }
}
@keyframes shine {
  to { background-position: -200% 0; }
}
@keyframes barFill {
  0%{ width:0% } 60%{ width:75% } 100%{ width:100% }
}

/* ═══════════ SCROLL PROGRESS ═══════════ */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background: linear-gradient(90deg, var(--orange), var(--orange-2), var(--blue));
  z-index:100;
  transition: width .1s linear;
  box-shadow: 0 0 20px rgba(255,106,26,.6);
}

/* ═══════════ TICKER ═══════════ */
.top-ticker{
  background: linear-gradient(90deg, var(--orange), #ff8a3a, var(--orange));
  color:#fff; overflow:hidden; padding:10px 0;
  font-size:12px; font-weight:800; letter-spacing:.08em;
  white-space:nowrap;
}
.ticker-track{ display:inline-block; animation: ticker 30s linear infinite; padding-left:100%; }
@keyframes ticker { to{ transform: translateX(-100%); } }

/* ═══════════ HEADER ═══════════ */
header{
  height:78px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 6vw;
  border-bottom:1px solid var(--line);
  position:sticky; top:0;
  background:rgba(255,255,255,.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  z-index:50;
  transition: box-shadow .3s var(--ease), height .3s var(--ease);
}
header.scrolled{
  height:66px;
  box-shadow: 0 10px 30px -15px rgba(10,23,51,.15);
}
.logo{
  display:flex; align-items:center; gap:10px;
  font-family:'Space Grotesk',sans-serif;
  text-decoration:none; color:var(--ink);
  letter-spacing:-1px;
  transition: transform .3s var(--ease);
}
.logo:hover{ transform: scale(1.03); }
.logo img{
  width:46px; height:46px; object-fit:contain;
  filter: drop-shadow(0 4px 12px rgba(18,79,212,.25));
  transition: transform .5s var(--ease);
}
.logo:hover img{ transform: rotate(-6deg) scale(1.08); }
.logo-text{
  display:flex; flex-direction:column; line-height:1;
  font-size:19px; font-weight:800;
}
.logo em{
  font-style:normal; font-size:9px;
  letter-spacing:5px; color:var(--orange);
  margin-top:3px; font-weight:700;
}

nav{ display:flex; gap:28px; }
nav a, footer a{
  color:var(--ink); text-decoration:none;
  font-size:14px; font-weight:700;
  position:relative;
  transition: color .25s var(--ease);
}
nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:-6px;
  height:2px; background:var(--orange);
  transform: scaleX(0); transform-origin:right;
  transition: transform .35s var(--ease);
}
nav a:hover{ color:var(--blue); }
nav a:hover::after{ transform: scaleX(1); transform-origin:left; }

.header-actions{ display:flex; gap:10px; }
.call, .whatsapp{
  padding:11px 16px; border-radius:12px;
  text-decoration:none; font-size:12px; font-weight:800;
  letter-spacing:.02em;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.call{ color:var(--blue); border:1.5px solid #cfd8ef; }
.call:hover{ background:var(--blue); color:#fff; border-color:var(--blue); transform:translateY(-2px); }
.whatsapp{
  background: linear-gradient(135deg, #19a75c, #12c46b);
  color:#fff;
  box-shadow: 0 8px 20px -8px rgba(25,167,92,.6);
}
.whatsapp:hover{ transform:translateY(-2px); box-shadow: 0 12px 28px -8px rgba(25,167,92,.7); }

.menu{
  display:none; border:0; background:none;
  width:40px; height:40px; cursor:pointer;
  flex-direction:column; justify-content:center; align-items:center; gap:5px;
}
.menu span{
  display:block; width:24px; height:2.5px;
  background:var(--ink); border-radius:2px;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.menu.active span:nth-child(1){ transform: translateY(7.5px) rotate(45deg); }
.menu.active span:nth-child(2){ opacity:0; }
.menu.active span:nth-child(3){ transform: translateY(-7.5px) rotate(-45deg); }

/* ═══════════ HERO ═══════════ */
.hero{
  position:relative;
  min-height: 680px;
  padding: 90px 8vw 100px;
  display:grid; grid-template-columns:1.05fr .95fr;
  align-items:center; gap:40px;
  overflow:hidden;
  background: var(--cream);
}
.hero-mesh{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(circle at 85% 25%, rgba(18,79,212,.18), transparent 40%),
    radial-gradient(circle at 15% 80%, rgba(255,106,26,.15), transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(255,176,32,.08), transparent 50%);
  animation: meshFloat 12s ease-in-out infinite;
}
@keyframes meshFloat {
  0%,100%{ transform: scale(1) translate(0,0); }
  50%{ transform: scale(1.1) translate(-2%, 2%); }
}
.hero > *:not(.hero-mesh){ position:relative; z-index:1; }

.eyebrow{
  display:inline-block;
  font-size:11px; font-weight:800; letter-spacing:.18em;
  color:var(--orange); margin-bottom:16px;
  padding: 6px 12px;
  background: rgba(255,106,26,.1);
  border-radius:99px;
}
.hero h1, h2{
  font-family:'Space Grotesk',sans-serif;
  letter-spacing:-.055em; line-height:.98; margin:0;
}
.hero h1{ font-size: clamp(42px, 6vw, 84px); }
h2{ font-size: clamp(32px, 4vw, 60px); }
h1 span, h2 span{
  background: linear-gradient(135deg, var(--orange), var(--orange-2));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color: transparent;
}
.hero p{
  margin: 22px 0 30px;
  max-width: 520px; color: var(--muted);
  font-size: clamp(15px, 1.1vw, 17px); line-height:1.65;
}
.hero-buttons{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:38px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 15px 26px; border-radius:14px;
  font-weight:800; font-size:14px; letter-spacing:.02em;
  text-decoration:none; cursor:pointer; border:0;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
  will-change: transform;
}
.btn.primary{
  background: linear-gradient(135deg, var(--orange), #ff8a3a);
  color:#fff;
  box-shadow: 0 12px 28px -10px rgba(255,106,26,.7);
}
.btn.primary:hover{
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -10px rgba(255,106,26,.8);
}
.btn.ghost{
  background: rgba(255,255,255,.7);
  color: var(--ink); border:1.5px solid var(--line);
  backdrop-filter: blur(10px);
}
.btn.ghost:hover{ background:#fff; border-color:var(--blue); color:var(--blue); transform: translateY(-3px); }
.btn.light{
  background:#fff; color:var(--blue);
}
.btn.light:hover{ background:var(--blue); color:#fff; transform: translateY(-3px); }

.stats{ display:flex; gap:36px; flex-wrap:wrap; }
.stats > div{
  display:flex; flex-direction:column; gap:4px;
}
.stats b{
  font-family:'Space Grotesk',sans-serif;
  font-size:30px; font-weight:800; color:var(--ink);
}
.stats span{ font-size:12px; color:var(--muted); font-weight:600; letter-spacing:.05em; }

/* Hero Art (logo showcase) */
.hero-art{
  position:relative;
  height: 500px;
  display:grid; place-items:center;
}
.ring{
  position:absolute; border-radius:50%;
  border: 2px dashed rgba(18,79,212,.2);
}
.ring1{
  width:420px; height:420px;
  animation: spinSlow 40s linear infinite;
}
.ring2{
  width:520px; height:520px;
  border-color: rgba(255,106,26,.15);
  animation: spinSlow 60s linear infinite reverse;
}
@keyframes spinSlow { to{ transform: rotate(360deg); } }

.hero-logo-wrap{
  position:relative;
  width: 360px; height: 360px;
  display:grid; place-items:center;
  animation: heroFloat 6s ease-in-out infinite;
}
@keyframes heroFloat {
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-16px); }
}
.hero-logo{
  width:100%; height:100%; object-fit:contain;
  filter: drop-shadow(0 30px 60px rgba(18,79,212,.35));
  position:relative; z-index:2;
}
.hero-logo-glow{
  position:absolute; inset:10%; z-index:1;
  border-radius:50%;
  background: radial-gradient(circle, rgba(255,176,32,.4), transparent 60%);
  filter: blur(30px);
  animation: glowPulse 4s ease-in-out infinite;
}
@keyframes glowPulse {
  0%,100%{ opacity:.7; transform: scale(1); }
  50%{ opacity:1; transform: scale(1.15); }
}

.float-card{
  position:absolute;
  background: #fff;
  padding:12px 18px; border-radius:14px;
  font-weight:800; font-size:13px;
  box-shadow: 0 15px 40px -10px rgba(10,23,51,.2);
  animation: cardFloat 5s ease-in-out infinite;
  z-index:3;
}
.fc1{ top:12%; left:-10px; color:var(--blue); animation-delay:0s; }
.fc2{ bottom:15%; right:-10px; color:var(--orange); animation-delay:1.5s; }
.fc3{ top:50%; right:-30px; color:var(--ink); animation-delay:3s; }
@keyframes cardFloat {
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}

/* ═══════════ TRUST BAR ═══════════ */
.trust{
  display:flex; gap:28px; padding: 24px 6vw;
  background: var(--ink); color:#fff;
  font-size:12px; font-weight:700; letter-spacing:.15em;
  overflow:hidden; white-space:nowrap;
  animation: trustSlide 40s linear infinite;
}
@keyframes trustSlide { to{ transform: translateX(-30%); } }

/* ═══════════ SECTION ═══════════ */
.section{ padding: 100px 8vw; }
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:30px; margin-bottom: 50px; flex-wrap:wrap;
}
.section-head p{ color: var(--muted); margin-top:14px; max-width: 520px; }

/* ═══════════ OFFERS ═══════════ */
.offers{ background: linear-gradient(180deg, #fff, #f8fafd); }
.timer-box{
  background:#fff; padding:18px 24px; border-radius:16px;
  border:1.5px solid var(--line);
  box-shadow: var(--shadow);
}
.timer-box small{ font-size:11px; color:var(--muted); letter-spacing:.1em; font-weight:700; }
#timer{
  font-family:'Space Grotesk',sans-serif;
  font-size:28px; font-weight:800; color:var(--ink);
  margin-top:6px; display:flex; gap:4px; align-items:center;
}
#timer b{
  background: var(--ink); color:#fff;
  padding:6px 10px; border-radius:8px; min-width:44px; text-align:center;
  display:inline-block;
}

.deal-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.deal{
  position:relative;
  background:#fff; padding: 30px; border-radius: var(--radius);
  border:1.5px solid var(--line);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
  overflow:hidden;
}
.deal::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background: linear-gradient(90deg, var(--orange), var(--orange-2));
  transform: scaleX(0); transform-origin:left;
  transition: transform .5s var(--ease);
}
.deal:hover{ transform: translateY(-6px); box-shadow: var(--shadow-hover); border-color: transparent; }
.deal:hover::before{ transform: scaleX(1); }
.discount{
  display:inline-block; padding:6px 12px; border-radius:99px;
  font-size:11px; font-weight:800; letter-spacing:.08em;
  background: rgba(255,106,26,.12); color: var(--orange);
  margin-bottom: 18px;
}
.discount.hot{ background: var(--orange); color:#fff; animation: hotPulse 2s ease-in-out infinite; }
@keyframes hotPulse { 0%,100%{ box-shadow: 0 0 0 0 rgba(255,106,26,.5); } 50%{ box-shadow: 0 0 0 10px rgba(255,106,26,0); } }
.deal h3{ font-family:'Space Grotesk',sans-serif; font-size:22px; margin:0 0 10px; }
.deal p{ color:var(--muted); font-size:14px; line-height:1.6; margin:0 0 16px; }
.deal strong{ font-size:12px; color:var(--blue); letter-spacing:.05em; }

/* ═══════════ PRODUCTS ═══════════ */
.product-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:18px;
}
.product{
  background:#fff; padding: 22px; border-radius: var(--radius);
  border:1.5px solid var(--line);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s var(--ease);
  display:flex; flex-direction:column;
  position:relative; overflow:hidden;
}
.product::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(18,79,212,.05), transparent 50%);
  opacity:0; transition: opacity .4s var(--ease);
  pointer-events:none;
}
.product:hover{ transform: translateY(-6px); box-shadow: var(--shadow-hover); border-color: var(--blue); }
.product:hover::after{ opacity:1; }
.product-visual{
  aspect-ratio: 1;
  background: linear-gradient(135deg, #fff5eb, #f0f5ff);
  border-radius: 12px;
  display:grid; place-items:center;
  font-size:44px; margin-bottom:14px;
  overflow:hidden; position:relative;
}
.product-visual img{
  width:60%; height:60%; object-fit:contain;
  transition: transform .5s var(--ease);
}
.product:hover .product-visual img{ transform: scale(1.1) rotate(-4deg); }
.product h3{ font-family:'Space Grotesk',sans-serif; font-size:16px; margin:0 0 6px; }
.product p{ color:var(--muted); font-size:12px; line-height:1.5; margin:0 0 12px; flex:1; }
.price{ font-family:'Space Grotesk',sans-serif; font-size:20px; font-weight:800; color:var(--ink); }
.old{ font-size:13px; color:var(--muted); text-decoration:line-through; margin-left:8px; }
.card-btn{
  margin-top:14px; padding:11px; width:100%;
  background: var(--ink); color:#fff; border:0; border-radius:10px;
  font-weight:800; font-size:12px; cursor:pointer;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.card-btn:hover{ background: var(--orange); transform: translateY(-2px); }

/* ═══════════ WHY ═══════════ */
.why{
  display:grid; grid-template-columns:1fr 1.2fr; gap:50px;
  padding: 100px 8vw;
  background: linear-gradient(135deg, var(--ink), var(--ink-2));
  color:#fff;
}
.why-panel h2, .why-panel p{ color:#fff; }
.why-panel p{ color:#a9b6d4; margin: 20px 0 28px; max-width:420px; line-height:1.7; }
.why .eyebrow{ background: rgba(255,106,26,.2); }
.features{
  display:grid; grid-template-columns:repeat(2,1fr); gap:18px;
}
.feature{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  padding: 26px; border-radius: var(--radius);
  backdrop-filter: blur(10px);
  transition: transform .4s var(--ease), background .3s var(--ease);
}
.feature:hover{ transform: translateY(-4px); background: rgba(255,255,255,.1); }
.feature i{
  font-style:normal; font-family:'Space Grotesk',sans-serif;
  font-size:28px; font-weight:800;
  background: linear-gradient(135deg, var(--orange), var(--orange-2));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  display:block; margin-bottom:14px;
}
.feature h3{ font-family:'Space Grotesk',sans-serif; font-size:18px; margin:0 0 8px; color:#fff; }
.feature p{ color:#a9b6d4; font-size:14px; line-height:1.6; margin:0; }

/* ═══════════ REVIEWS ═══════════ */
.rating{ font-size:20px; color:var(--orange); }
.rating small{ display:block; color:var(--muted); font-size:12px; font-weight:600; margin-top:4px; }
.review-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.review-grid blockquote{
  background:#fff; margin:0; padding: 30px;
  border-radius: var(--radius); border:1.5px solid var(--line);
  font-size:15px; line-height:1.7; color:var(--ink-2);
  position:relative;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.review-grid blockquote::before{
  content:'“'; position:absolute; top:-20px; left:20px;
  font-family:'Space Grotesk',sans-serif;
  font-size:80px; color:var(--orange); line-height:1;
}
.review-grid blockquote:hover{ transform: translateY(-4px); box-shadow: var(--shadow); }
.review-grid footer{
  margin-top:16px; font-size:13px; font-weight:800; color:var(--blue);
}

/* ═══════════ FAQ ═══════════ */
.faq-list{ max-width: 820px; margin: 0 auto; }
.faq-list details{
  background:#fff; margin-bottom:12px; border-radius: 14px;
  border:1.5px solid var(--line);
  overflow:hidden;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.faq-list details[open]{ border-color:var(--blue); box-shadow: var(--shadow); }
.faq-list summary{
  padding: 20px 24px; cursor:pointer;
  font-weight:800; font-size:15px;
  list-style:none; display:flex; justify-content:space-between; align-items:center;
  position:relative;
}
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary::after{
  content:'+'; font-size:22px; color:var(--orange); font-weight:400;
  transition: transform .3s var(--ease);
}
.faq-list details[open] summary::after{ transform: rotate(45deg); }
.faq-list details p{
  margin: 0; padding: 0 24px 22px;
  color:var(--muted); line-height:1.7; font-size:14px;
}

/* ═══════════ CTA ═══════════ */
.cta{
  margin: 0 8vw 100px;
  padding: 60px;
  border-radius: 28px;
  background: linear-gradient(135deg, var(--orange) 0%, #ff8a3a 50%, var(--orange-2) 100%);
  color:#fff;
  display:flex; justify-content:space-between; align-items:center; gap:40px;
  position:relative; overflow:hidden;
  box-shadow: 0 30px 80px -20px rgba(255,106,26,.5);
}
.cta::before, .cta::after{
  content:''; position:absolute; border-radius:50%;
  background: rgba(255,255,255,.15);
  pointer-events:none;
}
.cta::before{ width:300px; height:300px; top:-100px; right:-50px; }
.cta::after{ width:200px; height:200px; bottom:-80px; left:20%; }
.cta h2, .cta p{ color:#fff; position:relative; z-index:1; }
.cta h2 span{ background: linear-gradient(180deg, #fff, #ffdd9c); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.cta p{ margin-top:14px; opacity:.95; }
.cta .eyebrow{ background:rgba(255,255,255,.2); color:#fff; }
.cta-actions{ display:flex; gap:12px; flex-wrap:wrap; position:relative; z-index:1; }

/* ═══════════ FOOTER ═══════════ */
footer{
  padding: 40px 8vw;
  display:flex; justify-content:space-between; align-items:center;
  gap:20px; flex-wrap:wrap;
  border-top:1px solid var(--line);
  background:#fafbfd;
}
.footer-brand p{ color: var(--muted); margin: 12px 0 0; font-size:13px; }
.footer-links{ display:flex; gap:20px; }
.footer-links a{ color:var(--ink); font-weight:700; font-size:14px; }
.footer-links a:hover{ color:var(--orange); }

/* ═══════════ PURCHASE POP ═══════════ */
.purchase-pop{
  position:fixed; left:20px; bottom:20px; z-index:60;
  background:#fff; padding:14px 18px; border-radius:14px;
  box-shadow: 0 20px 50px -15px rgba(10,23,51,.35);
  display:none; align-items:center; gap:12px;
  max-width:340px; border:1.5px solid var(--line);
  animation: slideUp .5s var(--ease);
}
@keyframes slideUp { from{ transform: translateY(30px); opacity:0; } to{ transform:none; opacity:1; } }
.purchase-pop strong{ display:block; font-size:13px; }
.purchase-pop small{ font-size:12px; color:var(--muted); }
.purchase-pop button{
  background:none; border:0; font-size:22px; cursor:pointer; color:var(--muted);
  padding:0 4px;
}
.pulse-dot{
  width:10px; height:10px; border-radius:50%;
  background:#19a75c; flex-shrink:0;
  box-shadow: 0 0 0 0 rgba(25,167,92,.5);
  animation: pulseDot 1.5s ease-in-out infinite;
}
@keyframes pulseDot {
  0%{ box-shadow: 0 0 0 0 rgba(25,167,92,.6); }
  70%{ box-shadow: 0 0 0 12px rgba(25,167,92,0); }
  100%{ box-shadow: 0 0 0 0 rgba(25,167,92,0); }
}

/* ═══════════ FAB WHATSAPP ═══════════ */
.fab-whatsapp{
  position:fixed; right:20px; bottom:20px; z-index:55;
  width:60px; height:60px; border-radius:50%;
  background: linear-gradient(135deg, #19a75c, #12c46b);
  display:grid; place-items:center;
  box-shadow: 0 15px 35px -8px rgba(25,167,92,.6);
  animation: fabPulse 2.5s ease-in-out infinite;
  text-decoration:none;
  transition: transform .3s var(--ease);
}
.fab-whatsapp:hover{ transform: scale(1.1); }
@keyframes fabPulse {
  0%,100%{ box-shadow: 0 15px 35px -8px rgba(25,167,92,.6), 0 0 0 0 rgba(25,167,92,.5); }
  50%{ box-shadow: 0 15px 35px -8px rgba(25,167,92,.6), 0 0 0 15px rgba(25,167,92,0); }
}

/* ═══════════ BACK TO TOP ═══════════ */
.back-top{
  position:fixed; right:20px; bottom:90px; z-index:55;
  width:44px; height:44px; border-radius:50%;
  background: var(--ink); color:#fff;
  border:0; font-size:20px; font-weight:800; cursor:pointer;
  opacity:0; pointer-events:none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  box-shadow: var(--shadow);
}
.back-top.show{ opacity:1; pointer-events:auto; }
.back-top:hover{ background: var(--orange); transform: translateY(-3px); }

/* ═══════════ REVEAL ANIMATIONS ═══════════ */
.reveal{
  opacity:0; transform: translateY(30px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.visible{ opacity:1; transform:none; }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 1200px){
  .product-grid{ grid-template-columns:repeat(4,1fr); }
}
@media (max-width: 1000px){
  .product-grid{ grid-template-columns:repeat(3,1fr); }
  .hero{ grid-template-columns:1fr; padding-top:60px; text-align:center; }
  .hero-copy{ order:2; }
  .hero-art{ order:1; height:360px; }
  .hero p, .stats{ margin-left:auto; margin-right:auto; }
  .hero-buttons{ justify-content:center; }
  .deal-grid{ grid-template-columns:1fr; }
  .why{ grid-template-columns:1fr; padding: 80px 6vw; }
  .cta{ margin: 0 5vw 60px; flex-direction:column; text-align:center; padding: 44px 28px; }
  .cta-actions{ justify-content:center; }
  .section{ padding: 75px 6vw; }
  .review-grid{ grid-template-columns:1fr 1fr; }
  .features{ grid-template-columns:1fr 1fr; }
  .float-card{ font-size:11px; padding:9px 13px; }
  .hero-logo-wrap{ width:280px; height:280px; }
  .ring1{ width:340px; height:340px; }
  .ring2{ width:420px; height:420px; }
}
@media (max-width: 680px){
  header{ padding:0 5vw; height:64px; }
  header.scrolled{ height:56px; }
  .logo img{ width:38px; height:38px; }
  .logo-text{ font-size:16px; }
  .logo em{ font-size:8px; letter-spacing:4px; }
  .header-actions{ display:none; }
  .menu{ display:flex; }
  nav{
    display:none; position:absolute; top:64px; left:0; right:0;
    background:rgba(255,255,255,.98); backdrop-filter: blur(20px);
    padding:24px 5vw; flex-direction:column; gap:18px;
    border-bottom:1px solid var(--line);
    box-shadow: 0 20px 40px -20px rgba(10,23,51,.2);
  }
  nav.show{ display:flex; animation: slideDown .35s var(--ease); }
  @keyframes slideDown { from{ opacity:0; transform: translateY(-10px); } to{ opacity:1; transform:none; } }
  nav a{ font-size:16px; padding: 8px 0; }
  .hero{ padding: 40px 5vw 60px; min-height:auto; }
  .hero h1{ font-size: clamp(38px, 10vw, 52px); }
  .hero-art{ height:300px; }
  .hero-logo-wrap{ width:220px; height:220px; }
  .ring1{ width:280px; height:280px; }
  .ring2{ width:340px; height:340px; }
  .float-card{ font-size:10px; padding:8px 11px; }
  .fc3{ display:none; }
  .stats{ gap:20px; justify-content:center; }
  .stats b{ font-size:24px; }
  .product-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .product{ padding:16px; }
  .product h3{ font-size:14px; }
  .review-grid, .features{ grid-template-columns:1fr; }
  .section-head{ flex-direction:column; align-items:flex-start; }
  .section{ padding: 60px 5vw; }
  .cta{ padding: 32px 22px; border-radius:20px; }
  .cta h2{ font-size: clamp(28px, 8vw, 40px); }
  .btn{ padding: 13px 22px; font-size:13px; }
  .purchase-pop{ left:12px; right:12px; bottom:12px; max-width:none; }
  .fab-whatsapp{ width:54px; height:54px; right:14px; bottom:14px; }
  .back-top{ right:14px; bottom:78px; }
  footer{ flex-direction:column; align-items:flex-start; padding: 30px 5vw; }
  .footer-links{ flex-wrap:wrap; }
  .timer-box{ padding:14px 18px; }
  #timer{ font-size:22px; }
  #timer b{ padding:5px 8px; min-width:36px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
}