/* ====== CSS Base & Tokens ====== */
:root{
  --bg: #0b0f19;
  --bg-elev: #101628;
  --text: #e6e9f5;
  --muted: #b5bdd9;
  --primary: #7c3aed;
  --primary-2: #06b6d4;
  --accent: #22d3ee;
  --danger: #ef4444;
  --glass: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.12);
  --shadow: 0 10px 30px rgba(0,0,0,0.4);
  --radius: 16px;
  --radius-sm: 12px;
  --container: 1200px;
}

[data-theme="light"]{
  --bg: #f7f8fc;
  --bg-elev: #ffffff;
  --text: #0b0f19;
  --muted: #5d657a;
  --glass: rgba(15,23,42,0.06);
  --border: rgba(15,23,42,0.12);
  --shadow: 0 10px 30px rgba(2,6,23,0.08);
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:"Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}
img{max-width:100%; display:block}
.container{width:100%; max-width:var(--container); margin:0 auto; padding-left:max(clamp(16px,4vw,24px), env(safe-area-inset-left)); padding-right:max(clamp(16px,4vw,24px), env(safe-area-inset-right))}
.section{padding:100px 0}
.section-tight{padding:72px 0}
.center{text-align:center}
.lead{color:var(--muted); font-size:1.05rem; line-height:1.8}
.card{
  background: linear-gradient(180deg, var(--glass), transparent);
  border:1px solid var(--border);
  border-radius: var(--radius);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  padding:24px;
}

/* ====== Header ====== */
.site-header{position:sticky; top:0; z-index:50; backdrop-filter: blur(10px);}
.site-header::after{content:""; position:absolute; inset:0; background:rgba(11,15,25,0.4); pointer-events:none}
[data-theme="light"] .site-header::after{background:rgba(255,255,255,0.65)}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0; position:relative}
.brand{display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none}
.logo{display:inline-grid; place-items:center; width:36px; height:36px; border-radius:10px; font-weight:800; letter-spacing:0.5px; font-family:"JetBrains Mono", monospace; background:linear-gradient(135deg, var(--primary), var(--primary-2)); box-shadow:0 8px 24px rgba(124,58,237,0.35)}
.brand-text{font-weight:700}
.nav{display:flex; gap:20px}
.nav-link{color:var(--muted); text-decoration:none; font-weight:500; padding:10px 12px; border-radius:10px}
.nav-link:hover,.nav-link.active{color:var(--text); background:var(--glass)}
.theme-toggle{all:unset; width:44px; height:44px; border-radius:12px; display:grid; place-items:center; cursor:pointer; background:var(--glass); border:1px solid var(--border)}
.toggle-icon{width:18px; height:18px; background:conic-gradient(from 0deg, var(--primary), var(--primary-2)); border-radius:50%}

/* Language button */
.lang-toggle{all:unset; width:44px; height:44px; border-radius:12px; display:grid; place-items:center; cursor:pointer; background:var(--glass); border:1px solid var(--border); margin-left:8px}
.globe-icon{width:18px; height:18px; border-radius:50%; background:radial-gradient(circle at 35% 35%, var(--primary), transparent 60%), radial-gradient(circle at 65% 65%, var(--primary-2), transparent 60%)}

/* Mobile menu button */
.mobile-toggle{all:unset; width:44px; height:44px; border-radius:12px; display:none; place-items:center; cursor:pointer; background:var(--glass); border:1px solid var(--border); margin-left:8px}
.bars-icon{width:18px; height:2px; background:currentColor; box-shadow:0 6px 0 currentColor, 0 -6px 0 currentColor}

/* ====== Hero ====== */
.hero{position:relative; overflow:hidden; padding-top:132px}
.aurora{position:absolute; inset:-10% -10% 0; filter: blur(60px); opacity:0.6}
.aurora .a{position:absolute; width:40vw; height:40vw; border-radius:50%; background: radial-gradient(circle at 30% 30%, var(--primary), transparent 60%)}
.aurora .a2{left:40%; top:10%; background: radial-gradient(circle at 70% 30%, var(--primary-2), transparent 60%)}
.aurora .a3{left:20%; top:40%; background: radial-gradient(circle at 50% 70%, #22d3ee, transparent 60%)}
.hero-inner{display:grid; gap:40px; align-items:center; grid-template-columns:1.2fr 0.8fr}
.hero-content .eyebrow{color:var(--accent); font-weight:700; letter-spacing:1px; text-transform:uppercase}
.hero-title{font-size:clamp(40px, 6vw, 68px); line-height:1.05; margin:10px 0 12px; font-weight:800}
.hero-subtitle{color:var(--muted); font-size:1.15rem; line-height:1.8}
.hero-cta{display:flex; gap:14px; margin-top:22px}
.hero-tags{display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:22px 0 0; list-style:none}
.hero-tags li{padding:8px 12px; border:1px solid var(--border); border-radius:999px; background:var(--glass); color:var(--muted)}

.hero-visual{position:relative; height:360px}
.orb{position:absolute; width:160px; height:160px; border-radius:50%; filter:blur(6px); mix-blend:screen; opacity:0.8}
.orb1{left:10%; top:20%; background: radial-gradient(circle at 30% 30%, var(--primary), transparent 60%); animation: float 8s ease-in-out infinite}
.orb2{right:10%; top:40%; background: radial-gradient(circle at 70% 50%, var(--primary-2), transparent 60%); animation: float 10s ease-in-out infinite reverse}
.orb3{left:40%; top:60%; background: radial-gradient(circle at 50% 50%, #22d3ee, transparent 60%); animation: float 12s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(-6px)}50%{transform:translateY(6px)}}

/* ====== Grid & Layout ====== */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:28px}
.skills-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.projects-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}

/* ====== Elements ====== */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 16px; border-radius:12px; text-decoration:none; font-weight:700; border:1px solid var(--border)}
.btn-primary{background:linear-gradient(135deg, var(--primary), var(--primary-2)); color:white; box-shadow:0 10px 30px rgba(124,58,237,0.35)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-ghost{background:var(--glass); color:var(--text)}

.chips{display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:12px 0 0; list-style:none}
.chips li{padding:8px 12px; border:1px solid var(--border); border-radius:999px; background:linear-gradient(180deg, var(--glass), transparent); color:var(--muted)}

.checklist{margin:10px 0 0; padding-left:0; list-style:none}
.checklist li{padding-left:26px; position:relative; margin:10px 0; color:var(--muted)}
.checklist li::before{content:"✓"; position:absolute; left:0; color:var(--accent); font-weight:800}

.pill{padding:6px 10px; border-radius:999px; background:linear-gradient(180deg, var(--glass), transparent); border:1px solid var(--border); color:var(--muted); font-size:12px}

.timeline{display:grid; gap:18px; position:relative}
.timeline-item{display:grid; grid-template-columns:24px 1fr; gap:14px}
.timeline-dot{width:12px; height:12px; background:linear-gradient(135deg, var(--primary), var(--primary-2)); border-radius:50%; margin-top:6px}
.timeline-header{display:flex; align-items:center; gap:10px; justify-content:space-between}
.bullets{margin:10px 0 0; padding-left:18px; color:var(--muted)}

.project{overflow:hidden}
.project-media{height:160px; border-radius:12px; margin:-10px -10px 12px; border:1px solid var(--border)}
.gradient{background: radial-gradient(120% 120% at 0% 0%, rgba(124,58,237,0.9), transparent 60%), radial-gradient(120% 120% at 100% 0%, rgba(6,182,212,0.9), transparent 60%), radial-gradient(120% 120% at 100% 100%, rgba(34,211,238,0.9), transparent 60%)}
.gradient.g2{background: radial-gradient(120% 120% at 0% 0%, #22d3ee, transparent 60%), radial-gradient(120% 120% at 100% 0%, #7c3aed, transparent 60%)}
.gradient.g3{background: radial-gradient(120% 120% at 0% 0%, #06b6d4, transparent 60%), radial-gradient(120% 120% at 100% 100%, #22d3ee, transparent 60%)}
.gradient.g4{background: radial-gradient(120% 120% at 0% 0%, #7c3aed, transparent 60%), radial-gradient(120% 120% at 100% 100%, #06b6d4, transparent 60%)}
.tags{display:flex; gap:8px; flex-wrap:wrap; list-style:none; padding:0; margin:12px 0 0}
.tags li{padding:6px 10px; border-radius:999px; background:var(--glass); border:1px solid var(--border); color:var(--muted); font-size:12px}

.contact-list{list-style:none; padding:0; margin:14px 0 0}
.contact-list a{color:var(--text); text-decoration:none}
.contact-list a:hover{text-decoration:underline}

/* Social icons */
.social{display:flex; gap:12px; margin:14px 0 0}
.icon-btn{width:48px; height:48px; display:grid; place-items:center; border-radius:12px; border:1px solid var(--border); background:var(--glass); color:var(--text); box-shadow:var(--shadow); text-decoration:none; transition:transform 150ms ease, filter 150ms ease}
.icon-btn svg{width:22px; height:22px}
.icon-btn:hover{transform:translateY(-2px); filter:brightness(1.05)}
.icon-btn.wa{background:linear-gradient(135deg,#25D366,#128C7E); color:#fff; border-color:transparent}
.icon-btn.ig{background:conic-gradient(#f58529,#feda77,#dd2a7b,#8134af,#515bd4); color:#fff; border-color:transparent}

/* Language sidebar */
.lang-sidebar{position:fixed; top:0; right:0; bottom:0; width:min(320px,85vw); background:var(--bg-elev); border-left:1px solid var(--border); box-shadow:var(--shadow); transform:translateX(100%); transition:transform 250ms ease; z-index:70}
.lang-sidebar.open{transform:translateX(0)}
.lang-inner{height:100%; display:flex; flex-direction:column; padding:16px}
.lang-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.lang-close{all:unset; cursor:pointer; width:36px; height:36px; display:grid; place-items:center; border-radius:10px; background:var(--glass); border:1px solid var(--border)}
.lang-list{list-style:none; padding:0; margin:8px 0 0; display:grid; gap:10px}
.lang-item{all:unset; padding:12px 14px; border:1px solid var(--border); border-radius:12px; background:var(--glass); cursor:pointer; font-weight:600}
.lang-item:hover{filter:brightness(1.05)}
.lang-item.active{background:linear-gradient(135deg, var(--primary), var(--primary-2)); color:#fff; border-color:transparent}

/* Mobile sidebar */
.mobile-sidebar{position:fixed; top:0; left:0; bottom:0; width:min(320px,85vw); background:var(--bg-elev); border-right:1px solid var(--border); box-shadow:var(--shadow); transform:translateX(-100%); transition:transform 250ms ease; z-index:70}
.mobile-sidebar.open{transform:translateX(0)}
.mobile-inner{height:100%; display:flex; flex-direction:column; padding:16px; padding-top:calc(16px + env(safe-area-inset-top))}
.mobile-header{display:flex; align-items:center; justify-content:flex-end; margin-bottom:8px}
.mobile-close{all:unset; cursor:pointer; width:36px; height:36px; display:grid; place-items:center; border-radius:10px; background:var(--glass); border:1px solid var(--border)}
.mobile-list{list-style:none; padding:0; margin:8px 0 0; display:grid; gap:4px}
.mobile-list .nav-link{display:block; padding:12px 10px; border-radius:10px; color:var(--text); text-decoration:none}
.mobile-list .nav-link:hover{background:var(--glass)}

/* Overlay */
.overlay{position:fixed; inset:0; background:rgba(0,0,0,0.45); opacity:0; pointer-events:none; transition:opacity 200ms ease; z-index:60}
.overlay.show{opacity:1; pointer-events:auto}

/* ====== Footer ====== */
.site-footer{border-top:1px solid var(--border); margin-top:40px}
.footer-inner{display:flex; align-items:center; justify-content:space-between; padding:20px 0; color:var(--muted)}
.top-link{color:inherit; text-decoration:none; padding:8px 10px; border-radius:10px}
.top-link:hover{background:var(--glass); color:var(--text)}

/* ====== Interactions ====== */
.tilt{transform-style:preserve-3d; transition: transform 150ms ease, box-shadow 150ms ease}
.tilt:hover{box-shadow: 0 16px 40px rgba(0,0,0,0.45)}

/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(14px); transition:opacity 600ms ease, transform 600ms ease}
.reveal.in{opacity:1; transform:translateY(0)}

/* Toast */
.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--bg-elev); color:var(--text); border:1px solid var(--border); border-radius:12px; padding:12px 16px; box-shadow:var(--shadow)}

/* ====== Responsive ====== */
@media (max-width: 1024px){
  .skills-grid,.projects-grid{grid-template-columns:repeat(2,1fr)}
  .hero-inner{grid-template-columns:1fr}
  .hero-visual{height:240px}
}
@media (max-width: 768px){
  .skills-grid,.projects-grid{grid-template-columns:1fr}
  .hero-cta{flex-wrap:wrap}
}
@media (max-width: 640px){
  .grid-2{grid-template-columns:1fr}
  .nav{display:none}
  .mobile-toggle{display:grid}
  .section{padding:80px 0}
  .skills-grid,.projects-grid{grid-template-columns:1fr}
  .icon-btn{width:44px; height:44px}
  .hero-cta{flex-wrap:wrap}
}