/*!
 * MD Mahmudul Hasan Rudra — portfolio design system
 * Zero-framework. Tokens -> reset -> layout -> components -> print -> motion.
 */

/* ============================== FONTS ============================== */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-var.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-var.woff2') format('woff2');
}

/* ============================== TOKENS ============================== */
:root{
  /* color — dark (default) */
  --bg:#0a0a0c;
  --bg-soft:#111114;
  --card:#131316;
  --text:#f2f4f3;
  --muted:#9a9aa2;
  --primary:#22c55e;
  --primary-strong:#16a34a;
  --accent:#4ade80;
  --on-primary:#04170a;
  --ring:rgba(34,197,94,.35);
  --border-subtle:rgba(255,255,255,.09);
  --badge-bg:rgba(255,255,255,.04);
  --overlay:rgba(4,6,5,.65);
  --danger:#f87171;
  --warning:#f59e0b;

  --gradient-primary: linear-gradient(135deg, #16a34a 0%, #4ade80 100%);
  --gradient-heading: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,.72) 100%);
  --gradient-card: linear-gradient(145deg, #131316 0%, #0d0d0f 100%);
  --shadow-lg: 0 20px 45px -18px rgba(0,0,0,.65);
  --shadow-glow: 0 0 36px rgba(34,197,94,.18);

  /* type */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;
  --fs-body: 1rem;
  --lh-body: 1.65;

  /* space scale (4/8pt rhythm) */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* radii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-full: 999px;

  /* motion */
  --ease: cubic-bezier(.16,1,.3,1);
  --dur-fast: 150ms;
  --dur: 300ms;
  --dur-slow: 500ms;

  /* layout */
  --container: 1200px;
  --nav-h: 68px;

  /* z-scale */
  --z-nav: 100;
  --z-progress: 110;
  --z-fab: 120;
  --z-toast: 200;
  --z-palette: 300;
}

:root[data-theme="light"]{
  --bg:#f7f7f5;
  --bg-soft:#ffffff;
  --card:#ffffff;
  --text:#12140f;
  --muted:#5b5f57;
  --primary:#16a34a;
  --primary-strong:#15803d;
  --accent:#0f9d58;
  --on-primary:#ffffff;
  --ring:rgba(22,163,74,.18);
  --border-subtle:rgba(0,0,0,.09);
  --badge-bg:rgba(0,0,0,.035);
  --overlay:rgba(20,22,18,.5);

  --gradient-primary: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  --gradient-heading: linear-gradient(180deg, #12140f 0%, rgba(18,20,15,.7) 100%);
  --gradient-card: linear-gradient(145deg, #ffffff 0%, #f3f5f0 100%);
  --shadow-lg: 0 20px 45px -18px rgba(0,0,0,.1);
  --shadow-glow: 0 0 30px rgba(22,163,74,.12);
}

/* honour an explicit system preference before the user has ever toggled */
@media (prefers-color-scheme: light){
  :root:not([data-theme]){
    --bg:#f7f7f5; --bg-soft:#ffffff; --card:#ffffff; --text:#12140f; --muted:#5b5f57;
    --primary:#16a34a; --primary-strong:#15803d; --accent:#0f9d58; --on-primary:#ffffff;
    --ring:rgba(22,163,74,.18); --border-subtle:rgba(0,0,0,.09); --badge-bg:rgba(0,0,0,.035);
    --gradient-primary: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    --gradient-heading: linear-gradient(180deg, #12140f 0%, rgba(18,20,15,.7) 100%);
    --gradient-card: linear-gradient(145deg, #ffffff 0%, #f3f5f0 100%);
    --shadow-lg: 0 20px 45px -18px rgba(0,0,0,.1);
    --shadow-glow: 0 0 30px rgba(22,163,74,.12);
  }
}

/* ============================== RESET ============================== */
*, *::before, *::after{ box-sizing: border-box; }
* { margin: 0; }
html{
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  color-scheme: dark light;
}
body{
  min-height: 100dvh;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
  transition: background var(--dur) ease, color var(--dur) ease;
}
img, picture, svg, video{ display:block; max-width:100%; }
[hidden]{ display:none !important; } /* component classes (e.g. display:grid) must never win over the hidden attribute */
button, input, textarea, select{ font: inherit; color: inherit; }
button{ background:none; border:0; }
a{ color: inherit; text-decoration: none; }
ul, ol{ list-style: none; padding: 0; }
h1,h2,h3,h4,h5,h6{ font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
*{ -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

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

::selection{ background: rgba(34,197,94,.28); }

/* scrollbar (progressive, no layout impact if unsupported) */
* { scrollbar-color: var(--border-subtle) transparent; }

/* ============================== TYPE SCALE ============================== */
.h-display{ font-size: clamp(2.4rem, 5.5vw, 3.75rem); font-weight: 700; letter-spacing: -.02em; }
.h1{ font-size: clamp(1.9rem, 4vw, 2.5rem); font-weight: 700; letter-spacing: -.02em; }
.h2{ font-size: clamp(1.6rem, 3.2vw, 2.1rem); font-weight: 700; letter-spacing: -.015em; }
.h3{ font-size: clamp(1.2rem, 2vw, 1.4rem); font-weight: 600; }
.text-lead{ font-size: clamp(1.02rem, 1.6vw, 1.15rem); color: var(--muted); line-height: 1.7; }
.text-small{ font-size: .875rem; }
.text-muted{ color: var(--muted); }
.text-mono{ font-family: var(--font-mono); }
.text-gradient{
  background: var(--gradient-heading);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.text-accent-gradient{
  background: var(--gradient-primary);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.kicker{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family: var(--font-mono); font-size: .75rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--primary);
  margin-bottom: var(--sp-3);
}
.kicker::before{ content:''; width:6px; height:6px; border-radius:50%; background: var(--primary); box-shadow: 0 0 0 3px var(--ring); }

/* ============================== LAYOUT ============================== */
.container{ width:100%; max-width: var(--container); margin-inline:auto; padding-inline: clamp(1.1rem, 4vw, 2rem); }
.section{ padding-block: var(--sp-9); position: relative; scroll-margin-top: calc(var(--nav-h) + 12px); }
.section-head{ max-width: 640px; margin-bottom: var(--sp-7); }
.section-head.center{ margin-inline:auto; text-align:center; }
.anchor-alias{ position:absolute; top:-1px; }

.stack{ display:flex; flex-direction:column; }
.cluster{ display:flex; flex-wrap:wrap; align-items:center; }
.grid{ display:grid; gap: var(--sp-5); }
.grid-2{ grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); }
.grid-3{ grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); }
.grid-4{ grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); }
.g-2{ gap: var(--sp-2); } .g-3{ gap: var(--sp-3); } .g-4{ gap: var(--sp-4); } .g-5{ gap: var(--sp-5); }

@media (min-width: 768px){
  .cols-2{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items:center; }
  .cols-5-7{ display:grid; grid-template-columns: 5fr 7fr; gap: var(--sp-7); align-items:center; }
  .cols-7-5{ display:grid; grid-template-columns: 7fr 5fr; gap: var(--sp-7); align-items:center; }
}

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link{
  position:absolute; left:50%; top:-60px; transform:translateX(-50%);
  background: var(--primary); color: var(--on-primary); font-weight:600;
  padding:.65rem 1.1rem; border-radius: var(--r-md); z-index: 400; transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus-visible{ top: 14px; }

/* ============================== BUTTONS ============================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family: var(--font-sans); font-weight: 600; font-size: .95rem;
  padding: .72rem 1.4rem; border-radius: var(--r-md);
  cursor:pointer; white-space:nowrap; line-height:1;
  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), opacity var(--dur-fast) var(--ease);
  min-height: 44px;
}
.btn:active{ transform: scale(.97); }
.btn-primary{ background: var(--gradient-primary); color: var(--on-primary); }
.btn-primary:hover{ box-shadow: 0 15px 30px -12px rgba(34,197,94,.45); transform: translateY(-2px); }
.btn-outline{ border:1.5px solid var(--border-subtle); color: var(--text); background: transparent; }
.btn-outline:hover{ border-color: var(--primary); color: var(--primary); transform: translateY(-2px); }
.btn-ghost{ color: var(--muted); padding: .5rem .8rem; }
.btn-ghost:hover{ color: var(--text); }
.btn-sm{ padding: .5rem 1rem; font-size: .85rem; min-height:36px; }
.btn:disabled{ opacity:.55; cursor:not-allowed; transform:none !important; }
.btn-icon{ width:44px; height:44px; padding:0; border-radius: var(--r-md); }

/* ============================== BADGES / PILLS ============================== */
.badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family: var(--font-mono); font-size: .75rem; font-weight:500; letter-spacing:.02em;
  padding: .38rem .8rem; border-radius: var(--r-full);
  background: var(--badge-bg); border:1px solid var(--border-subtle); color: var(--text);
}
.badge-accent{ color: var(--primary); border-color: color-mix(in oklab, var(--primary) 35%, transparent); background: color-mix(in oklab, var(--primary) 10%, transparent); }
.badge-live{ color: var(--primary); }
.badge-live::before{ content:''; width:6px; height:6px; border-radius:50%; background: var(--primary); animation: pulse-dot 2s infinite; }
.pill-row{ display:flex; flex-wrap:wrap; gap: var(--sp-2); }
.icon-pill{
  display:inline-flex; align-items:center; gap:.45rem; padding:.45rem 1rem;
  border-radius: var(--r-full); font-size:.85rem; font-weight:500;
  background: color-mix(in oklab, var(--primary) 8%, transparent);
  border:1px solid color-mix(in oklab, var(--primary) 20%, transparent);
}
.icon-pill svg{ width:16px; height:16px; color: var(--primary); }

@keyframes pulse-dot{
  0%,100%{ box-shadow: 0 0 0 0 rgba(34,197,94,.55); }
  70%{ box-shadow: 0 0 0 7px rgba(34,197,94,0); }
}

/* ============================== ICONS ============================== */
.icon{ width:1.25em; height:1.25em; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.icon-fill{ fill:currentColor; stroke:none; }

/* ============================== NAV ============================== */
.site-header{
  position: sticky; top:0; z-index: var(--z-nav);
  height: var(--nav-h);
}
.nav-blur{
  position:absolute; inset:0;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  border-bottom: 1px solid var(--border-subtle);
}
.nav-inner{ position:relative; height:100%; display:flex; align-items:center; justify-content:space-between; gap: var(--sp-4); }
.brand{ font-weight:700; font-size:1.05rem; letter-spacing:-.01em; display:flex; align-items:center; gap:.5rem; }
.brand-mark{ width:30px; height:30px; border-radius:9px; background: var(--gradient-primary); display:flex; align-items:center; justify-content:center; color:var(--on-primary); font-family:var(--font-mono); font-weight:700; font-size:.8rem; }
.nav-links{ display:none; align-items:center; gap: var(--sp-2); }
.nav-links a{
  padding:.55rem .85rem; border-radius: var(--r-sm); color: var(--muted); font-size:.92rem; font-weight:500;
  transition: color var(--dur-fast) ease, background var(--dur-fast) ease;
}
.nav-links a:hover{ color: var(--text); }
.nav-links a[aria-current="page"]{ color: var(--primary); background: color-mix(in oklab, var(--primary) 8%, transparent); }
@media (min-width: 1024px){ .nav-links{ display:flex; } }

.nav-actions{ display:flex; align-items:center; gap: var(--sp-2); }
.kbd-hint{
  display:none; align-items:center; gap:.3rem; font-family: var(--font-mono); font-size:.75rem; color: var(--muted);
  border:1px solid var(--border-subtle); padding:.35rem .55rem; border-radius: var(--r-sm); background: var(--badge-bg);
}
@media (min-width: 640px){ .kbd-hint{ display:inline-flex; } }
.nav-toggle{ display:inline-flex; }
@media (min-width: 1024px){ .nav-toggle{ display:none; } }

.mobile-nav{
  position:absolute; top:100%; left:0; right:0; margin: 0 var(--sp-4);
  background: var(--card); border:1px solid var(--border-subtle); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: var(--sp-3); display:flex; flex-direction:column; gap:.15rem;
  transform-origin: top center; transform: scaleY(0); opacity:0; pointer-events:none; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.mobile-nav.open{ transform: scaleY(1); opacity:1; pointer-events:auto; }
.mobile-nav a{ padding: .75rem .9rem; border-radius: var(--r-sm); color: var(--text); font-weight:500; }
.mobile-nav a:hover{ background: var(--badge-bg); }

.scroll-progress{ position:fixed; top:0; left:0; height:2px; width:100%; z-index: var(--z-progress); background: transparent; }
.scroll-progress span{ display:block; height:100%; width:100%; background: var(--gradient-primary); transform: scaleX(0); transform-origin:left; }

/* ============================== HERO ============================== */
.hero{ position:relative; overflow:hidden; padding-top: clamp(3rem, 9vh, 6rem); padding-bottom: var(--sp-8); min-height: 88vh; display:flex; align-items:center; }
.hero-field{
  position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(circle at 1px 1px, color-mix(in oklab, var(--primary) 22%, transparent) 1px, transparent 0);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 65% 55% at 68% 30%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 65% 55% at 68% 30%, #000 0%, transparent 72%);
}
.hero-glow{
  position:absolute; width:640px; height:640px; border-radius:50%; top:-22%; right:-14%;
  background: radial-gradient(circle at 40% 40%, rgba(34,197,94,.16), transparent 55%);
  filter: blur(70px); pointer-events:none;
}
.hero-inner{ position:relative; }
.hero-photo-wrap{ position:relative; display:inline-block; }
.avatar{
  width: clamp(140px, 22vw, 176px); aspect-ratio:1/1; border-radius: var(--r-lg);
  object-fit:cover; border: 2px solid color-mix(in oklab, var(--primary) 35%, transparent);
  box-shadow: 0 0 40px rgba(34,197,94,.16);
}
.status-dot{
  position:absolute; bottom:8px; right:8px; width:20px; height:20px; border-radius:50%;
  background: var(--primary); border:3px solid var(--bg);
}
.hero-role{ min-height: 1.6em; }
.typing-cursor{ display:inline-block; margin-left:2px; animation: caret 1s steps(1) infinite; color: var(--primary); }
@keyframes caret{ 50%{ opacity:0; } }

.availability{
  display:inline-flex; align-items:center; gap:.6rem; font-family: var(--font-mono); font-size:.82rem;
  padding:.5rem .9rem; border-radius: var(--r-full); border:1px solid var(--border-subtle); background: var(--badge-bg);
}
.availability .dot{ width:8px; height:8px; border-radius:50%; background: var(--primary); animation: pulse-dot 2s infinite; }

.hero-stats{ margin-top: var(--sp-7); }
.stat{ display:flex; flex-direction:column; gap:.2rem; }
.stat-num{ font-size: clamp(1.5rem,3vw,2rem); font-weight:700; font-family: var(--font-mono); }
.stat-label{ font-size:.78rem; color: var(--muted); text-transform:uppercase; letter-spacing:.06em; }

/* ============================== SOCIAL ============================== */
.social-row{ display:flex; flex-wrap:wrap; gap: var(--sp-2); }
.social-row a{
  width:44px; height:44px; border-radius: var(--r-md); border:1px solid var(--border-subtle);
  display:flex; align-items:center; justify-content:center; background: var(--badge-bg);
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.social-row a:hover{ background: var(--gradient-primary); color: var(--on-primary); transform: translateY(-3px); border-color: transparent; }

/* ============================== CARDS ============================== */
.card{
  background: var(--gradient-card); border:1px solid var(--border-subtle); border-radius: var(--r-lg);
  padding: var(--sp-5); position:relative;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card-hover:hover{ transform: translateY(-4px); border-color: color-mix(in oklab, var(--primary) 30%, transparent); box-shadow: var(--shadow-lg); }
.card-feature svg{ color: var(--primary); width:26px; height:26px; margin-bottom: var(--sp-3); }
.glass-tile{ background: var(--badge-bg); border:1px solid var(--border-subtle); border-radius: var(--r-md); }

/* ============================== TIMELINE ============================== */
.timeline{ position:relative; padding-left: 38px; }
.timeline::before{ content:''; position:absolute; left:12px; top:6px; bottom:6px; width:2px; background: linear-gradient(to bottom, var(--primary), var(--accent), transparent); }
.t-item{ position:relative; padding: var(--sp-5); margin-bottom: var(--sp-4); border-radius: var(--r-lg); background: var(--gradient-card); border:1px solid var(--border-subtle); }
.t-item::before{ content:''; position:absolute; left:-32px; top:28px; width:14px; height:14px; border-radius:50%; background: var(--gradient-primary); border:3px solid var(--bg); box-shadow: 0 0 0 3px var(--primary); }
.t-item.is-now::before{ animation: pulse-dot 2s infinite; }
.t-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap: var(--sp-2); margin-bottom:.3rem; }
.t-role{ font-weight:500; color: var(--muted); margin-bottom: var(--sp-3); }

.now-panel{ display:grid; gap: var(--sp-3); margin-bottom: var(--sp-3); }
@media (min-width:640px){ .now-panel{ grid-template-columns: 1fr 1fr; } }

/* ============================== PROJECTS ============================== */
.filter-row{ display:flex; flex-wrap:wrap; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.filter-btn{
  font-family: var(--font-mono); font-size:.8rem; padding:.5rem 1rem; border-radius: var(--r-full);
  border:1px solid var(--border-subtle); color: var(--muted); background: var(--badge-bg); cursor:pointer;
  transition: all var(--dur-fast) ease;
}
.filter-btn:hover{ color: var(--text); }
.filter-btn[aria-pressed="true"]{ color: var(--on-primary); background: var(--gradient-primary); border-color: transparent; }
.project-card{ display:flex; flex-direction:column; gap: var(--sp-4); }
.project-card[hidden]{ display:none; }
.project-top{ display:flex; justify-content:space-between; align-items:flex-start; gap: var(--sp-3); }
.project-actions{ display:flex; flex-wrap:wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.diagram-wrap{ margin-top: var(--sp-4); border-radius: var(--r-md); border:1px solid var(--border-subtle); background: var(--badge-bg); padding: var(--sp-4); overflow-x:auto; }
.diagram-wrap svg{ width:100%; height:auto; min-width:480px; }
.diagram-wrap text{ fill: var(--text); font-family: var(--font-mono); }
.diagram-wrap .edge-label{ fill: var(--muted); }
.diagram-wrap .node-box{ fill: var(--card); stroke: var(--border-subtle); }
.diagram-wrap .node-accent{ stroke: var(--primary); }
.diagram-wrap .flow-line{ stroke: var(--border-subtle); fill:none; }
.diagram-wrap .flow-arrow{ fill: var(--muted); }

/* ============================== SKILLS ============================== */
.skill-card{ display:flex; flex-direction:column; gap: var(--sp-4); }
.skill-card-head{ display:flex; align-items:center; gap: var(--sp-3); padding-bottom: var(--sp-3); border-bottom:1px solid var(--border-subtle); }
.skill-card-head svg{ color: var(--primary); width:22px; height:22px; }
.skill-tags{ display:flex; flex-wrap:wrap; gap: var(--sp-2); }
.skill-tag{ display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .85rem; border-radius: var(--r-md); background: var(--badge-bg); border:1px solid var(--border-subtle); font-size:.85rem; }
.skill-tag:hover{ border-color: var(--primary); }

/* ============================== CREDENTIALS / GITHUB ============================== */
.cred-card.is-progress{ border-style:dashed; opacity:.85; }
.gh-stats{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-3); margin: var(--sp-4) 0; text-align:center; }
.gh-stat-num{ font-family: var(--font-mono); font-weight:700; font-size:1.3rem; }
.repo-row{ display:flex; justify-content:space-between; align-items:center; padding: var(--sp-3); border-radius: var(--r-md); background: var(--badge-bg); border:1px solid var(--border-subtle); }
.repo-row + .repo-row{ margin-top: var(--sp-2); }

/* ============================== WRITING ============================== */
.post-card{ display:flex; flex-direction:column; gap: var(--sp-3); }
.post-meta{ display:flex; gap: var(--sp-3); font-family: var(--font-mono); font-size:.75rem; color: var(--muted); }

/* ============================== RESUME / PROOF ============================== */
.resume-card{ text-align:center; display:flex; flex-direction:column; align-items:center; gap: var(--sp-3); }
.resume-card svg{ width:34px; height:34px; color: var(--primary); }
.testimonial-avatar{
  width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: var(--gradient-primary); color: var(--on-primary); font-weight:700; flex-shrink:0;
}
.faq-item{ border-bottom:1px solid var(--border-subtle); }
.faq-item:last-child{ border-bottom:0; }
.faq-q{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap: var(--sp-3);
  padding: var(--sp-4) 0; font-weight:600; text-align:left; cursor:pointer;
}
.faq-q svg{ flex-shrink:0; color: var(--primary); transition: transform var(--dur) var(--ease); }
.faq-item[data-open="true"] .faq-q svg{ transform: rotate(180deg); }
.faq-a{ overflow:hidden; height:0; transition: height var(--dur) var(--ease); }
.faq-a p{ padding-bottom: var(--sp-4); color: var(--muted); }

/* ============================== CONTACT / FORM ============================== */
.contact-channel{
  display:flex; align-items:center; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-md);
  background: var(--badge-bg); border:1px solid var(--border-subtle); transition: border-color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.contact-channel:hover{ border-color: var(--primary); transform: translateY(-2px); }
.contact-channel svg{ width:22px; height:22px; color: var(--primary); flex-shrink:0; }
.copy-btn{ margin-left:auto; color: var(--muted); }
.copy-btn:hover{ color: var(--primary); }

.field{ display:flex; flex-direction:column; gap:.4rem; margin-bottom: var(--sp-4); }
.field label{ font-size:.85rem; font-weight:600; }
.field .req{ color: var(--primary); }
.field input, .field textarea{
  background: var(--badge-bg); border:1px solid var(--border-subtle); border-radius: var(--r-md);
  padding:.75rem .9rem; color: var(--text); font-size:.95rem; min-height:44px;
  transition: border-color var(--dur-fast) ease;
}
.field textarea{ min-height:120px; resize:vertical; }
.field input:focus-visible, .field textarea:focus-visible{ border-color: var(--primary); outline:none; box-shadow: 0 0 0 3px var(--ring); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"]{ border-color: var(--danger); }
.field-error{ font-size:.8rem; color: var(--danger); display:none; }
.field-error.show{ display:block; }
.field-hint{ font-size:.78rem; color: var(--muted); }
.form-status{ font-size:.9rem; margin-top: var(--sp-2); display:none; }
.form-status.show{ display:block; }
.form-status.ok{ color: var(--primary); }
.form-status.err{ color: var(--danger); }
.honeypot{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

.cta-banner{
  border-radius: var(--r-xl); border:1px solid var(--border-subtle); padding: var(--sp-8) var(--sp-6); text-align:center;
  background: linear-gradient(135deg, var(--card) 0%, var(--bg) 100%); position:relative; overflow:hidden;
}
.cta-banner::before{ content:''; position:absolute; top:0; left:0; right:0; height:2px; background: var(--gradient-primary); }

/* ============================== FOOTER ============================== */
.site-footer{ border-top:1px solid var(--border-subtle); padding: var(--sp-7) 0 var(--sp-6); color: var(--muted); }
.footer-grid{ display:grid; gap: var(--sp-6); margin-bottom: var(--sp-6); }
@media (min-width: 768px){ .footer-grid{ grid-template-columns: 2fr 1fr 1fr; } }
.footer-grid h3{ color: var(--text); font-size:.85rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; margin-bottom: var(--sp-3); }
.footer-grid a{ display:block; padding:.3rem 0; }
.footer-grid a:hover{ color: var(--text); }
.footer-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap: var(--sp-3); padding-top: var(--sp-5); border-top:1px solid var(--border-subtle); font-size:.85rem; }

/* ============================== FLOATING UI ============================== */
.sticky-cta{ position:fixed; right: clamp(14px,4vw,24px); bottom: calc(18px + env(safe-area-inset-bottom)); z-index: var(--z-fab); display:flex; flex-direction:column; gap: var(--sp-2); align-items:flex-end; }
.fab{
  width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: var(--gradient-primary); color: var(--on-primary); box-shadow: 0 10px 26px rgba(34,197,94,.32); cursor:pointer;
  transition: transform var(--dur-fast) var(--ease);
}
.fab:hover{ transform: scale(1.07); }
.fab-secondary{ background: var(--card); color: var(--text); border:1px solid var(--border-subtle); width:44px; height:44px; opacity:0; visibility:hidden; transform: translateY(8px); transition: all var(--dur) var(--ease); }
.fab-secondary.visible{ opacity:1; visibility:visible; transform:none; }

.toast{
  position:fixed; left:50%; bottom: clamp(20px,6vw,36px); transform: translate(-50%, 16px);
  background: var(--card); border:1px solid var(--border-subtle); color: var(--text);
  padding: .85rem 1.3rem; border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  z-index: var(--z-toast); opacity:0; pointer-events:none; transition: all var(--dur) var(--ease);
  display:flex; align-items:center; gap:.6rem; font-size:.9rem;
}
.toast.show{ opacity:1; transform: translate(-50%, 0); }
.toast svg{ color: var(--primary); width:18px; height:18px; }

/* ============================== DIALOGS ============================== */
dialog{
  background: var(--card); color: var(--text); border:1px solid var(--border-subtle);
  border-radius: var(--r-xl); padding:0; max-width: min(640px, 92vw); width:100%;
  box-shadow: var(--shadow-lg);
}
dialog::backdrop{ background: var(--overlay); backdrop-filter: blur(3px); }
dialog[open]{ animation: dialog-in var(--dur) var(--ease); }
@keyframes dialog-in{ from{ opacity:0; transform: translateY(12px) scale(.98); } to{ opacity:1; transform:none; } }
.dialog-head{ display:flex; justify-content:space-between; align-items:center; gap: var(--sp-3); padding: var(--sp-5); border-bottom:1px solid var(--border-subtle); }
.dialog-head h3{ font-size:1.05rem; }
.dialog-close{ width:36px; height:36px; border-radius: var(--r-sm); display:flex; align-items:center; justify-content:center; color: var(--muted); }
.dialog-close:hover{ color: var(--text); background: var(--badge-bg); }
.dialog-body{ padding: var(--sp-5); max-height: 70vh; overflow-y:auto; }
.dialog-body h4{ font-size:.95rem; margin: var(--sp-4) 0 var(--sp-2); }
.dialog-body p, .dialog-body li{ color: var(--muted); }
.dialog-body ul{ list-style: disc; padding-left: 1.2rem; }
.dialog-body ul li{ margin-bottom:.3rem; }
.dialog-foot{ padding: var(--sp-4) var(--sp-5); border-top:1px solid var(--border-subtle); display:flex; justify-content:flex-end; gap: var(--sp-2); }

/* command palette */
#palette{ max-width: min(560px, 92vw); }
.palette-input-wrap{ display:flex; align-items:center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom:1px solid var(--border-subtle); }
.palette-input-wrap svg{ color: var(--muted); width:18px; height:18px; }
#paletteInput{ flex:1; background:none; border:0; font-size:1rem; color: var(--text); min-height:auto; }
#paletteInput:focus-visible{ outline:none; }
.palette-list{ max-height: 60vh; overflow-y:auto; padding: var(--sp-2); }
.palette-item{
  display:flex; align-items:center; gap: var(--sp-3); padding: .7rem .9rem; border-radius: var(--r-md);
  cursor:pointer; color: var(--muted);
}
.palette-item svg{ width:18px; height:18px; flex-shrink:0; }
.palette-item[aria-selected="true"], .palette-item:hover{ background: var(--badge-bg); color: var(--text); }
.palette-item .kbd{ margin-left:auto; font-family: var(--font-mono); font-size:.72rem; border:1px solid var(--border-subtle); padding:.15rem .4rem; border-radius:5px; }
.palette-empty{ padding: var(--sp-6); text-align:center; color: var(--muted); }
.palette-group{ font-family: var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color: var(--muted); padding: .6rem .9rem .2rem; }

/* ============================== REVEAL MOTION ============================== */
[data-reveal]{ opacity:0; transform: translateY(22px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
[data-reveal].in-view{ opacity:1; transform:none; }
[data-reveal-group] > *{ opacity:0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
[data-reveal-group].in-view > *{ opacity:1; transform:none; }
[data-reveal-group].in-view > *:nth-child(1){ transition-delay: 0ms; }
[data-reveal-group].in-view > *:nth-child(2){ transition-delay: 60ms; }
[data-reveal-group].in-view > *:nth-child(3){ transition-delay: 120ms; }
[data-reveal-group].in-view > *:nth-child(4){ transition-delay: 180ms; }
[data-reveal-group].in-view > *:nth-child(5){ transition-delay: 240ms; }
[data-reveal-group].in-view > *:nth-child(6){ transition-delay: 300ms; }
[data-reveal-group].in-view > *:nth-child(n+7){ transition-delay: 360ms; }

/* ============================== UTILITIES ============================== */
.mt-1{margin-top:var(--sp-1);} .mt-2{margin-top:var(--sp-2);} .mt-3{margin-top:var(--sp-3);}
.mt-4{margin-top:var(--sp-4);} .mt-5{margin-top:var(--sp-5);} .mt-6{margin-top:var(--sp-6);}
.mb-2{margin-bottom:var(--sp-2);} .mb-3{margin-bottom:var(--sp-3);} .mb-4{margin-bottom:var(--sp-4);}
.flex{display:flex;} .flex-wrap{flex-wrap:wrap;} .items-center{align-items:center;} .justify-between{justify-content:space-between;}
.w-full{width:100%;} .text-center{text-align:center;} .hidden{display:none !important;}
.rel{position:relative;}

/* ============================== RESPONSIVE ============================== */
@media (max-width: 640px){
  .hero{ min-height:auto; padding-top: calc(var(--nav-h) + var(--sp-6)); }
  .section{ padding-block: var(--sp-8); }
  .gh-stats{ grid-template-columns: repeat(3,1fr); }
}
@media (min-width: 1440px){
  .container{ max-width: 1320px; }
}
@media (min-width: 1920px){
  html{ font-size: 17.5px; }
  .container{ max-width: 1440px; }
  .section{ padding-block: var(--sp-9); }
}

/* ============================== REDUCED MOTION ============================== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-reveal], [data-reveal-group] > *{ opacity:1 !important; transform:none !important; }
  html{ scroll-behavior:auto; }
}

/* ============================== PRINT (resume) ============================== */
@media print{
  .site-header, .sticky-cta, .scroll-progress, .toast, .hero-field, .hero-glow, .site-footer,
  #hero .btn-outline, #commandPalette, dialog, .nav-toggle, .mobile-nav { display:none !important; }
  body{ background:#fff !important; color:#111 !important; font-size: 11pt; }
  .hero, .section:not(#resume){ display:none !important; }
  #resume{ padding:0 !important; }
  #printResume, [data-resume], .faq-item:not(:first-child){ display:none !important; }
  .card{ border:1px solid #ccc !important; box-shadow:none !important; background:#fff !important; }
  a{ color:#111 !important; text-decoration:none !important; }
  .kicker, .text-gradient, .text-accent-gradient{ color:#111 !important; -webkit-text-fill-color:#111 !important; background:none !important; }
  .container{ max-width:100% !important; padding:0 !important; }
  /* content may never have scrolled into view before printing — force it visible regardless
     of IntersectionObserver state (browsers vary on whether print rendering re-triggers it) */
  [data-reveal], [data-reveal-group] > *{ opacity:1 !important; transform:none !important; }
}