/* ============================================================
   ABOTRIX PUBLIC WEBSITE V23 ENTERPRISE POLISH
   Loaded after public-v22.css
   ============================================================ */

:root {
    --v23-header-height: 74px;
    --v23-header-height-scrolled: 66px;
    --v23-cyan: #48d8f5;
    --v23-cyan-bright: #63e4ff;
    --v23-blue: #319fff;
    --v23-navy: #031424;
    --v23-panel: rgba(16, 53, 79, 0.76);
    --v23-border: rgba(117, 205, 244, 0.18);
    --v23-text: #f4f9ff;
    --v23-muted: #a9c7e5;
    --v23-radius: 24px;
    --v23-shadow:
        0 28px 80px rgba(0, 4, 18, 0.32),
        0 10px 30px rgba(0, 0, 0, 0.2);
}

/* ------------------------------------------------------------
   GLOBAL POLISH
   ------------------------------------------------------------ */

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

body {
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body,
button,
input,
select,
textarea {
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

::selection {
    background: rgba(72, 216, 245, 0.28);
    color: #ffffff;
}

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

section[id] {
    scroll-margin-top: 92px;
}

/* ------------------------------------------------------------
   NAVIGATION
   ------------------------------------------------------------ */

.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1000;

    height: var(--v23-header-height);
    min-height: var(--v23-header-height);

    padding-top: 0;
    padding-bottom: 0;

    background: rgba(2, 17, 31, 0.82);
    border-bottom: 1px solid rgba(123, 198, 231, 0.12);

    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);

    transition:
        height 220ms ease,
        min-height 220ms ease,
        background-color 220ms ease,
        box-shadow 220ms ease,
        border-color 220ms ease;
}

.site-header.header-scrolled {
    height: var(--v23-header-height-scrolled);
    min-height: var(--v23-header-height-scrolled);

    background: rgba(2, 14, 27, 0.95);
    border-bottom-color: rgba(123, 198, 231, 0.17);

    box-shadow:
        0 16px 40px rgba(0, 5, 17, 0.28),
        0 1px 0 rgba(255, 255, 255, 0.025);
}

.site-header > .container,
.site-header .header-inner,
.site-header .nav-container {
    height: 100%;
    min-height: 0;
    align-items: center;
}

.site-header .logo,
.site-header .brand,
.site-header .site-logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.site-header .logo img,
.site-header .brand img,
.site-header .site-logo img,
.site-header .header-logo {
    width: auto;
    max-height: 44px;
    object-fit: contain;

    transition:
        max-height 220ms ease,
        transform 220ms ease,
        filter 220ms ease;
}

.site-header.header-scrolled .logo img,
.site-header.header-scrolled .brand img,
.site-header.header-scrolled .site-logo img,
.site-header.header-scrolled .header-logo {
    max-height: 40px;
}

.site-header .logo:hover img,
.site-header .brand:hover img,
.site-header .site-logo:hover img {
    transform: translateY(-1px);
    filter: brightness(1.08);
}

/*
 * We deliberately do not set display on navigation elements.
 * This preserves the existing desktop and mobile visibility logic.
 */

.site-header nav a,
.site-header .desktop-navigation a {
    position: relative;
    font-size: 15px;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: -0.01em;

    transition:
        color 180ms ease,
        opacity 180ms ease,
        transform 180ms ease;
}

.site-header nav a:not(.button):not(.mobile-cta)::after,
.site-header .desktop-navigation a:not(.button)::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: -7px;
    height: 2px;

    border-radius: 999px;
    background: linear-gradient(
        90deg,
        var(--v23-cyan),
        var(--v23-blue)
    );

    opacity: 0;

    transition:
        left 180ms ease,
        right 180ms ease,
        opacity 180ms ease;
}

.site-header nav a:not(.button):not(.mobile-cta):hover::after,
.site-header .desktop-navigation a:not(.button):hover::after {
    left: 10%;
    right: 10%;
    opacity: 1;
}

.site-header nav a:not(.button):hover,
.site-header .desktop-navigation a:not(.button):hover {
    color: #ffffff;
    transform: translateY(-1px);
}

.site-header .button,
.site-header .nav-button,
.site-header .button-primary,
.site-header .button-secondary,
.site-header .login-link {
    min-height: 44px;
    height: 44px;
    padding: 0 21px;

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

    border-radius: 14px;
}

.site-header .button-primary,
.site-header a[href="#application"]:not(.mobile-cta) {
    position: relative;
    overflow: hidden;

    color: #021421;
    border-color: transparent;

    background:
        linear-gradient(
            135deg,
            var(--v23-cyan-bright) 0%,
            var(--v23-cyan) 45%,
            #38bff2 100%
        );

    box-shadow:
        0 12px 30px rgba(45, 194, 238, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.44);

    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        filter 180ms ease;
}

.site-header .button-primary::before,
.site-header a[href="#application"]:not(.mobile-cta)::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-110%);

    background: linear-gradient(
        105deg,
        transparent 20%,
        rgba(255, 255, 255, 0.34) 48%,
        transparent 72%
    );

    transition: transform 500ms ease;
}

.site-header .button-primary:hover,
.site-header a[href="#application"]:not(.mobile-cta):hover {
    transform: translateY(-2px);
    filter: brightness(1.04);

    box-shadow:
        0 17px 38px rgba(45, 194, 238, 0.31),
        inset 0 1px 0 rgba(255, 255, 255, 0.52);
}

.site-header .button-primary:hover::before,
.site-header a[href="#application"]:not(.mobile-cta):hover::before {
    transform: translateX(110%);
}

.site-header .login-link,
.site-header .button-secondary {
    border: 1px solid rgba(151, 206, 234, 0.24);
    background: rgba(7, 29, 48, 0.54);
    color: #f4f9ff;

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease;
}

.site-header .login-link:hover,
.site-header .button-secondary:hover {
    transform: translateY(-2px);
    border-color: rgba(94, 221, 248, 0.46);
    background: rgba(15, 48, 70, 0.72);
}

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */

.hero-section {
    position: relative;

    min-height: min(920px, calc(100vh - 10px));

    padding:
        clamp(126px, 12vh, 152px)
        0
        clamp(76px, 8vh, 112px);

    overflow: hidden;
}

.hero-section::before {
    content: "";
    position: absolute;
    width: 720px;
    height: 720px;
    right: -230px;
    top: -250px;

    pointer-events: none;

    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(35, 151, 225, 0.17) 0%,
        rgba(22, 103, 167, 0.07) 42%,
        transparent 72%
    );

    filter: blur(10px);
}

.hero-section::after {
    content: "";
    position: absolute;
    width: 620px;
    height: 620px;
    left: -350px;
    bottom: -310px;

    pointer-events: none;

    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(58, 216, 244, 0.12) 0%,
        transparent 69%
    );
}

.hero-section .hero-layout {
    position: relative;
    z-index: 2;

    grid-template-columns:
        minmax(430px, 0.82fr)
        minmax(650px, 1.18fr);

    align-items: center;
    gap: clamp(46px, 5.5vw, 94px);
}

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

.hero-content .eyebrow {
    min-height: 52px;
    padding: 0 23px;

    border: 1px solid rgba(68, 213, 244, 0.25);
    background:
        linear-gradient(
            90deg,
            rgba(16, 58, 81, 0.5),
            rgba(10, 40, 61, 0.34)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 12px 35px rgba(0, 0, 0, 0.12);

    backdrop-filter: blur(10px);
}

.hero-content h1 {
    max-width: 680px;
    margin-top: 38px;
    margin-bottom: 28px;

    font-size: clamp(58px, 5.7vw, 88px);
    line-height: 0.98;
    letter-spacing: -0.058em;
    text-wrap: balance;
}

.hero-content h1 span {
    display: block;

    background: linear-gradient(
        105deg,
        #58e6fb 0%,
        #32c7f5 50%,
        #418eff 100%
    );

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

.hero-description {
    max-width: 610px;
    margin-bottom: 32px;

    color: var(--v23-muted);
    font-size: clamp(18px, 1.45vw, 22px);
    line-height: 1.65;
    letter-spacing: -0.015em;
}

.hero-actions {
    gap: 14px;
}

.hero-actions .button {
    min-height: 54px;
    padding: 0 26px;

    border-radius: 16px;
    font-weight: 750;

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

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

.hero-actions .button-primary {
    box-shadow:
        0 16px 42px rgba(44, 194, 236, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.hero-actions .button-secondary:hover {
    border-color: rgba(91, 219, 247, 0.48);
    background: rgba(14, 48, 70, 0.72);
}

.hero-trust-row {
    margin-top: 27px;
    row-gap: 11px;
}

.trust-item {
    color: #bbd5eb;
    font-size: 14px;
}

.trust-check {
    box-shadow: 0 0 18px rgba(51, 227, 180, 0.2);
}

.hero-statistics {
    margin-top: 37px;
    padding-top: 27px;

    border-top: 1px solid rgba(151, 201, 229, 0.13);
}

.hero-statistic strong {
    letter-spacing: -0.035em;
}

.hero-statistic span {
    color: #92b6d2;
}

/* ------------------------------------------------------------
   COMMAND CENTER DASHBOARD
   ------------------------------------------------------------ */

.hero-dashboard-wrapper {
    position: relative;
    width: 100%;
    max-width: 940px;
    justify-self: center;

    transform-origin: center;

    transition:
        transform 300ms ease,
        filter 300ms ease;
}

.hero-dashboard-wrapper:hover {
    transform: translateY(-5px);
    filter: brightness(1.025);
}

.dashboard-glow {
    opacity: 0.72;
    filter: blur(65px);
}

.dashboard-window {
    overflow: hidden;

    border: 1px solid rgba(121, 207, 242, 0.22);
    border-radius: 26px;

    background:
        linear-gradient(
            145deg,
            rgba(14, 52, 78, 0.96),
            rgba(9, 42, 66, 0.98)
        );

    box-shadow:
        0 36px 110px rgba(0, 4, 19, 0.4),
        0 15px 45px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.dashboard-topbar {
    min-height: 96px;
    padding-left: 31px;
    padding-right: 31px;

    background:
        linear-gradient(
            90deg,
            rgba(7, 39, 62, 0.92),
            rgba(8, 44, 68, 0.88)
        );

    border-bottom-color: rgba(130, 203, 236, 0.14);
}

.dashboard-brand-icon {
    box-shadow:
        0 12px 30px rgba(32, 193, 238, 0.19),
        inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

.live-status {
    box-shadow:
        inset 0 0 0 1px rgba(43, 229, 173, 0.08),
        0 0 30px rgba(43, 229, 173, 0.05);
}

.dashboard-body {
    padding: 30px;
}

.dashboard-heading {
    margin-bottom: 23px;
}

.dashboard-heading h2 {
    margin-top: 8px;

    font-size: clamp(26px, 2vw, 34px);
    letter-spacing: -0.035em;
}

.date-control {
    border-color: rgba(144, 205, 235, 0.2);
    background: rgba(13, 51, 75, 0.67);

    transition:
        background-color 170ms ease,
        border-color 170ms ease,
        transform 170ms ease;
}

.date-control:hover {
    transform: translateY(-1px);
    border-color: rgba(79, 214, 246, 0.4);
    background: rgba(19, 66, 94, 0.84);
}

.metric-grid {
    gap: 17px;
}

.metric-card,
.chart-card,
.activity-card {
    border-color: rgba(126, 204, 239, 0.16);

    background:
        linear-gradient(
            145deg,
            rgba(27, 70, 100, 0.74),
            rgba(22, 60, 88, 0.66)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.025);

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

.metric-card:hover,
.chart-card:hover,
.activity-card:hover {
    transform: translateY(-3px);
    border-color: rgba(92, 218, 247, 0.29);

    box-shadow:
        0 17px 42px rgba(0, 9, 25, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.metric-card {
    min-height: 158px;
    padding: 24px 22px;
}

.metric-card strong {
    letter-spacing: -0.035em;
}

.metric-icon {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 8px 20px rgba(10, 139, 191, 0.1);
}

.dashboard-main-grid {
    gap: 17px;
}

.chart-card,
.activity-card {
    padding: 23px;
}

/* ------------------------------------------------------------
   GENERAL SECTIONS
   ------------------------------------------------------------ */

.section-header,
.section-heading,
.platform-heading,
.industry-heading,
.pricing-heading {
    text-wrap: balance;
}

.section-header h2,
.section-heading h2,
.platform-heading h2,
.industry-heading h2,
.pricing-heading h2 {
    letter-spacing: -0.045em;
}

.platform-card,
.feature-card,
.industry-solution-card,
.pricing-card,
.deployment-card,
.testimonial-card,
.application-card {
    border-color: rgba(120, 201, 237, 0.15);

    box-shadow:
        0 20px 55px rgba(0, 5, 18, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);

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

.platform-card:hover,
.feature-card:hover,
.industry-solution-card:hover,
.pricing-card:hover,
.deployment-card:hover,
.testimonial-card:hover {
    transform: translateY(-7px);
    border-color: rgba(82, 218, 248, 0.3);

    box-shadow:
        0 28px 70px rgba(0, 6, 21, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

/* ------------------------------------------------------------
   INDUSTRY CARDS
   ------------------------------------------------------------ */

.industry-filter-button {
    min-height: 43px;
    padding: 0 19px;
    border-radius: 999px;

    transition:
        transform 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease,
        color 180ms ease;
}

.industry-filter-button:hover {
    transform: translateY(-2px);
}

.industry-filter-button.active {
    box-shadow:
        0 12px 30px rgba(38, 188, 233, 0.17),
        inset 0 1px 0 rgba(255, 255, 255, 0.27);
}

.industry-solution-card {
    overflow: hidden;
}

.industry-solution-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(73, 220, 247, 0.45),
        transparent
    );

    opacity: 0;
    transition: opacity 220ms ease;
}

.industry-solution-card:hover::before {
    opacity: 1;
}

.industry-icon {
    box-shadow:
        0 14px 30px rgba(24, 167, 218, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.17);
}

.industry-card-link {
    transition:
        color 180ms ease,
        transform 180ms ease;
}

.industry-card-link:hover {
    transform: translateX(3px);
}

/* ------------------------------------------------------------
   PRICING
   ------------------------------------------------------------ */

.pricing-card {
    position: relative;
    overflow: hidden;
}

.pricing-card.featured,
.pricing-card.popular,
.pricing-card.recommended {
    border-color: rgba(75, 221, 249, 0.36);

    box-shadow:
        0 28px 85px rgba(4, 40, 71, 0.27),
        0 0 0 1px rgba(74, 218, 247, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.pricing-card.featured::before,
.pricing-card.popular::before,
.pricing-card.recommended::before {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    top: -150px;
    right: -110px;

    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(53, 213, 244, 0.2),
        transparent 68%
    );

    pointer-events: none;
}

.pricing-card .button {
    min-height: 50px;
    border-radius: 15px;

    transition:
        transform 180ms ease,
        box-shadow 180ms ease;
}

.pricing-card .button:hover {
    transform: translateY(-2px);
}

/* ------------------------------------------------------------
   FORMS
   ------------------------------------------------------------ */

input,
select,
textarea {
    border-radius: 13px;

    transition:
        border-color 170ms ease,
        box-shadow 170ms ease,
        background-color 170ms ease;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: rgba(67, 215, 247, 0.62);

    box-shadow:
        0 0 0 4px rgba(44, 190, 231, 0.12),
        0 10px 28px rgba(0, 8, 22, 0.1);
}

.application-card,
.application-form,
.registration-form {
    border-radius: 25px;
}

/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */

footer,
.site-footer {
    position: relative;
    overflow: hidden;

    border-top: 1px solid rgba(117, 198, 232, 0.12);
}

footer::before,
.site-footer::before {
    content: "";
    position: absolute;
    width: 560px;
    height: 300px;
    top: -230px;
    left: 50%;
    transform: translateX(-50%);

    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(52, 205, 239, 0.11),
        transparent 70%
    );

    pointer-events: none;
}

/* ------------------------------------------------------------
   REVEAL ANIMATION
   ------------------------------------------------------------ */

.js-v23-enabled .reveal {
    opacity: 0;
    transform: translateY(24px);

    transition:
        opacity 650ms cubic-bezier(0.2, 0.7, 0.2, 1),
        transform 650ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.js-v23-enabled .reveal.reveal-visible {
    opacity: 1;
    transform: translateY(0);
}

.js-v23-enabled .reveal-delay {
    transition-delay: 100ms;
}

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

@media (max-width: 1280px) {
    .hero-section .hero-layout {
        grid-template-columns:
            minmax(390px, 0.86fr)
            minmax(560px, 1.14fr);

        gap: 40px;
    }

    .hero-content h1 {
        font-size: clamp(54px, 5.6vw, 76px);
    }

    .dashboard-body {
        padding: 25px;
    }
}

@media (max-width: 1080px) {
    .hero-section {
        min-height: auto;
        padding-top: 124px;
    }

    .hero-section .hero-layout {
        grid-template-columns: 1fr;
        gap: 62px;
    }

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

    .hero-content h1,
    .hero-description {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-actions,
    .hero-trust-row,
    .hero-statistics {
        justify-content: center;
    }

    .hero-dashboard-wrapper {
        max-width: 880px;
    }

    .hero-dashboard-wrapper:hover {
        transform: none;
    }
}

/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 768px) {
    :root {
        --v23-header-height: 66px;
        --v23-header-height-scrolled: 62px;
    }

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

    section[id] {
        scroll-margin-top: 76px;
    }

    .site-header .logo img,
    .site-header .brand img,
    .site-header .site-logo img,
    .site-header .header-logo {
        max-height: 39px;
    }

    .site-header.header-scrolled .logo img,
    .site-header.header-scrolled .brand img,
    .site-header.header-scrolled .site-logo img,
    .site-header.header-scrolled .header-logo {
        max-height: 36px;
    }

    .hero-section {
        padding:
            106px
            0
            68px;
    }

    .hero-content .eyebrow {
        min-height: 46px;
        padding: 0 17px;
        font-size: 12px;
    }

    .hero-content h1 {
        margin-top: 27px;
        margin-bottom: 22px;

        font-size: clamp(44px, 13vw, 62px);
        line-height: 1.01;
        letter-spacing: -0.052em;
    }

    .hero-description {
        font-size: 17px;
        line-height: 1.62;
    }

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

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

    .hero-trust-row {
        gap: 9px 15px;
    }

    .hero-statistics {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .hero-statistic {
        padding: 0 7px;
    }

    .dashboard-window {
        border-radius: 20px;
    }

    .dashboard-topbar {
        min-height: 78px;
        padding: 16px 18px;
    }

    .dashboard-brand-icon {
        width: 43px;
        height: 43px;
        border-radius: 13px;
    }

    .dashboard-brand strong {
        font-size: 14px;
    }

    .dashboard-brand span {
        font-size: 11px;
    }

    .live-status {
        padding: 8px 10px;
        font-size: 11px;
    }

    .dashboard-body {
        padding: 18px;
    }

    .dashboard-heading {
        align-items: flex-start;
    }

    .dashboard-heading h2 {
        font-size: 25px;
    }

    .date-control {
        min-height: 42px;
        padding: 0 12px;
    }

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

    .metric-card {
        min-height: 132px;
    }

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

    .platform-card:hover,
    .feature-card:hover,
    .industry-solution-card:hover,
    .pricing-card:hover,
    .deployment-card:hover,
    .testimonial-card:hover {
        transform: none;
    }
}

@media (max-width: 480px) {
    .hero-statistics {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .hero-statistic {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        padding: 9px 0;

        border-bottom: 1px solid rgba(151, 201, 229, 0.1);
    }

    .hero-statistic:last-child {
        border-bottom: 0;
    }

    .dashboard-heading {
        gap: 13px;
    }

    .dashboard-heading h2 {
        font-size: 22px;
    }
}

/* ------------------------------------------------------------
   ACCESSIBILITY AND REDUCED MOTION
   ------------------------------------------------------------ */

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

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

    .js-v23-enabled .reveal {
        opacity: 1;
        transform: none;
    }
}