:root{
  --bg:#0f1113;            /* page background */
  --card:#141518;          /* card / panel */
  --muted:#bdbdbd;         /* secondary text */
  --accent:#f39c12;        /* warm orange accent */
  --accent-2:#ff6a00;      /* gradient second color */
  --glass: rgba(255,255,255,0.03);
  --glass-strong: rgba(255,255,255,0.05);
  --radius: 12px;
  --max-width: 1100px;
}

/* Reset + base */
*{margin:0;padding:0;box-sizing:border-box;font-family: "Poppins",sans-serif;scroll-behavior:smooth}
html,body{height:100%}
body{
  background: radial-gradient(1200px 600px at 10% 10%, rgba(243,156,18,0.06), transparent 10%),
              radial-gradient(1000px 500px at 90% 90%, rgba(243,156,18,0.03), transparent 10%),
              var(--bg);
  color:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

/* Container helpers */
.container{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 24px;
}

/* Header / Navbar */
header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(20,20,20,0.6), rgba(20,20,20,0.35));
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:72px;
  gap:16px;
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 20px;
}

/* logo */
.logo{
  font-size:20px;
  font-weight:700;
  color:var(--accent);
  letter-spacing:0.2px;
}

/* nav */
nav{
  display:flex;
  align-items:center;
  gap:24px;
}
nav ul{
  list-style:none;
  display:flex;
  gap:18px;
  align-items:center;
}
nav a{
  color:#e6e6e6;
  text-decoration:none;
  font-weight:500;
  padding:8px 10px;
  border-radius:8px;
  transition:all .18s ease;
  font-size:15px;
}
nav a:hover, nav a:focus{
  color:#111;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(243,156,18,0.12);
}

/* hamburger for mobile */
.menu-toggle{
  display:none;
  background:transparent;
  border:none;
  cursor:pointer;
  padding:8px;
  border-radius:8px;
}
.menu-toggle .bar{
  display:block;
  width:22px;
  height:2px;
  background:#fff;
  margin:4px 0;
  transition:all .2s ease;
}

/* Home Section */
#home{
  min-height:90vh;
  display:flex;
  align-items:center;
  gap:40px;
  padding-top:100px; /* header space */
  padding-bottom:60px;
}
.home-inner{
  display:flex;
  align-items:center;
  gap:48px;
  width:100%;
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 20px;
}
.home-content{
  flex:1;
}
.home-content h1{
  font-size:38px;
  line-height:1.05;
  margin-bottom:12px;
  font-weight:700;
}
.home-content h1 span{
  color:var(--accent);
}
.home-content p{
  color:var(--muted);
  font-size:18px;
  margin-bottom:18px;
}

/* profile image / card */
.home-image{
  width:260px;
  min-width:200px;
  display:flex;
  justify-content:center;
  align-items:center;
}
.home-image .avatar{
  width:200px;
  height:200px;
  border-radius:50%;
  overflow:hidden;
  border:6px solid transparent;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  padding:4px;
  box-shadow:0 10px 40px rgba(0,0,0,0.6);
}
.home-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:50%;
  background:var(--card);
}

/* Section general */
section{
  padding:72px 0;
}
section .container{padding:0 20px;}

h2{
  text-align:center;
  font-size:30px;
  margin-bottom:18px;
  color:var(--accent);
}

/* About */
#about p{
  max-width:900px;
  margin:0 auto;
  color:var(--muted);
  font-size:17px;
  line-height:1.7;
  background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
  padding:22px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.03);
}

/* Skills */
#skills ul{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:14px;
}
#skills li{
  background:linear-gradient(180deg,var(--card), rgba(255,255,255,0.01));
  padding:10px 18px;
  border-radius:999px;
  color:var(--muted);
  font-weight:600;
  border:1px solid rgba(255,255,255,0.03);
  transition:transform .18s ease, box-shadow .18s ease;
}
#skills li:hover{
  transform:translateY(-6px);
  box-shadow:0 10px 30px rgba(0,0,0,0.6);
  color:#fff;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
}

/* Projects */
.projects-container{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:16px;
  margin-top:18px;
}
.project{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  padding:18px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.03);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.project h3{color:var(--accent); margin-bottom:8px;}
.project p{color:var(--muted); font-size:15px;}
.project:hover{
  transform:translateY(-8px) scale(1.01);
  box-shadow: 0 18px 50px rgba(0,0,0,0.6);
  border-color: rgba(243,156,18,0.25);
}

/* Footer with social handles */
footer{
  margin-top:30px;
  padding:32px 0;
  background: linear-gradient(0deg, rgba(255,255,255,0.01), transparent);
  border-top:1px solid rgba(255,255,255,0.03);
}

/* Keep footer-inner visible for overflow (prevents ancestor clipping of horizontal scroll) */
.footer-inner{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  /* ensure children can overflow horizontally if needed */
  overflow: visible;
}

/* left text */
.footer-left{color:var(--muted); font-size:15px}

/* SOCIAL - updated to support horizontal scrolling on small screens */
.social-footer{
  display:flex;
  gap:12px;
  align-items:center;

  /* Horizontal scroll when items overflow */
  overflow-x:auto;
  -webkit-overflow-scrolling: touch; /* momentum scrolling on iOS */
  scrollbar-width: thin; /* Firefox */

  /* Optional: enable scroll snapping for nicer UX */
  scroll-snap-type: x proximity;
  padding-bottom:6px; /* space for scrollbar on some browsers */
}

/* make each link non-shrinking so they stay inline and scroll instead of wrapping */
.social-footer a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:10px;
  text-decoration:none;
  color:#fff;
  background:linear-gradient(90deg, rgba(255,255,255,0.02), transparent);
  border:1px solid rgba(255,255,255,0.03);
  transition:all .18s ease;
  font-weight:600;

  flex: 0 0 auto;    /* << important: prevents shrinking so horizontal scroll works */
  scroll-snap-align: center; /* for snapping */
}

/* hover */
.social-footer a:hover{
  background: linear-gradient(90deg,var(--accent),var(--accent-2));
  box-shadow:0 12px 30px rgba(243,156,18,0.12);
  transform:translateY(-4px);
}

/* custom scrollbar cosmetics (WebKit) */
.social-footer::-webkit-scrollbar{ height:8px; }
.social-footer::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.06);
  border-radius: 6px;
}

/* ---------- New: Horizontal lists (Articles & Videos) ---------- */
/* shared horizontal container */
.horizontal-list{
  display:flex;
  gap:16px;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  padding:12px 8px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

/* card anchor wrapper to ensure full-card click */
.card-link{
  text-decoration:none;
  color:inherit;
  flex: 0 0 auto; /* prevents shrinking; makes cards scrollable horizontally */
  scroll-snap-align: center;
  max-width:320px;
}

/* card style */
.card{
  width:320px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.035);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease;
  min-height:170px;
}

/* thumbnail area */
.card-thumb{
  height:140px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  position:relative;
}

/* play badge for videos */
.video-card .card-thumb .play-badge,
.play-badge{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:54px;
  height:54px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:20px;
  background: linear-gradient(90deg,var(--accent),var(--accent-2));
  box-shadow:0 10px 30px rgba(243,156,18,0.12);
}

/* card body text */
.card-body{
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1;
}
.card h3{
  font-size:16px;
  margin:0;
  color:var(--accent);
}
.card .muted{
  font-size:13px;
  color:var(--muted);
  line-height:1.35;
}

/* hover / focus */
.card:hover, .card:focus{
  transform:translateY(-8px);
  box-shadow:0 18px 60px rgba(0,0,0,0.6);
  border-color: rgba(243,156,18,0.22);
}

/* make sure anything inside the anchor doesn't show default focus outline - handle on anchor */
.card-link:focus{ outline: 2px solid rgba(243,156,18,0.14); outline-offset:4px; border-radius:12px; }

/* responsive adjustments */
@media (max-width:900px){
  .home-inner{flex-direction:column-reverse; text-align:center; gap:20px}
  nav ul{display:none; position:absolute; top:72px; right:20px; background:var(--card); padding:12px; border-radius:10px; flex-direction:column; min-width:200px; border:1px solid rgba(255,255,255,0.03)}
  nav.open ul{display:flex}
  .menu-toggle{display:inline-flex}
  .logo{font-size:18px}
  .home-image{width:220px}

  /* horizontal lists: make cards a bit smaller on narrow screens */
  .horizontal-list{ gap:12px; padding:10px 6px; }
  .card, .card-link{ width: 84vw; max-width:300px; }
  .card-thumb{ height:170px; }
  .card-body{ padding:12px; }
}

/* Accessibility focus */
a:focus{outline:2px solid rgba(243,156,18,0.22); outline-offset:3px; border-radius:6px}