* { margin:0; padding:0; box-sizing:border-box; }
body, p, a, span { letter-spacing:0; }
h1,h2,h3,h4,h5,h6 { letter-spacing:-1px; }

body {
  font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight:400;
  background:#0a0a0a;
  color:#fff;
  min-height:100vh;
  overflow-x:hidden;
  scroll-behavior:smooth;
}

.ambient {
  position:fixed; top:0; left:0; width:100%; height:100%;
  background: radial-gradient(circle at center, rgba(247,194,12,0.15) 0%, rgba(10,10,10,1) 50%);
  z-index:0; pointer-events:none;
}

header {
  position:fixed; top:0; width:100%; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(10,10,10,0.6);
  border-bottom:1px solid rgba(255,255,255,0.05);
  display:flex; justify-content:space-between; align-items:center;
  padding:1rem 2rem;
  animation: fadeInDown 1s ease-out forwards;
}

header .brand { font-weight:900; font-size:1.2rem; color:#F7C20C; text-shadow:0 0 8px rgba(247,194,12,0.6); }
header nav a { font-weight:400; margin:0 1rem; color:#fff; text-decoration:none; font-size:0.95rem; position:relative; }
header nav a::after { content:''; position:absolute; bottom:-3px; left:0; width:0%; height:2px; background: linear-gradient(90deg, #F7C20C, #B38B00); transition: width 0.3s; }
header nav a:hover::after { width:100%; }

/* Center all page content except header */
.container {
  max-width:1100px;
  margin:0 auto;
  padding:100px 1.5rem 60px;
  z-index:1;
  position:relative;

  display: flex;
  flex-direction: column;
  align-items: center;
}

section {
  margin-bottom:60px;

  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Section headers */
.section-header {
  font-weight:900; text-align:center; margin-bottom:1rem;
  font-size:2rem;
  background: linear-gradient(180deg, #F7C20C 0%, #B38B00 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* Cards */
.card { 
  font-weight:400; 
  background: rgba(255,255,255,0.02); 
  border:1px solid rgba(255,255,255,0.08); 
  border-radius:16px; 
  padding:1.5rem; 
  backdrop-filter: blur(8px); 
  line-height:1.45; 

  /* Center contents */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;

  /* Animated yellow pulse */
  box-shadow:0 0 15px rgba(247,194,12,0.05); 
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; 
  animation: pulseGlow 3s ease-in-out infinite;
}
.card:hover { 
  transform: translateY(-3px); 
  box-shadow:0 0 25px rgba(247,194,12,0.2); 
  background: rgba(247,194,12,0.05); 
}

/* Smooth yellow glow animation */
@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 10px rgba(247,194,12,0.05);
    border-color: rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
  }
  50% {
    box-shadow: 0 0 30px rgba(247,194,12,0.35);
    border-color: rgba(247,194,12,0.5);
    background: rgba(247,194,12,0.08);
  }
  100% {
    box-shadow: 0 0 10px rgba(247,194,12,0.05);
    border-color: rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
  }
}

/* About section bigger */
#about .card { 
  font-size:1.25em; 
  padding:2rem; 
  border-radius:20px; 
  box-shadow:0 0 25px rgba(247,194,12,0.1); 
}

.about-header {
  font-weight:900; text-align:center; margin-bottom:1rem;
  font-size:3rem;
  background: linear-gradient(180deg, #F7C20C 0%, #B38B00 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* Other sections slightly smaller */
section:not(#about) .card { font-size:1rem; padding:1rem 1.5rem; }

/* Skills Spider */
.skills-spider {
  position:relative;
  height:180px;
  width:100%;
}
.skills-spider .section-header {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:10; font-size:2rem;
  background: linear-gradient(180deg, #F7C20C 0%, #B38B00 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  color:transparent;
}
.skills-spider .skill {
  position:absolute; padding:0.6rem 1.2rem; font-weight:400; border-radius:12px;
  background: linear-gradient(90deg, #F7C20C, #B38B00);
  color:#000; cursor:pointer; text-align:center;
  transform:translate(-50%,-50%);
  font-size:1rem;
}
.skills-spider .skill:nth-child(2) { top:25%; left:35%; }
.skills-spider .skill:nth-child(3) { top:50%; left:30%; }
.skills-spider .skill:nth-child(4) { top:75%; left:35%; }
.skills-spider .skill:nth-child(5) { top:25%; left:65%; }
.skills-spider .skill:nth-child(6) { top:50%; left:70%; }
.skills-spider .skill:nth-child(7) { top:75%; left:65%; }

/* Work gallery */
.work-grid { overflow:hidden; position:relative; width:100vw; left:50%; transform:translateX(-50%); margin-bottom:40px; }
.work-scroll { display:flex; gap:1rem; animation: scrollWork 25s linear infinite; }
.work-scroll .card {
  flex:0 0 auto;
  width:350px;
  height:50vh;
  border-radius:16px;
  position:relative;
  overflow:hidden;
  display:flex;
  justify-content:center;
  align-items:center;
  border:1px solid rgba(255,255,255,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.work-scroll .card:hover { transform: translateY(-3px); box-shadow:0 0 18px rgba(247,194,12,0.12); }
.work-scroll .card img {
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:16px;
  filter: grayscale(100%);
  transition: filter 0.5s ease;
}
.work-scroll .card h3 {
  position:absolute;
  bottom:7%;
  left:50%;
  transform:translateX(-50%);
  font-weight:900;
  font-size:1.4rem;
  text-align:center;
  background: linear-gradient(180deg,#F7C20C 0%,#B38B00 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  transition: opacity 0.5s ease;
}
.work-scroll .card:hover img { filter: grayscale(0%); }
.work-scroll .card:hover h3 { opacity:0; }

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

/* Contact section */
.contact-grid { display:flex; justify-content:center; gap:2rem; flex-wrap:wrap; margin-top:2rem; }
.contact-card { 
  flex:1 1 250px; max-width:300px; 
  background: rgba(255,255,255,0.05); 
  border:1px solid rgba(255,255,255,0.08); 
  border-radius:16px; 
  padding:1.5rem; text-align:center; 
  backdrop-filter: blur(8px); 
  box-shadow:0 0 15px rgba(247,194,12,0.05); 
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; 
}
.contact-card:hover { transform: translateY(-5px); box-shadow:0 0 25px rgba(247,194,12,0.2); background: rgba(247,194,12,0.05); }
.contact-icon { font-size:2rem; margin-bottom:0.5rem; }
.contact-card h3 { font-weight:900; margin-bottom:0.5rem; }
.contact-card p a { color:#F7C20C; text-decoration:none; font-weight:400; }
.contact-card p a:hover { text-decoration:underline; }

/* Fade-in animation */
.fade-in { opacity:0; transform:translateY(20px); transition:all 0.8s ease; }
.fade-in.visible { opacity:1; transform:translateY(0); }

/* Responsive adjustments */
@media(max-width:768px){
  .container { padding:80px 1rem 40px; }
  section { margin-bottom:40px; }
  .work-scroll .card { min-width:250px; max-height:40vh; }
  .skills-spider {
    height:auto; display:flex; flex-direction:column; align-items:center; gap:0.5rem;
  }
  .skills-spider .section-header { position:static; transform:none; margin-bottom:1rem; }
  .skills-spider .skill { position:static; transform:none; font-size:1rem; }
  .contact-grid { flex-direction: column; align-items:center; gap:1rem; }
}
@media(min-width:1600px){ header nav { display:none; } }