:root {
    --bg: #f5f1ea;
    --bg-accent: rgba(36, 65, 111, 0.16);
    --bg-warm: rgba(191, 138, 47, 0.14);
    --surface: rgba(255, 255, 255, 0.9);
    --surface-strong: #ffffff;
    --surface-soft: #edf2fa;
    --ink: #121d30;
    --muted: #57627a;
    --brand: #24416f;
    --brand-strong: #16243f;
    --accent: #bf8a2f;
    --line: rgba(18, 29, 48, 0.1);
    --line-strong: rgba(36, 65, 111, 0.18);
    --shadow: 0 24px 60px rgba(22, 36, 63, 0.14);
    --shadow-soft: 0 12px 30px rgba(22, 36, 63, 0.08);
    --radius-xl: 34px;
    --radius-lg: 26px;
    --radius-md: 20px;
    --radius-sm: 14px;
    --container: 1200px;
    --font-body: 'Manrope', sans-serif;
    --font-display: 'Sora', sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-body);
    color: var(--ink);
    background:
        radial-gradient(circle at top left, var(--bg-warm), transparent 28%),
        radial-gradient(circle at 88% 12%, var(--bg-accent), transparent 24%),
        linear-gradient(180deg, #fcfaf6 0%, var(--bg) 100%);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.theme-restaurant {
    --font-display: 'Fraunces', serif;
    background:
        radial-gradient(circle at top left, rgba(233, 122, 40, 0.18), transparent 28%),
        radial-gradient(circle at 85% 18%, rgba(113, 37, 28, 0.3), transparent 26%),
        linear-gradient(180deg, #171310 0%, #241914 100%);
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}

button,
input,
textarea,
select {
    font: inherit;
}

.page-shell {
    position: relative;
    min-height: 100vh;
}

.page-shell::before,
.page-shell::after {
    content: '';
    position: fixed;
    z-index: -1;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}

.page-shell::before {
    width: 20rem;
    height: 20rem;
    top: 3rem;
    right: -5rem;
    background: rgba(36, 65, 111, 0.16);
}

.page-shell::after {
    width: 18rem;
    height: 18rem;
    bottom: 4rem;
    left: -4rem;
    background: rgba(191, 138, 47, 0.12);
}

.theme-restaurant .page-shell::before,
.theme-restaurant .page-shell::after {
    opacity: 0.55;
}

.wrap {
    width: min(var(--container), calc(100% - 2rem));
    margin: 0 auto;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(18, 29, 48, 0.06);
    background: rgba(252, 249, 243, 0.82);
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.topbar.is-scrolled {
    box-shadow: 0 10px 24px rgba(22, 36, 63, 0.08);
}

.theme-restaurant .topbar {
    background: rgba(23, 19, 16, 0.78);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.theme-restaurant .topbar.is-scrolled {
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
}

.topbar-inner {
    width: min(var(--container), calc(100% - 2rem));
    margin: 0 auto;
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    transition: min-height 0.22s ease, padding 0.22s ease, gap 0.22s ease;
}

.brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.brand-mark {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--brand), var(--brand-strong));
    color: #fff;
    font-size: 1rem;
    box-shadow: 0 10px 18px rgba(22, 36, 63, 0.18);
    transition: width 0.22s ease, height 0.22s ease, border-radius 0.22s ease, font-size 0.22s ease;
}

.theme-restaurant .brand-mark {
    box-shadow: 0 12px 22px rgba(0, 0, 0, 0.24);
}

.brand-copy {
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
}

.brand-copy strong,
.hero-title,
.section-title,
.card-title,
.cta-panel h3,
.footer-cta h3 {
    font-family: var(--font-display);
}

.brand-copy strong {
    font-size: 0.98rem;
    line-height: 1.1;
    transition: font-size 0.22s ease;
}

.brand-copy span {
    font-size: 0.82rem;
    color: var(--muted);
    max-height: 2rem;
    overflow: hidden;
    opacity: 1;
    transition: max-height 0.22s ease, opacity 0.18s ease;
}

.theme-restaurant .brand-copy span,
.theme-restaurant .demo-copy p,
.theme-restaurant .section-intro,
.theme-restaurant .card-copy,
.theme-restaurant .stacked-list li,
.theme-restaurant .footer-note,
.theme-restaurant .footer-copy,
.theme-restaurant .meta-pill,
.theme-restaurant .info-copy,
.theme-restaurant .kpi-note,
.theme-restaurant .menu-line small {
    color: rgba(245, 238, 230, 0.78);
}

.topbar-links {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.topbar-links a,
.ghost-link,
.solid-link,
.inline-link,
.preview-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 48px;
    padding: 0.8rem 1.1rem;
    border-radius: 999px;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, padding 0.22s ease, min-height 0.22s ease, font-size 0.22s ease;
}

.topbar-links a,
.ghost-link,
.preview-link {
    border: 1px solid rgba(18, 29, 48, 0.08);
    background: rgba(255, 255, 255, 0.72);
}

.solid-link {
    border: none;
    background: linear-gradient(135deg, var(--brand), var(--brand-strong));
    color: #fff;
    box-shadow: 0 14px 26px rgba(22, 36, 63, 0.2);
}

.theme-restaurant .topbar-links a,
.theme-restaurant .ghost-link,
.theme-restaurant .preview-link {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.topbar-links a:hover,
.ghost-link:hover,
.solid-link:hover,
.inline-link:hover,
.preview-link:hover {
    transform: translateY(-2px);
}

.showroom-hero,
.demo-hero,
.section-block,
.footer-band {
    width: min(var(--container), calc(100% - 2rem));
    margin: 0 auto;
}

.showroom-hero {
    padding: 5.8rem 0 2.8rem;
}

.showroom-head {
    max-width: 54rem;
}

.eyebrow {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.82rem;
    margin-bottom: 0.85rem;
    border-radius: 999px;
    background: rgba(191, 138, 47, 0.13);
    color: #8a611d;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1;
    text-transform: uppercase;
}

.hero-title,
.section-title {
    margin: 0;
    font-size: clamp(2.2rem, 4vw, 4.4rem);
    line-height: 1.02;
}

.showroom-head p,
.demo-copy p,
.section-intro,
.card-copy,
.footer-copy {
    margin-top: 1rem;
    color: var(--muted);
    font-size: 1.02rem;
}

.showroom-actions,
.button-row,
.footer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 1.45rem;
}

.showroom-grid {
    width: min(var(--container), calc(100% - 2rem));
    margin: 0 auto;
    padding-bottom: 4rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.showcase-card,
.surface-card,
.cta-panel,
.footer-cta {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(16px);
}

.theme-restaurant .showcase-card,
.theme-restaurant .surface-card,
.theme-restaurant .cta-panel,
.theme-restaurant .footer-cta {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2);
}

.showcase-card {
    padding: 1.35rem;
}

.mock-window {
    border-radius: 1.3rem;
    overflow: hidden;
    min-height: 14rem;
    border: 1px solid rgba(18, 29, 48, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.mock-window.salon {
    background: linear-gradient(145deg, #f5e8e1 0%, #ead8d0 60%, #f8f1eb 100%);
}

.mock-window.clinic {
    background: linear-gradient(145deg, #e9f7f3 0%, #d6ebe8 55%, #f5fbf8 100%);
}

.mock-window.restaurant {
    background: linear-gradient(145deg, #362118 0%, #5a3123 52%, #a2522f 100%);
}

.mock-window.corporate {
    background: linear-gradient(145deg, #d8e3f5 0%, #b9cde9 52%, #f4f8ff 100%);
}

.mock-window.services {
    background: linear-gradient(145deg, #e8f5f0 0%, #d7ede5 50%, #f6fbf9 100%);
}

.mock-browser {
    display: grid;
    height: 100%;
    grid-template-rows: auto 1fr;
}

.browser-bar {
    display: flex;
    gap: 0.35rem;
    padding: 0.8rem 0.9rem;
    background: rgba(255, 255, 255, 0.6);
}

.theme-restaurant .browser-bar {
    background: rgba(255, 255, 255, 0.12);
}

.browser-dot {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: rgba(18, 29, 48, 0.18);
}

.browser-body {
    padding: 1rem;
    display: grid;
    gap: 0.85rem;
    align-content: start;
}

.mock-pill,
.meta-pill,
.mini-chip,
.device-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.72rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
}

.mock-pill,
.device-chip {
    background: rgba(255, 255, 255, 0.55);
    color: var(--brand-strong);
}

.theme-restaurant .mock-pill,
.theme-restaurant .device-chip {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.mock-line {
    height: 0.8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.62);
}

.theme-restaurant .mock-line {
    background: rgba(255, 255, 255, 0.18);
}

.mock-line.short {
    width: 42%;
}

.mock-line.medium {
    width: 70%;
}

.mock-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
}

.mock-card {
    min-height: 4.4rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.5);
}

.theme-restaurant .mock-card {
    background: rgba(255, 255, 255, 0.1);
}

.showcase-body {
    margin-top: 1rem;
}

.card-title {
    margin: 0.9rem 0 0;
    font-size: 1.35rem;
    line-height: 1.15;
}

.card-copy {
    min-height: 5.2rem;
}

.device-list,
.tag-list,
.inline-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1rem;
}

.tag-list span,
.inline-metrics span,
.meta-pill {
    background: var(--surface-soft);
    color: var(--brand-strong);
}

.theme-restaurant .tag-list span,
.theme-restaurant .inline-metrics span,
.theme-restaurant .meta-pill {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.preview-link {
    margin-top: 1rem;
    width: fit-content;
}

.demo-hero {
    padding: 5rem 0 2.8rem;
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
    gap: 1.2rem;
    align-items: center;
}

.demo-copy {
    max-width: 40rem;
}

.kicker-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1rem;
}

.hero-panel,
.booking-card,
.info-panel,
.form-panel,
.menu-panel,
.metric-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
}

.theme-restaurant .hero-panel,
.theme-restaurant .booking-card,
.theme-restaurant .info-panel,
.theme-restaurant .form-panel,
.theme-restaurant .menu-panel,
.theme-restaurant .metric-panel {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
}

.hero-panel {
    padding: 1.3rem;
}

.booking-card,
.info-panel,
.form-panel,
.metric-panel,
.menu-panel,
.surface-card {
    padding: 1.35rem;
}

.section-block {
    padding: 1rem 0 4.2rem;
}

.section-head {
    max-width: 48rem;
    margin-bottom: 1.6rem;
}

.section-title {
    font-size: clamp(1.8rem, 3vw, 3rem);
}

.grid-3,
.grid-4,
.dual-grid,
.triple-grid,
.stats-grid {
    display: grid;
    gap: 1rem;
}

.grid-3,
.triple-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4,
.stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dual-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.surface-card h3,
.cta-panel h3,
.footer-cta h3,
.hero-panel h3,
.booking-card h3,
.info-panel h3,
.form-panel h3,
.menu-panel h3,
.metric-panel h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.22rem;
    line-height: 1.15;
}

.surface-card p,
.cta-panel p,
.footer-cta p,
.hero-panel p,
.booking-card p,
.info-panel p,
.form-panel p,
.menu-panel p,
.metric-panel p,
.info-copy,
.kpi-note {
    margin-top: 0.85rem;
    color: var(--muted);
}

.pricing-card {
    position: relative;
    overflow: hidden;
}

.pricing-card.is-featured {
    border-color: rgba(36, 65, 111, 0.18);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 244, 238, 0.94));
    box-shadow: 0 18px 40px rgba(22, 36, 63, 0.08);
}

.pricing-kicker {
    display: inline-flex;
    align-items: center;
    padding: 0.42rem 0.72rem;
    border-radius: 999px;
    background: rgba(36, 65, 111, 0.08);
    color: var(--brand);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pricing-value {
    margin-top: 1rem;
    font-family: var(--font-display);
    font-size: clamp(1.85rem, 4vw, 2.8rem);
    line-height: 1;
    color: var(--brand-strong);
}

.pricing-value span {
    display: block;
    margin-top: 0.42rem;
    font-family: 'Manrope', sans-serif;
    font-size: 0.92rem;
    color: var(--muted);
}

.stacked-list,
.menu-list,
.bullet-list {
    list-style: none;
    display: grid;
    gap: 0.72rem;
    margin: 1rem 0 0;
}

.stacked-list li,
.bullet-list li {
    position: relative;
    padding-left: 1rem;
    color: var(--muted);
}

.stacked-list li::before,
.bullet-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.72rem;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--brand));
}

.mini-card {
    padding: 1rem;
    border-radius: var(--radius-md);
    background: var(--surface-soft);
}

.theme-restaurant .mini-card {
    background: rgba(255, 255, 255, 0.08);
}

.mini-card strong,
.stat-value,
.menu-line strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1rem;
}

.mini-card span,
.stat-label,
.menu-line small {
    display: block;
    margin-top: 0.25rem;
    color: var(--muted);
    font-size: 0.88rem;
}

.stat-card {
    padding: 1rem;
    border-radius: var(--radius-md);
    background: var(--surface);
    border: 1px solid var(--line);
}

.theme-restaurant .stat-card {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.08);
}

.stat-value {
    font-size: clamp(1.4rem, 3vw, 2rem);
}

.split-row,
.info-row,
.menu-line,
.appointment-row,
.quote-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.menu-line,
.appointment-row,
.quote-row {
    padding: 0.9rem 0;
    border-bottom: 1px solid rgba(18, 29, 48, 0.08);
}

.theme-restaurant .menu-line,
.theme-restaurant .appointment-row,
.theme-restaurant .quote-row {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.menu-line:last-child,
.appointment-row:last-child,
.quote-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.menu-line:first-child,
.appointment-row:first-child,
.quote-row:first-child {
    padding-top: 0;
}

.price-tag,
.time-tag,
.urgency-tag {
    font-weight: 800;
    color: var(--brand);
}

.theme-restaurant .price-tag,
.theme-restaurant .time-tag,
.theme-restaurant .urgency-tag {
    color: #ffd6a8;
}

.form-stack {
    display: grid;
    gap: 0.8rem;
    margin-top: 1rem;
}

.form-stack input,
.form-stack textarea,
.form-stack select {
    width: 100%;
    padding: 0.92rem 1rem;
    border: 1px solid rgba(18, 29, 48, 0.12);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.82);
    color: var(--ink);
}

.theme-restaurant .form-stack input,
.theme-restaurant .form-stack textarea,
.theme-restaurant .form-stack select {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.form-stack input::placeholder,
.form-stack textarea::placeholder {
    color: rgba(87, 98, 122, 0.9);
}

.theme-restaurant .form-stack input::placeholder,
.theme-restaurant .form-stack textarea::placeholder {
    color: rgba(245, 238, 230, 0.56);
}

.section-note,
.footer-note {
    margin-top: 1rem;
    color: var(--muted);
    font-size: 0.94rem;
}

.contact-methods {
    display: grid;
    gap: 0.85rem;
    margin-top: 1.15rem;
}

.contact-method {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(18, 29, 48, 0.08);
    color: inherit;
    text-decoration: none;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.contact-method:hover {
    transform: translateY(-2px);
    border-color: rgba(36, 65, 111, 0.18);
    background: rgba(255, 255, 255, 0.88);
}

.contact-method i {
    width: 1.1rem;
    margin-top: 0.15rem;
    color: var(--brand);
}

.contact-method strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1rem;
}

.contact-method span span {
    display: block;
    margin-top: 0.18rem;
    color: var(--muted);
    font-size: 0.92rem;
}

.form-stack .solid-link {
    width: 100%;
}

.footer-band {
    padding: 0 0 3rem;
}

.footer-cta {
    padding: 1.45rem;
}

.footer-bar {
    width: min(var(--container), calc(100% - 2rem));
    margin: 0 auto;
    padding: 1.2rem 0 2.3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 0.94rem;
}

.theme-restaurant,
.theme-restaurant .footer-bar,
.theme-restaurant .hero-title,
.theme-restaurant .section-title,
.theme-restaurant .surface-card,
.theme-restaurant .cta-panel,
.theme-restaurant .footer-cta,
.theme-restaurant .surface-card h3,
.theme-restaurant .cta-panel h3,
.theme-restaurant .footer-cta h3,
.theme-restaurant .hero-panel h3,
.theme-restaurant .booking-card h3,
.theme-restaurant .menu-panel h3,
.theme-restaurant .info-panel h3,
.theme-restaurant .form-panel h3,
.theme-restaurant .mini-card strong,
.theme-restaurant .stat-value,
.theme-restaurant .menu-line strong,
.theme-restaurant .brand-copy strong {
    color: #fff7ee;
}

.theme-salon {
    --bg: #f6efe9;
    --surface: rgba(255, 249, 245, 0.92);
    --surface-soft: #efe1d8;
    --ink: #2e1f1c;
    --muted: #705f59;
    --brand: #7b4f41;
    --brand-strong: #4f2f28;
    --accent: #d7a07a;
    --font-display: 'Cormorant Garamond', serif;
}

.theme-clinic {
    --bg: #eef6f4;
    --surface: rgba(250, 255, 253, 0.92);
    --surface-soft: #dceee9;
    --ink: #102127;
    --muted: #54727a;
    --brand: #1d7a73;
    --brand-strong: #114c48;
    --accent: #88cfc4;
    --font-display: 'Sora', sans-serif;
}

.theme-corporate {
    --bg: #eef3f8;
    --surface: rgba(252, 254, 255, 0.92);
    --surface-soft: #dce7f4;
    --ink: #152033;
    --muted: #5b6b83;
    --brand: #315f97;
    --brand-strong: #183152;
    --accent: #7fa5d9;
    --font-display: 'Space Grotesk', sans-serif;
}

.theme-services {
    --bg: #eef6f0;
    --surface: rgba(251, 255, 252, 0.92);
    --surface-soft: #deeee4;
    --ink: #11271c;
    --muted: #577164;
    --brand: #237448;
    --brand-strong: #14432b;
    --accent: #82c59e;
    --font-display: 'Sora', sans-serif;
}

@media (max-width: 1100px) {
    .showroom-grid,
    .demo-hero,
    .grid-4,
    .grid-3,
    .dual-grid,
    .triple-grid,
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .card-copy {
        min-height: 0;
    }
}

@media (max-width: 860px) {
    .topbar-inner {
        min-height: 68px;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 0.7rem;
        padding: 0.75rem 0;
    }

    .topbar-links {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 0.1rem;
    }

    .topbar-links::-webkit-scrollbar {
        display: none;
    }

    .topbar-links a {
        flex: 0 0 auto;
        min-height: 42px;
        padding: 0.64rem 0.92rem;
        white-space: nowrap;
    }

    .topbar.is-scrolled .topbar-inner {
        min-height: 58px;
        gap: 0.45rem;
        padding: 0.42rem 0;
    }

    .topbar.is-scrolled .brand-mark {
        width: 2.3rem;
        height: 2.3rem;
        border-radius: 0.82rem;
        font-size: 0.9rem;
    }

    .topbar.is-scrolled .brand-copy strong {
        font-size: 0.9rem;
    }

    .topbar.is-scrolled .brand-copy span {
        max-height: 0;
        opacity: 0;
    }

    .topbar.is-scrolled .topbar-links a {
        min-height: 38px;
        padding: 0.52rem 0.78rem;
        font-size: 0.86rem;
    }

    .showroom-hero {
        padding-top: 4.8rem;
    }

    .demo-hero {
        padding-top: 4.6rem;
    }
}

@media (max-width: 640px) {
    .wrap,
    .showroom-hero,
    .showroom-grid,
    .demo-hero,
    .section-block,
    .footer-band,
    .topbar-inner,
    .footer-bar {
        width: min(var(--container), calc(100% - 1rem));
    }

    .hero-title,
    .section-title {
        font-size: clamp(1.9rem, 10vw, 2.8rem);
    }

    .showroom-head p,
    .demo-copy p,
    .section-intro,
    .card-copy,
    .footer-copy {
        font-size: 0.97rem;
    }

    .showroom-actions,
    .button-row,
    .footer-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .ghost-link,
    .solid-link,
    .inline-link,
    .preview-link {
        width: 100%;
    }

    .showcase-card,
    .surface-card,
    .hero-panel,
    .booking-card,
    .info-panel,
    .form-panel,
    .metric-panel,
    .menu-panel,
    .cta-panel,
    .footer-cta {
        padding: 1.05rem;
        border-radius: 22px;
    }

    .mock-window {
        min-height: 12rem;
    }

    .topbar-links {
        gap: 0.55rem;
    }

    .topbar-links a {
        min-height: 40px;
        padding: 0.58rem 0.84rem;
        font-size: 0.86rem;
    }

    .topbar.is-scrolled .brand-copy strong {
        font-size: 0.84rem;
    }

    .device-list,
    .tag-list,
    .inline-metrics,
    .kicker-row {
        gap: 0.45rem;
    }

    .footer-bar,
    .split-row,
    .info-row,
    .menu-line,
    .appointment-row,
    .quote-row {
        flex-direction: column;
        align-items: flex-start;
    }
}