/*
 * ÍTSIKA — FINAL HOMEPAGE SYSTEM EXPERIENCE
 * BLOCK 14G-A27
 */

:root {
    --itsika-bg: #03101f;
    --itsika-bg-deep: #020b16;
    --itsika-panel: #111d32;
    --itsika-panel-soft: #16243c;
    --itsika-panel-blue: #102b50;
    --itsika-line: rgba(119, 158, 205, 0.24);
    --itsika-line-strong: rgba(206, 174, 96, 0.34);
    --itsika-gold: #f5df8d;
    --itsika-gold-deep: #c49a3c;
    --itsika-text: #f7f9ff;
    --itsika-muted: #aebbd0;
    --itsika-soft: #8190a8;
    --itsika-success: #69e3ad;
    --itsika-max: 1460px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background:
        var(--itsika-bg-deep);
}

body {
    margin: 0;
    min-width: 320px;
    color:
        var(--itsika-text);
    background:
        radial-gradient(
            circle at 8% 16%,
            rgba(20, 82, 153, 0.24),
            transparent 31%
        ),
        radial-gradient(
            circle at 88% 72%,
            rgba(41, 73, 116, 0.16),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #031126 0%,
            #030d19 48%,
            #071527 100%
        );
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

a {
    color: inherit;
}

.itsika-home {
    min-height: 100vh;
}

.itsika-shell {
    width:
        min(
            calc(100% - 48px),
            var(--itsika-max)
        );
    margin:
        0 auto;
}

.itsika-nav {
    position: relative;
    z-index: 20;
    padding:
        22px 0 8px;
}

.itsika-nav-inner {
    min-height: 78px;
    display: flex;
    align-items: center;
    gap: 28px;
    padding:
        12px 22px;
    border:
        1px solid
        var(--itsika-line);
    border-radius:
        18px;
    background:
        rgba(3, 15, 30, 0.82);
    box-shadow:
        0 24px 60px
        rgba(0, 0, 0, 0.16);
    backdrop-filter:
        blur(18px);
}

.itsika-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 220px;
    text-decoration: none;
}

.itsika-brand-logo {
    width: 54px;
    height: 54px;
    flex:
        0 0 54px;
    overflow: hidden;
    border:
        1px solid
        rgba(245, 223, 141, 0.36);
    border-radius:
        14px;
    background:
        #020710;
}

.itsika-brand-logo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transform:
        scale(1.68);
}

.itsika-brand-copy {
    display: grid;
    gap: 2px;
}

.itsika-brand-name {
    color:
        var(--itsika-gold);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.itsika-brand-tag {
    color:
        var(--itsika-gold);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.itsika-nav-links {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.itsika-nav-links a {
    color:
        #eff4ff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 650;
    white-space: nowrap;
    transition:
        color 150ms ease,
        opacity 150ms ease;
}

.itsika-nav-links a:hover,
.itsika-nav-links a:focus-visible {
    color:
        var(--itsika-gold);
}

.itsika-nav-cta {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding:
        0 24px;
    border:
        1px solid
        var(--itsika-line-strong);
    border-radius:
        999px;
    color:
        var(--itsika-text);
    background:
        rgba(3, 12, 25, 0.48);
    text-decoration: none;
    font-weight: 750;
}

.itsika-hero {
    display: grid;
    grid-template-columns:
        minmax(0, 0.88fr)
        minmax(580px, 1.12fr);
    gap: 38px;
    align-items: stretch;
    padding:
        42px 0 24px;
}

.itsika-hero-copy {
    min-height: 560px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding:
        42px 26px 36px 28px;
}

.itsika-eyebrow {
    margin:
        0 0 18px;
    color:
        var(--itsika-gold);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.itsika-title {
    max-width: 680px;
    margin:
        0;
    font-size:
        clamp(
            54px,
            5vw,
            88px
        );
    line-height: 0.96;
    letter-spacing: -0.055em;
}

.itsika-title span {
    display: block;
}

.itsika-title .gold {
    color:
        var(--itsika-gold);
    text-shadow:
        0 0 28px
        rgba(245, 223, 141, 0.11);
}

.itsika-hero-description {
    max-width: 650px;
    margin:
        30px 0 0;
    color:
        var(--itsika-muted);
    font-size:
        18px;
    line-height: 1.65;
}

.itsika-hero-description strong {
    color:
        var(--itsika-text);
}

.itsika-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}

.itsika-button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding:
        0 26px;
    border-radius:
        999px;
    text-decoration: none;
    font-weight: 800;
}

.itsika-button-primary {
    color:
        #111827;
    background:
        linear-gradient(
            135deg,
            #f6e69f,
            #c89b3d
        );
    box-shadow:
        0 14px 38px
        rgba(196, 154, 60, 0.16);
}

.itsika-button-secondary {
    border:
        1px solid
        var(--itsika-line-strong);
    color:
        var(--itsika-text);
    background:
        rgba(7, 18, 35, 0.52);
}

.itsika-metrics {
    width: 100%;
    max-width: 620px;
    display: grid;
    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );
    gap: 12px;
    margin-top: 34px;
}

.itsika-metric {
    min-height: 132px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding:
        16px 10px;
    border:
        1px solid
        rgba(130, 159, 196, 0.18);
    border-radius:
        17px;
    background:
        linear-gradient(
            145deg,
            rgba(76, 91, 106, 0.76),
            rgba(13, 48, 87, 0.88)
        );
    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,0.035);
    text-align: center;
}

.itsika-metric-value {
    color:
        #fff5bf;
    font-size:
        clamp(
            26px,
            2.3vw,
            40px
        );
    font-weight: 850;
    line-height: 1;
}

.itsika-metric-label {
    color:
        #e0e8f6;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.itsika-system {
    min-height: 560px;
    align-self: center;
    overflow: hidden;
    border:
        1px solid
        rgba(111, 153, 203, 0.29);
    border-radius:
        24px;
    background:
        linear-gradient(
            150deg,
            rgba(19, 37, 64, 0.96),
            rgba(5, 18, 36, 0.98)
        );
    box-shadow:
        0 36px 100px
        rgba(0, 0, 0, 0.24);
}

.itsika-system-header {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding:
        0 22px;
    border-bottom:
        1px solid
        rgba(114, 149, 193, 0.16);
}

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

.itsika-system-indicator {
    width: 14px;
    height: 14px;
    border:
        2px solid
        #3686c9;
    border-radius:
        50%;
    box-shadow:
        0 0 16px
        rgba(54, 134, 201, 0.44);
}

.itsika-system-name {
    font-size: 15px;
    font-weight: 850;
}

.itsika-system-subtitle {
    display: block;
    margin-top: 1px;
    color:
        var(--itsika-soft);
    font-size: 9px;
}

.itsika-system-status {
    display: flex;
    align-items: center;
    gap: 7px;
    color:
        #a8b9ce;
    font-size: 10px;
}

.itsika-system-dot {
    width: 6px;
    height: 6px;
    border-radius:
        50%;
    background:
        var(--itsika-success);
    box-shadow:
        0 0 12px
        rgba(105, 227, 173, 0.5);
}

.itsika-system-body {
    display: grid;
    grid-template-columns:
        150px
        minmax(0, 1fr);
    min-height: 490px;
}

.itsika-system-sidebar {
    padding:
        16px 12px;
    border-right:
        1px solid
        rgba(115, 148, 191, 0.12);
    background:
        rgba(4, 16, 32, 0.24);
}

.itsika-system-sidebar span {
    display: block;
    margin:
        4px 0;
    padding:
        9px 10px;
    border-radius:
        9px;
    color:
        #aab8cb;
    font-size: 10px;
}

.itsika-system-sidebar span:first-child {
    color:
        #eff5ff;
    background:
        rgba(41, 79, 126, 0.34);
}

.itsika-system-main {
    padding:
        22px;
}

.itsika-system-main h2 {
    margin: 0;
    font-size: 18px;
}

.itsika-system-main > p {
    margin:
        6px 0 18px;
    color:
        var(--itsika-soft);
    font-size: 10px;
}

.itsika-system-metrics {
    display: grid;
    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );
    gap: 10px;
}

.itsika-system-metric {
    min-height: 88px;
    padding:
        14px 13px;
    border:
        1px solid
        rgba(105, 143, 190, 0.16);
    border-radius:
        12px;
    background:
        linear-gradient(
            145deg,
            rgba(24, 52, 87, 0.78),
            rgba(9, 30, 57, 0.88)
        );
}

.itsika-system-metric strong {
    display: block;
    color:
        var(--itsika-gold);
    font-size: 26px;
    line-height: 1;
}

.itsika-system-metric span {
    display: block;
    margin-top: 8px;
    color:
        #bdc9da;
    font-size: 8px;
    text-transform: uppercase;
}

.itsika-department-panel {
    margin-top: 14px;
    padding:
        16px;
    border:
        1px solid
        rgba(111, 150, 197, 0.15);
    border-radius:
        13px;
    background:
        rgba(3, 15, 29, 0.28);
}

.itsika-department-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 13px;
}

.itsika-department-heading strong {
    font-size: 12px;
}

.itsika-department-heading span {
    color:
        #659fd6;
    font-size: 8px;
}

.itsika-department-grid {
    display: grid;
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );
    gap:
        9px 18px;
}

.itsika-department {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color:
        #c4cede;
    font-size: 8px;
}

.itsika-department-status {
    color:
        var(--itsika-success);
    white-space: nowrap;
}

.itsika-explainer {
    margin:
        26px auto 0;
    padding:
        28px 0 36px;
}

.itsika-explainer-panel {
    display: grid;
    grid-template-columns:
        minmax(270px, 1.35fr)
        repeat(
            4,
            minmax(0, 1fr)
        );
    border:
        1px solid
        var(--itsika-line);
    border-radius:
        22px;
    background:
        rgba(5, 18, 35, 0.84);
    box-shadow:
        0 30px 90px
        rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

.itsika-explainer-lead {
    padding:
        28px 30px;
}

.itsika-explainer-lead h2 {
    margin:
        0 0 13px;
    color:
        var(--itsika-gold);
    font-size: 14px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.itsika-explainer-lead p {
    margin: 0;
    color:
        var(--itsika-muted);
    font-size: 13px;
    line-height: 1.7;
}

.itsika-feature {
    min-height: 220px;
    padding:
        28px 22px;
    border-left:
        1px solid
        rgba(122, 151, 191, 0.12);
}

.itsika-feature-icon {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    margin-bottom: 19px;
    border:
        1px solid
        rgba(245, 223, 141, 0.28);
    border-radius:
        50%;
    color:
        var(--itsika-gold);
    background:
        radial-gradient(
            circle,
            rgba(53, 87, 128, 0.5),
            rgba(13, 28, 48, 0.46)
        );
    font-size: 20px;
}

.itsika-feature h3 {
    margin:
        0 0 8px;
    font-size: 14px;
}

.itsika-feature p {
    margin: 0;
    color:
        var(--itsika-soft);
    font-size: 12px;
    line-height: 1.6;
}

.itsika-workflow {
    padding:
        8px 0 42px;
}

.itsika-workflow-panel {
    display: grid;
    grid-template-columns:
        0.9fr 1.1fr;
    gap: 34px;
    padding:
        36px;
    border:
        1px solid
        var(--itsika-line);
    border-radius:
        22px;
    background:
        linear-gradient(
            135deg,
            rgba(15, 36, 63, 0.9),
            rgba(5, 20, 39, 0.88)
        );
}

.itsika-workflow-copy h2 {
    margin:
        0 0 14px;
    font-size:
        clamp(
            30px,
            3vw,
            46px
        );
    letter-spacing:
        -0.035em;
}

.itsika-workflow-copy p {
    margin: 0;
    color:
        var(--itsika-muted);
    font-size: 15px;
    line-height: 1.75;
}

.itsika-workflow-steps {
    display: grid;
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );
    gap: 14px;
}

.itsika-step {
    padding:
        22px 18px;
    border:
        1px solid
        rgba(121, 151, 190, 0.16);
    border-radius:
        15px;
    background:
        rgba(8, 26, 50, 0.58);
}

.itsika-step-number {
    display: block;
    margin-bottom: 12px;
    color:
        var(--itsika-gold);
    font-size: 22px;
    font-weight: 900;
}

.itsika-step h3 {
    margin:
        0 0 9px;
    font-size: 14px;
}

.itsika-step p {
    margin: 0;
    color:
        var(--itsika-soft);
    font-size: 11px;
    line-height: 1.6;
}

.itsika-footer {
    padding:
        12px 0 34px;
}

.itsika-footer-inner {
    min-height: 112px;
    display: flex;
    align-items: center;
    gap: 28px;
    padding:
        22px 28px;
    border-top:
        1px solid
        rgba(107, 143, 188, 0.18);
}

.itsika-footer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 260px;
}

.itsika-footer-logo {
    width: 46px;
    height: 46px;
    overflow: hidden;
    border-radius:
        12px;
}

.itsika-footer-logo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transform:
        scale(1.68);
}

.itsika-footer-name {
    color:
        var(--itsika-gold);
    font-weight: 850;
}

.itsika-footer-tag {
    display: block;
    margin-top: 2px;
    color:
        #9eabc0;
    font-size: 10px;
}

.itsika-footer-links {
    flex: 1;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 22px;
}

.itsika-footer-links a {
    color:
        #92a2ba;
    font-size: 11px;
    text-decoration: none;
}

.itsika-copyright {
    color:
        #77869d;
    font-size: 10px;
    white-space: nowrap;
}

@media (
    max-width: 1180px
) {

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

    .itsika-nav-links {
        gap: 18px;
    }

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

    .itsika-hero-copy {
        min-height: auto;
        padding-bottom: 10px;
    }

    .itsika-system {
        min-height: auto;
    }

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

    .itsika-explainer-lead {
        grid-column:
            1 / -1;
    }

    .itsika-feature {
        border-top:
            1px solid
            rgba(122, 151, 191, 0.12);
    }

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

@media (
    max-width: 800px
) {

    .itsika-shell {
        width:
            min(
                calc(100% - 22px),
                var(--itsika-max)
            );
    }

    .itsika-nav-inner {
        flex-wrap: wrap;
        padding:
            12px 14px;
    }

    .itsika-brand {
        min-width: 0;
        flex: 1;
    }

    .itsika-nav-links {
        order: 3;
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        padding-top: 8px;
    }

    .itsika-nav-cta {
        padding:
            0 16px;
    }

    .itsika-hero {
        padding-top: 18px;
    }

    .itsika-hero-copy {
        padding:
            30px 10px 10px;
    }

    .itsika-title {
        font-size:
            clamp(
                48px,
                15vw,
                70px
            );
    }

    .itsika-hero-description {
        font-size: 16px;
    }

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

    .itsika-system-body {
        grid-template-columns:
            1fr;
    }

    .itsika-system-sidebar {
        display: none;
    }

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

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

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

    .itsika-explainer-lead {
        grid-column: auto;
    }

    .itsika-feature {
        min-height: auto;
        border-left: 0;
        border-top:
            1px solid
            rgba(122, 151, 191, 0.12);
    }

    .itsika-workflow-panel {
        padding:
            26px 20px;
    }

    .itsika-workflow-steps {
        grid-template-columns:
            1fr;
    }

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

    .itsika-footer-links {
        justify-content: flex-start;
    }
}

@media (
    max-width: 520px
) {

    .itsika-brand-tag {
        display: none;
    }

    .itsika-nav-cta {
        font-size: 12px;
    }

    .itsika-system-main {
        padding:
            16px;
    }

    .itsika-department-grid {
        grid-template-columns:
            1fr;
    }
}

/* ================================================================
   ÍTSIKA 14G-A28 — ADAPTIVE VIEWPORT CONTRACT
   ================================================================ */

html {
    --itsika-viewport-height: 100vh;
    --itsika-viewport-width: 100vw;
}

/*
 * LAPTOP
 * Uses available horizontal space while preventing oversized
 * desktop typography from crowding common notebook displays.
 */
html[data-viewport="laptop"] .itsika-shell {
    width:
        min(
            calc(100% - 34px),
            1440px
        );
}

html[data-viewport="laptop"] .itsika-hero {
    grid-template-columns:
        minmax(420px, 0.9fr)
        minmax(520px, 1.1fr);
    gap: clamp(22px, 2.5vw, 36px);
}

html[data-viewport="laptop"] .itsika-title {
    font-size:
        clamp(
            54px,
            5.1vw,
            78px
        );
}

html[data-viewport="laptop"] .itsika-hero-copy,
html[data-viewport="laptop"] .itsika-system {
    min-height:
        min(
            620px,
            calc(
                var(--itsika-viewport-height)
                - 145px
            )
        );
}

html[data-viewport="laptop"] .itsika-system-main {
    padding:
        clamp(
            16px,
            1.7vw,
            22px
        );
}


/*
 * LARGE DESKTOP
 */
html[data-viewport="desktop"] .itsika-shell {
    width:
        min(
            calc(100% - 72px),
            1540px
        );
}

html[data-viewport="desktop"] .itsika-hero {
    grid-template-columns:
        minmax(500px, 0.88fr)
        minmax(680px, 1.12fr);
}

html[data-viewport="desktop"] .itsika-system {
    min-height: 600px;
}


/*
 * TABLET
 */
html[data-viewport="tablet"] .itsika-nav-inner {
    gap: 16px;
}

html[data-viewport="tablet"] .itsika-nav-links {
    order: 3;
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
}

html[data-viewport="tablet"] .itsika-nav-links::-webkit-scrollbar {
    display: none;
}

html[data-viewport="tablet"] .itsika-hero {
    grid-template-columns: 1fr;
    gap: 20px;
}

html[data-viewport="tablet"] .itsika-hero-copy {
    min-height: auto;
    padding-top: 28px;
}

html[data-viewport="tablet"] .itsika-system {
    min-height: auto;
}

html[data-viewport="tablet"] .itsika-explainer-panel {
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
}

html[data-viewport="tablet"] .itsika-explainer-lead {
    grid-column:
        1 / -1;
}


/*
 * MOBILE
 */
html[data-viewport="mobile"] body {
    overflow-x: hidden;
}

html[data-viewport="mobile"] .itsika-shell {
    width:
        calc(100% - 20px);
}

html[data-viewport="mobile"] .itsika-nav {
    padding-top: 10px;
}

html[data-viewport="mobile"] .itsika-nav-inner {
    min-height: 64px;
    gap: 10px;
    padding:
        9px 10px;
    border-radius: 15px;
}

html[data-viewport="mobile"] .itsika-brand-logo {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
}

html[data-viewport="mobile"] .itsika-brand-name {
    font-size: 15px;
}

html[data-viewport="mobile"] .itsika-brand-tag {
    display: none;
}

html[data-viewport="mobile"] .itsika-nav-cta {
    min-height: 38px;
    padding:
        0 14px;
    font-size: 12px;
}

html[data-viewport="mobile"] .itsika-nav-links {
    order: 3;
    width: 100%;
    gap: 18px;
    justify-content: flex-start;
    overflow-x: auto;
    padding:
        5px 2px 1px;
    scrollbar-width: none;
}

html[data-viewport="mobile"] .itsika-nav-links::-webkit-scrollbar {
    display: none;
}

html[data-viewport="mobile"] .itsika-nav-links a {
    font-size: 12px;
}

html[data-viewport="mobile"] .itsika-hero {
    grid-template-columns: 1fr;
    gap: 18px;
    padding-top: 10px;
}

html[data-viewport="mobile"] .itsika-hero-copy {
    min-height: auto;
    padding:
        26px 8px 8px;
}

html[data-viewport="mobile"] .itsika-eyebrow {
    font-size: 11px;
}

html[data-viewport="mobile"] .itsika-title {
    font-size:
        clamp(
            46px,
            16vw,
            68px
        );
}

html[data-viewport="mobile"] .itsika-hero-description {
    margin-top: 22px;
    font-size: 15px;
    line-height: 1.62;
}

html[data-viewport="mobile"] .itsika-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
}

html[data-viewport="mobile"] .itsika-button {
    width: 100%;
}

html[data-viewport="mobile"] .itsika-metrics {
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
    gap: 9px;
    margin-top: 24px;
}

html[data-viewport="mobile"] .itsika-metric {
    min-height: 108px;
}

html[data-viewport="mobile"] .itsika-system {
    min-height: auto;
    border-radius: 18px;
}

html[data-viewport="mobile"] .itsika-system-header {
    min-height: 58px;
    padding:
        0 14px;
}

html[data-viewport="mobile"] .itsika-system-body {
    display: block;
    min-height: auto;
}

html[data-viewport="mobile"] .itsika-system-sidebar {
    display: none;
}

html[data-viewport="mobile"] .itsika-system-main {
    padding: 14px;
}

html[data-viewport="mobile"] .itsika-system-metrics {
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
    gap: 8px;
}

html[data-viewport="mobile"] .itsika-system-metric {
    min-height: 78px;
}

html[data-viewport="mobile"] .itsika-department-grid {
    grid-template-columns: 1fr;
}

html[data-viewport="mobile"] .itsika-explainer {
    padding-top: 16px;
}

html[data-viewport="mobile"] .itsika-explainer-panel {
    grid-template-columns: 1fr;
}

html[data-viewport="mobile"] .itsika-explainer-lead {
    grid-column: auto;
    padding:
        24px 20px;
}

html[data-viewport="mobile"] .itsika-feature {
    min-height: auto;
    padding:
        22px 20px;
    border-left: 0;
    border-top:
        1px solid
        rgba(122, 151, 191, 0.12);
}

html[data-viewport="mobile"] .itsika-workflow-panel {
    grid-template-columns: 1fr;
    gap: 24px;
    padding:
        24px 18px;
}

html[data-viewport="mobile"] .itsika-workflow-steps {
    grid-template-columns: 1fr;
}

html[data-viewport="mobile"] .itsika-footer-inner {
    min-height: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding:
        22px 8px;
}

html[data-viewport="mobile"] .itsika-footer-links {
    justify-content: flex-start;
    gap:
        12px 18px;
}


/*
 * PORTRAIT TABLET / LARGE PHONE
 */
html[data-orientation="portrait"][data-viewport="tablet"]
.itsika-system-body {
    grid-template-columns: 1fr;
}

html[data-orientation="portrait"][data-viewport="tablet"]
.itsika-system-sidebar {
    display: none;
}


/*
 * TOUCH DEVICE
 * Give controls larger tap targets without unnecessarily
 * enlarging mouse-based desktop interfaces.
 */
html[data-pointer="touch"] a,
html[data-pointer="touch"] button {
    min-height: 44px;
}


/*
 * SHORT LAPTOP DISPLAYS
 * Prevent hero content from becoming unnecessarily tall.
 */
@media (
    min-width: 1024px
) and (
    max-height: 760px
) {

    .itsika-nav {
        padding-top: 10px;
    }

    .itsika-nav-inner {
        min-height: 66px;
    }

    .itsika-hero {
        padding-top: 22px;
    }

    .itsika-hero-copy,
    .itsika-system {
        min-height: 500px;
    }

    .itsika-title {
        font-size:
            clamp(
                50px,
                4.8vw,
                70px
            );
    }

    .itsika-hero-description {
        margin-top: 20px;
        line-height: 1.5;
    }

    .itsika-actions {
        margin-top: 22px;
    }

    .itsika-metrics {
        margin-top: 24px;
    }
}


/*
 * VERY SMALL PHONE
 */
@media (
    max-width: 390px
) {

    .itsika-title {
        font-size:
            clamp(
                42px,
                15vw,
                58px
            );
    }

    .itsika-system-status {
        display: none;
    }

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

/* ITSIKA_14G_A34_HOME_LOGO_SIZE */

.home-brand-mark,
.home-header .brand-mark,
.home-footer .brand-mark,
.home-footer-logo,
.home-header-logo {
    width: 46px !important;
    height: 46px !important;
    max-width: 46px !important;
    max-height: 46px !important;
}

.home-brand-mark img,
.home-header .brand-mark img,
.home-footer .brand-mark img,
.home-footer-logo img,
.home-header-logo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    transform: none !important;
}

@media (max-width: 720px) {
    .home-brand-mark,
    .home-header .brand-mark,
    .home-footer .brand-mark,
    .home-footer-logo,
    .home-header-logo {
        width: 40px !important;
        height: 40px !important;
        max-width: 40px !important;
        max-height: 40px !important;
    }
}

/* ================================================================
   ITSIKA_14G_A36_REAL_HOMEPAGE_LOGO_REPAIR
   Actual production selectors discovered by A35.
   ================================================================ */

.itsika-brand-logo {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    overflow: hidden !important;
    flex: 0 0 40px !important;
}

.itsika-brand-logo img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
}

.itsika-footer-logo {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    overflow: hidden !important;
    flex: 0 0 40px !important;
}

.itsika-footer-logo img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
}

@media (max-width: 720px) {
    .itsika-brand-logo,
    .itsika-footer-logo {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        max-width: 36px !important;
        max-height: 36px !important;
        flex-basis: 36px !important;
    }
}

/* ITSIKA_14G_A36_REAL_HOMEPAGE_LOGO_REPAIR_END */