/* Base styles */
:root {
  --bg: #0a0f17;
  --bg-alt: #121b29;
  --accent: #4f9cf9;
  --accent-grad: linear-gradient(135deg,#4f9cf9,#4361ee 60%,#3a0ca3);
  --text: #e6edf5;
  --text-dim: #96a2b3;
  --border: rgba(255,255,255,0.08);
  --radius-sm: 6px;
  --radius: 14px;
  --max-width: 1080px;
  --focus: 0 0 0 3px rgba(79,156,249,.35);
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

* { box-sizing: border-box; }

html,body { 
  padding:0; 
  margin:0; 
  color:var(--text); 
  font-family:inherit; 
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

body { 
  line-height:1.55;
  background: 
    /* Main dark gradient base */
    linear-gradient(135deg, #050a13 0%, #0f1419 25%, #1a1f2e 50%, #0a0f17 100%),
    /* Large circular gradient - top right */
    radial-gradient(circle at 85% 15%, rgba(79, 156, 249, 0.15) 0%, rgba(79, 156, 249, 0.05) 25%, transparent 50%),
    /* Medium circular gradient - center left */
    radial-gradient(circle at 20% 60%, rgba(67, 97, 238, 0.12) 0%, rgba(67, 97, 238, 0.03) 30%, transparent 45%),
    /* Small circular gradient - bottom right */
    radial-gradient(circle at 75% 85%, rgba(58, 12, 163, 0.18) 0%, rgba(58, 12, 163, 0.06) 20%, transparent 40%),
    /* Subtle mesh pattern overlay */
    radial-gradient(circle at 40% 30%, rgba(79, 156, 249, 0.08) 0%, transparent 25%),
    radial-gradient(circle at 60% 70%, rgba(79, 156, 249, 0.06) 0%, transparent 20%),
    /* Base dark color */
    #0a0f17;
  background-attachment: fixed;
  position: relative;
}

/* Add subtle animated floating particles effect */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  background-image: 
    radial-gradient(circle at 25% 25%, rgba(79, 156, 249, 0.03) 1px, transparent 1px),
    radial-gradient(circle at 75% 75%, rgba(67, 97, 238, 0.02) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(79, 156, 249, 0.01) 1px, transparent 1px);
  background-size: 100px 100px, 150px 150px, 200px 200px;
  animation: float 20s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(-10px) rotate(1deg); }
  66% { transform: translateY(5px) rotate(-1deg); }
}

img { max-width:100%; display:block; }
a { color:var(--accent); text-decoration:none; }
a:hover,a:focus { text-decoration:underline; }

main { width:100%; }

/* Layout */
.container { width:100%; max-width:var(--max-width); margin:0 auto; padding:0 1.4rem; }
.flex { display:flex; }
.flex-between { display:flex; justify-content:space-between; align-items:center; }
.grid { display:grid; }

/* Header */
.site-header { 
  position:sticky; 
  top:0; 
  backdrop-filter: blur(16px); 
  background:rgba(10,15,23,0.85); 
  border-bottom:1px solid var(--border); 
  z-index:50;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.navbar { height:64px; }
.brand { 
  font-weight:600; 
  font-size:1.1rem; 
  letter-spacing:0.5px; 
  display: flex; 
  align-items: center; 
  gap: 0.5rem; 
}
.brand img { 
  height: 28px; 
  width: auto; 
  flex-shrink: 0; 
}
.nav-links { list-style:none; margin:0; padding:0; display:flex; gap:1rem; align-items:center; }
.nav-links a { padding:.55rem .9rem; border-radius:var(--radius-sm); font-size:.9rem; font-weight:500; color:var(--text-dim); transition:.25s; }
.nav-links a:hover,.nav-links a:focus,.nav-links a.active { background:var(--bg-alt); color:var(--text); text-decoration:none; }

.cta-linkedin { display:inline-flex; align-items:center; gap:.45rem; background:var(--accent-grad); color:#fff !important; padding:.55rem .95rem; border-radius:var(--radius-sm); font-weight:600; font-size:.85rem; letter-spacing:.5px; box-shadow:0 4px 18px -4px rgba(79,156,249,.45),0 2px 4px -1px rgba(0,0,0,.4); border:1px solid #2e5fa8; }
.cta-linkedin:hover { filter:brightness(1.08); }
.cta-linkedin svg { width:16px; height:16px; }

.cta-youtube { display:inline-flex; align-items:center; gap:.45rem; background:linear-gradient(135deg, #FF0000 0%, #CC0000 100%); color:#fff !important; padding:.55rem .95rem; border-radius:var(--radius-sm); font-weight:600; font-size:.85rem; letter-spacing:.5px; box-shadow:0 4px 18px -4px rgba(255,0,0,.45),0 2px 4px -1px rgba(0,0,0,.4); border:1px solid #CC0000; }
.cta-youtube:hover { filter:brightness(1.08); }
.cta-youtube svg { width:16px; height:16px; }

/* Hero placeholder */
.hero { padding:6rem 0 4rem; text-align:center; }
.hero h1 { 
  font-size:clamp(2.3rem,5.5vw,3.6rem); 
  line-height:1.05; 
  margin:0 0 1.2rem; 
  background:var(--accent-grad); 
  -webkit-background-clip:text; 
  background-clip:text;
  color:transparent; 
}
.hero p { max-width:760px; margin:0 auto 2rem; font-size:1.05rem; color:var(--text-dim); }

/* Sections */
.section { padding:4.5rem 0; position:relative; }
.section-header { margin:0 0 2.4rem; }
.section-kicker { font-size:.7rem; letter-spacing:2px; text-transform:uppercase; font-weight:600; color:var(--accent); display:block; margin-bottom:.6rem; }
.section-title { margin:0; font-size:clamp(1.8rem,4.2vw,2.6rem); line-height:1.1; }
.section-description { margin:1rem 0 0; color:var(--text-dim); max-width:640px; }

/* Project cards */
.projects-grid { --cols:3; display:grid; gap:1.8rem; grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr)); }
.project-card { 
  position:relative; 
  background:linear-gradient(145deg, rgba(18,27,41,0.85), rgba(13,20,31,0.9)); 
  border:1px solid var(--border); 
  border-radius:var(--radius); 
  padding:1.3rem 1.3rem 1.4rem; 
  display:flex; 
  flex-direction:column; 
  gap:1rem; 
  box-shadow:0 8px 32px -8px rgba(79,156,249,.15), 0 4px 16px -4px rgba(79,156,249,.08), 0 0 0 1px rgba(79,156,249,.06); 
  transition:all .4s ease; 
  overflow:hidden;
  backdrop-filter: blur(10px);
}
.project-card:before { 
  content:""; 
  position:absolute; 
  inset:0; 
  background:radial-gradient(circle at 30% 15%, rgba(79,156,249,.15), transparent 70%); 
  opacity:0; 
  transition:opacity .5s ease; 
}
.project-card:after {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 70% 85%, rgba(67,97,238,.08), transparent 50%);
  opacity:0;
  transition:opacity .5s ease;
}
.project-card:hover { 
  transform:translateY(-6px); 
  border-color:rgba(79,156,249,.5); 
  background:linear-gradient(145deg, rgba(25,40,65,0.9), rgba(20,30,50,0.95));
  box-shadow:
    0 20px 60px -8px rgba(79,156,249,.25), 
    0 8px 32px -4px rgba(79,156,249,.15), 
    0 4px 16px -2px rgba(79,156,249,.1),
    0 0 0 1px rgba(79,156,249,.2);
}
.project-card:hover:before { opacity:1; }
.project-card:hover:after { opacity:1; }
.project-title { margin:0; font-size:1.05rem; letter-spacing:.3px; }
.project-meta { font-size:.65rem; letter-spacing:1.2px; font-weight:600; text-transform:uppercase; color:var(--accent); }
.project-desc { margin:0; font-size:.85rem; line-height:1.5; color:var(--text-dim); }
.project-actions { margin-top:auto; display:flex; gap:.6rem; }
.button { 
  --btn-bg:var(--bg-alt); 
  appearance:none; 
  border:1px solid var(--border); 
  background:var(--btn-bg); 
  color:var(--text); 
  border-radius:var(--radius-sm); 
  font-size:.7rem; 
  letter-spacing:1.2px; 
  font-weight:600; 
  padding:.55rem .9rem; 
  text-transform:uppercase; 
  display:inline-flex; 
  align-items:center; 
  gap:.4rem; 
  cursor:pointer; 
  transition:all .3s ease; 
  text-decoration:none;
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}
.button:before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, transparent, rgba(79,156,249,.1), transparent);
  transform: translateX(-100%);
  transition: transform .6s ease;
}
.button:hover:before {
  transform: translateX(100%);
}
.button:hover { 
  background:rgba(28,39,53,.8); 
  border-color:rgba(79,156,249,.4); 
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.button.outline { background:transparent; }
.button.outline:hover { 
  background:rgba(20,33,49,.6); 
  border-color:rgba(79,156,249,.3);
}

/* Contact */
.contact-grid { display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.contact-card { 
  position:relative; 
  background:linear-gradient(145deg, rgba(18,27,41,0.85), rgba(13,20,31,0.9)); 
  border:1px solid var(--border); 
  border-radius:var(--radius); 
  padding:1.5rem 1.4rem 1.6rem; 
  display:flex; 
  flex-direction:column; 
  gap:1rem; 
  box-shadow:0 8px 32px -8px rgba(79,156,249,.15), 0 4px 16px -4px rgba(79,156,249,.08), 0 0 0 1px rgba(79,156,249,.06); 
  transition:all .4s ease; 
  overflow:hidden;
  backdrop-filter: blur(10px);
}
.contact-card:before { 
  content:""; 
  position:absolute; 
  inset:0; 
  background:radial-gradient(circle at 30% 15%, rgba(79,156,249,.15), transparent 70%); 
  opacity:0; 
  transition:opacity .5s ease; 
}
.contact-card:after {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 70% 85%, rgba(67,97,238,.08), transparent 50%);
  opacity:0;
  transition:opacity .5s ease;
}
.contact-card:hover { 
  transform:translateY(-6px); 
  border-color:rgba(79,156,249,.5); 
  background:linear-gradient(145deg, rgba(25,40,65,0.9), rgba(20,30,50,0.95));
  box-shadow:
    0 20px 60px -8px rgba(79,156,249,.25), 
    0 8px 32px -4px rgba(79,156,249,.15), 
    0 4px 16px -2px rgba(79,156,249,.1),
    0 0 0 1px rgba(79,156,249,.2);
}
.contact-card:hover:before { opacity:1; }
.contact-card:hover:after { opacity:1; }
.contact-card h3 { margin:0 0 .6rem; font-size:1rem; }
.contact-card p { margin:0; font-size:.85rem; color:var(--text-dim); }

/* Enhanced Footer */
.site-footer { 
  margin-top: 4rem; 
  border-top: 1px solid rgba(79, 156, 249, 0.2); 
  background: linear-gradient(145deg, rgba(8, 15, 26, 0.95), rgba(12, 20, 31, 0.9));
  backdrop-filter: blur(10px);
  padding: 2rem 0; 
  font-size: 0.85rem; 
  color: var(--text-dim);
}

.footer-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  gap: 2rem;
}

.footer-left {
  flex: 0 0 auto;
}

.footer-middle {
  flex: 1;
  display: flex;
  justify-content: center;
}

.footer-nav {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-nav a {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.3s ease;
  padding: 0.5rem 0;
}

.footer-nav a:hover,
.footer-nav a.active {
  color: #4f9cf9;
}

.footer-right {
  flex: 0 0 auto;
  display: flex;
  gap: 1rem;
  align-items: center;
}

.footer-btn {
  padding: 0.6rem 1.2rem;
  background: rgba(79, 156, 249, 0.1);
  border: 1px solid rgba(79, 156, 249, 0.3);
  color: #4f9cf9;
  text-decoration: none;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.footer-btn:hover {
  background: rgba(79, 156, 249, 0.2);
  border-color: rgba(79, 156, 249, 0.5);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(79, 156, 249, 0.2);
}

.footer-btn.youtube {
  background: rgba(255, 0, 0, 0.1);
  border: 1px solid rgba(255, 0, 0, 0.3);
  color: #ff0000;
}

.footer-btn.youtube:hover {
  background: rgba(255, 0, 0, 0.2);
  border-color: rgba(255, 0, 0, 0.5);
  color: #fff;
  box-shadow: 0 4px 12px rgba(255, 0, 0, 0.2);
}

.back-to-top {
  padding: 0.5rem 0.8rem;
  background: rgba(79, 156, 249, 0.15);
  border: 1px solid rgba(79, 156, 249, 0.4);
  color: #4f9cf9;
  text-decoration: none;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.back-to-top:hover {
  background: rgba(79, 156, 249, 0.25);
  border-color: rgba(79, 156, 249, 0.6);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(79, 156, 249, 0.3);
}

/* Responsive footer */
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 0 1rem;
  }
  
  .footer-nav {
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .footer-right {
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .footer-btn {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
  }
  
  .back-to-top {
    padding: 0.4rem 0.7rem;
    font-size: 0.7rem;
  }
}

/* Markdown content styling */
.prose { max-width:780px; }
.prose h1,.prose h2,.prose h3 { line-height:1.15; }
.prose h1 { font-size:2.2rem; }
.prose h2 { font-size:1.5rem; margin-top:2.4rem; }
.prose p { color:var(--text-dim); }
.prose a { color:var(--accent); }

/* Responsive tweaks */
@media (max-width:820px){
  .hero { padding:5rem 0 3rem; }
  .section { padding:3.5rem 0; }
}
@media (max-width:540px){
  .navbar { height:58px; }
  .nav-links { gap:.4rem; }
  .nav-links a { font-size:.75rem; padding:.5rem .65rem; }
  .cta-linkedin { display:none; }
  .cta-youtube { display:none; }
  .hero h1 { font-size:2.3rem; }
  
  /* Adjust background for mobile */
  body::before {
    animation-duration: 30s;
  }
}

/* Additional tech enhancements */
.section-kicker {
  position: relative;
}
.section-kicker:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

/* Subtle glow effects for interactive elements */
.nav-links a:hover,
.nav-links a:focus {
  box-shadow: 0 0 10px rgba(79,156,249,.2);
}

.cta-linkedin:hover {
  box-shadow: 0 4px 20px rgba(79,156,249,.3);
}

/* Filter Buttons Styles */
.filter-section {
  border-bottom: 1px solid rgba(79, 156, 249, 0.2);
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
}

.filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  align-items: center;
}

.filter-btn {
  background: rgba(15, 20, 25, 0.8);
  border: 1px solid rgba(79, 156, 249, 0.3);
  color: #ccc;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  text-transform: capitalize;
}

.filter-btn:hover {
  background: rgba(79, 156, 249, 0.1);
  border-color: rgba(79, 156, 249, 0.5);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(79, 156, 249, 0.2);
}

.filter-btn.active {
  background: rgba(79, 156, 249, 0.2);
  border-color: rgba(79, 156, 249, 0.6);
  color: #fff;
  box-shadow: 0 2px 8px rgba(79, 156, 249, 0.3);
}

.filter-btn.active:hover {
  background: rgba(79, 156, 249, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(79, 156, 249, 0.4);
}

/* Responsive filter buttons */
@media (max-width: 768px) {
  .filter-buttons {
    gap: 0.5rem;
  }
  
  .filter-btn {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
  }
}

/* Enhanced focus states for accessibility */
.button:focus,
.nav-links a:focus {
  outline: none;
  box-shadow: var(--focus);
}

/* Smooth page transitions */
* {
  transition: background-color 0.3s ease, border-color 0.3s ease;
}