/* ==========================================================
   VOISEK – style.css
   Sections: Variables → Reset → Navbar → Hero → Dashboard
              → Floating Cards → Responsive
   ========================================================== */
@font-face {
    font-family: 'Borscha';
    src: url('../fonts/borscha/Borscha-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Borscha';
    src: url('../fonts/borscha/Borscha-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'HostGrotesk';
    src: url('../fonts/hostgrotesk/HostGrotesk-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/montserrat/Montserrat-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto/Roboto-VariableFont_wdth\,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}




   /* ── CSS Variables ─────────────────────────────────────── */
:root {
  --color-bg:           #091828;
  --color-bg-card:      #0d1b2e;
  --color-bg-navbar:    rgba(8, 18, 36, 0.82);
  --color-accent:       #00d084;
  --color-accent-dark:  #00a86b;
  --color-blue-glow:    #1a4fff;
  --color-text:         #f0f4ff;
  --color-text-muted:   #7a8fa8;
  --color-border:       rgba(255,255,255,0.07);

  --dash-bg:            #0b1525;
  --dash-sidebar:       #0d1e35;
  --dash-card:          #112038;
  --dash-accent:        #00d084;
  --dash-purple:        #7c6aff;
  --vs-bg:          #031B2E;
  --vs-bg-mid:      #042236;
  --vs-green:       #3DDC84;
  --vs-green-dim:   #2ab86a;
  --vs-green-glow:  rgba(61,220,132,0.22);
  --vs-blue-accent: #1A9FFF;
  --vs-surface:     rgba(255,255,255,0.04);
  --vs-border:      rgba(255,255,255,0.08);
  --vs-text:        #E8F4FF;
  --vs-muted:       rgba(232,244,255,0.55);
  --vs-font-display: 'Inter', system-ui, -apple-system, sans-serif;
  --vs-radius:      16px;
  --vs-phone-w:     280px;
  --vs-phone-h:     560px;

  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  28px;

  --font-main: 'Inter', sans-serif;
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }


i{
    font-size:24px;
    color:#122836;
}
/* From Uiverse.io by adamgiebl */ 
.cssbuttons-io {
  position: relative;
  font-family: inherit;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.05em;
  border-radius: 0.8em;
  cursor: pointer;
  border: none;
  background: linear-gradient(to right, #8e2de2, #4a00e0);
  color: ghostwhite;
  overflow: hidden;
}

.cssbuttons-io svg {
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.5em;
}

.cssbuttons-io span {
  position: relative;
  z-index: 10;
  transition: color 0.4s;
  display: inline-flex;
  align-items: center;
  padding: 0.8em 1.2em 0.8em 1.05em;
}

.cssbuttons-io::before,
.cssbuttons-io::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.cssbuttons-io::before {
  content: "";
  background: #000;
  width: 120%;
  left: -10%;
  transform: skew(30deg);
  transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
}

.cssbuttons-io:hover::before {
  transform: translate3d(100%, 0, 0);
}

.cssbuttons-io:active {
  transform: scale(0.95);
}



body {
  font-family: var(--font-main);
  background-color: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { display: block; max-width: 100%; }

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-main);
  font-weight: 600;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.btn--primary {
  background: var(--color-accent);
  color: #06120e;
  padding: 10px 22px;
  font-size: 0.875rem;
  box-shadow: 0 0 18px rgba(0, 208, 132, 0.35);
}

.btn--primary:hover {
  background: var(--color-accent-dark);
  transform: translateY(-1px);
  box-shadow: 0 0 28px rgba(0, 208, 132, 0.5);
}

.btn--lg {
  padding: 14px 32px;
  font-size: 0.95rem;
  margin-top: 2rem;
  width: fit-content;
}

/* =====================================================
   NAVBAR
   ===================================================== */
.navbar-wrapper {
  position: fixed;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: none;
  z-index: 100;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-bg-navbar);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--color-border);
  border-radius: 0px;
  padding: 14px 28px;
}

/* Logo */
.navbar__logo {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--color-text);
  flex-shrink: 0;
}

/* Menu */
.navbar__menu {
  display: flex;
  gap: 36px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.navbar__link {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text-muted);
  transition: color 0.2s;
}

.navbar__link:hover,
.navbar__link.active { color: #3cd582 }

/* CTA */
.navbar__cta { flex-shrink: 0; }

/* Hamburger (hidden on desktop) */
.navbar__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.navbar__hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform 0.3s;
}

/* =====================================================
   HERO
   ===================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 100px;
}

/* Background glow orbs */
.hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
}

.hero__glow--blue {
  width: 700px;
  height: 600px;
  background: radial-gradient(circle, rgba(26, 79, 255, 0.28) 0%, transparent 70%);
  top: -100px;
  right: -80px;
}

.hero__glow--green {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(0, 208, 132, 0.18) 0%, transparent 70%);
  top: 200px;
  right: 200px;
}

/* Hero container – 2 columns */
.hero__container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 24px 80px;
  display: grid;
  grid-template-columns: 40% 60%;
    gap: 0;
  align-items: center;
}

/* ── Left column ── */
.hero__content { display: flex; flex-direction: column; }

.hero__eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--color-accent);
  margin-bottom: 18px;
  text-transform: uppercase;
}

.hero__headline {
  font-family: 'Borscha', sans-serif;
  font-weight: 400;

  font-size: clamp(2.6rem, 4.5vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: -1.5px;
  color: var(--color-text);
}

.hero__highlight { color: var(--color-accent); 
font-weight: 500;
}

.hero__body {
  margin-top: 22px;
  font-size: 0.97rem;
  line-height: 1.72;
  color: var(--color-text-muted);
  max-width: 430px;
}

/* ── Right column – visual ── */
.hero__visual{
    position:relative;
    min-height:850px;
}
.hero__dashboard-wrapper{
    position:absolute;
    inset:0;
    pointer-events:none;
}

.hero__dashboard-image{
    width: 1700px;
    max-width: none;

    position: absolute;

    right: -210px;
    top: 50%;
    z-index:-1;

    transform: translateY(-50%);
}
/* Laptop shell */
.hero__laptop {
  width: 100%;
  max-width: 640px;
  perspective: 1200px;
  transform: rotateY(-6deg) rotateX(4deg);
  filter: drop-shadow(0 40px 80px rgba(0,0,0,0.6));
}

.hero__screen {
  background: var(--dash-bg);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  border: 6px solid #1a2a42;
  border-bottom: none;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    0 0 60px rgba(26,79,255,0.15);
  position: relative;
}

.hero__laptop-chin {
  background: linear-gradient(180deg, #1a2a42 0%, #0f1c30 100%);
  height: 18px;
  border-radius: 0 0 4px 4px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 4px;
}

.hero__laptop-base {
  width: 100%;
  height: 8px;
  background: linear-gradient(180deg, #0f1c30 0%, #07111e 100%);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

/* =====================================================
   DASHBOARD (inside laptop screen)
   ===================================================== */
.dashboard {
  display: flex;
  height: 360px;
  font-size: 0.6rem;
}

/* Sidebar */
.dash__sidebar {
  width: 130px;
  background: var(--dash-sidebar);
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  border-right: 1px solid rgba(255,255,255,0.05);
}

.dash__logo-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.07);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 0.58rem;
  font-weight: 600;
  color: #c8d8f0;
  margin-bottom: 8px;
}

.dash__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dash__dot--green { background: var(--dash-accent); }
.dash__dot--red   { background: #ff5b5b; }

.dash__nav { display: flex; flex-direction: column; gap: 2px; }

.dash__nav-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 0.58rem;
  color: #6a85a8;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.dash__nav-item:hover { background: rgba(255,255,255,0.05); color: #c8d8f0; }

.dash__nav-item--active {
  background: rgba(0, 208, 132, 0.12);
  color: var(--dash-accent);
}

.dash__icon { font-size: 0.65rem; }

/* Main area */
.dash__main {
  flex: 1;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

/* Top bar */
.dash__topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dash__welcome {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dash__welcome-emoji { font-size: 0.9rem; }
.dash__welcome-title { font-size: 0.65rem; font-weight: 700; color: #e0ecff; }
.dash__welcome-sub   { font-size: 0.55rem; color: var(--color-text-muted); }

.dash__time-range {
  font-size: 0.53rem;
  color: var(--color-text-muted);
  background: rgba(255,255,255,0.05);
  padding: 4px 8px;
  border-radius: 6px;
}

/* Stats row */
.dash__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.dash__stat-card {
  background: var(--dash-card);
  border-radius: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,0.05);
}

.dash__stat-label { font-size: 0.52rem; color: var(--color-text-muted); margin-bottom: 4px; }
.dash__stat-value { font-size: 1.1rem; font-weight: 700; color: #e8f0ff; line-height: 1; }
.dash__stat-delta { font-size: 0.48rem; margin-top: 3px; }
.dash__stat-delta--up { color: var(--dash-accent); }

/* Chart */
.dash__chart-area {
  flex: 1;
  background: var(--dash-card);
  border-radius: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,0.05);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dash__chart-title { font-size: 0.55rem; font-weight: 600; color: #c8d8f0; }

.dash__chart { flex: 1; display: flex; flex-direction: column; }

.dash__svg { flex: 1; width: 100%; }

.dash__chart-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.42rem;
  color: var(--color-text-muted);
  padding: 2px 0;
}

/* Bottom row */
.dash__bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* Smart checks */
.dash__checks, .dash__audit {
  background: var(--dash-card);
  border-radius: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,0.05);
}

.dash__checks-title {
  font-size: 0.55rem;
  font-weight: 600;
  color: #c8d8f0;
  margin-bottom: 6px;
}

.dash__checks-body {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dash__donut-wrap { flex-shrink: 0; width: 60px; }
.dash__donut { width: 100%; }

.dash__checks-legend { display: flex; flex-direction: column; gap: 4px; }

.dash__legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.5rem;
  color: #8aa0bc;
}

.dash__legend-item strong { color: #e0ecff; margin-left: auto; }

.dash__legend-item--pct {
  margin-top: 2px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 0.48rem;
}

.green { color: var(--dash-accent); }
.red   { color: #ff5b5b; }

/* Audit */
.dash__audit-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.dash__view-link {
  font-size: 0.45rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--dash-accent);
  cursor: pointer;
}

.dash__audit-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 5px 0;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.dash__audit-icon { font-size: 0.75rem; margin-top: 1px; }
.dash__audit-name { font-size: 0.52rem; color: #c8d8f0; }
.dash__audit-date { font-size: 0.45rem; color: var(--color-text-muted); }

/* =====================================================
   FLOATING CARDS
   ===================================================== */
.hero__card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.97);
  color: #111;
  border-radius: var(--radius-md);
  padding: 12px 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.2);
  min-width: 220px;
  z-index: 10;
  animation: floatCard 4s ease-in-out infinite;
}

.hero__card--call{
    left:600px;
    bottom:170px;
}

.hero__card--sms{
    left:540px;
    bottom:90px;
}

@keyframes floatCard {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

.hero__card-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.hero__card-icon--phone { background: #d5f3e5; }
.hero__card-icon--sms   { background: #d5f3e5; }

.hero__card-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: #1a1a2e;
  white-space: nowrap;
}

.hero__card-sub {
  font-size: 0.68rem;
  color: #666;
  margin-top: 1px;
}

.hero__card-badge {
  margin-left: auto;
  font-size: 0.6rem;
  font-weight: 700;
  border-radius: 6px;
  padding: 3px 8px;
  white-space: nowrap;
}

.hero__card-badge--red {
  background: #ffe8e8;
  color: #d42b2b;
}

.hero__card::before{
    content:"";

    position:absolute;

    inset:-15px;

    border-radius:20px;

    border:1px solid rgba(60,213,130,.5);

    animation:cardWave 3s infinite;
}
@keyframes cardWave{

    0%{
        transform:scale(.95);
        opacity:.8;
    }

    100%{
        transform:scale(1.25);
        opacity:0;
    }

}

/* =====================================================
   RESPONSIVE – Tablet
   ===================================================== */
@media (max-width: 1024px) {
  .hero__container {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }



}




/* Laptop */
@media (max-width: 1377px){

    .hero__container{
        max-width: 1200px;
    }

    .hero__dashboard-image{
         width: 1200px !important;
         right: -80px;
         top: 40%;
         
    }

    .hero__card--call{
        left: 480px;
    }

    .hero__card--sms{
        left: 420px;
    }

    

}




/* =====================================================
   RESPONSIVE – Mobile
   ===================================================== */
@media (max-width: 768px) {

  /* Navbar */
  .navbar-wrapper { width: calc(100% - 24px); top: 10px; }

  .navbar { padding: 12px 18px; }

  .navbar__menu {
    display: none;
    flex-direction: column;
    position: fixed;
    top: 72px;
    left: 12px;
    right: 12px;
    transform:none;
    background: #0d1b2e;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    gap: 18px;
    z-index: 99;
  }

  .navbar__menu--open { display: flex; }

  .navbar__link { font-size: 1rem; }

  .navbar__cta { display: none; }

  .navbar__hamburger { display: flex; }

  /* Hero */
  .hero {
    padding-top: 80px;
    min-height: auto;
    padding-bottom: 60px;
  }

  .hero__container {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 0 16px 40px;
  }

  .hero__content { align-items: flex-start; }

  .hero__body { max-width: 100%; }

  /* Visual below text */
  .hero__visual { width: 100%; }
  


  .hero__laptop {
    transform: none;
    max-width: 100%;
  }

  .hero__card--call { left: -10px; bottom: 26%; }
  .hero__card--sms  { left: 0; bottom: 8%; }

  .hero__glow--blue  { width: 400px; height: 400px; right: -120px; }
  .hero__glow--green { width: 260px; height: 260px; right: 40px; top: 300px; }
}

@media (max-width: 480px) {
  .hero__card { min-width: 180px; padding: 10px 12px; }
  .hero__card-title { font-size: 0.72rem; }
  .hero__card-sub   { font-size: 0.62rem; }
  .hero__card-badge { font-size: 0.55rem; }
}


/* ==========================================
   EMPRESAS ALIADAS
========================================== */

.partners{
    width: 100%;
    padding: 70px 0;
    background: transparent;
}

.partners__container{
    max-width: 1300px;
    margin: 0 auto;
    padding: 40px 60px;

    background: #0054d1;
    border-radius: 24px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;

    position: relative;
    overflow: hidden;
}

.partners__container::before{
    content: "";
    position: absolute;
    inset: 0;

    background:
    radial-gradient(circle at 20% 50%,
    rgba(113,11,239,.15),
    transparent 40%);

    pointer-events: none;
}

.partners__title{
    color: #29ff8a;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
}

.partners__logos{
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 80px;
}

.partners__logo{
    height: 55px;
    width: auto;

    opacity: .9;
    transition: all .3s ease;
    filter: brightness(0) invert(1);
}

.partners__logo:hover{
    opacity: 1;
    transform: translateY(-4px);
}

@media (max-width: 768px){


    .partners__logos{
        gap: 40px;
    }

    .partners__logo{
        height: 40px;
    }

    
}
/* ==========================================
   AMENAZAS QUE COMBATIMOS
========================================== */

.threats{
    position: relative;
    padding: 120px 30px;
    overflow: hidden;
    background: #f6f7f8;
}



.threats__header{
    max-width: 700px;
    margin: 0 auto 80px;
    text-align: center;
}

.threats__eyebrow{
    color: #41e88b;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.threats__title{
    font-family: 'Borscha', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.8rem);
    font-weight: 400; /* Regular */
    line-height: 1.1;
    color: #111827;
    margin-bottom: 20px;
}

.threats__title span{
    color: #41e88b;
}

.threats__description{
    color: #111827;
    font-size: 1rem;
    line-height: 1.7;
}

/* GRID */

.threats__grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(300px, 1fr));
    gap: 50px;

    max-width: 1400px;
    margin: 0 auto;
    align-items: start;
}

/* CARD */

.threat-card{
    display: flex;
    
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.threat-card__info{
    width: 100%;
    max-width: 420px;

    padding: 15px 25px;

    background: #ffff;
    border: 1px solid #d1d5db;
    border-radius: 16px;

    transition: .3s ease;
}

.threat-card:hover .threat-card__info{
    transform: translateY(-8px);
    border-color: rgba(65,232,139,.4);

    box-shadow:
    0 20px 60px rgba(65,232,139,.15);
}
.threat-card__icon img{
    width: 32px;
    height: 32px;
}

.threat-card__icon{
    display: flex;
    justify-content: center;
    align-items: center;

    width: 64px;
    height: 64px;

    margin: 0 auto 10px;

    border-radius: 16px;
    font-size: 28px;
}
.outline__icon{
    display: flex;
    justify-content: center;
    align-items: center;

    width: 25px;
    height:25px;



    
    font-size: 28px;
}
.threat-card h3{
    font-family: 'HostGrotesk', sans-serif;
    font-weight: 700; /* o 300 */
    color: #111827;
    font-size: 1.6rem;
    margin-bottom: 8px;
}

.threat-card p{
    color: #111827;
    line-height: 1.4;
    font-size: .95rem;
}

/* PHONE */

.threat-card__phone{
    margin-top: 25px;
}

.threat-card__phone img{
    width: 100%;
    max-width: 320px;
    height: auto;

    transition: .4s ease;
}

.threat-card__phone video {
    width: 100%;
    height: auto;

    filter: grayscale(100%);
    transition: filter 0.4s ease;
  

    transition: .4s ease;
}

.threat-card:hover .threat-card__phone video{
    transform: translateY(-10px);
    filter: grayscale(0%);
}

.threat-card:hover .threat-card__phone img{
    transform: translateY(-10px);
}

/* BUTTON */

.threat-card__btn{
    position:relative;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    margin-top:25px;

    background:linear-gradient(
        90deg,
        #41e88b,
        #24c96b
    );

    color:#081019;
    text-decoration:none;

    font-weight:700;
    font-size:.95rem;

    padding:14px 32px;
    border-radius:999px;

    overflow:hidden;

    transition:
        transform .3s ease,
        box-shadow .3s ease;

    box-shadow:
        0 10px 25px rgba(65,232,139,.25);
}

/* Contenido */

.threat-card__btn span{
    position:relative;
    z-index:3;

    display:flex;
    align-items:center;
    gap:8px;

    transition:color .4s ease;
}

/* Barrido azul */

.threat-card__btn::before{
    content:"";

    position:absolute;

    top:0;
    left:-15%;

    width:130%;
    height:100%;

    background:#0054d1;

    transform:
        skewX(30deg)
        translateX(-120%);

    transition:
        transform .55s cubic-bezier(.3,1,.8,1);

    z-index:1;
}

.threat-card__btn:hover::before{
    transform:
        skewX(30deg)
        translateX(0);
}

/* Shine */

.threat-card__btn::after{
    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:60px;
    height:100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.35),
            transparent
        );

    transform:skewX(-20deg);

    transition:.8s;

    z-index:2;
}

.threat-card__btn:hover::after{
    left:140%;
}

/* Hover */

.threat-card__btn:hover{
    transform:translateY(-3px);

    box-shadow:
        0 15px 35px rgba(0,84,209,.35);
}

.threat-card__btn:hover span{
    color:white;
}

/* GLOW */

.threats::before{
    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    background:
    radial-gradient(
        circle,
        rgba(65,232,139,.10),
        transparent 70%
    );

    left: -200px;
    bottom: -250px;

    pointer-events: none;
}

.threats::after{
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    background:
    radial-gradient(
        circle,
        rgba(113,11,239,.08),
        transparent 70%
    );

    right: -150px;
    top: -150px;

    pointer-events: none;
}

/* MOBILE */

@media (max-width: 1100px){

    .threats__grid{
        grid-template-columns: 1fr;
        max-width: 500px;
    }

}

@media (max-width: 768px){

    .threats{
        padding: 80px 20px;
    }

    .threats__title{
        font-size: 2.2rem;
    }

    .threat-card__phone img{
        max-width: 260px;
    }

    .threat-card__btn{
        width: 100%;
    }

}

/* =========================
   SOLUTIONS
========================= */

.solutions{
    position:relative;
    padding:120px 40px;
    background:#f8f9fb;
    overflow:hidden;
}

.solutions__header{
    text-align:center;
    max-width:800px;
    margin:0 auto 70px;
}

.solutions__eyebrow{
    color:#3cd582;
    font-size:13px;
    font-weight:700;
    letter-spacing:2px;
}

.solutions__title{
    font-family:'Borscha',sans-serif;
    font-weight:400;
    font-size: clamp(1.7rem, 3vw, 2.8rem);
    color:#111827;
    line-height:1.05;
}

.solutions__title span{
    color:#3cd582;
}

.solutions__description{
    margin-top:20px;
    color:#4b5563;
    max-width:600px;
    margin-inline:auto;
    line-height:1.3;
}

.solutions__grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    max-width:1400px;
    margin:0 auto 40px;
}

.solution-card{
    background:#f2f5f5;
    border:1px solid #e4e7eb;
    border-radius:24px;
    padding:35px 25px;
    text-align:center;
}

.solution-card__icon{
    width:50px;
    height:50px;
    margin:0 auto 20px;
}

.solution-card__icon--glow{
    filter:drop-shadow(0 0 12px rgba(60,213,130,.35));
}

.solution-card h3{
    color:#111827;
    font-size:1.7rem;
    margin-bottom:10px;
}

.solution-card__subtitle{
    color:#3cd582;
    font-weight:700;
    margin-bottom:16px;
}

.solution-card__text{
    color:#374151;
    font-size:.95rem;
    line-height:1.4;
    min-height:95px;
}

.solution-card__divider{
    height:1px;
    background:#d8dde2;
    margin:25px 0;
}

.solution-card__btn{
    position:relative;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:180px;
    height:52px;

    border:none;
    border-radius:14px;

    background:
    linear-gradient(
        135deg,
        #3cd582,
        #24c96b
    );

    color:#081019;

    font-size:.92rem;
    font-weight:700;

    overflow:hidden;

    transition:
    transform .25s ease,
    box-shadow .25s ease;

    box-shadow:
    0 10px 25px rgba(60,213,130,.25);
}


.solution-card__btngray{
    position:relative;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:180px;
    height:52px;

    border:none;
    border-radius:14px;

    background:
    linear-gradient(
        135deg,
        #7e7e7e,
        #9c9c9c
    );

    color:#081019;

    font-size:.92rem;
    font-weight:700;

    overflow:hidden;

    transition:
    transform .25s ease,
    box-shadow .25s ease;
}

@media (min-width: 992px) and (max-width: 1400px){

    .quote-card{
        display:none;
    }

}


.solution-card__btn span{
    position:relative;
    z-index:2;

    display:flex;
    align-items:center;
    gap:8px;

    transition:color .4s;
}
.solution-card__btn::before{
    content:"";

    position:absolute;

    top:0;
    left:-10%;

    width:120%;
    height:100%;

    background:#0054d1;

    transform:skew(30deg) translateX(-100%);

    transition:
    transform .5s cubic-bezier(.3,1,.8,1);
}
.solution-card__btn:hover::before{
    transform:
    skew(30deg)
    translateX(0);
}

.solution-card__btn:hover{
    transform:translateY(-4px);

    box-shadow:
    0 15px 35px rgba(0,84,209,.35);
}

.solution-card__btn:hover span{
    color:white;
}
.solution-card__btn svg{
    width:16px;
    height:16px;

    stroke:currentColor;
    stroke-width:2.5;
}

.solutions__features{
    max-width:1450px;
    margin:0 auto;

    background:white;

    border-radius:22px;
    border:1px solid #eceff3;

    display:grid;
    grid-template-columns:repeat(4,1fr);
}

.feature{
    display:flex;
    gap:15px;
    align-items:center;
    padding:30px;
}

.feature strong{
    display:block;
    color:#111827;
}

.feature span{
    color:#6b7280;
    font-size:.9rem;
}

#waves{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero_container,
.hero_content{
    position: relative;
    z-index: 2;
}

.voisek-branding{
    display: flex;
    height: 400px; /* antes 700px */
    background: #f5f5f5;
    overflow: hidden;
}

.voisek-branding__media{
    flex: 0 0 50%;
    position: relative;
    overflow: hidden;
}

.voisek-branding__media video{
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.voisek-branding__content{
    flex: 0 0 50%;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 0 60px; /* quitamos el padding vertical */
}

.voisek-branding__content h2{
    font-size: 3.5rem;
    line-height: 1.05;
    color: #111827;
    margin-bottom: 20px;
}

.voisek-branding__content p{
    font-size: 1.1rem;
    line-height: 1.7;
    color: #6b7280;
    margin-bottom: 30px;
    max-width: 550px;
}

.voisek-branding__content a{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: max-content;

    padding: 16px 32px;

    border-radius: 999px;

    background: #0054d1;
    color: #fff;

    font-weight: 700;
}

model-viewer{
    width:700px;
    height:700px;
}

.fraude-section{
    background:#3cd582;
    min-height:100vh;

    display:grid;
    grid-template-columns: 1fr 1fr;
    align-items:center;

    padding:80px 8%;
    overflow:hidden;
}

/* ======================
   TELEFONO
====================== */

.fraude-phone{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
}

.fraude-phone model-viewer{
    width:500px;
    height:700px;
    z-index:2;
}

/* Orbita */

.orbita{
    position:absolute;
    width:600px;
    height:300px;

    border:2px solid rgba(0,0,0,.25);
    border-radius:50%;

    transform:rotate(-10deg);
}

/* Card flotante */

.quote-card{
    position:absolute;

    right:40px;
    top:50%;

    transform:translateY(-50%);

    width:260px;

    background:white;

    padding:25px;

    border-radius:20px;

    z-index:1;

    box-shadow:0 15px 40px rgba(0,0,0,.12);
}

.quote-card p{
  font-family:'HostGrotesk',sans-serif;  
  color:#48d68a;
    font-size:1rem;
    line-height:1.6;
}

/* ======================
   TEXTO
====================== */

.fraude-content{
    padding-left:50px;
    
}

.fraude-content h2{
    font-family:'Borscha',sans-serif;
    font-weight:400;
    font-size: clamp(1.5rem, 3vw, 2.8rem);
    color:#ffffff;
    line-height:1.05;
    margin-bottom: 24px;
}

.fraude-content h2 span{
    display:block;
    color:#102436;
    font-weight:400;
}

.descripcion{
    max-width:650px;
    font-family:'HostGrotesk',sans-serif;


    color:#000000;

    margin-bottom:50px;
}

/* ======================
   BENEFICIOS
====================== */

.beneficios{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
}

.beneficio{
    display:flex;
    gap:15px;
    
}

.icono{
    width:50px;
    height:50px;

    border-radius:40%;
    background:white;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:1.4rem;
    font-weight:bold;

    color:#102436;

    flex-shrink:0;
}

.beneficio h4{
    margin-bottom:8px;
    color:#0b1c2b;
}

.beneficio p{
    color:#0b1c2b;
    font-size:.95rem;
}

/* ======================
   BOTON
====================== */

.demo-btn{
    position:relative;

    display:block;

    margin-top:50px;

    background:white;
    color:#48d68a;

    text-align:center;

    padding:18px;

    border-radius:999px;

    text-decoration:none;

    font-weight:700;

    overflow:hidden;

    box-shadow:
        0 10px 25px rgba(255,255,255,.15);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

/* Texto */

.demo-btn span{
    position:relative;
    z-index:3;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    transition:color .4s ease;
}

/* Barrido azul */

.demo-btn::before{
    content:"";

    position:absolute;

    top:0;
    left:-15%;

    width:130%;
    height:100%;

    background:#0054d1;

    transform:
        skewX(30deg)
        translateX(-120%);

    transition:
        transform .55s cubic-bezier(.3,1,.8,1);

    z-index:1;
}

.demo-btn:hover::before{
    transform:
        skewX(30deg)
        translateX(0);
}

/* Shine */

.demo-btn::after{
    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:60px;
    height:100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.55),
            transparent
        );

    transform:skewX(-20deg);

    transition:.8s;

    z-index:2;
}

.demo-btn:hover::after{
    left:140%;
}

/* Hover */

.demo-btn:hover{
    transform:translateY(-3px);

    box-shadow:
        0 15px 35px rgba(0,84,209,.35);
}

.demo-btn:hover span{
    color:white;
}
/* =========================
   TELEFONO PREMIUM
========================= */

.phone-float{
    animation: floatPhone 9s ease-in-out infinite;
}

.iphone{
    width:280px;
    border-radius:46px;
    padding:14px;
    background:linear-gradient(
        145deg,
        #2d2d2d,
        #151515
    );

    box-shadow:
        0 0 0 1px rgba(255,255,255,.1),
        0 25px 80px rgba(0,0,0,.45),
        0 0 60px rgba(0,255,120,.18);

    overflow:hidden;
}

.iphone-screen{

    background:#08130c;

    border-radius:34px;

    aspect-ratio:9 / 19.5;

    overflow:hidden;

    position:relative;

    padding:70px 18px 25px;
}

/* =========================
   DYNAMIC ISLAND
========================= */

.dynamic-island{

    position:absolute;

    top:14px;
    left:50%;

    transform:translateX(-50%);

    width:110px;
    height:32px;

    background:#000;

    border-radius:20px;

    display:flex;
    align-items:center;
    justify-content:center;

    color:white;

    font-size:11px;

    overflow:hidden;

    transition:.4s;
}

.dynamic-island.expanded{

    width:220px;

    height:50px;
}

.island-alert{

    opacity:0;

    transition:.3s;
}

.dynamic-island.expanded .island-alert{

    opacity:1;
}

/* =========================
   HEADER
========================= */

.call-header{

    text-align:center;
}

.voishield-badge{

    display:inline-block;

    background:rgba(0,255,120,.15);

    border:1px solid rgba(0,255,120,.3);

    color:#56ff9b;

    padding:6px 14px;

    border-radius:40px;

    font-size:10px;

    margin-bottom:20px;
}

.bank-logo-ring{
  position:relative;

    width:80px;
    height:80px;

    border-radius:50%;

    margin:auto;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:38px;

    background:#1f5dc7;

    box-shadow:
        0 0 30px rgba(0,100,255,.4);
}

.bank-logo-ring::before{

    content:'';

    position:absolute;

    inset:-10px;

    border-radius:50%;

    border:2px solid rgba(0, 106, 255, 0.836);

    animation:signalWave 2.5s infinite;
}

.bank-logo-ring::after{

    content:'';

    position:absolute;

    inset:-10px;

    border-radius:50%;

    border:2px solid rgba(0, 96, 230, 0.781);

    animation:signalWave 2.5s infinite .8s;
}

@keyframes signalWave{

    0%{

        transform:scale(1);

        opacity:.8;
    }

    100%{

        transform:scale(2.3);

        opacity:0;
    }
}

.bank-name{

    font-size:34px;

    font-weight:800;

    color:white;

    margin-top:20px;
}

.call-status{

    color:#b7b7b7;

    font-size:13px;

    margin-top:10px;
}

/* =========================
   BADGES
========================= */

.verified-badges{

    margin-top:25px;

    display:flex;

    flex-direction:column;

    gap:10px;
}

.v-badge{

    background:rgba(0,255,120,.08);

    border:1px solid rgba(0,255,120,.18);

    padding:12px;

    border-radius:12px;

    color:white;

    font-size:13px;
}

/* =========================
   BOTONES
========================= */

.call-actions{

    display:flex;

    justify-content:space-between;

    margin-top:50px;
}

.btn-circle{

    width:52px;
    height:52px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    cursor:pointer;

    transition:.3s;
}

.btn-circle:hover{

    transform:scale(1.1);
}

.btn-circle.neutral{

    background:rgba(255,255,255,.12);
}

.btn-circle.red{

    background:#ff3b30;
}

.btn-circle.green{

    background:#22c55e;
}

/* =========================
   FLOATING ICONS
========================= */

.float-icon{

    position:absolute;

    width:50px;
    height:50px;

    border-radius:14px;

    background:rgba(0,255,120,.08);

    border:1px solid rgba(0,255,120,.15);

    display:flex;

    align-items:center;

    justify-content:center;

    backdrop-filter:blur(12px);

    font-size:22px;

    z-index:5;
}

.fi-1{

    right:-55px;
    top:10%;

    animation:floatIcon 5s infinite ease-in-out;
}

.fi-2{

    right:-40px;
    bottom:20%;

    animation:floatIcon 6s infinite ease-in-out;
}

.fi-3{

    left:-55px;
    top:45%;

    animation:floatIcon 5.5s infinite ease-in-out;
}

/* =========================
   ANIMACIONES
========================= */

@keyframes floatPhone{

    0%,100%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-15px);
    }
}

@keyframes floatIcon{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-12px);
    }
}
/* =========================
   GLOW DETRAS DEL TELEFONO
========================= */

.fraude-phone{
    position:relative;
}

.fraude-phone::before{

    content:'';

    position:absolute;

    width:500px;
    height:500px;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,255,120,.18) 0%,
        rgba(0,255,120,.08) 35%,
        transparent 75%
    );

    animation:pulseGlow 5s ease-in-out infinite;

    z-index:0;
}

@keyframes pulseGlow{

    0%,100%{
        transform:translate(-50%,-50%) scale(1);
        opacity:.8;
    }

    50%{
        transform:translate(-50%,-50%) scale(1.15);
        opacity:1;
    }
}
/* =========================
   PARTICULAS FONDO
========================= */

#bg-canvas{

     position:absolute;
    inset:0;

    width:100%;
    height:100%;

    pointer-events:none;
    z-index:1;
}
.fraude-section{

    position:relative;

    overflow:hidden;
}

.phone-wrapper{
    z-index:10;
}

.quote-card{
    z-index:10;
}

.quote-card p {
    color:#3cd582;
    font-family: 'Borscha', sans-serif;
  font-weight: 500;
}

.fraude-content{
    position:relative;
    z-index:10;
}
/* =========================
   SECURITY TOAST
========================= */

.security-toast{

    position:absolute;

    top:-90px;
    left:50%;

    transform:
        translateX(-50%)
        translateY(-30px);

    width:360px;

    background:
        rgba(10,15,25,.95);

    border:1px solid
        rgba(255,59,48,.25);

    border-radius:18px;

    padding:16px;

    display:flex;

    align-items:center;

    gap:14px;

    opacity:0;

    backdrop-filter:blur(20px);

    box-shadow:
        0 20px 40px rgba(0,0,0,.35);

    transition:.5s;

    z-index:50;
}

.security-toast.show{

    opacity:1;

    transform:
        translateX(-50%)
        translateY(0);
}

.toast-icon{

    width:44px;
    height:44px;

    border-radius:12px;

    background:
        rgba(255,59,48,.15);

    display:flex;

    align-items:center;
    justify-content:center;

    font-size:20px;
}

.toast-content{

    flex:1;

    display:flex;

    flex-direction:column;
}

.toast-content strong{

    color:white;

    font-size:14px;
}

.toast-content span{

    color:#a4a9b5;

    font-size:12px;
}

.toast-status{

    color:#ff3b30;

    font-size:11px;

    font-weight:700;

    padding:8px 12px;

    border-radius:10px;

    background:
        rgba(255,59,48,.12);
}
.phone-wrapper{

    transform-style:preserve-3d;

    will-change:transform;

    transition:
    transform .08s linear;
}
.alert-dot{

    width:8px;
    height:8px;

    background:#ff3b30;

    border-radius:50%;

    display:inline-block;

    margin-right:8px;

    animation:
    blinkDot 1s infinite;
}
@keyframes blinkDot{

    0%,100%{
        opacity:1;
        transform:scale(1);
    }

    50%{
        opacity:.3;
        transform:scale(.8);
    }
}

svg.lucide{

    width:22px;
    height:22px;

   

    stroke-width:2;
}

.btn-circle svg{

    width:22px;
    height:22px;

    stroke:white;
}

.bank-logo-ring svg{

    width:38px;
    height:38px;

    stroke:white;
}

.v-badge{

    display:flex;
    align-items:center;
    gap:8px;
}
.feature{

    display:flex;
    align-items:center;
    gap:16px;
}

.feature svg{

    width:28px;
    height:28px;

    stroke:#142a38;

    stroke-width:2;

    flex-shrink:0;
}
/* ==========================================
   CONTACT DEMO
========================================== */

/* ==========================================
   CONTACT DEMO
========================================== */

.contact-demo{
    background:#0054d1;
    padding:120px 8%;
    overflow:hidden;
    position:relative;
}

.contact-demo__container{
    max-width:1500px;
    margin:auto;

    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:60px;
    align-items:center;
}

/* LEFT */

.contact-demo__eyebrow{
    color:#3cd582;
    font-size:13px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:20px;
}

.contact-demo__title{
    font-family:'Borscha',sans-serif;
    font-weight:400;
    font-size: clamp(1.5rem, 3vw, 2.8rem);
    color:#ffffff;
    line-height:1.05;
    margin-bottom:35px;
}

.contact-demo__title span{
    color:#3cd582;
}

.contact-demo__card{
    background:white;
    border-radius:20px;
    padding:35px;
    max-width:620px;
}

.contact-demo__card h3{
    color:#111827;
    margin-bottom:20px;
}

.contact-demo__grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.contact-demo input,
.contact-demo textarea{
    width:100%;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:14px 16px;
    font-size:.95rem;
    outline:none;
}

.contact-demo textarea{
    margin-top:12px;
    min-height:130px;
    resize:none;
}

.contact-demo button{
    width:100%;
    margin-top:18px;

    border:none;
    border-radius:999px;

    background:#0054d1;
    color:white;

    padding:16px;
    font-weight:700;
    cursor:pointer;
}

/* RIGHT */

.contact-demo__right{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
}

.contact-demo__image{
    width:100%;
    max-width:800px;
    position:relative;
    z-index:2;
}

.contact-demo__waves{
    position:absolute;
    inset:0;

    background:
    repeating-radial-gradient(
        circle at 70% 50%,
        transparent 0px,
        transparent 14px,
        rgb(0, 255, 115) 15px,
        rgb(0, 255, 115) 16px
    );

    opacity:.45;
}

@keyframes waveField{

    0%{
        transform:
        translateX(0)
        translateY(0)
        skewY(-8deg);
    }

    50%{
        transform:
        translateX(-30px)
        translateY(10px)
        skewY(-12deg);
    }

    100%{
        transform:
        translateX(-60px)
        translateY(0)
        skewY(-8deg);
    }
}

.waves-bg{
    position:absolute;
    inset:0;
    overflow:hidden;
    z-index:1;
}

.waves-bg svg{
    width:140%;
    height:100%;
    position:absolute;
    right:-10%;
}

.wave path{
    fill:none;
    stroke:#3cd582;
    stroke-width:1.5;
    opacity:.45;
}

.wave{
    animation: waveMove 18s linear infinite
    waveFloat 6s ease-in-out infinite;
}

@keyframes waveFloat{

    0%{
        transform:translateY(0px);
    }

    25%{
        transform:translateY(-20px);
    }

    50%{
        transform:translateY(-35px);
    }

    75%{
        transform:translateY(-15px);
    }

    100%{
        transform:translateY(0px);
    }
}

/* MOBILE */

@media (max-width:991px){

    .contact-demo__container{
        grid-template-columns:1fr;
    }

    .contact-demo__grid{
        grid-template-columns:1fr;
    }

    .contact-demo__card{
        max-width:none;
    }
}
/* ==========================================
   FOOTER
========================================== */

.footer{
    background:#0c2a3a;
    padding:90px 8%;
}

.footer__container{
    max-width:1400px;
    margin:auto;

    display:grid;
    grid-template-columns:
        2fr
        1fr
        1fr
        .8fr;

    gap:80px;
}

/* BRAND */

.footer__logo{
    height:35px;
    width:auto;
    margin-bottom:30px;
}

.footer__eyebrow{
    color:#3cd582;
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    margin-bottom:15px;
}

.footer__description{
    max-width:450px;
    color:#d7dee3;
    line-height:1.7;
    margin-bottom:25px;
}

.footer__member{
    color:#d7dee3;
    margin-bottom:20px;
}

/* PARTNERS */

.footer__partners{
    display:flex;
    align-items:center;
    gap:20px;
    flex-wrap:nowrap;
}
@media (max-width: 768px) {

    .footer__partners {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        justify-items: center;
        gap: 1rem;
    }

    .footer__partners img {
        max-width: 100%;
        height: auto;
    }
}

.footer__partners img{
    height:55px;
    width:auto;
    filter:brightness(0) invert(1);
    opacity:.9;
}

/* LINKS */

.footer__links h4,
.footer__social h4{
    color:#3cd582;
    font-size:13px;
    font-weight:700;
    margin-bottom:25px;
}

.footer__links{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.footer__links a{
    color:white;
    font-size:.95rem;
    transition:.3s;
}

.footer__links a:hover{
    color:#3cd582;
}

/* SOCIAL */

.footer__social-icons{
    display:flex;
    gap:18px;
}

.footer__social-icons a{
    width:48px;
    height:48px;

    border-radius:50%;

    background:white;

    display:flex;
    justify-content:center;
    align-items:center;

    transition:.3s;
}

.footer__social-icons a:hover{
    transform:translateY(-4px);
}

.footer__social-icons svg{
    width:22px;
    height:22px;

    stroke:#0c2a3a;
}

/* MOBILE */

@media(max-width:991px){

    .footer__container{
        grid-template-columns:1fr;
        gap:50px;
    }

}
.btn--voisek{
    position:relative;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    border:none;
    border-radius:14px;

    background:
    linear-gradient(
        135deg,
        #3cd582,
        #24c96b
    );

    color:#081019;

    font-weight:700;

    overflow:hidden;

    transition:
    transform .25s ease,
    box-shadow .25s ease;

    box-shadow:
    0 10px 25px rgba(60,213,130,.25);
}

.btn--voisek span{
    position:relative;
    z-index:2;

    display:flex;
    align-items:center;
    gap:8px;

    transition:color .4s;
}

.btn--voisek::before{
    content:"";

    position:absolute;

    top:0;
    left:-10%;

    width:120%;
    height:100%;

    background:#0054d1;

    transform:skew(30deg) translateX(-100%);

    transition:
    transform .5s cubic-bezier(.3,1,.8,1);
}

.btn--voisek:hover::before{
    transform:
    skew(30deg)
    translateX(0);
}

.btn--voisek:hover{
    transform:translateY(-4px);

    box-shadow:
    0 15px 35px rgba(0,84,209,.35);
}

.btn--voisek:hover span{
    color:white;
}

.btn--voisek svg{
    width:16px;
    height:16px;

    stroke:currentColor;
    stroke-width:2.5;
}
.btn--sm{
    height:44px;
    padding:0 20px;
    font-size:.88rem;
}
.btn--lg{
    height:56px;
    padding:0 32px;
    font-size:1rem;
}

/* ==========================================
   HERO CTA BUTTON
========================================== */

.hero-cta-btn{
    position:relative;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:50%;
    min-width:280px;
    height:52px;
    padding:0 24px;

    border:none;
    outline:none;

    margin-top:35px;

    border-radius:16px;

    background:linear-gradient(
        135deg,
        #3cd582,
        #24c96b
    );

    color:#081019;

    font-weight:700;
    font-size:.95rem;

    overflow:hidden;

    text-decoration:none;

    box-shadow:
        0 10px 30px rgba(60,213,130,.25);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.hero-cta-btn span{
    position:relative;
    z-index:3;

    display:flex;
    align-items:center;
    gap:10px;

    transition:color .4s ease;
}

.hero-cta-btn::before{
    content:"";

    position:absolute;

    top:0;
    left:-15%;

    width:130%;
    height:100%;

    background:#0054d1;

    transform:
        skewX(30deg)
        translateX(-120%);

    transition:
        transform .55s cubic-bezier(.3,1,.8,1);

    z-index:1;
}

.hero-cta-btn:hover::before{
    transform:
        skewX(30deg)
        translateX(0);
}

.hero-cta-btn:hover{
    transform:translateY(-4px);

    box-shadow:
        0 18px 40px rgba(0,84,209,.35);
}

.hero-cta-btn:hover span{
    color:white;
}
.hero-cta-btn svg{
    width:18px;
    height:18px;

    stroke:#01123c;
    stroke-width:2.5;

    transition:
        transform .3s ease;
}

.hero-cta-btn:hover svg{
    transform:translateX(4px);
}
.hero-cta-btn::after{
    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:60px;
    height:100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.35),
            transparent
        );

    transform:skewX(-20deg);

    transition:.8s;

    z-index:2;
}

.hero-cta-btn:hover::after{
    left:140%;
}
.demo-form-btn{
    position:relative;

    width:100%;

    border:none;
    border-radius:999px;

    background:#0054d1;
    color:white;

    padding:18px;

    cursor:pointer;

    font-size:1rem;
    font-weight:700;

    overflow:hidden;

    transition:
        transform .3s ease,
        box-shadow .3s ease;

    box-shadow:
        0 10px 25px rgba(0,84,209,.25);
}

/* Contenido */

.demo-form-btn span{
    position:relative;
    z-index:3;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    transition:color .4s ease;
}
.demo-form-btn::before{
    content:"";

    position:absolute;

    top:0;
    left:-15%;

    width:130%;
    height:100%;

    background:#3cd582;

    transform:
        skewX(30deg)
        translateX(-120%);

    transition:
        transform .55s cubic-bezier(.3,1,.8,1);

    z-index:1;
}

.demo-form-btn:hover::before{
    transform:
        skewX(30deg)
        translateX(0);
}
.demo-form-btn::after{
    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:60px;
    height:100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.35),
            transparent
        );

    transform:skewX(-20deg);

    transition:.8s;

    z-index:2;
}

.demo-form-btn:hover::after{
    left:140%;
}
.demo-form-btn:hover{
    transform:translateY(-3px);

    box-shadow:
        0 15px 35px rgba(60,213,130,.35);
}

.demo-form-btn:hover span{
    color:#081019;
}
.demo-form-btn svg{
    width:18px;
    height:18px;

    stroke:currentColor;
    stroke-width:2.5;

    transition:transform .3s ease;
}

.demo-form-btn:hover svg{
    transform:translateX(4px);
}

.services-hero{
    background:#f7f8fa;
    padding:140px 10%;
    overflow:hidden;
}

.services-hero__container{
    max-width:1400px;
    margin:auto;

    display:grid;
    grid-template-columns:
        1fr
        1.2fr;

    align-items:center;
    gap:80px;
}



.services-hero__eyebrow{
    color:#3cd582;
    font-size:.85rem;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;

    margin-bottom:24px;
}

.services-hero__title{
    font-family: 'Borscha', sans-serif;
    font-weight: 400;
    font-size: clamp(2.6rem, 4.5vw, 3.6rem);
    line-height:1.1;
    letter-spacing: -1.5px;
    color:#081019;

    margin-bottom:24px;
}

.services-hero__title span{
    display:block;
    color:#3cd582;
}

.services-hero__body{
    max-width:520px;

    font-size:1.05rem;
    line-height:1.8;

    color:#5f6b7a;

    margin-bottom:40px;
}
.services-hero__visual{
    position:relative;
}

.services-hero__image{
    width:120%;
    max-width:none;
    display:block;
}
.services-hero__visual::before{
    content:"";

    position:absolute;

    width:300px;
    height:300px;

    background:#3cd582;

    filter:blur(140px);

    opacity:.25;

    left:50%;
    bottom:50px;

    transform:translateX(-50%);

    z-index:0;
}

.services-hero__image{
    position:relative;
    z-index:2;
}
@media(max-width:991px){

    .services-hero__container{
      
        grid-template-columns:1fr;
        text-align:center;
        gap:100px;
    }

    .services-hero__body{
        margin-inline:auto;
    }

    .services-hero__title{
        font-size:3rem;
    }
}
.voisek-rings{
    position:absolute;

    width:780px;
    height:780px;

    top:45%;
    left:50%;

    transform:translate(-50%,-50%);

    z-index:1;
}
.ring{
    position:absolute;

    border-radius:50%;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    animation-timing-function:linear;
    animation-iteration-count:infinite;
}
.ring-1{
    width:520px;
    height:520px;

    border:4px dotted rgba(60,213,130,.8);

    animation:
        rotateClockwise 30s infinite linear;
}
.ring-2{
    width:490px;
    height:490px;

    border:6px dotted rgba(60,213,130,.9);

    animation:
        rotateCounter 22s infinite linear;
}
.ring-3{
    width:440px;
    height:440px;

    border:4px dotted rgba(60,213,130,.7);

    animation:
        rotateClockwise 18s infinite linear;
}
@keyframes rotateClockwise{

    from{
        transform:
        translate(-50%,-50%)
        rotate(0deg);
    }

    to{
        transform:
        translate(-50%,-50%)
        rotate(360deg);
    }

}

@keyframes rotateCounter{

    from{
        transform:
        translate(-50%,-50%)
        rotate(360deg);
    }

    to{
        transform:
        translate(-50%,-50%)
        rotate(0deg);
    }

}
.voisek-rings::after{
    content:"";

    position:absolute;

    width:220px;
    height:220px;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    background:#3cd582;

    opacity:.15;

    border-radius:50%;

    filter:blur(80px);
}
/* ==========================================
   STATS SECTION
========================================== */

.stats-section{
    padding:120px 8%;
    background:#f7f8fa;
}

.stats-section__header{
    max-width:800px;
    margin:0 auto 70px;
    text-align:center;
}

.stats-section__title{
    font-family:'Borscha', sans-serif;
    font-weight:400;
    font-size: clamp(1.5rem, 3vw, 2.8rem);
    line-height:1.1;
    color:#081019;
}

.stats-section__title span{
    display:block;
    color:#3cd582;
}

.stats-section__description{
    max-width:600px;
    margin:20px auto 0;

    color:#667085;
    font-size:1rem;
    line-height:1.7;
}

.stats-grid{
    max-width:1400px;
    margin:auto;

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.stat-card{
    background:white;

    border:1px solid #edf0f3;
    border-radius:24px;

    padding:35px 30px;

    display:flex;
    align-items:center;
    gap:20px;

    transition:.35s ease;

    box-shadow:
        0 4px 20px rgba(0,0,0,.03);
}

.stat-card:hover{
    transform:translateY(-8px);

    border-color:rgba(60,213,130,.3);

    box-shadow:
        0 20px 40px rgba(60,213,130,.12);
}

.stat-card__icon{
    width:58px;
    height:58px;

    border-radius:50%;

    background:#f4f6f8;

    display:flex;
    align-items:center;
    justify-content:center;

    flex-shrink:0;
}

.stat-card__icon svg{
    width:24px;
    height:24px;

    stroke:#6b7280;
}

.stat-card__content h3{
    color:#3cd582;

    font-size:2rem;
    font-weight:800;

    line-height:1;
    margin-bottom:8px;
}

.stat-card__content p{
    color:#111827;

    font-size:.95rem;
    font-weight:600;

    line-height:1.3;
}
@media(max-width:991px){

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

}

@media(max-width:768px){

    .stats-section{
        padding:80px 20px;
    }

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

    .stat-card{
        padding:25px;
    }

}
.stat-card{
    position:relative;
    overflow:hidden;
}

.stat-card::before{
    content:"";

    position:absolute;

    top:0;
    left:-150%;

    width:80px;
    height:100%;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.8),
        transparent
    );

    transform:skewX(-20deg);

    transition:.8s;
}

.stat-card:hover::before{
    left:150%;
}
.services-showcase{
    padding:120px 8%;
    background:#ffffff;
}

.service-block{
    position:relative;

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;

    padding:70px;

    border-radius:24px;

    margin-bottom:0px;

    overflow:hidden;

    transition:
    transform .5s ease,
    box-shadow .5s ease;
}

.service-phone{
    width:300px;
    position:relative;
    z-index:3;
    top:50px;
}

.service-block__visual{
    position:relative;
    width: 100%;
    height: 300px; /* tamaño fijo */
    

    display:flex;
    align-items:center;
    justify-content:center;
    
}

.service-block:hover{
    transform:translateY(-8px);
}

.service-block--light{
    background:#f7f8fa;
}

.service-block--dark{
    background:#031627;
}

.service-number{
    color:#3cd582;
    font-weight:700;
    font-size:.9rem;
}

.service-block h2{
    color:#031627;
    margin-top:18px;

    font-family:'Roboto';
    font-weight:600;

    font-size:clamp(2rem,4vw,2.8rem);

    line-height:1.05;
}

.service-block h3{
    color:#ffffff;
    margin-top:18px;

    font-family:'Roboto';
    font-weight:600;

    font-size:clamp(2rem,4vw,2.8rem);

    line-height:1.05;
}

.service-block p{
    color:#ffffff;
    margin-top:20px;

    max-width:600px;

    line-height:1.8;
}
.service-features{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.service-block p2{
    color:#031627;
    margin-top:20px;

    max-width:600px;

    line-height:1.8;
}
.service-features{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.feature-item{
    background:white;
    color:#0b1c2a;

    padding:18px 20px;

    border-radius:14px;

    display:flex;
    align-items:center;
    gap:12px;

    opacity:0;

    transform:translateX(40px);

    animation:slideFeature .8s forwards;
}

.feature-item:nth-child(1){
    animation-delay:.2s;
}

.feature-item:nth-child(2){
    animation-delay:.4s;
}

.feature-item:nth-child(3){
    animation-delay:.6s;
}

.feature-item:nth-child(4){
    animation-delay:.8s;
}

@keyframes slideFeature{

    to{
        opacity:1;
        transform:translateX(0);
    }

}
.service-ring{
    position:absolute;

    width:350px;
    height:350px;

    border-radius:50%;

    border:3px dashed #3cd582;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    animation:rotateRing 20s linear infinite;
}

.service-ring::before{
    content:"";

    position:absolute;

    inset:-25px;

    border-radius:50%;

    border:2px dashed rgba(60,213,130,.4);

    animation:
    rotateRingReverse 12s linear infinite;
}

@keyframes rotateRing{

    from{
        transform:
        translate(-50%,-50%)
        rotate(0);
    }

    to{
        transform:
        translate(-50%,-50%)
        rotate(360deg);
    }

}

@keyframes rotateRingReverse{

    from{
        transform:rotate(360deg);
    }

    to{
        transform:rotate(0);
    }

}
/* ==========================================
   SERVICE 02
========================================== */

.service-block--dark{
    background:
    linear-gradient(
        135deg,
        #041728,
        #07243d
    );

    color:white;
}

.service-block--dark h2,
.service-block--dark p{
    color:white;
}

#diagram{position:relative;width:560px;height:400px}
.feed-panel{position:absolute;left:0;top:50%;transform:translateY(-50%);width:200px;background:rgba(6,15,18,0.85);border:1px solid var(--glassBorder);border-radius:12px;backdrop-filter:blur(16px);overflow:hidden}
.feed-header{padding:10px 14px;border-bottom:1px solid var(--glassBorder);display:flex;align-items:center;justify-content:space-between}
.feed-title{font-size:12px;font-weight:600;color:#fff;letter-spacing:0.5px}

.feed-icon{width:16px;height:16px;border:1.5px solid var(--neon);border-radius:50%;border-top-color:transparent;animation:spin 1.5s linear infinite}
.feed-items{padding:6px 0;max-height:200px;overflow:hidden}
.feed-item{padding:8px 14px;display:flex;align-items:flex-start;gap:8px;transition:all 0.4s;position:relative}
.feed-item.entering{animation:slide-in 0.4s ease-out}

.item-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:11px}
.item-icon svg{
    width:16px;
    height:16px;
    stroke-width:2.5;
}
.item-icon.verified{background:rgba(0,255,136,0.15);border:1px solid rgba(0,255,136,0.4)}
.item-icon.suspect{background:rgba(255,107,53,0.15);border:1px solid rgba(255,107,53,0.4)}
.item-icon.blocked{background:rgba(255,51,85,0.15);border:1px solid rgba(255,51,85,0.4)}

.item-text{flex:1}
.item-label{font-size:10px;font-weight:600;color:#fff;line-height:1.3}
.item-num{font-size:9px;color:rgba(255,255,255,0.5);margin-top:1px}
.item-status{font-size:9px;font-weight:700;margin-top:3px;letter-spacing:0.5px}
.item-status.verified{color:var(--neon)}
.item-status.suspect{color:var(--warn)}
.item-status.blocked{color:var(--danger)}
.item-time{font-size:8px;color:rgba(255,255,255,0.3);margin-top:2px}
.nodes-area{position:absolute;right:80px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:16px}
.node-card{width:110px;background:rgba(6,15,18,0.85);border:1px solid var(--glassBorder);border-radius:10px;padding:12px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;transition:all 0.3s;backdrop-filter:blur(16px);position:relative}
.node-card:hover{border-color:var(--neon);box-shadow:0 0 20px rgba(0,255,136,0.2);transform:scale(1.05)}
.node-card:hover .tooltip{opacity:1;transform:translateX(-8px)}
.node-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:rgba(0,255,136,0.1);border:1px solid rgba(0,255,136,0.2);font-size:16px;transition:all 0.3s}
.node-card:hover .node-icon{background:rgba(0,255,136,0.2);box-shadow:0 0 15px rgba(0,255,136,0.3)}
.node-name{font-size:11px;font-weight:600;color:#fff;text-align:center}
.node-sub{font-size:9px;color:rgba(0,255,136,0.7);text-align:center}
.node-pulse{width:6px;height:6px;background:var(--neon);border-radius:50%;animation:pulse-dot 2s infinite}
.tooltip{position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%) translateX(10px);background:rgba(0,0,0,0.9);border:1px solid var(--glassBorder);border-radius:6px;padding:8px 10px;white-space:nowrap;font-size:10px;color:#fff;opacity:0;transition:all 0.2s;pointer-events:none;z-index:100}
.shield-area{position:absolute;right:0;top:50%;transform:translateY(-50%)}
.shield-wrap{position:relative;width:80px;height:80px;cursor:pointer}
.shield-wrap:hover .shield-metrics{opacity:1;transform:translateX(-10px)}
.shield-svg{width:80px;height:80px;filter:drop-shadow(0 0 20px rgba(0,255,136,0.6))}
.shield-ring{position:absolute;inset:-15px;border-radius:50%;border:1px solid rgba(0,255,136,0.15);animation:ring-expand 2.5s ease-out infinite}
.shield-ring:nth-child(2){inset:-30px;animation-delay:0.8s}
.shield-ring:nth-child(3){inset:-45px;animation-delay:1.6s}
.shield-label{text-align:center;margin-top:8px;font-size:9px;color:rgba(0,255,136,0.7);letter-spacing:0.5px;font-weight:600;line-height:1.4}
.shield-metrics{position:absolute;right:calc(100% + 16px);top:50%;transform:translateY(-50%) translateX(10px);background:rgba(6,15,18,0.95);border:1px solid var(--glassBorder);border-radius:10px;padding:12px 14px;opacity:0;transition:all 0.25s;pointer-events:none;z-index:100;backdrop-filter:blur(16px)}
.metric-row{display:flex;align-items:center;gap:8px;margin-bottom:6px;white-space:nowrap}
.metric-row:last-child{margin-bottom:0}
.metric-dot{width:6px;height:6px;background:var(--neon);border-radius:50%;flex-shrink:0;box-shadow:0 0 6px var(--neon)}
.metric-text{font-size:11px;color:#fff;font-weight:600}
#flow-canvas{position:absolute;inset:0;z-index:1;pointer-events:none}
.scan-line{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(0,255,136,0.6),transparent);animation:scan 3s ease-in-out infinite;opacity:0.6}
@keyframes pulse-dot{0%,100%{opacity:1;box-shadow:0 0 6px var(--neon)}50%{opacity:0.5;box-shadow:0 0 2px var(--neon)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes slide-in{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
@keyframes ring-expand{0%{opacity:0.5;transform:scale(1)}100%{opacity:0;transform:scale(1.8)}}
@keyframes scan{0%,100%{top:5%;opacity:0}10%{opacity:0.8}50%{top:95%;opacity:0.6}90%{opacity:0.2}}

/* ==========================
   BLOQUE 03 BRANDING
========================== */

.service-block--branding{

    background:#0e4ec7;

    display:grid;
    grid-template-columns:1fr 1fr;
    

    padding:70px;
    height:500px;

    margin-top:0;
    border-radius:24px;

    overflow:hidden;

    position:relative;
}

/* para que quede pegado al anterior */

.service-block--branding{
    margin-top:-1px;
}

.service-block--branding h2{
    color:white;
}

.service-block--branding p{
    color:rgba(255,255,255,.8);
}

.branding-visual{
    

    display:flex;
    justify-content:center;
    align-items:center;
    width: 100%;
    height: 300px; /* tamaño fijo */
    
    

    position:relative;
}

.branding-phone{

    width:375px;
    position:relative;
    z-index:3;
    top:100px;

    animation:
    brandingFloat 6s ease-in-out infinite;
}

.branding-phone2{

    width:375px;
    position:relative;
    z-index:3;
    top:0px;

    animation:
    brandingFloat 6s ease-in-out infinite;
}

.branding-chart{

    width:280px;
    height:260px;

    background:white;

    border-radius:20px;

    padding:28px;

    position:relative;
    transform:translateY(-50px);

    overflow:hidden;

    box-shadow:
    0 20px 40px rgba(0,0,0,.15);
}

.branding-chart__value{

    font-size:3rem;
    font-weight:800;

    color:#3cd582;

    margin-bottom:10px;
}

.branding-chart__text{

    color:#111827;

    font-weight:600;

    line-height:1.3;
}

.branding-chart__svg{

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    width:100%;
    height:120px;
}

.chart-area{

    fill:url(#chartFill);
}

.chart-line{

    fill:none;

    stroke:#3cd582;
    stroke-width:4;

    stroke-linecap:round;
    stroke-linejoin:round;

    stroke-dasharray:600;
    stroke-dashoffset:600;

    animation:
    drawChart 4s ease forwards infinite;
}

@keyframes drawChart{

    0%{
        stroke-dashoffset:600;
    }

    40%{
        stroke-dashoffset:0;
    }

    100%{
        stroke-dashoffset:0;
    }
}

@keyframes brandingFloat{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-12px);
    }
}
/* =========================================
   THIRD AI
========================================= */

.service-block--thirdai{
    background:
    radial-gradient(circle at center,
    rgba(60,213,130,.08),
    transparent 60%),
    #041729;
    


    color:white!important;

    border-radius:24px;
}

.service-block__content{
    max-width: 700px;
    width: 100%;
    
}

.thirdai-visual{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:50px;
}

/* .thirdai-network{
    position:relative;
    width:700px;
    height:420px;
} */

/* CORE */

.ai-core{
    position:absolute;
    left:50%;
    top:50%;

    transform:translate(-50%,-50%);
}

.ai-core__center{
    width:180px;
    height:180px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    #3cd582,
    #1d8d58);

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    text-align:center;

    font-weight:700;

    box-shadow:
    0 0 50px rgba(60,213,130,.45);

    position:relative;
    z-index:2;
}


/* FEATURES */

.thirdai-features{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.thirdai-feature{
    display:flex;
    align-items:center;
    gap:14px;

    min-width:280px;

    padding:18px 22px;

    border-radius:18px;

    background:
    rgba(255,255,255,.03);

    border:1px solid rgba(60,213,130,.18);

    transition:.3s;
}

.thirdai-feature:hover{
    transform:translateX(10px);

    border-color:#3cd582;

    box-shadow:
    0 0 30px rgba(60,213,130,.2);
}
.swipe-hint{
    display:none;
}

.thirdai-feature svg{
    width:22px;
    height:22px;
    stroke:#3cd582;
}

.thirdai-network{
    position:relative;
    width:700px;
    height:450px;
}

#map-canvas{
    width:100%;
    height:100%;
    display:block;
}
.demo-section{
    background:#f8f8fa;
    padding:120px 8%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
}

.demo-left h2{
    font-size:clamp(2rem,4vw,2.8rem);
    line-height:1.1;
    color:#102436;
    margin-bottom:20px;
}

.demo-left h2 span{
    color:#3cd582;
}

.demo-left p{
    color:#6b7280;
    max-width:500px;
    line-height:1.8;
}

.demo-steps{
    display:flex;
    align-items:center;
    gap:15px;
    margin-top:60px;
}

/* ICONOS */

.step{
    text-align:center;
    min-width:130px;
}

.step svg{
    width:42px;
    height:42px;
    stroke:#3cd582;
}

.step span{
    display:block;
    margin-top:10px;
    color:#102436;
    font-weight:600;
    font-size:.9rem;
}

/* LINEA */

.step-line{
    width:100px;
    height:2px;
    position:relative;
    overflow:visible;
}

.step-line::before{
    content:"";

    position:absolute;
    inset:0;

    border-top:2px dashed #3cd582;
    opacity:.45;
}

/* PUNTITO */

.step-line span{
    position:absolute;

    width:8px;
    height:8px;

    border-radius:50%;

    background:#3cd582;

    top:50%;
    left:0;

    transform:translateY(-50%);

    box-shadow:
        0 0 10px #3cd582,
        0 0 20px #3cd582;

    animation:travelDot 2.2s linear infinite;
}
@keyframes travelDot{

    0%{
        left:0;
        opacity:0;
    }

    10%{
        opacity:1;
    }

    90%{
        opacity:1;
    }

    100%{
        left:100%;
        opacity:0;
    }

}

.demo-form{
    background:white;
    padding:40px;
    border-radius:24px;
    box-shadow:0 20px 50px rgba(0,0,0,.06);
}

.demo-form h3{
    margin-bottom:25px;
    color:#102436;
}

.grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.demo-form input,
.demo-form textarea{
    width:100%;
    padding:14px 16px;
    border:1px solid #e5e7eb;
    border-radius:12px;
}

.demo-form textarea{
    margin-top:12px;
    min-height:140px;
}

.demo-form button{
    width:100%;
    margin-top:18px;
    background:#081c30;
    color:white;
    border:none;
    padding:16px;
    border-radius:999px;
    font-weight:700;
}
/* Dropdown */
.navbar__dropdown {
    position: relative;
}

.dropdown-arrow {
    font-size: 0.8rem;
    margin-left: 4px;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background: #fff;
    border-radius: 12px;
    padding: 10px 0;
    list-style: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all .3s ease;
    z-index: 1000;
}

.dropdown-menu li {
    margin: 0;
}

.dropdown-menu a {
    display: block;
    padding: 12px 20px;
    color: #1a1a1a;
    text-decoration: none;
    transition: background .2s ease;
}

.dropdown-menu a:hover {
    background: #f5f5f5;
}

.navbar__dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ==========================================
   ABOUT HERO
========================================== */

.about-hero{

    min-height:100vh;

    display:flex;
    align-items:center;

    padding:140px 8% 100px;

    overflow:hidden;

    background:
    radial-gradient(
        circle at 20% 30%,
        #d9e0fb 0%,
        transparent 45%
    ),
    radial-gradient(
        circle at 85% 15%,
        #c1cff5 0%,
        transparent 40%
    ),
    #eef1fa;
}

.about-hero__container{

    max-width:1500px;
    width:100%;

    margin:auto;

    display:grid;
    grid-template-columns:1fr 1fr;

    align-items:center;
    gap:80px;
}

/* TEXTO */

.about-hero__eyebrow{

    display:block;

    color:#2563eb;

    font-size:.85rem;
    font-weight:700;

    text-transform:uppercase;

    margin-bottom:24px;
}

.about-hero__title{

    font-family:'Borscha', sans-serif;
    font-weight:400;

    font-size: clamp(2.6rem, 4.5vw, 2.9rem);

    line-height:1;

    color:#102436;

    margin-bottom:28px;
}

.about-hero__title span{

    display:block;

    color:#4c6fff;
}

.about-hero__text{

    max-width:600px;

    color:#4b5563;

    font-size:1.05rem;

    line-height:1.8;

    margin-bottom:20px;
}

/* VISUAL */

.about-hero__visual{

    position:relative;

    display:flex;
    justify-content:center;
    align-items:center;
}

.about-hero__glow{

    position:absolute;

    width:450px;
    height:550px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(76,111,255,.25),
        transparent 70%
    );

    filter:blur(90px);

    animation:pulseAbout 6s ease-in-out infinite;
}

.about-hero__image{

    width:100%;
    max-width:550px;

    position:relative;
    z-index:2;

    animation:floatCube 8s ease-in-out infinite;
}

/* ANIMACIONES */

@keyframes floatCube{

    0%,100%{
        transform:
        translateY(0px)
        rotate(-2deg);
    }

    50%{
        transform:
        translateY(-18px)
        rotate(2deg);
    }
}

@keyframes pulseAbout{

    0%,100%{
        transform:scale(1);
        opacity:.6;
    }

    50%{
        transform:scale(1.1);
        opacity:1;
    }
}

/* RESPONSIVE */

@media(max-width:991px){


    .about-hero__text{
        margin-inline:auto;
    }

    .about-hero__image{
        max-width:500px;
    }
}
.about-container{
    width:calc(100% - 174px);
    max-width:1266px;
    margin:0 auto;
}
/* ==========================================
   TRUST SECTION
========================================== */

.about-trust{

    background:#f8f8f8;

    padding:80px 0 100px;
}

.about-trust__eyebrow{

    display:block;

    text-align:center;

    color:#2563eb;

    font-size:14px;
    font-weight:700;

    letter-spacing:.5px;

    margin-bottom:35px;
}

.about-trust__grid{

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:28px;
}

.trust-card{

    background:#ffffff;

    border-radius:18px;

    padding:28px;

    display:flex;
    align-items:flex-start;
    gap:20px;

    box-shadow:
        0 10px 35px rgba(0,0,0,.06);

    transition:.35s ease;
}

.trust-card:hover{

    transform:translateY(-6px);

    box-shadow:
        0 20px 50px rgba(0,0,0,.08);
}

.trust-card__icon{

    flex-shrink:0;

    width:58px;
    height:58px;

    display:flex;
    justify-content:center;
    align-items:center;
}

.trust-card__icon svg{

    width:44px;
    height:44px;

    stroke-width:2;
}

.trust-card__icon--green svg{
    stroke:#2ad67b;
}

.trust-card__icon--blue svg{
    stroke:#2563ff;
}

.trust-card h3{

    color:#111827;

    font-size:1.2rem;
    font-weight:700;

    margin-bottom:10px;
}

.trust-card p{

    color:#4b5563;

    font-size:.95rem;

    line-height:1.6;
}

/* MOBILE */

@media(max-width:991px){

    .about-trust__grid{
        grid-template-columns:1fr;
    }

}
/* ==========================================
   PRESENCE SECTION
========================================== */

.presence-section{

    padding:120px 0;

    background:#f8f8fa;
}

.presence-grid{

    display:grid;

    grid-template-columns:
        480px
        1fr;

    align-items:center;

    gap:80px;
}

.presence-eyebrow{

    display:block;

    color:#2563ff;

    font-size:.85rem;
    font-weight:700;

    margin-bottom:20px;
}

.presence-title{

    font-size: clamp(2.6rem, 4.5vw, 1.9rem);
    font-weight:700;

    line-height:1;

    color:#0f172a;

    max-width:550px;

    margin-bottom:24px;
}

.presence-text{

    color:#475569;

    font-size:1.05rem;

    line-height:1.8;

    max-width:460px;

    margin-bottom:45px;
}
.presence-cards{

    display:flex;
    gap:22px;
}

.presence-card{

    width:140px;
    height:140px;

    border-radius:22px;

    background:
    linear-gradient(
        180deg,
        #eef2ff,
        #dfe5ff
    );

    display:flex;
    flex-direction:column;

    justify-content:center;
    align-items:center;

    text-align:center;

    transition:.4s ease;

    cursor:pointer;
}

.presence-card:hover{

    transform:
        translateY(-10px);

    box-shadow:
        0 20px 40px rgba(99,102,241,.15);
}

.presence-card svg{

    width:42px;
    height:42px;

    stroke:#4f74ff;

    margin-bottom:16px;
}

.presence-card h4{

    font-size:1rem;
    font-weight:700;

    color:#23304a;

    line-height:1.4;
}
.presence-visual{

    position:relative;

    display:flex;
    justify-content:center;
    align-items:center;
}

.presence-map{

    width:100%;
    max-width:500px;

    display:block;

    animation:
        mapFloat 8s ease-in-out infinite;
}
@keyframes mapFloat{

    0%,100%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-12px);
    }
}
@media(max-width:991px){

    .presence-grid{

        grid-template-columns:1fr;
        gap:60px;
    }

    .presence-content{

        text-align:center;
    }

    .presence-text{

        margin-inline:auto;
    }

    .presence-cards{

        justify-content:center;
        flex-wrap:wrap;
    }

    .presence-title{

        font-size:2.5rem;
    }
}
.presence-network{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    z-index:2;

    pointer-events:none;
}
.network-line{

    fill:none;

    stroke:#35e08d;

    stroke-width:2.5;

    stroke-dasharray:8 8;

    opacity:.8;

    animation:
        flowLine 10s linear infinite;
}

@keyframes flowLine{

    from{
        stroke-dashoffset:0;
    }

    to{
        stroke-dashoffset:-300;
    }
}
.travel-dot{

    fill:#35e08d;

    filter:
        drop-shadow(
            0 0 12px #35e08d
        );

    animation:
        pulseDot 1.5s ease-in-out infinite;
}

@keyframes pulseDot{

    0%,100%{

        transform:scale(1);
    }

    50%{

        transform:scale(1.4);
    }
}
/* ==========================================
   TEAM SECTION
========================================== */

.team-section{

    position:relative;

    padding:120px 87px;

    overflow:hidden;

    background:
    radial-gradient(
        circle at 15% 10%,
        rgba(217,224,251,.9),
        transparent 45%
    ),
    radial-gradient(
        circle at 90% 10%,
        rgba(193,207,245,.9),
        transparent 45%
    ),
    #f8fafe;
}

.team-section__container{

    max-width:1280px;

    margin:0 auto;
}

.team-section__eyebrow{

    display:block;

    margin-bottom:12px;

    font-size:.9rem;

    font-weight:700;

    letter-spacing:.08em;

    color:#2f68ff;

    text-transform:uppercase;
}

.team-section__title{

    font-size: clamp(2.6rem, 4.5vw, 1.9rem);

    line-height:1.05;

    font-weight:700;

    color:#081827;

    margin-bottom:60px;
}

.team-section__title span{

    color:#081827;
}

.team-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:18px;

    margin-bottom:40px;
}

.team-card{

    position:relative;

    overflow:hidden;

    border-radius:22px;

    height:420px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.08);

    transition:
    transform .4s ease,
    box-shadow .4s ease;
}

.team-card:hover{

    transform:translateY(-8px);

    box-shadow:
    0 25px 50px rgba(0,0,0,.12);
}

.team-card img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;
}

.team-section__description{

    max-width:760px;

    margin:0 auto;

    text-align:center;

    font-size:0.9rem;

    line-height:1.8;

    color:#475569;
}
/* ==========================================
   CERTIFICATION SECTION
========================================== */

.certification-section{

    position:relative;

    padding:0 87px 120px;

    background:#ffffff;
}
.certification-card{

    width:100%;

    margin:0 auto;

    background:#1f49e5;

    border-radius:28px;

    padding:55px 70px;

    display:grid;

    grid-template-columns:
    1.1fr
    .8fr
    1.3fr;

    align-items:center;

    gap:50px;

    overflow:hidden;

    position:relative;

    box-shadow:
    0 30px 80px rgba(31,73,229,.20);
}
.certification-tag{

    display:block;

    margin-bottom:14px;

    color:#3cd582;

    font-size:.85rem;

    font-weight:700;

    letter-spacing:.08em;
}

.certification-left h2{

    color:white;

    font-size: clamp(2.6rem, 4.5vw, 1.9rem);

    line-height:1.05;

    font-weight:700;
}
.certification-center{

    display:flex;
    justify-content:center;
}

.certification-badge{

    width:240px;

    animation:
    certificationFloat 6s ease-in-out infinite;
}

@keyframes certificationFloat{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-12px);
    }
}
.certification-right{

    color:white;
}

.certification-right p{

    font-size:1rem;

    line-height:1.8;

    opacity:.95;
}

.certification-right p + p{

    margin-top:24px;
}
.certification-card::before{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(255,255,255,.12),
        transparent 70%
    );

    left:50%;
    top:50%;

    transform:
    translate(-50%,-50%);
}

/* ==========================================
   PARTNERS SECTION
========================================== */

.partners-section{

    padding:120px 87px;

    background:#fff;
}

.partners-container{

    max-width:1280px;

    margin:0 auto;
}

.partners-eyebrow{

    display:block;

    margin-bottom:14px;

    color:#2f68ff;

    font-size:.9rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;
}

.partners-title{

    max-width:900px;

    font-size: clamp(2.3rem, 4.5vw, 1.9rem);

    line-height:1.05;

    font-weight:700;

    color:#081827;

    margin-bottom:24px;
}

.partners-description{

    max-width:520px;

    color:#5f6b7a;

    font-size:1rem;

    line-height:1.7;

    margin-bottom:60px;
}
.partners-grid{

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:28px;
}
.partner-card{

    background:#eef2ff;

    border-radius:24px;

    padding:10px 10px;

    text-align:center;

    transition:
    transform .35s ease,
    box-shadow .35s ease;

    opacity:0;

    transform:translateY(40px);
}

.partner-card.active{

    opacity:1;

    transform:translateY(0);
}

.partner-card:hover{

    transform:translateY(-8px);

    box-shadow:
    0 20px 40px rgba(47,104,255,.12);
}
.partner-icon{

    display:flex;

    align-items:center;
    justify-content:center;

    margin:0 auto 24px;

    width:72px;
    height:72px;
}

.partner-icon svg{

    width:52px;
    height:52px;

    stroke-width:1.7;
}

.partner-icon.green svg{

    color:#0941e2;
}

.partner-icon.blue svg{

    color:#2f68ff;
}
.partner-card h3{

    font-size:1.55rem;

    font-weight:700;

    color:#081827;

    margin-bottom:14px;
}

.partner-card p{

    color:#5f6b7a;

    font-size:.98rem;

    line-height:1.7;
}
.partner-card:nth-child(1){ transition-delay:.1s; }
.partner-card:nth-child(2){ transition-delay:.2s; }
.partner-card:nth-child(3){ transition-delay:.3s; }
.partner-card:nth-child(4){ transition-delay:.4s; }
/* ==========================================
   ASSOCIATIONS
========================================== */

.associations-section{
    padding:120px 87px;
    background:
    radial-gradient(
        circle at 85% 50%,
        #dae1fb 0%,
        rgba(218,225,251,.75) 25%,
        rgba(218,225,251,.35) 45%,
        transparent 70%
    ),
    #fff;
}
.associations-section::before{
    content:"";

    position:absolute;

    top:-20%;
    right:-10%;

    width:700px;
    height:700px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(218,225,251,.95) 0%,
        rgba(218,225,251,.65) 35%,
        rgba(218,225,251,.25) 60%,
        transparent 100%
    );

    z-index:0;
}

.associations-eyebrow{
    display:block;

    color:#3366ff;
    font-size:.85rem;
    font-weight:700;
    letter-spacing:.08em;

    text-transform:uppercase;

    margin-bottom:16px;
}

.associations-title{
    font-size:clamp(2.4rem,4vw,1.9rem);
    font-weight:700;

    color:#081019;

    margin-bottom:20px;

    max-width:900px;
}

.associations-description{
    max-width:700px;

    color:#4f5f75;

    font-size:1.05rem;
    line-height:1.8;

    margin-bottom:70px;
}

.associations-logos{
    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:28px;
}

.association-logo{
    height:180px;

    background:#fff;

    border-radius:24px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:30px;

    border:1px solid
    rgba(0,0,0,.06);

    box-shadow:
    0 15px 35px rgba(0,0,0,.05);

    transition:.35s ease;
}

.association-logo:hover{
    transform:translateY(-6px);

    box-shadow:
    0 20px 45px rgba(0,0,0,.08);
}

.association-logo img{
    max-width:100%;
    max-height:110px;

    object-fit:contain;
}
/* ======================================
   NUMBERS
====================================== */

.numbers-section{
    padding:110px 87px;
    background:#fff;
}

.numbers-eyebrow{
    display:block;

    text-align:center;

    color:#3366ff;

    font-size:.85rem;
    font-weight:700;

    letter-spacing:.08em;
    text-transform:uppercase;

    margin-bottom:55px;
}

.numbers-grid{
    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:20px;
}

.number-card{
    background:
    linear-gradient(
        135deg,
        #e8ecff 0%,
        #dfe5fb 100%
    );

    border-radius:24px;

    padding:28px;

    display:flex;
    align-items:center;
    gap:20px;

    transition:.35s ease;
}

.number-card:hover{
    transform:translateY(-6px);

    box-shadow:
    0 20px 40px rgba(51,102,255,.12);
}

.number-icon{
    flex-shrink:0;
}

.number-icon svg{
    width:58px;
    height:58px;

    color:#2458ff;
}

.number-content h3{
    margin:0;

    font-size:2.5rem;
    font-weight:800;

    color:#2458ff;

    line-height:1;
}

.number-content p{
    margin-top:8px;

    color:#081019;

    font-size:1rem;
    line-height:1.4;

    font-weight:500;
}
@media(max-width:1200px){

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

}

@media(max-width:768px){

    .numbers-section{
        padding:80px 30px;
    }

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

}
/* ======================================
   ABOUT CTA
====================================== */

.about-cta{
    padding:120px 87px;

    background:
    radial-gradient(
        circle at 20% 50%,
        rgba(0,255,170,.08),
        transparent 40%
    ),
    radial-gradient(
        circle at 80% 50%,
        rgba(0,255,170,.08),
        transparent 40%
    ),
    #082032;

    overflow:hidden;
}

.about-cta__container{
    max-width:1400px;
    margin:auto;

    display:grid;
    grid-template-columns:
    1fr 520px;

    align-items:center;

    gap:80px;
}

.about-cta__eyebrow{
    display:block;

    color:#42e88c;

    font-size:.85rem;
    font-weight:700;

    letter-spacing:.08em;
    text-transform:uppercase;

    margin-bottom:18px;
}

.about-cta__content h2{
    color:#fff;

    font-size:clamp(2.5rem,4vw,1.9rem);

    line-height:1.05;

    font-weight:800;

    margin-bottom:24px;
}

.about-cta__content h2 span{
    color:#42e88c;
}

.about-cta__content p{
    color:rgba(255,255,255,.78);

    font-size:1.08rem;

    line-height:1.8;

    max-width:560px;
}

.about-cta__form{
    background:white;

    border-radius:24px;

    padding:24px;

    box-shadow:
    0 30px 80px rgba(0,0,0,.18);
}

.about-cta__grid{
    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:14px;

    margin-bottom:18px;
}

.about-cta__grid input{
    height:54px;

    border:none;

    background:#f6f7fb;

    border-radius:14px;

    padding:0 18px;

    font-size:.95rem;

    outline:none;
}

.about-cta__grid input:focus{
    box-shadow:
    0 0 0 2px rgba(66,232,140,.25);
}

.about-cta__form button{
    width:100%;

    height:58px;

    border:none;

    cursor:pointer;

    border-radius:16px;

    background:
    linear-gradient(
        90deg,
        #2458ff,
        #0f47c5
    );

    color:white;

    font-weight:700;

    font-size:1rem;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    transition:.3s ease;
}

.about-cta__form button:hover{
    transform:translateY(-3px);
}
/* ==================================
   VOISHIELD HERO
================================== */

.voishield-hero{
    position:relative;

    overflow:hidden;

    min-height:100vh;

    background:#031a2c;

    display:flex;
    align-items:center;
}

.voishield-container{
    width:100%;

    padding:0 87px;

    max-width:1600px;

    margin:auto;

    display:grid;

    grid-template-columns:
    1fr 1fr;

    align-items:center;
}

.voishield-content{
    position:relative;
    z-index:5;
}

.voishield-tag{
    display:inline-block;

    color:#42e88c;

    font-weight:700;

    margin-bottom:24px;
}

.voishield-content h1{
    font-size:clamp(3rem,5vw,1.9rem);
    font-family: 'Borscha', sans-serif;

    line-height:.95;

    font-weight:400;

    color:white;

    max-width:700px;

    margin-bottom:30px;
}

.voishield-content h1 span{
    color:#42e88c;
}

.voishield-content p{
    max-width:620px;

    color:rgba(255,255,255,.75);

    line-height:1.8;

    font-size:1rem;

    margin-bottom:40px;
}

.voishield-actions{
    display:flex;
    gap:20px;
}

.voishield-btn{
    padding:16px 32px;

    border-radius:999px;

    text-decoration:none;

    font-weight:700;

    display:flex;
    align-items:center;
    gap:10px;

    transition:.3s;
}

.voishield-btn--primary{
    background:#42e88c;
    color:#031a2c;
}

.voishield-btn--primary:hover{
    transform:translateY(-3px);

    box-shadow:
    0 15px 35px rgba(66,232,140,.4);
}

.voishield-btn--secondary{
    border:1px solid rgba(255,255,255,.2);
    color:white;
}

.voishield-btn--secondary:hover{
    background:rgba(255,255,255,.05);
}
.voishield-visual{
    position:relative;

    display:flex;
    justify-content:center;
    align-items:center;
}

.voishield-wordmark{
    position:absolute;
    font-family: 'HostGrotesk', sans-serif;

    top: -30px;

    font-size:7rem;

    font-weight:900;

    color:white;

    opacity:.95;

    z-index:1;

    pointer-events:none;
}

.voishield-phone{
    position:relative;

    width:350px;
    top: 70px;

    z-index:4;

    animation:
    phoneFloat 6s ease-in-out infinite;
}

.phone-glow{
    position:absolute;

    width:350px;
    height:350px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(66,232,140,.45),
        transparent 70%
    );

    filter:blur(40px);

    z-index:2;
}
@keyframes phoneFloat{

    0%,100%{
        transform:
        translateY(0px);
    }

    50%{
        transform:
        translateY(-18px);
    }

}
.voishield-wave{
    position:absolute;

    inset:0;

    background:
    url("assets/images/wave-grid.svg")
    center bottom / cover no-repeat;

    opacity:.35;

    animation:
    waveMove 18s linear infinite;
}

@keyframes waveMove{

    from{
        transform:
        translateX(0);
    }

    to{
        transform:
        translateX(-120px);
    }

}
/* ============================================================
   RIGHT COLUMN — Phone Scene
   ============================================================ */
.vs-phone-scene {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 640px;
  opacity: 1;
  
  transition: opacity 0.8s ease 0.3s, transform 0.8s ease 0.3s;
}

/* Stat Cards */
.vs-stat {
  position: absolute;
  background: rgba(3,27,46,0.85);
  border: 1px solid var(--vs-border);
  border-radius: 14px;
  padding: 12px 18px;
  backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 1;
  z-index: 10;
  transition: opacity 0.6s ease;
}
.vs-stat-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--vs-green);
  letter-spacing: -0.02em;
  line-height: 1;
}
.vs-stat-label {
  font-size: 11px;
  color: var(--vs-muted);
  font-weight: 500;
  white-space: nowrap;
}
.vs-stat-1 { top: 60px; left: -10px; animation: vs-float-a 4s ease-in-out infinite; }
.vs-stat-2 { bottom: 160px; left: -30px; animation: vs-float-b 4.5s ease-in-out infinite 0.8s; }
.vs-stat-3 { top: 110px; right: -20px; animation: vs-float-c 3.8s ease-in-out infinite 0.4s; }

@keyframes vs-float-a {
  0%, 100% { transform: translateY(0px) rotate(-1deg); }
  50% { transform: translateY(-8px) rotate(0deg); }
}
@keyframes vs-float-b {
  0%, 100% { transform: translateY(0px) rotate(1deg); }
  50% { transform: translateY(-10px) rotate(-0.5deg); }
}
@keyframes vs-float-c {
  0%, 100% { transform: translateY(0px) rotate(0.5deg); }
  50% { transform: translateY(-6px) rotate(-1deg); }
}

/* Glow behind phone */
.vs-phone-glow {
  position: absolute;
  width: 340px;
  height: 440px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(61,220,132,0.18) 0%, transparent 70%);
  filter: blur(40px);
  z-index: 1;
  animation: vs-glow-pulse 3s ease-in-out infinite;
}
@keyframes vs-glow-pulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

/* Data particles flowing to phone */
.vs-data-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
  border-radius: 50%;
}

/* Phone Shell */
.vs-phone {
  position: relative;
  z-index: 5;
  width: var(--vs-phone-w);
  height: var(--vs-phone-h);
  border-radius: 44px;
  background: linear-gradient(160deg, #1C2B3A 0%, #0A1929 60%, #061220 100%);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.5),
    0 32px 80px rgba(0,0,0,0.6),
    0 0 60px rgba(61,220,132,0.08),
    inset 0 1px 0 rgba(255,255,255,0.1);
  overflow: hidden;
  animation: vs-phone-float 5s ease-in-out infinite;
  transform-style: preserve-3d;
  will-change: transform;
}
@keyframes vs-phone-float {
  0%, 100% { transform: translateY(0px) rotate(0.5deg); }
  33% { transform: translateY(-12px) rotate(-0.3deg); }
  66% { transform: translateY(-6px) rotate(0.8deg); }
}

/* Notch */
.vs-phone-notch {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 28px;
  background: #000;
  border-radius: 20px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 10px;
  gap: 6px;
}
.vs-phone-camera {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #111;
  border: 1px solid #222;
  position: relative;
}
.vs-phone-camera::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: #0A0A0A;
}

/* Phone Screen */
.vs-phone-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 56px 20px 24px;
  background: linear-gradient(180deg, #0B1929 0%, #081422 100%);
}

/* Status bar */
.vs-status-bar {
  position: absolute;
  top: 0;
  left: 0; right: 0;
  height: 52px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 22px 8px;
  font-size: 10px;
  font-weight: 600;
  color: var(--vs-text);
  z-index: 9;
}
.vs-status-time { font-size: 12px; font-weight: 700; }
.vs-status-icons { display: flex; gap: 4px; align-items: center; }

/* Incoming call UI */
.vs-call-ui {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}
.vs-call-label {
  font-size: 12px;
  color: var(--vs-muted);
  letter-spacing: 0.04em;
  font-weight: 500;
}
.vs-call-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--vs-text);
  letter-spacing: -0.02em;
  text-align: center;
  min-height: 28px;
  transition: opacity 0.4s ease;
}
.vs-call-number {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--vs-muted);
  min-height: 20px;
}
.vs-call-badge {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--vs-green);
  display: flex;
  align-items: center;
  justify-content: center;
}
.vs-call-badge svg { width: 9px; height: 9px; fill: #021520; }

/* Shield */
.vs-shield-wrap {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px 0;
}
/* Rings */
.vs-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(61,220,132,0.2);
  animation: vs-ring-expand 3s ease-out infinite;
}
.vs-ring-1 { width: 80px; height: 80px; animation-delay: 0s; }
.vs-ring-2 { width: 110px; height: 110px; animation-delay: 0.8s; }
.vs-ring-3 { width: 140px; height: 140px; animation-delay: 1.6s; }
@keyframes vs-ring-expand {
  0% { transform: scale(0.7); opacity: 0.8; }
  100% { transform: scale(1.3); opacity: 0; }
}

.vs-shield-bg {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(61,220,132,0.18) 0%, rgba(61,220,132,0.05) 60%, transparent 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  animation: vs-shield-breathe 2.5s ease-in-out infinite;
}
@keyframes vs-shield-breathe {
  0%, 100% { box-shadow: 0 0 20px rgba(61,220,132,0.25); transform: scale(1); }
  50% { box-shadow: 0 0 40px rgba(61,220,132,0.5); transform: scale(1.05); }
}

.vs-shield-svg {
  width: 38px;
  height: 38px;
  filter: drop-shadow(0 0 8px rgba(61,220,132,0.8));
  animation: vs-shield-glow 2.5s ease-in-out infinite;
}
@keyframes vs-shield-glow {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(61,220,132,0.7)); }
  50% { filter: drop-shadow(0 0 18px rgba(61,220,132,1)); }
}

/* Verified label */
.vs-verified-text {
  font-size: 14px;
  font-weight: 700;
  color: var(--vs-green);
  letter-spacing: 0.02em;
  min-height: 20px;
  text-align: center;
  transition: opacity 0.4s ease;
}

/* Call reason pill */
.vs-reason-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.vs-reason-btn {
  padding: 8px 22px;
  border-radius: 8px;
  background: var(--vs-blue-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  border: none;
  cursor: default;
  width: 80%;
  text-align: center;
}
.vs-reason-sub {
  font-size: 12px;
  color: var(--vs-muted);
  min-height: 16px;
  text-align: center;
  transition: opacity 0.4s ease;
}

/* Call actions */
.vs-call-actions {
  display: flex;
  gap: 40px;
  margin-top: auto;
  margin-bottom: 8px;
}
.vs-call-btn {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  transition: transform 0.2s ease;
}
.vs-call-btn-decline { background: #FF4757; }
.vs-call-btn-accept { background: var(--vs-green); animation: vs-accept-pulse 2s ease-in-out infinite; }
@keyframes vs-accept-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(61,220,132,0.5); }
  50% { box-shadow: 0 0 0 10px rgba(61,220,132,0); }
}
.vs-call-btn svg { width: 22px; height: 22px; fill: #fff; }

/* Watermark */
.vs-phone-brand {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.2);
  letter-spacing: 0.1em;
  white-space: nowrap;
}

/* ============================================================
   REVEALED STATE (IntersectionObserver)
   ============================================================ */
.vs-hero.vs-revealed .vs-eyebrow,
.vs-hero.vs-revealed .vs-headline,
.vs-hero.vs-revealed .vs-desc,
.vs-hero.vs-revealed .vs-ctas,
.vs-hero.vs-revealed .vs-proof {
  opacity: 1;
  transform: translateY(0);
}
.vs-hero.vs-revealed .vs-phone-scene {
  opacity: 1;
  transform: scale(1);
}
.vs-hero.vs-revealed .vs-stat {
  opacity: 1;
}
.vs-hero.vs-revealed .vs-stat-1 { transition-delay: 0.7s; }
.vs-hero.vs-revealed .vs-stat-2 { transition-delay: 0.9s; }
.vs-hero.vs-revealed .vs-stat-3 { transition-delay: 0.8s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .vs-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .vs-copy { align-items: center; }
  .vs-desc { max-width: 100%; }
  .vs-phone-scene { height: 500px; }
  .vs-stat-1 { left: 0; top: 20px; }
  .vs-stat-2 { left: 0; bottom: 80px; }
  .vs-stat-3 { right: 0; top: 40px; }
}
@media (max-width: 540px) {
  .vs-hero { padding: 60px 24px; }
  :root { --vs-phone-w: 240px; --vs-phone-h: 480px; }
  .vs-stat { display: none; }
  .vs-phone-scene { height: 420px; }
  .vs-headline { font-size: 32px; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.2s !important; }
}
.vs-phone-scene{
    position:relative;
    width:600px;
    height:700px;
    margin:0 auto;
   
}
/* ==========================================
   FRAUD PROBLEM
========================================== */

.fraud-problem{
    padding:120px 0;
    background:#ffffff;
}

.fraud-problem__container{
    max-width:1400px;
    margin:0 auto;
    padding:0 87px;

    display:grid;
    grid-template-columns:420px 1fr;
    gap:60px;
    align-items:start;
}

.fraud-problem__eyebrow{
    display:block;

    color:#3cd582;
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;

    margin-bottom:18px;
}

.fraud-problem__title{
    font-family: 'Borscha', sans-serif;
    font-size: clamp(2.2rem, 3vw, 2.8rem);
    font-weight:400;
    line-height:1.05;

    color:#101828;

    margin-bottom:24px;
}

.fraud-problem__title span{
    display:block;
    color:#3cd582;
}

.fraud-problem__text{
    color:#4b5563;
    line-height:1.6;
    max-width:350px;
}

.fraud-problem__cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.fraud-card{
    background:#fff;

    border:1px solid #d9d9d9;
    border-radius:16px;

    padding:28px;

    transition:.3s ease;
}

.fraud-card:hover{
    transform:translateY(-6px);

    border-color:#3cd582;

    box-shadow:
        0 15px 40px rgba(60,213,130,.12);
}

.fraud-card__icon{
    margin-bottom:20px;
}

.fraud-card__icon svg{
    width:30px;
    height:30px;
}

.fraud-card__icon--green svg{
    stroke:#3cd582;
}

.fraud-card__icon--blue svg{
    stroke:#2563eb;
}

.fraud-card__icon--purple svg{
    stroke:#8b5cf6;
}

.fraud-card h3{
    font-size:2rem;
    font-weight:700;

    color:#101828;

    margin-bottom:10px;
}

.fraud-card p{
    color:#4b5563;
    line-height:1.5;
}
/* ==========================================
   COMO FUNCIONA VOISHIELD
========================================== */

.voishield-process{
    position:relative;

    background:#f6f7fa;

    padding:140px 0;

    overflow:hidden;
}

/* GRID BACKGROUND */

.voishield-process__grid{

    position:absolute;
    inset:0;

    background-image:
        linear-gradient(
            rgba(0,84,209,.08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0,84,209,.08) 1px,
            transparent 1px
        );

    background-size:32px 32px;

    pointer-events:none;
}

/* CONTAINER */

.voishield-process__container{
    position:relative;
    z-index:2;

    max-width:1500px;
    margin:0 auto;

    padding:0 87px;

    display:grid;
    grid-template-columns:320px 1fr;

    gap:80px;
    align-items:center;
}

/* LEFT */

.process-tag{
    display:block;

    color:#0054d1;

    font-size:13px;
    font-weight:700;

    text-transform:uppercase;

    margin-bottom:20px;
}

.voishield-process__content h2{
    color:#111827;

    font-size: clamp(2.6rem, 4.5vw, 1.9rem);
    font-weight:700;

    line-height:1.05;
}

/* RIGHT */

.voishield-process__steps{
    display:flex;
    align-items:center;
    justify-content:center;
}

/* PHONE */

.process-step{
    width:280px;
    text-align:center;
}

.process-step img{
    width:100%;
    height:auto;

    display:block;

    margin-bottom:20px;
}

/* TOP LABEL */

.process-step__label{
    display:flex;
    justify-content:center;
    align-items:center;

    gap:8px;

    margin-bottom:20px;

    color:#111827;
    font-size:.95rem;
    font-weight:600;
}

.process-step__label span{
    width:28px;
    height:28px;

    border-radius:50%;

    background:#0054d1;
    color:white;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:.8rem;
}

.flow-card{

    position:relative;
    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.flow-card:hover{

    transform:
        translateY(-8px)
        scale(1.05);

    box-shadow:
        0 20px 50px rgba(0,0,0,.12);
}

.flow-card i{

    transition:
        transform .35s ease;
}
.demo-form-btn span{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
}

.demo-form-btn .fa-whatsapp{
    color: #ffffff;
    transition: color .3s ease, transform .3s ease;
}

.demo-form-btn:hover .fa-whatsapp{
    color: #0a1b2a;
    transform: scale(1.1);
}

.flow-card:hover i{

    transform:
        scale(1.12)
        rotate(-3deg);
}

.process-step img{

    transition:
        transform .35s ease;
}

.process-step:hover img{

    transform:
        translateY(-8px)
        scale(1.04);
}

/* TEXT */

.process-step__caption strong{
    color:#0054d1;
    display:block;
    margin-bottom:6px;
}

.process-step__caption p{
    color:#4b5563;
    line-height:1.5;
}

/* ARROWS */

.process-arrow{
    font-size:3rem;
    color:#0054d1;

    margin:0 20px;
}
/* ==========================================
   DASHBOARD SECTION
========================================== */

.voishield-dashboard{

    background:#0450c7;

    padding:110px 0;

    overflow:hidden;
}

.voishield-dashboard__container{

    max-width:1400px;

    margin:auto;

    padding:0 87px;

    display:grid;

    grid-template-columns: 0.9fr 1.1fr;

    align-items:center;

    gap:40px;
}

/* LEFT */

.dashboard-tag{

    display:block;

    color:#40d97b;

    font-size:14px;

    font-weight:700;

    margin-bottom:18px;

    text-transform:uppercase;
}

.dashboard-content h2{

    color:white;

    font-size:clamp(2.8rem,4vw,1.9rem);

    line-height:1.05;

    font-weight:700;

    margin-bottom:20px;
}

.dashboard-content p{

    color:rgba(255,255,255,.85);

    font-size:1rem;

    line-height:1.8;

    margin-bottom:35px;

    max-width:470px;
}

/* FEATURES */

.dashboard-features{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px 30px;

    margin-bottom:40px;
}

.dashboard-feature{

    color:white;

    font-weight:600;

    font-size:.95rem;

    display:flex;

    flex-direction:column;
}

.dashboard-feature span{

    color:rgba(255,255,255,.75);

    font-size:.85rem;

    font-weight:400;

    margin-top:4px;
}

/* BUTTON */

.dashboard-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    background:#45dd83;

    color:#071a30;

    text-decoration:none;

    font-weight:700;

    padding:16px 34px;

    border-radius:999px;

    transition:.3s;
}

.dashboard-btn:hover{

    transform:translateY(-3px);
}

/* RIGHT */

.dashboard-visual{

    position:relative;
    transform: translateX(150px);

    min-height:450px;

    display:flex;

    justify-content:flex-end;

    align-items:center;
}

.dashboard-screen{

    width:100%;

    max-width:700px;

    border-radius:12px;
    display:block;
    box-shadow:
    0 40px 100px rgba(0,0,0,.25);
}

.dashboard-phone{

    position:absolute;

    left:-30px;

    bottom:-10px;

    width:180px;

    z-index:3;

    filter:
    drop-shadow(0 20px 50px rgba(0,0,0,.4));
}
.voishield-flow{

    padding:120px 87px;
    background:#f6f7fa;
}

.flow-container{

    max-width:1400px;
    margin:auto;

    display:grid;
    grid-template-columns:420px 1fr;

    gap:60px;
    align-items:center;
}

.flow-tag{

    display:block;

    color:#0054d1;

    font-size:.9rem;
    font-weight:700;

    letter-spacing:.08em;

    margin-bottom:18px;
}

.flow-content h2{

    font-size:clamp(2.5rem,4vw,1.9rem);

    line-height:1.05;

    color:#081019;
}

.flow-diagram{

    display:flex;
    align-items:center;
    justify-content:center;

    gap:0;
}

.flow-card{

    width:120px;
    height:120px;

    background:white;

    border-radius:18px;

    display:flex;
    flex-direction:column;

    justify-content:center;
    align-items:center;

    text-align:center;

    padding:18px;

    box-shadow:
    0 10px 25px rgba(0,0,0,.05);

    border:1px solid rgba(0,0,0,.05);

    z-index:2;
}

.flow-card svg{

    width:34px;
    height:34px;

    margin-bottom:12px;

    stroke:#081f4d;
}

.flow-card span{

    font-size:.85rem;
    font-weight:600;

    color:#081f4d;
}

.flow-card--active{

    background:#0054d1;

    box-shadow:
    0 18px 40px rgba(0,84,209,.3);
}

.flow-card--active svg,
.flow-card--active span{

    color:white;
    stroke:white;
}
.flow-connector{

    width:70px;
    height:2px;

    position:relative;

    margin:0 8px;
}

.flow-connector::before{

    content:"";

    position:absolute;
    inset:0;

    background:
    repeating-linear-gradient(
        90deg,
        #0054d1 0 6px,
        transparent 6px 12px
    );

    animation:flowMove 1s linear infinite;
}

.flow-connector::after{

    content:"➜";

    position:absolute;

    right:-12px;
    top:-12px;

    color:#0054d1;
    font-size:18px;
    font-weight:700;
}

@keyframes flowMove{

    from{
        background-position:0 0;
    }

    to{
        background-position:24px 0;
    }
}
@media(max-width:992px){

    .flow-container{

        grid-template-columns:1fr;
    }

    .flow-diagram{

        flex-wrap:wrap;
        gap:20px;
    }

    .flow-connector{

        display:none;
    }
}
/* ================================================= */
/* INDUSTRIES */
/* ================================================= */

.vs-industries{

    background:#ebf2ff;

    padding:120px 87px;
}

.vs-industries-container{

    max-width:1400px;
    margin:auto;

    display:grid;
    grid-template-columns:
        1fr
        360px
        340px;

    gap:50px;
    align-items:center;
}

.vs-industries-tag{

    display:block;

    color:#0054d1;

    font-size:.9rem;
    font-weight:700;

    letter-spacing:.08em;

    margin-bottom:18px;
}

.vs-industries-content h2{

    font-size: clamp(2.6rem, 4.5vw, 1.9rem);
    line-height:1.05;

    color:#081019;

    max-width:480px;

    margin-bottom:55px;
}

/* INDUSTRIES GRID */

.vs-industries-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:25px;
}

.industry-item{

    text-align:center;
}

.industry-item svg{

    width:52px;
    height:52px;

    color:#081f4d;

    margin-bottom:12px;
}

.industry-item span{

    display:block;

    font-size:.95rem;
    font-weight:600;

    color:#081f4d;
}

/* PHONE */

.vs-industries-phone{

    display:flex;
    justify-content:center;
}

.vs-industries-phone img{

    width:100%;
    max-width:320px;
}

/* STATS */

.vs-industries-stats{

    display:flex;
    flex-direction:column;

    gap:18px;
}

.vs-stat-card{

    background:white;

    border-radius:20px;

    padding:24px;

    min-height:110px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    box-shadow:
    0 10px 30px rgba(0,0,0,.05);
}

.vs-stat-card h3{

    font-size:2.3rem;
    font-weight:800;

    line-height:1;

    margin-bottom:8px;
}

.stat-green h3{
    color:#32d27d;
}

.blue{
    color:#0054d1;
}

.purple{
    color:#7b42ff;
}

.vs-stat-card p{

    color:#2f3d4f;
    line-height:1.4;
}

/* ICONS */

.stat-icon{

    width:72px;
    height:72px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;
}

.stat-icon svg{

    width:34px;
    height:34px;
}

.blue-bg{

    background:#eef3ff;
    color:#0054d1;
}

.purple-bg{

    background:#f3edff;
    color:#7b42ff;
}

/* CHART */

.stat-chart{

    width:140px;
}

.stat-chart svg{

    width:100%;
}

/* Animación gráfica */

.stat-chart path{

    stroke-dasharray:300;
    stroke-dashoffset:300;

    animation:drawChart 3s ease forwards infinite;
}

@keyframes drawChart{

    0%{
        stroke-dashoffset:300;
    }

    40%{
        stroke-dashoffset:0;
    }

    100%{
        stroke-dashoffset:0;
    }
}
@media(max-width:1100px){

    .vs-industries-container{

        grid-template-columns:1fr;
        text-align:center;
    }

    .vs-industries-content h2{

        max-width:none;
    }

    .vs-industries-grid{

        justify-content:center;
    }

    .vs-industries-phone{

        order:2;
    }

    .vs-industries-stats{

        order:3;
    }
}

@media(max-width:768px){

    .vs-industries{

        padding:90px 24px;
    }

    .vs-industries-grid{

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

    .vs-stat-card{

        padding:20px;
    }

    .vs-stat-card h3{

        font-size:2rem;
    }
}
/* ================================================= */
/* SAAS CTA FINAL */
/* ================================================= */

.vs-saas{

    background:#0054d1;

    padding:100px 87px;
}

.vs-saas-wrapper{

    max-width:1400px;
    margin:auto;

    display:grid;
    grid-template-columns:1fr 1.25fr;

    gap:50px;
    align-items:center;
}

/* LEFT */

.vs-saas-tag{

    display:block;

    color:#39d98a;

    font-weight:700;
    font-size:.9rem;

    margin-bottom:18px;
}

.vs-saas-left h2{

    color:white;

    font-size:clamp(2.5rem,4vw,1.9rem);

    line-height:1.05;

    margin-bottom:25px;
}

.vs-saas-left p{

    color:rgba(255,255,255,.85);

    max-width:560px;

    line-height:1.7;

    margin-bottom:45px;
}

/* FLOW */

.vs-saas-flow{

    display:flex;
    align-items:center;
    gap:18px;

    flex-wrap:wrap;
}

.flow-card{

    width:85px;

    text-align:center;
}

.flow-card i{

    width:56px;
    height:56px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin:auto auto 12px;

    border-radius:16px;

    background:rgba(255,255,255,.12);

    color:white;
}

.flow-card svg{

    width:30px;
    height:30px;
}

.flow-card span{

    display:block;

    color:white;

    font-size:.8rem;
    line-height:1.4;
}

.flow-card span2{

    display:block;

    color:#0049af;

    font-size:.8rem;
    font-weight:700;
    line-height:1.4;
}

.flow-arrow{

    color:#39d98a;

    font-size:1.8rem;
    font-weight:700;
}

/* RIGHT */

.vs-saas-card{

    background:#021625;

    border-radius:34px;

    padding:40px;

    display:grid;
    grid-template-columns:1fr 260px;

    align-items:center;

    overflow:hidden;
}

.vs-saas-small{

    display:block;
    

    color:#39d98a;

    font-weight:700;

    margin-bottom:15px;
}

.vs-saas-content h3{

    color:white;

    font-size: clamp(2.6rem, 4.5vw, 1.9rem);

    line-height:1.05;

    margin-bottom:18px;
}

.hero-cta-btn:hover .fa-whatsapp{
    color:white;
}

.vs-saas-content p{

    color:rgba(255,255,255,.75);

    line-height:1.6;

    margin-bottom:30px;
}

/* FORM */

.vs-demo-form{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:12px;
}

.vs-demo-form input{

    height:50px;

    border:none;

    border-radius:12px;

    background:white;

    padding:0 18px;

    font-family:inherit;
}

.vs-demo-form button{

    grid-column:1/-1;

    width:100% !important;

    margin-top:10px !important;
}

/* PHONE */

.vs-saas-phone{

    display:flex;
    justify-content:flex-end;
}

.vs-saas-phone img{

    width:100%;
    max-width:260px;

    transform:translateY(30px);
}
@media(max-width:1100px){

    .vs-saas-wrapper{

        grid-template-columns:1fr;
    }

    .vs-saas-card{

        grid-template-columns:1fr;
    }

    .vs-saas-phone{

        justify-content:center;

        margin-top:30px;
    }
}

@media(max-width:768px){

    .vs-saas{

        padding:80px 24px;
    }

    .vs-demo-form{

        grid-template-columns:1fr;
    }

    .vs-saas-flow{

        display:grid;
        grid-template-columns:repeat(4,1fr);
        gap:6px;
    }

    .flow-arrow{

        display:none;
    }

    .vs-saas-phone img{

        max-width:220px;
    }
}
.pathway-hero{
    position:relative;
    overflow:hidden;

    background:#0054d1;

    min-height:1000px;

    display:flex;
    align-items:center;
}

#gradient-canvas{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    z-index:1;

    opacity:.45;

    --gradient-color-1:#0054d1;
    --gradient-color-2:#0a2d65;
    --gradient-color-3:#37c886;
    --gradient-color-4:#18b66a;
}

#gradient-canvas2{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    z-index:1;

    opacity:.45;

    --gradient-color-1:#ffffff;
    --gradient-color-2:#d8b4fe;
    --gradient-color-3:#9333ea;
    --gradient-color-4:#6803FF;
}

.pathway-container{

    width:100%;
    max-width:1450px;

    margin:auto;

    padding:80px 80px;

    display:grid;
    grid-template-columns: 500px 1fr;

    align-items:center;
    gap:40px;

    position:relative;
    z-index:5;
}
.pathway-tag{

    display:block;

    color:#3cd582;

    font-size:.9rem;
    font-weight:700;

    margin-bottom:22px;
}

.pathway-content h1{

    font-family:'Borscha',sans-serif;
    font-weight:400;

    font-size: clamp(2.6rem, 4.5vw, 3rem);
    line-height:.95;

    color:white;

    margin-bottom:28px;
}

.pathway-content h1 span{

    display:block;
    color:#3cd582;
}

.pathway-content p{

    max-width:500px;

    color:#dbe7ff;

    line-height:1.7;

    margin-bottom:40px;
}

.pathway-actions{

    display:flex;
    gap:18px;
    align-items:center;
}
.pathway-secondary-btn{

    height:52px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0 28px;

    border-radius:999px;

    border:2px solid #3cd582;

    color:white;

    font-weight:600;

    transition:.3s;
}

.pathway-secondary-btn:hover{

    background:#3cd582;
    color:#081019;
}
.pathway-visual{

    position:relative;
    height:80px;
}
.pathway-wordmark{

    position:absolute;
    font-family: 'HostGrotesk', sans-serif;

    top: -295px;
    left: 50%;
    transform: translateX(-50%);

    font-size:7rem;

    font-weight:900;

    color:white;

    opacity:.95;

    z-index:1;

    pointer-events:none;
}
.phones-group{

    position:relative;
    top: -200px;

    bottom:90px;
    left:50%;

    transform:translateX(-50%);

    display:flex;
    
    gap:30px;

    z-index:10;
}

.phone-card{

    width:280px;

    filter:
        drop-shadow(0 25px 60px rgba(0,0,0,.35));

    transition:.4s ease;
}

.phone-card:hover{

    transform:
        translateY(-15px)
        scale(1.03);
}
@media(max-width:991px){

    .pathway-container{

        grid-template-columns:1fr;
        text-align:center;
    }

    .pathway-content p{
        margin-inline:auto;
    }

    .pathway-actions{
        justify-content:center;
    }

    .pathway-wordmark{
        z-index:2;
        font-size:4rem;
    }

    .phones-group{

        position:relative;

        left:auto;
        transform:none;

        justify-content:center;
        flex-wrap:wrap;
    }

    .phone-card{
        width:220px;
    }
}
/* =======================================================
   PATHWAY PROBLEM
======================================================= */

.pathway-problem{
    background:#f6f7fa;
    height:550px;
    overflow:hidden;
}

.pathway-problem-container{
    max-width:1600px;
    margin:auto;

    display:grid;
    grid-template-columns: 320px 1fr;
    gap:60px;
    align-items:center;
}

/* LEFT */

.problem-tag{
    display:block;

    color:#1d57ff;

    font-size:.82rem;
    font-weight:700;
    

    text-transform:uppercase;
    letter-spacing:.04em;

    margin-bottom:10px;
}

.problem-content h2{
    font-size: clamp(2.6rem, 4.5vw, 1.9rem);

    line-height:.95;
    font-weight:800;

    color:#081019;

    margin-bottom:24px;
}

.problem-content p{
    color:#50586b;

    font-size:1rem;
    line-height:1.7;
}

/* FLOW */

.problem-flow{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:30px;
}

/* PHONE */

.problem-phone{
  position:relative;
    top:120px;
    transition:.35s ease;
}

.problem-phone img{
    width:320px;
    display:block;
}

.problem-phone:hover{
    transform:
        translateY(-10px)
        scale(1.03);
}

/* STEP TEXT */

.problem-step{
    width:180px;
}

.problem-badge{
    width:36px;
    height:36px;

    border-radius:50%;

    background:#1d57ff;
    color:white;

    display:flex;
    align-items:center;
    justify-content:center;

    
    font-weight:700;

    margin-bottom:14px;
}

.problem-text strong{
    display:block;

    color:#0d2b74;

    font-size:1rem;
    font-weight:700;

    margin-bottom:8px;
}

.problem-text span{
    color:#4d5566;

    line-height:1.5;

    font-size:.95rem;
}
@media (max-width:1200px){

    .pathway-problem-container{
        grid-template-columns:1fr;
    }

    .problem-content{
        text-align:center;
        max-width:700px;
        margin:auto;
    }

    .problem-flow{
        flex-wrap:wrap;
        gap:40px;
    }
}

@media (max-width:768px){

    .pathway-problem{
        padding:80px 24px;
    }

    .problem-flow{
        flex-direction:column;
    }

    .problem-step{
        width:100%;
        text-align:center;
    }

    .problem-badge{
        margin:0 auto 12px;
    }

    .problem-phone img{
        width:180px;
    }
}
/* ==========================================
   PATHWAY THREATS
========================================== */

.pathway-threats{
    background:#44d17a;
    padding:90px 87px;
    overflow:hidden;
}

.pathway-threats-container{
  
    max-width:1400px;
    margin:auto;
    height:390px;

    display:grid;
    justify-self:center;
    
    grid-template-columns:
        1fr
        auto
        1fr;


    align-items:center;
    gap:120px;
}

.pathway-threats-content{
    transform: translateY(-150px);
}

/* LEFT */

.pathway-threats-tag{
    display:block;

    color:white;
    opacity:.9;

    font-size:.8rem;
    font-weight:700;

    text-transform:uppercase;
    

    margin-bottom:20px;
}



.pathway-threats-content h2{
    color:white;

    font-size: clamp(2.6rem, 4.5vw, 1.9rem);

    line-height:1;
    font-weight:800;
    
    
    margin-bottom:20px;
}

.pathway-threats-content h2 span{
    display:block;
    color:#001b4d;
}

.pathway-threats-content p{
    color:#08203f;

    line-height:1.7;
    font-size:1rem;
}

/* CENTER */

.pathway-threats-phone{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
}

.pathway-threats-phone img{
    width:320px;
    display:block;
}

/* WORDMARK */

.pathway-wordmark-bg{
    position:absolute;

    top:30px;
    left:50%;

    transform:translateX(-50%);

    font-size:6rem;
    font-weight:900;

    color:white;
    opacity:.9;

    white-space:nowrap;

    z-index:0;
}

/* ALERT CARD */

.pathway-alert-card{
    position:absolute;

    top:115px;
    left:50%;

    transform:translateX(-50%);

    width:360px;

    background:
        rgba(255,255,255,.72);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.4);

    border-radius:24px;

    padding:20px;

    z-index:2;

    box-shadow:
        0 20px 40px rgba(0,0,0,.12);
}

.alert-header{
    display:flex;
    align-items:center;
    gap:14px;
}

.alert-logo{
    width:42px;
    height:42px;

    background:#08204f;

    border-radius:12px;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#49db81;
}

.alert-header span{
    margin-left:auto;
    color:#666;
}

.alert-header img{

    width:42px;
    height:42px;
}

.alert-divider{
    height:1px;
    background:#d7dce6;
    margin:15px 0;
}

.alert-body{
    display:flex;
    gap:16px;
}

.alert-icon{
    width:40px;
    height:40px;

    min-width:40px;
    min-height:40px;

    flex-shrink:0;

    border-radius:50%;

    background:#ff3d3d;

    color:white;

    font-size:19px;

    display:flex;
    align-items:center;
    justify-content:center;
}

.alert-body h4{
    font-size:1.1rem;
    color:#1f2840;
    margin-bottom:10px;
}

.alert-body p{
    color:#556070;
    line-height:1.6;
}

.alert-footer{
    margin-top:18px;

    background:white;

    border-radius:14px;

    padding:14px;

    color:#ff4040;

    font-weight:700;
}

/* RIGHT GRID */

.pathway-threat-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    transform: translateY(-150px);
    gap:20px;

    width:100%;
    max-width:420px;

    margin:0 auto;
}

.pathway-threat-card{
    

    border-radius:20px;
    background:#03256b;

    min-height:120px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    gap:12px;

    color:white;

    transition:.3s ease;
}

.pathway-threat-card i{
    width:42px;
    height:42px;

    stroke-width:1.8;
}
.results-center img{
    width:50px;
    height:50px;
    object-fit:contain;
}

.pathway-threat-card:hover{
    transform:translateY(-8px);
}@media (max-width:1100px){

    .pathway-threats-container{
        grid-template-columns:1fr;
        text-align:center;
    }

    .pathway-threats-content{
        max-width:700px;
        margin:auto;
    }

    .pathway-threat-grid{
        max-width:700px;
        margin:auto;
    }

    .pathway-alert-card{
        width:320px;
    }
}

@media (max-width:768px){

    .pathway-threats{
        padding:80px 24px;
    }

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

    .pathway-wordmark-bg{
        font-size:3rem;
    }

    .pathway-threats-phone img{
        width:220px;
    }
}
/* ===================================
   PLATFORM SECTION
=================================== */

.platform-section{
    position:relative;

    padding:120px 60px;

    background:#f7f8fa;
    overflow:hidden;
}

/* ==========================
   PARTICLES BG
========================== */

.platform-particles{
    position:absolute;
    inset:0;

    background-image:
        radial-gradient(#2f62ff33 1px, transparent 1px);

    background-size:12px 12px;

    mask-image:
        radial-gradient(circle at center,
        black 30%,
        transparent 90%);

    opacity:.55;

    animation:
        particlesMove 25s linear infinite;
}

@keyframes particlesMove{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-120px);
    }

}

/* ==========================
   CONTAINER
========================== */

.platform-container{
    position:relative;
    z-index:2;

    max-width:1400px;
    margin:auto;

    display:grid;
    grid-template-columns:
        350px
        1fr;

    gap:80px;
    align-items:center;
}

/* ==========================
   CONTENT
========================== */

.platform-tag{
    color:#2458ff;
    font-size:13px;
    font-weight:700;
}

.platform-content h2{
    margin-top:15px;

    font-size: clamp(2.6rem, 4.5vw, 1.9rem);
    line-height:1.05;

    color:#071426;
}

.platform-content p{
    margin-top:20px;

    color:#5d6977;
    font-size:1.1rem;
}

/* ==========================
   DIAGRAM
========================== */

.platform-diagram{
    position:relative;

    display:grid;
    grid-template-columns:
        220px
        300px
        220px;

    justify-content:center;
    align-items:center;

    gap:70px;
}

/* ==========================
   SIDES
========================== */

.platform-side{
    display:flex;
    flex-direction:column;
    gap:25px;
}

/* ==========================
   CARDS
========================== */

.platform-card{
    height:90px;

    background:white;

    border-radius:18px;

    display:flex;
    align-items:center;
    gap:14px;

    padding:0 24px;

    box-shadow:
        0 10px 35px rgba(0,0,0,.06);

    transition:.3s;
}

.platform-card:hover{
    transform:translateY(-4px);
}

.platform-card svg{
    width:28px;
    height:28px;

    stroke:#2458ff;
}

.platform-card span{
    font-weight:600;
    color:#13283d;
}

/* ==========================
   SHIELD
========================== */

.platform-core{
    position:relative;

    display:flex;
    justify-content:center;
    align-items:center;
}

.shield-glow{
    position:absolute;

    width:220px;
    height:220px;

    background:
        radial-gradient(
            circle,
            rgba(36,88,255,.18),
            transparent 70%
        );

    animation:pulseGlow 4s infinite;
}

@keyframes pulseGlow{

    0%,100%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.15);
    }

}

.shield-shape{

    width:240px;
    height:280px;

    background:
        linear-gradient(
            180deg,
            #0b2d8c,
            #041a55
        );

    clip-path:
        polygon(
            50% 0%,
            100% 20%,
            100% 70%,
            50% 100%,
            0% 70%,
            0% 20%
        );

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    color:white;

    box-shadow:
        0 20px 50px rgba(0,0,0,.18);

    position:relative;
    overflow:hidden;
}

/* brillo barrido */

.shield-shape::before{

    content:"";

    position:absolute;

    width:60px;
    height:180%;

    background:
        linear-gradient(
            transparent,
            rgba(255,255,255,.4),
            transparent
        );

    transform:rotate(20deg);

    left:-120px;

    animation:shieldSweep 5s infinite;
}

@keyframes shieldSweep{

    0%{
        left:-120px;
    }

    100%{
        left:340px;
    }

}

.shield-shape svg{
    width:65px;
    height:65px;

    stroke:#3cd582;
    margin-bottom:15px;
}

.shield-shape h3{
    font-size:2rem;
}

.shield-shape span{
    font-size:1.6rem;
}



@keyframes dashMove{

    from{
        background-position:0 0;
    }

    to{
        background-position:200px 0;
    }

}

  .vs-section{
    position:relative;
    width:100%;
    min-height:100vh;
    background:#F7F9FC;
    overflow:hidden;
    display:flex;
    align-items:center;
    padding:40px 20px;
  }

  canvas#particles{
    position:absolute;
    top:0;left:0;
    width:100%;
    height:100%;
    z-index:0;
  }

  .vs-wrapper{
    position:relative;
    z-index:2;
    width:100%;
    max-width:1280px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr 1.4fr;
    gap:40px;
    align-items:center;
  }

  /* ===== LEFT COLUMN ===== */
  .vs-left{
    padding:20px 0;
  }
  .vs-eyebrow{
    font-size:13px;
    font-weight:700;
    letter-spacing:0.08em;
    color:var(--blue);
    text-transform:uppercase;
    margin-bottom:18px;
  }
  .vs-title{
    font-size:clamp(32px,4.5vw,52px);
    font-weight:800;
    line-height:1.15;
    color:var(--text);
    margin-bottom:18px;
    letter-spacing:-0.02em;
  }
  .vs-desc{
    font-size:16px;
    color:var(--text-muted);
    max-width:380px;
    line-height:1.6;
  }

  /* ===== DIAGRAM AREA ===== */
  .vs-diagram{
    position:relative;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:0;
    min-height:380px;
  }

  .vs-col{
    display:flex;
    flex-direction:column;
    gap:28px;
    z-index:3;
  }
  .vs-col.left{align-items:flex-end;}
  .vs-col.right{align-items:flex-start;}

  .vs-card{
    background:#ffffff;
    border:1px solid var(--border);
    border-radius:14px;
    padding:14px 22px;
    display:flex;
    align-items:center;
    gap:12px;
    font-size:14px;
    font-weight:600;
    color:#031e4c;
    box-shadow:0 1px 2px rgba(15,23,42,0.04);
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    cursor:default;
    white-space:nowrap;
    width:200px;
  }
  .vs-card:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 24px rgba(37,99,235,0.10);
    border-color:rgba(37,99,235,0.25);
  }
  .vs-card .icon{
    width:26px;height:26px;
    flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    color:var(--blue);
  }
  .vs-card .icon svg{width:22px;height:22px;}

  /* ===== HEXAGON CENTER ===== */
  .vs-center{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:280px;
    height:340px;
    margin:0 auto;
    z-index:2;
  }

  .vs-glow{
    position:absolute;
    width:260px;height:260px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(59,130,246,0.35) 0%, rgba(59,130,246,0) 70%);
    filter:blur(10px);
    animation:breathe 4s ease-in-out infinite;
    z-index:0;
  }
  @keyframes breathe{
    0%,100%{opacity:.45; transform:scale(1);}
    50%{opacity:.85; transform:scale(1.12);}
  }

  .vs-ring{
    position:absolute;
    border:1.5px solid rgba(59,130,246,0.35);
    border-radius:50%;
    opacity:0;
    z-index:0;
  }
  .vs-ring.r1{width:180px;height:180px;animation:ringPulse 4.5s ease-out infinite;}
  .vs-ring.r2{width:180px;height:180px;animation:ringPulse 4.5s ease-out infinite 1.5s;}
  .vs-ring.r3{width:180px;height:180px;animation:ringPulse 4.5s ease-out infinite 3s;}
  @keyframes ringPulse{
    0%{ width:170px; height:170px; opacity:0.5; }
    80%{ width:340px; height:340px; opacity:0; }
    100%{ width:340px; height:340px; opacity:0; }
  }

  .vs-hex-wrap{
    position:relative;
    width:200px;
    height:230px;
    animation:floatHex 6s ease-in-out infinite;
    z-index:2;
  }
  @keyframes floatHex{
    0%,100%{transform:translateY(0px);}
    50%{transform:translateY(-8px);}
  }

  .vs-hex{
    position:absolute;
    inset:0;
    clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background:linear-gradient(145deg,#1E293B 0%, #0F172A 60%, #1E3A8A 100%);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    box-shadow:0 20px 50px rgba(15,23,42,0.25);
    gap:14px;
    padding:20px;
  }

  .vs-shield-box{
    position:relative;
    width:64px;
    height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-radius:14px;
  }
  .vs-shield-box img{
    width:60px;
    height:60px;
    position:relative;
    z-index:1;
    filter:drop-shadow(0 0 8px rgba(59,130,246,0.6));
  }
  .vs-shine{
    position:absolute;
    top:-50%;
    left:-150%;
    width:60%;
    height:200%;
    background:linear-gradient(
      75deg,
      rgba(255,255,255,0) 30%,
      rgba(125,200,255,0.55) 50%,
      rgba(255,255,255,0) 70%
    );
    transform:rotate(0deg);
    animation:shieldSweep 3.5s ease-in-out infinite;
  }
  @keyframes shieldSweep{
    0%{left:-150%;}
    45%{left:150%;}
    100%{left:150%;}
  }

  .vs-hex-text{
    color:#fff;
    font-size:16px;
    font-weight:700;
    text-align:center;
    line-height:1.35;
    letter-spacing:0.01em;
  }

  /* ===== CONNECTIONS ===== */
  .vs-connections{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:1;
    pointer-events:none;
  }

  /* responsive */
  @media (max-width:1024px){
    .vs-wrapper{grid-template-columns:1fr; gap:50px;}
    .vs-left{text-align:center;}
    .vs-desc{margin:0 auto;}
    .vs-eyebrow{text-align:center;}
  }


  /* ==========================================
   PATHWAY SMS PROTECTION
========================================== */

.pathway-sms{

    position:relative;

    background:#f7f8fc;

    padding:90px 40px 70px;

    overflow:hidden;
}

.pathway-sms-container{

    max-width:1400px;

    margin:auto;

    position:relative;
    z-index:2;
}

/* TITLE */

.pathway-sms-header{

    text-align:center;

    margin-bottom:60px;
}

.pathway-sms-header h2{

    font-size: clamp(2.6rem, 4.5vw, 1.9rem);

    font-weight:700;

    line-height:1.05;

    color:#101827;
}

.pathway-sms-header span{

    display:block;

    color:#0d4fd7;
}

/* FLOW */

.pathway-sms-flow{

    display:flex;

    align-items:center;
    justify-content:center;

    gap:30px;

    flex-wrap:wrap;
}

/* PHONES */

.sms-phone{

    transition:
        transform .35s ease;
}

.sms-phone:hover{

    transform:
        translateY(-10px)
        scale(1.03);
}

.sms-phone img{

    width:260px;

    display:block;

    filter:
        drop-shadow(
            0 20px 35px rgba(0,0,0,.12)
        );
}

/* ARROWS */

.sms-arrow{

    font-size:4rem;

    font-weight:700;

    color:#0d62ff;

    animation:
        arrowPulse 1.5s infinite;
}

@keyframes arrowPulse{

    0%{
        transform:translateX(0);
        opacity:.6;
    }

    50%{
        transform:translateX(10px);
        opacity:1;
    }

    100%{
        transform:translateX(0);
        opacity:.6;
    }
}

/* FOOTER */

.pathway-sms-footer{

    margin-top:50px;

    text-align:center;

    color:#0d4fd7;

    font-weight:700;
}

/* PARTICLES BG */

.pathway-sms-particles{

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            rgba(30,100,255,.15) 1px,
            transparent 1px
        );

    background-size:12px 12px;

    opacity:.25;

    mask-image:
        radial-gradient(
            circle,
            black 35%,
            transparent 100%
        );

    animation:
        particlesMove 25s linear infinite;
}

@keyframes particlesMove{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-100px);
    }
}
@media(max-width:991px){

    .pathway-sms-flow{

        flex-direction:column;
    }

    .sms-arrow{

        transform:rotate(90deg);

        font-size:3rem;
    }

    .sms-phone img{

        width:220px;
    }
}
/* ==========================================
   COMPATIBLE
========================================== */

.pathway-compatible{

    background:#ffffff;

    padding:90px 70px;
}

.pathway-compatible-container{

    max-width:1400px;

    margin:auto;

    display:grid;

    grid-template-columns:
        340px
        1fr;

    gap:60px;

    align-items:center;
}

/* LEFT */

.compatible-tag{

    display:block;

    color:#0d4fd7;

    font-size:.8rem;

    font-weight:700;

    text-transform:uppercase;

    margin-bottom:18px;
}

.compatible-content h2{

    font-size: clamp(2.3rem, 4.5vw, 2rem);

    line-height:1;

    font-weight:800;

    color:#091a33;

    margin-bottom:20px;
}

.compatible-content p{

    color:#5c6678;

    line-height:1.7;

    max-width:260px;
}

/* GRID */

.compatible-grid{

    display:grid;

    grid-template-columns:
        repeat(7,1fr);

    gap:18px;
}

/* CARD */

.compatible-card{

    background:white;

    border-radius:22px;

    border:1px solid #edf0f5;

    min-height:170px;

    padding:20px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

    box-shadow:
        0 8px 24px rgba(0,0,0,.04);
}

.compatible-card:hover{

    transform:
        translateY(-8px);

    box-shadow:
        0 20px 40px rgba(0,0,0,.08);
}

/* ESPACIO PARA LOGOS */

.compatible-logo{

    width:80px;
    height:80px;

    margin-bottom:18px;

    display:flex;

    align-items:center;
    justify-content:center;
}

.compatible-logo img{

    width:100%;
    height:100%;

    object-fit:contain;
}

/* ==========================================
   RESULTS COMPARISON
========================================== */

.pathway-results{

    background:#fafbfb;

    padding:110px 70px;
}

.pathway-results-container{

    max-width:1400px;

    margin:auto;

    display:grid;

    grid-template-columns:
        360px
        1fr;

    gap:80px;

    align-items:center;
}

/* LEFT */

.results-tag{

    display:block;

    color:#3ddc84;

    font-size:.8rem;

    font-weight:700;

    text-transform:uppercase;

    margin-bottom:20px;
}

.results-content h2{

    color:#122033;

    font-size: clamp(2.6rem, 4.5vw, 1.9rem);

    line-height:1;

    font-weight:800;

    margin-bottom:20px;
}

.results-content p{

    color:#5c6678;

    line-height:1.7;
}

/* RIGHT */

.results-comparison{

    display:flex;

    align-items:center;
    justify-content:center;

    gap:40px;
}

/* CARDS */

.results-card{

    width:300px;

    border-radius:28px;

    padding:35px;

    position:relative;

    backdrop-filter:blur(8px);

    box-shadow:
        0 15px 40px rgba(0,0,0,.05);

    transition:.35s ease;
}

.results-card:hover{

    transform:
        translateY(-8px);
}

/* BEFORE */

.results-card--before{

    background:
        linear-gradient(
            180deg,
            rgba(255,90,90,.08),
            rgba(255,90,90,.04)
        );

    border:1px solid rgba(255,90,90,.15);
}

.results-card--before h3{

    color:#ff4d4d;
}

/* AFTER */

.results-card--after{

    background:
        linear-gradient(
            180deg,
            rgba(61,220,132,.08),
            rgba(61,220,132,.04)
        );

    border:1px solid rgba(61,220,132,.15);
}

.results-card--after h3{

    color:#27c46a;
}

/* LIST */

.results-card ul{

    list-style:none;

    margin-top:20px;
}

.results-card li{

    position:relative;

    padding-left:18px;

    margin-bottom:14px;

    color:#2c3545;

    font-size:.95rem;
}

.results-card li::before{

    content:"+";

    position:absolute;

    left:0;

    font-weight:700;
}

/* ICON */

.results-icon{

    margin-top:25px;

    text-align:center;
}

.results-icon i{

    width:55px;
    height:55px;

    stroke-width:1.6;
}

/* CENTER */

.results-center{

    position:relative;
}

.results-center::before{

    content:"";

    position:absolute;


    top:50%;
    left:-40px;

    width:240px;
    height:2px;

    background:
        repeating-linear-gradient(
            90deg,
            #0d62ff,
            #0d62ff 4px,
            transparent 4px,
            transparent 8px
        );
}

.results-center::after{

    content:"";
    position:absolute;

    top:50%;
    right:-240px;

    width:240px;
    height:2px;

    background:
        repeating-linear-gradient(
            90deg,
            #0d62ff,
            #0d62ff 4px,
            transparent 4px,
            transparent 8px
        );
}

/* CIRCLE */

.results-circle{

  animation:pulseShield 4s infinite;

    width:170px;
    height:170px;

    border-radius:50%;

    background:white;

    display:flex;

    flex-direction:column;

    align-items:center;
    justify-content:center;

    gap:10px;

    box-shadow:
        0 20px 50px rgba(0,0,0,.08);
}
@keyframes pulseShield{

    0%,100%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.04);
    }
}

.results-circle i{

    width:55px;
    height:55px;

    color:#0d62ff;
}

.results-circle span{

    text-align:center;

    font-weight:800;

    color:#14233f;
}
@media(max-width:991px){

    .pathway-results-container{

        grid-template-columns:1fr;

        text-align:center;
    }

    .results-comparison{

        flex-direction:column;
    }

    .results-center::before,
    .results-center::after{

        display:none;
    }
}

/* TEXTO */

.compatible-card span{

    font-weight:700;

    color:#10213e;

    line-height:1.3;
}
@media(max-width:1200px){

    .compatible-grid{

        grid-template-columns:
            repeat(4,1fr);
    }
}

@media(max-width:991px){

    .pathway-compatible-container{

        grid-template-columns:1fr;

        text-align:center;
    }

    .compatible-content p{

        margin:auto;
        max-width:500px;
    }

    .compatible-grid{

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

@media(max-width:576px){

    .compatible-grid{

        grid-template-columns:1fr;
    }
}
/* ==========================================
   PATHWAY CTA
========================================== */

.pathway-cta{

    background:#001c5c;

    padding:110px 70px;

    overflow:hidden;

    position:relative;
}

.pathway-cta-container{

    max-width:1400px;
    height:180px;

    margin:auto;

    display:grid;

    grid-template-columns:
        1fr
        500px;

    align-items:center;

    gap:80px;

    position:relative;
}

/* LEFT */

.pathway-cta-tag{

    display:block;

    color:#00b8ff;

    font-size:.85rem;

    font-weight:700;

    text-transform:uppercase;

    margin-bottom:20px;
}

.pathway-cta-content h2{

    color:white;

    font-size: clamp(2.6rem, 4.5vw, 1.9rem);

    line-height:1;

    font-weight:800;

    margin-bottom:25px;
}

.pathway-cta-content h2 span{

    color:#00b8ff;
}

.pathway-cta-content p{

    color:rgba(255,255,255,.75);

    line-height:1.7;

    max-width:500px;
}

/* FORM CARD */

.pathway-cta-form-card{

    background:white;
    transform:translateX(-190px);

    border-radius:24px;

    padding:22px;

    box-shadow:
        0 30px 80px rgba(0,0,0,.2);

    position:relative;

    z-index:2;
}

.pathway-form-grid{

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:12px;

    margin-bottom:18px;
}

.pathway-form-grid input{

    height:52px;

    border-radius:14px;

    border:1px solid #dfe4ea;

    padding:0 16px;

    font-family:inherit;

    outline:none;
}

.pathway-form-grid input:focus{

    border-color:#0054d1;
}

/* PHONE */

.pathway-cta-phone{

    position:absolute;

    right:-120px;

    top:50%;

    transform:translateY(-50%);

    z-index:3;
}

.pathway-cta-phone img{

    width:420px;

    display:block;

    filter:
        drop-shadow(
            0 30px 50px rgba(0,0,0,.35)
        );
}
@media(max-width:991px){

    .pathway-cta{

        padding:80px 25px;
    }

    .pathway-cta-container{

        grid-template-columns:1fr;

        gap:40px;
    }

    .pathway-cta-phone{

        position:relative;

        right:auto;
        top:auto;

        transform:none;

        display:flex;
        justify-content:center;
    }

    .pathway-cta-phone img{

        width:260px;
    }

    .pathway-form-grid{

        grid-template-columns:1fr;
    }
}
/* ==========================================
   BRANDING HERO
========================================== */

.branding-hero{

    background:#f6f7fa;

    padding:90px 80px;

    overflow:hidden;
    
}

.branding-container{

    max-width:1400px;
    margin:auto;

    display:grid;

    grid-template-columns:
        1.1fr
        .9fr;

    align-items:center;

    gap:100px;
}

/* VISUAL */

.branding-visual{

    position:relative;

    min-height:650px;

    display:flex;
    align-items:center;
    justify-content:center;
}

.branding-wordmark{
    font-family: 'HostGrotesk', sans-serif;

    position:absolute;

    top:-20px;
    left:50%;

    transform:translateX(-45%);


    font-size:7rem;
    font-weight:900;

    color:#1f66ff;

    line-height:1;

    z-index:0;
}



/* FLOATING CARDS */

.branding-card{

    position:absolute;


    background:white;

    border-radius:18px;

    padding:18px;

    display:flex;
    align-items:center;

    gap:14px;

    width:230px;

    box-shadow:
        0 15px 35px rgba(0,0,0,.08);

    z-index:3;

    transition:.35s ease;
}

.branding-card:hover{

    transform:translateY(-8px);
}

.branding-card-icon{
    display:flex;
    justify-content:center;
    

    color:#2563ff;

    flex-shrink:0;
}

.branding-card-icon i{
justify-content:center;
    width:100px;
    display:flex;
    height:100px;
}

.branding-card-icon svg{
    width:36px;
    display:flex;
    justify-content:center;
    height:36px;
}

.branding-card strong{

    display:block;

    color:#081b39;

    margin-bottom:6px;

    font-size:.95rem;
}

.branding-card p{

    color:#5d6677;

    font-size:.85rem;

    line-height:1.5;
}

/* POSITIONS */

.card-top-left{

    top:140px;
    left:0;
}

.card-center-right {
    top: 320px;
    right: 10px;
}


.thirdai-bg{

    width: 1700px;
    max-width: none;

    position: absolute;

    right: -210px;
    top: 50%;
    z-index:1;

    transform: translateY(-50%);
}

.thirdai-robot{

    position:absolute;

    right:150px;
    bottom:0;

    width:650px;

    z-index:5;
}


.card-bottom-left2{

   left: -101px;
    top: 470px;
    transform: rotate(4deg);
    animation-delay: 1s;
}


.rotate-card{

    transform:rotate(-8deg);
}

.rotate-card:hover{

    transform:
        rotate(-8deg)
        translateY(-8px);
}

/* CONTENT */

.branding-tag{

    display:block;

    color:#41d67d;
    

    font-weight:700;

    font-size:.85rem;

    margin-bottom:18px;
}

.branding-content h2{
    position:relative;
    z-index:2;

    font-family: 'Borscha', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.8rem);
    font-weight: 400; /* Regular */

    line-height:.95;

    color:#091b39;

    margin-bottom:24px;
}

.branding-content h2 span{
    position:relative;
    z-index:2;

    display:block;

    color:#41d67d;
}

.branding-content p{
    position:relative;
    z-index:2;


    max-width:520px;

    color:#5b6475;

    line-height:1.8;

    margin-bottom:20px;
}
@media(max-width:991px){

    .branding-container{

        grid-template-columns:1fr;
        gap:40px;
    }

    .branding-content{

        text-align:center;
    }

    .branding-phone{

        width:300px;
    }

    .branding-wordmark{

        font-size:4rem;
    }


}
/* ==========================================
   TRUST BLOCK
========================================== */

.trust-section{

    background:#0049af;
    padding:110px 80px;
}

.trust-container{

    max-width:1400px;
    margin:auto;

    display:grid;
    grid-template-columns:420px 1fr;

    gap:70px;
    align-items:center;
}

/* LEFT */

.trust-tag{

    display:block;

    color:#3cd582;

    font-size:.85rem;
    font-weight:700;

    text-transform:uppercase;

    margin-bottom:18px;
}

.trust-content h2{

    color:#ffffff;

    font-size: clamp(2.6rem, 4.5vw, 1.9rem);
    line-height:.95;

    font-weight:700;

    margin-bottom:22px;
}

.trust-content p{

    color:#ffffff;

    font-size:1rem;
    line-height:1.7;

    max-width:360px;
}

/* GRID */

.trust-grid{

    display:grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:22px;
}

/* CARD */

.trust-card{

    background:white;

    border-radius:22px;

    padding:32px 26px;

    text-align:center;

    min-height:250px;

    display:flex;
    flex-direction:column;
    align-items:center;

    box-shadow:
        0 8px 24px rgba(0,0,0,.05);

    transition:.35s ease;
}

.trust-card:hover{

    transform:translateY(-8px);

    box-shadow:
        0 18px 40px rgba(0,0,0,.08);
}

/* ICON */

.trust-icon{

    width:74px;
    height:74px;

    border-radius:50%;

    background:white;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-bottom:24px;

    box-shadow:
        0 8px 20px rgba(0,0,0,.08);
}

.trust-icon svg{
    width:48px !important;
    height:48px !important;

    stroke:#2563ff !important;
    stroke-width:2.5;
}
.trust-icon i{

    width:38px;
    height:38px;

    color:#2563ff;
}

/* TEXT */

.trust-card h3{

    color:#081b39;

    font-size:1.25rem;
    font-weight:700;

    margin-bottom:14px;
}

.trust-card p{

    color:#60697c;

    line-height:1.7;
}

/* STAT CARD */

.trust-stat{

    color:#2563ff;

    font-size:4rem;
    font-weight:900;

    line-height:1;

    margin-bottom:20px;
}

.trust-card-stat h3{

    font-size:1.2rem;
}
.trust-icon{
    transition:.35s ease;
}

.trust-card:hover .trust-icon{
    transform:scale(1.12);
}
/* ==========================================
   MOBILE
========================================== */

@media (max-width: 768px){

    .trust-section{

        padding:80px 24px;
    }

    .trust-content h2{

        font-size:2.4rem;
    }

    .trust-grid{

        grid-template-columns:1fr;
        gap:18px;
    }

    .trust-card{

        min-height:auto;
        padding:28px 22px;
    }

    .trust-icon{

        width:65px;
        height:65px;
    }

    .trust-icon i{

        width:32px;
        height:32px;
    }

    .trust-stat{

        font-size:3.5rem;
    }
}

#trust-particles{

    position:absolute;

    inset:0;

    z-index:0;
}

.trust-container{

    position:relative;
    z-index:2;
}
/* ==========================================
   CALLER ID
========================================== */

.callerid-section{

    position:relative;
    overflow:hidden;

    background:#f8faff;

    padding:120px 80px;
}

.callerid-gradient{

    position:absolute;
    inset:0;

    z-index:0;

    background:
    linear-gradient(
        -45deg,
        #3cd582,
        #eef5ff,
        #4382ff,
        #3cd582
    );

    background-size:400% 400%;

    animation:
    voisekGradient 18s ease infinite;
}

@keyframes voisekGradient{

    0%{
        background-position:0% 50%;
    }

    50%{
        background-position:100% 50%;
    }

    100%{
        background-position:0% 50%;
    }
}

.callerid-container{
    position:relative;
    z-index:2;

    max-width:1400px;
    margin:auto;

    display:grid;
    grid-template-columns:
        1fr
        500px
        1fr;

    align-items:center;
    gap:50px;
}
.callerid-tag{

    display:block;

    color:#2563ff;

    font-size:.85rem;
    font-weight:800;

    margin-bottom:18px;
}

.callerid-content h2{

    font-size: clamp(2.2rem, 4.5vw, 1.9rem);
    line-height:.95;
    font-weight:700;

    color:#071c45;

    margin-bottom:20px;
}

.callerid-content h2 span{
    color:#2563ff;
}

.callerid-content p{

    color:#556070;

    line-height:1.8;

    max-width:520px;

    margin-bottom:50px;
}
.callerid-features{

    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:30px;
}

.callerid-feature{

    text-align:center;
}

.callerid-feature i{

    width:46px;
    height:46px;

    color:#2563ff;

    margin-bottom:15px;
}

.callerid-feature svg{

    width:30px;
    height:30px;

    color:#2563ff;

    margin-bottom:15px;
}


.callerid-feature span{

    display:block;

    color:#22314f;

    font-size:.9rem;
    font-weight:600;
}
.callerid-phone-wrap{

    display:flex;
    justify-content:center;

    position:relative;
}

.callerid-phone{

    width:400px;
    display:block;
}
.callerid-points{

    display:flex;
    flex-direction:column;
    gap:40px;
}
.callerid-point{

    display:flex;
    align-items:center;
    gap:18px;

    position:relative;
}
.callerid-point .line{

    position:absolute;

    left:-140px;

    width:110px;
    height:2px;

    background:
    repeating-linear-gradient(
        90deg,
        #2563ff,
        #2563ff 8px,
        transparent 8px,
        transparent 16px
    );
}
.point-icon{

    width:58px;
    height:58px;

    border-radius:50%;

    background:white;

    display:flex;
    align-items:center;
    justify-content:center;

    box-shadow:
    0 10px 30px rgba(0,0,0,.08);

    flex-shrink:0;
}

.point-icon i{

    width:26px;
    height:26px;

    color:#0049af !important;
}

.point-icon svg{

    width:26px;
    height:26px;

    color:#0049af !important;
}
.callerid-point h4{

    color:#081b39;
    font-weight:700;

    margin-bottom:6px;
}

.callerid-point p{

    color:#6b7488;
    font-size:.95rem;
}
@media(max-width:1100px){

    .callerid-container{

        grid-template-columns:1fr;
        text-align:center;
    }

    .callerid-features{

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

    .callerid-point .line{
        display:none;
    }

    .callerid-phone{
        width:380px;
    }
}.branding-flow{

    position:relative;

    padding:110px 80px;

    background:#f9fbff;

    overflow:hidden;
}.branding-flow-grid{

    position:absolute;
    inset:0;

    opacity:.45;

    background-image:

    linear-gradient(
        rgba(37,99,255,.08) 1px,
        transparent 1px
    ),

    linear-gradient(
        90deg,
        rgba(37,99,255,.08) 1px,
        transparent 1px
    );

    background-size:40px 40px;

    z-index:0;
}.branding-flow-container{

    position:relative;
    z-index:2;

    max-width:1500px;
    margin:auto;

    text-align:center;
}.branding-flow-tag{

    display:block;

    color:#2563ff;

    font-size:.85rem;
    font-weight:800;

    margin-bottom:12px;
}

.branding-flow h2{

    font-size: clamp(2.6rem, 4.5vw, 1.9rem);

    font-weight:700;

    color:#071c45;

    margin-bottom:70px;
}.branding-steps{

    display:flex;

    align-items:center;
    justify-content:center;

    gap:25px;
}.flow-number{

    width:38px;
    height:38px;

    border-radius:50%;

    background:#2563ff;

    color:white;

    display:flex;
    align-items:center;
    justify-content:center;

    font-weight:700;

    margin:0 auto 18px;
}.flow-step h3{

    font-size:1.1rem;

    color:#081b39;

    font-weight:700;

    line-height:1.4;

    margin-bottom:25px;
}.flow-phone{

    width:220px;

    display:block;

    margin:auto;
}.flow-arrow{

    font-size:4rem;

    color:#2563ff;

    margin-top:80px;
}.branding-shield{

    position:relative;

    width:260px;
    height:260px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin:auto;
}.branding-shield img{

    width:170px;

    position:relative;

    z-index:3;
}.shield-ring{

    position:absolute;

    border-radius:50%;

    border:2px dashed
    rgba(37,99,255,.25);
}.ring-1{

    width:180px;
    height:180px;

    animation:spin 16s linear infinite;
}

.ring-2{

    width:240px;
    height:240px;

    animation:spin 20s linear infinite reverse;
}

.ring-3{

    width:300px;
    height:300px;

    animation:spin 26s linear infinite;
}@keyframes spin{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }
}@media(max-width:1200px){

    .branding-steps{

        flex-direction:column;
    }

    .flow-arrow{

        transform:rotate(90deg);

        margin:0;
    }
}
.branding-showcase{
    position:relative;

    display:flex;
    justify-content:center;
    align-items:center;

    gap:40px;

    margin-top:40px;
}


@keyframes phoneFloat{
    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-12px);
    }
}


.branding-center-shield{
    width:150px;
    height:150px;

    background:#fff;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    position:relative;
}

.branding-center-shield img{
    width:90px;
    height:auto;
}

.branding-center-shield::before{
    content:"";

    position:absolute;

    width:420px;
    height:2px;

    border-top:2px dashed rgba(255,255,255,.5);

    z-index:-1;
}
@media(max-width:1200px){

    .branding-showcase{
        flex-wrap:wrap;
    }

}

@media(max-width:768px){

    .branding-showcase{
        flex-direction:column;
        gap:30px;
    }

    .branding-phone{
        width:180px;
    }

    .branding-card{
        width:280px;
        height:auto;
    }

    .branding-center-shield::before{
        display:none;
    }

}
.branding-custom{
    position:relative;
    overflow:hidden;
    background:#0d4db8;
    padding:120px 0;
}
.branding-bg-title{
    position:absolute;
    top:40px;
    left:50%;
    transform:translateX(-50%);

    font-size:120px;
    font-weight:800;

    color:rgba(255,255,255,.9);

    pointer-events:none;
}
.branding-custom-container{
    width:min(1400px,90%);
    margin:auto;

    display:grid;
    grid-template-columns:450px 1fr;
    align-items:center;
    gap:80px;
}
.branding-showcase{
    position:relative;

    display:flex;
    justify-content:center;
    align-items:center;

    gap:50px;
}

.branding-center-shield{
    width:140px;
    height:140px;

    border-radius:50%;

    background:white;

    display:flex;
    align-items:center;
    justify-content:center;

    position:relative;
}
.branding-center-shield::before{
    content:"";

    position:absolute;

    width:340px;
    height:2px;

    border-top:2px dashed rgba(255,255,255,.5);

    z-index:-1;
}
.phone-blue{
    animation:floatBlue 6s ease-in-out infinite;
}
.phone-purple{
    animation:floatPurple 6s ease-in-out infinite;
    animation-delay:-3s;
}
@keyframes floatBlue{
    50%{
        transform:translateY(-12px);
    }
}

@keyframes floatPurple{
    50%{
        transform:translateY(-12px);
    }
}
@media(max-width:1200px){

    .branding-custom-container{
        grid-template-columns:1fr;
    }

    .branding-showcase{
        flex-wrap:wrap;
    }

}
/* ============================
   VOISHIELD BRANDING SHOWCASE
============================ */

.vs-branding-showcase{

    background:#0d4eb7;
    padding:90px 0;
    overflow:hidden;
}

.vs-branding-container{

    max-width:1400px;
    margin:auto;

    display:grid;
    grid-template-columns:420px 1fr;

    align-items:center;
    gap:40px;
}

/* LEFT */

.vs-branding-content{
    position:relative;
    z-index:5;
}

.vs-branding-tag{

    display:block;

    color:#44f09a;

    font-size:14px;
    font-weight:700;

    margin-bottom:25px;
}

.vs-branding-content h2{

    color:white;

    font-size: clamp(2.6rem, 4.5vw, 1.9rem);
    line-height:.95;

    font-weight:700;

    margin-bottom:25px;
}

.vs-branding-content p{

    color:#dfe8ff;

    font-size:1.15rem;

    max-width:340px;

    line-height:1.6;

    margin-bottom:40px;
}

.vs-branding-btn{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    width:220px;
    height:58px;

    border-radius:999px;

    background:#44f09a;

    color:#072138;

    font-weight:700;
}

/* RIGHT */

.vs-branding-scene{

    position:relative;

    height:620px;
}

/* WORD */

.vs-branding-word{

    position:absolute;

    top:-40px;
    left:50%;

    transform:translateX(-30%);
    font-family: 'HostGrotesk', sans-serif;

    font-size:7rem;
    font-weight:900;
    color:white;

    opacity:.95;
}

/* CARDS */

.vs-branding-card{

    position:absolute;

    width:220px;
    height:260px;

    background:#f4f6fb;

    border-radius:20px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding-left:45px;
}

.vs-branding-card h4{

    color:#2557ff;

    font-size:1.5rem;

    margin-bottom:25px;
}

.vs-branding-card p{

    color:#17233f;

    font-size:1.2rem;

    margin-bottom:16px;
}

.vs-card-left{

    left:35px;
    top:150px;
}

.vs-card-right{

    right:-80px;
    top:150px;
}


/* LINE */

.vs-branding-line{

    position:absolute;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    width:420px;
    border-top:3px dashed rgba(255,255,255,.8);

    z-index:1;
}

/* PHONES */

.vs-phone-left{

    position:absolute;

    width:550px;

    left:100px;
    top:-60px;

    z-index:4;
}

.vs-phone-right{

    position:absolute;

    width:550px;

    right:-30px;
    top:-45px;

    z-index:4;
}

/* ==========================================
   USE CASES
========================================== */

.branding-usecases{

    background:#f7f8fb;

    padding:90px 80px;
}

.branding-usecases-container{

    max-width:1400px;

    margin:auto;

    display:grid;

    grid-template-columns:
        420px
        1fr;

    gap:70px;

    align-items:start;
}

/* LEFT */

.branding-usecases-tag{

    display:block;

    color:#3fdc86;

    font-size:.9rem;
    font-weight:700;

    text-transform:uppercase;

    margin-bottom:20px;
}

.branding-usecases-content h2{

    color:#081b39;

    font-size: clamp(2.6rem, 4.5vw, 1.9rem);

    line-height:.95;

    font-weight:800;

    max-width:420px;
}

/* RIGHT */

.branding-usecases-grid{

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:22px;
}

.branding-usecase-card{

    background:white;

    border-radius:18px;

    padding:28px;

    min-height:155px;

    box-shadow:
        0 8px 25px rgba(0,0,0,.04);

    transition:.3s ease;
}

.branding-usecase-card:hover{

    transform:translateY(-6px);

    box-shadow:
        0 15px 35px rgba(0,0,0,.08);
}

.branding-usecase-icon{

    width:52px;
    height:52px;

    border-radius:50%;

    background:#f4f8ff;

    color:#2563ff;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-bottom:18px;
}

.branding-usecase-icon svg{

    width:28px;
    height:28px;

    stroke-width:1.8;
}

.branding-usecase-card h3{

    color:#132345;

    font-size:1.05rem;

    font-weight:700;

    margin-bottom:12px;
}

.branding-usecase-card p{

    color:#667085;

    line-height:1.7;

    font-size:.92rem;
}
/* ==========================================
   BRANDING PLATFORMS
========================================== */

.branding-platforms{

    background:#43d884;

    padding:90px 40px;

    overflow:hidden;
}

.branding-platforms-container{

    max-width:1200px;

    margin:auto;

    text-align:center;
}

/* TAG */

.branding-platforms-tag{

    display:block;

    color:white;

    font-size:.9rem;
    font-weight:700;

    text-transform:uppercase;

    margin-bottom:12px;
}

/* TITLE */

.branding-platforms h2{

    color:white;

    font-size: clamp(2.6rem, 4.5vw, 1.9rem);

    line-height:.95;

    font-weight:700;

    margin-bottom:55px;
}

.branding-platforms h2 span{

    display:block;

    color:#041d4f;
}

/* GRID */

.branding-platforms-grid{

    display:flex;

    justify-content:center;

    gap:28px;

    flex-wrap:wrap;
}

/* CARD */

.branding-platform-card{

    width:120px;

    background:white;

    border-radius:22px;

    padding:20px 16px;

    min-height:120px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    transition:.3s ease;

    box-shadow:
        0 10px 25px rgba(0,0,0,.08);
}

.branding-platform-card:hover{

    transform:translateY(-8px);
}

/* LOGO SPACE */

.branding-platform-logo{

    width:90px;
    height:90px;

    display:flex;

    align-items:center;
    justify-content:center;

    margin-bottom:18px;
}

/* TUS PNG */

.branding-platform-logo img{

    max-width:100%;
    max-height:100%;

    object-fit:contain;
}

/* TEXT */

.branding-platform-card h3{

    color:#162548;

    font-size:1rem;

    font-weight:700;

    line-height:1.3;
}
@media(max-width:768px){

    .branding-platforms{

        padding:70px 20px;
    }

    .branding-platforms-grid{

        gap:18px;
    }

    .branding-platform-card{

        width:120px;
        min-height:140px;
    }

    .branding-platform-logo{

        width:60px;
        height:60px;
    }
}

@media(max-width:576px){

    .branding-platforms h2{

        font-size:2.3rem;
    }

    .branding-platform-card{

        width:110px;
    }
}
/* ==========================================
   BRANDING CTA
========================================== */

.branding-cta{

    background:#00184f;

    overflow:hidden;

    position:relative;

    padding:120px 60px;
}

.branding-cta-container{

    height:250px;

    max-width:1400px;

    margin:auto;

    display:grid;

    grid-template-columns:
        1fr
        420px
        420px;

    align-items:center;

    gap:40px;
}

/* LEFT */

.branding-cta-content{

    max-width:450px;
}

.branding-cta-tag{

    display:block;

    color:#42df87;

    font-size:.9rem;

    font-weight:700;

    text-transform:uppercase;

    margin-bottom:18px;
}

.branding-cta-content h2{

    color:white;

    font-size: clamp(2.6rem, 4.5vw, 1.9rem);

    line-height:.95;

    font-weight:700;

    margin-bottom:24px;
}

.branding-cta-content p{

    color:rgba(255,255,255,.8);

    font-size:1.05rem;

    line-height:1.7;
}

/* FORM */

.branding-cta-form-card{

    background:white;

    border-radius:18px;

    padding:22px;

    width:100%;
}

.branding-form-grid{
    

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:12px;

    margin-bottom:14px;
}

.branding-form-grid input{

    width:100%;

    height:42px;

    border:none;

    outline:none;

    border-radius:10px;

    background:#f3f5f9;

    padding:0 14px;

    font-size:.9rem;
}

.branding-cta-btn{

    width:100%;

    height:48px;

    border:none;

    border-radius:10px;

    cursor:pointer;

    background:#1453d4;

    color:white;

    font-weight:700;

    transition:.3s ease;
}

.branding-cta-btn:hover{

    transform:translateY(-2px);
}

/* PHONE */

.branding-cta-phone{

    position:relative;

    display:flex;

    justify-content:flex-end;
}

.branding-cta-phone img{

    width:900px;

    position:relative;

    z-index:2;
}

/* GLOW */

.branding-phone-glow{

    position:absolute;

    top:50%;

    left:50%;

    width:700px;

    height:700px;

    transform:
        translate(-40%,-50%);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(37,99,255,.55) 0%,
            rgba(37,99,255,.20) 35%,
            transparent 70%
        );

    filter:blur(40px);

    z-index:1;
}
@media(max-width:1100px){

    .branding-cta-container{

        grid-template-columns:1fr;

        text-align:center;
    }

    .branding-cta-content{

        max-width:100%;
    }

    .branding-cta-phone{

        justify-content:center;
    }

    .branding-cta-phone img{

        width:340px;
    }
}

@media(max-width:768px){

    .branding-cta{

        padding:80px 20px;
    }

    .branding-cta-content h2{

        font-size:2.5rem;
    }

    .branding-form-grid{

        grid-template-columns:1fr;
    }
}
/* ===================================
   CONTACT SECTION
=================================== */

.contact-section{

    padding:120px 0;

    background:#f7f9fc;

    position:relative;
}

.contact-container{

    width:min(1200px,92%);

    margin:auto;

    display:grid;

    grid-template-columns:
        1fr
        560px;

    gap:80px;

    align-items:center;
}

/* LEFT */

.contact-tag{

    display:inline-block;

    margin-bottom:18px;

    font-size:.85rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

    color:#36d37e;
}

.contact-content h2{

    font-size: clamp(2.3rem, 4.5vw, 1.3rem);

    line-height:.95;

    font-weight:700;

    color:#081b39;

    margin-bottom:24px;
}

.contact-content p{

    max-width:600px;

    font-size:1.05rem;

    line-height:1.8;

    color:#5f6c86;

    margin-bottom:40px;
}

/* INFO CARDS */

.contact-info-grid{

    display:grid;

    gap:16px;
}

.contact-info-card{

    display:flex;

    align-items:center;

    gap:18px;

    padding:20px;

    background:#fff;

    border-radius:18px;

    box-shadow:
        0 10px 30px rgba(0,0,0,.05);
}

.contact-icon{

    width:56px;
    height:56px;

    border-radius:14px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#eef4ff;

    color:#2563ff;
}

.contact-icon svg{

    width:24px;
    height:24px;
}

.contact-info-card strong{

    display:block;

    margin-bottom:4px;

    color:#081b39;
}

.contact-info-card span{

    color:#6b7892;
}

/* FORM */

.contact-form-card{

    background:#fff;

    border-radius:28px;

    padding:36px;

    box-shadow:
        0 20px 60px rgba(0,0,0,.08);
}

.contact-form-grid{

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:14px;

    margin-bottom:14px;
}

.contact-form input,
.contact-form textarea{

    width:100%;

    border:none;

    outline:none;

    padding:16px 18px;

    background:#f5f7fb;

    border-radius:14px;

    font-size:.95rem;

    color:#081b39;
}

.contact-form textarea{

    min-height:150px;

    resize:none;

    margin-bottom:20px;
}

.contact-form input:focus,
.contact-form textarea:focus{

    box-shadow:
        inset 0 0 0 2px #2563ff20;
}

/* RESPONSIVE */

@media(max-width:991px){

    .contact-container{

        grid-template-columns:1fr;

        gap:50px;
    }

    .contact-content{

        text-align:center;
    }

    .contact-content p{

        margin-left:auto;
        margin-right:auto;
    }
}

@media(max-width:576px){

    .contact-form-grid{

        grid-template-columns:1fr;
    }

    .contact-section{

        padding:80px 0;
    }

    .contact-content h2{

        font-size:2.4rem;
    }
}

.contact-hero{

    position:relative;
    overflow:hidden;
    background:#f8f9fc;

    min-height:700px;

    display:flex;
    align-items:center;
}





.container{

    width:min(1300px,90%);
    margin:auto;
    position:relative;
    z-index:2;
}

.hero-content{

    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:40px;
}

.hero-text h2{

    font-size: clamp(2.2rem, 4.5vw, 1.9rem);
    line-height:1.16;
    color:#081128;
    max-width:650px;
}

.gradient-text{

    display:block;

    background:linear-gradient(
        90deg,
        #0075FF,
        #3D8DFF,
        #6FD3FF
    );

    background-size:300% 300%;

    background-clip:text;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    animation:gradientMove 6s ease infinite;
}

.hero-text p{

    margin-top:25px;

    max-width:520px;
    transform: translateY(5px);

    color:#000000;

    font-size:1rem;
    line-height:1.7;
}


.hero-image{

    display:flex;
    justify-content:center;
}

.hero-image img{

    max-width:650px;
    width:100%;

    position:relative;
    transform: translateY(60px);
    z-index:3;
}





.waves path{

    fill:none;

    stroke:url(#waveGradient);

    stroke-width:1.5;
    opacity:.9;


    animation:waveFloat 8s ease-in-out infinite;
}

.waves path:nth-child(2){

    animation-delay:7s;
}

.waves path:nth-child(3){

    animation-delay:-2s;
}

.waves path:nth-child(4){

    animation-delay:-3s;
}

.waves path:nth-child(5){

    animation-delay:-4s;
}

@keyframes gradientMove{

    0%{
        background-position:0% 50%;
    }

    50%{
        background-position:100% 50%;
    }

    100%{
        background-position:0% 50%;
    }
}

@keyframes waveFloat{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-15px);
    }

    100%{
        transform:translateY(0);
    }
}


@media(max-width:992px){

    .hero-content{

        grid-template-columns:1fr;
        text-align:center;
    }

    .hero-text h2{

        font-size:3rem;
        margin:auto;
    }

    .hero-text p{

        margin-inline:auto;
    }

    .hero-image{

        margin-top:40px;
    }
}

@media(max-width:768px){

    .hero-text h2{

        font-size:2rem;
    }

    .contact-hero{
        position:relative;

        min-height:auto;
        padding:100px 0;
    }
}
/* ==========================================
   THIRD AI HERO
========================================== */

.thirdai-hero{

    position:relative;

    overflow:hidden;

    background:#02030b;

    padding:80px 0;
}

.thirdai-container{

    width:min(1350px,92%);

    margin:auto;

    display:grid;

    grid-template-columns:
        500px
        1fr;

    gap:60px;

    align-items:center;
}

/* LEFT */

.thirdai-tag{

    display:inline-block;

    margin-bottom:18px;

    font-size:.85rem;

    font-weight:700;

    letter-spacing:.08em;

    color:#9f42ff;
    position:relative;
    z-index: 20;
}

.thirdai-content h1{

    color:#fff;

    font-size: clamp(2.6rem, 4.5vw, 2.8rem);
    font-family: 'Borscha', sans-serif;

    line-height:.95;

    margin-bottom:25px;

    font-weight:400;
    position:relative;
    z-index:20;
}

.thirdai-content h1 span{

    display:block;
    position:relative;
    z-index:20;

    color:#8a2eff;
}

.thirdai-content p{

    max-width:480px;
    position:relative;
    z-index:20;

    color:#b9bfd0;

    line-height:1.8;

    margin-bottom:35px;
}

/* BUTTON */

.thirdai-btn{

    display:inline-flex;
    z-index:20;
    position:relative;

    align-items:center;

    justify-content:center;

    padding:18px 34px;

    border-radius:999px;

    text-decoration:none;

    background:
        linear-gradient(
            135deg,
            #a339ff,
            #7a00ff
        );

    color:#fff;

    font-weight:700;
}

.thirdai-btn span{

    display:flex;

    align-items:center;

    gap:10px;
}

/* RIGHT */

.thirdai-scene{

    position:relative;
    

    height:700px;
}

/* WORD */

.thirdai-word{

    position:absolute;
    font-family: 'HostGrotesk', sans-serif;

    top:-20px;

    left:180px;

    font-size:7rem;

    font-weight:900;

    color:rgba(255,255,255,.9);

    pointer-events:none;
    z-index:1;
}

/* GLOW */

.thirdai-glow{

    position:absolute;

    left:240px;
    top:160px;

    width:420px;
    height:420px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(135,0,255,.95),
            transparent 70%
        );

    filter:blur(40px);
}

.image-modal{

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.92);

    z-index:9999;

    justify-content:center;
    align-items:center;

    padding:20px;
}

.image-modal.active{
    display:flex;
}

.image-modal__img{

    max-width:95%;
    max-height:85vh;
    animation:zoomIn .25s ease;

    border-radius:18px;
}

.image-modal__close{

    position:absolute;

    top:25px;
    right:25px;

    color:white;

    font-size:40px;

    cursor:pointer;
}

/* ROBOT */

.thirdai-robot{

    position:absolute;
    top:180px;



    bottom:0;

    transform:scale(1.3);

    z-index:7;
}

/* CARDS */

.thirdai-card{

    position:absolute;

    display:flex;

    align-items:center;

    gap:15px;

    padding:18px 22px;

    background:#fff;

    border-radius:20px;

    width:260px;

    box-shadow:
        0 20px 50px rgba(0,0,0,.25);

    z-index:6;

    animation:
        thirdFloat 5s ease-in-out infinite;
}

.thirdai-card p{

    width:100%;

    margin:0;

    color:#151515;

    font-weight:600;

    line-height:1.1;
}

.thirdai-card-icon{

    color:#8a2eff;
}

.thirdai-card-icon svg{

    width:28px;
    height:28px;
}

/* POSITIONS */

.card-top-left {
    left: 1px;
    top: 200px;
    transform: rotate(-5deg);
}
.card-bottom-left{

    left:10px;
    top:470px;

    transform:rotate(4deg);

    animation-delay:1s;
}

.card-right{

    right:-30px;
    top:370px;

    transform:rotate(8deg);

    animation-delay:2s;
}

/* FLOAT */

@keyframes thirdFloat{

    0%,100%{

        translate:0 0;
    }

    50%{

        translate:0 -12px;
    }
}
.thirdai-purple-section{
    min-height: 300px; /* cámbialo a lo que necesites */
    
    background:
        radial-gradient(
            circle at center,
            rgba(140, 0, 255, 0.45) 0%,
            rgba(80, 0, 180, 0.25) 35%,
            rgba(20, 0, 50, 1) 100%
        );

    position: relative;
    overflow: hidden;
}

/* Deleted and adjust Items in mobile */

@media (max-width: 768px) {
    /* Index */
    .hero__card  {
        display: none;
    }

     .hero__dashboard-image {
        display: none;
    }
    .hero__content{

        display:flex;
        flex-direction:column;

        justify-content:center;
        
    }
    .phone-wrapper,
.hero__visual,
.hero__dashboard-wrapper{
    display:none !important;
}

 .hero{
        padding-bottom:0;
    }



    .hero__container{

        min-height:auto;
        padding-top: 0px;
    }

        .partners__container{
        padding: 10px;
        border-radius: 0;
    }

    .phone-wrapper{
        display: none;
    }
    .orbita{
        display: none;
    }
    .quote-card{
        display: none;
    }
    .fraude-content{
        width:100%;
        max-width:100%;
        padding:20px;
        margin:0 auto;
    }
        .fraude-section{
        display:block;
        min-height:auto;
        padding:40px 0;
    }

.beneficios{
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
}
.beneficio{
    background:#ffff;
    border-radius:16px;
    padding:16px;

    display:flex;
    gap:14px;
    align-items:flex-start;
}

    #bg-canvas{
        opacity: 55%;
    }
    .solutions__grid{
        display:flex;
        gap:16px;

        overflow-x:auto;
        overflow-y:hidden;

        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;

        padding-bottom:10px;
    }

    .solutions__grid::-webkit-scrollbar{
        display:none;
    }

    .solution-card{
        flex:0 0 85%;
        scroll-snap-align:center;
    }
     .solutions__features{
        display:grid;
        grid-template-columns:1fr;
        gap:12px;
    }
    .swipe-hint{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:8px;

        margin-top:18px;

        color:#3cd582;
        font-size:.85rem;
        font-weight:600;

        animation: swipePulse 1.5s infinite;
    }

    .swipe-hint svg{
        width:18px;
        height:18px;
    }

}

@keyframes swipePulse{

    0%{
        transform:translateX(0);
        opacity:.5;
    }

    50%{
        transform:translateX(10px);
        opacity:1;
    }

    100%{
        transform:translateX(0);
        opacity:.5;
    }
    }


/* Seccion Nosotros */
@media (max-width: 768px) {
    .associations-section{
    display:none;
    }

    .partners-grid{

        display:grid;
        grid-template-columns:repeat(2,1fr);

        gap:16px;
    }

    .partner-card{

        width:100%;
        min-width:0;

        padding:24px 16px;
    }

    .partner-card h3{
        font-size:1.1rem;
    }

    .partner-card p{
        font-size:.85rem;
        line-height:1.5;
    }

    .partners-section{
        padding:80px 24px;
    }
    

    .team-grid{
        grid-template-columns:repeat(2,1fr);
        gap:16px;
    }

    .team-card{
        height:160px;
        border-radius:16px;
    }

    .team-card img{
        object-fit:cover;
    }

    .team-section__description{

        margin-top:20px;

        padding:18px;

        background:#fff;

        border-radius:12px;

        text-align:center;
    }



    .team-section__header{
        margin-top:40px;
    }

    .team-section__title{
        font-size:1.8rem;
        line-height:1.1;
    }

    .certification-section{
        padding:0 24px 80px;
    }

    .certification-card{

        grid-template-columns:1fr;

        text-align:center;

        padding:40px 24px;

        gap:28px;

        justify-items:center;
    }

    .certification-left{

        display:flex;
        flex-direction:column;
        align-items:center;
    }

    .certification-left h2{

        font-size:2rem;

        line-height:1.1;

        max-width:280px;

        margin:0 auto;
    }

    .certification-center{

        width:100%;

        justify-content:center;
    }

    .certification-badge{

        width:170px;
    }

    .certification-right{

        max-width:100%;

        text-align:center;
    }

    .certification-right p{

        font-size:.95rem;

        line-height:1.7;
    }
        .numbers-grid{

        display:flex;
        flex-direction:column;
        align-items:center;

        gap:24px;
    }

    .number-card{

        width:100%;
        max-width:280px;
    }
        .numbers-section .about-container{

        display:flex;
        flex-direction:column;
        align-items:center;
    }
        .about-cta{

        padding:80px 24px;
    }

    .about-cta__container{

        grid-template-columns:1fr;

        gap:40px;

        text-align:center;
    }

    .about-cta__content p{

        max-width:none;

        margin:0 auto;
    }

    .about-cta__form{

        width:100%;

        max-width:500px;

        margin:0 auto;
    }

    .about-cta__grid{

        grid-template-columns:1fr;
    }
     .about-cta__content h2{

        font-size:2rem;
    }

    .about-cta__content p{

        font-size:1rem;
    }

    .about-cta__form{

        padding:20px;
        border-radius:20px;
    }

    .about-cta__grid input{

        height:56px;
    }

    .presence-title{
        font-size:2rem;
    }
     .team-card{

        cursor:pointer;
    }

    .team-card::after{

        content:"🔍";

        position:absolute;

        top:10px;
        right:10px;

        background:rgba(0,0,0,.5);

        width:32px;
        height:32px;

        border-radius:50%;

        display:flex;
        align-items:center;
        justify-content:center;
    }
        from{
        transform:scale(.85);
        opacity:0;
    }

    to{
        transform:scale(1);
        opacity:1;
    }

.about-hero__image{
    display:none;
    }

    .about-hero__content{
    margin:0 auto;
    text-align:center;
}


    .about-hero{
        padding:100px 24px 60px;
    }

    .about-hero__container{
        grid-template-columns:1fr;
        gap:40px;

        justify-items:center;
        text-align:center;
    }

    .about-hero__content{
        width:100%;
        max-width:400px;
        margin:0 auto;
    }

    .about-hero__visual{
        justify-content:center;
    }



/* Services mobile adjustments */
   .demo-section{
        grid-template-columns:1fr;
        gap:40px;
        padding:80px 24px;
    }

    .demo-left{
        text-align:center;
    }

    .demo-left p{
        max-width:none;
    }

    /* PASOS */

    .demo-steps{
        flex-direction:column;
        gap:20px;
        margin-top:40px;
        align-items:center;
    }

    .step{
        min-width:auto;
    }

    .step-line{
        width:2px;
        height:40px;
    }

    .step-line::before{
        border-top:none;
        border-left:2px dashed #3cd582;
        height:100%;
        left:50%;
        transform:translateX(-50%);
    }

    .step-line span{
        left:50%;
        top:0;
        transform:translateX(-50%);
        animation:travelDotVertical 2.2s linear infinite;
    }

    /* FORMULARIO */

    .demo-form{
        padding:24px;
        border-radius:20px;
    }

    .grid{
        grid-template-columns:1fr;
    }
    @keyframes travelDotVertical{

    0%{
        top:0;
        opacity:0;
    }

    10%{
        opacity:1;
    }

    90%{
        opacity:1;
    }

    100%{
        top:100%;
        opacity:0;
    }
}

/* Services block adjustments for mobile view, including layout changes and animations for better user experience on smaller screens. */

.service-ring, .service-phone{
    display:none;
    }
.service-block__content{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.service-block__content p{
    max-width:520px;
    margin:0 auto;
}
.service-block{
    display:flex;
    flex-direction:column;
    align-items:center;
}
.pathway-visual, .service-features, .thirdai-network, .branding-visual, .service-block__visual, .voishield-visual, .services-hero__image, .voisek-rings{
    display:none;
    }

    .service-block h2{
    font-size: clamp(2rem, 4vw, 2rem);
 }
.services-hero{
    height:660px;
}
.service-block--branding{
height:auto;
 }

 /* Voshield page adjustments for mobile view */

 .fraud-problem__container{
        display:flex;
        flex-direction:column;
        padding:0 24px;
        gap:40px;
    }


    .fraud-problem__text{
        max-width:none;
    }

    .fraud-problem__cards{

        display:flex;

        overflow-x:auto;
        overflow-y:hidden;

        gap:16px;

        width:100%;

        scroll-snap-type:x mandatory;

        padding-bottom:10px;
    }

    .fraud-card{

        min-width:260px;
        max-width:260px;

        flex-shrink:0;

        scroll-snap-align:start;
    }

    .voishield-content h1{
    font-size: clamp(1rem);
    }
    .voishield-container{
        grid-template-columns:1fr;
        padding:0 24px;
    }

    .voishield-content{
        width:100%;
        max-width:500px;

        margin:0 auto;

        text-align:center;
    }

    .voishield-content *{
        text-align:center;
    }
        .voishield-actions{
        display:flex;
        justify-content:center;
    }

/* Section */

.voishield-process{
        padding:80px 0;
    }

    .voishield-process__container{

        grid-template-columns:1fr;

        gap:50px;

        padding:0 24px;

        text-align:center;
    }

    .voishield-process__content{
        max-width:500px;
        margin:0 auto;
    }

    .voishield-process__content h2{
        font-size:2.4rem;
    }

    .voishield-process__steps{

        flex-direction:column;

        gap:30px;

        width:100%;
    }

    .process-step{

        width:100%;
        max-width:360px;

        margin:0 auto;
    }

    .process-step img{

        max-width:260px;

        margin:0 auto 20px;
    }

    .process-arrow{

        transform:rotate(90deg);

        margin:0;

        font-size:2.2rem;
    }
    .vs-industries-content h2{
    font-size:2.2rem;

    }
    

    .voishield-dashboard__container{

        grid-template-columns:1fr;

        padding:0 24px;

        text-align:center;
    }

    .dashboard-content{

        display:flex;
        flex-direction:column;
        align-items:center;
    }

    .dashboard-content p{

        max-width:100%;
        margin-left:auto;
        margin-right:auto;
    }

    .dashboard-features{

        width:100%;

        grid-template-columns:1fr 1fr;

        text-align:left;
    }


    .dashboard-visual{

        display:none;
    }
    .dashboard-content h2{
    font-size:2rem;
    }
    .flow-content{

        width:100%;
        max-width:100%;

        display:flex;
        flex-direction:column;
        align-items:center;

        text-align:center;

        margin:0 auto;
    }

    .flow-content h2{
        text-align:center;
    }

    .flow-content p{
        text-align:center;
        margin-left:auto;
        margin-right:auto;
    }
    


    /* Pathway page adjustments for mobile view, including layout changes and 
    hiding non-essential visual elements for better performance and user 
    experience on smaller screens. */

.pathway-container{

        grid-template-columns:1fr;

        justify-items:center;

        text-align:center;

        padding:60px 24px;
    }

    .pathway-content{

        width:100%;
        max-width:420px;

        margin:0 auto;

        display:flex;
        flex-direction:column;
        align-items:center;
    }
     .pathway-problem{

        height:auto;

        padding:80px 24px;
    }

    .pathway-problem-container{

        grid-template-columns:1fr;

        gap:50px;

        text-align:center;
    }

    .problem-flow{

        flex-direction:column;

        gap:32px;
    }

    .problem-step{

        width:100%;
        max-width:320px;

        text-align:center;
    }

    .problem-badge{

        margin:0 auto 14px;
    }

    .problem-phone{

        top:0;
    }

    .problem-phone img{

        width:220px;

        margin:auto;
    }
    .pathway-threats-phone img,
    .pathway-wordmark-bg, .pathway-threats-phone, .pathway-alert-card, .platform-section{

        display:none;
    }
     .pathway-threats{

        padding:90px 24px;
    }

    .pathway-threats-container{

        height:auto;

        grid-template-columns:1fr;

        gap:50px;

        text-align:center;
    }
     .pathway-threats-content,
    .pathway-threat-grid{

        transform:none;
    }
     /* ==========================
       SECTION
    ========================== */
.pathway-sms{
        padding:80px 24px;
    }

    .pathway-sms-header{
        margin-bottom:40px;
    }

    .pathway-sms-header h2{
        text-align:center;
    }

    .pathway-sms-flow{

        flex-direction:column;

        align-items:center;
        justify-content:center;

        gap:25px;
    }

    .sms-phone{
        width:100%;
        display:flex;
        justify-content:center;
    }

    .sms-phone img{
        width:100%;
        max-width:260px;
    }

    .sms-arrow{

        font-size:2.8rem;

        transform:rotate(90deg);

        animation:none;

        line-height:1;
    }

    .pathway-sms-footer{

        margin-top:40px;

        text-align:center;
    }
    .pathway-compatible{
        padding:80px 24px;
    }

    .pathway-compatible-container{

        grid-template-columns:1fr;

        gap:40px;

        text-align:center;
    }

    /* LEFT */

    .compatible-content{

        max-width:600px;

        margin:0 auto;
    }

    .compatible-tag{
        text-align:center;
    }

    .compatible-content h2{

        font-size:2rem;

        line-height:1.05;

        max-width:320px;

        margin:0 auto 20px;
    }

    .compatible-content p{

        max-width:320px;

        margin:0 auto;

        text-align:center;
    }

    /* GRID */

    .compatible-grid{

        grid-template-columns:
            repeat(2,1fr);

        gap:16px;
    }

    .compatible-card{

        min-height:140px;

        padding:18px;
    }

    .compatible-logo{

        width:60px;
        height:60px;

        margin-bottom:12px;
    }

       .pathway-results{
        padding:80px 24px;
    }

    .pathway-results-container{

        grid-template-columns:1fr;

        gap:40px;

        text-align:center;
    }

    /* LEFT */

    .results-content{

        max-width:600px;

        margin:0 auto;
    }

    .results-content h2{

        font-size:1.9rem;

        line-height:1.05;

        margin-bottom:18px;
    }

    .results-content p{

        max-width:320px;

        margin:0 auto;
    }

    /* COMPARISON */

    .results-comparison{

        flex-direction:column;

        gap:30px;

        align-items:center;
    }

    /* CARDS */

    .results-card{

        width:100%;

        max-width:340px;

        text-align:left;

        padding:28px;
    }

    /* CENTER */

    .results-center{

        order:2;
    }

    .results-card--before{

        order:1;
    }

    .results-card--after{

        order:3;
    }

    /* QUITAR LÍNEAS */

    .results-center::before,
    .results-center::after{
        display:none;
    }

    /* CIRCLE */

    .results-circle{

        width:140px;
        height:140px;
    }

    .results-circle img{
        width:50px;
        height:50px;
    }

    .results-circle span{
        font-size:.95rem;
    }
.results-center::after{

        display:block;

        content:"↓";

        position:static;

        width:auto;
        height:auto;

        background:none;

        font-size:2rem;

        color:#0d62ff;

        margin-top:15px;
    }

      .pathway-cta{

        padding:80px 24px;
    }

    .pathway-cta-container{

        height:auto;

        grid-template-columns:1fr;

        gap:35px;

        text-align:center;
    }

    /* CONTENIDO */

    .pathway-cta-content{

        transform:none !important;
        left:auto !important;
        right:auto !important;
    }

    .pathway-cta-tag{
        text-align:center;
    }

    .pathway-cta-content h2{


         text-align:center;

        margin-left:auto;
        margin-right:auto;
    }

    .pathway-cta-content p{

         text-align:center;

        max-width:320px;

        margin-left:auto;
        margin-right:auto;
    }

    /* FORM */

    .pathway-cta-form-card{

        width:100%;

        max-width:500px;

        margin:0 auto;

        transform:none;
    }

    .pathway-form-grid{

        grid-template-columns:1fr;

        gap:12px;
    }

    .pathway-form-grid input{

        width:100%;
    }

    /* BOTÓN */

    .pathway-demo-form .hero-cta-btn{

        width:100%;
    }

    /* TELÉFONO */

    .pathway-cta-phone{

         max-width:340px;

        margin:0 auto;

        display:flex;
        flex-direction:column;
        align-items:center;
    }

    .pathway-cta-phone img{

        width:220px;
    }
    .pathway-cta-phone{
        display:none;
    }

    /* Branding page adjustments for mobile view, including layout changes, 
    hiding non-essential visual elements, and optimizing the form for better 
    user experience on smaller screens. */

      .branding-usecases{

        padding:80px 24px;
    }

    .branding-usecases-container{

        grid-template-columns:1fr;

        gap:40px;

        text-align:center;
    }

    /* LEFT */

    .branding-usecases-content{

        max-width:600px;

        margin:0 auto;
    }

    .branding-usecases-tag{
        text-align:center;
    }

    .branding-usecases-content h2{

        font-size:2rem;

        line-height:1.05;

        max-width:340px;

        margin:0 auto;
    }

    /* GRID */

    .branding-usecases-grid{

        grid-template-columns:
            repeat(2,1fr);

        gap:16px;
    }

    .branding-usecase-card{

        min-height:auto;

        padding:22px 18px;

        text-align:center;
    }

    .branding-usecase-icon{

        margin:0 auto 14px;
    }

    .branding-usecase-card h3{

        font-size:1rem;
    }

    .branding-usecase-card p{

        font-size:.85rem;

        line-height:1.5;
    }
    .trust-section{
        padding:80px 24px;
    }

    .trust-container{

        grid-template-columns:1fr;

        gap:40px;

        text-align:center;
    }

    /* LEFT */

    .trust-content{

        max-width:600px;

        margin:0 auto;
    }

    .trust-tag{
        text-align:center;
    }

    .trust-content h2{

        font-size:2rem;

        line-height:1.05;

        max-width:340px;

        margin:0 auto 20px;
    }

    .trust-content p{

        max-width:320px;

        margin:0 auto;
    }

    /* GRID */

    .trust-grid{

        grid-template-columns:
            repeat(2,1fr);

        gap:16px;
    }

    /* CARDS */

    .trust-card{

        min-height:auto;

        padding:22px 18px;

        border-radius:18px;
    }

    .trust-card h3{

        font-size:1rem;

        line-height:1.2;
    }

    .trust-card p{

        font-size:.85rem;

        line-height:1.5;
    }

    /* ICON */

    .trust-icon{

        width:58px;
        height:58px;

        margin-bottom:16px;
    }

    .trust-icon svg{

        width:34px !important;
        height:34px !important;
    }

    /* STAT */

    .trust-stat{

        font-size:2.8rem;

        margin-bottom:12px;
    }
    .vs-branding-scene{

        display:none;
    }
     .branding-usecases{

        padding:80px 24px;
    }

    .branding-usecases-container{

        grid-template-columns:1fr;

        gap:40px;

        justify-items:center;
        text-align:center;
    }

    .branding-usecases-content{

        display:flex;
        flex-direction:column;
        align-items:center;

        max-width:340px;

        margin:0 auto;
    }

    .branding-usecases-content h2{

         transform:none !important;
        left:auto !important;

        margin:0 auto !important;

        text-align:center;
        align-items:center;
    }

    .branding-usecases-tag{

        text-align:center;
    }
.vs-branding-container{

        grid-template-columns:1fr;

        gap:40px;

        justify-items:center;

        text-align:center;
    }

    .vs-branding-content{

        width:100%;

        max-width:340px;

        margin:0 auto;

        display:flex;
        flex-direction:column;
        align-items:center;

        text-align:center;
    }

    .vs-branding-tag{
        text-align:center;
    }

    .vs-branding-content h2{

        max-width:320px;

        margin:0 auto 20px;

        font-size:1.9rem;

        line-height:1.05;
    }

    .vs-branding-content p{

        max-width:300px;

        margin:0 auto 30px;
    }

    .hero-cta-btn{

        margin:0 auto;
    }
    .branding-cta-phone{
        display:none;
    }

    .branding-phone-glow{
        display:none;
    }
     .branding-cta{

        padding:80px 24px;
    }

    .branding-cta-container{

        height:auto;

        grid-template-columns:1fr;

        gap:35px;

        text-align:center;

        justify-items:center;
    }

    .branding-cta-content{

        max-width:340px;

        margin:0 auto;

        display:flex;
        flex-direction:column;
        align-items:center;
    }
    .branding-cta-content h2{

        font-size:2rem;

        line-height:1.05;

        margin-bottom:18px;

        max-width:320px;
    }

    .branding-cta-content p{

        max-width:320px;

        margin:0 auto;
    }
     .branding-cta-form-card{

        width:100%;

        max-width:360px;

        margin:0 auto;

        padding:20px;
    }

    .branding-form-grid{

        grid-template-columns:1fr;

        gap:10px;
    }

    .branding-form-grid input{

        height:50px;
    }
    .thirdai-container{

        grid-template-columns:1fr;

        gap:40px;

        text-align:center;
    }

    .thirdai-content{

        display:flex;
        flex-direction:column;
        align-items:center;

        max-width:340px;

        margin:0 auto;
    }
.thirdai-content h1{

        font-size:3rem;

        line-height:1.05;
    }

    .thirdai-content p{

        max-width:320px;

        margin:0 auto 30px;
    }
     .thirdai-word{
        display:none;
    }
    .thirdai-bg{
        display:none;
    }
     .thirdai-glow{

        width:220px;
        height:220px;

        left:50%;
        top:140px;

        transform:translateX(-50%);

        filter:blur(30px);
    }
    .thirdai-scene{

        height:auto;

        display:flex;
        flex-direction:column;
        align-items:center;
    }

    .thirdai-robot{
display:none;

    }

     .thirdai-card{

        position:relative;

        width:100%;

        max-width:320px;

        transform:none !important;

        animation:none;

        margin-bottom:12px;
    }

    .card-top-left,
    .card-bottom-left,
    .card-right{

        left:auto;
        right:auto;
        top:auto;
        bottom:auto;
    }

    .thirdai-scene{

        align-items:center;
    }
        .thirdai-card{
        display:none;
    }
    .hero-image img {
scale: 1.2;
}


 .branding-container{

        grid-template-columns:1fr;

        justify-items:center;

        gap:0;
    }
     .branding-content{

        max-width:340px;

        margin:0 auto;

        display:flex;
        flex-direction:column;
        align-items:center;

        text-align:center;
    }

    .branding-content h2{

        font-size:2rem;

        line-height:1.05;

        margin-bottom:20px;
    }

    .branding-content p{

        max-width:300px;

        margin:0 auto 25px;
    }

    .hero-cta-btn{

        margin:0 auto;
    }

    .branding-content p{

        max-width:300px;

        margin:0 auto 25px;
    }
    .branding-wordmar,.branding-visual,.k{
        display:none;
    }

}

@media (max-width: 1400px) {
    
    .voishield-visual{
        top: 65px;
    }
    .problem-content{
        transform: translateX(60px);
    }
    
body {
        zoom: 0.85;
    }
}

/* Stripe Waves config */

.voisek-hero-canvas-wrapper{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
}

.wave-bg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    overflow:hidden;

    z-index:0;

}

#voisekHeroCanvas{
    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    display:block;

}
.contact-hero .container{
    position:relative;
    z-index:2;
}
.hero-blobs{

    position:absolute;
    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:0;

}

.blob{

    position:absolute;

    border-radius:50%;

    filter:blur(180px);

    opacity:.20;

    mix-blend-mode:screen;

    will-change:transform;

}

.blob1{

    width:700px;
    height:700px;

    background:#9AC4FF;

    left:-180px;
    top:120px;

    animation: blob1 18s linear infinite;

}

.blob2{

    width:600px;
    height:600px;

    background:#000FFF;

    right:-120px;
    top:80px;

    opacity:.18;

    animation: blob2 20s linear infinite;

}

.blob3{

    width:520px;
    height:520px;

    background:#3D8DFF;

    left:45%;

    top:55%;

    opacity:.17;

    animation: blob3 8s linear infinite;

}

.blob4{

    width:800px;
    height:800px;

    background:#0075FF;

    right:-250px;

    bottom:-250px;

    opacity:.15;

    animation: blob4 6s linear infinite;

}
@keyframes blob1{

    from{

        transform:

            translate(0px,0px)

            scale(1);

    }

    to{

        transform:

            translate(120px,-40px)

            scale(1.15);

    }

}

@keyframes blob2{

    from{

        transform:

            translate(0px,0px)

            scale(1);

    }

    to{

        transform:

            translate(-140px,80px)

            scale(.9);

    }

}

@keyframes blob3{

    from{

        transform:

            translate(0px,0px)

            scale(.9);

    }

    to{

        transform:

            translate(-80px,-100px)

            scale(1.2);

    }

}

@keyframes blob4{

    from{

        transform:

            translate(0px,0px)

            scale(1);

    }

    to{

        transform:

            translate(-180px,-120px)

            scale(1.15);

    }

}