:root {
  --ink: #0a1b33;
  --ink-2: #10294c;
  --muted: #5c6d84;
  --paper: #f7fafc;
  --white: #ffffff;
  --line: #dce6f5;
  --blue: #1478f2;
  --blue-soft: #eaf2ff;
  --mint: #22c7a8;
  --mint-soft: #e6faf5;
  --violet: #7864f6;
  --violet-soft: #efedff;
  --gold: #f5b942;
  --gold-soft: #fff6df;
  --display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.skip-link { position: fixed; top: 0.75rem; left: 0.75rem; z-index: 20; padding: 0.65rem 0.9rem; background: var(--gold); color: var(--ink); font-weight: 800; text-decoration: none; transform: translateY(-150%); transition: transform 160ms ease; }
.skip-link:focus { transform: translateY(0); }
.shell { width: min(1160px, calc(100% - 48px)); margin: 0 auto; }

.site-header { position: sticky; top: 0; z-index: 10; background: rgba(247, 250, 252, 0.92); border-bottom: 1px solid rgba(220, 230, 245, 0.85); backdrop-filter: blur(14px); }
.nav-wrap { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand { display: inline-flex; align-items: center; gap: 0.72rem; text-decoration: none; min-width: 0; }
.brand-symbol { position: relative; display: inline-block; width: 37px; height: 37px; flex: 0 0 auto; overflow: hidden; border-radius: 9px; background: var(--ink); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.mark-node, .mark-route { position: absolute; display: block; }
.mark-node { z-index: 1; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.mark-node-left { top: 16px; left: 7px; }.mark-node-center { top: 14px; left: 16px; width: 9px; height: 9px; background: var(--mint); box-shadow: 0 0 0 3px rgba(34,199,168,.15); }.mark-node-top { top: 8px; right: 7px; }.mark-node-bottom { bottom: 8px; right: 7px; }
.mark-route { z-index: 0; height: 2px; transform-origin: left center; background: var(--blue); }
.mark-route-left { top: 18px; left: 11px; width: 8px; }.mark-route-top { top: 16px; left: 22px; width: 10px; transform: rotate(-35deg); }.mark-route-bottom { top: 21px; left: 22px; width: 10px; transform: rotate(35deg); }
.brand-name { display: grid; line-height: 1.05; letter-spacing: -0.025em; }
.brand-name strong { font-size: 0.99rem; }
.brand-name span { color: var(--muted); font-size: 0.72rem; font-weight: 650; letter-spacing: 0.01em; margin-top: 0.18rem; }
.site-nav { display: flex; align-items: center; gap: 1.45rem; }
.site-nav a { color: var(--muted); text-decoration: none; font-size: 0.84rem; font-weight: 750; transition: color 160ms ease; }
.site-nav a:hover, .site-nav a.active { color: var(--blue); }

.hero { position: relative; overflow: hidden; background: var(--ink); color: var(--white); padding: clamp(4.7rem, 8vw, 7.5rem) 0 clamp(4.2rem, 7vw, 6.75rem); }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.82; background-image: linear-gradient(rgba(109, 155, 230, 0.11) 1px, transparent 1px), linear-gradient(90deg, rgba(109, 155, 230, 0.11) 1px, transparent 1px); background-size: 50px 50px; mask-image: linear-gradient(90deg, black, transparent 81%); }
.hero::after { content: ""; position: absolute; width: 45rem; height: 45rem; border-radius: 50%; top: -19rem; right: -8rem; background: radial-gradient(circle, rgba(20, 120, 242, 0.28), transparent 64%); filter: blur(6px); }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(280px, 0.75fr); align-items: center; gap: clamp(2rem, 6vw, 6.5rem); }
.eyebrow, .section-index, .card-label { margin: 0; color: var(--blue); font-size: 0.72rem; font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; }
.eyebrow { color: #a8d1ff; display: inline-flex; align-items: center; gap: 0.55rem; }
.pulse-dot { display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 6px rgba(34, 199, 168, 0.16); }
h1, h2, h3, p { overflow-wrap: break-word; }
h1 { max-width: 730px; margin: 1.1rem 0 1.35rem; font-family: var(--display); font-size: clamp(3rem, 6vw, 5.75rem); font-weight: 600; letter-spacing: -0.065em; line-height: 0.98; }
.hero-lede { max-width: 630px; margin: 0; color: #d4e1f1; font-size: clamp(1.02rem, 1.5vw, 1.18rem); line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 2.25rem; }
.button { display: inline-flex; align-items: center; gap: 0.65rem; border-radius: 0.45rem; padding: 0.86rem 1rem; font-weight: 800; font-size: 0.9rem; text-decoration: none; }
.button-primary { background: var(--mint); color: var(--ink); transition: transform 160ms ease, box-shadow 160ms ease; }
.button-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(34, 199, 168, 0.24); }
.scope-chip { border: 1px solid rgba(208, 225, 246, 0.27); border-radius: 99px; padding: 0.55rem 0.75rem; color: #cfe0f3; font-size: 0.76rem; font-weight: 700; }
.scope-chip span { color: var(--mint); margin: 0 0.2rem; }

.signal-card { position: relative; overflow: hidden; min-height: 375px; padding: 1.45rem; border: 1px solid rgba(176, 207, 247, 0.22); border-radius: 1rem; background: linear-gradient(145deg, rgba(34, 68, 119, 0.67), rgba(12, 31, 60, 0.7)); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2); }
.signal-label { color: #adc9ee; display: flex; align-items: center; gap: 0.5rem; font-size: 0.7rem; font-weight: 850; letter-spacing: 0.11em; text-transform: uppercase; }
.node-icon { width: 0.58rem; height: 0.58rem; border-radius: 50%; background: var(--mint); }
.signal-card > p { max-width: 265px; margin: 1rem 0 0; font-family: var(--display); font-size: clamp(1.6rem, 2.5vw, 2.1rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.045em; }
.signal-card > small { position: absolute; right: 1.45rem; bottom: 1.4rem; left: 1.45rem; color: #b8c9df; font-size: 0.78rem; line-height: 1.55; }
.route-map { position: absolute; top: 6.9rem; right: 1.6rem; left: 1.6rem; height: 142px; }
.route { position: absolute; height: 2px; transform-origin: right center; background: linear-gradient(90deg, transparent, var(--blue)); }
.route-one { top: 20px; left: 6%; width: 43%; transform: rotate(25deg); }
.route-two { top: 50px; left: 3%; width: 45%; transform: rotate(11deg); background: linear-gradient(90deg, transparent, var(--violet)); }
.route-three { bottom: 35px; left: 9%; width: 39%; transform: rotate(-19deg); background: linear-gradient(90deg, transparent, var(--mint)); }
.route-four { bottom: 12px; left: 21%; width: 29%; transform: rotate(-36deg); background: linear-gradient(90deg, transparent, var(--gold)); }
.route-center { position: absolute; top: 59px; left: 48%; width: 1rem; height: 1rem; border: 4px solid #d5fdf6; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 8px rgba(34, 199, 168, 0.12), 0 0 25px rgba(34, 199, 168, 0.9); }
.route-label { position: absolute; color: #bbcdf0; font-size: 0.67rem; font-weight: 750; }
.label-one { top: 4px; left: 0; }.label-two { top: 42px; left: 0; }.label-three { bottom: 24px; left: 0; }.label-four { bottom: 0; left: 3%; }

.section { padding: clamp(4rem, 8vw, 7rem) 0; }
.section-heading { display: grid; gap: 1.75rem; margin-bottom: 2.8rem; }
.split-heading { grid-template-columns: minmax(0, 1.25fr) minmax(220px, 0.75fr); align-items: end; }
.section-heading h2 { max-width: 725px; margin: 0.7rem 0 0; font-family: var(--display); font-size: clamp(2.25rem, 4.4vw, 4.1rem); font-weight: 600; line-height: 1.03; letter-spacing: -0.06em; }
.section-heading > p { max-width: 370px; margin: 0 0 0.45rem auto; color: var(--muted); font-size: 0.96rem; }
.section-heading-wide { grid-template-columns: minmax(0, 1.25fr) minmax(220px, 0.58fr); align-items: end; }
.section-heading-wide > p { margin-left: 0; }

.section-overview { background: var(--white); }
.overview-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr); gap: 1.25rem; }
.summary-panel, .attendee-panel { border: 1px solid var(--line); border-radius: 1rem; padding: clamp(1.5rem, 3vw, 2.4rem); }
.summary-panel { background: linear-gradient(128deg, #fff 0%, #f5f9ff 100%); }
.card-label { margin-bottom: 1.15rem; }
.summary-panel > p:last-child { max-width: 720px; margin: 0; color: #34465e; font-size: 1.04rem; line-height: 1.85; }
.summary-panel strong { color: var(--ink); }
.attendee-panel { background: var(--ink); color: white; border-color: var(--ink); }
.attendee-panel .card-label { color: #a9c4eb; }
.attendee-list { padding: 0; margin: 0; list-style: none; display: grid; gap: 1.1rem; }
.attendee-list li { display: flex; align-items: center; gap: 0.82rem; }
.attendee-list strong { display: block; font-size: 0.94rem; }
.attendee-list small { display: block; margin-top: 0.12rem; color: #b7c6da; font-size: 0.78rem; line-height: 1.45; }
.avatar { display: grid; width: 2.35rem; height: 2.35rem; flex: 0 0 auto; place-items: center; border-radius: 0.62rem; font-size: 0.77rem; font-weight: 900; }
.avatar-presenter { background: var(--blue); }.avatar-audience { background: rgba(34, 199, 168, 0.18); color: var(--mint); border: 1px solid rgba(34, 199, 168, 0.36); }

.section-discussion { position: relative; background: #edf4fd; }
.section-discussion::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 88% 16%, rgba(20, 120, 242, 0.12), transparent 22%), radial-gradient(circle at 12% 90%, rgba(120, 100, 246, 0.11), transparent 24%); }
.section-discussion .shell { position: relative; }
.discussion-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.insight-card { position: relative; min-height: 325px; overflow: hidden; display: flex; flex-direction: column; padding: 1.4rem; border: 1px solid #d6e2f2; border-radius: 0.95rem; background: rgba(255,255,255,0.86); box-shadow: 0 7px 18px rgba(30, 67, 117, 0.035); transition: transform 170ms ease, box-shadow 170ms ease; }
.insight-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--blue); }
.insight-card:hover { transform: translateY(-4px); box-shadow: 0 16px 35px rgba(30, 67, 117, 0.12); }
.insight-card.accent-violet::before { background: var(--violet); }.insight-card.accent-teal::before { background: var(--mint); }.insight-card.accent-gold::before { background: var(--gold); }
.card-top { display: flex; align-items: center; justify-content: space-between; }.card-number { color: #8ba1bd; font-size: 0.72rem; font-weight: 850; letter-spacing: 0.08em; }
.glyph { position: relative; display: inline-block; width: 2.1rem; height: 2.1rem; border-radius: 0.62rem; background: var(--blue-soft); }
.accent-violet .glyph { background: var(--violet-soft); }.accent-teal .glyph { background: var(--mint-soft); }.accent-gold .glyph { background: var(--gold-soft); }
.glyph::before, .glyph::after { content: ""; position: absolute; }
.glyph-pipeline::before { top: 0.55rem; left: 0.5rem; width: 1.1rem; height: 0.22rem; background: var(--blue); box-shadow: 0 0.4rem 0 var(--blue), 0 0.8rem 0 var(--blue); }.glyph-pipeline::after { top: 0.44rem; right: 0.4rem; width: 0.34rem; height: 1.32rem; border: 2px solid var(--blue); border-left: 0; border-radius: 0 0.22rem 0.22rem 0; }
.glyph-capacity::before { bottom: 0.45rem; left: 0.48rem; width: 0.28rem; height: 0.7rem; background: var(--violet); box-shadow: 0.46rem -0.35rem 0 var(--violet), 0.92rem -0.78rem 0 var(--violet); }.glyph-capacity::after { top: 0.43rem; left: 0.45rem; width: 1.15rem; height: 0.75rem; border-top: 2px solid var(--violet); transform: skewY(-28deg); }
.glyph-code::before { top: 0.62rem; left: 0.55rem; width: 0.56rem; height: 0.56rem; border-left: 2px solid var(--mint); border-bottom: 2px solid var(--mint); transform: rotate(45deg); }.glyph-code::after { top: 0.62rem; right: 0.55rem; width: 0.56rem; height: 0.56rem; border-right: 2px solid var(--mint); border-top: 2px solid var(--mint); transform: rotate(45deg); }
.glyph-shield::before { top: 0.43rem; left: 0.63rem; width: 0.82rem; height: 1.15rem; border: 2px solid var(--gold); border-radius: 0.45rem 0.45rem 0.75rem 0.75rem; }.glyph-shield::after { top: 0.88rem; left: 0.92rem; width: 0.28rem; height: 0.45rem; border: solid var(--gold); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.glyph-sql::before { top: 0.47rem; left: 0.48rem; width: 1.12rem; height: 0.35rem; border: 2px solid var(--blue); border-radius: 50%; }.glyph-sql::after { top: 0.7rem; left: 0.48rem; width: 1.12rem; height: 0.8rem; border: 2px solid var(--blue); border-top: 0; border-radius: 0 0 50% 50%; }
.glyph-external::before { top: 0.5rem; left: 0.48rem; width: 0.78rem; height: 0.78rem; border: 2px solid var(--violet); border-radius: 0.2rem; }.glyph-external::after { right: 0.45rem; bottom: 0.45rem; width: 0.75rem; height: 0.75rem; border: 2px solid var(--violet); border-radius: 0.2rem; }
.insight-card h3 { margin: 1.1rem 0 0.6rem; font-size: 1.05rem; letter-spacing: -0.02em; line-height: 1.25; }.insight-card p { margin: 0; color: #53657b; font-size: 0.86rem; line-height: 1.63; }.insight-card code { color: #265fa8; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.79em; }
.insight-card ul { padding: 0; margin: auto 0 0; list-style: none; display: grid; gap: 0.5rem; }.insight-card li { position: relative; padding-left: 0.85rem; color: #334962; font-size: 0.75rem; font-weight: 650; line-height: 1.45; }.insight-card li::before { content: ""; position: absolute; top: 0.45rem; left: 0; width: 0.33rem; height: 0.33rem; border-radius: 50%; background: var(--blue); }.accent-violet li::before { background: var(--violet); }.accent-teal li::before { background: var(--mint); }.accent-gold li::before { background: var(--gold); }
.selection-strip { display: grid; grid-template-columns: 1fr 1.15fr; align-items: center; gap: 2rem; margin-top: 1.4rem; padding: 1.6rem; border-radius: 0.95rem; background: var(--ink); color: white; }.selection-strip .card-label { color: #9fc5ff; margin-bottom: 0.55rem; }.selection-strip h3 { max-width: 370px; margin: 0; font-family: var(--display); font-size: clamp(1.35rem, 2.2vw, 1.75rem); font-weight: 600; line-height: 1.08; letter-spacing: -0.04em; }.selection-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }.selection-list span { border-left: 2px solid var(--mint); padding-left: 0.7rem; }.selection-list b, .selection-list small { display: block; }.selection-list b { font-size: 0.83rem; }.selection-list small { margin-top: 0.08rem; color: #b9c8dd; font-size: 0.71rem; line-height: 1.35; }

.section-conclusions { color: white; background: var(--ink); }.conclusion-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 8vw, 8rem); }.section-conclusions .section-index { color: var(--mint); }.section-conclusions h2 { max-width: 410px; margin: 0.7rem 0 0; font-family: var(--display); font-size: clamp(2.6rem, 4.5vw, 4.25rem); font-weight: 600; line-height: 1; letter-spacing: -0.06em; }.conclusion-content blockquote { margin: 0; padding: 0 0 1.5rem; border-bottom: 1px solid rgba(212, 225, 241, 0.21); color: #f5f9fe; font-family: var(--display); font-size: clamp(1.55rem, 2.9vw, 2.35rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.045em; }.conclusion-content > p { max-width: 655px; margin: 1.5rem 0 0; color: #bdccdf; font-size: 0.98rem; line-height: 1.75; }.conclusion-pills { display: flex; flex-wrap: wrap; gap: 0.48rem; margin-top: 1.65rem; }.conclusion-pills span { border: 1px solid rgba(212,225,241,.28); border-radius: 99px; padding: .35rem .62rem; color: #d5e3f3; font-size: .72rem; font-weight: 700; }

.section-actions { background: var(--white); }.action-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 0.95rem; box-shadow: 0 12px 32px rgba(30, 67, 117, 0.05); }.action-table-wrap table { width: 100%; min-width: 840px; border-collapse: collapse; text-align: left; }.action-table-wrap th { padding: 0.95rem 1.15rem; background: #f1f6fd; color: #61738c; font-size: 0.68rem; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; }.action-table-wrap td { padding: 1.05rem 1.15rem; border-top: 1px solid var(--line); color: #3f526a; font-size: 0.84rem; line-height: 1.55; vertical-align: top; }.action-table-wrap td:first-child { width: 18%; color: var(--ink); font-weight: 760; }.action-table-wrap td:nth-child(2) { width: 46%; }.action-table-wrap td:nth-child(3) { width: 15%; color: var(--muted); }.status { display: inline-block; white-space: nowrap; border-radius: 99px; padding: 0.27rem 0.52rem; font-size: 0.68rem; font-weight: 850; }.status-recommended { color: #0b6c5a; background: var(--mint-soft); }.status-open { color: #80580a; background: var(--gold-soft); }

.site-footer { padding: 1.4rem 0; border-top: 1px solid var(--line); background: var(--paper); }.footer-content { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 1.5rem; color: #6a7c94; font-size: 0.76rem; }.footer-brand { color: var(--ink); font-weight: 820; }.footer-brand i { display: inline-block; width: 0.56rem; height: 0.56rem; margin-right: 0.35rem; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); vertical-align: -0.03rem; }

@media (max-width: 850px) { .hero-grid, .overview-grid, .selection-strip, .conclusion-grid { grid-template-columns: 1fr; }.hero-grid { gap: 2.6rem; }.signal-card { max-width: 540px; min-height: 350px; }.split-heading, .section-heading-wide { grid-template-columns: 1fr; }.section-heading > p { margin: 0; max-width: 540px; }.discussion-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.selection-list { max-width: 520px; }.section-conclusions h2 { max-width: 600px; } }
@media (max-width: 620px) { .shell { width: min(100% - 32px, 1160px); }.nav-wrap { min-height: 68px; align-items: center; }.brand-symbol { width: 33px; height: 33px; transform: scale(.9); transform-origin: left center; }.site-nav { gap: 0.8rem; }.site-nav a { font-size: 0.72rem; }.site-nav a:nth-child(2) { display: none; }.hero { padding-top: 4rem; }.hero::before { background-size: 38px 38px; }.hero h1 { font-size: clamp(2.7rem, 13vw, 4.3rem); }.hero-actions { align-items: flex-start; flex-direction: column; }.scope-chip { font-size: .71rem; }.signal-card { min-height: 330px; }.section { padding: 4.2rem 0; }.discussion-grid { grid-template-columns: 1fr; }.insight-card { min-height: 285px; }.selection-list { grid-template-columns: 1fr 1fr; }.action-table-wrap { margin-right: -16px; margin-left: -16px; border-radius: 0; border-right: 0; border-left: 0; }.footer-content { display: grid; }.section-heading h2 { font-size: clamp(2.25rem, 11vw, 3.25rem); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.button-primary, .insight-card { transition: none; }.insight-card:hover, .button-primary:hover { transform: none; } }
