/* ========== Base ========== */
:root{
  --bg0:#05080f;
  --bg1:#070b14;
  --bg2:#0b1424;
  --text:#e8eef8;
  --muted:#b9c7de;
  --muted2:#7f96bb;
  --line:rgba(255,255,255,.08);
  --line2:rgba(255,255,255,.05);
  --cyan:#5ad6ff;
  --blue:#2f7dff;
  --glow:rgba(90,214,255,.18);
  --shadow:rgba(0,0,0,.55);
  --radius:18px;
  --bg-scale: 1.02;
  --bg-x: 0px;
  --bg-y: 0px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  background: var(--bg0);
  color: var(--text);
  overflow-x:hidden;
  min-height:100vh;
  opacity:1;
  transition:opacity .35s ease;
}
body.ready{opacity:1;}
body.loading{overflow-x:hidden;}

a{color:inherit; text-decoration:none;}
.wrap{width:min(1120px, calc(100% - 40px)); margin:0 auto;}

/* ========== Loading overlay ========== */
.loader{
  position:fixed;
  inset:0;
  z-index:500;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  background:
    radial-gradient(circle at 50% 40%, rgba(90,214,255,.18), transparent 32rem),
    linear-gradient(180deg, #05080f, #07101d);
  transition: opacity .55s ease, visibility .55s ease, transform .55s ease;
  pointer-events:none;
}
.loader.hide{
  opacity:0;
  visibility:hidden;
  transform: scale(1.015);
}
.loader__mark{
  width:72px;
  height:72px;
  position:relative;
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  box-shadow: 0 30px 90px rgba(0,0,0,.45);
}
.loader__mark span{
  position:absolute;
  inset:14px;
  border-radius: 18px;
  border:1px solid rgba(90,214,255,.35);
  animation: loaderRing 1.2s ease-in-out infinite;
}
.loader__mark span:nth-child(2){inset:22px; animation-delay:.16s;}
.loader__mark span:nth-child(3){inset:30px; animation-delay:.32s;}
.loader__title{
  font-weight:900;
  letter-spacing:.18em;
}
.loader__text{
  margin-top:6px;
  color: rgba(185,199,222,.82);
}
@keyframes loaderRing{
  0%,100%{transform: scale(.82); opacity:.35}
  50%{transform: scale(1.15); opacity:1}
}

/* ========== Background ========== */
#fx{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
}

.bg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(1200px 700px at 50% 35%, rgba(60,140,255,.20), transparent 60%),
    radial-gradient(900px 500px at 20% 60%, rgba(90,214,255,.12), transparent 65%),
    radial-gradient(900px 500px at 80% 62%, rgba(90,214,255,.10), transparent 65%),
    linear-gradient(180deg, #05080f 0%, #070b14 45%, #05080f 100%);
  transform: translate3d(var(--bg-x), var(--bg-y), 0) scale(var(--bg-scale));
  will-change: transform;
}

.bg::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: url("assets/bg.webp");
  background-size: cover;
  background-position: center;
  opacity:.32;
  filter: saturate(1.05) contrast(1.05);
  transform: translate3d(calc(var(--bg-x) * -0.35), calc(var(--bg-y) * -0.35), 0) scale(var(--bg-scale));
  animation: bgDrift 14s ease-in-out infinite;
}

.vignette{
  position:fixed;
  inset:-2px;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(circle at center, transparent 40%, rgba(0,0,0,.55) 100%);
  mix-blend-mode: multiply;
}

/* ========== Top nav ========== */
.top{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(5,8,15,.70), rgba(5,8,15,.25));
  border-bottom:1px solid rgba(255,255,255,.05);
}
.top__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  gap:18px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:650;
  letter-spacing:.2px;
}
.brand__dot{
  width:10px; height:10px; border-radius:999px;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  box-shadow: 0 0 24px rgba(90,214,255,.45);
}
.brand__name{opacity:.95}

.nav{display:flex; gap:18px; align-items:center;}
.nav__a{
  color: rgba(232,238,248,.82);
  font-size:.95rem;
  padding:8px 10px;
  border-radius: 10px;
  transition: background .25s ease, transform .25s ease, opacity .25s ease;
}
.nav__a:hover{
  background: rgba(255,255,255,.05);
  transform: translateY(-1px);
}
.nav__a.is-current{
  color:#fff;
  background: rgba(90,214,255,.10);
  box-shadow: inset 0 0 0 1px rgba(90,214,255,.16), 0 14px 28px rgba(0,0,0,.20);
}

[data-depth-panel]{
  --spot-x: 50%;
  --spot-y: 50%;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
[data-depth-panel]::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(240px circle at var(--spot-x) var(--spot-y), rgba(255,255,255,.16), transparent 62%);
  opacity:0;
  transition: opacity .25s ease;
}
.desktop60 [data-depth-panel]:hover::after{
  opacity:.72;
}
.desktop60 [data-depth-panel] > img{
  transition: transform .55s cubic-bezier(.16,1,.3,1);
}
.desktop60 [data-depth-panel]:hover > img{
  transform: scale(1.04);
}

/* ========== Buttons ========== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 18px;
  border-radius: 14px;
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(11,20,36,.85), rgba(7,11,20,.55));
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  position:relative;
  overflow:hidden;
}
.btn::after{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at 30% 30%, rgba(90,214,255,.28), transparent 60%);
  opacity:0;
  transition: opacity .25s ease;
}
.btn:hover{
  transform: translateY(-2px);
  border-color: rgba(90,214,255,.25);
  box-shadow: 0 26px 60px rgba(0,0,0,.45);
}
.btn:hover::after{opacity:1}
.btn--ghost{
  background: transparent;
  box-shadow:none;
}
.btn--small{padding:10px 14px; border-radius:12px; font-size:.95rem}

/* white buttons in contact */
.btn--white{
  color: #fff;
  border-color: rgba(255,255,255,.14);
}
.btn--white.btn--ghost{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}

/* ========== Hero ========== */
.hero{
  position:relative;
  z-index:2;
  padding: 86px 0 56px;
}
.hero__inner{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 36px;
  align-items:center;
}

.kicker{
  display:flex; align-items:center; gap:12px;
  color: rgba(232,238,248,.78);
  margin-bottom: 18px;
}
.pill{
  font-size:.78rem;
  padding:8px 12px;
  border-radius:999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(5,8,15,.45);
  animation: floatY 6s ease-in-out infinite;
}
.pulse-dot{
  width:10px; height:10px; border-radius:999px;
  background: var(--cyan);
  box-shadow: 0 0 0 0 rgba(90,214,255,.55);
  animation: pulse 1.6s ease infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(90,214,255,.55)}
  70%{box-shadow:0 0 0 14px rgba(90,214,255,0)}
  100%{box-shadow:0 0 0 0 rgba(90,214,255,0)}
}

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

@keyframes titleGlow{
  0%,100%{text-shadow: 0 0 0 rgba(90,214,255,0)}
  50%{text-shadow: 0 10px 40px rgba(90,214,255,.18)}
}

@keyframes gradShift{
  0%{background-position: 0% 50%}
  50%{background-position: 100% 50%}
  100%{background-position: 0% 50%}
}

@keyframes bgDrift{
  0%,100%{background-position: 50% 50%}
  50%{background-position: 52% 46%}
}


.h1{
  font-size: clamp(2.3rem, 3.6vw, 3.6rem);
  line-height:1.05;
  letter-spacing: .2px;
  animation: titleGlow 5.5s ease-in-out infinite;
}
.grad{
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  background-size: 200% 200%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation: gradShift 6s ease-in-out infinite;
}
.shine{
  position:relative;
  display:inline-block;
}
.shine::after{
  content:"";
  position:absolute;
  inset:-4px -10px;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.18) 45%, transparent 70%);
  transform: translateX(-120%);
  animation: shine 2.6s ease infinite;
  pointer-events:none;
}
@keyframes shine{
  0%{transform: translateX(-120%)}
  60%{transform: translateX(120%)}
  100%{transform: translateX(120%)}
}

.lead{
  margin-top: 18px;
  max-width: 56ch;
  color: rgba(185,199,222,.92);
  font-size: 1.05rem;
}
.cta{margin-top:22px; display:flex; gap:12px; flex-wrap:wrap;}

.stats{
  margin-top: 24px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.stat{
  border:1px solid var(--line2);
  background: rgba(5,8,15,.35);
  border-radius: 14px;
  padding: 12px 12px;
  animation: glowPulse 9s ease-in-out infinite;
}
.stat__n{
  font-weight:700;
  color: rgba(90,214,255,.95);
  letter-spacing:.5px;
}
.stat__t{font-size:.92rem; color: rgba(232,238,248,.80); margin-top:6px}

.hero__right{display:flex; flex-direction:column; gap:14px; align-items:center;}

.heroShowcase{
  position:relative;
  width:min(560px, 100%);
  aspect-ratio: 1.05 / 1;
  border-radius:30px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(11,20,36,.82), rgba(5,8,15,.38));
  box-shadow:0 42px 110px rgba(0,0,0,.48);
}
.heroShowcase__image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:right center;
  display:block;
  animation: heroBreath 16s ease-in-out infinite;
}
.heroShowcase__veil{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 22% 18%, rgba(90,214,255,.18), transparent 28%),
    linear-gradient(90deg, rgba(5,8,15,.82) 0%, rgba(5,8,15,.36) 40%, rgba(5,8,15,.24) 100%),
    linear-gradient(180deg, rgba(5,8,15,.08), rgba(5,8,15,.48));
}
.heroShowcase__brand,
.heroShowcase__signal,
.heroShowcase__type{
  position:absolute;
  z-index:1;
}
.heroShowcase__brand{
  top:18px;
  left:18px;
  display:flex;
  align-items:center;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(5,8,15,.52);
  box-shadow:0 18px 46px rgba(0,0,0,.32);
}
.heroShowcase__brand img{
  width:102px;
  height:auto;
  display:block;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.35));
}
.heroShowcase__signal{
  display:inline-flex;
  align-items:center;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(5,8,15,.52);
  color:rgba(232,238,248,.88);
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  box-shadow:0 16px 36px rgba(0,0,0,.28);
}
.heroShowcase__signal--north{
  top:20px;
  right:18px;
}
.heroShowcase__signal--south{
  left:18px;
  bottom:92px;
}
.heroShowcase__type{
  left:18px;
  right:18px;
  bottom:18px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  color:rgba(232,238,248,.80);
  font-size:.95rem;
  margin-top:0;
  justify-content:flex-start;
  background:rgba(5,8,15,.56);
  backdrop-filter: blur(10px);
  box-shadow:0 18px 46px rgba(0,0,0,.28);
}
.heroShowcase__type .type__text{
  min-width:0;
  flex:1;
}

/* logo card */
.logoCard{
  position:relative;
  width: min(420px, 100%);
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(11,20,36,.76), rgba(5,8,15,.35));
  padding: 26px 22px 18px;
  overflow:hidden;
  box-shadow: 0 35px 80px rgba(0,0,0,.5);
}
.logoCard__logo{
  width: 108px;
  height:auto;
  display:block;
  margin: 8px auto 10px;
  filter: drop-shadow(0 18px 45px rgba(0,0,0,.45));
  animation: floaty 4.8s ease-in-out infinite;
}
@keyframes floaty{
  0%,100%{transform: translateY(0)}
  50%{transform: translateY(-8px)}
}
.logoCard__ring{
  position:absolute;
  left:50%;
  top:46%;
  width: 540px;
  height: 540px;
  transform: translate(-50%,-50%);
  border-radius: 999px;
  border: 1px solid rgba(90,214,255,.16);
  box-shadow: inset 0 0 60px rgba(90,214,255,.08);
  animation: spin 18s linear infinite;
}
@keyframes spin{to{transform: translate(-50%,-50%) rotate(360deg)}}
.logoCard__glow{
  position:absolute;
  inset:-60%;
  background: radial-gradient(circle at 50% 45%, rgba(90,214,255,.18), transparent 55%);
  animation: breathe 4s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{opacity:.55}
  50%{opacity:.95}
}

@keyframes glowPulse{
  0%,100%{
    box-shadow: 0 22px 60px rgba(0,0,0,.35);
    border-color: rgba(255,255,255,.08);
  }
  50%{
    box-shadow: 0 30px 70px rgba(0,0,0,.45);
    border-color: rgba(90,214,255,.18);
  }
}

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

@keyframes heroBreath{
  0%,100%{transform: scale(1.02) translate3d(0,0,0)}
  50%{transform: scale(1.055) translate3d(0,-8px,0)}
}

@keyframes aurora{
  0%,100%{transform: translate(-6%, -6%)}
  50%{transform: translate(6%, 6%)}
}

/* typewriter */
.type{
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color: rgba(232,238,248,.78);
  font-size:.95rem;
  padding: 12px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.07);
  background: rgba(5,8,15,.35);
}
.type__label{opacity:.9}
.type__cursor{
  width:10px; height:16px;
  background: rgba(90,214,255,.75);
  border-radius:3px;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink{50%{opacity:0}}
.type__text{min-width: 180px; text-align:left; color: rgba(232,238,248,.92);}

/* chips */
.chips{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  width:min(520px,100%);
}
.chip{
  padding: 10px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.07);
  background: rgba(5,8,15,.32);
  color: rgba(232,238,248,.78);
  font-size:.9rem;
  transition: transform .22s ease, border-color .22s ease;
  animation: glowPulse 7s ease-in-out infinite;
}
.chip:hover{transform: translateY(-2px); border-color: rgba(90,214,255,.18)}

/* TRUST STRIP */
.trustStrip{
  position:relative;
  z-index:2;
  margin-top: 28px;
}
.trustStrip__inner{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  padding: 14px 14px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.06);
  background: rgba(5,8,15,.28);
  backdrop-filter: blur(8px);
}
.trustItem{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.06);
  background: rgba(11,20,36,.26);
  color: rgba(232,238,248,.82);
  font-size:.95rem;
  animation: glowPulse 9s ease-in-out infinite;
}
.trustIcon{filter: drop-shadow(0 10px 20px rgba(0,0,0,.25));}

/* trails */
.trails{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  opacity:.95;
}
.trail{
  position:absolute;
  width: 60vw;
  height: 60vh;
  top: 8%;
  filter: blur(0px);
  opacity:.9;
}
.trail--l{
  left:-12%;
  transform: rotate(10deg);
  background:
    radial-gradient(closest-side, rgba(90,214,255,.0) 0%, rgba(90,214,255,.0) 40%, rgba(90,214,255,.16) 65%, transparent 78%),
    linear-gradient(90deg, rgba(90,214,255,.0), rgba(90,214,255,.22), rgba(47,125,255,.06));
  clip-path: polygon(0 52%, 100% 0, 100% 12%, 0 64%);
  animation: trailMoveL 6.2s ease-in-out infinite;
}
.trail--r{
  right:-12%;
  transform: rotate(-10deg);
  background:
    radial-gradient(closest-side, rgba(90,214,255,.0) 0%, rgba(90,214,255,.0) 40%, rgba(90,214,255,.16) 65%, transparent 78%),
    linear-gradient(270deg, rgba(90,214,255,.0), rgba(90,214,255,.22), rgba(47,125,255,.06));
  clip-path: polygon(0 0, 100% 52%, 100% 64%, 0 12%);
  animation: trailMoveR 6.2s ease-in-out infinite;
}
@keyframes trailMoveL{
  0%,100%{transform: translateX(0) rotate(10deg); opacity:.75}
  50%{transform: translateX(10px) rotate(12deg); opacity:1}
}
@keyframes trailMoveR{
  0%,100%{transform: translateX(0) rotate(-10deg); opacity:.75}
  50%{transform: translateX(-10px) rotate(-12deg); opacity:1}
}

.spark{
  position:absolute;
  width: 240px;
  height: 240px;
  border-radius: 999px;
  filter: blur(0px);
  background: radial-gradient(circle at center, rgba(90,214,255,.16), transparent 60%);
  animation: spark 2.8s ease-in-out infinite;
  opacity:.85;
}
.spark--l{left: 6%; top: 46%;}
.spark--r{right: 6%; top: 46%;}
@keyframes spark{
  0%,100%{transform: scale(.9); opacity:.55}
  50%{transform: scale(1.1); opacity:1}
}

/* scroll hint */
.scrollHint{
  position:absolute;
  left:50%;
  bottom: 18px;
  transform: translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  z-index:2;
  opacity:.75;
}
.scrollHint__line{
  width:2px;
  height:42px;
  background: linear-gradient(180deg, rgba(90,214,255,.0), rgba(90,214,255,.55), rgba(90,214,255,.0));
  animation: scrollLine 1.8s ease-in-out infinite;
}
@keyframes scrollLine{
  0%,100%{transform: translateY(0); opacity:.55}
  50%{transform: translateY(6px); opacity:1}
}
.scrollHint__text{font-size:.85rem; color: rgba(232,238,248,.7)}

/* ========== Sections ========== */
.section{
  position:relative;
  z-index:2;
  padding: 84px 0;
}
.section--alt{
  background: linear-gradient(180deg, rgba(7,11,20,.55), rgba(5,8,15,.15));
  border-top:1px solid rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.04);
}
.sectionHead{display:flex; flex-direction:column; gap:10px; margin-bottom: 26px}
.h2{font-size: clamp(1.7rem, 2.2vw, 2.2rem); letter-spacing:.2px}
.muted{color: rgba(185,199,222,.86)}
.muted2{color: rgba(127,150,187,.9)}

.aboutPanel{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items:start;
  border-radius: 24px;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(11,20,36,.66), rgba(5,8,15,.32));
  padding: 28px 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
}
.aboutPanel p{
  font-size:1.02rem;
  line-height:1.7;
}
.aboutPanel__copy{
  display:flex;
  flex-direction:column;
  gap:18px;
  justify-content:center;
  align-items:flex-start;
  text-align:left;
}
.aboutPanel__copy .muted{
  margin-left:0;
  margin-right:0;
  text-align:left;
}
.aboutPanel__proof{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-start;
}
.aboutPanel__proof span,
.aboutPanel__caption span{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(5,8,15,.42);
  color:rgba(232,238,248,.84);
  font-size:.82rem;
  font-weight:800;
  box-shadow:0 16px 34px rgba(0,0,0,.24);
}
.aboutPanel__media{
  position:relative;
  min-height:420px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 36px 95px rgba(0,0,0,.42);
}
.aboutPanel__media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.aboutPanel__media::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(5,8,15,.05), rgba(5,8,15,.48)),
    radial-gradient(circle at 18% 12%, rgba(90,214,255,.18), transparent 28%);
  z-index:1;
}
.aboutPanel__caption{
  position:absolute;
  left:16px;
  right:16px;
  bottom:16px;
  z-index:2;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-start;
}

/* Enterprise ecosystem */
.ecosystemGrid{
  display:grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 18px;
  align-items:stretch;
}
.ecosystemMap{
  min-height: 520px;
  position:relative;
  border-radius: 28px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 50% 50%, rgba(90,214,255,.16), transparent 14rem),
    linear-gradient(180deg, rgba(11,20,36,.72), rgba(5,8,15,.35));
  overflow:hidden;
  box-shadow: 0 35px 90px rgba(0,0,0,.42);
}
.ecosystemMap::before,
.ecosystemMap::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  border:1px solid rgba(90,214,255,.14);
  border-radius:999px;
  transform: translate(-50%,-50%);
}
.ecosystemMap::before{
  width: 340px;
  height: 340px;
  animation: orbitSpin 22s linear infinite;
}
.ecosystemMap::after{
  width: 450px;
  height: 450px;
  animation: orbitSpin 34s linear infinite reverse;
}
.ecosystemCore{
  position:absolute;
  left:50%;
  top:50%;
  width: 176px;
  height: 176px;
  transform: translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius: 38px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(5,8,15,.62);
  box-shadow: 0 30px 90px rgba(0,0,0,.45), 0 0 70px rgba(90,214,255,.14);
  z-index:2;
}
.ecosystemCore img{
  width:74px;
  height:auto;
  filter: drop-shadow(0 18px 35px rgba(0,0,0,.45));
}
.ecosystemCore span{
  font-weight:800;
  color: rgba(232,238,248,.86);
}
.ecoNode{
  position:absolute;
  z-index:3;
  display:inline-flex;
  padding: 10px 13px;
  border-radius: 999px;
  border:1px solid rgba(90,214,255,.22);
  background: rgba(5,8,15,.72);
  color: rgba(232,238,248,.9);
  font-weight:800;
  box-shadow: 0 18px 50px rgba(0,0,0,.36);
  animation: nodePulse 3.8s ease-in-out infinite;
}
.ecoNode--web{left:9%; top:18%;}
.ecoNode--apps{right:10%; top:22%; animation-delay:.4s;}
.ecoNode--marketing{right:7%; bottom:20%; animation-delay:.8s;}
.ecoNode--automation{left:8%; bottom:22%; animation-delay:1.2s;}
.ecoNode--support{left:50%; bottom:8%; transform: translateX(-50%); animation-delay:1.6s;}
.capabilityRail{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.capability{
  min-height: 250px;
  border-radius: 24px;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(11,20,36,.62), rgba(5,8,15,.30));
  padding: 22px 18px;
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.capability:hover{
  transform: translateY(-4px);
  border-color: rgba(90,214,255,.25);
  background: linear-gradient(180deg, rgba(16,30,54,.78), rgba(5,8,15,.36));
}
.capability strong{
  color: var(--cyan);
  letter-spacing:.08em;
}
.capability h3{
  margin: 16px 0 10px;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
}
.capability p{
  color: rgba(185,199,222,.86);
  line-height:1.55;
}
@keyframes orbitSpin{
  to{transform: translate(-50%,-50%) rotate(360deg)}
}
@keyframes nodePulse{
  0%,100%{box-shadow: 0 18px 50px rgba(0,0,0,.36); border-color: rgba(90,214,255,.18)}
  50%{box-shadow: 0 24px 70px rgba(90,214,255,.16); border-color: rgba(90,214,255,.42)}
}

/* Global-leader operating model */
.leaderStack{
  display:grid;
  grid-template-columns:minmax(320px, .95fr) minmax(0, 1.05fr);
  gap:16px;
  align-items:stretch;
}
.leaderStack__core{
  position:relative;
  overflow:hidden;
  min-height:560px;
  border-radius:30px;
  border:1px solid rgba(90,214,255,.16);
  background:
    radial-gradient(circle at 24% 20%, rgba(90,214,255,.20), transparent 26%),
    radial-gradient(circle at 82% 78%, rgba(47,125,255,.16), transparent 30%),
    linear-gradient(180deg, rgba(11,20,36,.78), rgba(5,8,15,.36));
  box-shadow:0 36px 110px rgba(0,0,0,.42);
  padding:24px;
  isolation:isolate;
}
.leaderStack__core::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(5,8,15,.10), rgba(5,8,15,.64)),
    url("assets/ai/hero-ecosystem-premium.jpg") center/cover no-repeat;
  opacity:.24;
  z-index:-2;
}
.leaderStack__core::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(90,214,255,.055), transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.04), transparent 1px);
  background-size:46px 46px;
  mask-image:linear-gradient(180deg, #000, transparent 96%);
  opacity:.72;
  z-index:-1;
}
.leaderStack__status,
.deliveryStack__eyebrow{
  display:inline-flex;
  width:max-content;
  padding:8px 11px;
  border-radius:999px;
  border:1px solid rgba(90,214,255,.18);
  background:rgba(90,214,255,.08);
  color:rgba(90,214,255,.96);
  font-size:.72rem;
  font-weight:950;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.leaderStack__core h3{
  max-width:640px;
  margin:20px 0 12px;
  font-size:clamp(2rem, 4.5vw, 4.8rem);
  line-height:.94;
  letter-spacing:-.08em;
}
.leaderStack__core p{
  max-width:620px;
  color:rgba(185,199,222,.86);
  line-height:1.65;
  font-size:1.02rem;
}
.leaderPulse{
  position:absolute;
  left:24px;
  right:24px;
  bottom:150px;
  height:130px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(5,8,15,.30);
  overflow:hidden;
}
.leaderPulse::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(90,214,255,.55), transparent);
  animation:leaderSweep 4.8s ease-in-out infinite;
}
.leaderPulse span{
  position:absolute;
  bottom:18px;
  width:14%;
  border-radius:16px 16px 0 0;
  background:linear-gradient(180deg, rgba(90,214,255,.88), rgba(47,125,255,.18));
  box-shadow:0 0 28px rgba(90,214,255,.18);
  animation:leaderBars 3.8s ease-in-out infinite;
}
.leaderPulse span:nth-child(1){left:10%; height:42%;}
.leaderPulse span:nth-child(2){left:32%; height:62%; animation-delay:-.6s;}
.leaderPulse span:nth-child(3){left:54%; height:48%; animation-delay:-1.1s;}
.leaderPulse span:nth-child(4){left:76%; height:76%; animation-delay:-1.7s;}
.leaderCommand{
  position:absolute;
  left:24px;
  right:24px;
  bottom:24px;
  display:grid;
  gap:8px;
}
.leaderCommand span{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:34px;
  padding:8px 11px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:rgba(232,238,248,.88);
  font-weight:850;
  font-size:.88rem;
}
.leaderCommand span::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:999px;
  background:var(--cyan);
  box-shadow:0 0 14px rgba(90,214,255,.8);
  flex:0 0 auto;
}
.leaderCards{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}
.leaderCard{
  position:relative;
  overflow:hidden;
  min-height:224px;
  border-radius:25px;
  border:1px solid rgba(255,255,255,.085);
  background:
    radial-gradient(circle at 20% 10%, rgba(90,214,255,.12), transparent 34%),
    linear-gradient(180deg, rgba(11,20,36,.66), rgba(5,8,15,.32));
  box-shadow:0 24px 72px rgba(0,0,0,.28);
  padding:20px;
  transition:transform .25s ease, border-color .25s ease, background .25s ease;
}
.leaderCard:hover{
  transform:translate3d(0,-5px,0);
  border-color:rgba(90,214,255,.22);
  background:linear-gradient(180deg, rgba(16,30,54,.76), rgba(5,8,15,.38));
}
.leaderCard::before{
  content:"";
  position:absolute;
  inset:-36% -20%;
  background:linear-gradient(112deg, transparent 42%, rgba(255,255,255,.12), transparent 58%);
  transform:translateX(-46%);
  opacity:.22;
  animation:leaderSheen 6.8s cubic-bezier(.16,1,.3,1) infinite;
}
.leaderCard span{
  position:relative;
  z-index:1;
  display:inline-flex;
  width:42px;
  height:42px;
  align-items:center;
  justify-content:center;
  border-radius:15px;
  border:1px solid rgba(90,214,255,.16);
  background:rgba(90,214,255,.09);
  color:#fff;
  font-weight:950;
}
.leaderCard h3,
.studioCard h3,
.deliveryStack h3{
  position:relative;
  z-index:1;
  margin:16px 0 9px;
  font-size:clamp(1.18rem, 2vw, 1.55rem);
  line-height:1.08;
  letter-spacing:-.045em;
}
.leaderCard p,
.studioCard p{
  position:relative;
  z-index:1;
  color:rgba(185,199,222,.84);
  line-height:1.58;
  font-size:.94rem;
}
.leaderCard--wide{grid-column:1 / -1; min-height:180px;}

/* AI studio matrix */
.studioMatrix{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}
.studioCard{
  position:relative;
  overflow:hidden;
  min-height:256px;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.085);
  background:
    radial-gradient(circle at 88% 18%, rgba(90,214,255,.12), transparent 32%),
    linear-gradient(180deg, rgba(11,20,36,.68), rgba(5,8,15,.34));
  padding:20px;
  box-shadow:0 24px 70px rgba(0,0,0,.30);
  transition:transform .25s ease, border-color .25s ease;
}
.studioCard:hover{transform:translate3d(0,-5px,0); border-color:rgba(90,214,255,.22);}
.studioCard::after{
  content:"";
  position:absolute;
  left:20px;
  right:20px;
  bottom:18px;
  height:5px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--cyan), rgba(47,125,255,.28), transparent);
  transform-origin:left center;
  animation:studioSignal 4.8s ease-in-out infinite;
}
.studioCard span{
  display:inline-flex;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(90,214,255,.16);
  background:rgba(90,214,255,.08);
  color:rgba(90,214,255,.96);
  font-size:.76rem;
  font-weight:950;
}
.deliveryStack{
  margin-top:16px;
  display:grid;
  grid-template-columns:minmax(260px, .68fr) minmax(0, 1fr);
  gap:14px;
  align-items:center;
  border-radius:28px;
  border:1px solid rgba(90,214,255,.13);
  background:linear-gradient(180deg, rgba(11,20,36,.66), rgba(5,8,15,.30));
  box-shadow:0 26px 80px rgba(0,0,0,.30);
  padding:18px;
  overflow:hidden;
}
.deliveryStack h3{margin:12px 0 0;}
.stackMarquee{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  justify-content:center;
}
.stackMarquee span{
  display:inline-flex;
  min-height:42px;
  align-items:center;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:rgba(232,238,248,.88);
  font-weight:900;
  animation:stackFloat 5.4s ease-in-out infinite;
}
.stackMarquee span:nth-child(2n){animation-delay:-1.2s;}
.stackMarquee span:nth-child(3n){animation-delay:-2.1s;}
@keyframes leaderSweep{
  0%,100%{transform:translate3d(-30%,0,0); opacity:.28;}
  50%{transform:translate3d(30%,0,0); opacity:.9;}
}
@keyframes leaderBars{
  0%,100%{transform:scaleY(.72); opacity:.72;}
  50%{transform:scaleY(1.08); opacity:1;}
}
@keyframes leaderSheen{
  0%,30%{transform:translateX(-50%); opacity:.05;}
  55%{transform:translateX(32%); opacity:.22;}
  100%{transform:translateX(50%); opacity:.05;}
}
@keyframes studioSignal{
  0%,100%{transform:scaleX(.28); opacity:.45;}
  50%{transform:scaleX(1); opacity:.95;}
}
@keyframes stackFloat{
  0%,100%{transform:translate3d(0,0,0);}
  50%{transform:translate3d(0,-4px,0);}
}

/* Competitive benchmark sections */
.industryBoard{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
}
.industryTile{
  position:relative;
  overflow:hidden;
  min-height:236px;
  border-radius:25px;
  border:1px solid rgba(255,255,255,.085);
  background:
    radial-gradient(circle at 18% 10%, rgba(90,214,255,.14), transparent 34%),
    linear-gradient(180deg, rgba(11,20,36,.68), rgba(5,8,15,.35));
  box-shadow:0 24px 72px rgba(0,0,0,.30);
  padding:20px;
  transition:transform .25s ease, border-color .25s ease, background .25s ease;
}
.industryTile:hover{
  transform:translate3d(0,-5px,0);
  border-color:rgba(90,214,255,.22);
  background:linear-gradient(180deg, rgba(16,30,54,.78), rgba(5,8,15,.38));
}
.industryTile::before{
  content:"";
  position:absolute;
  inset:-42% -24%;
  background:
    linear-gradient(112deg, transparent 42%, rgba(255,255,255,.12), transparent 58%),
    radial-gradient(circle at 70% 20%, rgba(90,214,255,.16), transparent 28%);
  transform:translateX(-50%);
  opacity:.18;
  animation:leaderSheen 7.4s cubic-bezier(.16,1,.3,1) infinite;
}
.industryTile span{
  position:relative;
  z-index:1;
  display:inline-flex;
  width:40px;
  height:40px;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  border:1px solid rgba(90,214,255,.16);
  background:rgba(90,214,255,.09);
  color:#fff;
  font-weight:950;
}
.industryTile h3{
  position:relative;
  z-index:1;
  margin:15px 0 9px;
  font-size:clamp(1.06rem, 1.8vw, 1.34rem);
  line-height:1.12;
  letter-spacing:-.045em;
}
.industryTile p{
  position:relative;
  z-index:1;
  color:rgba(185,199,222,.84);
  line-height:1.55;
  font-size:.92rem;
}
.governanceGrid{
  display:grid;
  grid-template-columns:minmax(320px, .92fr) minmax(0, 1.08fr);
  gap:16px;
  align-items:stretch;
}
.governanceConsole{
  position:relative;
  min-height:440px;
  overflow:hidden;
  border-radius:30px;
  border:1px solid rgba(90,214,255,.15);
  background:
    radial-gradient(circle at 28% 20%, rgba(90,214,255,.18), transparent 34%),
    radial-gradient(circle at 78% 80%, rgba(47,125,255,.14), transparent 34%),
    linear-gradient(180deg, rgba(11,20,36,.76), rgba(5,8,15,.34));
  box-shadow:0 36px 110px rgba(0,0,0,.40);
  padding:22px;
}
.governanceConsole__image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.34;
  display:block;
  animation: heroBreath 18s ease-in-out infinite;
}
.governanceConsole__veil{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(5,8,15,.08), rgba(5,8,15,.72)),
    radial-gradient(circle at 66% 30%, rgba(90,214,255,.12), transparent 36%);
}
.governanceConsole::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(90,214,255,.055), transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.04), transparent 1px);
  background-size:42px 42px;
  opacity:.62;
  pointer-events:none;
}
.governanceConsole__label{
  position:relative;
  z-index:1;
  display:inline-flex;
  padding:8px 11px;
  border-radius:999px;
  border:1px solid rgba(90,214,255,.18);
  background:rgba(90,214,255,.08);
  color:rgba(90,214,255,.96);
  font-size:.72rem;
  font-weight:950;
  letter-spacing:.16em;
}
.governanceConsole h3{
  position:relative;
  z-index:1;
  max-width:560px;
  margin:20px 0 0;
  font-size:clamp(2rem, 4vw, 4.2rem);
  line-height:.96;
  letter-spacing:-.075em;
}
.governanceFlow{
  position:absolute;
  left:22px;
  right:22px;
  bottom:22px;
  display:grid;
  gap:9px;
}
.governanceFlow span{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  min-height:38px;
  padding:9px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.045);
  color:rgba(232,238,248,.88);
  font-weight:900;
}
.governanceFlow span::before{
  content:"";
  width:7px;
  height:7px;
  margin-right:9px;
  border-radius:999px;
  background:var(--cyan);
  box-shadow:0 0 14px rgba(90,214,255,.75);
}
.governanceFlow span::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, rgba(90,214,255,.12), transparent);
  transform:translateX(-110%);
  animation:governanceScan 4.8s ease-in-out infinite;
}
.governanceFlow span:nth-child(2n)::after{animation-delay:-1s;}
.governanceFlow span:nth-child(3n)::after{animation-delay:-2s;}
.governanceCards{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}
.governanceCard{
  min-height:210px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.085);
  background:linear-gradient(180deg, rgba(11,20,36,.66), rgba(5,8,15,.32));
  box-shadow:0 24px 72px rgba(0,0,0,.28);
  padding:20px;
  transition:transform .25s ease, border-color .25s ease;
}
.governanceCard:hover{
  transform:translate3d(0,-5px,0);
  border-color:rgba(90,214,255,.22);
}
.governanceCard h3{
  margin:0 0 10px;
  font-size:clamp(1.12rem, 2vw, 1.46rem);
  letter-spacing:-.04em;
}
.governanceCard p{
  color:rgba(185,199,222,.84);
  line-height:1.58;
}
.insightGrid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
}
.insightCard{
  position:relative;
  overflow:hidden;
  min-height:270px;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.085);
  background:
    radial-gradient(circle at 82% 0%, rgba(90,214,255,.13), transparent 32%),
    linear-gradient(180deg, rgba(11,20,36,.68), rgba(5,8,15,.35));
  box-shadow:0 24px 72px rgba(0,0,0,.30);
  padding:20px;
  transition:transform .25s ease, border-color .25s ease;
}
.insightCard:hover{
  transform:translate3d(0,-5px,0);
  border-color:rgba(90,214,255,.22);
}
.insightCard::before{
  content:"";
  position:absolute;
  inset:auto 20px 64px 20px;
  height:1px;
  background:linear-gradient(90deg, rgba(90,214,255,.65), transparent);
  box-shadow:0 0 24px rgba(90,214,255,.24);
  animation:insightLine 4.8s ease-in-out infinite;
}
.insightCard span{
  display:inline-flex;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(90,214,255,.16);
  background:rgba(90,214,255,.08);
  color:rgba(90,214,255,.96);
  font-size:.75rem;
  font-weight:950;
  letter-spacing:.08em;
}
.insightCard h3{
  margin:16px 0 9px;
  font-size:clamp(1.15rem, 2vw, 1.48rem);
  line-height:1.08;
  letter-spacing:-.045em;
}
.insightCard p{
  color:rgba(185,199,222,.84);
  line-height:1.58;
  font-size:.94rem;
}
.insightCard a{
  position:absolute;
  left:20px;
  right:20px;
  bottom:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  border-radius:999px;
  border:1px solid rgba(90,214,255,.17);
  background:rgba(90,214,255,.09);
  color:#fff;
  font-weight:900;
}
@keyframes governanceScan{
  0%,35%{transform:translateX(-110%); opacity:.2;}
  62%{transform:translateX(110%); opacity:.9;}
  100%{transform:translateX(110%); opacity:.2;}
}
@keyframes insightLine{
  0%,100%{transform:scaleX(.26); transform-origin:left center; opacity:.42;}
  50%{transform:scaleX(1); transform-origin:left center; opacity:.92;}
}

.grid4{display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px;}
.grid3{display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px;}

/* cards */
.card{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(11,20,36,.72), rgba(5,8,15,.35));
  padding: 18px 16px;
  box-shadow: 0 22px 60px rgba(0,0,0,.35);
  position:relative;
  overflow:hidden;
  min-height: 190px;
  animation: glowPulse 8s ease-in-out infinite;
}
.card::before{
  content:"";
  position:absolute;
  inset:-50%;
  background: radial-gradient(circle at 30% 30%, rgba(90,214,255,.14), transparent 55%);
  opacity:.0;
  transition: opacity .25s ease;
  animation: aurora 8s ease-in-out infinite;
}
.card:hover::before{opacity:1}
.card h3{font-size:1.05rem; margin-bottom:10px}
.card p{color: rgba(185,199,222,.86); font-size:.95rem}
.tagRow{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px}
.card__media{
  width:100%;
  display:block;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  object-fit: cover;
  background: var(--bg2);
  min-height: 140px;
  margin-bottom: 12px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(5,8,15,.25);
  filter: saturate(1.1) contrast(1.05);
  animation: mediaFloat 7s ease-in-out infinite;
}
.card__media--ad{
  object-fit: contain;
  background:
    radial-gradient(circle at 50% 20%, rgba(90,214,255,.12), transparent 45%),
    rgba(5,8,15,.55);
  padding: 6px;
}
.tag{
  font-size:.78rem;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(5,8,15,.25);
  color: rgba(232,238,248,.72);
}
.servicePrice{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:14px;
  padding:8px 11px;
  border-radius:999px;
  border:1px solid rgba(90,214,255,.18);
  background:linear-gradient(180deg, rgba(90,214,255,.14), rgba(47,125,255,.06));
  color:#fff;
  font-weight:950;
  letter-spacing:-.02em;
  box-shadow:0 10px 28px rgba(0,0,0,.22);
}
.servicePrice::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:999px;
  background:var(--cyan);
  box-shadow:0 0 14px rgba(90,214,255,.70);
}

/* Pricing */
.pricingBoard{
  display:grid;
  gap:18px;
}
.pricingCluster{
  position:relative;
  overflow:hidden;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.09);
  background:
    radial-gradient(circle at 8% 0%, rgba(90,214,255,.12), transparent 32%),
    linear-gradient(180deg, rgba(11,20,36,.64), rgba(5,8,15,.36));
  box-shadow:0 28px 90px rgba(0,0,0,.34);
  padding:18px;
}
.pricingCluster::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(120deg, transparent 0 38%, rgba(255,255,255,.09), transparent 58%),
    linear-gradient(90deg, rgba(90,214,255,.045), transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.03), transparent 1px);
  background-size:auto, 92px 92px, 92px 92px;
  opacity:.34;
  transform:translate3d(-24%,0,0);
  animation:pricingSweep 8s cubic-bezier(.16,1,.3,1) infinite;
}
.pricingCluster--marketing{
  border-color:rgba(90,214,255,.17);
  background:
    radial-gradient(circle at 72% 0%, rgba(90,214,255,.18), transparent 34%),
    radial-gradient(circle at 15% 35%, rgba(47,125,255,.11), transparent 34%),
    linear-gradient(180deg, rgba(11,20,36,.72), rgba(5,8,15,.40));
}
.pricingCluster__head{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-end;
  margin-bottom:14px;
}
.pricingCluster__head span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:rgba(90,214,255,.92);
  font-size:.78rem;
  font-weight:950;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.pricingCluster__head span::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--cyan);
  box-shadow:0 0 16px rgba(90,214,255,.75);
}
.pricingCluster__head strong{
  color:rgba(232,238,248,.88);
  font-size:clamp(1.05rem, 2vw, 1.35rem);
  letter-spacing:-.035em;
  text-align:right;
}
.priceGrid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}
.priceCard,
.careCard{
  position:relative;
  overflow:hidden;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.085);
  background:rgba(5,8,15,.40);
  padding:16px;
  min-height:265px;
  display:flex;
  flex-direction:column;
  box-shadow:0 18px 52px rgba(0,0,0,.24);
  transition:transform .24s ease, border-color .24s ease, background .24s ease, box-shadow .24s ease;
}
.priceCard:hover,
.careCard:hover{
  transform:translate3d(0,-4px,0);
  border-color:rgba(90,214,255,.22);
  background:rgba(90,214,255,.065);
  box-shadow:0 24px 72px rgba(0,0,0,.32);
}
.priceCard--featured{
  border-color:rgba(90,214,255,.30);
  background:
    radial-gradient(circle at 50% 0%, rgba(90,214,255,.18), transparent 45%),
    rgba(5,8,15,.46);
}
.priceCard--featured::before{
  content:"";
  position:absolute;
  inset:-45% -20%;
  pointer-events:none;
  background:linear-gradient(112deg, transparent 43%, rgba(255,255,255,.16), transparent 58%);
  transform:translate3d(-60%,0,0) rotate(7deg);
  animation:pricingCardSheen 5.6s cubic-bezier(.16,1,.3,1) infinite;
}
.priceCard__tag{
  align-self:flex-start;
  position:relative;
  z-index:1;
  display:inline-flex;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(90,214,255,.14);
  background:rgba(90,214,255,.08);
  color:rgba(232,238,248,.82);
  font-size:.74rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.priceCard h3,
.careCard h3{
  position:relative;
  z-index:1;
  margin:13px 0 7px;
  font-size:1.16rem;
  letter-spacing:-.035em;
}
.priceValue{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-self:flex-start;
  margin:2px 0 12px;
  color:#fff;
  font-size:clamp(1.45rem, 3vw, 2.25rem);
  line-height:1;
  letter-spacing:-.07em;
  font-weight:950;
  text-shadow:0 0 28px rgba(90,214,255,.18);
}
.priceCard p,
.careCard p{
  position:relative;
  z-index:1;
  color:rgba(185,199,222,.82);
  line-height:1.56;
  font-size:.92rem;
  margin-bottom:16px;
}
.priceButton{
  position:relative;
  z-index:1;
  margin-top:auto;
  border:1px solid rgba(90,214,255,.18);
  border-radius:999px;
  background:linear-gradient(135deg, rgba(90,214,255,.19), rgba(47,125,255,.10));
  color:#fff;
  min-height:42px;
  padding:10px 13px;
  font-weight:950;
  cursor:pointer;
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
}
.priceButton:hover,
.priceButton:focus-visible{
  transform:translate3d(0,-2px,0);
  border-color:rgba(90,214,255,.34);
  background:linear-gradient(135deg, rgba(90,214,255,.26), rgba(47,125,255,.16));
}
.careGrid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}
.careCard{
  min-height:190px;
}
.pricingFinePrint{
  position:relative;
  z-index:1;
  margin:14px auto 0;
  max-width:920px;
  color:rgba(185,199,222,.76);
  font-size:.92rem;
  line-height:1.6;
  text-align:center;
}
@keyframes pricingSweep{
  0%,24%{transform:translate3d(-36%,0,0); opacity:.12;}
  52%{transform:translate3d(34%,0,0); opacity:.34;}
  100%{transform:translate3d(44%,0,0); opacity:.12;}
}
@keyframes pricingCardSheen{
  0%,30%{transform:translate3d(-76%,0,0) rotate(7deg); opacity:0;}
  52%{opacity:.72;}
  80%,100%{transform:translate3d(82%,0,0) rotate(7deg); opacity:0;}
}

/* Experience Lab */
.experienceLab{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
}
.experiencePanel{
  position:relative;
  overflow:hidden;
  min-height:310px;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.085);
  background:
    radial-gradient(circle at 25% 12%, rgba(90,214,255,.13), transparent 34%),
    linear-gradient(180deg, rgba(11,20,36,.68), rgba(5,8,15,.38));
  box-shadow:0 24px 72px rgba(0,0,0,.32);
  padding:18px;
  isolation:isolate;
  transition:transform .25s ease, border-color .25s ease, background .25s ease;
}
.experiencePanel::after{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--panel-image);
  background-size:cover;
  background-position:center;
  opacity:.20;
  transform:scale(1.02);
  transition: transform .6s cubic-bezier(.16,1,.3,1), opacity .32s ease;
}
.experiencePanel:hover{
  transform:translate3d(0,-5px,0);
  border-color:rgba(90,214,255,.22);
}
.desktop60 .experiencePanel:hover::after{
  transform:scale(1.07);
  opacity:.28;
}
.experiencePanel::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(120deg, transparent 0 39%, rgba(255,255,255,.11), transparent 58%),
    linear-gradient(90deg, rgba(90,214,255,.035), transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.03), transparent 1px);
  background-size:auto, 54px 54px, 54px 54px;
  opacity:.34;
  transform:translate3d(-28%,0,0);
  animation:labSweep 7.4s cubic-bezier(.16,1,.3,1) infinite;
}
.experiencePanel > *{
  position:relative;
  z-index:1;
}
.experiencePanel--hero{ --panel-image: url("assets/ai/hero-ecosystem-premium.jpg"); }
.experiencePanel--form{ --panel-image: url("assets/ai/briefing-conversion-desk.jpg"); }
.experiencePanel--ai{ --panel-image: url("assets/ai/studio-systems-showcase.jpg"); }
.experiencePanel--scale{ --panel-image: url("assets/ai/operations-governance-wall.jpg"); }
.experiencePanel__index{
  display:inline-flex;
  width:42px;
  height:42px;
  align-items:center;
  justify-content:center;
  border-radius:15px;
  border:1px solid rgba(90,214,255,.16);
  background:rgba(90,214,255,.10);
  color:#fff;
  font-weight:950;
}
.experiencePanel h3{
  margin:16px 0 9px;
  font-size:clamp(1.15rem, 2vw, 1.45rem);
  letter-spacing:-.04em;
}
.experiencePanel p{
  color:rgba(185,199,222,.84);
  line-height:1.58;
  font-size:.94rem;
}
.motionPreview{
  position:absolute;
  left:18px;
  right:18px;
  bottom:18px;
  height:82px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(5,8,15,.38);
  overflow:hidden;
}
.motionPreview span{
  position:absolute;
  width:44%;
  height:10px;
  left:18px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--cyan), rgba(47,125,255,.55));
  animation:labBars 3.6s ease-in-out infinite;
}
.motionPreview span:nth-child(1){top:18px;}
.motionPreview span:nth-child(2){top:36px; width:66%; animation-delay:-.7s;}
.motionPreview span:nth-child(3){top:54px; width:34%; animation-delay:-1.3s;}
.miniFlow{
  position:absolute;
  left:18px;
  right:18px;
  bottom:18px;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:8px;
}
.miniFlow i,
.nodeMap span{
  display:grid;
  place-items:center;
  min-height:40px;
  border-radius:14px;
  border:1px solid rgba(90,214,255,.14);
  background:rgba(90,214,255,.08);
  color:rgba(232,238,248,.88);
  font-style:normal;
  font-weight:900;
  font-size:.76rem;
  animation:labChipFloat 4s ease-in-out infinite;
}
.miniFlow i:nth-child(2),
.nodeMap span:nth-child(2){animation-delay:-.9s;}
.miniFlow i:nth-child(3),
.nodeMap span:nth-child(3){animation-delay:-1.6s;}
.miniFlow i:nth-child(4),
.nodeMap span:nth-child(4){animation-delay:-2.3s;}
.nodeMap{
  position:absolute;
  left:18px;
  right:18px;
  bottom:18px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}
.signalStack{
  position:absolute;
  left:18px;
  right:18px;
  bottom:22px;
  display:grid;
  gap:10px;
}
.signalStack span{
  display:block;
  width:var(--w, 70%);
  height:12px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--cyan), rgba(47,125,255,.36));
  box-shadow:0 0 20px rgba(90,214,255,.20);
  animation:labPulseWidth 3.4s ease-in-out infinite;
}
.signalStack span:nth-child(2){animation-delay:-.8s;}
.signalStack span:nth-child(3){animation-delay:-1.5s;}
.labProofStrip{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-top:16px;
}
.labProofStrip span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(5,8,15,.28);
  color:rgba(232,238,248,.82);
  font-weight:850;
}
.labProofStrip span::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:999px;
  background:var(--cyan);
  box-shadow:0 0 14px rgba(90,214,255,.70);
}
@keyframes labSweep{
  0%,25%{transform:translate3d(-38%,0,0); opacity:.12;}
  55%{transform:translate3d(34%,0,0); opacity:.34;}
  100%{transform:translate3d(46%,0,0); opacity:.12;}
}
@keyframes labBars{
  0%,100%{transform:translate3d(0,0,0) scaleX(.72); opacity:.62;}
  50%{transform:translate3d(16px,0,0) scaleX(1); opacity:1;}
}
@keyframes labChipFloat{
  0%,100%{transform:translate3d(0,0,0);}
  50%{transform:translate3d(0,-5px,0);}
}
@keyframes labPulseWidth{
  0%,100%{transform:scaleX(.74); transform-origin:left center; opacity:.62;}
  50%{transform:scaleX(1); opacity:1;}
}

/* projects */
.proj{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background: rgba(5,8,15,.32);
  padding: 18px 16px;
  position:relative;
  overflow:hidden;
  min-height: 170px;
  animation: glowPulse 10s ease-in-out infinite;
}
.proj::after{
  content:"";
  position:absolute;
  inset:-30%;
  background: radial-gradient(circle at 50% 20%, rgba(90,214,255,.16), transparent 60%);
  opacity:.35;
}
.proj__top{display:flex; align-items:center; gap:10px; margin-bottom:10px; position:relative; z-index:1}
.proj__dot{width:10px; height:10px; border-radius:999px; background: linear-gradient(90deg, var(--cyan), var(--blue)); box-shadow:0 0 20px rgba(90,214,255,.35)}
.proj__title{font-weight:650}
.proj__desc{color: rgba(185,199,222,.86); font-size:.95rem; position:relative; z-index:1}
.proj__foot{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; position:relative; z-index:1}
.mini{
  font-size:.78rem;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(5,8,15,.25);
  color: rgba(232,238,248,.72);
}

/* steps */
.steps{display:grid; grid-template-columns: repeat(2, 1fr); gap: 14px;}
.step{
  display:flex;
  gap:14px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background: rgba(5,8,15,.28);
  padding: 16px;
}
.step__n{
  width:44px; height:44px; border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(90deg, rgba(90,214,255,.22), rgba(47,125,255,.10));
  border:1px solid rgba(90,214,255,.16);
  font-weight:800;
}
.step__t{font-weight:700}
.step__d{color: rgba(185,199,222,.86); margin-top:6px}

/* portfolio */
.portfolioGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.pCard{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background: rgba(5,8,15,.28);
  padding: 18px 16px;
  position:relative;
  overflow:hidden;
  cursor:pointer;
  min-height: 170px;
}
.pCard::before{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at 30% 30%, rgba(90,214,255,.16), transparent 60%);
  opacity:.0;
  transition: opacity .25s ease;
}
.pCard:hover::before{opacity:1}
.pTop{display:flex; align-items:center; gap:10px; margin-bottom:10px; position:relative; z-index:1}
.pDot{width:10px; height:10px; border-radius:999px; background: linear-gradient(90deg, var(--cyan), var(--blue)); box-shadow:0 0 20px rgba(90,214,255,.35)}
.pTitle{font-weight:650}
.pDesc{color: rgba(185,199,222,.86); font-size:.95rem; position:relative; z-index:1}
.pMeta{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; position:relative; z-index:1}
.pCta{margin-top:12px; color: rgba(90,214,255,.92); position:relative; z-index:1}
.portfolioBottom{margin-top: 18px; display:flex; justify-content:center;}
.pMedia img[src*="TunaTechAdsEN"],
.pMedia img[src*="TunaTechAdsHR"]{
  object-fit: contain;
  background:
    radial-gradient(circle at 50% 20%, rgba(90,214,255,.12), transparent 45%),
    rgba(5,8,15,.55);
}

/* Ad creative showcase */
.adGrid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.adTile{
  margin:0;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(11,20,36,.70), rgba(5,8,15,.35));
  padding: 12px;
  overflow:hidden;
  box-shadow: 0 22px 60px rgba(0,0,0,.28);
}
.adTile img{
  width:100%;
  display:block;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 14px;
  background: rgba(5,8,15,.55);
}
.adTile--wide{
  grid-column: span 2;
}
.adTile--wide img{
  aspect-ratio: 16 / 6.28;
}
.adTile--story img{
  aspect-ratio: 9 / 16;
  max-height: 460px;
  margin: 0 auto;
}
.adTile figcaption{
  margin-top: 10px;
  color: rgba(232,238,248,.82);
  font-weight:700;
  font-size:.92rem;
}

/* SEO service content */
.seoGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.seoItem{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background: rgba(5,8,15,.28);
  padding: 18px 16px;
  position:relative;
  overflow:hidden;
}
.seoItem::before{
  content:"";
  position:absolute;
  inset:-45%;
  background: radial-gradient(circle at 30% 30%, rgba(90,214,255,.12), transparent 58%);
  opacity:.6;
}
.seoItem h3,
.seoItem p{
  position:relative;
  z-index:1;
}
.seoItem h3{
  margin-bottom:8px;
}
.seoItem p{
  color: rgba(185,199,222,.86);
  line-height:1.55;
}

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

.conversionBand{
  position:relative;
  overflow:hidden;
}

.conversionBand::before{
  content:"";
  position:absolute;
  inset:10% 0 auto;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(90,214,255,.34), transparent);
  opacity:.8;
}

.conversionBand__inner{
  position:relative;
  display:grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  gap:24px;
  align-items:center;
  padding:28px;
  border-radius:22px;
  border:1px solid rgba(90,214,255,.18);
  background:
    linear-gradient(135deg, rgba(90,214,255,.10), transparent 42%),
    linear-gradient(180deg, rgba(11,20,36,.74), rgba(5,8,15,.48));
  box-shadow:0 24px 80px rgba(0,0,0,.32);
}

.conversionBand__copy{
  text-align:left;
}

.conversionBand__copy .h2{
  margin-top:8px;
}

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

.conversionPoint{
  display:flex;
  align-items:center;
  gap:10px;
  position:relative;
  overflow:hidden;
  min-height:44px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.045);
  color:rgba(232,238,248,.88);
  font-weight:800;
  font-size:.92rem;
}

.conversionPoint::before{
  content:"";
  width:8px;
  height:8px;
  flex:0 0 auto;
  border-radius:999px;
  background:rgba(90,214,255,.95);
  box-shadow:0 0 18px rgba(90,214,255,.42);
}

.conversionActions{
  grid-column:1 / -1;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.mobileLeadBar{
  display:none;
}

.cardCtaWrap{
  margin-top:16px;
  display:flex;
  justify-content:center;
}

.cardCta{
  min-width:150px;
}

.subPage{
  background:#05080f;
}

.subHero{
  position:relative;
  min-height:calc(100svh - 78px);
  padding:118px 0 54px;
  display:flex;
  align-items:center;
  overflow:hidden;
}

.subHero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(5,8,15,.94), rgba(5,8,15,.72) 48%, rgba(5,8,15,.48)),
    radial-gradient(circle at 78% 34%, rgba(90,214,255,.16), transparent 42%);
}

.subHero__inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0, 1.02fr) minmax(320px, .78fr);
  gap:42px;
  align-items:center;
}

.subHero__copy{
  max-width:760px;
}

.subHero__copy .h1{
  margin-top:12px;
}

.subHero__copy .lead{
  max-width:680px;
}

.subHero__media{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.045);
  box-shadow:0 28px 90px rgba(0,0,0,.34);
  isolation:isolate;
}

.subHero__media::after{
  content:"";
  position:absolute;
  inset:-55% -36%;
  pointer-events:none;
  background:linear-gradient(112deg, transparent 42%, rgba(255,255,255,.17), transparent 58%);
  animation:finalSweep 5.6s ease-in-out infinite;
}

.subHero__media img{
  width:100%;
  display:block;
  aspect-ratio:1 / 1;
  object-fit:contain;
  background:rgba(5,8,15,.4);
}

.caseHero .subHero__media img{
  aspect-ratio:16 / 10;
}

.subHero__media img[data-drift],
.storyBand__media img[data-drift]{
  --drift-y:0px;
  --drift-r:0deg;
  transform:translate3d(0, var(--drift-y), 0) scale(1.035) rotate(var(--drift-r));
  transform-origin:center center;
  will-change:transform;
  transition:transform .28s ease-out;
}

.heroGlass{
  position:absolute;
  z-index:2;
  display:grid;
  gap:6px;
  min-width:200px;
  max-width:min(74%, 280px);
  padding:14px 15px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(180deg, rgba(9,15,28,.88), rgba(4,8,14,.70)),
    linear-gradient(135deg, rgba(90,214,255,.13), transparent 52%);
  box-shadow:0 22px 60px rgba(0,0,0,.34);
  backdrop-filter:blur(14px);
}

.heroGlass span{
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(185,199,222,.74);
}

.heroGlass strong{
  font-size:1rem;
  line-height:1.2;
  color:rgba(242,246,252,.96);
}

.heroGlass--primary{
  top:18px;
  left:18px;
}

.heroGlass--secondary{
  right:18px;
  bottom:18px;
  min-width:164px;
  max-width:min(58%, 236px);
  background:
    linear-gradient(180deg, rgba(10,16,28,.90), rgba(4,8,14,.74)),
    linear-gradient(135deg, rgba(255,193,107,.14), transparent 52%);
}

.storyBand{
  padding-top:0;
}

.storyBand__inner{
  display:grid;
  grid-template-columns:minmax(320px, .92fr) minmax(0, 1fr);
  gap:30px;
  align-items:center;
}

.storyBand__media{
  position:relative;
  overflow:hidden;
  min-height:100%;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(11,20,36,.76), rgba(5,8,15,.42)),
    linear-gradient(135deg, rgba(255,193,107,.10), transparent 48%);
  box-shadow:0 28px 86px rgba(0,0,0,.34);
}

.storyBand__media::after{
  content:"";
  position:absolute;
  inset:-35% -28%;
  pointer-events:none;
  background:linear-gradient(114deg, transparent 44%, rgba(255,255,255,.12), transparent 58%);
  animation:finalSweep 6.2s ease-in-out infinite;
}

.storyBand__media img{
  width:100%;
  height:100%;
  display:block;
  aspect-ratio:16 / 10;
  object-fit:cover;
}

.storyBand__copy{
  display:grid;
  gap:18px;
}

.storyBand__copy p{
  margin:0;
  color:rgba(185,199,222,.9);
  line-height:1.68;
}

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

.storyBand__point{
  min-height:112px;
  display:grid;
  align-content:start;
  gap:10px;
  padding:16px 16px 15px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.022)),
    linear-gradient(135deg, rgba(90,214,255,.10), transparent 56%);
  box-shadow:0 16px 40px rgba(0,0,0,.18);
}

.storyBand__point:nth-child(2n){
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.022)),
    linear-gradient(135deg, rgba(255,193,107,.12), transparent 56%);
}

.storyBand__point span{
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(185,199,222,.74);
}

.storyBand__point strong{
  font-size:1rem;
  line-height:1.34;
  color:rgba(238,243,249,.96);
}

.landingSplit{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(280px, .8fr);
  gap:18px;
  align-items:stretch;
}

.landingPanel{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(11,20,36,.66), rgba(5,8,15,.35)),
    radial-gradient(circle at 18% 0%, rgba(90,214,255,.12), transparent 42%);
  padding:24px 20px;
  box-shadow:0 20px 64px rgba(0,0,0,.28);
}

.landingPanel h3{
  margin-bottom:10px;
}

.landingPanel p{
  margin:0;
  color:rgba(185,199,222,.88);
  line-height:1.58;
}

.landingPanel .pBtn{
  margin-top:16px;
}

.landingList{
  display:grid;
  gap:10px;
}

.landingList span,
.landingList a{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(90,214,255,.17);
  background:rgba(90,214,255,.07);
  color:rgba(232,238,248,.93);
  font-weight:850;
  text-align:center;
}

.landingSteps,
.landingCards,
.caseGrid{
  display:grid;
  gap:14px;
}

.landingSteps{
  grid-template-columns:repeat(4, minmax(0, 1fr));
}

.landingCards{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

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

.landingStep{
  min-height:180px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:20px 16px;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  text-align:center;
}

.landingStep span{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:16px;
  border:1px solid rgba(90,214,255,.22);
  background:rgba(90,214,255,.10);
  color:var(--cyan);
  font-weight:900;
}

.landingStep p{
  margin:0;
  color:rgba(185,199,222,.9);
  line-height:1.52;
}

.landingTags{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-top:16px;
}

.landingTags span{
  padding:9px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.045);
  color:rgba(232,238,248,.88);
  font-weight:800;
  font-size:.9rem;
}

.landingCta{
  padding-bottom:110px;
}

.landingCta__inner{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:24px;
  align-items:center;
  padding:30px;
  border-radius:24px;
  border:1px solid rgba(90,214,255,.18);
  background:
    linear-gradient(135deg, rgba(90,214,255,.12), transparent 42%),
    linear-gradient(180deg, rgba(11,20,36,.78), rgba(5,8,15,.52));
  box-shadow:0 28px 90px rgba(0,0,0,.34);
}

.landingCta__actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:12px;
}

/* modal */
.modal{
  position:fixed;
  inset:0;
  z-index:120;
  display:none;
}
.modal.show{display:block;}
.modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}
.modal__panel{
  position:relative;
  width:min(860px, calc(100% - 28px));
  margin: 7vh auto 0;
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(11,20,36,.85), rgba(5,8,15,.55));
  box-shadow: 0 40px 120px rgba(0,0,0,.6);
  padding: 18px 16px 16px;
}
.modal__x{
  position:absolute;
  right: 12px;
  top: 12px;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(5,8,15,.35);
  color: rgba(232,238,248,.92);
  cursor:pointer;
}
.kickerSmall{
  display:inline-flex;
  font-size:.75rem;
  letter-spacing:.14em;
  color: rgba(185,199,222,.82);
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(5,8,15,.22);
}
.modal__title{margin-top:10px; font-size:1.35rem}
.modal__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 12px;
  margin-top: 14px;
}
.modal__box{
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(5,8,15,.28);
  padding: 14px;
}
.modal__label{font-weight:700; margin-bottom:10px}
.modal__list{padding-left: 16px; color: rgba(185,199,222,.9)}
.modal__list li{margin: 6px 0;}
.modal__chips{display:flex; flex-wrap:wrap; gap:8px;}
.modal__actions{margin-top: 14px; display:flex; gap:10px; flex-wrap:wrap;}

/* FAQ */
.faqGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.faqCard{
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(5,8,15,.28);
  padding: 18px 16px;
}
.faqKicker{font-size:.75rem; letter-spacing:.14em; color: rgba(185,199,222,.82); margin-bottom:10px}
.faqTitle{font-size:1.2rem; margin-bottom:10px}
.faqPills{display:flex; gap:8px; flex-wrap:wrap; margin-top: 14px}
.faqCTA{display:flex; gap:10px; flex-wrap:wrap; margin-top: 16px}
.faqAcc{
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(5,8,15,.22);
  overflow:hidden;
}
.faqItem{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding: 14px 14px;
  background: transparent;
  border:0;
  color: rgba(232,238,248,.92);
  cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.faqItem:hover{background: rgba(255,255,255,.03);}
.faqQ{font-weight:650; text-align:left;}
.faqIcon{width:28px; height:28px; border-radius:10px; border:1px solid rgba(255,255,255,.10); display:flex; align-items:center; justify-content:center}
.faqA{
  padding: 12px 16px 16px;
  color: rgba(185,199,222,.9);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.faqA ul{margin-top:10px; padding-left: 18px}

/* ========== Testimonials (Rail) ========== */
.tHighlight{
  position:relative;
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(5,8,15,.28);
  padding: 16px 14px;
  overflow:hidden;
}
.tHighlight__glow{
  position:absolute;
  inset:-60%;
  background: radial-gradient(circle at 50% 45%, rgba(90,214,255,.14), transparent 55%);
  opacity:.85;
}
.tScore{
  display:flex;
  align-items:center;
  gap:14px;
  position:relative;
  z-index:1;
}
.tScore__n{
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: .5px;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.stars{letter-spacing:.18em; color: rgba(232,238,248,.92); font-size: .95rem;}
.tBadges{
  margin-top: 12px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  position:relative;
  z-index:1;
}
.tBadge{
  font-size:.78rem;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(5,8,15,.22);
  color: rgba(232,238,248,.74);
}

/* rail wrapper */
.tRail{
  position:relative;
  margin-top: 14px;
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(5,8,15,.18);
  overflow:hidden;
  cursor: grab;
  touch-action: pan-y;
}
.tRail:active{cursor: grabbing;}

.tTrack{
  display:flex;
  gap: 14px;
  padding: 14px;
  will-change: transform;
}

/* card */
.tCard{
  position:relative;
  flex: 0 0 auto;
  width: min(360px, 78vw);
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(11,20,36,.70), rgba(5,8,15,.35));
  box-shadow: 0 22px 60px rgba(0,0,0,.35);
  padding: 16px 14px 44px;
  overflow:hidden;
}
.tCard::before{
  content:"";
  position:absolute;
  inset:-50%;
  background: radial-gradient(circle at 30% 30%, rgba(90,214,255,.14), transparent 55%);
  opacity:.0;
  transition: opacity .25s ease;
}
.tCard:hover::before{opacity:1}
.tCard__top{display:flex; align-items:center; gap:10px; margin-bottom:10px; position:relative; z-index:1}
.tAvatar{
  width: 36px; height: 36px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  font-weight: 900;
  background: linear-gradient(90deg, rgba(90,214,255,.22), rgba(47,125,255,.10));
  border:1px solid rgba(90,214,255,.16);
}
.tName{font-weight: 750; line-height:1.1}
.tRole{font-size:.88rem}
.tStars{margin-left:auto; letter-spacing:.18em; color: rgba(232,238,248,.9); font-size:.9rem}
.tText{
  color: rgba(185,199,222,.92);
  font-size: .98rem;
  line-height: 1.45;
  position:relative;
  z-index:1;
}
.tFoot{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top: 12px;
  position:relative;
  z-index:1;
}
.tPill{
  font-size:.76rem;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(5,8,15,.22);
  color: rgba(232,238,248,.72);
}
.tVerify{
  margin-left:auto;
  font-size:.76rem;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(90,214,255,.16);
  background: rgba(90,214,255,.10);
  color: rgba(232,238,248,.86);
}

/* google badge bottom-right */
.tSource{
  position:absolute;
  right: 12px;
  bottom: 10px;
  display:flex;
  align-items:center;
  gap: 8px;
  font-size: .82rem;
  opacity: .88;
  z-index: 2;
  pointer-events:none;
}
.gBadge{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
}
.gIcon{
  width:22px;
  height:22px;
  display:block;
  border-radius:999px;
  background:#fff;
  padding:3px;
  object-fit:contain;
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
}
.gText{color: rgba(185,199,222,.85);}

/* fades */
.tFade{
  position:absolute;
  top:0; bottom:0;
  width: 80px;
  pointer-events:none;
  z-index:5;
}
.tFade--l{
  left:0;
  background: linear-gradient(90deg, rgba(5,8,15,.90), rgba(5,8,15,0));
}
.tFade--r{
  right:0;
  background: linear-gradient(270deg, rgba(5,8,15,.90), rgba(5,8,15,0));
}
.tActions{margin-top: 14px; display:flex; gap: 10px; flex-wrap:wrap; justify-content:center;}

/* contact */
.sectionTop{display:flex; flex-direction:column; gap:8px; margin-bottom: 14px;}
.kickerSmall{
  display:inline-flex;
  align-self:flex-start;
  font-size:.75rem;
  letter-spacing:.14em;
  color: rgba(185,199,222,.82);
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(5,8,15,.22);
}
.contactBox{
  border-radius: 24px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 14% 8%, rgba(90,214,255,.12), transparent 34%),
    linear-gradient(180deg, rgba(11,20,36,.72), rgba(5,8,15,.38));
  padding: 26px 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
  position:relative;
  overflow:hidden;
}
.contactBox::before{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at 45% 30%, rgba(90,214,255,.16), transparent 60%);
  opacity:.65;
}
.contactBox::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, transparent 0 11%, rgba(90,214,255,.045) 11.2% 11.35%, transparent 11.8% 100%),
    linear-gradient(0deg, transparent 0 18%, rgba(255,255,255,.032) 18.15% 18.28%, transparent 18.6% 100%);
  background-size:120px 120px, 150px 150px;
  opacity:.38;
  mask-image:radial-gradient(circle at 50% 28%, #000, transparent 72%);
}
.contactInfo{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  position:relative;
  z-index:1;
  margin-bottom: 14px;
}
.infoPill{
  display:inline-flex;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(5,8,15,.25);
  color: rgba(232,238,248,.84);
}
.form{position:relative; z-index:1;}
.form--build{
  display:block;
}
.buildConsole{
  --score:16;
  position:relative;
  overflow:hidden;
  margin:0 0 16px;
  border-radius:24px;
  border:1px solid rgba(90,214,255,.15);
  background:
    radial-gradient(circle at 14% 12%, rgba(90,214,255,.18), transparent 34%),
    radial-gradient(circle at 85% 20%, rgba(47,125,255,.16), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.026));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 24px 70px rgba(0,0,0,.30);
  padding:18px;
  isolation:isolate;
}
.buildConsole__media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.22;
  display:block;
  z-index:-2;
  animation: heroBreath 20s ease-in-out infinite;
}
.buildConsole::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(5,8,15,.16), rgba(5,8,15,.56)),
    radial-gradient(circle at 20% 16%, rgba(90,214,255,.14), transparent 28%);
  z-index:-1;
  pointer-events:none;
}
.buildConsole::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(120deg, transparent 0 40%, rgba(255,255,255,.12), transparent 58%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 9px);
  opacity:.18;
  transform:translate3d(-18%,0,0);
  animation:buildConsoleSheen 6.4s cubic-bezier(.16,1,.3,1) infinite;
  z-index:-1;
}
.buildConsole__scan{
  position:absolute;
  left:14px;
  right:14px;
  top:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(90,214,255,.9), rgba(255,255,255,.88), transparent);
  opacity:.72;
  transform:translate3d(0,0,0);
  animation:buildScan 4.8s ease-in-out infinite;
  pointer-events:none;
}
.buildConsole__top{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:18px;
  align-items:center;
}
.buildConsole__copy{
  max-width:720px;
}
.buildConsole__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:rgba(90,214,255,.92);
  font-size:.76rem;
  font-weight:950;
  letter-spacing:.16em;
}
.buildConsole__eyebrow::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--cyan);
  box-shadow:0 0 18px rgba(90,214,255,.75);
  animation:buildBlink 1.8s ease-in-out infinite;
}
.buildConsole h3{
  margin:8px 0 6px;
  font-size:clamp(1.35rem, 2.6vw, 2.45rem);
  line-height:1.02;
  letter-spacing:-.055em;
}
.buildConsole p{
  max-width:680px;
  color:rgba(185,199,222,.86);
  line-height:1.65;
}
.buildMeter{
  width:132px;
  aspect-ratio:1;
  border-radius:50%;
  display:grid;
  place-items:center;
  text-align:center;
  position:relative;
  background:
    conic-gradient(from -90deg, rgba(90,214,255,.95) calc(var(--score) * 1%), rgba(255,255,255,.075) 0),
    radial-gradient(circle, rgba(90,214,255,.10), transparent 62%);
  box-shadow:0 20px 60px rgba(0,0,0,.34), inset 0 0 30px rgba(90,214,255,.08);
}
.buildMeter::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:50%;
  background:linear-gradient(180deg, rgba(5,8,15,.95), rgba(11,20,36,.78));
  border:1px solid rgba(255,255,255,.08);
}
.buildMeter strong,
.buildMeter span{
  position:relative;
  z-index:1;
}
.buildMeter strong{
  display:block;
  font-size:1.75rem;
  letter-spacing:-.06em;
}
.buildMeter span{
  display:block;
  max-width:86px;
  color:rgba(185,199,222,.82);
  font-size:.75rem;
  font-weight:850;
  line-height:1.1;
  text-transform:uppercase;
}
.buildTelemetry{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(145px, 1fr));
  gap:10px;
  margin-top:16px;
}
.telemetryCard{
  position:relative;
  overflow:hidden;
  min-height:82px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.075);
  background:rgba(5,8,15,.34);
  padding:13px 13px 24px;
  transition:transform .22s ease, border-color .22s ease, background .22s ease;
}
.telemetryCard span{
  color:rgba(185,199,222,.78);
  font-size:.82rem;
}
.telemetryCard strong{
  display:block;
  margin-top:7px;
  color:rgba(232,238,248,.96);
  font-size:1rem;
}
.telemetryCard i{
  position:absolute;
  left:13px;
  right:13px;
  bottom:12px;
  height:3px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
}
.telemetryCard i::before{
  content:"";
  display:block;
  width:38%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg, var(--cyan), var(--blue));
  transform:translate3d(-105%,0,0);
  transition:transform .38s cubic-bezier(.16,1,.3,1);
}
.telemetryCard.is-hot{
  transform:translate3d(0,-2px,0);
  border-color:rgba(90,214,255,.22);
  background:rgba(90,214,255,.08);
}
.telemetryCard.is-hot i::before{
  transform:translate3d(0,0,0);
}
.briefingRoom{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
  margin:14px 0;
}
.briefingRoom article{
  position:relative;
  overflow:hidden;
  min-height:138px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 12% 12%, rgba(90,214,255,.11), transparent 38%),
    rgba(5,8,15,.30);
  padding:14px 14px 14px 56px;
  box-shadow:0 18px 50px rgba(0,0,0,.22);
  transition:transform .22s ease, border-color .22s ease, background .22s ease;
}
.briefingRoom article:hover{
  transform:translate3d(0,-3px,0);
  border-color:rgba(90,214,255,.18);
  background:rgba(90,214,255,.055);
}
.briefingRoom article::before{
  content:"";
  position:absolute;
  inset:-42% -24%;
  background:linear-gradient(112deg, transparent 44%, rgba(255,255,255,.12), transparent 58%);
  transform:translateX(-48%);
  opacity:.16;
  animation:leaderSheen 7.2s cubic-bezier(.16,1,.3,1) infinite;
}
.briefingRoom article span{
  position:absolute;
  left:14px;
  top:14px;
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  border-radius:11px;
  border:1px solid rgba(90,214,255,.17);
  background:rgba(90,214,255,.10);
  color:#fff;
  font-weight:950;
  font-size:.78rem;
}
.briefingRoom article strong{
  display:block;
  color:rgba(232,238,248,.96);
  margin-bottom:6px;
}
.briefingRoom article p{
  color:rgba(185,199,222,.78);
  line-height:1.48;
  font-size:.86rem;
}
.buildProtocol{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}
.buildProtocol span{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(5,8,15,.30);
  color:rgba(185,199,222,.76);
  font-size:.78rem;
  font-weight:850;
  transition:transform .22s ease, border-color .22s ease, color .22s ease, background .22s ease;
}
.buildProtocol span::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  transition:background .22s ease, box-shadow .22s ease;
}
.buildProtocol span.is-active{
  color:#fff;
  border-color:rgba(90,214,255,.22);
  background:rgba(90,214,255,.10);
  transform:translate3d(0,-1px,0);
}
.buildProtocol span.is-active::before{
  background:var(--cyan);
  box-shadow:0 0 14px rgba(90,214,255,.75);
}
.form.is-enterprise .buildConsole{
  border-color:rgba(90,214,255,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 30px 90px rgba(47,125,255,.16), 0 24px 70px rgba(0,0,0,.32);
}
.buildBlueprint{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0, 1.05fr) minmax(280px, .95fr);
  gap:12px;
  margin-top:14px;
}
.blueprintPanel,
.buildAssurance,
.buildNextStep{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(5,8,15,.30);
  box-shadow:0 18px 52px rgba(0,0,0,.24);
}
.blueprintPanel{
  position:relative;
  overflow:hidden;
  min-height:230px;
  border-radius:22px;
  padding:18px;
  isolation:isolate;
}
.blueprintPanel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 22% 18%, rgba(90,214,255,.18), transparent 30%),
    linear-gradient(90deg, rgba(90,214,255,.08), transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.045), transparent 1px);
  background-size:auto, 38px 38px, 38px 38px;
  opacity:.55;
  z-index:-1;
}
.blueprintPanel::after{
  content:"";
  position:absolute;
  width:220px;
  height:220px;
  right:-80px;
  top:-80px;
  border-radius:50%;
  border:1px solid rgba(90,214,255,.18);
  box-shadow:inset 0 0 42px rgba(90,214,255,.06);
  animation:orbitSpin 28s linear infinite;
  opacity:.72;
  pointer-events:none;
}
.blueprintPanel__eyebrow{
  display:inline-flex;
  color:rgba(90,214,255,.92);
  font-size:.72rem;
  font-weight:950;
  letter-spacing:.16em;
}
.blueprintPanel h3{
  max-width:640px;
  margin:10px 0 7px;
  font-size:clamp(1.35rem, 2.3vw, 2.1rem);
  line-height:1.05;
  letter-spacing:-.05em;
}
.blueprintPanel p{
  max-width:720px;
  color:rgba(185,199,222,.84);
  line-height:1.62;
}
.blueprintStack{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:9px;
  margin-top:16px;
}
.blueprintStack span{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:10px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(5,8,15,.42);
  color:rgba(185,199,222,.72);
  text-align:center;
  font-size:.8rem;
  font-weight:900;
  transition:transform .22s ease, border-color .22s ease, color .22s ease, background .22s ease;
}
.blueprintStack span::before{
  content:"";
  position:absolute;
  inset:auto 12px 7px;
  height:2px;
  border-radius:999px;
  background:rgba(255,255,255,.09);
  overflow:hidden;
}
.blueprintStack span.is-live{
  color:#fff;
  transform:translate3d(0,-2px,0);
  border-color:rgba(90,214,255,.25);
  background:linear-gradient(180deg, rgba(90,214,255,.17), rgba(47,125,255,.08));
}
.blueprintStack span.is-live::before{
  background:linear-gradient(90deg, var(--cyan), var(--blue));
  box-shadow:0 0 14px rgba(90,214,255,.45);
}
.buildAssurance{
  display:grid;
  gap:8px;
  border-radius:22px;
  padding:12px;
}
.buildAssurance article{
  position:relative;
  overflow:hidden;
  min-height:86px;
  border-radius:17px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.035);
  padding:12px 12px 12px 52px;
  transition:transform .22s ease, border-color .22s ease, background .22s ease;
}
.buildAssurance article:hover{
  transform:translate3d(0,-2px,0);
  border-color:rgba(90,214,255,.18);
  background:rgba(90,214,255,.06);
}
.buildAssurance article span{
  position:absolute;
  left:12px;
  top:12px;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:10px;
  color:#fff;
  background:linear-gradient(135deg, rgba(90,214,255,.30), rgba(47,125,255,.14));
  border:1px solid rgba(90,214,255,.18);
  font-size:.78rem;
  font-weight:950;
}
.buildAssurance article strong{
  display:block;
  color:rgba(232,238,248,.95);
  margin-bottom:4px;
}
.buildAssurance article p{
  color:rgba(185,199,222,.76);
  font-size:.86rem;
  line-height:1.5;
}
.buildNextStep{
  grid-column:1 / -1;
  position:relative;
  overflow:hidden;
  border-radius:18px;
  padding:13px 14px;
  color:rgba(232,238,248,.90);
  font-weight:850;
}
.buildNextStep::before{
  content:"";
  display:inline-block;
  width:8px;
  height:8px;
  margin-right:9px;
  border-radius:999px;
  background:var(--cyan);
  box-shadow:0 0 16px rgba(90,214,255,.78);
}
.formRouting{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:9px;
  margin-top:14px;
  padding:10px;
  border-radius:18px;
  border:1px solid rgba(90,214,255,.13);
  background:rgba(5,8,15,.30);
}
.formRouting span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.035);
  color:rgba(185,199,222,.84);
  font-size:.84rem;
}
.formRouting strong{
  color:#fff;
}
.formGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.field{display:flex; flex-direction:column; gap:8px;}
.field span{font-size:.9rem; color: rgba(232,238,248,.82);}
.field--full{grid-column: 1 / -1;}
.field input, .field textarea, .field select{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(5,8,15,.28);
  color: rgba(232,238,248,.92);
  outline:none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field input::placeholder, .field textarea::placeholder{color: rgba(185,199,222,.55);}
.field input:focus, .field textarea:focus, .field select:focus{
  border-color: rgba(90,214,255,.22);
  box-shadow: 0 0 0 4px rgba(90,214,255,.10);
}
.field select{
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(232,238,248,.75) 50%),
    linear-gradient(135deg, rgba(232,238,248,.75) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 42px;
}
.formActions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-top: 12px;
}
.formNote{font-size:.9rem}
.toast{
  margin-top: 12px;
  display:inline-flex;
  padding: 8px 12px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(5,8,15,.35);
  color: rgba(232,238,248,.86);
  opacity:0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
  position:relative;
  z-index:1;
}
.toast.show{opacity:1; transform: translateY(0);}

@keyframes buildConsoleSheen{
  0%, 22%{transform:translate3d(-38%,0,0); opacity:.05;}
  48%{transform:translate3d(34%,0,0); opacity:.22;}
  100%{transform:translate3d(48%,0,0); opacity:.05;}
}
@keyframes buildScan{
  0%,100%{transform:translate3d(0,0,0); opacity:.28;}
  50%{transform:translate3d(0,214px,0); opacity:.82;}
}
@keyframes buildBlink{
  0%,100%{opacity:.45; transform:scale(.82);}
  50%{opacity:1; transform:scale(1.08);}
}

@media (max-width: 768px){
  .buildConsole{
    padding:15px;
    border-radius:20px;
  }

  .buildConsole__top,
  .buildTelemetry,
  .briefingRoom,
  .buildBlueprint{
    grid-template-columns:1fr;
  }

  .buildMeter{
    width:112px;
    justify-self:center;
  }

  .buildProtocol{
    justify-content:center;
  }

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

  .buildNextStep{
    grid-column:1;
  }
}

@media (prefers-reduced-motion: reduce){
  .buildConsole::before,
  .buildConsole__scan,
  .buildConsole__eyebrow::before,
  .briefingRoom article::before,
  .industryTile::before,
  .governanceFlow span::after,
  .insightCard::before,
  .leaderPulse::before,
  .leaderPulse span,
  .leaderCard::before,
  .studioCard::after,
  .stackMarquee span,
  .scopeChip.is-selected::after{
    animation:none !important;
  }
}

@media (max-width: 980px){
  .leaderStack,
  .governanceGrid,
  .deliveryStack{
    grid-template-columns:1fr;
  }

  .leaderStack__core{
    min-height:520px;
  }

  .studioMatrix,
  .industryBoard,
  .insightGrid,
  .briefingRoom{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

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

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

  .priceGrid,
  .careGrid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .pricingCluster__head{
    align-items:flex-start;
    flex-direction:column;
  }

  .pricingCluster__head strong{
    text-align:left;
  }
}

@media (max-width: 640px){
  .leaderStack__core{
    min-height:500px;
    padding:18px;
  }

  .leaderStack__core h3{
    font-size:clamp(2.15rem, 12vw, 3.35rem);
  }

  .leaderPulse{
    left:18px;
    right:18px;
    bottom:158px;
  }

  .leaderCommand{
    left:18px;
    right:18px;
    bottom:18px;
  }

  .leaderCards,
  .studioMatrix,
  .industryBoard,
  .governanceCards,
  .insightGrid,
  .briefingRoom{
    grid-template-columns:1fr;
  }

  .studioCard,
  .industryTile,
  .governanceCard,
  .insightCard,
  .leaderCard{
    min-height:auto;
  }

  .governanceConsole{
    min-height:430px;
    padding:18px;
  }

  .governanceConsole h3{
    font-size:clamp(2.05rem, 11vw, 3.3rem);
  }

  .governanceFlow{
    left:18px;
    right:18px;
    bottom:18px;
  }

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

  .experiencePanel{
    min-height:290px;
  }

  .priceGrid,
  .careGrid{
    grid-template-columns:1fr;
  }

  .pricingCluster{
    border-radius:22px;
    padding:14px;
  }

  .priceCard,
  .careCard{
    min-height:auto;
  }

  .pricingCluster::before,
  .priceCard--featured::before,
  .industryTile::before,
  .governanceFlow span::after,
  .insightCard::before,
  .leaderPulse::before,
  .leaderPulse span,
  .leaderCard::before,
  .studioCard::after,
  .stackMarquee span,
  .briefingRoom article::before,
  .experiencePanel::before,
  .motionPreview span,
  .miniFlow i,
  .nodeMap span,
  .signalStack span{
    animation:none;
  }
}

/* footer */
.foot{
  margin-top: 22px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  color: rgba(127,150,187,.9);
  position:relative;
  z-index:1;
}

/* ========== Reveal / Tilt ========== */
.reveal{
  opacity:1;
  transform: translateY(0);
  filter: blur(0);
  transition: opacity .8s ease, transform .8s ease, filter .8s ease;
}
.js .reveal{
  opacity:0;
  transform: translateY(14px);
  filter: blur(6px);
}
.js .reveal.in{
  opacity:1;
  transform: translateY(0);
  filter: blur(0);
}

/* Tilt */
.tilt{transform-style:preserve-3d; transition: transform .18s ease;}
.tilt:hover{transition: transform .08s ease;}

/* WhatsApp floating */
.waFloat{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 200;
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(11,20,36,.88), rgba(5,8,15,.55));
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  color: rgba(232,238,248,.95);
  transition: transform .22s ease, border-color .22s ease;
  overflow:hidden;
}
.waFloat:hover{transform: translateY(-2px); border-color: rgba(90,214,255,.22);}
.waFloat__icon{width: 22px; height: 22px; display:block;}
.waFloat__text{font-weight: 700; letter-spacing:.2px; font-size:.95rem;}
.waFloat__pulse{
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at 30% 30%, rgba(90,214,255,.18), transparent 60%);
  opacity:.0;
  transition: opacity .25s ease;
}
.waFloat:hover .waFloat__pulse{opacity:1;}

@media (max-width: 520px){
  .waFloat{
    width: 54px;
    height: 54px;
    padding: 0;
    justify-content:center;
    border-radius: 999px;
  }
  .waFloat__text{display:none;}
  .waFloat__icon{width: 26px; height: 26px;}
}

@media (max-width: 768px){
  body{
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }

  .mobileLeadBar{
    position:fixed;
    left:10px;
    right:10px;
    bottom:calc(10px + env(safe-area-inset-bottom));
    z-index:210;
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:8px;
    padding:8px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.10);
    background:linear-gradient(180deg, rgba(11,20,36,.94), rgba(5,8,15,.88));
    box-shadow:0 18px 54px rgba(0,0,0,.46);
    pointer-events:none;
  }

  .mobileLeadBar a{
    min-width:0;
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 8px;
    border-radius:13px;
    border:1px solid rgba(90,214,255,.18);
    background:rgba(90,214,255,.09);
    color:rgba(232,238,248,.95);
    font-size:.86rem;
    font-weight:900;
    line-height:1;
    text-align:center;
    pointer-events:auto;
    touch-action:manipulation;
    animation:mobileCtaBreath 3.8s ease-in-out infinite;
  }

  .mobileLeadBar a:nth-child(2){
    background:linear-gradient(180deg, rgba(90,214,255,.28), rgba(90,214,255,.12));
    animation-delay:-1.2s;
  }

  .mobileLeadBar a:nth-child(3){
    animation-delay:-2.2s;
  }

  .waFloat{
    display:none;
  }
}

/* ========== Responsive ========== */
@media (max-width: 980px){
  .hero__inner{grid-template-columns: 1fr; gap: 22px;}
  .nav{display:none;}
  .stats{grid-template-columns: 1fr; }
  .grid4{grid-template-columns: repeat(2, 1fr);}
  .grid3{grid-template-columns: 1fr;}
  .aboutPanel{grid-template-columns: 1fr;}
  .ecosystemGrid{grid-template-columns: 1fr;}
  .ecosystemMap{min-height: 430px;}
  .capabilityRail{grid-template-columns: 1fr;}
  .adGrid{grid-template-columns: repeat(2, minmax(0, 1fr));}
  .adTile--wide{grid-column: span 2;}
  .seoGrid{grid-template-columns: 1fr;}
  .serviceAreaGrid{grid-template-columns: repeat(2, minmax(0, 1fr));}
  .conversionBand__inner{grid-template-columns:1fr;}
  .conversionBand__copy{text-align:center;}
  .conversionActions{justify-content:center;}
  .subHero{min-height:auto; padding:104px 0 44px;}
  .subHero__inner,
  .landingSplit,
  .landingCta__inner{grid-template-columns:1fr;}
  .subHero__copy,
  .landingCta__inner{text-align:center;}
  .landingSteps,
  .landingCards,
  .caseGrid{grid-template-columns:1fr;}
  .landingCta__actions{justify-content:center;}
  .steps{grid-template-columns: 1fr;}
  .portfolioGrid{grid-template-columns: 1fr;}
  .faqGrid{grid-template-columns: 1fr;}
  .modal__grid{grid-template-columns: 1fr;}
  .formGrid{grid-template-columns: 1fr;}
  .heroShowcase{
    width:min(720px, 100%);
  }
  .aboutPanel__copy,
  .aboutPanel__copy .muted{
    text-align:center;
    align-items:center;
  }
  .aboutPanel__proof,
  .aboutPanel__caption{
    justify-content:center;
  }
}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}

/* ===== FIX: mobile horizontal overflow ===== */
html, body{
  width: 100%;
  overflow-x: hidden !important;
}

img, svg, canvas{
  max-width: 100%;
}

/* hero/trails često guraju van ekrana */
.hero{ overflow: hidden; }
.trails{ overflow: hidden; }


/* ===== Mobile layout stabilization ===== */
@media (max-width: 520px){
  :root{ --bg-scale: 1; }
  .wrap{ width: min(1120px, calc(100% - 28px)); }
  .hero{ padding: 72px 0 44px; }
  .section{ padding: 72px 0; }
  .hero__inner,
  .hero__left,
  .hero__right{
    min-width:0;
    max-width:100%;
  }
  .kicker{
    flex-wrap:wrap;
    justify-content:center;
  }
  .pill,
  .kicker__text,
  .h1,
  .lead{
    max-width:100%;
    overflow-wrap:anywhere;
  }
  .pill{
    text-align:center;
  }
  .grid4{ grid-template-columns: 1fr; }
  .adGrid{ grid-template-columns: 1fr; }
  .adTile--wide{ grid-column: span 1; }
  .ecosystemMap{ min-height: 360px; }
  .ecosystemMap::before{ width:260px; height:260px; }
  .ecosystemMap::after{ width:330px; height:330px; }
  .ecosystemCore{ width:142px; height:142px; border-radius:30px; }
  .ecosystemCore img{ width:58px; }
  .ecoNode{ font-size:.8rem; padding:8px 10px; }
  .trail{ width:78vw; height:52vh; top:10%; opacity:.75; }
  .trail--l{ left:-10vw; }
  .trail--r{ right:-10vw; }
  .spark{ width:200px; height:200px; opacity:.65; }
  .type__text{ min-width:140px; }
  .logoCard{ padding:22px 18px 16px; }
  .logoCard__logo{ width:92px; }
  .heroShowcase{
    aspect-ratio: 1 / 1.08;
    border-radius:24px;
  }
  .heroShowcase__brand{
    top:14px;
    left:14px;
    padding:10px 12px;
  }
  .heroShowcase__brand img{ width:84px; }
  .heroShowcase__signal{
    font-size:.66rem;
    padding:8px 10px;
  }
  .heroShowcase__signal--north{
    top:14px;
    right:14px;
  }
  .heroShowcase__signal--south{
    left:14px;
    bottom:84px;
    display:none;
  }
  .heroShowcase__type{
    left:14px;
    right:14px;
    bottom:14px;
    padding:10px 12px;
    font-size:.86rem;
  }
  .heroShowcase__type .type__text{ min-width:0; }
  .aboutPanel__media{ min-height:320px; }
  .bg::before{
    background-image: url("assets/mobilebg.jpeg");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center top;
    opacity:.38;
  }
}

@media (max-width: 420px){
  .topActions .btn--small{ display:none; }
  .brand__name{ font-size:.88rem; }
}

@media (max-width: 768px){
  .heroShowcase__image,
  .governanceConsole__image,
  .buildConsole__media{
    animation:none;
  }
}

/* =========================================
   PORTFOLIO (WIDE) — MATCH REST OF SITE
   Works with: .portfolioGridWide + .pCardWide + .pMedia + .pBody
   ========================================= */

/* container */
.portfolioGridWide{
  display:grid;
  grid-template-columns: 1fr;
  gap: 16px;
  width:100%;
  max-width:100%;
}

/* card */
.pCardWide{
  display:grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 14px;
  align-items: stretch;

  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(11,20,36,.70), rgba(5,8,15,.35));
  padding: 14px;

  position:relative;
  overflow:hidden;
  min-width:0;

  box-shadow: 0 22px 60px rgba(0,0,0,.35);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

/* glow overlay */
.pCardWide::before{
  content:"";
  position:absolute;
  inset:-45%;
  background: radial-gradient(circle at 30% 30%, rgba(90,214,255,.16), transparent 60%);
  opacity:0;
  transition: opacity .25s ease;
  pointer-events:none;
}

.pCardWide:hover{
  transform: translateY(-2px);
  border-color: rgba(90,214,255,.20);
  box-shadow: 0 34px 95px rgba(0,0,0,.48);
}
.pCardWide:hover::before{ opacity:1; }

/* media */
.pMedia{
  position:relative;
  border-radius: 18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  min-width:0;

  aspect-ratio: 16 / 9; /* wide */
}

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

  transform: scale(1.02);
  transition: transform .35s ease, filter .35s ease;
  filter: saturate(1.04) contrast(1.05);
}

.pCardWide:hover .pMedia img{
  transform: scale(1.06);
}

/* body */
.pBody{
  position:relative;
  z-index:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding: 2px 4px;
}

.pTop{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 6px;
}

.pDot{
  width:10px;
  height:10px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  box-shadow: 0 0 20px rgba(90,214,255,.35);
}

.pTitle{
  font-weight: 800;
  letter-spacing:.2px;
}

/* clamp da kartice ne postanu “toranj” */
.pDesc{
  margin-top: 4px;
  color: rgba(185,199,222,.92);
  font-size:.98rem;
  line-height:1.5;

  display:-webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow:hidden;
}

/* meta pills */
.pMeta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top: 12px;
}

/* reuse .mini if exists; else safe styling */
.pMeta .mini{
  font-size:.78rem;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(5,8,15,.22);
  color: rgba(232,238,248,.74);
}

/* button */
.pBtnWrap{
  display:flex;
  justify-content:flex-start;
  margin-top: 12px;
}

.pBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding: 12px 18px;
  border-radius: 999px;
  border:1px solid rgba(90,214,255,.18);
  background: rgba(90,214,255,.10);
  color: rgba(232,238,248,.92);
  font-weight: 850;

  box-shadow: 0 18px 44px rgba(0,0,0,.26);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.pCardWide:hover .pBtn{
  transform: translateY(-2px);
  border-color: rgba(90,214,255,.28);
  background: rgba(90,214,255,.14);
}

/* responsive */
@media (max-width: 980px){
  .pCardWide{ grid-template-columns: 1fr; }
  .pMedia{ aspect-ratio: 16 / 9; }
  .pBtnWrap{ justify-content:center; }
}

/* extra small */
@media (max-width: 520px){
  .pCardWide{ padding: 12px; gap: 12px; }
  .pDesc{ -webkit-line-clamp: 4; } /* malo više teksta na mob */
}

/* Final overrides for the new enterprise/ad sections */
.card__media.card__media--ad,
.pMedia img[src*="TunaTechAdsEN"],
.pMedia img[src*="TunaTechAdsHR"],
.adTile img[src*="TunaTechAdsEN"],
.adTile img[src*="TunaTechAdsHR"]{
  object-fit: contain;
  background:
    radial-gradient(circle at 50% 20%, rgba(90,214,255,.12), transparent 45%),
    rgba(5,8,15,.55);
}
.card__media.card__media--ad{
  aspect-ratio: 1 / 1;
  padding: 6px;
}
.pMedia{
  aspect-ratio: 1 / 1;
}
.portfolioGridWide{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.pCardWide{
  grid-template-columns: 1fr;
  align-content: start;
  justify-items: center;
  text-align: center;
}
.pBody{
  align-items: center;
  text-align: center;
  width: 100%;
}
.pTop,
.pMeta,
.pBtnWrap{
  justify-content: center;
}
.pDesc{
  text-align: center;
}
.pBtn,
.pLink{
  text-decoration: none;
}
.pMedia img[src*="TunaTechAdsEN"],
.pMedia img[src*="TunaTechAdsHR"]{
  width: 100%;
  height: 100%;
}
.adGrid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.adTile--wide{
  grid-column: span 1;
}
.adTile img,
.adTile--wide img,
.adTile--story img{
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: none;
  margin: 0;
  object-fit: contain;
}
.finalBrand{
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 11vw, 150px) 0 clamp(82px, 11vw, 160px);
  isolation:isolate;
}
.finalBrand::before{
  content:"";
  position:absolute;
  inset: 4% 5% auto;
  height: 360px;
  background:
    radial-gradient(circle at 50% 45%, rgba(90,214,255,.28), transparent 58%),
    radial-gradient(circle at 30% 30%, rgba(47,125,255,.18), transparent 45%),
    linear-gradient(90deg, transparent, rgba(47,125,255,.14), transparent);
  filter: blur(22px);
  opacity: .9;
  pointer-events:none;
}
.finalBrand::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(90,214,255,.06) 8.4% 8.6%, transparent 9% 100%),
    linear-gradient(0deg, transparent 0 13%, rgba(255,255,255,.035) 13.2% 13.35%, transparent 13.7% 100%);
  background-size: 160px 160px, 190px 190px;
  mask-image: radial-gradient(circle at 50% 44%, #000, transparent 72%);
  animation: finalGridDrift 18s linear infinite;
  opacity:.65;
  pointer-events:none;
  z-index:-1;
}
.finalBrand__ambient{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}
.finalBrand__particle{
  position:absolute;
  width: 9px;
  height: 9px;
  border-radius:999px;
  background: rgba(90,214,255,.9);
  box-shadow: 0 0 24px rgba(90,214,255,.65);
  opacity:.75;
  animation: particleDrift 9s ease-in-out infinite;
}
.finalBrand__particle--one{left:12%; top:32%; animation-delay:0s;}
.finalBrand__particle--two{right:14%; top:24%; width:7px; height:7px; animation-delay:-2s;}
.finalBrand__particle--three{left:22%; bottom:22%; width:6px; height:6px; animation-delay:-4.5s;}
.finalBrand__particle--four{right:24%; bottom:18%; width:11px; height:11px; animation-delay:-6s;}
.finalBrand__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
  z-index:1;
}
.finalBrand__stage{
  position:relative;
  width: min(640px, 88vw);
  aspect-ratio: 1 / .72;
  display:grid;
  place-items:center;
}
.finalBrand__logoShell{
  position:relative;
  width: min(440px, 70vw);
  aspect-ratio: 1 / 1;
  display:grid;
  place-items:center;
  border-radius: 42px;
  background:
    radial-gradient(circle at 50% 50%, rgba(90,214,255,.12), transparent 57%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 40px 130px rgba(0,0,0,.42);
  overflow:hidden;
  animation: finalLogoFloat 7s ease-in-out infinite;
}
.finalBrand__logoShell::before{
  content:"";
  position:absolute;
  inset:-65% -25%;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.42), transparent 58%);
  transform: translateX(-55%) rotate(8deg);
  animation: finalSweep 4.8s ease-in-out infinite;
  opacity:.45;
}
.finalBrand__logoShell::after{
  content:"";
  position:absolute;
  inset:18px;
  border-radius:32px;
  border:1px solid rgba(90,214,255,.16);
  box-shadow: inset 0 0 42px rgba(90,214,255,.08);
}
.finalBrand__logoShell img{
  width: min(360px, 58vw);
  height:auto;
  position:relative;
  z-index:1;
  filter:
    drop-shadow(0 28px 80px rgba(90,214,255,.34))
    drop-shadow(0 20px 60px rgba(0,0,0,.58));
}
.finalBrand__ring{
  position:absolute;
  inset: 7%;
  border-radius:50%;
  border:1px solid rgba(90,214,255,.18);
  box-shadow:
    inset 0 0 45px rgba(90,214,255,.05),
    0 0 70px rgba(90,214,255,.08);
  animation: orbitSpin 16s linear infinite;
}
.finalBrand__ring--inner{
  inset: 19%;
  border-style:dashed;
  opacity:.8;
  animation-duration: 11s;
  animation-direction: reverse;
}
.finalBrand__ring--outer::before,
.finalBrand__ring--inner::before{
  content:"";
  position:absolute;
  top:-5px;
  left:50%;
  width:10px;
  height:10px;
  border-radius:999px;
  background: var(--cyan);
  box-shadow: 0 0 24px rgba(90,214,255,.75);
}
.finalBrand__beam{
  position:absolute;
  width: 1px;
  height: 62%;
  background: linear-gradient(180deg, transparent, rgba(90,214,255,.38), transparent);
  transform-origin:center;
  opacity:.55;
  animation: beamSpin 8s linear infinite;
}
.finalBrand__beam--two{
  height: 52%;
  animation-duration: 12s;
  animation-direction: reverse;
}
.finalBrand__node{
  position:absolute;
  z-index:2;
  padding: 9px 13px;
  border-radius:999px;
  border:1px solid rgba(90,214,255,.18);
  background: rgba(5,8,15,.72);
  color: rgba(232,238,248,.92);
  font-size:.82rem;
  font-weight:850;
  letter-spacing:.02em;
  box-shadow: 0 18px 54px rgba(0,0,0,.34);
  animation: nodePulse 3.4s ease-in-out infinite;
}
.finalBrand__node--web{left:2%; top:42%; animation-delay:-.3s;}
.finalBrand__node--apps{right:4%; top:35%; animation-delay:-1.1s;}
.finalBrand__node--ai{left:18%; bottom:8%; animation-delay:-1.9s;}
.finalBrand__node--media{right:14%; bottom:12%; animation-delay:-2.7s;}
.finalBrand__copy{
  max-width: 760px;
  margin-top: clamp(16px, 3vw, 32px);
}
.finalBrand__eyebrow{
  margin: 0 0 12px;
  color: var(--cyan);
  font-weight:850;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size:.78rem;
}
.finalBrand__copy h2{
  margin:0;
  font-size: clamp(2.3rem, 6vw, 6.2rem);
  line-height:.9;
  letter-spacing:-.07em;
}
.finalBrand__text{
  max-width: 620px;
  margin: 20px auto 0;
  color: rgba(185,199,222,.88);
  line-height:1.65;
}
.finalBrand__ticker{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top: 26px;
}
.finalBrand__ticker span{
  padding: 9px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.045);
  color: rgba(232,238,248,.76);
  font-size:.82rem;
  font-weight:800;
  animation: tickerGlow 4s ease-in-out infinite;
}
.finalBrand__ticker span:nth-child(2n){animation-delay:-1.2s;}
.finalBrand__ticker span:nth-child(3n){animation-delay:-2.1s;}
@keyframes finalGridDrift{
  to{ background-position: 160px 160px, -190px 190px; }
}
@keyframes finalLogoFloat{
  0%,100%{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(-10px) scale(1.015); }
}
@keyframes finalSweep{
  0%,38%{ transform: translateX(-58%) rotate(8deg); }
  62%,100%{ transform: translateX(58%) rotate(8deg); }
}
@keyframes beamSpin{
  to{ transform: rotate(360deg); }
}
@keyframes particleDrift{
  0%,100%{ transform: translate3d(0,0,0) scale(1); opacity:.42; }
  50%{ transform: translate3d(22px,-34px,0) scale(1.35); opacity:.95; }
}
@keyframes tickerGlow{
  0%,100%{ border-color: rgba(255,255,255,.09); box-shadow:none; }
  50%{ border-color: rgba(90,214,255,.24); box-shadow: 0 0 32px rgba(90,214,255,.10); }
}
@media (max-width: 768px){
  .portfolioGridWide{
    grid-template-columns: 1fr;
  }
  .adGrid{
    grid-template-columns: 1fr;
  }
  .pMedia{
    aspect-ratio: 1 / 1;
  }
  .finalBrand__stage{
    width: min(430px, 96vw);
    aspect-ratio: 1 / .86;
  }
  .finalBrand__logoShell{
    width: min(310px, 76vw);
    border-radius:30px;
  }
  .finalBrand__logoShell img{
    width: min(260px, 64vw);
  }
  .finalBrand__node{
    font-size:.72rem;
    padding:7px 10px;
  }
  .finalBrand__node--web{left:0; top:36%;}
  .finalBrand__node--apps{right:0; top:35%;}
  .finalBrand__node--ai{left:8%; bottom:5%;}
  .finalBrand__node--media{right:4%; bottom:7%;}
  .finalBrand__copy h2{
    letter-spacing:-.05em;
  }
  .loader__mark span,
  .ecosystemMap::before,
  .ecosystemMap::after,
  .ecoNode{
    animation-duration: 5.5s;
  }
}

.topActions{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

.langToggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-width:62px;
  padding:0 10px;
  height:40px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.045);
  color:rgba(232,238,248,.86);
  font-size:.82rem;
  font-weight:800;
  line-height:1;
  transition:background .22s ease, border-color .22s ease, transform .22s ease;
}

.langToggle img{
  width:22px;
  height:16px;
  display:block;
  border-radius:4px;
  object-fit:cover;
  box-shadow:0 0 0 1px rgba(255,255,255,.16), 0 8px 18px rgba(0,0,0,.22);
}

.langToggle span{
  position:relative;
  z-index:1;
}

.langToggle:hover{
  background:rgba(90,214,255,.10);
  border-color:rgba(90,214,255,.26);
  transform:translateY(-1px);
}

@media (max-width: 520px){
  .top__inner{gap:10px;}
  .brand__name{font-size:.94rem;}
  .topActions{gap:8px;}
  .langToggle{
    min-width:56px;
    padding:0 8px;
    height:38px;
    border-radius:11px;
    font-size:.78rem;
  }
  .langToggle img{
    width:20px;
    height:15px;
  }
  .topActions .btn--small{
    padding:9px 11px;
    font-size:.84rem;
    min-height:38px;
  }
}

/* Global center + extra motion polish */
.wrap,
.section,
.sectionHead,
.sectionTop,
.aboutPanel,
.ecosystemGrid,
.capabilityRail,
.grid3,
.grid4,
.portfolioGridWide,
.seoGrid,
.serviceAreaGrid,
.steps,
.contactBox,
.form,
.formActions,
.contactInfo,
.tActions,
.portfolioBottom{
  text-align:center;
}

.sectionHead,
.sectionTop,
.aboutPanel,
.hero__inner,
.hero__left,
.hero__right,
.contactBox,
.form,
.finalBrand__copy{
  margin-left:auto;
  margin-right:auto;
}

.hero__inner,
.aboutPanel,
.ecosystemGrid,
.contactBox{
  justify-items:center;
}

.hero__left,
.hero__right,
.card,
.proj,
.seoItem,
.conversionPoint,
.capability,
.pBody,
.contactBox,
.form,
.formGrid,
.field{
  align-items:center;
}

.sectionHead .muted,
.sectionTop .muted,
.aboutPanel .muted,
.lead,
.muted.reveal,
.seoItem p,
.card p,
.capability p,
.proj__desc,
.step__d,
.pDesc,
.tText{
  margin-left:auto;
  margin-right:auto;
}

.cta,
.stats,
.chips,
.trustStrip__inner,
.tagRow,
.proj__top,
.proj__foot,
.pTop,
.pMeta,
.pBtnWrap,
.contactInfo,
.formActions,
.tBadges,
.tActions,
.portfolioBottom,
.step,
.topActions,
.nav{
  justify-content:center;
}

.card,
.proj,
.seoItem,
.conversionPoint,
.capability,
.step,
.pCardWide,
.tCard,
.contactBox,
.aboutPanel{
  text-align:center;
}

.field span{
  text-align:center;
}

.field input,
.field select,
.field textarea{
  text-align:center;
}

.outcomeSection{
  position:relative;
  overflow:hidden;
}

.outcomeSection::before{
  content:"";
  position:absolute;
  inset: 10% 6%;
  background:
    radial-gradient(circle at 50% 30%, rgba(90,214,255,.18), transparent 44%),
    radial-gradient(circle at 20% 80%, rgba(47,125,255,.12), transparent 42%),
    radial-gradient(circle at 80% 75%, rgba(255,255,255,.08), transparent 38%);
  filter: blur(22px);
  opacity:.85;
  pointer-events:none;
}

.aboutPanel__copy,
.aboutPanel__copy > .muted{
  text-align:left;
}
.aboutPanel__copy > .muted{
  margin-left:0;
  margin-right:0;
}

.outcomeGrid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:14px;
  position:relative;
  z-index:1;
}

.outcomeCard{
  position:relative;
  overflow:hidden;
  min-height: 230px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 24px 18px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.09);
  background:
    linear-gradient(180deg, rgba(11,20,36,.72), rgba(5,8,15,.34)),
    radial-gradient(circle at 50% 0%, rgba(90,214,255,.12), transparent 52%);
  box-shadow: 0 28px 82px rgba(0,0,0,.34);
  animation: cardFloat 7s ease-in-out infinite;
}

.outcomeCard:nth-child(2){animation-delay:-1.2s;}
.outcomeCard:nth-child(3){animation-delay:-2.4s;}
.outcomeCard:nth-child(4){animation-delay:-3.6s;}

.outcomeCard::before{
  content:"";
  position:absolute;
  inset:-80% -30%;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.20), transparent 58%);
  transform: translateX(-48%) rotate(10deg);
  animation: finalSweep 5.4s ease-in-out infinite;
  opacity:.42;
}

.outcomeCard::after{
  content:"";
  position:absolute;
  inset:14px;
  border-radius: calc(var(--radius) - 10px);
  border:1px solid rgba(90,214,255,.10);
  pointer-events:none;
}

.outcomeCard__n{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:16px;
  border:1px solid rgba(90,214,255,.22);
  background: rgba(90,214,255,.10);
  color: var(--cyan);
  font-weight:900;
  box-shadow: 0 0 36px rgba(90,214,255,.12);
}

.outcomeCard h3{
  margin: 18px 0 10px;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
}

.outcomeCard p{
  margin:0;
  max-width: 260px;
  color: rgba(185,199,222,.88);
  line-height:1.55;
}

.card,
.pCardWide,
.adTile,
.seoItem,
.conversionPoint,
.capability,
.proj,
.tCard{
  animation:
    cardFloat 8s ease-in-out infinite,
    glowPulse 9s ease-in-out infinite;
}

.card:nth-child(2n),
.pCardWide:nth-child(2n),
.adTile:nth-child(2n),
.seoItem:nth-child(2n),
.conversionPoint:nth-child(2n),
.capability:nth-child(2n){
  animation-delay:-1.8s;
}

.card:nth-child(3n),
.pCardWide:nth-child(3n),
.adTile:nth-child(3n),
.seoItem:nth-child(3n),
.conversionPoint:nth-child(3n),
.capability:nth-child(3n){
  animation-delay:-3.2s;
}

.btn,
.pBtn,
.infoPill,
.langToggle{
  position:relative;
  overflow:hidden;
}

.btn::after,
.pBtn::after,
.infoPill::after,
.langToggle::after{
  content:"";
  position:absolute;
  inset:-80% -35%;
  background: linear-gradient(115deg, transparent 43%, rgba(255,255,255,.28), transparent 58%);
  transform: translateX(-62%) rotate(10deg);
  animation: buttonShine 4.8s ease-in-out infinite;
  pointer-events:none;
}

.chip,
.tag,
.mini,
.tBadge,
.tPill,
.trustItem{
  animation: tickerGlow 5s ease-in-out infinite;
}

.chip:nth-child(2n),
.tag:nth-child(2n),
.mini:nth-child(2n),
.tBadge:nth-child(2n),
.tPill:nth-child(2n){
  animation-delay:-1.4s;
}

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

@keyframes buttonShine{
  0%,42%{ transform: translateX(-62%) rotate(10deg); opacity:0; }
  52%{ opacity:.75; }
  70%,100%{ transform: translateX(62%) rotate(10deg); opacity:0; }
}

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

@media (max-width: 640px){
  .outcomeGrid{
    grid-template-columns: 1fr;
  }
  .outcomeCard{
    min-height: 205px;
  }
  .stats,
  .chips,
  .trustStrip__inner,
  .tagRow,
  .proj__foot,
  .pMeta,
  .formActions{
    justify-content:center;
  }
}

@media (prefers-reduced-motion: reduce){
  .outcomeCard,
  .card,
  .pCardWide,
  .adTile,
  .seoItem,
  .capability,
  .proj,
  .tCard,
  .chip,
  .tag,
  .mini,
  .tBadge,
  .tPill,
  .trustItem,
  .btn::after,
  .pBtn::after,
  .infoPill::after,
  .langToggle::after{
    animation:none !important;
  }
}

/* Mindblowing text motion layer */
.h1,
.h2,
.sectionHead h2,
.sectionTop h2,
.card h3,
.capability h3,
.outcomeCard h3,
.pTitle,
.proj__title,
.tName,
.finalBrand__copy h2{
  position:relative;
  background-image:
    linear-gradient(110deg, rgba(232,238,248,1), rgba(90,214,255,.95), rgba(232,238,248,1), rgba(47,125,255,.92));
  background-size: 240% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
  animation:
    headlinePrism 7s ease-in-out infinite,
    textBreath 5.5s ease-in-out infinite;
}

.h1::after,
.h2::after,
.sectionHead h2::after,
.sectionTop h2::after,
.finalBrand__copy h2::after{
  content:"";
  display:block;
  width:min(170px, 36vw);
  height:2px;
  margin: clamp(12px, 2vw, 20px) auto 0;
  border-radius:999px;
  background: linear-gradient(90deg, transparent, rgba(90,214,255,.95), rgba(255,255,255,.82), transparent);
  box-shadow: 0 0 28px rgba(90,214,255,.36);
  transform-origin:center;
  animation: underlinePulse 3.6s ease-in-out infinite;
}

.lead,
.muted,
.card p,
.capability p,
.outcomeCard p,
.pDesc,
.proj__desc,
.step__d,
.tText,
.finalBrand__text,
.formNote{
  animation: readableGlow 6.8s ease-in-out infinite;
}

.pill,
.kickerSmall,
.kicker__text,
.type__label,
.stat__n,
.outcomeCard__n,
.capability strong{
  animation:
    microFlicker 4.8s ease-in-out infinite,
    tickerGlow 4.4s ease-in-out infinite;
}

.nav__a,
.brand__name,
.scrollHint__text{
  position:relative;
  animation: navTextDrift 6s ease-in-out infinite;
}

.nav__a::after,
.brand__name::after{
  content:"";
  position:absolute;
  left:50%;
  right:50%;
  bottom:-7px;
  height:1px;
  border-radius:999px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity:0;
  transition:left .24s ease, right .24s ease, opacity .24s ease;
}

.nav__a:hover::after,
.brand:hover .brand__name::after{
  left:0;
  right:0;
  opacity:1;
}

.reveal.in .h1,
.reveal.in .h2,
.reveal.in h2,
.reveal.in h3,
.reveal.in p,
.reveal.in .pTitle,
.reveal.in .proj__title{
  animation:
    textArrival .9s cubic-bezier(.16,1,.3,1) both,
    headlinePrism 7s ease-in-out infinite,
    textBreath 5.5s ease-in-out infinite;
}

.outcomeCard:hover h3,
.card:hover h3,
.capability:hover h3,
.pCardWide:hover .pTitle,
.seoItem:hover h3,
.proj:hover .proj__title{
  text-shadow: 0 0 30px rgba(90,214,255,.34);
  transform: translateY(-2px) scale(1.012);
}

.outcomeCard h3,
.card h3,
.capability h3,
.pTitle,
.seoItem h3,
.proj__title{
  transition: transform .24s ease, text-shadow .24s ease;
}

@keyframes headlinePrism{
  0%,100%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
}

@keyframes textBreath{
  0%,100%{ filter: drop-shadow(0 0 0 rgba(90,214,255,0)); }
  50%{ filter: drop-shadow(0 0 18px rgba(90,214,255,.16)); }
}

@keyframes underlinePulse{
  0%,100%{ transform: scaleX(.42); opacity:.38; }
  50%{ transform: scaleX(1); opacity:1; }
}

@keyframes readableGlow{
  0%,100%{ text-shadow: 0 0 0 rgba(90,214,255,0); }
  50%{ text-shadow: 0 0 20px rgba(90,214,255,.10); }
}

@keyframes microFlicker{
  0%,100%{ opacity:1; }
  48%{ opacity:.86; }
  52%{ opacity:1; }
  56%{ opacity:.92; }
  60%{ opacity:1; }
}

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

@keyframes textArrival{
  from{
    opacity:0;
    letter-spacing:.04em;
    transform: translateY(16px) scale(.98);
    filter: blur(8px);
  }
  to{
    opacity:1;
    letter-spacing:inherit;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce){
  .h1,
  .h2,
  .sectionHead h2,
  .sectionTop h2,
  .card h3,
  .capability h3,
  .outcomeCard h3,
  .pTitle,
  .proj__title,
  .tName,
  .finalBrand__copy h2,
  .lead,
  .muted,
  .card p,
  .capability p,
  .outcomeCard p,
  .pDesc,
  .proj__desc,
  .step__d,
  .tText,
  .finalBrand__text,
  .formNote,
  .pill,
  .kickerSmall,
  .kicker__text,
  .type__label,
  .stat__n,
  .outcomeCard__n,
  .capability strong,
  .nav__a,
  .brand__name,
  .scrollHint__text{
    animation:none !important;
  }
}

/* Mobile hero performance: keep the look, remove the expensive first-screen work */
@media (max-width: 768px){
  #fx,
  .trails,
  .trail,
  .spark,
  .logoCard__ring,
  .logoCard__glow,
  .scrollHint{
    display:none !important;
  }

  .top{
    backdrop-filter:none;
    background: rgba(5,8,15,.86);
  }

  .bg,
  .bg::before{
    transform:none !important;
    animation:none !important;
    will-change:auto;
  }

  .bg::before{
    opacity:.22;
    filter:none;
  }

  .hero{
    padding: 58px 0 34px;
    min-height:auto;
  }

  .hero__inner{
    gap:18px;
  }

  .h1{
    font-size: clamp(2rem, 12vw, 3rem);
    animation: headlinePrism 10s ease-in-out infinite !important;
    filter:none !important;
  }

  .h1::after,
  .h2::after,
  .sectionHead h2::after,
  .sectionTop h2::after,
  .finalBrand__copy h2::after{
    animation:none !important;
    opacity:.7;
    transform: scaleX(.75);
  }

  .lead,
  .muted,
  .card p,
  .capability p,
  .outcomeCard p,
  .pDesc,
  .proj__desc,
  .step__d,
  .tText,
  .finalBrand__text,
  .formNote{
    animation:none !important;
    text-shadow:none !important;
  }

  .logoCard,
  .stat,
  .trustItem,
  .chip,
  .pill{
    animation:none !important;
  }

  .logoCard{
    max-width: 330px;
    padding: 18px 16px 14px;
    box-shadow: 0 20px 48px rgba(0,0,0,.42);
  }

  .logoCard__logo{
    width: 84px;
    animation:none !important;
    filter:none;
  }

  .type{
    margin-top:10px;
    padding:10px;
  }

  .stats{
    margin-top:18px;
    gap:10px;
  }

  .stat{
    padding:10px;
    box-shadow:none;
  }

  .trustStrip{
    margin-top:18px;
  }

  .trustStrip__inner{
    gap:8px;
  }

  .trustItem{
    backdrop-filter:none;
    box-shadow:none;
  }

  .chip,
  .tag,
  .mini,
  .tBadge,
  .tPill,
  .trustItem,
  .pill,
  .kickerSmall,
  .kicker__text,
  .type__label,
  .stat__n,
  .outcomeCard__n,
  .capability strong,
  .nav__a,
  .brand__name{
    animation:none !important;
  }

  .btn::after,
  .pBtn::after,
  .infoPill::after,
  .langToggle::after{
    animation:none !important;
    display:none;
  }

  .js .reveal{
    filter:none;
    transform: translateY(8px);
  }

  .reveal.in .h1,
  .reveal.in .h2,
  .reveal.in h2,
  .reveal.in h3,
  .reveal.in p,
  .reveal.in .pTitle,
  .reveal.in .proj__title{
    animation: none !important;
  }
}

@media (max-width: 420px){
  .hero{
    padding-top: 46px;
  }

  .kicker{
    gap:8px;
    margin-bottom:14px;
  }

  .pill{
    padding:7px 10px;
    font-size:.7rem;
  }

  .lead{
    font-size:1rem;
    margin-top:14px;
  }
}

/* Mobile touch/performance layer:
   cards stay passive; only CTA links/buttons and form controls receive taps. */
@media (hover: none), (pointer: coarse){
  .card,
  .proj,
  .seoItem,
  .conversionPoint,
  .landingPanel,
  .landingStep,
  .capability,
  .step,
  .pCard,
  .pCardWide,
  .adTile,
  .tCard,
  .outcomeCard,
  .faqCard{
    pointer-events:none;
    cursor:default;
    touch-action:pan-y;
    -webkit-tap-highlight-color: transparent;
  }

  .card *,
  .proj *,
  .seoItem *,
  .conversionPoint *,
  .landingPanel *,
  .landingStep *,
  .capability *,
  .step *,
  .pCard *,
  .pCardWide *,
  .adTile *,
  .tCard *,
  .outcomeCard *,
  .faqCard *{
    pointer-events:none;
  }

  .btn,
  .pLink,
  .cardCta,
  .landingPanel .pBtn,
  .landingList a,
  .pBtnWrap a,
  .infoPill,
  .langToggle,
  .waFloat,
  .mobileLeadBar,
  .mobileLeadBar *,
  button,
  input,
  select,
  textarea,
  label,
  .form,
  .form *,
  .contactInfo,
  .contactInfo *{
    pointer-events:auto;
    touch-action:manipulation;
  }

  .card:hover::before,
  .pCard:hover::before,
  .pCardWide:hover::before,
  .tCard:hover::before{
    opacity:0;
  }

  .chip:hover,
  .tilt:hover,
  .pCardWide:hover,
  .pCardWide:hover .pMedia img,
  .pCardWide:hover .pBtn,
  .outcomeCard:hover h3,
  .card:hover h3,
  .capability:hover h3,
  .pCardWide:hover .pTitle,
  .seoItem:hover h3,
  .proj:hover .proj__title{
    transform:none !important;
    text-shadow:none !important;
  }
}

@media (max-width: 768px){
  body{
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: auto;
  }

  .section{
    content-visibility:auto;
    contain-intrinsic-size: 760px;
  }

  .hero,
  .subHero,
  .top,
  .waFloat,
  .mobileLeadBar,
  .modal{
    content-visibility:visible;
  }

  .card,
  .proj,
  .seoItem,
  .conversionPoint,
  .landingPanel,
  .landingStep,
  .capability,
  .step,
  .pCard,
  .pCardWide,
  .adTile,
  .tCard,
  .outcomeCard{
    animation:none !important;
    transform:none !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.28);
    contain: layout paint style;
    will-change:auto;
  }

  .card::before,
  .pCard::before,
  .pCardWide::before,
  .seoItem::before,
  .outcomeCard::before{
    animation: mobileSweep 7.2s ease-in-out infinite !important;
    will-change: transform, opacity;
    opacity:.22;
  }

  .proj::after{
    animation: mobileAura 6.4s ease-in-out infinite;
    will-change: opacity;
  }

  .card__media,
  .pMedia img,
  .adTile img{
    animation: mobileImageFloat 7.5s ease-in-out infinite !important;
    transform:translateZ(0);
    will-change:transform;
  }

  .btn,
  .pBtn,
  .infoPill,
  .langToggle,
  .waFloat{
    animation: mobileCtaBreath 3.8s ease-in-out infinite !important;
    transform:translateZ(0);
    will-change:transform;
  }

  .btn::after,
  .pBtn::after,
  .infoPill::after,
  .langToggle::after{
    display:block !important;
    animation: mobileButtonShine 4.6s ease-in-out infinite !important;
    will-change:transform, opacity;
  }

  .cta .btn:nth-child(2),
  .formActions .btn:nth-child(2),
  .langToggle{
    animation-delay:-1.4s !important;
  }

  .chips .chip,
  .trustItem,
  .finalBrand__ticker span{
    animation: mobileSoftPulse 5.8s ease-in-out infinite !important;
  }

  .chips .chip:nth-child(2n),
  .trustItem:nth-child(2n),
  .finalBrand__ticker span:nth-child(2n){
    animation-delay:-1.6s !important;
  }

  .js .reveal.in{
    animation: mobileReveal .7s cubic-bezier(.16,1,.3,1) both;
  }

  .ecosystemMap::before,
  .ecosystemMap::after{
    animation-duration: 42s !important;
  }

  .ecoNode,
  .finalBrand__node{
    animation:none !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.28);
  }

  .finalBrand__ring,
  .finalBrand__beam,
  .finalBrand__particle{
    animation:none !important;
    opacity:.34;
  }

  .finalBrand__logoShell{
    animation: mobileLogoFloat 6.8s ease-in-out infinite !important;
    transform:translateZ(0);
    will-change:transform;
  }

  .tRail{
    cursor:default;
    touch-action:pan-y;
  }
}

@keyframes mobileReveal{
  from{ opacity:0; transform:translate3d(0, 16px, 0); }
  to{ opacity:1; transform:translate3d(0, 0, 0); }
}

@keyframes mobileImageFloat{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(0,-4px,0) scale(1.01); }
}

@keyframes mobileCtaBreath{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(0,-2px,0) scale(1.012); }
}

@keyframes mobileButtonShine{
  0%,38%{ transform:translate3d(-64%,0,0) rotate(10deg); opacity:0; }
  48%{ opacity:.7; }
  66%,100%{ transform:translate3d(64%,0,0) rotate(10deg); opacity:0; }
}

@keyframes mobileSweep{
  0%,100%{ transform:translate3d(-8%, -6%, 0); opacity:.14; }
  50%{ transform:translate3d(8%, 6%, 0); opacity:.34; }
}

@keyframes mobileAura{
  0%,100%{ opacity:.22; }
  50%{ opacity:.46; }
}

@keyframes mobileSoftPulse{
  0%,100%{ opacity:.78; }
  50%{ opacity:1; }
}

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

/* PWA install prompt */
.pwaInstall{
  position:sticky;
  top:72px;
  z-index:48;
  width:min(560px, calc(100vw - 28px));
  margin: 12px auto 0;
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  border-radius:20px;
  border:1px solid rgba(90,214,255,.20);
  background:
    radial-gradient(circle at 12% 0%, rgba(90,214,255,.16), transparent 38%),
    linear-gradient(180deg, rgba(11,20,36,.94), rgba(5,8,15,.90));
  box-shadow: 0 28px 90px rgba(0,0,0,.55), 0 0 42px rgba(90,214,255,.12);
  transform:translateY(-12px) scale(.98);
  opacity:0;
  pointer-events:none;
  transition:opacity .28s ease, transform .28s ease, border-color .28s ease;
}

.pwaInstall.show{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}

.pwaInstall__icon{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 0 28px rgba(90,214,255,.08);
}

.pwaInstall__icon img{
  width:42px;
  height:42px;
  object-fit:contain;
}

.pwaInstall__body{
  min-width:0;
  text-align:left;
}

.pwaInstall__body strong{
  display:block;
  font-size:1rem;
  letter-spacing:.01em;
}

.pwaInstall__body span{
  display:block;
  margin-top:4px;
  color:rgba(185,199,222,.88);
  font-size:.9rem;
  line-height:1.35;
}

.pwaInstall__btn{
  border:0;
  border-radius:999px;
  padding:10px 14px;
  background:linear-gradient(90deg, var(--cyan), var(--blue));
  color:#04101e;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 14px 34px rgba(47,125,255,.26);
}

.pwaInstall__x{
  position:absolute;
  top:8px;
  right:9px;
  width:28px;
  height:28px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  color:rgba(232,238,248,.82);
  cursor:pointer;
}

@media (max-width: 640px){
  .pwaInstall{
    top:66px;
    width:calc(100vw - 24px);
    margin: 10px auto 0;
    grid-template-columns:auto 1fr;
    transform:translateY(-10px) scale(.98);
    padding:13px;
  }

  .pwaInstall.show{
    transform:translateY(0) scale(1);
  }

  .pwaInstall__btn{
    grid-column:1 / -1;
    width:100%;
  }
}

/* Clean media: no borders around images */
.card__media,
.pMedia,
.adTile img,
.logoCard__logo,
.ecosystemCore img,
.finalBrand__logoShell img,
.pwaInstall__icon,
.pwaInstall__icon img,
.langToggle img{
  border:0 !important;
  box-shadow:none;
}

/* Zupsko Oko-inspired scroll layer: progress, lift reveals, staggered app-like cards */
:root{
  --zoko-progress:0;
  --zoko-depth-y:0px;
}

.scrollProgress{
  position:fixed;
  top:0;
  left:0;
  z-index:999;
  width:100%;
  height:3px;
  pointer-events:none;
  transform:scaleX(0);
  transform-origin:left center;
  background:linear-gradient(90deg, var(--cyan), var(--blue), rgba(232,238,248,.96), var(--cyan));
  background-size:220% 100%;
  box-shadow:0 0 18px rgba(90,214,255,.55);
  animation:zokoProgressGlow 3.8s ease-in-out infinite;
  will-change:transform;
}

html.zokoScroll .zokoCandidate{
  opacity:0;
  transform:translate3d(0, 34px, 0) scale(.985);
  filter:blur(8px);
  transition:
    opacity .64s cubic-bezier(.16,1,.3,1) var(--zoko-delay, 0ms),
    transform .72s cubic-bezier(.16,1,.3,1) var(--zoko-delay, 0ms),
    filter .72s cubic-bezier(.16,1,.3,1) var(--zoko-delay, 0ms);
  will-change:opacity, transform, filter;
}

html.zokoScroll .zokoCandidate.zokoIn{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  filter:blur(0);
}

html.zokoScroll .zokoSeen{
  will-change:auto;
}

html.zokoScroll .zokoIn .zokoChild{
  animation:zokoChildLift .72s cubic-bezier(.16,1,.3,1) both;
  animation-delay:calc(var(--zoko-item, 0) * 58ms);
}

html.zokoScroll .zokoChild{
  transform-origin:center top;
}

html.zokoScroll .card,
html.zokoScroll .outcomeCard,
html.zokoScroll .capability,
html.zokoScroll .proj,
html.zokoScroll .adTile,
html.zokoScroll .pCard,
html.zokoScroll .pCardWide,
html.zokoScroll .step,
html.zokoScroll .seoItem,
html.zokoScroll .conversionPoint,
html.zokoScroll .landingPanel,
html.zokoScroll .landingStep,
html.zokoScroll .tCard{
  backface-visibility:hidden;
}

html.zokoScroll .card::after,
html.zokoScroll .capability::after,
html.zokoScroll .proj::before,
html.zokoScroll .adTile::after,
html.zokoScroll .pCard::after,
html.zokoScroll .pCardWide::after,
html.zokoScroll .step::after,
html.zokoScroll .seoItem::after,
html.zokoScroll .conversionPoint::after,
html.zokoScroll .landingPanel::after,
html.zokoScroll .landingStep::after,
html.zokoScroll .tCard::after{
  content:"";
  position:absolute;
  inset:-70% -34%;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(112deg, transparent 42%, rgba(255,255,255,.18), transparent 58%);
  opacity:0;
  transform:translate3d(-78%,0,0) rotate(7deg);
}

html.zokoScroll .zokoIn .card.zokoChild::after,
html.zokoScroll .zokoIn .capability.zokoChild::after,
html.zokoScroll .zokoIn .proj.zokoChild::before,
html.zokoScroll .zokoIn .adTile.zokoChild::after,
html.zokoScroll .zokoIn .pCard.zokoChild::after,
html.zokoScroll .zokoIn .pCardWide.zokoChild::after,
html.zokoScroll .zokoIn .step.zokoChild::after,
html.zokoScroll .zokoIn .seoItem.zokoChild::after,
html.zokoScroll .zokoIn .conversionPoint.zokoChild::after,
html.zokoScroll .zokoIn .landingPanel.zokoChild::after,
html.zokoScroll .zokoIn .landingStep.zokoChild::after,
html.zokoScroll .zokoIn .tCard.zokoChild::after{
  animation:zokoPanelSheen 1.1s cubic-bezier(.16,1,.3,1) both;
  animation-delay:calc(.16s + var(--zoko-item, 0) * 74ms);
}

html.zokoScroll .pMedia::after,
html.zokoScroll .card__media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(105deg, transparent 36%, rgba(90,214,255,.18), transparent 62%);
  opacity:0;
  transform:translate3d(-80%,0,0);
}

html.zokoScroll .pMedia{
  isolation:isolate;
}

html.zokoScroll .zokoIn .pMedia::after{
  animation:zokoMediaSweep 1.25s cubic-bezier(.16,1,.3,1) .2s both;
}

html.zokoScroll .zokoIn .pMedia img,
html.zokoScroll .zokoIn .card__media{
  animation:zokoMediaSettle .8s cubic-bezier(.16,1,.3,1) both;
}

html.zokoScroll .sectionHead.zokoIn .h2,
html.zokoScroll .sectionTop.zokoIn h2{
  animation:zokoTitlePop .78s cubic-bezier(.16,1,.3,1) both, mobileHeadlineFlow 7.5s ease-in-out infinite;
}

html.zokoScroll .hero{
  --zoko-hero-y:var(--zoko-depth-y);
}

html.zokoScroll .hero::before{
  transform:translate3d(0, var(--zoko-hero-y), 0);
}

@media (hover:hover) and (pointer:fine){
  html.zokoScroll .zokoChild:hover{
    transform:translate3d(0,-4px,0) scale(1.01);
    transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
  }
}

@media (max-width: 768px){
  .scrollProgress{
    height:2px;
    z-index:120;
  }

  html.zokoScroll .zokoCandidate{
    transform:translate3d(0, 20px, 0) scale(.992);
    filter:none;
    transition-duration:.52s, .6s, .6s;
  }

  html.zokoScroll .zokoIn .zokoChild{
    animation-duration:.58s;
  }

  html.zokoScroll .zokoIn .card.zokoChild::after,
  html.zokoScroll .zokoIn .capability.zokoChild::after,
  html.zokoScroll .zokoIn .proj.zokoChild::before,
  html.zokoScroll .zokoIn .adTile.zokoChild::after,
  html.zokoScroll .zokoIn .pCard.zokoChild::after,
  html.zokoScroll .zokoIn .pCardWide.zokoChild::after,
  html.zokoScroll .zokoIn .step.zokoChild::after,
  html.zokoScroll .zokoIn .seoItem.zokoChild::after,
  html.zokoScroll .zokoIn .tCard.zokoChild::after{
    animation-duration:.86s;
  }
}

@media (prefers-reduced-motion: reduce){
  .scrollProgress,
  html.zokoScroll .zokoCandidate,
  html.zokoScroll .zokoChild,
  html.zokoScroll .zokoChild::before,
  html.zokoScroll .zokoChild::after{
    animation:none !important;
    transition:none !important;
    transform:none !important;
    filter:none !important;
    opacity:1 !important;
  }
}

@keyframes zokoProgressGlow{
  0%,100%{ background-position:0% 50%; box-shadow:0 0 14px rgba(90,214,255,.38); }
  50%{ background-position:100% 50%; box-shadow:0 0 24px rgba(90,214,255,.7); }
}

@keyframes zokoChildLift{
  from{ opacity:0; transform:translate3d(0, 28px, 0) scale(.975); filter:blur(8px); }
  to{ opacity:1; transform:translate3d(0,0,0) scale(1); filter:blur(0); }
}

@keyframes zokoPanelSheen{
  0%,22%{ opacity:0; transform:translate3d(-78%,0,0) rotate(7deg); }
  48%{ opacity:.62; }
  100%{ opacity:0; transform:translate3d(78%,0,0) rotate(7deg); }
}

@keyframes zokoMediaSweep{
  0%{ opacity:0; transform:translate3d(-80%,0,0); }
  42%{ opacity:.78; }
  100%{ opacity:0; transform:translate3d(80%,0,0); }
}

@keyframes zokoMediaSettle{
  from{ transform:translate3d(0, 18px, 0) scale(1.035); filter:saturate(1.14) contrast(1.08); }
  to{ transform:translate3d(0,0,0) scale(1); filter:saturate(1.08) contrast(1.04); }
}

@keyframes zokoTitlePop{
  from{ opacity:.72; transform:translate3d(0,18px,0) scale(.985); }
  to{ opacity:1; transform:translate3d(0,0,0) scale(1); }
}

/* Mobile final override: native one-finger scroll + lightweight text motion */
@media (max-width: 768px), (hover: none), (pointer: coarse){
  html,
  body{
    height:auto !important;
    min-height:100% !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    touch-action:auto !important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-y:auto !important;
  }

  body.loading{
    overflow-y:auto !important;
  }

  body,
  main,
  header,
  section,
  footer,
  .hero,
  .section,
  .wrap,
  .top,
  .hero__inner,
  .contactBox,
  .tRail{
    touch-action:auto !important;
  }

  .card,
  .proj,
  .seoItem,
  .conversionPoint,
  .landingPanel,
  .landingStep,
  .capability,
  .step,
  .pCard,
  .pCardWide,
  .adTile,
  .tCard,
  .outcomeCard,
  .faqCard,
  .card *,
  .proj *,
  .seoItem *,
  .conversionPoint *,
  .landingPanel *,
  .landingStep *,
  .capability *,
  .step *,
  .pCard *,
  .pCardWide *,
  .adTile *,
  .tCard *,
  .outcomeCard *,
  .faqCard *{
    pointer-events:none !important;
    touch-action:pan-y !important;
  }

  .btn,
  .pBtn,
  .pLink,
  .cardCta,
  .landingPanel .pBtn,
  .landingList a,
  .infoPill,
  .langToggle,
  .waFloat,
  .mobileLeadBar,
  .mobileLeadBar *,
  a[href^="tel:"],
  a[href^="mailto:"],
  a[href*="wa.me"],
  button,
  input,
  select,
  textarea,
  label{
    pointer-events:auto !important;
    touch-action:manipulation !important;
  }

  .h1,
  .h2,
  .sectionHead h2,
  .sectionTop h2,
  .card h3,
  .capability h3,
  .outcomeCard h3,
  .conversionPoint,
  .pTitle,
  .proj__title,
  .tName,
  .finalBrand__copy h2{
    background-image:
      linear-gradient(110deg, rgba(232,238,248,1), rgba(90,214,255,.96), rgba(232,238,248,1));
    background-size:220% 100%;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    filter:none !important;
    text-shadow:none !important;
    animation: mobileHeadlineFlow 7.5s ease-in-out infinite !important;
    will-change:background-position;
  }

  .lead,
  .muted,
  .card p,
  .capability p,
  .outcomeCard p,
  .conversionBand__copy p,
  .pDesc,
  .proj__desc,
  .step__d,
  .tText,
  .finalBrand__text,
  .formNote,
  .field span,
  .adTile figcaption,
  .type__label,
  .type__text{
    filter:none !important;
    text-shadow:none !important;
    animation: mobileTextGlow 5.4s ease-in-out infinite !important;
    will-change:opacity, transform;
  }

  .pill,
  .kickerSmall,
  .kicker__text,
  .stat__n,
  .tag,
  .mini,
  .chip,
  .tBadge,
  .tPill,
  .trustItem,
  .finalBrand__ticker span{
    animation: mobileLabelPulse 4.8s ease-in-out infinite !important;
    will-change:opacity, transform;
  }

  .card:nth-child(2n) h3,
  .proj:nth-child(2n) .proj__title,
  .seoItem:nth-child(2n) h3,
  .capability:nth-child(2n) h3,
  .pCardWide:nth-child(2n) .pTitle,
  .tCard:nth-child(2n) .tName{
    animation-delay:-1.6s !important;
  }

  .card:nth-child(3n) h3,
  .proj:nth-child(3n) .proj__title,
  .seoItem:nth-child(3n) h3,
  .capability:nth-child(3n) h3,
  .pCardWide:nth-child(3n) .pTitle,
  .tCard:nth-child(3n) .tName{
    animation-delay:-3.1s !important;
  }

  .lead,
  .card p,
  .proj__desc,
  .pDesc,
  .tText{
    animation-delay:-.8s !important;
  }

  .h1::after,
  .h2::after,
  .sectionHead h2::after,
  .sectionTop h2::after,
  .finalBrand__copy h2::after{
    animation: mobileUnderlineSweep 3.8s ease-in-out infinite !important;
    box-shadow:none;
    will-change:transform, opacity;
  }
}

@keyframes mobileHeadlineFlow{
  0%,100%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
}

@keyframes mobileTextGlow{
  0%,100%{ opacity:.82; transform:translate3d(0,0,0); }
  50%{ opacity:1; transform:translate3d(0,-1px,0); }
}

@keyframes mobileLabelPulse{
  0%,100%{ opacity:.78; transform:translate3d(0,0,0) scale(1); }
  50%{ opacity:1; transform:translate3d(0,-1px,0) scale(1.01); }
}

@keyframes mobileUnderlineSweep{
  0%,100%{ transform:scaleX(.35); opacity:.42; }
  50%{ transform:scaleX(.95); opacity:.9; }
}

/* Mobile motion showcase: lots of visible motion, kept viewport-scoped by JS */
:root{
  --mobile-depth:0;
  --mobile-depth-y:0px;
}

@media (max-width: 768px){
  html.mobileMotion .hero{
    isolation:isolate;
  }

  html.mobileMotion .hero__inner,
  html.mobileMotion .trustStrip{
    position:relative;
    z-index:1;
  }

  html.mobileMotion .hero::before,
  html.mobileMotion .hero::after{
    content:"";
    position:absolute;
    pointer-events:none;
    z-index:0;
  }

  html.mobileMotion .hero::before{
    inset:-18% -28% 18%;
    background:
      repeating-linear-gradient(90deg, transparent 0 23px, rgba(90,214,255,.052) 23px 24px),
      repeating-linear-gradient(0deg, transparent 0 29px, rgba(255,255,255,.032) 29px 30px);
    mask-image: linear-gradient(180deg, rgba(0,0,0,.82), rgba(0,0,0,.34) 62%, transparent);
    opacity:.56;
    transform:translate3d(0, var(--mobile-depth-y), 0);
    animation: mobileGridRun 14s linear infinite;
    will-change:transform, background-position;
  }

  html.mobileMotion .hero::after{
    left:-58%;
    top:8%;
    width:74%;
    height:70%;
    background:linear-gradient(112deg, transparent 0 42%, rgba(90,214,255,.18) 50%, transparent 62% 100%);
    opacity:.55;
    transform:translate3d(-16%, 0, 0) skewX(-14deg);
  }

  html.mobileMotion .hero.motionLive::after{
    animation: mobileHeroBeam 4.8s cubic-bezier(.16,1,.3,1) infinite;
    will-change:transform, opacity;
  }

  html.mobileMotion .motionCandidate,
  html.mobileMotion .motionCandidate::before,
  html.mobileMotion .motionCandidate::after{
    animation-play-state:paused !important;
  }

  html.mobileMotion .motionLive,
  html.mobileMotion .motionLive::before,
  html.mobileMotion .motionLive::after{
    animation-play-state:running !important;
  }

  html.mobileMotion .h1,
  html.mobileMotion .h2,
  html.mobileMotion .sectionHead h2,
  html.mobileMotion .sectionTop h2,
  html.mobileMotion .card h3,
  html.mobileMotion .capability h3,
  html.mobileMotion .outcomeCard h3,
  html.mobileMotion .landingPanel h3,
  html.mobileMotion .conversionPoint,
  html.mobileMotion .pTitle,
  html.mobileMotion .proj__title,
  html.mobileMotion .tName,
  html.mobileMotion .finalBrand__copy h2,
  html.mobileMotion .lead,
  html.mobileMotion .muted,
  html.mobileMotion .card p,
  html.mobileMotion .capability p,
  html.mobileMotion .outcomeCard p,
  html.mobileMotion .landingPanel p,
  html.mobileMotion .landingStep p,
  html.mobileMotion .conversionBand__copy p,
  html.mobileMotion .pDesc,
  html.mobileMotion .proj__desc,
  html.mobileMotion .step__d,
  html.mobileMotion .tText,
  html.mobileMotion .finalBrand__text,
  html.mobileMotion .formNote{
    animation:none !important;
    will-change:auto;
  }

  html.mobileMotion .motionLive:is(.h1, .h2),
  html.mobileMotion .motionLive :is(.h1, .h2, .sectionHead h2, .sectionTop h2, .card h3, .capability h3, .outcomeCard h3, .landingPanel h3, .conversionPoint, .pTitle, .proj__title, .tName, .finalBrand__copy h2){
    animation:mobileHeadlineFlow 6.8s ease-in-out infinite !important;
    animation-delay:var(--motion-delay, 0s) !important;
    will-change:background-position;
  }

  html.mobileMotion .motionLive:is(.lead, .muted),
  html.mobileMotion .motionLive :is(.lead, .muted, .card p, .capability p, .outcomeCard p, .landingPanel p, .landingStep p, .conversionBand__copy p, .pDesc, .proj__desc, .step__d, .tText, .finalBrand__text, .formNote){
    animation:mobileTextGlow 5.2s ease-in-out infinite !important;
    animation-delay:var(--motion-delay, 0s) !important;
    will-change:opacity, transform;
  }

  html.mobileMotion .motionLive.logoCard,
  html.mobileMotion .motionLive .logoCard{
    animation:mobileStageFloat 5.7s ease-in-out infinite !important;
    animation-delay:var(--motion-delay, 0s) !important;
    will-change:transform;
  }

  html.mobileMotion .logoCard::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(180deg, transparent 0 36%, rgba(90,214,255,.18) 50%, transparent 64% 100%);
    opacity:0;
    transform:translate3d(0,-120%,0);
  }

  html.mobileMotion .motionLive.logoCard::after,
  html.mobileMotion .motionLive .logoCard::after{
    animation:mobileScanner 4.4s ease-in-out infinite;
    animation-delay:var(--motion-delay, 0s);
    will-change:transform, opacity;
  }

  html.mobileMotion .motionLive.logoCard .logoCard__ring,
  html.mobileMotion .motionLive.logoCard .logoCard__glow,
  html.mobileMotion .motionLive .logoCard .logoCard__ring,
  html.mobileMotion .motionLive .logoCard .logoCard__glow{
    display:block !important;
  }

  html.mobileMotion .motionLive.logoCard .logoCard__ring,
  html.mobileMotion .motionLive .logoCard .logoCard__ring{
    animation:spin 24s linear infinite !important;
    opacity:.48;
  }

  html.mobileMotion .motionLive.logoCard .logoCard__glow,
  html.mobileMotion .motionLive .logoCard .logoCard__glow{
    animation:breathe 6s ease-in-out infinite !important;
    opacity:.5;
  }

  html.mobileMotion .motionLive.logoCard .logoCard__logo,
  html.mobileMotion .motionLive .logoCard .logoCard__logo,
  html.mobileMotion .motionLive .ecosystemCore img{
    animation:mobileLogoPop 4.9s ease-in-out infinite !important;
    will-change:transform;
  }

  html.mobileMotion .motionLive.stat,
  html.mobileMotion .motionLive.trustItem,
  html.mobileMotion .motionLive.chip,
  html.mobileMotion .motionLive.pill,
  html.mobileMotion .motionLive.tag,
  html.mobileMotion .motionLive.mini,
  html.mobileMotion .motionLive .tag,
  html.mobileMotion .motionLive .mini{
    animation:mobileChipWave 4.2s ease-in-out infinite !important;
    animation-delay:var(--motion-delay, 0s) !important;
    will-change:transform, opacity;
  }

  html.mobileMotion .card,
  html.mobileMotion .pCardWide,
  html.mobileMotion .capability,
  html.mobileMotion .step,
  html.mobileMotion .seoItem,
  html.mobileMotion .conversionPoint,
  html.mobileMotion .landingPanel,
  html.mobileMotion .landingStep,
  html.mobileMotion .adTile,
  html.mobileMotion .tCard,
  html.mobileMotion .faqCard{
    position:relative;
    overflow:hidden;
  }

  html.mobileMotion .card::after,
  html.mobileMotion .pCardWide::after,
  html.mobileMotion .capability::after,
  html.mobileMotion .step::after,
  html.mobileMotion .seoItem::after,
  html.mobileMotion .conversionPoint::after,
  html.mobileMotion .landingPanel::after,
  html.mobileMotion .landingStep::after,
  html.mobileMotion .adTile::after,
  html.mobileMotion .tCard::after,
  html.mobileMotion .faqCard::after{
    content:"";
    position:absolute;
    inset:-60% -32%;
    pointer-events:none;
    border-radius:inherit;
    background:linear-gradient(112deg, transparent 42%, rgba(255,255,255,.18), transparent 58%);
    opacity:0;
    transform:translate3d(-72%,0,0) rotate(7deg);
  }

  html.mobileMotion .motionLive.card::after,
  html.mobileMotion .motionLive .card::after,
  html.mobileMotion .motionLive.pCardWide::after,
  html.mobileMotion .motionLive .pCardWide::after,
  html.mobileMotion .motionLive.capability::after,
  html.mobileMotion .motionLive .capability::after,
  html.mobileMotion .motionLive.step::after,
  html.mobileMotion .motionLive .step::after,
  html.mobileMotion .motionLive.seoItem::after,
  html.mobileMotion .motionLive .seoItem::after,
  html.mobileMotion .motionLive.conversionPoint::after,
  html.mobileMotion .motionLive .conversionPoint::after,
  html.mobileMotion .motionLive.landingPanel::after,
  html.mobileMotion .motionLive .landingPanel::after,
  html.mobileMotion .motionLive.landingStep::after,
  html.mobileMotion .motionLive .landingStep::after,
  html.mobileMotion .motionLive.adTile::after,
  html.mobileMotion .motionLive .adTile::after,
  html.mobileMotion .motionLive.tCard::after,
  html.mobileMotion .motionLive .tCard::after,
  html.mobileMotion .motionLive.faqCard::after,
  html.mobileMotion .motionLive .faqCard::after{
    animation:mobileGlint 5.8s ease-in-out infinite;
    animation-delay:var(--motion-delay, 0s);
    will-change:transform, opacity;
  }

  html.mobileMotion .motionLive.card,
  html.mobileMotion .motionLive .card,
  html.mobileMotion .motionLive.outcomeCard,
  html.mobileMotion .motionLive .outcomeCard,
  html.mobileMotion .motionLive.capability,
  html.mobileMotion .motionLive .capability,
  html.mobileMotion .motionLive.step,
  html.mobileMotion .motionLive .step,
  html.mobileMotion .motionLive.pCardWide,
  html.mobileMotion .motionLive .pCardWide,
  html.mobileMotion .motionLive.seoItem,
  html.mobileMotion .motionLive .seoItem,
  html.mobileMotion .motionLive.conversionPoint,
  html.mobileMotion .motionLive .conversionPoint,
  html.mobileMotion .motionLive.landingPanel,
  html.mobileMotion .motionLive .landingPanel,
  html.mobileMotion .motionLive.landingStep,
  html.mobileMotion .motionLive .landingStep,
  html.mobileMotion .motionLive.adTile,
  html.mobileMotion .motionLive .adTile,
  html.mobileMotion .motionLive.tCard,
  html.mobileMotion .motionLive .tCard{
    animation:mobileCardHover 6.5s ease-in-out infinite !important;
    animation-delay:var(--motion-delay, 0s) !important;
    will-change:transform;
  }

  html.mobileMotion .motionLive.card::before,
  html.mobileMotion .motionLive .card::before,
  html.mobileMotion .motionLive.pCardWide::before,
  html.mobileMotion .motionLive .pCardWide::before,
  html.mobileMotion .motionLive.seoItem::before,
  html.mobileMotion .motionLive .seoItem::before,
  html.mobileMotion .motionLive.outcomeCard::before,
  html.mobileMotion .motionLive .outcomeCard::before{
    animation:mobileSweep 6.2s ease-in-out infinite !important;
    animation-delay:var(--motion-delay, 0s) !important;
    opacity:.28;
    will-change:transform, opacity;
  }

  html.mobileMotion .motionLive .card__media,
  html.mobileMotion .motionLive .pMedia img,
  html.mobileMotion .motionLive.adTile img{
    animation:mobileImageOrbit 7s ease-in-out infinite !important;
    animation-delay:var(--motion-delay, 0s) !important;
    will-change:transform;
  }

  html.mobileMotion .motionLive.ecosystemMap::before,
  html.mobileMotion .motionLive.ecosystemMap::after{
    animation:orbitSpin 24s linear infinite !important;
    opacity:.78;
  }

  html.mobileMotion .motionLive.ecosystemMap::after{
    animation-duration:34s !important;
    animation-direction:reverse !important;
  }

  html.mobileMotion .motionLive .ecoNode,
  html.mobileMotion .motionLive.ecoNode{
    animation:mobileNodePing 3.9s ease-in-out infinite !important;
    animation-delay:var(--motion-delay, 0s) !important;
    will-change:transform, opacity;
  }

  html.mobileMotion .motionLive .ecoNode--support,
  html.mobileMotion .motionLive.ecoNode--support{
    animation-name:mobileNodePingCentered !important;
  }

  html.mobileMotion .motionLive .step__n,
  html.mobileMotion .motionLive .outcomeCard__n,
  html.mobileMotion .motionLive .capability strong{
    animation:mobileNumberFlip 4.6s ease-in-out infinite !important;
    animation-delay:var(--motion-delay, 0s) !important;
    will-change:transform;
  }

  html.mobileMotion .motionLive.finalBrand .finalBrand__ring,
  html.mobileMotion .motionLive.finalBrand .finalBrand__beam,
  html.mobileMotion .motionLive.finalBrand .finalBrand__particle{
    opacity:.45;
  }

  html.mobileMotion .motionLive.finalBrand .finalBrand__ring{
    animation:orbitSpin 19s linear infinite !important;
  }

  html.mobileMotion .motionLive.finalBrand .finalBrand__ring--inner{
    animation-duration:13s !important;
    animation-direction:reverse !important;
  }

  html.mobileMotion .motionLive.finalBrand .finalBrand__beam{
    animation:beamSpin 10s linear infinite !important;
  }

  html.mobileMotion .motionLive.finalBrand .finalBrand__particle{
    animation:particleDrift 8.5s ease-in-out infinite !important;
  }

  html.mobileMotion .motionLive.finalBrand__logoShell,
  html.mobileMotion .motionLive.finalBrand .finalBrand__logoShell{
    animation:mobileStageFloat 6.2s ease-in-out infinite !important;
    will-change:transform;
  }
}

@media (max-width: 768px), (hover: none), (pointer: coarse){
  #testimonials .tRail,
  #testimonials .tRail *{
    animation:none !important;
    transition:none !important;
    will-change:auto !important;
  }

  #testimonials .tRail{
    overflow-x:auto;
    overflow-y:hidden;
    cursor:default;
    touch-action:pan-x pan-y;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  #testimonials .tRail::-webkit-scrollbar{
    display:none;
  }

  #testimonials .tRail.tRail--native .tTrack{
    transform:none !important;
    width:max-content;
    scroll-snap-type:x proximity;
    padding-inline:12px;
  }

  #testimonials .tRail.tRail--native .tCard{
    width:min(330px, 82vw);
    scroll-snap-align:start;
    box-shadow:0 16px 34px rgba(0,0,0,.26);
  }

  #testimonials .tRail.tRail--native .tCard[aria-hidden="true"]{
    display:none;
  }

  #testimonials .tRail.tRail--native .tCard::before,
  #testimonials .tRail.tRail--native .tCard::after,
  #testimonials .tRail.tRail--native .tFade{
    display:none !important;
  }

  html.mobileMotion :is(.pill, .kickerSmall, .kicker__text, .stat__n, .tag, .mini, .chip, .tBadge, .tPill, .trustItem, .finalBrand__ticker span){
    animation:none !important;
    will-change:auto !important;
  }

  html.mobileMotion .motionLive:is(.stat, .trustItem, .chip, .pill, .tag, .mini, .tBadge, .tPill),
  html.mobileMotion .motionLive :is(.tag, .mini, .tBadge, .tPill, .finalBrand__ticker span){
    animation:mobileChipWave 5.4s ease-in-out infinite !important;
    animation-delay:var(--motion-delay, 0s) !important;
    will-change:transform, opacity;
  }

  .finalBrand::after{
    animation:none !important;
    opacity:.34;
  }

  .finalBrand::before{
    filter:blur(12px);
    opacity:.58;
  }

  .finalBrand__beam,
  .finalBrand__particle{
    display:none !important;
  }

  .finalBrand__ring{
    animation:none !important;
    opacity:.18 !important;
    box-shadow:inset 0 0 24px rgba(90,214,255,.05);
    will-change:auto !important;
  }

  html.mobileMotion .motionLive.finalBrand .finalBrand__ring,
  html.mobileMotion .motionLive.finalBrand .finalBrand__beam,
  html.mobileMotion .motionLive.finalBrand .finalBrand__particle{
    animation:none !important;
    will-change:auto !important;
  }

  .finalBrand__logoShell{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.12),
      0 24px 64px rgba(0,0,0,.36);
  }

  .finalBrand__logoShell::before{
    animation:finalSweep 8.5s ease-in-out infinite;
    opacity:.26;
  }

  .finalBrand__logoShell img{
    filter:drop-shadow(0 18px 42px rgba(90,214,255,.24));
  }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce){
  html.mobileMotion *,
  html.mobileMotion *::before,
  html.mobileMotion *::after{
    animation:none !important;
    transition:none !important;
  }
}

@keyframes mobileGridRun{
  from{ background-position:0 0, 0 0; }
  to{ background-position:96px 0, 0 120px; }
}

@keyframes mobileHeroBeam{
  0%,24%{ opacity:0; transform:translate3d(-18%,0,0) skewX(-14deg); }
  42%{ opacity:.72; }
  72%,100%{ opacity:0; transform:translate3d(210%,0,0) skewX(-14deg); }
}

@keyframes mobileStageFloat{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(0,-7px,0) scale(1.01); }
}

@keyframes mobileScanner{
  0%,34%{ opacity:0; transform:translate3d(0,-120%,0); }
  48%{ opacity:.8; }
  66%,100%{ opacity:0; transform:translate3d(0,120%,0); }
}

@keyframes mobileLogoPop{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(0,-4px,0) scale(1.025); }
}

@keyframes mobileChipWave{
  0%,100%{ opacity:.82; transform:translate3d(0,0,0) scale(1); }
  50%{ opacity:1; transform:translate3d(0,-3px,0) scale(1.025); }
}

@keyframes mobileCardHover{
  0%,100%{ transform:translate3d(0,0,0); }
  50%{ transform:translate3d(0,-5px,0); }
}

@keyframes mobileGlint{
  0%,42%{ opacity:0; transform:translate3d(-72%,0,0) rotate(7deg); }
  52%{ opacity:.72; }
  70%,100%{ opacity:0; transform:translate3d(72%,0,0) rotate(7deg); }
}

@keyframes mobileImageOrbit{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  35%{ transform:translate3d(3px,-5px,0) scale(1.018); }
  70%{ transform:translate3d(-2px,3px,0) scale(1.01); }
}

@keyframes mobileNodePing{
  0%,100%{ opacity:.86; transform:translate3d(0,0,0) scale(1); }
  50%{ opacity:1; transform:translate3d(0,-4px,0) scale(1.04); }
}

@keyframes mobileNodePingCentered{
  0%,100%{ opacity:.86; transform:translate3d(-50%,0,0) scale(1); }
  50%{ opacity:1; transform:translate3d(-50%,-4px,0) scale(1.04); }
}

@keyframes mobileNumberFlip{
  0%,100%{ transform:translate3d(0,0,0) rotateX(0deg); }
  50%{ transform:translate3d(0,-2px,0) rotateX(10deg); }
}

/* Capability SEO matrix */
.capabilityMatrix{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
  width:100%;
}
.capabilityStack{
  position:relative;
  min-height:310px;
  padding:22px 18px;
  text-align:center;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.09);
  background:
    radial-gradient(circle at 24% 0%, rgba(90,214,255,.16), transparent 42%),
    linear-gradient(180deg, rgba(11,20,36,.76), rgba(5,8,15,.36));
  box-shadow:0 24px 72px rgba(0,0,0,.30);
  overflow:hidden;
  isolation:isolate;
}
.capabilityStack::before{
  content:"";
  position:absolute;
  inset:-45%;
  background:
    linear-gradient(110deg, transparent 35%, rgba(255,255,255,.18) 46%, transparent 58%);
  transform:translateX(-55%) rotate(8deg);
  opacity:0;
  animation:capabilitySweep 7.5s ease-in-out infinite;
  z-index:-1;
}
.capabilityStack:nth-child(2n)::before{animation-delay:-2.2s;}
.capabilityStack:nth-child(3n)::before{animation-delay:-4.1s;}
.capabilityStack__index{
  display:inline-flex;
  width:42px;
  height:42px;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  color:var(--cyan);
  background:rgba(90,214,255,.10);
  border:1px solid rgba(90,214,255,.18);
  font-weight:900;
  letter-spacing:.04em;
  margin-bottom:18px;
}
.capabilityStack h3{
  font-size:clamp(1.16rem, 1.9vw, 1.45rem);
  margin-bottom:10px;
}
.capabilityStack p{
  color:rgba(185,199,222,.87);
  line-height:1.58;
}
.capabilityTags{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin-top:18px;
}
.capabilityTags span{
  display:inline-flex;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.045);
  color:rgba(232,238,248,.86);
  font-weight:800;
  font-size:.82rem;
}
@keyframes capabilitySweep{
  0%,38%{opacity:0; transform:translateX(-58%) rotate(8deg);}
  48%{opacity:.7;}
  62%,100%{opacity:0; transform:translateX(58%) rotate(8deg);}
}

/* Premium contact drawers */
.contactCommand{
  display:inline-flex;
  flex-direction:column;
  gap:3px;
  min-width:210px;
  padding:10px 14px;
  border-radius:18px;
  border:1px solid rgba(90,214,255,.16);
  background:
    radial-gradient(circle at 10% 0%, rgba(90,214,255,.16), transparent 42%),
    rgba(5,8,15,.30);
  color:rgba(232,238,248,.88);
  box-shadow:0 18px 44px rgba(0,0,0,.22);
}
.contactCommand span{
  color:rgba(185,199,222,.76);
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.10em;
}
.contactCommand strong{
  color:rgba(248,251,255,.96);
  font-size:.96rem;
}
.formDrawers{
  display:grid;
  gap:10px;
  width:100%;
}
.contactDrawer{
  width:100%;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)),
    rgba(5,8,15,.18);
  overflow:hidden;
  box-shadow:0 16px 46px rgba(0,0,0,.18);
}
.contactDrawer summary{
  list-style:none;
  cursor:pointer;
  padding:15px 16px;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:12px;
  color:rgba(248,251,255,.95);
  font-weight:900;
}
.contactDrawer summary::-webkit-details-marker{display:none;}
.contactDrawer summary::after{
  content:"+";
  grid-column:2;
  grid-row:1 / span 2;
  width:30px;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  border-radius:999px;
  background:rgba(90,214,255,.10);
  color:var(--cyan);
  border:1px solid rgba(90,214,255,.15);
  transition:transform .24s ease, background .24s ease;
}
.contactDrawer[open] summary::after{
  transform:rotate(45deg);
  background:rgba(90,214,255,.16);
}
.contactDrawer summary span{
  grid-column:1;
  display:block;
  text-align:center;
  font-size:.88rem;
  color:var(--cyan);
  letter-spacing:.04em;
  text-transform:uppercase;
}
.contactDrawer summary strong{
  grid-column:1;
  display:block;
  text-align:center;
  margin-top:3px;
  font-size:.94rem;
}
.drawerBody{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  padding:0 14px 15px;
  animation:drawerOpen .3s cubic-bezier(.16,1,.3,1) both;
}
.drawerBody--grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  align-items:start;
}
.scopeChip{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(5,8,15,.32);
  color:rgba(232,238,248,.86);
  font-weight:800;
  font-size:.86rem;
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.scopeChip input{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}
.scopeChip:hover{
  transform:translateY(-2px);
  border-color:rgba(90,214,255,.24);
  box-shadow:0 12px 28px rgba(0,0,0,.22);
}
.scopeChip:has(input:checked),
.scopeChip.is-selected{
  background:linear-gradient(180deg, rgba(90,214,255,.24), rgba(33,115,220,.15));
  border-color:rgba(90,214,255,.36);
  color:#fff;
}
.scopeChip.is-selected::after{
  content:"";
  width:7px;
  height:7px;
  margin-left:8px;
  border-radius:999px;
  background:var(--cyan);
  box-shadow:0 0 14px rgba(90,214,255,.75);
  animation:buildBlink 1.8s ease-in-out infinite;
}
@keyframes drawerOpen{
  from{opacity:0; transform:translateY(-8px);}
  to{opacity:1; transform:translateY(0);}
}

/* Floating TUNA AI assistant */
.aiChat{
  position:fixed;
  right:18px;
  bottom:82px;
  z-index:230;
  color:rgba(248,251,255,.96);
}
.aiChat__fab{
  position:relative;
  width:62px;
  height:62px;
  border:0;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:1000;
  letter-spacing:.04em;
  cursor:pointer;
  background:linear-gradient(135deg, #32d6ff, #1b6fdb 58%, #061a32);
  box-shadow:0 22px 60px rgba(0,0,0,.46), 0 0 0 1px rgba(255,255,255,.12) inset;
  overflow:hidden;
}
.aiChat__orb{
  position:absolute;
  inset:-45%;
  background:conic-gradient(from 90deg, transparent, rgba(255,255,255,.42), transparent, rgba(90,214,255,.42), transparent);
  animation:aiOrb 4.8s linear infinite;
}
.aiChat__fab span:last-child{position:relative; z-index:1;}
.aiChat__panel{
  position:absolute;
  right:0;
  bottom:76px;
  width:min(390px, calc(100vw - 28px));
  border-radius:26px;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 15% 0%, rgba(90,214,255,.20), transparent 40%),
    linear-gradient(180deg, rgba(11,20,36,.96), rgba(5,8,15,.94));
  box-shadow:0 30px 100px rgba(0,0,0,.58);
  backdrop-filter:blur(16px);
  overflow:hidden;
  transform-origin:100% 100%;
  animation:aiPanelIn .25s cubic-bezier(.16,1,.3,1) both;
}
.aiChat__panel[hidden]{display:none;}
.aiChat__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  padding:18px 18px 10px;
}
.aiChat__eyebrow{
  display:inline-flex;
  color:var(--cyan);
  font-size:.75rem;
  letter-spacing:.16em;
  font-weight:900;
}
.aiChat__head h3{
  margin-top:5px;
  font-size:1.2rem;
}
.aiChat__close{
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  color:#fff;
  cursor:pointer;
  font-size:1.25rem;
}
.aiChat__status{
  margin:0 18px 12px;
  padding:10px 12px;
  border-radius:16px;
  color:rgba(185,199,222,.88);
  background:rgba(255,255,255,.045);
  font-size:.88rem;
  line-height:1.45;
}
.aiChat__messages{
  max-height:265px;
  overflow:auto;
  padding:0 18px 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.aiBubble{
  max-width:92%;
  padding:11px 12px;
  border-radius:17px;
  line-height:1.45;
  color:rgba(232,238,248,.92);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 12px 34px rgba(0,0,0,.22);
}
.aiBubble--user{
  align-self:flex-end;
  background:linear-gradient(135deg, rgba(90,214,255,.26), rgba(35,112,220,.18));
  border-color:rgba(90,214,255,.20);
}
.aiBubble--bot[data-demo="true"]{
  border-color:rgba(255,205,116,.26);
}
.aiChat__prompts{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:0 18px 12px;
}
.aiChat__prompts button,
.aiChat__form button{
  border:1px solid rgba(90,214,255,.16);
  color:#fff;
  background:rgba(90,214,255,.10);
  border-radius:999px;
  padding:8px 10px;
  cursor:pointer;
  font-weight:850;
}
.aiChat__form{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  padding:0 18px 18px;
}
.aiChat__form input{
  min-width:0;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(5,8,15,.46);
  color:#fff;
  padding:12px 13px;
  outline:none;
}
.aiChat__form input:focus{
  border-color:rgba(90,214,255,.28);
  box-shadow:0 0 0 4px rgba(90,214,255,.10);
}
@keyframes aiOrb{
  to{transform:rotate(360deg);}
}
@keyframes aiPanelIn{
  from{opacity:0; transform:translate3d(12px,16px,0) scale(.96);}
  to{opacity:1; transform:translate3d(0,0,0) scale(1);}
}

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

/* Mobile first-screen performance: hero + promoted brand block stay static and cheap. */
@media (max-width: 768px), (hover: none), (pointer: coarse){
  .hero{
    overflow:hidden;
  }

  .hero__left,
  .hero__right{
    width:100%;
    overflow:hidden;
  }

  .hero .h1{
    font-size:clamp(2.15rem, 10.4vw, 2.75rem) !important;
    line-height:1.08;
    max-width:min(100%, 350px);
    margin-left:auto;
    margin-right:auto;
    overflow-wrap:normal;
    word-break:normal;
    text-wrap:balance;
  }

  .hero .lead{
    max-width:min(100%, 340px);
    margin-left:auto;
    margin-right:auto;
  }

  .hero .cta{
    justify-content:center;
  }

  .capabilityMatrix,
  .drawerBody--grid{
    grid-template-columns:1fr;
  }

  .capabilityStack{
    min-height:auto;
    animation:none !important;
    transform:none !important;
  }

  .capabilityStack::before,
  .aiChat__orb{
    animation:none !important;
  }

  .contactCommand{
    width:100%;
    min-width:0;
  }

  .contactDrawer summary{
    align-items:flex-start;
  }

  .aiChat{
    right:14px;
    bottom:calc(88px + env(safe-area-inset-bottom));
  }

  .aiChat__panel{
    right:-4px;
    bottom:72px;
    max-height:min(74vh, 620px);
  }

  .aiChat__messages{
    max-height:34vh;
  }

  html.mobileMotion .hero,
  html.mobileMotion .hero *,
  html.mobileMotion .hero::before,
  html.mobileMotion .hero::after,
  html.mobileMotion .trustStrip,
  html.mobileMotion .trustStrip *,
  .finalBrand,
  .finalBrand *,
  .finalBrand::before,
  .finalBrand::after{
    animation:none !important;
    transition:none !important;
    will-change:auto !important;
  }

  html.mobileMotion .hero::before,
  html.mobileMotion .hero::after,
  .logoCard::after,
  .finalBrand::before,
  .finalBrand::after,
  .finalBrand__ambient,
  .finalBrand__ring,
  .finalBrand__beam,
  .finalBrand__particle,
  .finalBrand__logoShell::before,
  .finalBrand__logoShell::after{
    content:none !important;
    display:none !important;
  }

  .hero{
    contain:layout paint;
  }

  .logoCard,
  html.mobileMotion .motionLive.logoCard,
  html.mobileMotion .motionLive .logoCard{
    transform:none !important;
    box-shadow:0 16px 36px rgba(0,0,0,.34) !important;
  }

  .logoCard__ring,
  .logoCard__glow,
  html.mobileMotion .motionLive.logoCard .logoCard__ring,
  html.mobileMotion .motionLive.logoCard .logoCard__glow,
  html.mobileMotion .motionLive .logoCard .logoCard__ring,
  html.mobileMotion .motionLive .logoCard .logoCard__glow{
    display:none !important;
  }

  .logoCard__logo,
  html.mobileMotion .motionLive.logoCard .logoCard__logo,
  html.mobileMotion .motionLive .logoCard .logoCard__logo{
    transform:none !important;
    filter:none !important;
  }

  .finalBrand{
    padding:42px 0 54px;
    contain:layout paint;
    background:linear-gradient(180deg, rgba(7,14,25,.72), rgba(5,8,15,.92));
  }

  .finalBrand__stage{
    width:min(330px, 92vw);
    aspect-ratio:1 / .76;
  }

  .finalBrand__logoShell{
    width:min(235px, 66vw);
    border-radius:24px;
    transform:none !important;
    background:rgba(255,255,255,.04);
    box-shadow:0 18px 42px rgba(0,0,0,.32) !important;
    backdrop-filter:none !important;
  }

  .finalBrand__logoShell img{
    width:min(198px, 56vw);
    filter:none !important;
  }

  .finalBrand__node{
    box-shadow:none;
    background:rgba(5,8,15,.82);
    backdrop-filter:none;
  }

  .finalBrand__ticker span{
    box-shadow:none !important;
  }
}

/* Desktop 60fps performance layer:
   preserve motion, but avoid constant paint-heavy blur/filter work. */
@media (hover:hover) and (pointer:fine){
  html.desktop60 #fx{
    opacity:.72;
  }

  html.desktop60 .bg{
    will-change:transform;
  }

  html.desktop60 .bg::before{
    opacity:.24;
    filter:none;
    animation-duration:26s;
  }

  html.desktop60 .vignette{
    mix-blend-mode:normal;
    opacity:.82;
  }

  html.desktop60 .top,
  html.desktop60 .trustStrip__inner,
  html.desktop60 .modal__backdrop,
  html.desktop60 .aiChat__panel{
    backdrop-filter:none;
  }

  html.desktop60 .section,
  html.desktop60 .finalBrand{
    content-visibility:auto;
    contain-intrinsic-size:900px;
  }

  html.desktop60 .hero,
  html.desktop60 .hero *{
    content-visibility:visible;
  }

  html.desktop60.zokoScroll .zokoCandidate{
    filter:none;
    transform:translate3d(0, 26px, 0) scale(.992);
    transition:
      opacity .5s cubic-bezier(.16,1,.3,1) var(--zoko-delay, 0ms),
      transform .58s cubic-bezier(.16,1,.3,1) var(--zoko-delay, 0ms);
    will-change:opacity, transform;
  }

  html.desktop60.zokoScroll .zokoChild::before,
  html.desktop60.zokoScroll .zokoChild::after{
    will-change:transform, opacity;
  }

  html.desktop60.zokoScroll .card::after,
  html.desktop60.zokoScroll .capability::after,
  html.desktop60.zokoScroll .proj::before,
  html.desktop60.zokoScroll .adTile::after,
  html.desktop60.zokoScroll .pCard::after,
  html.desktop60.zokoScroll .pCardWide::after,
  html.desktop60.zokoScroll .step::after,
  html.desktop60.zokoScroll .seoItem::after,
  html.desktop60.zokoScroll .conversionPoint::after,
  html.desktop60.zokoScroll .landingPanel::after,
  html.desktop60.zokoScroll .landingStep::after,
  html.desktop60.zokoScroll .tCard::after{
    inset:-36% -22%;
    background:linear-gradient(112deg, transparent 44%, rgba(255,255,255,.14), transparent 58%);
  }

  html.desktop60.zokoScroll .zokoIn .card.zokoChild::after,
  html.desktop60.zokoScroll .zokoIn .capability.zokoChild::after,
  html.desktop60.zokoScroll .zokoIn .proj.zokoChild::before,
  html.desktop60.zokoScroll .zokoIn .adTile.zokoChild::after,
  html.desktop60.zokoScroll .zokoIn .pCard.zokoChild::after,
  html.desktop60.zokoScroll .zokoIn .pCardWide.zokoChild::after,
  html.desktop60.zokoScroll .zokoIn .step.zokoChild::after,
  html.desktop60.zokoScroll .zokoIn .seoItem.zokoChild::after,
  html.desktop60.zokoScroll .zokoIn .conversionPoint.zokoChild::after,
  html.desktop60.zokoScroll .zokoIn .landingPanel.zokoChild::after,
  html.desktop60.zokoScroll .zokoIn .landingStep.zokoChild::after,
  html.desktop60.zokoScroll .zokoIn .tCard.zokoChild::after{
    animation-duration:.78s;
  }

  html.desktop60 .finalBrand::before{
    filter:blur(10px);
    opacity:.58;
  }

  html.desktop60 .finalBrand::after{
    opacity:.42;
    animation-duration:32s;
  }

  html.desktop60 .finalBrand__logoShell img{
    filter:drop-shadow(0 18px 48px rgba(90,214,255,.24));
  }

  html.desktop60 .finalBrand__ring{
    box-shadow:inset 0 0 28px rgba(90,214,255,.04);
  }

  html.desktop60 .finalBrand__particle{
    box-shadow:0 0 14px rgba(90,214,255,.48);
  }

  html.desktop60 .logoCard__logo{
    filter:drop-shadow(0 14px 30px rgba(0,0,0,.34));
  }

  html.desktop60 .trustIcon{
    filter:none;
  }
}

/* Shared shell: multi-page header + mobile menu */
body.noScroll{
  overflow:hidden !important;
}

.top{
  backdrop-filter:blur(18px);
  background:
    linear-gradient(180deg, rgba(5,8,15,.88), rgba(5,8,15,.38)),
    radial-gradient(circle at top center, rgba(90,214,255,.12), transparent 52%);
}

.top__inner{
  min-height:76px;
}

.siteShell__toggle{
  width:44px;
  height:44px;
  display:none;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  color:rgba(232,238,248,.92);
  box-shadow:0 18px 40px rgba(0,0,0,.28);
  transition:transform .22s ease, border-color .22s ease, background .22s ease;
}

.siteShell__toggle span{
  width:18px;
  height:2px;
  display:block;
  border-radius:999px;
  background:currentColor;
}

.siteShell__toggle:hover{
  transform:translateY(-1px);
  border-color:rgba(90,214,255,.24);
  background:rgba(90,214,255,.10);
}

.siteShell__menuState{
  position:fixed;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  clip-path:inset(50%);
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
}

.mobileNav{
  position:fixed;
  inset:0;
  z-index:140;
  opacity:0;
  pointer-events:none;
  transition:opacity .24s ease;
}

.mobileNav.is-open{
  opacity:1;
  pointer-events:auto;
}

.siteShell__menuState:checked + .mobileNav{
  opacity:1;
  pointer-events:auto;
}

.mobileNav__backdrop{
  position:absolute;
  inset:0;
  border:0;
  background:rgba(2,6,12,.66);
  backdrop-filter:blur(8px);
}

.mobileNav__panel{
  position:absolute;
  top:0;
  right:0;
  width:min(430px, 100%);
  height:100%;
  display:flex;
  flex-direction:column;
  gap:22px;
  padding:24px 22px calc(30px + env(safe-area-inset-bottom));
  border-left:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at top right, rgba(90,214,255,.16), transparent 32%),
    linear-gradient(180deg, rgba(10,16,28,.96), rgba(4,8,14,.98));
  box-shadow:-30px 0 120px rgba(0,0,0,.42);
  transform:translate3d(100%,0,0);
  transition:transform .32s cubic-bezier(.16,1,.3,1);
}

.mobileNav.is-open .mobileNav__panel{
  transform:translate3d(0,0,0);
}

.siteShell__menuState:checked + .mobileNav .mobileNav__panel{
  transform:translate3d(0,0,0);
}

.mobileNav__top{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:16px;
  align-items:start;
}

.mobileNav__eyebrow{
  font-size:.76rem;
  letter-spacing:.16em;
  color:rgba(185,199,222,.74);
}

.mobileNav__top h2{
  margin-top:10px;
  font-size:clamp(1.55rem, 6vw, 2rem);
  line-height:1.02;
}

.mobileNav__top p{
  margin-top:10px;
  color:rgba(185,199,222,.88);
  line-height:1.55;
}

.mobileNav__close{
  width:42px;
  height:42px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  color:rgba(232,238,248,.92);
  font-size:1.6rem;
  line-height:1;
}

.mobileNav__links{
  display:grid;
  gap:10px;
}

.mobileNav__link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:58px;
  padding:16px 18px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)),
    radial-gradient(circle at left top, rgba(90,214,255,.10), transparent 56%);
  color:rgba(232,238,248,.92);
  font-weight:800;
  font-size:1rem;
  box-shadow:0 18px 44px rgba(0,0,0,.22);
}

.mobileNav__link::after{
  content:">";
  font-size:1.2rem;
  color:rgba(90,214,255,.92);
}

.mobileNav__link.is-current{
  border-color:rgba(90,214,255,.24);
  background:
    linear-gradient(180deg, rgba(90,214,255,.14), rgba(47,125,255,.08)),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow:0 20px 54px rgba(10,24,48,.42);
}

.mobileNav__actions{
  margin-top:auto;
  display:grid;
  gap:12px;
}

.mobileNav__actions .langToggle,
.mobileNav__actions .btn{
  width:100%;
  min-height:52px;
}

body:has(.siteShell__menuState:checked){
  overflow:hidden;
}

@media (max-width: 980px){
  .top__inner{
    min-height:72px;
  }

  .nav{
    display:none;
  }

  .topActions .btn--small{
    display:none;
  }

  .siteShell__toggle{
    display:inline-flex;
  }
}

@media (max-width: 640px){
  .top__inner{
    gap:12px;
  }

  .brand__name{
    font-size:.92rem;
  }

  .topActions{
    gap:8px;
  }

  .langToggle{
    min-width:58px;
    height:38px;
    padding:0 8px;
  }

  .siteShell__toggle{
    width:40px;
    height:40px;
    border-radius:13px;
  }

  .mobileNav__panel{
    padding:20px 18px calc(28px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 980px){
  .heroGlass{
    min-width:0;
    max-width:min(74%, 232px);
    padding:12px 13px;
    border-radius:18px;
  }

  .heroGlass strong{
    font-size:.92rem;
  }

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

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

@media (max-width: 640px){
  .heroGlass{
    max-width:min(82%, 212px);
    padding:10px 12px;
  }

  .heroGlass span{
    font-size:.66rem;
  }

  .heroGlass strong{
    font-size:.86rem;
  }

  .heroGlass--primary{
    top:12px;
    left:12px;
  }

  .heroGlass--secondary{
    right:12px;
    bottom:12px;
    max-width:min(68%, 188px);
  }

  .storyBand__inner{
    gap:18px;
  }

  .storyBand__point{
    min-height:0;
  }
}

@media (max-width: 768px), (hover: none), (pointer: coarse){
  .siteShell__toggle,
  .mobileNav,
  .mobileNav *,
  .topActions{
    pointer-events:auto !important;
    touch-action:manipulation !important;
  }
}