/* ============================================================================
   components.css — glass panels, nav, hero, report cards, embeds, timeline,
   meters, contact, footer, icons, toasts.
   ========================================================================== */

/* ── Glass panel + luminous directional hairline ───────────────────────── */
.glass, .glass-strong {
  position: relative;
  background: var(--glass);
  backdrop-filter: blur(var(--blur-card)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur-card)) saturate(150%);
  border-radius: var(--r-card);
  box-shadow: var(--elev-2);
}
.glass-strong { background: var(--glass-strong); }
.glass::before, .glass-strong::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none; z-index: 1;
  background: linear-gradient(140deg,
    rgba(255,252,246,0.13) 0%, rgba(255,252,246,0.03) 42%,
    rgba(0,0,0,0) 64%, rgba(var(--glow-cyan), 0.10) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
/* internal scrim guarantees text contrast over any aurora glow */
.has-scrim > * { position: relative; z-index: 2; }
.has-scrim::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 0; pointer-events: none;
  background: radial-gradient(130% 130% at 0% 0%, rgba(7,10,20,0.55), rgba(7,10,20,0.12));
}
.pad { padding: clamp(20px, 3vw, 34px); }

/* ── Inline-SVG icons ──────────────────────────────────────────────────── */
.icon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none;
        stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon-18 { width: 18px; height: 18px; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  min-height: 44px; padding: 0 20px; border-radius: var(--r-btn);
  font-family: var(--font-body); font-weight: 500; font-size: 0.95rem;
  color: var(--text-hi); position: relative; isolation: isolate;
  transition: transform var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out),
              box-shadow var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.btn .icon { color: currentColor; transition: color var(--dur-1) var(--ease-out); }
.btn-primary {
  background: var(--glass-strong); border: 1px solid var(--hairline-accent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 0 0 rgba(var(--glow-cyan), 0);
}
.btn-primary:hover {
  transform: translateY(-2px); background: var(--glass-hover);
  box-shadow: 0 8px 28px -10px rgba(var(--glow-cyan), 0.55), 0 0 0 1px var(--hairline-accent);
  color: var(--cyan-400);
}
.btn-primary:active { transform: scale(0.98); }
.btn-ghost { background: transparent; border: 1px solid var(--hairline); color: var(--text-mid); }
.btn-ghost:hover { border-color: var(--hairline-accent); color: var(--text-hi); transform: translateY(-2px); }
.btn-sm { min-height: 38px; padding: 0 14px; font-size: 0.85rem; }
.btn[disabled], .btn.is-disabled {
  color: var(--text-lo); border: 1px solid var(--hairline-soft); background: transparent;
  cursor: not-allowed; box-shadow: none; transform: none;
}
.btn.is-disabled .dot-soon {
  width: 6px; height: 6px; border-radius: 50%; background: var(--text-dim); display: inline-block;
}

.btn-icon {
  width: 40px; height: 40px; min-height: 0; padding: 0; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-mid); border: 1px solid var(--hairline-soft); background: rgba(255,255,255,0.02);
  transition: transform var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.btn-icon:hover { color: var(--cyan-400); border-color: var(--hairline-accent); transform: scale(1.05); }

/* ── Chips / tags ──────────────────────────────────────────────────────── */
.chip-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.tag, .chip {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.04em;
  color: var(--text-mid); padding: 6px 12px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.03); border: 1px solid var(--hairline-soft);
}
.chip .dot, .tag .dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--text-dim);
  transition: background var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.chip:hover .dot, .tag:hover .dot { background: var(--cyan-500); box-shadow: 0 0 8px rgba(var(--glow-cyan),0.8); }
.tag.is-active { color: var(--cyan-400); border-color: var(--hairline-accent); }
.tag.is-active .dot { background: var(--cyan-500); box-shadow: 0 0 8px rgba(var(--glow-cyan),0.8); }

/* availability chip */
.avail-chip {
  display: inline-flex; align-items: center; gap: 0.6em; padding: 8px 16px;
  border-radius: var(--r-pill); background: rgba(52,228,176,0.06);
  border: 1px solid rgba(52,228,176,0.3); color: var(--text-mid);
  font-size: 0.85rem;
}
.avail-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pos); position: relative; }
.avail-chip .dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--pos);
  animation: ping 2.4s ease-out infinite;
}
@keyframes ping { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(3); opacity: 0; } }

/* ── Nav ───────────────────────────────────────────────────────────────── */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav); height: var(--nav-h);
  display: flex; align-items: center;
  background: rgba(7,10,20,0.55);
  backdrop-filter: blur(var(--blur-nav)) saturate(140%); -webkit-backdrop-filter: blur(var(--blur-nav)) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: height var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.site-nav.is-scrolled { height: 58px; background: rgba(5,7,15,0.8); border-bottom-color: var(--hairline-soft); }
.nav-inner { width: 100%; max-width: var(--shell-max); margin-inline: auto; padding-inline: var(--page-x);
             display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.nav-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; color: var(--text-hi); }
.nav-brand .mark {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 0.8rem; color: var(--text-hi);
  background: rgba(255,255,255,0.04); border: 1px solid var(--hairline);
  position: relative;
}
.nav-brand .mark::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: var(--duotone); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.6;
}
.nav-links { display: flex; align-items: center; gap: var(--s-5); }
.nav-link {
  font-size: 0.85rem; color: var(--text-lo); position: relative; padding: 6px 0;
  transition: color var(--dur-1) var(--ease-out);
}
.nav-link:hover { color: var(--text-hi); }
.nav-link.is-current { color: var(--text-hi); }
.nav-link.is-current::after {
  content: ""; position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: var(--cyan-500);
  box-shadow: 0 0 8px rgba(var(--glow-cyan), 0.9);
}
.nav-right { display: flex; align-items: center; gap: var(--s-4); }
.nav-toggle { display: none; }

/* mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: var(--z-drawer); display: none;
  background: rgba(4,6,13,0.6); backdrop-filter: blur(6px);
}
.drawer.is-open { display: block; }
.drawer-panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(320px, 82vw);
  background: var(--bg-raised); border-left: 1px solid var(--hairline);
  padding: calc(var(--nav-h) + 16px) 24px 24px; display: flex; flex-direction: column; gap: var(--s-3);
}
.drawer-panel a { padding: 12px 4px; color: var(--text-mid); border-bottom: 1px solid var(--hairline-soft); }
.drawer-panel a:hover { color: var(--text-hi); }

/* floating back-to-dashboards */
.to-top {
  position: fixed; right: clamp(16px, 3vw, 32px); bottom: clamp(16px, 3vw, 32px); z-index: var(--z-nav);
  width: 52px; height: 52px; border-radius: 50%; display: none; place-items: center;
  color: var(--text-hi); background: rgba(12,16,32,0.7);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--hairline-accent); box-shadow: var(--elev-2);
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.to-top.is-visible { display: grid; }
.to-top:hover { transform: translateY(-3px); box-shadow: 0 10px 30px -8px rgba(var(--glow-cyan), 0.5); }

/* ── Hero — name-forward ───────────────────────────────────────────────── */
.hero { padding-top: calc(var(--nav-h) + clamp(52px, 13vh, 150px)); padding-bottom: clamp(56px, 9vh, 110px); }
.hero-eyebrow { margin-bottom: var(--s-6); font-feature-settings: "tnum" 1; }
.hero-name { margin: 0 0 var(--s-6); }
.hero-name .hero-surname { position: relative; display: inline-block; }
.hero-name .hero-surname::after {
  content: ""; position: absolute; left: 0.04em; right: 0.04em; bottom: 0.12em; height: 5px;
  background: var(--cyan-500); border-radius: 2px;
}
.hero-line { font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: var(--text-mid); max-width: 48ch;
  margin-bottom: var(--s-7); line-height: 1.5; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-7); }
.measure-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-6);
  padding-top: var(--s-4); border-top: 1px solid var(--hairline-soft); max-width: 900px; }
.measure-bar .cell { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-lo);
  letter-spacing: 0.02em; font-feature-settings: "tnum" 1; }
.measure-bar .cell b { color: var(--text-hi); font-weight: 500; }

/* ── About ─────────────────────────────────────────────────────────────── */
.about-copy p { margin-bottom: var(--s-4); color: var(--text-mid); }
.about-copy p strong, .about-copy p b { color: var(--text-hi); font-weight: 500; }
.about-copy em { color: var(--text-lo); font-style: normal; font-family: var(--font-mono); font-size: 0.9em; }
.highlights { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }

/* ── Skills ────────────────────────────────────────────────────────────── */
.skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-4); }
.cloud-card { margin-top: var(--s-4); }
.cloud-card h3 { margin-bottom: var(--s-2); }
.cloud-card .chip-row { margin-top: var(--s-4); }
.skill-group h3 { margin-bottom: var(--s-2); }
.skill-group .grp-kicker { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-lo); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--s-5); }
.skill { margin-bottom: var(--s-4); }
.skill:last-child { margin-bottom: 0; }
.skill-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; gap: 12px; }
.skill-top .n { color: var(--text-hi); font-weight: 500; font-size: 0.95rem; }
.skill-top .lv { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-lo); letter-spacing: 0.06em; }
.meter { height: 6px; border-radius: var(--r-pill); background: var(--hairline-soft); overflow: hidden; display: flex; }
.meter .seg { flex: 1; border-right: 2px solid var(--bg-raised); }
.meter .seg:last-child { border-right: none; }
.meter-fill { height: 100%; width: var(--w, 100%); border-radius: var(--r-pill); background: var(--duotone); box-shadow: 0 0 10px rgba(var(--glow-cyan), 0.4); }
.js .meter-fill { width: 0; transition: width 900ms var(--ease-out); }
.js .meter-fill.is-filled { width: var(--w); }

/* ── Report cards (portfolio centerpiece) ──────────────────────────────── */
.work-head-actions { margin-top: var(--s-4); }
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-6); }
.filter-bar .tag { cursor: pointer; }
.work-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(520px, 1fr)); gap: var(--s-5); }
.report-card { background: var(--glass-strong); overflow: hidden; display: flex; flex-direction: column; }
.report-card.is-featured { grid-column: 1 / -1; }
.report-card::after { /* 2px duotone top edge = "live" */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 3;
  background: var(--duotone); opacity: 0.8; border-radius: var(--r-card) var(--r-card) 0 0;
}
.card-chrome { display: flex; align-items: center; gap: 16px; padding: 14px 18px; min-height: 56px; position: relative; z-index: 2; }
.chrome-main { flex: 1; min-width: 0; }
.chrome-title { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--text-hi); }
.chrome-tagline { font-size: 0.82rem; color: var(--text-lo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chrome-tags { display: none; }
@media (min-width: 720px) { .chrome-tags { display: flex; gap: 6px; } }
.chrome-tags .t { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; color: var(--text-lo); text-transform: uppercase; }
.chrome-tags .t + .t::before { content: "·"; margin-right: 6px; color: var(--text-dim); }
.chrome-actions { display: flex; gap: 8px; position: relative; z-index: 2; }

/* the well */
/* Padding-box sizing = report canvas ratio (--well-pb, set by JS) PLUS fixed room
   for the control bar (48px, top) and Power BI's own bottom pager (~52px). The
   iframe is absolutely placed below the control bar so the pager is never clipped. */
/* aspect-ratio (browser resolves it synchronously so Power BI measures correctly);
   ~16:10 leaves room for Power BI's own bottom pager bar below the report canvas. */
.well {
  position: relative; margin: 0 14px; border-radius: var(--r-well); overflow: hidden;
  background: var(--bg-inset); border: 1px solid var(--hairline); box-shadow: var(--elev-inset);
  aspect-ratio: var(--well-ar, 1.6);
}
.well > iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }

/* poster */
.poster { position: absolute; inset: 0; display: grid; place-items: center; }
.poster .poster-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
.poster .scan { position: absolute; left: 0; right: 0; height: 2px; top: 0; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(var(--glow-cyan), 0.5), transparent); mix-blend-mode: screen; }
.report-card:hover .scan { animation: scan 900ms var(--ease-out) 1; }
@keyframes scan { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.poster .activate {
  position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 0.55em;
  padding: 12px 22px; border-radius: var(--r-pill); color: var(--text-hi);
  background: rgba(12,16,32,0.6); border: 1px solid var(--hairline-accent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 30px -10px rgba(var(--glow-cyan), 0.5);
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.poster .activate:hover { transform: translateY(-2px); color: var(--cyan-400); box-shadow: 0 12px 36px -8px rgba(var(--glow-cyan), 0.65); }
.poster-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cyan-400); padding: 5px 10px; border-radius: var(--r-pill);
  background: rgba(4,6,13,0.55); border: 1px solid var(--hairline-soft);
}
.poster-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan-500); box-shadow: 0 0 8px rgba(var(--glow-cyan),0.9); }

/* "coming soon" placeholder poster overlay */
.poster.is-placeholder .poster-img { opacity: 0.55; }
.soon-pill {
  position: relative; z-index: 2; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-mid); padding: 10px 18px; border-radius: var(--r-pill);
  background: rgba(4,6,13,0.6); border: 1px dashed var(--hairline);
}
.well.is-unconfigured { border-style: dashed; }

/* skeleton */
.skeleton { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr; gap: 12px; padding: 16px; }
.skeleton .row { display: flex; gap: 12px; }
.sk { background: linear-gradient(100deg, rgba(255,255,255,0.03) 30%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 70%);
      background-size: 200% 100%; border-radius: 8px; animation: shimmer 1.4s linear infinite; }
.sk.kpi { height: 46px; flex: 1; }
.sk.chart { flex: 1; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* control bar + recovery (over an activated frame) */
.control-bar {
  position: absolute; top: 10px; right: 10px; z-index: 4;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 6px; border-radius: var(--r-pill);
  background: rgba(5,7,15,0.55); border: 1px solid var(--hairline-soft);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.control-bar .btn-icon { width: 30px; height: 30px; border: none; background: transparent; }
.control-bar .recovery { display: none; }
.watchdog-banner {
  position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 4;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border-radius: var(--r-btn); color: var(--text-mid);
  background: rgba(5,7,15,0.85); border: 1px solid var(--hairline-accent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--elev-3);
}
.watchdog-banner .msg { margin-right: auto; font-size: 0.85rem; }
.watchdog-banner.is-fail { border-color: rgba(255,107,125,0.4); }

/* case-study strip */
.case-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-4);
              padding: var(--s-5) 18px 0; }
.case-block .lbl { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase;
                   color: var(--cyan-500); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.case-block .lbl .n { color: var(--text-dim); }
.case-block p { font-size: 0.86rem; color: var(--text-mid); line-height: 1.5; }
.built-with { padding: var(--s-4) 18px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.built-with .bw-lbl { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
.card-actions { display: flex; gap: 10px; flex-wrap: wrap; padding: 0 18px var(--s-5); margin-top: auto; }

/* ── Experience timeline ───────────────────────────────────────────────── */
.timeline { display: flex; flex-direction: column; gap: var(--s-4); position: relative; padding-left: 28px; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 1px; background: var(--hairline); }
.experience-item { position: relative; }
.experience-item::before {
  content: ""; position: absolute; left: -28px; top: 26px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--bg-raised); border: 1px solid var(--hairline-accent); box-shadow: 0 0 0 3px rgba(var(--glow-cyan),0.08);
}
.exp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }
.exp-role { font-family: var(--font-display); font-weight: 600; color: var(--text-hi); font-size: 1.1rem; }
.exp-co { color: var(--cyan-400); font-size: 0.9rem; }
.exp-date { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-lo); white-space: nowrap; }
.exp-bullets { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.exp-bullets li { position: relative; padding-left: 20px; font-size: 0.9rem; color: var(--text-mid); }
.exp-bullets li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 6px; height: 6px; border-radius: 50%;
  background: transparent; border: 1px solid var(--cyan-500); }
.exp-skel { height: 12px; width: 55%; border-radius: 6px; margin-top: 6px;
  background: linear-gradient(100deg, rgba(255,255,255,0.03) 30%, rgba(255,255,255,0.07) 50%, rgba(255,255,255,0.03) 70%);
  background-size: 200% 100%; animation: shimmer 1.6s linear infinite; }
.finalizing { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }

/* ── Education & languages ─────────────────────────────────────────────── */
.edu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s-4); }
.edu-item h3 { font-size: 1.1rem; margin-bottom: 6px; }
.edu-item .meta { font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-lo); }
.edu-item .inprog { color: var(--pos); }
.cert-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 0.85rem; color: var(--text-mid); }
.lang-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-4); }
.lang-card .lang-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.lang-card .lang-name { font-family: var(--font-display); font-weight: 600; color: var(--text-hi); font-size: 1.05rem; }
.lang-card .lang-lvl { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-lo); }

/* ── Testimonials ──────────────────────────────────────────────────────── */
.quote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--s-4); }
.quote-card p { font-size: 1rem; color: var(--text-hi); line-height: 1.6; margin-bottom: var(--s-4); }
.quote-card .attr { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-lo); }

/* ── Contact ───────────────────────────────────────────────────────────── */
.contact-panel { padding: clamp(28px, 4vw, 56px); text-align: center; }
.contact-panel .display-l { margin-bottom: var(--s-3); }
.contact-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; margin: var(--s-6) 0 var(--s-4); }
.contact-muted { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-lo); }

/* ── Footer ────────────────────────────────────────────────────────────── */
.site-footer { position: relative; z-index: var(--z-content); border-top: 1px solid var(--hairline-soft);
  background: var(--bg-raised); padding-block: var(--s-7); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.footer-links { display: flex; gap: var(--s-4); flex-wrap: wrap; }
.footer-links a, .footer-links span { font-size: 0.85rem; color: var(--text-lo); }
.footer-links a:hover { color: var(--cyan-400); }
.footer-copy { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-dim); }

/* ── Toast (copy-email) ────────────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); z-index: var(--z-toast);
  padding: 12px 20px; border-radius: var(--r-pill); color: var(--text-hi);
  background: rgba(12,16,32,0.92); border: 1px solid var(--hairline-accent); box-shadow: var(--elev-3);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
  font-size: 0.85rem;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ── Cursor spotlight (desktop only, JS-added) ─────────────────────────── */
.cursor-glow {
  position: fixed; top: 0; left: 0; width: 380px; height: 380px; border-radius: 50%; z-index: var(--z-cursor);
  pointer-events: none; margin: -190px 0 0 -190px; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(var(--glow-cyan), 0.06), transparent 60%);
  transition: opacity var(--dur-1) var(--ease-out); will-change: transform;
}

/* ── Dev ribbon (localhost only) ───────────────────────────────────────── */
.dev-ribbon {
  position: fixed; left: 12px; bottom: 12px; z-index: var(--z-toast);
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--warn);
  padding: 8px 12px; border-radius: 8px; background: rgba(4,6,13,0.85); border: 1px solid rgba(245,197,99,0.35);
}
.dev-ribbon b { color: var(--text-hi); }

/* gallery-level friendly error */
.gallery-error {
  padding: clamp(24px, 4vw, 44px); text-align: center; color: var(--text-mid);
}
.gallery-error .icon { margin: 0 auto var(--s-3); color: var(--warn); width: 28px; height: 28px; }
.gallery-error code { font-family: var(--font-mono); color: var(--cyan-400); }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .split-7-5 { grid-template-columns: 1fr; }
  .hero-status { max-width: 460px; }
  .work-grid { grid-template-columns: 1fr; }
  .report-card.is-featured { grid-column: auto; }
}
@media (max-width: 899px) {
  :root { --spine-x: 20px; }
  .spine-node .label { display: none; }
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
}
@media (max-width: 639px) {
  .work-grid { grid-template-columns: 1fr; }
  .case-strip { grid-template-columns: 1fr 1fr; }
  .spine .pulse { display: none; }
}