/* styles.css - Techy ZIJK */
:root{
  --bg:#081028; --panel:#071026; --muted:#9aa6c2; --accent:#00d4ff; --accent-2:#7c3aed;
  --glass: rgba(255,255,255,0.03);
  --card:#0b1320;
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
*{box-sizing:border-box}
html,body{height:100%; margin:0; background:radial-gradient(1200px 600px at 10% 10%, rgba(124,58,237,0.09), transparent), linear-gradient(180deg,#041027 0%, #071026 60%); color:#cfe7ff; -webkit-font-smoothing:antialiased}
.container{max-width:1100px;margin:0 auto;padding:24px}
header{display:flex;align-items:center;justify-content:space-between;padding:18px 0;border-bottom:1px solid rgba(255,255,255,0.03)}
.logo{display:flex;gap:12px;align-items:center}
.logo svg{filter:drop-shadow(0 6px 18px rgba(0,0,0,0.6))}
nav{display:flex;gap:16px;align-items:center}
nav a{color:var(--muted); text-decoration:none; font-weight:600; padding:8px 12px; border-radius:10px}
nav a:hover{color:var(--accent); background: linear-gradient(90deg, rgba(124,58,237,0.06), rgba(0,212,255,0.03))}
.lang{opacity:0.9}
.theme-toggle{display:none} /* theme follows dark */

.hero{display:grid;grid-template-columns:1fr 360px;gap:28px;padding:42px 0;align-items:start}
@media(max-width:900px){.hero{grid-template-columns:1fr} .aside-card{order:2}}
.hero h1{font-size:42px;line-height:1.05;margin:0;background:linear-gradient(90deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; color:transparent}
.lead{color:var(--muted); margin-top:10px; font-size:16px; max-width:60ch}
.cta{margin-top:18px;display:flex;gap:12px}
.btn{display:inline-block;padding:12px 16px;border-radius:12px;font-weight:700;text-decoration:none;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#021023;box-shadow:0 10px 30px rgba(0,0,0,0.6);}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted)}

.aside-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}

/* neon stats */
.stats{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}
.stat{background:linear-gradient(90deg, rgba(0,212,255,0.04), rgba(124,58,237,0.03)); padding:12px 16px;border-radius:10px;border:1px solid rgba(255,255,255,0.03);min-width:120px}
.stat .k{font-weight:800;font-size:20px;color:var(--accent)}

/* services */
section{margin-top:36px}
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
.card h3{margin:0 0 8px;font-size:18px}
.card p{color:var(--muted);margin:0 0 10px}
.card ul{margin:0;padding-left:18px;color:var(--muted)}

/* code block */
.terminal{background:#020617;border-radius:10px;padding:14px;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;border:1px solid rgba(255,255,255,0.03)}
.terminal .line{opacity:0.85}

/* portfolio */
.work{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.work .card{min-height:160px;display:flex;flex-direction:column;justify-content:space-between}

/* contact form styles */
.form-grid{display:grid;grid-template-columns:1fr 360px;gap:18px}
@media(max-width:900px){.form-grid{grid-template-columns:1fr}}
.form{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
label{display:block;font-weight:700;font-size:13px;margin-bottom:6px}
input,select,textarea{width:100%;padding:12px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:inherit}
button[type=submit]{margin-top:12px;padding:12px 14px;border-radius:10px;border:none;background:linear-gradient(90deg,var(--accent),var(--accent-2));font-weight:800;color:#021023;cursor:pointer}

/* footer */
footer{margin-top:40px;padding:28px 0;border-top:1px dashed rgba(255,255,255,0.03);color:var(--muted)}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}

/* small screens */
@media(max-width:700px){.services,.work{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr 1fr}}

/* subtle animations */
.fade-up{animation:fadeUp .7s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}