*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:'Inter', sans-serif;
  background:#0b0f19;
  color:#fff;
  line-height:1.6;
}

.hero{
  min-height:100vh;
  padding:40px 8%;
  background:
    radial-gradient(circle at top right, rgba(0,153,255,.25), transparent 30%),
    radial-gradient(circle at bottom left, rgba(111,66,193,.25), transparent 30%),
    #0b0f19;
}


.hero{
  position:relative;
  overflow:hidden;
}

.hero-girl{
  position:absolute;
  right:5%;
  bottom:0;
  width:420px;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  animation:floatGirl 6s ease-in-out infinite;
}

.girl-glow{
  position:absolute;
  width:340px;
  height:340px;
  background:radial-gradient(circle, rgba(31,111,235,.45), transparent 70%);
  filter:blur(25px);
  z-index:0;
}

.girl-image{
  position:relative;
  width:60%;
  display:block;
  margin:0 auto;
  object-fit:cover;
  border-radius:32px;
  opacity:.78;
  mask-image:linear-gradient(to top, transparent 0%, black 15%);
  -webkit-mask-image:linear-gradient(to top, transparent 0%, black 15%);
  filter:drop-shadow(0 0 25px rgba(31,111,235,.35));
}

@keyframes floatGirl{
  0%,100%{transform:translateY(0px);}
  50%{transform:translateY(-18px);}
}

.nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.logo{
  font-size:28px;
  font-weight:800;
  letter-spacing:2px;
}

.tg-btn{
  text-decoration:none;
  color:#fff;
  background:#1f6feb;
  padding:12px 22px;
  border-radius:14px;
  transition:.3s;
}

.tg-btn:hover{
  transform:translateY(-2px);
}

.hero-content{
  margin-top:120px;
}

.badge{
  display:inline-block;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  padding:10px 18px;
  border-radius:999px;
  margin-bottom:24px;
  color:#9ecbff;
}

h1{
  font-size:64px;
  line-height:1.1;
  margin-bottom:24px;
}

.hero p{
  font-size:20px;
  color:#b8c2d1;
  margin-bottom:36px;
}

.buttons{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

.primary-btn,
.secondary-btn{
  text-decoration:none;
  padding:16px 28px;
  border-radius:16px;
  font-weight:700;
  transition:.3s;
}

.primary-btn{
  background:#1f6feb;
  color:#fff;
}

.secondary-btn{
  border:1px solid rgba(255,255,255,.15);
  color:#fff;
}

.primary-btn:hover,
.secondary-btn:hover{
  transform:translateY(-3px);
}

section{
  padding:90px 8%;
}

h2{
  font-size:42px;
  margin-bottom:40px;
}

.cards{
  display:grid;
  gap:24px;
}

.card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  padding:30px;
  border-radius:24px;
  transition:.3s;
  backdrop-filter: blur(8px);
}

.card:hover{
  transform:translateY(-5px);
  border-color:#1f6feb;
}

.card h3{
  margin-bottom:16px;
  font-size:24px;
}

.card p{
  color:#b8c2d1;
}

.advantages-grid{
  display:grid;
  gap:20px;
}

.advantages-grid div{
  background:rgba(255,255,255,.04);
  padding:24px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
}

.contact-box{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  padding:32px;
  border-radius:24px;
}

.contact-box p{
  margin-bottom:16px;
  font-size:18px;
}

.contact-box a{
  color:#6fb3ff;
  text-decoration:none;
}

footer{
  text-align:center;
  padding:30px;
  color:#8b95a7;
  border-top:1px solid rgba(255,255,255,.08);
}

  h1{
    font-size:42px;
  }

  h2{
    font-size:32px;
  }

  .hero-content{
    margin-top:80px;
  }

  .hero p{
    font-size:18px;
  }
}

  .hero-girl{
    width:300px;
    opacity:.5;
  }
}

  .hero-girl{
    position:relative;
    width:60%;
  display:block;
  margin:0 auto;
    right:auto;
    margin-top:40px;
  }

  .girl-image{
  }
}


.floating-icons{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}

.float-icon{
  position:absolute;
  width:64px;
  height:64px;
  opacity:.9;
  filter:drop-shadow(0 0 18px rgba(31,111,235,.55));
}

.tg-icon{
  top:18%;
  left:-10%;
  animation:flyAcross 18s linear infinite;
}

  top:62%;
  left:-15%;
  width:72px;
  height:72px;
  animation:flyAcrossReverse 22s linear infinite;
}

.second{
  top:78%;
  animation-delay:7s;
  animation-duration:16s;
}

@keyframes flyAcross{
  0%{transform:translateX(0) translateY(0) rotate(0deg);}
  25%{transform:translateX(35vw) translateY(-60px) rotate(10deg);}
  50%{transform:translateX(70vw) translateY(30px) rotate(-10deg);}
  100%{transform:translateX(120vw) translateY(-20px) rotate(8deg);}
}

@keyframes flyAcrossReverse{
  0%{transform:translateX(120vw) translateY(0) rotate(0deg);}
  25%{transform:translateX(85vw) translateY(-40px) rotate(-12deg);}
  50%{transform:translateX(50vw) translateY(60px) rotate(8deg);}
  100%{transform:translateX(-30vw) translateY(-30px) rotate(-10deg);}
}

  .float-icon{
    width:44px;
    height:44px;
  }
}


.floating-logo{
 position:fixed;
 font-size:42px;
 z-index:9999;
 pointer-events:none;
 animation:floatAround 18s linear infinite;
 opacity:.85;
 filter:drop-shadow(0 0 10px rgba(255,255,255,.7));
}
.microsoft{top:10%;left:5%;animation-duration:20s;}
.apple{top:60%;left:80%;animation-duration:24s;}

@keyframes floatAround{
 0%{transform:translate(0,0) rotate(0deg);}
 25%{transform:translate(40vw,20vh) rotate(90deg);}
 50%{transform:translate(-20vw,40vh) rotate(180deg);}
 75%{transform:translate(30vw,-10vh) rotate(270deg);}
 100%{transform:translate(0,0) rotate(360deg);}
}

.apple-bar{
 position:sticky;
 top:14px;
 z-index:1000;
 width:60%;
  display:block;
  margin:0 auto;
 display:flex;
 justify-content:space-between;
 align-items:center;
 padding:14px 26px;
 margin-bottom:24px;
 border-radius:24px;
 background:rgba(255,255,255,0.08);
 border:1px solid rgba(255,255,255,0.12);
 backdrop-filter:blur(20px);
 -webkit-backdrop-filter:blur(20px);
 box-shadow:0 10px 30px rgba(0,0,0,0.25);
}

.apple-bar span{
 font-size:14px;
 letter-spacing:0.4px;
 color:#dfe7f5;
}

.apple-nav{
 padding:18px 0;
}

.cards{
 grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}

.advantages-grid{
 grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}

@media (max-width:768px){
 .apple-bar{
   flex-direction:column;
   gap:8px;
   text-align:center;
   padding:14px;
 }
 
 .nav{
   gap:12px;
   flex-wrap:wrap;
 }
 
 .hero{
   padding:24px 5%;
 }
 
 .hero-content{
   margin-top:50px;
 }
 
 h1{
   font-size:36px;
 }
 
 .hero p{
   font-size:16px;
 }
 
 .buttons a{
   width:60%;
  display:block;
  margin:0 auto;
   text-align:center;
 }
 
 .card,
 .advantages-grid div,
 .contact-box{
   padding:22px;
 }
}