.landing-home {
            color-scheme: dark;
            --museum-accent: #d83b74;
            --museum-accent-light: #ff4f93;
            --museum-accent-dark: #8c1432;
            --standard-accent: #21d6a0;
            --standard-accent-light: #66ffd2;
            --standard-accent-dark: #00b977;
            --info-accent: #3dd9ff;
            --info-accent-light: #7ee9ff;
            --info-accent-dark: #0b8fb3;
            --card-bg: rgba(6, 4, 10, 0.72);
            --card-border-museum: rgba(216, 59, 116, 0.35);
            --card-border-standard: rgba(33, 214, 160, 0.3);
            --card-border-info: rgba(61, 217, 255, 0.3);
            --text-main: rgba(245, 240, 255, 0.95);
            --text-muted: rgba(210, 205, 225, 0.68);
        }
.landing-home * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }
.landing-home {
            color: white;
            font-family: 'Inter', sans-serif;
            width: 100%;
        }
.landing-home #pixi-back,
.landing-home #pixi-mid,
.landing-home #pixi-front {
            position: fixed;
            inset: 0;
            width: 100vw;
            height: 100vh;
            pointer-events: none;
            touch-action: none;
        }
.landing-home #pixi-back {
            z-index: 0;
        }
.landing-home #pixi-mid {
            z-index: 5;
        }
.landing-home #pixi-front {
            z-index: 20;
        }
.landing-home .main-layout {
            position: relative;
            z-index: 10;
            min-height: 100vh;
            min-height: 100svh;
            width: 100%;
            display: grid;
            place-items: center;
            padding: clamp(18px, 3svh, 34px) clamp(16px, 3vw, 36px);
        }
.landing-home .hero-stack {
            width: 100%;
            max-width: 760px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: clamp(10px, 2svh, 24px);
        }
.landing-home .top-logo {
            width: clamp(230px, min(38vw, 44svh), 500px);
            mix-blend-mode: screen;
            filter: contrast(1.2) brightness(1.1);
        }
.landing-home .center-stage {
            position: relative;
            width: clamp(220px, min(30vw, 38svh), 420px);
            aspect-ratio: 1 / 1;
            display: flex;
            justify-content: center;
            align-items: center;
        }
.landing-home .aura-player {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -60%);
            width: 92%;
            height: 92%;
            opacity: 0.8;
            pointer-events: none;
        }
.landing-home .avatar-img {
            width: 65%;
            animation: landing-float 6s ease-in-out infinite;
            filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.6));
        }
@keyframes landing-float {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-12px);
            }
        }
.landing-home .info-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            margin-top: 0;
            gap: clamp(8px, 1.2svh, 12px);
        }
.landing-home .info-text {
            font-size: clamp(0.9rem, 1.1vw, 1.2rem);
            font-weight: 300;
            line-height: 1.6;
            color: rgba(255, 255, 255, 0.85);
            text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
            display: inline-block;
        }
.landing-home .info-line-primary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            white-space: nowrap;
        }
.landing-home .mini-play-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            margin-left: 0;
            vertical-align: middle;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            cursor: pointer;
            backdrop-filter: blur(4px);
            outline: none;
            padding: 0;
            position: relative;
            top: 0;
            flex: 0 0 auto;
            pointer-events: auto;
            animation: landing-pulse-blue 3s infinite ease-in-out;
        }
.landing-home .mini-play-btn:hover {
            background: rgba(0, 120, 255, 0.1);
        }
.landing-home .mini-play-btn svg {
            width: 10px;
            height: 10px;
            fill: rgba(255, 255, 255, 0.9);
        }
@keyframes landing-pulse-blue {
            0% {
                box-shadow: 0 0 0 0 rgba(0, 120, 255, 0.2);
                border-color: rgba(0, 120, 255, 0.3);
                transform: scale(1);
            }

            50% {
                box-shadow: 0 0 12px 2px rgba(0, 120, 255, 0.5);
                border-color: rgba(0, 120, 255, 0.8);
                transform: scale(1.08);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(0, 120, 255, 0.2);
                border-color: rgba(0, 120, 255, 0.3);
                transform: scale(1);
            }
        }
.landing-home .dev-badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 10px 26px;
            border-radius: 50px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(8px);
            font-size: 0.8rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.7);
        }
.landing-home .dev-badge i {
            width: 6px;
            height: 6px;
            background: #ff0080;
            border-radius: 50%;
            box-shadow: 0 0 8px #ff0080;
            animation: landing-pulse 2s infinite;
        }
@keyframes landing-pulse {

            0%,
            100% {
                opacity: .5;
                transform: scale(.9);
            }

            50% {
                opacity: 1;
                transform: scale(1.3);
            }
        }
.landing-home .footer {
            width: 100%;
            text-align: center;
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.4);
            flex-shrink: 0;
            padding-bottom: 6px;
            margin-top: clamp(32px, 4.5svh, 52px);
        }
/* Computed margin-top was landing at 0px in practice despite the rule
   above (something else in the ~8 overlapping .footer { margin-top }
   breakpoint rules elsewhere in this file was winning) — forced with
   !important rather than untangling that whole cascade, matching how the
   hero-height cascade fight was already resolved earlier this session. */
.landing-home .footer {
            margin-top: 96px !important;
        }
.landing-home .footer p {
            max-width: min(100%, 560px);
            margin: 0 auto;
            line-height: 1.35;
            white-space: normal;
        }
.landing-home .footer-credit {
            font-size: 0.7rem;
            margin-top: 6px;
            opacity: 0.45;
        }
.landing-home .footer-credit a {
            color: inherit;
            text-decoration: none;
            border-bottom: 1px solid rgba(255,255,255,0.2);
        }
.landing-home .footer-credit a:hover {
            opacity: 1;
            text-shadow: none;
            transform: none;
            color: rgba(255,255,255,0.7);
            border-bottom-color: rgba(255,255,255,0.5);
        }
.landing-home .footer-links {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 10px 18px;
            margin-bottom: 8px;
            pointer-events: auto;
        }
/* Pedido 2026-07-19: linha de links ficou longa demais — só o título em
   inglês; o markup bilíngue fica pra quando o footer ganhar mais espaço. */
.landing-home .footer-jp {
            display: none;
        }
.landing-home .footer a {
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            letter-spacing: 1px;
            text-transform: uppercase;
            transition: color 180ms ease, text-shadow 220ms ease, transform 180ms ease;
        }
.landing-home .footer-link-button {
            appearance: none;
            border: 0;
            background: transparent;
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            letter-spacing: 1px;
            text-transform: uppercase;
            transition: color 180ms ease, text-shadow 220ms ease, transform 180ms ease;
            font: inherit;
            cursor: pointer;
            padding: 0;
        }
.landing-home .footer a:hover,
.landing-home .footer-link-button:hover {
            color: rgba(255, 255, 255, 0.95);
            text-shadow:
                0 0 10px rgba(255, 0, 128, 0.22),
                0 0 20px rgba(140, 0, 255, 0.18);
            transform: translateY(-1px);
        }
.landing-home .bug-modal {
            position: fixed;
            inset: 0;
            z-index: 80;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 24px;
            background:
                radial-gradient(circle at 20% 20%, rgba(255, 0, 128, 0.16), transparent 32%),
                radial-gradient(circle at 80% 80%, rgba(0, 180, 255, 0.12), transparent 36%),
                rgba(0, 0, 0, 0.76);
            backdrop-filter: blur(18px);
            pointer-events: auto;
        }
.landing-home .bug-modal.is-open {
            display: flex;
        }
.landing-home .bug-dialog {
            width: min(96vw, 760px);
            max-height: min(88vh, 900px);
            overflow: auto;
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 28px;
            background:
                linear-gradient(145deg, rgba(15, 15, 20, 0.96), rgba(0, 0, 0, 0.92)),
                rgba(0, 0, 0, 0.9);
            box-shadow:
                0 28px 90px rgba(0, 0, 0, 0.62),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
        }
.landing-home .bug-dialog-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 20px;
            padding: 24px 24px 18px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
.landing-home .bug-label {
            color: #ff4fa3;
            font-size: 0.72rem;
            letter-spacing: 0.24em;
            text-transform: uppercase;
            margin-bottom: 8px;
        }
.landing-home .bug-dialog h2 {
            font-family: 'Cinzel', serif;
            font-size: clamp(1.45rem, 4vw, 2.25rem);
            letter-spacing: 0.06em;
            line-height: 1.08;
            margin: 0;
        }
.landing-home .bug-dialog p {
            color: rgba(255, 255, 255, 0.68);
            font-size: 0.92rem;
            line-height: 1.6;
            margin-top: 10px;
        }
.landing-home .bug-close {
            appearance: none;
            width: 42px;
            height: 42px;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 0.16);
            background: rgba(255, 255, 255, 0.05);
            color: white;
            cursor: pointer;
            font-size: 1.35rem;
            line-height: 1;
        }
.landing-home .bug-form {
            padding: 24px;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 16px;
        }
.landing-home .bug-field {
            display: flex;
            flex-direction: column;
            gap: 7px;
        }
.landing-home .bug-field.full {
            grid-column: 1 / -1;
        }
.landing-home .bug-field label {
            color: rgba(255, 255, 255, 0.58);
            font-size: 0.72rem;
            letter-spacing: 0.16em;
            text-transform: uppercase;
        }
.landing-home .bug-field input,
.landing-home .bug-field select,
.landing-home .bug-field textarea {
            width: 100%;
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.055);
            color: white;
            font: inherit;
            padding: 13px 14px;
            outline: none;
            transition: border-color 160ms ease, box-shadow 180ms ease, background 160ms ease;
        }
.landing-home .bug-field select option {
            background: #0b0b10;
            color: white;
        }
.landing-home .bug-field textarea {
            min-height: 108px;
            resize: vertical;
        }
.landing-home .bug-field input:focus,
.landing-home .bug-field select:focus,
.landing-home .bug-field textarea:focus {
            border-color: rgba(255, 0, 128, 0.54);
            box-shadow: 0 0 0 4px rgba(255, 0, 128, 0.12);
            background: rgba(255, 255, 255, 0.075);
        }
.landing-home .bug-hint {
            color: rgba(255, 255, 255, 0.42);
            font-size: 0.78rem;
            line-height: 1.45;
        }
.landing-home .bug-actions {
            grid-column: 1 / -1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding-top: 4px;
        }
.landing-home .bug-submit {
            appearance: none;
            border: 1px solid rgba(255, 0, 128, 0.45);
            border-radius: 999px;
            background: linear-gradient(135deg, rgba(255, 0, 128, 0.94), rgba(95, 50, 255, 0.78));
            color: white;
            cursor: pointer;
            font: inherit;
            font-weight: 700;
            letter-spacing: 0.13em;
            text-transform: uppercase;
            padding: 13px 22px;
            box-shadow: 0 14px 38px rgba(255, 0, 128, 0.22);
        }
.landing-home .bug-submit:disabled {
            opacity: 0.55;
            cursor: wait;
        }
.landing-home .bug-status {
            color: rgba(255, 255, 255, 0.68);
            font-size: 0.86rem;
            line-height: 1.45;
        }
.landing-home .bug-status.ok {
            color: #76ffd7;
        }
.landing-home .bug-status.error {
            color: #ff8fa8;
        }
.landing-home .bug-honeypot {
            position: absolute;
            left: -9999px;
            width: 1px;
            height: 1px;
            opacity: 0;
        }
.landing-home .bug-dialog {
            width: min(96vw, 1040px);
            max-height: min(92vh, 920px);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            background:
                linear-gradient(145deg, rgba(16, 18, 26, 0.78), rgba(2, 3, 8, 0.7)),
                rgba(8, 8, 14, 0.58);
            backdrop-filter: blur(26px) saturate(1.18);
            -webkit-backdrop-filter: blur(26px) saturate(1.18);
            border-color: rgba(255, 255, 255, 0.18);
            box-shadow:
                0 32px 120px rgba(0, 0, 0, 0.68),
                0 0 80px rgba(255, 0, 128, 0.08),
                0 0 90px rgba(0, 190, 255, 0.07),
                inset 0 1px 0 rgba(255, 255, 255, 0.12);
        }
.landing-home .bug-dialog-header {
            position: sticky;
            top: 0;
            z-index: 2;
            background:
                linear-gradient(180deg, rgba(10, 11, 17, 0.94), rgba(10, 11, 17, 0.82));
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
        }
.landing-home .bug-dialog-header p {
            max-width: 72ch;
        }
.landing-home .bug-privacy {
            color: rgba(255, 255, 255, 0.48);
            font-size: 0.8rem;
            line-height: 1.45;
            margin-top: 10px;
        }
.landing-home .bug-form {
            padding: 0;
            display: flex;
            flex: 1;
            min-height: 0;
        }
.landing-home .bug-dialog-body {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            padding: 22px 24px 24px;
            scrollbar-width: thin;
            scrollbar-color: rgba(255, 79, 163, 0.48) rgba(255, 255, 255, 0.055);
        }
.landing-home .bug-dialog-body::-webkit-scrollbar {
            width: 8px;
        }
.landing-home .bug-dialog-body::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.045);
            border-radius: 999px;
        }
.landing-home .bug-dialog-body::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, rgba(255, 79, 163, 0.72), rgba(61, 217, 255, 0.48));
            border-radius: 999px;
            border: 2px solid rgba(10, 10, 16, 0.78);
        }
.landing-home .bug-section {
            position: relative;
            border: 1px solid rgba(255, 255, 255, 0.105);
            border-radius: 22px;
            background:
                linear-gradient(145deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025)),
                rgba(0, 0, 0, 0.16);
            padding: 18px;
            margin-bottom: 16px;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
        }
.landing-home .bug-section-title {
            display: flex;
            align-items: center;
            gap: 10px;
            color: rgba(255, 255, 255, 0.9);
            font-size: 0.76rem;
            font-weight: 700;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            margin-bottom: 14px;
        }
.landing-home .bug-section-title::before {
            content: "";
            width: 8px;
            height: 8px;
            border-radius: 999px;
            background: #ff4fa3;
            box-shadow: 0 0 16px rgba(255, 79, 163, 0.8);
        }
.landing-home .bug-section-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 14px 16px;
        }
.landing-home .bug-section-grid.three {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
.landing-home .bug-field input,
.landing-home .bug-field select,
.landing-home .bug-field textarea {
            border-radius: 15px;
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.042)),
                rgba(0, 0, 0, 0.24);
            border-color: rgba(255, 255, 255, 0.15);
        }
.landing-home .bug-field textarea {
            min-height: 118px;
        }
.landing-home .bug-counter {
            align-self: flex-end;
            color: rgba(255, 255, 255, 0.38);
            font-size: 0.72rem;
            font-variant-numeric: tabular-nums;
            margin-top: -2px;
        }
.landing-home .bug-file-input {
            position: absolute;
            left: -9999px;
            width: 1px;
            height: 1px;
            opacity: 0;
        }
.landing-home .bug-upload-box {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            gap: 14px;
            border: 1px dashed rgba(255, 255, 255, 0.22);
            border-radius: 18px;
            background:
                radial-gradient(circle at 12% 20%, rgba(255, 79, 163, 0.15), transparent 34%),
                rgba(255, 255, 255, 0.045);
            padding: 16px;
            cursor: pointer;
            transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
        }
.landing-home .bug-upload-box:hover {
            border-color: rgba(255, 79, 163, 0.48);
            background:
                radial-gradient(circle at 12% 20%, rgba(255, 79, 163, 0.2), transparent 34%),
                rgba(255, 255, 255, 0.06);
            transform: translateY(-1px);
        }
.landing-home .bug-upload-title {
            color: white;
            font-weight: 700;
            letter-spacing: 0.04em;
        }
.landing-home .bug-upload-meta,
.landing-home .bug-file-name {
            color: rgba(255, 255, 255, 0.48);
            font-size: 0.8rem;
            margin-top: 4px;
        }
.landing-home .bug-upload-pill {
            border: 1px solid rgba(255, 79, 163, 0.38);
            border-radius: 999px;
            color: #ff9dcc;
            padding: 9px 13px;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            white-space: nowrap;
        }
.landing-home .bug-preview {
            display: none;
            width: 96px;
            height: 68px;
            object-fit: cover;
            border-radius: 14px;
            border: 1px solid rgba(255, 255, 255, 0.14);
            margin-top: 12px;
        }
.landing-home .bug-preview.is-visible {
            display: block;
        }
.landing-home .bug-actions {
            position: sticky;
            bottom: 0;
            z-index: 2;
            background:
                linear-gradient(180deg, rgba(8, 9, 14, 0.74), rgba(8, 9, 14, 0.96));
            backdrop-filter: blur(22px);
            -webkit-backdrop-filter: blur(22px);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding: 16px 24px;
        }
.landing-home .bug-action-buttons {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 12px;
            flex-shrink: 0;
        }
.landing-home .bug-secondary {
            appearance: none;
            border: 1px solid rgba(255, 255, 255, 0.16);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.045);
            color: rgba(255, 255, 255, 0.78);
            cursor: pointer;
            font: inherit;
            font-weight: 700;
            letter-spacing: 0.13em;
            text-transform: uppercase;
            padding: 13px 20px;
        }
.landing-home .bug-submit:disabled {
            opacity: 0.42;
            cursor: not-allowed;
            filter: grayscale(0.3);
            box-shadow: none;
        }
.landing-home .bug-modal {
            background:
                radial-gradient(circle at 20% 18%, rgba(255, 0, 128, 0.1), transparent 30%),
                radial-gradient(circle at 82% 82%, rgba(0, 180, 255, 0.08), transparent 34%),
                rgba(0, 0, 0, 0.24);
            backdrop-filter: blur(3px);
            -webkit-backdrop-filter: blur(3px);
        }
.landing-home .bug-dialog {
            width: min(96vw, 1100px);
            background:
                radial-gradient(circle at 0% 0%, rgba(255, 79, 163, 0.12), transparent 34%),
                radial-gradient(circle at 100% 100%, rgba(61, 217, 255, 0.1), transparent 38%),
                linear-gradient(145deg, rgba(16, 18, 26, 0.76), rgba(2, 3, 8, 0.64)),
                rgba(8, 8, 14, 0.5);
            backdrop-filter: blur(30px) saturate(1.18);
            -webkit-backdrop-filter: blur(30px) saturate(1.18);
        }
.landing-home .bug-dialog-header {
            position: relative;
            flex-shrink: 0;
            z-index: 3;
            background:
                linear-gradient(180deg, rgba(10, 11, 17, 0.9), rgba(10, 11, 17, 0.74));
        }
.landing-home .bug-form {
            flex-direction: column;
        }
.landing-home .bug-dialog-main {
            display: grid;
            grid-template-columns: minmax(0, 1.85fr) minmax(280px, 1fr);
            flex: 1;
            min-height: 0;
        }
.landing-home .bug-dialog-body {
            padding: 20px 22px 22px;
            scrollbar-color: rgba(255, 255, 255, 0.22) rgba(255, 255, 255, 0.045);
        }
.landing-home .bug-dialog-body::-webkit-scrollbar {
            width: 6px;
        }
.landing-home .bug-dialog-body::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.035);
        }
.landing-home .bug-dialog-body::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.22);
            border: 1px solid rgba(10, 10, 16, 0.82);
        }
.landing-home .bug-help-panel {
            position: relative;
            min-height: 0;
            padding: 24px;
            border-left: 1px solid rgba(255, 255, 255, 0.1);
            background:
                radial-gradient(circle at 12% 10%, rgba(255, 79, 163, 0.16), transparent 32%),
                radial-gradient(circle at 92% 92%, rgba(61, 217, 255, 0.12), transparent 38%),
                linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018));
            overflow: hidden;
        }
.landing-home .bug-help-panel::after {
            content: "";
            position: absolute;
            inset: 18px;
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 22px;
            pointer-events: none;
        }
.landing-home .bug-help-card {
            position: relative;
            z-index: 1;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 18px;
        }
.landing-home .bug-help-kicker {
            color: #ff6db5;
            font-size: 0.68rem;
            font-weight: 700;
            letter-spacing: 0.23em;
            text-transform: uppercase;
            margin-bottom: 12px;
        }
.landing-home .bug-help-card h3 {
            font-family: 'Cinzel', serif;
            color: rgba(255, 255, 255, 0.94);
            font-size: clamp(1.18rem, 2vw, 1.55rem);
            letter-spacing: 0.08em;
            line-height: 1.2;
            margin: 0 0 18px;
        }
.landing-home .bug-help-list,
.landing-home .bug-danger-list {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            gap: 11px;
        }
.landing-home .bug-help-list li,
.landing-home .bug-danger-list li {
            position: relative;
            color: rgba(255, 255, 255, 0.74);
            font-size: 0.9rem;
            line-height: 1.35;
            padding-left: 19px;
        }
.landing-home .bug-help-list li::before,
.landing-home .bug-danger-list li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0.55em;
            width: 6px;
            height: 6px;
            border-radius: 999px;
            background: rgba(61, 217, 255, 0.9);
            box-shadow: 0 0 14px rgba(61, 217, 255, 0.32);
        }
.landing-home .bug-danger-box {
            border: 1px solid rgba(255, 79, 163, 0.22);
            border-radius: 20px;
            background: linear-gradient(145deg, rgba(255, 79, 163, 0.1), rgba(255, 255, 255, 0.025));
            padding: 16px;
        }
.landing-home .bug-danger-title {
            color: rgba(255, 255, 255, 0.86);
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            margin-bottom: 10px;
        }
.landing-home .bug-danger-list {
            gap: 8px;
        }
.landing-home .bug-danger-list li {
            color: rgba(255, 255, 255, 0.58);
            font-size: 0.82rem;
            text-transform: lowercase;
        }
.landing-home .bug-danger-list li::before {
            background: rgba(255, 79, 163, 0.85);
            box-shadow: 0 0 14px rgba(255, 79, 163, 0.26);
        }
.landing-home .bug-section {
            border-radius: 20px;
            padding: 16px;
            margin-bottom: 14px;
        }
.landing-home .bug-section-grid {
            gap: 13px 14px;
        }
.landing-home .bug-section-grid.three {
            grid-template-columns: minmax(150px, 0.75fr) minmax(210px, 1.15fr) minmax(210px, 1.15fr);
        }
.landing-home .bug-field textarea {
            min-height: 108px;
        }
.landing-home .bug-actions {
            position: relative;
            bottom: auto;
            z-index: 3;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            background:
                linear-gradient(180deg, rgba(8, 9, 14, 0.72), rgba(8, 9, 14, 0.9));
            padding: 14px 24px calc(14px + env(safe-area-inset-bottom));
        }
.landing-home .bug-modal {
            background:
                radial-gradient(ellipse at 18% 18%, rgba(6, 32, 58, 0.16), transparent 36%),
                radial-gradient(ellipse at 82% 80%, rgba(12, 56, 64, 0.12), transparent 40%),
                radial-gradient(ellipse at 48% 8%, rgba(70, 24, 64, 0.05), transparent 28%),
                rgba(0, 0, 0, 0.38);
            backdrop-filter: blur(2px) saturate(0.86);
            -webkit-backdrop-filter: blur(2px) saturate(0.86);
        }
.landing-home .bug-dialog {
            position: relative;
            isolation: isolate;
            color: rgba(249, 241, 246, 0.92);
            background:
                radial-gradient(ellipse at 7% 0%, rgba(10, 40, 68, 0.18), transparent 36%),
                radial-gradient(ellipse at 93% 100%, rgba(11, 58, 64, 0.14), transparent 44%),
                radial-gradient(ellipse at 78% 18%, rgba(60, 25, 60, 0.07), transparent 34%),
                linear-gradient(145deg, rgba(7, 12, 20, 0.82), rgba(2, 4, 9, 0.72)),
                rgba(4, 7, 12, 0.62);
            border-color: rgba(210, 228, 238, 0.14);
            box-shadow:
                0 32px 120px rgba(0, 0, 0, 0.7),
                0 0 76px rgba(4, 38, 70, 0.14),
                0 0 68px rgba(9, 62, 68, 0.1),
                inset 0 1px 0 rgba(232, 244, 250, 0.1);
        }
.landing-home .bug-dialog::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -1;
            border-radius: inherit;
            pointer-events: none;
            opacity: 0.2;
            background:
                radial-gradient(ellipse 180px 70px at 12% 78%, rgba(38, 81, 94, 0.16), transparent 68%),
                radial-gradient(ellipse 150px 58px at 83% 20%, rgba(215, 229, 236, 0.055), transparent 68%),
                radial-gradient(ellipse 190px 78px at 78% 72%, rgba(35, 27, 68, 0.12), transparent 70%),
                repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 9px);
            filter: blur(0.2px);
        }
.landing-home .bug-dialog-header {
            background:
                linear-gradient(180deg, rgba(5, 9, 15, 0.92), rgba(5, 9, 15, 0.74));
            border-bottom-color: rgba(210, 228, 238, 0.11);
        }
.landing-home .bug-label,
.landing-home .bug-help-kicker {
            color: #ff5fae;
            text-shadow: 0 0 18px rgba(255, 57, 140, 0.22);
        }
.landing-home .bug-dialog h2,
.landing-home .bug-help-card h3 {
            color: rgba(255, 249, 253, 0.96);
            text-shadow: 0 0 24px rgba(255, 220, 238, 0.08);
        }
.landing-home .bug-dialog p,
.landing-home .bug-status {
            color: rgba(242, 229, 238, 0.74);
        }
.landing-home .bug-privacy,
.landing-home .bug-upload-meta,
.landing-home .bug-file-name,
.landing-home .bug-counter {
            color: rgba(242, 229, 238, 0.56);
        }
.landing-home .bug-field label {
            color: rgba(242, 229, 238, 0.68);
        }
.landing-home .bug-field input::placeholder,
.landing-home .bug-field textarea::placeholder {
            color: rgba(242, 229, 238, 0.42);
            opacity: 1;
        }
.landing-home .bug-dialog-body {
            scrollbar-color: rgba(214, 167, 196, 0.24) rgba(255, 255, 255, 0.035);
        }
.landing-home .bug-dialog-body::-webkit-scrollbar-thumb {
            background: rgba(214, 167, 196, 0.24);
            border-color: rgba(8, 4, 10, 0.88);
        }
.landing-home .bug-section {
            border-color: rgba(210, 228, 238, 0.11);
            background:
                radial-gradient(ellipse at 14% 0%, rgba(20, 66, 84, 0.1), transparent 42%),
                linear-gradient(145deg, rgba(226, 240, 247, 0.05), rgba(255, 255, 255, 0.016)),
                rgba(5, 10, 17, 0.28);
        }
.landing-home .bug-section-title::before {
            background: #d84c96;
            box-shadow: 0 0 12px rgba(216, 76, 150, 0.32);
        }
.landing-home .bug-field input,
.landing-home .bug-field select,
.landing-home .bug-field textarea {
            color: rgba(255, 249, 253, 0.94);
            background:
                linear-gradient(180deg, rgba(226, 240, 247, 0.064), rgba(255, 255, 255, 0.028)),
                rgba(5, 10, 17, 0.38);
            border-color: rgba(210, 228, 238, 0.15);
        }
.landing-home .bug-field input:focus,
.landing-home .bug-field select:focus,
.landing-home .bug-field textarea:focus {
            border-color: rgba(205, 68, 145, 0.5);
            box-shadow:
                0 0 0 3px rgba(205, 68, 145, 0.09),
                0 0 18px rgba(35, 72, 95, 0.12);
            background:
                linear-gradient(180deg, rgba(226, 240, 247, 0.076), rgba(255, 255, 255, 0.032)),
                rgba(5, 10, 17, 0.46);
        }
.landing-home .bug-help-panel {
            background:
                radial-gradient(ellipse 220px 120px at 18% 10%, rgba(8, 47, 76, 0.16), transparent 62%),
                radial-gradient(ellipse 190px 140px at 90% 88%, rgba(8, 68, 72, 0.13), transparent 66%),
                radial-gradient(ellipse 130px 58px at 78% 24%, rgba(64, 28, 72, 0.07), transparent 64%),
                linear-gradient(160deg, rgba(226, 240, 247, 0.04), rgba(255, 255, 255, 0.012));
            border-left-color: rgba(210, 228, 238, 0.1);
        }
.landing-home .bug-help-panel::before {
            content: "";
            position: absolute;
            inset: -20px;
            pointer-events: none;
            opacity: 0.13;
            background:
                radial-gradient(ellipse 90px 34px at 18% 72%, rgba(36, 84, 96, 0.18), transparent 72%),
                radial-gradient(ellipse 76px 30px at 42% 18%, rgba(225, 238, 244, 0.075), transparent 74%),
                radial-gradient(ellipse 112px 42px at 88% 48%, rgba(45, 36, 84, 0.16), transparent 76%);
            filter: blur(5px);
        }
.landing-home .bug-help-list li,
.landing-home .bug-danger-list li {
            color: rgba(242, 229, 238, 0.76);
        }
.landing-home .bug-help-list li::before {
            background: rgba(96, 173, 185, 0.82);
            box-shadow: 0 0 12px rgba(96, 173, 185, 0.22);
        }
.landing-home .bug-danger-box {
            border-color: rgba(96, 41, 70, 0.28);
            background:
                radial-gradient(ellipse at 20% 0%, rgba(80, 28, 55, 0.11), transparent 55%),
                linear-gradient(145deg, rgba(226, 240, 247, 0.035), rgba(255, 255, 255, 0.014));
        }
.landing-home .bug-danger-title {
            color: rgba(255, 241, 249, 0.88);
        }
.landing-home .bug-danger-list li {
            color: rgba(242, 229, 238, 0.62);
        }
.landing-home .bug-upload-box {
            background:
                radial-gradient(ellipse at 12% 20%, rgba(35, 79, 94, 0.11), transparent 38%),
                rgba(226, 240, 247, 0.035);
            border-color: rgba(210, 228, 238, 0.18);
        }
.landing-home .bug-upload-box:hover {
            border-color: rgba(181, 68, 132, 0.34);
            background:
                radial-gradient(ellipse at 12% 20%, rgba(40, 91, 108, 0.14), transparent 38%),
                rgba(226, 240, 247, 0.046);
        }
.landing-home .bug-upload-pill {
            border-color: rgba(181, 68, 132, 0.3);
            color: #d89abc;
        }
.landing-home .bug-actions {
            background:
                linear-gradient(180deg, rgba(5, 10, 17, 0.72), rgba(5, 10, 17, 0.91));
            border-top-color: rgba(210, 228, 238, 0.11);
        }
.landing-home .bug-submit {
            border-color: rgba(174, 65, 127, 0.34);
            background: linear-gradient(135deg, rgba(105, 25, 61, 0.9), rgba(45, 36, 91, 0.86));
            box-shadow: 0 14px 34px rgba(38, 14, 45, 0.26);
        }
.landing-home .bug-secondary {
            border-color: rgba(210, 228, 238, 0.15);
            color: rgba(242, 229, 238, 0.82);
            background: rgba(226, 240, 247, 0.035);
        }
.landing-home .bug-help-panel {
            padding: 34px 32px 28px;
        }
.landing-home .bug-help-panel::after {
            inset: 22px;
        }
.landing-home .bug-help-card {
            gap: 28px;
        }
.landing-home .bug-help-kicker {
            margin-bottom: 16px;
            letter-spacing: 0.26em;
        }
.landing-home .bug-help-card h3 {
            margin-bottom: 24px;
            line-height: 1.24;
        }
.landing-home .bug-help-list {
            gap: 13px;
        }
.landing-home .bug-help-list li {
            line-height: 1.42;
        }
.landing-home .bug-danger-box {
            padding: 18px 18px 17px;
            border-radius: 18px;
        }
.landing-home .bug-danger-title {
            margin-bottom: 12px;
        }
.landing-home .bug-danger-list {
            gap: 9px;
        }
.landing-home .bug-field select {
            color-scheme: dark;
            appearance: none;
            background-image:
                linear-gradient(45deg, transparent 50%, rgba(218, 229, 236, 0.82) 50%),
                linear-gradient(135deg, rgba(218, 229, 236, 0.82) 50%, transparent 50%),
                linear-gradient(180deg, rgba(226, 240, 247, 0.064), rgba(255, 255, 255, 0.028));
            background-position:
                calc(100% - 18px) 52%,
                calc(100% - 12px) 52%,
                0 0;
            background-size:
                6px 6px,
                6px 6px,
                100% 100%;
            background-repeat: no-repeat;
            padding-right: 38px;
        }
.landing-home .bug-field select option {
            background: #050a11;
            color: rgba(242, 244, 248, 0.94);
        }
.landing-home .bug-field select option:checked {
            background: #132130;
            color: #ffffff;
        }
.landing-home .bug-field select,
.landing-home .bug-field select:focus {
            background-image:
                linear-gradient(45deg, transparent 50%, rgba(218, 229, 236, 0.82) 50%),
                linear-gradient(135deg, rgba(218, 229, 236, 0.82) 50%, transparent 50%),
                linear-gradient(180deg, rgba(226, 240, 247, 0.064), rgba(255, 255, 255, 0.028));
            background-position:
                calc(100% - 18px) 52%,
                calc(100% - 12px) 52%,
                0 0;
            background-size:
                6px 6px,
                6px 6px,
                100% 100%;
            background-repeat: no-repeat;
            transition: border-color 160ms ease, box-shadow 180ms ease;
        }
.landing-home .bug-help-card h3 {
            font-size: clamp(1.05rem, 1.75vw, 1.36rem);
            line-height: 1.24;
        }
.landing-home .bug-secondary,
.landing-home .bug-submit {
            font-size: 0.82rem;
            letter-spacing: 0.11em;
        }
@media (max-width: 900px) {
.landing-home .bug-dialog {
                width: calc(100vw - 24px);
                max-height: calc(100dvh - 24px);
                border-radius: 24px;
            }
.landing-home .bug-dialog-main {
                grid-template-columns: 1fr;
                overflow-y: auto;
                scrollbar-width: thin;
                scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.04);
            }
.landing-home .bug-dialog-body {
                overflow: visible;
            }
.landing-home .bug-help-panel {
                border-left: 0;
                border-top: 1px solid rgba(255, 255, 255, 0.1);
                padding: 22px 18px;
            }
.landing-home .bug-section-grid,
.landing-home .bug-section-grid.three {
                grid-template-columns: 1fr;
            }
.landing-home .bug-dialog-header {
                padding: 20px 18px 16px;
            }
.landing-home .bug-dialog-body {
                padding: 18px;
            }
.landing-home .bug-actions {
                flex-direction: column;
                align-items: stretch;
                padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
            }
.landing-home .bug-action-buttons {
                width: 100%;
            }

        
}
@media (max-width: 520px) {
.landing-home .bug-modal {
                padding: 10px;
            }
.landing-home .bug-dialog {
                width: calc(100vw - 20px);
                max-height: calc(100dvh - 20px);
                border-radius: 22px;
            }
.landing-home .bug-section {
                padding: 15px;
                border-radius: 19px;
            }
.landing-home .bug-upload-box {
                grid-template-columns: 1fr;
            }
.landing-home .bug-action-buttons {
                display: grid;
                grid-template-columns: 0.85fr 1.15fr;
            }

        
}
@media (max-height: 900px) {
.landing-home .main-layout {
                padding-top: 12px;
                padding-bottom: 12px;
            }
.landing-home .hero-stack {
                gap: 14px;
            }
.landing-home .top-logo {
                width: clamp(180px, 30vw, 380px);
            }
.landing-home .center-stage {
                width: clamp(200px, 25vw, 320px);
            }
.landing-home .avatar-img {
                width: 58%;
            }
.landing-home .info-container {
                margin-top: -4px;
                gap: 8px;
            }
.landing-home .info-text {
                font-size: clamp(0.85rem, 1vw, 1rem);
                line-height: 1.4;
            }
.landing-home .dev-badge {
                padding: 8px 18px;
                font-size: 0.72rem;
            }
.landing-home .footer {
                font-size: 0.8rem;
                margin-top: 28px;
                padding-bottom: 4px;
            }
.landing-home .footer-links {
                gap: 18px;
                margin-bottom: 6px;
            }
.landing-home .footer-links a,
.landing-home .footer-link-button {
                font-size: 0.78rem;
            }
.landing-home .bug-form {
                grid-template-columns: 1fr;
            }
.landing-home .bug-actions {
                align-items: stretch;
                flex-direction: column;
            }
.landing-home .bug-submit {
                width: 100%;
            }

        
}
@media (min-width: 901px) and (max-height: 900px) {
.landing-home .bug-actions {
                align-items: center;
                flex-direction: row;
            }
.landing-home .bug-submit {
                width: auto;
            }

        
}
@media (max-width: 768px) {
.landing-home .main-layout {
                padding-top: 24px;
                padding-bottom: 16px;
                justify-content: space-between;
            }
.landing-home .hero-stack {
                justify-content: center;
                gap: 18px;
                width: 100%;
            }
/* Pedido 2026-07-20: hero (logo/mascote/tagline) estava miúdo em relação
   aos cards e textos abaixo no celular — escala do conjunto ~+25%,
   proporções entre si mantidas. */
.landing-home .top-logo {
                width: 80vw;
                max-width: 330px;
            }
.landing-home .center-stage {
                width: 88vw;
                max-width: 330px;
                margin: 0 auto;
            }
.landing-home .avatar-img {
                width: 60%;
            }
.landing-home .info-container {
                margin-top: -4px;
                gap: 10px;
            }
.landing-home .info-text {
                font-size: 1.08rem;
                line-height: 1.5;
            }
.landing-home .mini-play-btn {
                width: 30px;
                height: 30px;
            }
.landing-home .mini-play-btn svg {
                width: 13px;
                height: 13px;
            }
/* mode-links (HOW TO JOIN ✦ BROWSE THE ARCHIVE): a regra base é 0.92rem,
   pensada pra desktop — enorme ao lado da tagline no celular, e "HOW TO
   JOIN" quebrava em 2 linhas nessa largura, desalinhando o separador "✦"
   verticalmente em relação a "BROWSE THE ARCHIVE" (que ficava numa linha
   só) — lido como "não centralizado". !important necessário: uma regra
   .mode-links a / .mode-link-btn IDÊNTICA em especificidade, porém SEM
   media query (mais abaixo no arquivo, ~L1975/2098), sempre vence no
   mobile também — CSS resolve empate de especificidade por ordem no
   arquivo, não por estar dentro de @media. nowrap fecha o caso de vez. */
.landing-home .mode-links {
                gap: 10px;
            }
.landing-home .mode-links a,
.landing-home .mode-link-btn {
                font-size: 0.68rem !important;
                white-space: nowrap;
            }
.landing-home .mode-links .mode-links-sep {
                font-size: 0.6rem !important;
                position: relative;
                top: -1px;
            }
.landing-home .dev-badge {
                padding: 8px 18px;
                font-size: 0.72rem;
                margin-bottom: 0;
            }
.landing-home .footer {
                margin-top: 32px;
                font-size: 0.74rem;
                padding-bottom: calc(10px + env(safe-area-inset-bottom));
            }
.landing-home .footer-links {
                gap: 18px;
                margin-bottom: 8px;
                flex-wrap: wrap;
            }
.landing-home .footer-links a,
.landing-home .footer-link-button {
                font-size: 0.78rem;
            }

        
}
@media (max-width: 768px) and (max-height: 740px) {
.landing-home .main-layout {
        padding-top: 16px;
        padding-bottom: 12px;
    }
.landing-home .hero-stack {
        gap: 12px;
    }
.landing-home .top-logo {
        max-width: 275px;
    }
.landing-home .center-stage {
        max-width: 275px;
    }
.landing-home .info-text {
        font-size: 1rem;
        line-height: 1.4;
    }
.landing-home .dev-badge {
        padding: 7px 16px;
        font-size: 0.68rem;
    }
.landing-home .footer {
        font-size: 0.68rem;
        margin-top: 18px;
    }
.landing-home .footer-links {
        gap: 14px;
        margin-bottom: 6px;
    }
.landing-home .footer-links a,
.landing-home .footer-link-button {
        font-size: 0.72rem;
    }


}
.landing-home  {
            min-height: 100vh;
            min-height: 100svh;
            overflow-x: hidden;
            overflow-y: auto;
        }
.landing-home .main-layout {
            min-height: 100vh;
            min-height: 100svh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: clamp(8px, 1.5svh, 18px);
            padding: clamp(16px, 3svh, 34px) clamp(16px, 3vw, 36px);
        }
.landing-home .hero-stack {
            flex: 0 0 auto;
            max-width: 760px;
            gap: clamp(10px, 2svh, 24px);
        }
.landing-home .top-logo {
            width: clamp(230px, min(38vw, 44svh), 500px);
        }
.landing-home .center-stage {
            width: clamp(220px, min(30vw, 38svh), 420px);
        }
.landing-home .info-container {
            margin-top: 0;
            gap: clamp(8px, 1.2svh, 12px);
        }
.landing-home .footer {
            margin-top: clamp(64px, 9svh, 108px);
        }
.landing-home .footer-links {
            display: flex;
            /* QA round 3: a horizontal scrollbar was explicitly rejected —
               the 7 items must fit one line with no scroll, ever, on
               desktop. Removed overflow-x entirely; instead the width cap
               is much more generous (was 1100px) and two progressive
               font/gap shrink tiers below (1500px, 1366px) do the fitting
               work before it would ever need to wrap or scroll. */
            flex-wrap: nowrap;
            justify-content: center;
            gap: 8px 22px;
            width: min(96%, 1560px);
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 10px;
        }
.landing-home .footer-links a,
.landing-home .footer-link-button {
            white-space: nowrap;
            flex-shrink: 0;
        }
/* Progressive shrink so all 7 bilingual items keep fitting one line as the
   viewport narrows, before ever reaching the mobile wrap breakpoint. */
@media (max-width: 1560px) {
.landing-home .footer-links {
            gap: 6px 16px;
        }
.landing-home .footer-links a,
.landing-home .footer-link-button {
            font-size: 0.82rem;
        }
}
@media (max-width: 1400px) {
.landing-home .footer-links {
            gap: 5px 11px;
        }
.landing-home .footer-links a,
.landing-home .footer-link-button {
            font-size: 0.72rem;
            letter-spacing: 0.5px;
        }
}
@media (max-height: 900px) {
.landing-home .main-layout {
                justify-content: center;
                gap: clamp(6px, 1.1svh, 12px);
                padding-top: clamp(10px, 2svh, 20px);
                padding-bottom: clamp(10px, 2svh, 20px);
            }
.landing-home .hero-stack {
                gap: clamp(8px, 1.5svh, 14px);
            }
.landing-home .top-logo {
                width: clamp(210px, min(34vw, 38svh), 380px);
            }
.landing-home .center-stage {
                width: clamp(200px, min(28vw, 34svh), 320px);
            }
.landing-home .info-container {
                margin-top: 0;
            }
.landing-home .footer {
                margin-top: 64px;
            }

        
}
@media (max-width: 768px) {
.landing-home .main-layout {
                justify-content: center;
                gap: clamp(8px, 1.4svh, 16px);
            }
.landing-home .hero-stack {
                gap: clamp(10px, 1.8svh, 18px);
            }
.landing-home .footer {
                margin-top: 48px;
            }
.landing-home .footer p {
                max-width: 310px;
                font-size: 0.68rem;
                overflow-wrap: anywhere;
            }
.landing-home .footer-links {
                width: min(100%, 380px);
                gap: 6px 18px;
                flex-wrap: wrap;
                overflow-x: visible;
            }

        
}
@media (max-width: 768px) and (max-height: 740px) {
.landing-home .footer {
                margin-top: 30px;
            }

        
}
.landing-home .mode-cards-layout {
            display: contents; 
        }
@media (min-width: 900px) {
.landing-home .mode-cards-layout {
                display: grid;
                grid-template-columns: 1fr minmax(0, 760px) 1fr;
                align-items: stretch;
                gap: clamp(16px, 2.5vw, 40px);
                width: 100%;
                max-width: 1440px;
                margin: 0 auto;
            }
.landing-home .mode-cards-layout .hero-stack {
                grid-column: 2;
            }
.landing-home .main-layout .footer {
                margin-top: clamp(64px, 8svh, 108px);
            }

        
}
.landing-home .side-card {
            display: none; 
            flex-direction: column;
            justify-content: space-between;
            gap: 18px;
            height: clamp(340px, 55svh, 580px);
            border-radius: 24px;
            padding: 28px 24px 22px;
            background: rgba(10, 3, 6, 0.65);
            backdrop-filter: blur(18px) saturate(1.1);
            -webkit-backdrop-filter: blur(18px) saturate(1.1);
            border: 1px solid rgba(255, 255, 255, 0.08);
            position: relative;
            overflow: hidden;
            
            perspective: 900px;
            transition: transform 380ms cubic-bezier(0.23, 1, 0.32, 1),
                        box-shadow 380ms cubic-bezier(0.23, 1, 0.32, 1);
        }
@media (min-width: 900px) {
.landing-home .side-card {
                display: flex;
            }

        
}
.landing-home .side-card::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            pointer-events: none;
            opacity: 0.38;
            background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.06), transparent 70%);
        }
.landing-home .museum-side {
            border-color: rgba(180, 40, 80, 0.3);
            box-shadow:
                0 0 40px rgba(180, 40, 80, 0.08),
                0 20px 60px rgba(0, 0, 0, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.07);
        }
.landing-home .museum-side::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 35%;
            background: linear-gradient(to top, rgba(140, 20, 50, 0.18), transparent);
            pointer-events: none;
            border-radius: inherit;
        }
.landing-home .museum-side:hover {
            transform: scale(1.02) translateY(-4px);
            box-shadow:
                0 0 56px rgba(180, 40, 80, 0.18),
                0 28px 72px rgba(0, 0, 0, 0.6),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
        }
.landing-home .standard-side {
            border-color: rgba(0, 200, 120, 0.25);
            box-shadow:
                0 0 40px rgba(0, 200, 120, 0.06),
                0 20px 60px rgba(0, 0, 0, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.07);
        }
.landing-home .standard-side::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 35%;
            background: linear-gradient(to top, rgba(0, 160, 90, 0.12), transparent);
            pointer-events: none;
            border-radius: inherit;
        }
.landing-home .standard-side:hover {
            transform: scale(1.02) translateY(-4px);
            box-shadow:
                0 0 56px rgba(0, 200, 120, 0.14),
                0 28px 72px rgba(0, 0, 0, 0.6),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
        }
.landing-home .card-top {
            position: relative;
            z-index: 1;
        }
.landing-home .card-icon {
            font-size: 1.6rem;
            line-height: 1;
            margin-bottom: 10px;
            display: block;
        }
.landing-home .card-title {
            font-family: 'Cinzel', serif;
            font-size: clamp(0.82rem, 1vw, 1rem);
            letter-spacing: 0.12em;
            color: rgba(255, 255, 255, 0.95);
            margin-bottom: 4px;
        }
.landing-home .card-subtitle {
            font-size: 0.68rem;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.42);
            margin-bottom: 14px;
        }
.landing-home .museum-side .card-subtitle { color: rgba(220, 100, 130, 0.7); }
.landing-home .standard-side .card-subtitle { color: rgba(0, 200, 120, 0.6); }
.landing-home .card-divider {
            width: 32px;
            height: 1px;
            background: currentColor;
            opacity: 0.3;
            margin-bottom: 14px;
        }
.landing-home .museum-side .card-divider { color: rgba(180, 40, 80, 1); }
.landing-home .standard-side .card-divider { color: rgba(0, 200, 120, 1); }
.landing-home .card-body {
            position: relative;
            z-index: 1;
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
.landing-home .card-para-en {
            font-size: clamp(0.76rem, 0.85vw, 0.88rem);
            line-height: 1.6;
            color: rgba(255, 255, 255, 0.75);
        }
.landing-home .card-para-jp {
            font-size: 0.78rem;
            line-height: 1.55;
            color: rgba(255, 255, 255, 0.4);
        }
.landing-home .card-footer-note {
            font-size: 0.68rem;
            line-height: 1.45;
            color: rgba(255, 255, 255, 0.3);
            border-top: 1px solid rgba(255, 255, 255, 0.07);
            padding-top: 10px;
            position: relative;
            z-index: 1;
        }
.landing-home .card-cta {
            position: relative;
            z-index: 1;
            display: inline-block;
            margin-top: 14px;
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            text-decoration: none;
            padding: 9px 18px;
            border-radius: 999px;
            transition: opacity 200ms ease, transform 200ms ease, box-shadow 200ms ease;
        }
.landing-home .card-cta:hover {
            opacity: 0.88;
            transform: translateY(-1px);
        }
.landing-home .museum-side .card-cta {
            color: rgba(230, 140, 160, 0.95);
            border: 1px solid rgba(180, 40, 80, 0.45);
            background: rgba(180, 40, 80, 0.12);
            box-shadow: 0 0 18px rgba(180, 40, 80, 0.12);
        }
.landing-home .museum-side .card-cta:hover {
            box-shadow: 0 0 28px rgba(180, 40, 80, 0.28);
        }
.landing-home .standard-side .card-cta {
            color: rgba(100, 230, 170, 0.95);
            border: 1px solid rgba(0, 200, 120, 0.35);
            background: rgba(0, 200, 120, 0.08);
            box-shadow: 0 0 18px rgba(0, 200, 120, 0.08);
        }
.landing-home .standard-side .card-cta:hover {
            box-shadow: 0 0 28px rgba(0, 200, 120, 0.22);
        }
.landing-home .mode-links {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            font-size: 0.72rem;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.38);
        }
.landing-home .mode-links a {
            color: rgba(255, 255, 255, 0.5);
            text-decoration: none;
            transition: color 180ms ease;
        }
.landing-home .mode-links a:hover {
            color: rgba(255, 255, 255, 0.82);
        }
.landing-home .mode-links .sep {
            opacity: 0.35;
        }
@media (max-width: 899px) {
.landing-home .mode-cards-layout {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 20px;
                width: 100%;
            }
.landing-home .mode-cards-layout .hero-stack { order: 0; }
.landing-home .mode-cards-layout .museum-side { order: 1; }
.landing-home .mode-cards-layout .standard-side { order: 2; }
.landing-home .side-card {
                display: flex;
                width: min(100%, 420px);
                height: auto;
                min-height: 0;
            }
.landing-home .museum-side:hover,
.landing-home .standard-side:hover {
                transform: none;
            }

        
}
@media (min-width: 900px) {
.landing-home .side-card {
                width: clamp(270px, 22vw, 320px);
                margin-top: clamp(110px, 14vh, 150px);
                min-height: 530px; height: auto;
                background: var(--card-bg);
                backdrop-filter: blur(22px) saturate(1.15);
                -webkit-backdrop-filter: blur(22px) saturate(1.15);
                border-radius: 20px;
                box-shadow: 0 24px 64px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.06) inset;
                padding: 22px 18px 18px;
                display: flex;
                flex-direction: column;
                gap: 0;
                overflow: hidden;
            }
.landing-home .side-card .card-subtitle { margin-bottom: 10px; }
.landing-home .side-card .card-divider { margin-bottom: 12px; }
.landing-home .side-card .card-body { line-height: 1.5; margin-bottom: 12px; }
.landing-home .side-card .card-bullets { gap: 7px; }
.landing-home .side-card .card-bullets li { line-height: 1.4; }
.landing-home .museum-side {
                background: radial-gradient(ellipse at 50% -10%, rgba(216,59,116,0.12) 0%, transparent 60%), var(--card-bg);
                border: 1px solid var(--card-border-museum);
            }
.landing-home .standard-side {
                background: radial-gradient(ellipse at 50% -10%, rgba(33,214,160,0.1) 0%, transparent 60%), var(--card-bg);
                border: 1px solid var(--card-border-standard);
            }
.landing-home .museum-side { transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.22,1,0.36,1), box-shadow 0.7s ease; }
.landing-home .standard-side { transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.22,1,0.36,1), box-shadow 0.7s ease; }
.landing-home .museum-side:hover { transform: scale(1.02) translateY(-4px); }
.landing-home .standard-side:hover { transform: scale(1.02) translateY(-4px); }

        
}
@media (max-width: 899px) {
.landing-home .side-card {
                width: min(86%, 320px);
                height: auto;
                
                gap: 0;
                padding: 16px 14px 14px;
            }
.landing-home .side-card .card-icon { margin-bottom: 10px; }
.landing-home .side-card .card-icon svg { width: 26px; height: 26px; }
.landing-home .side-card .card-title { font-size: 0.78rem; margin-bottom: 4px; }
.landing-home .side-card .card-subtitle { font-size: 0.62rem; margin-bottom: 10px; }
.landing-home .side-card .card-divider { margin-bottom: 12px; }
.landing-home .side-card .card-body { font-size: 0.7rem; line-height: 1.55; margin-bottom: 12px; }
.landing-home .side-card .card-bullets { gap: 7px; }
.landing-home .side-card .card-bullets li { font-size: 0.66rem; gap: 7px; }
.landing-home .side-card .bullet-icon { font-size: 0.75rem; }
.landing-home .side-card .card-actions { margin-top: 14px; gap: 8px; }
.landing-home .side-card .card-cta { padding: 8px 16px; font-size: 0.66rem; }
.landing-home .side-card .card-secondary-link { font-size: 0.62rem; }

        
}
@media (min-width: 900px) {
.landing-home .mode-cards-layout {
                grid-template-columns: minmax(0, clamp(270px,22vw,320px)) 1fr minmax(0, clamp(270px,22vw,320px));
                max-width: 1440px;
            }

        
}
.landing-home .card-icon { display: flex; justify-content: center; margin-bottom: 18px; }
.landing-home .museum-icon { color: #c9a227; }
.landing-home .standard-icon { color: #f0e040; }
.landing-home .card-title {
            font-family: 'Cinzel', serif;
            font-size: clamp(0.82rem, 1.2vw, 0.98rem);
            font-weight: 700;
            letter-spacing: 0.14em;
            color: var(--text-main);
            text-align: center;
            margin: 0 0 6px;
        }
.landing-home .card-subtitle {
            font-size: 0.7rem;
            font-weight: 600;
            letter-spacing: 0.12em;
            text-align: center;
            margin: 0 0 14px;
            text-transform: uppercase;
        }
.landing-home .museum-subtitle { color: var(--museum-accent-light); }
.landing-home .standard-subtitle { color: var(--standard-accent-light); }
.landing-home .card-divider {
            height: 1px;
            margin: 0 0 16px;
            border: none;
            width: auto;
            background: none;
            opacity: 1;
        }
.landing-home .museum-divider { background: linear-gradient(90deg, transparent, var(--museum-accent), transparent); }
.landing-home .standard-divider { background: linear-gradient(90deg, transparent, var(--standard-accent), transparent); }
.landing-home .card-body {
            font-size: 0.75rem;
            line-height: 1.6;
            color: var(--text-muted);
            text-align: justify;
            text-align-last: center;
            margin: 0 0 24px;
            flex: none;
            display: block;
            gap: 0;
        }
.landing-home .card-body .card-jp { text-align: justify; text-align-last: center; }
.landing-home .side-card .card-body,
.landing-home .join-card .card-body,
.landing-home .demo-card .card-body {
            text-align: justify;
            text-align-last: center;
            margin-bottom: 24px;
        }
.landing-home .museum-side .card-body,
.landing-home .standard-side .card-body {
            margin-bottom: 30px;
        }
.landing-home .bullet-text { text-align: left; }
.landing-home .card-bullets {
            list-style: none;
            padding: 0;
            margin: 0 0 auto;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
.landing-home .card-bullets li {
            font-size: 0.72rem;
            color: var(--text-muted);
            display: flex;
            align-items: flex-start;
            gap: 8px;
            line-height: 1.5;
        }
.landing-home .bullet-icon { flex-shrink: 0; font-size: 0.85rem; opacity: 0.8; }
.landing-home .bullet-text { display: block; flex: 1; min-width: 0; }
.landing-home .card-actions {
            margin-top: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }
.landing-home .card-cta {
            display: inline-block;
            padding: 11px 22px;
            border-radius: 50px;
            font-size: 0.74rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-align: center;
            text-decoration: none;
            text-transform: uppercase;
            cursor: pointer;
            transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
            width: 100%;
            position: static;
            margin-top: 0;
        }
.landing-home .card-cta:hover {
            transform: translateY(-2px);
            filter: brightness(1.1);
            opacity: 1;
        }
.landing-home .card-cta:active { transform: translateY(0); }
.landing-home .museum-cta {
            background: var(--museum-accent-dark);
            color: #fff;
            border: 1px solid var(--museum-accent);
            box-shadow: 0 0 18px rgba(216,59,116,0.25);
        }
.landing-home .museum-cta:hover { box-shadow: 0 0 28px rgba(216,59,116,0.45); }
.landing-home .standard-cta {
            background: var(--standard-accent-dark);
            color: #fff;
            border: 1px solid var(--standard-accent);
            box-shadow: 0 0 18px rgba(33,214,160,0.2);
        }
.landing-home .standard-cta:hover { box-shadow: 0 0 28px rgba(33,214,160,0.38); }
.landing-home .card-secondary-link {
            font-size: 0.68rem;
            letter-spacing: 0.1em;
            color: var(--text-muted);
            opacity: 0.55;
            text-transform: uppercase;
            text-align: center;
            cursor: default;
        }
.landing-home .join-card .card-actions { gap: 16px; }
.landing-home .join-card .card-secondary-link { width: 100%; }
.landing-home .center-sigil {
            z-index: 0;
        }
.landing-home .aura-player {
            z-index: 1;
            position: absolute;
        }
.landing-home .avatar-img {
            position: relative;
            z-index: 3;
        }
.landing-home .center-sigil {
            position: absolute;
            width: clamp(280px, 40vw, 460px);
            height: clamp(280px, 40vw, 460px);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: rgba(198, 176, 250, 0.09);
            pointer-events: none;
            z-index: 0;
            animation: landing-sigil-slow-rotate 90s linear infinite;
            filter: drop-shadow(0 0 3px rgba(170, 130, 255, 0.1));
        }
@keyframes landing-sigil-slow-rotate {
            from { transform: translate(-50%, -50%) rotate(0deg); }
            to { transform: translate(-50%, -50%) rotate(360deg); }
        }
@media (prefers-reduced-motion: reduce) {
.landing-home .center-sigil { animation: none; }

        
}
@media (max-width: 600px) {
.landing-home .center-sigil {
                opacity: 1;
                color: rgba(200, 178, 252, 0.17);
                width: clamp(230px, 74vw, 320px);
                height: clamp(230px, 74vw, 320px);
            }

        
}
.landing-home .mode-links {
            display: flex;
            gap: 20px;
            align-items: center;
            justify-content: center;
            margin-top: 12px;
        }
.landing-home .mode-links a {
            font-size: 0.92rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: rgba(224,219,240,0.75);
            text-decoration: none;
            transition: color 0.2s;
        }
.landing-home .mode-links a:hover { color: rgba(235,230,250,1); }
.landing-home .mode-links .mode-links-sep { color: rgba(220,215,235,0.3); font-size: 0.78rem; }
.landing-home .dev-badge {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            background: rgba(20,14,35,0.7);
            border: 1px solid rgba(140,80,220,0.22);
            border-radius: 50px;
            padding: 6px 18px;
            font-size: 0.72rem;
            font-weight: 600;
            letter-spacing: 0.12em;
            color: rgba(200,190,230,0.75);
            text-transform: uppercase;
            backdrop-filter: blur(8px);
        }
.landing-home .dev-badge i {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--museum-accent-light);
            display: inline-block;
            animation: landing-pulse-dot 2s ease-in-out infinite;
            box-shadow: none;
        }
@keyframes landing-pulse-dot {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.3; }
        }
/* Same source-order issue as .mode-links (see note ~L1285): the
   unconditional .dev-badge rule above sits after every @media version of
   it, so it always won the cascade tie and the mobile shrink never
   actually applied (QA finding 2026-07-20 — badge/text far too large on
   phones). Fixing forward here instead of touching the now-dead older
   breakpoint rules. */
@media (max-width: 600px) {
.landing-home .dev-badge {
            padding: 5px 14px;
            font-size: 0.62rem;
            letter-spacing: 0.08em;
            gap: 6px;
        }
}
.landing-home .footer {
            margin-top: clamp(24px, 4svh, 48px);
        }
@media (min-width: 1600px) {
.landing-home .side-card {
            min-height: 570px; height: auto;
          }
.landing-home .card-title { font-size: 1.02rem; }
.landing-home .card-body { font-size: 0.82rem; line-height: 1.7; }
.landing-home .card-bullets li { font-size: 0.79rem; gap: 12px; margin-bottom: 2px; }
.landing-home .card-cta { padding: 14px 28px; font-size: 0.8rem; }
.landing-home .text-muted,
.landing-home .card-secondary-link { opacity: 0.72; }


}
@media (min-width: 2200px) {
.landing-home .side-card {
            min-height: 625px; height: auto;
          }
.landing-home .mode-cards-layout { gap: clamp(56px, 4vw, 100px); }
.landing-home .card-title { font-size: 1.16rem; }
.landing-home .card-body { font-size: 0.92rem; line-height: 1.75; }
.landing-home .card-bullets li { font-size: 0.86rem; }
.landing-home .hero-stack { gap: clamp(16px, 2.4svh, 32px); }
.landing-home .card-cta { padding: 15px 30px; font-size: 0.84rem; }
.landing-home .aura-player { transform: translate(-50%, -68%); }
.landing-home .footer { margin-top: clamp(40px, 6svh, 110px); }
.landing-home .top-logo { margin-top: clamp(-120px, -11svh, -70px); }

        
}
@media (min-width: 1600px) {
.landing-home .main-layout {
            display: grid;
            place-items: unset;
            justify-items: center;
            align-content: center;
            row-gap: clamp(28px, 4svh, 56px);
            padding-top: clamp(80px, 11svh, 170px);
            padding-bottom: clamp(14px, 1.8svh, 26px);
          }
.landing-home .footer {
            margin-top: 0;
          }
.landing-home .top-logo {
            margin-top: clamp(-84px, -8svh, -50px);
            margin-bottom: clamp(12px, 2svh, 28px);
          }
.landing-home .hero-stack {
            gap: clamp(16px, 2.6svh, 30px);
          }
.landing-home .center-stage {
            margin-top: clamp(8px, 1.4svh, 20px);
          }
.landing-home .side-card {
            margin-top: clamp(30px, 5svh, 70px);
          }
.landing-home .info-text {
            font-size: clamp(1.05rem, 1.3vw, 1.4rem);
          }

        
}
.landing-home .card-jp {
            display: block;
            margin-top: 4px;
            font-size: 0.82em;
            line-height: 1.5;
            color: rgba(214, 208, 230, 0.5);
            font-weight: 300;
        }
.landing-home .card-cta-disabled {
            opacity: 0.45;
            cursor: default;
            pointer-events: none;
            filter: grayscale(0.3);
        }
.landing-home .mode-link-disabled {
            font-size: 0.92rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: rgba(224, 219, 240, 0.35);
            cursor: default;
        }
.landing-home .mode-link-btn {
            appearance: none;
            background: none;
            border: none;
            padding: 0;
            font: inherit;
            font-size: 0.92rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: rgba(224, 219, 240, 0.6);
            cursor: pointer;
            transition: color 180ms ease;
        }
.landing-home .mode-link-btn:hover {
            color: rgba(255, 255, 255, 0.9);
        }
.landing-home button.card-secondary-link {
            appearance: none;
            background: none;
            border: none;
            padding: 0;
            font: inherit;
            font-size: 0.68rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            cursor: pointer;
            transition: opacity 180ms ease, color 180ms ease;
        }
.landing-home button.card-secondary-link:hover {
            opacity: 1;
            color: rgba(255, 255, 255, 0.9);
        }
.landing-home .partners-band {
            width: min(96vw, 1220px);
            margin: 36px auto 0;
            padding: 32px 40px 44px;
            border-radius: 24px;
            background: rgba(7, 11, 22, 0.66);
            backdrop-filter: blur(18px) saturate(1.1);
            -webkit-backdrop-filter: blur(18px) saturate(1.1);
            border: 1px solid rgba(0, 200, 120, 0.18);
            box-shadow:
                0 0 40px rgba(0, 200, 120, 0.05),
                0 20px 60px rgba(0, 0, 0, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.07);
            position: relative;
            overflow: hidden;
        }
.landing-home .partners-band::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            pointer-events: none;
            opacity: 0.38;
            background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.06), transparent 70%);
        }
.landing-home .partners-head {
            text-align: center;
            margin-bottom: 24px;
            position: relative;
            z-index: 1;
        }
.landing-home .partners-title {
            font-family: 'Cinzel', serif;
            font-size: clamp(0.95rem, 1.4vw, 1.2rem);
            letter-spacing: 0.14em;
            color: rgba(255, 255, 255, 0.95);
            margin-bottom: 6px;
        }
.landing-home .partners-sub {
            font-size: 0.68rem;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: rgba(0, 200, 120, 0.6);
        }
.landing-home .partners-layout {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 28px;
            position: relative;
            z-index: 1;
        }
.landing-home .partners-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 18px;
        }
.landing-home .join-card {
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 100%;
            max-width: 420px;
            min-height: 470px;
            border-radius: 20px;
            background: radial-gradient(ellipse at 50% -10%, rgba(33, 214, 160, 0.1) 0%, transparent 60%), var(--card-bg);
            border: 1px solid var(--card-border-standard);
            backdrop-filter: blur(22px) saturate(1.15);
            -webkit-backdrop-filter: blur(22px) saturate(1.15);
            padding: 30px 24px;
            box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.06) inset;
        }
.landing-home .join-card .card-icon { color: var(--standard-accent-light); }
.landing-home .join-card .card-subtitle { color: rgba(33, 214, 160, 0.7); }
.landing-home .join-card .card-divider { color: rgba(33, 214, 160, 0.8); }
.landing-home .join-card .bullet-icon { flex: 0 0 20px; text-align: center; }
@media (min-width: 900px) {
.landing-home .partners-layout {
                flex-direction: row;
                align-items: center;
                justify-content: center;
                gap: 40px;
            }
.landing-home .partners-grid { flex: 0 0 620px; }
.landing-home .join-card { flex: 0 0 420px; max-width: none; }

        
}
.landing-home .partner-card {
            margin: 0;
            text-align: center;
        }
.landing-home .partner-photo {
            width: 100%;
            aspect-ratio: 1 / 1;
            object-fit: cover;
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            filter: saturate(0.92);
            transition: transform 320ms cubic-bezier(0.23, 1, 0.32, 1),
                        box-shadow 320ms ease, filter 320ms ease;
        }
.landing-home .partner-card:hover .partner-photo {
            transform: translateY(-4px) scale(1.02);
            filter: saturate(1.05);
            box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55), 0 0 24px rgba(0, 200, 120, 0.14);
        }
.landing-home .partner-name {
            display: block;
            margin-top: 10px;
            font-size: 0.78rem;
            letter-spacing: 0.08em;
            color: rgba(255, 255, 255, 0.86);
        }
.landing-home .partner-name-jp {
            display: block;
            margin-top: 2px;
            font-size: 0.66rem;
            color: rgba(255, 255, 255, 0.4);
        }
@media (max-width: 899px) {
.landing-home .partners-band {
                width: 100%;
                padding: 24px 16px 36px;
            }
.landing-home .partners-grid {
                gap: 14px;
            }

        
}
@media (max-width: 520px) {
.landing-home .partners-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

        
}
.landing-home .demo-band {
            width: min(96vw, 1220px);
            margin: 36px auto 0;
            padding: 32px 40px 44px;
            border-radius: 24px;
            background: rgba(7, 11, 22, 0.66);
            backdrop-filter: blur(18px) saturate(1.1);
            -webkit-backdrop-filter: blur(18px) saturate(1.1);
            border: 1px solid rgba(61, 217, 255, 0.18);
            box-shadow:
                0 0 40px rgba(61, 217, 255, 0.05),
                0 20px 60px rgba(0, 0, 0, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.07);
            position: relative;
            overflow: hidden;
        }
.landing-home .demo-band::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            pointer-events: none;
            opacity: 0.38;
            background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.06), transparent 70%);
        }
.landing-home .demo-head {
            text-align: center;
            margin-bottom: 28px;
            position: relative;
            z-index: 1;
        }
.landing-home .demo-layout {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 28px;
            position: relative;
            z-index: 1;
        }
.landing-home .demo-video-wrap {
            width: min(60vw, 200px);
            aspect-ratio: 480 / 976;
            border-radius: 18px;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.12);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
            background: #03050d;
            flex-shrink: 0;
            padding: 6px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
        }
.landing-home .demo-video-wrap img,
.landing-home .demo-video-wrap video {
            /* height:103% + object-position:top (2026-07-17b): first try
               was 112%, way too aggressive — object-fit:cover zooms BOTH
               axes uniformly to fill a taller box, so it also cropped the
               side ornamental borders, not just the bottom dead zone. 103%
               trims a thin sliver off the bottom without touching the
               sides. */
            width: 100%;
            height: 100%;
            display: block;
            object-fit: contain;
            object-position: center center;
            transform: none;
        }
.landing-home .demo-video-preview-wrap {
            position: relative;
            width: min(60vw, 200px);
            aspect-ratio: 480 / 1008;
            border-radius: 18px;
            overflow: hidden;
            border: 1px solid rgba(61, 217, 255, 0.25);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 24px rgba(61, 217, 255, 0.08);
            background: #03050d;
            flex-shrink: 0;
            cursor: pointer;
            padding: 8px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
        }
.landing-home .demo-video-preview-wrap video {
            /* Centered zoom trims the source's thin black bars at both top
               and bottom while keeping the phone frame visually balanced. */
            width: 100%;
            height: 100%;
            display: block;
            object-fit: contain;
            object-position: center center;
            transform: none;
        }
.landing-home .demo-video-play-btn {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(0, 0, 0, 0.28);
            border: none;
            padding: 0;
            cursor: pointer;
            transition: background 0.2s ease;
        }
.landing-home .demo-video-play-btn svg {
            width: 46px;
            height: 46px;
            filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.6));
        }
.landing-home .demo-video-preview-wrap:hover .demo-video-play-btn,
.landing-home .demo-video-preview-wrap:focus-visible .demo-video-play-btn,
.landing-home .demo-video-preview-wrap.is-playing .demo-video-play-btn,
.landing-home .demo-video-preview-wrap.is-previewing .demo-video-play-btn {
            display: none;
        }
.landing-home .demo-card {
            width: 100%;
            max-width: 380px;
            border-radius: 20px;
            position: relative;
            isolation: isolate;
            overflow: hidden;
            background: transparent;
            border: 1px solid var(--card-border-info);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            padding: 26px 24px 50px;
            box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.06) inset;
            display: flex;
            flex-direction: column;
        }
.landing-home .demo-card::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 0;
            border-radius: inherit;
            pointer-events: none;
            background: radial-gradient(ellipse at 50% -10%, rgba(61, 217, 255, 0.1) 0%, transparent 60%), var(--card-bg);
            backdrop-filter: blur(22px) saturate(1.15);
            -webkit-backdrop-filter: blur(22px) saturate(1.15);
        }
.landing-home .demo-card > * {
            position: relative;
            z-index: 1;
        }
.landing-home .demo-card .card-actions {
            margin-top: auto;
        }
.landing-home .demo-card .card-icon { color: var(--info-accent-light); }
.landing-home .demo-card .card-subtitle { color: rgba(61, 217, 255, 0.65); }
.landing-home .demo-card .card-divider { color: rgba(61, 217, 255, 0.8); }
.landing-home .demo-card .bullet-icon { flex: 0 0 20px; text-align: center; }
.landing-home .info-cta {
            background: var(--info-accent-dark);
            color: #fff;
            border: 1px solid var(--info-accent);
            box-shadow: 0 0 18px rgba(61, 217, 255, 0.2);
        }
.landing-home .info-cta:hover { box-shadow: 0 0 28px rgba(61, 217, 255, 0.38); }
.landing-home .join-card .card-cta,
.landing-home .demo-card .card-cta {
            width: min(100%, 300px);
            padding: 9px 18px;
            font-size: 0.68rem;
            letter-spacing: 0.08em;
        }
.landing-home .google-play-badge-link {
            display: inline-block;
            line-height: 0;
        }
.landing-home .google-play-badge-link + .card-cta {
            margin-top: 14px;
        }
.landing-home .google-play-badge {
            width: 160px;
            height: auto;
            display: block;
        }
@media (min-width: 900px) {
.landing-home .demo-layout {
                flex-direction: row;
                align-items: center;
                justify-content: center;
                gap: 40px;
            }
.landing-home .demo-video-wrap,
.landing-home .demo-video-preview-wrap { width: 290px; }
.landing-home .demo-card { max-width: 420px; align-self: center; min-height: 610px; }
.landing-home .demo-card .google-play-badge-link { margin-top: 16px; }

        
}
@media (max-width: 899px) {
.landing-home .demo-band {
                width: 100%;
                padding: 24px 16px 36px;
            }

        
}
.landing-home .claim-dialog {
            width: min(96vw, 820px);
        }
.landing-home .claim-label {
            color: #21d6a0;
        }
.landing-home .claim-body {
            padding: 24px;
            overflow-y: auto;
        }
.landing-home .claim-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 16px;
        }
@media (max-width: 640px) {
.landing-home .claim-grid {
                grid-template-columns: 1fr;
            }
.landing-home .claim-grid .bug-field.full {
                grid-column: auto;
            }

        
}
.landing-home .claim-methods {
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 18px;
            background: rgba(255, 255, 255, 0.03);
            padding: 18px;
        }
.landing-home .claim-tabs {
            display: flex;
            gap: 10px;
            margin-bottom: 18px;
        }
.landing-home .claim-tab {
            flex: 1;
            appearance: none;
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 14px;
            background: rgba(255, 255, 255, 0.045);
            color: rgba(255, 255, 255, 0.6);
            font: inherit;
            font-size: 0.78rem;
            line-height: 1.35;
            padding: 12px 10px;
            cursor: pointer;
            transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
        }
.landing-home .claim-tab.active {
            border-color: rgba(33, 214, 160, 0.55);
            background: rgba(33, 214, 160, 0.1);
            color: rgba(255, 255, 255, 0.92);
        }
.landing-home .claim-tab .claim-tab-jp {
            display: block;
            font-size: 0.62rem;
            opacity: 0.6;
            margin-top: 3px;
        }
.landing-home .claim-codebox {
            border: 1px solid rgba(33, 214, 160, 0.4);
            border-radius: 14px;
            background: rgba(33, 214, 160, 0.06);
            padding: 14px 16px;
            margin-bottom: 16px;
            font-size: 0.82rem;
            line-height: 1.7;
            color: rgba(255, 255, 255, 0.82);
        }
.landing-home .claim-codebox .claim-code-display {
            color: #21d6a0;
            font-weight: 700;
            letter-spacing: 0.08em;
        }
.landing-home .claim-instruction {
            font-size: 0.78rem;
            color: rgba(255, 255, 255, 0.6);
            line-height: 1.6;
            margin-bottom: 14px;
        }
.landing-home .claim-instruction .claim-jp {
            display: block;
            font-size: 0.68rem;
            color: rgba(255, 255, 255, 0.38);
            margin-top: 4px;
        }
.landing-home #claim-signature-pad {
            background: #fff;
            width: 100%;
            height: 160px;
            border-radius: 12px;
            display: block;
            touch-action: none;
        }
.landing-home .claim-sig-tools {
            text-align: right;
            margin-top: 6px;
        }
.landing-home .claim-mini-btn {
            appearance: none;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.06);
            color: rgba(255, 255, 255, 0.75);
            font: inherit;
            font-size: 0.72rem;
            padding: 6px 14px;
            cursor: pointer;
        }
.landing-home .claim-mini-btn:hover {
            background: rgba(255, 255, 255, 0.12);
        }
.landing-home .claim-doc-btn {
            width: 100%;
            appearance: none;
            border: 1px solid rgba(95, 130, 255, 0.5);
            border-radius: 14px;
            background: rgba(60, 100, 255, 0.16);
            color: #b9c8ff;
            font: inherit;
            font-size: 0.82rem;
            font-weight: 600;
            padding: 12px;
            cursor: pointer;
            transition: background 160ms ease;
        }
.landing-home .claim-doc-btn:hover {
            background: rgba(60, 100, 255, 0.28);
        }
.landing-home .claim-preview {
            display: none;
            max-width: 100%;
            max-height: 200px;
            margin: 10px auto 0;
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.16);
        }
.landing-home .claim-terms-box p {
            color: #000;
        }
.landing-home .claim-terms-box {
            height: 250px;
            overflow-y: auto;
            border: 1px solid #999;
            border-radius: 8px;
            background: #ffffff;
            padding: 16px 18px;
            font-size: 0.8rem;
            line-height: 1.6;
            color: #000;
            
            color-scheme: light;
        }
.landing-home .claim-check {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-size: 0.78rem;
            line-height: 1.55;
            color: rgba(255, 255, 255, 0.68);
        }
.landing-home .claim-check input {
            margin-top: 3px;
            width: 16px;
            height: 16px;
            accent-color: #21d6a0;
            flex: none;
        }
.landing-home .claim-check .claim-jp {
            display: block;
            font-size: 0.66rem;
            color: rgba(255, 255, 255, 0.36);
            margin-top: 4px;
        }
.landing-home .claim-actions {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            margin-top: 20px;
            flex-wrap: wrap;
        }
.landing-home .claim-secondary {
            appearance: none;
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: 999px;
            background: transparent;
            color: rgba(255, 255, 255, 0.62);
            font: inherit;
            font-size: 0.8rem;
            padding: 11px 18px;
            cursor: pointer;
        }
.landing-home .claim-secondary:hover {
            color: white;
            border-color: rgba(255, 255, 255, 0.35);
        }
.landing-home .claim-secondary:disabled {
            opacity: 0.45;
            cursor: default;
        }
.landing-home .claim-code-step {
            text-align: center;
            padding: 12px 4px;
        }
.landing-home .claim-code-step p {
            color: rgba(255, 255, 255, 0.68);
            font-size: 0.9rem;
            line-height: 1.6;
        }
.landing-home #claim-code-input {
            display: block;
            margin: 22px auto;
            width: min(100%, 260px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.06);
            color: white;
            font-size: 1.6rem;
            letter-spacing: 0.5em;
            text-align: center;
            padding: 14px 10px 14px 20px;
            outline: none;
        }
.landing-home #claim-code-input:focus {
            border-color: rgba(33, 214, 160, 0.6);
            box-shadow: 0 0 0 4px rgba(33, 214, 160, 0.12);
        }
.landing-home .claim-done-panel {
            text-align: center;
            padding: 30px 10px;
        }
.landing-home .claim-done-panel h3 {
            font-family: 'Cinzel', serif;
            color: #21d6a0;
            font-size: 1.2rem;
            letter-spacing: 0.08em;
            margin-bottom: 12px;
        }
.landing-home .claim-done-panel p {
            color: rgba(255, 255, 255, 0.66);
            font-size: 0.88rem;
            line-height: 1.7;
        }
.landing-home .claim-ref {
            display: inline-block;
            margin: 16px 0;
            padding: 10px 22px;
            border: 1px dashed rgba(33, 214, 160, 0.5);
            border-radius: 12px;
            color: #21d6a0;
            font-size: 0.9rem;
            letter-spacing: 0.06em;
        }

/* ---------------------------------------------------------------------
   Live Visits Globe (2026-07-17) — self-contained widget (starfield +
   rotating globe + country ranking + visitor count), built and iterated
   as a standalone local demo before landing here. Sits between the hero
   mode-cards and the partners band. See modules/LiveVisitsGlobe.js.
   --------------------------------------------------------------------- */
.landing-home #live-visits-globe {
            /* Width now matches the partners-grid + join-card span below
               (620px + 40px gap + 420px = 1080px on desktop) instead of its
               own independent sizing — it sits inside .partners-band now,
               above the OFFICIAL PARTNERS title, and should visually align
               with the card edges, not float as an unrelated block. */
            position: relative;
            width: 100%;
            max-width: 1080px;
            /* +24px, then +20px more (2026-07-17b) — extra room specifically
               as breathing space between the "AROUND THE WORLD" title and
               the globe below it, on top of fitting the title itself. */
            height: min(48vh, 460px);
            /* .partners-band padding is 32px top / 44px bottom (asymmetric).
               +12px here makes the panel's gap to the band's top edge equal
               44px too, matching the gap between .join-card's bottom and
               the band's bottom edge. Bottom margin untouched, so the gap
               before "OFFICIAL PARTNERS" below stays exactly as it was. */
            margin: 12px auto clamp(28px, 4vh, 40px);
            border-radius: 28px;
            overflow: hidden;
            /* Border/vignette tuned up (2026-07-17) — the panel's true edge
               was mathematically aligned with the partner cards already
               (verified: both sit 70px from .partners-band's outer edge at
               1888px viewport), but a near-invisible border + a vignette
               that faded to near-black right at the edge made the edge
               unreadable, so it LOOKED narrower/misaligned next to the
               brightly-bordered photo cards below it. */
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: #000;
            box-shadow:
                0 40px 100px rgba(0, 0, 0, 0.65),
                inset 0 0 0 1px rgba(255, 255, 255, 0.06);
        }
.landing-home .live-globe-canvas { position: absolute; inset: 0; }
.landing-home .live-globe-title {
            position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 10;
            color: #00e5ff; font-family: 'Inter', sans-serif; font-size: 0.66rem;
            letter-spacing: 0.15em; text-transform: uppercase; opacity: 0.8;
        }
.landing-home .live-globe-vignette {
            position: absolute; inset: 0; pointer-events: none; z-index: 5;
            background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, 0.5) 80%, rgba(0, 0, 0, 0.68) 100%);
        }
.landing-home .live-globe-col {
            position: absolute; top: 20px; bottom: 20px; z-index: 10; width: 210px;
            font-family: 'Inter', sans-serif; font-size: 0.72rem;
            overflow-y: auto;
            scrollbar-width: none;
        }
.landing-home .live-globe-col::-webkit-scrollbar { display: none; }
/* 32px — more breathing room from the panel's own border, moving both
   lists further toward the globe's center. */
.landing-home #live-globe-col-left { left: 32px; }
.landing-home #live-globe-col-right { right: 32px; }
.landing-home .live-globe-col .title {
            color: #00e5ff; font-size: 0.66rem; letter-spacing: 0.15em; text-transform: uppercase;
            margin-bottom: 8px; opacity: 0.8; text-align: center;
        }
.landing-home .live-globe-col .row {
            display: flex; align-items: center; gap: 8px; color: rgba(245, 240, 255, 0.85);
            padding: 3px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.04);
            transition: background-color 0.3s ease;
        }
.landing-home .live-globe-col .row .flag.fi { width: 1.4em; height: 1em; border-radius: 2px; flex-shrink: 0; background-size: cover; }
.landing-home .live-globe-col .row .name { flex: 1; }
.landing-home .live-globe-col .row .n { color: #00e5ff; font-weight: 600; }
.landing-home .live-globe-col .row.pinged { background-color: rgba(0, 229, 255, 0.14); }
.landing-home .live-globe-caption {
            position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 10;
            font-family: 'Inter', sans-serif; font-size: 0.74rem; color: #00e5ff;
            text-shadow: 0 0 6px rgba(0, 229, 255, 0.5);
            display: flex; align-items: center; gap: 10px; white-space: nowrap;
        }
.landing-home .live-globe-caption .sep {
            opacity: 0.4; font-size: 0.6rem;
        }
.landing-home .live-globe-caption .total {
            color: rgba(245, 240, 255, 0.6); font-size: 0.72rem;
        }
.landing-home .live-globe-caption .total b { color: #00e5ff; }
/* Celular: as duas colunas absolutas (left:32 / right:32, 210px cada) se
   cruzam no meio em painel estreito — viram lista única empilhada no topo
   do card, com o globo atrás.
   Bug corrigido 2026-08-03: o wrap antigo trocava pra overflow:visible sem
   dar altura limitada, então a lista (comprida, ~20 países) vazava por trás
   da legenda "N visitantes hoje" (position:absolute; bottom:24px do card) e
   não dava pra rolar com o dedo -- overflow:visible literalmente desliga
   scroll. Agora as duas colunas ficam dentro de um wrapper único que rola
   como lista contínua, com altura limitada que já deixa espaço reservado
   pra legenda não sobrepor a última linha. */
@media (max-width: 700px) {
  .landing-home #live-visits-globe {
    height: min(64vh, 560px);
  }
  .landing-home .live-globe-col-wrap {
    position: absolute;
    top: 40px; bottom: 56px; left: 14px; right: 14px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    z-index: 10;
  }
  .landing-home .live-globe-col-wrap::-webkit-scrollbar { display: none; }
  .landing-home .live-globe-col {
    position: relative;
    top: auto; bottom: auto; left: auto; right: auto;
    width: auto;
    margin: 0;
    overflow: visible;
  }
  /* IDs vencem a classe — precisa zerar left/right no nível do ID */
  .landing-home #live-globe-col-left,
  .landing-home #live-globe-col-right { left: auto; right: auto; }
  .landing-home #live-globe-col-right .title { display: none; }
}

/* --------------------------------------------------------------------------
   Hero cards — aproximar do centro em telas largas (2026-08-11, revisado)
   A tentativa anterior alargava o #live-visits-globe/.partners-band pra
   "alcançar" o hero -- só empurrava o painel do globo pra fora sem mexer no
   globo em si, abrindo um respiro enorme entre a borda do painel e o globo
   (o padding vermelho marcado). Raiz do problema é o hero, não o globo: a
   coluna central do grid é 1fr, então em tela larga ela absorve todo espaço
   sobrando até o teto de 1440px, empurrando museum-side/standard-side pra
   longe do mascote. Travando a coluna central em 620px (mesma largura que
   o próprio comentário do live-globe já usa como referência de alinhamento:
   620+40gap+420 = 1080 = largura original do globo) e centralizando o
   conjunto, os cards laterais encostam no centro e o cluster inteiro fica
   naturalmente pertinho da largura original do .partners-band -- não
   precisa mais alargar o globo pra "alcançar" nada.
   -------------------------------------------------------------------------- */
@media (min-width: 2000px) {
  .landing-home .mode-cards-layout {
    grid-template-columns:
      minmax(0, clamp(270px, 22vw, 320px))
      minmax(0, 620px)
      minmax(0, clamp(270px, 22vw, 320px));
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   Band Index — abas de borda + drawer A-Z (2026-08-11, revisado)
   Mesma identidade vidro dos .side-card: --card-bg + o mesmo highlight
   radial no topo (via ::before, igual .side-card::before) que dá a
   sensação de vidro em vez de painel sólido, mais borda tingida por lado
   (museu/standard) em vez de cinza neutro.

   Markup mora fora de .page-view/.landing-home de propósito (direto em
   <body>, ver index.html) -- .page-view tem `will-change: transform` pra
   sua própria transição de rota, e isso vira containing block pra
   qualquer descendente `position:fixed`, fazendo as abas ficarem "presas"
   no meio do documento em vez do viewport e rolarem junto com a página.
   position:fixed só funciona certo em relação à janela quando não tem
   ancestral transformado/will-change no caminho.

   Visibilidade é via classe `band-index-active` no <body>, ligada/desligada
   pelo switchView() do router.js quando a rota é "/" -- já que o markup não
   está mais dentro do page-view pra herdar o display:none automático.

   Disponível em qualquer viewport. Abaixo de 2000px, o drawer vira um
   overlay de borda e preserva o mesmo comportamento sem depender da margem
   externa do grid central; em celulares recebe dimensões compactas.
   -------------------------------------------------------------------------- */
.band-index-tab {
  display: none;
}
@media (min-width: 1px) {
  body.band-index-active .band-index-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 60;
    width: 40px;
    height: 168px;
    background: radial-gradient(ellipse at 50% -10%, rgba(255, 255, 255, 0.05) 0%, transparent 60%), var(--card-bg);
    backdrop-filter: blur(22px) saturate(1.15);
    -webkit-backdrop-filter: blur(22px) saturate(1.15);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Cinzel', serif;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    writing-mode: vertical-rl;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
  }
  body.band-index-active .band-index-tab:hover { opacity: 1; color: #fff; }
  body.band-index-active .band-index-tab.left {
    left: 0; border-left: none; border-radius: 0 16px 16px 0;
    border-color: var(--card-border-museum);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  }
  body.band-index-active .band-index-tab.left:hover {
    box-shadow: 0 0 40px rgba(216, 59, 116, 0.14), 0 20px 60px rgba(0, 0, 0, 0.5);
  }
  body.band-index-active .band-index-tab.right {
    right: 0; border-right: none; border-radius: 16px 0 0 16px;
    border-color: var(--card-border-standard);
    writing-mode: vertical-lr;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  }
  body.band-index-active .band-index-tab.right:hover {
    box-shadow: 0 0 40px rgba(33, 214, 160, 0.14), 0 20px 60px rgba(0, 0, 0, 0.5);
  }
}

.band-index-drawer {
  display: none;
}
@media (min-width: 1px) {
  body.band-index-active .band-index-drawer {
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 61;
    /* cabe exatamente na margem real fora do grid de 1440px, com 16px de
       respiro antes da borda do side-card -- nunca maior que isso, então
       nunca sobrepõe museum-side/standard-side. */
    width: clamp(230px, calc((100vw - 1440px) / 2 - 16px), 360px);
    padding: 24px 16px;
    background: var(--card-bg);
    backdrop-filter: blur(22px) saturate(1.15);
    -webkit-backdrop-filter: blur(22px) saturate(1.15);
    /* Neutro de propósito -- uma tentativa anterior tentava tingir isso de
       rosa/verde por lado (.left/.right abaixo), mas essas regras tinham
       especificidade menor que esta e nunca venciam: a borda ficava sempre
       neste branco fraco, que contra o blur lê como uma borda branca chapada
       chamando atenção. Removido o tint -- fica só este cinza bem discreto. */
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow-y: auto;
    scrollbar-width: none;
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  }
  body.band-index-active .band-index-drawer::-webkit-scrollbar { display: none; }
  /* highlight radial no topo, igual .side-card::before, mas bem mais sutil --
     numa faixa estreita de 260-360px a mesma opacidade do .side-card (.38)
     concentra e lê como brilho/borda branca em vez de vidro. */
  body.band-index-active .band-index-drawer::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0.16;
    background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.06), transparent 70%);
  }
  body.band-index-active .band-index-drawer.left {
    left: 0; border-left: none; border-radius: 0 20px 20px 0;
    transform: translateX(-100%);
  }
  body.band-index-active .band-index-drawer.left.open {
    transform: translateX(0);
    box-shadow: 0 0 60px rgba(216, 59, 116, 0.08), 20px 0 60px rgba(0, 0, 0, 0.5);
  }
  body.band-index-active .band-index-drawer.right {
    right: 0; border-right: none; border-radius: 20px 0 0 20px;
    transform: translateX(100%);
  }
  body.band-index-active .band-index-drawer.right.open {
    transform: translateX(0);
    box-shadow: 0 0 60px rgba(33, 214, 160, 0.08), -20px 0 60px rgba(0, 0, 0, 0.5);
  }
}
.band-index-drawer-head {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; font-family: 'Cinzel', serif; font-size: 0.78rem;
  letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.9);
}
.band-index-drawer-close {
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  background: none; border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.5); font-size: 14px; line-height: 1;
}
.band-index-letter {
  position: relative; z-index: 1;
  font-family: 'Cinzel', serif; font-size: 0.68rem; letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.35); margin: 16px 0 6px;
  padding-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.band-index-letter:first-child { margin-top: 0; }
.band-index-link {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  color: rgba(255, 255, 255, 0.72); font-size: 0.85rem;
  padding: 7px 8px; border-radius: 10px; transition: 0.15s;
}
.band-index-link:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.band-index-empty {
  position: relative; z-index: 1;
  color: rgba(255, 255, 255, 0.4); font-size: 0.78rem; text-align: center; padding: 24px 8px;
}
.band-index-backdrop {
  display: none;
}
@media (min-width: 1px) {
  body.band-index-active .band-index-backdrop {
    display: block;
    position: fixed; inset: 0; z-index: 59; background: rgba(0, 0, 0, 0.4);
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
  }
  body.band-index-active .band-index-backdrop.open { opacity: 1; pointer-events: auto; }
}

/* Fade de entrada da página pública da banda quando aberta pelo Band Index
   -- escopado só nessa rota (não mexe na transição das outras) porque o
   switchView() genérico troca display:none/block, que não é animável; um
   `animation` disparado por esse toggle (display:none->block sempre reinicia
   a animation) dá o fade sem tocar no router compartilhado. */
@keyframes eel-band-page-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
#artist-profile-mount.active {
  animation: eel-band-page-fade-in 0.5s ease;
}

/* Glass band directory refinement. */
@media (min-width: 1px) {
  body.band-index-active .band-index-tab {
    width: 42px;
    height: 178px;
    overflow: hidden;
    opacity: 0.78;
    background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.012)), rgba(3,6,15,.54);
    backdrop-filter: blur(28px) saturate(1.35);
    -webkit-backdrop-filter: blur(28px) saturate(1.35);
    box-shadow: 0 22px 54px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08);
  }
  body.band-index-active .band-index-tab::before {
    content: "";
    position: absolute;
    inset: 10px 7px;
    border-radius: 999px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.045), transparent 48%);
  }
  body.band-index-active .band-index-tab span { position: relative; z-index: 1; }
  body.band-index-active .band-index-tab.left {
    border-color: rgba(180,200,225,.1);
    box-shadow: 14px 0 42px rgba(120,155,185,.025), 0 22px 54px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.07);
  }
  body.band-index-active .band-index-tab.right {
    border-color: rgba(180,200,225,.1);
    box-shadow: -14px 0 42px rgba(120,155,185,.025), 0 22px 54px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.07);
  }
  body.band-index-active .band-index-tab.left:hover,
  body.band-index-active .band-index-tab.right:hover {
    border-color: rgba(200,215,235,.16);
    box-shadow: 0 0 34px rgba(135,165,190,.045), 0 20px 60px rgba(0,0,0,.46);
  }
  body.band-index-active .band-index-tab[aria-expanded="true"] { opacity: 0; pointer-events: none; }

  body.band-index-active .band-index-drawer {
    top: 56px;
    bottom: 18px;
    width: clamp(330px, 18vw, 370px);
    padding: 0;
    overflow: hidden;
    isolation: isolate;
    border: 0;
    background:
      radial-gradient(ellipse 120% 52% at 0% 12%, rgba(120,155,185,.055), transparent 64%),
      linear-gradient(115deg, rgba(218,236,248,.045), rgba(255,255,255,.006) 52%),
      rgba(4,7,17,.3);
    backdrop-filter: blur(12px) saturate(1.18);
    -webkit-backdrop-filter: blur(12px) saturate(1.18);
    transition: transform .48s cubic-bezier(.22,1,.36,1), opacity .25s ease, backdrop-filter .35s ease;
  }
  body.band-index-active .band-index-drawer::before {
    z-index: -1;
    opacity: .42;
    background:
      radial-gradient(circle at 0% 18%, rgba(150,175,200,.05), transparent 32%),
      radial-gradient(circle at 100% 82%, rgba(190,210,230,.03), transparent 34%),
      repeating-linear-gradient(118deg, rgba(255,255,255,.012) 0 1px, transparent 1px 10px);
  }
  body.band-index-active .band-index-drawer::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.065), inset 0 0 56px rgba(72,113,146,.025);
  }
  body.band-index-active .band-index-drawer.left {
    left: 0;
    border-top: 1px solid rgba(180,200,225,.055);
    border-right: 1px solid rgba(180,200,225,.1);
    border-bottom: 1px solid rgba(180,200,225,.055);
    border-radius: 0 24px 24px 0;
    transform: translateX(-100%) scaleX(.985);
    transform-origin: left center;
  }
  body.band-index-active .band-index-drawer.left.open {
    transform: translateX(0) scale(1);
    box-shadow: 30px 0 78px rgba(0,0,0,.25), 18px 0 52px rgba(100,135,165,.025), inset -1px 0 rgba(220,235,248,.04);
  }
  body.band-index-active .band-index-drawer.right {
    right: 0;
    border-top: 1px solid rgba(180,200,225,.055);
    border-bottom: 1px solid rgba(180,200,225,.055);
    border-left: 1px solid rgba(180,200,225,.1);
    border-radius: 24px 0 0 24px;
    transform: translateX(100%) scaleX(.985);
    transform-origin: right center;
    background:
      radial-gradient(ellipse 120% 52% at 100% 12%, rgba(120,155,185,.055), transparent 64%),
      linear-gradient(245deg, rgba(218,236,248,.045), rgba(255,255,255,.006) 52%),
      rgba(4,7,17,.3);
  }
  body.band-index-active .band-index-drawer.right.open {
    transform: translateX(0) scale(1);
    box-shadow: -30px 0 78px rgba(0,0,0,.25), -18px 0 52px rgba(100,135,165,.025), inset 1px 0 rgba(220,235,248,.04);
  }
  body.band-index-active .band-index-backdrop {
    background: rgba(0,0,0,.055);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.band-index-drawer-head {
  min-height: 94px;
  margin: 0;
  padding: 24px 22px 16px 24px;
  border-bottom: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.025), transparent);
}
.band-index-heading { min-width: 0; }
.band-index-kicker {
  display: block;
  margin-bottom: 8px;
  color: rgba(226,237,245,.38);
  font: 600 .58rem/1 'Inter', sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.band-index-title-row { display: flex; align-items: center; gap: 10px; }
.band-index-title-row h2 {
  margin: 0;
  color: rgba(255,255,255,.94);
  font: 400 1rem/1.1 'Cinzel', serif;
  letter-spacing: .13em;
}
.band-index-count {
  display: inline-block;
  min-width: 0;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(255,255,255,.4);
  font: 600 .58rem/1 'Inter', sans-serif;
  letter-spacing: .04em;
  text-transform: lowercase;
}
.band-index-drawer-close {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-color: rgba(255,255,255,.1);
  background: rgba(255,255,255,.025);
  color: rgba(255,255,255,.62);
  font: 300 1.05rem/1 'Inter', sans-serif;
  transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}
.band-index-drawer-close:hover,
.band-index-drawer-close:focus-visible {
  outline: none;
  border-color: rgba(255,255,255,.25);
  background: rgba(255,255,255,.09);
  color: #fff;
  transform: rotate(4deg) scale(1.04);
}
.band-index-search {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  margin: 0 18px 10px;
  padding: 0 13px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 10px;
  background: rgba(0,0,0,.12);
  box-shadow: inset 0 1px rgba(255,255,255,.025);
  color: rgba(255,255,255,.28);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.band-index-search:focus-within {
  border-color: rgba(129,181,211,.2);
  background: rgba(0,0,0,.17);
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 0 22px rgba(40,105,145,.055);
}
.band-index-search i { font-size: .62rem; }
.band-index-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: rgba(255,255,255,.78);
  font: 400 .72rem/1 'Inter', sans-serif;
  letter-spacing: .02em;
}
.band-index-search input::placeholder { color: rgba(255,255,255,.3); }
.band-index-search input::-webkit-search-cancel-button { filter: invert(1); opacity: .35; }
.band-index-list {
  position: relative;
  z-index: 1;
  height: calc(100% - 144px);
  overflow-y: auto;
  padding: 2px 12px 24px 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.12) transparent;
}
.band-index-list::-webkit-scrollbar { width: 4px; }
.band-index-list::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(255,255,255,.12); }
.band-index-letter {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 4px 2px;
  padding: 6px 2px 4px;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.42);
  font-size: .58rem;
  letter-spacing: .13em;
}
.band-index-letter:first-child { margin-top: 0; }
.band-index-letter-line { height: 1px; flex: 1; background: linear-gradient(90deg, rgba(255,255,255,.12), transparent); }
.band-index-link {
  width: 100%;
  min-height: 80px;
  gap: 14px;
  padding: 8px 9px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.038);
  border-radius: 9px;
  background: transparent;
  text-align: left;
  font-family: 'Inter', sans-serif;
  transition: background .18s ease, transform .18s ease;
}
.band-index-link + .band-index-link { margin-top: 1px; }
.band-index-link:hover,
.band-index-link:focus-visible {
  outline: none;
  background: linear-gradient(90deg, rgba(255,255,255,.052), rgba(255,255,255,.012));
  transform: translateX(2px);
}
.band-index-link-image {
  position: relative;
  flex: 0 0 56px;
  width: 56px;
  height: 64px;
  overflow: hidden;
  border-radius: 7px;
  background: rgba(255,255,255,.035);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.band-index-link-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 1px rgba(255,255,255,.09);
}
.band-index-link-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.82) contrast(1.03);
  transition: transform .22s ease, filter .22s ease;
}
.band-index-link:hover .band-index-link-image img,
.band-index-link:focus-visible .band-index-link-image img {
  transform: scale(1.035);
  filter: saturate(1) contrast(1.04);
}
.band-index-link-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 4px;
}
.band-index-link-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.band-index-link-name {
  min-width: 0;
  flex: 1;
  overflow-wrap: anywhere;
  color: rgba(245,248,252,.86);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .01em;
}
.band-index-link-jp {
  overflow: hidden;
  color: rgba(255,255,255,.37);
  font: 400 .62rem/1.2 'Zen Maru Gothic', sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.band-index-link-meta,
.band-index-link-archive {
  overflow: hidden;
  color: rgba(255,255,255,.42);
  font: 400 .68rem/1.25 'Inter', sans-serif;
  letter-spacing: .01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.band-index-link-archive {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,.31);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: .56rem;
  font-weight: 600;
}
.band-index-link-dot {
  width: 4px;
  height: 4px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(185,205,225,.42);
  box-shadow: 0 0 7px rgba(150,180,205,.12);
}
.band-index-link-arrow {
  margin-left: auto;
  flex: 0 0 auto;
  color: rgba(255,255,255,.2);
  font-size: .72rem;
  transform: translate(-2px, 2px);
  transition: color .18s ease, transform .18s ease;
}
.band-index-link:hover .band-index-link-name,
.band-index-link:focus-visible .band-index-link-name { color: #fff; }
.band-index-link:hover .band-index-link-arrow,
.band-index-link:focus-visible .band-index-link-arrow { color: rgba(255,255,255,.72); transform: translate(0); }
.band-index-drawer.left .band-index-link-dot { background: rgba(185,205,225,.42); box-shadow: 0 0 7px rgba(150,180,205,.12); }
.band-index-drawer.open .band-index-link {
  animation: eel-band-row-reveal .34s backwards;
  animation-delay: calc(var(--band-row-index, 0) * 24ms + 80ms);
}
@keyframes eel-band-row-reveal {
  from { opacity: 0; transform: translateX(-7px); }
  to { opacity: 1; transform: translateX(0); }
}
.band-index-drawer.right.open .band-index-link { animation-name: eel-band-row-reveal-right; }
@keyframes eel-band-row-reveal-right {
  from { opacity: 0; transform: translateX(7px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Compact edge controls for phones and narrow tablets. The directory remains
   available instead of disappearing at a breakpoint, while the open drawer
   always leaves a small piece of the page visible for spatial context. */
@media (max-width: 599px) {
  body.band-index-active .band-index-tab {
    width: 30px;
    height: 112px;
    font-size: .56rem;
    letter-spacing: .12em;
    border-radius: 0 12px 12px 0;
    opacity: .68;
  }
  body.band-index-active .band-index-tab.right {
    border-radius: 12px 0 0 12px;
  }
  body.band-index-active .band-index-drawer {
    top: max(48px, env(safe-area-inset-top));
    bottom: max(8px, env(safe-area-inset-bottom));
    width: min(330px, calc(100vw - 36px));
    border-radius: 0 18px 18px 0;
  }
  body.band-index-active .band-index-drawer.right {
    border-radius: 18px 0 0 18px;
  }
  .band-index-drawer-head {
    min-height: 82px;
    padding: 18px 16px 12px 18px;
  }
  .band-index-search {
    height: 38px;
    margin-inline: 12px;
  }
  .band-index-list {
    height: calc(100% - 130px);
    padding-inline: 10px;
  }
  .band-index-link {
    min-height: 72px;
    gap: 10px;
    padding-inline: 6px;
  }
  .band-index-link-image {
    flex-basis: 48px;
    width: 48px;
    height: 56px;
  }
  .band-index-link-name { font-size: .82rem; }
  .band-index-link-meta { font-size: .62rem; }
}

@media (prefers-reduced-motion: reduce) {
  .band-index-drawer,
  .band-index-tab,
  .band-index-backdrop,
  .band-index-link { transition-duration: .01ms !important; }
}

/* Full HD desktop density (native CSS, no page scaling).
   The >= 2200px / 2K composition remains untouched. */
@media (min-width: 1600px) and (max-width: 2199px) {
  .landing-home .mode-cards-layout {
    width: min(100%, 1152px);
    max-width: 1152px;
    grid-template-columns: minmax(0, 256px) minmax(0, 496px) minmax(0, 256px);
    gap: 72px;
  }

  .landing-home .mode-cards-layout .hero-stack {
    width: 496px;
    max-width: 496px;
    gap: clamp(13px, 2.1svh, 25px);
  }

  .landing-home .top-logo { width: clamp(320px, min(32vw, 34svh), 400px); }
  .landing-home .center-stage { width: clamp(280px, min(25vw, 31svh), 336px); }
  .landing-home .info-container { gap: 9px; }
  .landing-home .info-text { font-size: clamp(.9rem, 1.05vw, 1.12rem); }

  .landing-home .side-card {
    width: 100%;
    min-height: 500px;
    margin-top: clamp(36px, 4.2svh, 56px);
    padding: 18px 15px 15px;
    border-radius: 17px;
  }

  .landing-home .side-card .card-icon { margin-bottom: 14px; }
  .landing-home .side-card .card-title { font-size: .84rem; }
  .landing-home .side-card .card-subtitle { font-size: .6rem; }
  .landing-home .side-card .card-body { font-size: .7rem; line-height: 1.55; }
  .landing-home .side-card .card-bullets li { font-size: .67rem; gap: 8px; }
  .landing-home .side-card .card-cta { padding: 10px 22px; font-size: .68rem; }

  body.band-index-active .band-index-drawer {
    top: 88px;
    bottom: 24px;
    width: clamp(270px, 15vw, 300px);
  }

  .band-index-drawer-head { min-height: 78px; padding: 19px 17px 13px 20px; }
  .band-index-title-row h2 { font-size: .86rem; }
  .band-index-drawer-close { width: 29px; height: 29px; }
  .band-index-search { height: 35px; margin: 0 15px 8px; }
  .band-index-list { height: calc(100% - 121px); padding: 2px 10px 20px 12px; }
  .band-index-link { min-height: 68px; gap: 11px; padding: 7px; }
  .band-index-link-image { flex-basis: 48px; width: 48px; height: 55px; }
  .band-index-link-name { font-size: .78rem; }
  .band-index-link-jp { font-size: .56rem; }
  .band-index-link-meta { font-size: .59rem; }
  .band-index-link-archive { font-size: .5rem; }

  .landing-home .partners-band {
    width: min(calc(100vw - 80px), 1000px);
    margin-top: 30px;
    padding: 26px 33px 36px;
    border-radius: 20px;
  }

  /* Keep the two large landing bands on the same Full HD grid. The partners
     band was compacted earlier, but the app demo was still using its 1220px
     desktop dimensions, which made only the lower outer card grow wider. */
  .landing-home .demo-band {
    width: min(calc(100vw - 80px), 1000px);
    margin-top: 30px;
    padding: 26px 33px 36px;
    border-radius: 20px;
  }

  .landing-home .demo-head { margin-bottom: 23px; }
  .landing-home .demo-layout { gap: 33px; }
  .landing-home .demo-video-wrap,
  .landing-home .demo-video-preview-wrap { width: 238px; }
  .landing-home .demo-card {
    max-width: 370px;
    height: auto;
    min-height: 0;
    align-self: center;
    border-radius: 17px;
    padding: 20px 20px 24px;
  }
  .landing-home .demo-card .card-icon { margin-bottom: 10px; }
  .landing-home .demo-card .card-subtitle { margin-bottom: 10px; }
  .landing-home .demo-card .card-divider { margin-bottom: 10px; }
  .landing-home .demo-card .card-body { margin-bottom: 14px; }
  .landing-home .demo-card .card-bullets { gap: 7px; }
  .landing-home .demo-card .card-actions { margin-top: 12px; gap: 8px; }
  .landing-home .demo-card .google-play-badge-link { margin-top: 10px; }

  .landing-home #live-visits-globe {
    max-width: 886px;
    height: min(39vh, 377px);
    margin: 10px auto clamp(23px, 3.2vh, 33px);
    border-radius: 23px;
  }

  .landing-home .partners-head { margin-bottom: 20px; }
  .landing-home .partners-layout { gap: 33px; }
  .landing-home .partners-grid {
    flex: 0 0 508px;
    gap: 15px;
  }
  .landing-home .join-card {
    flex: 0 0 344px;
    min-height: 430px;
    padding: 25px 20px;
    border-radius: 17px;
  }
  .landing-home .join-card .card-icon { margin-bottom: 12px; }
  .landing-home .join-card .card-icon svg { width: 28px; height: 28px; }
  .landing-home .join-card .card-title { margin-bottom: 5px; font-size: .84rem; }
  .landing-home .join-card .card-subtitle { margin-bottom: 9px; font-size: .6rem; }
  .landing-home .join-card .card-divider { margin-bottom: 10px; }
  .landing-home .join-card .card-body {
    margin-bottom: 14px;
    font-size: .7rem;
    line-height: 1.55;
  }
  .landing-home .join-card .card-bullets { gap: 7px; }
  .landing-home .join-card .card-bullets li {
    gap: 8px;
    font-size: .62rem;
    line-height: 1.45;
  }
  .landing-home .join-card .card-actions { margin-top: 14px; gap: 16px; }
  .landing-home .join-card .card-cta { padding: 9px 18px; font-size: .66rem; }
  .landing-home .join-card .card-secondary-link { font-size: .58rem; }
  .landing-home .partner-name { margin-top: 8px; font-size: .68rem; }
  .landing-home .partner-name-jp { font-size: .58rem; }
}

/* Keep the archive drawers clear of the fixed desktop header at 2K too.
   Widths and all page composition above this breakpoint remain unchanged. */
@media (min-width: 2200px) {
  body.band-index-active .band-index-drawer {
    top: 88px;
    bottom: 24px;
    width: clamp(320px, 17vw, 350px);
  }
}