.home-page { --home-surface: var(--color-surface); --home-deep: var(--color-primary-deep); --home-line: var(--color-line); background: var(--color-page); }
.home-page .section { overflow: hidden; }
.home-hero { position: relative; display: flex; min-width: 0; min-height: clamp(47.5rem, 57vw, 55rem); overflow: hidden; background: var(--home-deep); color: var(--color-surface); isolation: isolate; }
.home-hero__image, .home-hero__overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.home-hero__image { z-index: -3; object-fit: cover; object-position: 59% 50%; }
.home-hero__overlay { z-index: -2; background: linear-gradient(90deg, rgba(16,43,72,.97) 0%, rgba(16,43,72,.87) 38%, rgba(16,43,72,.26) 72%, rgba(16,43,72,.12) 100%), linear-gradient(0deg, rgba(16,43,72,.74), transparent 54%); }
.home-hero__particles { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.home-hero__particles span { position: absolute; width: .35rem; height: .35rem; border-radius: 50%; background: rgba(255,253,247,.46); animation: home-drift 8s ease-in-out infinite; }
.home-hero__particles span:nth-child(1) { top: 26%; left: 57%; } .home-hero__particles span:nth-child(2) { top: 46%; left: 69%; animation-delay: -3s; } .home-hero__particles span:nth-child(3) { top: 20%; left: 84%; animation-delay: -5s; }
.home-hero__container { display: flex; width: min(100% - 3rem, var(--container-wide)); align-items: center; padding-block: 9rem 4rem; }
.home-hero__content { display: flex; width: min(100%, 43.125rem); min-width: 0; flex: 0 1 43.125rem; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.home-hero__content h1 { margin: 0; color: var(--color-surface); font-size: var(--text-hero); line-height: var(--leading-tight); }
.home-hero__eyebrow { display: flex; align-items: center; gap: var(--space-3); margin: 0; color: var(--color-surface); font-size: var(--text-xs); font-weight: 700; letter-spacing: .13em; line-height: var(--leading-small); }
.home-hero__eyebrow::before { width: 2rem; height: 1px; background: var(--color-gold); content: ""; }
.home-hero__lead { width: min(100%, 38.75rem); margin: 0; padding: var(--space-4); background: rgba(16,43,72,.7); font-size: var(--text-lead); line-height: 1.55; }
.home-hero__actions, .home-final__actions { display: flex; min-width: 0; flex-wrap: wrap; gap: var(--space-3); }
.home-hero__actions > *, .home-final__actions > * { min-width: 0; }
.home-hero__primary { border-color: var(--color-surface); background: var(--color-surface); color: var(--color-primary-deep); }
.home-hero__primary:hover { border-color: var(--color-surface-muted); background: var(--color-surface-muted); color: var(--color-primary-deep); }
.home-hero__secondary { border-color: var(--color-surface); background: transparent; color: var(--color-surface); }
.home-hero__secondary:hover { border-color: var(--color-surface); background: rgba(255,253,247,.14); color: var(--color-surface); }
.home-section-intro { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.home-section-intro > * { margin: 0; }
.home-section-intro .lead { width: min(100%, 43.75rem); }
.home-pillars__intro { width: min(100%, 45.25rem); margin-bottom: var(--space-7); }
.home-pillars__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
.home-pillars__grid > *, .home-map__grid > *, .home-road__grid > *, .home-civilizations__top > *, .home-civilizations__bottom > *, .home-battles__grid > *, .home-index__grid > *, .home-trust__grid > *, .home-trust__cards > *, .home-tech__grid > * { min-width: 0; }
.home-pillar-card, .home-civilizations-card, .home-index-card, .home-tech__grid article, .home-trust__cards article { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-5); border: var(--border); border-radius: var(--radius-card); background: var(--home-surface); transition: transform var(--transition-fast), border-color var(--transition-fast); }
.home-pillar-card > *, .home-civilizations-card > *, .home-index-card > *, .home-tech__grid article > *, .home-trust__cards article > * { margin: 0; }
.home-pillar-card:hover, .home-index-card:hover { transform: translateY(-2px); border-color: var(--color-gold); }
.home-pillar-card a, .home-index-card > a { margin-top: auto; font-weight: 700; }
.home-card-label { margin: 0; font-size: var(--text-xs); font-weight: 700; letter-spacing: .11em; line-height: var(--leading-small); text-transform: uppercase; }
.home-card-label--gold { color: #72521b; } .home-card-label--terracotta { color: var(--color-terracotta); } .home-card-label--jade { color: var(--color-jade); } .home-card-label--blue { color: var(--color-primary); }
.home-map { background: var(--color-surface-muted); }
.home-map__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: var(--space-7); }
.home-map__copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.home-map__copy > * { margin: 0; } .home-map__copy .lead { width: min(100%, 37.5rem); }
.home-map__visual { position: relative; min-width: 0; overflow: hidden; border: var(--border); border-radius: var(--radius-card); background: var(--home-deep); }
.home-map__visual img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 52%; }
.home-map__notes { position: absolute; inset: 0; }
.home-map-note { position: absolute; width: min(11.875rem, 32%); padding: var(--space-3); border: 1px solid rgba(216,200,168,.9); border-radius: var(--radius-sm); background: rgba(255,253,247,.94); color: var(--color-text); font-size: var(--text-sm); line-height: 1.45; }
.home-map-note strong, .home-map-note p { display: block; margin: 0; } .home-map-note p { margin-top: var(--space-1); }
.home-map-note:nth-child(1) { top: 8%; left: 5%; } .home-map-note:nth-child(2) { top: 42%; right: 4%; } .home-map-note:nth-child(3) { bottom: 7%; left: 19%; }
.home-road__heading { width: min(100%, 43rem); margin-bottom: var(--space-7); }.home-road__heading > * { margin: 0; }.home-road__heading h2 { margin-top: var(--space-2); }
.home-road__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: start; gap: var(--space-7); }
.home-road__steps { display: flex; min-width: 0; flex-direction: column; gap: var(--space-5); }
.home-road-step { position: relative; display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); min-width: 0; gap: var(--space-4); padding: 0 0 var(--space-5); border-bottom: var(--border); }
.home-road-step > * { min-width: 0; }.home-road-step > span { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border: var(--border-gold); color: var(--color-primary); font-family: var(--font-heading); font-size: 1.4rem; font-weight: 700; }.home-road-step h3 { margin-bottom: var(--space-3); }.home-road-step p { margin: 0; }.home-road-step .home-card-label { margin-bottom: var(--space-2); }
.home-road__aside { display: flex; min-width: 0; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border: var(--border-gold); background: var(--color-surface-muted); }.home-road__aside > * { margin: 0; }
@media (min-width: 61.25rem) { .home-road__aside { position: sticky; top: var(--space-6); } }
.home-civilizations { background: var(--color-surface); }.home-civilizations__top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: var(--space-7); }.home-civilizations__copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-4); }.home-civilizations__copy > * { margin: 0; }.home-civilizations__copy .lead { width: min(100%, 38.75rem); }.home-civilizations__image { width: 100%; margin: 0; }.home-civilizations__image img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 45%; border: var(--border); border-radius: var(--radius-card); }.home-civilizations__bottom { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-7); }.home-civilizations__cta { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--space-4); padding: var(--space-5); border-left: 3px solid var(--color-gold); background: var(--color-surface-muted); }.home-civilizations__cta > * { margin: 0; }
.home-battles { background: var(--home-deep); color: var(--color-surface); }.home-battles h2, .home-battles h3 { color: var(--color-surface); }.home-battles .eyebrow { color: #ead9af; }.home-battles__intro { display: flex; width: min(100%, 42.5rem); min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-7); }.home-battles__intro > * { margin: 0; }.home-battles__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }.home-battles__grid article { min-width: 0; padding-top: var(--space-4); border-top: 1px solid rgba(216,200,168,.72); }.home-battles__grid article > * { margin: 0; }.home-battles__grid span { display: block; margin-bottom: var(--space-3); color: #e6bd70; font-family: var(--font-heading); font-size: 2rem; font-weight: 700; }.home-battles__grid article:nth-child(3) span { color: #86bcad; }.home-battles__grid h3 { margin-bottom: var(--space-3); }.home-battles__quote { width: min(100%, 42.5rem); margin: var(--space-7) 0 var(--space-4); border: 0; background: var(--color-surface); color: var(--color-primary-deep); }.home-battles__quote p, .home-battles__link { margin: 0; }.home-battles__link a { color: var(--color-surface); font-weight: 700; }
.home-index__intro { width: min(100%, 40rem); margin-bottom: var(--space-7); }.home-index__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-5); }.home-index-card:nth-child(1), .home-index-card:nth-child(2), .home-index-card:nth-child(3) { grid-column: span 4; }.home-index-card--battle { grid-column: span 5; }.home-index-card--map { grid-column: span 4; }.home-index-card--pending { grid-column: span 3; }.home-index-card h3 a { color: inherit; }.home-index-card .status { margin-bottom: auto; }
.home-trust { background: var(--color-surface-muted); }.home-trust__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; gap: var(--space-7); }.home-trust__policy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-4); }.home-trust__policy > * { margin: 0; }.home-trust__policy-panel { display: flex; width: min(100%, 43.75rem); min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-5); border: var(--border-gold); background: var(--color-surface); }.home-trust__policy-panel > * { margin: 0; }.home-trust__cards { display: flex; min-width: 0; flex-direction: column; gap: var(--space-5); }.home-trust__cards article span { color: var(--color-gold); font-family: var(--font-heading); font-size: 1.8rem; font-weight: 700; }
.home-tech { background-image: linear-gradient(rgba(216,200,168,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(216,200,168,.18) 1px, transparent 1px); background-size: 2rem 2rem; }.home-tech__intro { width: min(100%, 40.625rem); margin-bottom: var(--space-7); }.home-tech__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-5); }.home-tech__grid article:nth-child(-n+3) { grid-column: span 4; }.home-tech__wide { grid-column: 1 / span 8; }
.home-final { background: var(--home-deep); color: var(--color-surface); }.home-final__content { display: flex; width: min(100%, 47.5rem); min-width: 0; flex-direction: column; align-items: center; gap: var(--space-4); margin-inline: auto; padding: var(--space-7); border: var(--border-gold); text-align: center; }.home-final__content > * { margin: 0; }.home-final h2 { color: var(--color-surface); }.home-final .eyebrow { color: #ead9af; }.home-final__actions { justify-content: center; }.home-final__note { width: min(100%, 35rem); color: #ead9af; font-size: var(--text-sm); }
@keyframes home-drift { 0%,100% { transform: translate(0,0); opacity: .25; } 50% { transform: translate(5px,-8px); opacity: .75; } }
@media (max-width: 68.75rem) { .home-hero { min-height: 48rem; }.home-pillars__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.home-index__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.home-index-card:nth-child(n) { grid-column: span 1; }.home-tech__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.home-tech__grid article:nth-child(-n+3), .home-tech__wide { grid-column: span 1; } }
@media (max-width: 61.24rem) { .home-hero__content { width: min(100%, 50rem); flex-basis: 50rem; }.home-hero__overlay { background: linear-gradient(0deg, rgba(16,43,72,.96) 0%, rgba(16,43,72,.83) 48%, rgba(16,43,72,.25) 100%); }.home-map__grid, .home-road__grid, .home-civilizations__top, .home-trust__grid { grid-template-columns: minmax(0, 1fr); }.home-map__copy .lead, .home-civilizations__copy .lead { width: min(100%, 42rem); }.home-map__visual { width: 100%; }.home-road__aside { order: -1; }.home-civilizations__image { width: min(100%, 38rem); }.home-civilizations__bottom { grid-template-columns: repeat(2, minmax(0, 1fr)); }.home-civilizations__cta { grid-column: span 2; }.home-map__notes { position: static; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); padding: var(--space-4); background: var(--color-surface-muted); }.home-map-note { position: static; width: auto; }.home-battles__grid { grid-template-columns: minmax(0, 1fr); }.home-battles__grid article { width: min(100%, 42rem); } }
@media (max-width: 43.75rem) { .home-hero { min-height: 43rem; }.home-hero__container { width: min(100% - 2rem, var(--container-wide)); align-items: flex-end; padding-block: 6rem 2rem; }.home-hero__content { gap: var(--space-4); }.home-hero__content h1 { font-size: clamp(3.25rem, 13vw, 3.75rem); }.home-hero__lead { padding: 0; background: transparent; font-size: var(--text-base); }.home-hero__actions, .home-final__actions { width: 100%; flex-direction: column; }.home-hero__actions > *, .home-final__actions > * { width: 100%; }.home-pillars__grid, .home-civilizations__bottom, .home-index__grid, .home-tech__grid { grid-template-columns: minmax(0, 1fr); }.home-civilizations__cta { grid-column: span 1; }.home-map__notes { grid-template-columns: minmax(0, 1fr); }.home-map__visual img { aspect-ratio: 4 / 3; }.home-road-step { grid-template-columns: 2.75rem minmax(0, 1fr); gap: var(--space-3); }.home-final__content { padding: var(--space-5); }.home-final__content h2 { font-size: 2rem; }.home-hero__particles { display: none; } }
@media (prefers-reduced-motion: reduce) { .home-hero__particles span { animation: none; }.home-pillar-card:hover, .home-index-card:hover { transform: none; } }