/* AstralWorld Studio. Original fonts, hero mark and interaction contracts retained. */
:root { --studio-edge: rgba(233,190,222,.4); --scroll-progress: 0; }
.header { border-bottom-color: rgba(217,190,220,.2); box-shadow: 0 10px 42px rgba(5,3,10,.2); }
.header::after { content: ''; position: absolute; inset: auto 0 -1px; height: 1px; background: linear-gradient(90deg,#785b7e,#e5b3cd,#f7e8f0); transform: scaleX(var(--scroll-progress)); transform-origin: left; pointer-events: none; }
/* Astral Seal button family. Every visible surface is a generated transparent
   raster asset; CSS only places the art, live label and interaction state. */
body .btn, body .nav-link, body .dl-mirror, body .wiki__menu-item {
    background: url('../img/astral-seal/utility-final.png') center / 100% 100% no-repeat;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: #fff0f7 !important;
    text-shadow: 0 2px 4px #08030a, 0 0 8px #08030a;
    animation: none;
    filter: saturate(1.4) brightness(1.12) drop-shadow(0 0 7px rgba(235,145,199,.25));
    transform: translateY(0);
    transition: filter .45s cubic-bezier(.22,1,.36,1), transform .45s cubic-bezier(.22,1,.36,1);
}
body .btn::before, body .btn::after, body .nav-link::before, body .nav-link::after,
body .dl-mirror::before, body .dl-mirror::after, body .wiki__menu-item::before, body .wiki__menu-item::after { content: none; }
body .btn:hover, body .nav-link:hover, body .dl-mirror:hover, body .wiki__menu-item:hover,
body .wiki__menu-item.active {
    background: url('../img/astral-seal/utility-final.png') center / 100% 100% no-repeat;
    border: 0;
    box-shadow: none;
    color: #fff !important;
    filter: saturate(1.5) brightness(1.24) drop-shadow(0 0 11px rgba(239,155,207,.42));
    transform: translateY(-2px);
}
body .btn:active, body .nav-link:active, body .dl-mirror:active { transform: translateY(0); }
body .btn { min-height: 72px; padding: 24px 35px; justify-content: center; text-align: center; }
body .btn--small { min-width: 154px; min-height: 64px; padding: 21px 29px; }
.hero__cta .btn { min-width: 245px; }
.hero__cta .btn--primary {
    min-width: 305px;
    min-height: 112px;
    padding: 35px 58px;
    background-image: url('../img/astral-seal/nav-final.png');
    font-size: .94rem;
}
.hero__cta .btn--primary:hover { background-image: url('../img/astral-seal/nav-final.png'); }
.header__nav { gap: 4px; }
.header__nav .nav-link {
    min-width: 168px;
    min-height: 70px;
    padding: 22px 28px;
    background-image: url('../img/astral-seal/nav-final.png');
    font-size: .68rem;
    line-height: 1.25;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}
.header__nav .nav-link:hover { background-image: url('../img/astral-seal/nav-final.png'); }
.header__nav .nav-link--cabinet { margin-left: 0; }
body .dl-mirror { min-height: 56px; padding: 18px 20px; }
body .wiki__menu-item {
    box-sizing: border-box;
    height: 54px;
    min-height: 54px;
    padding: 9px 34px;
    margin-block: -1px;
}
body .wiki__menu-item.active { transform: none; }
.comm-card .btn {
    position: relative;
    min-width: 230px;
    min-height: 88px;
    padding: 28px 34px;
    background-image: url('../img/astral-seal/utility-final.png');
}
.comm-card .btn:hover { background-image: url('../img/astral-seal/utility-final.png'); }
.comm-card .btn::before {
    content: none;
}
.side-socials__btn img {
    width: 74px;
    height: 74px;
    object-fit: contain;
    filter: saturate(.8) brightness(1.15) drop-shadow(0 0 10px rgba(235,155,204,.35));
}
body .side-socials__btn {
    width: 84px;
    height: 84px;
    filter: none;
    transform: translateY(0) scale(1);
    transition: transform .35s cubic-bezier(.22,1,.36,1);
}
body .side-socials__btn:hover, body .side-socials__btn:focus-visible {
    filter: none;
}
body .side-socials__btn:hover { transform: translate(-3px,-3px) scale(1.1); }
body .side-socials__btn:active { transform: scale(.97); transition-duration: .12s; }
body .side-socials__btn:focus-visible { outline: 2px solid #ecc5df; outline-offset: 2px; border-radius: 18px; }
@media (max-width: 768px) {
    body .side-socials__btn { width: 62px; height: 62px; }
}
@media (prefers-reduced-motion: reduce) {
    body .side-socials__btn { transition: transform .18s ease-out; }
    body .side-socials__btn:hover { transform: scale(1.04); }
    body .side-socials__btn:active { transform: scale(.98); }
}
.wiki__menu-sub { color: #cfc0d3; }
/* The opening artwork keeps its logo and original composition. */
.hero { --scene-progress: 0; --scene-x: 0; --scene-y: 0; }
.hero__bg { transform: translate3d(0,calc(var(--scene-progress) * 22px),0) scale(calc(1.015 + var(--scene-progress) * .025)); transform-origin: center; filter: brightness(1.08) contrast(1.035); }
.hero__particles span { box-shadow: 0 0 6px rgba(232,178,210,.7),0 0 16px rgba(196,91,138,.3); }
.hero__date, .hero__obt { box-shadow: inset 0 1px 0 rgba(232,199,225,.07),0 4px 20px rgba(4,2,8,.15); }
.hero__divider-line { background: linear-gradient(90deg,transparent,#d6aac5,transparent); }
.countdown__item { border-color: rgba(210,166,198,.34); box-shadow: inset 0 1px 0 rgba(246,217,239,.07),0 5px 25px rgba(7,3,12,.35); }
@media (min-width: 1100px) {
    .hero { min-height: max(850px,100dvh); justify-content: flex-start; }
    .hero__content { width: 40%; padding: 250px 18px 90px 1vw; }
    .hero__info-panel { margin-left: 0; margin-right: auto; }
    .hero__title-sub-text { font-size: 17px; letter-spacing: .2em; }
    .hero__cta { flex-wrap: wrap; }
}
/* Fully illustrated world, without repeating the opening logo or character. */
.features, .steps, .community { position: relative; isolation: isolate; background-color: #140e18; }
.features { padding-top: 115px; padding-bottom: 120px; background-image: linear-gradient(180deg,#140e18 0%,rgba(20,14,24,.13) 19%,rgba(20,14,24,.2) 74%,#140e18 100%),url('../img/studio-forest.png'); background-size: cover; background-position: center; }
.steps { padding-block: 120px; background-image: linear-gradient(180deg,#140e18 0%,rgba(20,14,24,.08) 22%,rgba(20,14,24,.25) 77%,#140e18 100%),url('../img/studio-sanctuary.png'); background-size: cover; background-position: center 35%; }
.community { padding-block: 115px; background-image: linear-gradient(180deg,#140e18 0%,rgba(20,14,24,.1) 20%,rgba(20,14,24,.22) 70%,#140e18 100%),url('../img/studio-sanctuary.png'); background-size: cover; background-position: center 85%; }
.features::before, .features::after, .steps::before, .steps::after, .community::before, .community::after { content: none; }
.section-title { text-shadow: 0 3px 20px #100812; }
.section-title::after { width: 90px; height: 1px; background: linear-gradient(90deg,transparent,#edc5dc,transparent); }
.section-subtitle, .features__counter { text-shadow: 0 2px 6px #0b0411,0 0 15px #0b0411; color: #e0cfdf; }
/* Preserve the existing rotateY flip: no opacity, visibility or flat transform
   overrides on either face, and no filter/overflow on its 3D parent. */
.flip-card {
    --card-x: 50%; --card-y: 50%; --atlas-x: 0%; --atlas-y: 0%;
    height: auto;
    aspect-ratio: 1;
}
.flip-card__inner { transition: transform .6s cubic-bezier(.4,0,.2,1); }
.flip-card__back { overflow-y: auto; }
@media (max-width: 768px) {
    .features__grid { grid-template-columns: minmax(0, 1fr); }
}
.flip-card:nth-child(2) { --atlas-x: 33.333333%; }
.flip-card:nth-child(3) { --atlas-x: 66.666667%; }
.flip-card:nth-child(4) { --atlas-x: 100%; }
.flip-card:nth-child(5) { --atlas-y: 100%; }
.flip-card:nth-child(6) { --atlas-x: 33.333333%; --atlas-y: 100%; }
.flip-card:nth-child(7) { --atlas-x: 100%; --atlas-y: 100%; }
.flip-card:nth-child(8) { --atlas-x: 66.666667%; --atlas-y: 100%; }
.flip-card__front { background: url('../img/studio-card-atlas.png') var(--atlas-x) var(--atlas-y) / 400% 200% no-repeat; border: 1px solid rgba(226,191,218,.6); box-shadow: inset 0 0 0 4px rgba(12,5,18,.45),0 10px 25px rgba(5,2,8,.3); }
.flip-card__front i { display: none; }
.flip-card__front::before { content: ''; position: absolute; inset: 7px; width: auto; height: auto; border: 1px solid rgba(231,198,224,.4); border-radius: 9px; background: none; transform: none; pointer-events: none; }
.flip-card__front::after { content: ''; position: absolute; inset: 0; width: auto; height: auto; border: 0; background: radial-gradient(180px circle at var(--card-x) var(--card-y),rgba(244,193,224,.17),transparent 80%); opacity: 1; transform: none; pointer-events: none; }
.flip-card:hover .flip-card__front::before, .flip-card:hover .flip-card__front::after {
    width: auto;
    height: auto;
    transform: none;
    opacity: 1;
}
.flip-card:hover .flip-card__front { border-color: #f5cde2; box-shadow: inset 0 0 0 4px rgba(12,5,18,.35),0 0 25px rgba(216,145,189,.2); }
.flip-card__back {
    background-image: linear-gradient(180deg,rgba(18,12,23,.66),rgba(18,12,23,.92) 35%,rgba(18,12,23,.92) 75%,rgba(18,12,23,.74)),url('../img/studio-card-atlas.png');
    background-size: 100% 100%,400% 200%;
    background-position: center,var(--atlas-x) var(--atlas-y);
    background-repeat: no-repeat;
    border: 1px solid rgba(230,201,223,.64);
    box-shadow: inset 0 0 0 4px rgba(239,205,229,.06),inset 0 0 28px rgba(221,141,191,.12),0 10px 25px rgba(5,2,8,.3);
    text-shadow: 0 2px 5px #0e0912;
}
.flip-card__back p { color: #e0d2e0; }
/* Four illustrated milestones retain their icons and live HTML labels. */
.step-card {
    padding-top: 0;
    background: linear-gradient(180deg,rgba(18,12,23,.4),rgba(18,12,23,.91) 48%,rgba(18,12,23,.87) 78%,rgba(18,12,23,.55)),url('../img/world-journey.png') center bottom / cover;
    border-color: rgba(231,202,223,.48);
    box-shadow: inset 0 0 0 4px rgba(239,205,229,.035),inset 0 -20px 40px rgba(209,133,180,.08),0 10px 35px rgba(5,2,8,.3);
    text-shadow: 0 2px 5px #0e0912;
}
.step-card::before { content: ''; position: relative; inset: auto; width: calc(100% + 50px); height: auto; aspect-ratio: 1; flex: 0 0 auto; margin: 0 -25px -20px; background-image: url('../img/studio-steps-atlas.png'); background-size: 200% 200%; background-position: 0% 0%; transform: scale(1); transition: transform .5s ease, filter .5s ease; mask-image: linear-gradient(#000 65%,transparent); pointer-events: none; }
.step-card:nth-of-type(3)::before { background-position: 100% 0%; }
.step-card:nth-of-type(5)::before { background-position: 0% 100%; }
.step-card:nth-of-type(7)::before { background-position: 100% 100%; }
.step-card:hover::before { transform: scale(1.025); filter: brightness(1.1); }
.step-card::after { pointer-events: none; }
/* Keep the scroll entrance from overriding subsequent hover movement. */
.step-card.animate-on-scroll, .comm-card.animate-on-scroll, .news-card.animate-on-scroll {
    transition: opacity .6s ease, transform .4s ease, border-color .4s ease, box-shadow .4s ease;
}
/* Keep the hover boundary stationary; artwork inside still animates. */
.step-card:hover, .comm-card:hover,
.step-card.animate-on-scroll.visible:hover,
.comm-card.animate-on-scroll.visible:hover { transform: translateY(0); }
.news-card.animate-on-scroll.visible:hover { transform: translateY(-4px); }
.step-card__icon { background: rgba(35,22,42,.88); border-color: rgba(227,184,216,.5); box-shadow: 0 0 25px rgba(225,143,192,.15); margin-bottom: 16px; }
.step-card:hover .btn--small, .step-card .btn:hover { box-shadow: none; }
.step-card .btn { max-width: 100%; font-size: .7rem; padding-inline: 25px; }
.step-card p, .comm-card p { color: #d1bed3; }
.comm-card {
    background-image: linear-gradient(180deg,rgba(19,12,25,.3),rgba(19,12,25,.84) 43%,rgba(19,12,25,.93) 70%,rgba(19,12,25,.72)),url('../img/world-community.png');
    background-size: cover;
    background-position: center,12% center;
    border-color: rgba(228,185,216,.43);
    box-shadow: inset 0 0 0 4px rgba(244,210,233,.045),0 15px 40px rgba(4,2,8,.3);
    text-shadow: 0 2px 6px #100a17;
}
.comm-card:nth-child(2) { background-position: center,42% center; }
.comm-card__icon { filter: drop-shadow(0 0 18px rgba(214,145,195,.3)); }
.news { background: radial-gradient(ellipse at top,rgba(91,48,82,.22),transparent 65%),var(--bg-secondary); }
.news-empty, .news-card { background: linear-gradient(145deg,#281b30,#18101f); border-color: rgba(218,174,208,.32); box-shadow: inset 0 1px 0 rgba(244,210,233,.07),0 8px 30px rgba(5,2,8,.2); }
.footer { border-top: 1px solid rgba(212,178,210,.2); }
/* Keep the backdrop outside opacity animations so it can sample the page immediately. */
.dl-modal { opacity: 1; transition: none; }
.dl-modal:not([hidden]) { visibility: visible; }
.dl-modal__dialog {
    opacity: 0;
    transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .3s ease;
    border-color: rgba(219,179,209,.45); background: radial-gradient(ellipse at 10% 0%,rgba(133,72,124,.2),transparent 55%),linear-gradient(145deg,#211827,#140f1c);
}
.dl-modal.open .dl-modal__dialog { opacity: 1; }
.dl-row { border-color: rgba(212,178,210,.2); }
.wiki__sidebar { border-right-color: rgba(213,176,209,.25); background: linear-gradient(rgba(20,13,27,.9),rgba(20,13,27,.96)),url('../img/studio-forest.png') center / cover; }
.wiki__block { background: radial-gradient(ellipse at 100% 0%,rgba(129,73,119,.14),transparent 55%),var(--bg-card); border-color: rgba(210,176,207,.28); box-shadow: inset 0 1px 0 rgba(237,215,233,.05),0 6px 24px rgba(5,2,8,.15); }
.wiki__block-header { border-bottom-color: rgba(207,165,200,.25); }
.wiki__guide-spoiler > summary { background: linear-gradient(110deg,rgba(139,94,133,.12),transparent); }
.wiki__guide-spoiler > summary:hover { background-color: rgba(196,91,138,.08); }
.legal h1 { text-shadow: 0 3px 24px rgba(207,123,176,.18); }
.legal h2 { border-left: 2px solid rgba(210,157,192,.5); padding-left: 14px; }
.legal__updated { border-bottom: 1px solid rgba(205,170,205,.2); padding-bottom: 20px; }
.legal a { text-decoration-color: rgba(223,182,211,.4); text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .studio-ready .hero__bg { transform: translate3d(calc(var(--scene-x) * 5px),calc(var(--scene-progress) * 22px + var(--scene-y) * 4px),0) scale(calc(1.015 + var(--scene-progress) * .025)); transition: transform .22s ease-out; }
}
@media (max-width: 1279px) {
    .header__nav.open .nav-link { max-width: 340px; min-height: 70px; align-self: center; justify-content: center; }
    .header__nav.open .lang-switch { align-self: center; }
}
@media (max-width: 768px) {
    .hero__bg { transform: none; }
    .features, .steps, .community { padding-block: 80px; background-position: center; }
    .hero__cta .btn { min-width: 0; max-width: 100%; }
    .dl-row__mirrors { gap: 5px; }
    body .dl-mirror { padding-inline: 17px; font-size: .7rem; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    .hero__bg, .studio-ready .hero__bg { transform: none !important; transition: none !important; }
    .hero__particles span { animation: none !important; }
    /* User explicitly requested the original card reveal transition. */
    .flip-card__inner { transition-duration: .6s !important; }
    body .btn, body .nav-link, body .dl-mirror, body .wiki__menu-item {
        transition-property: filter;
        transition-duration: .25s !important;
    }
    body .btn:hover, body .nav-link:hover, body .dl-mirror:hover, body .wiki__menu-item:hover {
        transform: none;
    }
}

/* The HTML title remains translated and visible before the card is opened. */
.flip-card__front { justify-content: flex-end; padding: 24px 18px; }
.flip-card__front::after {
    background: linear-gradient(180deg, transparent 32%, rgba(12,5,18,.35) 57%, rgba(12,5,18,.93) 100%), radial-gradient(180px circle at var(--card-x) var(--card-y),rgba(244,193,224,.17),transparent 80%);
}
.studio-card-title {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    text-align: center;
    font-family: var(--font-main);
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .025em;
    color: #f6e8f2;
    text-shadow: 0 2px 8px #0c0512;
}
.step-card__icon { display: none; }
.comm-card__icon { width: 96px; height: 96px; margin: 0 auto 20px; background: url('../img/astral-seal/telegram-square-pink.png') center / contain no-repeat; }
.comm-card:nth-child(2) .comm-card__icon { background-image: url('../img/astral-seal/discord-square-pink-preview.png'); filter: drop-shadow(0 0 18px rgba(214,145,195,.3)); }
/* Clip the generated canvas to the silver silhouette, keeping its dark interior. */
.comm-card__icon, .side-socials__btn img {
    clip-path: polygon(50% 4%, 54% 8%, 78% 8%, 85% 10%, 90% 15%, 93% 23%, 93% 77%, 91% 84%, 87% 89%, 80% 92%, 20% 92%, 13% 89%, 9% 84%, 7% 77%, 7% 23%, 10% 15%, 15% 10%, 22% 8%, 46% 8%);
}
body .side-socials__btn img { width: 100%; height: 100%; filter: none; opacity: 1; }
.comm-card__icon i, .comm-card:hover .comm-card__icon i { display: none; }
.comm-card:hover .comm-card__icon { animation: iconBounce .6s ease; }
.page-legal {
    background: linear-gradient(90deg,rgba(20,14,24,.88),rgba(20,14,24,.76)),url('../img/studio-sanctuary.png') center top / cover fixed;
}
.news {
    background: linear-gradient(180deg,#140e18,rgba(20,14,24,.58) 40%,#140e18),url('../img/studio-forest.png') center 65% / cover;
}
body .wiki__menu-item, body .wiki__menu-item:hover, body .wiki__menu-item.active {
    box-sizing: border-box;
    flex: 0 0 60px;
    height: 60px;
    min-height: 60px;
    padding: 10px 44px;
    margin: 0;
    justify-content: center;
    text-align: center;
    background-size: 100% 80px;
}
body .wiki__menu-item > i,
body .wiki__menu-item:hover > i,
body .wiki__menu-item.active > i {
    display: flex;
    position: absolute;
    left: 22px;
    top: 50%;
    z-index: 2;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    color: #fff0f7;
    background: transparent;
    box-shadow: none;
    animation: none;
    font-size: 18px;
}
.wiki__menu-item > div { min-width: 0; width: 100%; }
.wiki__menu-title { font-size: 11px; line-height: 1.25; letter-spacing: 0; text-wrap: balance; }
.wiki__menu-sub { display: none; }
.wiki__menu { gap: 0; padding: 5px 10px; }
body .wiki__menu-item.active,
body .wiki__menu-item.active:hover {
    filter: saturate(1.65) brightness(1.5) drop-shadow(0 0 5px rgba(255,163,217,.85)) drop-shadow(0 0 10px rgba(235,100,181,.5));
    transform: none;
}
body .wiki__menu-item.active .wiki__menu-title {
    color: #fff;
    text-shadow: 0 1px 3px #180915, 0 0 8px rgba(255,196,231,.75);
}
@media (min-width: 769px) and (prefers-reduced-motion: no-preference) {
    .features, .steps, .community { background-position: center calc(50% + var(--chapter-progress, 0) * 32px); }
}

/* Connected AstralWorld scenes: short seams, shared edge color. */
.hero::after { height: 64px; background: linear-gradient(180deg,transparent,#140e18); }
.features, .steps, .community, .news {
    --world-scene: url('../img/world-wiki-v2.png');
    padding-block: 64px;
    background-color: #140e18;
    background-image: linear-gradient(180deg,#140e18 0,rgba(20,14,24,.3) 64px,rgba(20,14,24,.3) calc(100% - 64px),#140e18 100%),var(--world-scene);
    background-size: cover;
    background-position: center;
}
.steps { --world-scene: url('../img/world-journey.png'); }
.features { --world-scene: url('../img/world-features-v4.png'); }
.community { --world-scene: url('../img/world-community-v5.png'); }
.news { --world-scene: url('../img/studio-forest.png'); }
.wiki__content {
    background: linear-gradient(180deg,rgba(20,14,24,.8),rgba(20,14,24,.93)),url('../img/world-wiki-v2.png') center / cover no-repeat fixed;
    background-attachment: fixed;
}
.page-legal {
    background-image: linear-gradient(90deg,rgba(20,14,24,.88),rgba(20,14,24,.8)),url('../img/world-journey.png');
}
@media(max-width:768px) {
    .features, .steps, .community, .news { padding-block: 44px; }
    .hero::after { height: 44px; }
}

.installation-guide { width: min(620px, calc(100% - 32px)); max-height: calc(100dvh - 40px); margin: auto; padding: 32px; overflow-y: auto; color: #f5eaf3; border: 1px solid #a183a0; border-radius: 18px; background: linear-gradient(145deg,rgba(35,23,43,.96),rgba(17,12,24,.98)),url('../img/world-journey.png') center / cover; box-shadow: 0 24px 80px #08050c; }
.installation-guide::backdrop { background: rgba(8,4,12,.8); backdrop-filter: blur(5px); }
.installation-guide h2 { padding-right: 30px; margin-bottom: 22px; font-size: 1.5rem; }
.installation-guide ol { padding-left: 24px; }
.installation-guide li { padding: 0 0 18px 8px; }
.installation-guide li::marker { color: #efaed1; font-weight: 700; }
.installation-guide h3 { font-size: 1rem; margin-bottom: 6px; }
.installation-guide p { color: #d7c8d7; font-size: .9rem; line-height: 1.65; }
.installation-guide__recommended h3 { color: #ffc4e2; }
.installation-guide__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.installation-guide__actions .btn { font-size: .75rem; }
@media(max-width: 480px) { .installation-guide { padding: 26px 18px; } }

/* A quiet surface under the launch information, independent of hero artwork. */
.hero__launch-panel {
    position: relative;
    width: min(100%, 490px);
    padding: 26px 24px 24px;
    margin: 0 auto 24px;
    border: 1px solid rgba(228,208,227,.55);
    border-radius: 18px;
    background: radial-gradient(ellipse at 50% 0%,rgba(160,89,130,.17),transparent 65%),linear-gradient(145deg,rgba(27,19,34,.95),rgba(13,10,20,.94));
    box-shadow: inset 0 0 0 4px rgba(232,202,222,.035),inset 0 1px 0 rgba(255,240,249,.16),0 16px 42px rgba(7,3,12,.4),0 0 22px rgba(226,145,190,.08);
}
.hero__launch-panel::before { content: ''; position: absolute; top: -1px; left: 20%; right: 20%; height: 1px; background: linear-gradient(90deg,transparent,#ffe1ef,transparent); }
.hero__launch-panel .hero__dates { margin-bottom: 22px; gap: 12px; }
.hero__launch-panel .hero__date { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.hero__launch-panel .hero__date span { color: #eee5ee; font-size: 1.08rem; text-shadow: none; }
.hero__launch-panel .hero__date strong { color: #fff1f8; }
.hero__launch-panel .hero__date i { color: #efbed6; }
.hero__launch-panel .hero__obt { padding: 0; background: none; border: 0; box-shadow: none; }
.hero__launch-panel .hero__obt span:last-child { color: #d4c6d5; font-size: .85rem; }
.hero__launch-panel .hero__obt strong { color: #e5d5e3; }
.hero__launch-panel .hero__obt-badge { box-shadow: none; background: #dcc9da; }
.hero__launch-panel .hero__countdown { margin: 0; gap: 10px; justify-content: center; flex-wrap: nowrap; }
.hero__launch-panel .countdown__sep {
    position: relative;
    display: block;
    align-self: stretch;
    flex: 0 0 10px;
    width: 10px;
    font-size: 0;
    opacity: .72;
    animation: none;
}
.hero__launch-panel .countdown__sep::before {
    content: '';
    position: absolute;
    top: 28%;
    bottom: 25%;
    left: 50%;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(236,195,220,.42), transparent);
}
.hero__launch-panel .countdown__sep::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 47%;
    width: 6px;
    height: 6px;
    border: 1px solid rgba(255,211,236,.72);
    background: rgba(206,92,161,.62);
    box-shadow: 0 0 7px rgba(239,132,195,.52);
    transform: translate(-50%,-50%) rotate(45deg);
}
.hero__launch-panel .countdown__item { min-width: 0; flex: 1; padding: 12px 5px 10px; background: #17121f; backdrop-filter: none; border-color: rgba(214,183,209,.3); box-shadow: inset 0 1px 0 rgba(250,223,244,.07); }
.hero__launch-panel .countdown__label { color: #d7c6d8; letter-spacing: 1.4px; }
.hero__title-sub-text { text-shadow: 0 2px 5px #100b17,0 0 18px #100b17; }
@media(max-width:480px) {
    .hero__launch-panel { padding: 22px 12px 18px; }
    .hero__launch-panel .hero__date { gap: 8px; }
    .hero__launch-panel .hero__date span { font-size: .9rem; }
    .hero__launch-panel .hero__countdown { gap: 6px; }
    .hero__launch-panel .countdown__label { font-size: .56rem; letter-spacing: .8px; }
}
.hero__title-sub-text { color: #f5edf4; -webkit-text-fill-color: #f5edf4; background: none; }

/* Selected illustrated launch set: live dates and flip digits over raster frames. */
.hero__launch-panel { padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; }
.hero__launch-panel::before { content: none; }
.hero__launch-panel .hero__dates { min-height: 154px; padding: 43px 38px 35px; gap: 9px; margin-bottom: 4px; background: url('../img/astral-seal/utility-final.png') center / 100% 100% no-repeat; text-align: center; justify-content: center; }
.hero__launch-panel .hero__date { justify-content: center; }
.hero__launch-panel .hero__date i { display: none; }
.hero__launch-panel .hero__date span { font-size: 1rem; text-shadow: 0 2px 4px #100914; }
.hero__launch-panel .hero__obt-badge { background: none; color: #f4dfec; padding: 0; min-width: auto; border-radius: 0; }
.hero__launch-panel .hero__obt { gap: 8px; }
.hero__launch-panel .hero__obt span:last-child { font-size: .8rem; text-shadow: 0 2px 4px #100914; }
.hero__launch-panel .countdown__item { aspect-ratio: 1; justify-content: center; gap: 0; padding: 14px 2px 10px; background: url('../img/astral-seal/timer-tile.png') center / 100% 100% no-repeat; border: 0; box-shadow: none; }
.hero__launch-panel .countdown__item:hover { filter: brightness(1.12); box-shadow: none; }
.hero__launch-panel .countdown__item { transition: filter .35s ease; }
.hero__launch-panel .countdown__digit {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: none;
    text-shadow: 0 2px 4px rgba(12, 5, 18, .6);
    backface-visibility: hidden;
}
.hero__launch-panel .countdown__label { color: #f3e5f0; font-weight: 700; letter-spacing: .5px; font-size: .6rem; text-shadow: 0 2px 4px #100914; }
@media(max-width:480px) {
 .hero__launch-panel .hero__dates { min-height: 142px; padding: 38px 30px 32px; }
 .hero__launch-panel .hero__date span { font-size: .86rem; }
 .hero__launch-panel .hero__obt span:last-child { font-size: .72rem; }
 .hero__launch-panel .flip-unit { width: 46px; height: 48px; font-size: 1.8rem; }
 .hero__launch-panel .countdown__label { font-size: .5rem; }
}

/* Understated hero eyebrow: readable lettering without the block display face. */
.hero__title-sub { gap: 14px; }
.hero__title-sub-text {
    font-family: var(--font-main);
    font-size: clamp(10px, 1.05vw, 13px);
    font-weight: 500;
    letter-spacing: .24em;
    line-height: 1.6;
    color: #eee3ed;
    -webkit-text-fill-color: #eee3ed;
    background: none;
    filter: none;
    animation: none;
    text-shadow: 0 2px 5px #100914, 0 0 12px rgba(16,9,20,.8);
}
.hero__title-sub-flank { width: clamp(16px, 3vw, 38px); opacity: .55; }
.hero__divider-diamond { width: 5px; height: 5px; background: #d9b2ca; }
.hero__divider { gap: 10px; opacity: .7; }
@media(max-width:480px) {
    .hero__title-sub { gap: 8px; }
    .hero__title-sub-text { letter-spacing: .14em; font-size: 10px; }
}

/* Prominent two-line silver title above the launch plaque. */
.hero__title-sub-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    font-weight: 800;
    white-space: normal;
    line-height: 1.15;
    text-shadow: 0 2px 2px #170e1e, 0 4px 14px #170e1e;
}
.hero__eyebrow-main {
    display: block;
    font-size: clamp(21px, 2vw, 30px);
    letter-spacing: .06em;
    color: #f7edf5;
    -webkit-text-fill-color: #f7edf5;
    filter: drop-shadow(0 0 9px rgba(237,157,204,.25));
}
.hero__eyebrow-sub {
    display: block;
    font-size: clamp(12px, 1.1vw, 15px);
    font-weight: 600;
    letter-spacing: .48em;
    padding-left: .48em;
    color: #eac1db;
    -webkit-text-fill-color: #eac1db;
}
.hero__title-sub-flank { flex: 1 1 20px; max-width: 35px; min-width: 10px; }
@media(max-width:480px) {
    .hero__eyebrow-main { font-size: clamp(18px, 5vw, 24px); letter-spacing: .035em; }
}
.hero__eyebrow-main { white-space: nowrap; }
.hero__title-sub-text { flex-shrink: 0; }

/* Keep layout width and hero position stable while the intro fades away. */
html { scrollbar-gutter: stable; }
html.intro-pending .hero__content, html.intro-playing .hero__content,
html.intro-done .hero__content, .hero__content {
    animation: none;
    transform: none;
    opacity: 1;
}
.hero__launch-panel .hero__date, .hero__launch-panel .hero__obt,
.hero__launch-panel .hero__countdown, .hero__cta { animation: none; }

/* Soft glass surface sized to the hero information. */
.hero__content::before { content: none; }
.hero__info-panel {
    width: min(100%, 550px);
    padding: 20px 24px 16px;
    margin-inline: auto;
    border: 1px solid rgba(226, 199, 220, .18);
    border-radius: 26px;
    background:
        radial-gradient(ellipse at 50% 8%, rgba(198, 119, 166, .11), transparent 48%),
        linear-gradient(145deg, rgba(18, 11, 25, .43), rgba(12, 8, 18, .25));
    box-shadow:
        inset 0 1px 0 rgba(255, 239, 249, .07),
        inset 0 0 55px rgba(183, 101, 151, .035),
        0 18px 55px rgba(5, 2, 9, .16);
    backdrop-filter: blur(4px) saturate(1.04);
    -webkit-backdrop-filter: blur(4px) saturate(1.04);
    transform: translateZ(0);
    will-change: backdrop-filter;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
@media (max-width: 600px) {
    .hero__info-panel { width: calc(100% - 12px); padding: 16px 10px 12px; border-radius: 20px; }
    .hero__launch-panel .countdown__sep { flex-basis: 4px; width: 4px; }
    .hero__launch-panel .countdown__sep::before { display: none; }
    .hero__launch-panel .countdown__sep::after { width: 4px; height: 4px; }
}
.server-badge { display: block; width: min(380px, 88vw); height: auto; max-width: 100%; }
.server-status { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 6px; font: 600 12px var(--font-main); letter-spacing: .08em; color: #e6ede6; text-shadow: 0 2px 5px #0e0912; }
.server-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #78d99b; box-shadow: 0 0 8px rgba(94,213,140,.5); }

/* Compact server identity, separate from the project heading. */
.hero__server-mark { display: flex; flex-direction: column; align-items: center; gap: 3px; margin: 14px 0 8px; }
.hero__server-mark .server-badge { width: 76px; height: 38px; object-fit: contain; }
.hero__server-name { font-family: var(--font-main); font-size: 11px; font-weight: 600; letter-spacing: .03em; color: #f4e9f2; text-shadow: 0 2px 5px #0d0712; }
.hero__server-mark .server-status { margin-top: 1px; font-size: 9px; letter-spacing: .08em; color: #9bddaa; }
.hero__server-mark .server-status::before { width: 5px; height: 5px; }
.hero__server-mark .server-badge { width: 68px; height: 68px; }
.hero__server-name { font-size: 13px; text-transform: uppercase; }
.hero__server-mark .server-status { padding: 5px 12px; background: rgba(16,11,23,.8); border-radius: 4px; }
.hero__server-mark .server-status {
    color: #baffc9;
    background: linear-gradient(180deg, rgba(9, 43, 23, .94), rgba(5, 25, 14, .94));
    border: 1px solid rgba(86, 255, 143, .58);
    box-shadow: inset 0 1px 0 rgba(185, 255, 207, .12), inset 0 0 10px rgba(56, 255, 120, .1), 0 0 13px rgba(43, 255, 107, .24);
    text-shadow: 0 0 8px rgba(92, 255, 143, .62);
}
.hero__server-mark .server-status::before {
    width: 6px;
    height: 6px;
    background: #35ff76;
    box-shadow: 0 0 5px #35ff76, 0 0 12px rgba(53,255,118,.9);
}
@media (prefers-reduced-motion: no-preference) {
    .hero__server-mark .server-status { animation: onlineStatusGlow 2.4s ease-in-out infinite; }
    .hero__server-mark .server-status::before { animation: onlineDotPulse 1.7s ease-out infinite; }
}
@keyframes onlineStatusGlow {
    0%, 100% { box-shadow: inset 0 1px 0 rgba(185,255,207,.12), inset 0 0 10px rgba(56,255,120,.1), 0 0 10px rgba(43,255,107,.2); }
    50% { box-shadow: inset 0 1px 0 rgba(205,255,221,.18), inset 0 0 13px rgba(56,255,120,.16), 0 0 18px rgba(43,255,107,.4); }
}
@keyframes onlineDotPulse {
    0%, 100% { transform: scale(.9); opacity: .85; }
    45% { transform: scale(1.28); opacity: 1; }
}
.hero__info-panel .hero__cta { width: 100%; justify-content: center; }

/* Illustrated archive for the live download interface. */
.dl-modal__dialog {
    background-image:
        linear-gradient(180deg, rgba(13,9,18,.28), rgba(13,9,18,.68) 25%, rgba(13,9,18,.82) 100%),
        url('../img/download-modal-bg-v3.png');
    background-position: center, center top;
    background-size: cover, cover;
    background-repeat: no-repeat;
    border-color: rgba(225,202,222,.62);
    box-shadow: inset 0 0 0 3px rgba(244,215,235,.035), 0 25px 90px rgba(4,2,8,.72), 0 0 30px rgba(224,134,191,.12);
}
.dl-modal__head { padding-top: 18px; text-shadow: 0 2px 8px #08040c; }
.dl-modal__head-icon {
    background: rgba(35,20,42,.76);
    border-color: rgba(237,153,204,.46);
    box-shadow: 0 0 22px rgba(229,132,191,.2);
}
.dl-row, .dl-row:hover {
    background-image:
        radial-gradient(ellipse at 88% 0%, rgba(226,133,188,.13), transparent 52%),
        linear-gradient(100deg, rgba(11,8,17,.76) 0%, rgba(17,11,22,.54) 52%, rgba(8,6,13,.66) 100%),
        url('../img/download-modal-bg-v3.png');
    background-size: 100% 100%, 100% 100%, cover;
    background-position: center, center, center 30%;
    border-color: rgba(235,213,230,.5);
    box-shadow:
        inset 0 1px 0 rgba(255,235,248,.09),
        inset 0 -18px 35px rgba(5,3,10,.2),
        0 8px 22px rgba(4,2,8,.24);
    backdrop-filter: blur(1.5px) saturate(1.12);
    transition: border-color .25s ease, box-shadow .25s ease;
}
.dl-row:hover {
    border-color: rgba(239,207,229,.58);
    box-shadow: inset 0 1px 0 rgba(255,235,248,.09),
        inset 0 -18px 35px rgba(5,3,10,.2), 0 0 18px rgba(229,132,191,.16);
}
.dl-row:nth-child(2) { background-position: center, center, center 58%; }
.dl-row:nth-child(3) { background-position: center, center, center 84%; }
.dl-row__name { text-shadow: 0 2px 5px rgba(5,2,8,.85); }
.dl-row__info { padding: 7px 10px; border-radius: 12px; background: linear-gradient(90deg, rgba(8,5,12,.5), transparent); }
.dl-row__icon { color: #f4deec; background: rgba(24,14,30,.76); border: 1px solid rgba(229,196,220,.38); box-shadow: inset 0 1px 0 rgba(255,240,249,.09), 0 0 14px rgba(220,132,185,.11); }

/* Consistent illuminated seam between the main chapters. */
.features,
.steps,
.community,
.news,
.footer {
    border-top: 1px solid rgba(220, 190, 214, .24);
    box-shadow: inset 0 1px 0 rgba(255, 231, 246, .025);
}
.features,
.steps,
.community,
.news {
    background-origin: border-box;
}
.dl-row__note { color: #c9bacb; }
.hero__launch-panel .countdown__label { transform: translateY(-5px); }