:root {
  --bg:#06101d;
  --card:#0d1c30;
  --text:#f2f8ff;
  --muted:#9aadc3;
  --blue:#20b8ff;
  --purple:#7b61ff;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
}

body {
  margin:0;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:#182538;
  overflow-x:hidden;
}

.navbar {
  padding:17px 0;
  background:rgba(4,12,23,.72);
  backdrop-filter:blur(16px);
  transition:.3s;
}

.navbar.scrolled {
  padding:10px 0;
  background:rgba(4,12,23,.96);
}

.navbar-brand {
  color:#fff!important;
  font-size:1rem;
  letter-spacing:.5px;
}

.navbar-brand b {
  display:inline-grid;
  place-items:center;
  width:35px;
  height:35px;
  border-radius:10px;
  margin-right:6px;
  background:linear-gradient(135deg,var(--blue),var(--purple));
  box-shadow:0 0 25px #20b8ff55;
}

.navbar-brand small {
  display:block;
  font-size:.52rem;
  letter-spacing:2px;
  margin-left:42px;
  margin-top:-8px;
  color:#8ea2ba;
}

.nav-link {
  color:#dce9f8!important;
  font-size:.9rem;
}

.dropdown-menu {
  background:#0c1a2d;
  border:1px solid #ffffff18;
}

.dropdown-item {
  color:#dce9f8;
}

.dropdown-item:hover {
  background:#172943;
  color:#fff;
}

.btn-primary-custom {
  border:0;
  color:#fff!important;
  background:linear-gradient(135deg,var(--blue),var(--purple));
  border-radius:12px;
  padding:.75rem 1.2rem;
  box-shadow:0 12px 30px #20b8ff2b;
  transition:.25s;
}

.btn-primary-custom:hover {
  transform:translateY(-2px);
  box-shadow:0 18px 38px #20b8ff4d;
}

.hero {
  min-height:100vh;
  background:var(--bg);
  color:#fff;
  position:relative;
  overflow:hidden;
}

.grid {
  position:absolute;
  inset:0;
  background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);
  background-size:55px 55px;
  mask-image:linear-gradient(#000,transparent);
}

.orb {
  position:absolute;
  border-radius:50%;
  filter:blur(2px);
  opacity:.28;
}

.orb1 {
  width:500px;
  height:500px;
  right:-180px;
  top:5%;
  background:radial-gradient(circle,#7b61ff,transparent 68%);
}

.orb2 {
  width:400px;
  height:400px;
  left:-200px;
  bottom:-160px;
  background:radial-gradient(circle,#20b8ff,transparent 68%);
}

.eyebrow {
  font-size:.72rem;
  letter-spacing:2px;
  font-weight:800;
  color:#1b9ed4;
  margin-bottom:14px;
}

.hero .eyebrow {
  color:#6bd3ff;
}

.hero h1 {
  line-height:1.03;
  max-width:850px;
}

.hero h1 span,h2 span {
  background:linear-gradient(90deg,#20b8ff,#9a82ff);
  -webkit-background-clip:text;
  color:transparent;
}

.hero-copy {
  max-width:700px;
  color:#b5c7da;
  font-size:1.08rem;
  line-height:1.8;
}

.trust {
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  color:#a6b9cf;
  font-size:.85rem;
  margin-top:28px;
}

.trust span:first-child {
  color:#bdefff;
}

.tech-scene {
  height:520px;
  position:relative;
}

.ring {
  position:absolute;
  left:50%;
  top:50%;
  border:1px solid #20b8ff30;
  border-radius:50%;
  transform:translate(-50%,-50%);
  animation:spin 18s linear infinite;
}

.r1 {
  width:460px;
  height:460px;
}

.r2 {
  width:320px;
  height:320px;
  border-color:#7b61ff38;
  animation-direction:reverse;
  animation-duration:13s;
}

.code-card {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) rotate(-2deg);
  width:370px;
  border-radius:18px;
  background:#081525ee;
  border:1px solid #ffffff16;
  box-shadow:0 35px 80px #0008;
  overflow:hidden;
}

.code-head {
  height:42px;
  padding:12px 15px;
  color:#657c96;
  font-size:.7rem;
}

.code-head strong {
  float:right;
  font-weight:500;
}

.code-card pre {
  margin:0;
  padding:24px;
  color:#aebfd2;
  line-height:1.75;
  font-size:.8rem;
}

.code-card code span {
  color:#7dd3fc;
}

.code-card em {
  color:#a7f3d0;
  font-style:normal;
}

.purple {
  color:#c4b5fd!important;
}

.float-card {
  position:absolute;
  background:#0e1d31ee;
  border:1px solid #ffffff14;
  border-radius:14px;
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  box-shadow:0 20px 45px #0006;
}

.float-card i {
  font-size:1.35rem;
  color:#49c8ff;
}

.float-card small {
  color:#8196ae;
}

.fc1 {
  top:75px;
  right:0;
  animation:float 4s ease-in-out infinite;
}

.fc2 {
  bottom:70px;
  left:0;
  animation:float 5s ease-in-out infinite reverse;
}

.ticker {
  overflow:hidden;
  background:#091626;
  color:#91a6bd;
  border-block:1px solid #ffffff12;
  padding:16px 0;
}

.ticker-inner {
  width:max-content;
  animation:ticker 25s linear infinite;
  font-size:.72rem;
  letter-spacing:2px;
  font-weight:700;
}

.section {
  padding:105px 0;
}

.heading {
  max-width:760px;
  margin-bottom:50px;
}

.heading h2,.about h2,.contact h2 {
  font-size:clamp(2.3rem,5vw,3.8rem);
  line-height:1.08;
  font-weight:800;
}

.heading p,.about p,.contact>p {
  color:#71839a;
  line-height:1.8;
}

.light {
  color:#fff;
}

.light p {
  color:#9eafc4;
}

.service {
  height:100%;
  position:relative;
  padding:28px;
  background:#fff;
  border:1px solid #e6edf4;
  border-radius:20px;
  transition:.35s;
}

.service:hover {
  transform:translateY(-8px);
  box-shadow:0 25px 55px #18344c14;
  border-color:#bfe9fb;
}

.service>i {
  font-size:1.55rem;
  color:#159fdc;
  background:#eaf8ff;
  border-radius:14px;
  padding:13px;
}

.service small {
  position:absolute;
  right:22px;
  top:28px;
  color:#d4dfe9;
  font-weight:800;
}

.service h3 {
  font-size:1.12rem;
  margin-top:28px;
}

.service p {
  color:#718096;
  line-height:1.7;
  font-size:.9rem;
}

.service a,.product a,.blog a {
  color:#148fcd;
  text-decoration:none;
  font-weight:700;
  font-size:.85rem;
}

.dark,.contact {
  background:var(--bg);
  color:#fff;
}

.product {
  height:100%;
  overflow:hidden;
  border:1px solid #ffffff12;
  border-radius:22px;
  background:#0c1b2e;
  transition:.35s;
}

.product:hover {
  transform:translateY(-7px);
  border-color:#20b8ff55;
}

.product-icon {
  height:210px;
  display:grid;
  place-items:center;
  font-size:5rem;
}

.product-icon.blue {
  background:radial-gradient(circle,#20b8ff45,transparent 62%);
}

.product-icon.purple {
  background:radial-gradient(circle,#7b61ff45,transparent 62%);
}

.product-icon.cyan {
  background:radial-gradient(circle,#22d3ee35,transparent 62%);
}

.product label {
  font-size:.65rem;
  letter-spacing:1.5px;
  color:#67d2ff;
}

.product p {
  color:#93a7bd;
  line-height:1.7;
}

.product h3 {
  margin-top:9px;
}

.step {
  height:100%;
  padding:24px 10px;
  border-top:2px solid #dbe6ef;
}

.step b {
  color:#159fdc;
  font-size:.75rem;
}

.step h3 {
  font-size:1.05rem;
  margin-top:18px;
}

.step p {
  font-size:.83rem;
  color:#71839a;
  line-height:1.7;
}

.about {
  background:#f4f8fc;
}

.about-art {
  height:450px;
  background:#07111f;
  border-radius:30px;
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
}

.about-art>strong {
  font-size:18rem;
  line-height:1;
  background:linear-gradient(135deg,#20b8ff,#7b61ff);
  -webkit-background-clip:text;
  color:transparent;
}

.orbit {
  position:absolute;
  width:330px;
  height:330px;
  border:1px solid #ffffff1f;
  border-radius:50%;
  animation:spin2 20s linear infinite;
}

.stat {
  position:absolute;
  background:#10243d;
  color:#fff;
  padding:13px 18px;
  border-radius:13px;
  font-weight:800;
}

.stat small {
  display:block;
  color:#91a5bc;
  font-weight:400;
  font-size:.7rem;
}

.s1 {
  right:35px;
  top:35px;
}

.s2 {
  left:30px;
  bottom:30px;
}

.checks {
  padding:0;
  list-style:none;
  display:grid;
  gap:13px;
  margin-top:25px;
}

.checks li:before {
  content:"✓";
  color:#159fdc;
  font-weight:900;
  margin-right:10px;
}

.blog {
  height:100%;
  border:1px solid #e4ebf2;
  border-radius:20px;
  padding:28px;
  transition:.3s;
}

.blog:hover {
  transform:translateY(-6px);
  box-shadow:0 20px 45px #18344c12;
}

.blog>i {
  font-size:2rem;
  color:#1ba9df;
}

.blog small {
  display:block;
  margin-top:30px;
  color:#8494a8;
  letter-spacing:1.2px;
}

.blog h3 {
  font-size:1.25rem;
  margin:10px 0;
}

.blog p {
  color:#71839a;
  line-height:1.7;
}

.contact-info {
  display:grid;
  gap:18px;
  margin-top:30px;
}

.contact-info div {
  display:flex;
  gap:14px;
  align-items:center;
  color:#9bb0c7;
}

.contact-info i {
  width:45px;
  height:45px;
  display:grid;
  place-items:center;
  background:#10243d;
  border-radius:12px;
  color:#42c4ff;
}

.contact-info b {
  color:#fff;
}

.form-box {
  background:#fff;
  color:#182538;
  padding:30px;
  border-radius:24px;
}

.form-box label {
  font-size:.78rem;
  font-weight:700;
  margin-bottom:7px;
}

.form-control,.form-select {
  border-radius:11px;
  padding:.85rem 1rem;
  border-color:#dbe4ed;
}

.form-control:focus,.form-select:focus {
  border-color:#24b5ef;
  box-shadow:0 0 0 .2rem #20b8ff1c;
}

.hp {
  position:absolute;
  left:-10000px;
  opacity:0;
}

footer {
  background:#040b14;
  color:#8fa2b8;
  padding:60px 0 25px;
}

footer h6 {
  color:#fff;
  margin-bottom:16px;
}

footer a:not(.btn) {
  display:block;
  color:#8fa2b8;
  text-decoration:none;
  margin:8px 0;
}

footer a:hover {
  color:#fff;
}

footer hr {
  border-color:#ffffff14;
  margin:40px 0 18px;
}

#loader {
  position:fixed;
  inset:0;
  background:#06101d;
  z-index:9999;
  display:grid;
  place-items:center;
  transition:.5s;
}

.loader-ring {
  width:48px;
  height:48px;
  border:3px solid #ffffff15;
  border-top-color:#20b8ff;
  border-right-color:#7b61ff;
  border-radius:50%;
  animation:spin0 .8s linear infinite;
}

.loaded {
  opacity:0;
  visibility:hidden;
}

.reveal {
  opacity:0;
  transform:translateY(28px);
  transition:.8s;
}

.reveal.visible {
  opacity:1;
  transform:none;
}

.d1 {
  transition-delay:.1s;
}

.d2 {
  transition-delay:.2s;
}

.d3 {
  transition-delay:.3s;
}

.d4 {
  transition-delay:.4s;
}

@keyframes spin0 {
to {
  transform:rotate(360deg);
}

}

@keyframes spin {
to {
  transform:translate(-50%,-50%) rotate(360deg);
}

}

@keyframes spin2 {
to {
  transform:rotate(360deg);
}

}

@keyframes float {
50% {
  transform:translateY(-12px);
}

}

@keyframes ticker {
to {
  transform:translateX(-50%);
}

}

@media(max-width:991px) {
.navbar-collapse {
  background:#06101d;
  padding:15px;
  border-radius:14px;
  margin-top:8px;
}

.tech-scene {
  display:none;
}

}

@media(max-width:767px) {
.section {
  padding:75px 0;
}

.hero h1 {
  font-size:3rem;
}

.about-art {
  height:330px;
}

.about-art>strong {
  font-size:11rem;
}

}

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

}