:root{ --bg:#03050a; --panel: rgba(255,255,255,0.03); --muted:#9fb3bf; --neon:#00e0ff; --accent:#06b6d4; --glass-blur:14px; --radius:16px; --max-w:1400px; --txt:#e6f7fb; --speed: 0.22s; --mobile-break:980px; } *{box-sizing:border-box} html,body{height:100%;margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,"Noto Sans",sans-serif;background:linear-gradient(180deg,#02040a,#040712);color:var(--txt);-webkit-font-smoothing:antialiased;overflow-x:hidden} a{color:inherit;text-decoration:none} /* header */ .header{position:fixed;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:rgba(2,6,23,0.45);backdrop-filter:blur(8px);z-index:1000;border-bottom:1px solid rgba(255,255,255,0.02)} .logo-wrap{display:flex;align-items:center;gap:12px} .logo-wrap img{width:52px;height:52px;border-radius:12px;object-fit:cover;box-shadow:0 12px 50px rgba(0,0,0,0.6)} .brand-text h1{margin:0;font-size:16px} .top-nav{display:flex;gap:10px;align-items:center} .top-nav a{padding:8px 12px;border-radius:10px;font-weight:700;opacity:0.95;transition:all var(--speed) ease} .top-nav a:hover{transform:translateY(-3px);color:var(--neon)} .controls{display:flex;gap:8px;align-items:center} .icon-btn{width:40px;height:40px;border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);display:grid;place-items:center;border:1px solid rgba(255,255,255,0.03);cursor:pointer} /* mobile menu */ @media (max-width: var(--mobile-break)) { .top-nav{display:none} .header{padding:10px} } /* container & hero */ .container{max-width:var(--max-w);margin:100px auto 60px;padding:16px;position:relative;z-index:40} .hero{display:grid;grid-template-columns:1fr 460px;gap:28px;align-items:center;padding:34px;border-radius:18px;background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);border:1px solid rgba(255,255,255,0.03);box-shadow:0 40px 120px rgba(0,0,0,0.7)} @media(max-width:980px){.hero{grid-template-columns:1fr;padding:20px}} .eyebrow{color:var(--neon);font-weight:800;letter-spacing:0.6px} .hero-title{font-size:36px;line-height:1.02;margin:8px 0} @media(max-width:640px){.hero-title{font-size:28px}} .hero-sub{color:var(--muted);max-width:60ch;margin-top:8px} .ctas{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap} .btn{padding:10px 14px;border-radius:12px;border:none;cursor:pointer;font-weight:800;background:transparent;color:var(--txt);border:1px solid rgba(255,255,255,0.04);transition:all var(--speed) ease} .btn.primary{background:linear-gradient(90deg,var(--neon),var(--accent));color:#001;box-shadow:0 14px 40px rgba(0,224,255,0.06);transform:translateZ(0)} .btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06)} /* cards & glass */ .card{padding:20px;border-radius:14px;background:var(--panel);backdrop-filter:blur(var(--glass-blur));border:1px solid rgba(255,255,255,0.03)} .glass{position:relative;overflow:hidden} /* grid & cards */ .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} @media (max-width:1100px){.grid-3{grid-template-columns:repeat(2,1fr)}} @media (max-width:640px){.grid-3{grid-template-columns:1fr}} .show-card{padding:16px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);border:1px solid rgba(255,255,255,0.03);transition:transform .45s,box-shadow .45s} .show-card .thumb img{width:100%;height:160px;object-fit:cover;border-radius:10px;margin-bottom:12px} .show-card:hover{transform:translateY(-10px);box-shadow:0 40px 100px rgba(0,0,0,0.6)} /* gallery */ .gallery-3d{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} @media (max-width:1100px){.gallery-3d{grid-template-columns:repeat(3,1fr)}} @media (max-width:760px){.gallery-3d{grid-template-columns:repeat(2,1fr)}} @media (max-width:420px){.gallery-3d{grid-template-columns:1fr}} .gallery-card{height:220px;border-radius:12px;overflow:hidden;background-size:cover;background-position:center;transition:transform .6s} /* skills */ .skills-wrap{display:flex;gap:12px;flex-wrap:wrap} .skill-circle{width:120px;height:120px;border-radius:999px;background:conic-gradient(var(--neon) 0% 60%, rgba(255,255,255,0.02) 60%);display:grid;place-items:center;color:var(--txt);font-weight:800} /* footer */ .footer{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:20px;margin-top:40px;border-top:1px solid rgba(255,255,255,0.03);color:var(--muted)} .footer .footer-logo{width:48px;height:48px;border-radius:10px} /* particles & canvas */ #tsparticles{position:fixed;inset:0;z-index:1;pointer-events:none} #bgCanvas{position:fixed;inset:0;z-index:0;pointer-events:none} /* helpers */ .neon-pulse{animation:neonPulse 2.6s ease-in-out infinite} @keyframes neonPulse{0%{filter:drop-shadow(0 0 6px rgba(0,224,255,0.12))}50%{filter:drop-shadow(0 0 28px rgba(0,224,255,0.22))}100%{filter:drop-shadow(0 0 6px rgba(0,224,255,0.12))}} .cursor{position:fixed;left:0;top:0;width:18px;height:18px;border-radius:50%;pointer-events:none;z-index:99999;transform:translate(-50%,-50%);transition:transform .06s,width .12s,height .12s,background .12s;mix-blend-mode:screen} .cursor.big{width:56px;height:56px;background:linear-gradient(90deg,var(--neon),var(--accent));opacity:0.95} .settings-panel{position:fixed;right:18px;bottom:18px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,0.04);backdrop-filter:blur(8px);z-index:90;display:none} .settings-panel.open{display:block}