/* main.css — modern, consistent, SEO-friendly */
:root{
  --bg0:#070b14;
  --bg1:#0b1220;
  --text:#f5f8ff;
  --muted:rgba(245,248,255,.72);
  --muted2:rgba(245,248,255,.55);
  --stroke:rgba(255,255,255,.10);
  --stroke2:rgba(255,255,255,.14);
  --card:rgba(12,18,32,.92);
  --shadow:0 20px 60px rgba(0,0,0,.45);
  --r:20px;
  --max:1120px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --green:#1f3c22;
  --g1:#22c55e;
  --g2:#06b6d4;
  --g3:#8b5cf6;
  --gold:#fbbf24;
  --rose:#fb7185;
  color-scheme: dark;
}

*{box-sizing:border-box}
html,body{height:100%}
/* avoid fixed header covering anchor targets */
[data-section]{scroll-margin-top: calc(var(--topbarH, 72px) + 18px)}
body{
  margin:0;
  padding-top: var(--topbarH, 72px);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg1);
  color: var(--text);
  overflow-x:hidden;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.navLock{overflow:hidden}

.container{max-width:var(--max);margin:0 auto;padding:0 20px}
a{color:inherit;text-decoration:none}
.small{font-size:12px}
.muted{color:var(--muted)}
.muted2{color:var(--muted2)}

.bg{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1200px 700px at 18% 22%, rgba(34,197,94,.22), transparent 60%),
    radial-gradient(900px 600px at 84% 16%, rgba(139,92,246,.18), transparent 62%),
    radial-gradient(1100px 700px at 58% 92%, rgba(6,182,212,.16), transparent 62%),
    linear-gradient(180deg, rgba(7,11,20,1), rgba(11,18,32,1));
}
.bg__noise{
  position:absolute; inset:-20%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  opacity:.06; mix-blend-mode:overlay;
  transform: translateZ(0);
}
.bg__grid{
  position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(600px 260px at 50% 18%, #000 55%, transparent 75%);
  opacity:.18;
}
.bg__aurora{
  position:absolute; inset:-10%;
  background:
    radial-gradient(700px 280px at 18% 58%, rgba(31,60,34,.28), transparent 62%),
    radial-gradient(680px 280px at 82% 52%, rgba(251,113,133,.14), transparent 60%),
    radial-gradient(820px 340px at 55% 78%, rgba(6,182,212,.10), transparent 62%);
  filter: blur(18px);
  opacity:.9;
}

.topbar{
  position:fixed; top:0; left:0; right:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(7,11,20,.62);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 0;
  gap: 14px;
}
.brand{display:flex; align-items:center; gap:10px}
.brand__logo{width:28px;height:28px;border-radius:10px}
.brand__text{font-weight:800; letter-spacing:.01em}
.nav{display:flex; align-items:center; min-width: 0}
.nav__scroller{
  display:flex;
  gap: 10px;
  align-items:center;
  overflow:auto;
  padding: 2px;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -ms-overflow-style:none;
  max-width: min(920px, calc(100vw - 340px));
  mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}
.nav__scroller::-webkit-scrollbar{display:none}
.nav__link{
  font-size: 13px; letter-spacing:.02em;
  padding: 10px 10px;
  border-radius: 999px;
  color: rgba(245,248,255,.75);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.nav__link:hover{background: rgba(255,255,255,.06); color: rgba(245,248,255,.95)}
.nav__link--active{background: rgba(255,255,255,.08); color: rgba(245,248,255,.96)}
.navToggle{
  display:none;
  width:42px; height:42px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}
.navToggle span{display:block;height:2px;background:rgba(245,248,255,.82);margin:7px 10px;border-radius:999px}

.navOverlay{display:none}
.mobileNav{display:none}

/* Mobile drawer navigation (reliable + accessible) */
.navOverlay{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  z-index: 55;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--ease);
}
.navOverlay.is-open{opacity:1; pointer-events:auto}

.mobileNav{
  position: fixed;
  top: var(--topbarH, 72px);
  right: 0;
  height: calc(100vh - var(--topbarH, 72px));
  width: min(340px, 86vw);
  z-index: 60;
  border-left: 1px solid rgba(255,255,255,.10);
  background: rgba(7,11,20,.86);
  backdrop-filter: blur(12px);
  transform: translate3d(110%,0,0);
  transition: transform .22s var(--ease);
  display:flex;
  flex-direction:column;
}
.mobileNav.is-open{transform: translate3d(0,0,0)}

.mobileNav__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.mobileNav__title{font-weight:800; letter-spacing:.02em}
.mobileNav__close{
  width: 42px; height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(245,248,255,.92);
  cursor:pointer;
}
.mobileNav__inner{padding: 14px 16px; display:grid; gap:10px; overflow:auto}
.mobileNav__link{
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(245,248,255,.90);
}
.mobileNav__link.nav__link--active{border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.07)}

.hero{padding: 42px 0 26px}
.hero__grid{display:grid; grid-template-columns: 1.2fr .8fr; gap: 22px; align-items:start}
.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding: 8px 12px; border-radius: 999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(245,248,255,.86);
  font-size: 12px; letter-spacing:.06em; text-transform: uppercase;
}
.h1{font-size: clamp(34px, 4vw, 54px); line-height:1.04; margin: 14px 0 10px}
.grad{
  background: linear-gradient(90deg, var(--g1), var(--g2), var(--g3));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lead{color: var(--muted); font-size: 16px; line-height:1.7; max-width: 52ch}
.hero__cta{display:flex; gap:12px; margin-top:16px; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 16px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(245,248,255,.92);
  font-weight: 700; font-size: 13px;
  transition: transform .18s var(--ease), background .2s var(--ease);
}
.btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.08)}
.btn--primary{
  border-color: rgba(255,255,255,.18);
  background: linear-gradient(90deg, rgba(34,197,94,.18), rgba(6,182,212,.16), rgba(139,92,246,.14));
}
.btn--ghost{background: rgba(255,255,255,.03)}
.hero__meta{display:grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 18px}
.metaCard{
  border-radius: 16px;
  padding: 12px 12px;
  background: rgba(12,18,32,.62);
  border: 1px solid rgba(255,255,255,.10);
}
.metaCard__k{font-size:12px; color: var(--muted2); letter-spacing:.08em; text-transform: uppercase}
.metaCard__v{margin-top:6px; font-weight:700; font-size: 13px}

.hero__showcase{position:relative}
.showCard{
  border-radius: 26px;
  background: rgba(12,18,32,.90);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.showCard__top{
  display:flex; align-items:center; gap:8px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.dot{width:10px;height:10px;border-radius:999px}
.dot--g{background:rgba(34,197,94,.9)}
.dot--y{background:rgba(251,191,36,.9)}
.dot--r{background:rgba(251,113,133,.9)}
.showCard__title{margin-left:auto; font-size:12px; letter-spacing:.12em; text-transform: uppercase; color: var(--muted2)}
.showCard__body{padding: 16px}
.stat{padding: 12px 12px; border-radius: 18px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); margin-bottom: 10px}
.stat__n{font-weight:800}
.stat__l{margin-top:6px; color: var(--muted); font-size: 13px; line-height:1.45}
.miniGlow{
  height: 120px;
  margin-top: 10px;
  border-radius: 18px;
  background: radial-gradient(420px 160px at 25% 30%, rgba(31,60,34,.30), transparent 60%),
              radial-gradient(520px 200px at 80% 30%, rgba(6,182,212,.18), transparent 62%),
              radial-gradient(620px 220px at 55% 90%, rgba(139,92,246,.16), transparent 65%);
}

.orbit{position:absolute; inset:-30px; pointer-events:none}
.orb{position:absolute; width:220px; height:220px; border-radius: 999px; filter: blur(18px); opacity:.55}
.orb--a{left:-40px; top: 30px; background: radial-gradient(circle at 30% 30%, rgba(34,197,94,.28), transparent 60%)}
.orb--b{right:-60px; top:-20px; background: radial-gradient(circle at 30% 30%, rgba(139,92,246,.24), transparent 60%)}
.orb--c{left:40%; bottom:-80px; background: radial-gradient(circle at 30% 30%, rgba(6,182,212,.18), transparent 60%)}

.section{padding: 40px 0}
.section__head{display:flex; align-items:flex-end; justify-content:space-between; gap: var(--g, 14px); margin-bottom: 16px}
.h2{margin:0; font-size: 22px; letter-spacing:.01em}
.section__sub{margin:0; color: var(--muted); max-width: 62ch; line-height:1.6}

.cards{display:grid; grid-template-columns: repeat(3,1fr); gap: 12px}
.grid2{display:grid; grid-template-columns: repeat(2,1fr); gap: 12px}

.card{
  border-radius: var(--r);
  background: var(--card);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  padding: 18px;
}
.card__title{margin:0 0 8px; font-size: 16px}
.card__text{margin:0; color: var(--muted); line-height: 1.65}

.chipRow{display:flex; flex-wrap:wrap; gap:8px; margin-top: 12px}
.chip{
  font-size:12px; padding: 7px 10px; border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(245,248,255,.80);
}

.list{margin:0; padding-left: 18px; color: var(--muted); line-height:1.65}
.list li{margin: 6px 0}

.footer{padding: 26px 0 46px}
.footer__inner{border-top:1px solid rgba(255,255,255,.10); padding-top: 16px}

/* Game */
.game{padding: 22px}
.game__top{display:flex; justify-content:space-between; gap: 16px; align-items:flex-start; margin-bottom: 14px}
.game__actions{display:flex; gap: 10px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.game__grid{display:grid; grid-template-columns: 1.05fr .95fr; gap: 12px; align-items:start}
.kpis{display:grid; grid-template-columns: 1fr 1fr; gap: 10px}
.kpi{padding: 12px; border-radius: 16px; background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.10)}
.kpi__top{display:flex; justify-content:space-between; gap: 10px; font-size: 13px; color: rgba(245,248,255,.76)}
.bar{height: 10px; border-radius: 999px; background: rgba(255,255,255,.08); overflow:hidden; border: 1px solid rgba(255,255,255,.10); margin-top: 10px}
.bar__fill{display:block; height:100%; width:0%; background: linear-gradient(90deg, rgba(34,197,94,.95), rgba(6,182,212,.75), rgba(139,92,246,.55)); transition: width .18s var(--ease)}
.bar__fill--lat{background: linear-gradient(90deg, rgba(251,191,36,.95), rgba(251,113,133,.55))}
.bar__fill--err{background: linear-gradient(90deg, rgba(251,113,133,.95), rgba(139,92,246,.55))}
.bar__fill--traf{background: linear-gradient(90deg, rgba(6,182,212,.95), rgba(34,197,94,.55))}
.controls{margin-top: 10px; display:grid; gap: 10px}
.control{display:block; padding: 12px; border-radius: 16px; background: rgba(0,0,0,.16); border: 1px solid rgba(255,255,255,.10)}
.control__top{display:flex; justify-content:space-between; margin-bottom: 10px; font-weight:700}
input[type="range"]{width:100%; accent-color: var(--g1)}
.status{padding: 12px; border-radius: 16px; border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.14); color: var(--muted)}
.viz__frame{border-radius: 18px; padding: 12px; background: rgba(0,0,0,.16); border: 1px solid rgba(255,255,255,.10)}
canvas{width:100%; height:240px; display:block}

/* remove hover animation from game area completely */
#playground .btn, #playground .btn:hover, #playground .card, #playground .card:hover{transform:none !important; transition:none !important; box-shadow: 0 18px 60px rgba(0,0,0,.35) !important}

/* Responsive */
@media (max-width: 980px){
  .hero__grid{grid-template-columns: 1fr}
  .cards{grid-template-columns: 1fr}
  .grid2{grid-template-columns: 1fr}
  .hero__meta{grid-template-columns: 1fr}
  .game__grid{grid-template-columns: 1fr}
  .game__top{flex-direction:column}
  .game__actions{justify-content:flex-start}
  .nav{display:none}
  .navToggle{display:inline-flex; flex-direction:column; justify-content:center}
  .navOverlay{display:block}
  .mobileNav{display:flex}
}

.hero__stack{
  margin-top: 10px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}


/* ---------- Phase 2 polish & motion ---------- */
.skip{
  position:absolute;
  left:12px; top:10px;
  padding:10px 12px;
  border-radius:12px;
  background: rgba(255,255,255,.08);
  border:1px solid var(--stroke);
  color: var(--text);
  text-decoration:none;
  transform: translateY(-140%);
  transition: transform .25s var(--ease), opacity .25s var(--ease);
  opacity:0;
  z-index: 1000;
}
.skip:focus{ transform: translateY(0); opacity:1; outline:none; box-shadow: 0 0 0 4px rgba(34,197,94,.25); }

:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(34,197,94,.22);
  border-radius: 12px;
}

@keyframes fadeUp{
  from{ opacity:0; transform: translate3d(0, 18px, 0); filter: blur(6px); }
  to{ opacity:1; transform: translate3d(0, 0, 0); filter: blur(0); }
}
@keyframes fadeIn{
  from{ opacity:0; transform: translate3d(0, 0, 0); filter: blur(6px); }
  to{ opacity:1; transform: translate3d(0, 0, 0); filter: blur(0); }
}
@keyframes floaty{
  0%,100%{ transform: translate3d(0,0,0); }
  50%{ transform: translate3d(0,-10px,0); }
}

[data-animate]{
  opacity: 0;
  will-change: transform, opacity, filter;
}
[data-animate="fade-up"]{ transform: translate3d(0, 18px, 0); filter: blur(6px); }
[data-animate="fade-in"]{ transform: translate3d(0, 0, 0); filter: blur(6px); }

[data-animate].is-in{
  opacity: 1;
  transform: none;
  filter: none;
  animation: fadeUp .7s var(--ease) both;
}
[data-animate="fade-in"].is-in{ animation-name: fadeIn; }

[data-animate].is-out{
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  filter: blur(6px);
}

.cards{ perspective: 900px; }
.card{
  transform-style: preserve-3d;
  transition: transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
}
.card.is-tilting{
  transform: translate3d(0,-2px,0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
}
.card::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: var(--r);
  background: radial-gradient(600px 240px at var(--mx, 50%) var(--my, 40%), rgba(34,197,94,.14), transparent 60%);
  opacity:0;
  transition: opacity .35s var(--ease);
  pointer-events:none;
}
.card.is-tilting::after{ opacity:1; }

.bg__aurora{ animation: floaty 10s var(--ease) infinite; }

@media (prefers-reduced-motion: reduce){
  [data-animate], [data-animate].is-in, .bg__aurora{ animation: none !important; transition: none !important; }
  .card{ transition: none !important; }
}

/* background parallax */
.bg__grid{
  transform: translate3d(calc(var(--px, 0) * 10px), calc(var(--py, 0) * 10px), 0);
  transition: transform .25s var(--ease);
}


/* Phase 4: interactive skill explorer + approach */
.skillExplorer{margin-top:18px}
.skillExplorer__head{display:flex; justify-content:space-between; gap: var(--g, 14px); align-items:flex-start; flex-wrap:wrap}
.skillExplorer__body{display:grid; grid-template-columns: 1fr 1.3fr; gap:16px; margin-top:14px}
@media (max-width: 820px){.skillExplorer__body{grid-template-columns:1fr}}

.skillChips{display:flex; flex-wrap:wrap; gap:10px}
.chipBtn{
  appearance:none;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: rgba(245,248,255,.92);
  padding:10px 12px;
  border-radius:999px;
  font-weight:700;
  font-size:12px;
  letter-spacing:.2px;
  cursor:pointer;
  transition: transform .18s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.chipBtn:hover{transform: translateY(-1px); background: rgba(255,255,255,.07)}
.chipBtn.nav__link--active{border-color: rgba(34,197,94,.45); background: rgba(34,197,94,.10)}

.skillPanel{border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); border-radius: calc(var(--r) - 6px); padding:16px}
.skillPanel__kicker{font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color: rgba(245,248,255,.72)}
.skillPanel__title{margin:8px 0 6px; font-size:18px}
.skillPanel__text{margin:0 0 12px; color: rgba(245,248,255,.78); line-height:1.6}
.skillPanel__meta{display:flex; flex-wrap:wrap; gap:8px}

.trade{margin-top:18px}
.trade__body{display:grid; grid-template-columns: 1fr 1.6fr; gap:16px; margin-top:12px}
@media (max-width: 900px){.trade__body{grid-template-columns:1fr}}
.trade__toggles{display:flex; flex-wrap:wrap; gap:10px; align-content:flex-start}
.tradeBtn{
  appearance:none;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: rgba(245,248,255,.92);
  padding:10px 12px;
  border-radius: 12px;
  font-weight:800;
  font-size:12px;
  cursor:pointer;
  transition: transform .18s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.tradeBtn:hover{transform: translateY(-1px); background: rgba(255,255,255,.07)}
.tradeBtn.nav__link--active{border-color: rgba(6,182,212,.45); background: rgba(6,182,212,.10)}

.trade__panel{border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); border-radius: calc(var(--r) - 6px); padding:16px}
.trade__kicker{font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color: rgba(245,248,255,.72)}
.trade__title{margin:8px 0 6px; font-size:18px}
.trade__text{margin:0 0 12px; color: rgba(245,248,255,.78); line-height:1.6}
.trade__bullets{display:flex; flex-wrap:wrap; gap:8px}

.detailsGrid{display:grid; grid-template-columns: 1fr; gap:12px; margin-top:18px}
.details{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: calc(var(--r) - 6px);
  padding: 10px 14px;
}
.details > summary{
  cursor:pointer;
  list-style:none;
  font-weight:800;
  padding: 8px 0;
}
.details > summary::-webkit-details-marker{display:none}
.details > summary::after{
  content:"+";
  float:right;
  opacity:.8;
}
.details[open] > summary::after{content:"–"}
.details__body{padding: 6px 0 10px; color: rgba(245,248,255,.78)}
.details__body p{margin: 8px 0}


/* ===== Phase 5: Engineering Decisions ===== */

.section-decisions .section-head{max-width:760px;margin:0 auto 28px auto}
.decisions-grid{display:grid;grid-template-columns:repeat(12,1fr);gap: var(--g, 14px)}
.decision-card{grid-column:span 12;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);border-radius:16px;padding:14px 16px;backdrop-filter: blur(6px)}
.decision-card[open]{background:rgba(255,255,255,.05)}
.decision-card summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;gap:6px}
.decision-card summary::-webkit-details-marker{display:none}
.decision-title{font-weight:700;letter-spacing:.2px}
.decision-meta{font-size:.9rem;opacity:.75}
.decision-body{margin-top:10px;opacity:.92}
.decision-body p{margin:10px 0}
@media (min-width: 820px){
  .decision-card{grid-column:span 6}
}


/* ===== Phase 6: Resilience (Failure & Recovery) ===== */

.section-resilience .section-head{max-width:780px;margin:0 auto 28px auto}
.resilience-grid{display:grid;grid-template-columns:repeat(12,1fr);gap: var(--g, 14px)}
.res-card{grid-column:span 12;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);border-radius:16px;padding:16px}
.res-head{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.res-title{margin:0;font-size:1.05rem}
.res-tags{margin:0;opacity:.72;font-size:.9rem}
.res-body p{margin:10px 0;opacity:.92}
.res-list{margin:10px 0 0 18px;opacity:.92}
.res-card--wide{grid-column:span 12}
@media (min-width: 820px){
  .res-card{grid-column:span 6}
  .res-card--wide{grid-column:span 12}
}


/* ===== Phase 7: Design Lab (System Design Simulator) ===== */

.section-designlab .section-head{max-width:820px;margin:0 auto 28px auto}
.designlab-grid{display:grid;grid-template-columns:repeat(12,1fr);gap: var(--g, 14px)}
.dl-card{grid-column:span 12;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);border-radius:16px;padding:16px;backdrop-filter: blur(6px)}
.dl-h3{margin:0 0 12px 0;font-size:1.05rem}
.dl-h4{margin:0 0 10px 0;font-size:1rem;opacity:.95}
.dl-row{display:grid;grid-template-columns:160px 1fr 140px;gap:12px;align-items:center;margin:10px 0}
.dl-label{opacity:.9}
.dl-range{width:100%}
.dl-value{font-size:.95rem;opacity:.8;text-align:right}
.dl-split{display:grid;grid-template-columns:1fr;gap:8px;margin:14px 0 6px}
.dl-check{display:flex;gap:10px;align-items:center;opacity:.92}
.dl-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.dl-btn{padding:10px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:inherit;cursor:pointer}
.dl-btn:hover{background:rgba(255,255,255,.07)}
.dl-btn-primary{border-color:rgba(255,255,255,.24);background:rgba(255,255,255,.10)}
.dl-note{margin:12px 0 0 0;font-size:.95rem}
.dl-output-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.dl-badges{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.dl-badge{font-size:.85rem;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);opacity:.9}
.dl-block{margin-top:14px}
.dl-diagram{margin:0;padding:12px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.25);overflow:auto}
.dl-list{margin:8px 0 0 18px;opacity:.92}
@media (min-width: 900px){
  .dl-controls{grid-column:span 5}
  .dl-output{grid-column:span 7}
  .dl-split{grid-template-columns:1fr 1fr}
}
@media (max-width: 520px){
  .dl-row{grid-template-columns:1fr;gap:6px}
  .dl-value{text-align:left}
}


/* ===== Phase 8: Navigation + polish ===== */

.scrollProgress{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.06);overflow:hidden}
.scrollProgress > span{display:block;height:100%;width:0%;background:linear-gradient(90deg, rgba(34,197,94,.0), rgba(34,197,94,.65), rgba(34,197,94,.0));filter: drop-shadow(0 0 10px rgba(34,197,94,.35));transform-origin:left center;transition:width .12s linear}

.deepNote{margin-top:10px;padding:10px 12px;border-radius:14px;border:1px dashed rgba(255,255,255,.16);background:rgba(255,255,255,.03);opacity:.92}
/* Hidden by default; revealed in deep review mode */
[data-deep]{display:none}
body.is-deep [data-deep]{display:block}

.deepLink{display:inline-flex;margin-top:10px;gap:8px;align-items:center;color:rgba(255,255,255,.72);text-decoration:none;font-size:.95rem}
.deepLink:hover{color:rgba(255,255,255,.92)}

/* Ensure any legacy .nav-link matches nav__link */
.nav-link{all:unset;}

/* ===== Phase 8: Micro-interactions ===== */
.nav__link{position:relative}
.nav__link::after{
  content:"";
  position:absolute;
  left:10px; right:10px; bottom:-10px;
  height:2px;
  background:linear-gradient(90deg, transparent, rgba(34,197,94,.55), transparent);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .35s var(--ease);
  opacity:.9;
}
.nav__link:hover::after{transform:scaleX(1)}
.section{position:relative}
.section::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:min(980px, calc(100% - 40px));
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  opacity:.65;
}
/* First section shouldn't show divider */
.section:first-of-type::before{display:none}

/* Handcrafted “breathing” highlight on cards */
.card{
  position:relative;
}
.card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:var(--r);
  background:radial-gradient(420px 220px at 20% 10%, rgba(34,197,94,.10), transparent 55%);
  opacity:.0;
  transition:opacity .35s var(--ease);
  pointer-events:none;
}
.card:hover::before{opacity:.9}

/* Gentle text shimmer only on highlighted keywords (opt-in class) */
.kwd{
  background:linear-gradient(90deg, rgba(34,197,94,.0), rgba(34,197,94,.18), rgba(34,197,94,.0));
  background-size:200% 100%;
  border-radius:8px;
  padding:0 .35em;
  animation:sheen 5.5s ease-in-out infinite;
}
@keyframes sheen{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* Phase 8: Normalize custom card shells to let .card styling lead */
.decision-card, .res-card, .dl-card{border-color: rgba(255,255,255,.10); background: rgba(255,255,255,.025)}
.decision-meta, .res-tags{letter-spacing:.1px}


/* ===== Phase 8.1: Alignment fixes for section headings ===== */

/* Some sections used centered, max-width headers; align them with the card grid */
.section .section-head{max-width:none;margin:0 0 28px 0}
.section .section-title, .section .section-subtitle{text-align:left}
/* Keep spacing consistent */
.section .section-subtitle{max-width:860px}

.section-decisions .section-head,
.section-resilience .section-head,
.section-designlab .section-head{max-width:none;margin:0 0 28px 0}


/* ===== Phase 9 Sprint 1: How I work ===== */

.section-howiwork .section-head{max-width:none;margin:0 0 28px 0}
.howiwork-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--g,14px)}
.howiwork-card{grid-column:span 12;padding:16px}
.howiwork-card--wide{grid-column:span 12}
.howiwork-h3{margin:0 0 10px 0;font-size:1.05rem}
.howiwork-list{margin:0 0 0 18px;opacity:.92}
.howiwork-list li{margin:8px 0}
.howiwork-muted{opacity:.75}
.howiwork-steps{display:grid;gap:12px;margin-top:6px}
.howiwork-step{display:flex;gap:12px;align-items:flex-start}
.howiwork-kicker{
  width:28px;height:28px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  font-weight:700;opacity:.9;flex:0 0 auto
}
.howiwork-step-title{font-weight:700;letter-spacing:.15px;margin-bottom:2px}
.howiwork-step-body{opacity:.86}
@media (min-width: 900px){
  .howiwork-card{grid-column:span 4}
  .howiwork-card--wide{grid-column:span 12}
}


/* ===== Phase 9 Sprint 1: Nav layout (single line) ===== */

/* Keep desktop nav on one line; allow horizontal scroll instead of wrapping */
.nav{
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar{display:none}
.nav__link{
  white-space: nowrap;
  flex: 0 0 auto;
}
/* Slightly tighten spacing so everything fits more often */
.topbar__inner{gap:14px}
.nav{gap:10px}

@media (max-width: 980px){
  .nav__link{font-size:.95rem}
}
@media (max-width: 860px){
  .nav__link{font-size:.92rem}
}


/* ===== Nav active (Approach 2): no nav__link--active, use .nav__link--active + aria-current ===== */

.nav__link--active{
  background: rgba(34,197,94,.10);
  border-color: rgba(34,197,94,.28) !important;
  box-shadow: 0 0 0 1px rgba(34,197,94,.14) inset;
}
.nav__link--active::after{transform:scaleX(1); opacity:1}
.nav__link[aria-current="page"]{ /* accessibility + redundancy */
  color: rgba(255,255,255,.96);
}


/* ===== Phase 9 Sprint 2: Humanization ===== */

.nowCard{
  margin-top:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  border-radius:16px;
  padding:14px 16px;
}
.nowKicker{
  display:inline-flex;
  font-size:.85rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.75;
  margin-bottom:6px;
}
.nowBody p{margin:8px 0; opacity:.93}
.nowMeta{opacity:.72; font-size:.95rem}
.footerNote{margin-top:10px; opacity:.72; font-size:.95rem; max-width:820px}
.section-title{letter-spacing:.1px}
.section-subtitle{line-height:1.55}



/* ===== Phase 10: "impressed on first scroll" polish ===== */

/* animated gradient text */
.grad{
  background-size: 220% 220%;
  animation: gradShift 7s var(--ease) infinite;
}
@keyframes gradShift{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

/* subtle stars + spotlight follow */
.bg__stars{
  position:absolute; inset:0;
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(245,248,255,.35), transparent 60%),
    radial-gradient(1px 1px at 26% 74%, rgba(245,248,255,.28), transparent 60%),
    radial-gradient(1px 1px at 54% 30%, rgba(245,248,255,.22), transparent 60%),
    radial-gradient(1px 1px at 74% 62%, rgba(245,248,255,.26), transparent 60%),
    radial-gradient(1px 1px at 88% 22%, rgba(245,248,255,.30), transparent 60%);
  opacity:.22;
  filter: blur(.2px);
  animation: starsTwinkle 8s var(--ease) infinite;
}
@keyframes starsTwinkle{
  0%,100%{ opacity:.16; transform: translate3d(0,0,0); }
  50%{ opacity:.26; transform: translate3d(0,-2px,0); }
}

.bg__spotlight{
  position:absolute; inset:0;
  background:
    radial-gradient(520px 380px at calc(var(--sx, .5) * 100%) calc(var(--sy, .25) * 100%),
      rgba(34,197,94,.18),
      rgba(6,182,212,.10) 38%,
      transparent 70%);
  mix-blend-mode: screen;
  opacity: .9;
  transition: opacity .35s var(--ease);
}

/* magnetic motion hooks */
.btn, .chipBtn, .tradeBtn{
  transform: translate3d(var(--bx, 0px), var(--by, 0px), 0);
  will-change: transform;
}
.btn:hover{
  transform: translate3d(var(--bx, 0px), calc(var(--by, 0px) - 1px), 0);
}
.chipBtn:hover, .tradeBtn:hover{
  transform: translate3d(var(--bx, 0px), calc(var(--by, 0px) - 1px), 0);
}

/* scroll hint */
.scrollHint{
  margin-top: 14px;
  display:flex;
  align-items:center;
  gap: 10px;
  color: rgba(245,248,255,.62);
  font-size: 12px;
  letter-spacing:.12em;
  text-transform: uppercase;
}
.scrollHint__dot{
  width: 6px; height: 6px;
  border-radius: 999px;
  background: rgba(34,197,94,.8);
  box-shadow: 0 0 0 0 rgba(34,197,94,.30);
  animation: pulseDot 1.8s var(--ease) infinite;
}
@keyframes pulseDot{
  0%{ box-shadow: 0 0 0 0 rgba(34,197,94,.32); transform: translate3d(0,0,0); }
  60%{ box-shadow: 0 0 0 10px rgba(34,197,94,0); transform: translate3d(0,1px,0); }
  100%{ box-shadow: 0 0 0 0 rgba(34,197,94,0); transform: translate3d(0,0,0); }
}

/* keep game area exempt from transforms */
#playground .btn, #playground .chipBtn, #playground .tradeBtn{transform:none !important}