/* ============================================================================
   X3WEB — COMPONENTS
   Glass surfaces, buttons, cards, header, footer, forms, modal, slider.
   Every card in the site is one component; the section it sits in supplies the
   glass, so no card needs a per-background override.
   ========================================================================== */

/* ── The frosted surface ───────────────────────────────────────────────── *
   Reads the --glass-* properties declared by the enclosing section. This is
   the only place the frosted recipe is written down.                        */
.glass{
  position:relative;
  background:linear-gradient(135deg,var(--glass-a),var(--glass-b));
  border:1px solid var(--glass-border);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow:
    inset 1px 1px 0 var(--glass-hi),
    inset -1px -1px 0 var(--glass-lo),
    var(--glass-ring),
    var(--glass-drop);
}

/* Every card in the site. One rule, one look, three backgrounds. */
.card,
.service-card,
.package-card,
.benefit-card,
.benefit-item,
.review-card,
.team-card,
.contact-info-card,
.contact-detail-item,
.why-item,
.process-step,
.step-item,
.pkg-card,
.faq-item,
.portfolio-card,
.stat-item,
.proof-item,
.booking-form-card,
.qf-form-card,
.hero-form-card,
.glass-card{
  position:relative;
  background:linear-gradient(135deg,var(--glass-a),var(--glass-b));
  border:1px solid var(--glass-border);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow:
    inset 1px 1px 0 var(--glass-hi),
    inset -1px -1px 0 var(--glass-lo),
    var(--glass-ring),
    var(--glass-drop);
  border-radius:var(--radius-xl);
  padding:clamp(24px,2.4vw,34px);
  color:var(--text);
  transition:transform var(--dur-slow) var(--ease-glass),
             box-shadow var(--dur-slow) var(--ease-glass);
}

/* Lift on hover, only where the card is a target. */
@media (prefers-reduced-motion:no-preference){
  .card:hover,
  .service-card:hover,
  .package-card:hover,
  .benefit-card:hover,
  .review-card:hover,
  .team-card:hover,
  .why-item:hover,
  .pkg-card:hover,
  .portfolio-card:hover{
    transform:translateY(-3px);
    box-shadow:
      inset 1px 1px 0 var(--glass-hi),
      inset -1px -1px 0 var(--glass-lo),
      var(--glass-ring),
      var(--glass-drop-lg);
  }
}

.card h3,.card h4,
.service-card h3,.service-card h4,
.benefit-card h4,
.why-item h4,
.process-step h4{margin-bottom:var(--space-3)}
.card p,.service-card p,.benefit-card p,.why-item p{font-size:var(--fs-sm)}

/* Icon tile used inside cards */
.card-icon,
.icon-tile{
  width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-md);
  background:var(--accent-soft);
  color:var(--accent-strong);
  font-size:var(--fs-body);
  flex:none;
  margin-bottom:var(--space-4);
}
.section-blue .card-icon,
.section-blue .icon-tile{background:var(--on-dark-a12);color:var(--accent)}

.card-grid,.card-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-md)}
.card-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-lg)}
.card-grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap-md)}

/* ── Buttons ───────────────────────────────────────────────────────────── *
   Pill geometry taken from the design comp: knob = 0.70 of the button height,
   inset 0.17 of the height from the right edge, text padded 0.50 in from the
   left. Expressed in em so one rule serves every size.                      */
.btn{
  --btn-h:52px;
  display:inline-flex;
  align-items:center;
  gap:0.55em;
  height:var(--btn-h);
  padding:0 1.55em;
  border-radius:var(--radius-pill);
  font-family:var(--font-btn);
  font-size:var(--fs-sm);
  font-weight:var(--w-regular);
  letter-spacing:var(--ls-btn);
  line-height:1;
  white-space:nowrap;
  text-decoration:none;
  cursor:pointer;
  border:1px solid transparent;
  transition:background var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out),
             transform var(--dur-slow) var(--ease-out),
             box-shadow var(--dur-slow) var(--ease-out);
}
.btn i{font-size:0.92em;flex:none}

.btn-sm{--btn-h:42px;padding:0 1.3em}
.btn-lg{--btn-h:62px;font-size:var(--fs-body);padding:0 1.7em}
.btn-block{display:flex;width:100%;justify-content:center}

/* Knob — the signature. Applied to the prominent sizes only. */
.btn-lg::after,
.btn-cta::after{
  content:"";
  flex:none;
  width:calc(var(--btn-h) * 0.70);
  height:calc(var(--btn-h) * 0.70);
  margin-left:auto;
  margin-right:calc(var(--btn-h) * -0.34);
  border-radius:50%;
  background-color:var(--knob-bg,var(--brand-knob));
  background-image:var(--knob-chevron);
  background-repeat:no-repeat;
  background-position:center;
  background-size:34% 34%;
  transition:transform var(--dur-slow) var(--ease-out);
}
.btn-lg,.btn-cta{padding-right:calc(var(--btn-h) * 0.86)}

@media (prefers-reduced-motion:no-preference){
  .btn-lg:hover::after,.btn-cta:hover::after{transform:translateX(2px)}
}

/* Chevron artwork, one per ink colour. */
:root{
  --chevron-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='m6.6 3.6 6 5.4-6 5.4' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --chevron-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='m6.6 3.6 6 5.4-6 5.4' stroke='%23041D36' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.btn-primary{
  --knob-bg:var(--accent);
  --knob-chevron:var(--chevron-light);
  background:var(--brand-ink);
  color:var(--on-dark);
  box-shadow:var(--shadow-cta);
}
.btn-primary:hover{background:var(--brand-hover);color:var(--on-dark)}

.btn-accent{
  --knob-bg:var(--white);
  --knob-chevron:var(--chevron-dark);
  background:var(--accent);
  color:var(--on-dark);
  box-shadow:var(--shadow-accent);
}
.btn-accent:hover{background:var(--accent-strong);color:var(--on-dark)}

.btn-white{
  --knob-bg:var(--brand-ink);
  --knob-chevron:var(--chevron-light);
  background:var(--white);
  color:var(--brand);
  box-shadow:var(--shadow-sm);
}
.btn-white:hover{background:var(--off-white);color:var(--brand)}

.btn-secondary{
  --knob-bg:var(--accent);
  --knob-chevron:var(--chevron-light);
  background:var(--accent-soft);
  color:var(--accent-strong);
}
.btn-secondary:hover{background:var(--accent-softer);color:var(--accent-deep)}

.btn-outline{
  --knob-bg:var(--brand-ink);
  --knob-chevron:var(--chevron-light);
  background:transparent;
  color:var(--brand);
  border-color:var(--hairline-strong);
}
.btn-outline:hover{background:var(--brand-soft);color:var(--brand)}

/* Glass button — for use over media and on navy. */
.btn-glass{
  --knob-bg:var(--accent);
  --knob-chevron:var(--chevron-light);
  background:linear-gradient(135deg,var(--glass-a),var(--glass-b));
  border-color:var(--glass-border);
  color:var(--on-dark);
  -webkit-backdrop-filter:blur(var(--glass-blur));
  backdrop-filter:blur(var(--glass-blur));
  box-shadow:var(--glass-ring),var(--glass-drop);
}
.btn-glass:hover{color:var(--on-dark)}

@media (prefers-reduced-motion:no-preference){
  .btn:hover{transform:translateY(-2px)}
  /* Pressed state — every variant settles back toward its resting position
     rather than continuing to lift, so a click reads as physical contact. */
  .btn:active{transform:translateY(0px) scale(0.98)}
  .btn-lg:active::after,.btn-cta:active::after{transform:translateX(0)}
}

/* Text/arrow CTA — the fourth role: no pill, no fill, just a confident line
   of text and a chevron that moves on hover. Used where a full button would
   overweight a secondary action (card footers, list rows, "view all" links).
   --link-color/-link-color-hover let it drop onto a dark section cleanly. */
.btn-text{
  display:inline-flex;
  align-items:center;
  gap:0.5em;
  font-size:var(--fs-sm);
  font-weight:var(--w-semi);
  letter-spacing:var(--ls-tight);
  color:var(--link-color,var(--accent-strong));
  text-decoration:none;
  cursor:pointer;
  background:none;
  border:0;
  padding:0;
}
.btn-text i,.btn-text svg{
  font-size:0.85em;
  transition:transform var(--dur-fast) var(--ease-out);
}
.btn-text:hover{color:var(--link-color-hover,var(--accent-deep))}
.btn-text:hover i,.btn-text:hover svg{transform:translateX(3px)}
.section-blue .btn-text,
.cta-section .btn-text,
.surface-media .btn-text{
  --link-color:var(--on-dark);
  --link-color-hover:var(--accent);
}

.cta-buttons,.hero-btns{display:flex;gap:var(--space-3);flex-wrap:wrap}

/* ── Header ────────────────────────────────────────────────────────────── */
.site-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:1000;
  background:transparent;
  transition:background var(--dur-slow) var(--ease-out),
             box-shadow var(--dur-slow) var(--ease-out);
}
/* The nav capsule is white-alpha glass carrying white type, which only reads
   against something dark. Every page with a full-bleed hero supplies that.
   A page without one (thank-you, 404) has the pale frame behind the bar, so
   the header wears its scrolled treatment from the start instead of leaving
   white type on a light background. */
.site-header.scrolled,
body.no-hero .site-header{
  background:var(--header-scrolled);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 1px 0 var(--hairline-on-dark),var(--header-scrolled-drop);
}
/* …and the content clears the fixed bar, since there is no hero padding it. */
body.no-hero main{padding-top:var(--header-h)}
.header-inner{
  display:flex;
  align-items:center;
  gap:var(--space-6);
  height:var(--header-h);
}
.logo{display:flex;align-items:center;flex:none}
.logo img{height:42px;width:auto}

/* Nav links live in a frosted capsule, so they read identically over the hero
   video and over the navy bar once scrolled. */
.main-nav{
  display:flex;
  align-items:center;
  gap:var(--space-1);
  margin-left:auto;
  padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-pill);
  background:linear-gradient(135deg,var(--nav-glass-a),var(--nav-glass-b));
  border:1px solid var(--nav-glass-border);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow:
    inset 1px 1px 0 var(--nav-glass-hi),
    var(--nav-glass-ring),
    var(--nav-glass-drop);
}
.main-nav > a,
.nav-dropdown > a{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  padding:var(--space-2) var(--space-4);
  border-radius:var(--radius-pill);
  font-size:var(--fs-sm);
  font-weight:var(--w-nav);
  letter-spacing:var(--ls-nav);
  color:var(--on-dark);
  white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.main-nav > a:hover,
.nav-dropdown > a:hover{background:var(--nav-hover);color:var(--on-dark)}
.main-nav > a.active,
.nav-dropdown > a.active{background:var(--accent);color:var(--on-dark)}
.main-nav > a.active:hover,
.nav-dropdown > a.active:hover{background:var(--accent-strong);color:var(--on-dark)}
.main-nav > a.active i{color:var(--on-dark)}

/* Dropdown */
.nav-dropdown{position:relative}
.nav-dropdown > a::after{content:"";position:absolute;inset:auto 0 -14px 0;height:14px}
.dropdown-menu{
  position:absolute;
  top:calc(100% + var(--space-3));
  left:50%;
  min-width:264px;
  padding:var(--space-2);
  border-radius:var(--radius-lg);
  background:var(--menu-glass);
  border:1px solid var(--menu-glass-border);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow:var(--nav-glass-ring),var(--menu-glass-drop);
  opacity:0;
  visibility:hidden;
  transform:translateX(-50%) translateY(6px);
  transition:opacity var(--dur-mid) var(--ease-out),
             transform var(--dur-mid) var(--ease-out),
             visibility var(--dur-mid);
  z-index:100;
}
.nav-dropdown.is-open .dropdown-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.dropdown-menu a{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-3) var(--space-4);
  border-radius:var(--radius-sm);
  font-size:var(--fs-sm);
  font-weight:var(--w-label);
  letter-spacing:var(--ls-tight);
  color:var(--ink-soft);
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.dropdown-menu a:hover{background:var(--accent-soft);color:var(--accent-strong)}
.dropdown-menu a i{color:var(--accent-strong);width:17px;text-align:center}

.header-cta{flex:none;display:flex;align-items:center;gap:var(--space-5)}
.header-client-zone{
  display:inline-flex;align-items:center;gap:0.45em;
  padding-right:var(--space-5);
  border-right:1px solid var(--hairline-on-dark);
  font-size:var(--fs-xs);
  font-weight:var(--w-regular);
  color:var(--on-dark-mute);
  white-space:nowrap;
  transition:color var(--dur-fast) var(--ease-out);
}
.header-client-zone i{font-size:0.95em}
.header-client-zone:hover{color:var(--on-dark)}
.nav-toggle{
  display:none;
  flex-direction:column;
  gap:var(--space-1);
  align-items:center;justify-content:center;
  width:46px;height:46px;
  margin-left:auto;
  border-radius:var(--radius-pill);
  background:linear-gradient(135deg,var(--nav-glass-a),var(--nav-glass-b));
  border:1px solid var(--nav-glass-border);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow:inset 1px 1px 0 var(--nav-glass-hi),var(--nav-glass-ring);
}
.nav-toggle span{
  display:block;width:19px;height:2px;
  border-radius:var(--radius-pill);
  background:var(--on-dark);
  transition:transform var(--dur-mid) var(--ease-out),opacity var(--dur-mid) var(--ease-out);
}
.mobile-nav-cta{display:none}

/* ── Breadcrumb ────────────────────────────────────────────────────────── */
.breadcrumb{
  display:flex;align-items:center;justify-content:center;
  gap:var(--space-2);
  font-size:var(--fs-xs);
  font-weight:var(--w-label);
  letter-spacing:var(--ls-tight);
  color:var(--on-dark-mute);
  margin-bottom:var(--space-5);
}
.breadcrumb a{color:var(--on-dark-mute)}
.breadcrumb a:hover{color:var(--on-dark)}
.breadcrumb .sep{color:var(--on-dark-faint)}

/* ── Proof bar ─────────────────────────────────────────────────────────── */
.proof-bar{background:var(--frame);padding:var(--space-7) 0}
.proof-grid{
  display:flex;align-items:stretch;justify-content:space-between;
  gap:var(--gap-sm);flex-wrap:wrap;
}
.proof-item{
  flex:1 1 180px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--space-1);
  padding:var(--space-5) var(--space-4);
  border-radius:var(--radius-lg);
  text-align:center;
}
.proof-item strong{
  font-size:var(--fs-stat-sm);
  font-weight:var(--w-thin);
  letter-spacing:0;
  line-height:1;
  color:var(--ink);
}
.proof-item span{
  font-size:var(--fs-xs);
  font-weight:var(--w-label);
  letter-spacing:0.02em;
  color:var(--muted);
}
/* The comp's hairline slash between figures. */
.proof-divider{
  flex:0 0 22px;
  align-self:center;
  height:58px;
  background:linear-gradient(to top left,
    transparent calc(50% - 0.85px),
    var(--hairline-strong) calc(50% - 0.85px),
    var(--hairline-strong) calc(50% + 0.85px),
    transparent calc(50% + 0.85px));
}

/* ── Stats ─────────────────────────────────────────────────────────────── */
.stats-bar{display:flex;flex-wrap:wrap;gap:var(--gap-md);justify-content:center}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap-md)}
.stat-item{text-align:center;border-radius:var(--radius-lg);padding:var(--space-6) var(--space-5)}
.stat-item strong,.stat-item .stat-num{
  display:block;
  font-size:var(--fs-stat);
  font-weight:var(--w-thin);
  letter-spacing:0;
  line-height:1;
  color:var(--ink);
  margin-bottom:var(--space-2);
}
.stat-item span{font-size:var(--fs-sm);color:var(--muted)}

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.faq-list{display:flex;flex-direction:column;gap:var(--space-3);max-width:900px;margin-inline:auto}
.faq-item{padding:0;border-radius:var(--radius-lg);overflow:hidden}
.faq-question{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  width:100%;
  padding:var(--space-5) var(--space-6);
  text-align:left;
  font-size:var(--fs-h4);
  font-weight:var(--w-medium);
  letter-spacing:var(--ls-tight);
  color:var(--ink);
}
.faq-question::after{
  content:"";
  flex:none;
  width:12px;height:12px;
  border-right:2px solid var(--accent);
  border-bottom:2px solid var(--accent);
  transform:rotate(45deg) translateY(-2px);
  transition:transform var(--dur-mid) var(--ease-out);
}
.faq-item.open .faq-question::after{transform:rotate(225deg) translateY(-2px)}
/* A plain max-height collapse. Deliberately NOT the grid 0fr -> 1fr trick:
   that relies on the flexible track taking its size from the item's content
   contribution, and the answer's own padding and overflow clipping make that
   resolve to zero here, so the panel never opens.

   The cap only has to exceed the tallest answer; it is not the animated-to
   height, so its exact value is not visible. The copy is wrapped in a plain
   <div> so the padding sits inside the clipped box rather than on it. */
.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height var(--dur-slow) var(--ease-out);
}
.faq-item.open .faq-answer{max-height:60rem}
html:not(.js) .faq-answer{max-height:none}
.faq-answer p{padding:0 var(--space-6) var(--space-5);font-size:var(--fs-sm)}

/* ── Forms ─────────────────────────────────────────────────────────────── */
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-sm)}
.form-group{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-4)}
.form-group label{
  font-size:var(--fs-xs);
  font-weight:var(--w-semi);
  letter-spacing:0.02em;
  color:var(--ink-soft);
}
.form-group input,
.form-group select,
.form-group textarea{
  width:100%;
  padding:var(--space-3) var(--space-4);
  border-radius:var(--radius-md);
  border:1px solid var(--hairline-strong);
  background:var(--white);
  color:var(--text);
  font-size:var(--fs-sm);
  transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
}
.form-group textarea{min-height:130px;resize:vertical}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:var(--focus-ring);
}
.form-group input.error,
.form-group select.error,
.form-group textarea.error{border-color:var(--danger)}
.form-error-msg,.form-error-banner{
  font-size:var(--fs-xs);
  color:var(--danger);
}
.form-error-banner{
  padding:var(--space-3) var(--space-4);
  border-radius:var(--radius-md);
  background:var(--danger-soft);
  border:1px solid var(--danger-line);
  margin-bottom:var(--space-4);
}
.form-privacy{font-size:var(--fs-xs);color:var(--muted-3);margin-top:var(--space-3)}
.form-submit-btn{width:100%;justify-content:center}
/* Honeypot — must stay off-screen, never display:none (bots skip hidden fields). */
.hp-field{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── Modal ─────────────────────────────────────────────────────────────── */
.x3-modal-overlay{
  position:fixed;inset:0;z-index:2000;
  display:none;
  align-items:center;justify-content:center;
  padding:var(--space-6);
  background:var(--scrim);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.x3-modal-overlay.active{display:flex}
.x3-modal-wrap{
  width:min(620px,100%);
  max-height:88vh;
  overflow-y:auto;
  padding:clamp(24px,3vw,38px);
  border-radius:var(--radius-2xl);
  background:var(--white);
  box-shadow:var(--shadow-lg);
}
.x3-modal-header{margin-bottom:var(--space-5)}
.x3-modal-header h3{margin-bottom:var(--space-2)}
.x3-modal-header p{font-size:var(--fs-sm)}
.x3-modal-close{
  position:absolute;top:var(--space-4);right:var(--space-4);
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--frame);
  color:var(--ink-soft);
  transition:background var(--dur-fast) var(--ease-out);
}
.x3-modal-close:hover{background:var(--accent-soft);color:var(--accent-strong)}

/* ── Reviews slider ────────────────────────────────────────────────────── */
.reviews-slider-wrap{position:relative;overflow:hidden}
.reviews-track{display:flex;gap:var(--gap-md);transition:transform var(--dur-slow) var(--ease-out)}
.review-slide{flex:0 0 calc((100% - var(--gap-md) * 2) / 3);min-width:0}
.review-card{border-radius:var(--radius-xl);display:flex;flex-direction:column;gap:var(--space-4);height:100%}
.review-header{display:flex;align-items:center;gap:var(--space-3)}
.review-avatar{
  width:44px;height:44px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft);color:var(--accent-strong);
  font-weight:var(--w-semi);
}
.review-meta strong{display:block;font-size:var(--fs-sm)}
.review-meta span{font-size:var(--fs-xs);color:var(--muted-3)}
.review-stars{color:var(--accent);font-size:var(--fs-sm);letter-spacing:1px}
.review-text{font-size:var(--fs-sm);color:var(--muted)}
.reviews-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--white);
  color:var(--ink);
  box-shadow:var(--shadow-sm);
  z-index:3;
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.reviews-arrow:hover{background:var(--accent);color:var(--on-dark)}
.reviews-arrow--prev{left:var(--space-2)}
.reviews-arrow--next{right:var(--space-2)}
.reviews-dots{display:flex;gap:var(--space-2);justify-content:center;margin-top:var(--space-6)}
.reviews-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--hairline-strong);
  transition:background var(--dur-fast) var(--ease-out),width var(--dur-fast) var(--ease-out);
}
.reviews-dot.active{background:var(--accent);width:22px;border-radius:var(--radius-pill)}
.reviews-badge{
  display:inline-flex;align-items:center;gap:var(--space-2);
  padding:var(--space-2) var(--space-4);border-radius:var(--radius-pill);
  background:var(--accent-soft);color:var(--accent-strong);
  font-size:var(--fs-xs);font-weight:var(--w-semi);
}

/* ── Logo strip ────────────────────────────────────────────────────────── */
.logos-grid,.logo-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--gap-sm);
  align-items:center;
}
.logo-item{
  display:flex;align-items:center;justify-content:center;
  min-height:92px;padding:var(--space-5);
  border-radius:var(--radius-lg);
}
.logo-item img{
  max-height:46px;width:auto;object-fit:contain;
  filter:brightness(0) invert(1);
  opacity:0.55;
  transition:filter var(--dur-mid) var(--ease-out),opacity var(--dur-mid) var(--ease-out);
}
.logo-item:hover img{filter:none;opacity:1}

/* ── CTA band ──────────────────────────────────────────────────────────── */
.cta-section{
  padding:var(--section-pad) 0;
  background:linear-gradient(168deg,var(--brand) 0%,var(--brand-deep) 100%);
  color:var(--on-dark);
  text-align:center;
}
.cta-section h2{color:var(--on-dark);margin-bottom:var(--space-4)}
.cta-section p{color:var(--on-dark-soft);max-width:660px;margin:0 auto var(--space-7)}
.cta-section .cta-buttons{justify-content:center}
.guarantee-bar{
  display:flex;align-items:center;justify-content:center;gap:var(--space-3);
  flex-wrap:wrap;
  margin-top:var(--space-6);
  font-size:var(--fs-sm);
  color:var(--on-dark-soft);
}
.guarantee-bar i{color:var(--accent)}

/* ── Footer ────────────────────────────────────────────────────────────── */
.site-footer{
  background:linear-gradient(168deg,var(--brand) 0%,var(--brand-deep) 100%);
  color:var(--on-dark-soft);
  padding:clamp(56px,6vw,88px) 0 var(--space-7);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.7fr repeat(4,1fr);
  gap:var(--gap-xl);
  padding-bottom:44px;
}
.footer-brand img{height:42px;width:auto;filter:brightness(0) invert(1)}
.footer-brand p{
  margin-top:var(--space-4);
  font-size:var(--fs-sm);
  color:var(--on-dark-mute);
  max-width:380px;
}
.footer-brand p.footer-brand-statement{
  font-size:var(--fs-xs);
  font-weight:var(--w-semi);
  letter-spacing:0.12em;
  color:var(--accent);
  text-transform:uppercase;
  max-width:none;
}
.footer-social{display:flex;gap:var(--space-3);margin-top:var(--space-5)}
.footer-social a{
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--on-dark-a09);
  border:1px solid var(--hairline-on-dark);
  color:var(--on-dark-soft);
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.footer-social a:hover{background:var(--accent);border-color:var(--accent);color:var(--on-dark)}
.footer-heading{
  font-size:var(--fs-xs);
  font-weight:var(--w-semi);
  line-height:1.4;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--on-dark);
  margin-bottom:var(--space-4);
}
/* The :not() keeps this off the contact button, which lives in the same
   column. Without it this rule outranks .footer-contact-cta on specificity
   and flattens the button into a plain dimmed list link. */
.footer-col a:not(.footer-contact-cta){
  display:block;
  font-size:var(--fs-sm);
  color:var(--on-dark-mute);
  padding:var(--space-1) 0;
}
.footer-col a:not(.footer-contact-cta):hover{color:var(--accent)}
.contact-item{
  display:flex;align-items:flex-start;gap:var(--space-3);
  font-size:var(--fs-sm);
  color:var(--on-dark-mute);
  padding:var(--space-1) 0;
}
.contact-item i{color:var(--accent);margin-top:var(--space-1);font-size:var(--fs-xs);width:15px;flex:none}
.contact-item a{color:var(--on-dark-mute)}
.contact-item a:hover{color:var(--accent)}
.footer-contact-cta{
  display:inline-flex;align-items:center;gap:var(--space-2);
  margin-top:var(--space-4);
  padding:var(--space-3) var(--space-5);
  border-radius:var(--radius-pill);
  background:var(--accent);
  color:var(--on-dark);
  font-size:var(--fs-sm);
  font-weight:var(--w-semi);
  transition:background var(--dur-fast) var(--ease-out),
             transform var(--dur-slow) var(--ease-out),
             box-shadow var(--dur-slow) var(--ease-out);
}
.footer-contact-cta:hover{
  background:var(--accent-strong);
  color:var(--on-dark);
  transform:translateY(-2px);
  box-shadow:var(--shadow-accent);
}
.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--gap-md);flex-wrap:wrap;
  padding-top:var(--space-6);
  border-top:1px solid var(--hairline-on-dark);
}
.footer-bottom p{font-size:var(--fs-xs);color:var(--on-dark-faint)}
.footer-bottom-links{display:flex;gap:var(--space-4);flex-wrap:wrap}
.footer-bottom-links a{font-size:var(--fs-xs);color:var(--on-dark-faint)}
.footer-bottom-links a:hover{color:var(--accent)}

/* ── Floating WhatsApp widget ──────────────────────────────────────────── */
.x3-whatsapp-widget{position:fixed;right:var(--space-5);bottom:var(--space-5);z-index:1500}
.x3-whatsapp-button{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-4) var(--space-5);
  border-radius:var(--radius-pill);
  background:var(--white);
  color:var(--ink);
  font-size:var(--fs-sm);
  font-weight:var(--w-semi);
  letter-spacing:var(--ls-tight);
  box-shadow:var(--shadow-md);
  transition:transform var(--dur-slow) var(--ease-out),box-shadow var(--dur-slow) var(--ease-out);
}
.x3-whatsapp-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.x3-whatsapp-icon{flex:none}
.x3-whatsapp-options{
  display:none;
  position:absolute;right:0;bottom:70px;
  width:262px;padding:var(--space-3);
  border-radius:var(--radius-xl);
  background:var(--white);
  box-shadow:var(--shadow-lg);
}
.x3-whatsapp-options.active{display:block}
.x3-whatsapp-options a{
  display:block;padding:var(--space-3) var(--space-4);
  border-radius:var(--radius-md);
  color:var(--ink);
  transition:background var(--dur-fast) var(--ease-out);
}
.x3-whatsapp-options a:hover{background:var(--frame)}
.x3-whatsapp-options span{
  display:block;font-size:var(--fs-sm);font-weight:var(--w-semi);margin-bottom:var(--space-1);
}
.x3-whatsapp-options small{display:block;font-size:var(--fs-xs);color:var(--muted-3)}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width:1180px){
  .footer-grid{grid-template-columns:1.4fr repeat(2,1fr);gap:var(--gap-lg)}
  .review-slide{flex-basis:calc((100% - var(--gap-md)) / 2)}
  .card-grid,.card-grid-3,.card-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:980px){
  /* Nav collapses into the toggle; the capsule becomes a drop panel. */
  .nav-toggle{display:flex}
  .main-nav{
    position:absolute;
    top:calc(var(--header-h) - var(--space-2));
    right:var(--gutter);
    left:var(--gutter);
    flex-direction:column;
    align-items:stretch;
    gap:var(--space-1);
    padding:var(--space-4);
    border-radius:var(--radius-xl);
    background:var(--menu-panel-glass);
    border-color:var(--menu-glass-border);
    box-shadow:var(--menu-panel-ring),var(--menu-panel-drop);
    opacity:0;visibility:hidden;
    transform:translateY(-10px) scale(0.98);
    transform-origin:top right;
    transition:opacity var(--dur-mid) var(--ease-out),
               transform var(--dur-mid) var(--ease-out),
               visibility var(--dur-mid);
  }
  .main-nav.open{opacity:1;visibility:visible;transform:none}
  /* The drop panel is a light plate, so the type goes back to ink. */
  .main-nav > a,.nav-dropdown > a{
    font-size:var(--fs-body);padding:var(--space-3) var(--space-4);
    color:var(--ink-soft);
  }
  .main-nav > a:hover,.nav-dropdown > a:hover{background:var(--accent-soft);color:var(--accent-strong)}
  .nav-dropdown{width:100%}
  .dropdown-menu{
    position:static;
    transform:none;
    opacity:1;visibility:visible;
    min-width:0;
    margin-top:var(--space-1);
    padding:var(--space-1) 0 var(--space-1) var(--space-3);
    background:none;border:0;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
  .nav-dropdown > a::after{display:none}
  .header-cta{display:none}
  .mobile-nav-cta{
    display:flex!important;
    align-items:center;justify-content:center;gap:var(--space-2);
    margin-top:var(--space-3);
    padding:var(--space-4);
    border-radius:var(--radius-pill);
    background:var(--accent);
    color:var(--on-dark);
    font-weight:var(--w-semi);
  }
  .mobile-nav-cta:hover{background:var(--accent-strong);color:var(--on-dark)}
}

@media (max-width:860px){
  .footer-grid{grid-template-columns:minmax(0,1fr);gap:var(--gap-lg)}
  .footer-bottom{flex-direction:column;align-items:flex-start}
  .review-slide{flex-basis:100%}
  .card-grid,.card-grid-2,.card-grid-3,.card-grid-4{grid-template-columns:minmax(0,1fr)}
  .form-row{grid-template-columns:minmax(0,1fr)}
  .proof-divider{display:none}
  .proof-item{flex-basis:calc(50% - var(--gap-sm))}
}

@media (max-width:560px){
  .stats-grid{grid-template-columns:minmax(0,1fr)}
  .proof-item{flex-basis:100%}
  .x3-whatsapp-widget{right:var(--space-4);left:var(--space-4);bottom:var(--space-4)}
  .x3-whatsapp-button{width:100%;justify-content:center}
  .x3-whatsapp-options{width:100%}
  .btn{width:100%;justify-content:center}
  .hero-btns,.cta-buttons{width:100%}
}