/* ---------- Base / Reset ---------- */
    :root{
      --bg: #0f1720;
      --accent: #ff6600;
      --muted: #6b7280;
      --card-bg: #fff;
      --site-padding: 4%;
      --container-max: 1200px;

      --bg-1: #071826;
      --bg-2: #022836;
      --accent-slider: #ff8a29;
      --panel: #0f1720;
      --muted-slider: #9aa4b2;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: 'Montserrat', sans-serif;
      background:#f6f7f9;
      color:#111827;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      line-height:1.5;
    }
    a{color:var(--accent); text-decoration:none}
    a:focus{outline:3px solid rgba(255,102,0,0.18); outline-offset:3px}

    strong{
      color:var(--muted);
    }


    /* ---------- HERO (detailed) ---------- */
    .hero{
      margin: 14vh 0 0;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:2.4rem;
      padding:56px calc(var(--site-padding));
      background:linear-gradient(90deg,#071019 0%, #0f1720 100%);
      color:#fff;
      width:100%;
    }
    .hero .container{max-width:var(--container-max);width:100%;margin:0 auto;display:flex;gap:2.4rem;align-items:center;justify-content: center; flex-wrap:wrap}
    .hero-right{flex:1 1 520px;min-width:300px}
    .hero-left{flex:0 0 320px;display:flex;justify-content:center}
    .hero h1{font-size:2.6rem;margin:0 0 .45rem 0;line-height:1.05}
    .hero .role{font-size:1.05rem;color:#f3f4f6;margin-bottom:1rem;font-weight:600}
    .hero p.lead{color:#d1d5db;margin:0 0 1.2rem;font-size:1.05rem}
    .hero .bullets{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem}
    .hero .bullet{background:rgba(255,255,255,0.04);padding:.5rem .75rem;border-radius:999px;font-weight:600;font-size:.95rem;color:#fff}
    .hero .cta-row{display:flex;gap:1rem;flex-wrap:wrap}
    .btn-primary{
      background: linear-gradient(135deg,var(--accent),#ff8a29);
      color:#fff;padding:.9rem 1.4rem;border-radius:10px;font-weight:800;border:0;cursor:pointer;
      box-shadow:0 10px 26px rgba(255,102,0,0.12)
    }
    .btn-muted{
      background:transparent;
      border:2px solid rgba(255,255,255,0.08);
      color:#fff;
      padding:.85rem 1.2rem;
      border-radius:10px;
      font-weight:700}
    .btn-primary:hover{filter:brightness(.98);transform:translateY(-1px)}
    .btn-muted:hover{background:rgba(255,255,255,0.02)}

    /* profile card inside hero-right */
    .profile-card{
      width:320px;
      background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      border-radius:14px;padding:18px;display:flex;flex-direction:column;align-items:center;gap:12px;
      box-shadow: 0 12px 30px rgba(3,7,18,0.6);
      border: 1px solid rgba(255,255,255,0.04);
    }
    .profile-card .avatar{
      width:140px;
      height:140px;
      border-radius:14px;
      overflow:hidden;
      border:4px solid rgba(255,255,255,0.06);
      margin-bottom: 0.9rem;
    }
    .profile-card .avatar img{width:100%;height:100%;object-fit:cover;display:block}
    .profile-card h3{margin:0;font-size:1.05rem}
    .profile-card p{margin:0;color:#cbd5e1;font-size:.94rem;text-align:center}
    .profile-stats{display:flex;gap:12px;margin-top:8px}
    .stat{display:flex;flex-direction:column;align-items:center}
    .stat .num{font-weight:800;color:#fff}
    .stat .label{font-size:.8rem;color:#cbd5e1}


    /* ---------- SLIDER WRAPPER & BACKGROUND ---------- */
    
  .slider-wrapper{
    padding:48px 0;
    /* layered background: gradient + subtle diagonal texture + radial vignette */
    background:
      radial-gradient(800px 400px at 10% 20%, rgba(255,138,41,0.05), transparent 5%),
      linear-gradient(180deg,var(--bg-1),var(--bg-2));
    position:relative;
  }
  .slider-wrapper::before{
    content:"";
    position:absolute;inset:0;
    background:repeating-linear-gradient(45deg, rgba(255,255,255,0.015) 0 2px, transparent 2px 14px);
    pointer-events:none;
    mix-blend-mode:overlay;
  }

  /* ---------- SLIDER LAYOUT: buttons OUTSIDE the row ---------- */
  .slider-container{
    max-width:1600px;
    margin:0 auto;
    padding:0 4%;
    display:flex;
    align-items:center;
    gap:16px;
  }

  .side-btn{
    background:linear-gradient(135deg,#ff8a29,#ff5e2b);
    border:0;color:#fff;padding:12px 14px;border-radius:10px;cursor:pointer;font-size:18px;
    box-shadow:0 10px 26px rgba(3,7,18,0.45);
    flex:0 0 auto;
  }
  .side-btn:active{transform:translateY(1px)}
  .side-btn[disabled]{opacity:.45;cursor:not-allowed}

  /* viewport masks the moving track */
  .slider-viewport{
    overflow:hidden;flex:1 1 auto;border-radius:12px;
    box-shadow:0 12px 32px rgba(2,6,23,0.5);background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);
  }

  .slider-track{
    display:flex;transition:transform .55s cubic-bezier(.2,.9,.3,1);
    will-change:transform;
    align-items:stretch;
  }

  /* 4 squares side-by-side (each slide takes 25% of viewport) */
  .slide{flex:0 0 25%;padding:10px;box-sizing:border-box}
  .slide-content{background:#071826;border-radius:10px;overflow:hidden}
  .slide img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,0.45)}

  /* subtle hover effect on single image */
  .slide img:hover{transform:scale(1.02);transition:transform .3s}

  /* smaller screens: show fewer slides responsively (but still keep loop working) */
  @media (max-width:980px){
    .slide{flex:0 0 25%} /* keep 4 on tablets if space allows */
  }
  @media (max-width:720px){
    .slide{flex:0 0 50%} /* show 2 squares on small screens for readability */
  }
  @media (max-width:440px){
    .slide{flex:0 0 100%} /* mobile: 1 at a time */
  }

    /* ---------- Main content container (almost full width) ---------- */
    .main-wrap{max-width:var(--container-max);margin:36px auto;padding:0 calc(var(--site-padding));}

    /* SUMMARY (key metrics + short) */
    .summary{
      display:flex;
      gap:2rem;
      align-items:stretch;
      flex-wrap:wrap;
      background:#fff;
      border-radius:12px;
      padding:22px;
      box-shadow:0 10px 26px rgba(2,6,23,0.06)
    }
    .summary .text{
      flex:1 1 420px}
    .summary h2{margin:0 0 10px;color:var(--accent)}
    .summary p{
      margin:0;
      
      text-align: justify;
    }
    .summaryContact{
      min-width:220px;
      display:block;
      justify-content:center;
      align-self:center;
    }
    .summary .metrics{display:flex;gap:18px;margin-top:14px;flex-wrap:wrap}
    .metric{background:#0b1220;color:#fff;padding:14px;border-radius:10px;min-width:120px;text-align:center}
    .metric .m-num{font-size:1.2rem;font-weight:800}
    .metric .m-label{font-size:.85rem;color:#cbd5e1;margin-top:6px}


    /* Skills Section */
.skills-section {
  padding: 3rem 0;
}
.skills-section h2 {
  text-align: left;
  margin-bottom: 2rem;
  color:var(--accent)
}
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}
.skill-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: transform 0.2s ease;
}
.skill-card:hover {
  transform: translateY(-5px);
}
.skill-card h3 {
  margin-bottom: 0.5rem;
  color: #000000;
  
}

    
    /* SERVICES 
    .services{margin-top:28px}
    .services h2{color:var(--accent);margin-bottom:18px}
    .service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
    .service-card{background:#fff;
      padding:18px;
      border-radius:12px;
      box-shadow:0 10px 26px rgba(2,6,23,0.05);
      min-height:140px;
      display:flex;
      flex-direction:column;
      gap:10px;
      transition: transform 0.2s ease;
    }
    .service-card:hover {
  transform: translateY(-5px);
}
    .service-card h3{margin:0}
    .service-card p{margin:0;color:var(--muted);flex:1}
    .service-card .learn{margin-top:10px;font-weight:800;color:var(--accent)}

    /* CALL TO ACTION 
    .cta{
      margin:36px 0 70px;padding:28px;border-radius:12px;background:linear-gradient(90deg, rgba(255,102,0,0.08), rgba(255,102,0,0.04));
      display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
      box-shadow:0 8px 22px rgba(2,6,23,0.04)
    }
    .cta .left{flex:1}
    .cta h3{margin:0;font-size:1.2rem}
    .cta p{margin:8px 0 0;color:var(--muted)}
    .cta .right{display:flex;gap:12px;align-items:center}
    @media (max-width:880px){ .hero-left{flex:1 1 100%}.hero-right{flex:1 1 100%}.profile-card{margin:0 auto} .cta{flex-direction:column;align-items:flex-start} .cta .right{width:100%}}
    @media (max-width:600px){ .slide{height:220px}.slider{height:220px}.profile-card{width:90%} .hero h1{font-size:1.7rem} }
  */