:root {
    --primary-blue: #0066ff;
    --dark-blue: #001a33;
    --ink: #172033;
    --muted: #667085;
    --line: #e6edf7;
    --bg-soft: #f5f9ff;
    --white: #ffffff;
    --container-width: 1200px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-padding-top: 92px;
}

body {
    background: var(--white);
    color: var(--ink);
    font-family: "Inter", Arial, sans-serif;
    line-height: 1.6;
}

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

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

.site-header {
    background: var(--dark-blue);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.16);
    position: sticky;
    top: 0;
    z-index: 20;
}

.nav {
    align-items: center;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    min-height: 82px;
}

.logo {
    align-items: center;
    display: flex;
    gap: 10px;
}

.logo-icon {
    height: 50px;
    object-fit: contain;
    width: auto;
}

.logo-text {
    display: flex;
    flex-direction: column;
}

.brand {
    color: var(--white);
    display: flex;
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
}

.logo-accent,
.highlight {
    color: var(--primary-blue);
}

.tagline {
    color: #a8b4c7;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-top: 4px;
}

.nav-links {
    align-items: center;
    display: flex;
    gap: 28px;
    list-style: none;
}

.nav-links a {
    color: var(--white);
    font-weight: 600;
}

.nav-links a:hover {
    color: var(--primary-blue);
}

.nav-client-link {
    color: #8bbcff !important;
}

.hamburger {
    background: transparent;
    border: 0;
    color: var(--white);
    cursor: pointer;
    display: none;
    font-size: 1.4rem;
}

.btn-whatsapp,
.btn-secondary {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    font-weight: 800;
    gap: 10px;
    justify-content: center;
    min-height: 48px;
    padding: 12px 22px;
}

.btn-whatsapp {
    background: var(--primary-blue);
    color: var(--white);
}

.btn-whatsapp:hover {
    background: #0052cc;
}

.btn-secondary {
    border: 2px solid var(--line);
    color: var(--primary-blue);
}

.btn-secondary:hover {
    background: #eaf3ff;
}

.hero {
    background: linear-gradient(180deg, #ffffff 0%, #edf6ff 100%);
    overflow: hidden;
    padding: 42px 0 88px;
}

.hero-content {
    align-items: center;
    display: grid;
    gap: 44px;
    grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
}

.badge {
    background: #e6f0ff;
    border-radius: 6px;
    color: var(--primary-blue);
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 800;
    margin-bottom: 18px;
    padding: 6px 12px;
}

.hero h1 {
    color: var(--dark-blue);
    font-size: clamp(2.5rem, 7vw, 4.25rem);
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.05;
    margin-bottom: 22px;
}

.hero p {
    color: var(--muted);
    font-size: 1.08rem;
    margin-bottom: 34px;
    max-width: 540px;
}

.hero-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.devices {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 420px;
    position: relative;
}

.laptop {
    max-width: min(520px, 82vw);
    width: 100%;
}

.mobile {
    left: 8%;
    max-width: 180px;
    position: absolute;
    top: 30px;
    width: 31%;
    z-index: 2;
}

.services,
.business-solutions,
.plans,
.portfolio,
.about {
    padding: 88px 0;
}

.section-header {
    margin: 0 auto 48px;
    max-width: 640px;
    text-align: center;
}

.section-header h2,
.about h2 {
    color: var(--dark-blue);
    font-size: clamp(2rem, 4vw, 2.6rem);
    line-height: 1.15;
    margin-bottom: 10px;
}

.section-header p,
.about p {
    color: var(--muted);
}

.services-grid,
.portfolio-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.service-card,
.portfolio-card,
.admin-card,
.form-shell {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(16, 36, 64, 0.06);
}

.service-card,
.portfolio-card {
    padding: 30px;
}

.service-icon {
    color: var(--primary-blue);
    font-size: 2.2rem;
    margin-bottom: 18px;
}

.service-card h3,
.portfolio-card h3 {
    color: var(--dark-blue);
    font-size: 1.16rem;
    line-height: 1.3;
    margin-bottom: 10px;
}

.service-card p,
.portfolio-card p {
    color: var(--muted);
    font-size: 0.95rem;
}

.portfolio {
    background: var(--bg-soft);
}

.business-solutions {
    background: var(--white);
}

.solutions-intro {
    align-items: end;
    display: grid;
    gap: 32px;
    grid-template-columns: 0.9fr 1.1fr;
    margin-bottom: 38px;
}

.solutions-intro h2 {
    color: var(--dark-blue);
    font-size: clamp(2rem, 4vw, 2.6rem);
    line-height: 1.15;
}

.solutions-intro p {
    color: var(--muted);
    max-width: 680px;
}

.solutions-grid {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.solution-card {
    background: #fbfdff;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 26px;
}

.solution-icon {
    align-items: center;
    background: #e6f0ff;
    border-radius: 8px;
    color: var(--primary-blue);
    display: inline-flex;
    font-size: 1.3rem;
    height: 46px;
    justify-content: center;
    margin-bottom: 18px;
    width: 46px;
}

.solution-card > span {
    color: var(--primary-blue);
    display: block;
    font-size: 0.76rem;
    font-weight: 800;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.solution-card h3 {
    color: var(--dark-blue);
    font-size: 1.16rem;
    line-height: 1.25;
    margin-bottom: 10px;
}

.solution-card p {
    color: var(--muted);
    font-size: 0.94rem;
    margin-bottom: 18px;
}

.solution-card ul {
    border-top: 1px solid var(--line);
    display: grid;
    gap: 8px;
    list-style: none;
    padding-top: 16px;
}

.solution-card li {
    color: var(--ink);
    font-size: 0.9rem;
}

.solution-card li::before {
    color: var(--primary-blue);
    content: ">";
    font-weight: 800;
    margin-right: 8px;
}

.solutions-cta {
    align-items: center;
    background: var(--dark-blue);
    border-radius: 8px;
    color: var(--white);
    display: flex;
    gap: 24px;
    justify-content: space-between;
    margin-top: 28px;
    padding: 24px;
}

.solutions-cta p {
    color: #d6deea;
    max-width: 720px;
}

.plans {
    background: var(--bg-soft);
}

.plans-grid {
    align-items: stretch;
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.plan-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(16, 36, 64, 0.06);
    display: flex;
    flex-direction: column;
    padding: 28px;
    position: relative;
}

.plan-card.featured {
    border-color: var(--primary-blue);
    box-shadow: 0 18px 46px rgba(0, 102, 255, 0.14);
}

.plan-badges {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.plan-badge,
.plan-discount-badge {
    align-self: flex-start;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 800;
    padding: 6px 10px;
    text-transform: uppercase;
}

.plan-badge {
    background: var(--primary-blue);
    color: var(--white);
}

.plan-discount-badge {
    background: #c45a64;
    color: var(--white);
}

.plan-card h3 {
    color: var(--dark-blue);
    font-size: 1.25rem;
    line-height: 1.2;
    margin-bottom: 10px;
}

.plan-card p {
    color: var(--muted);
    font-size: 0.94rem;
    margin-bottom: 22px;
}

.plan-price {
    border-bottom: 1px solid var(--line);
    border-top: 1px solid var(--line);
    margin-bottom: 22px;
    padding: 16px 0;
}

.plan-price span {
    color: var(--muted);
    display: block;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
}

.plan-price del {
    color: #a9444d;
    display: inline-block;
    font-size: 1rem;
    font-weight: 800;
    margin-top: 6px;
    text-decoration-thickness: 2px;
}

.plan-price strong {
    color: var(--dark-blue);
    display: block;
    font-size: 1.75rem;
    line-height: 1.1;
    margin-top: 4px;
}

.plan-card ul {
    display: grid;
    gap: 12px;
    list-style: none;
    margin-bottom: 24px;
}

.plan-card li {
    align-items: flex-start;
    color: var(--ink);
    display: flex;
    font-size: 0.94rem;
    gap: 10px;
}

.plan-card li i {
    color: var(--primary-blue);
    margin-top: 4px;
}

.plan-card .btn-secondary {
    margin-top: auto;
}

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

.portfolio-card span {
    color: var(--primary-blue);
    display: block;
    font-size: 0.78rem;
    font-weight: 800;
    margin-bottom: 14px;
    text-transform: uppercase;
}

.portfolio-link {
    color: var(--primary-blue);
    display: inline-flex;
    font-weight: 800;
    gap: 8px;
    margin-top: 18px;
}

.portfolio-paused-note {
    background: #ffffff;
    border: 1px solid var(--line);
    border-left: 5px solid var(--primary-blue);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(16, 36, 64, 0.06);
    margin: 0 auto;
    max-width: 760px;
    padding: 24px;
    text-align: center;
}

.portfolio-paused-note span {
    color: var(--primary-blue);
    display: block;
    font-size: 0.78rem;
    font-weight: 800;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.portfolio-paused-note p {
    color: var(--muted);
    margin: 0;
}

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

.portfolio-showcase {
    display: flex;
    flex-direction: column;
    min-height: 390px;
}

.portfolio-showcase-copy {
    min-height: 166px;
}

.portfolio-showcase-slides {
    margin-top: 18px;
}

.portfolio-showcase-slide {
    display: none;
}

.portfolio-showcase-slide.active {
    background: var(--showcase-soft);
    border-left: 4px solid var(--showcase-accent);
    border-radius: 8px;
    display: block;
    min-height: 198px;
    padding: 16px;
}

.portfolio-showcase-icon {
    align-items: center;
    background: var(--showcase-accent);
    border-radius: 50%;
    color: #ffffff;
    display: flex;
    height: 42px;
    justify-content: center;
    margin-bottom: 12px;
    width: 42px;
}

.portfolio-showcase-slide em {
    color: var(--showcase-accent);
    display: block;
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.06em;
    margin-bottom: 7px;
    text-transform: uppercase;
}

.portfolio-showcase-slide strong,
.portfolio-showcase-slide small {
    display: block;
}

.portfolio-showcase-slide strong {
    color: var(--showcase-deep);
}

.portfolio-showcase-slide small {
    color: var(--muted);
    line-height: 1.4;
    margin-top: 6px;
}

.portfolio-showcase-controls {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 22px;
}

.portfolio-showcase-controls button {
    background: transparent;
    border: 0;
    color: var(--primary-blue);
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 800;
}

.portfolio-showcase-dot {
    background: #c6d8f3 !important;
    border-radius: 50%;
    height: 8px;
    margin: 0 4px;
    padding: 0;
    width: 8px;
}

.portfolio-showcase-dot.active {
    background: var(--primary-blue) !important;
}

.showcase-rose { --showcase-accent: #cf5274; --showcase-deep: #56243a; --showcase-soft: #fff1f5; }
.showcase-silver { --showcase-accent: #667386; --showcase-deep: #303947; --showcase-soft: #f1f4f6; }
.showcase-amber { --showcase-accent: #b97825; --showcase-deep: #503418; --showcase-soft: #fff7e8; }
.showcase-violet { --showcase-accent: #8054a9; --showcase-deep: #3b2750; --showcase-soft: #f7f0fc; }
.showcase-red { --showcase-accent: #c83e4d; --showcase-deep: #6f1f2c; --showcase-soft: #fff0f1; }
.showcase-navy { --showcase-accent: #24689f; --showcase-deep: #123555; --showcase-soft: #edf7ff; }
.showcase-mint { --showcase-accent: #278b73; --showcase-deep: #22594f; --showcase-soft: #edf9f5; }
.showcase-terracotta { --showcase-accent: #ad684b; --showcase-deep: #5b392f; --showcase-soft: #fbf0ea; }

.demo-page {
    --demo-accent: #cf5274;
    --demo-deep: #56243a;
    --demo-soft: #fff4f7;
    background: #ffffff;
    color: #263142;
    font-family: "Inter", sans-serif;
    margin: 0;
}

.demo-silver { --demo-accent: #8492a6; --demo-deep: #303947; --demo-soft: #f3f5f7; }
.demo-amber { --demo-accent: #ca8b35; --demo-deep: #30251c; --demo-soft: #fbf5eb; }
.demo-violet { --demo-accent: #8d66b5; --demo-deep: #2f213a; --demo-soft: #f7f2fb; }
.demo-red { --demo-accent: #d34d57; --demo-deep: #6f1f2c; --demo-soft: #fff3f3; }
.demo-navy { --demo-accent: #3171a8; --demo-deep: #123555; --demo-soft: #eff7fc; }
.demo-mint { --demo-accent: #41a88e; --demo-deep: #22594f; --demo-soft: #effbf7; }
.demo-terracotta { --demo-accent: #b97355; --demo-deep: #5b392f; --demo-soft: #fbf4ef; }

.demo-container {
    margin: 0 auto;
    max-width: 1180px;
    padding-left: 24px;
    padding-right: 24px;
}

.demo-header {
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid #e5e9ee;
    position: sticky;
    top: 0;
    z-index: 20;
}

.demo-nav,
.demo-brand,
.demo-header nav,
.demo-actions,
.demo-feature-row {
    align-items: center;
    display: flex;
}

.demo-nav {
    gap: 28px;
    justify-content: space-between;
    min-height: 76px;
}

.demo-brand {
    color: var(--demo-deep);
    gap: 10px;
}

.demo-brand i {
    color: var(--demo-accent);
}

.demo-header nav {
    gap: 22px;
}

.demo-header nav a,
.demo-text-link {
    color: var(--demo-deep);
    font-size: 0.9rem;
    font-weight: 800;
}

.demo-button,
.demo-reserve-button {
    background: var(--demo-deep);
    border: 0;
    border-radius: 999px;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 800;
    gap: 8px;
    justify-content: center;
    padding: 13px 18px;
}

.demo-hero {
    background: var(--demo-soft);
    padding: 58px 0;
}

.demo-hero-grid {
    align-items: center;
    display: grid;
    gap: 54px;
    grid-template-columns: 1fr 0.9fr;
}

.demo-kicker,
.demo-section-heading > span,
.demo-contact > div > span {
    color: var(--demo-accent);
    display: block;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.demo-hero h1 {
    color: var(--demo-deep);
    font-family: "Playfair Display", serif;
    font-size: clamp(2.8rem, 6vw, 5.4rem);
    line-height: 0.98;
    margin: 0;
}

.demo-hero p,
.demo-section-heading p {
    color: #667386;
    line-height: 1.7;
    max-width: 680px;
}

.demo-actions {
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 24px;
}

.demo-feature-row {
    color: var(--demo-deep);
    flex-wrap: wrap;
    font-size: 0.86rem;
    font-weight: 800;
    gap: 14px;
    margin-top: 28px;
}

.demo-feature-row i {
    color: var(--demo-accent);
}

.demo-hero-media {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr 1fr;
    height: 420px;
}

.demo-split-carousel {
    overflow: hidden;
    position: relative;
}

.demo-split-slide {
    inset: 0;
    margin: 0;
    opacity: 0;
    position: absolute;
    transform: scale(1.04);
    transition: opacity 0.65s ease, transform 1.8s ease;
}

.demo-split-slide.active {
    opacity: 1;
    transform: scale(1);
}

.demo-split-slide img,
.demo-product-card img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.demo-split-dots {
    bottom: 14px;
    display: flex;
    gap: 6px;
    left: 14px;
    position: absolute;
    z-index: 3;
}

.demo-split-dots button {
    background: rgba(255, 255, 255, 0.56);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    height: 7px;
    padding: 0;
    transition: width 0.25s ease, background 0.25s ease;
    width: 7px;
}

.demo-split-dots button.active {
    background: #ffffff;
    width: 24px;
}

.demo-story {
    background: #ffffff;
    padding: 38px 0;
}

.demo-story-grid {
    align-items: center;
    display: grid;
    gap: 20px;
    grid-template-columns: 0.72fr 1.25fr 1fr;
}

.demo-story span {
    color: var(--demo-accent);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.demo-story h2 {
    color: var(--demo-deep);
    font-family: "Playfair Display", serif;
    font-size: 1.8rem;
    line-height: 1.08;
    margin: 0;
}

.demo-story p {
    color: #667386;
    line-height: 1.65;
    margin: 0;
}

.demo-layout-luxe .demo-header,
.demo-layout-luxe .demo-story {
    background: #f8f9fb;
}

.demo-layout-luxe .demo-hero {
    background: #eef1f4;
}

.demo-layout-luxe .demo-hero h1 {
    color: #303947;
    letter-spacing: -0.04em;
}

.demo-layout-heritage .demo-header,
.demo-layout-ink .demo-header {
    background: #211b18;
    border-color: rgba(255, 255, 255, 0.1);
}

.demo-layout-heritage .demo-brand,
.demo-layout-heritage .demo-header nav a,
.demo-layout-ink .demo-brand,
.demo-layout-ink .demo-header nav a {
    color: #ffffff;
}

.demo-layout-heritage .demo-hero {
    background: #f8f0e5;
}

.demo-layout-heritage .demo-split-primary {
    grid-column: span 1;
}

.demo-layout-ink .demo-hero {
    background: #21182d;
}

.demo-layout-ink .demo-hero h1,
.demo-layout-ink .demo-hero p,
.demo-layout-ink .demo-feature-row {
    color: #ffffff;
}

.demo-layout-ink .demo-text-link {
    color: #d8c1ed;
}

.demo-layout-clinical .demo-hero {
    background: linear-gradient(120deg, #eef8fb, #ffffff);
}

.demo-layout-clinical .demo-hero h1,
.demo-layout-corporate .demo-hero h1 {
    font-family: "Inter", sans-serif;
    font-size: clamp(2.6rem, 5vw, 4.8rem);
    letter-spacing: -0.06em;
}

.demo-layout-corporate .demo-hero {
    background: #eaf4fb;
}

.demo-layout-playful .demo-hero {
    background: #fff8e8;
}

.demo-layout-playful .demo-hero h1 {
    color: #22594f;
}

.demo-layout-playful .demo-split-carousel {
    border-radius: 20px;
}

.demo-layout-interior .demo-hero {
    background: #f5efe9;
}

.demo-layout-interior .demo-hero-grid {
    grid-template-columns: 0.82fr 1.18fr;
}

.demo-layout-interior .demo-split-primary {
    grid-row: span 1;
}

.demo-products {
    padding: 72px 0;
}

.demo-section-heading h2,
.demo-contact h2 {
    color: var(--demo-deep);
    font-family: "Playfair Display", serif;
    font-size: clamp(2.1rem, 4vw, 3.5rem);
    margin: 0;
}

.demo-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 28px 0 0;
}

.demo-filters select,
.demo-reservation-dialog select,
.demo-reservation-dialog input {
    background: #ffffff;
    border: 1px solid #dbe1e8;
    border-radius: 6px;
    font: inherit;
    padding: 11px 12px;
}

.demo-product-carousel {
    margin-top: 30px;
    position: relative;
}

.demo-product-grid {
    display: grid;
    gap: 18px;
    grid-auto-columns: minmax(260px, 1fr);
    grid-auto-flow: column;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-behavior: smooth;
    scrollbar-width: thin;
}

.demo-product-card {
    background: #ffffff;
    border: 1px solid #e3e8ed;
    min-width: 0;
}

.demo-product-card[hidden] {
    display: none;
}

.demo-product-card img {
    height: 230px;
}

.demo-product-card > div {
    padding: 18px;
}

.demo-product-card span {
    color: var(--demo-accent);
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
}

.demo-product-card h3 {
    color: var(--demo-deep);
    margin: 8px 0;
}

.demo-product-card p,
.demo-product-card small {
    color: #718094;
    display: block;
    line-height: 1.55;
}

.demo-product-card strong {
    color: var(--demo-deep);
    display: block;
    margin: 14px 0;
}

.demo-card-link {
    color: var(--demo-deep);
    font-weight: 800;
}

.demo-carousel-button {
    align-items: center;
    background: var(--demo-deep);
    border: 0;
    border-radius: 50%;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    height: 42px;
    justify-content: center;
    position: absolute;
    top: 45%;
    width: 42px;
    z-index: 3;
}

.demo-carousel-button.prev { left: -20px; }
.demo-carousel-button.next { right: -20px; }

.demo-contact {
    background: var(--demo-deep);
    color: #ffffff;
    padding: 62px 0;
    text-align: center;
}

.demo-contact h2,
.demo-contact p {
    color: #ffffff;
}

.demo-contact p {
    margin: 14px auto 22px;
    max-width: 680px;
}

.demo-contact .demo-button {
    background: #ffffff;
    color: var(--demo-deep);
}

.demo-footer {
    background: #162231;
    color: #cbd4df;
    padding: 28px 0;
    text-align: center;
}

.demo-footer strong,
.demo-footer span {
    display: block;
}

.demo-footer p {
    margin: 8px 0 14px;
}

.demo-footer b {
    color: #ffffff;
}

.demo-reservation-dialog {
    border: 0;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.24);
    max-width: 420px;
    padding: 0;
    width: calc(100% - 32px);
}

.demo-reservation-dialog::backdrop {
    background: rgba(20, 29, 42, 0.62);
}

.demo-reservation-dialog form {
    display: grid;
    gap: 14px;
    padding: 26px;
    position: relative;
}

.demo-reservation-dialog span {
    color: var(--demo-accent);
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
}

.demo-reservation-dialog h2 {
    color: var(--demo-deep);
    margin: 0;
}

.demo-reservation-dialog label {
    display: grid;
    font-size: 0.86rem;
    font-weight: 800;
    gap: 6px;
}

.demo-dialog-close {
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 1.8rem;
    position: absolute;
    right: 14px;
    top: 8px;
}

.demo-reservation-dialog p {
    color: #247a51;
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

.shoe-demo {
    background: var(--white);
}

.shoe-hero {
    background: #f5f9ff;
    padding: 70px 0 86px;
}

.shoe-hero-grid {
    align-items: center;
    display: grid;
    gap: 48px;
    grid-template-columns: 0.9fr 1.1fr;
}

.shoe-hero h1 {
    color: var(--dark-blue);
    font-size: clamp(2.4rem, 6vw, 4.2rem);
    line-height: 1.05;
    margin-bottom: 20px;
}

.shoe-hero p {
    color: var(--muted);
    font-size: 1.08rem;
    margin-bottom: 30px;
    max-width: 560px;
}

.shoe-showcase {
    align-items: center;
    display: grid;
    gap: 18px;
    grid-template-columns: 1.2fr 0.8fr;
    min-height: 360px;
}

.shoe-card-preview {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 18px 46px rgba(16, 36, 64, 0.12);
    display: grid;
    gap: 12px;
    padding: 28px;
}

.shoe-card-preview.main {
    min-height: 300px;
}

.shoe-card-preview.side {
    align-self: end;
    min-height: 190px;
}

.shoe-card-preview i {
    color: var(--primary-blue);
    font-size: 3rem;
}

.shoe-card-preview strong {
    color: var(--dark-blue);
    font-size: 1.6rem;
    line-height: 1.1;
}

.shoe-card-preview span {
    color: var(--muted);
    font-weight: 800;
}

.shoe-products,
.shoe-benefits {
    padding: 84px 0;
}

.shoe-products-grid,
.shoe-benefits-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.shoe-product-card,
.shoe-benefits article {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(16, 36, 64, 0.06);
    padding: 28px;
}

.shoe-product-card > span {
    color: var(--primary-blue);
    display: block;
    font-size: 0.76rem;
    font-weight: 800;
    margin-bottom: 16px;
    text-transform: uppercase;
}

.shoe-product-visual {
    align-items: center;
    background: #e6f0ff;
    border-radius: 8px;
    color: var(--primary-blue);
    display: flex;
    font-size: 2.4rem;
    height: 150px;
    justify-content: center;
    margin-bottom: 20px;
}

.shoe-product-card h3,
.shoe-benefits h3 {
    color: var(--dark-blue);
    font-size: 1.2rem;
    line-height: 1.25;
    margin-bottom: 8px;
}

.shoe-product-card p,
.shoe-benefits p {
    color: var(--muted);
    margin-bottom: 16px;
}

.shoe-product-card strong {
    color: var(--dark-blue);
    display: block;
    font-size: 1.4rem;
    margin-bottom: 18px;
}

.shoe-benefits {
    background: var(--bg-soft);
}

.shoe-benefits i {
    color: var(--primary-blue);
    font-size: 1.8rem;
    margin-bottom: 18px;
}

.sf-page {
    --sf-wine: #571045;
    --sf-plum: #81145f;
    --sf-rose: #e51c4b;
    --sf-coral: #f24a2e;
    --sf-mint: #1fc2a4;
    --sf-cream: #f7f1e8;
    --sf-ink: #201526;
    background: #fbf8f3;
    color: var(--sf-ink);
    font-family: "Inter", Arial, sans-serif;
}

.sf-page [hidden] {
    display: none !important;
}

.sf-footer {
    color: #765f71;
    font-size: 0.78rem;
    padding: 24px 18px;
    text-align: center;
}

.sf-topbar {
    align-items: center;
    background: linear-gradient(90deg, var(--sf-wine), #250c28);
    box-shadow: 0 12px 30px rgba(87, 16, 69, 0.22);
    color: var(--sf-cream);
    display: flex;
    gap: 28px;
    justify-content: space-between;
    min-height: 78px;
    padding: 12px 32px;
    position: sticky;
    top: 0;
    z-index: 30;
}

.sf-brand {
    align-items: center;
    display: flex;
    gap: 14px;
}

.sf-brand img {
    background: var(--sf-cream);
    border-radius: 16px;
    height: 54px;
    object-fit: cover;
    width: 54px;
}

.sf-brand strong,
.sf-brand span {
    display: block;
}

.sf-brand strong {
    font-size: 1.05rem;
    text-transform: uppercase;
}

.sf-brand span {
    color: #dfcfe0;
    font-size: 0.82rem;
    font-weight: 700;
}

.sf-nav {
    display: flex;
    gap: 22px;
}

.sf-nav a,
.sf-admin-link {
    align-items: center;
    color: var(--sf-cream);
    display: inline-flex;
    font-weight: 800;
    gap: 8px;
}

.sf-admin-link {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    padding: 10px 16px;
}

.sf-main {
    margin: 0 auto;
    max-width: 1480px;
    padding: 34px 28px 64px;
}

.sf-hero {
    align-items: center;
    background:
        radial-gradient(circle at 100% 0, rgba(31, 194, 164, 0.18), transparent 30%),
        linear-gradient(135deg, #ffffff, var(--sf-cream));
    border: 1px solid #eadfe8;
    border-radius: 12px;
    display: flex;
    gap: 28px;
    justify-content: space-between;
    margin-bottom: 24px;
    overflow: hidden;
    padding: 32px;
}

.sf-kicker {
    color: var(--sf-plum);
    display: block;
    font-size: 0.78rem;
    font-weight: 900;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.sf-hero h1 {
    color: var(--sf-wine);
    font-size: clamp(2.4rem, 5vw, 4rem);
    line-height: 1.05;
    margin-bottom: 12px;
}

.sf-hero p {
    color: #6e5b68;
    max-width: 660px;
}

.sf-hero-logo {
    border-radius: 28px;
    box-shadow: 0 20px 50px rgba(87, 16, 69, 0.22);
    height: 132px;
    object-fit: cover;
    width: 132px;
}

.sf-metrics {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 24px;
}

.sf-metrics article {
    background: #ffffff;
    border: 1px solid #eadfe8;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(87, 16, 69, 0.07);
    padding: 22px;
}

.sf-metrics i {
    align-items: center;
    background: #fff2f6;
    border-radius: 10px;
    color: var(--sf-rose);
    display: inline-flex;
    font-size: 1.5rem;
    height: 48px;
    justify-content: center;
    margin-bottom: 14px;
    width: 48px;
}

.sf-metrics span,
.sf-metrics strong {
    display: block;
}

.sf-metrics span {
    color: #7a6975;
    font-weight: 800;
    margin-bottom: 6px;
}

.sf-metrics strong {
    color: var(--sf-wine);
    font-size: 1.45rem;
}

.sf-table-shell {
    background: #ffffff;
    border: 1px solid #eadfe8;
    border-radius: 12px;
    box-shadow: 0 16px 42px rgba(87, 16, 69, 0.08);
    overflow: hidden;
}

.sf-table-header {
    align-items: center;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    padding: 24px;
}

.sf-table-header h2 {
    color: var(--sf-wine);
    font-size: 1.5rem;
}

.sf-table-header p {
    color: #7a6975;
}

.sf-primary-action {
    background: var(--sf-plum);
    border-radius: 8px;
    color: #ffffff;
    font-weight: 900;
    padding: 12px 16px;
}

.sf-filter-bar {
    border-top: 1px solid #f0e7ef;
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(220px, 360px));
    padding: 0 24px 22px;
}

.sf-filter-bar label {
    color: var(--sf-wine);
    display: grid;
    font-weight: 900;
    gap: 8px;
}

.sf-filter-bar select,
.sf-reserve-form input,
.sf-reserve-form select,
.sf-status-form select,
.sf-login-card input {
    border: 1px solid #eadfe8;
    border-radius: 8px;
    color: var(--sf-ink);
    font: inherit;
    min-height: 40px;
    padding: 8px 10px;
}

.sf-selection-empty {
    align-items: center;
    border-top: 1px solid #f0e7ef;
    color: #7a6975;
    display: grid;
    gap: 8px;
    justify-items: center;
    padding: 36px 24px;
    text-align: center;
}

.sf-selection-empty i {
    align-items: center;
    background: #fff2f6;
    border-radius: 12px;
    color: var(--sf-rose);
    display: inline-flex;
    font-size: 1.5rem;
    height: 52px;
    justify-content: center;
    width: 52px;
}

.sf-selection-empty strong {
    color: var(--sf-wine);
}

.sf-product-browser {
    display: grid;
    gap: 18px;
    padding: 0 24px 24px;
}

.sf-module-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sf-module-card {
    background: #ffffff;
    border: 1px solid #eadfe8;
    border-radius: 12px;
    box-shadow: 0 16px 42px rgba(87, 16, 69, 0.08);
    display: grid;
    gap: 12px;
    padding: 24px;
}

.sf-module-card > i {
    align-items: center;
    background: #fff2f6;
    border-radius: 12px;
    color: var(--sf-plum);
    display: inline-flex;
    font-size: 1.4rem;
    height: 48px;
    justify-content: center;
    width: 48px;
}

.sf-module-card h2 {
    color: var(--sf-wine);
}

.sf-module-card p,
.sf-module-card span {
    color: #7a6975;
}

.sf-module-card a {
    background: var(--sf-plum);
    border-radius: 8px;
    color: #ffffff;
    font-weight: 900;
    justify-self: start;
    padding: 10px 14px;
}

.sf-module-disabled {
    opacity: 0.58;
}

.sf-model-card {
    border-top: 1px solid #f0e7ef;
    padding-top: 22px;
}

.sf-model-header {
    align-items: center;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    margin-bottom: 16px;
}

.sf-model-header span {
    color: var(--sf-plum);
    display: block;
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.sf-model-header h3 {
    color: var(--sf-wine);
    font-size: 1.35rem;
    line-height: 1.2;
}

.sf-model-header > strong {
    background: var(--sf-cream);
    border-radius: 999px;
    color: var(--sf-wine);
    flex: 0 0 auto;
    font-size: 0.82rem;
    padding: 8px 12px;
}

.sf-variant-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sf-variant-card {
    background: #fffdfb;
    border: 1px solid #eadfe8;
    border-radius: 10px;
    display: grid;
    gap: 12px;
    padding: 14px;
}

.sf-product-photo,
.sf-product-placeholder {
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    width: 100%;
}

.sf-product-photo {
    background: var(--sf-cream);
    object-fit: cover;
}

.sf-product-placeholder {
    align-items: center;
    background:
        linear-gradient(135deg, rgba(87, 16, 69, 0.08), rgba(31, 194, 164, 0.12)),
        var(--sf-cream);
    color: var(--sf-plum);
    display: flex;
    font-size: 2rem;
    justify-content: center;
}

.sf-variant-details {
    display: grid;
    gap: 2px;
}

.sf-variant-details strong {
    color: var(--sf-wine);
    font-size: 1.05rem;
}

.sf-variant-details span,
.sf-variant-details small,
.sf-price-line span {
    color: #7a6975;
    font-size: 0.86rem;
    font-weight: 800;
}

.sf-variant-details small {
    font-weight: 700;
    margin-top: 4px;
}

.sf-price-line {
    align-items: center;
    border-top: 1px solid #f0e7ef;
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
}

.sf-price-line strong {
    color: var(--sf-wine);
}

.sf-table-scroll {
    overflow-x: auto;
}

.sf-admin-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sf-admin-panel {
    background: #ffffff;
    border: 1px solid #eadfe8;
    border-radius: 12px;
    box-shadow: 0 16px 42px rgba(87, 16, 69, 0.08);
    overflow: hidden;
}

.sf-panel-form {
    display: grid;
    gap: 16px;
    padding: 0 24px 24px;
}

.sf-panel-form p {
    display: grid;
    gap: 6px;
}

.sf-panel-form label {
    color: var(--sf-wine);
    font-weight: 900;
}

.sf-panel-form input,
.sf-panel-form select,
.sf-panel-form textarea {
    border: 1px solid #eadfe8;
    border-radius: 8px;
    color: var(--sf-ink);
    font: inherit;
    min-height: 44px;
    padding: 10px 12px;
    width: 100%;
}

.sf-panel-form textarea {
    min-height: 92px;
}

.sf-panel-form .helptext,
.sf-panel-form ul {
    color: #8d7c88;
    font-size: 0.82rem;
    list-style-position: inside;
}

.sf-panel-form .errorlist {
    background: #fff2f6;
    border: 1px solid #f3bfd1;
    border-radius: 8px;
    color: #8d164c;
    font-weight: 800;
    padding: 10px 12px;
}

.sf-list-spaced {
    border-top: 1px solid #f0e7ef;
    margin-top: 8px;
    padding-top: 20px;
}

.sf-list-spaced h3 {
    color: var(--sf-wine);
    font-size: 1rem;
    margin: 0;
}

.sf-panel-form button,
.sf-list button {
    background: var(--sf-plum);
    border: 0;
    border-radius: 8px;
    color: #ffffff;
    cursor: pointer;
    font-weight: 900;
    min-height: 44px;
    padding: 10px 14px;
}

.sf-list {
    display: grid;
    gap: 12px;
    padding: 0 24px 24px;
}

.sf-list article {
    align-items: center;
    background: #fffdfb;
    border: 1px solid #f0e7ef;
    border-radius: 10px;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    padding: 14px;
}

.sf-list strong,
.sf-list span {
    display: block;
}

.sf-list span,
.sf-list p {
    color: #7a6975;
}

.sf-table {
    border-collapse: collapse;
    min-width: 920px;
    width: 100%;
}

.sf-table th {
    background: var(--sf-wine);
    color: var(--sf-cream);
    font-size: 0.82rem;
    letter-spacing: 0;
    padding: 16px 18px;
    text-align: left;
    text-transform: uppercase;
}

.sf-table td {
    border-bottom: 1px solid #f0e7ef;
    color: var(--sf-ink);
    padding: 16px 18px;
}

.sf-product-cell {
    align-items: center;
    display: flex;
    gap: 12px;
}

.sf-product-cell strong,
.sf-product-cell small {
    display: block;
}

.sf-product-cell small {
    color: #8d7c88;
    margin-top: 2px;
}

.sf-product-icon {
    align-items: center;
    background: var(--sf-cream);
    border-radius: 10px;
    color: var(--sf-plum);
    display: inline-flex;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.sf-profit {
    color: #087f5b;
    font-weight: 900;
}

.sf-muted {
    color: #8d7c88;
    display: block;
    font-size: 0.78rem;
    margin-top: 2px;
}

.sf-section-gap {
    margin-top: 24px;
}

.sf-messages {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
}

.sf-messages p,
.sf-login-error {
    background: #fff2f6;
    border: 1px solid #ffd1de;
    border-radius: 8px;
    color: var(--sf-wine);
    font-weight: 800;
    padding: 12px 14px;
}

.sf-reserve-form,
.sf-status-form {
    display: grid;
    gap: 8px;
    min-width: 160px;
}

.sf-discount-field {
    color: var(--sf-wine);
    display: grid;
    font-size: 0.78rem;
    font-weight: 900;
    gap: 4px;
}

.sf-discount-field span {
    align-items: center;
    display: inline-flex;
    gap: 6px;
}

.sf-hidden {
    display: none;
}

.sf-reserve-form button,
.sf-status-form button {
    background: var(--sf-plum);
    border: 0;
    border-radius: 8px;
    color: #ffffff;
    cursor: pointer;
    font-weight: 900;
    min-height: 40px;
    padding: 8px 10px;
}

.sf-empty-stock {
    color: #a33a4e;
    font-weight: 900;
}

.sf-stock-readonly {
    color: #7a6975;
    font-size: 0.82rem;
    font-weight: 900;
}

.sf-stepper {
    align-items: center;
    display: grid;
    grid-template-columns: 40px 54px 40px;
    gap: 6px;
}

.sf-stepper button {
    align-items: center;
    background: var(--sf-cream);
    border: 1px solid #eadfe8;
    border-radius: 8px;
    color: var(--sf-wine);
    cursor: pointer;
    display: inline-flex;
    font-size: 1.1rem;
    font-weight: 900;
    height: 40px;
    justify-content: center;
}

.sf-stepper input {
    text-align: center;
}

.compact-form p {
    display: grid;
    gap: 6px;
}

.compact-form .helptext,
.compact-form ul {
    color: var(--muted);
    font-size: 0.82rem;
    list-style-position: inside;
}

.sf-login-page {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
}

.sf-login-card {
    background: #ffffff;
    border: 1px solid #eadfe8;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(87, 16, 69, 0.14);
    max-width: 440px;
    padding: 34px;
    width: 100%;
}

.sf-login-card img {
    border-radius: 22px;
    display: block;
    height: 96px;
    margin-bottom: 22px;
    object-fit: cover;
    width: 96px;
}

.sf-login-card h1 {
    color: var(--sf-wine);
    font-size: 2rem;
    line-height: 1.1;
    margin-bottom: 8px;
}

.sf-login-card p {
    color: #7a6975;
}

.about-content {
    align-items: center;
    display: grid;
    gap: 40px;
    grid-template-columns: 0.9fr 1.1fr;
}

footer {
    background: var(--dark-blue);
    color: var(--white);
    padding: 72px 0 20px;
}

.footer-content {
    display: grid;
    gap: 44px;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    margin-bottom: 52px;
}

.logo-light {
    align-items: center;
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.logo-light img {
    height: 42px;
    width: auto;
}

.footer-brand p,
.footer-content li,
.footer-content a {
    color: #a8b4c7;
}

.social-links {
    display: flex;
    gap: 16px;
    margin-top: 22px;
}

.footer-content h4 {
    margin-bottom: 18px;
}

.footer-content ul {
    list-style: none;
}

.footer-content li {
    margin-bottom: 10px;
}

.footer-contact li {
    align-items: center;
    display: flex;
    gap: 10px;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: #a8b4c7;
    font-size: 0.88rem;
    padding-top: 20px;
    text-align: center;
}

.footer-bottom a {
    color: #ffffff;
    font-weight: 800;
}

.cookie-banner {
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 8px;
    bottom: 18px;
    box-shadow: var(--shadow);
    display: flex;
    gap: 18px;
    justify-content: space-between;
    left: 50%;
    max-width: 980px;
    padding: 18px;
    position: fixed;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    z-index: 30;
}

.cookie-banner[hidden] {
    display: none;
}

.cookie-banner strong {
    color: var(--dark-blue);
    display: block;
    margin-bottom: 4px;
}

.cookie-banner p {
    color: var(--muted);
    margin: 0;
}

.cookie-actions {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
}

.cookie-actions a,
.cookie-actions button {
    border-radius: 8px;
    font: inherit;
    font-weight: 800;
    padding: 10px 12px;
}

.cookie-actions a {
    color: var(--primary-blue);
}

.cookie-actions button {
    border: 1px solid var(--line);
    cursor: pointer;
}

.cookie-actions button[data-cookie-accept] {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    color: #ffffff;
}

.privacy-shell {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
    display: grid;
    gap: 22px;
    max-width: 940px;
    padding: 36px;
}

.privacy-shell h1 {
    color: var(--dark-blue);
    font-size: clamp(2rem, 5vw, 3rem);
}

.privacy-shell h2 {
    color: var(--dark-blue);
    font-size: 1.25rem;
    margin-bottom: 8px;
}

.privacy-shell p {
    color: var(--muted);
}

.form-page,
.admin-page {
    background: var(--bg-soft);
    min-height: 68vh;
    padding: 64px 0;
}

.form-shell {
    max-width: 720px;
    padding: 34px;
}

.back-link {
    color: var(--primary-blue);
    display: inline-flex;
    font-weight: 800;
    gap: 8px;
    margin-bottom: 20px;
}

.form-shell h1 {
    color: var(--dark-blue);
    font-size: clamp(2rem, 5vw, 2.8rem);
    line-height: 1.1;
    margin-bottom: 10px;
}

.main-form {
    display: grid;
    gap: 18px;
    margin-top: 28px;
}

.main-form label,
.color-selection {
    color: var(--dark-blue);
    display: grid;
    font-weight: 800;
    gap: 8px;
}

.main-form input,
.main-form select,
.main-form textarea,
.admin-card input {
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    font: inherit;
    min-height: 48px;
    padding: 12px 14px;
}

.main-form textarea {
    resize: vertical;
}

.access-request-link {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 18px;
}

.access-request-link a {
    color: var(--primary-blue);
    font-weight: 800;
}

.form-note {
    color: var(--muted);
    font-size: 0.9rem;
    margin: -6px 0 0;
}

.colors-flex {
    display: flex;
    gap: 12px;
}

.colors-flex input {
    cursor: pointer;
    height: 48px;
    padding: 4px;
    width: 76px;
}

.form-button {
    border: 0;
    cursor: pointer;
    margin-top: 8px;
}

.success-message {
    background: #e8fff3;
    border: 1px solid #b7f0cf;
    border-radius: 8px;
    color: #05603a;
    font-weight: 800;
    margin-top: 22px;
    padding: 14px;
}

.form-error {
    background: #fff2f6;
    border: 1px solid #f3bfd1;
    border-radius: 8px;
    color: #8d164c;
    font-weight: 800;
    padding: 12px 14px;
}

.blue-page {
    --blue-deep: #06449f;
    --blue-bright: #078be8;
    --blue-ink: #07264a;
    --blue-soft: #eef7ff;
    background: #ffffff;
    color: var(--blue-ink);
    font-family: "Inter", sans-serif;
    margin: 0;
}

.blue-container {
    margin: 0 auto;
    max-width: 1180px;
    padding-left: 24px;
    padding-right: 24px;
}

.blue-header {
    background: #ffffff;
    border-bottom: 1px solid #dceaf7;
    position: sticky;
    top: 0;
    z-index: 10;
}

.blue-nav,
.blue-brand,
.blue-header nav,
.blue-actions,
.blue-trust-row,
.blue-course-meta,
.blue-contact-inner {
    align-items: center;
    display: flex;
}

.blue-nav {
    gap: 30px;
    justify-content: space-between;
    min-height: 104px;
}

.blue-brand {
    color: var(--blue-deep);
    gap: 10px;
}

.blue-brand img {
    height: 78px;
    object-fit: contain;
    width: 92px;
}

.blue-brand span,
.blue-brand strong,
.blue-brand small {
    display: block;
}

.blue-brand strong {
    font-size: 1rem;
}

.blue-brand small {
    color: #62748a;
    font-size: 0.72rem;
    margin-top: 3px;
}

.blue-header nav {
    gap: 22px;
}

.blue-header nav a {
    color: #294867;
    font-size: 0.9rem;
    font-weight: 700;
}

.blue-outline-action,
.blue-primary-action,
.blue-light-action {
    align-items: center;
    border-radius: 6px;
    display: inline-flex;
    font-weight: 800;
    gap: 8px;
    justify-content: center;
}

.blue-outline-action {
    border: 1px solid var(--blue-bright);
    color: var(--blue-deep);
    padding: 11px 14px;
}

.blue-hero {
    background: var(--blue-soft);
    padding: 54px 0 42px;
}

.blue-hero-grid {
    align-items: center;
    display: grid;
    gap: 48px;
    grid-template-columns: 1.05fr 0.95fr;
}

.blue-kicker,
.blue-section-heading > span,
.blue-contact span {
    color: var(--blue-bright);
    display: block;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.blue-hero h1 {
    color: var(--blue-ink);
    font-size: clamp(2.5rem, 5vw, 4.6rem);
    line-height: 1.02;
    margin: 0;
    max-width: 720px;
}

.blue-hero-copy > p {
    color: #4d6680;
    font-size: 1.05rem;
    line-height: 1.7;
    margin: 22px 0 0;
    max-width: 650px;
}

.blue-actions {
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 28px;
}

.blue-primary-action {
    background: var(--blue-deep);
    color: #ffffff;
    padding: 14px 18px;
}

.blue-text-action {
    color: var(--blue-deep);
    font-weight: 800;
}

.blue-trust-row {
    color: #496681;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 34px;
}

.blue-trust-row i,
.blue-course-meta i {
    color: var(--blue-bright);
    margin-right: 5px;
}

.blue-hero-media {
    min-height: 410px;
    overflow: hidden;
    position: relative;
}

.blue-hero-media > img {
    height: 100%;
    inset: 0;
    object-fit: cover;
    position: absolute;
    width: 100%;
}

.blue-media-note {
    align-items: center;
    background: #ffffff;
    bottom: 20px;
    display: flex;
    font-weight: 800;
    gap: 10px;
    left: 20px;
    padding: 14px 16px;
    position: absolute;
}

.blue-media-note i {
    color: var(--blue-bright);
}

.blue-highlight-band {
    background: var(--blue-deep);
    color: #ffffff;
    padding: 22px 0;
}

.blue-highlight-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(3, 1fr);
}

.blue-highlight-grid strong,
.blue-highlight-grid span {
    display: block;
}

.blue-highlight-grid span {
    color: #cfe7ff;
    font-size: 0.88rem;
    margin-top: 5px;
}

.blue-offer-section {
    background: #eaf5ff;
    padding: 32px 0 0;
}

.blue-offer-banner {
    background: #052f71;
    border-left: 8px solid var(--blue-bright);
    color: #ffffff;
    padding: 28px 34px;
    text-align: center;
}

.blue-offer-kicker {
    color: #a9dbff;
    display: block;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.blue-offer-kicker i {
    margin-right: 6px;
}

.blue-offer-banner h2 {
    color: #ffffff;
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1.06;
    margin: 12px auto 0;
    max-width: 940px;
}

.blue-offer-banner p {
    color: #dceeff;
    line-height: 1.6;
    margin: 14px auto 0;
    max-width: 780px;
}

.blue-payment-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 18px;
}

.blue-payment-row span {
    background: #ffffff;
    color: var(--blue-deep);
    font-size: 0.86rem;
    font-weight: 800;
    padding: 9px 12px;
}

.blue-payment-row i {
    color: var(--blue-bright);
    margin-right: 5px;
}

.blue-section {
    padding: 76px 0;
}

.blue-section-heading {
    max-width: 720px;
}

.blue-section-heading h2,
.blue-contact h2 {
    color: var(--blue-ink);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.06;
    margin: 0;
}

.blue-section-heading p,
.blue-course-content p,
.blue-benefit-grid p {
    color: #5f7183;
    line-height: 1.7;
}

.blue-course-card {
    border: 1px solid #dceaf7;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    margin-top: 32px;
}

.blue-course-photo img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.blue-course-content {
    padding: 34px;
}

.blue-course-tag {
    color: var(--blue-bright);
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
}

.blue-course-content h3 {
    color: var(--blue-ink);
    font-size: 1.75rem;
    margin: 12px 0;
}

.blue-course-meta {
    color: #526d87;
    flex-wrap: wrap;
    gap: 14px;
    margin: 24px 0;
}

.blue-benefits {
    background: var(--blue-soft);
}

.blue-benefit-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 30px;
}

.blue-benefit-grid article {
    background: #ffffff;
    border: 1px solid #dceaf7;
    padding: 24px;
}

.blue-benefit-grid i {
    color: var(--blue-bright);
    font-size: 1.6rem;
}

.blue-benefit-grid h3 {
    color: var(--blue-deep);
}

.blue-contact {
    background: var(--blue-deep);
    color: #ffffff;
    padding: 58px 0;
}

.blue-contact-inner {
    gap: 24px;
    justify-content: space-between;
}

.blue-contact h2 {
    color: #ffffff;
    max-width: 680px;
}

.blue-contact p {
    color: #cfe7ff;
}

.blue-light-action {
    background: #ffffff;
    color: var(--blue-deep);
    flex: 0 0 auto;
    padding: 14px 18px;
}

.blue-footer {
    background: #031f4d;
    color: #cfe7ff;
    font-size: 0.88rem;
}

.blue-footer-content {
    display: grid;
    gap: 46px;
    grid-template-columns: 1.45fr 0.8fr 1fr 1.25fr;
    padding-bottom: 54px;
    padding-top: 54px;
}

.blue-footer-logo {
    align-items: center;
    display: flex;
    gap: 12px;
}

.blue-footer-logo img {
    background: #ffffff;
    border-radius: 8px;
    height: 68px;
    object-fit: contain;
    padding: 4px;
    width: 78px;
}

.blue-footer-logo strong,
.blue-footer-logo span {
    display: block;
}

.blue-footer-logo strong {
    color: #ffffff;
    font-size: 1.25rem;
}

.blue-footer-logo span {
    color: #a9dbff;
    font-size: 0.78rem;
    margin-top: 4px;
}

.blue-footer-brand p {
    line-height: 1.7;
    margin: 18px 0;
    max-width: 310px;
}

.blue-footer-social {
    display: flex;
    gap: 16px;
}

.blue-footer-social a,
.blue-footer a {
    color: #cfe7ff;
}

.blue-footer-social a {
    font-size: 1.1rem;
}

.blue-footer h3 {
    color: #ffffff;
    font-size: 1rem;
    margin: 0 0 20px;
}

.blue-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.blue-footer li {
    line-height: 1.5;
    margin-bottom: 12px;
}

.blue-footer li i {
    color: #a9dbff;
    margin-right: 7px;
}

.blue-footer a:hover {
    color: #ffffff;
}

.blue-footer-bottom {
    border-top: 1px solid rgba(207, 231, 255, 0.18);
    padding: 20px 0;
    text-align: center;
}

.blue-footer-bottom p {
    margin: 0;
}

.blue-footer-bottom a {
    font-weight: 800;
    margin-left: 8px;
}

.blue-footer-bottom span {
    margin-left: 8px;
}

.blue-footer strong {
    color: #ffffff;
}

@media (max-width: 900px) {
    .portfolio-showcase-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .demo-hero-grid {
        grid-template-columns: 1fr;
    }

    .demo-hero-media {
        height: 330px;
    }

    .demo-story-grid {
        grid-template-columns: 1fr;
    }

    .blue-header nav {
        display: none;
    }

    .blue-hero-grid,
    .blue-course-card {
        grid-template-columns: 1fr;
    }

    .blue-hero-media {
        min-height: 300px;
    }

    .blue-highlight-grid,
    .blue-benefit-grid,
    .blue-footer-content {
        grid-template-columns: 1fr;
    }

    .blue-footer-content {
        gap: 28px;
        padding-bottom: 38px;
        padding-top: 38px;
    }
}

@media (max-width: 560px) {
    .portfolio-showcase-grid {
        grid-template-columns: 1fr;
    }

    .portfolio-showcase {
        min-height: auto;
    }

    .portfolio-showcase-copy {
        min-height: auto;
    }

    .demo-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .demo-header nav {
        display: none;
    }

    .demo-nav {
        gap: 12px;
    }

    .demo-nav .demo-button {
        font-size: 0.72rem;
        padding: 10px 12px;
    }

    .demo-hero {
        padding: 42px 0;
    }

    .demo-hero h1 {
        font-size: 3.25rem;
    }

    .demo-hero-media {
        gap: 8px;
        height: 280px;
    }

    .demo-carousel-button {
        display: none;
    }

    .blue-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .blue-brand img {
        height: 62px;
        width: 72px;
    }

    .blue-brand small {
        display: none;
    }

    .blue-outline-action {
        font-size: 0.76rem;
        padding: 9px;
    }

    .blue-hero {
        padding-top: 38px;
    }

    .blue-nav {
        min-height: 86px;
    }

    .blue-offer-banner {
        padding: 24px 18px;
        text-align: left;
    }

    .blue-payment-row {
        justify-content: flex-start;
    }

    .blue-hero h1 {
        font-size: 2.55rem;
    }

    .blue-contact-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .blue-course-content {
        padding: 22px;
    }
}

.admin-layout {
    display: grid;
    gap: 28px;
    grid-template-columns: 280px 1fr;
}

.admin-sidebar,
.admin-content {
    min-width: 0;
}

.sidebar-button {
    margin-top: 22px;
    width: 100%;
}

.admin-card {
    display: flex;
    gap: 12px;
    margin: 22px 0;
    padding: 18px;
}

.admin-card input {
    flex: 1;
}

.metrics-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 22px 0 30px;
}

.metric-card,
.admin-section,
.lead-item {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(16, 36, 64, 0.05);
}

.metric-card {
    padding: 18px;
}

.metric-card span {
    color: var(--muted);
    display: block;
    font-size: 0.82rem;
    font-weight: 800;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.metric-card strong {
    color: var(--dark-blue);
    font-size: 2rem;
    line-height: 1;
}

.admin-section {
    margin-bottom: 28px;
    padding: 22px;
}

.admin-section-header {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 16px;
}

.admin-section-header h3 {
    color: var(--dark-blue);
    font-size: 1.15rem;
}

.admin-section-header a {
    color: var(--primary-blue);
    font-weight: 800;
}

.lead-list {
    display: grid;
    gap: 12px;
}

.lead-item {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding: 16px;
}

.lead-item strong,
.lead-item span {
    display: block;
}

.lead-item span {
    color: var(--muted);
    font-size: 0.9rem;
    margin-top: 2px;
}

.request-list {
    display: grid;
    gap: 14px;
    margin-top: 22px;
}

.request-card {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 18px;
}

.request-card-header,
.request-contact {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
}

.request-card-header strong,
.request-card-header span {
    display: block;
}

.request-card-header strong {
    color: var(--dark-blue);
}

.request-card-header span,
.request-card p {
    color: var(--muted);
}

.request-contact {
    justify-content: flex-start;
    margin-top: 14px;
}

.request-contact span {
    color: var(--dark-blue);
    font-size: 0.9rem;
}

.request-contact i {
    color: var(--primary-blue);
    margin-right: 4px;
}

.request-card p {
    line-height: 1.6;
    margin: 14px 0 0;
}

.request-actions {
    align-items: flex-start;
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 16px;
    padding-top: 14px;
}

.request-approve-button {
    background: var(--primary-blue);
    border: 0;
    border-radius: 6px;
    color: #ffffff;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    padding: 11px 14px;
}

.request-reset-button {
    background: #ffffff;
    border: 1px solid var(--primary-blue);
    border-radius: 6px;
    color: var(--primary-blue);
    cursor: pointer;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 800;
    margin-top: 6px;
    padding: 9px 12px;
}

.request-approved {
    color: #05603a;
    font-weight: 800;
}

.request-approved i {
    margin-right: 4px;
}

.request-actions small {
    color: var(--muted);
}

.request-messages {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
}

.request-message {
    border-radius: 8px;
    font-weight: 700;
    margin: 0;
    padding: 13px 15px;
}

.request-message-success {
    background: #e8fff3;
    color: #05603a;
}

.request-message-warning {
    background: #fff7e6;
    color: #8a5200;
}

.request-message-info {
    background: #e6f0ff;
    color: #0052cc;
}

.status-pill {
    border-radius: 999px;
    flex: 0 0 auto;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 6px 10px;
}

.status-new {
    background: #e6f0ff;
    color: #0052cc;
}

.status-contacted {
    background: #fff7e6;
    color: #a15c00;
}

.status-proposal {
    background: #f0e8ff;
    color: #6941c6;
}

.status-closed {
    background: #e8fff3;
    color: #05603a;
}

.status-lost {
    background: #fff0f0;
    color: #b42318;
}

.empty-state {
    color: var(--muted);
}

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 980px) {
    .hero-content,
    .about-content,
    .admin-layout,
    .solutions-intro,
    .shoe-hero-grid {
        grid-template-columns: 1fr;
    }

    .hero-text {
        text-align: center;
    }

    .hero p,
    .hero-btns {
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
    }

    .services-grid,
    .solutions-grid,
    .plans-grid,
    .portfolio-grid,
    .shoe-products-grid,
    .shoe-benefits-grid,
    .footer-content,
    .metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sf-topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .sf-nav {
        flex-wrap: wrap;
    }

    .sf-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sf-variant-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sf-admin-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .nav {
        min-height: 74px;
    }

    .hamburger {
        display: inline-flex;
    }

    .header-cta {
        display: none;
    }

    .nav-links {
        background: var(--dark-blue);
        display: none;
        flex-direction: column;
        gap: 0;
        left: 0;
        padding: 12px 20px 24px;
        position: absolute;
        right: 0;
        top: 74px;
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links li {
        width: 100%;
    }

    .nav-links a {
        display: block;
        padding: 12px 0;
    }

    .brand {
        font-size: 1.35rem;
    }

    .tagline {
        font-size: 0.52rem;
    }

    .hero {
        padding-top: 30px;
    }

    .cookie-banner,
    .cookie-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .devices {
        min-height: 280px;
    }

    .services-grid,
    .solutions-grid,
    .plans-grid,
    .portfolio-grid,
    .shoe-products-grid,
    .shoe-benefits-grid,
    .footer-content,
    .metrics-grid {
        grid-template-columns: 1fr;
    }

    .shoe-showcase {
        grid-template-columns: 1fr;
    }

    .sf-main {
        padding: 22px 14px 44px;
    }

    .sf-hero,
    .sf-table-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .sf-hero-logo {
        height: 96px;
        width: 96px;
    }

    .sf-metrics {
        grid-template-columns: 1fr;
    }

    .sf-module-grid,
    .sf-variant-grid {
        grid-template-columns: 1fr;
    }

    .sf-filter-bar {
        grid-template-columns: 1fr;
    }

    .sf-model-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-card {
        flex-direction: column;
    }

    .lead-item,
    .sf-list article,
    .admin-section-header,
    .solutions-cta {
        align-items: flex-start;
        flex-direction: column;
    }
}