/* ==========================================================================
   COMPONENTS
   ========================================================================== */

/* ---------- Buttons ---------- */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 30px;
  font-family:var(--font-body); font-weight:600; font-size:.95rem;
  border-radius:var(--r-full);
  border:1px solid transparent;
  cursor:pointer;
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast);
  white-space:nowrap;
}
.btn:active{ transform:scale(.97); }

.btn-primary{
  background:var(--grad-accent);
  color:var(--accent-ink);
  box-shadow:0 0 0 0 var(--accent-glow);
}
.btn-primary:hover{
  box-shadow:0 8px 40px -4px var(--accent-glow);
  transform:translateY(-2px);
}

.btn-ghost{
  background:transparent;
  color:var(--text);
  border-color:var(--border-strong);
}
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }

.btn-sm{ padding:11px 22px; font-size:.85rem; }

.btn-icon{
  width:14px; height:14px;
  transition:transform var(--dur-fast) var(--ease-out);
}
.btn:hover .btn-icon{ transform:translate(3px,-3px); }

/* ---------- Header / Nav ---------- */
.site-header{
  position:fixed; inset-inline:0; top:0; z-index:200;
  height:var(--header-h);
  display:flex; align-items:center;
  transition:background var(--dur-med) var(--ease-out), border-color var(--dur-med), height var(--dur-med);
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  background:rgba(8,8,8,.72);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-color:var(--border);
  height:70px;
}
.nav-wrap{ width:100%; display:flex; align-items:center; justify-content:space-between; }

.logo{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:1.3rem; font-weight:600; letter-spacing:-.01em; }
.logo svg{ width:32px; height:32px; }

.nav-links{ display:flex; align-items:center; gap:var(--sp-lg); }
.nav-links a{
  position:relative; font-size:.92rem; color:var(--text-muted); font-weight:500;
  padding:6px 0; transition:color var(--dur-fast);
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--accent);
  transition:width var(--dur-fast) var(--ease-out);
}
.nav-links a:hover, .nav-links a.active{ color:var(--text); }
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.nav-links a.active{ color:var(--accent); }

.nav-cta{ display:flex; align-items:center; gap:var(--sp-md); }

.nav-toggle{
  display:none; width:44px; height:44px; border:1px solid var(--border-strong); border-radius:var(--r-full);
  background:transparent; align-items:center; justify-content:center; position:relative; z-index:210;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:''; display:block; width:18px; height:1.5px; background:var(--text); transition:all var(--dur-fast);
}
.nav-toggle span::before{ position:absolute; transform:translateY(-6px); }
.nav-toggle span::after{ position:absolute; transform:translateY(6px); }
.nav-toggle.is-open span{ background:transparent; }
.nav-toggle.is-open span::before{ transform:rotate(45deg); }
.nav-toggle.is-open span::after{ transform:rotate(-45deg); }

@media (max-width:960px){
  .nav-links{
    position:fixed; inset:0; top:0; height:100vh; width:100%;
    background:var(--bg); flex-direction:column; justify-content:center; gap:var(--sp-lg);
    transform:translateY(-100%); transition:transform var(--dur-med) var(--ease-in-out);
    z-index:205;
  }
  .nav-links.is-open{ transform:translateY(0); }
  .nav-links a{ font-size:1.6rem; font-family:var(--font-display); }
  .nav-mobile-cta{ display:inline-flex; margin-top:var(--sp-sm); }
  .nav-cta .btn-ghost{ display:none; }
  .nav-toggle{ display:flex; }
}
@media (min-width:961px){
  .nav-mobile-cta{ display:none; }
}

/* ---------- Glass / cards ---------- */
.glass{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-radius:var(--r-lg);
}

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:var(--sp-lg);
  transition:transform var(--dur-med) var(--ease-out), border-color var(--dur-med), background var(--dur-med);
  position:relative;
  overflow:hidden;
}
.card::before{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:var(--grad-accent);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity var(--dur-med);
  pointer-events:none;
}
.card:hover{ transform:translateY(-6px); border-color:transparent; }
.card:hover::before{ opacity:1; }

.card-icon{
  width:52px; height:52px; border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-glow-soft); color:var(--accent);
  margin-bottom:var(--sp-md);
}
.card-icon svg{ width:24px; height:24px; }

/* tilt wrapper used by vanilla-tilt-style JS */
.tilt{ transform-style:preserve-3d; will-change:transform; }

/* ---------- Badges / pills ---------- */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.04em;
  padding:6px 14px; border-radius:var(--r-full);
  border:1px solid var(--border-strong); color:var(--text-muted);
}
.pill.accent{ border-color:var(--accent); color:var(--accent); }
.pill .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); }

/* ---------- Stats ---------- */
.stat{ text-align:left; }
.stat .num{ font-family:var(--font-display); font-size:var(--fs-8xl); font-weight:600; color:var(--text); display:flex; align-items:baseline; gap:4px; }
.stat .num .suffix{ color:var(--accent); font-size:.5em; }
.stat .label{ color:var(--text-muted); font-size:.9rem; margin-top:6px; }

/* ---------- Marquee ---------- */
.marquee{ overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); }
.marquee-track{ display:flex; gap:var(--sp-2xl); width:max-content; animation:marquee 32s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-item{ font-family:var(--font-display); font-size:1.4rem; color:var(--text-faint); white-space:nowrap; letter-spacing:.02em; display:flex; align-items:center; gap:10px; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---------- Footer ---------- */
.site-footer{ border-top:1px solid var(--border); padding-block:var(--sp-2xl) var(--sp-lg); position:relative; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr; gap:var(--sp-lg); margin-bottom:var(--sp-2xl); }
@media (max-width:900px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-top{ grid-template-columns:1fr; } }
.footer-col h5{ font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); margin-bottom:var(--sp-sm); font-weight:500; }
.footer-col a{ display:block; color:var(--text-muted); padding:6px 0; font-size:.92rem; transition:color var(--dur-fast), padding-left var(--dur-fast); }
.footer-col a:hover{ color:var(--accent); padding-left:4px; }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-sm); padding-top:var(--sp-lg); border-top:1px solid var(--border); font-size:.85rem; color:var(--text-faint); }
.social-row{ display:flex; gap:10px; }
.social-row a{ width:38px; height:38px; border-radius:50%; border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center; transition:all var(--dur-fast); }
.social-row a:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-3px); }
.social-row svg{ width:16px; height:16px; }

.newsletter-form{ display:flex; gap:8px; margin-top:var(--sp-sm); }
.newsletter-form input{
  flex:1; background:var(--surface-2); border:1px solid var(--border-strong); border-radius:var(--r-full);
  padding:12px 18px; color:var(--text); font-family:var(--font-body); font-size:.88rem;
}
.newsletter-form input:focus{ outline:none; border-color:var(--accent); }
.newsletter-form button{ width:44px; height:44px; border-radius:50%; border:none; background:var(--grad-accent); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; flex-shrink:0; }

/* ---------- Forms ---------- */
.form-field{ margin-bottom:var(--sp-md); }
.form-field label{ display:block; font-size:.85rem; color:var(--text-muted); margin-bottom:8px; font-weight:500; }
.form-field input, .form-field textarea, .form-field select{
  width:100%; background:var(--surface-2); border:1px solid var(--border-strong); border-radius:var(--r-sm);
  padding:14px 16px; color:var(--text); font-family:var(--font-body); font-size:.95rem;
  transition:border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-glow-soft);
}
.form-field textarea{ resize:vertical; min-height:130px; }

/* ---------- Accordion (FAQ) — premium card-style, icon + chevron ----------
   Explicit background/color declared at every level (defensive) so this
   can never inherit or fall back to a light theme. ---------- */
.accordion{ display:flex; flex-direction:column; gap:14px; background:transparent; }
.accordion-item{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  overflow:hidden;
  transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.accordion-item:hover{ border-color:var(--border-strong); }
.accordion-item.is-open{
  background:var(--surface-2);
  border-color:var(--accent);
  box-shadow:0 20px 45px -24px rgba(0,255,136,.28), inset 0 0 0 1px var(--accent-glow-soft);
}
.accordion-trigger{
  width:100%; display:flex; align-items:center; gap:16px;
  background:none; border:none; color:var(--text); text-align:left;
  padding:20px 22px; font-family:var(--font-display); font-size:1.05rem; font-weight:500;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.accordion-trigger::before{
  content:'?'; flex-shrink:0; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); border:1px solid var(--border-strong); color:var(--accent);
  font-family:var(--font-mono); font-size:.95rem; font-weight:500;
  transition:all var(--dur-fast) var(--ease-out);
}
.accordion-item.is-open .accordion-trigger::before{
  content:'–'; background:var(--grad-accent); color:var(--accent-ink); border-color:transparent;
  transform:scale(1.06);
}
.accordion-trigger .q-text{ flex:1; line-height:1.4; }
.accordion-trigger .plus{ width:18px; height:18px; position:relative; flex-shrink:0; color:var(--text-muted); }
.accordion-trigger .plus::before,.accordion-trigger .plus::after{ content:''; position:absolute; inset:0; margin:auto; background:currentColor; border-radius:2px; transition:transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast); }
.accordion-trigger .plus::before{ width:100%; height:2px; }
.accordion-trigger .plus::after{ width:2px; height:100%; }
.accordion-item.is-open .accordion-trigger .plus{ color:var(--accent); }
.accordion-item.is-open .accordion-trigger .plus::after{ transform:rotate(90deg); opacity:0; }
.accordion-panel{ max-height:0; overflow:hidden; transition:max-height var(--dur-med) var(--ease-in-out); background:var(--surface); }
.accordion-item.is-open .accordion-panel{ background:var(--surface-2); }
.accordion-panel-inner{
  padding:0 22px 22px 72px; color:var(--text-muted); max-width:70ch; line-height:1.75; font-size:.94rem;
  opacity:0; transform:translateY(-6px); transition:opacity var(--dur-med) var(--ease-out) .05s, transform var(--dur-med) var(--ease-out) .05s;
}
.accordion-item.is-open .accordion-panel-inner{ opacity:1; transform:translateY(0); }
@media (max-width:560px){
  .accordion-trigger{ font-size:.96rem; padding:16px; gap:12px; }
  .accordion-trigger::before{ width:28px; height:28px; font-size:.82rem; }
  .accordion-panel-inner{ padding-left:56px; padding-right:16px; padding-bottom:18px; }
}

/* ---------- Testimonial ---------- */
.testimonial-card{ padding:var(--sp-lg); }
.testimonial-card .quote{ font-family:var(--font-display); font-size:1.3rem; font-weight:500; line-height:1.5; color:var(--text); margin-bottom:var(--sp-md); }
.testimonial-person{ display:flex; align-items:center; gap:12px; }
.testimonial-person img{ width:46px; height:46px; border-radius:50%; object-fit:cover; }
.testimonial-person .name{ font-weight:600; color:var(--text); font-size:.92rem; }
.testimonial-person .role{ font-size:.8rem; color:var(--text-faint); }
.stars{ display:flex; gap:3px; margin-bottom:var(--sp-sm); color:var(--accent); }
.stars svg{ width:14px; height:14px; }

/* ---------- Loader — logo only, premium pulse + shimmer ---------- */
.page-loader{
  position:fixed; inset:0; z-index:9999; background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .6s var(--ease-out), visibility .6s, transform .7s var(--ease-in-out);
}
.page-loader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; transform:scale(1.05); }
.loader-logo{
  position:relative; display:flex; align-items:center; justify-content:center;
  padding:10px;
  opacity:0; transform:scale(.88);
  animation:loader-in .5s var(--ease-out) forwards;
}
.loader-logo img{
  display:block; height:42px; width:auto;
  animation:loader-glow 2s ease-in-out .5s infinite;
}
@keyframes loader-in{ from{ opacity:0; transform:scale(.88); } to{ opacity:1; transform:scale(1); } }
@keyframes loader-glow{
  0%,100%{ filter:drop-shadow(0 0 2px rgba(0,255,136,.15)); }
  50%{ filter:drop-shadow(0 0 20px rgba(0,255,136,.75)); }
}
@media (prefers-reduced-motion: reduce){
  .loader-logo img{ animation:none; filter:drop-shadow(0 0 12px rgba(0,255,136,.4)); }
}

/* ---------- Scroll progress ---------- */
.scroll-progress{ position:fixed; top:0; left:0; height:2px; background:var(--grad-accent); width:0%; z-index:300; box-shadow:0 0 12px var(--accent-glow); }

/* ---------- Cursor ---------- */
.cursor-dot, .cursor-ring{ position:fixed; top:0; left:0; pointer-events:none; z-index:9998; border-radius:50%; transform:translate(-50%,-50%); }
.cursor-dot{ width:6px; height:6px; background:var(--accent); }
.cursor-ring{ width:34px; height:34px; border:1px solid var(--border-strong); transition:width .2s,height .2s,border-color .2s,background .2s; }
.cursor-ring.is-active{ width:60px; height:60px; border-color:var(--accent); background:var(--accent-glow-soft); }
@media (hover:none), (max-width:960px){ .cursor-dot,.cursor-ring{ display:none; } }

/* ---------- Back to top ---------- */
.back-to-top{
  position:fixed; right:28px; bottom:28px; width:50px; height:50px; border-radius:50%;
  background:var(--surface); border:1px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center; z-index:150;
  opacity:0; transform:translateY(12px); pointer-events:none;
  transition:all var(--dur-fast) var(--ease-out);
}
.back-to-top.is-visible{ opacity:1; transform:translateY(0); pointer-events:auto; }
.back-to-top:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-4px); }

/* ---------- Floating WhatsApp — vibrant, animated, always visible ---------- */
.float-whatsapp{
  position:fixed; left:24px; bottom:24px; width:58px; height:58px; border-radius:50%;
  background:var(--grad-accent); display:flex; align-items:center; justify-content:center;
  z-index:150; color:var(--accent-ink); box-shadow:0 10px 34px -4px var(--accent-glow), 0 0 0 1px rgba(255,255,255,.06);
  animation:float-y 3.4s ease-in-out infinite;
}
.float-whatsapp::before, .float-whatsapp::after{
  /* pulsing highlight ring — draws the eye and reads as a deliberate
     floating layer, so it never blends into whatever scrolls behind it */
  content:''; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--accent); z-index:-1;
  animation:wa-ping 2.4s ease-out infinite;
}
.float-whatsapp::after{ animation-delay:1.2s; }
@keyframes wa-ping{
  0%{ transform:scale(1); opacity:.65; }
  100%{ transform:scale(1.9); opacity:0; }
}
.float-whatsapp svg{ width:27px; height:27px; }
@keyframes float-y{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }
@media (max-width:960px){
  .float-whatsapp{ width:52px; height:52px; left:18px; bottom:18px; }
  .float-whatsapp svg{ width:24px; height:24px; }
  .back-to-top{ width:44px; height:44px; right:16px; bottom:16px; }
}
@media (prefers-reduced-motion: reduce){
  .float-whatsapp, .float-whatsapp::before, .float-whatsapp::after{ animation:none; }
}

/* ---------- Breadcrumb ---------- */
.breadcrumb{ display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--text-faint); font-family:var(--font-mono); flex-wrap:wrap; }
.breadcrumb a{ color:var(--text-faint); transition:color var(--dur-fast); }
.breadcrumb a:hover{ color:var(--accent); }
.breadcrumb .sep{ opacity:.5; }
.breadcrumb .current{ color:var(--text-muted); }

/* ---------- Table of process / timeline ---------- */
.process-row{ display:grid; grid-template-columns:80px 1fr; gap:var(--sp-lg); padding-block:var(--sp-lg); border-top:1px solid var(--border); }
.process-row:last-child{ border-bottom:1px solid var(--border); }
.process-num{ font-family:var(--font-mono); font-size:1.6rem; color:var(--accent); }

.timeline{ position:relative; padding-left:36px; }
.timeline::before{ content:''; position:absolute; left:7px; top:6px; bottom:6px; width:1px; background:var(--border-strong); }
.timeline-item{ position:relative; padding-bottom:var(--sp-xl); }
.timeline-item::before{ content:''; position:absolute; left:-36px; top:4px; width:15px; height:15px; border-radius:50%; background:var(--bg); border:2px solid var(--accent); box-shadow:0 0 10px var(--accent-glow); }
.timeline-year{ font-family:var(--font-mono); color:var(--accent); font-size:.85rem; margin-bottom:6px; display:block; }

/* ---------- Blog card ---------- */
.article-card{ display:flex; flex-direction:column; }
.article-card .thumb{ border-radius:var(--r-md); overflow:hidden; aspect-ratio:16/10; margin-bottom:var(--sp-sm); position:relative; }
.article-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform var(--dur-slow) var(--ease-out); }
.article-card:hover .thumb img{ transform:scale(1.07); }
.article-meta{ display:flex; align-items:center; gap:10px; font-size:.78rem; color:var(--text-faint); font-family:var(--font-mono); margin-bottom:8px; flex-wrap:wrap; }
.article-card h3{ font-size:1.25rem; margin-bottom:8px; }
.article-card .excerpt{ font-size:.92rem; }

/* ---------- Service card (matches article-card presentation) ---------- */
.service-card{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; transition:transform var(--dur-med) var(--ease-out), border-color var(--dur-med); }
.service-card:hover{ transform:translateY(-6px); border-color:var(--border-strong); }
.service-card .thumb{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.service-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform var(--dur-slow) var(--ease-out); }
.service-card:hover .thumb img{ transform:scale(1.08); }
.service-card .thumb::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(8,8,8,.75) 100%); }
.service-card .num-badge{
  position:absolute; top:14px; left:14px; z-index:1;
  font-family:var(--font-mono); font-size:.72rem; color:var(--text);
  background:rgba(8,8,8,.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--border-strong); border-radius:var(--r-full); padding:5px 12px;
}
.service-card .card-icon-float{
  position:absolute; bottom:-20px; right:16px; z-index:1;
  width:44px; height:44px; border-radius:12px;
  background:var(--grad-accent); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px -8px var(--accent-glow);
  transition:transform var(--dur-med) var(--ease-out);
}
.service-card .card-icon-float svg{ width:20px; height:20px; }
.service-card:hover .card-icon-float{ transform:rotate(-8deg) scale(1.08); }
.service-card-body{ padding:26px 22px 22px; flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; }
.service-card .tag{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; display:block; }
.service-card h3{ font-size:1.18rem; margin-bottom:8px; line-height:1.3; }
.service-card .excerpt{ font-size:.9rem; color:var(--text-muted); line-height:1.6; flex:1; max-width:32ch; }
.service-card .card-cta{ display:flex; align-items:center; gap:6px; margin-top:16px; font-size:.85rem; font-weight:600; color:var(--text); transition:gap var(--dur-fast) var(--ease-out); }
.service-card .card-cta svg{ width:15px; height:15px; transition:transform var(--dur-fast) var(--ease-out); }
.service-card:hover .card-cta{ color:var(--accent); gap:10px; }
.service-card:hover .card-cta svg{ transform:translateX(2px); }
.share-row{ display:flex; gap:8px; margin-top:auto; padding-top:var(--sp-sm); }
.share-row a{ width:32px; height:32px; border:1px solid var(--border-strong); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.share-row svg{ width:13px; height:13px; }

/* ---------- Utility page blocks ---------- */
.prose{ max-width:74ch; }
.prose h2{ font-size:var(--fs-6xl); margin-top:var(--sp-xl); }
.prose h3{ font-size:1.35rem; margin-top:var(--sp-lg); }
.prose p{ font-size:1.02rem; line-height:1.8; }
.prose ul{ margin:var(--sp-sm) 0 var(--sp-md); }
.prose li{ position:relative; padding-left:26px; margin-bottom:10px; color:var(--text-muted); line-height:1.7; }
.prose li::before{ content:''; position:absolute; left:0; top:9px; width:8px; height:8px; border-radius:2px; background:var(--accent); }

/* ---------- 404 ---------- */
.error-page{ min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; flex-direction:column; padding-top:var(--header-h); }
.error-code{ font-family:var(--font-display); font-size:clamp(6rem,18vw,12rem); line-height:.9; background:var(--grad-accent); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ==========================================================================
   REAL LOGO — white wordmark, sits directly on our dark header/footer
   ========================================================================== */
.logo-img{ display:block; height:32px; width:auto; transition:opacity var(--dur-fast) var(--ease-out); }
.logo:hover .logo-img{ opacity:.85; }
.site-footer .logo-img{ height:34px; }

/* ==========================================================================
   FOUNDER PORTRAIT — hero-scale photo treatment: rounded blob backdrop,
   bottom gradient fade into the page background, floating glass stat chips
   ========================================================================== */
.founder-hero{ position:relative; height:520px; }
.founder-hero .blob-backdrop{
  position:absolute; inset:0;
  background:var(--grad-accent);
  border-radius:38% 62% 61% 39% / 45% 42% 58% 55%;
  opacity:.16;
  filter:blur(2px);
  animation:blobmorph 12s var(--ease-in-out) infinite alternate;
}
@keyframes blobmorph{
  0%{ border-radius:38% 62% 61% 39% / 45% 42% 58% 55%; }
  100%{ border-radius:58% 42% 40% 60% / 55% 60% 40% 45%; }
}
.founder-hero .photo-frame{
  position:absolute; inset:28px 40px 0 40px;
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  border:1px solid var(--border-strong);
  transition:transform .25s var(--ease-out), box-shadow 1.8s ease-in-out;
  animation:frame-glow 4.5s ease-in-out infinite;
  will-change:transform;
}
@keyframes frame-glow{
  0%,100%{ box-shadow:var(--shadow-lg), 0 0 0 0 var(--accent-glow-soft); }
  50%{ box-shadow:var(--shadow-lg), 0 0 40px 6px var(--accent-glow-soft); }
}
.founder-hero .photo-frame img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  display:block;
  animation:ken-burns 14s ease-in-out infinite alternate;
}
@keyframes ken-burns{
  0%{ transform:scale(1) translate(0,0); }
  100%{ transform:scale(1.08) translate(-1%, -1%); }
}
.founder-hero .photo-frame::after{
  /* bottom fade so the photo blends into the section below */
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,8,8,0) 55%, rgba(8,8,8,.85) 100%);
  pointer-events:none;
}
.founder-hero .photo-frame::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(135deg, rgba(0,255,136,.10), transparent 45%);
  pointer-events:none;
}
.founder-hero .photo-frame .shine-sweep{
  position:absolute; top:0; bottom:0; left:0; width:40%; z-index:2;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.16), rgba(0,255,136,.22), transparent);
  transform:translateX(-220%) skewX(-12deg);
  animation:shine-sweep 5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes shine-sweep{
  0%, 40%{ transform:translateX(-220%) skewX(-12deg); }
  60%, 100%{ transform:translateX(320%) skewX(-12deg); }
}
@media (prefers-reduced-motion: reduce){
  .founder-hero .photo-frame{ animation:none; }
  .founder-hero .photo-frame img{ animation:none; }
  .founder-hero .photo-frame .shine-sweep{ animation:none; display:none; }
}
.founder-hero .float-chip{
  position:absolute; z-index:3;
  display:flex; flex-direction:column; gap:2px;
  padding:.7rem .95rem;
  border-radius:var(--r-sm);
  animation:chipfloat 5s var(--ease-in-out) infinite;
}
.founder-hero .float-chip .n{ font-family:var(--font-mono); color:var(--accent); font-size:1.05rem; }
.founder-hero .float-chip .l{ font-size:.66rem; color:var(--text-muted); white-space:nowrap; }
@keyframes chipfloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
.founder-hero .founder-tag{
  position:absolute; left:56px; bottom:20px; z-index:3;
  display:flex; align-items:center; gap:10px;
  padding:.55rem .9rem .55rem .55rem;
  border-radius:var(--r-full);
}
.founder-hero .founder-tag .avatar-sm{
  width:38px; height:38px; border-radius:50%; overflow:hidden; flex-shrink:0;
  border:2px solid var(--accent);
}
.founder-hero .founder-tag .avatar-sm img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
.founder-hero .founder-tag .name{ font-size:.86rem; font-weight:600; color:var(--text); line-height:1.2; }
.founder-hero .founder-tag .role{ font-size:.7rem; color:var(--text-muted); line-height:1.2; }

/* ---------- Site-wide fix: inline asymmetric two-column layout grids
   (about/hero/service split sections) can't respond to media queries via
   inline style alone, so every such split stacks to one column below
   tablet width. Card grids (.g2/.g3/.g4) already handle their own
   responsive collapse and are excluded here. ---------- */
@media (max-width: 860px){
  .grid:not(.g2):not(.g3):not(.g4){ grid-template-columns:1fr !important; }
  .founder-hero{ height:420px; max-width:420px; margin-inline:auto; width:100%; }
  .founder-hero .photo-frame{ inset:20px 16px 0 16px; }
  .founder-hero .founder-tag{ left:32px; }
  .founder-hero .float-chip{ left:4% !important; right:4% !important; }
}
@media (max-width: 480px){
  .founder-hero{ height:380px; }
  .founder-hero .float-chip{ padding:.5rem .7rem; }
  .founder-hero .float-chip .n{ font-size:.92rem; }
  .founder-hero .float-chip .l{ font-size:.6rem; }
}

/* ==========================================================================
   FOUNDER NOTE BAND — smaller creative reuse of the founder photo, framed
   as a duotone medallion beside a pull-quote
   ========================================================================== */
.founder-medallion{
  position:relative; width:220px; height:220px; border-radius:50%;
  overflow:hidden; margin-inline:auto;
  border:1px solid var(--border-strong);
  box-shadow:0 20px 50px -12px rgba(0,255,136,.25);
}
.founder-medallion img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  filter:grayscale(.25) contrast(1.05);
}
.founder-medallion::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(120% 120% at 30% 20%, rgba(0,255,136,.18), transparent 60%);
  mix-blend-mode:screen;
}
.founder-medallion .ring{
  position:absolute; inset:-10px; border-radius:50%;
  border:1px dashed var(--border-strong);
  animation:spin-slow 30s linear infinite;
}
@keyframes spin-slow{ to{ transform:rotate(360deg); } }

/* ==========================================================================
   TABBED FEATURE SWITCHER — interactive service showcase
   ========================================================================== */
.svc-tabs{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:2rem; }
.svc-tab-btn{
  font-family:var(--font-body); font-size:.9rem; font-weight:600;
  padding:.75rem 1.3rem; border-radius:var(--r-full);
  border:1px solid var(--border-strong); background:transparent; color:var(--text-muted);
  cursor:pointer; transition:all var(--dur-fast) var(--ease-out);
  white-space:nowrap;
}
.svc-tab-btn:hover{ color:var(--text); border-color:var(--accent); }
.svc-tab-btn.is-active{ background:var(--grad-accent); color:var(--accent-ink); border-color:transparent; }
.svc-tab-panel{ display:none; }
.svc-tab-panel.is-active{ display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:center; animation:tabfade .5s var(--ease-out); }
@keyframes tabfade{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
.svc-tab-panel .check-list{ list-style:none; margin:1.2rem 0 1.6rem; padding:0; }
.svc-tab-panel .check-list li{ display:flex; align-items:flex-start; gap:10px; margin-bottom:.7rem; font-size:.94rem; color:var(--text-muted); }
.svc-tab-panel .check-list li svg{ flex-shrink:0; width:18px; height:18px; color:var(--accent); margin-top:2px; }
@media (max-width: 860px){
  .svc-tab-panel.is-active{ grid-template-columns:1fr; }
}

/* ==========================================================================
   BOOKING MODAL — "Book a Call" popup form
   ========================================================================== */
.modal-overlay{
  position:fixed; inset:0; z-index:10000;
  background:rgba(5,6,5,.72);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; visibility:hidden;
  transition:opacity .35s var(--ease-out), visibility .35s;
}
.modal-overlay.is-open{ opacity:1; visibility:visible; }
.modal-box{
  position:relative; width:100%; max-width:660px; max-height:88vh; overflow-y:auto;
  background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--r-lg);
  padding:2.4rem; box-shadow:var(--shadow-lg);
  transform:translateY(28px) scale(.97); opacity:0;
  transition:transform .4s var(--ease-out), opacity .4s var(--ease-out);
}
.modal-overlay.is-open .modal-box{ transform:translateY(0) scale(1); opacity:1; }
.modal-box::-webkit-scrollbar{ width:8px; }
.modal-box::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:4px; }
.modal-close{
  position:absolute; top:20px; right:20px; width:38px; height:38px; border-radius:50%;
  background:var(--surface-2); border:1px solid var(--border-strong); color:var(--text-muted);
  display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2;
  transition:all var(--dur-fast) var(--ease-out);
}
.modal-close svg{ width:16px; height:16px; }
.modal-close:hover{ border-color:var(--accent); color:var(--accent); transform:rotate(90deg); }
.modal-header{ margin-bottom:1.6rem; padding-right:2.2rem; }
.modal-header h3{ font-size:1.55rem; margin:.4rem 0 .5rem; }
.modal-header p{ color:var(--text-muted); font-size:.92rem; margin:0; line-height:1.6; }
.modal-form .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 1rem; }
.modal-form .form-field.full{ grid-column:1 / -1; }
.modal-form .phone-row{ display:flex; gap:8px; }
.modal-form .phone-row select{ flex:0 0 118px; padding-inline:10px; }
.modal-form .phone-row input{ flex:1; }
.modal-form .optional-tag{ font-size:.72rem; color:var(--text-faint); font-weight:400; text-transform:none; }
@media (max-width:640px){
  .modal-form .form-grid{ grid-template-columns:1fr; }
  .modal-box{ padding:1.6rem; max-height:92vh; }
  .modal-header{ padding-right:1.6rem; }
}

/* ==========================================================================
   HOMEPAGE SERVICES PREVIEW — centered, editorial card presentation
   ========================================================================== */
#services .card{ text-align:center; }
#services .card-icon{ margin-inline:auto; }

/* ==========================================================================
   ICON-LED CARDS SITE-WIDE — centered, editorial presentation
   Any card whose first element is the icon badge (Benefits, Industries,
   Why-Choose-Us, contact info cards, etc.) gets consistent centering.
   Cards that lead with something else (forms, lists, testimonials) are
   untouched since they aren't matched by this selector.
   ========================================================================== */
.card:has(> .card-icon){ text-align:center; }
.card:has(> .card-icon) .card-icon{ margin-inline:auto; }

/* ==========================================================================
   SERVICE HERO ILLUSTRATION — original on-brand SVG scenes (no stock photos)
   ========================================================================== */
.hero-illustration{
  padding:0; overflow:hidden; aspect-ratio:5/4;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface);
}
.hero-illustration img{ width:100%; height:100%; object-fit:contain; display:block; }

/* ==========================================================================
   OVERVIEW & WHAT'S INCLUDED — fully centered content (per explicit request)
   Scoped to these two specific sections only; other .prose blocks (legal
   pages, About) keep normal left-aligned reading text.
   ========================================================================== */
#overview .container, #features .container{ text-align:center; }
#overview p, #features p{ margin-inline:auto; }
#overview ul, #features ul{
  list-style:none; padding:0; margin-inline:auto; display:inline-block; text-align:left;
  max-width:56ch;
}

/* ==========================================================================
   TEAM SECTION
   ========================================================================== */
.team-grid{ gap:1.75rem; }
.team-card{ text-align:center; }
.team-photo{
  position:relative; width:100%; aspect-ratio:1/1; max-width:230px;
  margin:0 auto 1.1rem; border-radius:var(--r-lg); overflow:hidden;
  background:var(--surface-2); border:1px solid var(--border-strong);
  transition:transform var(--dur-med) var(--ease-out), border-color var(--dur-med);
}
.team-photo img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  filter:grayscale(.35) contrast(1.03);
  transition:filter var(--dur-med) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.team-card:hover .team-photo{ transform:translateY(-6px); border-color:var(--accent); }
.team-card:hover .team-photo img{ filter:grayscale(0) contrast(1.05); transform:scale(1.06); }
/* Accent wash that fades out on hover, so the photo "comes alive" */
.team-glow{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(160deg, rgba(0,255,136,.22), transparent 55%);
  opacity:1; transition:opacity var(--dur-med) var(--ease-out);
}
.team-card:hover .team-glow{ opacity:0; }
/* Placeholder tile for a team member whose photo isn't in yet */
.team-photo-empty{
  display:flex; align-items:center; justify-content:center;
  border-style:dashed;
  background:linear-gradient(150deg, var(--surface-2), var(--surface));
}
.team-initials{
  font-family:var(--font-display); font-size:3.2rem; font-weight:600;
  background:var(--grad-accent); -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:.85;
}
.team-card h3{ font-size:1.1rem; margin-bottom:.25rem; }
.team-role{ font-size:.85rem; color:var(--text-muted); font-family:var(--font-mono); }
@media (max-width:600px){
  .team-photo{ max-width:190px; }
}

/* ==========================================================================
   HOMEPAGE SERVICE TILES — premium animated cards
   ========================================================================== */
.svc-preview-grid{ gap:1.25rem; }
.svc-tile{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  padding:1.75rem 1.6rem 1.5rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  text-align:left;
  transition:transform var(--dur-med) var(--ease-out),
             border-color var(--dur-med) var(--ease-out),
             box-shadow var(--dur-med) var(--ease-out),
             background var(--dur-med) var(--ease-out);
}
.svc-tile:hover{
  transform:translateY(-8px);
  border-color:var(--accent);
  background:var(--surface-2);
  box-shadow:0 26px 50px -26px rgba(0,255,136,.45);
}
/* Diagonal light sweep that runs across the tile on hover */
.svc-tile-sheen{
  position:absolute; top:0; bottom:0; left:0; width:45%;
  background:linear-gradient(100deg, transparent, rgba(0,255,136,.10), transparent);
  transform:translateX(-160%) skewX(-14deg);
  transition:transform .75s var(--ease-out);
  pointer-events:none;
}
.svc-tile:hover .svc-tile-sheen{ transform:translateX(320%) skewX(-14deg); }

.svc-tile-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.1rem; }
.svc-tile-icon{
  width:46px; height:46px; border-radius:13px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); border:1px solid var(--border-strong); color:var(--accent);
  transition:background var(--dur-med) var(--ease-out), color var(--dur-med),
             transform var(--dur-med) var(--ease-out), border-color var(--dur-med);
}
.svc-tile-icon svg{ width:21px; height:21px; }
.svc-tile:hover .svc-tile-icon{
  background:var(--grad-accent); color:var(--accent-ink);
  border-color:transparent; transform:rotate(-8deg) scale(1.08);
}
.svc-tile-num{
  font-family:var(--font-mono); font-size:1.5rem; font-weight:500;
  color:var(--border-strong);
  transition:color var(--dur-med) var(--ease-out);
}
.svc-tile:hover .svc-tile-num{ color:var(--accent); }

.svc-tile-tag{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent); display:block; margin-bottom:.5rem;
}
.svc-tile h3{ font-size:1.15rem; line-height:1.3; margin-bottom:.5rem; }
.svc-tile p{ font-size:.89rem; color:var(--text-muted); line-height:1.6; flex:1; margin-bottom:1.1rem; }

.svc-tile-cta{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.84rem; font-weight:600; color:var(--text-muted);
  transition:color var(--dur-fast) var(--ease-out), gap var(--dur-fast) var(--ease-out);
}
.svc-tile-cta svg{ width:15px; height:15px; transition:transform var(--dur-fast) var(--ease-out); }
.svc-tile:hover .svc-tile-cta{ color:var(--accent); gap:12px; }
.svc-tile:hover .svc-tile-cta svg{ transform:translateX(3px); }

/* The generic centring rule for icon cards shouldn't apply to these tiles */
#services .svc-tile{ text-align:left; }

/* ==========================================================================
   FIX: .prose max-width was constraining whole SECTIONS (not just text),
   so the section background band only spanned ~845px and sat pinned left.
   The section must stay full-bleed; the reading width belongs on the inner
   container instead.
   ========================================================================== */
section.prose{ max-width:none; }
section.prose > .container{ max-width:900px; margin-inline:auto; }

/* --------------------------------------------------------------------------
   SERVICE PAGES — centre every text block (explicit request)
   -------------------------------------------------------------------------- */
#overview .container,
#features .container{ text-align:center; }
#overview p, #features p{ margin-inline:auto; }

/* Centred bullet list: markers sit above-left of each centred line, so the
   list reads as a centred column rather than a ragged left edge. */
#features ul, #overview ul{
  list-style:none; padding:0; margin:1.4rem auto 1.6rem;
  max-width:640px; display:block; text-align:center;
}
#features ul li, #overview ul li{
  padding:0 0 0 0; margin-bottom:.95rem; text-align:center;
}
#features ul li::before, #overview ul li::before{
  position:static; display:inline-block; margin-right:10px;
  vertical-align:middle; top:auto; left:auto;
}

/* Process rows, industries, FAQ and related-service headings centre too */
.process-row{ max-width:760px; margin-inline:auto; }
.accordion{ text-align:left; }   /* keep Q&A readable */

/* --------------------------------------------------------------------------
   MOBILE HERO FIX — floating stat chips were overlapping the founder's face.
   Below tablet the portrait becomes a normal block and the chips flow into a
   row underneath it instead of sitting on top of the photo.
   -------------------------------------------------------------------------- */
@media (max-width:860px){
  .founder-hero{
    height:auto; display:flex; flex-wrap:wrap; gap:.6rem;
    max-width:460px; margin-inline:auto; position:relative;
  }
  .founder-hero .photo-frame{
    position:relative; inset:auto; width:100%;
    aspect-ratio:4/5; order:1; margin-bottom:.4rem;
  }
  .founder-hero .float-chip{
    position:static !important; order:2;
    flex:1 1 30%; min-width:0; animation:none;
    padding:.6rem .5rem; text-align:center; align-items:center;
  }
  .founder-hero .float-chip .n{ font-size:1rem; }
  .founder-hero .float-chip .l{ font-size:.62rem; white-space:normal; }
  .founder-hero .founder-tag{
    position:static !important; order:3; width:100%;
    justify-content:center; margin-top:.2rem;
  }
  .founder-hero .blob-backdrop{ inset:-6% -4% 12% -4%; }
}