.home-page { overflow: clip; }
.home-page .section { position: relative; }
.home-page .home-hero { position: relative; padding-block: var(--space-8) var(--space-9); overflow: hidden; }
.home-page .home-hero::before { content: ""; position: absolute; width: 32rem; height: 32rem; border: 2rem solid rgb(107 79 179 / 10%); border-radius: 50%; top: -14rem; right: -8rem; pointer-events: none; }
.home-page .home-hero__grid, .home-page .home-transform__grid, .home-page .home-origin__grid { display: grid; min-width: 0; gap: var(--space-7); align-items: start; }
.home-page .home-hero__grid { grid-template-columns: minmax(390px, 5fr) minmax(480px, 7fr); }
.home-page .home-hero__copy, .home-page .home-hero__figure, .home-page .home-transform__copy, .home-page .home-transform__figure, .home-page .home-origin__reading, .home-page .home-origin__opinion { min-width: 0; width: 100%; }
.home-page .home-hero__copy { max-width: 38.75rem; display: flex; flex-direction: column; gap: var(--space-4); }
.home-page .home-hero__copy h1, .home-page .home-hero__copy p, .home-page .home-hero__copy .home-hero__lead { margin: 0; }
.home-page .home-hero__eyebrow { display: inline-flex; width: fit-content; min-height: 1.9rem; align-items: center; border-radius: var(--radius-pill); background: var(--color-primary); padding: var(--space-2) var(--space-3); color: var(--color-on-accent); font-family: var(--font-heading); font-size: var(--text-meta); font-weight: 700; }
.home-page .home-hero__lead { display: grid; gap: var(--space-4); font-size: var(--text-lead); line-height: 1.56; }
.home-page .home-hero__actions { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.home-page .home-hero__actions > * { min-width: 0; }
.home-page .home-hero__actions span { color: var(--color-text-muted); font-size: var(--text-label); }
.home-page .home-hero__independence { width: min(100%, 31.25rem); border: 1px solid var(--color-forest); border-radius: var(--radius-md); background: var(--color-forest-soft); padding: var(--space-4); }
.home-page .home-hero__independence p { margin: var(--space-2) 0 0; font-size: var(--text-label); }
.home-page .home-media { width: 100%; min-width: 0; margin: 0; }
.home-page .home-media__open { display: block; width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); padding: 0; overflow: hidden; }
.home-page .home-media__open img { width: 100%; max-width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.home-page .home-transform__figure img { aspect-ratio: 4 / 3; }
.home-page .home-gallery img { aspect-ratio: 4 / 3; object-fit: cover; }
.home-page .home-media figcaption { max-width: 31.25rem; }
.home-page .home-facts { background: var(--color-bg-alt); }
.home-page .home-facts__header, .home-page .home-cycle__header, .home-page .home-build__header, .home-page .home-runes__intro, .home-page .home-costumes__intro, .home-page .home-systems__header, .home-page .home-verdict__header { width: min(100%, 43.75rem); }
.home-page .home-facts__header > :last-child, .home-page .home-cycle__header > :last-child, .home-page .home-build__header > :last-child, .home-page .home-runes__intro > :last-child, .home-page .home-costumes__intro > :last-child, .home-page .home-systems__header > :last-child, .home-page .home-verdict__header > :last-child { margin-bottom: 0; }
.home-page .home-facts__grid { display: grid; min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.home-page .home-fact-group, .home-page .home-store-note { min-width: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); padding: var(--space-5); }
.home-page .home-fact-group h3, .home-page .home-store-note h3 { font-size: 1.25rem; margin-bottom: var(--space-3); }
.home-page .home-fact-group p, .home-page .home-store-note p { font-size: var(--text-label); }
.home-page .home-fact-group dl { display: grid; gap: var(--space-2); margin: 0; }
.home-page .home-fact-group dl > div { display: grid; min-width: 0; gap: var(--space-1); }
.home-page .home-fact-group dt { color: var(--color-text-muted); font-size: var(--text-meta); font-weight: 700; }
.home-page .home-fact-group dd { margin: 0; font-size: var(--text-label); }
.home-page .home-traits-inline { display: flex; min-width: 0; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.home-page .home-store-note { display: flex; flex-direction: column; gap: var(--space-3); }
.home-page .home-store-note > * { margin: 0; }
.home-page .home-origin__grid { grid-template-columns: minmax(0, 7fr) minmax(280px, 3fr); column-gap: 8.333%; }
.home-page .home-origin__reading { max-width: 42.5rem; }
.home-page .home-origin__opinion { align-self: center; border-radius: var(--radius-md); background: var(--color-forest-soft); padding: var(--space-5); }
.home-page .home-origin__opinion p { margin: var(--space-3) 0 0; }
.home-page .home-transform { background: var(--color-bg-alt); }
.home-page .home-transform__grid { grid-template-columns: minmax(360px, 5fr) minmax(440px, 7fr); }
.home-page .home-transform__copy { max-width: 35rem; }
.home-page .home-transform__blocks { display: grid; gap: var(--space-5); }
.home-page .home-transform__blocks article { border-left: 3px solid var(--color-primary); padding-left: var(--space-4); }
.home-page .home-transform__blocks article:nth-child(2) { border-color: var(--color-skills); }
.home-page .home-transform__blocks h3 { font-size: 1.375rem; margin-top: var(--space-3); }
.home-page .home-transform__opinion { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); padding: var(--space-4); }
.home-page .home-transform__opinion p { margin: var(--space-2) 0 0; }
.home-page .home-cycle__steps { display: grid; min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.home-page .home-cycle__steps article { min-width: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); padding: var(--space-5); }
.home-page .home-cycle__steps article > span { color: var(--color-skills); font-family: var(--font-heading); font-weight: 700; }
.home-page .home-cycle__steps h3 { margin-top: var(--space-3); font-size: 1.375rem; }
.home-page .home-flow { display: grid; min-width: 0; gap: var(--space-4); margin-top: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); }
.home-page .home-flow > * { min-width: 0; margin: 0; }
.home-page .home-flow ol { display: grid; min-width: 0; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3); padding: 0; list-style: none; }
.home-page .home-flow li { position: relative; min-width: 0; border-bottom: 3px solid var(--color-progress); padding-bottom: var(--space-2); font-family: var(--font-heading); font-size: var(--text-label); font-weight: 700; }
.home-page .home-flow li:not(:last-child)::after { content: "→"; position: absolute; top: 0; right: calc(var(--space-3) * -1); color: var(--color-text-muted); transform: translateX(50%); }
.home-page .home-offline { background: var(--color-bg-alt); }
.home-page .home-offline__intro { width: min(100%, 40.625rem); }
.home-page .home-return-panel { display: grid; min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.home-page .home-return-panel article { min-width: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); padding: var(--space-5); }
.home-page .home-return-panel article > span { display: inline-grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; background: rgb(107 79 179 / 12%); color: var(--color-primary-strong); font-family: var(--font-heading); font-weight: 700; }
.home-page .home-return-panel h3 { margin-top: var(--space-3); font-size: 1.375rem; }
.home-page .home-offline__advice { width: min(100%, 25rem); margin: var(--space-5) 0 0 auto; border: 1px solid var(--color-forest); border-radius: var(--radius-md); background: var(--color-forest-soft); padding: var(--space-5); }
.home-page .home-offline__advice h3 { margin-top: var(--space-3); font-size: 1.375rem; }
.home-page .home-offline__advice ul { margin-bottom: 0; }
.home-page .home-build__split, .home-page .home-system-schemas, .home-page .home-fit-grid { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.home-page .home-build__split article, .home-page .home-system-schemas article, .home-page .home-fit-grid article { min-width: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); }
.home-page .home-build__fact { background: var(--color-bg-alt); }
.home-page .home-build__strategy { background: var(--color-forest-soft); }
.home-page .home-build__split h3, .home-page .home-system-schemas h3, .home-page .home-fit-grid h3 { margin-top: var(--space-3); font-size: 1.375rem; }
.home-page .home-build-map { display: grid; min-width: 0; gap: var(--space-4); margin-top: var(--space-5); border: 1px solid var(--color-skills); border-radius: var(--radius-lg); background: rgb(63 120 168 / 8%); padding: var(--space-5); text-align: center; }
.home-page .home-build-map > * { min-width: 0; margin: 0; }
.home-page .home-build-map > .tag { justify-self: center; }
.home-page .home-build-map ol { display: grid; min-width: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); padding: 0; list-style: none; }
.home-page .home-build-map li { min-width: 0; border: 1px solid var(--color-skills); border-radius: var(--radius-sm); background: var(--color-bg); padding: var(--space-3); font-family: var(--font-heading); font-size: var(--text-label); font-weight: 700; }
.home-page .home-skill-schema { margin-top: var(--space-6); }
.home-page .home-skill-schema > p { width: min(100%, 43.125rem); }
.home-page .home-skill-schema__table { display: grid; min-width: 0; margin-top: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.home-page .home-skill-schema__table [role="row"] { display: grid; min-width: 0; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.home-page .home-skill-schema__table span { min-width: 0; border-right: 1px solid var(--color-border); padding: var(--space-3); font-size: var(--text-label); overflow-wrap: anywhere; }
.home-page .home-skill-schema__table span:last-child { border-right: 0; }
.home-page .home-skill-schema__table [role="row"]:first-child { background: var(--color-bg-alt); font-family: var(--font-heading); font-weight: 700; }
.home-page .home-trait-grid { display: grid; min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-6) 0; }
.home-page .home-trait-card { min-width: 0; border: 1px solid currentColor; border-radius: var(--radius-md); padding: var(--space-4); }
.home-page .home-trait-card h3 { font-size: 1.375rem; }
.home-page .home-trait-card p { font-size: var(--text-label); }
.home-page .home-trait-card > span, .home-page .home-rune-fields article > span { display: block; color: inherit; font-size: var(--text-meta); font-weight: 700; }
.home-page .home-trait-card--blood { background: rgb(141 61 75 / 9%); color: var(--color-blood); }
.home-page .home-trait-card--forest { background: var(--color-forest-soft); color: var(--color-forest); }
.home-page .home-trait-card--moon { background: rgb(107 79 179 / 9%); color: var(--color-primary-strong); }
.home-page .home-trait-card--physical { background: rgb(63 120 168 / 9%); color: #28567d; }
.home-page .home-runes { background: var(--color-bg-alt); }
.home-page .home-rune-fields { display: grid; min-width: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-6); }
.home-page .home-rune-fields article { min-width: 0; border: 1px solid var(--color-skills); border-radius: var(--radius-md); background: var(--color-bg); padding: var(--space-4); }
.home-page .home-rune-fields h3 { font-size: 1.125rem; }
.home-page .home-rune-fields p { font-size: var(--text-label); }
.home-page .home-runes__advice { width: min(100%, 25rem); margin-top: var(--space-5); border-left: 4px solid var(--color-primary-strong); padding: var(--space-4); background: var(--color-bg); }
.home-page .home-runes__advice p { margin: var(--space-3) 0 0; }
.home-page .home-gallery { display: grid; min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.home-page .home-gallery figure { min-width: 0; }
.home-page .home-costumes__notice { width: min(100%, 37.5rem); margin-top: var(--space-5); border: 1px solid var(--color-blood); border-radius: var(--radius-md); padding: var(--space-4); }
.home-page .home-costumes__notice p { margin: var(--space-3) 0 0; }
.home-page .home-systems { background: var(--color-bg-alt); }
.home-page .home-system-map { display: grid; min-width: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg); padding: var(--space-5); }
.home-page .home-system-map span { min-width: 0; border-bottom: 2px solid var(--color-progress); padding-bottom: var(--space-2); font-family: var(--font-heading); font-size: var(--text-label); font-weight: 700; }
.home-page .home-system-map p { grid-column: 1 / -1; margin: 0; color: var(--color-text-muted); }
.home-page .home-systems__subhead { margin-top: var(--space-7); }
.home-page .home-advice-grid, .home-page .home-warning-grid { display: grid; min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.home-page .home-advice-grid article, .home-page .home-warning-grid article { min-width: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); padding: var(--space-4); }
.home-page .home-advice-grid article:nth-child(5), .home-page .home-warning-grid article:nth-child(5) { grid-column: 1 / span 1; }
.home-page .home-advice-grid span, .home-page .home-warning-grid span { color: var(--color-primary-strong); font-size: var(--text-meta); font-weight: 700; }
.home-page .home-advice-grid h4 { margin-top: var(--space-2); font-size: 1.125rem; }
.home-page .home-advice-grid p, .home-page .home-warning-grid p { margin-bottom: 0; font-size: var(--text-label); }
.home-page .home-warning-grid article { border-color: rgb(141 61 75 / 45%); }
.home-page .home-warning-grid span { color: var(--color-blood); }
.home-page .home-verdict__panel { width: min(100%, 48.75rem); margin-top: var(--space-6); border-radius: var(--radius-lg); background: var(--color-primary-strong); padding: var(--space-6); color: var(--color-on-accent); }
.home-page .home-verdict__panel h3 { margin-top: var(--space-3); color: var(--color-on-accent); }
.home-page .home-verdict__panel .tag { border-color: var(--color-on-accent); color: var(--color-on-accent); }
.home-page .home-privacy { width: min(100%, 56.25rem); margin: var(--space-6) auto 0; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-alt); padding: var(--space-5); }
.home-page .home-privacy h3 { margin-top: var(--space-3); }
.home-page .home-privacy > :last-child { margin-bottom: 0; }
.home-page .home-final { background: var(--color-bg-alt); }
.home-page .home-final__panel { position: relative; display: flex; min-width: 0; flex-direction: column; align-items: center; gap: var(--space-4); width: min(100%, 42.5rem); margin-inline: auto; overflow: hidden; border-radius: var(--radius-lg); background: var(--color-primary); padding: var(--space-7); color: var(--color-on-accent); text-align: center; }
.home-page .home-final__panel::before { content: ""; position: absolute; width: 22rem; height: 22rem; border: 1.25rem solid rgb(255 253 247 / 14%); border-radius: 50%; top: -13rem; right: -8rem; }
.home-page .home-final__panel > * { position: relative; min-width: 0; margin: 0; }
.home-page .home-final__panel h2 { color: var(--color-on-accent); }
.home-page .home-final__panel .button { background: var(--color-on-accent); color: var(--color-primary-strong); }
.home-page .home-final__panel .button:hover { background: var(--color-bg-alt); }
.home-page .home-final__panel small { width: min(100%, 35rem); }
.home-page .home-lightbox { width: min(100% - 2rem, 70rem); max-height: calc(100vh - 2rem); border: 0; border-radius: var(--radius-lg); background: var(--color-bg); padding: 0; box-shadow: var(--shadow-float); }
.home-page .home-lightbox::backdrop { background: rgb(23 35 61 / 76%); }
.home-page .home-lightbox__content { position: relative; display: grid; min-width: 0; gap: var(--space-3); padding: var(--space-5); }
.home-page .home-lightbox__content img { width: 100%; max-height: calc(100vh - 10rem); object-fit: contain; }
.home-page .home-lightbox__content p { margin: 0; color: var(--color-text-muted); }
.home-page .home-lightbox__close { position: absolute; z-index: 1; top: var(--space-3); right: var(--space-3); display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border: 1px solid var(--color-border); border-radius: 50%; background: var(--color-on-accent); font-size: 1.5rem; line-height: 1; }
@media (max-width: 1100px) { .home-page .home-hero__grid, .home-page .home-transform__grid { grid-template-columns: 1fr; } .home-page .home-hero__copy, .home-page .home-transform__copy { max-width: 43rem; } .home-page .home-hero__figure, .home-page .home-transform__figure { max-width: 43rem; } .home-page .home-facts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-page .home-trait-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-page .home-advice-grid, .home-page .home-warning-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) { .home-page .home-origin__grid { grid-template-columns: 1fr; } .home-page .home-origin__opinion { width: min(100%, 31.25rem); } .home-page .home-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-page .home-rune-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); } .home-page .home-rune-fields article:nth-child(4), .home-page .home-rune-fields article:nth-child(5) { grid-column: span 1; } }
@media (max-width: 767px) { .home-page .home-hero { padding-block: var(--space-7); } .home-page .home-hero::before { display: none; } .home-page .home-hero__grid, .home-page .home-transform__grid, .home-page .home-origin__grid { grid-template-columns: 1fr; gap: var(--space-5); } .home-page .home-hero__copy, .home-page .home-transform__copy, .home-page .home-origin__reading, .home-page .home-origin__opinion { max-width: none; } .home-page .home-hero__copy h1 { font-size: 2.375rem; line-height: 1.16; } .home-page .home-hero__actions { align-items: stretch; } .home-page .home-hero__actions .button { width: 100%; } .home-page .home-hero__independence { width: 100%; } .home-page .home-facts__grid, .home-page .home-cycle__steps, .home-page .home-return-panel, .home-page .home-build__split, .home-page .home-system-schemas, .home-page .home-fit-grid, .home-page .home-trait-grid, .home-page .home-gallery, .home-page .home-advice-grid, .home-page .home-warning-grid { grid-template-columns: 1fr; } .home-page .home-facts__header, .home-page .home-cycle__header, .home-page .home-build__header, .home-page .home-runes__intro, .home-page .home-costumes__intro, .home-page .home-systems__header, .home-page .home-verdict__header, .home-page .home-offline__intro { width: 100%; } .home-page .home-flow ol, .home-page .home-build-map ol, .home-page .home-system-map, .home-page .home-rune-fields { grid-template-columns: 1fr; } .home-page .home-flow li:not(:last-child)::after { content: "↓"; top: auto; right: auto; bottom: calc(var(--space-3) * -1); left: var(--space-2); transform: translateY(50%); } .home-page .home-flow li { padding-bottom: var(--space-3); } .home-page .home-build-map { text-align: left; } .home-page .home-build-map > .tag { justify-self: start; } .home-page .home-skill-schema__table { gap: var(--space-3); border: 0; background: transparent; } .home-page .home-skill-schema__table [role="row"] { grid-template-columns: 1fr; gap: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); padding: var(--space-3); } .home-page .home-skill-schema__table [role="row"]:first-child { display: none; } .home-page .home-skill-schema__table span { border: 0; padding: 0; } .home-page .home-skill-schema__table [role="cell"]::before { content: "Campo: "; color: var(--color-text-muted); font-weight: 700; } .home-page .home-rune-fields article:nth-child(4), .home-page .home-rune-fields article:nth-child(5) { grid-column: auto; } .home-page .home-runes__advice, .home-page .home-offline__advice, .home-page .home-costumes__notice { width: 100%; } .home-page .home-system-map span { border-left: 3px solid var(--color-progress); border-bottom: 0; padding: var(--space-2) 0 var(--space-2) var(--space-3); } .home-page .home-verdict__panel { width: 100%; padding: var(--space-5); } .home-page .home-privacy { width: 100%; } .home-page .home-final__panel { width: 100%; padding: var(--space-5); } .home-page .home-final__panel .button { width: min(100%, 22.5rem); min-height: 3rem; } }
@media (prefers-reduced-motion: no-preference) { .home-page .home-media__open:hover { border-color: var(--color-primary); box-shadow: var(--shadow-float); transform: translateY(-2px); transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); } .home-page .home-advice-grid article:hover, .home-page .home-warning-grid article:hover { box-shadow: var(--shadow-float); transform: translateY(-2px); transition: transform var(--transition-fast), box-shadow var(--transition-fast); } }