/* ════════════════════════════════════════════
   SAAD SAMIR PORTFOLIO v4 — style.css
   ════════════════════════════════════════════ */

:root {
  --gold:      #c9a84c;
  --gold-l:    #e8c97a;
  --gold-d:    #8a6b28;
  --bg:        #0e0e0e;
  --bg2:       #141414;
  --bg3:       #1a1a1a;
  --tx:        #f0ece4;
  --tx2:       #999;
  --tx3:       #555;
  --border:    rgba(255,255,255,0.07);
  --border-g:  rgba(201,168,76,0.2);
  --syne:      'Syne',sans-serif;
  --dm:        'DM Sans',sans-serif;
  --r:         10px;
  --ease:      cubic-bezier(0.16,1,0.3,1);
}

/* light mode overrides */
body.light-mode {
  --bg:     #f5f2ed;
  --bg2:    #ede9e2;
  --bg3:    #e4dfd6;
  --tx:     #1a1714;
  --tx2:    #6b6259;
  --tx3:    #a09585;
  --border: rgba(0,0,0,0.08);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--tx); font-family:var(--dm); font-size:15px; line-height:1.7; overflow-x:hidden; transition:background .4s,color .4s; }

body::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.02; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:200px; }

::selection { background:var(--gold); color:#000; }
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--gold-d); border-radius:4px; }
img { display:block; max-width:100%; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
.hidden { display:none !important; }
.gold { color:var(--gold); }

/* ── CURSOR ── */
.cursor { width:8px; height:8px; background:var(--gold); border-radius:50%; position:fixed; top:0; left:0; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); transition:transform .1s; }
.cursor-follower { width:32px; height:32px; border:1.5px solid rgba(201,168,76,0.5); border-radius:50%; position:fixed; top:0; left:0; pointer-events:none; z-index:9998; transform:translate(-50%,-50%); transition:transform .12s,width .3s,height .3s,opacity .3s; }
body.cursor-hover .cursor-follower { width:52px; height:52px; opacity:.6; }
@media(max-width:900px){ .cursor,.cursor-follower { display:none; } }

/* ── LOADER ── */
.loader { position:fixed; inset:0; z-index:10000; background:var(--bg); display:flex; align-items:center; justify-content:center; transition:opacity .6s,visibility .6s; }
.loader.hidden { opacity:0; visibility:hidden; pointer-events:none; }
.loader-inner { text-align:center; }
.loader-initials { font-family:var(--syne); font-size:4.5rem; font-weight:800; color:var(--gold); letter-spacing:-.05em; margin-bottom:1.5rem; animation:pulse-scale 1.2s ease infinite; }
@keyframes pulse-scale { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
.loader-bar { width:200px; height:2px; background:rgba(255,255,255,.08); border-radius:2px; overflow:hidden; margin:0 auto .9rem; }
.loader-fill { height:100%; background:var(--gold); border-radius:2px; width:0; transition:width .08s linear; }
.loader-text { font-size:11px; color:var(--tx3); letter-spacing:.12em; text-transform:uppercase; }

/* nav starts hidden, JS reveals after load */
nav { opacity:0; transition:opacity .4s ease, background .3s, border .3s; }
nav.ready { opacity:1; }

/* ── THEME TOGGLE ── */
.theme-toggle { background:rgba(255,255,255,.05); border:.5px solid var(--border); border-radius:50%; width:36px; height:36px; display:flex; align-items:center; justify-content:center; font-size:.95rem; cursor:pointer; transition:all .25s; flex-shrink:0; }
.theme-toggle:hover { background:rgba(201,168,76,.15); border-color:var(--border-g); }

/* ── BACK TO TOP ── */
.back-to-top { position:fixed; bottom:6rem; right:2rem; z-index:600; width:44px; height:44px; border-radius:50%; background:var(--gold); border:none; color:#000; font-size:1.2rem; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 16px rgba(201,168,76,.3); transition:all .3s; opacity:0; transform:translateY(10px); }
.back-to-top.visible { opacity:1; transform:translateY(0); }
.back-to-top:hover { transform:translateY(-3px); background:var(--gold-l); }

/* ── WHATSAPP ── */
.whatsapp-btn { position:fixed; bottom:2rem; right:2rem; z-index:600; width:52px; height:52px; border-radius:50%; background:#25d366; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 20px rgba(37,211,102,.35); transition:transform .25s,box-shadow .25s; color:#fff; }
.whatsapp-btn svg { width:26px; height:26px; }
.whatsapp-btn:hover { transform:scale(1.1); box-shadow:0 8px 28px rgba(37,211,102,.45); }

/* ── PULSE DOT ── */
.pulse-dot { width:7px; height:7px; border-radius:50%; background:#4caf50; position:relative; flex-shrink:0; }
.pulse-dot::after { content:''; position:absolute; inset:-3px; border-radius:50%; border:1px solid #4caf50; animation:pulse 2s ease infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0;transform:scale(1.8)} }

/* ── BUTTONS ── */
.btn { display:inline-flex; align-items:center; gap:7px; padding:.7rem 1.5rem; font-size:13px; font-family:var(--syne); font-weight:600; border-radius:100px; transition:all .25s var(--ease); cursor:pointer; border:none; letter-spacing:.02em; }
.btn-primary { background:var(--gold); color:#000; }
.btn-primary:hover { background:var(--gold-l); transform:translateY(-2px); box-shadow:0 8px 24px rgba(201,168,76,.28); }
.btn-ghost { background:transparent; color:var(--tx); border:.5px solid var(--border); }
.btn-ghost:hover { border-color:var(--gold); color:var(--gold); transform:translateY(-2px); }
.btn-full { width:100%; justify-content:center; }

/* ── NAV ── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 2.5rem;
  gap: 1rem;
  transition: background .3s, border .3s;
  overflow: visible;
}
nav.scrolled { background:rgba(14,14,14,.95); backdrop-filter:blur(20px); border-bottom:.5px solid var(--border); }
body.light-mode nav.scrolled { background:rgba(245,242,237,.95); }

.nav-logo { font-family:var(--syne); font-size:1.3rem; font-weight:700; letter-spacing:-.01em; flex-shrink:0; line-height:1; white-space:nowrap; }

.nav-links {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  margin: 0; padding: 0;
  flex: 1;
  justify-content: center;
}
.nav-links li { display:inline-flex; }
.nav-links a { font-size:13px; color:var(--tx2); transition:color .2s; white-space:nowrap; line-height:1; }
.nav-links a:hover { color:var(--tx); }

.nav-right { display:flex; flex-direction:row; align-items:center; gap:.65rem; flex-shrink:0; }
.nav-available { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--tx2); white-space:nowrap; }

.nav-burger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; z-index:601; }
.nav-burger span { display:block; width:22px; height:1.5px; background:var(--tx); border-radius:2px; transition:all .3s; }
.nav-burger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity:0; }
.nav-burger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

/* mobile menu */
.mobile-menu { display:none; position:fixed; inset:0; z-index:490; background:rgba(14,14,14,.97); backdrop-filter:blur(20px); flex-direction:column; align-items:center; justify-content:center; }
body.light-mode .mobile-menu { background:rgba(245,242,237,.97); }
.mobile-menu.open { display:flex; }
.mobile-menu-close { position:absolute; top:1.5rem; right:1.5rem; background:none; border:none; color:var(--tx); font-size:2rem; cursor:pointer; line-height:1; }
.mobile-menu ul { display:flex; flex-direction:column; gap:2rem; text-align:center; }
.mobile-menu a { font-family:var(--syne); font-size:1.75rem; font-weight:700; color:var(--tx); transition:color .2s; }
.mobile-menu a:hover { color:var(--gold); }

/* ── HERO ── */
.hero-wrapper { min-height:100vh; display:flex; align-items:center; padding:6.5rem 2.5rem 4rem; position:relative; overflow:hidden; }
.hero-bg-glow { position:absolute; top:-30%; right:-15%; width:800px; height:800px; border-radius:50%; background:radial-gradient(circle,rgba(201,168,76,.07) 0%,transparent 70%); pointer-events:none; }
.hero-bg-glow2 { position:absolute; bottom:-20%; left:-10%; width:500px; height:500px; border-radius:50%; background:radial-gradient(circle,rgba(201,168,76,.04) 0%,transparent 70%); pointer-events:none; }
.hero-grid { max-width:1100px; margin:0 auto; width:100%; display:grid; grid-template-columns:1fr 380px; gap:5rem; align-items:center; position:relative; z-index:1; }

.hero-tag { display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--gold); letter-spacing:.1em; text-transform:uppercase; padding:.4rem 1rem; background:rgba(201,168,76,.08); border:.5px solid rgba(201,168,76,.2); border-radius:100px; margin-bottom:1.5rem; animation:fadeUp .7s .1s ease both; }
.hero-name { font-family:var(--syne); font-size:clamp(3rem,6vw,5.5rem); font-weight:800; line-height:1.0; letter-spacing:-.03em; margin-bottom:1.4rem; }
.line { display:block; overflow:hidden; }
.line-inner { display:inline-block; transform:translateY(110%); animation:slideUp .85s var(--ease) both; }
.line:nth-child(2) .line-inner { animation-delay:.12s; }
@keyframes slideUp { to { transform:translateY(0); } }
.hero-sub { font-size:15px; color:var(--tx2); line-height:1.85; max-width:500px; margin-bottom:2rem; animation:fadeUp .7s .35s ease both; }
.hero-actions { display:flex; gap:.9rem; flex-wrap:wrap; margin-bottom:2.5rem; animation:fadeUp .7s .45s ease both; }

.stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border-radius:var(--r); overflow:hidden; animation:fadeUp .7s .55s ease both; }
.stat-box { background:var(--bg2); padding:1.2rem .5rem; text-align:center; }
.stat-num { display:block; font-family:var(--syne); font-size:1.7rem; font-weight:700; color:var(--gold); }
.stat-lbl { display:block; font-size:11px; color:var(--tx3); letter-spacing:.06em; text-transform:uppercase; margin-top:.2rem; }

.hero-right { display:flex; flex-direction:column; align-items:center; gap:.9rem; animation:fadeUp .85s .3s ease both; }
.profile-ring { width:100%; aspect-ratio:1; border-radius:50%; padding:3px; background:conic-gradient(var(--gold) 0deg,var(--gold-d) 120deg,transparent 200deg,var(--gold) 360deg); animation:spin 10s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.profile-inner { width:100%; height:100%; border-radius:50%; background:var(--bg3); overflow:hidden; display:flex; align-items:center; justify-content:center; position:relative; }
.profile-initials { font-family:var(--syne); font-size:4.5rem; font-weight:800; color:var(--gold); letter-spacing:-.05em; }
.profile-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.profile-badge { display:flex; align-items:center; gap:7px; background:rgba(14,14,14,.88); border:.5px solid var(--border); border-radius:100px; padding:.45rem 1rem; font-size:12px; color:var(--tx2); backdrop-filter:blur(8px); }
body.light-mode .profile-badge { background:rgba(245,242,237,.88); }
.profile-visits { font-size:12px; color:var(--tx3); display:flex; align-items:center; gap:5px; }

/* profile upload overlay (admin only) */
.profile-upload-overlay { position:absolute; inset:0; border-radius:50%; background:rgba(0,0,0,.55); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem; cursor:pointer; opacity:0; transition:opacity .25s; z-index:2; color:#fff; }
.profile-upload-overlay:hover { opacity:1; }
.profile-upload-overlay span { font-size:11px; letter-spacing:.05em; text-transform:uppercase; }
.profile-upload-overlay input { display:none; }
.profile-inner.admin-mode { cursor:pointer; }
.profile-inner.admin-mode:hover .profile-upload-overlay { opacity:1; }

/* ── NUMBERS ── */
.numbers-section { padding:3rem 2.5rem; }
.numbers-grid { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border-radius:var(--r); overflow:hidden; }
.number-card { background:var(--bg2); padding:2rem; text-align:center; transition:background .2s; }
.number-card:hover { background:var(--bg3); }
.number-big { display:block; font-family:var(--syne); font-size:2.5rem; font-weight:800; color:var(--gold); }
.number-label { display:block; font-size:12px; color:var(--tx3); letter-spacing:.07em; text-transform:uppercase; margin-top:.35rem; }

/* ── SECTION BASE ── */
.section-divider { border:none; border-top:.5px solid var(--border); max-width:1100px; margin:0 auto; }
.section { padding:6rem 2.5rem; max-width:1100px; margin:0 auto; }
.sec-label { display:flex; align-items:center; gap:.75rem; font-size:11px; color:var(--gold); letter-spacing:.15em; text-transform:uppercase; margin-bottom:.6rem; }
.sec-label::before { content:''; display:block; width:20px; height:1px; background:var(--gold); }
.sec-title { font-family:var(--syne); font-size:clamp(1.9rem,3.8vw,3rem); font-weight:700; line-height:1.1; letter-spacing:-.02em; margin-bottom:2.75rem; }

/* ── TIMELINE ── */
.timeline { position:relative; padding-left:2rem; }
.timeline::before { content:''; position:absolute; left:0; top:0; bottom:0; width:1px; background:var(--border); }
.timeline-item { position:relative; padding:0 0 3rem 2.5rem; }
.timeline-item:last-child { padding-bottom:0; }
.timeline-dot { position:absolute; left:-2rem; top:.25rem; width:14px; height:14px; border-radius:50%; background:var(--gold); border:3px solid var(--bg); box-shadow:0 0 0 3px rgba(201,168,76,.2); transform:translateX(calc(-50% + .5px)); }
.timeline-period { font-size:11px; letter-spacing:.06em; color:var(--gold); text-transform:uppercase; margin-bottom:.3rem; }
.timeline-company { font-size:14px; font-weight:500; color:var(--tx); margin-bottom:.15rem; }
.timeline-location { font-size:12px; color:var(--tx3); margin-bottom:.75rem; }
.timeline-role { font-family:var(--syne); font-size:1.2rem; font-weight:600; letter-spacing:-.01em; margin-bottom:.8rem; }
.timeline-bullets { display:flex; flex-direction:column; gap:.35rem; }
.timeline-bullets li { font-size:13.5px; color:var(--tx2); line-height:1.75; display:flex; gap:8px; }
.timeline-bullets li::before { content:'·'; color:var(--gold); font-size:1.3rem; line-height:1.35; flex-shrink:0; }

/* ── SERVICES ── */
.services-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.2rem; }
.service-card { background:var(--bg2); border:.5px solid var(--border); border-radius:var(--r); padding:2rem; position:relative; overflow:hidden; transition:all .3s var(--ease); }
.service-card:hover { border-color:rgba(201,168,76,.3); transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.3); }
.service-card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(201,168,76,.04) 0%,transparent 60%); opacity:0; transition:opacity .3s; }
.service-card:hover::before { opacity:1; }
.service-num { font-family:var(--syne); font-size:3rem; font-weight:800; color:rgba(201,168,76,.1); position:absolute; top:1rem; right:1.5rem; line-height:1; }
.service-icon { width:44px; height:44px; background:rgba(201,168,76,.1); border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:.9rem; color:var(--gold); }
.service-icon svg { width:22px; height:22px; stroke:var(--gold); }
.service-card h3 { font-family:var(--syne); font-size:1.05rem; font-weight:700; margin-bottom:.6rem; }
.service-card p { font-size:13.5px; color:var(--tx2); line-height:1.75; }

/* ── PROJECT FILTERS ── */
.proj-filters { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem; }
.filter-btn { padding:.45rem 1.1rem; font-size:12px; font-family:var(--syne); font-weight:600; border-radius:100px; border:.5px solid var(--border); background:transparent; color:var(--tx2); cursor:pointer; transition:all .2s; letter-spacing:.03em; }
.filter-btn:hover { border-color:var(--border-g); color:var(--gold); }
.filter-btn.active { background:var(--gold); color:#000; border-color:var(--gold); }

/* ── PROJECTS ── */
.proj-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.2rem; }
.proj-card { background:var(--bg2); border:.5px solid var(--border); border-radius:var(--r); overflow:hidden; cursor:pointer; transition:transform .3s var(--ease),border-color .3s,box-shadow .3s; position:relative; }
.proj-card:hover { transform:translateY(-5px); border-color:rgba(201,168,76,.35); box-shadow:0 20px 40px rgba(0,0,0,.4); }
.proj-card.filtered-out { display:none; }
.proj-img-wrap { overflow:hidden; height:210px; }
.proj-img { width:100%; height:210px; object-fit:cover; transition:transform .4s ease; }
.proj-card:hover .proj-img { transform:scale(1.05); }
.proj-placeholder { width:100%; height:210px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; background:var(--bg3); }
.proj-placeholder-icon { font-size:2.5rem; opacity:.2; }
.proj-placeholder span { font-size:11px; color:var(--tx3); letter-spacing:.08em; text-transform:uppercase; }
.proj-overlay { position:absolute; top:0; left:0; right:0; height:210px; background:rgba(201,168,76,.07); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .3s; }
.proj-card:hover .proj-overlay { opacity:1; }
.proj-overlay-icon { width:50px; height:50px; border-radius:50%; background:rgba(201,168,76,.9); display:flex; align-items:center; justify-content:center; font-size:1.3rem; color:#000; font-weight:700; }
.proj-body { padding:1.3rem 1.4rem; }
.proj-tag-row { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:.65rem; }
.proj-tag { font-size:10px; padding:2px 8px; background:rgba(201,168,76,.08); color:var(--gold); border-radius:100px; border:.5px solid rgba(201,168,76,.15); letter-spacing:.04em; }
.proj-name { font-family:var(--syne); font-size:1.1rem; font-weight:700; letter-spacing:-.01em; margin-bottom:.4rem; }
.proj-scope { font-size:13px; color:var(--tx2); line-height:1.65; }
.proj-arrow { text-align:right; margin-top:.9rem; font-size:18px; color:var(--gold); opacity:.45; transition:opacity .3s; }
.proj-card:hover .proj-arrow { opacity:1; }

/* ── SKILLS ── */
.skills-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:.9rem; }
.skill-card { background:var(--bg2); border:.5px solid var(--border); border-radius:var(--r); padding:1.4rem; transition:border-color .25s,transform .25s; }
.skill-card:hover { border-color:rgba(201,168,76,.3); transform:translateY(-3px); }
.skill-icon { width:38px; height:38px; border-radius:9px; background:rgba(201,168,76,.1); display:flex; align-items:center; justify-content:center; font-size:18px; margin-bottom:.9rem; }
.skill-name { font-family:var(--syne); font-size:.95rem; font-weight:600; margin-bottom:.65rem; }
.tags { display:flex; flex-wrap:wrap; gap:5px; }
.tag { font-size:11px; padding:3px 9px; background:rgba(255,255,255,.04); color:var(--tx2); border-radius:100px; border:.5px solid var(--border); }
body.light-mode .tag { background:rgba(0,0,0,.04); }

/* ── CERTS ── */
.certs-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:.65rem; }
.cert { display:flex; align-items:center; gap:10px; padding:.85rem 1.1rem; background:var(--bg2); border:.5px solid var(--border); border-radius:7px; font-size:13px; color:var(--tx2); transition:border-color .2s,color .2s; }
.cert:hover { border-color:rgba(201,168,76,.3); color:var(--tx); }
.cert-dot { width:5px; height:5px; border-radius:50%; background:var(--gold); flex-shrink:0; }

/* ── TESTIMONIALS ── */
.testimonials-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.2rem; }
.testimonial-card { background:var(--bg2); border:.5px solid var(--border); border-radius:var(--r); padding:2rem; position:relative; transition:border-color .25s,transform .25s; }
.testimonial-card:hover { border-color:rgba(201,168,76,.25); transform:translateY(-3px); }
.testimonial-quote { font-family:var(--syne); font-size:4rem; font-weight:800; color:var(--gold); opacity:.2; line-height:.8; margin-bottom:.75rem; }
.testimonial-text { font-size:14px; color:var(--tx2); line-height:1.8; font-style:italic; margin-bottom:1.25rem; }
.testimonial-author { display:flex; align-items:center; gap:.75rem; }
.testimonial-avatar { width:40px; height:40px; border-radius:50%; background:rgba(201,168,76,.12); display:flex; align-items:center; justify-content:center; font-family:var(--syne); font-size:.85rem; font-weight:700; color:var(--gold); flex-shrink:0; }
.testimonial-name { font-size:14px; font-weight:500; }
.testimonial-role { font-size:12px; color:var(--tx3); }

/* ── EDUCATION ── */
.edu-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:start; }
.edu-card,.lang-card { background:var(--bg2); border:.5px solid var(--border); border-radius:var(--r); padding:2rem; }
.edu-badge { display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--gold); background:rgba(201,168,76,.08); border:.5px solid rgba(201,168,76,.15); border-radius:100px; padding:.3rem .8rem; letter-spacing:.06em; margin-bottom:1rem; }
.edu-degree { font-family:var(--syne); font-size:1.25rem; font-weight:700; line-height:1.3; margin-bottom:.3rem; }
.edu-field { font-size:13px; color:var(--gold); margin-bottom:.25rem; }
.edu-uni   { font-size:13px; color:var(--tx2); }
.lang-heading { font-size:11px; color:var(--tx3); text-transform:uppercase; letter-spacing:.1em; margin-bottom:1.4rem; }
.lang-item { margin-bottom:1.25rem; }
.lang-item:last-child { margin-bottom:0; }
.lang-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:.45rem; }
.lang-name-txt { font-size:14px; font-weight:500; }
.lang-lvl-txt  { font-size:12px; color:var(--tx3); }
.lang-bar { height:2px; background:rgba(255,255,255,.06); border-radius:2px; overflow:hidden; }
body.light-mode .lang-bar { background:rgba(0,0,0,.06); }
.lang-fill { height:100%; background:linear-gradient(90deg,var(--gold-d),var(--gold)); border-radius:2px; transition:width 1.5s var(--ease); }

/* ── CONTACT ── */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:start; }
.contact-links { display:flex; flex-direction:column; gap:1rem; }
.contact-link { display:flex; align-items:center; gap:12px; padding:1.1rem 1.3rem; background:var(--bg2); border:.5px solid var(--border); border-radius:var(--r); transition:border-color .25s,transform .25s; }
.contact-link:hover { border-color:rgba(201,168,76,.3); transform:translateX(4px); }
.contact-link-icon { width:42px; height:42px; border-radius:9px; background:rgba(201,168,76,.08); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.contact-link-label { font-size:11px; color:var(--tx3); text-transform:uppercase; letter-spacing:.06em; margin-bottom:2px; }
.contact-link-value { font-size:14px; font-weight:500; }
.contact-form-card { background:var(--bg2); border:.5px solid var(--border); border-radius:var(--r); padding:2rem; }
.form-row { margin-bottom:1rem; }
.form-row label { display:block; font-size:11px; color:var(--tx3); text-transform:uppercase; letter-spacing:.06em; margin-bottom:.4rem; }
.form-row input,.form-row textarea { width:100%; background:rgba(255,255,255,.03); border:.5px solid var(--border); border-radius:7px; color:var(--tx); font-family:var(--dm); font-size:13px; padding:.65rem .9rem; outline:none; transition:border-color .2s; resize:vertical; }
body.light-mode .form-row input,body.light-mode .form-row textarea { background:rgba(0,0,0,.03); }
.form-row input:focus,.form-row textarea:focus { border-color:rgba(201,168,76,.4); }
.form-success { display:none; font-size:13px; color:#4caf50; margin-top:.75rem; text-align:center; }

/* ── FOOTER ── */
footer { border-top:.5px solid var(--border); padding:3rem 2.5rem 2rem; }
.footer-top { max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1.5rem; margin-bottom:2rem; padding-bottom:2rem; border-bottom:.5px solid var(--border); }
.footer-brand { font-family:var(--syne); font-size:1.35rem; font-weight:700; }
.footer-nav { display:flex; gap:1.75rem; flex-wrap:wrap; }
.footer-nav a { font-size:13px; color:var(--tx2); transition:color .2s; }
.footer-nav a:hover { color:var(--gold); }
.footer-social { display:flex; gap:.75rem; }
.social-btn { padding:.45rem 1rem; border:.5px solid var(--border); border-radius:100px; font-size:12px; color:var(--tx2); transition:all .2s; }
.social-btn:hover { border-color:var(--gold); color:var(--gold); }
.footer-bottom { max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem; }
.footer-copy,.footer-role { font-size:12px; color:var(--tx3); }

/* ── MODAL ── */
.modal-overlay { display:none; position:fixed; inset:0; z-index:700; background:rgba(0,0,0,.92); backdrop-filter:blur(8px); padding:2rem; align-items:center; justify-content:center; }
.modal-overlay.open { display:flex; }
.modal-box { background:var(--bg2); border:.5px solid var(--border); border-radius:16px; max-width:860px; width:100%; max-height:88vh; overflow-y:auto; position:relative; }
.modal-close { position:absolute; top:1rem; right:1rem; background:rgba(255,255,255,.06); border:none; color:var(--tx); width:34px; height:34px; border-radius:50%; cursor:pointer; font-size:20px; display:flex; align-items:center; justify-content:center; z-index:10; transition:background .2s; }
.modal-close:hover { background:rgba(255,255,255,.14); }
.modal-head { padding:1.75rem 1.75rem .75rem; }
.modal-tags { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:.75rem; }
.modal-title { font-family:var(--syne); font-size:1.6rem; font-weight:700; letter-spacing:-.02em; margin-bottom:.5rem; }
.modal-desc { font-size:14px; color:var(--tx2); line-height:1.75; }

/* ── SWIPE GALLERY ── */
.swipe-gallery { position:relative; overflow:hidden; margin:0 1.75rem 1.75rem; border-radius:10px; }
.swipe-gallery.empty { padding:2rem; text-align:center; color:var(--tx3); font-size:13px; }
.swipe-track { display:flex; transition:transform .4s var(--ease); }
.swipe-slide { min-width:100%; height:300px; flex-shrink:0; }
.swipe-slide img { width:100%; height:100%; object-fit:cover; cursor:pointer; }
.swipe-prev,.swipe-next { position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.5); border:none; color:#fff; width:40px; height:40px; border-radius:50%; font-size:1.3rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s; z-index:5; }
.swipe-prev { left:.75rem; }
.swipe-next { right:.75rem; }
.swipe-prev:hover,.swipe-next:hover { background:rgba(201,168,76,.6); }
.swipe-dots { position:absolute; bottom:.75rem; left:50%; transform:translateX(-50%); display:flex; gap:.4rem; }
.swipe-dot { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.35); cursor:pointer; transition:background .2s; }
.swipe-dot.active { background:var(--gold); }

/* ── LIGHTBOX ── */
.lightbox { display:none; position:fixed; inset:0; z-index:900; background:rgba(0,0,0,.96); align-items:center; justify-content:center; }
.lightbox.open { display:flex; }
.lightbox img { max-width:90vw; max-height:90vh; object-fit:contain; border-radius:8px; }
.lightbox-close { position:absolute; top:1.5rem; right:1.5rem; background:none; border:none; color:#fff; font-size:2rem; cursor:pointer; }

/* ── ADMIN FAB ── */
.admin-fab { position:fixed; bottom:2rem; left:2rem; z-index:600; width:52px; height:52px; border-radius:50%; background:var(--bg3); border:.5px solid var(--border); cursor:pointer; font-size:1.2rem; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 20px rgba(0,0,0,.4); transition:transform .2s,border-color .2s; }
.admin-fab:hover { transform:scale(1.08); border-color:var(--gold); }

/* ── ADMIN PANEL ── */
.admin-overlay { display:none; position:fixed; inset:0; z-index:800; background:rgba(0,0,0,.6); backdrop-filter:blur(4px); align-items:flex-start; justify-content:flex-end; }
.admin-overlay.open { display:flex; }
.admin-panel { background:#131313; border-left:.5px solid var(--border); width:min(560px,100vw); height:100vh; overflow-y:auto; padding:1.75rem; }
.admin-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; padding-bottom:1rem; border-bottom:.5px solid var(--border); }
.admin-title { font-family:var(--syne); font-size:1.2rem; font-weight:700; color:var(--gold); }
.admin-close { background:none; border:none; color:var(--tx2); font-size:22px; cursor:pointer; transition:color .2s; }
.admin-close:hover { color:var(--tx); }
.admin-tabs { display:flex; border:.5px solid var(--border); border-radius:7px; overflow:hidden; margin-bottom:1.5rem; }
.atab { flex:1; padding:.5rem .2rem; font-size:11px; letter-spacing:.06em; text-transform:uppercase; background:none; border:none; color:var(--tx3); cursor:pointer; transition:all .2s; font-family:var(--syne); font-weight:600; }
.atab.active { background:rgba(201,168,76,.14); color:var(--gold); }
.asec { display:none; } .asec.active { display:block; }
.admin-sec-title { font-family:var(--syne); font-size:.85rem; font-weight:600; color:var(--tx2); margin:1.25rem 0 .75rem; text-transform:uppercase; letter-spacing:.05em; }
.admin-sec-title small { font-size:.75rem; font-weight:400; color:var(--tx3); text-transform:none; }
.fg { margin-bottom:.9rem; }
.fg-row { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.fg label { display:block; font-size:11px; color:var(--tx3); text-transform:uppercase; letter-spacing:.07em; margin-bottom:.35rem; }
.fg input,.fg textarea { width:100%; background:rgba(255,255,255,.04); border:.5px solid var(--border); border-radius:5px; color:var(--tx); font-family:var(--dm); font-size:13px; padding:.52rem .7rem; outline:none; transition:border-color .2s; resize:vertical; }
.fg input:focus,.fg textarea:focus { border-color:rgba(201,168,76,.4); }
.fg textarea { min-height:75px; }
.save-btn { width:100%; padding:.65rem; background:var(--gold); color:#000; border:none; border-radius:7px; font-size:12px; font-family:var(--syne); font-weight:700; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; transition:background .2s; margin-top:.75rem; }
.save-btn:hover { background:var(--gold-l); }
.add-btn { width:100%; padding:.5rem; background:rgba(201,168,76,.06); border:.5px solid var(--border); color:var(--gold); border-radius:5px; font-size:11px; font-family:var(--syne); letter-spacing:.06em; text-transform:uppercase; cursor:pointer; transition:all .2s; margin-top:.3rem; }
.add-btn:hover { background:rgba(201,168,76,.14); }
.del-btn { background:rgba(220,50,50,.08); border:.5px solid rgba(220,50,50,.2); color:#e05555; border-radius:5px; padding:.3rem .75rem; font-size:11px; cursor:pointer; font-family:var(--dm); transition:all .2s; }
.del-btn:hover { background:rgba(220,50,50,.2); }
.a-item { background:rgba(255,255,255,.025); border:.5px solid var(--border); border-radius:7px; padding:1rem; margin-bottom:.75rem; }
.a-item summary { cursor:pointer; font-size:13px; color:var(--tx); list-style:none; display:flex; align-items:center; justify-content:space-between; }
.a-item summary::after { content:'›'; color:var(--gold); }
.a-item[open] summary::after { content:'‹'; }
.a-inner { margin-top:.9rem; display:flex; flex-direction:column; gap:.55rem; }
.prof-upload { width:150px; height:150px; border-radius:50%; border:.5px dashed rgba(201,168,76,.35); display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; transition:border-color .2s; margin:0 auto .75rem; position:relative; overflow:hidden; }
.prof-upload:hover { border-color:var(--gold); }
.prof-upload input { display:none; }
.prof-upload img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.prof-upload-icon { font-size:1.6rem; position:relative; z-index:1; }
.prof-upload p { font-size:11px; color:var(--tx3); position:relative; z-index:1; margin-top:.3rem; }
.img-up-area { border:.5px dashed rgba(201,168,76,.3); border-radius:7px; padding:1rem; text-align:center; cursor:pointer; transition:border-color .2s; }
.img-up-area:hover { border-color:var(--gold); }
.img-up-area input { display:none; }
.img-up-area p { font-size:12px; color:var(--tx3); margin-top:.3rem; }
.img-thumbs { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.6rem; }
.img-thumb { position:relative; width:68px; height:68px; }
.img-thumb img { width:68px; height:68px; object-fit:cover; border-radius:5px; border:.5px solid var(--border); }
.img-thumb-del { position:absolute; top:-5px; right:-5px; background:#c84040; border:none; border-radius:50%; width:18px; height:18px; color:#fff; font-size:11px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.skill-admin-row { display:flex; gap:.4rem; align-items:center; margin-bottom:.5rem; }
.skill-admin-row input { background:rgba(255,255,255,.04); border:.5px solid var(--border); border-radius:5px; color:var(--tx); font-family:var(--dm); font-size:12px; padding:.4rem .6rem; outline:none; }
.lang-admin-row { display:flex; gap:.4rem; align-items:center; margin-bottom:.5rem; }
.lang-admin-row input { background:rgba(255,255,255,.04); border:.5px solid var(--border); border-radius:5px; color:var(--tx); font-family:var(--dm); font-size:12px; padding:.4rem .6rem; outline:none; }

/* ── TOAST ── */
.toast { position:fixed; bottom:5.5rem; right:2rem; z-index:999; background:rgba(18,18,18,.96); border:.5px solid var(--gold); border-radius:7px; padding:.65rem 1.2rem; font-size:13px; color:var(--gold-l); pointer-events:none; opacity:0; transform:translateY(8px); transition:all .3s; }
.toast.show { opacity:1; transform:translateY(0); }

/* ── REVEAL ── */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .65s ease,transform .65s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ── ANIMATIONS ── */
@keyframes fadeUp { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }

/* ── RESPONSIVE ── */
@media(max-width:900px){
  nav { padding:1rem 1.5rem; gap:.75rem; }
  .nav-links, .nav-available { display:none; }
  .nav-burger { display:flex; }
  .theme-toggle { width:32px; height:32px; font-size:.85rem; }
  .hero-wrapper { padding:5.5rem 1.5rem 3rem; }
  .hero-grid { grid-template-columns:1fr; gap:2.5rem; }
  .profile-ring { max-width:220px; margin:0 auto; }
  .stats-row { grid-template-columns:repeat(2,1fr); }
  .numbers-grid { grid-template-columns:repeat(2,1fr); }
  .section { padding:4rem 1.5rem; }
  .numbers-section { padding:2rem 1.5rem; }
  .section-divider { margin:0 1.5rem; }
  .timeline { padding-left:1.25rem; }
  .timeline-item { padding-left:1.75rem; }
  .edu-grid,.contact-grid { grid-template-columns:1fr; }
  .footer-top { flex-direction:column; align-items:flex-start; }
  .footer-bottom { flex-direction:column; }
  .admin-fab { bottom:9rem; left:1.5rem; }
  .whatsapp-btn { bottom:2rem; right:1.5rem; }
  .back-to-top { bottom:6rem; right:1.5rem; }
}
@media(max-width:480px){
  .proj-grid,.skills-grid,.certs-grid,.services-grid,.testimonials-grid { grid-template-columns:1fr; }
  .fg-row { grid-template-columns:1fr; }
}