/* ═══════════════════════════════════════════════════════════════════
   VICTOR NDUNDA — UI LAYER v7 "SIGNAL"
   Site-wide unified design system. Loads LAST on every page:
   after styles.css, page CSS and (on the homepage) home.css.

   What this layer does:
   00. Design tokens (dark + light) — adds warmth + elevation scale
   01. Atmosphere — aurora + engineering grid + noise on EVERY page
   02. Scroll progress polish
   03. Navigation — deeper frost, gradient hairline, active pill
   04. Typography — Space Grotesk display, tighter scale, mono metadata
   05. Buttons — brighter primary, shimmer-border ghost
   06. Unified elevated card surfaces + cursor spotlight
   07. Homepage hero — asymmetric layout + live production console
   08. Subpage heroes — one shared "page hero" pattern
   09. Blog + article reading experience
   10. Projects bento elevation + entrance motion
   11. Resume, case studies, services
   12. Footer, FAB, back-to-top, forms
   13. Motion system — v7 reveals (progressive, reduced-motion safe)
   14. Print + reduced-motion + legacy fallbacks

   Rules honored:
   - additive only: no content or class removal, .metric-chip keeps its
     accent border, .dag-stage/.stage-name/.visual-hex untouched
   - everything degrades gracefully without JS (html.v7js gate)
   - prefers-reduced-motion respected throughout
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 00. Tokens ─────────────────────────────────────────────────── */
:root {
  --v7-bg-0: #12100b;
  --v7-bg-1: #181510;
  --v7-surface-1: linear-gradient(180deg, rgba(236,214,166,.062), rgba(236,214,166,.024));
  --v7-surface-hi: linear-gradient(180deg, rgba(236,214,166,.10), rgba(236,214,166,.04));
  --v7-stroke: rgba(236,214,166,.14);
  --v7-stroke-hi: rgba(236,214,166,.30);
  --v7-text-hi: #f2ecde;
  --v7-text-mid: #b5a98f;
  --v7-text-dim: #9a9078;
  --v7-cyan: #e8a33d;
  --v7-violet: #c96f45;
  --v7-emerald: #8fb98f;
  --v7-amber: #e8a33d;
  --v7-grad: linear-gradient(120deg, #e8a33d 0%, #c96f45 55%, #8fb98f 100%);
  --v7-grad-line: linear-gradient(90deg, transparent, rgba(232,163,61,.55), rgba(201,111,69,.55), transparent);
  --v7-radius: 10px;
  --v7-radius-sm: 6px;
}

html.light {
  --v7-bg-0: #f5f0e4;
  --v7-bg-1: #efe8d8;
  --v7-surface-1: linear-gradient(180deg, rgba(255,253,247,.92), rgba(255,253,247,.66));
  --v7-surface-hi: linear-gradient(180deg, #fffdf7, rgba(255,253,247,.8));
  --v7-stroke: rgba(52,40,16,.15);
  --v7-stroke-hi: rgba(52,40,16,.30);
  --v7-text-hi: #221b0d;
  --v7-text-mid: #57503e;
  --v7-text-dim: #6b6350;
  --v7-cyan: #96590a;
  --v7-violet: #a34a21;
  --v7-emerald: #47713f;
  --v7-amber: #96590a;
  --v7-grad: linear-gradient(120deg, #96590a 0%, #a34a21 55%, #47713f 100%);
  --v7-grad-line: linear-gradient(90deg, transparent, rgba(150,89,10,.5), rgba(163,74,33,.5), transparent);
}

/* Selection + scrollbar */
::selection { background: #e8a33d; color: #17130b; }
html.light ::selection { background: #96590a; color: #fff8ec; }
/* True horizontal-overflow guard: `clip` (unlike `hidden`) creates no
   scroll container, so position:sticky TOCs keep working. Fixes the
   pre-existing liquid-bg + cert-card mobile overflow for good.      */
html, body { overflow-x: clip; }
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--v7-bg-0); }
::-webkit-scrollbar-thumb {
  background: var(--v7-amber);
  border-radius: 6px;
  border: 2px solid var(--v7-bg-0);
}

/* ─── 02. Scroll progress — from utility line to brand signal ────── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, var(--v7-cyan), var(--v7-violet), var(--v7-emerald));
  transform-origin: 0 50%;
  transform: scaleX(0);
  z-index: 1002;
  box-shadow: 0 0 12px rgba(34,211,238,.5);
}
html.light .scroll-progress { box-shadow: 0 0 10px rgba(14,116,144,.3); }

/* ─── 03. Navigation ─────────────────────────────────────────────── */
nav {
  background: rgba(6,9,18,.62);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  border-bottom: 1px solid transparent;
}
html.light nav { background: rgba(247,249,254,.68); }
/* gradient hairline replaces the flat border */
nav::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent 4%, rgba(34,211,238,.5) 30%, rgba(129,140,248,.55) 55%, rgba(52,211,153,.45) 75%, transparent 96%);
  pointer-events: none;
}
html.light nav::after {
  background: linear-gradient(90deg, transparent 4%, rgba(14,116,144,.42) 30%, rgba(79,70,229,.42) 55%, rgba(4,120,87,.36) 75%, transparent 96%);
}
nav.scrolled {
  background: rgba(6,9,18,.82);
  box-shadow: 0 12px 40px -18px rgba(2,6,20,.8);
}
html.light nav.scrolled { background: rgba(247,249,254,.9); }
/* logo mark gets a soft brand glow */
nav .logo svg { filter: drop-shadow(0 0 10px rgba(34,211,238,.35)); transition: filter .5s var(--v7-ease); }
nav .logo:hover svg { filter: drop-shadow(0 0 18px rgba(129,140,248,.55)); }
.nav-link { font-size: .875rem; font-weight: 550; color: var(--v7-text-mid); border-radius: 10px; }
.nav-link:hover { color: var(--v7-text-hi); }
.nav-link.active { color: var(--v7-text-hi); }
.nav-link.active::after { display: none; }
/* active page = filled squircle pill with gradient hairline */
.nav-link.active {
  background: linear-gradient(180deg, rgba(34,211,238,.13), rgba(129,140,248,.08));
  box-shadow: 0 0 0 1px rgba(34,211,238,.28) inset;
}
html.light .nav-link.active {
  background: linear-gradient(180deg, rgba(14,116,144,.10), rgba(79,70,229,.06));
  box-shadow: 0 0 0 1px rgba(14,116,144,.22) inset;
}
/* nav booking CTA — brighter, better shadow */
.nav-links .nav-link[style*="linear-gradient"] {
  border-radius: 12px !important;
  box-shadow: 0 6px 20px -8px rgba(34,211,238,.55), 0 1px 0 rgba(255,255,255,.18) inset;
  transition: transform .25s var(--v7-ease), box-shadow .25s var(--v7-ease), filter .25s var(--v7-ease);
}
.nav-links .nav-link[style*="linear-gradient"]:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 10px 28px -8px rgba(34,211,238,.65), 0 1px 0 rgba(255,255,255,.22) inset;
}
.cmd-trigger, .theme-toggle { border-radius: 12px; }
/* mobile menu — frosted panel */
@media (max-width: 900px) {
  .nav-links {
    background: rgba(6,9,18,.92);
    backdrop-filter: blur(24px) saturate(170%);
    -webkit-backdrop-filter: blur(24px) saturate(170%);
    border: 1px solid var(--v7-stroke);
    border-radius: 18px;
    box-shadow: var(--v7-shadow-2);
  }
  html.light .nav-links { background: rgba(247,249,254,.96); }
}

/* ─── 04. Typography ─────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--v7-font-display);
  color: var(--v7-text-hi);
  letter-spacing: -.025em;
  text-wrap: balance;
}
main h1 { font-weight: 600; line-height: 1.06; }
.grad-text {
  background: linear-gradient(115deg, var(--v7-cyan) 0%, var(--v7-violet) 55%, var(--v7-emerald) 105%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 22px rgba(34,211,238,.18));
}
/* section eyebrows — squircle, mono, numbered (home) or plain (subpages) */
.section-head .label,
.eyebrow {
  font-family: var(--v7-font-mono);
  border-radius: 11px;
  background: rgba(34,211,238,.07);
  border: 1px solid rgba(34,211,238,.2);
  box-shadow: 0 0 24px -10px rgba(34,211,238,.35);
}
html.light .section-head .label,
html.light .eyebrow {
  background: rgba(14,116,144,.07);
  border-color: rgba(14,116,144,.22);
  box-shadow: none;
}
/* body copy contrast floor */
.section-sub, .about-text, .case-body { color: var(--v7-text-mid); }

/* ─── 05. Buttons ────────────────────────────────────────────────── */
.btn { border-radius: 13px; font-weight: 650; letter-spacing: .01em; }
.btn-primary {
  background: linear-gradient(135deg, #26d9f5 0%, #7c8cf8 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.25) inset,
    0 -1px 0 rgba(10,20,50,.25) inset,
    0 8px 24px -10px rgba(34,211,238,.55);
}
.btn-primary:hover {
  box-shadow:
    0 1px 0 rgba(255,255,255,.3) inset,
    0 -1px 0 rgba(10,20,50,.25) inset,
    0 14px 36px -10px rgba(34,211,238,.65);
}
html.light .btn-primary {
  background: linear-gradient(135deg, #0891b2 0%, #4f46e5 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 8px 24px -10px rgba(79,70,229,.45);
}
/* ghost button — animated gradient border on hover */
.btn-ghost {
  position: relative;
  background: rgba(148,163,216,.055);
  border: 1px solid var(--v7-stroke);
  overflow: hidden;
}
.btn-ghost::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(115deg, var(--v7-cyan), var(--v7-violet), var(--v7-emerald));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s var(--v7-ease);
  pointer-events: none;
}
.btn-ghost:hover::before { opacity: .9; }
.btn-ghost:hover { border-color: transparent; transform: translateY(-2px); }
html.light .btn-ghost { background: rgba(255,255,255,.75); }
/* services page CTA shares the treatment */
.svc-cta-btn.primary {
  border-radius: 13px;
  background: linear-gradient(135deg, #26d9f5 0%, #7c8cf8 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 8px 24px -10px rgba(34,211,238,.55);
}

/* ─── 06. Unified elevated card surfaces ────────────────────────────
   One recipe for every card on the site: two-tone surface, inner top
   highlight, layered shadow, cursor spotlight (set by v7.js via
   --mx/--my), lift + accent hairline on hover.                          */
.spot-card, .work-card, .blog-card, .bento-card, .contact-card,
.offer-card, .case-card, .about-card, .svc-quick-card, .newsletter-band,
.booking-cta-band, .jobs-card, .guide-card {
  position: relative;
  border-radius: var(--v7-radius);
  border: 1px solid var(--v7-stroke);
  background-image:
    radial-gradient(460px circle at var(--mx, 50%) var(--my, -30%), rgba(34,211,238,.09), transparent 55%),
    var(--v7-surface-1);
  box-shadow: var(--v7-shadow-1);
  transition:
    transform .45s var(--v7-ease),
    border-color .45s var(--v7-ease),
    box-shadow .45s var(--v7-ease),
    background-position .45s var(--v7-ease);
}
html.light .spot-card, html.light .work-card, html.light .blog-card,
html.light .bento-card, html.light .contact-card, html.light .offer-card,
html.light .case-card, html.light .about-card, html.light .svc-quick-card,
html.light .newsletter-band, html.light .booking-cta-band,
html.light .jobs-card, html.light .guide-card {
  background-image:
    radial-gradient(460px circle at var(--mx, 50%) var(--my, -30%), rgba(14,116,144,.07), transparent 55%),
    var(--v7-surface-1);
}
@media (hover: hover) {
  .spot-card:hover, .work-card:hover, .blog-card:hover, .bento-card:hover,
  .contact-card:hover, .offer-card:hover, .case-card:hover, .about-card:hover,
  .svc-quick-card:hover, .newsletter-band:hover, .booking-cta-band:hover,
  .jobs-card:hover, .guide-card:hover {
    border-color: var(--v7-stroke-hi);
    box-shadow: var(--v7-shadow-2);
    transform: translateY(-4px);
    background-image:
      radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), rgba(34,211,238,.14), transparent 60%),
      var(--v7-surface-hi);
  }
  html.light .spot-card:hover, html.light .work-card:hover, html.light .blog-card:hover,
  html.light .bento-card:hover, html.light .contact-card:hover, html.light .offer-card:hover,
  html.light .case-card:hover, html.light .about-card:hover, html.light .svc-quick-card:hover,
  html.light .newsletter-band:hover, html.light .booking-cta-band:hover,
  html.light .jobs-card:hover, html.light .guide-card:hover {
    background-image:
      radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), rgba(14,116,144,.10), transparent 60%),
      var(--v7-surface-hi);
  }
}
/* keep the QA-checked accent border on metric chips */
.metric-chip { border-left: 3px solid rgba(34,211,238,.75) !important; }
/* case-study metric labels — legibility floor */
.cm-lbl { font-size: .78rem !important; letter-spacing: .07em; color: #97a3c2 !important; }
html.light .cm-lbl { color: #4a5473 !important; }
/* contact cards — fix the low-contrast "looks disabled" problem */
.contact-card .contact-label {
  font-family: var(--v7-font-mono);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--v7-text-dim);
}
.contact-card .contact-value { color: var(--v7-text-hi); font-weight: 600; font-size: .9rem; }
.contact-icon { color: var(--v7-cyan); }
/* balanced contact layout — primary channels (email, phone) get roomy
   cards on row 1; social/save cards form an equal compact row 2      */
.contact-grid { grid-template-columns: repeat(6, 1fr) !important; max-width: 1020px !important; }
.contact-grid .contact-card:nth-child(1) { grid-column: span 3; }  /* email    */
.contact-grid .contact-card:nth-child(2) { grid-column: span 3; }  /* whatsapp */
.contact-grid .contact-card:nth-child(3) { grid-column: span 2; }  /* github   */
.contact-grid .contact-card:nth-child(4) { grid-column: span 2; }  /* linkedin */
.contact-grid .contact-card:nth-child(5) { grid-column: span 2; }  /* vcard    */
.contact-grid .contact-card:nth-child(1) .contact-value { white-space: nowrap; } /* email never breaks */
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .contact-grid .contact-card:nth-child(1) { grid-column: span 2 !important; } /* email keeps a full row */
  .contact-grid .contact-card:not(:nth-child(1)) { grid-column: span 1 !important; }
}
@media (max-width: 560px) {
  .contact-grid { grid-template-columns: 1fr !important; }
  .contact-grid .contact-card { grid-column: span 1 !important; }
}

/* ghost buttons on cards — must read as buttons at rest, not fade away */
.case-links .btn-ghost, .work-links .btn-ghost, .card-ghost-btn {
  border-color: rgba(148,163,216,.3);
  color: var(--v7-text-hi);
  background: rgba(148,163,216,.08);
}
.case-links .btn-ghost:hover, .work-links .btn-ghost:hover {
  border-color: rgba(34,211,238,.55);
  color: var(--v7-cyan);
}
/* offer pricing block — breathing room */
.offer-price { line-height: 1.65 !important; }
.offer-price small { display: inline-block; margin-top: .2rem; }
/* "most popular" tab — anchored inside the card, no longer taped on */
.offer-badge {
  top: 14px !important;
  right: 14px !important;
  border-radius: 9px !important;
  box-shadow: 0 8px 20px -6px rgba(16,185,129,.55), 0 1px 0 rgba(255,255,255,.25) inset !important;
}
/* booking CTA band — lift the inner contrast */
.booking-cta-title { color: var(--v7-text-hi) !important; }
.booking-cta-body { color: #c2cee9 !important; }
html.light .booking-cta-body { color: #37415f !important; }
.booking-cta-eyebrow { color: var(--v7-text-mid) !important; }

.hero-proof-chip {
  border-radius: 13px;
  font-family: var(--v7-font-mono);
  font-size: .78rem;
  background: rgba(52,211,153,.06);
  border: 1px solid rgba(52,211,153,.25);
  box-shadow: 0 0 28px -12px rgba(52,211,153,.5);
}
.hero-proof-chip .pulse-dot { background: var(--v7-emerald); box-shadow: 0 0 10px var(--v7-emerald); }

/* ─── 08. Subpage heroes — one shared pattern ────────────────────── */
.blog-hero, .svc-hero, .projects-hero, .resume-hero, .case-hero,
.book-hero, .guide-hero, .jobs-hero, .articles-hero, .dashboard-hero {
  position: relative;
  padding: 8.5rem 0 4.25rem !important;
}
.blog-hero::before, .svc-hero::before, .projects-hero::before, .resume-hero::before,
.case-hero::before, .book-hero::before, .guide-hero::before, .jobs-hero::before {
  content: '';
  position: absolute;
  inset: 55% -10% -22%;
  background:
    radial-gradient(60% 90% at 20% 0%, rgba(34,211,238,.14), transparent 70%),
    radial-gradient(50% 80% at 80% 10%, rgba(129,140,248,.16), transparent 70%);
  pointer-events: none;
}
html.light .blog-hero::before, html.light .svc-hero::before, html.light .projects-hero::before,
html.light .resume-hero::before, html.light .case-hero::before, html.light .book-hero::before,
html.light .guide-hero::before, html.light .jobs-hero::before {
  background:
    radial-gradient(60% 90% at 20% 0%, rgba(14,116,144,.10), transparent 70%),
    radial-gradient(50% 80% at 80% 10%, rgba(79,70,229,.10), transparent 70%);
}
/* the inline-styled subpage kickers become proper mono chips */
.blog-hero .label, .svc-hero .label, .projects-hero .label,
.resume-eyebrow, .jobs-hero .label, .guide-hero .label, .book-hero .label {
  display: inline-flex !important;
  align-items: center;
  gap: .55rem;
  font-family: var(--v7-font-mono) !important;
  font-size: .72rem !important;
  font-weight: 500 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--v7-cyan) !important;
  background: rgba(34,211,238,.08) !important;
  border: 1px solid rgba(34,211,238,.24) !important;
  border-radius: 11px !important;
  padding: .45rem 1rem !important;
  margin-bottom: 1.5rem !important;
  box-shadow: 0 0 26px -10px rgba(34,211,238,.4);
}
html.light .blog-hero .label, html.light .svc-hero .label, html.light .projects-hero .label,
html.light .resume-eyebrow, html.light .jobs-hero .label, html.light .guide-hero .label,
html.light .book-hero .label {
  color: var(--v7-cyan) !important;
  background: rgba(14,116,144,.08) !important;
  border-color: rgba(14,116,144,.25) !important;
  box-shadow: none;
}
/* big display headers on subpages (beats the inline styles) */
.blog-hero h1, .svc-hero h1, .projects-hero h1, .resume-title,
.case-hero h1, .jobs-hero h1, .guide-hero h1, .book-hero h1 {
  font-family: var(--v7-font-display) !important;
  font-size: clamp(2.3rem, 5vw, 3.7rem) !important;
  font-weight: 600 !important;
  line-height: 1.06 !important;
  letter-spacing: -.03em !important;
  margin-bottom: 1.35rem !important;
  color: var(--v7-text-hi) !important;
  text-wrap: balance;
}
.blog-hero p, .svc-hero > .container > p, .projects-hero p,
.resume-tagline, .case-hero p, .jobs-hero p, .guide-hero p {
  color: var(--v7-text-mid);
  font-size: 1.06rem;
  line-height: 1.75;
}

/* ─── 09. Blog + article reading experience ──────────────────────── */
.blog-grid { gap: 1.6rem; }
.blog-card {
  padding: 1.9rem;
  display: flex;
  flex-direction: column;
  border-color: rgba(148,163,216,.2); /* edge must read on low-contrast screens */
}
.blog-card h2, .blog-card h3 { color: var(--v7-text-hi); }
.blog-card:hover h2, .blog-card:hover h3 { color: var(--v7-cyan); }
.blog-card p { color: var(--v7-text-mid); }
/* article meta + tags → mono squircle chips */
.article-meta {
  font-family: var(--v7-font-mono);
  font-size: .74rem;
  letter-spacing: .06em;
  color: var(--v7-text-dim);
}
.article-tag {
  font-family: var(--v7-font-mono) !important;
  font-size: .68rem !important;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 9px !important;
  padding: .34rem .75rem !important;
}
.vn-pdf-chip {
  font-family: var(--v7-font-mono);
  font-size: .7rem;
  border-radius: 9px;
  border: 1px solid rgba(251,191,36,.35);
  background: rgba(251,191,36,.08);
  color: var(--v7-amber);
  padding: .3rem .7rem;
  white-space: nowrap;
}
/* article body — editorial measure + gradient-ruled headings */
.article-body { font-size: 1.06rem; line-height: 1.85; color: var(--v7-text-mid); }
.article-body h2 {
  font-size: 1.75rem;
  margin: 2.8rem 0 1.1rem;
  padding-bottom: .7rem;
  position: relative;
}
.article-body h2::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 84px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--v7-cyan), var(--v7-violet), transparent);
}
.article-body h3 { font-size: 1.3rem; margin: 2.2rem 0 .8rem; }
.article-body strong { color: var(--v7-text-hi); }
.article-body a { color: var(--v7-cyan); text-decoration-color: rgba(34,211,238,.35); text-underline-offset: 3px; }
.article-body a:hover { text-decoration-color: var(--v7-cyan); }
.article-body blockquote {
  border-left: 2px solid transparent;
  border-image: linear-gradient(180deg, var(--v7-cyan), var(--v7-violet)) 1;
  background: linear-gradient(90deg, rgba(34,211,238,.05), transparent 70%);
  border-radius: 0 14px 14px 0;
  padding: 1.1rem 1.4rem;
  color: var(--v7-text-hi);
}
.article-body code {
  font-family: var(--v7-font-mono);
  font-size: .86em;
  background: rgba(148,163,216,.1);
  border: 1px solid var(--v7-stroke);
  border-radius: 6px;
  padding: .1em .4em;
}
.article-body pre {
  border-radius: 16px;
  border: 1px solid var(--v7-stroke);
  background: linear-gradient(180deg, rgba(10,16,32,.9), rgba(7,11,24,.94)) !important;
  box-shadow: var(--v7-shadow-1);
}
.article-body pre code { background: none; border: none; padding: 0; }
/* article TOC card (built by article-enhance.js) */
.toc-card, .article-toc, .on-this-page {
  border-radius: 16px;
  border: 1px solid var(--v7-stroke);
  background-image: var(--v7-surface-1);
  box-shadow: var(--v7-shadow-1);
}
.toc-card a:hover, .article-toc a:hover, .on-this-page a:hover { color: var(--v7-cyan); }

/* ─── 10. Projects bento ─────────────────────────────────────────── */
.proj-filter {
  border-radius: 12px;
  font-family: var(--v7-font-mono);
  font-size: .78rem;
  letter-spacing: .04em;
  background-image: var(--v7-surface-1);
  border: 1px solid var(--v7-stroke);
}
.proj-filter.active {
  background: linear-gradient(135deg, #26d9f5, #7c8cf8);
  box-shadow: 0 8px 22px -10px rgba(34,211,238,.6), 0 1px 0 rgba(255,255,255,.25) inset;
}
.bento-card {
  background-image:
    radial-gradient(460px circle at var(--mx, 50%) var(--my, -30%), rgba(34,211,238,.08), transparent 55%),
    var(--v7-surface-1);
}
html.light .bento-card {
  background-image:
    radial-gradient(460px circle at var(--mx, 50%) var(--my, -30%), rgba(14,116,144,.07), transparent 55%),
    var(--v7-surface-1);
}
.bento-card:hover {
  border-color: var(--v7-stroke-hi);
  box-shadow: var(--v7-shadow-2), 0 0 0 1px var(--card-accent, var(--v7-cyan));
}
/* entrance: cards cascade in as they render (plays on insert, no JS needed) */
@keyframes v7cardIn {
  from { opacity: 0; transform: translateY(26px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
html.v7js .bento-card { animation: v7cardIn .7s var(--v7-ease) both; }
html.v7js .bento-card:nth-child(2) { animation-delay: .07s; }
html.v7js .bento-card:nth-child(3) { animation-delay: .14s; }
html.v7js .bento-card:nth-child(4) { animation-delay: .21s; }
html.v7js .bento-card:nth-child(5) { animation-delay: .28s; }
html.v7js .bento-card:nth-child(6) { animation-delay: .35s; }
.card-badge.award {
  background: linear-gradient(135deg, rgba(251,191,36,.18), rgba(251,191,36,.08));
  border: 1px solid rgba(251,191,36,.4);
  color: var(--v7-amber);
  border-radius: 9px;
}

/* resume: the inline 1fr 1fr cert grid can't shrink on small screens
   (long skill chips force min-content wider than the viewport)        */
@media (max-width: 640px) {
  .resume-card div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}
.resume-section {
  border-radius: var(--v7-radius);
  border: 1px solid var(--v7-stroke);
  background-image: var(--v7-surface-1);
  box-shadow: var(--v7-shadow-1);
}
.resume-section-title { font-family: var(--v7-font-display); letter-spacing: -.02em; }
/* resume: the inline 1fr 1fr cert grid can't shrink on small screens
   (long skill chips force min-content wider than the viewport)        */
@media (max-width: 640px) {
  .resume-card div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}
.case-study section, .cs-section {
  scroll-margin-top: 90px;
}
.svc-quick-card, .pkg-card, .svc-card {
  border-radius: var(--v7-radius);
  border: 1px solid var(--v7-stroke);
  background-image: var(--v7-surface-1);
  box-shadow: var(--v7-shadow-1);
}
.services-faq details, .faq-item {
  border-radius: 14px;
  border: 1px solid var(--v7-stroke);
  background-image: var(--v7-surface-1);
}

/* ─── 12. Footer, FAB, back-to-top, forms ────────────────────────── */
footer {
  position: relative;
  border-top: 1px solid transparent;
  background:
    radial-gradient(50rem 18rem at 50% 120%, rgba(129,140,248,.09), transparent 70%),
    rgba(5,7,15,.55);
}
html.light footer { background: radial-gradient(50rem 18rem at 50% 120%, rgba(79,70,229,.07), transparent 70%), rgba(245,247,254,.7); }
footer::before {
  content: '';
  position: absolute;
  top: -1px; left: 10%; right: 10%;
  height: 1px;
  background: var(--v7-grad-line);
}
footer h5 {
  font-family: var(--v7-font-mono);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--v7-text-dim);
}
footer a { color: var(--v7-text-mid); transition: color .2s var(--v7-ease); }
footer a:hover { color: var(--v7-cyan); }
.footer-bottom p { color: var(--v7-text-dim); }
.v7-foot-stamp {
  font-family: var(--v7-font-mono);
  font-size: .66rem;
  letter-spacing: .1em;
  color: var(--v7-text-dim);
  opacity: .8;
}
/* FAB + back-to-top — glass with brand glow */
.fab, .back-to-top {
  border-radius: 16px;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}
.fab-book {
  box-shadow: 0 14px 38px -12px rgba(34,211,238,.6), 0 1px 0 rgba(255,255,255,.2) inset;
}
.back-to-top {
  border: 1px solid var(--v7-stroke);
  background: rgba(10,16,32,.72);
  color: var(--v7-text-mid);
}
html.light .back-to-top { background: rgba(255,255,255,.8); }
/* form controls */
.newsletter-input, input[type="email"], input[type="text"], textarea, select {
  border-radius: 13px;
  border: 1px solid var(--v7-stroke);
  background: rgba(148,163,216,.05);
  color: var(--v7-text-hi);
  transition: border-color .25s var(--v7-ease), box-shadow .25s var(--v7-ease), background .25s var(--v7-ease);
}
.newsletter-input:focus, input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: rgba(34,211,238,.55);
  box-shadow: 0 0 0 3px rgba(34,211,238,.14), 0 0 24px -8px rgba(34,211,238,.35);
}
.newsletter-input::placeholder, input::placeholder { color: var(--v7-text-dim); }

/* ─── 13. Motion system ──────────────────────────────────────────── */
/* Reveal: hidden ONLY when JS is present (html.v7js), so no-JS users
   and crawlers always see full content. Stagger via --v7d.           */
html.v7js .v7-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity .8s var(--v7-ease),
    transform .8s var(--v7-ease);
  transition-delay: var(--v7d, 0s);
  will-change: opacity, transform;
}
html.v7js .v7-reveal.v7-in {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}
/* section rule that draws itself in */
html.v7js .section-head { position: relative; }
html.v7js .section-head::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -1.4rem;
  width: 0; height: 1px;
  background: var(--v7-grad-line);
  transform: translateX(-50%);
  transition: width 1.1s var(--v7-ease) .25s;
}
html.v7js .section-head.v7-in::after { width: min(320px, 60%); }
html.v7js .section-head.text-left::after { left: 0; transform: none; }

/* ─── 14. Safety nets ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html.v7js .v7-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  html.v7js .bento-card { animation: none !important; }
  .v7-caret { animation: none !important; }
  html.v7js .section-head::after { transition: none !important; width: min(320px, 60%); }
}
/* keep print clean: no aurora, no shadows, black on white */
@media print {
  body::before, body::after, nav, .scroll-progress, .back-to-top, .fab-stack, .v7-console { display: none !important; }
  body { background: #fff !important; color: #111 !important; }
  .spot-card, .work-card, .blog-card, .bento-card, .contact-card, .offer-card,
  .case-card, .about-card, .resume-section { box-shadow: none !important; background: #fff !important; border-color: #ddd !important; }
}
/* very old browsers: v7 needs custom properties; degrade to v6/base */
@supports not (background: linear-gradient(180deg, red, blue)) {
  .v7-console { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   v8 · TEN-POLISH LAYER (Cycle 11) — the 8.5 → 10 pass
   A. Hero signature: supersized console, weight-contrast headline
   B. CTA hierarchy: solid reserved for the hero, nav goes ghost
   C. Motion system: view transitions, cursor signal, magnetic, tilt
   D. Subpages: featured blog card, tag coding, bento type scale,
      article editorial measure
   E. Light mode: AA console, card elevation, tag vibrancy
   F. Mobile: line-height, stat scale, nav spacing, FAB clearance
   G. Focus rings, icon sizing, radius unification
   Everything degrades safely: reduced-motion, print, old browsers.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── C1. Cross-document view transitions (progressive) ─────────── */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}
::view-transition-old(root) { animation: vtOut .26s var(--v7-ease) both; }
::view-transition-new(root) { animation: vtIn .32s var(--v7-ease) both; }
@keyframes vtOut { to { opacity: 0; transform: scale(.994); } }
@keyframes vtIn { from { opacity: 0; transform: scale(1.006); } }

/* ─── C2. Cursor signal dot — desktop only, subtle ──────────────── */
.v7-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  border: 1.5px solid rgba(34,211,238,.55);
  box-shadow: 0 0 18px -4px rgba(34,211,238,.45), inset 0 0 10px -6px rgba(34,211,238,.6);
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: width .25s var(--v7-ease), height .25s var(--v7-ease),
              margin .25s var(--v7-ease), border-color .25s, opacity .4s;
  will-change: transform;
}
.v7-cursor::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 4px; height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: var(--v7-cyan);
}
.v7-cursor.v7-cur-in {
  width: 52px; height: 52px;
  margin: -26px 0 0 -26px;
  border-color: rgba(129,140,248,.75);
  box-shadow: 0 0 26px -4px rgba(129,140,248,.5), inset 0 0 14px -6px rgba(129,140,248,.7);
}
html.light .v7-cursor { border-color: rgba(14,116,144,.6); }
html.light .v7-cursor.v7-cur-in { border-color: rgba(79,70,229,.7); }
@media (hover: none), (pointer: coarse) { .v7-cursor { display: none; } }

/* ─── C3. Card tilt — a whisper of 3D on hover ───────────────────── */
.v7-tilt-wrap { perspective: 1300px; }
.v7-tilt {
  transform-style: preserve-3d;
  transition: transform .5s var(--v7-ease), box-shadow .5s var(--v7-ease);
  will-change: transform;
}
.v7-tilt.v7-tilt-on {
  transition: transform .08s linear, box-shadow .5s var(--v7-ease);
}

/* ─── C4. Nav link underline grows from the left ─────────────────── */
.nav-links .nav-link:not(.nav-link-cta) {
  position: relative;
}
.nav-links .nav-link:not(.nav-link-cta)::after {
  content: '';
  position: absolute;
  left: .9rem; right: .9rem;
  bottom: calc(50% - 1.05rem);
  height: 1.5px;
  background: var(--v7-grad);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s var(--v7-ease);
  border-radius: 2px;
}
.nav-links .nav-link:not(.nav-link-cta):hover::after { transform: scaleX(1); }

/* ─── D1. Blog index — featured card + editorial rhythm ─────────── */
@media (min-width: 900px) {
  .blog-grid .blog-card:first-child {
    grid-column: span 2;
    padding: 2.6rem 2.8rem;
    background-image: var(--v7-surface-hi);
    border-color: var(--v7-stroke-hi);
    box-shadow: var(--v7-shadow-2);
    position: relative;
    overflow: hidden;
  }
  .blog-grid .blog-card:first-child h2,
  .blog-grid .blog-card:first-child h3 { font-size: 1.7rem; letter-spacing: -.015em; }
  .blog-grid .blog-card:first-child p { font-size: 1.02rem; max-width: 62ch; }
  .blog-grid .blog-card:first-child::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--v7-grad);
    opacity: .85;
  }
}
/* category-coded tags — structural, not decorative afterthoughts */
.blog-tag {
  font-family: var(--v7-font-mono);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .28rem .6rem;
  border-radius: 6px;
  border-left: 2.5px solid var(--v7-cyan);
  background: rgba(34,211,238,.09);
  color: #7ee3f4;
}
.blog-tag.engineering { border-left-color: var(--v7-amber); background: rgba(251,191,36,.09); color: #fcd34d; }
.blog-tag.research { border-left-color: var(--v7-violet); background: rgba(129,140,248,.1); color: #b3bcfc; }
.blog-tag.agri { border-left-color: var(--v7-emerald); background: rgba(52,211,153,.09); color: #86efac; }
html.light .blog-tag { background: rgba(14,116,144,.08); color: #0e7490; }
html.light .blog-tag.engineering { background: rgba(180,83,9,.09); color: #b45309; }
html.light .blog-tag.research { background: rgba(79,70,229,.09); color: #4f46e5; }
html.light .blog-tag.agri { background: rgba(4,120,87,.09); color: #047857; }
/* generative header texture per card (dot field, fades into text) */
.blog-card { position: relative; overflow: hidden; }
.blog-card::after {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 220px; height: 160px;
  background-image: radial-gradient(rgba(148,163,216,.16) 1px, transparent 1.6px);
  background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(70% 70% at 78% 18%, #000 30%, transparent 75%);
  mask-image: radial-gradient(70% 70% at 78% 18%, #000 30%, transparent 75%);
  opacity: .55;
  pointer-events: none;
  transition: opacity .4s var(--v7-ease), transform .5s var(--v7-ease);
}
.blog-card:hover::after { opacity: 1; transform: scale(1.08); }
/* byline pattern + arrow affordance */
.blog-card .blog-read {
  color: var(--v7-text-dim);
  transition: transform .3s var(--v7-ease), color .3s;
}
.blog-card:hover .blog-read { color: var(--v7-cyan); transform: translateX(5px); }
.blog-card .blog-date { color: var(--v7-text-dim); }
html.light .blog-card .blog-date { color: var(--v7-text-mid); }
.blog-card h2, .blog-card h3 { text-wrap: balance; }
.blog-card p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ─── D2. Projects bento — 3-tier type + filter affordance ──────── */
.bento-card .card-title {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--v7-text-hi);
}
.bento-card .card-tagline {
  font-size: .98rem;
  font-weight: 500;
  color: var(--v7-text-mid);
  letter-spacing: 0;
}
.bento-card .card-desc {
  font-size: .875rem;
  line-height: 1.65;
  color: var(--v7-text-dim);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* status dot breathes only while the card is hovered — intent, not noise */
.bento-card .card-status-dot { transition: box-shadow .3s; }
.bento-card:hover .card-status-dot.live {
  animation: v7status 1.6s ease-in-out infinite;
}
@keyframes v7status {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52,211,153,.0); }
  50% { box-shadow: 0 0 0 5px rgba(52,211,153,.16); }
}
/* fill visual voids with a soft brand gradient */
.bento-card .card-visual {
  background-image: linear-gradient(180deg, rgba(148,163,216,.05), transparent 55%);
}
/* filter pills: the active one glows, the rest stay quiet */
.bento-filter.active, .filter-pill.active, .filters .active {
  background: linear-gradient(135deg, rgba(34,211,238,.2), rgba(129,140,248,.2));
  border-color: rgba(34,211,238,.5);
  color: var(--v7-text-hi);
  box-shadow: 0 0 22px -6px rgba(34,211,238,.4);
}

/* ─── D3. Article reading — premium editorial measure ───────────── */
.article { max-width: 740px; }
.article-body { font-size: 1.09rem; line-height: 1.85; }
.article-body p { text-wrap: pretty; }

/* ─── E1. Light mode — AA console + card elevation + nav states ─── */
html.light .v7-console {
  background: linear-gradient(180deg, #ffffff, #eef2fa);
  border-color: rgba(30,41,82,.22);
  color: #33405e;
  box-shadow: 0 1px 0 #fff inset, 0 34px 70px -30px rgba(30,41,82,.4),
              0 0 70px -24px rgba(14,116,144,.22);
}
html.light .v7-console .v7-cl, html.light .v7-console .v7-cl .v7-p { color: #0e7490; }
html.light .v7-console .v7-cl { color: #33405e; }
html.light .v7-cl .v7-ok { color: #047857; }
html.light .v7-console .v7-cl .v7-hl { color: #101838; }
html.light .v7-console-foot { background: rgba(30,41,82,.045); border-top-color: rgba(30,41,82,.14); }
html.light .v7-console-foot b { color: #2b3654; }
html.light .v7-console-foot .foot-ok { color: #047857; }
/* light cards need real elevation, not floating text blocks */
html.light .blog-card, html.light .offer-card, html.light .case-card,
html.light .work-card, html.light .contact-card {
  box-shadow: 0 1px 2px rgba(30,41,82,.05), 0 10px 30px -18px rgba(30,41,82,.22);
  border-color: rgba(30,41,82,.12);
}
html.light .blog-card:hover, html.light .offer-card:hover {
  box-shadow: 0 2px 4px rgba(30,41,82,.06), 0 20px 44px -20px rgba(30,41,82,.3);
}

/* ─── F1. Mobile refinements ────────────────────────────────────── */
@media (max-width: 480px) {
}
/* nav icon buttons: 40px targets, air between */
.nav-actions { gap: .75rem; }
.cmd-trigger, .theme-toggle, .mobile-toggle {
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
}
/* FAB never covers the last content on mobile */
@media (max-width: 760px) {
  body { padding-bottom: 5.5rem; }
  .fab-stack { bottom: 1.1rem; }
}

/* ─── G1. Focus rings + unified radii + icon polish ─────────────── */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--v7-cyan);
  outline-offset: 3px;
  border-radius: 10px;
}
.btn { border-radius: 12px; }
.cmd-trigger svg, .theme-toggle svg { width: 18px; height: 18px; }
.cmd-trigger kbd {
  font-size: .6rem;
  padding: .1rem .32rem;
  border-radius: 5px;
}

/* ─── G2. v8 safety nets ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .v7-cursor { display: none; }
  .v7-magnetic { transition: none; }
  .v7-tilt { transition: none; }
  .nav-links .nav-link:not(.nav-link-cta)::after { transition: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .bento-card:hover .card-status-dot.live { animation: none; }
  .blog-card::after { transition: none; }
}
@media print {
  .v7-cursor { display: none; }
  .blog-card::after { display: none; }
  .hero-content::after { display: none; }
}

/* ─── v8.1 — measured fixes (VLM round 2) ────────────────────────── */
/* "EN·FR·SW" is a text value, not a number: at num size its
   min-content width blows the mobile grid track (349px in a 286px
   wrap). Text-valued nums get a display size that fits.           */
.hero-stat .num:not([data-count]) {
  font-size: clamp(1.12rem, 1.2vw, 1.32rem);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.5;
  align-self: center;
}
/* the language tile is a row of its own on mobile — let it breathe */
@media (max-width: 480px) {
  .hero-stat { min-width: 0; }
}

/* light mode round 2 — the console must float, not blend */
html.light .v7-console {
  border: 1px solid rgba(30,41,82,.24);
  box-shadow:
    0 1px 0 #fff inset,
    0 2px 6px rgba(30,41,82,.06),
    0 36px 80px -30px rgba(30,41,82,.45),
    0 0 70px -22px rgba(14,116,144,.28);
}
html.light .v7-live-pill {
  color: #065f46;
  border-color: rgba(4,120,87,.45);
  background: rgba(4,120,87,.1);
  font-weight: 700;
}
html.light .v7-dot.r { background: #c9493f; }
html.light .v7-dot.y { background: #b4832a; }
html.light .v7-dot.g { background: #2f8f46; }
/* light nav active pill: clearly present */
html.light .nav-links .nav-link.active {
  background: rgba(14,116,144,.12);
  border-color: rgba(14,116,144,.35);
  box-shadow: 0 0 0 1px rgba(14,116,144,.12), 0 4px 16px -8px rgba(14,116,144,.35);
  color: var(--v7-text-hi);
}

/* ─── v8.2 — final-round fixes (VLM round 3) ─────────────────────── */
/* mobile: the "Currently live" chip must never eat the project name —
   two lines instead of an aggressive single-line ellipsis          */
@media (max-width: 640px) {
  .hero-proof-chip { align-items: flex-start; }
  .hero-proof-text {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.45;
  }
  .hero-proof-arrow { align-self: center; }
  /* breathing room around the console on small screens */
  .v7-console { margin-top: 2.8rem; }
}
/* light: nav ghost CTA was "bordering illegible" — give it a voice */
html.light .nav-link-cta {
  color: var(--v7-text-hi);
  border-color: rgba(30,41,82,.42);
  background: rgba(255,255,255,.7);
}
html.light .nav-link-cta:hover {
  background: rgba(14,116,144,.08);
  border-color: rgba(14,116,144,.6);
  color: var(--v7-text-hi);
}

/* ─── v8.3 — editorial signature on long-form reading ───────────── */
/* article pull-quotes: from "bordered box" to editorial statement.
   Inline styles on legacy blockquotes need !important to lift.     */
.article-body blockquote {
  position: relative !important;
  margin: 3rem 0 !important;
  padding: 1.5rem 1.8rem 1.5rem 2.1rem !important;
  border-left: 3px solid var(--v7-cyan) !important;
  border-radius: 0 14px 14px 0 !important;
  background:
    linear-gradient(90deg, rgba(34,211,238,.07), rgba(129,140,248,.04) 65%, transparent) !important;
  font-size: 1.22rem !important;
  line-height: 1.6 !important;
  font-weight: 500 !important;
  letter-spacing: -.005em !important;
  color: var(--v7-text-hi) !important;
  box-shadow: -14px 0 34px -22px rgba(34,211,238,.35);
}
html.light .article-body blockquote {
  background: linear-gradient(90deg, rgba(14,116,144,.07), rgba(79,70,229,.04) 65%, transparent) !important;
  color: var(--v7-text-hi) !important;
  box-shadow: none;
}
/* opening drop cap — the editorial signature */
.article-body > p:first-of-type::first-letter {
  float: left;
  font-family: var(--v7-font-display);
  font-weight: 700;
  font-size: 3.4em;
  line-height: .82;
  padding: .08em .12em 0 0;
  background: linear-gradient(135deg, var(--v7-cyan), var(--v7-violet));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
/* paragraphs breathe */
.article-body p { margin-bottom: 1.65rem; }
/* blog card excerpt rhythm */
.blog-card p { line-height: 1.7; margin-bottom: 1.15rem; }
.blog-card h2, .blog-card h3 { margin-bottom: .85rem; }

/* ─── v8.3b — mobile console: deliberate, not shrunk ─────────────── */
@media (max-width: 640px) {
  .v7-console {
    border-radius: 16px;
    box-shadow:
      0 1px 0 rgba(255,255,255,.07) inset,
      0 26px 56px -24px rgba(2,8,26,.92),
      0 0 60px -20px rgba(34,211,238,.3);
  }
  .v7-console-bar { padding: .6rem .85rem; }
  .v7-console-body { padding: .95rem 1rem 1rem; min-height: 150px; }
  .v7-console-foot { padding: .5rem 1rem; gap: .55rem 1rem; font-size: .58rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   v9 · LIVING SHELL layer (Cycle 12) — the typeable hero
   Console becomes a real prompt: boot log + input row + chips,
   neofetch grid, dim output class, focus-within glow.
   ═══════════════════════════════════════════════════════════════════ */

/* the body becomes: scrollable log + pinned input row */
.v7-console-body {
  padding: 0;
  min-height: 232px;
  display: block;
}
.v7-shell-log {
  max-height: 208px;
  overflow-y: auto;
  padding: 1.1rem 1.25rem .4rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,216,.25) transparent;
  overscroll-behavior: contain;
}
.v7-shell-log::-webkit-scrollbar { width: 5px; }
.v7-shell-log:focus-visible { outline: 2px solid rgba(34,211,238,.6); outline-offset: -2px; border-radius: 6px; }
.v7-shell-log::-webkit-scrollbar-thumb { background: rgba(148,163,216,.22); border-radius: 4px; }
.v7-shell-log .v7-cl { white-space: pre-wrap; word-break: break-word; min-height: 1em; }
.v7-cl .v7-d { color: var(--v7-text-dim); }
html.light .v7-cl .v7-d { color: var(--v7-text-mid); }

/* input row — a real prompt line */
.v7-shell-input-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .62rem 1.25rem .95rem;
  border-top: 1px dashed rgba(148,163,216,.16);
}
html.light .v7-shell-input-row { border-top-color: rgba(30,41,82,.16); }
.v7-shell-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: inherit;
  font-family: var(--v7-font-mono);
  font-size: .84rem;
  line-height: 1.6;
  caret-color: var(--v7-cyan);
}
.v7-shell-input::placeholder { color: var(--v7-text-dim); opacity: .75; }
.v7-shell-input:focus { outline: none; }
/* typing state: the whole console wakes up */
.v7-console:focus-within {
  border-color: rgba(34,211,238,.45);
  box-shadow:
    0 1px 0 rgba(255,255,255,.07) inset,
    0 48px 100px -32px rgba(2,8,26,.95),
    0 0 100px -14px rgba(34,211,238,.42),
    0 0 220px -56px rgba(129,140,248,.3);
}
html.light .v7-console:focus-within {
  border-color: rgba(14,116,144,.5);
  box-shadow: 0 1px 0 #fff inset, 0 2px 6px rgba(30,41,82,.06),
              0 36px 80px -30px rgba(30,41,82,.45), 0 0 80px -20px rgba(14,116,144,.35);
}

/* suggestion chips — tap-to-run */
.v7-shell-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  padding: .62rem 1.25rem .78rem;
  border-top: 1px solid var(--v7-stroke);
}
.v7-shell-chip {
  font-family: var(--v7-font-mono);
  font-size: .68rem;
  letter-spacing: .03em;
  color: var(--v7-text-mid);
  background: rgba(148,163,216,.06);
  border: 1px solid var(--v7-stroke-hi);
  border-radius: 8px;
  padding: .26rem .62rem;
  cursor: pointer;
  transition: color .25s, border-color .25s, box-shadow .25s, transform .25s var(--v7-ease);
}
.v7-shell-chip:hover {
  color: var(--v7-text-hi);
  border-color: rgba(34,211,238,.55);
  box-shadow: 0 0 18px -6px rgba(34,211,238,.5);
  transform: translateY(-1px);
}
html.light .v7-shell-chip { background: rgba(30,41,82,.04); }
html.light .v7-shell-chip:hover { border-color: rgba(14,116,144,.55); box-shadow: 0 0 18px -8px rgba(14,116,144,.45); }

/* neofetch — ASCII art beside a key/val card */
.v7-nf {
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: .1rem 1.1rem;
  margin: .2rem 0;
  padding: .55rem .8rem;
  border: 1px solid var(--v7-stroke);
  border-radius: 10px;
  background: rgba(148,163,216,.04);
}
.v7-nf-art { color: var(--v7-cyan); line-height: 1.32; text-align: center; }
.v7-nf-art div { white-space: pre; }
.v7-nf > div:last-child { line-height: 1.62; }
.v7-nf .v7-d { letter-spacing: .02em; }
.v7-nf > div:last-child > div:first-child {
  color: var(--v7-text-hi);
  font-weight: 600;
  margin-bottom: .12rem;
}

/* mobile: 16px input stops iOS focus-zoom; chips are the fast path */
@media (max-width: 640px) {
  .v7-shell-input { font-size: 16px; }
  .v7-console-body { min-height: 0; }
  .v7-shell-log { max-height: 168px; padding: .9rem 1rem .35rem; }
  .v7-shell-input-row { padding: .55rem 1rem .85rem; }
  .v7-shell-chips { padding: .55rem 1rem .7rem; }
}
/* reduced motion + print safety */
@media (prefers-reduced-motion: reduce) {
  .v7-shell-chip { transition: none; }
  .v7-console:focus-within { box-shadow: none; }
}
@media print {
  .v7-shell-input-row, .v7-shell-chips { display: none; }
  .v7-shell-log { max-height: none; overflow: visible; }
}

/* proof chip crossfade (v19 cycling) */
.hero-proof-chip .hero-proof-text { transition: opacity .32s ease; }
.hero-proof-chip.proof-fading .hero-proof-text { opacity: 0; }

/* ─── v9.1 — mobile fold optimization ────────────────────────────── */
/* Measured at 390x844: CTA bottom sat at 895px (51px below fold).
   Trim the hero's vertical overhead so the primary CTA is visible
   without scrolling — the single highest-value mobile fix.        */