/* ==========================================================================
   Sahil Koundal - Portfolio
   Design language: "Control Plane" - engineering blueprint grid, deep slate
   canvas, cyan signal accent, amber for measured outcomes.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --bg:            #070b12;
  --bg-raised:     #0b1220;
  --bg-card:       #0d1524;
  --bg-inset:      #060a11;

  --line:          #1a2436;
  --line-soft:     #131b29;
  --line-strong:   #26344c;

  --ink:           #e8edf7;
  --ink-mid:       #98a5bd;
  --ink-dim:       #66738d;

  --signal:        #35e0d0;
  --signal-deep:   #0e9c92;
  --signal-glow:   rgba(53,224,208,.13);

  --amber:         #f5b544;
  --amber-glow:    rgba(245,181,68,.12);
  --violet:        #8b7cf6;
  --rose:          #f2617a;

  --radius:        14px;
  --radius-sm:     9px;
  --radius-lg:     22px;

  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;

  --shadow:      0 1px 2px rgba(0,0,0,.4), 0 18px 44px -22px rgba(0,0,0,.9);
  --shadow-lift: 0 2px 4px rgba(0,0,0,.4), 0 30px 60px -26px rgba(0,0,0,.95);

  --maxw: 1180px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

[data-theme="light"]{
  --bg:          #f6f7fb;
  --bg-raised:   #ffffff;
  --bg-card:     #ffffff;
  --bg-inset:    #eef1f7;
  --line:        #dfe4ee;
  --line-soft:   #e9edf4;
  --line-strong: #c6cede;
  --ink:         #101828;
  --ink-mid:     #4d5a72;
  --ink-dim:     #77839a;
  --signal:      #0b8f86;
  --signal-deep: #0b8f86;
  --signal-glow: rgba(11,143,134,.09);
  --amber:       #b6740b;
  --amber-glow:  rgba(182,116,11,.09);
  --violet:      #6250d4;
  --rose:        #c33b57;
  --shadow:      0 1px 2px rgba(16,24,40,.05), 0 12px 28px -18px rgba(16,24,40,.35);
  --shadow-lift: 0 2px 6px rgba(16,24,40,.07), 0 24px 48px -22px rgba(16,24,40,.4);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:88px; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:15.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

/* blueprint grid + signal wash */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 90% 62% at 50% 0%, #000 0%, transparent 78%);
  mask-image:radial-gradient(ellipse 90% 62% at 50% 0%, #000 0%, transparent 78%);
  opacity:.75;
}
body::after{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(760px 420px at 78% -6%, var(--signal-glow), transparent 68%),
    radial-gradient(620px 380px at 8% 10%, var(--amber-glow), transparent 70%);
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; letter-spacing:-.022em; margin:0; }

::selection{ background:var(--signal); color:#04120f; }

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

/* ---------- 3. Layout primitives ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:26px; }

.section{ padding-block:86px; position:relative; }
.section + .section{ padding-top:0; }

.section-head{ margin-bottom:38px; max-width:780px; }

.kicker{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--signal);
  display:flex; align-items:center; gap:10px;
  margin:0 0 14px;
}
.kicker::before{ content:""; width:26px; height:1px; background:var(--signal); opacity:.55; }

.section-title{ font-size:clamp(27px, 3.5vw, 40px); line-height:1.15; margin:0; }
.section-sub{ color:var(--ink-mid); margin:14px 0 0; max-width:66ch; }

/* ---------- 4. Top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:60;
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease);
}
.topbar.is-stuck{ border-bottom-color:var(--line); }

.topbar-inner{
  max-width:var(--maxw); margin-inline:auto;
  padding:13px 26px;
  display:flex; align-items:center; gap:20px;
}

.brand{
  font-family:var(--font-mono);
  font-size:14px; font-weight:600;
  display:flex; align-items:center; gap:9px;
  white-space:nowrap;
}
.brand-dim{ color:var(--ink-dim); }

.nav{ display:flex; gap:2px; margin-left:auto; font-size:13.5px; }
.nav a{
  color:var(--ink-mid);
  padding:7px 11px; border-radius:8px;
  transition:color .2s, background .2s;
}
.nav a:hover{ color:var(--ink); background:var(--bg-card); }
.nav a.is-active{ color:var(--signal); background:var(--signal-glow); }

.topbar-tools{ display:flex; align-items:center; gap:10px; }

.status-pill{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:10.5px;
  letter-spacing:.07em; text-transform:uppercase;
  color:var(--signal);
  border:1px solid color-mix(in srgb, var(--signal) 32%, transparent);
  background:var(--signal-glow);
  padding:6px 12px; border-radius:999px;
  white-space:nowrap;
  transition:box-shadow .25s;
}
.status-pill:hover{ box-shadow:0 0 0 4px var(--signal-glow); }

.icon-btn{
  width:34px; height:34px; flex:none;
  display:grid; place-items:center;
  border:1px solid var(--line);
  background:var(--bg-card);
  color:var(--ink-mid);
  border-radius:9px; cursor:pointer;
  transition:color .2s, border-color .2s, transform .2s;
}
.icon-btn:hover{ color:var(--signal); border-color:var(--line-strong); transform:translateY(-1px); }
.icon-btn svg{ width:16px; height:16px; }
.icon-sun{ display:none; }
[data-theme="light"] .icon-sun{ display:block; }
[data-theme="light"] .icon-moon{ display:none; }

.nav-toggle{ display:none; }

/* ---------- 5. Pulse dot ---------- */
.dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--signal); flex:none;
  animation:pulse 2.4s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--signal) 55%, transparent); }
  70%{ box-shadow:0 0 0 8px transparent; }
  100%{ box-shadow:0 0 0 0 transparent; }
}

/* ---------- 6. Hero ---------- */
.hero{ padding-block:72px 18px; }

.hero-grid{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:54px;
  align-items:center;
}

.availability{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-mono); font-size:11.5px;
  letter-spacing:.07em; text-transform:uppercase;
  color:var(--signal);
  border:1px solid color-mix(in srgb, var(--signal) 28%, transparent);
  background:var(--signal-glow);
  padding:7px 14px; border-radius:999px;
  margin-bottom:26px;
}

.hero-title{
  font-size:clamp(43px, 6.4vw, 74px);
  line-height:1.02;
  letter-spacing:-.035em;
  margin:0;
}
.hero-title .grad{
  background:linear-gradient(96deg, var(--ink) 18%, var(--signal) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hero-roles{ display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 22px; }
.hero-roles span{
  font-family:var(--font-mono); font-size:12px;
  color:var(--ink-mid);
  border:1px solid var(--line);
  background:var(--bg-card);
  padding:5px 11px; border-radius:7px;
}

.hero-desc{ color:var(--ink-mid); font-size:16.5px; max-width:56ch; margin:0 0 30px; }
.hero-desc strong{ color:var(--ink); font-weight:500; }

.cta-row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }

.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-body);
  font-size:14.5px; font-weight:500;
  padding:12px 22px;
  border-radius:10px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .2s var(--ease), box-shadow .25s var(--ease),
             background .2s, border-color .2s, color .2s;
}
.btn:hover{ transform:translateY(-2px); }

.btn-primary{
  background:var(--signal);
  color:#04120f;
  font-weight:600;
  box-shadow:0 8px 24px -10px color-mix(in srgb, var(--signal) 70%, transparent);
}
[data-theme="light"] .btn-primary{ color:#ffffff; }
.btn-primary:hover{ box-shadow:0 14px 32px -10px color-mix(in srgb, var(--signal) 75%, transparent); }

.btn-ghost{ border-color:var(--line-strong); color:var(--ink); background:var(--bg-card); }
.btn-ghost:hover{ border-color:var(--signal); color:var(--signal); }

.link-quiet{
  font-family:var(--font-mono); font-size:13px;
  color:var(--ink-dim);
  border-bottom:1px dashed var(--line-strong);
  padding-bottom:2px;
  transition:color .2s, border-color .2s;
}
.link-quiet:hover{ color:var(--signal); border-color:var(--signal); }

.hero-meta{
  display:flex; flex-wrap:wrap; gap:8px 26px;
  margin-top:28px;
  font-family:var(--font-mono); font-size:12.5px;
  color:var(--ink-dim);
}
.hero-meta b{ color:var(--ink-mid); font-weight:500; }
.hero-meta span{ overflow-wrap:anywhere; }

/* --- terminal --- */
.terminal{
  background:var(--bg-inset);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  font-family:var(--font-mono);
  font-size:12.4px;
}
.term-bar{
  display:flex; align-items:center; gap:7px;
  padding:11px 14px;
  border-bottom:1px solid var(--line);
  background:var(--bg-raised);
}
.term-bar i{ width:10px; height:10px; border-radius:50%; display:block; }
.term-bar i:nth-child(1){ background:#ff5f57; }
.term-bar i:nth-child(2){ background:#febc2e; }
.term-bar i:nth-child(3){ background:#28c840; }
.term-title{ margin-left:8px; color:var(--ink-dim); font-size:11.5px; }
.term-body{ padding:16px 16px 20px; }
.term-body p{ margin:0 0 6px; overflow-wrap:anywhere; }
.tp{ color:var(--signal); }
.tc{ color:var(--ink); }
.to{ color:var(--ink-dim); }
.tok{ color:var(--signal); }
.twarn{ color:var(--amber); }
.caret{
  display:inline-block; width:8px; background:var(--signal);
  animation:blink 1.1s steps(2) infinite; color:transparent;
}
@keyframes blink{ 50%{ opacity:0; } }

/* ---------- 7. Metric band ---------- */
.metrics{
  display:grid; grid-template-columns:repeat(4, 1fr);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--bg-card);
  overflow:hidden;
  margin-top:54px;
}
.metric{ padding:22px 24px; border-right:1px solid var(--line); }
.metric:last-child{ border-right:0; }
.metric-label{
  font-family:var(--font-mono); font-size:10.5px;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-dim);
  display:block; margin-bottom:9px;
}
.metric-value{
  font-family:var(--font-display);
  font-size:32px; font-weight:600; letter-spacing:-.03em;
  line-height:1; color:var(--ink); display:block;
}
.metric-value u{ font-size:18px; text-decoration:none; color:var(--signal); }
.metric-note{ display:block; margin-top:9px; font-size:12.5px; color:var(--ink-mid); }

/* ---------- 8. Cards / grids ---------- */
.card{
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px;
  transition:border-color .25s var(--ease), transform .25s var(--ease), box-shadow .3s var(--ease);
}
.card:hover{ border-color:var(--line-strong); transform:translateY(-3px); box-shadow:var(--shadow-lift); }

.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }

/* grid items default to min-width:auto, which refuses to shrink below the
   widest unbreakable content (long mono lines) and overflows the viewport */
.hero-grid > *,
.grid-2 > *,.grid-3 > *,.grid-4 > *,
.lifecycle > *,.approach > *,.split > *,
.metrics > *,.contact-grid > *,
.case-row > *{ min-width:0; }

.svc-num{ font-family:var(--font-mono); font-size:11.5px; color:var(--signal); letter-spacing:.1em; margin:0 0 12px; }
.svc-title{ font-size:17px; margin:0 0 8px; }
.svc-desc{ color:var(--ink-mid); font-size:14.2px; margin:0; }

.card-icon{
  width:36px; height:36px; border-radius:9px;
  display:grid; place-items:center;
  background:var(--signal-glow);
  border:1px solid color-mix(in srgb, var(--signal) 22%, transparent);
  margin-bottom:14px;
}
.card-icon svg{ width:18px; height:18px; stroke:var(--signal); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- 9. Tags ---------- */
.tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.tags span{
  font-family:var(--font-mono); font-size:11.5px;
  color:var(--ink-mid);
  background:var(--bg-inset);
  border:1px solid var(--line);
  padding:4px 9px; border-radius:6px;
  white-space:nowrap;
}
.tags.accent span{
  color:var(--signal);
  border-color:color-mix(in srgb, var(--signal) 24%, transparent);
  background:var(--signal-glow);
}

/* ---------- 10. DevOps lifecycle diagram ---------- */
.lifecycle{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:34px;
  align-items:center;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-raised) 90%, transparent), var(--bg-card));
  padding:30px;
}

.loop-figure{ margin:0; position:relative; }
.loop-svg{ width:100%; height:auto; display:block; overflow:visible; }

.loop-path{
  fill:none;
  stroke:var(--line-strong);
  stroke-width:2;
}
.loop-flow{
  fill:none;
  stroke:var(--signal);
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-dasharray:120 1080;
  filter:drop-shadow(0 0 6px color-mix(in srgb, var(--signal) 55%, transparent));
  animation:flow 7s linear infinite;
}
@keyframes flow{ to{ stroke-dashoffset:-1200; } }

.stage{ cursor:pointer; }
.stage-ring{
  fill:var(--bg-card);
  stroke:var(--line-strong);
  stroke-width:1.6;
  transition:stroke .25s var(--ease), fill .25s var(--ease), r .25s var(--ease);
}
.stage-glyph{
  fill:none; stroke:var(--ink-mid); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
  transition:stroke .25s var(--ease);
  pointer-events:none;
}
.stage-label{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  fill:var(--ink-dim);
  text-anchor:middle;
  transition:fill .25s var(--ease);
  pointer-events:none;
}
.stage:hover .stage-ring,
.stage.is-active .stage-ring{ stroke:var(--signal); fill:var(--signal-glow); }
.stage:hover .stage-glyph,
.stage.is-active .stage-glyph{ stroke:var(--signal); }
.stage:hover .stage-label,
.stage.is-active .stage-label{ fill:var(--ink); }
.stage.is-active .stage-ring{ r:25; }

.loop-side{
  font-family:var(--font-mono);
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  fill:var(--ink-dim);
  text-anchor:middle;
}

/* detail panel */
.loop-detail{
  background:var(--bg-inset);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px;
  min-height:270px;
}
.detail-step{
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--signal);
  margin:0 0 10px;
}
.detail-title{ font-size:21px; margin:0 0 10px; }
.detail-body{ color:var(--ink-mid); font-size:14.4px; margin:0 0 16px; }
.detail-list{ margin:0 0 16px; padding-left:0; list-style:none; }
.detail-list li{
  position:relative; padding-left:19px;
  font-size:14px; color:var(--ink-mid);
  margin-bottom:7px;
}
.detail-list li::before{
  content:""; position:absolute; left:2px; top:9px;
  width:6px; height:6px; border-radius:2px;
  background:var(--signal); opacity:.75;
}
.loop-hint{
  font-family:var(--font-mono); font-size:11px;
  color:var(--ink-dim); margin:16px 0 0;
  display:flex; align-items:center; gap:8px;
}

/* ---------- 11. Timeline / experience ---------- */
.timeline{ position:relative; padding-left:30px; }
.timeline::before{
  content:""; position:absolute; left:6px; top:8px; bottom:8px;
  width:1px;
  background:linear-gradient(180deg, var(--signal), var(--line) 45%, transparent);
}
.tl-item{ position:relative; margin-bottom:34px; }
.tl-item:last-child{ margin-bottom:0; }
.tl-item::before{
  content:""; position:absolute; left:-28px; top:8px;
  width:11px; height:11px; border-radius:50%;
  background:var(--bg); border:2px solid var(--signal);
}
.tl-item.is-past::before{ border-color:var(--line-strong); }

.tl-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:8px; }
.tl-date{ font-family:var(--font-mono); font-size:12px; color:var(--ink-dim); }
.badge{
  font-family:var(--font-mono); font-size:10.5px;
  letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--line-strong);
  color:var(--ink-dim);
  padding:3px 9px; border-radius:999px;
}
.badge-live{
  color:var(--signal);
  border-color:color-mix(in srgb, var(--signal) 32%, transparent);
  background:var(--signal-glow);
}
.tl-role{ font-size:19px; margin:0 0 4px; }
.tl-org{ color:var(--signal); font-weight:500; }
.bullets{ margin:12px 0 0; padding-left:0; list-style:none; }
.bullets li{
  position:relative; padding-left:19px;
  color:var(--ink-mid); font-size:14.3px; margin-bottom:8px;
}
.bullets li::before{
  content:""; position:absolute; left:2px; top:9px;
  width:5px; height:5px; border-radius:50%;
  background:var(--signal); opacity:.7;
}
.bullets b{ color:var(--ink); font-weight:500; }

/* ---------- 12. Engagements (case studies) ---------- */
.case-list{ display:grid; gap:18px; }

.case{
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  transition:border-color .25s var(--ease);
}
.case:hover{ border-color:var(--line-strong); }
.case.is-open{ border-color:color-mix(in srgb, var(--signal) 40%, transparent); }

.case-head{
  width:100%; text-align:left;
  display:flex; align-items:center; gap:18px;
  padding:20px 24px;
  background:none; border:0; cursor:pointer;
  color:inherit; font:inherit;
}
.case-tag{
  font-family:var(--font-mono); font-size:10.5px;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-dim);
  border:1px solid var(--line);
  padding:4px 10px; border-radius:6px;
  flex:none;
}
.case-title{ font-size:17.5px; flex:1; min-width:0; }
.case-impact{
  font-family:var(--font-mono); font-size:12.5px;
  color:var(--amber);
  background:var(--amber-glow);
  border:1px solid color-mix(in srgb, var(--amber) 26%, transparent);
  padding:5px 11px; border-radius:7px;
  white-space:nowrap; flex:none;
}
.case-chevron{
  width:18px; height:18px; flex:none;
  stroke:var(--ink-dim); fill:none; stroke-width:2; stroke-linecap:round;
  transition:transform .3s var(--ease), stroke .2s;
}
.case.is-open .case-chevron{ transform:rotate(180deg); stroke:var(--signal); }

.case-body{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .35s var(--ease);
}
.case.is-open .case-body{ grid-template-rows:1fr; }
.case-body > div{ overflow:hidden; }
.case-inner{ padding:0 24px 24px; border-top:1px solid var(--line); margin-top:0; padding-top:20px; }

.case-rows{ margin:0; display:grid; gap:14px; }
.case-row{ display:grid; grid-template-columns:120px 1fr; gap:18px; }
.case-row dt{
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--signal); padding-top:2px;
}
.case-row dd{ margin:0; color:var(--ink-mid); font-size:14.4px; overflow-wrap:anywhere; }
.case-row dd b{ color:var(--ink); font-weight:500; }

/* ---------- 13. Architecture / network mini-diagram ---------- */
.net-figure{
  margin:24px 0 4px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--bg-inset);
  padding:20px;
  overflow-x:auto;
}
.net-svg{ width:100%; min-width:520px; height:auto; display:block; }
.net-box{ fill:var(--bg-card); stroke:var(--line-strong); stroke-width:1.4; }
.net-box-acc{ fill:var(--signal-glow); stroke:color-mix(in srgb, var(--signal) 45%, transparent); stroke-width:1.4; }
.net-label{ font-family:var(--font-mono); font-size:10.5px; fill:var(--ink); text-anchor:middle; }
.net-sub{ font-family:var(--font-mono); font-size:9px; fill:var(--ink-dim); text-anchor:middle; }
.net-link{ stroke:var(--line-strong); stroke-width:1.5; fill:none; }
.net-link-acc{
  stroke:var(--signal); stroke-width:1.8; fill:none;
  stroke-dasharray:6 6; animation:dash 1.6s linear infinite;
}
@keyframes dash{ to{ stroke-dashoffset:-24; } }
.net-cap{
  font-family:var(--font-mono); font-size:11.5px;
  color:var(--ink-dim); margin:12px 0 0; text-align:center;
}

/* ---------- 14. Workflow strip ---------- */
.flow-strip{
  display:flex; flex-wrap:wrap; align-items:stretch; gap:8px;
}
.flow-node{
  flex:1 1 130px;
  border:1px solid var(--line);
  background:var(--bg-card);
  border-radius:var(--radius-sm);
  padding:16px 14px;
  transition:border-color .25s, transform .25s var(--ease);
}
.flow-node:hover{ border-color:var(--signal); transform:translateY(-3px); }
.flow-node img,.flow-node svg{ width:22px; height:22px; margin-bottom:10px; opacity:.9; }
.flow-name{ display:block; font-family:var(--font-display); font-size:14px; font-weight:600; }
.flow-tech{ display:block; font-family:var(--font-mono); font-size:10.5px; color:var(--ink-dim); margin-top:3px; }

/* ---------- 15. Stack strip ---------- */
.stack-strip{
  display:flex; align-items:center; gap:22px;
  margin-top:44px; padding:16px 20px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:color-mix(in srgb, var(--bg-card) 70%, transparent);
}
.stack-label{
  font-family:var(--font-mono); font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-dim); white-space:nowrap;
}
.stack-icons{ display:flex; flex-wrap:wrap; align-items:center; gap:20px; }
.stack-icons img,.stack-icons svg{
  width:20px; height:20px; flex:none;
  color:#8b93a9; /* matches the fixed tint baked into the simpleicons URLs */
  opacity:.62; transition:opacity .2s, transform .2s;
}
.stack-icons img:hover,.stack-icons svg:hover{ opacity:1; transform:translateY(-2px); }
[data-theme="light"] .stack-icons img,[data-theme="light"] .stack-icons svg{ opacity:.8; }

/* ---------- 16. Approach pipeline ---------- */
.approach{ display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center; }
.pipe{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.pipe span{
  font-family:var(--font-mono); font-size:12px;
  border:1px solid var(--line-strong);
  background:var(--bg-card);
  color:var(--ink);
  padding:8px 13px; border-radius:8px;
}
.pipe i{ color:var(--signal); font-style:normal; }

/* ---------- 17. Certs / education ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:44px; }
.cert-list{ list-style:none; margin:0; padding:0; }
.cert-list li{
  display:flex; align-items:center; gap:12px;
  padding:15px 18px; margin-bottom:10px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--bg-card);
  font-size:14.6px;
}
.cert-mark{
  width:22px; height:22px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background:var(--signal-glow); color:var(--signal);
  font-size:12px; font-weight:700;
  border:1px solid color-mix(in srgb, var(--signal) 30%, transparent);
}
.edu-degree{ font-family:var(--font-display); font-weight:600; font-size:16px; margin:0 0 4px; }
.edu-school{ color:var(--ink-mid); margin:0 0 4px; font-size:14.3px; }
.edu-year{ font-family:var(--font-mono); font-size:12px; color:var(--ink-dim); margin:0; }

/* ---------- 18. CTA ---------- */
.cta-panel{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:
    radial-gradient(700px 320px at 50% 0%, var(--signal-glow), transparent 70%),
    var(--bg-card);
  padding:54px 44px;
  text-align:center;
}
.cta-title{ font-size:clamp(26px, 3.6vw, 38px); margin:14px 0 14px; }
.cta-text{ color:var(--ink-mid); max-width:62ch; margin:0 auto 28px; }
.cta-panel .cta-row{ justify-content:center; }
.cta-panel .kicker{ justify-content:center; }
.cta-panel .kicker::before{ display:none; }

/* ---------- 19. Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.contact-card{
  display:block; padding:20px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--bg-card);
  transition:border-color .25s, transform .25s var(--ease), box-shadow .3s;
}
.contact-card:hover{ border-color:var(--signal); transform:translateY(-3px); box-shadow:var(--shadow-lift); }
.contact-label{
  display:block;
  font-family:var(--font-mono); font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-dim); margin-bottom:8px;
}
.contact-value{ display:block; font-size:14px; word-break:break-word; color:var(--ink); }

/* ---------- 20. Footer ---------- */
.footer{
  border-top:1px solid var(--line);
  margin-top:60px;
  padding:26px 0 40px;
}
.footer-inner{
  max-width:var(--maxw); margin-inline:auto; padding-inline:26px;
  display:flex; flex-wrap:wrap; gap:14px;
  justify-content:space-between; align-items:center;
  font-family:var(--font-mono); font-size:12px;
  color:var(--ink-dim);
}
.footer a{ color:var(--ink-mid); }
.footer a:hover{ color:var(--signal); }
.footer-left{ display:flex; align-items:center; gap:9px; }

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

/* ---------- 22. Responsive ---------- */
@media (max-width:1000px){
  .hero-grid{ grid-template-columns:1fr; gap:40px; }
  .lifecycle{ grid-template-columns:1fr; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .metrics{ grid-template-columns:repeat(2,1fr); }
  .metric:nth-child(2){ border-right:0; }
  .metric:nth-child(1),.metric:nth-child(2){ border-bottom:1px solid var(--line); }
  .contact-grid{ grid-template-columns:repeat(2,1fr); }
  .approach{ grid-template-columns:1fr; gap:24px; }
  .split{ grid-template-columns:1fr; gap:44px; }
}

@media (max-width:760px){
  body{ font-size:15px; }
  .section{ padding-block:64px; }
  .hero{ padding-block:48px 10px; }

  .nav{
    position:fixed; inset:60px 0 auto 0;
    flex-direction:column; gap:0;
    background:var(--bg-raised);
    border-bottom:1px solid var(--line);
    padding:10px 18px 18px;
    display:none;
  }
  .nav.is-open{ display:flex; }
  .nav a{ padding:11px 8px; font-size:15px; }
  .nav-toggle{ display:grid; }
  /* .nav carries margin-left:auto on desktop; it is display:none here, so the
     tools need to claim the free space themselves */
  .topbar-tools{ margin-left:auto; }
  .topbar-tools .status-pill{ display:none; }

  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .metrics{ grid-template-columns:1fr; }
  .metric{ border-right:0; border-bottom:1px solid var(--line); }
  .metric:last-child{ border-bottom:0; }

  .case-head{ flex-wrap:wrap; gap:10px; padding:18px; }
  .case-title{ flex:1 1 100%; order:3; }
  .case-inner{ padding:20px 18px 22px; }
  .case-row{ grid-template-columns:1fr; gap:4px; }

  .lifecycle{ padding:20px; }
  .stack-strip{ flex-direction:column; align-items:flex-start; gap:14px; }
  .cta-panel{ padding:38px 22px; }
  .timeline{ padding-left:24px; }
  .tl-item::before{ left:-24px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
}

/* ---------- 23. Print ---------- */
@media print{
  .topbar,.footer,.cta-panel,.terminal{ display:none; }
  body{ background:#fff; color:#000; }
  body::before,body::after{ display:none; }
  .case-body{ grid-template-rows:1fr !important; }
}