:root{
  /* MSE Design system */
  --bg: #111317;
  --surface: #181c22;
  --surface-2: #1f242c;
  --bg2: #141a24;
  --bg3: #0e1116;
  --card: rgba(255,255,255,0.03);
  --border: rgba(127,152,178,0.24);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(223,231,241,0.68);
  --accent: #53c2f7;
  --accent2: #2f7fcb;
  --glow: rgba(83,194,247,0.22);
  --radius:14px;
  --radius-lg:22px;
  --maxw:1240px;
  --pad:clamp(16px, 2.4vw, 28px);
  --container-max:1240px;
  --section-py:clamp(44px, 5vw, 80px);
  --section-gap-mobile:clamp(28px, 6vw, 60px);
  --fs-h1:clamp(2.15rem, 1.35rem + 3.8vw, 5rem);
  --fs-h2:clamp(1.45rem, 1.1rem + 1.6vw, 2.5rem);
  --fs-h3:clamp(1.1rem, 1rem + .65vw, 1.45rem);
  --fs-body:clamp(1rem, .97rem + .18vw, 1.08rem);
  --lh-tight:1.08;
  --lh-base:1.55;
  --shadow-soft:0 14px 48px rgba(0,0,0,0.45);
  --shadow-glow:0 20px 80px rgba(0,160,255,0.12);
  /* background blob positions (animated by GSAP) */
  --b1-x: 8%;
  --b1-y: 12%;
  --b2-x: 88%;
  --b2-y: 78%;
  --b3-x: 50%;
  --b3-y: 30%;
  --b4-x: 20%;
  --b4-y: 70%;
  /* orb intensity tuning */
  --orb-size: 920px;
  --orb-blur: 120px;
  --orb-opacity: 1;
  /* typography & spacing */
  --space-lg:7rem;
  --space-md:2.5rem;
  --lead-size:clamp(1.06rem, 1rem + .45vw, 1.32rem);
  --h1-size:clamp(3.5rem, 2.8rem + 2.2vw, 5rem);
  --h1-line:0.98;
  --section-gap:clamp(40px, 5vw, 80px);
  --nav-h:72px;
  --btn-radius:12px;
  --btn-h:46px;
  --btn-px:1.24rem;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0;width:100%;max-width:100%;scroll-behavior:auto}
body{
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:var(--lh-base);
  font-size:var(--fs-body);
  background:transparent; /* global background is provided by pseudo layers */
  position:relative;
  overflow-x:hidden;
}
html{overflow-x:hidden}
img{max-width:100%;display:block}
:where(h1,h2,h3,p,li,a,button){word-break:normal;overflow-wrap:break-word}

.skip-link{
  display:none !important;
}

a, a:visited{color:var(--accent)}
a:hover, a:focus{color:#b9c7ff}

/* Background container (fixed atmospheric layers) */
.bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.bg-noise{position:absolute;inset:0;background-image:url('assets/bg-texture.png');background-repeat:repeat;opacity:0.018;filter:contrast(1.01) brightness(.99)}
.bg-aurora{
  position:absolute;
  inset:-12%;
  background:
    radial-gradient(56% 48% at 18% 24%, rgba(83,194,247,0.2), transparent 62%),
    radial-gradient(52% 44% at 78% 34%, rgba(47,127,203,0.16), transparent 64%),
    radial-gradient(48% 40% at 46% 76%, rgba(120,167,214,0.1), transparent 66%);
  filter:blur(26px) saturate(1.1);
  opacity:.74;
  mix-blend-mode:screen;
  animation:auroraDrift 22s ease-in-out infinite alternate;
}
.bg-slides{
  position:absolute;
  inset:0;
  overflow:hidden;
  opacity:0;
  display:none;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.26) 52%, rgba(0,0,0,.06));
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.26) 52%, rgba(0,0,0,.06));
}
.bg-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1.08) translate3d(0,0,0);
  filter:saturate(1.05) contrast(1.03) brightness(.46);
  transition:opacity 1.3s ease;
  will-change:transform,opacity;
  animation:bgKenBurns 14s ease-in-out infinite;
}
.bg-slide.is-active{opacity:1}
.bg-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center, rgba(0,0,0,0) 30%, rgba(0,0,0,0.45) 100%);mix-blend-mode:multiply;opacity:0.7}
.bg-orb{position:absolute;left:50%;top:50%;width:720px;height:480px;border-radius:50%;pointer-events:none;filter:blur(84px) saturate(1.06);opacity:0.9;transform:translate3d(-50%,-50%,0)}
.bg-orb.orb-1{background:radial-gradient(circle at 30% 30%, rgba(60,203,255,0.16) 0%, rgba(60,203,255,0.06) 25%, transparent 55%);mix-blend-mode:screen}
.bg-orb.orb-2{background:radial-gradient(circle at 70% 40%, rgba(42,107,255,0.12) 0%, rgba(42,107,255,0.05) 28%, transparent 60%);mix-blend-mode:screen}
.bg-orb.orb-3{background:radial-gradient(circle at 40% 70%, rgba(60,203,255,0.08) 0%, rgba(42,107,255,0.04) 30%, transparent 66%);mix-blend-mode:screen}

/* ensure sections remain transparent */
section, .services, #cases, #about, #roi, #contact, .nav-wrap, .nav, .footer, header, .hero, .cases, .blog, .services-grid {background: transparent !important}

/* Mobile performance: reduce blur, opacity, and orbs count */
@media (max-width:768px){
  .bg-orb{filter:blur(36px);opacity:0.75}
  .bg-slides{opacity:.22}
  .bg-slide{animation-duration:16s}
  .bg-orb.orb-2{display:block}
  .bg-orb.orb-3{display:none}
}

@media (prefers-reduced-motion: reduce){
  .bg-orb,.bg-aurora,.bg-slide{animation:none !important;transition:none !important}
  .bg-slide{transform:none}
}

/* background texture layer */
body::before{
  content:"";
  position:fixed;inset:0;z-index:0;pointer-events:none;
  /* base dark gradient + subtle noise texture (covers entire canvas) */
  background-image:
    linear-gradient(165deg, var(--bg) 0%, var(--bg2) 55%, var(--bg3) 100%),
    url('assets/bg-texture.png');
  background-repeat: no-repeat, repeat;
  background-size: cover, 420px;
  background-position: center center, 0 0;
  opacity:1;
  filter: none;
}

/* soft radial accents */
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  /* soft radial glows layered over the dark base */
  background-image:
    radial-gradient(900px 660px at var(--b1-x) var(--b1-y), rgba(83,194,247,0.14), transparent 34%),
    radial-gradient(700px 560px at var(--b2-x) var(--b2-y), rgba(47,127,203,0.12), transparent 30%),
    radial-gradient(520px 400px at var(--b3-x) var(--b3-y), rgba(131,176,220,0.07), transparent 36%),
    radial-gradient(420px 320px at var(--b4-x) var(--b4-y), rgba(83,194,247,0.05), transparent 38%);
  background-repeat: no-repeat,no-repeat,no-repeat,no-repeat;
  background-position: var(--b1-x) var(--b1-y), var(--b2-x) var(--b2-y), var(--b3-x) var(--b3-y), var(--b4-x) var(--b4-y);
  opacity:0.95;
  will-change: background-position, opacity;
  filter: blur(32px) saturate(1.06);
  transition:opacity .45s linear;
  mix-blend-mode: screen;
  animation: blobMove 36s linear infinite;
}

@keyframes blobMove{
  0%{
    background-position: 8% 12%, 88% 78%, 50% 30%, 20% 70%;
  }
  25%{
    background-position: 10% 16%, 86% 74%, 52% 28%, 18% 66%;
  }
  50%{
    background-position: 12% 12%, 88% 82%, 48% 32%, 22% 72%;
  }
  75%{
    background-position: 9% 10%, 90% 76%, 50% 26%, 18% 68%;
  }
  100%{
    background-position: 8% 12%, 88% 78%, 50% 30%, 20% 70%;
  }
}

@keyframes auroraDrift{
  0%{transform:translate3d(-2.5%, -1.5%, 0) scale(1.02)}
  50%{transform:translate3d(2%, 2%, 0) scale(1.06)}
  100%{transform:translate3d(1.2%, -2.2%, 0) scale(1.03)}
}

@keyframes bgKenBurns{
  0%{transform:scale(1.08) translate3d(-1%, -1%, 0)}
  50%{transform:scale(1.16) translate3d(1.8%, 1.4%, 0)}
  100%{transform:scale(1.1) translate3d(-1.4%, .8%, 0)}
}

/* Performance-friendly adjustments */
@media (max-width:520px){
  body::after{filter:blur(18px);opacity:0.85;animation:none}
  body::before{opacity:0.06}
}

@media (prefers-reduced-motion: reduce){
  body::after{animation:none;transition:none}
}

.container{max-width:var(--container-max);margin:0 auto;padding-inline:var(--pad);position:relative;z-index:10}

/* Make sections transparent so the global background shows through */
section, .services, #cases, #about, #roi, #contact, .nav-wrap, .nav, .footer, header, .hero, .cases, .blog, .services-grid {
  background: transparent !important;
}

/* Subtle grain overlay (inserted via JS) */
.grain{position:fixed;inset:0;pointer-events:none;z-index:5;opacity:0.04;mix-blend-mode:overlay;background-image:
  repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0 1px, transparent 1px 4px),
  repeating-linear-gradient(90deg, rgba(255,255,255,0.008) 0 1px, transparent 1px 6px);
background-size: 100% 100%, 100% 100%;filter:contrast(1.02) saturate(0.98);}

/* NAVBAR */
.nav-wrap{position:fixed;top:0;left:0;right:0;z-index:60;isolation:isolate}
.nav-wrap::before{
  content:"";
  position:fixed;
  left:0;
  right:0;
  top:0;
  height:calc(var(--nav-h) + 10px);
  background:linear-gradient(180deg,rgba(10,14,20,.78),rgba(10,14,20,.42));
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.05);
  pointer-events:none;
  z-index:-1;
}
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))){
  .nav-wrap::before{
    background:rgba(10,14,20,.92);
  }
}
.nav{height:var(--nav-h);display:flex;align-items:center;gap:.75rem;justify-content:space-between;padding:.65rem 0;position:relative;z-index:1;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo-img{height:28px;width:auto;display:block;filter:drop-shadow(0 8px 20px var(--glow));border-radius:6px}
.logo-text{color:var(--text);font-weight:800;letter-spacing:.3px}
.nav-links{display:flex;gap:1.25rem;list-style:none;margin:0;padding:0}
.nav-links a{color:var(--muted);text-decoration:none;padding:.35rem .6rem;border-radius:10px;font-weight:600;position:relative}
.nav-links a:hover,.nav-links a:focus{color:var(--text);outline:none;text-decoration:none}
.nav-cta .btn{padding:.58rem .95rem;white-space:nowrap;font-size:.95rem}
.nav-toggle{display:none;background:transparent;border:0;color:var(--text);font-size:1.25rem}

/* HERO */
/* CRO hero: disable overloaded intro block */
#intro{display:none !important}

/* HERO live background */
.intro{
  position:relative;
  height:100svh;
  height:100dvh;
  min-height:640px;
  margin-top:calc(-1 * var(--nav-h));
  padding-top:var(--nav-h);
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
  isolation:isolate;
}
.intro-inner{
  position:relative;
  z-index:2;
  width:min(920px, 92vw);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.35rem;
}
.intro::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(130% 110% at 50% 0%, rgba(20,34,52,.24), rgba(9,13,19,.78) 62%, rgba(7,10,15,.94) 100%),
    linear-gradient(180deg, rgba(5,8,12,.5) 0%, rgba(5,8,12,.82) 100%);
  z-index:1;
  pointer-events:none;
}
.intro-fog{
  position:absolute;
  border-radius:50%;
  filter:blur(140px);
  pointer-events:none;
  z-index:0;
  will-change:transform, opacity;
}
.intro .fog-1{
  width:64vw;
  height:64vw;
  min-width:560px;
  min-height:560px;
  left:-18vw;
  top:-20vh;
  background:radial-gradient(circle at 42% 44%, rgba(96,220,255,.36), rgba(40,126,208,.18) 50%, transparent 76%);
  animation:introFogDriftA 16s ease-in-out infinite alternate;
}
.intro .fog-2{
  width:58vw;
  height:58vw;
  min-width:520px;
  min-height:520px;
  right:-18vw;
  top:-8vh;
  background:radial-gradient(circle at 56% 42%, rgba(70,162,244,.34), rgba(22,72,124,.18) 54%, transparent 78%);
  animation:introFogDriftB 18s ease-in-out infinite alternate;
}
.intro .fog-3{
  width:94vw;
  height:64vw;
  min-width:980px;
  min-height:600px;
  left:50%;
  transform:translateX(-50%);
  bottom:-42vh;
  background:radial-gradient(ellipse at 50% 34%, rgba(148,205,247,.34) 0%, rgba(83,194,247,.24) 30%, rgba(26,54,88,.22) 64%, transparent 86%);
  animation:introFogDriftC 14s ease-in-out infinite alternate;
}
.intro .fog-4{
  width:48vw;
  height:48vw;
  min-width:420px;
  min-height:420px;
  left:28vw;
  top:18vh;
  background:radial-gradient(circle at 46% 46%, rgba(146,172,205,.24), rgba(58,92,126,.14) 52%, transparent 80%);
  animation:introFogDriftD 17s ease-in-out infinite alternate;
}
.intro-sweep{
  position:absolute;
  inset:-30% -20%;
  pointer-events:none;
  z-index:0;
  background:linear-gradient(118deg, transparent 32%, rgba(101,205,255,.08) 49%, rgba(75,148,220,.12) 56%, transparent 72%);
  mix-blend-mode:screen;
  filter:blur(30px);
  animation:introSweep 16s ease-in-out infinite;
  will-change:transform,opacity;
}
.intro-grain{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.07;
  mix-blend-mode:soft-light;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 5px);
  animation:introNoiseShift 12s linear infinite;
}
.intro-vignette{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  background:radial-gradient(120% 100% at 50% 42%, rgba(0,0,0,0) 34%, rgba(5,8,12,.42) 74%, rgba(5,8,12,.74) 100%);
}
.intro::after{
  content:"";
  position:absolute;
  left:50%;
  width:min(1600px, 140vw);
  transform:translateX(-50%);
  bottom:-240px;
  height:560px;
  pointer-events:none;
  background:
    radial-gradient(72% 100% at 50% 10%, rgba(118,193,245,.34) 0%, rgba(96,160,224,.22) 34%, rgba(33,62,97,.2) 62%, rgba(14,18,26,0) 88%),
    radial-gradient(42% 70% at 50% 0%, rgba(83,194,247,.2) 0%, rgba(14,18,26,0) 80%);
  filter:blur(116px);
  opacity:.78;
  z-index:1;
  animation:sectionBlendIntro 12s ease-in-out infinite alternate;
}
@keyframes introFogDriftA{
  0%{transform:translate3d(-2%, -2%, 0) scale(1)}
  100%{transform:translate3d(4%, 3%, 0) scale(1.08)}
}
@keyframes introFogDriftB{
  0%{transform:translate3d(2%, -2%, 0) scale(1.02)}
  100%{transform:translate3d(-3%, 4%, 0) scale(1.1)}
}
@keyframes introFogDriftC{
  0%{transform:translate3d(-1%, 1%, 0) scale(1)}
  100%{transform:translate3d(3%, -2%, 0) scale(1.06)}
}
@keyframes introFogDriftD{
  0%{transform:translate3d(-2%, 1%, 0) scale(1)}
  100%{transform:translate3d(2%, -3%, 0) scale(1.08)}
}
@keyframes introSweep{
  0%{transform:translate3d(-3%, -2%, 0);opacity:.42}
  50%{transform:translate3d(2%, 2%, 0);opacity:.6}
  100%{transform:translate3d(4%, 4%, 0);opacity:.36}
}
@keyframes introNoiseShift{
  0%{transform:translate3d(0,0,0)}
  100%{transform:translate3d(0,-12px,0)}
}
.intro-tags{
  margin:0;
  color:rgba(218,236,250,.96);
  letter-spacing:.03em;
  font-weight:700;
  font-size:1rem;
  text-shadow:0 4px 18px rgba(0,0,0,.35);
  position:relative;
  z-index:1;
}
.intro-title{
  margin:0;
  font-size:clamp(4.8rem, 2.5rem + 7.4vw, 9rem);
  line-height:.9;
  letter-spacing:-0.04em;
  color:rgba(247,252,255,.98);
  text-shadow:0 28px 80px rgba(83,194,247,.24), 0 0 1px rgba(255,255,255,.45);
  position:relative;
  z-index:1;
}
.intro-title .intro-accent{
  display:block;
  margin-top:.25rem;
  font-size:clamp(1.35rem, .95rem + 1.6vw, 2.5rem);
  font-weight:700;
  letter-spacing:.01em;
  color:rgba(196,228,248,.92);
}
.intro-subtitle{
  margin:0;
  max-width:820px;
  color:rgba(236,244,251,.96);
  font-size:clamp(1.2rem, .95rem + .9vw, 1.62rem);
  line-height:1.45;
  text-shadow:0 4px 24px rgba(0,0,0,.34);
  position:relative;
  z-index:1;
}
/* Full-bleed marquee */
.hero-marquee{
  position:relative;
  z-index:2;
  width:min(1040px, 94vw);
  overflow:hidden;
  border-top:1px solid rgba(92,215,255,.2);
  border-bottom:1px solid rgba(92,215,255,.2);
  background:rgba(10,18,28,.46);
  border-radius:999px;
  mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.hero-marquee.full-bleed{
  position:absolute;
  left:0;
  right:0;
  bottom:44px;
  transform:none;
  width:auto;
  border-radius:0;
  border-left:0;
  border-right:0;
  z-index:3;
  background:rgba(8,14,22,.48);
  box-shadow:0 0 30px rgba(83,194,247,.08);
}
.hero-marquee-track{
  display:flex;
  width:max-content;
  gap:0;
  padding:.46rem 0;
  animation:heroMarquee var(--ticker-duration, 24s) linear infinite;
  animation-fill-mode:both;
  will-change:transform;
}
.ticker__content{
  flex:0 0 auto;
  display:inline-flex;
  color:rgba(219,236,248,.9);
  font-size:.88rem;
  white-space:nowrap;
  letter-spacing:.01em;
  font-weight:600;
  padding-inline:clamp(14px, 2vw, 24px);
}
.hero-marquee:hover .hero-marquee-track{animation-play-state:paused}
@keyframes heroMarquee{
  0%{transform:translateX(0)}
  100%{transform:translateX(calc(-1 * var(--marquee-shift, 50%)))}
}
/* Floating chips */
/* Floating chips full-screen */
.hero-float-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  display:none;
}
.floating-chip{
  --float-y:8px;
  --float-rot:-0.8deg;
  --float-dur:14s;
  position:absolute;
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  padding:.32rem .62rem;
  border-radius:999px;
  background:rgba(11,19,29,.5);
  border:1px solid rgba(92,215,255,.18);
  color:rgba(227,240,250,.82);
  font-size:.74rem;
  font-weight:600;
  backdrop-filter:blur(8px);
  opacity:0;
  transform:translateY(14px);
  letter-spacing:.01em;
  white-space:nowrap;
  animation:chipReveal .75s cubic-bezier(.2,.9,.2,1) forwards, chipFloat var(--float-dur) ease-in-out infinite;
  will-change:transform,opacity;
}
.chip-1{left:6%;top:12%;animation-delay:.42s;--float-y:6px;--float-dur:12s}
.chip-2{right:7%;top:14%;animation-delay:.52s;--float-y:9px;--float-dur:15s}
.chip-3{left:8%;top:30%;animation-delay:.62s;--float-y:7px;--float-dur:13.5s}
.chip-4{right:8%;top:32%;animation-delay:.72s;--float-y:10px;--float-dur:16s}
.chip-5{left:14%;top:48%;animation-delay:.82s;--float-y:8px;--float-dur:14.5s}
.chip-6{right:14%;top:50%;animation-delay:.92s;--float-y:6px;--float-dur:12.5s}
.chip-7{left:6%;bottom:28%;animation-delay:1.02s;--float-y:11px;--float-dur:17s}
.chip-8{right:6%;bottom:28%;animation-delay:1.12s;--float-y:9px;--float-dur:15.5s}
.chip-9{left:11%;bottom:14%;animation-delay:1.22s;--float-y:7px;--float-dur:13s}
.chip-10{right:11%;bottom:14%;animation-delay:1.32s;--float-y:8px;--float-dur:14s}
.chip-11{left:28%;top:18%;animation-delay:1.42s;--float-y:6px;--float-dur:12.8s}
.chip-12{right:28%;top:18%;animation-delay:1.52s;--float-y:10px;--float-dur:16.8s}
@keyframes chipReveal{
  to{opacity:.95;transform:translateY(0)}
}
@keyframes chipFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  50%{transform:translate3d(0,calc(var(--float-y) * -1),0) rotate(var(--float-rot))}
}
.intro-scroll{
  margin-top:.55rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  padding:.6rem .95rem;
  border-radius:999px;
  border:1px solid rgba(92,215,255,.44);
  background:rgba(10,17,26,.74);
  color:rgba(241,248,255,.95);
  box-shadow:0 10px 30px rgba(0,160,255,.16);
  position:relative;
  z-index:1;
}
.hero{
  display:grid;
  grid-template-columns:1fr 520px;
  align-items:center;
  gap:clamp(24px,3.2vw,48px);
  min-height:calc(100svh - var(--nav-h));
  min-height:calc(100dvh - var(--nav-h));
  padding:clamp(14px,2.2vw,28px) 0;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.hero > *{
  position:relative;
  z-index:2;
  min-width:0;
}
.hero-left{
  position:relative;
  z-index:2;
}
.hero-left::before{
  content:"";
  position:absolute;
  inset:-56px -74px -52px -70px;
  z-index:-1;
  pointer-events:none;
  border-radius:50%;
  background:
    radial-gradient(62% 72% at 22% 48%, rgba(96,182,245,.24) 0%, rgba(42,84,135,.16) 42%, rgba(10,18,30,0.05) 62%, rgba(10,18,30,0) 82%),
    radial-gradient(48% 62% at 34% 56%, rgba(52,140,212,.14) 0%, rgba(8,16,28,0) 78%);
  filter:blur(42px);
  opacity:.82;
  mix-blend-mode:screen;
}
.eyebrow{color:var(--muted);font-weight:600;margin:0 0 .6rem}
.hero-left h1{
  font-size:clamp(32px, 4.1vw, 62px);
  margin:0 0 .65rem;
  font-weight:800;
  line-height:.98;
  letter-spacing:-0.015em;
  text-shadow:0 18px 54px rgba(83,194,247,0.14);
  max-width:12.6ch;
  text-wrap:balance;
}
.hero-left h1::after{content:"";display:block;height:6px;margin-top:12px;border-radius:6px;width:60px;background:linear-gradient(90deg,var(--accent),var(--accent2));filter:blur(8px);opacity:.9}
.hero-title .hero-line{display:block;overflow:clip}
.hero-title .hero-line-inner{display:block}
.hero-title .hero-word{
  position:relative;
  background:linear-gradient(90deg,#ffffff,var(--accent),var(--accent2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-title .hero-word::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-0.08em;
  height:.42em;
  background:radial-gradient(ellipse at center, rgba(47,127,203,.44), rgba(83,194,247,.3) 48%, transparent 80%);
  filter:blur(12px);
  z-index:-1;
}
.lead{
  color:var(--muted);
  font-size:clamp(14px, 1.2vw, 18px);
  line-height:1.4;
  max-width:640px;
}
.hero-ctas{margin-top:1rem;display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}
.hero-cta-line{gap:1rem}
.hero-includes{
  list-style:none;
  margin:.5rem 0 0;
  padding:0;
  display:grid;
  gap:.26rem;
}
.hero-includes li{
  color:rgba(220,234,246,.92);
  font-size:clamp(14px,1vw,16px);
  line-height:1.32;
  padding-left:.85rem;
  position:relative;
}
.hero-includes li::before{
  content:"";
  position:absolute;
  left:0;
  top:.46rem;
  width:5px;
  height:5px;
  border-radius:50%;
  background:linear-gradient(120deg,var(--accent),var(--accent2));
}

.hero-proof .panel-content{padding:1.2rem 1.25rem}
.hero-proof-title{
  margin:0 0 .8rem;
  font-size:clamp(1rem, .96rem + .26vw, 1.12rem);
  font-weight:600;
  color:rgba(236,246,254,.94);
  letter-spacing:.01em;
}
.hero-proof-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.78rem;
}
.hero-proof-list li{
  display:grid;
  grid-template-columns:24px 1fr;
  gap:.72rem;
  align-items:flex-start;
  padding:.68rem .74rem;
  border:1px solid rgba(126,166,204,.16);
  border-radius:12px;
  background:linear-gradient(170deg, rgba(9,15,23,.42), rgba(9,15,23,.28));
}
.hero-proof-list li span{
  display:flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border-radius:999px;
  background:linear-gradient(120deg,var(--accent),var(--accent2));
  color:#02101d;
  font-weight:800;
  font-size:.78rem;
}
.hero-proof-list li strong{display:block;font-size:clamp(.95rem, .92rem + .15vw, 1.02rem);font-weight:600;line-height:1.28;color:rgba(234,245,254,.93)}
.hero-proof-list li small{display:block;margin-top:4px;font-size:clamp(.82rem, .8rem + .12vw, .88rem);line-height:1.4;color:rgba(202,223,241,.76)}
.hero-proof-note{
  margin:.95rem 0 0;
  color:rgba(202,223,241,.76);
  font-size:clamp(.84rem, .82rem + .13vw, .9rem);
  line-height:1.45;
}
.miniapp-note{display:none}

/* Hero left glow: smooth radial blend without hard vertical edge */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(78% 120% at 14% 52%, rgba(67,163,242,.18) 0%, rgba(33,70,118,.12) 38%, rgba(10,18,30,.05) 56%, rgba(5,10,20,0) 76%),
    radial-gradient(52% 84% at 32% 54%, rgba(60,203,255,.09) 0%, rgba(9,17,30,0) 78%),
    radial-gradient(38% 62% at 84% 56%, rgba(52,118,196,.06) 0%, rgba(7,14,24,0) 82%);
  filter:blur(52px);
  opacity:.86;
}

/* Buttons: primary cyan→blue, secondary transparent with cyan border */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  padding:.8rem var(--btn-px);
  min-height:var(--btn-h);
  line-height:1.2;
  border-radius:var(--btn-radius);
  background:transparent;
  border:1px solid rgba(255,255,255,0.08);
  color:var(--text);
  text-decoration:none;
  font-weight:700;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn.primary{
  background:linear-gradient(120deg,var(--accent),var(--accent2));
  color:#061022;
  border:0;
  box-shadow:0 12px 40px var(--glow);
}
.btn.ghost{
  background:rgba(11,17,26,.42);
  border:1px solid rgba(83,194,247,0.42);
  color:var(--text);
}
.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 44px rgba(5,8,26,0.46), 0 0 20px rgba(83,194,247,0.16);
  border-color:rgba(83,194,247,0.56);
}
.btn:focus-visible{
  outline:2px solid rgba(83,194,247,0.5);
  outline-offset:2px;
}

.link-cta{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  color:rgba(183,220,245,.95);
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid rgba(83,194,247,.35);
  padding-bottom:2px;
  transition:color .18s ease, border-color .18s ease;
}
.link-cta:hover,
.link-cta:focus-visible{
  color:#e8f6ff;
  border-bottom-color:rgba(83,194,247,.85);
  outline:none;
}

/* Tech visual - no photos */
.tech-visual{position:relative;border-radius:16px;overflow:hidden;min-height:360px;background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);box-shadow:0 30px 80px rgba(2,6,23,0.6);border:1px solid rgba(255,255,255,0.02)}
.tech-grid{position:absolute;inset:0;background-image:
  linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px;opacity:0.06}
.tech-visual::before{content:"";position:absolute;inset:-20%;background:radial-gradient(closest-side, rgba(60,203,255,0.06), transparent 25%);filter:blur(40px);opacity:0.8;pointer-events:none}

/* Cards (glass) */
.card{background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));backdrop-filter:blur(10px);padding:1.5rem;border-radius:var(--radius-lg);transition:transform .22s ease,box-shadow .22s ease,border-color .18s ease;background-color:var(--surface);border:1px solid var(--border);will-change:transform,opacity}
.card{display:flex;flex-direction:column;gap:.7rem}
.card h3{margin:0 0 .6rem}
.card .small{color:var(--muted);font-size:.95rem}
.card:hover{transform:translateY(-8px);box-shadow:0 50px 140px rgba(10,16,24,0.56), 0 0 52px rgba(83,194,247,0.1);border-color:rgba(83,194,247,0.3);z-index:6}

/* Services specific */
.service{display:flex;flex-direction:column;height:100%}
.service{min-height:100%}
.service .benefit{margin:.45rem 0 .72rem;color:var(--text);font-weight:700;line-height:1.35}
.service-list{list-style:none;padding:0;margin:0;color:var(--muted);font-size:.95rem;display:block}
.service-list li{padding:.5rem 0;border-top:1px solid rgba(255,255,255,0.06);line-height:1.45}

/* Cases - premium glass cards with subtle cyan glow */
.cases-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.case{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:.8rem;
  padding:0;
  border-radius:var(--radius-lg);
  background:linear-gradient(145deg, rgba(10,12,16,0.55), rgba(15,18,26,0.55));
  border:1px solid rgba(255,255,255,0.08);
  backdrop-filter:blur(10px);
  box-shadow:0 24px 80px rgba(2, 8, 18, 0.52);
  overflow:hidden;
  cursor:default;
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s ease;
}
.case::before,
.case::after{
  content:"";
  position:absolute;
  inset:-18%;
  pointer-events:none;
  border-radius:inherit;
}
.case::before{
  background:radial-gradient(circle at 24% 16%, rgba(83,194,247,0.34), rgba(47,127,203,0.16) 42%, transparent 70%);
  filter:blur(26px);
  opacity:0;
  transition:none;
  z-index:0;
}
.case::after{
  inset:-1px;
  border:1px solid rgba(83,194,247,0);
  box-shadow:0 0 0 1px rgba(83,194,247,0), 0 0 0 0 rgba(83,194,247,0);
  opacity:0;
  transition:none;
  z-index:1;
}
.case:hover,
.case:focus-within{
  transform:none;
  box-shadow:0 24px 80px rgba(2, 8, 18, 0.52);
  border-color:rgba(255,255,255,0.08);
}
.case:hover::before,
.case:focus-within::before{opacity:0}
.case:hover::after,
.case:focus-within::after{
  opacity:0;
  border-color:rgba(83,194,247,0);
  box-shadow:none;
}

.case-figure{position:relative;overflow:hidden;border-radius:18px;margin:10px 10px 0;z-index:2}
.case-figure{aspect-ratio:16/9}
.case-gradient{
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(180deg, rgba(7,10,18,0.12) 0%, rgba(7,10,18,0.58) 100%);
  opacity:.85;
  transition:none;
}
.case[data-case="prokrasotu"] .case-gradient{
  background:linear-gradient(180deg, rgba(8,12,18,0.18) 0%, rgba(7,10,18,0.62) 100%);
}
.case[data-case="4angelz"] .case-gradient{
  background:linear-gradient(180deg, rgba(8,10,16,0.22) 0%, rgba(5,8,14,0.72) 100%);
}
.case-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:inherit;
  filter:contrast(1.08) saturate(1.04) brightness(.9);
  transition:none;
  will-change:auto;
}

.metrics-overlay{
  position:absolute;
  left:12px;
  top:12px;
  display:flex;
  gap:.45rem;
  z-index:3;
  opacity:1;
  transform:none;
}
.metrics-overlay .m{
  background:rgba(9,12,18,0.56);
  padding:.42rem .64rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  backdrop-filter:blur(10px);
  font-weight:800;
  color:var(--text);
  font-size:.88rem;
  line-height:1.1;
}
.metrics-overlay .m span{
  display:block;
  font-weight:600;
  color:rgba(222,235,247,0.86);
  font-size:.68rem;
  margin-top:2px;
}

.case:hover .case-img,
.case:focus-within .case-img{
  transform:none;
  filter:contrast(1.08) saturate(1.04) brightness(.9);
}
.case:hover .case-gradient,
.case:focus-within .case-gradient{opacity:.85}

.case-actions{display:flex;gap:.65rem;flex-wrap:wrap;padding:0 1rem 1rem;z-index:2}
.case-actions{margin-top:auto}
.case-figure.is-fallback{
  min-height:340px;
  background:
    linear-gradient(145deg, rgba(83,194,247,0.16), rgba(47,127,203,0.1)),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 14px),
    linear-gradient(180deg, #1b2028, #12161d);
}
.case-figure.is-fallback::after{
  content:attr(data-fallback);
  position:absolute;
  left:1rem;
  bottom:1rem;
  font-size:1.16rem;
  font-weight:800;
  color:var(--text);
  z-index:4;
}

@media (prefers-reduced-motion: reduce){
  .hero::before, body::after, .card, .case-img, .tech-panel, .cursor-glow {animation:none !important; transition:none !important}
  .case:hover .case-img, .card:hover {transform:none !important;box-shadow:none !important}
}

/* Keep heading and muted copy below image */
.case h3{margin:0 0 0.25rem}
.case p.muted{margin:0 0 1rem}
.case > h3,
.case > p.muted{padding:0 1rem}

#cases.visible .case{opacity:1;transform:none}
#cases.visible .case:nth-child(2){transition-delay:.12s}
.read{display:inline-flex;align-items:center;font-weight:700}

/* Cases: fully static cards/images (no hover lift/zoom/glow) */
#cases .case,
#cases .case.card{
  transform:none !important;
  transition:opacity .6s ease !important;
}
#cases .case:hover,
#cases .case:focus-within,
#cases .case.card:hover,
#cases .case.card:focus-within{
  transform:none !important;
  box-shadow:0 24px 80px rgba(2, 8, 18, 0.52) !important;
  border-color:rgba(255,255,255,0.08) !important;
}
#cases .case::before,
#cases .case::after{
  opacity:0 !important;
  transition:none !important;
  box-shadow:none !important;
}
#cases .case-figure,
#cases .case-img,
#cases .case-gradient{
  transform:none !important;
  transition:none !important;
  animation:none !important;
}
#cases .case-img{
  filter:none !important;
  will-change:auto !important;
}
#cases .case-gradient{
  display:none !important;
}
#cases .case:hover .case-img,
#cases .case:focus-within .case-img{
  transform:none !important;
  filter:none !important;
}
#cases .case:hover .case-gradient,
#cases .case:focus-within .case-gradient{
  opacity:0 !important;
}

/* Remove legacy compact metrics bar rules (no-op) */

/* Services grid */
.services-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
#services .services-grid{align-items:stretch}
#services .section-title{margin-bottom:.7rem}
#services > .muted{max-width:72ch;margin-bottom:2rem;color:rgba(226,234,246,.82)}
#services .service.card{
  min-height:286px;
  padding:1.35rem 1.45rem;
  border-radius:22px;
  background:linear-gradient(160deg, rgba(22,28,38,.82), rgba(16,22,33,.72));
  border:1px solid rgba(115,150,190,.24);
  box-shadow:0 12px 36px rgba(0,0,0,.28);
  display:grid;
  grid-template-rows:auto auto 1fr;
  align-content:start;
}
#services .service h3{
  margin:0;
  font-size:clamp(1.18rem, 1.03rem + .34vw, 1.38rem);
  line-height:1.2;
  letter-spacing:-.01em;
  min-height:2.2em;
}
#services .service .benefit strong{
  display:block;
  font-size:clamp(1rem, .96rem + .22vw, 1.14rem);
  font-weight:700;
  min-height:2.7em;
}
#services .service .service-list{align-self:end}
#services .service .service-list li{min-height:3.1em}
#services .service:hover{
  transform:translateY(-4px);
  border-color:rgba(120,180,228,.34);
  box-shadow:0 16px 44px rgba(0,0,0,.34), 0 0 28px rgba(83,194,247,.1);
}

/* Blog */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.blog .post{
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:.55rem;
  min-height:100%;
}
.blog .post:focus-visible{
  outline:2px solid rgba(83,194,247,0.42);
  outline-offset:2px;
}
.blog .post .post-benefit{
  margin:0 0 .35rem;
  color:rgba(209,229,245,0.9);
  font-weight:600;
  font-size:.92rem;
}
.blog a:link,
.blog a:visited,
.blog a:hover,
.blog a:active{
  color:var(--accent);
  text-decoration:none;
}
.blog .link-cta{
  width:max-content;
  margin-top:auto;
}

/* Trust block */
.trust{
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.trust-logos{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:.75rem;
  padding:1rem;
}
.trust-logos span{
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(122,164,205,.25);
  border-radius:12px;
  color:rgba(218,232,246,.92);
  font-weight:700;
  background:linear-gradient(160deg, rgba(24,31,43,.7), rgba(14,20,31,.6));
}
.trust-metrics{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:.75rem;
}
.metric-card{
  padding:1rem 1.1rem;
  gap:.35rem;
}
.metric-value{
  margin:0;
  font-size:clamp(1.55rem, 1.35rem + .9vw, 2.15rem);
  font-weight:800;
  color:#ecf7ff;
  line-height:1.05;
}
.metric-label{
  margin:0;
  color:var(--muted);
  font-weight:600;
}
.trust-reviews{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:.75rem;
}
.review-card{
  display:grid;
  grid-template-columns:56px 1fr;
  align-items:start;
  gap:.75rem;
  padding:1rem;
}
.review-card img{
  width:56px;
  height:56px;
  border-radius:999px;
  object-fit:cover;
  border:1px solid rgba(122,164,205,.35);
}
.review-quote{
  margin:0;
  color:rgba(229,238,246,.92);
  line-height:1.45;
}
.review-author{
  margin:.5rem 0 0;
  color:var(--muted);
  font-size:.92rem;
  font-weight:600;
}
/* About section upgrade */
.about-grid{display:grid;grid-template-columns:minmax(0, 980px)}
.about-card{
  padding:2rem;
  border-radius:24px;
  border:1px solid rgba(118,170,216,.22);
  background:linear-gradient(155deg, rgba(16,24,35,.84), rgba(10,16,26,.76));
  box-shadow:0 28px 90px rgba(0,0,0,.46), 0 0 56px rgba(83,194,247,.08);
  position:relative;
  overflow:hidden;
}
.about-card::before{
  content:"";
  position:absolute;
  inset:-30% -10% auto -10%;
  height:240px;
  background:radial-gradient(55% 80% at 50% 20%, rgba(83,194,247,.24), rgba(83,194,247,0) 72%);
  filter:blur(40px);
  pointer-events:none;
}
.about-advantages{
  margin:1rem 0 1.1rem;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:.75rem;
}
.about-advantage{
  padding:.9rem 1rem;
  border-radius:14px;
  border:1px solid rgba(117,161,204,.25);
  background:linear-gradient(160deg, rgba(20,30,43,.72), rgba(12,18,29,.58));
}
.about-advantage h3{
  margin:0 0 .34rem;
  font-size:1.03rem;
}
.about-advantage p{
  margin:0;
  color:rgba(218,233,246,.9);
  font-size:.95rem;
  line-height:1.45;
}
.about-advantage strong{
  color:#ebf8ff;
  font-weight:800;
}
.about-process{
  margin:0 0 1rem;
  padding:.95rem 1rem;
  border-radius:14px;
  border:1px solid rgba(117,161,204,.24);
  background:linear-gradient(160deg, rgba(17,26,37,.76), rgba(11,17,27,.6));
}
.about-process h3{
  margin:0 0 .62rem;
  font-size:1.02rem;
}
.about-process ol{
  margin:0;
  padding-left:1.05rem;
  color:rgba(220,236,248,.93);
}
.about-process li{
  margin:0 0 .45rem;
  line-height:1.45;
}
.about-guarantee{
  margin:0 0 1.15rem;
  padding:.95rem 1rem;
  border-radius:14px;
  border:1px solid rgba(83,194,247,.26);
  background:linear-gradient(155deg, rgba(18,30,46,.82), rgba(12,19,29,.64));
}
.about-guarantee p{
  margin:0;
  color:rgba(225,239,251,.94);
}
.about-guarantee p + p{
  margin-top:.55rem;
}
.about-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
}
.blog .post.post-focus{
  border-color:rgba(83,194,247,0.58);
  box-shadow:0 0 0 1px rgba(83,194,247,0.24), 0 22px 56px rgba(0,160,255,0.2);
  animation:postFocusPulse 1s ease;
}
@keyframes postFocusPulse{
  0%{transform:translateY(0) scale(1)}
  45%{transform:translateY(-3px) scale(1.01)}
  100%{transform:translateY(0) scale(1)}
}
/* Typography helpers */
h1{font-weight:800;margin:0 0 .72rem;font-size:var(--fs-h1);line-height:var(--lh-tight);letter-spacing:-0.03em}
h2{font-weight:800;margin:0 0 .85rem;font-size:var(--fs-h2);line-height:1.15;letter-spacing:-0.02em}
h3{font-weight:700;margin:0 0 .62rem;font-size:var(--fs-h3);line-height:1.25}
p{margin:0 0 1rem}
.kicker{
  margin:0 0 .55rem;
  color:rgba(152,198,233,.92);
  font-weight:700;
  letter-spacing:.02em;
  font-size:.9rem;
}
.section-title{font-size:var(--fs-h2);font-weight:800;letter-spacing:-0.3px;margin:0 0 1rem;color:var(--text)}
section:not(#hero):not(#intro){padding-top:var(--section-py);padding-bottom:var(--section-py);position:relative}
#hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-132px;
  height:260px;
  pointer-events:none;
  background:radial-gradient(64% 100% at 50% 0%, rgba(83,194,247,.18) 0%, rgba(23,40,62,.46) 48%, rgba(14,18,26,0) 100%);
  filter:blur(86px);
  opacity:.66;
}
@keyframes sectionBlendIntro{
  0%{transform:translateX(-50%) scale(1);opacity:.74}
  100%{transform:translateX(-50%) scale(1.06);opacity:.86}
}
@keyframes sectionBlendHero{
  0%{opacity:.62;transform:translateY(0)}
  100%{opacity:.86;transform:translateY(22px)}
}
#blog::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-120px;
  height:220px;
  pointer-events:none;
  background:linear-gradient(180deg, transparent 0%, rgba(47,127,203,.1) 40%, transparent 100%);
  filter:blur(24px);
  opacity:.58;
}
#contact::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-110px;
  height:200px;
  pointer-events:none;
  background:linear-gradient(180deg, transparent 0%, rgba(83,194,247,.09) 42%, transparent 100%);
  filter:blur(22px);
  opacity:.52;
}

/* ROI and Contact — premium glass panels and modern inputs */
/* Shared panel style rules (glass) */
.form-panel{background:rgba(255,255,255,0.04);backdrop-filter:blur(8px);border-radius:12px;border:1px solid rgba(255,255,255,0.1);box-shadow:0 10px 30px rgba(0,0,0,0.45);padding:1rem}

/* ROI form layout */
.roi-form{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;align-items:start}
.roi-form label{display:flex;flex-direction:column;gap:.5rem;font-weight:600;color:var(--muted)}
.roi-form input{appearance:none;background:transparent;border:1px solid rgba(255,255,255,0.06);padding:.6rem .75rem;border-radius:10px;color:var(--text);font-weight:700;outline:none;transition:box-shadow .18s ease,border-color .15s ease,transform .12s ease}
.roi-form input:focus-visible{border-color:rgba(60,203,255,0.6);box-shadow:0 8px 36px rgba(60,203,255,0.14),0 0 20px rgba(60,203,255,0.4)}
.roi-form input.is-invalid{border-color:rgba(255,120,120,.65);box-shadow:0 0 0 1px rgba(255,120,120,.25)}
.roi-form .btn{align-self:start;margin-top:.25rem}

/* ROI results styled as metrics card */
.roi-results{margin-top:1rem;padding:1.1rem;border-radius:14px;background:linear-gradient(160deg, rgba(18,26,37,.82), rgba(14,21,31,.72));border:1px solid rgba(128,170,210,.22);display:grid;grid-template-columns:1fr;gap:.9rem;align-items:start;box-shadow:0 18px 52px rgba(0,0,0,.35),0 0 24px rgba(83,194,247,.08)}
.roi-results .roi-head{
  font-weight:800;
  letter-spacing:.01em;
  color:rgba(232,245,255,.98);
  font-size:clamp(1.02rem, .92rem + .45vw, 1.28rem);
}
.roi-results .roi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:.7rem;
}
.roi-results .metric{background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:.75rem;border-radius:10px;text-align:center}
.roi-results .metric strong{display:block;font-size:1.25rem;color:var(--text)}
.roi-results .metric small{display:block;color:var(--muted);margin-top:.25rem}
.roi-results .roi-empty{
  margin:0;
  color:rgba(211,226,239,.82);
  line-height:1.45;
}
.roi-results .roi-summary{
  grid-column:1/-1;
  margin:.2rem 0 0;
  color:rgba(227,238,248,.92);
  line-height:1.45;
}
.roi-results .roi-actions{
  grid-column:1/-1;
  display:flex;
  justify-content:flex-start;
  margin-top:.25rem;
}

/* Contact form panel and inputs */
.contact-form{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;align-items:start}
.contact-form--amo{
  display:flex;
  flex-direction:column;
  gap:.9rem;
  background:rgba(255,255,255,0.04);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:12px;
  box-shadow:0 12px 40px rgba(0,0,0,0.5);
  padding:1rem;
  max-width:720px;
  margin-inline:auto;
}
.amo-inline-wrap--hidden{
  position:absolute !important;
  left:-9999px !important;
  top:0 !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
  z-index:-1 !important;
}
.amo-inline-wrap--hidden,
.amo-inline-wrap--hidden *{
  scrollbar-width:none !important;
}
.amo-inline-wrap--hidden::-webkit-scrollbar,
.amo-inline-wrap--hidden *::-webkit-scrollbar{
  width:0 !important;
  height:0 !important;
  display:none !important;
}
.amo-inline-wrap--hidden iframe{
  width:0 !important;
  min-width:0 !important;
  max-width:0 !important;
  height:0 !important;
  min-height:0 !important;
  max-height:0 !important;
  border:0 !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* Hide amo widget root if script injects it directly into body (prevents stray vertical slider) */
body > .amoforms_iframe_container,
body > .amoforms__container,
body > .amoforms,
body > [id^="amoforms_"],
body > iframe[src*="forms.amocrm.ru"],
body > iframe[src*="amoforms"],
body > div[id*="amoforms"],
body > div[class*="amoforms"]{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* Extra guard: hide any amo/scroll rail artifacts outside modal mount */
body [class*="amoforms"],
body [id*="amoforms"],
body iframe[src*="forms.amocrm.ru"],
body iframe[src*="amoforms"],
body [class*="amo"][class*="scroll"],
body [id*="amo"][id*="scroll"]{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* Allow amo widget to be visible only inside modal mount */
.amo-modal-mount .amoforms_iframe_container,
.amo-modal-mount .amoforms__container,
.amo-modal-mount .amoforms,
.amo-modal-mount [id^="amoforms_"],
.amo-modal-mount iframe[src*="forms.amocrm.ru"],
.amo-modal-mount iframe[src*="amoforms"]{
  display:block !important;
  visibility:visible !important;
  position:static !important;
  left:auto !important;
  top:auto !important;
  width:100% !important;
  height:100% !important;
  min-height:640px !important;
  max-width:100% !important;
  max-height:none !important;
  opacity:1 !important;
  pointer-events:auto !important;
  z-index:auto !important;
}

.amo-modal-mount [class*="amo"][class*="scroll"],
.amo-modal-mount [id*="amo"][id*="scroll"]{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
}
.contact-form--amo .form-actions{
  justify-content:flex-start;
}
.contact-form--amo .form-status{
  margin-top:0;
}
.contact-form--amo .amo-lead-title{
  margin:0;
  font-size:clamp(1.08rem,.96rem + .4vw,1.28rem);
  line-height:1.25;
}
.contact-form--amo .amo-lead-text{
  margin:0;
  color:var(--muted);
}

/* Compact high-conversion lead form */
.contact-lead-form{
  margin-top:.75rem;
  display:grid;
  gap:.58rem;
  max-width:760px;
  background:linear-gradient(180deg, rgba(10,16,24,.9), rgba(10,16,24,.8));
  border:1px solid rgba(173,214,245,.26);
  border-radius:16px;
  padding:1.1rem;
  box-shadow:0 16px 44px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.03) inset;
}
.contact-lead-form label{
  color:rgba(236,245,253,.96);
  font-weight:700;
  font-size:.96rem;
}
.contact-lead-form input,
.contact-lead-form textarea{
  width:100%;
  min-height:56px;
  border-radius:12px;
  border:1px solid rgba(180,218,246,.28);
  background:#0b1420;
  color:#f3f9ff;
  padding:.9rem 1rem;
  font-size:1rem;
  line-height:1.4;
  outline:none;
  transition:border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.contact-lead-form textarea{
  min-height:120px;
  resize:vertical;
}
.contact-lead-form input::placeholder,
.contact-lead-form textarea::placeholder{
  color:rgba(205,224,239,.68);
}
.contact-lead-form input:focus-visible,
.contact-lead-form textarea:focus-visible{
  border-color:rgba(83,194,247,.78);
  box-shadow:0 0 0 2px rgba(83,194,247,.24), 0 8px 28px rgba(22,102,170,.26);
  background:#0d1826;
}
.contact-lead-form .field-hint{
  color:rgba(197,216,232,.74);
  font-size:.8rem;
  margin-top:-.18rem;
}
.contact-lead-form .form-actions{
  margin-top:.32rem;
  display:flex;
  gap:.7rem;
  align-items:center;
  flex-wrap:wrap;
}
.contact-lead-form .is-invalid{
  border-color:rgba(255,132,132,.86) !important;
  box-shadow:0 0 0 2px rgba(255,132,132,.18) !important;
}
.contact-proof{
  margin:.72rem 0 0;
  color:rgba(202,223,240,.86);
  font-size:.92rem;
}
.form-status{
  min-height:1.25em;
}
.form-status.success{
  background:rgba(41,157,112,.16);
  border-color:rgba(105,216,172,.36);
  color:#d3f7e7;
}
.form-status.error{
  background:rgba(174,63,63,.16);
  border-color:rgba(255,133,133,.4);
  color:#ffd4d4;
}
.form-status.info{
  background:rgba(61,120,173,.14);
  border-color:rgba(109,180,244,.35);
  color:#d7ecff;
}
.amo-inline-wrap{
  margin:0 0 1rem;
  padding:1rem;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.1);
  background:rgba(255,255,255,0.04);
  max-width:860px;
  overflow:hidden;
}
.amo-inline-head{
  font-weight:700;
  color:var(--text);
  margin:0 0 .55rem;
}
.amo-inline-form{
  min-height:380px;
  width:100%;
  border-radius:10px;
  overflow:hidden;
  background:rgba(10,14,20,.5);
}
.amo-inline-form iframe,
.amo-inline-form form{
  width:100% !important;
  max-width:100% !important;
}
.amo-inline-hint{
  margin:.55rem 0 0;
  color:var(--muted);
  font-size:.92rem;
}
.amo-modal-mount{
  min-height:620px;
  border-radius:12px;
  overflow:auto;
  background:rgba(12,16,24,.68);
  border:1px solid rgba(255,255,255,.08);
  padding:.5rem;
}
.amo-modal-mount iframe,
.amo-modal-mount form{
  width:100% !important;
  max-width:100% !important;
  border:0 !important;
}
.amo-direct-frame{
  display:block;
  width:100%;
  min-height:640px;
  border:0;
  border-radius:10px;
  background:#fff;
}
.modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:120;
  background:rgba(4,8,14,.72);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  padding:20px;
}
body.modal-open{
  overflow:hidden !important;
}
.modal[aria-hidden="false"]{
  display:grid;
  place-items:center;
}
.modal-body{
  width:min(920px, 100%);
  max-height:min(86vh, 900px);
  overflow:auto;
  background:linear-gradient(170deg, rgba(20,26,36,.98), rgba(13,18,27,.98));
  border:1px solid rgba(116,163,207,.24);
  border-radius:18px;
  padding:1.15rem;
  box-shadow:0 36px 90px rgba(0,0,0,.52);
}
.modal-close{
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer;
}
#modalContent h3{
  margin:.35rem 0 .55rem;
  font-size:clamp(1.25rem,1.02rem + .55vw,1.52rem);
}
#modalContent .muted{
  margin:.15rem 0 .8rem;
}
.amo-prefill-note{
  margin:.15rem 0 .75rem;
  padding:.72rem .85rem;
  border-radius:12px;
  border:1px solid rgba(122,168,210,.26);
  background:linear-gradient(160deg, rgba(17,25,37,.8), rgba(11,18,29,.66));
}
.amo-prefill-note ul{
  margin:.4rem 0 .45rem;
  padding-left:1rem;
}
.amo-prefill-note li{
  color:rgba(220,236,248,.92);
  line-height:1.4;
}
.contact-form > label{display:flex;flex-direction:column;gap:.45rem;color:var(--muted);font-weight:600}
.contact-form input,
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="number"],
.contact-form textarea{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:.7rem .9rem;border-radius:10px;color:var(--text);resize:vertical;outline:none;transition:box-shadow .18s ease,border-color .12s ease}
.contact-form textarea{min-height:100px}
.contact-form input:focus-visible, .contact-form textarea:focus-visible{border-color:rgba(60,203,255,0.6);box-shadow:0 8px 36px rgba(60,203,255,0.14),0 0 20px rgba(60,203,255,0.4)}

/* Consent checkbox styling: keep native but align label */
.contact-form label.consent{display:flex;align-items:center;gap:.6rem;grid-column:1/-1;color:var(--muted);font-weight:500}
.contact-form label.consent input{width:18px;height:18px;margin:0;accent-color:var(--accent)}

/* Form actions (buttons & links) */
.contact-form .form-actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;grid-column:1/-1}
.contact-form .form-actions .btn{min-width:140px}

/* Status message panel */
.form-status{margin-top:.6rem;padding:.75rem;border-radius:10px;grid-column:1/-1;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.04);color:var(--text);font-weight:600}
.form-status:empty{display:none}

/* Place the ROI and Contact forms into visible glass panels without changing HTML structure */
#roi .roi-form, #roiResults, #contact .contact-form{background:rgba(255,255,255,0.04);backdrop-filter:blur(8px);border-radius:12px;border:1px solid rgba(255,255,255,0.1);box-shadow:0 12px 40px rgba(0,0,0,0.5);padding:1rem}

/* Small screens: stack fields */
@media (max-width:820px){
  .roi-form{grid-template-columns:1fr}
  .contact-form{grid-template-columns:1fr}
  .contact-lead-form{
    padding:1rem;
    border-radius:14px;
  }
  .contact-lead-form .form-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .contact-lead-form .form-actions .btn,
  .contact-lead-form .form-actions .link-cta{
    width:100%;
  }
  .roi-results .roi-grid{grid-template-columns:repeat(2,1fr)}
  .roi-results .roi-actions .btn{width:100%}
  .amo-inline-wrap{padding:.85rem}
}

.footer{padding:clamp(32px,4vw,56px) 0;border-top:1px solid rgba(255,255,255,0.02);margin-top:clamp(24px,3vw,48px)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:1rem}

.statement{
  padding:clamp(48px,6vw,80px) 0 clamp(40px,5vw,72px);
  background:
    radial-gradient(90% 120% at 16% 12%, rgba(83,194,247,0.16), transparent 58%),
    radial-gradient(86% 100% at 82% 18%, rgba(47,127,203,0.22), transparent 62%),
    linear-gradient(180deg, rgba(4,7,22,0.66), rgba(3,4,14,0.9));
}
.statement-inner{display:flex;align-items:center;justify-content:center}
.statement-text{
  margin:0;
  font-size:clamp(3.4rem, 1.3rem + 6.2vw, 8rem);
  line-height:.92;
  letter-spacing:-0.04em;
  font-weight:800;
  text-align:center;
  background:linear-gradient(120deg, #dce7ff 10%, #9dd1f7 45%, #6bb9f0 70%, #7ecfff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 20px 70px rgba(50,123,188,0.24);
}

/* reveal helper */
.reveal{opacity:1;transform:none;transition:all .7s cubic-bezier(.2,.9,.2,1)}
.reveal.hidden{opacity:0;transform:translateY(26px)}
.reveal.visible{opacity:1;transform:none}

#main{padding-top:var(--nav-h)}
#main, section{overflow-x:hidden}
section[id]{scroll-margin-top:calc(var(--nav-h) + 16px)}

/* responsive */
@media (max-width:1200px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(320px,420px)}
  .hero{gap:2rem}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .cases-grid{grid-template-columns:repeat(2,1fr)}
  .blog-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1024px){
  .hero{padding:1.3rem 0 1.1rem}
  .hero-left .lead{max-width:60ch}
  .panel-content{padding:.75rem}
  #services .service.card{min-height:250px}
}
@media (max-width:820px){
  .container{padding-inline:clamp(16px, 5vw, 20px)}
  section:not(#hero):not(#intro){padding-top:var(--section-gap-mobile);padding-bottom:var(--section-gap-mobile)}
  .intro{height:100svh;min-height:100vh}
  .intro-title{font-size:clamp(2.3rem, 1.4rem + 6vw, 4.2rem)}
  .intro-tags{font-size:.83rem}
  .hero-float-layer .floating-chip:nth-child(n+7){display:none}
  .hero-float-layer .floating-chip{font-size:.69rem;padding:.3rem .56rem}
  .hero-marquee{width:min(96%, 560px)}
  .hero-marquee.full-bleed{left:0;right:0;width:auto;bottom:30px}
  .hero-marquee-track{animation-duration:28s}
  .ticker__content{font-size:.78rem}
  .hero{
    grid-template-columns:1fr;
    gap:1rem;
    min-height:calc(100svh - var(--nav-h));
    min-height:calc(100dvh - var(--nav-h));
    padding:1rem 0 .9rem;
  }
  .hero-left{
    min-width:0;
    width:100%;
  }
  .hero-left::before{
    inset:-14px -10px -12px -10px;
    filter:blur(18px);
    opacity:.78;
  }
  .hero-left h1{
    font-size:clamp(30px, 8.2vw, 42px);
    line-height:1.03;
    letter-spacing:-0.01em;
    max-width:14ch;
    margin:0 0 .5rem;
    overflow-wrap:anywhere;
  }
  .lead{
    font-size:clamp(14px, 3.3vw, 18px);
    line-height:1.42;
    max-width:100%;
  }
  .hero-includes{
    margin:.55rem 0 0;
    gap:.24rem;
  }
  .hero-includes li{
    font-size:clamp(14px, 3.2vw, 16px);
    line-height:1.34;
    padding-left:.8rem;
    overflow-wrap:anywhere;
  }
  .nav-toggle{display:block}
  .nav-cta .btn{padding:.52rem .78rem;font-size:.85rem}
  .nav-links{
    position:fixed;
    left:12px;
    right:12px;
    top:calc(var(--nav-h) + 10px);
    max-height:calc(100dvh - var(--nav-h) - 22px);
    overflow:auto;
    background:linear-gradient(180deg,rgba(8,12,18,.98),rgba(8,12,18,.92));
    border:1px solid rgba(83,194,247,.22);
    box-shadow:0 24px 70px rgba(0,0,0,.45);
    padding:1rem;
    border-radius:16px;
    flex-direction:column;
    gap:.35rem;
    display:none;
  }
  .nav-links a{display:block;padding:.82rem .8rem;font-size:1.02rem}
  .nav-links.show{display:flex}
  body.nav-open{overflow:hidden}
  .about-grid{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:1fr}
  .trust-logos{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .trust-metrics{grid-template-columns:1fr}
  .trust-reviews{grid-template-columns:1fr}
  .services-grid{grid-template-columns:1fr}
  #services > .muted{margin-bottom:1.2rem}
  #services .service.card{min-height:auto;padding:1.1rem 1rem;border-radius:18px}
  #services .service h3{font-size:1.18rem}
  .cases-grid{grid-template-columns:1fr}
  .case-figure{aspect-ratio:16/10}
  .contact-form{grid-template-columns:1fr}
  .logo-img{height:28px}
  #hero::after, #blog::before, #contact::before{height:160px;top:auto;bottom:auto;filter:blur(20px);opacity:.46}
  #hero::after{bottom:-88px}
  .intro::after{bottom:-86px;height:150px;filter:blur(26px);opacity:.48}
  #blog::before, #contact::before{top:-80px}
  .statement{padding:56px 0 48px}
  .statement-text{font-size:clamp(2.4rem, 1.6rem + 6vw, 4.2rem)}
  .about-card{padding:1.35rem}
  .about-actions{flex-direction:column;align-items:flex-start}
  .intro-title .intro-accent{font-size:clamp(1rem, .86rem + 1.2vw, 1.36rem)}
  .modal{padding:12px}
  .modal-body{padding:.9rem;border-radius:14px}
  .amo-direct-frame{min-height:70vh}
  .amo-modal-mount{min-height:68vh}
  .hero-left::before{
    inset:-18px -10px -14px -10px;
    filter:blur(20px);
    opacity:.86;
  }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce){
  .hero-marquee-track{animation:none}
  .ticker__content[aria-hidden="true"]{display:none}
  .floating-chip{animation:none;opacity:.85;transform:none}
  .intro-fog,.intro-grain,.intro-sweep{animation:none !important}
  .intro::after, .hero::before{animation:none !important}
  .tech-panel, .tech-panel::after, .tech-panel::before, .hero-left h1, .hero-left .lead, .hero-ctas, .card, .case, .mock-block, .tech-visual{animation:none;transition:none}
  .tech-panel{transform:none !important}
}

/* HERO right: tech panel visuals */
.hero-right{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.hero-right::before{
  content:"";
  position:absolute;
  width:520px;
  height:360px;
  border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(78,166,234,.17) 0%, rgba(32,74,122,.09) 44%, rgba(10,18,28,0) 74%);
  filter:blur(52px);
  opacity:.68;
  pointer-events:none;
  z-index:0;
}
.tech-panel{
  position:relative;
  z-index:1;
  width:100%;
  max-width:440px;
  border-radius:20px;
  padding:1.35rem;
  background:
    linear-gradient(170deg, rgba(21,32,46,.56), rgba(12,18,28,.44)),
    radial-gradient(120% 120% at 12% 0%, rgba(120,176,228,.16), rgba(12,18,28,0) 58%);
  border:1px solid rgba(142,178,214,.15);
  box-shadow:0 18px 54px rgba(2,8,18,.34), 0 0 26px rgba(83,194,247,.08), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(12px) saturate(1.05);
  -webkit-backdrop-filter:blur(12px) saturate(1.05);
  overflow:hidden;
  transform:translateZ(0);
  transition:border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
  animation:panelDrift 9s ease-in-out infinite;
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))){
  .tech-panel{
    background:linear-gradient(170deg, rgba(20,30,44,.86), rgba(11,18,28,.84));
  }
}
.tech-panel{min-height:0}
.tech-panel:hover{border-color:rgba(148,188,226,.22);box-shadow:0 22px 64px rgba(2,8,18,.4), 0 0 34px rgba(83,194,247,.1), inset 0 1px 0 rgba(255,255,255,.1)}
@keyframes panelDrift{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-6px,0)}
}
.panel-grid{position:absolute;inset:0;background-image:repeating-linear-gradient(transparent, transparent 28px, rgba(255,255,255,0.012) 29px),repeating-linear-gradient(90deg, transparent, transparent 28px, rgba(255,255,255,0.012) 29px);opacity:0.06}
.panel-content{position:relative;z-index:2;display:flex;flex-direction:column;gap:1.24rem;padding:1.1rem 1.18rem}
.chips{display:flex;flex-wrap:wrap;gap:.6rem}
.chip{background:rgba(255,255,255,0.02);padding:.45rem .7rem;border-radius:999px;font-weight:700;font-size:.85rem;border:1px solid rgba(60,203,255,0.08);color:var(--text)}
.panel-stats{display:flex;gap:.8rem;margin-top:.4rem;flex-wrap:wrap}
.panel-stats .stat{background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);padding:.6rem .8rem;border-radius:10px;border:1px solid rgba(60,203,255,0.06);font-weight:800;color:var(--text)}
.panel-stats .stat small{display:block;font-weight:600;color:var(--muted);font-size:.76rem;margin-top:4px}

/* circuit decorative lines */
.circuit{position:absolute;z-index:1;pointer-events:none}
.circuit-1{left:-10%;top:6%;width:140%;height:2px;background:repeating-linear-gradient(90deg, rgba(60,203,255,0.06), rgba(60,203,255,0.06) 20px, transparent 22px);filter:blur(6px);opacity:0.9;transform:rotate(-6deg)}
.circuit-2{right:-10%;bottom:6%;width:120%;height:2px;background:repeating-linear-gradient(90deg, rgba(42,107,255,0.05), rgba(42,107,255,0.05) 16px, transparent 18px);filter:blur(8px);opacity:0.9;transform:rotate(8deg)}

/* static highlight for performance */
.tech-panel::after{content:"";position:absolute;inset:-40%;background:linear-gradient(120deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.03) 2%, rgba(255,255,255,0.02) 4%, transparent 8%);transform:rotate(12deg);filter:blur(16px);opacity:.34;z-index:1}

/* ensure hero-right stacks on mobile */
@media (max-width:820px){
  .hero-right{order:2;width:100%;max-width:100%;min-width:0}
  .tech-panel{
    max-width:100%;
    min-height:auto;
    width:100%;
  }
}

/* Avoid continuous tech-panel motion on smaller screens for performance */
@media (max-width:820px){
  .tech-panel{animation:none}
  .tech-panel::after{animation:none}
  .tech-panel::before{animation:none}
}

/* Mini-mock blocks inside the tech panel */
.mocks{display:flex;gap:0.8rem;align-items:flex-start}
.mock-block{flex:1;min-width:120px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:10px;padding:.6rem;border:1px solid rgba(60,203,255,0.06);box-shadow:0 10px 30px rgba(2,6,23,0.42)}
.mock-header{font-weight:800;font-size:.9rem;margin-bottom:.45rem;color:var(--text)}
.mock-body{display:flex;flex-direction:column;gap:.45rem}
.mock-body .msg{padding:.45rem .6rem;border-radius:8px;font-size:.85rem}
.mock-body .msg-in{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.02);color:var(--muted)}
.mock-body .msg-out{align-self:flex-end;background:linear-gradient(90deg,var(--accent),var(--accent2));color:#001018;font-weight:700}
.mock-body .dots{width:18px;height:6px;border-radius:6px;background:linear-gradient(90deg,rgba(255,255,255,0.03),rgba(255,255,255,0.01))}
.mock-plan .mock-body{gap:.42rem}
.plan-step{display:flex;align-items:center;gap:.46rem;padding:.42rem;border-radius:8px;border:1px solid rgba(133,191,240,.12);background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.012))}
.plan-step b{display:inline-flex;align-items:center;justify-content:center;width:1.3rem;height:1.3rem;border-radius:999px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#02101d;font-size:.74rem}
.plan-step span{font-size:.78rem;color:rgba(225,238,249,.92);line-height:1.2}

/* Ensure chips and mocks wrap nicely on mobile */
@media (max-width:520px){
  .mocks{flex-direction:column}
  .chips{justify-content:flex-start}
  .hero-ctas{flex-direction:column;align-items:stretch}
  .hero-ctas{
    width:100%;
    gap:.55rem;
  }
  .hero-ctas .btn,
  .hero-ctas .link-cta{
    width:100%;
    min-width:0;
  }
  .hero-ctas .link-cta{
    justify-content:flex-start;
  }
  .nav{gap:.45rem}
  .logo-text{font-size:1rem}
}

/* Ultra-compact mode (phones 390px and below) */
@media (max-width:390px){
  :root{
    --nav-h:64px;
    --pad:16px;
    --section-gap-mobile:20px;
  }
  body{font-size:15px}
  .container{padding-inline:16px}
  .nav{height:var(--nav-h);padding:.5rem 0}
  .logo{gap:8px}
  .logo-img{height:24px}
  .logo-text{font-size:.95rem}
  .nav-cta .btn{
    min-height:38px;
    padding:.45rem .62rem;
    font-size:.78rem;
    border-radius:10px;
  }
  .nav-toggle{font-size:1.1rem}
  .nav-links{
    left:10px;
    right:10px;
    top:calc(var(--nav-h) + 8px);
    border-radius:14px;
    padding:.8rem;
  }
  .nav-links a{
    padding:.72rem .66rem;
    font-size:.96rem;
  }

  .intro-inner{width:100%;gap:.9rem;padding-inline:4px}
  .intro-tags{font-size:.74rem;line-height:1.35}
  .intro-title{font-size:clamp(1.95rem, 8.9vw, 2.6rem);letter-spacing:-.02em}
  .intro-title .intro-accent{font-size:.96rem}
  .intro-subtitle{font-size:.95rem;line-height:1.4}
  .intro-scroll{padding:.5rem .82rem;font-size:.9rem}
  .hero-float-layer .floating-chip{display:none}
  .hero-marquee.full-bleed{bottom:20px}
  .ticker__content{font-size:.72rem}

  .hero{
    min-height:calc(100svh - var(--nav-h));
    min-height:calc(100dvh - var(--nav-h));
    padding:.9rem 0 .75rem;
    gap:1rem;
  }
  .eyebrow{font-size:.8rem;line-height:1.35}
  .hero-left h1{
    font-size:clamp(28px, 9.6vw, 36px);
    line-height:1.04;
    max-width:13ch;
  }
  .lead{font-size:.98rem;line-height:1.5}
  .hero-ctas{margin-top:1rem}
  .miniapp-note{font-size:.82rem;margin-top:.72rem}
  .hero-right{width:100%}
  .tech-panel{border-radius:14px;padding:.72rem}
  .panel-content{gap:.8rem;padding:.5rem}
  .chip{font-size:.74rem;padding:.34rem .56rem}
  .mocks{gap:.55rem}
  .mock-header{font-size:.8rem}
  .mock-body .msg{font-size:.78rem}
  .panel-stats{gap:.5rem}
  .panel-stats .stat{padding:.44rem .54rem}
  .panel-stats .stat strong{font-size:.95rem}
  .panel-stats .stat small{font-size:.68rem}

  .section-title{margin-bottom:.72rem}
  .services-grid,
  .cases-grid,
  .blog-grid{gap:.75rem}
  .card{padding:1rem;border-radius:16px}
  .case-figure{margin:8px 8px 0}
  .case-img{height:220px}
  .metrics-overlay{left:8px;top:8px;gap:.3rem}
  .metrics-overlay .m{padding:.3rem .48rem;font-size:.74rem}
  .metrics-overlay .m span{font-size:.62rem}
  .case > h3, .case > p.muted{padding:0 .82rem}
  .case-actions{padding:0 .82rem .82rem}
  .btn{min-height:42px;padding:.68rem .95rem;font-size:.92rem}

  .about-card{padding:1rem;border-radius:16px}
  .about-advantages{grid-template-columns:1fr;gap:.55rem}
  .about-advantage{padding:.75rem .82rem}
  .about-advantage p{font-size:.9rem}
  .about-process,
  .about-guarantee{padding:.78rem .82rem}
  .about-process li{font-size:.9rem}
  .about-actions{gap:.55rem}

  .roi-form,
  #roiResults,
  #contact .contact-form{padding:.85rem}
  .roi-form,
  .contact-form{gap:.72rem}
  .form-actions{gap:.5rem}
  .form-actions .btn{width:100%}
  .statement{padding:3.2rem 0 2.5rem}
}

/* Extra-tight for 360px and below */
@media (max-width:360px){
  :root{--pad:14px}
  body{font-size:14.5px}
  .container{padding-inline:14px}
  .logo-text{font-size:.9rem}
  .nav-cta .btn{font-size:.74rem;padding:.4rem .56rem}
  .intro-title{font-size:clamp(1.75rem, 9.4vw, 2.25rem)}
  .intro-subtitle{font-size:.9rem}
  .hero-left h1{
    font-size:clamp(26px, 9.3vw, 34px);
    line-height:1.05;
    max-width:12.5ch;
  }
  .eyebrow{font-size:.76rem}
  .lead{font-size:.92rem}
  .tech-panel{padding:.62rem}
  .chip{font-size:.7rem}
  .case-img{height:200px}
  .btn{font-size:.88rem}
}

/* Link underline animation for non-button links */
a:not(.btn):not(.logo):not(.read){
  color:var(--accent);position:relative;text-decoration:none;transition:color .18s ease;
  background-image:linear-gradient(90deg,var(--accent),var(--accent2));background-repeat:no-repeat;background-size:0% 2px;background-position:0 100%;
}
a:not(.btn):not(.logo):not(.read):hover,a:not(.btn):not(.logo):not(.read):focus{color:var(--text);background-size:100% 2px}

/* Animated underline for navigation links (premium, subtle) */
.nav-links a{position:relative}
.nav-links a::after{content:"";position:absolute;left:50%;bottom:-8px;transform:translateX(-50%) scaleX(0);height:4px;width:72%;border-radius:6px;background:linear-gradient(90deg,var(--accent),var(--accent2));transform-origin:center;transition:transform .28s cubic-bezier(.2,.9,.2,1),opacity .18s,filter .18s}
.nav-links a:hover::after,.nav-links a:focus::after{transform:translateX(-50%) scaleX(1);opacity:1;filter:blur(0.2px)}

/* Cursor-follow glow (desktop only) */
.cursor-glow{position:fixed;left:0;top:0;pointer-events:none;z-index:9;width:220px;height:220px;border-radius:50%;opacity:0.9;transform:translate3d(-9999px,-9999px,0) translate(-50%,-50%);will-change:transform,opacity;filter:blur(28px);background:radial-gradient(circle at center, rgba(60,203,255,0.14) 0%, rgba(42,107,255,0.06) 35%, rgba(2,20,60,0.02) 60%, transparent 70%)}
@media (max-width:900px){.cursor-glow{display:none}}
@media (prefers-reduced-motion: reduce){.cursor-glow{display:none}}

/* Case page template */
.case-page{
  padding-top:calc(var(--nav-h) + 18px);
  padding-bottom:56px;
}
.case-hero{
  padding-top:26px;
  padding-bottom:12px;
}
.case-hero h1{
  max-width:18ch;
}
.case-layout{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
.case-block{
  padding:1.2rem;
}
.case-block h2{
  font-size:clamp(1.1rem, 1rem + .7vw, 1.55rem);
  margin:0 0 .55rem;
}
.case-block p{
  margin:0;
}
.case-block ul{
  margin:.1rem 0 0;
  padding-left:1rem;
}
.case-arch-grid{
  margin-top:.7rem;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:.6rem;
}
.case-arch-grid > div{
  border:1px solid rgba(120,165,209,.24);
  border-radius:12px;
  padding:.72rem .8rem;
  background:linear-gradient(160deg, rgba(23,30,40,.72), rgba(14,20,30,.58));
  color:rgba(219,233,245,.9);
  line-height:1.4;
}
.case-metrics{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:.6rem;
}
.case-metrics > div{
  border:1px solid rgba(120,165,209,.24);
  border-radius:12px;
  padding:.72rem .65rem;
  text-align:center;
  background:linear-gradient(160deg, rgba(20,31,45,.72), rgba(12,19,30,.58));
}
.case-metrics strong{
  display:block;
  font-size:clamp(1.05rem, .9rem + .6vw, 1.45rem);
  line-height:1.05;
  color:#ecf8ff;
}
.case-metrics span{
  display:block;
  margin-top:.25rem;
  font-size:.86rem;
  color:var(--muted);
}
.case-shots{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:.7rem;
}
.case-shots figure{
  margin:0;
  border:1px solid rgba(120,165,209,.24);
  border-radius:14px;
  overflow:hidden;
  background:rgba(9,14,22,.6);
}
.case-shots img{
  width:100%;
  height:240px;
  object-fit:cover;
  display:block;
}
.case-shots figcaption{
  padding:.58rem .7rem;
  color:var(--muted);
  font-size:.9rem;
}
.case-cta{
  border-color:rgba(83,194,247,.34);
}
.case-cta-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
  margin-top:.8rem;
}

@media (max-width:820px){
  .case-page{
    padding-top:calc(var(--nav-h) + 8px);
    padding-bottom:32px;
  }
  .case-block{
    padding:1rem;
  }
  .case-arch-grid{
    grid-template-columns:1fr;
  }
  .case-metrics{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .case-shots{
    grid-template-columns:1fr;
  }
  .case-shots img{
    height:220px;
  }
  .case-cta-actions .btn{
    width:100%;
  }
}