/* =========================================================
   HOPDIVE
   Software & Web Development
   Main stylesheet
   ========================================================= */


/* =========================================================
   1. VARIABLES
   ========================================================= */

:root {
    --color-primary: #075cff;
    --color-primary-dark: #0040c9;
    --color-primary-light: #eaf1ff;

    --color-navy: #031b46;
    --color-navy-dark: #01102c;
    --color-navy-soft: #092c66;

    --color-text: #17223b;
    --color-text-soft: #5e6b82;
    --color-text-light: #8792a5;

    --color-white: #ffffff;
    --color-background: #f7f9fc;
    --color-background-soft: #eef3fa;
    --color-border: #dfe6f0;

    --color-success: #16a369;
    --color-whatsapp: #25d366;

    --shadow-small: 0 8px 24px rgba(3, 27, 70, 0.08);
    --shadow-medium: 0 18px 50px rgba(3, 27, 70, 0.12);
    --shadow-large: 0 30px 80px rgba(3, 27, 70, 0.18);

    --gradient-primary: linear-gradient(
        135deg,
        #031b46 0%,
        #075cff 100%
    );

    --gradient-blue: linear-gradient(
        135deg,
        #0867ff 0%,
        #0045d8 100%
    );

    --gradient-dark: linear-gradient(
        135deg,
        #01102c 0%,
        #06265d 100%
    );

    --container-width: 1200px;

    --radius-small: 10px;
    --radius-medium: 18px;
    --radius-large: 28px;
    --radius-round: 999px;

    --transition: 0.3s ease;
}


/* =========================================================
   2. RESET
   ========================================================= */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

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

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    color: var(--color-text);
    background: var(--color-white);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body,
button,
input,
textarea,
select {
    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;
}

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

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

ul,
ol {
    list-style: none;
}

button {
    border: 0;
    background: none;
    cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-navy);
    line-height: 1.15;
}

p {
    color: var(--color-text-soft);
}

::selection {
    color: var(--color-white);
    background: var(--color-primary);
}


/* =========================================================
   3. GENERAL LAYOUT
   ========================================================= */

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

    margin-inline: auto;
}

.section {
    padding: 110px 0;
}

.section-heading {
    max-width: 720px;
    margin-bottom: 55px;
}

.section-heading-centered {
    margin-inline: auto;
    text-align: center;
}

.section-heading h2,
.about-content h2,
.contact-content h2,
.faq-heading h2,
.project-cta h2 {
    margin-top: 16px;
    font-size: clamp(2rem, 4vw, 3.3rem);
    letter-spacing: -0.04em;
}

.section-heading p,
.faq-heading p {
    margin-top: 20px;
    font-size: 1.05rem;
}

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

    color: var(--color-primary);
    font-size: 0.77rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.section-label::before {
    content: "";
    width: 28px;
    height: 3px;
    border-radius: var(--radius-round);
    background: var(--color-primary);
}

.section-label-light {
    color: #bcd2ff;
}

.section-label-light::before {
    background: #bcd2ff;
}


/* =========================================================
   4. ACCESSIBILITY
   ========================================================= */

.skip-link {
    position: fixed;
    top: -100px;
    left: 20px;
    z-index: 9999;

    padding: 13px 20px;

    color: var(--color-white);
    background: var(--color-primary);
    border-radius: 0 0 10px 10px;
    font-weight: 700;

    transition: top var(--transition);
}

.skip-link:focus {
    top: 0;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
    outline: 3px solid rgba(7, 92, 255, 0.35);
    outline-offset: 4px;
}


/* =========================================================
   5. BUTTONS
   ========================================================= */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;

    padding: 14px 28px;

    border: 2px solid transparent;
    border-radius: var(--radius-round);

    font-size: 0.96rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;

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

.button:hover {
    transform: translateY(-3px);
}

.button-primary {
    color: var(--color-white);
    background: var(--gradient-blue);
    box-shadow: 0 14px 30px rgba(7, 92, 255, 0.24);
}

.button-primary:hover {
    box-shadow: 0 18px 38px rgba(7, 92, 255, 0.32);
}

.button-secondary {
    color: var(--color-navy);
    background: var(--color-white);
    border-color: var(--color-border);
}

.button-secondary:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.button-light {
    flex-shrink: 0;
    color: var(--color-navy);
    background: var(--color-white);
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.15);
}

.button-light:hover {
    color: var(--color-primary);
}

.button-full {
    width: 100%;
}


/* =========================================================
   6. HEADER
   ========================================================= */

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

    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid rgba(223, 230, 240, 0.8);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

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

    min-height: 86px;
    margin-inline: auto;

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

.brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.brand img {
    width: 215px;
    height: auto;
}

.main-navigation {
    display: flex;
    align-items: center;
    gap: 28px;
}

.main-navigation ul {
    display: flex;
    align-items: center;
    gap: 28px;
}

.main-navigation ul a {
    position: relative;

    color: var(--color-navy);
    font-size: 0.92rem;
    font-weight: 700;

    transition: color var(--transition);
}

.main-navigation ul a::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -7px;

    width: 0;
    height: 2px;

    background: var(--color-primary);
    border-radius: var(--radius-round);

    transition: width var(--transition);
}

.main-navigation ul a:hover {
    color: var(--color-primary);
}

.main-navigation ul a:hover::after {
    width: 100%;
}

.language-selector {
    display: flex;
    align-items: center;
    gap: 8px;

    color: #a3adbc;
    font-size: 0.82rem;
    font-weight: 800;
}

.language-link {
    color: var(--color-text-soft);
    transition: color var(--transition);
}

.language-link:hover,
.language-link.active {
    color: var(--color-primary);
}

.header-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;

    padding: 12px 20px;

    color: var(--color-white);
    background: var(--gradient-blue);
    border-radius: var(--radius-round);

    font-size: 0.85rem;
    font-weight: 800;

    box-shadow: 0 10px 24px rgba(7, 92, 255, 0.2);

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

.header-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(7, 92, 255, 0.3);
}

.menu-toggle {
    display: none;
    width: 46px;
    height: 46px;

    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;

    background: var(--color-primary-light);
    border-radius: 12px;
}

.menu-toggle span {
    width: 22px;
    height: 2px;
    background: var(--color-navy);
    border-radius: var(--radius-round);

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


/* =========================================================
   7. HERO
   ========================================================= */

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

    display: flex;
    align-items: center;

    padding: 105px 0 115px;

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(7, 92, 255, 0.14),
            transparent 30%
        ),
        radial-gradient(
            circle at 5% 90%,
            rgba(0, 91, 255, 0.08),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f6f9ff 100%
        );
}

.hero::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0.28;

    background-image:
        linear-gradient(
            rgba(7, 92, 255, 0.08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(7, 92, 255, 0.08) 1px,
            transparent 1px
        );

    background-size: 55px 55px;

    mask-image: linear-gradient(
        to right,
        transparent,
        black,
        transparent
    );
}

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

    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr);
    align-items: center;
    gap: 70px;
}

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

.hero-content h1 {
    margin-top: 20px;

    font-size: clamp(2.8rem, 5vw, 5.2rem);
    letter-spacing: -0.055em;
}

.hero-description {
    max-width: 640px;
    margin-top: 25px;

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

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 35px;
}

.hero-features {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin-top: 34px;
}

.hero-feature {
    display: flex;
    align-items: center;
    gap: 8px;

    color: var(--color-text-soft);
    font-size: 0.88rem;
    font-weight: 700;
}

.feature-check {
    width: 24px;
    height: 24px;

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

    color: var(--color-primary);
    background: var(--color-primary-light);
    border-radius: 50%;

    font-size: 0.75rem;
    font-weight: 900;
}

.hero-visual {
    position: relative;
}

.development-window {
    position: relative;

    overflow: hidden;

    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(7, 92, 255, 0.15);
    border-radius: var(--radius-large);

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

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

.development-window::before {
    content: "";

    position: absolute;
    right: -90px;
    bottom: -120px;

    width: 300px;
    height: 300px;

    background: rgba(7, 92, 255, 0.08);
    border-radius: 50%;
    filter: blur(2px);
}

.window-header {
    min-height: 62px;
    padding: 0 22px;

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

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

.window-controls {
    display: flex;
    gap: 7px;
}

.window-controls span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.window-controls span:nth-child(1) {
    background: #ff5f57;
}

.window-controls span:nth-child(2) {
    background: #ffbd2e;
}

.window-controls span:nth-child(3) {
    background: #28c840;
}

.window-title {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.82rem;
    font-weight: 700;
}

.window-body {
    position: relative;
    z-index: 1;

    min-height: 430px;
    padding: 28px;

    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 20px;

    background:
        linear-gradient(
            135deg,
            #f9fbff 0%,
            #edf4ff 100%
        );
}

.code-panel {
    padding: 25px 20px;

    display: flex;
    flex-direction: column;
    gap: 18px;

    background: var(--color-navy-dark);
    border-radius: 18px;
    box-shadow: var(--shadow-small);
}

.code-line {
    height: 8px;
    border-radius: var(--radius-round);

    background: linear-gradient(
        90deg,
        #1674ff,
        rgba(22, 116, 255, 0.2)
    );
}

.code-line-short {
    width: 45%;
}

.code-line-medium {
    width: 70%;
}

.code-line-long {
    width: 92%;
}

.dashboard-panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.dashboard-card {
    padding: 22px;

    background: var(--color-white);
    border: 1px solid rgba(7, 92, 255, 0.1);
    border-radius: 18px;

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

.dashboard-card-main {
    min-height: 230px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.dashboard-card-main strong {
    color: var(--color-navy);
    font-size: 3.2rem;
    letter-spacing: -0.05em;
}

.dashboard-label {
    color: var(--color-text-soft);
    font-size: 0.84rem;
    font-weight: 700;
}

.dashboard-chart {
    position: relative;
    display: block;
    height: 80px;
    overflow: hidden;

    border-radius: 12px;

    background:
        linear-gradient(
            180deg,
            rgba(7, 92, 255, 0.25),
            transparent
        );
}

.dashboard-chart::before {
    content: "";

    position: absolute;
    inset: 15px 12px;

    border-top: 4px solid var(--color-primary);
    border-right: 4px solid var(--color-primary);
    border-radius: 0 20px 0 0;

    transform: skewY(-12deg);
}

.dashboard-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.dashboard-row .dashboard-card {
    min-height: 130px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.dashboard-icon {
    width: 42px;
    height: 42px;

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

    color: var(--color-primary);
    background: var(--color-primary-light);
    border-radius: 12px;

    font-weight: 900;
}

.dashboard-row .dashboard-card span:last-child {
    color: var(--color-navy);
    font-size: 0.82rem;
    font-weight: 800;
}

.hero-background-elements {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero-shape {
    position: absolute;
    border-radius: 50%;
}

.hero-shape-one {
    top: 80px;
    right: 8%;

    width: 220px;
    height: 220px;

    border: 1px solid rgba(7, 92, 255, 0.15);
}

.hero-shape-two {
    right: 16%;
    bottom: 80px;

    width: 80px;
    height: 80px;

    background: rgba(7, 92, 255, 0.08);
}

.hero-code {
    position: absolute;
    left: 3%;
    bottom: 50px;

    color: rgba(7, 92, 255, 0.07);
    font-size: 9rem;
    font-weight: 900;
}


/* =========================================================
   8. TRUST SECTION
   ========================================================= */

.trust-section {
    padding: 28px 0;
    background: var(--color-navy);
}

.trust-title {
    margin-bottom: 20px;

    color: rgba(255, 255, 255, 0.58);
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-align: center;
    text-transform: uppercase;
}

.trust-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 34px;
}

.trust-items span {
    color: var(--color-white);
    font-size: 0.91rem;
    font-weight: 700;
}


/* =========================================================
   9. SERVICES
   ========================================================= */

.services-section {
    background: var(--color-white);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.service-card {
    position: relative;
    overflow: hidden;

    min-height: 490px;
    padding: 34px;

    display: flex;
    flex-direction: column;

    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);

    box-shadow: 0 10px 35px rgba(3, 27, 70, 0.05);

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

.service-card::before {
    content: "";

    position: absolute;
    left: 0;
    top: 0;

    width: 100%;
    height: 4px;

    background: var(--gradient-blue);

    transform: scaleX(0);
    transform-origin: left;

    transition: transform var(--transition);
}

.service-card:hover {
    transform: translateY(-9px);
    border-color: rgba(7, 92, 255, 0.25);
    box-shadow: var(--shadow-medium);
}

.service-card:hover::before {
    transform: scaleX(1);
}

.service-number {
    position: absolute;
    top: 25px;
    right: 28px;

    color: #dce7f8;
    font-size: 2.8rem;
    font-weight: 900;
    line-height: 1;
}

.service-icon {
    width: 64px;
    height: 64px;

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

    color: var(--color-primary);
    background: var(--color-primary-light);
    border-radius: 17px;

    font-size: 0.77rem;
    font-weight: 900;
    letter-spacing: 0.05em;
}

.service-card h3 {
    margin-top: 28px;
    font-size: 1.35rem;
}

.service-card > p {
    margin-top: 16px;
    font-size: 0.96rem;
}

.service-list {
    display: flex;
    flex-direction: column;
    gap: 11px;

    margin-top: 23px;
    margin-bottom: 28px;
}

.service-list li {
    position: relative;
    padding-left: 22px;

    color: var(--color-text-soft);
    font-size: 0.88rem;
}

.service-list li::before {
    content: "✓";

    position: absolute;
    left: 0;
    top: 0;

    color: var(--color-primary);
    font-weight: 900;
}

.service-link {
    margin-top: auto;

    display: inline-flex;
    align-items: center;
    gap: 9px;

    color: var(--color-primary);
    font-size: 0.86rem;
    font-weight: 800;

    transition: gap var(--transition);
}

.service-link:hover {
    gap: 14px;
}

.services-footer {
    margin-top: 40px;
    padding: 28px 32px;

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

    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
}

.services-footer p {
    color: var(--color-navy);
    font-weight: 700;
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;

    color: var(--color-primary);
    font-size: 0.9rem;
    font-weight: 800;

    transition: gap var(--transition);
}

.text-link:hover {
    gap: 14px;
}


/* =========================================================
   10. ABOUT
   ========================================================= */

.about-section {
    overflow: hidden;
    background: var(--color-background);
}

.about-container {
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    align-items: center;
    gap: 85px;
}

.about-image-wrapper {
    position: relative;
    min-height: 520px;

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

    background:
        linear-gradient(
            135deg,
            var(--color-navy-dark),
            var(--color-navy-soft)
        );

    border-radius: var(--radius-large);
    box-shadow: var(--shadow-large);
}

.about-image-wrapper::before {
    content: "";

    position: absolute;
    inset: 24px;

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

.about-image-wrapper::after {
    content: "";

    position: absolute;
    width: 230px;
    height: 230px;
    right: -70px;
    top: -70px;

    background: rgba(7, 92, 255, 0.35);
    border-radius: 50%;
    filter: blur(5px);
}

.about-tech-card {
    position: relative;
    z-index: 2;

    width: calc(100% - 80px);
    padding: 38px;

    color: var(--color-white);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 22px;
    backdrop-filter: blur(14px);
}

.about-card-label {
    color: #91b6ff;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.about-tech-card strong {
    display: block;
    margin-top: 22px;

    color: var(--color-white);
    font-size: 2.25rem;
    line-height: 1.18;
    letter-spacing: -0.04em;
}

.about-code {
    margin-top: 35px;
    padding: 22px;

    display: flex;
    flex-direction: column;

    color: #7ca9ff;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 14px;

    font-family:
        Consolas,
        Monaco,
        monospace;

    font-size: 0.85rem;
}

.experience-badge {
    position: absolute;
    right: -28px;
    bottom: 45px;
    z-index: 3;

    width: 150px;
    min-height: 150px;
    padding: 25px;

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

    background: var(--color-white);
    border-radius: 20px;
    box-shadow: var(--shadow-medium);
}

.experience-badge strong {
    color: var(--color-primary);
    font-size: 2.25rem;
    line-height: 1;
}

.experience-badge span {
    margin-top: 8px;
    color: var(--color-navy);
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1.4;
}

.about-content > p {
    margin-top: 20px;
    font-size: 1rem;
}

.about-values {
    display: flex;
    flex-direction: column;
    gap: 20px;

    margin: 32px 0;
}

.value-item {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 18px;
}

.value-icon {
    width: 52px;
    height: 52px;

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

    color: var(--color-primary);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 14px;

    font-size: 0.77rem;
    font-weight: 900;
}

.value-item h3 {
    margin-bottom: 7px;
    font-size: 1rem;
}

.value-item p {
    font-size: 0.9rem;
}


/* =========================================================
   11. BENEFITS
   ========================================================= */

.benefits-section {
    background: var(--color-white);
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.benefit-card {
    min-height: 280px;
    padding: 32px 28px;

    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);

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

.benefit-card:hover {
    transform: translateY(-7px);
    border-color: rgba(7, 92, 255, 0.3);
    box-shadow: var(--shadow-medium);
}

.benefit-number {
    display: inline-flex;

    color: var(--color-primary);
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.1em;
}

.benefit-card h3 {
    margin-top: 38px;
    font-size: 1.24rem;
}

.benefit-card p {
    margin-top: 16px;
    font-size: 0.91rem;
}


/* =========================================================
   12. PROCESS
   ========================================================= */

.process-section {
    color: var(--color-white);
    background: var(--gradient-dark);
}

.process-section .section-heading h2 {
    color: var(--color-white);
}

.process-section .section-heading p {
    color: rgba(255, 255, 255, 0.65);
}

.process-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.process-step {
    min-height: 290px;
    padding: 30px;

    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-medium);

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

.process-step:hover {
    transform: translateY(-7px);
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(124, 169, 255, 0.4);
}

.process-number {
    width: 54px;
    height: 54px;

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

    color: var(--color-white);
    background: var(--color-primary);
    border-radius: 15px;

    font-size: 0.82rem;
    font-weight: 900;
}

.process-content {
    margin-top: 60px;
}

.process-content h3 {
    color: var(--color-white);
    font-size: 1.18rem;
}

.process-content p {
    margin-top: 14px;
    color: rgba(255, 255, 255, 0.64);
    font-size: 0.9rem;
}


/* =========================================================
   13. INDUSTRIES
   ========================================================= */

.industries-section {
    background: var(--color-background);
}

.industries-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.industries-grid article {
    position: relative;
    min-height: 245px;
    padding: 32px;

    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);

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

.industries-grid article:hover {
    transform: translateY(-6px);
    border-color: rgba(7, 92, 255, 0.28);
    box-shadow: var(--shadow-medium);
}

.industries-grid article > span {
    color: var(--color-primary);
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.1em;
}

.industries-grid h3 {
    margin-top: 38px;
    font-size: 1.2rem;
}

.industries-grid p {
    margin-top: 14px;
    font-size: 0.9rem;
}


/* =========================================================
   14. PROJECT CTA
   ========================================================= */

.project-cta {
    padding: 80px 0;
    background:
        radial-gradient(
            circle at 85% 30%,
            rgba(255, 255, 255, 0.14),
            transparent 30%
        ),
        var(--gradient-primary);
}

.project-cta-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

.project-cta h2 {
    max-width: 760px;
    color: var(--color-white);
}

.project-cta p {
    max-width: 710px;
    margin-top: 18px;

    color: rgba(255, 255, 255, 0.72);
}


/* =========================================================
   15. FAQ
   ========================================================= */

.faq-section {
    background: var(--color-white);
}

.faq-container {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 80px;
}

.faq-heading {
    position: sticky;
    top: 130px;
    align-self: start;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.faq-item {
    overflow: hidden;

    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 15px;

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

.faq-item[open] {
    border-color: rgba(7, 92, 255, 0.3);
    box-shadow: var(--shadow-small);
}

.faq-item summary {
    position: relative;
    cursor: pointer;

    padding: 22px 58px 22px 24px;

    color: var(--color-navy);
    font-size: 0.98rem;
    font-weight: 800;

    list-style: none;
}

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

.faq-item summary::after {
    content: "+";

    position: absolute;
    right: 24px;
    top: 50%;

    width: 28px;
    height: 28px;

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

    color: var(--color-primary);
    background: var(--color-white);
    border-radius: 50%;

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

    transform: translateY(-50%);
}

.faq-item[open] summary::after {
    content: "−";
}

.faq-item p {
    padding: 0 24px 24px;
    font-size: 0.91rem;
}


/* =========================================================
   16. CONTACT
   ========================================================= */

.contact-section {
    background: var(--color-background);
}

.contact-container {
    display: grid;
    grid-template-columns: 1fr 0.82fr;
    align-items: center;
    gap: 80px;
}

.contact-content > p {
    max-width: 680px;
    margin-top: 20px;
}

.contact-options {
    display: flex;
    flex-direction: column;
    gap: 14px;

    margin-top: 35px;
}

.contact-option {
    min-height: 82px;
    padding: 17px 20px;

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

    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 15px;

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

a.contact-option:hover {
    transform: translateX(5px);
    border-color: rgba(7, 92, 255, 0.3);
    box-shadow: var(--shadow-small);
}

.contact-option-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;

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

    color: var(--color-primary);
    background: var(--color-primary-light);
    border-radius: 13px;

    font-size: 0.76rem;
    font-weight: 900;
}

.contact-option small,
.contact-option strong {
    display: block;
}

.contact-option small {
    color: var(--color-text-light);
    font-size: 0.75rem;
}

.contact-option strong {
    margin-top: 3px;
    color: var(--color-navy);
    font-size: 0.92rem;
}

.contact-card {
    padding: 42px;

    color: var(--color-white);
    background: var(--gradient-dark);
    border-radius: var(--radius-large);

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

.contact-card-label {
    color: #92b8ff;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.contact-card h3 {
    margin-top: 16px;

    color: var(--color-white);
    font-size: 2rem;
    letter-spacing: -0.04em;
}

.contact-card > p {
    margin-top: 16px;
    color: rgba(255, 255, 255, 0.67);
}

.contact-checklist {
    display: flex;
    flex-direction: column;
    gap: 12px;

    margin: 28px 0;
    counter-reset: contact-items;
}

.contact-checklist li {
    position: relative;
    padding-left: 38px;

    color: rgba(255, 255, 255, 0.84);
    font-size: 0.9rem;

    counter-increment: contact-items;
}

.contact-checklist li::before {
    content: counter(contact-items);

    position: absolute;
    left: 0;
    top: -2px;

    width: 25px;
    height: 25px;

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

    color: var(--color-white);
    background: var(--color-primary);
    border-radius: 50%;

    font-size: 0.7rem;
    font-weight: 900;
}

.contact-note {
    display: block;
    margin-top: 14px;

    color: rgba(255, 255, 255, 0.55);
    text-align: center;
}


/* =========================================================
   17. FOOTER
   ========================================================= */

.site-footer {
    color: var(--color-white);
    background: var(--color-navy-dark);
}

.footer-main {
    padding: 75px 0 55px;

    display: grid;
    grid-template-columns: 1.4fr repeat(3, 0.75fr);
    gap: 55px;
}

.footer-brand img {
    width: 210px;
    height: auto;

    padding: 10px;
    background: var(--color-white);
    border-radius: 10px;
}

.footer-brand p {
    max-width: 360px;
    margin-top: 24px;

    color: rgba(255, 255, 255, 0.62);
    font-size: 0.9rem;
}

.footer-whatsapp {
    display: inline-flex;
    margin-top: 24px;

    color: #7eabff;
    font-size: 0.9rem;
    font-weight: 800;
}

.footer-column h2 {
    margin-bottom: 22px;

    color: var(--color-white);
    font-size: 0.94rem;
}

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

.footer-column a {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.84rem;

    transition: color var(--transition);
}

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

.footer-region-title {
    margin-top: 32px;
}

.footer-column p {
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.84rem;
}

.footer-bottom {
    min-height: 80px;
    padding: 22px 0;

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

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

.footer-bottom p,
.footer-bottom a {
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.78rem;
}

.footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}

.footer-bottom a:hover {
    color: var(--color-white);
}


/* =========================================================
   18. FLOATING WHATSAPP
   ========================================================= */

.floating-whatsapp {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 900;

    min-height: 56px;
    padding: 8px 18px 8px 8px;

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

    color: var(--color-white);
    background: var(--color-whatsapp);
    border-radius: var(--radius-round);

    box-shadow: 0 16px 40px rgba(37, 211, 102, 0.34);

    font-size: 0.85rem;
    font-weight: 800;

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

.floating-whatsapp > span:first-child {
    width: 40px;
    height: 40px;

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

    color: var(--color-whatsapp);
    background: var(--color-white);
    border-radius: 50%;

    font-size: 0.72rem;
    font-weight: 900;
}

.floating-whatsapp:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 46px rgba(37, 211, 102, 0.44);
}


/* =========================================================
   19. RESPONSIVE - LARGE TABLETS
   ========================================================= */

@media (max-width: 1100px) {

    .main-navigation {
        gap: 18px;
    }

    .main-navigation ul {
        gap: 18px;
    }

    .header-cta {
        display: none;
    }

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

    .hero-content h1 {
        font-size: clamp(2.8rem, 5vw, 4.2rem);
    }

    .window-body {
        min-height: 390px;
        padding: 20px;
    }

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

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

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

    .footer-main {
        grid-template-columns: 1.2fr repeat(3, 0.8fr);
        gap: 35px;
    }
}


/* =========================================================
   20. RESPONSIVE - TABLETS
   ========================================================= */

@media (max-width: 900px) {

    .section {
        padding: 85px 0;
    }

    .header-container {
        min-height: 76px;
    }

    .brand img {
        width: 185px;
    }

    .menu-toggle {
        display: flex;
    }

    .main-navigation {
        position: absolute;
        left: 20px;
        right: 20px;
        top: calc(100% + 1px);

        display: none;
        align-items: stretch;
        flex-direction: column;
        gap: 22px;

        padding: 28px;

        background: var(--color-white);
        border: 1px solid var(--color-border);
        border-radius: 0 0 18px 18px;
        box-shadow: var(--shadow-medium);
    }

    .main-navigation.navigation-open {
        display: flex;
    }

    .main-navigation ul {
        align-items: stretch;
        flex-direction: column;
        gap: 0;
    }

    .main-navigation ul li {
        border-bottom: 1px solid var(--color-border);
    }

    .main-navigation ul a {
        display: block;
        padding: 14px 0;
        font-size: 0.95rem;
    }

    .main-navigation ul a::after {
        display: none;
    }

    .language-selector {
        padding-top: 4px;
    }

    .header-cta {
        display: inline-flex;
        width: 100%;
    }

    .hero {
        min-height: auto;
        padding: 80px 0 90px;
    }

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

    .hero-content {
        max-width: 760px;
        text-align: center;
        margin-inline: auto;
    }

    .hero-content .section-label {
        justify-content: center;
    }

    .hero-description {
        margin-inline: auto;
    }

    .hero-actions,
    .hero-features {
        justify-content: center;
    }

    .hero-visual {
        width: min(100%, 650px);
        margin-inline: auto;
    }

    .development-window {
        transform: none;
    }

    .about-container,
    .faq-container,
    .contact-container {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .about-visual {
        width: min(100%, 650px);
        margin-inline: auto;
    }

    .faq-heading {
        position: static;
    }

    .project-cta-container {
        align-items: flex-start;
        flex-direction: column;
        gap: 30px;
    }

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

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


/* =========================================================
   21. RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 650px) {

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

    .section {
        padding: 72px 0;
    }

    .section-heading {
        margin-bottom: 38px;
    }

    .section-heading h2,
    .about-content h2,
    .contact-content h2,
    .faq-heading h2,
    .project-cta h2 {
        font-size: 2rem;
    }

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

    .brand img {
        width: 165px;
    }

    .main-navigation {
        left: 14px;
        right: 14px;
    }

    .hero {
        padding: 60px 0 75px;
    }

    .hero-content h1 {
        font-size: 2.65rem;
        letter-spacing: -0.05em;
    }

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

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

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

    .hero-features {
        align-items: center;
        flex-direction: column;
        gap: 12px;
    }

    .window-body {
        min-height: auto;
        grid-template-columns: 1fr;
    }

    .code-panel {
        min-height: 190px;
    }

    .dashboard-card-main {
        min-height: 190px;
    }

    .trust-items {
        gap: 12px 20px;
    }

    .trust-items span {
        font-size: 0.78rem;
    }

    .services-grid,
    .benefits-grid,
    .process-list,
    .industries-grid {
        grid-template-columns: 1fr;
    }

    .service-card {
        min-height: auto;
        padding: 28px 24px;
    }

    .services-footer {
        align-items: flex-start;
        flex-direction: column;
        padding: 24px;
    }

    .about-image-wrapper {
        min-height: 430px;
    }

    .about-tech-card {
        width: calc(100% - 40px);
        padding: 28px;
    }

    .about-tech-card strong {
        font-size: 1.8rem;
    }

    .experience-badge {
        right: 15px;
        bottom: -30px;

        width: 135px;
        min-height: 125px;
    }

    .about-content {
        padding-top: 25px;
    }

    .process-step {
        min-height: 250px;
    }

    .process-content {
        margin-top: 40px;
    }

    .project-cta {
        padding: 65px 0;
    }

    .project-cta .button {
        width: 100%;
    }

    .contact-card {
        padding: 30px 24px;
    }

    .contact-card h3 {
        font-size: 1.7rem;
    }

    .footer-main {
        grid-template-columns: 1fr;
        gap: 38px;
        padding-top: 60px;
    }

    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .floating-whatsapp {
        right: 14px;
        bottom: 14px;
        min-height: 54px;
        padding-right: 8px;
    }

    .floating-whatsapp-text {
        display: none;
    }
}


/* =========================================================
   22. RESPONSIVE - SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {

    .hero-content h1 {
        font-size: 2.25rem;
    }

    .hero-code {
        display: none;
    }

    .dashboard-row {
        grid-template-columns: 1fr;
    }

    .service-number {
        font-size: 2.2rem;
    }

    .about-tech-card strong {
        font-size: 1.55rem;
    }

    .about-code {
        padding: 16px;
        font-size: 0.72rem;
    }

    .experience-badge {
        right: 8px;
    }

    .value-item {
        grid-template-columns: 45px 1fr;
    }

    .value-icon {
        width: 45px;
        height: 45px;
    }
}


/* =========================================================
   23. REDUCED MOTION
   ========================================================= */

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

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
/* HopDive wordmark and internal pages */
.brand-wordmark{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;color:#071735;white-space:nowrap}.brand-mark{position:relative;font-size:3rem;font-weight:900;font-style:italic;line-height:1;color:#092a6e;letter-spacing:-.35rem;padding-right:.35rem}.brand-mark>span{display:inline-grid;place-items:center;position:absolute;right:-.35rem;bottom:.1rem;width:1.55rem;height:1.55rem;border-radius:.25rem;background:#0865f5;color:#fff;font-size:.42rem;font-style:normal;letter-spacing:0}.brand-name{font-size:1.7rem;font-weight:800;line-height:.9}.brand-name>span{color:#0865f5}.brand-name small{display:block;margin-top:.45rem;font-size:.38rem;letter-spacing:.13em;color:#526078}.footer-wordmark{color:#fff}.footer-wordmark .brand-name{color:#fff}.footer-wordmark .brand-name small{color:#b9cae8}
.internal-hero{padding:7.5rem 0 5rem;background:radial-gradient(circle at 75% 30%,#0b3e8d 0,transparent 28%),linear-gradient(135deg,#031126,#061d42 65%,#032d6b);color:#fff}.internal-hero .section-label{color:#66a3ff}.internal-hero h1{max-width:850px;margin:.75rem 0 1rem;font-size:clamp(2.3rem,5vw,4.5rem);line-height:1.05}.internal-hero p{max-width:720px;font-size:1.15rem;color:#d2def1}.page-content{padding:5rem 0}.page-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}.info-card{padding:2rem;border:1px solid #dbe3ef;border-radius:14px;background:#fff;box-shadow:0 12px 35px rgba(4,24,58,.06)}.info-card .number{display:inline-grid;place-items:center;width:3rem;height:3rem;border-radius:12px;background:#eaf2ff;color:#075ff0;font-weight:800}.info-card h2,.info-card h3{margin:1rem 0 .6rem;color:#071735}.info-card p{color:#526078}.split{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}.content-copy h2{font-size:clamp(2rem,4vw,3.25rem);color:#071735}.content-copy p{margin:1rem 0;color:#526078}.feature-list{display:grid;gap:.85rem;margin:1.5rem 0}.feature-list li{list-style:none;padding:1rem 1rem 1rem 3rem;border-radius:10px;background:#f3f7fd;position:relative}.feature-list li:before{content:'✓';position:absolute;left:1rem;color:#075ff0;font-weight:900}.page-cta{padding:3rem;border-radius:18px;background:linear-gradient(120deg,#075ff0,#0644bb);color:#fff;text-align:center}.page-cta h2{font-size:clamp(1.8rem,4vw,3rem)}.page-cta p{margin:.6rem auto 1.5rem;max-width:650px;color:#e7efff}.lang-note{font-size:.78rem;color:#667085}@media(max-width:900px){.page-grid,.split{grid-template-columns:1fr}.internal-hero{padding:5rem 0 3.5rem}.brand-name{font-size:1.35rem}.brand-mark{font-size:2.5rem}}
@media(max-width:1050px){body:has(.internal-hero) .header-container{min-height:86px;flex-wrap:wrap;padding-block:.75rem}body:has(.internal-hero) .main-navigation{position:static;display:flex;flex:1 1 100%;height:auto;min-height:0;padding:.5rem 0 0;background:#fff;box-shadow:none;opacity:1;visibility:visible;transform:none;flex-direction:row;justify-content:center}body:has(.internal-hero) .main-navigation ul{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:.25rem .8rem}body:has(.internal-hero) .main-navigation ul li{width:auto}body:has(.internal-hero) .main-navigation ul a{font-size:.82rem}body:has(.internal-hero) .header-cta{display:none}body:has(.internal-hero) .language-selector{margin-left:.5rem}body:has(.internal-hero) .internal-hero{padding-top:9rem}}@media(max-width:620px){body:has(.internal-hero) .brand-wordmark{margin:auto}body:has(.internal-hero) .main-navigation{gap:.5rem}body:has(.internal-hero) .main-navigation ul{width:100%}body:has(.internal-hero) .language-selector{margin:auto}body:has(.internal-hero) .internal-hero{padding-top:11rem}}
/* Animated hero artwork */
.hero-visual{isolation:isolate;min-height:560px;display:grid;place-items:center;perspective:1200px}.visual-glow{position:absolute;z-index:-2;width:115%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(16,99,255,.25),rgba(62,139,255,.08) 42%,transparent 70%);filter:blur(10px);animation:heroPulse 5s ease-in-out infinite}.development-window{width:min(100%,620px);animation:heroFloat 6s ease-in-out infinite;transform-style:preserve-3d}.development-window:after{content:"";position:absolute;left:8%;right:8%;bottom:-25px;height:32px;border-radius:50%;background:rgba(2,21,54,.2);filter:blur(18px);z-index:-1;animation:shadowPulse 6s ease-in-out infinite}.floating-metric{position:absolute;z-index:4;display:grid;grid-template-columns:auto 1fr;gap:.1rem .65rem;align-items:center;min-width:170px;padding:1rem 1.15rem;border:1px solid rgba(255,255,255,.7);border-radius:16px;background:rgba(255,255,255,.88);box-shadow:0 18px 55px rgba(4,33,84,.18);backdrop-filter:blur(14px);animation:metricFloat 5s ease-in-out infinite}.floating-metric span{grid-row:1/3;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#075cff;color:#fff;font-size:.72rem;font-weight:900}.floating-metric strong{color:#061b44;font-size:1.1rem}.floating-metric small{color:#62708a}.metric-top{top:8%;right:-5%;animation-delay:-1.5s}.metric-bottom{bottom:5%;left:-6%;animation-delay:-3.5s}.dashboard-chart:after{content:"";position:absolute;left:12px;right:12px;bottom:10px;height:3px;background:linear-gradient(90deg,transparent,#0d6bff 20%,#4b9dff 45%,#0d6bff 70%,transparent);transform-origin:left;animation:chartGrow 3.5s ease-in-out infinite}.code-line{animation:codeGlow 2.8s ease-in-out infinite}.code-line:nth-child(2){animation-delay:-.4s}.code-line:nth-child(3){animation-delay:-.8s}.code-line:nth-child(4){animation-delay:-1.2s}.code-line:nth-child(5){animation-delay:-1.6s}@keyframes heroFloat{0%,100%{transform:perspective(1000px) rotateY(-4deg) rotateX(2deg) translateY(0)}50%{transform:perspective(1000px) rotateY(-1deg) rotateX(1deg) translateY(-16px)}}@keyframes metricFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(1deg)}}@keyframes heroPulse{0%,100%{transform:scale(.94);opacity:.75}50%{transform:scale(1.04);opacity:1}}@keyframes shadowPulse{0%,100%{transform:scale(.9);opacity:.7}50%{transform:scale(1.08);opacity:.4}}@keyframes chartGrow{0%,15%{transform:scaleX(.15);opacity:.3}55%,100%{transform:scaleX(1);opacity:1}}@keyframes codeGlow{0%,100%{opacity:.4}50%{opacity:1;box-shadow:0 0 14px rgba(22,116,255,.45)}}@media(max-width:1100px){.hero-container{grid-template-columns:1fr 1fr;gap:35px}.hero-visual{min-height:500px}.window-body{min-height:390px;padding:20px}.floating-metric{min-width:150px}.metric-top{right:-1%}.metric-bottom{left:-1%}}@media(max-width:860px){.hero-container{grid-template-columns:1fr}.hero-content{max-width:720px}.hero-visual{min-height:520px;width:min(100%,650px);margin:auto}.hero-content h1{font-size:clamp(3rem,11vw,5.2rem)}.metric-top{right:0}.metric-bottom{left:0}}@media(max-width:560px){.hero-visual{min-height:430px}.window-body{grid-template-columns:1fr;min-height:330px}.code-panel{display:none}.floating-metric{min-width:135px;padding:.7rem}.floating-metric span{width:34px;height:34px}.metric-top{top:3%}.metric-bottom{bottom:0}.dashboard-card-main strong{font-size:2.35rem}}
@media(prefers-reduced-motion:reduce){.development-window,.floating-metric,.visual-glow,.development-window:after,.dashboard-chart:after,.code-line{animation:none!important}}
/* Premium solutions story */
.solution-story{position:relative;padding:110px 0 90px;background:#f7f9fd;overflow:hidden}.solution-story:before{content:"";position:absolute;right:-180px;top:-220px;width:520px;height:520px;border-radius:50%;background:rgba(7,92,255,.08);filter:blur(20px)}.solution-intro{position:relative;display:grid;grid-template-columns:1.2fr .8fr;gap:90px;align-items:end;margin-bottom:55px}.solution-intro h2{margin-top:12px;font-size:clamp(2.6rem,5vw,4.8rem);line-height:1.02;letter-spacing:-.055em;color:#061a40}.solution-intro>p{padding-bottom:8px;font-size:1.1rem;line-height:1.8;color:#59677d}.solution-showcase{display:grid;gap:22px}.solution-feature{position:relative;overflow:hidden;border:1px solid rgba(5,36,84,.11);border-radius:26px;background:#fff;box-shadow:0 18px 55px rgba(5,31,72,.07)}.feature-primary{display:grid;grid-template-columns:.85fr 1.15fr;min-height:500px}.solution-copy{padding:58px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.solution-number{display:inline-grid;place-items:center;width:42px;height:42px;border:1px solid #d8e3f5;border-radius:50%;color:#075cff;font-weight:900}.solution-kicker{margin:24px 0 10px;color:#075cff!important;font-size:.72rem!important;font-weight:900;letter-spacing:.14em}.solution-feature h3{font-size:clamp(1.75rem,3vw,3rem);line-height:1.08;letter-spacing:-.035em;color:#061a40}.solution-feature p:not(.solution-kicker){margin-top:18px;line-height:1.7;color:#637086}.solution-feature a{display:inline-flex;gap:.55rem;margin-top:28px;color:#075cff;font-weight:800;text-decoration:none}.solution-art{position:relative;align-self:stretch;margin:42px 42px 42px 0;border-radius:20px;background:#061a40;box-shadow:0 30px 70px rgba(0,27,75,.28);transform:perspective(900px) rotateY(-4deg)}.art-top{height:45px;display:flex;align-items:center;gap:6px;padding:0 16px;border-bottom:1px solid rgba(255,255,255,.08)}.art-top i{width:7px;height:7px;border-radius:50%;background:#377ded}.art-sidebar{position:absolute;left:0;top:45px;bottom:0;width:68px;display:grid;align-content:start;gap:18px;padding:24px 19px;border-right:1px solid rgba(255,255,255,.08)}.art-sidebar span{height:8px;border-radius:8px;background:rgba(255,255,255,.15)}.art-canvas{position:absolute;inset:70px 28px 28px 96px}.art-stat{display:grid;padding:20px;border:1px solid rgba(255,255,255,.09);border-radius:16px;background:#0a2857;color:#fff}.art-stat small{color:#8fb4ef}.art-stat strong{margin-top:4px;font-size:2.4rem}.art-bars{height:150px;margin-top:18px;display:flex;align-items:end;gap:9px;padding:20px;border-radius:16px;background:#09234d}.art-bars i{flex:1;border-radius:7px 7px 2px 2px;background:linear-gradient(#2582ff,#0752dc);animation:barBreathe 3s ease-in-out infinite}.art-bars i:nth-child(1){height:35%}.art-bars i:nth-child(2){height:62%;animation-delay:-.4s}.art-bars i:nth-child(3){height:48%;animation-delay:-.8s}.art-bars i:nth-child(4){height:85%;animation-delay:-1.2s}.art-bars i:nth-child(5){height:72%;animation-delay:-1.6s}.art-status{display:flex;align-items:center;gap:8px;margin-top:15px;color:#c5d7f5;font-size:.8rem}.art-status span{width:8px;height:8px;border-radius:50%;background:#2bdb84;box-shadow:0 0 14px #2bdb84}.solution-pair{display:grid;grid-template-columns:1fr 1fr;gap:22px}.feature-compact{min-height:440px;padding:46px}.feature-compact .solution-number{position:absolute;right:32px;top:32px}.compact-symbol{display:grid;place-items:center;width:86px;height:86px;border-radius:22px;background:#eaf2ff;color:#075cff;font-size:1.65rem;font-weight:900}.feature-dark{background:linear-gradient(135deg,#061a40,#082d69);border-color:transparent}.feature-dark h3,.feature-dark p:not(.solution-kicker),.feature-dark a{color:#fff}.feature-dark p:not(.solution-kicker){color:#b8cae7}.feature-dark .solution-number{border-color:rgba(255,255,255,.18);color:#77aaff}.compact-orbit{position:relative;display:grid;place-items:center;width:100px;height:100px;border:1px solid rgba(67,137,255,.3);border-radius:50%}.compact-orbit:before,.compact-orbit:after{content:"";position:absolute;border:1px solid rgba(67,137,255,.22);border-radius:50%}.compact-orbit:before{inset:12px}.compact-orbit:after{inset:25px}.compact-orbit b{z-index:1;color:#fff}.compact-orbit i{position:absolute;width:9px;height:9px;border-radius:50%;background:#3c8cff;box-shadow:0 0 18px #3c8cff;animation:orbit 5s linear infinite}.compact-orbit i:nth-child(2){animation-delay:-1.65s}.compact-orbit i:nth-child(3){animation-delay:-3.3s}.trust-line{display:grid;grid-template-columns:repeat(4,1fr);margin-top:45px;border-top:1px solid #dbe3ef;border-bottom:1px solid #dbe3ef}.trust-line span{padding:20px;text-align:center;color:#536079;font-size:.82rem;font-weight:800}.trust-line span+span{border-left:1px solid #dbe3ef}.solution-story+.advantages,.solution-story~.services-section{display:none}@keyframes barBreathe{0%,100%{filter:brightness(.8);transform:scaleY(.92);transform-origin:bottom}50%{filter:brightness(1.25);transform:scaleY(1)}}@keyframes orbit{from{transform:rotate(0deg) translateX(49px) rotate(0deg)}to{transform:rotate(360deg) translateX(49px) rotate(-360deg)}}@media(max-width:850px){.solution-story{padding:80px 0 65px}.solution-intro,.feature-primary,.solution-pair{grid-template-columns:1fr}.solution-intro{gap:25px}.solution-copy{padding:38px}.solution-art{min-height:400px;margin:0 28px 28px;transform:none}.trust-line{grid-template-columns:1fr 1fr}.trust-line span:nth-child(3){border-left:0;border-top:1px solid #dbe3ef}.trust-line span:nth-child(4){border-top:1px solid #dbe3ef}}@media(max-width:520px){.feature-compact{padding:32px;min-height:400px}.solution-art{min-height:340px;margin-inline:18px}.art-canvas{inset:65px 18px 18px 82px}.trust-line{grid-template-columns:1fr}.trust-line span+span{border-left:0;border-top:1px solid #dbe3ef}}
@media(prefers-reduced-motion:reduce){.art-bars i,.compact-orbit i{animation:none!important}}
.solution-story+.page-content{display:none}
/* Minimal premium footer */
.site-footer{display:none}.premium-footer{position:relative;margin-top:90px;padding:0 0 26px;background:#03132f;color:#fff;overflow:hidden}.premium-footer:before{content:"";position:absolute;right:-180px;bottom:-260px;width:600px;height:600px;border-radius:50%;background:rgba(11,92,255,.18);filter:blur(30px)}.footer-cta-panel{position:relative;z-index:1;top:-55px;min-height:270px;padding:48px 55px;display:flex;align-items:center;justify-content:space-between;gap:40px;border-radius:28px;background:linear-gradient(120deg,#075cff,#0645c2);box-shadow:0 30px 80px rgba(0,54,170,.3);overflow:hidden}.footer-cta-panel:after{content:"";position:absolute;right:12%;top:-80%;width:340px;height:340px;border:1px solid rgba(255,255,255,.16);border-radius:50%;box-shadow:0 0 0 55px rgba(255,255,255,.04),0 0 0 110px rgba(255,255,255,.025)}.footer-eyebrow{display:block;margin-bottom:12px;font-size:.72rem;font-weight:900;letter-spacing:.16em;color:#cfe0ff}.footer-cta-panel h2{position:relative;z-index:1;font-size:clamp(2.2rem,4.5vw,4.3rem);line-height:1.02;letter-spacing:-.05em;color:#fff}.footer-cta-button{position:relative;z-index:2;display:inline-flex;align-items:center;gap:35px;flex:0 0 auto;padding:18px 22px 18px 25px;border-radius:999px;background:#fff;color:#062d77;text-decoration:none;font-weight:900;box-shadow:0 15px 40px rgba(0,30,90,.16)}.footer-cta-button span{display:grid;place-items:center;width:37px;height:37px;border-radius:50%;background:#061a40;color:#fff}.premium-footer-main{position:relative;z-index:1;display:grid;grid-template-columns:1.35fr .55fr .8fr;gap:70px;padding:20px 0 65px}.premium-footer-brand p{max-width:430px;margin-top:25px;color:#aebed8;line-height:1.75}.footer-nav,.footer-contact{display:flex;flex-direction:column;align-items:flex-start;gap:12px}.footer-nav>span,.footer-contact>span{margin-bottom:10px;color:#6681ab;font-size:.67rem;font-weight:900;letter-spacing:.16em}.footer-nav a,.footer-contact a{color:#fff;text-decoration:none;font-weight:700}.footer-nav a:hover,.footer-contact a:hover{color:#61a0ff}.footer-contact p{color:#aebed8}.premium-footer-bottom{position:relative;z-index:1;display:flex;justify-content:space-between;gap:25px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);color:#8599b9;font-size:.78rem}.premium-footer-bottom div{display:flex;gap:8px}.premium-footer-bottom a{color:#fff;text-decoration:none;font-weight:800}@media(max-width:820px){.footer-cta-panel{top:-35px;min-height:0;padding:38px;align-items:flex-start;flex-direction:column}.premium-footer-main{grid-template-columns:1fr 1fr}.premium-footer-brand{grid-column:1/-1}.premium-footer-bottom{flex-wrap:wrap}}@media(max-width:520px){.premium-footer{margin-top:60px}.footer-cta-panel{padding:30px 24px;border-radius:20px}.footer-cta-button{width:100%;justify-content:space-between}.premium-footer-main{grid-template-columns:1fr;gap:38px}.premium-footer-brand{grid-column:auto}.premium-footer-bottom{flex-direction:column}.footer-cta-panel h2 br{display:none}}
/* Modern company story */
.company-story{padding:120px 0;background:#fff}.company-story-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:90px;align-items:center}.company-message h2{margin:18px 0 26px;font-size:clamp(2.6rem,4.8vw,4.8rem);line-height:1.02;letter-spacing:-.055em;color:#061a40}.company-message>p{max-width:560px;font-size:1.08rem;line-height:1.8;color:#607089}.story-link{display:inline-flex;gap:.6rem;margin-top:28px;color:#075cff;font-weight:900;text-decoration:none}.company-proof{overflow:hidden;border-radius:30px;background:linear-gradient(145deg,#061a40,#082d69);box-shadow:0 30px 80px rgba(5,32,76,.2)}.proof-visual{position:relative;height:340px;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at center,rgba(43,127,255,.22),transparent 48%)}.proof-visual:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:34px 34px;mask-image:radial-gradient(circle,#000,transparent 72%)}.proof-core{z-index:2;display:grid;place-items:center;width:132px;height:132px;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:rgba(8,45,105,.85);box-shadow:0 0 0 18px rgba(30,111,255,.08),0 20px 50px rgba(0,0,0,.25);color:#fff}.proof-core span{font-size:2.2rem;font-weight:900;letter-spacing:-.08em}.proof-core small{text-align:center;color:#8eb6f4;font-size:.54rem;font-weight:900;letter-spacing:.1em}.proof-orbit{position:absolute;border:1px solid rgba(78,144,255,.25);border-radius:50%}.orbit-one{width:240px;height:240px;animation:storySpin 16s linear infinite}.orbit-two{width:410px;height:210px;transform:rotate(-18deg);animation:storySpinWide 22s linear infinite}.proof-location{position:absolute;z-index:3;padding:8px 12px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(5,25,60,.8);color:#d9e8ff;font-size:.64rem;font-weight:900;letter-spacing:.12em;backdrop-filter:blur(8px)}.location-us{top:20%;right:18%}.location-mx{bottom:16%;right:25%}.location-latam{bottom:23%;left:15%}.proof-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(255,255,255,.1)}.proof-grid article{min-height:190px;padding:30px;color:#fff}.proof-grid article:nth-child(odd){border-right:1px solid rgba(255,255,255,.1)}.proof-grid article:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.1)}.proof-grid strong{color:#61a0ff;font-size:.7rem;letter-spacing:.1em}.proof-grid h3{margin:12px 0 8px;font-size:1.1rem}.proof-grid p{color:#aebfda;font-size:.86rem;line-height:1.6}.company-story+.about-section{display:none}@keyframes storySpin{to{transform:rotate(360deg)}}@keyframes storySpinWide{from{transform:rotate(-18deg)}to{transform:rotate(342deg)}}@media(max-width:920px){.company-story{padding:85px 0}.company-story-grid{grid-template-columns:1fr;gap:50px}.company-message{max-width:700px}.company-proof{max-width:760px;width:100%;margin:auto}}@media(max-width:560px){.company-story{padding:70px 0}.proof-visual{height:280px}.proof-grid{grid-template-columns:1fr}.proof-grid article{min-height:auto}.proof-grid article:nth-child(odd){border-right:0}.proof-grid article+article{border-top:1px solid rgba(255,255,255,.1)}.orbit-two{width:330px}.company-message h2{font-size:2.55rem}}@media(prefers-reduced-motion:reduce){.proof-orbit{animation:none!important}}
/* Simplified home ending: dedicated pages hold process and portfolio content */
.process-section,.projects-section,.faq-section,.contact-section{display:none!important}
.premium-footer{margin-top:0!important;padding:0!important;background:#fff!important;color:#061a40!important;border-top:1px solid #dfe6f1!important;overflow:visible!important}.premium-footer:before,.footer-cta-panel{display:none!important}.premium-footer-main{display:grid!important;grid-template-columns:1.35fr .65fr .9fr!important;gap:55px!important;padding:55px 0 38px!important}.premium-footer .footer-wordmark{color:#061a40!important}.premium-footer .footer-wordmark .brand-name{color:#061a40!important}.premium-footer .footer-wordmark .brand-name small{color:#68758b!important}.premium-footer-brand p{max-width:390px!important;margin-top:18px!important;color:#68758b!important;font-size:.9rem!important;line-height:1.65!important}.footer-nav,.footer-contact{gap:9px!important}.footer-nav>span,.footer-contact>span{margin-bottom:5px!important;color:#8592a6!important}.footer-nav a,.footer-contact a{color:#061a40!important;font-size:.9rem!important}.footer-nav a:hover,.footer-contact a:hover{color:#075cff!important}.footer-contact p{color:#68758b!important;font-size:.88rem!important}.premium-footer-bottom{padding:18px 0 22px!important;border-top:1px solid #e4e9f1!important;color:#7b8799!important}.premium-footer-bottom a{color:#061a40!important}.floating-whatsapp{width:54px!important;height:54px!important;right:24px!important;bottom:22px!important;box-shadow:0 10px 28px rgba(0,180,90,.22)!important}@media(max-width:760px){.premium-footer-main{grid-template-columns:1fr 1fr!important;gap:35px!important;padding-top:42px!important}.premium-footer-brand{grid-column:1/-1!important}.premium-footer-bottom{align-items:flex-start!important}}@media(max-width:480px){.premium-footer-main{grid-template-columns:1fr!important}.premium-footer-brand{grid-column:auto!important}.premium-footer-bottom{flex-direction:column!important;gap:9px!important}}
/* Unified four-item navigation: Home, Services, About, Contact */
.site-header .main-navigation>ul>li:nth-child(n+4){display:none!important}.site-header .header-cta{padding:0!important;margin-left:4px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:#061a40!important;font-size:0!important;min-height:auto!important}.site-header .header-cta:before{content:"Contact";font-size:.92rem;font-weight:800}.site-header .header-cta:after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:2px;border-radius:2px;background:#075cff;transform:scaleX(0);transition:transform .25s ease}.site-header .header-cta:hover{transform:none!important;color:#075cff!important}.site-header .header-cta:hover:after{transform:scaleX(1)}html[lang^="es"] .site-header .header-cta:before{content:"Contacto"}.site-header{background:rgba(255,255,255,.9)!important;backdrop-filter:blur(18px);box-shadow:0 8px 35px rgba(4,30,72,.045)!important}.site-header .main-navigation ul a{font-weight:800!important}.language-selector{padding:6px 9px!important;border:1px solid #dbe4f2;border-radius:999px;background:#f7f9fd}.solution-feature,.company-proof,.development-window{transition:transform .35s ease,box-shadow .35s ease}.solution-feature:hover{transform:translateY(-5px);box-shadow:0 25px 65px rgba(5,31,72,.12)}.company-proof:hover{transform:translateY(-4px);box-shadow:0 36px 90px rgba(5,32,76,.25)}@media(max-width:1050px){.site-header .header-cta{display:inline-flex!important;margin:0 8px!important}.site-header .header-cta:after{display:none}.site-header .main-navigation{gap:14px!important}}@media(max-width:620px){.site-header .main-navigation>ul{display:grid!important;grid-template-columns:repeat(3,auto)!important;width:100%!important}.site-header .header-cta{margin:auto!important}.language-selector{margin:auto!important}}
@media(prefers-reduced-motion:reduce){.solution-feature,.company-proof,.development-window{transition:none!important}}
/* Three representative animated solutions */
.three-solutions{padding:115px 0;background:#f7f9fd}.three-solutions-heading{max-width:900px;text-align:center}.three-solutions-heading h2{margin:14px 0 18px;font-size:clamp(2.8rem,5vw,5rem);line-height:1;letter-spacing:-.055em;color:#061a40}.three-solutions-heading>p{max-width:680px;margin:auto;color:#627089;font-size:1.08rem;line-height:1.75}.solutions-stack{display:grid;gap:28px;margin-top:65px}.solution-row{display:grid;grid-template-columns:.88fr 1.12fr;min-height:570px;overflow:hidden;border:1px solid #dce5f2;border-radius:30px;background:#fff;box-shadow:0 18px 55px rgba(4,29,70,.07)}.solution-row.reverse{grid-template-columns:1.12fr .88fr}.solution-row.reverse .solution-row-copy{order:2}.solution-row-copy{padding:55px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.solution-tag{color:#075cff;font-size:.7rem;font-weight:900;letter-spacing:.14em}.solution-row h3{margin:18px 0;font-size:clamp(2rem,3.5vw,3.5rem);line-height:1.05;letter-spacing:-.045em;color:#061a40}.solution-row-copy>p{color:#637086;line-height:1.75}.solution-row ul{display:grid;gap:8px;margin:23px 0 0;padding:0}.solution-row li{position:relative;padding-left:22px;list-style:none;color:#273a58;font-size:.9rem;font-weight:700}.solution-row li:before{content:"";position:absolute;left:0;top:.48em;width:8px;height:8px;border-radius:50%;background:#075cff;box-shadow:0 0 0 4px #e6efff}.solution-row a{display:inline-flex;gap:.6rem;margin-top:28px;color:#075cff;font-weight:900;text-decoration:none}.motion-scene{position:relative;min-height:100%;overflow:hidden;background:radial-gradient(circle at 75% 25%,rgba(39,124,255,.25),transparent 35%),linear-gradient(145deg,#061a40,#082d69)}.motion-scene:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:32px 32px}.app-window{position:absolute;inset:70px 65px 75px 50px;border:1px solid rgba(255,255,255,.16);border-radius:18px;background:#0b2854;box-shadow:0 30px 70px rgba(0,0,0,.28);animation:sceneFloat 6s ease-in-out infinite}.scene-toolbar{height:42px;display:flex;align-items:center;gap:6px;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.09)}.scene-toolbar i{width:7px;height:7px;border-radius:50%;background:#3889ff}.scene-nav{position:absolute;left:0;top:42px;bottom:0;width:65px;display:grid;align-content:start;gap:16px;padding:24px 17px;border-right:1px solid rgba(255,255,255,.08)}.scene-nav span{height:7px;border-radius:7px;background:rgba(255,255,255,.18)}.scene-dashboard{position:absolute;inset:68px 24px 24px 90px;display:grid;grid-template-columns:1fr 1fr;gap:12px}.data-card{padding:17px;border-radius:13px;background:#0f3774;color:#fff}.data-card small{color:#89b4f7}.data-card strong{display:block;margin-top:5px;font-size:1.65rem}.data-flow{grid-column:1/-1;display:flex;align-items:end;gap:8px;padding:18px;border-radius:13px;background:#0a2148}.data-flow i{flex:1;border-radius:5px 5px 2px 2px;background:linear-gradient(#3e97ff,#075cff);animation:dataBars 3s ease-in-out infinite}.data-flow i:nth-child(1){height:42%}.data-flow i:nth-child(2){height:75%;animation-delay:-.5s}.data-flow i:nth-child(3){height:58%;animation-delay:-1s}.data-flow i:nth-child(4){height:92%;animation-delay:-1.5s}.database-stack{position:absolute;right:28px;bottom:35px;width:92px;height:92px;display:grid;place-items:center;color:#fff;z-index:3}.database-stack i{position:absolute;width:85px;height:28px;border:2px solid #4d9cff;border-radius:50%;background:#0b397e}.database-stack i:nth-child(1){top:8px}.database-stack i:nth-child(2){top:29px}.database-stack i:nth-child(3){top:50px}.database-stack b{z-index:2;font-size:.75rem}.flow-dot{position:absolute;width:8px;height:8px;border-radius:50%;background:#5aa2ff;box-shadow:0 0 14px #5aa2ff;animation:flowMove 3.2s linear infinite}.dot-a{top:38%;left:12%}.dot-b{bottom:25%;left:18%;animation-delay:-1.6s}.access-gate{position:absolute;left:50%;top:50%;width:230px;height:300px;transform:translate(-40%,-50%)}.gate-screen{position:absolute;left:0;top:0;width:150px;height:190px;display:grid;place-items:center;align-content:center;border:1px solid rgba(255,255,255,.2);border-radius:20px;background:#0b2a5b;color:#fff;box-shadow:0 25px 60px rgba(0,0,0,.3)}.gate-screen span{color:#8eb8f8;font-size:.64rem;letter-spacing:.14em}.gate-screen strong{margin-top:8px;font-size:.95rem}.gate-screen i{width:48px;height:48px;margin-top:18px;border:3px solid #2edd86;border-radius:50%;position:relative}.gate-screen i:after{content:"";position:absolute;left:13px;top:7px;width:13px;height:22px;border-right:3px solid #2edd86;border-bottom:3px solid #2edd86;transform:rotate(42deg)}.gate-post{position:absolute;left:61px;top:175px;width:28px;height:125px;background:linear-gradient(90deg,#071d40,#16457f)}.gate-arm{position:absolute;left:75px;top:185px;width:170px;height:14px;border-radius:8px;background:repeating-linear-gradient(90deg,#fff 0 28px,#1765d7 28px 55px);transform-origin:left;animation:gateOpen 5s ease-in-out infinite}.id-card{position:absolute;left:32px;bottom:45px;width:180px;padding:15px;display:flex;gap:12px;border:1px solid rgba(255,255,255,.18);border-radius:15px;background:rgba(10,42,91,.9);animation:cardTap 5s ease-in-out infinite}.id-avatar{width:42px;height:42px;border-radius:50%;background:#438fff}.id-card div{flex:1;display:grid;align-content:center;gap:6px}.id-card i{height:6px;border-radius:6px;background:rgba(255,255,255,.23)}.access-log{position:absolute;right:25px;bottom:38px;display:grid;gap:9px}.access-log span{padding:10px 13px;border-radius:10px;background:rgba(8,35,76,.92);color:#d6e5ff;font-size:.72rem}.access-log i{display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:#2edd86}.pos-screen{position:absolute;inset:60px 80px 80px 45px;padding:24px;border:1px solid rgba(255,255,255,.17);border-radius:18px;background:#0b2a5b;box-shadow:0 28px 70px rgba(0,0,0,.3);animation:sceneFloat 6s ease-in-out infinite}.pos-items{display:grid;gap:10px}.pos-items span{display:flex;justify-content:space-between;padding:12px;border-radius:9px;background:#0e3977;color:#d9e8ff;font-size:.78rem}.pos-chart{height:150px;display:flex;align-items:end;gap:10px;margin-top:18px;padding:15px;background:#071e43;border-radius:12px}.pos-chart i{flex:1;border-radius:5px 5px 0 0;background:linear-gradient(#5ca8ff,#075cff);animation:dataBars 3.3s ease-in-out infinite}.pos-chart i:nth-child(1){height:50%}.pos-chart i:nth-child(2){height:78%;animation-delay:-.4s}.pos-chart i:nth-child(3){height:62%;animation-delay:-.8s}.pos-chart i:nth-child(4){height:90%;animation-delay:-1.2s}.scanner-line{position:absolute;left:18%;right:18%;top:25%;height:2px;background:#28dd8a;box-shadow:0 0 14px #28dd8a;animation:scan 3.2s ease-in-out infinite}.chat-bubble{position:absolute;z-index:3;padding:12px 16px;border-radius:14px;background:#fff;color:#09224c;font-size:.76rem;font-weight:800;box-shadow:0 14px 35px rgba(0,0,0,.2);animation:bubblePop 5s ease-in-out infinite}.bubble-one{right:18px;top:24%;border-bottom-right-radius:3px}.bubble-two{right:45px;top:36%;background:#2a80ff;color:#fff;border-bottom-left-radius:3px;animation-delay:-2.5s}.inventory-badge{position:absolute;right:28px;bottom:32px;width:95px;height:95px;display:grid;place-items:center;align-content:center;border-radius:50%;background:#fff;color:#061a40;box-shadow:0 18px 45px rgba(0,0,0,.23)}.inventory-badge small{color:#075cff;font-weight:900}.inventory-badge strong{font-size:1.55rem}.three-solutions+.solution-story{display:none!important}@keyframes sceneFloat{50%{transform:translateY(-12px)}}@keyframes dataBars{50%{filter:brightness(1.35);transform:scaleY(.88);transform-origin:bottom}}@keyframes flowMove{to{transform:translate(330px,120px);opacity:0}}@keyframes gateOpen{0%,25%,75%,100%{transform:rotate(0)}40%,60%{transform:rotate(-68deg)}}@keyframes cardTap{0%,100%{transform:translateX(0)}40%,60%{transform:translateX(85px)}}@keyframes scan{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(250px);opacity:1}}@keyframes bubblePop{0%,20%,100%{transform:scale(.85);opacity:0}35%,80%{transform:scale(1);opacity:1}}@media(max-width:900px){.solution-row,.solution-row.reverse{grid-template-columns:1fr}.solution-row.reverse .solution-row-copy{order:0}.motion-scene{min-height:520px}.solution-row-copy{padding:42px}}@media(max-width:560px){.three-solutions{padding:80px 0}.solution-row{border-radius:22px}.solution-row-copy{padding:30px}.motion-scene{min-height:430px}.app-window{inset:45px 25px 75px 20px}.access-log{right:10px}.pos-screen{inset:45px 35px 70px 20px}.chat-bubble{right:8px}.three-solutions-heading h2{font-size:2.75rem}}@media(prefers-reduced-motion:reduce){.motion-scene *{animation:none!important}}
/* Final navigation, footer color and full responsive system */
html{overflow-x:hidden}body{overflow-x:hidden}img,video{max-width:100%;height:auto}.site-header{position:sticky!important;top:0!important;z-index:1000!important;background:rgba(255,255,255,.94)!important;border-bottom:1px solid rgba(9,38,82,.08)!important;backdrop-filter:blur(20px)!important}.site-header .header-container{min-height:82px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:24px!important}.site-header .main-navigation{position:static!important;width:auto!important;height:auto!important;min-height:0!important;padding:7px!important;display:flex!important;align-items:center!important;gap:5px!important;border:1px solid #e1e7f0!important;border-radius:999px!important;background:#f5f7fb!important;box-shadow:none!important;opacity:1!important;visibility:visible!important;transform:none!important}.site-header .main-navigation ul{display:flex!important;align-items:center!important;gap:3px!important;margin:0!important}.site-header .main-navigation ul li{display:block!important;width:auto!important}.site-header .main-navigation ul li:nth-child(n+4){display:none!important}.site-header .main-navigation ul a{display:block!important;padding:10px 16px!important;border-radius:999px!important;color:#263752!important;font-size:.83rem!important;line-height:1!important;font-weight:800!important;white-space:nowrap!important}.site-header .main-navigation ul a:after{display:none!important}.site-header .main-navigation ul a:hover,.site-header .main-navigation ul a.active{background:#fff!important;color:#075cff!important;box-shadow:0 5px 18px rgba(6,40,90,.09)!important}.site-header .header-cta{position:relative!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;margin:0!important;padding:11px 18px!important;border-radius:999px!important;background:#075cff!important;color:#fff!important;font-size:0!important;white-space:nowrap!important}.site-header .header-cta:before{font-size:.83rem!important;color:#fff!important}.site-header .header-cta:after{display:none!important}.site-header .header-cta:hover{background:#0649c9!important;color:#fff!important}.site-header .language-selector{display:flex!important;align-items:center!important;gap:5px!important;margin:0 5px!important;padding:0!important;border:0!important;background:transparent!important}.site-header .language-selector a{padding:4px!important;font-size:.69rem!important;font-weight:900!important}.site-header .menu-toggle{display:none!important}
/* Dark colored footer */
.premium-footer{margin-top:0!important;padding:0!important;background:radial-gradient(circle at 85% 15%,rgba(22,102,255,.23),transparent 32%),linear-gradient(135deg,#03132f,#061f49)!important;color:#fff!important;border-top:0!important}.premium-footer:before{display:block!important;content:""!important;position:absolute!important;left:-160px!important;right:auto!important;top:-220px!important;bottom:auto!important;width:470px!important;height:470px!important;border-radius:50%!important;background:rgba(25,105,255,.12)!important;filter:blur(20px)!important}.premium-footer .footer-cta-panel{display:none!important}.premium-footer-main{padding:62px 0 45px!important}.premium-footer .footer-wordmark,.premium-footer .footer-wordmark .brand-name{color:#fff!important}.premium-footer .footer-wordmark .brand-name small{color:#9eb4d7!important}.premium-footer-brand p,.premium-footer .footer-contact p{color:#aebfdb!important}.premium-footer .footer-nav>span,.premium-footer .footer-contact>span{color:#6f8ebf!important}.premium-footer .footer-nav a,.premium-footer .footer-contact a{color:#fff!important}.premium-footer .footer-nav a:hover,.premium-footer .footer-contact a:hover{color:#6aa7ff!important}.premium-footer-bottom{border-top-color:rgba(255,255,255,.12)!important;color:#8fa5c6!important}.premium-footer-bottom a{color:#fff!important}
/* Tablet */
@media(max-width:1024px){.container{width:min(100% - 40px,var(--container-width))!important}.site-header .header-container{min-height:76px!important;gap:14px!important}.brand-name{font-size:1.2rem!important}.brand-mark{font-size:2.25rem!important}.site-header .main-navigation ul a{padding:9px 11px!important;font-size:.76rem!important}.site-header .header-cta{padding:10px 13px!important}.site-header .header-cta:before{font-size:.76rem!important}.site-header .language-selector{margin-inline:2px!important}.hero{min-height:auto!important;padding:70px 0 80px!important}.hero-container{grid-template-columns:1fr 1fr!important;gap:32px!important}.hero-content h1{font-size:clamp(2.8rem,6.6vw,4.3rem)!important}.hero-visual{min-height:460px!important}.development-window{width:100%!important}.window-body{min-height:360px!important}.three-solutions,.company-story{padding-block:85px!important}.solution-row,.solution-row.reverse{grid-template-columns:1fr 1fr!important;min-height:520px!important}.solution-row-copy{padding:38px!important}.solution-row h3{font-size:clamp(1.8rem,3.7vw,2.7rem)!important}.motion-scene{min-width:0!important}.company-story-grid{gap:45px!important}.company-message h2{font-size:clamp(2.5rem,5vw,3.8rem)!important}.internal-hero{padding:65px 0!important}.internal-hero h1{font-size:clamp(2.6rem,6vw,4rem)!important}}
/* Mobile navigation becomes four equal touch targets */
@media(max-width:780px){.container{width:calc(100% - 28px)!important}.site-header{position:relative!important}.site-header .header-container{min-height:0!important;padding:12px 0 10px!important;display:grid!important;grid-template-columns:1fr auto!important;gap:10px!important}.site-header .brand-wordmark{grid-column:1/2!important;margin:0!important}.site-header .main-navigation{grid-column:1/-1!important;position:relative!important;width:100%!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:4px!important;padding:5px!important;border-radius:15px!important}.site-header .main-navigation ul,.site-header .main-navigation ul li{display:contents!important}.site-header .main-navigation ul a{min-height:44px!important;padding:8px 4px!important;display:grid!important;place-items:center!important;border-radius:11px!important;font-size:.7rem!important;text-align:center!important;white-space:normal!important}.site-header .header-cta{grid-column:4!important;grid-row:1!important;min-height:44px!important;padding:8px 4px!important;border-radius:11px!important}.site-header .header-cta:before{font-size:.7rem!important}.site-header .language-selector{position:absolute!important;right:0!important;top:-47px!important;padding:5px 7px!important;border:1px solid #e1e7f0!important;border-radius:999px!important;background:#f7f9fd!important}.hero{padding:58px 0 65px!important}.hero-container{grid-template-columns:1fr!important;gap:35px!important}.hero-content{max-width:100%!important}.hero-content h1{font-size:clamp(2.75rem,12vw,4.25rem)!important;line-height:.98!important}.hero-description{font-size:1rem!important}.hero-actions{gap:10px!important}.hero-actions .button{flex:1 1 180px!important;text-align:center!important;justify-content:center!important}.hero-visual{width:100%!important;min-height:470px!important}.floating-metric{transform:scale(.88)!important}.metric-top{right:-8px!important}.metric-bottom{left:-8px!important}.three-solutions,.company-story{padding-block:68px!important}.three-solutions-heading h2{font-size:clamp(2.45rem,10vw,3.5rem)!important}.solutions-stack{margin-top:42px!important}.solution-row,.solution-row.reverse{grid-template-columns:1fr!important;min-height:0!important}.solution-row.reverse .solution-row-copy{order:0!important}.solution-row-copy{padding:32px!important}.solution-row h3{font-size:2.25rem!important}.motion-scene{min-height:480px!important}.company-story-grid{grid-template-columns:1fr!important}.company-proof{border-radius:22px!important}.proof-grid{grid-template-columns:1fr 1fr!important}.internal-hero{padding:54px 0!important;text-align:left!important}.internal-hero h1{font-size:clamp(2.45rem,10vw,3.45rem)!important}.premium-footer-main{grid-template-columns:1fr 1fr!important;gap:36px!important;padding:46px 0 35px!important}.premium-footer-brand{grid-column:1/-1!important}.premium-footer-bottom{flex-wrap:wrap!important}.page-grid,.split{grid-template-columns:1fr!important}.floating-whatsapp{width:50px!important;height:50px!important;right:15px!important;bottom:15px!important}}
@media(max-width:480px){.container{width:calc(100% - 22px)!important}.brand-name{font-size:1.05rem!important}.brand-mark{font-size:2rem!important}.brand-name small{font-size:.3rem!important}.site-header .main-navigation ul a,.site-header .header-cta:before{font-size:.64rem!important}.hero-content h1{font-size:2.75rem!important}.hero-visual{min-height:405px!important}.window-body{grid-template-columns:1fr!important;min-height:310px!important;padding:15px!important}.code-panel{display:none!important}.dashboard-row{gap:8px!important}.floating-metric{display:none!important}.solution-row-copy{padding:27px 23px!important}.solution-row h3{font-size:2rem!important}.motion-scene{min-height:390px!important}.app-window{inset:35px 18px 60px 14px!important}.scene-dashboard{inset:60px 14px 14px 76px!important}.database-stack{right:7px!important;bottom:18px!important;transform:scale(.78)!important}.access-gate{transform:translate(-45%,-50%) scale(.85)!important}.id-card{left:12px!important;bottom:20px!important;transform:scale(.85)!important;transform-origin:left bottom!important}.access-log{right:7px!important;bottom:18px!important}.pos-screen{inset:35px 25px 60px 14px!important}.chat-bubble{font-size:.65rem!important;padding:9px 11px!important}.inventory-badge{right:12px!important;bottom:14px!important;transform:scale(.8)!important}.proof-visual{height:265px!important}.proof-grid{grid-template-columns:1fr!important}.proof-grid article{border-right:0!important;border-top:1px solid rgba(255,255,255,.1)!important}.premium-footer-main{grid-template-columns:1fr!important}.premium-footer-brand{grid-column:auto!important}.premium-footer-bottom{display:grid!important;gap:9px!important}}
/* Consistent, restrained heading scale and dark-panel contrast */
.hero-content h1{max-width:720px!important;font-size:clamp(3rem,4.15vw,4.15rem)!important;line-height:1.03!important;letter-spacing:-.048em!important}.three-solutions-heading h2,.solution-intro h2{font-size:clamp(2.55rem,3.8vw,3.85rem)!important;line-height:1.04!important;letter-spacing:-.045em!important}.solution-row h3,.solution-feature h3{font-size:clamp(1.85rem,2.55vw,2.7rem)!important;line-height:1.1!important;letter-spacing:-.035em!important}.company-message h2{font-size:clamp(2.45rem,3.65vw,3.65rem)!important;line-height:1.05!important;letter-spacing:-.045em!important}.internal-hero h1{font-size:clamp(2.7rem,4.1vw,4rem)!important;line-height:1.04!important;letter-spacing:-.045em!important}.section-heading h2,.projects-heading h2,.faq-heading h2,.page-cta h2{font-size:clamp(2rem,3vw,3rem)!important;line-height:1.08!important}.company-proof h3,.proof-grid h3,.feature-dark h3,.process-section h2,.process-section h3,.premium-footer h2{color:#fff!important}.proof-grid h3{margin:10px 0 8px!important;font-size:1.05rem!important;line-height:1.3!important;letter-spacing:0!important}.proof-grid strong{display:inline-block!important;color:#62a2ff!important;background:transparent!important;font-size:.68rem!important}.proof-grid p{color:#b9c9e2!important}.proof-core span{color:#fff!important}.proof-core small{color:#9fc1f5!important}.motion-scene h2,.motion-scene h3,.motion-scene strong{color:#fff}.dashboard-card-main strong,.data-card strong,.inventory-badge strong{letter-spacing:-.025em!important}
@media(max-width:1024px){.hero-content h1{font-size:clamp(2.8rem,5.8vw,3.75rem)!important}.three-solutions-heading h2,.solution-intro h2{font-size:clamp(2.4rem,4.8vw,3.25rem)!important}.solution-row h3,.solution-feature h3{font-size:clamp(1.75rem,3.2vw,2.35rem)!important}.company-message h2{font-size:clamp(2.3rem,4.7vw,3.2rem)!important}.internal-hero h1{font-size:clamp(2.45rem,5vw,3.4rem)!important}}
@media(max-width:780px){.hero-content h1{font-size:clamp(2.45rem,9.5vw,3.25rem)!important;line-height:1.02!important}.three-solutions-heading h2,.solution-intro h2{font-size:clamp(2.15rem,8vw,2.8rem)!important}.solution-row h3,.solution-feature h3{font-size:clamp(1.75rem,6.5vw,2.15rem)!important}.company-message h2{font-size:clamp(2.1rem,8vw,2.75rem)!important}.internal-hero h1{font-size:clamp(2.2rem,8.5vw,2.9rem)!important}.proof-grid h3{font-size:1rem!important}}
@media(max-width:480px){.hero-content h1{font-size:2.35rem!important}.three-solutions-heading h2,.solution-intro h2{font-size:2.15rem!important}.solution-row h3,.solution-feature h3{font-size:1.75rem!important}.company-message h2{font-size:2.1rem!important}.internal-hero h1{font-size:2.2rem!important}}
/* Guaranteed contrast for every dark page header */
.internal-hero,.internal-hero .container{color:#fff!important}.internal-hero h1,.internal-hero h2,.internal-hero h3{color:#fff!important;text-shadow:0 2px 18px rgba(0,0,0,.12)!important}.internal-hero p{color:#d8e5f8!important}.internal-hero .section-label,.internal-hero .section-label:before{color:#69a5ff!important}.internal-hero .section-label:before{background:#2d7fff!important}.process-section .section-heading h2,.process-section .section-heading h3,.process-section .section-heading p{color:#fff!important}.feature-dark h2,.feature-dark h3,.feature-dark h4{color:#fff!important}
/* Refined internal-page call to action */
.page-cta{position:relative!important;isolation:isolate!important;overflow:hidden!important;min-height:260px!important;padding:48px 55px!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;grid-template-rows:auto auto!important;column-gap:60px!important;align-items:center!important;text-align:left!important;border:1px solid rgba(255,255,255,.16)!important;border-radius:28px!important;background:radial-gradient(circle at 85% 10%,rgba(85,159,255,.36),transparent 30%),linear-gradient(125deg,#061a40 0%,#073b8f 55%,#075cff 100%)!important;box-shadow:0 28px 75px rgba(5,46,115,.22)!important}.page-cta:before{content:""!important;position:absolute!important;z-index:-1!important;right:-90px!important;top:-190px!important;width:420px!important;height:420px!important;border:1px solid rgba(255,255,255,.16)!important;border-radius:50%!important;box-shadow:0 0 0 55px rgba(255,255,255,.035),0 0 0 110px rgba(255,255,255,.02)!important}.page-cta:after{content:""!important;position:absolute!important;left:55px!important;top:38px!important;width:48px!important;height:3px!important;border-radius:3px!important;background:#61a0ff!important}.page-cta h2{grid-column:1!important;grid-row:1!important;margin:20px 0 8px!important;max-width:800px!important;color:#fff!important;font-size:clamp(2.2rem,3.4vw,3.35rem)!important;line-height:1.05!important;letter-spacing:-.045em!important;text-shadow:none!important}.page-cta p{grid-column:1!important;grid-row:2!important;max-width:650px!important;margin:0!important;color:#c8d9f3!important;font-size:1rem!important;line-height:1.65!important}.page-cta .button,.page-cta>a{grid-column:2!important;grid-row:1/3!important;position:relative!important;z-index:2!important;min-width:190px!important;padding:16px 23px!important;display:inline-flex!important;justify-content:center!important;align-items:center!important;border:1px solid rgba(255,255,255,.75)!important;border-radius:999px!important;background:#fff!important;color:#061a40!important;font-weight:900!important;text-decoration:none!important;box-shadow:0 15px 35px rgba(0,20,65,.18)!important;transition:transform .25s ease,box-shadow .25s ease!important}.page-cta .button:hover,.page-cta>a:hover{transform:translateY(-3px)!important;box-shadow:0 20px 42px rgba(0,20,65,.25)!important}.page-cta .button:after,.page-cta>a:after{content:"→";margin-left:12px;color:#075cff;font-size:1.1rem}@media(max-width:760px){.page-cta{min-height:0!important;padding:45px 34px 36px!important;grid-template-columns:1fr!important;grid-template-rows:auto!important;gap:0!important}.page-cta:after{left:34px!important;top:30px!important}.page-cta h2,.page-cta p,.page-cta .button,.page-cta>a{grid-column:1!important;grid-row:auto!important}.page-cta h2{font-size:clamp(2rem,8vw,2.7rem)!important}.page-cta .button,.page-cta>a{width:max-content!important;min-width:0!important;margin-top:25px!important}}@media(max-width:460px){.page-cta{padding:40px 24px 30px!important;border-radius:20px!important}.page-cta:after{left:24px!important;top:26px!important}.page-cta h2{font-size:1.9rem!important}.page-cta .button,.page-cta>a{width:100%!important}}
/* Dynamic bilingual WhatsApp contact */
.floating-whatsapp{display:none!important}.whatsapp-pro{position:fixed;z-index:1200;right:26px;bottom:24px;min-width:176px;height:66px;padding:8px 17px 8px 8px;display:flex;align-items:center;gap:11px;border:1px solid rgba(255,255,255,.75);border-radius:999px;background:rgba(255,255,255,.95);color:#062b24;text-decoration:none;box-shadow:0 18px 50px rgba(0,91,57,.22);backdrop-filter:blur(14px);transition:transform .28s ease,box-shadow .28s ease}.whatsapp-pro:before{content:"";position:absolute;inset:-6px;border:1px solid rgba(24,205,112,.3);border-radius:999px;opacity:0;animation:waHalo 2.6s ease-out infinite}.whatsapp-pro:hover{transform:translateY(-5px) scale(1.02);box-shadow:0 24px 58px rgba(0,91,57,.3)}.wa-icon{position:relative;flex:0 0 50px;width:50px;height:50px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#28da7a,#12b960);color:#fff;box-shadow:0 8px 22px rgba(13,180,90,.3)}.wa-icon:after{content:"";position:absolute;left:4px;bottom:1px;width:13px;height:13px;background:#16c96a;clip-path:polygon(0 0,100% 0,0 100%);transform:rotate(8deg)}.wa-icon b{font-size:.72rem;letter-spacing:.04em}.wa-copy{display:grid;line-height:1.1}.wa-copy small{color:#718078;font-size:.62rem;font-weight:700}.wa-copy strong{margin-top:4px;color:#073c2d;font-size:.9rem}.wa-status{position:absolute;right:10px;top:9px;width:7px;height:7px;border:2px solid #fff;border-radius:50%;background:#20ce70;box-shadow:0 0 0 3px rgba(32,206,112,.15)}@keyframes waHalo{0%{transform:scale(.92);opacity:0}25%{opacity:1}75%,100%{transform:scale(1.12);opacity:0}}@media(max-width:780px){.whatsapp-pro{right:14px;bottom:14px;min-width:0;width:58px;height:58px;padding:4px;border-radius:50%}.wa-icon{width:48px;height:48px;flex-basis:48px}.wa-copy,.wa-status{display:none}.whatsapp-pro:before{border-radius:50%}}@media(prefers-reduced-motion:reduce){.whatsapp-pro:before{animation:none}.whatsapp-pro{transition:none}}
/* Phone icon replaces the WA initials */
.wa-icon b{font-size:0!important;line-height:1!important}.wa-icon b:before{content:"\260E";display:block;color:#fff;font-family:"Segoe UI Symbol","Arial Unicode MS",sans-serif;font-size:1.65rem;font-weight:400;line-height:1;transform:rotate(-18deg)}.wa-icon:before{content:"";position:absolute;inset:9px;border:2px solid rgba(255,255,255,.92);border-radius:50%}
/* Official WhatsApp brand glyph */
.wa-icon:before{display:none!important}.wa-icon img{position:relative;z-index:2;display:block;width:28px!important;height:28px!important;object-fit:contain;filter:none!important}
/* User-provided HopDive logo in every header and footer */
.brand-wordmark{width:250px!important;height:66px!important;display:block!important;overflow:hidden!important;border-radius:6px!important;background:#fff!important}.hopdive-logo{display:block!important;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important;object-position:50% 50%!important}.premium-footer .footer-wordmark{width:260px!important;height:78px!important;padding:4px!important;border-radius:12px!important;background:#fff!important;box-shadow:0 12px 32px rgba(0,0,0,.12)!important}.premium-footer .footer-logo-image{border-radius:8px!important}@media(max-width:1024px){.brand-wordmark{width:215px!important;height:58px!important}.premium-footer .footer-wordmark{width:235px!important;height:70px!important}}@media(max-width:480px){.brand-wordmark{width:185px!important;height:52px!important}.premium-footer .footer-wordmark{width:215px!important;height:64px!important}}

/* Mobile hero buttons: prevent the desktop flex basis from becoming height. */
@media(max-width:650px){
    .hero-actions{width:100%!important;align-items:stretch!important;gap:12px!important}
    .hero-actions .button{flex:0 0 auto!important;width:100%!important;min-height:54px!important;height:auto!important;padding:15px 22px!important;border-radius:999px!important}
}

/* SEO solution landing pages */
.seo-hero{position:relative;overflow:hidden;padding:88px 0 82px;background:linear-gradient(135deg,#f8fbff 0%,#fff 52%,#eaf2ff 100%)}.seo-hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(7,92,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(7,92,255,.035) 1px,transparent 1px);background-size:70px 70px}.seo-hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);align-items:center;gap:64px}.seo-hero-copy h1{max-width:760px;margin:15px 0 22px;color:#061a40;font-size:clamp(2.65rem,4.6vw,4.45rem);line-height:1.02;letter-spacing:-.05em}.seo-hero-copy>p{max-width:690px;color:#526078;font-size:1.12rem;line-height:1.7}.seo-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}.seo-visual{position:relative;min-height:470px;perspective:1000px}.seo-panel{position:absolute;inset:35px 10px 20px 25px;overflow:hidden;border:1px solid rgba(119,163,232,.38);border-radius:28px;background:linear-gradient(145deg,#061a40,#083270);box-shadow:0 35px 80px rgba(5,46,115,.23);animation:seoFloat 6s ease-in-out infinite}.seo-panel-top{height:58px;padding:0 22px;display:flex;align-items:center;gap:8px;border-bottom:1px solid rgba(255,255,255,.1);color:#afc8ed;font-size:.78rem;font-weight:700}.seo-panel-top i{width:9px;height:9px;border-radius:50%;background:#2878ff}.seo-panel-top i:nth-child(2){opacity:.65}.seo-panel-top i:nth-child(3){opacity:.35}.seo-panel-body{display:grid;grid-template-columns:115px 1fr;gap:18px;padding:22px}.seo-side{display:grid;align-content:start;gap:13px}.seo-side span{height:11px;border-radius:10px;background:rgba(111,161,239,.18)}.seo-side span:first-child{width:70%;background:#1670ff}.seo-data{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.seo-data article{min-height:96px;padding:18px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(255,255,255,.07)}.seo-data small{display:block;color:#9eb8df;font-size:.68rem}.seo-data strong{display:block;margin-top:9px;color:#fff;font-size:1.35rem}.seo-chart{grid-column:1/-1!important;position:relative;min-height:170px!important}.seo-chart:before{content:"";position:absolute;left:20px;right:20px;bottom:38px;height:70px;border-bottom:3px solid #2180ff;border-radius:50%;transform:skewY(-7deg);box-shadow:0 13px 0 -10px #54a0ff}.seo-float{position:absolute;z-index:2;padding:15px 18px;border:1px solid #dce8f8;border-radius:16px;background:#fff;box-shadow:0 18px 45px rgba(5,46,115,.17);animation:seoFloat 5s ease-in-out infinite reverse}.seo-float strong{display:block;color:#061a40}.seo-float small{color:#6c7d96}.seo-float.one{right:-12px;top:4px}.seo-float.two{left:-5px;bottom:0}.seo-section{padding:88px 0}.seo-section.soft{background:#f6f9fe}.seo-heading{max-width:790px;margin-bottom:42px}.seo-heading h2{margin:12px 0 15px;color:#061a40;font-size:clamp(2.2rem,3.5vw,3.45rem);line-height:1.06;letter-spacing:-.045em}.seo-heading p{color:#5d6c83;font-size:1.06rem;line-height:1.7}.seo-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.seo-card{padding:28px;border:1px solid #dfe7f2;border-radius:18px;background:#fff;box-shadow:0 13px 40px rgba(4,24,58,.055)}.seo-card b{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:#e9f2ff;color:#075cff;font-size:.85rem}.seo-card h3{margin:19px 0 10px;color:#071735;font-size:1.15rem}.seo-card p{color:#607087;line-height:1.65}.seo-dark{padding:88px 0;background:radial-gradient(circle at 82% 20%,rgba(21,99,229,.42),transparent 30%),linear-gradient(135deg,#03132f,#06275b);color:#fff}.seo-dark-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:65px;align-items:start}.seo-dark h2{margin:12px 0 18px;color:#fff;font-size:clamp(2.2rem,3.5vw,3.45rem);line-height:1.06}.seo-dark p{color:#bfd0e9;line-height:1.75}.seo-steps{display:grid;gap:13px}.seo-step{padding:20px 22px;display:grid;grid-template-columns:42px 1fr;gap:15px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.06)}.seo-step span{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#075cff;font-weight:900}.seo-step h3{margin:0 0 5px;color:#fff;font-size:1rem}.seo-step p{margin:0;font-size:.9rem}.seo-faq{display:grid;gap:12px;max-width:930px}.seo-faq details{padding:20px 24px;border:1px solid #dfe7f2;border-radius:15px;background:#fff}.seo-faq summary{cursor:pointer;color:#061a40;font-weight:850}.seo-faq p{padding-top:13px;color:#5d6c83;line-height:1.7}.seo-related{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}.seo-related a{padding:22px;border:1px solid #dfe7f2;border-radius:16px;background:#fff;color:#061a40;text-decoration:none;font-weight:850;transition:.25s ease}.seo-related a:hover{transform:translateY(-4px);border-color:#84afff;box-shadow:0 14px 35px rgba(5,68,170,.1)}.seo-related small{display:block;margin-top:8px;color:#6b7c94;font-weight:500;line-height:1.45}@keyframes seoFloat{50%{transform:translateY(-9px)}}@media(max-width:1024px){.seo-hero-grid{grid-template-columns:1fr 1fr;gap:32px}.seo-visual{min-height:410px}.seo-panel-body{grid-template-columns:85px 1fr}.seo-card-grid{grid-template-columns:repeat(2,1fr)}.seo-related{grid-template-columns:repeat(2,1fr)}}@media(max-width:780px){.seo-hero{padding:58px 0 65px}.seo-hero-grid,.seo-dark-grid{grid-template-columns:1fr}.seo-hero-copy h1{font-size:clamp(2.35rem,10vw,3.15rem)}.seo-visual{min-height:420px}.seo-section,.seo-dark{padding:68px 0}.seo-related{grid-template-columns:1fr 1fr}}@media(max-width:520px){.seo-card-grid,.seo-related{grid-template-columns:1fr}.seo-visual{min-height:360px}.seo-panel{inset:25px 0 15px}.seo-panel-body{grid-template-columns:62px 1fr;padding:15px;gap:12px}.seo-data{gap:9px}.seo-data article{padding:13px}.seo-float{padding:11px 13px}.seo-float.one{right:-5px}.seo-float.two{left:-4px}.seo-actions .button{width:100%;justify-content:center}.seo-card{padding:24px}.seo-dark-grid{gap:35px}}