/*
Theme Name: Bizstartz 2026
Theme URI: https://bizstartz.com/
Author: Bizstartz
Description: Front-end refresh for bizstartz.com. Ports the 2026 static design onto WordPress. Content, URLs, posts and plugins are untouched — this theme only changes presentation.
Version: 2.6.1
Requires at least: 5.9
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bizstartz-2026
Tags: business, custom-menu, featured-images, translation-ready
*/

/* =========================================================
   BIZSTARTZ — Premium redesign stylesheet
   Palette: navy #16235a · ink #0e1633 · sky #3aade0 · blue #2563eb
   Type: Sora (display) + Plus Jakarta Sans (body)
   ========================================================= */

:root{
  --navy:#16235a;
  --ink:#0d1530;
  --navy-2:#1f3b8f;
  --sky:#3aade0;
  --sky-light:#7cc9ee;
  --blue:#2563eb;
  --bg:#f6f8fc;
  --bg-2:#eef2f9;
  --surface:#ffffff;
  --text:#1a2238;
  --muted:#5a6582;
  --line:#e6ebf4;
  --radius:26px;
  --radius-sm:16px;
  --shadow-soft:0 2px 4px rgba(16,30,70,.04), 0 18px 40px -16px rgba(16,30,70,.16);
  --shadow-lift:0 4px 8px rgba(16,30,70,.05), 0 40px 70px -24px rgba(16,30,70,.28);
  --ease:cubic-bezier(.32,.72,0,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --container:1180px;
  --maxgut:clamp(20px,5vw,48px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  font-size:16.5px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:"Sora",system-ui,sans-serif;line-height:1.08;letter-spacing:-.02em;color:var(--ink);font-weight:700}

.container{max-width:var(--container);margin:0 auto;padding:0 var(--maxgut)}

/* ---------- Eyebrow ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.18em;
  color:var(--navy-2);
  background:rgba(37,99,235,.07);
  border:1px solid rgba(37,99,235,.14);
  padding:7px 14px;border-radius:100px;margin-bottom:22px;
}
.eyebrow__dot{width:6px;height:6px;border-radius:50%;background:var(--sky);box-shadow:0 0 0 4px rgba(58,173,224,.18)}
.eyebrow--light{color:#cfe4ff;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:"Plus Jakarta Sans",sans-serif;font-weight:600;font-size:15px;
  padding:13px 22px;border-radius:100px;cursor:pointer;border:1px solid transparent;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),background .35s var(--ease),color .35s var(--ease);
  white-space:nowrap;
}
.btn:active{transform:scale(.97)}
.btn--lg{padding:16px 28px;font-size:16px}
.btn--block{width:100%}
.btn--primary{background:linear-gradient(180deg,#2a64e6,#1f47b8);color:#fff;box-shadow:0 8px 22px -8px rgba(37,99,235,.6)}
.btn--primary:hover{box-shadow:0 14px 30px -8px rgba(37,99,235,.7);transform:translateY(-2px)}
.btn--ghost{color:var(--ink);background:transparent}
.btn--ghost:hover{background:rgba(13,21,48,.05)}
.btn--soft{background:#fff;color:var(--ink);border-color:var(--line);box-shadow:var(--shadow-soft)}
.btn--soft:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.btn--white{background:#fff;color:var(--ink)}
.btn--white:hover{transform:translateY(-2px);box-shadow:0 20px 40px -16px rgba(0,0,0,.5)}
.btn--outline-light{background:transparent;border-color:rgba(255,255,255,.28);color:#fff}
.btn--outline-light:hover{background:rgba(255,255,255,.1)}
.btn__icon{
  width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.18);transition:transform .5s var(--ease);
}
.btn__icon svg{width:14px;height:14px}
.btn--soft .btn__icon,.btn--white .btn__icon--dark{background:rgba(13,21,48,.08)}
.btn:hover .btn__icon{transform:translate(3px,-1px) scale(1.05)}

/* ---------- Stars ---------- */
.stars{display:inline-flex;gap:3px}
.stars svg{width:19px;height:19px;fill:#f5b50a}
.stars--sm svg{width:15px;height:15px}

/* =========================================================
   NAV
   ========================================================= */
.nav-wrap{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:center;padding:18px var(--maxgut)}
.nav{
  width:100%;max-width:var(--container);
  display:flex;align-items:center;gap:18px;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 10px 30px -14px rgba(16,30,70,.25);
  border-radius:100px;padding:10px 12px 10px 22px;
  transition:box-shadow .5s var(--ease),background .5s var(--ease);
}
.nav.is-scrolled{background:rgba(255,255,255,.9);box-shadow:0 10px 34px -14px rgba(16,30,70,.32)}
.nav__brand{display:flex;align-items:center}
.nav__logo{height:30px;width:auto}
.nav__links{display:flex;gap:6px;list-style:none;margin:0 auto}
.nav__links a{
  font-size:14.5px;font-weight:500;color:var(--muted);padding:9px 14px;border-radius:100px;
  transition:color .3s var(--ease),background .3s var(--ease);
}
.nav__links a:hover{color:var(--ink);background:rgba(13,21,48,.05)}
.nav__cta{display:flex;align-items:center;gap:8px}
.nav__burger{display:none;width:44px;height:44px;border:1px solid var(--line);background:#fff;border-radius:50%;cursor:pointer;position:relative}
.nav__burger span{position:absolute;left:13px;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .45s var(--ease),opacity .3s var(--ease)}
.nav__burger span:nth-child(1){top:18px}
.nav__burger span:nth-child(2){top:24px}
.nav__burger.is-open span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.nav__burger.is-open span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

/* mobile menu */
.mobile-menu{
  position:fixed;inset:0;z-index:90;
  background:rgba(246,248,252,.92);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s;
}
.mobile-menu.is-open{opacity:1;visibility:visible}
.mobile-menu ul{list-style:none;text-align:center;display:flex;flex-direction:column;gap:6px;width:min(320px,82vw)}
.mobile-menu li{opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.mobile-menu.is-open li{opacity:1;transform:none}
.mobile-menu.is-open li:nth-child(1){transition-delay:.08s}
.mobile-menu.is-open li:nth-child(2){transition-delay:.13s}
.mobile-menu.is-open li:nth-child(3){transition-delay:.18s}
.mobile-menu.is-open li:nth-child(4){transition-delay:.23s}
.mobile-menu.is-open li:nth-child(5){transition-delay:.28s}
.mobile-menu.is-open li:nth-child(6){transition-delay:.34s}
.mobile-menu a:not(.btn){display:block;font-family:"Sora";font-size:24px;font-weight:600;color:var(--ink);padding:10px}
.mobile-menu .btn{margin-top:10px}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;padding:170px 0 80px;overflow:hidden}
.hero__glow{
  position:absolute;top:-280px;right:-120px;width:760px;height:760px;border-radius:50%;
  background:radial-gradient(circle at center,rgba(58,173,224,.34),rgba(37,99,235,.16) 40%,transparent 66%);
  filter:blur(8px);pointer-events:none;z-index:0;
}
.hero::before{
  content:"";position:absolute;left:-200px;bottom:-200px;width:620px;height:620px;border-radius:50%;
  background:radial-gradient(circle,rgba(124,92,255,.12),transparent 64%);pointer-events:none;
}
.hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero__title{font-size:clamp(2.6rem,5.4vw,4.15rem);font-weight:800;margin-bottom:22px}
.grad{background:linear-gradient(105deg,var(--blue),var(--sky));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__lead{font-size:clamp(1.05rem,1.4vw,1.22rem);color:var(--muted);max-width:560px;margin-bottom:32px}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:34px}
.hero__trust{display:flex;align-items:center;gap:14px}
.hero__trust p{font-size:14px;color:var(--muted)}
.hero__trust strong{color:var(--ink)}

/* hero visual */
.hero__visual{position:relative}
.bezel{
  background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.4));
  border:1px solid rgba(255,255,255,.7);
  padding:10px;border-radius:32px;
  box-shadow:var(--shadow-lift);
  position:relative;
}
.dash{
  background:linear-gradient(180deg,#ffffff,#fbfcff);
  border:1px solid var(--line);border-radius:24px;padding:22px;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.8);
}
.dash__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.dash__id{display:flex;align-items:center;gap:12px}
.dash__ico{width:42px;height:42px;border-radius:13px;background:linear-gradient(150deg,var(--navy-2),var(--sky));color:#fff;font-family:"Sora";font-weight:800;display:flex;align-items:center;justify-content:center;font-size:20px}
.dash__name{font-family:"Sora";font-weight:700;font-size:16px;color:var(--ink)}
.dash__sub{font-size:12.5px;color:var(--muted)}
.pill{font-size:12px;font-weight:600;padding:5px 12px;border-radius:100px}
.pill--ok{background:rgba(22,163,74,.12);color:#15803d}
.dash__steps{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.step{display:flex;align-items:center;gap:11px;font-size:14px;color:var(--text);background:#f7f9fd;border:1px solid var(--line);border-radius:13px;padding:11px 13px}
.step__tick{width:20px;height:20px;border-radius:50%;background:#16a34a;color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.step--live{color:var(--muted)}
.step__dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--sky);position:relative;flex-shrink:0}
.step__dot::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--sky);animation:pulse 1.6s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
.dash__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mini{background:#f7f9fd;border:1px solid var(--line);border-radius:13px;padding:13px}
.mini__label{font-size:12px;color:var(--muted)}
.mini__val{font-family:"Sora";font-weight:600;font-size:14px;color:var(--ink);margin-top:2px}

.float-card{
  position:absolute;display:flex;align-items:center;gap:11px;
  background:rgba(255,255,255,.85);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.8);border-radius:16px;padding:11px 15px;
  box-shadow:var(--shadow-lift);
}
.float-card__ico{font-size:22px}
.fc__t{font-family:"Sora";font-weight:600;font-size:13.5px;color:var(--ink);line-height:1.2}
.fc__s{font-size:12px;color:var(--muted)}
.float-card--a{top:14px;left:-34px;animation:floaty 5s ease-in-out infinite}
.float-card--b{bottom:24px;right:-26px;animation:floaty 5.6s ease-in-out infinite .6s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* =========================================================
   STRIP
   ========================================================= */
.strip{padding:30px 0 10px}
.strip__label{text-align:center;font-size:13px;color:var(--muted);font-weight:500;margin-bottom:20px}
.strip__flags{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px}
.strip__flags span{font-size:15px;font-weight:600;color:#7a849c;opacity:.9}

/* =========================================================
   SECTIONS
   ========================================================= */
.section{padding:clamp(70px,9vw,118px) 0}
.section--alt{background:linear-gradient(180deg,var(--bg-2),var(--bg))}
.section__head{max-width:680px;margin:0 auto 56px;text-align:center}
.section__head--left{text-align:left;margin:0}
.section__title{font-size:clamp(1.9rem,3.6vw,2.85rem);font-weight:700;margin-bottom:18px}
.section__lead{font-size:clamp(1rem,1.3vw,1.15rem);color:var(--muted)}
.section__lead a{color:var(--blue);font-weight:600}

/* ---------- Services cards ---------- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;
  box-shadow:var(--shadow-soft);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .4s var(--ease);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);border-color:rgba(37,99,235,.25)}
.card__ico{
  width:50px;height:50px;border-radius:15px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#eef3ff,#e3ecff);color:var(--blue);margin-bottom:18px;
  border:1px solid rgba(37,99,235,.12);
}
.card__ico svg{width:24px;height:24px}
.card h3{font-size:17.5px;font-weight:600;margin-bottom:8px;letter-spacing:-.01em}
.card p{font-size:14.5px;color:var(--muted);line-height:1.55}

/* ---------- Stats ---------- */
.stats{padding:18px 0 40px}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat{background:linear-gradient(180deg,var(--navy),var(--ink));color:#fff;border-radius:var(--radius);padding:30px 26px;text-align:center;box-shadow:var(--shadow-lift)}
.stat__num{font-family:"Sora";font-weight:800;font-size:clamp(1.9rem,3vw,2.5rem);background:linear-gradient(120deg,#fff,#9fd5f3);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat__lbl{font-size:13.5px;color:#aab6d8;margin-top:6px}

/* ---------- Process ---------- */
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pstep{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:30px 24px;box-shadow:var(--shadow-soft);overflow:hidden}
.pstep::before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,var(--blue),var(--sky))}
.pstep__n{font-family:"Sora";font-weight:800;font-size:30px;background:linear-gradient(120deg,var(--blue),var(--sky));-webkit-background-clip:text;background-clip:text;color:transparent;display:block;margin-bottom:14px}
.pstep h3{font-size:17px;font-weight:600;margin-bottom:8px}
.pstep p{font-size:14px;color:var(--muted)}

/* ---------- Split (why) ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.split__copy .section__title{margin-bottom:16px}
.checks{list-style:none;margin:26px 0 32px;display:flex;flex-direction:column;gap:16px}
.checks li{display:flex;gap:13px;align-items:flex-start}
.checks div{font-size:15px;color:var(--muted)}
.checks strong{color:var(--ink);font-weight:600}
.check{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:linear-gradient(150deg,var(--blue),var(--sky));color:#fff;font-size:13px;display:flex;align-items:center;justify-content:center;margin-top:1px}
.bezel--tall{padding:12px}
.quote-card{background:linear-gradient(165deg,var(--navy),var(--ink));border-radius:24px;padding:34px;color:#fff}
.quote-card__text{font-family:"Sora";font-weight:500;font-size:20px;line-height:1.42;letter-spacing:-.01em;margin:18px 0 26px}
.quote-card__by{display:flex;align-items:center;gap:13px}
.avatar{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:"Sora";font-weight:700;font-size:15px;color:#fff;background:linear-gradient(150deg,var(--a),var(--b));flex-shrink:0}
.qc__name{font-family:"Sora";font-weight:600;font-size:15px}
.qc__role{font-size:13px;color:#9fb0d8}

/* ---------- Pricing ---------- */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.plan{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:32px 28px;box-shadow:var(--shadow-soft);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.plan:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift)}
.plan--featured{background:linear-gradient(180deg,var(--navy),var(--ink));color:#fff;border:none;box-shadow:var(--shadow-lift);transform:scale(1.03)}
.plan--featured:hover{transform:scale(1.03) translateY(-5px)}
.plan__badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:linear-gradient(90deg,var(--blue),var(--sky));color:#fff;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:6px 16px;border-radius:100px;box-shadow:0 8px 18px -6px rgba(37,99,235,.6)}
.plan__name{font-size:20px;font-weight:700;margin-bottom:6px}
.plan__desc{font-size:14px;color:var(--muted);min-height:42px;margin-bottom:14px}
.plan--featured .plan__desc{color:#aab6d8}
.plan__price{font-family:"Sora";font-weight:800;font-size:48px;line-height:1;margin-bottom:22px;display:flex;align-items:baseline;gap:2px}
.plan__cur{font-size:24px;font-weight:600;margin-right:1px}
.plan__per{font-family:"Plus Jakarta Sans";font-size:14px;font-weight:500;color:var(--muted);margin-left:8px}
.plan--featured .plan__per{color:#9fb0d8}
.plan__list{list-style:none;margin-top:24px;display:flex;flex-direction:column;gap:12px}
.plan__list li{position:relative;padding-left:28px;font-size:14.5px;color:var(--text)}
.plan--featured .plan__list li{color:#d7e0f5}
.plan__list li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:rgba(37,99,235,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='3'%3E%3Cpath d='M5 12l5 5 9-10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}
.plan--featured .plan__list li::before{background:rgba(58,173,224,.22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237cc9ee' stroke-width='3'%3E%3Cpath d='M5 12l5 5 9-10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}
.pricing__note{text-align:center;margin-top:30px;font-size:14.5px;color:var(--muted)}
.pricing__note a{color:var(--blue);font-weight:600}

/* ---------- Reviews ---------- */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.review{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;box-shadow:var(--shadow-soft);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.review:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift)}
.review__text{font-size:15.5px;line-height:1.6;color:var(--text);margin:16px 0 22px}
.review__by{display:flex;align-items:center;gap:12px}
.review .qc__name{color:var(--ink)}
.review .qc__role{color:var(--muted)}

/* ---------- FAQ ---------- */
.faq-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
.faq{display:flex;flex-direction:column;gap:12px}
.faq__item{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:4px 22px;box-shadow:var(--shadow-soft);transition:border-color .4s var(--ease)}
.faq__item[open]{border-color:rgba(37,99,235,.3)}
.faq__item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;list-style:none;padding:18px 0;font-family:"Sora";font-weight:600;font-size:16px;color:var(--ink)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__plus{position:relative;width:18px;height:18px;flex-shrink:0}
.faq__plus::before,.faq__plus::after{content:"";position:absolute;background:var(--blue);border-radius:2px;transition:transform .4s var(--ease)}
.faq__plus::before{top:8px;left:0;width:18px;height:2px}
.faq__plus::after{top:0;left:8px;width:2px;height:18px}
.faq__item[open] .faq__plus::after{transform:rotate(90deg);opacity:0}
.faq__item p{font-size:14.5px;color:var(--muted);padding:0 0 20px;max-width:60ch}

/* =========================================================
   CTA
   ========================================================= */
.cta{padding:30px 0 100px}
.cta__card{position:relative;overflow:hidden;background:linear-gradient(150deg,var(--navy),var(--ink));border-radius:40px;padding:clamp(46px,7vw,84px);text-align:center;box-shadow:var(--shadow-lift)}
.cta__glow{position:absolute;top:-160px;right:-80px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(58,173,224,.4),transparent 62%);pointer-events:none}
.cta__card::after{content:"";position:absolute;bottom:-180px;left:-100px;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(124,92,255,.28),transparent 64%);pointer-events:none}
.cta__title{position:relative;font-size:clamp(2rem,4vw,3.1rem);font-weight:800;color:#fff;margin-bottom:18px}
.cta__lead{position:relative;font-size:clamp(1rem,1.4vw,1.18rem);color:#bcc8e8;max-width:560px;margin:0 auto 34px}
.cta__actions{position:relative;display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{background:var(--ink);color:#aeb9d6;padding:70px 0 30px}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:46px;border-bottom:1px solid rgba(255,255,255,.08)}
.footer__word{font-family:"Sora";font-weight:800;font-size:30px;color:#fff;letter-spacing:-.02em;margin-bottom:14px}
.footer__word--accent{color:var(--sky)}
.footer__tag{font-size:14px;max-width:330px;margin-bottom:18px;line-height:1.6}
.footer__col h4{font-family:"Sora";font-size:14px;color:#fff;font-weight:600;margin-bottom:16px;letter-spacing:.02em}
.footer__col ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.footer__col a{font-size:14px;color:#aeb9d6;transition:color .3s var(--ease)}
.footer__col a:hover{color:#fff}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;padding-top:24px;font-size:13px;color:#7c87a8}
.footer__legal a:hover{color:#fff}

/* =========================================================
   REVEAL ANIMATION
   ========================================================= */
.reveal{opacity:0;transform:translateY(30px);filter:blur(6px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out),filter .8s var(--ease-out)}
.reveal.is-in{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;filter:none;transition:none}.float-card{animation:none}.step__dot::after{animation:none}}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .steps-grid{grid-template-columns:repeat(2,1fr)}
  .stats__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .nav__links{display:none}
  .nav__cta{display:none}
  .nav__burger{display:block}
  .hero__grid{grid-template-columns:1fr;gap:60px}
  .hero{padding:140px 0 60px}
  .split{grid-template-columns:1fr;gap:42px}
  .faq-wrap{grid-template-columns:1fr;gap:34px}
  .reviews{grid-template-columns:1fr}
  .pricing{grid-template-columns:1fr;max-width:440px;margin:0 auto}
  .plan--featured{transform:none}
  .plan--featured:hover{transform:translateY(-5px)}
  .float-card--a{left:0}
  .float-card--b{right:0}
}
@media (max-width:560px){
  body{font-size:15.5px}
  .cards{grid-template-columns:1fr}
  .steps-grid{grid-template-columns:1fr}
  .stats__grid{grid-template-columns:1fr 1fr}
  .footer__grid{grid-template-columns:1fr 1fr;gap:30px}
  .footer__brand{grid-column:1/-1}
  .nav{padding:8px 8px 8px 16px}
  .hero__actions .btn{width:100%}
  .float-card{display:none}
}


/* ---------------------------------------------------------------------
   Level-2 dropdown menus.
   header.php calls wp_nav_menu() with depth=2, but v1.0.0 shipped no
   sub-menu styling, so child items rendered as a bare bulleted list.
   Tokens below are the theme's own (--surface/--line/--radius-sm/--ease).
   --------------------------------------------------------------------- */
.nav__links li { position: relative; }
.nav__links .sub-menu {
  position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 236px; margin: 0; padding: 8px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lift);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  z-index: 120;
}
/* invisible bridge so the pointer can travel from parent into the panel */
.nav__links .sub-menu::before {
  content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px;
}
.nav__links li:hover > .sub-menu,
.nav__links li:focus-within > .sub-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav__links .sub-menu li { width: 100%; }
.nav__links .sub-menu a {
  display: block; white-space: nowrap;
  padding: 10px 14px; border-radius: 10px;
  font-size: 15px; color: var(--muted);
}
.nav__links .sub-menu a:hover { color: var(--ink); background: rgba(13,21,48,.05); }

/* caret on parent items, flips when open */
.nav__links .menu-item-has-children > a::after {
  content: ""; display: inline-block; margin-left: 7px;
  width: 6px; height: 6px;
  border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .28s var(--ease);
}
.nav__links .menu-item-has-children:hover > a::after { transform: translateY(1px) rotate(225deg); }

/* mobile drawer: children shown as an indented list, no hover needed */
.mobile-menu .sub-menu {
  list-style: none; margin: 4px 0 10px; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.mobile-menu .sub-menu a { font-size: 16px; color: var(--muted); }

/* ---------------------------------------------------------------------
   Level-3 mega menu.
   header.php now renders depth=3. A "#!" placeholder that has children is
   output as .nav__heading (a label, not a link) by the filter in functions.php.
   The panel switches to columns only when a third level actually exists, via
   :has() — so a plain two-level menu still gets the simple dropdown above.
   --------------------------------------------------------------------- */

/* top-level label (e.g. "Service") — looks like a nav link, isn't clickable */
.nav__links > li > .nav__heading {
  display: inline-flex; align-items: center; cursor: default;
  padding: 9px 14px; border-radius: 999px;
  font-size: 15px; color: var(--muted);
  transition: color .28s var(--ease), background .28s var(--ease);
}
.nav__links > li:hover > .nav__heading { color: var(--ink); background: rgba(13,21,48,.05); }
.nav__links > li > .nav__heading::after {
  content: ""; display: inline-block; margin-left: 7px;
  width: 6px; height: 6px;
  border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .28s var(--ease);
}
.nav__links > li:hover > .nav__heading::after { transform: translateY(1px) rotate(225deg); }

/* panel becomes multi-column only when a third level is present */
.nav__links > li > .sub-menu:has(> li > .sub-menu) {
  display: flex; gap: 8px;
  padding: 18px;
  min-width: min(720px, 88vw);
  max-width: min(900px, 92vw);
}
.nav__links > li > .sub-menu:has(> li > .sub-menu) > li {
  flex: 1 1 0; min-width: 176px;
}

/* column heading inside the panel */
.nav__links .sub-menu .nav__heading {
  display: block; cursor: default;
  padding: 4px 12px 8px; margin-bottom: 6px;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); opacity: .78;
  border-bottom: 1px solid var(--line);
}

/* third-level list sits inline inside the panel, not as its own flyout */
.nav__links .sub-menu .sub-menu {
  position: static; transform: none;
  opacity: 1; visibility: visible; pointer-events: auto;
  display: block;
  min-width: 0; margin: 0; padding: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
}
.nav__links .sub-menu .sub-menu::before { display: none; }
.nav__links .sub-menu .sub-menu a { font-size: 14.5px; }

/* mobile drawer: headings as small labels, children indented under them */
.mobile-menu .nav__heading {
  display: block; margin-top: 12px;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); opacity: .7;
}
.mobile-menu .sub-menu .sub-menu { padding-left: 12px; }

/* ---------------------------------------------------------------------
   Comments.
   The theme ships no comments.php, so WordPress falls back to its default
   template. These rules style that default markup — nothing here depends on
   a custom walker, so it keeps working if the fallback template changes.
   --------------------------------------------------------------------- */
.section--comments { padding-top: 0; }
.comments-wrap { max-width: 760px; margin: 0 auto; }

#comments { margin: 0; }
.comments-title,
#reply-title {
  font-family: inherit; font-weight: 700;
  font-size: clamp(20px, 2.4vw, 26px);
  color: var(--ink); margin: 0 0 18px;
}
#reply-title small { display: block; margin-top: 6px; font-size: 14px; font-weight: 500; }
#reply-title small a { color: var(--blue); text-decoration: none; }

/* existing comments */
.comment-list { list-style: none; margin: 0 0 34px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.comment-list .children { list-style: none; margin: 14px 0 0; padding: 0 0 0 clamp(14px, 3vw, 28px); display: flex; flex-direction: column; gap: 14px; }
.comment-list .comment-body {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 18px 20px; box-shadow: var(--shadow-soft);
}
.comment-author { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink); }
.comment-author img { border-radius: 50%; }
.comment-author .says { display: none; }
.comment-metadata { margin-top: 4px; font-size: 13px; color: var(--muted); }
.comment-metadata a { color: var(--muted); text-decoration: none; }
.comment-content { margin-top: 10px; color: var(--text); }
.comment-content p:last-child { margin-bottom: 0; }
.comment .reply { margin-top: 10px; }
.comment .reply a { font-size: 14px; font-weight: 600; color: var(--blue); text-decoration: none; }
.comment-awaiting-moderation { font-size: 13px; color: var(--muted); }

/* the form */
.comment-respond {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(20px, 3vw, 32px);
  box-shadow: var(--shadow-soft);
}
.comment-form { display: flex; flex-direction: column; gap: 16px; margin-top: 4px; }
.comment-form p { margin: 0; display: flex; flex-direction: column; gap: 7px; }
.comment-form label { font-size: 14px; font-weight: 600; color: var(--ink); }
.comment-notes,
.logged-in-as { margin: 0 0 6px; font-size: 14px; color: var(--muted); }
.comment-notes a,
.logged-in-as a { color: var(--blue); text-decoration: none; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px;
  font: inherit; font-size: 15px; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  outline: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.comment-form textarea { min-height: 150px; resize: vertical; }
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
  border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.14);
}
.comment-form .comment-form-cookies-consent { flex-direction: row; align-items: center; gap: 9px; }
.comment-form .comment-form-cookies-consent label { font-weight: 400; font-size: 14px; color: var(--muted); }
.comment-form .comment-form-cookies-consent input { width: auto; }
.comment-form .form-submit { margin: 0; }
.comment-form input[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center;
  align-self: flex-start;
  padding: 13px 28px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--blue); color: #fff;
  font: inherit; font-size: 15px; font-weight: 600;
  transition: background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.comment-form input[type="submit"]:hover {
  background: var(--navy-2); transform: translateY(-1px); box-shadow: var(--shadow-soft);
}
.comment-reply-title #cancel-comment-reply-link { margin-left: 8px; font-size: 14px; color: var(--muted); }
.no-comments { color: var(--muted); }

/* ---------------------------------------------------------------------
   Built-in contact form (parts/contact-form.php).
   --------------------------------------------------------------------- */
.bzs-form { display: flex; flex-direction: column; gap: 16px; }
.bzs-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .bzs-form__row { grid-template-columns: 1fr; } }

.bzs-field { margin: 0; display: flex; flex-direction: column; gap: 7px; }
.bzs-field label { font-size: 14px; font-weight: 600; color: var(--ink); }
.bzs-field .req { color: var(--blue); }
.bzs-field input,
.bzs-field select,
.bzs-field textarea {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px;
  font: inherit; font-size: 15px; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  outline: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.bzs-field textarea { min-height: 150px; resize: vertical; }
.bzs-field input:focus,
.bzs-field select:focus,
.bzs-field textarea:focus {
  border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.14);
}

/* honeypot — off-screen, never display:none (bots skip hidden fields) */
.bzs-form__hp {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

.bzs-form__submit {
  margin: 4px 0 0; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.bzs-form__submit .btn { border: 0; cursor: pointer; font: inherit; }
.bzs-form__note { font-size: 13.5px; color: var(--muted); }

/* result banners */
.formnote {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 16px; margin-bottom: 18px;
  border-radius: 12px; border: 1px solid var(--line);
  background: var(--bg); font-size: 14.5px;
}
.formnote strong { color: var(--ink); }
.formnote span { color: var(--muted); }
.formnote--ok { border-color: rgba(37,99,235,.35); background: rgba(37,99,235,.06); }
.formnote--err { border-color: rgba(16,30,70,.22); }

/* ---------------------------------------------------------------------
   Mega-menu column fix.
   The base .sub-menu rule sets white-space:nowrap, which is right for a simple
   one-column dropdown but made long third-level labels overflow their column
   and overlap the next one. Inside a multi-column panel they wrap instead, the
   panel is wider, and a hairline separates the columns.
   --------------------------------------------------------------------- */
.nav__links > li > .sub-menu:has(> li > .sub-menu) {
  min-width: min(860px, 92vw);
  max-width: min(960px, 94vw);
  gap: 18px;
  padding: 20px;
  align-items: stretch;
}
.nav__links > li > .sub-menu:has(> li > .sub-menu) > li {
  flex: 1 1 0;
  min-width: 0;               /* lets the column shrink so text can wrap */
}
.nav__links > li > .sub-menu:has(> li > .sub-menu) > li + li {
  border-left: 1px solid var(--line);
  padding-left: 18px;
}
.nav__links .sub-menu .sub-menu a {
  white-space: normal;        /* the actual overlap fix */
  line-height: 1.35;
  padding: 9px 12px;
}
.nav__links .sub-menu .nav__heading { white-space: normal; }

/* ---------------------------------------------------------------------
   Hover-shift fix.
   The open-state rule used ".nav__links li:hover > .sub-menu", where `li`
   matched ANY depth — so hovering a mega-menu column also applied the panel's
   translateX(-50%) to that column's own list, sliding its links left by half
   their width. The reset below outranks it; the centred transform is now
   scoped to direct children of .nav__links only.
   --------------------------------------------------------------------- */
.nav__links .sub-menu .sub-menu,
.nav__links .sub-menu li:hover > .sub-menu,
.nav__links .sub-menu li:focus-within > .sub-menu {
  position: static;
  transform: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: none;
}
.nav__links > li:hover > .sub-menu,
.nav__links > li:focus-within > .sub-menu {
  transform: translateX(-50%) translateY(0);
}
/* hover affects colour only — never geometry */
.nav__links .sub-menu a { transition: color .2s var(--ease), background .2s var(--ease); }

/* ---------------------------------------------------------------------
   Click-to-open menu.
   Hover no longer opens the panel — it fired whenever the pointer passed near
   "Service". The open state is now driven by .is-open, set by main.js on click.
   The hover/focus rules are explicitly neutralised here because they were
   written earlier in this file at the same specificity.
   --------------------------------------------------------------------- */
.nav__links > li:hover > .sub-menu,
.nav__links > li:focus-within > .sub-menu {
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-50%) translateY(6px);
}
.nav__links > li.is-open > .sub-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* the toggle is a <button> now — strip UA styling, keep the link look */
.nav__links > li > button.nav__heading {
  appearance: none; -webkit-appearance: none;
  background: none; border: 0; margin: 0;
  font: inherit; font-size: 15px;
  cursor: pointer;
}
.nav__links > li > .nav__heading:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 2px;
}
/* caret follows the open state, not hover */
.nav__links > li:hover > .nav__heading::after { transform: translateY(-2px) rotate(45deg); }
.nav__links > li.is-open > .nav__heading::after { transform: translateY(1px) rotate(225deg); }
.nav__links > li.is-open > .nav__heading { color: var(--ink); background: rgba(13,21,48,.05); }

/* the hover bridge is only needed for hover menus */
.nav__links .sub-menu::before { display: none; }

/* ---------------------------------------------------------------------
   Calendly inline embed (free-consultation page).
   --------------------------------------------------------------------- */
.bzs-calendly {
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg);
}
.bzs-calendly .calendly-inline-widget { min-width: 320px; height: 720px; }
@media (max-width: 720px) {
  .bzs-calendly .calendly-inline-widget { height: 1040px; }
}
.bzs-calendly__alt {
  margin: 12px 0 0; text-align: center;
  font-size: 13.5px; color: var(--muted);
}
.bzs-calendly__alt a { color: var(--blue); text-decoration: none; font-weight: 600; }
.bzs-calendly__alt a:hover { text-decoration: underline; }
.bzs-calendly .calendly-inline-widget { height: 760px; }
.bzs-alt-contact { max-width: 460px; margin: 44px auto 0; }

/* live (AJAX) result banner inside the form */
.formnote--live { margin: 0 0 4px; }
.formnote--live[hidden] { display: none; }

/* ---------------------------------------------------------------------
   Contact form — restyled.
   Previously the form ran straight on from the page's own text inside the
   same bezel, with no separation. It now sits in its own card with a header.
   --------------------------------------------------------------------- */
.bzs-formcard {
  margin-top: 26px;
  padding: clamp(22px, 3vw, 34px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.bzs-formcard__head { margin-bottom: 20px; }
.bzs-formcard__head h2 {
  margin: 0 0 6px;
  font-size: clamp(21px, 2.2vw, 26px);
  font-weight: 800; letter-spacing: -.4px; color: var(--ink);
}
.bzs-formcard__head p { margin: 0; font-size: 15px; color: var(--muted); }

.bzs-form { gap: 18px; }
.bzs-form__row { gap: 18px; }

.bzs-field label {
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase; color: var(--muted);
}
.bzs-field .req { color: var(--blue); margin-left: 2px; }

.bzs-field input,
.bzs-field select,
.bzs-field textarea {
  padding: 14px 16px;
  font-size: 15.5px;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.bzs-field input::placeholder,
.bzs-field textarea::placeholder { color: #9aa3bd; }
.bzs-field input:hover,
.bzs-field select:hover,
.bzs-field textarea:hover { border-color: #cdd6ea; }
.bzs-field input:focus,
.bzs-field select:focus,
.bzs-field textarea:focus {
  background: var(--surface);
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}
.bzs-field textarea { min-height: 168px; line-height: 1.55; }

/* native select arrow is inconsistent across browsers — draw our own */
.bzs-field select {
  appearance: none; -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6582' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 17px;
  cursor: pointer;
}

.bzs-form__submit { margin-top: 6px; gap: 16px; }
.bzs-form__submit .btn { padding: 15px 30px; border-radius: 999px; }
.bzs-form__submit .btn[disabled] { opacity: .6; cursor: progress; }
@media (max-width: 560px) {
  .bzs-form__submit { flex-direction: column; align-items: stretch; }
  .bzs-form__submit .btn { width: 100%; justify-content: center; }
  .bzs-form__note { text-align: center; }
}

/* ---------------------------------------------------------------------
   Trustpilot TrustBox.
   The widget renders in an iframe Trustpilot controls, so styling is limited
   to the frame around it. No .reveal here — it must not depend on JS to show.
   --------------------------------------------------------------------- */
.bzs-trustpilot {
  margin-top: 26px;
  min-height: 420px;
  border-radius: var(--radius);
  overflow: hidden;
}
.bzs-trustpilot .trustpilot-widget { width: 100%; }
.bzs-trustpilot > .trustpilot-widget > a {
  display: inline-block; padding: 14px 0;
  color: var(--blue); font-weight: 600; text-decoration: none;
}
.bzs-trustpilot__note { margin: 18px 0 0; text-align: center; font-size: 14.5px; }
.bzs-trustpilot__note a { color: var(--blue); text-decoration: none; font-weight: 600; }
.bzs-trustpilot__note a:hover { text-decoration: underline; }
.qc__role a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* a rating below 5 shows dimmed stars rather than fewer — honest and even */
.stars .star--off { display: inline-flex; }
.stars .star--off svg { opacity: .26; }

/* ---------------------------------------------------------------------
   WhatsApp chat launcher (parts/whatsapp-widget.php).
   Self-contained: no third-party script, no cookies, nothing cross-domain.
   --------------------------------------------------------------------- */
.wa { position: fixed; right: 20px; bottom: 20px; z-index: 120; }

.wa__fab {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border: 0; border-radius: 50%; cursor: pointer;
  background: #25d366; color: #fff;
  box-shadow: 0 10px 26px -6px rgba(37,211,102,.55), 0 3px 10px rgba(16,30,70,.18);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.wa__fab:hover { transform: translateY(-2px) scale(1.04); }
.wa__fab:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.wa__fab svg { width: 30px; height: 30px; transition: opacity .25s var(--ease), transform .25s var(--ease); }
.wa__fab-x { position: absolute; width: 22px !important; height: 22px !important; opacity: 0; transform: rotate(-45deg); }
.wa.is-open .wa__fab-ico { opacity: 0; transform: rotate(45deg); }
.wa.is-open .wa__fab-x { opacity: 1; transform: rotate(0); }

/* gentle attention pulse, once settled */
.wa__fab::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid #25d366; animation: waPulse 2.6s var(--ease) infinite;
}
.wa.is-open .wa__fab::after { animation: none; opacity: 0; }
@keyframes waPulse {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wa__fab::after { animation: none; }
  .wa__fab, .wa__fab svg { transition: none; }
}

.wa__panel {
  position: absolute; right: 0; bottom: 74px;
  width: min(348px, calc(100vw - 40px));
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 24px 60px -16px rgba(16,30,70,.38);
  transform-origin: bottom right;
  animation: waIn .32s var(--ease-out) both;
}
@keyframes waIn { from { opacity: 0; transform: translateY(10px) scale(.96); } }
.wa__panel[hidden] { display: none; }

.wa__head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 16px 14px;
  background: linear-gradient(135deg, var(--navy), var(--navy-2));
  color: #fff;
}
.wa__avatar {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #25d366; color: #fff;
}
.wa__avatar svg { width: 22px; height: 22px; }
.wa__title { margin: 0; font-size: 15.5px; font-weight: 700; }
.wa__sub { margin: 2px 0 0; font-size: 12.5px; opacity: .78; }
.wa__x {
  margin-left: auto; width: 30px; height: 30px; flex-shrink: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff; font-size: 20px; line-height: 1;
}
.wa__x:hover { background: rgba(255,255,255,.24); }

.wa__body { padding: 16px; }
.wa__bubble {
  margin: 0 0 16px; padding: 12px 14px;
  background: var(--bg); border-radius: 4px 14px 14px 14px;
  font-size: 14.5px; color: var(--text);
}
.wa__label {
  display: block; margin: 0 0 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
}
.wa__chips { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.wa__chip {
  text-align: left; cursor: pointer;
  padding: 10px 13px; font: inherit; font-size: 13.5px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 11px;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.wa__chip:hover { border-color: var(--blue); background: rgba(37,99,235,.05); }
.wa__chip.is-picked { border-color: var(--blue); background: rgba(37,99,235,.09); }

.wa__input {
  width: 100%; box-sizing: border-box; resize: vertical;
  padding: 11px 13px; margin-bottom: 14px;
  font: inherit; font-size: 14.5px; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px; outline: none;
}
.wa__input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.13); }

.wa__go {
  display: block; text-align: center; text-decoration: none;
  padding: 13px 16px; border-radius: 999px;
  background: #25d366; color: #fff; font-weight: 700; font-size: 15px;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.wa__go:hover { background: #1eb959; transform: translateY(-1px); }
.wa__note { margin: 9px 0 0; text-align: center; font-size: 12px; color: var(--muted); }

@media (max-width: 560px) {
  .wa { right: 14px; bottom: 14px; }
  .wa__panel { bottom: 70px; }
}

/* ---------------------------------------------------------------------
   Nav alignment.
   "Service" is a <button> and its siblings are <a>, so they had different
   font metrics (15px vs 14.5px, inherited vs 500 weight) and the flex row
   had no vertical centring — which dropped the button off the shared line.
   Both element types now render with identical box metrics.
   --------------------------------------------------------------------- */
.nav__links { align-items: center; }
.nav__links > li { display: flex; align-items: center; }
.nav__links > li > a,
.nav__links > li > .nav__heading {
  display: inline-flex;
  align-items: center;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.25;
  padding: 9px 14px;
  border-radius: 100px;
}