/* ============================================================
   Fingro Services — Stylesheet
   Palette: Indigo #3F5FE0 (primary) / Navy #14213D (secondary)
   Type: "Fraunces" (display serif, headings) + "Inter" (body/UI)
   ============================================================ */

:root{
  --primary:#3F5FE0;
  --primary-dark:#2C46B8;
  --primary-light:#EEF1FD;
  --navy:#14213D;
  --navy-soft:#1C2C52;
  --ink:#171E30;
  --paper:#FBFAF7;
  --paper-alt:#F3F1EA;
  --line:#E4E1D8;
  --accent-gold:#C79A4B;
  --success:#1E8E5A;
  --error:#D24545;
  --radius-s:10px;
  --radius-m:16px;
  --radius-l:26px;
  --shadow-soft:0 18px 40px -22px rgba(20,33,61,.35);
  --shadow-card:0 10px 30px -14px rgba(20,33,61,.25);
  --maxw:1180px;
  font-size:16px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

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

h1,h2,h3,h4{
  font-family:"Fraunces","Georgia",serif;
  font-weight:600;
  line-height:1.15;
  margin:0 0 .5em;
  color:var(--navy);
  letter-spacing:-.01em;
}

p{ margin:0 0 1em; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; font-size:1rem; }

.container{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:24px;
}

.eyebrow{
  display:inline-block;
  font-size:.8rem;
  font-weight:600;
  color:var(--primary);
  margin-bottom:10px;
}

.section-head{
  max-width:640px;
  margin-bottom:44px;
}
.section-head p{ color:#5B6172; font-size:1.05rem; }
.section-head.center{ margin-inline:auto; text-align:center; }

section{ padding:88px 0; }
@media (max-width:720px){ section{ padding:60px 0; } }

.bg-alt{ background:var(--paper-alt); }
.bg-navy{ background:var(--navy); color:#D7DCF2; }
.bg-navy h2, .bg-navy h3{ color:#fff; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 26px;
  border-radius:100px;
  font-weight:600;
  font-size:.98rem;
  border:1px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  white-space:nowrap;
}
.btn:active{ transform:scale(.97); }
.btn-primary{
  background:var(--primary);
  color:#fff;
  box-shadow:0 10px 24px -8px rgba(63,95,224,.55);
}
.btn-primary:hover{ background:var(--primary-dark); box-shadow:0 14px 28px -8px rgba(63,95,224,.65); }
.btn-outline{
  background:transparent;
  border-color:rgba(255,255,255,.4);
  color:#fff;
}
.btn-outline:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.btn-ghost{
  background:var(--primary-light);
  color:var(--primary-dark);
}
.btn-ghost:hover{ background:#E1E6FB; }
.btn-sm{ padding:10px 18px; font-size:.88rem; }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:3px solid var(--accent-gold);
  outline-offset:2px;
}

/* ---------- Top bar ---------- */
.topbar{
  background:var(--navy);
  color:#B9C2E0;
  font-size:.85rem;
}
.topbar .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block:9px;
  gap:16px;
  flex-wrap:wrap;
}
.topbar-left{ display:flex; gap:20px; flex-wrap:wrap; }
.topbar-left a{ display:inline-flex; align-items:center; gap:6px; color:#B9C2E0; }
.topbar-left a:hover{ color:#fff; }
.topbar-right{ display:flex; align-items:center; gap:12px; }
.topbar-right .social-label{ opacity:.7; margin-right:2px; }
.topbar-right a{
  width:26px; height:26px; border-radius:50%;
  background:rgba(255,255,255,.08);
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .15s ease;
}
.topbar-right a:hover{ background:rgba(255,255,255,.2); }
.topbar-right svg{ width:14px; height:14px; fill:#D7DCF2; }

/* ---------- Header ---------- */
header.site-header{
  position:sticky; top:0; z-index:200;
  background:rgba(251,250,247,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block:12px;
  gap:20px;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ height:52px; width:auto; border-radius:8px; }
.brand .brand-fallback{
  font-family:"Fraunces",serif; font-weight:600; font-size:1.3rem; color:var(--navy);
}
.brand .brand-fallback span{ color:var(--primary); }

nav.main-nav{ display:flex; gap:30px; }
nav.main-nav a{
  font-size:.95rem; font-weight:500; color:var(--ink);
  position:relative; padding-block:4px;
}
nav.main-nav a:hover{ color:var(--primary); }

.header-actions{ display:flex; align-items:center; gap:14px; }
.call-now-header{ display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--navy); }
.call-now-header svg{ width:18px; height:18px; fill:var(--primary); }

.menu-toggle{
  display:none;
  width:42px; height:42px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#fff;
  align-items:center; justify-content:center;
}
.menu-toggle span, .menu-toggle::before, .menu-toggle::after{ content:none; }
.menu-toggle svg{ width:20px; height:20px; }

.mobile-panel{
  display:none;
  position:fixed; inset:0 0 0 auto; width:min(320px,88vw);
  background:#fff; z-index:260;
  box-shadow:-16px 0 40px rgba(0,0,0,.18);
  transform:translateX(100%);
  transition:transform .28s ease;
  flex-direction:column;
  padding:22px;
  overflow-y:auto;
}
.mobile-panel.open{ transform:translateX(0); display:flex; }
.mobile-panel .mp-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:26px; }
.mobile-panel a.mp-link{
  display:block; padding:14px 4px; font-size:1.05rem; font-weight:500;
  border-bottom:1px solid var(--line); color:var(--navy);
}
.mobile-panel .btn{ margin-top:20px; justify-content:center; width:100%; }
.scrim{
  display:none; position:fixed; inset:0; background:rgba(20,33,61,.45); z-index:250;
}
.scrim.open{ display:block; }

@media (max-width:920px){
  nav.main-nav, .header-actions .call-now-header{ display:none; }
  .menu-toggle{ display:inline-flex; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  background:var(--navy);
  color:#E7EAF6;
  overflow:hidden;
  padding:74px 0 90px;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600"><rect width="600" height="600" fill="none"/></svg>');
}
.hero-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:.16;
}
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(20,33,61,.97) 30%, rgba(20,33,61,.82) 100%);
}
.hero .container{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:340px 1fr;
  gap:56px;
  align-items:center;
}
.founder-card{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-l);
  padding:22px;
  text-align:center;
  backdrop-filter:blur(6px);
}
.founder-card .photo-frame{
  width:100%; aspect-ratio:1/1.05;
  border-radius:var(--radius-m);
  overflow:hidden;
  background:linear-gradient(160deg,var(--primary),#7C93F0);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:16px;
}
.founder-card .photo-frame img{ width:100%; height:100%; object-fit:cover; }
.founder-card .initials-fallback{
  font-family:"Fraunces",serif; font-size:2.6rem; color:#fff; font-weight:600;
}
.founder-card h3{ color:#fff; font-size:1.2rem; margin-bottom:2px; }
.founder-card .role{ font-size:.88rem; color:#A9B4DA; margin-bottom:10px; }
.founder-card .tagline{ font-size:.82rem; color:#8D9AC7; border-top:1px solid rgba(255,255,255,.14); padding-top:10px; }

.hero-copy h1{ color:#fff; font-size:clamp(2.1rem,4vw,3.1rem); max-width:640px; }
.hero-copy .lede{ font-size:1.12rem; color:#C4CBE6; max-width:560px; margin-bottom:28px; }
.hero-cta-row{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:34px; }
.hero-license{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.82rem; color:#A9B4DA;
  border:1px solid rgba(255,255,255,.18);
  padding:8px 14px; border-radius:100px;
  margin-bottom:30px;
}
.hero-license svg{ width:14px; height:14px; fill:var(--accent-gold); }

.hero-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
  border-top:1px solid rgba(255,255,255,.14);
  padding-top:26px;
}
.hero-stats .stat b{ display:block; font-family:"Fraunces",serif; font-size:1.6rem; color:#fff; }
.hero-stats .stat span{ font-size:.82rem; color:#93A0C9; }

@media (max-width:920px){
  .hero .container{ grid-template-columns:1fr; text-align:center; }
  .founder-card{ max-width:280px; margin-inline:auto; }
  .hero-copy .lede{ margin-inline:auto; }
  .hero-cta-row{ justify-content:center; }
  .hero-stats{ grid-template-columns:repeat(2,1fr); }
}

/* ---------- About ---------- */
.about-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start;
}
.about-grid .about-copy p{ color:#464C5E; }
.about-highlights{ display:grid; gap:12px; margin-top:22px; }
.about-highlights li{
  display:flex; gap:12px; align-items:flex-start;
  font-size:.96rem; color:var(--navy); font-weight:500;
}
.about-highlights svg{ flex:none; width:20px; height:20px; fill:var(--primary); margin-top:2px; }

.mv-cards{ display:grid; gap:18px; }
.mv-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-m);
  padding:26px; box-shadow:var(--shadow-card);
}
.mv-card h4{ font-size:1.05rem; margin-bottom:8px; color:var(--primary-dark); }
.mv-card p{ color:#565C6E; margin:0; font-size:.95rem; }

.achv-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:22px; }
.achv-pill{
  background:var(--primary-light); color:var(--primary-dark);
  border-radius:100px; padding:9px 16px; font-size:.85rem; font-weight:600;
}

@media (max-width:860px){ .about-grid{ grid-template-columns:1fr; } }

/* ---------- Services ---------- */
.services-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.service-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-m);
  padding:28px; box-shadow:var(--shadow-card);
  display:flex; flex-direction:column; gap:12px;
  transition:transform .18s ease, box-shadow .18s ease;
}
.service-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-soft); }
.service-card .icon-badge{
  width:48px; height:48px; border-radius:14px;
  background:var(--primary-light); display:flex; align-items:center; justify-content:center;
}
.service-card .icon-badge svg{ width:24px; height:24px; fill:var(--primary); }
.service-card h4{ font-size:1.08rem; margin-bottom:2px; }
.service-card p{ font-size:.92rem; color:#565C6E; margin:0; }
.service-feature-panel{
  grid-column:1/-1;
  background:var(--navy); border-radius:var(--radius-l);
  padding:36px; display:grid; grid-template-columns:1fr 1.3fr; gap:30px; align-items:center;
  margin-top:6px;
}
.service-feature-panel img{ border-radius:var(--radius-m); width:100%; height:100%; object-fit:cover; }
.service-feature-panel .sf-copy{ color:#D7DCF2; }
.service-feature-panel h3{ color:#fff; }
.service-feature-panel ul{ display:grid; gap:10px; margin-top:14px; }
.service-feature-panel li{ display:flex; gap:10px; font-size:.93rem; }
.service-feature-panel svg{ flex:none; width:16px; height:16px; fill:var(--accent-gold); margin-top:3px; }

@media (max-width:960px){ .services-grid{ grid-template-columns:repeat(2,1fr); } .service-feature-panel{ grid-template-columns:1fr; } }
@media (max-width:640px){ .services-grid{ grid-template-columns:1fr; } }

/* ---------- Why us ---------- */
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.why-card{
  border:1px solid var(--line); border-radius:var(--radius-m); padding:26px;
  background:var(--paper);
}
.why-card .num{ font-family:"Fraunces",serif; font-size:1.7rem; color:var(--primary); margin-bottom:10px; display:block; }
.why-card h4{ font-size:1.02rem; margin-bottom:6px; }
.why-card p{ font-size:.9rem; color:#5B6172; margin:0; }
@media (max-width:860px){ .why-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .why-grid{ grid-template-columns:1fr; } }

/* ---------- Testimonials ---------- */
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.testi-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-m);
  padding:26px; box-shadow:var(--shadow-card);
}
.testi-card .stars{ color:var(--accent-gold); font-size:.95rem; margin-bottom:12px; letter-spacing:2px; }
.testi-card p.quote{ font-size:.96rem; color:#3B4256; margin-bottom:18px; }
.testi-person{ display:flex; align-items:center; gap:12px; }
.testi-avatar{
  width:40px; height:40px; border-radius:50%; background:var(--primary-light); color:var(--primary-dark);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-family:"Fraunces",serif;
}
.testi-person .name{ font-weight:600; font-size:.9rem; color:var(--navy); }
.testi-person .role{ font-size:.8rem; color:#767C8C; }
@media (max-width:860px){ .testi-grid{ grid-template-columns:1fr; } }

/* ---------- FAQ ---------- */
.faq-list{ max-width:800px; margin-inline:auto; display:grid; gap:12px; }
.faq-item{
  border:1px solid var(--line); border-radius:var(--radius-m); background:#fff; overflow:hidden;
}
.faq-q{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:20px 24px; background:none; border:none; text-align:left;
  font-weight:600; font-size:1rem; color:var(--navy);
}
.faq-q svg{ flex:none; width:18px; height:18px; fill:var(--primary); transition:transform .2s ease; }
.faq-item.open .faq-q svg{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.faq-a-inner{ padding:0 24px 20px; color:#565C6E; font-size:.95rem; }
.faq-item.open .faq-a{ max-height:400px; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:40px; }
.contact-list{ display:grid; gap:16px; margin-bottom:26px; }
.contact-list li{
  display:flex; gap:14px; align-items:flex-start;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-m); padding:16px 18px;
}
.contact-list .ci-icon{
  width:38px; height:38px; border-radius:10px; background:var(--primary-light);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.contact-list .ci-icon svg{ width:18px; height:18px; fill:var(--primary); }
.contact-list .ci-label{ font-size:.78rem; color:#8A90A0; text-transform:uppercase; letter-spacing:.04em; }
.contact-list .ci-value{ font-weight:600; color:var(--navy); font-size:.96rem; }
.contact-cta-row{ display:flex; gap:12px; flex-wrap:wrap; }
.map-embed{ border-radius:var(--radius-m); overflow:hidden; border:1px solid var(--line); margin-top:22px; }
.map-embed iframe{ width:100%; height:260px; border:0; display:block; }

.form-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-l);
  padding:34px; box-shadow:var(--shadow-card);
}
.form-card h3{ margin-bottom:6px; }
.form-card > p{ color:#5B6172; font-size:.94rem; margin-bottom:22px; }

@media (max-width:920px){ .contact-grid{ grid-template-columns:1fr; } }

/* ---------- Form fields (shared: inline + popup) ---------- */
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:.85rem; font-weight:600; color:var(--navy); margin-bottom:6px; }
.field .hint{ font-size:.78rem; color:var(--error); margin-top:5px; display:none; }
.field.invalid .hint{ display:block; }
.field.invalid input, .field.invalid select, .field.invalid textarea{ border-color:var(--error) !important; }
.field input, .field select, .field textarea{
  width:100%; padding:13px 15px; border:1.5px solid var(--line); border-radius:var(--radius-s);
  background:var(--paper); color:var(--ink); transition:border-color .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--primary); outline:none; }
.field textarea{ resize:vertical; min-height:90px; }
.phone-field{ display:flex; gap:8px; }
.phone-field .code-box{
  flex:none; width:88px; display:flex; align-items:center; justify-content:center; gap:5px;
  border:1.5px solid var(--line); border-radius:var(--radius-s); background:#fff; font-weight:600; font-size:.9rem;
}
.phone-field input{ flex:1; }
.form-status{ font-size:.9rem; margin-top:12px; padding:10px 14px; border-radius:var(--radius-s); display:none; }
.form-status.show{ display:block; }
.form-status.ok{ background:#E7F6EE; color:var(--success); display:block; }
.form-status.err{ background:#FBEAEA; color:var(--error); display:block; }
.form-reassure{ font-size:.78rem; color:#8A90A0; text-align:center; margin-top:12px; }
.form-submit{ width:100%; justify-content:center; }

/* ---------- Popup ---------- */
.popup-overlay{
  position:fixed; inset:0; z-index:400;
  background:rgba(11,17,32,.6); backdrop-filter:blur(6px);
  display:none; align-items:flex-start; justify-content:center;
  padding:5vh 16px; overflow-y:auto;
}
.popup-overlay.open{ display:flex; }
.popup-card{
  width:100%; max-width:430px; background:#fff; border-radius:var(--radius-l);
  position:relative; overflow:hidden; margin:auto;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.4);
}
.popup-close{
  position:absolute; top:14px; right:14px; z-index:2;
  width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.9);
  border:none; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}
.popup-close svg{ width:16px; height:16px; fill:var(--navy); }
.popup-timer{
  background:linear-gradient(120deg,var(--navy),var(--navy-soft));
  padding:22px 28px 26px; text-align:center; color:#fff;
  transition:background .25s ease;
}
.popup-timer.urgent{ background:linear-gradient(120deg,#8A1F1F,#B23A3A); animation:pulse-timer 1s ease-in-out infinite; }
@keyframes pulse-timer{ 0%,100%{ filter:brightness(1);} 50%{ filter:brightness(1.15);} }
.popup-timer .tlabel{ display:inline-flex; align-items:center; gap:6px; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:#A9B4DA; margin-bottom:6px; }
.popup-timer.urgent .tlabel{ color:#F7D6D6; }
.popup-timer .tlabel svg{ width:12px; height:12px; fill:var(--accent-gold); }
.popup-timer .tvalue{ font-family:"Fraunces",serif; font-size:2.2rem; font-weight:600; }
.popup-body{ padding:8px 28px 30px; }
.popup-icon{
  width:56px; height:56px; border-radius:16px; margin:-30px auto 16px;
  background:linear-gradient(135deg,var(--accent-gold),#E0B667);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 20px -6px rgba(199,154,75,.6);
  position:relative; z-index:2;
}
.popup-icon svg{ width:26px; height:26px; fill:#fff; }
.popup-body h3{ text-align:center; font-size:1.35rem; margin-bottom:6px; }
.popup-body h3 .accent{ color:var(--accent-gold); }
.popup-body .sub{ text-align:center; color:#5B6172; font-size:.92rem; margin-bottom:20px; }

/* ---------- Footer ---------- */
footer.site-footer{ background:var(--navy); color:#A9B2CF; padding-top:70px; }
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:36px;
  padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-brand .brand{ margin-bottom:14px; }
.footer-brand img{ height:44px; border-radius:8px; }
.footer-brand p{ font-size:.9rem; line-height:1.7; }
footer h5{ color:#fff; font-size:.95rem; margin-bottom:16px; font-family:"Inter",sans-serif; font-weight:600; }
.footer-links li{ margin-bottom:10px; }
.footer-links a{ font-size:.9rem; }
.footer-links a:hover{ color:#fff; }
.footer-contact li{ display:flex; gap:10px; margin-bottom:12px; font-size:.88rem; }
.footer-contact svg{ width:16px; height:16px; fill:var(--accent-gold); flex:none; margin-top:2px; }
.footer-social{ display:flex; gap:10px; margin-top:16px; }
.footer-social a{
  width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
}
.footer-social svg{ width:15px; height:15px; fill:#D7DCF2; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  padding:22px 0; font-size:.82rem;
}
.footer-bottom a{ margin-left:16px; }
.footer-disclaimer{
  font-size:.76rem; color:#7A83A0; border-top:1px solid rgba(255,255,255,.08);
  padding:18px 0; line-height:1.7;
}
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } .footer-bottom{ flex-direction:column; align-items:flex-start; } .footer-bottom a{ margin-left:0; margin-right:16px; } }

/* ---------- Floating elements (fixed spec, do not alter) ---------- */
.floating-badge {
  position: fixed; left: 18px; bottom: 18px; z-index: 300; width: 120px; height: 40px;
  border-radius: 10px; overflow: hidden; box-shadow: 0 8px 22px rgba(0,0,0,.25); background: #fff;
  display: flex; align-items: center; justify-content: center;
}
.floating-badge img { width: 150px; object-fit: contain; }

.floating-whatsapp {
  position: fixed; right: 18px; bottom: 18px; z-index: 300; width: 58px; height: 58px; border-radius: 50%;
  background: #25D366; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(37,211,102,.45); transition: transform .15s ease;
}
.floating-whatsapp:hover { transform: scale(1.06); }
.floating-whatsapp svg { width: 30px; height: 30px; fill: #fff; }

@media (max-width: 480px) {
  .floating-badge { width: 120px; height: 46px; left: 12px; bottom: 12px; }
  .floating-whatsapp { width: 50px; height: 50px; right: 12px; bottom: 12px; }
  .floating-whatsapp svg { width: 26px; height: 26px; }
}

/* ---------- Utility / reveal ---------- */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease; }
.reveal.in{ opacity:1; transform:none; }