:root{
  --bg:#0b1020;
  --surface:#11182d;
  --surface-2:#0f172a;
  --text:#e5eefb;
  --muted:#9fb0cc;
  --primary:#5eead4;
  --secondary:#60a5fa;
  --accent:#a78bfa;
  --border:rgba(255,255,255,.08);
  --shadow:0 20px 50px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(circle at top left, rgba(96,165,250,.15), transparent 30%),
    radial-gradient(circle at top right, rgba(167,139,250,.14), transparent 28%),
    linear-gradient(180deg, #07101d 0%, #091120 48%, #07101a 100%);
  color:var(--text);
}
a{text-decoration:none}
.navbar{
  backdrop-filter: blur(14px);
  background: rgba(9,17,32,.72)!important;
  border-bottom:1px solid var(--border);
}
.navbar .nav-link{color:#dbeafe!important;font-weight:500}
.navbar .nav-link:hover, .navbar .nav-link.active{color:var(--primary)!important}
.btn-gradient{
  background: linear-gradient(135deg,var(--primary),var(--secondary),var(--accent));
  color:#06111f;border:none;
  box-shadow: var(--shadow);
}
.btn-outline-tech{
  border:1px solid rgba(255,255,255,.18);
  color:var(--text);
  background:transparent;
}
.btn-outline-tech:hover{background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.25)}
.hero{
  padding:8rem 0 5rem;
  position:relative;
  overflow:hidden;
}
.hero-badge{
  display:inline-flex;
  gap:.5rem;
  align-items:center;
  padding:.45rem .85rem;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  color:#c6d4f2;
  background:rgba(255,255,255,.04);
}
.hero h1{
  font-size:clamp(2.4rem,5vw,4.8rem);
  line-height:1.05;
  letter-spacing:-.04em;
}
.hero p{color:var(--muted); font-size:1.1rem; max-width:48rem}
.glass-card, .feature-card, .service-card, .stats-card, .pricing-card, .contact-card, .team-card, .category-card{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--border);
  border-radius:1.5rem;
  box-shadow:var(--shadow);
}
.glass-card{padding:1.25rem}
.feature-card,.service-card,.pricing-card,.team-card,.category-card{padding:1.5rem;height:100%}
.stats-card,.contact-card{padding:1.5rem}
.icon-wrap{
  width:3rem;height:3rem;border-radius:1rem;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, rgba(94,234,212,.18), rgba(96,165,250,.18));
  border:1px solid rgba(255,255,255,.08);
  color:var(--primary);
  font-size:1.25rem;
}
.section{
  padding:5rem 0;
}
.section-title h2{
  font-size:clamp(1.8rem,4vw,3rem);
  letter-spacing:-.03em;
}
.section-title p{color:var(--muted); max-width:42rem}
.muted{color:var(--muted)}
.metric{
  font-size:2rem;
  font-weight:800;
}
.showcase{
  min-height:420px;
  background:
    linear-gradient(140deg, rgba(94,234,212,.15), rgba(96,165,250,.11)),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border-radius:2rem;
  border:1px solid var(--border);
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.device-card{
  position:absolute;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(8,14,27,.84);
  box-shadow:var(--shadow);
  color:#fff;
}
.device-laptop{width:62%;height:52%;left:7%;top:16%;border-radius:1.35rem;padding:1rem}
.device-camera{width:28%;height:44%;right:7%;top:22%;border-radius:1.6rem;padding:1rem}
.device-chip{width:22%;height:20%;left:34%;bottom:8%;border-radius:1.25rem;padding:.9rem}
.gradient-text{
  background:linear-gradient(135deg,var(--primary),#b2f5ea,var(--secondary),var(--accent));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.list-check{
  list-style:none;padding-left:0;margin:0;
}
.list-check li{
  display:flex;gap:.75rem;align-items:flex-start;margin-bottom:.8rem;color:#d8e6ff;
}
.list-check i{color:var(--primary); margin-top:.2rem}
.timeline{
  border-left:1px solid rgba(255,255,255,.12);
  padding-left:1.25rem;
}
.timeline-item{
  position:relative;
  padding:0 0 1.6rem 1rem;
}
.timeline-item::before{
  content:"";
  position:absolute;left:-1.72rem;top:.4rem;
  width:.8rem;height:.8rem;border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  box-shadow:0 0 0 .25rem rgba(94,234,212,.13);
}
.form-control, .form-select{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);
  color:#fff;
  padding:.9rem 1rem;
  border-radius:1rem;
}
.form-control::placeholder{color:#9eb0cc}
.form-control:focus, .form-select:focus{
  color:#fff;background:rgba(255,255,255,.07);
  border-color:rgba(94,234,212,.4);
  box-shadow:0 0 0 .25rem rgba(94,234,212,.12);
}
.table-tech{
  --bs-table-bg:transparent;
  --bs-table-color:#e8f1ff;
  --bs-table-border-color:rgba(255,255,255,.08);
}
.footer{
  padding:3rem 0 2rem;
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(6,10,18,.35);
}
.social-link{
  width:2.5rem;height:2.5rem;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  color:#fff;
}
.social-link:hover{color:var(--primary); border-color:rgba(94,234,212,.3)}
.page-hero{
  padding:7rem 0 3rem;
  background:linear-gradient(180deg, rgba(96,165,250,.08), rgba(167,139,250,.06), transparent);
}
.filter-btn{
  border:1px solid rgba(255,255,255,.12);
  background:transparent;
  color:#dbeafe;
  border-radius:999px;
  padding:.55rem 1rem;
}
.filter-btn.active,.filter-btn:hover{
  background:rgba(94,234,212,.12);
  color:#fff;
  border-color:rgba(94,234,212,.3);
}
.product-card{transition:transform .25s ease, border-color .25s ease}
.product-card:hover,.feature-card:hover,.service-card:hover,.pricing-card:hover,.team-card:hover,.category-card:hover{
  transform:translateY(-6px);
  border-color:rgba(94,234,212,.25);
}
.product-visual{
  height:200px;border-radius:1.2rem;
  background:
    radial-gradient(circle at 30% 30%, rgba(94,234,212,.2), transparent 28%),
    radial-gradient(circle at 75% 35%, rgba(96,165,250,.18), transparent 22%),
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
}
.badge-soft{
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
  color:#d8e6ff;
}
.accordion-item{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:#fff;
  border-radius:1rem!important;
  overflow:hidden;
}
.accordion-button{
  background:rgba(255,255,255,.02);
  color:#fff;
}
.accordion-button:not(.collapsed){
  color:#fff;
  background:rgba(94,234,212,.08);
  box-shadow:none;
}
.accordion-button:focus{box-shadow:none}
.accordion-body{color:#dce7fa}
.map-placeholder{
  min-height:100%;
  border-radius:1.5rem;
  border:1px dashed rgba(255,255,255,.14);
  background:linear-gradient(135deg, rgba(96,165,250,.08), rgba(94,234,212,.06));
}
@media (max-width: 991.98px){
  .hero{padding-top:7rem}
  .device-laptop{position:relative;width:100%;height:210px;left:auto;top:auto}
  .device-camera,.device-chip{display:none}
  .showcase{min-height:auto;padding:1rem}
}

.brand-logo{
  width:52px;
  height:52px;
  object-fit:contain;
  border-radius:.75rem;
  background:rgba(255,255,255,.08);
  padding:.2rem;
}
.brand-logo-footer{
  width:44px;
  height:44px;
}
@media (max-width: 575.98px){
  .brand-logo{
    width:42px;
    height:42px;
  }
}