/* orlov-marketing.pro — bento v1.
   Components ported from the SEO Factory bento demo (admin-design-system.html);
   every colour, size and duration comes from site-tokens.css. This file adds
   layout and the site-only parts: header, mobile menu, footer, photo tile,
   blog cards, timeline. No raw hex here except white glyphs on colour tiles. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-ink);
  color-scheme: light;
  font-family: var(--font-sans);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
strong, b { font-weight: var(--font-weight-strong); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.num { font-variant-numeric: tabular-nums; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-sm { width: 16px; height: 16px; }

.skip { position: absolute; left: var(--space-4); top: -60px; z-index: var(--z-toast); padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); background: var(--color-cta); color: var(--color-cta-foreground); font-weight: 600; }
.skip:focus { top: var(--space-2); }

/* ── Layout ─────────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--container-page); margin-inline: auto; padding-inline: var(--space-page-x); }
main { padding-block: var(--space-4) var(--space-16); }
.section { padding-top: var(--space-16); }
.section:first-child { padding-top: var(--space-4); }
.section-head { display: grid; gap: var(--space-2); margin-bottom: var(--space-6); max-width: 760px; }
.section-head h2 { font-size: var(--font-size-title-lg); font-weight: var(--font-weight-title); line-height: var(--line-height-title); letter-spacing: -0.01em; text-wrap: balance; }
.section-head p { color: var(--color-ink-muted); font-size: var(--font-size-body-lg); max-width: 62ch; }
.section-foot { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-top: var(--space-6); }
.eyebrow { color: var(--color-ink-subtle); font-size: var(--font-size-label); font-weight: var(--font-weight-label); }
.caption { color: var(--color-ink-subtle); font-size: var(--font-size-caption); line-height: var(--line-height-caption); }
.muted { color: var(--color-ink-muted); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.stack { display: grid; gap: var(--space-3); }
.lead { color: var(--color-ink-muted); font-size: var(--font-size-body-lg); max-width: 60ch; }
.prose { display: grid; gap: var(--space-4); color: var(--color-ink-muted); max-width: 68ch; }

/* ── Header ─────────────────────────────────────────────────────── */
.topbar { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--color-background); transition: box-shadow var(--duration-default) var(--easing-out); }
.topbar.is-scrolled { box-shadow: 0 1px 0 var(--color-border); }
.topbar-row { display: flex; align-items: center; gap: var(--space-3); min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-title-sm); font-weight: var(--font-weight-title); letter-spacing: -0.02em; white-space: nowrap; }
.brand-mark { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; background: var(--color-cta); color: var(--color-cta-foreground); font-size: 13px; font-weight: 800; letter-spacing: -0.04em; }
.nav { display: none; align-items: center; gap: var(--space-1); margin-left: auto; }
.nav a { display: inline-flex; align-items: center; height: 40px; padding: 0 var(--space-3); border-radius: var(--radius-full); color: var(--color-ink-muted); font-size: var(--font-size-label); font-weight: 500; white-space: nowrap; transition: background-color var(--duration-fast) var(--easing-out), color var(--duration-fast) var(--easing-out); }
.nav a:hover { background: var(--color-surface); color: var(--color-ink); }
.nav a[aria-current="page"] { background: var(--color-surface); color: var(--color-ink); font-weight: 600; }
.topbar .btn-cta { margin-left: auto; }
.burger { display: inline-grid; width: 40px; height: 40px; place-items: center; padding: 0; border: 0; border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-ink); transition: background-color var(--duration-fast) var(--easing-out); }
.burger:hover { background: var(--color-surface-hover); }
.burger .icon-close { display: none; }
.burger[aria-expanded="true"] .icon-open { display: none; }
.burger[aria-expanded="true"] .icon-close { display: block; }
@media (min-width: 1120px) {
  .nav { display: inline-flex; }
  .topbar .btn-cta { margin-left: var(--space-2); }
  .burger { display: none; }
}
@media (max-width: 479px) { .topbar .btn-cta .long { display: none; } }

.mobile-menu { position: fixed; z-index: var(--z-overlay); inset: 64px 0 0; overflow-y: auto; padding: var(--space-4) var(--space-page-x) var(--space-8); background: var(--color-background); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity calc(var(--duration-default) * var(--duration-exit-ratio)) var(--easing-in), transform calc(var(--duration-default) * var(--duration-exit-ratio)) var(--easing-in), visibility 0s linear calc(var(--duration-default) * var(--duration-exit-ratio)); }
.mobile-menu.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity var(--duration-default) var(--easing-out), transform var(--duration-default) var(--easing-out), visibility 0s; }
.mobile-menu .group-list { margin: 0; padding: var(--space-2); border-radius: var(--card-radius); background: var(--color-surface); }
.mobile-menu .btn { width: 100%; margin-top: var(--space-4); }
body.menu-open { overflow: hidden; }

/* ── Bento grid ─────────────────────────────────────────────────── */
.bento { display: grid; grid-template-columns: repeat(var(--bento-columns), minmax(0, 1fr)); gap: var(--bento-gap); }
.b-hero, .b-l, .b-m, .b-wide, .b-full, .b-s, .b-third { grid-column: span 2; }
@media (min-width: 480px) { .b-s { grid-column: span 1; } }
@media (min-width: 768px) {
  .b-hero, .b-l, .b-wide, .b-full { grid-column: span 6; }
  .b-m, .b-s, .b-third { grid-column: span 3; }
  .r2 { grid-row: span 2; }
}
@media (min-width: 1024px) {
  .b-hero { grid-column: span 7; }
  .b-l { grid-column: span 6; }
  .b-m { grid-column: span 4; }
  .b-third { grid-column: span 4; }
  .b-s { grid-column: span 3; }
  .b-side { grid-column: span 5; }
  .b-wide { grid-column: span 8; }
  .b-full { grid-column: 1 / -1; }
}
@media (min-width: 768px) and (max-width: 1023px) { .b-side { grid-column: span 6; } }
@media (max-width: 767px) { .b-side { grid-column: span 2; } }

.tile-card { position: relative; display: flex; min-width: 0; flex-direction: column; gap: var(--space-4); padding: var(--card-pad); border-radius: var(--card-radius); background: var(--card-bg); }
.tile-card h3 { font-size: var(--font-size-title-sm); font-weight: var(--font-weight-strong); line-height: var(--line-height-title); text-wrap: balance; }
.tile-card p { color: var(--color-ink-muted); }
.tile-card > p + p { margin-top: calc(var(--space-2) * -1); }
.tile-head { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.tile-foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
a.tile-card { transition: background-color var(--duration-fast) var(--easing-out), transform var(--duration-instant) var(--easing-out); }
a.tile-card:hover { background: var(--color-surface-hover); }
a.tile-card:active { transform: scale(0.99); }
a.tile-card .more { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: auto; color: var(--color-ink); font-size: var(--font-size-label); font-weight: 600; }
a.tile-card .more .icon { transition: transform var(--duration-fast) var(--easing-out); }
a.tile-card:hover .more .icon { transform: translateX(3px); }
.tile-num { color: var(--color-ink-placeholder); font-size: var(--font-size-label); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Reveal: tiles cascade in once when the grid enters the viewport. */
.js .reveal > * { opacity: 0; }
.js .reveal.is-entering > * { opacity: 1; animation: tile-in calc(var(--duration-slow) * 1.5) var(--easing-out) backwards; animation-delay: calc(var(--i, 0) * var(--stagger)); }
@keyframes tile-in { from { opacity: 0; transform: translateY(12px) scale(0.985); } }

/* Icon tiles: white glyph on a category square. */
.tile { display: inline-grid; width: var(--tile-size); height: var(--tile-size); flex: none; place-items: center; border-radius: var(--tile-radius); color: #FFFFFF; font-size: 13px; font-weight: 700; }
.tile-lg { width: var(--tile-size-lg); height: var(--tile-size-lg); }
.tile-blue { background: var(--tile-blue); } .tile-violet { background: var(--tile-violet); } .tile-orange { background: var(--tile-orange); }
.tile-teal { background: var(--tile-teal); } .tile-green { background: var(--tile-green); } .tile-red { background: var(--tile-red); }
.tile-dark { background: var(--tile-dark); }

/* Dark hero tile: one per screen. */
.tile-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--space-6); border-radius: var(--radius-xl); background: var(--color-surface-strong); color: var(--color-ink-inverse); padding: var(--space-6); }
@media (min-width: 1024px) { .tile-hero { padding: var(--space-10); } }
.tile-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 88% -10%, rgba(255, 255, 255, 0.12), transparent 42%); pointer-events: none; }
.tile-hero > * { position: relative; }
.tile-hero .eyebrow { color: var(--color-ink-inverse-muted); }
.tile-hero h1, .tile-hero .display { font-size: var(--font-size-display); font-weight: var(--font-weight-display); line-height: var(--line-height-display); letter-spacing: var(--letter-spacing-display); text-wrap: balance; }
.tile-hero p { color: var(--color-ink-inverse-muted); font-size: var(--font-size-body-lg); max-width: 56ch; }
.tile-hero strong { color: var(--color-ink-inverse); }
.tile-hero .hero-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.dark-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dark-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px var(--space-3); border-radius: var(--radius-full); background: var(--color-surface-strong-2); color: var(--color-ink-inverse-muted); font-size: var(--font-size-caption); font-weight: 500; }
.dark-chip b { color: var(--color-ink-inverse); font-weight: 700; font-variant-numeric: tabular-nums; }
.hero-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-3); }
.hero-stat { padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface-strong-2); }
.hero-stat .stat-sm { color: var(--color-ink-inverse); }
.hero-stat .caption { color: var(--color-ink-inverse-muted); margin-top: var(--space-1); }

/* Page hero on light: for inner pages the dark tile is the hero. */
.page-crumb { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-ink-inverse-muted); font-size: var(--font-size-label); font-weight: 500; }
.page-crumb a:hover { color: var(--color-ink-inverse); }

/* Photo tile */
.photo-tile { position: relative; overflow: hidden; min-height: 320px; border-radius: var(--radius-xl); background: var(--color-surface); }
.photo-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; mix-blend-mode: multiply; }
.photo-tile .photo-cap { position: absolute; left: var(--space-4); bottom: var(--space-4); display: inline-flex; align-items: center; gap: var(--space-2); height: 36px; padding: 0 var(--space-4) 0 var(--space-3); border-radius: var(--radius-full); background: var(--color-surface-raised); font-size: var(--font-size-label); font-weight: 600; box-shadow: var(--shadow-float); }

/* Stats */
.stat { font-size: var(--font-size-stat); font-weight: var(--font-weight-display); line-height: 1; letter-spacing: var(--letter-spacing-display); font-variant-numeric: tabular-nums; }
.stat small { font-size: 0.5em; font-weight: 700; color: var(--color-ink-subtle); letter-spacing: 0; }
.stat-sm { font-size: var(--font-size-stat-sm); font-weight: var(--font-weight-display); line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat-tile { justify-content: space-between; }
.stat-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.stat-pair > div { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-raised); }
.stat-pair .caption { margin-top: 2px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-2); }
.stat-grid > div { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-raised); }
.stat-grid .caption { margin-top: 2px; }

/* Bars */
.bars { display: flex; align-items: flex-end; gap: 4px; height: 56px; }
.bar { flex: 1; min-width: 0; height: var(--h); border-radius: 5px 5px 3px 3px; background: var(--chart-bar); transform-origin: bottom; }
.bar.is-active { background: var(--chart-bar-active); }
.js .reveal.is-entering .bar { animation: bar-in var(--duration-count) var(--easing-out) backwards; animation-delay: calc(200ms + var(--b, 0) * 30ms); }
@keyframes bar-in { from { transform: scaleY(0); } }

/* Grouped list */
.group-list { display: grid; margin-inline: calc(var(--space-2) * -1); }
.group-row { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); min-height: var(--row-height); padding: var(--row-pad-y) var(--space-2); border-radius: var(--radius-md); transition: background-color var(--duration-fast) var(--easing-out); }
.group-row + .group-row::before { content: ""; position: absolute; top: 0; left: calc(var(--tile-size) + var(--space-5)); right: var(--space-2); height: 1px; background: var(--color-border); }
a.group-row:hover { background: var(--color-surface-hover); }
a.group-row:hover::before, a.group-row:hover + .group-row::before { opacity: 0; }
.group-row strong { display: block; font-weight: 600; line-height: var(--line-height-title); }
.group-row .caption, .group-row p { margin-top: 2px; }
.group-row p { color: var(--color-ink-muted); font-size: var(--font-size-label); }
.group-row .chev { color: var(--color-ink-placeholder); transition: transform var(--duration-fast) var(--easing-out); }
a.group-row:hover .chev { transform: translateX(3px); color: var(--color-ink-subtle); }
.group-row.no-tile { grid-template-columns: minmax(0, 1fr) auto; }
.mobile-menu .group-row { grid-template-columns: minmax(0, 1fr) auto; font-weight: 600; }
.mobile-menu .group-row + .group-row::before { left: var(--space-2); }

/* Timeline (about) */
.timeline .group-row { grid-template-columns: 128px minmax(0, 1fr); align-items: start; }
.timeline .group-row + .group-row::before { left: calc(128px + var(--space-5)); }
@media (max-width: 479px) { .timeline .group-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); } .timeline .group-row + .group-row::before { left: var(--space-2); } }
.timeline .year { font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* Checklist */
.checklist { display: grid; gap: var(--space-3); }
.checklist li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-3); color: var(--color-ink-muted); }
.checklist li::before { content: ""; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: var(--color-success-mark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.tile-hero .checklist li { color: var(--color-ink-inverse-muted); }

/* ── Buttons ────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--button-height); padding: 0 var(--button-pad-x); border: 0; border-radius: var(--radius-full); font-size: 15px; font-weight: 600; line-height: 1; white-space: nowrap; transition: background-color var(--duration-fast) var(--easing-out), color var(--duration-fast) var(--easing-out), transform var(--duration-instant) var(--easing-out); -webkit-tap-highlight-color: transparent; }
.btn:active { transform: scale(var(--press-scale)); }
.btn-primary { background: var(--button-primary-bg); color: var(--button-primary-fg); }
.btn-primary:hover { background: var(--button-primary-bg-hover); }
.btn-secondary { background: var(--color-surface); color: var(--color-ink); }
.btn-secondary:hover { background: var(--color-surface-hover); }
.tile-card .btn-secondary { background: var(--color-surface-raised); }
.tile-card .btn-secondary:hover { background: var(--color-surface-pressed); }
.btn-ghost { background: transparent; color: var(--color-ink-muted); }
.btn-ghost:hover { background: var(--color-surface); color: var(--color-ink); }
.btn-inverse { background: var(--color-cta-inverse); color: var(--color-cta-inverse-foreground); }
.btn-inverse:hover { background: var(--gray-200); }
.btn-ghost-inverse { background: var(--color-surface-strong-2); color: var(--color-ink-inverse); }
.btn-ghost-inverse:hover { background: rgba(255, 255, 255, 0.16); }
.btn-sm { height: var(--button-height-sm); padding: 0 14px; font-size: var(--font-size-label); }
.btn-lg { height: var(--button-height-lg); padding: 0 var(--space-6); font-size: var(--font-size-body); }
.link { color: var(--color-link); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.link:hover { text-decoration-thickness: 2px; }

/* ── Badges, chips ──────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: var(--radius-full); font-size: var(--font-size-caption); font-weight: 600; white-space: nowrap; }
.badge-success { background: var(--color-success-fill); color: var(--color-success); }
.badge-info { background: var(--color-info-fill); color: var(--color-info); }
.badge-neutral { background: var(--color-neutral-fill); color: var(--color-neutral); }
.badge-raised { background: var(--color-surface-raised); color: var(--color-ink-muted); }
.badge-mark { background: var(--color-warning-mark); color: var(--color-ink); }
.badge-new { height: 22px; padding: 0 8px; border-radius: var(--radius-sm); background: var(--color-surface-strong); color: var(--color-ink-inverse); font-size: 12px; }
.meta-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.meta-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 var(--space-3); border-radius: var(--radius-full); background: var(--color-surface-raised); color: var(--color-ink-muted); font-size: var(--font-size-caption); font-weight: 500; }
.live-dot { position: relative; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--color-success-mark); }
.live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: ping 1.6s var(--easing-out) infinite; }
@keyframes ping { from { transform: scale(1); opacity: 0.55; } to { transform: scale(2.6); opacity: 0; } }

/* ── Price / package tiles ──────────────────────────────────────── */
.price-tile .price { font-size: var(--font-size-stat-sm); font-weight: var(--font-weight-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.price-tile .price small { font-size: var(--font-size-label); font-weight: 500; color: var(--color-ink-subtle); letter-spacing: 0; }
.price-tile.is-featured { background: var(--color-surface-strong); color: var(--color-ink-inverse); }
.price-tile.is-featured p, .price-tile.is-featured .checklist li, .price-tile.is-featured .price small { color: var(--color-ink-inverse-muted); }
.price-tile.is-featured .price { color: var(--color-ink-inverse); }

/* ── Blog cards ─────────────────────────────────────────────────── */
.articles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--space-4); }
.article-card { position: relative; display: flex; min-width: 0; flex-direction: column; border-radius: var(--card-radius); background: var(--card-bg); transition: background-color var(--duration-fast) var(--easing-out); }
a.article-card:hover { background: var(--color-surface-hover); }
.cover { position: relative; overflow: hidden; margin: var(--space-2); border-radius: 14px; aspect-ratio: 16 / 10; background: var(--color-surface-pressed); }
.cover img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--easing-out); }
a.article-card:hover .cover img { transform: scale(1.03); }
.cover .badge { position: absolute; left: var(--space-3); top: var(--space-3); }
.card-body { display: flex; flex: 1; flex-direction: column; gap: var(--space-2); padding: var(--space-2) var(--space-4) var(--space-4); }
.card-body h3 { font-size: var(--font-size-title-sm); font-weight: 600; line-height: var(--line-height-title); }
.card-body p { color: var(--color-ink-muted); font-size: var(--font-size-label); }
.card-meta { margin-top: auto; padding-top: var(--space-2); color: var(--color-ink-subtle); font-size: var(--font-size-caption); }

/* ── Footer ─────────────────────────────────────────────────────── */
.footer { padding-bottom: var(--space-8); }
.footer-card { display: grid; gap: var(--space-8); padding: var(--space-6); border-radius: var(--radius-xl); background: var(--color-surface); }
@media (min-width: 768px) { .footer-card { grid-template-columns: 2fr 1fr 1fr; padding: var(--space-8); } }
.footer-card p { color: var(--color-ink-muted); font-size: var(--font-size-label); max-width: 40ch; margin-top: var(--space-3); }
.footer-card h4 { color: var(--color-ink-subtle); font-size: var(--font-size-caption); font-weight: 600; margin-bottom: var(--space-3); }
.footer-links { display: grid; gap: var(--space-2); }
.footer-links a { color: var(--color-ink-muted); font-size: var(--font-size-label); transition: color var(--duration-fast) var(--easing-out); }
.footer-links a:hover { color: var(--color-ink); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); padding: var(--space-4) var(--space-2) 0; color: var(--color-ink-subtle); font-size: var(--font-size-caption); }
.social { display: inline-flex; margin-top: var(--space-4); }

/* ── Motion preferences ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .js .reveal > * { opacity: 1; }
  .js .reveal.is-entering > *, .js .reveal.is-entering .bar { animation: none; }
  .live-dot::after { animation: none; }
}

/* ── Closing CTA tile ───────────────────────────────────────────── */
.cta-tile { gap: var(--space-4); padding: var(--space-8) var(--space-6); border-radius: var(--radius-xl); }
@media (min-width: 1024px) { .cta-tile { padding: var(--space-12); } }
.cta-title { max-width: 24ch; font-size: var(--font-size-title-lg); font-weight: var(--font-weight-display); line-height: var(--line-height-title); letter-spacing: var(--letter-spacing-display); text-wrap: balance; }
@media (min-width: 1024px) { .cta-title { font-size: 2.25rem; line-height: var(--line-height-display); } }
@media (max-width: 479px) {
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .hero-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ── Inner-page parts ───────────────────────────────────────────── */
.sub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--space-2); }
.sub-grid > div { display: grid; align-content: start; gap: var(--space-1); padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-raised); }
.sub-grid h4 { color: var(--color-ink-subtle); font-size: var(--font-size-caption); font-weight: 600; }
.sub-grid p { color: var(--color-ink-muted); font-size: var(--font-size-label); }
.case-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.case-head h3 { font-size: var(--font-size-title); font-weight: var(--font-weight-title); }
.price-big { font-size: var(--font-size-stat); font-weight: var(--font-weight-display); line-height: 1; letter-spacing: var(--letter-spacing-display); font-variant-numeric: tabular-nums; }
.price-big small { font-size: 0.45em; font-weight: 600; color: var(--color-ink-subtle); letter-spacing: 0; }
.price-tile .btn { align-self: flex-start; }
.price-tile .tile-foot .btn { width: 100%; }
.split { display: grid; gap: var(--space-6); }
@media (min-width: 1024px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; } }
.photo-cover img { mix-blend-mode: normal; }

/* Blog: category chips + pastel covers */
.chip-group { display: inline-flex; flex-wrap: nowrap; gap: var(--space-1); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.chip-group::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; height: var(--chip-height); padding: 0 14px; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--color-ink-muted); font-size: var(--font-size-label); font-weight: 500; white-space: nowrap; transition: background-color var(--duration-default) var(--easing-out), color var(--duration-default) var(--easing-out); }
.chip:hover { color: var(--color-ink); background: var(--color-surface); }
.chip[aria-pressed="true"] { background: var(--chip-selected-bg); color: var(--chip-selected-fg); font-weight: 600; }
.chip-divider { align-self: center; width: 1px; height: 20px; margin-inline: var(--space-1); background: var(--color-border); flex: none; }
.cover { display: grid; place-items: center; }
.cover .tile { transform: rotate(-6deg); transition: transform var(--duration-slow) var(--easing-out); }
a.article-card:hover .cover .tile { transform: rotate(0) scale(1.06); }
.cover-blue { background: radial-gradient(circle at 30% 20%, var(--gray-0) 0%, transparent 55%), var(--blue-100); }
.cover-orange, .cover-red { background: radial-gradient(circle at 20% 80%, var(--gray-0) 0%, transparent 55%), var(--red-100); }
.cover-teal, .cover-green { background: radial-gradient(circle at 70% 70%, var(--gray-0) 0%, transparent 55%), var(--green-100); }
.cover-violet { background: radial-gradient(circle at 70% 20%, var(--gray-0) 0%, transparent 55%), var(--blue-50); }
.article-card.is-hidden { display: none; }