/* Mockup 5 — vivid personal (human-first hero + blurred light-field palette) */
        :root {
            --cream: #F4F0EA;
            --off-white: #FFF9F2;
            --warm-black: #111018;
            --deep-brown: #14091A;
            --soft-grey: #625A67;
            --gold: #FF3F68;
            --gold-light: #18BFFF;
            --success: #00A87A;
            --error: #D93655;
            --yellow: #F8D84A;
            --violet: #8A4DFF;
            --paper-border: rgba(24, 191, 255, 0.22);
            --section-pink: #ed1359;
            --section-yellow: #e8df1b;
            --section-blue: #1da3d6;
        }

        section,
        .quote-section,
        .contact {
            scroll-margin-top: 88px;
        }

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

        nav {
            background: var(--section-pink);
            backdrop-filter: blur(18px);
            box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
        }

        nav .nav-logo {
            color: rgba(255, 249, 242, 0.96);
        }

        nav .nav-links a {
            color: rgba(255, 249, 242, 0.76);
        }

        nav .nav-links a:hover {
            color: #fff;
        }

        nav .nav-links .lang-link {
            border-left-color: rgba(255, 255, 255, 0.28);
        }

        nav .nav-toggle span {
            background: rgba(255, 249, 242, 0.96);
        }

        nav.scrolled {
            background: var(--section-pink);
            box-shadow: 0 1px 0 rgba(255, 255, 255, 0.16);
        }

        nav.scrolled .nav-logo {
            color: rgba(255, 249, 242, 0.96);
        }

        nav.scrolled .nav-links a {
            color: rgba(255, 249, 242, 0.76);
        }

        nav.scrolled .nav-links a:hover {
            color: #fff;
        }

        nav.scrolled .nav-links .lang-link {
            border-left-color: rgba(255, 255, 255, 0.28);
        }

        nav.scrolled .nav-toggle span {
            background: rgba(255, 249, 242, 0.96);
        }

        nav.menu-open {
            background: var(--section-pink);
            box-shadow: none;
        }

        nav.menu-open .nav-logo {
            color: rgba(255, 249, 242, 0.96);
            position: relative;
            z-index: 201;
        }

        nav.menu-open .nav-toggle span {
            background: rgba(255, 249, 242, 0.96);
        }

        .hero {
            min-height: 92vh;
            padding: 7rem 2rem 3.5rem;
            text-align: left;
            align-items: stretch;
            justify-content: center;
            overflow: hidden;
            color: var(--off-white);
            background:
                radial-gradient(ellipse 30rem 24rem at 18% 30%, rgba(24, 191, 255, 0.48) 0%, rgba(24, 191, 255, 0.24) 35%, rgba(24, 191, 255, 0) 68%),
                radial-gradient(ellipse 34rem 26rem at 36% 70%, rgba(255, 63, 104, 0.5) 0%, rgba(255, 63, 104, 0.24) 34%, rgba(255, 63, 104, 0) 70%),
                radial-gradient(ellipse 28rem 24rem at 75% 24%, rgba(138, 77, 255, 0.46) 0%, rgba(138, 77, 255, 0.22) 35%, rgba(138, 77, 255, 0) 72%),
                radial-gradient(ellipse 26rem 22rem at 85% 74%, rgba(248, 216, 74, 0.36) 0%, rgba(248, 216, 74, 0.16) 38%, rgba(248, 216, 74, 0) 72%),
                linear-gradient(125deg, #050508 0%, #080713 46%, #17071D 100%);
        }

        .hero::before {
            content: '';
            position: absolute;
            inset: -22%;
            display: block;
            background:
                radial-gradient(circle at 19% 28%, rgba(24, 191, 255, 0.95) 0%, rgba(24, 191, 255, 0.56) 10%, rgba(24, 191, 255, 0) 25%),
                radial-gradient(circle at 37% 38%, rgba(138, 77, 255, 0.86) 0%, rgba(138, 77, 255, 0.42) 12%, rgba(138, 77, 255, 0) 29%),
                radial-gradient(circle at 47% 72%, rgba(255, 63, 104, 0.92) 0%, rgba(255, 63, 104, 0.48) 12%, rgba(255, 63, 104, 0) 30%),
                radial-gradient(circle at 15% 76%, rgba(255, 63, 104, 0.96) 0%, rgba(255, 63, 104, 0.52) 10%, rgba(255, 63, 104, 0) 24%),
                radial-gradient(circle at 63% 20%, rgba(24, 191, 255, 1) 0%, rgba(24, 191, 255, 0.52) 12%, rgba(24, 191, 255, 0) 26%),
                radial-gradient(circle at 85% 72%, rgba(248, 216, 74, 0.82) 0%, rgba(248, 216, 74, 0.4) 10%, rgba(248, 216, 74, 0) 25%),
                radial-gradient(circle at 39% 57%, rgba(138, 77, 255, 0.78) 0%, rgba(138, 77, 255, 0.36) 13%, rgba(138, 77, 255, 0) 28%),
                linear-gradient(72deg, rgba(24, 191, 255, 0.5) 0%, rgba(24, 191, 255, 0) 34%),
                linear-gradient(205deg, rgba(255, 63, 104, 0) 34%, rgba(255, 63, 104, 0.58) 62%, rgba(255, 63, 104, 0) 84%),
                conic-gradient(from 210deg at 58% 36%, rgba(24, 191, 255, 0.78), rgba(138, 77, 255, 0.58), rgba(255, 63, 104, 0.7), rgba(248, 216, 74, 0.56), rgba(24, 191, 255, 0.78));
            filter: blur(24px) saturate(1.65);
            mix-blend-mode: screen;
            opacity: 1;
            transform: scale(1.08);
            pointer-events: none;
            z-index: 1;
        }

        .hero::after {
            content: '';
            position: absolute;
            inset: 0;
            background:
                linear-gradient(90deg, rgba(5, 5, 8, 0.62) 0%, rgba(5, 5, 8, 0.3) 50%, rgba(5, 5, 8, 0.54) 100%),
                linear-gradient(180deg, rgba(5, 5, 8, 0.06) 0%, rgba(5, 5, 8, 0.52) 100%);
            z-index: 0;
        }

        .hero-inner {
            width: min(1120px, 100%);
            margin: 0 auto;
            display: grid;
            grid-template-columns: minmax(0, 1.04fr) minmax(330px, 0.72fr);
            gap: clamp(2.5rem, 6vw, 5.5rem);
            align-items: center;
            position: relative;
            z-index: 2;
        }

        .hero-copy {
            max-width: 650px;
            position: relative;
            z-index: 2;
        }

        .hero-copy::before {
            display: none;
        }

        .hero-eyebrow {
            margin-bottom: 1.5rem;
            color: var(--gold-light);
            text-shadow: 0 0 24px rgba(24, 191, 255, 0.28);
        }

        .hero h1 {
            font-size: clamp(3.4rem, 7vw, 6.6rem);
            margin-bottom: 1.25rem;
            color: #fff;
            text-shadow: 0 20px 70px rgba(0, 0, 0, 0.42);
        }

        .hero h1 em {
            color: inherit;
        }

        .hero-sub {
            max-width: 560px;
            margin-bottom: 2.1rem;
            color: rgba(255, 249, 242, 0.82);
        }

        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 1.1rem 1.6rem;
            align-items: center;
        }

        .hero-cta {
            background: var(--section-blue);
            color: #fff;
            border-color: var(--section-blue);
            box-shadow: 0 18px 44px rgba(29, 163, 214, 0.28);
        }

        .hero-cta:hover {
            background: var(--section-blue);
            border-color: var(--section-blue);
            transform: translateY(-2px);
        }

        .hero-secondary {
            font-size: 0.85rem;
            font-weight: 500;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: rgba(255, 249, 242, 0.86);
            text-decoration: none;
            border-bottom: 1px solid rgba(24, 191, 255, 0.7);
            padding-bottom: 0.25rem;
        }

        .hero-secondary:hover {
            color: #fff;
        }

        .hero-portrait {
            position: relative;
            align-self: stretch;
            min-height: 540px;
            display: flex;
            align-items: center;
        }

        .hero-portrait::before {
            content: '';
            position: absolute;
            inset: 2rem -1.4rem -1.4rem 2rem;
            border: 1px solid rgba(24, 191, 255, 0.78);
            opacity: 0.9;
            box-shadow: 0 0 44px rgba(24, 191, 255, 0.14);
        }

        .hero-portrait::after {
            content: 'Zürich · DE / EN / IT / FR';
            position: absolute;
            right: -1.6rem;
            bottom: 2.4rem;
            writing-mode: vertical-rl;
            font-size: 0.72rem;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: rgba(255, 249, 242, 0.58);
        }

        .hero-portrait img {
            width: 100%;
            height: min(68vh, 640px);
            min-height: 500px;
            object-fit: cover;
            object-position: 50% 28%;
            position: relative;
            z-index: 1;
            filter: saturate(1.08) contrast(1.04);
            box-shadow: 0 34px 92px rgba(0, 0, 0, 0.58), 0 0 0 1px rgba(255, 255, 255, 0.12);
        }

        .scroll-indicator {
            bottom: 1.2rem;
            z-index: 2;
        }

        .about {
            padding-top: 6rem;
        }

        .about-grid {
            grid-template-columns: 1fr;
        }

        .credentials {
            border-top-color: rgba(24, 191, 255, 0.18);
        }

        .lessons {
            background:
                linear-gradient(135deg, rgba(24, 191, 255, 0.13) 0%, rgba(24, 191, 255, 0) 38%),
                linear-gradient(210deg, rgba(255, 63, 104, 0.16) 0%, rgba(255, 63, 104, 0) 45%),
                linear-gradient(145deg, #14091A 0%, #09070F 100%);
        }

        .lessons::before {
            background: none;
        }

        .lesson-cards {
            gap: 1.4rem;
        }

        .lesson-card {
            min-height: 260px;
            padding: 2.1rem;
            background: rgba(252, 248, 242, 0.055);
            border: 1px solid rgba(24, 191, 255, 0.2);
            border-radius: 8px;
            box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
            transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
        }

        .lesson-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, var(--gold-light), var(--violet), var(--gold));
            border-radius: 8px 8px 0 0;
        }

        .lesson-card:hover {
            transform: translateY(-4px);
            background: rgba(252, 248, 242, 0.075);
            border-color: rgba(24, 191, 255, 0.5);
        }

        .lesson-card-icon {
            width: 2.1rem;
            height: 2.1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.2rem;
            border: 1px solid rgba(24, 191, 255, 0.44);
            border-radius: 50%;
            font-family: 'Cormorant Garamond', serif;
            font-size: 1rem;
            color: var(--gold-light);
        }

        .lesson-card h3 {
            font-size: 1.55rem;
            margin-bottom: 0.65rem;
        }

        .lesson-card p {
            font-size: 0.98rem;
        }

        .booking-panel {
            display: grid;
            grid-template-columns: 1fr;
            gap: 3rem;
            margin-top: 3rem;
            padding: clamp(2rem, 4vw, 3.4rem);
            background: var(--section-yellow);
            color: var(--warm-black);
            border: 1px solid var(--paper-border);
            box-shadow: 0 24px 70px rgba(17, 16, 24, 0.1);
        }

        .booking-panel h3 {
            font-size: clamp(2rem, 4vw, 3rem);
            line-height: 1.1;
            margin-bottom: 1rem;
            color: var(--warm-black);
        }

        .booking-panel p {
            color: var(--warm-black);
        }

        .booking-list {
            display: grid;
            gap: 1rem;
            margin-top: 1.8rem;
        }

        .booking-item {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1rem;
            padding-top: 1rem;
            border-top: 1px solid rgba(24, 191, 255, 0.16);
        }

        .booking-number {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.5rem;
            line-height: 1;
            color: var(--gold);
        }

        .booking-item strong {
            display: block;
            color: var(--warm-black);
            font-weight: 500;
            margin-bottom: 0.15rem;
        }

        .booking-item span {
            color: var(--warm-black);
        }

        .booking-card {
            align-self: stretch;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 2rem;
            padding: 2rem;
            background: var(--deep-brown);
            color: var(--cream);
            box-shadow: 0 18px 44px rgba(20, 9, 26, 0.18);
        }

        .booking-card p {
            color: rgba(245, 240, 234, 0.78);
        }

        .booking-card-label {
            display: block;
            font-size: 0.76rem;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: var(--gold-light);
            margin-bottom: 0.7rem;
        }

        .booking-card-value {
            display: block;
            font-family: 'Cormorant Garamond', serif;
            font-size: 2.2rem;
            line-height: 1.05;
            color: var(--cream);
        }

        .booking-cta {
            display: inline-block;
            text-align: center;
            font-size: 0.85rem;
            font-weight: 500;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--warm-black);
            background: var(--gold-light);
            text-decoration: none;
            padding: 0.95rem 1.25rem;
            transition: background 0.25s ease, transform 0.25s ease;
        }

        .booking-cta:hover {
            background: var(--gold);
            color: #fff;
            transform: translateY(-2px);
        }

        .contact-form-panel {
            background: var(--section-pink);
            border-radius: 8px;
            border: 1px solid rgba(237, 19, 89, 0.22);
        }

        .contact-form-panel .form-field span {
            color: var(--warm-black);
        }

        .contact-form-panel .form-field input,
        .contact-form-panel .form-field textarea {
            background: var(--section-blue);
            border-color: rgba(17, 16, 24, 0.28);
            color: var(--warm-black);
        }

        .contact-form-panel .form-submit {
            background: var(--section-blue);
            border-color: var(--warm-black);
            color: var(--warm-black);
            box-shadow: 0 0 0 2px var(--warm-black) inset;
        }

        .form-field input:focus,
        .form-field textarea:focus {
            border-color: var(--warm-black);
            box-shadow: 0 0 0 3px rgba(17, 16, 24, 0.16);
        }

        .form-submit:hover {
            background: var(--section-blue);
            border-color: var(--warm-black);
        }

        .hero {
            background: var(--section-pink);
        }

        .hero::before,
        .hero::after {
            display: none;
        }

        .hero h1 em {
            color: inherit;
        }

        .hero-eyebrow,
        .hero-secondary {
            color: #fff;
        }

        .hero-secondary {
            border-bottom-color: rgba(255, 255, 255, 0.86);
        }

        .about {
            background: var(--section-yellow);
        }

        .quote-section,
        .lessons {
            background: var(--section-blue);
            color: #fff;
        }

        .quote-text,
        .quote-attr,
        .lessons .section-heading,
        .lessons .section-text {
            color: #fff;
        }

        .quote-mark,
        .lessons .section-label,
        .lesson-card-icon {
            color: var(--section-yellow);
        }

        .lesson-card {
            background: rgba(17, 16, 24, 0.12);
            border-color: rgba(255, 255, 255, 0.34);
        }

        .lesson-card:hover {
            background: rgba(17, 16, 24, 0.18);
            border-color: rgba(255, 255, 255, 0.58);
        }

        .lesson-card h3,
        .lesson-card p {
            color: #fff;
        }

        .pricing {
            background: var(--section-pink);
            color: #fff;
        }

        .pricing .section-label,
        .pricing .section-heading,
        .pricing .section-text {
            color: #fff;
        }

        .contact {
            background: var(--section-yellow);
            color: var(--warm-black);
        }

        .contact-grid {
            grid-template-columns: 1.05fr 1fr;
        }

        .contact-intro {
            max-width: 650px;
            margin-bottom: 3rem;
        }

        .contact-info .section-heading,
        .contact-info .section-text,
        .contact-channel-label,
        .contact-channel-value,
        .social-links a {
            color: var(--warm-black);
        }

        a.contact-channel:hover .contact-channel-value,
        .social-links a:hover {
            color: var(--section-pink);
        }

        @media (max-width: 980px) {
            .hero {
                min-height: auto;
                padding: 6.8rem 1.5rem 3rem;
            }

            .nav-links.open a {
                color: var(--warm-black);
            }

            nav.menu-open,
            nav.scrolled.menu-open {
                background: var(--section-yellow);
                backdrop-filter: none;
            }

            nav.menu-open .nav-logo,
            nav.scrolled.menu-open .nav-logo {
                color: var(--warm-black);
            }

            .nav-links.open,
            nav.scrolled .nav-links.open,
            nav.menu-open .nav-links.open {
                background: var(--section-yellow);
            }

            nav.scrolled .nav-links.open a,
            nav.menu-open .nav-links.open a {
                color: var(--warm-black);
            }

            nav.scrolled .nav-links.open a:hover,
            nav.menu-open .nav-links.open a:hover {
                color: var(--section-pink);
            }

            .nav-links.open .lang-link {
                border-top-color: rgba(98, 90, 103, 0.35);
            }

            nav.scrolled .nav-links.open .lang-link,
            nav.menu-open .nav-links.open .lang-link {
                border-left: none;
                border-top-color: rgba(98, 90, 103, 0.35);
            }

            nav .nav-toggle.open span {
                background: var(--warm-black);
            }

            nav.scrolled .nav-toggle.open span,
            nav.menu-open .nav-toggle.open span {
                background: var(--warm-black);
            }

            .hero-inner {
                grid-template-columns: 1fr;
                gap: 2.2rem;
            }

            .hero-copy {
                text-align: center;
                margin: 0 auto;
            }

            .hero-copy::before {
                margin: 0 auto 1.4rem;
                height: 48px;
            }

            .hero-actions {
                justify-content: center;
            }

            .hero-portrait {
                min-height: 0;
                max-width: 420px;
                margin: 0 auto;
                width: 100%;
            }

            .hero-portrait::before {
                inset: 1rem -0.75rem -0.75rem 1rem;
            }

            .hero-portrait::after {
                display: none;
            }

            .hero-portrait img {
                height: 320px;
                min-height: 0;
            }

            .scroll-indicator {
                display: none;
            }

            .booking-panel {
                grid-template-columns: 1fr;
            }

            .contact-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 600px) {
            section,
            .quote-section,
            .contact {
                scroll-margin-top: 74px;
            }

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

            nav {
                padding: 1rem 1.5rem;
            }

            .hero {
                padding: 6.2rem 1.25rem 2.4rem;
            }

            .hero-eyebrow {
                font-size: 0.72rem;
                letter-spacing: 0.22em;
                margin-bottom: 1rem;
            }

            .hero h1 {
                font-size: clamp(2.75rem, 14vw, 3.9rem);
                margin-bottom: 1rem;
            }

            .hero-sub {
                font-size: 1.03rem;
                margin-bottom: 1.45rem;
            }

            .hero-actions {
                gap: 0.9rem;
            }

            .hero-cta {
                width: 100%;
                text-align: center;
                padding: 0.95rem 1rem;
                letter-spacing: 0.16em;
            }

            .hero-secondary {
                font-size: 0.78rem;
            }

            .hero-portrait img {
                height: 250px;
            }

            .about {
                padding-top: 4rem;
            }

            .lesson-card {
                min-height: 0;
                padding: 1.7rem;
            }

            .booking-panel {
                padding: 1.5rem;
            }

            .booking-card {
                padding: 1.5rem;
            }
        }

/* Multilingual language switcher */
nav .nav-links .language-links {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    border-left: 1px solid rgba(255, 255, 255, 0.28);
    padding-left: 1.5rem;
    margin-left: 0.5rem;
}

nav .nav-links .language-link {
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 249, 242, 0.66);
}

nav .nav-links .language-link::after {
    display: none;
}

nav .nav-links .language-link:hover,
nav .nav-links .language-link.is-active {
    color: #fff;
}

@media (max-width: 900px) {
    .nav-links.open .language-links {
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.28);
        padding-left: 0;
        padding-top: 1rem;
        margin-left: 0;
        margin-top: 0.25rem;
    }
}