@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800&family=Manrope:wght@400;500;600&display=swap');

:root {
    color-scheme: dark;
    --silver: #e7edf7;
    --muted: #aab7cb;
    --blue: #65baff;
    --night: #080e19;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--night); }
body { margin: 0; min-height: 100vh; color: var(--silver); font-family: 'Manrope', sans-serif; }
a { color: inherit; }
.landing {
    min-height: 100svh;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    isolation: isolate;
    background: var(--night);
}
.backdrop, .shade { position: absolute; inset: 0; z-index: -2; }
.backdrop {
    background-image: url('assets/aion-inspired-background.jpg');
    background-position: center;
    background-size: cover;
    transform: scale(1.015);
    animation: reveal 1.3s ease-out both;
}
.shade {
    z-index: -1;
    background:
        radial-gradient(ellipse at 50% 47%, rgba(5, 11, 22, .18) 0%, rgba(5, 11, 22, .48) 43%, rgba(4, 8, 15, .68) 100%),
        linear-gradient(180deg, rgba(4, 9, 17, .48) 0%, rgba(4, 9, 17, .12) 25%, rgba(4, 9, 17, .18) 65%, rgba(4, 9, 17, .8) 100%);
}
.topline {
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto;
    padding: 27px 0;
    display: flex;
    align-items: center;
    gap: 16px;
    color: rgba(231,237,247,.83);
    font-family: 'Cinzel', serif;
    font-size: 12px;
    letter-spacing: .18em;
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; white-space: nowrap; }
.brand-symbol { color: var(--blue); font-size: 19px; }
.brand-name { font-weight: 700; }
.topline-rule { height: 1px; flex: 1; background: linear-gradient(90deg, rgba(163,192,225,.55), transparent); }
.topline-caption { color: rgba(202,215,233,.72); font-size: 10px; letter-spacing: .18em; white-space: nowrap; }
.separator { color: var(--blue); padding: 0 6px; }
.hero {
    width: min(820px, calc(100% - 36px));
    margin: auto;
    padding: 40px 0 66px;
    text-align: center;
    animation: rise .9s .1s ease-out both;
}
.eyebrow {
    display: flex; justify-content: center; align-items: center; gap: 14px;
    margin: 0 0 2px; color: #c5d4e9;
    font: 500 11px/1.5 'Cinzel', serif; letter-spacing: .32em;
}
.eyebrow span, .server span { width: 44px; height: 1px; background: linear-gradient(90deg, transparent, rgba(150,190,232,.85)); }
.eyebrow span:last-child, .server span:last-child { transform: rotate(180deg); }
.crest { width: min(310px, 70%); height: 65px; margin: 0 auto -13px; opacity: .85; }
.crest svg { width: 100%; height: 100%; overflow: visible; }
.crest path:first-child { fill: rgba(4,8,15,.25); stroke: #a9c3e3; stroke-width: 1.1; }
.crest .crest-line { fill: none; stroke: #b8d8ff; stroke-width: 1.2; }
h1 {
    margin: 0;
    font: 600 clamp(44px, 8.6vw, 90px)/1.1 'Cinzel', serif;
    letter-spacing: .045em;
    color: #f3f6fc;
    text-shadow: 0 3px 28px rgba(0,0,0,.7), 0 0 34px rgba(104,168,235,.16);
}
.server {
    display: flex; align-items: center; justify-content: center; gap: 15px;
    margin: 22px 0 0;
    font: 500 clamp(17px, 2.5vw, 23px)/1.4 'Cinzel', serif;
    letter-spacing: .34em; text-indent: .34em;
    color: #d7e8ff;
}
.server span { width: 64px; }
.invitation {
    margin: 32px auto 29px;
    max-width: 570px;
    color: #e1e8f2;
    font-size: clamp(14px, 1.7vw, 17px);
    line-height: 1.9;
    text-shadow: 0 2px 12px #000;
}
.discord-button {
    position: relative;
    min-height: 66px;
    width: min(390px, 100%);
    margin: 0 auto;
    padding: 17px 24px;
    display: flex; align-items: center; justify-content: center; gap: 15px;
    border: 1px solid rgba(153,199,248,.85);
    outline: 1px solid rgba(153,199,248,.16);
    outline-offset: 5px;
    background: linear-gradient(110deg, rgba(7,17,32,.95), rgba(16,39,67,.9), rgba(7,17,32,.95));
    box-shadow: 0 0 28px rgba(45,133,231,.19), inset 0 0 22px rgba(76,151,232,.09);
    text-decoration: none;
    color: #f1f6ff;
    font: 600 14px 'Cinzel', serif;
    letter-spacing: .075em;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.discord-button::before, .discord-button::after {
    content: ''; position: absolute; width: 9px; height: 9px;
    border: 1px solid #9dceff; transform: rotate(45deg); background: #132d4a;
}
.discord-button::before { left: -5px; top: calc(50% - 5px); }
.discord-button::after { right: -5px; top: calc(50% - 5px); }
.discord-button:hover, .discord-button:focus-visible {
    transform: translateY(-3px);
    border-color: #d4eaff;
    box-shadow: 0 0 38px rgba(45,133,231,.34), inset 0 0 25px rgba(76,151,232,.14);
}
.discord-button:focus-visible { outline: 2px solid white; outline-offset: 8px; }
.discord-icon { width: 27px; height: 27px; flex: 0 0 auto; }
.button-arrow { color: #a9d4ff; font-size: 19px; margin-left: 4px; }
.link-caption { margin: 18px 0 0; color: rgba(194,211,232,.75); font-size: 11px; letter-spacing: .13em; }
.footer {
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto;
    padding: 20px 0 25px;
    display: flex; align-items: center; justify-content: center; gap: 13px;
    color: rgba(196,211,232,.6);
    font: 10px 'Cinzel', serif; letter-spacing: .22em;
}
.footer-dot { color: #73baff; font-size: 7px; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes reveal { from { opacity: .65; transform: scale(1.04); } to { opacity: 1; transform: scale(1.015); } }
@media (max-width: 600px) {
    .topline { width: calc(100% - 32px); padding: 20px 0; gap: 9px; font-size: 10px; }
    .topline-caption { font-size: 8px; letter-spacing: .1em; }
    .topline-rule { min-width: 8px; }
    .brand { gap: 6px; }
    .brand-name { font-size: 9px; }
    .hero { padding: 38px 0 46px; }
    .eyebrow { font-size: 9px; letter-spacing: .2em; gap: 8px; }
    .eyebrow span { width: 23px; }
    .crest { height: 52px; }
    .server { gap: 10px; margin-top: 17px; letter-spacing: .25em; text-indent: .25em; }
    .server span { width: 35px; }
    .invitation { margin: 27px auto 25px; line-height: 1.8; }
    .desktop-break { display: none; }
    .discord-button { min-height: 60px; padding: 15px 13px; gap: 10px; font-size: 12px; }
    .footer { width: calc(100% - 32px); padding-bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}