:root {
  --bg: #09090b;
  --surface: #111116;
  --surface-2: #18181f;
  --line: #2a2a34;
  --text: #f4f4f5;
  --muted: #a1a1aa;
  --cyan: #22d3ee;
  --blue: #3b82f6;
  --violet: #8b5cf6;
  --pink: #ec4899;
  --lime: #a3e635;
  --amber: #fbbf24;
  --green: #34d399;
  --danger: #fb7185;
  --shadow: 0 24px 80px rgba(0,0,0,.42);
  --radius: 1.25rem;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 18% -10%, rgba(34,211,238,.13), transparent 32rem),
    radial-gradient(circle at 86% 10%, rgba(236,72,153,.10), transparent 34rem),
    var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.65;
  overflow-x: hidden;
}
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; }
[id] { scroll-margin-top: 7rem; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 999; padding: .8rem 1rem; color: #071014; background: var(--cyan); border-radius: .7rem; font-weight: 800; }
.skip-link:focus { top: 1rem; }
.container { width: min(1180px, calc(100% - 2rem)); margin-inline: auto; }
.narrow { width: min(790px, calc(100% - 2rem)); margin-inline: auto; }
.pinstripe { height: 7px; background: linear-gradient(90deg, var(--cyan), var(--blue), var(--violet), var(--pink), var(--amber), var(--lime)); box-shadow: 0 2px 0 #060607, 0 4px 0 rgba(255,255,255,.07), 0 6px 0 #060607; }
.site-header { position: sticky; top: 0; z-index: 90; backdrop-filter: blur(18px); background: rgba(9,9,11,.87); border-bottom: 1px solid rgba(255,255,255,.08); }
.nav-row { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; }
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; font-size: 1.35rem; font-weight: 900; letter-spacing: -.045em; white-space: nowrap; }
.brand-mark { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, var(--cyan), var(--blue) 50%, var(--pink)); color: #071014; box-shadow: 0 0 28px rgba(34,211,238,.28); }
.brand-mark svg { width: 21px; height: 21px; }
.nav-links { display: flex; align-items: center; gap: 1.05rem; }
.nav-links a { color: #d4d4d8; font-size: .91rem; font-weight: 700; text-decoration: none; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: white; }
.nav-cta { padding: .65rem .95rem; border-radius: 999px; background: white; color: #09090b !important; }
.menu-button { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: .85rem; background: var(--surface); color: white; cursor: pointer; }
.menu-button svg { width: 22px; height: 22px; margin: auto; }
.mobile-menu { display: none; border-top: 1px solid var(--line); padding: .8rem 1rem 1.1rem; }
.mobile-menu.open { display: grid; }
.mobile-menu a { padding: .72rem .5rem; color: #e4e4e7; text-decoration: none; font-weight: 750; border-bottom: 1px solid rgba(255,255,255,.05); }
.hero { padding: 5.5rem 0 3rem; position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: -10rem auto auto 50%; width: 45rem; height: 45rem; border-radius: 50%; background: rgba(139,92,246,.11); filter: blur(90px); pointer-events: none; }
.hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 3.5rem; }
.eyebrow { display: inline-flex; align-items: center; gap: .6rem; padding: .45rem .75rem; border: 1px solid #31313a; border-radius: 999px; color: #d4d4d8; background: rgba(24,24,31,.8); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 850; }
.eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 18px var(--cyan); }
h1,h2,h3,h4 { font-family: "Inter Display", Inter, ui-sans-serif, sans-serif; line-height: 1.08; margin: 0; letter-spacing: -.038em; }
.hero h1 { margin-top: 1.25rem; font-size: clamp(3.25rem, 7.6vw, 7.1rem); font-weight: 900; max-width: 850px; }
.gradient-text { color: transparent; background: linear-gradient(90deg,var(--cyan),#7dd3fc,var(--violet),var(--pink)); -webkit-background-clip: text; background-clip: text; }
.lede { color: #c4c4cc; font-size: clamp(1.05rem, 1.9vw, 1.28rem); max-width: 690px; margin: 1.5rem 0 0; }
.button-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .82rem 1.08rem; border-radius: .85rem; text-decoration: none; font-weight: 850; border: 1px solid transparent; }
.button.primary { background: white; color: #09090b; }
.button.primary:hover { background: var(--cyan); }
.button.secondary { background: rgba(24,24,31,.8); border-color: #34343d; color: white; }
.button.secondary:hover { border-color: var(--cyan); }
.button svg { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; }
.hero-art { position: relative; }
.hero-art::after { content: ""; position: absolute; inset: 8% 7% -8%; background: linear-gradient(90deg, rgba(34,211,238,.28), rgba(236,72,153,.24)); filter: blur(65px); z-index: -1; }
.hero-art img { border-radius: 1.6rem; border: 1px solid rgba(255,255,255,.12); box-shadow: var(--shadow); }
.signal-strip { overflow: hidden; border-block: 1px solid rgba(255,255,255,.1); background: var(--cyan); color: #061014; transform: rotate(-.35deg) scale(1.01); margin: 1.3rem 0 4rem; }
.signal-track { display: flex; align-items: center; gap: 2.2rem; width: max-content; padding: .85rem 0; animation: scroll-signal 34s linear infinite; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; }
.signal-dot { width: 8px; height: 8px; border-radius: 50%; background: #061014; }
@keyframes scroll-signal { to { transform: translateX(-50%); } }
.section { padding: 5.3rem 0; }
.section.compact { padding: 3.6rem 0; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.section-head h2, .page-hero h1 { font-size: clamp(2.2rem, 5vw, 4.6rem); font-weight: 900; }
.section-head p { max-width: 620px; color: var(--muted); margin: .75rem 0 0; }
.kicker { color: var(--cyan); text-transform: uppercase; letter-spacing: .16em; font-size: .76rem; font-weight: 900; margin-bottom: .8rem; }
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(155deg, rgba(29,29,37,.95), rgba(15,15,19,.96)); padding: 1.45rem; box-shadow: 0 18px 50px rgba(0,0,0,.16); }
.card:hover { border-color: rgba(34,211,238,.48); transform: translateY(-2px); transition: .2s ease; }
.card h3 { font-size: 1.32rem; margin: .95rem 0 .55rem; }
.card p { color: var(--muted); margin: 0; }
.card a { text-decoration: none; }
.card-icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #071014; background: var(--cyan); }
.card-icon svg { width: 24px; height: 24px; }
.card-link { display: inline-flex; margin-top: 1rem; color: var(--cyan); font-weight: 850; font-size: .9rem; }
.metric-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: .8rem; }
.metric { border-radius: 1rem; padding: 1.25rem; min-height: 170px; display: flex; flex-direction: column; justify-content: space-between; color: #071014; }
.metric:nth-child(1){background:#22d3ee}.metric:nth-child(2){background:#a3e635}.metric:nth-child(3){background:#fbbf24}.metric:nth-child(4){background:#f472b6}
.metric small { font-weight: 900; text-transform: uppercase; letter-spacing: .12em; }
.metric strong { font-size: 1.42rem; line-height: 1.1; font-family: "Inter Display", sans-serif; }
.split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 3.2rem; }
.split img { border-radius: 1.35rem; border: 1px solid var(--line); box-shadow: var(--shadow); }
.check-list { display: grid; gap: .85rem; margin-top: 1.3rem; }
.check-item { display: grid; grid-template-columns: 30px 1fr; gap: .8rem; align-items: start; }
.check { width: 28px; height: 28px; display: grid; place-items:center; border-radius: 50%; background: rgba(34,211,238,.14); color: var(--cyan); font-weight: 900; }
.check-item strong { display: block; margin-bottom: .12rem; }
.check-item span { color: var(--muted); }
.code-panel { border: 1px solid #34343d; background: #0b0b0f; border-radius: 1.2rem; overflow: hidden; box-shadow: var(--shadow); }
.code-head { display: flex; justify-content: space-between; align-items: center; padding: .85rem 1rem; border-bottom: 1px solid #292932; color: #a1a1aa; font-size: .78rem; }
.dots { display:flex; gap:.38rem }.dots i{width:9px;height:9px;border-radius:50%;background:#3f3f46}.dots i:nth-child(1){background:#fb7185}.dots i:nth-child(2){background:#fbbf24}.dots i:nth-child(3){background:#34d399}
.code-panel pre { margin: 0; padding: 1.25rem; overflow: auto; color: #d4d4d8; font: .87rem/1.8 "DejaVu Sans Mono", ui-monospace, monospace; }
.code-cyan{color:#67e8f9}.code-pink{color:#f9a8d4}.code-green{color:#86efac}.code-amber{color:#fde68a}
.article-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.article-card { overflow: hidden; border: 1px solid var(--line); border-radius: 1.2rem; background: var(--surface); }
.article-card img { aspect-ratio: 1/1; object-fit: cover; }
.article-card-content { padding: 1.15rem; }
.article-card .meta { color: #a1a1aa; font-size: .78rem; display: flex; flex-wrap: wrap; gap: .55rem; }
.article-card h3 { font-size: 1.25rem; margin: .65rem 0; }
.article-card p { color: var(--muted); margin: 0; font-size: .92rem; }
.article-card a { text-decoration: none; }
.tag { display:inline-flex; align-items:center; padding:.25rem .55rem; border:1px solid #34343d; border-radius:999px; color:#d4d4d8; text-decoration:none; font-size:.72rem; font-weight:800; }
.tag:hover { border-color: var(--cyan); color: white; }
.page-hero { padding: 4.6rem 0 2.4rem; }
.page-hero p { color: #c4c4cc; max-width: 740px; font-size: 1.16rem; margin: 1.15rem 0 0; }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:.5rem; color:#a1a1aa; font-size:.82rem; margin-bottom:1.3rem; }
.breadcrumbs a { text-decoration:none; color:#d4d4d8; }
.content-grid { display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:2.2rem; align-items:start; }
.article-shell { padding-bottom: 5rem; }
.article-hero { width:min(920px,calc(100% - 2rem)); margin:0 auto; padding:4.2rem 0 2rem; }
.article-hero h1 { font-size:clamp(2.6rem,6vw,5.5rem); font-weight:900; margin:.7rem 0 1.1rem; }
.article-hero .excerpt { color:#c4c4cc; font-size:1.15rem; max-width:790px; }
.article-meta { display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; color:#a1a1aa; font-size:.84rem; }
.featured-image { width:min(920px,calc(100% - 2rem)); margin:0 auto 2.3rem; border-radius:1.5rem; border:1px solid #34343d; box-shadow:var(--shadow); }
.article-layout { width:min(1100px,calc(100% - 2rem)); margin:0 auto; display:grid; grid-template-columns:minmax(0,760px) 260px; gap:3rem; align-items:start; }
.article-body { font-size:1.02rem; color:#d4d4d8; }
.article-body h2 { color:white; font-size:2rem; margin:2.7rem 0 .9rem; }
.article-body h3 { color:white; font-size:1.36rem; margin:2rem 0 .7rem; }
.article-body p { margin:0 0 1.2rem; }
.article-body ul, .article-body ol { margin:0 0 1.4rem; padding-left:1.35rem; }
.article-body li { margin:.5rem 0; }
.article-body a { color:var(--cyan); text-underline-offset:3px; }
.article-body pre { border:1px solid #32323b; border-radius:1rem; background:#0c0c10; padding:1rem; overflow:auto; color:#d4d4d8; font: .84rem/1.7 "DejaVu Sans Mono",monospace; margin:1.4rem 0; }
.article-body blockquote, .source-note { margin:1.5rem 0; border-left:4px solid var(--cyan); background:rgba(34,211,238,.08); padding:1rem 1.1rem; border-radius:0 1rem 1rem 0; }
.article-aside { position:sticky; top:100px; display:grid; gap:1rem; }
.aside-card { border:1px solid var(--line); border-radius:1rem; background:var(--surface); padding:1rem; }
.aside-card h3 { font-size:1rem; margin-bottom:.7rem; }
.aside-card nav { display:grid; gap:.55rem; }
.aside-card a { color:#c4c4cc; text-decoration:none; font-size:.85rem; }
.aside-card a:hover { color:var(--cyan); }
.table-wrap { overflow:auto; border:1px solid #33333c; border-radius:1rem; margin:1.3rem 0; }
table { border-collapse:collapse; width:100%; min-width:600px; }
th,td { padding:.85rem; text-align:left; border-bottom:1px solid #2d2d36; vertical-align:top; }
th { color:white; background:#18181f; font-size:.85rem; }
td { color:#c4c4cc; }
.faq { display:grid; gap:.8rem; }
details { border:1px solid var(--line); border-radius:1rem; background:var(--surface); padding:1rem 1.1rem; }
summary { cursor:pointer; font-weight:850; color:white; }
details p { color:var(--muted); margin:.8rem 0 0; }
.cta-band { border:1px solid #34343d; background:linear-gradient(120deg,rgba(34,211,238,.13),rgba(139,92,246,.13),rgba(236,72,153,.12)); border-radius:1.4rem; padding:2rem; display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.cta-band h2 { font-size:clamp(1.8rem,4vw,3rem); }
.cta-band p { color:#c4c4cc; margin:.7rem 0 0; max-width:650px; }
.site-footer { border-top:1px solid var(--line); background:#070709; padding:3rem 0 1.3rem; }
.footer-grid { display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:2rem; }
.footer-grid h3 { font-size:.85rem; text-transform:uppercase; letter-spacing:.12em; margin-bottom:.8rem; }
.footer-grid a { display:block; color:#a1a1aa; text-decoration:none; margin:.45rem 0; font-size:.9rem; }
.footer-grid a:hover { color:white; }
.footer-brand p { color:#a1a1aa; max-width:360px; }
.footer-bottom { display:flex; justify-content:space-between; gap:1rem; align-items:center; border-top:1px solid #202026; margin-top:2.5rem; padding-top:1.2rem; color:#71717a; font-size:.8rem; }
.empty-state { border:1px dashed #3f3f46; border-radius:1rem; padding:2rem; color:#a1a1aa; text-align:center; }
@media (max-width: 960px) {
  .nav-links{display:none}.menu-button{display:grid;place-items:center}.hero-grid,.split{grid-template-columns:1fr}.hero-art{max-width:720px}.card-grid,.article-grid{grid-template-columns:repeat(2,1fr)}.metric-grid{grid-template-columns:repeat(2,1fr)}.content-grid,.article-layout{grid-template-columns:1fr}.article-aside{position:static}.footer-grid{grid-template-columns:1.5fr 1fr 1fr}.footer-grid>div:last-child{grid-column:2/4}
}
@media (max-width: 640px) {
  .container,.narrow{width:min(100% - 1.25rem,1180px)}.hero{padding-top:3.6rem}.hero h1{font-size:3.45rem}.section{padding:4rem 0}.card-grid,.article-grid,.metric-grid{grid-template-columns:1fr}.section-head,.cta-band,.footer-bottom{align-items:flex-start;flex-direction:column}.footer-grid{grid-template-columns:1fr}.footer-grid>div:last-child{grid-column:auto}.article-hero,.featured-image,.article-layout{width:min(100% - 1.25rem,920px)}.article-body{font-size:1rem}.article-body h2{font-size:1.68rem}
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}