/* =========================================================
   MILLIE OS
========================================================= */


/* =========================================================
   PAGE
========================================================= */

.millie-os-page {
    position: relative;

    overflow: hidden;

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


/* =========================================================
   HERO
========================================================= */

.millie-os-hero {
    position: relative;

    overflow: hidden;

    padding: 6rem 0 3rem;
}


/* =========================================================
   HERO GRID
========================================================= */

.millie-os-hero-grid {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(420px, .95fr);

    align-items: center;

    gap: 4rem;

    min-height: 540px;
}


/* =========================================================
   HERO CONTENT
========================================================= */

.millie-os-hero-content {
    position: relative;

    z-index: 2;

    max-width: 700px;
}


/* ==========================================
   Eyebrow
========================================== */

.millie-os-hero .section-eyebrow {
    display: flex;
    align-items: center;
    justify-content: left;
    gap: .75rem;

    width: fit-content;
    margin-bottom: 2rem;

    color: #55a2f6;
    font-size: 13.6px;
    font-weight: 600;
    letter-spacing: .08em;
    line-height: 1;
    text-transform: uppercase;
}

.millie-os-hero .section-eyebrow .accent-line {
    display: block;

    width: 36px;
    height: 2px;

    flex-shrink: 0;

    background: #f28c28;
}


.millie-os-hero-title {
    margin: 0 0 1.75rem;

    color: #fff;

    font-size: clamp(3.5rem, 5.3vw, 5.8rem);
    font-weight: 700;
    line-height: .98;

    letter-spacing: -.045em;
}


.millie-os-hero-title span {
    color: var(--color-primary);
}


.millie-os-hero-text {
    max-width: 630px;

    margin-bottom: 2.5rem;
}


.millie-os-hero-text p {
    margin: 0;

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

    font-size: 1.05rem;
    line-height: 1.75;
}


/* =========================================================
   HERO BUTTONS
========================================================= */

.millie-os-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 1rem;

    margin-top: 2rem;
}


/* =========================================================
   HERO VISUAL
========================================================= */

.millie-os-hero-visual {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 460px;
}


/* =========================================================
   MILLIE OS CORE
========================================================= */

.millie-os-core {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    width: min(100%, 430px);

    aspect-ratio: 1;

    border: 1px solid rgba(77, 124, 255, .75);
    border-radius: 50%;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(40, 63, 115, .38),
            rgba(5, 12, 25, .94) 72%
        );

    box-shadow:
        0 0 0 18px rgba(77, 124, 255, .025),
        0 0 60px rgba(77, 124, 255, .28),
        0 0 130px rgba(77, 124, 255, .12);
}


.millie-os-core::before {
    content: "";

    position: absolute;

    inset: 18px;

    border: 1px solid rgba(77, 124, 255, .32);
    border-radius: inherit;
}


.millie-os-core::after {
    content: "";

    position: absolute;

    inset: -50px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(77, 124, 255, .08),
            transparent 68%
        );

    pointer-events: none;
}


/* =========================================================
   CORE CONTENT
========================================================= */

.millie-os-core-inner {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;
    flex-direction: column;
    justify-content: center;

    width: 100%;
    height: 100%;

    text-align: center;
}


/* ==========================================
   MILLIE OS — LOADING
========================================== */

.millie-os-visual-loader {
    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 1.5rem;
}

.millie-os-visual-loader img {
    display: block;

    width: 48px;
    height: 48px;

    object-fit: contain;

    animation: millie-os-loader-spin 3s linear infinite;
}

@keyframes millie-os-loader-spin {
    to {
        transform: rotate(360deg);
    }
}


@keyframes millie-os-spin {

    to {
        transform: rotate(360deg);
    }

}


.millie-os-core strong {
    display: block;

    margin-bottom: .8rem;

    color: #fff;

    font-size: clamp(2.2rem, 3vw, 3.1rem);
    font-weight: 700;

    line-height: 1;
}


.millie-os-core span {
    color: rgba(255, 255, 255, .55);

    font-size: .68rem;
    font-weight: 700;
    line-height: 1.7;

    letter-spacing: .22em;
}


/* =========================================================
   HERO SUMMARY
========================================================= */

.millie-os-hero-summary {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns: auto minmax(0, 1fr);

    align-items: center;

    gap: 1.75rem;

    width: 100%;

    margin-top: 3rem;

    padding: 1.5rem 2rem;

    border: 1px solid rgba(77, 124, 255, .28);
    border-radius: 18px;

    background:
        linear-gradient(
            100deg,
            rgba(13, 31, 63, .7),
            rgba(7, 17, 32, .8)
        );

    box-shadow:
        0 0 30px rgba(77, 124, 255, .05),
        inset 0 0 35px rgba(77, 124, 255, .02);
}


.millie-os-hero-summary::before {
    content: "";

    position: absolute;

    top: -1px;
    left: 50%;

    width: 120px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--color-secondary),
            var(--color-primary)
        );

    transform: translateX(-50%);
}

.millie-os-summary-label {
    display: inline-flex;
    align-items: center;

    flex-shrink: 0;

    padding: .55rem 1rem;

    border: 1px solid rgba(242, 140, 40, .5);
    border-radius: 999px;

    color: var(--color-accent);

    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .14em;
    line-height: 1;
    text-transform: uppercase;
}


.millie-os-hero-summary p {
    margin: 0;

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

    font-size: .9rem;
    line-height: 1.7;
}

/* =========================================================
   MILLIE OS — CZYM JEST MILLIE OS
========================================================= */

.millie-intro-section {
    position: relative;

    overflow: hidden;

    padding: 6rem 0 6rem;
}


/* ==========================================
   HEADER
========================================== */

.millie-intro-header {
    position: relative;

    z-index: 1;

    text-align: center;
}


.millie-intro-header .section-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    margin-bottom: 2rem;
    color: #55a2f6;
    font-size: 13.6px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}


.millie-intro-title {
    margin: 0;

    font-size: clamp(3.2rem, 5vw, 5.4rem);
    font-weight: 600;
    line-height: .98;
    letter-spacing: -.045em;

    color: #f4f4f1;
}


.millie-intro-title span {
    color: var(--color-primary);
}


/* ==========================================
   TIMELINE
========================================== */

.millie-intro-timeline {
    position: relative;

    z-index: 1;

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

    width: min(650px, 100%);

    margin: 4rem auto 3.75rem;
}


.millie-intro-timeline-line {
    position: absolute;

    top: 50%;
    left: 0;

    width: 100%;
    height: 1px;

    transform: translateY(-50%);

    background:
        linear-gradient(
            90deg,
            rgba(79, 125, 221, .75),
            rgba(79, 125, 221, .35)
        );
}


.millie-intro-timeline-point {
    position: relative;

    z-index: 1;

    width: 14px;
    height: 14px;

    border: 3px solid #4d7fe3;
    border-radius: 50%;

    background: #0d1a2d;

    box-shadow:
        0 0 0 5px rgba(66, 111, 208, .08),
        0 0 18px rgba(66, 111, 208, .35);
}


.millie-intro-timeline-point--active {
    width: 18px;
    height: 18px;

    border-color: #f5a038;

    background: #f5a038;

    box-shadow:
        0 0 0 5px rgba(245, 160, 56, .10),
        0 0 20px rgba(245, 160, 56, .8),
        0 0 40px rgba(245, 160, 56, .35);
}


/* ==========================================
   CONTENT
========================================== */

.millie-intro-content {
    position: relative;

    z-index: 1;

    width: min(900px, 100%);

    margin: 0 auto;

    text-align: center;
}


.millie-intro-column {
    width: 100%;
    padding: 0;
}


.millie-intro-column:first-child {
    border-right: none;
}


.millie-intro-column p {
    margin: 0;

    color: rgba(232, 236, 243, .72);

    font-size: 1.1rem;
    line-height: 1.8;
}


.millie-intro-column + .millie-intro-column {
    margin-top: 1.75rem;
}

/* =========================================================
   MILLIE OS — SILNIK WZROSTU
========================================================= */

.millie-growth {
    position: relative;

    padding: 7rem 0 8rem;
}


/* ==========================================
   HEADER
========================================== */

.millie-growth-header {
    max-width: 720px;

    margin-bottom: 4rem;
}


.millie-growth-header .section-eyebrow {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .75rem;

    width: fit-content;
    margin-bottom: 2rem;

    color: #55a2f6;
    font-size: 13.6px;
    font-weight: 600;
    letter-spacing: .08em;
    line-height: 1;
    text-transform: uppercase;
}

.millie-growth-header .section-eyebrow .accent-line {
    display: block;

    width: 36px;
    height: 2px;

    flex-shrink: 0;

    background: #f28c28;
}

.millie-growth-title {
    margin: 0 0 1.5rem;

    color: #f4f4f1;

    font-size: clamp(3rem, 5vw, 5rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.045em;
}


.millie-growth-title span {
    color: var(--color-primary);
}


.millie-growth-description {
    max-width: 620px;

    margin: 0;

    color: rgba(232, 236, 243, .68);

    font-size: 1rem;
    line-height: 1.8;
}


/* ==========================================
   GRID
========================================== */

.millie-growth-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));

    gap: 1rem;
}


.millie-growth-card {
    position: relative;

    grid-column: span 2;

    display: flex;
    flex-direction: column;

    min-height: 220px;

    padding: 2.25rem 1.75rem 1.5rem;

    overflow: hidden;

    border: 1px solid rgba(77, 124, 255, .26);
    border-radius: 20px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(77, 124, 255, .14),
            transparent 58%
        ),
        linear-gradient(
            160deg,
            rgba(34, 58, 110, .34),
            rgba(8, 18, 36, .46)
        );

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);

    transition:
        transform .3s ease,
        border-color .3s ease;
}


.millie-growth-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 1.5rem;

    width: 40px;
    height: 1px;

    background: #4d7fe3;
}


.millie-growth-card:nth-child(4),
.millie-growth-card:nth-child(5) {
    grid-column: span 3;
}


.millie-growth-card--radar {
    border-color: rgba(242, 140, 40, .3);

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(242, 140, 40, .14),
            transparent 58%
        ),
        linear-gradient(
            160deg,
            rgba(74, 52, 30, .3),
            rgba(14, 18, 32, .46)
        );
}


.millie-growth-card--radar::before {
    background: #f28c28;
}


.millie-growth-card:hover {
    transform: translateY(-4px);

    border-color: rgba(77, 124, 255, .5);
}


.millie-growth-card--radar:hover {
    border-color: rgba(242, 140, 40, .55);
}


/* ==========================================
   NUMBER
========================================== */

.millie-growth-number {
    position: absolute;

    top: 1rem;
    right: 1.25rem;

    color: transparent;

    font-size: 4.5rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.08em;

    -webkit-text-stroke: 1px rgba(242, 140, 40, .5);

    pointer-events: none;
}


.millie-growth-card--radar .millie-growth-number {
    -webkit-text-stroke-color: rgba(242, 140, 40, .55);
}


/* ==========================================
   CARD CONTENT
========================================== */

.millie-growth-card h3 {
    position: relative;

    margin: 1rem 0 .6rem;

    color: #f1f2f3;

    font-size: 1.15rem;
    font-weight: 600;
}


.millie-growth-card p {
    position: relative;

    max-width: 90%;

    margin: 0;

    color: rgba(232, 236, 243, .62);

    font-size: .82rem;
    line-height: 1.65;
}


.millie-growth-tags {
    position: relative;

    display: flex;
    flex-wrap: wrap;

    gap: .45rem;

    margin-top: 1.25rem;
}


.millie-growth-tags span {
    padding: .4rem .7rem;

    border: 1px solid rgba(242, 140, 40, .4);
    border-radius: 999px;

    background: rgba(242, 140, 40, .07);

    color: var(--color-accent);

    font-size: .65rem;
    line-height: 1;
}


.millie-growth-card--radar .millie-growth-tags span {
    border-color: rgba(242, 140, 40, .4);

    background: rgba(242, 140, 40, .07);

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


.millie-growth-link {
    position: relative;

    display: inline-flex;
    align-items: center;

    gap: .45rem;

    width: fit-content;

    margin-top: auto;
    padding-top: 1.5rem;

    color: #70a5f6;

    font-size: .72rem;
    font-weight: 600;

    text-decoration: none;
}


.millie-growth-link span {
    transition: transform .25s ease;
}


.millie-growth-link:hover span {
    transform: translateX(4px);
}


.millie-growth-card--radar .millie-growth-link {
    color: #e7a052;
}


/* ==========================================
   MILLIE GROWTH — CTA
========================================== */

.millie-growth-cta {
    position: relative;

    width: 100%;
    margin-top: 5rem;
    padding: 4.5rem 2rem;

    text-align: center;

    background:
        radial-gradient(
            circle at 50% 100%,
            rgba(77, 124, 255, 0.12),
            transparent 50%
        ),
        rgba(8, 19, 35, 0.88);

    border: 1px solid rgba(242, 140, 40, 0.5);
    border-radius: 36px;
}

.millie-growth-cta-line {
    display: flex;
    justify-content: center;

    margin-bottom: 1.5rem;
}

.millie-growth-cta-line span {
    display: block;

    width: 48px;
    height: 2px;

    background: linear-gradient(
        90deg,
        #f28c28,
        #55a2f6
    );
}

.millie-growth-cta h3 {
    margin: 0 0 1rem;

    color: #fff;
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 600;
    line-height: 1.15;
}

.millie-growth-cta p {
    max-width: 560px;
    margin: 0 auto 2rem;

    color: rgba(255, 255, 255, 0.62);
    line-height: 1.7;
}

/* ==========================================
   MILLIE COMPARISON
========================================== */

.millie-comparison {
    padding: 3rem 0;
}


/* ==========================================
   Eyebrow
========================================== */

.millie-comparison .section-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;

    width: fit-content;
    margin: 0 auto 2rem;

    color: #55a2f6;
    font-size: 13.6px;
    font-weight: 600;
    letter-spacing: .08em;
    line-height: 1;
    text-transform: uppercase;
}

.millie-comparison .section-eyebrow .accent-line {
    display: block;

    width: 36px;
    height: 2px;

    flex-shrink: 0;

    background: #f28c28;
}


/* ==========================================
   Heading
========================================== */

.millie-comparison__heading {
    text-align: center;
    margin-bottom: 4rem;
}

.millie-comparison__heading h2 {
    margin: 0;

    color: #f4f4f2;
    font-size: clamp(2.8rem, 5vw, 4.75rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.04em;
}

.millie-comparison__heading h2 span {
    color: #5b8df6;
}


/* ==========================================
   Comparison Grid
========================================== */

.millie-comparison__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;

    max-width: 1100px;
    margin: 0 auto;
}


/* ==========================================
   Cards
========================================== */

.millie-comparison__card {
    position: relative;

    padding: 3rem;

    border: 1px solid rgba(77, 124, 255, .2);
    border-radius: 24px;

    background: linear-gradient(
        135deg,
        rgba(27, 45, 75, .62),
        rgba(8, 18, 34, .35)
    );

    overflow: hidden;
}

.millie-comparison__card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 50%;

    width: 96px;
    height: 2px;

    transform: translateX(-50%);

    background: #f28c28;
    box-shadow: 0 0 16px rgba(242, 140, 40, .45);
}

.millie-comparison__card--before {
    border-color: rgba(77, 124, 255, .18);
}

.millie-comparison__card--after {
    border-color: rgba(85, 162, 246, .35);

    box-shadow:
        0 20px 50px rgba(0, 0, 0, .16),
        0 0 40px rgba(55, 103, 217, .08);
}


/* ==========================================
   Card Title
========================================== */

.millie-comparison__card-title {
    display: flex;
    align-items: center;
    gap: 1rem;

    margin-bottom: 2.5rem;
}


.millie-comparison__card h3 {
    margin: 0;

    color: #f4f4f2;
    font-size: 1.5rem;
    font-weight: 600;
}


/* ==========================================
   List
========================================== */

.millie-comparison__list {
    display: flex;
    flex-direction: column;
    gap: 0;

    margin: 0;
    padding: 0;

    list-style: none;
}

.millie-comparison__list li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;

    padding: 1.25rem 0;

    color: rgba(222, 228, 240, .7);
    font-size: .98rem;
    line-height: 1.6;

    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.millie-comparison__list li:first-child {
    padding-top: 0;
}

.millie-comparison__list li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}


/* ==========================================
   Dots
========================================== */

.millie-comparison__dot {
    display: block;

    width: 8px;
    height: 8px;

    flex-shrink: 0;

    margin-top: .48rem;

    border-radius: 50%;

    background: #5b8df6;

    box-shadow:
        0 0 0 4px rgba(91, 141, 246, .08),
        0 0 12px rgba(91, 141, 246, .45);
}

.millie-comparison__card--after .millie-comparison__dot {
    background: #f28c28;

    box-shadow:
        0 0 0 4px rgba(242, 140, 40, .08),
        0 0 12px rgba(242, 140, 40, .35);
}

/* ==========================================
   Millie OS – Jak to działa
========================================== */

.millie-process {
    position: relative;
    padding: 0 0 6rem;
}


/* ==========================================
   Heading
========================================== */

.millie-process__heading {
    text-align: center;
    margin-bottom: 5rem;
}

.millie-process .section-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;

    width: fit-content;
    margin: 0 auto 2rem;

    color: #55a2f6;
    font-size: 13.6px;
    font-weight: 600;
    letter-spacing: .08em;
    line-height: 1;
    text-transform: uppercase;
}

.millie-process .section-eyebrow .accent-line {
    display: block;

    width: 36px;
    height: 2px;

    flex-shrink: 0;

    background: #f28c28;
}

.millie-process__heading h2 {
    margin: 0;

    font-size: clamp(3rem, 5vw, 5.25rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.04em;
}

.millie-process__heading h2 span {
    background: linear-gradient(90deg, #4f8df5 0%, #739dff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}


/* ==========================================
   Steps
========================================== */

.millie-process__steps {
    position: relative;

    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;

    align-items: start;
}

.millie-process__line {
    position: absolute;

    top: 34px;
    left: 10%;
    right: 10%;

    height: 1px;

    background: linear-gradient(
        90deg,
        rgba(76, 132, 238, .65) 0%,
        rgba(100, 135, 205, .5) 45%,
        rgba(242, 140, 40, .8) 100%
    );

    z-index: 0;
}

.millie-process__step {
    position: relative;
    z-index: 1;

    text-align: center;
}

.millie-process__number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 68px;
    height: 68px;

    margin: 0 auto 1.25rem;

    border: 1px solid rgba(79, 141, 245, .7);
    border-radius: 50%;

    background: #091423;
    box-shadow:
        0 0 0 1px rgba(79, 141, 245, .08),
        0 0 24px rgba(79, 141, 245, .12);

    color: #76a4ff;
    font-size: 1.25rem;
    font-weight: 600;
}

.millie-process__step h3 {
    margin: 0 0 .55rem;

    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.3;
}

.millie-process__step p {
    max-width: 180px;
    margin: 0 auto;

    color: rgba(218, 226, 241, .62);
    font-size: .95rem;
    line-height: 1.55;
}


/* ==========================================
   Final step
========================================== */

.millie-process__step--final .millie-process__number {
    position: relative;

    border-color: rgba(242, 140, 40, .85);

    color: #f28c28;

    box-shadow:
        0 0 0 7px rgba(242, 140, 40, .05),
        0 0 0 1px rgba(242, 140, 40, .3),
        0 0 28px rgba(242, 140, 40, .25);
}

.millie-process__step--final h3 {
    color: #f28c28;
}

/* =========================================================
   CENNIK
========================================================= */

.millie-pricing {
    position: relative;

    padding: 6rem 0;
}

.millie-pricing__heading {
    margin-bottom: 3.5rem;

    text-align: center;
}

.millie-pricing .section-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: .75rem;

    width: fit-content;
    margin: 0 auto 2rem;

    color: #55a2f6;

    font-size: 13.6px;
    font-weight: 600;
    line-height: 1;

    letter-spacing: .08em;
    text-transform: uppercase;
}

.millie-pricing .section-eyebrow .accent-line {
    display: block;

    width: 36px;
    height: 2px;

    flex-shrink: 0;

    background: #f28c28;
}

.millie-pricing__heading h2 {
    max-width: 900px;
    margin: 0 auto;

    color: #fff;

    font-size: clamp(2.2rem, 3.6vw, 3.4rem);
    font-weight: 700;
    line-height: 1.1;

    letter-spacing: -.03em;
}

.millie-pricing__heading h2 span {
    color: var(--color-primary);
}


/* =========================
   SIATKA
========================= */

.millie-pricing__grid {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    align-items: stretch;

    gap: 1.5rem;
}


/* =========================
   KARTA
========================= */

.millie-pricing__card {
    position: relative;

    display: flex;
    flex-direction: column;

    padding: 2.5rem 2rem;

    box-sizing: border-box;
    overflow: hidden;

    border: 1px solid rgba(77, 124, 255, .22);
    border-radius: 20px;

    background:
        radial-gradient(
            circle at 85% 8%,
            rgba(77, 124, 255, .09),
            transparent 58%
        ),
        linear-gradient(
            150deg,
            rgba(16, 35, 72, .68),
            rgba(5, 15, 32, .94)
        );

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02);

    transition:
        border-color .3s ease,
        transform .3s ease;
}

.millie-pricing__card:hover {
    border-color: rgba(77, 124, 255, .42);

    transform: translateY(-4px);
}


/* wariant wyróżniony */

.millie-pricing__card--featured {
    border-color: rgba(242, 140, 40, .38);

    background:
        radial-gradient(
            circle at 85% 8%,
            rgba(242, 140, 40, .08),
            transparent 58%
        ),
        linear-gradient(
            150deg,
            rgba(30, 26, 24, .8),
            rgba(8, 12, 20, .96)
        );
}

.millie-pricing__card--featured::before {
    content: "";

    position: absolute;
    top: -1px;
    left: 50%;

    width: 130px;
    height: 2px;

    background: linear-gradient(
        90deg,
        var(--color-accent),
        var(--color-primary)
    );

    transform: translateX(-50%);
}

.millie-pricing__card--featured:hover {
    border-color: rgba(242, 140, 40, .6);
}


/* =========================
   BADGE
========================= */

.millie-pricing__badge {
    display: inline-flex;
    align-items: center;

    align-self: flex-start;

    margin-bottom: 1.25rem;
    padding: .5rem 1rem;

    border: 1px solid rgba(242, 140, 40, .45);
    border-radius: 999px;

    background: rgba(242, 140, 40, .07);

    color: #ffa257;

    font-size: .68rem;
    font-weight: 700;
    line-height: 1;

    letter-spacing: .1em;
    text-transform: uppercase;
}


/* =========================
   NAGŁÓWEK KARTY
========================= */

.millie-pricing__card-top {
    margin-bottom: 1.5rem;
}

.millie-pricing__name {
    margin: 0 0 .85rem;

    color: #fff;

    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.25;

    letter-spacing: -.02em;
}

.millie-pricing__price {
    color: var(--color-primary);

    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.1;

    letter-spacing: -.03em;
}

.millie-pricing__price span {
    color: var(--color-text-muted);

    font-size: 1rem;
    font-weight: 500;

    letter-spacing: 0;
}

.millie-pricing__card--featured .millie-pricing__price {
    color: var(--color-accent);
}

.millie-pricing__price--custom {
    font-size: 1.35rem;
    font-weight: 600;

    letter-spacing: -.02em;
}


/* =========================
   TREŚĆ
========================= */

.millie-pricing__lead {
    margin: 0;

    color: #e8edf7;

    font-size: 1rem;
    font-weight: 500;
    line-height: 1.6;
}

.millie-pricing__divider {
    width: 48px;
    height: 2px;

    margin: 1.5rem 0;

    background: linear-gradient(
        90deg,
        var(--color-accent),
        var(--color-primary)
    );
}

.millie-pricing__description {
    margin: 0 0 2rem;

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

    font-size: .95rem;
    line-height: 1.7;
}


/* =========================
   PRZYCISK
========================= */

.millie-pricing__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 1rem;

    margin-top: auto;
    padding: .9rem 1.75rem;

    border: 1px solid var(--color-primary);
    border-radius: 999px;

    color: #fff;
    text-decoration: none;

    font-size: .95rem;
    font-weight: 600;
    line-height: 1;

    transition: background .3s ease;
}

.millie-pricing__arrow {
    color: var(--color-primary);

    font-size: 1.15rem;
    line-height: 1;

    transition: transform .3s ease;
}

.millie-pricing__link:hover {
    background: rgba(77, 124, 255, .08);
}

.millie-pricing__link:hover .millie-pricing__arrow {
    transform: translateX(5px);
}

.millie-pricing__card--featured .millie-pricing__link {
    border-color: var(--color-accent);
}

.millie-pricing__card--featured .millie-pricing__arrow {
    color: var(--color-accent);
}

.millie-pricing__card--featured .millie-pricing__link:hover {
    background: rgba(242, 140, 40, .08);
}


/* =========================
   NOTKA
========================= */

.millie-pricing__note {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 1rem;

    margin-top: 2.5rem;
}

.millie-pricing__note-line {
    display: block;

    width: 36px;
    height: 2px;

    flex-shrink: 0;

    background: rgba(242, 140, 40, .6);
}

.millie-pricing__note p {
    margin: 0;

    color: rgba(165, 178, 198, .7);

    font-size: .9rem;
    line-height: 1.6;
}


/* =========================================================
   RESPONSIVE — 1024px
========================================================= */

@media (max-width: 1024px) {

    .millie-pricing {
        padding: 4.5rem 0;
    }

    .millie-pricing__grid {
        grid-template-columns: 1fr;

        gap: 1.25rem;
    }

    .millie-pricing__card {
        padding: 2.25rem 1.75rem;
    }

}


/* =========================================================
   RESPONSIVE — 600px
========================================================= */

@media (max-width: 600px) {

    .millie-pricing {
        padding: 3.5rem 0;
    }

    .millie-pricing__heading {
        margin-bottom: 2.5rem;
    }

    .millie-pricing__card {
        padding: 2rem 1.5rem;

        border-radius: 18px;
    }

    .millie-pricing__price {
        font-size: 1.6rem;
    }

    .millie-pricing__link {
        width: 100%;
    }

    .millie-pricing__note {
        flex-direction: column;

        gap: .75rem;

        text-align: center;
    }

}

/* ==========================================
   MILLIE QUOTE
========================================== */

.millie-quote {
    padding: 1.5rem;
}


/* ==========================================
   CARD
========================================== */

.millie-quote-card {
    position: relative;

    display: grid;
    grid-template-columns: 220px 1fr;
    align-items: center;

    gap: 3rem;

    width: 100%;
    margin: 0;
    padding: 2.25rem 2.75rem;

    box-sizing: border-box;
    overflow: hidden;

    border: 1px solid rgba(242, 140, 40, .42);
    border-radius: 20px;

    background:
        radial-gradient(
            circle at 72% 100%,
            rgba(77, 124, 255, .10),
            transparent 42%
        ),
        radial-gradient(
            circle at 18% 50%,
            rgba(242, 140, 40, .025),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            #151515 0%,
            #111317 48%,
            #0b111d 100%
        );

    box-shadow:
        0 25px 70px rgba(0, 0, 0, .25),
        0 0 45px rgba(77, 124, 255, .06),
        inset 0 1px 0 rgba(255, 255, 255, .025);
}


/* ==========================================
   TOP ORANGE ACCENT
========================================== */

.millie-quote-card::before {
    content: "";

    position: absolute;
    top: -1px;
    right: 10%;

    width: 190px;
    height: 2px;

    background: linear-gradient(
        90deg,
        transparent 0%,
        #f28c28 35%,
        #f28c28 100%
    );

    box-shadow:
        0 0 12px rgba(242, 140, 40, .25);
}


/* ==========================================
   IMAGE
========================================== */

.millie-quote-image {
    position: relative;

    width: 220px;
    height: 220px;

    overflow: visible;
    flex-shrink: 0;
}

.millie-quote-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 16px;

    border: 1px solid rgba(255, 255, 255, .08);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, .28);
}


/* ==========================================
   PAW BADGE
========================================== */

.millie-quote-paw {
    position: absolute;

    right: -13px;
    bottom: -13px;

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

    width: 48px;
    height: 48px;

    box-sizing: border-box;

    border: 1px solid rgba(242, 140, 40, .65);
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(242, 140, 40, .10),
            transparent 70%
        ),
        #071126;

    color: #f28c28;

    font-size: 1.05rem;

    box-shadow:
        0 0 0 5px rgba(7, 17, 38, .85),
        0 8px 22px rgba(0, 0, 0, .3),
        0 0 18px rgba(242, 140, 40, .12);
}


/* ==========================================
   CONTENT
========================================== */

.millie-quote-content {
    min-width: 0;
}


/* ==========================================
   EYEBROW
========================================== */

.millie-quote .section-eyebrow {
    justify-content: flex-start;

    gap: .55rem;

    margin: 0 0 3rem;

    color: rgb(255, 122, 0);

    font-size: 1rem;
    line-height: 1;
    font-weight: 700;

    letter-spacing: .16em;
    text-transform: uppercase;
}


/* ==========================================
   QUOTE BODY
========================================== */

.millie-quote-text {
    display: flex;
    align-items: flex-start;

    gap: .85rem;
}


/* ==========================================
   QUOTE MARK
========================================== */

.millie-quote-text .quote-mark {
    flex-shrink: 0;

    margin-top: -.35rem;

    color: rgb(255, 122, 0);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 4rem;
    line-height: .8;
    font-weight: 700;

    opacity: .9;
}


/* ==========================================
   QUOTE TEXT
========================================== */

.millie-quote-text p {
    max-width: 780px;

    margin: 0;

    color: #f5f7fb;

    font-size: 1.2rem;
    line-height: 1.55;
    font-weight: 500;

    letter-spacing: -.015em;
}

/* =========================================================
   MILLIE OS — FAQ
========================================================= */


/* ==========================================
   SECTION
========================================== */

.millie-faq,
.millie-faq-section {
    position: relative;

    padding: 6rem 0 6rem;
}


/* ==========================================
   HEADER
========================================== */

.millie-faq .millie-faq-header,
.millie-faq-section .millie-faq-header {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;

    margin: 0 0 4rem;

    text-align: center;
}


/* ==========================================
   EYEBROW
========================================== */

.millie-faq .section-eyebrow,
.millie-faq-section .section-eyebrow {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: .75rem !important;

    width: fit-content !important;

    margin: 0 auto 2rem !important;
    padding: 0 !important;

    color: #55a2f6 !important;

    font-size: 13.6px !important;
    font-weight: 600 !important;
    letter-spacing: .08em !important;
    line-height: 1 !important;

    text-transform: uppercase !important;
}


/* ==========================================
   EYEBROW LINE
========================================== */

.millie-faq .section-eyebrow .accent-line,
.millie-faq-section .section-eyebrow .accent-line {
    display: block !important;

    width: 36px !important;
    height: 2px !important;

    flex: 0 0 36px !important;

    margin: 0 !important;

    background: #f28c28 !important;
}


/* ==========================================
   TITLE
========================================== */

.millie-faq .millie-faq-title,
.millie-faq-section .millie-faq-title,
.millie-faq .faq-title,
.millie-faq-section .faq-title {
    width: 100%;

    margin: 0 !important;

    color: #fff;

    font-size: clamp(3.5rem, 5vw, 5.5rem);
    line-height: .95;
    letter-spacing: -.05em;

    text-align: center;
}


/* BLUE PART */

.millie-faq .millie-faq-title span,
.millie-faq-section .millie-faq-title span,
.millie-faq .faq-title span,
.millie-faq-section .faq-title span {
    color: var(--color-primary);
}


/* ==========================================
   LIST
========================================== */

.millie-faq .faq-list,
.millie-faq-section .faq-list {
    display: flex;
    flex-direction: column;

    width: 100%;

    gap: .7rem;

    margin-top: 0 !important;
}


/* ==========================================
   ITEMS
========================================== */

.millie-faq .faq-item,
.millie-faq-section .faq-item {
    width: 100%;

    min-height: 70px;
}


/* ==========================================
   OPEN STATE
========================================== */

.millie-faq .faq-item.is-open,
.millie-faq-section .faq-item.is-open {
    border-color: #f28c28;

    box-shadow:
        0 0 30px rgba(242, 140, 40, .08);
}

.millie-faq .faq-item.is-open .faq-number,
.millie-faq .faq-item.is-open .faq-question-text,
.millie-faq .faq-item.is-open .faq-arrow,
.millie-faq-section .faq-item.is-open .faq-number,
.millie-faq-section .faq-item.is-open .faq-question-text,
.millie-faq-section .faq-item.is-open .faq-arrow {
    color: #f28c28;
}


/* ==========================================
   ANSWER
========================================== */

.millie-faq .faq-answer-inner,
.millie-faq-section .faq-answer-inner {
    border-left-color: #f28c28;
}

/* =========================================================
   MILLIE OS — FINAL CTA
========================================================= */

.millie-os-final-cta {
    position: relative;

    min-height: 720px;

    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}


/* ==========================================
   BACKGROUND — BLUE GLOW
========================================== */

.millie-os-final-cta::before {
    content: "";

    position: absolute;

    left: -15%;
    bottom: -35%;

    width: 55%;
    height: 75%;

    background:
        radial-gradient(
            ellipse,
            rgba(77,124,255,.22) 0%,
            rgba(77,124,255,.08) 35%,
            transparent 70%
        );

    pointer-events: none;
}


/* ==========================================
   BACKGROUND — ORANGE GLOW
========================================== */

.millie-os-final-cta::after {
    content: "";

    position: absolute;

    right: -15%;
    bottom: -35%;

    width: 55%;
    height: 75%;

    background:
        radial-gradient(
            ellipse,
            rgba(242,140,40,.16) 0%,
            rgba(242,140,40,.05) 35%,
            transparent 70%
        );

    pointer-events: none;
}


/* ==========================================
   RADIAL RINGS
========================================== */

.millie-os-final-cta-rings {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 900px;
    height: 900px;

    transform: translate(-50%, -50%);

    border: 1px solid rgba(77,124,255,.08);
    border-radius: 50%;

    pointer-events: none;
}

.millie-os-final-cta-rings::before,
.millie-os-final-cta-rings::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    border: 1px solid rgba(77,124,255,.08);
    border-radius: 50%;
}

.millie-os-final-cta-rings::before {
    width: 620px;
    height: 620px;
}

.millie-os-final-cta-rings::after {
    width: 360px;
    height: 360px;
}


/* ==========================================
   CONTENT
========================================== */

.millie-os-final-cta-content {
    position: relative;

    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;

    text-align: center;
}


/* ==========================================
   HEADING
========================================== */

.millie-os-final-cta-title {
    position: relative;

    margin: 0;

    padding: 0 0 2rem;

    font-size: clamp(3.5rem, 5vw, 5.5rem);
    line-height: .95;
    letter-spacing: -.055em;
    font-weight: 700;

    text-align: center;
}

.millie-os-final-cta-title span {
    color: var(--color-primary);
}


/* ==========================================
   DIVIDER
========================================== */

.millie-os-final-cta-title::after {
    content: "";

    display: block;

    width: 90px;
    height: 2px;

    margin: 2rem auto 0;

    background: linear-gradient(
        90deg,
        transparent,
        #fff,
        transparent
    );
}


/* ==========================================
   DESCRIPTION
========================================== */


.millie-os-final-cta-description {
    max-width: 720px;

    margin: 0 auto;

    color: var(--color-text);

    font-size: 1rem;
    line-height: 1.6;

    text-align: center;
}


/* ==========================================
   BUTTON
========================================== */

.millie-os-final-cta-button {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 2rem;

    width: 520px;
    max-width: 90vw;

    min-height: 82px;

    margin-top: 2.8rem;

    padding: 1rem 2.5rem;

    border: 2px solid transparent;
    border-radius: 999px;

    background:
        linear-gradient(
            var(--color-background),
            var(--color-background)
        ) padding-box,
        linear-gradient(
            90deg,
            #4D7CFF,
            #F28C28
        ) border-box;

    color: #fff;

    text-decoration: none;

    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;

    box-shadow:
        0 0 25px rgba(77,124,255,.15),
        0 0 35px rgba(242,140,40,.08);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.millie-os-final-cta-button:hover {
    transform: translateY(-3px);

    box-shadow:
        0 0 35px rgba(77,124,255,.25),
        0 0 45px rgba(242,140,40,.15);
}


/* ==========================================
   ARROW
========================================== */

.millie-os-final-cta-arrow {
    color: #f28c28;

    font-size: 2.3rem;
    font-weight: 300;

    line-height: 1;

    transition: transform .3s ease;
}

.millie-os-final-cta-button:hover
.millie-os-final-cta-arrow {
    transform: translateX(7px);
}


/* =========================================================
   MILLIE OS — RESPONSIVE
   Desktop CSS pozostaje bez zmian.
   Ten blok wklej NA KOŃCU pliku.
========================================================= */


/* =========================================================
   TABLET / LAPTOP — max-width: 900px
========================================================= */

@media (max-width: 900px) {

    /* ==========================================
       HERO
    ========================================== */

    .millie-os-hero {
        padding: 5.5rem 0 4rem;
    }

    .millie-os-hero-grid {
        grid-template-columns: 1fr;

        gap: 3.5rem;

        min-height: auto;

        text-align: center;
    }

    .millie-os-hero-content {
        max-width: 760px;

        margin: 0 auto;
    }

    .millie-os-hero .section-eyebrow {
        justify-content: center;

        margin-right: auto;
        margin-left: auto;
    }

    .millie-os-hero-title {
        font-size: clamp(3.5rem, 8vw, 5rem);
    }

    .millie-os-hero-text {
        max-width: 680px;

        margin-right: auto;
        margin-bottom: 2rem;
        margin-left: auto;
    }

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

    .millie-os-hero-visual {
        min-height: 440px;
    }

    .millie-os-core {
        width: min(100%, 430px);
    }

    .millie-os-hero-summary {
        grid-template-columns: 1fr;

        gap: 1rem;

        margin-top: 2.5rem;

        text-align: center;
    }

    .millie-os-summary-label {
        justify-self: center;
    }


    /* ==========================================
       INTRO
    ========================================== */

    .millie-intro-section {
        padding: 6rem 0;
    }

    .millie-intro-column {
        padding: 0 2.5rem;
    }


    /* ==========================================
       SILNIK WZROSTU
    ========================================== */

    .millie-growth {
        padding: 3rem 0 0;
    }

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

    .millie-growth-card,
    .millie-growth-card:nth-child(4),
    .millie-growth-card:nth-child(5) {
        grid-column: span 1;
    }

    .millie-growth-cta {
        margin-top: 4rem;
    }


    /* ==========================================
       COMPARISON
    ========================================== */

    .millie-comparison {
        padding: 6rem 0;
    }

    .millie-comparison__grid {
        grid-template-columns: 1fr;
    }


    /* ==========================================
       PROCESS
    ========================================== */

    .millie-process {
        padding: 7rem 0;
    }

    .millie-process__steps {
        grid-template-columns: repeat(3, 1fr);

        row-gap: 3.5rem;
    }

    .millie-process__line {
        display: none;
    }


    /* ==========================================
       PRICING
    ========================================== */

    .millie-pricing {
        padding: 5rem 0;
    }

    .millie-pricing__row {
        grid-template-columns: 190px 1fr;
    }

    .millie-pricing__price {
        grid-column: 2;

        text-align: left;
    }


    /* ==========================================
       QUOTE
    ========================================== */

    .millie-quote {
        padding: 2rem 0;
    }

    .millie-quote-card {
        grid-template-columns: 190px 1fr;

        gap: 2rem;

        padding: 2rem;
    }

    .millie-quote-image {
        width: 190px;
        height: 190px;
    }


    /* ==========================================
       FAQ
    ========================================== */

    .millie-faq,
    .millie-faq-section {
        padding: 6rem 0 0;
    }

    .millie-faq .millie-faq-header,
    .millie-faq-section .millie-faq-header {
        margin-bottom: 3rem;
    }


    /* ==========================================
       FINAL CTA
    ========================================== */

    .millie-os-final-cta {
        min-height: auto;

        padding: 7rem 0 8rem;
    }

    .millie-os-final-cta-title {
        max-width: 760px;

        font-size: clamp(3rem, 7vw, 4.5rem);
    }

    .millie-os-final-cta-description {
        max-width: 650px;
    }

    .millie-os-final-cta-button {
        width: 480px;
    }

    .millie-os-final-cta-rings {
        width: 720px;
        height: 720px;
    }

    .millie-os-final-cta-rings::before {
        width: 500px;
        height: 500px;
    }

    .millie-os-final-cta-rings::after {
        width: 300px;
        height: 300px;
    }

}


/* =========================================================
   MOBILE — max-width: 700px
========================================================= */

@media (max-width: 700px) {

    /* ==========================================
       HERO
    ========================================== */

    .millie-os-hero {
        padding: 4.5rem 0 3.5rem;
    }

    .millie-os-hero-grid {
        gap: 2.75rem;
    }

    .millie-os-hero .section-eyebrow {
        margin-bottom: 1.5rem;

        font-size: .72rem;
    }

    .millie-os-hero-title {
        margin-bottom: 1.5rem;

        font-size: clamp(3rem, 11vw, 4.4rem);
        line-height: .98;
    }

    .millie-os-hero-text {
        margin-bottom: 0;
    }

    .millie-os-hero-text p {
        font-size: 1rem;
        line-height: 1.7;
    }

    .millie-os-hero-actions {
        flex-direction: column;

        width: 100%;

        gap: .75rem;

        margin-top: 2rem;
    }

    .millie-os-hero-actions .btn {
        width: min(100%, 360px);
    }


    /*
       NAJWAŻNIEJSZE:
       wizualizacja przechodzi POD tekst,
       jest wycentrowana i nie wypada poza ekran.
    */

    .millie-os-hero-visual {
        width: 100%;

        min-height: auto;

        padding: 1rem 0 2rem;
    }

    .millie-os-core {
        width: min(86vw, 380px);
    }

    .millie-os-core::after {
        inset: -35px;
    }

    .millie-os-visual-loader {
        margin-bottom: 1.25rem;
    }

    .millie-os-visual-loader img {
        width: 42px;
        height: 42px;
    }

    .millie-os-core strong {
        font-size: clamp(2rem, 8vw, 2.8rem);
    }

    .millie-os-core span {
        font-size: .62rem;
    }


    /* HERO SUMMARY */

    .millie-os-hero-summary {
        gap: 1rem;

        margin-top: 1rem;

        padding: 1.5rem;

        border-radius: 16px;
    }

    .millie-os-hero-summary p {
        font-size: .88rem;
        line-height: 1.65;
    }


    /* ==========================================
       INTRO
    ========================================== */

    .millie-intro-section {
        padding: 5rem 0;
    }

    .millie-intro-header .section-eyebrow {
        margin-bottom: 1.25rem;
    }

    .millie-intro-title {
        font-size: clamp(2.6rem, 11vw, 4rem);
    }

    .millie-intro-timeline {
        width: 90%;

        margin: 3rem auto;
    }

    .millie-intro-content {
        grid-template-columns: 1fr;

        gap: 2rem;
    }

    .millie-intro-column {
        padding: 0;
    }

    .millie-intro-column:first-child {
        padding-bottom: 2rem;

        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    .millie-intro-column p {
        font-size: 1rem;
        line-height: 1.75;
    }


    /* ==========================================
       SILNIK WZROSTU
    ========================================== */

    .millie-growth {
        padding: 5rem 0 6rem;
    }

    .millie-growth-header {
        margin-bottom: 3rem;

        text-align: center;
    }

    .millie-growth-header .section-eyebrow {
        justify-content: center;

        margin-right: auto;
        margin-left: auto;
    }

    .millie-growth-title {
        font-size: clamp(2.6rem, 11vw, 3.8rem);
    }

    .millie-growth-description {
        margin-right: auto;
        margin-left: auto;
    }

    .millie-growth-grid {
        grid-template-columns: 1fr;

        gap: .9rem;
    }

    .millie-growth-card,
    .millie-growth-card:nth-child(4),
    .millie-growth-card:nth-child(5) {
        grid-column: auto;

        min-height: 240px;
    }

    .millie-growth-card {
        padding: 2rem 1.5rem 1.5rem;

        border-radius: 18px;
    }

    .millie-growth-number {
        font-size: 4rem;
    }

    .millie-growth-card p {
        max-width: 85%;
    }

    .millie-growth-cta {
        margin-top: 3rem;

        padding: 3.5rem 1.5rem;

        border-radius: 24px;
    }


    /* ==========================================
       COMPARISON
    ========================================== */

    .millie-comparison {
        padding: 5rem 0;
    }

    .millie-comparison__heading {
        margin-bottom: 3rem;
    }

    .millie-comparison__heading h2 {
        font-size: clamp(2.6rem, 10vw, 3.5rem);
    }

    .millie-comparison__card {
        padding: 2rem 1.5rem;
    }

    .millie-comparison__card-title {
        margin-bottom: 2rem;
    }


    /* ==========================================
       PROCESS
    ========================================== */

    .millie-process {
        padding: 6rem 0;
    }

    .millie-process__heading {
        margin-bottom: 3.5rem;
    }

    .millie-process__heading h2 {
        font-size: clamp(2.6rem, 10vw, 4rem);
    }

    .millie-process__steps {
        grid-template-columns: 1fr;

        gap: 2.5rem;
    }

    .millie-process__number {
        width: 62px;
        height: 62px;
    }

    .millie-process__step p {
        max-width: 280px;
    }


    /* ==========================================
       PRICING
    ========================================== */

    .millie-pricing {
        padding: 5rem 0;
    }

    .millie-pricing__heading {
        margin-bottom: 2.5rem;

        text-align: center;
    }

    .millie-pricing .section-eyebrow {
        justify-content: center;

        margin-right: auto;
        margin-left: auto;
    }

    .millie-pricing__heading h2 {
        font-size: clamp(2.6rem, 10vw, 3.8rem);
    }

    .millie-pricing__row {
        grid-template-columns: 1fr;

        gap: .5rem;

        padding: 1.5rem;
    }

    .millie-pricing__price {
        grid-column: auto;

        margin-top: .25rem;

        text-align: left;
    }

    .millie-pricing__row--radar::after {
        right: 1.5rem;

        width: 80px;
    }


    /* ==========================================
       QUOTE
    ========================================== */

    .millie-quote {
        padding: 1rem 0 4rem;
    }

    .millie-quote-card {
        grid-template-columns: 1fr;

        gap: 1.75rem;

        padding: 1.75rem;
    }

    .millie-quote-image {
        width: 100%;
        height: 260px;
    }

    .millie-quote .section-eyebrow {
        margin-bottom: 2rem;
    }

    .millie-quote-text p {
        font-size: 1.08rem;
        line-height: 1.6;
    }


    /* ==========================================
       FAQ
    ========================================== */

    .millie-faq,
    .millie-faq-section {
        padding: 5rem 0 0;
    }

    .millie-faq .millie-faq-title,
    .millie-faq-section .millie-faq-title,
    .millie-faq .faq-title,
    .millie-faq-section .faq-title {
        font-size: clamp(2.8rem, 11vw, 3.8rem);
    }


    /* ==========================================
       FINAL CTA
    ========================================== */

    .millie-os-final-cta {
        padding: 6rem 0 7rem;
    }

    .millie-os-final-cta-title {
        max-width: 100%;

        font-size: clamp(2.7rem, 11vw, 4rem);
        line-height: .96;
    }

    .millie-os-final-cta-title::after {
        margin-top: 1.75rem;
    }

    .millie-os-final-cta-description {
        max-width: 100%;

        padding: 0 1rem;

        font-size: .95rem;
        line-height: 1.6;
    }

    .millie-os-final-cta-button {
        width: calc(100% - 2rem);

        min-height: 72px;

        margin-top: 2.25rem;

        padding: .9rem 1.5rem;

        gap: 1.25rem;

        font-size: 1.2rem;
    }

    .millie-os-final-cta-arrow {
        font-size: 2rem;
    }

    .millie-os-final-cta-rings {
        width: 580px;
        height: 580px;
    }

    .millie-os-final-cta-rings::before {
        width: 390px;
        height: 390px;
    }

    .millie-os-final-cta-rings::after {
        width: 240px;
        height: 240px;
    }

}


/* =========================================================
   SMALL MOBILE — max-width: 480px
========================================================= */

@media (max-width: 480px) {

    /* ==========================================
       HERO
    ========================================== */

    .millie-os-hero {
        padding: 4rem 0 3rem;
    }

    .millie-os-hero .section-eyebrow {
        gap: .6rem;

        margin-bottom: 1.25rem;

        font-size: .65rem;
    }

    .millie-os-hero .section-eyebrow .accent-line {
        width: 28px;
    }

    .millie-os-hero-title {
        font-size: clamp(2.9rem, 14vw, 3.7rem);

        letter-spacing: -.05em;
    }

    .millie-os-hero-text p {
        font-size: .96rem;
        line-height: 1.7;
    }

    .millie-os-hero-visual {
        padding-top: .5rem;
        padding-bottom: 1.5rem;
    }

    /*
       Koło jest w pełni widoczne i nadal pod tekstem.
       Nie ustawiamy żadnych absurdalnych min-width.
    */

    .millie-os-core {
        width: min(88vw, 350px);
    }

    .millie-os-core::before {
        inset: 14px;
    }

    .millie-os-core::after {
        inset: -25px;
    }

    .millie-os-visual-loader img {
        width: 38px;
        height: 38px;
    }

    .millie-os-core strong {
        margin-bottom: .65rem;

        font-size: 2rem;
    }

    .millie-os-core span {
        font-size: .55rem;

        letter-spacing: .18em;
    }

    .millie-os-hero-summary {
        padding: 1.25rem;
    }


    /* ==========================================
       INTRO
    ========================================== */

    .millie-intro-section {
        padding: 4rem 0;
    }

    .millie-intro-timeline {
        margin: 2.5rem auto;
    }

    .millie-intro-timeline-point {
        width: 11px;
        height: 11px;

        border-width: 2px;
    }

    .millie-intro-timeline-point--active {
        width: 15px;
        height: 15px;
    }


    /* ==========================================
       GROWTH
    ========================================== */

    .millie-growth-card {
        min-height: 220px;

        padding: 1.75rem 1.25rem 1.35rem;
    }

    .millie-growth-number {
        font-size: 3.5rem;
    }

    .millie-growth-cta {
        padding: 3rem 1.25rem;
    }


    /* ==========================================
       COMPARISON
    ========================================== */

    .millie-comparison__card {
        padding: 1.75rem 1.25rem;

        border-radius: 18px;
    }

    .millie-comparison__list li {
        gap: .75rem;

        font-size: .92rem;
    }


    /* ==========================================
       PRICING
    ========================================== */

    .millie-pricing__table {
        border-radius: 18px;
    }

    .millie-pricing__row {
        padding: 1.25rem;
    }

    .millie-pricing__service {
        font-size: 1.05rem;
    }

    .millie-pricing__description {
        font-size: .9rem;
    }


    /* ==========================================
       QUOTE
    ========================================== */

    .millie-quote-card {
        padding: 1.5rem;

        border-radius: 16px;
    }

    .millie-quote-image {
        height: 220px;
    }

    .millie-quote-text {
        gap: .65rem;
    }

    .millie-quote-text .quote-mark {
        font-size: 3.25rem;
    }

    .millie-quote-text p {
        font-size: 1rem;
    }


    /* ==========================================
       FAQ
    ========================================== */

    .millie-faq .millie-faq-title,
    .millie-faq-section .millie-faq-title,
    .millie-faq .faq-title,
    .millie-faq-section .faq-title {
        font-size: 3rem;
    }


    /* ==========================================
       FINAL CTA
    ========================================== */

    .millie-os-final-cta {
        padding: 5rem 0 6rem;
    }

    .millie-os-final-cta-title {
        font-size: 2.6rem;
    }

    .millie-os-final-cta-button {
        width: calc(100% - 1rem);

        font-size: 1.1rem;
    }

    .millie-os-final-cta-arrow {
        font-size: 1.8rem;
    }

    .millie-os-final-cta-rings {
        width: 480px;
        height: 480px;
    }

    .millie-os-final-cta-rings::before {
        width: 320px;
        height: 320px;
    }

    .millie-os-final-cta-rings::after {
        width: 200px;
        height: 200px;
    }

}


/* =========================================================
   VERY SMALL MOBILE — max-width: 380px
========================================================= */

@media (max-width: 380px) {

    .millie-os-hero-title {
        font-size: 2.7rem;
    }

    .millie-os-core {
        width: 90vw;
    }

    .millie-os-hero-actions .btn {
        font-size: .95rem;
    }

    .millie-intro-title,
    .millie-growth-title,
    .millie-comparison__heading h2,
    .millie-process__heading h2,
    .millie-pricing__heading h2 {
        font-size: 2.5rem;
    }

}

/* =========================================================
   PRZYCISK DO CENNIKA
========================================================= */

.millie-modules-cta {
    display: flex;
    justify-content: center;

    margin-top: 3.5rem;
}

.millie-modules-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 1rem;

    padding: 1.1rem 2.5rem;

    border: 1px solid var(--color-accent);
    border-radius: 999px;

    background: transparent;

    color: #fff;
    text-decoration: none;

    font-size: 1rem;
    font-weight: 600;
    line-height: 1;

    box-shadow: 0 0 25px rgba(242, 140, 40, .08);

    transition:
        background .3s ease,
        box-shadow .3s ease,
        transform .3s ease;
}

.millie-modules-cta-arrow {
    color: var(--color-accent);

    font-size: 1.2rem;
    line-height: 1;

    transition: transform .3s ease;
}

.millie-modules-cta-button:hover {
    background: rgba(242, 140, 40, .08);

    box-shadow: 0 0 35px rgba(242, 140, 40, .18);

    transform: translateY(-2px);
}

.millie-modules-cta-button:hover .millie-modules-cta-arrow {
    transform: translateY(3px);
}