/* Variables */
:root {
    --bg-dark: #0A0C06;
    --bg-light: #111211;
    --accent: #FFDE59;
    --text-light: #E8E5DE;
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Roboto', sans-serif;
    --transition: 0.4s ease;
  }
  
  /* Reset */
  * { margin:0; padding:0; box-sizing:border-box; }
  body { background:var(--bg-dark); color:var(--text-light); font-family:var(--font-body); overflow-x:hidden; }
  a { color:var(--accent); text-decoration:none; }
  
  /* Navbar */
  .navbar { position:fixed; top:0; width:100%; background:rgba(0,0,0,0.8); backdrop-filter:blur(6px); z-index:100; }
  .nav-container { display:flex; align-items:center; justify-content:space-between; max-width:1200px; margin:auto; padding:1rem; }
  .brand { display:flex; align-items:center; }
  .brand-logo { height:80px; margin-right:0.5rem; }
  .brand-text { font-family:var(--font-heading); font-size:1.8rem; }
  .nav-toggle { display:none; }
  .nav-menu { list-style:none; display:flex; }
  .nav-menu li { margin:0 1rem; }
  .nav-menu a { position:relative; font-weight:500; }
  .nav-menu a::after { content:''; position:absolute; width:0; height:2px; background:var(--accent); left:0; bottom:-4px; transition:width .3s; }
  .nav-menu a:hover::after { width:100%; }
  .lang-switch .lang-btn { background:none; border:2px solid var(--accent); color:var(--accent); padding:0.3rem 0.6rem; margin-left:0.5rem; border-radius:4px; cursor:pointer; transition:var(--transition); }
  .lang-switch .active, .lang-switch .lang-btn:hover { background:var(--accent); color:var(--bg-dark); }
  
  @media(max-width:768px) {
    .nav-toggle { display:flex; flex-direction:column; justify-content:space-around; width:30px; height:25px; background:none; border:none; cursor:pointer; }
    .nav-toggle span { display:block; height:3px; background:var(--accent); }
    .nav-menu { position:absolute; top:100%; left:0; right:0; background:var(--bg-light); flex-direction:column; max-height:0; overflow:hidden; transition:max-height .3s ease; }
    .nav-menu.open { max-height:300px; }
    .nav-menu li { margin:1rem 0; text-align:center; }
  }
  
  /* Hero */
  .hero { position:relative; height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; background:linear-gradient(135deg, rgba(10,12,6,0.8), rgba(10,12,6,0.8)), url('https://source.unsplash.com/1920x1080/?cyberpunk,code') center/cover no-repeat; overflow:hidden; }
  .particles { position:absolute; inset:0; background:url('https://www.transparenttextures.com/patterns/connected.png'); mix-blend-mode:overlay; }
  .hero-inner { position:relative; z-index:1; max-width:800px; }
  .glitch { font-family:var(--font-heading); font-size:4rem; color:var(--accent); position:relative; }
  .glitch::before, .glitch::after { content:attr(data-text); position:absolute; top:0; left:0; width:100%; }
  .glitch::before { left:2px; text-shadow:-2px 0 var(--accent); clip-path:polygon(0 2%,100% 2%,100% 15%,0 15%); animation:glitchTop .5s infinite; }
  .glitch::after { left:-2px; text-shadow:2px 0 var(--accent); clip-path:polygon(0 85%,100% 85%,100% 100%,0 100%); animation:glitchBot .5s infinite; }
  @keyframes glitchTop { 0%,100%{clip-path:polygon(0 2%,100% 2%,100% 15%,0 15%);} 50%{clip-path:polygon(0 5%,100% 5%,100% 20%,0 20%);} }
  @keyframes glitchBot { 0%,100%{clip-path:polygon(0 85%,100% 85%,100% 100%,0 100%);} 50%{clip-path:polygon(0 80%,100% 80%,100% 95%,0 95%);} }
  .hero-subtitle { margin:1rem 0; font-size:1.2rem; }
  .btn { display:inline-block; padding:0.8rem 1.6rem; border:2px solid var(--accent); border-radius:30px; background:transparent; font-weight:500; transition:var(--transition); color:var(--accent); }
  .btn:hover { background:var(--accent); color:var(--bg-dark); }
  
  /* Sections */
  .section { padding:8rem 2rem; }
  .alt-bg { background:var(--bg-light); }
  .container { max-width:1200px; margin:auto; }
  .fade-section { opacity:0; transform:translateY(30px);} 
  .fade-section.animated { opacity:1; transform:translateY(0); transition:opacity .6s,transform .6s; }
  
  /* About */
  .about-section .about-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center; }
  .about-section img { width:100%; border-radius:8px; }
  .about-section h2 { font-family:var(--font-heading); font-size:2.5rem; margin-bottom:1rem; }
  .about-section p { font-size:1.1rem; line-height:1.6; }
  
  /* Skills */
  .skills-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:2rem; margin-top:2rem; }
  .skill-card { background:var(--bg-dark); border:1px solid rgba(255,222,89,0.2); border-radius:8px; padding:1.5rem; }
  .skill-card h3 { color:var(--accent); margin-bottom:0.5rem; }
  .skill-card ul { list-style:disc inside; }
  
  /* Portfolio */
  .filter-buttons { text-align:center; margin-bottom:2rem; }
  .filter-btn { padding:0.5rem 1rem; margin:0 0.5rem; border:2px solid var(--accent); background:transparent; cursor:pointer; transition:var(--transition); border-radius:30px; color:var(--accent); }
  .filter-btn.active, .filter-btn:hover { background:var(--accent); color:var(--bg-dark); }
  .portfolio-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:2rem; }
  .portfolio-item { background:var(--bg-dark); border:1px solid rgba(255,222,89,0.2); border-radius:8px; overflow:hidden; transition:var(--transition); }
  .portfolio-item:hover { transform:translateY(-5px); border-color:var(--accent);} 
  .portfolio-item .item-thumb { height:180px; background-size:cover; background-position:center; }
  .portfolio-item .item-info { padding:1rem; }
  .portfolio-item h3 { font-family:var(--font-heading); margin-bottom:0.5rem; }
  
  /* Contact */
  .contact-section { text-align:center; }
  .contact-section h2 { font-family:var(--font-heading); font-size:2.5rem; margin-bottom:1rem; }
  .contact-section p { margin-bottom:2rem; font-size:1.1rem; }
  .contact-socials { display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; }
  .social-btn { padding:0.8rem 1.6rem; border:2px solid var(--accent); background:transparent; border-radius:30px; transition:var(--transition); color:var(--accent); }
  .social-btn:hover { background:var(--accent); color:var(--bg-dark); }
  
  /* Footer */
  .footer { background:var(--bg-light); text-align:center; padding:2rem; }
  .footer-container p { font-size:0.9rem; }
  
  /* Responsive */
  @media(max-width:768px) {
    .nav-toggle { display:flex; }
    .nav-menu { display:none; }
    .nav-menu.open { display:flex; flex-direction:column; }
    .about-section .about-grid { grid-template-columns:1fr; text-align:center; }
    .glitch { font-size:3rem; }
    .hero-subtitle { font-size:1rem; }
    .skills-grid, .portfolio-grid { grid-template-columns:1fr; }
  }