.home-page { overflow: clip; }
.home-page .section { position: relative; }
.home-hero { position: relative; padding-block: clamp(3rem, 7vw, 7rem); background: var(--gradient-day); overflow: hidden; }
.home-hero::before, .home-final__panel::before { content: ""; position: absolute; width: 25rem; height: 25rem; border: 1px solid color-mix(in srgb, var(--color-celestine) 35%, transparent); border-radius: 50%; top: -16rem; right: -9rem; pointer-events: none; }
.home-hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 6rem); align-items: center; }
.home-hero__copy { min-width: 0; max-width: 35rem; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.home-hero__copy > * { min-width: 0; margin: 0; }
.home-hero__copy h1 { font-size: clamp(2.125rem, 3.3vw, 2.75rem); line-height: 1.09; }
.home-hero__lead { max-width: 58ch; color: var(--color-ink); }
.home-hero__summary { max-width: 56ch; color: var(--color-slate); }
.home-hero__badge { margin: 0; }
.home-hero__actions { width: 100%; }
.home-download-note { display: flex; align-items: baseline; gap: var(--space-2); margin: 0; color: var(--color-slate); font-size: var(--text-sm); line-height: var(--leading-small); }
.home-download-note span { color: var(--color-sun); font-size: 0.75em; }
.home-hero__media { width: 100%; min-width: 0; margin: 0; aspect-ratio: 3 / 2; box-shadow: var(--shadow-card); }
.home-hero__media img { width: 100%; height: 100%; object-position: center right; }
.home-section-intro { min-width: 0; }
.home-section-intro > :last-child { margin-bottom: 0; }
.home-overview__intro, .home-gameplay__intro, .home-features__intro, .home-team__intro, .home-audience__intro, .home-faq__intro { max-width: 43rem; }
.home-overview__cards, .home-features__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-8); }
.home-overview__cards > *, .home-features__grid > * { min-width: 0; width: 100%; }
.home-pillar { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); min-width: 0; padding: var(--space-6); }
.home-pillar > * { min-width: 0; margin: 0; }
.home-pillar__symbol { display: grid; width: 2.5rem; min-width: 2.5rem; height: 2.5rem; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--color-celestine) 18%, white); color: var(--color-primary); font-size: 1.35rem; }
.home-pillar--cyan { border-top: 2px solid var(--color-celestine); }
.home-pillar--leaf { border-top: 2px solid var(--color-leaf); }
.home-world__main { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.home-world__copy { min-width: 0; max-width: 36rem; }
.home-world__media { width: 100%; min-width: 0; margin: 0; aspect-ratio: 16 / 10; }
.home-world__media img { width: 100%; height: 100%; transition: transform var(--transition-base); }
.home-world__media:hover img { transform: scale(1.02); }
.home-world__notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-8); }
.home-world__note { min-width: 0; padding: var(--space-6); border-left: 3px solid var(--color-sun); background: rgba(255,255,255,.6); }
.home-world__note:nth-child(2) { border-left-color: var(--color-celestine); }
.home-world__note > :last-child { margin-bottom: 0; }
.home-gameplay__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-8); }
.home-gameplay__grid > * { min-width: 0; width: 100%; }
.home-gameplay__block { min-width: 0; padding: var(--space-6); border: var(--border-default); border-radius: var(--radius-lg); background: rgba(255,255,255,.72); box-shadow: 0 8px 20px rgba(34,79,111,.05); transition: transform var(--transition-base), box-shadow var(--transition-base); }
.home-gameplay__block:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.home-gameplay__block > :last-child { margin-bottom: 0; }
.home-gameplay__block--cyan { border-top: 3px solid var(--color-celestine); }
.home-gameplay__block--sky { border-top: 3px solid var(--color-sky); }
.home-gameplay__block--leaf { border-top: 3px solid var(--color-leaf); }
.home-gameplay__block--sun { border-top: 3px solid var(--color-sun); }
.home-gameplay__cta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); width: 100%; min-width: 0; margin-top: var(--space-8); padding: var(--space-6); }
.home-gameplay__cta > * { min-width: 0; }
.home-gameplay__cta-copy { max-width: 42ch; }
.home-gameplay__cta-copy > :last-child { margin-bottom: 0; }
.home-feature { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); min-width: 0; padding: var(--space-6); }
.home-feature > * { min-width: 0; margin: 0; }
.home-feature:nth-child(3n+1) { border-top: 2px solid var(--color-celestine); }
.home-feature:nth-child(3n+2) { border-top: 2px solid var(--color-sun); }
.home-feature:nth-child(3n) { border-top: 2px solid var(--color-leaf); }
.home-element-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); width: 100%; min-width: 0; margin-top: auto; }
.home-element-tags span { padding: .2rem .5rem; border: 1px solid var(--color-line); border-radius: var(--radius-full); background: var(--color-cloud); color: var(--color-ink); font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: 1.3; }
.home-team__layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; margin-top: var(--space-8); }
.home-team__layout > * { min-width: 0; }
.home-team__media { width: 100%; margin: 0; aspect-ratio: 4 / 5; }
.home-team__media img { width: 100%; height: 100%; transition: transform var(--transition-base); }
.home-team__media:hover img { transform: scale(1.02); }
.home-team__steps { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.home-team__step { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-4); min-width: 0; padding-bottom: var(--space-6); border-bottom: var(--border-default); }
.home-team__step > * { min-width: 0; }
.home-team__step > span { color: var(--color-primary); font-family: var(--font-heading); font-weight: var(--weight-extrabold); }
.home-team__step:nth-child(4) > span { color: #a97111; }
.home-team__step div > :last-child { margin-bottom: 0; }
.home-gallery__intro { max-width: 43rem; }
.home-gallery__source { padding-top: var(--space-3); border-top: var(--border-default); color: var(--color-slate); font-size: var(--text-sm); line-height: var(--leading-small); }
.home-gallery__track { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--space-6); min-width: 0; margin-top: var(--space-8); }
.home-gallery__item { display: flex; flex-direction: column; min-width: 0; gap: var(--space-3); }
.home-gallery__item > * { min-width: 0; margin: 0; }
.home-gallery__trigger { display: block; width: 100%; min-width: 0; min-height: 0; padding: 0; overflow: hidden; border: var(--border-default); border-radius: var(--radius-lg); background: var(--color-cloud); }
.home-gallery__trigger img { width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform var(--transition-base); }
.home-gallery__item--portrait .home-gallery__trigger img { aspect-ratio: 4 / 5; }
.home-gallery__trigger:hover img { transform: scale(1.03); }
.home-gallery__item p { color: var(--color-slate); font-size: var(--text-sm); line-height: var(--leading-small); }
.home-gallery__link { margin-top: var(--space-8); }
.home-audience__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-8); }
.home-audience__grid > * { min-width: 0; width: 100%; }
.home-audience__card { padding: var(--space-6); border-top: 2px solid var(--color-celestine); }
.home-audience__card:nth-child(2) { border-top-color: var(--color-sky); }
.home-audience__card:nth-child(3) { border-top-color: var(--color-celestine); }
.home-audience__card:nth-child(4) { border-top-color: var(--color-sun); }
.home-audience__card--wide { grid-column: 1 / -1; border-top-color: var(--color-leaf); }
.home-audience__card > :last-child { margin-bottom: 0; }
.home-faq__list { display: flex; flex-direction: column; gap: var(--space-3); width: min(100%, 56rem); min-width: 0; margin-top: var(--space-8); }
.home-faq__item { min-width: 0; overflow: hidden; border: var(--border-default); border-radius: var(--radius-md); background: #fff; }
.home-faq__item h3 { margin: 0; }
.home-faq__item h3 button { display: flex; width: 100%; min-width: 0; min-height: 3.25rem; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-6); border: 0; border-radius: 0; background: #fff; color: var(--color-ink); font-family: var(--font-heading); font-size: 1rem; font-weight: var(--weight-bold); text-align: left; }
.home-faq__item h3 button span { flex: 0 0 auto; color: var(--color-primary); font-size: 1.5rem; line-height: 1; transition: transform var(--transition-fast); }
.home-faq__item h3 button[aria-expanded="true"] span { transform: rotate(45deg); }
.home-faq__panel { max-width: 64ch; padding: 0 var(--space-6) var(--space-6); color: var(--color-slate); }
.home-faq__panel > :last-child { margin-bottom: 0; }
.home-faq__notice { width: min(100%, 56rem); margin: var(--space-6) 0 0; padding: var(--space-4); border-left: 3px solid var(--color-sun); background: #fff; color: var(--color-slate); }
.home-safe { background: var(--gradient-day); }
.home-safe__panel { width: min(100%, 61.5rem); margin-inline: auto; padding: var(--space-8); }
.home-safe__copy { max-width: 44rem; }
.home-safe__copy > :last-child { margin-bottom: 0; }
.home-safe__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); min-width: 0; margin: var(--space-8) 0 0; padding: 0; list-style: none; }
.home-safe__steps li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--space-3); min-width: 0; align-items: start; }
.home-safe__steps li > * { min-width: 0; }
.home-safe__steps span { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--color-celestine) 20%, white); color: var(--color-primary); font-family: var(--font-heading); font-weight: var(--weight-bold); }
.home-safe__steps p { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: var(--leading-small); }
.home-final { padding-top: 0; background: var(--gradient-day); }
.home-final__panel { position: relative; overflow: hidden; padding: clamp(3rem, 7vw, 5rem) var(--space-6); border: var(--border-glass); border-radius: var(--radius-xl); background: rgba(255,255,255,.58); text-align: center; }
.home-final__copy { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); width: min(100%, 38.75rem); min-width: 0; margin-inline: auto; }
.home-final__copy > * { min-width: 0; margin: 0; }
.home-final__copy h2 { font-size: clamp(1.875rem, 3vw, 2rem); line-height: 1.2; }
.home-final__copy > p:not(.home-download-note) { max-width: 52ch; color: var(--color-slate); }
.home-final__copy .button { min-width: 15.625rem; }
.home-lightbox { position: fixed; z-index: 1100; inset: 0; display: grid; place-items: center; padding: var(--space-4); }
.home-lightbox[hidden] { display: none; }
.home-lightbox__backdrop { position: absolute; inset: 0; background: rgba(23,38,56,.74); }
.home-lightbox__dialog { position: relative; z-index: 1; display: grid; width: min(100%, 60rem); max-height: calc(100vh - 2rem); min-width: 0; overflow: auto; border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-card-hover); }
.home-lightbox__image { width: 100%; max-height: 70vh; object-fit: contain; background: var(--color-ink); }
.home-lightbox__caption { min-width: 0; padding: var(--space-6); }
.home-lightbox__caption > :last-child { margin-bottom: 0; }
.home-lightbox__close { position: absolute; z-index: 2; top: var(--space-3); right: var(--space-3); width: 2.75rem; min-width: 2.75rem; height: 2.75rem; min-height: 2.75rem; padding: 0; border-color: rgba(255,255,255,.8); border-radius: 50%; background: rgba(23,38,56,.78); color: #fff; font-size: 1.75rem; line-height: 1; }
@media (max-width: 59rem) { .home-hero__grid, .home-world__main, .home-team__layout { grid-template-columns: 1fr; gap: var(--space-8); } .home-hero__copy, .home-world__copy { max-width: 43rem; } .home-hero__media { max-width: 50rem; } .home-overview__cards, .home-features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-gameplay__grid { grid-template-columns: 1fr; } .home-gallery__track { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-gallery__item--portrait { grid-column: auto; } .home-team__media { max-width: 30rem; } }
@media (max-width: 47.99rem) { .home-hero { padding-block: var(--space-12); } .home-hero__grid { gap: var(--space-8); } .home-hero__copy { max-width: 100%; gap: var(--space-4); } .home-hero__copy h1 { font-size: clamp(2.125rem, 10vw, 2.4rem); } .home-hero__lead, .home-hero__summary { max-width: 38ch; } .home-hero__actions { display: grid; grid-template-columns: 1fr; gap: var(--space-3); } .home-hero__actions > * { width: 100%; } .home-world__notes, .home-overview__cards, .home-features__grid, .home-audience__grid { grid-template-columns: 1fr; } .home-world__note, .home-pillar, .home-feature, .home-gameplay__block, .home-audience__card { padding: 1.25rem; } .home-gameplay__cta { flex-direction: column; align-items: stretch; padding: 1.25rem; gap: var(--space-4); } .home-gameplay__cta .button { width: 100%; } .home-team__layout { gap: var(--space-6); } .home-team__media { max-width: 100%; } .home-gallery__track { display: flex; width: calc(100% + 1rem); margin-right: -1rem; overflow-x: auto; padding-bottom: var(--space-3); scroll-snap-type: x mandatory; scrollbar-width: thin; } .home-gallery__item { flex: 0 0 min(82%, 20rem); scroll-snap-align: start; } .home-gallery__item--portrait { flex-basis: min(70%, 17rem); } .home-audience__card--wide { grid-column: auto; } .home-faq__item h3 button { padding: var(--space-4); font-size: .95rem; } .home-faq__panel { padding: 0 var(--space-4) var(--space-4); } .home-faq__notice { padding: var(--space-4); } .home-safe__panel { padding: 1.25rem; } .home-safe__steps { grid-template-columns: 1fr; gap: var(--space-4); margin-top: var(--space-6); } .home-final__panel { padding: var(--space-12) 1.25rem; } .home-final__copy .button { width: 100%; min-width: 0; } }
@media (prefers-reduced-motion: reduce) { .home-world__media:hover img, .home-team__media:hover img, .home-gallery__trigger:hover img, .home-gameplay__block:hover { transform: none; } }