:root{
  --bg: #0b1220;
  --bg-grad-1: #0f2a5a;
  --bg-grad-2: #0b1220;
  --bg-grad-3: #090d18;

  --glass: rgba(255,255,255,0.08);
  --text: #e9edf5;
  --muted: #b9c2d3;

  --accent1: #6ec9ff;
  --accent2: #b388ff;

  --pill: rgba(255,255,255,0.12);
  --ring: rgba(255,255,255,0.25);
  --shadow: 0 10px 30px rgba(0,0,0,0.35);
  --card-radius: 22px;
}

/* Light mode */
html[data-theme="light"]{
  --bg: #f7f9ff;
  --bg-grad-1: #f7f9ff;
  --bg-grad-2: #eef3ff;
  --bg-grad-3: #eaefff;

  --glass: rgba(255,255,255,0.85);
  --text: #1b1e35;
  --muted: #5b6282;

  --accent1: #3d5afe;
  --accent2: #9c4dff;

  --pill: rgba(240,243,255,0.9);
  --ring: rgba(61,90,254,0.3);
  --shadow: 0 10px 28px rgba(61,90,254,0.17);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Plus Jakarta Sans",system-ui,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 800px at 80% -10%, var(--bg-grad-1) 0%, var(--bg-grad-2) 40%, var(--bg-grad-3) 100%),
              radial-gradient(1200px 800px at -10% 110%, #3f0a66 0%, var(--bg-grad-2) 40%, var(--bg-grad-3) 100%);
  background-attachment: fixed;
  overflow-x:hidden;
}

/* قبلاً بابل‌ها مخفی شده بودند؛ همونو نگه می‌داریم ولی در انتهای فایل override می‌کنیم */
#bg-bubbles{ display:none !important; }

/* کارت شیشه‌ای */
.glass{
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02))
            , radial-gradient(1000px 1000px at 100% 0%, rgba(110,201,255,0.18), rgba(184,136,255,0.1) 60%, transparent 72%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border:1px solid rgba(255,255,255,0.09);
  box-shadow: var(--shadow);
}
html[data-theme="light"] .glass{
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.88))
            , radial-gradient(1000px 900px at 100% 0%, rgba(77,119,255,0.06), rgba(178,136,255,0.05) 60%, transparent 75%);
  border:1px solid rgba(22,27,62,0.06);
}

/* Topbar */
.topbar{
  position: sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; margin:12px; border-radius:16px;
}
.brand{display:flex; align-items:center; gap:12px}
.brand .dot{ width:10px; height:10px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #4dffcf, #47a88b);
  box-shadow: 0 0 14px rgba(77,255,207,0.7);
}
.brand h1{margin:0; font-size:20px; font-weight:800}
.brand p{margin:0; color:var(--muted); font-weight:600; font-size:12px}
.actions{display:flex; gap:12px; align-items:center; flex-wrap:wrap}

.btn{
  appearance:none; border:none; cursor:pointer;
  padding:10px 16px; border-radius:14px; font-weight:700; letter-spacing:.2px;
  text-decoration:none; color:var(--text);
  box-shadow: inset 0 0 0 1px var(--ring);
  background: rgba(255,255,255,.1);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 10px 20px rgba(0,0,0,.15); }
.btn:active{ transform: translateY(0) scale(.98); }
.btn-primary{ background: linear-gradient(90deg, var(--accent1), var(--accent2)); color:#fff; }
.btn-neutral{ background: rgba(255,255,255,.12); }
html[data-theme="light"] .btn-neutral{ background:#fff }

/* افکت درخشش اینتراکتیو */
.glow{
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.18), 0 0 0 2px rgba(110,201,255,.25) !important;
  background: linear-gradient(90deg, rgba(110,201,255,.22), rgba(184,136,255,.22)) !important;
}

/* Layout */
main{ max-width:1080px; margin:32px auto; padding:0 14px; }
.card{ border-radius: var(--card-radius); padding:22px; margin:18px 0; }

/* HERO */
.hero .hero-title{font-size:42px; margin:0 0 8px 0;}
.hero .subtitle{color:var(--muted); font-weight:800; margin:0 0 18px 0; min-height:26px}
.lead{font-size:18px; line-height:1.85; color:var(--text); opacity:.95}
.contact-pills{display:flex; flex-wrap:wrap; gap:12px; margin-top:16px}
.pill{ padding:10px 14px; border-radius:999px; background:var(--pill); color:var(--text); text-decoration:none; font-weight:800; border:1px solid rgba(255,255,255,.15);}
html[data-theme="light"] .pill{ border-color: rgba(22,27,62,0.08) }
.pill:hover{ transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.18), 0 0 0 2px rgba(110,201,255,.25); }

/* Skills */
.skills-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.skills-col h4{ margin:0 0 10px 0 }
.chips{ display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:0; list-style:none }
.chips li{
  padding:8px 12px; border-radius:999px; background:var(--pill);
  border:1px solid rgba(255,255,255,.12); font-weight:800; transition: transform .18s, box-shadow .18s, background .18s;
}
.chips li:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,.18), 0 0 0 2px rgba(110,201,255,.25);
  background: linear-gradient(90deg, rgba(110,201,255,.22), rgba(184,136,255,.22));
}
/* تاچ */
.chips li.glow{ transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.18), 0 0 0 2px rgba(110,201,255,.25); background: linear-gradient(90deg, rgba(110,201,255,.22), rgba(184,136,255,.22)); }

/* Timeline */
.timeline{ position:relative; padding-left:22px; }
.timeline::before{
  content:""; position:absolute; left:10px; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg, var(--accent1), transparent);
  opacity:.8;
}
.t-item{ position:relative; margin:18px 0 28px; }
.t-dot{ display:none; }
.t-content h4{ margin:0 0 6px 0; font-size:18px; }
.t-meta{ color:var(--muted); font-weight:700; font-size:12px }
.t-content ul{ margin:8px 0 0 18px; }

/* Projects */
#projects .grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:14px; }
#projects .project{ min-height: 150px; padding:16px; border-radius:16px; border:1px solid rgba(255,255,255,.1); }
.bubble{
  background: radial-gradient(120% 140% at 0% 0%, rgba(110,201,255,.14), rgba(184,136,255,.10) 35%, rgba(255,255,255,.07) 55%),
              linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  transition: transform .25s ease, box-shadow .25s ease;
}
.bubble:hover{ transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.25); }

/* Bullets */
.bullets{ padding-left:18px }
.bullets.two-col{ columns: 2; column-gap: 24px; }
.bullets li{ margin-bottom:8px }

/* Lang pills & CTA */
.lang-pills{ display:flex; flex-wrap:wrap; gap:10px; margin:12px 0; }
.cta{ display:flex; gap:12px; margin-top:8px; flex-wrap:wrap }

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

/* Links */
a{ color:inherit; text-decoration:none }

/* Responsive */
@media (max-width: 980px){
  .skills-grid{ grid-template-columns: 1fr 1fr; }
  #projects .grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .hero .hero-title{ font-size:34px }
  .actions{ flex-direction:column; align-items:stretch; gap:8px }
  .skills-grid{ grid-template-columns: 1fr; }
  #projects .grid{ grid-template-columns: 1fr; }
  .bullets.two-col{ columns: 1; }
}

/* Print-friendly */
@media print{
  body{ background:#fff; color:#000 }
  .topbar, .btn, .cta{ display:none !important }
  .glass{ background:#fff; border:1px solid #ddd; box-shadow:none }
  .card{ page-break-inside: avoid }
}

/* --- فقط در انتهای فایل: برگرداندن بابل‌های پس‌زمینه --- */
#bg-bubbles{
  display:block !important;
  position:fixed !important;
  inset:0 !important;
  z-index:-1 !important;
  pointer-events:none !important;
}