:root {
  /* Deep violet theme */
  --bg: #060814;
  --bg-elev: #0f0a1d;
  --text: #e9e6ff;
  --muted: #b9b3e6;
  --accent: #a78bfa;
  --neon: #8b5cf6;
  --cyan: #5eefff;
  --radius: 18px;

  /* Soft UI shadows (dual) */
  --shadow-dark: 18px 18px 40px rgba(0,0,0,0.55);
  --shadow-light: -10px -10px 26px rgba(255,255,255,0.04);

  /* Neon ring */
  --glow: 0 0 10px rgba(139,92,246,0.55),
          0 0 26px rgba(94,231,255,0.22);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background: linear-gradient(120deg, #060814, #0f0a1d, #120e24);
  background-size: 200% 200%;
  animation: gradientShift 15s ease infinite;
  line-height:1.6;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.container{max-width:1080px;margin:0 auto;padding:0 22px}
.section{
  padding:120px 0 90px;
  opacity:0;
  transform:translateY(40px);
  animation: fadeInUp 1.2s ease forwards;
}
@keyframes fadeInUp {
  to { opacity:1; transform:translateY(0); }
}
.section-title{
  margin:0 0 22px;
  text-align:center;
  font-size:1.85rem;
  background:linear-gradient(90deg, #a78bfa, #5eefff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  animation: shine 6s linear infinite;
  background-size:200% auto;
}
@keyframes shine {
  0% { background-position:0% 50%; }
  100% { background-position:200% 50%; }
}
.section-sub{margin:28px 0 10px;text-align:center;color:var(--muted)}

/* Header */
.header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(11,8,20,0.55);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(167,139,250,0.18);
}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between}
.logo{color:var(--text);text-decoration:none;font-weight:800}
.nav-menu{list-style:none;display:flex;gap:18px;margin:0;padding:0}
.nav-link{
  color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:12px;
  transition:all .3s ease;
}
.nav-link:hover{
  color:var(--text);
  text-shadow:0 0 8px rgba(139,92,246,0.75);
  background:rgba(139,92,246,0.1);
}
.nav-toggle{display:none;background:transparent;border:0;padding:8px;cursor:pointer}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--text);margin:5px 0}

/* Hero */
.hero{padding-top:140px;position:relative;text-align:center}
.hero-orb{
  position:absolute;inset:auto 0 0 0;height:300px;pointer-events:none;z-index:-1;
  background:radial-gradient(closest-side, rgba(139,92,246,0.26), transparent 70%);
  filter:blur(12px);
  animation: floatOrb 8s ease-in-out infinite alternate;
}
@keyframes floatOrb {
  0% { transform:translateY(0) scale(1); opacity:0.9; }
  100% { transform:translateY(-20px) scale(1.05); opacity:1; }
}

/* Avatar */
.avatar-wrap {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
  box-shadow: 0 4px 24px rgba(161, 140, 209, 0.3), 0 1.5px 8px rgba(251, 194, 235, 0.2);
  border: 4px solid #fff;
  transition: box-shadow 0.3s, transform 0.3s;
}
.avatar-wrap:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 32px rgba(161, 140, 209, 0.5), 0 3px 16px rgba(251, 194, 235, 0.3);
}
.avatar {
  width: 138px;
  height: 138px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  background: #120e24;
}

/* Panels / Glass / Neumorphism */
.glass{
  background:rgba(255,255,255,0.04);
  backdrop-filter:blur(12px) saturate(150%);
  border:1px solid rgba(255,255,255,0.1);
  box-shadow: inset 0 0 25px rgba(255,255,255,0.04);
}
.panel{border-radius:20px;padding:18px;box-shadow:var(--shadow-dark),var(--shadow-light)}
.neo{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
  border-radius:18px;
  box-shadow:var(--shadow-dark),var(--shadow-light);
}

/* Buttons */
.btn{
  display:inline-block;padding:12px 18px;border-radius:14px;text-decoration:none;color:var(--text);
  border:1px solid rgba(167,139,250,0.18);
  transition:transform .3s ease, filter .3s ease, background .3s ease, box-shadow .3s ease;
}
.btn.glow{
  background:linear-gradient(135deg, #7c5cff, #5ee7ff);
  box-shadow:var(--glow);
}
.btn.glow:hover{
  transform:translateY(-4px) scale(1.05);
  filter:brightness(1.1) saturate(1.15);
  box-shadow:0 0 20px rgba(139,92,246,0.6), 0 0 40px rgba(94,231,255,0.35);
}
.btn.ghost{background:rgba(255,255,255,0.04)}
.btn.ghost:hover{background:rgba(167,139,250,0.1);transform:translateY(-2px)}
.btn.small{padding:10px 14px;font-size:.95rem}

/* Tiles */
.tile-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:16px 0 6px;
}
.tile{
  padding:16px;display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text);
  border:1px solid rgba(167,139,250,0.14);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.tile:hover{
  transform:translateY(-6px) scale(1.03);
  box-shadow:0 0 20px rgba(139,92,246,0.6), 0 0 40px rgba(94,231,255,0.35);
  border-color:rgba(139,92,246,0.35);
}
.tile-icon{font-size:24px}
.tile-text h3{margin:0 0 4px;font-size:1rem}
.tile-text p{margin:0;color:var(--muted);font-size:.9rem}

/* Chips */
.chip-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:12px}
.chip{
  padding:8px 12px;border-radius:999px;color:var(--text);border:1px solid rgba(167,139,250,0.16);
}

/* Projects */
.project{position:relative;margin:26px 0}
.spotlight-left::before,
.spotlight-right::before{
  content:"";position:absolute;inset:auto 0 0 0;height:260px;z-index:-1;filter:blur(18px);
  background:radial-gradient(closest-side, rgba(139,92,246,0.22), transparent 70%);
}
.spotlight-right::before{left:auto;right:0}
.project-card{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;padding:16px;border:1px solid rgba(167,139,250,0.14)}
.project-media{border-radius:14px;overflow:hidden;aspect-ratio:16/10;background:#160f2b}
.project-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.01);transition:transform .4s ease}
.project-card:hover .project-media img{transform:scale(1.05)}
.project-info h3{margin:6px 0}
.project-info p{color:var(--muted);margin:6px 0 12px}
.project-tag{color:var(--muted);font-size:.85rem}

/* Form */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-field{display:flex;flex-direction:column}
.form-field.full{grid-column:1/-1}
label{font-size:.95rem;margin-bottom:6px}
input,textarea{
  background:#110a22;color:var(--text);
  border:1px solid rgba(167,139,250,0.16);
  border-radius:14px;padding:12px 14px;outline:none;
  transition:border-color .25s ease, box-shadow .25s ease;
}
input:focus,textarea:focus{
  border-color:rgba(139,92,246,0.45);
  box-shadow:0 0 0 3px rgba(139,92,246,0.18), var(--glow);
}
.error{color:#ff6b8a;min-height:18px;margin-top:6px}

/* Socials */
.socials{margin-top:20px;display:flex;gap:10px;justify-content:center}
.social-link{
  width:42px;height:42px;display:grid;place-items:center;border-radius:12px;color:var(--text);text-decoration:none;
  transition:transform .2s ease, background .3s ease, filter .3s ease;
  border:1px solid rgba(167,139,250,0.14);
}
.social-link:hover{
  transform:translateY(-3px) scale(1.05);
  background:rgba(255,255,255,0.06);
  box-shadow:var(--glow);
}

/* Footer */
.footer{text-align:center;padding:28px 12px 50px;color:var(--muted)}

/* Responsive */
@media (max-width:1024px){
  .project-card{grid-template-columns:1fr}
}
@media (max-width:680px){
  .nav-toggle{display:block}
  .nav-menu{
    position:absolute;top:64px;right:20px;left:20px;
    display:none;flex-direction:column;gap:8px;padding:10px;border-radius:16px;
    background:rgba(11,8,20,0.92);backdrop-filter:blur(8px);
    border:1px solid rgba(167,139,250,0.16);
  }
  .nav-menu.open{display:flex}
  .tile-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .title{font-size:1.9rem}
}

.accent{
    color:var(--accent) !important;
    font-weight:bold;
    text-shadow: 0 0 8px var(--neon);
}