.kombok-page {
  overflow: hidden;
  background: var(--color-ink-950);
}

.kombok-page ul { list-style: none !important; }
.kombok-page .section { position: relative; }
.kombok-section-head { min-width: 0; }
.kombok-section-head h2 { margin-block-end: var(--space-4); }
.kombok-section-head > p:not(.eyebrow) { color: var(--color-text-muted); }
.kombok-text-link { display: inline-flex; min-height: 2.75rem; align-items: center; gap: var(--space-2); color: var(--color-mist-300); font-weight: 700; text-decoration: none; }
.kombok-text-link:hover, .kombok-text-link:focus-visible { color: var(--color-electric-400); text-decoration: underline; }

.kombok-hero { padding-block-start: clamp(var(--space-7), 7vw, var(--space-10)); }
.kombok-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(20rem, 5fr); gap: var(--space-6); align-items: center; }
.kombok-hero__grid > * { min-width: 0; }
.kombok-hero__copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.kombok-hero__copy h1, .kombok-hero__copy p { margin: 0; }
.kombok-hero__copy h1 { max-width: 40.625rem; font-size: clamp(2.125rem, 4.7vw, 3.5rem); }
.kombok-hero__lead { max-width: 35rem; color: var(--color-mist-100); font-size: var(--text-lead); line-height: var(--line-lead); }
.kombok-hero__support { max-width: 35rem; color: var(--color-text-muted); }
.kombok-hero__actions { width: 100%; }
.kombok-hero__note { display: flex; max-width: 35rem; align-items: center; flex-wrap: wrap; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--text-small); }
.kombok-hero__visual { position: relative; width: 100%; min-width: 0; min-height: 25rem; margin: 0; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-ink-900); box-shadow: var(--shadow-elevated); }
.kombok-hero__visual::after, .kombok-wave__image::after, .kombok-feature-link::after { position: absolute; inset: 0; background: rgb(9 11 16 / 28%); content: ""; pointer-events: none; }
.kombok-hero__visual img { width: 100%; height: 100%; object-fit: cover; object-position: 68% center; }
.kombok-hero__path { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--color-electric-400); stroke-width: 3; filter: drop-shadow(0 0 8px rgb(91 214 255 / 45%)); pointer-events: none; }

.kombok-pillars__head { max-width: 40rem; }
.kombok-pillars__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) clamp(var(--space-6), 8vw, var(--space-10)); margin-top: var(--space-7); }
.kombok-pillars__grid > * { min-width: 0; }
.kombok-pillar { position: relative; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--space-4); min-width: 0; padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.kombok-pillar__number { color: var(--color-amber-400); font-family: var(--font-heading); font-size: 1.75rem; font-weight: 700; line-height: 1; }
.kombok-pillar h3, .kombok-pillar p { margin: 0; }
.kombok-pillar h3 { margin-bottom: var(--space-3); font-size: 1.75rem; }
.kombok-pillar p { max-width: 21.25rem; color: var(--color-text-muted); }
.kombok-pillar:hover { border-color: var(--color-electric-400); }

.kombok-reading { background: linear-gradient(180deg, transparent, rgb(15 18 25 / 56%), transparent); }
.kombok-reading__head { max-width: 45rem; }
.kombok-reading__layout { display: grid; grid-template-columns: minmax(0, 8fr) minmax(17.5rem, 4fr); gap: var(--space-8); align-items: start; margin-top: var(--space-6); }
.kombok-reading__layout > * { min-width: 0; }
.kombok-reading__article { display: flex; min-width: 0; flex-direction: column; gap: var(--space-7); max-width: 45rem; }
.kombok-decision { min-width: 0; }
.kombok-decision h3 { font-size: 1.75rem; }
.kombok-decision__lead { max-width: 42rem; color: var(--color-mist-100); font-size: var(--text-lead); line-height: var(--line-lead); }
.kombok-decision p { max-width: 45rem; color: var(--color-text-muted); }
.kombok-mini-list { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; color: var(--color-mist-100); }
.kombok-mini-list li { position: relative; padding-inline-start: var(--space-4); }
.kombok-mini-list li::before { position: absolute; left: 0; top: 0.7em; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--color-electric-400); content: ""; }
.kombok-mini-diagram { position: relative; display: flex; min-height: 11.875rem; flex-direction: column; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-5); padding: var(--space-4); overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: rgb(23 28 38 / 62%); }
.kombok-mini-diagram svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--color-electric-400); stroke-width: 3; pointer-events: none; }
.kombok-mini-diagram circle { fill: var(--color-amber-400); stroke: none; }
.kombok-mini-diagram span { position: relative; max-width: 20rem; color: var(--color-mist-100); font-size: var(--text-small); font-weight: 700; }
.kombok-check { display: flex; min-width: 0; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-ink-800); }
.kombok-check > * { margin: 0; }
.kombok-check > span { color: var(--color-amber-400); font-family: var(--font-heading); font-size: 3.5rem; font-weight: 700; line-height: 0.8; }
.kombok-check h3 { font-size: 1.75rem; }
.kombok-check p { color: var(--color-text-muted); }
.kombok-check--flow { display: none; }
.kombok-risk { color: var(--color-coral-400); }

.kombok-roles__head { max-width: 38.75rem; }
.kombok-roles__list { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-7); }
.kombok-roles__list > * { min-width: 0; }
.kombok-role { display: flex; min-width: 0; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-ink-900); transition: transform var(--transition-base), border-color var(--transition-base); }
.kombok-role:hover { border-color: rgb(91 214 255 / 65%); transform: translateY(-2px); }
.kombok-role h3, .kombok-role p { margin: 0; }
.kombok-role h3 { font-size: 1.75rem; }
.kombok-role p { max-width: 28.75rem; color: var(--color-text-muted); }
.kombok-role--one { grid-column: 1 / span 5; }
.kombok-role--two { grid-column: 7 / span 4; margin-top: var(--space-7); background: var(--color-ink-800); }
.kombok-role--three { grid-column: 5 / span 5; }
.kombok-role__signal { width: 5rem; height: 2.5rem; border: 2px solid var(--color-electric-400); border-right-color: transparent; border-bottom-color: transparent; border-radius: 100% 0 0 0; }
.kombok-roles > .container > .kombok-text-link { margin-top: var(--space-6); }

.kombok-states { background: rgb(15 18 25 / 58%); }
.kombok-states__grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-7); }
.kombok-states__grid::before { position: absolute; top: 1.2rem; right: 10%; left: 10%; height: 1px; background: linear-gradient(90deg, var(--color-amber-400), var(--color-electric-400), var(--color-amber-400)); content: ""; pointer-events: none; }
.kombok-state { position: relative; display: flex; min-width: 0; flex-direction: column; gap: var(--space-3); padding-top: var(--space-6); }
.kombok-state--hold { margin-top: var(--space-5); }
.kombok-state > * { margin: 0; }
.kombok-state__number { position: relative; z-index: 1; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: 1px solid var(--color-amber-400); border-radius: 50%; background: var(--color-ink-900); color: var(--color-amber-400); font-family: var(--font-heading); font-weight: 700; }
.kombok-state h3 { font-size: 1.75rem; }
.kombok-state p { max-width: 21.25rem; color: var(--color-text-muted); }
.kombok-states__quote { max-width: 38.75rem; margin: var(--space-8) auto 0; padding-top: var(--space-5); border-top: 1px solid var(--color-border); color: var(--color-mist-100); font-size: var(--text-lead); line-height: var(--line-lead); text-align: center; }

.kombok-wave__feature { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-6); align-items: center; margin-top: var(--space-6); }
.kombok-wave__feature > * { min-width: 0; }
.kombok-wave__image { position: relative; min-height: 25rem; margin: 0; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-ink-900); }
.kombok-wave__image img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.kombok-wave__image figcaption { position: absolute; z-index: 1; right: var(--space-4); bottom: var(--space-4); left: var(--space-4); color: var(--color-mist-100); font-size: var(--text-small); }
.kombok-wave__intro { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.kombok-wave__intro p { max-width: 29.375rem; margin: 0; color: var(--color-text-muted); }
.kombok-wave__rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-7); }
.kombok-wave__rules > * { min-width: 0; }
.kombok-wave__rules article { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--space-3); }
.kombok-wave__rules article > span { color: var(--color-amber-400); font-family: var(--font-heading); font-size: 1.75rem; font-weight: 700; }
.kombok-wave__rules h3 { margin-bottom: var(--space-3); font-size: 1.5rem; }
.kombok-wave__rules p { max-width: 22.5rem; color: var(--color-text-muted); }
.kombok-wave__rules .kombok-text-link { margin-top: var(--space-2); }

.kombok-upgrades__head { max-width: 41.25rem; }
.kombok-upgrades__bands { display: flex; min-width: 0; flex-direction: column; gap: var(--space-4); margin-top: var(--space-7); }
.kombok-upgrades__bands article { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr) minmax(0, 2fr); gap: var(--space-5); min-width: 0; padding: var(--space-5) 0; border-top: 1px solid var(--color-border); }
.kombok-upgrades__bands article > * { min-width: 0; }
.kombok-upgrades__bands article:last-child { border-bottom: 1px solid var(--color-border); }
.kombok-upgrades__bands article:nth-child(2) { padding-inline: var(--space-5); border-radius: var(--radius-sm); background: rgb(23 28 38 / 62%); }
.kombok-band__label { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.kombok-band__label > span:first-child:not(.tag) { width: 3rem; height: 1px; background: var(--color-electric-400); }
.kombok-band__label h3 { margin: 0; font-size: 1.75rem; }
.kombok-upgrades__bands p { max-width: 32.5rem; margin: 0; color: var(--color-text-muted); }
.kombok-learning { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-6); align-items: stretch; margin-top: var(--space-7); }
.kombok-learning > * { min-width: 0; }
.kombok-learning__primary { display: flex; min-height: 9rem; flex-direction: column; justify-content: center; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-ink-800); color: var(--color-mist-100); text-decoration: none; transition: transform var(--transition-base), border-color var(--transition-base); }
.kombok-learning__primary:hover, .kombok-learning__primary:focus-visible { border-color: var(--color-electric-400); color: var(--color-mist-100); text-decoration: none; transform: translateY(-2px); }
.kombok-learning__primary strong { font-family: var(--font-heading); font-size: 1.75rem; }
.kombok-learning__primary > span:last-child { color: var(--color-electric-400); }
.kombok-learning__secondary { display: flex; min-height: 4.5rem; flex-direction: column; justify-content: center; gap: var(--space-2); color: var(--color-mist-100); font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; }
.kombok-learning__secondary span { color: var(--color-text-muted); font-family: var(--font-body); font-size: var(--text-small); font-weight: 400; }

.kombok-checklist__layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-6); }
.kombok-checklist__layout > * { min-width: 0; }
.kombok-checklist__content { max-width: 46.25rem; }
.kombok-checklist__content .kombok-section-head { max-width: 35rem; }
.kombok-checklist__list { display: flex; flex-direction: column; gap: var(--space-5); margin: var(--space-6) 0 0; padding: 0; }
.kombok-checklist__list li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-4); min-width: 0; padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-border); }
.kombok-checklist__list li > * { min-width: 0; }
.kombok-checklist__list > li > span { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; background: rgb(255 184 74 / 14%); color: var(--color-amber-400); font-family: var(--font-heading); font-weight: 700; }
.kombok-checklist__list h3 { margin-bottom: var(--space-2); font-size: 1.5rem; }
.kombok-checklist__list p { color: var(--color-text-muted); }
.kombok-checklist__motif { align-self: stretch; min-height: 20rem; background: radial-gradient(circle at 38% 38%, rgb(91 214 255 / 21%) 0 2px, transparent 3px), linear-gradient(138deg, transparent 42%, rgb(91 214 255 / 45%) 42.3%, transparent 42.7%); opacity: 0.75; }

.kombok-related { background: rgb(15 18 25 / 56%); }
.kombok-related__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-6); margin-top: var(--space-6); }
.kombok-related__grid > * { min-width: 0; }
.kombok-feature-link { position: relative; display: block; min-height: 25rem; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-mist-100); text-decoration: none; transition: transform var(--transition-base), border-color var(--transition-base); }
.kombok-feature-link:hover, .kombok-feature-link:focus-visible { border-color: var(--color-electric-400); color: var(--color-mist-100); text-decoration: none; transform: translateY(-2px); }
.kombok-feature-link img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.kombok-feature-link__overlay { position: absolute; z-index: 1; right: var(--space-5); bottom: var(--space-5); left: var(--space-5); display: flex; max-width: 23.75rem; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.kombok-feature-link__overlay strong { font-family: var(--font-heading); font-size: 2.5rem; line-height: 1.08; }
.kombok-feature-link__overlay small { color: var(--color-mist-100); }
.kombok-related__small { display: flex; min-width: 0; flex-direction: column; gap: var(--space-4); }
.kombok-related__small a { display: flex; min-width: 0; flex: 1 1 0; flex-direction: column; justify-content: center; gap: var(--space-3); padding: var(--space-5); border-bottom: 1px solid var(--color-border); color: var(--color-mist-100); text-decoration: none; }
.kombok-related__small a:first-child { border-top: 1px solid var(--color-border); }
.kombok-related__small a:hover, .kombok-related__small a:focus-visible { color: var(--color-electric-400); text-decoration: none; }
.kombok-related__small strong { font-family: var(--font-heading); font-size: 1.75rem; }
.kombok-related__small small { color: var(--color-text-muted); }
.kombok-related__small a > span:last-child { color: var(--color-electric-400); }

.kombok-final { padding-block-end: clamp(var(--space-8), 8vw, 7rem); }
.kombok-final__panel { position: relative; display: grid; min-height: 27rem; place-items: center; overflow: hidden; padding: clamp(var(--space-6), 7vw, 5rem) var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-ink-900); text-align: center; }
.kombok-final__copy { position: relative; z-index: 1; display: flex; max-width: 40rem; min-width: 0; flex-direction: column; align-items: center; gap: var(--space-5); }
.kombok-final__copy > * { margin: 0; }
.kombok-final__copy h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.kombok-final__copy p { max-width: 32.5rem; color: var(--color-text-muted); }
.kombok-final__ball { position: absolute; top: 20%; left: 16%; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--color-amber-400); box-shadow: 0 0 20px rgb(255 184 74 / 48%); }
.kombok-final__arc { position: absolute; right: 3%; bottom: 4%; width: 26rem; max-width: 60%; fill: none; stroke: var(--color-electric-400); stroke-width: 2; opacity: 0.8; pointer-events: none; }

.physics-line path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.physics-line.is-drawn path { animation: kombok-draw 600ms ease forwards; }
@keyframes kombok-draw { to { stroke-dashoffset: 0; } }

@media (max-width: 65rem) {
  .kombok-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .kombok-hero__visual { min-height: 20rem; }
  .kombok-reading__layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .kombok-check--desktop { display: none; }
  .kombok-check--flow { display: flex; }
  .kombok-reading__article { max-width: 100%; }
  .kombok-roles__list { display: flex; flex-direction: column; gap: var(--space-5); max-width: 45rem; }
  .kombok-role--one, .kombok-role--two, .kombok-role--three { margin-top: 0; }
  .kombok-wave__feature { grid-template-columns: minmax(0, 1fr); }
  .kombok-wave__intro p { max-width: 100%; }
  .kombok-wave__rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kombok-wave__rules article:nth-child(3) { grid-column: 1 / -1; }
  .kombok-upgrades__bands article { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .kombok-upgrades__bands article:nth-child(2) { padding: var(--space-5); }
  .kombok-learning { grid-template-columns: minmax(0, 1fr); }
  .kombok-checklist__layout { grid-template-columns: minmax(0, 1fr); }
  .kombok-checklist__motif { display: none; }
}

@media (max-width: 57.5rem) {
  .kombok-states__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .kombok-states__grid::before { top: 2rem; bottom: 2rem; left: 1.2rem; width: 1px; height: auto; background: linear-gradient(180deg, var(--color-amber-400), var(--color-electric-400), var(--color-amber-400)); }
  .kombok-state, .kombok-state--hold { margin-top: 0; padding-top: 0; padding-inline-start: 3.5rem; }
  .kombok-state__number { position: absolute; top: 0; left: 0; }
  .kombok-state p { max-width: 100%; }
  .kombok-related__grid { grid-template-columns: minmax(0, 1fr); }
  .kombok-related__small { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kombok-related__small a:first-child { border-top: 0; }
}

@media (max-width: 43.75rem) {
  .kombok-hero { padding-block-start: var(--space-7); }
  .kombok-hero__copy h1 { font-size: 2.125rem; line-height: 1.18; }
  .kombok-hero__lead { font-size: 1.125rem; line-height: 1.56; }
  .kombok-hero__actions { flex-direction: column; align-items: stretch; }
  .kombok-hero__actions > .button { width: 100%; flex: 0 0 auto; }
  .kombok-hero__visual { min-height: 13.75rem; }
  .kombok-pillars__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); margin-top: var(--space-6); }
  .kombok-pillar { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .kombok-pillar h3, .kombok-decision h3, .kombok-role h3, .kombok-state h3 { font-size: 1.5rem; }
  .kombok-wave__image { min-height: 13.75rem; }
  .kombok-wave__rules { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .kombok-wave__rules article:nth-child(3) { grid-column: auto; }
  .kombok-related__small { grid-template-columns: minmax(0, 1fr); }
  .kombok-related__small a:first-child { border-top: 1px solid var(--color-border); }
  .kombok-feature-link { min-height: 13.75rem; }
  .kombok-feature-link__overlay { right: var(--space-4); bottom: var(--space-4); left: var(--space-4); }
  .kombok-feature-link__overlay strong { font-size: 2rem; }
  .kombok-final__panel { min-height: 0; padding: var(--space-6) var(--space-4); }
  .kombok-final__copy .button { width: 100%; min-height: 3rem; }
  .kombok-final__ball { top: 8%; left: 10%; }
  .kombok-final__arc { max-width: 85%; }
}

@media (prefers-reduced-motion: reduce) {
  .kombok-page *, .kombok-page *::before, .kombok-page *::after { animation: none !important; transition: none !important; }
  .physics-line path { stroke-dashoffset: 0; }
}