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

 html {
   scroll-behavior: smooth;
 }

 body {
   font-family: Arial, Helvetica, sans-serif;
   color: #152238;
   background: #ffffff;
   line-height: 1.6;
 }

 a {
   text-decoration: none;
   color: inherit;
 }

 /* =========================
           HEADER
        ========================= */

 header {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 1000;
   background: rgba(5, 20, 40, 0.95);
   backdrop-filter: blur(10px);
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
 }

 .navbar {
   max-width: 1200px;
   margin: auto;
   padding: 18px 25px;
   display: flex;
   align-items: center;
   justify-content: space-between;
 }

 .logo {
   display: flex;
   align-items: center;
   gap: 12px;
   color: white;
 }

 .logo-icon {
   width: 42px;
   height: 42px;
   border-radius: 10px;
   background: linear-gradient(135deg, #00a8ff, #2563eb);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 21px;
   font-weight: 800;
 }

 .logo-text strong {
   display: block;
   font-size: 18px;
   letter-spacing: 1px;
 }

 .logo-text span {
   font-size: 11px;
   color: #aab8ca;
 }

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

 nav a {
   color: #ffffff;
   font-size: 15px;
   transition: 0.3s;
 }

 nav a:hover {
   color: #20a4ff;
 }

 /* =========================
           HERO
        ========================= */

 .hero {
   min-height: 700px;
   padding: 150px 25px 100px;
   background:
     radial-gradient(circle at 80% 40%, rgba(0, 153, 255, 0.18), transparent 35%),
     linear-gradient(135deg, #061426, #092a50 60%, #061426);
   color: white;
   position: relative;
   overflow: hidden;
 }

 .hero::before {
   content: "";
   position: absolute;
   width: 500px;
   height: 500px;
   border-radius: 50%;
   background: rgba(0, 157, 255, 0.08);
   right: -150px;
   top: 100px;
   filter: blur(10px);
 }

 .hero-container {
   max-width: 1200px;
   margin: auto;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 60px;
   align-items: center;
   position: relative;
   z-index: 2;
 }

 .hero-content small {
   color: #16a9ff;
   letter-spacing: 4px;
   font-weight: bold;
   font-size: 14px;
 }

 .hero-content h1 {
   font-size: clamp(42px, 5vw, 65px);
   line-height: 1.08;
   margin: 20px 0;
 }

 .hero-content h1 span {
   color: #159fff;
 }

 .hero-content p {
   max-width: 570px;
   color: #c5d1df;
   font-size: 17px;
   margin-bottom: 30px;
 }

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

 .btn {
   padding: 13px 25px;
   border-radius: 7px;
   font-weight: bold;
   display: inline-block;
   transition: 0.3s;
 }

 .btn-primary {
   background: #119cff;
   color: white;
 }

 .btn-primary:hover {
   background: #007bd4;
   transform: translateY(-2px);
 }

 .btn-outline {
   border: 1px solid rgba(255, 255, 255, 0.4);
   color: white;
 }

 .btn-outline:hover {
   border-color: #159fff;
   color: #159fff;
 }

 /* Hero Illustration */

 .hero-visual {
   min-height: 400px;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .laptop {
   width: 430px;
   max-width: 100%;
   position: relative;
 }

 .screen {
   height: 270px;
   border: 12px solid #172d47;
   border-bottom: 18px solid #172d47;
   border-radius: 15px 15px 5px 5px;
   background: linear-gradient(145deg, #102f55, #06162b);
   box-shadow: 0 25px 70px rgba(0, 0, 0, 0.45);
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .screen-content {
   text-align: center;
 }

 .screen-code {
   color: #20a4ff;
   font-size: 48px;
   font-weight: bold;
 }

 .screen-content h3 {
   font-size: 27px;
   margin-top: 10px;
 }

 .screen-content p {
   color: #93a7bd;
   font-size: 14px;
 }

 .laptop-base {
   height: 20px;
   background: #60758b;
   border-radius: 0 0 25px 25px;
   width: 110%;
   margin-left: -5%;
   box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
 }

 /* =========================
           ABOUT
        ========================= */

 .about {
   padding: 90px 25px;
   background: #fff;
 }

 .section-container {
   max-width: 1100px;
   margin: auto;
 }

 .section-heading {
   text-align: center;
   margin-bottom: 55px;
 }

 .section-heading small {
   color: #078ff0;
   letter-spacing: 3px;
   font-weight: bold;
   font-size: 13px;
 }

 .section-heading h2 {
   font-size: 42px;
   margin: 8px 0 12px;
   color: #14243a;
 }

 .section-heading p {
   max-width: 680px;
   margin: auto;
   color: #68788d;
 }

 .about-content {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 60px;
   align-items: center;
 }

 .about-text h3 {
   font-size: 30px;
   margin-bottom: 18px;
 }

 .about-text p {
   color: #63748a;
   margin-bottom: 15px;
 }

 .features {
   display: flex;
   gap: 20px;
   margin-top: 25px;
   flex-wrap: wrap;
 }

 .feature {
   display: flex;
   align-items: center;
   gap: 10px;
 }

 .feature-icon {
   width: 42px;
   height: 42px;
   border-radius: 50%;
   background: #e7f5ff;
   color: #078ff0;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 19px;
 }

 .about-box {
   padding: 40px;
   border-radius: 20px;
   background: linear-gradient(135deg, #eaf6ff, #f5f9ff);
   text-align: center;
 }

 .about-box .big-icon {
   font-size: 70px;
   margin-bottom: 15px;
 }

 .about-box h3 {
   margin-bottom: 10px;
 }

 .about-box p {
   color: #68788d;
 }

 /* =========================
           SERVICES
        ========================= */

 .services {
   padding: 90px 25px;
   background: #f7faff;
 }

 .service-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
 }

 .service-card {
   background: white;
   padding: 35px 25px;
   border-radius: 15px;
   text-align: center;
   box-shadow: 0 10px 35px rgba(20, 50, 80, 0.07);
   transition: 0.35s;
   border: 1px solid #edf2f7;
 }

 .service-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 20px 45px rgba(20, 50, 80, 0.13);
 }

 .service-icon {
   width: 75px;
   height: 75px;
   border-radius: 20px;
   margin: auto auto 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 34px;
   background: #e8f5ff;
 }

 .service-card:nth-child(2) .service-icon {
   background: #f3eaff;
 }

 .service-card:nth-child(3) .service-icon {
   background: #e9fff4;
 }

 .service-card:nth-child(4) .service-icon {
   background: #fff1e8;
 }

 .service-card h3 {
   font-size: 21px;
   margin-bottom: 12px;
 }

 .service-card p {
   font-size: 14px;
   color: #6d7c90;
 }

 /* =========================
           CONTACT
        ========================= */

 .contact {
   padding: 90px 25px;
   background: white;
 }

 .contact-box {
   max-width: 900px;
   margin: auto;
   background: linear-gradient(135deg, #07182c, #0b3764);
   border-radius: 22px;
   padding: 55px;
   color: white;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 50px;
   align-items: center;
 }

 .contact-box h2 {
   font-size: 35px;
   margin-bottom: 12px;
 }

 .contact-box p {
   color: #b9c9db;
 }

 .contact-info {
   display: flex;
   flex-direction: column;
   gap: 20px;
 }

 .contact-item {
   display: flex;
   align-items: center;
   gap: 15px;
 }

 .contact-item .icon {
   width: 45px;
   height: 45px;
   background: rgba(20, 160, 255, 0.15);
   border: 1px solid rgba(20, 160, 255, 0.25);
   border-radius: 10px;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 20px;
 }

 .contact-item small {
   display: block;
   color: #8ea3b9;
   font-size: 12px;
 }

 .contact-item strong {
   font-size: 16px;
 }

 /* =========================
           FOOTER
        ========================= */

 footer {
   background: #051426;
   color: white;
   padding: 55px 25px 20px;
 }

 .footer-container {
   max-width: 1100px;
   margin: auto;
   display: grid;
   grid-template-columns: 1.5fr 1fr 1fr;
   gap: 50px;
   padding-bottom: 40px;
 }

 .footer-logo {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 15px;
 }

 .footer-description {
   color: #8fa2b8;
   max-width: 330px;
   font-size: 14px;
 }

 footer h3 {
   font-size: 17px;
   margin-bottom: 18px;
 }

 .footer-links {
   display: flex;
   flex-direction: column;
   gap: 10px;
 }

 .footer-links a {
   color: #9aacc0;
   font-size: 14px;
   transition: 0.3s;
 }

 .footer-links a:hover {
   color: #13a1ff;
 }

 .footer-contact {
   color: #9aacc0;
   font-size: 14px;
 }

 .footer-contact div {
   margin-bottom: 10px;
 }

 .footer-bottom {
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   padding-top: 20px;
   text-align: center;
   color: #71859b;
   font-size: 13px;
 }

 .footer-bottom a {
   color: #18a4ff;
 }

 /* =========================
           MOBILE
        ========================= */

 @media (max-width: 900px) {

   nav {
     gap: 18px;
   }

   .hero-container {
     grid-template-columns: 1fr;
     text-align: center;
   }

   .hero-content p {
     margin-left: auto;
     margin-right: auto;
   }

   .hero-buttons {
     justify-content: center;
   }

   .hero-visual {
     min-height: 300px;
   }

   .about-content {
     grid-template-columns: 1fr;
   }

   .service-grid {
     grid-template-columns: repeat(2, 1fr);
   }

   .contact-box {
     grid-template-columns: 1fr;
   }

   .footer-container {
     grid-template-columns: 1fr 1fr;
   }
 }

 @media (max-width: 600px) {

   .navbar {
     padding: 14px 18px;
   }

   .logo-text strong {
     font-size: 15px;
   }

   nav {
     display: none;
   }

   .hero {
     padding-top: 120px;
     padding-bottom: 70px;
   }

   .hero-content h1 {
     font-size: 40px;
   }

   .hero-content p {
     font-size: 15px;
   }

   .screen {
     height: 210px;
   }

   .screen-code {
     font-size: 35px;
   }

   .section-heading h2 {
     font-size: 32px;
   }

   .service-grid {
     grid-template-columns: 1fr;
   }

   .contact-box {
     padding: 35px 25px;
   }

   .contact-box h2 {
     font-size: 28px;
   }

   .footer-container {
     grid-template-columns: 1fr;
     gap: 30px;
   }

   .about {
     padding: 65px 20px;
   }

   .services {
     padding: 65px 20px;
   }

   .contact {
     padding: 65px 20px;
   }
 }