.home-page { overflow: clip; }
.home-page a { font-weight: 700; }
.home-hero { position: relative; min-height: 44rem; isolation: isolate; background: var(--color-navy-950); color: var(--color-white); }
.home-hero__media { position: absolute; inset: 0; overflow: hidden; background: var(--color-navy-950); }
.home-hero__media::after { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(16 42 67 / .9) 0%, rgb(16 42 67 / .6) 42%, rgb(16 42 67 / .08) 75%); content: ""; }
.home-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 500ms ease; }
.home-hero__content-wrap { position: relative; z-index: 2; display: grid; min-height: 44rem; align-items: end; padding-block: var(--space-10); }
.home-hero__content { grid-column: 1; display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-5); max-width: 60rem; }
.home-hero h1, .home-hero p { margin: 0; color: var(--color-white); }
.home-hero h1 { font-size: clamp(2.8rem, 5.7vw, 4.75rem); }
.home-hero__eyebrow { color: var(--color-sun-400) !important; }
.home-hero__content > p:not(.eyebrow):not(.home-hero__trust) {  font-size: var(--text-lg); line-height: var(--leading-relaxed); color: #f8f4ec; }
.home-hero__actions { display: flex; min-width: 0; flex-wrap: wrap; gap: var(--space-3); }
.home-hero__secondary { border-color: var(--color-white); color: var(--color-white); }
.home-hero__secondary:hover { background: var(--color-white); color: var(--color-navy-950); }
.home-hero__trust { max-width: 32rem; padding-top: var(--space-3); border-top: 1px solid var(--color-emerald-500); font-size: var(--text-sm); line-height: 1.45; color: #f8f4ec !important; }
.home-hero__trajectory { position: absolute; z-index: 1; top: 8%; right: 3%; width: min(55vw, 48rem); color: var(--color-white); opacity: .82; fill: none; stroke: currentColor; stroke-width: 2; stroke-dasharray: 8 10; }
.home-hero__trajectory circle { fill: var(--color-sun-400); stroke: var(--color-white); }
.home-hero__wind { position: absolute; z-index: 1; top: 24%; right: 15%; display: flex; min-width: 7rem; flex-direction: column; gap: .1rem; padding: var(--space-3); border: 1px solid rgb(255 255 255 / .45); border-radius: var(--radius-md); background: rgb(16 42 67 / .45); color: var(--color-white); font-family: var(--font-heading); }
.home-hero__wind span { font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; }
.home-hero__wind strong { color: var(--color-sun-400); font-size: var(--text-2xl); line-height: 1; }
.home-hero__wind small { color: #f8f4ec; }
.home-points__intro { display: flex; min-width: 0; flex-direction: column; gap: var(--space-4); max-width: 37.5rem; }
.home-points__intro > * { margin: 0; }
.home-points__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-7); }
.home-point-card { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-4); min-height: 100%; padding: var(--space-5); border: var(--border-default); border-top: 4px solid var(--color-emerald-700); border-radius: var(--radius-lg); background: var(--color-pearl-50); box-shadow: var(--shadow-card); transition: transform var(--transition-fast), border-color var(--transition-fast); }
.home-point-card--competition { border-top-color: var(--color-coral-500); }
.home-point-card--course { background: var(--color-pearl-100); }
.home-point-card:hover { border-color: var(--color-emerald-500); transform: translateY(-2px); }
.home-point-card > * { margin: 0; }
.home-point-card__top { display: flex; width: 100%; min-width: 0; align-items: center; justify-content: space-between; }
.home-point-card__top strong { color: var(--color-line); font-family: var(--font-heading); font-size: var(--text-3xl); line-height: 1; }
.home-point-card p { font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.home-point-card > a, .home-point-card__links { margin-top: auto; }
.home-point-card__links { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.home-modes { background: var(--color-azure-100); }
.home-modes__intro { display: flex; min-width: 0; flex-direction: column; gap: var(--space-4); max-width: 39rem; }
.home-modes__intro > * { margin: 0; }
.home-modes__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3.5fr) minmax(0, 3.5fr); gap: var(--space-5); margin-top: var(--space-7); }
.home-mode { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-4); min-height: 100%; padding: clamp(var(--space-5), 3vw, var(--space-7)); border-radius: var(--radius-lg); }
.home-mode > * { margin: 0; }
.home-mode h3 { font-size: clamp(1.75rem, 3vw, 2.25rem); }
.home-mode p { font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.home-mode a { margin-top: auto; }
.home-mode--duel { background: var(--color-navy-950); color: var(--color-white); }
.home-mode--duel h3, .home-mode--duel p { color: var(--color-white); }
.home-mode--duel .eyebrow { color: var(--color-sun-400); }
.home-mode--duel a { color: var(--color-white); }
.home-mode--quick { border: 1px solid #b8ddf6; background: var(--color-azure-100); }
.home-mode--rounds { border: var(--border-default); background: var(--color-pearl-100); }
.home-mechanics { background: var(--color-pearl-100); }
.home-mechanics__intro { display: flex; min-width: 0; flex-direction: column; gap: var(--space-4); max-width: 38.75rem; }
.home-mechanics__intro > * { margin: 0; }
.home-mechanics__layout { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-6); align-items: start; margin-top: var(--space-7); }
.home-mechanics__media { position: relative; min-width: 0; overflow: hidden; border-radius: var(--radius-xl); background: var(--color-azure-100); aspect-ratio: 4 / 3; }
.home-mechanics__media img { width: 100%; height: 100%; object-fit: cover; }
.home-mechanics__overlay { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--color-emerald-500); fill: none; stroke: currentColor; stroke-width: 3; stroke-dasharray: 8 8; opacity: .92; }
.home-mechanics__label { position: absolute; padding: .3rem .55rem; border-radius: var(--radius-sm); background: rgb(255 252 247 / .88); color: var(--color-navy-950); font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 700; }
.home-mechanics__label--wind { top: 22%; left: 24%; }
.home-mechanics__label--impact { top: 26%; right: 17%; }
.home-mechanics__list { display: flex; min-width: 0; flex-direction: column; gap: var(--space-4); }
.home-mechanic { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-3); min-width: 0; padding-bottom: var(--space-4); border-bottom: var(--border-default); }
.home-mechanic:last-child { border-bottom: 0; padding-bottom: 0; }
.home-mechanic__number { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border-radius: 50%; background: var(--color-emerald-700); color: var(--color-white); font-family: var(--font-heading); font-weight: 700; }
.home-mechanic:nth-child(5) .home-mechanic__number { background: var(--color-sun-400); color: var(--color-navy-950); }
.home-mechanic div { min-width: 0; }
.home-mechanic h3 { margin-bottom: var(--space-2); font-size: var(--text-xl); }
.home-mechanic p { margin-bottom: var(--space-3); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.home-course__layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-7); align-items: center; }
.home-course__copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-4); max-width: 35rem; }
.home-course__copy > * { margin: 0; }
.home-course__copy > h3 { margin-top: var(--space-2); }
.home-inline-link { color: var(--color-emerald-700); }
.home-course__note { display: flex; min-width: 0; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); padding: var(--space-5); border: 1px solid #b8ddf6; border-radius: var(--radius-lg); background: var(--color-azure-100); max-width: 26.25rem; }
.home-course__note > * { margin: 0; }
.home-course__note h3 { font-size: var(--text-xl); }
.home-course__note p:last-child { font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.home-course__media { min-width: 0; margin: 0; overflow: hidden; border-radius: var(--radius-xl); aspect-ratio: 3 / 2; background: var(--color-azure-100); }
.home-course__media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.home-equipment { background: var(--color-pearl-100); }
.home-equipment__intro { display: flex; min-width: 0; flex-direction: column; gap: var(--space-4); max-width: 36.25rem; }
.home-equipment__intro > * { margin: 0; }
.home-equipment__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); gap: var(--space-5); align-items: stretch; margin-top: var(--space-7); }
.home-equipment-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: var(--border-default); border-radius: var(--radius-lg); background: var(--color-pearl-50); box-shadow: var(--shadow-card); }
.home-equipment-card__visual { min-width: 0; aspect-ratio: 16 / 9; background-color: var(--color-azure-100); background-position: center; background-size: cover; }
.home-equipment-card__visual--club { background-image: linear-gradient(135deg, rgb(16 42 67 / .15), rgb(8 122 90 / .25)), url('/public/media/golf-clash-shot-mechanics-green.webp'); }
.home-equipment-card__visual--ball { background-image: linear-gradient(135deg, rgb(22 119 200 / .12), rgb(255 252 247 / .2)), url('/public/media/golf-clash-championship-sunrise-hero.webp'); background-position: 75% center; }
.home-equipment-card__body { display: flex; min-width: 0; flex: 1; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-5); }
.home-equipment-card__body > * { margin: 0; }
.home-equipment-card__body h3 { font-size: var(--text-2xl); }
.home-equipment-card__body p:not(.eyebrow) { font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.home-equipment-card__body > a { margin-top: auto; }
.home-equipment-card--custom { background: var(--color-pearl-100); }
.home-equipment-card__tags { display: flex; min-width: 0; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; }
.home-equipment__closing { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: var(--space-5); margin-top: var(--space-6); }
.home-equipment__closing p { min-width: 0; max-width: 32.5rem; margin: 0; }
.home-progress__intro { display: flex; min-width: 0; flex-direction: column; gap: var(--space-4); max-width: 38.75rem; }
.home-progress__intro > * { margin: 0; }
.home-progress__timeline { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-7); }
.home-progress__timeline::before { position: absolute; z-index: 0; top: 2.25rem; right: 10%; left: 10%; height: 2px; background: var(--color-emerald-500); content: ""; }
.home-progress-step { position: relative; z-index: 1; display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-5); border: var(--border-default); border-radius: var(--radius-lg); background: var(--color-pearl-50); }
.home-progress-step > * { margin: 0; }
.home-progress-step__number { display: grid; width: 4.5rem; height: 4.5rem; place-items: center; border: 3px solid var(--color-emerald-500); border-radius: 50%; background: var(--color-pearl-50); color: var(--color-navy-950); font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 700; }
.home-progress-step:nth-child(3) { background: var(--color-azure-100); }
.home-progress-step:nth-child(4) .home-progress-step__number { border-color: var(--color-sun-400); }
.home-progress-step h3 { font-size: var(--text-xl); }
.home-progress-step p { font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.home-progress-step a { margin-top: auto; }
.home-community { background: var(--color-azure-100); }
.home-community__heading { display: flex; min-width: 0; flex-direction: column; gap: var(--space-4); max-width: 36rem; }
.home-community__heading > * { margin: 0; }
.home-community__layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); align-items: stretch; margin-top: var(--space-7); }
.home-community__media { min-width: 0; margin: 0; overflow: hidden; border-radius: var(--radius-xl); background: var(--color-pearl-100); }
.home-community__media img { width: 100%; height: 100%; object-fit: cover; }
.home-community__blocks { display: flex; min-width: 0; flex-direction: column; gap: var(--space-5); }
.home-community-card { display: flex; min-width: 0; flex: 1; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-6); border-radius: var(--radius-lg); }
.home-community-card > * { margin: 0; }
.home-community-card h3 { font-size: var(--text-2xl); }
.home-community-card p { font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.home-community-card--clans { background: var(--color-navy-950); color: var(--color-white); }
.home-community-card--clans h3, .home-community-card--clans p { color: var(--color-white); }
.home-community-card--replays { border: var(--border-default); background: var(--color-pearl-100); }
.home-community-card--replays a { margin-top: auto; }
.home-community__notice { max-width: 37.5rem; margin: var(--space-5) 0 0 auto; padding: var(--space-4); border: 1px solid #f4b4a6; border-radius: var(--radius-md); background: var(--color-pearl-50); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.home-reading__intro { display: flex; min-width: 0; flex-direction: column; gap: var(--space-4); max-width: 35rem; }
.home-reading__intro > * { margin: 0; }
.home-reading__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-7); }
.home-reading-card { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-4); min-height: 100%; padding: var(--space-5); border: var(--border-default); border-radius: var(--radius-lg); background: var(--color-pearl-50); box-shadow: var(--shadow-card); }
.home-reading-card > * { margin: 0; }
.home-reading-card:nth-child(2) .tag { border-color: #9bd8c3; background: #e6f6ef; }
.home-reading-card:nth-child(3) .tag { border-color: #b8ddf6; background: var(--color-azure-100); }
.home-reading-card:nth-child(4) .tag { border-color: #f4b4a6; background: #fff0ec; }
.home-reading-card h3 { font-size: var(--text-2xl); }
.home-reading-card p { font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.home-reading-card a { margin-top: auto; }
.home-closing { padding-top: var(--space-7); }
.home-closing__panel { display: flex; min-width: 0; flex-direction: column; align-items: stretch; gap: var(--space-6); padding: clamp(var(--space-6), 6vw, var(--space-9)); border-radius: var(--radius-xl); background: var(--color-emerald-700); color: var(--color-white); }
.home-closing__copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-4); width: min(100%, 37.5rem); margin-inline: auto; }
.home-closing__copy > * { margin: 0; }
.home-closing__copy h2, .home-closing__copy p { color: var(--color-white); }
.home-closing__copy .eyebrow { color: var(--color-sun-400); }
.home-closing__copy p:not(.eyebrow) { line-height: var(--leading-relaxed); }
.home-closing__actions { display: flex; min-width: 0; flex-wrap: wrap; gap: var(--space-3); }
.home-closing__secondary { border-color: var(--color-white); color: var(--color-white); }
.home-closing__secondary:hover { background: var(--color-white); color: var(--color-emerald-700); }
.home-closing__purchase { display: flex; min-width: 0; flex-direction: column; gap: var(--space-3); width: min(100%, 42.5rem); margin-inline: auto; padding: var(--space-5); border-radius: var(--radius-lg); background: var(--color-pearl-50); color: var(--color-navy-950); }
.home-closing__purchase > * { margin: 0; }
.home-closing__purchase h3 { font-size: var(--text-xl); }
.home-closing__purchase p { font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.home-closing__independence { width: min(100%, 42.5rem); margin: 0 auto; color: #effcf7; font-size: var(--text-sm); line-height: 1.45; }
@media (max-width: 65rem) { .home-points__grid, .home-reading__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-modes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-mode--duel { grid-column: 1 / -1; } .home-equipment__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-equipment-card--clubs { grid-column: 1 / -1; } .home-progress__timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-progress__timeline::before { display: none; } }
@media (max-width: 60rem) { .home-mechanics__layout { grid-template-columns: minmax(0, 1fr); } .home-mechanics__media { order: -1; } .home-mechanics__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-mechanic:last-child { grid-column: 1 / -1; } .home-course__layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); } .home-course__media { order: -1; } }
@media (max-width: 56.25rem) { .home-community__layout { grid-template-columns: minmax(0, 1fr); } .home-community__blocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-community__notice { margin-left: 0; } }
@media (max-width: 47.5rem) { .home-hero { min-height: 0; } .home-hero__media { position: relative; height: auto; aspect-ratio: 4 / 3; } .home-hero__media::after { background: linear-gradient(180deg, transparent 50%, rgb(16 42 67 / .35)); } .home-hero__content-wrap { display: block; min-height: 0; width: 100%; padding: 0; } .home-hero__content { max-width: none; gap: var(--space-5); padding: var(--space-6) var(--gutter) var(--space-7); background: var(--color-navy-950); } .home-hero h1 { font-size: clamp(2.5rem, 11vw, 3.4rem); } .home-hero__content > p:not(.eyebrow):not(.home-hero__trust) { max-width: none; font-size: var(--text-base); } .home-hero__actions, .home-closing__actions { width: 100%; flex-direction: column; } .home-hero__actions .button, .home-closing__actions .button { width: 100%; } .home-hero__trajectory { top: 14%; right: 4%; width: 66vw; } .home-hero__wind { top: 11%; right: 7%; min-width: 5.5rem; padding: var(--space-2); } .home-hero__wind small { display: none; } .home-points__grid, .home-modes__grid, .home-equipment__grid, .home-progress__timeline, .home-reading__grid, .home-community__blocks { grid-template-columns: minmax(0, 1fr); } .home-mode--duel, .home-equipment-card--clubs, .home-mechanic:last-child { grid-column: auto; } .home-points__grid, .home-modes__grid, .home-equipment__grid, .home-progress__timeline, .home-reading__grid { gap: var(--space-4); margin-top: var(--space-6); } .home-mechanics__list { grid-template-columns: minmax(0, 1fr); } .home-mechanics__overlay, .home-mechanics__label--impact { display: none; } .home-mechanics__media { aspect-ratio: 4 / 3; } .home-course__copy { max-width: none; } .home-course__note { max-width: none; } .home-equipment__closing { flex-direction: column; align-items: stretch; } .home-equipment__closing p { max-width: none; } .home-equipment__closing .button { width: 100%; } .home-progress__timeline { position: relative; padding-left: var(--space-5); } .home-progress__timeline::after { position: absolute; top: 1rem; bottom: 1rem; left: .7rem; width: 2px; background: var(--color-emerald-500); content: ""; } .home-progress-step { z-index: 1; } .home-progress-step__number { width: 3.5rem; height: 3.5rem; font-size: var(--text-xl); } .home-community__layout { margin-top: var(--space-6); } .home-community__media { aspect-ratio: 16 / 9; } .home-community-card { padding: var(--space-5); } .home-closing__panel { padding: var(--space-6); } .home-closing__copy, .home-closing__purchase, .home-closing__independence { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .home-hero__media img { transform: none !important; } }