:root{
  --bg:#04070d;
  --bg2:#08111d;
  --bg3:#0d1a31;
  --card:rgba(255,255,255,.055);
  --card2:rgba(255,255,255,.085);
  --line:rgba(134,210,255,.22);
  --line2:rgba(255,255,255,.09);
  --text:#f6f9ff;
  --muted:#b0bdd0;
  --muted2:#7e8fa4;
  --blue:#7adcff;
  --blue2:#52b6ff;
  --blue3:#daf8ff;
  --green:#94f6df;
  --shadow:0 24px 70px rgba(14,25,47,.35);
  --radius:30px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(circle at 10% 10%, rgba(82,182,255,.14), transparent 24%),
    radial-gradient(circle at 86% 14%, rgba(122,220,255,.10), transparent 22%),
    radial-gradient(circle at 50% 84%, rgba(82,182,255,.08), transparent 34%),
    linear-gradient(180deg,#03060b 0%,#07111d 44%,#03060b 100%);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Inter,Arial,sans-serif;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(circle at 50% 16%, black, transparent 78%);
  pointer-events:none;
  z-index:-2;
}
body::after{
  content:"";
  position:fixed; inset:-18%;
  background:
    radial-gradient(circle at 20% 30%, rgba(122,220,255,.05), transparent 28%),
    radial-gradient(circle at 80% 16%, rgba(82,182,255,.05), transparent 22%),
    radial-gradient(circle at 50% 76%, rgba(148,246,223,.045), transparent 25%);
  filter:blur(24px);
  animation:aurora 18s ease-in-out infinite alternate;
  pointer-events:none;
  z-index:-3;
}
@keyframes aurora{
  0%{transform:translate3d(-2%,0,0) scale(1)}
  50%{transform:translate3d(1.5%,-1%,0) scale(1.04)}
  100%{transform:translate3d(-1.2%,1.2%,0) scale(1.02)}
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{width:min(1180px, calc(100% - 40px)); margin-inline:auto}

/* nav */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(18px);
  background:rgba(4,7,13,.72);
  border-bottom:1px solid var(--line2);
  transition:.25s ease;
}
.nav.scrolled{background:rgba(4,7,13,.86); box-shadow:0 16px 50px rgba(0,0,0,.18)}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:16px 0;
}
.brand{display:flex; align-items:center; gap:12px}
.brand img{
  width:44px; height:44px; border-radius:50%; object-fit:cover;
  border:1px solid var(--line); box-shadow:0 0 24px rgba(122,220,255,.16);
}
.brand strong{display:block; font-size:16px; letter-spacing:-.03em; font-weight:700}
.brand small{display:block; color:var(--muted); font-size:12px; margin-top:2px}
.nav-links{display:flex; align-items:center; gap:22px; color:var(--muted); font-size:14px}
.nav-links a:hover{color:#fff}
.nav-cta{
  padding:10px 16px; border-radius:999px;
  border:1px solid rgba(122,220,255,.35);
  background:linear-gradient(135deg,rgba(122,220,255,.18),rgba(82,182,255,.08));
  color:#fff !important;
  box-shadow:0 0 24px rgba(122,220,255,.08);
}

/* hero */
.hero{position:relative; padding:92px 0 44px}
.hero-grid{
  display:grid; grid-template-columns:1.02fr .98fr; gap:48px; align-items:center;
}
.badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:999px;
  background:rgba(255,255,255,.045);
  border:1px solid var(--line);
  color:#dbf4ff; font-size:14px;
  box-shadow:inset 0 0 22px rgba(122,220,255,.04);
  animation:floatSoft 4.4s ease-in-out infinite;
}
.pulse{
  width:8px; height:8px; border-radius:50%;
  background:var(--green); box-shadow:0 0 18px var(--green);
  animation:pulseSoft 2.4s ease-in-out infinite;
}
@keyframes pulseSoft{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.2);opacity:.82}
}
@keyframes floatSoft{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}
h1{
  font-size:clamp(48px,6vw,88px);
  line-height:.91;
  letter-spacing:-.085em;
  margin:24px 0 18px;
  max-width:860px;
  font-weight:700;
}
.gradient-text{
  background:linear-gradient(90deg,#fff 0%,#e0f9ff 24%,#8de8ff 58%,#fff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p{
  font-size:clamp(17px,2vw,22px);
  line-height:1.68;
  color:var(--muted);
  max-width:720px;
  margin:0 0 30px;
}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin:30px 0 24px}
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 21px; border-radius:999px;
  border:1px solid var(--line2);
  overflow:hidden; cursor:pointer; transition:.25s ease;
  font-weight:800;
}
.btn::after{
  content:"";
  position:absolute; inset:-1px;
  background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.24) 48%,transparent 75%);
  transform:translateX(-130%);
  transition:transform .9s ease;
}
.btn:hover::after{transform:translateX(130%)}
.btn-primary{
  background:linear-gradient(135deg,#fff 0%,#b2f2ff 40%,#63c5ff 100%);
  color:#03111c; box-shadow:0 18px 55px rgba(99,197,255,.22);
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 24px 72px rgba(99,197,255,.30)}
.btn-secondary{
  background:rgba(255,255,255,.05);
  border-color:var(--line);
  color:#fff;
}
.btn-secondary:hover{transform:translateY(-2px); background:rgba(255,255,255,.085)}
.hero-meta{
  display:flex; gap:18px; flex-wrap:wrap;
  color:var(--muted2); font-size:14px;
}
.hero-meta span{display:flex; align-items:center; gap:8px}
.dot{
  width:5px; height:5px; border-radius:50%;
  background:var(--blue); box-shadow:0 0 12px var(--blue);
}

/* stage */
.stage{
  position:relative;
  min-height:620px;
  display:grid; place-items:center;
  perspective:1400px;
}
.orb{
  position:absolute; inset:28px;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 20%, rgba(255,255,255,.14), transparent 18%),
    radial-gradient(circle at 50% 50%, rgba(122,220,255,.12), transparent 52%),
    linear-gradient(135deg,rgba(255,255,255,.035),rgba(255,255,255,.01));
  border:1px solid rgba(122,220,255,.24);
  box-shadow:inset 0 0 90px rgba(122,220,255,.08), 0 0 90px rgba(122,220,255,.14);
  animation:orbPulse 7s ease-in-out infinite;
}
.orb::after{
  content:"";
  position:absolute; inset:10%;
  border-radius:50%;
  border:1px dashed rgba(122,220,255,.18);
  animation:spinSlow 28s linear infinite;
}
@keyframes spinSlow{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes orbPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.018)}}
.device-card{
  position:absolute; left:34px; right:110px; top:115px;
  max-width:460px;
  border-radius:30px; padding:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(20px); box-shadow:var(--shadow); transform-style:preserve-3d;
  animation:floatCard 6.4s ease-in-out infinite;
}
@keyframes floatCard{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(-1deg)}}
.browser{
  border-radius:22px; overflow:hidden;
  border:1px solid rgba(122,220,255,.22); background:#030914;
}
.browser-top{display:flex; gap:8px; padding:14px; border-bottom:1px solid rgba(255,255,255,.08)}
.browser-top i{width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.25)}
.screen{
  min-height:272px; position:relative; overflow:hidden;
  background:
    linear-gradient(130deg,rgba(122,220,255,.18),transparent 34%),
    radial-gradient(circle at 70% 28%,rgba(148,246,223,.12),transparent 25%),
    #06111f;
  padding:28px;
}
.screen::before{
  content:"";
  position:absolute; top:0; bottom:0; width:34%; left:-40%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
  transform:skewX(-18deg); animation:scan 5.4s linear infinite;
}
@keyframes scan{0%{left:-40%}100%{left:135%}}
.big-title{
  font-size:42px; line-height:.92; letter-spacing:-.07em;
  max-width:300px; font-weight:700;
}
.big-title span{display:block; color:var(--blue3)}
.small-ui{
  position:absolute; left:28px; right:28px; bottom:24px;
  display:grid; gap:10px;
}
.small-ui b,.small-ui span{
  display:block; height:10px; border-radius:999px;
  background:linear-gradient(90deg,rgba(255,255,255,.85),rgba(122,220,255,.16));
}
.small-ui span{width:64%; opacity:.72}
.profile-card{
  position:absolute; right:12px; top:86px;
  width:250px; border-radius:28px; padding:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(20px);
  box-shadow:0 20px 60px rgba(0,0,0,.16); overflow:hidden;
  animation:floatProfile 6.8s ease-in-out infinite;
}
@keyframes floatProfile{0%,100%{transform:translateY(0) rotate(1.5deg)}50%{transform:translateY(-12px) rotate(.4deg)}}
.profile-card::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.08),transparent);
  transform:translateX(-120%); animation:shine 7.5s ease-in-out infinite;
}
@keyframes shine{0%,20%{transform:translateX(-120%)}55%,100%{transform:translateX(120%)}}
.profile-photo{
  width:100%; aspect-ratio:1/1.08;
  object-fit:cover; border-radius:20px;
  border:1px solid rgba(255,255,255,.16);
}
.identity-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-top:14px;
}
.identity-row img{
  width:42px; height:42px; border-radius:50%;
  object-fit:cover; border:1px solid var(--line);
}
.identity-name{flex:1}
.identity-name strong{display:block; font-size:16px; letter-spacing:-.03em; font-weight:700}
.identity-name small{display:block; margin-top:2px; color:var(--muted); font-size:12px}
.laptop-badge{
  position:absolute; left:-26px; bottom:72px; width:124px;
  border-radius:22px; padding:12px 14px;
  border:1px solid rgba(122,220,255,.22);
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(16px); box-shadow:0 16px 40px rgba(0,0,0,.12);
  animation:liftIn 1.1s ease-out both, floatSoft2 5.5s ease-in-out infinite 1.2s;
}
.laptop-badge b{display:block; font-size:14px; margin-bottom:4px}
.laptop-badge span{display:block; font-size:12px; color:var(--muted)}
.laptop-icon{
  width:46px; height:32px; border-radius:10px;
  border:1px solid rgba(122,220,255,.34);
  background:linear-gradient(180deg,rgba(122,220,255,.18),rgba(255,255,255,.04));
  margin-bottom:10px; position:relative;
}
.laptop-icon::before{
  content:""; position:absolute; left:7px; right:7px; top:6px; bottom:8px;
  border-radius:6px; border:1px solid rgba(255,255,255,.20);
}
.laptop-icon::after{
  content:""; position:absolute; left:-6px; right:-6px; bottom:-8px; height:8px;
  border-radius:999px; background:rgba(255,255,255,.12);
  border:1px solid rgba(122,220,255,.18);
}
@keyframes liftIn{from{opacity:0; transform:translateY(24px) scale(.94)}to{opacity:1; transform:translateY(0) scale(1)}}
@keyframes floatSoft2{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.social-float{
  position:absolute; right:48px; bottom:52px;
  display:grid; gap:10px;
}
.social-pill{
  display:inline-flex; align-items:center; gap:10px; justify-content:space-between;
  padding:12px 14px; border-radius:18px;
  border:1px solid rgba(122,220,255,.22);
  background:rgba(255,255,255,.07);
  color:#eff9ff; backdrop-filter:blur(14px);
  box-shadow:0 16px 40px rgba(0,0,0,.12);
  transition:.25s ease; min-width:220px;
}
.social-pill:hover{transform:translateY(-2px); background:rgba(255,255,255,.10)}
.social-pill b{font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--blue3)}
.social-pill span{display:block; font-size:13px; color:var(--muted)}

/* section spacing */
.section{padding:68px 0}
.tight-section{padding:26px 0 26px}
.section-head{
  display:flex; justify-content:space-between; gap:24px; align-items:end; margin-bottom:24px;
}
.eyebrow{
  color:var(--blue); font-size:13px; text-transform:uppercase;
  letter-spacing:.18em; font-weight:800;
}
h2{
  font-size:clamp(32px,4vw,56px); line-height:1; letter-spacing:-.06em;
  margin:12px 0 0; font-weight:700;
}
.section-head p{max-width:560px; color:var(--muted); line-height:1.66; margin:0}

/* category row */
.categories-wrap{
  max-width:1120px; margin-inline:auto;
}
.logo-strip{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.strip-item{
  border:1px solid var(--line2);
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.032));
  box-shadow:inset 0 1px rgba(255,255,255,.06);
  border-radius:20px;
  padding:22px 18px;
  text-align:center;
  color:#d7e6f4;
  font-size:18px;
  font-weight:600;
  letter-spacing:-.02em;
  position:relative; overflow:hidden;
  transition:transform .25s ease,border-color .25s ease, box-shadow .25s ease;
}
.strip-item:hover{
  transform:translateY(-3px);
  border-color:rgba(122,220,255,.20);
  box-shadow:0 20px 50px rgba(0,0,0,.14);
}
.strip-item::after,
.card::after,
.form-card::after,
.testimonial-card::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.06) 45%,transparent 75%);
  transform:translateX(-120%);
  transition:transform .9s ease;
  pointer-events:none;
}
.strip-item:hover::after,
.card:hover::after,
.form-card:hover::after,
.testimonial-card:hover::after{
  transform:translateX(120%);
}

/* service cards */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{
  border:1px solid var(--line2);
  background:linear-gradient(180deg,rgba(255,255,255,.078),rgba(255,255,255,.035));
  box-shadow:inset 0 1px rgba(255,255,255,.06);
  border-radius:var(--radius);
  padding:28px;
  position:relative; overflow:hidden;
  transition:transform .25s ease,border-color .25s ease, box-shadow .25s ease;
}
.card:hover{
  transform:translateY(-4px);
  border-color:rgba(122,220,255,.22);
  box-shadow:0 22px 55px rgba(0,0,0,.16);
}
.icon{
  width:50px; height:50px; border-radius:16px;
  display:grid; place-items:center;
  background:rgba(122,220,255,.10);
  border:1px solid rgba(122,220,255,.22);
  color:#dff8ff; font-size:22px; margin-bottom:22px;
}
.card h3{font-size:22px; margin:0 0 10px; letter-spacing:-.02em; font-weight:700}
.card p{margin:0; color:var(--muted); line-height:1.68}

/* testimonials marquee */
.testimonials-shell{
  display:grid; gap:16px;
  margin-top:12px;
}
.marquee{
  position:relative;
  overflow:hidden;
  mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.marquee-track{
  display:flex; gap:18px; width:max-content;
  animation:marquee-left 40s linear infinite;
}
.marquee-right .marquee-track{animation-name:marquee-right}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee-left{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@keyframes marquee-right{
  from{transform:translateX(-50%)}
  to{transform:translateX(0)}
}
.testimonial-card{
  width:360px; min-height:220px;
  border:1px solid var(--line2);
  background:linear-gradient(180deg,rgba(255,255,255,.082),rgba(255,255,255,.034));
  box-shadow:inset 0 1px rgba(255,255,255,.06);
  border-radius:28px;
  padding:18px;
  position:relative; overflow:hidden;
  transition:transform .25s ease,border-color .25s ease, box-shadow .25s ease;
}
.testimonial-card.wide{width:430px}
.testimonial-card:hover{
  transform:translateY(-4px);
  border-color:rgba(122,220,255,.22);
  box-shadow:0 22px 55px rgba(0,0,0,.16);
}
.testi-head{
  display:flex; align-items:center; gap:14px; margin-bottom:14px;
}
.avatar{
  width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center;
  color:#fff; font-weight:800; font-size:20px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 0 0 4px rgba(255,255,255,.03);
  flex:0 0 auto;
}
.avatar.s1{background:linear-gradient(135deg,#7d2b00,#b84b00)}
.avatar.s2{background:linear-gradient(135deg,#0f6058,#3bb1a5)}
.avatar.s3{background:linear-gradient(135deg,#a76673,#e0a0aa)}
.avatar.s4{background:linear-gradient(135deg,#0f213f,#3a7dff)}
.avatar.s5{background:linear-gradient(135deg,#2c4a20,#6ed84f)}
.avatar.s6{background:linear-gradient(135deg,#5a4f0b,#c6ae42)}
.avatar.s7{background:linear-gradient(135deg,#2d2b62,#7868ff)}
.avatar.s8{background:linear-gradient(135deg,#553049,#d56eb1)}
.avatar.s9{background:linear-gradient(135deg,#1a526b,#42b7da)}
.testi-meta strong{
  display:block; font-size:17px; letter-spacing:-.02em; font-weight:700;
}
.testi-meta small{
  display:block; color:var(--muted); margin-top:4px; line-height:1.45;
}
.testi-tags{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:10px 0 12px;
}
.tag{
  padding:7px 10px; border-radius:999px;
  background:rgba(122,220,255,.08);
  border:1px solid rgba(122,220,255,.16);
  color:#dff8ff; font-size:12px; font-weight:600;
}
.quote{
  font-size:15px; line-height:1.68; color:#edf7ff;
}
.stars{
  margin-top:14px;
  color:#ffd56a;
  letter-spacing:.12em;
  font-size:14px;
}
.form-wrap{
  display:grid; grid-template-columns:.86fr 1.14fr; gap:28px; align-items:start;
}
.form-side{position:sticky; top:96px}
.form-side p{color:var(--muted); line-height:1.68; font-size:17px}
.form-points{display:grid; gap:12px; margin-top:22px}
.form-points div{
  padding:14px 16px; border-radius:18px;
  border:1px solid var(--line2); background:rgba(255,255,255,.045); color:#dcecff;
}
.form-card{
  border:1px solid var(--line2);
  background:linear-gradient(180deg,rgba(255,255,255,.078),rgba(255,255,255,.035));
  box-shadow:inset 0 1px rgba(255,255,255,.06);
  border-radius:32px; padding:26px; position:relative; overflow:hidden;
  box-shadow:0 18px 55px rgba(0,0,0,.12);
}
form{display:grid; gap:16px}
label{
  display:grid; gap:8px; color:#dcecff; font-size:14px; font-weight:700;
}
.field-note{margin-top:-2px; font-size:12px; color:var(--muted2); font-weight:500}
input,select,textarea{
  width:100%; padding:14px 15px; border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(1,5,12,.72); color:#fff; font:inherit; outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
input:focus,select:focus,textarea:focus{
  border-color:rgba(122,220,255,.55);
  box-shadow:0 0 0 4px rgba(122,220,255,.08), 0 0 24px rgba(122,220,255,.06);
  transform:translateY(-1px);
}
textarea{min-height:120px; resize:vertical}
.two{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.full{grid-column:1/-1}
.footer{
  padding:40px 0 52px; border-top:1px solid var(--line2); color:var(--muted2);
}
.footer-inner{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.footer-social{display:flex; gap:14px; flex-wrap:wrap}
.footer-social a:hover{color:#fff}
.reveal{
  opacity:0; transform:translateY(24px) scale(.985);
  transition:opacity .72s ease, transform .72s cubic-bezier(.2,.8,.2,1);
}
.reveal.visible{opacity:1; transform:none}
.reveal[data-delay="1"]{transition-delay:.08s}
.reveal[data-delay="2"]{transition-delay:.16s}
.reveal[data-delay="3"]{transition-delay:.24s}
.reveal[data-delay="4"]{transition-delay:.32s}

@media (max-width: 1120px){
  .hero-grid,.form-wrap{grid-template-columns:1fr}
  .section-head{display:block}
  .section-head p{margin-top:18px}
  .device-card{left:24px; right:94px}
  .profile-card{right:16px}
  .social-float{right:24px}
  .form-side{position:static}
}
@media (max-width: 900px){
  .logo-strip,.grid-3,.two{grid-template-columns:1fr}
  .nav-links a:not(.nav-cta){display:none}
  .stage{min-height:700px}
  .device-card{
    position:relative; left:auto; right:auto; top:auto;
    width:92%; max-width:none; animation:none;
  }
  .profile-card{right:18px; top:40px; width:215px}
  .laptop-badge{left:8px; bottom:28px; width:118px}
  .social-float{left:20px; right:20px; bottom:10px}
  .social-pill{width:100%}
  .testimonial-card,.testimonial-card.wide{width:320px}
}
@media (max-width: 560px){
  .container{width:min(100% - 28px,1180px)}
  .hero{padding-bottom:32px}
  .tight-section{padding-top:18px}
  .stage{min-height:640px}
  .orb{inset:16px}
  .profile-card{width:182px; padding:10px}
  .profile-photo{aspect-ratio:1/1.1}
  .identity-row img{width:34px; height:34px}
  .identity-name strong{font-size:14px}
  .laptop-badge{display:none}
  .testimonial-card,.testimonial-card.wide{width:290px; min-height:230px}
}


/* v6 premium proof wall and high ticket sections */
.proof-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin:-8px 0 28px;
}
.proof-stat{
  border:1px solid var(--line2);
  background:
    radial-gradient(circle at 20% 10%, rgba(122,220,255,.13), transparent 35%),
    linear-gradient(180deg, rgba(255,255,255,.078), rgba(255,255,255,.035));
  border-radius:22px;
  padding:18px;
  box-shadow:inset 0 1px rgba(255,255,255,.06);
}
.proof-stat strong{
  display:block;
  font-size:34px;
  letter-spacing:-.05em;
  line-height:1;
  color:#fff;
}
.proof-stat span{
  display:block;
  margin-top:8px;
  color:var(--muted);
  font-size:13px;
}
.testimonials-shell{
  border:1px solid var(--line2);
  background:
    radial-gradient(circle at 16% 8%, rgba(122,220,255,.10), transparent 28%),
    radial-gradient(circle at 80% 70%, rgba(146,246,223,.06), transparent 28%),
    rgba(255,255,255,.028);
  border-radius:34px;
  padding:18px 0;
  overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,.16), inset 0 1px rgba(255,255,255,.06);
}
.testimonial-card{
  background:
    radial-gradient(circle at 12% 0%, rgba(122,220,255,.12), transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.095),rgba(255,255,255,.038));
  backdrop-filter:blur(16px);
}
.testimonial-card::before{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  top:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(190,240,255,.65), transparent);
}
.testi-meta strong{
  color:#ffffff;
}
.case-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.case-card{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line2);
  background:
    radial-gradient(circle at 20% 0%, rgba(122,220,255,.12), transparent 30%),
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035));
  border-radius:32px;
  padding:20px;
  box-shadow:inset 0 1px rgba(255,255,255,.06);
  transition:transform .25s ease,border-color .25s ease, box-shadow .25s ease;
}
.case-card:hover{
  transform:translateY(-4px);
  border-color:rgba(122,220,255,.25);
  box-shadow:0 26px 70px rgba(0,0,0,.18);
}
.case-card.featured{
  background:
    radial-gradient(circle at 30% 0%, rgba(122,220,255,.18), transparent 35%),
    radial-gradient(circle at 90% 70%, rgba(146,246,223,.09), transparent 32%),
    linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
}
.case-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  margin-bottom:16px;
}
.case-top span{
  color:var(--blue3);
  font-weight:800;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.14em;
}
.case-top strong{
  font-size:28px;
  color:rgba(255,255,255,.32);
  letter-spacing:-.06em;
}
.case-mock{
  position:relative;
  height:190px;
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.11);
  background:
    linear-gradient(135deg, rgba(122,220,255,.22), transparent 45%),
    radial-gradient(circle at 70% 28%, rgba(146,246,223,.11), transparent 26%),
    #07111f;
  margin-bottom:18px;
}
.case-mock::before{
  content:"";
  position:absolute;
  inset:20px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(90deg,rgba(255,255,255,.08),transparent),
    repeating-linear-gradient(90deg,rgba(255,255,255,.10) 0 1px, transparent 1px 46px);
  opacity:.7;
}
.case-mock::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:28%;
  left:-35%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  transform:skewX(-18deg);
  animation:scan 6.8s linear infinite;
}
.case-play{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:66px;
  height:66px;
  border-radius:50%;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(122,220,255,.28);
  box-shadow:0 0 36px rgba(122,220,255,.20);
  z-index:2;
}
.case-play::before{
  content:"";
  position:absolute;
  left:28px;
  top:21px;
  border-left:18px solid #ddf8ff;
  border-top:12px solid transparent;
  border-bottom:12px solid transparent;
}
.case-bars{
  position:absolute;
  left:20px;
  right:20px;
  bottom:18px;
  display:grid;
  gap:8px;
  z-index:2;
}
.case-bars i{
  display:block;
  height:8px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(255,255,255,.70),rgba(122,220,255,.14));
}
.case-bars i:nth-child(2){width:72%}
.case-bars i:nth-child(3){width:48%}
.case-steps{
  display:grid;
  gap:12px;
}
.case-steps div{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
  border-radius:18px;
  padding:14px;
}
.case-steps small{
  display:block;
  color:var(--blue);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:11px;
  margin-bottom:6px;
}
.case-steps p{
  color:var(--muted);
  line-height:1.58;
  margin:0;
  font-size:14px;
}
.final-cta-section{
  padding:30px 0 54px;
}
.final-cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  border:1px solid rgba(122,220,255,.22);
  background:
    radial-gradient(circle at 10% 0%, rgba(122,220,255,.16), transparent 32%),
    radial-gradient(circle at 88% 70%, rgba(146,246,223,.08), transparent 32%),
    linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.035));
  border-radius:36px;
  padding:34px;
  box-shadow:0 30px 90px rgba(0,0,0,.20), inset 0 1px rgba(255,255,255,.06);
}
.final-cta h2{
  margin-top:10px;
  max-width:760px;
}
.final-cta p{
  color:var(--muted);
  line-height:1.66;
  max-width:720px;
  margin:14px 0 0;
}
.final-cta .btn{
  white-space:nowrap;
}
@media (max-width: 1024px){
  .proof-stats{grid-template-columns:repeat(2,1fr)}
  .case-grid{grid-template-columns:1fr}
  .final-cta{display:block}
  .final-cta .btn{margin-top:24px}
}
@media (max-width: 620px){
  .proof-stats{grid-template-columns:1fr}
  .final-cta{padding:24px}
}


/* v9 selected work section removed */
.testi-tags,
.tag{display:none !important;}
.case-mock,
.case-play,
.case-bars{display:none !important;}
.case-video{position:relative;width:100%;aspect-ratio:16 / 9;border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:#050b14;box-shadow:0 0 45px rgba(122,220,255,.08);margin-bottom:18px;}
.case-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.case-card:nth-child(3) .case-video{aspect-ratio:9 / 16;width:min(100%,230px);margin-inline:auto;}
.testimonial-card{min-height:190px;}
.quote{margin-top:4px;}
@media (max-width: 1024px){
  .video-grid{
    grid-template-columns:1fr;
  }
  .video-frame.vertical{
    width:min(100%,300px);
  }
}


/* v10 improved mini case studies */
.case-grid{
  align-items:stretch;
}
.case-card{
  display:flex;
  flex-direction:column;
  min-height:100%;
  padding:22px;
  border-radius:34px;
  background:
    radial-gradient(circle at 18% 0%, rgba(122,220,255,.14), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.038));
  box-shadow:
    inset 0 1px rgba(255,255,255,.08),
    0 24px 70px rgba(0,0,0,.14);
}
.case-card.featured{
  background:
    radial-gradient(circle at 22% 0%, rgba(122,220,255,.18), transparent 36%),
    radial-gradient(circle at 90% 75%, rgba(146,246,223,.08), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
}
.case-top{
  margin-bottom:18px;
}
.case-top span{
  font-size:12px;
  letter-spacing:.16em;
}
.case-top strong{
  font-size:30px;
  color:rgba(255,255,255,.30);
}
.case-video{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  border-radius:28px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.13);
  background:
    radial-gradient(circle at 18% 8%, rgba(122,220,255,.10), transparent 28%),
    linear-gradient(135deg, rgba(122,220,255,.08), rgba(255,255,255,.02)),
    #050b14;
  box-shadow:
    0 0 45px rgba(122,220,255,.08),
    inset 0 1px rgba(255,255,255,.06);
  margin-bottom:18px;
}
.case-video::before{
  content:"";
  position:absolute;
  inset:14px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.08);
  pointer-events:none;
  z-index:2;
}
.case-video iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  z-index:1;
}
.short-stage{
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 18%, rgba(122,220,255,.14), transparent 28%),
    radial-gradient(circle at 84% 76%, rgba(146,246,223,.06), transparent 24%),
    #050b14;
}
.short-stage::before{
  inset:18px;
}
.phone-shell{
  position:relative;
  width:min(100%, 170px);
  height:min(100%, 302px);
  aspect-ratio:9 / 16;
  border-radius:28px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  background:#02070f;
  box-shadow:
    0 20px 50px rgba(0,0,0,.30),
    0 0 35px rgba(122,220,255,.10);
  z-index:1;
}
.phone-shell::before{
  content:"";
  position:absolute;
  top:8px;
  left:50%;
  transform:translateX(-50%);
  width:34%;
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  z-index:2;
}
.phone-shell iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
.case-steps{
  display:grid;
  gap:14px;
  margin-top:auto;
}
.case-steps div{
  border-radius:20px;
  padding:16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08);
}
.case-steps small{
  letter-spacing:.15em;
  font-size:11px;
  margin-bottom:8px;
}
.case-steps p{
  font-size:15px;
  line-height:1.6;
}
@media (max-width: 1024px){
  .case-grid{
    grid-template-columns:1fr;
  }
  .phone-shell{
    width:min(100%, 180px);
    height:320px;
  }
}


/* v11 premium fire hero redesign */
.hero{
  padding:118px 0 98px;
}
.hero-grid{
  grid-template-columns:1.12fr .88fr;
  gap:26px;
  align-items:center;
}
.hero-grid > .reveal:first-child{
  padding-right:10px;
}
.badge{
  padding:12px 18px;
  border-radius:999px;
  border-color:rgba(122,220,255,.24);
  box-shadow:
    inset 0 0 24px rgba(122,220,255,.05),
    0 10px 30px rgba(0,0,0,.10);
}
h1{
  font-size:clamp(68px,7.2vw,112px);
  line-height:.88;
  letter-spacing:-.10em;
  max-width:780px;
  margin:26px 0 22px;
}
.gradient-text{
  background:linear-gradient(90deg,#ffffff 0%, #dcf8ff 22%, #9ceaff 56%, #78d7ff 78%, #ffffff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero p{
  max-width:760px;
  font-size:clamp(19px,1.8vw,24px);
  line-height:1.66;
  color:#b6c4d6;
}
.hero-actions{
  margin:36px 0 20px;
}
.hero-meta{
  gap:16px 18px;
  margin-bottom:18px;
}
.hero-panels{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  max-width:780px;
}
.hero-panel{
  position:relative;
  overflow:hidden;
  padding:18px 18px 17px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 18% 0%, rgba(122,220,255,.12), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  box-shadow:
    inset 0 1px rgba(255,255,255,.06),
    0 18px 55px rgba(0,0,0,.12);
}
.hero-panel::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.06) 45%, transparent 75%);
  transform:translateX(-120%);
  transition:transform .9s ease;
  pointer-events:none;
}
.hero-panel:hover::after{
  transform:translateX(120%);
}
.hero-panel strong{
  display:block;
  font-size:26px;
  line-height:1;
  letter-spacing:-.05em;
  color:#fff;
}
.hero-panel span{
  display:block;
  margin-top:8px;
  color:#aebfd0;
  line-height:1.45;
  font-size:13px;
}
.stage{
  min-height:790px;
  position:relative;
  display:grid;
  place-items:center;
}
.stage::before{
  content:"";
  position:absolute;
  inset:3% 2% 8% 12%;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(122,220,255,.14), transparent 38%),
    radial-gradient(circle at 62% 36%, rgba(255,255,255,.07), transparent 20%);
  filter:blur(6px);
  z-index:0;
}
.stage::after{
  content:"";
  position:absolute;
  inset:8% 12%;
  border-radius:50%;
  border:1px solid rgba(122,220,255,.12);
  pointer-events:none;
  z-index:0;
}
.orb{
  inset:0;
  border:0;
  background:
    radial-gradient(circle at 35% 20%, rgba(255,255,255,.12), transparent 16%),
    radial-gradient(circle at 55% 48%, rgba(122,220,255,.16), transparent 42%),
    radial-gradient(circle at 50% 78%, rgba(146,246,223,.06), transparent 22%);
  box-shadow:none;
}
.orb::after{
  inset:12%;
  border-color:rgba(122,220,255,.13);
}
.device-card{
  left:4px;
  right:132px;
  top:118px;
  max-width:590px;
  padding:18px;
  border-radius:34px;
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
  box-shadow:
    0 28px 80px rgba(0,0,0,.22),
    inset 0 1px rgba(255,255,255,.08);
  z-index:2;
}
.browser{
  border-radius:26px;
}
.screen{
  min-height:330px;
  padding:34px;
}
.big-title{
  font-size:58px;
  line-height:.90;
  max-width:360px;
}
.small-ui{
  left:34px;
  right:34px;
  bottom:28px;
}
.small-ui b,
.small-ui span{
  height:11px;
}
.profile-card{
  width:320px;
  right:-2px;
  top:82px;
  border-radius:30px;
  padding:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
  box-shadow:
    0 28px 80px rgba(0,0,0,.22),
    inset 0 1px rgba(255,255,255,.08);
  z-index:3;
}
.profile-photo{
  aspect-ratio:1 / 1.02;
  border-radius:22px;
}
.identity-row{
  margin-top:16px;
}
.identity-row img{
  width:46px;
  height:46px;
}
.identity-name strong{
  font-size:18px;
}
.identity-name small{
  font-size:13px;
}
.laptop-badge{
  left:24px;
  bottom:58px;
  width:182px;
  border-radius:24px;
  padding:15px 16px;
  background:rgba(255,255,255,.09);
  box-shadow:
    0 20px 55px rgba(0,0,0,.20),
    inset 0 1px rgba(255,255,255,.07);
  z-index:3;
}
.laptop-icon{
  width:52px;
  height:36px;
  border-radius:12px;
}
.laptop-badge b{
  font-size:15px;
}
.laptop-badge span{
  font-size:13px;
}
.hero-proof-float{
  position:absolute;
  top:46px;
  right:34px;
  z-index:4;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid rgba(122,220,255,.20);
  background:rgba(255,255,255,.08);
  color:#eef8ff;
  font-size:13px;
  font-weight:700;
  backdrop-filter:blur(18px);
  box-shadow:
    0 16px 40px rgba(0,0,0,.16),
    inset 0 1px rgba(255,255,255,.06);
}
.hero-proof-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#96f4e1;
  box-shadow:0 0 16px #96f4e1;
}
.social-float{
  right:10px;
  bottom:46px;
  gap:12px;
  z-index:4;
}
.social-pill{
  min-width:255px;
  padding:14px 16px;
  border-radius:20px;
  background:rgba(255,255,255,.08);
  box-shadow:
    0 20px 50px rgba(0,0,0,.16),
    inset 0 1px rgba(255,255,255,.06);
}
.social-pill b{
  font-size:12px;
  letter-spacing:.14em;
}
.social-pill span{
  font-size:14px;
}
@media (max-width: 1180px){
  .hero-grid{
    grid-template-columns:1fr;
    gap:28px;
  }
  .hero-grid > .reveal:first-child{
    padding-right:0;
  }
  .hero-panels{
    max-width:none;
  }
  .stage{
    min-height:720px;
  }
}
@media (max-width: 900px){
  .hero{
    padding:96px 0 72px;
  }
  h1{
    font-size:clamp(56px,12vw,82px);
    max-width:none;
  }
  .hero-panels{
    grid-template-columns:1fr;
  }
  .stage{
    min-height:700px;
  }
  .device-card{
    position:relative;
    left:auto;
    right:auto;
    top:auto;
    width:92%;
    max-width:none;
  }
  .profile-card{
    width:230px;
    right:22px;
    top:36px;
  }
  .hero-proof-float{
    top:16px;
    right:18px;
    font-size:12px;
  }
  .social-float{
    left:20px;
    right:20px;
    bottom:10px;
  }
}
@media (max-width: 560px){
  .hero-panels{
    grid-template-columns:1fr;
  }
  .hero-panel strong{
    font-size:22px;
  }
  .stage{
    min-height:650px;
  }
  .profile-card{
    width:184px;
  }
  .hero-proof-float{
    display:none;
  }
}


/* v12 client-friendly hero reset */
.hero{
  padding:96px 0 72px !important;
}
.hero-grid{
  grid-template-columns:1fr 1fr !important;
  gap:54px !important;
  align-items:center !important;
}
.hero-grid > .reveal:first-child{
  padding-right:0 !important;
}
.badge{
  padding:10px 14px !important;
  font-size:14px !important;
}
h1{
  font-size:clamp(48px,5.2vw,78px) !important;
  line-height:1.01 !important;
  letter-spacing:-.065em !important;
  max-width:760px !important;
  margin:24px 0 22px !important;
}
.hero p{
  max-width:680px !important;
  font-size:clamp(17px,1.45vw,21px) !important;
  line-height:1.72 !important;
  color:#b7c5d6 !important;
}
.hero-actions{
  margin:30px 0 22px !important;
}
.hero-meta{
  margin-bottom:18px !important;
  gap:12px 18px !important;
}
.hero-panels{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:12px !important;
  max-width:760px !important;
}
.hero-panel{
  padding:16px !important;
  border-radius:20px !important;
}
.hero-panel strong{
  font-size:18px !important;
  letter-spacing:-.03em !important;
}
.hero-panel span{
  font-size:13px !important;
  line-height:1.5 !important;
}
.stage{
  min-height:600px !important;
}
.stage::before{
  inset:8% 4% 10% 8% !important;
  opacity:.85 !important;
}
.orb{
  inset:18px !important;
}
.device-card{
  left:28px !important;
  right:120px !important;
  top:120px !important;
  max-width:440px !important;
  padding:16px !important;
  border-radius:30px !important;
}
.screen{
  min-height:260px !important;
  padding:28px !important;
}
.big-title{
  font-size:42px !important;
  line-height:.95 !important;
  max-width:280px !important;
  letter-spacing:-.055em !important;
}
.profile-card{
  width:250px !important;
  right:8px !important;
  top:92px !important;
  padding:14px !important;
}
.profile-photo{
  aspect-ratio:1 / 1.05 !important;
  border-radius:20px !important;
}
.identity-row img{
  width:42px !important;
  height:42px !important;
}
.identity-name strong{
  font-size:16px !important;
}
.identity-name small{
  font-size:12px !important;
}
.hero-proof-float{
  top:58px !important;
  right:38px !important;
  padding:10px 14px !important;
  font-size:12px !important;
}
.laptop-badge{
  left:18px !important;
  bottom:58px !important;
  width:150px !important;
  padding:13px 14px !important;
}
.social-float{
  right:24px !important;
  bottom:46px !important;
}
.social-pill{
  min-width:220px !important;
  padding:12px 14px !important;
}
@media (max-width: 1180px){
  .hero-grid{
    grid-template-columns:1fr !important;
    gap:32px !important;
  }
  .hero-panels{
    max-width:none !important;
  }
  .stage{
    min-height:620px !important;
  }
}
@media (max-width: 900px){
  .hero{
    padding:82px 0 58px !important;
  }
  h1{
    font-size:clamp(42px,10vw,64px) !important;
    max-width:none !important;
  }
  .hero-panels{
    grid-template-columns:1fr !important;
  }
  .stage{
    min-height:650px !important;
  }
  .device-card{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    width:92% !important;
    max-width:none !important;
  }
  .profile-card{
    width:210px !important;
    right:20px !important;
    top:38px !important;
  }
  .hero-proof-float{
    top:14px !important;
    right:18px !important;
  }
  .social-float{
    left:20px !important;
    right:20px !important;
    bottom:10px !important;
  }
  .social-pill{
    width:100% !important;
  }
}
@media (max-width: 560px){
  .hero-proof-float{
    display:none !important;
  }
  .stage{
    min-height:610px !important;
  }
  .profile-card{
    width:180px !important;
  }
}


/* v13 requested refinements */
.hero-grid{
  grid-template-columns:.96fr 1.04fr !important;
  gap:42px !important;
}
.stage{
  min-height:690px !important;
}
.device-card{
  max-width:500px !important;
  left:10px !important;
  right:130px !important;
  top:112px !important;
}
.screen{
  min-height:300px !important;
}
.big-title{
  font-size:50px !important;
  max-width:330px !important;
}
.profile-card{
  width:290px !important;
  right:8px !important;
  top:78px !important;
}
.profile-photo{
  aspect-ratio:1 / .95 !important;
}
.laptop-badge{
  width:176px !important;
  left:14px !important;
  bottom:60px !important;
}
.hero-proof-float{
  right:24px !important;
  top:36px !important;
  padding:12px 16px !important;
}
.social-float{
  right:20px !important;
  bottom:42px !important;
}
.social-pill{
  min-width:250px !important;
}
.case-grid{
  align-items:stretch !important;
}
.case-card{
  min-height:720px !important;
}
.case-video{
  aspect-ratio:16 / 9 !important;
  height:auto !important;
}
.short-stage{
  aspect-ratio:16 / 9 !important;
  display:grid !important;
  place-items:center !important;
}
.case-card:nth-child(3) .case-video{
  aspect-ratio:16 / 9 !important;
  width:100% !important;
  margin-inline:0 !important;
}
.phone-shell{
  width:126px !important;
  height:224px !important;
  border-radius:24px !important;
}
.case-steps{
  gap:12px !important;
}
.case-steps div{
  padding:15px !important;
}
.case-card:nth-child(3){
  background:
    radial-gradient(circle at 22% 0%, rgba(122,220,255,.16), transparent 34%),
    radial-gradient(circle at 80% 72%, rgba(146,246,223,.07), transparent 28%),
    linear-gradient(180deg,rgba(255,255,255,.095),rgba(255,255,255,.038)) !important;
}
#testimonials{
  padding-top:74px !important;
}
#services{
  padding-top:74px !important;
}
#brief .form-card{
  max-width:760px;
  margin-left:auto;
}
#brief form{
  gap:18px !important;
}
#brief .two{
  grid-template-columns:1fr 1fr !important;
}
@media (max-width:1180px){
  .hero-grid{
    grid-template-columns:1fr !important;
  }
  .stage{
    min-height:690px !important;
  }
  .case-card{
    min-height:auto !important;
  }
}
@media (max-width:900px){
  .device-card{
    position:relative !important;
    width:92% !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    max-width:none !important;
  }
  .profile-card{
    width:220px !important;
    right:18px !important;
    top:36px !important;
  }
  .phone-shell{
    width:120px !important;
    height:214px !important;
  }
  #brief .two{
    grid-template-columns:1fr !important;
  }
}


/* v14 final polish requested */
.hero-grid{
  grid-template-columns:1fr 1.03fr !important;
  gap:42px !important;
}
.hero-panels{
  display:none !important;
}
.stage{
  min-height:650px !important;
  transform:translateY(-18px);
}
.stage::before{
  inset:2% 2% 8% 6% !important;
}
.orb{
  inset:4px !important;
}
.device-card{
  max-width:535px !important;
  left:0 !important;
  right:138px !important;
  top:72px !important;
  transform:scale(1.04);
  transform-origin:center;
}
.screen{
  min-height:315px !important;
}
.big-title{
  font-size:52px !important;
  max-width:340px !important;
}
.profile-card{
  width:315px !important;
  right:0 !important;
  top:38px !important;
}
.profile-photo{
  aspect-ratio:1 / .95 !important;
}
.hero-proof-float{
  right:24px !important;
  top:0 !important;
  padding:12px 17px !important;
  font-size:13px !important;
}
.laptop-badge{
  width:178px !important;
  left:20px !important;
  bottom:76px !important;
}
.social-float{
  right:20px !important;
  bottom:72px !important;
}
.social-pill{
  min-width:260px !important;
}
.logo-strip{
  grid-template-columns:repeat(3,1fr) !important;
  max-width:980px;
  margin-inline:auto;
}
.strip-item{
  min-height:74px;
}
@media (max-width:1180px){
  .hero-grid{
    grid-template-columns:1fr !important;
  }
  .stage{
    transform:none;
    min-height:680px !important;
  }
  .device-card{
    max-width:520px !important;
  }
}
@media (max-width:900px){
  .stage{
    min-height:650px !important;
  }
  .device-card{
    position:relative !important;
    width:92% !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    max-width:none !important;
    transform:none;
  }
  .profile-card{
    width:220px !important;
    right:18px !important;
    top:36px !important;
  }
  .hero-proof-float{
    top:14px !important;
    right:18px !important;
  }
  .social-float{
    left:20px !important;
    right:20px !important;
    bottom:10px !important;
  }
  .logo-strip{
    grid-template-columns:1fr !important;
    max-width:none;
  }
}


/* v15 premium background and quality-first polish */
body{
  background:
    radial-gradient(circle at 12% 8%, rgba(122,220,255,.18), transparent 24%),
    radial-gradient(circle at 88% 10%, rgba(146,246,223,.08), transparent 20%),
    radial-gradient(circle at 50% 92%, rgba(82,182,255,.10), transparent 36%),
    linear-gradient(180deg,#02060d 0%,#06111e 40%,#02050b 100%) !important;
}
body::before{
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    radial-gradient(circle at center, rgba(122,220,255,.045) 1px, transparent 1.5px) !important;
  background-size:64px 64px,64px 64px,28px 28px !important;
  opacity:.9;
}
body::after{
  background:
    radial-gradient(circle at 14% 22%, rgba(122,220,255,.07), transparent 26%),
    radial-gradient(circle at 78% 18%, rgba(255,255,255,.045), transparent 20%),
    radial-gradient(circle at 80% 72%, rgba(146,246,223,.055), transparent 26%),
    radial-gradient(circle at 48% 88%, rgba(82,182,255,.06), transparent 28%) !important;
}
.nav{
  background:rgba(2,6,13,.76) !important;
  border-bottom:1px solid rgba(180,235,255,.10) !important;
}
.nav.scrolled{
  background:rgba(2,6,13,.90) !important;
  box-shadow:0 18px 60px rgba(0,0,0,.28) !important;
}
.hero::after{
  content:"";
  position:absolute;
  left:50%;
  top:7%;
  width:52vw;
  height:52vw;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(122,220,255,.075), transparent 62%);
  pointer-events:none;
  z-index:-1;
}
.badge,
.strip-item,
.card,
.case-card,
.testimonial-card,
.form-card,
.final-cta,
.proof-stat{
  backdrop-filter:blur(18px);
  border-color:rgba(180,235,255,.13) !important;
}
.badge{
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035)) !important;
}
.btn-primary{
  box-shadow:
    0 20px 65px rgba(99,197,255,.26),
    inset 0 1px rgba(255,255,255,.65) !important;
}
.btn-secondary{
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035)) !important;
}
.device-card,
.profile-card,
.laptop-badge,
.social-pill,
.hero-proof-float{
  border-color:rgba(180,235,255,.15) !important;
  background:
    radial-gradient(circle at 15% 0%, rgba(122,220,255,.11), transparent 32%),
    linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.045)) !important;
  box-shadow:
    0 28px 90px rgba(0,0,0,.26),
    inset 0 1px rgba(255,255,255,.08) !important;
}
.screen,
.case-video,
.video-frame{
  box-shadow:
    0 0 50px rgba(122,220,255,.10),
    inset 0 1px rgba(255,255,255,.06) !important;
}
.section-head h2,
h1{
  text-shadow:0 0 34px rgba(122,220,255,.055);
}
.gradient-text{
  background:linear-gradient(90deg,#fff 0%,#dff9ff 24%,#9becff 55%,#6bd7ff 78%,#fff 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
}
.proof-stats{
  margin-top:2px !important;
}
.proof-stat{
  background:
    radial-gradient(circle at 20% 0%, rgba(122,220,255,.14), transparent 36%),
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035)) !important;
}
.proof-stat strong{
  color:#ffffff;
}
.case-card::before,
.testimonial-card::before,
.form-card::before,
.final-cta::before{
  content:"";
  position:absolute;
  left:24px;
  right:24px;
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(215,248,255,.55),transparent);
  pointer-events:none;
}
.case-card,
.testimonial-card,
.form-card,
.final-cta{
  position:relative;
}
.form-points div{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03)) !important;
  border-color:rgba(180,235,255,.12) !important;
}


/* v16 premium moving video showcase */
.premium-reel-section{
  padding:22px 0 56px;
  position:relative;
  overflow:hidden;
}
.premium-reel-section::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:80vw;
  height:34vw;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(122,220,255,.08), transparent 60%);
  pointer-events:none;
  z-index:-1;
}
.reel-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:26px;
  margin-bottom:24px;
}
.reel-head h2{
  font-size:clamp(32px,4vw,56px);
  line-height:1;
  letter-spacing:-.06em;
  margin:12px 0 0;
}
.reel-head p{
  max-width:500px;
  color:var(--muted);
  line-height:1.66;
  margin:0;
}
.premium-reel{
  width:100%;
  overflow:hidden;
  mask-image:linear-gradient(90deg, transparent, black 7%, black 93%, transparent);
}
.reel-track{
  display:flex;
  gap:18px;
  width:max-content;
  animation:premium-reel-move 55s linear infinite;
  padding:10px 0 18px;
}
.premium-reel:hover .reel-track{
  animation-play-state:paused;
}
@keyframes premium-reel-move{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.reel-card{
  width:360px;
  height:520px;
  border-radius:34px;
  padding:14px;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(180,235,255,.13);
  background:
    radial-gradient(circle at 18% 0%, rgba(122,220,255,.13), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.095), rgba(255,255,255,.035));
  box-shadow:
    0 28px 80px rgba(0,0,0,.22),
    inset 0 1px rgba(255,255,255,.08);
  backdrop-filter:blur(18px);
  flex:0 0 auto;
  transition:transform .25s ease,border-color .25s ease, box-shadow .25s ease;
}
.reel-card:hover{
  transform:translateY(-6px) scale(1.015);
  border-color:rgba(122,220,255,.30);
  box-shadow:
    0 34px 100px rgba(0,0,0,.28),
    0 0 45px rgba(122,220,255,.12),
    inset 0 1px rgba(255,255,255,.10);
}
.reel-card::before{
  content:"";
  position:absolute;
  left:24px;
  right:24px;
  top:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(215,248,255,.55), transparent);
}
.reel-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.06) 45%, transparent 75%);
  transform:translateX(-120%);
  transition:transform .9s ease;
  pointer-events:none;
}
.reel-card:hover::after{
  transform:translateX(120%);
}
.reel-video{
  width:100%;
  height:430px;
  border-radius:24px;
  overflow:hidden;
  position:relative;
  border:1px solid rgba(255,255,255,.12);
  background:#030914;
  box-shadow:0 0 50px rgba(122,220,255,.08);
}
.reel-video iframe{
  width:100%;
  height:100%;
  border:0;
  background:#030914;
}
.reel-card-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 4px 0;
}
.reel-card-footer strong{
  display:block;
  color:#fff;
  font-size:15px;
  letter-spacing:-.02em;
}
.reel-card-footer span{
  color:var(--muted);
  font-size:13px;
}
.reel-cta{
  margin-top:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
}
.reel-cta span{
  color:#dcecff;
  font-weight:700;
  letter-spacing:-.02em;
}
@media (max-width: 900px){
  .reel-head{
    display:block;
  }
  .reel-head p{
    margin-top:16px;
  }
  .reel-card{
    width:310px;
    height:490px;
  }
  .reel-video{
    height:400px;
  }
}
@media (max-width: 560px){
  .reel-card{
    width:285px;
    height:470px;
  }
  .reel-video{
    height:382px;
  }
}


/* v17 first-screen video showcase */
.top-video-showcase{
  position:relative;
  z-index:5;
  padding:22px 0 10px;
  overflow:hidden;
  background:
    radial-gradient(circle at 30% 0%, rgba(122,220,255,.10), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.025), transparent);
}
.top-video-showcase::before,
.top-video-showcase::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:12vw;
  z-index:3;
  pointer-events:none;
}
.top-video-showcase::before{
  left:0;
  background:linear-gradient(90deg, #02060d, transparent);
}
.top-video-showcase::after{
  right:0;
  background:linear-gradient(270deg, #02060d, transparent);
}
.top-video-row{
  display:flex;
  gap:18px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  cursor:grab;
  padding:8px max(20px, calc((100vw - 1180px) / 2)) 18px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.top-video-row::-webkit-scrollbar{
  display:none;
}
.top-video-row.is-dragging{
  cursor:grabbing;
  scroll-behavior:auto;
}
.top-video-card{
  scroll-snap-align:center;
  flex:0 0 clamp(280px, 28vw, 430px);
  height:clamp(420px, 48vw, 620px);
  position:relative;
  overflow:hidden;
  border-radius:34px;
  border:1px solid rgba(180,235,255,.13);
  background:
    radial-gradient(circle at 18% 0%, rgba(122,220,255,.16), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.095), rgba(255,255,255,.035));
  box-shadow:
    0 30px 90px rgba(0,0,0,.30),
    0 0 55px rgba(122,220,255,.10),
    inset 0 1px rgba(255,255,255,.08);
  backdrop-filter:blur(18px);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.top-video-card:hover{
  transform:translateY(-5px) scale(1.012);
  border-color:rgba(122,220,255,.30);
  box-shadow:
    0 38px 110px rgba(0,0,0,.34),
    0 0 70px rgba(122,220,255,.16),
    inset 0 1px rgba(255,255,255,.10);
}
.top-video-card::before{
  content:"";
  position:absolute;
  left:24px;
  right:24px;
  top:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(215,248,255,.65), transparent);
  z-index:2;
}
.top-video-card iframe{
  width:100%;
  height:100%;
  border:0;
  background:#030914;
  border-radius:28px;
  padding:0;
}
.hero{
  padding-top:58px !important;
}
@media (max-width: 900px){
  .top-video-showcase{
    padding-top:16px;
  }
  .top-video-row{
    gap:14px;
    padding-inline:18px;
  }
  .top-video-card{
    flex-basis:300px;
    height:520px;
  }
}
@media (max-width: 560px){
  .top-video-card{
    flex-basis:270px;
    height:485px;
    border-radius:28px;
  }
}


/* v18 premium YouTube showcase first */
.top-video-showcase{
  position:relative;
  z-index:5;
  padding:26px 0 18px !important;
  overflow:hidden;
  background:
    radial-gradient(circle at 24% 0%, rgba(122,220,255,.12), transparent 34%),
    radial-gradient(circle at 74% 12%, rgba(146,246,223,.06), transparent 25%),
    linear-gradient(180deg, rgba(255,255,255,.025), transparent) !important;
}
.top-showcase-frame{
  position:relative;
  width:100%;
}
.top-video-showcase::before,
.top-video-showcase::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:12vw;
  z-index:3;
  pointer-events:none;
}
.top-video-showcase::before{
  left:0;
  background:linear-gradient(90deg, #02060d, transparent);
}
.top-video-showcase::after{
  right:0;
  background:linear-gradient(270deg, #02060d, transparent);
}
.top-video-row{
  display:flex !important;
  gap:22px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scroll-snap-type:x mandatory !important;
  scroll-behavior:smooth !important;
  cursor:grab !important;
  padding:12px max(56px, calc((100vw - 1180px) / 2)) 26px !important;
  scrollbar-width:none !important;
  -webkit-overflow-scrolling:touch !important;
}
.top-video-row::-webkit-scrollbar{
  display:none !important;
}
.top-video-row.is-dragging{
  cursor:grabbing !important;
  scroll-behavior:auto !important;
}
.top-video-card{
  scroll-snap-align:center !important;
  flex:0 0 clamp(330px, 46vw, 720px) !important;
  height:auto !important;
  aspect-ratio:16 / 9 !important;
  position:relative !important;
  overflow:hidden !important;
  border-radius:34px !important;
  border:1px solid rgba(180,235,255,.16) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(122,220,255,.16), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.035)) !important;
  box-shadow:
    0 34px 100px rgba(0,0,0,.34),
    0 0 65px rgba(122,220,255,.12),
    inset 0 1px rgba(255,255,255,.10) !important;
  backdrop-filter:blur(18px) !important;
  transition:transform .25s ease,border-color .25s ease, box-shadow .25s ease !important;
  padding:12px !important;
}
.top-video-card:hover{
  transform:translateY(-6px) scale(1.012) !important;
  border-color:rgba(122,220,255,.34) !important;
  box-shadow:
    0 42px 120px rgba(0,0,0,.38),
    0 0 85px rgba(122,220,255,.18),
    inset 0 1px rgba(255,255,255,.12) !important;
}
.top-video-card iframe{
  position:absolute !important;
  inset:12px !important;
  width:calc(100% - 24px) !important;
  height:calc(100% - 24px) !important;
  border:0 !important;
  border-radius:24px !important;
  background:#030914 !important;
  padding:0 !important;
}
.top-video-card::before{
  content:"" !important;
  position:absolute !important;
  left:28px !important;
  right:28px !important;
  top:0 !important;
  height:1px !important;
  background:linear-gradient(90deg, transparent, rgba(215,248,255,.70), transparent) !important;
  z-index:2 !important;
}
.top-video-card::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.055) 45%, transparent 75%) !important;
  transform:translateX(-130%) !important;
  transition:transform .9s ease !important;
  pointer-events:none !important;
  z-index:2 !important;
}
.top-video-card:hover::after{
  transform:translateX(130%) !important;
}
.showcase-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:10;
  width:54px;
  height:54px;
  border-radius:50%;
  border:1px solid rgba(180,235,255,.20);
  background:
    radial-gradient(circle at 30% 10%, rgba(255,255,255,.16), transparent 42%),
    rgba(4,9,18,.76);
  color:#effaff;
  font-size:38px;
  line-height:1;
  display:grid;
  place-items:center;
  cursor:pointer;
  backdrop-filter:blur(16px);
  box-shadow:0 18px 50px rgba(0,0,0,.26), 0 0 35px rgba(122,220,255,.10);
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
}
.showcase-arrow:hover{
  transform:translateY(-50%) scale(1.06);
  border-color:rgba(122,220,255,.40);
  background:rgba(8,18,34,.88);
}
.showcase-arrow-left{
  left:max(14px, calc((100vw - 1180px) / 2 - 24px));
}
.showcase-arrow-right{
  right:max(14px, calc((100vw - 1180px) / 2 - 24px));
}
.hero{
  padding-top:54px !important;
}
@media (max-width:900px){
  .top-video-row{
    padding-inline:48px !important;
    gap:16px !important;
  }
  .top-video-card{
    flex-basis:78vw !important;
    border-radius:28px !important;
    padding:10px !important;
  }
  .top-video-card iframe{
    inset:10px !important;
    width:calc(100% - 20px) !important;
    height:calc(100% - 20px) !important;
    border-radius:20px !important;
  }
  .showcase-arrow{
    width:44px;
    height:44px;
    font-size:32px;
  }
  .showcase-arrow-left{left:10px;}
  .showcase-arrow-right{right:10px;}
}
@media (max-width:560px){
  .top-video-row{
    padding-inline:42px !important;
  }
  .top-video-card{
    flex-basis:82vw !important;
  }
}


/* v20 local MP4 premium first showcase */
.top-video-showcase{
  padding:26px 0 20px !important;
  overflow:hidden;
  background:
    radial-gradient(circle at 24% 0%, rgba(122,220,255,.13), transparent 34%),
    radial-gradient(circle at 78% 12%, rgba(146,246,223,.07), transparent 25%),
    linear-gradient(180deg, rgba(255,255,255,.026), transparent) !important;
}
.top-video-row{
  display:flex !important;
  gap:22px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scroll-snap-type:x mandatory !important;
  scroll-behavior:smooth !important;
  cursor:grab !important;
  padding:12px max(56px, calc((100vw - 1180px) / 2)) 28px !important;
  scrollbar-width:none !important;
  -webkit-overflow-scrolling:touch !important;
}
.top-video-row::-webkit-scrollbar{
  display:none !important;
}
.top-video-row.is-dragging{
  cursor:grabbing !important;
  scroll-behavior:auto !important;
}
.top-video-card{
  scroll-snap-align:center !important;
  flex:0 0 clamp(330px, 34vw, 500px) !important;
  aspect-ratio:9 / 16 !important;
  height:auto !important;
  border-radius:34px !important;
  padding:12px !important;
  border:1px solid rgba(180,235,255,.16) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(122,220,255,.16), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.035)) !important;
  box-shadow:
    0 34px 100px rgba(0,0,0,.34),
    0 0 70px rgba(122,220,255,.13),
    inset 0 1px rgba(255,255,255,.10) !important;
  backdrop-filter:blur(18px) !important;
  overflow:hidden !important;
  position:relative !important;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease !important;
}
.top-video-card:hover{
  transform:translateY(-6px) scale(1.012) !important;
  border-color:rgba(122,220,255,.34) !important;
  box-shadow:
    0 42px 120px rgba(0,0,0,.38),
    0 0 90px rgba(122,220,255,.18),
    inset 0 1px rgba(255,255,255,.12) !important;
}
.top-video-card::before{
  content:"" !important;
  position:absolute !important;
  left:28px !important;
  right:28px !important;
  top:0 !important;
  height:1px !important;
  background:linear-gradient(90deg, transparent, rgba(215,248,255,.70), transparent) !important;
  z-index:2 !important;
}
.top-video-card::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.055) 45%, transparent 75%) !important;
  transform:translateX(-130%) !important;
  transition:transform .9s ease !important;
  pointer-events:none !important;
  z-index:2 !important;
}
.top-video-card:hover::after{
  transform:translateX(130%) !important;
}
.local-video-card video{
  position:absolute !important;
  inset:12px !important;
  width:calc(100% - 24px) !important;
  height:calc(100% - 24px) !important;
  border-radius:24px !important;
  object-fit:cover !important;
  background:#030914 !important;
  border:0 !important;
  display:block !important;
}
.local-video-card.is-sound-on{
  border-color:rgba(146,246,223,.42) !important;
}
.local-video-card.is-sound-on::before{
  background:linear-gradient(90deg, transparent, rgba(146,246,223,.75), transparent) !important;
}
.showcase-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:10;
  width:56px;
  height:56px;
  border-radius:50%;
  border:1px solid rgba(180,235,255,.22);
  background:
    radial-gradient(circle at 30% 10%, rgba(255,255,255,.18), transparent 42%),
    rgba(4,9,18,.78);
  color:#effaff;
  font-size:40px;
  line-height:1;
  display:grid;
  place-items:center;
  cursor:pointer;
  backdrop-filter:blur(16px);
  box-shadow:0 20px 55px rgba(0,0,0,.28), 0 0 38px rgba(122,220,255,.12);
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.showcase-arrow:hover{
  transform:translateY(-50%) scale(1.07);
  border-color:rgba(122,220,255,.42);
  background:rgba(8,18,34,.90);
}
.showcase-arrow-left{
  left:max(14px, calc((100vw - 1180px) / 2 - 24px));
}
.showcase-arrow-right{
  right:max(14px, calc((100vw - 1180px) / 2 - 24px));
}
.hero{
  padding-top:54px !important;
}
@media (max-width:900px){
  .top-video-row{
    padding-inline:48px !important;
    gap:16px !important;
  }
  .top-video-card{
    flex-basis:70vw !important;
    border-radius:30px !important;
    padding:10px !important;
  }
  .local-video-card video{
    inset:10px !important;
    width:calc(100% - 20px) !important;
    height:calc(100% - 20px) !important;
    border-radius:22px !important;
  }
  .showcase-arrow{
    width:44px;
    height:44px;
    font-size:32px;
  }
  .showcase-arrow-left{left:10px;}
  .showcase-arrow-right{right:10px;}
}
@media (max-width:560px){
  .top-video-row{
    padding-inline:42px !important;
  }
  .top-video-card{
    flex-basis:76vw !important;
  }
}


/* v22 final fixed top MP4 showcase */
.top-video-showcase.local-showcase{
  position:relative;
  z-index:20;
  padding:26px 0 20px !important;
  overflow:hidden;
  background:
    radial-gradient(circle at 24% 0%, rgba(122,220,255,.13), transparent 34%),
    radial-gradient(circle at 78% 12%, rgba(146,246,223,.07), transparent 25%),
    linear-gradient(180deg, rgba(255,255,255,.026), transparent) !important;
}
.top-showcase-frame{
  position:relative;
  width:100%;
}
.top-video-row{
  display:flex !important;
  gap:22px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scroll-snap-type:x mandatory !important;
  scroll-behavior:smooth !important;
  cursor:grab !important;
  padding:12px max(56px, calc((100vw - 1180px) / 2)) 28px !important;
  scrollbar-width:none !important;
  -webkit-overflow-scrolling:touch !important;
}
.top-video-row::-webkit-scrollbar{display:none !important;}
.top-video-row.is-dragging{cursor:grabbing !important;scroll-behavior:auto !important;}
.top-video-card.local-video-card{
  scroll-snap-align:center !important;
  flex:0 0 clamp(330px, 34vw, 500px) !important;
  aspect-ratio:9 / 16 !important;
  height:auto !important;
  border-radius:34px !important;
  padding:12px !important;
  border:1px solid rgba(180,235,255,.16) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(122,220,255,.16), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.035)) !important;
  box-shadow:
    0 34px 100px rgba(0,0,0,.34),
    0 0 70px rgba(122,220,255,.13),
    inset 0 1px rgba(255,255,255,.10) !important;
  backdrop-filter:blur(18px) !important;
  overflow:hidden !important;
  position:relative !important;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease !important;
}
.top-video-card.local-video-card:hover{
  transform:translateY(-6px) scale(1.012) !important;
  border-color:rgba(122,220,255,.34) !important;
  box-shadow:
    0 42px 120px rgba(0,0,0,.38),
    0 0 90px rgba(122,220,255,.18),
    inset 0 1px rgba(255,255,255,.12) !important;
}
.top-video-card.local-video-card::before{
  content:"" !important;
  position:absolute !important;
  left:28px !important;
  right:28px !important;
  top:0 !important;
  height:1px !important;
  background:linear-gradient(90deg, transparent, rgba(215,248,255,.70), transparent) !important;
  z-index:2 !important;
}
.local-video-card video{
  position:absolute !important;
  inset:12px !important;
  width:calc(100% - 24px) !important;
  height:calc(100% - 24px) !important;
  border-radius:24px !important;
  object-fit:cover !important;
  background:#030914 !important;
  border:0 !important;
  display:block !important;
}
.showcase-arrow{
  position:absolute !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  z-index:30 !important;
  width:56px !important;
  height:56px !important;
  border-radius:50% !important;
  border:1px solid rgba(180,235,255,.22) !important;
  background:radial-gradient(circle at 30% 10%, rgba(255,255,255,.18), transparent 42%), rgba(4,9,18,.78) !important;
  color:#effaff !important;
  font-size:40px !important;
  line-height:1 !important;
  display:grid !important;
  place-items:center !important;
  cursor:pointer !important;
  backdrop-filter:blur(16px) !important;
  box-shadow:0 20px 55px rgba(0,0,0,.28), 0 0 38px rgba(122,220,255,.12) !important;
}
.showcase-arrow-left{left:max(14px, calc((100vw - 1180px) / 2 - 24px)) !important;}
.showcase-arrow-right{right:max(14px, calc((100vw - 1180px) / 2 - 24px)) !important;}
.hero{padding-top:54px !important;}
@media (max-width:900px){
  .top-video-row{padding-inline:48px !important;gap:16px !important;}
  .top-video-card.local-video-card{flex-basis:70vw !important;border-radius:30px !important;}
  .showcase-arrow{width:44px !important;height:44px !important;font-size:32px !important;}
  .showcase-arrow-left{left:10px !important;}
  .showcase-arrow-right{right:10px !important;}
}
@media (max-width:560px){
  .top-video-row{padding-inline:42px !important;}
  .top-video-card.local-video-card{flex-basis:76vw !important;}
}


/* v23 force showcase videos to 1920x1080 style horizontal 16:9 */
.top-video-card.local-video-card{
  flex:0 0 clamp(560px, 62vw, 980px) !important;
  aspect-ratio:16 / 9 !important;
  height:auto !important;
  border-radius:32px !important;
  padding:12px !important;
}
.local-video-card video{
  inset:12px !important;
  width:calc(100% - 24px) !important;
  height:calc(100% - 24px) !important;
  border-radius:22px !important;
  object-fit:cover !important;
}
.top-video-row{
  gap:24px !important;
  padding-top:14px !important;
  padding-bottom:30px !important;
}
@media (max-width:900px){
  .top-video-card.local-video-card{
    flex-basis:84vw !important;
    aspect-ratio:16 / 9 !important;
  }
}
@media (max-width:560px){
  .top-video-card.local-video-card{
    flex-basis:86vw !important;
    aspect-ratio:16 / 9 !important;
  }
}


/* v24 smoother smaller premium carousel */
.top-video-showcase{
  padding:20px 0 10px !important;
}
.top-video-row{
  gap:18px !important;
  scroll-snap-type:x mandatory !important;
  scroll-padding-inline:max(44px, calc((100vw - 1180px) / 2)) !important;
  padding:10px max(44px, calc((100vw - 1180px) / 2)) 22px !important;
}
.top-video-card.local-video-card{
  flex:0 0 clamp(420px, 44vw, 680px) !important;
  aspect-ratio:16 / 9 !important;
  border-radius:28px !important;
  padding:10px !important;
  transform:scale(.96) !important;
  opacity:.72 !important;
  filter:saturate(.92) brightness(.84) !important;
  transition:
    transform .55s cubic-bezier(.2,.8,.2,1),
    opacity .55s ease,
    filter .55s ease,
    border-color .35s ease,
    box-shadow .35s ease !important;
  box-shadow:
    0 22px 70px rgba(0,0,0,.26),
    0 0 42px rgba(122,220,255,.08),
    inset 0 1px rgba(255,255,255,.08) !important;
}
.top-video-card.local-video-card.is-active{
  transform:scale(1) !important;
  opacity:1 !important;
  filter:saturate(1.06) brightness(1) !important;
  border-color:rgba(122,220,255,.34) !important;
  box-shadow:
    0 30px 95px rgba(0,0,0,.32),
    0 0 70px rgba(122,220,255,.16),
    inset 0 1px rgba(255,255,255,.12) !important;
}
.top-video-card.local-video-card:hover{
  transform:scale(1.01) translateY(-4px) !important;
}
.local-video-card video{
  inset:10px !important;
  width:calc(100% - 20px) !important;
  height:calc(100% - 20px) !important;
  border-radius:20px !important;
  object-fit:cover !important;
}
.showcase-arrow{
  width:48px !important;
  height:48px !important;
  font-size:34px !important;
  opacity:.92 !important;
  transition:
    transform .28s cubic-bezier(.2,.8,.2,1),
    opacity .25s ease,
    border-color .25s ease,
    background .25s ease !important;
}
.showcase-arrow:hover{
  transform:translateY(-50%) scale(1.08) !important;
  opacity:1 !important;
}
.showcase-arrow-left{
  left:max(12px, calc((100vw - 1180px) / 2 - 12px)) !important;
}
.showcase-arrow-right{
  right:max(12px, calc((100vw - 1180px) / 2 - 12px)) !important;
}
@media (max-width:900px){
  .top-video-card.local-video-card{
    flex-basis:76vw !important;
  }
  .top-video-row{
    padding-inline:42px !important;
  }
}
@media (max-width:560px){
  .top-video-card.local-video-card{
    flex-basis:82vw !important;
    border-radius:24px !important;
  }
}


/* v25 final premium polish */
:root{
  --premium-border: rgba(190,240,255,.16);
  --premium-glow: rgba(122,220,255,.16);
}
body{
  background:
    radial-gradient(circle at 12% 6%, rgba(122,220,255,.18), transparent 25%),
    radial-gradient(circle at 86% 8%, rgba(146,246,223,.075), transparent 20%),
    radial-gradient(circle at 50% 92%, rgba(82,182,255,.11), transparent 36%),
    linear-gradient(180deg,#02050c 0%,#06111e 42%,#02050b 100%) !important;
}
body::before{
  opacity:.75 !important;
}
.nav{
  border-bottom-color:rgba(190,240,255,.11) !important;
}
.nav-cta{
  background:
    radial-gradient(circle at 30% 10%, rgba(255,255,255,.20), transparent 38%),
    linear-gradient(135deg,rgba(122,220,255,.20),rgba(82,182,255,.08)) !important;
  box-shadow:0 0 32px rgba(122,220,255,.10) !important;
}
.btn{
  letter-spacing:-.01em;
}
.btn-primary{
  background:linear-gradient(135deg,#ffffff 0%,#d9f9ff 32%,#85e5ff 68%,#55bfff 100%) !important;
  box-shadow:
    0 20px 70px rgba(99,197,255,.30),
    inset 0 1px rgba(255,255,255,.70) !important;
}
.btn-primary:hover{
  transform:translateY(-3px) scale(1.015) !important;
  box-shadow:
    0 28px 90px rgba(99,197,255,.38),
    inset 0 1px rgba(255,255,255,.78) !important;
}
.btn-secondary{
  border-color:var(--premium-border) !important;
}
.badge,
.strip-item,
.card,
.case-card,
.testimonial-card,
.form-card,
.final-cta,
.proof-stat,
.hero-panel{
  border-color:var(--premium-border) !important;
}
.case-card,
.testimonial-card,
.form-card,
.final-cta,
.proof-stat,
.strip-item,
.card{
  box-shadow:
    0 24px 75px rgba(0,0,0,.16),
    inset 0 1px rgba(255,255,255,.08) !important;
}
.case-card:hover,
.testimonial-card:hover,
.card:hover,
.strip-item:hover{
  border-color:rgba(122,220,255,.34) !important;
  box-shadow:
    0 32px 100px rgba(0,0,0,.22),
    0 0 55px rgba(122,220,255,.10),
    inset 0 1px rgba(255,255,255,.10) !important;
}
.section-head .eyebrow,
.reel-head .eyebrow,
.eyebrow{
  color:#83e6ff !important;
  text-shadow:0 0 22px rgba(122,220,255,.20);
}
h1,
h2{
  text-wrap:balance;
}
h1{
  text-shadow:0 0 40px rgba(122,220,255,.06);
}
.hero p,
.section-head p,
.card p,
.case-steps p,
.form-side p,
.final-cta p{
  color:#b8c6d8 !important;
}
.top-video-card.local-video-card{
  border-color:rgba(190,240,255,.18) !important;
}
.top-video-card.local-video-card.is-active{
  border-color:rgba(122,220,255,.42) !important;
}
.local-video-card video{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.showcase-arrow{
  color:#f5fbff !important;
}
.profile-card,
.device-card,
.laptop-badge,
.social-pill,
.hero-proof-float{
  border-color:rgba(190,240,255,.18) !important;
}
.form-card input,
.form-card select,
.form-card textarea{
  border-color:rgba(190,240,255,.13) !important;
}
.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus{
  border-color:rgba(122,220,255,.58) !important;
}
.footer{
  border-top-color:rgba(190,240,255,.10) !important;
}

/* v27 showcase category labels for the added videos */
.top-video-label{
  position:absolute;
  z-index:5;
  left:18px;
  top:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#fff;
  background:rgba(4,8,18,.68);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(12px);
  box-shadow:0 10px 30px rgba(0,0,0,.24);
  pointer-events:none;
}
@media (max-width:640px){
  .top-video-label{
    left:14px;
    top:12px;
    padding:7px 10px;
    font-size:10px;
  }
}