/* =========================================================
   CODECOSOFT AI
   PUBLIC WEBSITE
========================================================= */

.privacy-page {
    width: min(920px, calc(100% - 32px));
    margin: 0 auto;
    padding: 126px 0 56px;
}

.privacy-card {
    padding: clamp(24px, 5vw, 54px);
}

.privacy-card h1 {
    margin: 10px 0 16px;
    font-size: clamp(30px, 5vw, 46px);
    line-height: 1.12;
}

.privacy-card h2 {
    margin: 30px 0 10px;
    font-size: 19px;
}

.privacy-card p {
    margin: 0 0 12px;
    color: var(--text-muted);
    line-height: 1.75;
}

.privacy-card a { color: var(--primary); }
.privacy-lead { font-size: 18px; }
.privacy-version { margin-top: 30px; color: var(--text-muted); font-size: 13px; }
.privacy-disclaimer { margin-top: 20px; }

body.site-body {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 50% -10%,
            color-mix(
                in srgb,
                var(--primary) 10%,
                transparent
            ),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            #fbfcfe 0%,
            #f7f9fc 48%,
            #f2f5f9 100%
        );

    color: var(--text);

    font-family: var(--font);

    -webkit-font-smoothing: antialiased;

    text-rendering: optimizeLegibility;
}


html[data-theme="dark"] body.site-body {
    background:
        radial-gradient(
            circle at 50% -8%,
            color-mix(
                in srgb,
                var(--primary) 12%,
                transparent
            ),
            transparent 40%
        ),
        linear-gradient(
            180deg,
            #09101a 0%,
            #0b121d 48%,
            #0a1019 100%
        );
}


/* =========================================================
   NAVIGATION
========================================================= */

.site-nav {
    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    z-index: 1000;

    border-bottom:
        1px solid transparent;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        backdrop-filter 0.25s ease;
}


.site-nav.scrolled {
    border-color:
        color-mix(
            in srgb,
            var(--line) 75%,
            transparent
        );

    background:
        color-mix(
            in srgb,
            var(--surface-solid) 82%,
            transparent
        );

    backdrop-filter:
        blur(20px)
        saturate(150%);

    -webkit-backdrop-filter:
        blur(20px)
        saturate(150%);

    box-shadow:
        0 8px 30px
        rgba(16, 24, 40, 0.04);
}


html[data-theme="dark"] .site-nav.scrolled {
    background:
        color-mix(
            in srgb,
            var(--surface-solid) 86%,
            transparent
        );
}


/* =========================================================
   CONTAINER
========================================================= */

.site-container {
    width:
        min(
            1380px,
            calc(100% - 64px)
        );

    margin:
        0 auto;
}


/* =========================================================
   NAV INNER
========================================================= */

.site-nav-inner {
    min-height:
        78px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        28px;
}


/* =========================================================
   BRAND
========================================================= */

.site-brand {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        11px;

    color:
        var(--text);

    font-size:
        16px;

    font-weight:
        850;

    letter-spacing:
        -0.45px;

    text-decoration:
        none;

    transition:
        transform 0.18s ease;
}


.site-brand:hover {
    transform:
        translateY(-1px);
}


.site-brand img {
    width:
        38px;

    height:
        38px;

    flex:
        0 0 auto;

    border-radius:
        11px;

    object-fit:
        cover;

    box-shadow:
        var(--shadow-sm);
}


.site-brand b {
    color:
        var(--primary);
}


/* =========================================================
   NAV LINKS
========================================================= */

.site-links {
    display:
        flex;

    align-items:
        center;

    gap:
        30px;
}


.site-links a {
    position:
        relative;

    padding:
        8px 0;

    color:
        var(--text-2);

    font-size:
        13px;

    font-weight:
        600;

    text-decoration:
        none;

    transition:
        color 0.18s ease;
}


.site-links a::after {
    content:
        "";

    position:
        absolute;

    left:
        50%;

    bottom:
        2px;

    width:
        0;

    height:
        2px;

    border-radius:
        999px;

    background:
        var(--primary);

    transform:
        translateX(-50%);

    transition:
        width 0.18s ease;
}


.site-links a:hover {
    color:
        var(--text);
}


.site-links a:hover::after {
    width:
        18px;
}


/* =========================================================
   NAV ACTIONS
========================================================= */

.site-actions {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}


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

.hero {
    position:
        relative;

    min-height:
        92vh;

    padding:
        145px 0 90px;

    display:
        grid;

    align-items:
        center;

    overflow:
        hidden;
}


.hero::before {
    content:
        "";

    position:
        absolute;

    top:
        -80px;

    left:
        50%;

    width:
        1150px;

    height:
        700px;

    transform:
        translateX(-50%);

    background:
        radial-gradient(
            circle,
            color-mix(
                in srgb,
                var(--primary) 14%,
                transparent
            ),
            transparent 70%
        );

    filter:
        blur(75px);

    pointer-events:
        none;
}


.hero::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background-image:
        linear-gradient(
            rgba(16, 24, 40, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(16, 24, 40, 0.025) 1px,
            transparent 1px
        );

    background-size:
        72px 72px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.8),
            transparent 68%
        );
}


html[data-theme="dark"] .hero::after {
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        );
}


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

.hero-inner {
    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.02fr)
        minmax(470px, 0.98fr);

    align-items:
        center;

    gap:
        clamp(
            48px,
            6vw,
            92px
        );
}


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

.hero-badge {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    min-height:
        34px;

    padding:
        7px 13px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--primary) 22%,
            transparent
        );

    border-radius:
        999px;

    background:
        color-mix(
            in srgb,
            var(--primary-soft) 86%,
            transparent
        );

    color:
        var(--primary);

    font-size:
        12px;

    font-weight:
        700;

    backdrop-filter:
        blur(8px);
}


.hero-badge::before {
    content:
        "";

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--primary);

    box-shadow:
        0 0 0 4px
        var(--primary-soft);
}


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

.hero h1 {
    max-width:
        760px;

    margin:
        24px 0 22px;

    color:
        var(--text);

    font-size:
        clamp(
            48px,
            5vw,
            74px
        );

    font-weight:
        900;

    line-height:
        1.04;

    letter-spacing:
        -3px;
}


.hero h1 span {
    background:
        linear-gradient(
            125deg,
            var(--primary),
            var(--cyan) 56%,
            var(--success)
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;
}


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

.hero-copy {
    max-width:
        650px;

    margin:
        0;

    color:
        var(--text-2);

    font-size:
        17px;

    line-height:
        1.75;
}


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

.hero-buttons {
    margin-top:
        34px;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        11px;
}


.hero-note {
    margin-top:
        18px;

    color:
        var(--muted);

    font-size:
        12px;

    line-height:
        1.5;
}


/* =========================================================
   PRODUCT WINDOW
========================================================= */

.product-window {
    position:
        relative;

    overflow:
        hidden;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--line) 90%,
            transparent
        );

    border-radius:
        24px;

    background:
        var(--surface-solid);

    box-shadow:
        0 35px 90px
        -28px
        rgba(16, 24, 40, 0.24),
        0 0 0 1px
        rgba(255, 255, 255, 0.06)
        inset;

    transform:
        perspective(1400px)
        rotateY(-3deg)
        rotateX(1deg);

    transform-origin:
        center;

    transition:
        transform 0.45s
        cubic-bezier(
            0.16,
            1,
            0.3,
            1
        ),
        box-shadow 0.45s ease;
}


.product-window:hover {
    transform:
        perspective(1400px)
        rotateY(0)
        rotateX(0)
        translateY(-3px);

    box-shadow:
        0 45px 110px
        -28px
        rgba(16, 24, 40, 0.28);
}


html[data-theme="dark"]
.product-window {
    box-shadow:
        0 45px 110px
        -28px
        rgba(0, 0, 0, 0.72),
        0 0 0 1px
        rgba(255, 255, 255, 0.04)
        inset;
}


/* =========================================================
   WINDOW BAR
========================================================= */

.window-bar {
    height:
        48px;

    padding:
        0 16px;

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    border-bottom:
        1px solid
        var(--line);

    background:
        var(--surface-2);
}


.window-dot {
    width:
        10px;

    height:
        10px;

    border-radius:
        50%;

    background:
        var(--line-strong);
}


.window-dot:nth-child(1) {
    background:
        #ff6b6b;
}


.window-dot:nth-child(2) {
    background:
        #f4be55;
}


.window-dot:nth-child(3) {
    background:
        #43c97e;
}


.window-url {
    flex:
        1;

    margin-left:
        10px;

    padding:
        6px 13px;

    overflow:
        hidden;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--line) 75%,
            transparent
        );

    border-radius:
        8px;

    background:
        var(--surface-solid);

    color:
        var(--muted);

    font-size:
        11px;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


/* =========================================================
   MOCK PRODUCT UI
========================================================= */

.product-ui {
    min-height:
        470px;

    display:
        grid;

    grid-template-columns:
        125px minmax(0, 1fr);
}


/* =========================================================
   MOCK SIDEBAR
========================================================= */

.mock-side {
    padding:
        16px 10px;

    border-right:
        1px solid
        var(--line);

    background:
        var(--surface-2);
}


.mock-logo {
    height:
        32px;

    margin-bottom:
        22px;

    border-radius:
        9px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--cyan)
        );
}


.mock-link {
    height:
        30px;

    margin:
        6px 0;

    border-radius:
        8px;

    background:
        color-mix(
            in srgb,
            var(--surface-solid) 85%,
            transparent
        );
}


.mock-link.active {
    background:
        var(--primary-soft);
}


/* =========================================================
   MOCK MAIN
========================================================= */

.mock-main {
    padding:
        24px;
}


.mock-head {
    margin-bottom:
        22px;

    display:
        flex;

    justify-content:
        space-between;

    gap:
        14px;
}


.mock-title {
    width:
        180px;
}


.mock-line {
    height:
        8px;

    margin-bottom:
        8px;

    border-radius:
        999px;

    background:
        var(--surface-3);
}


.mock-line.short {
    width:
        60%;
}


.mock-button {
    width:
        96px;

    height:
        34px;

    border-radius:
        9px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-2)
        );

    box-shadow:
        0 5px 14px
        color-mix(
            in srgb,
            var(--primary) 24%,
            transparent
        );
}


/* =========================================================
   MOCK STATS
========================================================= */

.mock-stats {
    display:
        grid;

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

    gap:
        11px;
}


.mock-card {
    height:
        88px;

    padding:
        13px;

    border:
        1px solid
        var(--line);

    border-radius:
        12px;

    background:
        var(--surface-solid);

    box-shadow:
        var(--shadow-xs);
}


.mock-num {
    width:
        52px;

    height:
        17px;

    margin-top:
        18px;

    border-radius:
        6px;

    background:
        var(--primary-soft);
}


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

.mock-content {
    margin-top:
        12px;

    display:
        grid;

    grid-template-columns:
        1.3fr 0.7fr;

    gap:
        11px;
}


.mock-panel {
    height:
        180px;

    padding:
        14px;

    border:
        1px solid
        var(--line);

    border-radius:
        12px;

    background:
        var(--surface-solid);
}


.mock-progress {
    height:
        8px;

    margin-top:
        30px;

    overflow:
        hidden;

    border-radius:
        999px;

    background:
        var(--surface-3);
}


.mock-progress span {
    display:
        block;

    width:
        63%;

    height:
        100%;

    border-radius:
        inherit;

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


/* =========================================================
   MOCK CHAT
========================================================= */

.mock-chat {
    margin-top:
        17px;

    display:
        grid;

    gap:
        9px;
}


.bubble {
    width:
        82%;

    height:
        27px;

    border-radius:
        9px;

    background:
        var(--surface-2);
}


.bubble.user {
    width:
        65%;

    margin-left:
        auto;

    background:
        var(--primary-soft);
}


/* =========================================================
   LOGO / INTEGRATION STRIP
========================================================= */

.logo-strip {
    padding:
        30px 0;

    border-top:
        1px solid
        var(--line);

    border-bottom:
        1px solid
        var(--line);

    background:
        color-mix(
            in srgb,
            var(--surface-solid) 48%,
            transparent
        );
}


.logo-strip-inner {
    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    justify-content:
        center;

    gap:
        38px;

    color:
        var(--muted);

    font-size:
        12px;

    font-weight:
        650;
}


.logo-strip-inner b {
    color:
        var(--text-2);

    font-weight:
        750;
}


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

.site-section {
    padding:
        105px 0;
}


.section-kicker {
    color:
        var(--primary);

    font-size:
        11px;

    font-weight:
        850;

    letter-spacing:
        0.13em;

    text-align:
        center;

    text-transform:
        uppercase;
}


.section-title {
    max-width:
        820px;

    margin:
        15px auto 17px;

    color:
        var(--text);

    font-size:
        clamp(
            32px,
            4vw,
            50px
        );

    font-weight:
        850;

    line-height:
        1.08;

    letter-spacing:
        -2px;

    text-align:
        center;
}


.section-copy {
    max-width:
        670px;

    margin:
        0 auto 52px;

    color:
        var(--muted);

    font-size:
        15px;

    line-height:
        1.75;

    text-align:
        center;
}


/* =========================================================
   FEATURES
========================================================= */

.feature-grid {
    display:
        grid;

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

    gap:
        18px;
}


.feature-card {
    min-height:
        230px;

    padding:
        28px;

    border:
        1px solid
        var(--line);

    border-radius:
        19px;

    background:
        var(--surface-solid);

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

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}


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

    border-color:
        color-mix(
            in srgb,
            var(--primary) 28%,
            var(--line)
        );

    box-shadow:
        var(--shadow-md);
}


.feature-icon {
    width:
        48px;

    height:
        48px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        13px;

    background:
        var(--primary-soft);

    color:
        var(--primary);

    font-size:
        18px;

    font-weight:
        850;
}


.feature-card h3 {
    margin:
        20px 0 10px;

    color:
        var(--text);

    font-size:
        17px;

    font-weight:
        750;

    letter-spacing:
        -0.25px;
}


.feature-card p {
    margin:
        0;

    color:
        var(--muted);

    font-size:
        13px;

    line-height:
        1.7;
}


/* =========================================================
   WORKFLOW
========================================================= */

.workflow {
    display:
        grid;

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

    gap:
        18px;
}


.flow-card {
    position:
        relative;

    min-height:
        240px;

    padding:
        30px;

    overflow:
        hidden;

    border:
        1px solid
        var(--line);

    border-radius:
        19px;

    background:
        var(--surface-solid);
}


.flow-num {
    color:
        color-mix(
            in srgb,
            var(--primary) 24%,
            transparent
        );

    font-size:
        48px;

    font-weight:
        900;

    line-height:
        1;
}


.flow-card h3 {
    margin:
        20px 0 9px;

    color:
        var(--text);

    font-size:
        17px;

    font-weight:
        750;
}


.flow-card p {
    margin:
        0;

    color:
        var(--muted);

    font-size:
        13px;

    line-height:
        1.7;
}


/* =========================================================
   MODEL SHOWCASE
========================================================= */

.model-showcase {
    display:
        grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    align-items:
        center;

    gap:
        58px;
}


.model-copy h2 {
    margin:
        0 0 17px;

    color:
        var(--text);

    font-size:
        clamp(
            34px,
            3.5vw,
            46px
        );

    font-weight:
        850;

    line-height:
        1.1;

    letter-spacing:
        -2px;
}


.model-copy p {
    margin:
        0;

    color:
        var(--muted);

    font-size:
        15px;

    line-height:
        1.75;
}


.model-cards {
    display:
        grid;

    gap:
        12px;
}


.model-preview {
    padding:
        18px;

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    border:
        1px solid
        var(--line);

    border-radius:
        15px;

    background:
        var(--surface-solid);

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}


.model-preview:hover {
    transform:
        translateX(4px);

    border-color:
        color-mix(
            in srgb,
            var(--primary) 32%,
            var(--line)
        );

    box-shadow:
        var(--shadow-sm);
}


.model-preview-badge {
    width:
        48px;

    height:
        48px;

    flex:
        0 0 auto;

    display:
        grid;

    place-items:
        center;

    border-radius:
        12px;

    background:
        var(--primary-soft);

    color:
        var(--primary);

    font-size:
        13px;

    font-weight:
        850;
}


.model-preview h4 {
    margin:
        0 0 5px;

    color:
        var(--text);

    font-size:
        14px;

    font-weight:
        750;
}


.model-preview p {
    margin:
        0;

    color:
        var(--muted);

    font-size:
        11px;

    line-height:
        1.5;
}


.model-preview .price {
    margin-left:
        auto;

    color:
        var(--text);

    font-size:
        12px;

    font-weight:
        800;

    white-space:
        nowrap;
}


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

.pricing-grid {
    display:
        grid;

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

    gap:
        18px;
}


.price-card {
    position:
        relative;

    min-height:
        430px;

    padding:
        30px;

    display:
        flex;

    flex-direction:
        column;

    border:
        1px solid
        var(--line);

    border-radius:
        21px;

    background:
        var(--surface-solid);

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

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}


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

    box-shadow:
        var(--shadow-md);
}


.price-card.featured {
    border-color:
        color-mix(
            in srgb,
            var(--primary) 40%,
            var(--line)
        );

    box-shadow:
        0 20px 45px
        -18px
        color-mix(
            in srgb,
            var(--primary) 26%,
            transparent
        );
}


.price-card h3 {
    margin:
        0;

    color:
        var(--text);

    font-size:
        20px;

    font-weight:
        800;
}


.price-card > p {
    min-height:
        46px;

    margin:
        7px 0 0;

    color:
        var(--muted);

    font-size:
        12px;

    line-height:
        1.6;
}


.site-price {
    margin:
        21px 0;

    color:
        var(--text);

    font-size:
        36px;

    font-weight:
        900;

    letter-spacing:
        -1.5px;

    line-height:
        1;
}


.site-price small {
    color:
        var(--muted);

    font-size:
        12px;

    font-weight:
        600;
}


.site-features {
    flex:
        1;

    display:
        grid;

    align-content:
        start;

    gap:
        11px;

    color:
        var(--text-2);

    font-size:
        12px;

    line-height:
        1.5;
}


.site-features span {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        8px;
}


.site-features span::before {
    content:
        "✓";

    flex:
        0 0 auto;

    color:
        var(--success);

    font-weight:
        900;
}


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

.cta-wrap {
    padding:
        30px 0 105px;
}


.cta-card {
    position:
        relative;

    overflow:
        hidden;

    padding:
        74px 40px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--primary) 23%,
            var(--line)
        );

    border-radius:
        28px;

    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--primary) 9%,
                var(--surface-solid)
            ),
            var(--surface-solid)
        );

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

    text-align:
        center;
}


.cta-card::after {
    content:
        "";

    position:
        absolute;

    top:
        -220px;

    right:
        -150px;

    width:
        480px;

    height:
        480px;

    border-radius:
        50%;

    background:
        var(--primary-soft);

    filter:
        blur(55px);

    pointer-events:
        none;
}


.cta-card h2 {
    position:
        relative;

    z-index:
        2;

    max-width:
        760px;

    margin:
        0 auto;

    color:
        var(--text);

    font-size:
        clamp(
            34px,
            4vw,
            46px
        );

    font-weight:
        850;

    letter-spacing:
        -2px;

    line-height:
        1.08;
}


.cta-card p {
    position:
        relative;

    z-index:
        2;

    max-width:
        620px;

    margin:
        16px auto 30px;

    color:
        var(--muted);

    font-size:
        15px;

    line-height:
        1.75;
}


.cta-card .btn {
    position:
        relative;

    z-index:
        2;
}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {
    padding:
        34px 0;

    border-top:
        1px solid
        var(--line);
}


.footer-inner {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    color:
        var(--muted);

    font-size:
        12px;
}


.footer-brand {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    color:
        var(--text);

    font-size:
        13px;

    font-weight:
        800;
}


.footer-brand img {
    width:
        29px;

    height:
        29px;

    border-radius:
        8px;

    object-fit:
        cover;
}


/* =========================================================
   REVEAL ENHANCEMENTS
========================================================= */

.site-section .reveal:nth-child(2) {
    transition-delay:
        0.05s;
}


.site-section .reveal:nth-child(3) {
    transition-delay:
        0.10s;
}


.feature-card.reveal:nth-child(2),
.flow-card.reveal:nth-child(2) {
    transition-delay:
        0.06s;
}


.feature-card.reveal:nth-child(3),
.flow-card.reveal:nth-child(3) {
    transition-delay:
        0.12s;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1600px) {

    .site-container {
        width:
            min(
                1460px,
                calc(100% - 90px)
            );
    }


    .hero-inner {
        gap:
            90px;
    }


    .product-ui {
        min-height:
            500px;
    }

}


/* =========================================================
   TABLET / SMALL DESKTOP
========================================================= */

@media (max-width: 1050px) {

    .site-container {
        width:
            min(
                100% - 42px,
                1280px
            );
    }


    .hero {
        min-height:
            auto;

        padding:
            135px 0 85px;
    }


    .hero-inner,
    .model-showcase {
        grid-template-columns:
            1fr;
    }


    .hero-inner {
        gap:
            58px;
    }


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


    .hero-copy {
        margin:
            0 auto;
    }


    .hero-badge {
        margin-left:
            50%;

        transform:
            translateX(-50%);
    }


    .hero h1 {
        max-width:
            860px;

        margin-left:
            auto;

        margin-right:
            auto;

        text-align:
            center;
    }


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


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


    .product-window {
        width:
            min(
                100%,
                780px
            );

        margin:
            0 auto;

        transform:
            none;
    }


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


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


    .model-showcase {
        gap:
            36px;
    }

}


/* =========================================================
   MOBILE / TABLET
========================================================= */

@media (max-width: 760px) {

    .site-container {
        width:
            calc(
                100% - 30px
            );
    }


    .site-nav-inner {
        min-height:
            66px;
    }


    .site-brand {
        font-size:
            15px;
    }


    .site-brand img {
        width:
            34px;

        height:
            34px;
    }


    .site-links {
        display:
            none;
    }


    .site-actions {
        gap:
            6px;
    }


    .site-actions .btn-secondary {
        display:
            none;
    }


    .hero {
        padding:
            112px 0 68px;
    }


    .hero-inner {
        gap:
            44px;
    }


    .hero h1 {
        font-size:
            clamp(
                40px,
                11vw,
                54px
            );

        letter-spacing:
            -2.2px;
    }


    .hero-copy {
        font-size:
            15px;
    }


    .hero-buttons {
        margin-top:
            27px;
    }


    .hero-buttons .btn {
        min-height:
            46px;
    }


    .product-ui {
        min-height:
            390px;

        grid-template-columns:
            78px 1fr;
    }


    .mock-side {
        padding-left:
            6px;

        padding-right:
            6px;
    }


    .mock-main {
        padding:
            15px;
    }


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


    .mock-stats .mock-card:last-child {
        display:
            none;
    }


    .mock-content {
        grid-template-columns:
            1fr;
    }


    .mock-content
    .mock-panel:last-child {
        display:
            none;
    }


    .logo-strip-inner {
        gap:
            22px;
    }


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


    .section-title {
        font-size:
            clamp(
                29px,
                9vw,
                39px
            );

        letter-spacing:
            -1.4px;
    }


    .section-copy {
        margin-bottom:
            38px;

        font-size:
            14px;
    }


    .feature-grid,
    .workflow,
    .pricing-grid {
        grid-template-columns:
            1fr;
    }


    .feature-card,
    .flow-card {
        min-height:
            auto;
    }


    .model-copy h2 {
        font-size:
            34px;
    }


    .model-preview {
        align-items:
            flex-start;
    }


    .model-preview .price {
        margin-left:
            0;
    }


    .price-card {
        min-height:
            0;
    }


    .cta-wrap {
        padding-bottom:
            75px;
    }


    .cta-card {
        padding:
            48px 22px;

        border-radius:
            22px;
    }


    .cta-card h2 {
        font-size:
            32px;

        letter-spacing:
            -1.3px;
    }


    .cta-card p {
        font-size:
            14px;
    }


    .footer-inner {
        flex-direction:
            column;

        text-align:
            center;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 430px) {

    .site-container {
        width:
            calc(
                100% - 24px
            );
    }


    .site-brand span {
        font-size:
            14px;
    }


    .site-actions .btn {
        min-height:
            38px;

        padding:
            0 11px;

        font-size:
            11px;
    }


    .hero {
        padding-top:
            100px;
    }


    .hero-badge {
        max-width:
            100%;

        white-space:
            nowrap;

        font-size:
            10px;
    }


    .hero h1 {
        font-size:
            40px;
    }


    .hero-buttons {
        flex-direction:
            column;
    }


    .hero-buttons .btn {
        width:
            100%;
    }


    .product-window {
        border-radius:
            18px;
    }


    .window-url {
        font-size:
            9px;
    }


    .product-ui {
        grid-template-columns:
            64px 1fr;
    }


    .mock-head {
        margin-bottom:
            14px;
    }


    .mock-card {
        height:
            72px;
    }


    .mock-panel {
        height:
            145px;
    }


    .feature-card,
    .flow-card,
    .price-card {
        padding:
            22px;
    }


    .model-preview {
        padding:
            15px;

        flex-wrap:
            wrap;
    }

}