*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:"Segoe UI",sans-serif;
}

html{
  scroll-behavior:smooth;
}

body{
  background:#030712;
  color:white;
  line-height:1.6;
  overflow-x:hidden;
}

/* NAVBAR */

.navbar{
  position:sticky;
  top:0;
  z-index:1000;

  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:18px 8%;

  background:rgba(3,7,18,0.82);

  backdrop-filter:blur(18px);

  border-bottom:1px solid rgba(0,229,255,0.14);
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;

  text-decoration:none;

  color:white;

  font-size:1.45rem;
  font-weight:800;
}

.brand img{
  width:52px;
  height:52px;

  border-radius:16px;

  object-fit:cover;

  filter:drop-shadow(0 0 18px rgba(0,229,255,0.55));
}

.accent{
  color:#00e5ff;
}

nav{
  display:flex;
  gap:28px;
}

nav a{
  text-decoration:none;
  color:#cbd5e1;

  font-weight:600;

  transition:0.25s;
}

nav a:hover{
  color:#00e5ff;
}

/* VIDEO */

.bg-video{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;

  opacity:0.12;

  z-index:0;

  pointer-events:none;
}

/* HERO */

.hero{
  position:relative;

  min-height:95vh;

  display:flex;
  justify-content:center;
  align-items:center;

  padding:100px 8%;

  text-align:center;

  overflow:hidden;

  background:
  radial-gradient(circle at top,rgba(0,229,255,0.14),transparent 30%),
  radial-gradient(circle at bottom right,rgba(99,102,241,0.18),transparent 35%),
  #030712;
}

.hero-fade{
  position:absolute;
  left:0;
  right:0;
  bottom:0;

  height:260px;

  background:linear-gradient(
    to bottom,
    rgba(3,7,18,0) 0%,
    rgba(3,7,18,0.4) 40%,
    rgba(3,7,18,0.8) 75%,
    #030712 100%
  );

  z-index:1;

  pointer-events:none;
}

.grid{
  position:absolute;
  inset:0;

  background-image:
  linear-gradient(rgba(0,229,255,0.06) 1px,transparent 1px),
  linear-gradient(90deg,rgba(0,229,255,0.06) 1px,transparent 1px);

  background-size:55px 55px;

  mask-image:linear-gradient(
    to bottom,
    black 70%,
    transparent 100%
  );
}

.orb{
  position:absolute;
  border-radius:50%;

  filter:blur(30px);

  opacity:0.35;
}

.orb-one{
  width:280px;
  height:280px;

  background:#00e5ff;

  top:12%;
  left:8%;
}

.orb-two{
  width:360px;
  height:360px;

  background:#6366f1;

  bottom:0;
  right:8%;
}

.hero-content{
  position:relative;
  z-index:2;

  max-width:980px;
}

.hero-logo{
  width:150px;
  height:150px;

  border-radius:30px;

  object-fit:cover;

  margin-bottom:25px;

  box-shadow:
  0 0 35px rgba(0,229,255,0.35),
  0 0 90px rgba(0,229,255,0.18);
}

.eyebrow,
.section-label{
  color:#00e5ff;

  text-transform:uppercase;

  letter-spacing:2px;

  font-size:0.82rem;
  font-weight:800;

  margin-bottom:18px;
}

.hero h1{
  font-size:clamp(3rem,8vw,6.5rem);

  line-height:0.95;

  letter-spacing:-3px;

  margin-bottom:24px;

  background:linear-gradient(
    90deg,
    #ffffff,
    #9befff,
    #38bdf8,
    #818cf8
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hero-text{
  max-width:760px;

  margin:0 auto 34px;

  color:#aebbd8;

  font-size:1.2rem;
}

.hero-buttons{
  display:flex;
  justify-content:center;
  gap:16px;

  flex-wrap:wrap;

  margin-bottom:32px;
}

.btn{
  padding:15px 28px;

  border-radius:14px;

  text-decoration:none;

  font-weight:800;

  transition:0.25s;
}

.primary{
  background:linear-gradient(135deg,#00e5ff,#67e8f9);

  color:#020617;

  box-shadow:0 0 28px rgba(0,229,255,0.45);
}

.primary:hover{
  transform:translateY(-4px);

  box-shadow:0 0 45px rgba(0,229,255,0.7);
}

.secondary{
  color:white;

  border:1px solid rgba(255,255,255,0.14);

  background:rgba(255,255,255,0.05);
}

.secondary:hover{
  border-color:rgba(0,229,255,0.5);

  color:#00e5ff;

  transform:translateY(-4px);
}

.trust-row{
  display:flex;
  justify-content:center;
  gap:14px;

  flex-wrap:wrap;
}

.trust-row span{
  padding:9px 16px;

  border-radius:999px;

  background:rgba(255,255,255,0.04);

  border:1px solid rgba(0,229,255,0.14);

  color:#cbd5e1;
}

/* SECTION */

.section{
  padding:100px 8%;

  text-align:center;
}

.section h2,
.contact h2{
  font-size:clamp(2rem,4vw,3.5rem);

  line-height:1.1;

  margin-bottom:16px;
}

.section-text{
  max-width:720px;

  margin:0 auto 50px;

  color:#94a3b8;

  font-size:1.08rem;
}

/* CARDS */

.cards,
.pricing{
  max-width:1180px;

  margin:auto;

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:26px;
}

.card{
  text-decoration:none;
  color:white;
  display:block;
}

.card,
.price-card,
.step,
.contact-box,
.feature-box{
  background:
  linear-gradient(
    180deg,
    rgba(255,255,255,0.09),
    rgba(255,255,255,0.03)
  );

  border:1px solid rgba(0,229,255,0.15);

  border-radius:28px;

  padding:34px;

  box-shadow:0 25px 80px rgba(0,0,0,0.28);

  transition:0.25s;
}

.card:hover,
.price-card:hover,
.step:hover,
.feature-box:hover{
  transform:translateY(-8px);

  border-color:rgba(0,229,255,0.55);

  box-shadow:0 0 45px rgba(0,229,255,0.12);
}

.card-icon{
  font-size:2.4rem;

  margin-bottom:16px;
}

.card h3,
.price-card h3,
.step h3,
.feature-box h3{
  font-size:1.35rem;

  margin-bottom:12px;
}

.card p,
.price-card li,
.step p,
.contact p,
.feature-box p{
  color:#aebbd8;
}

/* PROCESS */

.steps{
  max-width:1180px;

  margin:45px auto 0;

  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:22px;
}

.step{
  text-align:left;
}

.step span{
  color:#00e5ff;

  font-size:1.3rem;
  font-weight:900;
}

/* PRICING */

.price-card{
  position:relative;

  text-align:left;
}

.featured{
  border-color:#00e5ff;

  box-shadow:0 0 45px rgba(0,229,255,0.18);

  transform:scale(1.03);
}

.tag{
  position:absolute;

  top:-14px;
  right:24px;

  background:#00e5ff;

  color:#020617;

  padding:7px 15px;

  border-radius:999px;

  font-size:0.8rem;
  font-weight:900;
}

.price{
  color:#00e5ff;

  font-size:2.2rem;
  font-weight:900;

  margin:12px 0 20px;
}

.price-card ul{
  list-style:none;
}

.price-card li{
  margin-bottom:13px;
}

.price-card li::before{
  content:"✓";

  color:#00e5ff;

  margin-right:10px;

  font-weight:900;
}

/* CONTACT */

.contact{
  padding:110px 8%;

  text-align:center;

  background:
  radial-gradient(circle at center,rgba(0,229,255,0.12),transparent 35%),
  #020617;
}

.contact img{
  width:110px;
  height:110px;

  border-radius:24px;

  object-fit:cover;

  margin-bottom:24px;

  filter:drop-shadow(0 0 25px rgba(0,229,255,0.5));
}

.contact-text{
  color:#aebbd8;
  margin-bottom:20px;
}

/* CONTACT FORM */

.contact-form{
  max-width:620px;
  margin:35px auto 0;

  display:flex;
  flex-direction:column;

  gap:18px;
}

.form-row input,
.form-row textarea{
  width:100%;

  padding:18px 20px;

  border-radius:16px;

  border:1px solid rgba(0,229,255,0.18);

  background:rgba(255,255,255,0.06);

  color:white;

  font-size:1rem;

  outline:none;

  transition:0.25s;
}

.form-row textarea{
  min-height:160px;

  resize:vertical;
}

.form-row input::placeholder,
.form-row textarea::placeholder{
  color:#94a3b8;
}

.form-row input:focus,
.form-row textarea:focus{
  border-color:#00e5ff;

  box-shadow:0 0 24px rgba(0,229,255,0.18);
}

.contact-form .btn{
  width:100%;

  border:none;

  cursor:pointer;

  font-size:1rem;
}

/* SERVICE PAGES */

.service-page{
  min-height:100vh;

  padding:120px 8%;

  background:
  radial-gradient(circle at top,rgba(0,229,255,0.12),transparent 30%),
  radial-gradient(circle at bottom right,rgba(99,102,241,0.16),transparent 35%),
  #030712;
}

.service-hero{
  max-width:950px;

  margin:0 auto 75px;

  text-align:center;
}

.service-hero h1{
  font-size:clamp(3rem,7vw,5.6rem);

  line-height:0.95;

  letter-spacing:-3px;

  margin-bottom:26px;

  background:linear-gradient(
    90deg,
    #ffffff,
    #9befff,
    #38bdf8,
    #818cf8
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.service-hero p{
  max-width:760px;

  margin:0 auto 34px;

  color:#aebbd8;

  font-size:1.2rem;
}

.feature-grid{
  max-width:1180px;

  margin:auto;

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:26px;
}

.service-cta{
  max-width:900px;

  margin:90px auto 0;

  padding:50px;

  text-align:center;

  border-radius:30px;

  background:
  linear-gradient(
    135deg,
    rgba(0,229,255,0.14),
    rgba(99,102,241,0.18)
  );

  border:1px solid rgba(0,229,255,0.15);
}

.service-cta h2{
  font-size:clamp(2rem,4vw,3.3rem);

  margin-bottom:16px;
}

.service-cta p{
  color:#aebbd8;

  margin-bottom:28px;
}

/* FOOTER */

footer{
  padding:28px 8%;

  text-align:center;

  color:#8ea0c4;

  border-top:1px solid rgba(255,255,255,0.08);
}

/* MOBILE */

@media (max-width:900px){

  .navbar{
    flex-direction:column;

    gap:18px;
  }

  nav{
    flex-wrap:wrap;

    justify-content:center;

    gap:16px;
  }

  .cards,
  .pricing,
  .steps,
  .feature-grid{
    grid-template-columns:1fr;
  }

  .featured{
    transform:none;
  }

  .hero-logo{
    width:115px;
    height:115px;
  }

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

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