:root{
  --bg:#05070b;
  --panel:rgba(255,255,255,.06);
  --stroke:rgba(255,255,255,.12);
  --text:rgba(255,255,255,.88);
  --muted:rgba(255,255,255,.64);
  --teal:#10f0da;
  --teal2:#08b9ff;
  --shadow: 0 24px 80px rgba(0,0,0,.55);
  --radius:18px;
  --radius2:26px;
  --max:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: radial-gradient(900px 600px at 70% 10%, rgba(16,240,218,.18), transparent 60%),
              radial-gradient(700px 500px at 15% 30%, rgba(8,185,255,.14), transparent 60%),
              radial-gradient(900px 700px at 50% 90%, rgba(16,240,218,.10), transparent 65%),
              var(--bg);
  color:var(--text);
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
.container{max-width:var(--max); margin:0 auto; padding:0 18px}

/* =========================
   NORDIC NAV 
   ========================= */

.nav{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  backdrop-filter:blur(14px);
  background:rgba(5,7,11,.55);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  height:70px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  letter-spacing:.4px;
  flex:0 0 auto;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:nowrap;
  white-space:nowrap;
  position:relative;
  overflow:visible;
  margin-left:auto;
}

/* top-level links only */
.nav-links > a,
.nav-dropdown > .nav-drop-toggle{
  position:relative;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  color:var(--muted);
  padding:10px 10px;
  border-radius:12px;
  text-decoration:none;
  white-space:nowrap;
  flex:0 0 auto;
  transition:
    color .2s ease,
    text-shadow .2s ease,
    transform .2s ease,
    background .2s ease;
}

.nav-links > a:hover,
.nav-dropdown > .nav-drop-toggle:hover{
  color:rgba(255,255,255,.96);
  background:rgba(255,255,255,.06);
  text-shadow:
    0 0 10px rgba(16,240,218,.18),
    0 0 22px rgba(8,185,255,.12);
  transform:translateY(-1px);
}

.nav-links > a:active,
.nav-dropdown > .nav-drop-toggle:active{
  transform:translateY(0) scale(.98);
}

/* underline glow */
.nav-links > a::after,
.nav-dropdown > .nav-drop-toggle::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-10px;
  transform:translateX(-50%);
  width:0;
  height:2px;
  border-radius:999px;
  background:linear-gradient(
    90deg,
    rgba(16,240,218,0),
    rgba(16,240,218,.95),
    rgba(8,185,255,.55),
    rgba(16,240,218,0)
  );
  box-shadow:0 10px 28px rgba(16,240,218,.22);
  transition:width .22s ease;
  opacity:.95;
}

.nav-links > a:hover::after,
.nav-dropdown > .nav-drop-toggle:hover::after{
  width:34px;
}

.nav-links > a.active{
  color:rgba(255,255,255,.95);
  text-shadow:0 0 24px rgba(16,240,218,.22);
}

.nav-links > a.active::after{
  width:34px;
}

/* dropdown parent */
.nav-dropdown{
  position:relative;
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
}

.nav-drop-toggle{
  cursor:pointer;
}

.nav-drop-arrow{
  width:8px;
  height:8px;
  border-right:1.8px solid rgba(255,255,255,.72);
  border-bottom:1.8px solid rgba(255,255,255,.72);
  transform:rotate(45deg) translateY(-1px);
  transition:transform .22s ease, border-color .22s ease;
  opacity:.9;
  flex:0 0 auto;
}

.nav-dropdown:hover .nav-drop-arrow,
.nav-dropdown:focus-within .nav-drop-arrow{
  transform:rotate(225deg) translateY(-1px);
  border-color:rgba(16,240,218,.95);
}

/* dropdown floating panel */
.nav-dropdown-menu{
  position:absolute;
  top:calc(100% + 3px);
  left:50%;
  transform:translateX(-50%) translateY(6px);

  min-width:220px;
  padding:10px;
  border-radius:18px;

  display:grid;
  gap:8px;

  background:rgba(5,7,11,.94);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(16px);
  box-shadow:
    0 24px 80px rgba(0,0,0,.55),
    0 0 0 1px rgba(16,240,218,.06);

  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:9999;

  transition:
    opacity .22s ease,
    transform .22s ease,
    visibility .22s ease;
}

.nav-dropdown-menu::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(220px 140px at 30% 20%, rgba(16,240,218,.14), transparent 60%),
    radial-gradient(220px 140px at 75% 80%, rgba(8,185,255,.10), transparent 65%);
  pointer-events:none;
  opacity:.95;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}

.nav-dropdown-menu a{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 14px;
  border-radius:14px;
  white-space:nowrap;
  text-align:center;
  text-decoration:none;

  color:rgba(255,255,255,.84);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);

  transition:
    transform .2s ease,
    border-color .2s ease,
    background .2s ease,
    color .2s ease,
    box-shadow .2s ease;
}

.nav-dropdown-menu a::after{
  display:none !important;
}

.nav-dropdown-menu a:hover{
  transform:translateY(-1px);
  color:rgba(255,255,255,.96);
  background:linear-gradient(135deg, rgba(16,240,218,.14), rgba(8,185,255,.06));
  border-color:rgba(16,240,218,.22);
  box-shadow:0 18px 70px rgba(16,240,218,.10);
}

/* HUD */
.nav-hud{
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  height:36px;
  width:90px;
  border-radius:14px;
  border:1px solid rgba(16,240,218,.22);
  background:rgba(0,0,0,.22);
  box-shadow:0 18px 70px rgba(16,240,218,.10);
  opacity:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
  transition:opacity .18s ease, left .18s ease, width .18s ease;
}

.nav-links:hover .nav-hud{
  opacity:1;
}

.nav-hud::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(
      220px 140px at var(--hx, 50%) var(--hy, 50%),
      rgba(16,240,218,.22),
      rgba(8,185,255,.10),
      transparent 62%
    );
  opacity:.95;
  pointer-events:none;
}

.nav-hud::after{
  content:"";
  position:absolute;
  inset:-60%;
  background:linear-gradient(120deg, transparent 35%, rgba(255,255,255,.10) 50%, transparent 65%);
  transform:translateX(-28%) rotate(10deg);
  opacity:.20;
  pointer-events:none;
}

/* MOBILE */
.nav-mobile{
  display:none;
  position:relative;
}

.nav-mobile summary{
  list-style:none;
}

.nav-mobile summary::-webkit-details-marker{
  display:none;
}

.nav-mobile-btn{
  width:44px;
  height:40px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:10px;
}

.nav-mobile-btn span{
  display:block;
  width:18px;
  height:2px;
  background:rgba(255,255,255,.82);
  border-radius:99px;
}

.nav-mobile-panel{
  position:absolute;
  right:0;
  top:54px;
  width:min(280px, calc(100vw - 36px));
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(5,7,11,.85);
  backdrop-filter:blur(14px);
  box-shadow:0 24px 80px rgba(0,0,0,.55);
  display:grid;
  gap:10px;
}

.nav-mobile-panel > a,
.nav-mobile-submenu > summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:46px;
  padding:12px 12px;
  border-radius:14px;
  color:rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  cursor:pointer;
  text-decoration:none;
  transition:.2s ease;
}

.nav-mobile-panel > a:hover,
.nav-mobile-submenu > summary:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(16,240,218,.20);
}

.nav-mobile-submenu{
  display:grid;
  gap:10px;
}

.nav-mobile-submenu summary{
  list-style:none;
}

.nav-mobile-submenu summary::-webkit-details-marker{
  display:none;
}

.nav-mobile-submenu > summary::after{
  content:"";
  width:8px;
  height:8px;
  border-right:1.8px solid rgba(255,255,255,.72);
  border-bottom:1.8px solid rgba(255,255,255,.72);
  transform:rotate(45deg);
  transition:transform .22s ease, border-color .22s ease;
  opacity:.9;
  flex:0 0 auto;
}

.nav-mobile-submenu[open] > summary::after{
  transform:rotate(225deg);
  border-color:rgba(16,240,218,.95);
}

.nav-mobile-submenu-panel{
  display:grid;
  gap:8px;
  padding:4px 0 0 10px;
}

.nav-mobile-submenu-panel a{
  display:block;
  padding:11px 12px;
  border-radius:12px;
  text-decoration:none;
  color:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  transition:.2s ease;
}

.nav-mobile-submenu-panel a:hover{
  color:rgba(255,255,255,.94);
  border-color:rgba(16,240,218,.18);
  background:linear-gradient(135deg, rgba(16,240,218,.10), rgba(8,185,255,.04));
}

/* desktop/mobile switch */
@media (max-width: 1280px){
  .nav-links{display:none !important;}
  .nav-mobile{display:block !important;}
}

@media (min-width: 1281px){
  .nav-links{display:flex !important;}
  .nav-mobile{display:none !important;}
}

@media (prefers-reduced-motion: reduce){
  .nav-hud,
  .nav-links > a,
  .nav-dropdown > .nav-drop-toggle,
  .nav-dropdown-menu,
  .nav-mobile-submenu > summary::after{
    transition:none !important;
  }
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px; padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(16,240,218,.30);
  background: linear-gradient(135deg, rgba(16,240,218,.22), rgba(8,185,255,.10));
  box-shadow: 0 18px 70px rgba(16,240,218,.10);
  font-weight:600;
  cursor:pointer;
}
.btn.secondary{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow:none;
  color:var(--text);
}

/* HERO now full width (covers the old two columns) */
.hero{padding:64px 0 34px}
.hero-grid{
  display:grid;
  gap:18px;
  grid-template-columns: 1fr; /* ONE column */
  align-items:stretch;
}
.card{
  background:var(--panel);
  border:1px solid var(--stroke);
  border-radius:var(--radius2);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}
.card::before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(500px 280px at 25% 10%, rgba(16,240,218,.22), transparent 60%),
              radial-gradient(500px 320px at 70% 30%, rgba(8,185,255,.18), transparent 65%);
  opacity:.8; pointer-events:none;
}
.hero-main{padding:0}
.kicker{padding:34px 34px 12px}
.pill-row{padding:0 34px 34px}

/* =========================
   HERO CAROUSEL WOW UPGRADE
   ========================= */

.hc-viewport{
  position: relative;
  overflow: hidden;
}

/* cada slide */
.hc-slide{
  position: relative;
  isolation: isolate;
}

/* imagen con movimiento suave */
.hc-slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition:
    transform 1.4s cubic-bezier(.22,.61,.36,1),
    filter 1.1s ease,
    opacity .9s ease;
  filter: saturate(.95) brightness(.88);
}

/* slide activo */
.hc-slide.is-active img{
  transform: scale(1);
  filter: saturate(1.02) brightness(.96);
}

/* glow teal */
.hc-slide::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(700px 280px at 18% 25%, rgba(16,240,218,.14), transparent 60%),
    radial-gradient(700px 280px at 82% 70%, rgba(8,185,255,.10), transparent 65%);
  opacity:.8;
  pointer-events:none;
  transition: opacity .8s ease;
}

/* cinematic dark overlay */
.hc-slide::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg, rgba(5,7,11,.74), rgba(5,7,11,.18) 40%, rgba(5,7,11,.62)),
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.28));
  pointer-events:none;
}

/* tech frame corners */
.hc-viewport::before,
.hc-viewport::after{
  content:"";
  position:absolute;
  z-index:3;
  width:120px;
  height:120px;
  pointer-events:none;
  opacity:.55;
}

.hc-viewport::before{
  top:22px;
  left:22px;
  border-top:1px solid rgba(16,240,218,.28);
  border-left:1px solid rgba(16,240,218,.28);
  box-shadow: -8px -8px 24px rgba(16,240,218,.06);
}

.hc-viewport::after{
  right:22px;
  bottom:22px;
  border-right:1px solid rgba(8,185,255,.22);
  border-bottom:1px solid rgba(8,185,255,.22);
  box-shadow: 8px 8px 24px rgba(8,185,255,.05);
}

/* sweep light */
.hc-shine{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  overflow:hidden;
}

.hc-shine::before{
  content:"";
  position:absolute;
  top:-10%;
  bottom:-10%;
  width:22%;
  background: linear-gradient(
    110deg,
    transparent 0%,
    rgba(255,255,255,.00) 30%,
    rgba(255,255,255,.10) 50%,
    rgba(255,255,255,.00) 70%,
    transparent 100%
  );
  transform: translateX(-160%) skewX(-16deg);
  animation: hcSweep 7s ease-in-out infinite;
  mix-blend-mode: screen;
  opacity:.75;
}

@keyframes hcSweep{
  0%, 70%, 100%{
    transform: translateX(-160%) skewX(-16deg);
    opacity:0;
  }
  76%{
    opacity:.75;
  }
  92%{
    transform: translateX(560%) skewX(-16deg);
    opacity:.18;
  }
}

/* arrows */
.hc-arrow{
  backdrop-filter: blur(10px);
  background: rgba(5,7,11,.34);
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 70px rgba(0,0,0,.30);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.hc-arrow:hover{
  transform: translateY(-50%) scale(1.04);
  border-color: rgba(16,240,218,.32);
  background: rgba(16,240,218,.08);
  box-shadow:
    0 18px 80px rgba(0,0,0,.34),
    0 0 24px rgba(16,240,218,.10);
}

/* dots más Nordic */
.hc-dots{
  gap:10px;
}

.hc-dot{
  width:9px;
  height:9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.26);
  background: rgba(255,255,255,.10);
  box-shadow:none;
  transition: .22s ease;
}

.hc-dot.is-active{
  width:24px;
  background: linear-gradient(90deg, rgba(16,240,218,.95), rgba(8,185,255,.65));
  border-color: rgba(16,240,218,.55);
  box-shadow: 0 0 18px rgba(16,240,218,.16);
}

/* texto del slide */
.hc-slide .slide-copy,
.hc-slide .slide-overlay{
  position: relative;
  z-index: 2;
}

.hc-slide .slide-copy > *,
.hc-slide .slide-overlay > *{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s ease;
}

.hc-slide.is-active .slide-copy > *,
.hc-slide.is-active .slide-overlay > *{
  opacity: 1;
  transform: translateY(0);
}

.hc-slide.is-active .slide-copy > *:nth-child(1),
.hc-slide.is-active .slide-overlay > *:nth-child(1){ transition-delay:.12s; }
.hc-slide.is-active .slide-copy > *:nth-child(2),
.hc-slide.is-active .slide-overlay > *:nth-child(2){ transition-delay:.24s; }
.hc-slide.is-active .slide-copy > *:nth-child(3),
.hc-slide.is-active .slide-overlay > *:nth-child(3){ transition-delay:.36s; }
.hc-slide.is-active .slide-copy > *:nth-child(4),
.hc-slide.is-active .slide-overlay > *:nth-child(4){ transition-delay:.48s; }

/* SECTIONS */
section{padding:56px 0}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px}
.section-head h2{margin:0; font-size:28px; letter-spacing:-.6px}
.section-head p{margin:0; color:rgba(255,255,255,.65); max-width:60ch}

.grid-3{display:grid; gap:14px; grid-template-columns: repeat(3, 1fr)}
.grid-2{display:grid; gap:14px; grid-template-columns: repeat(2, 1fr)}
.tile{
  padding:18px;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  transition:.2s ease;
}
.tile:hover{transform:translateY(-2px); background: rgba(255,255,255,.07)}
.tile h3{margin:6px 0 8px; font-size:16px}
.tile p{margin:0; color:rgba(255,255,255,.66); font-size:14px; line-height:1.55}
.icon{
  width:44px; height:44px; border-radius:14px;
  border:1px solid rgba(16,240,218,.26);
  background: linear-gradient(135deg, rgba(16,240,218,.18), rgba(8,185,255,.08));
  box-shadow: 0 16px 70px rgba(16,240,218,.10);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; color:rgba(255,255,255,.9);
}

/* ABOUT - editorial (sin cajas) */
.about-section{
  padding:70px 0;
}
.about-wrap{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:34px;
  align-items:center;
}

.about-copy h2{
  margin:10px 0 10px;
  font-size:34px;
  letter-spacing:-.6px;
}

.about-lead{
  margin:0;
  color:rgba(255,255,255,.70);
  line-height:1.7;
  max-width:70ch;
}

.about-lines{
  margin-top:22px;
  display:grid;
  gap:18px;
}

.about-line{
  display:grid;
  grid-template-columns: 54px 1fr;
  gap:14px;
  align-items:flex-start;
  padding:12px 0;
  border-top:1px solid rgba(255,255,255,.10);
}
.about-line:last-child{
  border-bottom:1px solid rgba(255,255,255,.10);
}

.about-badge{
  width:46px; height:46px;
  border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  font-weight:800;
  border:1px solid rgba(16,240,218,.28);
  background: linear-gradient(135deg, rgba(16,240,218,.16), rgba(8,185,255,.06));
  box-shadow: 0 18px 60px rgba(16,240,218,.10);
  color:rgba(255,255,255,.92);
}

.about-line h3{
  margin:2px 0 6px;
  font-size:16px;
}
.about-line p{
  margin:0;
  color:rgba(255,255,255,.66);
  font-size:14px;
  line-height:1.6;
}

.about-cta{margin-top:18px}

.about-visual{
  position:relative;
  min-height:320px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.about-logo-float{
  width:min(360px, 90%);
  aspect-ratio: 1 / 1;
  border-radius:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  background:
    radial-gradient(260px 240px at 50% 40%, rgba(16,240,218,.18), transparent 65%),
    radial-gradient(260px 240px at 60% 70%, rgba(8,185,255,.12), transparent 70%);
  border:1px solid rgba(255,255,255,.10);
}

.about-logo-float::after{
  content:"";
  position:absolute; inset:-2px;
  border-radius:30px;
  background: radial-gradient(220px 160px at 40% 30%, rgba(16,240,218,.22), transparent 65%);
  opacity:.8;
  pointer-events:none;
}

.about-logo-float img{
  width:62%;
  filter: drop-shadow(0 26px 80px rgba(16,240,218,.16));
  opacity:.96;
}

@media (max-width: 980px){
  .about-wrap{
    grid-template-columns:1fr;
    gap:22px;
  }
  .about-visual{min-height:240px}
  .about-copy h2{font-size:30px}
}


/* SERVICES thumbs */
.service{overflow:hidden}
.service-thumb{
  height:120px;
  border-radius:16px;
  margin-bottom:12px;
  background-size:cover;
  background-position:center;
  border:1px solid rgba(255,255,255,.10);
  position:relative;
}
.service-thumb::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.35));
}

/* PACKAGES */
.price-grid{display:grid; gap:14px; grid-template-columns: repeat(4, 1fr)}
.price{
  padding:18px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  position:relative;
}
.price.popular{
  border:1px solid rgba(16,240,218,.35);
  background: linear-gradient(180deg, rgba(16,240,218,.12), rgba(255,255,255,.04));
  box-shadow: 0 22px 90px rgba(16,240,218,.12);
}
.tag{
  display:inline-block;
  font-size:12px; letter-spacing:1px; text-transform:uppercase;
  padding:6px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.75);
  background: rgba(255,255,255,.04);
}
.price h3{margin:10px 0 6px}
.money{
  font-size:26px; font-weight:800;
  background: linear-gradient(90deg, var(--teal), var(--teal2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin:8px 0 12px;
}
ul{margin:0; padding-left:18px; color:rgba(255,255,255,.68); font-size:13px; line-height:1.55}
.price .btn{width:100%; margin-top:14px}


/* =========================
   OUR WORK — NORDIC PREMIUM
   ========================= */

.work-section-premium{
  position: relative;
  padding: 72px 0;
}

.work-section-premium::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(700px 280px at 15% 18%, rgba(16,240,218,.10), transparent 60%),
    radial-gradient(700px 280px at 85% 82%, rgba(8,185,255,.10), transparent 60%);
  opacity:.9;
}

.work-head{
  margin-bottom: 26px;
}

.work-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
}

.work-kicker::before{
  content:"";
  width:34px;
  height:1px;
  background:linear-gradient(90deg, rgba(16,240,218,.85), rgba(8,185,255,.35));
  box-shadow:0 0 18px rgba(16,240,218,.18);
}

.work-premium-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:22px;
}

.work-premium-grid .work{
  position:relative;
  isolation:isolate;
  border-radius:26px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  min-height: 380px;
  aspect-ratio: auto;
  width:100%;
  padding:0;
  appearance:none;
  text-align:left;
  cursor:pointer;
  box-shadow:
    0 30px 90px rgba(0,0,0,.38),
    inset 0 0 0 1px rgba(255,255,255,.02);
  transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease,
    filter .35s ease;
}

.work-premium-grid .work::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:
    radial-gradient(500px 260px at 18% 18%, rgba(16,240,218,.15), transparent 58%),
    radial-gradient(500px 260px at 82% 78%, rgba(8,185,255,.12), transparent 62%),
    linear-gradient(180deg, rgba(4,8,12,.04) 0%, rgba(4,8,12,.18) 38%, rgba(4,8,12,.78) 100%);
  opacity:.98;
}

.work-premium-grid .work::after{
  content:"";
  position:absolute;
  inset:-35%;
  z-index:0;
  background:linear-gradient(
    120deg,
    transparent 28%,
    rgba(255,255,255,.14) 44%,
    transparent 58%
  );
  transform:translateX(-60%) rotate(10deg);
  opacity:0;
  transition:transform .9s ease, opacity .3s ease;
  pointer-events:none;
}

.work-premium-grid .work-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:18px;
}

.work-premium-grid .work-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.work-premium-grid .work-chip{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(7,10,15,.44);
  backdrop-filter:blur(12px);
  color:rgba(255,255,255,.84);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  box-shadow:0 12px 34px rgba(0,0,0,.18);
}

.work-premium-grid .work-zoom{
  width:50px;
  height:50px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    linear-gradient(135deg, rgba(16,240,218,.16), rgba(8,185,255,.08)),
    rgba(7,10,15,.34);
  border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);
  box-shadow:
    0 16px 40px rgba(0,0,0,.26),
    0 0 0 1px rgba(16,240,218,.05);
  font-size:18px;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.work-premium-grid .work-bottom{
  padding:14px 14px 15px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(10,14,20,.36), rgba(10,14,20,.62));
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(12px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 18px 50px rgba(0,0,0,.20);
}

.work-meta{
  display:block;
  margin-bottom:8px;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(16,240,218,.82);
}

.work-premium-grid .work-bottom h3{
  margin:0 0 8px;
  font-size:18px;
  line-height:1.2;
  letter-spacing:-.02em;
  color:rgba(255,255,255,.94);
}

.work-premium-grid .work-bottom p{
  margin:0;
  font-size:13px;
  line-height:1.55;
  color:rgba(255,255,255,.70);
  max-width:34ch;
}

.work-premium-grid .work:hover{
  transform:translateY(-6px);
  border-color:rgba(16,240,218,.26);
  box-shadow:
    0 42px 120px rgba(0,0,0,.52),
    0 0 0 1px rgba(16,240,218,.08);
  filter:saturate(1.04);
}

.work-premium-grid .work:hover::after{
  opacity:1;
  transform:translateX(36%) rotate(10deg);
}

.work-premium-grid .work:hover .work-zoom{
  transform:translateY(-2px) scale(1.04);
  border-color:rgba(16,240,218,.28);
  box-shadow:
    0 18px 46px rgba(0,0,0,.28),
    0 0 24px rgba(16,240,218,.12);
}

.work-premium-grid .work:focus-visible{
  outline:none;
  border-color:rgba(16,240,218,.34);
  box-shadow:
    0 0 0 3px rgba(16,240,218,.10),
    0 36px 90px rgba(0,0,0,.46);
}

/* =========================
   OUR WORK — TECH OUTLINE
   ========================= */

.work-grid .work,
.work-uniform .work{
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
}

/* contorno tech fijo */
.work-grid .work::after,
.work-uniform .work::after{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:16px;
  pointer-events:none;
  z-index:1;
  border:1px solid rgba(16,240,218,.38);
  box-shadow:
    inset 0 0 0 1px rgba(8,185,255,.10),
    0 0 0 1px rgba(16,240,218,.08);
  opacity:.95;
}

/* esquinas tech */
.work-grid .work .work-overlay::before,
.work-uniform .work .work-overlay::before{
  content:"";
  position:absolute;
  inset:16px;
  pointer-events:none;
  z-index:1;
  background:
    linear-gradient(rgba(16,240,218,.75), rgba(16,240,218,.75)) top left / 26px 1px no-repeat,
    linear-gradient(rgba(16,240,218,.75), rgba(16,240,218,.75)) top left / 1px 26px no-repeat,

    linear-gradient(rgba(8,185,255,.55), rgba(8,185,255,.55)) top right / 26px 1px no-repeat,
    linear-gradient(rgba(8,185,255,.55), rgba(8,185,255,.55)) top right / 1px 26px no-repeat,

    linear-gradient(rgba(8,185,255,.42), rgba(8,185,255,.42)) bottom left / 22px 1px no-repeat,
    linear-gradient(rgba(8,185,255,.42), rgba(8,185,255,.42)) bottom left / 1px 22px no-repeat,

    linear-gradient(rgba(16,240,218,.60), rgba(16,240,218,.60)) bottom right / 22px 1px no-repeat,
    linear-gradient(rgba(16,240,218,.60), rgba(16,240,218,.60)) bottom right / 1px 22px no-repeat;
  opacity:.9;
}

/* contenido por encima del contorno */
.work-grid .work > *,
.work-uniform .work > *{
  position:relative;
  z-index:2;
}

/* better responsive */
@media (max-width: 1280px){
  .work-premium-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 780px){
  .work-premium-grid{
    grid-template-columns: 1fr;
  }

  .work-premium-grid .work{
    min-height: 340px;
  }

  .work-premium-grid .work-bottom h3{
    font-size:17px;
  }
}

/* CONTACT */
.contact{display:grid; gap:14px; grid-template-columns: 1.1fr .9fr; align-items:stretch}
.form{
  padding:18px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
}
.field{display:grid; gap:8px; margin-bottom:12px}
label{font-size:12px; color:rgba(255,255,255,.68)}
input, textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  color:rgba(255,255,255,.88);
  outline:none;
}
textarea{min-height:120px; resize:vertical}
.note{font-size:13px; color:rgba(255,255,255,.62); line-height:1.6}

.contact-side{padding:18px; border-radius:22px}
.mini-logo{display:flex; justify-content:center; margin-bottom:14px}
.mini-logo img{width:96px; opacity:.95; filter: drop-shadow(0 18px 50px rgba(16,240,218,.12))}
.hours{display:grid; gap:10px; margin-top:10px}
.hours div{
  display:flex; justify-content:space-between; gap:10px;
  padding:10px 12px; border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04)
}
.hours b{font-size:13px}
.hours span{font-size:13px; color:rgba(255,255,255,.68)}

.footer{
  padding:26px 0 40px;
  border-top:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.58);
  font-size:13px;
}

/* Responsive */
@media (max-width: 980px){
  h1{font-size:44px}
  .grid-3,.grid-2,.work-grid{grid-template-columns:1fr}
  .price-grid{grid-template-columns:1fr 1fr}
  .contact{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr}
  .carousel-track{height:380px}
  .slide-overlay{padding:28px}
}
@media (max-width : 1280px ){
  .price-grid{grid-template-columns:1fr}
  h1{font-size:36px}
  .carousel-track{height:320px}
}

.brand-banner{
  padding:120px 0 10px;
}

.brand-banner .container{
  display:flex;
  justify-content:center;
}

.brand-banner-logo{
  width:160px;
  height:auto;
  display:block;
  opacity:.98;
  z-index:5;
  position:relative;
  filter: drop-shadow(0 22px 70px rgba(16,240,218,.20));
}

.about-more p{
  margin:12px 0 0;
  color:rgba(255,255,255,.66);
  font-size:14px;
  line-height:1.7;
  max-width:72ch;
}

.about-toggle{
  margin-top:14px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
  cursor:pointer;
  font-weight:600;
}
.about-toggle:hover{
  background: rgba(255,255,255,.10);
}

.about-cta{margin-top:16px}


/* ===== TESTIMONIALS FIX (override old styles) ===== */
#testimonials .t-wrap{
  max-width: 860px;
  margin: 10px auto 0;
  position: relative;
}

#testimonials .t-viewport{
  overflow: hidden;
}

#testimonials .t-track{
  display: flex;
  transform: translateX(0);
  transition: transform .55s ease;
  will-change: transform;
}

#testimonials .t-slide{
  flex: 0 0 100%;
  padding: 10px 0 0;
  position: relative !important;   /* pisa position:absolute viejo */
  opacity: 1 !important;           /* pisa opacity:0 viejo */
  filter: none !important;
  transform: none !important;
  pointer-events: auto !important;
}

#testimonials .t-row{
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 16px;
  align-items: center;
}

#testimonials .t-avatar{
  width: 74px;
  height: 74px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}

#testimonials .t-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#testimonials .t-content{min-width: 0;}

#testimonials .t-quote{
  position: relative;
  font-size: 22px;
  line-height: 1.7;
  color: rgba(255,255,255,.86);
  max-width: 62ch;
  padding-left: 18px;
}

#testimonials .t-quote::before{
  content: "“";
  position: absolute;
  left: 0;
  top: -12px;
  font-size: 44px;
  line-height: 1;
  color: rgba(16,240,218,.55);
  filter: drop-shadow(0 18px 50px rgba(16,240,218,.12));
}

#testimonials .t-meta{
  margin-top: 14px;
  display: flex;
  gap: 10px;
  align-items: center;
  color: rgba(255,255,255,.68);
  font-size: 13px;
}

#testimonials .t-meta b{
  color: rgba(255,255,255,.92);
  font-weight: 700;
}

#testimonials .t-meta span{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
}

/* Controls */
#testimonials .t-controls{
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.10);
}

#testimonials .t-btn{
  width: 42px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.88);
  cursor: pointer;
}

#testimonials .t-btn:hover{
  background: rgba(255,255,255,.10);
}

#testimonials .t-dots{
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  flex: 1;
}

#testimonials .t-dot{
  width: 8px;
  height: 8px;
  border-radius: 99px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  cursor: pointer;
}

#testimonials .t-dot.is-active{
  background: linear-gradient(90deg, var(--teal), var(--teal2));
  border-color: rgba(16,240,218,.45);
}

@media (max-width : 1280px ){
  #testimonials .t-row{
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  #testimonials .t-quote{
    font-size: 18px;
    padding-left: 0;
  }
  #testimonials .t-quote::before{
    left: 50%;
    transform: translateX(-50%);
    top: -18px;
  }
  #testimonials .t-meta{
    justify-content: center;
  }
}

/* WORK zoom icon overlay (SCOPE SAFE) */
.work-grid .work,
.work-uniform .work{
  appearance:none;
  cursor:pointer;
  text-align:left;
}

/* Si .work es button, evita estilos default del button */
button.work{
  background: transparent;
  padding: 0;
}

.work-zoom{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:54px;
  height:54px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  color:rgba(255,255,255,.92);
  background: rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  opacity:0;
  transition:.2s ease;
}

.work:hover .work-zoom{
  opacity:1;
}

.work:focus-visible{
  outline:2px solid rgba(16,240,218,.55);
  outline-offset:4px;
}

/* =========================
   WORK LIGHTBOX — FULL IMAGE
   ========================= */

.lightbox{
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,.86);
  backdrop-filter: blur(8px);
}

.lightbox.is-open{
  display: flex;
}

.lightbox-content{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(92vw, 1100px);
  height: min(92vh, 900px);
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  border-radius: 24px;
  background: transparent;
}

.lightbox-img{
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 20px;
}

/* cuando activas zoom con click */
.lightbox-content.is-zoomed{
  overflow: auto;
  cursor: zoom-out;
}

.lightbox-content.is-zoomed .lightbox-img{
  max-width: none;
  max-height: none;
  width: auto;
  height: auto;
  object-fit: unset;
}

/* botones */
.lightbox-close{
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
}

.lightbox-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}

.lightbox-nav.prev{ left: 14px; }
.lightbox-nav.next{ right: 14px; }

/* responsive */
@media (max-width: 980px){
  .lightbox{
    padding: 14px;
  }

  .lightbox-content{
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 18px;
  }

  .lightbox-img{
    max-width: 100%;
    max-height: 100%;
    border-radius: 14px;
  }

  .lightbox-close{
    top: 10px;
    right: 10px;
  }

  .lightbox-nav.prev{ left: 8px; }
  .lightbox-nav.next{ right: 8px; }
}

/* LIGHTBOX CLOSE — Nordic style */
.lightbox-close{
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(16,240,218,.10), rgba(8,185,255,.06)),
    rgba(10,14,20,.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 18px 40px rgba(0,0,0,.30),
    0 0 0 1px rgba(16,240,218,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.92);
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    background .22s ease;
}

.lightbox-close:hover{
  transform: scale(1.04);
  border-color: rgba(16,240,218,.28);
  background:
    linear-gradient(135deg, rgba(16,240,218,.16), rgba(8,185,255,.10)),
    rgba(10,14,20,.82);
  box-shadow:
    0 18px 50px rgba(0,0,0,.34),
    0 0 24px rgba(16,240,218,.10);
}

.lightbox-close:active{
  transform: scale(.97);
}

.lightbox-close span,
.lightbox-close i,
.lightbox-close svg{
  pointer-events: none;
}

/* Lightbox zoom */
.lightbox-content{
  cursor: zoom-in;
}

.lightbox-content.is-zoomed{
  cursor: zoom-out;
}

/* El contenedor del img debe permitir scroll cuando hay zoom */
.lightbox-content{
  overflow:auto;
}

/* Imagen normal */
.lightbox-content img{
  width:100%;
  max-height:82vh;
  object-fit:contain;
  transform-origin: center center;
  transition: transform .18s ease;
}

/* Imagen con zoom */
.lightbox-content.is-zoomed img{
  transform: scale(2);  /* zoom 2x (cámbialo a 1.6 o 2.5 si quieres) */
  max-height:none;      /* para que pueda crecer */
}

.lightbox[hidden]{display:none !important;}

/* Lightbox fade system */
.lightbox{
  position:fixed; inset:0; z-index:999;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition: opacity .20s ease, visibility .20s ease;
}

.lightbox.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.lightbox-content{
  transform: translateY(8px) scale(.98);
  transition: transform .22s ease;
}

.lightbox.is-open .lightbox-content{
  transform: translateY(0) scale(1);
}
.lightbox-nav{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:46px;
  height:46px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.92);
  cursor:pointer;
  font-size:26px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  backdrop-filter: blur(10px);
  z-index:2;
}

.lightbox-nav.prev{left:10px;}
.lightbox-nav.next{right:10px;}

.lightbox-nav:hover{background: rgba(255,255,255,.10);}

@media (max-width : 1280px ){
  .lightbox-nav{
    width:42px; height:42px;
    border-radius:14px;
    font-size:24px;
  }
}

#bgParticles{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:-1;            /* detrás de todo */
  pointer-events:none;   /* no bloquea clicks */
  opacity:.65;           /* ajusta intensidad */
}

.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.footer-social{
  display:flex;
  gap:10px;
  align-items:center;
}

.social-btn{
  width:40px;
  height:40px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  transition: .2s ease;
}

.social-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(16,240,218,.28);
  background: linear-gradient(135deg, rgba(16,240,218,.14), rgba(8,185,255,.06));
  box-shadow: 0 18px 70px rgba(16,240,218,.10);
}

.social-btn svg{
  width:18px;
  height:18px;
  fill: rgba(255,255,255,.86);
}

@media (max-width : 1280px ){
  .footer-inner{
    flex-direction:column;
    text-align:center;
  }
}

/* CTA Social strip (like testimonials style) */
.cta-social{
  padding:44px 0 22px;
}

.cta-wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.10);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  position:relative;
}

.cta-wrap::before{
  content:"";
  position:absolute;
  inset:-26px -10px -26px -10px;
  background:
    radial-gradient(320px 180px at 20% 40%, rgba(16,240,218,.10), transparent 70%),
    radial-gradient(320px 180px at 80% 60%, rgba(8,185,255,.08), transparent 72%);
  pointer-events:none;
  opacity:.9;
}

.cta-text{
  position:relative;
  z-index:1;
}
.cta-text h2{
  margin:0 0 6px;
  font-size:24px;
  letter-spacing:-.5px;
}
.cta-text p{
  margin:0;
  color:rgba(255,255,255,.66);
  line-height:1.6;
}

.cta-actions{
  position:relative;
  z-index:1;
  display:flex;
  gap:10px;
  align-items:center;
}

/* Reuse your .social-btn styles (already in footer) */

@media (max-width : 1280px ){
  .cta-wrap{
    flex-direction:column;
    align-items:flex-start;
    text-align:left;
  }
}

html, body{ height:100%; }

body{
  background:#05070b;
}

/* Fondo imagen difuminado + oscuro */
body::before{
  content:"";
  position:fixed;
  inset:-40px;
  background:
    linear-gradient(rgba(0,0,0,.80), rgba(0,0,0,.80)),
    url("/assets/img/bg-nordic.png");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  filter: blur(22px) saturate(1.05);
  transform: scale(1.08);
  z-index:-999;
  pointer-events:none;
}

/* Partículas arriba */
#bgParticles{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:-998;
  pointer-events:none;
  opacity:.65;
}

#bgImage{
  position:fixed;
  inset:-40px;
  background:
    linear-gradient(rgba(0,0,0,.80), rgba(0,0,0,.80));
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  filter: blur(22px) saturate(1.05);
  transform: scale(1.08);
  z-index:-999;
  pointer-events:none;
}

#bgParticles{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:-998;
  pointer-events:none;
  opacity:.65;
}

.back-to-top{
  position:fixed;
  right:18px;
  bottom:18px;
  width:46px;
  height:46px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.92);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  line-height:1;
  backdrop-filter: blur(12px);
  z-index: 9999;
}

/* SERVICES WOW */
.services-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:18px;
}

.service-card{
  position:relative;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  overflow:hidden;
  display:grid;
  grid-template-columns: 170px 1fr;
  min-height: 210px;
  box-shadow: 0 24px 90px rgba(0,0,0,.40);
  transform: translateZ(0);
}

/* Neon edge */
.service-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:24px;
  padding:1px;
  background: linear-gradient(135deg,
    rgba(16,240,218,.0),
    rgba(16,240,218,.35),
    rgba(8,185,255,.18),
    rgba(16,240,218,.0)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:.35;
  pointer-events:none;
}

/* Spotlight that follows mouse (optional JS below) */
.service-card::after{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(260px 260px at var(--mx, 50%) var(--my, 50%),
    rgba(16,240,218,.18),
    transparent 55%
  );
  opacity:0;
  transition: opacity .25s ease;
  pointer-events:none;
}

.service-card:hover::after{
  opacity:1;
}

.service-card:hover{
  transform: translateY(-2px);
}

.service-media{
  position:relative;
  overflow:hidden;
}
.service-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.02);
}
.service-media::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(5,7,11,.0), rgba(5,7,11,.85));
}

.service-body{
  padding:18px 18px 16px;
}

.service-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}

.service-num{
  font-weight:800;
  letter-spacing:.5px;
  color: rgba(255,255,255,.70);
}

.service-tag{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.76);
  text-transform: lowercase;
}

.service-card h3{
  margin:0 0 8px;
  font-size:18px;
}

.service-card p{
  margin:0 0 12px;
  color: rgba(255,255,255,.66);
  line-height:1.6;
  max-width: 60ch;
}

.service-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:0;
  margin:0;
  list-style:none;
}

.service-list li{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.72);
}

@media (max-width: 820px){
  .services-grid{grid-template-columns: 1fr;}
  .service-card{grid-template-columns: 160px 1fr;}
}

@media (max-width : 1280px ){
  .service-card{grid-template-columns: 1fr;}
  .service-media{height:160px;}
  .service-media::before{background: linear-gradient(180deg, rgba(5,7,11,.0), rgba(5,7,11,.88));}
}

/* WORK section */
.work-section{
  padding: 56px 0;
}

/* WORK (uniform + clean + glow) */
.work-uniform{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:18px;
}

.work-uniform .work{
  position:relative;
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;

  /* same size always */
  aspect-ratio: 4 / 3;   /* change to 1 / 1 if you want squares */
  width:100%;

  cursor:pointer;
  text-align:left;
  padding:0;
  appearance:none;
  box-shadow: 0 24px 90px rgba(0,0,0,.40);
  transform: translateZ(0);
}

/* overlay for readability + subtle glow */
.work-uniform .work::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(420px 240px at 30% 25%, rgba(16,240,218,.14), transparent 60%),
    radial-gradient(420px 240px at 80% 65%, rgba(8,185,255,.10), transparent 65%),
    linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.70));
  opacity:.95;
}

/* shine sweep */
.work-uniform .work::after{
  content:"";
  position:absolute;
  inset:-45%;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.12) 45%, transparent 60%);
  transform: translateX(-35%) rotate(10deg);
  opacity:0;
  transition: opacity .25s ease, transform .70s ease;
  pointer-events:none;
}

.work-uniform .work-overlay{
  position:absolute; inset:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:16px;
  z-index:1;
}

.work-uniform .work-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.work-chip{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.30);
  color: rgba(255,255,255,.82);
  backdrop-filter: blur(10px);
  text-transform: lowercase;
}

.work-uniform .work-zoom{
  width:46px;
  height:46px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  color:rgba(255,255,255,.92);
  background: rgba(0,0,0,.38);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  opacity:.92;
}

/* Title always visible */
.work-uniform .work-bottom{
  background: rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  padding:10px 12px;
  backdrop-filter: blur(10px);
}

.work-uniform .work-bottom h3{
  margin:0 0 4px;
  font-size:16px;
  letter-spacing:-.2px;
  color: rgba(255,255,255,.92);
}

.work-uniform .work-bottom p{
  margin:0;
  font-size:12.5px;
  color: rgba(255,255,255,.70);
}

/* Hover wow */
.work-uniform .work:hover{
  transform: translateY(-2px);
  border-color: rgba(16,240,218,.22);
  box-shadow: 0 30px 120px rgba(0,0,0,.55);
}
.work-uniform .work:hover::after{
  opacity:1;
  transform: translateX(40%) rotate(10deg);
}

@media (max-width: 980px){
  .work-uniform{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width : 1280px ){
  .work-uniform{ grid-template-columns: 1fr; }
}

/* PACKAGES WOW */
.pricing-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:18px;
  align-items:stretch;
}


.price-card{
  position:relative;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: 0 24px 90px rgba(0,0,0,.40);
  overflow:hidden;
  padding:18px;
  display:flex;
  flex-direction:column;
  transform: translateZ(0);
}

.price-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:26px;
  padding:1px;
  background: linear-gradient(135deg,
    rgba(16,240,218,.0),
    rgba(16,240,218,.28),
    rgba(8,185,255,.14),
    rgba(16,240,218,.0)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:.35;
  pointer-events:none;
}

.price-card::after{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(320px 260px at var(--mx, 35%) var(--my, 25%),
    rgba(16,240,218,.18), transparent 60%);
  opacity:0;
  transition: opacity .25s ease;
  pointer-events:none;
}

.price-card:hover::after{opacity:1;}
.price-card:hover{transform: translateY(-2px); border-color: rgba(16,240,218,.18);}

.price-head{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,.10);
  margin-bottom:14px;
}

.price-title h3{
  margin:0 0 6px;
  letter-spacing:.6px;
  text-transform:uppercase;
  text-align:center; /* por tu preferencia */
}

.price-badge{
  display:inline-block;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.74);
}

.price-amount{
  text-align:right;
  display:flex;
  align-items:flex-end;
  gap:6px;
  white-space:nowrap;
}
.price-amount .price{
  color: rgba(255,255,255,.70);
  font-weight:700;
  transform: translateY(-6px);
}
.price-amount .num{
  font-size:34px;
  font-weight:800;
  letter-spacing:-.8px;
}
.price-amount .per{
  color: rgba(255,255,255,.62);
  font-size:12px;
  transform: translateY(-6px);
}

/* list with checks */
.price-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
}

.price-list li{
  position:relative;
  padding-left:26px;
  color: rgba(255,255,255,.74);
  line-height:1.55;
}
.price-list li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  width:18px;
  height:18px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  color: rgba(5,7,11,.95);
  background: linear-gradient(135deg, rgba(16,240,218,.95), rgba(8,185,255,.75));
  box-shadow: 0 10px 40px rgba(16,240,218,.16);
}

/* CTA button */
.price-cta{
  margin-top:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.90);
  text-decoration:none;
  transition:.2s ease;
}
.price-cta:hover{
  transform: translateY(-1px);
  border-color: rgba(16,240,218,.25);
  background: linear-gradient(135deg, rgba(16,240,218,.14), rgba(8,185,255,.06));
  box-shadow: 0 18px 70px rgba(16,240,218,.10);
}
.price-cta.solid{
  border-color: rgba(16,240,218,.28);
  background: linear-gradient(135deg, rgba(16,240,218,.30), rgba(8,185,255,.14));
}

/* Featured middle card */
.price-card.featured{
	
  background: rgba(255,255,255,.05);
  border-color: rgba(16,240,218,.22);
  box-shadow: 0 34px 140px rgba(0,0,0,.58);
  transform: translateY(-6px);
	
}
.price-card.featured::before{opacity:.65;}
.price-card.featured{
}
.price-card{
  transform: translateY(-6px);
}

.price-card.featured{
  transform: translateY(-6px);
}

.featured-pill{
  position:absolute;
  top:14px;
  left:14px;
  font-size:12px;
  padding:7px 10px;
  border-radius:999px;
  color: rgba(255,255,255,.92);
  border:1px solid rgba(16,240,218,.26);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
  text-transform: lowercase;
}

.pricing-note{
  margin:14px 0 0;
  color: rgba(255,255,255,.55);
  font-size: 13px; opacity: .75;
}

/* Responsive */
@media (max-width: 980px){
  .pricing-grid{ grid-template-columns: 1fr; }
  .price-card.featured{ transform:none; }
  .price-amount{ justify-content:flex-end; }
}

/* SERVICES split rows (alternating) */
.services-splitrows{
  padding:56px 0;
}

.sr-wrap{
  margin-top:18px;
  display:flex;
  flex-direction:column;
  gap:22px;
}

/* row container */
.sr-row{
  display:grid;
  grid-template-columns: 1fr 1.2fr;
  gap:18px;
  align-items:stretch;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  overflow:hidden;
  box-shadow: 0 24px 90px rgba(0,0,0,.38);
  position:relative;
}

/* reverse layout */
.sr-row.is-reverse{
  grid-template-columns: 1.2fr 1fr;
}
.sr-row.is-reverse .sr-info{ order:2; }
.sr-row.is-reverse .sr-media{ order:1; }

/* subtle animated glow (always) */
.sr-row::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(420px 260px at 25% 40%, rgba(16,240,218,.14), transparent 60%),
    radial-gradient(420px 260px at 80% 60%, rgba(8,185,255,.10), transparent 65%);
  filter: blur(10px);
  opacity:.8;
  animation: srGlow 7s ease-in-out infinite;
  pointer-events:none;
}

@keyframes srGlow{
  0%,100%{ transform: translateY(0) scale(1); opacity:.55; }
  50%{ transform: translateY(-6px) scale(1.02); opacity:.9; }
}

/* info side */
.sr-info{
  padding:22px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
  z-index:1;
}

.sr-kicker{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: rgba(255,255,255,.58);
  margin-bottom:10px;
}

.sr-info h3{
  margin:0 0 10px;
  font-size:28px;
  letter-spacing:-.6px;
}

.sr-info p{
  margin:0 0 14px;
  color: rgba(255,255,255,.68);
  line-height:1.75;
  max-width: 60ch;
}

.sr-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:16px;
}

.sr-tags span{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.16);
  color: rgba(255,255,255,.72);
  text-transform: lowercase;
}

/* button */
.sr-btn{
  width:max-content;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  padding:0 14px;
  border-radius:16px;
  border:1px solid rgba(16,240,218,.25);
  background: linear-gradient(135deg, rgba(16,240,218,.18), rgba(8,185,255,.06));
  color: rgba(255,255,255,.92);
  text-decoration:none;
  transition:.2s ease;
}
.sr-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 70px rgba(16,240,218,.10);
  border-color: rgba(16,240,218,.32);
}

/* media side */
.sr-media{
  position:relative;
  min-height: 320px;
  z-index:1;
}

.sr-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter: saturate(1.05) contrast(1.05);
}

/* vignette overlay for readability */
.sr-media::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(5,7,11,.15), rgba(5,7,11,.70));
}
.sr-row.is-reverse .sr-media::after{
  background: linear-gradient(270deg, rgba(5,7,11,.15), rgba(5,7,11,.70));
}

/* responsive */
@media (max-width: 980px){
  .sr-row,
  .sr-row.is-reverse{
    grid-template-columns: 1fr;
  }
  .sr-row.is-reverse .sr-info,
  .sr-row.is-reverse .sr-media{
    order: initial;
  }
  .sr-media{ min-height: 240px; }
  .sr-info h3{ font-size:24px; }
}

/* Creative Director section */
.creative-director{
  padding:56px 0;
}

.cd-wrap{
  display:grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap:22px;
  align-items:stretch;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  overflow:hidden;
  box-shadow: 0 24px 90px rgba(0,0,0,.38);
  position:relative;
}

/* subtle ambient glow */
.cd-wrap::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(420px 260px at 25% 45%, rgba(16,240,218,.14), transparent 60%),
    radial-gradient(420px 260px at 80% 60%, rgba(8,185,255,.10), transparent 65%);
  filter: blur(10px);
  opacity:.65;
  pointer-events:none;
}

.cd-photo{
  position:relative;
  min-height: 360px;
  z-index:1;
}

.cd-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter: saturate(1.02) contrast(1.05);
}

/* vignette so it blends with the site */
.cd-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(5,7,11,.15), rgba(5,7,11,.75));
}

/* text side */
.cd-text{
  padding:22px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
  z-index:1;
}

.cd-kicker{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: rgba(255,255,255,.58);
  margin-bottom:10px;
}

.cd-text h2{
  margin:0 0 12px;
  font-size:28px;
  letter-spacing:-.6px;
}

.cd-text p{
  margin:0 0 12px;
  color: rgba(255,255,255,.68);
  line-height:1.75;
  max-width: 65ch;
}
.cd-text p:last-child{margin-bottom:0;}

@media (max-width: 980px){
  .cd-wrap{ grid-template-columns: 1fr; }
  .cd-photo{ min-height: 260px; }
  .cd-text h2{ font-size:24px; }
}

/* Featured package: stronger turquoise accent */
.price-card.featured{
  border-color: rgba(16,240,218,.40);
  background: linear-gradient(180deg, rgba(16,240,218,.10), rgba(255,255,255,.04));
  box-shadow:
    0 34px 140px rgba(0,0,0,.58),
    0 0 0 1px rgba(16,240,218,.12),
    0 30px 120px rgba(16,240,218,.10);
}

/* Stronger neon border on featured */
.price-card.featured::before{
  opacity:.95;
  background: linear-gradient(135deg,
    rgba(16,240,218,.0),
    rgba(16,240,218,.75),
    rgba(8,185,255,.25),
    rgba(16,240,218,.0)
  );
}

/* Featured badge/pill */
.price-card.featured .featured-pill{
  border-color: rgba(16,240,218,.45);
  background: rgba(16,240,218,.12);
  box-shadow: 0 18px 70px rgba(16,240,218,.12);
}

/* Featured CTA button */
.price-card.featured .price-cta.solid{
  border-color: rgba(16,240,218,.45);
  background: linear-gradient(135deg, rgba(16,240,218,.40), rgba(8,185,255,.16));
}

:root{
  --font-main: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

html, body{
  font-family: var(--font-main);
  font-weight: 300; /* más delgada en general */
}

/* Headings más finos y elegantes */
h1, h2, h3, h4{
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* Texto general */
p, li, a, button, input, textarea{
  font-weight: 300;
}

/* Si quieres que números/precios destaquen sin verse gruesos */
.num, .price-amount{
  font-weight: 600;
}

html{
  scroll-behavior: smooth;
  scroll-padding-top: 40px; /* ajusta al alto real del menú */
}

/* SERVICES: turquoise accent like featured packages */
.sr-row{
  border-color: rgba(16,240,218,.18);
  background: linear-gradient(180deg, rgba(16,240,218,.06), rgba(255,255,255,.03));
  box-shadow:
    0 24px 90px rgba(0,0,0,.38),
    0 0 0 1px rgba(16,240,218,.08);
}

/* Stronger neon edge */
.sr-row::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:28px;
  padding:1px;
  background: linear-gradient(135deg,
    rgba(16,240,218,.0),
    rgba(16,240,218,.55),
    rgba(8,185,255,.18),
    rgba(16,240,218,.0)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:.55;
  pointer-events:none;
}

/* Optional: slightly more glow on hover */
.sr-row:hover{
  border-color: rgba(16,240,218,.32);
  box-shadow:
    0 30px 120px rgba(0,0,0,.55),
    0 30px 120px rgba(16,240,218,.10);
}

/* HERO carousel (no frame) */
.hero-carousel{
  width:100%;
}

.hc-viewport{
  position:relative;
  width:100%;
  border-radius: 0;           /* sin recuadro */
  overflow:hidden;            /* importante para que la imagen recorte bonito */
  background: transparent;
}

/* track */
.hc-track{
  display:flex;
  transition: transform .55s ease;
  will-change: transform;
}

/* slide */
.hc-slide{
  min-width:100%;
  height: 900px;              /* ajusta si quieres */
  position:relative;
}

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

/* overlay gradient to help readability */
.hc-slide::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(900px 300px at 50% 50%, rgba(0,0,0,.10), rgba(0,0,0,.55));
  pointer-events:none;
}

/* arrows on top of image */
.hc-arrow{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:46px;
  height:46px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(5,7,11,.38);
  backdrop-filter: blur(10px);
  color: rgba(255,255,255,.88);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:5;
  transition: .2s ease;
  box-shadow: 0 18px 70px rgba(0,0,0,.35);
}

.hc-arrow:hover{
  transform: translateY(-50%) scale(1.03);
  border-color: rgba(16,240,218,.25);
  box-shadow: 0 18px 80px rgba(16,240,218,.10);
}

.hc-prev{ left: 14px; }
.hc-next{ right: 14px; }

/* dots */
.hc-dots{
  position:absolute;
  left:50%;
  bottom: 14px;
  transform: translateX(-50%);
  display:flex;
  gap:8px;
  z-index:6;
}

.hc-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.12);
  cursor:pointer;
  transition: .2s ease;
}
.hc-dot.is-active{
  width:18px;
  background: rgba(16,240,218,.55);
  border-color: rgba(16,240,218,.65);
}

/* responsive */
@media (max-width: 980px){
  .hc-slide{ height: 300px; }
  .hc-arrow{ width:42px; height:42px; border-radius: 12px; }
}

.services-divider{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 28px 0;
  pointer-events: none; /* no clic, solo decorativo */
}

.services-divider .arrow{
  width: 14px;
  height: 14px;
  border-right: 2px solid rgba(0, 255, 200, 0.9);
  border-bottom: 2px solid rgba(0, 255, 200, 0.9);
  transform: rotate(45deg);
  filter: drop-shadow(0 0 10px rgba(0, 255, 200, 0.25));
  opacity: 0.25;
  animation: arrowFloat 1.6s ease-in-out infinite;
}

/* delay para efecto “cascada� */
.services-divider .arrow:nth-child(2){ animation-delay: .18s; opacity: 0.45; }
.services-divider .arrow:nth-child(3){ animation-delay: .36s; opacity: 0.65; }

@keyframes arrowFloat{
  0%   { transform: rotate(45deg) translateY(0);     opacity: 0.25; }
  50%  { transform: rotate(45deg) translateY(6px);   opacity: 0.85; }
  100% { transform: rotate(45deg) translateY(0);     opacity: 0.25; }
}

/* Respeta accesibilidad si alguien tiene reduced motion */
@media (prefers-reduced-motion: reduce){
  .services-divider .arrow{ animation: none; }
}

/* NAV links turquoise glow */
.nav a{
  position:relative;
  text-decoration:none;
  color: rgba(255,255,255,.82);
  transition: color .2s ease;
}

/* underline glow */
.nav a::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-10px;
  transform: translateX(-50%);
  width:0;
  height:2px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(16,240,218,.0), rgba(16,240,218,.95), rgba(8,185,255,.55), rgba(16,240,218,.0));
  box-shadow: 0 10px 28px rgba(16,240,218,.22);
  transition: width .22s ease;
  opacity:.95;
}

.nav a:hover{
  color: rgba(255,255,255,.95);
  text-shadow: 0 0 22px rgba(16,240,218,.22);
}

.nav a:hover::after{
  width: 34px;
}

/* Active link (si usas class="active") */
.nav a.active{
  color: rgba(255,255,255,.95);
  text-shadow: 0 0 24px rgba(16,240,218,.22);
}
.nav a.active::after{
  width: 34px;
}

.nav .btn{
  border:1px solid rgba(16,240,218,.28);
  background: linear-gradient(135deg, rgba(16,240,218,.18), rgba(8,185,255,.06));
  box-shadow: 0 18px 70px rgba(16,240,218,.10);
}
.nav .btn:hover{
  box-shadow: 0 18px 90px rgba(16,240,218,.16);
}

/* Fix: image must fill its container (no bottom strip) */
.detail-top .sr-media{
  min-height: 100%;
  height: 100%;
}

.detail-top .sr-media img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Optional: remove any line-height/whitespace quirks */
.detail-top .sr-media{
  line-height: 0;
}

/* Back to home button with animated left arrow */
.back-home-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  height:44px;
  padding:0 14px;
  border-radius:16px;
  border:1px solid rgba(16,240,218,.22);
  background: rgba(5,7,11,.35);
  backdrop-filter: blur(10px);
  color: rgba(255,255,255,.90);
  text-decoration:none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow: 0 18px 70px rgba(0,0,0,.35);
}

.back-home-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(16,240,218,.35);
  box-shadow: 0 18px 90px rgba(16,240,218,.10);
}

.back-text{
  font-weight: 400;
  letter-spacing: .02em;
}

.back-arrow{
  width:28px;
  height:28px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(16,240,218,.10);
  border:1px solid rgba(16,240,218,.18);
  box-shadow: 0 12px 40px rgba(16,240,218,.08);
  animation: backArrowNudge 1.1s ease-in-out infinite;
}

/* little nudge to the left */
@keyframes backArrowNudge{
  0%,100% { transform: translateX(0); opacity:.95; }
  50%     { transform: translateX(-6px); opacity:1; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .back-arrow{ animation:none !important; }
}

/* =========================
   Nordic FAQ (Dark + Teal)
   ========================= */

:root{
  --ncs-teal: #00ffd1;
  --ncs-white: rgba(255,255,255,0.92);
  --ncs-muted: rgba(255,255,255,0.78);
  --ncs-border: rgba(255,255,255,0.10);
  --ncs-border2: rgba(255,255,255,0.08);
  --ncs-glass: rgba(0,0,0,0.30);
  --ncs-shadow: 0 14px 40px rgba(0,0,0,0.35);
}

/* Section wrapper */
.ncs-faq-section{
  position: relative;
  padding: 80px 0;
}

/* Keep it consistent with a “container� pattern */
.ncs-faq-container{
  width: min(1100px, 92vw);
  margin: 0 auto;
}

/* Header */
.ncs-faq-header{
  margin-bottom: 26px;
}

.ncs-faq-kicker{
  margin: 0 0 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--ncs-muted);
}

.ncs-faq-title{
  margin: 0 0 10px;
  color: var(--ncs-white);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
}

.ncs-faq-subtitle{
  margin: 0;
  max-width: 62ch;
  color: var(--ncs-muted);
  line-height: 1.65;
}

/* Grid */
.ncs-faq-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 22px;
}

@media (min-width : -45px ){
  .ncs-faq-grid{
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
}

/* Item = like your “service cards� (glass + border) */
.ncs-faq-item{
  border-radius: 18px;
  border: 1px solid var(--ncs-border);
  background: var(--ncs-glass);
  backdrop-filter: blur(8px);
  box-shadow: var(--ncs-shadow);
  overflow: hidden;
}

/* Button */
.ncs-faq-btn{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 16px;
  background: transparent;
  border: 0;
  color: var(--ncs-white);
  cursor: pointer;
  text-align: left;
}

.ncs-faq-btn:focus{
  outline: none;
}

.ncs-faq-btn:focus-visible{
  box-shadow:
    0 0 0 2px rgba(0,255,209,0.28),
    0 0 0 6px rgba(0,255,209,0.12);
  border-radius: 14px;
  margin: 6px;
}

.ncs-faq-q{
  font-weight: 650;
  line-height: 1.35;
}

/* Icon chevron */
.ncs-faq-icon{
  width: 14px;
  height: 14px;
  border-right: 2px solid rgba(0,255,209,0.85);
  border-bottom: 2px solid rgba(0,255,209,0.85);
  transform: rotate(45deg);
  transition: transform .22s ease, opacity .22s ease;
  opacity: 0.9;
  flex: 0 0 auto;
  margin-right: 4px;
}

/* Panel */
.ncs-faq-panel{
  height: 0;
  overflow: hidden;
  border-top: 1px solid var(--ncs-border2);
  transition: height .25s ease;
}

.ncs-faq-a{
  padding: 14px 16px 16px;
  color: var(--ncs-muted);
  line-height: 1.65;
  font-size: 0.98rem;
}

/* Open state */
.ncs-faq-item.is-open .ncs-faq-icon{
  transform: rotate(225deg);
}

/* Footer */
.ncs-faq-footer{
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ncs-faq-note{
  margin: 0;
  color: var(--ncs-muted);
}

.ncs-faq-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,255,209,0.35);
  color: var(--ncs-white);
  text-decoration: none;
  background: rgba(0,255,209,0.08);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.ncs-faq-cta:hover{
  transform: translateY(-1px);
  background: rgba(0,255,209,0.12);
  border-color: rgba(0,255,209,0.55);
}

:root{
  --ncs-teal: #00ffd1;
  --ncs-white: rgba(255,255,255,0.92);
  --ncs-muted: rgba(255,255,255,0.78);
  --ncs-border: rgba(255,255,255,0.10);
  --ncs-glass: rgba(0,0,0,0.28);
  --ncs-shadow: 0 18px 55px rgba(0,0,0,0.42);
}

.ncs-reveal-section{
  padding: 90px 0;
  position: relative;
}

.ncs-reveal-container{
  width: min(1180px, 92vw);
  margin: 0 auto;
}

.ncs-reveal-header{
  margin-bottom: 22px;
}

.ncs-reveal-kicker{
  margin: 0 0 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: .78rem;
  color: var(--ncs-muted);
}

.ncs-reveal-title{
  margin: 0 0 10px;
  color: var(--ncs-white);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
}

.ncs-reveal-subtitle{
  margin: 0;
  max-width: 62ch;
  color: var(--ncs-muted);
  line-height: 1.65;
}

/* The reveal card */
.ncs-reveal{
  position: relative;
  border-radius: 22px;
  border: 1px solid var(--ncs-border);
  background: var(--ncs-glass);
  backdrop-filter: blur(10px);
  box-shadow: var(--ncs-shadow);
  overflow: hidden;

  /* Big visual presence */
  height: clamp(360px, 52vw, 620px);
}

/* Images */
.ncs-reveal__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* Top layer clipped */
.ncs-reveal__top{
  position: absolute;
  inset: 0;
  width: 50%;            /* default position */
  overflow: hidden;
}

/* Divider line glow */
.ncs-reveal__line{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: rgba(0,255,209,0.85);
  box-shadow:
    0 0 18px rgba(0,255,209,0.55),
    0 0 40px rgba(0,255,209,0.18);
  transform: translateX(-1px);
}

/* Handle */
.ncs-reveal__handle{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 1px solid rgba(0,255,209,0.45);
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  box-shadow:
    0 0 0 8px rgba(0,255,209,0.08),
    0 10px 30px rgba(0,0,0,0.35);
  transform: translate(-50%, -50%);
  cursor: grab;
  display: grid;
  place-items: center;
}

.ncs-reveal__handle:active{
  cursor: grabbing;
}

.ncs-reveal__handle:focus{
  outline: none;
}

.ncs-reveal__handle:focus-visible{
  box-shadow:
    0 0 0 2px rgba(0,255,209,0.30),
    0 0 0 7px rgba(0,255,209,0.12),
    0 10px 30px rgba(0,0,0,0.35);
}

/* Arrows inside handle */
.ncs-reveal__arrows{
  position: relative;
  width: 28px;
  height: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  opacity: 0.95;
}

.ncs-reveal__arrow{
  width: 8px;
  height: 8px;
  border-top: 2px solid rgba(0,255,209,0.9);
  border-right: 2px solid rgba(0,255,209,0.9);
}

.ncs-reveal__arrow--left{
  transform: rotate(-135deg);
}

.ncs-reveal__arrow--right{
  transform: rotate(45deg);
}

/* Labels */
.ncs-reveal__label{
  position: absolute;
  bottom: 14px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.45);
  color: var(--ncs-white);
  font-size: .9rem;
  letter-spacing: .02em;
  backdrop-filter: blur(8px);
}

.ncs-reveal__label--left{
  left: 14px;
}

.ncs-reveal__label--right{
  right: 14px;
}

/* Small screens */
@media (max-width: 520px){
  .ncs-reveal{
    height: 360px;
  }
}

:root{
  --ncs-teal: #00ffd1;
  --ncs-white: rgba(255,255,255,0.92);
  --ncs-muted: rgba(255,255,255,0.78);
  --ncs-border: rgba(255,255,255,0.10);
  --ncs-glass: rgba(0,0,0,0.28);
  --ncs-shadow: 0 18px 55px rgba(0,0,0,0.42);
}

.ncs-proc-section{ padding: 90px 0; }
.ncs-proc-container{ width: min(1180px, 92vw); margin: 0 auto; }

.ncs-proc-header{ margin-bottom: 26px; }
.ncs-proc-kicker{
  margin: 0 0 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: .78rem;
  color: var(--ncs-muted);
}
.ncs-proc-title{
  margin: 0 0 10px;
  color: var(--ncs-white);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
}
.ncs-proc-subtitle{
  margin: 0;
  max-width: 70ch;
  color: var(--ncs-muted);
  line-height: 1.65;
}

/* Grid: 3 on top, 2 below (desktop) */
.ncs-proc-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 22px;
}

/* Force last row to be 2 centered cards */
.ncs-proc-grid > .ncs-proc-card:nth-child(4){
  grid-column: 1 / span 2; /* takes 2 columns */
}
.ncs-proc-grid > .ncs-proc-card:nth-child(5){
  grid-column: 3 / span 1; /* last column */
}

/* Alternative: better centering of last two cards */
@media (min-width: 1100px){
  .ncs-proc-grid{
    grid-template-columns: repeat(6, 1fr);
  }
  .ncs-proc-grid > .ncs-proc-card:nth-child(1){ grid-column: 1 / span 2; }
  .ncs-proc-grid > .ncs-proc-card:nth-child(2){ grid-column: 3 / span 2; }
  .ncs-proc-grid > .ncs-proc-card:nth-child(3){ grid-column: 5 / span 2; }
  .ncs-proc-grid > .ncs-proc-card:nth-child(4){ grid-column: 2 / span 2; }
  .ncs-proc-grid > .ncs-proc-card:nth-child(5){ grid-column: 4 / span 2; }
}

/* Card */
.ncs-proc-card{
  border-radius: 18px;
  border: 1px solid var(--ncs-border);
  background: var(--ncs-glass);
  backdrop-filter: blur(10px);
  box-shadow: var(--ncs-shadow);
  padding: 16px;
  min-height: 250px;
  transition: transform .18s ease, border-color .18s ease;
  position: relative;
  overflow: hidden;
}

.ncs-proc-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 18px;
  background: radial-gradient(500px 140px at 20% 0%, rgba(0,255,209,0.12), transparent 60%);
  pointer-events:none;
}

.ncs-proc-card:hover{
  transform: translateY(-2px);
  border-color: rgba(0,255,209,0.28);
}

/* Top row inside card */
.ncs-proc-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}

.ncs-proc-badge{
  font-size: .78rem;
  letter-spacing: .18em;
  color: rgba(255,255,255,0.72);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.35);
}

.ncs-proc-icon{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(0,255,209,0.22);
  background: rgba(0,255,209,0.06);
  display:grid;
  place-items:center;
  box-shadow: 0 0 26px rgba(0,255,209,0.12);
}

.ncs-proc-icon svg{
  width: 22px;
  height: 22px;
  stroke: rgba(0,255,209,0.92);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Text */
.ncs-proc-cardTitle{
  margin: 0 0 8px;
  color: var(--ncs-white);
  font-size: 1.06rem;
  font-weight: 800;
  position: relative;
  z-index: 1;
}

.ncs-proc-text{
  margin: 0 0 10px;
  color: var(--ncs-muted);
  line-height: 1.65;
  position: relative;
  z-index: 1;
}

.ncs-proc-list{
  margin: 0;
  padding-left: 16px;
  color: rgba(255,255,255,0.74);
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

.ncs-proc-list li{ margin: 6px 0; }

/* Footer CTA */
.ncs-proc-footer{
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
}
.ncs-proc-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,255,209,0.35);
  color: var(--ncs-white);
  text-decoration: none;
  background: rgba(0,255,209,0.08);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.ncs-proc-cta:hover{
  transform: translateY(-1px);
  background: rgba(0,255,209,0.12);
  border-color: rgba(0,255,209,0.55);
}

/* Responsive */
@media (max-width: 980px){
  .ncs-proc-grid{ grid-template-columns: 1fr; }
  .ncs-proc-grid > .ncs-proc-card:nth-child(4),
  .ncs-proc-grid > .ncs-proc-card:nth-child(5){
    grid-column: auto;
  }
  .ncs-proc-card{ min-height: unset; }
}

/* ===========================
   WORKS (CLEAN SYSTEM)
   =========================== */

.works-section{
  padding: 56px 0;
}

/* Grid */
.works-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:18px;
}

/* Card */
.work-card{
  position:relative;
  width:100%;
  aspect-ratio: 4 / 3;
  border-radius:24px;
  overflow:hidden;

  border:1px solid rgba(255,255,255,.10);
  background-color: rgba(255,255,255,.04);
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  padding:0;
  cursor:pointer;
  text-align:left;
  appearance:none;

  box-shadow: 0 24px 90px rgba(0,0,0,.40);
  transform: translateZ(0);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

/* Overlay readability + glow */
.work-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(420px 240px at 30% 25%, rgba(16,240,218,.14), transparent 60%),
    radial-gradient(420px 240px at 80% 65%, rgba(8,185,255,.10), transparent 65%),
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.72));
  opacity:.95;
}

/* Shine sweep */
.work-card::after{
  content:"";
  position:absolute;
  inset:-45%;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.12) 45%, transparent 60%);
  transform: translateX(-35%) rotate(10deg);
  opacity:0;
  transition: opacity .25s ease, transform .70s ease;
  pointer-events:none;
}

/* Content */
.work-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:16px;
  z-index:1;
}

.work-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.work-chip{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.30);
  color: rgba(255,255,255,.82);
  backdrop-filter: blur(10px);
  text-transform: lowercase;
}

.work-zoom{
  width:46px;
  height:46px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  line-height:1;
  color:rgba(255,255,255,.92);
  background: rgba(0,0,0,.38);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  opacity:.0;
  transition:.2s ease;
}

.work-bottom{
  background: rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  padding:10px 12px;
  backdrop-filter: blur(10px);
}

.work-bottom h3{
  margin:0 0 4px;
  font-size:16px;
  letter-spacing:-.2px;
  color: rgba(255,255,255,.92);
}

.work-bottom p{
  margin:0;
  font-size:12.5px;
  color: rgba(255,255,255,.70);
}

/* Hover */
.work-card:hover{
  transform: translateY(-2px);
  border-color: rgba(16,240,218,.22);
  box-shadow: 0 30px 120px rgba(0,0,0,.55);
}
.work-card:hover::after{
  opacity:1;
  transform: translateX(40%) rotate(10deg);
}
.work-card:hover .work-zoom{
  opacity:.92;
}

/* Focus */
.work-card:focus-visible{
  outline:2px solid rgba(16,240,218,.55);
  outline-offset:4px;
}

/* Responsive */
@media (max-width: 980px){
  .works-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .works-grid{ grid-template-columns: 1fr; }
}

/* ===========================
   WORKS LIGHTBOX (CLEAN)
   =========================== */

.works-lightbox[hidden]{ display:none !important; }

.works-lightbox{
  position:fixed;
  inset:0;
  z-index:999;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition: opacity .20s ease, visibility .20s ease;
}

.works-lightbox.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.works-lightbox-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(8px);
}

.works-lightbox-content{
  position:relative;
  z-index:1;
  width:min(1000px, calc(100vw - 36px));
  margin: 6vh auto 0;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(10,12,18,.65);
  box-shadow: 0 24px 100px rgba(0,0,0,.7);
  overflow:hidden;

  transform: translateY(8px) scale(.98);
  transition: transform .22s ease;

  cursor: zoom-in;
}

.works-lightbox.is-open .works-lightbox-content{
  transform: translateY(0) scale(1);
}

.works-lightbox-img{
  width:100%;
  height:auto;
  display:block;
  max-height: 82vh;
  object-fit: contain;
  background: rgba(0,0,0,.25);
  transform-origin:center center;
  transition: transform .18s ease;
}

.works-lightbox-close{
  position:absolute;
  top:10px;
  right:10px;
  width:42px;
  height:42px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.90);
  cursor:pointer;
  font-size:22px;
  line-height:1;
  z-index:2;
}
.works-lightbox-close:hover{ background: rgba(255,255,255,.12); }

/* Zoom state */
.works-lightbox-content.is-zoomed{
  cursor: zoom-out;
}
.works-lightbox-content.is-zoomed .works-lightbox-img{
  transform: scale(2);
  max-height:none;
}

/* =========================
   NCS Reveal (Before/After)
========================= */
.ncs-reveal-section{ padding:90px 0; position:relative; }
.ncs-reveal-container{ width:min(1180px, 92vw); margin:0 auto; }

.ncs-reveal-kicker{
  margin:0 0 10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:.78rem;
  color: var(--ncs-muted);
}
.ncs-reveal-title{
  margin:0 0 10px;
  color: var(--ncs-white);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
}
.ncs-reveal-subtitle{
  margin:0;
  max-width:62ch;
  color: var(--ncs-muted);
  line-height:1.65;
}

.ncs-reveal{
  position:relative;
  margin-top:22px;
  border-radius:22px;
  border:1px solid var(--ncs-border);
  background: var(--ncs-glass);
  backdrop-filter: blur(10px);
  box-shadow: var(--ncs-shadow);
  overflow:hidden;
  height: clamp(360px, 52vw, 620px);
}

.ncs-reveal__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}

.ncs-reveal__top{
  position:absolute;
  inset:0;
  width:50%;
  overflow:hidden;
}

.ncs-reveal__line{
  position:absolute;
  top:0; bottom:0;
  left:50%;
  width:2px;
  background: rgba(0,255,209,.85);
  box-shadow: 0 0 18px rgba(0,255,209,.55), 0 0 40px rgba(0,255,209,.18);
  transform: translateX(-1px);
}

.ncs-reveal__handle{
  position:absolute;
  top:50%;
  left:50%;
  width:52px; height:52px;
  border-radius:999px;
  border:1px solid rgba(0,255,209,.45);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  box-shadow: 0 0 0 8px rgba(0,255,209,.08), 0 10px 30px rgba(0,0,0,.35);
  transform: translate(-50%, -50%);
  cursor: grab;
  display:grid;
  place-items:center;
}
.ncs-reveal__handle:active{ cursor: grabbing; }

.ncs-reveal__arrows{ width:28px; height:14px; display:flex; justify-content:space-between; align-items:center; }
.ncs-reveal__arrow{ width:8px; height:8px; border-top:2px solid rgba(0,255,209,.9); border-right:2px solid rgba(0,255,209,.9); }
.ncs-reveal__arrow--left{ transform: rotate(-135deg); }
.ncs-reveal__arrow--right{ transform: rotate(45deg); }

.ncs-reveal__label{
  position:absolute;
  bottom:14px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.45);
  color: var(--ncs-white);
  font-size:.9rem;
  backdrop-filter: blur(8px);
}
.ncs-reveal__label--left{ left:14px; }
.ncs-reveal__label--right{ right:14px; }

@media (max-width:520px){
  .ncs-reveal{ height:360px; }
}

/* =========================
   FIX: WORK LIGHTBOX UNDER NAV + TOO HIGH
   (paste at the VERY END of your CSS)
   ========================= */

/* Define your nav height once (matches .nav-inner height) */
:root{
  --navH: 70px;
}

/* ---------- OLD lightbox (.lightbox) ---------- */
.lightbox{
  z-index: 2000; /* higher than .nav (1000) */
  display: flex;
  align-items: flex-start;
  justify-content: center;

  /* pushes content below the fixed nav */
  padding: calc(var(--navH) + 22px) 18px 28px;
}

.lightbox-content{
  margin: 0; /* remove 6vh auto 0 */
  width: min(980px, 100%);
  max-height: calc(100vh - (var(--navH) + 22px + 28px));
  overflow: auto;
  border-radius: 20px;
}

/* keep image inside the viewport */
.lightbox-content img{
  max-height: calc(100vh - (var(--navH) + 22px + 28px));
}

/* ---------- New clean system (.works-lightbox) ---------- */
.works-lightbox{
  z-index: 2000; /* higher than .nav (1000) */
  display: flex;
  align-items: flex-start;
  justify-content: center;

  padding: calc(var(--navH) + 22px) 18px 28px;
}

.works-lightbox-content{
  margin: 0; /* remove 6vh auto 0 */
  width: min(980px, 100%);
  max-height: calc(100vh - (var(--navH) + 22px + 28px));
  overflow: auto;
  border-radius: 20px;
}

.works-lightbox-img{
  max-height: calc(100vh - (var(--navH) + 22px + 28px));
}

/* Slightly smaller on mobile so it never hits the nav */
@media (max-width: 640px){
  .lightbox,
  .works-lightbox{
    padding: calc(var(--navH) + 14px) 14px 18px;
  }
  .lightbox-content,
  .works-lightbox-content{
    border-radius: 18px;
  }
}

/* =========================
   LIGHTBOX: NO SCROLL + FULL IMAGE VISIBLE
   (paste at the VERY END)
   ========================= */

/* --- OLD lightbox (.lightbox) --- */
.lightbox-content{
  overflow: hidden !important;                 /* NO scroll */
  max-height: calc(100vh - (var(--navH) + 22px + 28px)) !important;
}

.lightbox-content img{
  width: 100%;
  height: 100% !important;                     /* fill container height */
  max-height: 100% !important;                 /* never overflow */
  object-fit: contain !important;              /* show full image */
  background: rgba(0,0,0,.25);
}

/* disable zoom-scroll behavior (optional) */
.lightbox-content.is-zoomed{
  overflow: hidden !important;
}
.lightbox-content.is-zoomed img{
  transform: none !important;                  /* keeps it full, no zoom */
  max-height: 100% !important;
}

/* --- New clean system (.works-lightbox) --- */
.works-lightbox-content{
  overflow: hidden !important;                 /* NO scroll */
  max-height: calc(100vh - (var(--navH) + 22px + 28px)) !important;
}

.works-lightbox-img{
  width: 100%;
  height: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  background: rgba(0,0,0,.25);
}

/* disable zoom in clean system too (optional) */
.works-lightbox-content.is-zoomed{
  overflow: hidden !important;
  cursor: default !important;
}
.works-lightbox-content.is-zoomed .works-lightbox-img{
  transform: none !important;
  max-height: 100% !important;
}

/* =========================
   NCS Logo Carousel (BIGGER + NO BOXES)
   ========================= */
.nx-logo-carousel{
  padding: 56px 0 36px;
  position: relative;
}

.nx-logo-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}
.nx-logo-head h2{
  margin:0;
  font-size:28px;
  letter-spacing:-.6px;
}
.nx-logo-head p{
  margin:0;
  color: rgba(255,255,255,.66);
  max-width:60ch;
}

/* Shell now minimal (no big card) */
.nx-logo-shell{
  position:relative;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
  overflow:hidden;
}

/* Soft glow only */
.nx-logo-shell::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(420px 260px at 25% 35%, rgba(16,240,218,.16), transparent 60%),
    radial-gradient(420px 260px at 80% 60%, rgba(8,185,255,.12), transparent 65%);
  filter: blur(12px);
  opacity:.75;
  pointer-events:none;
}

/* viewport/track */
.nx-logo-viewport{ overflow:hidden; }
.nx-logo-track{
  display:flex;
  align-items:center;
  gap: 34px;                 /* more breathing room */
  padding: 22px 70px;        /* room for arrows */
  transition: transform .55s ease;
  will-change: transform;
}

/* Items: no boxes, just logo */
.nx-logo-item{
  flex: 0 0 auto;            /* width based on image */
  height: 100px;              /* strip height */
  display:flex;
  align-items:center;
  justify-content:center;
}

/* BIGGER logos */
.nx-logo-item img{
  height: 74px;              /* 🔥 bigger */
  width: auto;
  max-width: 260px;          /* keep long logos controlled */
  object-fit: contain;
  opacity: .92;
  filter: grayscale(1) contrast(1.06) brightness(1.05);
  transition: .2s ease;
}

.nx-logo-item:hover img{
  opacity: 1;
  filter: grayscale(0) contrast(1.08) brightness(1.08);
  transform: translateY(-1px);
}

/* arrows */
.nx-logo-btn{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:44px;
  height:44px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(5,7,11,.45);
  backdrop-filter: blur(10px);
  color: rgba(255,255,255,.90);
  cursor:pointer;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  box-shadow: 0 18px 70px rgba(0,0,0,.35);
  transition: .2s ease;
}
.nx-logo-btn:hover{
  border-color: rgba(16,240,218,.28);
  box-shadow: 0 18px 90px rgba(16,240,218,.10);
}
.nx-logo-btn.prev{ left: 10px; }
.nx-logo-btn.next{ right: 10px; }

/* dots */
.nx-logo-dots{
  margin-top: 12px;
  display:flex;
  justify-content:center;
  gap:8px;
}
.nx-logo-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.26);
  background: rgba(255,255,255,.10);
  cursor:pointer;
}
.nx-logo-dot.is-active{
  width:18px;
  background: rgba(16,240,218,.55);
  border-color: rgba(16,240,218,.65);
}

/* responsive tweaks */
@media (max-width: 980px){
  .nx-logo-track{ gap: 26px; padding: 18px 64px; }
  .nx-logo-item{ height: 84px; }
  .nx-logo-item img{ height: 66px; max-width: 220px; }
}
@media (max-width: 520px){
  .nx-logo-track{ gap: 22px; padding: 16px 58px; }
  .nx-logo-item{ height: 78px; }
  .nx-logo-item img{ height: 60px; max-width: 200px; }
}

/* =========================
   NCS Logo Marquee (infinite)
   ========================= */
.nx-logo-marquee{
  padding: 56px 0 36px;
}

.nx-logo-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}
.nx-logo-head h2{
  margin:0;
  font-size:28px;
  letter-spacing:-.6px;
}
.nx-logo-head p{
  margin:0;
  color: rgba(255,255,255,.66);
  max-width:60ch;
}

.nx-marquee{
  position:relative;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
  overflow:hidden;
}

/* glow */
.nx-marquee::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(420px 260px at 25% 35%, rgba(16,240,218,.16), transparent 60%),
    radial-gradient(420px 260px at 80% 60%, rgba(8,185,255,.12), transparent 65%);
  filter: blur(12px);
  opacity:.75;
  pointer-events:none;
}

/* soft fade edges */
.nx-marquee::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(90deg,
    rgba(5,7,11,.95),
    rgba(5,7,11,0) 14%,
    rgba(5,7,11,0) 86%,
    rgba(5,7,11,.95)
  );
  opacity:.9;
}

.nx-marquee-track{
  display:flex;
  align-items:center;
  gap: 40px;
  padding: 22px 26px;
  width: max-content; /* important for marquee */
  animation: nxMarquee 18s linear infinite;
}

.nx-logo{
  flex: 0 0 auto;
  height: 92px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.nx-logo img{
  height: 74px;         /* logo grande */
  width: auto;
  max-width: 260px;     /* controla logos muy largos */
  object-fit: contain;
  opacity: .92;
  filter: grayscale(1) contrast(1.06) brightness(1.05);
  transition: .2s ease;
}
.nx-logo img:hover{
  opacity: 1;
  filter: grayscale(0) contrast(1.08) brightness(1.08);
  transform: translateY(-1px);
}

/* pause on hover */
.nx-marquee:hover .nx-marquee-track{
  animation-play-state: paused;
}

/* responsive */
@media (max-width: 980px){
  .nx-marquee-track{ gap: 28px; padding: 18px 18px; }
  .nx-logo{ height: 84px; }
  .nx-logo img{ height: 66px; max-width: 220px; }
}
@media (max-width: 520px){
  .nx-marquee-track{ gap: 22px; padding: 16px 16px; }
  .nx-logo{ height: 78px; }
  .nx-logo img{ height: 60px; max-width: 200px; }
}

/* animation uses CSS var set by JS */
@keyframes nxMarquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(calc(-1 * var(--nx-marquee-distance, 600px))); }
}

/* accessibility */
@media (prefers-reduced-motion: reduce){
  .nx-marquee-track{ animation: none; }
}

/* =========================
   OFFERS (Nordic / ZigZag)
   ========================= */

.ncs-offers{
  padding: 90px 0;
  position: relative;
}

/* soft ambient glow behind section */
.ncs-offers::before{
  content:"";
  position:absolute;
  inset:-40px 0;
  background:
    radial-gradient(520px 280px at 15% 35%, rgba(16,240,218,.10), transparent 65%),
    radial-gradient(520px 280px at 85% 55%, rgba(8,185,255,.08), transparent 70%);
  filter: blur(12px);
  opacity:.9;
  pointer-events:none;
}

.ncs-offers-head{
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
}

.ncs-offers-kicker{
  margin: 0 0 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: .78rem;
  color: rgba(255,255,255,.68);
}

.ncs-offers-title{
  margin: 0 0 10px;
  font-size: clamp(1.9rem, 3.3vw, 2.6rem);
  letter-spacing: -.6px;
}

.ncs-offers-subtitle{
  margin: 0;
  max-width: 70;
  color: rgba(255,255,255,.68);
  line-height: 1.7;
}

/* rows */
.ncs-offers-rows{
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 36px;
  position: relative;
  z-index: 1;
}

/* each row - NOT boxed like services */
.ncs-offer-row{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 22px;
  align-items: center;
}

/* reverse zig-zag */
.ncs-offer-row.is-reverse{
  grid-template-columns: .95fr 1.05fr;
}
.ncs-offer-row.is-reverse .ncs-offer-media{ order: 2; }
.ncs-offer-row.is-reverse .ncs-offer-copy{ order: 1; }

.ncs-offer-media{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: 0 24px 90px rgba(0,0,0,.38);
}

.ncs-offer-media img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  min-height: 320px;
  filter: saturate(1.05) contrast(1.05);
}

/* vignette overlay */
.ncs-offer-media::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(900px 420px at 50% 35%, rgba(0,0,0,.10), rgba(0,0,0,.70));
  pointer-events:none;
}

.ncs-offer-copy{
  padding: 6px 0;
}

.ncs-offer-step{
  display:inline-block;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: rgba(255,255,255,.58);
  margin-bottom: 10px;
}

.ncs-offer-copy h3{
  margin: 0 0 10px;
  font-size: 28px;
  letter-spacing: -.6px;
}

.ncs-offer-copy p{
  margin: 0 0 12px;
  color: rgba(255,255,255,.70);
  line-height: 1.75;
  max-width: 70ch;
}

.ncs-offer-bullets{
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.ncs-offer-bullets li{
  position: relative;
  padding-left: 28px;
  color: rgba(255,255,255,.74);
  line-height: 1.55;
}

.ncs-offer-bullets li::before{
  content:"?";
  position:absolute;
  left:0;
  top:0;
  width: 18px;
  height: 18px;
  border-radius: 8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 12px;
  color: rgba(5,7,11,.95);
  background: linear-gradient(135deg, rgba(16,240,218,.95), rgba(8,185,255,.75));
  box-shadow: 0 10px 40px rgba(16,240,218,.16);
}

.ncs-offer-note{
  margin-top: 10px;
  font-size: 12.5px;
  color: rgba(255,255,255,.55);
}

/* CTA area */
.ncs-offers-cta{
  margin-top: 34px;
  display:flex;
  justify-content:center;
  position: relative;
  z-index: 1;
}

/* Green tech button (like your ad) */
.ncs-price-btn{
  position: relative;
  border: 1px solid rgba(0,255,170,.35);
  background: linear-gradient(135deg, rgba(0,255,170,.20), rgba(0,0,0,.35));
  border-radius: 22px;
  padding: 16px 22px;
  cursor: pointer;
  color: rgba(255,255,255,.92);
  box-shadow:
    0 24px 90px rgba(0,0,0,.50),
    0 0 0 1px rgba(0,255,170,.10);
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto;
  gap: 6px 14px;
  align-items: baseline;
  min-width: min(720px, 100%);
  overflow:hidden;
  transform: translateZ(0);
}

.ncs-price-btn__glow{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(340px 240px at var(--mx, 35%) var(--my, 50%),
    rgba(0,255,170,.22),
    transparent 60%);
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events:none;
}

.ncs-price-btn:hover{
  transform: translateY(-2px);
  border-color: rgba(0,255,170,.55);
  box-shadow:
    0 30px 120px rgba(0,0,0,.60),
    0 0 40px rgba(0,255,170,.10);
}
.ncs-price-btn:hover .ncs-price-btn__glow{ opacity: 1; }

.ncs-price-btn__label{
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}

.ncs-price-btn__price{
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  font-size: clamp(34px, 4.2vw, 56px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,.95);
  text-shadow: 0 0 28px rgba(0,255,170,.12);
  align-self: center;
}

.ncs-price-btn__old{
  grid-column: 3 / 4;
  grid-row: 1 / 2;
  font-size: 14px;
  color: rgba(255,255,255,.62);
  text-decoration: line-through;
  justify-self: end;
}

.ncs-price-btn__hint{
  grid-column: 1 / 4;
  grid-row: 2 / 3;
  font-size: 13px;
  color: rgba(255,255,255,.70);
}

/* subtle animated shine */
.ncs-price-btn::after{
  content:"";
  position:absolute;
  inset:-45%;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.16) 45%, transparent 60%);
  transform: translateX(-35%) rotate(10deg);
  opacity: 0.0;
  transition: opacity .25s ease, transform .70s ease;
  pointer-events:none;
}
.ncs-price-btn:hover::after{
  opacity: 0.9;
  transform: translateX(40%) rotate(10deg);
}

/* form wrapper spacing */
.ncs-offers-form{
  margin-top: 46px;
}

/* responsive */
@media (max-width: 980px){
  .ncs-offer-row,
  .ncs-offer-row.is-reverse{
    grid-template-columns: 1fr;
  }
  .ncs-offer-row.is-reverse .ncs-offer-media,
  .ncs-offer-row.is-reverse .ncs-offer-copy{
    order: initial;
  }
  .ncs-offer-media img{ min-height: 240px; }
  .ncs-offer-copy h3{ font-size: 24px; }
  .ncs-price-btn{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    text-align: center;
    gap: 6px;
  }
  .ncs-price-btn__label{ grid-column: 1; grid-row: 1; justify-self: center; }
  .ncs-price-btn__price{ grid-column: 1; grid-row: 2; }
  .ncs-price-btn__old{ grid-column: 1; grid-row: 3; justify-self: center; }
  .ncs-price-btn__hint{ grid-column: 1; grid-row: 4; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .ncs-price-btn,
  .ncs-price-btn::after{
    transition: none !important;
  }
}
/* =========================
   OFFERS (Nordic / ZigZag)
   ========================= */

.ncs-offers{
  padding: 90px 0;
  position: relative;
}

.ncs-offers::before{
  content:"";
  position:absolute;
  inset:-40px 0;
  background:
    radial-gradient(520px 280px at 15% 35%, rgba(16,240,218,.10), transparent 65%),
    radial-gradient(520px 280px at 85% 55%, rgba(8,185,255,.08), transparent 70%);
  filter: blur(12px);
  opacity:.9;
  pointer-events:none;
}

.ncs-offers-head{ margin-bottom: 28px; position: relative; z-index: 1; }
.ncs-offers-kicker{
  margin: 0 0 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: .78rem;
  color: rgba(255,255,255,.68);
}
.ncs-offers-title{
  margin: 0 0 10px;
  font-size: clamp(1.9rem, 3.3vw, 2.6rem);
  letter-spacing: -.6px;
}
.ncs-offers-subtitle{
  margin: 0;
  max-width: 70ch;
  color: rgba(255,255,255,.68);
  line-height: 1.7;
}

/* rows */
.ncs-offers-rows{
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 36px;
  position: relative;
  z-index: 1;
}

.ncs-offer-row{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 22px;
  align-items: center;
}

.ncs-offer-row.is-reverse{ grid-template-columns: .95fr 1.05fr; }
.ncs-offer-row.is-reverse .ncs-offer-media{ order: 2; }
.ncs-offer-row.is-reverse .ncs-offer-copy{ order: 1; }

.ncs-offer-media{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: 0 24px 90px rgba(0,0,0,.38);
}

.ncs-offer-media img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  min-height: 320px;
  filter: saturate(1.05) contrast(1.05);
}

.ncs-offer-media::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(900px 420px at 50% 35%, rgba(0,0,0,.10), rgba(0,0,0,.70));
  pointer-events:none;
}

.ncs-offer-copy{ padding: 6px 0; }
.ncs-offer-step{
  display:inline-block;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: rgba(255,255,255,.58);
  margin-bottom: 10px;
}

.ncs-offer-copy h3{
  margin: 0 0 10px;
  font-size: 28px;
  letter-spacing: -.6px;
}

.ncs-offer-copy p{
  margin: 0 0 12px;
  color: rgba(255,255,255,.70);
  line-height: 1.75;
  max-width: 70ch;
}

.ncs-offer-bullets{
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.ncs-offer-bullets li{
  position: relative;
  padding-left: 28px;
  color: rgba(255,255,255,.74);
  line-height: 1.55;
}

.ncs-offer-bullets li::before{
  content:"?";
  position:absolute;
  left:0;
  top:0;
  width: 18px;
  height: 18px;
  border-radius: 8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 12px;
  color: rgba(5,7,11,.95);
  background: linear-gradient(135deg, rgba(16,240,218,.95), rgba(8,185,255,.75));
  box-shadow: 0 10px 40px rgba(16,240,218,.16);
}

.ncs-offer-note{
  margin-top: 10px;
  font-size: 12.5px;
  color: rgba(255,255,255,.55);
}

/* =========================
   WOW PRICE HUD
   ========================= */

.ncs-offers-price{
  margin-top: 40px;
  position: relative;
  z-index: 1;
}

.ncs-priceHud{
  position: relative;
  border-radius: 22px;
  border: 1px solid rgba(0,255,170,.28);
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(12px);
  box-shadow:
    0 28px 120px rgba(0,0,0,.55),
    0 0 0 1px rgba(0,255,170,.08);
  overflow: hidden;

  display: grid;
  grid-template-columns: 1.1fr .9fr 1fr;
  gap: 16px;
  padding: 18px 18px;
}

/* animated grid / fx */
.ncs-priceHud__fx{
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(420px 260px at 18% 40%, rgba(0,255,170,.18), transparent 62%),
    radial-gradient(460px 280px at 82% 55%, rgba(16,240,218,.12), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.00));
  opacity:.9;
  pointer-events:none;
}

.ncs-priceHud::before{
  content:"";
  position:absolute;
  inset:-40%;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.14) 45%, transparent 60%);
  transform: translateX(-45%) rotate(10deg);
  opacity:.0;
  transition: opacity .25s ease, transform .90s ease;
  pointer-events:none;
}

.ncs-priceHud:hover::before{
  opacity:.85;
  transform: translateX(45%) rotate(10deg);
}

/* subtle scan line */
.ncs-priceHud::after{
  content:"";
  position:absolute;
  left:-20%;
  right:-20%;
  top: 0;
  height: 2px;
  background: rgba(0,255,170,.45);
  box-shadow: 0 0 18px rgba(0,255,170,.25);
  opacity:.35;
  animation: ncsScan 2.8s ease-in-out infinite;
  pointer-events:none;
}

@keyframes ncsScan{
  0%,100%{ transform: translateY(14px); opacity:.18; }
  50%{ transform: translateY(54px); opacity:.55; }
}

.ncs-priceHud__left,
.ncs-priceHud__main,
.ncs-priceHud__right{
  position: relative;
  z-index: 1;
}

.ncs-priceHud__tag{
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.80);
}

.ncs-priceHud__meta{
  margin-top: 10px;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}

.ncs-priceHud__chip{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.76);
}

/* price center (WOW) */
.ncs-priceHud__amount{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap: 6px;
  line-height: 1;
}

.ncs-priceHud__currency{
  font-size: 18px;
  color: rgba(255,255,255,.78);
  transform: translateY(-10px);
}

.ncs-priceHud__value{
  font-size: clamp(44px, 5vw, 68px);
  font-weight: 850;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,.96);
  text-shadow:
    0 0 22px rgba(0,255,170,.10),
    0 0 48px rgba(0,255,170,.08);
}

/* neon underline */
.ncs-priceHud__value{
  position: relative;
}
.ncs-priceHud__value::after{
  content:"";
  position:absolute;
  left: 8%;
  right: 8%;
  bottom: -10px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(0,255,170,0), rgba(0,255,170,.85), rgba(16,240,218,.45), rgba(0,255,170,0));
  box-shadow: 0 0 18px rgba(0,255,170,.18);
  opacity:.9;
}

.ncs-priceHud__sub{
  margin-top: 14px;
  display:flex;
  justify-content:center;
  gap: 12px;
  align-items:center;
}

.ncs-priceHud__was{
  color: rgba(255,255,255,.62);
  text-decoration: line-through;
  font-size: 13px;
}

.ncs-priceHud__save{
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,255,170,.22);
  background: rgba(0,255,170,.08);
  color: rgba(255,255,255,.86);
}

/* right area */
.ncs-priceHud__right{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-end;
  gap: 10px;
}

.ncs-priceHud__hint{
  font-size: 12.5px;
  color: rgba(255,255,255,.60);
}

/* small CTA button */
.ncs-miniCta{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  height: 40px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,255,170,.28);
  background: linear-gradient(135deg, rgba(0,255,170,.18), rgba(0,0,0,.25));
  color: rgba(255,255,255,.92);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow: 0 18px 70px rgba(0,0,0,.35);
}

.ncs-miniCta:hover{
  transform: translateY(-1px);
  border-color: rgba(0,255,170,.55);
  box-shadow: 0 18px 90px rgba(0,255,170,.12);
}

.ncs-miniCta__icon{
  width: 18px;
  height: 18px;
  border-right: 2px solid rgba(0,255,170,.90);
  border-bottom: 2px solid rgba(0,255,170,.90);
  transform: rotate(-45deg);
  filter: drop-shadow(0 0 10px rgba(0,255,170,.18));
}

/* responsive */
@media (max-width: 980px){
  .ncs-offer-row,
  .ncs-offer-row.is-reverse{
    grid-template-columns: 1fr;
  }
  .ncs-offer-row.is-reverse .ncs-offer-media,
  .ncs-offer-row.is-reverse .ncs-offer-copy{
    order: initial;
  }
  .ncs-offer-media img{ min-height: 240px; }
  .ncs-offer-copy h3{ font-size: 24px; }

  .ncs-priceHud{
    grid-template-columns: 1fr;
    text-align:center;
    gap: 14px;
  }
  .ncs-priceHud__right{
    align-items:center;
  }
  .ncs-priceHud__sub{
    flex-direction: column;
    gap: 8px;
  }
}
@media (prefers-reduced-motion: reduce){
  .ncs-priceHud::after{ animation: none !important; }
  .ncs-priceHud::before{ transition: none !important; }
  .ncs-miniCta{ transition: none !important; }
}

/* =========================
   OFFERS   PRICE DOCK (Integrated / Compact)
   ========================= */

.ncs-offers-price{
  margin-top: 40px;
  position: relative;
  z-index: 1;
  display:flex;
  justify-content:center;
}

.ncs-priceDock{
  position: relative;
  width: min(760px, 100%);
  border-radius: 24px;
  border: 1px solid rgba(0,255,170,.22);
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(12px);
  box-shadow:
    0 28px 120px rgba(0,0,0,.55),
    0 0 0 1px rgba(0,255,170,.07);
  overflow:hidden;
  padding: 16px 16px 14px;
}

/* ambient fx */
.ncs-priceDock__fx{
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 280px at 20% 40%, rgba(0,255,170,.18), transparent 62%),
    radial-gradient(520px 280px at 80% 60%, rgba(16,240,218,.12), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.00));
  opacity:.9;
  pointer-events:none;
}

/* header row (small, integrated) */
.ncs-priceDock__head{
  position: relative;
  z-index: 1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 4px 4px 10px;
}

.ncs-priceDock__tag{
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.80);
}

.ncs-priceDock__limited{
  font-size: 12px;
  color: rgba(255,255,255,.68);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  padding: 6px 10px;
  border-radius: 999px;
}

/* center clickable price core */
.ncs-priceDock__center{
  position: relative;
  z-index: 1;
  display:flex;
  justify-content:center;
  padding: 6px 0 12px;
  cursor:pointer;
  user-select:none;
}

.ncs-priceCore{
  position: relative;
  width: min(520px, 100%);
  border-radius: 22px;
  border: 1px solid rgba(0,255,170,.18);
  background: rgba(0,0,0,.22);
  overflow:hidden;
  padding: 18px 18px 14px;
  text-align:center;
  box-shadow: 0 18px 70px rgba(0,0,0,.35);
  transform: translateZ(0);
}

/* ring / hud glow */
.ncs-priceCore__ring{
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(260px 260px at var(--mx, 35%) var(--my, 50%),
      rgba(0,255,170,.22),
      transparent 60%);
  opacity: .0;
  transition: opacity .22s ease;
  pointer-events:none;
}

/* scan line */
.ncs-priceCore::after{
  content:"";
  position:absolute;
  left:-20%;
  right:-20%;
  top: 0;
  height: 2px;
  background: rgba(0,255,170,.45);
  box-shadow: 0 0 18px rgba(0,255,170,.25);
  opacity:.22;
  animation: ncsScan2 2.8s ease-in-out infinite;
  pointer-events:none;
}

@keyframes ncsScan2{
  0%,100%{ transform: translateY(14px); opacity:.16; }
  50%{ transform: translateY(52px); opacity:.45; }
}

.ncs-priceCore:hover{
  border-color: rgba(0,255,170,.40);
  box-shadow: 0 22px 90px rgba(0,255,170,.10), 0 26px 120px rgba(0,0,0,.55);
}
.ncs-priceCore:hover .ncs-priceCore__ring{ opacity: 1; }

/* amount */
.ncs-priceCore__amount{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap: 6px;
  line-height: 1;
}

.ncs-priceCore__currency{
  font-size: 18px;
  color: rgba(255,255,255,.78);
  transform: translateY(-10px);
}

.ncs-priceCore__value{
  font-size: clamp(50px, 6vw, 76px);
  font-weight: 860;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,.96);
  text-shadow:
    0 0 22px rgba(0,255,170,.12),
    0 0 50px rgba(0,255,170,.08);
  position: relative;
}

/* neon underline integrated */
.ncs-priceCore__value::after{
  content:"";
  position:absolute;
  left: 10%;
  right: 10%;
  bottom: -10px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(0,255,170,0),
    rgba(0,255,170,.85),
    rgba(16,240,218,.45),
    rgba(0,255,170,0)
  );
  box-shadow: 0 0 18px rgba(0,255,170,.18);
  opacity:.9;
}

/* integrated savings line */
.ncs-priceCore__subline{
  margin-top: 14px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}

.ncs-priceCore__was{
  color: rgba(255,255,255,.62);
  text-decoration: line-through;
  font-size: 13px;
}

.ncs-priceCore__dot{
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(0,255,170,.65);
  box-shadow: 0 0 16px rgba(0,255,170,.22);
  opacity:.9;
}

.ncs-priceCore__save{
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,255,170,.22);
  background: rgba(0,255,170,.08);
  color: rgba(255,255,255,.86);
}

/* footer */
.ncs-priceDock__foot{
  position: relative;
  z-index: 1;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.10);
  display:flex;
  flex-direction:column;
  gap: 12px;
  align-items:center;
}

.ncs-priceDock__chips{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  justify-content:center;
}

.ncs-priceChip{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.76);
}

/* small CTA (reuse your existing .ncs-miniCta if you already have it) */
.ncs-priceDock__hint{
  font-size: 12.5px;
  color: rgba(255,255,255,.60);
  margin-top: -4px;
}

/* responsive */
@media (max-width: 980px){
  .ncs-priceDock{ padding: 14px; }
  .ncs-priceCore{ padding: 16px 14px 12px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .ncs-priceCore::after{ animation:none !important; }
  .ncs-priceCore__ring{ transition:none !important; }
}

/* =========================
   OFFERS   PRICE DOCK (Integrated / Compact)
   ========================= */

.ncs-offers-price{
  margin-top: 40px;
  position: relative;
  z-index: 1;
  display:flex;
  justify-content:center;
}

.ncs-priceDock{
  position: relative;
  width: min(760px, 100%);
  border-radius: 24px;
  border: 1px solid rgba(0,255,170,.22);
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(12px);
  box-shadow:
    0 28px 120px rgba(0,0,0,.55),
    0 0 0 1px rgba(0,255,170,.07);
  overflow:hidden;
  padding: 16px 16px 14px;
}

/* ambient fx */
.ncs-priceDock__fx{
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 280px at 20% 40%, rgba(0,255,170,.18), transparent 62%),
    radial-gradient(520px 280px at 80% 60%, rgba(16,240,218,.12), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.00));
  opacity:.9;
  pointer-events:none;
}

/* header row (small, integrated) */
.ncs-priceDock__head{
  position: relative;
  z-index: 1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 4px 4px 10px;
}

.ncs-priceDock__tag{
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.80);
}

.ncs-priceDock__limited{
  font-size: 12px;
  color: rgba(255,255,255,.68);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  padding: 6px 10px;
  border-radius: 999px;
}

/* center clickable price core */
.ncs-priceDock__center{
  position: relative;
  z-index: 1;
  display:flex;
  justify-content:center;
  padding: 6px 0 12px;
  cursor:pointer;
  user-select:none;
}

.ncs-priceCore{
  position: relative;
  width: min(520px, 100%);
  border-radius: 22px;
  border: 1px solid rgba(0,255,170,.18);
  background: rgba(0,0,0,.22);
  overflow:hidden;
  padding: 18px 18px 14px;
  text-align:center;
  box-shadow: 0 18px 70px rgba(0,0,0,.35);
  transform: translateZ(0);
}

/* ring / hud glow */
.ncs-priceCore__ring{
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(260px 260px at var(--mx, 35%) var(--my, 50%),
      rgba(0,255,170,.22),
      transparent 60%);
  opacity: .0;
  transition: opacity .22s ease;
  pointer-events:none;
}

/* scan line */
.ncs-priceCore::after{
  content:"";
  position:absolute;
  left:-20%;
  right:-20%;
  top: 0;
  height: 2px;
  background: rgba(0,255,170,.45);
  box-shadow: 0 0 18px rgba(0,255,170,.25);
  opacity:.22;
  animation: ncsScan2 2.8s ease-in-out infinite;
  pointer-events:none;
}

@keyframes ncsScan2{
  0%,100%{ transform: translateY(14px); opacity:.16; }
  50%{ transform: translateY(52px); opacity:.45; }
}

.ncs-priceCore:hover{
  border-color: rgba(0,255,170,.40);
  box-shadow: 0 22px 90px rgba(0,255,170,.10), 0 26px 120px rgba(0,0,0,.55);
}
.ncs-priceCore:hover .ncs-priceCore__ring{ opacity: 1; }

/* amount */
.ncs-priceCore__amount{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap: 6px;
  line-height: 1;
}

.ncs-priceCore__currency{
  font-size: 18px;
  color: rgba(255,255,255,.78);
  transform: translateY(-10px);
}

.ncs-priceCore__value{
  font-size: clamp(50px, 6vw, 76px);
  font-weight: 860;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,.96);
  text-shadow:
    0 0 22px rgba(0,255,170,.12),
    0 0 50px rgba(0,255,170,.08);
  position: relative;
}

/* neon underline integrated */
.ncs-priceCore__value::after{
  content:"";
  position:absolute;
  left: 10%;
  right: 10%;
  bottom: -10px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(0,255,170,0),
    rgba(0,255,170,.85),
    rgba(16,240,218,.45),
    rgba(0,255,170,0)
  );
  box-shadow: 0 0 18px rgba(0,255,170,.18);
  opacity:.9;
}

/* integrated savings line */
.ncs-priceCore__subline{
  margin-top: 14px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}

.ncs-priceCore__was{
  color: rgba(255,255,255,.62);
  text-decoration: line-through;
  font-size: 13px;
}

.ncs-priceCore__dot{
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(0,255,170,.65);
  box-shadow: 0 0 16px rgba(0,255,170,.22);
  opacity:.9;
}

.ncs-priceCore__save{
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,255,170,.22);
  background: rgba(0,255,170,.08);
  color: rgba(255,255,255,.86);
}

/* footer */
.ncs-priceDock__foot{
  position: relative;
  z-index: 1;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.10);
  display:flex;
  flex-direction:column;
  gap: 12px;
  align-items:center;
}

.ncs-priceDock__chips{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  justify-content:center;
}

.ncs-priceChip{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.76);
}

/* small CTA (reuse your existing .ncs-miniCta if you already have it) */
.ncs-priceDock__hint{
  font-size: 12.5px;
  color: rgba(255,255,255,.60);
  margin-top: -4px;
}

/* responsive */
@media (max-width: 980px){
  .ncs-priceDock{ padding: 14px; }
  .ncs-priceCore{ padding: 16px 14px 12px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .ncs-priceCore::after{ animation:none !important; }
  .ncs-priceCore__ring{ transition:none !important; }
}

.ncs-offers-subtitle{
  max-width: none !important;
}

/* FIX: remove native bullets completely and force check icons */
ul.ncs-offer-bullets{
  list-style: none !important;
  list-style-type: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

ul.ncs-offer-bullets li{
  list-style: none !important;
  list-style-type: none !important;
  background: none !important;
  padding-left: 30px !important;
  position: relative;
}

ul.ncs-offer-bullets li::marker{
  content: "" !important;   /* kills native marker (the ??) */
}

ul.ncs-offer-bullets li::before{
  content: "?" !important;
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 18px;
  height: 18px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  color: rgba(5,7,11,.95);
  background: linear-gradient(135deg, rgba(16,240,218,.95), rgba(8,185,255,.75));
  box-shadow: 0 10px 40px rgba(16,240,218,.16);
}

/* FIX: remove native bullets completely and force check icons */
ul.ncs-offer-bullets{
  list-style: none !important;
  list-style-type: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

ul.ncs-offer-bullets li{
  list-style: none !important;
  list-style-type: none !important;
  background: none !important;
  padding-left: 30px !important;
  position: relative;
}

ul.ncs-offer-bullets li::marker{
  content: "" !important;   /* kills native marker (the ??) */
}

ul.ncs-offer-bullets li::before{
  content: "✓" !important;
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 18px;
  height: 18px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  color: rgba(5,7,11,.95);
  background: linear-gradient(135deg, rgba(16,240,218,.95), rgba(8,185,255,.75));
  box-shadow: 0 10px 40px rgba(16,240,218,.16);
}

/* HERO carousel full width (edge to edge) */
.hero .container{
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.hero-carousel,
.hc-viewport{
  width: 100% !important;
}

.hc-slide{
  width: 100% !important;
}

/* ===== PACKAGES: force 3 cards on desktop ===== */
.pricing-grid-3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 980px){
  .pricing-grid-3{ grid-template-columns: 1fr; }
}

/* ===== PACKAGES: Tech HUD upgrade ===== */
.price-card{
  position: relative;
  overflow: hidden;
}

/* stronger neon edge + ambient glow */
.price-card::before{
  opacity: .55; /* stronger edge */
}
.price-card::after{
  content:"";
  position:absolute;
  inset:-45%;
  background: radial-gradient(320px 260px at var(--mx, 35%) var(--my, 25%),
    rgba(16,240,218,.22),
    transparent 60%);
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events:none;
}

.price-card:hover::after{
  opacity: 1;
}

/* subtle shine sweep */
.price-card .price-head{
  position: relative;
  z-index: 1;
}
.price-card .price-head::after{
  content:"";
  position:absolute;
  inset:-60%;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.10) 50%, transparent 65%);
  transform: translateX(-35%) rotate(10deg);
  opacity: 0;
  transition: opacity .25s ease, transform .75s ease;
  pointer-events:none;
}
.price-card:hover .price-head::after{
  opacity: .9;
  transform: translateX(35%) rotate(10deg);
}

/* price pill more �tech� */
.price-amount .price{
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(16,240,218,.22);
  background: rgba(0,0,0,.22);
  box-shadow: 0 12px 40px rgba(16,240,218,.08);
}

/* CTA buttons: more neon and click feel */
.price-cta{
  position: relative;
  overflow: hidden;
}
.price-cta::after{
  content:"";
  position:absolute;
  inset:-60%;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.14) 50%, transparent 65%);
  transform: translateX(-40%) rotate(10deg);
  opacity: 0;
  transition: opacity .25s ease, transform .75s ease;
  pointer-events:none;
}
.price-cta:hover::after{
  opacity: .9;
  transform: translateX(40%) rotate(10deg);
}

.price-cta:active{
  transform: translateY(1px) scale(.99);
}

/* stronger solid button */
.price-cta.solid{
  border-color: rgba(16,240,218,.40);
  background: linear-gradient(135deg, rgba(16,240,218,.34), rgba(8,185,255,.12));
  box-shadow: 0 18px 70px rgba(16,240,218,.10);
}
.price-cta.solid:hover{
  box-shadow: 0 22px 90px rgba(16,240,218,.14);
}

/* =========================
   PROCESS: TECH TIMELINE
   ========================= */
.ncs-proc-timeline .ncs-tl{
  position: relative;
  margin-top: 26px;
  display: grid;
  gap: 18px;
  padding-left: 34px;
}

/* neon line */
.ncs-proc-timeline .ncs-tl::before{
  content:"";
  position:absolute;
  left: 14px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: rgba(0,255,209,.65);
  box-shadow: 0 0 18px rgba(0,255,209,.25);
  border-radius: 999px;
  opacity: .75;
}

.ncs-proc-timeline .ncs-tl-item{
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  align-items: start;
}

.ncs-proc-timeline .ncs-tl-dot{
  width: 50px;
  height: 50px;
  border-radius: 999px;
  border: 2px solid rgba(0,255,209,.45);
  background: rgba(0,0,0,.35);
  box-shadow: 0 0 0 6px rgba(0,255,209,.08);
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
}

.ncs-proc-timeline .ncs-tl-dot span{
  font-size: 20px;
  letter-spacing: .12em;
  color: rgba(255,255,255,.9);
  font-weight: 700;
}

.ncs-proc-timeline .ncs-tl-card{
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.26);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 55px rgba(0,0,0,.42);
  padding: 16px 16px 14px;
  position: relative;
  overflow: hidden;
}

/* subtle glow wash */
.ncs-proc-timeline .ncs-tl-card::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(420px 240px at 25% 30%, rgba(16,240,218,.12), transparent 60%),
    radial-gradient(420px 240px at 80% 65%, rgba(8,185,255,.10), transparent 65%);
  opacity:.85;
  pointer-events:none;
}

/* shine on hover */
.ncs-proc-timeline .ncs-tl-card::after{
  content:"";
  position:absolute;
  inset:-60%;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.10) 50%, transparent 65%);
  transform: translateX(-35%) rotate(10deg);
  opacity:0;
  transition: opacity .25s ease, transform .75s ease;
  pointer-events:none;
}
.ncs-proc-timeline .ncs-tl-card:hover::after{
  opacity:.9;
  transform: translateX(35%) rotate(10deg);
}

.ncs-proc-timeline .ncs-tl-card h3{
  margin: 0 0 8px;
  font-size: 18px;
  color: rgba(255,255,255,.92);
}
.ncs-proc-timeline .ncs-tl-card p{
  margin: 0 0 10px;
  color: rgba(255,255,255,.70);
  line-height: 1.65;
}
.ncs-proc-timeline .ncs-tl-card ul{
  margin: 0;
  padding-left: 18px;
  color: rgba(255,255,255,.76);
  line-height: 1.6;
}

/* responsive */
@media (max-width: 640px){
  .ncs-proc-timeline .ncs-tl{ padding-left: 28px; }
  .ncs-proc-timeline .ncs-tl::before{ left: 12px; }
}

/* =========================
   Process Timeline ZigZag
   ========================= */

.ncs-tl.ncs-tl-zig .ncs-tl-card{
  width: min(760px, 100%);
}

/* Move even steps slightly to the right for motion */
.ncs-tl.ncs-tl-zig .ncs-tl-item.is-zig .ncs-tl-card{
  transform: translateX(46px);
}

/* Keep the dot aligned with the main line */
.ncs-tl.ncs-tl-zig .ncs-tl-item.is-zig{
  grid-template-columns: 32px 1fr;
}

/* Smooth hover still works with transform */
.ncs-tl.ncs-tl-zig .ncs-tl-item.is-zig .ncs-tl-card:hover{
  transform: translateX(46px); /* keep position on hover */
}

/* Mobile: remove zigzag offset */
@media (max-width: 820px){
  .ncs-tl.ncs-tl-zig .ncs-tl-item.is-zig .ncs-tl-card{
    transform: none !important;
  }
}


/* =========================
   PROCESS: TECH CONTROL PANEL
   ========================= */

.ncs-proc-panel{ padding: 90px 0; }

.ncs-panel{
  margin-top: 22px;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
  align-items: stretch;
}

/* LEFT display */
.ncs-panel-display{
  position:relative;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.26);
  backdrop-filter: blur(10px);
  box-shadow: 0 24px 90px rgba(0,0,0,.40);
  padding: 18px 18px 16px;
  overflow:hidden;
}

/* neon frame */
.ncs-panel-display::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:26px;
  padding:1px;
  background: linear-gradient(135deg,
    rgba(16,240,218,0),
    rgba(16,240,218,.45),
    rgba(8,185,255,.18),
    rgba(16,240,218,0)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:.55;
  pointer-events:none;
}

/* spotlight */
.ncs-panel-display::after{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(420px 320px at 25% 20%, rgba(16,240,218,.14), transparent 60%);
  opacity:.75;
  pointer-events:none;
}

.ncs-panel-top{
  display:flex;
  gap: 10px;
  align-items:center;
  margin-bottom: 12px;
  position:relative;
  z-index:1;
}

.ncs-panel-badge{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  font-weight: 800;
  border: 1px solid rgba(16,240,218,.30);
  background: rgba(0,0,0,.28);
  box-shadow: 0 0 0 6px rgba(16,240,218,.08);
}

.ncs-panel-kicker{
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.70);
}

.ncs-panel-title{
  margin: 0 0 10px;
  font-size: 24px;
  letter-spacing: -.4px;
  position:relative;
  z-index:1;
}

.ncs-panel-text{
  margin:0 0 12px;
  color: rgba(255,255,255,.72);
  line-height: 1.7;
  max-width: 70ch;
  position:relative;
  z-index:1;
}

.ncs-panel-list{
  margin:0;
  padding-left: 18px;
  color: rgba(255,255,255,.78);
  line-height: 1.6;
  position:relative;
  z-index:1;
}

.ncs-panel-hint{
  margin-top: 14px;
  font-size: 12.5px;
  color: rgba(255,255,255,.60);
  border-top: 1px solid rgba(255,255,255,.10);
  padding-top: 12px;
  position:relative;
  z-index:1;
}

/* RIGHT steps */
.ncs-panel-steps{
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: 0 24px 90px rgba(0,0,0,.32);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.ncs-step{
  width:100%;
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 14px 14px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.82);
  cursor:pointer;
  text-align:left;
  transition: background .18s ease, transform .18s ease;
}

.ncs-step:last-child{ border-bottom: 0; }

.ncs-step-num{
  width: 36px;
  height: 36px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.78);
  font-weight: 800;
}

.ncs-step-name{
  font-weight: 600;
  letter-spacing: -.2px;
}

.ncs-step:hover{
  background: rgba(255,255,255,.06);
  transform: translateY(-1px);
}

.ncs-step.is-active{
  background: linear-gradient(135deg, rgba(16,240,218,.16), rgba(8,185,255,.06));
}

.ncs-step.is-active .ncs-step-num{
  border-color: rgba(16,240,218,.28);
  box-shadow: 0 0 0 6px rgba(16,240,218,.08);
}

/* Responsive */
@media (max-width: 980px){
  .ncs-panel{ grid-template-columns: 1fr; }
  .ncs-panel-text{ max-width: none; }
}

/* Packages: image thumbnail under CTAs */
.pkg-media{
  margin-top: 14px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  position: relative;
  box-shadow: 0 18px 70px rgba(0,0,0,.35);
}

/* subtle neon glow */
.pkg-media::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(420px 220px at 25% 30%, rgba(16,240,218,.14), transparent 60%),
    radial-gradient(420px 220px at 80% 60%, rgba(8,185,255,.10), transparent 65%);
  opacity:.9;
  pointer-events:none;
}

/* vignette for readability */
.pkg-media::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.55));
  pointer-events:none;
}

.pkg-media img{
  width: 100%;
  height: 150px;          /* ajusta tama�o aqu� */
  object-fit: cover;
  display: block;
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.02);
}

/* slightly smaller on mobile */
@media (max-width: 980px){
  .pkg-media img{ height: 140px; }
}

/* =========================
   SECTION TITLES � TECH WOW
   ========================= */

/* aplica a t�tulos de secciones comunes */
.section-head h2,
.ncs-proc-title,
.ncs-faq-title,
.ncs-reveal-title,
.about-copy h2{
  position: relative;
  display: inline-block;
  margin: 0;
  letter-spacing: -0.6px;

  /* gradient text */
  background: linear-gradient(90deg, rgba(255,255,255,.95), rgba(16,240,218,.85), rgba(8,185,255,.70));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* subtle glow */
  filter: drop-shadow(0 10px 30px rgba(16,240,218,.12));
}

/* HUD underline (starts hidden) */
.section-head h2::after,
.ncs-proc-title::after,
.ncs-faq-title::after,
.ncs-reveal-title::after,
.about-copy h2::after{
  content:"";
  position:absolute;
  left: 0;
  bottom: -10px;
  height: 3px;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(16,240,218,0), rgba(16,240,218,.95), rgba(8,185,255,.55), rgba(16,240,218,0));
  box-shadow: 0 10px 28px rgba(16,240,218,.18);
  opacity: .95;
  transition: width .7s ease;
}

/* small HUD "brackets" (corners) */
.section-head h2::before,
.ncs-proc-title::before,
.ncs-faq-title::before,
.ncs-reveal-title::before,
.about-copy h2::before{
  content:"";
  position:absolute;
  left:-14px;
  top: 55%;
  width: 10px;
  height: 10px;
  transform: translateY(-50%) rotate(45deg);
  border-left: 2px solid rgba(16,240,218,.55);
  border-bottom: 2px solid rgba(16,240,218,.55);
  opacity: 0;
  transition: opacity .45s ease;
  filter: drop-shadow(0 0 12px rgba(16,240,218,.18));
}

/* when the section becomes active (JS adds .is-inview) */
.is-inview .section-head h2::after,
.is-inview .ncs-proc-title::after,
.is-inview .ncs-faq-title::after,
.is-inview .ncs-reveal-title::after,
.is-inview .about-copy h2::after{
  width: 92%;
}

.is-inview .section-head h2::before,
.is-inview .ncs-proc-title::before,
.is-inview .ncs-faq-title::before,
.is-inview .ncs-reveal-title::before,
.is-inview .about-copy h2::before{
  opacity: 1;
}

/* optional: subtle �pulse� after it appears */
@keyframes titlePulse{
  0%,100%{ filter: drop-shadow(0 10px 30px rgba(16,240,218,.12)); }
  50%{ filter: drop-shadow(0 14px 40px rgba(16,240,218,.20)); }
}
.is-inview .section-head h2,
.is-inview .ncs-proc-title,
.is-inview .ncs-faq-title,
.is-inview .ncs-reveal-title,
.is-inview .about-copy h2{
  animation: titlePulse 2.6s ease-in-out 1;
}

/* accessibility */
@media (prefers-reduced-motion: reduce){
  .section-head h2::after,
  .ncs-proc-title::after,
  .ncs-faq-title::after,
  .ncs-reveal-title::after,
  .about-copy h2::after{
    transition:none;
    width: 92%;
  }
  .is-inview .section-head h2,
  .is-inview .ncs-proc-title,
  .is-inview .ncs-faq-title,
  .is-inview .ncs-reveal-title,
  .is-inview .about-copy h2{
    animation:none;
  }
}

/* =========================
   Footer Terms link (text only)
   ========================= */
.footer-terms{
  appearance:none;
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  cursor:pointer;

  color: rgba(255,255,255,.62);
  font: inherit;
  letter-spacing: .02em;
  transition: color .2s ease, text-shadow .2s ease;
}
.footer-terms:hover{
  color: rgba(255,255,255,.92);
  text-shadow: 0 0 18px rgba(16,240,218,.18);
}
.footer-terms:focus-visible{
  outline: 2px solid rgba(16,240,218,.45);
  outline-offset: 4px;
  border-radius: 10px;
}

/* =========================
   Terms Modal (Nordic Tech)
   ========================= */
.ncs-modal[hidden]{ display:none !important; }

.ncs-modal{
  position: fixed;
  inset: 0;
  z-index: 2500;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: calc(var(--navH, 70px) + 18px) 18px 22px;
}

.ncs-modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(10px);
}

.ncs-modal__panel{
  position: relative;
  width: min(980px, 100%);
  max-height: calc(100vh - (var(--navH, 70px) + 18px + 22px));
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,12,18,.72);
  box-shadow: 0 24px 120px rgba(0,0,0,.70);
  overflow: hidden;
}

/* Neon frame */
.ncs-modal__panel::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 22px;
  padding:1px;
  background: linear-gradient(135deg,
    rgba(16,240,218,0),
    rgba(16,240,218,.45),
    rgba(8,185,255,.18),
    rgba(16,240,218,0)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:.55;
  pointer-events:none;
}

/* Close X */
.ncs-modal__close{
  position:absolute;
  top:10px;
  right:10px;
  width:42px;
  height:42px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  cursor:pointer;
  font-size:22px;
  line-height:1;
  z-index:2;
}
.ncs-modal__close:hover{
  border-color: rgba(16,240,218,.28);
  background: rgba(16,240,218,.10);
}

/* Header */
.ncs-modal__head{
  padding: 18px 18px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.ncs-modal__title{
  margin: 0;
  font-size: 20px;
  letter-spacing: -.3px;
}
.ncs-modal__sub{
  margin: 6px 0 0;
  color: rgba(255,255,255,.62);
  font-size: 13px;
}

/* ? Scroll container */
.ncs-modal__body{
  padding: 16px 18px 18px;
  max-height: calc(100vh - (var(--navH, 70px) + 18px + 22px + 58px));
  overflow: auto;
}

/* =========================
   WOW TERMS LAYOUT (tech panels)
   ========================= */
.ncs-modal__body h4{
  margin: 18px 0 8px;
  font-size: 13.5px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255,255,255,.90);
}

/* The paragraph becomes a mini tech card */
.ncs-modal__body h4 + p{
  margin: 0 0 14px;
  padding: 12px 14px 12px 22px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.72);
  line-height: 1.75;
  position: relative;
  box-shadow: 0 16px 55px rgba(0,0,0,.28);
  overflow:hidden;
}

/* Neon accent line on the left */
.ncs-modal__body h4 + p::before{
  content:"";
  position:absolute;
  left: 10px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(16,240,218,.0), rgba(16,240,218,.70), rgba(8,185,255,.35), rgba(16,240,218,.0));
  box-shadow: 0 0 16px rgba(16,240,218,.14);
  opacity: .95;
}

/* Subtle glow wash inside card */
.ncs-modal__body h4 + p::after{
  content:"";
  position:absolute;
  inset:-35%;
  background: radial-gradient(360px 220px at 25% 20%, rgba(16,240,218,.12), transparent 60%);
  opacity:.9;
  pointer-events:none;
}

/* =========================
   Tech Scrollbar
   ========================= */


/* Firefox */
.ncs-scroll{
  scrollbar-width: thin;
  scrollbar-color: rgba(16,240,218,.65) rgba(255,255,255,.08);
}

/* Chrome/Edge */
.ncs-scroll::-webkit-scrollbar{
  width: 10px;
}
.ncs-scroll::-webkit-scrollbar-track{
  background: rgba(255,255,255,.06);
  border-left: 1px solid rgba(255,255,255,.08);
}
.ncs-scroll::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(16,240,218,.75), rgba(8,185,255,.45));
  border-radius: 999px;
  border: 2px solid rgba(10,12,18,.72);
  box-shadow: 0 0 18px rgba(16,240,218,.20);
}
.ncs-scroll::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(16,240,218,.95), rgba(8,185,255,.55));
}

/* =========================
   WEB SOLUTIONS / WEBSITES
   package-style section
   ========================= */

.websites-packages{
  padding: 56px 0;
}

.ws-pack-grid{
  margin-top: 18px;
}

.ws-site-card{
  min-height: unset;
}

.ws-site-media{
  margin-top: 0;
  margin-bottom: 14px;
}

.ws-site-media img{
  height: 190px;
  object-fit: cover;
}

.ws-site-copy{
  margin: 0 0 14px;
  color: rgba(255,255,255,.70);
  line-height: 1.7;
  min-height: 118px;
}

.ws-request-btn{
  margin-top: 16px;
  width: 100%;
}

@media (max-width: 980px){
  .ws-site-copy{
    min-height: unset;
  }

  .ws-site-media img{
    height: 170px;
  }
}

/* =========================
   GIFT CARDS SECTION
   cleaner / shorter cards
   ========================= */

.gift-cards-section{
  padding:56px 0;
}

.gc-grid{
  margin-top:18px;
  gap:18px;
}

.gc-card{
  min-height:unset;
  padding:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.gc-media{
  margin:0;
  border-radius:0;
  border:none;
  box-shadow:none;
}

.gc-media::before,
.gc-media::after{
  display:none;
}

.gc-media img{
  width:100%;
  height:180px;
  object-fit:cover;
  display:block;
}

.gc-card-body{
  padding:16px 16px 14px;
  display:grid;
  gap:12px;
}

.gc-card-body h3{
  margin:0;
  font-size:16px;
  letter-spacing:.05em;
  text-transform:uppercase;
  text-align:center;
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.gc-code-box{
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  text-align:center;
}

.gc-code-box span{
  display:block;
  margin-bottom:6px;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.58);
}

.gc-code-box strong{
  display:block;
  font-size:16px;
  letter-spacing:.08em;
  color:rgba(255,255,255,.94);
}

.gc-request-btn{
  width:100%;
  margin-top:0;
}

.gc-card-foot{
  margin-top:auto;
  padding:12px 16px 14px;
  border-top:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.58);
  font-size:12.5px;
  line-height:1.55;
  text-align:center;
  background:rgba(255,255,255,.02);
}

/* Redeem box */
.gc-redeem-box{
  margin-top:26px;
  padding:22px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  box-shadow:0 24px 80px rgba(0,0,0,.30);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.gc-redeem-kicker{
  display:inline-block;
  margin-bottom:8px;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.58);
}

.gc-redeem-copy h3{
  margin:0 0 8px;
  font-size:24px;
  letter-spacing:.04em;
}

.gc-redeem-copy p{
  margin:0;
  max-width:70ch;
  color:rgba(255,255,255,.68);
  line-height:1.7;
}

.gc-redeem-action{
  flex:0 0 auto;
}

.gc-redeem-btn{
  min-width:220px;
}

@media (max-width: 980px){
  .gc-media img{
    height:170px;
  }

  .gc-redeem-box{
    flex-direction:column;
    align-items:flex-start;
  }

  .gc-redeem-btn{
    min-width:unset;
    width:100%;
  }
}

/* =========================
   Gift Cards notes / rules
   ========================= */

.gc-note-block{
  margin-top:20px;
  display:grid;
  gap:14px;
}

.gc-note-main{
  margin:0;
  padding:14px 18px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.68);
  line-height:1.7;
  text-align:center;
}

.gc-rules{
  padding:18px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
}

.gc-rules-kicker{
  display:inline-block;
  margin-bottom:10px;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.58);
}

.gc-rules-list{
  margin:0;
  padding-left:18px;
  color:rgba(255,255,255,.62);
  line-height:1.7;
  display:grid;
  gap:8px;
}

/* remove old repeated footer if still exists */
.gc-card-foot{
  display:none;
}

/* =========================
   NORDIC VIKING LOADER
   animated version
   ========================= */

.nordic-loader{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(500px 300px at 50% 35%, rgba(16,240,218,.10), transparent 65%),
    rgba(5,7,11,.96);
  backdrop-filter: blur(8px);
  transition: opacity .45s ease, visibility .45s ease;
}

.nordic-loader.is-hidden{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.nordic-loader-inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  animation: loaderFloat 2.4s ease-in-out infinite;
}

.helmet-loader{
  position: relative;
  width: 180px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.helmet-glow{
  position: absolute;
  inset: 10px;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(16,240,218,.28) 0%, rgba(8,185,255,.14) 35%, transparent 70%);
  filter: blur(18px);
  animation: nordicPulse 2s ease-in-out infinite;
}

.helmet-svg{
  width: 180px;
  height: auto;
  filter: drop-shadow(0 0 18px rgba(16,240,218,.18));
}

/* Base */
.horn,
.helmet-body,
.helmet-plate,
.helmet-eye{
  fill: transparent;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* Draw animation */
.horn,
.helmet-body,
.helmet-plate{
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation:
    drawLine 1.4s ease forwards,
    lineGlow 2.2s ease-in-out infinite 1.4s;
}

.horn-left{ animation-delay: .05s, 1.4s; }
.horn-right{ animation-delay: .15s, 1.4s; }

.helmet-body{
  stroke: rgba(16,240,218,.9);
  stroke-width: 3.5;
  animation-delay: .25s, 1.4s;
}

.horn{
  stroke: rgba(16,240,218,.72);
  stroke-width: 3;
}

.helmet-plate{
  stroke: rgba(8,185,255,.78);
  stroke-width: 3;
  animation-delay: .4s, 1.4s;
}

/* Eyes */
.helmet-eye{
  fill: rgba(16,240,218,.88);
  stroke: rgba(16,240,218,.35);
  stroke-width: 1.3;
  opacity: 0;
  animation:
    eyeAppear .45s ease forwards .9s,
    eyePulse 1.8s ease-in-out infinite 1.35s;
}

.loader-text{
  margin: 0;
  font-size: 14px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  text-shadow: 0 0 16px rgba(16,240,218,.14);
  opacity: 0;
  transform: translateY(8px);
  animation: textRise .6s ease forwards .95s;
}

/* Animations */
@keyframes drawLine{
  to{ stroke-dashoffset: 0; }
}

@keyframes lineGlow{
  0%,100%{
    filter: brightness(.95);
    stroke-opacity: .82;
  }
  50%{
    filter: brightness(1.15);
    stroke-opacity: 1;
  }
}

@keyframes eyeAppear{
  to{
    opacity: 1;
  }
}

@keyframes eyePulse{
  0%,100%{
    opacity: .82;
    transform: scale(1);
    filter: drop-shadow(0 0 2px rgba(16,240,218,.25));
  }
  50%{
    opacity: 1;
    transform: scale(1.06);
    filter: drop-shadow(0 0 8px rgba(16,240,218,.55));
  }
}

@keyframes nordicPulse{
  0%,100%{ transform: scale(.96); opacity: .55; }
  50%{ transform: scale(1.04); opacity: 1; }
}

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

@keyframes textRise{
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce){
  .nordic-loader-inner,
  .helmet-glow,
  .horn,
  .helmet-body,
  .helmet-plate,
  .helmet-eye,
  .loader-text{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
}

/* =========================
   NORDIC HERO CINEMATIC
   functional + taller
   ========================= */

.nordic-hero-cinematic{
  position: relative;
  padding: 0;
}

.nhc-shell{
  position: relative;
  width: 100%;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: #05070b;
}

.nhc-viewport{
  position: relative;
  width: 100%;
  height: min(92vh, 1100px);
  min-height: 760px;
  overflow: hidden;
}

.nhc-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .65s ease;
}

.nhc-slide.is-active{
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

.nhc-media{
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.nhc-media img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* overlay oscuro elegante */
.nhc-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(5,7,11,.74) 0%, rgba(5,7,11,.26) 42%, rgba(5,7,11,.62) 100%),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.18));
}

/* capa tech */
.nhc-grid{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(700px 280px at 22% 24%, rgba(16,240,218,.08), transparent 60%),
    radial-gradient(680px 260px at 82% 76%, rgba(8,185,255,.06), transparent 65%);
}

.nhc-grid::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.14;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: linear-gradient(90deg, rgba(0,0,0,.75), transparent 80%);
}

/* esquinas HUD */
.nhc-corners{
  position: absolute;
  z-index: 2;
  width: 120px;
  height: 120px;
  pointer-events: none;
  opacity: .7;
}

.nhc-corners-left{
  left: 36px;
  top: 36px;
  border-top: 1px solid rgba(16,240,218,.24);
  border-left: 1px solid rgba(16,240,218,.24);
  box-shadow: -10px -10px 24px rgba(16,240,218,.05);
}

.nhc-corners-right{
  right: 36px;
  bottom: 118px;
  border-right: 1px solid rgba(8,185,255,.20);
  border-bottom: 1px solid rgba(8,185,255,.20);
  box-shadow: 10px 10px 24px rgba(8,185,255,.05);
}

/* contenido */
.nhc-content{
  position: relative;
  z-index: 3;
  max-width: 1180px;
  margin: 0 auto;
  height: 100%;
  padding: 138px 42px 170px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.nhc-kicker{
  display: inline-flex;
  margin-bottom: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.24);
  color: rgba(255,255,255,.78);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 11px;
}

/* =========================
   HERO CONTENT STABLE LAYOUT
   ========================= */

.nhc-content{
  position: relative;
  z-index: 3;
  max-width: 1180px;
  margin: 0 auto;
  height: 100%;
  padding: 120px 42px 170px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

/* caja interna estable */
.nhc-copy{
  width: min(760px, 100%);
  display: grid;
  grid-template-rows: auto minmax(250px, auto) auto auto;
  gap: 16px;
  align-content: center;
}

.nhc-kicker{
  display: inline-flex;
  width: max-content;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.24);
  color: rgba(255,255,255,.78);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 11px;
}

.nhc-content h1{
  margin: 0;
  max-width: 10ch;
  font-size: clamp(50px, 5.8vw, 88px);
  line-height: .96;
  letter-spacing: -.05em;
  color: rgba(255,255,255,.96);
  text-shadow: 0 10px 30px rgba(0,0,0,.25);
  text-wrap: balance;
}

.nhc-content p{
  margin: 0;
  max-width: 58ch;
  color: rgba(255,255,255,.74);
  line-height: 1.7;
  font-size: 16px;
  min-height: 56px;
}

.nhc-actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 0;
}

.nhc-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 16px;
  text-decoration: none;
  font-weight: 600;
  transition: .2s ease;
}

.nhc-btn-primary{
  color: rgba(255,255,255,.94);
  border: 1px solid rgba(16,240,218,.30);
  background: linear-gradient(135deg, rgba(16,240,218,.22), rgba(8,185,255,.08));
  box-shadow: 0 18px 70px rgba(16,240,218,.10);
}

.nhc-btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 22px 80px rgba(16,240,218,.14);
}

.nhc-btn-secondary{
  color: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}

.nhc-btn-secondary:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.09);
}

/* flechas */
.nhc-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(5,7,11,.28);
  backdrop-filter: blur(10px);
  color: rgba(255,255,255,.90);
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
  transition: .2s ease;
}

.nhc-prev{ left: 18px; }
.nhc-next{ right: 18px; }

.nhc-arrow:hover{
  border-color: rgba(16,240,218,.28);
  background: rgba(16,240,218,.08);
  box-shadow: 0 18px 80px rgba(16,240,218,.10);
}

/* barra inferior */
.nhc-bottom-bar{
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 4;
  width: min(1240px, calc(100% - 36px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(5,7,11,.42);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 60px rgba(0,0,0,.28);
}

.nhc-bottom-left{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nhc-mini-label{
  color: rgba(255,255,255,.92);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.nhc-mini-text{
  color: rgba(255,255,255,.58);
  font-size: 13px;
}

.nhc-dots{
  display: flex;
  gap: 10px;
  align-items: center;
}

.nhc-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
  cursor: pointer;
  transition: .2s ease;
}

.nhc-dot.is-active{
  width: 26px;
  background: linear-gradient(90deg, rgba(16,240,218,.95), rgba(8,185,255,.65));
  border-color: rgba(16,240,218,.55);
  box-shadow: 0 0 18px rgba(16,240,218,.14);
}

/* responsive */
@media (max-width: 980px){
  .nhc-viewport{
    height: 82vh;
    min-height: 640px;
  }

  .nhc-content{
    padding: 124px 24px 150px;
  }

  .nhc-content h1{
    max-width: 12ch;
  }

  .nhc-corners-left{
    left: 18px;
    top: 18px;
  }

  .nhc-corners-right{
    right: 18px;
    bottom: 110px;
  }
}

@media (max-width: 760px){
  .nhc-viewport{
    height: 78vh;
    min-height: 580px;
  }

  .nhc-content{
    padding: 110px 18px 140px;
  }

  .nhc-content h1{
    font-size: clamp(38px, 10vw, 58px);
    max-width: 13ch;
  }

  .nhc-content p{
    font-size: 14px;
    line-height: 1.65;
  }

  .nhc-arrow{
    width: 46px;
    height: 46px;
    border-radius: 16px;
    font-size: 28px;
  }

  .nhc-bottom-bar{
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* =========================
   HERO TEXT FIX
   compact slides
   ========================= */

.nhc-content h1{
  text-wrap: balance;
}

/* =========================
   HERO COMPACT SLIDES
   ========================= */

.nhc-slide-compact .nhc-copy{
  grid-template-rows: auto minmax(210px, auto) auto auto;
}

.nhc-slide-compact .nhc-content h1{
  max-width: 9.5ch;
  font-size: clamp(42px, 4.8vw, 72px);
  line-height: .98;
}

.nhc-slide-compact .nhc-content p{
  max-width: 52ch;
}

/* opcional: baja un poco el bloque en compactos */
.nhc-slide-compact .nhc-content{
  padding-top: 150px;
}

@media (max-width: 980px){
  .nhc-slide-compact .nhc-content h1{
    max-width: 10.5ch;
    font-size: clamp(36px, 7vw, 56px);
  }

  .nhc-slide-compact .nhc-content{
    padding-top: 130px;
  }
}

@media (max-width: 760px){
  .nhc-slide-compact .nhc-content h1{
    max-width: 12ch;
    font-size: clamp(32px, 9vw, 46px);
    line-height: 1.02;
  }

  .nhc-slide-compact .nhc-content p{
    max-width: 100%;
  }
}

/* =========================
   HERO POSITION FIX
   ========================= */

.nordic-hero-cinematic{
  position: relative;
  padding-top: 70px; /* altura del nav */
}

.nhc-shell{
  margin-top: 0;
}

.nhc-viewport{
  position: relative;
  width: 100%;
  height: min(82vh, 920px);
  min-height: 800px;
  overflow: hidden;
}

@media (max-width: 980px){
  .nordic-hero-cinematic{
    padding-top: 70px;
  }

  .nhc-viewport{
    height: 76vh;
    min-height: 560px;
  }

  .nhc-content{
    padding: 105px 24px 145px;
  }

  .nhc-copy{
    width: 100%;
    grid-template-rows: auto minmax(180px, auto) auto auto;
  }

  .nhc-content h1{
    font-size: clamp(40px, 8vw, 62px);
    max-width: 11ch;
  }

  .nhc-slide-compact .nhc-content h1{
    font-size: clamp(36px, 7vw, 54px);
    max-width: 11ch;
  }
}

@media (max-width: 760px){
  .nordic-hero-cinematic{
    padding-top: 70px;
  }

  .nhc-viewport{
    height: 72vh;
    min-height: 500px;
  }

  .nhc-content{
    padding: 90px 18px 136px;
  }

  .nhc-copy{
    grid-template-rows: auto minmax(150px, auto) auto auto;
    gap: 14px;
  }

  .nhc-content h1{
    font-size: clamp(34px, 10vw, 48px);
    max-width: 12ch;
    line-height: 1.02;
  }

  .nhc-content p{
    font-size: 14px;
    line-height: 1.6;
    min-height: auto;
  }
}

/* =========================
   HERO DOTS ONLY
   ========================= */

.nhc-bottom-bar{
  display:none !important;
}

.nhc-dots-floating{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:26px;
  z-index:5;
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(5,7,11,.28);
  backdrop-filter:blur(10px);
  box-shadow:0 18px 50px rgba(0,0,0,.22);
}

.nhc-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);
  cursor:pointer;
  transition:.2s ease;
}

.nhc-dot.is-active{
  width:26px;
  background:linear-gradient(90deg, rgba(16,240,218,.95), rgba(8,185,255,.65));
  border-color:rgba(16,240,218,.55);
  box-shadow:0 0 18px rgba(16,240,218,.14);
}

@media (max-width: 760px){
  .nhc-dots-floating{
    right:18px;
    bottom:18px;
    padding:8px 10px;
  }
}

.nhc-copy h1{
  font-size: clamp(60px, 4vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  max-width: 13ch;
  margin: 10px 0 14px;
}

/* =========================
   SECTION DIVIDER
   ========================= */

.section-divider{
  width: min(var(--max), calc(100% - 36px)); /* mismo ancho visual que .container */
  height: 1px;
  margin: 0 auto;
  position: relative;

  background: linear-gradient(
    90deg,
    rgba(16,240,218,0) 0%,
    rgba(16,240,218,.22) 10%,
    rgba(16,240,218,.95) 50%,
    rgba(8,185,255,.32) 75%,
    rgba(16,240,218,0) 100%
  );

  box-shadow:
    0 0 10px rgba(16,240,218,.28),
    0 0 22px rgba(16,240,218,.14);
}

.section-divider::before{
  content:"";
  position:absolute;
  inset:-6px 0;
  background: inherit;
  filter: blur(8px);
  opacity: .9;
  pointer-events: none;
}

.section-divider::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:120px;
  height:14px;
  transform:translate(-50%, -50%);
  background: radial-gradient(
    ellipse at center,
    rgba(16,240,218,.45) 0%,
    rgba(16,240,218,.14) 45%,
    rgba(16,240,218,0) 75%
  );
  filter: blur(6px);
  pointer-events:none;
}