/* ============================================================
   SHARED STYLESHEET
   Used by index.html, blog.html, blog-post.html, admin.html
   Design tokens live in :root — change once, updates everywhere.
   ============================================================ */

:root{
  --bg:#070A0D;
  --bg-elevated:#0B0F13;
  --panel:rgba(255,255,255,0.035);
  --panel-strong:rgba(255,255,255,0.055);
  --panel-border:rgba(255,255,255,0.08);
  --panel-border-hover:rgba(52,211,153,0.35);
  --text:#E7EDF2;
  --text-muted:#8A97A3;
  --text-faint:#57626C;
  --emerald:#34D399;
  --emerald-dim:#10B981;
  --cyan:#22D3EE;
  --danger:#F87171;
  --grid-line:rgba(255,255,255,0.035);
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:9px;
  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
  --max-w:1180px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
img{max-width:100%; display:block;}
section{position:relative;}
button{font-family:inherit;}
.container{max-width:var(--max-w); margin:0 auto; padding:0 32px;}
::selection{ background:rgba(52,211,153,0.25); color:#fff; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--emerald);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- Background texture ---------- */
.bg-fixed{
  position:fixed; inset:0; z-index:-2;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:64px 64px;
  background-position:center top;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, black 40%, transparent 90%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, black 40%, transparent 90%);
}
.glow-orb{ position:fixed; border-radius:50%; filter:blur(120px); z-index:-1; pointer-events:none; opacity:0.35; animation:orbFloat 22s ease-in-out infinite; }
.glow-orb.g1{ width:520px; height:520px; top:-180px; left:-120px; background:var(--emerald-dim); }
.glow-orb.g2{ width:480px; height:480px; top:220px; right:-160px; background:var(--cyan); opacity:0.18; animation-duration:26s; animation-delay:-6s; }
.glow-orb.g3{ width:600px; height:600px; bottom:-260px; left:30%; background:var(--emerald-dim); opacity:0.12; animation-duration:30s; animation-delay:-12s; }
@keyframes orbFloat{
  0%, 100%{ transform:translate(0, 0) scale(1); }
  50%{ transform:translate(30px, -24px) scale(1.05); }
}

/* ---------- Scroll progress bar ---------- */
.scroll-progress{ position:fixed; top:0; left:0; height:2px; width:0%; z-index:200; background:linear-gradient(90deg, var(--emerald), var(--cyan)); box-shadow:0 0 8px rgba(52,211,153,0.6); transition:width .1s linear; }

/* ---------- Typography ---------- */
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; letter-spacing:-0.01em; color:#fff; }
.section-head{ display:flex; align-items:baseline; gap:18px; margin-bottom:48px; flex-wrap:wrap; }
.section-num{ font-family:var(--font-mono); font-size:0.85rem; color:var(--emerald); letter-spacing:0.04em; }
.section-head h2{ font-size:clamp(1.7rem, 3vw, 2.3rem); }
.section-sub{ color:var(--text-muted); max-width:60ch; margin-top:10px; font-size:1.02rem; }

/* ---------- Nav ---------- */
header.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  background:rgba(7,10,13,0.55);
  border-bottom:1px solid var(--panel-border);
}
.nav-inner{ max-width:var(--max-w); margin:0 auto; padding:16px 32px; display:flex; align-items:center; justify-content:space-between; }
.nav-logo{ font-family:var(--font-display); font-weight:600; font-size:1.05rem; display:flex; align-items:center; gap:9px; }
.nav-logo .dot{ width:8px; height:8px; border-radius:2px; background:linear-gradient(135deg, var(--emerald), var(--cyan)); box-shadow:0 0 12px rgba(52,211,153,0.6); transform:rotate(45deg); }
.nav-links{ display:flex; gap:30px; font-size:0.92rem; color:var(--text-muted); }
.nav-links a{ transition:color .2s ease; position:relative; }
.nav-links a::after{ content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:linear-gradient(90deg, var(--emerald), var(--cyan)); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; }
.nav-links a:hover::after, .nav-links a.active::after{ transform:scaleX(1); }
.nav-links a:hover, .nav-links a.active{ color:var(--text); }
.nav-cta{ font-size:0.88rem; padding:9px 18px; border-radius:8px; border:1px solid var(--panel-border); color:var(--text); transition:border-color .2s ease, background .2s ease; white-space:nowrap; }
.nav-cta:hover{ border-color:var(--panel-border-hover); background:rgba(52,211,153,0.06); }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
.nav-toggle span{ width:22px; height:2px; background:var(--text); transition:transform .25s ease, opacity .25s ease; }
.mobile-menu{ display:none; flex-direction:column; gap:2px; padding:8px 32px 22px; border-bottom:1px solid var(--panel-border); background:rgba(7,10,13,0.9); }
.mobile-menu a{ padding:12px 0; border-bottom:1px solid rgba(255,255,255,0.05); color:var(--text-muted); font-size:0.98rem; }
.mobile-menu.open{ display:flex; }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-weight:600; font-size:0.9rem; letter-spacing:0.03em; padding:14px 26px; border-radius:10px; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; border:1px solid transparent; position:relative; overflow:hidden; }
.btn-primary{ background:linear-gradient(135deg, var(--emerald-dim), #0EA5A5); color:#04120C; }
.btn-primary::after{ content:''; position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent); transform:skewX(-20deg); transition:left .6s ease; }
.btn-primary:hover::after{ left:130%; }
.btn-primary:hover{ box-shadow:0 8px 30px -8px rgba(52,211,153,0.55); transform:translateY(-1px); }
.btn-secondary{ background:rgba(255,255,255,0.02); border-color:var(--panel-border); color:var(--text); }
.btn-secondary:hover{ border-color:var(--panel-border-hover); background:rgba(52,211,153,0.05); transform:translateY(-1px); }
.btn-danger{ background:rgba(248,113,113,0.08); border-color:rgba(248,113,113,0.3); color:var(--danger); }
.btn-danger:hover{ background:rgba(248,113,113,0.15); }
.btn-sm{ padding:9px 16px; font-size:0.82rem; }
.btn:disabled{ opacity:0.5; cursor:not-allowed; }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

/* Staggered child entrance for dynamically-populated grids/lists once
   their container has scrolled into view (parent gets .in from JS). */
@keyframes fadeUpStagger{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.skills-grid.in .skill-chip,
.projects-grid.in .project-card,
.certs-grid.in .cert-card,
.blog-grid.in .blog-card,
.about-stats.in .stat-card{
  opacity:0;
  animation:fadeUpStagger .55s ease forwards;
}
.skills-grid.in .skill-chip:nth-child(1), .projects-grid.in .project-card:nth-child(1), .certs-grid.in .cert-card:nth-child(1), .blog-grid.in .blog-card:nth-child(1), .about-stats.in .stat-card:nth-child(1){ animation-delay:.03s; }
.skills-grid.in .skill-chip:nth-child(2), .projects-grid.in .project-card:nth-child(2), .certs-grid.in .cert-card:nth-child(2), .blog-grid.in .blog-card:nth-child(2), .about-stats.in .stat-card:nth-child(2){ animation-delay:.09s; }
.skills-grid.in .skill-chip:nth-child(3), .projects-grid.in .project-card:nth-child(3), .certs-grid.in .cert-card:nth-child(3), .blog-grid.in .blog-card:nth-child(3), .about-stats.in .stat-card:nth-child(3){ animation-delay:.15s; }
.skills-grid.in .skill-chip:nth-child(4), .projects-grid.in .project-card:nth-child(4), .certs-grid.in .cert-card:nth-child(4), .blog-grid.in .blog-card:nth-child(4), .about-stats.in .stat-card:nth-child(4){ animation-delay:.21s; }
.skills-grid.in .skill-chip:nth-child(5), .projects-grid.in .project-card:nth-child(5){ animation-delay:.27s; }
.skills-grid.in .skill-chip:nth-child(6), .projects-grid.in .project-card:nth-child(6){ animation-delay:.33s; }
.skills-grid.in .skill-chip:nth-child(7){ animation-delay:.39s; }
.skills-grid.in .skill-chip:nth-child(8){ animation-delay:.45s; }

.timeline.in .timeline-item, #experience-current.in .current-role-card{
  opacity:0; animation:fadeUpStagger .55s ease forwards;
}
.timeline.in .timeline-item:nth-child(1){ animation-delay:.05s; }
.timeline.in .timeline-item:nth-child(2){ animation-delay:.15s; }
.timeline.in .timeline-item:nth-child(3){ animation-delay:.25s; }
.timeline.in .timeline-item:nth-child(4){ animation-delay:.35s; }

/* ---------- Section spacing ---------- */
.section{ padding:110px 0; border-top:1px solid var(--panel-border); }
.section:first-of-type{ border-top:none; }
.page-hero{ padding:160px 0 60px; }
.page-hero h1{ font-size:clamp(2.2rem, 4.5vw, 3.2rem); margin-bottom:16px; }
.page-hero p{ color:var(--text-muted); max-width:60ch; font-size:1.05rem; }

/* ---------- Hero (home) ---------- */
.hero{ padding:168px 0 120px; }
.hero-grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:72px; align-items:center; }
.hero-copy{ order:1; }
.hero-photo-wrap{ order:2; display:flex; flex-direction:column; align-items:center; gap:22px; }

@keyframes heroFadeUp{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
.hero-copy > *{ opacity:0; animation:heroFadeUp .8s ease forwards; }
.hero-copy > *:nth-child(1){ animation-delay:.05s; }
.hero-copy > *:nth-child(2){ animation-delay:.16s; }
.hero-copy > *:nth-child(3){ animation-delay:.27s; }
.hero-copy > *:nth-child(4){ animation-delay:.38s; }
.hero-copy > *:nth-child(5){ animation-delay:.49s; }
.hero-photo-wrap{ opacity:0; animation:heroPhotoIn 1s ease .3s forwards; }
@keyframes heroPhotoIn{ from{ opacity:0; transform:translateY(18px) scale(0.97); } to{ opacity:1; transform:none; } }

.photo-frame{ position:relative; width:100%; max-width:360px; aspect-ratio:4/5; border-radius:28px; overflow:hidden; border:1px solid var(--panel-border); background:linear-gradient(155deg, rgba(52,211,153,0.08), rgba(34,211,238,0.05) 60%, transparent); margin-left:auto; margin-right:0; }
.photo-frame::before{ content:''; position:absolute; inset:-40%; background:radial-gradient(circle at 30% 20%, rgba(52,211,153,0.35), transparent 55%), radial-gradient(circle at 80% 90%, rgba(34,211,238,0.25), transparent 55%); filter:blur(50px); z-index:0; }
.photo-frame img, .photo-frame .photo-placeholder{ position:relative; z-index:1; width:100%; height:100%; object-fit:cover; }
.photo-placeholder{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--text-faint); text-align:center; padding:24px; font-size:0.85rem; }
.photo-placeholder svg{ width:56px; height:56px; opacity:0.5; }
.photo-frame-border{ position:absolute; inset:0; border-radius:28px; z-index:2; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06); }

.badge{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.08em; color:var(--emerald); background:rgba(52,211,153,0.07); border:1px solid rgba(52,211,153,0.25); padding:9px 16px; border-radius:100px; }
.badge .sep{ color:var(--cyan); }

.hero-eyebrow{ font-family:var(--font-mono); font-size:0.9rem; color:var(--cyan); margin-bottom:14px; letter-spacing:0.02em; }
.hero-name{ font-size:clamp(2.6rem, 5.2vw, 4.1rem); line-height:1.05; margin-bottom:18px; background:linear-gradient(120deg, #fff 30%, #c9d6dc 65%, var(--emerald) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero-headline{ font-family:var(--font-body); font-weight:600; font-size:clamp(1.15rem, 2vw, 1.5rem); color:var(--text); margin-bottom:22px; max-width:44ch; }
.hero-intro{ color:var(--text-muted); font-size:1.03rem; max-width:56ch; margin-bottom:38px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; }

/* ---------- About ---------- */
.about-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:start; }
.about-text p{ color:var(--text-muted); margin-bottom:18px; font-size:1.02rem; }
.about-text strong{ color:var(--text); font-weight:600; }
.about-stats{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.stat-card{ background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--radius-md); padding:22px; backdrop-filter:blur(10px); }
.stat-card .num{ font-family:var(--font-display); font-size:1.9rem; color:var(--emerald); margin-bottom:4px; }
.stat-card .label{ font-size:0.85rem; color:var(--text-muted); }

/* ---------- Skills ---------- */
.skills-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
.skill-chip{ background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--radius-sm); padding:18px 20px; display:flex; align-items:center; gap:12px; transition:border-color .2s ease, transform .2s ease, background .2s ease; font-size:0.95rem; }
.skill-chip:hover{ border-color:var(--panel-border-hover); background:rgba(52,211,153,0.045); transform:translateY(-2px); }
.skill-chip .dot{ width:6px; height:6px; border-radius:50%; background:var(--emerald); flex-shrink:0; box-shadow:0 0 8px rgba(52,211,153,0.7); }
.skills-grid.business .skill-chip .dot{ background:var(--cyan); box-shadow:0 0 8px rgba(34,211,238,0.7); }

/* ---------- Projects ---------- */
.projects-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.project-card{ background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--radius-lg); padding:28px; display:flex; flex-direction:column; gap:16px; transition:border-color .25s ease, transform .25s ease; position:relative; overflow:hidden; }
.project-card:hover{ border-color:var(--panel-border-hover); transform:translateY(-3px); }
.tag-pill{ font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.06em; color:var(--cyan); background:rgba(34,211,238,0.08); border:1px solid rgba(34,211,238,0.25); padding:4px 10px; border-radius:100px; align-self:flex-start; }
.tag-pill.biz{ color:var(--emerald); background:rgba(52,211,153,0.08); border-color:rgba(52,211,153,0.25); }
.project-card h3{ font-size:1.15rem; }
.project-card p{ color:var(--text-muted); font-size:0.94rem; flex-grow:1; }
.project-stack{ display:flex; flex-wrap:wrap; gap:8px; font-family:var(--font-mono); font-size:0.72rem; color:var(--text-faint); }
.project-stack span{ border:1px solid var(--panel-border); padding:3px 9px; border-radius:6px; }
.project-link{ font-size:0.88rem; color:var(--emerald); font-weight:600; display:inline-flex; align-items:center; gap:6px; }

/* ---------- Experience / Work ---------- */
.current-role-card{
  background:linear-gradient(155deg, rgba(52,211,153,0.07), rgba(34,211,238,0.03));
  border:1px solid rgba(52,211,153,0.3);
  border-radius:var(--radius-lg);
  padding:32px;
  margin-bottom:44px;
  position:relative;
}
.current-role-card + .current-role-card{ margin-top:-24px; }
.status-pill{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.06em; color:var(--emerald); background:rgba(52,211,153,0.1); border:1px solid rgba(52,211,153,0.3); padding:4px 10px; border-radius:100px; margin-bottom:14px; }
.status-pill .pulse{ width:6px; height:6px; border-radius:50%; background:var(--emerald); box-shadow:0 0 8px var(--emerald); animation:pulse 2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.35; } }
.current-role-card h3{ font-size:1.3rem; margin-bottom:4px; }
.role-meta{ color:var(--text-muted); font-size:0.92rem; margin-bottom:16px; }
.role-points{ color:var(--text-muted); font-size:0.95rem; }
.role-points li{ margin-bottom:7px; padding-left:16px; position:relative; }
.role-points li::before{ content:'—'; position:absolute; left:0; color:var(--text-faint); }

.timeline-label{ font-family:var(--font-mono); font-size:0.78rem; color:var(--text-faint); letter-spacing:0.06em; margin:44px 0 20px; }
.timeline{ position:relative; padding-left:32px; }
.timeline::before{ content:''; position:absolute; left:5px; top:6px; bottom:6px; width:1px; background:linear-gradient(var(--emerald), var(--cyan)); opacity:0.35; }
.timeline-item{ position:relative; padding-bottom:44px; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{ content:''; position:absolute; left:-32px; top:6px; width:11px; height:11px; border-radius:50%; background:var(--bg); border:2px solid var(--emerald); box-shadow:0 0 10px rgba(52,211,153,0.5); }
.timeline-date{ font-family:var(--font-mono); font-size:0.78rem; color:var(--cyan); margin-bottom:6px; }
.timeline-item h3{ font-size:1.1rem; margin-bottom:3px; }
.timeline-role{ color:var(--text-muted); font-size:0.9rem; margin-bottom:10px; }
.timeline-item ul{ color:var(--text-muted); font-size:0.94rem; }
.timeline-item li{ margin-bottom:6px; padding-left:16px; position:relative; }
.timeline-item li::before{ content:'—'; position:absolute; left:0; color:var(--text-faint); }

/* ---------- Education ---------- */
.edu-card{ background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--radius-lg); padding:32px; display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:start; margin-bottom:20px; }
.edu-card:last-child{ margin-bottom:0; }
.edu-icon{ width:52px; height:52px; border-radius:12px; background:linear-gradient(135deg, rgba(52,211,153,0.15), rgba(34,211,238,0.1)); border:1px solid var(--panel-border); display:flex; align-items:center; justify-content:center; color:var(--emerald); flex-shrink:0; }
.edu-card h3{ font-size:1.2rem; margin-bottom:4px; }
.edu-meta{ color:var(--text-muted); font-size:0.92rem; margin-bottom:14px; }
.edu-desc{ color:var(--text-muted); font-size:0.95rem; }
.edu-modules{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.edu-modules span{ font-family:var(--font-mono); font-size:0.72rem; color:var(--text-faint); border:1px solid var(--panel-border); padding:4px 10px; border-radius:6px; }

/* ---------- Certifications ---------- */
.certs-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.cert-card{ background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--radius-md); padding:24px; text-align:left; transition:border-color .2s ease, transform .2s ease; }
.cert-card:hover{ border-color:var(--panel-border-hover); transform:translateY(-2px); }
.cert-status{ font-family:var(--font-mono); font-size:0.68rem; color:var(--text-faint); letter-spacing:0.05em; margin-bottom:10px; display:inline-block; border:1px dashed var(--panel-border); padding:3px 9px; border-radius:100px; }
.cert-card h3{ font-size:1.02rem; margin-bottom:4px; }
.cert-issuer{ color:var(--text-muted); font-size:0.87rem; }

/* ---------- Contact ---------- */
.contact-panel{ background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--radius-lg); padding:56px; display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; position:relative; overflow:hidden; }
.contact-panel::before{ content:''; position:absolute; top:-30%; right:-15%; width:420px; height:420px; background:radial-gradient(circle, rgba(52,211,153,0.14), transparent 65%); filter:blur(30px); pointer-events:none; }
.contact-panel h2{ font-size:clamp(1.6rem, 3vw, 2.1rem); margin-bottom:16px; }
.contact-panel p{ color:var(--text-muted); max-width:48ch; margin-bottom:28px; }
.contact-email{ font-family:var(--font-mono); font-size:1.15rem; color:var(--emerald); display:inline-flex; align-items:center; gap:10px; padding-bottom:4px; border-bottom:1px solid var(--panel-border); transition:border-color .2s ease; }
.contact-email:hover{ border-color:var(--emerald); }
.contact-phone-row{ margin-top:14px; }
.contact-phone-link{ font-family:var(--font-mono); font-size:1rem; color:var(--cyan); display:inline-flex; align-items:center; gap:8px; }
.contact-phone-link:hover{ text-decoration:underline; }
.social-list{ display:flex; flex-direction:column; gap:14px; }
.social-list a{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border:1px solid var(--panel-border); border-radius:var(--radius-sm); font-size:0.95rem; transition:border-color .2s ease, background .2s ease; }
.social-list a:hover{ border-color:var(--panel-border-hover); background:rgba(52,211,153,0.04); }
.social-list .arrow{ color:var(--text-faint); }

/* ---------- Blog listing ---------- */
.blog-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; }
.blog-card{ background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column; transition:border-color .25s ease, transform .25s ease; }
.blog-card:hover{ border-color:var(--panel-border-hover); transform:translateY(-3px); }
.blog-card-media{ aspect-ratio:16/10; width:100%; overflow:hidden; background:linear-gradient(155deg, rgba(52,211,153,0.08), rgba(34,211,238,0.05)); position:relative; }
.blog-card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.blog-card:hover .blog-card-media img{ transform:scale(1.07); }
.blog-card-media .media-fallback{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--text-faint); }
.blog-card-body{ padding:24px; display:flex; flex-direction:column; gap:12px; flex-grow:1; }
.blog-meta{ display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:0.72rem; color:var(--text-faint); }
.blog-card-body h3{ font-size:1.1rem; line-height:1.35; }
.blog-card-body p{ color:var(--text-muted); font-size:0.92rem; flex-grow:1; }
.blog-read-more{ font-size:0.86rem; color:var(--emerald); font-weight:600; }
.blog-empty{ color:var(--text-muted); padding:40px 0; text-align:center; border:1px dashed var(--panel-border); border-radius:var(--radius-md); }

/* ---------- Blog post ---------- */
.post-header{ max-width:760px; margin:0 auto 40px; text-align:left; }
.post-header .blog-meta{ margin-bottom:16px; }
.post-header h1{ font-size:clamp(1.9rem, 4vw, 2.7rem); margin-bottom:10px; }
.post-cover{ width:100%; max-width:960px; margin:0 auto 44px; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--panel-border); aspect-ratio:16/9; }
.post-cover img{ width:100%; height:100%; object-fit:cover; }
.post-video{ width:100%; max-width:960px; margin:0 auto 44px; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--panel-border); aspect-ratio:16/9; background:#000; }
.post-video iframe, .post-video video{ width:100%; height:100%; border:0; display:block; }
.post-body{ max-width:760px; margin:0 auto; color:var(--text-muted); font-size:1.05rem; }
.post-body p{ margin-bottom:22px; }
.post-back{ display:inline-flex; align-items:center; gap:8px; color:var(--text-muted); font-size:0.9rem; margin-bottom:36px; }
.post-back:hover{ color:var(--emerald); }

/* ---------- Footer ---------- */
footer{ padding:36px 0 48px; text-align:center; color:var(--text-faint); font-size:0.85rem; border-top:1px solid var(--panel-border); margin-top:40px;}
footer a{ color:var(--text-muted); }

/* ---------- Responsive: tablet ---------- */
@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; gap:52px; }
  .hero-photo-wrap{ order:-1; }
  .photo-frame{ max-width:300px; margin:0 auto; }
  .about-grid{ grid-template-columns:1fr; }
  .skills-grid{ grid-template-columns:repeat(2, 1fr); }
  .projects-grid{ grid-template-columns:repeat(2, 1fr); }
  .certs-grid{ grid-template-columns:repeat(2, 1fr); }
  .blog-grid{ grid-template-columns:repeat(2, 1fr); }
  .contact-panel{ grid-template-columns:1fr; padding:40px 28px; }
  .nav-links{ display:none; }
  .nav-cta{ display:none; }
  .nav-toggle{ display:flex; }
}

/* ---------- Responsive: mobile ---------- */
@media (max-width:640px){
  .container{ padding:0 20px; }
  .hero{ padding:130px 0 80px; }
  .page-hero{ padding:120px 0 40px; }
  .section{ padding:80px 0; }
  .skills-grid{ grid-template-columns:1fr 1fr; }
  .projects-grid{ grid-template-columns:1fr; }
  .certs-grid{ grid-template-columns:1fr; }
  .blog-grid{ grid-template-columns:1fr; }
  .about-stats{ grid-template-columns:1fr 1fr; }
  .edu-card{ grid-template-columns:1fr; }
  .contact-panel{ padding:32px 22px; }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .btn{ justify-content:center; }
}

/* ============================================================
   BACKGROUND FX CANVAS (animated streaks)
   ============================================================ */
#bg-fx-canvas{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  opacity:0.55;
}

/* ============================================================
   EXPERIENCE: logos + tags
   ============================================================ */
.role-header{ display:flex; align-items:center; gap:14px; margin-bottom:4px; }
.role-logo{ width:44px; height:44px; border-radius:10px; object-fit:cover; border:1px solid var(--panel-border); background:var(--bg-elevated); flex-shrink:0; }
.role-badges{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 14px; }
.role-badge{ font-family:var(--font-mono); font-size:0.7rem; color:var(--text-faint); border:1px solid var(--panel-border); padding:3px 10px; border-radius:100px; }
.role-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.role-tags span{ font-family:var(--font-mono); font-size:0.72rem; color:var(--cyan); background:rgba(34,211,238,0.07); border:1px solid rgba(34,211,238,0.2); padding:4px 10px; border-radius:100px; }

/* ============================================================
   CERTIFICATIONS: image badge
   ============================================================ */
.cert-card{ display:flex; flex-direction:column; gap:12px; }
.cert-image{ width:100%; aspect-ratio:4/3; border-radius:10px; overflow:hidden; background:var(--bg-elevated); border:1px solid var(--panel-border); }
.cert-image img{ width:100%; height:100%; object-fit:contain; }

/* ============================================================
   PROJECTS: card media + video facade
   ============================================================ */
.project-card{ padding:0; overflow:hidden; }
.project-card-media{ width:100%; aspect-ratio:16/10; overflow:hidden; position:relative; background:linear-gradient(155deg, rgba(52,211,153,0.08), rgba(34,211,238,0.05)); }
.project-card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.project-card:hover .project-card-media img{ transform:scale(1.06); }
.project-card-body{ padding:26px 28px 28px; display:flex; flex-direction:column; gap:14px; flex-grow:1; }
.play-badge{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(7,10,13,0.25);
}
.play-badge svg{ width:52px; height:52px; filter:drop-shadow(0 0 12px rgba(0,0,0,0.5)); }

.video-facade{ position:relative; width:100%; height:100%; cursor:pointer; }
.video-facade img{ width:100%; height:100%; object-fit:cover; display:block; }
.video-facade .play-circle{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
.video-facade .play-circle span{
  width:64px; height:64px; border-radius:50%; background:rgba(7,10,13,0.55);
  border:1px solid rgba(255,255,255,0.25); display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(4px); transition:transform .2s ease, background .2s ease;
}
.video-facade:hover .play-circle span{ transform:scale(1.08); background:rgba(52,211,153,0.35); }

/* ============================================================
   PROJECT DETAIL PAGE
   ============================================================ */
.project-detail-hero{ max-width:900px; margin:0 auto; }
.project-detail-media{ width:100%; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--panel-border); aspect-ratio:16/9; margin-bottom:36px; background:#000; }
.project-detail-media img, .project-detail-media video, .project-detail-media iframe{ width:100%; height:100%; object-fit:cover; border:0; }
.project-gallery{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin:32px 0; }
.project-gallery img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px; border:1px solid var(--panel-border); cursor:zoom-in; transition:transform .2s ease; }
.project-gallery img:hover{ transform:scale(1.02); }
.project-detail-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:28px; }
.lightbox-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.9); z-index:300; display:flex; align-items:center; justify-content:center; padding:40px; cursor:zoom-out; }
.lightbox-overlay img{ max-width:100%; max-height:100%; border-radius:8px; }

/* ============================================================
   TOASTS
   ============================================================ */
.toast-host{ position:fixed; bottom:24px; right:24px; z-index:400; display:flex; flex-direction:column; gap:10px; max-width:360px; }
.toast{
  background:var(--bg-elevated); border:1px solid var(--panel-border); border-radius:10px;
  padding:14px 16px; display:flex; align-items:center; gap:12px; box-shadow:0 8px 30px -8px rgba(0,0,0,0.5);
  opacity:0; transform:translateY(8px); transition:opacity .25s ease, transform .25s ease;
  font-size:0.88rem;
}
.toast.show{ opacity:1; transform:none; }
.toast-success{ border-color:rgba(52,211,153,0.4); }
.toast-error{ border-color:rgba(248,113,113,0.4); }
.toast-message{ flex-grow:1; color:var(--text); }
.toast-action{ background:none; border:1px solid var(--panel-border); color:var(--emerald); border-radius:6px; padding:4px 10px; font-size:0.8rem; cursor:pointer; }
.toast-close{ background:none; border:none; color:var(--text-faint); cursor:pointer; font-size:1.1rem; line-height:1; padding:0 2px; }

/* ============================================================
   CONFIRM MODAL
   ============================================================ */
.confirm-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:400; display:flex; align-items:center; justify-content:center; padding:20px; }
.confirm-box{ background:var(--bg-elevated); border:1px solid var(--panel-border); border-radius:var(--radius-md); padding:26px; max-width:400px; width:100%; }
.confirm-box p{ color:var(--text); margin-bottom:20px; font-size:0.95rem; }
.confirm-actions{ display:flex; justify-content:flex-end; gap:10px; }

/* ============================================================
   IMAGE EDITOR MODAL
   ============================================================ */
.image-editor-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.75); z-index:400; display:flex; align-items:center; justify-content:center; padding:20px; }
.image-editor-box{ background:var(--bg-elevated); border:1px solid var(--panel-border); border-radius:var(--radius-md); padding:24px; max-width:480px; width:100%; }
.image-editor-box h3{ font-size:1rem; margin-bottom:16px; }
.image-editor-stage{ width:100%; }
.image-editor-frame{ width:100%; border-radius:8px; overflow:hidden; border:1px solid var(--panel-border); background:#000; }
.image-editor-frame canvas{ width:100%; height:100%; display:block; cursor:grab; touch-action:none; }
.image-editor-controls{ display:flex; align-items:center; gap:12px; margin:16px 0 8px; }
.image-editor-controls input[type=range]{ flex-grow:1; }
.image-editor-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }

/* ---------- Responsive additions for new components ---------- */
@media (max-width:640px){
  .project-gallery{ grid-template-columns:1fr 1fr; }
  .image-editor-box{ padding:18px; }
  .toast-host{ left:16px; right:16px; bottom:16px; max-width:none; }
}

/* ============================================================
   BACKGROUND FX CANVAS
   ============================================================ */
.bg-fx-canvas{
  position:fixed; inset:0; z-index:-1;
  pointer-events:none;
}

/* ============================================================
   TOASTS
   ============================================================ */
.toast-container{
  position:fixed; bottom:24px; right:24px; z-index:400;
  display:flex; flex-direction:column; gap:10px;
  max-width:360px;
}
.toast{
  display:flex; align-items:flex-start; gap:10px;
  background:rgba(11,15,19,0.96); backdrop-filter:blur(10px);
  border:1px solid var(--panel-border); border-radius:var(--radius-sm);
  padding:14px 16px; box-shadow:0 12px 40px -12px rgba(0,0,0,0.6);
  opacity:0; transform:translateX(20px); transition:opacity .25s ease, transform .25s ease;
  font-size:0.88rem;
}
.toast.show{ opacity:1; transform:none; }
.toast-icon{
  width:20px; height:20px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:0.75rem; font-weight:700;
}
.toast-success .toast-icon{ background:rgba(52,211,153,0.15); color:var(--emerald); }
.toast-error .toast-icon{ background:rgba(248,113,113,0.15); color:var(--danger); }
.toast-info .toast-icon{ background:rgba(34,211,238,0.15); color:var(--cyan); }
.toast-message{ flex-grow:1; color:var(--text); line-height:1.5; }
.toast-action{
  background:none; border:1px solid var(--panel-border); color:var(--emerald);
  border-radius:6px; padding:4px 10px; font-size:0.78rem; cursor:pointer; flex-shrink:0;
}
.toast-close{
  background:none; border:none; color:var(--text-faint); cursor:pointer;
  font-size:1.1rem; line-height:1; flex-shrink:0; padding:0 2px;
}

/* ============================================================
   MODAL OVERLAY (confirm dialog + image editor)
   ============================================================ */
.modal-overlay{
  position:fixed; inset:0; z-index:500;
  background:rgba(4,6,8,0.7); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .2s ease; padding:20px;
}
.modal-overlay.show{ opacity:1; }
.modal-box{
  background:var(--bg-elevated); border:1px solid var(--panel-border);
  border-radius:var(--radius-lg); padding:28px; max-width:420px; width:100%;
  transform:scale(0.96); transition:transform .2s ease;
}
.modal-overlay.show .modal-box{ transform:scale(1); }
.modal-message{ color:var(--text); font-size:0.95rem; margin-bottom:22px; line-height:1.55; }
.modal-actions{ display:flex; justify-content:flex-end; gap:10px; }

.image-editor-box{ max-width:560px; }
.image-editor-title{ font-size:1.05rem; margin-bottom:16px; }
.image-editor-canvas-wrap{
  display:flex; justify-content:center; margin-bottom:16px;
  background:repeating-conic-gradient(#1a1f24 0% 25%, #14181c 0% 50%) 50%/16px 16px;
  border-radius:10px; overflow:hidden; border:1px solid var(--panel-border);
}
.image-editor-canvas{ display:block; cursor:grab; touch-action:none; }
.image-editor-canvas:active{ cursor:grabbing; }
.image-editor-controls{ display:flex; align-items:center; gap:12px; }
.image-editor-controls input[type=range]{ flex-grow:1; accent-color:var(--emerald); }

/* ============================================================
   ADMIN — FIELD VALIDATION
   ============================================================ */
.field-group.has-error input,
.field-group.has-error textarea{ border-color:var(--danger); }
.field-error-msg{ color:var(--danger); font-size:0.78rem; margin-top:6px; display:none; }
.field-group.has-error .field-error-msg{ display:block; }

/* ============================================================
   DETAIL PAGE LAYOUT — Wikipedia-style infobox
   Text (title + prose) on the left, a compact media/facts box on
   the right. DOM order keeps the infobox second so it naturally
   appears first on mobile via grid-template-areas reordering.
   ============================================================ */
.detail-layout{
  display:grid;
  grid-template-columns: 1fr 320px;
  grid-template-areas: "main info";
  gap:44px;
  align-items:start;
}
.detail-main{ grid-area:main; min-width:0; }
.detail-infobox{
  grid-area:info;
  background:var(--panel);
  border:1px solid var(--panel-border);
  border-radius:var(--radius-lg);
  padding:18px;
  position:sticky;
  top:100px;
}
.detail-infobox .infobox-media{
  width:100%; aspect-ratio:4/3; border-radius:var(--radius-md);
  overflow:hidden; border:1px solid var(--panel-border);
  background:linear-gradient(155deg, rgba(52,211,153,0.08), rgba(34,211,238,0.05));
  margin-bottom:14px; position:relative;
}
.detail-infobox .infobox-media img,
.detail-infobox .infobox-media video{ width:100%; height:100%; object-fit:cover; display:block; }
.detail-infobox .infobox-caption{
  font-size:0.78rem; color:var(--text-faint); text-align:center; margin-bottom:16px;
}
.infobox-facts{ display:flex; flex-direction:column; gap:12px; margin-bottom:16px; }
.infobox-fact-label{ font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.05em; color:var(--text-faint); text-transform:uppercase; margin-bottom:4px; }
.infobox-fact-value{ font-size:0.9rem; color:var(--text); }
.infobox-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.infobox-tags span{ font-family:var(--font-mono); font-size:0.7rem; color:var(--text-faint); border:1px solid var(--panel-border); padding:3px 8px; border-radius:6px; }
.infobox-actions{ display:flex; flex-direction:column; gap:8px; margin-top:16px; }
.infobox-actions .btn{ width:100%; justify-content:center; }

.infobox-gallery{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; margin-top:16px;
}
.infobox-gallery img{
  width:100%; aspect-ratio:1; object-fit:cover; border-radius:6px;
  cursor:zoom-in; border:1px solid var(--panel-border); transition:opacity .2s ease;
}
.infobox-gallery img:hover{ opacity:0.8; }

/* Mobile/tablet: infobox moves above the main text, full width */
@media (max-width:900px){
  .detail-layout{
    grid-template-columns:1fr;
    grid-template-areas: "info" "main";
    gap:28px;
  }
  .detail-infobox{ position:static; }
}

/* ============================================================
   SKILL GROUPS (unified Skills section)
   ============================================================ */
.skill-group-title{
  font-size:1.1rem; color:var(--emerald); margin-bottom:18px;
  font-family:var(--font-mono); letter-spacing:0.02em; text-transform:uppercase; font-size:0.9rem;
}

/* ============================================================
   "VIEW ALL" LINKS (Projects / Certifications caps)
   ============================================================ */
.view-all-wrap{
  display:flex; justify-content:center; margin-top:36px;
}

/* Simple icon-grid used on the all-projects / all-certifications pages */
.icon-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:20px;
}
.icon-card{
  background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--radius-md);
  padding:20px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px;
  transition:border-color .2s ease, transform .2s ease;
}
.icon-card:hover{ border-color:var(--panel-border-hover); transform:translateY(-3px); }
.icon-card .icon-thumb{
  width:64px; height:64px; border-radius:12px; overflow:hidden;
  background:var(--bg-elevated); border:1px solid var(--panel-border);
  display:flex; align-items:center; justify-content:center; color:var(--text-faint);
}
.icon-card .icon-thumb img{ width:100%; height:100%; object-fit:cover; }
.icon-card .icon-title{ font-size:0.88rem; font-weight:600; color:var(--text); line-height:1.35; }
.icon-card .icon-meta{ font-size:0.76rem; color:var(--text-faint); }