/* ── 1. CSS CUSTOM PROPERTIES ── */
:root {
  --bg:#0d0d0d; --bg2:#151515; --bg3:#1e1e2e;
  --surface:rgba(255,255,255,.06); --surface2:rgba(255,255,255,.10);
  --border:rgba(255,255,255,.10);
  --text:#f0f0f0; --text2:#a0aec0;
  --accent:#4548ec; --accent2:#6737e9;
  --success:#22c55e; --danger:#ef4444;
  --shadow:0 8px 32px rgba(0,0,0,.35);
  --shadow-lg:0 20px 60px rgba(0,0,0,.45);
  --glow:0 0 30px rgba(99,102,241,.30);
  --glow-sm:0 0 16px rgba(99,102,241,.20);
  --r1:10px; --r2:18px; --r3:28px; --rnd:9999px;
  --font:'Inter',sans-serif;
  --fxs:.78rem; --fsm:.9rem; --fmd:1rem; --flg:1.125rem;
  --fh2:clamp(1.9rem,3.8vw,3rem); --fh1:clamp(2.6rem,5.5vw,4.8rem);
  --max-w:1180px; --nav-h:84px;
  --s1:.5rem; --s2:.75rem; --s3:1rem; --s4:1.5rem;
  --s5:2rem; --s6:3rem; --s7:5rem;
}

/* ── Tema chiaro ── */
body.light {
  --bg:#f4f6fb; --bg2:#e8ecf4; --bg3:#dde3ef;
  --surface:rgba(255,255,255,.75); --surface2:rgba(255,255,255,.95);
  --border:rgba(30,30,60,.09);
  --text:#111827; --text2:#4b5563;
  --shadow:0 8px 32px rgba(30,30,60,.10);
  --shadow-lg:0 20px 60px rgba(30,30,60,.14);
  --glow:0 0 25px rgba(99,102,241,.18);
  --glow-sm:0 0 12px rgba(99,102,241,.12);
}

/* ── 2. RESET & BASE ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
  overflow-x:hidden;
  transition:background-color .35s ease,color .35s ease;
}
body::after {
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 14%,rgba(99,102,241,.14) 0%,transparent 30%),
    radial-gradient(circle at 88% 86%,rgba(124,58,237,.11) 0%,transparent 28%);
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
p { color:var(--text2); }
h1,h2,h3,h4 { color:var(--text); line-height:1.1; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; border:none; background:none; }

.container { width:min(var(--max-w),calc(100% - 2rem)); margin-inline:auto; }
.section { padding:var(--s7) 0 var(--s6); }
.page-main { padding-top:var(--s5); }

/* ── 3. CARD ── */
.card {
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-radius:var(--r3);
}

/* ── 4. TIPOGRAFIA ── */
.kicker,.eyebrow {
  display:inline-block;
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:var(--fxs);
  font-weight:700;
}
.kicker { margin-bottom:var(--s1); }
.section-head { max-width:680px; margin-bottom:var(--s6); }
.section-head h1,.section-head h2 { margin:.2rem 0 .8rem; font-size:var(--fh2); }
.section-head p { font-size:var(--flg); }

/* ── 5. BOTTONI ── */
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:.85rem 1.5rem;
  border-radius:var(--rnd);
  font-weight:600;
  font-size:var(--fsm);
  border:1px solid transparent;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease;
  white-space:nowrap;
}
.btn:hover { transform:translateY(-2px); }
.btn-primary {
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;
  box-shadow:0 4px 20px rgba(99,102,241,.35);
}
.btn-primary:hover { box-shadow:var(--glow); }
.btn-ghost {
  background:var(--surface);
  border-color:var(--border);
  color:var(--text);
}
.btn-ghost:hover { border-color:var(--accent); }
.btn-sm { min-height:40px; padding:.6rem 1.1rem; font-size:var(--fxs); }
.btn-full { width:100%; }

/* ── 6. NAVBAR ── */
.site-header { position:sticky; top:0; z-index:900; padding:.6rem 0 0; }
.navbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s2);
  padding:.65rem 1rem;
  background:var(--surface);
  border:1px solid var(--border);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  border-radius:var(--rnd);
  box-shadow:var(--shadow);
  transition:background .3s,border-color .3s;
  flex-wrap:nowrap;
}
.logo {
  display:inline-grid;
  place-items:center;
  width:46px; height:46px;
  border-radius:50%;
  font-weight:900; font-size:.95rem; letter-spacing:.04em;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;
  flex-shrink:0;
  box-shadow:var(--glow-sm);
  transition:box-shadow .3s;
}
.logo-img--light { display: none; }
.logo-img--dark  { display: block; }

body.light .logo-img--light { display: block; }
body.light .logo-img--dark  { display: none; }


.logo:hover { box-shadow:var(--glow); }

.nav-menu { display:flex; align-items:center; gap:var(--s3); flex-shrink:1; }
.nav-links { list-style:none; display:flex; gap:.2rem; }
.nav-link {
  display:inline-block;
  padding:.6rem .9rem;
  border-radius:var(--rnd);
  color:var(--text2);
  font-size:var(--fsm); font-weight:500;
  transition:color .25s,background .25s;
  white-space:nowrap;
}
.nav-link:hover,.nav-link.active { color:var(--text); background:rgba(99,102,241,.12); }
.nav-actions { display:flex; align-items:center; gap:var(--s2); flex-shrink:0; }

/* Lang switcher */
.lang-switcher {
  display:flex; gap:.25rem;
  background:rgba(99,102,241,.07);
  border:1px solid var(--border);
  padding:.25rem;
  border-radius:var(--rnd);
}
.lang-btn {
  padding:.38rem .7rem;
  border-radius:var(--rnd);
  font-size:var(--fxs); font-weight:700;
  color:var(--text2);
  transition:all .25s;
}
.lang-btn.active,.lang-btn:hover {
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;
}

/* Theme button */
.theme-btn {
  width:46px; height:46px;
  border-radius:50%;
  display:inline-grid; place-items:center;
  background:rgba(99,102,241,.10);
  border:1px solid var(--border);
  color:var(--text);
  font-size:1.15rem;
  position:relative; overflow:hidden;
  transition:box-shadow .25s,transform .25s;
  flex-shrink:0;
}
.theme-btn:hover { box-shadow:var(--glow-sm); transform:scale(1.07); }
.icon-sun,.icon-moon {
  position:absolute;
  transition:opacity .3s,transform .3s;
}
.icon-sun { opacity:0; transform:translateY(-14px); }
.icon-moon { opacity:1; transform:translateY(0); }
body.light .icon-sun { opacity:1; transform:translateY(0); }
body.light .icon-moon { opacity:0; transform:translateY(14px); }

/* Hamburger */
.hamburger {
  display:none;
  width:46px; height:46px;
  flex-direction:column;
  justify-content:center; align-items:center;
  gap:5px;
  border-radius:var(--r1);
  border:1px solid var(--border);
  background:var(--surface);
  padding:.7rem;
  flex-shrink:0;
  z-index:10;
}
.hamburger span {
  display:block; width:100%; height:2px;
  background:var(--text);
  border-radius:99px;
  transition:transform .3s,opacity .3s;
}
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ── 7. HERO ── */
.hero {
  position:relative;
  min-height:calc(100vh - 110px);
  display:flex; align-items:center;
  overflow:hidden;
}
#particleCanvas {
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none; z-index:0;
}
.hero-glow {
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  pointer-events:none; z-index:0;
  animation:floatBlob 9s ease-in-out infinite;
}
.hero-glow-1 { width:440px; height:440px; top:-10%; left:-8%; background:rgba(99,102,241,.18); }
.hero-glow-2 { width:360px; height:360px; bottom:0; right:-6%; background:rgba(124,58,237,.14); animation-delay:2.5s; }
.hero-inner {
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:var(--s6); align-items:center;
  padding:var(--s7) 0;
}
.hero-text h1 { font-size:var(--fh1); line-height:1; margin:.3rem 0 .8rem; }
.hero-role {
  display:flex; align-items:baseline; flex-wrap:wrap;
  gap:.5rem;
  font-size:clamp(1.1rem,2vw,1.55rem);
  color:var(--text2);
  margin-bottom:var(--s3);
}
.tw-text { color:var(--accent); font-weight:700; }
.tw-caret { color:var(--accent); animation:blink 1s step-end infinite; }
.hero-desc { font-size:var(--flg); max-width:520px; margin-bottom:var(--s4); }
.hero-btns { display:flex; flex-wrap:wrap; gap:var(--s2); margin-bottom:var(--s4); }
.badge-row { display:flex; flex-wrap:wrap; gap:.55rem; }
.badge {
  padding:.45rem .9rem;
  border-radius:var(--rnd);
  background:rgba(99,102,241,.10);
  border:1px solid rgba(99,102,241,.20);
  color:var(--text);
  font-size:var(--fxs); font-weight:600;
}
.hero-card { padding:var(--s4); text-align:center; }
.avatar-wrap {
  width:min(290px,100%); aspect-ratio:1;
  margin:0 auto var(--s3);
  border-radius:50%; padding:10px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:var(--glow);
  position:relative; overflow:hidden;
}
.avatar-wrap img { width:100%; height:100%; border-radius:50%; object-fit:cover; }

.avatar-fallback {
  display:none;
  align-items:center; justify-content:center;
  width:100%; height:100%;
  border-radius:50%;
  background:var(--bg3);
  font-size:4rem; font-weight:900; color:var(--text);
}
.availability { color:var(--success); font-size:var(--fsm); font-weight:600; margin-bottom:var(--s3); }
.stats-row {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--border);
  border-radius:var(--r2); overflow:hidden;
}
.stat-item {
  background:var(--surface2);
  padding:var(--s3) var(--s2);
  display:flex; flex-direction:column; gap:.2rem;
}
.stat-item strong { font-size:1.4rem; font-weight:900; color:var(--accent); }
.stat-item span { font-size:var(--fxs); color:var(--text2); }
.scroll-dot {
  width:7px; height:7px;
  background:var(--accent); border-radius:50%;
  animation:scrollBounce 1.7s infinite;
}

/* ── 8. SERVICES ── */
.services-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; }
.services-grid .card {
  padding:var(--s4);
  transition:transform .3s,box-shadow .3s;
}
.services-grid .card:hover { transform:translateY(-6px); box-shadow:var(--glow); }
.card-icon { font-size:2rem; color:var(--accent); margin-bottom:var(--s2); }
.services-grid h3 { margin-bottom:.5rem; font-size:var(--flg); }
.services-grid p { font-size:var(--fsm); }

/* ── 9. CAROUSEL ── */
.carousel { position:relative; overflow:hidden; border-radius:var(--r3); }
.carousel-track { display:flex; transition:transform .55s cubic-bezier(.77,0,.18,1); }
.testi-slide { flex:0 0 100%; padding:var(--s6) var(--s5); }
.testi-quote { font-size:var(--flg); line-height:1.75; color:var(--text2); margin-bottom:var(--s4); }
.testi-author { display:flex; align-items:center; gap:var(--s3); }
.testi-avatar {
  width:50px; height:50px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:grid; place-items:center;
  font-weight:800; color:#fff; flex-shrink:0;
}
.testi-author strong { display:block; color:var(--text); }
.testi-author span { font-size:var(--fsm); color:var(--text2); }
.carousel-controls {
  display:flex; align-items:center; justify-content:center;
  gap:var(--s4); padding:var(--s3) 0 var(--s2);
}
.carousel-btn {
  width:42px; height:42px; border-radius:50%;
  background:var(--surface); border:1px solid var(--border);
  color:var(--text); font-size:1.4rem;
  display:grid; place-items:center;
  transition:all .25s;
}
.carousel-btn:hover { background:var(--accent); color:#fff; box-shadow:var(--glow-sm); }
.carousel-dots { display:flex; gap:.45rem; }
.c-dot {
  width:9px; height:9px; border-radius:50%;
  background:var(--border); border:none; cursor:pointer;
  transition:background .3s,transform .3s;
}
.c-dot.active { background:var(--accent); transform:scale(1.35); }

/* ── 10. ABOUT ── */
.about-grid {
  display:grid; grid-template-columns:1fr 1.15fr;
  gap:var(--s6); align-items:center;
  padding-bottom:var(--s6);
}
.about-img-wrap img {
  width:100%; max-width:400px; aspect-ratio:1;
  object-fit:cover; border-radius:var(--r3);
  margin:0 auto; border:2px solid var(--border);
}
.profile-fallback {
  display:none;
  width:100%; max-width:400px; aspect-ratio:1;
  place-items:center;
  font-size:5rem; font-weight:900; color:var(--text);
  margin:0 auto;
}
.about-copy h1 { font-size:var(--fh2); margin:.2rem 0 var(--s3); }
.about-copy p { margin-bottom:var(--s3); font-size:var(--flg); }
.about-copy .btn { margin-top:var(--s2); }

/* Progress bars */
.skills-card { padding:var(--s5); }
.progress-item { margin-bottom:var(--s4); }
.progress-item:last-child { margin-bottom:0; }
.progress-top {
  display:flex; justify-content:space-between;
  font-weight:600; color:var(--text);
  margin-bottom:.45rem; font-size:var(--fsm);
}
.progress-bar {
  height:12px; border-radius:var(--rnd);
  background:rgba(148,163,184,.14); overflow:hidden;
}
.progress-fill {
  width:0; height:100%; border-radius:inherit;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  transition:width 1.4s cubic-bezier(.22,1,.36,1);
}

/* Timeline */
.timeline {
  display:grid; gap:var(--s3);
  position:relative; padding-left:var(--s5);
}
.timeline::before {
  content:"";
  position:absolute; left:12px; top:0; bottom:0;
  width:2px;
  background:linear-gradient(to bottom,var(--accent),transparent);
}
.timeline-item { position:relative; padding:var(--s4); }
.timeline-item::before {
  content:"";
  position:absolute;
  left:calc(-1 * var(--s4) - 5px);
  top:var(--s5);
  width:13px; height:13px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 5px rgba(99,102,241,.15);
}
.tl-year { display:inline-block; color:var(--accent); font-weight:700; font-size:var(--fsm); margin-bottom:.4rem; }
.timeline-item h3 { margin-bottom:.4rem; }
.timeline-item p { font-size:var(--fsm); }

/* ── 11. PROJECTS ── */
.filter-bar { display:flex; flex-wrap:wrap; gap:.6rem; padding:.85rem 1rem; margin-bottom:var(--s5); }
.filter-btn {
  padding:.65rem 1.05rem;
  border-radius:var(--rnd);
  border:1px solid var(--border);
  color:var(--text2);
  font-weight:600; font-size:var(--fsm);
  transition:all .25s;
}
.filter-btn.active,.filter-btn:hover {
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border-color:transparent; color:#fff;
}

/* Work in Progress badge */
.btn-wip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1.2rem;
  border-radius: var(--r2);
  font-size: var(--fsm);
  font-weight: 700;
  letter-spacing: .04em;
  background: rgba(234,179,8,.10);
  color: #ca8a04;
  border: 1px solid rgba(234,179,8,.25);
  cursor: not-allowed;
  opacity: .85;
  pointer-events: disabled;
  user-select: none;
}

body.light .btn-wip {
  background: rgba(234,179,8,.12);
  color: #92610a;
  border-color: rgba(234,179,8,.30);
}

/* Icona rotante */
.btn-wip::before,
.btn-wip::after {
  content: '⚙';
  display: inline-block;
  animation: wip-spin 3s linear infinite;
}

@keyframes wip-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
  

.projects-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.proj-card {
  overflow:hidden;
  transition:transform .3s,box-shadow .3s;
}
.proj-card:hover { transform:translateY(-8px); box-shadow:var(--glow); }
.proj-card.hidden { display:none; }
.proj-img {
  height:200px; position:relative; overflow:hidden;
  border-radius:var(--r3) var(--r3) 0 0;
  display:flex; align-items:center; justify-content:center;
}
.proj-img img {
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transition:transform .45s;
}
.proj-card:hover .proj-img img { transform:scale(1.07); }
.bg-violet { background:linear-gradient(135deg,#6366f1,#7c3aed); }
.bg-blue   { background:linear-gradient(135deg,#3b82f6,#6366f1); }
.bg-pink   { background:linear-gradient(135deg,#8b5cf6,#ec4899); }
.bg-teal   { background:linear-gradient(135deg,#0ea5e9,#6366f1); }
.bg-green  { background:linear-gradient(135deg,#10b981,#3b82f6); }
.bg-orange { background:linear-gradient(135deg,#f59e0b,#ef4444); }
.proj-overlay {
  position:absolute; inset:auto 0 0 0;
  padding:.9rem 1rem;
  background:linear-gradient(transparent,rgba(0,0,0,.72));
  color:#fff; font-size:var(--fsm); font-weight:500;
  transform:translateY(100%);
  transition:transform .3s; z-index:1;
}
.proj-card:hover .proj-overlay { transform:translateY(0); }
.proj-body { padding:var(--s3) var(--s3) var(--s4); }
.proj-body h3 { margin-bottom:.4rem; }
.proj-body > p { font-size:var(--fsm); margin-bottom:.8rem; }
.proj-tags { display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:var(--s3); }
.proj-tags span {
  padding:.35rem .75rem; border-radius:var(--rnd);
  background:rgba(99,102,241,.10);
  font-size:var(--fxs); font-weight:600; color:var(--text);
}
.proj-actions { display:flex; gap:.6rem; flex-wrap:wrap; }

/* ── 12. CONTACT ── */
.contact-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:var(--s6); align-items:start; }
.contact-copy h1 { font-size:var(--fh2); margin:.2rem 0 var(--s3); }
.contact-copy > p { font-size:var(--flg); margin-bottom:var(--s4); }
.contact-info { padding:var(--s4); display:grid; gap:var(--s2); }
.contact-info a,.contact-info p { font-size:var(--fsm); color:var(--text2); transition:color .25s; margin:0; }
.contact-info a:hover { color:var(--accent); }
.contact-form-wrap { padding:var(--s5); }
.field-group { position:relative; margin-bottom:var(--s4); }
.field-group input,
.field-group textarea {
  width:100%;
  padding:1.2rem 1rem .75rem;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:var(--r2);
  color:var(--text); outline:none;
  transition:border-color .25s,box-shadow .25s;
}
body.light .field-group input,
body.light .field-group textarea { background:rgba(255,255,255,.7); }
.field-group textarea { resize:vertical; min-height:130px; }
.field-group input:focus,
.field-group textarea:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(99,102,241,.12);
}
.field-group label {
  position:absolute; left:1rem; top:1.05rem;
  color:var(--text2); pointer-events:none;
  transition:top .22s ease,font-size .22s ease,color .22s ease;
  padding:0 .25rem; font-size:var(--fmd);
}
.field-group input:focus + label,
.field-group input:not(:placeholder-shown) + label,
.field-group textarea:focus + label,
.field-group textarea:not(:placeholder-shown) + label {
  top:-.65rem; font-size:var(--fxs);
  color:var(--accent); background:var(--bg); border-radius:6px;
}
.field-err { display:block; min-height:1rem; margin-top:.3rem; font-size:var(--fxs); color:var(--danger); }
.field-group.err input,.field-group.err textarea { border-color:var(--danger); }
.field-group.ok  input,.field-group.ok  textarea { border-color:var(--success); }
.form-alert {
  margin-top:var(--s3); padding:.85rem 1rem;
  border-radius:var(--r2); font-size:var(--fsm);
  opacity:0; transform:translateY(8px);
  transition:opacity .3s,transform .3s;
  display:none;
}
.form-alert.show { display:block; opacity:1; transform:translateY(0); }
.form-alert.ok   { background:rgba(34,197,94,.10);  border:1px solid rgba(34,197,94,.25);  color:var(--success); }
.form-alert.fail { background:rgba(239,68,68,.10);  border:1px solid rgba(239,68,68,.25);  color:var(--danger); }

/* ── 13. FOOTER ── */
.site-footer { margin-top:var(--s7); }
.footer-line {
  height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),var(--accent2),transparent);
  margin-bottom:var(--s5);
}
.footer-inner {
  display:grid; grid-template-columns:1fr auto auto;
  gap:var(--s4); align-items:center;
  padding-bottom:var(--s3);
}
.footer-brand { display:flex; align-items:center; gap:var(--s3); }
.footer-brand p { margin:0; color:var(--text2); font-size:var(--fsm); }
.footer-nav { display:flex; gap:var(--s4); flex-wrap:wrap; }
.footer-nav a { color:var(--text2); font-size:var(--fsm); transition:color .25s; }
.footer-nav a:hover { color:var(--text); }
.footer-social { display:flex; gap:var(--s2); }
.social-link {
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--border);
  display:grid; place-items:center;
  color:var(--text2); font-size:var(--fsm);
  transition:color .25s,border-color .25s;
}
.social-link:hover { color:var(--accent); border-color:var(--accent); }
.footer-copy { padding:var(--s2) 0 var(--s6); }
.footer-copy p { font-size:var(--fsm); color:var(--text2); margin:0; }

/* ── 14. CURSORE ── 
.cursor-ring {
  position:fixed; top:0; left:0;
  border-radius:50%; pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%);
}
.cursor-ring {
  width:36px; height:36px;
  border:1.5px solid rgba(99,102,241,.55);
  transition:width .3s,height .3s,border-color .3s;
}
.cursor-ring.big {
  width:58px; height:58px;
  border-color:var(--accent);
  background:rgba(99,102,241,.06);
}
*/

/* ── 15. SCROLL REVEAL ── */
.reveal {
  opacity:0; transform:translateY(30px);
  transition:opacity .75s ease,transform .75s ease;
}
.reveal.visible { opacity:1; transform:translateY(0); }
.delay-1 { transition-delay:.13s; }
.delay-2 { transition-delay:.26s; }
.delay-3 { transition-delay:.39s; }
.stagger-card {
  opacity:0; transform:translateY(26px);
  transition:opacity .6s ease,transform .6s ease;
}
.stagger-card.visible { opacity:1; transform:translateY(0); }
.stagger-card:nth-child(1) { transition-delay:.05s; }
.stagger-card:nth-child(2) { transition-delay:.12s; }
.stagger-card:nth-child(3) { transition-delay:.19s; }
.stagger-card:nth-child(4) { transition-delay:.26s; }
.stagger-card:nth-child(5) { transition-delay:.33s; }
.stagger-card:nth-child(6) { transition-delay:.40s; }

/* ── 16. KEYFRAMES ── */
@keyframes blink       { 50% { opacity:0; } }
@keyframes scrollBounce{ 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(14px);opacity:.3} }
@keyframes floatBlob   { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-25px) scale(1.05)} }

/* ── 17. RESPONSIVE ── */
@media (max-width:1080px) {
  .services-grid,.projects-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px) {
  .hero-inner { grid-template-columns:1fr; text-align:center; }
  .hero-btns,.badge-row,.hero-role { justify-content:center; }
  .hero-card { display:none; }
  .about-grid,.contact-grid { grid-template-columns:1fr; }
  .footer-inner { grid-template-columns:1fr; justify-items:center; text-align:center; }
  .footer-nav,.footer-social { justify-content:center; }
}
.mobile-drawer,.mobile-overlay { display:none; }
@media (max-width:640px) {
  .cursor-ring { display:none; }
  .hamburger { display:inline-flex; }
  .nav-links,.nav-actions { display:none; }
  .navbar { border-radius:var(--r3); padding:.65rem .85rem; }
  .nav-menu { display:contents; }
  .mobile-drawer {
    display:block;
    position:fixed; top:0; left:0; right:0; z-index:850;
    padding-top:90px;
    transform:translateY(-110%);
    transition:transform .38s cubic-bezier(.4,0,.2,1);
    pointer-events:none;
  }
  .services-grid,.projects-grid { grid-template-columns:1fr; }
  .section { padding:4.5rem 0 3rem; }
  
}
.mobile-drawer.open { transform:translateY(0); pointer-events:auto; }
.mobile-drawer-inner {
  margin:0 .75rem;
  background:var(--surface);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border:1px solid var(--border); border-radius:var(--r3);
  box-shadow:var(--shadow-lg);
  padding:var(--s4) var(--s3) var(--s3);
  display:flex; flex-direction:column; gap:var(--s2);
}
.mobile-drawer .m-nav-link {
  display:block; padding:.9rem 1rem;
  border-radius:var(--r2);
  color:var(--text2); font-weight:500; font-size:var(--fmd);
  transition:background .22s,color .22s;
}
.mobile-drawer .m-nav-link:hover,
.mobile-drawer .m-nav-link.active { background:rgba(99,102,241,.12); color:var(--text); }
.mobile-drawer .m-sep { height:1px; background:var(--border); border:none; margin:var(--s1) 0; }
.mobile-drawer .m-actions {
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s2); padding:.3rem .4rem 0;
}
.mobile-drawer .m-actions .lang-switcher { flex:1; justify-content:center; }
.mobile-drawer .m-actions .theme-btn { flex-shrink:0; }
.mobile-overlay {
  display:block;
  position:fixed; inset:0;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(3px);
  z-index:840; opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
}
.mobile-overlay.show { opacity:1; pointer-events:auto; }