:root {
    --bg: #06111d;
    --bg-deep: #030a12;
    --surface: #0b1928;
    --surface-soft: #102235;

    --primary: #129cff;
    --primary-light: #4fbdff;
    --primary-dark: #0076d7;

    --text: #f7fbff;
    --text-soft: #aab9c8;
    --text-dark: #0c1930;

    --border: rgba(255, 255, 255, .10);

    --container: 1240px;

    --radius-sm: 12px;
    --radius: 18px;
    --radius-lg: 28px;

    --shadow:
        0 24px 80px rgba(0, 0, 0, .28);

    --transition:
        220ms cubic-bezier(.2, .8, .2, 1);
}

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

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    overflow-x: hidden;

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

    font-family:
        'Inter',
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        sans-serif;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.menu-open {
    overflow: hidden;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

.container {
    width: min(calc(100% - 48px), var(--container));
    margin-inline: auto;
}

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

.site-header {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;

    width: 100%;

    border-bottom: 1px solid transparent;

    transition:
        background var(--transition),
        border-color var(--transition),
        backdrop-filter var(--transition);
}

.site-header.is-scrolled {
    background: rgba(3, 10, 18, .82);
    border-color: var(--border);

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

.header-inner {
    height: 92px;

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

    gap: 40px;
}

.brand {
    flex-shrink: 0;
}

.brand-logo {
    width: 168px;
    height: auto;
}

.desktop-nav {
    display: flex;
    align-items: center;
    gap: 34px;

    margin-left: auto;
}

.desktop-nav a {
    position: relative;

    padding: 34px 0;

    color: rgba(255,255,255,.72);

    font-size: .9rem;
    font-weight: 500;

    transition: color var(--transition);
}

.desktop-nav a:hover,
.desktop-nav a.is-active {
    color: #fff;
}

.desktop-nav a::after {
    content: '';

    position: absolute;
    left: 0;
    bottom: 25px;

    width: 0;
    height: 2px;

    border-radius: 10px;

    background: var(--primary);

    transition: width var(--transition);
}

.desktop-nav a:hover::after,
.desktop-nav a.is-active::after {
    width: 100%;
}

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

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

    gap: 10px;

    min-height: 52px;
    padding: 0 24px;

    border-radius: 12px;

    font-size: .92rem;
    font-weight: 650;

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        background var(--transition);
}

.btn-primary {
    color: white;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            #0088ef
        );

    box-shadow:
        0 12px 30px rgba(18, 156, 255, .22);
}

.btn-primary:hover {
    transform: translateY(-2px);

    box-shadow:
        0 18px 40px rgba(18, 156, 255, .34);
}

.btn-arrow {
    transition: transform var(--transition);
}

.btn:hover .btn-arrow {
    transform: translateX(4px);
}

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

.mobile-menu-button {
    display: none;

    width: 46px;
    height: 46px;

    border: 1px solid var(--border);
    border-radius: 12px;

    background: rgba(255,255,255,.04);

    cursor: pointer;
}

.mobile-menu-button span {
    display: block;

    width: 20px;
    height: 2px;

    margin: 4px auto;

    border-radius: 20px;

    background: white;

    transition: var(--transition);
}

.mobile-menu {
    display: none;
}

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

.site-footer {
    position: relative;

    background: var(--bg-deep);
    border-top: 1px solid var(--border);
}

.footer-main {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;

    gap: 60px;

    padding-top: 76px;
    padding-bottom: 64px;
}

.footer-logo {
    width: 160px;
    margin-bottom: 22px;
}

.footer-brand p {
    max-width: 330px;

    color: var(--text-soft);

    line-height: 1.75;
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.footer-column h4 {
    margin-bottom: 8px;

    color: white;

    font-size: .9rem;
}

.footer-column a {
    color: var(--text-soft);

    font-size: .86rem;

    transition: color var(--transition);
}

.footer-column a:hover {
    color: var(--primary-light);
}

.footer-bottom {
    min-height: 78px;

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

    gap: 20px;

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

    color: #718295;

    font-size: .78rem;
}

.footer-signature {
    color: #8ba0b4;
}

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

@media (max-width: 980px) {

    .desktop-nav,
    .header-cta {
        display: none;
    }

    .mobile-menu-button {
        display: block;
    }

    .mobile-menu {
        position: fixed;
        z-index: 999;

        top: 92px;
        left: 0;

        width: 100%;
        height: calc(100dvh - 92px);

        padding: 34px 24px;

        flex-direction: column;
        gap: 8px;

        background: rgba(3, 10, 18, .98);

        backdrop-filter: blur(20px);
    }

    .mobile-menu.is-open {
        display: flex;
    }

    .mobile-menu > a:not(.btn) {
        padding: 17px 8px;

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

        color: rgba(255,255,255,.86);

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

    .mobile-cta {
        margin-top: 22px;
    }

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

}

@media (max-width: 640px) {

    .container {
        width: min(calc(100% - 32px), var(--container));
    }

    .header-inner {
        height: 76px;
    }

    .brand-logo {
        width: 145px;
    }

    .mobile-menu {
        top: 76px;
        height: calc(100dvh - 76px);
    }

    .footer-main {
        grid-template-columns: 1fr;

        gap: 38px;

        padding-top: 54px;
    }

    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;

        padding: 22px 0;
    }

}

/* =========================================================
   APP360 V3 - HERO
========================================================= */

.hero {
    position: relative;
    min-height: 880px;
    overflow: hidden;

    display: flex;
    align-items: center;

    padding: 150px 0 100px;

    background:
        radial-gradient(circle at 75% 42%, rgba(0,149,255,.10), transparent 33%),
        radial-gradient(circle at 15% 10%, rgba(0,126,230,.08), transparent 28%),
        linear-gradient(180deg, #06131f 0%, #06111d 100%);
}

.hero-grid {
    position: absolute;
    inset: 0;

    opacity: .11;

    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);

    background-size: 62px 62px;

    mask-image:
        linear-gradient(to bottom, transparent, black 25%, black 60%, transparent);
}

.hero-glow {
    position: absolute;
    border-radius: 999px;
    filter: blur(100px);
    pointer-events: none;
}

.hero-glow-one {
    width: 520px;
    height: 520px;

    top: 120px;
    right: -140px;

    background: rgba(0,147,255,.15);
}

.hero-glow-two {
    width: 320px;
    height: 320px;

    left: -140px;
    bottom: 30px;

    background: rgba(0,93,255,.1);
}

.hero-container {
    position: relative;
    z-index: 3;

    display: grid;
    grid-template-columns: .88fr 1.12fr;

    align-items: center;
    gap: 76px;
}

.hero-content {
    max-width: 650px;
}

.hero-eyebrow,
.section-eyebrow {
    color: #4abaff;

    font-size: .73rem;
    font-weight: 700;

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

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 27px;
}

.eyebrow-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #22aaff;

    box-shadow: 0 0 18px #22aaff;
}

.hero-title {
    max-width: 720px;

    font-size: clamp(3.45rem, 5.2vw, 5.9rem);
    line-height: .96;

    letter-spacing: -.065em;

    font-weight: 800;
}

.hero-title span {
    display: block;

    color: #1ba8ff;

    background:
        linear-gradient(
            100deg,
            #1ba8ff,
            #65caff
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-description {
    max-width: 600px;

    margin-top: 29px;

    color: #a9bacb;

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

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 35px;
}

.btn-hero {
    min-height: 58px;
    padding-inline: 29px;
}

.btn-secondary {
    min-height: 58px;

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

    background: rgba(255,255,255,.025);

    color: white;
}

.btn-secondary:hover {
    transform: translateY(-2px);

    border-color: rgba(60,183,255,.65);

    background: rgba(18,156,255,.06);
}

.hero-trust {
    display: flex;
    flex-wrap: wrap;

    gap: 27px;

    margin-top: 48px;
    padding-top: 31px;

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

.trust-item {
    display: flex;
    align-items: center;

    gap: 11px;
}

.trust-icon {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(38,174,255,.2);
    border-radius: 10px;

    color: #35b4ff;

    background: rgba(18,156,255,.06);
}

.trust-item div:last-child {
    display: flex;
    flex-direction: column;
}

.trust-item strong {
    font-size: .76rem;
    font-weight: 600;
}

.trust-item span {
    margin-top: 3px;

    color: #64788b;

    font-size: .68rem;
}


/* HERO APPLICATION MOCKUP */

.hero-visual {
    position: relative;

    min-height: 560px;

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

.app-window {
    position: relative;
    z-index: 4;

    width: min(720px, 100%);

    overflow: hidden;

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

    background: #f4f8fb;

    box-shadow:
        0 50px 100px rgba(0,0,0,.55),
        0 0 80px rgba(0,139,255,.12);
}

.app-window-top {
    height: 62px;

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

    padding: 0 19px;

    background: #0c1d2e;

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

.window-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.window-brand-icon {
    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    border-radius: 8px;

    background: linear-gradient(135deg,#20adff,#006ee7);

    font-size: .76rem;
    font-weight: 800;
}

.window-brand div:last-child {
    display: flex;
    flex-direction: column;
}

.window-brand strong {
    font-size: .72rem;
    letter-spacing: .03em;
}

.window-brand small {
    margin-top: 2px;

    color: #708398;

    font-size: .53rem;
}

.window-actions {
    display: flex;
    gap: 6px;
}

.window-actions span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: rgba(255,255,255,.18);
}

.app-window-body {
    min-height: 425px;

    display: grid;
    grid-template-columns: 150px 1fr;

    background: #edf3f7;
}

.demo-sidebar {
    padding: 23px 12px;

    background: #0a1928;
}

.demo-nav {
    min-height: 38px;

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

    padding: 0 12px;

    border-radius: 8px;

    color: #788fa5;

    font-size: .61rem;

    margin-bottom: 5px;
}

.demo-nav.active {
    color: white;

    background:
        linear-gradient(
            90deg,
            rgba(18,156,255,.19),
            rgba(18,156,255,.06)
        );

    box-shadow:
        inset 2px 0 #1aa8ff;
}

.demo-nav span {
    color: #3bbaff;
}

.demo-main {
    padding: 27px;
}

.demo-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.demo-heading > div:first-child {
    display: flex;
    flex-direction: column;
}

.demo-heading span {
    color: #8191a1;

    font-size: .62rem;
}

.demo-heading strong {
    margin-top: 3px;

    color: #102033;

    font-size: 1.02rem;
}

.demo-avatar {
    width: 33px;
    height: 33px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: linear-gradient(135deg,#bcd8e9,#7ca2bc);

    color: white;

    font-size: .55rem;
    font-weight: 700;
}

.demo-stats {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 11px;

    margin-top: 21px;
}

.demo-stat {
    display: flex;
    flex-direction: column;

    padding: 14px;

    border: 1px solid #dde7ed;
    border-radius: 10px;

    background: white;
}

.demo-stat span {
    color: #667a8c;

    font-size: .56rem;
}

.demo-stat strong {
    margin-top: 6px;

    color: #122339;

    font-size: 1.25rem;
}

.demo-stat small {
    margin-top: 3px;

    color: #8494a3;

    font-size: .52rem;
}

.demo-stat .positive {
    color: #16a878;
}

.demo-content-grid {
    display: grid;
    grid-template-columns: 1.5fr .8fr;

    gap: 12px;

    margin-top: 12px;
}

.demo-chart-card,
.demo-activity {
    min-height: 190px;

    padding: 16px;

    border: 1px solid #dfe7ec;
    border-radius: 11px;

    background: white;
}

.demo-card-title {
    color: #263a50;

    font-size: .65rem;
    font-weight: 700;
}

.chart-area {
    position: relative;

    height: 133px;

    margin-top: 13px;

    border-bottom: 1px solid #eef2f5;

    background:
        repeating-linear-gradient(
            to bottom,
            transparent,
            transparent 32px,
            #eff3f6 33px
        );
}

.chart-line {
    height: 100%;

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

    gap: 6px;

    padding: 0 7px;
}

.chart-line span {
    width: 9%;

    height: var(--h);

    border-radius: 4px 4px 1px 1px;

    background:
        linear-gradient(
            180deg,
            #2db4ff,
            rgba(45,180,255,.13)
        );
}

.activity-item {
    display: flex;
    align-items: center;

    gap: 8px;

    margin-top: 15px;
}

.activity-icon {
    width: 26px;
    height: 26px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 7px;

    font-size: .54rem;
    font-weight: 800;
}

.activity-icon.blue {
    color: #0a91ed;
    background: #e5f5ff;
}

.activity-icon.green {
    color: #0b9b6d;
    background: #e3faf3;
}

.activity-icon.purple {
    color: #7752d6;
    background: #f0ebff;
}

.activity-item div {
    display: flex;
    flex-direction: column;
}

.activity-item strong {
    color: #33475c;

    font-size: .52rem;
}

.activity-item small {
    margin-top: 2px;

    color: #93a0ad;

    font-size: .47rem;
}


/* PHONE */

.phone-mockup {
    position: absolute;
    z-index: 6;

    width: 176px;
    height: 355px;

    right: -25px;
    bottom: 9px;

    padding: 7px;

    border: 1px solid rgba(255,255,255,.22);
    border-radius: 27px;

    background: #050a10;

    box-shadow:
        0 28px 60px rgba(0,0,0,.55);
}

.phone-screen {
    position: relative;

    height: 100%;

    overflow: hidden;

    padding: 27px 12px 14px;

    border-radius: 21px;

    background: #f4f8fb;

    color: #102033;
}

.phone-notch {
    position: absolute;
    z-index: 2;

    top: 11px;
    left: 50%;

    width: 58px;
    height: 14px;

    transform: translateX(-50%);

    border-radius: 20px;

    background: #030609;
}

.phone-header {
    display: flex;
    justify-content: space-between;

    color: #102033;

    font-size: .55rem;
    font-weight: 700;
}

.phone-welcome {
    display: flex;
    flex-direction: column;

    margin-top: 23px;
}

.phone-welcome small {
    color: #8493a1;

    font-size: .46rem;
}

.phone-welcome strong {
    margin-top: 3px;

    font-size: .77rem;
}

.phone-stat {
    display: flex;
    flex-direction: column;

    margin-top: 16px;
    padding: 13px;

    border-radius: 11px;

    color: white;

    background:
        linear-gradient(
            135deg,
            #038fe9,
            #0bb8f5
        );
}

.phone-stat span {
    font-size: .47rem;
}

.phone-stat strong {
    margin-top: 4px;

    font-size: 1.35rem;
}

.phone-stat small {
    margin-top: 3px;

    opacity: .75;

    font-size: .43rem;
}

.phone-row {
    display: flex;
    align-items: center;

    gap: 7px;

    margin-top: 11px;
    padding-bottom: 10px;

    border-bottom: 1px solid #e3eaf0;
}

.phone-row-icon {
    width: 24px;
    height: 24px;

    display: grid;
    place-items: center;

    border-radius: 7px;

    color: #138fdf;

    background: #e5f5ff;

    font-size: .5rem;
}

.phone-row div {
    min-width: 0;

    display: flex;
    flex: 1;
    flex-direction: column;
}

.phone-row strong {
    font-size: .47rem;
}

.phone-row small {
    margin-top: 2px;

    color: #8996a3;

    font-size: .42rem;
}

.phone-row b {
    color: #168fd9;

    font-size: .45rem;
}

.floating-badge {
    position: absolute;
    z-index: 8;

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

    background: rgba(10,27,42,.86);

    box-shadow: 0 20px 40px rgba(0,0,0,.3);

    backdrop-filter: blur(14px);
}

.badge-top {
    top: 13px;
    right: 31px;

    display: flex;
    align-items: center;

    gap: 8px;

    padding: 10px 14px;

    color: #afc3d5;

    font-size: .63rem;
}

.badge-status {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #29d995;

    box-shadow: 0 0 12px rgba(41,217,149,.8);
}

.badge-bottom {
    left: 2px;
    bottom: 19px;

    display: flex;
    flex-direction: column;

    padding: 12px 16px;
}

.badge-bottom strong {
    color: #3bbaff;

    font-size: 1.1rem;
}

.badge-bottom span {
    margin-top: 2px;

    color: #8399ac;

    font-size: .55rem;
}

.visual-orbit {
    position: absolute;

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

.orbit-one {
    width: 520px;
    height: 520px;
}

.orbit-two {
    width: 640px;
    height: 640px;
}

.hero-bottom-fade {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 170px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            #06111d
        );
}


/* =========================================================
   SOLUTIONS
========================================================= */

.solutions-preview {
    position: relative;
    z-index: 4;

    padding: 112px 0 120px;

    background: #f7fafd;

    color: var(--text-dark);
}

.section-heading-center {
    max-width: 740px;

    margin: 0 auto 55px;

    text-align: center;
}

.section-heading h2,
.projects-heading h2 {
    margin-top: 14px;

    font-size: clamp(2.3rem, 4vw, 4rem);
    line-height: 1;

    letter-spacing: -.05em;
}

.section-heading h2 span,
.projects-heading h2 span {
    color: #188fd8;
}

.section-heading p {
    max-width: 560px;

    margin: 19px auto 0;

    color: #677b8e;

    line-height: 1.7;
}

.solutions-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);

    gap: 16px;
}

.solution-card {
    min-height: 295px;

    display: flex;
    flex-direction: column;

    padding: 30px;

    border: 1px solid #dfe8ef;
    border-radius: 17px;

    background: white;

    box-shadow:
        0 10px 35px rgba(30,66,91,.04);

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}

.solution-card:hover {
    transform: translateY(-7px);

    border-color: #b5d9ef;

    box-shadow:
        0 22px 55px rgba(22,74,108,.10);
}

.solution-card.featured {
    color: white;

    border-color: #0a263b;

    background:
        linear-gradient(
            145deg,
            #071b2b,
            #0a2a42
        );

    box-shadow:
        0 25px 60px rgba(4,25,41,.22);
}

.solution-icon {
    width: 49px;
    height: 49px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    color: #0a93ed;

    background: #e5f5ff;

    font-size: 1rem;
    font-weight: 800;
}

.featured .solution-icon {
    color: white;

    background:
        linear-gradient(
            135deg,
            #159ef4,
            #0079db
        );

    box-shadow:
        0 10px 25px rgba(0,148,242,.25);
}

.solution-card h3 {
    margin-top: 25px;

    font-size: 1.13rem;
}

.solution-card p {
    margin-top: 13px;

    color: #718295;

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

.featured p {
    color: #9fb4c6;
}

.solution-card a {
    display: inline-flex;

    gap: 7px;

    margin-top: auto;
    padding-top: 22px;

    color: #118edc;

    font-size: .76rem;
    font-weight: 700;
}


/* =========================================================
   PROJECTS
========================================================= */

.projects-home {
    padding: 110px 0 130px;

    background:
        radial-gradient(circle at 100% 20%, rgba(0,141,232,.10), transparent 30%),
        #06111d;
}

.projects-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 40px;

    margin-bottom: 48px;
}

.projects-heading h2 {
    max-width: 680px;
}

.text-link {
    color: #35b2ff;

    font-size: .82rem;
    font-weight: 600;
}

.project-grid {
    display: grid;
    grid-template-columns: 1.25fr .875fr .875fr;

    gap: 18px;
}

.project-card {
    overflow: hidden;

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 17px;

    background: rgba(255,255,255,.025);

    transition:
        transform var(--transition),
        border-color var(--transition);
}

.project-card:hover {
    transform: translateY(-6px);

    border-color: rgba(41,171,255,.32);
}

.project-card-visual {
    position: relative;

    height: 240px;

    overflow: hidden;

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

    background:
        radial-gradient(circle at 50% 0%, rgba(27,163,255,.18), transparent 60%),
        #0b1c2b;
}

.project-ui {
    position: absolute;

    width: 88%;
    height: 78%;

    left: 50%;
    top: 44px;

    display: grid;
    grid-template-columns: 18% 1fr;

    transform:
        translateX(-50%)
        perspective(700px)
        rotateX(3deg);

    overflow: hidden;

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px 10px 0 0;

    background: white;

    box-shadow:
        0 25px 45px rgba(0,0,0,.3);
}

.project-ui-sidebar {
    background: #0b2135;
}

.project-ui-main {
    padding: 15px;

    background: #f3f7fa;
}

.project-ui-top {
    width: 43%;
    height: 9px;

    border-radius: 6px;

    background: #d7e4ed;
}

.project-ui-boxes {
    display: grid;
    grid-template-columns: repeat(3,1fr);

    gap: 7px;

    margin-top: 16px;
}

.project-ui-boxes span {
    height: 42px;

    border: 1px solid #e2e9ee;
    border-radius: 6px;

    background: white;
}

.project-ui-chart {
    height: 62px;

    margin-top: 10px;

    border-radius: 7px;

    background:
        linear-gradient(
            150deg,
            transparent 0 42%,
            rgba(21,160,245,.3) 43% 44%,
            transparent 45% 100%
        ),
        white;
}

.project-cloud {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 13px;
}

.project-cloud-logo {
    width: 52px;
    height: 52px;

    display: grid;
    place-items: center;

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #159ef4,
            #006ed6
        );

    font-weight: 800;
}

.project-cloud > div:last-child {
    display: flex;
    flex-direction: column;
}

.project-cloud strong {
    font-size: 1.15rem;
}

.project-cloud span {
    margin-top: 4px;

    color: #6d8598;

    font-size: .65rem;
}

.project-citas {
    display: grid;
    place-items: center;
}

.calendar-demo {
    width: 72%;

    padding: 15px;

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

    background: #f9fbfd;

    box-shadow:
        0 25px 40px rgba(0,0,0,.3);
}

.calendar-top {
    display: flex;
    gap: 5px;

    padding-bottom: 11px;
}

.calendar-top span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #d2dce4;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(5,1fr);

    gap: 5px;
}

.calendar-grid span {
    aspect-ratio: 1;

    border-radius: 4px;

    background: #eaf0f5;
}

.calendar-grid span:nth-child(7),
.calendar-grid span:nth-child(13) {
    background: #159ef4;
}

.project-card-content {
    padding: 24px 25px 28px;
}

.project-category {
    color: #159ef4;

    font-size: .6rem;
    font-weight: 700;

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

.project-card-content h3 {
    margin-top: 8px;

    font-size: 1.25rem;
}

.project-card-content p {
    min-height: 62px;

    margin-top: 9px;

    color: #8294a5;

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

.project-card-content a {
    display: inline-block;

    margin-top: 15px;

    color: #35b2ff;

    font-size: .73rem;
    font-weight: 600;
}


/* =========================================================
   LOGO CORRECTION
========================================================= */

.brand-logo {
    width: auto;
    max-width: 185px;
    max-height: 68px;
    object-fit: contain;
}

.footer-logo {
    width: auto;
    max-width: 175px;
    max-height: 70px;
    object-fit: contain;
}


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

@media (max-width: 1180px) {

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

    .phone-mockup {
        right: -10px;
    }

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

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

    .project-card:first-child {
        grid-column: span 2;
    }

}

@media (max-width: 900px) {

    .hero {
        padding-top: 145px;
    }

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

    .hero-content {
        max-width: 760px;
    }

    .hero-visual {
        margin-top: 20px;
    }

    .hero-title {
        font-size: clamp(3.2rem, 10vw, 5rem);
    }

    .phone-mockup {
        right: 3%;
    }

}

@media (max-width: 680px) {

    .hero {
        padding-top: 120px;
        padding-bottom: 80px;
    }

    .hero-title {
        font-size: clamp(2.8rem, 13vw, 4.3rem);
    }

    .hero-description {
        font-size: .98rem;
    }

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

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

    .hero-trust {
        display: grid;
        grid-template-columns: 1fr;
    }

    .hero-visual {
        min-height: 430px;
    }

    .app-window-body {
        grid-template-columns: 95px 1fr;
    }

    .demo-nav {
        padding-inline: 7px;

        font-size: .48rem;
    }

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

    .demo-activity {
        display: none;
    }

    .phone-mockup {
        width: 135px;
        height: 275px;

        right: -7px;
        bottom: 23px;
    }

    .floating-badge {
        display: none;
    }

    .solutions-preview,
    .projects-home {
        padding: 80px 0;
    }

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

    .projects-heading {
        align-items: flex-start;
        flex-direction: column;
    }

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

    .project-card:first-child {
        grid-column: auto;
    }

}


/* =========================================================
   PROBLEMS
========================================================= */

.problems-section {
    padding: 120px 0;

    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(25,151,235,.07),
            transparent 27%
        ),
        #f7fafd;

    color: var(--text-dark);
}

.problems-layout {
    display: grid;
    grid-template-columns: .72fr 1.28fr;

    gap: 75px;

    align-items: start;
}

.problems-intro {
    position: sticky;
    top: 140px;
}

.problems-intro h2 {
    margin-top: 15px;

    font-size: clamp(2.5rem,4vw,4.5rem);
    line-height: .98;

    letter-spacing: -.055em;
}

.problems-intro h2 span {
    display: block;

    color: #178fd8;
}

.problems-intro p {
    margin-top: 23px;

    max-width: 460px;

    color: #65798c;

    font-size: .96rem;
    line-height: 1.8;
}

.problems-intro .text-link {
    display: inline-block;

    margin-top: 28px;
}

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

    gap: 14px;
}

.problem-card {
    position: relative;

    min-height: 255px;

    overflow: hidden;

    padding: 27px;

    border: 1px solid #e0e9ef;
    border-radius: 17px;

    background: rgba(255,255,255,.87);

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}

.problem-card:hover {
    transform: translateY(-5px);

    border-color: #c6e1f2;

    box-shadow:
        0 25px 55px rgba(28,74,105,.09);
}

.problem-number {
    position: absolute;

    top: 20px;
    right: 22px;

    color: #d8e3ea;

    font-size: .67rem;
    font-weight: 700;

    letter-spacing: .12em;
}

.problem-icon {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    border-radius: 13px;

    color: #118edc;

    background: #e8f6ff;

    font-size: .74rem;
    font-weight: 800;

    letter-spacing: -.03em;
}

.problem-card h3 {
    margin-top: 24px;

    font-size: 1.05rem;
}

.problem-card p {
    margin-top: 11px;

    color: #728395;

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

.problem-card-accent {
    border-color: #168fd8;

    color: white;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(35,181,255,.28),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            #071b2b,
            #0a2a42
        );
}

.problem-card-accent .problem-number {
    color: rgba(255,255,255,.2);
}

.problem-card-accent p {
    color: #9fb5c6;
}


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

.process-section {
    position: relative;

    overflow: hidden;

    padding: 120px 0 135px;

    background: #06111d;
}

.process-light {
    position: absolute;

    width: 650px;
    height: 650px;

    left: 50%;
    top: -450px;

    transform: translateX(-50%);

    border-radius: 50%;

    background: rgba(20,154,245,.12);

    filter: blur(120px);
}

.process-heading {
    position: relative;

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

    gap: 50px;

    margin-bottom: 75px;
}

.process-heading h2 {
    max-width: 700px;

    margin-top: 15px;

    font-size: clamp(2.5rem,4vw,4.4rem);
    line-height: .98;

    letter-spacing: -.055em;
}

.process-heading h2 span {
    display: block;

    color: #29aaf8;
}

.process-heading > p {
    max-width: 420px;

    color: #8297aa;

    font-size: .91rem;
    line-height: 1.75;
}

.process-timeline {
    display: grid;
    grid-template-columns: repeat(5,1fr);

    gap: 0;
}

.process-step {
    position: relative;

    padding-right: 25px;
}

.process-step-top {
    display: flex;
    align-items: center;

    margin-bottom: 30px;
}

.step-number {
    width: 37px;
    height: 37px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border: 1px solid rgba(37,173,255,.38);
    border-radius: 50%;

    color: #39b6ff;

    background: rgba(17,146,226,.10);

    font-size: .64rem;
    font-weight: 700;
}

.step-line {
    width: 100%;
    height: 1px;

    margin-left: 10px;

    background:
        linear-gradient(
            90deg,
            rgba(35,169,255,.38),
            rgba(255,255,255,.06)
        );
}

.step-icon {
    width: 45px;
    height: 45px;

    display: grid;
    place-items: center;

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

    color: #41baff;

    background: rgba(255,255,255,.025);

    font-size: .76rem;
    font-weight: 800;
}

.process-step h3 {
    margin-top: 20px;

    font-size: .98rem;
}

.process-step p {
    max-width: 190px;

    margin-top: 10px;

    color: #74899c;

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


/* =========================================================
   TRUST / VALUE
========================================================= */

.trust-section {
    padding: 110px 0;

    background: #f7fafd;

    color: var(--text-dark);
}

.trust-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 75px;

    padding: 62px;

    border: 1px solid #dbe7ee;
    border-radius: 26px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(30,165,245,.08),
            transparent 30%
        ),
        white;

    box-shadow:
        0 35px 100px rgba(19,53,75,.08);
}

.trust-panel-copy h2 {
    margin-top: 15px;

    font-size: clamp(2.3rem,3.5vw,3.8rem);
    line-height: 1;

    letter-spacing: -.052em;
}

.trust-panel-copy h2 span {
    display: block;

    color: #178fd8;
}

.trust-panel-copy p {
    max-width: 530px;

    margin-top: 22px;

    color: #687c8e;

    line-height: 1.8;

    font-size: .9rem;
}

.trust-metrics {
    display: grid;
    grid-template-columns: repeat(3,1fr);

    gap: 12px;

    align-items: stretch;
}

.trust-metric {
    display: flex;
    flex-direction: column;
    justify-content: center;

    min-height: 180px;

    padding: 22px;

    border: 1px solid #e0e9ef;
    border-radius: 16px;

    background: #f9fbfd;
}

.trust-metric strong {
    display: inline;

    color: #0c2438;

    font-size: 2rem;
    letter-spacing: -.05em;
}

.trust-metric > span {
    margin-left: 2px;

    color: #159ef4;

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

.trust-metric p {
    margin-top: 12px;

    color: #748698;

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


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

.final-cta {
    position: relative;

    overflow: hidden;

    padding: 95px 0;

    background: #06111d;
}

.final-cta-glow {
    position: absolute;

    width: 600px;
    height: 600px;

    right: -100px;
    top: -300px;

    border-radius: 50%;

    background: rgba(8,148,243,.20);

    filter: blur(130px);
}

.final-cta-box {
    position: relative;

    overflow: hidden;

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

    gap: 65px;

    padding: 55px 60px;

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 25px;

    background:
        radial-gradient(
            circle at 100% 50%,
            rgba(19,157,255,.17),
            transparent 40%
        ),
        linear-gradient(
            120deg,
            #081725,
            #0a1e30
        );

    box-shadow:
        0 35px 80px rgba(0,0,0,.24);
}

.cta-label {
    display: flex;
    align-items: center;

    gap: 9px;

    color: #54c1ff;

    font-size: .64rem;
    font-weight: 700;

    letter-spacing: .16em;
}

.cta-label span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #36b8ff;

    box-shadow:
        0 0 13px #36b8ff;
}

.final-cta h2 {
    max-width: 720px;

    margin-top: 16px;

    font-size: clamp(2.4rem,4vw,4.2rem);
    line-height: .98;

    letter-spacing: -.055em;
}

.final-cta h2 span {
    display: block;

    color: #34b4ff;
}

.final-cta-content p {
    max-width: 610px;

    margin-top: 20px;

    color: #8ea2b4;

    line-height: 1.75;

    font-size: .9rem;
}

.final-cta-action {
    min-width: 300px;

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

    gap: 12px;
}

.final-cta-button {
    width: 100%;
    min-height: 62px;

    padding-inline: 27px;
}

.final-cta-action small {
    color: #62798d;

    font-size: .65rem;
}


/* =========================================================
   SCROLL REVEAL
========================================================= */

.reveal {
    opacity: 0;

    transform: translateY(28px);

    transition:
        opacity 700ms cubic-bezier(.2,.8,.2,1),
        transform 700ms cubic-bezier(.2,.8,.2,1);
}

.reveal.is-visible {
    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
   RESPONSIVE NEW SECTIONS
========================================================= */

@media (max-width: 1050px) {

    .problems-layout {
        grid-template-columns: 1fr;
    }

    .problems-intro {
        position: static;

        max-width: 680px;
    }

    .process-timeline {
        grid-template-columns: repeat(3,1fr);

        row-gap: 55px;
    }

    .trust-panel {
        grid-template-columns: 1fr;
    }

    .final-cta-box {
        align-items: flex-start;
        flex-direction: column;
    }

    .final-cta-action {
        width: 100%;
        max-width: 430px;
    }

}

@media (max-width: 760px) {

    .problems-section,
    .process-section,
    .trust-section,
    .final-cta {
        padding: 78px 0;
    }

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

    .process-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .process-timeline {
        grid-template-columns: 1fr;

        gap: 36px;
    }

    .step-line {
        display: none;
    }

    .process-step p {
        max-width: 420px;
    }

    .trust-panel {
        padding: 34px 25px;
    }

    .trust-metrics {
        grid-template-columns: 1fr;
    }

    .trust-metric {
        min-height: 135px;
    }

    .final-cta-box {
        padding: 38px 27px;
    }

}

.hero-visual {
    transform-style: preserve-3d;

    transition:
        transform 450ms cubic-bezier(.2,.8,.2,1);
}

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

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: .01ms !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }

}


/* =========================================================
   APP360 WHATSAPP
========================================================= */

.whatsapp-contact {
    position: fixed;
    z-index: 950;

    right: 28px;
    bottom: 28px;

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

    gap: 13px;
}

.whatsapp-button {
    position: relative;

    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255,255,255,.16);
    border-radius: 18px;

    color: white;

    background:
        linear-gradient(
            135deg,
            #25d366,
            #17a94e
        );

    box-shadow:
        0 16px 40px rgba(0,0,0,.28),
        0 8px 25px rgba(37,211,102,.20);

    transition:
        transform var(--transition),
        box-shadow var(--transition);
}

.whatsapp-button:hover {
    transform:
        translateY(-4px)
        scale(1.03);

    box-shadow:
        0 22px 50px rgba(0,0,0,.35),
        0 12px 32px rgba(37,211,102,.27);
}

.whatsapp-button svg {
    width: 29px;
    height: 29px;
}

.whatsapp-pulse {
    position: absolute;

    top: -2px;
    right: -2px;

    width: 12px;
    height: 12px;

    border: 3px solid #07121d;
    border-radius: 50%;

    background: #49e989;
}

.whatsapp-tooltip {
    position: relative;

    width: 285px;

    padding: 21px 21px 19px;

    border: 1px solid rgba(255,255,255,.11);
    border-radius: 17px;

    color: white;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(37,211,102,.09),
            transparent 42%
        ),
        rgba(7,20,32,.96);

    box-shadow:
        0 25px 60px rgba(0,0,0,.35);

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

    transform-origin: bottom right;

    transition:
        opacity var(--transition),
        transform var(--transition);
}

.whatsapp-tooltip.is-hidden {
    opacity: 0;

    pointer-events: none;

    transform:
        translateY(8px)
        scale(.97);
}

.whatsapp-close {
    position: absolute;

    top: 10px;
    right: 12px;

    border: 0;

    color: #6e8295;

    background: transparent;

    font-size: 1.1rem;

    cursor: pointer;
}

.whatsapp-online {
    display: flex;
    align-items: center;

    gap: 7px;

    color: #56dc87;

    font-size: .57rem;
    font-weight: 700;

    letter-spacing: .13em;
}

.whatsapp-online i {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #36dc77;

    box-shadow:
        0 0 10px rgba(54,220,119,.7);
}

.whatsapp-tooltip strong {
    display: block;

    margin-top: 11px;

    font-size: .98rem;
}

.whatsapp-tooltip p {
    margin-top: 7px;

    color: #8da1b3;

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

.whatsapp-tooltip-link {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 15px;

    color: #45da7d;

    font-size: .7rem;
    font-weight: 700;
}

@media (max-width: 680px) {

    .whatsapp-contact {
        right: 17px;
        bottom: 17px;
    }

    .whatsapp-button {
        width: 55px;
        height: 55px;

        border-radius: 17px;
    }

    .whatsapp-tooltip {
        width:
            min(
                280px,
                calc(100vw - 34px)
            );
    }

}


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

.services-hero {
    position: relative;

    min-height: 790px;

    display: flex;
    align-items: center;

    overflow: hidden;

    padding: 155px 0 90px;

    background:
        linear-gradient(
            180deg,
            #06111d 0%,
            #071521 100%
        );
}

.services-hero-grid {
    position: absolute;
    inset: 0;

    opacity: .12;

    background-image:
        linear-gradient(
            rgba(255,255,255,.055) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.055) 1px,
            transparent 1px
        );

    background-size: 60px 60px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.75),
            transparent 85%
        );
}

.services-hero-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(120px);

    pointer-events: none;
}

.services-glow-one {
    width: 600px;
    height: 600px;

    top: -260px;
    left: -200px;

    background: rgba(23,146,223,.14);
}

.services-glow-two {
    width: 700px;
    height: 700px;

    right: -280px;
    bottom: -250px;

    background: rgba(22,171,255,.10);
}

.services-hero-inner {
    position: relative;
    z-index: 2;

    width: 100%;

    display: grid;
    grid-template-columns: .9fr 1.1fr;

    align-items: center;

    gap: 70px;
}

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

.services-hero-copy h1 {
    margin-top: 22px;

    font-size:
        clamp(
            3.4rem,
            5.7vw,
            6rem
        );

    line-height: .93;

    letter-spacing: -.065em;
}

.services-hero-copy h1 span {
    display: block;

    margin-top: 10px;

    background:
        linear-gradient(
            90deg,
            #28aaff,
            #83d9ff
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}

.services-hero-copy > p {
    max-width: 610px;

    margin-top: 27px;

    color: #92a7b9;

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

.services-hero-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 34px;
}



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

.services-hero-visual {
    position: relative;

    min-height: 520px;

    display: grid;
    place-items: center;
}

.services-core {
    position: relative;
    z-index: 5;

    width: 210px;
    height: 210px;

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

    border: 1px solid rgba(62,183,255,.26);
    border-radius: 50%;

    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(38,179,255,.18),
            rgba(7,23,37,.92) 58%
        );

    box-shadow:
        0 0 80px rgba(16,151,232,.10),
        inset 0 0 50px rgba(28,160,241,.06);
}

.services-core::before {
    content: '';

    position: absolute;
    inset: 14px;

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

.services-core-icon {
    font-size: 2.4rem;
    font-weight: 800;

    letter-spacing: -.08em;

    color: #40baff;
}

.services-core > span {
    margin-top: 12px;

    color: #53bdf9;

    font-size: .58rem;
    font-weight: 700;

    letter-spacing: .21em;
}

.services-core strong {
    margin-top: 5px;

    color: #d8e9f4;

    font-size: .72rem;
    font-weight: 500;
}

.services-orbit {
    position: absolute;

    left: 50%;
    top: 50%;

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

    border: 1px solid rgba(62,182,246,.14);
    border-radius: 50%;
}

.orbit-one {
    width: 355px;
    height: 355px;
}

.orbit-two {
    width: 495px;
    height: 495px;

    border-style: dashed;
}

.service-floating-card {
    position: absolute;
    z-index: 6;

    display: flex;
    align-items: center;

    gap: 12px;

    min-width: 175px;

    padding: 12px 15px;

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

    background:
        rgba(8,25,39,.87);

    box-shadow:
        0 20px 40px rgba(0,0,0,.28);

    backdrop-filter: blur(15px);
}

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

    color: #4dbaff;

    font-size: .48rem;
    font-weight: 700;

    letter-spacing: .12em;
}

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

    margin-top: 3px;

    color: #e5f1f7;

    font-size: .71rem;
}

.floating-service-icon {
    width: 37px;
    height: 37px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 10px;

    color: #53c0ff;

    background:
        rgba(23,157,241,.11);

    font-size: .64rem;
    font-weight: 800;
}

.service-floating-one {
    top: 35px;
    left: 10%;
}

.service-floating-two {
    top: 100px;
    right: 1%;
}

.service-floating-three {
    left: 0;
    bottom: 75px;
}

.service-floating-four {
    right: 7%;
    bottom: 10px;
}



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

.services-intro {
    padding: 105px 0;

    color: #0b1b2c;

    background: #f7fafd;
}

.services-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;

    align-items: end;

    gap: 90px;
}

.services-intro h2 {
    max-width: 650px;

    margin-top: 17px;

    font-size:
        clamp(
            2.6rem,
            4.4vw,
            4.8rem
        );

    line-height: .96;

    letter-spacing: -.06em;
}

.services-intro h2 span {
    display: block;

    color: #1593df;
}

.services-intro-copy {
    padding-bottom: 4px;
}

.services-intro-main {
    color: #18354b;

    font-size: 1.16rem;
    font-weight: 600;

    line-height: 1.55;
}

.services-intro-copy p:last-child {
    margin-top: 18px;

    max-width: 570px;

    color: #728496;

    font-size: .91rem;

    line-height: 1.78;
}



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

.services-main {
    padding: 115px 0 125px;

    background: #06111d;
}

.services-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 70px;

    margin-bottom: 55px;
}

.services-section-heading h2 {
    margin-top: 14px;

    font-size:
        clamp(
            2.6rem,
            4vw,
            4.3rem
        );

    line-height: .98;

    letter-spacing: -.055em;
}

.services-section-heading h2 span {
    display: block;

    color: #31aff8;
}

.services-section-heading > p {
    max-width: 440px;

    color: #7e93a6;

    font-size: .88rem;

    line-height: 1.75;
}

.services-list {
    display: flex;
    flex-direction: column;

    gap: 20px;
}

.service-detail-card {
    position: relative;

    min-height: 500px;

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

    overflow: hidden;

    border: 1px solid rgba(255,255,255,.085);
    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.012)
        );

    transition:
        transform 400ms ease,
        border-color 400ms ease;
}

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

    border-color:
        rgba(39,166,243,.25);
}

.service-detail-reverse
.service-detail-content {
    order: 2;
}

.service-detail-reverse
.service-detail-visual {
    order: 1;
}

.service-detail-number {
    position: absolute;

    top: 24px;
    right: 27px;

    z-index: 5;

    color: rgba(255,255,255,.12);

    font-size: .65rem;
    font-weight: 700;

    letter-spacing: .15em;
}

.service-detail-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 60px;
}

.service-detail-icon {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(48,179,255,.18);
    border-radius: 13px;

    color: #42b9ff;

    background:
        rgba(21,153,235,.08);

    font-size: .76rem;
    font-weight: 800;
}

.service-type {
    margin-top: 24px;

    color: #3eb5f9;

    font-size: .56rem;
    font-weight: 700;

    letter-spacing: .16em;
}

.service-detail-content h3 {
    margin-top: 8px;

    font-size:
        clamp(
            2rem,
            3vw,
            3.3rem
        );

    letter-spacing: -.05em;
}

.service-detail-content > p {
    max-width: 560px;

    margin-top: 18px;

    color: #8499aa;

    font-size: .89rem;

    line-height: 1.75;
}

.service-features {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-top: 25px;
}

.service-features span {
    padding: 7px 11px;

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

    color: #9eb1c0;

    background:
        rgba(255,255,255,.025);

    font-size: .63rem;
}

.service-link {
    display: inline-flex;
    align-items: center;

    gap: 15px;

    width: fit-content;

    margin-top: 30px;

    color: #47bcff;

    font-size: .75rem;
    font-weight: 700;
}

.service-link span {
    transition:
        transform 250ms ease;
}

.service-link:hover span {
    transform: translateX(5px);
}

.service-detail-visual {
    position: relative;

    min-height: 500px;

    display: grid;
    place-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(31,160,239,.10),
            transparent 53%
        ),
        rgba(2,13,22,.25);
}



/* =========================================================
   SOFTWARE MOCKUP
========================================================= */

.software-window {
    width: 78%;
    max-width: 490px;

    overflow: hidden;

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 17px;

    background: #091725;

    box-shadow:
        0 35px 70px rgba(0,0,0,.42);

    transform:
        perspective(1200px)
        rotateY(-4deg)
        rotateX(2deg);
}

.software-window-header {
    height: 42px;

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

    padding: 0 13px;

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

    color: #61788a;

    font-size: .5rem;
}

.software-dots {
    display: flex;

    gap: 5px;
}

.software-dots i {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #294050;
}

.software-layout {
    min-height: 260px;

    display: grid;
    grid-template-columns: 60px 1fr;
}

.software-sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 17px;

    padding-top: 22px;

    border-right:
        1px solid rgba(255,255,255,.05);
}

.sidebar-brand {
    width: 25px;
    height: 25px;

    margin-bottom: 7px;

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            #159bf0,
            #40c2ff
        );
}

.software-sidebar i {
    width: 19px;
    height: 5px;

    border-radius: 4px;

    background: #1b3447;
}

.software-content {
    padding: 26px 23px;
}

.software-title {
    width: 125px;
    height: 11px;

    border-radius: 6px;

    background: #1a3549;
}

.software-stats {
    display: grid;
    grid-template-columns: repeat(3,1fr);

    gap: 9px;

    margin-top: 23px;
}

.software-stats div {
    height: 60px;

    border-radius: 9px;

    background:
        linear-gradient(
            145deg,
            #10293b,
            #0c2030
        );
}

.software-table {
    display: flex;
    flex-direction: column;

    gap: 9px;

    margin-top: 18px;
}

.software-table span {
    height: 27px;

    border-radius: 6px;

    background: #0f2637;
}



/* =========================================================
   AUTOMATION FLOW
========================================================= */

.automation-flow {
    width: 80%;

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

.automation-node {
    width: 125px;
    min-height: 110px;

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

    padding: 15px;

    border: 1px solid rgba(255,255,255,.09);
    border-radius: 15px;

    background:
        rgba(11,31,47,.86);

    text-align: center;
}

.automation-node span {
    color: #3bb5fa;

    font-size: .5rem;
    font-weight: 700;
}

.automation-node strong {
    margin-top: 8px;

    font-size: .75rem;
}

.automation-node small {
    margin-top: 5px;

    color: #668095;

    font-size: .5rem;

    line-height: 1.4;
}

.automation-node-main {
    min-width: 150px;
    min-height: 140px;

    border-color:
        rgba(45,177,255,.28);

    box-shadow:
        0 0 45px rgba(19,153,232,.10);
}

.automation-line {
    position: relative;

    width: 55px;
    height: 1px;

    overflow: hidden;

    background:
        rgba(45,178,255,.15);
}

.automation-line i {
    position: absolute;

    width: 18px;
    height: 1px;

    background: #43baff;

    animation:
        app360Flow 1.6s linear infinite;
}

@keyframes app360Flow {

    from {
        left: -20px;
    }

    to {
        left: 60px;
    }

}



/* =========================================================
   INTEGRATIONS
========================================================= */

.integration-map {
    position: relative;

    width: 500px;
    max-width: 92%;

    height: 330px;
}

.integration-center {
    position: absolute;

    left: 50%;
    top: 50%;

    z-index: 3;

    width: 110px;
    height: 110px;

    display: grid;
    place-items: center;

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

    border: 1px solid rgba(54,187,255,.28);
    border-radius: 50%;

    color: #51c1ff;

    background: #0a2031;

    font-size: .71rem;
    font-weight: 800;

    box-shadow:
        0 0 50px rgba(19,157,241,.12);
}

.integration-item {
    position: absolute;
    z-index: 3;

    width: 70px;
    height: 70px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255,255,255,.09);
    border-radius: 16px;

    color: #9db3c3;

    background: #0b1d2c;

    font-size: .61rem;
    font-weight: 700;
}

.integration-item-one {
    left: 55px;
    top: 38px;
}

.integration-item-two {
    right: 50px;
    top: 38px;
}

.integration-item-three {
    left: 55px;
    bottom: 24px;
}

.integration-item-four {
    right: 50px;
    bottom: 24px;
}

.integration-lines {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    stroke:
        rgba(53,176,247,.20);

    stroke-width: 1;
}



/* =========================================================
   DEVICES
========================================================= */

.devices-preview {
    position: relative;

    width: 82%;
    max-width: 500px;

    height: 330px;
}

.device-desktop {
    position: absolute;

    left: 0;
    top: 25px;

    width: 82%;
    height: 235px;

    overflow: hidden;

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 16px;

    background: #081724;

    box-shadow:
        0 30px 60px rgba(0,0,0,.4);
}

.device-bar {
    height: 27px;

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

    background: #0b1d2b;
}

.device-dashboard {
    height: calc(100% - 27px);

    display: grid;
    grid-template-columns: 52px 1fr;
}

.device-sidebar {
    border-right:
        1px solid rgba(255,255,255,.05);

    background: #091a28;
}

.device-main {
    padding: 28px;
}

.device-main > i {
    display: block;

    width: 100px;
    height: 9px;

    border-radius: 5px;

    background: #18374c;
}

.device-main > div {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 10px;

    margin-top: 25px;
}

.device-main span {
    height: 90px;

    border-radius: 10px;

    background:
        linear-gradient(
            145deg,
            #102c40,
            #0b2233
        );
}

.device-phone {
    position: absolute;

    right: 0;
    bottom: 0;

    width: 120px;
    height: 235px;

    overflow: hidden;

    border: 4px solid #102b3d;
    border-radius: 25px;

    background: #091b29;

    box-shadow:
        0 25px 50px rgba(0,0,0,.45);
}

.phone-notch {
    width: 42px;
    height: 9px;

    margin: 7px auto 0;

    border-radius: 8px;

    background: #020911;
}

.phone-content {
    padding: 25px 13px;
}

.phone-content span {
    display: block;

    width: 50px;
    height: 8px;

    margin-bottom: 20px;

    border-radius: 5px;

    background: #1e4258;
}

.phone-content i {
    display: block;

    height: 38px;

    margin-top: 8px;

    border-radius: 8px;

    background: #102d40;
}



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

.services-extra {
    padding: 115px 0;

    color: #0b1a2a;

    background: #f7fafd;
}

.services-extra-heading {
    max-width: 800px;

    margin-bottom: 48px;
}

.services-extra-heading h2 {
    margin-top: 15px;

    font-size:
        clamp(
            2.5rem,
            4vw,
            4.4rem
        );

    line-height: .98;

    letter-spacing: -.055em;
}

.services-extra-heading h2 span {
    display: block;

    color: #158fd8;
}

.services-extra-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);

    gap: 14px;
}

.extra-service-card {
    position: relative;

    min-height: 280px;

    padding: 30px;

    overflow: hidden;

    border: 1px solid #dfe9ef;
    border-radius: 18px;

    background: white;

    transition:
        transform 300ms ease,
        box-shadow 300ms ease,
        border-color 300ms ease;
}

.extra-service-card:hover {
    transform: translateY(-5px);

    border-color: #c9e2f1;

    box-shadow:
        0 30px 60px rgba(27,67,94,.08);
}

.extra-service-number {
    position: absolute;

    top: 22px;
    right: 23px;

    color: #cbd8e0;

    font-size: .59rem;
    font-weight: 700;
}

.extra-service-icon {
    width: 49px;
    height: 49px;

    display: grid;
    place-items: center;

    border-radius: 13px;

    color: #168fd8;

    background: #e9f6fd;

    font-size: 1rem;
}

.extra-service-card h3 {
    margin-top: 27px;

    font-size: 1.08rem;
}

.extra-service-card p {
    margin-top: 13px;

    color: #758797;

    font-size: .8rem;

    line-height: 1.7;
}



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

.services-fit {
    padding: 110px 0;

    color: #0b1b2b;

    background:
        linear-gradient(
            180deg,
            #f7fafd,
            #eef5f9
        );
}

.services-fit-box {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 80px;

    padding: 62px;

    border: 1px solid #d7e5ed;
    border-radius: 25px;

    background: white;

    box-shadow:
        0 35px 90px rgba(24,62,88,.07);
}

.services-fit-copy h2 {
    margin-top: 15px;

    font-size:
        clamp(
            2.2rem,
            3.4vw,
            3.7rem
        );

    line-height: .99;

    letter-spacing: -.052em;
}

.services-fit-copy h2 span {
    color: #178fd8;
}

.services-fit-copy p {
    max-width: 550px;

    margin-top: 22px;

    color: #718494;

    font-size: .88rem;

    line-height: 1.75;
}

.services-fit-list {
    display: flex;
    flex-direction: column;

    justify-content: center;

    gap: 11px;
}

.services-fit-list > div {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    padding: 14px 16px;

    border: 1px solid #e5edf2;
    border-radius: 11px;

    background: #f9fbfc;
}

.services-fit-list i {
    width: 21px;
    height: 21px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 50%;

    color: #168fd8;

    background: #e4f5ff;

    font-size: .59rem;
    font-style: normal;
    font-weight: 800;
}

.services-fit-list span {
    color: #526a7d;

    font-size: .76rem;

    line-height: 1.55;
}



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

.services-final {
    position: relative;

    overflow: hidden;

    padding: 100px 0;

    background: #06111d;
}

.services-final-light {
    position: absolute;

    width: 700px;
    height: 700px;

    right: -250px;
    top: -300px;

    border-radius: 50%;

    background:
        rgba(26,162,246,.13);

    filter: blur(140px);
}

.services-final-box {
    position: relative;

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

    gap: 70px;

    padding: 58px 60px;

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 24px;

    background:
        linear-gradient(
            125deg,
            #081827,
            #092136
        );
}

.services-final-box h2 {
    max-width: 700px;

    margin-top: 14px;

    font-size:
        clamp(
            2.4rem,
            4vw,
            4.2rem
        );

    line-height: .98;

    letter-spacing: -.055em;
}

.services-final-box h2 span {
    display: block;

    color: #37b5ff;
}

.services-final-box p {
    max-width: 630px;

    margin-top: 20px;

    color: #879bad;

    font-size: .88rem;

    line-height: 1.75;
}

.services-final-actions {
    min-width: 275px;

    display: flex;
    flex-direction: column;

    gap: 16px;

    align-items: center;
}

.services-final-actions .btn {
    width: 100%;
}

.services-whatsapp-link {
    display: flex;

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

    width: 100%;

    padding: 0 4px;

    color: #6fd796;

    font-size: .7rem;
    font-weight: 600;
}



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

@media (max-width: 1050px) {

    .services-hero-inner {
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .services-hero-copy {
        max-width: 800px;
    }

    .services-hero-visual {
        min-height: 550px;
    }

    .services-intro-grid {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .services-section-heading {
        align-items: flex-start;
        flex-direction: column;

        gap: 25px;
    }

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

    .service-detail-content,
    .service-detail-reverse
    .service-detail-content {
        order: 1;
    }

    .service-detail-visual,
    .service-detail-reverse
    .service-detail-visual {
        order: 2;
    }

    .services-extra-grid {
        grid-template-columns: 1fr 1fr;
    }

    .services-fit-box {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .services-final-box {
        align-items: flex-start;
        flex-direction: column;
    }

    .services-final-actions {
        width: 100%;
        max-width: 390px;
    }

}


@media (max-width: 700px) {

    .services-hero {
        min-height: auto;

        padding:
            135px 0 75px;
    }

    .services-hero-copy h1 {
        font-size:
            clamp(
                3rem,
                15vw,
                4.5rem
            );
    }

    .services-hero-visual {
        min-height: 470px;

        transform: scale(.9);
    }

    .services-core {
        width: 170px;
        height: 170px;
    }

    .orbit-one {
        width: 290px;
        height: 290px;
    }

    .orbit-two {
        width: 410px;
        height: 410px;
    }

    .service-floating-card {
        min-width: 150px;

        padding: 10px;
    }

    .service-floating-one {
        left: -5%;
    }

    .service-floating-two {
        right: -8%;
    }

    .service-floating-three {
        left: -8%;
    }

    .service-floating-four {
        right: -6%;
    }

    .services-intro,
    .services-main,
    .services-extra,
    .services-fit,
    .services-final {
        padding:
            78px 0;
    }

    .service-detail-content {
        padding:
            42px 25px;
    }

    .service-detail-visual {
        min-height: 360px;
    }

    .software-window {
        width: 90%;
    }

    .automation-flow {
        width: 94%;
    }

    .automation-node {
        width: 90px;
        min-height: 90px;

        padding: 8px;
    }

    .automation-node-main {
        min-width: 105px;
        min-height: 110px;
    }

    .automation-line {
        width: 25px;
    }

    .integration-map {
        transform: scale(.8);
    }

    .devices-preview {
        width: 94%;
    }

    .services-extra-grid {
        grid-template-columns: 1fr;
    }

    .services-fit-box {
        padding:
            38px 25px;
    }

    .services-final-box {
        padding:
            39px 27px;
    }

}


/* =========================================================
   APP360 — RESPONSIVE PRO SYSTEM
   Global mobile/tablet refinement
========================================================= */

/*
|--------------------------------------------------------------------------
| GLOBAL SAFETY
|--------------------------------------------------------------------------
*/

html {
    overflow-x: hidden;
    scroll-padding-top: 100px;
}

body {
    width: 100%;
    overflow-x: hidden;
}

img,
svg,
video {
    max-width: 100%;
}

main,
section,
.container,
.header-inner {
    min-width: 0;
}

.container {
    width: min(
        var(--container),
        calc(100% - 48px)
    );

    margin-inline: auto;
}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 980px) {

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

    /*
    |--------------------------------------------------------------------------
    | HEADER
    |--------------------------------------------------------------------------
    */

    .site-header {
        height: 82px;
    }

    .header-inner {
        min-height: 82px;
    }

    .brand-logo {
        max-width: 135px;
        max-height: 58px;
    }

    .mobile-menu-button {
        width: 50px;
        height: 50px;

        border-radius: 15px;
    }

    /*
    |--------------------------------------------------------------------------
    | TYPOGRAPHY
    |--------------------------------------------------------------------------
    */

    .hero h1,
    .services-hero-copy h1 {
        max-width: 780px;

        font-size:
            clamp(
                3.3rem,
                8.4vw,
                5.2rem
            );

        line-height: .94;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE — MAIN SYSTEM
|--------------------------------------------------------------------------
*/

@media (max-width: 700px) {

    :root {
        --mobile-space: 20px;
    }

    .container {
        width: calc(
            100% - (var(--mobile-space) * 2)
        );

        max-width: none;
    }


    /*
    |--------------------------------------------------------------------------
    | HEADER MOBILE
    |--------------------------------------------------------------------------
    */

    .site-header {
        height: 78px;
    }

    .header-inner {
        width: calc(100% - 32px);

        min-height: 78px;

        padding: 0;
    }

    .brand {
        display: flex;
        align-items: center;

        min-width: 0;
    }

    .brand-logo {
        width: auto;

        max-width: 104px;
        max-height: 52px;

        object-fit: contain;
    }

    .mobile-menu-button {
        width: 48px;
        height: 48px;

        flex-shrink: 0;

        border-radius: 14px;
    }

    .mobile-menu {
        top: 78px;

        width: calc(100% - 24px);

        margin-inline: 12px;

        padding:
            17px 18px
            22px;

        border: 1px solid rgba(255,255,255,.10);
        border-radius: 0 0 18px 18px;

        background:
            rgba(5,17,28,.98);

        box-shadow:
            0 25px 60px
            rgba(0,0,0,.34);

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

    .mobile-menu > a:not(.btn) {
        padding:
            14px 4px;

        font-size: .93rem;
    }

    .mobile-cta {
        width: 100%;

        margin-top: 12px;
    }


    /*
    |--------------------------------------------------------------------------
    | GENERAL MOBILE TYPOGRAPHY
    |--------------------------------------------------------------------------
    */

    .section-eyebrow,
    .hero-eyebrow {
        font-size: .62rem;

        letter-spacing: .16em;

        line-height: 1.5;
    }

    section h2 {
        text-wrap: balance;
    }

    section p {
        text-wrap: pretty;
    }


    /*
    |--------------------------------------------------------------------------
    | BUTTON SYSTEM MOBILE
    |--------------------------------------------------------------------------
    */

    .btn {
        min-height: 54px;

        padding:
            0 20px;

        border-radius: 13px;

        font-size: .82rem;
    }


    /*
    |--------------------------------------------------------------------------
    | HOME HERO
    |--------------------------------------------------------------------------
    */

    .hero {
        min-height: auto;

        padding:
            128px 0
            72px;
    }

    .hero-container {
        gap: 48px;
    }

    .hero-copy {
        width: 100%;
    }

    .hero-copy h1 {
        max-width: 100%;

        margin-top: 18px;

        font-size:
            clamp(
                3.05rem,
                13.2vw,
                4.2rem
            );

        line-height: .92;

        letter-spacing: -.058em;
    }

    .hero-copy > p {
        max-width: 100%;

        margin-top: 25px;

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

    .hero-actions {
        width: 100%;

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

        gap: 10px;

        margin-top: 29px;
    }

    .hero-actions .btn {
        width: 100%;

        justify-content: space-between;
    }

    .hero-trust {
        grid-template-columns: 1fr;

        gap: 10px;

        margin-top: 35px;
    }

    .hero-trust-item {
        min-width: 0;
    }

    .hero-visual {
        width: 100%;

        min-height: 370px;

        margin-top: 8px;

        transform: none !important;
    }


    /*
    |--------------------------------------------------------------------------
    | SERVICES HERO
    |--------------------------------------------------------------------------
    */

    .services-hero {
        min-height: auto;

        padding:
            125px 0
            70px;
    }

    .services-hero-inner {
        display: block;
    }

    .services-hero-copy {
        width: 100%;
        max-width: none;
    }

    .services-hero-copy h1 {
        width: 100%;
        max-width: 100%;

        margin-top: 21px;

        font-size:
            clamp(
                3.15rem,
                13vw,
                4.15rem
            );

        line-height: .92;

        letter-spacing: -.06em;

        overflow-wrap: normal;
        word-break: normal;

        text-wrap: balance;
    }

    .services-hero-copy h1 span {
        margin-top: 9px;
    }

    .services-hero-copy > p {
        width: 100%;
        max-width: 100%;

        margin-top: 27px;

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

    .services-hero-actions {
        display: grid;
        grid-template-columns: 1fr;

        width: 100%;

        gap: 10px;

        margin-top: 29px;
    }

    .services-hero-actions .btn {
        width: 100%;

        justify-content: space-between;
    }


    /*
    |--------------------------------------------------------------------------
    | SERVICES HERO VISUAL
    |--------------------------------------------------------------------------
    |
    | En desktop mostramos toda la composición.
    | En móvil simplificamos: menos elementos = más premium.
    |
    */

    .services-hero-visual {
        width: 100%;

        min-height: 390px;

        margin-top: 48px;

        overflow: visible;

        transform: none !important;
    }

    .services-core {
        width: 155px;
        height: 155px;
    }

    .services-core-icon {
        font-size: 2rem;
    }

    .orbit-one {
        width: 255px;
        height: 255px;
    }

    .orbit-two {
        width: 340px;
        height: 340px;
    }

    /*
     * Las cuatro tarjetas flotantes juntas
     * saturan demasiado un teléfono.
     */

    .service-floating-three,
    .service-floating-four {
        display: none;
    }

    .service-floating-card {
        min-width: 142px;
        max-width: 160px;

        padding:
            10px 11px;

        gap: 9px;

        border-radius: 12px;
    }

    .service-floating-card strong {
        font-size: .64rem;
    }

    .service-floating-card small {
        font-size: .43rem;
    }

    .floating-service-icon {
        width: 34px;
        height: 34px;
    }

    .service-floating-one {
        top: 16px;
        left: 0;
    }

    .service-floating-two {
        top: auto;
        right: 0;
        bottom: 17px;
    }


    /*
    |--------------------------------------------------------------------------
    | SERVICES INTRO
    |--------------------------------------------------------------------------
    */

    .services-intro {
        padding:
            78px 0;
    }

    .services-intro-grid {
        gap: 33px;
    }

    .services-intro h2 {
        max-width: 100%;

        font-size:
            clamp(
                2.55rem,
                11vw,
                3.65rem
            );

        line-height: .96;

        letter-spacing: -.055em;
    }

    .services-intro-main {
        font-size: 1rem;
        line-height: 1.6;
    }

    .services-intro-copy p:last-child {
        font-size: .86rem;
    }


    /*
    |--------------------------------------------------------------------------
    | SERVICES MAIN
    |--------------------------------------------------------------------------
    */

    .services-main {
        padding:
            78px 0
            84px;
    }

    .services-section-heading {
        margin-bottom: 37px;
    }

    .services-section-heading h2 {
        max-width: 100%;

        font-size:
            clamp(
                2.55rem,
                11vw,
                3.6rem
            );
    }

    .services-section-heading > p {
        font-size: .85rem;
    }

    .services-list {
        gap: 16px;
    }

    .service-detail-card {
        min-height: 0;

        border-radius: 19px;
    }

    .service-detail-content {
        padding:
            38px 24px
            42px;
    }

    .service-detail-content h3 {
        font-size:
            clamp(
                2rem,
                9vw,
                2.75rem
            );

        line-height: 1;
    }

    .service-detail-content > p {
        font-size: .83rem;
        line-height: 1.72;
    }

    .service-features {
        gap: 6px;
    }

    .service-features span {
        padding:
            7px 10px;

        font-size: .59rem;
    }

    .service-link {
        max-width: 100%;

        font-size: .7rem;
        line-height: 1.45;
    }

    .service-detail-visual {
        min-height: 315px;

        padding:
            25px 12px;
    }


    /*
    |--------------------------------------------------------------------------
    | SOFTWARE MOCKUP MOBILE
    |--------------------------------------------------------------------------
    */

    .software-window {
        width: 94%;

        transform:
            perspective(1000px)
            rotateY(-2deg)
            rotateX(1deg);
    }

    .software-layout {
        min-height: 220px;

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

    .software-content {
        padding:
            22px 16px;
    }


    /*
    |--------------------------------------------------------------------------
    | AUTOMATION MOBILE
    |--------------------------------------------------------------------------
    */

    .automation-flow {
        width: 100%;
    }

    .automation-node {
        width: 82px;

        min-height: 86px;

        padding: 8px;

        border-radius: 12px;
    }

    .automation-node-main {
        width: 104px;
        min-width: 104px;

        min-height: 108px;
    }

    .automation-node strong {
        font-size: .64rem;
    }

    .automation-node small {
        font-size: .43rem;
    }

    .automation-line {
        width: 19px;
    }


    /*
    |--------------------------------------------------------------------------
    | INTEGRATION MOBILE
    |--------------------------------------------------------------------------
    */

    .integration-map {
        width: 390px;
        max-width: 115%;

        height: 290px;

        transform: scale(.86);
    }


    /*
    |--------------------------------------------------------------------------
    | DEVICES MOBILE
    |--------------------------------------------------------------------------
    */

    .devices-preview {
        width: 100%;
        max-width: 390px;

        height: 280px;
    }

    .device-desktop {
        width: 85%;
        height: 205px;
    }

    .device-phone {
        width: 100px;
        height: 205px;
    }


    /*
    |--------------------------------------------------------------------------
    | EXTRA SERVICES
    |--------------------------------------------------------------------------
    */

    .services-extra-heading h2 {
        font-size:
            clamp(
                2.5rem,
                11vw,
                3.55rem
            );
    }

    .extra-service-card {
        min-height: 245px;

        padding: 25px;

        border-radius: 16px;
    }


    /*
    |--------------------------------------------------------------------------
    | FIT SECTION
    |--------------------------------------------------------------------------
    */

    .services-fit-box {
        padding:
            34px 22px;

        border-radius: 20px;
    }

    .services-fit-copy h2 {
        font-size:
            clamp(
                2.35rem,
                10vw,
                3.3rem
            );
    }

    .services-fit-list > div {
        padding:
            13px 13px;
    }


    /*
    |--------------------------------------------------------------------------
    | PROBLEMS HOME
    |--------------------------------------------------------------------------
    */

    .problems-layout {
        gap: 42px;
    }

    .problems-intro h2 {
        font-size:
            clamp(
                2.6rem,
                11vw,
                3.6rem
            );
    }

    .problem-card {
        min-height: 225px;

        padding: 24px;
    }


    /*
    |--------------------------------------------------------------------------
    | PROCESS HOME
    |--------------------------------------------------------------------------
    */

    .process-heading {
        margin-bottom: 48px;
    }

    .process-heading h2 {
        font-size:
            clamp(
                2.6rem,
                11vw,
                3.6rem
            );
    }

    .process-step {
        padding-right: 0;

        padding-bottom: 7px;
    }


    /*
    |--------------------------------------------------------------------------
    | TRUST
    |--------------------------------------------------------------------------
    */

    .trust-panel {
        gap: 39px;

        padding:
            33px 22px;

        border-radius: 20px;
    }

    .trust-panel-copy h2 {
        font-size:
            clamp(
                2.4rem,
                10vw,
                3.3rem
            );
    }


    /*
    |--------------------------------------------------------------------------
    | FINAL CTA
    |--------------------------------------------------------------------------
    */

    .final-cta-box,
    .services-final-box {
        gap: 35px;

        padding:
            35px 23px;

        border-radius: 20px;
    }

    .final-cta h2,
    .services-final-box h2 {
        font-size:
            clamp(
                2.45rem,
                10.5vw,
                3.35rem
            );

        line-height: .98;
    }

    .final-cta-action,
    .services-final-actions {
        width: 100%;
        max-width: none;
    }

    .final-cta-button,
    .services-final-actions .btn {
        width: 100%;
    }


    /*
    |--------------------------------------------------------------------------
    | FOOTER MOBILE
    |--------------------------------------------------------------------------
    */

    .site-footer {
        padding-top: 60px;
    }

    .footer-main {
        grid-template-columns: 1fr;

        gap: 36px;
    }

    .footer-brand {
        max-width: 100%;
    }

    .footer-logo {
        max-width: 125px;
        max-height: 62px;
    }

    .footer-column {
        gap: 9px;
    }

    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;

        gap: 7px;

        padding:
            24px 0;
    }


    /*
    |--------------------------------------------------------------------------
    | WHATSAPP MOBILE
    |--------------------------------------------------------------------------
    |
    | En escritorio puede existir la tarjeta.
    | En teléfono dejamos solo el acceso rápido:
    | mucho menos invasivo.
    |
    */

    .whatsapp-tooltip {
        display: none;
    }

    .whatsapp-contact {
        right: 16px;
        bottom: 16px;

        gap: 0;
    }

    .whatsapp-button {
        width: 53px;
        height: 53px;

        border-radius: 17px;

        box-shadow:
            0 14px 35px
            rgba(0,0,0,.27),
            0 7px 22px
            rgba(37,211,102,.17);
    }

    .whatsapp-button svg {
        width: 27px;
        height: 27px;
    }

}


/*
|--------------------------------------------------------------------------
| SMALL PHONES
|--------------------------------------------------------------------------
*/

@media (max-width: 430px) {

    :root {
        --mobile-space: 18px;
    }

    .header-inner {
        width: calc(100% - 28px);
    }

    .services-hero-copy h1,
    .hero-copy h1 {
        font-size:
            clamp(
                2.9rem,
                13.5vw,
                3.65rem
            );
    }

    .services-hero-copy > p,
    .hero-copy > p {
        font-size: .9rem;
    }

    .services-hero-visual {
        min-height: 350px;
    }

    .services-core {
        width: 145px;
        height: 145px;
    }

    .orbit-one {
        width: 235px;
        height: 235px;
    }

    .orbit-two {
        width: 310px;
        height: 310px;
    }

    .service-floating-card {
        max-width: 145px;
    }

}


/*
|--------------------------------------------------------------------------
| VERY SMALL PHONES
|--------------------------------------------------------------------------
*/

@media (max-width: 360px) {

    :root {
        --mobile-space: 16px;
    }

    .services-hero-copy h1,
    .hero-copy h1 {
        font-size: 2.75rem;
    }

    .services-hero-visual {
        transform:
            scale(.94) !important;
    }

}


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

.projects-hero {
    position: relative;

    min-height: 790px;

    display: flex;
    align-items: center;

    overflow: hidden;

    padding:
        155px 0
        95px;

    background: #06111d;
}

.projects-hero-grid {
    position: absolute;
    inset: 0;

    opacity: .1;

    background-image:
        linear-gradient(
            rgba(255,255,255,.055) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.055) 1px,
            transparent 1px
        );

    background-size: 60px 60px;
}

.projects-hero-glow {
    position: absolute;

    width: 800px;
    height: 800px;

    right: -300px;
    top: -200px;

    border-radius: 50%;

    background:
        rgba(23,151,236,.12);

    filter: blur(140px);
}

.projects-hero-inner {
    position: relative;
    z-index: 2;

    width: 100%;

    display: grid;
    grid-template-columns: .9fr 1.1fr;

    align-items: center;

    gap: 80px;
}

.projects-hero-copy h1 {
    max-width: 730px;

    margin-top: 20px;

    font-size:
        clamp(
            3.5rem,
            5.9vw,
            6.2rem
        );

    line-height: .93;

    letter-spacing: -.065em;
}

.projects-hero-copy h1 span {
    display: block;

    margin-top: 8px;

    color: #36b5ff;
}

.projects-hero-copy > p {
    max-width: 610px;

    margin-top: 27px;

    color: #8fa4b6;

    font-size: .97rem;

    line-height: 1.8;
}

.projects-hero-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 11px;

    margin-top: 33px;
}



/* =========================================================
   PROJECT STACK
========================================================= */

.projects-hero-visual {
    position: relative;

    min-height: 520px;

    display: grid;
    place-items: center;
}

.projects-stack {
    position: relative;

    width: 520px;
    max-width: 100%;

    height: 430px;
}

.project-stack-card {
    position: absolute;

    width: 270px;

    padding:
        24px 26px;

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(13,39,58,.92),
            rgba(7,25,39,.96)
        );

    box-shadow:
        0 30px 60px
        rgba(0,0,0,.26);
}

.project-stack-card span {
    display: block;

    color: #43b9ff;

    font-size: .58rem;
    font-weight: 800;

    letter-spacing: .16em;
}

.project-stack-card strong {
    display: block;

    margin-top: 8px;

    font-size: 1rem;
}

.stack-card-one {
    top: 15px;
    left: 20px;

    transform:
        rotate(-5deg);
}

.stack-card-two {
    top: 100px;
    right: 0;

    transform:
        rotate(4deg);
}

.stack-card-three {
    bottom: 15px;
    left: 65px;

    transform:
        rotate(-2deg);
}

.project-stack-core {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 170px;
    height: 170px;

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

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

    border: 1px solid rgba(49,182,255,.28);
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(30,168,248,.15),
            rgba(6,21,33,.96)
        );

    box-shadow:
        0 0 70px
        rgba(25,158,238,.10);
}

.project-stack-core small {
    color: #3eb8ff;

    font-size: .58rem;
    font-weight: 800;

    letter-spacing: .17em;
}

.project-stack-core strong {
    margin-top: 8px;

    font-size: .78rem;
}



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

.projects-intro {
    padding:
        105px 0;

    color: #0b1b2a;

    background: #f7fafd;
}

.projects-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;

    align-items: end;

    gap: 90px;
}

.projects-intro h2 {
    margin-top: 15px;

    font-size:
        clamp(
            2.6rem,
            4.4vw,
            4.7rem
        );

    line-height: .97;

    letter-spacing: -.055em;
}

.projects-intro h2 span {
    display: block;

    color: #168fd8;
}

.projects-intro-main {
    color: #19384e;

    font-size: 1.12rem;
    font-weight: 600;

    line-height: 1.55;
}

.projects-intro-copy p:last-child {
    margin-top: 18px;

    color: #708394;

    font-size: .89rem;

    line-height: 1.75;
}



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

.case-studies {
    padding:
        115px 0
        125px;

    background: #06111d;
}

.case-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 60px;

    margin-bottom: 55px;
}

.case-heading h2 {
    margin-top: 14px;

    font-size:
        clamp(
            2.7rem,
            4.2vw,
            4.4rem
        );

    line-height: .98;

    letter-spacing: -.055em;
}

.case-heading h2 span {
    display: block;

    color: #35b4ff;
}

.case-heading > p {
    max-width: 400px;

    color: #7d91a3;

    font-size: .86rem;

    line-height: 1.7;
}

.case-study {
    position: relative;

    min-height: 590px;

    display: grid;
    grid-template-columns:
        .9fr 1.1fr;

    overflow: hidden;

    margin-top: 20px;

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

    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.012)
        );
}

.case-study-reverse
.case-copy {
    order: 2;
}

.case-study-reverse
.case-visual {
    order: 1;
}

.case-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        58px;
}

.case-top {
    display: flex;
    align-items: center;

    gap: 13px;
}

.case-index {
    color: #41596c;

    font-size: .58rem;
    font-weight: 700;
}

.case-category {
    padding:
        6px 9px;

    border:
        1px solid rgba(55,180,250,.15);

    border-radius: 999px;

    color: #3eb9fd;

    background:
        rgba(23,158,237,.06);

    font-size: .51rem;
    font-weight: 700;

    letter-spacing: .13em;
}

.case-copy h3 {
    margin-top: 22px;

    font-size:
        clamp(
            2.7rem,
            4vw,
            4.4rem
        );

    line-height: .95;

    letter-spacing: -.06em;
}

.case-lead {
    max-width: 570px;

    margin-top: 20px;

    color: #9aafbe;

    font-size: .95rem;

    line-height: 1.7;
}

.case-problem {
    max-width: 570px;

    margin-top: 27px;

    padding-top: 23px;

    border-top:
        1px solid rgba(255,255,255,.07);
}

.case-problem small {
    color: #3eb9fd;

    font-size: .52rem;
    font-weight: 700;

    letter-spacing: .15em;
}

.case-problem p {
    margin-top: 9px;

    color: #74899b;

    font-size: .8rem;

    line-height: 1.7;
}

.case-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;

    margin-top: 24px;
}

.case-tags span {
    padding:
        7px 10px;

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

    border-radius: 999px;

    color: #91a6b6;

    background:
        rgba(255,255,255,.025);

    font-size: .58rem;
}

.case-link {
    width: fit-content;

    display: flex;
    align-items: center;

    gap: 15px;

    margin-top: 29px;

    color: #43baff;

    font-size: .72rem;
    font-weight: 700;
}

.case-link span {
    transition:
        transform 250ms ease;
}

.case-link:hover span {
    transform:
        translateX(5px);
}

.case-visual {
    position: relative;

    min-height: 590px;

    display: grid;
    place-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(30,162,242,.10),
            transparent 55%
        );
}



/* =========================================================
   GMPESAJES VISUAL
========================================================= */

.case-browser {
    width: 84%;
    max-width: 590px;

    overflow: hidden;

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

    border-radius: 18px;

    background: #091827;

    box-shadow:
        0 35px 75px
        rgba(0,0,0,.40);
}

.case-browser-top {
    height: 43px;

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

    padding: 0 14px;

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

    color: #577084;

    font-size: .48rem;
}

.case-browser-dots {
    display: flex;

    gap: 5px;
}

.case-browser-dots i {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #274153;
}

.case-dashboard {
    min-height: 325px;

    display: grid;
    grid-template-columns:
        64px 1fr;
}

.case-dashboard-sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 17px;

    padding-top: 20px;

    border-right:
        1px solid rgba(255,255,255,.05);
}

.case-side-logo {
    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    margin-bottom: 5px;

    border-radius: 8px;

    color: #06111d;

    background: #42b8ff;

    font-size: .56rem;
    font-weight: 900;
}

.case-dashboard-sidebar span {
    width: 20px;
    height: 5px;

    border-radius: 5px;

    background: #18374b;
}

.case-dashboard-main {
    padding: 29px 25px;
}

.case-dashboard-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.case-dashboard-title i:first-child {
    width: 105px;
    height: 10px;

    border-radius: 5px;

    background: #1b3a4e;
}

.case-dashboard-title i:last-child {
    width: 55px;
    height: 22px;

    border-radius: 8px;

    background: #123148;
}

.case-dashboard-stats {
    display: grid;
    grid-template-columns:
        repeat(3,1fr);

    gap: 8px;

    margin-top: 23px;
}

.case-dashboard-stats div {
    padding: 15px;

    border-radius: 10px;

    background:
        linear-gradient(
            145deg,
            #102b3e,
            #0c2233
        );
}

.case-dashboard-stats small {
    display: block;

    color: #607c90;

    font-size: .45rem;
}

.case-dashboard-stats strong {
    display: block;

    margin-top: 6px;

    font-size: 1rem;
}

.case-dashboard-body {
    display: grid;
    grid-template-columns:
        1.5fr .7fr;

    gap: 9px;

    margin-top: 13px;
}

.case-chart {
    height: 145px;

    display: flex;
    align-items: flex-end;

    gap: 9px;

    padding:
        20px 18px;

    border-radius: 10px;

    background: #0c2334;
}

.case-chart span {
    flex: 1;

    min-height: 10px;

    border-radius:
        3px 3px 0 0;

    background:
        linear-gradient(
            #3dbaff,
            #167db8
        );
}

.case-activity {
    display: flex;
    flex-direction: column;

    gap: 10px;

    padding:
        16px 13px;

    border-radius: 10px;

    background: #0c2334;
}

.case-activity i {
    height: 22px;

    border-radius: 6px;

    background: #15354a;
}



/* =========================================================
   LABELS
========================================================= */

.case-floating-label {
    position: absolute;

    display: flex;
    align-items: center;

    gap: 11px;

    padding:
        11px 14px;

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

    border-radius: 13px;

    background:
        rgba(7,23,36,.91);

    box-shadow:
        0 18px 40px
        rgba(0,0,0,.28);

    backdrop-filter: blur(12px);
}

.case-floating-label > span {
    width: 35px;
    height: 35px;

    display: grid;
    place-items: center;

    border-radius: 9px;

    color: #42baff;

    background:
        rgba(26,163,242,.10);
}

.case-floating-label small {
    display: block;

    color: #3db5fa;

    font-size: .46rem;
    font-weight: 700;

    letter-spacing: .12em;
}

.case-floating-label strong {
    display: block;

    margin-top: 3px;

    font-size: .63rem;
}

.case-label-one {
    right: 6%;
    bottom: 10%;
}



/* =========================================================
   APPCLOUD
========================================================= */

.cloud-dashboard {
    width: 82%;
    max-width: 560px;

    overflow: hidden;

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

    border-radius: 17px;

    background: #091826;

    box-shadow:
        0 35px 70px
        rgba(0,0,0,.4);
}

.cloud-topbar {
    height: 47px;

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

    padding:
        0 17px;

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

.cloud-brand {
    color: #49bfff;

    font-size: .68rem;
    font-weight: 800;
}

.cloud-user {
    width: 21px;
    height: 21px;

    border-radius: 50%;

    background: #173a50;
}

.cloud-layout {
    display: grid;
    grid-template-columns:
        57px 1fr;

    min-height: 315px;
}

.cloud-layout aside {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 16px;

    padding-top: 22px;

    border-right:
        1px solid rgba(255,255,255,.05);
}

.cloud-layout aside span {
    width: 19px;
    height: 5px;

    border-radius: 6px;

    background: #18394e;
}

.cloud-layout aside .active {
    background: #36b5ff;
}

.cloud-main {
    padding: 26px 22px;
}

.cloud-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cloud-heading i {
    width: 105px;
    height: 10px;

    border-radius: 5px;

    background: #1c3a4e;
}

.cloud-heading span {
    width: 46px;
    height: 20px;

    border-radius: 7px;

    background: #14344a;
}

.cloud-kpis {
    display: grid;
    grid-template-columns:
        repeat(3,1fr);

    gap: 8px;

    margin-top: 21px;
}

.cloud-kpis div {
    padding: 14px;

    border-radius: 10px;

    background:
        linear-gradient(
            145deg,
            #102c3f,
            #0c2232
        );
}

.cloud-kpis small {
    color: #617e92;

    font-size: .43rem;
}

.cloud-kpis strong {
    display: block;

    margin-top: 6px;

    font-size: .82rem;
}

.cloud-panels {
    display: grid;
    grid-template-columns:
        1.5fr .7fr;

    gap: 9px;

    margin-top: 13px;
}

.cloud-sales,
.cloud-orders {
    height: 145px;

    border-radius: 10px;

    background: #0d2435;
}

.cloud-sales-bars {
    height: 100%;

    display: flex;
    align-items: flex-end;

    gap: 9px;

    padding:
        20px;
}

.cloud-sales-bars span {
    flex: 1;

    border-radius:
        3px 3px 0 0;

    background:
        linear-gradient(
            #45c2ff,
            #1981bd
        );
}

.cloud-orders {
    display: flex;
    flex-direction: column;

    gap: 10px;

    padding: 15px;
}

.cloud-orders i {
    height: 20px;

    border-radius: 5px;

    background: #17384c;
}

.cloud-phone {
    position: absolute;

    right: 5%;
    bottom: 8%;

    width: 120px;
    height: 230px;

    padding:
        30px 13px
        15px;

    border:
        4px solid #112f43;

    border-radius: 24px;

    background: #091d2c;

    box-shadow:
        0 25px 55px
        rgba(0,0,0,.45);
}

.cloud-phone-notch {
    position: absolute;

    width: 40px;
    height: 8px;

    left: 50%;
    top: 7px;

    transform:
        translateX(-50%);

    border-radius: 7px;

    background: #02090e;
}

.cloud-phone strong {
    display: block;

    margin-top: 11px;

    font-size: 1rem;
}

.cloud-phone small {
    display: block;

    margin-top: 3px;

    color: #5f7c90;

    font-size: .44rem;
}

.cloud-phone-card {
    height: 46px;

    margin-top: 13px;

    border-radius: 9px;

    background: #102d40;
}

.case-label-two {
    left: 8%;
    bottom: 9%;
}



/* =========================================================
   APPCITAS
========================================================= */

.case-appcitas {
    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(58,168,255,.11),
            transparent 58%
        );
}

.booking-phone {
    position: relative;

    width: 245px;
    height: 480px;

    padding:
        44px 20px
        22px;

    border:
        5px solid #102c41;

    border-radius: 34px;

    background:
        linear-gradient(
            180deg,
            #0b2131,
            #081822
        );

    box-shadow:
        0 35px 70px
        rgba(0,0,0,.46);
}

.booking-notch {
    position: absolute;

    width: 70px;
    height: 13px;

    left: 50%;
    top: 10px;

    transform:
        translateX(-50%);

    border-radius: 10px;

    background: #02080d;
}

.booking-header small {
    color: #44baff;

    font-size: .52rem;
    font-weight: 800;
}

.booking-header strong {
    display: block;

    margin-top: 7px;

    font-size: 1.15rem;
}

.booking-calendar {
    margin-top: 30px;

    padding: 15px;

    border-radius: 13px;

    background:
        rgba(255,255,255,.035);
}

.booking-month {
    font-size: .65rem;
    font-weight: 700;
}

.booking-days,
.booking-dates {
    display: grid;
    grid-template-columns:
        repeat(5,1fr);

    gap: 4px;

    margin-top: 13px;

    text-align: center;
}

.booking-days span {
    color: #587589;

    font-size: .44rem;
}

.booking-dates i {
    display: grid;
    place-items: center;

    height: 28px;

    border-radius: 7px;

    color: #9bb0bf;

    font-size: .5rem;
    font-style: normal;
}

.booking-dates i.selected {
    color: white;

    background: #1aa6f4;
}

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

    gap: 7px;

    margin-top: 14px;
}

.booking-times span {
    padding:
        8px;

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

    border-radius: 8px;

    color: #7991a3;

    text-align: center;

    font-size: .51rem;
}

.booking-times .selected {
    border-color:
        rgba(43,176,250,.35);

    color: #42b9ff;

    background:
        rgba(29,159,235,.08);
}

.booking-phone button {
    width: 100%;

    margin-top: 18px;

    padding:
        12px;

    border: 0;
    border-radius: 10px;

    color: white;

    background:
        linear-gradient(
            135deg,
            #129cff,
            #27b2ff
        );

    font-size: .59rem;
    font-weight: 700;
}

.booking-confirm {
    position: absolute;

    right: 8%;
    bottom: 12%;

    display: flex;
    align-items: center;

    gap: 10px;

    padding:
        12px 15px;

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

    border-radius: 13px;

    background:
        rgba(7,23,35,.93);

    box-shadow:
        0 20px 45px
        rgba(0,0,0,.30);
}

.booking-confirm > span {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: #4ce287;

    background:
        rgba(47,208,109,.10);
}

.booking-confirm small {
    display: block;

    color: #4edb88;

    font-size: .44rem;
    font-weight: 700;
}

.booking-confirm strong {
    display: block;

    margin-top: 4px;

    font-size: .63rem;
}



/* =========================================================
   PROJECT APPROACH
========================================================= */

.projects-approach {
    padding:
        110px 0;

    color: #0b1c2b;

    background: #f6f9fc;
}

.projects-approach-box {
    display: grid;
    grid-template-columns:
        .8fr 1.2fr;

    gap: 75px;

    padding:
        60px;

    border:
        1px solid #dce7ed;

    border-radius: 25px;

    background: white;

    box-shadow:
        0 35px 90px
        rgba(22,60,84,.07);
}

.projects-approach h2 {
    margin-top: 15px;

    font-size:
        clamp(
            2.4rem,
            3.6vw,
            3.9rem
        );

    line-height: .99;

    letter-spacing: -.052em;
}

.projects-approach h2 span {
    display: block;

    color: #168fd8;
}

.projects-approach-box > div > p {
    margin-top: 21px;

    color: #708394;

    font-size: .86rem;

    line-height: 1.75;
}

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

    gap: 11px;
}

.approach-grid > div {
    padding:
        23px;

    border:
        1px solid #e3ebf0;

    border-radius: 14px;

    background: #f9fbfc;
}

.approach-grid strong {
    color: #c4d2da;

    font-size: .57rem;
}

.approach-grid span {
    display: block;

    margin-top: 18px;

    color: #172f42;

    font-size: .89rem;
    font-weight: 700;
}

.approach-grid p {
    margin-top: 7px;

    color: #778a99;

    font-size: .69rem;

    line-height: 1.55;
}



/* =========================================================
   PROJECT FINAL
========================================================= */

.projects-final {
    position: relative;

    overflow: hidden;

    padding:
        100px 0;

    background: #06111d;
}

.projects-final-glow {
    position: absolute;

    width: 700px;
    height: 700px;

    right: -250px;
    top: -300px;

    border-radius: 50%;

    background:
        rgba(28,159,240,.14);

    filter: blur(140px);
}

.projects-final-box {
    position: relative;

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

    gap: 70px;

    padding:
        58px 60px;

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

    border-radius: 24px;

    background:
        linear-gradient(
            125deg,
            #081827,
            #092136
        );
}

.projects-final-box h2 {
    max-width: 720px;

    margin-top: 14px;

    font-size:
        clamp(
            2.4rem,
            4vw,
            4.3rem
        );

    line-height: .98;

    letter-spacing: -.055em;
}

.projects-final-box h2 span {
    color: #38b6ff;
}

.projects-final-box p {
    max-width: 600px;

    margin-top: 20px;

    color: #879bad;

    font-size: .87rem;

    line-height: 1.7;
}

.projects-final-actions {
    min-width: 275px;

    display: flex;
    flex-direction: column;

    gap: 16px;

    align-items: center;
}

.projects-final-actions .btn {
    width: 100%;
}

.projects-whatsapp {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    padding-inline: 4px;

    color: #65d58f;

    font-size: .69rem;
    font-weight: 600;
}



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

@media (max-width: 1050px) {

    .projects-hero-inner {
        grid-template-columns: 1fr;
    }

    .projects-hero-copy {
        max-width: 800px;
    }

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

    .case-study-reverse
    .case-copy,
    .case-copy {
        order: 1;
    }

    .case-study-reverse
    .case-visual,
    .case-visual {
        order: 2;
    }

    .projects-approach-box {
        grid-template-columns: 1fr;
    }

    .projects-final-box {
        align-items: flex-start;
        flex-direction: column;
    }

    .projects-final-actions {
        width: 100%;
        max-width: 390px;
    }

}


@media (max-width: 700px) {

    .projects-hero {
        min-height: auto;

        padding:
            125px 0
            75px;
    }

    .projects-hero-inner {
        gap: 50px;
    }

    .projects-hero-copy h1 {
        font-size:
            clamp(
                3rem,
                13vw,
                4.15rem
            );

        line-height: .92;
    }

    .projects-hero-copy > p {
        font-size: .92rem;
    }

    .projects-hero-actions {
        display: grid;
        grid-template-columns: 1fr;

        width: 100%;
    }

    .projects-hero-actions .btn {
        width: 100%;

        justify-content: space-between;
    }

    .projects-hero-visual {
        min-height: 380px;
    }

    .projects-stack {
        width: 100%;
        height: 350px;
    }

    .project-stack-card {
        width: 205px;

        padding:
            17px 18px;
    }

    .project-stack-card strong {
        font-size: .78rem;
    }

    .project-stack-core {
        width: 135px;
        height: 135px;
    }

    .stack-card-one {
        left: 0;
    }

    .stack-card-two {
        right: -6px;
    }

    .stack-card-three {
        left: 25px;
    }


    .projects-intro,
    .case-studies,
    .projects-approach,
    .projects-final {
        padding:
            78px 0;
    }

    .projects-intro-grid {
        grid-template-columns: 1fr;

        gap: 34px;
    }

    .projects-intro h2 {
        font-size:
            clamp(
                2.55rem,
                11vw,
                3.55rem
            );
    }

    .case-heading {
        align-items: flex-start;
        flex-direction: column;

        gap: 24px;
    }

    .case-heading h2 {
        font-size:
            clamp(
                2.55rem,
                11vw,
                3.55rem
            );
    }

    .case-study {
        min-height: 0;

        border-radius: 20px;
    }

    .case-copy {
        padding:
            39px 23px
            44px;
    }

    .case-copy h3 {
        font-size:
            clamp(
                2.5rem,
                12vw,
                3.5rem
            );
    }

    .case-lead {
        font-size: .88rem;
    }

    .case-visual {
        min-height: 390px;

        padding:
            30px 10px;
    }

    .case-browser,
    .cloud-dashboard {
        width: 95%;
    }

    .case-dashboard {
        grid-template-columns:
            48px 1fr;
    }

    .case-dashboard-main,
    .cloud-main {
        padding:
            20px 14px;
    }

    .case-dashboard-stats,
    .cloud-kpis {
        gap: 5px;
    }

    .case-dashboard-stats div,
    .cloud-kpis div {
        padding:
            10px 8px;
    }

    .case-dashboard-stats strong,
    .cloud-kpis strong {
        font-size: .72rem;
    }

    .case-floating-label {
        display: none;
    }

    .cloud-phone {
        right: 4%;
        bottom: 5%;

        transform:
            scale(.82);

        transform-origin:
            bottom right;
    }

    .booking-phone {
        width: 220px;
        height: 440px;

        transform:
            scale(.88);
    }

    .booking-confirm {
        right: 1%;
        bottom: 8%;

        transform:
            scale(.86);

        transform-origin:
            bottom right;
    }

    .projects-approach-box {
        padding:
            35px 22px;

        border-radius: 20px;
    }

    .projects-approach h2 {
        font-size:
            clamp(
                2.4rem,
                10.5vw,
                3.3rem
            );
    }

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

    .projects-final-box {
        padding:
            37px 23px;

        border-radius: 20px;
    }

    .projects-final-box h2 {
        font-size:
            clamp(
                2.45rem,
                10.5vw,
                3.35rem
            );
    }

    .projects-final-actions {
        width: 100%;
        max-width: none;
    }

}


/* =========================================================
   APP360 — PROJECTS HERO V2 PRO OVERRIDE
========================================================= */

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.brand-logo {
    width: auto;
    max-width: 60px;
    max-height: 58px;
}

.brand-wordmark {
    color: #f4f9fd;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: 1;
}

.brand-wordmark span {
    color: #169eff;
}


/* HERO */

.projects-hero-v2 {
    position: relative;

    min-height: 900px;

    display: flex;
    align-items: center;

    overflow: hidden;

    padding: 150px 0 90px;

    background:
        linear-gradient(
            110deg,
            #06111d 0%,
            #06131f 43%,
            #082238 100%
        );
}

.projects-hero-v2 .projects-hero-grid {
    position: absolute;
    inset: 0;

    opacity: .12;

    background-image:
        linear-gradient(
            rgba(67,174,235,.11) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(67,174,235,.11) 1px,
            transparent 1px
        );

    background-size: 72px 72px;

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            black 35%,
            black
        );
}

.projects-glow-left {
    width: 600px;
    height: 600px;

    left: -320px;
    top: 150px;

    background: rgba(26,154,235,.08);
}

.projects-glow-right {
    width: 720px;
    height: 720px;

    right: -130px;
    top: 40px;

    background: rgba(15,151,240,.14);
}

.projects-hero-v2-inner {
    position: relative;
    z-index: 5;

    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, .92fr)
        minmax(0, 1.08fr);

    align-items: center;

    gap: 85px;
}


/* COPY */

.projects-hero-v2-copy {
    width: 100%;
    max-width: 670px;
}

.projects-hero-v2-copy .hero-eyebrow {
    display: inline-block;

    color: #29b3ff;

    font-size: .64rem;
    font-weight: 800;

    letter-spacing: .19em;
}

.projects-hero-v2-copy h1 {
    max-width: 660px;

    margin-top: 26px;

    font-size:
        clamp(
            4rem,
            5.35vw,
            5.8rem
        );

    line-height: .89;

    letter-spacing: -.068em;
}

.projects-hero-v2-copy h1 span {
    display: block;

    margin-top: 8px;

    color: transparent;

    background:
        linear-gradient(
            90deg,
            #21a9ff,
            #58c7ff
        );

    -webkit-background-clip: text;
    background-clip: text;
}

.projects-hero-v2-copy > p {
    max-width: 605px;

    margin-top: 32px;

    color: #9aafbf;

    font-size: .98rem;

    line-height: 1.75;
}


/* BUTTONS */

.projects-hero-v2-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 14px;

    margin-top: 32px;
}

.projects-hero-v2-actions .btn {
    min-height: 57px;

    padding-inline: 27px;
}


/* BENEFITS */

.projects-benefits {
    display: grid;

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

    max-width: 650px;

    margin-top: 49px;
}

.projects-benefit {
    position: relative;

    min-width: 0;

    display: flex;
    align-items: center;

    gap: 13px;

    padding: 3px 25px 3px 0;
}

.projects-benefit:not(:last-child)::after {
    content: '';

    position: absolute;

    top: 3px;
    right: 13px;

    width: 1px;
    height: 47px;

    background: rgba(255,255,255,.09);
}

.projects-benefit-icon {
    width: 37px;
    height: 37px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    color: #20aaff;
}

.projects-benefit-icon svg {
    width: 30px;
    height: 30px;
}

.projects-benefit strong,
.projects-benefit span {
    display: block;
}

.projects-benefit strong {
    color: #d9e8f2;

    font-size: .77rem;
    font-weight: 600;
}

.projects-benefit span {
    margin-top: 2px;

    color: #9aafbd;

    font-size: .72rem;
}


/* VISUAL */

.projects-hero-v2-visual {
    position: relative;

    min-height: 620px;

    display: grid;
    place-items: center;

    isolation: isolate;
}


/* ORBITS */

.projects-orbit {
    position: absolute;

    left: 50%;
    top: 50%;

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

    border-radius: 50%;

    pointer-events: none;
}

.projects-orbit-outer {
    width: 535px;
    height: 535px;

    border:
        1px dashed
        rgba(29,167,249,.32);
}

.projects-orbit-middle {
    width: 400px;
    height: 400px;

    border:
        1px solid
        rgba(29,167,249,.20);
}

.projects-orbit-inner {
    width: 245px;
    height: 245px;

    border:
        1px solid
        rgba(29,167,249,.28);

    box-shadow:
        0 0 60px
        rgba(18,159,246,.06);
}


/* DOTS */

.orbit-dot {
    position: absolute;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #33b8ff;

    box-shadow:
        0 0 13px
        rgba(51,184,255,.8);
}

.orbit-dot-one {
    left: 11%;
    top: 47%;
}

.orbit-dot-two {
    right: 14%;
    top: 19%;
}

.orbit-dot-three {
    right: 5%;
    bottom: 17%;
}


/* CORE */

.projects-core {
    position: relative;
    z-index: 5;

    width: 190px;
    height: 190px;

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

    border:
        1px solid
        rgba(28,177,255,.60);

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(29,167,250,.34),
            rgba(7,28,44,.92) 56%,
            #071725 100%
        );

    box-shadow:
        0 0 70px rgba(17,153,235,.18),
        inset 0 0 45px rgba(28,169,248,.06);
}

.projects-core strong {
    color: #f0f8fd;

    font-size: 1.5rem;

    letter-spacing: -.06em;
}

.projects-core strong span {
    color: #1aa9ff;
}

.projects-core small {
    margin-top: 9px;

    color: #a4bbca;

    font-size: .8rem;
}


/* PROJECT CARDS */

.projects-floating-card {
    position: absolute;
    z-index: 8;

    min-width: 290px;

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

    gap: 24px;

    padding: 22px 23px;

    border:
        1px solid
        rgba(68,182,245,.24);

    border-radius: 17px;

    background:
        linear-gradient(
            140deg,
            rgba(10,35,53,.95),
            rgba(7,25,40,.94)
        );

    box-shadow:
        0 25px 55px
        rgba(0,0,0,.28);

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

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

    color: #28b6ff;

    font-size: .54rem;
    font-weight: 800;

    letter-spacing: .15em;
}

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

    margin-top: 9px;

    color: #f1f7fb;

    font-size: .92rem;
}

.project-float-icon {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    color: #23b2ff;
}

.project-float-icon svg {
    width: 28px;
    height: 28px;
}

.projects-card-gm {
    left: 1%;
    top: 55px;

    transform: rotate(-5deg);
}

.projects-card-cloud {
    right: -1%;
    top: 145px;

    transform: rotate(5deg);
}

.projects-card-citas {
    left: 8%;
    bottom: 55px;

    transform: rotate(-3deg);
}


/* FLOATING ANIMATION */

@media (prefers-reduced-motion: no-preference) {

    .projects-card-gm {
        animation:
            app360ProjectFloatOne
            7s ease-in-out infinite;
    }

    .projects-card-cloud {
        animation:
            app360ProjectFloatTwo
            8s ease-in-out infinite;
    }

    .projects-card-citas {
        animation:
            app360ProjectFloatThree
            7.5s ease-in-out infinite;
    }

}

@keyframes app360ProjectFloatOne {

    0%,
    100% {
        transform:
            rotate(-5deg)
            translateY(0);
    }

    50% {
        transform:
            rotate(-4deg)
            translateY(-7px);
    }

}

@keyframes app360ProjectFloatTwo {

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

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

}

@keyframes app360ProjectFloatThree {

    0%,
    100% {
        transform:
            rotate(-3deg)
            translateY(0);
    }

    50% {
        transform:
            rotate(-2deg)
            translateY(-8px);
    }

}


/* TABLET */

@media (max-width: 1100px) {

    .projects-hero-v2 {
        min-height: auto;
    }

    .projects-hero-v2-inner {
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .projects-hero-v2-copy {
        max-width: 800px;
    }

    .projects-hero-v2-visual {
        min-height: 570px;
    }

}


/* MOBILE */

@media (max-width: 700px) {

    .brand {
        gap: 7px;
    }

    .brand-logo {
        max-width: 52px;
        max-height: 49px;
    }

    .brand-wordmark {
        font-size: 1.05rem;
    }

    .projects-hero-v2 {
        min-height: auto;

        padding:
            125px 0
            72px;
    }

    .projects-hero-v2-inner {
        gap: 38px;
    }

    .projects-hero-v2-copy {
        max-width: none;
    }

    .projects-hero-v2-copy h1 {
        max-width: 100%;

        margin-top: 21px;

        font-size:
            clamp(
                3.15rem,
                13.6vw,
                4.2rem
            );

        line-height: .9;
    }

    .projects-hero-v2-copy > p {
        margin-top: 27px;

        font-size: .92rem;
        line-height: 1.75;
    }

    .projects-hero-v2-actions {
        display: grid;
        grid-template-columns: 1fr;

        width: 100%;

        gap: 10px;

        margin-top: 29px;
    }

    .projects-hero-v2-actions .btn {
        width: 100%;

        justify-content: space-between;
    }

    .projects-benefits {
        grid-template-columns: 1fr;

        gap: 0;

        margin-top: 40px;
    }

    .projects-benefit {
        min-height: 65px;

        padding: 11px 0;

        border-top:
            1px solid
            rgba(255,255,255,.07);
    }

    .projects-benefit:last-child {
        border-bottom:
            1px solid
            rgba(255,255,255,.07);
    }

    .projects-benefit:not(:last-child)::after {
        display: none;
    }

    .projects-hero-v2-visual {
        min-height: 430px;

        margin-top: 10px;
    }

    .projects-orbit-outer {
        width: 330px;
        height: 330px;
    }

    .projects-orbit-middle {
        width: 260px;
        height: 260px;
    }

    .projects-orbit-inner {
        width: 170px;
        height: 170px;
    }

    .projects-core {
        width: 135px;
        height: 135px;
    }

    .projects-core strong {
        font-size: 1.12rem;
    }

    .projects-core small {
        font-size: .65rem;
    }

    .projects-floating-card {
        min-width: 185px;
        max-width: 205px;

        padding: 14px 15px;

        gap: 12px;

        border-radius: 13px;
    }

    .projects-floating-card small {
        font-size: .43rem;
    }

    .projects-floating-card strong {
        margin-top: 5px;

        font-size: .7rem;
    }

    .project-float-icon {
        width: 28px;
        height: 28px;
    }

    .project-float-icon svg {
        width: 23px;
        height: 23px;
    }

    .projects-card-gm {
        top: 10px;
        left: -7px;
    }

    .projects-card-cloud {
        top: 95px;
        right: -15px;
    }

    .projects-card-citas {
        left: 3px;
        bottom: 7px;
    }

}


/* SMALL PHONE */

@media (max-width: 390px) {

    .projects-hero-v2-copy h1 {
        font-size:
            clamp(
                2.95rem,
                13.4vw,
                3.5rem
            );
    }

    .projects-hero-v2-visual {
        min-height: 405px;
    }

    .projects-orbit-outer {
        width: 300px;
        height: 300px;
    }

    .projects-orbit-middle {
        width: 235px;
        height: 235px;
    }

    .projects-floating-card {
        min-width: 172px;
        max-width: 185px;
    }

}


/* =========================================================
   PROJECTS HERO — FINAL SPACING TUNING
========================================================= */

.projects-hero-v2 .container {
    width: min(
        1380px,
        calc(100% - 96px)
    );
}

.projects-hero-v2-inner {
    gap: 95px;
}

.projects-hero-v2-copy {
    padding-left: 10px;
}

@media (max-width: 1200px) {

    .projects-hero-v2 .container {
        width: calc(100% - 64px);
    }

    .projects-hero-v2-copy {
        padding-left: 0;
    }

}

@media (max-width: 700px) {

    .projects-hero-v2 .container {
        width: calc(100% - 40px);
    }

}

@media (max-width: 430px) {

    .projects-hero-v2 .container {
        width: calc(100% - 36px);
    }

}



/* =========================================================
   APP360 — NOSOTROS
========================================================= */

.about-hero {
    position: relative;

    min-height: 820px;

    display: flex;
    align-items: center;

    overflow: hidden;

    padding: 150px 0 95px;

    background:
        linear-gradient(
            110deg,
            #06111d 0%,
            #071725 55%,
            #082238 100%
        );
}

.about-grid {
    position: absolute;
    inset: 0;

    opacity: .1;

    background-image:
        linear-gradient(
            rgba(62,178,242,.10) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(62,178,242,.10) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            black 35%,
            black
        );
}

.about-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(140px);
}

.about-glow-one {
    width: 600px;
    height: 600px;

    left: -280px;
    top: 100px;

    background: rgba(22,155,238,.08);
}

.about-glow-two {
    width: 700px;
    height: 700px;

    right: -260px;
    top: -150px;

    background: rgba(20,157,244,.13);
}

.about-hero-inner {
    position: relative;
    z-index: 4;

    display: grid;
    grid-template-columns: .92fr 1.08fr;

    align-items: center;

    gap: 90px;
}

.about-hero-copy {
    max-width: 680px;
}

.about-hero-copy h1 {
    margin-top: 24px;

    font-size:
        clamp(
            3.8rem,
            5.5vw,
            5.8rem
        );

    line-height: .91;

    letter-spacing: -.065em;
}

.about-hero-copy h1 span {
    display: block;

    margin-top: 9px;

    color: #38b6ff;
}

.about-hero-copy > p {
    max-width: 610px;

    margin-top: 29px;

    color: #96abba;

    font-size: .98rem;

    line-height: 1.78;
}

.about-hero-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 33px;
}


/* HERO VISUAL */

.about-hero-visual {
    position: relative;

    min-height: 540px;

    display: grid;
    place-items: center;
}

.about-orbit {
    position: absolute;

    left: 50%;
    top: 50%;

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

    border-radius: 50%;
}

.about-orbit-one {
    width: 420px;
    height: 420px;

    border:
        1px solid
        rgba(42,177,251,.18);
}

.about-orbit-two {
    width: 530px;
    height: 530px;

    border:
        1px dashed
        rgba(42,177,251,.20);
}

.about-core {
    position: relative;
    z-index: 4;

    width: 185px;
    height: 185px;

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

    border:
        1px solid
        rgba(46,183,255,.52);

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(31,169,247,.30),
            #071b2b 62%
        );

    box-shadow:
        0 0 70px
        rgba(23,160,243,.14);
}

.about-core strong {
    font-size: 1.45rem;

    letter-spacing: -.06em;
}

.about-core strong span {
    color: #1baaff;
}

.about-core small {
    margin-top: 8px;

    color: #95adbd;

    font-size: .7rem;
}

.about-float-card {
    position: absolute;
    z-index: 5;

    width: 220px;

    padding:
        18px 20px;

    border:
        1px solid
        rgba(61,181,248,.18);

    border-radius: 15px;

    background:
        rgba(8,29,45,.92);

    box-shadow:
        0 22px 50px
        rgba(0,0,0,.28);
}

.about-float-card small {
    color: #29b4ff;

    font-size: .5rem;
    font-weight: 800;
}

.about-float-card strong,
.about-float-card span {
    display: block;
}

.about-float-card strong {
    margin-top: 6px;

    font-size: .8rem;
}

.about-float-card span {
    margin-top: 4px;

    color: #738a9d;

    font-size: .61rem;
}

.about-card-one {
    left: 3%;
    top: 50px;

    transform: rotate(-4deg);
}

.about-card-two {
    right: 1%;
    top: 190px;

    transform: rotate(4deg);
}

.about-card-three {
    left: 11%;
    bottom: 35px;

    transform: rotate(-2deg);
}


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

.about-intro {
    padding: 110px 0;

    color: #0b1b2b;

    background: #f7fafd;
}

.about-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;

    align-items: end;

    gap: 90px;
}

.about-intro h2 {
    margin-top: 16px;

    font-size:
        clamp(
            2.6rem,
            4.3vw,
            4.6rem
        );

    line-height: .97;

    letter-spacing: -.055em;
}

.about-intro h2 span {
    display: block;

    color: #168fd8;
}

.about-intro-main {
    color: #18384f;

    font-size: 1.13rem;
    font-weight: 600;

    line-height: 1.55;
}

.about-intro-copy p:not(.about-intro-main) {
    margin-top: 18px;

    color: #718494;

    font-size: .89rem;

    line-height: 1.76;
}


/* =========================================================
   PRINCIPLES
========================================================= */

.about-principles {
    padding: 115px 0 125px;

    background: #06111d;
}

.about-principles-heading {
    max-width: 800px;

    margin-bottom: 50px;
}

.about-principles-heading h2 {
    margin-top: 15px;

    font-size:
        clamp(
            2.6rem,
            4.2vw,
            4.5rem
        );

    line-height: .98;

    letter-spacing: -.055em;
}

.about-principles-heading h2 span {
    display: block;

    color: #35b4ff;
}

.about-principles-grid {
    display: grid;
    grid-template-columns:
        repeat(4,1fr);

    gap: 13px;
}

.about-principle {
    position: relative;

    min-height: 320px;

    padding: 29px;

    overflow: hidden;

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

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.012)
        );

    transition:
        transform 300ms ease,
        border-color 300ms ease;
}

.about-principle:hover {
    transform: translateY(-5px);

    border-color:
        rgba(47,177,248,.24);
}

.about-principle-number {
    position: absolute;

    top: 22px;
    right: 23px;

    color: #40586b;

    font-size: .55rem;
    font-weight: 700;
}

.about-principle-icon {
    width: 47px;
    height: 47px;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(43,177,250,.18);

    border-radius: 13px;

    color: #3bb7fd;

    background:
        rgba(28,155,232,.07);

    font-size: .77rem;
    font-weight: 800;
}

.about-principle h3 {
    margin-top: 26px;

    font-size: 1rem;
}

.about-principle p {
    margin-top: 13px;

    color: #758b9d;

    font-size: .78rem;

    line-height: 1.72;
}


/* =========================================================
   WORKING TOGETHER
========================================================= */

.about-work {
    padding: 110px 0;

    color: #0b1b2b;

    background: #f7fafd;
}

.about-work-box {
    display: grid;
    grid-template-columns: .9fr 1.1fr;

    gap: 75px;

    padding: 60px;

    border:
        1px solid #dbe7ed;

    border-radius: 25px;

    background: white;

    box-shadow:
        0 35px 90px
        rgba(22,59,84,.07);
}

.about-work-copy h2 {
    margin-top: 15px;

    font-size:
        clamp(
            2.5rem,
            3.7vw,
            4rem
        );

    line-height: .99;

    letter-spacing: -.055em;
}

.about-work-copy h2 span {
    display: block;

    color: #168fd8;
}

.about-work-copy p {
    max-width: 520px;

    margin-top: 21px;

    color: #718494;

    font-size: .87rem;

    line-height: 1.75;
}

.about-work-list {
    display: flex;
    flex-direction: column;

    justify-content: center;

    gap: 10px;
}

.about-work-list > div {
    display: flex;
    align-items: flex-start;

    gap: 15px;

    padding: 17px;

    border:
        1px solid #e4edf2;

    border-radius: 12px;

    background: #f9fbfc;
}

.about-work-list > div > span {
    width: 28px;
    height: 28px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 50%;

    color: #168fd8;

    background: #e7f5fd;

    font-size: .53rem;
    font-weight: 800;
}

.about-work-list strong {
    color: #173044;

    font-size: .82rem;
}

.about-work-list p {
    margin-top: 4px;

    color: #738696;

    font-size: .7rem;

    line-height: 1.5;
}


/* =========================================================
   CAPABILITIES
========================================================= */

.about-capabilities {
    padding: 110px 0 120px;

    color: #0b1b2b;

    background:
        linear-gradient(
            180deg,
            #f7fafd,
            #eef5f9
        );
}

.about-capabilities-heading {
    max-width: 720px;

    margin-bottom: 46px;
}

.about-capabilities-heading h2 {
    margin-top: 14px;

    font-size:
        clamp(
            2.6rem,
            4vw,
            4.3rem
        );

    line-height: .98;

    letter-spacing: -.055em;
}

.about-capabilities-heading h2 span {
    display: block;

    color: #168fd8;
}

.about-capabilities-grid {
    display: grid;
    grid-template-columns:
        repeat(3,1fr);

    gap: 11px;
}

.about-capability {
    min-height: 145px;

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

    padding: 25px;

    border:
        1px solid #dde8ee;

    border-radius: 15px;

    background: white;
}

.about-capability strong {
    color: #173147;

    font-size: .9rem;
}

.about-capability span {
    max-width: 300px;

    margin-top: 8px;

    color: #718596;

    font-size: .7rem;

    line-height: 1.55;
}


/* =========================================================
   ABOUT FINAL
========================================================= */

.about-final {
    position: relative;

    overflow: hidden;

    padding: 100px 0;

    background: #06111d;
}

.about-final-glow {
    position: absolute;

    width: 700px;
    height: 700px;

    right: -250px;
    top: -280px;

    border-radius: 50%;

    background:
        rgba(25,160,242,.13);

    filter: blur(140px);
}

.about-final-box {
    position: relative;

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

    gap: 70px;

    padding: 58px 60px;

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

    border-radius: 24px;

    background:
        linear-gradient(
            125deg,
            #081827,
            #092136
        );
}

.about-final-box h2 {
    max-width: 700px;

    margin-top: 14px;

    font-size:
        clamp(
            2.5rem,
            4vw,
            4.2rem
        );

    line-height: .98;

    letter-spacing: -.055em;
}

.about-final-box h2 span {
    display: block;

    color: #38b6ff;
}

.about-final-box p {
    max-width: 610px;

    margin-top: 20px;

    color: #879bad;

    font-size: .87rem;

    line-height: 1.72;
}

.about-final-actions {
    min-width: 275px;

    display: flex;
    flex-direction: column;

    gap: 16px;
}

.about-final-actions .btn {
    width: 100%;
}

.about-whatsapp {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-inline: 4px;

    color: #65d58f;

    font-size: .69rem;
    font-weight: 600;
}


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

@media (max-width: 1050px) {

    .about-hero-inner {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .about-work-box {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .about-principles-grid {
        grid-template-columns:
            repeat(2,1fr);
    }

    .about-capabilities-grid {
        grid-template-columns:
            repeat(2,1fr);
    }

    .about-final-box {
        flex-direction: column;
        align-items: flex-start;
    }

    .about-final-actions {
        width: 100%;
        max-width: 390px;
    }

}


@media (max-width: 700px) {

    .about-hero {
        min-height: auto;

        padding: 125px 0 75px;
    }

    .about-hero-copy h1 {
        font-size:
            clamp(
                3rem,
                13vw,
                4.1rem
            );
    }

    .about-hero-copy > p {
        font-size: .92rem;
    }

    .about-hero-actions {
        display: grid;
        grid-template-columns: 1fr;

        width: 100%;
    }

    .about-hero-actions .btn {
        width: 100%;
        justify-content: space-between;
    }

    .about-hero-visual {
        min-height: 390px;
    }

    .about-orbit-one {
        width: 270px;
        height: 270px;
    }

    .about-orbit-two {
        width: 345px;
        height: 345px;
    }

    .about-core {
        width: 135px;
        height: 135px;
    }

    .about-float-card {
        width: 165px;

        padding: 13px 14px;
    }

    .about-card-one {
        left: -5px;
        top: 10px;
    }

    .about-card-two {
        right: -7px;
        top: 120px;
    }

    .about-card-three {
        left: 7px;
        bottom: 4px;
    }

    .about-intro,
    .about-principles,
    .about-work,
    .about-capabilities,
    .about-final {
        padding: 78px 0;
    }

    .about-intro-grid {
        grid-template-columns: 1fr;

        gap: 34px;
    }

    .about-intro h2,
    .about-principles-heading h2,
    .about-capabilities-heading h2 {
        font-size:
            clamp(
                2.5rem,
                11vw,
                3.5rem
            );
    }

    .about-principles-grid,
    .about-capabilities-grid {
        grid-template-columns: 1fr;
    }

    .about-principle {
        min-height: 255px;

        padding: 25px;
    }

    .about-work-box {
        padding: 35px 22px;

        border-radius: 20px;
    }

    .about-work-copy h2 {
        font-size:
            clamp(
                2.4rem,
                10vw,
                3.25rem
            );
    }

    .about-final-box {
        padding: 37px 23px;

        border-radius: 20px;
    }

    .about-final-box h2 {
        font-size:
            clamp(
                2.45rem,
                10.5vw,
                3.35rem
            );
    }

    .about-final-actions {
        width: 100%;
        max-width: none;
    }

}



/* =========================================================
   APP360 — MOBILE EXPERIENCE PRO V1
   Simplificación visual global para teléfonos
========================================================= */

@media (max-width: 700px) {

    /*
    |--------------------------------------------------------------------------
    | GLOBAL
    |--------------------------------------------------------------------------
    */

    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    main,
    section {
        max-width: 100%;
        overflow-x: hidden;
    }

    /*
    |--------------------------------------------------------------------------
    | PRINCIPIO MOBILE:
    | las composiciones visuales tienen su propio espacio,
    | nunca deben salirse del viewport.
    |--------------------------------------------------------------------------
    */

    .hero-visual,
    .services-hero-visual,
    .projects-hero-v2-visual,
    .about-hero-visual {
        position: relative;

        width: 100%;
        max-width: 100%;

        margin-inline: auto;

        overflow: hidden;

        transform: none !important;
    }


    /* =====================================================
       HOME
    ====================================================== */

    .hero-visual {
        min-height: 330px;

        margin-top: 38px;
    }

    /*
     * En móvil reducimos elementos decorativos
     * que puedan competir con el contenido.
     */

    .hero-visual .floating-card:nth-of-type(n+3) {
        display: none;
    }


    /* =====================================================
       SERVICIOS
    ====================================================== */

    .services-hero-visual {
        min-height: 360px;

        margin-top: 42px;

        display: grid;
        place-items: center;
    }

    .services-core {
        width: 140px;
        height: 140px;
    }

    .services-core-icon {
        font-size: 1.85rem;
    }

    .services-core strong {
        max-width: 100px;

        text-align: center;

        font-size: .62rem;
    }

    .services-orbit {
        left: 50%;
        top: 50%;

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

    .orbit-one {
        width: 230px;
        height: 230px;
    }

    .orbit-two {
        width: 310px;
        height: 310px;
    }

    /*
     * Dos tarjetas son suficientes para móvil.
     */

    .service-floating-three,
    .service-floating-four {
        display: none !important;
    }

    .service-floating-one {
        top: 18px;
        left: 4px;
    }

    .service-floating-two {
        top: auto;
        right: 4px;
        bottom: 16px;
    }


    /* =====================================================
       PROYECTOS
    ====================================================== */

    .projects-hero-v2-visual {
        min-height: 390px;

        margin-top: 37px;

        display: grid;
        place-items: center;
    }

    .projects-orbit {
        left: 50%;
        top: 50%;

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

    .projects-orbit-outer {
        width: 300px;
        height: 300px;
    }

    .projects-orbit-middle {
        width: 230px;
        height: 230px;
    }

    .projects-orbit-inner {
        width: 165px;
        height: 165px;
    }

    .projects-core {
        width: 125px;
        height: 125px;
    }

    .projects-core strong {
        font-size: 1rem;
    }

    .projects-core small {
        font-size: .58rem;
    }

    /*
     * En móvil dejamos 2 proyectos orbitando.
     * El tercero se verá después en el contenido real.
     */

    .projects-card-citas {
        display: none !important;
    }

    .projects-floating-card {
        min-width: 165px;
        max-width: 185px;

        padding:
            12px 13px;

        border-radius: 12px;
    }

    .projects-card-gm {
        top: 25px;
        left: 5px;
    }

    .projects-card-cloud {
        top: auto;
        right: 5px;
        bottom: 26px;
    }

    .orbit-dot-three {
        display: none;
    }


    /* =====================================================
       NOSOTROS
    ====================================================== */

    .about-hero-visual {
        min-height: 365px;

        margin-top: 42px;

        display: grid;
        place-items: center;
    }

    .about-orbit {
        left: 50%;
        top: 50%;

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

    .about-orbit-one {
        width: 230px;
        height: 230px;
    }

    .about-orbit-two {
        width: 305px;
        height: 305px;
    }

    .about-core {
        width: 125px;
        height: 125px;
    }

    .about-core strong {
        font-size: 1.05rem;
    }

    .about-core small {
        max-width: 95px;

        text-align: center;

        font-size: .58rem;
    }

    /*
     * Simplificamos los tres conceptos a dos.
     */

    .about-card-three {
        display: none !important;
    }

    .about-float-card {
        width: 155px;

        padding:
            13px 14px;

        border-radius: 12px;
    }

    .about-float-card strong {
        font-size: .72rem;
    }

    .about-float-card span {
        font-size: .55rem;
    }

    .about-card-one {
        top: 20px;
        left: 4px;
    }

    .about-card-two {
        top: auto;
        right: 4px;
        bottom: 18px;
    }


    /* =====================================================
       WHATSAPP
    ====================================================== */

    .whatsapp-contact {
        z-index: 999;

        right: 15px;
        bottom: 15px;
    }

    .whatsapp-tooltip {
        display: none !important;
    }

}


/* =========================================================
   SMALL PHONE — 430px
========================================================= */

@media (max-width: 430px) {

    /*
    |--------------------------------------------------------------------------
    | HERO VISUALS
    |--------------------------------------------------------------------------
    */

    .hero-visual {
        min-height: 300px;
    }

    .services-hero-visual {
        min-height: 330px;
    }

    .projects-hero-v2-visual {
        min-height: 355px;
    }

    .about-hero-visual {
        min-height: 335px;
    }


    /*
    |--------------------------------------------------------------------------
    | SERVICES
    |--------------------------------------------------------------------------
    */

    .orbit-one {
        width: 210px;
        height: 210px;
    }

    .orbit-two {
        width: 275px;
        height: 275px;
    }

    .services-core {
        width: 125px;
        height: 125px;
    }

    .service-floating-card {
        min-width: 138px;
        max-width: 150px;
    }


    /*
    |--------------------------------------------------------------------------
    | PROJECTS
    |--------------------------------------------------------------------------
    */

    .projects-orbit-outer {
        width: 270px;
        height: 270px;
    }

    .projects-orbit-middle {
        width: 210px;
        height: 210px;
    }

    .projects-orbit-inner {
        width: 145px;
        height: 145px;
    }

    .projects-core {
        width: 112px;
        height: 112px;
    }

    .projects-floating-card {
        min-width: 155px;
        max-width: 168px;
    }


    /*
    |--------------------------------------------------------------------------
    | ABOUT
    |--------------------------------------------------------------------------
    */

    .about-orbit-one {
        width: 210px;
        height: 210px;
    }

    .about-orbit-two {
        width: 275px;
        height: 275px;
    }

    .about-core {
        width: 112px;
        height: 112px;
    }

    .about-float-card {
        width: 145px;
    }

}


/* =========================================================
   VERY SMALL PHONE — 375px
========================================================= */

@media (max-width: 375px) {

    /*
     * Para pantallas realmente angostas priorizamos
     * claridad sobre ornamentación.
     */

    .services-hero-visual,
    .projects-hero-v2-visual,
    .about-hero-visual {
        min-height: 300px;
    }

    .service-floating-card,
    .projects-floating-card,
    .about-float-card {
        max-width: 140px;

        padding:
            10px 11px;
    }

    .projects-orbit-outer,
    .about-orbit-two {
        width: 245px;
        height: 245px;
    }

}



/* =========================================================
   APP360 — CONTACT PAGE PRO
========================================================= */

.contact-page {
    position: relative;

    overflow: hidden;

    padding:
        165px 0
        110px;

    background:
        linear-gradient(
            115deg,
            #06111d 0%,
            #071725 48%,
            #082238 100%
        );
}

.contact-grid-bg {
    position: absolute;
    inset: 0;

    opacity: .1;

    background-image:
        linear-gradient(
            rgba(52,177,246,.1) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(52,177,246,.1) 1px,
            transparent 1px
        );

    background-size:
        70px 70px;

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            black 35%,
            black
        );
}

.contact-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(150px);
}

.contact-glow-one {
    width: 650px;
    height: 650px;

    left: -330px;
    top: 80px;

    background:
        rgba(21,157,240,.08);
}

.contact-glow-two {
    width: 750px;
    height: 750px;

    right: -300px;
    top: -100px;

    background:
        rgba(20,157,244,.13);
}


/* =========================================================
   LAYOUT
========================================================= */

.contact-layout {
    position: relative;
    z-index: 3;

    display: grid;

    grid-template-columns:
        minmax(0,.78fr)
        minmax(560px,1.22fr);

    align-items: start;

    gap: 90px;
}


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

.contact-intro {
    position: sticky;

    top: 145px;

    padding-top: 25px;
}

.contact-intro h1 {
    max-width: 630px;

    margin-top: 23px;

    font-size:
        clamp(
            3.7rem,
            5vw,
            5.45rem
        );

    line-height: .91;

    letter-spacing: -.065em;
}

.contact-intro h1 span {
    display: block;

    margin-top: 8px;

    color: #38b6ff;
}

.contact-lead {
    max-width: 560px;

    margin-top: 28px;

    color: #96abba;

    font-size: .95rem;

    line-height: 1.8;
}


/* =========================================================
   DIRECT MESSAGE
========================================================= */

.contact-direct {
    max-width: 560px;

    display: flex;
    align-items: flex-start;

    gap: 15px;

    margin-top: 35px;

    padding:
        20px 0;

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

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

.contact-direct-icon {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border:
        1px solid rgba(48,180,251,.18);

    border-radius: 11px;

    color: #3bb8ff;

    background:
        rgba(27,160,236,.07);
}

.contact-direct small,
.contact-direct strong,
.contact-direct span {
    display: block;
}

.contact-direct small {
    color: #3db9ff;

    font-size: .49rem;
    font-weight: 800;

    letter-spacing: .15em;
}

.contact-direct strong {
    margin-top: 6px;

    color: #e9f3f8;

    font-size: .78rem;
}

.contact-direct span {
    max-width: 440px;

    margin-top: 6px;

    color: #71899b;

    font-size: .68rem;

    line-height: 1.6;
}


/* =========================================================
   CHANNELS
========================================================= */

.contact-channels {
    max-width: 560px;

    display: grid;

    gap: 9px;

    margin-top: 22px;
}

.contact-channel {
    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    gap: 14px;

    padding:
        14px 16px;

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

    border-radius: 13px;

    background:
        rgba(255,255,255,.025);

    transition:
        border-color 250ms ease,
        background 250ms ease,
        transform 250ms ease;
}

.contact-channel:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(54,181,250,.22);

    background:
        rgba(255,255,255,.04);
}

.contact-channel-icon {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    color: #3cb8fc;

    background:
        rgba(25,158,236,.08);
}

.contact-channel-icon svg {
    width: 22px;
    height: 22px;
}

.contact-channel-whatsapp {
    color: #48dc82;

    background:
        rgba(42,204,105,.08);
}

.contact-channel small,
.contact-channel strong {
    display: block;
}

.contact-channel small {
    color: #627d91;

    font-size: .46rem;
    font-weight: 700;

    letter-spacing: .12em;
}

.contact-channel strong {
    margin-top: 4px;

    color: #dceaf2;

    font-size: .7rem;
}

.contact-channel-arrow {
    color: #4bbcff;

    font-size: .75rem;
}

.contact-note {
    display: flex;
    align-items: center;

    gap: 9px;

    margin-top: 18px;

    color: #6f8798;

    font-size: .65rem;
}

.contact-note-dot {
    width: 6px;
    height: 6px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #3dd879;

    box-shadow:
        0 0 10px
        rgba(61,216,121,.4);
}


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

.contact-form-shell {
    overflow: hidden;

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

    border-radius: 24px;

    background:
        rgba(7,25,39,.86);

    box-shadow:
        0 45px 100px
        rgba(0,0,0,.30);

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

.contact-form-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 30px;

    padding:
        36px 39px
        31px;

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

    background:
        linear-gradient(
            135deg,
            rgba(30,158,235,.08),
            transparent 60%
        );
}

.contact-form-step {
    color: #3db9ff;

    font-size: .52rem;
    font-weight: 800;

    letter-spacing: .16em;
}

.contact-form-header h2 {
    margin-top: 9px;

    font-size: 1.55rem;

    letter-spacing: -.035em;
}

.contact-form-header p {
    max-width: 430px;

    margin-top: 8px;

    color: #778d9e;

    font-size: .7rem;

    line-height: 1.55;
}

.contact-form-badge {
    padding:
        8px 10px;

    border:
        1px solid rgba(54,182,250,.16);

    border-radius: 8px;

    color: #3db8fd;

    background:
        rgba(25,159,236,.06);

    font-size: .49rem;
    font-weight: 800;

    letter-spacing: .13em;
}


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

.project-form {
    padding:
        8px 39px
        39px;
}

.form-section {
    padding:
        31px 0;

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

.form-section-heading {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    margin-bottom: 22px;
}

.form-section-heading > span {
    width: 29px;
    height: 29px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 50%;

    color: #36b5ff;

    background:
        rgba(29,162,239,.08);

    font-size: .5rem;
    font-weight: 800;
}

.form-section-heading strong,
.form-section-heading small {
    display: block;
}

.form-section-heading strong {
    color: #eaf3f8;

    font-size: .79rem;
}

.form-section-heading small {
    margin-top: 3px;

    color: #698296;

    font-size: .61rem;
}

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

    gap: 16px;
}

.form-field label {
    display: block;

    margin-bottom: 7px;

    color: #a7bac7;

    font-size: .63rem;
    font-weight: 600;
}

.form-field label span {
    color: #37b7ff;
}

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

    outline: none;

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

    border-radius: 10px;

    color: #edf6fa;

    background:
        rgba(255,255,255,.035);

    font-family: inherit;
    font-size: .74rem;

    transition:
        border-color 200ms ease,
        box-shadow 200ms ease,
        background 200ms ease;
}

.form-field input {
    min-height: 48px;

    padding:
        0 14px;
}

.form-field textarea {
    min-height: 145px;

    resize: vertical;

    padding:
        13px 14px;

    line-height: 1.65;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
    color: #536b7d;
}

.form-field input:focus,
.form-field textarea:focus {
    border-color:
        rgba(45,180,253,.52);

    background:
        rgba(255,255,255,.045);

    box-shadow:
        0 0 0 3px
        rgba(27,164,241,.07);
}


/* =========================================================
   SOLUTION SELECTOR
========================================================= */

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

    gap: 9px;
}

.solution-option {
    cursor: pointer;
}

.solution-option input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;

    pointer-events: none;
}

.solution-option-ui {
    min-height: 105px;

    display: grid;

    grid-template-columns:
        38px 1fr;

    grid-template-rows:
        auto auto;

    column-gap: 11px;

    align-content: center;

    padding:
        15px;

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

    border-radius: 12px;

    background:
        rgba(255,255,255,.025);

    transition:
        border-color 220ms ease,
        background 220ms ease,
        transform 220ms ease;
}

.solution-option:hover
.solution-option-ui {
    transform:
        translateY(-2px);

    border-color:
        rgba(55,180,250,.20);
}

.solution-option-icon {
    grid-row:
        1 / span 2;

    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 9px;

    color: #3bb7fc;

    background:
        rgba(26,159,236,.08);

    font-size: .63rem;
    font-weight: 800;
}

.solution-option-ui strong {
    align-self: end;

    color: #dce9f1;

    font-size: .68rem;
}

.solution-option-ui small {
    align-self: start;

    margin-top: 4px;

    color: #657e90;

    font-size: .55rem;

    line-height: 1.4;
}

.solution-option input:checked
+ .solution-option-ui {
    border-color:
        rgba(49,182,253,.52);

    background:
        linear-gradient(
            135deg,
            rgba(26,159,238,.12),
            rgba(255,255,255,.025)
        );

    box-shadow:
        inset 0 0 0 1px
        rgba(41,174,248,.07);
}


/* =========================================================
   TEXTAREA META
========================================================= */

.textarea-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-top: 7px;

    color: #536c7f;

    font-size: .52rem;
}


/* =========================================================
   PROJECT STAGE
========================================================= */

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

    gap: 8px;
}

.project-stage label {
    cursor: pointer;
}

.project-stage input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}

.project-stage label > span {
    min-height: 44px;

    display: flex;
    align-items: center;

    padding:
        10px 13px;

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

    border-radius: 9px;

    color: #8298a8;

    background:
        rgba(255,255,255,.025);

    font-size: .6rem;

    transition:
        border-color 200ms ease,
        color 200ms ease,
        background 200ms ease;
}

.project-stage input:checked
+ span {
    border-color:
        rgba(47,181,251,.44);

    color: #dcebf3;

    background:
        rgba(27,161,238,.09);
}


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

.form-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    padding-top: 30px;
}

.form-privacy {
    max-width: 330px;

    display: flex;
    align-items: flex-start;

    gap: 8px;
}

.form-privacy > span {
    color: #46d77f;

    font-size: .6rem;
}

.form-privacy p {
    color: #5f7789;

    font-size: .55rem;

    line-height: 1.5;
}

.form-submit-button {
    min-width: 190px;

    justify-content: space-between;
}

.form-honeypot {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;

    clip: rect(0,0,0,0) !important;

    white-space: nowrap !important;
}

.form-status {
    display: none;

    margin-top: 20px;

    padding:
        12px 14px;

    border-radius: 10px;

    font-size: .65rem;

    line-height: 1.5;
}

.form-status.is-visible {
    display: block;
}

.form-status.is-error {
    color: #ffc0c0;

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

    background:
        rgba(255,74,74,.07);
}

.form-status.is-success {
    color: #9be8b8;

    border:
        1px solid rgba(67,216,125,.18);

    background:
        rgba(49,202,108,.07);
}


/* =========================================================
   TRUST STRIP
========================================================= */

.contact-trust {
    padding:
        38px 0;

    color: #122c3e;

    background: #f6f9fc;
}

.contact-trust-inner {
    display: grid;
    grid-template-columns:
        repeat(3,1fr);
}

.contact-trust-inner > div {
    display: flex;
    align-items: center;

    gap: 13px;

    padding:
        8px 30px;
}

.contact-trust-inner > div:not(:last-child) {
    border-right:
        1px solid #dde7ed;
}

.contact-trust strong {
    color: #168fd8;

    font-size: .55rem;
}

.contact-trust span {
    font-size: .72rem;
    font-weight: 600;
}


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

@media (max-width: 1050px) {

    .contact-layout {
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .contact-intro {
        position: relative;

        top: auto;

        max-width: 760px;
    }

    .contact-form-shell {
        max-width: 800px;
    }

}


/* =========================================================
   CONTACT MOBILE PRO
========================================================= */

@media (max-width: 700px) {

    .contact-page {
        padding:
            125px 0
            70px;
    }

    .contact-layout {
        gap: 42px;
    }

    .contact-intro {
        padding-top: 0;
    }

    .contact-intro h1 {
        margin-top: 21px;

        font-size:
            clamp(
                3rem,
                13vw,
                4rem
            );

        line-height: .91;
    }

    .contact-lead {
        margin-top: 25px;

        font-size: .91rem;

        line-height: 1.75;
    }

    .contact-direct {
        margin-top: 30px;
    }

    .contact-channels {
        margin-top: 18px;
    }

    .contact-form-shell {
        width: 100%;

        border-radius: 19px;
    }

    .contact-form-header {
        padding:
            27px 21px
            24px;
    }

    .contact-form-header h2 {
        font-size: 1.3rem;
    }

    .contact-form-badge {
        display: none;
    }

    .project-form {
        padding:
            3px 21px
            25px;
    }

    .form-section {
        padding:
            27px 0;
    }

    .form-grid,
    .solution-selector,
    .project-stage {
        grid-template-columns: 1fr;
    }

    .form-grid {
        gap: 13px;
    }

    .solution-selector {
        gap: 8px;
    }

    .solution-option-ui {
        min-height: 88px;
    }

    .project-stage label > span {
        min-height: 48px;
    }

    .form-submit {
        flex-direction: column;

        align-items: stretch;

        gap: 21px;
    }

    .form-submit-button {
        width: 100%;

        min-height: 56px;

        justify-content: space-between;
    }

    .textarea-meta {
        align-items: flex-start;
    }

    .contact-trust {
        padding:
            25px 0;
    }

    .contact-trust-inner {
        grid-template-columns: 1fr;
    }

    .contact-trust-inner > div {
        padding:
            14px 0;
    }

    .contact-trust-inner > div:not(:last-child) {
        border-right: 0;

        border-bottom:
            1px solid #dde7ed;
    }

}


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

@media (max-width: 430px) {

    .contact-form-header {
        padding-inline: 18px;
    }

    .project-form {
        padding-inline: 18px;
    }

    .contact-channel {
        padding:
            13px;
    }

}



/* =========================================================
   APP360 CONTACT — SUBMIT BUTTON FINAL PRO
========================================================= */

.form-submit-button {
    appearance: none;
    -webkit-appearance: none;

    min-width: 225px;
    min-height: 56px;

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

    gap: 24px;

    padding:
        0 24px;

    border: 0 !important;
    outline: none;

    border-radius: 13px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #159fff 0%,
            #0795ef 100%
        );

    box-shadow:
        0 13px 32px
        rgba(8,151,242,.22);

    font-family: inherit;
    font-size: .78rem;
    font-weight: 700;

    cursor: pointer;

    transition:
        transform 220ms ease,
        box-shadow 220ms ease,
        background 220ms ease,
        opacity 220ms ease;
}

.form-submit-button:hover {
    transform:
        translateY(-2px);

    background:
        linear-gradient(
            135deg,
            #21aaff,
            #0799f4
        );

    box-shadow:
        0 17px 40px
        rgba(8,151,242,.29);
}

.form-submit-button:active {
    transform:
        translateY(0);
}

.form-submit-button:focus,
.form-submit-button:focus-visible {
    outline: none;

    box-shadow:
        0 0 0 3px
        rgba(56,183,255,.15),
        0 13px 32px
        rgba(8,151,242,.24);
}

.form-submit-button:disabled {
    cursor: wait;

    opacity: .72;

    transform: none;
}

.form-submit-button .btn-arrow {
    font-size: 1rem;

    transition:
        transform 220ms ease;
}

.form-submit-button:hover
.btn-arrow {
    transform:
        translateX(4px);
}


/* loader */

.form-loader {
    width: 17px;
    height: 17px;

    display: inline-block;

    border:
        2px solid
        rgba(255,255,255,.30);

    border-top-color:
        #ffffff;

    border-radius: 50%;

    animation:
        app360Loader
        .7s linear infinite;
}

@keyframes app360Loader {

    to {
        transform:
            rotate(360deg);
    }

}


/* invalid */

.project-form
[aria-invalid="true"] {
    border-color:
        rgba(255,91,91,.55) !important;

    box-shadow:
        0 0 0 3px
        rgba(255,74,74,.06) !important;
}


/* mobile */

@media (max-width:700px) {

    .form-submit-button {
        width: 100%;

        min-width: 0;
        min-height: 57px;

        padding:
            0 21px;

        font-size: .82rem;
    }

}



/* =========================================================
   APP360 — GLOBAL POLISH PRO V1
========================================================= */


/* =========================================================
   DESIGN TOKENS
========================================================= */

:root {
    --app-bg: #06111d;
    --app-bg-soft: #081827;
    --app-bg-card: #0a1d2c;

    --app-blue: #159fff;
    --app-blue-light: #45beff;
    --app-blue-soft: rgba(21,159,255,.12);

    --app-green: #25d366;

    --app-text: #f4f9fd;
    --app-text-soft: #95aabb;
    --app-text-muted: #6f8496;

    --app-border-dark: rgba(255,255,255,.09);
    --app-border-light: #dce7ed;

    --app-radius-sm: 11px;
    --app-radius-md: 16px;
    --app-radius-lg: 22px;
    --app-radius-xl: 26px;

    --app-shadow-dark:
        0 30px 70px rgba(0,0,0,.26);

    --app-shadow-light:
        0 30px 75px rgba(28,65,89,.08);

    --app-section-space:
        110px;

    --app-container:
        1380px;
}


/* =========================================================
   GLOBAL RESET REFINEMENT
========================================================= */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 105px;
}

body {
    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    text-rendering: optimizeLegibility;
}

body,
button,
input,
textarea,
select {
    font-family:
        'Inter',
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        sans-serif;
}

a {
    text-decoration: none;
}

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

img,
svg {
    display: block;
}


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

.container {
    width:
        min(
            var(--app-container),
            calc(100% - 96px)
        );

    margin-inline: auto;
}


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

.site-header {
    border-bottom:
        1px solid transparent;

    transition:
        background 260ms ease,
        border-color 260ms ease,
        box-shadow 260ms ease;
}

.site-header.is-scrolled {
    border-bottom:
        1px solid rgba(255,255,255,.06);

    background:
        rgba(4,15,25,.88);

    box-shadow:
        0 15px 45px
        rgba(0,0,0,.16);

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

.header-inner {
    min-height: 92px;
}

.brand {
    flex-shrink: 0;
}

.brand-logo {
    filter:
        drop-shadow(
            0 8px 18px
            rgba(11,157,244,.08)
        );
}

.desktop-nav {
    gap: 34px;
}

.desktop-nav a {
    position: relative;

    padding:
        35px 0
        30px;

    color: #aebdca;

    font-size: .82rem;
    font-weight: 500;

    transition:
        color 220ms ease;
}

.desktop-nav a:hover,
.desktop-nav a.is-active {
    color: #ffffff;
}

.desktop-nav a::after {
    content: '';

    position: absolute;

    left: 50%;
    bottom: 20px;

    width: 0;
    height: 2px;

    transform:
        translateX(-50%);

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #159fff,
            #54c7ff
        );

    transition:
        width 220ms ease;
}

.desktop-nav a:hover::after,
.desktop-nav a.is-active::after {
    width: 100%;
}


/* =========================================================
   GLOBAL BUTTON SYSTEM
========================================================= */

.btn {
    min-height: 56px;

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

    gap: 18px;

    padding:
        0 25px;

    border:
        1px solid transparent;

    border-radius: 13px;

    font-size: .8rem;
    font-weight: 700;

    line-height: 1;

    transition:
        transform 220ms ease,
        box-shadow 220ms ease,
        border-color 220ms ease,
        background 220ms ease,
        color 220ms ease;
}

.btn-primary {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #18a2ff,
            #0794ec
        );

    box-shadow:
        0 12px 31px
        rgba(12,151,239,.21);
}

.btn-primary:hover {
    transform:
        translateY(-2px);

    background:
        linear-gradient(
            135deg,
            #2aafff,
            #079cf6
        );

    box-shadow:
        0 17px 40px
        rgba(12,151,239,.29);
}

.btn-secondary {
    color: #eef7fc;

    border-color:
        rgba(255,255,255,.19);

    background:
        rgba(255,255,255,.025);
}

.btn-secondary:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(73,190,255,.33);

    background:
        rgba(255,255,255,.05);
}

.btn-arrow {
    transition:
        transform 220ms ease;
}

.btn:hover .btn-arrow {
    transform:
        translateX(4px);
}


/* =========================================================
   EYEBROWS
========================================================= */

.hero-eyebrow,
.section-eyebrow {
    display: inline-block;

    color: #37b8ff;

    font-size: .62rem;
    font-weight: 800;

    line-height: 1.4;

    letter-spacing: .18em;

    text-transform: uppercase;
}


/* =========================================================
   GLOBAL TYPOGRAPHY RHYTHM
========================================================= */

h1,
h2,
h3,
h4 {
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

section h2 {
    letter-spacing: -.052em;
}

section p {
    color: inherit;
}


/* =========================================================
   GLOBAL LIGHT SECTIONS
========================================================= */

.services-intro,
.projects-intro,
.about-intro,
.problems-section,
.services-extra,
.services-fit,
.projects-approach,
.about-work,
.about-capabilities,
.trust-section,
.contact-trust {
    border-top:
        1px solid
        rgba(16,58,85,.035);
}


/* =========================================================
   DARK CARDS REFINEMENT
========================================================= */

.service-detail-card,
.case-study,
.about-principle,
.contact-form-shell,
.final-cta-box,
.services-final-box,
.projects-final-box,
.about-final-box {
    box-shadow:
        0 35px 80px
        rgba(0,0,0,.17);
}


/* =========================================================
   LIGHT CARDS REFINEMENT
========================================================= */

.problem-card,
.extra-service-card,
.services-fit-box,
.projects-approach-box,
.about-work-box,
.about-capability,
.trust-panel {
    box-shadow:
        0 25px 65px
        rgba(26,65,91,.055);
}


/* =========================================================
   GLOBAL SECTION RHYTHM
========================================================= */

.services-intro,
.projects-intro,
.about-intro {
    padding:
        var(--app-section-space)
        0;
}

.services-main,
.case-studies,
.about-principles {
    padding:
        var(--app-section-space)
        0
        calc(var(--app-section-space) + 10px);
}

.services-extra,
.services-fit,
.projects-approach,
.about-work,
.about-capabilities,
.problems-section,
.process-section,
.trust-section {
    padding:
        var(--app-section-space)
        0;
}


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

.services-section-heading,
.case-heading,
.process-heading {
    margin-bottom: 58px;
}

.services-extra-heading,
.about-principles-heading,
.about-capabilities-heading {
    margin-bottom: 50px;
}


/* =========================================================
   INTERACTIVE CARDS
========================================================= */

.problem-card,
.extra-service-card,
.about-principle,
.about-capability {
    transition:
        transform 260ms ease,
        border-color 260ms ease,
        box-shadow 260ms ease;
}

.problem-card:hover,
.extra-service-card:hover,
.about-principle:hover,
.about-capability:hover {
    transform:
        translateY(-4px);
}


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

.final-cta,
.services-final,
.projects-final,
.about-final {
    padding:
        105px 0;
}

.final-cta-box,
.services-final-box,
.projects-final-box,
.about-final-box {
    border-radius:
        var(--app-radius-xl);
}


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

.site-footer {
    position: relative;

    overflow: hidden;

    padding-top: 78px;

    background:
        linear-gradient(
            180deg,
            #020b12 0%,
            #020a10 100%
        );

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

.site-footer::before {
    content: '';

    position: absolute;

    width: 550px;
    height: 550px;

    left: -250px;
    top: -350px;

    border-radius: 50%;

    background:
        rgba(19,155,239,.07);

    filter: blur(120px);

    pointer-events: none;
}

.footer-main,
.footer-bottom {
    position: relative;
    z-index: 2;
}

.footer-main {
    gap: 65px;

    padding-bottom: 60px;
}

.footer-brand p {
    max-width: 360px;

    margin-top: 22px;

    color: #8296a7;

    font-size: .88rem;

    line-height: 1.8;
}

.footer-column h4 {
    margin-bottom: 18px;

    color: #f0f6fa;

    font-size: .79rem;
}

.footer-column a {
    color: #899dac;

    font-size: .76rem;

    transition:
        color 200ms ease,
        transform 200ms ease;
}

.footer-column a:hover {
    color: #3db9ff;

    transform:
        translateX(3px);
}

.footer-bottom {
    min-height: 75px;

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

    color: #607689;

    font-size: .69rem;
}


/* =========================================================
   WHATSAPP FINAL
========================================================= */

.whatsapp-button {
    isolation: isolate;
}

.whatsapp-button::before {
    content: '';

    position: absolute;
    inset: -6px;

    z-index: -1;

    border-radius: 21px;

    opacity: 0;

    background:
        rgba(37,211,102,.15);

    transition:
        opacity 220ms ease,
        transform 220ms ease;
}

.whatsapp-button:hover::before {
    opacity: 1;

    transform:
        scale(1.05);
}


/* =========================================================
   ACCESSIBILITY / FOCUS
========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline:
        2px solid
        rgba(62,186,255,.75);

    outline-offset:
        3px;
}


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

@media (max-width: 1100px) {

    :root {
        --app-section-space:
            90px;
    }

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

    .desktop-nav {
        display: none;
    }

    .header-cta {
        display: none;
    }

}


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

@media (max-width: 700px) {

    :root {
        --app-section-space:
            76px;
    }

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

    .site-header {
        height: 78px;
    }

    .header-inner {
        min-height: 78px;
    }

    .brand-logo {
        max-width: 48px;
        max-height: 48px;
    }

    .brand-wordmark {
        font-size: 1.03rem;
    }

    .btn {
        min-height: 55px;

        padding:
            0 20px;

        font-size: .81rem;
    }

    .hero-eyebrow,
    .section-eyebrow {
        font-size: .59rem;

        letter-spacing: .16em;
    }

    .services-intro,
    .projects-intro,
    .about-intro,
    .services-main,
    .case-studies,
    .about-principles,
    .services-extra,
    .services-fit,
    .projects-approach,
    .about-work,
    .about-capabilities,
    .problems-section,
    .process-section,
    .trust-section,
    .final-cta,
    .services-final,
    .projects-final,
    .about-final {
        padding:
            var(--app-section-space)
            0;
    }

    .service-detail-card,
    .case-study,
    .about-principle,
    .problem-card,
    .extra-service-card,
    .services-fit-box,
    .projects-approach-box,
    .about-work-box,
    .about-capability,
    .trust-panel,
    .final-cta-box,
    .services-final-box,
    .projects-final-box,
    .about-final-box {
        border-radius:
            18px;
    }

    .footer-main {
        gap: 38px;

        padding-bottom: 45px;
    }

    .footer-brand p {
        margin-top: 17px;

        font-size: .82rem;
    }

    .footer-column h4 {
        margin-bottom: 12px;
    }

    .footer-bottom {
        min-height: 0;

        padding:
            24px 0;
    }

}


/* =========================================================
   SMALL PHONE
========================================================= */

@media (max-width: 430px) {

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

    .btn {
        width: 100%;
    }

}



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

.footer-brand-logo {
    display: inline-flex;
    align-items: center;

    gap: 10px;
}

.footer-logo {
    width: auto;

    max-width: 58px;
    max-height: 58px;
}

.footer-wordmark {
    color: #f4f9fd;

    font-size: 1.22rem;
    font-weight: 800;

    letter-spacing: -.05em;
}

.footer-wordmark span {
    color: #169eff;
}

@media (max-width:700px) {

    .footer-logo {
        max-width: 50px;
        max-height: 50px;
    }

    .footer-wordmark {
        font-size: 1.05rem;
    }

}



/* =========================================================
   APP360 — LEGAL
========================================================= */

.legal-page {
    min-height: 70vh;

    padding:
        165px 0 110px;

    background:
        linear-gradient(
            180deg,
            #06111d 0%,
            #081827 100%
        );

    color: #f4f9fd;
}

.legal-container {
    max-width: 920px;
}

.legal-heading {
    max-width: 760px;

    margin-bottom: 60px;
}

.legal-heading h1 {
    margin:
        13px 0 20px;

    font-size:
        clamp(
            2.5rem,
            5vw,
            4.7rem
        );

    line-height: .98;

    letter-spacing: -.065em;
}

.legal-heading p {
    max-width: 680px;

    color: #9fb1bf;

    font-size: 1rem;

    line-height: 1.8;
}

.legal-content {
    display: grid;

    gap: 14px;
}

.legal-content section {
    padding: 28px 30px;

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

    border-radius: 18px;

    background:
        rgba(255,255,255,.025);
}

.legal-content h2 {
    margin-bottom: 12px;

    color: #ffffff;

    font-size: 1rem;

    letter-spacing: -.02em;
}

.legal-content p {
    margin: 0;

    color: #94a8b7;

    font-size: .87rem;

    line-height: 1.8;
}

.legal-content a {
    color: #37b8ff;
}


@media (max-width:700px) {

    .legal-page {
        padding:
            125px 0 75px;
    }

    .legal-heading {
        margin-bottom: 40px;
    }

    .legal-content section {
        padding:
            22px 20px;
    }

}



.footer-legal-link {
    padding:
        0 0 24px;

    text-align: right;
}

.footer-legal-link a {
    color: #607689;

    font-size: .68rem;

    transition:
        color 200ms ease;
}

.footer-legal-link a:hover {
    color: #3db9ff;
}

@media (max-width:700px) {

    .footer-legal-link {
        text-align: left;

        padding-bottom: 25px;
    }

}



/* =========================================================
   APP360 — 404
========================================================= */

.error-page {
    min-height: 82vh;

    display: grid;
    align-items: center;

    padding:
        150px 0 100px;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(20,156,255,.10),
            transparent 32%
        ),
        #06111d;

    color: #ffffff;

    text-align: center;
}

.error-page-inner {
    max-width: 850px;
}

.error-code {
    margin:
        10px 0 -20px;

    color:
        rgba(29,164,255,.08);

    font-size:
        clamp(
            8rem,
            23vw,
            18rem
        );

    font-weight: 800;

    line-height: .9;

    letter-spacing: -.1em;
}

.error-page h1 {
    margin: 0;

    font-size:
        clamp(
            2.1rem,
            5vw,
            4.7rem
        );

    line-height: 1;

    letter-spacing: -.06em;
}

.error-page p {
    max-width: 620px;

    margin:
        22px auto 34px;

    color: #95aabb;

    line-height: 1.8;
}

.error-actions {
    display: flex;
    justify-content: center;

    gap: 12px;
}


@media (max-width:600px) {

    .error-page {
        min-height: 75vh;

        padding:
            120px 0 75px;
    }

    .error-actions {
        flex-direction: column;
    }

}



/* =========================================================
   APP360 — HERO 360 PRO
========================================================= */

.hero360 {
    position: relative;

    min-height: 880px;

    display: flex;
    align-items: center;

    overflow: hidden;

    padding:
        150px 0 90px;

    background:
        radial-gradient(
            circle at 76% 48%,
            rgba(0,147,255,.09),
            transparent 27%
        ),
        radial-gradient(
            circle at 25% 35%,
            rgba(21,159,255,.035),
            transparent 31%
        ),
        linear-gradient(
            180deg,
            #04101b 0%,
            #061421 100%
        );
}


/* =========================================================
   BACKGROUND
========================================================= */

.hero360-grid-bg {
    position: absolute;
    inset: 0;

    opacity: .16;

    background-image:
        linear-gradient(
            rgba(58,180,255,.07) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(58,180,255,.07) 1px,
            transparent 1px
        );

    background-size:
        90px 90px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 23%,
            #000 75%,
            transparent
        );

    pointer-events: none;
}


.hero360-glow {
    position: absolute;

    border-radius: 999px;

    filter:
        blur(120px);

    pointer-events: none;
}

.hero360-glow-one {
    width: 520px;
    height: 520px;

    right: -130px;
    top: 180px;

    background:
        rgba(0,151,255,.08);
}

.hero360-glow-two {
    width: 400px;
    height: 400px;

    left: -180px;
    bottom: -120px;

    background:
        rgba(0,107,191,.07);
}


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

.hero360-inner {
    position: relative;
    z-index: 3;

    display: grid;

    grid-template-columns:
        minmax(0, .88fr)
        minmax(560px, 1.12fr);

    align-items: center;

    gap: 75px;
}


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

.hero360-content {
    position: relative;
    z-index: 10;

    max-width: 650px;
}


.hero360-eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 25px;

    color: #30b7ff;

    font-size: .64rem;
    font-weight: 800;

    letter-spacing: .24em;

    text-transform: uppercase;
}


.hero360-eyebrow-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #24b5ff;

    box-shadow:
        0 0 15px
        rgba(36,181,255,.8);
}


.hero360-title {
    max-width: 650px;

    margin: 0;

    color: #f5f9fc;

    font-size:
        clamp(
            4rem,
            5.1vw,
            6.15rem
        );

    font-weight: 800;

    line-height: .93;

    letter-spacing: -.075em;
}


.hero360-title span {
    display: block;

    color: #159fff;

    background:
        linear-gradient(
            135deg,
            #44c4ff,
            #058cf0
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}


.hero360-description {
    max-width: 610px;

    margin:
        32px 0 0;

    color: #9cafbe;

    font-size: 1rem;

    line-height: 1.78;
}


.hero360-actions {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 37px;
}


.hero360-primary {
    min-width: 228px;
}

.hero360-secondary {
    min-width: 220px;
}


/* =========================================================
   VALUES
========================================================= */

.hero360-values {
    display: grid;

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

    gap: 0;

    margin-top: 58px;
}


.hero360-value {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 12px;

    padding-right: 20px;
}


.hero360-value +
.hero360-value {
    padding-left: 22px;

    border-left:
        1px solid
        rgba(255,255,255,.10);
}


.hero360-value-icon {
    flex:
        0 0 auto;

    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    color: #159fff;
}


.hero360-value-icon svg {
    width: 27px;
    height: 27px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.hero360-value strong,
.hero360-value span {
    display: block;
}


.hero360-value strong {
    color: #dce8f0;

    font-size: .69rem;

    font-weight: 700;
}


.hero360-value span {
    margin-top: 3px;

    color: #73899a;

    font-size: .61rem;
}


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

.hero360-visual {
    position: relative;

    min-height: 650px;

    display: grid;
    place-items: center;

    isolation: isolate;
}


/* =========================================================
   SPHERE
========================================================= */

.hero360-sphere {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 440px;
    height: 440px;

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

    border:
        1px solid
        rgba(74,194,255,.52);

    border-radius: 50%;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 36% 29%,
            rgba(55,191,255,.40),
            transparent 10%
        ),
        radial-gradient(
            circle at 48% 49%,
            rgba(2,70,120,.95),
            #031c30 50%,
            #010b13 78%
        );

    box-shadow:
        inset -55px -50px 90px
        rgba(0,0,0,.82),

        inset 25px 20px 50px
        rgba(43,179,255,.12),

        0 0 38px
        rgba(19,168,255,.24),

        0 0 110px
        rgba(0,126,215,.12);

    animation:
        hero360Float
        6.5s ease-in-out infinite;
}


.hero360-sphere::before {
    content: '';

    position: absolute;

    inset: 8% -15%;

    border:
        1px solid
        rgba(57,184,255,.14);

    border-radius: 50%;

    transform:
        rotate(-18deg);
}


.hero360-sphere::after {
    content: '';

    position: absolute;

    left: 8%;
    right: 8%;
    top: 50%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(49,189,255,.25),
            transparent
        );

    box-shadow:
        0 -70px 0
        rgba(49,189,255,.09),
        0 70px 0
        rgba(49,189,255,.09);
}


/* LATITUDE / LONGITUDE */

.hero360-sphere-grid {
    position: absolute;
    inset: 0;

    border-radius: inherit;

    opacity: .48;

    background:
        repeating-radial-gradient(
            ellipse at center,
            transparent 0,
            transparent 34px,
            rgba(35,177,255,.07) 35px,
            transparent 36px
        );
}


/* abstract continents */

.hero360-continent {
    position: absolute;

    opacity: .45;

    filter:
        drop-shadow(
            0 0 10px
            rgba(45,189,255,.4)
        );
}


.hero360-continent-one {
    width: 170px;
    height: 230px;

    right: 68px;
    top: 95px;

    transform:
        rotate(-15deg);

    border-radius:
        42% 58% 45% 55%
        / 32% 40% 60% 68%;

    background:
        linear-gradient(
            145deg,
            rgba(50,177,242,.22),
            rgba(24,90,133,.06)
        );

    clip-path:
        polygon(
            38% 0,
            72% 10%,
            88% 28%,
            73% 42%,
            88% 57%,
            63% 69%,
            54% 100%,
            36% 88%,
            30% 63%,
            8% 45%,
            26% 31%
        );
}


.hero360-continent-two {
    width: 130px;
    height: 110px;

    left: 75px;
    top: 90px;

    transform:
        rotate(10deg);

    background:
        rgba(54,179,239,.13);

    clip-path:
        polygon(
            0 32%,
            30% 5%,
            72% 11%,
            100% 43%,
            75% 85%,
            35% 100%,
            11% 72%
        );
}


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

.hero360-core {
    position: absolute;

    left: 50%;
    top: 50%;

    z-index: 10;

    width: 160px;
    height: 160px;

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

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

    border:
        1px solid
        rgba(90,207,255,.48);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(17,111,177,.58),
            rgba(3,28,48,.76)
        );

    box-shadow:
        0 0 35px
        rgba(30,179,255,.26),

        inset 0 0 30px
        rgba(62,191,255,.12);
}


.hero360-core strong {
    color: #bfeaff;

    font-size: 3.05rem;
    font-weight: 800;

    line-height: .9;

    letter-spacing: -.06em;

    text-shadow:
        0 0 22px
        rgba(53,186,255,.6);
}


.hero360-core small {
    margin-top: 10px;

    color: #48bcff;

    font-size: .58rem;
    font-weight: 800;

    letter-spacing: .24em;
}


/* circular arrow */

.hero360-core-arrow {
    position: absolute;

    inset: -16px;

    border:
        2px solid
        transparent;

    border-top-color:
        #39bdff;

    border-right-color:
        rgba(57,189,255,.35);

    border-radius: 50%;

    animation:
        hero360Rotate
        9s linear infinite;
}


.hero360-core-arrow::after {
    content: '';

    position: absolute;

    right: 15px;
    top: 15px;

    width: 9px;
    height: 9px;

    border-top:
        2px solid #39bdff;

    border-right:
        2px solid #39bdff;

    transform:
        rotate(24deg);
}


/* =========================================================
   ORBITS
========================================================= */

.hero360-orbit {
    position: absolute;

    left: 50%;
    top: 50%;

    border:
        1px solid
        rgba(30,172,255,.40);

    border-radius: 50%;

    pointer-events: none;
}


.hero360-orbit-one {
    width: 560px;
    height: 260px;

    transform:
        translate(-50%, -50%)
        rotate(-13deg);

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


.hero360-orbit-two {
    width: 525px;
    height: 355px;

    transform:
        translate(-50%, -50%)
        rotate(28deg);
}


.hero360-orbit-three {
    width: 610px;
    height: 450px;

    opacity: .30;

    transform:
        translate(-50%, -50%)
        rotate(-35deg);
}


.hero360-orbit-dot {
    position: absolute;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: #5ad3ff;

    box-shadow:
        0 0 18px
        #1aaeff;
}


.dot-one {
    left: 4%;
    top: 45%;
}

.dot-two {
    right: 7%;
    top: 20%;
}

.dot-three {
    left: 17%;
    bottom: 9%;
}


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

.hero360-card {
    position: absolute;

    z-index: 15;

    min-width: 174px;

    display: flex;
    align-items: center;

    gap: 12px;

    padding:
        14px 16px;

    border:
        1px solid
        rgba(112,190,239,.23);

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(17,43,65,.90),
            rgba(6,29,47,.82)
        );

    box-shadow:
        0 18px 40px
        rgba(0,0,0,.24);

    backdrop-filter:
        blur(15px);

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


.hero360-card strong,
.hero360-card span {
    display: block;
}


.hero360-card strong {
    color: #e4f3fb;

    font-size: .68rem;
    font-weight: 700;
}


.hero360-card span {
    margin-top: 3px;

    color: #89a3b5;

    font-size: .59rem;
}


.hero360-card-icon {
    flex:
        0 0 auto;

    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    color: #66c8ff;

    background:
        rgba(36,158,232,.10);

    font-size: .9rem;
    font-weight: 800;
}


.hero360-card-code {
    left: 5%;
    top: 14%;

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


.hero360-card-automation {
    right: 0;
    top: 18%;

    animation:
        hero360CardFloatB
        6.1s ease-in-out infinite;
}


.hero360-card-integration {
    left: -3%;
    top: 54%;

    animation:
        hero360CardFloatB
        6.8s ease-in-out infinite;
}


.hero360-card-data {
    right: -2%;
    bottom: 17%;

    animation:
        hero360CardFloatA
        6.4s ease-in-out infinite;
}


/* =========================================================
   SIGNATURE
========================================================= */

.hero360-signature {
    position: absolute;

    right: 1%;
    bottom: 5%;

    display: flex;
    flex-direction: column;

    transform:
        rotate(-5deg);

    color: #83d5ff;
}


.hero360-signature span {
    font-size: .64rem;

    opacity: .70;
}


.hero360-signature strong {
    margin-top: 3px;

    font-size: .92rem;

    font-weight: 500;

    font-style: italic;
}


/* =========================================================
   BOTTOM
========================================================= */

.hero360-bottom-line {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(49,177,245,.16),
            transparent
        );
}


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

@keyframes hero360Rotate {

    to {
        transform:
            rotate(360deg);
    }

}


@keyframes hero360Float {

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

    50% {
        transform:
            translate(-50%, -50%)
            translateY(-10px);
    }

}


@keyframes hero360Pulse {

    0%,
    100% {
        opacity: .65;
    }

    50% {
        opacity: 1;
    }

}


@keyframes hero360CardFloatA {

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

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

}


@keyframes hero360CardFloatB {

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

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

}


/* =========================================================
   LAPTOP / SMALL DESKTOP
========================================================= */

@media (max-width: 1250px) {

    .hero360-inner {
        grid-template-columns:
            minmax(0, .95fr)
            minmax(480px, 1.05fr);

        gap: 40px;
    }

    .hero360-sphere {
        width: 390px;
        height: 390px;
    }

    .hero360-orbit-one {
        width: 500px;
    }

    .hero360-orbit-two {
        width: 470px;
    }

    .hero360-orbit-three {
        width: 535px;
    }

}


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

@media (max-width: 1000px) {

    .hero360 {
        min-height: auto;

        padding:
            140px 0 75px;
    }

    .hero360-inner {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .hero360-content {
        max-width: 760px;

        text-align: center;

        margin-inline: auto;
    }

    .hero360-eyebrow {
        justify-content: center;
    }

    .hero360-title {
        max-width: 760px;

        margin-inline: auto;

        font-size:
            clamp(
                3.6rem,
                8vw,
                5.6rem
            );
    }

    .hero360-description {
        max-width: 620px;

        margin-inline: auto;
        margin-top: 28px;
    }

    .hero360-actions {
        justify-content: center;
    }

    .hero360-values {
        max-width: 650px;

        margin-inline: auto;
        margin-top: 50px;
    }

    .hero360-visual {
        width: 100%;

        min-height: 580px;

        margin-top: 5px;
    }

}


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

@media (max-width: 700px) {

    .hero360 {
        padding:
            118px 0 58px;
    }

    .hero360-inner {
        width:
            calc(100% - 40px);

        gap: 22px;
    }

    .hero360-content {
        text-align: left;
    }

    .hero360-eyebrow {
        justify-content: flex-start;

        margin-bottom: 19px;

        font-size: .56rem;

        letter-spacing: .18em;
    }

    .hero360-title {
        margin: 0;

        font-size:
            clamp(
                3rem,
                14vw,
                4.2rem
            );

        line-height: .94;

        letter-spacing: -.069em;
    }

    .hero360-description {
        margin:
            24px 0 0;

        font-size: .89rem;

        line-height: 1.7;
    }

    .hero360-actions {
        display: grid;

        grid-template-columns: 1fr;

        gap: 10px;

        margin-top: 29px;
    }

    .hero360-primary,
    .hero360-secondary {
        width: 100%;

        min-width: 0;
    }


    /* value chips */

    .hero360-values {
        width: 100%;

        display: grid;

        grid-template-columns: 1fr;

        gap: 12px;

        margin-top: 35px;
    }

    .hero360-value,
    .hero360-value +
    .hero360-value {
        padding:
            0;

        border:
            0;
    }

    .hero360-value {
        min-height: 49px;

        padding:
            9px 12px !important;

        border:
            1px solid
            rgba(255,255,255,.065) !important;

        border-radius: 11px;

        background:
            rgba(255,255,255,.018);
    }


    /* visual */

    .hero360-visual {
        min-height: 410px;

        margin-top: 14px;

        overflow: hidden;
    }

    .hero360-sphere {
        width: 280px;
        height: 280px;
    }

    .hero360-core {
        width: 105px;
        height: 105px;
    }

    .hero360-core strong {
        font-size: 2.05rem;
    }

    .hero360-core small {
        font-size: .48rem;
    }

    .hero360-core-arrow {
        inset: -11px;
    }

    .hero360-orbit-one {
        width: 365px;
        height: 180px;
    }

    .hero360-orbit-two {
        width: 340px;
        height: 250px;
    }

    .hero360-orbit-three {
        width: 390px;
        height: 315px;
    }


    /* only two floating cards */

    .hero360-card {
        min-width: 140px;

        max-width: 150px;

        padding:
            10px 11px;

        gap: 8px;

        border-radius: 11px;
    }

    .hero360-card-icon {
        width: 29px;
        height: 29px;

        font-size: .72rem;
    }

    .hero360-card strong {
        font-size: .59rem;
    }

    .hero360-card span {
        font-size: .52rem;
    }

    .hero360-card-code {
        left: 0;
        top: 10%;
    }

    .hero360-card-automation {
        right: 0;
        top: auto;
        bottom: 11%;
    }

    .hero360-card-integration,
    .hero360-card-data {
        display: none;
    }

    .hero360-signature {
        display: none;
    }

}


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

@media (max-width: 430px) {

    .hero360-inner {
        width:
            calc(100% - 36px);
    }

    .hero360-title {
        font-size:
            clamp(
                2.85rem,
                14.5vw,
                3.55rem
            );
    }

    .hero360-visual {
        min-height: 375px;
    }

    .hero360-sphere {
        width: 250px;
        height: 250px;
    }

    .hero360-core {
        width: 92px;
        height: 92px;
    }

    .hero360-core strong {
        font-size: 1.8rem;
    }

    .hero360-orbit-one {
        width: 320px;
    }

    .hero360-orbit-two {
        width: 300px;
        height: 220px;
    }

    .hero360-orbit-three {
        width: 340px;
        height: 275px;
    }

    .hero360-card {
        min-width: 128px;

        max-width: 137px;
    }

}


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

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

    .hero360-sphere,
    .hero360-core-arrow,
    .hero360-orbit-one,
    .hero360-card {
        animation:
            none !important;
    }

}



/* =========================================================
   APP360 — HERO 360 V2 FINAL POLISH
========================================================= */

/* Más presencia para el universo 360 */

.hero360-visual {
    transform: translateX(12px);
}


/* Planeta más visible */

.hero360-sphere {
    background:
        radial-gradient(
            circle at 38% 31%,
            rgba(64,198,255,.55),
            transparent 12%
        ),
        radial-gradient(
            circle at 47% 46%,
            rgba(6,93,154,.98),
            #042943 42%,
            #021522 69%,
            #010b12 88%
        );

    border-color:
        rgba(64,193,255,.62);

    box-shadow:
        inset -48px -45px 85px
        rgba(0,0,0,.72),

        inset 30px 22px 60px
        rgba(57,193,255,.17),

        0 0 45px
        rgba(24,174,255,.28),

        0 0 130px
        rgba(0,139,235,.16);
}


/* Halo exterior */

.hero360-sphere::before {
    border-color:
        rgba(75,202,255,.23);

    box-shadow:
        0 0 28px
        rgba(30,174,255,.10);
}


/* Continentes más visibles */

.hero360-continent {
    opacity: .72;

    filter:
        drop-shadow(
            0 0 13px
            rgba(57,195,255,.45)
        );
}

.hero360-continent-one {
    background:
        linear-gradient(
            145deg,
            rgba(70,194,255,.32),
            rgba(22,101,151,.12)
        );
}

.hero360-continent-two {
    background:
        rgba(64,190,248,.22);
}


/* Centro 360 más premium */

.hero360-core {
    background:
        radial-gradient(
            circle,
            rgba(18,123,196,.74),
            rgba(2,34,57,.88)
        );

    box-shadow:
        0 0 45px
        rgba(31,182,255,.35),

        inset 0 0 35px
        rgba(71,203,255,.17);
}

.hero360-core strong {
    color: #d5f3ff;

    text-shadow:
        0 0 26px
        rgba(59,196,255,.70);
}


/* Órbitas más tecnológicas */

.hero360-orbit {
    border-color:
        rgba(32,178,255,.48);

    box-shadow:
        0 0 10px
        rgba(15,151,232,.04);
}


/* Cards */

.hero360-card {
    border-color:
        rgba(97,194,250,.30);

    background:
        linear-gradient(
            145deg,
            rgba(14,48,73,.94),
            rgba(5,27,44,.91)
        );

    box-shadow:
        0 18px 45px
        rgba(0,0,0,.29),

        inset 0 1px 0
        rgba(255,255,255,.025);
}


/* Reposicionar cards */

.hero360-card-code {
    left: 3%;
    top: 12%;
}

.hero360-card-automation {
    right: -1%;
    top: 18%;
}

.hero360-card-integration {
    left: -5%;
    top: 55%;
}

/*
 * Esta estaba quedando detrás del WhatsApp.
 */

.hero360-card-data {
    right: 4%;
    bottom: 8%;
}


/* Firma */

.hero360-signature {
    right: 7%;
    bottom: 1%;

    color: #5ec9ff;
}


/* Más profundidad */

.hero360-visual::before {
    content: '';

    position: absolute;

    left: 50%;
    top: 50%;

    width: 560px;
    height: 560px;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(12,150,238,.08),
            transparent 66%
        );

    filter:
        blur(10px);

    pointer-events: none;
}


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

@media (max-width:1000px) {

    .hero360-visual {
        transform: none;

        max-width: 720px;

        margin-inline: auto;
    }

    .hero360-card-code {
        left: 5%;
    }

    .hero360-card-automation {
        right: 5%;
    }

    .hero360-card-integration {
        left: 3%;
    }

    .hero360-card-data {
        right: 5%;
        bottom: 12%;
    }

}


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

@media (max-width:700px) {

    .hero360-visual {
        transform: none;
    }

    .hero360-visual::before {
        width: 350px;
        height: 350px;
    }

    /*
     * En móvil mantenemos sólo dos capacidades.
     * Mucho más limpio.
     */

    .hero360-card-code {
        left: 0;
        top: 7%;
    }

    .hero360-card-automation {
        right: 0;
        bottom: 7%;
        top: auto;
    }

    .hero360-card-integration,
    .hero360-card-data {
        display: none !important;
    }

}


/* =========================================================
   SMALL PHONE
========================================================= */

@media (max-width:430px) {

    .hero360-visual::before {
        width: 300px;
        height: 300px;
    }

}


/* =========================================================
   WHATSAPP — HOME HERO COLLISION PROTECTION
========================================================= */

@media (min-width:1001px) {

    body[data-page="index.php"]
    .whatsapp-contact {
        bottom: 25px;
    }

}



/* =========================================================
   APP360 — CINEMATIC HERO FINAL
========================================================= */

.hero360-cinematic {
    min-height: 930px;

    padding:
        155px 0 0;

    background:
        radial-gradient(
            circle at 72% 43%,
            rgba(0,148,255,.13),
            transparent 32%
        ),
        radial-gradient(
            circle at 28% 45%,
            rgba(0,95,170,.055),
            transparent 31%
        ),
        linear-gradient(
            180deg,
            #03101b 0%,
            #041521 70%,
            #020a10 100%
        );
}


/* =========================================================
   STAR FIELD
========================================================= */

.hero360-stars {
    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: .70;

    background-image:

        radial-gradient(
            circle at 8% 20%,
            rgba(80,195,255,.8) 0 1px,
            transparent 1.5px
        ),

        radial-gradient(
            circle at 23% 14%,
            rgba(80,195,255,.48) 0 1px,
            transparent 1.5px
        ),

        radial-gradient(
            circle at 41% 8%,
            rgba(80,195,255,.5) 0 1px,
            transparent 1.5px
        ),

        radial-gradient(
            circle at 57% 19%,
            rgba(80,195,255,.75) 0 1px,
            transparent 1.5px
        ),

        radial-gradient(
            circle at 78% 9%,
            rgba(80,195,255,.5) 0 1px,
            transparent 1.5px
        ),

        radial-gradient(
            circle at 92% 30%,
            rgba(80,195,255,.7) 0 1px,
            transparent 1.5px
        );
}


/* =========================================================
   LAYOUT
========================================================= */

.hero360-cinematic .hero360-inner {
    grid-template-columns:
        minmax(0,.80fr)
        minmax(630px,1.20fr);

    gap: 48px;

    align-items: center;
}


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

.hero360-cinematic .hero360-content {
    max-width: 610px;

    padding-bottom: 130px;
}


.hero360-cinematic .hero360-title {
    font-size:
        clamp(
            4.2rem,
            5vw,
            5.7rem
        );

    max-width: 610px;

    line-height: .94;
}


.hero360-cinematic .hero360-title span {
    display: block;

    margin-top: 5px;

    background:
        linear-gradient(
            135deg,
            #36c0ff,
            #0094f5
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}


.hero360-cinematic .hero360-description {
    max-width: 570px;

    margin-top: 30px;

    color: #9db0bf;

    font-size: .98rem;
}


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

.hero360-cinematic .hero360-visual {
    min-height: 690px;

    transform:
        translate(28px,-15px);
}


/* =========================================================
   PLANET
========================================================= */

.hero360-cinematic .hero360-sphere {
    width: 485px;
    height: 485px;

    background:

        radial-gradient(
            circle at 68% 19%,
            rgba(103,211,255,.75),
            transparent 7%
        ),

        radial-gradient(
            circle at 38% 29%,
            rgba(50,178,255,.48),
            transparent 14%
        ),

        radial-gradient(
            circle at 52% 47%,
            rgba(3,93,160,.98),
            #052c49 41%,
            #021521 70%,
            #01080d 92%
        );

    border:
        1px solid
        rgba(87,209,255,.64);

    box-shadow:

        inset -70px -45px 95px
        rgba(0,0,0,.83),

        inset 38px 20px 75px
        rgba(64,199,255,.18),

        0 0 22px
        rgba(74,203,255,.46),

        0 0 80px
        rgba(19,163,255,.24),

        0 0 180px
        rgba(7,125,213,.15);
}


/* Atmospheric rim */

.hero360-cinematic
.hero360-sphere::before {
    inset: -4px;

    border:
        3px solid
        transparent;

    border-top-color:
        rgba(132,227,255,.58);

    border-right-color:
        rgba(45,175,247,.28);

    box-shadow:
        0 -5px 24px
        rgba(67,202,255,.20);

    transform:
        rotate(-13deg);
}


/* =========================================================
   WORLD LIGHTS
========================================================= */

.hero360-night-lights {
    position: absolute;

    inset: 0;

    z-index: 3;

    border-radius: 50%;

    opacity: .62;

    background-image:

        radial-gradient(
            circle at 62% 35%,
            #a7e8ff 0 1px,
            transparent 2px
        ),

        radial-gradient(
            circle at 65% 38%,
            #36c2ff 0 1px,
            transparent 2px
        ),

        radial-gradient(
            circle at 58% 44%,
            #7ddaff 0 1px,
            transparent 2px
        ),

        radial-gradient(
            circle at 70% 49%,
            #26b3ff 0 1px,
            transparent 2px
        ),

        radial-gradient(
            circle at 43% 61%,
            #43c3ff 0 1px,
            transparent 2px
        ),

        radial-gradient(
            circle at 50% 69%,
            #9ae5ff 0 1px,
            transparent 2px
        );

    filter:
        drop-shadow(
            0 0 5px
            rgba(46,192,255,.9)
        );
}


/* =========================================================
   CONTINENTS
========================================================= */

.hero360-cinematic
.hero360-continent-one {

    width: 190px;
    height: 280px;

    right: 80px;
    top: 105px;

    opacity: .82;

    background:
        linear-gradient(
            145deg,
            rgba(64,194,255,.32),
            rgba(8,73,115,.14)
        );

    filter:
        drop-shadow(
            0 0 16px
            rgba(37,179,255,.30)
        );
}


.hero360-cinematic
.hero360-continent-two {

    width: 170px;
    height: 120px;

    left: 60px;
    top: 82px;

    opacity: .62;

    background:
        rgba(66,192,247,.22);
}


/* =========================================================
   CORE 360
========================================================= */

.hero360-cinematic
.hero360-core {

    width: 154px;
    height: 154px;

    background:
        radial-gradient(
            circle,
            rgba(6,76,129,.84),
            rgba(0,18,31,.87)
        );

    border:
        1px solid
        rgba(102,216,255,.55);

    box-shadow:

        0 0 35px
        rgba(30,184,255,.48),

        0 0 75px
        rgba(0,138,227,.22),

        inset 0 0 28px
        rgba(65,204,255,.18);
}


.hero360-cinematic
.hero360-core strong {

    font-size: 3.1rem;

    color: #ecfaff;

    text-shadow:
        0 0 24px
        rgba(62,202,255,.75);
}


/* =========================================================
   WORLD GLOW
========================================================= */

.hero360-world-glow {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 620px;
    height: 620px;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0,162,255,.11),
            transparent 68%
        );

    filter:
        blur(12px);

    pointer-events: none;
}


/* =========================================================
   ORBITS
========================================================= */

.hero360-cinematic
.hero360-orbit {

    border-color:
        rgba(32,184,255,.54);

    filter:
        drop-shadow(
            0 0 4px
            rgba(44,192,255,.20)
        );
}


.hero360-cinematic
.hero360-orbit-one {

    width: 610px;
    height: 270px;
}


.hero360-cinematic
.hero360-orbit-two {

    width: 575px;
    height: 390px;
}


.hero360-cinematic
.hero360-orbit-three {

    width: 660px;
    height: 480px;
}


/* =========================================================
   FLOAT CARDS
========================================================= */

.hero360-cinematic
.hero360-card {

    min-width: 180px;

    padding:
        15px 17px;

    border-color:
        rgba(80,190,249,.35);

    background:
        linear-gradient(
            145deg,
            rgba(13,49,77,.95),
            rgba(3,27,45,.90)
        );

    box-shadow:

        0 15px 40px
        rgba(0,0,0,.34),

        inset 0 1px 0
        rgba(255,255,255,.03);

    backdrop-filter:
        blur(18px);

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


.hero360-cinematic
.hero360-card-icon {

    color: #72d1ff;

    background:
        rgba(21,156,234,.13);
}


.hero360-cinematic
.hero360-card-code {

    left: 5%;
    top: 9%;
}


.hero360-cinematic
.hero360-card-automation {

    right: -1%;
    top: 12%;
}


.hero360-cinematic
.hero360-card-integration {

    left: -2%;
    top: 46%;
}


.hero360-cinematic
.hero360-card-data {

    left: 11%;
    right: auto;

    bottom: 11%;
}


.hero360-card-industry {

    position: absolute;

    right: 1%;
    bottom: 11%;

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


/* =========================================================
   SIGNATURE
========================================================= */

.hero360-cinematic
.hero360-signature {

    right: -1%;
    bottom: 25%;

    color: #70ceff;

    transform:
        rotate(-7deg);
}


.hero360-cinematic
.hero360-signature span {

    font-size: .70rem;
}


.hero360-cinematic
.hero360-signature strong {

    font-size: 1rem;
}


/* =========================================================
   LANDSCAPE
========================================================= */

.hero360-landscape {

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 190px;

    overflow: hidden;

    pointer-events: none;

    z-index: 1;
}


.hero360-mountain {

    position: absolute;

    bottom: -75px;

    background:
        linear-gradient(
            180deg,
            #071722,
            #02080c
        );

    filter:
        drop-shadow(
            0 -4px 9px
            rgba(15,88,130,.08)
        );
}


.mountain-one {

    width: 55%;
    height: 220px;

    left: 27%;

    clip-path:
        polygon(
            0 100%,
            14% 68%,
            29% 59%,
            38% 37%,
            50% 49%,
            61% 32%,
            74% 61%,
            86% 54%,
            100% 100%
        );
}


.mountain-two {

    width: 52%;
    height: 170px;

    right: -6%;

    opacity: .72;

    clip-path:
        polygon(
            0 100%,
            12% 71%,
            25% 62%,
            39% 38%,
            50% 57%,
            69% 34%,
            81% 69%,
            100% 100%
        );
}


.mountain-three {

    width: 43%;
    height: 135px;

    left: -8%;

    opacity: .62;

    clip-path:
        polygon(
            0 100%,
            23% 57%,
            41% 72%,
            58% 39%,
            77% 65%,
            100% 100%
        );
}


/* =========================================================
   TECH STACK
========================================================= */

.hero360-tech {

    position: relative;

    z-index: 7;

    min-height: 100px;

    display: grid;

    grid-template-columns:
        130px 1fr;

    align-items: center;

    gap: 45px;

    margin-top: -105px;

    padding-bottom: 25px;
}


.hero360-tech-title {

    color: #8196a7;

    font-size: .56rem;

    font-weight: 700;

    line-height: 1.7;

    letter-spacing: .16em;
}


.hero360-tech-title span {
    display: block;
}


.hero360-tech-items {

    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap:
        34px;

    color:
        rgba(205,222,233,.55);
}


.hero360-tech-items span {

    font-size: .78rem;

    font-weight: 700;

    letter-spacing: -.02em;

    transition:
        color 200ms ease,
        transform 200ms ease;
}


.hero360-tech-items span:hover {

    color: #55c7ff;

    transform:
        translateY(-2px);
}


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

@media (max-width:1000px) {

    .hero360-cinematic {

        min-height: auto;

        padding:
            135px 0 0;
    }


    .hero360-cinematic
    .hero360-inner {

        grid-template-columns:
            1fr;

        gap: 20px;
    }


    .hero360-cinematic
    .hero360-content {

        max-width: 760px;

        padding-bottom: 20px;

        margin-inline: auto;

        text-align: center;
    }


    .hero360-cinematic
    .hero360-title {

        max-width: 760px;

        margin-inline: auto;
    }


    .hero360-cinematic
    .hero360-description {

        margin-inline: auto;

        margin-top: 28px;
    }


    .hero360-cinematic
    .hero360-actions {

        justify-content: center;
    }


    .hero360-cinematic
    .hero360-values {

        max-width: 650px;

        margin-inline: auto;

        margin-top: 45px;
    }


    .hero360-cinematic
    .hero360-visual {

        min-height: 600px;

        max-width: 720px;

        margin-inline: auto;

        transform: none;
    }


    .hero360-cinematic
    .hero360-card-code {

        left: 2%;
    }


    .hero360-cinematic
    .hero360-card-automation {

        right: 2%;
    }


    .hero360-cinematic
    .hero360-card-integration {

        left: 0;
    }


    .hero360-cinematic
    .hero360-card-data {

        left: 6%;
    }


    .hero360-card-industry {

        right: 3%;
    }


    .hero360-cinematic
    .hero360-signature {

        display: none;
    }


    .hero360-tech {

        margin-top: -35px;

        grid-template-columns: 1fr;

        gap: 16px;

        text-align: center;

        padding-bottom: 35px;
    }


    .hero360-tech-title {

        display: none;
    }


    .hero360-tech-items {

        justify-content: center;
    }

}


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

@media (max-width:700px) {

    .hero360-cinematic {

        padding:
            115px 0 0;
    }


    .hero360-cinematic
    .hero360-content {

        text-align: left;
    }


    .hero360-cinematic
    .hero360-title {

        font-size:
            clamp(
                3rem,
                14vw,
                4rem
            );

        margin: 0;
    }


    .hero360-cinematic
    .hero360-description {

        margin:
            23px 0 0;

        font-size: .88rem;
    }


    .hero360-cinematic
    .hero360-actions {

        display: grid;

        grid-template-columns: 1fr;

        margin-top: 28px;
    }


    .hero360-cinematic
    .hero360-values {

        margin-top: 32px;
    }


    .hero360-cinematic
    .hero360-visual {

        min-height: 430px;

        overflow: hidden;

        margin-top: 8px;
    }


    .hero360-cinematic
    .hero360-sphere {

        width: 275px;
        height: 275px;
    }


    .hero360-cinematic
    .hero360-core {

        width: 100px;
        height: 100px;
    }


    .hero360-cinematic
    .hero360-core strong {

        font-size: 2rem;
    }


    .hero360-cinematic
    .hero360-world-glow {

        width: 350px;
        height: 350px;
    }


    .hero360-cinematic
    .hero360-orbit-one {

        width: 360px;
        height: 180px;
    }


    .hero360-cinematic
    .hero360-orbit-two {

        width: 340px;
        height: 245px;
    }


    .hero360-cinematic
    .hero360-orbit-three {

        width: 385px;
        height: 315px;
    }


    /*
     * En celular dejamos sólo dos tarjetas:
     * evita ruido y mantiene la experiencia premium.
     */

    .hero360-cinematic
    .hero360-card-code {

        display: flex;

        left: 0;
        top: 8%;
    }


    .hero360-cinematic
    .hero360-card-automation {

        display: flex;

        right: 0;
        top: auto;
        bottom: 7%;
    }


    .hero360-cinematic
    .hero360-card-integration,

    .hero360-cinematic
    .hero360-card-data,

    .hero360-card-industry {

        display: none !important;
    }


    .hero360-landscape {

        height: 100px;
    }


    .hero360-tech {

        margin-top: -15px;

        padding:
            12px 0 30px;
    }


    .hero360-tech-items {

        gap:
            12px 22px;
    }


    .hero360-tech-items span {

        font-size: .67rem;
    }

}


/* =========================================================
   SMALL PHONE
========================================================= */

@media (max-width:430px) {

    .hero360-cinematic
    .hero360-visual {

        min-height: 390px;
    }


    .hero360-cinematic
    .hero360-sphere {

        width: 245px;
        height: 245px;
    }


    .hero360-cinematic
    .hero360-core {

        width: 88px;
        height: 88px;
    }


    .hero360-cinematic
    .hero360-core strong {

        font-size: 1.75rem;
    }


    .hero360-cinematic
    .hero360-card {

        min-width: 128px;

        max-width: 140px;
    }

}


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

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

    .hero360-cinematic
    .hero360-sphere,

    .hero360-cinematic
    .hero360-card,

    .hero360-cinematic
    .hero360-core-arrow {

        animation:
            none !important;
    }

}



/* =========================================================
   APP360 — HERO CINEMATIC DESKTOP FIX FINAL
   Corrige conflictos acumulados de versiones anteriores
========================================================= */

.hero360-cinematic {
    position: relative !important;

    width: 100% !important;
    min-height: 920px !important;

    padding:
        145px 0 125px !important;

    overflow: hidden !important;
}


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

.hero360-cinematic
.container.hero360-inner {

    position: relative !important;
    z-index: 5 !important;

    width:
        min(
            1380px,
            calc(100% - 96px)
        ) !important;

    max-width: 1380px !important;

    margin:
        0 auto !important;

    padding: 0 !important;

    display: grid !important;

    grid-template-columns:
        minmax(470px, .88fr)
        minmax(570px, 1.12fr) !important;

    align-items: center !important;

    gap: 70px !important;

    transform: none !important;
}


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

.hero360-cinematic
.hero360-content {

    position: relative !important;

    z-index: 20 !important;

    width: 100% !important;

    min-width: 0 !important;

    max-width: 620px !important;

    margin: 0 !important;

    padding:
        0 0 75px !important;

    transform: none !important;

    text-align: left !important;
}


.hero360-cinematic
.hero360-eyebrow {

    width: auto !important;

    margin-bottom: 24px !important;
}


.hero360-cinematic
.hero360-title {

    display: block !important;

    width: 100% !important;

    max-width: 620px !important;

    margin: 0 !important;

    font-size:
        clamp(
            4rem,
            4.8vw,
            5.65rem
        ) !important;

    line-height: .94 !important;

    letter-spacing: -.07em !important;

    white-space: normal !important;

    word-break: normal !important;

    overflow-wrap: normal !important;
}


.hero360-cinematic
.hero360-title span {

    display: block !important;

    width: auto !important;
}


.hero360-cinematic
.hero360-description {

    width: 100% !important;

    max-width: 570px !important;

    margin:
        30px 0 0 !important;

    font-size: .98rem !important;

    line-height: 1.72 !important;

    white-space: normal !important;
}


.hero360-cinematic
.hero360-actions {

    width: 100% !important;

    display: flex !important;

    flex-wrap: wrap !important;

    justify-content: flex-start !important;

    gap: 14px !important;

    margin-top: 34px !important;
}


.hero360-cinematic
.hero360-values {

    width: 100% !important;

    max-width: 590px !important;

    display: grid !important;

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

    margin:
        50px 0 0 !important;
}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.hero360-cinematic
.hero360-visual {

    position: relative !important;

    z-index: 10 !important;

    width: 100% !important;

    max-width: 710px !important;

    min-width: 0 !important;

    min-height: 650px !important;

    margin:
        0 auto !important;

    transform:
        translateX(15px) !important;

    overflow: visible !important;
}


/* planeta */

.hero360-cinematic
.hero360-sphere {

    left: 50% !important;
    top: 50% !important;

    width: 480px !important;
    height: 480px !important;

    transform:
        translate(-50%, -50%) !important;
}


/* world glow */

.hero360-cinematic
.hero360-world-glow {

    left: 50% !important;
    top: 50% !important;

    transform:
        translate(-50%, -50%) !important;
}


/* =========================================================
   ORBITS
========================================================= */

.hero360-cinematic
.hero360-orbit {

    left: 50% !important;
    top: 50% !important;
}


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

.hero360-cinematic
.hero360-card-code {

    left: 2% !important;
    top: 10% !important;
}


.hero360-cinematic
.hero360-card-automation {

    right: 0 !important;
    top: 13% !important;
}


.hero360-cinematic
.hero360-card-integration {

    left: -4% !important;
    top: 49% !important;
}


.hero360-cinematic
.hero360-card-data {

    left: 5% !important;
    right: auto !important;

    bottom: 8% !important;
}


.hero360-cinematic
.hero360-card-industry {

    right: 1% !important;
    bottom: 8% !important;
}


/* =========================================================
   SIGNATURE
========================================================= */

.hero360-cinematic
.hero360-signature {

    right: 1% !important;
    bottom: 23% !important;
}


/* =========================================================
   TECH STACK
========================================================= */

.hero360-cinematic
.hero360-tech {

    position: absolute !important;

    z-index: 15 !important;

    left: 50% !important;
    bottom: 25px !important;

    transform:
        translateX(-50%) !important;

    width:
        min(
            1380px,
            calc(100% - 96px)
        ) !important;

    max-width: 1380px !important;

    min-height: 70px !important;

    margin: 0 !important;

    padding: 0 !important;

    display: grid !important;

    grid-template-columns:
        125px 1fr !important;

    align-items: center !important;

    gap: 38px !important;
}


.hero360-cinematic
.hero360-tech-items {

    display: flex !important;

    align-items: center !important;

    justify-content: flex-start !important;

    flex-wrap: wrap !important;

    gap:
        22px 38px !important;
}


/* =========================================================
   LANDSCAPE
========================================================= */

.hero360-cinematic
.hero360-landscape {

    position: absolute !important;

    z-index: 2 !important;

    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    height: 175px !important;
}


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

@media (max-width: 1250px) {

    .hero360-cinematic
    .container.hero360-inner {

        width:
            calc(100% - 64px) !important;

        grid-template-columns:
            minmax(400px, .9fr)
            minmax(500px, 1.1fr) !important;

        gap: 35px !important;
    }


    .hero360-cinematic
    .hero360-title {

        font-size:
            clamp(
                3.65rem,
                5vw,
                4.8rem
            ) !important;
    }


    .hero360-cinematic
    .hero360-sphere {

        width: 420px !important;
        height: 420px !important;
    }


    .hero360-cinematic
    .hero360-tech {

        width:
            calc(100% - 64px) !important;
    }

}


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

@media (max-width: 1000px) {

    .hero360-cinematic {

        min-height: auto !important;

        padding:
            130px 0 65px !important;
    }


    .hero360-cinematic
    .container.hero360-inner {

        width:
            calc(100% - 64px) !important;

        display: grid !important;

        grid-template-columns:
            1fr !important;

        gap: 20px !important;
    }


    .hero360-cinematic
    .hero360-content {

        max-width: 750px !important;

        margin:
            0 auto !important;

        padding:
            0 !important;

        text-align: center !important;
    }


    .hero360-cinematic
    .hero360-title {

        max-width: 750px !important;

        margin:
            0 auto !important;
    }


    .hero360-cinematic
    .hero360-description {

        max-width: 610px !important;

        margin:
            28px auto 0 !important;
    }


    .hero360-cinematic
    .hero360-actions {

        justify-content:
            center !important;
    }


    .hero360-cinematic
    .hero360-values {

        max-width: 620px !important;

        margin:
            45px auto 0 !important;
    }


    .hero360-cinematic
    .hero360-visual {

        width: 100% !important;

        max-width: 700px !important;

        min-height: 590px !important;

        transform:
            none !important;
    }


    .hero360-cinematic
    .hero360-tech {

        position: relative !important;

        left: auto !important;
        bottom: auto !important;

        transform:
            none !important;

        width:
            calc(100% - 64px) !important;

        margin:
            -25px auto 0 !important;

        grid-template-columns:
            1fr !important;

        text-align: center !important;
    }


    .hero360-cinematic
    .hero360-tech-title {

        display: none !important;
    }


    .hero360-cinematic
    .hero360-tech-items {

        justify-content:
            center !important;
    }


    .hero360-cinematic
    .hero360-landscape {

        height: 130px !important;
    }

}


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

@media (max-width: 700px) {

    .hero360-cinematic {

        padding:
            112px 0 45px !important;
    }


    .hero360-cinematic
    .container.hero360-inner {

        width:
            calc(100% - 40px) !important;

        gap: 14px !important;
    }


    .hero360-cinematic
    .hero360-content {

        width: 100% !important;

        max-width: none !important;

        text-align: left !important;
    }


    .hero360-cinematic
    .hero360-title {

        width: 100% !important;

        max-width: none !important;

        font-size:
            clamp(
                3rem,
                14vw,
                4rem
            ) !important;

        line-height: .94 !important;
    }


    .hero360-cinematic
    .hero360-description {

        width: 100% !important;

        margin:
            23px 0 0 !important;

        font-size: .88rem !important;
    }


    .hero360-cinematic
    .hero360-actions {

        display: grid !important;

        grid-template-columns:
            1fr !important;

        width: 100% !important;
    }


    .hero360-cinematic
    .hero360-values {

        display: grid !important;

        grid-template-columns:
            1fr !important;

        width: 100% !important;

        max-width: none !important;

        margin-top:
            30px !important;
    }


    .hero360-cinematic
    .hero360-visual {

        width: 100% !important;

        max-width: none !important;

        min-height: 400px !important;

        overflow: hidden !important;
    }


    .hero360-cinematic
    .hero360-sphere {

        width: 255px !important;
        height: 255px !important;
    }


    .hero360-cinematic
    .hero360-card-integration,

    .hero360-cinematic
    .hero360-card-data,

    .hero360-cinematic
    .hero360-card-industry {

        display:
            none !important;
    }


    .hero360-cinematic
    .hero360-tech {

        width:
            calc(100% - 40px) !important;

        margin:
            0 auto !important;

        padding-top:
            5px !important;
    }


    .hero360-cinematic
    .hero360-tech-items {

        gap:
            12px 20px !important;
    }


    .hero360-cinematic
    .hero360-landscape {

        height:
            85px !important;
    }

}


/* =========================================================
   SMALL PHONE
========================================================= */

@media (max-width: 430px) {

    .hero360-cinematic
    .container.hero360-inner {

        width:
            calc(100% - 36px) !important;
    }


    .hero360-cinematic
    .hero360-tech {

        width:
            calc(100% - 36px) !important;
    }

}



/* =========================================================
   APP360 — HERO MATCH MOCKUP V1
   Ajuste fino para acercar el Home a la maqueta aprobada
========================================================= */

.hero360-cinematic {
    min-height: 900px !important;

    padding:
        135px 0 110px !important;

    background:
        radial-gradient(
            circle at 71% 43%,
            rgba(0,153,255,.17),
            transparent 32%
        ),
        radial-gradient(
            circle at 54% 60%,
            rgba(0,92,165,.08),
            transparent 36%
        ),
        linear-gradient(
            180deg,
            #020d17 0%,
            #041521 68%,
            #020a10 100%
        ) !important;
}


/* ---------------------------------------------------------
   COMPOSICIÓN GENERAL
--------------------------------------------------------- */

.hero360-cinematic
.container.hero360-inner {

    width:
        min(
            1420px,
            calc(100% - 90px)
        ) !important;

    max-width: 1420px !important;

    grid-template-columns:
        minmax(450px,.78fr)
        minmax(690px,1.22fr) !important;

    gap: 48px !important;
}


/* ---------------------------------------------------------
   BLOQUE IZQUIERDO
--------------------------------------------------------- */

.hero360-cinematic
.hero360-content {

    max-width: 590px !important;

    padding-bottom: 100px !important;
}


.hero360-cinematic
.hero360-eyebrow {

    margin-bottom: 27px !important;

    font-size: .62rem !important;

    letter-spacing: .24em !important;

    color: #26b8ff !important;
}


.hero360-cinematic
.hero360-title {

    max-width: 590px !important;

    font-size:
        clamp(
            4.15rem,
            4.65vw,
            5.45rem
        ) !important;

    line-height: .94 !important;

    letter-spacing: -.071em !important;
}


.hero360-cinematic
.hero360-title span {

    margin-top: 3px !important;

    background:
        linear-gradient(
            135deg,
            #38c6ff 0%,
            #0b9cf5 55%,
            #008be7 100%
        ) !important;

    -webkit-background-clip: text !important;
    background-clip: text !important;

    -webkit-text-fill-color: transparent !important;
}


.hero360-cinematic
.hero360-description {

    max-width: 555px !important;

    margin-top: 30px !important;

    color: #a5b7c4 !important;

    font-size: .98rem !important;

    line-height: 1.72 !important;
}


.hero360-cinematic
.hero360-actions {

    margin-top: 34px !important;

    gap: 16px !important;
}


.hero360-cinematic
.hero360-primary {

    min-width: 235px !important;
}


.hero360-cinematic
.hero360-secondary {

    min-width: 235px !important;
}


/* ---------------------------------------------------------
   BENEFICIOS
--------------------------------------------------------- */

.hero360-cinematic
.hero360-values {

    max-width: 600px !important;

    margin-top: 47px !important;
}


.hero360-cinematic
.hero360-value-icon {

    color: #1ab0ff !important;
}


.hero360-cinematic
.hero360-value strong {

    color: #eef7fc !important;

    font-size: .68rem !important;
}


.hero360-cinematic
.hero360-value span {

    color: #8398a8 !important;

    font-size: .60rem !important;
}


/* ---------------------------------------------------------
   VISUAL DERECHO
--------------------------------------------------------- */

.hero360-cinematic
.hero360-visual {

    max-width: 760px !important;

    min-height: 675px !important;

    transform:
        translate(22px,-8px) !important;
}


/* ---------------------------------------------------------
   PLANETA MÁS GRANDE
--------------------------------------------------------- */

.hero360-cinematic
.hero360-sphere {

    width: 525px !important;
    height: 525px !important;

    background:

        radial-gradient(
            circle at 70% 16%,
            rgba(185,239,255,.95) 0 1%,
            rgba(71,196,255,.42) 4%,
            transparent 11%
        ),

        radial-gradient(
            circle at 26% 30%,
            rgba(40,181,255,.57),
            transparent 17%
        ),

        radial-gradient(
            circle at 53% 43%,
            rgba(5,106,180,.98),
            #043351 40%,
            #021c2d 66%,
            #010b12 90%
        ) !important;

    border:
        1px solid
        rgba(93,215,255,.76) !important;

    box-shadow:

        inset -92px -54px 120px
        rgba(0,0,0,.89),

        inset 55px 25px 95px
        rgba(60,202,255,.21),

        0 0 8px
        rgba(144,231,255,.55),

        0 0 42px
        rgba(49,195,255,.38),

        0 0 120px
        rgba(8,150,246,.24),

        0 0 210px
        rgba(0,103,190,.17) !important;
}


/* Rim exterior tipo atmósfera */

.hero360-cinematic
.hero360-sphere::before {

    inset: -5px !important;

    border:
        3px solid transparent !important;

    border-top-color:
        rgba(173,239,255,.79) !important;

    border-right-color:
        rgba(49,190,255,.40) !important;

    filter:
        drop-shadow(
            0 0 9px
            rgba(62,203,255,.64)
        );

    transform:
        rotate(-18deg) !important;
}


/* ---------------------------------------------------------
   CONTINENTES
--------------------------------------------------------- */

.hero360-cinematic
.hero360-continent-one {

    width: 205px !important;
    height: 292px !important;

    right: 78px !important;
    top: 110px !important;

    opacity: .90 !important;

    background:
        linear-gradient(
            145deg,
            rgba(61,190,255,.37),
            rgba(15,88,135,.11)
        ) !important;

    filter:
        drop-shadow(
            0 0 12px
            rgba(54,193,255,.45)
        ) !important;
}


.hero360-cinematic
.hero360-continent-two {

    width: 182px !important;
    height: 132px !important;

    left: 57px !important;
    top: 84px !important;

    opacity: .74 !important;

    background:
        rgba(62,193,250,.28) !important;
}


/* ---------------------------------------------------------
   LUCES DEL PLANETA
--------------------------------------------------------- */

.hero360-cinematic
.hero360-night-lights {

    opacity: .90 !important;

    background-image:

        radial-gradient(circle at 64% 30%, #e1f9ff 0 1px, transparent 2.1px),
        radial-gradient(circle at 67% 33%, #6bd7ff 0 1.2px, transparent 2.4px),
        radial-gradient(circle at 60% 37%, #8fe5ff 0 1px, transparent 2.2px),
        radial-gradient(circle at 71% 40%, #31b9ff 0 1px, transparent 2.2px),
        radial-gradient(circle at 68% 45%, #a1eaff 0 1px, transparent 2.3px),
        radial-gradient(circle at 63% 51%, #41c2ff 0 1px, transparent 2.2px),
        radial-gradient(circle at 56% 59%, #69d4ff 0 1px, transparent 2.2px),
        radial-gradient(circle at 52% 67%, #d2f6ff 0 1px, transparent 2.2px),
        radial-gradient(circle at 46% 71%, #2cbaff 0 1px, transparent 2.2px)
        !important;

    filter:
        drop-shadow(
            0 0 6px
            rgba(56,202,255,.95)
        ) !important;
}


/* ---------------------------------------------------------
   CORE CENTRAL
--------------------------------------------------------- */

.hero360-cinematic
.hero360-core {

    width: 158px !important;
    height: 158px !important;

    background:
        radial-gradient(
            circle,
            rgba(5,62,105,.90),
            rgba(1,16,28,.93)
        ) !important;

    border:
        1px solid
        rgba(98,220,255,.70) !important;

    box-shadow:

        0 0 12px
        rgba(102,220,255,.50),

        0 0 44px
        rgba(31,185,255,.47),

        inset 0 0 34px
        rgba(46,190,255,.14)
        !important;
}


.hero360-cinematic
.hero360-core strong {

    font-size: 3.15rem !important;

    color: #f4fcff !important;
}


.hero360-cinematic
.hero360-core-arrow {

    inset: -17px !important;

    border-top-color:
        #44ccff !important;

    border-right-color:
        rgba(68,204,255,.52) !important;

    filter:
        drop-shadow(
            0 0 6px
            rgba(40,191,255,.70)
        );
}


/* ---------------------------------------------------------
   ÓRBITAS
--------------------------------------------------------- */

.hero360-cinematic
.hero360-orbit {

    border-color:
        rgba(37,188,255,.57) !important;

    filter:
        drop-shadow(
            0 0 3px
            rgba(43,193,255,.30)
        ) !important;
}


.hero360-cinematic
.hero360-orbit-one {

    width: 655px !important;
    height: 280px !important;
}


.hero360-cinematic
.hero360-orbit-two {

    width: 615px !important;
    height: 420px !important;
}


.hero360-cinematic
.hero360-orbit-three {

    width: 700px !important;
    height: 510px !important;

    opacity: .40 !important;
}


/* ---------------------------------------------------------
   CARDS MÁS GRANDES / MOCKUP
--------------------------------------------------------- */

.hero360-cinematic
.hero360-card {

    min-width: 188px !important;

    padding:
        15px 17px !important;

    border:
        1px solid
        rgba(93,201,255,.35) !important;

    border-radius: 14px !important;

    background:
        linear-gradient(
            145deg,
            rgba(11,45,70,.95),
            rgba(2,25,42,.91)
        ) !important;

    box-shadow:

        0 18px 45px
        rgba(0,0,0,.36),

        inset 0 1px 0
        rgba(255,255,255,.035)
        !important;
}


.hero360-cinematic
.hero360-card-icon {

    width: 39px !important;
    height: 39px !important;

    background:
        rgba(16,149,229,.15) !important;

    color: #76d3ff !important;
}


.hero360-cinematic
.hero360-card strong {

    font-size: .70rem !important;

    color: #f0f8fc !important;
}


.hero360-cinematic
.hero360-card span {

    color: #90a9ba !important;

    font-size: .60rem !important;
}


/* Posiciones */

.hero360-cinematic
.hero360-card-code {

    left: 1% !important;
    top: 7% !important;
}


.hero360-cinematic
.hero360-card-automation {

    right: -2% !important;
    top: 10% !important;
}


.hero360-cinematic
.hero360-card-integration {

    left: -7% !important;
    top: 48% !important;
}


.hero360-cinematic
.hero360-card-data {

    left: 6% !important;
    bottom: 6% !important;
}


.hero360-cinematic
.hero360-card-industry {

    right: 0 !important;
    bottom: 7% !important;
}


/* ---------------------------------------------------------
   FIRMA 360
--------------------------------------------------------- */

.hero360-cinematic
.hero360-signature {

    right: -2% !important;
    bottom: 24% !important;

    color: #68ceff !important;

    transform:
        rotate(-7deg) !important;
}


.hero360-cinematic
.hero360-signature span {

    font-size: .67rem !important;
}


.hero360-cinematic
.hero360-signature strong {

    font-size: 1.04rem !important;

    text-shadow:
        0 0 12px
        rgba(41,184,255,.25);
}


/* ---------------------------------------------------------
   TERRENO
--------------------------------------------------------- */

.hero360-cinematic
.hero360-landscape {

    height: 195px !important;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.52),
            transparent
        );
}


.hero360-cinematic
.mountain-one {

    background:
        linear-gradient(
            180deg,
            #092030,
            #02080c 75%
        ) !important;

    filter:
        drop-shadow(
            0 -4px 14px
            rgba(23,126,183,.11)
        ) !important;
}


/* ---------------------------------------------------------
   TECH STACK INFERIOR
--------------------------------------------------------- */

.hero360-cinematic
.hero360-tech {

    bottom: 19px !important;
}


.hero360-cinematic
.hero360-tech-title {

    color: #7e96a8 !important;

    font-size: .55rem !important;
}


.hero360-cinematic
.hero360-tech-items {

    gap:
        24px 41px !important;
}


.hero360-cinematic
.hero360-tech-items span {

    position: relative;

    color:
        rgba(202,219,230,.62) !important;

    font-size: .78rem !important;

    font-weight: 700 !important;
}


/* pequeñas marcas visuales estilo logo */

.hero360-cinematic
.hero360-tech-items span::before {

    content: '';

    display: inline-block;

    width: 5px;
    height: 5px;

    margin-right: 7px;

    border-radius: 50%;

    background:
        rgba(56,185,255,.36);

    vertical-align: middle;
}


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

@media (max-width:1000px) {

    .hero360-cinematic
    .container.hero360-inner {

        width:
            calc(100% - 64px) !important;

        grid-template-columns:
            1fr !important;
    }


    .hero360-cinematic
    .hero360-content {

        max-width: 730px !important;

        padding-bottom: 10px !important;
    }


    .hero360-cinematic
    .hero360-visual {

        max-width: 720px !important;

        min-height: 610px !important;

        transform: none !important;
    }


    .hero360-cinematic
    .hero360-sphere {

        width: 450px !important;
        height: 450px !important;
    }


    .hero360-cinematic
    .hero360-orbit-one {

        width: 560px !important;
    }


    .hero360-cinematic
    .hero360-orbit-two {

        width: 535px !important;
    }


    .hero360-cinematic
    .hero360-orbit-three {

        width: 600px !important;
    }

}


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

@media (max-width:700px) {

    .hero360-cinematic {

        padding:
            112px 0 38px !important;
    }


    .hero360-cinematic
    .container.hero360-inner {

        width:
            calc(100% - 40px) !important;
    }


    .hero360-cinematic
    .hero360-title {

        font-size:
            clamp(
                3rem,
                14vw,
                4rem
            ) !important;
    }


    .hero360-cinematic
    .hero360-visual {

        min-height:
            405px !important;
    }


    .hero360-cinematic
    .hero360-sphere {

        width: 265px !important;
        height: 265px !important;
    }


    .hero360-cinematic
    .hero360-core {

        width: 96px !important;
        height: 96px !important;
    }


    .hero360-cinematic
    .hero360-core strong {

        font-size: 1.95rem !important;
    }


    /*
     * Dos tarjetas solamente.
     */

    .hero360-cinematic
    .hero360-card-code {

        display: flex !important;

        left: 0 !important;
        top: 6% !important;
    }


    .hero360-cinematic
    .hero360-card-automation {

        display: flex !important;

        right: 0 !important;
        top: auto !important;
        bottom: 6% !important;
    }


    .hero360-cinematic
    .hero360-card-integration,

    .hero360-cinematic
    .hero360-card-data,

    .hero360-cinematic
    .hero360-card-industry {

        display: none !important;
    }


    .hero360-cinematic
    .hero360-card {

        min-width: 135px !important;

        max-width: 145px !important;

        padding:
            10px 11px !important;
    }


    .hero360-cinematic
    .hero360-landscape {

        height: 90px !important;
    }

}


/* =========================================================
   PHONE 430
========================================================= */

@media (max-width:430px) {

    .hero360-cinematic
    .container.hero360-inner {

        width:
            calc(100% - 36px) !important;
    }


    .hero360-cinematic
    .hero360-sphere {

        width: 242px !important;
        height: 242px !important;
    }

}



/* =========================================================
   APP360 — REAL GLOBE FINAL
========================================================= */

.hero360-cinematic
.hero360-sphere-real {

    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    width: 545px !important;
    height: 545px !important;

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

    overflow: visible !important;

    border: 0 !important;

    border-radius: 50% !important;

    background: none !important;

    box-shadow:
        0 0 50px rgba(38,187,255,.20),
        0 0 140px rgba(0,128,225,.16)
        !important;

    animation:
        hero360RealGlobeFloat
        7s ease-in-out infinite !important;
}


.hero360-cinematic
.hero360-sphere-real::before,
.hero360-cinematic
.hero360-sphere-real::after {

    display: none !important;
}


/* imagen real */

.hero360-globe-image {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: contain;

    border-radius: 50%;

    display: block;

    filter:
        saturate(1.08)
        contrast(1.05)
        brightness(.95)
        drop-shadow(
            0 0 22px
            rgba(44,193,255,.24)
        );

    user-select: none;

    pointer-events: none;
}


/* suaviza bordes de la imagen */

.hero360-globe-overlay {

    position: absolute;

    inset: 0;

    z-index: 2;

    border-radius: 50%;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 50% 50%,
            transparent 54%,
            rgba(2,15,25,.10) 70%,
            rgba(2,15,25,.28) 100%
        );
}


/* core por encima del planeta */

.hero360-sphere-real
.hero360-core {

    z-index: 12 !important;

    width: 158px !important;
    height: 158px !important;

    background:
        radial-gradient(
            circle,
            rgba(4,51,90,.82),
            rgba(0,15,27,.85)
        ) !important;

    backdrop-filter:
        blur(4px);

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

    border:
        1px solid
        rgba(99,219,255,.72) !important;

    box-shadow:

        0 0 14px
        rgba(78,210,255,.45),

        0 0 45px
        rgba(28,182,255,.40),

        inset 0 0 30px
        rgba(46,188,255,.16)

        !important;
}


/* órbitas siempre encima */

.hero360-cinematic
.hero360-orbit {

    z-index: 8 !important;
}


/* cards encima de todo */

.hero360-cinematic
.hero360-card {

    z-index: 20 !important;
}


/* más profundidad al visual */

.hero360-cinematic
.hero360-visual::after {

    content: '';

    position: absolute;

    left: 50%;
    top: 53%;

    width: 590px;
    height: 390px;

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

    z-index: -1;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(0,155,255,.12),
            transparent 67%
        );

    filter:
        blur(30px);

    pointer-events: none;
}


/* floating */

@keyframes hero360RealGlobeFloat {

    0%,
    100% {

        transform:
            translate(-50%, -50%)
            translateY(0);
    }

    50% {

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

}


/* =========================================================
   DESKTOP POSITION MATCH
========================================================= */

@media (min-width:1001px) {

    .hero360-cinematic
    .hero360-visual {

        transform:
            translate(30px,-10px) !important;
    }

}


/* =========================================================
   IPAD
========================================================= */

@media (max-width:1000px) {

    .hero360-cinematic
    .hero360-sphere-real {

        width: 460px !important;
        height: 460px !important;
    }

}


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

@media (max-width:700px) {

    .hero360-cinematic
    .hero360-sphere-real {

        width: 280px !important;
        height: 280px !important;
    }


    .hero360-sphere-real
    .hero360-core {

        width: 98px !important;
        height: 98px !important;
    }


    .hero360-sphere-real
    .hero360-core strong {

        font-size: 1.95rem !important;
    }

}


/* =========================================================
   SMALL PHONE
========================================================= */

@media (max-width:430px) {

    .hero360-cinematic
    .hero360-sphere-real {

        width: 248px !important;
        height: 248px !important;
    }

}


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

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

    .hero360-cinematic
    .hero360-sphere-real {

        animation:
            none !important;
    }

}



/* =========================================================
   APP360 — GLOBE COMPOSITION PRO FINAL
   Ajuste de composición sin modificar la imagen
========================================================= */

@media (min-width: 1101px) {

    /* Área derecha completa */
    .hero360-cinematic .hero360-visual {
        position: relative !important;

        width: 100% !important;
        max-width: 760px !important;
        min-height: 650px !important;

        margin: 0 auto !important;

        transform: translate(-5px, -8px) !important;

        overflow: visible !important;
    }


    /* Planeta */
    .hero360-cinematic .hero360-sphere-real {
        position: absolute !important;

        left: 51% !important;
        top: 50% !important;

        width: 475px !important;
        height: 475px !important;

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

        border: 0 !important;
        background: transparent !important;

        box-shadow:
            0 0 35px rgba(24,181,255,.16),
            0 0 95px rgba(0,127,219,.12)
            !important;
    }


    /* Imagen */
    .hero360-cinematic .hero360-globe-image {
        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        display: block !important;

        object-fit: contain !important;

        border-radius: 50% !important;

        filter:
            saturate(1.04)
            contrast(1.04)
            brightness(.92)
            drop-shadow(0 0 18px rgba(38,190,255,.25))
            !important;
    }


    /* Elimina cualquier máscara oscura excesiva */
    .hero360-cinematic .hero360-globe-overlay {
        position: absolute !important;

        inset: 0 !important;

        border-radius: 50% !important;

        background:
            radial-gradient(
                circle at 47% 45%,
                transparent 60%,
                rgba(1,10,17,.06) 77%,
                rgba(1,10,17,.17) 100%
            ) !important;

        pointer-events: none !important;
    }


    /* Centro 360 */
    .hero360-cinematic
    .hero360-sphere-real
    .hero360-core {

        width: 140px !important;
        height: 140px !important;

        z-index: 15 !important;

        background:
            radial-gradient(
                circle at 50% 42%,
                rgba(7,74,119,.94),
                rgba(1,24,42,.97) 72%
            ) !important;

        border:
            1px solid rgba(91,217,255,.72) !important;

        box-shadow:
            0 0 12px rgba(68,208,255,.38),
            0 0 34px rgba(13,167,244,.32),
            inset 0 0 28px rgba(31,176,239,.13)
            !important;
    }


    .hero360-cinematic
    .hero360-sphere-real
    .hero360-core strong {

        font-size: 2.7rem !important;
        line-height: 1 !important;
    }


    .hero360-cinematic
    .hero360-sphere-real
    .hero360-core small {

        margin-top: 9px !important;

        font-size: .54rem !important;

        letter-spacing: .28em !important;
    }


    /* Flecha circular */
    .hero360-cinematic
    .hero360-core-arrow {

        inset: -13px !important;

        border-width: 3px !important;

        opacity: .92 !important;
    }


    /* =====================================================
       ÓRBITAS
    ===================================================== */

    .hero360-cinematic .hero360-orbit {
        position: absolute !important;

        left: 50% !important;
        top: 50% !important;

        z-index: 8 !important;

        border-color: rgba(36,185,247,.45) !important;

        pointer-events: none !important;
    }


    .hero360-cinematic .hero360-orbit-one {
        width: 610px !important;
        height: 255px !important;

        transform:
            translate(-50%, -50%)
            rotate(-10deg) !important;
    }


    .hero360-cinematic .hero360-orbit-two {
        width: 575px !important;
        height: 390px !important;

        transform:
            translate(-50%, -50%)
            rotate(21deg) !important;
    }


    .hero360-cinematic .hero360-orbit-three {
        width: 635px !important;
        height: 485px !important;

        transform:
            translate(-50%, -50%)
            rotate(-31deg) !important;

        opacity: .48 !important;
    }


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

    .hero360-cinematic .hero360-card {
        z-index: 30 !important;

        min-width: 175px !important;

        padding: 14px 16px !important;

        border-radius: 13px !important;

        background:
            linear-gradient(
                145deg,
                rgba(8,43,68,.96),
                rgba(3,27,45,.94)
            ) !important;

        border:
            1px solid rgba(71,180,235,.36) !important;

        box-shadow:
            0 16px 38px rgba(0,0,0,.30),
            inset 0 1px 0 rgba(255,255,255,.035)
            !important;

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


    /* Software arriba izquierda */
    .hero360-cinematic .hero360-card-code {
        left: 0 !important;
        top: 8% !important;
    }


    /* Automatización arriba derecha */
    .hero360-cinematic .hero360-card-automation {
        right: -1% !important;
        top: 12% !important;
    }


    /* Integraciones centro izquierda */
    .hero360-cinematic .hero360-card-integration {
        left: -7% !important;
        top: 47% !important;
    }


    /* Datos abajo izquierda */
    .hero360-cinematic .hero360-card-data {
        left: 7% !important;
        bottom: 5% !important;
    }


    /* Soluciones abajo derecha */
    .hero360-cinematic .hero360-card-industry {
        right: 1% !important;
        bottom: 8% !important;
    }


    /* Firma */
    .hero360-cinematic .hero360-signature {
        right: -1% !important;
        bottom: 24% !important;

        z-index: 25 !important;
    }

}


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

@media (min-width: 701px) and (max-width: 1100px) {

    .hero360-cinematic .hero360-visual {
        width: 100% !important;
        max-width: 680px !important;

        min-height: 570px !important;

        margin: 20px auto 0 !important;

        transform: none !important;

        overflow: visible !important;
    }


    .hero360-cinematic .hero360-sphere-real {
        width: 405px !important;
        height: 405px !important;

        left: 50% !important;
        top: 50% !important;

        transform:
            translate(-50%, -50%) !important;
    }


    .hero360-cinematic
    .hero360-sphere-real
    .hero360-core {

        width: 120px !important;
        height: 120px !important;
    }


    .hero360-cinematic
    .hero360-sphere-real
    .hero360-core strong {

        font-size: 2.3rem !important;
    }


    .hero360-cinematic .hero360-card {
        min-width: 155px !important;
    }


    .hero360-cinematic .hero360-card-code {
        left: 2% !important;
        top: 7% !important;
    }


    .hero360-cinematic .hero360-card-automation {
        right: 2% !important;
        top: 10% !important;
    }


    .hero360-cinematic .hero360-card-integration {
        left: 0 !important;
        top: 47% !important;
    }


    .hero360-cinematic .hero360-card-data {
        left: 8% !important;
        bottom: 5% !important;
    }


    .hero360-cinematic .hero360-card-industry {
        right: 5% !important;
        bottom: 6% !important;
    }

}


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

@media (max-width: 700px) {

    .hero360-cinematic .hero360-visual {
        position: relative !important;

        width: 100% !important;

        min-height: 385px !important;

        margin-top: 34px !important;

        transform: none !important;

        overflow: hidden !important;
    }


    .hero360-cinematic .hero360-sphere-real {
        left: 50% !important;
        top: 50% !important;

        width: 270px !important;
        height: 270px !important;

        transform:
            translate(-50%, -50%) !important;
    }


    .hero360-cinematic
    .hero360-sphere-real
    .hero360-core {

        width: 88px !important;
        height: 88px !important;
    }


    .hero360-cinematic
    .hero360-sphere-real
    .hero360-core strong {

        font-size: 1.75rem !important;
    }


    .hero360-cinematic
    .hero360-sphere-real
    .hero360-core small {

        font-size: .42rem !important;

        margin-top: 5px !important;
    }


    /*
     * En teléfono no intentamos meter las cinco cards.
     * Dos elementos dan una composición mucho más premium.
     */

    .hero360-cinematic .hero360-card-integration,
    .hero360-cinematic .hero360-card-data,
    .hero360-cinematic .hero360-card-industry {

        display: none !important;
    }


    .hero360-cinematic .hero360-card-code,
    .hero360-cinematic .hero360-card-automation {

        display: flex !important;

        min-width: 132px !important;
        max-width: 145px !important;

        padding: 10px 11px !important;
    }


    .hero360-cinematic .hero360-card-code {

        left: 2px !important;
        top: 20px !important;
    }


    .hero360-cinematic .hero360-card-automation {

        right: 2px !important;
        top: auto !important;
        bottom: 18px !important;
    }


    .hero360-cinematic .hero360-signature {

        display: none !important;
    }

}


/* SMALL PHONE */

@media (max-width: 430px) {

    .hero360-cinematic .hero360-visual {

        min-height: 350px !important;
    }


    .hero360-cinematic .hero360-sphere-real {

        width: 235px !important;
        height: 235px !important;
    }


    .hero360-cinematic .hero360-card-code,
    .hero360-cinematic .hero360-card-automation {

        min-width: 122px !important;
        max-width: 132px !important;
    }

}



/* =========================================================
   APP360 — GLOBE CLEAN ORBITS PRO
   Versión visual definitiva: planeta limpio + órbitas sutiles
========================================================= */


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

@media (min-width: 1101px) {

    /* -----------------------------------------
       CONTENEDOR DERECHO
    ----------------------------------------- */

    .hero360-cinematic .hero360-visual {
        position: relative !important;

        width: 100% !important;
        max-width: 760px !important;
        min-height: 650px !important;

        margin: 0 auto !important;

        transform: translate(0, -5px) !important;

        overflow: visible !important;
    }


    /* -----------------------------------------
       ELIMINAR MARCO / HALO CIRCULAR EXTERIOR
    ----------------------------------------- */

    .hero360-cinematic .hero360-world-glow {
        display: none !important;
    }


    .hero360-cinematic .hero360-visual::before {
        content: '' !important;

        position: absolute !important;

        left: 50% !important;
        top: 51% !important;

        width: 560px !important;
        height: 560px !important;

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

        border-radius: 50% !important;

        background:
            radial-gradient(
                circle,
                rgba(0,164,255,.10) 0%,
                rgba(0,134,235,.055) 37%,
                transparent 70%
            ) !important;

        filter: blur(32px) !important;

        pointer-events: none !important;

        z-index: 0 !important;
    }


    /* -----------------------------------------
       PLANETA
    ----------------------------------------- */

    .hero360-cinematic .hero360-sphere-real {
        left: 50% !important;
        top: 50% !important;

        width: 470px !important;
        height: 470px !important;

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

        background: transparent !important;

        border: none !important;

        outline: none !important;

        box-shadow:
            0 0 24px rgba(50,202,255,.18),
            0 0 75px rgba(0,132,230,.10)
            !important;

        overflow: visible !important;

        z-index: 4 !important;
    }


    .hero360-cinematic .hero360-sphere-real::before,
    .hero360-cinematic .hero360-sphere-real::after {
        display: none !important;
    }


    .hero360-cinematic .hero360-globe-image {
        width: 100% !important;
        height: 100% !important;

        object-fit: contain !important;

        border-radius: 50% !important;

        filter:
            saturate(1.02)
            contrast(1.02)
            brightness(.92)
            drop-shadow(
                0 0 12px
                rgba(48,195,255,.22)
            )
            !important;
    }


    /*
     * Quitamos el oscurecimiento circular que hacía
     * parecer que había otro aro alrededor del planeta.
     */

    .hero360-cinematic .hero360-globe-overlay {
        background: none !important;

        box-shadow: none !important;

        border: none !important;
    }


    /* -----------------------------------------
       CENTRO 360°
    ----------------------------------------- */

    .hero360-cinematic
    .hero360-sphere-real
    .hero360-core {

        width: 132px !important;
        height: 132px !important;

        z-index: 20 !important;

        border:
            1px solid
            rgba(83,211,255,.68) !important;

        background:
            radial-gradient(
                circle at 50% 38%,
                rgba(7,70,111,.94),
                rgba(1,25,43,.97) 70%
            ) !important;

        box-shadow:
            0 0 10px rgba(61,205,255,.30),
            0 0 27px rgba(20,169,238,.22),
            inset 0 0 22px rgba(29,174,237,.12)
            !important;
    }


    .hero360-cinematic
    .hero360-sphere-real
    .hero360-core strong {

        font-size: 2.55rem !important;

        letter-spacing: -.06em !important;
    }


    .hero360-cinematic
    .hero360-sphere-real
    .hero360-core small {

        margin-top: 7px !important;

        font-size: .50rem !important;

        letter-spacing: .29em !important;
    }


    /*
     * Flecha circular del centro.
     * Mucho más sutil.
     */

    .hero360-cinematic .hero360-core-arrow {
        inset: -10px !important;

        border-width: 2px !important;

        opacity: .70 !important;

        filter:
            drop-shadow(
                0 0 4px
                rgba(40,190,255,.40)
            ) !important;
    }


    /* =====================================================
       ÓRBITAS
    ===================================================== */

    .hero360-cinematic .hero360-orbit {
        position: absolute !important;

        left: 50% !important;
        top: 50% !important;

        z-index: 10 !important;

        pointer-events: none !important;

        background: transparent !important;

        border-style: solid !important;

        border-width: 1px !important;

        box-shadow: none !important;

        filter: none !important;
    }


    /*
     * ÓRBITA PRINCIPAL
     * Cruza horizontalmente el planeta.
     */

    .hero360-cinematic .hero360-orbit-one {

        width: 625px !important;
        height: 245px !important;

        border-color:
            rgba(52,196,255,.58) !important;

        transform:
            translate(-50%, -50%)
            rotate(-8deg) !important;

        opacity: .92 !important;
    }


    /*
     * SEGUNDA ÓRBITA
     * Más vertical y mucho más tenue.
     */

    .hero360-cinematic .hero360-orbit-two {

        width: 570px !important;
        height: 360px !important;

        border-color:
            rgba(39,178,239,.28) !important;

        transform:
            translate(-50%, -50%)
            rotate(24deg) !important;

        opacity: .68 !important;
    }


    /*
     * TERCERA ÓRBITA:
     * la eliminamos.
     *
     * Esta era la principal responsable del aspecto
     * de "marco circular".
     */

    .hero360-cinematic .hero360-orbit-three {
        display: none !important;
    }


    /* -----------------------------------------
       NODOS
    ----------------------------------------- */

    .hero360-cinematic .hero360-orbit-dot {

        width: 8px !important;
        height: 8px !important;

        border-radius: 50% !important;

        background:
            #61d8ff !important;

        box-shadow:
            0 0 5px rgba(102,222,255,.90),
            0 0 14px rgba(32,185,255,.60)
            !important;
    }


    /* -----------------------------------------
       CARDS
    ----------------------------------------- */

    .hero360-cinematic .hero360-card {

        min-width: 170px !important;

        padding:
            13px 15px !important;

        border-radius:
            13px !important;

        border:
            1px solid
            rgba(66,181,237,.34) !important;

        background:
            linear-gradient(
                145deg,
                rgba(7,42,67,.95),
                rgba(3,25,42,.92)
            ) !important;

        box-shadow:
            0 14px 35px rgba(0,0,0,.27),
            inset 0 1px 0 rgba(255,255,255,.03)
            !important;

        backdrop-filter:
            blur(12px) !important;

        -webkit-backdrop-filter:
            blur(12px) !important;

        z-index: 30 !important;
    }


    /*
     * Más separados del planeta.
     * Esto es importante para que el globo respire.
     */

    .hero360-cinematic .hero360-card-code {

        left: -1% !important;
        top: 8% !important;
    }


    .hero360-cinematic .hero360-card-automation {

        right: -2% !important;
        top: 12% !important;
    }


    .hero360-cinematic .hero360-card-integration {

        left: -8% !important;
        top: 48% !important;
    }


    .hero360-cinematic .hero360-card-data {

        left: 7% !important;
        bottom: 6% !important;
    }


    .hero360-cinematic .hero360-card-industry {

        right: 1% !important;
        bottom: 8% !important;
    }


    /* -----------------------------------------
       FIRMA
    ----------------------------------------- */

    .hero360-cinematic .hero360-signature {

        right: -1% !important;
        bottom: 25% !important;

        opacity: .80 !important;

        z-index: 25 !important;
    }

}


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

@media (min-width: 701px) and (max-width: 1100px) {

    .hero360-cinematic .hero360-world-glow {
        display: none !important;
    }


    .hero360-cinematic .hero360-visual {

        width: 100% !important;
        max-width: 680px !important;

        min-height: 560px !important;

        margin:
            20px auto 0 !important;

        transform:
            none !important;
    }


    .hero360-cinematic .hero360-sphere-real {

        width: 395px !important;
        height: 395px !important;

        left: 50% !important;
        top: 50% !important;

        transform:
            translate(-50%, -50%) !important;
    }


    .hero360-cinematic
    .hero360-sphere-real
    .hero360-core {

        width: 112px !important;
        height: 112px !important;
    }


    .hero360-cinematic
    .hero360-sphere-real
    .hero360-core strong {

        font-size:
            2.15rem !important;
    }


    .hero360-cinematic .hero360-orbit-one {

        width: 520px !important;
        height: 210px !important;

        opacity: .82 !important;
    }


    .hero360-cinematic .hero360-orbit-two {

        width: 470px !important;
        height: 310px !important;

        opacity: .45 !important;
    }


    .hero360-cinematic .hero360-orbit-three {
        display: none !important;
    }

}


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

@media (max-width: 700px) {

    .hero360-cinematic .hero360-world-glow {
        display: none !important;
    }


    .hero360-cinematic .hero360-visual {

        min-height:
            370px !important;

        margin-top:
            30px !important;

        overflow:
            hidden !important;
    }


    .hero360-cinematic .hero360-sphere-real {

        width: 255px !important;
        height: 255px !important;

        left: 50% !important;
        top: 50% !important;

        transform:
            translate(-50%, -50%) !important;
    }


    .hero360-cinematic
    .hero360-sphere-real
    .hero360-core {

        width: 82px !important;
        height: 82px !important;
    }


    .hero360-cinematic
    .hero360-sphere-real
    .hero360-core strong {

        font-size:
            1.65rem !important;
    }


    .hero360-cinematic
    .hero360-sphere-real
    .hero360-core small {

        font-size:
            .38rem !important;
    }


    /*
     * En móvil dejamos UNA órbita principal.
     */

    .hero360-cinematic .hero360-orbit-one {

        display: block !important;

        width: 330px !important;
        height: 135px !important;

        border-width:
            1px !important;

        border-color:
            rgba(49,194,255,.45) !important;

        opacity: .70 !important;
    }


    .hero360-cinematic .hero360-orbit-two,
    .hero360-cinematic .hero360-orbit-three {

        display:
            none !important;
    }


    /*
     * Dos cards solamente.
     */

    .hero360-cinematic .hero360-card-code {

        display: flex !important;

        left: 0 !important;
        top: 18px !important;
    }


    .hero360-cinematic .hero360-card-automation {

        display: flex !important;

        right: 0 !important;
        top: auto !important;

        bottom: 18px !important;
    }


    .hero360-cinematic .hero360-card-integration,
    .hero360-cinematic .hero360-card-data,
    .hero360-cinematic .hero360-card-industry {

        display:
            none !important;
    }


    .hero360-cinematic .hero360-signature {

        display:
            none !important;
    }

}


/* =========================================================
   SMALL PHONE
========================================================= */

@media (max-width: 430px) {

    .hero360-cinematic .hero360-visual {

        min-height:
            335px !important;
    }


    .hero360-cinematic .hero360-sphere-real {

        width: 225px !important;
        height: 225px !important;
    }


    .hero360-cinematic .hero360-orbit-one {

        width: 290px !important;
        height: 118px !important;
    }

}


/* =========================================================
   APP360 — GLOBE FLOATING FINAL
   Planeta flotante, sin disco / aureola exterior
========================================================= */

.hero360-cinematic .hero360-world-glow {
    display: none !important;
}

.hero360-cinematic .hero360-visual::before,
.hero360-cinematic .hero360-visual::after {
    display: none !important;
}

/* CONTENEDOR DEL PLANETA */
.hero360-cinematic .hero360-sphere-real {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;

    width: 470px !important;
    height: 470px !important;

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

    background: transparent !important;
    background-color: transparent !important;

    border: 0 !important;
    outline: 0 !important;

    box-shadow: none !important;

    border-radius: 0 !important;

    overflow: visible !important;

    z-index: 5 !important;
}

/* ELIMINA CUALQUIER DISCO GENERADO POR CSS */
.hero360-cinematic .hero360-sphere-real::before,
.hero360-cinematic .hero360-sphere-real::after {
    content: none !important;
    display: none !important;
}

/* IMAGEN REAL DEL PLANETA */
.hero360-cinematic .hero360-globe-image {
    position: absolute !important;

    inset: 0 !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;

    background: transparent !important;

    border: 0 !important;
    outline: 0 !important;

    border-radius: 0 !important;

    box-shadow: none !important;

    filter:
        saturate(1.04)
        contrast(1.04)
        brightness(.96)
        drop-shadow(0 0 8px rgba(28, 180, 255, .22))
        drop-shadow(0 0 24px rgba(0, 132, 255, .10))
        !important;

    z-index: 1 !important;
}

/* QUITA OVERLAY OSCURO */
.hero360-cinematic .hero360-globe-overlay {
    display: none !important;
}

/* CENTRO 360 */
.hero360-cinematic .hero360-core {
    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

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

    width: 125px !important;
    height: 125px !important;

    border-radius: 50% !important;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(8, 78, 122, .96),
            rgba(2, 35, 57, .98) 62%,
            rgba(1, 22, 37, .99)
        ) !important;

    border: 1px solid rgba(73, 211, 255, .62) !important;

    box-shadow:
        0 0 14px rgba(54, 205, 255, .22),
        0 0 32px rgba(0, 151, 255, .12),
        inset 0 0 20px rgba(34, 185, 255, .12)
        !important;

    z-index: 20 !important;
}

/* =========================================================
   ÓRBITAS — SOLO DOS
========================================================= */

.hero360-cinematic .hero360-orbit {
    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    background: transparent !important;

    box-shadow: none !important;

    pointer-events: none !important;

    z-index: 12 !important;
}

/* principal */
.hero360-cinematic .hero360-orbit-one {
    display: block !important;

    width: 610px !important;
    height: 205px !important;

    transform:
        translate(-50%, -50%)
        rotate(-7deg) !important;

    border:
        1px solid
        rgba(50, 195, 255, .55) !important;

    opacity: .78 !important;
}

/* secundaria */
.hero360-cinematic .hero360-orbit-two {
    display: block !important;

    width: 560px !important;
    height: 285px !important;

    transform:
        translate(-50%, -50%)
        rotate(19deg) !important;

    border:
        1px solid
        rgba(41, 170, 230, .25) !important;

    opacity: .52 !important;
}

/* eliminamos completamente la tercera */
.hero360-cinematic .hero360-orbit-three {
    display: none !important;
}

/* NODOS */
.hero360-cinematic .hero360-orbit-dot {
    width: 7px !important;
    height: 7px !important;

    background: #6edfff !important;

    box-shadow:
        0 0 6px rgba(110, 223, 255, .9),
        0 0 14px rgba(32, 187, 255, .55)
        !important;
}


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

@media (min-width: 701px) and (max-width: 1100px) {

    .hero360-cinematic .hero360-sphere-real {
        width: 390px !important;
        height: 390px !important;
    }

    .hero360-cinematic .hero360-orbit-one {
        width: 500px !important;
        height: 175px !important;
    }

    .hero360-cinematic .hero360-orbit-two {
        width: 460px !important;
        height: 245px !important;
    }

    .hero360-cinematic .hero360-core {
        width: 105px !important;
        height: 105px !important;
    }
}


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

@media (max-width: 700px) {

    .hero360-cinematic .hero360-visual {
        min-height: 350px !important;
        overflow: hidden !important;
    }

    .hero360-cinematic .hero360-sphere-real {
        width: 255px !important;
        height: 255px !important;
    }

    .hero360-cinematic .hero360-core {
        width: 78px !important;
        height: 78px !important;
    }

    /* móvil: una sola órbita */
    .hero360-cinematic .hero360-orbit-one {
        display: block !important;

        width: 325px !important;
        height: 115px !important;

        opacity: .60 !important;
    }

    .hero360-cinematic .hero360-orbit-two,
    .hero360-cinematic .hero360-orbit-three {
        display: none !important;
    }
}


@media (max-width: 430px) {

    .hero360-cinematic .hero360-sphere-real {
        width: 225px !important;
        height: 225px !important;
    }

    .hero360-cinematic .hero360-orbit-one {
        width: 285px !important;
        height: 100px !important;
    }
}

/* =========================================================
   APP360 — RESPONSIVE HERO CLEAN FINAL
   Desktop existente intacto
   Tablet + Mobile reconstruidos
========================================================= */


/* =========================================================
   TABLET 701 — 1100
========================================================= */

@media (min-width: 701px) and (max-width: 1100px) {

    .hero360-cinematic {
        height: auto !important;
        min-height: auto !important;
        overflow: hidden !important;
    }

    .hero360-cinematic .hero360-inner {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
        gap: 40px !important;
    }

    .hero360-cinematic .hero360-content {
        width: 100% !important;
        max-width: 680px !important;
    }

    .hero360-cinematic .hero360-visual {
        position: relative !important;
        width: min(100%, 620px) !important;
        height: 540px !important;
        min-height: 540px !important;
        margin: 10px auto 0 !important;
        overflow: visible !important;
    }

    .hero360-cinematic .hero360-sphere-real {
        left: 50% !important;
        top: 50% !important;
        width: 390px !important;
        height: 390px !important;
        transform: translate(-50%, -50%) !important;
    }

    .hero360-cinematic .hero360-card {
        max-width: 155px !important;
    }

    .hero360-cinematic .hero360-card-code {
        left: 3% !important;
        top: 10% !important;
    }

    .hero360-cinematic .hero360-card-automation {
        right: 3% !important;
        top: 14% !important;
    }

    .hero360-cinematic .hero360-card-integration {
        left: 2% !important;
        top: 50% !important;
    }

    .hero360-cinematic .hero360-card-data {
        left: 12% !important;
        bottom: 7% !important;
    }

    .hero360-cinematic .hero360-card-industry {
        right: 4% !important;
        bottom: 8% !important;
    }

    .hero360-cinematic .hero360-tech {
        position: relative !important;
        width: calc(100% - 64px) !important;
        margin: 30px auto 0 !important;
    }
}


/* =========================================================
   MOBILE <= 700
========================================================= */

@media (max-width: 700px) {

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }


    /* HERO */

    .hero360-cinematic {
        position: relative !important;

        width: 100% !important;
        height: auto !important;
        min-height: auto !important;

        padding: 0 0 42px !important;

        overflow: hidden !important;

        background:
            radial-gradient(
                circle at 50% 65%,
                rgba(0, 153, 255, .13),
                transparent 34%
            ),
            linear-gradient(
                180deg,
                #03111d 0%,
                #041827 60%,
                #020b13 100%
            ) !important;
    }


    /* CONTENEDOR */

    .hero360-cinematic .hero360-inner {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;
        max-width: 520px !important;

        min-height: 0 !important;

        margin: 0 auto !important;
        padding: 46px 20px 0 !important;

        gap: 0 !important;

        overflow: visible !important;
    }


    /* COPY */

    .hero360-cinematic .hero360-content {
        position: relative !important;

        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        z-index: 10 !important;
    }


    .hero360-cinematic .hero360-eyebrow {
        display: flex !important;
        align-items: center !important;

        width: 100% !important;

        margin: 0 0 22px !important;

        font-size: .63rem !important;
        line-height: 1.45 !important;
        letter-spacing: .19em !important;

        white-space: normal !important;
    }


    .hero360-cinematic .hero360-title {
        width: 100% !important;
        max-width: 390px !important;

        margin: 0 !important;

        font-size: clamp(3rem, 13.6vw, 4.1rem) !important;
        line-height: .92 !important;
        letter-spacing: -.06em !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;

        overflow: visible !important;
    }


    .hero360-cinematic .hero360-title span {
        display: block !important;
        width: 100% !important;
    }


    .hero360-cinematic .hero360-description {
        width: 100% !important;
        max-width: 400px !important;

        margin: 27px 0 0 !important;

        font-size: .98rem !important;
        line-height: 1.62 !important;

        color: rgba(203, 218, 231, .78) !important;
    }


    /* CTA */

    .hero360-cinematic .hero360-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;

        width: 100% !important;

        gap: 10px !important;

        margin: 27px 0 0 !important;
    }


    .hero360-cinematic .hero360-actions .btn {
        display: flex !important;
        align-items: center !important;

        width: 100% !important;
        max-width: none !important;

        min-height: 58px !important;

        margin: 0 !important;
        padding: 0 20px !important;

        border-radius: 14px !important;

        font-size: .92rem !important;
    }


    .hero360-cinematic .hero360-primary {
        justify-content: space-between !important;
    }


    .hero360-cinematic .hero360-secondary {
        justify-content: center !important;
    }


    /* BENEFICIOS */

    .hero360-cinematic .hero360-values {
        position: relative !important;

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

        width: 100% !important;

        gap: 7px !important;

        margin: 20px 0 0 !important;

        z-index: 10 !important;
    }


    .hero360-cinematic .hero360-value {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;

        min-width: 0 !important;
        min-height: 108px !important;

        gap: 9px !important;

        padding: 13px 10px !important;

        border:
            1px solid rgba(62, 184, 255, .15) !important;

        border-radius: 14px !important;

        background:
            linear-gradient(
                145deg,
                rgba(7,31,49,.72),
                rgba(4,20,33,.42)
            ) !important;
    }


    .hero360-cinematic .hero360-value +
    .hero360-value {
        border-left:
            1px solid rgba(62,184,255,.15) !important;
    }


    .hero360-cinematic .hero360-value-icon {
        width: 27px !important;
        height: 27px !important;
    }


    .hero360-cinematic .hero360-value strong {
        display: block !important;

        font-size: .69rem !important;
        line-height: 1.15 !important;
    }


    .hero360-cinematic .hero360-value span {
        display: block !important;

        margin-top: 3px !important;

        font-size: .56rem !important;
        line-height: 1.25 !important;
    }


    /* =====================================================
       PLANETA — BLOQUE PROPIO
    ===================================================== */

    .hero360-cinematic .hero360-visual {
        position: relative !important;

        display: block !important;

        width: calc(100% + 40px) !important;
        max-width: none !important;

        height: 410px !important;
        min-height: 410px !important;

        margin: 30px -20px 0 !important;
        padding: 0 !important;

        overflow: hidden !important;

        transform: none !important;

        z-index: 5 !important;
    }


    .hero360-cinematic .hero360-world-glow,
    .hero360-cinematic .hero360-visual::before,
    .hero360-cinematic .hero360-visual::after {
        display: none !important;
    }


    /* PLANETA */

    .hero360-cinematic .hero360-sphere-real {
        position: absolute !important;

        left: 50% !important;
        top: 52% !important;

        width: min(84vw, 340px) !important;
        height: min(84vw, 340px) !important;

        margin: 0 !important;

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

        background: transparent !important;
        border: 0 !important;

        box-shadow:
            0 0 45px rgba(0,160,255,.16) !important;

        z-index: 4 !important;
    }


    .hero360-cinematic .hero360-globe-image {
        display: block !important;

        width: 100% !important;
        height: 100% !important;

        object-fit: contain !important;

        margin: 0 !important;
    }


    .hero360-cinematic .hero360-globe-overlay {
        display: none !important;
    }


    /* CENTRO */

    .hero360-cinematic .hero360-core {
        width: 90px !important;
        height: 90px !important;

        z-index: 10 !important;
    }


    .hero360-cinematic .hero360-core strong {
        font-size: 1.75rem !important;
    }


    .hero360-cinematic .hero360-core small {
        font-size: .45rem !important;
        letter-spacing: .22em !important;
    }


    /* LA FOTO YA TIENE ÓRBITAS */

    .hero360-cinematic .hero360-orbit {
        display: none !important;
    }


    /* CARDS */

    .hero360-cinematic .hero360-card {
        position: absolute !important;

        display: flex !important;
        align-items: center !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: 155px !important;

        gap: 8px !important;

        padding: 9px 10px !important;

        border-radius: 12px !important;

        background:
            linear-gradient(
                145deg,
                rgba(7,32,51,.97),
                rgba(4,20,33,.96)
            ) !important;

        border:
            1px solid rgba(54,183,255,.40) !important;

        box-shadow:
            0 12px 30px rgba(0,0,0,.30) !important;

        transform: none !important;

        z-index: 20 !important;
    }


    .hero360-cinematic .hero360-card-icon {
        width: 32px !important;
        height: 32px !important;

        flex: 0 0 32px !important;

        border-radius: 9px !important;

        font-size: .78rem !important;
    }


    .hero360-cinematic .hero360-card strong {
        display: block !important;

        font-size: .64rem !important;
        line-height: 1.1 !important;

        white-space: nowrap !important;
    }


    .hero360-cinematic .hero360-card span {
        display: block !important;

        margin-top: 3px !important;

        font-size: .51rem !important;
        line-height: 1.1 !important;

        white-space: nowrap !important;
    }


    /* Software */

    .hero360-cinematic .hero360-card-code {
        left: 5% !important;
        top: 16px !important;

        right: auto !important;
        bottom: auto !important;
    }


    /* Automatización */

    .hero360-cinematic .hero360-card-automation {
        right: 5% !important;
        top: 54px !important;

        left: auto !important;
        bottom: auto !important;
    }


    /* Integraciones */

    .hero360-cinematic .hero360-card-integration {
        left: 5% !important;
        bottom: 14px !important;

        right: auto !important;
        top: auto !important;
    }


    .hero360-cinematic .hero360-card-data,
    .hero360-cinematic .hero360-card-industry,
    .hero360-cinematic .hero360-signature {
        display: none !important;
    }


    /* =====================================================
       TECH — DESPUÉS DEL PLANETA
    ===================================================== */

    .hero360-cinematic .hero360-tech {
        position: relative !important;

        display: block !important;

        width: calc(100% - 40px) !important;
        max-width: 480px !important;

        margin: 16px auto 0 !important;
        padding: 23px 0 2px !important;

        border-top:
            1px solid rgba(255,255,255,.08) !important;

        z-index: 10 !important;
    }


    .hero360-cinematic .hero360-tech-title {
        display: block !important;

        width: 100% !important;

        margin: 0 0 16px !important;

        font-size: .56rem !important;
        line-height: 1.5 !important;
        letter-spacing: .20em !important;

        text-align: left !important;
    }


    .hero360-cinematic .hero360-tech-title span {
        display: inline !important;
    }


    .hero360-cinematic .hero360-tech-items {
        display: flex !important;
        flex-wrap: wrap !important;

        width: 100% !important;

        gap: 12px 18px !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    .hero360-cinematic .hero360-tech-items span {
        width: auto !important;

        margin: 0 !important;

        font-size: .68rem !important;
        line-height: 1 !important;

        white-space: nowrap !important;
    }


    /* TERRENO */

    .hero360-cinematic .hero360-landscape {
        height: 60px !important;
        opacity: .25 !important;
        pointer-events: none !important;
    }


    /* WHATSAPP */

    .whatsapp-contact {
        right: 14px !important;
        bottom: 14px !important;
    }

    .whatsapp-tooltip {
        display: none !important;
    }
}


/* =========================================================
   MOBILE PEQUEÑO <= 430
========================================================= */

@media (max-width: 430px) {

    .hero360-cinematic .hero360-inner {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .hero360-cinematic .hero360-title {
        max-width: 350px !important;

        font-size:
            clamp(2.8rem, 13.4vw, 3.45rem) !important;
    }

    .hero360-cinematic .hero360-description {
        font-size: .94rem !important;
    }

    .hero360-cinematic .hero360-visual {
        width: calc(100% + 36px) !important;

        height: 370px !important;
        min-height: 370px !important;

        margin:
            27px
            -18px
            0 !important;
    }

    .hero360-cinematic .hero360-sphere-real {
        width: min(82vw, 310px) !important;
        height: min(82vw, 310px) !important;
    }

    .hero360-cinematic .hero360-card-code {
        left: 2% !important;
    }

    .hero360-cinematic .hero360-card-automation {
        right: 2% !important;
    }

    .hero360-cinematic .hero360-card-integration {
        left: 2% !important;
    }

    .hero360-cinematic .hero360-tech {
        width: calc(100% - 36px) !important;
    }
}


/* =========================================================
   EXTRA SMALL <= 370
========================================================= */

@media (max-width: 370px) {

    .hero360-cinematic .hero360-title {
        font-size: 2.65rem !important;
    }

    .hero360-cinematic .hero360-values {
        gap: 5px !important;
    }

    .hero360-cinematic .hero360-value {
        padding: 10px 7px !important;
    }

    .hero360-cinematic .hero360-visual {
        height: 350px !important;
        min-height: 350px !important;
    }

    .hero360-cinematic .hero360-sphere-real {
        width: 280px !important;
        height: 280px !important;
    }

    .hero360-cinematic .hero360-card {
        padding: 8px 9px !important;
    }
}


/* =========================================================
   APP360 — MOBILE HOME STABILIZATION
========================================================= */

@media (max-width: 700px) {

    .site-header {
        background: rgba(3, 10, 18, .94);
        border-bottom: 1px solid rgba(255,255,255,.08);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    .header-inner {
        height: 82px;
        padding-top: env(safe-area-inset-top);
    }

    .brand {
        min-width: 0;
    }

    .brand-logo {
        width: 52px;
        max-width: 52px;
        max-height: 52px;
        flex: 0 0 auto;
    }

    .brand-wordmark {
        font-size: 1.08rem;
        letter-spacing: -.035em;
        white-space: nowrap;
    }

    .mobile-menu-button {
        width: 54px;
        height: 54px;
        flex: 0 0 54px;
        border-radius: 16px;
    }

    .mobile-menu {
        top: calc(82px + env(safe-area-inset-top));
        height: calc(100dvh - 82px - env(safe-area-inset-top));
    }

    body[data-page="index.php"] .hero360-cinematic {
        display: block !important;
        min-height: auto !important;
        width: 100% !important;
        max-width: 100vw !important;
        padding:
            calc(82px + env(safe-area-inset-top))
            0
            44px !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }

    body[data-page="index.php"] .hero360-cinematic .hero360-stars,
    body[data-page="index.php"] .hero360-cinematic .hero360-grid-bg,
    body[data-page="index.php"] .hero360-cinematic .hero360-glow,
    body[data-page="index.php"] .hero360-cinematic .hero360-landscape {
        display: none !important;
    }

    body[data-page="index.php"] .hero360-cinematic .container.hero360-inner {
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
        width: min(100%, 430px) !important;
        max-width: none !important;
        padding: 34px 22px 0 !important;
        margin-inline: auto !important;
        gap: 26px !important;
        overflow: visible !important;
    }

    body[data-page="index.php"] .hero360-cinematic .hero360-content {
        width: 100% !important;
        max-width: none !important;
        text-align: left !important;
        overflow: visible !important;
    }

    body[data-page="index.php"] .hero360-cinematic .hero360-eyebrow {
        margin-bottom: 18px !important;
        font-size: .66rem !important;
        line-height: 1.35 !important;
        letter-spacing: .12em !important;
    }

    body[data-page="index.php"] .hero360-cinematic .hero360-title {
        width: 100% !important;
        max-width: 295px !important;
        font-size: clamp(2.25rem, 9.8vw, 2.68rem) !important;
        line-height: 1.04 !important;
        letter-spacing: -.025em !important;
        overflow: visible !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        text-wrap: balance !important;
    }

    body[data-page="index.php"] .hero360-cinematic .hero360-title span {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    body[data-page="index.php"] .hero360-cinematic .hero360-description {
        width: 100% !important;
        max-width: 310px !important;
        margin-top: 20px !important;
        font-size: 1rem !important;
        line-height: 1.55 !important;
    }

    body[data-page="index.php"] .hero360-cinematic .hero360-actions {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-top: 22px !important;
    }

    body[data-page="index.php"] .hero360-cinematic .hero360-actions .btn {
        min-height: 60px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-inline: 18px !important;
        font-size: .95rem !important;
    }

    body[data-page="index.php"] .hero360-cinematic .hero360-values {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin-top: 18px !important;
    }

    body[data-page="index.php"] .hero360-cinematic .hero360-value {
        min-height: 0 !important;
        flex-direction: row !important;
        align-items: center !important;
        padding: 12px 14px !important;
    }

    body[data-page="index.php"] .hero360-cinematic .hero360-value strong {
        display: inline !important;
        font-size: .9rem !important;
    }

    body[data-page="index.php"] .hero360-cinematic .hero360-value span {
        display: inline !important;
        margin-left: 4px !important;
        font-size: .9rem !important;
        color: rgba(232, 241, 248, .82) !important;
    }

    body[data-page="index.php"] .hero360-cinematic .hero360-visual {
        width: 100% !important;
        max-width: 330px !important;
        height: 300px !important;
        min-height: 300px !important;
        margin: 2px auto 0 !important;
        overflow: hidden !important;
    }

    body[data-page="index.php"] .hero360-cinematic .hero360-sphere,
    body[data-page="index.php"] .hero360-cinematic .hero360-sphere-real {
        width: min(68vw, 245px) !important;
        height: min(68vw, 245px) !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        overflow: visible !important;
    }

    body[data-page="index.php"] .hero360-cinematic .hero360-sphere::before,
    body[data-page="index.php"] .hero360-cinematic .hero360-sphere::after,
    body[data-page="index.php"] .hero360-cinematic .hero360-continent,
    body[data-page="index.php"] .hero360-cinematic .hero360-night-lights,
    body[data-page="index.php"] .hero360-cinematic .hero360-orbit,
    body[data-page="index.php"] .hero360-cinematic .hero360-card,
    body[data-page="index.php"] .hero360-cinematic .hero360-signature {
        display: none !important;
    }

    body[data-page="index.php"] .hero360-cinematic .hero360-globe-image {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }

    body[data-page="index.php"] .hero360-cinematic .hero360-core {
        width: 82px !important;
        height: 82px !important;
    }

    body[data-page="index.php"] .hero360-cinematic .hero360-core strong {
        font-size: 1.45rem !important;
    }

    body[data-page="index.php"] .hero360-cinematic .hero360-core small,
    body[data-page="index.php"] .hero360-cinematic .hero360-core-arrow {
        display: none !important;
    }

    body[data-page="index.php"] .hero360-cinematic .hero360-tech {
        position: relative !important;
        display: block !important;
        box-sizing: border-box !important;
        width: min(100%, 430px) !important;
        max-width: none !important;
        min-height: 0 !important;
        margin: 0 auto !important;
        padding: 18px 22px 0 !important;
        border-top: 1px solid rgba(255,255,255,.08) !important;
        grid-template-columns: 1fr !important;
        transform: none !important;
    }

    body[data-page="index.php"] .hero360-cinematic .hero360-tech-title {
        width: 100% !important;
        max-width: 260px !important;
        margin-bottom: 12px !important;
        font-size: .62rem !important;
        letter-spacing: .13em !important;
    }

    body[data-page="index.php"] .hero360-cinematic .hero360-tech-items {
        display: flex !important;
        align-items: flex-start !important;
        flex-wrap: wrap !important;
        gap: 9px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    body[data-page="index.php"] .hero360-cinematic .hero360-tech-items span {
        padding: 7px 9px !important;
        border: 1px solid rgba(66, 190, 255, .14) !important;
        border-radius: 999px !important;
        background: rgba(255,255,255,.035) !important;
        font-size: .68rem !important;
        letter-spacing: 0 !important;
    }

    body[data-page="index.php"] .problems-section {
        padding: 68px 0 !important;
    }

    body[data-page="index.php"] .problems-layout {
        grid-template-columns: 1fr !important;
        gap: 34px !important;
    }

    body[data-page="index.php"] .problems-intro {
        position: static !important;
        top: auto !important;
    }

    body[data-page="index.php"] .problems-intro h2 {
        font-size: clamp(2.55rem, 12vw, 3.65rem) !important;
        line-height: 1.02 !important;
        letter-spacing: -.045em !important;
    }

    body[data-page="index.php"] .problems-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    body[data-page="index.php"] .problem-card {
        min-height: 0 !important;
        padding: 26px 24px !important;
        border-radius: 16px !important;
    }

    .whatsapp-contact {
        right: max(14px, env(safe-area-inset-right)) !important;
        bottom: calc(18px + env(safe-area-inset-bottom)) !important;
    }

    .whatsapp-button {
        width: 56px !important;
        height: 56px !important;
        border-radius: 17px !important;
    }

    .whatsapp-tooltip {
        display: none !important;
    }
}

@media (max-width: 430px) {

    body[data-page="index.php"] .hero360-cinematic .container.hero360-inner {
        width: min(100%, 390px) !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-top: 30px !important;
    }

    body[data-page="index.php"] .hero360-cinematic .hero360-title {
        max-width: 285px !important;
        font-size: clamp(2.16rem, 9.6vw, 2.48rem) !important;
    }

    body[data-page="index.php"] .hero360-cinematic .hero360-description {
        max-width: 285px !important;
        font-size: .94rem !important;
    }

    body[data-page="index.php"] .hero360-cinematic .hero360-visual {
        max-width: 300px !important;
        height: 270px !important;
        min-height: 270px !important;
    }

    body[data-page="index.php"] .hero360-cinematic .hero360-sphere,
    body[data-page="index.php"] .hero360-cinematic .hero360-sphere-real {
        width: min(66vw, 230px) !important;
        height: min(66vw, 230px) !important;
    }

    body[data-page="index.php"] .hero360-cinematic .hero360-tech {
        width: min(100%, 390px) !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

@media (max-width: 370px) {

    body[data-page="index.php"] .hero360-cinematic .hero360-title {
        font-size: 2.36rem !important;
    }

    body[data-page="index.php"] .hero360-cinematic .hero360-actions .btn {
        font-size: .86rem !important;
    }

    body[data-page="index.php"] .hero360-cinematic .hero360-value strong,
    body[data-page="index.php"] .hero360-cinematic .hero360-value span {
        font-size: .8rem !important;
    }
}


/* =========================================================
   APP360 — MOBILE GLOBE RESTORE
========================================================= */

@keyframes app360MobileGlobeFloat {

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

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

@media (max-width: 700px) {

    body[data-page="index.php"] .hero360-cinematic .hero360-visual {
        display: grid !important;
        place-items: center !important;
        width: 100% !important;
        max-width: 390px !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 16px auto 4px !important;
        padding: 10px 0 2px !important;
        overflow: visible !important;
    }

    body[data-page="index.php"] .hero360-cinematic .hero360-sphere-real {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: min(92vw, 360px) !important;
        height: auto !important;
        aspect-ratio: 1261 / 1247 !important;
        transform: none !important;
        overflow: visible !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        animation: app360MobileGlobeFloat 5.5s ease-in-out infinite !important;
    }

    body[data-page="index.php"] .hero360-cinematic .hero360-globe-image {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1261 / 1247 !important;
        object-fit: contain !important;
        border-radius: 0 !important;
        filter:
            saturate(1.08)
            contrast(1.05)
            brightness(.96)
            drop-shadow(0 0 24px rgba(44,193,255,.24)) !important;
    }

    body[data-page="index.php"] .hero360-cinematic .hero360-core {
        position: absolute !important;
        left: 50% !important;
        top: 52% !important;
        transform: translate(-50%, -50%) !important;
        width: 76px !important;
        height: 76px !important;
        border-radius: 50% !important;
    }
}

@media (max-width: 430px) {

    body[data-page="index.php"] .hero360-cinematic .hero360-visual {
        max-width: 350px !important;
        margin-top: 14px !important;
    }

    body[data-page="index.php"] .hero360-cinematic .hero360-sphere-real {
        width: min(90vw, 330px) !important;
    }

    body[data-page="index.php"] .hero360-cinematic .hero360-core {
        width: 70px !important;
        height: 70px !important;
    }

    body[data-page="index.php"] .hero360-cinematic .hero360-core strong {
        font-size: 1.3rem !important;
    }
}