:root {
    --showcase-ink: #e6f5f0;
    --showcase-muted: #a8c0c7;
    --showcase-panel: #0d1f26;
    --showcase-panel-soft: #102a32;
    --showcase-line: rgba(255, 255, 255, .10);
    --showcase-green: #2aa889;
    --showcase-orange: #e38c35;
}

body.showcase-page.theme-dark {
    min-height: 100vh;
    background: radial-gradient(1100px circle at 10% 8%, #103c43 0%, #07161b 47%, #061114 100%);
    color: var(--showcase-ink);
}

.showcase-page .topbar { position: relative; z-index: 3; }
.showcase-page .brand-title { margin: 0; color: var(--showcase-ink); font-weight: 700; font-size: 1.05rem; }
.showcase-page .brand-subtitle { color: var(--showcase-muted); }
.showcase-page .topnav a { color: var(--showcase-ink); }
.showcase-page .topnav a.cta { background: var(--showcase-green); color: #08242b; }

.showcase-main { padding-bottom: 42px; }
.showcase-hero { padding: 58px 0 42px; }
.showcase-hero h1,
.showcase-section h2,
.showcase-card h2,
.showcase-screen h2 { font-family: 'Fraunces', serif; color: #f2fffb; }
.showcase-hero h1 { max-width: 780px; margin: 0 0 14px; font-size: clamp(2.35rem, 4.5vw, 4rem); line-height: 1.1; }
.showcase-hero p { max-width: 735px; margin: 0; color: var(--showcase-muted); font-size: 1.05rem; line-height: 1.65; }
.showcase-kicker { margin-bottom: 12px !important; color: #8ce4d0 !important; font-size: .75rem !important; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.showcase-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 25px; }
.showcase-button { display: inline-block; padding: 11px 16px; border: 1px solid rgba(140, 228, 208, .3); border-radius: 999px; color: #e6f5f0; text-decoration: none; font-weight: 700; }
.showcase-button.primary { background: var(--showcase-orange); border-color: var(--showcase-orange); color: #fff; }

.showcase-section { padding: 34px 0 56px; }
.showcase-section-head { max-width: 720px; margin-bottom: 24px; }
.showcase-section-head h2 { margin: 0 0 10px; font-size: clamp(1.8rem, 3vw, 2.55rem); }
.showcase-section-head p { margin: 0; color: var(--showcase-muted); }

.demo-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 15px; }
.showcase-card { display: flex; flex-direction: column; min-height: 240px; padding: 20px; border: 1px solid var(--showcase-line); border-radius: 19px; background: linear-gradient(145deg, rgba(17, 47, 56, .98), rgba(10, 28, 34, .98)); box-shadow: 0 16px 30px rgba(0, 0, 0, .22); }
.showcase-card .card-number { display: grid; width: 36px; height: 36px; margin-bottom: 18px; place-items: center; border-radius: 11px; background: rgba(42, 168, 137, .18); color: #8ce4d0; font-weight: 700; }
.showcase-card h2 { margin: 0 0 9px; font-size: 1.32rem; }
.showcase-card p { margin: 0; color: var(--showcase-muted); font-size: .88rem; line-height: 1.5; }
.showcase-card button { width: 100%; margin-top: auto; padding: 10px 12px; border: 0; border-radius: 10px; background: var(--showcase-green); color: #08242b; font-weight: 700; cursor: pointer; }
.showcase-screen { min-height: 216px; margin-top: 26px; padding: 30px; border: 1px solid rgba(140, 228, 208, .2); border-radius: 20px; background: linear-gradient(135deg, #0d2c35, #082128); }
.showcase-screen h2 { margin: 0 0 8px; }.showcase-screen p { max-width: 760px; color: #c4dbd7; }.showcase-screen .step { display: none; }.showcase-screen .step.active { display: block; }

.catalogue-hero { padding-bottom: 32px; }.catalogue-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }.catalogue-filters button { padding: 9px 14px; border: 1px solid rgba(140, 228, 208, .35); border-radius: 999px; background: transparent; color: #d8f1ea; font-weight: 600; cursor: pointer; }.catalogue-filters button.active { background: var(--showcase-green); border-color: var(--showcase-green); color: #08242b; }
.catalogue-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; padding: 20px 0 70px; }.catalogue-card { overflow: hidden; border: 1px solid var(--showcase-line); border-radius: 18px; background: var(--showcase-panel); box-shadow: 0 16px 30px rgba(0, 0, 0, .22); }.catalogue-photo { height: 170px; display: grid; place-items: center; overflow: hidden; background: linear-gradient(135deg, #17434a, #0d2830); color: #a8c0c7; }.catalogue-photo img { width: 100%; height: 100%; object-fit: cover; }.catalogue-body { padding: 18px; }.catalogue-body h2 { margin: 0 0 6px; color: #f2fffb; font-size: 1.25rem; }.catalogue-body p { margin: 0 0 7px; color: var(--showcase-muted); }.catalogue-price { color: #8ce4d0 !important; font-weight: 700; }.catalogue-button { display: inline-block; margin-top: 11px; padding: 9px 12px; border-radius: 9px; background: var(--showcase-orange); color: #fff; font-weight: 700; text-decoration: none; }.catalogue-empty { padding: 32px 0; color: var(--showcase-muted); }

@media (max-width: 1100px) { .demo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px) { .showcase-hero { padding: 28px 0 24px; }.showcase-section { padding: 28px 0 44px; }.demo-grid { grid-template-columns: 1fr; }.showcase-card { min-height: 200px; }.showcase-screen { padding: 22px; }.showcase-page .topbar { padding-left: 12px; padding-right: 12px; }.showcase-page .brand { width: auto; flex: 1; }.showcase-page main { padding-bottom: 92px; } }