:root {
  --ink: #10203d;
  --muted: #5f6f86;
  --blue: #245fd6;
  --violet: #7139d5;
  --orange: #ed6b2c;
  --line: #dce5f3;
  --paper: #ffffff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #fbfcff; font-family: Inter, "Avenir Next", "Segoe UI", sans-serif; line-height: 1.6; }
a { color: inherit; text-decoration: none; }

.topbar { position: sticky; top: 0; z-index: 20; height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 0 max(24px, calc((100vw - 1180px) / 2)); border-bottom: 1px solid rgba(220, 229, 243, .9); background: rgba(251, 252, 255, .88); backdrop-filter: blur(16px); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.02em; }
.brand-mark { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: white; background: linear-gradient(145deg, var(--blue), var(--violet)); box-shadow: 0 8px 20px rgba(36, 95, 214, .24); }
.nav-links { display: flex; gap: 28px; color: var(--muted); font-size: 14px; font-weight: 650; }
.nav-links a:hover { color: var(--blue); }

.hero { position: relative; overflow: hidden; padding: 92px 24px 56px; text-align: center; background: linear-gradient(rgba(36,95,214,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(36,95,214,.045) 1px, transparent 1px); background-size: 36px 36px; }
.hero-glow { position: absolute; border-radius: 999px; filter: blur(10px); opacity: .36; pointer-events: none; }
.hero-glow-one { width: 430px; height: 280px; left: -120px; top: 20px; background: radial-gradient(circle, #aac8ff, transparent 68%); }
.hero-glow-two { width: 460px; height: 300px; right: -130px; top: 40px; background: radial-gradient(circle, #d7b8ff, transparent 68%); }
.paper-kicker, .eyebrow { position: relative; display: inline-block; color: var(--blue); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.hero h1 { position: relative; margin: 20px auto 0; max-width: 980px; letter-spacing: -.045em; }
.hero h1 > span { display: block; font-size: clamp(62px, 9vw, 112px); line-height: .95; color: transparent; background: linear-gradient(110deg, #0c336f 15%, var(--blue) 53%, var(--violet)); background-clip: text; }
.hero h1 small { display: block; margin-top: 22px; font-size: clamp(24px, 3.2vw, 42px); line-height: 1.16; font-weight: 720; }
.hero-copy { position: relative; max-width: 760px; margin: 24px auto 0; color: var(--muted); font-size: 18px; }
.publication-links { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.pill-link { display: inline-flex; align-items: center; gap: 11px; min-width: 148px; padding: 10px 16px; border: 1px solid #cfdcf0; border-radius: 999px; background: rgba(255,255,255,.9); box-shadow: 0 8px 24px rgba(33, 69, 126, .08); text-align: left; transition: transform .18s ease, border-color .18s ease; }
.pill-link:hover { transform: translateY(-2px); border-color: var(--blue); }
.pill-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #edf3ff; color: var(--blue); font-weight: 800; font-size: 13px; }
.pill-link strong, .pill-link small { display: block; line-height: 1.15; }
.pill-link strong { font-size: 14px; }
.pill-link small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.metric-strip { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); max-width: 900px; margin: 60px auto 0; border: 1px solid rgba(202,216,239,.9); border-radius: 18px; background: rgba(255,255,255,.8); box-shadow: 0 14px 40px rgba(30, 66, 122, .08); }
.metric-strip div { padding: 18px 14px; }
.metric-strip div + div { border-left: 1px solid var(--line); }
.metric-strip strong, .metric-strip span { display: block; }
.metric-strip strong { font-size: 25px; line-height: 1.1; color: #173f84; }
.metric-strip span { margin-top: 5px; color: var(--muted); font-size: 12px; }

.section { max-width: 1180px; margin: 0 auto; padding: 84px 24px; }
.section-heading { max-width: 780px; margin-bottom: 34px; }
.section-heading.centered { margin-left: auto; margin-right: auto; text-align: center; }
.section-heading h2 { margin: 10px 0 0; font-size: clamp(31px, 4.4vw, 50px); line-height: 1.12; letter-spacing: -.035em; }
.section-heading p { margin-top: 14px; color: var(--muted); font-size: 16px; }
.abstract-card { display: grid; grid-template-columns: 1fr 1fr; gap: 38px; padding: 36px 40px; border: 1px solid var(--line); border-radius: 22px; background: white; box-shadow: 0 20px 55px rgba(31, 67, 121, .07); }
.abstract-card p { margin: 0; color: #384963; text-align: justify; }
.method-section { padding-top: 58px; }
.figure-card { margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: 22px; background: white; box-shadow: 0 20px 60px rgba(31, 67, 121, .09); }
.figure-card img { display: block; width: 100%; height: auto; border-radius: 12px; }
.figure-card figcaption { padding: 16px 14px 6px; color: var(--muted); font-size: 13px; text-align: center; }
.benchmark-section, .ablation-section { max-width: none; padding-left: max(24px, calc((100vw - 1180px) / 2)); padding-right: max(24px, calc((100vw - 1180px) / 2)); background: #f2f6fc; }
.eyebrow.orange { color: var(--orange); }
.track-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 30px; }
.track-card { position: relative; overflow: hidden; padding: 30px; border: 1px solid var(--line); border-radius: 20px; background: white; box-shadow: 0 14px 38px rgba(31,67,121,.07); }
.track-card::after { content: ''; position: absolute; right: -48px; top: -48px; width: 150px; height: 150px; border-radius: 50%; opacity: .12; }
.qa-card::after { background: var(--blue); }
.e2e-card::after { background: var(--orange); }
.track-tag { display: inline-flex; padding: 5px 10px; border-radius: 999px; color: var(--blue); background: #edf3ff; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.e2e-card .track-tag { color: #a33c12; background: #fff0e9; }
.track-card > strong { display: block; margin-top: 20px; color: #173f84; font-size: 46px; line-height: 1; }
.e2e-card > strong { color: #bd4919; }
.track-card h3 { margin: 8px 0; font-size: 23px; }
.track-card p, .track-card li { color: var(--muted); font-size: 14px; }
.track-card ul { margin: 18px 0 0; padding: 16px 0 0 18px; border-top: 1px solid var(--line); }
.track-card li + li { margin-top: 5px; }

.results-section { max-width: 1180px; }
.result-callouts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 30px; }
.result-callouts article { padding: 22px; border: 1px solid var(--line); border-top: 4px solid var(--blue); border-radius: 16px; background: white; box-shadow: 0 10px 30px rgba(31,67,121,.06); }
.result-callouts article.accent-orange { border-top-color: var(--orange); }
.result-callouts article.accent-violet { border-top-color: var(--violet); }
.result-callouts span, .result-callouts strong, .result-callouts p { display: block; }
.result-callouts span { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.result-callouts strong { margin-top: 8px; font-size: 34px; line-height: 1; color: #163e82; }
.result-callouts p { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.results-section .figure-card + .subsection-heading { margin-top: 76px; }
.subsection-heading { max-width: 760px; margin: 64px 0 26px; }
.subsection-heading h3 { margin: 8px 0 0; font-size: clamp(26px, 3vw, 38px); line-height: 1.15; letter-spacing: -.025em; }

.ablation-section { background: linear-gradient(135deg, #f6f8ff, #f7f3ff); }
.ablation-figure { max-width: 760px; margin: 0 auto; }
.table-shell { overflow-x: auto; border: 1px solid #ccd9ee; border-radius: 18px; background: white; box-shadow: 0 16px 44px rgba(40,57,112,.09); }
.ablation-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ablation-table th { padding: 15px 18px; color: white; background: linear-gradient(110deg, #174b9f, #6040b8); text-align: right; font-size: 12px; letter-spacing: .035em; }
.ablation-table th:first-child, .ablation-table td:first-child { text-align: left; }
.ablation-table td { padding: 14px 18px; border-bottom: 1px solid #e7edf7; text-align: right; }
.ablation-table tbody tr:nth-child(odd) { background: #f7f9fe; }
.ablation-table tbody tr:hover { background: #edf3ff; }
.ablation-table .gain { color: #155f48; font-weight: 800; }
.table-note { margin: 0; padding: 13px 18px; color: var(--muted); background: #fbfcff; font-size: 11px; }

.finding-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.finding-grid article { padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: white; }
.finding-grid span { display: inline-grid; width: 35px; height: 35px; place-items: center; border-radius: 10px; color: white; background: linear-gradient(145deg, var(--blue), var(--violet)); font-size: 12px; font-weight: 800; }
.finding-grid h3 { margin: 18px 0 8px; font-size: 20px; }
.finding-grid p { margin: 0; color: var(--muted); font-size: 14px; }

.citation-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 46px; max-width: 1180px; margin: 0 auto 80px; padding: 44px; border-radius: 24px; color: white; background: linear-gradient(125deg, #102d61, #2b5ca5 55%, #5b37a4); box-shadow: 0 22px 60px rgba(20,48,96,.22); }
.citation-section.citation-pending { grid-template-columns: 1fr; }
.citation-section .eyebrow { color: #bcd5ff; }
.citation-section h2 { margin: 9px 0 0; font-size: 38px; }
.citation-section p { color: #d7e3f8; }
.citation-section pre { margin: 0; overflow-x: auto; padding: 20px; border: 1px solid rgba(255,255,255,.18); border-radius: 14px; background: rgba(5,20,49,.45); font-size: 12px; line-height: 1.55; }
footer { display: flex; justify-content: space-between; gap: 20px; padding: 28px max(24px, calc((100vw - 1180px) / 2)); color: var(--muted); border-top: 1px solid var(--line); font-size: 12px; }
footer strong { color: var(--ink); }

@media (max-width: 760px) {
  .nav-links { display: none; }
  .hero { padding-top: 72px; }
  .metric-strip { grid-template-columns: 1fr 1fr; }
  .metric-strip div:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .metric-strip div:nth-child(4) { border-top: 1px solid var(--line); }
  .abstract-card { grid-template-columns: 1fr; gap: 18px; padding: 28px 24px; }
  .section { padding: 64px 18px; }
  .benchmark-section, .ablation-section { padding-left: 18px; padding-right: 18px; }
  .track-grid, .finding-grid, .citation-section { grid-template-columns: 1fr; }
  .result-callouts { grid-template-columns: 1fr 1fr; }
  .citation-section { margin: 0 18px 60px; padding: 28px 22px; }
  footer { flex-direction: column; }
}

@media (max-width: 480px) {
  .result-callouts { grid-template-columns: 1fr; }
  .ablation-table { min-width: 660px; }
}