.home-page { overflow: hidden; }
.home-page .section { position: relative; }
.home-page .media-frame { width: 100%; min-width: 0; margin: 0; box-shadow: none; }
.home-page .media-frame img { width: 100%; max-width: 100%; object-fit: cover; }
.home-page figcaption { padding: var(--space-3) var(--space-4); color: var(--color-charcoal-slate); font-size: var(--text-small); line-height: 1.45; }
.home-page .home-hero { background: radial-gradient(circle at 80% 20%, rgba(6,214,160,.12), transparent 27%), radial-gradient(circle at 60% 70%, rgba(79,70,229,.10), transparent 32%), var(--color-porcelain); }
.home-page .home-hero::before, .home-page .home-gameplay::before, .home-page .home-gallery::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .08; background-image: linear-gradient(rgba(79,70,229,.55) 1px, transparent 1px), linear-gradient(90deg, rgba(6,214,160,.55) 1px, transparent 1px); background-size: 32px 32px; }
.home-page .home-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); align-items: center; }
.home-page .home-hero__copy, .home-page .home-hero__figure { min-width: 0; width: 100%; }
.home-page .home-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.home-page .home-hero__copy > * { margin: 0; }
.home-page .home-hero__badge { border: var(--border-subtle); border-top: 2px solid var(--color-electric-indigo); border-radius: var(--radius-md); background: var(--color-frost); padding: var(--space-2) var(--space-3); color: var(--color-deep-eclipse); font-size: var(--text-label); font-weight: 700; letter-spacing: .05em; }
.home-page .home-hero__copy h1 { max-width: 20ch; }
.home-page .home-hero__lead { max-width: 32ch; }
.home-page .home-hero__actions { width: 100%; }
.home-page .home-hero__trust { color: var(--color-charcoal-slate); font-size: var(--text-small); }
.home-page .home-hero__figure img { aspect-ratio: 4 / 3; object-position: 72% center; }
.home-page .home-overview__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.home-page .home-overview__heading, .home-page .home-overview__article, .home-page .home-overview__callout { min-width: 0; width: 100%; }
.home-page .home-overview__article { max-width: 68ch; }
.home-page .home-overview__callout { padding: var(--space-5); }
.home-page .home-overview__callout p:last-child { margin-bottom: 0; }
.home-page .home-overview__marked { border-left: 3px solid var(--color-cyber-mint); padding-left: var(--space-4); }
.home-page .home-gameplay__intro { width: 100%; max-width: 58ch; }
.home-page .home-gameplay__top { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-6); margin-top: var(--space-7); }
.home-page .home-gameplay__roles, .home-page .home-gameplay__figure { min-width: 0; width: 100%; }
.home-page .home-role-tags, .home-page .home-term-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.home-page .home-role-tags span, .home-page .home-term-row span { border: var(--border-subtle); border-radius: var(--radius-sm); background: var(--color-porcelain); padding: var(--space-1) var(--space-2); color: var(--color-charcoal-slate); font-size: var(--text-small); font-weight: 700; }
.home-page .home-gameplay__figure img { aspect-ratio: 4 / 3; object-position: center; }
.home-page .home-annotations { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-3); margin: 0; padding: var(--space-4); list-style: none; }
.home-page .home-annotations li { min-width: 0; border-left: 2px solid var(--color-aqua-mint); padding-left: var(--space-3); color: var(--color-charcoal-slate); font-size: var(--text-small); }
.home-page .home-gameplay__lower { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-6); margin-top: var(--space-6); }
.home-page .home-tactic-panel { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); }
.home-page .home-tactic-panel > * { margin: 0; }
.home-page .home-tactic-panel ol { display: grid; gap: var(--space-3); padding-left: 1.25rem; }
.home-page .home-routine-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-5); }
.home-page .home-routine-grid__item { min-width: 0; width: 100%; border-top: 2px solid var(--color-electric-indigo); padding-top: var(--space-4); }
.home-page .home-inline-cta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); width: 100%; margin-top: var(--space-7); padding: var(--space-5); }
.home-page .home-inline-cta > * { margin: 0; }
.home-page .home-inline-cta p { max-width: 48ch; }
.home-page .home-features__heading { max-width: 30ch; margin-inline: auto; text-align: center; }
.home-page .home-feature-lists { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-6); margin-top: var(--space-7); }
.home-page .home-feature-list { display: grid; grid-template-columns: minmax(0,1fr); gap: 0; margin: 0; padding: 0; list-style: none; }
.home-page .home-feature-list li { display: grid; grid-template-columns: 2.5rem minmax(0,1fr); gap: var(--space-3); min-width: 0; width: 100%; border-top: var(--border-subtle); padding: var(--space-5) 0; }
.home-page .home-feature-list li:last-child { border-bottom: var(--border-subtle); }
.home-page .home-feature-list li > span { color: var(--color-cyber-mint); font-size: var(--text-label); font-weight: 700; letter-spacing: .08em; }
.home-page .home-feature-list h3 { font-size: 1.2rem; }
.home-page .home-feature-list h3, .home-page .home-feature-list p { margin: 0; }
.home-page .home-feature-list div { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.home-page .home-world__grid, .home-page .home-operators__top, .home-page .home-base__top { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-6); align-items: start; }
.home-page .home-world__figure, .home-page .home-world__article, .home-page .home-operators__intro, .home-page .home-operators__figure, .home-page .home-base__figure, .home-page .home-base__article { min-width: 0; width: 100%; }
.home-page .home-world__figure img { aspect-ratio: 4 / 3; object-position: center; }
.home-page .home-world__article { max-width: 58ch; }
.home-page .home-world__definitions { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-4); }
.home-page .home-world__definitions section { min-width: 0; border-top: 1px solid rgba(79,70,229,.25); padding-top: var(--space-3); }
.home-page .home-world__definitions h3, .home-page .home-world__definitions p { margin: 0; }
.home-page .home-world__definitions section { display: flex; flex-direction: column; gap: var(--space-2); }
.home-page .home-world__quote { margin-top: var(--space-5); margin-bottom: var(--space-5); }
.home-page .home-operators__figure img, .home-page .home-base__figure img { aspect-ratio: 4 / 3; object-position: center; }
.home-page .home-progression { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-4); margin: var(--space-7) 0; padding: 0; list-style: none; }
.home-page .home-progression li { min-width: 0; width: 100%; border-top: 2px solid var(--color-sunset-coral); padding: var(--space-4) 0 0; }
.home-page .home-progression span { color: var(--color-sunset-coral); font-size: var(--text-label); font-weight: 700; }
.home-page .home-progression h3 { margin-top: var(--space-2); }
.home-page .home-progression p { margin-bottom: 0; }
.home-page .home-squad { width: 100%; max-width: 64ch; }
.home-page .home-squad__columns { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-4); }
.home-page .home-squad__columns > div { min-width: 0; width: 100%; border-left: 2px solid var(--color-cyber-mint); padding-left: var(--space-3); }
.home-page .home-squad__columns h4, .home-page .home-squad__columns p { margin: 0; }
.home-page .home-squad__columns > div { display: flex; flex-direction: column; gap: var(--space-2); }
.home-page .home-base__article { max-width: 55ch; }
.home-page .home-principles { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-5); margin-top: var(--space-7); }
.home-page .home-principles article { min-width: 0; width: 100%; border-top: var(--border-subtle); padding-top: var(--space-4); }
.home-page .home-principles span { color: var(--color-electric-indigo); font-size: var(--text-label); font-weight: 700; }
.home-page .home-principles h3 { margin-top: var(--space-2); }
.home-page .home-principles p { margin-bottom: 0; }
.home-page .home-base__link { max-width: 60ch; margin-top: var(--space-6); }
.home-page .home-gallery__heading { max-width: 54ch; }
.home-page .home-gallery__grid { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-5); margin-top: var(--space-7); }
.home-page .home-gallery__item { min-width: 0; width: 100%; margin: 0; transition: transform var(--transition-fast), border-color var(--transition-fast); }
.home-page .home-gallery__item:hover, .home-page .home-gallery__item:focus-within { transform: translateY(-2px); border-color: var(--color-aqua-mint); box-shadow: inset 0 0 0 1px var(--color-electric-indigo); }
.home-page .home-gallery__item img { aspect-ratio: 4 / 3; object-position: center; }
.home-page .home-audience__heading { max-width: 34ch; margin-inline: auto; text-align: center; }
.home-page .home-checklist { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-4); margin-top: var(--space-7); }
.home-page .home-checklist article { display: grid; grid-template-columns: 2rem minmax(0,1fr); gap: var(--space-3); min-width: 0; width: 100%; border: var(--border-subtle); border-left: 2px solid var(--color-cyber-mint); border-radius: var(--radius-md); padding: var(--space-4); }
.home-page .home-checklist article > span { color: var(--color-cyber-mint); font-size: 1.25rem; font-weight: 700; }
.home-page .home-checklist h3, .home-page .home-checklist p { margin: 0; }
.home-page .home-checklist div { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.home-page .home-checklist h3 { font-size: 1.1rem; }
.home-page .home-audience__note { max-width: 60ch; margin: var(--space-7) auto 0; padding: var(--space-5); text-align: center; }
.home-page .home-audience__note p { margin: 0; }
.home-page .home-faq__grid { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-5); }
.home-page .home-faq__heading { max-width: 60ch; }
.home-page .home-faq__tip { min-width: 0; width: 100%; padding: var(--space-5); }
.home-page .home-faq__tip p:last-child { margin-bottom: 0; }
.home-page .home-faq__list { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-3); min-width: 0; width: 100%; }
.home-page .home-faq__list details { width: 100%; margin: 0; }
.home-page .home-faq__list summary { min-height: 3.25rem; }
.home-page .home-faq__list details p { max-width: 64ch; }
.home-page .home-final-cta { background: radial-gradient(circle at 75% 45%, rgba(6,214,160,.15), transparent 25%), var(--color-porcelain); }
.home-page .home-final-cta__grid { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-6); align-items: center; }
.home-page .home-final-cta__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); min-width: 0; width: 100%; max-width: 58ch; }
.home-page .home-final-cta__copy > * { margin: 0; }
.home-page .home-final-cta__copy h2 { max-width: 30ch; }
.home-page .home-final-cta__copy .lead { max-width: 52ch; }
.home-page .home-final-cta__note { font-size: var(--text-small); }
.home-page .home-final-cta__field { min-width: 0; width: 100%; min-height: 12rem; opacity: .28; background: linear-gradient(135deg, transparent 0 48%, var(--color-electric-indigo) 48% 49%, transparent 49%), repeating-linear-gradient(90deg, transparent 0 25px, rgba(6,214,160,.65) 26px 27px); }
@media (max-width: 29.99rem) { .home-page .home-hero__actions { display: grid; grid-template-columns: minmax(0,1fr); } .home-page .home-hero__actions > * { width: 100%; } .home-page .home-inline-cta .button, .home-page .home-final-cta__copy .button { width: 100%; } }
@media (min-width: 40rem) { .home-page .home-world__definitions, .home-page .home-squad__columns, .home-page .home-routine-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .home-page .home-progression { grid-template-columns: repeat(2, minmax(0,1fr)); } .home-page .home-principles { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 52.5rem) { .home-page .home-feature-lists { grid-template-columns: repeat(2, minmax(0,1fr)); } .home-page .home-checklist { grid-template-columns: repeat(2, minmax(0,1fr)); } .home-page .home-gallery__grid { grid-template-columns: repeat(12, minmax(0,1fr)); } .home-page .home-gallery__item--combat { grid-column: span 7; } .home-page .home-gallery__item--operators, .home-page .home-gallery__item--base { grid-column: span 5; } .home-page .home-gallery__item--story { grid-column: 1 / -1; } }
@media (min-width: 60rem) { .home-page .home-hero__grid { grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--space-6); } .home-page .home-hero__copy { grid-column: span 6; } .home-page .home-hero__figure { grid-column: span 6; } .home-page .home-hero__figure img { aspect-ratio: 12 / 7; } .home-page .home-overview__grid { grid-template-columns: repeat(12, minmax(0,1fr)); } .home-page .home-overview__heading { grid-column: span 5; } .home-page .home-overview__article { grid-column: span 7; grid-row: 2; } .home-page .home-overview__callout { grid-column: 9 / -1; grid-row: 2; align-self: start; } .home-page .home-gameplay__top { grid-template-columns: repeat(12, minmax(0,1fr)); } .home-page .home-gameplay__roles { grid-column: span 5; } .home-page .home-gameplay__figure { grid-column: span 7; } .home-page .home-gameplay__lower { grid-template-columns: repeat(12, minmax(0,1fr)); } .home-page .home-tactic-panel { grid-column: span 6; } .home-page .home-routine-grid { grid-column: span 6; } .home-page .home-world__grid { grid-template-columns: repeat(12, minmax(0,1fr)); } .home-page .home-world__figure { grid-column: span 7; } .home-page .home-world__article { grid-column: span 5; } .home-page .home-operators__top { grid-template-columns: repeat(12, minmax(0,1fr)); } .home-page .home-operators__intro { grid-column: span 5; } .home-page .home-operators__figure { grid-column: span 7; } .home-page .home-base__top { grid-template-columns: repeat(12, minmax(0,1fr)); } .home-page .home-base__figure { grid-column: span 7; } .home-page .home-base__article { grid-column: span 5; } .home-page .home-checklist { grid-template-columns: repeat(3, minmax(0,1fr)); } .home-page .home-faq__grid { grid-template-columns: repeat(12, minmax(0,1fr)); } .home-page .home-faq__heading { grid-column: span 6; } .home-page .home-faq__tip { grid-column: 9 / -1; grid-row: 2; align-self: start; } .home-page .home-faq__list { grid-column: span 8; grid-row: 2; } .home-page .home-final-cta__grid { grid-template-columns: repeat(12, minmax(0,1fr)); } .home-page .home-final-cta__copy { grid-column: span 7; } .home-page .home-final-cta__field { grid-column: span 5; } }
@media (min-width: 75rem) { .home-page .home-hero__copy { grid-column: span 5; } .home-page .home-hero__figure { grid-column: 7 / -1; } .home-page .home-gallery__item--combat { grid-column: span 6; } .home-page .home-gallery__item--operators, .home-page .home-gallery__item--base { grid-column: span 3; } .home-page .home-progression { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (prefers-reduced-motion: reduce) { .home-page .home-gallery__item:hover, .home-page .home-gallery__item:focus-within { transform: none; } }