.hero { padding-top: 32px; padding-bottom: 64px; overflow-x: clip; max-width: 100%; }
.hero-copy { display: grid; grid-template-columns: minmax(0, 672fr) minmax(0, 560fr); column-gap: 48px; align-items: start; }
.copy-main { position: relative; z-index: 2; }
.hero-title { margin: 0; font-family: var(--font-display); font-weight: var(--weight-regular); font-size: clamp(44px, 4.5vw, 64px); line-height: 1.06; letter-spacing: -.025em; color: var(--text); }
.cta-pair { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.trustline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin: 24px 0 0; padding: 0; list-style: none; font-size: var(--fs-small); color: var(--muted); }
.trustline li { display: inline-flex; align-items: center; }
.trustline li + li::before { content: ""; width: 4px; height: 4px; flex-shrink: 0; margin: 0 12px; border-radius: var(--r-round); background: color-mix(in srgb, var(--border) 50%, var(--muted)); }
.hotlines { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.hotlines-label { font-size: var(--fs-tiny); font-weight: var(--weight-medium); color: var(--muted); white-space: nowrap; }
.hotlines ul { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 0; padding: 0; }
.hotlines li { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-small); color: var(--text); white-space: nowrap; }
.flag { width: 22px; height: 15px; flex: none; display: block; overflow: hidden; border-radius: 3px; filter: drop-shadow(0 1px 1px var(--tint-10)); }
.flag-sq { width: 15px; height: 15px; }
.f-red { fill: var(--flag-red); }
.f-blue { fill: var(--flag-blue); }
.f-white { fill: var(--flag-white); }
.f-edge { fill: var(--clear); stroke: var(--line-soft); stroke-width: 1; }
.copy-side { position: relative; z-index: 2; padding-top: 6px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 4px 14px 4px 8px; border-radius: var(--r-pill); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-soft); font-size: var(--fs-tiny); color: var(--muted); }
.eyebrow-orb { width: 14px; height: 14px; flex-shrink: 0; border-radius: var(--r-round); background: radial-gradient(circle at 32% 28%, var(--panel) 0, transparent 40%), linear-gradient(140deg, var(--peach), var(--accent)); }
.lede { margin-top: 20px; font-size: var(--fs-lede); line-height: 1.62; color: var(--text); }
.lede strong { font-weight: var(--weight-semibold); background: linear-gradient(180deg, transparent 62%, var(--peach-wash) 62%); padding: 0 2px; }
.factrow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 28px 0 0; padding: 16px 0 0; list-style: none; border-top: 1px solid var(--line-soft); }
.factrow li { display: flex; flex-direction: column; gap: 2px; padding-right: 12px; min-width: 0; }
.factrow li + li { padding-left: 16px; border-left: 1px solid var(--line-faint); }
.fact-num { font-family: var(--font-mono); font-size: 22px; font-weight: var(--weight-medium); letter-spacing: -.02em; color: var(--text); }
.fact-cap { font-size: 12.5px; color: var(--muted); }
.deck { position: relative; margin-top: 32px; height: 464px; border-radius: var(--r-card); background: linear-gradient(180deg, color-mix(in srgb, var(--panel-2) 88%, var(--panel)) 0%, var(--panel-2) 100%); box-shadow: inset 0 0 0 1px var(--hi-edge), inset 0 1px 0 var(--white), 0 44px 96px -28px var(--tint-14), 0 18px 48px -20px var(--tint-10); }
.deck::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(ellipse 34% 52% at 50% 40%, color-mix(in srgb, var(--panel) 70%, transparent) 0, transparent 70%), linear-gradient(180deg, transparent 72%, color-mix(in srgb, var(--panel-2) 60%, var(--border)) 140%); }
.seg { position: absolute; top: 8px; left: 8px; right: 8px; height: 52px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: var(--r-pill); background: color-mix(in srgb, var(--panel) 34%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--white) 55%, transparent); }
.seg-item { display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: var(--r-pill); font-size: var(--fs-body); color: var(--ink-soft); min-width: 0; }
.seg-item.is-on { background: var(--panel); color: var(--text); box-shadow: inset 0 1px 0 var(--white), 0 0 0 1px color-mix(in srgb, var(--border) 60%, transparent), 0 8px 20px -8px var(--tint-14); }
.seg-dot { width: 12px; height: 12px; border-radius: var(--r-round); flex: none; box-shadow: inset 0 -2px 3px color-mix(in srgb, var(--accent-dark) 25%, transparent); }
.dot-iepl { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 45%, var(--panel)) 0, var(--accent) 60%); }
.dot-relay { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--peach) 45%, var(--panel)) 0, var(--peach) 60%); }
.dot-direct { background: linear-gradient(135deg, var(--accent) 10%, var(--peach) 90%); }
.deck-chips { display: contents; }
.float-chip { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 7px; border-radius: var(--r-pill); white-space: nowrap; }
.float-chip svg { width: 15px; height: 15px; flex: none; }
.chip-lock { top: -17px; right: 40px; height: 34px; padding: 0 15px 0 12px; background: var(--panel); font-size: 13.5px; font-weight: var(--weight-medium); color: var(--text); box-shadow: inset 0 0 0 1px var(--hi-edge), 0 0 0 1px var(--line-faint), 0 12px 26px -10px var(--tint-22); }
.chip-lock svg { color: var(--accent-dark); }
.chip-refund { top: -15px; left: 48px; height: 30px; padding: 0 13px 0 10px; background: color-mix(in srgb, var(--panel) 70%, var(--bg)); font-size: var(--fs-tiny); color: var(--muted); box-shadow: inset 0 0 0 1px var(--border), 0 8px 18px -12px var(--tint-22); }
.chip-refund svg { color: var(--accent); }
.orbs { position: absolute; left: 0; right: 0; top: 60px; height: 236px; overflow: hidden; pointer-events: none; }
.orb { position: absolute; border-radius: var(--r-round); box-shadow: inset -16px -22px 40px color-mix(in srgb, var(--accent-dark) 26%, transparent), inset 12px 14px 30px color-mix(in srgb, var(--white) 38%, transparent); }
.orb::before { content: ""; position: absolute; inset: 0; border-radius: var(--r-round); background: radial-gradient(circle at 30% 24%, color-mix(in srgb, var(--white) 88%, transparent) 0, color-mix(in srgb, var(--white) 28%, transparent) 12%, transparent 30%); }
.orb::after { content: ""; position: absolute; left: 16%; right: 16%; top: calc(100% + 4px); height: 16px; border-radius: var(--r-round); background: radial-gradient(ellipse at center, var(--tint-22) 0, transparent 70%); filter: blur(3px); }
.orb-ai { width: 200px; height: 200px; left: calc(50% - 100px); top: 10px; background: radial-gradient(circle at 74% 76%, color-mix(in srgb, var(--peach) 92%, var(--white)) 0, transparent 46%), radial-gradient(circle at 20% 70%, var(--accent) 0, transparent 52%), radial-gradient(circle at 62% 26%, color-mix(in srgb, var(--peach) 55%, var(--panel)) 0, transparent 42%), radial-gradient(circle at 42% 48%, color-mix(in srgb, var(--accent) 60%, var(--peach)) 0, transparent 62%), linear-gradient(150deg, color-mix(in srgb, var(--accent) 70%, var(--peach)) 0%, var(--accent) 55%, var(--accent-dark) 100%); box-shadow: inset -20px -26px 48px color-mix(in srgb, var(--accent-dark) 34%, transparent), inset 14px 16px 34px color-mix(in srgb, var(--white) 36%, transparent), 0 26px 50px -20px var(--tint-22); }
.orb-ai::after { height: 20px; top: calc(100% + 2px); background: radial-gradient(ellipse at center, color-mix(in srgb, var(--accent) 30%, transparent) 0, transparent 70%); }
.orb-stream { width: 152px; height: 152px; left: calc(23.5% - 76px); top: 34px; background: radial-gradient(circle at 30% 72%, color-mix(in srgb, var(--accent) 72%, var(--peach)) 0, transparent 48%), radial-gradient(circle at 70% 34%, color-mix(in srgb, var(--peach) 66%, var(--panel)) 0, transparent 50%), linear-gradient(200deg, var(--peach) 0%, color-mix(in srgb, var(--peach) 62%, var(--accent)) 68%, color-mix(in srgb, var(--accent-dark) 70%, var(--peach)) 100%); }
.orb-work { width: 152px; height: 152px; left: calc(76.5% - 76px); top: 34px; background: radial-gradient(circle at 66% 70%, color-mix(in srgb, var(--accent) 58%, var(--panel)) 0, transparent 54%), radial-gradient(circle at 28% 38%, var(--panel) 0, transparent 46%), linear-gradient(135deg, color-mix(in srgb, var(--peach) 38%, var(--panel)) 0%, color-mix(in srgb, var(--accent) 42%, var(--panel)) 58%, color-mix(in srgb, var(--accent) 72%, var(--peach)) 100%); }
.orb-web, .orb-game { width: 136px; height: 136px; top: 42px; opacity: .58; box-shadow: inset -12px -16px 30px color-mix(in srgb, var(--accent-dark) 14%, transparent), inset 10px 12px 26px color-mix(in srgb, var(--white) 50%, transparent); }
.orb-web { left: -32px; background: radial-gradient(circle at 60% 66%, color-mix(in srgb, var(--peach) 60%, var(--panel)) 0, transparent 56%), linear-gradient(160deg, var(--panel) 0%, color-mix(in srgb, var(--peach) 30%, var(--panel)) 60%, color-mix(in srgb, var(--accent) 28%, var(--panel)) 100%); }
.orb-game { left: calc(100% - 104px); background: radial-gradient(circle at 36% 64%, color-mix(in srgb, var(--accent) 48%, var(--panel)) 0, transparent 56%), linear-gradient(200deg, color-mix(in srgb, var(--peach) 26%, var(--panel)) 0%, color-mix(in srgb, var(--accent) 34%, var(--panel)) 70%, color-mix(in srgb, var(--accent) 50%, var(--peach)) 100%); }
.orb-key { position: absolute; z-index: 1; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-round); background: var(--white); color: var(--text); box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--border) 70%, transparent), 0 12px 26px -8px color-mix(in srgb, var(--accent-dark) 40%, transparent); }
.orb-key svg { width: 26px; height: 26px; display: block; }
.captions { position: static; }
.cap { position: absolute; top: 294px; width: 220px; transform: translateX(-50%); text-align: center; }
.cap-name { display: block; font-size: 17px; font-weight: var(--weight-medium); line-height: 24px; color: color-mix(in srgb, var(--text) 62%, var(--muted)); }
.cap-desc { display: block; margin-top: 2px; font-size: 13.5px; line-height: 20px; color: var(--muted-soft); }
.cap-web { left: 72px; width: 140px; opacity: .72; }
.cap-stream { left: 23.5%; }
.cap-ai { left: 50%; width: 280px; }
.cap-ai .cap-name { color: var(--text); }
.cap-ai .cap-desc { color: var(--ink-soft); }
.cap-go { margin-left: 4px; font-size: var(--fs-nav); }
.cap-work { left: 76.5%; }
.cap-game { left: calc(100% - 72px); width: 140px; opacity: .72; }
.cap-arrow { position: absolute; top: 296px; width: 16px; transform: translateX(-50%); font-size: 26px; line-height: 1; text-align: center; color: var(--muted); }
.cap-prev { left: calc(50% - 168px); }
.cap-next { left: calc(50% + 168px); }
.deck-foot { position: absolute; left: 24px; right: 24px; bottom: 28px; display: flex; align-items: center; gap: 16px; }
.foot-label { font-size: var(--fs-tiny); color: var(--muted); white-space: nowrap; padding-left: 8px; }
.plats { display: flex; align-items: center; gap: 4px; margin: 0 auto; }
.plat { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 13px; border-radius: var(--r-pill); font-size: 14.5px; color: var(--ink-soft); white-space: nowrap; }
.plat svg { width: 16px; height: 16px; flex: none; display: block; overflow: hidden; }
.plat.is-on { background: var(--panel); color: var(--text); box-shadow: inset 0 1px 0 var(--white), 0 0 0 1px color-mix(in srgb, var(--border) 60%, transparent), 0 8px 18px -10px var(--tint-22); }
.support { position: absolute; z-index: 4; right: -12px; bottom: -28px; display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px 0 6px; border-radius: var(--r-pill); background: var(--panel); font-size: var(--fs-nav); color: var(--text); white-space: nowrap; text-decoration: none; box-shadow: inset 0 0 0 1px var(--hi-edge), 0 0 0 1px var(--line-faint), 0 16px 34px -12px var(--tint-22); }
.support-orbs { display: inline-flex; align-items: center; }
.mini-orb { width: 32px; height: 32px; border-radius: var(--r-round); border: 2px solid var(--panel); box-shadow: inset -4px -5px 8px color-mix(in srgb, var(--accent-dark) 24%, transparent); }
.mini-orb + .mini-orb { margin-left: -11px; }
.mo-a { background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--white) 70%, transparent) 0, transparent 36%), linear-gradient(140deg, var(--peach), var(--accent)); }
.mo-b { background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--white) 70%, transparent) 0, transparent 36%), linear-gradient(160deg, color-mix(in srgb, var(--accent) 40%, var(--panel)), var(--accent-dark)); }
.mo-c { background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--white) 70%, transparent) 0, transparent 36%), linear-gradient(200deg, color-mix(in srgb, var(--peach) 60%, var(--panel)), color-mix(in srgb, var(--peach) 60%, var(--accent))); }
.wall { padding-top: 24px; padding-bottom: 96px; }
.wall-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 32px; }
.wall-head h2 { margin: 0; font-size: 32px; font-weight: var(--weight-regular); letter-spacing: -.02em; line-height: 1.2; }
.wall-head p { max-width: 440px; font-size: var(--fs-nav); color: var(--muted); }
.wall-grid { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid var(--line-soft); }
.wall-grid::before, .wall-grid::after { content: ""; position: absolute; inset-inline: -3px; height: 6px; background: radial-gradient(circle at 3px 3px, var(--muted) 0 2px, transparent 2.5px), radial-gradient(circle at calc(100% - 3px) 3px, var(--muted) 0 2px, transparent 2.5px); pointer-events: none; }
.wall-grid::before { top: -3px; }
.wall-grid::after { bottom: -3px; }
.wall-cell { display: flex; align-items: center; justify-content: center; min-width: 0; height: 112px; border-right: 1px solid var(--line-faint); border-bottom: 1px solid var(--line-faint); font-size: 21px; color: color-mix(in srgb, var(--muted) 70%, var(--bg)); white-space: nowrap; }
.wall-cell:nth-child(6n) { border-right: 0; }
.wall-cell:nth-child(n+13) { border-bottom: 0; }
.wm-mono { font-family: var(--font-mono); font-weight: var(--weight-semibold); letter-spacing: -.03em; }
.wm-sans { font-family: var(--font-display); font-weight: var(--weight-semibold); }
.tabs { min-width: 0; }
.tab-list, [role="tablist"] { display: flex; gap: 8px; padding: 6px; max-width: 100%; overflow-x: auto; background: var(--panel-2); border-radius: var(--r-pill); }
[role="tab"] { flex-shrink: 0; min-height: 44px; padding: 10px 22px; border: 0; border-radius: var(--r-pill); background: var(--clear); color: var(--muted); white-space: nowrap; }
[role="tab"][aria-selected="true"] { background: var(--panel); color: var(--text); box-shadow: inset 0 1px 0 var(--white), 0 8px 18px -12px var(--tint-22); }
.tab-panel { padding-top: 24px; min-width: 0; }
.toc-tabs { position: sticky; top: var(--toc-offset); z-index: 15; display: flex; gap: 8px; overflow-x: auto; max-width: 100%; padding: 8px; margin-block: 32px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-pill); box-shadow: var(--shadow-card); overscroll-behavior-inline: contain; }
.toc-tabs a { display: inline-flex; align-items: center; flex-shrink: 0; min-height: 40px; padding: 8px 18px; border-radius: var(--r-pill); color: var(--muted); text-decoration: none; white-space: nowrap; }
.toc-tabs a.is-current { background: var(--text); color: var(--panel); }
.toc-tabs.toc-static { position: static; }
body:has(.toc-tabs) section[id] { scroll-margin-top: var(--toc-anchor-offset); }
.faq-list { border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); padding: 0 8px; }
.faq-item summary { list-style: none; position: relative; padding: 24px 40px 24px 0; cursor: pointer; font-weight: var(--weight-medium); min-height: 48px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 8px; top: 22px; font-size: var(--fs-h3); color: var(--accent-dark); }
.faq-item[open] summary::after { content: "−"; }
.faq-item p { padding-bottom: 24px; max-width: 850px; line-height: 1.8; color: var(--muted); }
.badge, .tag { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 4px 12px; max-width: 100%; border-radius: var(--r-pill); background: var(--panel-2); color: var(--ink-soft); font-size: var(--fs-tiny); overflow-wrap: anywhere; }
.badge-accent { background: var(--tint-10); color: var(--accent-dark); }
.badge-success { background: color-mix(in srgb, var(--success) 10%, var(--panel)); color: var(--success); }
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
.plan-card { position: relative; display: flex; flex-direction: column; gap: 24px; padding: 32px; min-width: 0; border: 1px solid var(--hi-edge); border-radius: var(--r-small-card); background: var(--panel); box-shadow: var(--shadow-card); }
.plan-card.is-current { border-color: var(--accent); box-shadow: inset 0 1px 0 var(--white), 0 24px 64px -24px var(--tint-22); }
.plan-badge { align-self: flex-start; background: var(--tint-10); color: var(--accent-dark); }
.plan-card h3 { margin: 0; }
.plan-price { font-family: var(--font-mono); font-size: 40px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.plan-price small { font-family: var(--font-body); font-size: var(--fs-small); color: var(--muted); }
.plan-facts { list-style: none; margin: 0; padding: 0; color: var(--muted); }
.plan-facts li + li { margin-top: 12px; }
.plan-card .btn { margin-top: auto; align-self: flex-start; }
.table-scroll { display: block; overflow-x: auto; max-width: 100%; min-width: 0; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--r-small-card); background: var(--panel); }
.data-table, .route-table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: var(--fs-small); text-align: left; }
.data-table caption, .route-table caption { padding: 20px 24px; text-align: left; color: var(--text); font-weight: var(--weight-medium); }
.data-table th, .data-table td, .route-table th, .route-table td { padding: 18px 24px; border-bottom: 1px solid var(--line-soft); word-break: keep-all; color: var(--ink-soft); }
.table-scroll th, .data-table th, .route-table th { white-space: nowrap; color: var(--text); background: var(--panel-2); font-weight: var(--weight-medium); }
.data-table td:first-child, .route-table td:first-child { color: var(--text); font-weight: var(--weight-medium); }
.route-group th { background: var(--bg); color: var(--accent-dark); }
.data-table tr:last-child td, .route-table tr:last-child td { border-bottom: 0; }
.prose > .data-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; min-width: 0; }
.platform-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.platform-card { padding: 24px; background: var(--panel); border: 1px solid var(--hi-edge); border-radius: var(--r-small-card); box-shadow: var(--shadow-card); min-width: 0; }
.platform-card svg { width: 28px; height: 28px; overflow: hidden; }
.platform-card h3 { font-size: 18px; margin-top: 16px; }
.platform-card p { color: var(--muted); font-size: var(--fs-small); margin-bottom: 20px; }
.platform-card .btn { padding-inline: 16px; font-size: var(--fs-small); }
.article-card { display: flex; flex-direction: column; gap: 16px; padding: 32px; border-radius: var(--r-small-card); border: 1px solid var(--hi-edge); background: var(--panel); box-shadow: var(--shadow-card); min-width: 0; }
.article-card h3 { margin: 0; font-size: 22px; }
.article-card h3 a { text-decoration: none; }
.article-card h3 a:hover { color: var(--accent-dark); }
.article-card p { color: var(--muted); line-height: 1.8; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--muted); font-size: var(--fs-tiny); }
.article-card > a { margin-top: auto; align-self: flex-start; min-height: 32px; }
.callout { margin-inline: 0; padding: 24px 28px; border-left: 3px solid var(--accent); border-radius: 0 var(--r-small-card) var(--r-small-card) 0; background: var(--tint-08); color: var(--ink-soft); line-height: 1.8; }
.promo-block { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 40px; border-radius: var(--r-card); background: var(--panel-2); box-shadow: inset 0 1px 0 var(--white), 0 24px 64px -24px var(--tint-14); }
.promo-brand { font-size: var(--fs-h3); font-weight: var(--weight-medium); }
.promo-block p { margin-top: 8px; color: var(--muted); }
.promo-block .btn { flex-shrink: 0; white-space: nowrap; }
.feature-intros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; margin-block: 32px; }
.feature-intros p { color: var(--muted); line-height: 1.8; }
.client-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 40px; border-radius: var(--r-card); background: var(--panel-2); box-shadow: var(--shadow-card); border: 1px solid var(--hi-edge); }
.client-window { display: grid; grid-template-columns: minmax(135px, .8fr) minmax(0, 1.6fr); min-width: 0; overflow: hidden; background: var(--panel); border-radius: var(--r-small-card); box-shadow: var(--shadow-card); }
.client-sidebar { background: var(--text); padding: 24px 12px; }
.client-sidebar h3 { color: var(--panel); font-size: var(--fs-body); margin-inline: 8px; }
.client-sidebar [role="tablist"] { display: flex; flex-direction: column; gap: 8px; padding: 0; background: var(--clear); border-radius: 0; }
.client-sidebar [role="tab"] { color: var(--panel-2); text-align: left; padding: 12px; border-radius: var(--r-code); white-space: normal; }
.client-sidebar [role="tab"][aria-selected="true"] { background: var(--panel); color: var(--text); }
.client-detail { padding: 32px 24px; min-width: 0; }
.client-detail p { font-size: var(--fs-small); color: var(--muted); line-height: 1.85; margin-bottom: 24px; }
.client-detail .tab-panel { padding: 0; }
.blog-hero { position: relative; padding: 48px; border-radius: var(--r-card); background: var(--panel); overflow-x: clip; }
.blog-hero::after { content: "UO"; display: grid; place-items: center; position: absolute; right: 40px; top: 32px; width: 88px; height: 88px; border: 4px double var(--accent); border-radius: var(--r-round); color: var(--accent-dark); font-family: var(--font-mono); font-size: var(--fs-h3); transform: rotate(-11deg); }
.blog-hero h1 { max-width: 75%; margin-top: 16px; }
.preview-palette { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.swatch { min-width: 0; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-code); overflow: hidden; }
.swatch-color { height: 72px; }
.swatch code { display: block; padding: 12px; font-size: var(--fs-tiny); }
.sw-bg { background: var(--bg); }
.sw-top { background: var(--bg-top); }
.sw-bottom { background: var(--bg-bottom); }
.sw-panel { background: var(--panel); }
.sw-panel2 { background: var(--panel-2); }
.sw-border { background: var(--border); }
.sw-accent { background: var(--accent); }
.sw-dark { background: var(--accent-dark); }
.sw-peach { background: var(--peach); }
.sw-text { background: var(--text); }
.sw-muted { background: var(--muted); }
.sw-success { background: var(--success); }
.sw-warn { background: var(--warn); }
.sw-error { background: var(--error); }
.sw-white { background: var(--white); }
.sw-red { background: var(--flag-red); }
.sw-blue { background: var(--flag-blue); }
.preview-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.type-display { font-family: var(--font-display); font-size: var(--fs-h1); line-height: 1.1; font-weight: var(--weight-regular); letter-spacing: -.02em; }
.preview-note { font-size: var(--fs-small); color: var(--muted); margin-top: 16px; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
@media (max-width: 1100px) {
  .hero-copy { gap: 32px; }
  .foot-label { display: none; }
  .plat { padding-inline: 10px; }
  .cap { width: 170px; }
  .cap-ai { width: 230px; }
  .cap-web, .cap-game { width: 110px; }
  .wall-cell { font-size: 17px; }
  .client-gallery { padding: 24px; }
  .client-window { grid-template-columns: minmax(0, 1fr); }
  .client-sidebar [role="tablist"] { flex-direction: row; border-radius: var(--r-pill); }
  .client-sidebar [role="tab"] { white-space: nowrap; }
  .platform-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .hero-title { font-size: clamp(28px, 6vw, 40px); }
  .hero-copy { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .lede { font-size: 18px; }
  .deck { height: 450px; }
  .orb-web, .orb-game, .cap-web, .cap-game { display: none; }
  .orb-stream { left: calc(15% - 60px); width: 120px; height: 120px; top: 48px; }
  .orb-work { left: calc(85% - 60px); width: 120px; height: 120px; top: 48px; }
  .orb-ai { width: 168px; height: 168px; left: calc(50% - 84px); top: 24px; }
  .cap-stream { left: 16%; }
  .cap-work { left: 84%; }
  .cap { width: 110px; top: 276px; }
  .cap-ai { width: 160px; }
  .cap-name { font-size: var(--fs-small); }
  .cap-desc { font-size: 12px; }
  .cap-prev { left: calc(50% - 100px); }
  .cap-next { left: calc(50% + 100px); }
  .cap-arrow { top: 276px; }
  .deck-foot { flex-wrap: wrap; gap: 12px; bottom: 24px; justify-content: center; }
  .plats { flex-wrap: wrap; justify-content: center; }
  .plat { height: 32px; font-size: 12px; gap: 5px; }
  .wall-head { align-items: flex-start; flex-direction: column; gap: 16px; }
  .wall-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wall-cell:nth-child(6n) { border-right: 1px solid var(--line-faint); }
  .wall-cell:nth-child(3n) { border-right: 0; }
  .wall-cell:nth-child(n+13) { border-bottom: 1px solid var(--line-faint); }
  .wall-cell:nth-child(n+16) { border-bottom: 0; }
  .plan-grid, .client-gallery, .feature-intros { grid-template-columns: minmax(0, 1fr); }
  .feature-intros { gap: 24px; }
  .promo-block { flex-direction: column; align-items: flex-start; padding: 32px; }
  .preview-palette { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .hero { padding-top: 24px; padding-bottom: 48px; }
  .hero-title { line-height: 1.12; letter-spacing: -.02em; }
  .trustline { font-size: 12px; }
  .trustline li + li::before { margin-inline: 8px; }
  .hotlines { align-items: flex-start; gap: 10px; }
  .hotlines ul { gap: 8px 12px; }
  .hotlines li { font-size: 12px; }
  .factrow li { padding-right: 4px; }
  .factrow li + li { padding-left: 8px; }
  .fact-num { font-size: 19px; }
  .fact-cap { font-size: 11px; }
  .deck { height: 494px; padding-top: 40px; }
  .deck-chips { display: flex; justify-content: space-between; gap: 8px; padding-inline: 12px; }
  .float-chip { position: static; height: 28px; padding-inline: 10px; font-size: 11px; }
  .seg { top: 80px; height: 44px; }
  .seg-item { font-size: 12px; gap: 6px; }
  .seg-dot { width: 8px; height: 8px; }
  .orbs { top: 132px; height: 180px; }
  .orb-ai { width: 136px; height: 136px; left: calc(50% - 68px); top: 12px; }
  .orb-stream, .orb-work { width: 84px; height: 84px; top: 38px; }
  .orb-stream { left: calc(12% - 42px); }
  .orb-work { left: calc(88% - 42px); }
  .orb-key { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
  .cap { top: 310px; width: 78px; }
  .cap-stream { left: 15%; }
  .cap-work { left: 85%; }
  .cap-ai { width: 136px; }
  .cap-name { font-size: 12px; }
  .cap-desc { font-size: 11px; line-height: 16px; }
  .cap-arrow { top: 312px; font-size: 20px; }
  .cap-prev { left: calc(50% - 78px); }
  .cap-next { left: calc(50% + 78px); }
  .deck-foot { left: 12px; right: 12px; bottom: 64px; }
  .plats { gap: 4px; max-width: 220px; }
  .plat { padding-inline: 8px; }
  .deck-foot > .btn { display: none; }
  .support { right: 12px; bottom: 12px; height: 36px; font-size: 12px; }
  .mini-orb { width: 26px; height: 26px; }
  .wall { padding-top: 16px; padding-bottom: 48px; }
  .wall-cell { height: 88px; font-size: 12px; }
  .wall-head h2 { font-size: 28px; }
  .platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platform-card { padding: 20px 14px; }
  .platform-card .btn { padding-inline: 12px; font-size: 12px; }
  .preview-palette { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .client-gallery { padding: 16px; }
  .client-detail { padding: 24px; }
  .blog-hero { padding: 32px 24px; }
  .blog-hero::after { display: none; }
  .blog-hero h1 { max-width: 100%; }
}