:root {
  --ink: #08131b;
  --ink-soft: #101f29;
  --paper: #f4f6f4;
  --paper-2: #e7f0ee;
  --lime: #17a394;
  --cyan: #3989c6;
  --brand-blue: #2262a5;
  --brand-teal: #20b7c1;
  --muted: #607079;
  --line: rgba(8, 19, 27, .14);
  --card-border: rgba(8, 19, 27, .08);
  --shadow-card: 0 14px 46px rgba(24, 59, 73, .07);
  --shadow-card-hover: 0 26px 62px rgba(24, 59, 73, .13);
  --lift: -5px;
  --radius-lg: 2rem;
  --radius-md: 1.25rem;
  --shadow: 0 28px 90px rgba(5, 12, 9, .14);
  --max: 1240px;
  --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Fraunces", ui-serif, Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.hero h1 span,
.about-intro h2 span,
.section-heading h2 span,
.publication-heading h2 span {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
}

button, a, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }

.skip-link {
  position: fixed; top: 1rem; left: 1rem; z-index: 200;
  transform: translateY(-180%); padding: .7rem 1rem; border-radius: 999px;
  background: var(--lime); color: var(--ink); font-weight: 750;
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: fixed; z-index: 100; top: 0; left: 50%; transform: translateX(-50%);
  width: min(calc(100% - 32px), var(--max)); height: 76px; padding: 0 22px;
  display: flex; align-items: center; justify-content: space-between;
  border: 1px solid transparent; border-radius: 0 0 1.25rem 1.25rem;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, height .3s ease;
}
.site-header.on-light { background: rgba(12,17,16,.85); border-color: rgba(255,255,255,.08); box-shadow: 0 12px 35px rgba(0,0,0,.12); backdrop-filter: blur(18px); }
.site-header.scrolled {
  top: 10px; height: 64px; border-color: rgba(255,255,255,.08); border-radius: 1rem;
  background: rgba(12,17,16,.8); box-shadow: 0 12px 35px rgba(0,0,0,.18);
  backdrop-filter: blur(18px);
}

.brand { display: inline-flex; gap: .7rem; align-items: center; color: #fff; }
.brand-mark { width: 42px; height: 42px; padding: 3px; display: grid; place-items: center; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 6px 22px rgba(0,0,0,.15); }
.brand-mark img { width: 100%; height: 100%; display: block; object-fit: contain; }
.brand-name { font-size: .91rem; font-weight: 850; letter-spacing: .16em; }
.desktop-nav { display: flex; gap: 2rem; color: rgba(255,255,255,.68); font-size: .88rem; }
.desktop-nav a { position: relative; transition: color .2s ease; }
.desktop-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -.5rem; height: 1px; background: var(--lime); transition: right .2s ease; }
.desktop-nav a:hover, .desktop-nav a:focus-visible, .desktop-nav a[aria-current="page"] { color: #fff; }
.desktop-nav a:hover::after, .desktop-nav a:focus-visible::after, .desktop-nav a[aria-current="page"]::after { right: 0; }
.mobile-menu a[aria-current="page"] { color: var(--lime); }
.menu-toggle { display: none; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); }
.menu-toggle span { display: block; width: 18px; height: 1px; margin: 5px auto; background: #fff; transition: transform .2s ease; }
.mobile-menu {
  position: fixed; z-index: 90; inset: 0; padding: 120px 28px 30px;
  background: rgba(12,17,16,.98); color: #fff;
}
.mobile-menu a { display: block; padding: 1.2rem 0; border-bottom: 1px solid rgba(255,255,255,.14); font-size: 1.5rem; }

.section { position: relative; padding: 120px max(24px, calc((100vw - var(--max)) / 2)); }
.eyebrow { margin: 0 0 1.25rem; display: flex; align-items: center; gap: .65rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 750; font-size: .72rem; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 5px rgba(23,163,148,.13); }
.hero {
  min-height: 900px; height: 100vh; max-height: 1040px; padding-top: 160px; padding-bottom: 92px;
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(460px, .98fr); align-items: center; gap: 5vw;
  color: #fff; background: var(--ink); overflow: hidden;
}
.hero-grid { position: absolute; inset: 0; opacity: .14; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 70px 70px; mask-image: linear-gradient(to bottom, black, transparent 70%); }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(100px); opacity: .13; pointer-events: none; }
.glow-a { width: 480px; height: 480px; right: 4%; top: 10%; background: #46cff7; }
.glow-b { width: 380px; height: 380px; left: 24%; bottom: -16%; background: #20b8c2; }
.hero-copy, .hero-visual { position: relative; z-index: 2; }
.hero h1 { max-width: 760px; margin: 0; font-size: clamp(3.8rem, 6.4vw, 7.1rem); line-height: .9; letter-spacing: -.065em; font-weight: 650; }
.hero h1 span { color: var(--lime); }
.hero-lede { max-width: 670px; margin: 2.3rem 0 2.2rem; color: rgba(255,255,255,.64); font-size: clamp(1.05rem, 1.45vw, 1.3rem); line-height: 1.65; }
.hero-actions { display: flex; align-items: center; gap: 1.5rem; }
.button { min-height: 54px; padding: 0 1.35rem; border: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: .8rem; font-weight: 760; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--lime); color: var(--ink); box-shadow: 0 12px 40px rgba(23,163,148,.16); }
.button-primary:hover { box-shadow: 0 16px 50px rgba(23,163,148,.3); }
.button svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.text-link { color: rgba(255,255,255,.78); font-size: .93rem; border-bottom: 1px solid rgba(255,255,255,.22); padding-bottom: 4px; }
.text-link span { color: var(--lime); }
.trust-line { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 3.6rem; }
.trust-line span { padding: .6rem .85rem; border: 1px solid rgba(255,255,255,.11); border-radius: 999px; color: rgba(255,255,255,.45); font-size: .73rem; }

.system-card { width: 100%; max-width: 580px; margin-left: auto; overflow: hidden; border: 1px solid rgba(255,255,255,.11); border-radius: 1.7rem; background: rgba(23,32,29,.74); box-shadow: 0 45px 100px rgba(0,0,0,.38); backdrop-filter: blur(18px); }
.system-topbar { height: 58px; padding: 0 1.3rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.42); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; }
.live-indicator { display: flex; align-items: center; gap: .45rem; }
.live-indicator i { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 12px var(--lime); }
.system-stage { position: relative; height: 420px; }
.connections { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.connections path { fill: none; stroke: rgba(115,229,255,.22); stroke-width: 1.3; stroke-dasharray: 4 7; animation: dash 14s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -220; } }
.system-node { position: absolute; z-index: 3; min-width: 122px; padding: .7rem .8rem; display: flex; align-items: center; gap: .6rem; border: 1px solid rgba(255,255,255,.12); border-radius: .8rem; color: rgba(255,255,255,.62); background: rgba(10,15,13,.85); font-size: .72rem; cursor: pointer; transition: border-color .2s ease, color .2s ease, transform .2s ease, background .2s ease; }
.system-node:hover, .system-node.active { color: #fff; border-color: rgba(23,163,148,.55); background: rgba(23,163,148,.08); transform: translateY(-2px); }
.node-icon { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.06); color: var(--lime); font-family: ui-monospace, monospace; font-size: .57rem; }
.node-data { top: 60px; left: 24px; }
.node-model { top: 60px; right: 24px; }
.node-ops { left: 24px; bottom: 55px; }
.node-people { right: 24px; bottom: 55px; }
.system-core { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 154px; height: 154px; display: grid; place-items: center; border: 1px solid rgba(23,163,148,.38); border-radius: 50%; background: radial-gradient(circle, rgba(23,163,148,.2), rgba(8,19,27,.65) 66%); box-shadow: 0 0 60px rgba(23,163,148,.1); }
.core-ring { position: absolute; inset: -14px; border: 1px dashed rgba(115,229,255,.3); border-radius: 50%; animation: spin 16s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.core-label { text-align: center; color: var(--lime); letter-spacing: .14em; font-family: ui-monospace, monospace; font-size: .64rem; line-height: 1.45; }
.system-readout { min-height: 76px; padding: 1rem 1.3rem; display: grid; grid-template-columns: 140px 1fr; align-items: center; gap: 1rem; border-top: 1px solid rgba(255,255,255,.08); }
.readout-label { color: var(--lime); font-size: .77rem; font-weight: 720; }
.readout-copy { color: rgba(255,255,255,.45); font-size: .75rem; line-height: 1.45; }
.scroll-cue { position: absolute; z-index: 2; left: max(24px, calc((100vw - var(--max)) / 2)); bottom: 28px; display: inline-flex; align-items: center; gap: .7rem; color: rgba(255,255,255,.38); font-size: .68rem; text-transform: uppercase; letter-spacing: .13em; }
.scroll-cue span { width: 26px; height: 42px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; position: relative; }
.scroll-cue span::after { content: ""; position: absolute; top: 8px; left: 50%; width: 3px; height: 7px; border-radius: 3px; background: var(--lime); transform: translateX(-50%); animation: scroll 1.8s ease infinite; }
@keyframes scroll { 0%,100% { transform: translate(-50%,0); opacity: .3; } 45% { transform: translate(-50%,13px); opacity: 1; } }

.about { background: #eaf3f4; }
.about-layout { display: grid; grid-template-columns: 1.08fr .92fr; gap: 7rem; align-items: end; }
.about-intro h2 { max-width: 780px; margin: 0; font-size: clamp(3.2rem, 5.7vw, 6.2rem); line-height: .95; letter-spacing: -.06em; font-weight: 600; }
.about-intro h2 span { color: var(--brand-blue); }
.about-story { padding-bottom: .35rem; }
.about-story p { margin: 0; color: var(--muted); font-size: 1.03rem; line-height: 1.8; }
.about-story p + p { margin-top: 1.2rem; }
.about-showcase { margin-top: 5rem; display: grid; grid-template-columns: 1.45fr .55fr; min-height: 340px; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.about-brand-panel { position: relative; padding: 2rem; display: flex; align-items: center; justify-content: center; background: #fff; }
.about-brand-panel::after { content: ""; position: absolute; width: 260px; height: 260px; right: -60px; top: -90px; border-radius: 50%; background: rgba(23,163,148,.12); filter: blur(30px); }
.about-brand-panel > span { position: absolute; top: 1.5rem; left: 1.6rem; color: var(--muted); font-size: .66rem; text-transform: uppercase; letter-spacing: .13em; }
.about-brand-panel img { position: relative; z-index: 1; width: min(680px, 90%); max-height: 250px; object-fit: contain; }
.experience-card { padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; color: #fff; background: linear-gradient(145deg, var(--brand-blue), #163d75); }
.experience-card strong { font-size: clamp(6rem, 10vw, 10rem); line-height: .82; letter-spacing: -.09em; font-weight: 600; }
.experience-card strong span { color: var(--lime); }
.experience-card p { max-width: 250px; margin: 2rem 0 0; color: rgba(255,255,255,.72); line-height: 1.5; }
.about-values { margin-top: 1.2rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.about-values article { min-height: 230px; padding: 2rem; border: 1px solid var(--card-border); border-radius: var(--radius-md); background: rgba(255,255,255,.6); box-shadow: var(--shadow-card); transition: transform .28s ease, box-shadow .28s ease; }
.about-values article:hover { transform: translateY(var(--lift)); box-shadow: var(--shadow-card-hover); }
.about-values article > span { color: var(--brand-teal); font-family: ui-monospace, monospace; font-size: .7rem; }
.about-values h3 { margin: 3.5rem 0 .75rem; font-size: 1.35rem; letter-spacing: -.025em; }
.about-values p { margin: 0; color: var(--muted); line-height: 1.62; font-size: .88rem; }

.capabilities { background: var(--paper); }
.section-heading { max-width: 780px; margin-bottom: 4.5rem; }
.section-heading h2 { margin: 0; font-size: clamp(3rem, 5.4vw, 5.6rem); line-height: .98; letter-spacing: -.055em; font-weight: 600; }
.section-heading h2 span { color: var(--muted); }
.section-heading > p:last-child { max-width: 590px; margin: 1.6rem 0 0; color: var(--muted); line-height: 1.65; }
.capability-explorer { display: grid; grid-template-columns: .72fr 1.28fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.capability-tabs { padding: 1.5rem 2.5rem 1.5rem 0; border-right: 1px solid var(--line); }
.capability-tabs button { width: 100%; padding: 1.35rem .4rem; display: flex; align-items: center; gap: 1rem; border: 0; border-bottom: 1px solid var(--line); color: var(--muted); background: transparent; text-align: left; cursor: pointer; transition: color .2s ease, padding-left .2s ease; }
.capability-tabs button:last-child { border-bottom: 0; }
.capability-tabs button span { color: #9ca49f; font-family: ui-monospace, monospace; font-size: .68rem; }
.capability-tabs button[aria-selected="true"] { padding-left: .8rem; color: var(--ink); font-weight: 760; }
.capability-tabs button[aria-selected="true"] span { color: var(--brand-blue); }
.capability-panel { min-height: 550px; padding: 3.6rem 0 3.6rem 4rem; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 4rem; }
.panel-copy { transition: opacity .18s ease, transform .18s ease; }
.panel-copy.changing { opacity: 0; transform: translateY(8px); }
.panel-kicker { color: var(--brand-blue); font-size: .75rem; text-transform: uppercase; letter-spacing: .13em; font-weight: 760; }
.panel-copy h3 { max-width: 520px; margin: .8rem 0 1.2rem; font-size: clamp(2.2rem, 3.5vw, 3.8rem); line-height: 1; letter-spacing: -.045em; font-weight: 630; }
.panel-copy > p:not(.panel-kicker) { max-width: 530px; color: var(--muted); line-height: 1.7; }
.panel-copy ul { margin: 2rem 0 0; padding: 0; list-style: none; }
.panel-copy li { padding: .82rem 0; display: flex; gap: .8rem; align-items: center; border-bottom: 1px solid var(--line); color: #3e4944; font-size: .9rem; }
.panel-copy li::before { content: "↗"; color: var(--brand-blue); }
.panel-demo { position: relative; min-height: 390px; padding: 1.2rem; overflow: hidden; border-radius: 1.5rem; color: #fff; background: var(--ink-soft); box-shadow: var(--shadow); }
.panel-demo::before { content: ""; position: absolute; width: 250px; height: 250px; right: -80px; top: -80px; border-radius: 50%; background: var(--cyan); filter: blur(80px); opacity: .14; }
.demo-header { position: relative; display: flex; gap: 6px; align-items: center; }
.demo-header > span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.24); }
.demo-header b { margin-left: auto; color: rgba(255,255,255,.45); font-family: ui-monospace, monospace; font-size: .62rem; font-weight: 500; }
.demo-graph { position: relative; height: 220px; margin-top: 2.3rem; display: flex; gap: 8px; align-items: end; border-bottom: 1px solid rgba(255,255,255,.1); }
.demo-graph::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, transparent, transparent 53px, rgba(255,255,255,.05) 54px); }
.demo-graph i { z-index: 1; width: 100%; height: var(--h); border-radius: 6px 6px 0 0; background: linear-gradient(to top, rgba(23,163,148,.12), var(--lime)); opacity: .75; transform-origin: bottom; animation: rise .8s ease both; }
@keyframes rise { from { transform: scaleY(0); } }
.demo-result { position: relative; margin-top: 1.3rem; display: grid; grid-template-columns: 1fr auto; gap: .55rem; align-items: end; }
.demo-result span { color: rgba(255,255,255,.48); font-size: .72rem; }
.demo-result strong { color: var(--lime); font-size: 1.25rem; }
.confidence-track { grid-column: 1 / -1; height: 3px; overflow: hidden; border-radius: 3px; background: rgba(255,255,255,.12); }
.confidence-track i { display: block; height: 100%; width: 92%; background: var(--lime); transition: width .45s ease; }

.publications { overflow: hidden; background: #dfeaec; }
.publications::before { content: ""; position: absolute; width: 620px; height: 620px; right: -270px; top: -270px; border: 1px solid rgba(34,98,165,.12); border-radius: 50%; box-shadow: 0 0 0 70px rgba(34,98,165,.025), 0 0 0 140px rgba(34,98,165,.02); pointer-events: none; }
.publication-heading { position: relative; display: grid; grid-template-columns: 1.2fr .8fr; gap: 6rem; align-items: end; }
.publication-heading h2 { max-width: 850px; margin: 0; font-size: clamp(3rem, 5.4vw, 5.8rem); line-height: .96; letter-spacing: -.058em; font-weight: 600; }
.publication-heading h2 span { color: var(--brand-blue); }
.publication-heading > p { max-width: 520px; margin: 0 0 .4rem; color: var(--muted); line-height: 1.75; }
.publication-filter { position: relative; margin: 4rem 0 1.2rem; display: flex; gap: .6rem; flex-wrap: wrap; }
.publication-filter button { padding: .68rem .9rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.42); cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease; }
.publication-filter button:hover { transform: translateY(-1px); color: var(--ink); }
.publication-filter button[aria-pressed="true"] { border-color: var(--brand-blue); color: #fff; background: var(--brand-blue); }
.publication-grid { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.publication-card { min-height: 390px; padding: 2rem; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; border: 1px solid var(--card-border); border-radius: var(--radius-lg); background: rgba(255,255,255,.74); box-shadow: var(--shadow-card); transition: transform .28s ease, box-shadow .28s ease; }
.publication-card:hover { transform: translateY(var(--lift)); box-shadow: var(--shadow-card-hover); }
.publication-card[hidden] { display: none; }
.publication-featured { display: grid; grid-template-columns: .8fr 1.2fr; gap: 2rem; color: #fff; background: linear-gradient(145deg, #0c2637, #123e5e 70%, #1f5f84); }
.publication-art { position: relative; min-height: 300px; display: grid; place-items: center; }
.orbit { position: absolute; border: 1px dashed rgba(23,163,148,.35); border-radius: 50%; animation: spin 18s linear infinite; }
.orbit::before { content: ""; position: absolute; top: 7%; left: 20%; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 18px var(--lime); }
.orbit-one { width: 235px; height: 235px; }
.orbit-two { width: 150px; height: 150px; animation-direction: reverse; animation-duration: 12s; }
.orbit-two::before { top: auto; left: auto; right: 4%; bottom: 19%; background: #8ccaf4; }
.orbit-core { width: 84px; height: 84px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.17); border-radius: 50%; color: var(--lime); background: rgba(3,13,20,.48); font-family: ui-monospace, monospace; letter-spacing: .14em; }
.publication-content { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; }
.publication-meta { display: flex; gap: .55rem; flex-wrap: wrap; }
.publication-meta span { padding: .42rem .62rem; border: 1px solid currentColor; border-radius: 999px; color: var(--muted); opacity: .72; font-size: .58rem; text-transform: uppercase; letter-spacing: .09em; }
.publication-featured .publication-meta span { color: rgba(255,255,255,.65); }
.publication-content h3 { max-width: 580px; margin: 1.3rem 0 .9rem; font-size: clamp(2rem, 3.4vw, 3.6rem); line-height: 1; letter-spacing: -.045em; font-weight: 620; }
.publication-card:not(.publication-featured) .publication-content h3 { font-size: clamp(2rem, 3vw, 3rem); }
.publication-content p { max-width: 560px; margin: 0; color: var(--muted); line-height: 1.65; }
.publication-featured .publication-content p { color: rgba(255,255,255,.58); }
.publication-index { color: var(--brand-blue); font-family: ui-monospace, monospace; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; }
.publication-status { margin-top: 2rem; display: inline-flex; align-items: center; gap: .65rem; color: var(--brand-blue); font-size: .72rem; font-weight: 740; text-transform: uppercase; letter-spacing: .1em; }
.publication-featured .publication-status { color: var(--lime); }
.publication-status i { width: 28px; height: 1px; background: currentColor; }
.publication-footer { margin-top: 1.2rem; padding: 1.6rem 2rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(255,255,255,.45); }
.publication-footer p { margin: 0; color: var(--muted); }
.publication-footer a { padding-bottom: .35rem; border-bottom: 1px solid rgba(34,98,165,.32); color: var(--brand-blue); font-weight: 740; }

.work { color: #fff; background: var(--ink); }
.work-heading { max-width: none; display: grid; grid-template-columns: 1.3fr .7fr; align-items: end; gap: 5rem; }
.work-heading > p { margin-bottom: .5rem !important; }
.project-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
.project-card { min-width: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-lg); background: #151b19; cursor: pointer; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.project-card:hover, .project-card:focus-visible { transform: translateY(var(--lift)); border-color: rgba(23,163,148,.45); box-shadow: 0 30px 70px rgba(0,0,0,.26); outline: none; }
.project-featured { grid-column: 1 / -1; display: grid; grid-template-columns: 1.2fr .8fr; }
.project-visual { position: relative; min-height: 330px; overflow: hidden; }
.project-featured .project-visual { min-height: 470px; }
.project-content { padding: 2.2rem; }
.project-featured .project-content { padding: 4rem; display: flex; flex-direction: column; justify-content: center; }
.project-meta { display: flex; flex-wrap: wrap; gap: .55rem; }
.project-meta span { padding: .45rem .65rem; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; color: rgba(255,255,255,.43); font-size: .63rem; text-transform: uppercase; letter-spacing: .08em; }
.project-content h3 { margin: 1.4rem 0 .8rem; font-size: clamp(2.2rem, 3.7vw, 4.3rem); line-height: .95; letter-spacing: -.05em; }
.project-card:not(.project-featured) h3 { font-size: 2.5rem; }
.project-content p { margin: 0; color: rgba(255,255,255,.52); line-height: 1.65; }
.project-link { width: fit-content; margin-top: 2rem; padding: 0 0 .4rem; border-bottom: 1px solid rgba(23,163,148,.4); color: var(--lime); cursor: pointer; }
.visual-somlink { background: linear-gradient(145deg, #133d57, #08151f 72%); }
.route-map { position: absolute; inset: 0; }
.route-map svg { position: absolute; inset: 10% 4%; width: 92%; height: 80%; fill: none; stroke: var(--lime); stroke-width: 2; }
.route-map .route-secondary { stroke: var(--cyan); opacity: .34; }
.route-map circle { fill: var(--lime); stroke: #fff; stroke-width: 2; }
.metric-tile { position: absolute; width: 145px; padding: 1rem; border: 1px solid rgba(255,255,255,.12); border-radius: 1rem; background: rgba(12,17,16,.78); backdrop-filter: blur(12px); }
.metric-tile small { display: block; margin-bottom: .4rem; color: rgba(255,255,255,.4); font-size: .65rem; }
.metric-tile strong { color: #fff; font-size: .84rem; }
.metric-a { top: 19%; left: 9%; }.metric-b { right: 8%; bottom: 17%; }
.case-logo { position: absolute; z-index: 6; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.56); border-radius: 1rem; background: rgba(255,255,255,.94); box-shadow: 0 14px 40px rgba(0,0,0,.15); backdrop-filter: blur(10px); }
.case-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.case-logo-somlink { top: 2rem; left: 2rem; width: min(280px, 52%); height: 92px; padding: 1.2rem; }
.case-logo-novajob { top: 1.6rem; left: 50%; width: min(270px, 70%); height: 92px; padding: 1.25rem; transform: translateX(-50%); }
.case-logo-vdb { top: 1.6rem; left: 50%; width: min(235px, 66%); height: 92px; padding: 1.1rem; transform: translateX(-50%); }
.visual-novajob { background: linear-gradient(145deg, #fff1d7, #f0a531); }
.candidate-stack { position: absolute; inset: 0; }
.candidate-card { position: absolute; width: 50%; height: 46%; padding: 1.3rem; border: 1px solid rgba(255,255,255,.48); border-radius: 1.1rem; background: rgba(255,255,255,.73); box-shadow: 0 18px 50px rgba(36,26,87,.18); }
.candidate-card span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--lime); font-size: .7rem; }
.candidate-card i { display: block; width: 66%; height: 7px; margin-top: 1rem; border-radius: 8px; background: rgba(12,17,16,.13); }
.candidate-card i:last-child { width: 43%; margin-top: .5rem; }
.c-one { top: 16%; left: 13%; transform: rotate(-6deg); }.c-two { top: 22%; right: 12%; transform: rotate(5deg); }.c-three { bottom: -12%; left: 26%; transform: rotate(1deg); }
.match-chip { position: absolute; z-index: 5; left: 50%; bottom: 15%; transform: translateX(-50%); padding: .75rem 1rem; border-radius: 999px; color: #fff; background: var(--ink); font-size: .72rem; box-shadow: 0 12px 30px rgba(0,0,0,.2); }
.match-chip b { margin-left: .5rem; color: var(--lime); }
.visual-vdb { background: linear-gradient(150deg, #d9f3f5, #75c7da); }
.insight-ui { position: absolute; inset: 14% 10% -5%; display: grid; grid-template-columns: 20% 80%; overflow: hidden; border: 1px solid rgba(255,255,255,.65); border-radius: 1.2rem 1.2rem 0 0; color: var(--ink); background: rgba(255,255,255,.78); box-shadow: 0 24px 55px rgba(29,78,67,.2); }
.insight-sidebar { padding: 1rem .6rem; border-right: 1px solid rgba(12,17,16,.1); }
.insight-sidebar i { display: block; height: 7px; margin-bottom: .8rem; border-radius: 8px; background: rgba(12,17,16,.12); }
.insight-main { padding: 1.5rem; font-size: .72rem; font-weight: 700; }
.insight-line { height: 1px; margin: 1rem 0; background: rgba(12,17,16,.1); }
.insight-bars { height: 130px; display: flex; gap: .45rem; align-items: end; }
.insight-bars i { flex: 1; border-radius: 5px 5px 0 0; background: #6a7dff; }
.insight-bars i:nth-child(1) { height: 28%; }.insight-bars i:nth-child(2) { height: 62%; }.insight-bars i:nth-child(3) { height: 44%; }.insight-bars i:nth-child(4) { height: 86%; }.insight-bars i:nth-child(5) { height: 71%; }
.client-line { margin: 5rem 0; padding: 2rem 0; display: flex; align-items: center; justify-content: space-between; gap: 2rem; border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); }
.client-line > span { color: rgba(255,255,255,.34); font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; }
.client-line div { display: flex; gap: 2.1rem; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.client-line img { width: auto; max-width: 125px; height: 25px; object-fit: contain; filter: saturate(.82) brightness(1.15); }
.client-line img:nth-child(2) { height: 22px; }
.client-logo-vdb { width: 190px; height: 58px; padding: .6rem 1rem; display: grid; place-items: center; border-radius: .75rem; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.client-logo-vdb img { width: 100%; max-width: none; height: 100%; filter: none; }
.contact-panel { padding: 4rem; border-radius: var(--radius-lg); display: grid; grid-template-columns: 1.25fr .75fr; align-items: end; gap: 4rem; color: #fff; background: linear-gradient(135deg, var(--brand-blue), #194980 66%, #14355f); }
.contact-panel h2 { max-width: 700px; margin: 0; font-size: clamp(2.8rem, 5vw, 5.4rem); line-height: .95; letter-spacing: -.05em; }
.contact-copy { max-width: 590px; margin: 1.5rem 0 0; color: rgba(255,255,255,.68); line-height: 1.65; }
.contact-actions { display: flex; flex-direction: column; align-items: stretch; gap: .75rem; }
.contact-actions .button { width: 100%; }
.button-light { flex: 0 0 auto; background: #fff; color: var(--brand-blue); }
.button-outline { border: 1px solid rgba(255,255,255,.34); color: #fff; background: rgba(255,255,255,.05); }
.brief-link { padding: .75rem; border: 0; color: rgba(255,255,255,.68); background: transparent; text-align: center; cursor: pointer; }
.brief-link:hover, .brief-link:focus-visible { color: #fff; }

.news { position: relative; overflow: hidden; background: var(--paper); }
.news::before { content: ""; position: absolute; width: 560px; height: 560px; left: -260px; bottom: -260px; border: 1px solid rgba(34,98,165,.1); border-radius: 50%; box-shadow: 0 0 0 70px rgba(34,98,165,.02); pointer-events: none; }
.news-heading { position: relative; margin-bottom: 3rem; display: grid; grid-template-columns: 1.2fr .8fr; gap: 6rem; align-items: end; }
.news-heading h2 { max-width: 850px; margin: 0; font-size: clamp(3rem, 5.4vw, 5.8rem); line-height: .96; letter-spacing: -.058em; font-weight: 600; }
.news-heading h2 span { color: var(--brand-blue); }
.news-heading > p { max-width: 520px; margin: 0 0 .4rem; color: var(--muted); line-height: 1.75; }
.news-card { position: relative; border: 1px solid var(--card-border); border-radius: var(--radius-lg); background: rgba(255,255,255,.78); box-shadow: var(--shadow-card); cursor: pointer; transition: transform .28s ease, box-shadow .28s ease, border-color .2s ease; }
.news-card:hover, .news-card:focus-within { transform: translateY(var(--lift)); box-shadow: var(--shadow-card-hover); border-color: var(--brand-blue); }
.news-card-hit { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.news-card-hit:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 3px; border-radius: var(--radius-lg); }
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.news-grid .news-card { padding: 1.7rem; }
.news-content { display: flex; flex-direction: column; align-items: flex-start; }
.news-meta { display: flex; gap: .55rem; flex-wrap: wrap; }
.news-meta span { padding: .42rem .62rem; border: 1px solid currentColor; border-radius: 999px; color: var(--muted); opacity: .72; font-size: .58rem; text-transform: uppercase; letter-spacing: .09em; }
.news-content h3 { max-width: 520px; margin: 1rem 0 .7rem; font-size: 1.5rem; line-height: 1.22; letter-spacing: -.03em; font-weight: 640; }
.news-content p { max-width: 480px; margin: 0; color: var(--muted); line-height: 1.6; font-size: .92rem; }
.news-link { margin-top: 1.4rem; display: inline-flex; align-items: center; gap: .5rem; color: var(--brand-blue); font-size: .78rem; font-weight: 740; text-transform: uppercase; letter-spacing: .08em; }
.news .contact-panel { margin-top: 5rem; }

.article-back { position: relative; display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 2.5rem; color: var(--muted); font-size: .85rem; font-weight: 640; transition: color .2s ease; }
.article-back:hover { color: var(--ink); }
.article-content { position: relative; max-width: 760px; }
.article-meta { display: flex; gap: .55rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.article-meta span { padding: .42rem .62rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .62rem; text-transform: uppercase; letter-spacing: .09em; }
.article-title { max-width: 720px; margin: 0 0 2.2rem; font-size: clamp(2.3rem, 4.6vw, 4rem); line-height: 1.05; letter-spacing: -.045em; font-weight: 640; }
.article-body { max-width: 700px; }
.article-body p { margin: 0 0 1.3rem; color: var(--muted); font-size: 1.05rem; line-height: 1.8; }
.article-body p:last-child { margin-bottom: 0; }
.article-next { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.article-next .news-link { margin-top: 0; }

.site-footer { padding: 3rem max(24px, calc((100vw - var(--max)) / 2)); display: grid; grid-template-columns: 1fr auto auto; gap: 2rem; align-items: center; color: rgba(255,255,255,.5); background: var(--ink); border-top: 1px solid rgba(255,255,255,.08); font-size: .75rem; }
.footer-brand { color: #fff; }
.copyright { text-align: right; }

dialog { color: var(--ink); }
dialog::backdrop { background: rgba(5,8,7,.78); backdrop-filter: blur(8px); }
.project-dialog, .brief-dialog { width: min(680px, calc(100% - 28px)); max-height: min(780px, calc(100vh - 28px)); padding: 3.5rem; border: 0; border-radius: 1.7rem; background: var(--paper); box-shadow: 0 40px 100px rgba(0,0,0,.45); overflow-y: auto; }
.project-dialog[open], .brief-dialog[open] { animation: dialog-in .25s ease both; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.dialog-close { position: absolute; top: 1.2rem; right: 1.2rem; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: transparent; font-size: 1.5rem; cursor: pointer; }
.dialog-mark { width: 180px; height: 78px; margin-bottom: 2rem; padding: 1rem; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 1rem; background: #fff; }
.dialog-mark img { width: 100%; height: 100%; display: block; object-fit: contain; }
.project-dialog h2, .brief-dialog h2 { margin: .5rem 0 1rem; font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: .95; letter-spacing: -.05em; }
.dialog-summary { color: var(--muted); line-height: 1.65; }
.dialog-grid { margin-top: 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.dialog-grid > div { padding: 1.3rem; border: 1px solid var(--line); border-radius: 1rem; }
.dialog-grid small, .brief-result small { color: var(--brand-blue); text-transform: uppercase; letter-spacing: .11em; font-size: .62rem; font-weight: 760; }
.dialog-grid p { margin: .7rem 0 0; line-height: 1.55; font-size: .88rem; }
.dialog-footer { margin-top: 2.5rem; padding-top: 1.2rem; display: flex; justify-content: space-between; border-top: 1px solid var(--line); color: var(--muted); font-size: .7rem; }
.dialog-footer button { border: 0; background: transparent; font-weight: 760; cursor: pointer; }
.brief-options { margin: 2rem 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.brief-options button { padding: .7rem .9rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; cursor: pointer; }
.brief-options button[aria-checked="true"] { border-color: var(--ink); color: #fff; background: var(--ink); }
.brief-label { display: block; margin-bottom: .6rem; font-weight: 720; font-size: .85rem; }
.brief-label span { color: var(--muted); font-weight: 500; }
.brief-dialog textarea { width: 100%; resize: vertical; padding: 1rem; border: 1px solid var(--line); border-radius: 1rem; color: var(--ink); background: #fff; line-height: 1.5; outline: none; }
.brief-dialog textarea:focus { border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(34,98,165,.12); }
.brief-result { margin-top: 1rem; padding: 1rem; border-radius: 1rem; background: var(--paper-2); }
.brief-result p { margin: .5rem 0 0; line-height: 1.55; font-size: .86rem; }
.brief-action { margin-top: 1.2rem; }
.copy-status { min-height: 1rem; margin: .65rem 0 0; color: var(--brand-blue); font-size: .74rem; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.8,.28,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.project-grid .reveal:nth-child(2) { transition-delay: .08s; }
.project-grid .reveal:nth-child(3) { transition-delay: .16s; }

@media (max-width: 1040px) {
  .hero { min-height: auto; height: auto; max-height: none; grid-template-columns: 1fr; padding-top: 150px; padding-bottom: 120px; }
  .hero-copy { max-width: 800px; }
  .hero-visual { width: min(700px, 100%); margin: 2rem auto 0; }
  .system-card { max-width: none; }
  .about-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-showcase { grid-template-columns: 1.15fr .85fr; }
  .publication-heading { grid-template-columns: 1fr; gap: 2rem; }
  .publication-featured { grid-template-columns: 1fr; }
  .publication-art { min-height: 230px; }
  .news-heading { grid-template-columns: 1fr; gap: 2rem; }
  .news-grid { grid-template-columns: repeat(2, 1fr); }
  .capability-panel { padding-left: 2rem; grid-template-columns: 1fr; gap: 2rem; }
  .panel-demo { min-height: 340px; }
  .work-heading { grid-template-columns: 1fr; gap: 1rem; }
}

@media (max-width: 760px) {
  .site-header { width: calc(100% - 20px); padding: 0 14px; }
  .desktop-nav { display: none; }
  .menu-toggle { display: block; }
  .section { padding: 88px 20px; }
  .hero { padding-top: 132px; padding-bottom: 90px; }
  .hero h1 { font-size: clamp(3.1rem, 15vw, 5.1rem); }
  .hero-lede { margin-top: 1.6rem; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .trust-line { margin-top: 2.6rem; }
  .system-stage { height: 350px; }
  .system-node { min-width: 105px; padding: .6rem; font-size: .62rem; }
  .node-data, .node-ops { left: 12px; }
  .node-model, .node-people { right: 12px; }
  .system-core { width: 120px; height: 120px; }
  .system-readout { grid-template-columns: 1fr; gap: .3rem; }
  .scroll-cue { display: none; }
  .section-heading { margin-bottom: 3rem; }
  .about-intro h2 { font-size: clamp(2.9rem, 13vw, 4.6rem); }
  .about-showcase { margin-top: 3rem; grid-template-columns: 1fr; }
  .about-brand-panel { min-height: 290px; }
  .experience-card { min-height: 300px; }
  .about-values { grid-template-columns: 1fr; }
  .about-values article { min-height: 190px; }
  .about-values h3 { margin-top: 2.5rem; }
  .publication-heading h2 { font-size: clamp(2.8rem, 13vw, 4.5rem); }
  .publication-filter { margin-top: 3rem; flex-wrap: nowrap; overflow-x: auto; padding-bottom: .5rem; scrollbar-width: none; }
  .publication-filter button { flex: 0 0 auto; }
  .publication-grid { grid-template-columns: 1fr; }
  .publication-card { min-height: 350px; }
  .news-heading h2 { font-size: clamp(2.8rem, 13vw, 4.5rem); }
  .news-grid { grid-template-columns: 1fr; }
  .news-grid .news-card { padding: 1.4rem; }
  .publication-footer { align-items: flex-start; flex-direction: column; }
  .section-heading h2 { font-size: clamp(2.75rem, 13vw, 4.3rem); }
  .capability-explorer { grid-template-columns: 1fr; }
  .capability-tabs { padding: 0; display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); scrollbar-width: none; }
  .capability-tabs button { flex: 0 0 auto; width: auto; min-width: 170px; border-right: 1px solid var(--line); border-bottom: 0; }
  .capability-tabs button[aria-selected="true"] { padding-left: .4rem; }
  .capability-panel { min-height: auto; padding: 2.4rem 0; }
  .panel-demo { min-height: 320px; }
  .project-grid { grid-template-columns: 1fr; }
  .project-featured { grid-column: auto; display: block; }
  .project-featured .project-visual { min-height: 350px; }
  .case-logo-somlink { top: 1.2rem; left: 1.2rem; width: 60%; }
  .project-featured .project-content, .project-content { padding: 1.7rem; }
  .client-line { align-items: flex-start; flex-direction: column; }
  .client-line div { justify-content: flex-start; gap: 1.3rem; }
  .contact-panel { padding: 2.2rem; grid-template-columns: 1fr; align-items: flex-start; gap: 2rem; }
  .contact-actions { width: 100%; }
  .site-footer { grid-template-columns: 1fr; gap: 1rem; }
  .copyright { text-align: left; }
  .project-dialog, .brief-dialog { padding: 3.8rem 1.5rem 1.8rem; }
  .dialog-grid { grid-template-columns: 1fr; }
}

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