:root{
  --ink:#211A29;
  --ink-2:#17121e;
  --ink-3:#2b2334;
  --gray:#60605F;
  --lime:#B8EE2B;
  --lime-2:#C7F64A;
  --white:#FFFFFF;
  --soft:#F4F4F1;
  --line:rgba(33,26,41,.12);
  --radius:26px;
  --shadow:0 28px 90px rgba(21,16,28,.12);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Manrope",system-ui,sans-serif;
  color:var(--ink);
  background:var(--white);
  overflow-x:hidden;
  cursor:none;
}
a,button{cursor:none}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{font:inherit}
.container{width:min(1180px,calc(100% - 48px));margin:auto}
.section{padding:110px 0}
.section-soft{background:var(--soft)}
em{font-style:normal;color:var(--lime)}

/* Loader */
.loader{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  background:var(--ink);
  transition:opacity .7s ease,visibility .7s ease;
}
.loader.is-hidden{opacity:0;visibility:hidden}
.loader__brand{display:grid;justify-items:center;gap:30px}
.loader__logo{width:250px;filter:brightness(0) invert(1);opacity:.88}
.loader__squares{display:flex;gap:8px}
.loader__squares span{
  width:12px;height:12px;background:var(--lime);
  border-radius:2px;
  animation:squarePulse 1s ease-in-out infinite;
}
.loader__squares span:nth-child(2){animation-delay:.12s}
.loader__squares span:nth-child(3){animation-delay:.24s}
.loader__squares span:nth-child(4){animation-delay:.36s}
@keyframes squarePulse{
  0%,100%{transform:translateY(0) rotate(0);opacity:.35}
  50%{transform:translateY(-10px) rotate(45deg);opacity:1}
}

/* Cursor */
.cursor,.cursor-follower{
  position:fixed;
  top:0;left:0;
  pointer-events:none;
  z-index:10000;
  transform:translate(-50%,-50%);
}
.cursor{
  width:8px;height:8px;border-radius:50%;
  background:var(--lime);
  box-shadow:0 0 18px rgba(184,238,43,.85);
}
.cursor-follower{
  width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(184,238,43,.65);
  transition:width .2s ease,height .2s ease,background .2s ease;
}
body.cursor-hover .cursor-follower{
  width:52px;height:52px;
  background:rgba(184,238,43,.08);
}

/* Header */
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:1000;
  padding:18px 0;
  transition:.35s ease;
}
.site-header.is-scrolled{
  background:rgba(33,26,41,.82);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:10px 0;
}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:30px}
.brand img{width:190px;filter:brightness(0) invert(1)}
.nav{display:flex;gap:30px;color:#fff;font-size:14px}
.nav a{opacity:.78;transition:.25s}
.nav a:hover{opacity:1;color:var(--lime)}
.nav-cta{white-space:nowrap}
.menu-toggle{display:none;background:none;border:0}
.menu-toggle span{display:block;width:26px;height:2px;background:#fff;margin:6px}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:52px;padding:0 24px;border-radius:999px;
  border:1px solid transparent;font-weight:700;font-size:14px;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease;
}
.btn--small{min-height:44px;padding:0 20px}
.btn--lime{
  background:var(--lime);
  color:var(--ink);
  box-shadow:0 12px 30px rgba(184,238,43,.18);
}
.btn--lime:hover{box-shadow:0 18px 40px rgba(184,238,43,.28)}
.btn--ghost{
  border-color:rgba(255,255,255,.25);
  color:#fff;background:rgba(255,255,255,.02);
}
.btn--ghost:hover{background:rgba(255,255,255,.07)}

/* Hero */
.hero{
  position:relative;
  min-height:100vh;
  background:
    radial-gradient(circle at 80% 15%, rgba(184,238,43,.08), transparent 24%),
    linear-gradient(135deg,#17121e 0%,#211A29 55%,#2a2033 100%);
  color:#fff;
  padding:150px 0 0;
  overflow:hidden;
}
.hero__grid{
  min-height:700px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:70px;
}
.hero__copy h1{
  margin:20px 0 24px;
  font-size:clamp(56px,7vw,96px);
  line-height:.98;
  letter-spacing:-.055em;
}
.hero__copy h1 span{color:var(--lime)}
.hero__copy>p{
  max-width:620px;
  color:rgba(255,255,255,.72);
  font-size:18px;line-height:1.7;
}
.eyebrow,.overline{
  font-size:12px;font-weight:700;letter-spacing:.2em;
}
.eyebrow{display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.72)}
.eyebrow__line{width:34px;height:2px;background:var(--lime)}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap;margin:34px 0 50px}
.hero__mini{display:flex;gap:34px}
.hero__mini div{display:grid;gap:4px}
.hero__mini strong{font-size:12px;color:var(--lime)}
.hero__mini span{font-size:13px;color:rgba(255,255,255,.55)}

.hero__visual{position:relative}
.visual-card{
  position:relative;
  min-height:520px;
  padding:34px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:34px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02)),
    radial-gradient(circle at 80% 0%,rgba(184,238,43,.14),transparent 35%);
  backdrop-filter:blur(18px);
  box-shadow:0 40px 120px rgba(0,0,0,.28);
  overflow:hidden;
}
.visual-card:before{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(120deg,transparent 0 52%,rgba(255,255,255,.035) 52% 54%,transparent 54%),
    linear-gradient(30deg,transparent 0 70%,rgba(184,238,43,.06) 70%);
}
.visual-card__corner{
  position:absolute;right:-40px;top:-40px;width:190px;height:190px;
  background:var(--lime);opacity:.9;border-radius:0 0 0 60px;
  transform:rotate(8deg);
}
.visual-card__top{
  position:relative;z-index:2;display:flex;align-items:center;gap:10px;
  font-size:10px;letter-spacing:.18em;color:rgba(255,255,255,.6)
}
.status-dot{width:8px;height:8px;background:var(--lime);border-radius:50%;box-shadow:0 0 12px var(--lime)}
.visual-card__center{position:relative;z-index:2;margin-top:150px}
.visual-kicker{font-size:12px;letter-spacing:.2em;color:rgba(255,255,255,.6)}
.visual-card__center strong{display:block;font-size:58px;letter-spacing:-.05em;margin-top:8px}
.visual-card__center p{max-width:320px;color:rgba(255,255,255,.64);line-height:1.6}
.visual-card__metrics{
  position:absolute;left:34px;right:34px;bottom:34px;z-index:2;
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px
}
.visual-card__metrics div{
  border-top:1px solid rgba(255,255,255,.16);
  padding-top:18px;display:grid;gap:6px
}
.visual-card__metrics span{font-size:26px;font-weight:800;color:var(--lime)}
.visual-card__metrics small{font-size:11px;color:rgba(255,255,255,.5)}
.floating-chip{
  position:absolute;z-index:3;
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;border-radius:999px;
  color:#fff;background:rgba(23,18,30,.82);
  border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(12px);font-size:12px;
  box-shadow:var(--shadow);
}
.floating-chip span{width:8px;height:8px;border-radius:50%;background:var(--lime)}
.floating-chip--1{right:-30px;top:70px;animation:floaty 5s ease-in-out infinite}
.floating-chip--2{left:-30px;bottom:90px;animation:floaty 6s ease-in-out infinite reverse}
@keyframes floaty{50%{transform:translateY(-12px)}}

.hero__ticker{
  border-top:1px solid rgba(255,255,255,.08);
  overflow:hidden;
  padding:22px 0;
}
.ticker-track{
  display:flex;align-items:center;gap:24px;width:max-content;
  animation:ticker 25s linear infinite;
  color:rgba(255,255,255,.48);font-size:11px;letter-spacing:.16em
}
.ticker-track i{width:6px;height:6px;background:var(--lime);border-radius:50%}
@keyframes ticker{to{transform:translateX(-50%)}}

/* Trust */
.trust{padding:30px 0}
.trust__grid{display:flex;align-items:center;justify-content:space-between;gap:30px}
.trust__grid p{font-size:12px;color:var(--gray);text-transform:uppercase;letter-spacing:.16em}
.trust__items{display:flex;gap:50px;flex-wrap:wrap;font-weight:700;color:#777}

/* Generic heading */
.section-heading{
  display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:end;margin-bottom:50px
}
.section-heading h2,.about__copy h2,.cta h2{
  margin:10px 0 0;font-size:clamp(42px,5vw,68px);line-height:1;letter-spacing:-.045em
}
.section-heading p{max-width:520px;color:var(--gray);line-height:1.7;margin:0}

/* Services */
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.service-card{
  position:relative;min-height:330px;padding:28px;border:1px solid var(--line);
  border-radius:24px;background:#fff;transition:.35s ease;overflow:hidden
}
.service-card:after{
  content:"";position:absolute;right:-40px;bottom:-50px;width:110px;height:110px;
  background:var(--lime);border-radius:24px;transform:rotate(25deg);opacity:0;transition:.35s ease
}
.service-card:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:transparent}
.service-card:hover:after{opacity:1}
.service-card__num{position:absolute;right:24px;top:24px;font-size:11px;color:#999}
.service-card__icon{
  width:46px;height:46px;border-radius:14px;background:var(--soft);
  display:grid;place-items:center;font-size:22px;margin-bottom:40px
}
.service-card h3{font-size:20px;margin:0 0 14px}
.service-card p{color:var(--gray);line-height:1.65;font-size:14px}
.service-card a{position:absolute;left:28px;bottom:28px;font-size:13px;font-weight:700}
.service-card a span{color:var(--lime)}

/* About */
.about{
  background:var(--ink);color:#fff;padding:0;overflow:hidden
}
.about__grid{display:grid;grid-template-columns:1fr 1fr;min-height:650px}
.about__visual{
  position:relative;
  background:
    radial-gradient(circle at 30% 30%,rgba(184,238,43,.15),transparent 28%),
    linear-gradient(145deg,#2d2535,#16111c);
  margin-left:calc((100vw - min(1180px,calc(100vw - 48px)))/-2);
  padding-left:calc((100vw - min(1180px,calc(100vw - 48px)))/2);
  display:flex;align-items:center
}
.about-panel{padding:70px;position:relative}
.about-panel__line{width:70px;height:3px;background:var(--lime);margin-bottom:30px}
.about-panel>span{font-size:12px;letter-spacing:.25em;color:rgba(255,255,255,.5)}
.about-panel strong{display:block;font-size:54px;line-height:1.06;margin-top:20px}
.about__copy{padding:90px 0 90px 70px;align-self:center}
.about__copy>p{color:rgba(255,255,255,.62);line-height:1.8;max-width:560px}
.about__features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.about__features div{border-top:1px solid rgba(255,255,255,.13);padding-top:18px}
.about__features b{display:block;color:var(--lime);font-size:12px;margin-bottom:8px}
.about__features span{font-size:13px;color:rgba(255,255,255,.7)}

/* Process */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
.process__item{padding:32px 28px 20px;border-right:1px solid var(--line)}
.process__item:last-child{border-right:0}
.process__item>span{color:var(--lime);font-weight:800}
.process__item h3{font-size:20px;margin:28px 0 10px}
.process__item p{color:var(--gray);font-size:14px;line-height:1.65}

/* Quote */
.quote-section{padding:120px 0;background:var(--soft)}
.quote-section__inner{max-width:900px}
.quote-mark{display:block;font-size:90px;line-height:.6;color:var(--lime)}
blockquote{margin:30px 0 0;font-size:clamp(40px,5vw,70px);line-height:1.05;letter-spacing:-.04em;font-weight:700}

/* CTA */
.cta{background:var(--ink);color:#fff;padding:100px 0}
.cta__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:center}
.cta__right p{color:rgba(255,255,255,.62);line-height:1.7;margin-bottom:26px}
.overline--light{color:rgba(255,255,255,.55)}

/* Footer */
.footer{padding:60px 0 24px}
.footer__grid{display:grid;grid-template-columns:1fr 1fr;gap:80px}
.footer__brand img{width:260px}
.footer__brand p{color:var(--gray)}
.footer__links{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.footer__links div{display:grid;gap:10px}
.footer__links b{margin-bottom:6px}
.footer__links a,.footer__links span{font-size:13px;color:var(--gray)}
.footer__bottom{
  display:flex;justify-content:space-between;gap:20px;
  margin-top:50px;padding-top:20px;border-top:1px solid var(--line);
  color:#999;font-size:11px
}

/* Reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .85s ease,transform .85s cubic-bezier(.2,.7,.2,1)}
.reveal.is-visible{opacity:1;transform:none}
.reveal--delay{transition-delay:.16s}

/* Responsive */
@media (max-width:980px){
  body{cursor:auto}
  a,button{cursor:pointer}
  .cursor,.cursor-follower{display:none}
  .nav,.nav-cta{display:none}
  .menu-toggle{display:block}
  .nav.is-open{
    display:flex;position:absolute;top:74px;left:24px;right:24px;
    flex-direction:column;padding:24px;border-radius:20px;
    background:rgba(33,26,41,.96);backdrop-filter:blur(18px)
  }
  .hero{padding-top:120px}
  .hero__grid{grid-template-columns:1fr;min-height:auto;padding-bottom:70px}
  .hero__visual{max-width:700px}
  .section-heading,.about__grid,.cta__grid,.footer__grid{grid-template-columns:1fr}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .about__visual{margin-left:0;padding-left:0;min-height:450px}
  .about__copy{padding:70px 0}
  .process{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .container{width:min(100% - 28px,1180px)}
  .section{padding:78px 0}
  .hero__copy h1{font-size:52px}
  .visual-card{min-height:470px;padding:24px}
  .visual-card__center{margin-top:120px}
  .visual-card__center strong{font-size:42px}
  .visual-card__metrics{left:24px;right:24px;bottom:24px}
  .floating-chip{display:none}
  .trust__grid{align-items:flex-start;flex-direction:column}
  .trust__items{gap:18px 28px}
  .services-grid{grid-template-columns:1fr}
  .about-panel{padding:50px 28px}
  .about-panel strong{font-size:42px}
  .about__features{grid-template-columns:1fr}
  .process{grid-template-columns:1fr}
  .process__item{border-right:0;border-bottom:1px solid var(--line)}
  .footer__links{grid-template-columns:1fr}
  .footer__bottom{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}


/* --- InterCont photo + dark-logo update --- */
:root{
  --header-dark:#181914;
}

.site-header{
  background:linear-gradient(180deg, rgba(24,25,20,.96) 0%, rgba(24,25,20,.72) 72%, rgba(24,25,20,0) 100%);
}
.site-header.is-scrolled{
  background:rgba(24,25,20,.92);
}
.brand{
  display:flex;
  align-items:center;
  overflow:hidden;
}
.brand img{
  width:220px;
  height:auto;
  filter:none !important;
  mix-blend-mode:normal;
}
.loader__logo{
  width:300px;
  filter:none !important;
}
.loader{
  background:#181914;
}

/* Because the supplied header logo includes its own dark background,
   this keeps the surrounding header visually seamless. */
.brand img,
.loader__logo{
  background:#181914;
}

.hero{
  background:
    radial-gradient(circle at 15% 10%,rgba(184,238,43,.08),transparent 25%),
    linear-gradient(135deg,#181914 0%,#211A29 60%,#181914 100%);
}

.hero-photo{
  position:relative;
  min-height:560px;
  border-radius:34px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 40px 120px rgba(0,0,0,.35);
  isolation:isolate;
}
.hero-photo img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.02);
  transition:transform 1.4s cubic-bezier(.2,.7,.2,1);
}
.hero-photo:hover img{transform:scale(1.07)}
.hero-photo__overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg,rgba(24,25,20,.12),rgba(24,25,20,.12) 35%,rgba(24,25,20,.92) 100%),
    linear-gradient(120deg,rgba(33,26,41,.38),transparent 60%);
}
.hero-photo:after{
  content:"";
  position:absolute;
  width:170px;
  height:170px;
  right:-45px;
  top:-45px;
  z-index:2;
  background:var(--lime);
  border-radius:0 0 0 60px;
  transform:rotate(8deg);
}
.hero-photo__label,
.hero-photo__statement,
.hero-photo__metrics{
  position:absolute;
  z-index:3;
}
.hero-photo__label{
  left:32px;
  top:30px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:10px;
  letter-spacing:.18em;
  color:rgba(255,255,255,.82);
}
.hero-photo__statement{
  left:32px;
  bottom:142px;
}
.hero-photo__statement span{
  display:block;
  font-size:11px;
  letter-spacing:.22em;
  color:rgba(255,255,255,.72);
  margin-bottom:8px;
}
.hero-photo__statement strong{
  display:block;
  font-size:48px;
  letter-spacing:-.045em;
}
.hero-photo__metrics{
  left:32px;
  right:32px;
  bottom:28px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.hero-photo__metrics div{
  padding-top:15px;
  border-top:1px solid rgba(255,255,255,.25);
}
.hero-photo__metrics b{
  display:block;
  color:var(--lime);
  font-size:24px;
}
.hero-photo__metrics small{
  display:block;
  margin-top:4px;
  color:rgba(255,255,255,.7);
  font-size:10px;
}

/* About with photo */
.about__visual--photo{
  position:relative;
  overflow:hidden;
  background:#181914;
}
.about__visual--photo>img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.about__shade{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(24,25,20,.82),rgba(33,26,41,.45));
}
.about__visual--photo .about-panel{
  z-index:2;
}

/* Editorial visual story */
.visual-story{
  padding:110px 0;
  background:#fff;
}
.visual-story__grid{
  display:grid;
  grid-template-columns:.78fr 1.22fr;
  grid-template-rows:auto 280px;
  gap:18px;
}
.visual-story__copy{
  padding:44px 28px 44px 0;
  align-self:center;
}
.visual-story__copy h2{
  margin:12px 0 22px;
  font-size:clamp(42px,4.8vw,66px);
  line-height:1;
  letter-spacing:-.045em;
}
.visual-story__copy p{
  color:var(--gray);
  line-height:1.75;
  max-width:470px;
}
.story-card{
  position:relative;
  min-height:280px;
  margin:0;
  border-radius:26px;
  overflow:hidden;
  background:#181914;
}
.story-card--large{
  grid-row:span 2;
}
.story-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 1s cubic-bezier(.2,.7,.2,1), filter .6s ease;
}
.story-card:hover img{
  transform:scale(1.045);
  filter:saturate(.82);
}
.story-card:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(24,25,20,.72));
  pointer-events:none;
}
.story-card figcaption{
  position:absolute;
  z-index:2;
  left:24px;
  right:24px;
  bottom:22px;
  display:flex;
  justify-content:space-between;
  color:#fff;
  font-size:11px;
  font-weight:700;
  letter-spacing:.15em;
}
.story-card figcaption span{color:var(--lime)}

@media (max-width:980px){
  .visual-story__grid{grid-template-columns:1fr;grid-template-rows:auto}
  .story-card--large{grid-row:auto;min-height:480px}
}
@media (max-width:640px){
  .brand img{width:170px}
  .loader__logo{width:250px}
  .hero-photo{min-height:500px}
  .hero-photo__statement strong{font-size:38px}
  .hero-photo__metrics{grid-template-columns:1fr 1fr 1fr}
  .story-card--large{min-height:360px}
}

/* =========================================================
   V3 — Transparent logo + subtle build-on-scroll animations
   ========================================================= */
.brand,.brand img,.loader__logo{background:transparent !important}
.brand img,.loader__logo{filter:none !important}

.stagger-group > *{
  opacity:0;
  transform:translateY(24px) scale(.985);
  transition:opacity .72s cubic-bezier(.2,.7,.2,1),transform .72s cubic-bezier(.2,.7,.2,1);
}
.stagger-group.is-visible > *{opacity:1;transform:none}
.stagger-group.is-visible > *:nth-child(2){transition-delay:.08s}
.stagger-group.is-visible > *:nth-child(3){transition-delay:.16s}
.stagger-group.is-visible > *:nth-child(4){transition-delay:.24s}
.stagger-group.is-visible > *:nth-child(5){transition-delay:.32s}

.section-heading.is-visible h2,
.about__copy.is-visible h2,
.cta .reveal.is-visible h2,
.visual-story__copy.is-visible h2{
  animation:titleSettle .9s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes titleSettle{
  from{opacity:0;transform:translateY(24px);letter-spacing:-.02em}
  to{opacity:1;transform:none;letter-spacing:-.045em}
}

.hero-photo img,.about__visual--photo > img,.story-card img{will-change:transform}

/* Sticky scroll story */
.scroll-story{
  position:relative;
  height:235vh;
  background:#181914;
  color:#fff;
}
.scroll-story__sticky{
  position:sticky;
  top:0;
  min-height:100vh;
  height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
}
.scroll-story__ambient{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 72% 48%,rgba(184,238,43,.12),transparent 22%),
    radial-gradient(circle at 20% 70%,rgba(89,68,106,.28),transparent 28%),
    linear-gradient(135deg,#181914,#211A29 62%,#181914);
  z-index:-3;
}
.scroll-story__ambient:after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.18;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);
}
.scroll-story__stage{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center;
  position:relative;
  z-index:2;
}
.scroll-story__copy{
  max-width:610px;
  transform:translateY(var(--story-copy-y,0px));
  opacity:var(--story-copy-opacity,1);
}
.scroll-story__title{
  margin:14px 0 24px;
  font-size:clamp(52px,6.6vw,94px);
  line-height:.95;
  letter-spacing:-.055em;
}
.scroll-story__text{
  color:rgba(255,255,255,.64);
  line-height:1.75;
  max-width:560px;
}
.scroll-story__facts{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:46px;
}
.scroll-fact{
  padding-top:17px;
  border-top:1px solid rgba(255,255,255,.15);
  opacity:var(--fact-opacity,0);
  transform:translateY(var(--fact-y,20px));
}
.scroll-fact span{display:block;color:var(--lime);font-size:11px;margin-bottom:11px}
.scroll-fact strong{display:block;font-size:15px;margin-bottom:7px}
.scroll-fact small{color:rgba(255,255,255,.48);line-height:1.45;font-size:10px}

.money-scene{
  position:relative;
  height:min(72vh,680px);
  min-height:520px;
  display:grid;
  place-items:center;
  perspective:1000px;
}
.coin-wrap{
  width:310px;
  height:310px;
  display:grid;
  place-items:center;
  transform:translate3d(var(--coin-x,0px),var(--coin-y,0px),0) scale(var(--coin-scale,.72)) rotate(var(--coin-tilt,0deg));
  opacity:var(--coin-opacity,.15);
  filter:drop-shadow(0 35px 50px rgba(0,0,0,.42));
}
.coin{
  position:relative;
  width:250px;
  aspect-ratio:1;
  border-radius:50%;
  transform-style:preserve-3d;
  transform:rotateX(66deg) rotateZ(var(--coin-spin,0deg));
}
.coin__face{
  position:absolute;
  inset:0;
  border-radius:50%;
  display:grid;
  place-items:center;
  align-content:center;
  background:radial-gradient(circle at 32% 28%,#e6ff83 0 8%,#c9f445 28%,#a9dc1d 62%,#79a900 100%);
  border:10px solid #d7fa60;
  box-shadow:inset 0 0 0 4px rgba(32,26,41,.24),inset 0 -22px 45px rgba(71,94,0,.32),0 0 55px rgba(184,238,43,.2);
}
.coin__face:before,.coin__face:after{
  content:"";
  position:absolute;
  border-radius:50%;
  inset:18px;
  border:2px dashed rgba(33,26,41,.26);
}
.coin__face:after{inset:34px;border-style:solid;border-width:1px}
.coin__face span{position:relative;z-index:2;color:#211A29;font-size:94px;line-height:.9;font-weight:800;letter-spacing:-.08em}
.coin__face i{position:relative;z-index:2;font-style:normal;font-size:9px;font-weight:800;letter-spacing:.24em;color:rgba(33,26,41,.66)}
.coin__edge{
  position:absolute;
  inset:8px -8px -16px 8px;
  border-radius:50%;
  background:#799d12;
  transform:translateZ(-10px);
}
.money-orbit{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(184,238,43,.2);
  opacity:var(--orbit-opacity,.1);
  transform:scale(var(--orbit-scale,.7));
}
.money-orbit--one{width:430px;height:430px}
.money-orbit--two{width:560px;height:560px;border-color:rgba(255,255,255,.08)}
.money-card{
  position:absolute;
  width:190px;
  padding:17px 18px;
  background:rgba(33,26,41,.72);
  border:1px solid rgba(255,255,255,.11);
  backdrop-filter:blur(16px);
  border-radius:18px;
  box-shadow:0 24px 70px rgba(0,0,0,.22);
  opacity:var(--money-card-opacity,0);
  transform:translateY(var(--money-card-y,24px)) scale(var(--money-card-scale,.95));
}
.money-card b{display:block;color:var(--lime);font-size:19px}
.money-card span{display:block;margin-top:4px;color:rgba(255,255,255,.55);font-size:11px}
.money-card--a{top:13%;left:0}
.money-card--b{right:-5%;bottom:17%}

.scroll-story__progress{
  position:absolute;
  left:50%;
  bottom:28px;
  transform:translateX(-50%);
  width:min(420px,60vw);
  height:2px;
  background:rgba(255,255,255,.09);
}
.scroll-story__progress span{
  display:block;
  width:var(--story-progress,0%);
  height:100%;
  background:var(--lime);
  box-shadow:0 0 16px rgba(184,238,43,.35);
}
.scroll-story__sticky:after{
  content:"SCROLL PARA CONTINUAR";
  position:absolute;
  right:28px;
  bottom:24px;
  font-size:9px;
  letter-spacing:.22em;
  color:rgba(255,255,255,.35);
  writing-mode:vertical-rl;
}

@media (hover:hover){
  .service-card:hover{transform:translateY(-9px) rotateX(1deg)}
  .story-card:hover figcaption span{transform:translate(3px,-3px)}
  .story-card figcaption span{transition:transform .3s ease}
}
@media (max-width:980px){
  .scroll-story{height:210vh}
  .scroll-story__stage{grid-template-columns:1fr;gap:20px}
  .scroll-story__copy{padding-top:72px}
  .scroll-story__facts{margin-top:28px}
  .money-scene{height:42vh;min-height:360px}
  .coin-wrap{width:230px;height:230px}
  .coin{width:190px}
  .coin__face span{font-size:72px}
  .money-orbit--one{width:300px;height:300px}
  .money-orbit--two{width:390px;height:390px}
}
@media (max-width:640px){
  .scroll-story{height:230vh}
  .scroll-story__title{font-size:49px}
  .scroll-story__facts{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .money-card{width:150px;padding:13px}
  .money-card--a{left:-5%}
  .money-card--b{right:-6%}
  .scroll-story__sticky:after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .stagger-group > *{opacity:1!important;transform:none!important}
  .coin-wrap,.money-card,.money-orbit,.scroll-story__copy,.scroll-fact{transform:none!important;opacity:1!important}
}

/* =========================================================
   V4 — Longer cinematic 3D coin sequence
   ========================================================= */
.scroll-story{
  height:330vh;
}

.money-scene{
  perspective:1400px;
  perspective-origin:50% 42%;
}

.coin-wrap{
  width:390px;
  height:390px;
  transform-style:preserve-3d;
  filter:
    drop-shadow(0 45px 65px rgba(0,0,0,.48))
    drop-shadow(0 0 38px rgba(184,238,43,.13));
}

.coin{
  width:300px;
  transform-style:preserve-3d;
  transform:
    rotateX(var(--coin-rx,64deg))
    rotateY(var(--coin-ry,-10deg))
    rotateZ(var(--coin-spin,0deg));
}

/* Real thickness made from stacked circular layers */
.coin__edge{
  inset:0;
  transform:translateZ(-20px);
  background:
    repeating-linear-gradient(
      90deg,
      #607f0c 0 4px,
      #9dc820 4px 7px,
      #6f9410 7px 10px
    );
  border:8px solid #86ad13;
  box-shadow:
    0 10px 0 #65850d,
    0 16px 0 #58750b,
    0 22px 0 #496109,
    0 28px 0 #3d5208;
}

.coin__face{
  transform:translateZ(12px);
  border:12px solid #d9fa62;
  background:
    radial-gradient(circle at 30% 23%,rgba(255,255,255,.8) 0 2%,transparent 8%),
    radial-gradient(circle at 34% 29%,#ecff9a 0 5%,#d0f84f 17%,#b7e62b 46%,#8ab817 73%,#6e970c 100%);
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.26),
    inset 0 0 0 9px rgba(33,26,41,.14),
    inset 16px 12px 26px rgba(255,255,255,.18),
    inset -22px -30px 40px rgba(52,75,0,.34),
    0 0 65px rgba(184,238,43,.17);
}

.coin__face:before{
  inset:22px;
  border:3px dashed rgba(33,26,41,.28);
}
.coin__face:after{
  inset:43px;
  border:2px solid rgba(33,26,41,.18);
  box-shadow:inset 0 0 0 8px rgba(255,255,255,.055);
}

.coin__face span{
  font-size:112px;
  text-shadow:
    1px 2px 0 rgba(255,255,255,.3),
    -2px -2px 0 rgba(64,86,0,.14);
}

.coin__face i{
  margin-top:8px;
  letter-spacing:.3em;
}

/* Extra metallic highlight traveling across the face */
.coin__face{
  overflow:hidden;
}
.coin__face > *{pointer-events:none}
.coin__face::selection{background:transparent}

.coin-wrap:after{
  content:"";
  position:absolute;
  width:210px;
  height:420px;
  left:50%;
  top:50%;
  border-radius:50%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
  filter:blur(8px);
  mix-blend-mode:soft-light;
  pointer-events:none;
  opacity:var(--coin-shine,.25);
  transform:
    translate(-50%,-50%)
    translateX(var(--shine-x,-170px))
    rotate(20deg);
}

.money-orbit--one{
  width:510px;
  height:510px;
  box-shadow:0 0 45px rgba(184,238,43,.05);
}
.money-orbit--two{
  width:680px;
  height:680px;
}
.money-orbit--two:before,
.money-orbit--two:after{
  content:"";
  position:absolute;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--lime);
  box-shadow:0 0 18px rgba(184,238,43,.8);
}
.money-orbit--two:before{left:8%;top:28%}
.money-orbit--two:after{right:11%;bottom:24%}

.money-card{
  width:210px;
  padding:19px 20px;
  border-radius:20px;
}
.money-card--a{top:12%;left:-3%}
.money-card--b{right:-8%;bottom:16%}

/* A soft ground shadow makes the coin feel suspended in space */
.money-scene:after{
  content:"";
  position:absolute;
  width:310px;
  height:54px;
  left:50%;
  bottom:10%;
  transform:translateX(-50%) scale(var(--shadow-scale,.65));
  border-radius:50%;
  background:rgba(0,0,0,.5);
  filter:blur(22px);
  opacity:var(--shadow-opacity,.3);
  z-index:-1;
}

@media (max-width:980px){
  .scroll-story{height:280vh}
  .coin-wrap{width:280px;height:280px}
  .coin{width:220px}
  .coin__face span{font-size:82px}
  .money-orbit--one{width:350px;height:350px}
  .money-orbit--two{width:450px;height:450px}
}
@media (max-width:640px){
  .scroll-story{height:285vh}
  .coin-wrap{width:240px;height:240px}
  .coin{width:190px}
  .coin__face span{font-size:70px}
}

/* =========================================================
   V5 — Coin geometry fix: no clipping / no disappearing edge
   ========================================================= */

/* Give the 3D object more breathing room and keep its own overflow visible */
.money-scene{
  overflow:visible !important;
  perspective:1800px;
  perspective-origin:50% 50%;
  min-width:0;
}

.coin-wrap{
  width:440px;
  height:440px;
  overflow:visible !important;
  transform-style:preserve-3d;
  backface-visibility:visible;
}

/* The coin stays centered and slightly smaller so rotations never hit its bounds */
.coin{
  width:270px;
  overflow:visible !important;
  transform-style:preserve-3d;
  backface-visibility:visible;
}

/* IMPORTANT:
   Previously the edge was another full disc behind the face.
   When viewed side-on, the two surfaces could visually separate/collapse.
   This version builds a proper cylindrical rim with stacked layers. */
.coin__edge{
  inset:0;
  border-radius:50%;
  border:0;
  background:#6f950f;
  transform:translateZ(-14px);
  box-shadow:
    0 0 0 2px #779f12,
    0 0 0 5px #6b900e,
    0 0 0 8px #5d7e0c,
    0 0 0 11px #4e690a;
}

/* Extra intermediate discs create a convincing solid thickness */
.coin__edge:before,
.coin__edge:after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  pointer-events:none;
}
.coin__edge:before{
  background:#87b515;
  transform:translateZ(7px);
  box-shadow:
    0 0 0 1px rgba(225,255,118,.25),
    inset -18px -12px 28px rgba(48,67,0,.3);
}
.coin__edge:after{
  background:#62860b;
  transform:translateZ(-7px);
  box-shadow:
    inset 16px 10px 22px rgba(206,245,80,.12),
    inset -16px -16px 24px rgba(31,43,0,.34);
}

/* Keep the front face fully visible and separated from the rim */
.coin__face{
  transform:translateZ(16px);
  backface-visibility:visible;
}

/* Add a rear face so at 90–180 degrees the coin never becomes a pair of lines */
.coin:after{
  content:"$";
  position:absolute;
  inset:0;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#263100;
  font-size:104px;
  font-weight:800;
  transform:translateZ(-18px) rotateY(180deg);
  backface-visibility:visible;
  background:
    radial-gradient(circle at 68% 30%,#e0ff78 0 4%,#b8e82c 32%,#88b518 68%,#678c0d 100%);
  border:11px solid #b9e638;
  box-shadow:
    inset 0 0 0 5px rgba(33,26,41,.18),
    inset 18px 12px 30px rgba(255,255,255,.12),
    inset -18px -22px 34px rgba(44,61,0,.3);
}

/* Don't let the highlight create a fake detached plane */
.coin-wrap:after{
  width:170px;
  height:330px;
  border-radius:999px;
  z-index:5;
}

/* Keep cards clear of the coin on common laptop resolutions */
.money-card--a{left:2%}
.money-card--b{right:0}

@media (max-width:1200px){
  .coin-wrap{width:380px;height:380px}
  .coin{width:245px}
  .money-orbit--one{width:440px;height:440px}
  .money-orbit--two{width:570px;height:570px}
}

@media (max-width:980px){
  .coin-wrap{width:300px;height:300px}
  .coin{width:205px}
  .coin:after{font-size:78px}
}

@media (max-width:640px){
  .coin-wrap{width:250px;height:250px}
  .coin{width:175px}
  .coin:after{font-size:64px}
}

/* =========================================================
   V6 — Coin thickness cleanup
   Keep the coin readable, attached and elegant at all times.
   ========================================================= */

/* Smaller physical depth: the coin should feel premium, not like two discs */
.coin{
  width:275px;
  transform-style:preserve-3d;
  overflow:visible !important;
}

/* Remove the fake rear disc introduced in V5 */
.coin:after{
  display:none !important;
}

/* The rim now behaves like a compact attached extrusion */
.coin__edge{
  inset:3px;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%, #a8d926 0%, #7da812 52%, #4f6a09 100%);
  transform:translate3d(10px,8px,-8px);
  box-shadow:
    2px 2px 0 #789f12,
    4px 4px 0 #6f930f,
    6px 6px 0 #64870d,
    8px 8px 0 #58770b,
    10px 10px 0 #4c6809,
    12px 12px 0 #405807;
  border:3px solid rgba(207,246,83,.22);
}

/* Remove the extra layered discs that made the side look detached */
.coin__edge:before,
.coin__edge:after{
  display:none !important;
}

/* Front face remains very close to the rim */
.coin__face{
  transform:translateZ(6px);
  border-width:10px;
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.22),
    inset 0 0 0 8px rgba(33,26,41,.12),
    inset 12px 10px 24px rgba(255,255,255,.15),
    inset -18px -22px 34px rgba(52,75,0,.26),
    0 0 42px rgba(184,238,43,.14);
}

/* Slightly subtler highlight so it doesn't read as a second object */
.coin-wrap:after{
  width:115px;
  height:300px;
  opacity:calc(var(--coin-shine,.18) * .7);
  filter:blur(12px);
}

/* Keep it away from the optical danger zone */
.money-orbit--one{width:500px;height:500px}
.money-orbit--two{width:650px;height:650px}

/* A little less oversized on laptop screens */
@media (max-width:1200px){
  .coin{width:240px}
}
@media (max-width:980px){
  .coin{width:205px}
}
@media (max-width:640px){
  .coin{width:175px}
}

/* =========================================================
   V7 — Rising graph scroll scene + clean anchor navigation
   ========================================================= */

/* Override the previous coin visuals completely */
.coin-wrap,.coin,.coin__face,.coin__edge,
.money-orbit,.money-card,.money-scene{
  display:none !important;
}

.scroll-story{
  height:300vh;
}

.growth-scene{
  position:relative;
  height:min(72vh,680px);
  min-height:520px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:32px;
  overflow:hidden;
  background:
    radial-gradient(circle at 78% 24%,rgba(184,238,43,.10),transparent 28%),
    linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.01));
  box-shadow:0 40px 100px rgba(0,0,0,.22);
}

.growth-grid{
  position:absolute;
  inset:0;
  opacity:.22;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to bottom,transparent 0,#000 15%,#000 88%,transparent 100%);
}

.growth-heading{
  position:absolute;
  left:28px;
  top:26px;
  z-index:5;
}
.growth-heading span{
  display:block;
  font-size:9px;
  letter-spacing:.24em;
  color:rgba(255,255,255,.42);
  margin-bottom:7px;
}
.growth-heading b{
  font-size:18px;
  color:var(--lime);
}

.growth-chart{
  position:absolute;
  inset:70px 26px 26px;
  width:calc(100% - 52px);
  height:calc(100% - 96px);
  overflow:visible;
}

.growth-area{
  fill:url(#areaGradient);
  opacity:var(--chart-area-opacity,0);
  transition:opacity .08s linear;
}

.growth-line{
  fill:none;
  stroke:var(--lime);
  stroke-width:5;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:url(#glow);
  stroke-dasharray:1;
  stroke-dashoffset:calc(1 - var(--chart-progress,0));
}

.growth-points circle{
  fill:#181914;
  stroke:var(--lime);
  stroke-width:5;
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
  transform:scale(.25);
  transition:opacity .25s ease,transform .35s cubic-bezier(.2,.7,.2,1);
}
.growth-scene[data-point="1"] .growth-points circle:nth-child(-n+1),
.growth-scene[data-point="2"] .growth-points circle:nth-child(-n+2),
.growth-scene[data-point="3"] .growth-points circle:nth-child(-n+3),
.growth-scene[data-point="4"] .growth-points circle:nth-child(-n+4),
.growth-scene[data-point="5"] .growth-points circle:nth-child(-n+5),
.growth-scene[data-point="6"] .growth-points circle:nth-child(-n+6){
  opacity:1;
  transform:scale(1);
}

.growth-label{
  position:absolute;
  z-index:6;
  width:170px;
  padding:15px 16px;
  border-radius:17px;
  background:rgba(33,26,41,.78);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(15px);
  box-shadow:0 20px 50px rgba(0,0,0,.18);
  opacity:var(--label-opacity,0);
  transform:translateY(var(--label-y,18px));
}
.growth-label span{
  display:block;
  color:rgba(255,255,255,.42);
  font-size:8px;
  letter-spacing:.17em;
  margin-bottom:5px;
}
.growth-label b{font-size:13px;color:#fff}
.growth-label--one{left:5%;bottom:9%}
.growth-label--two{left:40%;top:43%}
.growth-label--three{right:5%;top:16%}

.growth-value{
  position:absolute;
  right:27px;
  bottom:25px;
  z-index:7;
  text-align:right;
}
.growth-value small{
  display:block;
  font-size:8px;
  letter-spacing:.18em;
  color:rgba(255,255,255,.40);
}
.growth-value strong{
  display:block;
  margin-top:2px;
  font-size:44px;
  line-height:1;
  color:var(--lime);
  letter-spacing:-.05em;
}

.growth-scene:after{
  content:"";
  position:absolute;
  width:190px;
  height:190px;
  border-radius:50%;
  right:-70px;
  top:-70px;
  border:1px solid rgba(184,238,43,.24);
  box-shadow:
    0 0 0 28px rgba(184,238,43,.02),
    0 0 80px rgba(184,238,43,.05);
}

/* Contact/nav jumps: quick fade -> instant relocation -> fade back.
   This prevents the browser from fast-forwarding the sticky scene. */
.page-jump-transition{
  position:fixed;
  inset:0;
  z-index:20000;
  pointer-events:none;
  background:#181914;
  opacity:0;
  visibility:hidden;
  transition:opacity .22s ease,visibility .22s ease;
}
.page-jump-transition.is-active{
  opacity:1;
  visibility:visible;
}
html.is-jumping{
  scroll-behavior:auto !important;
}

@media (max-width:980px){
  .scroll-story{height:250vh}
  .growth-scene{height:44vh;min-height:390px}
  .growth-label{width:145px}
  .growth-label--two{left:34%;top:40%}
}
@media (max-width:640px){
  .scroll-story{height:255vh}
  .growth-scene{min-height:360px;border-radius:24px}
  .growth-chart{inset:64px 12px 24px;width:calc(100% - 24px)}
  .growth-label{display:none}
  .growth-value strong{font-size:36px}
}

/* =========================================================
   V8 — Client logos, satisfaction & time-to-results sections
   ========================================================= */

/* Client logos */
.brand-wall{
  padding:64px 0 72px;
  overflow:hidden;
}
.brand-wall__head{
  display:flex;
  justify-content:space-between;
  gap:40px;
  align-items:end;
  margin-bottom:34px;
}
.brand-wall__head p{
  max-width:560px;
  margin:0;
  color:var(--gray);
  font-size:13px;
  line-height:1.65;
}
.brand-marquee{
  overflow:hidden;
  position:relative;
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.brand-marquee__track{
  display:flex;
  align-items:center;
  width:max-content;
  animation:brandMarquee 26s linear infinite;
}
.brand-marquee:hover .brand-marquee__track{animation-play-state:paused}
.brand-logo{
  min-width:210px;
  height:96px;
  display:grid;
  place-items:center;
  border-right:1px solid var(--line);
  font-weight:800;
  font-size:25px;
  letter-spacing:-.04em;
  color:#8b8b88;
  filter:grayscale(1);
  opacity:.55;
  transition:.35s ease;
}
.brand-logo:hover{
  color:var(--ink);
  opacity:1;
  transform:translateY(-3px);
}
@keyframes brandMarquee{
  to{transform:translateX(-50%)}
}

/* Satisfaction */
.satisfaction{
  background:#fff;
}
.satisfaction__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}
.satisfaction__copy h2{
  font-size:clamp(46px,5vw,72px);
  line-height:.98;
  letter-spacing:-.05em;
  margin:12px 0 24px;
}
.satisfaction__copy p{
  max-width:560px;
  color:var(--gray);
  line-height:1.75;
}
.satisfaction__score{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:40px;
  align-items:center;
}
.score-ring{
  position:relative;
  width:240px;
  height:240px;
}
.score-ring svg{
  width:100%;
  height:100%;
  transform:rotate(-90deg);
}
.score-ring__track,
.score-ring__value{
  fill:none;
  stroke-width:12;
}
.score-ring__track{stroke:#ecece8}
.score-ring__value{
  stroke:var(--lime);
  stroke-linecap:round;
  stroke-dasharray:100;
  stroke-dashoffset:100;
  filter:drop-shadow(0 0 10px rgba(184,238,43,.20));
  transition:stroke-dashoffset 1.4s cubic-bezier(.2,.7,.2,1);
}
.score-ring.is-visible .score-ring__value{
  stroke-dashoffset:4;
}
.score-ring__content{
  position:absolute;
  inset:0;
  display:grid;
  place-content:center;
  text-align:center;
}
.score-ring__content strong{
  font-size:54px;
  line-height:1;
  letter-spacing:-.06em;
}
.score-ring__content span{
  margin-top:8px;
  font-size:12px;
  color:var(--gray);
  text-transform:uppercase;
  letter-spacing:.12em;
}
.satisfaction__mini{
  display:grid;
  gap:20px;
}
.satisfaction__mini div{
  padding:20px 0;
  border-top:1px solid var(--line);
}
.satisfaction__mini b{
  display:block;
  font-size:32px;
  color:var(--ink);
}
.satisfaction__mini small{
  display:block;
  margin-top:4px;
  color:var(--gray);
}
.demo-note{
  display:block;
  margin-top:20px;
  color:#aaa;
  font-size:10px;
}

/* Time to results */
.results-time{
  background:var(--ink);
  color:#fff;
  padding:115px 0;
  overflow:hidden;
}
.results-time__grid{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:90px;
  align-items:center;
}
.results-time__copy h2{
  margin:14px 0 24px;
  font-size:clamp(46px,5vw,72px);
  line-height:.98;
  letter-spacing:-.05em;
}
.results-time__copy p{
  color:rgba(255,255,255,.62);
  line-height:1.75;
  max-width:560px;
}
.results-time__highlight{
  margin-top:36px;
  padding:22px 0;
  border-top:1px solid rgba(255,255,255,.14);
}
.results-time__highlight span{
  display:block;
  font-size:9px;
  letter-spacing:.20em;
  color:rgba(255,255,255,.42);
  margin-bottom:7px;
}
.results-time__highlight strong{
  color:var(--lime);
  font-size:22px;
}

.result-timeline{
  position:relative;
  display:grid;
  gap:18px;
  padding-left:56px;
}
.result-timeline__line{
  position:absolute;
  left:16px;
  top:16px;
  bottom:16px;
  width:2px;
  background:rgba(255,255,255,.09);
}
.result-timeline__line span{
  display:block;
  width:100%;
  height:0%;
  background:var(--lime);
  box-shadow:0 0 14px rgba(184,238,43,.35);
  transition:height 1.4s cubic-bezier(.2,.7,.2,1);
}
.results-time__visual.is-visible .result-timeline__line span{height:100%}

.result-step{
  position:relative;
  padding:22px 26px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:20px;
  background:rgba(255,255,255,.025);
  opacity:0;
  transform:translateX(-18px);
  transition:.65s cubic-bezier(.2,.7,.2,1);
}
.results-time__visual.is-visible .result-step{
  opacity:1;
  transform:none;
}
.results-time__visual.is-visible .result-step:nth-of-type(2){transition-delay:.14s}
.results-time__visual.is-visible .result-step:nth-of-type(3){transition-delay:.28s}
.results-time__visual.is-visible .result-step:nth-of-type(4){transition-delay:.42s}
.results-time__visual.is-visible .result-step:nth-of-type(5){transition-delay:.56s}

.result-step:before{
  content:"";
  position:absolute;
  left:-47px;
  top:50%;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--lime);
  transform:translateY(-50%);
  box-shadow:0 0 18px rgba(184,238,43,.45);
}
.result-step b{
  display:block;
  color:var(--lime);
  font-size:10px;
  margin-bottom:7px;
}
.result-step strong{
  display:block;
  font-size:21px;
}
.result-step p{
  margin:6px 0 0;
  color:rgba(255,255,255,.52);
  font-size:12px;
  line-height:1.5;
}

@media (max-width:980px){
  .brand-wall__head{align-items:flex-start;flex-direction:column}
  .satisfaction__grid,
  .results-time__grid{grid-template-columns:1fr}
  .satisfaction__score{max-width:600px}
}
@media (max-width:640px){
  .brand-logo{min-width:160px;height:82px;font-size:20px}
  .satisfaction__score{grid-template-columns:1fr}
  .score-ring{width:210px;height:210px}
  .results-time{padding:82px 0}
}

/* =========================================================
   V9 — Satisfaction score: number-first + animated ring
   ========================================================= */

.satisfaction__score{
  grid-template-columns:minmax(300px, 1fr) .75fr;
  gap:56px;
}

.score-ring{
  width:320px;
  height:320px;
  margin:auto;
  filter:drop-shadow(0 24px 50px rgba(184,238,43,.10));
}

.score-ring svg{
  overflow:visible;
}

.score-ring__track,
.score-ring__value{
  stroke-width:14;
}

.score-ring__track{
  stroke:#ecece8;
}

.score-ring__value{
  stroke:var(--lime);
  stroke-linecap:round;
  stroke-dasharray:100;
  stroke-dashoffset:100;
  transition:stroke-dashoffset 2s cubic-bezier(.16,.8,.22,1);
  filter:
    drop-shadow(0 0 7px rgba(184,238,43,.28))
    drop-shadow(0 0 18px rgba(184,238,43,.12));
}

/* 96% final state */
.score-ring.is-visible .score-ring__value{
  stroke-dashoffset:4;
}

.score-ring__content{
  inset:0;
  place-content:center;
  gap:10px;
}

.score-ring__content strong{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:2px;
  font-size:92px;
  line-height:.88;
  font-weight:800;
  letter-spacing:-.075em;
  color:var(--ink);
}

.score-ring__content strong em{
  font-style:normal;
  color:var(--lime);
  font-size:.48em;
  line-height:1;
  margin-top:7px;
  letter-spacing:-.04em;
}

.score-ring__content > span{
  margin-top:3px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.19em;
  color:#8a8a87;
}

/* Small animated marker traveling around the ring */
.score-ring::after{
  content:"";
  position:absolute;
  width:13px;
  height:13px;
  border-radius:50%;
  background:var(--lime);
  box-shadow:
    0 0 0 6px rgba(184,238,43,.12),
    0 0 20px rgba(184,238,43,.46);
  left:50%;
  top:50%;
  opacity:0;
  transform:
    translate(-50%,-50%)
    rotate(-90deg)
    translateY(-142px);
  transform-origin:center;
}

.score-ring.is-visible::after{
  opacity:1;
  animation:ringDotTravel 2s cubic-bezier(.16,.8,.22,1) forwards;
}

@keyframes ringDotTravel{
  from{
    transform:
      translate(-50%,-50%)
      rotate(-90deg)
      translateY(-142px);
  }
  to{
    transform:
      translate(-50%,-50%)
      rotate(255.6deg)
      translateY(-142px);
  }
}

/* Ring appears with a subtle build-up */
.score-ring{
  opacity:0;
  transform:scale(.90);
  transition:
    opacity .65s ease,
    transform .85s cubic-bezier(.2,.7,.2,1);
}
.score-ring.is-visible{
  opacity:1;
  transform:scale(1);
}

/* Number gets its own entrance after the ring begins */
.score-ring__content{
  opacity:0;
  transform:scale(.92);
  transition:
    opacity .6s ease .28s,
    transform .7s cubic-bezier(.2,.7,.2,1) .28s;
}
.score-ring.is-visible .score-ring__content{
  opacity:1;
  transform:scale(1);
}

/* Make the supporting metrics quieter */
.satisfaction__mini{
  gap:14px;
}
.satisfaction__mini div{
  padding:18px 0;
}
.satisfaction__mini b{
  font-size:26px;
}
.satisfaction__mini small{
  font-size:11px;
}

@media (max-width:980px){
  .satisfaction__score{
    grid-template-columns:1fr;
    max-width:100%;
  }
  .score-ring{
    width:290px;
    height:290px;
  }
  .score-ring__content strong{
    font-size:80px;
  }
  .score-ring::after{
    transform:
      translate(-50%,-50%)
      rotate(-90deg)
      translateY(-128px);
  }
  @keyframes ringDotTravel{
    from{
      transform:
        translate(-50%,-50%)
        rotate(-90deg)
        translateY(-128px);
    }
    to{
      transform:
        translate(-50%,-50%)
        rotate(255.6deg)
        translateY(-128px);
    }
  }
}

@media (max-width:640px){
  .score-ring{
    width:250px;
    height:250px;
  }
  .score-ring__content strong{
    font-size:68px;
  }
  .score-ring::after{
    width:11px;
    height:11px;
    transform:
      translate(-50%,-50%)
      rotate(-90deg)
      translateY(-109px);
  }
  @keyframes ringDotTravel{
    from{
      transform:
        translate(-50%,-50%)
        rotate(-90deg)
        translateY(-109px);
    }
    to{
      transform:
        translate(-50%,-50%)
        rotate(255.6deg)
        translateY(-109px);
    }
  }
}

/* =========================================================
   V10 — Make 96% the undisputed hero
   ========================================================= */

.score-ring{
  width:340px;
  height:340px;
}

.score-ring__content{
  gap:8px;
}

/* Number is now the focal point, not the percent symbol */
.score-ring__content .score-main{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:5px;
  font-size:118px;
  line-height:.78;
  font-weight:800;
  letter-spacing:-.09em;
  color:var(--ink);
  text-shadow:0 10px 35px rgba(33,26,41,.08);
}

/* % becomes supporting punctuation */
.score-ring__content .score-main em{
  font-size:34px;
  line-height:1;
  font-weight:800;
  color:var(--lime);
  letter-spacing:-.04em;
  transform:translateY(-3px);
}

/* Label quieter and farther from the number */
.score-ring__content > span{
  margin-top:18px;
  font-size:9px;
  font-weight:700;
  letter-spacing:.23em;
  color:#92928e;
}

/* Slightly thinner ring so it frames the number instead of competing with it */
.score-ring__track,
.score-ring__value{
  stroke-width:11;
}

/* Keep the glow elegant instead of overpowering the score */
.score-ring__value{
  filter:
    drop-shadow(0 0 5px rgba(184,238,43,.24))
    drop-shadow(0 0 13px rgba(184,238,43,.10));
}

/* Traveling dot smaller too */
.score-ring::after{
  width:10px;
  height:10px;
  box-shadow:
    0 0 0 5px rgba(184,238,43,.10),
    0 0 16px rgba(184,238,43,.38);
}

/* When it appears, the number has a very subtle punch */
.score-ring.is-visible .score-main{
  animation:scoreHeroIn .9s cubic-bezier(.16,.85,.25,1) .2s both;
}

@keyframes scoreHeroIn{
  0%{
    opacity:0;
    transform:scale(.72);
    filter:blur(5px);
  }
  65%{
    opacity:1;
    transform:scale(1.045);
    filter:blur(0);
  }
  100%{
    opacity:1;
    transform:scale(1);
    filter:blur(0);
  }
}

@media (max-width:980px){
  .score-ring{width:310px;height:310px}
  .score-ring__content .score-main{font-size:104px}
  .score-ring__content .score-main em{font-size:30px}
}
@media (max-width:640px){
  .score-ring{width:270px;height:270px}
  .score-ring__content .score-main{font-size:88px}
  .score-ring__content .score-main em{font-size:27px}
}

/* =========================================================
   V11 — Big 96 + floating social rail + instant page jumps
   ========================================================= */

/* Force the 96 to be the main visual. This overrides earlier ring styles. */
.score-ring{
  width:360px !important;
  height:360px !important;
}

.score-ring__content{
  gap:0 !important;
}

.score-ring__content .score-main{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
  gap:4px !important;
  font-size:0 !important; /* prevent inherited text sizing */
  line-height:1 !important;
  letter-spacing:0 !important;
}

.score-ring__content .score-number{
  display:block;
  font-size:136px !important;
  line-height:.78 !important;
  font-weight:800 !important;
  letter-spacing:-.105em !important;
  color:var(--ink) !important;
  font-variant-numeric:tabular-nums;
}

.score-ring__content .score-main em{
  display:block;
  font-size:38px !important;
  line-height:1 !important;
  font-weight:800;
  color:var(--lime) !important;
  margin-top:5px;
  transform:none !important;
}

.score-ring__content > span{
  margin-top:26px !important;
  font-size:9px !important;
  letter-spacing:.24em !important;
  color:#91918c !important;
}

.score-ring__track,
.score-ring__value{
  stroke-width:9 !important;
}

/* Keep the ring elegant and subordinate to the figure */
.score-ring__value{
  filter:
    drop-shadow(0 0 4px rgba(184,238,43,.20))
    drop-shadow(0 0 10px rgba(184,238,43,.08)) !important;
}

/* Floating social tab */
.social-rail{
  position:fixed;
  right:0;
  top:50%;
  z-index:1600;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:14px 9px 12px;
  background:rgba(24,25,20,.88);
  border:1px solid rgba(255,255,255,.09);
  border-right:0;
  border-radius:22px 0 0 22px;
  backdrop-filter:blur(18px);
  box-shadow:0 18px 55px rgba(0,0,0,.18);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),background .3s ease;
}

.social-rail:hover{
  background:rgba(33,26,41,.94);
  transform:translateY(-50%) translateX(-4px);
}

.social-rail__label{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  color:rgba(255,255,255,.42);
  font-size:7px;
  font-weight:700;
  letter-spacing:.22em;
  margin:4px 0 12px;
}

.social-rail a{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  transition:.25s ease;
}

.social-rail a + a{
  margin-top:4px;
}

.social-rail a:hover{
  background:var(--lime);
  color:var(--ink);
  transform:translateX(-4px);
}

.social-rail svg{
  width:17px;
  height:17px;
  fill:currentColor;
}

.social-rail a[aria-label="Instagram"] svg{
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
}

/* Quick page controls */
.page-jump-controls{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:1650;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.page-jump-btn{
  width:46px;
  height:46px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:15px;
  background:rgba(33,26,41,.88);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:20px;
  backdrop-filter:blur(16px);
  box-shadow:0 14px 34px rgba(0,0,0,.18);
  transition:.25s ease;
}

.page-jump-btn:hover{
  background:var(--lime);
  color:var(--ink);
  transform:translateY(-2px);
}

.page-jump-btn--down{
  border-color:rgba(184,238,43,.25);
}

.page-jump-btn span{
  line-height:1;
}

/* Tiny state change based on scroll */
.page-jump-btn.is-muted{
  opacity:.28;
  pointer-events:none;
}

@media (max-width:980px){
  .score-ring{
    width:330px !important;
    height:330px !important;
  }
  .score-ring__content .score-number{
    font-size:120px !important;
  }
  .score-ring__content .score-main em{
    font-size:34px !important;
  }
  .social-rail{
    right:8px;
    top:auto;
    bottom:92px;
    transform:none;
    flex-direction:row;
    border-right:1px solid rgba(255,255,255,.09);
    border-radius:18px;
    padding:7px;
  }
  .social-rail:hover{
    transform:translateY(-3px);
  }
  .social-rail__label{display:none}
  .social-rail a + a{margin-top:0}
}

@media (max-width:640px){
  .score-ring{
    width:285px !important;
    height:285px !important;
  }
  .score-ring__content .score-number{
    font-size:102px !important;
  }
  .score-ring__content .score-main em{
    font-size:29px !important;
  }
  .page-jump-controls{
    right:14px;
    bottom:14px;
  }
  .page-jump-btn{
    width:42px;
    height:42px;
  }
  .social-rail{
    right:14px;
    bottom:66px;
  }
  .social-rail a{
    width:34px;
    height:34px;
  }
}

/* =========================================================
   V12 — Seamless ticker + 3D global reach section
   ========================================================= */

/* True continuous ticker: two identical groups, no empty gap */
.hero__ticker{
  overflow:hidden;
  position:relative;
}
.hero__ticker:before,
.hero__ticker:after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:90px;
  z-index:3;
  pointer-events:none;
}
.hero__ticker:before{
  left:0;
  background:linear-gradient(90deg,#181914,transparent);
}
.hero__ticker:after{
  right:0;
  background:linear-gradient(-90deg,#181914,transparent);
}
.ticker-track--seamless{
  display:flex;
  width:max-content;
  gap:0;
  animation:tickerSeamless 28s linear infinite;
  will-change:transform;
}
.ticker-group{
  display:flex;
  align-items:center;
  flex:none;
  gap:24px;
  padding-right:24px;
}
.ticker-group span{
  white-space:nowrap;
}
.ticker-group i{
  flex:none;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--lime);
}
@keyframes tickerSeamless{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
.hero__ticker:hover .ticker-track--seamless{
  animation-play-state:paused;
}

/* Global reach */
.global-reach{
  position:relative;
  padding:135px 0;
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(circle at 76% 48%,rgba(184,238,43,.08),transparent 25%),
    radial-gradient(circle at 70% 52%,rgba(100,76,118,.22),transparent 37%),
    linear-gradient(135deg,#181914 0%,#211A29 60%,#181914 100%);
}
.global-reach__halo{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  filter:blur(1px);
}
.global-reach__halo--a{
  width:520px;height:520px;
  right:-150px;top:-170px;
  border:1px solid rgba(184,238,43,.10);
  box-shadow:0 0 0 50px rgba(184,238,43,.012),0 0 0 100px rgba(184,238,43,.008);
}
.global-reach__halo--b{
  width:380px;height:380px;
  left:-190px;bottom:-140px;
  border:1px solid rgba(255,255,255,.05);
}
.global-reach__grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:85px;
  align-items:center;
}
.global-reach__copy h2{
  margin:13px 0 24px;
  font-size:clamp(54px,6vw,88px);
  line-height:.94;
  letter-spacing:-.055em;
}
.global-reach__copy > p{
  max-width:600px;
  color:rgba(255,255,255,.62);
  line-height:1.75;
  font-size:16px;
}
.global-reach__stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin:42px 0 34px;
}
.global-reach__stats > div{
  padding:18px 0 0;
  border-top:1px solid rgba(255,255,255,.13);
}
.global-reach__stats strong{
  display:block;
  color:var(--lime);
  font-size:30px;
  line-height:1;
}
.global-reach__stats span{
  display:block;
  margin-top:8px;
  color:rgba(255,255,255,.52);
  font-size:11px;
}

/* 3D globe made only with CSS */
.world-stage{
  position:relative;
  min-height:650px;
  display:grid;
  place-items:center;
  perspective:1400px;
  isolation:isolate;
}
.world-stage:after{
  content:"";
  position:absolute;
  width:390px;
  height:70px;
  left:50%;
  bottom:80px;
  transform:translateX(-50%);
  background:rgba(0,0,0,.43);
  filter:blur(34px);
  border-radius:50%;
  z-index:-1;
}
.world-globe{
  position:relative;
  width:430px;
  height:430px;
  display:grid;
  place-items:center;
  transform-style:preserve-3d;
  animation:worldFloat 7s ease-in-out infinite;
}
.world-globe__sphere{
  position:relative;
  width:360px;
  height:360px;
  border-radius:50%;
  transform-style:preserve-3d;
  background:
    radial-gradient(circle at 31% 25%,rgba(224,255,121,.20),transparent 16%),
    radial-gradient(circle at 62% 58%,rgba(184,238,43,.11),transparent 37%),
    linear-gradient(135deg,rgba(255,255,255,.05),rgba(184,238,43,.025));
  border:1px solid rgba(184,238,43,.34);
  box-shadow:
    inset 28px 18px 65px rgba(255,255,255,.035),
    inset -45px -35px 80px rgba(0,0,0,.36),
    0 0 80px rgba(184,238,43,.08);
  overflow:hidden;
}
.world-globe__sphere:before{
  content:"";
  position:absolute;
  inset:11%;
  border-radius:50%;
  border:1px solid rgba(184,238,43,.10);
  box-shadow:
    0 0 0 28px rgba(184,238,43,.01),
    0 0 0 58px rgba(184,238,43,.008);
}
.world-globe__grid{
  position:absolute;
  inset:0;
  border-radius:50%;
}
.world-globe__grid--lat{
  background:
    repeating-radial-gradient(
      ellipse at center,
      transparent 0 27px,
      rgba(184,238,43,.12) 28px 29px,
      transparent 30px 56px
    );
  transform:scaleY(.55);
}
.world-globe__grid--lon{
  background:
    repeating-radial-gradient(
      ellipse at center,
      transparent 0 32px,
      rgba(255,255,255,.08) 33px 34px,
      transparent 35px 66px
    );
  transform:rotate(90deg) scaleY(.43);
}
.world-globe__core{
  position:absolute;
  width:88px;height:88px;
  border-radius:50%;
  background:radial-gradient(circle,#dfff6f 0,#b8ee2b 20%,rgba(184,238,43,.16) 56%,transparent 72%);
  filter:blur(.2px);
  box-shadow:0 0 55px rgba(184,238,43,.24);
  z-index:-1;
}
.world-point{
  position:absolute;
  width:10px;height:10px;
  border-radius:50%;
  background:var(--lime);
  box-shadow:0 0 0 5px rgba(184,238,43,.10),0 0 18px rgba(184,238,43,.6);
  animation:worldPulse 2.3s ease-in-out infinite;
}
.world-point--mx{left:28%;top:48%}
.world-point--us{left:33%;top:30%;animation-delay:.4s}
.world-point--eu{right:25%;top:34%;animation-delay:.8s}
.world-point--sa{left:42%;bottom:24%;animation-delay:1.2s}

.world-arc{
  position:absolute;
  border-radius:50%;
  border:1px solid transparent;
  border-top-color:rgba(184,238,43,.45);
  transform-origin:center;
  opacity:.7;
}
.world-arc--1{
  width:210px;height:120px;
  left:92px;top:96px;
  transform:rotate(18deg);
}
.world-arc--2{
  width:230px;height:145px;
  left:68px;top:135px;
  transform:rotate(-24deg);
  border-top-color:rgba(255,255,255,.18);
}

.world-orbit{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(184,238,43,.14);
  transform-style:preserve-3d;
}
.world-orbit--1{
  width:500px;height:500px;
  transform:rotateX(68deg) rotateZ(18deg);
  animation:orbitOne 12s linear infinite;
}
.world-orbit--2{
  width:560px;height:350px;
  transform:rotateY(64deg) rotateZ(-12deg);
  border-color:rgba(255,255,255,.08);
  animation:orbitTwo 16s linear infinite reverse;
}
.world-orbit--3{
  width:620px;height:620px;
  border-color:rgba(184,238,43,.055);
  animation:orbitThree 21s linear infinite;
}
.world-card{
  position:absolute;
  z-index:5;
  padding:15px 17px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  background:rgba(33,26,41,.72);
  backdrop-filter:blur(18px);
  box-shadow:0 22px 60px rgba(0,0,0,.22);
  transition:.35s ease;
}
.world-card:hover{
  transform:translateY(-5px);
  border-color:rgba(184,238,43,.3);
}
.world-card small{
  display:block;
  color:rgba(255,255,255,.4);
  font-size:8px;
  letter-spacing:.19em;
  margin-bottom:5px;
}
.world-card strong{
  color:#fff;
  font-size:15px;
}
.world-card--one{left:3%;top:21%}
.world-card--two{right:0;bottom:20%}
.world-card--three{
  right:3%;top:14%;
  display:flex;align-items:center;gap:9px;
  font-size:10px;color:rgba(255,255,255,.62);
}
.world-card__dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--lime);
  box-shadow:0 0 12px rgba(184,238,43,.7);
}

@keyframes worldFloat{
  0%,100%{transform:translateY(0) rotateX(2deg) rotateY(-5deg)}
  50%{transform:translateY(-13px) rotateX(-2deg) rotateY(5deg)}
}
@keyframes worldPulse{
  0%,100%{transform:scale(.85);opacity:.62}
  50%{transform:scale(1.25);opacity:1}
}
@keyframes orbitOne{
  to{transform:rotateX(68deg) rotateZ(378deg)}
}
@keyframes orbitTwo{
  to{transform:rotateY(64deg) rotateZ(348deg)}
}
@keyframes orbitThree{
  to{transform:rotate(360deg)}
}

@media (max-width:980px){
  .global-reach{padding:100px 0}
  .global-reach__grid{grid-template-columns:1fr;gap:25px}
  .world-stage{min-height:570px}
  .world-globe{width:360px;height:360px}
  .world-globe__sphere{width:300px;height:300px}
  .world-orbit--1{width:420px;height:420px}
  .world-orbit--2{width:460px;height:310px}
  .world-orbit--3{width:500px;height:500px}
}
@media (max-width:640px){
  .hero__ticker:before,.hero__ticker:after{width:42px}
  .ticker-group{gap:18px;padding-right:18px}
  .global-reach__stats{grid-template-columns:1fr 1fr 1fr}
  .world-stage{min-height:450px}
  .world-globe{width:270px;height:270px}
  .world-globe__sphere{width:230px;height:230px}
  .world-orbit--1{width:300px;height:300px}
  .world-orbit--2{width:330px;height:230px}
  .world-orbit--3{width:360px;height:360px}
  .world-card{padding:11px 12px}
  .world-card--one{left:0}
  .world-card--two{right:0}
  .world-card--three{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ticker-track--seamless,
  .world-globe,
  .world-orbit,
  .world-point{animation:none!important}
}

/* =========================================================
   V13 — Recognizable Earth, still minimal and brand-led
   ========================================================= */

.world-globe__sphere--earth{
  overflow:visible;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
}

.world-globe__sphere--earth:before{
  display:none !important;
}

.earth-map{
  width:100%;
  height:100%;
  overflow:visible;
  filter:
    drop-shadow(0 28px 50px rgba(0,0,0,.34))
    drop-shadow(0 0 28px rgba(184,238,43,.06));
  animation:earthTurn 18s ease-in-out infinite alternate;
}

.earth-lines ellipse{
  fill:none;
  stroke:rgba(255,255,255,.08);
  stroke-width:1;
}

.earth-land{
  fill:url(#earthLand);
  opacity:.34;
  stroke:rgba(200,245,72,.48);
  stroke-width:1.2;
  vector-effect:non-scaling-stroke;
}

.earth-land--thin{
  opacity:.28;
}

.earth-point{
  fill:var(--lime);
  stroke:rgba(235,255,176,.9);
  stroke-width:2;
  filter:drop-shadow(0 0 6px rgba(184,238,43,.95));
  animation:earthPointPulse 2.4s ease-in-out infinite;
}

.earth-point--us{animation-delay:.35s}
.earth-point--eu{animation-delay:.7s}
.earth-point--sa{animation-delay:1.05s}

.earth-route{
  fill:none;
  stroke:rgba(184,238,43,.55);
  stroke-width:1.2;
  stroke-linecap:round;
  stroke-dasharray:4 7;
  vector-effect:non-scaling-stroke;
  animation:earthRoute 5s linear infinite;
}
.earth-route--2{animation-delay:.8s}
.earth-route--3{animation-delay:1.4s}

.earth-glow{
  position:absolute;
  inset:7%;
  border-radius:50%;
  pointer-events:none;
  box-shadow:
    inset 24px 18px 44px rgba(255,255,255,.03),
    inset -32px -26px 60px rgba(0,0,0,.40),
    0 0 0 1px rgba(184,238,43,.18),
    0 0 45px rgba(184,238,43,.07);
}

.world-orbit--1{
  border-color:rgba(184,238,43,.10);
}
.world-orbit--2{
  border-color:rgba(255,255,255,.055);
}
.world-orbit--3{
  border-color:rgba(184,238,43,.035);
}

/* Cards stay but are slightly quieter, so the Earth remains the protagonist */
.world-card{
  background:rgba(33,26,41,.66);
}
.world-card--one{left:4%;top:24%}
.world-card--two{right:2%;bottom:18%}
.world-card--three{right:5%;top:16%}

@keyframes earthTurn{
  from{transform:rotateY(-4deg) rotateX(1deg) rotateZ(-1deg)}
  to{transform:rotateY(7deg) rotateX(-2deg) rotateZ(1deg)}
}
@keyframes earthPointPulse{
  0%,100%{opacity:.65;transform:scale(.85)}
  50%{opacity:1;transform:scale(1.3)}
}
@keyframes earthRoute{
  to{stroke-dashoffset:-44}
}

@media (max-width:640px){
  .earth-land{stroke-width:.9}
  .earth-route{stroke-width:1}
}

/* =========================================================
   V14 — Earth: less abstract, more natural/corporate
   ========================================================= */

.earth-map--natural{
  overflow:visible;
  transform-style:preserve-3d;
  animation:earthNaturalFloat 12s ease-in-out infinite alternate;
}

.earth-natural-lines ellipse{
  fill:none;
  stroke:rgba(190,220,232,.055);
  stroke-width:.8;
}

.earth-land-natural{
  fill:url(#earthLandNatural);
  stroke:rgba(187,205,126,.22);
  stroke-width:.8;
  vector-effect:non-scaling-stroke;
}

.earth-land-natural--soft{
  opacity:.78;
}

.earth-land-highlight{
  fill:url(#earthLandHighlight);
  opacity:.45;
}

.earth-city-lights circle{
  fill:#d6ff6e;
  opacity:.45;
}

.earth-clouds{
  opacity:.72;
  animation:cloudDriftNatural 16s ease-in-out infinite alternate;
}

.world-globe__sphere--earth{
  filter:
    drop-shadow(0 30px 55px rgba(0,0,0,.40))
    drop-shadow(0 0 30px rgba(129,186,212,.05));
}

/* The Earth is the focus, so reduce the futuristic orbits */
.world-orbit--1{
  opacity:.55;
  border-color:rgba(184,238,43,.07);
}
.world-orbit--2{
  opacity:.32;
}
.world-orbit--3{
  opacity:.20;
}

.earth-route{
  stroke:rgba(184,238,43,.42);
}

.earth-point{
  box-shadow:none;
}

/* More natural cool atmosphere, while keeping the InterCont green accents */
.earth-glow{
  inset:4%;
  box-shadow:
    inset 24px 18px 44px rgba(255,255,255,.025),
    inset -38px -30px 62px rgba(0,0,0,.48),
    0 0 0 1px rgba(143,190,211,.10),
    0 0 38px rgba(114,180,209,.06);
}

@keyframes earthNaturalFloat{
  from{
    transform:rotateY(-3deg) rotateX(1deg) rotateZ(-.5deg) translateY(2px);
  }
  to{
    transform:rotateY(5deg) rotateX(-1.5deg) rotateZ(.8deg) translateY(-5px);
  }
}
@keyframes cloudDriftNatural{
  from{transform:translateX(-3px);opacity:.58}
  to{transform:translateX(5px);opacity:.78}
}

/* V15 — smart capsule navigation + strategic reach network */
.site-header{padding:14px 0;transition:.35s ease}
.site-header .nav-wrap{max-width:1380px;background:rgba(24,25,20,.35);border:1px solid rgba(255,255,255,.07);border-radius:24px;padding:9px 12px 9px 18px;backdrop-filter:blur(18px);transition:.35s ease}
.site-header.is-scrolled .nav-wrap{max-width:1120px;background:rgba(33,26,41,.88);box-shadow:0 18px 55px rgba(0,0,0,.22);border-radius:999px}
.site-header.is-scrolled .brand img{max-width:138px}
.nav--capsule{position:relative;display:flex;padding:4px;border-radius:999px;background:rgba(255,255,255,.035)}
.nav--capsule a{position:relative;z-index:2;padding:10px 13px;border-radius:999px}
.nav-active-pill{position:absolute;z-index:1;top:4px;left:4px;height:calc(100% - 8px);width:70px;border-radius:999px;background:var(--lime);box-shadow:0 5px 22px rgba(184,238,43,.16);transition:.38s cubic-bezier(.2,.8,.2,1)}
.nav--capsule a.is-active{color:#181914!important}

.reach-network{background:radial-gradient(circle at 74% 48%,rgba(184,238,43,.055),transparent 25%),linear-gradient(135deg,#181914,#211a29 62%,#181914);padding:130px 0}
.reach-stage{position:relative;min-height:650px;isolation:isolate}
.reach-radar{position:absolute;width:520px;height:520px;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid rgba(184,238,43,.15);border-radius:50%;overflow:hidden}
.reach-radar i{position:absolute;inset:16%;border:1px solid rgba(255,255,255,.07);border-radius:50%}
.reach-radar i:nth-child(2){inset:32%}.reach-radar i:nth-child(3){inset:44%}
.reach-radar:before,.reach-radar:after{content:"";position:absolute;background:rgba(255,255,255,.05)}
.reach-radar:before{width:1px;height:100%;left:50%}.reach-radar:after{height:1px;width:100%;top:50%}
.radar-sweep{position:absolute;width:50%;height:50%;left:50%;top:0;transform-origin:0 100%;background:conic-gradient(from 90deg,rgba(184,238,43,.16),transparent 34deg);animation:radarSpin 6s linear infinite}
.reach-lines{position:absolute;inset:15px;width:calc(100% - 30px);height:calc(100% - 30px)}
.reach-lines path{fill:none;stroke:rgba(184,238,43,.38);stroke-width:1.4;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 4px rgba(184,238,43,.25))}
.reach-stage.is-visible .reach-lines path{animation:drawReach 1.3s cubic-bezier(.2,.8,.2,1) forwards}
.reach-stage.is-visible .reach-lines path:nth-child(2){animation-delay:.12s}.reach-stage.is-visible .reach-lines path:nth-child(3){animation-delay:.24s}.reach-stage.is-visible .reach-lines path:nth-child(4){animation-delay:.36s}.reach-stage.is-visible .reach-lines path:nth-child(5){animation-delay:.48s}.reach-stage.is-visible .reach-lines path:nth-child(6){animation-delay:.6s}
.reach-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:145px;height:145px;border-radius:50%;display:grid;place-content:center;text-align:center;background:#211a29;border:1px solid rgba(184,238,43,.5);box-shadow:0 0 0 12px rgba(184,238,43,.025),0 0 60px rgba(184,238,43,.12);z-index:3}
.reach-core span,.reach-core strong{font-size:20px;line-height:.85}.reach-core strong{color:var(--lime)}.reach-core small{font-size:7px;letter-spacing:.2em;color:#888;margin-top:12px}
.reach-node{position:absolute;z-index:4;min-width:150px;padding:14px 16px;border-radius:17px;background:rgba(33,26,41,.82);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(15px);opacity:0;transform:scale(.85);transition:.55s cubic-bezier(.2,.8,.2,1)}
.reach-stage.is-visible .reach-node{opacity:1;transform:scale(1)}
.reach-node b,.reach-node small{display:block;color:var(--lime);font-size:8px;letter-spacing:.15em;margin-bottom:5px}.reach-node strong{display:block;font-size:13px}.reach-node span{display:block;color:#888;font-size:9px;margin-top:4px}
.n1{left:2%;top:18%}.n2{right:1%;top:16%}.n3{left:0;bottom:17%}.n4{right:0;bottom:16%}
.reach-out{min-width:auto;border-color:rgba(184,238,43,.22)}.o1{left:42%;top:2%}.o2{left:42%;bottom:2%}
.reach-status{position:absolute;right:8%;top:47%;font-size:9px;color:#aaa;letter-spacing:.06em}.reach-status i{display:inline-block;width:7px;height:7px;background:var(--lime);border-radius:50%;margin-right:7px;box-shadow:0 0 12px var(--lime);animation:pulseReach 1.8s infinite}
@keyframes radarSpin{to{transform:rotate(360deg)}}@keyframes drawReach{to{stroke-dashoffset:0}}@keyframes pulseReach{50%{opacity:.35;transform:scale(.75)}}
@media(max-width:980px){.nav-cta{display:none}.reach-stage{min-height:580px}.reach-radar{width:440px;height:440px}.site-header .nav-wrap,.site-header.is-scrolled .nav-wrap{border-radius:22px}.nav-active-pill{display:none}}
@media(max-width:640px){.reach-stage{min-height:520px}.reach-radar{width:330px;height:330px}.reach-node{min-width:125px;padding:11px}.o1,.o2,.reach-status{display:none}.n1{left:0}.n2{right:0}.n3{left:0}.n4{right:0}}

/* =========================================================
   V16 — staged graph data + center-origin radar + node pulses
   ========================================================= */

/* ---------- GRAPH: labels appear progressively with scroll ---------- */
.growth-label{
  opacity:0 !important;
  transform:translateY(22px) scale(.96) !important;
  transition:
    opacity .48s cubic-bezier(.2,.8,.2,1),
    transform .58s cubic-bezier(.2,.8,.2,1),
    border-color .35s ease !important;
}

.growth-label.is-revealed{
  opacity:1 !important;
  transform:translateY(0) scale(1) !important;
}

.growth-label.is-current{
  border-color:rgba(184,238,43,.30);
  box-shadow:
    0 18px 50px rgba(0,0,0,.20),
    0 0 28px rgba(184,238,43,.07);
}

.growth-label:before{
  content:"";
  position:absolute;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--lime);
  opacity:0;
  box-shadow:0 0 0 5px rgba(184,238,43,.08),0 0 16px rgba(184,238,43,.55);
  transition:.35s ease;
}

.growth-label.is-revealed:before{
  opacity:1;
}

/* Position each little dot toward its graph point */
.growth-label--one:before{right:-10px;top:50%}
.growth-label--two:before{left:-10px;top:50%}
.growth-label--three:before{left:-10px;bottom:16px}

/* Make facts under the heading enter one by one too */
.scroll-fact{
  opacity:0 !important;
  transform:translateY(16px) !important;
  transition:opacity .45s ease,transform .55s cubic-bezier(.2,.8,.2,1);
}
.scroll-fact.is-revealed{
  opacity:1 !important;
  transform:none !important;
}

/* ---------- RADAR: beam now starts exactly at center ---------- */
.reach-radar{
  overflow:hidden;
}

.radar-sweep{
  position:absolute !important;
  inset:0 !important;
  width:auto !important;
  height:auto !important;
  left:0 !important;
  top:0 !important;
  border-radius:50%;
  transform-origin:50% 50% !important;
  background:
    conic-gradient(
      from -90deg,
      transparent 0deg,
      transparent 310deg,
      rgba(184,238,43,.015) 320deg,
      rgba(184,238,43,.11) 340deg,
      rgba(184,238,43,.28) 354deg,
      transparent 360deg
    ) !important;
  animation:radarSpinCenter 5.6s linear infinite !important;
}

/* bright beam running from center toward the rim */
.radar-sweep:after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:46%;
  height:1px;
  transform-origin:left center;
  background:linear-gradient(90deg,rgba(184,238,43,.9),rgba(184,238,43,.05));
  box-shadow:0 0 10px rgba(184,238,43,.36);
}

/* central source light */
.reach-radar:after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:12px;
  height:12px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:var(--lime);
  box-shadow:
    0 0 0 8px rgba(184,238,43,.06),
    0 0 22px rgba(184,238,43,.55);
  z-index:2;
}

@keyframes radarSpinCenter{
  to{transform:rotate(360deg)}
}

/* Node pulse points visually tie each label to its connection */
.reach-node{
  overflow:visible;
}

.reach-node-dot{
  position:absolute;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--lime);
  box-shadow:
    0 0 0 5px rgba(184,238,43,.08),
    0 0 18px rgba(184,238,43,.55);
  animation:reachNodeBlink 2s ease-in-out infinite;
}

/* dots face toward the center */
.n1 .reach-node-dot{right:-13px;bottom:18px}
.n2 .reach-node-dot{left:-13px;bottom:18px}
.n3 .reach-node-dot{right:-13px;top:18px}
.n4 .reach-node-dot{left:-13px;top:18px}
.o1 .reach-node-dot{left:50%;bottom:-13px;transform:translateX(-50%)}
.o2 .reach-node-dot{left:50%;top:-13px;transform:translateX(-50%)}

.n2 .reach-node-dot{animation-delay:.35s}
.n3 .reach-node-dot{animation-delay:.70s}
.n4 .reach-node-dot{animation-delay:1.05s}
.o1 .reach-node-dot{animation-delay:1.35s}
.o2 .reach-node-dot{animation-delay:1.65s}

@keyframes reachNodeBlink{
  0%,100%{opacity:.35;box-shadow:0 0 0 3px rgba(184,238,43,.04),0 0 6px rgba(184,238,43,.25)}
  50%{opacity:1;box-shadow:0 0 0 7px rgba(184,238,43,.08),0 0 20px rgba(184,238,43,.72)}
}

/* Make graph and radar motion feel connected to the premium system */
.reach-lines path{
  stroke-width:1.6px;
}
.reach-stage.is-visible .reach-node:nth-of-type(1){transition-delay:.18s}
.reach-stage.is-visible .reach-node:nth-of-type(2){transition-delay:.30s}
.reach-stage.is-visible .reach-node:nth-of-type(3){transition-delay:.42s}
.reach-stage.is-visible .reach-node:nth-of-type(4){transition-delay:.54s}
.reach-stage.is-visible .reach-node:nth-of-type(5){transition-delay:.66s}
.reach-stage.is-visible .reach-node:nth-of-type(6){transition-delay:.78s}

/* =========================================================
   V17 — radar scan-triggered nodes + real InterCont isotipo
   ========================================================= */

/* Remove the center spokes from every earlier version */
.reach-lines{
  display:none !important;
}

/* Cleaner technical radar rings */
.reach-radar{
  width:540px;
  height:540px;
  border-color:rgba(184,238,43,.12);
  background:
    radial-gradient(circle at center,rgba(184,238,43,.035),transparent 33%),
    repeating-radial-gradient(circle at center,
      transparent 0 58px,
      rgba(255,255,255,.045) 59px 60px,
      transparent 61px 116px);
}

.reach-radar i{
  border-color:rgba(255,255,255,.055);
}
.reach-radar i:nth-child(1){inset:18%}
.reach-radar i:nth-child(2){inset:34%}
.reach-radar i:nth-child(3){inset:45%}

/* JS controls the angle, so stop the old CSS spin */
.radar-sweep{
  animation:none !important;
  transform:rotate(var(--radar-angle,0deg)) !important;
  background:
    conic-gradient(
      from -90deg,
      transparent 0deg,
      transparent 315deg,
      rgba(184,238,43,.01) 320deg,
      rgba(184,238,43,.08) 338deg,
      rgba(184,238,43,.24) 353deg,
      transparent 360deg
    ) !important;
}

.radar-sweep:after{
  width:48%;
  height:1px;
  background:linear-gradient(
    90deg,
    rgba(184,238,43,.95),
    rgba(184,238,43,.22) 55%,
    rgba(184,238,43,.02)
  );
  box-shadow:0 0 12px rgba(184,238,43,.40);
}

/* Center: actual InterCont cubes/isotipo */
.reach-core{
  width:154px;
  height:154px;
  padding:24px;
  background:
    radial-gradient(circle at 50% 45%,rgba(184,238,43,.055),transparent 58%),
    rgba(24,25,20,.95);
  border-color:rgba(184,238,43,.34);
  box-shadow:
    0 0 0 11px rgba(184,238,43,.018),
    0 0 50px rgba(184,238,43,.09);
}

.reach-core img{
  display:block;
  width:78px;
  max-height:72px;
  object-fit:contain;
  margin:0 auto 8px;
  filter:drop-shadow(0 7px 12px rgba(0,0,0,.24));
}

.reach-core small{
  display:block;
  margin-top:4px;
  font-size:7px;
  letter-spacing:.21em;
  color:rgba(255,255,255,.40);
}

/* Less symmetrical / more editorial positioning */
.n1{left:2%;top:27%}
.n2{right:-2%;top:12%}
.n3{left:10%;bottom:7%}
.n4{right:3%;bottom:24%}
.o1{left:43%;top:-1%}
.o2{left:51%;bottom:-1%}

/* Cards no longer all feel equally aligned */
.n1{transform-origin:right center}
.n2{transform-origin:left bottom}
.n3{transform-origin:right top}
.n4{transform-origin:left top}
.o1{transform-origin:center bottom}
.o2{transform-origin:center top}

/* Nodes remain readable, but the signal dot is invisible until scanned */
.reach-node-dot{
  opacity:0 !important;
  transform:scale(.35);
  transition:
    opacity .12s linear,
    transform .20s cubic-bezier(.2,.8,.2,1),
    box-shadow .20s ease;
  animation:none !important;
}

.reach-node.is-radar-hit .reach-node-dot{
  opacity:1 !important;
  transform:scale(1.12);
  box-shadow:
    0 0 0 7px rgba(184,238,43,.09),
    0 0 24px rgba(184,238,43,.85);
}

/* The associated text/card also reacts very briefly when its point is scanned */
.reach-node{
  transition:
    opacity .55s cubic-bezier(.2,.8,.2,1),
    transform .55s cubic-bezier(.2,.8,.2,1),
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

.reach-node.is-radar-hit{
  border-color:rgba(184,238,43,.34);
  background:rgba(36,29,43,.96);
  box-shadow:
    0 18px 45px rgba(0,0,0,.24),
    0 0 25px rgba(184,238,43,.075);
}

/* A scanned card gets a tiny green tick, tying text and radar together */
.reach-node.is-radar-hit:after{
  content:"";
  position:absolute;
  width:18px;
  height:2px;
  right:12px;
  top:12px;
  border-radius:2px;
  background:var(--lime);
  box-shadow:0 0 10px rgba(184,238,43,.55);
}

/* Result nodes are a little smaller so the composition feels less rigid */
.reach-out{
  padding:12px 15px;
  min-width:132px;
}

/* The standalone status dot stays quietly alive */
.reach-status i{
  animation:pulseReach 2.4s ease-in-out infinite;
}

@media(max-width:980px){
  .reach-radar{width:450px;height:450px}
  .reach-core{width:132px;height:132px;padding:20px}
  .reach-core img{width:64px}
}
@media(max-width:640px){
  .reach-radar{width:335px;height:335px}
  .reach-core{width:110px;height:110px;padding:17px}
  .reach-core img{width:52px}
  .n1{left:-1%;top:18%}
  .n2{right:-1%;top:8%}
  .n3{left:0;bottom:10%}
  .n4{right:0;bottom:19%}
}

/* V18 — exact InterCont isotipo supplied by user */
.reach-core img{
  width:92px !important;
  max-height:88px !important;
  object-fit:contain !important;
}
@media(max-width:980px){
  .reach-core img{width:78px !important;max-height:74px !important}
}
@media(max-width:640px){
  .reach-core img{width:64px !important;max-height:60px !important}
}

/* =========================================================
   V21 — responsive polish: tablet + mobile
   ========================================================= */

/* ---------- TABLET ---------- */
@media (max-width: 1180px){
  .container{
    width:min(100% - 36px, 1080px);
  }

  .hero__grid{
    gap:42px;
  }

  .hero__copy h1{
    font-size:clamp(54px,7.5vw,78px);
  }

  .services-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .global-reach__grid{
    gap:45px;
  }

  .reach-stage{
    transform:scale(.92);
    transform-origin:center;
  }

  .brand-logo{
    min-width:180px;
  }

  .footer__grid{
    gap:50px;
  }
}

/* ---------- TABLET / SMALL LAPTOP ---------- */
@media (max-width: 980px){

  /* Header becomes compact and mobile-safe */
  .site-header{
    padding:10px 0;
  }

  .site-header .nav-wrap,
  .site-header.is-scrolled .nav-wrap{
    max-width:none;
    border-radius:20px;
    padding:8px 10px 8px 14px;
  }

  .brand img{
    width:170px !important;
    max-width:170px !important;
  }

  .menu-toggle{
    display:block !important;
    z-index:10;
  }

  .nav--capsule{
    display:none;
  }

  .nav--capsule.is-open{
    display:flex !important;
    position:absolute;
    top:72px;
    left:18px;
    right:18px;
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    padding:12px;
    border-radius:20px;
    background:rgba(24,25,20,.97);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 20px 55px rgba(0,0,0,.28);
    backdrop-filter:blur(20px);
  }

  .nav--capsule.is-open a{
    padding:13px 15px;
    border-radius:14px;
  }

  .nav--capsule.is-open a:hover,
  .nav--capsule.is-open a.is-active{
    background:rgba(184,238,43,.11);
    color:var(--lime) !important;
  }

  .nav-active-pill{
    display:none !important;
  }

  .nav-cta{
    display:none !important;
  }

  /* Hero */
  .hero{
    padding-top:110px;
  }

  .hero__grid{
    grid-template-columns:1fr;
    gap:34px;
    min-height:auto;
    padding-bottom:60px;
  }

  .hero__copy{
    max-width:760px;
  }

  .hero__copy h1{
    font-size:clamp(54px,9vw,80px);
    max-width:850px;
  }

  .hero__copy > p{
    max-width:680px;
  }

  .hero__visual{
    width:100%;
  }

  .hero-photo{
    min-height:520px;
  }

  .hero__mini{
    flex-wrap:wrap;
  }

  /* Trust strip */
  .trust__grid{
    align-items:flex-start;
    flex-direction:column;
  }

  /* Generic sections */
  .section-heading,
  .about__grid,
  .cta__grid,
  .footer__grid,
  .satisfaction__grid,
  .results-time__grid,
  .global-reach__grid{
    grid-template-columns:1fr;
  }

  .section-heading{
    gap:24px;
  }

  .section-heading p{
    max-width:680px;
  }

  /* Services */
  .services-grid{
    grid-template-columns:repeat(2,1fr);
  }

  /* About */
  .about__visual{
    min-height:480px;
    margin-left:0;
    padding-left:0;
  }

  .about__copy{
    padding:65px 0 80px;
  }

  /* Process */
  .process{
    grid-template-columns:repeat(2,1fr);
  }

  /* Satisfaction */
  .satisfaction__score{
    grid-template-columns:1fr auto;
    max-width:720px;
  }

  .score-ring{
    margin:0;
  }

  /* Results time */
  .results-time__grid{
    gap:55px;
  }

  /* Scroll-driven growth chart */
  .scroll-story{
    height:245vh;
  }

  .scroll-story__stage{
    grid-template-columns:1fr;
    gap:22px;
    align-items:center;
  }

  .scroll-story__copy{
    padding-top:64px;
    max-width:780px;
  }

  .scroll-story__title{
    font-size:clamp(48px,8vw,72px);
  }

  .growth-scene{
    width:100%;
    height:46vh;
    min-height:410px;
  }

  .growth-label{
    transform:translateY(16px) scale(.97) !important;
  }

  .growth-label.is-revealed{
    transform:none !important;
  }

  /* Radar */
  .reach-network{
    padding:95px 0;
  }

  .global-reach__copy{
    max-width:760px;
  }

  .global-reach__copy h2{
    max-width:760px;
  }

  .reach-stage{
    min-height:590px;
    transform:none;
    margin-top:10px;
  }

  .reach-radar{
    width:455px;
    height:455px;
  }

  .reach-core{
    width:128px;
    height:128px;
  }

  .reach-core img{
    width:74px !important;
    max-height:70px !important;
  }

  .n1{left:4%;top:24%}
  .n2{right:3%;top:10%}
  .n3{left:7%;bottom:9%}
  .n4{right:4%;bottom:20%}
  .o1{left:43%;top:0}
  .o2{left:49%;bottom:0}

  /* Social rail becomes bottom floating row */
  .social-rail{
    right:14px;
    top:auto;
    bottom:78px;
    transform:none;
    flex-direction:row;
    border-right:1px solid rgba(255,255,255,.09);
    border-radius:18px;
    padding:7px;
  }

  .social-rail:hover{
    transform:translateY(-3px);
  }

  .social-rail__label{
    display:none;
  }

  .social-rail a + a{
    margin-top:0;
  }

  .footer__grid{
    gap:38px;
  }
}

/* ---------- MOBILE ---------- */
@media (max-width: 640px){

  body{
    overflow-x:hidden;
  }

  .container{
    width:calc(100% - 28px);
  }

  .section{
    padding:72px 0;
  }

  /* Header */
  .site-header{
    padding:8px 0;
  }

  .site-header .nav-wrap,
  .site-header.is-scrolled .nav-wrap{
    border-radius:16px;
    padding:7px 9px 7px 11px;
  }

  .brand img{
    width:145px !important;
    max-width:145px !important;
  }

  .menu-toggle span{
    width:24px;
  }

  .nav--capsule.is-open{
    top:64px;
    left:14px;
    right:14px;
  }

  /* Hero */
  .hero{
    padding-top:92px;
  }

  .hero__grid{
    gap:26px;
    padding-bottom:44px;
  }

  .eyebrow{
    font-size:9px;
    letter-spacing:.16em;
  }

  .hero__copy h1{
    font-size:clamp(43px,13vw,62px);
    line-height:.95;
    margin:16px 0 18px;
  }

  .hero__copy > p{
    font-size:15px;
    line-height:1.65;
  }

  .hero__actions{
    gap:10px;
    margin:26px 0 34px;
  }

  .btn{
    width:100%;
    min-height:50px;
  }

  .hero__mini{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
  }

  .hero__mini span{
    font-size:10px;
  }

  .hero-photo{
    min-height:430px;
    border-radius:24px;
  }

  .hero-photo__label{
    left:20px;
    top:20px;
    font-size:8px;
  }

  .hero-photo__statement{
    left:20px;
    bottom:136px;
  }

  .hero-photo__statement strong{
    font-size:36px;
  }

  .hero-photo__metrics{
    left:20px;
    right:20px;
    bottom:20px;
    gap:8px;
  }

  .hero-photo__metrics b{
    font-size:20px;
  }

  .hero-photo__metrics small{
    font-size:8px;
  }

  .hero-photo:after{
    width:120px;
    height:120px;
  }

  /* Ticker */
  .hero__ticker{
    padding:16px 0;
  }

  .ticker-group{
    gap:16px;
    padding-right:16px;
  }

  .ticker-group span{
    font-size:9px;
  }

  /* Typography */
  .section-heading h2,
  .about__copy h2,
  .cta h2,
  .satisfaction__copy h2,
  .results-time__copy h2,
  .global-reach__copy h2,
  .visual-story__copy h2{
    font-size:clamp(38px,11vw,52px);
  }

  /* Services */
  .services-grid{
    grid-template-columns:1fr;
  }

  .service-card{
    min-height:300px;
    border-radius:20px;
  }

  /* About */
  .about__visual{
    min-height:390px;
  }

  .about-panel{
    padding:42px 22px;
  }

  .about-panel strong{
    font-size:38px;
  }

  .about__copy{
    padding:58px 0 65px;
  }

  .about__features{
    grid-template-columns:1fr;
  }

  /* Process */
  .process{
    grid-template-columns:1fr;
  }

  .process__item{
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  /* Brand marquee */
  .brand-wall{
    padding:52px 0 60px;
  }

  .brand-wall__head{
    gap:15px;
  }

  .brand-logo{
    min-width:145px;
    height:76px;
    font-size:18px;
  }

  /* Satisfaction */
  .satisfaction__score{
    grid-template-columns:1fr;
    gap:26px;
  }

  .score-ring{
    width:270px !important;
    height:270px !important;
    margin:auto;
  }

  .score-ring__content .score-number{
    font-size:96px !important;
  }

  .score-ring__content .score-main em{
    font-size:28px !important;
  }

  .satisfaction__mini{
    grid-template-columns:1fr 1fr;
  }

  /* Results timeline */
  .results-time{
    padding:78px 0;
  }

  .result-timeline{
    padding-left:44px;
  }

  .result-step{
    padding:18px 18px;
  }

  /* Sticky graph on mobile:
     still animated by scroll, but compact enough to remain usable */
  .scroll-story{
    height:220vh;
  }

  .scroll-story__sticky{
    min-height:100svh;
    height:100svh;
  }

  .scroll-story__stage{
    gap:12px;
  }

  .scroll-story__copy{
    padding-top:58px;
  }

  .scroll-story__title{
    font-size:clamp(40px,11vw,52px);
    margin:9px 0 13px;
  }

  .scroll-story__text{
    font-size:13px;
    line-height:1.5;
  }

  .scroll-story__facts{
    margin-top:17px;
    gap:6px;
  }

  .scroll-fact{
    padding-top:10px;
  }

  .scroll-fact strong{
    font-size:11px;
  }

  .scroll-fact small{
    font-size:8px;
  }

  .growth-scene{
    min-height:315px;
    height:35vh;
    border-radius:20px;
  }

  .growth-chart{
    inset:54px 8px 18px;
    width:calc(100% - 16px);
    height:calc(100% - 72px);
  }

  .growth-heading{
    top:16px;
    left:16px;
  }

  .growth-heading b{
    font-size:14px;
  }

  .growth-label{
    display:block !important;
    width:auto;
    min-width:108px;
    max-width:135px;
    padding:9px 10px;
    border-radius:12px;
  }

  .growth-label span{
    font-size:6px;
  }

  .growth-label b{
    font-size:9px;
  }

  .growth-label--one{left:3%;bottom:5%}
  .growth-label--two{left:36%;top:40%}
  .growth-label--three{right:3%;top:12%}

  .growth-value{
    right:14px;
    bottom:12px;
  }

  .growth-value strong{
    font-size:31px;
  }

  /* Radar mobile: turn it into a centered scan canvas,
     then distribute cards around it without collisions */
  .reach-network{
    padding:78px 0 95px;
  }

  .global-reach__stats{
    grid-template-columns:repeat(3,1fr);
    gap:8px;
  }

  .global-reach__stats strong{
    font-size:24px;
  }

  .global-reach__stats span{
    font-size:9px;
  }

  .reach-stage{
    min-height:560px;
    margin-top:24px;
  }

  .reach-radar{
    width:320px;
    height:320px;
    top:48%;
  }

  .reach-core{
    top:48%;
    width:108px;
    height:108px;
    padding:16px;
  }

  .reach-core img{
    width:60px !important;
    max-height:58px !important;
  }

  .reach-node{
    min-width:112px;
    max-width:132px;
    padding:10px 11px;
    border-radius:14px;
  }

  .reach-node strong{
    font-size:10px;
  }

  .reach-node span,
  .reach-node small{
    font-size:7px;
  }

  .n1{left:0;top:19%}
  .n2{right:0;top:10%}
  .n3{left:1%;bottom:13%}
  .n4{right:0;bottom:18%}
  .o1{left:38%;top:1%}
  .o2{left:42%;bottom:1%}

  .reach-status{
    right:3%;
    top:51%;
    font-size:7px;
  }

  /* Visual story */
  .visual-story{
    padding:72px 0;
  }

  .visual-story__grid{
    grid-template-columns:1fr;
  }

  .visual-story__copy{
    padding:0 0 18px;
  }

  .story-card--large{
    min-height:330px;
  }

  /* CTA */
  .cta{
    padding:78px 0;
  }

  /* Footer */
  .footer{
    padding:48px 0 20px;
  }

  .footer__brand img{
    width:220px;
  }

  .footer__links{
    grid-template-columns:1fr;
  }

  .footer__bottom{
    flex-direction:column;
  }

  /* Fixed UI: keep from blocking content */
  .page-jump-controls{
    right:12px;
    bottom:12px;
  }

  .page-jump-btn{
    width:40px;
    height:40px;
    border-radius:13px;
  }

  .social-rail{
    right:12px;
    bottom:60px;
    padding:5px;
  }

  .social-rail a{
    width:31px;
    height:31px;
  }

  .social-rail svg{
    width:14px;
    height:14px;
  }

  /* Reduce cursor / hover-only features */
  .cursor,
  .cursor-follower{
    display:none !important;
  }
}

/* ---------- VERY SMALL PHONES ---------- */
@media (max-width: 390px){
  .hero__copy h1{
    font-size:42px;
  }

  .hero__mini{
    grid-template-columns:1fr;
  }

  .hero__mini div{
    grid-template-columns:34px 1fr;
    align-items:center;
  }

  .growth-label{
    max-width:110px;
  }

  .reach-stage{
    min-height:520px;
  }

  .reach-radar{
    width:285px;
    height:285px;
  }

  .reach-core{
    width:98px;
    height:98px;
  }

  .reach-node{
    min-width:102px;
    max-width:116px;
  }

  .o1{left:34%}
  .o2{left:39%}
}

/* Better viewport handling on modern mobile browsers */
@supports (height: 100svh){
  @media (max-width: 980px){
    .hero{
      min-height:100svh;
    }
    .scroll-story__sticky{
      min-height:100svh;
      height:100svh;
    }
  }
}

/* V22 — production accessibility polish */
.skip-link{position:fixed;left:16px;top:12px;z-index:30000;transform:translateY(-160%);padding:10px 14px;border-radius:10px;background:var(--lime);color:var(--ink);font-weight:800;transition:transform .2s ease}
.skip-link:focus{transform:translateY(0)}
:focus-visible{outline:2px solid var(--lime);outline-offset:4px}

/* =========================================================
   V23 — ultrawide + continuous ticker + mobile UX fixes
   ========================================================= */

/* Ultrawide: let the composition breathe without making text lines too long */
@media (min-width: 1800px){
  .container{width:min(78vw,1680px)}
  .site-header .nav-wrap{max-width:1680px}
  .site-header.is-scrolled .nav-wrap{max-width:1420px}
  .hero__grid{grid-template-columns:minmax(0,1.04fr) minmax(520px,.96fr);gap:clamp(70px,6vw,140px);min-height:760px}
  .hero__copy h1{font-size:clamp(76px,4.8vw,104px);max-width:900px}
  .hero__copy>p{font-size:17px;max-width:720px}
  .hero-photo{min-height:650px}
}
@media (min-width: 2600px){
  .container{width:min(72vw,2140px)}
  .site-header .nav-wrap{max-width:1900px}
  .site-header.is-scrolled .nav-wrap{max-width:1650px}
  .hero{padding-top:165px}
  .hero__grid{grid-template-columns:minmax(760px,1.05fr) minmax(650px,.95fr);gap:clamp(110px,6vw,190px);min-height:900px}
  .hero__copy{max-width:980px}
  .hero__copy h1{font-size:clamp(96px,3.35vw,122px);line-height:.96}
  .hero__copy>p{font-size:19px;line-height:1.7;max-width:790px}
  .hero-photo{min-height:760px;max-width:760px;margin-left:auto}
  .hero__mini{max-width:650px}
}

/* Ticker: JS sets the exact width of one repeated group. This prevents blank gaps on 3440px. */
.ticker-track--seamless{animation-name:tickerV23;animation-duration:30s;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes tickerV23{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-1 * var(--ticker-shift, 900px)),0,0)}}

/* CONTROL belongs to the first plotted point, not to the bottom edge of the card */
.growth-label--one{left:5.5%;bottom:auto;top:67%}
.growth-label--one:before{right:-10px;top:50%}

@media (max-width:980px){
  .site-header .nav-wrap{position:relative}
  .menu-toggle{position:relative;z-index:1003;width:46px;height:42px;padding:7px;border-radius:12px;touch-action:manipulation}
  .nav--capsule.is-open{z-index:1002;max-height:calc(100svh - 90px);overflow:auto}
  body.mobile-menu-open{overflow:hidden}

  /* Keep quick navigation and social links in separate corners. */
  .social-rail{left:14px;right:auto;bottom:16px;z-index:1640}
  .page-jump-controls{right:14px;bottom:14px;z-index:1650}

  /* Give the graph more usable vertical space on tablet/mobile. */
  .growth-scene{height:50vh;min-height:430px}
  .growth-chart{inset:66px 16px 26px;width:calc(100% - 32px);height:calc(100% - 92px)}
  .growth-label--one{left:4%;top:64%;bottom:auto}
}

@media (max-width:640px){
  .cursor,.cursor-follower{display:none!important}
  body,a,button{cursor:auto}
  .nav--capsule.is-open{left:0;right:0;top:58px;width:100%;padding:10px}

  /* Mobile graph gets its own composition instead of a squeezed desktop layout. */
  .scroll-story{height:235vh}
  .scroll-story__copy{padding-top:68px}
  .growth-scene{height:43vh;min-height:350px;margin-top:4px}
  .growth-chart{inset:58px 6px 28px;width:calc(100% - 12px);height:calc(100% - 86px)}
  .growth-heading{top:14px;left:14px}
  .growth-label{min-width:96px;max-width:118px;padding:8px 9px}
  .growth-label--one{left:2%;top:62%;bottom:auto}
  .growth-label--two{left:34%;top:40%}
  .growth-label--three{right:2%;top:13%}
  .growth-value{right:10px;bottom:9px}
  .growth-value strong{font-size:27px}
  .social-rail{left:10px;right:auto;bottom:10px;max-width:calc(100vw - 120px)}
  .social-rail a{width:32px;height:32px}
  .page-jump-controls{right:10px;bottom:10px}
}

/* =========================================================
   V24 — scroll score + fluid responsive system + graph label fix
   ========================================================= */

/* CONTROL: restore the original card position; only the lime cue moves above it. */
.growth-label--one{left:5%;top:auto;bottom:9%}
.growth-label--one:before{left:auto;right:20%;top:-11px}

/* The 96% metric is now a short scroll-controlled story. */
.satisfaction{
  position:relative;
  min-height:clamp(760px,165vh,1500px);
  padding:0;
}
.satisfaction__grid{
  position:sticky;
  top:clamp(68px,8vh,104px);
  min-height:calc(100svh - clamp(68px,8vh,104px));
  align-content:center;
  padding-block:clamp(46px,7vh,92px);
}
.score-ring{
  opacity:1;
  transform:scale(calc(.92 + var(--score-progress,0) * .08));
  transition:none;
}
.score-ring.is-visible{transform:scale(calc(.92 + var(--score-progress,0) * .08))}
.score-ring__value,
.score-ring.is-visible .score-ring__value{
  stroke-dashoffset:calc(100 - (var(--score-progress,0) * 96));
  transition:none;
}
.score-ring__content,
.score-ring.is-visible .score-ring__content{
  opacity:calc(.35 + var(--score-progress,0) * .65);
  transform:scale(calc(.94 + var(--score-progress,0) * .06));
  transition:none;
}
.score-ring::after,
.score-ring.is-visible::after{
  opacity:calc(.15 + var(--score-progress,0) * .85);
  animation:none;
  transform:translate(-50%,-50%) rotate(calc(-90deg + var(--score-progress,0) * 345.6deg)) translateY(-142px);
}

/* Fluid layout: fewer hard breakpoint jumps, more interpolation between screens. */
:root{--fluid-gutter:clamp(18px,3.2vw,64px)}
.container{width:min(calc(100% - (var(--fluid-gutter) * 2)),1680px)}
.hero__grid,.services__grid,.about__grid,.satisfaction__grid,.results-time__grid,.global-reach__grid{
  column-gap:clamp(28px,5vw,96px);
}
.growth-scene{min-height:clamp(390px,55vw,680px);max-height:72svh}
.score-ring{width:clamp(230px,22vw,320px);height:clamp(230px,22vw,320px)}
.score-ring__content strong{font-size:clamp(66px,6.4vw,92px)}

@media (max-width:980px){
  .satisfaction{min-height:145svh}
  .satisfaction__grid{top:62px;min-height:calc(100svh - 62px);padding-block:clamp(28px,5vh,56px)}
  .growth-label--one{left:4%;top:auto;bottom:8%}
  .growth-label--one:before{right:18%;top:-10px}
  .score-ring::after,.score-ring.is-visible::after{transform:translate(-50%,-50%) rotate(calc(-90deg + var(--score-progress,0) * 345.6deg)) translateY(-129px)}
}
@media (max-width:640px){
  .satisfaction{min-height:135svh}
  .satisfaction__grid{top:56px;min-height:calc(100svh - 56px);padding-block:24px;row-gap:24px}
  .satisfaction__copy h2{font-size:clamp(38px,11vw,54px)}
  .satisfaction__copy p{font-size:clamp(13px,3.6vw,15px)}
  .satisfaction__score{gap:18px}
  .score-ring{width:clamp(205px,64vw,250px);height:clamp(205px,64vw,250px)}
  .score-ring__content strong{font-size:clamp(60px,19vw,76px)}
  .score-ring::after,.score-ring.is-visible::after{transform:translate(-50%,-50%) rotate(calc(-90deg + var(--score-progress,0) * 345.6deg)) translateY(-108px)}
  /* labels remain hidden on small phones as in V23, so the chart keeps breathing room */
}
@media (min-width:1800px){
  .container{width:min(calc(100% - clamp(100px,8vw,280px)),1900px)}
  .growth-scene{min-height:600px}
}
@media (min-width:2600px){
  .container{width:min(calc(100% - clamp(180px,12vw,460px)),2200px)}
}
\n\n/* =========================================================\n   V25 — ultrawide hero attachment + calmer score story\n   ========================================================= */\n/* Keep both floating chips visually attached to the photograph at every width. */\n@media (min-width:1800px){\n  .hero__visual{width:100%;}\n  .hero-photo{width:100%;max-width:none;margin-inline:0;}\n  .floating-chip--1{right:clamp(-28px,-1.1vw,-12px);}\n  .floating-chip--2{left:clamp(-28px,-1.1vw,-12px);}\n}\n@media (min-width:2600px){\n  .hero__grid{grid-template-columns:minmax(760px,1fr) minmax(820px,1.08fr);gap:clamp(90px,5vw,170px);}\n  .hero__visual{max-width:none;}\n  .hero-photo{min-height:760px;width:100%;max-width:none;margin:0;}\n}\n\n/* More physical scroll distance + intentional hold at 0% and 96%.\n   JS maps the middle 64% of the journey to the ring animation. */\n.satisfaction{min-height:clamp(1050px,235svh,2400px);}\n@media (max-width:980px){.satisfaction{min-height:195svh;}}\n@media (max-width:640px){.satisfaction{min-height:175svh;}}\n
/* ===== V27 · MODO MANTENIMIENTO GLASS ===== */
.maintenance-overlay{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;z-index:2147483000;display:grid;place-items:center;padding:clamp(18px,4vw,64px);background:rgba(18,14,23,.48);backdrop-filter:blur(clamp(9px,1.1vw,18px)) saturate(.8);-webkit-backdrop-filter:blur(clamp(9px,1.1vw,18px)) saturate(.8);opacity:0;visibility:hidden;pointer-events:none;overflow:auto}
html.maintenance-active .maintenance-overlay{opacity:1;visibility:visible;pointer-events:auto}
html.maintenance-active,html.maintenance-active body{overflow:hidden!important;overscroll-behavior:none;height:100%}
html.maintenance-active body>*:not(.maintenance-overlay):not(script){pointer-events:none}
.maintenance-glass{width:min(92vw,660px);max-height:calc(100dvh - 36px);overflow:auto;text-align:center;padding:clamp(30px,5vh,58px) clamp(24px,5vw,62px) clamp(26px,4vh,44px);border:1px solid rgba(255,255,255,.25);border-radius:clamp(26px,3vw,42px);background:linear-gradient(145deg,rgba(41,37,47,.78),rgba(22,19,27,.72));box-shadow:0 28px 90px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.maintenance-logo{display:block;width:min(250px,62vw);height:auto;margin:0 auto clamp(24px,4vh,38px)}
.maintenance-status{display:inline-flex;align-items:center;gap:9px;font-size:clamp(10px,.72vw,12px);letter-spacing:.17em;font-weight:700;color:rgba(255,255,255,.66);margin-bottom:clamp(17px,2.6vh,28px)}
.maintenance-status i{width:8px;height:8px;border-radius:50%;background:#b8f21c;box-shadow:0 0 0 6px rgba(184,242,28,.08),0 0 18px rgba(184,242,28,.6);animation:maintenancePulse 1.8s ease-in-out infinite}
.maintenance-glass h2{margin:0;color:#fff;font-size:clamp(34px,4.2vw,62px);line-height:1.02;letter-spacing:-.045em;font-weight:600}.maintenance-glass h2 em{font-style:normal;color:#b8f21c}
.maintenance-glass p{max-width:510px;margin:clamp(20px,3vh,30px) auto;color:rgba(255,255,255,.68);font-size:clamp(14px,1.15vw,17px);line-height:1.7}
.maintenance-contact{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:50px;padding:0 23px;border:1px solid rgba(184,242,28,.35);border-radius:999px;color:#fff;text-decoration:none;font-size:14px;font-weight:600;background:rgba(184,242,28,.06);transition:.25s ease}.maintenance-contact:hover{background:#b8f21c;color:#211a29;border-color:#b8f21c;transform:translateY(-2px)}
.maintenance-glass small{display:block;margin-top:clamp(27px,4vh,42px);font-size:10px;letter-spacing:.24em;color:rgba(255,255,255,.38)}
@keyframes maintenancePulse{50%{opacity:.55;transform:scale(.78)}}
@media(max-width:600px){.maintenance-overlay{padding:14px}.maintenance-glass{width:100%;max-height:calc(100dvh - 28px);padding:32px 20px 27px;border-radius:26px}.maintenance-glass h2{font-size:clamp(31px,10vw,43px)}.maintenance-glass p br{display:none}.maintenance-contact{width:100%;max-width:280px}}
@media(max-height:650px) and (min-width:601px){.maintenance-glass{padding-top:25px;padding-bottom:22px}.maintenance-logo{width:190px;margin-bottom:18px}.maintenance-status{margin-bottom:14px}.maintenance-glass h2{font-size:36px}.maintenance-glass p{margin:14px auto;line-height:1.5}.maintenance-glass small{margin-top:18px}}
@media(prefers-reduced-motion:reduce){.maintenance-status i{animation:none}}

/* ===== V27.1 · mantenimiento robusto desde primer render ===== */
html.maintenance-active body { overflow: hidden !important; }
html.maintenance-active #maintenanceOverlay {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  display: grid !important;
}