*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif;scroll-behavior:smooth;}
    :root{ --bg:#020617; --bg2:#0f172a; --card:#111827; --line:#1e293b;  --text:#e5e7eb;  --muted:#94a3b8;  --accent:#38bdf8;  --accent2:#818cf8; --shadow:0 20px 40px rgba(56,189,248,.12); }
    body{  background:var(--bg); color:var(--text);   line-height:1.7;   overflow-x:hidden;}
    .container{  width:90%; max-width:1150px;margin:auto;}
    header{   position:fixed;    width:100%;   top:0;   z-index:1000;   background:rgba(2,6,23,0.82);   backdrop-filter:blur(14px);   border-bottom:1px solid var(--line); }
    nav{  display:flex;   justify-content:space-between;    align-items:center; height:72px; }
    .logo{  font-weight:800;  font-size:clamp(1.3rem, 2.5vw, 1.8rem);  background:linear-gradient(90deg,var(--accent),var(--accent2));  -webkit-background-clip:text;   -webkit-text-fill-color:transparent;  background-clip:text; color:transparent; }
    .nav-links{
      list-style:none;
      display:flex;
      gap:25px;
    }
    .nav-links a{
      color:var(--text);
      text-decoration:none;
      position:relative;
      font-size:0.96rem;
      transition:.3s;
    }

    .nav-links a::after{
      content:"";
      position:absolute;
      left:0;
      bottom:-5px;
      width:0%;
      height:2px;
      background:var(--accent);
      transition:.3s;
    }

    .nav-links a:hover::after,
    .nav-links a.active::after{
      width:100%;
    }

    .nav-links a:hover{
      color:#fff;
    }

    .menu-icon{
      display:none;
      flex-direction:column;
      gap:5px;
      cursor:pointer;
    }

    .menu-icon span{
      width:25px;
      height:3px;
      background:var(--text);
      transition:.4s;
      border-radius:2px;
    }

    .menu-icon.active span:nth-child(1){
      transform:rotate(45deg) translate(5px,5px);
    }
    .menu-icon.active span:nth-child(2){
      opacity:0;
    }
    .menu-icon.active span:nth-child(3){
      transform:rotate(-45deg) translate(6px,-6px);
    }
    .hero{
      min-height:100vh;
      display:flex;
      align-items:center;
      text-align:center;
      background:
        radial-gradient(circle at top left, rgba(56,189,248,.15), transparent 25%),
        radial-gradient(circle at top right, rgba(129,140,248,.12), transparent 25%),
        radial-gradient(circle at bottom, rgba(56,189,248,.08), transparent 25%),
        linear-gradient(180deg, #0b1120 0%, #020617 100%);
      position:relative;
      padding-top:100px;
    }

    .hero-badge{
      display:inline-block;
      padding:8px 16px;
      border:1px solid rgba(56,189,248,.25);
      border-radius:999px;
      background:rgba(15,23,42,.6);
      color:var(--accent);
      font-size:.9rem;
      margin-bottom:18px;
    }

    .hero h1{
      font-size:clamp(2.2rem,5vw,4rem);
      line-height:1.15;
      margin-bottom:10px;
    }

    .hero h3{
      font-size:clamp(1.15rem,2.5vw,1.6rem);
      color:#cbd5e1;
      font-weight:600;
      margin-top:8px;
    }

    .hero p{
      margin:18px auto 0;
      color:var(--muted);
      font-size:clamp(1rem,2vw,1.08rem);
      max-width:760px;
    }

    .hero span{
      color:var(--accent);
    }

    .hero-buttons{
      display:flex;
      gap:15px;
      justify-content:center;
      flex-wrap:wrap;
      margin-top:35px;
    }

    .btn{
      display:inline-block;
      padding:14px 34px;
      border-radius:999px;
      background:linear-gradient(135deg,var(--accent),#0ea5e9);
      color:#020617;
      text-decoration:none;
      font-weight:700;
      border:none;
      cursor:pointer;
      transition:.3s;
      box-shadow:0 10px 30px rgba(56,189,248,.22);
    }

    .btn:hover{
      transform:translateY(-4px);
      box-shadow:0 16px 35px rgba(56,189,248,.35);
    }

    .secondary-btn{
      background:transparent;
      color:var(--accent);
      border:1px solid rgba(56,189,248,.35);
      box-shadow:none;
    }

    .secondary-btn:hover{
      background:rgba(56,189,248,.08);
      color:#fff;
      border-color:var(--accent); }
    .hero-stats{ margin-top:45px;display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:18px; }
    .stat-card{ padding:20px;border:1px solid var(--line);  border-radius:16px;  background:rgba(15,23,42,.55);   backdrop-filter:blur(10px); }
    .stat-card h4{  font-size:1.35rem; color:var(--accent);  margin-bottom:6px; }
    .stat-card p{  margin:0;  font-size:.95rem;  color:var(--muted); }
    section{ padding:110px 0;text-align:center;}
    h2{  font-size:clamp(1.7rem,4vw,2.5rem);  margin-bottom:18px;  color:var(--accent);  }
    .section-sub{  max-width:720px; margin:0 auto 35px;   color:var(--muted);  font-size:1rem; }
    .mini-trust{  padding-top:30px;  padding-bottom:30px; }
    .trust-grid{ display:grid;  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));   gap:16px; }
    .trust-grid span{ padding:18px;  border:1px solid var(--line);   border-radius:14px;  background:var(--bg2); color:#cbd5e1;  transition:.3s; }
    .trust-grid span:hover{  transform:translateY(-4px);  border-color:rgba(56,189,248,.35); }
    .about-box{  max-width:850px;   margin:auto;   padding:32px;   border:1px solid var(--line);   border-radius:20px;  background:linear-gradient(180deg, rgba(15,23,42,.8), rgba(2,6,23,.9));  box-shadow:var(--shadow); }
    .about-box p{  color:#cbd5e1; font-size:1.03rem;}
    .skills-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:16px; margin-top:35px;}
    .skills-grid span{   padding:14px;   border:1px solid var(--line);    border-radius:12px;   background:var(--bg2); transition:.3s; font-weight:500; }
    .skills-grid span:hover{   transform:translateY(-5px);  border-color:var(--accent);  box-shadow:0 12px 25px rgba(56,189,248,.08); }
    .card-grid{  display:grid;  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));   gap:24px;  margin-top:45px;  }
    .card{ border:1px solid var(--line); border-radius:18px;padding:28px;background:linear-gradient(180deg, rgba(15,23,42,.85), rgba(2,6,23,.95)); transition:.35s; text-align:left;  }
    .card:hover{   transform:translateY(-8px);   box-shadow:var(--shadow);   border-color:rgba(56,189,248,.25);  }
    .card h3{   margin-bottom:10px;  color:#fff;  font-size:1.15rem;  }
    .card p{  color:var(--muted);   font-size:.97rem; font-style: italic; }
    .featured-wrap{  display:grid;   grid-template-columns:1.1fr .9fr;   gap:28px;   align-items:center;   margin-top:45px;  text-align:left;   }
    .featured-image{  border:1px solid var(--line);   border-radius:22px;  overflow:visible;  background:var(--bg2);   display:flex;   align-items:center;  justify-content:center;color:var(--muted);font-size:1rem;padding:20px;}
      .featured-image img{width: 100%; max-height: 320px;   object-fit: contain;  border-radius: 18px; display:block; margin:auto;}
    .featured-content{border:1px solid var(--line);border-radius:22px;padding:35px; background:linear-gradient(180deg, rgba(15,23,42,.85), rgba(2,6,23,.95));}
    .featured-content h3{font-size:1.7rem; margin-bottom:12px;}
    .featured-content p{color:var(--muted);margin-bottom:20px;}
    .projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:25px;margin-top:50px;}
    .project-card{border:1px solid var(--line);border-radius:18px;padding:26px;background:linear-gradient(180deg, rgba(15,23,42,.85), rgba(2,6,23,.95));transition:.35s;text-align:left;}
    .project-card:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:rgba(56,189,248,.25);}
    .project-card h3{margin-bottom:10px;color:#fff;font-size:1.12rem;}
    .project-card p{color:var(--muted);font-size:.96rem;margin-bottom:16px;}
    .tech-stack{display:flex;flex-wrap:wrap;gap:10px;margin-top:15px; margin-bottom:20px;}
    .tech-stack span{font-size:0.82rem;padding:7px 12px;border-radius:999px;background:#0f172a;border:1px solid var(--line);color:#cbd5e1;}
    .project-links{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;}
    .project-links a{color:var(--accent); text-decoration:none;font-weight:600;transition:.3s;}
    .project-links a:hover{color:#7dd3fc;}
    .contact-box{max-width:780px;margin:auto;padding:35px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(180deg, rgba(15,23,42,.85), rgba(2,6,23,.95));box-shadow:var(--shadow);}
    .socialmedia{display:flex;justify-content:center;gap:16px;margin-bottom:28px;flex-wrap:wrap;}
    .socialmedia a{ color:var(--accent);   text-decoration:none;   border:1px solid var(--line);   padding:10px 18px;  border-radius:999px;  transition:.3s;   font-weight:500; background:rgba(15,23,42,.5); }
    .socialmedia a:hover{ border-color:var(--accent);  transform:translateY(-3px);  color:#fff; }
    .contact-info{  margin-bottom:25px; color:var(--muted);  }
  .contact-info p{    margin:8px 0; }
    form{   max-width:560px; margin:auto; }
    form input,
    form textarea{ width:100%;  padding:15px 16px;  margin:10px 0; border-radius:12px;border:1px solid var(--line);background:#020617;color:#fff;outline:none;transition:.3s;}
    form input:focus,
    form textarea:focus{border-color:rgba(56,189,248,.5);box-shadow:0 0 0 4px rgba(56,189,248,.08);}
    form textarea{ min-height:150px;resize:none;}
    #formMessage{margin-top:15px;color:var(--accent);font-weight:500;}
    footer{border-top:1px solid var(--line);padding:28px 0;text-align:center;color:var(--muted);background:#01040d;}
    .reveal{opacity:0;transform:translateY(45px);transition:.85s ease;}
    .reveal.active{opacity:1;transform:translateY(0);}
    .hero .animate{opacity:0;animation:fadeUp 1s ease forwards;}
    .hero .delay-1{animation-delay:.15s;}
    .hero .delay-2{animation-delay:.35s;}
    .hero .delay-3{animation-delay:.55s;}
    .hero .delay-4{animation-delay:.75s;}
    .hero .delay-5{animation-delay:.95s;}
 @keyframes fadeUp{ from{opacity:0;transform:translateY(30px);} to{opacity:1;transform:translateY(0);}}  

.testimonial-row {
  will-change: transform; transform: translate3d(0,0,0);
}
@keyframes scrollTeam{ 0%{ transform: translateX(0); } 100%{ transform: translateX(-50%);}}

 @media(max-width:900px){.featured-wrap{grid-template-columns:1fr;}  .featured-content, .featured-image{text-align:center;} }
 @media(max-width:768px){.menu-icon{ display:flex; }
 .nav-links{position:fixed;top:72px; right:-100%; width:100%;background:#020617;flex-direction:column;align-items:center;padding:30px 0; transition:.4s;  border-top:1px solid var(--line);}
 .nav-links.active{ right:0; }
 .hero{ padding-top:120px; }
 .hero-buttons{  flex-direction:column; align-items:center; }
 .btn{ width:100%;  max-width:280px; }
  section{ padding:95px 0;}
.about-box,
.contact-box,
 .featured-content{padding:24px; } }
      
      

.testimonial-wrapper{
  overflow: hidden;
  width: 100%;
  margin-top: 40px;
}

.testimonial-row{
  display: flex;
  gap: 22px;
  width: max-content;
  animation: scrollTestimonials 20s linear infinite;
}

.testimonial-row:hover{
  animation-play-state: paused;
}

@keyframes scrollTestimonials{
  0%{
    transform: translateX(0);
  }
  100%{
    transform: translateX(-50%);
  }
}

.testimonial-card{
  min-width: 300px;
  max-width: 320px;
  flex: 0 0 auto;
  padding: 22px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(15,23,42,.85), rgba(2,6,23,.95));
  border: 1px solid var(--line);
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
  transition: 0.3s ease;
  text-align: left;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.testimonial-card:hover{
  transform: translateY(-8px);
  border-color: var(--accent);
  box-shadow: 0 18px 40px rgba(56,189,248,.15);
}

.testimonial-card p{
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 12px;
  font-style: italic;
}

.testimonial-card h4{
  color: var(--accent);
  font-size: 0.9rem;
}
a, button {
  outline: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.stars{
  color: #fbbf24;
  font-size: 1rem;
  margin-bottom: 10px;
  letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(251,191,36,0.25);
}


.about-box {
  display: flex;
  gap: 25px;
  align-items: center;
  flex-wrap: wrap;
}

.about-img img {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--accent);
  box-shadow: 0 10px 30px rgba(56,189,248,.2);
}

.about-text {
  flex: 1;
  min-width: 250px;
}

@media (max-width: 768px) {
  .about-box {
    flex-direction: column;
    text-align: center;
  }

  .about-img img {
    width: 140px;
    height: 140px;
  }
}



form input,
form textarea{
    width:100%;
    padding:15px;
    margin:10px 0;
    color:#fff;
    background:
        linear-gradient(#020617,#020617) padding-box,
        linear-gradient(180deg,var(--accent),var(--accent2)) border-box;
    border:1px solid transparent;
    border-left:5px solid transparent;
    border-radius:12px;
}

form input:focus,
form textarea:focus{
    box-shadow:0 0 0 4px rgba(56,189,248,.08);
}
/* ================= TECH STACK GRID ================= */
.tech-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:18px;
  margin-top:40px;
}

.tech-card{
  padding:22px 14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(15,23,42,.85), rgba(2,6,23,.95));
  transition:.3s;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

.tech-card img{
  width:42px;
  height:42px;
  object-fit:contain;
}

.tech-card h3{
  font-size:.92rem;
  color:#cbd5e1;
  font-weight:500;
}

.tech-card:hover{
  transform:translateY(-6px);
  border-color:rgba(56,189,248,.35);
  box-shadow:0 12px 25px rgba(56,189,248,.1);
}

/* ================= VERIFIED BADGE ================= */
.verified-badge{
  display:inline-block;
  margin-top:12px;
  padding:5px 12px;
  font-size:.78rem;
  font-weight:600;
  color:#4ade80;
  background:rgba(74,222,128,.1);
  border:1px solid rgba(74,222,128,.3);
  border-radius:999px;
}

/* ================= PRIVATE CODE LINK ================= */
.private-code{
  color:var(--muted) !important;
  cursor:not-allowed;
  position:relative;
}

.private-code:hover{
  color:var(--muted) !important;
}

.private-code::after{
  content:"(private)";
  font-size:.75rem;
  margin-left:5px;
  color:var(--muted);
}

/* ================= EMPTY REVIEW STATE ================= */
.empty-review{
  border-style:dashed;
  opacity:.75;
  text-align:center;
  align-items:center;
  justify-content:center;
}

.empty-review h3{
  color:var(--accent);
  margin:10px 0;
  font-size:1.1rem;
}

.empty-review p{
  font-style:normal;
}

/* ===== Call To Action ===== */

.cta-box{
    max-width:900px;
    margin:auto;
    padding:60px 40px;
    text-align:center;
    border-radius:20px;
    background:linear-gradient(135deg,#0f172a,#1e293b);
    border:1px solid rgba(255,255,255,.08);
}

.cta-box h2{
    margin-bottom:20px;
    font-size:2rem;
}

.cta-box p{
    max-width:700px;
    margin:0 auto 30px;
    line-height:1.8;
    opacity:.9;
}

.cta-features{
    display:flex;
    justify-content:center;
    gap:15px;
    flex-wrap:wrap;
    margin-bottom:35px;
}

.cta-features span{
    padding:10px 16px;
    border-radius:30px;
    background:rgba(255,255,255,.08);
}

.cta-buttons{
    display:flex;
    justify-content:center;
    gap:15px;
    flex-wrap:wrap;
}