/* ==========================================================================
   VERNEX — components.css
   The iOS glass system, buttons, nav, cards, forms, footer, overlays.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GLASS SURFACE — the core recipe everything else inherits
   -------------------------------------------------------------------------- */
.glass{
  position:relative;
  background:var(--vx-glass-bg);
  backdrop-filter:blur(var(--vx-glass-blur)) saturate(180%);
  -webkit-backdrop-filter:blur(var(--vx-glass-blur)) saturate(180%);
  border:1px solid var(--vx-glass-border);
  border-radius:var(--vx-r-lg);
  box-shadow:var(--vx-glass-shadow);
  isolation:isolate;
}
.glass--soft{
  background:linear-gradient(135deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018));
  border-color:rgba(255,255,255,0.08);
}

/* Older browsers: solid translucent surface instead of a see-through smear */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass,.glass--soft{ background:linear-gradient(135deg, rgba(17,38,38,0.94), rgba(12,27,28,0.96)); }
}


/* --------------------------------------------------------------------------
   2. BUTTONS — iPhone-style glass
   -------------------------------------------------------------------------- */
.btn{
  --btn-bloom:0 0 0 rgba(1,193,163,0);
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  min-height:52px; padding:0.95rem 1.8rem;
  border-radius:var(--vx-r-pill);
  font-family:var(--vx-font-body);
  font-weight:600; font-size:.98rem; letter-spacing:.005em;
  color:var(--vx-text);
  background:var(--vx-glass-bg);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  border:1px solid var(--vx-glass-border);
  box-shadow:var(--vx-glass-shadow), var(--btn-bloom);
  overflow:hidden;
  isolation:isolate;
  cursor:pointer;
  transition:transform .35s var(--vx-spring), box-shadow .35s var(--vx-ease-out),
             border-color .35s var(--vx-ease-out), color .3s var(--vx-ease-out);
  will-change:transform;
}
/* specular sweep */
.btn::before{
  content:"";
  position:absolute; top:0; bottom:0; left:-120%; width:70%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.38), transparent);
  transform:skewX(-18deg);
  transition:transform .6s cubic-bezier(0.22,1,0.36,1);
  pointer-events:none; z-index:1;
}
.btn:hover::before,.btn:focus-visible::before{ transform:translateX(320%) skewX(-18deg); }
/* teal rim light */
.btn::after{
  content:"";
  position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(140deg, rgba(104,250,230,.6), rgba(1,193,163,.15) 45%, transparent 65%, rgba(1,193,163,.45));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:.5; transition:opacity .35s var(--vx-ease-out);
  pointer-events:none; z-index:2;
}
.btn:hover{ --btn-bloom:0 10px 34px rgba(1,193,163,.22); border-color:rgba(104,250,230,.35); }
.btn:hover::after{ opacity:1; }
.btn:active{ transform:scale(.96); transition-duration:.12s; }

.btn__ico{ width:18px; height:18px; flex:none; transition:transform .35s var(--vx-ease-out); }
.btn:hover .btn__ico{ transform:translateX(3px); }

/* primary — teal gradient fill + outer bloom */
.btn--primary{
  color:var(--vx-black);
  background:var(--vx-grad-teal);
  border-color:rgba(104,250,230,.55);
  --btn-bloom:0 8px 30px rgba(1,193,163,.28);
  box-shadow:
    0 8px 30px rgba(1,193,163,.28),
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -2px 6px rgba(1,131,105,.5);
}
.btn--primary:hover{
  box-shadow:
    0 14px 44px rgba(1,193,163,.45),
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -2px 6px rgba(1,131,105,.5);
}
.btn--primary::before{ background:linear-gradient(105deg, transparent, rgba(255,255,255,.65), transparent); }

/* ghost — transparent glass, silver text */
.btn--ghost{
  color:var(--vx-silver);
  background:linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  border-color:rgba(215,221,224,.18);
  box-shadow:0 6px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.14);
}
.btn--ghost:hover{ color:var(--vx-text); border-color:var(--vx-teal); }

.btn--sm{ min-height:44px; padding:.65rem 1.25rem; font-size:.88rem; }
.btn--lg{ min-height:60px; padding:1.1rem 2.3rem; font-size:1.05rem; }
.btn--block{ width:100%; }

/* text link with animated teal underline */
.link-arrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-weight:600; font-size:.95rem; color:var(--vx-teal);
  position:relative; padding-bottom:2px;
}
.link-arrow::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--vx-teal);
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--vx-ease-out);
}
.link-arrow:hover::after,.link-arrow:focus-visible::after{ transform:scaleX(1); }
.link-arrow svg{ width:15px; height:15px; transition:transform .35s var(--vx-ease-out); }
.link-arrow:hover svg{ transform:translateX(4px); }

/* --------------------------------------------------------------------------
   3. SQUIRCLE LOGO BADGE
   -------------------------------------------------------------------------- */
.squircle{
  position:relative;
  display:grid; place-items:center;
  width:var(--sq, 46px); height:var(--sq, 46px);
  border-radius:28%;
  background:linear-gradient(150deg, rgba(1,193,163,.20), rgba(4,9,10,.9) 55%, rgba(1,131,105,.25));
  border:1px solid rgba(104,250,230,.28);
  box-shadow:
    0 6px 22px rgba(1,193,163,.20),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -6px 14px rgba(1,131,105,.25);
  overflow:hidden;
  flex:none;
  transition:transform .45s var(--vx-spring), box-shadow .45s var(--vx-ease-out), border-color .45s var(--vx-ease-out);
  will-change:transform;
}
.squircle::before{ /* inner glass sheen */
  content:""; position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(255,255,255,.22), transparent 45%);
  pointer-events:none;
}
.squircle img{ width:72%; height:auto; filter:drop-shadow(0 2px 8px rgba(1,193,163,.55)); }
a:hover .squircle,.squircle:hover{
  transform:rotate(-5deg) scale(1.06);
  border-color:var(--vx-teal-bright);
  box-shadow:0 10px 32px rgba(1,193,163,.45), inset 0 1px 0 rgba(255,255,255,.3), inset 0 -6px 14px rgba(1,131,105,.3);
}

/* --------------------------------------------------------------------------
   4. NAVBAR
   -------------------------------------------------------------------------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:900;
  padding:1rem 0;
  transition:padding .45s var(--vx-ease-out);
}
.nav__inner{
  width:min(var(--vx-wrap), 94vw);
  margin-inline:auto;
  display:flex; align-items:center; gap:1.25rem;
  padding:.6rem .7rem .6rem .8rem;
  border-radius:var(--vx-r-pill);
  border:1px solid transparent;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  transition:background .5s var(--vx-ease-out), border-color .5s var(--vx-ease-out),
             box-shadow .5s var(--vx-ease-out), width .5s var(--vx-ease-out), backdrop-filter .5s;
}
/* floating glass pill once scrolled */
.nav.is-stuck .nav__inner{
  width:min(1120px, 94vw);
  background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.028));
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-color:rgba(1,193,163,.22);
  box-shadow:0 10px 34px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(1,193,163,.14);
}
.nav__brand{ display:flex; align-items:center; gap:.7rem; font-family:var(--vx-font-display); font-weight:700; letter-spacing:.02em; }
.nav__brand span{ font-size:1.02rem; background:var(--vx-grad-metal); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.nav__links{ display:none; margin-inline:auto; gap:.25rem; }
@media (min-width:1000px){ .nav__links{ display:flex; } }
.nav__link{
  position:relative; padding:.55rem .95rem; border-radius:var(--vx-r-pill);
  font-size:.92rem; font-weight:500; color:var(--vx-muted);
  transition:color .3s var(--vx-ease-out), background .3s var(--vx-ease-out);
}
.nav__link:hover{ color:var(--vx-text); background:rgba(255,255,255,.05); }
.nav__link[aria-current="page"]{ color:var(--vx-text); }
.nav__link[aria-current="page"]::after{
  content:""; position:absolute; left:50%; bottom:2px; translate:-50% 0;
  width:16px; height:2px; border-radius:2px; background:var(--vx-teal);
  box-shadow:0 0 10px var(--vx-teal);
}
.nav__cta{ display:none; margin-left:auto; }
@media (min-width:1000px){ .nav__cta{ display:inline-flex; margin-left:0; } }

/* hamburger → X */
.burger{
  margin-left:auto;
  width:46px; height:46px; display:grid; place-items:center;
  border-radius:var(--vx-r-pill);
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
@media (min-width:1000px){ .burger{ display:none; } }
.burger span{
  display:block; width:19px; height:1.6px; border-radius:2px; background:var(--vx-text);
  transition:transform .4s var(--vx-ease-out), opacity .25s linear;
}
.burger span + span{ margin-top:5px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.6px) rotate(-45deg); }

/* full-screen glass mobile menu */
.menu{
  position:fixed; inset:0; z-index:890;
  display:grid; align-content:center; justify-items:start;
  gap:.35rem;
  padding:8rem 8vw 4rem;
  background:linear-gradient(160deg, rgba(7,19,20,.86), rgba(4,9,10,.94));
  backdrop-filter:blur(26px) saturate(180%);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .45s var(--vx-ease-out), visibility .45s;
}
.menu.is-open{ opacity:1; visibility:visible; pointer-events:auto; }
.menu__link{
  font-family:var(--vx-font-display); font-weight:700;
  font-size:clamp(1.9rem, 8vw, 3rem); letter-spacing:-.03em;
  color:var(--vx-text);
  opacity:0; transform:translateY(26px);
  transition:opacity .5s var(--vx-ease-out), transform .5s var(--vx-ease-out), color .3s;
  padding-block:.18em;
}
.menu.is-open .menu__link{ opacity:1; transform:none; }
.menu__link:hover{ color:var(--vx-teal); }
.menu__foot{ margin-top:2.25rem; display:grid; gap:1rem; width:min(420px,100%); opacity:0; transition:opacity .5s .35s var(--vx-ease-out); }
.menu.is-open .menu__foot{ opacity:1; }

/* --------------------------------------------------------------------------
   5. CARDS (glass + cursor spotlight)
   -------------------------------------------------------------------------- */
.card{
  --mx:50%; --my:0%;
  position:relative;
  display:flex; flex-direction:column; gap:1rem;
  padding:clamp(1.4rem, 2.2vw, 2rem);
  border-radius:var(--vx-r-lg);
  background:linear-gradient(150deg, rgba(255,255,255,.06), rgba(255,255,255,.016));
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 10px 34px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.14);
  overflow:hidden;
  transform-style:preserve-3d;
  transition:transform .5s var(--vx-ease-out), border-color .4s var(--vx-ease-out), box-shadow .4s var(--vx-ease-out);
  will-change:transform;
}
.card::before{ /* teal spotlight that follows the cursor */
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx) var(--my), rgba(1,193,163,.18), transparent 62%);
  opacity:0; transition:opacity .4s var(--vx-ease-out);
}
.card:hover::before{ opacity:1; }
.card:hover{ border-color:rgba(104,250,230,.32); box-shadow:0 22px 56px rgba(0,0,0,.5), 0 0 0 1px rgba(1,193,163,.12), inset 0 1px 0 rgba(255,255,255,.2); }
.card > *{ position:relative; z-index:1; }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .card{ background:linear-gradient(150deg, rgba(17,38,38,.92), rgba(12,27,28,.95)); }
}

.card__num{ font-family:var(--vx-font-mono); font-size:.72rem; letter-spacing:.18em; color:var(--vx-teal); }
.card__ico{
  width:54px; height:54px; display:grid; place-items:center; flex:none;
  border-radius:16px;
  background:linear-gradient(150deg, rgba(1,193,163,.16), rgba(255,255,255,.02));
  border:1px solid rgba(1,193,163,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 6px 18px rgba(0,0,0,.3);
}
.card__ico svg{ width:26px; height:26px; stroke:var(--vx-teal); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.card__list{ display:grid; gap:.45rem; color:var(--vx-muted); font-size:.93rem; }
.card__list li{ display:flex; gap:.6rem; align-items:flex-start; line-height:1.5; }
.card__list li::before{
  content:""; flex:none; width:5px; height:5px; margin-top:.6em; border-radius:50%;
  background:var(--vx-teal); box-shadow:0 0 8px var(--vx-teal);
}
.card__media{
  margin:-.4rem -.4rem 0; border-radius:var(--vx-r-md); overflow:hidden;
  position:relative; aspect-ratio:16/9;
}
.card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--vx-ease-out); }
.card:hover .card__media img{ transform:scale(1.06); }
.card__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(1,193,163,.16), rgba(4,9,10,.75));
}
.card__foot{ margin-top:auto; padding-top:.4rem; }

/* small glass tile (value pillars, why-us rows, stats) */
.tile{
  padding:1.35rem 1.4rem;
  border-radius:var(--vx-r-md);
  background:linear-gradient(150deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 8px 24px rgba(0,0,0,.3);
  transition:transform .4s var(--vx-ease-out), border-color .4s var(--vx-ease-out);
}
.tile:hover{ transform:translateY(-4px); border-color:rgba(1,193,163,.3); }

/* framed photo — the standard brand image treatment */
.frame{
  position:relative; border-radius:var(--vx-r-lg); overflow:hidden;
  border:1px solid rgba(1,193,163,.22);
  box-shadow:0 26px 70px rgba(0,0,0,.55), 0 0 60px rgba(1,193,163,.10);
  background:var(--vx-surface);
}
.frame img{ width:100%; height:100%; object-fit:cover; }
.frame::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(160deg, rgba(1,193,163,.18), transparent 45%, rgba(4,9,10,.55));
}
.frame::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  border-radius:inherit; box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}

/* --------------------------------------------------------------------------
   6. FORMS
   -------------------------------------------------------------------------- */
.field{ position:relative; display:block; }
.field__input{
  width:100%;
  padding:1.45rem 1.1rem .65rem;
  border-radius:var(--vx-r-md);
  background:linear-gradient(150deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.1);
  color:var(--vx-text);
  font-size:.98rem;
  transition:border-color .3s var(--vx-ease-out), box-shadow .3s var(--vx-ease-out), background .3s;
  appearance:none;
}
textarea.field__input{ min-height:140px; resize:vertical; padding-top:1.65rem; line-height:1.6; }
select.field__input{
  padding-top:1.45rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2301C1A3' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; background-size:16px;
}
select.field__input option{ background:var(--vx-surface); color:var(--vx-text); }
.field__label{
  position:absolute; left:1.1rem; top:1.05rem;
  font-size:.95rem; color:var(--vx-muted); pointer-events:none;
  transform-origin:left top;
  transition:transform .3s var(--vx-ease-out), color .3s var(--vx-ease-out);
}
.field__input:focus{
  outline:none;
  border-color:var(--vx-teal);
  box-shadow:0 0 0 3px rgba(1,193,163,.22), inset 0 1px 0 rgba(255,255,255,.12);
}
.field__input:focus + .field__label,
.field__input:not(:placeholder-shown) + .field__label,
select.field__input:valid + .field__label,
.field.is-filled .field__label{
  transform:translateY(-.72rem) scale(.76);
  color:var(--vx-teal);
}
.field__error{
  display:block; min-height:1.15rem; margin-top:.3rem;
  font-size:.78rem; color:#FF8E8E; opacity:0; transform:translateY(-4px);
  transition:opacity .25s, transform .25s;
}
.field.is-invalid .field__input{ border-color:#FF8E8E; box-shadow:0 0 0 3px rgba(255,142,142,.16); }
.field.is-invalid .field__error{ opacity:1; transform:none; }

.form-note{ font-size:.82rem; color:var(--vx-muted); }
.form-success{
  display:none;
  padding:1.4rem 1.5rem; border-radius:var(--vx-r-md);
  border:1px solid rgba(1,193,163,.35);
  background:linear-gradient(150deg, rgba(1,193,163,.14), rgba(255,255,255,.02));
  color:var(--vx-text);
}
.form-success.is-shown{ display:flex; gap:.9rem; align-items:flex-start; }
.form-success svg{ width:22px; height:22px; flex:none; stroke:var(--vx-teal); fill:none; stroke-width:2; }

/* --------------------------------------------------------------------------
   7. FOOTER
   -------------------------------------------------------------------------- */
.footer{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--vx-black), #030708);
  border-top:1px solid var(--vx-line);
  padding-top:clamp(3.5rem,6vw,5.5rem);
}
.footer__mark{
  position:absolute; left:50%; bottom:-2.5vw; translate:-50% 0;
  font-family:var(--vx-font-display); font-weight:700;
  font-size:clamp(5rem, 21vw, 19rem); line-height:.8; letter-spacing:-.04em;
  color:rgba(215,221,224,.028);
  pointer-events:none; user-select:none; white-space:nowrap; z-index:0;
}
.footer__grid{
  position:relative; z-index:1;
  display:grid; gap:2.5rem;
  grid-template-columns:1fr;
  padding-bottom:3rem;
}
@media (min-width:700px){ .footer__grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .footer__grid{ grid-template-columns:1.5fr repeat(4,1fr); gap:2rem; } }
.footer h2,.footer h4{ font-family:var(--vx-font-mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--vx-teal); margin-bottom:1.1rem; font-weight:500; }
.footer__links{ display:grid; gap:.6rem; }
.footer__links a{ color:var(--vx-muted); font-size:.92rem; transition:color .3s, transform .3s; display:inline-block; }
.footer__links a:hover{ color:var(--vx-text); transform:translateX(3px); }
.footer__bottom{
  position:relative; z-index:1;
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between;
  padding-block:1.5rem; border-top:1px solid var(--vx-line);
  font-size:.84rem; color:var(--vx-muted);
}

/* social icon row */
.socials{ display:flex; flex-wrap:wrap; gap:.6rem; }
.social{
  width:42px; height:42px; display:grid; place-items:center;
  border-radius:50%;
  background:linear-gradient(150deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  transition:transform .4s var(--vx-spring), border-color .3s, background .3s;
}
.social svg{ width:17px; height:17px; fill:var(--vx-silver-dim); transition:fill .3s; }
.social:hover{ transform:scale(1.14) translateY(-2px); border-color:var(--vx-teal); background:linear-gradient(150deg, rgba(1,193,163,.2), rgba(255,255,255,.03)); }
.social:hover svg{ fill:var(--vx-teal-bright); }

.to-top{
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(150deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  transition:transform .4s var(--vx-spring), border-color .3s;
}
.to-top:hover{ transform:translateY(-4px); border-color:var(--vx-teal); }
.to-top svg{ width:16px; height:16px; stroke:var(--vx-teal); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* --------------------------------------------------------------------------
   8. FLOATING WHATSAPP
   -------------------------------------------------------------------------- */
.wa-float{
  position:fixed; right:clamp(1rem,2.5vw,1.75rem); bottom:clamp(1rem,2.5vw,1.75rem);
  z-index:880;
  width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(150deg, rgba(1,193,163,.32), rgba(4,9,10,.85));
  border:1px solid rgba(104,250,230,.4);
  backdrop-filter:blur(16px) saturate(180%); -webkit-backdrop-filter:blur(16px) saturate(180%);
  box-shadow:0 10px 30px rgba(0,0,0,.5), 0 0 24px rgba(1,193,163,.3);
  transition:transform .45s var(--vx-spring), box-shadow .4s;
}
.wa-float svg{ width:27px; height:27px; fill:var(--vx-glow); }
.wa-float:hover{ transform:scale(1.08); box-shadow:0 14px 40px rgba(0,0,0,.55), 0 0 40px rgba(1,193,163,.5); }
.wa-float::after{ /* pulse ring */
  content:""; position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(1,193,163,.6);
  animation:wa-pulse 2.6s var(--vx-ease-out) infinite;
}
@keyframes wa-pulse{
  0%{ transform:scale(1); opacity:.65; }
  70%{ transform:scale(1.45); opacity:0; }
  100%{ transform:scale(1.45); opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .wa-float::after{ animation:none; opacity:0; } }

/* --------------------------------------------------------------------------
   9. PRELOADER · PAGE CURTAIN · CUSTOM CURSOR
   -------------------------------------------------------------------------- */
.preloader{
  position:fixed; inset:0; z-index:2000;
  display:none; place-items:center;
  background:radial-gradient(circle at 50% 45%, #08191A 0%, var(--vx-black) 65%);
}
.js .preloader{ display:grid; }
.preloader__inner{ display:grid; justify-items:center; gap:1.6rem; }
.preloader svg{ width:clamp(88px,14vw,130px); height:auto; overflow:visible; }
.preloader svg path{
  fill:none; stroke:var(--vx-teal); stroke-width:3; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 10px rgba(1,193,163,.7));
}
.preloader__bar{ width:min(220px,50vw); height:2px; border-radius:2px; background:rgba(255,255,255,.1); overflow:hidden; }
.preloader__bar i{ display:block; height:100%; width:0%; background:var(--vx-grad-teal); box-shadow:0 0 12px var(--vx-teal); }
.preloader__pct{ font-family:var(--vx-font-mono); font-size:.72rem; letter-spacing:.18em; color:var(--vx-muted); }

.curtain{
  position:fixed; inset:0; z-index:1900; pointer-events:none;
  background:linear-gradient(140deg, var(--vx-teal-deep), var(--vx-black) 55%);
  transform:translateY(100%);
}

.cursor,.cursor-ring{
  position:fixed; top:0; left:0; z-index:1800; pointer-events:none;
  border-radius:50%; opacity:0;
  mix-blend-mode:screen;
}
.cursor{ width:7px; height:7px; background:var(--vx-teal-bright); box-shadow:0 0 12px var(--vx-teal); }
.cursor-ring{
  width:38px; height:38px; border:1px solid rgba(1,193,163,.55);
  display:grid; place-items:center;
  transition:width .35s var(--vx-ease-out), height .35s var(--vx-ease-out), background .35s, border-color .35s;
}
.cursor-ring span{
  font-family:var(--vx-font-mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--vx-black); opacity:0; transition:opacity .25s;
}
.cursor-ring.is-hot{ width:74px; height:74px; background:rgba(1,193,163,.9); border-color:transparent; }
.cursor-ring.is-hot span{ opacity:1; }
@media (hover:none),(pointer:coarse){ .cursor,.cursor-ring{ display:none!important; } }
@media (prefers-reduced-motion: reduce){ .cursor,.cursor-ring{ display:none!important; } }

/* --------------------------------------------------------------------------
   10. MARQUEE
   -------------------------------------------------------------------------- */
.marquee{
  position:relative; overflow:hidden;
  padding-block:1.4rem;
  border-block:1px solid var(--vx-line);
  background:linear-gradient(180deg, rgba(1,193,163,.05), transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track{ display:flex; width:max-content; will-change:transform; }
.marquee__group{ display:flex; align-items:center; gap:2.2rem; padding-right:2.2rem; }
.marquee__item{
  font-family:var(--vx-font-display); font-weight:600;
  font-size:clamp(1rem,1.7vw,1.5rem); letter-spacing:-.01em;
  color:var(--vx-silver-dim); white-space:nowrap;
  display:flex; align-items:center; gap:2.2rem;
}
.marquee__item svg{ width:15px; height:15px; fill:var(--vx-teal); flex:none; filter:drop-shadow(0 0 6px rgba(1,193,163,.7)); }

/* --------------------------------------------------------------------------
   11. ACCORDION (FAQ)
   -------------------------------------------------------------------------- */
.acc{ display:grid; gap:.8rem; }
.acc__item{
  border-radius:var(--vx-r-md); overflow:hidden;
  background:linear-gradient(150deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transition:border-color .35s var(--vx-ease-out), background .35s;
}
.acc__item.is-open{ border-color:rgba(1,193,163,.32); background:linear-gradient(150deg, rgba(1,193,163,.08), rgba(255,255,255,.02)); }
.acc__btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.2rem;
  padding:1.15rem 1.35rem; text-align:left;
  font-family:var(--vx-font-display); font-weight:600; font-size:clamp(1rem,1.3vw,1.12rem);
  color:var(--vx-text); letter-spacing:-.01em;
}
.acc__sign{ position:relative; width:20px; height:20px; flex:none; }
.acc__sign::before,.acc__sign::after{
  content:""; position:absolute; inset:50% 0 auto 0; height:1.6px; border-radius:2px;
  background:var(--vx-teal); translate:0 -50%;
  transition:transform .4s var(--vx-ease-out), opacity .3s;
}
.acc__sign::after{ transform:rotate(90deg); }
.acc__item.is-open .acc__sign::after{ transform:rotate(0deg); opacity:0; }
.acc__panel{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .45s var(--vx-ease-out);
}
.acc__item.is-open .acc__panel{ grid-template-rows:1fr; }
.acc__panel > div{ overflow:hidden; }
.acc__panel p{ padding:0 1.35rem 1.3rem; color:var(--vx-muted); font-size:.96rem; max-width:68ch; }

/* --------------------------------------------------------------------------
   12. LIGHTBOX
   -------------------------------------------------------------------------- */
.lightbox{
  position:fixed; inset:0; z-index:1500;
  display:grid; place-items:center; padding:clamp(1rem,4vw,3rem);
  background:rgba(4,9,10,.88);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  opacity:0; visibility:hidden; transition:opacity .35s var(--vx-ease-out), visibility .35s;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox__fig{ display:grid; gap:1rem; justify-items:center; max-width:min(1000px,94vw); }
.lightbox__fig img{
  max-height:74vh; width:auto; border-radius:var(--vx-r-lg);
  border:1px solid rgba(1,193,163,.25);
  box-shadow:0 30px 80px rgba(0,0,0,.7);
}
.lightbox__cap{ text-align:center; color:var(--vx-muted); font-size:.92rem; }
.lightbox__cap strong{ display:block; color:var(--vx-text); font-family:var(--vx-font-display); font-size:1.1rem; }
.lb-btn{
  position:absolute; top:50%; translate:0 -50%;
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(150deg, rgba(255,255,255,.1), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transition:transform .35s var(--vx-spring), border-color .3s;
}
.lb-btn:hover{ transform:translateY(-50%) scale(1.08); border-color:var(--vx-teal); }
.lb-prev{ left:clamp(.6rem,2vw,2rem); }
.lb-next{ right:clamp(.6rem,2vw,2rem); }
.lb-close{ top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem); translate:0; }
.lb-close:hover{ transform:scale(1.08); }
.lb-btn svg{ width:20px; height:20px; stroke:var(--vx-text); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* --------------------------------------------------------------------------
   13. PILL FILTER BAR
   -------------------------------------------------------------------------- */
.filters{ display:flex; flex-wrap:wrap; gap:.6rem; }
.filter{
  min-height:44px; padding:.6rem 1.25rem;
  border-radius:var(--vx-r-pill);
  font-size:.88rem; font-weight:500; color:var(--vx-muted);
  background:linear-gradient(150deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  transition:color .3s, border-color .3s, background .3s, transform .3s var(--vx-spring);
}
.filter:hover{ color:var(--vx-text); border-color:rgba(1,193,163,.35); }
.filter:active{ transform:scale(.96); }
.filter[aria-pressed="true"]{
  color:var(--vx-black); font-weight:600;
  background:var(--vx-grad-teal); border-color:rgba(104,250,230,.5);
  box-shadow:0 8px 24px rgba(1,193,163,.3), inset 0 1px 0 rgba(255,255,255,.4);
}

/* --------------------------------------------------------------------------
   14. BADGE / CHIP
   -------------------------------------------------------------------------- */
.chip{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.4rem .85rem; border-radius:var(--vx-r-pill);
  font-family:var(--vx-font-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--vx-teal);
  background:rgba(1,193,163,.1);
  border:1px solid rgba(1,193,163,.25);
}
.chip--dot::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--vx-teal); box-shadow:0 0 8px var(--vx-teal); }