/* ==========================================================================

        KONCEPCJA PROJEKTOWA & FILOZOFIA CSS (zintegrowana)

        ========================================================================== */



:root {

    /* Kolory */

    --color-background: #F6F8F5;

    --color-background-alt: #EDF1EB;

    --color-surface: #FFFFFF;

    --color-text: #1E211D;

    --color-text-soft: #3A4238;

    --color-accent: #4F6F5B;

    --color-accent-hover: #3F5B49;

    --color-subtle: #8C9B91;

    --color-border: #1E211D1A;



    /* Efekty */

    --shadow-soft: 0 28px 60px rgba(30, 33, 29, 0.12);

    --shadow-card: 0 20px 45px rgba(30, 33, 29, 0.08);

    --gradient-primary: linear-gradient(120deg, #4f6f5b 0%, #3f5b49 45%, #77a089 100%);

    --gradient-soft: radial-gradient(circle at 20% 20%, rgba(79, 111, 91, 0.18), transparent 60%);



    /* Typografia */

    --font-heading: 'Sora', sans-serif;

    --font-body: 'Sora', sans-serif;



    /* Spacja & Rytm */

    --space-xs: 0.45rem;

    --space-s: 0.9rem;

    --space-m: 1.8rem;

    --space-l: 3.6rem;

    --space-xl: 7.2rem;

    --space-section: 8.5rem;



    /* Easing */

    --ease-out-human: cubic-bezier(0.22, 1, 0.36, 1);

}



        /* --- Global Reset & Base Styles --- */

        *, *::before, *::after {

            box-sizing: border-box;

            margin: 0;

            padding: 0;

        }



        html {

            scroll-behavior: smooth;

            font-size: 100%;

        }



body {

    background-color: var(--color-background);

    background-image: radial-gradient(ellipse at top right, rgba(79, 111, 91, 0.12), rgba(246, 248, 245, 0)),

                      radial-gradient(circle at 18% 22%, rgba(133, 160, 141, 0.12), rgba(246, 248, 245, 0));

    color: var(--color-text);

    font-family: var(--font-body);

    font-weight: 300;

    line-height: 1.7;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    overflow-x: hidden;

}



        /* --- Typografia --- */

        h1, h2, h3 {

            font-family: var(--font-heading);

            font-weight: 600;

            line-height: 1.1;

            letter-spacing: 0.05em;

            text-transform: uppercase;

        }



        h1 { font-size: clamp(3rem, 10vw, 6.5rem); }

        h2 { font-size: clamp(2.5rem, 7vw, 4rem); margin-bottom: var(--space-l); }

        h3 { font-size: clamp(1.5rem, 4vw, 2rem); margin-bottom: var(--space-m); }



        p {

            max-width: 65ch;

            margin-bottom: var(--space-m);

            font-size: clamp(0.9rem, 1.5vw, 1rem);

        }



        a {

            color: var(--color-text);

            text-decoration: none;

            position: relative;

            transition: color var(--ease-out-human) 300ms;

        }



        a::after {

            content: ''; position: absolute; bottom: -2px; left: 0;

            width: 100%; height: 1px; background-color: var(--color-accent);

            transform: scaleX(0); transform-origin: right;

            transition: transform var(--ease-out-human) 400ms;

        }



        a:hover::after, a:focus::after { transform: scaleX(1); transform-origin: left; }

        .footer-cookie-btn {



            background: none;



            border: none;



            color: inherit;



            font: inherit;



            cursor: pointer;



            padding: 0;



            position: relative;



            display: inline-flex;



            align-items: center;



        }



        .footer-cookie-btn::after {



            content: '';



            position: absolute;



            bottom: -2px;



            left: 0;



            width: 100%;



            height: 1px;



            background-color: var(--color-accent);



            transform: scaleX(0);



            transform-origin: right;



            transition: transform var(--ease-out-human) 400ms;



        }



        .footer-cookie-btn:hover::after,



        .footer-cookie-btn:focus::after {



            transform: scaleX(1);



            transform-origin: left;



        }



        .footer-cookie-btn:focus {



            outline: none;



        }



        .section-tag {

            font-family: var(--font-body); font-weight: 500; font-size: 0.8rem;

            color: var(--color-subtle); text-transform: uppercase;

            letter-spacing: 0.2em; margin-bottom: var(--space-s);

        }



        /* --- Layout & Grid System --- */

        .container { width: 90%; max-width: 1400px; margin: 0 auto; }

        .architect-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-m); align-items: center; }

                section {

            padding: var(--space-section) 0;

            border-bottom: 1px solid rgba(30, 33, 29, 0.08);

            position: relative;

            overflow: hidden;

            isolation: isolate;

        }

        

#proces {

    background: linear-gradient(180deg, rgba(242, 246, 241, 0.96) 0%, rgba(231, 236, 229, 0.96) 100%);

    position: relative;

}

#proces::before {

    content: '';

    position: absolute;

    inset: -15% -10% -25% 45%;

    background: radial-gradient(circle, rgba(79, 111, 91, 0.18), transparent 70%);

    opacity: 0.7;

    pointer-events: none;

}

#case-studies {

    background: linear-gradient(180deg, rgba(246, 248, 245, 0.9) 0%, rgba(255, 255, 255, 0.95) 100%);

}



                /* --- Header & Navigation --- */

        .main-header {

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            z-index: 1000;

            padding: 1.6rem 0 1.8rem;

            background-color: rgba(246, 248, 245, 0.92);

            backdrop-filter: blur(12px);

            transition: transform var(--ease-out-human) 400ms, box-shadow 400ms var(--ease-out-human);

            border-bottom: 1px solid rgba(30, 33, 29, 0.08);

            box-shadow: 0 20px 40px rgba(30, 33, 29, 0.08);

        }

        .main-header.is-hidden { transform: translateY(-100%); }

        .header-container { display: flex; justify-content: space-between; align-items: center; gap: 2rem; }

        .logo {

            display: inline-flex;

            align-items: center;

            gap: 0.6rem;

            font-family: var(--font-heading);

            font-weight: 600;

            font-size: 1.3rem;

            letter-spacing: 0.18em;

            text-transform: uppercase;

        }

        .logo::before {

            content: '';

            width: 12px;

            height: 12px;

            border-radius: 50%;

            background: var(--color-accent);

            box-shadow: 0 0 0 6px rgba(79, 111, 91, 0.18);

        }

        .main-nav ul { display: flex; list-style: none; gap: 2.4rem; }

        .header-cta-btn {

            display: inline-flex;

            flex-direction: column;

            align-items: center;

            justify-content: center;

            gap: 0.2rem;

            flex-shrink: 0;

            text-align: center;

            white-space: normal;

            text-decoration: none;

            background-image: var(--gradient-primary);

            color: #ffffff;

            padding: 0.65rem 1.6rem;

            border-radius: 999px;

            font-family: var(--font-heading);

            font-weight: 600;

            font-size: 0.75rem;

            letter-spacing: 0.1em;

            text-transform: uppercase;

            box-shadow: var(--shadow-soft);

            transition: transform 300ms var(--ease-out-human), box-shadow 300ms var(--ease-out-human), filter 300ms var(--ease-out-human);

        }

        .header-cta-btn span { display: block; line-height: 1.25; }

        .header-cta-btn:hover,

        .header-cta-btn:focus {

            transform: translateY(-2px);

            box-shadow: 0 18px 35px rgba(79, 111, 91, 0.25);

            filter: saturate(1.05);

        }

        .header-cta-btn:focus-visible {

            outline: 2px solid rgba(79, 111, 91, 0.5);

            outline-offset: 4px;

        }

        .main-nav a {

            font-size: 0.82rem;

            font-weight: 500;

            letter-spacing: 0.14em;

            text-transform: uppercase;

            padding-bottom: 0.3rem;

        }

        .main-nav a::after { bottom: -6px; height: 2px; background-color: var(--color-accent); }

                /* --- Hero Section --- */

        #hero {

            min-height: 100vh;

            display: flex;

            align-items: center;

            border-bottom: none;

            padding-top: 9rem;

            padding-bottom: var(--space-section);

            position: relative;

        }

        #hero::before {

            content: '';

            position: absolute;

            inset: 0;

            background: radial-gradient(ellipse at top left, rgba(79, 111, 91, 0.12), transparent 65%);

            opacity: 0.9;

            pointer-events: none;

        }

        #hero .container {

            position: relative;

            z-index: 1;

        }

        #hero .architect-grid {

            align-items: center;

            min-height: calc(100vh - 12rem);

            gap: clamp(2rem, 5vw, 4.5rem);

        }

        .hero-content {

            grid-column: 1 / 7;

            display: flex;

            flex-direction: column;

            gap: clamp(1rem, 2.4vw, 1.8rem);

            max-width: clamp(360px, 46vw, 560px);

            z-index: 2;

        }

        .hero-eyebrow {

            display: inline-flex;

            align-items: center;

            gap: 0.6rem;

            padding: 0.55rem 1.2rem;

            border-radius: 999px;

            border: 1px solid rgba(30, 33, 29, 0.12);

            text-transform: uppercase;

            letter-spacing: 0.18em;

            font-size: 0.75rem;

            background: rgba(255, 255, 255, 0.76);

            backdrop-filter: blur(6px);

            margin-bottom: var(--space-s);

        }

        .hero-eyebrow::before {

            content: '';

            width: 8px;

            height: 8px;

            border-radius: 50%;

            background: var(--color-accent);

            box-shadow: 0 0 0 4px rgba(79, 111, 91, 0.2);

        }

        .hero-content h1 {

            transform: none;

            margin-bottom: var(--space-s);

        }

        .hero-content h1 span {

            display: block;

            white-space: nowrap;

        }

        .hero-subtitle {

            font-size: clamp(1.05rem, 1.8vw, 1.3rem);

            max-width: 55ch;

            margin: 0;

            color: rgba(30, 33, 29, 0.74);

        }

        .hero-subtitle-break {

            display: block;

            margin-top: 0.35rem;

        }

        .hero-cta {

            display: flex;

            flex-wrap: wrap;

            gap: 1rem;

            margin-top: var(--space-m);

        }

        .hero-cta .btn,
        .hero-cta .btn-secondary {
            flex: 1 1 192px;
            min-width: 176px;
            text-align: center;
        }

        .hero-visual {

            grid-column: 8 / 13;

            display: grid;

            gap: clamp(1.4rem, 3vw, 2.6rem);

            justify-items: end;

            align-content: start;

            position: relative;

        }



        .hero-logo {

            width: clamp(260px, 36vw, 460px);

            height: auto;

            filter: brightness(0.92) contrast(0.98);

            display: block;

        }

        .hero-visual::before {

            content: '';

            position: absolute;

            inset: -18% -22% -18% 18%;

            background: radial-gradient(circle at 65% 20%, rgba(79, 111, 91, 0.18), transparent 70%);

            z-index: -1;

            opacity: 0.55;

            pointer-events: none;

        }

        .hero-floating-badge span {

            display: block;

            font-size: 0.62rem;

            opacity: 0.82;

            letter-spacing: 0.22em;

        }

/* --- "O Mnie" Section --- */

        .about-text {

            grid-column: 1 / 7;

            display: grid;

            align-content: center;

            gap: clamp(1rem, 2.4vw, 1.8rem);

            padding: clamp(2rem, 3vw, 3rem);

            border-radius: 28px;

            background: rgba(255, 255, 255, 0.92);

            border: 1px solid rgba(30, 33, 29, 0.08);

            box-shadow: var(--shadow-card);

            align-self: stretch;

            position: relative;

            overflow: hidden;

        }

        .about-text::before {

            content: '';

            position: absolute;

            inset: -30% -40% 50% 35%;

            background: radial-gradient(circle at 20% 20%, rgba(79, 111, 91, 0.16), transparent 65%);

            opacity: 0.9;

            pointer-events: none;

        }

        .about-text > * { position: relative; z-index: 1; }

        .about-text h3 { margin-bottom: 0; }

        .about-text h3 span { display: block; }

        .about-text p:not(.about-quote) { margin-bottom: 0; }

        .about-text p + p { margin-top: clamp(0.8rem, 2vw, 1.2rem); }

        .about-image-wrapper {

            grid-column: 8 / 13;

            position: relative;

            display: flex;

            flex-direction: column;

            align-items: center;

            justify-content: flex-end;

            min-height: 480px;

        }

        .about-image-wrapper::after {

            content: ';

            position: absolute;

            inset: 8% 5% -8% 12%;

            border-radius: 32px;

            border: 1px solid rgba(255, 255, 255, 0.4);

            box-shadow: 0 20px 45px rgba(30, 33, 29, 0.12);

            pointer-events: none;

        }

        .about-image {

            width: 100%;

            height: 100%;

            object-fit: cover;

            border-radius: 32px;

            filter: grayscale(100%) contrast(1.2);

            box-shadow: -4px 11px 22px rgba(0,0,0,0.07), 2px 3px 9px rgba(0,0,0,0.04);

        }

        .about-image-caption {

            margin-top: 1rem;

            font-size: 0.85rem;

            letter-spacing: 0.08em;

            text-transform: uppercase;

            color: rgba(30, 33, 29, 0.65);

        }

        .about-image-wrapper::after {

            content: '';

            position: absolute;

            inset: 8% 5% -8% 12%;

            border-radius: 32px;

            border: 1px solid rgba(255, 255, 255, 0.4);

            box-shadow: 0 20px 45px rgba(30, 33, 29, 0.12);

            pointer-events: none;

        }

        .about-image {

            width: 100%;

            height: 100%;

            object-fit: cover;

            border-radius: 32px;

            filter: grayscale(100%) contrast(1.2);

            box-shadow: -4px 11px 22px rgba(0,0,0,0.07), 2px 3px 9px rgba(0,0,0,0.04);

        }

        .about-quote {

            font-family: var(--font-heading); font-size: 1.4rem; letter-spacing: 0.05em;

            border-left: 2px solid var(--color-accent); padding-left: var(--space-m); margin-top: var(--space-l);

        }



                /* --- NOWA SEKCJA: Proces Pracy --- */

        .section-intro-grid {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: var(--space-m);
            align-items: center;
            margin-bottom: var(--space-xl);
        }

        .section-intro-grid > .section-intro-content {
            grid-column: 1 / 8;
        }

        .process-step {

            display: grid;

            grid-template-columns: repeat(12, 1fr);

            gap: var(--space-m);

            padding: var(--space-l);

            position: relative;

            border-radius: 32px;

            background: rgba(255, 255, 255, 0.9);

            border: 1px solid rgba(30, 33, 29, 0.08);

            box-shadow: var(--shadow-card);

            overflow: hidden;

            margin-bottom: var(--space-l);

        }

        .process-step:last-child { margin-bottom: 0; }

        .step-number-bg {

            font-family: var(--font-heading);

            font-size: clamp(10rem, 25vw, 18rem);

            font-weight: 600;

            color: rgba(0, 0, 0, 0.03);

            position: absolute;

            top: 50%;

            transform: translateY(-50%);

            z-index: 1;

            user-select: none;

        }

        .step-content {

            z-index: 2;

            position: relative;

        }

        .process-step:nth-child(odd) .step-number-bg {

            left: -5vw;

        }

        .process-step:nth-child(even) .step-number-bg {

            right: -5vw;

            text-align: right;

        }

        .process-step:nth-child(odd) .step-content {

            grid-column: 3 / 9;

        }

        .process-step:nth-child(even) .step-content {

            grid-column: 5 / 11;

        }

        .step-content h3 {

            color: var(--color-accent);

            letter-spacing: 0.08em;

            text-transform: uppercase;

            margin-bottom: var(--space-s);

        }

        /* --- Usługi Section --- */

        .services-intro {

            grid-column: 1 / 9;

            margin-bottom: var(--space-xl);

        }

        .services-grid {

            grid-column: 1 / 13;

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

            gap: 2.4rem;

        }

        .service-card {

            position: relative;

            padding: 2.4rem 2.2rem;

            border-radius: 28px;

            background: rgba(255, 255, 255, 0.92);

            border: 1px solid rgba(30, 33, 29, 0.08);

            box-shadow: var(--shadow-card);

            transition: transform 400ms var(--ease-out-human), box-shadow 400ms var(--ease-out-human);

            overflow: hidden;

            display: flex;

            flex-direction: column;

        }

        .service-card::after {

            content: '';

            position: absolute;

            inset: 0;

            background: linear-gradient(135deg, rgba(79, 111, 91, 0.15), transparent 65%);

            opacity: 0;

            transition: opacity 400ms var(--ease-out-human);

            z-index: 1;

        }

        .service-card:hover {

            transform: translateY(-12px);

            box-shadow: 0 30px 55px rgba(30, 33, 29, 0.12);

        }

        .service-card:hover::after { opacity: 1; }

        .service-card > * {

            position: relative;

            z-index: 2;

        }

        .service-card-number {

            font-family: var(--font-heading);

            font-size: 1rem;

            color: var(--color-subtle);

            letter-spacing: 0.2em;

            margin-bottom: var(--space-m);

        }

        .service-card h3 {

            font-size: 1.4rem;

            margin-bottom: var(--space-s);

        }

        .service-card p {

            font-size: 0.95rem;

            color: rgba(30, 33, 29, 0.72);

            flex-grow: 1;

            margin-bottom: var(--space-m);

        }

        .service-card .btn-secondary {

            margin-top: auto;

        }

        /* --- Modern Contact Form Styles --- */

        .contact-form-section {

            display: flex;

            gap: 2rem;

            align-items: flex-start;

        }

        .contact-info-compact {

            flex: 0 0 280px;

            display: flex;

            flex-direction: column;

            gap: 1.5rem;

        }

        .contact-form-header h3 {

            font-size: 1.4rem;

            font-weight: 600;

            color: var(--color-text);

            margin: 0 0 0.5rem 0;

            font-family: var(--font-heading);

        }

        .contact-form-header p {

            font-size: 0.9rem;

            color: var(--color-text-soft);

            margin: 0 0 1rem 0;

            line-height: 1.5;

        }

        .availability-info {

            display: flex;

            flex-direction: column;

            gap: 0.25rem;

            padding: 0.75rem;

            background: rgba(79, 111, 91, 0.03);

            border: 1px solid rgba(79, 111, 91, 0.05);

            border-radius: 8px;

        }

        .availability-label {

            font-size: 0.75rem;

            color: var(--color-text-soft);

            font-weight: 500;

            text-transform: uppercase;

            letter-spacing: 0.05em;

        }

        .availability-value {

            font-size: 0.875rem;

            color: var(--color-text);

            font-weight: 500;

        }

        .contact-quick-info {

            display: flex;

            flex-direction: column;

            gap: 1rem;

        }

        .quick-contact-item {

            display: flex;

            align-items: center;

            gap: 0.75rem;

            padding: 0.75rem;

            background: rgba(79, 111, 91, 0.04);

            border: 1px solid rgba(79, 111, 91, 0.06);

            border-radius: 10px;

            transition: all 250ms ease;

        }

        .quick-contact-item:hover {

            background: rgba(79, 111, 91, 0.06);

            border-color: rgba(79, 111, 91, 0.1);

        }

        .quick-icon {

            width: 32px;

            height: 32px;

            background: var(--color-accent);

            border-radius: 8px;

            display: flex;

            align-items: center;

            justify-content: center;

            color: white;

            flex-shrink: 0;

        }

        .quick-content {

            display: flex;

            flex-direction: column;

            gap: 0.125rem;

            min-width: 0;

        }

        .quick-label {

            font-size: 0.75rem;

            color: var(--color-text-soft);

            font-weight: 500;

            text-transform: uppercase;

            letter-spacing: 0.05em;

        }

        .quick-value {

            font-size: 0.875rem;

            color: var(--color-text);

            font-weight: 500;

            text-decoration: none;

            word-break: break-word;

        }

        .quick-value:hover {

            color: var(--color-accent);

        }

        .contact-form {

            flex: 1;

            background: rgba(255, 255, 255, 0.98);

            padding: 2rem;

            border-radius: 16px;

            box-shadow: 0 12px 32px rgba(30, 33, 29, 0.06), 0 1px 3px rgba(30, 33, 29, 0.03);

            border: 1px solid rgba(79, 111, 91, 0.08);

            backdrop-filter: blur(10px);

        }

        .form-grid {

            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 1.25rem;

            margin-bottom: 1.5rem;

        }

        .form-field {

            display: flex;

            flex-direction: column;

            gap: 0.5rem;

        }

        .form-field-full {

            grid-column: 1 / -1;

        }

        .form-label {

            display: flex;

            align-items: center;

            gap: 0.25rem;

            font-family: var(--font-heading);

            font-size: 0.875rem;

            font-weight: 500;

            color: var(--color-text);

        }

        .label-required {

            color: #e74c3c;

            font-weight: 600;

        }

        .input-wrapper,
        .textarea-wrapper,
        .select-wrapper {

            position: relative;

        }

        .form-input,
        .form-textarea,
        .form-select {

            width: 100%;

            padding: 1rem 1.125rem;

            border: 2px solid rgba(30, 33, 29, 0.08);

            border-radius: 12px;

            font-family: var(--font-body);

            font-size: 0.95rem;

            color: var(--color-text);

            background: rgba(255, 255, 255, 0.9);

            transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);

            position: relative;

            z-index: 1;

        }

        .form-input::placeholder,
        .form-textarea::placeholder {

            color: rgba(30, 33, 29, 0.5);

        }

        .form-input:focus,
        .form-textarea:focus,
        .form-select:focus {

            outline: none;

            border-color: var(--color-accent);

            background: #ffffff;

            transform: translateY(-1px);

        }

        .input-focus-ring,
        .textarea-focus-ring {

            position: absolute;

            inset: 0;

            border-radius: 12px;

            background: linear-gradient(135deg, rgba(79, 111, 91, 0.1), rgba(79, 111, 91, 0.05));

            opacity: 0;

            transition: opacity 300ms ease;

            pointer-events: none;

        }

        .form-input:focus + .input-focus-ring,
        .form-textarea:focus + .textarea-focus-ring {

            opacity: 1;

        }

        .form-textarea {

            resize: vertical;

            min-height: 100px;

            font-family: var(--font-body);

            line-height: 1.6;

        }

        .select-wrapper {

            position: relative;

        }

        .form-select {

            appearance: none;

            padding-right: 3rem;

            cursor: pointer;

        }

        .select-arrow {

            position: absolute;

            right: 1rem;

            top: 50%;

            transform: translateY(-50%);

            color: var(--color-text-soft);

            pointer-events: none;

            transition: transform 200ms ease;

        }

        .form-select:focus + .select-arrow {

            transform: translateY(-50%) rotate(180deg);

        }

        .form-consent {

            margin: 2rem 0;

            display: flex;

            flex-direction: column;

            gap: 1rem;

        }

        .consent-item {

            display: flex;

            align-items: flex-start;

        }

        .consent-label {

            display: flex !important;

            align-items: flex-start;

            gap: 0.75rem;

            cursor: pointer;

            font-size: 0.9rem;

            line-height: 1.5;

            color: var(--color-text);

        }

        .consent-checkbox {

            position: absolute;

            opacity: 0;

            width: 0;

            height: 0;

        }

        .consent-checkmark {

            width: 20px;

            height: 20px;

            border: 2px solid rgba(30, 33, 29, 0.2);

            border-radius: 5px;

            background: #ffffff;

            display: flex;

            align-items: center;

            justify-content: center;

            transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);

            flex-shrink: 0;

            margin-top: 1px;

        }

        .consent-checkmark svg {

            opacity: 0;

            transform: scale(0.5);

            transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);

        }

        .consent-checkbox:checked + .consent-checkmark {

            background: var(--color-accent);

            border-color: var(--color-accent);

            transform: scale(1.05);

        }

        .consent-checkbox:checked + .consent-checkmark svg {

            opacity: 1;

            transform: scale(1);

        }

        .consent-link {

            color: var(--color-accent);

            text-decoration: none;

            border-bottom: 1px solid transparent;

            transition: border-color 200ms ease;

        }

        .consent-link:hover {

            border-bottom-color: var(--color-accent);

        }

        .required-star {

            color: #e74c3c;

            font-weight: 600;

        }

        .form-submit {

            margin-top: 2rem;

        }

        .submit-button {

            width: 100%;

            padding: 1.25rem 2rem;

            background: var(--gradient-primary);

            border: none;

            border-radius: 12px;

            color: white;

            font-family: var(--font-heading);

            font-size: 1rem;

            font-weight: 600;

            cursor: pointer;

            position: relative;

            overflow: hidden;

            transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);

            box-shadow: 0 4px 15px rgba(79, 111, 91, 0.2);

        }

        .submit-button:hover {

            transform: translateY(-2px);

            box-shadow: 0 8px 25px rgba(79, 111, 91, 0.3);

        }

        .submit-button:active {

            transform: translateY(0);

        }

        .submit-loading,
        .submit-success {

            display: none;

            align-items: center;

            gap: 0.5rem;

        }

        .submit-button.loading .submit-text {

            display: none;

        }

        .submit-button.loading .submit-loading {

            display: flex;

        }

        .submit-button.success .submit-text,
        .submit-button.success .submit-loading {

            display: none;

        }

        .submit-button.success .submit-success {

            display: flex;

        }

        .loading-spinner {

            animation: spin 1s linear infinite;

        }

        @keyframes spin {

            to { transform: rotate(360deg); }

        }

        .contact-alternative {

            margin-top: 2.5rem;

            position: relative;

        }

        .alternative-divider {

            text-align: center;

            margin-bottom: 1.5rem;

            position: relative;

        }

        .alternative-divider::before {

            content: '';

            position: absolute;

            top: 50%;

            left: 0;

            right: 0;

            height: 1px;

            background: linear-gradient(90deg, transparent, rgba(30, 33, 29, 0.1), transparent);

        }

        .alternative-divider span {

            background: rgba(255, 255, 255, 0.95);

            padding: 0 1rem;

            font-size: 0.875rem;

            color: var(--color-text-soft);

            font-weight: 500;

        }

        .contact-direct {

            display: flex;

            flex-direction: column;

            gap: 0.75rem;

        }

        .contact-direct-item {

            display: flex;

            align-items: center;

            gap: 1rem;

            padding: 1rem 1.25rem;

            background: rgba(79, 111, 91, 0.04);

            border: 1px solid rgba(79, 111, 91, 0.08);

            border-radius: 12px;

            text-decoration: none;

            color: inherit;

            transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);

        }

        .contact-direct-item:hover {

            background: rgba(79, 111, 91, 0.08);

            border-color: rgba(79, 111, 91, 0.15);

            transform: translateY(-1px);

        }

        .direct-icon {

            width: 40px;

            height: 40px;

            background: var(--color-accent);

            border-radius: 10px;

            display: flex;

            align-items: center;

            justify-content: center;

            color: white;

            flex-shrink: 0;

        }

        .direct-content {

            display: flex;

            flex-direction: column;

            gap: 0.125rem;

        }

        .direct-label {

            font-size: 0.8rem;

            color: var(--color-text-soft);

            font-weight: 500;

            text-transform: uppercase;

            letter-spacing: 0.05em;

        }

        .direct-value {

            font-size: 0.95rem;

            color: var(--color-text);

            font-weight: 500;

        }

        /* Desktop layout for contact section */
        @media (min-width: 769px) {
            .contact-layout {
                grid-template-columns: 1fr 1.5fr;
            }
        }

        @media (max-width: 768px) {

            .contact-form-section {

                flex-direction: column;

                gap: 1.5rem;

            }

            .contact-info-compact {

                flex: none;

                order: 2;

            }

            .contact-form {

                order: 1;

                padding: 1.75rem 1.25rem;

            }

            .form-grid {

                grid-template-columns: 1fr;

                gap: 1rem;

            }

            .contact-quick-info {

                flex-direction: row;

                gap: 0.75rem;

            }

            .quick-contact-item {

                flex: 1;

                padding: 0.625rem;

            }

            .quick-icon {

                width: 28px;

                height: 28px;

            }

            .quick-value {

                font-size: 0.8rem;

            }

            .submit-button {

                padding: 1.125rem 1.5rem;

            }

        }

        /* --- Case Studies Section --- */

        .case-study-item {

            position: relative;

            display: grid;

            grid-template-columns: repeat(12, 1fr);

            gap: var(--space-m);

            align-items: stretch;

            padding: var(--space-m);

            border-radius: 32px;

            background: rgba(255, 255, 255, 0.92);

            border: 1px solid rgba(30, 33, 29, 0.08);

            box-shadow: var(--shadow-card);

            overflow: hidden;

            transition: transform 400ms var(--ease-out-human), box-shadow 400ms var(--ease-out-human);

        }

        .case-study-item + .case-study-item { margin-top: var(--space-m); }

        .case-study-item::after {

            content: '';

            position: absolute;

            inset: 0;

            background: linear-gradient(120deg, rgba(79, 111, 91, 0.18), transparent 65%);

            opacity: 0;

            transition: opacity 400ms var(--ease-out-human);

            z-index: 1;

        }

        .case-study-item:hover {

            transform: translateY(-10px);

            box-shadow: 0 30px 60px rgba(30, 33, 29, 0.12);

        }

        .case-study-item:hover::after { opacity: 1; }

        .case-study-image {

            grid-column: 1 / 6;

            width: 100%;

            height: 100%;

            min-height: 280px;

            object-fit: cover;

            border-radius: 24px;

            filter: saturate(0.95) brightness(1.02);

            position: relative;

            z-index: 2;

        }

        .case-study-content {

            grid-column: 6 / 13;

            position: relative;

            z-index: 2;

        }

        .case-study-content h3 { margin-bottom: var(--space-s); }

        .case-study-tags span {

            display: inline-flex;

            align-items: center;

            gap: 0.4rem;

            background-color: rgba(79, 111, 91, 0.12);

            border: none;

            border-radius: 999px;

            padding: 0.5rem 1rem;

            margin: 0 var(--space-s) var(--space-s) 0;

            font-size: 0.75rem;

            font-weight: 500;

            text-transform: uppercase;

            letter-spacing: 0.12em;

            color: rgba(30, 33, 29, 0.72);

        }



        /* --- Opinie Section --- */

        #opinie {

            background: linear-gradient(180deg, rgba(244, 247, 243, 0.96) 0%, rgba(237, 241, 235, 0.96) 100%);

            position: relative;

        }

        .testimonials-grid {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

            gap: 2rem;

            max-width: 1100px;

            margin: 0 auto;

        }

        .testimonial-card {

            position: relative;

            display: flex;

            flex-direction: column;

            gap: var(--space-s);

            padding: calc(var(--space-m) * 1.1);

            border-radius: 28px;

            background: rgba(255, 255, 255, 0.9);

            border: 1px solid rgba(30, 33, 29, 0.08);

            box-shadow: var(--shadow-card);

            overflow: hidden;

        }

        .testimonial-card::after {

            content: '';

            position: absolute;

            inset: 0;

            background: linear-gradient(140deg, rgba(79, 111, 91, 0.12), transparent 70%);

            opacity: 0;

            transition: opacity 350ms var(--ease-out-human);

            z-index: 1;

        }

        .testimonial-card:hover::after { opacity: 1; }

        .testimonial-card > * { position: relative; z-index: 2; }

        .testimonial-rating {

            display: inline-flex;

            gap: 0.4rem;

            color: var(--color-accent);

        }

        .testimonial-rating svg {

            width: 18px;

            height: 18px;

        }

        .testimonial-quote {

            font-size: 0.98rem;

            color: rgba(30, 33, 29, 0.74);

        }

        .testimonial-quote strong { color: var(--color-text); }

        .testimonial-author {

            margin-top: auto;

            display: flex;

            align-items: center;

            gap: 1rem;

        }

        .testimonial-avatar {

            width: 48px;

            height: 48px;

            border-radius: 999px;

            background: rgba(79, 111, 91, 0.2);

            color: var(--color-accent);

            display: flex;

            align-items: center;

            justify-content: center;

            font-family: var(--font-heading);

            letter-spacing: 0.14em;

            font-size: 1rem;

        }

        .testimonial-author-meta {

            display: flex;

            flex-direction: column;

            gap: 0.25rem;

        }

        .author-name {

            font-weight: 500;

            letter-spacing: 0.08em;

            text-transform: uppercase;

        }

        .author-role {

            font-size: 0.8rem;

            letter-spacing: 0.08em;

            text-transform: uppercase;

            color: rgba(60, 68, 58, 0.55);

        }



        /* --- Legal Pages --- */

.legal-page {

    padding-top: 7rem;

}

.legal-section {

    padding: var(--space-xl) 0;

    border-bottom: 1px solid rgba(30, 33, 29, 0.08);

}

.legal-header {

    max-width: 900px;

    margin: 0 auto var(--space-l);

    text-align: left;

    display: grid;

    gap: clamp(1rem, 2vw, 1.6rem);

}

.legal-lead {

    font-size: clamp(1rem, 1.6vw, 1.2rem);

    color: rgba(30, 33, 29, 0.72);

}

.legal-content {

    max-width: 900px;

    margin: 0 auto;

    display: grid;

    gap: var(--space-l);

    font-size: clamp(0.95rem, 1.5vw, 1.05rem);

    color: rgba(30, 33, 29, 0.78);

}

.legal-content h2 {

    color: var(--color-accent);

    letter-spacing: 0.06em;

    margin-bottom: var(--space-s);

    font-family: var(--font-heading);

    font-size: clamp(2rem, 5vw, 2.6rem);

}

.legal-content h3 {

    font-size: clamp(1.2rem, 3vw, 1.6rem);

    letter-spacing: 0.05em;

    margin-bottom: var(--space-s);

}

.legal-content p {

    margin-bottom: var(--space-s);

}

.legal-content a {

    color: var(--color-accent);

    font-weight: 500;

}

.legal-list {

    list-style: none;

    padding-left: 1.4rem;

    display: grid;

    gap: 0.6rem;

}

.legal-list li {

    position: relative;

}

.legal-list li::before {

    content: '';

    position: absolute;

    left: -1.4rem;

    top: 0.6em;

    width: 0.55rem;

    height: 0.55rem;

    border-radius: 50%;

    background: var(--color-accent);

    box-shadow: 0 0 0 4px rgba(79, 111, 91, 0.15);

}

.legal-steps {

    counter-reset: legal-step;

    list-style: none;

    padding-left: 0;

    display: grid;

    gap: 0.9rem;

}

.legal-steps li {

    counter-increment: legal-step;

    padding-left: 3rem;

    position: relative;

}

.legal-steps li::before {

    content: counter(legal-step, decimal-leading-zero);

    position: absolute;

    left: 0;

    top: 0.05rem;

    font-family: var(--font-heading);

    font-size: 1.2rem;

    letter-spacing: 0.12em;

    color: var(--color-subtle);

}

/* --- Sklep & Kontakt Sections --- */

        #sklep,

        #kontakt { text-align: left; }

        .section-intro { max-width: 70ch; margin: 0 0 var(--space-xl); text-align: left; }

        .products-grid {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

            gap: 2rem;

            max-width: 1000px;

            margin: 0 auto var(--space-l);

        }

        .product-card {

            position: relative;

            text-align: left;

            padding: var(--space-m);

            border-radius: 28px;

            background: rgba(255, 255, 255, 0.92);

            border: 1px solid rgba(30, 33, 29, 0.08);

            box-shadow: var(--shadow-card);

            overflow: hidden;

            transition: transform 350ms var(--ease-out-human), box-shadow 350ms var(--ease-out-human);

            display: flex;

            flex-direction: column;

        }

        .product-card::after {

            content: '';

            position: absolute;

            inset: 0;

            background: linear-gradient(140deg, rgba(79, 111, 91, 0.15), transparent 60%);

            opacity: 0;

            transition: opacity 350ms var(--ease-out-human);

            z-index: 1;

        }

        .product-card:hover {

            transform: translateY(-8px);

            box-shadow: 0 28px 50px rgba(30, 33, 29, 0.12);

        }

        .product-card:hover::after { opacity: 1; }

        .product-card > * {

            position: relative;

            z-index: 2;

        }

        .products-grid .btn {

            display: inline-flex;

            justify-content: center;

            align-items: center;

            width: 100%;

            margin-top: auto;

            text-align: center;

            padding: 0.875rem 1.5rem;

            font-size: 0.95rem;

        }

        .product-image {

            width: 100%;

            height: 200px;

            border-radius: 20px;

            margin-bottom: var(--space-m);

            display: flex;

            align-items: center;

            justify-content: center;

            background: linear-gradient(135deg, rgba(79, 111, 91, 0.18), rgba(255, 255, 255, 0.87));

            color: var(--color-accent);

        }

        .product-image svg { width: 50px; height: 50px; }

        .product-info {

            padding: 0 var(--space-s) var(--space-s);

            display: flex;

            flex-direction: column;

            flex-grow: 1;

        }

        .product-info h3 { font-size: 1.3rem; margin-bottom: var(--space-s); }

        .product-description {

            font-size: 0.9rem;

            color: var(--color-text-soft);

            line-height: 1.5;

            margin-bottom: var(--space-s);

        }

        .product-price {

            font-family: var(--font-body);

            font-weight: 500;

            letter-spacing: 0.08em;

            text-transform: uppercase;

            color: rgba(30, 33, 29, 0.65);

            margin-bottom: 1.5rem;

        }

        .btn {

            display: inline-flex;

            align-items: center;

            justify-content: center;

            gap: 0.5rem;

            font-family: var(--font-heading);

            font-weight: 600;

            font-size: 0.88rem;

            letter-spacing: 0.08em;

            text-transform: uppercase;

            background-image: var(--gradient-primary);

            color: #ffffff;

            padding: 0.8rem 2.2rem;

            border: none;

            border-radius: 999px;

            box-shadow: var(--shadow-soft);

            transition: transform 300ms var(--ease-out-human), box-shadow 300ms var(--ease-out-human), filter 300ms var(--ease-out-human);

        }

        .btn:hover,

        .btn:focus {

            transform: translateY(-3px);

            box-shadow: 0 25px 45px rgba(79, 111, 91, 0.25);

            filter: saturate(1.05);

        }

        .btn::after { display: none; }

        .btn-secondary {

            display: inline-flex;

            align-items: center;

            justify-content: center;

            gap: 0.4rem;

            font-family: var(--font-body);

            font-weight: 500;

            letter-spacing: 0.1em;

            text-transform: uppercase;

            padding: 0.76rem 2.1rem;

            border-radius: 999px;

            border: 1px solid rgba(30, 33, 29, 0.18);

            background: rgba(255, 255, 255, 0.82);

            color: var(--color-text);

            backdrop-filter: blur(6px);

            transition: background-color 300ms var(--ease-out-human), transform 300ms var(--ease-out-human);

        }

        .btn-secondary:hover,

        .btn-secondary:focus {

            background: rgba(79, 111, 91, 0.15);

            transform: translateY(-3px);

        }

        .contact-layout {

            display: grid;

            grid-template-columns: 1fr;

            gap: var(--space-l);

            align-items: start;

            background: rgba(255, 255, 255, 0.92);

            border-radius: 32px;

            padding: clamp(2.4rem, 5vw, 3.6rem);

            border: 1px solid rgba(30, 33, 29, 0.08);

            box-shadow: var(--shadow-card);

            position: relative;

            overflow: hidden;

        }

        .contact-layout::after {

            content: '';

            position: absolute;

            inset: 0;

            background: linear-gradient(135deg, rgba(79, 111, 91, 0.12), transparent 65%);

            opacity: 0.9;

            pointer-events: none;

        }

        .contact-copy {

            position: relative;

            z-index: 1;

            flex: 1;

            display: flex;

            flex-direction: column;

            gap: var(--space-m);

        }

        .contact-copy h2 { margin-bottom: 0; font-size: 1.8rem; }

        .contact-copy p { max-width: 55ch; color: rgba(30, 33, 29, 0.72); }

        .contact-meta {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

            gap: 1.1rem;

        }

        .contact-meta-item { display: flex; flex-direction: column; gap: 0.35rem; }

        .contact-meta-label { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.74rem; color: rgba(60, 68, 58, 0.55); }

        .contact-meta-value { font-weight: 500; letter-spacing: 0.05em; color: var(--color-text); }

        .contact-meta-value a { color: inherit; }

        .contact-action {

            position: relative;

            z-index: 1;

            display: flex;

            flex-direction: column;

            justify-content: center;

            gap: 1rem;

            min-width: 230px;

        }

        .contact-secondary { align-self: flex-start; }

        #kontakt h2 { font-size: clamp(3rem, 8vw, 5rem); }

/* --- Footer --- */

        .main-footer { padding: var(--space-l) 0; border-top: 1px solid var(--color-border); }

        .footer-content {

            display: flex; justify-content: space-between; align-items: center;

            font-size: 0.8rem; color: var(--color-subtle);

        }

        .footer-social {
            display: flex;
            align-items: center;
            gap: 1.5rem;
            font-family: var(--font-body);
            font-weight: 500;
        }



        .cookie-banner {
            position: fixed;
            bottom: 1rem;
            left: 1rem;
            right: 1rem;
            max-width: 560px;
            margin: 0 auto;
            padding: 1.2rem;
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.94);
            border: 1px solid rgba(30, 33, 29, 0.1);
            box-shadow: var(--shadow-soft);
            backdrop-filter: blur(10px);
            z-index: 2000;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            transform: translateY(200%);
            animation: slide-up 0.5s var(--ease-out-human) forwards;
            transition: transform 0.4s var(--ease-out-human);
        }

        .cookie-banner.cookie-banner--hidden {
            transform: translateY(200%);
        }


        @keyframes slide-up {
            to {
                transform: translateY(0);
            }
        }

        .cookie-banner__content {
            flex: 1 1 300px;
            font-size: 0.9rem;
            line-height: 1.6;
            color: var(--color-text-soft);
        }

        .cookie-banner__content a {
            color: var(--color-accent);
            font-weight: 500;
        }

        .cookie-banner__actions {
            display: flex;
            gap: 0.8rem;
            flex-wrap: wrap;
        }

        .cookie-banner__button {
            padding: 0.6rem 1.2rem;
            font-size: 0.8rem;
            min-width: 100px;
            text-align: center;
        }

        /* --- Cookie Settings Modal --- */
        .cookie-settings {
            position: fixed;
            inset: 0;
            z-index: 3000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.4s, visibility 0.4s;
        }

        .cookie-settings:not(.cookie-settings--hidden) {
            opacity: 1;
            visibility: visible;
        }

        .cookie-settings__backdrop {
            position: absolute;
            inset: 0;
            background: rgba(30, 33, 29, 0.6);
            backdrop-filter: blur(8px);
        }

        .cookie-settings__dialog {
            position: relative;
            z-index: 1;
            width: 100%;
            max-width: 520px;
            padding: 2rem;
            border-radius: 24px;
            background: var(--color-surface);
            box-shadow: var(--shadow-soft);
            border: 1px solid rgba(30, 33, 29, 0.1);
            transform: scale(0.95);
            transition: transform 0.4s var(--ease-out-human);
        }

        .cookie-settings:not(.cookie-settings--hidden) .cookie-settings__dialog {
            transform: scale(1);
        }


        .cookie-settings__close {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: none;
            border: none;
            font-size: 2rem;
            line-height: 1;
            color: var(--color-subtle);
            cursor: pointer;
        }

        #cookie-settings-title {
            font-size: 1.8rem;
            margin-bottom: 0.5rem;
        }

        .cookie-settings__intro {
            margin-bottom: 1.5rem;
            color: var(--color-text-soft);
        }

        .cookie-option {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            padding: 1rem 0;
            border-bottom: 1px solid var(--color-border);
        }
        .cookie-option:last-of-type {
            border-bottom: none;
        }

        .cookie-option__text {
            padding-right: 1rem;
        }

        .cookie-option__label {
            font-weight: 600;
            letter-spacing: 0.05em;
        }

        .cookie-option__description {
            font-size: 0.9rem;
            color: var(--color-text-soft);
            margin-bottom: 0;
        }

        .cookie-settings__actions {
            display: flex;
            justify-content: flex-end;
            gap: 1rem;
            margin-top: 2rem;
        }

        /* --- Switch Component for Cookies --- */
        .cookie-switch {
            position: relative;
            display: inline-block;
            width: 44px;
            height: 24px;
            flex-shrink: 0;
        }

        .cookie-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .cookie-switch__slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 24px;
        }

        .cookie-switch__slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }

        .cookie-switch input:checked + .cookie-switch__slider {
            background-color: var(--color-accent);
        }

        .cookie-switch input:disabled + .cookie-switch__slider {
            background-color: #ddd;
            cursor: not-allowed;
        }

        .cookie-switch input:focus + .cookie-switch__slider {
            box-shadow: 0 0 1px var(--color-accent);
        }

        .cookie-switch input:checked + .cookie-switch__slider:before {
            transform: translateX(20px);
        }

        body.cookie-settings-open {
            overflow: hidden;
        }

            align-items: center;

            z-index: 1100;

            font-size: 0.85rem;

            color: var(--color-text-soft);

            line-height: 1.55;

        }

        .cookie-banner__content strong {

            color: var(--color-text);

        }

        .cookie-banner__content a {

            color: var(--color-accent);

            font-weight: 500;

        }

        .cookie-banner__actions {

            display: flex;

            gap: 0.6rem;

            justify-self: end;

            align-items: center;

        }

        .cookie-banner__button {

            font-size: 0.78rem;

            letter-spacing: 0.08em;

            text-transform: uppercase;

            padding: 0.55rem 1.6rem;

        }

        .cookie-banner__button.btn {

            padding: 0.6rem 1.7rem;

        }

        .cookie-banner__button.btn-secondary {

            padding: 0.55rem 1.5rem;

            border: 1px solid rgba(30, 33, 29, 0.18);

            background: rgba(255, 255, 255, 0.88);

            color: var(--color-text);

        }

        .cookie-banner__button.btn-secondary:hover,

        .cookie-banner__button.btn-secondary:focus {

            background: rgba(79, 111, 91, 0.15);

        }

        .cookie-banner.cookie-banner--hidden {

            display: none;

        }

        .cookie-settings {

            position: fixed;

            inset: 0;

            display: flex;

            align-items: center;

            justify-content: center;

            padding: clamp(1.8rem, 4vw, 3rem);

            z-index: 1200;

            opacity: 1;

            pointer-events: auto;

            transition: opacity 240ms var(--ease-out-human);

        }

        .cookie-settings--hidden {

            opacity: 0;

            pointer-events: none;

        }

        .cookie-settings__backdrop {

            position: absolute;

            inset: 0;

            background: rgba(16, 20, 16, 0.45);

            backdrop-filter: blur(3px);

        }

        .cookie-settings__dialog {

            position: relative;

            background: var(--color-surface);

            border-radius: 24px;

            border: 1px solid rgba(30, 33, 29, 0.08);

            box-shadow: 0 32px 60px rgba(30, 33, 29, 0.16);

            padding: clamp(1.8rem, 3vw, 2.4rem);

            max-width: min(520px, 100%);

            width: 100%;

            display: grid;

            gap: clamp(1.2rem, 2vw, 1.6rem);

            z-index: 1;

            outline: none;

        }

        .cookie-settings__close {

            position: absolute;

            top: 0.7rem;

            right: 0.7rem;

            background: none;

            border: none;

            font-size: 1.6rem;

            line-height: 1;

            color: var(--color-subtle);

            cursor: pointer;

            padding: 0.2rem;

        }

        .cookie-settings__close:hover,

        .cookie-settings__close:focus {

            color: var(--color-text);

        }

        .cookie-settings__intro {

            font-size: 0.95rem;

            color: rgba(30, 33, 29, 0.7);

        }

        .cookie-option {

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 1.2rem;

            padding: 1.1rem 1.2rem;

            border-radius: 18px;

            border: 1px solid rgba(30, 33, 29, 0.08);

            background: rgba(246, 248, 245, 0.65);

        }

        .cookie-option__text {

            display: flex;

            flex-direction: column;

            gap: 0.35rem;

        }

        .cookie-option__label {

            font-family: var(--font-heading);

            text-transform: uppercase;

            letter-spacing: 0.09em;

            font-size: 0.92rem;

            color: var(--color-text);

        }

        .cookie-option__description {

            font-size: 0.82rem;

            color: rgba(30, 33, 29, 0.65);

            max-width: 32ch;

        }

        .cookie-option__control {

            display: flex;

            align-items: center;

            justify-content: center;

            flex-shrink: 0;

        }

        .cookie-switch {

            position: relative;

            display: inline-flex;

            align-items: center;

            width: 46px;

            height: 24px;

        }

        .cookie-switch input {

            position: absolute;

            inset: 0;

            opacity: 0;

            cursor: pointer;

        }

        .cookie-switch__slider {

            display: block;

            width: 100%;

            height: 100%;

            background: rgba(30, 33, 29, 0.25);

            border-radius: 999px;

            transition: background 200ms var(--ease-out-human);

        }

        .cookie-switch__slider::after {

            content: '';

            position: absolute;

            top: 3px;

            left: 3px;

            width: 18px;

            height: 18px;

            border-radius: 50%;

            background: #ffffff;

            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);

            transition: transform 200ms var(--ease-out-human);

        }

        .cookie-switch input:checked + .cookie-switch__slider {

            background: var(--color-accent);

        }

        .cookie-switch input:checked + .cookie-switch__slider::after {

            transform: translateX(22px);

        }

        .cookie-switch input:disabled + .cookie-switch__slider {

            background: rgba(30, 33, 29, 0.35);

            cursor: not-allowed;

        }

        .cookie-settings__actions {

            display: flex;

            justify-content: flex-end;

            gap: 0.8rem;

            flex-wrap: wrap;

        }

        .cookie-settings__actions .btn-secondary,

        .cookie-settings__actions .btn {

            padding: 0.7rem 1.8rem;

        }

        body.cookie-settings-open {

            overflow: hidden;

        }

        @media (max-width: 600px) {

            .cookie-banner {

                grid-template-columns: 1fr;

                gap: 0.8rem;

            }

            .cookie-banner__actions {

                justify-self: stretch;

                flex-wrap: wrap;

            }

            .cookie-banner__button {

                width: 100%;

                justify-content: center;

            }

            .cookie-settings {

                padding: 1.5rem;

            }

            .cookie-settings__dialog {

                padding: 1.6rem;

            }

            .cookie-option {

                flex-direction: column;

                align-items: flex-start;

            }

            .cookie-option__control {

                width: 100%;

                justify-content: flex-start;

            }

            .cookie-settings__actions {

                flex-direction: column;

                align-items: stretch;

            }

            .cookie-settings__actions .btn-secondary,

            .cookie-settings__actions .btn {

                width: 100%;

                justify-content: center;

            }

        }

        /* --- Accessibility & Animations --- */

        .reveal-on-scroll { opacity: 0; transform: translateY(30px); transition: opacity 800ms var(--ease-out-human), transform 800ms var(--ease-out-human); }

        .reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); }



        /* --- Responsive Design --- */

                @media (max-width: 900px) {

        .legal-page { padding-top: 6rem; }

        .legal-header { margin-bottom: var(--space-l); }

        .legal-content { gap: var(--space-m); padding: 0 0.5rem; }

        .legal-steps li { padding-left: 2.4rem; }

        .legal-steps li::before { font-size: 1rem; }



            .container { width: 94%; }

            section { padding: var(--space-xl) 0; }

            .main-nav { display: none; }

            .header-container { gap: 1.4rem; }

            .header-cta-btn {

                font-size: 0.68rem;

                padding: 0.6rem 1.3rem;

                letter-spacing: 0.09em;

            }

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

            #hero { text-align: center; padding-top: 8rem; }

            #hero .architect-grid { min-height: unset; }

            .hero-content { grid-column: 1 / -1; }

            .hero-cta { justify-content: center; }
            .hero-cta .btn,
            .hero-cta .btn-secondary { width: 100%; max-width: 320px; }

            .hero-visual { grid-column: 1 / -1; justify-items: center; gap: 1.8rem; }

            .hero-logo { width: min(80%, 260px); }

            .hero-subtitle { margin: var(--space-m) auto; }

            .about-image-wrapper {

            grid-column: 8 / 13;

            position: relative;

            display: flex;

            flex-direction: column;

            align-items: center;

            justify-content: flex-end;

            min-height: 480px;

        }

        .about-image-wrapper::after {

            content: ';

            position: absolute;

            inset: 8% 5% -8% 12%;

            border-radius: 32px;

            border: 1px solid rgba(255, 255, 255, 0.4);

            box-shadow: 0 20px 45px rgba(30, 33, 29, 0.12);

            pointer-events: none;

        }

        .about-image {

            width: 100%;

            height: 100%;

            object-fit: cover;

            border-radius: 32px;

            filter: grayscale(100%) contrast(1.2);

            box-shadow: -4px 11px 22px rgba(0,0,0,0.07), 2px 3px 9px rgba(0,0,0,0.04);

        }

        .about-image-caption {

            margin-top: 1rem;

            font-size: 0.85rem;

            letter-spacing: 0.08em;

            text-transform: uppercase;

            color: rgba(30, 33, 29, 0.65);

        }

            .about-text { grid-column: 1 / -1; }

            .process-step { grid-template-columns: 1fr; padding: var(--space-l) var(--space-m); }

            .process-step:nth-child(odd) .step-content,

            .process-step:nth-child(even) .step-content { grid-column: 1 / -1; }

            .step-number-bg { display: none; }

            .services-intro { grid-column: 1 / -1; }

            .case-study-image { grid-column: 1 / -1; margin-bottom: var(--space-m); height: 260px; }

            .case-study-content { grid-column: 1 / -1; }

            .case-study-item { text-align: left; }

            .testimonials-grid { grid-template-columns: 1fr; gap: var(--space-m); }

            .products-grid { margin-bottom: var(--space-l); grid-template-columns: 1fr; }

            .contact-layout { grid-template-columns: 1fr; padding: var(--space-l) var(--space-m); }

            .contact-action { min-width: 0; }

            .contact-secondary { align-self: stretch; }

            .footer-content { flex-direction: column; gap: var(--space-m); text-align: center; }
            .footer-social { justify-content: center; flex-wrap: wrap; gap: var(--space-m); }

        }
/* --- Contact Modal --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(30, 33, 29, 0.7);
    backdrop-filter: blur(8px);
    z-index: 2000;
    display: none; /* Initially hidden */
    align-items: center; /* Keep this to center for short modals */
    justify-content: center;
    overflow-y: auto; /* Enable scrolling for tall modals */
    padding: var(--space-m); /* Add padding for spacing */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s, visibility 0.4s;
}

.modal-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: var(--color-surface);
    padding: var(--space-l);
    border-radius: 24px;
    box-shadow: var(--shadow-soft);
    width: 90%;
    max-width: 600px;
    position: relative;
    transform: scale(0.95);
    transition: transform 0.4s var(--ease-out-human);
    margin: auto; /* This will help center it within the scrollable container */
}

.modal-overlay.is-visible .modal-content {
    transform: scale(1);
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    font-size: 2.5rem;
    color: var(--color-subtle);
    cursor: pointer;
    line-height: 1;
    background: none;
    border: none;
}
.modal-close:hover {
    color: var(--color-text);
}

.modal-content h2 {
    font-size: 1.8rem;
    margin-bottom: var(--space-s);
}
.modal-content > p {
    margin-bottom: var(--space-m);
}

.modal-contact-details {
    margin-bottom: var(--space-l);
    padding: var(--space-m);
    background: var(--color-background-alt);
    border-radius: 16px;
}
.modal-contact-details p {
    margin-bottom: var(--space-s);
}
.modal-contact-details p:last-child {
    margin-bottom: 0;
}

#modal-contact-form .form-group {
    margin-bottom: 0.6rem;
}
#modal-contact-form label {
    display: block;
    margin-bottom: var(--space-xs);
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--color-text-soft);
}
#modal-contact-form input[type="text"],
#modal-contact-form input[type="email"],
#modal-contact-form textarea,
#modal-contact-form select {
    width: 100%;
    padding: 0.8rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    font-family: var(--font-body);
    font-size: 1rem;
    background: #fff;
    transition: border-color 0.3s, box-shadow 0.3s;
}
#modal-contact-form input[type="text"]:focus,
#modal-contact-form input[type="email"]:focus,
#modal-contact-form textarea:focus,
#modal-contact-form select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(79, 111, 91, 0.2);
}

#modal-contact-form select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath fill='%234F6F5B' d='M6 7L0 1h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 12px;
    padding-right: 3rem;
    cursor: pointer;
    color: var(--color-text);
}

#modal-contact-form select option {
    color: var(--color-text);
    background: #fff;
    font-family: var(--font-body);
}

.form-group-gdpr {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    margin-bottom: var(--space-m);
}
.form-group-gdpr input[type="checkbox"] {
    width: auto;
    margin-top: 0.3rem;
    flex-shrink: 0;
}
.form-group-gdpr label {
    font-size: 0.85rem;
    color: var(--color-text-soft);
    line-height: 1.5;
    margin-bottom: 0;
}
.form-group-gdpr a {
    color: var(--color-accent);
    text-decoration: underline;
}
.form-group-gdpr a:hover {
    color: var(--color-accent-hover);
}
#modal-contact-form .btn {
    width: 100%;
}

/* Tooltip styles */
.field-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 0.5rem;
    cursor: help;
}

.field-tooltip svg {
    transition: all 0.3s ease;
}

.field-tooltip:hover svg circle {
    stroke: var(--color-accent);
}

.field-tooltip:hover svg text {
    fill: var(--color-accent);
}

.field-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: var(--color-text);
    color: white;
    padding: 0.8rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    line-height: 1.4;
    width: 280px;
    max-width: 90vw;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(30, 33, 29, 0.2);
    font-family: var(--font-body);
    font-weight: 400;
}

.field-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-2px);
    border: 6px solid transparent;
    border-top-color: var(--color-text);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 1001;
}

.field-tooltip:hover::after,
.field-tooltip:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Landing Page Specific Styles */

/* Improved heading hierarchy - compact */
.legal-page h1 {
    font-size: 2.2rem;
    line-height: 1.1;
    margin-bottom: var(--space-s);
}

.legal-page h2 {
    font-size: 1.8rem;
    line-height: 1.2;
    margin-bottom: var(--space-s);
}

.legal-page h3 {
    font-size: 1.4rem;
    line-height: 1.3;
    margin-bottom: var(--space-xs);
    color: var(--color-accent);
}

.legal-page h4 {
    font-size: 1.1rem;
    line-height: 1.3;
    margin-bottom: var(--space-xs);
    color: var(--color-accent);
}

.price-hero {
    text-align: center;
    margin: var(--space-m) 0 var(--space-l) 0;
    padding: var(--space-m);
    background: var(--gradient-soft);
    border-radius: 12px;
    border: 1px solid var(--color-border);
}

.price-value {
    display: block;
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--color-accent);
    margin-bottom: var(--space-xs);
}

.price-description {
    font-size: 0.9rem;
    color: var(--color-text-soft);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.testimonial-box {
    background: var(--color-surface);
    padding: var(--space-l);
    border-radius: 12px;
    border-left: 4px solid var(--color-accent);
    margin: var(--space-l) 0;
    box-shadow: var(--shadow-card);
}

.testimonial-box em {
    font-style: italic;
    color: var(--color-text);
    display: block;
    margin-bottom: var(--space-s);
    line-height: 1.6;
}

.testimonial-box span {
    color: var(--color-text-soft);
    font-size: 0.9rem;
    font-weight: 500;
}

.bonus-list, .category-list {
    margin: var(--space-m) 0;
}

.bonus-item, .category-item {
    background: var(--color-surface);
    padding: var(--space-s);
    border-radius: 8px;
    margin-bottom: var(--space-xs);
    border: 1px solid var(--color-border);
    box-shadow: 0 2px 8px rgba(30, 33, 29, 0.05);
}

.bonus-item:last-child, .category-item:last-child {
    margin-bottom: 0;
}

.bonus-item strong, .category-item h4 {
    color: var(--color-accent);
    margin-bottom: var(--space-xs);
    display: block;
}

.bonus-item p {
    margin: 0;
    color: var(--color-text-soft);
    font-size: 0.9rem;
}

.chapter-list h4 {
    color: var(--color-accent);
    margin: var(--space-s) 0 var(--space-xs) 0;
    font-size: 1rem;
    font-weight: 600;
}

.chapter-list ul {
    margin-bottom: var(--space-s);
}

.score-item {
    background: var(--color-surface);
    padding: var(--space-m);
    border-radius: 12px;
    margin-bottom: var(--space-s);
    border: 1px solid var(--color-border);
    box-shadow: 0 2px 8px rgba(30, 33, 29, 0.05);
}

.score-item strong {
    display: block;
    margin-bottom: var(--space-xs);
    font-weight: 600;
}

.score-item p {
    margin: 0;
    color: var(--color-text-soft);
    font-size: 0.9rem;
}

.scoring-system {
    margin: var(--space-m) 0;
}

.consultation-topics {
    margin: var(--space-m) 0;
}

.topic-item {
    background: var(--color-surface);
    padding: var(--space-s);
    border-radius: 8px;
    margin-bottom: var(--space-xs);
    border: 1px solid var(--color-border);
    box-shadow: 0 2px 8px rgba(30, 33, 29, 0.05);
}

.topic-item h4 {
    color: var(--color-accent);
    margin-bottom: var(--space-xs);
    font-size: 1rem;
}

.topic-item p {
    margin: 0;
    color: var(--color-text-soft);
    font-size: 0.9rem;
    line-height: 1.5;
}

.consultation-process {
    margin: var(--space-m) 0;
}

.process-step {
    background: var(--color-surface);
    padding: var(--space-s);
    border-radius: 8px;
    margin-bottom: var(--space-xs);
    border-left: 4px solid var(--color-accent);
    box-shadow: 0 2px 8px rgba(30, 33, 29, 0.05);
}

.process-step:last-child {
    margin-bottom: 0;
}

.process-step strong {
    color: var(--color-accent);
    display: block;
    margin-bottom: var(--space-xs);
}

.process-step p {
    margin: 0;
    color: var(--color-text-soft);
    font-size: 0.9rem;
}

.how-to-use {
    margin: var(--space-m) 0;
}

.step-item {
    background: var(--color-surface);
    padding: var(--space-s);
    border-radius: 8px;
    margin-bottom: var(--space-xs);
    border: 1px solid var(--color-border);
    position: relative;
    box-shadow: 0 2px 8px rgba(30, 33, 29, 0.05);
}

.step-item:last-child {
    margin-bottom: 0;
}

.step-item strong {
    color: var(--color-accent);
    margin-right: var(--space-xs);
}

.benefit-box, .expertise-box {
    background: var(--color-background-alt);
    padding: var(--space-m);
    border-radius: 8px;
    margin: var(--space-m) 0;
}

.benefit-box h4, .expertise-box h4 {
    color: var(--color-accent);
    margin-bottom: var(--space-s);
}

.consultation-options {
    margin: var(--space-l) 0;
}

.options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-m);
    margin-top: var(--space-m);
}

.option-card {
    background: var(--color-surface);
    padding: var(--space-m);
    border-radius: 8px;
    border: 1px solid var(--color-border);
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.option-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card);
}

.option-card h4 {
    color: var(--color-accent);
    margin-bottom: var(--space-s);
    font-size: 1.1rem;
}

.option-card p {
    color: var(--color-text-soft);
    margin-bottom: var(--space-m);
    line-height: 1.5;
}

.option-card strong {
    display: block;
    font-size: 1.3rem;
    color: var(--color-accent);
    font-weight: 600;
}

.guarantee-text {
    font-size: 0.9rem;
    color: var(--color-text-soft);
    text-align: center;
    margin: var(--space-s) 0 0 0;
}

.btn-primary {
    background: var(--gradient-primary);
    color: #FFFFFF !important;
    font-weight: 700;
    font-size: 1.1rem;
    padding: var(--space-m) var(--space-xl);
    border-radius: 8px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0 4px 15px rgba(79, 111, 91, 0.4);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 25px rgba(79, 111, 91, 0.5);
    color: #FFFFFF !important;
}

/* Better visual hierarchy and spacing - compact */
.architect-grid {
    margin-bottom: var(--space-l);
}

.architect-grid:last-child {
    margin-bottom: 0;
}

.cta-block {
    background: var(--color-background-alt);
    padding: var(--space-l);
    border-radius: 12px;
    text-align: center;
    margin-top: var(--space-l);
    border: 1px solid var(--color-border);
}

.cta-block h3 {
    margin-bottom: var(--space-s);
    font-size: 1.4rem;
}

.cta-block p {
    margin-bottom: var(--space-m);
    font-size: 1rem;
}

/* Cleaner lists */
.legal-list li {
    margin-bottom: var(--space-xs);
    line-height: 1.6;
}

.legal-list li:last-child {
    margin-bottom: 0;
}

/* More compact content */
.legal-page p {
    margin-bottom: var(--space-s);
    line-height: 1.5;
}

.legal-page ul {
    margin-bottom: var(--space-s);
}

.testimonial-box {
    margin: var(--space-m) 0;
    padding: var(--space-m);
}

@media (max-width: 768px) {
    .legal-page h1 {
        font-size: 1.6rem;
        margin-bottom: var(--space-xs);
    }

    .legal-page h2 {
        font-size: 1.4rem;
        margin-bottom: var(--space-xs);
    }

    .legal-page h3 {
        font-size: 1.2rem;
        margin-bottom: var(--space-xs);
    }

    .price-value {
        font-size: 1.8rem;
    }

    .price-hero {
        margin: var(--space-s) 0;
        padding: var(--space-s);
    }

    .architect-grid {
        margin-bottom: var(--space-m);
    }

    .options-grid {
        grid-template-columns: 1fr;
        gap: var(--space-s);
    }

    .bonus-item, .category-item, .topic-item, .process-step, .step-item {
        padding: var(--space-xs);
        margin-bottom: var(--space-xs);
    }

    .cta-block {
        padding: var(--space-m);
        margin-top: var(--space-m);
    }

    .cta-block h3 {
        font-size: 1.2rem;
        margin-bottom: var(--space-xs);
    }

    .cta-block p {
        margin-bottom: var(--space-s);
        font-size: 0.95rem;
    }

    .legal-page p {
        margin-bottom: var(--space-xs);
    }
}