/* Hoshy web — shared styles. Dark sky theme matching the iOS app. */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --gold: #FFD16B;
    --bg: #050507;
}

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.65;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

/* Starfield — three layers of box-shadow stars, gentle twinkle */
.stars, .stars2 {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.stars::after {
    content: "";
    position: absolute;
    width: 2px; height: 2px;
    border-radius: 50%;
    background: transparent;
    box-shadow:
        4vw 12vh rgba(255,255,255,.7), 12vw 32vh rgba(255,255,255,.4),
        21vw 8vh rgba(255,255,255,.5), 33vw 44vh rgba(255,255,255,.35),
        41vw 16vh rgba(255,255,255,.6), 55vw 6vh rgba(255,255,255,.45),
        63vw 38vh rgba(255,255,255,.55), 72vw 21vh rgba(255,255,255,.4),
        81vw 47vh rgba(255,255,255,.6), 92vw 13vh rgba(255,255,255,.5),
        8vw 64vh rgba(255,255,255,.4), 17vw 82vh rgba(255,255,255,.55),
        29vw 71vh rgba(255,255,255,.35), 44vw 88vh rgba(255,255,255,.5),
        58vw 66vh rgba(255,255,255,.4), 69vw 79vh rgba(255,255,255,.6),
        78vw 91vh rgba(255,255,255,.35), 88vw 69vh rgba(255,255,255,.45),
        96vw 84vh rgba(255,255,255,.5), 50vw 52vh rgba(255,255,255,.3);
    animation: twinkle 4.5s ease-in-out infinite alternate;
}
.stars2::after {
    content: "";
    position: absolute;
    width: 1px; height: 1px;
    border-radius: 50%;
    background: transparent;
    box-shadow:
        7vw 24vh rgba(255,255,255,.35), 15vw 51vh rgba(255,255,255,.25),
        26vw 19vh rgba(255,255,255,.3), 37vw 61vh rgba(255,255,255,.2),
        48vw 29vh rgba(255,255,255,.35), 59vw 49vh rgba(255,255,255,.25),
        67vw 11vh rgba(255,255,255,.3), 76vw 57vh rgba(255,255,255,.2),
        86vw 33vh rgba(255,255,255,.35), 95vw 53vh rgba(255,255,255,.25),
        11vw 93vh rgba(255,255,255,.3), 24vw 76vh rgba(255,255,255,.2),
        39vw 96vh rgba(255,255,255,.3), 53vw 81vh rgba(255,255,255,.25),
        64vw 93vh rgba(255,255,255,.2), 83vw 78vh rgba(255,255,255,.3),
        2vw 41vh rgba(255,255,255,.25), 98vw 26vh rgba(255,255,255,.3);
    animation: twinkle 6s ease-in-out infinite alternate-reverse;
}
@keyframes twinkle {
    from { opacity: 1; }
    to   { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
    .stars::after, .stars2::after { animation: none; }
}

.page {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
    padding: 32px 24px 48px;
}

/* Top nav */
.nav {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 40px;
}
.wordmark {
    font-size: 17px;
    font-weight: 300;
    letter-spacing: 6px;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 0 14px rgba(255, 255, 255, 0.35);
}
.nav-links a {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.45);
    text-decoration: none;
    margin-left: 18px;
}
.nav-links a:hover { color: rgba(255, 255, 255, 0.8); }

/* Type */
h1 {
    font-size: 26px;
    font-weight: 400;
    color: #fff;
    margin-bottom: 6px;
}
h2 {
    font-size: 17px;
    font-weight: 500;
    color: #fff;
    margin: 30px 0 8px;
}
p, li { font-size: 15px; color: rgba(255, 255, 255, 0.72); }
p { margin-bottom: 12px; }
ul { padding-left: 22px; margin-bottom: 12px; }
li { margin-bottom: 5px; }
strong { color: rgba(255, 255, 255, 0.92); font-weight: 500; }
a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }
.date {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 28px;
}

/* Footer */
.footer {
    margin-top: 64px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.35);
}
.footer a { color: rgba(255, 255, 255, 0.5); margin-right: 14px; }
.footer .fine { margin-top: 8px; font-size: 12px; color: rgba(255, 255, 255, 0.25); }

/* Landing */
.hero {
    text-align: center;
    padding: 96px 0 72px;
}
.hero .big-wordmark {
    font-size: 38px;
    font-weight: 200;
    letter-spacing: 14px;
    color: #fff;
    text-shadow: 0 0 24px rgba(255, 255, 255, 0.4);
    margin-left: 14px; /* visually recenter letterspaced text */
}
.hero .tagline {
    margin-top: 18px;
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.6);
}
.pill {
    display: inline-block;
    margin-top: 36px;
    padding: 10px 22px;
    border: 1px solid rgba(255, 209, 107, 0.4);
    border-radius: 999px;
    background: rgba(255, 209, 107, 0.08);
    color: var(--gold);
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
    margin: 24px 0 8px;
}
.feature {
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    padding: 20px;
}
.feature h3 {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 6px;
    letter-spacing: 0.3px;
}
.feature p { font-size: 13.5px; color: rgba(255, 255, 255, 0.55); margin: 0; }

/* Centered status pages (email confirmed, 404) */
.center-card {
    min-height: 78vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.glow-circle {
    width: 96px; height: 96px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #FFD16B, #E0A84C);
    box-shadow: 0 0 44px rgba(255, 209, 107, 0.45);
    margin-bottom: 30px;
}
.glow-circle svg { width: 42px; height: 42px; }
.center-card h1 {
    font-weight: 300;
    letter-spacing: 3px;
}
.center-card p { max-width: 420px; margin-top: 10px; color: rgba(255,255,255,.6); }
.button {
    display: inline-block;
    margin-top: 30px;
    padding: 13px 34px;
    border-radius: 999px;
    background: #fff;
    color: #000;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}
.button:hover { text-decoration: none; opacity: 0.9; }
.hint { font-size: 12.5px; color: rgba(255,255,255,.35); margin-top: 16px; }

/* Support */
.contact-card {
    border: 1px solid rgba(255, 209, 107, 0.3);
    background: rgba(255, 209, 107, 0.06);
    border-radius: 16px;
    padding: 22px;
    margin: 18px 0 26px;
}
.contact-card p { margin: 0; }