/* STF Showcase layer: extra demo sections and demo lab page */
.nav-links a.active-nav,
.footer-links a.active-nav {
    color: var(--gold-2);
}
.hero-cta .btn-ghost {
    background: linear-gradient(135deg, rgba(244,200,107,.11), rgba(96,215,255,.09));
}
.demo-expansion-section {
    position: relative;
    overflow: hidden;
}
.demo-expansion-section::before {
    content: "";
    position: absolute;
    inset: 7% 0 auto auto;
    width: 46vw;
    height: 46vw;
    min-width: 420px;
    min-height: 420px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(96,215,255,.22), transparent 67%);
    filter: blur(20px);
    pointer-events: none;
}
.demo-expansion-shell {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
    gap: 34px;
    align-items: center;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--radius-xl);
    padding: clamp(22px, 4vw, 48px);
    background:
        linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.035)),
        radial-gradient(circle at 100% 0%, rgba(244,200,107,.14), transparent 36%);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.demo-expansion-copy h2 {
    margin: 12px 0 18px;
    font-size: clamp(2.4rem, 5vw, 5.4rem);
    line-height: .9;
    letter-spacing: -.07em;
}
.demo-expansion-copy p {
    max-width: 620px;
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.72;
}
.demo-expansion-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}
.demo-expansion-board {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.demo-orbit-card {
    position: relative;
    min-height: 178px;
    padding: 22px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 24px;
    background: rgba(8,10,18,.46);
    overflow: hidden;
}
.demo-orbit-card::before {
    content: "";
    position: absolute;
    right: -44px;
    top: -44px;
    width: 132px;
    height: 132px;
    border: 1px solid rgba(244,200,107,.42);
    border-radius: 999px;
    box-shadow: inset 0 0 34px rgba(244,200,107,.13), 0 0 34px rgba(96,215,255,.13);
}
.demo-orbit-card strong {
    display: block;
    margin-bottom: 12px;
    font-size: 1.16rem;
    letter-spacing: -.03em;
}
.demo-orbit-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.58;
}
.demo-orbit-card span {
    display: inline-flex;
    margin-bottom: 18px;
    color: #08101b;
    background: linear-gradient(135deg, var(--gold-2), var(--blue));
    border-radius: 999px;
    padding: 8px 12px;
    font-size: .78rem;
    font-weight: 950;
    letter-spacing: .04em;
}
.demo-page .site-header { backdrop-filter: blur(22px); }
.demo-hero {
    position: relative;
    padding: 96px 0 70px;
    overflow: hidden;
}
.demo-hero::after {
    content: "";
    position: absolute;
    inset: 12% auto auto 50%;
    width: 680px;
    height: 680px;
    transform: translateX(-4%);
    border-radius: 999px;
    background: conic-gradient(from 180deg, rgba(244,200,107,.18), rgba(96,215,255,.2), rgba(217,135,255,.1), rgba(244,200,107,.18));
    filter: blur(80px);
    opacity: .62;
    pointer-events: none;
}
.demo-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
    gap: 46px;
    align-items: center;
}
.demo-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 999px;
    color: var(--gold-2);
    background: rgba(255,255,255,.06);
    font-size: .82rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.demo-kicker::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 6px rgba(86,240,164,.12);
}
.demo-title {
    margin: 18px 0 22px;
    font-size: clamp(4rem, 9vw, 8.8rem);
    line-height: .78;
    letter-spacing: -.09em;
}
.demo-title span {
    display: block;
    color: transparent;
    background: linear-gradient(135deg, var(--gold-2), var(--gold), var(--blue));
    -webkit-background-clip: text;
    background-clip: text;
}
.demo-lead {
    max-width: 640px;
    color: var(--muted);
    font-size: clamp(1.03rem, 2vw, 1.25rem);
    line-height: 1.72;
}
.demo-hero-actions,
.showcase-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}
.demo-stat-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 34px;
}
.demo-stat {
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 20px;
    padding: 16px;
    background: rgba(255,255,255,.055);
}
.demo-stat strong {
    display: block;
    font-size: 1.5rem;
    line-height: 1;
}
.demo-stat span {
    display: block;
    margin-top: 8px;
    color: var(--muted-2);
    font-size: .82rem;
}
.browser-shell,
.interface-screen,
.brand-board,
.roadmap-shell {
    border: 1px solid rgba(255,255,255,.14);
    background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.035));
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
}
.browser-shell {
    position: relative;
    min-height: 610px;
    border-radius: 34px;
    padding: 18px;
    overflow: hidden;
}
.browser-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(125deg, transparent 0%, rgba(255,255,255,.14) 34%, transparent 52%);
    transform: translateX(-100%);
    animation: demoSheen 7s ease-in-out infinite;
    pointer-events: none;
}
.browser-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    height: 52px;
    padding: 0 16px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 22px;
    background: rgba(8,10,18,.52);
}
.browser-dots { display: inline-flex; gap: 7px; }
.browser-dots i {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.28);
}
.browser-url {
    flex: 1;
    max-width: 420px;
    border-radius: 999px;
    padding: 9px 14px;
    color: var(--muted-2);
    background: rgba(255,255,255,.06);
    font-size: .82rem;
}
.browser-pill {
    color: #09111c;
    background: linear-gradient(135deg, var(--gold-2), var(--blue));
    border-radius: 999px;
    padding: 9px 12px;
    font-size: .78rem;
    font-weight: 950;
}
.browser-body {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 14px;
    margin-top: 14px;
}
.browser-sidebar {
    min-height: 492px;
    border-radius: 24px;
    padding: 16px;
    background: rgba(8,10,18,.47);
    border: 1px solid rgba(255,255,255,.08);
}
.sidebar-logo {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #07101a;
    background: linear-gradient(135deg, var(--gold-2), var(--blue));
    font-weight: 950;
    letter-spacing: .08em;
}
.side-line,
.side-line-small {
    display: block;
    height: 12px;
    margin-top: 20px;
    border-radius: 99px;
    background: rgba(255,255,255,.13);
}
.side-line:nth-child(3) { width: 80%; }
.side-line:nth-child(4) { width: 64%; }
.side-line-small { width: 42%; opacity: .65; }
.browser-dashboard {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.browser-card {
    min-height: 152px;
    border-radius: 24px;
    padding: 20px;
    background: rgba(255,255,255,.075);
    border: 1px solid rgba(255,255,255,.09);
}
.browser-card.wide { grid-column: 1 / -1; min-height: 190px; }
.browser-card h3,
.browser-card p { margin: 0; }
.browser-card h3 { font-size: 1.08rem; }
.browser-card p {
    margin-top: 10px;
    color: var(--muted);
    line-height: 1.55;
}
.mini-chart {
    display: flex;
    align-items: end;
    gap: 8px;
    height: 72px;
    margin-top: 18px;
}
.mini-chart i {
    flex: 1;
    min-width: 10px;
    border-radius: 999px 999px 4px 4px;
    background: linear-gradient(180deg, var(--gold), rgba(96,215,255,.74));
    animation: barRise 2.2s ease-in-out infinite alternate;
}
.mini-chart i:nth-child(2) { animation-delay: -.2s; }
.mini-chart i:nth-child(3) { animation-delay: -.5s; }
.mini-chart i:nth-child(4) { animation-delay: -.9s; }
.demo-ring {
    position: relative;
    width: 124px;
    height: 124px;
    margin-top: 12px;
    border-radius: 999px;
    background: conic-gradient(var(--gold) 0 78%, rgba(255,255,255,.12) 78% 100%);
    display: grid;
    place-items: center;
}
.demo-ring::after {
    content: "86%";
    width: 88px;
    height: 88px;
    display: grid;
    place-items: center;
    border-radius: inherit;
    background: #0b0f1e;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 950;
}
.wide-flow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 22px;
}
.wide-flow span {
    position: relative;
    min-height: 80px;
    border-radius: 18px;
    padding: 14px;
    background: rgba(255,255,255,.08);
    color: var(--text);
    font-weight: 800;
    font-size: .9rem;
}
.wide-flow span::after {
    content: "";
    position: absolute;
    right: -13px;
    top: 50%;
    width: 18px;
    height: 2px;
    background: rgba(244,200,107,.6);
}
.wide-flow span:last-child::after { display: none; }
.showcase-strip {
    border-top: 1px solid rgba(255,255,255,.09);
    border-bottom: 1px solid rgba(255,255,255,.09);
    padding: 24px 0;
    overflow: hidden;
    background: rgba(255,255,255,.035);
}
.showcase-strip-track {
    display: flex;
    gap: 42px;
    min-width: max-content;
    animation: ticker 28s linear infinite;
    color: rgba(255,255,255,.52);
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.showcase-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.showcase-card {
    position: relative;
    min-height: 320px;
    padding: 26px;
    border-radius: 30px;
    border: 1px solid rgba(255,255,255,.13);
    background: rgba(255,255,255,.062);
    overflow: hidden;
}
.showcase-card::before {
    content: attr(data-index);
    position: absolute;
    right: 20px;
    top: 18px;
    color: rgba(255,255,255,.08);
    font-size: 4.4rem;
    line-height: 1;
    font-weight: 950;
}
.showcase-card-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    color: #07101a;
    background: linear-gradient(135deg, var(--gold-2), var(--blue));
    font-weight: 950;
}
.showcase-card h3 {
    margin: 24px 0 12px;
    font-size: 1.28rem;
}
.showcase-card p {
    color: var(--muted);
    line-height: 1.62;
    margin: 0;
}
.interface-lab {
    display: grid;
    grid-template-columns: minmax(260px, .36fr) minmax(0, 1fr);
    gap: 20px;
    align-items: stretch;
}
.demo-tabs {
    display: grid;
    gap: 12px;
}
.demo-tab {
    text-align: left;
    min-height: 84px;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 22px;
    background: rgba(255,255,255,.055);
    color: var(--text);
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.demo-tab:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.24); }
.demo-tab.is-active {
    background: linear-gradient(135deg, rgba(244,200,107,.2), rgba(96,215,255,.14));
    border-color: rgba(244,200,107,.38);
}
.demo-tab strong { display: block; margin-bottom: 6px; }
.demo-tab span { color: var(--muted-2); font-size: .88rem; }
.interface-screen {
    min-height: 620px;
    border-radius: 34px;
    padding: 20px;
    overflow: hidden;
}
.demo-tab-panel { display: none; }
.demo-tab-panel.is-active { display: block; animation: panelIn .35s ease both; }
.panel-visual {
    display: grid;
    grid-template-columns: 1fr .58fr;
    gap: 16px;
    min-height: 580px;
}
.panel-main,
.panel-side,
.chat-panel,
.token-panel,
.admin-panel {
    border-radius: 28px;
    border: 1px solid rgba(255,255,255,.11);
    background: rgba(8,10,18,.45);
    padding: 22px;
}
.panel-main h3,
.panel-side h3,
.chat-panel h3,
.token-panel h3,
.admin-panel h3 {
    margin: 0 0 16px;
    font-size: 1.3rem;
}
.protocol-list { display: grid; gap: 12px; }
.protocol-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255,255,255,.07);
    color: var(--muted);
}
.protocol-row strong { color: var(--text); }
.body-map {
    position: relative;
    min-height: 260px;
    border-radius: 24px;
    background: radial-gradient(circle at 50% 20%, rgba(244,200,107,.22), transparent 38%), rgba(255,255,255,.045);
    overflow: hidden;
}
.body-map::before,
.body-map::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,.36), rgba(255,255,255,.06));
}
.body-map::before { top: 32px; width: 72px; height: 72px; }
.body-map::after { top: 104px; width: 116px; height: 160px; }
.body-map i {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: var(--gold);
    box-shadow: 0 0 0 12px rgba(244,200,107,.12);
    animation: pulseDot 1.8s ease-in-out infinite;
}
.body-map i:nth-child(1) { left: 43%; top: 132px; }
.body-map i:nth-child(2) { left: 57%; top: 190px; animation-delay: -.35s; background: var(--blue); }
.body-map i:nth-child(3) { left: 48%; top: 92px; animation-delay: -.7s; background: var(--green); }
.admin-kanban {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.kanban-col {
    border-radius: 24px;
    padding: 16px;
    background: rgba(255,255,255,.055);
    min-height: 420px;
}
.kanban-col h4 { margin: 0 0 14px; color: var(--muted); }
.kanban-card {
    padding: 14px;
    border-radius: 18px;
    margin-bottom: 10px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.08);
}
.kanban-card strong { display: block; }
.kanban-card span { color: var(--muted-2); font-size: .86rem; }
.chat-stack { display: grid; gap: 12px; }
.chat-bubble {
    max-width: 82%;
    padding: 16px 18px;
    border-radius: 22px;
    background: rgba(255,255,255,.08);
    color: var(--muted);
    line-height: 1.55;
}
.chat-bubble.is-me {
    margin-left: auto;
    background: linear-gradient(135deg, rgba(244,200,107,.26), rgba(96,215,255,.18));
    color: var(--text);
}
.bot-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.bot-buttons span {
    border-radius: 999px;
    padding: 10px 12px;
    color: #07101a;
    background: linear-gradient(135deg, var(--gold-2), var(--blue));
    font-size: .82rem;
    font-weight: 900;
}
.token-orbit {
    position: relative;
    min-height: 460px;
    display: grid;
    place-items: center;
}
.token-core {
    position: relative;
    z-index: 2;
    width: 190px;
    height: 190px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #07101a;
    background: linear-gradient(135deg, var(--gold-2), var(--gold), var(--blue));
    font-size: 2.7rem;
    font-weight: 950;
    letter-spacing: .08em;
    box-shadow: 0 0 70px rgba(244,200,107,.28);
}
.token-orbit::before,
.token-orbit::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.18);
}
.token-orbit::before { width: 420px; height: 190px; animation: orbitSpin 12s linear infinite; }
.token-orbit::after { width: 300px; height: 420px; animation: orbitSpin 18s linear infinite reverse; }
.token-node {
    position: absolute;
    z-index: 3;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.14);
    font-weight: 800;
}
.token-node:nth-child(2) { top: 78px; left: 19%; }
.token-node:nth-child(3) { top: 104px; right: 16%; }
.token-node:nth-child(4) { bottom: 98px; left: 20%; }
.token-node:nth-child(5) { bottom: 78px; right: 22%; }
.brand-kit-grid {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 20px;
}
.brand-board {
    border-radius: 34px;
    padding: 28px;
    min-height: 450px;
}
.brand-logo-preview {
    min-height: 250px;
    display: grid;
    place-items: center;
    border-radius: 28px;
    background: rgba(8,10,18,.5);
    border: 1px solid rgba(255,255,255,.1);
}
.brand-logo-preview img { width: 180px; }
.brand-swatches {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 18px;
}
.swatch {
    min-height: 96px;
    border-radius: 20px;
    padding: 12px;
    color: #07101a;
    font-weight: 950;
    display: flex;
    align-items: end;
}
.swatch.dark { color: #fff; background: #070914; border: 1px solid rgba(255,255,255,.12); }
.swatch.gold { background: #F4C86B; }
.swatch.blue { background: #60D7FF; }
.swatch.green { background: #56F0A4; }
.asset-wall {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.asset-card {
    border-radius: 28px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    padding: 16px;
}
.asset-card img {
    width: 100%;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(0,0,0,.16);
}
.asset-card strong { display: block; margin-top: 12px; }
.asset-card p { margin: 8px 0 0; color: var(--muted); line-height: 1.5; }
.program-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.program-card {
    min-height: 260px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 28px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
}
.program-card span {
    display: inline-flex;
    padding: 8px 11px;
    border-radius: 999px;
    color: #07101a;
    background: linear-gradient(135deg, var(--gold-2), var(--blue));
    font-size: .78rem;
    font-weight: 950;
}
.program-card h3 { margin: 22px 0 12px; }
.program-card p { margin: 0; color: var(--muted); line-height: 1.62; }
.roadmap-shell {
    position: relative;
    border-radius: 34px;
    padding: 28px;
    overflow: hidden;
}
.roadmap-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}
.roadmap-item {
    min-height: 260px;
    padding: 18px;
    border-radius: 24px;
    background: rgba(8,10,18,.44);
    border: 1px solid rgba(255,255,255,.1);
}
.roadmap-item strong {
    display: block;
    margin-bottom: 46px;
    color: var(--gold-2);
    font-size: .86rem;
    letter-spacing: .08em;
}
.roadmap-item h3 { margin: 0 0 12px; font-size: 1.1rem; }
.roadmap-item p { margin: 0; color: var(--muted); line-height: 1.55; font-size: .94rem; }
.lang-wall {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.lang-card {
    min-height: 230px;
    padding: 22px;
    border-radius: 28px;
    border: 1px solid rgba(255,255,255,.13);
    background: rgba(255,255,255,.06);
}
.lang-card strong {
    display: block;
    color: var(--gold-2);
    font-size: 2.1rem;
}
.lang-card h3 { margin: 24px 0 12px; }
.lang-card p { margin: 0; color: var(--muted); line-height: 1.58; }
.demo-final-cta {
    text-align: center;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--radius-xl);
    padding: clamp(34px, 6vw, 70px);
    background:
        radial-gradient(circle at 30% 10%, rgba(244,200,107,.18), transparent 34%),
        radial-gradient(circle at 76% 32%, rgba(96,215,255,.16), transparent 36%),
        rgba(255,255,255,.06);
}
.demo-final-cta h2 {
    margin: 0 auto 18px;
    max-width: 900px;
    font-size: clamp(2.5rem, 6vw, 6.2rem);
    line-height: .9;
    letter-spacing: -.08em;
}
.demo-final-cta p {
    margin: 0 auto;
    max-width: 760px;
    color: var(--muted);
    line-height: 1.7;
    font-size: 1.1rem;
}
.demo-final-cta .showcase-actions { justify-content: center; }
@keyframes demoSheen {
    0%, 60% { transform: translateX(-120%); }
    100% { transform: translateX(120%); }
}
@keyframes barRise {
    from { transform: scaleY(.72); opacity: .78; }
    to { transform: scaleY(1); opacity: 1; }
}
@keyframes panelIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes pulseDot {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 8px rgba(244,200,107,.12); }
    50% { transform: scale(1.18); box-shadow: 0 0 0 18px rgba(244,200,107,0); }
}
@keyframes orbitSpin {
    from { transform: rotate(0); }
    to { transform: rotate(360deg); }
}
@media (max-width: 1120px) {
    .demo-expansion-shell,
    .demo-hero-grid,
    .interface-lab,
    .brand-kit-grid { grid-template-columns: 1fr; }
    .showcase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .roadmap-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .program-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lang-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .demo-expansion-board,
    .demo-stat-row,
    .showcase-grid,
    .program-grid,
    .roadmap-grid,
    .lang-wall,
    .asset-wall,
    .browser-body,
    .browser-dashboard,
    .panel-visual,
    .admin-kanban,
    .wide-flow { grid-template-columns: 1fr; }
    .demo-hero { padding-top: 58px; }
    .demo-title { font-size: clamp(3.8rem, 17vw, 6.2rem); }
    .browser-shell,
    .interface-screen { min-height: auto; border-radius: 26px; }
    .browser-sidebar { min-height: 180px; }
    .browser-card.wide { grid-column: auto; }
    .wide-flow span::after { display: none; }
    .interface-screen { padding: 12px; }
    .panel-main,
    .panel-side,
    .chat-panel,
    .token-panel,
    .admin-panel { padding: 16px; border-radius: 22px; }
    .token-orbit { min-height: 360px; transform: scale(.86); }
    .brand-swatches { grid-template-columns: repeat(2, 1fr); }
}