/* ── RESET & BASE ───────────────────────────────────────── */
    *{margin:0;padding:0;box-sizing:border-box}
    body{ font-family:'Inter',sans-serif; background:#0b0f14; color:#fff; letter-spacing:0.2px; }
    a{text-decoration:none;color:inherit}

    /* ── NAVBAR ─────────────────────────────────────────────── */
    .navbar{
      display:flex;justify-content:space-between;align-items:center;
      padding:18px 8%; position:fixed;width:100%;
      background:rgba(10,15,20,0.7);
      backdrop-filter:blur(10px);
      z-index:1000
    }
    .logo{display:flex;align-items:center;gap:10px;font-weight:600}
    .logo-box{
      width:116px;height:46px;border-radius:10px;
      display:flex;align-items:center;justify-content:center;
      font-weight:700
    }
    .logo-box img{ width:100%;height:100%;object-fit:contain; }
    .nav-links a{margin:0 14px;color:#aaa;font-size:14px}
    .nav-links a:hover{color:#fff}
    .btn-primary{
      background:#00d4ff;color:#000;
      padding:10px 18px;border-radius:8px;font-weight:600;font-size:14px;
      cursor:pointer;border:none;
    }
    .btn-secondary{ border:1px solid #333;padding:10px 18px;border-radius:8px;color:#ccc }

    /* ── HAMBURGER ───────────────────────────────────────────── */
    .hamburger{
      display:none;flex-direction:column;gap:5px;
      cursor:pointer;padding:6px;border:none;
      background:transparent;z-index:1100;
    }
    .hamburger span{
      display:block;width:24px;height:2px;
      background:#fff;border-radius:2px;
      transition:all 0.3s ease;transform-origin:center;
    }
    .hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
    .hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0);}
    .hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

    /* ── MOBILE MENU ─────────────────────────────────────────── */
    .mobile-menu{
      display:none;position:fixed;inset:0;
      background:rgba(11,15,20,0.97);
      backdrop-filter:blur(20px);
      z-index:999;flex-direction:column;
      align-items:center;justify-content:center;gap:8px;
    }
    .mobile-menu.open{display:flex;}
    .mobile-menu a{
      font-size:26px;font-weight:700;
      color:#9aa4b2;padding:10px 0;transition:color 0.2s;
    }
    .mobile-menu a:hover{color:#00d4ff;}
    .mobile-menu .btn-primary{
      margin-top:16px;font-size:16px;
      padding:14px 36px;color:#000;border-radius:12px;
    }

    /* ── HERO ────────────────────────────────────────────────── */
    .hero{
      position:relative;padding:180px 8% 140px;
      text-align:center;overflow:hidden;
    }
    .hero-bg{
      position:absolute;inset:0;
      background:
        radial-gradient(circle at 30% 20%, rgba(0,212,255,0.15), transparent 40%),
        radial-gradient(circle at 70% 30%, rgba(123,97,255,0.15), transparent 40%),
        linear-gradient(#0b0f14,#0b0f14);
      z-index:0;
    }
    .hero-content{position:relative;z-index:1;}
    .hero-badge{
      display:inline-block;padding:8px 18px;border-radius:999px;
      border:1px solid rgba(0,212,255,0.4);color:#00d4ff;
      font-size:14px;margin-bottom:30px;
      background:rgba(0,212,255,0.05);
    }
    .hero h1{font-size:72px;font-weight:800;line-height:1.1;margin-bottom:25px;}
    .hero h1 span{
      background:linear-gradient(90deg,#00d4ff,#7b61ff);
      -webkit-background-clip:text;color:transparent;
    }
    .hero-sub{
      max-width:720px;margin:0 auto 40px;
      color:#9aa4b2;font-size:18px;line-height:1.8;
    }
    .hero-buttons{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;}
    .btn-primary{background:#00d4ff;color:#000;padding:16px 28px;border-radius:12px;font-weight:600;font-size:16px;}
    .btn-secondary{border:1px solid rgba(255,255,255,0.15);padding:16px 28px;border-radius:12px;color:#fff;font-weight:500;}

    /* ── STATS ───────────────────────────────────────────────── */
    .stats{
      display:flex;justify-content:space-around;
      padding:60px 8%;background:#0e141b;text-align:center;
    }
    .stats h2{color:#00d4ff;font-size:36px;font-weight:800;}
    .stats p{color:#aaa;font-size:14px;margin-top:4px;}

    /* ── SECTION SHARED ──────────────────────────────────────── */
    .section-tag{color:#00d4ff;font-size:24px;letter-spacing:2px;text-transform:uppercase;font-weight:600;margin-bottom:10px;display:block;}
    .center{text-align:center;}
    .section-sub{color:#9aa4b2;margin-top:10px;margin-bottom:60px;font-size:16px;}

    /* ── SERVICES ────────────────────────────────────────────── */
    .services-section{
      padding:140px 8%;position:relative;
      background:radial-gradient(circle at top center, rgba(0,212,255,0.08), transparent 60%);
    }
    .services-title{font-size:52px;font-weight:800;margin-bottom:16px;}
    .services-title span{
      background:linear-gradient(90deg,#00d4ff,#7b61ff);
      -webkit-background-clip:text;color:transparent;
    }
    .services-sub{color:#9aa4b2;font-size:17px;margin-bottom:70px;}
    .services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:35px;}
    .service-card{
      background:linear-gradient(145deg,#0e141b,#0c1117);
      border-radius:18px;padding:35px;
      border:1px solid rgba(255,255,255,0.05);
      transition:all 0.4s ease;position:relative;overflow:hidden;
    }
    .service-card:hover{
      transform:translateY(-8px);
      border-color:rgba(0,212,255,0.3);
      box-shadow:0 20px 60px rgba(0,0,0,0.6);
    }
    .service-card h3{font-size:20px;font-weight:700;margin-bottom:12px;}
    .service-card p{color:#9aa4b2;font-size:15px;line-height:1.7;}
    .icon-box{
      width:60px;height:60px;border-radius:16px;
      display:flex;align-items:center;justify-content:center;
      font-size:26px;margin-bottom:22px;
      box-shadow:0 10px 30px rgba(0,0,0,0.4);
    }
    .cyan  {background:linear-gradient(135deg,#00d4ff,#0099ff);}
    .purple{background:linear-gradient(135deg,#b14cff,#7b61ff);}
    .green {background:linear-gradient(135deg,#00ffb3,#00c98d);}
    .red   {background:linear-gradient(135deg,#ff6a6a,#ff3d3d);}
    .violet{background:linear-gradient(135deg,#7b61ff,#b14cff);}
    .yellow{background:linear-gradient(135deg,#ffd500,#ff9900);}

    /* ── ABOUT ───────────────────────────────────────────────── */
    .about{padding:120px 8%;}
    .about-grid{display:flex;align-items:center;gap:80px;flex-wrap:wrap;}
    .about-images{position:relative;flex:1;min-width:340px;height:600px;}
    .img-wrapper{
      position:absolute;border-radius:20px;overflow:hidden;
      box-shadow:0 25px 60px rgba(0,0,0,0.45);
    }
    .img-wrapper img{width:100%;height:100%;object-fit:cover;display:block;}
    .img1{width:60%;height:100%;left:0;top:0;z-index:1;}
    .img2{width:55%;height:42%;right:0;top:0;z-index:2;}
    .img3{width:55%;height:42%;right:0;bottom:0;z-index:2;}
    .experience-badge{
      position:absolute;bottom:20px;left:20px;
      background:#0e141b;padding:18px 26px;
      border-radius:14px;box-shadow:0 10px 40px rgba(0,0,0,0.6);
      border:1px solid rgba(255,255,255,0.07);z-index:3;
    }
    .experience-badge h3{color:#00d4ff;font-size:28px;font-weight:700;}
    .experience-badge p{color:#aaa;font-size:14px;}
    .about-content{flex:1;min-width:320px;}
    .about-content h2{font-size:44px;font-weight:800;line-height:1.1;margin-bottom:18px;}
    .about-content h2 span{
      background:linear-gradient(90deg,#00d4ff,#7b61ff);
      -webkit-background-clip:text;color:transparent;
    }
    .about-desc{color:#aaa;line-height:1.8;margin-bottom:28px;font-size:15px;}
    .about-features{
      display:grid;grid-template-columns:repeat(2,1fr);
      gap:12px 40px;margin-bottom:35px;color:#ccc;font-size:15px;
    }
    .about-features span{display:flex;align-items:center;gap:8px;}
    .about-features span::before{content:'✓';color:#00d4ff;font-weight:700;}
    .about-stats{display:flex;align-items:center;gap:40px;}
    .about-stats h3{color:#00d4ff;font-size:32px;font-weight:800;}
    .about-stats p{color:#aaa;font-size:14px;}
    .divider{width:1px;height:40px;background:#222;}

    /* ── FEATURED WORK ───────────────────────────────────────── */
    .featured-work{padding:140px 8%;background:#0e141b;}
    .featured-title{font-size:56px;font-weight:800;margin-bottom:16px;}
    .featured-title span{
      background:linear-gradient(90deg,#00d4ff,#7b61ff);
      -webkit-background-clip:text;color:transparent;
    }
    .featured-sub{color:#9aa4b2;margin-bottom:60px;font-size:17px;}
    .work-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:30px;}
    .work-card{
      position:relative;border-radius:20px;overflow:hidden;
      height:300px;cursor:pointer;
      box-shadow:0 20px 60px rgba(0,0,0,0.6);
    }
    .work-card-inner{
      width:100%;height:100%;
      display:flex;align-items:center;justify-content:center;
      transition:transform 0.6s ease;
    }
    .work-card:hover .work-card-inner{transform:scale(1.06);}
    .work-info{
      position:absolute;bottom:0;left:0;width:100%;padding:28px;
      background:linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.3), transparent);
    }
    .work-type{font-size:13px;color:#00d4ff;margin-bottom:6px;display:block;font-weight:500;}
    .work-info h3{font-size:20px;font-weight:700;color:#fff;}

    /* ── TESTIMONIALS ────────────────────────────────────────── */
    .testimonials-section{padding:140px 8%;text-align:center;padding-top:200px;}
    .testimonial-title{font-size:52px;font-weight:800;margin-bottom:60px;}
    .testimonial-title span{
      background:linear-gradient(90deg,#00d4ff,#7b61ff);
      -webkit-background-clip:text;color:transparent;
    }
    .testimonial-card{
      max-width:750px;margin:0 auto;
      background:linear-gradient(145deg,#0e141b,#0c1117);
      border-radius:22px;padding:60px 50px 50px;
      border:1px solid rgba(255,255,255,0.05);
      box-shadow:0 20px 60px rgba(0,0,0,0.6);
      position:relative;
    }
    .quote-icon{
      font-size:80px;color:#00d4ff;opacity:0.15;
      position:absolute;top:16px;left:28px;
      font-family:Georgia,serif;line-height:1;
    }
    .testimonial-text{font-size:20px;color:#d1d5db;line-height:1.8;margin-bottom:36px;}
    .client-info{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:28px;}
    .client-avatar{
      width:50px;height:50px;border-radius:50%;
      border:2px solid #00d4ff;
      background:linear-gradient(135deg,#00d4ff,#7b61ff);
      display:flex;align-items:center;justify-content:center;
      font-weight:700;font-size:18px;color:#000;overflow:hidden;
    }
    .client-info h4{font-size:17px;font-weight:700;margin-bottom:3px;}
    .client-info span{font-size:13px;color:#9aa4b2;}
    .testimonial-controls{display:flex;justify-content:center;align-items:center;gap:18px;}
    .arrow{
      width:40px;height:40px;border-radius:50%;
      border:1px solid rgba(255,255,255,0.1);
      background:#0e141b;color:#fff;font-size:18px;
      cursor:pointer;transition:all 0.3s ease;
      display:flex;align-items:center;justify-content:center;
    }
    .arrow:hover{background:#00d4ff;color:#000;border-color:#00d4ff;}
    .dots{display:flex;gap:8px;}
    .dot{width:8px;height:8px;background:#555;border-radius:50%;cursor:pointer;transition:all 0.3s ease;}
    .dot.active{background:#00d4ff;width:22px;border-radius:4px;}

    /* ── CONTACT ─────────────────────────────────────────────── */
    .contact-section{padding:140px 8%;}
    .contact-grid{display:flex;gap:80px;flex-wrap:wrap;align-items:flex-start;}
    .contact-left{flex:1;min-width:320px;}
    .contact-left h2{font-size:56px;font-weight:800;margin-bottom:18px;line-height:1.1;}
    .contact-left h2 span{
      background:linear-gradient(90deg,#00d4ff,#7b61ff);
      -webkit-background-clip:text;color:transparent;
    }
    .contact-sub{color:#9aa4b2;font-size:17px;margin-bottom:36px;line-height:1.7;}
    .contact-info{display:flex;flex-direction:column;gap:18px;}
    .info-card{
      display:flex;align-items:center;gap:18px;
      background:linear-gradient(145deg,#0e141b,#0c1117);
      padding:20px 24px;border-radius:16px;
      border:1px solid rgba(255,255,255,0.05);
      transition:border-color 0.3s ease;
    }
    .info-card:hover{border-color:rgba(0,212,255,0.3);}
    .info-icon{
      width:48px;height:48px;border-radius:12px;
      display:flex;align-items:center;justify-content:center;
      background:linear-gradient(135deg,#00d4ff,#7b61ff);
      font-size:20px;flex-shrink:0;
    }
    .info-card span{font-size:13px;color:#9aa4b2;}
    .info-card h4{font-size:16px;margin-top:3px;font-weight:600;}
    .contact-form-box{
      flex:1;min-width:340px;
      background:linear-gradient(145deg,#0e141b,#0c1117);
      padding:40px;border-radius:22px;
      border:1px solid rgba(255,255,255,0.05);
      box-shadow:0 20px 60px rgba(0,0,0,0.6);
    }
    .form-group{display:flex;flex-direction:column;gap:7px;flex:1;}
    .form-group label{font-size:13px;color:#9aa4b2;font-weight:500;}
    .form-row{display:flex;gap:16px;margin-bottom:16px;}
    .contact-form-box input,
    .contact-form-box textarea,
    .contact-form-box select{
      width:100%;padding:14px 16px;border-radius:12px;
      border:1px solid rgba(255,255,255,0.06);
      background:#111827;color:#fff;font-size:15px;
      font-family:'Inter',sans-serif;outline:none;
      transition:border-color 0.3s ease;
    }
    .contact-form-box input:focus,
    .contact-form-box textarea:focus{border-color:rgba(0,212,255,0.5);}
    .contact-form-box textarea{height:150px;resize:vertical;margin-bottom:0;}
    .form-mb{margin-bottom:16px;}
    .btn-primary.full{width:100%;padding:16px;font-size:16px;border-radius:12px;cursor:pointer;border:none;font-family:'Inter',sans-serif;}

    /* ── FOOTER ──────────────────────────────────────────────── */
    footer{
      background:#0e141b;
      border-top:1px solid rgba(255,255,255,0.07);
      padding:28px 8%;
      display:flex;align-items:center;
      justify-content:space-between;flex-wrap:wrap;gap:14px;
    }
    .footer-logo{font-weight:800;font-size:17px;}
    .footer-logo span{color:#00d4ff;}
    footer p{color:#9aa4b2;font-size:13px;}
    .footer-links{display:flex;gap:20px;}
    .footer-links a{color:#9aa4b2;font-size:13px;transition:color 0.2s;}
    .footer-links a:hover{color:#00d4ff;}

    /* ══════════════════════════════════════════════════════════
       RESPONSIVE — TABLET (≤ 1024px)
    ══════════════════════════════════════════════════════════ */
    @media (max-width:1024px){
      .navbar{padding:16px 5%;}
      .hero{padding:140px 5% 100px;}
      .hero h1{font-size:52px;}
      .hero-sub{font-size:16px;}
      .stats{padding:50px 5%;}
      .services-section,.about,.featured-work,.testimonials-section,.contact-section{padding:100px 5%;}
      .about-grid{gap:50px;}
      .about-images{min-width:280px;height:480px;}
      .about-content{min-width:280px;}
      .contact-grid{gap:50px;}
      .contact-left{min-width:260px;}
      .contact-form-box{min-width:280px;}
      .services-title{font-size:42px;}
      .featured-title{font-size:44px;}
      .testimonial-title{font-size:42px;}
      .contact-left h2{font-size:44px;}
      .work-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
    }

    /* ══════════════════════════════════════════════════════════
       RESPONSIVE — TABLET PORTRAIT / LARGE MOBILE (≤ 768px)
    ══════════════════════════════════════════════════════════ */
    @media (max-width:768px){

      /* Navbar */
      .navbar{padding:14px 5%;}
      .nav-links{display:none;}
      .navbar .btn-secondary{display:none;}
      .hamburger{display:flex;}

      /* Hero */
      .hero{padding:120px 5% 80px;}
      .hero h1{font-size:38px;}
      .hero-sub{font-size:15px;}
      .hero-buttons{flex-direction:column;align-items:center;gap:12px;}
      .hero-buttons .btn-primary,
      .hero-buttons .btn-secondary{width:100%;max-width:300px;text-align:center;justify-content:center;display:flex;}

      /* Stats — 2×2 */
      .stats{
        display:grid;grid-template-columns:repeat(2,1fr);
        gap:30px;padding:40px 5%;justify-items:center;
      }
      .stats h2{font-size:30px;}

      /* Sections */
      .services-section,.about,.featured-work,.testimonials-section,.contact-section{padding:80px 5%;}

      /* Headings */
      .services-title,.testimonial-title{font-size:32px;}
      .featured-title{font-size:34px;}
      .contact-left h2{font-size:34px;}
      .about-content h2{font-size:30px;}

      /* Services */
      .services-grid{grid-template-columns:1fr;gap:20px;}

      /* About */
      .about-grid{flex-direction:column;gap:30px;}
      .about-images{min-width:unset;width:100%;height:320px;}
      .about-content{min-width:unset;width:100%;}
      .about-features{grid-template-columns:1fr;gap:10px;}
      .about-stats{gap:24px;flex-wrap:wrap;}
      .about-stats h3{font-size:26px;}

      /* Work */
      .work-grid{grid-template-columns:1fr;gap:20px;}
      .work-card{height:240px;}

      /* Testimonials */
      .testimonial-card{padding:40px 24px 34px;}
      .testimonial-text{font-size:17px;}

      /* Contact */
      .contact-grid{flex-direction:column;gap:30px;}
      .contact-left{min-width:unset;width:100%;}
      .contact-form-box{min-width:unset;width:100%;padding:28px 22px;}
      .form-row{flex-direction:column;gap:14px;margin-bottom:14px;}
      .contact-sub{font-size:15px;}

      /* Footer */
      footer{flex-direction:column;text-align:center;}
      .footer-links{justify-content:center;}
    }

    /* ══════════════════════════════════════════════════════════
       RESPONSIVE — MOBILE (≤ 480px)
    ══════════════════════════════════════════════════════════ */
    @media (max-width:480px){
      .navbar{padding:12px 4%;}
      .logo-box{width:90px;height:38px;}

      .hero{padding:100px 4% 70px;}
      .hero h1{font-size:30px;line-height:1.15;}
      .hero-badge{font-size:12px;padding:6px 14px;}
      .hero-sub{font-size:14px;}

      .stats{grid-template-columns:repeat(2,1fr);gap:20px;padding:30px 4%;}
      .stats h2{font-size:26px;}

      .services-section,.about,.featured-work,.testimonials-section,.contact-section{padding:60px 4%;}

      .services-title,.testimonial-title{font-size:26px;}
      .services-sub{font-size:14px;margin-bottom:40px;}
      .featured-title{font-size:26px;}
      .contact-left h2{font-size:26px;}
      .about-content h2{font-size:24px;}

      .service-card{padding:24px;}
      .icon-box{width:50px;height:50px;font-size:22px;}

      .about-images{height:240px;}
      .experience-badge{padding:14px 18px;}
      .experience-badge h3{font-size:22px;}

      .work-card{height:200px;}
      .work-info h3{font-size:17px;}

      .testimonial-card{padding:36px 18px 28px;}
      .testimonial-text{font-size:15px;}
      .client-info h4{font-size:15px;}

      .contact-form-box{padding:22px 16px;}
      .contact-form-box input,
      .contact-form-box textarea{font-size:14px;padding:12px 14px;}
      .btn-primary.full{padding:14px;font-size:15px;}
      .info-card{padding:16px 18px;gap:12px;}
      .info-card h4{font-size:14px;}
    }

    /* ══════════════════════════════════════════════════════════
       RESPONSIVE — VERY SMALL (≤ 360px)
    ══════════════════════════════════════════════════════════ */
    @media (max-width:360px){
      .hero h1{font-size:24px;}
      .stats{grid-template-columns:repeat(2,1fr);}
      .stats h2{font-size:22px;}
      .services-title,.featured-title,.testimonial-title,.contact-left h2{font-size:22px;}
      .about-content h2{font-size:20px;}
      .about-images{height:200px;}
    }