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

    body{
      font-family:'Inter',sans-serif;
      background:#040816;
      color:white;
      overflow-x:hidden;
    }

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

    .container{
      width:92%;
      max-width:1400px;
      margin:auto;
    }

    /* =========================
       BACKGROUND EFFECTS
    ==========================*/

    body::before{
      content:'';
      position:fixed;
      width:700px;
      height:700px;
      background:radial-gradient(circle,#1d4ed8 0%,transparent 70%);
      top:-200px;
      right:-200px;
      opacity:.25;
      filter:blur(60px);
      z-index:-1;
    }

    body::after{
      content:'';
      position:fixed;
      width:600px;
      height:600px;
      background:radial-gradient(circle,#7c3aed 0%,transparent 70%);
      bottom:-250px;
      left:-200px;
      opacity:.25;
      filter:blur(80px);
      z-index:-1;
    }

    /* =========================
       NAVBAR
    ==========================*/

    nav{
      position:sticky;
      top:0;
      z-index:100;
      backdrop-filter:blur(20px);
      background:rgba(8,12,25,0.6);
      border-bottom:1px solid rgba(255,255,255,0.06);
    }

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

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

    .logo-box{
      width:55px;
      height:55px;
      border-radius:18px;
      background:linear-gradient(135deg,#2563eb,#7c3aed);
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:800;
      font-size:22px;
      box-shadow:0 0 25px rgba(37,99,235,0.5);
    }

    .logo h2{
      font-size:20px;
      font-weight:600;
    }

    .nav-links{
      display:flex;
      gap:35px;
      color:#cbd5e1;
    }

    .nav-links a:hover{
      color:white;
    }

    .nav-btn{
      padding:14px 26px;
      border-radius:18px;
      border:1px solid rgba(255,255,255,0.1);
      background:rgba(255,255,255,0.03);
      backdrop-filter:blur(20px);
      color:white;
      cursor:pointer;
      transition:0.3s;
    }

    .nav-btn:hover{
      transform:translateY(-2px);
      background:rgba(255,255,255,0.08);
    }

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

    .hero{
      padding:90px 0 100px;
      display:grid;
      grid-template-columns:1.1fr 1fr;
      align-items:center;
      gap:60px;
    }

    .hero-badge{
      display:inline-flex;
      padding:10px 18px;
      border-radius:999px;
      background:rgba(37,99,235,0.15);
      border:1px solid rgba(59,130,246,0.25);
      color:#93c5fd;
      margin-bottom:30px;
      font-size:14px;
    }

    .hero h1{
      font-size:74px;
      line-height:1;
      font-weight:800;
      margin-bottom:25px;
      letter-spacing:-3px;
    }

    .hero h1 span{
      background:linear-gradient(to right,#60a5fa,#8b5cf6);
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
    }

    .hero p{
      font-size:20px;
      line-height:1.7;
      color:#94a3b8;
      max-width:650px;
      margin-bottom:40px;
    }

    .hero-buttons{
      display:flex;
      gap:20px;
      margin-bottom:50px;
    }

    .primary-btn{
      padding:18px 34px;
      border:none;
      border-radius:20px;
      background:linear-gradient(135deg,#2563eb,#7c3aed);
      color:white;
      font-size:16px;
      font-weight:600;
      cursor:pointer;
      box-shadow:0 15px 40px rgba(59,130,246,0.35);
      transition:0.3s;
    }

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

    .secondary-btn{
      padding:18px 34px;
      border-radius:20px;
      border:1px solid rgba(255,255,255,0.1);
      background:rgba(255,255,255,0.03);
      color:white;
      backdrop-filter:blur(10px);
      cursor:pointer;
      transition:0.3s;
    }

    .secondary-btn:hover{
      background:rgba(255,255,255,0.08);
    }

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

    .hero-preview{
      position:relative;
    }

    .glass-card{
      background:rgba(255,255,255,0.04);
      border:1px solid rgba(255,255,255,0.08);
      backdrop-filter:blur(30px);
      border-radius:35px;
      overflow:hidden;
      box-shadow:
        0 20px 80px rgba(0,0,0,0.45),
        inset 0 1px 1px rgba(255,255,255,0.08);
    }

    .mockup{
      padding:30px;
      min-height:550px;
      position:relative;
    }

    .mockup-top{
      display:flex;
      justify-content:space-between;
      margin-bottom:30px;
      color:#cbd5e1;
    }

    .mockup-menu{
      display:flex;
      gap:25px;
      font-size:14px;
    }

    .mockup-content{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:25px;
      align-items:center;
      height:100%;
    }

    .mockup h3{
      font-size:42px;
      line-height:1.1;
      margin-bottom:20px;
    }

    .mockup h3 span{
      color:#8b5cf6;
    }

    .mockup p{
      color:#94a3b8;
      line-height:1.6;
      margin-bottom:30px;
    }

    .mini-btn{
      display:inline-block;
      padding:14px 22px;
      background:linear-gradient(135deg,#2563eb,#7c3aed);
      border-radius:15px;
      font-size:14px;
    }

    .image-placeholder{
      width:100%;
      height:380px;
      border-radius:25px;
      background:
        linear-gradient(
          135deg,
          rgba(37,99,235,0.2),
          rgba(124,58,237,0.2)
        );

      border:2px dashed rgba(255,255,255,0.15);

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

      color:#94a3b8;
      text-align:center;
      padding:20px;
    }

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

    .section{
      padding:80px 0;
    }

    .section-title{
      font-size:42px;
      margin-bottom:15px;
    }

    .section-sub{
      color:#94a3b8;
      margin-bottom:50px;
      max-width:700px;
      line-height:1.7;
    }

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

    .service-card{
      padding:35px;
      border-radius:30px;
      background:rgba(255,255,255,0.03);
      border:1px solid rgba(255,255,255,0.08);
      transition:0.3s;
      backdrop-filter:blur(20px);
    }

    .service-card:hover{
      transform:translateY(-8px);
      border-color:rgba(59,130,246,0.4);
      box-shadow:0 15px 50px rgba(59,130,246,0.15);
    }

    .icon-box{
      width:110px;
      height:110px;
      border-radius:22px;
      margin-bottom:25px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:28px;
      background:linear-gradient(135deg,#2563eb,#7c3aed);
    }

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

    .service-card p{
      color:#94a3b8;
      line-height:1.7;
    }

    /* =========================
       PORTFOLIO
    ==========================*/

    .portfolio-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:30px;
    }

    .portfolio-card{
      overflow:hidden;
      border-radius:30px;
      background:rgba(255,255,255,0.03);
      border:1px solid rgba(255,255,255,0.08);
      transition:0.4s;
    }

    .portfolio-card:hover{
      transform:translateY(-10px);
    }

    .portfolio-image{
      height:260px;
      border-bottom:1px solid rgba(255,255,255,0.06);

      background:
        linear-gradient(
          135deg,
          rgba(37,99,235,0.15),
          rgba(124,58,237,0.15)
        );

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

      text-align:center;
      padding:20px;
      color:#94a3b8;
    }

    .portfolio-content{
      padding:30px;
    }

    .portfolio-tag{
      display:inline-block;
      padding:8px 14px;
      border-radius:999px;
      background:rgba(59,130,246,0.12);
      color:#93c5fd;
      font-size:13px;
      margin-bottom:18px;
    }

    .portfolio-content h3{
      font-size:28px;
      margin-bottom:15px;
    }

    .portfolio-content p{
      color:#94a3b8;
      line-height:1.7;
    }

    /* =========================
       CTA SECTION
    ==========================*/

    .cta{
      padding:100px 50px;
      border-radius:40px;
      background:
        linear-gradient(
          135deg,
          rgba(37,99,235,0.18),
          rgba(124,58,237,0.18)
        );

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

      text-align:center;
      position:relative;
      overflow:hidden;
    }

    .cta h2{
      font-size:54px;
      margin-bottom:20px;
    }

    .cta p{
      max-width:700px;
      margin:auto;
      color:#cbd5e1;
      line-height:1.8;
      margin-bottom:40px;
    }

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

    footer{
      padding:50px 0;
      text-align:center;
      color:#64748b;
    }

    /* =========================
       RESPONSIVE
    ==========================*/

    @media(max-width:1200px){

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

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

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

    }

    @media(max-width:768px){

      .nav-links{
        display:none;
      }

      .hero h1{
        font-size:52px;
      }

      .hero-buttons{
        flex-direction:column;
      }

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

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

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

      .cta h2{
        font-size:38px;
      }

    }