@layer components {
    .btn, .nav-cta {
        position: relative;
        isolation: isolate;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 52px;
        padding: 0 27px;
        border: 0;
        clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% 50%, calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 50%);
        background: var(--cyan);
        color: var(--cyan-deep);
        text-align: center;
        letter-spacing: .1em;
        text-transform: uppercase;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        transition: background-color .18s ease, color .18s ease, filter .18s ease, translate .18s ease;
    }
    .btn--secondary, .btn.secondary { color: var(--cyan); }
    .btn--secondary::before, .btn.secondary::before {
        content: '';
        position: absolute;
        z-index: -1;
        inset: 2px;
        clip-path: inherit;
        background: rgba(0,50,51,.8);
    }
    .btn:hover, .nav-cta:hover {
        background: #8dffff;
        color: var(--cyan-deep);
        translate: 0 -3px;
        filter: drop-shadow(0 0 9px rgba(51,251,255,.9));
    }
    .btn--secondary:hover, .btn.secondary:hover { color: #8dffff; }
    .btn:active, .nav-cta:active { translate: none; filter: brightness(.88); }
    .btn:focus-visible, .nav-cta:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
    .nav-cta { min-height: 39px; padding: 0 20px; font-size: 11px; }
    .scroll-cue {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        width: fit-content;
        margin: 34px auto 0;
        padding: 12px 22px;
        color: var(--white);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .16em;
        text-align: center;
        transition: color .18s ease;
    }
    .scroll-cue:hover, .scroll-cue:focus-visible { color: var(--cyan); }
    .scroll-cue__chevron {
        width: 24px;
        height: 24px;
        border-right: 2px solid var(--lime);
        border-bottom: 2px solid var(--lime);
        transform: rotate(45deg);
        animation: cue-bob 2.2s ease-in-out infinite;
    }
    .nav-links > a:not(.nav-cta) { font-weight: 700; }
}
@layer motion {
    @keyframes cue-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 5px; } }
    @media (prefers-reduced-motion: reduce) {
        .scroll-cue__chevron { animation: none; }
        .btn, .nav-cta { transition: none; }
        .btn:hover, .nav-cta:hover { translate: none; }
    }
}

@layer components {
    .theme-magenta {
        --accent: #FF0055;
        --accent-hover: #ff75a3;
        --accent-deep: #330011;
        --accent-glow: rgba(255,0,85,.75);
    }
    .theme-magenta .btn--primary,
    .theme-magenta .nav-cta {
        background: var(--accent);
        color: var(--accent-deep);
    }
    .theme-magenta .btn--primary:hover,
    .theme-magenta .nav-cta:hover {
        background: var(--accent-hover);
        color: var(--accent-deep);
        filter: drop-shadow(0 0 9px var(--accent-glow));
    }
    
    .theme-magenta a:not(.btn):not(.nav-cta):not(.scroll-cue):not(.studio-home) {
        color: var(--accent);
        text-decoration: none;
    }
    .theme-magenta a:not(.btn):not(.nav-cta):not(.scroll-cue):not(.studio-home):hover,
    .theme-magenta a:not(.btn):not(.nav-cta):not(.scroll-cue):not(.studio-home):focus-visible {
        color: var(--accent-hover);
        text-decoration: underline;
        text-decoration-color: currentColor;
        text-decoration-thickness: 2px;
        text-underline-offset: 5px;
    }
    .theme-game .btn:focus-visible,
    .theme-game .nav-cta:focus-visible {
        outline: none;
        filter: drop-shadow(0 0 6px #fff);
        background: #fff;
    }
}

@layer layout {
    .site-footer { position:relative; z-index:8; padding:54px clamp(24px,6vw,88px); border-top:1px solid rgba(255,255,255,.13); background:rgba(2,9,8,.94); }
    .site-footer .footer-inner { width:min(var(--max),100%); margin:auto; display:flex; align-items:center; gap:25px; }
    .site-footer .fig-mark { width:52px; height:auto; }
    .site-footer .footer-copy { color:rgba(255,255,255,.5); font-size:13px; line-height:1.7; }
    .site-footer .footer-title { color:#fff; }
    .site-footer .footer-links { margin-left:auto; display:flex; gap:22px; font-size:12px; text-transform:uppercase; letter-spacing:.09em; }
}
@layer responsive {
    @media(max-width:850px) { .site-footer .footer-inner { flex-wrap:wrap; } .site-footer .footer-links { margin-left:0; width:100%; } }
}