*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:#05080f;
  color:#eaf0f8;
  overflow-y:auto;
  overflow-x:hidden;
}

.bg{
  position:fixed;
  inset:0;
  overflow:hidden;
  background:
    radial-gradient(1200px 700px at 50% 20%,rgba(120,160,255,.16),transparent 60%),
    radial-gradient(900px 700px at 20% 85%,rgba(0,255,200,.10),transparent 55%),
    radial-gradient(900px 700px at 85% 80%,rgba(255,0,140,.10),transparent 55%),
    linear-gradient(135deg,#060a12,#05070c);
}

.stars{position:absolute;inset:0}
.star{
  position:absolute;border-radius:999px;background:rgba(255,255,255,.95);
  box-shadow:0 0 10px rgba(255,255,255,.28);
  transform:translate3d(0,0,0);
  animation:drift linear infinite,twinkle ease-in-out infinite;
  opacity:var(--op,0.6);
}
.star.tiny{box-shadow:0 0 6px rgba(255,255,255,.22)}
@keyframes drift{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-120px,140px,0)}}
@keyframes twinkle{0%,100%{filter:brightness(1)}50%{filter:brightness(1.7);opacity:calc(var(--op,0.6)*.6)}}

.lights{position:absolute;inset:-20%}
.beam{
  position:absolute;top:0;bottom:0;width:32vw;
  opacity:.55;mix-blend-mode:screen;filter:blur(22px);
  transform:skewX(-18deg);
  background:linear-gradient(180deg,transparent,rgba(120,160,255,.18),rgba(0,255,200,.14),transparent);
  animation:beam 16s ease-in-out infinite;
}
.beam.b1{left:-10%;animation-duration:18s}
.beam.b2{left:35%;opacity:.45;background:linear-gradient(180deg,transparent,rgba(255,0,140,.16),rgba(120,160,255,.14),transparent);animation-duration:16s;animation-delay:-6s}
.beam.b3{left:72%;opacity:.35;background:linear-gradient(180deg,transparent,rgba(0,255,200,.14),rgba(255,220,120,.12),transparent);animation-duration:20s;animation-delay:-10s}
@keyframes beam{0%{transform:translateX(-10vw) skewX(-18deg)}50%{transform:translateX(10vw) skewX(-18deg)}100%{transform:translateX(-10vw) skewX(-18deg)}}

.orb{
  position:absolute;border-radius:999px;mix-blend-mode:screen;
  filter:blur(18px);opacity:.55;animation:float 12s ease-in-out infinite;
}
.orb.o1{width:220px;height:220px;left:10%;top:22%;background:radial-gradient(circle,rgba(120,160,255,.32),transparent 60%);animation-duration:12s}
.orb.o2{width:280px;height:280px;left:62%;top:18%;background:radial-gradient(circle,rgba(0,255,200,.22),transparent 62%);animation-duration:14s;animation-delay:-4s}
.orb.o3{width:240px;height:240px;left:52%;top:64%;background:radial-gradient(circle,rgba(255,0,140,.22),transparent 62%);animation-duration:16s;animation-delay:-8s}
@keyframes float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-26px,0)}}

.vignette{position:absolute;inset:0;background:radial-gradient(1000px 700px at 50% 35%,transparent 35%,rgba(0,0,0,.60) 100%);pointer-events:none}
.grain{
  position:absolute;inset:0;opacity:.10;pointer-events:none;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}

/* ===== TOPBAR ===== */
.topbar{
  position:sticky;top:0;z-index:10;
  backdrop-filter:blur(14px);
  background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.12));
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar-inner{
  max-width:1200px;margin:0 auto;padding:12px 18px;
  display:flex;justify-content:space-between;align-items:center;gap:14px;
}
.topbar-left{display:flex;align-items:center;gap:10px;min-width:0}
.dot{width:8px;height:8px;border-radius:999px;background:rgba(0,255,200,.8);box-shadow:0 0 18px rgba(0,255,200,.35)}
.topbar-text{opacity:.85;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-right{display:flex;gap:14px;flex-wrap:wrap}
.toplink{color:rgba(255,255,255,.85);text-decoration:none;font-size:13px}
.toplink:hover{color:#fff;text-decoration:underline}

/* ===== WRAP & CARD ===== */
.wrap{
  position:relative;z-index:2;
  max-width:1200px;margin:0 auto;
  padding:28px 18px 90px;
  display:flex;flex-direction:column;gap:22px;
}

.card{
  width:min(980px,96vw);
  margin:0 auto;
  border-radius:22px;
  padding:28px 26px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  backdrop-filter:blur(14px);
}

/* ===== BRAND ===== */
.brand{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

.logoWrap{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:88px;height:88px;border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
}
.logo{width:70px;height:auto;position:relative;z-index:2;opacity:.96}
.logoGlow{
  position:absolute;inset:-40%;
  background:radial-gradient(circle at 30% 30%,rgba(0,255,200,.35),transparent 55%),
           radial-gradient(circle at 70% 70%,rgba(120,160,255,.30),transparent 55%),
           radial-gradient(circle at 60% 20%,rgba(255,0,140,.25),transparent 55%);
  opacity:0;filter:blur(14px);transform:scale(1.05);
  transition:opacity .25s ease,transform .25s ease;
  z-index:1;
}
.logoWrap:hover .logoGlow{opacity:1;transform:scale(1.12)}
.logoWrap:hover{border-color:rgba(255,255,255,.18);box-shadow:0 0 26px rgba(0,255,200,.08)}

.badge{
  display:inline-flex;align-items:center;
  padding:8px 12px;border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.82);
  font-size:12px;
}

/* ===== ON-SITE BADGE ===== */
.onsiteBadge{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:999px;
  background:rgba(0,255,200,.12);
  border:1px solid rgba(0,255,200,.25);
  color:rgba(0,255,200,.95);
  font-size:12px;
  font-weight:600;
}
.onsiteBadge svg{width:14px;height:14px}

/* ===== TYPOGRAPHY ===== */
.title{margin:14px 0 10px;font-size:clamp(34px,4.6vw,56px);line-height:1.06;color:rgba(255,255,255,.96)}
.sub{margin:0;color:rgba(255,255,255,.78);font-size:clamp(14px,1.35vw,18px);line-height:1.7;max-width:78ch}
.sub.sub2{margin-top:12px}

/* ===== PILLS ===== */
.grid{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px}
.pill{
  padding:10px 12px;border-radius:12px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.84);
  font-size:13px;
}
.pillBtn{cursor:pointer}
.pillBtn:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);box-shadow:0 0 18px rgba(120,160,255,.10)}
.pillBtn.active{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22)}

/* ===== CAROUSEL ===== */
.carousel{
  margin:18px 0 14px;
  position:relative;
  border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
}
.cviewport{overflow:hidden}
.ctrack{display:flex;transition:transform .55s cubic-bezier(.2,.8,.2,1);will-change:transform}
.cslide{min-width:100%}
.cslide img{
  width:100%;
  aspect-ratio:16/9;
  height:auto;
  object-fit:cover;
  display:block;
  opacity:.98;
  background:rgba(0,0,0,.25);
}

.cbtn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:42px;height:42px;border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.25);
  color:rgba(255,255,255,.92);
  font-size:26px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  backdrop-filter:blur(10px);
  z-index:2;
}
.cbtn:hover{background:rgba(255,255,255,.08)}
.cbtn.prev{left:10px}
.cbtn.next{right:10px}

.cdots{
  position:absolute;left:0;right:0;bottom:10px;
  display:flex;justify-content:center;gap:8px;
  z-index:2;
}
.cdot{
  width:8px;height:8px;border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.12);
  cursor:pointer;
}
.cdot.active{background:rgba(255,255,255,.90)}

.mini{margin:0;color:rgba(255,255,255,.74);font-size:13px}

/* ===== BUTTONS ===== */
.actions{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 14px;border-radius:14px;text-decoration:none;
  color:rgba(10,12,16,.92);background:rgba(255,255,255,.86);
  border:1px solid rgba(255,255,255,.2);font-weight:650;font-size:14px;
}
.btn:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent;color:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.18)}
.btn.ghost:hover{background:rgba(255,255,255,.06)}
.btn.google{background:linear-gradient(135deg,#4285f4,#34a853);color:#fff;border:none}
.btn.google:hover{filter:brightness(1.1)}
.btn svg{width:16px;height:16px}

/* ===== SECTIONS ===== */
.section{width:min(980px,96vw);margin:0 auto}
.sectionCard{
  border-radius:22px;padding:22px 22px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(12px);
  box-shadow:0 20px 55px rgba(0,0,0,.35);
}
.h2{font-size:22px;margin-bottom:10px;color:rgba(255,255,255,.94)}
.p{opacity:.82;line-height:1.6;margin-bottom:16px}

/* ===== SERVICE GRID ===== */
.serviceGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.serviceItem{padding:16px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10)}
.serviceItem h3{font-size:15px;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.serviceItem h3 .icon{font-size:18px}
.serviceItem p{opacity:.78;line-height:1.55;font-size:13px}
.serviceItem .tag{
  display:inline-block;margin-top:10px;
  padding:4px 10px;border-radius:8px;
  background:rgba(0,255,200,.1);
  border:1px solid rgba(0,255,200,.2);
  color:rgba(0,255,200,.9);
  font-size:11px;font-weight:600;
}

/* ===== CONTACT ===== */
.contactRow{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0 6px}
.foot{margin-top:10px;opacity:.65;font-size:12px}

/* ===== RESPONSIVE ===== */
@media (max-width:720px){
  .logoWrap{width:78px;height:78px}
  .logo{width:62px}
  .cslide img{aspect-ratio:16/10}
  .serviceGrid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .star,.beam,.orb{animation:none!important}
  .ctrack{transition:none!important}
}