.hero { position: relative; overflow-x: clip; max-width: 100%; min-height: max(680px, calc(100svh - 128px)); display: flex; align-items: center; isolation: isolate; background: linear-gradient(180deg, var(--hero-top) 0%, var(--hero-bottom) 100%); }
.hero-atmos { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(60% 70% at 0% 40%, color-mix(in srgb, var(--violet) 7%, transparent), transparent 70%), radial-gradient(60% 70% at 100% 45%, color-mix(in srgb, var(--grass) 6%, transparent), transparent 70%); }
.hero-decor { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-inner { position: relative; z-index: 3; width: 100%; max-width: 760px; margin: 0 auto; padding: 56px 24px; }
.hero-copy { display: flex; flex-direction: column; align-items: center; text-align: center; }
.app-icon { position: relative; width: 96px; height: 96px; border-radius: var(--r-app); display: grid; place-items: center; background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 84%, var(--white)) 0%, var(--accent) 46%, var(--accent-dark) 100%); box-shadow: inset 1px 1px 0 var(--white-55), inset 0 -8px 16px color-mix(in srgb, var(--accent-dark) 38%, transparent), 0 22px 40px -16px color-mix(in srgb, var(--accent) 50%, transparent); }
.app-icon::before { content: ""; position: absolute; left: 6px; right: 6px; bottom: -16px; height: 30px; border-radius: var(--r-round); background: color-mix(in srgb, var(--accent) 14%, transparent); filter: blur(10px); z-index: -1; }
.app-icon::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(170deg, var(--white-22) 0%, transparent 46%); pointer-events: none; box-shadow: inset 1px 1px 0 var(--white-55); }
.app-icon img { width: 96px; height: 96px; border-radius: inherit; }
.hero-label { margin: 20px 0 0; display: inline-flex; align-items: center; gap: 10px; min-height: 32px; padding: 0 14px 0 10px; border-radius: var(--r-pill); background: var(--bg-panel); box-shadow: var(--shadow-chip); font-size: 13px; font-weight: var(--weight-semibold); color: var(--text-muted); }
.hero-label b { font-family: var(--font-mono); font-weight: var(--weight-bold); color: var(--text); }
.dots { display: inline-flex; flex-shrink: 0; padding-left: 4px; }
.dots span { width: 12px; height: 12px; margin-left: -4px; border-radius: var(--r-round); border: 2px solid var(--bg-panel); flex-shrink: 0; }
.dv { background: var(--violet); }
.ds { background: var(--sky); }
.do { background: var(--orchid); }
.dg { background: var(--grass); }
.da { background: var(--amber); }
.hero h1 { margin: 20px 0 0; font-weight: var(--weight-display); font-size: clamp(52px, 4.6vw, 66px); line-height: 1.1; letter-spacing: -.02em; color: var(--text); }
.kw { display: inline-block; margin-left: .08em; padding: .02em .16em .06em; border-radius: var(--r-sm); background: var(--accent); color: var(--white); box-shadow: inset 1px 1px 0 var(--white-40), 0 12px 26px -12px color-mix(in srgb, var(--accent) 60%, transparent); }
.hero-sub { margin: 16px 0 0; max-width: 640px; font-size: 20px; line-height: 1.6; color: var(--text-muted); }
.hero-sub strong { color: var(--text); font-weight: var(--weight-bold); }
.platforms { margin-top: 36px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.plat { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: var(--r-md); background: var(--bg-panel); box-shadow: var(--shadow-chip); font-size: 14px; font-weight: var(--weight-semibold); color: var(--text); }
.plat svg { width: 18px; height: 18px; flex: none; fill: currentColor; }
.flags { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; }
.flags-label { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: var(--r-pill); background: var(--bg-panel-2); font-size: 12px; font-weight: var(--weight-bold); color: var(--text-muted); }
.flag { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: var(--weight-semibold); color: var(--text); }
.flag svg { width: 27px; height: 18px; flex: none; overflow: hidden; border-radius: 3px; filter: drop-shadow(0 2px 3px var(--shade)); }
.fl-white { fill: var(--white); }
.fl-red { fill: var(--flag-red); }
.fl-blue { fill: var(--flag-blue); }
.fl-navy { fill: var(--flag-navy); }
.fl-edge { fill: none; stroke: var(--flag-edge); }
.st-white { fill: none; stroke: var(--white); }
.st-red { fill: none; stroke: var(--flag-red); }
.trust { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; justify-content: center; font-size: 14px; font-weight: var(--weight-medium); color: var(--text-muted); }
.trust li { margin: 0; }
.trust li + li::before { content: "·"; margin: 0 10px; color: var(--border); }
.trust b { font-family: var(--font-mono); font-weight: var(--weight-bold); color: var(--text); }
.glow { position: absolute; width: var(--s); height: var(--s); border-radius: var(--r-round); transform: translate(var(--gx), 10%) scale(1.8); background: radial-gradient(closest-side, color-mix(in srgb, var(--c1) 30%, transparent), color-mix(in srgb, var(--c2) 10%, transparent) 58%, transparent 100%); }
.drift { position: absolute; width: var(--s); height: var(--s); animation: bob 4s ease-in-out infinite alternate; }
.tile { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: var(--r-tile); transform: rotate(var(--rot)); background: linear-gradient(150deg, color-mix(in srgb, var(--c1) 80%, transparent) 0%, color-mix(in srgb, var(--c2) 76%, transparent) 100%); -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%); box-shadow: inset 1px 1px 0 var(--white-55), inset 0 0 0 1px var(--white-12), 0 36px 72px -20px color-mix(in srgb, var(--c1) 14%, transparent), 0 14px 28px -14px color-mix(in srgb, var(--c1) 12%, transparent); }
.tile::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(125deg, var(--white-40) 0%, var(--white-08) 30%, transparent 52%); }
.tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset -12px -16px 30px color-mix(in srgb, var(--c2) 34%, transparent); }
.tile-info { position: absolute; z-index: 2; left: var(--il, 28px); bottom: var(--ib, 30px); display: flex; flex-direction: column; align-items: flex-start; gap: 2px; color: var(--white); text-shadow: 0 1px 3px var(--ink-veil); }
.ti-ico { width: 34px; height: 34px; margin-bottom: 10px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--white-22); box-shadow: inset 1px 1px 0 var(--white-55); }
.ti-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ti-cap { font-size: 12px; font-weight: var(--weight-semibold); letter-spacing: .02em; opacity: .9; }
.ti-main { font-family: var(--font-display); font-size: 22px; font-weight: var(--weight-display); line-height: 1.2; letter-spacing: -.02em; }
.ti-sub { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: var(--weight-semibold); opacity: .95; }
.ti-sub::before { content: ""; width: 6px; height: 6px; flex-shrink: 0; border-radius: var(--r-round); background: var(--white); }
.ti-price { font-family: var(--font-mono); font-size: 34px; font-weight: var(--weight-bold); line-height: 1.1; letter-spacing: -.04em; }
.ti-price small { font-family: var(--font-body); font-size: 14px; font-weight: var(--weight-bold); letter-spacing: 0; margin-left: 2px; }
.ti-tags { display: flex; flex-wrap: wrap; gap: 6px; max-width: 124px; margin-top: 4px; transform: rotate(calc(-1 * var(--rot))); transform-origin: top left; }
.ti-tags span { padding: 2px 10px; border-radius: var(--r-pill); background: var(--white-22); box-shadow: inset 1px 1px 0 var(--white-40); font-size: 13px; font-weight: var(--weight-bold); white-space: nowrap; }
.d-l1 { --s: 260px; --c1: var(--violet); --c2: var(--sky); --rot: -14deg; --gx: -22%; --il: 94px; --ib: 36px; left: calc(50% - 790px); top: 10%; }
.d-l2 { --s: 216px; --c1: var(--sky); --c2: var(--sky-soft); --rot: -10deg; --gx: -14%; left: calc(50% - 616px); top: 39%; }
.d-l3 { --s: 192px; --c1: var(--orchid); --c2: var(--violet); --rot: -16deg; --gx: -24%; --il: 66px; --ib: 32px; left: calc(50% - 764px); top: 61%; }
.d-r1 { --s: 270px; --c1: var(--grass); --c2: var(--grass-soft); --rot: 14deg; --gx: 22%; --il: 30px; --ib: 40px; right: calc(50% - 800px); top: 8%; }
.d-r2 { --s: 212px; --c1: var(--gold); --c2: var(--amber); --rot: 10deg; --gx: 14%; right: calc(50% - 612px); top: 38%; }
.d-r3 { --s: 200px; --c1: var(--amber); --c2: var(--orchid); --rot: 16deg; --gx: 24%; --il: 30px; --ib: 32px; right: calc(50% - 772px); top: 60%; }
.drift.d-l2 { animation-delay: -1.2s; }
.drift.d-l3 { animation-delay: -2.6s; }
.drift.d-r1 { animation-delay: -.6s; }
.drift.d-r2 { animation-delay: -2s; }
.drift.d-r3 { animation-delay: -3.2s; }
.chip { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px 0 8px; border-radius: var(--r-pill); background: var(--bg-panel); box-shadow: var(--shadow-chip); font-size: 14px; font-weight: var(--weight-bold); color: var(--text); animation: bob 5s ease-in-out infinite alternate; }
.chip-ico { width: 30px; height: 30px; flex-shrink: 0; border-radius: var(--r-round); display: grid; place-items: center; background: color-mix(in srgb, var(--ci) 16%, var(--bg-panel)); color: var(--ci); }
.chip-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.chip-mail { --ci: var(--violet); left: calc(50% - 660px); top: 84%; }
.chip-log { --ci: var(--grass); right: calc(50% - 548px); top: 4%; animation-delay: -1.5s; }
.chip-dev { --ci: var(--sky); right: calc(50% - 560px); top: 81%; animation-delay: -3s; }
@keyframes bob { from { transform: translate3d(0,0,0); } to { transform: translate3d(0,-6px,0); } }
.proof { position: relative; padding: 72px 24px 88px; background: linear-gradient(180deg, var(--hero-bottom) 0%, var(--bg) 100%); }
.badge-row { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.badge { position: relative; min-width: 0; padding: 54px 24px 26px; border-radius: var(--r-badge); text-align: center; background: var(--bg-panel-2); color: var(--text); }
.badge strong { display: block; font-family: var(--font-display); font-size: 20px; font-weight: var(--weight-display); letter-spacing: -.02em; line-height: 1.3; }
.badge span { display: block; margin-top: 4px; font-size: 14px; color: var(--text-muted); }
.badge-deep { background: linear-gradient(160deg, var(--accent-dark) 0%, color-mix(in srgb, var(--accent-dark) 76%, var(--text)) 100%); color: var(--white); box-shadow: 0 24px 44px -22px color-mix(in srgb, var(--accent-dark) 60%, transparent); }
.badge-deep span { color: var(--white-80); }
.badge-ico { position: absolute; top: -36px; left: 50%; width: 72px; height: 72px; margin-left: -36px; border-radius: var(--r-icon); display: grid; place-items: center; color: var(--white); background: linear-gradient(150deg, var(--b1), var(--b2)); box-shadow: inset 1px 1px 0 var(--white-55), inset -5px -7px 14px color-mix(in srgb, var(--b2) 50%, transparent), 0 18px 32px -14px color-mix(in srgb, var(--b2) 65%, transparent); }
.badge-ico svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bi-globe { --b1: var(--sky); --b2: var(--violet); }
.bi-dev { --b1: var(--grass); --b2: var(--sky); }
.bi-refund { --b1: var(--gold); --b2: var(--amber); }
.factband { background: var(--gold); padding: 80px 24px 96px; }
.factband-in { max-width: 1200px; margin: 0 auto; }
.factband h2 { margin: 0 0 40px; text-align: center; font-size: 44px; line-height: 1.15; }
.fact-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; }
.fact-card { min-width: 0; padding: 28px; border-radius: var(--r-card); background: var(--bg-panel); box-shadow: var(--shadow-gold); }
.fc-ico, .icon-badge { width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--r-md); display: grid; place-items: center; background: color-mix(in srgb, var(--ci, var(--sky)) 15%, var(--bg-panel)); color: var(--ci, var(--sky)); }
.fc-ico svg, .icon-badge svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.fc-label { margin: 18px 0 0; font-size: 13px; font-weight: var(--weight-bold); color: var(--text-muted); }
.fc-value { margin: 4px 0 0; font-family: var(--font-display); font-size: 23px; font-weight: var(--weight-display); letter-spacing: -.02em; line-height: 1.3; }
.fc-text { margin: 10px 0 0; font-size: 15px; line-height: 1.7; color: var(--text-muted); }
.fc-text b { font-family: var(--font-mono); color: var(--text); }
.fc-text a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.ci-violet { --ci: var(--violet); }
.ci-sky { --ci: var(--sky); }
.ci-grass { --ci: var(--grass); }
.ci-orchid { --ci: var(--orchid); }
.tabs { min-width: 0; }
[role="tablist"] { display: flex; gap: 8px; width: fit-content; max-width: 100%; overflow-x: auto; padding: 6px; margin-bottom: 28px; border-radius: var(--r-pill); background: var(--bg-panel-2); }
[role="tab"] { flex-shrink: 0; min-height: 44px; padding: 10px 22px; border-radius: var(--r-pill); color: var(--text-muted); font-weight: var(--weight-bold); white-space: nowrap; }
[role="tab"][aria-selected="true"] { color: var(--text); background: var(--bg-panel); box-shadow: var(--shadow-chip); }
[role="tabpanel"] { min-width: 0; }
.toc-tabs { position: sticky; top: var(--nav-h); z-index: 30; display: flex; align-items: center; gap: 8px; min-height: var(--toc-h); overflow-x: auto; max-width: 100%; padding: 8px; margin-bottom: 32px; border-radius: var(--r-menu); background: var(--bg-panel); box-shadow: var(--shadow-chip); overscroll-behavior-x: contain; }
.toc-tabs a { display: inline-flex; align-items: center; flex-shrink: 0; min-height: 44px; padding: 10px 18px; border-radius: var(--r-pill); font-size: 14px; font-weight: var(--weight-semibold); white-space: nowrap; }
.toc-tabs a.is-active, .toc-tabs a[aria-current] { background: var(--bg-panel-2); color: var(--accent-dark); }
.toc-tabs.toc-static { position: static; }
body:has(.toc-tabs) section[id] { scroll-margin-top: var(--anchor-offset); }
.faq-item { margin-bottom: 12px; background: var(--bg-panel); border-radius: var(--r-menu); box-shadow: var(--shadow-chip); }
.faq-item summary { position: relative; padding: 24px 56px 24px 24px; min-height: 64px; cursor: pointer; font-weight: var(--weight-bold); list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 24px; top: 22px; font-family: var(--font-mono); font-size: 22px; }
.faq-item[open] summary::after { content: "−"; }
.faq-answer { padding: 0 24px 24px; color: var(--text-muted); }
.faq-answer p:last-child { margin-bottom: 0; }
.pricing-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: stretch; gap: 24px; }
.plan-card { position: relative; min-width: 0; padding: 32px; border-radius: var(--r-card); background: var(--bg-panel); box-shadow: var(--shadow-card); display: flex; flex-direction: column; }
.plan-card.is-current { box-shadow: inset 0 0 0 2px var(--text), var(--shadow-card); }
.plan-card.is-value { background: linear-gradient(155deg, var(--bg-panel), color-mix(in srgb, var(--gold) 10%, var(--bg-panel))); }
.plan-badge { align-self: flex-start; display: inline-flex; padding: 5px 12px; margin-bottom: 16px; border-radius: var(--r-pill); background: var(--text); color: var(--white); font-size: 12px; font-weight: var(--weight-bold); }
.plan-period { font-size: 14px; color: var(--text-muted); margin-bottom: 8px; }
.plan-price { margin: 8px 0 16px; font-family: var(--font-mono); font-size: 40px; font-weight: var(--weight-bold); letter-spacing: -.04em; line-height: 1.25; }
.plan-price small { font-family: var(--font-body); font-size: 15px; color: var(--text-muted); letter-spacing: 0; }
.plan-facts { list-style: none; padding: 0; margin: 8px 0 28px; }
.plan-facts li { padding-block: 8px; }
.plan-card .btn { margin-top: auto; width: 100%; }
.table-scroll { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-menu); background: var(--bg-panel); box-shadow: var(--shadow-chip); }
.data-table, .route-table { width: 100%; min-width: 680px; font-size: 15px; }
.data-table caption, .route-table caption { text-align: left; padding: 20px 24px; font-weight: var(--weight-bold); color: var(--text); }
.data-table th, .route-table th { padding: 18px 24px; background: var(--bg-panel-2); color: var(--text); font-weight: var(--weight-bold); white-space: nowrap; word-break: keep-all; }
.data-table td, .route-table td { padding: 18px 24px; border-top: 1px solid var(--border); color: var(--text); word-break: keep-all; }
.table-scroll th, .table-scroll td:first-child { color: var(--text); }
.route-group td { background: var(--bg-panel-2); font-weight: var(--weight-bold); }
.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 { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 24px; border-radius: var(--r-card); background: var(--bg-panel); box-shadow: var(--shadow-card); }
.platform-card > svg { width: 32px; height: 32px; margin-bottom: 24px; fill: currentColor; }
.platform-card h3 { font-size: 18px; margin-bottom: 12px; }
.platform-card .btn { margin-top: auto; padding-inline: 14px; font-size: 14px; white-space: nowrap; }
.article-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.article-card { min-width: 0; border-radius: var(--r-card); background: var(--bg-panel); padding: 28px; box-shadow: var(--shadow-card); }
.article-card h3 { font-size: 22px; margin-top: 20px; }
.article-card h3 a { display: block; }
.article-card p { color: var(--text-muted); }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 13px; color: var(--text-muted); }
.tag { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; padding: 4px 12px; border-radius: var(--r-pill); background: var(--bg-panel-2); color: var(--text); font-size: 12px; font-weight: var(--weight-semibold); }
.callout { margin: 24px 0; padding: 24px 28px; border-radius: var(--r-md); background: color-mix(in srgb, var(--sky) 8%, var(--bg-panel)); border-left: 4px solid var(--sky); color: var(--text); }
.callout p:last-child { margin-bottom: 0; }
.promo-block { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; margin-top: 48px; padding: 32px; border-radius: var(--r-card); background: var(--bg-panel-2); box-shadow: var(--shadow-card); }
.promo-copy { flex: 1; min-width: min(100%, 240px); }
.promo-copy strong { display: block; font-size: 24px; font-family: var(--font-display); }
.promo-copy p { margin: 8px 0 0; color: var(--text-muted); }
.promo-block .btn, .btn-secondary { flex-shrink: 0; white-space: nowrap; }
.float-cta { position: fixed; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 22px; border-radius: var(--r-pill); background: var(--accent); color: var(--white); font-size: 16px; font-weight: var(--weight-bold); box-shadow: inset 1px 1px 0 var(--white-40), 0 18px 34px -14px color-mix(in srgb, var(--accent) 70%, transparent); transition: background-color var(--time-fast), transform var(--time-fast); }
.float-cta:hover { background: var(--accent-dark); transform: translateY(-2px); }
.float-cta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
body:has(.float-cta)::after { content: ""; display: block; height: calc(88px + env(safe-area-inset-bottom, 0px)); background: var(--bg-panel-2); }
.feature-gallery { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: 64px; align-items: start; }
.feature-guide { position: sticky; top: calc(var(--nav-h) + 32px); min-width: 0; }
.feature-index { list-style: none; padding: 0; margin: 32px 0 0; }
.feature-index a { display: flex; align-items: center; min-height: 44px; gap: 12px; color: var(--text-muted); }
.feature-index a::before { content: ""; flex-shrink: 0; width: 7px; height: 7px; border-radius: var(--r-round); background: var(--border); }
.feature-index a.is-active { color: var(--text); }
.feature-index a.is-active::before { background: var(--accent); }
.feature-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.feature-card { min-width: 0; background: var(--bg-panel); border-radius: var(--r-card); padding: 32px; box-shadow: var(--shadow-card); }
.feature-card-wide { grid-column: 1 / -1; }
.feature-card h3 { margin-top: 24px; }
.feature-mini { background: var(--bg-panel-2); padding: 20px; border-radius: var(--r-md); margin-top: 24px; }
.topology { display: block; width: 100%; height: 100px; color: var(--sky); }
.topology path { fill: none; stroke: currentColor; stroke-width: 2; }
.blog-hero { display: grid; grid-template-columns: minmax(0,3fr) minmax(0,1fr); gap: 32px; align-items: start; }
.blog-meta { min-width: 0; padding: 24px; border: 1px solid var(--border); border-radius: var(--r-md); display: grid; gap: 16px; }
.swatch-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.swatch { min-width: 0; padding: 12px; border-radius: var(--r-md); background: var(--bg-panel); box-shadow: var(--shadow-chip); }
.swatch-sample { display: block; height: 64px; border-radius: var(--r-sm); margin-bottom: 12px; }
.swatch code { display: block; background: var(--clear); padding: 0; }
.sw-bg { background: var(--bg); }
.sw-panel { background: var(--bg-panel); box-shadow: inset 0 0 0 1px var(--border); }
.sw-panel2 { background: var(--bg-panel-2); }
.sw-border { background: var(--border); }
.sw-accent { background: var(--accent); }
.sw-accent-dark { background: var(--accent-dark); }
.sw-text { background: var(--text); }
.sw-muted { background: var(--text-muted); }
.sw-success { background: var(--success); }
.sw-warn { background: var(--warn); }
.sw-error { background: var(--error); }
.sw-violet { background: var(--violet); }
.sw-sky { background: var(--sky); }
.sw-orchid { background: var(--orchid); }
.sw-grass { background: var(--grass); }
.sw-amber { background: var(--amber); }
.sw-gold { background: var(--gold); }
.sw-hero { background: linear-gradient(var(--hero-top),var(--hero-bottom)); }
.sample-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 24px; }
.type-display { font-family: var(--font-display); font-size: 40px; font-weight: var(--weight-display); line-height: 1.2; }
.type-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
@media (max-width: 1180px) {
  .chip, .tile-info { display: none; }
  .platform-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 960px) {
  .fact-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .pricing-grid { gap: 16px; }
  .plan-card { padding: 24px; }
  .feature-gallery { gap: 32px; }
}
@media (max-width: 768px) {
  .hero { min-height: auto; }
  .hero-inner { padding: 64px 20px 56px; }
  .d-l2, .d-l3, .d-r2, .d-r3 { display: none; }
  .d-l1 { --s: 120px; --rot: -12deg; left: -44px; top: 24px; }
  .d-r1 { --s: 120px; --rot: 12deg; right: -44px; top: 24px; }
  .hero h1 { font-size: clamp(30px,9vw,40px); }
  .hero-sub { font-size: 17px; }
  .platforms { margin-top: 28px; gap: 8px; }
  .plat { padding-inline: 12px; height: 40px; font-size: 12px; gap: 6px; }
  .flags { gap: 8px 12px; }
  .flag { font-size: 12px; }
  .trust { font-size: 12px; gap: 5px 12px; }
  .trust li + li::before { display: none; }
  .badge-row { gap: 16px; }
  .badge { padding-inline: 16px; }
  .badge strong { font-size: 17px; }
  .pricing-grid, .article-grid { grid-template-columns: minmax(0,1fr); }
  .feature-gallery { display: block; }
  .feature-guide { position: static; }
  .feature-index { display: flex; overflow-x: auto; gap: 8px; margin: 0 0 24px; padding-bottom: 8px; }
  .feature-index li { flex-shrink: 0; margin: 0; }
  .feature-index a { padding: 8px 16px; border-radius: var(--r-pill); background: var(--bg-panel-2); white-space: nowrap; }
  .feature-cards { grid-template-columns: minmax(0,1fr); }
  .feature-card-wide { grid-column: auto; }
  .blog-hero { display: flex; flex-direction: column-reverse; }
  .blog-meta { width: 100%; display: flex; flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .hero-decor, .hero-atmos { max-width: 100%; }
  .swatch-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .proof { padding-top: 72px; padding-bottom: 64px; }
  .badge-row { grid-template-columns: minmax(0,1fr); gap: 64px; }
  .badge { padding-top: 48px; }
  .factband { padding: 56px 20px 64px; }
  .factband h2 { font-size: 32px; }
  .fact-grid { grid-template-columns: minmax(0,1fr); }
  .platform-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .platform-card { padding: 20px 16px; }
  .promo-block { padding: 24px; }
  .float-cta { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom,0px)); height: 48px; padding-inline: 18px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .drift, .chip { animation: none; }
}