/* ===== Filora — landing page styles ===== */

:root{
  --blue: #40348b;
  --blue-dark: #241d55;
  --blue-mid: #5544b8;
  --blue-light: #ece9fb;
  --blue-pale: #f5f4fd;
  --rose: #e1005f;
  --green: #41b82e;
  --red: #d9342b;
  --wa-green: #25d366;
  --ink: #1c1a2e;
  --ink-soft: #565270;
  --white: #ffffff;
  --off: #fafaff;
  --shadow: 0 20px 50px -20px rgba(36, 29, 85, .35);
  --radius: 20px;
  --ff-head: 'Poppins', sans-serif;
  --ff-body: 'Inter', sans-serif;
}

@property --angle{
  syntax:'<angle>'; inherits:false; initial-value:0deg;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; overflow-x:hidden; width:100%; }
body{
  position:relative;
  font-family:var(--ff-body);
  color:var(--ink);
  background:var(--white);
  overflow-x:hidden;
  width:100%;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }
.container{ width:min(1180px, 92%); margin-inline:auto; }

/* ---------- film grain overlay ---------- */
body::after{
  content:''; position:fixed; inset:0; z-index:200; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- custom cursor (hover-capable pointers only) ---------- */
.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0; z-index:999; pointer-events:none;
  border-radius:50%; opacity:0; will-change:transform;
}
.cursor-dot{ width:7px; height:7px; background:var(--rose); transform:translate(-50%,-50%); }
.cursor-ring{
  width:36px; height:36px; border:1.5px solid rgba(64,52,139,.45); transform:translate(-50%,-50%);
  transition:width .25s ease, height .25s ease, border-color .25s ease, background .25s ease;
}
body.has-cursor .cursor-dot, body.has-cursor .cursor-ring{ opacity:1; }
body.has-cursor a, body.has-cursor button, body.has-cursor .btn{ cursor:none; }
.cursor-ring.is-active{ width:56px; height:56px; background:rgba(64,52,139,.08); border-color:var(--rose); }

h1,h2,h3{ font-family:var(--ff-head); color:var(--blue-dark); line-height:1.15; }

/* ---------- reveal on scroll ---------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s cubic-bezier(.19,1,.22,1), transform .8s cubic-bezier(.19,1,.22,1);
  transition-delay:var(--d, 0s);
}
.reveal.in-view{ opacity:1; transform:translateY(0); }

/* ---------- background shapes ---------- */
.bg-shapes{ position:absolute; inset:0; width:100%; height:100%; overflow:hidden; z-index:-1; pointer-events:none; }
.shape{ position:absolute; opacity:.08; background:linear-gradient(135deg, var(--blue), var(--blue-mid)); }
.s1{ width:520px; height:520px; top:-180px; right:-160px; clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 70%); animation: drift 22s ease-in-out infinite; }
.s2{ width:380px; height:380px; bottom:5%; left:-140px; clip-path: polygon(0 0, 100% 20%, 80% 100%, 0 100%); animation: drift 26s ease-in-out infinite reverse; }
.s3{ width:260px; height:260px; top:45%; right:6%; clip-path: polygon(50% 0, 100% 100%, 0 100%); opacity:.05; animation: drift 18s ease-in-out infinite; }
.s4{ width:200px; height:200px; top:8%; left:12%; clip-path: polygon(50% 0, 100% 100%, 0 100%); opacity:.04; animation: drift 20s ease-in-out infinite reverse; }
@keyframes drift{
  0%,100%{ transform:translate(0,0) rotate(0deg); }
  50%{ transform:translate(-18px, 22px) rotate(6deg); }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--ff-head); font-weight:600; font-size:.95rem;
  padding:.85em 1.7em; border-radius:100px; border:2px solid transparent;
  cursor:pointer; transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
  white-space:nowrap; position:relative; overflow:hidden; isolation:isolate;
}
.btn-primary, .btn-whatsapp, .btn-red{ z-index:0; }
.btn-primary::after, .btn-whatsapp::after, .btn-red::after{
  content:''; position:absolute; inset:0; z-index:1; border-radius:inherit;
  background:linear-gradient(120deg, transparent 40%, rgba(255,255,255,.32) 50%, transparent 60%);
  transform:translateX(-130%); pointer-events:none;
}
.btn-primary:hover::after, .btn-whatsapp:hover::after, .btn-red:hover::after{
  animation:btnShine 1s ease forwards;
}
@keyframes btnShine{ to{ transform:translateX(130%); } }
.btn-primary > *, .btn-whatsapp > *, .btn-red > *{ position:relative; z-index:2; }
.btn-primary{ background:linear-gradient(135deg, var(--blue), var(--blue-mid)); color:var(--white); box-shadow:0 14px 30px -12px rgba(64,52,139,.55); }
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 20px 38px -14px rgba(64,52,139,.65); }
.btn-outline{ border-color:var(--blue); color:var(--blue); background:transparent; }
.btn-outline:hover{ background:var(--blue); color:var(--white); transform:translateY(-3px); }
.btn-outline-light{ border-color:rgba(255,255,255,.5); color:var(--white); background:transparent; }
.btn-outline-light:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.btn-whatsapp{ background:linear-gradient(135deg, var(--wa-green), #1fae57); color:var(--white); box-shadow:0 14px 30px -12px rgba(37,211,102,.55); }
.btn-whatsapp:hover{ transform:translateY(-3px); box-shadow:0 20px 38px -14px rgba(37,211,102,.65); }
.btn-whatsapp .wa-icon{ width:18px; height:18px; flex:none; }
.btn-red{ background:linear-gradient(135deg, var(--red), #a8241d); color:var(--white); box-shadow:0 14px 30px -12px rgba(217,52,43,.55); }
.btn-red:hover{ transform:translateY(-3px); box-shadow:0 20px 38px -14px rgba(217,52,43,.65); }
.btn-lg{ padding:1em 2.1em; font-size:1rem; }
.btn-sm{ padding:.6em 1.3em; font-size:.85rem; }
.btn-block{ display:flex; width:100%; margin-top:.8rem; }

/* ---------- header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:16px 0; transition:background .35s ease, box-shadow .35s ease, padding .35s ease;
}
.site-header.scrolled{
  background:rgba(255,255,255,.85); backdrop-filter:blur(14px);
  box-shadow:0 8px 30px -18px rgba(36,29,85,.35); padding:10px 0;
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand-logo{ height:36px; width:auto; transition:height .35s ease; }
.main-nav{ display:flex; gap:34px; }
.nav-link{
  font-family:var(--ff-head); font-weight:600; font-size:.92rem; color:var(--blue-dark);
  position:relative; padding:4px 0;
}
.nav-link::after{
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--rose);
  transition:width .3s ease;
}
.nav-link:hover::after{ width:100%; }
.header-actions{ display:flex; align-items:center; gap:12px; }
.order-now-wrap{ position:relative; }
.order-now-menu{
  position:absolute; top:calc(100% + 10px); right:0; min-width:230px;
  background:var(--white); border-radius:16px; padding:8px; box-shadow:var(--shadow);
  opacity:0; transform:translateY(-8px); pointer-events:none; transition:opacity .25s ease, transform .25s ease;
  z-index:150;
}
.order-now-menu.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
.order-now-menu a{
  display:flex; align-items:center; gap:8px; padding:11px 14px; border-radius:10px;
  font-family:var(--ff-head); font-weight:600; font-size:.88rem; color:var(--blue-dark);
  transition:background .2s ease;
}
.order-now-menu a:hover{ background:var(--blue-pale); }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
.nav-toggle span{ width:22px; height:2px; background:var(--blue-dark); border-radius:2px; }

/* ---------- hero ---------- */
.hero{ padding:170px 0 90px; position:relative; overflow:hidden; }
.hero-glow{
  position:absolute; width:720px; height:720px; border-radius:50%; left:28%; top:30%;
  background:
    radial-gradient(circle at 35% 30%, rgba(64,52,139,.22), transparent 45%),
    radial-gradient(circle at 65% 60%, rgba(225,0,95,.14), transparent 50%),
    radial-gradient(circle at 50% 80%, rgba(65,184,46,.10), transparent 45%);
  transform:translate(-50%,-50%); pointer-events:none; z-index:0; filter:blur(30px);
  transition:left .6s cubic-bezier(.19,1,.22,1), top .6s cubic-bezier(.19,1,.22,1);
  animation:auroraShift 10s ease-in-out infinite;
}
@keyframes auroraShift{
  0%,100%{ filter:blur(30px) hue-rotate(0deg); }
  50%{ filter:blur(38px) hue-rotate(12deg); }
}
.star-field{ position:absolute; inset:0; z-index:0; pointer-events:none; width:100%; height:100%; }
.hero-inner{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:40px; }
.eyebrow{
  display:inline-block; font-family:var(--ff-head); font-weight:600; font-size:.8rem;
  letter-spacing:.06em; color:var(--rose); text-transform:uppercase; margin-bottom:14px;
}
.hero-title{ font-size:clamp(2.4rem, 4.6vw, 3.6rem); font-weight:800; letter-spacing:-.02em; }
.hero-line{ display:inline-block; }
.hero-title .word{
  display:inline-block; opacity:0; filter:blur(8px); transform:translateY(26px) scale(.97);
  transition:opacity .7s cubic-bezier(.19,1,.22,1), transform .7s cubic-bezier(.19,1,.22,1), filter .7s ease;
  transition-delay:calc(var(--i, 0) * 90ms + .1s);
}
.hero-title.in-view .word{ opacity:1; filter:blur(0); transform:translateY(0) scale(1); }
.text-accent{
  background:linear-gradient(100deg, var(--blue) 20%, var(--rose) 50%, var(--blue) 80%);
  background-size:220% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shineText 6s linear infinite;
}
@keyframes shineText{ to{ background-position:-220% center; } }
.hero-sub{ margin-top:20px; font-size:1.08rem; color:var(--ink-soft); max-width:520px; line-height:1.7; }
.hero-cta{ display:flex; gap:16px; margin-top:34px; flex-wrap:wrap; }
.hero-stats{ display:flex; flex-wrap:wrap; row-gap:16px; gap:36px; margin-top:52px; }
.stat{ display:flex; flex-direction:column; }
.stat-num{ font-family:var(--ff-head); font-weight:800; font-size:1.6rem; color:var(--blue); }
.stat-label{ font-size:.8rem; color:var(--ink-soft); margin-top:2px; }

/* ---------- hero bottle 3D flip ---------- */
.hero-visual{ position:relative; display:flex; align-items:center; justify-content:center; min-height:480px; }
.bottle-stage{
  perspective:1600px; position:relative; width:100%; max-width:620px;
  display:flex; align-items:center; justify-content:center; margin-inline:auto;
}
.bottle-tilt{
  transform-style:preserve-3d; will-change:transform; width:100%;
  display:flex; align-items:center; justify-content:center;
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.bottle-glow{
  position:absolute; inset:-15%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(64,52,139,.18), transparent 70%);
  z-index:0; animation:pulseGlow 4s ease-in-out 1.4s infinite;
}
@keyframes pulseGlow{
  0%,100%{ opacity:.7; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.08); }
}
.bottle-flip{
  position:relative; z-index:1; width:100%; max-width:100%; height:auto;
  filter:drop-shadow(0 30px 34px rgba(36,29,85,.35));
  animation: bottleRise 1.1s cubic-bezier(.19,1,.22,1) both,
             bottleFloat 4.6s ease-in-out 1.1s infinite;
}
@keyframes bottleRise{
  0%{ transform:translateY(46px) scale(.94); opacity:0; }
  65%{ transform:translateY(-6px) scale(1.015); opacity:1; }
  100%{ transform:translateY(0) scale(1); opacity:1; }
}
@keyframes bottleFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-14px); }
}
.bottle-shadow{
  position:absolute; left:50%; bottom:6px; translate:-50% 0;
  width:56%; height:26px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(36,29,85,.35), transparent 75%);
  animation: shadowPulse 4.2s ease-in-out 1.5s infinite;
}
@keyframes shadowPulse{
  0%,100%{ transform:translate(-50%,0) scale(1); opacity:.55; }
  50%{ transform:translate(-50%,0) scale(.82); opacity:.3; }
}
.floaty{
  position:absolute; color:var(--rose); font-size:1.1rem; opacity:.7;
  animation:sparkle 3s ease-in-out infinite;
}
.f1{ top:12%; left:8%; animation-delay:.2s; color:var(--green); }
.f2{ top:60%; right:4%; animation-delay:1s; }
.f3{ bottom:10%; left:2%; animation-delay:1.8s; color:var(--blue-mid); }
@keyframes sparkle{
  0%,100%{ transform:translateY(0) scale(1); opacity:.4; }
  50%{ transform:translateY(-10px) scale(1.3); opacity:.9; }
}

/* ---------- marquee ---------- */
.marquee{
  background:linear-gradient(90deg, var(--blue-dark), var(--blue) 50%, var(--blue-dark));
  overflow:hidden; padding:16px 0; position:relative; z-index:1;
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track{
  display:flex; align-items:center; gap:16px; width:max-content;
  animation:marqueeScroll 26s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-track span{
  font-family:var(--ff-head); font-weight:700; font-size:.85rem; letter-spacing:.08em;
  text-transform:uppercase; color:rgba(255,255,255,.92); white-space:nowrap;
}
.marquee-track .dot{ color:var(--rose); font-size:1rem; }
@keyframes marqueeScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ---------- section shells ---------- */
section{ position:relative; padding:110px 0; }
.section-eyebrow{
  font-family:var(--ff-head); font-weight:700; font-size:.8rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--rose); margin-bottom:12px;
}
.section-eyebrow.light{ color:#ffb3d6; }
.section-eyebrow.center{ text-align:center; }
.section-title{ font-size:clamp(1.9rem, 3.2vw, 2.5rem); font-weight:800; letter-spacing:-.015em; }
.section-title.center{ text-align:center; }
.section-title.light{ color:var(--white); }
.section-sub{ margin-top:14px; color:var(--ink-soft); font-size:1.05rem; max-width:560px; }
.section-sub.center{ margin-inline:auto; text-align:center; }
.section-sub.left{ margin-top:12px; }

/* ---------- about ---------- */
.about-inner{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.values-wrap{ margin-top:100px; }
.about-text p{ color:var(--ink-soft); margin-top:18px; line-height:1.75; font-size:1.02rem; }
.about-cards{ display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:1fr; gap:18px; }
.mini-card{
  position:relative; background:var(--blue-pale); border-radius:var(--radius); padding:26px 28px;
  border:1px solid var(--blue-light); transition:transform .35s ease, box-shadow .35s ease, background .35s ease;
  overflow:hidden;
}
.mini-card--tall{ grid-row:span 2; display:flex; flex-direction:column; justify-content:center; }
.mini-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); background:var(--white); }
.mini-num{ font-family:var(--ff-head); font-weight:800; color:var(--rose); font-size:.85rem; }
.mini-card h3{ font-size:1.1rem; margin-top:8px; }
.mini-card p{ color:var(--ink-soft); margin-top:6px; font-size:.92rem; line-height:1.6; }

/* ---------- vision ---------- */
.vision{
  background:linear-gradient(135deg, var(--blue-dark), var(--blue));
  padding:100px 0; text-align:center; position:relative; overflow:hidden;
}
.vision::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(420px circle at 12% 20%, rgba(225,0,95,.16), transparent 60%),
    radial-gradient(360px circle at 88% 80%, rgba(65,184,46,.14), transparent 60%);
}
.vision-quote{ position:relative; z-index:1; }
.vision-quote{
  font-family:var(--ff-head); font-weight:600; font-size:clamp(1.3rem, 2.6vw, 1.85rem);
  color:var(--white); max-width:820px; margin-inline:auto; line-height:1.55;
}

/* ---------- values ---------- */
.values-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:22px; margin-top:52px; }
.value-card{
  position:relative; overflow:hidden;
  background:var(--white); border:1px solid var(--blue-light); border-radius:var(--radius);
  padding:32px 24px; text-align:center; transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.value-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow); border-color:transparent; }
.value-icon{
  width:60px; height:60px; margin:0 auto 18px; border-radius:16px;
  background:var(--blue-pale); display:flex; align-items:center; justify-content:center;
  color:var(--blue); transition:background .35s ease, color .35s ease, transform .35s ease;
}
.value-card:hover .value-icon{ background:var(--blue); color:var(--white); transform:rotate(-8deg) scale(1.08); }
.value-icon svg{ width:26px; height:26px; }
.value-card h3{ font-size:1.05rem; }
.value-card p{ color:var(--ink-soft); font-size:.9rem; margin-top:8px; line-height:1.55; }

/* ---------- products ---------- */
.products{ background:var(--off); }
.products-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; margin-top:56px; }
.products-grid-6{ grid-template-columns:repeat(3, minmax(0,340px)); justify-content:center; }
.products-more{ text-align:center; margin-top:48px; }
.product-card{
  position:relative; overflow:hidden; transform-style:preserve-3d;
  background:var(--white); border-radius:var(--radius); padding:26px;
  border:1px solid var(--blue-light); transition:transform .4s cubic-bezier(.2,.8,.3,1), box-shadow .4s ease;
}
.product-card:hover{
  transform:perspective(900px) translateY(-10px) scale(1.015) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));
  box-shadow:var(--shadow);
}
.product-img{
  height:210px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg, var(--blue-pale), transparent);
  border-radius:14px; margin-bottom:20px; overflow:hidden;
}
.product-img img{ height:88%; width:auto; transition:transform .5s ease; }
.product-card:hover .product-img img{ transform:scale(1.08) rotate(-2deg); }
.product-card h3{ font-size:1.08rem; }
.product-card p{ color:var(--ink-soft); font-size:.9rem; margin-top:8px; line-height:1.55; }

/* ---------- quality ---------- */
.quality{ background:var(--off); }
.quality-inner{ max-width:760px; margin-inline:auto; }
.check-list-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:20px 40px; margin-top:44px;
}
.check-list li{
  display:flex; align-items:flex-start; gap:14px; font-size:1rem; color:var(--ink-soft);
  line-height:1.6;
}
.check{
  flex:none; width:26px; height:26px; border-radius:50%; background:var(--green); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700;
  margin-top:2px;
}

/* ---------- contact ---------- */
.contact{ background:linear-gradient(160deg, var(--blue-dark), var(--blue) 60%, var(--blue-mid)); overflow:hidden; }
.contact-head{ max-width:640px; margin-inline:auto; text-align:center; }
.contact-lead{ color:rgba(255,255,255,.82); margin:16px auto 0; font-size:1.05rem; max-width:480px; line-height:1.7; }
.contact-list{ margin:32px auto 0; max-width:460px; display:flex; flex-direction:column; gap:16px; }
.contact-item{
  display:flex; align-items:center; gap:14px; color:#fff; font-size:.98rem;
  padding:14px 18px; border-radius:14px; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14); transition:background .3s ease, transform .3s ease;
}
.contact-item:hover{ background:rgba(255,255,255,.16); transform:translateX(6px); }
.c-icon{ flex:none; width:20px; height:20px; }
.c-icon svg{ width:100%; height:100%; }
.social-row{ display:flex; justify-content:center; gap:16px; margin-top:26px; }
.social-row a{
  font-family:var(--ff-head); font-weight:600; font-size:.85rem; color:#fff;
  padding:.6em 1.3em; border-radius:100px; border:1px solid rgba(255,255,255,.4);
  transition:background .3s ease, border-color .3s ease;
}
.social-row a:hover{ background:rgba(255,255,255,.15); border-color:#fff; }

.contact-cards{ display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; margin-top:70px; align-items:stretch; }
.contact-card{
  position:relative; overflow:hidden;
  background:var(--white); border-radius:24px; padding:34px 30px; border-top:6px solid var(--accent, var(--blue));
  box-shadow:0 30px 60px -26px rgba(0,0,0,.4); display:flex; flex-direction:column;
  transition:transform .35s ease, box-shadow .35s ease;
}
.contact-card:hover{ transform:translateY(-8px); box-shadow:0 34px 60px -24px var(--accent-shadow, rgba(0,0,0,.4)); }
.contact-card h3{ font-size:1.25rem; }
.contact-card p{ color:var(--ink-soft); margin-top:8px; font-size:.92rem; line-height:1.55; }
.contact-card .btn{ margin-top:.7rem; }
.card-blue{ --accent: var(--blue); --accent-shadow: rgba(64,52,139,.4); }
.card-green{ --accent: var(--wa-green); --accent-shadow: rgba(37,211,102,.4); }
.card-red{ --accent: var(--red); --accent-shadow: rgba(217,52,43,.4); }

.pack-mini{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.pack-mini li{ display:flex; align-items:center; gap:12px; }
.pack-mini img{
  width:44px; height:44px; object-fit:contain; border-radius:10px; background:var(--blue-pale); padding:5px; flex:none;
}
.pack-mini span{ font-size:.86rem; font-weight:600; color:var(--ink); }

.bulk-form{ display:flex; flex-direction:column; gap:10px; margin-top:18px; }
.bulk-form input, .bulk-form textarea{
  border:1.5px solid var(--blue-light); border-radius:10px; padding:11px 14px;
  font-family:var(--ff-body); font-size:.9rem; color:var(--ink); resize:vertical;
}
.bulk-form input:focus, .bulk-form textarea:focus{ outline:none; border-color:var(--red); }
.hidden-field{ position:absolute; left:-9999px; top:-9999px; }

/* ---------- footer ---------- */
.site-footer{ background:var(--blue-dark); padding:40px 0; }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; }
.footer-logo{ height:38px; }
.footer-nav{ display:flex; gap:26px; }
.footer-nav a{ color:rgba(255,255,255,.75); font-size:.88rem; font-weight:500; transition:color .3s ease; }
.footer-nav a:hover{ color:#fff; }
.footer-copy{ color:rgba(255,255,255,.5); font-size:.82rem; }

/* ---------- whatsapp fab ---------- */
.fab-wrap{ position:fixed; right:24px; bottom:59px; z-index:90; }
.whatsapp-fab{
  position:relative; width:58px; height:58px; border-radius:50%; border:none; cursor:pointer;
  background:var(--wa-green); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 30px -10px rgba(37,211,102,.6);
  transition:transform .3s ease, box-shadow .3s ease; animation:fabPop .6s ease .8s both;
}
.whatsapp-fab svg{ width:28px; height:28px; }
.whatsapp-fab:hover{ transform:scale(1.1); box-shadow:0 18px 36px -8px rgba(37,211,102,.7); }
@keyframes fabPop{ 0%{ transform:scale(0); } 80%{ transform:scale(1.15); } 100%{ transform:scale(1); } }
.fab-menu{
  position:absolute; bottom:calc(100% + 14px); right:0; min-width:220px;
  background:var(--white); border-radius:16px; padding:8px; box-shadow:var(--shadow);
  opacity:0; transform:translateY(8px); pointer-events:none; transition:opacity .25s ease, transform .25s ease;
}
.fab-menu.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
.fab-menu a{
  display:block; padding:11px 14px; border-radius:10px;
  font-family:var(--ff-head); font-weight:600; font-size:.88rem; color:var(--blue-dark);
  transition:background .2s ease;
}
.fab-menu a:hover{ background:var(--blue-pale); }

/* ---------- premium hover fx: rotating border-beam + cursor spotlight ---------- */
.value-card::before, .product-card::before, .mini-card::before{
  content:''; position:absolute; inset:0; z-index:3; border-radius:inherit; padding:1.5px;
  background:conic-gradient(from var(--angle), transparent 0 65%, var(--rose), var(--blue-mid), var(--green), transparent);
  -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; pointer-events:none; transition:opacity .4s ease;
  animation:beamRotate 3.2s linear infinite; animation-play-state:paused;
}
.value-card:hover::before, .product-card:hover::before, .mini-card:hover::before{
  opacity:1; animation-play-state:running;
}
@keyframes beamRotate{ to{ --angle:360deg; } }

.value-card::after, .product-card::after, .mini-card::after{
  content:''; position:absolute; inset:0; z-index:1; border-radius:inherit; pointer-events:none;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(64,52,139,.12), transparent 68%);
  opacity:0; transition:opacity .35s ease;
}
.contact-card::after{
  content:''; position:absolute; inset:0; z-index:1; border-radius:inherit; pointer-events:none;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), var(--accent, var(--blue)), transparent 68%);
  opacity:0; transition:opacity .35s ease; filter:opacity(.12);
}
.value-card:hover::after, .product-card:hover::after, .mini-card:hover::after, .contact-card:hover::after{ opacity:1; }
.value-card > *, .product-card > *, .mini-card > *, .contact-card > *{ position:relative; z-index:2; }

/* ================= responsive ================= */
@media (max-width: 980px){
  .hero-inner, .about-inner{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; min-height:340px; }
  .values-grid{ grid-template-columns:repeat(2, 1fr); }
  .products-grid{ grid-template-columns:repeat(2, 1fr); }
  .contact-cards{ grid-template-columns:1fr; }
  .check-list-grid{ grid-template-columns:1fr; }
  .about-cards{ margin-top:10px; grid-template-columns:1fr; grid-auto-rows:auto; }
  .mini-card--tall{ grid-row:auto; }
}
@media (hover: none), (pointer: coarse){
  .cursor-dot, .cursor-ring{ display:none; }
}
@media (max-width: 720px){
  .main-nav{
    position:fixed; top:64px; left:16px; right:16px; background:#fff; border-radius:18px;
    flex-direction:column; padding:20px; gap:12px; box-shadow:var(--shadow);
    transform:translateY(-14px); opacity:0; pointer-events:none; transition:all .3s ease;
  }
  .main-nav.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .nav-toggle{ display:flex; }
  .header-actions .btn-primary.btn-sm{ display:none; }
  .order-now-menu{ right:-16px; }
  .hero{ padding:140px 0 70px; }
  .hero-title{ font-size:2.05rem; padding-right:.1em; }
  .hero-stats{ gap:22px; }
  .values-grid, .products-grid{ grid-template-columns:1fr; }
}