/* =========================================================
   09ZERO - CONNECT.CSS
   PREMIUM CONNECT PAGE
   DIGITAL MARKETING • WEB • AI
========================================================= */

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

html {
    scroll-behavior: smooth;
}

body {
    min-width: 320px;
    background: #080808;
    color: #ffffff;
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    -webkit-font-smoothing: antialiased;
}

button,
input,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

a {
    color: inherit;
}


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

.connect-header {
    position: relative;
    z-index: 100;

    width: 100%;

    border-bottom: 1px solid rgba(255, 255, 255, 0.07);

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

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.connect-navbar {
    width: min(1380px, calc(100% - 80px));
    min-height: 86px;

    margin: 0 auto;

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

.connect-logo {
    text-decoration: none;

    font-size: 31px;
    line-height: 1;

    font-weight: 800;
    letter-spacing: -0.055em;
}

.connect-logo span {
    color: #888891;
}

.connect-back {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    min-height: 44px;
    padding: 0 18px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;

    color: #b7b7bf;
    text-decoration: none;

    font-size: 13px;
    font-weight: 600;

    transition:
        color 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

.connect-back:hover {
    color: #080808;
    background: #ffffff;
    border-color: #ffffff;
    transform: translateX(-3px);
}


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

.connect-hero {
    position: relative;
    overflow: hidden;

    padding: 115px 0 130px;

    background:
        radial-gradient(
            circle at 10% 25%,
            rgba(0, 100, 255, 0.08),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 55%,
            rgba(255, 80, 20, 0.06),
            transparent 30%
        ),
        #080808;
}

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

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

    width: 1px;
    height: 60%;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(255, 255, 255, 0.07),
            transparent
        );
}

.connect-hero-container {
    width: min(1380px, calc(100% - 80px));
    margin: 0 auto;

    display: grid;
    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(560px, 1.05fr);

    gap: 70px;

    align-items: center;
}


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

.connect-hero-content {
    position: relative;
    z-index: 5;
}

.connect-label,
.connect-section-label {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 27px;

    font-size: 11px;
    line-height: 1;
    font-weight: 700;

    letter-spacing: 0.20em;

    color: #777780;
}

.connect-label-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 0 12px rgba(255, 255, 255, 0.8);
}

.connect-title {
    max-width: 800px;

    font-size: clamp(65px, 7vw, 108px);
    line-height: 0.91;

    font-weight: 600;
    letter-spacing: -0.065em;
}

.connect-title span {
    display: block;
    color: #777780;
}

.connect-description {
    max-width: 650px;

    margin-top: 35px;

    font-size: 18px;
    line-height: 1.75;

    color: #a5a5ad;
}


/* =========================================================
   QUICK CONTACT
========================================================= */

.connect-quick-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 42px;
}

.connect-contact-item {
    display: flex;
    align-items: center;
    gap: 12px;

    min-height: 66px;

    padding: 10px 20px 10px 10px;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;

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

    text-decoration: none;

    transition:
        border-color 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease;
}

.connect-contact-item:hover {
    transform: translateY(-3px);

    border-color: rgba(255, 255, 255, 0.20);

    background: rgba(255, 255, 255, 0.055);
}

.connect-contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    flex: 0 0 auto;

    border-radius: 11px;

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

    color: #ffffff;

    font-size: 13px;
    font-weight: 800;
}

.connect-contact-text small {
    display: block;

    margin-bottom: 5px;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.16em;

    color: #686871;
}

.connect-contact-text strong {
    display: block;

    font-size: 13px;
    font-weight: 600;

    color: #d6d6dc;
}


/* =========================================================
   SOCIAL LINKS
========================================================= */

.connect-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;

    margin-top: 30px;
}

.connect-socials a {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: #777780;

    text-decoration: none;

    font-size: 12px;
    font-weight: 600;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.connect-socials a span {
    font-size: 14px;

    transition: transform 0.3s ease;
}

.connect-socials a:hover {
    color: #ffffff;
    transform: translateY(-2px);
}

.connect-socials a:hover span {
    transform: translate(2px, -2px);
}


/* =========================================================
   CONNECT VISUAL
========================================================= */

.connect-visual {
    position: relative;

    min-height: 640px;

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

.connect-visual-glow {
    position: absolute;

    width: 430px;
    height: 430px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0, 105, 255, 0.16),
            rgba(255, 70, 30, 0.07) 42%,
            transparent 72%
        );

    filter: blur(18px);

    animation: connectGlow 6s ease-in-out infinite;
}


/* =========================================================
   COLOR RINGS
========================================================= */

.connect-ring {
    position: absolute;

    top: 50%;
    left: 50%;

    border-radius: 50%;

    pointer-events: none;
}


/* BLUE */

.connect-ring-blue {
    width: 570px;
    height: 570px;

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

    border: 3px solid transparent;

    border-top-color: #1677ff;
    border-right-color: #1677ff;

    filter:
        drop-shadow(0 0 12px rgba(22, 119, 255, 0.55));

    animation:
        connectRingOne 14s linear infinite;
}


/* YELLOW */

.connect-ring-yellow {
    width: 505px;
    height: 505px;

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

    border: 3px solid transparent;

    border-bottom-color: #ffd21c;
    border-left-color: #ffd21c;

    filter:
        drop-shadow(0 0 12px rgba(255, 210, 28, 0.45));

    animation:
        connectRingTwo 17s linear infinite;
}


/* RED */

.connect-ring-red {
    width: 440px;
    height: 440px;

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

    border: 3px solid transparent;

    border-top-color: #ff3b30;
    border-left-color: #ff3b30;

    filter:
        drop-shadow(0 0 12px rgba(255, 59, 48, 0.45));

    animation:
        connectRingOne 20s linear infinite reverse;
}


/* ORANGE */

.connect-ring-orange {
    width: 380px;
    height: 380px;

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

    border: 3px solid transparent;

    border-right-color: #ff8a00;
    border-bottom-color: #ff8a00;

    filter:
        drop-shadow(0 0 12px rgba(255, 138, 0, 0.45));

    animation:
        connectRingTwo 16s linear infinite reverse;
}


/* =========================================================
   CENTER SYSTEM
========================================================= */

.connect-system {
    position: relative;
    z-index: 10;

    width: 205px;
    height: 205px;

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

    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 25%,
            rgba(255, 255, 255, 0.10),
            rgba(8, 8, 10, 0.98) 65%
        );

    box-shadow:
        0 0 80px rgba(0, 80, 255, 0.14),
        inset 0 0 45px rgba(255, 255, 255, 0.025);

    text-align: center;
}

.connect-system-top {
    margin-bottom: 8px;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.25em;

    color: #707079;
}

.connect-system-logo {
    font-size: 31px;
    line-height: 1;

    font-weight: 800;
    letter-spacing: -0.06em;
}

.connect-system-logo span {
    color: #888891;
}

.connect-system-bottom {
    margin-top: 10px;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.20em;

    color: #65656e;
}

.connect-system-dot {
    position: absolute;

    top: 18px;
    right: 25px;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 0 12px rgba(255, 255, 255, 0.9);

    animation: connectDotPulse 2s ease-in-out infinite;
}


/* =========================================================
   FLOATING CARDS
========================================================= */

.connect-floating-card {
    position: absolute;
    z-index: 20;

    display: flex;
    align-items: center;
    gap: 10px;

    min-width: 142px;

    padding: 11px 14px;

    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0.025)
        );

    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.38);
}

.connect-floating-card > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    flex: 0 0 auto;

    border-radius: 9px;

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

    font-size: 10px;
    font-weight: 800;
}

.connect-floating-card strong {
    display: block;

    font-size: 10px;
    letter-spacing: 0.08em;
}

.connect-floating-card small {
    display: block;

    margin-top: 3px;

    font-size: 8px;
    color: #777780;
}

.connect-card-web {
    top: 75px;
    left: 50%;

    transform: translateX(-50%);

    animation: connectFloatOne 5s ease-in-out infinite;
}

.connect-card-seo {
    top: 175px;
    right: -5px;

    animation: connectFloatTwo 5.5s ease-in-out infinite;
}

.connect-card-ai {
    bottom: 75px;
    right: 25px;

    animation: connectFloatThree 5s ease-in-out infinite;
}

.connect-card-social {
    bottom: 75px;
    left: 25px;

    animation: connectFloatTwo 5.5s ease-in-out infinite;
}

.connect-card-ads {
    top: 175px;
    left: -5px;

    animation: connectFloatOne 5s ease-in-out infinite reverse;
}


/* =========================================================
   VISUAL LABEL
========================================================= */

.connect-visual-label {
    position: absolute;

    bottom: 15px;
    left: 50%;

    transform: translateX(-50%);

    display: flex;
    align-items: center;
    gap: 12px;

    white-space: nowrap;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.20em;

    color: #5e5e67;
}

.connect-visual-label span {
    width: 28px;
    height: 1px;

    background: #55555d;
}


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

.connect-form-section {
    position: relative;

    padding: 145px 0 140px;

    border-top: 1px solid rgba(255, 255, 255, 0.07);

    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(110, 60, 255, 0.06),
            transparent 30%
        ),
        #090909;
}

.connect-form-container {
    width: min(1120px, calc(100% - 80px));
    margin: 0 auto;
}

.connect-form-intro {
    max-width: 780px;
    margin-bottom: 70px;
}

.connect-form-intro h2 {
    margin: 0;

    font-size: clamp(55px, 6vw, 86px);
    line-height: 0.98;

    font-weight: 600;
    letter-spacing: -0.055em;
}

.connect-form-intro h2 span {
    color: #777780;
}

.connect-form-intro p {
    max-width: 650px;

    margin-top: 28px;

    font-size: 17px;
    line-height: 1.75;

    color: #92929a;
}


/* =========================================================
   FORM
========================================================= */

.connect-form {
    position: relative;
}

.connect-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 35px 24px;
}

.connect-field,
.connect-service-field,
.connect-budget-field {
    position: relative;
}

.connect-field label,
.connect-service-field > label,
.connect-budget-field > label {
    display: block;

    margin-bottom: 12px;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.10em;
    text-transform: uppercase;

    color: #888890;
}

.connect-field input,
.connect-field textarea {
    width: 100%;

    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);

    outline: none;

    padding: 14px 0 17px;

    border-radius: 0;

    background: transparent;

    color: #ffffff;

    font-size: 16px;

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

.connect-field input::placeholder,
.connect-field textarea::placeholder {
    color: #4f4f57;
}

.connect-field input:focus,
.connect-field textarea:focus {
    border-color: rgba(255, 255, 255, 0.65);

    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.3);
}

.connect-message-field {
    margin-top: 48px;
}

.connect-field textarea {
    min-height: 170px;

    resize: vertical;

    line-height: 1.7;
}


/* =========================================================
   SERVICE OPTIONS
========================================================= */

.connect-service-field {
    margin-top: 65px;
}

.connect-service-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.connect-service-option,
.connect-budget-option {
    min-height: 45px;

    padding: 0 17px;

    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 999px;

    background: transparent;

    color: #92929a;

    font-size: 12px;
    font-weight: 600;

    transition:
        color 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}

.connect-service-option:hover,
.connect-budget-option:hover {
    color: #ffffff;

    border-color: rgba(255, 255, 255, 0.30);

    transform: translateY(-2px);
}

.connect-service-option.active,
.connect-budget-option.active {
    background: #ffffff;
    border-color: #ffffff;

    color: #080808;
}


/* =========================================================
   BUDGET
========================================================= */

.connect-budget-field {
    margin-top: 48px;
}

.connect-budget-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}


/* =========================================================
   ERRORS
========================================================= */

.connect-error {
    display: block;

    min-height: 17px;

    margin-top: 7px;

    font-size: 11px;
    line-height: 1.4;

    color: #ff6b5f;
}

.connect-field.has-error input,
.connect-field.has-error textarea {
    border-color: rgba(255, 70, 60, 0.65);
}


/* =========================================================
   SUBMIT
========================================================= */

.connect-submit-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;

    margin-top: 55px;
}

.connect-submit-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    min-width: 205px;
    min-height: 60px;

    padding: 0 10px 0 25px;

    border: none;
    border-radius: 999px;

    background: #ffffff;
    color: #080808;

    font-size: 14px;
    font-weight: 700;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        opacity 0.3s ease;
}

.connect-submit-button:hover {
    transform: translateY(-4px);
}

.connect-submit-button:disabled {
    cursor: wait;
    opacity: 0.55;
    transform: none;
}

.connect-submit-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    border-radius: 50%;

    background: #080808;
    color: #ffffff;

    font-size: 18px;

    transition: transform 0.3s ease;
}

.connect-submit-button:hover .connect-submit-arrow {
    transform: rotate(-45deg);
}

.connect-form-note {
    max-width: 390px;

    font-size: 11px;
    line-height: 1.6;

    color: #5f5f67;
}


/* =========================================================
   FORM STATUS
========================================================= */

.connect-form-status {
    min-height: 24px;

    margin-top: 25px;

    font-size: 13px;
    line-height: 1.6;
}

.connect-form-status.success {
    color: #8fd19e;
}

.connect-form-status.error {
    color: #ff7770;
}


/* =========================================================
   DIRECT CONTACT
========================================================= */

.connect-direct {
    padding: 100px 0;

    border-top: 1px solid rgba(255, 255, 255, 0.07);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);

    background: #080808;
}

.connect-direct-container {
    width: min(1380px, calc(100% - 80px));
    margin: 0 auto;

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

    gap: 50px;
}

.connect-direct-content > span {
    display: block;

    margin-bottom: 15px;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.18em;

    color: #64646d;
}

.connect-direct-content h2 {
    font-size: clamp(38px, 4vw, 60px);
    line-height: 1;

    font-weight: 600;
    letter-spacing: -0.045em;
}

.connect-direct-content h2 strong {
    color: #777780;
    font-weight: inherit;
}

.connect-direct-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    gap: 13px;
}

.connect-whatsapp-button,
.connect-email-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;

    min-width: 245px;
    min-height: 55px;

    padding: 0 10px 0 22px;

    border-radius: 999px;

    text-decoration: none;

    font-size: 13px;
    font-weight: 700;
}

.connect-whatsapp-button {
    background: #ffffff;
    color: #080808;
}

.connect-email-button {
    border: 1px solid rgba(255, 255, 255, 0.13);
    color: #b0b0b8;
}

.connect-whatsapp-button span:last-child,
.connect-email-button span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 35px;
    height: 35px;

    border-radius: 50%;

    background: #080808;
    color: #ffffff;

    transition: transform 0.3s ease;
}

.connect-email-button span {
    background: rgba(255, 255, 255, 0.08);
}

.connect-whatsapp-button:hover span:last-child,
.connect-email-button:hover span {
    transform: rotate(-45deg);
}


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

.connect-footer {
    padding: 65px 0 25px;

    background: #060606;
}

.connect-footer-container {
    width: min(1380px, calc(100% - 80px));
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;

    gap: 50px;
}

.connect-footer-logo {
    display: inline-block;

    font-size: 28px;
    line-height: 1;

    font-weight: 800;
    letter-spacing: -0.055em;

    text-decoration: none;
}

.connect-footer-logo span {
    color: #777780;
}

.connect-footer-brand p {
    margin-top: 13px;

    font-size: 11px;
    color: #5f5f67;

    letter-spacing: 0.08em;
}

.connect-footer-links,
.connect-footer-socials {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.connect-footer-links a,
.connect-footer-socials a {
    width: fit-content;

    color: #6e6e77;

    text-decoration: none;

    font-size: 12px;
    font-weight: 500;

    transition: color 0.25s ease;
}

.connect-footer-links a:hover,
.connect-footer-socials a:hover {
    color: #ffffff;
}

.connect-footer-bottom {
    width: min(1380px, calc(100% - 80px));

    margin: 55px auto 0;
    padding-top: 20px;

    border-top: 1px solid rgba(255, 255, 255, 0.07);

    display: flex;
    justify-content: space-between;
    gap: 20px;

    font-size: 10px;
    letter-spacing: 0.08em;

    color: #4f4f57;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes connectGlow {

    0%,
    100% {
        transform: scale(0.94);
        opacity: 0.65;
    }

    50% {
        transform: scale(1.06);
        opacity: 1;
    }
}

@keyframes connectRingOne {

    from {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }
}

@keyframes connectRingTwo {

    from {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }
}

@keyframes connectDotPulse {

    0%,
    100% {
        opacity: 0.4;
        transform: scale(0.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

@keyframes connectFloatOne {

    0%,
    100% {
        transform: translateY(0) translateX(-50%);
    }

    50% {
        transform: translateY(-9px) translateX(-50%);
    }
}

@keyframes connectFloatTwo {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }
}

@keyframes connectFloatThree {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(8px);
    }
}


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

@media (min-width: 1600px) {

    .connect-navbar,
    .connect-hero-container,
    .connect-direct-container,
    .connect-footer-container,
    .connect-footer-bottom {
        width: 1500px;
    }

    .connect-title {
        font-size: 112px;
    }

    .connect-description {
        font-size: 20px;
    }

    .connect-visual {
        min-height: 700px;
    }

    .connect-ring-blue {
        width: 650px;
        height: 650px;
    }

    .connect-ring-yellow {
        width: 575px;
        height: 575px;
    }

    .connect-ring-red {
        width: 500px;
        height: 500px;
    }

    .connect-ring-orange {
        width: 430px;
        height: 430px;
    }

    .connect-system {
        width: 220px;
        height: 220px;
    }

    .connect-form-container {
        width: 1200px;
    }
}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1300px) {

    .connect-hero-container {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(480px, 1.1fr);

        gap: 40px;
    }

    .connect-title {
        font-size: clamp(58px, 6.5vw, 88px);
    }

    .connect-visual {
        min-height: 570px;
    }

    .connect-ring-blue {
        width: 510px;
        height: 510px;
    }

    .connect-ring-yellow {
        width: 450px;
        height: 450px;
    }

    .connect-ring-red {
        width: 390px;
        height: 390px;
    }

    .connect-ring-orange {
        width: 335px;
        height: 335px;
    }

    .connect-system {
        width: 185px;
        height: 185px;
    }

    .connect-card-seo {
        right: 0;
    }

    .connect-card-ads {
        left: 0;
    }
}


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

@media (max-width: 950px) {

    .connect-navbar {
        width: min(100% - 50px, 760px);
    }

    .connect-hero {
        padding: 100px 0 110px;
    }

    .connect-hero-container {
        width: min(100% - 50px, 760px);

        grid-template-columns: 1fr;

        gap: 70px;
    }

    .connect-title {
        max-width: 700px;
        font-size: clamp(55px, 10vw, 82px);
    }

    .connect-visual {
        min-height: 570px;
    }

    .connect-form-container {
        width: min(100% - 50px, 760px);
    }

    .connect-direct-container {
        width: min(100% - 50px, 760px);
    }

    .connect-footer-container,
    .connect-footer-bottom {
        width: min(100% - 50px, 760px);
    }

    .connect-footer-container {
        grid-template-columns: 1fr 1fr;
    }

    .connect-footer-brand {
        grid-column: 1 / -1;
    }
}


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

@media (max-width: 600px) {

    .connect-navbar {
        width: calc(100% - 36px);
        min-height: 72px;
    }

    .connect-logo {
        font-size: 27px;
    }

    .connect-back {
        min-height: 40px;
        padding: 0 14px;

        font-size: 11px;
    }

    .connect-hero {
        padding: 80px 0 90px;
    }

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

    .connect-hero-container {
        width: calc(100% - 36px);

        gap: 55px;
    }

    .connect-label {
        margin-bottom: 20px;

        font-size: 9px;
    }

    .connect-title {
        font-size: clamp(46px, 13vw, 64px);
        line-height: 0.95;
    }

    .connect-description {
        margin-top: 25px;

        font-size: 15px;
        line-height: 1.7;
    }

    .connect-quick-contact {
        flex-direction: column;
        margin-top: 32px;
    }

    .connect-contact-item {
        width: 100%;
    }

    .connect-socials {
        gap: 15px;
    }

    .connect-socials a {
        font-size: 11px;
    }

    .connect-visual {
        min-height: 395px;
    }

    .connect-ring-blue {
        width: 350px;
        height: 350px;
        border-width: 2px;
    }

    .connect-ring-yellow {
        width: 310px;
        height: 310px;
        border-width: 2px;
    }

    .connect-ring-red {
        width: 270px;
        height: 270px;
        border-width: 2px;
    }

    .connect-ring-orange {
        width: 235px;
        height: 235px;
        border-width: 2px;
    }

    .connect-system {
        width: 130px;
        height: 130px;
    }

    .connect-system-top {
        font-size: 6px;
    }

    .connect-system-logo {
        font-size: 19px;
    }

    .connect-system-bottom {
        margin-top: 6px;
        font-size: 5px;
    }

    .connect-system-dot {
        top: 12px;
        right: 16px;

        width: 4px;
        height: 4px;
    }

    .connect-floating-card {
        min-width: 88px;

        padding: 7px;

        gap: 6px;

        border-radius: 9px;
    }

    .connect-floating-card > span {
        width: 26px;
        height: 26px;

        border-radius: 6px;

        font-size: 8px;
    }

    .connect-floating-card strong {
        font-size: 7px;
    }

    .connect-floating-card small {
        font-size: 5px;
    }

    .connect-card-web {
        top: 15px;
    }

    .connect-card-seo {
        top: 90px;
        right: -4px;
    }

    .connect-card-ai {
        right: 5px;
        bottom: 30px;
    }

    .connect-card-social {
        left: 5px;
        bottom: 30px;
    }

    .connect-card-ads {
        top: 90px;
        left: -4px;
    }

    .connect-visual-label {
        bottom: -18px;
        font-size: 7px;
    }

    .connect-form-section {
        padding: 90px 0;
    }

    .connect-form-container {
        width: calc(100% - 36px);
    }

    .connect-form-intro {
        margin-bottom: 50px;
    }

    .connect-form-intro h2 {
        font-size: clamp(40px, 11vw, 55px);
    }

    .connect-form-intro p {
        margin-top: 22px;
        font-size: 14px;
    }

    .connect-form-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .connect-service-field {
        margin-top: 45px;
    }

    .connect-service-option,
    .connect-budget-option {
        min-height: 40px;
        padding: 0 13px;

        font-size: 10px;
    }

    .connect-message-field {
        margin-top: 40px;
    }

    .connect-field input,
    .connect-field textarea {
        font-size: 14px;
    }

    .connect-submit-area {
        flex-direction: column;
        align-items: flex-start;

        margin-top: 40px;
    }

    .connect-submit-button {
        width: 100%;
    }

    .connect-form-note {
        max-width: 100%;
    }

    .connect-direct {
        padding: 75px 0;
    }

    .connect-direct-container {
        width: calc(100% - 36px);

        flex-direction: column;
        align-items: flex-start;

        gap: 35px;
    }

    .connect-direct-content h2 {
        font-size: 37px;
    }

    .connect-direct-actions {
        width: 100%;
        align-items: stretch;
    }

    .connect-whatsapp-button,
    .connect-email-button {
        width: 100%;
        min-width: 0;
    }

    .connect-footer {
        padding-top: 55px;
    }

    .connect-footer-container,
    .connect-footer-bottom {
        width: calc(100% - 36px);
    }

    .connect-footer-container {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .connect-footer-brand {
        grid-column: auto;
    }

    .connect-footer-bottom {
        flex-direction: column;
        gap: 8px;

        margin-top: 45px;
    }
}


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

@media (max-width: 380px) {

    .connect-navbar {
        width: calc(100% - 28px);
    }

    .connect-back {
        padding: 0 11px;
        font-size: 10px;
    }

    .connect-title {
        font-size: 43px;
    }

    .connect-hero-container {
        width: calc(100% - 28px);
    }

    .connect-visual {
        min-height: 330px;
    }

    .connect-ring-blue {
        width: 290px;
        height: 290px;
    }

    .connect-ring-yellow {
        width: 255px;
        height: 255px;
    }

    .connect-ring-red {
        width: 220px;
        height: 220px;
    }

    .connect-ring-orange {
        width: 190px;
        height: 190px;
    }

    .connect-system {
        width: 105px;
        height: 105px;
    }

    .connect-system-logo {
        font-size: 16px;
    }

    .connect-floating-card {
        min-width: 78px;
    }

    .connect-floating-card > span {
        width: 23px;
        height: 23px;
    }

    .connect-form-container,
    .connect-direct-container,
    .connect-footer-container,
    .connect-footer-bottom {
        width: calc(100% - 28px);
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    .connect-visual-glow,
    .connect-ring,
    .connect-system-dot,
    .connect-floating-card {
        animation: none;
    }

    .connect-back,
    .connect-contact-item,
    .connect-socials a,
    .connect-service-option,
    .connect-budget-option,
    .connect-submit-button,
    .connect-submit-arrow,
    .connect-whatsapp-button span:last-child,
    .connect-email-button span {
        transition: none;
    }
}






/* =========================================================
   CONNECT - LARGE & CLEAR TYPOGRAPHY
========================================================= */

/* Hero small label */
.connect-hero .section-label,
.connect-hero-label {
    font-size: 16px;
    letter-spacing: 2px;
    font-weight: 700;
}

/* Main Hero Heading */
.connect-title {
    font-size: clamp(56px, 6vw, 96px);
    line-height: 0.98;
    letter-spacing: -3px;
    font-weight: 800;
}

.connect-title span {
    display: inline-block;
}

/* Hero Description */
.connect-description {
    font-size: 20px;
    line-height: 1.7;
    max-width: 680px;
}

/* Quick Contact */
.connect-contact-item {
    font-size: 18px;
}

.connect-contact-item strong {
    font-size: 17px;
}

.connect-contact-item span,
.connect-contact-item a {
    font-size: 18px;
}

/* Social links */
.connect-socials a {
    font-size: 16px;
    font-weight: 600;
}

/* Floating cards */
.connect-floating-card {
    font-size: 15px;
}

.connect-floating-card strong {
    font-size: 17px;
}

.connect-floating-card small {
    font-size: 13px;
}

/* Center 09ZERO visual */
.connect-system-center span {
    font-size: 13px;
    letter-spacing: 3px;
}

.connect-system-center strong {
    font-size: 42px;
    line-height: 1;
}

.connect-system-center small {
    font-size: 12px;
    letter-spacing: 2px;
}

/* =========================================================
   FORM TYPOGRAPHY
========================================================= */

.connect-form-section .section-label {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2px;
}

.connect-form-title {
    font-size: clamp(42px, 5vw, 72px);
    line-height: 1;
    letter-spacing: -2px;
    font-weight: 800;
}

.connect-form-description {
    font-size: 19px;
    line-height: 1.7;
}

/* Labels */
.connect-form label {
    font-size: 17px;
    font-weight: 700;
}

/* Inputs */
.connect-form input,
.connect-form textarea,
.connect-form select {
    font-size: 18px;
    line-height: 1.5;
}

/* Placeholder */
.connect-form input::placeholder,
.connect-form textarea::placeholder {
    font-size: 17px;
}

/* Service / Budget buttons */
.connect-service-option,
.connect-budget-option {
    font-size: 16px;
    font-weight: 600;
}

/* Submit button */
.connect-submit-button {
    font-size: 18px;
    font-weight: 700;
}

/* Form status */
#connectFormStatus {
    font-size: 16px;
    line-height: 1.5;
}

/* =========================================================
   DIRECT CONTACT CTA
========================================================= */

.connect-direct-label {
    font-size: 16px;
    letter-spacing: 2px;
    font-weight: 700;
}

.connect-direct-title {
    font-size: clamp(38px, 4vw, 60px);
    line-height: 1.05;
    font-weight: 800;
}

.connect-direct-description {
    font-size: 18px;
    line-height: 1.7;
}

.connect-direct-button {
    font-size: 17px;
    font-weight: 700;
}

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

.connect-footer {
    font-size: 16px;
}

.connect-footer a {
    font-size: 16px;
}

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

@media (max-width: 950px) {

    .connect-title {
        font-size: clamp(48px, 9vw, 72px);
        letter-spacing: -2px;
    }

    .connect-description {
        font-size: 18px;
    }

    .connect-form-title {
        font-size: clamp(40px, 8vw, 58px);
    }

    .connect-form-description {
        font-size: 18px;
    }

}

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

@media (max-width: 600px) {

    .connect-title {
        font-size: clamp(42px, 13vw, 60px);
        line-height: 1;
        letter-spacing: -1.5px;
    }

    .connect-description {
        font-size: 17px;
        line-height: 1.65;
    }

    .connect-hero .section-label,
    .connect-hero-label {
        font-size: 14px;
        letter-spacing: 1.5px;
    }

    .connect-contact-item {
        font-size: 17px;
    }

    .connect-contact-item span,
    .connect-contact-item a {
        font-size: 17px;
    }

    .connect-form-title {
        font-size: clamp(38px, 12vw, 52px);
        letter-spacing: -1px;
    }

    .connect-form-description {
        font-size: 17px;
    }

    .connect-form label {
        font-size: 16px;
    }

    .connect-form input,
    .connect-form textarea,
    .connect-form select {
        font-size: 17px;
    }

    .connect-service-option,
    .connect-budget-option {
        font-size: 15px;
    }

    .connect-submit-button {
        font-size: 17px;
    }

    .connect-direct-title {
        font-size: clamp(34px, 11vw, 48px);
    }

}

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

@media (max-width: 380px) {

    .connect-title {
        font-size: 40px;
    }

    .connect-description {
        font-size: 16px;
    }

    .connect-form-title {
        font-size: 36px;
    }

    .connect-form input,
    .connect-form textarea,
    .connect-form select {
        font-size: 16px;
    }

}






/* =========================================================
   CONNECT FOOTER - LARGE TYPOGRAPHY
========================================================= */

.connect-footer {
    font-size: 18px;
}

.connect-footer a {
    font-size: 18px;
    font-weight: 600;
}

.connect-footer p {
    font-size: 17px;
    line-height: 1.6;
}

.connect-footer h3,
.connect-footer h4 {
    font-size: 20px;
    line-height: 1.3;
}

.connect-footer .connect-logo {
    font-size: 30px;
}

.connect-footer small {
    font-size: 16px;
}

/* Footer links spacing */
.connect-footer-links {
    gap: 24px;
}

.connect-footer-links a {
    font-size: 18px;
}

/* Social links */
.connect-footer-socials a {
    font-size: 18px;
}


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

@media (max-width: 600px) {

    .connect-footer {
        font-size: 17px;
    }

    .connect-footer a {
        font-size: 17px;
    }

    .connect-footer p {
        font-size: 16px;
    }

    .connect-footer h3,
    .connect-footer h4 {
        font-size: 19px;
    }

    .connect-footer .connect-logo {
        font-size: 28px;
    }

    .connect-footer-links {
        gap: 18px;
    }

    .connect-footer-links a {
        font-size: 17px;
    }

    .connect-footer-socials a {
        font-size: 17px;
    }

}