:root{
  --bg:#030508;
  --panel:#060a16;
  --panel2:#080d1f;
  --text:#F0F4FF;
  --muted:#8B9DC3;
  --stroke:rgba(255,255,255,.08);
  --stroke2:rgba(255,255,255,.12);
  --navy:#050d20;
  --turq:#00E5CC;
  --turq-dark:#00BFA8;
  --blue:#2563EB;
  --blue-dark:#1D4ED8;
  --purple:#7C3AED;
  --grad:linear-gradient(135deg,var(--turq),var(--blue));
  --grad2:linear-gradient(135deg, var(--turq), var(--blue));
  --grad3:linear-gradient(135deg, var(--turq), var(--purple));
  --shadow:0 25px 80px rgba(0,0,0,.65);
  --shadow-lg:0 40px 100px rgba(0,0,0,.5);
  --glowT: 0 0 0 1px rgba(0,229,204,.22), 0 20px 60px rgba(0,229,204,.12);
  --glowB: 0 0 0 1px rgba(37,99,235,.22), 0 20px 60px rgba(37,99,235,.12);
  --glowP: 0 0 0 1px rgba(124,58,237,.22), 0 20px 60px rgba(124,58,237,.12);
  --radius:20px;
  --radius2:28px;
  --radius-sm:14px;
  --container:1100px;
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --page-bg:
    radial-gradient(1000px 700px at 15% 8%, rgba(0,229,204,.18), transparent 55%),
    radial-gradient(1000px 700px at 85% 5%, rgba(37,99,235,.22), transparent 55%),
    radial-gradient(800px 600px at 75% 80%, rgba(0,229,204,.12), transparent 55%),
    radial-gradient(800px 600px at 5% 85%, rgba(37,99,235,.10), transparent 55%),
    radial-gradient(600px 400px at 50% 50%, rgba(124,58,237,.06), transparent 50%),
    var(--bg);
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: var(--glowT); }
  50% { box-shadow: 0 0 0 1px rgba(0,229,204,.35), 0 25px 80px rgba(0,229,204,.18); }
}

@media (min-width: 1400px){
  :root{--container:1120px}
}

*{box-sizing:border-box}
html,body{height:100%; overflow-x:hidden}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  overflow-x:hidden;
  background: var(--page-bg);
  line-height:1.6;
  font-size:15px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.03) 0px,
      rgba(255,255,255,.03) 1px,
      transparent 1px,
      transparent 100px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.025) 0px,
      rgba(255,255,255,.025) 1px,
      transparent 1px,
      transparent 100px
    );
  opacity:.35;
  mix-blend-mode: overlay;
  z-index:0;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background: radial-gradient(ellipse 120% 80% at 50% 10%, transparent 40%, rgba(0,0,0,.55) 100%);
  z-index:0;
}

header, main, footer{position:relative; z-index:1}

a{color:inherit; text-decoration:none}
a:hover{opacity:.95}

.container{max-width:var(--container); margin:0 auto; padding:0 20px}

.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:16px; top:16px; width:auto; height:auto; padding:10px 12px; border-radius:12px;
  background:rgba(255,255,255,.08); border:1px solid var(--stroke2);
  backdrop-filter: blur(10px);
  z-index:9999;
}

.header{
  position:sticky; top:0; z-index:50;
  background:rgba(3,5,8,.65);
  border-bottom:1px solid transparent;
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  overflow-x: clip;
  transition: background var(--transition-smooth), border-color var(--transition-smooth), box-shadow var(--transition-smooth);
}
.header[data-elevated="true"]{
  background:rgba(3,5,8,.82);
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow: 0 4px 30px rgba(0,0,0,.25);
}
.header__inner{display:flex; align-items:center; justify-content:flex-start; gap:18px; padding:16px 24px}

.brand{display:flex; align-items:center; gap:12px; padding-left:10px}
.brand::after{content:""; width:1px; height:26px; background:rgba(255,255,255,.10); margin-left:12px}
.brand__mark{display:grid; place-items:center; width:34px; height:34px; overflow:visible}
.brand__logo{width:34px; height:34px; display:block; object-fit:contain; transform: scale(2.2); transform-origin:right center}
.brand__legend{
  display:inline-flex;
  align-items:center;
  padding:0;
  border-radius:0;
  border:0;
  background:transparent;
  background-image: var(--grad2);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  line-height:1.2;
  font-size:14px;
  font-weight:650;
  padding-bottom:1px;
  white-space:nowrap;
}
.brand__text{display:flex; flex-direction:column; line-height:1.1}
.brand__name{font-weight:800; letter-spacing:.4px}
.brand__tag{font-size:12px; color:var(--muted)}

.nav{display:flex; align-items:center; gap:18px; margin-left: 10px}
.nav__link{font-size:14px; color:rgba(234,240,255,.88)}
.nav__link:hover{color:var(--text)}

.header__social{display:flex; align-items:center; gap:10px; margin-left:auto}
.header__social-link{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color: rgba(234,240,255,.84);
}
.header__social-link:hover{border-color: rgba(24,209,193,.40); color: var(--turq)}
.header__social-link svg{width:18px; height:18px; display:block}

.nav__dropdown{position:relative}
.nav__dropdown-toggle{list-style:none; cursor:pointer}
.nav__dropdown-toggle::-webkit-details-marker{display:none}
.nav__dropdown-menu{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  min-width:260px;
  padding:10px;
  border-radius:16px;
  border:1px solid var(--stroke);
  background:rgba(7,10,18,.92);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  display:none;
}
.nav__dropdown[open] .nav__dropdown-menu{display:grid; gap:10px}

@media (min-width: 761px){
  .nav__dropdown:hover .nav__dropdown-menu,
  .nav__dropdown:focus-within .nav__dropdown-menu{display:grid; gap:10px}
}

.nav__dropdown-menu .nav__link{
  display:block;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.nav__dropdown-menu .nav__link:hover,
.nav__dropdown-menu .nav__link:focus-visible{
  background: var(--grad2);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.98);
}

.nav-toggle{
  display:none;
  background:transparent;
  border:1px solid var(--stroke);
  border-radius:14px;
  padding:10px;
  cursor:pointer;
}
.nav-toggle__bar{display:block; width:20px; height:3px; background:rgba(234,240,255,.9); margin:5px 0; border-radius:3px}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 20px;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  background:
    linear-gradient(rgba(255,255,255,.06), rgba(255,255,255,.03)) padding-box,
    linear-gradient(135deg, rgba(0,229,204,.45), rgba(37,99,235,.45)) border-box;
  color:var(--text);
  font-weight:600;
  font-size:14px;
  gap:10px;
  cursor:pointer;
  transition: all var(--transition-fast);
  position:relative;
  overflow:hidden;
}
.btn::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.1), transparent);
  opacity:0;
  transition: opacity var(--transition-fast);
}
.btn:hover::before{opacity:1}
.btn:hover{transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,.25)}
.btn:active{transform: translateY(0); transition-duration: 50ms}
.btn--primary{
  border:0;
  background: var(--grad2);
  box-shadow: var(--glowB);
  color:#fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.btn--primary:hover{
  box-shadow: 0 0 0 1px rgba(0,229,204,.4), 0 20px 50px rgba(0,229,204,.25);
  filter: brightness(1.1);
}
.btn--ghost{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
}
.btn--ghost:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.2);
}
.btn--soft{background:rgba(255,255,255,.06)}
.btn--pill{
  padding:12px 18px;
  border-radius:var(--radius);
  border:1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) padding-box,
    linear-gradient(135deg, rgba(0,229,204,.35), rgba(37,99,235,.25)) border-box;
  color: rgba(240,244,255,.9);
  font-weight:600;
  font-size:13px;
  box-shadow:none;
}
.btn--pill:hover{
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)) padding-box,
    linear-gradient(135deg, rgba(0,229,204,.55), rgba(37,99,235,.45)) border-box;
  box-shadow: var(--glowT);
}
.btn--block{width:100%}

.hero{position:relative; padding:90px 0 50px}
.hero__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 600px at 10% 5%, rgba(0,229,204,.25), transparent 55%),
    radial-gradient(1000px 800px at 90% 20%, rgba(37,99,235,.28), transparent 55%),
    radial-gradient(600px 400px at 50% 80%, rgba(124,58,237,.12), transparent 50%);
  pointer-events:none;
  animation: fadeIn 1s ease-out;
}
.hero__grid{position:relative; display:grid; grid-template-columns: 1fr; gap:28px; align-items:start}
.hero__copy{
  max-width: 760px;
  animation: fadeInUp 0.8s ease-out;
}

.carousel--hero{position:relative}
.carousel--hero .carousel__viewport{
  border:0;
  background:transparent;
  touch-action: pan-y;
}
.carousel--hero .carousel__track{transition: transform 520ms cubic-bezier(.2,.8,.2,1)}
.carousel--hero .carousel__slide{padding:0; position:relative; overflow:hidden}
.carousel--hero .carousel__slide-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:.56;
  filter:saturate(1.02) contrast(1.08);
  transform: scale(1.02);
  z-index:0;
}
.carousel--hero .carousel__slide-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(5,7,19,.86) 0%, rgba(5,7,19,.62) 40%, rgba(5,7,19,.28) 72%, rgba(5,7,19,.10) 100%);
}
.carousel--hero .hero__grid{z-index:1}
.carousel--hero .hero__copy{padding-top: 18px}
.carousel--hero .hero__title{
  text-wrap: balance;
  max-width: 28ch;
  min-height: 2.2em;
}
.carousel--hero .hero__subtitle{
  min-height: 3.1em;
}
.carousel--hero .carousel__controls{
  position:absolute;
  left:0;
  right:0;
  bottom:14px;
  margin-top:0;
  pointer-events:none;
}
.carousel--hero .carousel__controls-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.carousel--hero .carousel__btn,
.carousel--hero .carousel__dot{pointer-events:auto}
.carousel--hero .carousel__btn{background:rgba(0,0,0,.20); backdrop-filter: blur(10px)}
.nav__social{display:none}

.footer__social{display:none}

.badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid transparent;
  background:
    linear-gradient(rgba(255,255,255,.08), rgba(255,255,255,.04)) padding-box,
    linear-gradient(135deg, rgba(0,229,204,.50), rgba(37,99,235,.40)) border-box;
  color: rgba(240,244,255,.92);
  font-size:13px;
  font-weight:500;
  letter-spacing:.02em;
  backdrop-filter: blur(10px);
  animation: fadeInUp 0.6s ease-out;
}

.hero__title{
  margin:20px 0 14px;
  font-size:52px;
  line-height:1.08;
  letter-spacing:-.04em;
  font-weight:800;
  animation: fadeInUp 0.7s ease-out 0.1s both;
}
.hero__title-accent{
  display:block;
  background: var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter: brightness(1.1);
}
.hero__subtitle{
  margin:0 0 24px;
  color:rgba(240,244,255,.78);
  font-size:17px;
  line-height:1.7;
  max-width:60ch;
  animation: fadeInUp 0.7s ease-out 0.2s both;
}

.hero__actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  animation: fadeInUp 0.7s ease-out 0.3s both;
}

.service-hero{position:relative; padding:84px 0 36px; overflow:hidden}
.service-hero__bg{
  position:absolute;
  inset:0;
  background-image: var(--service-hero-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity:.62;
  filter: saturate(1.02) contrast(1.08);
  transform: scale(1.02);
}
.service-hero__bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(5,7,19,.88) 0%, rgba(5,7,19,.62) 46%, rgba(5,7,19,.26) 76%, rgba(5,7,19,.10) 100%),
    radial-gradient(900px 520px at 18% 10%, rgba(24,209,193,.22), transparent 62%),
    radial-gradient(980px 740px at 95% 32%, rgba(30,78,216,.22), transparent 60%);
}
.service-hero__inner{position:relative}
.service-hero__kicker{display:flex; align-items:center; gap:10px; margin-bottom:14px}
.service-hero__back{font-size:13px; color:rgba(234,240,255,.82); border:1px solid rgba(255,255,255,.14); background:rgba(0,0,0,.18); padding:8px 12px; border-radius:999px; backdrop-filter: blur(10px)}
.service-hero__back:hover{box-shadow: var(--glowT)}
.service-hero__title{margin:0; font-size:42px; line-height:1.06; letter-spacing:-.03em; text-wrap: balance; max-width: 30ch}
.service-hero__lead{margin:12px 0 0; color:rgba(234,240,255,.84); font-size:16px; max-width: 62ch}
.service-hero__actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}

.brands{position:relative; overflow:hidden}
.brands__head{margin-bottom:14px}
.brands__title{margin:0 0 8px; font-size:22px; letter-spacing:-.02em}
.brands__sub{margin:0; color:rgba(234,240,255,.76)}

.brand-marquee{
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(228,232,239,.92));
  border-radius: 18px;
  overflow:hidden;
  position:relative;
}
.brand-marquee::before,
.brand-marquee::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:90px;
  pointer-events:none;
  z-index:2;
}
.brand-marquee::before{left:0; background: linear-gradient(90deg, rgba(250,251,253,1), rgba(250,251,253,0))}
.brand-marquee::after{right:0; background: linear-gradient(270deg, rgba(250,251,253,1), rgba(250,251,253,0))}

.brand-marquee__track{
  display:flex;
  align-items:center;
  gap:22px;
  width:max-content;
  padding:16px;
  animation: brand-marquee 28s linear infinite;
}
.brand-marquee:hover .brand-marquee__track{animation-play-state: paused}

.brand-logo{
  width:128px;
  height:46px;
  object-fit: contain;
  display:block;
  filter: grayscale(1) contrast(1.05);
  opacity:.92;
}
.brand-logo--tall{height:48px}
.brand-logo:hover{filter:none; opacity:1}

@keyframes brand-marquee{
  from{transform: translateX(0)}
  to{transform: translateX(-50%)}
}

.addl{margin-top:18px}
.addl__item{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:18px;
  align-items:center;
  padding:16px;
  margin-top:16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}
.addl__item--reverse{grid-template-columns: .8fr 1.2fr}
.addl__item--reverse .addl__content{order:2}
.addl__item--reverse .addl__media{order:1}

.addl__title{margin:0 0 8px; font-size:18px; letter-spacing:-.01em}
.addl__text{margin:0 0 10px; color:rgba(234,240,255,.78)}

.addl__media{width:100%}
.addl__img{
  position:relative;
  width:100%;
  aspect-ratio: 4 / 3;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(0,0,0,.18);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.addl__img::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(420px 240px at 20% 20%, rgba(24,209,193,.18), transparent 62%),
    radial-gradient(420px 240px at 80% 20%, rgba(30,78,216,.18), transparent 62%);
  pointer-events:none;
 }

.addl__img--zoom{background-size: 112% auto}

.soc-block{
  display:grid;
  grid-template-columns: .9fr 1.1fr;
  gap:18px;
  align-items:stretch;
  margin-top:16px;
}
.soc-block--threat{align-items:start}
.soc-block--threat .soc-block__media{align-self:start}
.soc-block--threat .soc-block__img{height:500px}
.soc-block__media{height:100%}
.soc-block__media-bubble{
  width:100%;
  height:100%;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.18);
  box-shadow: var(--shadow);
}
.soc-block__photo{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background-color: rgba(0,0,0,.18);
  box-shadow: var(--shadow);
}
.soc-block__media-bubble .soc-block__photo{
  border:0;
  box-shadow:none;
  background:transparent;
  border-radius:0;
}
.soc-block__img{
  width:100%;
  height:100%;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(0,0,0,.18);
  box-shadow: var(--shadow);
}
.soc-block__img--zoom{background-size: 112% auto}

body[data-page="soc"] .list li::marker{color: var(--primary)}

@media (max-width: 980px){
  .addl__item{grid-template-columns: 1fr}
  .addl__item--reverse{grid-template-columns: 1fr}
  .addl__item--reverse .addl__content{order:1}
  .addl__item--reverse .addl__media{order:2}

  .soc-block{grid-template-columns: 1fr}
  .soc-block__img{height:auto; aspect-ratio: 4 / 3}
  .soc-block__media-bubble{height:auto; aspect-ratio: 4 / 3}
  .soc-block__photo{height:100%; width:100%; aspect-ratio:auto}
  .soc-block--threat{display:flex; flex-direction:column}
  .soc-block--threat .soc-block__content{order:0}
  .soc-block--threat .soc-block__media{order:1; height:auto}
  .soc-block--threat .soc-block__img{display:block; height:auto; aspect-ratio: 4 / 3}
}

.trust{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin-top:22px}
.trust__item{border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.02); border-radius:16px; padding:12px}
.trust__kpi{font-weight:800; font-size:16px}
.trust__lbl{color:var(--muted); font-size:12px}

.panel{
  height:100%;
  border-radius:var(--radius2);
  border:1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)) padding-box,
    linear-gradient(135deg, rgba(24,209,193,.40), rgba(30,78,216,.30)) border-box;
  box-shadow: var(--shadow), var(--glowT);
  padding:18px;
}
.panel__top{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px}
.panel__title{font-weight:800; letter-spacing:.2px}
.panel__pill{font-size:12px; color:rgba(234,240,255,.86); border:1px solid var(--stroke); border-radius:999px; padding:6px 10px; background:rgba(255,255,255,.03)}
.panel__list{margin:0; padding-left:18px; color:rgba(234,240,255,.84)}
.panel__list li{margin:10px 0}
.panel__actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}

.carousel{margin-top:6px}
.carousel__viewport{
  overflow:hidden;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(380px 220px at 10% 20%, rgba(24,209,193,.14), transparent 60%),
    radial-gradient(380px 220px at 90% 10%, rgba(30,78,216,.14), transparent 60%),
    rgba(255,255,255,.02);
}
.carousel__viewport:focus{outline:none; box-shadow: 0 0 0 4px rgba(24,209,193,.12)}
.carousel__track{
  display:flex;
  width:100%;
  transform: translateX(var(--carousel-x, 0px));
  transition: transform 420ms ease;
}
.carousel__slide{
  flex: 0 0 100%;
  padding:14px 14px 12px;
}
.carousel__kicker{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:rgba(234,240,255,.68);
}
.carousel__title{
  margin-top:6px;
  font-size:18px;
  font-weight:900;
  letter-spacing:-.02em;
}
.carousel__text{
  margin-top:6px;
  color:rgba(234,240,255,.78);
  font-size:13px;
}

.carousel__controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
}
.carousel__btn{
  width:36px;
  height:36px;
  border-radius:14px;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  color: rgba(234,240,255,.92);
  font-weight:900;
  line-height:1;
}
.carousel__btn:hover{box-shadow: var(--glowT)}
.carousel__dots{display:flex; gap:8px; align-items:center; justify-content:center; flex:1}
.carousel__dot{
  width:8px;
  height:8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  cursor:pointer;
}
.carousel__dot[aria-selected="true"]{
  width:22px;
  background: var(--grad2);
  border-color: transparent;
  box-shadow: var(--glowB);
}

.section{padding:80px 0}
.section--alt{
  position:relative;
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.005));
}
.section--alt::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(160deg, rgba(0,229,204,.06), rgba(37,99,235,.05), rgba(124,58,237,.03));
  clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
}
.section--alt > .container{position:relative}
.section__head{
  max-width:900px;
  margin-bottom:40px;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}
.section__title{
  margin:0 0 16px;
  font-size:38px;
  letter-spacing:-.03em;
  font-weight:800;
  background: linear-gradient(135deg, var(--text) 0%, rgba(240,244,255,.85) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.section__lead{
  margin:0;
  color:rgba(240,244,255,.72);
  font-size:17px;
  line-height:1.7;
}

#quienes-somos .section__lead{
  text-align: justify;
  hyphens: none;
  text-justify: inter-word;
}

.grid{display:grid; gap:20px}
.grid--2{grid-template-columns:repeat(2, minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3, minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4, minmax(0,1fr))}

.card{
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(165deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%);
  border-radius: var(--radius);
  padding:24px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: all var(--transition-smooth);
  position:relative;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
}
.card:hover{
  border-color: rgba(0,229,204,.25);
  box-shadow: var(--glowT);
  transform: translateY(-4px);
}
.card__title{
  margin:0 0 10px;
  font-size:17px;
  letter-spacing:-.01em;
  font-weight:700;
}
.card__text{
  margin:0;
  color:rgba(240,244,255,.72);
  line-height:1.65;
}
.card__actions{margin-top:16px; display:flex; gap:12px; flex-wrap:wrap}

#soluciones .card__title{
  font-size:15px;
  line-height:1.15;
  text-wrap: balance;
}

#soluciones .card--span2{
  grid-column: 1 / -1;
}

#soluciones .card__text{
  text-align: justify;
  text-justify: inter-word;
  hyphens: none;
}

#soluciones .btn--pill{
  padding:10px 14px;
  justify-content:center;
  white-space:nowrap;
}

.accordion{display:grid; gap:14px; max-width: 900px; margin: 0 auto}
.accordion__item{
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  background: linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  overflow:hidden;
  backdrop-filter: blur(20px);
  transition: all var(--transition-smooth);
}
.accordion__item:hover{
  border-color: rgba(0,229,204,.20);
  box-shadow: var(--glowT);
}
.accordion__summary{
  list-style:none;
  cursor:pointer;
  padding:18px 22px;
  font-weight:700;
  font-size:16px;
  color: #fff;
  background: var(--grad2);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  transition: filter var(--transition-fast);
}
.accordion__summary:hover{filter: brightness(1.08)}
.accordion__item[open] .accordion__summary{box-shadow: 0 4px 20px rgba(0,229,204,.15)}
.accordion__summary::-webkit-details-marker{display:none}
.accordion__summary::after{
  content:"";
  width:10px;
  height:10px;
  border-right:2px solid rgba(255,255,255,.9);
  border-bottom:2px solid rgba(255,255,255,.9);
  transform: rotate(45deg);
  transition: transform var(--transition-fast);
  flex-shrink:0;
}
.accordion__item[open] .accordion__summary::after{transform: rotate(-135deg)}
.accordion__content{
  padding:20px 22px;
  color:rgba(240,244,255,.75);
  line-height:1.7;
}
.accordion__content p{margin:12px 0}

body[data-page="soc"] .soc-block + .section__lead{margin-top:16px}

.card--feature{padding:24px}
.card__meta{display:flex; gap:16px; align-items:flex-start; margin-bottom:16px}
.card__sub{margin:6px 0 0; color:rgba(240,244,255,.65); font-size:13px; line-height:1.5}

.card__media{
  margin-left:auto;
  width:240px;
  height:140px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
}

.card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.card--feature .icon{
  background: var(--grad2);
  border:0;
  box-shadow: var(--glowT);
  color: #fff;
}

.icon{
  width:48px; height:48px;
  border-radius:16px;
  border:1px solid transparent;
  background:
    linear-gradient(rgba(255,255,255,.08), rgba(255,255,255,.04)) padding-box,
    linear-gradient(135deg, rgba(0,229,204,.50), rgba(37,99,235,.40)) border-box;
  color:rgba(240,244,255,.95);
  display:grid; place-items:center;
  flex-shrink:0;
  transition: all var(--transition-fast);
}
.icon svg{width:24px; height:24px}
.card:hover .icon{
  box-shadow: var(--glowT);
  transform: scale(1.05);
}

.list{margin:0; padding-left:18px; color:rgba(234,240,255,.80)}
.list li{margin:9px 0}

.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.chip{font-size:12px; color:rgba(234,240,255,.86); padding:6px 10px; border-radius:999px; border:1px solid var(--stroke); background:rgba(255,255,255,.03)}

.pill{
  padding:14px 18px;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  color: rgba(240,244,255,.88);
  text-align:center;
  font-weight:600;
  font-size:14px;
  backdrop-filter: blur(10px);
  transition: all var(--transition-fast);
}
.pill:hover{
  border-color: rgba(0,229,204,.25);
  box-shadow: var(--glowT);
  transform: translateY(-2px);
}

.clients{
  margin-top:30px;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(165deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border-radius:var(--radius2);
  overflow:hidden;
  backdrop-filter: blur(20px);
}
.clients__head{
  padding:18px 22px;
  border-bottom:1px solid rgba(255,255,255,.08);
  color:rgba(240,244,255,.85);
  font-weight:700;
  font-size:15px;
}
.clients-marquee{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(228,232,239,.92));
  border-radius: 18px;
  margin:16px;
}
.clients-marquee::before,
.clients-marquee::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:90px;
  pointer-events:none;
  z-index:2;
}
.clients-marquee::before{left:0; background: linear-gradient(90deg, rgba(250,251,253,1), rgba(250,251,253,0))}
.clients-marquee::after{right:0; background: linear-gradient(270deg, rgba(250,251,253,1), rgba(250,251,253,0))}

.clients-marquee__track{
  display:flex;
  align-items:center;
  gap:22px;
  width:max-content;
  padding:16px 20px;
  animation: clients-marquee 22s linear infinite;
}
.clients-marquee:hover .clients-marquee__track{animation-play-state: paused}

.sophos-partner__card{
  width:calc(100% - 48px);
  max-width:1200px;
  margin:0 auto;
  border-radius: var(--radius);
  padding:18px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  position:relative;
  min-height:124px;
  display:grid;
  place-items:center;
  overflow:visible;
}

.sophos-partner{padding-bottom:0}
.sophos-strip{padding-top:0}

.sophos-partner__card{
  border-bottom:0;
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
  margin-bottom:0;
}

.sophos-partner + .sophos-strip .sophos-strip__framewrap{margin-top:-18px}

@media (max-width: 760px){
  .sophos-partner + .sophos-strip .sophos-strip__framewrap{margin-top:-16px}
  .sophos-partner__title{
    left:50%;
    width:calc(100% - 32px);
    text-align:center;
    transform: translate(-50%, calc(-100% - 10px));
  }
}

.sophos-partner__card::before{
  content:"";
  display:none;
}

.sophos-partner__card::after{
  content:"";
  display:none;
}

.sophos-partner__title{
  position:absolute;
  top:0;
  left:16px;
  transform: translateY(calc(-100% - 10px));
  margin:0;
  font-size:18px;
  font-weight:900;
  letter-spacing:-.01em;
  text-transform:uppercase;
  background:none;
  -webkit-background-clip:initial;
  background-clip:initial;
  color:#fff;
  text-shadow:none;
  z-index:2;
}

.sophos-partner__logo{
  width:auto;
  height:64px;
  max-width:min(420px, 86%);
  display:block;
}

.sophos-video__wrap{
  width:calc(100% - 48px);
  max-width:1200px;
  margin:0 auto;
  border-radius: var(--radius);
  overflow:hidden;
  background: rgba(255,255,255,.04);
}

.sophos-video__frame{
  width:100%;
  height:100%;
  border:0;
  display:block;
  background:transparent;
}

.sophos-video__frame--wide{aspect-ratio:16 / 9}
.sophos-video__frame--tall{aspect-ratio:9 / 16; display:none}

.sophos-strip{padding:40px 0}
.sophos-strip__head{margin-bottom:14px}
.sophos-strip__title{margin:0 0 8px; font-size:28px; letter-spacing:-.02em}
.sophos-strip__sub{margin:0; color:rgba(226,0,26,.88)}

.sophos-strip__framewrap{
  width:calc(100% - 48px);
  max-width:1200px;
  margin:0 auto;
  background:#fff;
  border-radius: var(--radius);
  border:0;
  outline:0;
  overflow:hidden;
  position:relative;
  box-shadow:none;
}

.sophos-strip__framewrap{
  margin-top:-1px;
  border:1px solid rgba(0,0,0,.08);
  border-top:0;
  border-top-left-radius:0;
  border-top-right-radius:0;
}

.sophos-strip__framewrap::before,
.sophos-strip__framewrap::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:16px;
  pointer-events:none;
  display:none;
}

.sophos-strip__framewrap::before{
  top:0;
  background: linear-gradient(180deg, rgba(5,7,19,.55), rgba(5,7,19,0));
}

.sophos-strip__framewrap::after{
  bottom:0;
  background: linear-gradient(0deg, rgba(5,7,19,.55), rgba(5,7,19,0));
}

.sophos-strip__frame{
  width:100%;
  height:4690px;
  border:0;
  background:#fff;
  display:block;
}

@keyframes clients-marquee{
  from{transform: translateX(0)}
  to{transform: translateX(-50%)}
}
.client-logo{
  height:58px;
  border-radius:16px;
  border:1px dashed rgba(24,209,193,.28);
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(234,240,255,.55);
  background: rgba(11,16,34,.35);
  font-weight:700;
}
.clients-marquee .client-logo{
  border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.74);
  color: rgba(10,14,30,.62);
  height:80px;
}
.clients-marquee .client-logo img{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:62px;
  padding:8px 16px;
  object-fit: contain;
  display:block;
  filter:none;
  opacity:1;
}

.clients-marquee .client-logo--bane{height:98px}
.clients-marquee .client-logo--bane img{max-height:82px; padding:8px 16px}
.clients-marquee .client-logo--dase img{max-height:70px}
.clients-marquee .client-logo--iess img{max-height:70px}
.clients-marquee .client-logo--atm img{max-height:70px}
.clients-marquee .client-logo--terranostra img{max-height:70px}
.clients-marquee .client-logo--facilito img{max-height:70px}
.clients-marquee .client-logo--consulcomi img{max-height:70px}
.client-logo img:hover{filter:none; opacity:1}

.steps{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:20px;
  counter-reset: step-counter;
}
.step{
  display:flex;
  gap:18px;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border-radius:var(--radius);
  padding:24px;
  backdrop-filter: blur(20px);
  transition: all var(--transition-smooth);
  position:relative;
  overflow:hidden;
}
.step::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
}
.step:hover{
  border-color: rgba(0,229,204,.25);
  box-shadow: var(--glowT);
  transform: translateY(-4px);
}
.step__n{
  width:44px;
  height:44px;
  border-radius:14px;
  background:var(--grad2);
  display:grid;
  place-items:center;
  font-weight:800;
  font-size:18px;
  color:#fff;
  box-shadow: var(--glowT);
  flex-shrink:0;
  transition: all var(--transition-fast);
}
.step:hover .step__n{
  transform: scale(1.08);
  box-shadow: 0 0 0 1px rgba(0,229,204,.4), 0 15px 40px rgba(0,229,204,.2);
}
.step__t{
  font-weight:700;
  font-size:16px;
  margin-bottom:6px;
}
.step__d{
  color:rgba(240,244,255,.70);
  font-size:14px;
  line-height:1.6;
}

.contact{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:30px;
  align-items:start;
}

.contact__items{display:grid; gap:12px; margin-top:20px}
.contact__item{
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border-radius:var(--radius);
  padding:16px 18px;
  backdrop-filter: blur(10px);
  transition: all var(--transition-fast);
}
.contact__item:hover{
  border-color: rgba(0,229,204,.20);
  box-shadow: var(--glowT);
}
.contact__k{
  font-size:12px;
  color:var(--muted);
  margin-bottom:6px;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.contact__v{
  font-weight:600;
  font-size:15px;
}
.contact__v a{
  color: var(--turq);
  transition: all var(--transition-fast);
}
.contact__v a:hover{
  filter: brightness(1.2);
  text-decoration: underline;
}

.contact__actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:24px}

.form{
  border:1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border-radius:var(--radius2);
  padding:28px;
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-lg), var(--glowB);
  position:relative;
  overflow:hidden;
}
.form::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:2px;
  background: var(--grad2);
}
.form__head{margin-bottom:20px}
.form__title{
  font-weight:800;
  font-size:20px;
  letter-spacing:-.02em;
}
.form__sub{
  color:rgba(240,244,255,.65);
  font-size:13px;
  margin-top:6px;
}

.field{display:grid; gap:8px; margin-top:16px}
.field__lbl{
  font-size:13px;
  color:rgba(240,244,255,.75);
  font-weight:600;
}
.field__inp{
  width:100%;
  padding:14px 16px;
  border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(3,5,8,.50);
  color: var(--text);
  outline:none;
  font-size:15px;
  transition: all var(--transition-fast);
}
.field__inp::placeholder{
  color: rgba(240,244,255,.40);
}
.field__inp:hover{
  border-color: rgba(255,255,255,.20);
}
.field__inp:focus{
  border-color: var(--turq);
  box-shadow: 0 0 0 4px rgba(0,229,204,.12);
  background: rgba(3,5,8,.65);
}
.field__inp--area{min-height:120px; resize:vertical}
.form__fine{
  margin-top:14px;
  color:rgba(240,244,255,.55);
  font-size:12px;
  text-align:center;
}

.footer{
  border-top:1px solid rgba(255,255,255,.08);
  padding:40px 0;
  background: linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.35));
  position:relative;
}
.footer::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:200px;
  height:1px;
  background: var(--grad2);
}
.footer__inner{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:20px;
  align-items:center;
}
.footer__name{
  font-weight:800;
  font-size:20px;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.footer__sub{
  color:rgba(240,244,255,.60);
  font-size:13px;
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.footer__sep{opacity:.4}
.footer__copy{
  text-align:right;
  color:rgba(240,244,255,.50);
  font-size:13px;
}

@media (max-width: 980px){
  .section{padding:60px 0}
  .section__title{font-size:32px}
  .section__head{margin-bottom:30px}
  .hero__grid{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
  .clients__grid{grid-template-columns:repeat(3, minmax(0,1fr))}
  .grid--3{grid-template-columns:repeat(2, minmax(0,1fr))}
  .grid--4{grid-template-columns:repeat(2, minmax(0,1fr))}
  .steps{grid-template-columns:1fr}
  .footer__inner{grid-template-columns:1fr; text-align:center}
  .footer__links{justify-content:center}
  .footer__copy{text-align:center; margin-top:10px}
  .footer__sub{justify-content:center}
  .header__social{display:none}
}

@media (max-width: 760px){
  .section{padding:50px 0}
  .section__title{font-size:28px}
  .section__lead{font-size:15px}
  .hero{padding-top:70px}
  .hero__title{font-size:34px}
  .hero__subtitle{font-size:15px}
  .service-hero{padding-top:72px}
  .service-hero__title{font-size:30px}

  .carousel--hero .hero__copy{padding-bottom:60px}

  .carousel--hero .carousel__btn{display:none}
  .carousel--hero .carousel__dots{justify-content:center}
  .carousel--hero .carousel__dot{width:6px; height:6px}

  .brand__legend{display:none}
  .brand::after{display:none}
  .header__social{display:none}

  .header__inner{padding:10px 14px}

  .brand{padding-left:0}
  .brand__mark{width:82px; height:82px}
  .brand__logo{transform:none; width:82px; height:82px}

  .nav-toggle{display:inline-flex; align-items:center; justify-content:center}
  .nav-toggle{
    margin-left:auto;
    width:46px;
    height:46px;
    padding:0;
    border-radius:16px;
    flex-direction:column;
    background: rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.14);
    transition: transform .15s ease, background .15s ease, border-color .15s ease;
  }
  .nav-toggle:hover{background: rgba(255,255,255,.06)}
  .nav-toggle:active{transform: scale(.96)}
  .nav-toggle:focus-visible{outline:2px solid rgba(24,209,193,.55); outline-offset:2px}

  .nav-toggle__bar{
    width:22px;
    height:3px;
    margin:0;
    border-radius:999px;
    background: rgba(234,240,255,.92);
    transition: transform .18s ease, opacity .18s ease;
  }
  .nav-toggle__bar + .nav-toggle__bar{margin-top:6px}
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){transform: translateY(9px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){transform: translateY(-9px) rotate(-45deg)}
  .nav{
    position:fixed;
    inset:64px 14px auto 14px;
    padding:14px;
    border-radius:18px;
    border:1px solid var(--stroke);
    background:rgba(7,10,18,.92);
    backdrop-filter: blur(14px);
    display:none;
  }
  .nav[data-open="true"]{display:flex}
  .nav{
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .nav__dropdown-menu{
    position:static;
    min-width:auto;
    padding:10px;
    border-radius:16px;
    display:none;
  }
  .nav__dropdown[open] .nav__dropdown-menu{display:grid}
  .nav__cta{margin-top:6px}
  .nav__social{display:none}

  .sophos-strip{padding:32px 0}
  .sophos-strip__title{font-size:24px}
  .sophos-strip__frame{height:5805px}
  .sophos-strip__framewrap{width:calc(100% - 24px); max-width:1200px; margin:0 auto}

  .sophos-partner__card{width:calc(100% - 24px)}
  .sophos-partner__title{font-size:20px}
  .sophos-partner__logo{height:52px; max-width:100%}

  .sophos-video__wrap{width:calc(100% - 24px)}
  .sophos-video__frame--wide{display:none}
  .sophos-video__frame--tall{display:block}

  .card--feature .card__meta{flex-wrap:wrap}
  .card__media{width:100%; height:180px; margin-left:0}

  .footer__social{display:flex; justify-content:center; gap:10px; margin-top:14px}
  .footer__social .header__social-link{width:34px; height:34px}
  .trust{grid-template-columns:1fr;}
  .grid--2{grid-template-columns:1fr}
  .grid--3{grid-template-columns:1fr}
}