/* ================================================================
   DESIGN TOKENS — DARK / LIGHT
================================================================ */
:root {
  --accent:        #F59E0B;
  --accent-2:      #fbbf24;
  --accent-dim:    rgba(245,158,11,.12);
  --accent-glow:   rgba(245,158,11,.28);
  --accent-border: rgba(245,158,11,.30);
  --font-h:  'Syne',    sans-serif;
  --font-b:  'Figtree', sans-serif;
  --ease:    cubic-bezier(.4,0,.2,1);
  --t:       all .28s var(--ease);
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  22px;
  --r-xl:  32px;
}

[data-theme="dark"] {
  --bg:          #08080d;
  --bg2:         #0f0f17;
  --surf:        #141420;
  --surf2:       #1a1a28;
  --border:      rgba(255,255,255,.065);
  --text:        #ededf4;
  --text-s:      #9898b0;
  --text-m:      #5c5c78;
  --nav-bg:      rgba(8,8,13,.82);
  --sh:          0 32px 64px rgba(0,0,0,.6);
  --sh-sm:       0 6px 24px rgba(0,0,0,.35);
  --hero-grad:   linear-gradient(135deg,#fff 0%,#F59E0B 100%);
  --noise:       .032;
}
[data-theme="light"] {
  --bg:          #f9f9f6;
  --bg2:         #f2f2ef;
  --surf:        #ffffff;
  --surf2:       #f5f5f2;
  --border:      rgba(0,0,0,.07);
  --text:        #0a0a10;
  --text-s:      #515168;
  --text-m:      #9898aa;
  --nav-bg:      rgba(249,249,246,.84);
  --sh:          0 20px 50px rgba(0,0,0,.08);
  --sh-sm:       0 4px 16px rgba(0,0,0,.06);
  --hero-grad:   linear-gradient(135deg,#0a0a10 0%,#b45309 100%);
  --noise:       .018;
}

/* ================================================================
   RESET & BASE
================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-b);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  overflow-x: hidden;
  transition: background .4s ease, color .4s ease;
}

/* Noise texture */
body::after {
  content: '';
  position: fixed; inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: var(--noise);
  pointer-events: none;
  z-index: 9999;
}

/* ================================================================
   TYPOGRAPHY
================================================================ */
h1,h2,h3,h4,h5,h6 { font-family: var(--font-h); line-height: 1.1; letter-spacing: -.025em; }

.tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-h); font-size: .72rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
}
.tag::before {
  content: ''; width: 28px; height: 2px;
  background: var(--accent); border-radius: 2px;
}

.sec-title {
  font-family: var(--font-h);
  font-size: clamp(1.75rem, 3.2vw, 2.6rem);
  font-weight: 800;
  color: var(--text);
  margin-top: .6rem;
}
.sec-sub {
  font-size: 1rem; color: var(--text-s);
  line-height: 1.75; max-width: 480px;
}

/* ================================================================
   BUTTONS
================================================================ */
.btn-a {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-h); font-size: .9rem; font-weight: 700;
  background: var(--accent); color: #06060a;
  padding: .72rem 1.7rem; border-radius: var(--r-md);
  border: none; cursor: pointer; text-decoration: none;
  transition: var(--t);
}
.btn-a:hover { background: var(--accent-2); color: #06060a; transform: translateY(-2px); box-shadow: 0 10px 32px var(--accent-glow); }

.btn-b {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-h); font-size: .9rem; font-weight: 700;
  background: transparent; color: var(--text);
  padding: .72rem 1.7rem; border-radius: var(--r-md);
  border: 1px solid var(--border); cursor: pointer; text-decoration: none;
  transition: var(--t);
}
.btn-b:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }

/* ================================================================
   NAVBAR
================================================================ */
#navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  padding: .9rem 0;
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  border-bottom: 1px solid transparent;
  transition: var(--t);
}
#navbar.scrolled { border-color: var(--border); }

.nav-logo {
  font-family: var(--font-h); font-size: 1.35rem; font-weight: 800;
  color: var(--text) !important; text-decoration: none; letter-spacing: -.04em;
}
.nav-logo span { color: var(--accent); }

.navbar .nav-link {
  font-family: var(--font-h); font-size: .84rem; font-weight: 500;
  color: var(--text-s) !important; padding: .35rem .75rem !important;
  border-radius: var(--r-sm); transition: var(--t); text-decoration: none;
}
.navbar .nav-link:hover { color: var(--text) !important; background: var(--surf); }

.theme-btn {
  width: 36px; height: 36px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surf);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-s); font-size: .85rem; cursor: pointer;
  transition: var(--t); flex-shrink: 0;
}
.theme-btn:hover { color: var(--accent); border-color: var(--accent-border); }

.navbar-toggler { border: 1px solid var(--border); border-radius: var(--r-sm); padding: .38rem .55rem; }
.navbar-toggler:focus { box-shadow: none; }
.navbar-toggler i { color: var(--text); font-size: 1rem; }

@media (max-width: 991px) {
  .navbar-collapse {
    background: var(--nav-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 1rem; margin-top: .5rem;
    -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  }
}

/* ================================================================
   HERO
================================================================ */
#hero {
  min-height: 100svh;
  display: flex; align-items: center;
  padding: 5.5rem 0 3rem;
  position: relative; overflow: hidden;
}

.hero-orb {
  position: absolute; border-radius: 50%;
  filter: blur(110px); pointer-events: none;
}
.orb-1 {
  width: 55vw; height: 55vw; max-width: 700px; max-height: 700px;
  background: radial-gradient(circle, #F59E0B 0%, transparent 70%);
  opacity: .07; top: -12%; right: -10%;
}
.orb-2 {
  width: 35vw; height: 35vw; max-width: 450px; max-height: 450px;
  background: radial-gradient(circle, #818cf8 0%, transparent 70%);
  opacity: .07; bottom: -8%; left: -8%;
}
[data-theme="light"] .orb-1 { opacity: .05; }
[data-theme="light"] .orb-2 { opacity: .05; }

.hero-inner { position: relative; z-index: 1; }

.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent-dim); border: 1px solid var(--accent-border);
  color: var(--accent); font-family: var(--font-h);
  font-size: .76rem; font-weight: 600; letter-spacing: .04em;
  padding: .34rem .9rem; border-radius: 100px; margin-bottom: 1.5rem;
}
.pulse-dot {
  width: 7px; height: 7px; background: var(--accent); border-radius: 50%;
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.6)} }

.hero-title {
  font-size: clamp(2.6rem, 6.5vw, 5.2rem);
  font-weight: 800; line-height: 1.03; letter-spacing: -.04em;
  margin-bottom: 1.4rem;
}
.hero-title .hi { color: var(--accent); }

.hero-sub {
  font-size: 1.05rem; color: var(--text-s);
  line-height: 1.78; max-width: 460px; margin-bottom: 2.4rem;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 2.8rem; }

.trust-row { display: flex; align-items: center; gap: 1rem; }
.avatars { display: flex; }
.av {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--bg);
  background: var(--surf2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-h); font-size: .65rem; font-weight: 800;
  color: var(--accent); margin-left: -9px; flex-shrink: 0;
}
.av:first-child { margin-left: 0; }
.av-more { background: var(--accent-dim); font-size: .6rem; }
.trust-txt { font-size: .82rem; color: var(--text-m); line-height: 1.5; }
.trust-txt strong { color: var(--text); }

/* Hero demo card */
.hero-card {
  background: var(--surf);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 1.75rem;
  max-width: 390px; width: 100%;
  box-shadow: var(--sh);
  animation: float 6s ease-in-out infinite;
  position: relative;
}
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }

.card-head { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.4rem; }
.card-icon {
  width: 42px; height: 42px; border-radius: var(--r-sm);
  background: var(--accent-dim); border: 1px solid var(--accent-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); font-size: 1rem;
}
.card-head-text .t1 { font-family: var(--font-h); font-size: .88rem; font-weight: 700; color: var(--text); }
.card-head-text .t2 { font-size: .73rem; color: var(--text-m); }

.metric { margin-bottom: 1.1rem; }
.metric-label { font-family: var(--font-h); font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--text-m); margin-bottom: .35rem; }
.metric-bar { height: 5px; background: var(--surf2); border-radius: 3px; overflow: hidden; }
.metric-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 3px; animation: grow 1.8s ease-out forwards; }
@keyframes grow { from{width:0} }
.metric-val { font-family: var(--font-h); font-size: .75rem; font-weight: 700; color: var(--accent); margin-top: .3rem; }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: 1.4rem; }
.stat-mini { background: var(--surf2); border-radius: var(--r-sm); padding: .7rem; text-align: center; }
.stat-mini .n { font-family: var(--font-h); font-size: 1.35rem; font-weight: 800; color: var(--accent); line-height: 1; }
.stat-mini .l { font-size: .68rem; color: var(--text-m); margin-top: .22rem; }

.float-chip {
  position: absolute;
  background: var(--surf); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: .6rem .9rem;
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--font-h); font-size: .76rem; font-weight: 600;
  color: var(--text); box-shadow: var(--sh-sm); white-space: nowrap;
}
.chip-1 { top: 8%; right: -6%; animation: chip1 5s ease-in-out infinite; }
.chip-2 { bottom: 12%; left: -8%; animation: chip2 6s ease-in-out infinite; }
@keyframes chip1 { 0%,100%{transform:translateY(0) rotate(2deg)} 50%{transform:translateY(-10px) rotate(-1deg)} }
@keyframes chip2 { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-8px) rotate(1deg)} }

@media(max-width:991px) { .float-chip{display:none} .hero-card{max-width:100%;margin-top:2.5rem} }

/* ================================================================
   MARQUEE
================================================================ */
.marquee-wrap {
  background: var(--bg2);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 2.8rem 0; overflow: hidden;
}
.marquee-lbl {
  font-family: var(--font-h); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--text-m); text-align: center; margin-bottom: 1.4rem;
}
.marquee-track {
  display: flex; gap: 2.8rem;
  width: max-content;
  animation: mq 22s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
@keyframes mq { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.brand {
  font-family: var(--font-h); font-size: .95rem; font-weight: 700;
  color: var(--text-m); display: flex; align-items: center; gap: .55rem;
  opacity: .45; transition: var(--t); white-space: nowrap;
}
.brand:hover { opacity: 1; color: var(--accent); }

/* ================================================================
   GENERIC SECTION
================================================================ */
section { padding: 6rem 0; }
.sec-header { margin-bottom: 3.5rem; }

/* ================================================================
   SERVICES
================================================================ */
.svc-card {
  background: var(--surf); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 1.85rem; height: 100%;
  position: relative; overflow: hidden;
  transition: var(--t);
}
.svc-card::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s ease;
}
.svc-card:hover { border-color: var(--accent-border); transform: translateY(-6px); box-shadow: var(--sh); }
.svc-card:hover::after { transform: scaleX(1); }

.svc-icon {
  width: 50px; height: 50px; border-radius: var(--r-md);
  background: var(--accent-dim); border: 1px solid var(--accent-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); font-size: 1.2rem; margin-bottom: 1.1rem;
}
.svc-title { font-family: var(--font-h); font-size: 1.05rem; font-weight: 700; color: var(--text); margin-bottom: .6rem; }
.svc-desc { font-size: .88rem; color: var(--text-s); line-height: 1.68; }

/* ================================================================
   STATS
================================================================ */
.stats-strip {
  background: var(--surf); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.stat-item { text-align: center; padding: 2.2rem 1rem; }
.stat-n {
  font-family: var(--font-h); font-size: clamp(2.4rem,5vw,3.8rem);
  font-weight: 800; color: var(--accent); line-height: 1; display: block;
}
.stat-l { font-size: .88rem; color: var(--text-s); margin-top: .45rem; }
.stat-sep-right { border-right: 1px solid var(--border); }

/* ================================================================
   PROCESS
================================================================ */
.step { display: flex; gap: 1.25rem; align-items: flex-start; }
.step-num {
  width: 54px; height: 54px; flex-shrink: 0;
  background: var(--accent-dim); border: 1px solid var(--accent-border);
  border-radius: var(--r-md); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-h); font-size: 1.1rem; font-weight: 800; color: var(--accent);
}
.step-body h4 { font-family: var(--font-h); font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: .42rem; }
.step-body p { font-size: .87rem; color: var(--text-s); line-height: 1.68; }
.step-line { width: 2px; height: 36px; background: linear-gradient(var(--accent-border),transparent); margin-left: 26px; }

.why-card {
  background: var(--surf); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 2rem;
}
.why-row { display: flex; align-items: flex-start; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--border); }
.why-row:last-child { border: none; padding-bottom: 0; }
.why-icon { width: 38px; height: 38px; flex-shrink: 0; background: var(--accent-dim); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: .9rem; }
.why-row h5 { font-family: var(--font-h); font-size: .88rem; font-weight: 700; color: var(--text); margin-bottom: .22rem; }
.why-row p { font-size: .82rem; color: var(--text-s); line-height: 1.58; margin: 0; }

/* ================================================================
   TESTIMONIALS
================================================================ */
.testi-card {
  background: var(--surf); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 1.85rem; height: 100%;
}
.testi-stars { color: var(--accent); font-size: .72rem; margin-bottom: .85rem; letter-spacing: 1px; }
.testi-quote { font-family: Georgia,serif; font-size: 2.6rem; line-height: 1; color: var(--accent); opacity: .35; margin-bottom: .35rem; }
.testi-text { font-size: .9rem; color: var(--text-s); line-height: 1.75; font-style: italic; margin-bottom: 1.35rem; }
.testi-author { display: flex; align-items: center; gap: .7rem; }
.testi-av { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-h); font-weight: 800; font-size: .95rem; color: #06060a; flex-shrink: 0; }
.testi-name { font-family: var(--font-h); font-size: .88rem; font-weight: 700; color: var(--text); }
.testi-role { font-size: .75rem; color: var(--text-m); }

/* ================================================================
   PRICING
================================================================ */
.price-card {
  background: var(--surf); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 2.2rem 1.85rem;
  height: 100%; position: relative; transition: var(--t);
}
.price-card:hover:not(.feat) { border-color: var(--accent-border); transform: translateY(-5px); box-shadow: var(--sh); }
.price-card.feat {
  background: var(--accent); border-color: var(--accent);
}
.price-card.feat * { color: #06060a !important; }
@media(min-width:992px) { .price-card.feat { transform: scale(1.03); } }

.feat-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: #06060a; color: var(--accent) !important;
  font-family: var(--font-h); font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  padding: .22rem .85rem; border-radius: 100px;
}
.price-plan { font-family: var(--font-h); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .13em; color: var(--text-m); margin-bottom: .6rem; }
.price-num { font-family: var(--font-h); font-size: 2.9rem; font-weight: 800; color: var(--text); line-height: 1; }
.price-per { font-size: .82rem; color: var(--text-m); margin-bottom: 1.25rem; }
.price-desc { font-size: .85rem; color: var(--text-s); line-height: 1.6; margin-bottom: 1.6rem; }
.price-feats { list-style: none; padding: 0; margin: 0 0 1.8rem; }
.price-feats li { display: flex; align-items: flex-start; gap: .55rem; font-size: .85rem; color: var(--text-s); padding: .38rem 0; border-bottom: 1px solid var(--border); }
.price-feats li:last-child { border: none; }
.price-feats .ck { color: var(--accent); font-size: .7rem; margin-top: .18rem; flex-shrink: 0; }
.price-feats .no { color: var(--text-m); font-size: .7rem; margin-top: .18rem; flex-shrink: 0; }

.btn-price {
  width: 100%; font-family: var(--font-h); font-weight: 700; font-size: .88rem;
  padding: .78rem; border-radius: var(--r-md);
  border: 1px solid var(--accent-border); background: transparent;
  color: var(--accent); cursor: pointer; transition: var(--t);
}
.btn-price:hover { background: var(--accent); color: #06060a; border-color: var(--accent); }
.btn-price-feat { background: #06060a !important; color: var(--accent) !important; border-color: transparent !important; }

/* ================================================================
   FAQ
================================================================ */
.faq-item { border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: .65rem; overflow: hidden; transition: var(--t); }
.faq-item.open { border-color: var(--accent-border); }
.faq-q {
  width: 100%; background: var(--surf); border: none;
  padding: 1.15rem 1.35rem; text-align: left;
  font-family: var(--font-h); font-size: .9rem; font-weight: 600; color: var(--text);
  cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  transition: var(--t);
}
.faq-q:hover { background: var(--surf2); }
.faq-icon { width: 22px; height: 22px; border: 1px solid var(--border); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .62rem; color: var(--text-m); flex-shrink: 0; transition: var(--t); }
.faq-item.open .faq-icon { background: var(--accent); border-color: var(--accent); color: #06060a; transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; background: var(--surf); transition: max-height .38s ease; }
.faq-a.open { max-height: 180px; }
.faq-a-in { padding: 0 1.35rem 1.15rem; font-size: .87rem; color: var(--text-s); line-height: 1.72; }

/* ================================================================
   CTA BAND
================================================================ */
.cta-band {
  background: var(--surf);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  position: relative; overflow: hidden;
}
.cta-orb {
  position: absolute; width: 480px; height: 480px;
  background: var(--accent); border-radius: 50%; filter: blur(140px);
  opacity: .055; top: 50%; left: 50%; transform: translate(-50%,-50%);
  pointer-events: none;
}

/* ================================================================
   CONTACT FORM
================================================================ */
.field-label { font-family: var(--font-h); font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--text-s); display: block; margin-bottom: .45rem; }
.field {
  width: 100%; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: .78rem 1rem;
  font-family: var(--font-b); font-size: .9rem; color: var(--text);
  outline: none; transition: var(--t);
}
.field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.field::placeholder { color: var(--text-m); }
textarea.field { resize: vertical; min-height: 104px; }
select.field {
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2371717a' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 01.753 1.659l-4.796 5.48a1 1 0 01-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 11px;
}
.contact-card { background: var(--surf); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 2rem; }
.contact-card h4 { font-family: var(--font-h); font-size: 1.05rem; font-weight: 700; color: var(--text); margin-bottom: 1.5rem; }

.info-row { display: flex; align-items: center; gap: .9rem; }
.info-icon { width: 42px; height: 42px; flex-shrink: 0; background: var(--accent-dim); border: 1px solid var(--accent-border); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: .9rem; }
.info-label { font-family: var(--font-h); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-m); }
.info-val { font-size: .9rem; color: var(--text); text-decoration: none; transition: var(--t); }
.info-val:hover { color: var(--accent); }

/* ================================================================
   FOOTER
================================================================ */
footer { background: var(--bg2); border-top: 1px solid var(--border); padding: 4.5rem 0 2rem; }
.foot-logo { font-family: var(--font-h); font-size: 1.35rem; font-weight: 800; color: var(--text); text-decoration: none; letter-spacing: -.04em; }
.foot-logo span { color: var(--accent); }
.foot-desc { font-size: .85rem; color: var(--text-m); line-height: 1.68; margin-top: .65rem; max-width: 250px; }
.foot-head { font-family: var(--font-h); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--text-s); margin-bottom: .9rem; }
.foot-links { list-style: none; padding: 0; }
.foot-links li { margin-bottom: .42rem; }
.foot-links a { font-size: .86rem; color: var(--text-m); text-decoration: none; transition: var(--t); }
.foot-links a:hover { color: var(--accent); }
.social-row { display: flex; gap: .6rem; margin-top: .9rem; }
.soc {
  width: 36px; height: 36px; border: 1px solid var(--border); border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-m); font-size: .88rem; text-decoration: none; transition: var(--t);
}
.soc:hover { border-color: var(--accent); color: var(--accent); }
.soc.wa { border-color: rgba(37,211,102,.3); color: #25d366; }
.soc.wa:hover { background: rgba(37,211,102,.08); }
.foot-bottom { border-top: 1px solid var(--border); margin-top: 2.8rem; padding-top: 1.4rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .8rem; }
.foot-copy { font-size: .8rem; color: var(--text-m); }
.foot-links-b { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.foot-links-b a { font-size: .8rem; color: var(--text-m); text-decoration: none; }
.foot-links-b a:hover { color: var(--accent); }

/* ================================================================
   WHATSAPP FAB
================================================================ */
.wa-fab {
  position: fixed; bottom: 2rem; right: 2rem; z-index: 800;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25d366; color: white; font-size: 1.45rem;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; box-shadow: 0 8px 28px rgba(37,211,102,.42);
  transition: var(--t); animation: fab-float 3.5s ease-in-out infinite;
}
.wa-fab::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: #25d366; animation: fab-ping 2.2s ease-out infinite; opacity: 0;
}
.wa-fab:hover { transform: scale(1.14) translateY(-2px); color: white; box-shadow: 0 14px 40px rgba(37,211,102,.52); }
@keyframes fab-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
@keyframes fab-ping  { 0%{transform:scale(1);opacity:.65} 100%{transform:scale(1.9);opacity:0} }

/* ================================================================
   REVEAL ANIMATION
================================================================ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .65s ease, transform .65s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ================================================================
   RESPONSIVE
================================================================ */
@media(max-width:767px) {
  section { padding: 4rem 0; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn-a, .hero-actions .btn-b { width: 100%; justify-content: center; }
  .stat-sep { display: none; }
}