/* ==========================================================================
   MOHAMED NAWIL NAHID — PORTFOLIO  (profile.fiventhree.com)
   ---------------------------------------------------------------------------
   Design system: matte black + Ironman red, dark-only. Matches the rest of the
   5N3 domain (homepage, blog, tracker).

   Canonical tokens come from Commons/theme.css, linked before this file. The
   :root block below only MAPS this site's local token names onto those shared
   values - it does not invent colours. Change a colour in Commons/theme.css and
   it propagates here automatically. Do not hardcode hex values below.
   ========================================================================== */

/* ---------- 1. Design tokens (mapped onto Commons/theme.css) ---------- */
:root{
  /* Inter everywhere, matching the tracker. The display face used to be Manrope;
     it was the single biggest reason this site read as a different brand. */
  --font-display: var(--font-sans);
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Surface ladder -> Commons black / nav / card / elevated */
  --bg-0: var(--bg);                /* #0a0a0a page canvas */
  --bg-1: var(--nav-bg);            /* #0d0d0d header */
  --bg-2: var(--surface);           /* #181818 cards */
  --bg-3: var(--surface-elevated);  /* #202020 nested panels */

  /* Solid surfaces, not translucent white - the tracker's cards are opaque
     #181818, and translucency was making this site read as glassy/blue. */
  --surface-strong: var(--surface-elevated);
  --border-strong: var(--border-hover);

  /* Four-step text ladder mapped onto the three canonical values + muted title */
  --text-0: var(--text-primary);      /* #f5f5f5 headings */
  --text-1: var(--text-muted-title);  /* #c7c7c7 body copy */
  --text-2: var(--text-secondary);    /* #a0a0a0 meta */
  --text-3: var(--text-tertiary);     /* #7a7a7a faint */

  /* One accent, used sparingly. accent-2 is the hover shade rather than a
     second hue - the system deliberately has no second accent colour. */
  --accent-1: var(--brand);           /* #d72638 */
  --accent-2: var(--brand-hover);     /* #b71c2f */
  --accent-3: var(--success);         /* #4f9a6c - status only, never decoration */
  --accent-warn: var(--caution);      /* #d9a441 */

  /* Gradients kept for the existing layout, but collapsed to a single hue so
     they read as depth rather than as a second brand colour. */
  --gradient-brand: linear-gradient(120deg, var(--brand-600) 0%, var(--brand-700) 100%);
  --gradient-text: linear-gradient(120deg, #fff 0%, #f0d0d3 55%, var(--brand-300) 100%);
  --gradient-mesh: radial-gradient(circle at 20% 20%, rgba(var(--brand-rgb),0.18), transparent 40%),
                    radial-gradient(circle at 80% 0%, rgba(var(--brand-rgb),0.12), transparent 45%),
                    radial-gradient(circle at 50% 100%, rgba(var(--brand-rgb),0.08), transparent 45%);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: var(--shadow-card);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.45);
  --shadow-glow: 0 0 0 1px rgba(var(--brand-rgb),0.16), 0 8px 40px rgba(var(--brand-rgb),0.15);

  /* Radii aligned to the system: 8px controls, 16px cards, 24px large panels */
  --radius-sm: var(--radius-control);
  --radius-md: var(--radius-card);
  /* --radius-lg and --radius-full inherited from Commons */

  /* 72rem = the tracker's max-w-6xl, inherited from Commons. Was 1180px. */
  --dur-fast: 0.2s;
  --dur-med: 0.5s;
  --dur-slow: 0.9s;
}

/* ---------- 1b. Product theme: Portfolio ---------- */
/* Ecosystem rule: shared design language, own personality per product.
   The Portfolio is the "about me" product - elegant, premium, WARM: charcoal
   surfaces with a champagne-gold accent. Gold reads as craft and seniority,
   and sits clearly apart from every other product accent (parent red, hub
   cyan, cyber green, infra blue, endurance orange, AI indigo). The parent red
   (#d72638) appears only in the 5N3 mark. */
:root{
  --bg: #0c0a09;                 /* warm near-black */
  --nav-bg: #100d0c;
  --surface: #171412;            /* warm charcoal cards */
  --surface-elevated: #1e1a17;
  --border: #2e2925;
  --border-hover: #857b72;

  --text-primary: #f6f4f1;       /* warm white */
  --text-secondary: #a8a099;
  --text-tertiary: #7d766f;
  --text-muted-title: #cfc8c1;

  /* champagne gold accent */
  --brand-300: #e6c98f;
  --brand-400: #dcb672;
  --brand-500: #cfa155;
  --brand-600: #cfa155;
  --brand-700: #b0873f;
  --brand-800: #8a6930;
  --brand-rgb: 207, 161, 85;

  /* warm metallic text gradient (replaces the red-tinted one from §1) */
  --gradient-text: linear-gradient(120deg, #fff 0%, #efe3cd 55%, var(--brand-300) 100%);
}

/* Gold is a LIGHT accent: white text on gold fails contrast, so anything with
   a solid gold fill flips to dark ink instead. */
.btn--primary, .skip-link, .cert-filter.is-active, .cert-card__icon{ color: #14100c; }
.btn--primary .icon{ stroke: #14100c; }

/* ---------- 2. Reset ---------- */
/* Base reset (box-sizing, body, links, lists, selection, scrollbar, focus ring)
   lives in Commons/theme.css. Only site-specific additions here. */
*,*::before,*::after{ margin:0; padding:0; }
html{ scroll-behavior: smooth; color-scheme: dark; }
body{
  font-family: var(--font-sans);
  background: var(--bg-0);
  color: var(--text-1);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background var(--dur-med) var(--ease), color var(--dur-med) var(--ease);
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family: inherit; cursor:pointer; background:none; border:none; color:inherit; }
h1,h2,h3,h4{ font-family: var(--font-display); color: var(--text-0); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
.container{ max-width: var(--container-w); margin: 0 auto; padding: 0 24px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

.skip-link{
  position:absolute; left:12px; top:-60px; z-index:1000;
  background: var(--accent-1); color:#fff; padding:10px 16px; border-radius: var(--radius-sm);
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus{ top:12px; }

:focus-visible{ outline: 2px solid var(--accent-1); outline-offset: 3px; border-radius: 4px; }

/* ---------- 3. Animated background ---------- */
.bg-fx{ position: fixed; inset:0; z-index:-1; overflow:hidden; background: var(--bg-0); }
.bg-grid{
  position:absolute; inset:-2px;
  background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 40%, transparent 90%);
  opacity: 0.5;
}
.bg-glow{ position:absolute; border-radius:50%; filter: blur(90px); opacity:0.30; animation: drift 22s ease-in-out infinite; }
.bg-glow--1{ width:520px; height:520px; top:-140px; left:-120px; background: radial-gradient(circle, var(--accent-1), transparent 70%); }
.bg-glow--2{ width:460px; height:460px; top:10%; right:-160px; background: radial-gradient(circle, var(--accent-2), transparent 70%); animation-delay: -7s; }
.bg-glow--3{ width:480px; height:480px; bottom:-200px; left:35%; background: radial-gradient(circle, var(--brand-800), transparent 70%); animation-delay: -14s; }
@keyframes drift{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(30px,-30px) scale(1.08); }
}

/* ---------- 4. Header / Nav ---------- */
/* Header chassis lives in Commons as .c-topbar - a full-width sticky bar, the
   same on all four sites. The floating rounded pill this replaced looked
   detached while scrolling and forced a hero top-padding hack to stop content
   sliding underneath it. */
.site-header{
  position: sticky; top: 0; z-index: 500;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-0) 82%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  transition: border-color var(--dur-fast) var(--ease);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .site-header{ background: var(--bg-0); }
}
.site-header.is-scrolled{ border-bottom-color: var(--border-strong); }
.nav{
  width: 100%; max-width: var(--container-w); margin-inline: auto;
  padding: 10px 20px;
  display:flex; align-items:center; justify-content:space-between; gap: 24px;
}
.nav__brand{ display:flex; align-items:center; gap:10px; font-family: var(--font-display); font-weight:700; color: var(--text-0); flex-shrink:0; }
.nav__name{ font-size: 15px; }
.nav__menu{ display:flex; align-items:center; gap: 6px; }
.nav__link{
  font-size: 13.5px; font-weight:500; color: var(--text-2); padding: 8px 12px; border-radius: var(--radius-full);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  position: relative; white-space: nowrap;
}
.nav__link:hover{ color: var(--text-0); background: var(--surface); }
.nav__link.is-active{ color: var(--text-0); background: var(--surface-strong); }
.nav__actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.nav__toggle{ display:none; flex-direction:column; gap:5px; width:34px; height:34px; align-items:center; justify-content:center; border-radius: 8px; }
.nav__toggle span{ width:18px; height:2px; background: var(--text-0); border-radius:2px; transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }
.nav__progress{
  position:absolute; bottom:-1px; left:0; right:0; height:2px;
  background: var(--gradient-brand);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.1s linear;
}

/* Back to the domain root. Replaces the old light/dark toggle - the design
   system is dark-only, so a theme switch had nothing to switch to. */
.nav__cta{
  height:38px; padding:0 14px; border-radius: var(--radius-full); border:1px solid var(--border);
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font-size:13px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  color: var(--text-2); background: var(--surface);
  transition: border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.nav__cta:hover{ border-color: var(--border-strong); color: var(--text-0); transform: translateY(-1px); }
.icon{ width:18px; height:18px; }

/* ---------- 5. Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; padding: 12px 22px; border-radius: var(--radius-full);
  font-size:14px; font-weight:600; transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  white-space:nowrap;
}
.btn .icon{ width:16px; height:16px; }
.btn--primary{ background: var(--gradient-brand); color:#fff; box-shadow: var(--shadow-glow); }
.btn--primary:hover{ transform: translateY(-2px); box-shadow: 0 12px 40px rgba(var(--brand-rgb),0.15); }
.btn--ghost{ background: var(--surface); border:1px solid var(--border); color: var(--text-0); }
.btn--ghost:hover{ border-color: var(--border-strong); background: var(--surface-strong); transform: translateY(-2px); }

/* ---------- 6. Glass ---------- */
.glass{
  background: var(--surface);
  border: 1px solid var(--border);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}

/* ---------- 7. Reveal animation ---------- */
.reveal{ opacity:0; transform: translateY(24px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.is-visible{ opacity:1; transform: translateY(0); }
.reveal--delay-1.is-visible{ transition-delay: 0.08s; }
.reveal--delay-2.is-visible{ transition-delay: 0.16s; }
.reveal--delay-3.is-visible{ transition-delay: 0.24s; }
.reveal--delay-4.is-visible{ transition-delay: 0.32s; }

/* ---------- 8. Hero ---------- */
.hero{ position:relative; min-height: calc(100vh - 58px); display:flex; align-items:center; padding: 64px 0 80px; }
.hero__inner{ display:grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items:center; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color: var(--accent-1);
  letter-spacing: 0.02em; margin-bottom: 18px;
}
.eyebrow::before{ content:''; width:28px; height:1px; background: var(--accent-1); }
.hero__name{ font-size: clamp(2.4rem, 5.2vw, 4rem); margin-bottom: 10px; }
.hero__title{
  font-family: var(--font-display); font-weight:700; font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  background: var(--gradient-text); -webkit-background-clip:text; background-clip:text; color:transparent;
  min-height: 1.4em; margin-bottom: 20px;
}
.hero__title .cursor{ display:inline-block; width:2px; background: var(--accent-2); margin-left:2px; animation: blink 0.9s step-end infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.hero__summary{ font-size:16.5px; color: var(--text-2); max-width: 560px; margin-bottom: 34px; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom: 34px; }
.hero__socials{ display:flex; gap:12px; }
.social-btn{
  width:40px; height:40px; border-radius: var(--radius-full); border:1px solid var(--border); background: var(--surface);
  display:grid; place-items:center; color: var(--text-2); transition: all var(--dur-fast) var(--ease);
}
.social-btn svg{ width:18px; height:18px; }
.social-btn:hover{ color: var(--text-0); border-color: var(--accent-1); transform: translateY(-3px); box-shadow: var(--shadow-glow); }

.hero__visual{ position:relative; display:flex; justify-content:center; }
.hero__photo-wrap{ position:relative; width: min(360px, 80vw); aspect-ratio: 4/5; }
.hero__photo-ring{
  position:absolute; inset:-14px; border-radius: 32px; background: var(--gradient-brand);
  opacity:0.6; filter: blur(30px); animation: pulse-ring 5s ease-in-out infinite;
}
@keyframes pulse-ring{ 0%,100%{ opacity:0.45; transform: scale(1);} 50%{ opacity:0.7; transform: scale(1.04);} }
.hero__photo{
  position:relative; width:100%; height:100%; object-fit:cover; border-radius: 28px;
  border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg);
}
.hero__badge{
  position:absolute; display:flex; align-items:center; gap:8px; padding:10px 16px; border-radius: var(--radius-full);
  font-size:12.5px; font-weight:600; color: var(--text-0); box-shadow: var(--shadow-md);
  animation: float-badge 6s ease-in-out infinite;
}
.hero__badge svg{ width:16px; height:16px; color: var(--accent-3); }
.hero__badge--top{ top:8%; left:-14%; animation-delay: -1s; }
.hero__badge--bottom{ bottom:6%; right:-10%; animation-delay: -3s; }
@keyframes float-badge{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-10px);} }

.scroll-cue{
  position:absolute; bottom: 28px; left:50%; transform: translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px; color: var(--text-3); font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  animation: bob 2.2s ease-in-out infinite;
}
.scroll-cue svg{ width:16px; height:16px; }
@keyframes bob{ 0%,100%{ transform: translate(-50%,0);} 50%{ transform: translate(-50%,6px);} }

/* ---------- 9. Stats strip ---------- */
.stats-strip{ padding: 20px 0 100px; }
/* Six compact stats on ONE line (3x2 on tablet, 2x3 on phones) - the strip
   should read in a glance, not dominate the page. */
.stats-strip__grid{ display:grid; grid-template-columns: repeat(6,1fr); gap:1px; background: var(--border); border:1px solid var(--border); border-radius: var(--radius-md); overflow:hidden; }
.stat-card{ background: var(--bg-1); padding: 18px 10px 16px; text-align:center; }
.stat-card__value{ font-family: var(--font-display); font-size: clamp(1.25rem,1.8vw,1.65rem); font-weight:800; background: var(--gradient-text); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1.1; }
.stat-card__label{ font-size:11px; line-height:1.35; color: var(--text-2); margin:6px auto 0; max-width:12ch; }

/* ---------- 10. Section shell ---------- */
.section{ padding: 100px 0; position:relative; }
.section--tinted{ background: linear-gradient(180deg, transparent, var(--surface) 15%, var(--surface) 85%, transparent); }
.section__eyebrow{ font-size:13px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color: var(--accent-2); margin-bottom:12px; }
.section__title{ font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-bottom:16px; max-width: 720px; }
.section__lead{ color: var(--text-2); font-size:16px; max-width: 620px; margin-bottom: 48px; }

/* ---------- 11. About ---------- */
.about__grid{ display:grid; grid-template-columns: 1.5fr 1fr; gap:48px; align-items:start; }
.about__text p{ color: var(--text-1); font-size:16px; margin-bottom:20px; }
.about__text p:last-child{ margin-bottom:0; }
.about__facts{ display:grid; gap:14px; position:sticky; top:110px; }
.fact-card{ padding:18px 20px; border-radius: var(--radius-md); display:flex; flex-direction:column; gap:4px; }
.fact-card__label{ font-size:12px; color: var(--text-3); text-transform:uppercase; letter-spacing:0.05em; }
.fact-card__value{ font-size:14.5px; font-weight:600; color: var(--text-0); }

/* ---------- 12. Timeline ---------- */
.timeline{ position:relative; padding-left: 32px; }
.timeline::before{ content:''; position:absolute; left:7px; top:8px; bottom:8px; width:2px; background: linear-gradient(var(--accent-1), var(--accent-2), transparent); }
.timeline-item{ position:relative; padding-bottom: 28px; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{
  content:''; position:absolute; left: -32px; top: 6px; width:16px; height:16px; border-radius:50%;
  background: var(--bg-0); border: 2px solid var(--accent-1); box-shadow: 0 0 0 4px var(--surface);
}
.timeline-item.is-current::before{ background: var(--accent-1); box-shadow: 0 0 0 4px rgba(var(--brand-rgb),0.15), 0 0 16px rgba(var(--brand-rgb),0.15); }
.timeline-card{ border-radius: var(--radius-lg); padding: 26px 28px; cursor:pointer; transition: border-color var(--dur-fast), transform var(--dur-fast); }
.timeline-card:hover{ border-color: var(--border-strong); }
.timeline-card__head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.timeline-card__role{ font-family: var(--font-display); font-size:19px; font-weight:700; color: var(--text-0); }
.timeline-card__company{ font-size:14.5px; color: var(--accent-1); font-weight:600; margin-top:2px; }
.timeline-card__meta{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.timeline-card__period{ font-size:12.5px; color: var(--text-2); font-family: var(--font-mono); white-space:nowrap; }
.badge{ font-size:11px; font-weight:700; padding:4px 10px; border-radius: var(--radius-full); text-transform:uppercase; letter-spacing:0.04em; }
.badge--current{ background: rgba(79,154,108,0.15); color: var(--accent-3); }
.timeline-card__summary{ margin-top:12px; color: var(--text-2); font-size:14.5px; }
.timeline-card__toggle{ display:flex; align-items:center; gap:6px; margin-top:16px; font-size:13px; font-weight:600; color: var(--accent-1); }
.timeline-card__toggle svg{ width:14px; height:14px; transition: transform var(--dur-fast) var(--ease); }
.timeline-card.is-open .timeline-card__toggle svg{ transform: rotate(180deg); }
.timeline-card__details{ display:grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-med) var(--ease); }
.timeline-card.is-open .timeline-card__details{ grid-template-rows: 1fr; }
.timeline-card__details-inner{ overflow:hidden; }
.timeline-card__details ul{ margin-top:18px; display:grid; gap:9px; }
.timeline-card__details li{ position:relative; padding-left:18px; color: var(--text-1); font-size:14.5px; }
.timeline-card__details li::before{ content:''; position:absolute; left:0; top:9px; width:6px; height:6px; border-radius:50%; background: var(--accent-2); }
.tech-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.tech-tag{ font-size:12px; padding:5px 11px; border-radius: var(--radius-full); background: var(--surface-strong); color: var(--text-1); border:1px solid var(--border); }

/* ---------- 13. Projects ---------- */
.projects-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:22px; }
.project-card{ border-radius: var(--radius-lg); padding:28px; display:flex; flex-direction:column; transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast); position:relative; overflow:hidden; }
.project-card::after{ content:''; position:absolute; inset:0; background: var(--gradient-mesh); opacity:0; transition: opacity var(--dur-med); pointer-events:none; }
.project-card:hover{ transform: translateY(-6px); border-color: var(--border-strong); }
.project-card:hover::after{ opacity:1; }
.project-card__head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:12px; }
.project-card__title{ font-family: var(--font-display); font-size:18px; font-weight:700; color: var(--text-0); }
.status-pill{ font-size:11px; font-weight:700; padding:4px 10px; border-radius: var(--radius-full); white-space:nowrap; }
.status-pill--progress{ background: rgba(217,164,65,0.15); color: var(--accent-warn); }
.status-pill--completed{ background: rgba(79,154,108,0.15); color: var(--accent-3); }
.status-pill--ongoing{ background: rgba(var(--brand-rgb),0.15); color: var(--accent-1); }
.project-card__desc{ color: var(--text-2); font-size:14.5px; margin-bottom:16px; }
.project-card__section-label{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color: var(--text-3); margin-bottom:6px; margin-top:14px; }
.project-card__row{ font-size:14px; color: var(--text-1); }
.project-card__footer{ margin-top:auto; padding-top:18px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.project-link{ font-size:13.5px; font-weight:600; color: var(--accent-1); display:inline-flex; align-items:center; gap:6px; }
.project-link svg{ width:14px; height:14px; transition: transform var(--dur-fast); }
.project-link:hover svg{ transform: translate(2px,-2px); }

/* ---------- 14. Skills ---------- */
/* ---------- 15. Certifications ---------- */
.cert-filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:32px; }
.cert-filter{ font-size:13px; font-weight:600; padding:8px 16px; border-radius: var(--radius-full); border:1px solid var(--border); color: var(--text-2); transition: all var(--dur-fast); }
.cert-filter:hover{ color: var(--text-0); border-color: var(--border-strong); }
.cert-filter.is-active{ background: var(--gradient-brand); color:#fff; border-color:transparent; }
.certs-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; margin-bottom:56px; }
.cert-card{ border-radius: var(--radius-lg); padding:22px; transition: transform var(--dur-fast), border-color var(--dur-fast); }
.cert-card:hover{ transform: translateY(-4px); border-color: var(--border-strong); }
.cert-card__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:14px; }
.cert-card__icon{ width:42px; height:42px; border-radius:12px; background: var(--gradient-brand); display:grid; place-items:center; color:#fff; flex-shrink:0; }
.cert-card__icon svg{ width:20px; height:20px; }
.cert-card__cat{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color: var(--text-3); background: var(--surface-strong); padding:4px 9px; border-radius: var(--radius-full); }
.cert-card__name{ font-family: var(--font-display); font-size:15px; font-weight:700; color: var(--text-0); margin-bottom:6px; }
.cert-card__issuer{ font-size:13px; color: var(--text-2); margin-bottom:12px; }
.cert-card__foot{ display:flex; justify-content:space-between; align-items:center; font-size:12px; color: var(--text-3); border-top:1px solid var(--border); padding-top:12px; }
.cert-card__status{ color: var(--accent-3); font-weight:600; }

.in-progress__title{ font-family: var(--font-display); font-size:16px; font-weight:700; color: var(--text-0); margin-bottom:16px; }
.in-progress__grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:16px; }
.ip-card{ border-radius: var(--radius-md); padding:18px 20px; display:flex; align-items:center; gap:14px; }
.ip-card__dot{ width:10px; height:10px; border-radius:50%; background: var(--accent-warn); box-shadow: 0 0 0 4px rgba(217,164,65,0.15); flex-shrink:0; animation: dot-pulse 2s ease-in-out infinite; }
@keyframes dot-pulse{ 0%,100%{ opacity:1;} 50%{ opacity:0.4;} }
.ip-card__name{ font-size:14.5px; font-weight:600; color: var(--text-0); }
.ip-card__status{ font-size:12.5px; color: var(--text-2); }

/* ---------- 16. Education ---------- */
.education-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:20px; }
.edu-card{ border-radius: var(--radius-lg); padding:28px; }
.edu-card__degree{ font-family: var(--font-display); font-size:17px; font-weight:700; color: var(--text-0); margin-bottom:6px; }
.edu-card__institution{ font-size:14px; color: var(--accent-1); font-weight:600; margin-bottom:10px; }
.edu-card__meta{ display:flex; justify-content:space-between; align-items:center; font-size:12.5px; color: var(--text-2); font-family: var(--font-mono); margin-bottom:16px; flex-wrap:wrap; gap:8px; }
.edu-card__details{ font-size:14px; color: var(--text-1); margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--border); }
.edu-card__label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color: var(--text-3); margin-bottom:8px; }
.edu-card .tech-tags{ margin-top:8px; margin-bottom:14px; }
.edu-card__achievements{ display:grid; gap:6px; }
.edu-card__achievements li{ font-size:13.5px; color: var(--text-1); position:relative; padding-left:16px; }
.edu-card__achievements li::before{ content:'✓'; position:absolute; left:0; color: var(--accent-3); font-size:11px; top:2px; }

/* ---------- 17. Achievements ---------- */
.achievements-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; }
.ach-card{ border-radius: var(--radius-lg); padding:22px; }
.ach-card__icon{ width:38px; height:38px; border-radius:10px; background: var(--surface-strong); display:grid; place-items:center; color: var(--accent-2); margin-bottom:14px; }
.ach-card__icon svg{ width:18px; height:18px; }
.ach-card__title{ font-family: var(--font-display); font-size:14.5px; font-weight:700; color: var(--text-0); margin-bottom:6px; }
.ach-card__detail{ font-size:13px; color: var(--text-2); }

/* ---------- 18. Documents ---------- */
.documents-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:18px; }
.doc-card{ border-radius: var(--radius-lg); padding:22px; display:flex; flex-direction:column; transition: transform var(--dur-fast), border-color var(--dur-fast); }
.doc-card:hover{ transform: translateY(-4px); border-color: var(--border-strong); }
.doc-card__icon{ width:44px; height:44px; border-radius:12px; background: var(--gradient-brand); display:grid; place-items:center; color:#fff; margin-bottom:16px; }
.doc-card__icon svg{ width:20px; height:20px; }
.doc-card__title{ font-family: var(--font-display); font-size:14.5px; font-weight:700; color: var(--text-0); margin-bottom:6px; }
.doc-card__desc{ font-size:12.5px; color: var(--text-2); margin-bottom:18px; flex-grow:1; }
.doc-card__actions{ display:flex; gap:8px; }
.doc-btn{ flex:1; text-align:center; font-size:12.5px; font-weight:600; padding:9px 10px; border-radius: var(--radius-sm); border:1px solid var(--border); color: var(--text-1); transition: all var(--dur-fast); }
.doc-btn:hover{ border-color: var(--accent-1); color: var(--text-0); }
.doc-btn--fill{ background: var(--surface-strong); }

/* ---------- 19. Contact ---------- */
.contact-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
.contact-card{ border-radius: var(--radius-lg); padding:24px; display:flex; flex-direction:column; gap:6px; transition: transform var(--dur-fast), border-color var(--dur-fast); }
.contact-card:hover{ transform: translateY(-4px); border-color: var(--accent-1); }
.contact-card__icon{ width:36px; height:36px; border-radius:10px; background: var(--surface-strong); display:grid; place-items:center; color: var(--accent-1); margin-bottom:8px; }
.contact-card__icon svg{ width:17px; height:17px; }
.contact-card__label{ font-size:11.5px; text-transform:uppercase; letter-spacing:0.05em; color: var(--text-3); font-weight:700; }
.contact-card__value{ font-size:14.5px; font-weight:600; color: var(--text-0); word-break: break-word; }

/* ---------- 20. Footer ---------- */
.site-footer{ padding: 36px 0; border-top:1px solid var(--border); }
.site-footer__inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.site-footer p{ font-size:13px; color: var(--text-3); }
.back-to-top{ width:38px; height:38px; border-radius:50%; border:1px solid var(--border); display:grid; place-items:center; color: var(--text-2); transition: all var(--dur-fast); }
.back-to-top:hover{ color: var(--text-0); border-color: var(--accent-1); transform: translateY(-3px); }
.back-to-top svg{ width:16px; height:16px; }

/* ---------- 21. Responsive ---------- */
@media (max-width: 1080px){
  .achievements-grid{ grid-template-columns: repeat(2,1fr); }
  .documents-grid{ grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 960px){
  .hero__inner{ grid-template-columns:1fr; text-align:center; }
  .hero__text{ order:2; }
  .hero__visual{ order:1; }
  .eyebrow::before{ display:none; }
  .hero__cta, .hero__socials{ justify-content:center; }
  .hero__summary{ margin-left:auto; margin-right:auto; }
  .about__grid{ grid-template-columns:1fr; }
  .about__facts{ position:static; grid-template-columns: repeat(2,1fr); }
  .projects-grid{ grid-template-columns:1fr; }
  .certs-grid{ grid-template-columns: repeat(2,1fr); }
  .education-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns: repeat(2,1fr); }
  .stats-strip__grid{ grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 800px){
  .nav__menu{
    position: fixed; inset: 84px 16px auto 16px; flex-direction:column; align-items:stretch; gap:4px;
    background: var(--bg-1); border:1px solid var(--border); border-radius: var(--radius-lg);
    padding:12px; box-shadow: var(--shadow-lg);
    opacity:0; visibility:hidden; transform: translateY(-10px);
    transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast);
  }
  .nav__menu.is-open{ opacity:1; visibility:visible; transform: translateY(0); }
  .nav__link{ padding:12px 14px; }
  .nav__toggle{ display:flex; }
  .nav__toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav__toggle.is-open span:nth-child(2){ opacity:0; }
  .nav__toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
}

@media (max-width: 640px){
  /* Collapse the card grids to a single column on phones. `.skills-grid` used to
     be listed here too and was dropped with the rest of that dead class - the
     other five are all live and this rule is the only thing making them stack. */
  .achievements-grid, .documents-grid, .contact-grid, .certs-grid, .in-progress__grid{ grid-template-columns:1fr; }
  .stats-strip__grid{ grid-template-columns: repeat(2,1fr); }
  .hero__badge{ display:none; }
  .section{ padding:70px 0; }
  .hero{ padding-top:48px; }
}

/* ==========================================================================
   v2.0 — Recruiter conversion layer. Additive only: same palette, same
   glass language, same motion. Nothing above this line was redesigned.
   ========================================================================== */

/* ---------- Nav brand: 5N3 mark + full name ---------- */
/* Ecosystem wordmark: 5N3 + PROFILE, N and suffix in the product gold */
.nav__name--wordmark{ font-size: 13.5px; font-weight: 800; letter-spacing: 0.16em; color: var(--text-0); }
.nav__name--wordmark b{ color: var(--accent-1); font-weight: 800; }
.nav__name--wordmark .wm-suffix{ margin-left: 9px; }

.tech-tag--gold{ border-color: rgba(var(--brand-rgb), 0.4); color: var(--brand-300); }

/* ---------- Technology dashboard ---------- */
#stack.section{ padding: 72px 0; }
#stack .section__lead{ margin-bottom: 30px; }
.techdash-grid{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
  gap: 13px;
}
.techdash-card{ padding: 15px 17px; border-radius: var(--radius-md); }
.techdash-card__head{
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--text-0);
  margin-bottom: 10px;
}
.techdash-card__head svg{ width: 15px; height: 15px; color: var(--accent-1); }
.techdash-card__items{ display: flex; flex-direction: column; gap: 6px; }
.techdash-item{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.techdash-item__name{ font-size: 12.5px; color: var(--text-1); }
.techdash-item__dots{ display: inline-flex; gap: 3px; }
.techdash-item__dots i{
  width: 11px; height: 4px; border-radius: 2px;
  background: var(--surface-strong);
  border: 1px solid var(--border);
  transition: background var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease);
}
.techdash-item__dots i.is-on{ background: var(--accent-1); border-color: transparent; }

/* ---------- Timeline v2: highlights + impact ---------- */
.timeline-hls{ display: flex; flex-direction: column; gap: 7px; margin: 12px 0 2px; }
.timeline-hl{ display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--text-1); }
.timeline-hl svg{ width: 13px; height: 13px; margin-top: 3px; color: var(--accent-1); flex-shrink: 0; }
.timeline-impact{ margin: 14px 0 2px; font-size: 13.5px; color: var(--text-1); }
.timeline-impact strong{ color: var(--accent-1); font-weight: 600; }

/* ---------- Certification roadmap ---------- */
.roadmap{
  display: flex; align-items: stretch; gap: 14px;
  margin: 34px 0 40px; flex-wrap: wrap;
}
.roadmap__stage{
  flex: 1; min-width: 180px;
  display: flex; flex-direction: column; gap: 5px;
  padding: 18px 20px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface);
}
.roadmap__stage--done{ border-color: rgba(79, 154, 108, 0.4); }
.roadmap__stage--now{ border-color: rgba(var(--brand-rgb), 0.5); box-shadow: var(--shadow-glow); }
.roadmap__stage--next{ border-style: dashed; }
.roadmap__count{ font-family: var(--font-display); font-size: 26px; font-weight: 800; color: var(--text-0); }
.roadmap__stage--done .roadmap__count{ color: var(--accent-3); }
.roadmap__stage--now .roadmap__count{ color: var(--accent-1); }
.roadmap__name{ font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-2); }
.roadmap__hint{ font-size: 12.5px; color: var(--text-2); }
.roadmap__arrow{ align-self: center; width: 22px; height: 2px; background: var(--border-strong); position: relative; flex-shrink: 0; }
.roadmap__arrow::after{
  content: ''; position: absolute; right: -1px; top: -3px;
  border-left: 7px solid var(--border-strong);
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
}
.roadmap-stage-title{ font-size: 15px; font-weight: 700; color: var(--text-0); margin-bottom: 14px; }
@media (max-width: 720px){ .roadmap__arrow{ display: none; } }

/* ---------- Documents: verification ---------- */
.doc-verify{
  display: inline-flex; align-items: center; gap: 7px;
  margin: 10px 0 2px;
  font-size: 12px; color: var(--accent-3);
}
.doc-verify svg{ width: 12px; height: 12px; }
.doc-btn svg{ width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; }

/* Gated documents: dashed edge signals "not immediately downloadable", and the
   request button gets the accent so it still reads as the intended action
   rather than a dead end. */
.doc-card--gated{ border-style: dashed; }
.doc-card--gated .doc-card__icon{ background: var(--surface-strong); color: var(--accent-1); }
.doc-card--gated .doc-btn--fill{
  background: var(--surface-strong); border-color: var(--border-strong);
  color: var(--text-0); cursor: pointer;
}
.doc-card--gated .doc-btn--fill:hover{ border-color: var(--accent-1); }
.doc-btn svg{ width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; }

/* ---------- 18b. Document request modal ---------- */
.req[hidden]{ display: none; }
.req{ position: fixed; inset: 0; z-index: 600; display: grid; place-items: center; padding: 20px; }
.req__backdrop{ position: absolute; inset: 0; background: rgba(0,0,0,0.72); backdrop-filter: blur(3px); }
.req__panel{
  position: relative; width: min(30rem, 100%); max-height: 90vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); padding: 28px;
  box-shadow: var(--shadow-card-hover, 0 24px 60px rgba(0,0,0,0.5));
  animation: reqIn 220ms var(--ease, cubic-bezier(.4,0,.2,1));
}
@keyframes reqIn{ from{ opacity:0; transform: translateY(10px) scale(.985);} to{ opacity:1; transform:none;} }
@media (prefers-reduced-motion: reduce){ .req__panel{ animation: none; } }
.req__x{
  position: absolute; top: 14px; right: 14px; width: 30px; height: 30px;
  border-radius: var(--radius-sm); font-size: 20px; line-height: 1;
  color: var(--text-2); background: none; border: 1px solid transparent; cursor: pointer;
}
.req__x:hover{ color: var(--text-0); border-color: var(--border); }
.req__title{ font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--text-0); margin: 2px 0 6px; }
.req__lead{ font-size: 12.5px; color: var(--text-2); margin-bottom: 18px; }
.req__form{ display: flex; flex-direction: column; gap: 13px; }
.req__field{ display: flex; flex-direction: column; gap: 5px; }
.req__field > span{ font-size: 11.5px; font-weight: 600; color: var(--text-1); letter-spacing: 0.02em; }
.req__field > span b{ color: var(--accent-1); }
.req__field input, .req__field select, .req__field textarea{
  width: 100%; padding: 9px 11px;
  background: var(--bg); color: var(--text-0);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 13px;
  transition: border-color var(--dur-fast);
}
.req__field input:focus, .req__field select:focus, .req__field textarea:focus{
  outline: none; border-color: var(--accent-1);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.14);
}
.req__field textarea{ resize: vertical; min-height: 64px; }
/* Honeypot - visually gone, still reachable by bots that fill every field. */
.req__hp{ position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.req__actions{ display: flex; gap: 10px; margin-top: 4px; }
.req__actions .btn{ flex: 1; justify-content: center; padding: 10px 16px; font-size: 13px; }
.req__status{ font-size: 12.5px; min-height: 1em; }
.req__status.is-ok{ color: var(--accent-3); }
.req__status.is-err{ color: var(--danger, #f87171); }
.req__privacy{ font-size: 11px; color: var(--text-3); }
@media (max-width: 560px){
  .req__panel{ padding: 22px 18px; }
  .req__actions{ flex-direction: column; }
}

.snapshot__label{
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-3); margin: 0 0 8px;
}

/* ---------- Ready to Hire panel ---------- */
.hire-panel{ padding: 26px 28px; border-radius: var(--radius-md); margin-bottom: 34px; }
.hire-panel__grid{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px 28px; margin-bottom: 18px;
}
.hire-panel__grid > div{ display: flex; flex-direction: column; gap: 3px; }
/* .hire-panel__cta removed with the buttons it styled - the resume lives in the
   documents section and the email address in the contact cards. */