:root{
    --bg:#141414;          /* Netflix dark */
    --panel:#181818;       /* Card background */
    --muted:#a3a3a3;     
    --text:#f5f5f5;
    --accent:#e50914;      /* Netflix red */
    --accent-700:#b20710;
    --card:#1f1f1f;
    --radius:16px;
    --gap:1rem;
    --row-gap:1.25rem;
    --shadow:0 10px 30px rgba(0,0,0,.35);
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0; font-family:Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; 
    background:var(--bg); color:var(--text); line-height:1.4;
  }
  a{color:inherit; text-decoration:none}
  
  /* Top nav */
  .nav{
    position:sticky; top:0; z-index:50; backdrop-filter:saturate(120%) blur(6px);
    background:linear-gradient(180deg, rgba(0,0,0,.75), rgba(0,0,0,.0));
    display:flex; align-items:center; justify-content:space-between;
    padding:1rem clamp(1rem, 4vw, 3rem);
  }
  .brand{display:flex; align-items:center; gap:.6rem; font-weight:700; letter-spacing:.5px}
  .badge{display:inline-block; background:var(--accent); color:white; font-weight:700; 
    padding:.15rem .5rem; border-radius:8px; font-size:.9rem}
  .nav a.btn{padding:.55rem .9rem; background:#ffffff10; border:1px solid #ffffff1a; border-radius:10px}
  .nav a.btn:hover{background:#ffffff1f}
  
  /* Hero */
  .hero{
    min-height:64vh; display:grid; place-items:center; text-align:center; padding:5rem 1.25rem 2rem;
    background:radial-gradient(1200px 600px at 80% -10%, #e5091433, transparent 50%),
               radial-gradient(900px 500px at -20% 10%, #e5091444, transparent 45%);
  }
  .hero h1{font-size:clamp(2rem, 5vw, 3.5rem); margin:0 0 .75rem}
  .hero p{max-width:850px; margin:.5rem auto 1.25rem; color:#e9e9e9}
  .cta{display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap}
  .btn{border:0; background:var(--accent); color:white; padding:.85rem 1.1rem; border-radius:12px; font-weight:700; cursor:pointer}
  .btn.secondary{background:#ffffff10; border:1px solid #ffffff1f}
  .btn:hover{filter:brightness(1.05)}
  
  /* Rows */
  .section{padding:1.25rem clamp(1rem, 4vw, 3rem) 0}
  .row{position:relative; margin:0 0 2.25rem}
  .row h2{font-size:1.4rem; font-weight:700; margin:0 0 .75rem}
  .scroller{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(240px, 1fr); gap:var(--gap);
    overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:.75rem}
  .scroller::-webkit-scrollbar{height:10px}
  .scroller::-webkit-scrollbar-thumb{background:#2a2a2a; border-radius:8px}
  
  .card{
    background:var(--card); border-radius:var(--radius); padding:1rem; scroll-snap-align:start;
    position:relative; overflow:hidden; box-shadow:var(--shadow); 
    display:flex; flex-direction:column; justify-content:space-between; min-height:200px;
  }
  .card .tag{font-size:.75rem; color:#ffffffb0; background:#ffffff14; padding:.2rem .5rem; border-radius:999px; display:inline-block}
  .card h3{margin:.5rem 0 .25rem; font-size:1.05rem}
  .card p{color:#d6d6d6; font-size:.92rem; margin:.25rem 0 .75rem}
  .card .actions{display:flex; gap:.5rem; flex-wrap:wrap}
  .chip{font-size:.75rem; background:#262626; color:#ddd; padding:.25rem .5rem; border-radius:999px; border:1px solid #ffffff14}
  .card:hover{transform:translateY(-2px); transition:.2s ease}
  
  /* Gradient art on cards */
  .art{position:absolute; inset:auto -40% -40% auto; width:220px; height:220px; filter:blur(35px); opacity:.35;
    background:conic-gradient(from 120deg, #e50914, #8b0000, #e50914)}
  
  /* Two-column layout for About/Contact */
  .grid{display:grid; grid-template-columns:1.1fr 1fr; gap:var(--row-gap)}
  @media (max-width: 900px){ .grid{grid-template-columns:1fr} }
  
  .panel{background:var(--panel); border-radius:var(--radius); padding:1rem 1.1rem; box-shadow:var(--shadow)}
  .muted{color:var(--muted)}
  .list{display:flex; flex-wrap:wrap; gap:.5rem}
  
  footer{padding:2.5rem 1rem; text-align:center; color:#cfcfcf}
  /* Horizontal scroll buttons for Skills */
.scroll-btn{
    position:absolute; top:50%; transform:translateY(-50%);
    width:40px; height:40px; border-radius:999px; cursor:pointer;
    background:#ffffff14; color:#fff; border:1px solid #ffffff24;
    display:grid; place-items:center; backdrop-filter:blur(4px); z-index:10;
  }
  .scroll-btn:hover{ background:#ffffff25 }
  .scroll-btn.prev{ left:6px }
  .scroll-btn.next{ right:6px }
  
  /* Optional: visual hint when dragging */
  #skills .scroller.dragging{ cursor:grabbing }
  
  /* Horizontal scroll row */
.h-scroll {
  display: flex; gap: 14px; overflow-x: auto; padding: 6px 2px 10px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.h-scroll::-webkit-scrollbar { height: 8px; }
.h-scroll::-webkit-scrollbar-thumb { border-radius: 8px; }

.avatar{
  width:120px; height:120px; object-fit:cover; border-radius:50%;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* Certificate card */
/* .cert-card {
  min-width: 240px; max-width: 240px; flex: 0 0 auto;
  border: 1px solid #e6e6e6; border-radius: 14px; padding: 12px;
  background: #fff; scroll-snap-align: start;
  transition: transform .15s, box-shadow .15s; cursor: pointer;
}
.cert-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.cert-banner { width: 100%; height: 120px; object-fit: contain; background: #fafafa; border-radius: 10px; }
.cert-title { margin: 10px 0 6px; font-weight: 600; line-height: 1.2; }
.cert-meta { font-size: .9rem; color: #666; }
.badge { display:inline-block; font-size:.75rem; padding:2px 8px; border-radius:999px; border:1px solid #e6e6e6; margin-top:6px; }
.cert-card.pending { opacity:.6; cursor: default; }
.cert-card.pending .badge { border-style: dashed; } */

/*For Mobile*/
/* ===== Mobile improvements ===== */
@media (max-width: 700px){
  .nav{ padding:.75rem 1rem; }
  .brand{ font-size:1rem; }
  .nav .links{ display:flex; gap:.5rem; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .nav a.btn{ padding:.5rem .7rem; font-size:.9rem; white-space:nowrap; }

  .hero{ min-height:auto; padding:3rem 1rem 1.25rem; }
  .hero p{ padding:0 .25rem; }

  .section{ padding:1rem 1rem 0; }
  .row{ margin-bottom:1.5rem; }

  .scroller{ grid-auto-columns:minmax(88vw, 1fr); gap:.8rem; }
  .card{ min-height:auto; padding:.9rem; }

  .scroll-btn{ display:none; }
  .panel{ padding:.9rem; }
  .chip{ padding:.3rem .6rem; }
  .card .actions .btn{ padding:.7rem .9rem; }
}

@media (max-width: 380px){
  .hero h1{ font-size:clamp(1.6rem, 8vw, 2rem); }
  .nav a.btn{ font-size:.85rem; }
}
@media (max-width: 700px){
  /* Stack nav on small screens and prevent button overlap */
  .nav{ flex-wrap: wrap; align-items:flex-start; }
  .nav .links{ width:100%; margin-top:.5rem; padding-bottom:.25rem; }
  .nav .links a.btn{ flex:0 0 auto; display:inline-block; }
}