/* ============================================================
   ZORDO PREMIUM RESPONSIVE REDESIGN
   Loaded after style.css so the original form/backend logic and
   content stay intact while the visual layer remains conflict-safe.
============================================================ */

:root {
    --zr-navy: #071321;
    --zr-navy-2: #0b2035;
    --zr-surface: #ffffff;
    --zr-soft: #f4f7fb;
    --zr-text: #0d1726;
    --zr-muted: #667085;
    --zr-line: #dfe6ef;
    --zr-cyan: #36c6cb;
    --zr-orange: #ffad26;
    --zr-coral: #ffbd31;
    --zr-pink: #ffbd31;
    --zr-green: #24d366;
    --zr-purple: #64114f;
    --zr-shadow: 0 24px 70px rgba(8, 25, 48, .12);
    --zr-radius: 24px;
}

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

body {
    background: var(--zr-soft);
    color: var(--zr-text);
}

.section,
#form {
    scroll-margin-top: 88px;
}

::selection {
    color: #fff;
    background: var(--zr-purple);
}

a,
button,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.faq-btn:focus-visible {
    outline: 3px solid rgba(54, 198, 203, .35);
    outline-offset: 3px;
}

/* Original stylesheet expected an animation script that was missing.
   These defaults keep every section visible even when JS is disabled. */
.nav-logo,
.nav-cta,
.s-head .sh2,
.s-head .eyebrow,
.s-head .ssub,
.svc-card,
.case-card,
.p-card,
.why-card,
.tech-row,
.testi-card,
.faq-item,
.footer-cta h2,
.footer-cta p,
.footer-cta .btn-dark-wrap {
    opacity: 1;
    transform: none;
}

.s-head {
    overflow: visible;
}

/* Progressive reveal is enabled only by premium-redesign.js. */
.premium-reveal {
    opacity: 0 !important;
    transform: translateY(28px) !important;
    transition: opacity .7s ease, transform .7s cubic-bezier(.2, .75, .25, 1) !important;
}

.premium-reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
}

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

nav#nav {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 76px;
    padding: 0 clamp(22px, 5vw, 82px);
    background: rgba(255, 255, 255, .98);
    border-bottom: 1px solid rgba(13, 23, 38, .08);
    border-radius: 0 0 30px 30px;
    box-shadow: 0 8px 30px rgba(7, 19, 33, .07);
    will-change: transform;
    transition: transform .28s cubic-bezier(.2, .75, .25, 1), height .25s ease, background .25s ease, box-shadow .25s ease;
}

nav#nav.scrolled {
    height: 68px;
    background: rgba(255, 255, 255, .92);
    border-color: rgba(13, 23, 38, .1);
    box-shadow: 0 12px 36px rgba(7, 19, 33, .12);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

nav#nav.nav-hidden {
    transform: translate3d(0, calc(-100% - 12px), 0);
}

nav#nav:focus-within {
    transform: none;
}

.nav-logo {
    display: inline-flex;
    align-items: center;
    opacity: 1 !important;
}

.nav-logo img {
    display: block;
    width: 132px;
    height: auto;
}

.nav-cta {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 11px 21px 11px 24px;
    color: #fff;
    background: linear-gradient(135deg, #060b13, #10243a);
    border: 1px solid rgba(54, 198, 203, .26);
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(7, 19, 33, .18);
    opacity: 1 !important;
    font-size: 13px;
    letter-spacing: .01em;
}

.nav-cta::after {
    /*content: ">";*/
    display: grid;
    place-items: center;
    width: 23px;
    height: 23px;
    color: #fff;
    background: rgba(255, 255, 255, .1);
    border-radius: 50%;
    transition: transform .22s ease, background .22s ease;
}

.nav-cta:hover {
    color: #fff;
    opacity: 1;
    transform: translateY(-2px);
}

.nav-cta:hover::after {
    transform: translateX(3px);
    background: var(--zr-cyan);
}

#progress {
    height: 3px;
    background: linear-gradient(90deg, var(--zr-cyan), var(--zr-orange), var(--zr-pink));
}

#cursor,
#cursor-ring {
    top: 0;
    left: 0;
}

#cursor {
    background: var(--zr-cyan);
}

#cursor-ring {
    border-color: rgba(54, 198, 203, .55);
}

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

.hero-quote-section {
    isolation: isolate;
    min-height: 100svh;
    padding: 118px clamp(20px, 5vw, 84px) 0;
    overflow: clip;
    background-image:
        linear-gradient(90deg, rgba(4, 13, 24, .98) 0%, rgba(4, 15, 28, .93) 43%, rgba(5, 18, 31, .78) 72%, rgba(6, 19, 33, .84) 100%),
        url("../images/main-banner2.jpg");
    background-position: center;
    background-size: cover;
    /*border-radius: 0 0 34px 34px;*/
}

.hero-quote-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(to right, #000, transparent 82%);
}

.hero-quote-section::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 560px;
    height: 560px;
    left: -260px;
    top: 85px;
    border-radius: 50%;
    background: rgba(54, 198, 203, .13);
    filter: blur(100px);
    pointer-events: none;
}

.hero-quote-overlay {
    background:
        radial-gradient(circle at 73% 16%, rgba(54, 198, 203, .16), transparent 28%),
        radial-gradient(circle at 44% 76%, rgba(245, 44, 112, .09), transparent 34%);
}

.hero-quote-container {
    max-width: 1510px;
    margin: 0 auto;
    grid-template-columns: minmax(0, 1fr) minmax(500px, 590px);
    align-items: start;
    gap: clamp(38px, 5vw, 90px);
}

.hero-content-left {
    max-width: 720px;
    padding: 12px 0 40px;
}

.hero-agency-line {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 22px;
    color: #bed2e8;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .22em;
    line-height: 1.4;
    text-transform: uppercase;
}

.hero-agency-line > span {
    width: 34px;
    height: 2px;
    flex: 0 0 34px;
    background: linear-gradient(90deg, var(--zr-orange), var(--zr-coral));
    border-radius: 999px;
}

.hero-main-heading {
    max-width: 720px;
    color: #fff;
    font-size: clamp(50px, 5.1vw, 50px);
    font-weight: 700;
    line-height: .98;
    letter-spacing: 0;
    text-wrap: balance;
}

.hero-main-heading .hero-heading-line,
.hero-main-heading .hero-gradient-text {
    display: block;
    margin: 0;
}

.hero-main-heading .hero-heading-line {
    color: #fff;
}

.hero-main-heading .hero-gradient-text {
    width: fit-content;
    margin-top: 8px;
    padding-right: .08em;
    color: #f9b721;
    background: linear-gradient(100deg, #ffbd31 4%, #ff7a45 50%, #f8ab16 98%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-description {
    max-width: 650px;
    margin-top: 26px;
    color: rgba(232, 241, 251, .84);
    font-size: clamp(16px, 1.35vw, 19px);
    font-weight: 400;
    line-height: 1.72;
}

.hero-service-tags {
    gap: 10px;
    margin-top: 28px;
}

.hero-service-tag {
    min-height: 42px;
    padding: 9px 15px;
    color: rgba(255, 255, 255, .92);
    background: rgba(255, 255, 255, .065);
    border: 1px solid rgba(183, 211, 240, .24);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    font-size: 13px;
    font-weight: 600;
}

.hero-service-tag b {
    width: 19px;
    height: 19px;
    display: grid;
    place-items: center;
    color: #06131f;
    background: var(--zr-cyan);
    border-radius: 6px;
    font-size: 11px;
    line-height: 1;
}

.hero-service-tag:nth-child(3n + 2) b {
    background: var(--zr-orange);
}

.hero-service-tag:nth-child(3n) b {
    color: #fff;
    background: var(--zr-pink);
}

.hero-service-tag:hover {
    background: rgba(255, 255, 255, .11);
    border-color: rgba(54, 198, 203, .62);
}

.hero-action-buttons {
    gap: 14px;
    margin-top: 30px;
}

.hero-primary-btn,
.hero-whatsapp-btn {
    min-height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 14px 27px;
    border-radius: 15px;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.hero-primary-btn {
    min-width: 178px;
    background: linear-gradient(100deg, var(--zr-orange), var(--zr-coral), var(--zr-pink));
    box-shadow: 0 15px 36px rgba(255, 86, 91, .3);
}

.hero-primary-btn span {
    font-size: 21px;
    transition: transform .22s ease;
}

.hero-primary-btn:hover,
.hero-whatsapp-btn:hover {
    color: #fff;
    transform: translateY(-3px);
}

.hero-primary-btn:hover {
    box-shadow: 0 19px 42px rgba(255, 86, 91, .4);
}

.hero-primary-btn:hover span {
    transform: translateX(4px);
}

.hero-whatsapp-btn {
    min-width: 166px;
    background: rgba(255, 255, 255, .075);
    border: 1px solid rgba(95, 242, 157, .58);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.hero-whatsapp-btn svg {
    color: #5ff29d;
    filter: drop-shadow(0 0 8px rgba(36, 211, 102, .34));
}

.hero-whatsapp-btn:hover {
    border-color: #5ff29d;
    box-shadow: 0 14px 34px rgba(36, 211, 102, .16);
}

.hero-proof {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 28px;
}

.hero-proof-avatars {
    display: flex;
    padding-left: 9px;
}

.hero-proof-avatars span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    margin-left: -9px;
    color: #071321;
    background: #fff;
    border: 3px solid #13273b;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
}

.hero-proof-avatars span:nth-child(2) { background: #9be4e7; }
.hero-proof-avatars span:nth-child(3) { background: #ffc867; }
.hero-proof-avatars span:nth-child(4) { color: #fff; background: #7a285f; }

.hero-proof-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

.hero-proof-copy strong {
    color: #f5f8fc;
    font-size: 13px;
}

.hero-proof-copy strong span {
    margin-right: 6px;
    color: #ffc439;
    letter-spacing: 1px;
}

.hero-proof-copy small {
    margin-top: 3px;
    color: rgba(217, 231, 245, .58);
    font-size: 11px;
}

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

.hero-quote-container > .form-section {
    padding: 0 !important;
    background: transparent !important;
    overflow: visible;
}

.hero-quote-container .form-inner {
    max-width: 590px;
}

.hero-quote-container .form-card {
    position: relative;
    padding: clamp(24px, 2vw, 32px);
    overflow: hidden;
    background: rgba(255, 255, 255, .965);
    border: 1px solid rgba(189, 223, 250, .9);
    border-radius: 28px;
    box-shadow:
        0 30px 80px rgba(0, 8, 20, .4),
        0 0 0 8px rgba(206, 232, 252, .15),
        inset 0 1px 0 #fff;
    transform: none !important;
}

.hero-quote-container .form-card::before {
    content: "";
    position: absolute;
    width: 230px;
    height: 230px;
    right: -105px;
    top: -115px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(54, 198, 203, .18), transparent 68%);
    pointer-events: none;
}

.quote-form-heading {
    position: relative;
    z-index: 1;
    margin-bottom: 18px;
    text-align: center;
}

.quote-form-badge {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    margin-bottom: 9px;
    padding: 5px 10px;
    color: #176a70;
    background: #e5fafb;
    border: 1px solid #c3eff1;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.hero-quote-section .quote-form-heading h2 {
    margin: 0;
    color: var(--zr-text);
    font-size: clamp(24px, 2vw, 31px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.045em;
}

.quote-form-heading h2 em {
    color: var(--zr-orange);
    font-style: normal;
}

.quote-form-heading p {
    margin-top: 7px;
    color: #748198;
    font-size: 12px;
    line-height: 1.5;
}

.hero-quote-container .fg {
    min-width: 0;
    margin-bottom: 0;
}

.hero-quote-container #quoteForm {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px 12px;
}

.hero-quote-container #quoteForm > .fg:nth-child(n + 5),
.hero-quote-container #formMessage,
.hero-quote-container .submit-btn,
.hero-quote-container .quote-privacy {
    grid-column: 1 / -1;
}

.hero-quote-container .fg label {
    margin: 0 0 5px 2px;
    color: #253249;
    font-size: 11px;
    font-weight: 700;
}

.hero-quote-container .fg input,
.hero-quote-container .fg select,
.hero-quote-container .fg textarea {
    min-height: 46px;
    padding: 11px 14px;
    color: #17233a;
    background: #f8fafc;
    border: 1px solid #dbe3ed;
    border-radius: 11px;
    font-size: 13px;
    box-shadow: inset 0 1px 2px rgba(10, 29, 54, .025);
}

.hero-quote-container .fg textarea {
    min-height: 72px;
    max-height: 130px;
}

.hero-quote-container .fg input:focus,
.hero-quote-container .fg select:focus,
.hero-quote-container .fg textarea:focus {
    background: #fff;
    border-color: var(--zr-cyan);
    box-shadow: 0 0 0 4px rgba(54, 198, 203, .12);
}

.hero-quote-container .submit-btn {
    min-height: 54px;
    margin-top: 1px;
    color: #fff;
    background: linear-gradient(100deg, var(--zr-orange), var(--zr-coral), var(--zr-pink));
    border-radius: 13px;
    box-shadow: 0 13px 30px rgba(255, 82, 94, .25);
    font-size: 15px;
    font-weight: 800;
}

.hero-quote-container .submit-btn::after {
    background: linear-gradient(100deg, #f19818, #ee275f);
}

.hero-quote-container .submit-btn:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 17px 36px rgba(255, 82, 94, .34);
}

.hero-quote-container .submit-btn:disabled {
    cursor: wait;
    opacity: .72;
}

.quote-privacy {
    margin: 0;
    color: #8791a2;
    font-size: 10px;
    line-height: 1.45;
    text-align: center;
}

.success-icon::after {
    content: "";
}

.hero-quote-container .field-error {
    margin: 4px 2px 0;
    color: #d8364c;
    font-size: 10px;
}

@media (min-width: 981px) {
    .hero-content-left {
        position: sticky;
        top: 94px;
        align-self: start;
    }
}

.hero-benefit-strip {
    position: relative;
    z-index: 2;
    width: calc(100% + clamp(40px, 10vw, 168px));
    max-width: none;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 44px 0 0 calc(clamp(20px, 5vw, 84px) * -1);
    padding: 19px clamp(20px, 5vw, 84px);
    background: rgba(8, 24, 40, .91);
    border-top: 1px solid rgba(160, 201, 238, .2);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.hero-benefit-item {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 3px 18px;
    border-right: 1px solid rgba(199, 221, 241, .17);
}

.hero-benefit-item:last-child {
    border-right: 0;
}

.hero-benefit-item > span {
    width: 37px;
    height: 37px;
    flex: 0 0 37px;
    display: grid;
    place-items: center;
    color: #90cdfd;
    background: rgba(75, 157, 232, .1);
    border: 1px solid rgba(123, 190, 247, .23);
    border-radius: 11px;
    font-size: 19px;
}

.hero-benefit-item p {
    min-width: 0;
    display: flex;
    flex-direction: column;
    margin: 0;
    line-height: 1.3;
}

.hero-benefit-item strong {
    overflow: hidden;
    color: #eef6ff;
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hero-benefit-item small {
    margin-top: 2px;
    overflow: hidden;
    color: rgba(211, 228, 244, .6);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ========================= TICKER ========================= */

.marquee-wrap {
    padding: 15px 0;
    background: #071321;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.m-item {
    color: rgba(255, 255, 255, .82);
    font-size: 12px;
    letter-spacing: .025em;
}

.m-item::before {
    color: var(--zr-cyan);
}

/* ========================= SHARED SECTIONS ========================= */

.section {
    padding: clamp(78px, 8vw, 118px) clamp(20px, 5vw, 78px);
}

.s-inner {
    max-width: 1240px;
}

.eyebrow {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    padding: 7px 12px;
    color: #35516b;
    background: #eaf4f6;
    border: 1px solid #d7ebee;
    border-radius: 999px;
    font-size: 10px;
    letter-spacing: .15em;
}

.eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    background: linear-gradient(135deg, var(--zr-cyan), var(--zr-orange));
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(54, 198, 203, .1);
}

.sh2 {
    max-width: 850px;
    margin-bottom: 20px;
    color: var(--zr-text);
    font-size: clamp(38px, 4.6vw, 64px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -.052em;
}

.dim {
    color: #a5aebc;
    font-weight: 500;
}

.ssub {
    max-width: 620px;
    color: var(--zr-muted);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.7;
}

/* ========================= SERVICES ========================= */

.services {
    position: relative;
    background:
        radial-gradient(circle at 7% 3%, rgba(54, 198, 203, .1), transparent 25%),
        var(--zr-soft);
}

.svc-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 54px;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.svc-card {
    min-height: 330px;
    padding: 34px;
    overflow: hidden;
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(207, 219, 232, .95);
    border-radius: 21px;
    box-shadow: 0 12px 38px rgba(14, 37, 66, .055);
}

.svc-card::before {
    content: "";
    position: absolute;
    width: 130px;
    height: 130px;
    right: -70px;
    bottom: -75px;
    border-radius: 50%;
    background: rgba(54, 198, 203, .08);
    transition: transform .35s ease, background .35s ease;
}

.svc-card:nth-child(3n + 2)::before { background: rgba(255, 173, 38, .1); }
.svc-card:nth-child(3n)::before { background: rgba(245, 44, 112, .075); }

.svc-card:hover {
    background: #fff;
    border-color: rgba(54, 198, 203, .52);
    transform: translateY(-7px) !important;
    box-shadow: 0 23px 52px rgba(14, 37, 66, .11);
}

.svc-card:hover::before {
    transform: scale(1.6);
}

.svc-n {
    color: #9aa7b8;
    font-size: 10px;
    letter-spacing: .16em;
}

.svc-em {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, #dff8fa, #aee9ec);
    border: 1px solid #c6eef0;
    border-radius: 15px;
}

.svc-card:nth-child(3n + 2) .svc-em {
    background: linear-gradient(135deg, #fff2d9, #ffd480);
    border-color: #ffe1a8;
}

.svc-card:nth-child(3n) .svc-em {
    background: linear-gradient(135deg, #ffe1eb, #ffadc7);
    border-color: #ffc7d9;
}

.svc-card:hover .svc-em {
    background: var(--zr-navy);
    border-color: var(--zr-navy);
}

.svc-card h3 {
    color: var(--zr-text);
    font-size: 21px;
    letter-spacing: -.035em;
}

.svc-card p {
    color: var(--zr-muted);
    line-height: 1.7;
}

.svc-tag {
    color: #58677a;
    background: #f5f8fb;
    border-color: #dfe7ef;
}

.svc-arr {
    opacity: 1;
    color: #8a97a8;
    transform: none;
}

/* ========================= CASE STUDIES ========================= */

.cases {
    background: #fff;
    border-top: 1px solid #e5ebf1;
}

.cases-grid {
    gap: 18px;
    margin-top: 52px;
}

.case-card {
    grid-template-columns: .95fr .85fr 1.05fr;
    gap: clamp(25px, 3.5vw, 48px);
    margin: 0;
    padding: clamp(30px, 3vw, 44px);
    background:
        radial-gradient(circle at 100% 0, rgba(54, 198, 203, .08), transparent 30%),
        #f7f9fc;
    border: 1px solid #dfe6ef;
    border-radius: 24px;
    box-shadow: 0 11px 34px rgba(13, 36, 64, .045);
}

.case-card:hover {
    border-color: rgba(54, 198, 203, .55);
    box-shadow: 0 22px 55px rgba(13, 36, 64, .1);
    transform: translateY(-5px) !important;
}

.case-logo {
    width: 58px;
    height: 58px;
    background: #fff;
    border-color: #dbe4ee;
    border-radius: 15px;
    box-shadow: 0 8px 24px rgba(10, 30, 58, .07);
}

.case-client {
    color: var(--zr-text);
    font-size: 17px;
}

.case-type-pill {
    color: #135c62;
    background: #dff7f8;
    border: 1px solid #c6edef;
    border-radius: 999px;
}

.case-result {
    color: var(--zr-text);
}

.case-quote {
    border-color: var(--zr-orange);
}

.case-metric {
    min-height: 66px;
    background: rgba(255, 255, 255, .94);
    border-color: #dce5ef;
    border-radius: 14px;
}

.case-metric-num .g {
    color: #d88708;
}

/* ========================= CLIENT LOGOS ========================= */

.logos-section {
    padding: 58px 0;
    background: #f3f7fa;
    border-color: #dfe7ef;
}

.logos-label {
    color: #6d7b8e;
}

.logo-marquee-wrap::before {
    background: linear-gradient(to right, #f3f7fa, transparent);
}

.logo-marquee-wrap::after {
    background: linear-gradient(to left, #f3f7fa, transparent);
}

.logo-track {
    animation-duration: 42s;
}

.logo-slot {
    height: 84px;
    padding: 0 34px;
    border-color: #dce5ed;
}

.logo-img-placeholder {
    width: 138px;
    height: 54px;
    padding: 7px;
    background: #fff;
    border: 1px solid #e0e7ee;
    border-radius: 13px;
    box-shadow: 0 8px 22px rgba(15, 38, 67, .05);
    opacity: .78;
    filter: grayscale(1);
}

.logo-slot:hover .logo-img-placeholder {
    border-color: #badde0;
    filter: grayscale(0);
    transform: translateY(-3px);
}

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

.process {
    background: #fff;
    border-color: #e3e9f0;
}

.proc-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 54px;
    overflow: visible;
    background: transparent;
    border: 0;
}

.proc-grid::before {
    content: "";
    position: absolute;
    top: 26px;
    left: 11%;
    right: 11%;
    height: 2px;
    background: linear-gradient(90deg, var(--zr-cyan), var(--zr-orange), var(--zr-pink));
    opacity: .28;
}

.p-card {
    min-height: 275px;
    padding: 34px 28px;
    background: #f7f9fc;
    border: 1px solid #dfe6ef;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(14, 38, 67, .04);
}

.p-card::before {
    background: linear-gradient(150deg, #e2f9fa, #fff8ea);
}

.p-card:hover {
    border-color: rgba(54, 198, 203, .5);
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 44px rgba(14, 38, 67, .09);
}

.p-num {
    width: 48px;
    height: 48px;
    color: #fff;
    background: linear-gradient(135deg, var(--zr-navy-2), #235477);
    border: 5px solid #fff;
    box-shadow: 0 8px 22px rgba(7, 19, 33, .16);
}

.p-card:hover .p-num {
    color: #fff;
    background: linear-gradient(135deg, var(--zr-orange), var(--zr-pink));
}

/* ========================= WHY ZORDO ========================= */

.why {
    background:
        radial-gradient(circle at 12% 5%, rgba(54, 198, 203, .17), transparent 31%),
        radial-gradient(circle at 90% 85%, rgba(245, 44, 112, .14), transparent 27%),
        linear-gradient(145deg, #06111f, #091d31 55%, #071321);
}

.why .eyebrow {
    color: #bdeff1;
    background: rgba(54, 198, 203, .1);
    border-color: rgba(54, 198, 203, .23);
}

.why .sh2 {
    color: #fff;
}

.why .ssub {
    color: rgba(223, 235, 247, .62);
}

.why-grid {
    gap: 16px;
    margin-top: 52px;
}

.why-card {
    min-height: 235px;
    padding: 31px;
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(187, 216, 241, .13);
    border-radius: 20px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.why-card:hover {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(54, 198, 203, .55);
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 48px rgba(0, 0, 0, .2);
}

.why-tag {
    color: #094c51;
    background: #a5edf0;
    border-radius: 999px;
}

.why-card h3 {
    font-size: 20px;
}

.why-card p {
    color: rgba(226, 237, 248, .58);
}

/* ========================= TECHNOLOGY ========================= */

.tech {
    background:
        radial-gradient(circle at 90% 0, rgba(255, 173, 38, .1), transparent 25%),
        var(--zr-soft);
}

.tech-rows {
    gap: 14px;
    margin-top: 52px;
}

.tech-row {
    padding: 24px 28px;
    background: rgba(255, 255, 255, .9);
    border-color: #dce5ee;
    border-radius: 17px;
    box-shadow: 0 9px 28px rgba(13, 37, 65, .04);
}

.tech-row:hover {
    border-color: rgba(54, 198, 203, .55);
    box-shadow: 0 16px 36px rgba(13, 37, 65, .08);
}

.tech-label {
    color: #44556b;
}

.chip {
    color: #35465a;
    background: #f5f8fb;
    border-color: #dde6ef;
    border-radius: 999px;
}

.chip:hover {
    color: #083d42;
    background: #dff7f8;
    border-color: #afe6e9;
}

/* ========================= TESTIMONIAL CAROUSEL ========================= */

.testi {
    background:
        linear-gradient(180deg, #fff, #f5f8fb);
    border-color: #e3e9f0;
}

.testi-heading-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
}

.testi-controls {
    display: flex;
    gap: 10px;
    padding-bottom: 8px;
}

.testi-arrow {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    color: var(--zr-text);
    background: #fff;
    border: 1px solid #dbe4ed;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(12, 34, 61, .07);
    cursor: pointer;
    font: inherit;
    font-size: 19px;
    font-weight: 700;
    transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
}

.testi-arrow:hover:not(:disabled) {
    color: #fff;
    background: var(--zr-navy);
    border-color: var(--zr-navy);
    transform: translateY(-2px);
}

.testi-arrow:disabled {
    cursor: not-allowed;
    opacity: .38;
}

.testi-carousel {
    margin-top: 48px;
}

.testi-viewport {
    overflow: hidden;
    border-radius: 24px;
    touch-action: pan-y;
}

.testi-grid {
    display: flex;
    align-items: stretch;
    gap: 22px;
    margin: 0;
    will-change: transform;
    transition: transform .65s cubic-bezier(.22, .78, .23, 1);
}

.testi-carousel .testi-card {
    flex: 0 0 calc((100% - 22px) / 2);
    min-width: 0;
    min-height: 450px;
    display: flex;
    flex-direction: column;
    padding: clamp(28px, 3vw, 39px);
    overflow: hidden;
    background:
        radial-gradient(circle at 100% 0, rgba(54, 198, 203, .12), transparent 30%),
        #fff;
    border: 1px solid #dce5ee;
    border-radius: 23px;
    box-shadow: 0 17px 48px rgba(13, 36, 64, .075);
    opacity: 1;
    transform: none;
}

.testi-carousel .testi-card::before {
    content: "“";
    position: absolute;
    top: 8px;
    right: 25px;
    color: rgba(54, 198, 203, .12);
    font-family: Georgia, serif;
    font-size: 110px;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

.testi-carousel .testi-card:hover {
    border-color: rgba(54, 198, 203, .52);
    transform: none;
    box-shadow: 0 22px 55px rgba(13, 36, 64, .11);
}

.testi-stars {
    position: relative;
    z-index: 1;
    min-height: 21px;
    margin-bottom: 19px;
    color: transparent;
    font-size: 0;
}

.testi-stars::before {
    content: "★★★★★";
    color: #ffb42c;
    font-size: 16px;
    letter-spacing: 3px;
    text-shadow: 0 3px 10px rgba(255, 180, 44, .2);
}

.testi-q {
    position: relative;
    z-index: 1;
    flex: 1;
    max-height: 265px;
    margin: 0 0 25px;
    padding-right: 12px;
    overflow-y: auto;
    color: #334257;
    font-size: 15px;
    font-style: normal;
    line-height: 1.82;
    scrollbar-color: #cad7e3 transparent;
    scrollbar-width: thin;
}

.testi-q::-webkit-scrollbar { width: 5px; }
.testi-q::-webkit-scrollbar-track { background: transparent; }
.testi-q::-webkit-scrollbar-thumb { background: #cad7e3; border-radius: 20px; }

.testi-author {
    position: relative;
    z-index: 1;
    margin-top: auto;
    padding-top: 20px;
    border-color: #e1e8ef;
}

.testi-av {
    width: 48px;
    height: 48px;
}

.testi-av-img {
    color: #fff;
    background: linear-gradient(135deg, var(--zr-navy), #265273);
    border: 0;
}

.testi-av-img svg {
    stroke: #b7e7e9;
}

.testi-name {
    color: var(--zr-text);
    font-size: 15px;
}

.testi-role {
    color: #7b8899;
}

.testi-dots {
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 23px;
}

.testi-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    background: #c8d2dd;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: width .25s ease, background .25s ease;
}

.testi-dot.is-active {
    width: 31px;
    background: linear-gradient(90deg, var(--zr-cyan), var(--zr-orange));
}

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

.faq {
    background:
        radial-gradient(circle at 9% 18%, rgba(54, 198, 203, .1), transparent 24%),
        radial-gradient(circle at 92% 82%, rgba(255, 173, 38, .1), transparent 25%),
        #f4f7fa;
}

.faq.section {
    padding-top: clamp(76px, 8vw, 108px);
    padding-bottom: clamp(76px, 8vw, 108px);
}

.faq .s-inner {
    display: grid;
    grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
    gap: clamp(45px, 8vw, 110px);
    align-items: start;
}

.faq .s-head {
    position: sticky;
    top: 104px;
}

.faq-support-card {
    width: min(100%, 390px);
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 3px 13px;
    margin-top: 34px;
    padding: 17px;
    color: #fff;
    background:
        radial-gradient(circle at 100% 0, rgba(54, 198, 203, .32), transparent 38%),
        linear-gradient(140deg, #071321, #102b43);
    border: 1px solid rgba(54, 198, 203, .22);
    border-radius: 18px;
    box-shadow: 0 16px 36px rgba(7, 19, 33, .15);
}

.faq-support-icon {
    grid-row: 1 / span 2;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #071321;
    background: linear-gradient(135deg, var(--zr-cyan), #8ce8e8);
    border-radius: 12px;
    font-size: 19px;
    font-weight: 800;
}

.faq-support-card div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.faq-support-card small {
    color: rgba(225, 237, 248, .68);
    font-size: 10px;
    line-height: 1.4;
}

.faq-support-card strong {
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.35;
}

.faq-support-card a {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding: 11px 13px;
    color: #071321;
    background: #fff;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    transition: color .2s ease, background .2s ease, transform .2s ease;
}

.faq-support-card a:hover {
    color: #071321;
    background: #bdf3f4;
    transform: translateY(-2px);
}

.faq-list {
    margin: 0;
    padding: 12px 28px;
    background: #fff;
    border: 1px solid #dce5ed;
    border-radius: 22px;
    box-shadow: 0 15px 44px rgba(14, 36, 64, .07);
}

.faq-item {
    margin: 0;
    border-color: #e3e9f0;
}

.faq-item:last-child {
    border-bottom: 0;
}

.faq-btn {
    min-height: 74px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 2px;
    list-style: none;
    color: #1d2b3e;
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
}

.faq-btn::-webkit-details-marker {
    display: none;
}

.faq-btn:hover {
    color: #147d85;
}

.faq-ic {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    color: #486078;
    background: #f0f5f8;
    border-radius: 9px;
    font-size: 18px;
    flex: 0 0 31px;
    transition: color .25s ease, background .25s ease, transform .3s cubic-bezier(.2, .75, .25, 1);
}

.faq-item.open .faq-ic,
.faq-item[open] .faq-ic {
    color: #fff;
    background: var(--zr-navy);
    transform: rotate(45deg);
}

.faq-ans {
    max-height: none;
    padding: 0;
    overflow: visible;
    color: #68778a;
    line-height: 1.75;
    transition: none;
}

.faq-item.open .faq-ans,
.faq-item[open] .faq-ans {
    max-height: none !important;
    padding: 0;
}

.faq-ans-inner {
    padding: 0 48px 24px 2px;
    animation: faq-reveal .28s ease both;
}

@keyframes faq-reveal {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ========================= FINAL CTA + FOOTER ========================= */

.footer-cta {
    padding: clamp(78px, 8vw, 112px) 20px;
    background:
        radial-gradient(circle at 12% 0, rgba(255, 255, 255, .22), transparent 30%),
        linear-gradient(110deg, #44d0d2 0%, #ffba34 48%, #ff506d 100%);
}

.footer-cta::before {
    width: 680px;
    height: 680px;
    top: -420px;
    background: rgba(255, 255, 255, .17);
}

.footer-cta h2 {
    color: #071321;
    font-size: clamp(39px, 5.4vw, 70px);
    font-weight: 800;
    letter-spacing: -.055em;
}

.footer-cta p {
    max-width: 520px;
    color: rgba(7, 19, 33, .7);
    font-size: 17px;
    font-weight: 500;
}

.btn-dark {
    min-height: 55px;
    padding: 15px 28px;
    background: var(--zr-navy);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 14px;
    box-shadow: 0 16px 35px rgba(7, 19, 33, .23);
}

.btn-dark:hover {
    color: #fff;
    background: #102b43;
}

footer {
    min-height: 95px;
    padding: 25px clamp(20px, 5vw, 78px);
    background: #06111f;
    border-color: rgba(255, 255, 255, .08);
}

.f-logo img {
     display: block;
    width: 155px !important;
    padding: 9px 30px;
    background: #fff;
    border-radius: 10px;
    object-fit: contain;
    height: 50px;
}

.f-links {
    gap: 10px;
}

.f-links a {
    padding: 9px 13px;
    color: rgba(235, 244, 252, .82);
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 10px;
}

.f-links a:hover {
    color: #fff;
    border-color: rgba(54, 198, 203, .45);
}

/* ========================= FLOATING CONTACT ========================= */

.float-btns {
    left: 20px;
    right: auto;
    bottom: 22px;
}

.float-btn {
    min-height: 52px;
    padding: 12px 18px;
    border: 1px solid rgba(255, 255, 255, .5);
    box-shadow: 0 13px 34px rgba(1, 62, 24, .25);
}

.float-wa {
    background: linear-gradient(135deg, #29d86b, #15b856);
}

/* ========================= POPUP VISUAL ALIGNMENT ========================= */

.zp-left {
    background:
        radial-gradient(circle at 15% 10%, rgba(54, 198, 203, .22), transparent 34%),
        linear-gradient(145deg, #061321, #0b2941 62%, #071321);
}

.zp-submit {
    background: linear-gradient(100deg, var(--zr-orange), var(--zr-coral), var(--zr-pink));
    box-shadow: 0 11px 28px rgba(255, 82, 94, .24);
}

.zp-submit:hover {
    background: linear-gradient(100deg, #f39b1e, #ed2d65);
}

/* ========================= RESPONSIVE ========================= */

@media (max-width: 1180px) {
    .hero-quote-section {
        padding-left: 34px;
        padding-right: 34px;
    }

    .hero-quote-container {
        grid-template-columns: minmax(0, 1fr) minmax(405px, 475px);
        gap: 38px;
    }

    .hero-benefit-strip {
        width: calc(100% + 68px);
        margin-left: -34px;
        padding-left: 24px;
        padding-right: 24px;
    }

    .hero-benefit-item {
        padding-left: 10px;
        padding-right: 10px;
    }

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

    .svc-card {
        min-height: 300px;
    }
}

@media (max-width: 980px) {
    nav#nav {
        padding-left: 25px;
        padding-right: 25px;
    }

    .hero-quote-section {
        padding-top: 108px;
        background-position: 43% center;
    }

    .hero-quote-container {
        max-width: 760px;
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .hero-content-left {
        position: relative;
        top: auto;
        max-width: 720px;
        margin: 0 auto;
        padding-bottom: 0;
    }

    .hero-quote-container > .form-section,
    .hero-quote-container .form-inner {
        width: 100%;
        max-width: 680px;
        margin: 0 auto;
    }

    .hero-benefit-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 16px;
        margin-top: 45px;
    }

    .hero-benefit-item:nth-child(3) {
        border-right: 0;
    }

    .case-card {
        grid-template-columns: 1fr 1fr;
    }

    .case-metrics {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

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

    .proc-grid::before {
        display: none;
    }

    .p-card {
        border: 1px solid #dfe6ef;
    }

    .faq .s-inner {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .faq .s-head {
        position: relative;
        top: auto;
    }

    .faq-support-card {
        width: min(100%, 520px);
    }
}

@media (max-width: 767px) {
    html {
        scroll-padding-top: 74px;
    }

    #cursor,
    #cursor-ring {
        display: none !important;
    }

    nav#nav,
    nav#nav.scrolled {
        height: 66px;
        padding: 0 15px 0 18px;
        border-radius: 0 0 22px 22px;
    }

    .nav-logo img {
        width: 106px;
    }

    .nav-cta {
        min-height: 39px;
        padding: 8px 10px 8px 13px;
        border-radius: 10px;
        font-size: 11px;
    }

    .nav-cta::after {
        width: 20px;
        height: 20px;
        font-size: 12px;
    }

    .hero-quote-section {
        min-height: auto;
        padding: 90px 15px 0;
        background-image:
            linear-gradient(180deg, rgba(4, 13, 24, .97) 0%, rgba(4, 15, 28, .91) 56%, rgba(5, 18, 31, .96) 100%),
            url("../images/main-banner2.jpg");
        background-position: 48% center;
        border-radius: 0 0 0px 0px;
    }

    .hero-quote-section::before {
        background-size: 38px 38px;
        mask-image: linear-gradient(to bottom, #000, transparent 74%);
    }

    .hero-quote-container {
        gap: 32px;
    }

    .hero-content-left {
        padding: 12px 2px 0;
    }

    .hero-agency-line {
        gap: 9px;
        margin-bottom: 16px;
        font-size: 9px;
        letter-spacing: .13em;
    }

    .hero-agency-line > span {
        width: 24px;
        flex-basis: 24px;
    }

    .hero-main-heading {
        font-size: clamp(39px, 12.3vw, 45px);
        line-height: 1.01;
        letter-spacing: 0;
    }

    .hero-main-heading .hero-gradient-text {
        margin-top: 5px;
    }

    .hero-description {
        margin-top: 19px;
        font-size: 14px;
        line-height: 1.62;
    }

    .hero-service-tags {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 22px;
    }

    .hero-service-tag {
        min-width: 0;
        min-height: 39px;
        justify-content: flex-start;
        padding: 8px 10px;
        font-size: 11px;
    }

    .hero-service-tag b {
        width: 17px;
        height: 17px;
        flex: 0 0 17px;
        border-radius: 5px;
        font-size: 9px;
    }

    .hero-action-buttons {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 22px;
    }

    .hero-primary-btn,
    .hero-whatsapp-btn {
        width: 100%;
        min-width: 0;
        min-height: 51px;
        padding: 12px 13px;
        border-radius: 13px;
        font-size: 13px;
    }

    .hero-proof {
        gap: 12px;
        margin-top: 22px;
    }

    .hero-proof-avatars span {
        width: 33px;
        height: 33px;
        font-size: 9px;
    }

    .hero-proof-copy strong {
        font-size: 11px;
    }

    .hero-proof-copy small {
        font-size: 9px;
    }

    .hero-quote-container .form-card {
        padding: 22px 17px 20px;
        border-radius: 22px;
        box-shadow: 0 23px 58px rgba(0, 8, 20, .4), 0 0 0 5px rgba(206, 232, 252, .11);
    }

    .quote-form-heading {
        margin-bottom: 17px;
    }

    .hero-quote-section .quote-form-heading h2 {
        font-size: 24px;
    }

    .quote-form-heading p {
        font-size: 11px;
    }

    .hero-quote-container .fg {
        margin-bottom: 0;
    }

    .hero-quote-container .fg input,
    .hero-quote-container .fg select,
    .hero-quote-container .fg textarea {
        min-height: 45px;
        font-size: 12px;
    }

    .hero-benefit-strip {
        width: calc(100% + 30px);
        display: flex;
        grid-template-columns: none;
        gap: 0;
        margin: 34px 0 0 -15px;
        padding: 16px 15px 18px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .hero-benefit-strip::-webkit-scrollbar {
        display: none;
    }

    .hero-benefit-item {
        min-width: 205px;
        justify-content: flex-start;
        padding: 3px 17px;
        scroll-snap-align: start;
    }

    .hero-benefit-item:nth-child(3) {
        border-right: 1px solid rgba(199, 221, 241, .17);
    }

    .marquee-wrap {
        padding: 13px 0;
    }

    .m-item {
        padding: 0 21px;
        font-size: 11px;
    }

    .section {
        padding: 72px 17px;
    }

    .eyebrow {
        margin-bottom: 14px;
        font-size: 9px;
    }

    .sh2 {
        font-size: clamp(34px, 10.2vw, 45px);
        line-height: 1.04;
        letter-spacing: -.05em;
    }

    .ssub {
        font-size: 14px;
        line-height: 1.68;
    }

    .svc-grid {
        display: flex;
        grid-template-columns: none;
        gap: 13px;
        margin: 38px -17px 0;
        padding: 0 17px 20px;
        overflow-x: auto;
        scroll-padding-left: 17px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .svc-grid::-webkit-scrollbar,
    .proc-grid::-webkit-scrollbar {
        display: none;
    }

    .svc-card {
        min-width: min(84vw, 340px);
        min-height: 320px;
        flex: 0 0 min(84vw, 340px);
        padding: 29px;
        border-radius: 20px;
        scroll-snap-align: center;
    }

    .cases-grid {
        margin-top: 38px;
    }

    .case-card {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 25px;
        border-radius: 20px;
    }

    .case-metrics {
        grid-column: auto;
        display: grid;
        grid-template-columns: 1fr;
    }

    .logos-section {
        padding: 47px 0;
    }

    .logos-label {
        margin-bottom: 27px;
        font-size: 9px;
    }

    .logo-slot {
        padding: 0 20px;
    }

    .logo-img-placeholder {
        width: 122px;
        height: 50px;
    }

    .proc-grid {
        display: flex;
        grid-template-columns: none;
        gap: 13px;
        margin: 38px -17px 0;
        padding: 0 17px 18px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .p-card {
        min-width: min(82vw, 330px);
        min-height: 270px;
        flex: 0 0 min(82vw, 330px);
        padding: 30px 26px;
        border: 1px solid #dfe6ef;
        border-radius: 20px;
        scroll-snap-align: center;
    }

    .why-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 38px;
    }

    .why-card {
        min-height: 0;
        padding: 27px;
    }

    .tech-rows {
        margin-top: 38px;
    }

    .tech-row {
        display: block;
        padding: 21px;
    }

    .tech-label {
        display: block;
        min-width: 0;
        margin-bottom: 14px;
    }

    .chips {
        gap: 7px;
    }

    .chip {
        padding: 7px 12px;
        font-size: 11px;
    }

    .testi-heading-row {
        align-items: flex-end;
    }

    .testi-heading-row .sh2 {
        margin-bottom: 0;
    }

    .testi-controls {
        gap: 7px;
        padding: 0 0 3px;
    }

    .testi-arrow {
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }

    .testi-carousel {
        margin-top: 34px;
    }

    .testi-viewport {
        border-radius: 20px;
    }

    .testi-grid {
        gap: 14px;
    }

    .testi-carousel .testi-card {
        flex-basis: 100%;
        min-height: 455px;
        padding: 27px 23px;
        border-radius: 20px;
    }

    .testi-q {
        max-height: 285px;
        padding-right: 8px;
        font-size: 14px;
        line-height: 1.75;
    }

    .faq .s-inner {
        gap: 28px;
    }

    .faq-list {
        padding: 5px 18px;
        border-radius: 19px;
    }

    .faq-btn {
        min-height: 68px;
        padding: 18px 0;
        font-size: 14px;
        line-height: 1.45;
    }

    .faq-ans {
        font-size: 13px;
    }

    .faq-ans-inner {
        padding-right: 39px;
        padding-bottom: 21px;
    }

    .faq-support-card {
        margin-top: 25px;
    }

    .footer-cta {
        padding: 74px 18px;
    }

    .footer-cta h2 {
        font-size: clamp(37px, 11vw, 49px);
    }

    .footer-cta p {
        margin-bottom: 30px;
        font-size: 14px;
    }

    footer {
        flex-direction: column;
        justify-content: center;
        gap: 18px;
        padding: 28px 18px 98px;
        text-align: center;
    }

    .f-links {
        flex-wrap: wrap;
        justify-content: center;
    }

    .f-links a {
        font-size: 11px;
    }

    .float-btns {
        left: 14px;
        bottom: 17px;
    }

    .float-btn {
        width: 56px;
        height: 56px;
        min-height: 56px;
        padding: 0;
    }
}

@media (max-width: 680px) {
    .hero-quote-container #quoteForm {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .hero-quote-container #quoteForm > .fg {
        grid-column: 1;
    }
}

@media (max-width: 390px) {
    .nav-cta {
        font-size: 10px;
    }

    .hero-main-heading {
        font-size: 38px;
    }

    .hero-action-buttons {
        grid-template-columns: 1fr;
    }

    .hero-service-tag {
        font-size: 10px;
    }

    .hero-proof-copy strong span {
        display: block;
        margin: 0 0 2px;
    }

    .hero-quote-container .form-card {
        padding-left: 14px;
        padding-right: 14px;
    }

    .hero-quote-container .g-recaptcha {
        transform: scale(.88);
        transform-origin: left top;
        margin-bottom: -8px;
    }

    .testi-heading-row {
        display: block;
    }

    .testi-controls {
        margin-top: 20px;
    }
}

@media (max-width: 340px) {
    .hero-quote-container .g-recaptcha {
        transform: scale(.8);
        margin-bottom: -16px;
    }
}

@media (hover: none), (pointer: coarse) {
    #cursor,
    #cursor-ring {
        display: none !important;
    }

    .svc-card:hover,
    .case-card:hover,
    .p-card:hover,
    .why-card:hover {
        transform: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .premium-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}



@media(max-width: 767px){
.float-btns a span.float-label {
    display: none;
}   
.float-btn{
            justify-content: center;
} 
}