:root { --focus-color: #fcff7b; color-scheme: dark; }
body { position: relative; min-height: 100svh; overflow-x: hidden; background: #2e144f; color: #fff; }
.hero-art { position: fixed; inset: 0; overflow: hidden; background: linear-gradient(145deg,#1d0b34 0%,#5b2784 46%,#f05b78 100%); }
.sun { position: absolute; width: min(54vw,720px); aspect-ratio: 1; top: -24%; right: -6%; border-radius: 50%; background: #ffca66; box-shadow: 0 0 120px rgb(255 186 104 / 38%); }
.wave { position: absolute; width: 120vw; height: 42vh; left: -10vw; bottom: -21vh; border-radius: 50% 50% 0 0; transform: rotate(-4deg); }
.wave-one { background: #32195e; box-shadow: 0 -30px 80px rgb(44 17 75 / 30%); }
.wave-two { bottom: -31vh; background: #110b29; transform: rotate(3deg); }
.spark { position: absolute; color: #ffef9c; font-size: clamp(2rem,5vw,5rem); }
.spark-one { top: 25%; left: 8%; }.spark-two { top: 20%; right: 29%; font-size: 2rem; }
.hero-topbar { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 24px clamp(24px,4vw,68px); }
.hero-topbar > a { display: flex; min-height: 48px; align-items: center; gap: 12px; font-weight: 750; text-decoration: none; }
.hero-topbar img { border-radius: 14px; }
.bookmark-button { border: 1px solid rgb(255 255 255 / 28%); border-radius: 999px; background: rgb(255 255 255 / 10%); color: #fff; padding: 0 17px; backdrop-filter: blur(12px); }
.hero-main { position: relative; z-index: 2; display: flex; min-height: calc(100svh - 160px); flex-direction: column; justify-content: space-between; padding: clamp(40px,7vh,90px) clamp(24px,7vw,110px) 86px; }
.hero-kicker { margin: 0 0 12px; color: #ffef9c; font-size: .76rem; font-weight: 900; letter-spacing: .24em; }
.hero-main h1 { margin: 0; font-size: clamp(4rem,10vw,9.8rem); line-height: .82; letter-spacing: -.075em; text-shadow: 0 16px 50px rgb(35 6 49 / 25%); }
.hero-main h1 em { color: #fcff7b; font-style: normal; }
.hero-main section > p:last-child { margin: 24px 0 0; font-size: clamp(1rem,2vw,1.3rem); opacity: .78; }
.entry-dock { display: grid; grid-template-columns: repeat(6,1fr); align-self: center; width: min(1180px,100%); overflow: hidden; border: 1px solid rgb(255 255 255 / 25%); border-radius: 24px; background: rgb(21 9 42 / 56%); box-shadow: 0 24px 70px rgb(16 6 34 / 30%); backdrop-filter: blur(22px); }
.entry-dock a { position: relative; display: grid; min-height: 112px; align-content: center; gap: 4px; padding: 16px 18px; border-right: 1px solid rgb(255 255 255 / 15%); text-decoration: none; transition: background .18s ease; }
.entry-dock a:last-child { border-right: 0; }
.entry-dock a:hover { background: rgb(255 255 255 / 14%); }
.entry-dock span { color: #ffef9c; font-size: .66rem; font-weight: 850; letter-spacing: .15em; }
.entry-dock strong { font-size: 1.05rem; }
.entry-dock small { color: rgb(255 255 255 / 60%); }
.hero-footer { position: absolute; z-index: 3; right: clamp(24px,4vw,68px); bottom: 24px; left: clamp(24px,4vw,68px); display: flex; justify-content: space-between; color: rgb(255 255 255 / 52%); font-size: .64rem; font-weight: 800; letter-spacing: .14em; }
.support-fab { background: #fcff7b; color: #1a1030; }.support-fab::before { background: #f05b78; box-shadow: none; }
.support-panel--hero { top: 28px; right: max(34px, calc((100vw - 1440px) / 2 + 34px)); bottom: auto; width: 390px; max-height: min(520px, calc(100svh - 336px)); --support-header: linear-gradient(135deg,#7149ff,#842bf0); --support-text: #242034; --support-muted: #6d687b; --support-send: #7134f1; }
@media (max-width: 760px) { body { overflow-y: auto; } .sun { width: 100vw; top: -13%; right: -34%; } .hero-topbar { padding: 14px 16px; } .hero-main { min-height: calc(100svh - 80px); padding: 52px 12px 110px; } .hero-main section { padding: 0 12px; } .hero-main h1 { font-size: clamp(2.9rem,13vw,5.4rem); line-height: .88; } .hero-footer { right: 16px; bottom: 16px; left: 16px; } .hero-footer span:first-child { display: none; } .support-panel--hero { top: auto; right: 12px; bottom: calc(max(12px,env(safe-area-inset-bottom)) + 64px); left: 12px; width: calc(100vw - 24px); max-height: calc(100svh - 94px); } }
@media (max-width: 768px) { .entry-dock { grid-template-columns: repeat(2,1fr); transform: translateY(-100px); border-radius: 18px; } .entry-dock a { min-height: 82px; padding: 11px 12px; border-bottom: 1px solid rgb(255 255 255 / 15%); } .entry-dock a:nth-child(2n) { border-right: 0; } .entry-dock a:nth-child(n+5) { border-bottom: 0; } .entry-dock small { display: none; } }