:root {
    --font-display: "Sora", "Aptos", "Segoe UI", sans-serif;
    --font-body: "Inter", "Aptos", "Segoe UI", sans-serif;

    --color-navy-950: #07111f;
    --color-navy-900: #0a0f1c;
    --color-navy-800: #101b2d;

    --color-blue: #166bff;
    --color-violet: #6d4aff;
    --color-cyan: #00d4ff;

    --color-white: #ffffff;
    --color-surface: #f7f9fc;
    --color-text: #0a0f1c;
    --color-text-muted: #596579;
    --color-border: rgba(10, 15, 28, 0.12);

    --container-width: 1200px;
    --header-height: 84px;

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;

    --shadow-soft:
        0 18px 50px rgba(10, 15, 28, 0.08);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-width: 320px;

    font-family: var(--font-body);
    color: var(--color-text);

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8faff 100%
        );

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

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

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

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

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

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

    margin-inline: auto;
}

.skip-link {
    position: fixed;
    top: 10px;
    left: 10px;

    z-index: 9999;

    padding: 10px 14px;

    color: var(--color-white);
    background: var(--color-navy-950);

    border-radius: var(--radius-sm);

    transform: translateY(-150%);
}

.skip-link:focus {
    transform: translateY(0);
}

.site-header {
    position: sticky;
    top: 0;

    z-index: 1000;

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

    border-bottom:
        1px solid rgba(10, 15, 28, 0.06);

    background:
        rgba(255, 255, 255, 0.94);

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

.header-inner {
    min-height: var(--header-height);

    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;

    gap: 32px;
}

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

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

.primary-navigation {
    justify-self: center;

    display: flex;
    align-items: center;

    gap: 28px;

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

    color: #334155;
}

.primary-navigation a,
.language-link,
.footer-navigation a,
.footer-link-button {
    transition:
        color 180ms ease,
        opacity 180ms ease;
}

.primary-navigation a:hover,
.language-link:hover,
.footer-navigation a:hover,
.footer-link-button:hover {
    color: var(--color-blue);
}

.header-actions {
    display: flex;
    align-items: center;

    gap: 10px;
}

.language-link {
    padding: 10px;

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

    color: #334155;
}

.button {
    min-height: 44px;

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

    padding: 0 18px;

    border: 1px solid transparent;
    border-radius: var(--radius-sm);

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

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

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

.button-primary {
    color: var(--color-white);

    background:
        linear-gradient(
            135deg,
            var(--color-blue),
            var(--color-violet)
        );

    box-shadow:
        0 12px 30px rgba(22, 107, 255, 0.22);
}

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

    border-color:
        rgba(10, 15, 28, 0.16);
}

.nav-toggle {
    display: none;

    width: 44px;
    height: 44px;

    padding: 10px;

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

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

.nav-toggle span {
    width: 100%;
    height: 2px;

    display: block;

    margin: 4px 0;

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

.foundation-placeholder {
    min-height:
        calc(100vh - var(--header-height));

    display: grid;
    align-items: center;

    padding: 120px 0;

    background:
        radial-gradient(
            circle at 75% 35%,
            rgba(22, 107, 255, 0.10),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #ffffff,
            #f5f8fd
        );
}

.eyebrow {
    margin: 0 0 22px;

    font-family: var(--font-display);
    font-size: 0.76rem;
    font-weight: 600;

    letter-spacing: 0.24em;

    color: var(--color-blue);
}

h1,
h2,
h3 {
    margin-top: 0;

    font-family: var(--font-display);
    letter-spacing: -0.04em;
}

h1 {
    max-width: 850px;

    margin-bottom: 26px;

    font-size: clamp(
        3rem,
        6vw,
        6.25rem
    );

    line-height: 0.98;
}

.foundation-intro {
    max-width: 680px;

    margin: 0;

    font-size: clamp(
        1rem,
        2vw,
        1.22rem
    );

    line-height: 1.7;

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

.site-footer {
    padding: 54px 0 26px;

    color:
        rgba(255, 255, 255, 0.78);

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

.footer-inner {
    display: grid;
    grid-template-columns: auto 1fr;

    align-items: center;

    gap: 50px;

    padding-bottom: 34px;

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

.footer-logo {
    width: 220px;
    height: auto;
}

.footer-navigation {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;

    gap: 20px;

    font-size: 0.82rem;
}

.footer-link-button {
    padding: 0;

    color: inherit;

    border: 0;
    background: transparent;

    cursor: pointer;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;

    gap: 30px;

    padding-top: 22px;

    font-size: 0.75rem;

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

@media (max-width: 1050px) {
    .header-inner {
        grid-template-columns: auto auto;
    }

    .nav-toggle {
        display: block;
        justify-self: end;
    }

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

        display: none;

        padding: 22px;

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

        background: var(--color-white);

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

    .primary-navigation.is-open {
        display: grid;
        gap: 18px;
    }

    .header-actions {
        display: none;
    }
}

@media (max-width: 720px) {
    :root {
        --header-height: 72px;
    }

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

    .brand img {
        width: 132px;
    }

    .foundation-placeholder {
        padding: 80px 0;
    }

    h1 {
        font-size:
            clamp(
                2.65rem,
                14vw,
                4.25rem
            );
    }

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

        gap: 30px;
    }

    .footer-navigation {
        justify-content: flex-start;
    }

    .footer-bottom {
        flex-direction: column;

        gap: 8px;
    }
}

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

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

/* =========================================================
   LOYKI V3 HERO
   ========================================================= */

.hero {
    position: relative;
    isolation: isolate;

    min-height: 760px;

    display: flex;
    align-items: center;

    overflow: hidden;

    color: var(--color-white);

    background:
        linear-gradient(
            120deg,
            #07111f 0%,
            #0a1730 52%,
            #102548 100%
        );
}

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

    z-index: -2;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 72% 42%,
            rgba(22, 107, 255, 0.20),
            transparent 31%
        ),
        radial-gradient(
            circle at 88% 20%,
            rgba(0, 212, 255, 0.08),
            transparent 24%
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.015) 1px,
            transparent 1px
        );

    background-size:
        auto,
        auto,
        72px 72px;
}

.hero-background::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(7, 17, 31, 0.06),
            transparent 44%,
            rgba(7, 17, 31, 0.03)
        );
}

.hero-layout {
    min-height: 760px;

    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(460px, 1.08fr);

    align-items: center;

    gap: clamp(36px, 5vw, 78px);

    padding-top: 72px;
    padding-bottom: 54px;
}

.hero-copy {
    position: relative;

    z-index: 3;
}

.hero-eyebrow {
    margin-bottom: 24px;

    color: #8fb9ff;
}

.hero h1 {
    max-width: 720px;

    margin-bottom: 24px;

    font-size:
        clamp(
            3.2rem,
            5.45vw,
            5.35rem
        );

    line-height: 1.01;

    color: var(--color-white);
}

.hero h1 span {
    display: block;

    color: #74a7ff;
}

.hero-lead {
    max-width: 650px;

    margin: 0 0 13px;

    font-size:
        clamp(
            1.04rem,
            1.45vw,
            1.18rem
        );

    line-height: 1.65;

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

.hero-support {
    margin: 0;

    font-size: 0.96rem;
    line-height: 1.6;

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

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

    gap: 13px;

    margin-top: 32px;
}

.hero-actions .button {
    min-height: 52px;

    padding-inline: 23px;
}

.hero-primary {
    gap: 13px;
}

.button-hero-secondary {
    min-height: 52px;

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

    padding: 0 23px;

    color: var(--color-white);

    border:
        1px solid rgba(255, 255, 255, 0.35);

    border-radius: var(--radius-sm);

    background:
        rgba(255, 255, 255, 0.035);

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

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

.button-hero-secondary:hover {
    transform: translateY(-1px);

    border-color:
        rgba(255, 255, 255, 0.56);

    background:
        rgba(255, 255, 255, 0.075);
}

/* Investor entry points */

.button-investor {
    gap: 8px;

    color: #ffffff;

    border-color:
        rgba(74, 200, 255, 0.72);

    background:
        linear-gradient(
            135deg,
            rgba(22, 107, 255, 0.16),
            rgba(0, 198, 255, 0.08)
        );

    box-shadow:
        0 0 0 1px rgba(22, 107, 255, 0.08),
        0 10px 28px rgba(0, 174, 255, 0.10);
}

.button-investor:hover {
    border-color:
        rgba(91, 211, 255, 0.95);

    background:
        linear-gradient(
            135deg,
            rgba(22, 107, 255, 0.25),
            rgba(0, 198, 255, 0.13)
        );

    box-shadow:
        0 0 0 1px rgba(22, 107, 255, 0.12),
        0 12px 32px rgba(0, 174, 255, 0.16);
}

.button-investor-header {
    min-height: 40px;

    padding-inline: 14px;

    color: #075fc7;

    border-color:
        rgba(22, 107, 255, 0.28);

    background:
        rgba(22, 107, 255, 0.055);

    font-size: 0.82rem;
}

.button-investor-header:hover {
    color: #0754b4;

    border-color:
        rgba(22, 107, 255, 0.48);

    background:
        rgba(22, 107, 255, 0.10);

    box-shadow:
        0 8px 22px rgba(22, 107, 255, 0.10);
}

@media (min-width: 769px) {
    .hero-actions {
        flex-wrap: nowrap;
        gap: 10px;
    }

    .hero-actions .button,
    .hero-actions .button-hero-secondary {
        padding-inline: 18px;
        white-space: nowrap;
    }
}

.hero-trust {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 18px;

    margin-top: 52px;
    padding-top: 28px;

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

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

    gap: 11px;

    min-width: 0;

    color:
        rgba(255, 255, 255, 0.60);

    font-size: 0.69rem;
    line-height: 1.35;
}

.hero-trust-item strong {
    display: block;

    margin-bottom: 2px;

    color:
        rgba(255, 255, 255, 0.92);

    font-size: 0.73rem;
    font-weight: 650;
}

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

    flex: 0 0 34px;

    display: grid;
    place-items: center;

    color: #78aaff;

    border:
        1px solid rgba(120, 170, 255, 0.26);

    border-radius: 10px;

    background:
        rgba(120, 170, 255, 0.07);
}

.hero-trust-icon svg {
    width: 19px;
    height: 19px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.6;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.hero-trust-eu span {
    font-size: 0.68rem;
    font-weight: 750;

    letter-spacing: 0.08em;
}

/* ---------------------------------------------------------
   Product Mockup
   --------------------------------------------------------- */

.hero-product {
    position: relative;

    min-height: 560px;

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

.product-aura {
    position: absolute;

    width: 520px;
    height: 520px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(59, 123, 255, 0.20) 0%,
            rgba(55, 102, 228, 0.10) 34%,
            transparent 70%
        );

    filter: blur(3px);

    pointer-events: none;
}

.product-screen {
    position: relative;

    z-index: 2;

    width: min(100%, 610px);

    overflow: hidden;

    border:
        1px solid rgba(255, 255, 255, 0.20);

    border-radius: 18px;

    background:
        rgba(238, 245, 255, 0.98);

    box-shadow:
        0 36px 90px rgba(0, 0, 0, 0.34),
        0 0 70px rgba(37, 99, 235, 0.10);
}

.product-screen-top {
    height: 55px;

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

    padding: 0 18px;

    color: #e9f2ff;

    background:
        linear-gradient(
            90deg,
            #0b1930,
            #102548
        );

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

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

    gap: 9px;

    font-family: var(--font-display);
    font-size: 0.93rem;
    font-weight: 650;
}

.product-brand img {
    width: 27px;
    height: 27px;
}

.product-status {
    display: flex;
    align-items: center;

    gap: 7px;

    font-size: 0.67rem;

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

.product-status span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #4ade80;

    box-shadow:
        0 0 12px rgba(74, 222, 128, 0.65);
}

.product-app {
    min-height: 370px;

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

.product-sidebar {
    padding: 18px 12px;

    color:
        rgba(255, 255, 255, 0.66);

    background: #0b1930;

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

.product-nav-item {
    min-height: 38px;

    display: flex;
    align-items: center;

    gap: 8px;

    padding: 0 10px;
    margin-bottom: 3px;

    border-radius: 8px;

    font-size: 0.66rem;
}

.product-nav-item span {
    width: 15px;

    text-align: center;

    color: #83b2ff;
}

.product-nav-item.is-active {
    color: #ffffff;

    background:
        rgba(83, 128, 205, 0.22);
}

.product-main {
    position: relative;

    padding: 52px 34px 30px;

    color: #0a1730;

    background:
        radial-gradient(
            circle at 50% 10%,
            rgba(71, 125, 255, 0.08),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #fbfdff,
            #f2f6fc
        );
}

.product-welcome {
    text-align: center;
}

.product-welcome > span {
    display: block;

    margin-bottom: 7px;

    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 650;

    color: #0f3175;
}

.product-welcome p {
    margin: 0;

    font-size: 0.76rem;

    color: #60708a;
}

.product-prompt {
    min-height: 48px;

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

    gap: 10px;

    margin: 28px auto 27px;
    padding: 0 9px 0 16px;

    border:
        1px solid rgba(31, 76, 155, 0.12);

    border-radius: 10px;

    background: #ffffff;

    box-shadow:
        0 9px 24px rgba(37, 63, 109, 0.06);
}

.product-prompt span {
    font-size: 0.63rem;

    color: #94a0b1;
}

.product-prompt strong {
    width: 31px;
    height: 31px;

    display: grid;
    place-items: center;

    border-radius: 8px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #2878ff,
            #5361ff
        );
}

.product-shortcuts {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 9px;
}

.product-shortcut {
    min-height: 92px;

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

    padding: 10px;

    text-align: center;

    border:
        1px solid rgba(31, 76, 155, 0.09);

    border-radius: 10px;

    background:
        rgba(255, 255, 255, 0.82);
}

.shortcut-icon {
    width: 29px;
    height: 29px;

    display: grid;
    place-items: center;

    margin-bottom: 7px;

    color: #3e6eff;

    border-radius: 8px;

    background:
        rgba(62, 110, 255, 0.08);
}

.product-shortcut strong {
    font-size: 0.58rem;
    font-weight: 700;

    color: #213555;
}

.product-shortcut small {
    margin-top: 2px;

    font-size: 0.54rem;

    color: #8591a3;
}

.product-note {
    position: absolute;
    top: 34px;
    right: -7px;

    z-index: 3;

    font-family: var(--font-display);
    font-size: 0.66rem;

    letter-spacing: 0.18em;
    line-height: 1.65;

    color:
        rgba(170, 199, 255, 0.64);

    pointer-events: none;
}

.product-note strong {
    font-weight: 600;

    color: #8fb9ff;
}

/* ---------------------------------------------------------
   Hero responsive
   --------------------------------------------------------- */

@media (max-width: 1180px) {
    .hero-layout {
        grid-template-columns:
            minmax(0, 0.92fr)
            minmax(400px, 1.08fr);

        gap: 36px;
    }

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

    .product-note {
        display: none;
    }
}

@media (max-width: 960px) {
    .hero {
        min-height: auto;
    }

    .hero-layout {
        min-height: auto;

        grid-template-columns: 1fr;

        padding-top: 88px;
        padding-bottom: 72px;
    }

    .hero-copy {
        max-width: 720px;
    }

    .hero-product {
        min-height: auto;

        padding-top: 22px;
    }

    .product-screen {
        width: min(100%, 680px);
    }
}

@media (max-width: 650px) {
    .hero-layout {
        padding-top: 62px;
        padding-bottom: 54px;
    }

    .hero h1 {
        font-size:
            clamp(
                2.65rem,
                13.5vw,
                4.2rem
            );
    }

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

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

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

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

        gap: 18px 12px;
    }

    .product-screen {
        border-radius: 14px;
    }

    .product-app {
        grid-template-columns: 72px 1fr;
    }

    .product-sidebar {
        padding-inline: 7px;
    }

    .product-nav-item {
        justify-content: center;

        padding-inline: 5px;

        font-size: 0;
    }

    .product-nav-item span {
        font-size: 0.78rem;
    }

    .product-main {
        padding:
            36px
            16px
            20px;
    }

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

/* =========================================================
   LOYKI V3 HERO – REAL V1 GUI
   ========================================================= */

.hero-product-real {
    position: relative;

    min-height: 560px;

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

.hero-gui-frame {
    position: relative;

    z-index: 2;

    width: min(100%, 690px);

    padding: 10px;

    overflow: hidden;

    border:
        1px solid rgba(255, 255, 255, 0.22);

    border-radius: 20px;

    background:
        rgba(255, 255, 255, 0.055);

    box-shadow:
        0 38px 100px rgba(0, 0, 0, 0.38),
        0 0 80px rgba(22, 107, 255, 0.10);

    backdrop-filter: blur(6px);
}

.hero-gui-image {
    display: block;

    width: 100%;
    height: auto;

    border-radius: 12px;
}

@media (max-width: 960px) {
    .hero-product-real {
        min-height: auto;

        padding-top: 22px;
    }

    .hero-gui-frame {
        width: min(100%, 720px);
    }
}

@media (max-width: 650px) {
    .hero-gui-frame {
        padding: 6px;

        border-radius: 14px;
    }

    .hero-gui-image {
        border-radius: 9px;
    }
}

/* =========================================================
   LOYKI V3 – UNTERNEHMENSWISSEN
   ========================================================= */

.knowledge-section {
    position: relative;

    padding:
        clamp(96px, 10vw, 150px)
        0
        clamp(90px, 9vw, 135px);

    overflow: hidden;

    color: #0a1730;

    background:
        radial-gradient(
            circle at 50% 48%,
            rgba(22, 107, 255, 0.045),
            transparent 31%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8faff 100%
        );
}

.knowledge-section::before {
    content: "";

    position: absolute;
    top: 0;
    left: 50%;

    width: min(1180px, calc(100% - 48px));
    height: 1px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(22, 107, 255, 0.16),
            transparent
        );
}

.knowledge-intro {
    max-width: 850px;

    margin: 0 auto 72px;

    text-align: center;
}

.knowledge-intro .eyebrow {
    margin-bottom: 18px;

    color: #166bff;
}

.knowledge-intro h2 {
    margin: 0;

    font-family: var(--font-display);

    font-size:
        clamp(
            2.55rem,
            4.6vw,
            4.45rem
        );

    line-height: 1.06;

    letter-spacing: -0.045em;

    color: #07111f;
}

.knowledge-intro h2 span {
    display: block;

    color: #166bff;
}

.knowledge-lead {
    max-width: 760px;

    margin: 27px auto 0;

    font-size:
        clamp(
            1rem,
            1.3vw,
            1.13rem
        );

    line-height: 1.75;

    color: #60708a;
}

.knowledge-visual {
    position: relative;

    display: grid;
    grid-template-columns:
        minmax(220px, 0.86fr)
        70px
        minmax(270px, 1.04fr)
        70px
        minmax(250px, 0.96fr);

    align-items: center;

    gap: 18px;

    max-width: 1180px;

    margin: 0 auto;
}

.knowledge-sources,
.knowledge-results {
    display: grid;

    gap: 12px;
}

.knowledge-source-card {
    min-height: 82px;

    display: flex;
    align-items: center;

    gap: 15px;

    padding: 16px;

    border:
        1px solid rgba(31, 76, 155, 0.09);

    border-radius: 14px;

    background:
        rgba(255, 255, 255, 0.92);

    box-shadow:
        0 10px 30px rgba(23, 47, 84, 0.045);
}

.knowledge-source-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    color: #166bff;

    background:
        rgba(22, 107, 255, 0.07);
}

.knowledge-source-icon svg {
    width: 21px;
    height: 21px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.55;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.knowledge-source-card strong {
    display: block;

    margin-bottom: 3px;

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

    color: #172b4d;
}

.knowledge-source-card span {
    display: block;

    font-size: 0.68rem;
    line-height: 1.45;

    color: #7a889c;
}

.knowledge-flow {
    position: relative;

    height: 240px;

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

.knowledge-flow::before {
    content: "";

    position: absolute;
    top: 50%;
    left: 0;
    right: 0;

    height: 1px;

    transform: translateY(-50%);

    background:
        linear-gradient(
            90deg,
            rgba(22, 107, 255, 0.08),
            rgba(22, 107, 255, 0.45)
        );
}

.knowledge-flow span {
    position: relative;

    display: block;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(22, 107, 255, 0.04),
            rgba(22, 107, 255, 0.30)
        );
}

.knowledge-flow span::after {
    content: "";

    position: absolute;
    top: 50%;
    right: -1px;

    width: 6px;
    height: 6px;

    transform: translateY(-50%) rotate(45deg);

    border-top: 1px solid #4388ff;
    border-right: 1px solid #4388ff;
}

.knowledge-flow-out span,
.knowledge-flow-out::before {
    background:
        linear-gradient(
            90deg,
            rgba(22, 107, 255, 0.38),
            rgba(22, 107, 255, 0.07)
        );
}

.knowledge-core {
    position: relative;

    min-height: 365px;

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

    padding: 40px 28px;

    overflow: hidden;

    text-align: center;

    border:
        1px solid rgba(22, 107, 255, 0.15);

    border-radius: 26px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f3f7ff
        );

    box-shadow:
        0 28px 70px rgba(31, 65, 118, 0.09);
}

.knowledge-core::before {
    content: "";

    position: absolute;
    inset: 9px;

    pointer-events: none;

    border:
        1px solid rgba(22, 107, 255, 0.055);

    border-radius: 20px;
}

.knowledge-core-glow {
    position: absolute;
    top: -85px;
    left: 50%;

    width: 270px;
    height: 210px;

    transform: translateX(-50%);

    border-radius: 50%;

    background:
        rgba(22, 107, 255, 0.10);

    filter: blur(55px);

    pointer-events: none;
}

.knowledge-core-emblem {
    position: relative;

    width: 70px;
    height: 70px;

    display: grid;
    place-items: center;

    margin-bottom: 19px;

    border:
        1px solid rgba(22, 107, 255, 0.14);

    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 16px 35px rgba(22, 107, 255, 0.10);
}

.knowledge-core-emblem img {
    width: 48px;
    height: 48px;
}

.knowledge-core-label {
    margin: 0 0 8px;

    font-family: var(--font-display);
    font-size: 0.65rem;
    font-weight: 700;

    letter-spacing: 0.24em;

    color: #166bff;
}

.knowledge-core h3 {
    position: relative;

    margin: 0;

    font-family: var(--font-display);
    font-size: 1.4rem;
    line-height: 1.2;

    color: #0a1730;
}

.knowledge-core > p:not(.knowledge-core-label) {
    position: relative;

    max-width: 260px;

    margin: 13px 0 0;

    font-size: 0.76rem;
    line-height: 1.6;

    color: #718097;
}

.knowledge-core-tags {
    position: relative;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    gap: 7px;

    margin-top: 22px;
}

.knowledge-core-tags span {
    padding: 6px 10px;

    border:
        1px solid rgba(22, 107, 255, 0.10);

    border-radius: 999px;

    background:
        rgba(22, 107, 255, 0.045);

    font-size: 0.61rem;
    font-weight: 650;

    color: #3567ba;
}

.knowledge-result-card {
    min-height: 105px;

    display: flex;
    align-items: flex-start;

    gap: 13px;

    padding: 17px;

    border:
        1px solid rgba(31, 76, 155, 0.09);

    border-radius: 14px;

    background:
        rgba(255, 255, 255, 0.94);

    box-shadow:
        0 10px 30px rgba(23, 47, 84, 0.045);
}

.knowledge-result-number {
    flex: 0 0 auto;

    padding-top: 2px;

    font-family: var(--font-display);
    font-size: 0.64rem;
    font-weight: 700;

    letter-spacing: 0.08em;

    color: #4d83e0;
}

.knowledge-result-card strong {
    display: block;

    margin-bottom: 5px;

    font-size: 0.84rem;

    color: #172b4d;
}

.knowledge-result-card p {
    margin: 0;

    font-size: 0.67rem;
    line-height: 1.55;

    color: #7a889c;
}

.knowledge-principle {
    max-width: 930px;

    display: grid;
    grid-template-columns:
        auto
        minmax(210px, 0.8fr)
        minmax(300px, 1.2fr);

    align-items: center;

    gap: 18px 22px;

    margin:
        clamp(58px, 6vw, 82px)
        auto
        0;

    padding: 21px 24px;

    border:
        1px solid rgba(22, 107, 255, 0.10);

    border-radius: 16px;

    background:
        rgba(255, 255, 255, 0.78);
}

.knowledge-principle-mark {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    color: #166bff;

    background:
        rgba(22, 107, 255, 0.07);
}

.knowledge-principle-mark svg {
    width: 21px;
    height: 21px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.6;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.knowledge-principle span {
    display: block;

    margin-bottom: 3px;

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

    letter-spacing: 0.12em;

    text-transform: uppercase;

    color: #5f7eaf;
}

.knowledge-principle strong {
    display: block;

    font-family: var(--font-display);
    font-size: 0.95rem;

    color: #152b4d;
}

.knowledge-principle p {
    margin: 0;

    font-size: 0.75rem;
    line-height: 1.55;

    color: #718097;
}

/* ---------------------------------------------------------
   Unternehmenswissen responsive
   --------------------------------------------------------- */

@media (max-width: 1050px) {
    .knowledge-visual {
        grid-template-columns:
            minmax(220px, 1fr)
            48px
            minmax(260px, 1fr);

        gap: 15px;
    }

    .knowledge-results {
        grid-column: 1 / -1;

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        margin-top: 14px;
    }

    .knowledge-flow-out {
        display: none;
    }
}

@media (max-width: 760px) {
    .knowledge-section {
        padding:
            82px
            0
            78px;
    }

    .knowledge-intro {
        margin-bottom: 50px;

        text-align: left;
    }

    .knowledge-intro h2 span {
        display: inline;
    }

    .knowledge-visual {
        grid-template-columns: 1fr;

        gap: 22px;
    }

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

    .knowledge-flow {
        width: 1px;
        height: 44px;

        margin: 0 auto;

        background:
            linear-gradient(
                180deg,
                rgba(22, 107, 255, 0.10),
                rgba(22, 107, 255, 0.45)
            );
    }

    .knowledge-flow::before,
    .knowledge-flow span {
        display: none;
    }

    .knowledge-core {
        min-height: 320px;
    }

    .knowledge-results {
        grid-column: auto;

        grid-template-columns: 1fr;

        margin-top: 0;
    }

    .knowledge-principle {
        grid-template-columns:
            auto
            1fr;

        margin-top: 52px;
    }

    .knowledge-principle p {
        grid-column: 1 / -1;
    }
}

@media (max-width: 520px) {
    .knowledge-sources {
        grid-template-columns: 1fr;
    }

    .knowledge-intro h2 {
        font-size:
            clamp(
                2.35rem,
                11.5vw,
                3.25rem
            );
    }

    .knowledge-source-card {
        min-height: 76px;
    }
}

/* =========================================================
   LOYKI V3 – KNOWLEDGE VISUAL POLISH V1
   ========================================================= */

.knowledge-intro {
    max-width: 920px;
    margin-bottom: 64px;
}

.knowledge-lead {
    max-width: 820px;

    font-size:
        clamp(
            1.02rem,
            1.35vw,
            1.16rem
        );

    color: #5b6c84;
}

.knowledge-visual {
    grid-template-columns:
        minmax(250px, 0.92fr)
        58px
        minmax(320px, 1.06fr)
        58px
        minmax(285px, 1fr);

    gap: 16px;

    max-width: 1240px;
}

.knowledge-source-card {
    min-height: 94px;

    gap: 17px;

    padding: 18px 19px;

    border-color:
        rgba(22, 107, 255, 0.12);

    box-shadow:
        0 14px 34px rgba(23, 47, 84, 0.06);
}

.knowledge-source-icon {
    width: 46px;
    height: 46px;

    flex-basis: 46px;
}

.knowledge-source-icon svg {
    width: 23px;
    height: 23px;
}

.knowledge-source-card strong {
    margin-bottom: 4px;

    font-size: 0.94rem;
}

.knowledge-source-card span {
    font-size: 0.73rem;
    line-height: 1.5;

    color: #697a91;
}

.knowledge-core {
    min-height: 405px;

    padding: 44px 32px;

    border-color:
        rgba(22, 107, 255, 0.19);

    box-shadow:
        0 30px 80px rgba(31, 65, 118, 0.12);
}

.knowledge-core-emblem {
    width: 78px;
    height: 78px;

    margin-bottom: 21px;

    border-radius: 22px;
}

.knowledge-core-emblem img {
    width: 54px;
    height: 54px;
}

.knowledge-core-label {
    margin-bottom: 9px;

    font-size: 0.68rem;
}

.knowledge-core h3 {
    font-size: 1.58rem;
}

.knowledge-core > p:not(.knowledge-core-label) {
    max-width: 285px;

    margin-top: 15px;

    font-size: 0.82rem;
    line-height: 1.65;

    color: #66778f;
}

.knowledge-core-tags {
    margin-top: 24px;
}

.knowledge-core-tags span {
    padding: 7px 12px;

    font-size: 0.65rem;
}

.knowledge-result-card {
    min-height: 118px;

    gap: 15px;

    padding: 19px;

    border-color:
        rgba(22, 107, 255, 0.12);

    box-shadow:
        0 14px 34px rgba(23, 47, 84, 0.06);
}

.knowledge-result-number {
    font-size: 0.68rem;
}

.knowledge-result-card strong {
    margin-bottom: 6px;

    font-size: 0.92rem;
}

.knowledge-result-card p {
    font-size: 0.72rem;
    line-height: 1.6;

    color: #697a91;
}

.knowledge-flow {
    height: 270px;
}

.knowledge-principle {
    max-width: 980px;

    margin-top: 66px;

    padding: 23px 26px;

    border-color:
        rgba(22, 107, 255, 0.13);

    box-shadow:
        0 14px 34px rgba(23, 47, 84, 0.045);
}

.knowledge-principle strong {
    font-size: 1rem;
}

.knowledge-principle p {
    font-size: 0.79rem;

    color: #66778f;
}

@media (max-width: 1050px) {
    .knowledge-visual {
        grid-template-columns:
            minmax(240px, 1fr)
            48px
            minmax(300px, 1.05fr);
    }

    .knowledge-results {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .knowledge-visual {
        grid-template-columns: 1fr;
    }

    .knowledge-core {
        min-height: 340px;
    }

    .knowledge-results {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   LOYKI V3 – LOYKI IN AKTION V1
   ========================================================= */

.action-section {
    position: relative;

    padding:
        clamp(100px, 10vw, 150px)
        0
        clamp(100px, 10vw, 145px);

    overflow: hidden;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 78% 24%,
            rgba(22, 107, 255, 0.18),
            transparent 28%
        ),
        radial-gradient(
            circle at 16% 74%,
            rgba(109, 74, 255, 0.10),
            transparent 26%
        ),
        linear-gradient(
            145deg,
            #07111f 0%,
            #09182c 55%,
            #0a1e39 100%
        );
}

.action-section::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: 0.16;

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

    background-size:
        70px 70px;
}

.action-section .container {
    position: relative;

    z-index: 1;
}

.action-heading {
    display: grid;
    grid-template-columns:
        minmax(0, 1.18fr)
        minmax(320px, 0.82fr);

    align-items: end;

    gap: 60px;

    margin-bottom: 62px;
}

.action-heading .eyebrow {
    margin-bottom: 17px;

    color: #78aaff;
}

.action-heading h2 {
    max-width: 760px;

    margin: 0;

    font-family: var(--font-display);

    font-size:
        clamp(
            2.7rem,
            4.7vw,
            4.75rem
        );

    line-height: 1.04;

    letter-spacing: -0.045em;

    color: #ffffff;
}

.action-heading h2 span {
    display: block;

    color: #78aaff;
}

.action-heading-copy {
    max-width: 510px;

    margin: 0 0 6px;

    font-size:
        clamp(
            0.98rem,
            1.2vw,
            1.08rem
        );

    line-height: 1.75;

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

/* ---------------------------------------------------------
   Demo shell
   --------------------------------------------------------- */

.demo-shell {
    max-width: 1240px;

    margin: 0 auto;
}

.demo-tabs {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 8px;

    margin-bottom: 12px;

    padding: 7px;

    border:
        1px solid rgba(255, 255, 255, 0.10);

    border-radius: 17px;

    background:
        rgba(255, 255, 255, 0.04);

    backdrop-filter: blur(12px);
}

.demo-tab {
    min-width: 0;
    min-height: 76px;

    display: flex;
    align-items: center;

    gap: 13px;

    padding: 13px 14px;

    text-align: left;

    color:
        rgba(255, 255, 255, 0.58);

    border: 1px solid transparent;
    border-radius: 12px;

    background: transparent;

    cursor: pointer;

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

.demo-tab:hover {
    color:
        rgba(255, 255, 255, 0.88);

    background:
        rgba(255, 255, 255, 0.04);
}

.demo-tab.is-active {
    color: #ffffff;

    border-color:
        rgba(120, 170, 255, 0.24);

    background:
        linear-gradient(
            135deg,
            rgba(22, 107, 255, 0.18),
            rgba(92, 97, 255, 0.09)
        );
}

.demo-tab-index {
    flex: 0 0 auto;

    font-family: var(--font-display);
    font-size: 0.68rem;
    font-weight: 700;

    color: #78aaff;
}

.demo-tab strong {
    display: block;

    margin-bottom: 3px;

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

.demo-tab small {
    display: block;

    overflow: hidden;

    font-size: 0.62rem;

    white-space: nowrap;
    text-overflow: ellipsis;

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

.demo-stage {
    display: grid;
    grid-template-columns:
        minmax(0, 1.18fr)
        minmax(390px, 0.82fr);

    min-height: 610px;

    overflow: hidden;

    border:
        1px solid rgba(255, 255, 255, 0.12);

    border-radius: 24px;

    background:
        rgba(4, 13, 26, 0.54);

    box-shadow:
        0 45px 120px rgba(0, 0, 0, 0.34);

    backdrop-filter: blur(16px);
}

/* ---------------------------------------------------------
   Actual V1 product image
   --------------------------------------------------------- */

.demo-product-side {
    min-width: 0;

    display: flex;
    flex-direction: column;

    padding: 22px;

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

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.04),
            rgba(255, 255, 255, 0.015)
        );
}

.demo-product-header {
    min-height: 36px;

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

    gap: 15px;

    margin-bottom: 18px;

    font-size: 0.67rem;

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

.demo-product-header > div {
    display: flex;
    align-items: center;

    gap: 8px;
}

.demo-product-header strong {
    color:
        rgba(255, 255, 255, 0.80);

    font-weight: 650;
}

.demo-live-dot {
    width: 7px;
    height: 7px;

    display: inline-block;

    border-radius: 50%;

    background: #38d67a;

    box-shadow:
        0 0 10px rgba(56, 214, 122, 0.6);
}

.demo-gui-wrap {
    position: relative;

    min-height: 0;

    flex: 1;

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

    padding: 12px;

    overflow: hidden;

    border:
        1px solid rgba(255, 255, 255, 0.08);

    border-radius: 16px;

    background:
        radial-gradient(
            circle at 50% 38%,
            rgba(22, 107, 255, 0.12),
            transparent 46%
        ),
        rgba(1, 7, 16, 0.48);
}

.demo-gui-image {
    display: block;

    width: 100%;
    height: auto;

    border-radius: 10px;

    box-shadow:
        0 28px 65px rgba(0, 0, 0, 0.30);
}

.demo-gui-badge {
    position: absolute;
    left: 25px;
    bottom: 25px;

    display: flex;
    align-items: center;

    gap: 8px;

    padding: 8px 11px;

    border:
        1px solid rgba(255, 255, 255, 0.16);

    border-radius: 10px;

    background:
        rgba(5, 15, 29, 0.86);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.22);

    backdrop-filter: blur(10px);

    font-size: 0.62rem;
    font-weight: 650;

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

.demo-gui-badge img {
    width: 20px;
    height: 20px;
}

/* ---------------------------------------------------------
   Interactive panel
   --------------------------------------------------------- */

.demo-panel {
    min-width: 0;

    display: flex;
    flex-direction: column;

    padding:
        clamp(26px, 3vw, 38px);
}

.demo-panel-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 18px;

    margin-bottom: 25px;
}

.demo-mode-label {
    display: block;

    margin-bottom: 7px;

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

    letter-spacing: 0.16em;

    color: #78aaff;
}

.demo-panel h3 {
    margin: 0;

    font-family: var(--font-display);
    font-size:
        clamp(
            1.45rem,
            2vw,
            1.85rem
        );

    color: #ffffff;
}

.demo-local-badge {
    flex: 0 0 auto;

    display: flex;
    align-items: center;

    gap: 7px;

    padding: 7px 9px;

    border:
        1px solid rgba(85, 219, 149, 0.20);

    border-radius: 999px;

    background:
        rgba(65, 190, 125, 0.07);

    font-size: 0.58rem;

    color:
        rgba(185, 247, 214, 0.80);
}

.demo-local-badge > span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #45d78b;
}

.demo-request {
    padding: 16px 17px;

    border:
        1px solid rgba(120, 170, 255, 0.14);

    border-radius: 13px;

    background:
        rgba(22, 107, 255, 0.06);
}

.demo-request > span {
    display: block;

    margin-bottom: 6px;

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

    letter-spacing: 0.12em;

    text-transform: uppercase;

    color: #78aaff;
}

.demo-request p {
    margin: 0;

    font-size: 0.78rem;
    line-height: 1.55;

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

.demo-progress {
    margin: 19px 0;
}

.demo-progress-track {
    height: 3px;

    overflow: hidden;

    border-radius: 999px;

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

.demo-progress-track span {
    display: block;

    width: 0%;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #166bff,
            #6d4aff
        );

    transition:
        width 300ms ease;
}

.demo-progress-meta {
    display: flex;
    justify-content: space-between;

    margin-top: 7px;

    font-size: 0.57rem;

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

.demo-timeline {
    display: grid;

    gap: 7px;
}

.demo-step {
    display: grid;
    grid-template-columns: 24px 1fr;

    gap: 10px;

    padding: 9px 10px;

    border:
        1px solid transparent;

    border-radius: 10px;

    opacity: 0.47;

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

.demo-step.is-active {
    opacity: 1;

    transform: translateX(2px);

    border-color:
        rgba(120, 170, 255, 0.14);

    background:
        rgba(120, 170, 255, 0.05);
}

.demo-step.is-complete {
    opacity: 0.78;
}

.demo-step-status {
    width: 21px;
    height: 21px;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(255, 255, 255, 0.14);

    border-radius: 50%;
}

.demo-step-status > span {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.28);
}

.demo-step.is-active .demo-step-status {
    border-color:
        rgba(120, 170, 255, 0.58);
}

.demo-step.is-active .demo-step-status > span {
    background: #78aaff;

    box-shadow:
        0 0 9px rgba(120, 170, 255, 0.72);
}

.demo-step.is-complete .demo-step-status {
    border-color:
        rgba(61, 216, 137, 0.46);
}

.demo-step.is-complete .demo-step-status > span {
    background: #3dd889;
}

.demo-step small {
    display: block;

    margin-bottom: 2px;

    font-size: 0.52rem;

    color:
        rgba(120, 170, 255, 0.60);
}

.demo-step strong {
    display: block;

    margin-bottom: 2px;

    font-size: 0.68rem;

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

.demo-step p {
    margin: 0;

    font-size: 0.58rem;
    line-height: 1.45;

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

/* ---------------------------------------------------------
   Result / Approval
   --------------------------------------------------------- */

.demo-result,
.demo-approval {
    margin-top: 13px;

    padding: 14px;

    border-radius: 11px;
}

.demo-result {
    border:
        1px solid rgba(120, 170, 255, 0.18);

    background:
        rgba(22, 107, 255, 0.07);
}

.demo-result-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 8px;
}

.demo-result-head span {
    font-size: 0.55rem;
    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    color: #78aaff;
}

.demo-result-head strong {
    font-size: 0.62rem;

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

.demo-result p {
    margin: 0;

    font-size: 0.63rem;
    line-height: 1.55;

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

.demo-result-sources {
    display: flex;
    flex-wrap: wrap;

    gap: 5px;

    margin-top: 10px;
}

.demo-result-sources span {
    padding: 4px 7px;

    border:
        1px solid rgba(120, 170, 255, 0.13);

    border-radius: 999px;

    font-size: 0.52rem;

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

.demo-approval {
    display: grid;
    grid-template-columns: 38px 1fr;

    gap: 12px;

    border:
        1px solid rgba(248, 190, 70, 0.19);

    background:
        rgba(248, 190, 70, 0.06);
}

.demo-approval[hidden],
.demo-result[hidden] {
    display: none;
}

.demo-approval-icon {
    width: 35px;
    height: 35px;

    display: grid;
    place-items: center;

    border-radius: 9px;

    color: #f2c568;

    background:
        rgba(242, 197, 104, 0.07);
}

.demo-approval-icon svg {
    width: 19px;
    height: 19px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.6;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.demo-approval span {
    display: block;

    margin-bottom: 3px;

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

    letter-spacing: 0.12em;

    color: #f2c568;
}

.demo-approval strong {
    display: block;

    margin-bottom: 3px;

    font-size: 0.68rem;

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

.demo-approval p {
    margin: 0;

    font-size: 0.57rem;
    line-height: 1.45;

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

/* ---------------------------------------------------------
   Controls
   --------------------------------------------------------- */

.demo-controls {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-top: auto;
    padding-top: 20px;
}

.demo-control {
    min-height: 36px;

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

    gap: 7px;

    padding: 0 12px;

    border:
        1px solid rgba(255, 255, 255, 0.14);

    border-radius: 9px;

    background:
        rgba(255, 255, 255, 0.035);

    font: inherit;
    font-size: 0.61rem;
    font-weight: 650;

    color:
        rgba(255, 255, 255, 0.68);

    cursor: pointer;

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

.demo-control:hover:not(:disabled) {
    transform: translateY(-1px);

    border-color:
        rgba(255, 255, 255, 0.25);

    background:
        rgba(255, 255, 255, 0.07);
}

.demo-control-primary {
    border-color:
        rgba(55, 125, 255, 0.56);

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #166bff,
            #5a53f5
        );
}

.demo-control:disabled {
    opacity: 0.34;

    cursor: default;
}

.demo-disclaimer {
    margin:
        12px
        0
        0;

    font-size: 0.51rem;
    line-height: 1.45;

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

.action-principle {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 13px;

    margin-top: 45px;

    font-family: var(--font-display);
    font-size:
        clamp(
            0.84rem,
            1.2vw,
            1rem
        );

    letter-spacing: 0.025em;

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

.action-principle span:not(:last-child)::after {
    content: "→";

    margin-left: 13px;

    color:
        rgba(120, 170, 255, 0.52);
}

.action-principle strong {
    font-weight: 650;

    color: #78aaff;
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 1050px) {
    .action-heading {
        grid-template-columns: 1fr;

        gap: 22px;
    }

    .action-heading-copy {
        max-width: 700px;
    }

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

    .demo-product-side {
        border-right: 0;

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

    .demo-gui-wrap {
        min-height: 430px;
    }

    .demo-panel {
        min-height: 610px;
    }
}

@media (max-width: 820px) {
    .demo-tabs {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .demo-tab small {
        white-space: normal;
    }
}

@media (max-width: 600px) {
    .action-section {
        padding:
            82px
            0
            78px;
    }

    .action-heading {
        margin-bottom: 42px;
    }

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

    .demo-tab {
        min-height: 66px;
    }

    .demo-stage {
        border-radius: 18px;
    }

    .demo-product-side {
        padding: 14px;
    }

    .demo-gui-wrap {
        min-height: auto;

        padding: 7px;
    }

    .demo-gui-badge {
        left: 15px;
        bottom: 15px;
    }

    .demo-panel {
        min-height: 650px;

        padding: 22px 18px;
    }

    .demo-panel-top {
        flex-direction: column;
    }

    .action-principle {
        flex-direction: column;

        gap: 5px;
    }

    .action-principle span:not(:last-child)::after {
        content: "";

        margin: 0;
    }
}

/* =========================================================
   LOYKI V3 – INTERACTIVE V1 GUI OVERLAY
   Basis: unveränderte echte LoyKI V1 GUI
   ========================================================= */

.demo-gui-canvas {
    position: relative;

    width: 100%;

    overflow: hidden;

    border-radius: 10px;

    background: #ffffff;

    box-shadow:
        0 28px 65px rgba(0, 0, 0, 0.30);
}

.demo-gui-canvas .demo-gui-image {
    display: block;

    width: 100%;
    height: auto;

    border-radius: 0;

    box-shadow: none;
}

/* ---------------------------------------------------------
   Beweglicher Spotlight-Fokus
   --------------------------------------------------------- */

.demo-gui-focus {
    --focus-x: 0%;
    --focus-y: 0%;
    --focus-w: 0%;
    --focus-h: 0%;

    position: absolute;

    left: var(--focus-x);
    top: var(--focus-y);

    width: var(--focus-w);
    height: var(--focus-h);

    z-index: 4;

    opacity: 0;

    pointer-events: none;

    border:
        2px solid rgba(72, 151, 255, 0.96);

    border-radius: 10px;

    background:
        rgba(22, 107, 255, 0.06);

    box-shadow:
        0 0 0 9999px rgba(3, 12, 26, 0.24),
        0 0 0 4px rgba(22, 107, 255, 0.10),
        0 0 26px rgba(22, 107, 255, 0.48),
        inset 0 0 20px rgba(22, 107, 255, 0.08);

    transition:
        left 520ms cubic-bezier(0.22, 1, 0.36, 1),
        top 520ms cubic-bezier(0.22, 1, 0.36, 1),
        width 520ms cubic-bezier(0.22, 1, 0.36, 1),
        height 520ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 240ms ease,
        border-radius 320ms ease;
}

.demo-gui-focus.is-visible {
    opacity: 1;
}

.demo-gui-focus.is-pulsing {
    animation:
        loykiGuiFocusPulse 1.4s ease-in-out infinite;
}

@keyframes loykiGuiFocusPulse {
    0%,
    100% {
        border-color:
            rgba(72, 151, 255, 0.78);

        box-shadow:
            0 0 0 9999px rgba(3, 12, 26, 0.24),
            0 0 0 4px rgba(22, 107, 255, 0.08),
            0 0 20px rgba(22, 107, 255, 0.30),
            inset 0 0 18px rgba(22, 107, 255, 0.06);
    }

    50% {
        border-color:
            rgba(73, 179, 255, 1);

        box-shadow:
            0 0 0 9999px rgba(3, 12, 26, 0.27),
            0 0 0 5px rgba(22, 107, 255, 0.13),
            0 0 34px rgba(22, 107, 255, 0.58),
            inset 0 0 24px rgba(22, 107, 255, 0.10);
    }
}

/* ---------------------------------------------------------
   Aktivitätsanzeige in der echten GUI
   --------------------------------------------------------- */

.demo-gui-activity {
    position: absolute;

    top: 2.2%;
    right: 1.7%;

    z-index: 6;

    min-width: 150px;

    display: flex;
    align-items: center;

    gap: 9px;

    padding: 8px 11px;

    opacity: 0;

    transform:
        translateY(-6px);

    pointer-events: none;

    border:
        1px solid rgba(255, 255, 255, 0.18);

    border-radius: 10px;

    background:
        rgba(5, 18, 38, 0.91);

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.22);

    backdrop-filter:
        blur(12px);

    transition:
        opacity 220ms ease,
        transform 300ms ease;
}

.demo-gui-activity.is-visible {
    opacity: 1;

    transform:
        translateY(0);
}

.demo-gui-activity-dot {
    width: 8px;
    height: 8px;

    flex: 0 0 8px;

    border-radius: 50%;

    background: #35dd84;

    box-shadow:
        0 0 12px rgba(53, 221, 132, 0.78);
}

.demo-gui-activity small {
    display: block;

    margin-bottom: 1px;

    font-size: 0.42rem;
    font-weight: 750;

    letter-spacing: 0.14em;

    color:
        rgba(123, 178, 255, 0.82);
}

.demo-gui-activity strong {
    display: block;

    max-width: 180px;

    overflow: hidden;

    font-size: 0.57rem;
    font-weight: 650;

    white-space: nowrap;
    text-overflow: ellipsis;

    color: #ffffff;
}

/* ---------------------------------------------------------
   Während der Demo leichte Produktaktivität
   --------------------------------------------------------- */

.demo-shell.is-gui-running .demo-gui-canvas {
    box-shadow:
        0 30px 75px rgba(0, 0, 0, 0.34),
        0 0 42px rgba(22, 107, 255, 0.12);
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 600px) {
    .demo-gui-activity {
        min-width: 118px;

        padding: 6px 8px;
    }

    .demo-gui-activity small {
        font-size: 0.35rem;
    }

    .demo-gui-activity strong {
        max-width: 125px;

        font-size: 0.48rem;
    }

    .demo-gui-focus {
        border-width: 1.5px;

        border-radius: 7px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .demo-gui-focus {
        transition: none;
        animation: none !important;
    }

    .demo-gui-activity {
        transition: none;
    }
}

/* =========================================================
   LOYKI V3 – SECURITY SECTION V1
   ========================================================= */

.security-section {
    position: relative;

    padding:
        clamp(105px, 10vw, 155px)
        0
        clamp(105px, 10vw, 150px);

    overflow: hidden;

    background:
        radial-gradient(
            circle at 90% 18%,
            rgba(22, 107, 255, 0.08),
            transparent 27%
        ),
        radial-gradient(
            circle at 8% 82%,
            rgba(109, 74, 255, 0.055),
            transparent 24%
        ),
        #f7f9fc;

    color: #0a0f1c;
}

.security-section::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: min(1200px, 86%);
    height: 1px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(22, 107, 255, 0.20),
            transparent
        );
}

.security-section .container {
    position: relative;

    z-index: 1;
}

/* ---------------------------------------------------------
   Heading
   --------------------------------------------------------- */

.security-heading {
    display: grid;

    grid-template-columns:
        minmax(0, 1.12fr)
        minmax(330px, 0.88fr);

    align-items: end;

    gap: clamp(45px, 7vw, 100px);

    margin-bottom:
        clamp(60px, 7vw, 92px);
}

.security-heading .eyebrow {
    margin-bottom: 18px;

    color: #166bff;
}

.security-heading h2 {
    max-width: 760px;

    margin: 0;

    font-family: var(--font-display);

    font-size:
        clamp(
            3rem,
            5.3vw,
            5.15rem
        );

    line-height: 0.98;

    letter-spacing: -0.055em;

    color: #0a0f1c;
}

.security-heading h2 span {
    display: block;

    color: #166bff;
}

.security-intro {
    max-width: 540px;

    padding-bottom: 4px;
}

.security-intro p {
    margin: 0 0 19px;

    font-size:
        clamp(
            0.98rem,
            1.15vw,
            1.08rem
        );

    line-height: 1.75;

    color: #667085;
}

.security-intro strong {
    display: block;

    font-family: var(--font-display);
    font-size: 0.93rem;
    line-height: 1.5;

    color: #172033;
}

/* ---------------------------------------------------------
   Architecture
   --------------------------------------------------------- */

.security-architecture {
    display: grid;

    gap: 18px;
}

.security-control-center {
    position: relative;

    padding:
        clamp(28px, 4vw, 48px);

    overflow: hidden;

    border:
        1px solid rgba(17, 37, 67, 0.10);

    border-radius: 25px;

    background:
        linear-gradient(
            145deg,
            #081426 0%,
            #0a1a31 55%,
            #0a2040 100%
        );

    box-shadow:
        0 32px 85px rgba(15, 31, 54, 0.13);
}

.security-control-center::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    top: -280px;
    right: -140px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(22, 107, 255, 0.20),
            transparent 67%
        );

    pointer-events: none;
}

.security-core-top {
    position: relative;

    z-index: 1;

    display: flex;
    align-items: center;

    gap: 18px;

    margin-bottom: 42px;
}

.security-core-emblem {
    width: 62px;
    height: 62px;

    flex: 0 0 62px;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(93, 163, 255, 0.19);

    border-radius: 16px;

    background:
        rgba(22, 107, 255, 0.08);
}

.security-core-emblem img {
    width: 38px;
    height: 38px;
}

.security-core-top span {
    display: block;

    margin-bottom: 6px;

    font-size: 0.61rem;
    font-weight: 750;

    letter-spacing: 0.17em;

    color: #70a9ff;
}

.security-core-top h3 {
    max-width: 650px;

    margin: 0;

    font-family: var(--font-display);

    font-size:
        clamp(
            1.5rem,
            2.5vw,
            2.35rem
        );

    line-height: 1.15;

    letter-spacing: -0.035em;

    color: #ffffff;
}

/* ---------------------------------------------------------
   Flow
   --------------------------------------------------------- */

.security-flow {
    position: relative;

    z-index: 1;

    display: grid;

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

    align-items: center;

    gap: 12px;

    margin-bottom: 30px;
}

.security-flow-node {
    min-height: 105px;

    display: flex;
    align-items: center;

    gap: 13px;

    padding: 18px;

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

    border-radius: 15px;

    background:
        rgba(255, 255, 255, 0.035);
}

.security-flow-node > span {
    flex: 0 0 auto;

    font-family: var(--font-display);
    font-size: 0.63rem;
    font-weight: 700;

    color: #70a9ff;
}

.security-flow-node strong {
    display: block;

    margin-bottom: 5px;

    font-size: 0.76rem;

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

.security-flow-node small {
    display: block;

    font-size: 0.57rem;

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

.security-flow-gate {
    border-color:
        rgba(91, 151, 255, 0.30);

    background:
        linear-gradient(
            135deg,
            rgba(22, 107, 255, 0.14),
            rgba(109, 74, 255, 0.08)
        );

    box-shadow:
        inset 0 0 25px rgba(22, 107, 255, 0.05);
}

.security-flow-arrow {
    color:
        rgba(112, 169, 255, 0.50);

    font-size: 1rem;
}

/* ---------------------------------------------------------
   Human Approval Gate
   --------------------------------------------------------- */

.security-gate {
    position: relative;

    z-index: 1;

    display: grid;

    grid-template-columns:
        52px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 17px;

    padding: 18px 20px;

    border:
        1px solid rgba(112, 169, 255, 0.18);

    border-radius: 16px;

    background:
        rgba(22, 107, 255, 0.055);
}

.security-gate-icon {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    background:
        rgba(22, 107, 255, 0.10);

    color: #78aaff;
}

.security-gate-icon svg {
    width: 24px;
    height: 24px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.6;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.security-gate span {
    display: block;

    margin-bottom: 3px;

    font-size: 0.54rem;
    font-weight: 750;

    letter-spacing: 0.14em;

    color: #78aaff;
}

.security-gate strong {
    display: block;

    margin-bottom: 4px;

    font-size: 0.78rem;

    color: #ffffff;
}

.security-gate p {
    max-width: 720px;

    margin: 0;

    font-size: 0.61rem;
    line-height: 1.5;

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

.security-gate-status {
    display: flex;
    align-items: center;

    gap: 7px;

    padding: 7px 10px;

    border:
        1px solid rgba(63, 217, 137, 0.18);

    border-radius: 999px;

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

    letter-spacing: 0.07em;

    color: #86e7b4;

    background:
        rgba(63, 217, 137, 0.06);
}

.security-gate-status > span {
    width: 7px;
    height: 7px;

    margin: 0;

    border-radius: 50%;

    background: #3fd989;

    box-shadow:
        0 0 11px rgba(63, 217, 137, 0.55);
}

/* ---------------------------------------------------------
   Four pillars
   --------------------------------------------------------- */

.security-pillars {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 12px;
}

.security-card {
    position: relative;

    min-height: 315px;

    display: flex;
    flex-direction: column;

    padding: 25px;

    overflow: hidden;

    border:
        1px solid rgba(17, 37, 67, 0.09);

    border-radius: 18px;

    background:
        rgba(255, 255, 255, 0.84);

    box-shadow:
        0 16px 42px rgba(25, 44, 71, 0.055);
}

.security-card-icon {
    width: 43px;
    height: 43px;

    display: grid;
    place-items: center;

    margin-bottom: 30px;

    border-radius: 11px;

    color: #166bff;

    background:
        rgba(22, 107, 255, 0.07);
}

.security-card-icon svg {
    width: 21px;
    height: 21px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.5;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.security-card-number {
    position: absolute;

    top: 27px;
    right: 25px;

    font-family: var(--font-display);
    font-size: 0.61rem;
    font-weight: 700;

    color: #a5b0c1;
}

.security-card h3 {
    margin: 0 0 13px;

    font-family: var(--font-display);

    font-size:
        clamp(
            1.05rem,
            1.5vw,
            1.28rem
        );

    line-height: 1.2;

    letter-spacing: -0.025em;

    color: #101828;
}

.security-card p {
    margin: 0 0 25px;

    font-size: 0.88rem;
    line-height: 1.68;

    color: #697586;
}

.security-card-tag {
    margin-top: auto;

    padding-top: 14px;

    border-top:
        1px solid rgba(17, 37, 67, 0.07);

    font-size: 0.52rem;
    font-weight: 750;

    letter-spacing: 0.13em;

    color: #166bff;
}

/* ---------------------------------------------------------
   Bottom principle
   --------------------------------------------------------- */

.security-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 35px;

    margin-top: 48px;

    padding:
        27px
        clamp(24px, 4vw, 42px);

    border:
        1px solid rgba(22, 107, 255, 0.10);

    border-radius: 18px;

    background:
        linear-gradient(
            120deg,
            rgba(22, 107, 255, 0.045),
            rgba(109, 74, 255, 0.025)
        );
}

.security-bottom > div:first-child > span {
    display: block;

    margin-bottom: 6px;

    font-size: 0.55rem;
    font-weight: 750;

    letter-spacing: 0.15em;

    color: #166bff;
}

.security-bottom > div:first-child strong {
    font-family: var(--font-display);

    font-size:
        clamp(
            0.95rem,
            1.5vw,
            1.15rem
        );

    color: #172033;
}

.security-bottom-flow {
    flex: 0 0 auto;

    display: flex;
    align-items: center;

    gap: 11px;

    font-size: 0.67rem;

    color: #778397;
}

.security-bottom-flow span::after {
    content: "→";

    margin-left: 11px;

    color: #9cb7e3;
}

.security-bottom-flow strong {
    color: #166bff;
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 1050px) {
    .security-heading {
        grid-template-columns: 1fr;

        gap: 24px;
    }

    .security-intro {
        max-width: 720px;
    }

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

        gap: 10px;
    }

    .security-flow-arrow {
        display: none;
    }

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

@media (max-width: 720px) {
    .security-control-center {
        border-radius: 20px;
    }

    .security-flow {
        grid-template-columns: 1fr;
    }

    .security-flow-node {
        min-height: 84px;
    }

    .security-gate {
        grid-template-columns:
            46px
            minmax(0, 1fr);
    }

    .security-gate-status {
        grid-column: 2;
        justify-self: start;
    }

    .security-pillars {
        grid-template-columns: 1fr;
    }

    .security-card {
        min-height: 270px;
    }

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

    .security-bottom-flow {
        flex-wrap: wrap;
    }
}

@media (max-width: 520px) {
    .security-section {
        padding:
            82px
            0
            80px;
    }

    .security-core-top {
        align-items: flex-start;

        margin-bottom: 30px;
    }

    .security-core-emblem {
        width: 52px;
        height: 52px;

        flex-basis: 52px;
    }

    .security-core-emblem img {
        width: 31px;
        height: 31px;
    }

    .security-gate {
        grid-template-columns: 1fr;
    }

    .security-gate-status {
        grid-column: 1;
    }

    .security-bottom-flow {
        flex-direction: column;
        align-items: flex-start;

        gap: 4px;
    }

    .security-bottom-flow span::after {
        content: "";

        margin: 0;
    }
}


/* =========================================================
   LOYKI V3 – ABOUT CONTACT V1
   ========================================================= */

.about-section {
    padding:
        clamp(95px, 9vw, 140px)
        0;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7faff 100%
        );

    color: #07111f;
}

.about-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(360px, 0.82fr);

    gap:
        clamp(60px, 8vw, 110px);

    align-items: center;
}

.about-copy {
    max-width: 720px;
}

.about-copy .eyebrow {
    margin-bottom: 18px;

    color: #166bff;
}

.about-copy h2 {
    margin: 0;

    font-family: var(--font-display);

    font-size:
        clamp(
            2.7rem,
            4.7vw,
            4.6rem
        );

    line-height: 1.05;

    letter-spacing: -0.045em;

    color: #07111f;
}

.about-copy h2 span {
    display: block;

    color: #166bff;
}

.about-copy p {
    max-width: 650px;

    margin:
        24px
        0
        0;

    font-size:
        clamp(
            1rem,
            1.2vw,
            1.08rem
        );

    line-height: 1.75;

    color: #60708a;
}

.about-brand-panel {
    min-height: 450px;

    display: flex;
    flex-direction: column;

    padding: 38px;

    overflow: hidden;

    border-radius: 26px;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 100% 100%,
            rgba(22, 107, 255, 0.42),
            transparent 39%
        ),
        radial-gradient(
            circle at 84% 83%,
            rgba(0, 212, 255, 0.12),
            transparent 24%
        ),
        linear-gradient(
            155deg,
            #061426 0%,
            #071c35 55%,
            #082c50 100%
        );

    box-shadow:
        0 30px 75px rgba(5, 24, 47, 0.18);
}

.about-brand-logo {
    width: 190px;
    max-width: 78%;

    filter:
        brightness(0)
        invert(1);
}

.about-brand-category {
    margin-top: 12px;

    font-size: 0.62rem;

    letter-spacing: 0.15em;

    text-transform: uppercase;

    color:
        rgba(181, 205, 230, 0.72);
}

.about-brand-message {
    margin-top: auto;
    padding-top: 70px;

    font-family: var(--font-display);

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

    font-weight: 700;

    line-height: 1.1;

    letter-spacing: -0.045em;
}

.about-brand-message span {
    color: #5ba7ff;
}

.about-brand-footer {
    margin-top: 50px;

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

    letter-spacing: 0.18em;
    line-height: 1.6;

    color:
        rgba(181, 205, 230, 0.55);
}

/* ---------------------------------------------------------
   CONTACT
   --------------------------------------------------------- */

.contact-section {
    padding:
        clamp(90px, 9vw, 130px)
        0;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(0, 212, 255, 0.08),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #f4f8fc 0%,
            #edf4fb 100%
        );
}

.contact-shell {
    padding: 0;

    border: 0;

    background: transparent;

    box-shadow: none;
}

.contact-premium-grid {
    display: grid;

    grid-template-columns:
        minmax(310px, 1.05fr)
        minmax(390px, 1.15fr)
        minmax(270px, 0.8fr);

    gap: 28px;

    align-items: stretch;
}

.contact-premium-left {
    display: flex;
    flex-direction: column;
}

.contact-premium-left .eyebrow {
    margin-bottom: 16px;

    color: #166bff;
}

.contact-premium-left h2 {
    max-width: 540px;

    margin: 0;

    font-family: var(--font-display);

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

    line-height: 1.06;

    letter-spacing: -0.05em;

    color: #07111f;
}

.contact-premium-left > p {
    max-width: 500px;

    margin: 18px 0 0;

    font-size: 0.94rem;
    line-height: 1.65;

    color: #60708a;
}

.contact-options {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 10px;

    margin-top: auto;
    padding-top: 30px;
}

.contact-card {
    min-height: 145px;

    display: flex;
    flex-direction: column;

    padding: 17px;

    border:
        1px solid #dce6f0;

    border-radius: 14px;

    background:
        rgba(255, 255, 255, 0.96);

    box-shadow:
        0 10px 28px rgba(22, 48, 76, 0.04);

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

.contact-card:hover {
    transform: translateY(-3px);

    border-color:
        rgba(22, 107, 255, 0.40);

    box-shadow:
        0 18px 44px rgba(22, 107, 255, 0.10);
}

.contact-card > span {
    color: #166bff;

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

.contact-card strong {
    margin-top: 18px;

    font-size: 0.88rem;
    line-height: 1.25;

    color: #07111f;
}

.contact-card small {
    margin-top: 7px;

    font-size: 0.64rem;
    line-height: 1.45;

    color: #748399;
}

.contact-form-card {
    padding: 24px;

    border:
        1px solid #d9e5f0;

    border-radius: 18px;

    background:
        rgba(255, 255, 255, 0.97);

    box-shadow:
        0 18px 50px rgba(25, 55, 86, 0.07);
}

.contact-form-card h3 {
    margin: 0 0 18px;

    font-family: var(--font-display);

    font-size: 1.12rem;

    color: #07111f;
}

.contact-form {
    display: grid;

    gap: 11px;
}

.contact-form-row {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 10px;
}

.contact-field {
    display: grid;

    gap: 5px;
}

.contact-field label {
    color: #52657b;

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

.contact-field input,
.contact-field select,
.contact-field textarea {
    width: 100%;
    min-height: 39px;

    padding: 9px 11px;

    border:
        1px solid #d8e3ed;

    border-radius: 8px;

    outline: none;

    background: #fbfdff;

    color: #07111f;

    font: inherit;
    font-size: 0.76rem;
}

.contact-field textarea {
    min-height: 82px;

    resize: vertical;
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
    border-color:
        rgba(22, 107, 255, 0.55);

    box-shadow:
        0 0 0 3px rgba(22, 107, 255, 0.08);
}

.contact-consent {
    display: flex;
    align-items: flex-start;

    gap: 8px;

    font-size: 0.58rem;
    line-height: 1.45;

    color: #65778b;
}

.contact-consent input {
    margin-top: 2px;
}

.contact-submit {
    min-height: 42px;

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

    padding: 0 20px;

    border: 0;
    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            #166bff,
            #5a53f5
        );

    color: #ffffff;

    font: inherit;
    font-size: 0.76rem;
    font-weight: 800;

    cursor: pointer;
}

.contact-brand-card {
    position: relative;

    min-height: 100%;

    display: flex;
    flex-direction: column;

    padding: 30px 27px;

    overflow: hidden;

    border-radius: 18px;

    background:
        radial-gradient(
            circle at 100% 100%,
            rgba(0, 153, 255, 0.38),
            transparent 37%
        ),
        radial-gradient(
            circle at 82% 86%,
            rgba(0, 212, 255, 0.16),
            transparent 24%
        ),
        linear-gradient(
            155deg,
            #061426 0%,
            #071c35 55%,
            #082c50 100%
        );

    box-shadow:
        0 22px 60px rgba(5, 24, 47, 0.20);
}

.contact-brand-logo {
    width: 165px;
    max-width: 80%;
}

.contact-brand-kicker {
    margin-top: 10px;

    font-size: 0.56rem;

    letter-spacing: 0.14em;

    text-transform: uppercase;

    color: #8ca9c8;
}

.contact-brand-statement {
    margin-top: auto;
    padding-top: 50px;

    font-family: var(--font-display);

    font-size:
        clamp(
            1.4rem,
            2vw,
            1.95rem
        );

    font-weight: 700;

    line-height: 1.12;

    letter-spacing: -0.04em;

    color: #ffffff;
}

.contact-brand-statement .accent {
    color: #39a9ff;
}

.contact-brand-claim {
    margin-top: 42px;

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

    letter-spacing: 0.20em;

    color: #8ba5c1;
}

/* ---------------------------------------------------------
   ABOUT / CONTACT RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 1180px) {
    .about-grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .about-brand-panel {
        min-height: 360px;
    }

    .contact-premium-grid {
        grid-template-columns:
            1fr
            1fr;
    }

    .contact-brand-card {
        grid-column:
            1 / -1;

        min-height: 300px;
    }
}

@media (max-width: 760px) {
    .about-section,
    .contact-section {
        padding:
            75px
            0;
    }

    .about-brand-panel {
        min-height: 330px;

        padding: 28px;
    }

    .contact-premium-grid,
    .contact-options,
    .contact-form-row {
        grid-template-columns: 1fr;
    }

    .contact-brand-card {
        grid-column: auto;
    }
}

/* =========================================================
   LOYKI V3 – SECURITY COMPACT POLISH V1
   Ziel:
   - weniger vertikaler Leerraum
   - bestehendes Security-Design erhalten
   - keine Inhaltsänderung
   ========================================================= */

.security-section {
    padding:
        clamp(82px, 7.2vw, 112px)
        0
        clamp(82px, 7vw, 108px);
}

.security-heading {
    gap:
        clamp(38px, 5vw, 72px);

    margin-bottom:
        clamp(44px, 5vw, 64px);
}

.security-heading .eyebrow {
    margin-bottom: 14px;
}

.security-intro p {
    margin-bottom: 15px;
}

.security-control-center {
    padding:
        clamp(27px, 3.4vw, 40px);
}

.security-core-top {
    margin-bottom: 30px;
}

.security-flow {
    margin-bottom: 22px;
}

.security-flow-node {
    min-height: 94px;

    padding: 16px;
}

.security-gate {
    padding: 16px 18px;
}

.security-pillars {
    gap: 11px;
}

.security-card {
    min-height: 286px;

    padding: 22px;
}

.security-card-icon {
    margin-bottom: 23px;
}

.security-card-number {
    top: 24px;
    right: 22px;
}

.security-card p {
    margin-bottom: 20px;

    line-height: 1.62;
}

.security-bottom {
    margin-top: 34px;

    padding:
        22px
        clamp(22px, 3vw, 34px);
}

/* ---------------------------------------------------------
   Desktop: Übergang Action -> Security kompakter
   --------------------------------------------------------- */

.action-section {
    padding-bottom:
        clamp(82px, 7vw, 108px);
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 1050px) {
    .security-section {
        padding:
            82px
            0
            86px;
    }

    .security-heading {
        margin-bottom: 48px;
    }

    .security-card {
        min-height: 260px;
    }
}

@media (max-width: 600px) {
    .security-section {
        padding:
            68px
            0
            70px;
    }

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

    .security-control-center {
        padding: 22px 18px;
    }

    .security-card {
        min-height: auto;

        padding: 21px;
    }

    .security-bottom {
        margin-top: 26px;
    }

    .action-section {
        padding-bottom: 70px;
    }
}

/* =========================================================
   LOYKI V3 – ABOUT COMPACT POLISH V1
   Ziel:
   - weniger vertikaler Leerraum
   - bestehende About-Struktur erhalten
   - Markenpanel kompakter und hochwertiger
   ========================================================= */

.about-section {
    padding:
        clamp(78px, 7vw, 104px)
        0;
}

.about-grid {
    gap:
        clamp(48px, 6vw, 78px);
}

.about-copy .eyebrow {
    margin-bottom: 14px;
}

.about-copy p {
    margin-top: 20px;

    line-height: 1.68;
}

.about-brand-panel {
    min-height: 390px;

    padding: 32px;
}

.about-brand-message {
    padding-top: 52px;
}

.about-brand-footer {
    margin-top: 36px;
}

/* ---------------------------------------------------------
   Übergang Security -> About kompakter
   --------------------------------------------------------- */

.security-section {
    padding-bottom:
        clamp(76px, 6.5vw, 96px);
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 1050px) {
    .about-section {
        padding:
            78px
            0;
    }

    .about-grid {
        gap: 42px;
    }

    .about-brand-panel {
        min-height: 340px;
    }

    .about-brand-message {
        padding-top: 42px;
    }
}

@media (max-width: 600px) {
    .about-section {
        padding:
            66px
            0;
    }

    .about-grid {
        gap: 34px;
    }

    .about-brand-panel {
        min-height: 310px;

        padding: 25px;
    }

    .about-brand-message {
        padding-top: 34px;
    }

    .about-brand-footer {
        margin-top: 28px;
    }
}

/* =========================================================
   LOYKI V3 – CONTACT COMPACT POLISH V1
   Ziel:
   - Kontaktbereich kompakter
   - Premium-Dreispaltenlayout erhalten
   - Formular und Brand Card visuell ausbalancieren
   - keine Funktions- oder Inhaltsänderung
   ========================================================= */

.contact-section {
    padding:
        clamp(76px, 6.8vw, 102px)
        0
        clamp(82px, 7vw, 108px);
}

.contact-premium-grid {
    gap: 22px;
}

.contact-premium-left .eyebrow {
    margin-bottom: 13px;
}

.contact-premium-left > p {
    margin-top: 15px;
}

.contact-options {
    padding-top: 24px;

    gap: 9px;
}

.contact-card {
    min-height: 132px;

    padding: 16px;
}

.contact-card strong {
    margin-top: 15px;
}

.contact-form-card {
    padding: 22px;
}

.contact-form-card h3 {
    margin-bottom: 15px;
}

.contact-form {
    gap: 10px;
}

.contact-field textarea {
    min-height: 76px;
}

.contact-brand-card {
    padding:
        27px
        25px;
}

.contact-brand-statement {
    padding-top: 40px;
}

.contact-brand-claim {
    margin-top: 34px;
}

/* ---------------------------------------------------------
   Übergang About -> Kontakt kompakter
   --------------------------------------------------------- */

.about-section {
    padding-bottom:
        clamp(72px, 6vw, 92px);
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 1050px) {
    .contact-section {
        padding:
            74px
            0
            82px;
    }

    .contact-premium-grid {
        gap: 20px;
    }

    .contact-brand-card {
        min-height: 270px;
    }
}

@media (max-width: 600px) {
    .contact-section {
        padding:
            62px
            0
            68px;
    }

    .contact-premium-grid {
        gap: 18px;
    }

    .contact-options {
        padding-top: 20px;
    }

    .contact-card {
        min-height: auto;
    }

    .contact-form-card {
        padding: 20px;
    }

    .contact-brand-card {
        min-height: 270px;

        padding: 24px;
    }

    .contact-brand-statement {
        padding-top: 32px;
    }

    .contact-brand-claim {
        margin-top: 28px;
    }
}

/* =========================================================
   LOYKI V3 – CONSENT MANAGER V1
   ========================================================= */

.consent-layer[hidden],
.consent-modal[hidden],
.consent-banner[hidden] {
    display: none !important;
}

.consent-layer {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: clamp(16px, 2.5vw, 30px);
    background: rgba(3, 10, 21, 0.34);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.consent-layer.is-settings-open {
    align-items: center;
    background: rgba(3, 10, 21, 0.58);
}

.consent-banner {
    width: min(1180px, 100%);
    border: 1px solid rgba(22, 107, 255, 0.18);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.985);
    box-shadow: 0 24px 80px rgba(4, 18, 38, 0.24);
    overflow: hidden;
}

.consent-banner-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px clamp(20px, 3vw, 30px);
    border-bottom: 1px solid #e5edf6;
    background: linear-gradient(90deg, rgba(22, 107, 255, 0.05), rgba(109, 74, 255, 0.025));
    color: #405470;
    font-size: 0.60rem;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.consent-banner-brand img {
    width: 22px;
    height: 22px;
}

.consent-banner-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(26px, 4vw, 60px);
    align-items: end;
    padding: clamp(22px, 3vw, 32px) clamp(20px, 3vw, 30px);
}

.consent-eyebrow {
    margin: 0 0 9px;
    color: #166bff;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.consent-banner h2,
.consent-modal h2 {
    margin: 0;
    font-family: var(--font-display);
    color: #07111f;
    letter-spacing: -0.04em;
}

.consent-banner h2 {
    font-size: clamp(1.35rem, 2.2vw, 2rem);
    line-height: 1.1;
}

.consent-banner-content p:not(.consent-eyebrow) {
    max-width: 720px;
    margin: 11px 0 0;
    color: #5d6f86;
    font-size: 0.82rem;
    line-height: 1.65;
}

.consent-banner-actions,
.consent-modal-footer-right {
    display: flex;
    align-items: center;
    gap: 9px;
}

.consent-button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border-radius: 10px;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

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

.consent-button-primary {
    border: 1px solid transparent;
    background: linear-gradient(135deg, #166bff, #5a53f5);
    color: #ffffff;
    box-shadow: 0 9px 24px rgba(22, 107, 255, 0.19);
}

.consent-button-secondary {
    border: 1px solid #d6e0eb;
    background: #ffffff;
    color: #20334d;
}

.consent-button-settings {
    border: 1px solid #dce6f0;
    background: #f6f9fc;
    color: #354a65;
}

.consent-modal {
    width: min(760px, 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    border: 1px solid rgba(22, 107, 255, 0.16);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 30px 100px rgba(2, 14, 30, 0.35);
}

.consent-modal-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    padding: clamp(24px, 4vw, 34px);
    border-bottom: 1px solid #e5edf5;
}

.consent-modal h2 {
    font-size: clamp(1.55rem, 2.8vw, 2.35rem);
    line-height: 1.08;
}

.consent-modal-head p:not(.consent-eyebrow) {
    max-width: 620px;
    margin: 12px 0 0;
    color: #607187;
    font-size: 0.80rem;
    line-height: 1.65;
}

.consent-close {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid #dce5ee;
    border-radius: 10px;
    background: #f8fafc;
    color: #31455e;
    font: inherit;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.consent-categories {
    display: grid;
    gap: 12px;
    padding: 20px clamp(24px, 4vw, 34px);
}

.consent-category {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    padding: 20px;
    border: 1px solid #dde6ef;
    border-radius: 14px;
    background: #fbfdff;
}

.consent-category-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.consent-category-title strong {
    color: #0a1728;
    font-size: 0.90rem;
}

.consent-category-title span {
    padding: 4px 7px;
    border-radius: 999px;
    background: rgba(22, 107, 255, 0.08);
    color: #166bff;
    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.consent-category-copy p {
    max-width: 570px;
    margin: 8px 0 0;
    color: #65758a;
    font-size: 0.72rem;
    line-height: 1.58;
}

.consent-toggle,
.consent-switch-ui {
    width: 46px;
    height: 26px;
    display: block;
    position: relative;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #c8d3df;
}

.consent-toggle span,
.consent-switch-ui::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 5px rgba(8, 25, 44, 0.20);
    transition: transform 160ms ease;
}

.consent-toggle.is-required {
    background: #166bff;
}

.consent-toggle.is-required span {
    transform: translateX(20px);
}

.consent-switch {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}

.consent-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.consent-switch input:focus-visible + .consent-switch-ui {
    outline: 3px solid rgba(22, 107, 255, 0.22);
    outline-offset: 3px;
}

.consent-switch input:checked + .consent-switch-ui {
    background: #166bff;
}

.consent-switch input:checked + .consent-switch-ui::after {
    transform: translateX(20px);
}

.consent-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px clamp(24px, 4vw, 34px) 24px;
    border-top: 1px solid #e5edf5;
}

.footer-link-button {
    appearance: none;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.footer-link-button:hover {
    color: #ffffff;
}

body.consent-lock {
    overflow: hidden;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 860px) {
    .consent-banner-content {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .consent-banner-actions {
        flex-wrap: wrap;
    }

    .consent-banner-actions .consent-button {
        flex: 1 1 160px;
    }
}

@media (max-width: 600px) {
    .consent-layer {
        padding: 10px;
    }

    .consent-banner {
        border-radius: 17px;
    }

    .consent-banner-content {
        gap: 20px;
        padding: 19px 17px;
    }

    .consent-banner-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .consent-button {
        width: 100%;
    }

    .consent-modal {
        max-height: calc(100vh - 20px);
        border-radius: 17px;
    }

    .consent-modal-head {
        gap: 16px;
        padding: 22px 18px;
    }

    .consent-categories {
        padding: 16px 18px;
    }

    .consent-category {
        gap: 18px;
        padding: 17px;
    }

    .consent-modal-footer {
        display: grid;
        grid-template-columns: 1fr;
        padding: 16px 18px 20px;
    }

    .consent-modal-footer-right {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }
}

/* =========================================================
   LOYKI V3 – LEGAL PAGES V1
   ========================================================= */

.legal-page {
    min-height: 100vh;
    background: #ffffff;
    color: #0A0F1C;
}

.legal-header {
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid rgba(10, 15, 28, 0.08);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px);
}

.legal-header-inner,
.legal-footer-inner,
.legal-shell {
    width: min(1120px, calc(100% - 40px));
    margin: 0 auto;
}

.legal-header-inner {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.legal-logo img {
    display: block;
    width: auto;
    height: 34px;
}

.legal-back {
    font-family: Inter, Arial, sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #0A0F1C;
    text-decoration: none;
}

.legal-back:hover,
.legal-back:focus-visible {
    color: #166BFF;
}

.legal-main {
    padding: 72px 0 88px;
}

.legal-shell {
    max-width: 900px;
}

.legal-eyebrow {
    margin: 0 0 12px;
    font-family: Sora, Inter, Arial, sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #166BFF;
}

.legal-title {
    margin: 0;
    font-family: Sora, Inter, Arial, sans-serif;
    font-size: clamp(2.2rem, 5vw, 4rem);
    line-height: 1.04;
    letter-spacing: -0.04em;
    color: #0A0F1C;
}

.legal-intro {
    margin: 22px 0 0;
    max-width: 760px;
    font-family: Inter, Arial, sans-serif;
    font-size: 1.06rem;
    line-height: 1.75;
    color: #43516A;
}

.legal-content {
    margin-top: 52px;
    font-family: Inter, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.75;
    color: #34445D;
}

.legal-content section + section {
    margin-top: 42px;
}

.legal-content h2 {
    margin: 0 0 14px;
    font-family: Sora, Inter, Arial, sans-serif;
    font-size: 1.35rem;
    line-height: 1.3;
    color: #0A0F1C;
}

.legal-content h3 {
    margin: 26px 0 10px;
    font-family: Sora, Inter, Arial, sans-serif;
    font-size: 1.05rem;
    color: #0A0F1C;
}

.legal-content p {
    margin: 0 0 14px;
}

.legal-content ul {
    margin: 10px 0 16px 1.25rem;
    padding: 0;
}

.legal-content li + li {
    margin-top: 6px;
}

.legal-content a {
    color: #166BFF;
    text-underline-offset: 3px;
}

.legal-card {
    margin: 24px 0;
    padding: 24px;
    border: 1px solid rgba(10, 15, 28, 0.08);
    border-radius: 18px;
    background: #F7F9FC;
}

.legal-note {
    margin-top: 52px;
    padding-top: 24px;
    border-top: 1px solid rgba(10, 15, 28, 0.08);
    font-size: 0.9rem;
    color: #637087;
}

.legal-footer {
    padding: 30px 0;
    background: #0A0F1C;
    color: rgba(255, 255, 255, 0.74);
}

.legal-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    font-family: Inter, Arial, sans-serif;
    font-size: 0.9rem;
}

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

.legal-footer a {
    color: #ffffff;
    text-decoration: none;
}

.legal-footer a:hover,
.legal-footer a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 720px) {
    .legal-header-inner,
    .legal-footer-inner,
    .legal-shell {
        width: min(100% - 28px, 900px);
    }

    .legal-header-inner {
        min-height: 70px;
    }

    .legal-main {
        padding: 54px 0 68px;
    }

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

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






/* =========================================================
   LOYKI V3 — DEVELOPMENT STATUS
   ========================================================= */

.development-section {
    position: relative;
    overflow: hidden;
    padding: 112px 0 116px;
    background:
        radial-gradient(
            circle at 88% 10%,
            rgba(22, 107, 255, 0.08),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #f7f9fc 0%,
            #ffffff 55%,
            #f7f9fc 100%
        );
}

.development-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            rgba(109, 74, 255, 0.025),
            transparent 36%,
            rgba(0, 212, 255, 0.025)
        );
}

.development-section .container {
    position: relative;
    z-index: 1;
}

.development-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
    gap: clamp(48px, 7vw, 100px);
    align-items: center;
}

.development-copy {
    max-width: 760px;
}

.development-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    padding: 8px 14px;
    border: 1px solid rgba(22, 107, 255, 0.12);
    border-radius: 999px;
    background: rgba(22, 107, 255, 0.07);
    color: var(--color-blue);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.15em;
}

.development-status-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--color-blue);
    box-shadow: 0 0 0 5px rgba(22, 107, 255, 0.08);
}

.development-copy .eyebrow {
    margin-bottom: 14px;
}

.development-copy h2 {
    margin: 0;
    max-width: 760px;
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 4.6vw, 4.5rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.045em;
}

.development-copy h2 span {
    display: block;
    background: linear-gradient(
        90deg,
        var(--color-blue),
        var(--color-violet)
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.development-lead {
    margin: 24px 0 0;
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 1.8vw, 1.5rem);
    line-height: 1.5;
}

.development-text {
    margin: 24px 0 0;
    max-width: 720px;
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1.8;
}

.development-statement {
    position: relative;
    padding: 32px 0 32px 42px;
    border-left: 1px solid var(--color-border);
}

.development-quote-mark {
    display: block;
    height: 48px;
    color: rgba(22, 107, 255, 0.16);
    font-family: Georgia, serif;
    font-size: 5rem;
    line-height: 1;
}

.development-statement blockquote {
    margin: 4px 0 24px;
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2vw, 1.85rem);
    font-weight: 400;
    line-height: 1.45;
}

.development-statement blockquote strong {
    display: block;
    margin-top: 3px;
    font-weight: 600;
}

.development-statement > p {
    position: relative;
    margin: 0;
    padding-left: 40px;
    color: var(--color-text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.6;
    text-transform: uppercase;
}

.development-statement > p::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 26px;
    height: 1px;
    background: currentColor;
}

.development-progress {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin-top: 86px;
}

.development-progress-line {
    position: absolute;
    top: 26px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    overflow: hidden;
    background: rgba(10, 15, 28, 0.10);
}

.development-progress-line-active {
    display: block;
    width: 43%;
    height: 100%;
    background: linear-gradient(
        90deg,
        var(--color-blue),
        var(--color-violet)
    );
}

.development-step {
    position: relative;
    z-index: 1;
    text-align: center;
}

.development-marker {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin: 0 auto 20px;
    border: 2px solid rgba(10, 15, 28, 0.14);
    border-radius: 50%;
    background: var(--color-white);
    box-shadow: 0 0 0 8px rgba(247, 249, 252, 0.94);
}

.development-marker span {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(89, 101, 121, 0.38);
}

.development-step-complete .development-marker {
    border-color: var(--color-blue);
    background: var(--color-blue);
    color: var(--color-white);
    box-shadow: 0 0 0 8px rgba(22, 107, 255, 0.08);
}

.development-step-complete .development-marker span {
    width: auto;
    height: auto;
    background: none;
    font-size: 1.25rem;
    font-weight: 700;
}

.development-step-active .development-marker {
    border-color: var(--color-violet);
    background: var(--color-violet);
    box-shadow: 0 0 0 8px rgba(109, 74, 255, 0.08);
}

.development-step-active .development-marker span {
    width: 11px;
    height: 11px;
    background: var(--color-white);
}

.development-step-number {
    margin: 0 0 8px;
    color: rgba(89, 101, 121, 0.72);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.18em;
}

.development-step h3 {
    margin: 0;
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.development-step > p:not(.development-step-number) {
    min-height: 50px;
    margin: 10px auto 14px;
    max-width: 220px;
    color: var(--color-text-muted);
    font-size: 0.88rem;
    line-height: 1.55;
}

.development-step-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(10, 15, 28, 0.05);
    color: var(--color-text-muted);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.development-step-complete .development-step-state {
    background: rgba(22, 107, 255, 0.08);
    color: var(--color-blue);
}

.development-step-active .development-step-state {
    background: rgba(109, 74, 255, 0.09);
    color: var(--color-violet);
}

.development-footer {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.8fr);
    gap: 42px;
    align-items: center;
    margin-top: 70px;
    padding: clamp(28px, 4vw, 44px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: var(--shadow-soft);
}

.development-transparency {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.development-transparency-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(22, 107, 255, 0.08);
    color: var(--color-blue);
    font-size: 1.4rem;
}

.development-transparency h3 {
    margin: 0 0 8px;
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 1.08rem;
    font-weight: 600;
}

.development-transparency p {
    margin: 0;
    max-width: 720px;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    line-height: 1.7;
}

.development-contact {
    padding-left: 38px;
    border-left: 1px solid var(--color-border);
}

.development-contact-label {
    margin: 0 0 8px;
    color: var(--color-blue);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.15em;
}

.development-contact > p:not(.development-contact-label) {
    margin: 0 0 20px;
    color: var(--color-text-muted);
    font-size: 0.88rem;
    line-height: 1.6;
}

.development-contact-button {
    gap: 14px;
}

@media (max-width: 900px) {
    .development-section {
        padding: 88px 0 92px;
    }

    .development-intro {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .development-statement {
        padding: 10px 0 10px 28px;
    }

    .development-progress {
        grid-template-columns: 1fr 1fr;
        row-gap: 52px;
    }

    .development-progress-line {
        display: none;
    }

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

    .development-contact {
        padding: 28px 0 0;
        border-top: 1px solid var(--color-border);
        border-left: 0;
    }
}

@media (max-width: 600px) {
    .development-section {
        padding: 72px 0 76px;
    }

    .development-copy h2 {
        font-size: clamp(2.25rem, 11vw, 3.2rem);
    }

    .development-progress {
        grid-template-columns: 1fr;
        gap: 40px;
        margin-top: 62px;
    }

    .development-step > p:not(.development-step-number) {
        min-height: 0;
    }

    .development-footer {
        margin-top: 54px;
        padding: 24px 20px;
        border-radius: var(--radius-md);
    }

    .development-transparency {
        grid-template-columns: 1fr;
    }

    .development-transparency-icon {
        width: 48px;
        height: 48px;
    }
}

/* =========================================================
   LOYKI V3 — DEVELOPMENT STATUS TUNING V1
   ========================================================= */

.development-section {
    padding-top: 88px;
    padding-bottom: 92px;
}

.development-intro {
    gap: clamp(42px, 6vw, 82px);
}

.development-status-badge {
    margin-bottom: 20px;
}

.development-text {
    margin-top: 20px;
}

.development-statement {
    padding-top: 26px;
    padding-bottom: 26px;
}

.development-progress {
    margin-top: 64px;
}

.development-progress-line-active {
    width: 67%;
}

.development-marker {
    margin-bottom: 16px;
}

.development-step > p:not(.development-step-number) {
    min-height: 44px;
    margin-top: 8px;
    margin-bottom: 11px;
}

.development-step-validate .development-marker {
    border-color: var(--color-blue);
    background:
        linear-gradient(
            135deg,
            rgba(22, 107, 255, 0.10),
            rgba(109, 74, 255, 0.10)
        ),
        var(--color-white);
    box-shadow:
        0 0 0 8px rgba(22, 107, 255, 0.055);
}

.development-step-validate .development-marker span {
    width: 11px;
    height: 11px;
    background:
        linear-gradient(
            135deg,
            var(--color-blue),
            var(--color-violet)
        );
}

.development-step-validate .development-step-state {
    background:
        linear-gradient(
            135deg,
            rgba(22, 107, 255, 0.08),
            rgba(109, 74, 255, 0.08)
        );
    color: var(--color-blue);
}

.development-footer {
    margin-top: 52px;
    padding: clamp(26px, 3.2vw, 38px);
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.92),
            rgba(247, 249, 252, 0.88)
        );
}

.development-transparency-icon {
    box-shadow:
        inset 0 0 0 1px rgba(22, 107, 255, 0.08);
}

.development-contact-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 48px;
    padding: 0 21px;
    border: 1px solid rgba(7, 17, 31, 0.06);
    border-radius: var(--radius-sm);
    background:
        linear-gradient(
            135deg,
            var(--color-navy-950),
            var(--color-navy-800)
        );
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 650;
    line-height: 1;
    text-decoration: none;
    box-shadow:
        0 10px 24px rgba(7, 17, 31, 0.13);
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        background 180ms ease;
}

.development-contact-button:visited {
    color: var(--color-white);
}

.development-contact-button:hover {
    transform: translateY(-2px);
    background:
        linear-gradient(
            135deg,
            #0b2345,
            #123764
        );
    color: var(--color-white);
    box-shadow:
        0 14px 30px rgba(7, 17, 31, 0.18);
}

.development-contact-button:focus-visible {
    outline: 3px solid rgba(22, 107, 255, 0.28);
    outline-offset: 3px;
}

.development-contact-button span {
    font-size: 1.05rem;
    transition: transform 180ms ease;
}

.development-contact-button:hover span {
    transform: translateX(3px);
}

@media (max-width: 900px) {
    .development-section {
        padding-top: 76px;
        padding-bottom: 80px;
    }

    .development-progress {
        margin-top: 54px;
    }

    .development-footer {
        margin-top: 46px;
    }
}

@media (max-width: 600px) {
    .development-section {
        padding-top: 64px;
        padding-bottom: 68px;
    }

    .development-progress {
        margin-top: 48px;
    }

    .development-footer {
        margin-top: 42px;
    }

    .development-contact-button {
        width: 100%;
        min-height: 50px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .development-contact-button,
    .development-contact-button span {
        transition: none;
    }
}
/* =========================================================
   LOYKI DEVELOPMENT CTA HEADER COLOR FIX
   Match existing .button-primary header CTA
   ========================================================= */

.development-contact-button.button-primary {
    background:
        linear-gradient(
            135deg,
            var(--color-blue),
            var(--color-violet)
        );
    color: var(--color-white);
    border-color: transparent;
    box-shadow:
        0 10px 24px rgba(22, 107, 255, 0.18);
}

.development-contact-button.button-primary:visited {
    color: var(--color-white);
}

.development-contact-button.button-primary:hover {
    background:
        linear-gradient(
            135deg,
            var(--color-blue),
            var(--color-violet)
        );
    color: var(--color-white);
    box-shadow:
        0 14px 30px rgba(22, 107, 255, 0.24);
}
/* ==========================================================
   LOYKI INVESTOR EXPERIENCE V1
   ========================================================== */

/* ---------- Investor page base ---------- */

.investor-hero {
    position: relative;
    overflow: hidden;
}

.investor-hero::after {
    content: "";
    position: absolute;
    width: 36rem;
    height: 36rem;
    right: -12rem;
    top: 1rem;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(37, 99, 235, 0.14) 0%,
            rgba(14, 165, 233, 0.06) 40%,
            rgba(255, 255, 255, 0) 72%
        );
    pointer-events: none;
}

.investor-hero .hero-content {
    position: relative;
    z-index: 1;
    max-width: 900px;
}

.investor-section {
    position: relative;
    padding: 110px 0;
}

.investor-section-soft {
    background:
        linear-gradient(
            180deg,
            rgba(246, 249, 253, 0.92) 0%,
            #ffffff 100%
        );
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.investor-narrow {
    max-width: 940px;
}

.investor-section h2 {
    max-width: 920px;
    margin: 14px 0 26px;
    font-family: "Sora", "Inter", sans-serif;
    font-size: clamp(2rem, 4vw, 3.7rem);
    line-height: 1.08;
    letter-spacing: -0.045em;
    color: #0f172a;
}

.investor-lead {
    max-width: 850px;
    margin: 0;
    font-size: clamp(1.08rem, 1.6vw, 1.28rem);
    line-height: 1.8;
    color: #475569;
}

.investor-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-top: 54px;
}

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

.investor-card {
    position: relative;
    min-height: 260px;
    padding: 34px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 20px 55px rgba(15, 23, 42, 0.06);
}

.investor-card > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 30px;
    margin-bottom: 32px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    font-family: "Sora", "Inter", sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #2563eb;
}

.investor-card h3 {
    margin: 0 0 14px;
    font-family: "Sora", "Inter", sans-serif;
    font-size: 1.28rem;
    line-height: 1.25;
    color: #0f172a;
}

.investor-card p {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.75;
    color: #64748b;
}

.investor-section-dark {
    overflow: hidden;
    background:
        radial-gradient(
            circle at 82% 20%,
            rgba(14, 165, 233, 0.16),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #07152d 0%,
            #0b1f3a 55%,
            #0d2748 100%
        );
}

.investor-section-dark .eyebrow {
    color: #67e8f9;
}

.investor-section-dark h2 {
    color: #ffffff;
}

.investor-section-dark .investor-lead {
    color: rgba(226, 232, 240, 0.92);
}

.investor-section-dark p:not(.eyebrow):not(.investor-lead) {
    max-width: 820px;
    margin: 26px 0 0;
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(203, 213, 225, 0.84);
}

/* ---------- Development experience ---------- */

.investor-development {
    overflow: hidden;
    background:
        radial-gradient(
            circle at 78% 12%,
            rgba(14, 165, 233, 0.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 14% 88%,
            rgba(37, 99, 235, 0.06),
            transparent 30%
        ),
        #ffffff;
}

.investor-development::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            125deg,
            transparent 0%,
            transparent 48%,
            rgba(37, 99, 235, 0.035) 48.1%,
            transparent 48.35%
        );
}

.investor-development .container {
    position: relative;
    z-index: 1;
}

.investor-development-head {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
    gap: 70px;
    align-items: center;
}

.investor-development-copy {
    max-width: 760px;
}

.investor-development-status {
    position: relative;
    min-height: 310px;
    padding: 42px 230px 42px 42px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 28px;
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.95),
            rgba(239, 247, 255, 0.82)
        );
    box-shadow:
        0 30px 80px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.investor-development-status-label {
    margin: 0 0 14px;
    font-family: "Sora", "Inter", sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: #2563eb;
}

.investor-development-status > strong {
    display: block;
    margin-bottom: 18px;
    font-family: "Sora", "Inter", sans-serif;
    font-size: clamp(1.55rem, 2.4vw, 2.2rem);
    line-height: 1.15;
    letter-spacing: -0.035em;
    color: #0f172a;
}

.investor-development-status > p:not(.investor-development-status-label) {
    margin: 0;
    max-width: 390px;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #64748b;
}

/* Animated orbital phase indicator */

.investor-development-orbit {
    position: absolute;
    width: 164px;
    height: 164px;
    right: 38px;
    top: 50%;
    transform: translateY(-50%);
}

.investor-development-orbit-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        conic-gradient(
            from -90deg,
            #2563eb 0deg,
            #0ea5e9 150deg,
            #22d3ee 216deg,
            rgba(203, 213, 225, 0.42) 216deg,
            rgba(226, 232, 240, 0.7) 360deg
        );
    box-shadow:
        0 16px 42px rgba(37, 99, 235, 0.16);
    animation:
        loykiOrbitReveal 1.5s cubic-bezier(.2,.75,.25,1) both;
}

.investor-development-orbit-ring::after {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 1),
            rgba(244, 249, 255, 0.98)
        );
    box-shadow:
        inset 0 0 28px rgba(37, 99, 235, 0.05);
}

.investor-development-orbit-ring span {
    position: absolute;
    z-index: 2;
    width: 15px;
    height: 15px;
    left: 18px;
    bottom: 23px;
    border: 4px solid #ffffff;
    border-radius: 50%;
    background: #0ea5e9;
    box-shadow:
        0 0 0 5px rgba(14, 165, 233, 0.10),
        0 0 20px rgba(14, 165, 233, 0.55);
}

.investor-development-orbit-center {
    position: absolute;
    z-index: 3;
    inset: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.investor-development-orbit-center small {
    font-family: "Sora", "Inter", sans-serif;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #64748b;
}

.investor-development-orbit-center b {
    margin: 2px 0;
    font-family: "Sora", "Inter", sans-serif;
    font-size: 2.45rem;
    line-height: 1;
    color: #0f172a;
}

/* Timeline */

.investor-roadmap {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 22px;
    margin-top: 105px;
}

.investor-roadmap-line {
    position: absolute;
    top: 18px;
    left: 8%;
    right: 8%;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #dbe5f1;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
}

.investor-roadmap-progress {
    display: block;
    width: 50%;
    height: 100%;
    border-radius: inherit;
    background:
        linear-gradient(
            90deg,
            #2563eb 0%,
            #0ea5e9 60%,
            #22d3ee 100%
        );
    box-shadow:
        0 0 20px rgba(14, 165, 233, 0.45);
    transform-origin: left center;
    animation:
        loykiProgressReveal 1.65s cubic-bezier(.2,.75,.25,1) .15s both;
}

.investor-roadmap-step {
    position: relative;
    z-index: 2;
    padding-top: 66px;
    text-align: center;
}

.investor-roadmap-marker {
    position: absolute;
    top: 3px;
    left: 50%;
    width: 38px;
    height: 38px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 5px solid #ffffff;
    border-radius: 50%;
    background: #cbd5e1;
    box-shadow:
        0 0 0 1px rgba(148, 163, 184, 0.28),
        0 6px 18px rgba(15, 23, 42, 0.10);
}

.investor-roadmap-step.is-complete .investor-roadmap-marker {
    background:
        linear-gradient(
            135deg,
            #2563eb,
            #0ea5e9
        );
}

.investor-roadmap-step.is-complete .investor-roadmap-marker span {
    font-size: 0.9rem;
    font-weight: 800;
    color: #ffffff;
}

.investor-roadmap-step.is-active .investor-roadmap-marker {
    background: #ffffff;
    box-shadow:
        0 0 0 2px #2563eb,
        0 0 0 9px rgba(37, 99, 235, 0.10),
        0 0 30px rgba(14, 165, 233, 0.42);
    animation:
        loykiActivePulse 2.6s ease-in-out infinite;
}

.investor-roadmap-step.is-active .investor-roadmap-marker span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background:
        linear-gradient(
            135deg,
            #2563eb,
            #22d3ee
        );
}

.investor-roadmap-current {
    position: absolute;
    top: -52px;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 15px;
    white-space: nowrap;
    border-radius: 999px;
    background:
        linear-gradient(
            135deg,
            #2563eb,
            #0ea5e9
        );
    font-family: "Sora", "Inter", sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    color: #ffffff;
    box-shadow:
        0 9px 25px rgba(37, 99, 235, 0.28);
}

.investor-roadmap-current::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 12px;
    height: 12px;
    transform: translateX(-50%) rotate(45deg);
    background: #0ea5e9;
}

.investor-roadmap-number {
    margin: 0 0 9px;
    font-family: "Sora", "Inter", sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #2563eb;
}

.investor-roadmap-step h3 {
    margin: 0 0 12px;
    font-family: "Sora", "Inter", sans-serif;
    font-size: 1.04rem;
    line-height: 1.3;
    color: #0f172a;
}

.investor-roadmap-step > p:not(.investor-roadmap-number) {
    min-height: 74px;
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.6;
    color: #64748b;
}

.investor-roadmap-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 18px;
    padding: 7px 13px;
    border-radius: 999px;
    background: #edf2f7;
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
}

.investor-roadmap-step.is-complete .investor-roadmap-state {
    background: rgba(16, 185, 129, 0.10);
    color: #047857;
}

.investor-roadmap-step.is-active .investor-roadmap-state {
    background: rgba(37, 99, 235, 0.10);
    color: #1d4ed8;
}

/* Development bottom panel */

.investor-development-footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin-top: 86px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: 28px;
    background:
        linear-gradient(
            135deg,
            rgba(247, 250, 255, 0.96),
            rgba(239, 247, 255, 0.80)
        );
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.06);
}

.investor-development-footer > div {
    padding: 42px;
}

.investor-development-footer > div + div {
    border-left: 1px solid rgba(37, 99, 235, 0.12);
}

.investor-development-footer h3 {
    margin: 10px 0 15px;
    font-family: "Sora", "Inter", sans-serif;
    font-size: 1.35rem;
    line-height: 1.3;
    color: #0f172a;
}

.investor-development-footer p:not(.eyebrow) {
    max-width: 560px;
    margin: 0;
    font-size: 0.93rem;
    line-height: 1.7;
    color: #64748b;
}

.investor-development-footer .button {
    margin-top: 25px;
}

/* ---------- Investor CTA ---------- */

.investor-cta {
    text-align: center;
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f5f9ff 100%
        );
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.investor-cta .investor-narrow {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.investor-cta h2,
.investor-cta .investor-lead {
    margin-left: auto;
    margin-right: auto;
}

.investor-cta .button {
    margin-top: 36px;
}

.investor-email {
    margin: 18px 0 0;
    font-size: 0.9rem;
    color: #64748b;
}

/* ---------- Animations ---------- */

@keyframes loykiProgressReveal {
    from {
        transform: scaleX(0);
        opacity: 0.3;
    }

    to {
        transform: scaleX(1);
        opacity: 1;
    }
}

@keyframes loykiOrbitReveal {
    from {
        transform: rotate(-120deg) scale(0.86);
        opacity: 0;
    }

    to {
        transform: rotate(0deg) scale(1);
        opacity: 1;
    }
}

@keyframes loykiActivePulse {
    0%,
    100% {
        box-shadow:
            0 0 0 2px #2563eb,
            0 0 0 8px rgba(37, 99, 235, 0.08),
            0 0 22px rgba(14, 165, 233, 0.30);
    }

    50% {
        box-shadow:
            0 0 0 2px #2563eb,
            0 0 0 13px rgba(37, 99, 235, 0.04),
            0 0 34px rgba(14, 165, 233, 0.48);
    }
}

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
    .investor-development-head {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .investor-development-status {
        max-width: 760px;
    }

    .investor-roadmap {
        gap: 12px;
    }
}

@media (max-width: 900px) {
    .investor-section {
        padding: 84px 0;
    }

    .investor-grid,
    .investor-grid-two {
        grid-template-columns: 1fr;
    }

    .investor-card {
        min-height: auto;
    }

    .investor-roadmap {
        display: block;
        margin-top: 70px;
        padding-left: 46px;
    }

    .investor-roadmap-line {
        top: 0;
        bottom: 0;
        left: 16px;
        right: auto;
        width: 7px;
        height: auto;
    }

    .investor-roadmap-progress {
        width: 100%;
        height: 50%;
        transform-origin: top center;
        animation-name: loykiProgressRevealMobile;
    }

    .investor-roadmap-step {
        min-height: 160px;
        padding: 0 0 42px 24px;
        text-align: left;
    }

    .investor-roadmap-marker {
        top: 0;
        left: -30px;
        transform: none;
    }

    .investor-roadmap-current {
        top: -42px;
        left: 24px;
        transform: none;
    }

    .investor-roadmap-current::after {
        left: 22px;
        transform: rotate(45deg);
    }

    .investor-roadmap-step > p:not(.investor-roadmap-number) {
        min-height: auto;
    }

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

    .investor-development-footer > div + div {
        border-top: 1px solid rgba(37, 99, 235, 0.12);
        border-left: 0;
    }
}

@keyframes loykiProgressRevealMobile {
    from {
        transform: scaleY(0);
        opacity: 0.3;
    }

    to {
        transform: scaleY(1);
        opacity: 1;
    }
}

@media (max-width: 640px) {
    .investor-section {
        padding: 68px 0;
    }

    .investor-grid {
        margin-top: 38px;
        gap: 16px;
    }

    .investor-card {
        padding: 26px;
        border-radius: 20px;
    }

    .investor-section h2 {
        letter-spacing: -0.035em;
    }

    .investor-development-status {
        min-height: 470px;
        padding: 30px;
    }

    .investor-development-status > p:not(.investor-development-status-label) {
        max-width: none;
    }

    .investor-development-orbit {
        width: 150px;
        height: 150px;
        right: 50%;
        top: auto;
        bottom: 28px;
        transform: translateX(50%);
    }

    .investor-development-footer > div {
        padding: 30px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .investor-development-orbit-ring,
    .investor-roadmap-progress,
    .investor-roadmap-marker {
        animation: none !important;
    }
}
/* ==========================================================
   LOYKI SCROLL REVEAL FOUNDATION V1
   Development animation starts only when the section
   enters the viewport.
   ========================================================== */


/* ----------------------------------------------------------
   INITIAL STATE
   ---------------------------------------------------------- */

.investor-development.is-reveal-ready
.investor-development-orbit-ring {
    animation: none;
    opacity: 0;
    transform: rotate(-120deg) scale(0.86);
}

.investor-development.is-reveal-ready
.investor-roadmap-progress {
    animation: none;
    opacity: 0;
    transform: scaleX(0);
}

.investor-development.is-reveal-ready
.investor-roadmap-step .investor-roadmap-marker {
    animation: none;
    opacity: 0;
    transform: translateX(-50%) scale(0.55);
}

.investor-development.is-reveal-ready
.investor-roadmap-step .investor-roadmap-number,
.investor-development.is-reveal-ready
.investor-roadmap-step h3,
.investor-development.is-reveal-ready
.investor-roadmap-step > p,
.investor-development.is-reveal-ready
.investor-roadmap-step .investor-roadmap-state {
    opacity: 0;
    transform: translateY(12px);
}

.investor-development.is-reveal-ready
.investor-roadmap-current {
    opacity: 0;
    transform:
        translateX(-50%)
        translateY(8px);
}


/* ----------------------------------------------------------
   ORBIT REVEAL
   ---------------------------------------------------------- */

.investor-development.is-reveal-ready.is-visible
.investor-development-orbit-ring {
    animation:
        loykiOrbitReveal
        1.25s
        cubic-bezier(.2,.75,.25,1)
        0.10s
        forwards;
}


/* ----------------------------------------------------------
   PROGRESS LINE
   ---------------------------------------------------------- */

.investor-development.is-reveal-ready.is-visible
.investor-roadmap-progress {
    animation:
        loykiProgressReveal
        1.55s
        cubic-bezier(.2,.75,.25,1)
        0.35s
        forwards;
}


/* ----------------------------------------------------------
   PHASE 01
   ---------------------------------------------------------- */

.investor-development.is-reveal-ready.is-visible
.investor-roadmap-step:nth-of-type(1)
.investor-roadmap-marker {
    animation:
        loykiTrackerMarkerReveal
        0.45s
        cubic-bezier(.2,.8,.2,1)
        0.45s
        forwards;
}

.investor-development.is-reveal-ready.is-visible
.investor-roadmap-step:nth-of-type(1)
.investor-roadmap-number,
.investor-development.is-reveal-ready.is-visible
.investor-roadmap-step:nth-of-type(1) h3,
.investor-development.is-reveal-ready.is-visible
.investor-roadmap-step:nth-of-type(1) > p,
.investor-development.is-reveal-ready.is-visible
.investor-roadmap-step:nth-of-type(1)
.investor-roadmap-state {
    animation:
        loykiTrackerCopyReveal
        0.55s
        ease
        0.52s
        forwards;
}


/* ----------------------------------------------------------
   PHASE 02
   ---------------------------------------------------------- */

.investor-development.is-reveal-ready.is-visible
.investor-roadmap-step:nth-of-type(2)
.investor-roadmap-marker {
    animation:
        loykiTrackerMarkerReveal
        0.45s
        cubic-bezier(.2,.8,.2,1)
        0.82s
        forwards;
}

.investor-development.is-reveal-ready.is-visible
.investor-roadmap-step:nth-of-type(2)
.investor-roadmap-number,
.investor-development.is-reveal-ready.is-visible
.investor-roadmap-step:nth-of-type(2) h3,
.investor-development.is-reveal-ready.is-visible
.investor-roadmap-step:nth-of-type(2) > p,
.investor-development.is-reveal-ready.is-visible
.investor-roadmap-step:nth-of-type(2)
.investor-roadmap-state {
    animation:
        loykiTrackerCopyReveal
        0.55s
        ease
        0.89s
        forwards;
}


/* ----------------------------------------------------------
   PHASE 03 - CURRENT
   ---------------------------------------------------------- */

.investor-development.is-reveal-ready.is-visible
.investor-roadmap-step:nth-of-type(3)
.investor-roadmap-marker {
    animation:
        loykiTrackerMarkerReveal
        0.50s
        cubic-bezier(.2,.8,.2,1)
        1.20s
        forwards,
        loykiActivePulse
        2.6s
        ease-in-out
        1.75s
        infinite;
}

.investor-development.is-reveal-ready.is-visible
.investor-roadmap-step:nth-of-type(3)
.investor-roadmap-number,
.investor-development.is-reveal-ready.is-visible
.investor-roadmap-step:nth-of-type(3) h3,
.investor-development.is-reveal-ready.is-visible
.investor-roadmap-step:nth-of-type(3) > p,
.investor-development.is-reveal-ready.is-visible
.investor-roadmap-step:nth-of-type(3)
.investor-roadmap-state {
    animation:
        loykiTrackerCopyReveal
        0.55s
        ease
        1.28s
        forwards;
}

.investor-development.is-reveal-ready.is-visible
.investor-roadmap-current {
    animation:
        loykiTrackerCurrentReveal
        0.55s
        cubic-bezier(.2,.8,.2,1)
        1.40s
        forwards;
}


/* ----------------------------------------------------------
   FUTURE PHASES 04 + 05
   ---------------------------------------------------------- */

.investor-development.is-reveal-ready.is-visible
.investor-roadmap-step:nth-of-type(4)
.investor-roadmap-marker,
.investor-development.is-reveal-ready.is-visible
.investor-roadmap-step:nth-of-type(5)
.investor-roadmap-marker {
    animation:
        loykiTrackerMarkerReveal
        0.45s
        ease
        1.62s
        forwards;
}

.investor-development.is-reveal-ready.is-visible
.investor-roadmap-step:nth-of-type(4)
.investor-roadmap-number,
.investor-development.is-reveal-ready.is-visible
.investor-roadmap-step:nth-of-type(4) h3,
.investor-development.is-reveal-ready.is-visible
.investor-roadmap-step:nth-of-type(4) > p,
.investor-development.is-reveal-ready.is-visible
.investor-roadmap-step:nth-of-type(4)
.investor-roadmap-state,
.investor-development.is-reveal-ready.is-visible
.investor-roadmap-step:nth-of-type(5)
.investor-roadmap-number,
.investor-development.is-reveal-ready.is-visible
.investor-roadmap-step:nth-of-type(5) h3,
.investor-development.is-reveal-ready.is-visible
.investor-roadmap-step:nth-of-type(5) > p,
.investor-development.is-reveal-ready.is-visible
.investor-roadmap-step:nth-of-type(5)
.investor-roadmap-state {
    animation:
        loykiTrackerCopyReveal
        0.55s
        ease
        1.68s
        forwards;
}


/* ----------------------------------------------------------
   REVEAL KEYFRAMES
   ---------------------------------------------------------- */

@keyframes loykiTrackerMarkerReveal {
    from {
        opacity: 0;
        transform:
            translateX(-50%)
            scale(0.55);
    }

    to {
        opacity: 1;
        transform:
            translateX(-50%)
            scale(1);
    }
}

@keyframes loykiTrackerCopyReveal {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes loykiTrackerCurrentReveal {
    from {
        opacity: 0;
        transform:
            translateX(-50%)
            translateY(8px)
            scale(0.92);
    }

    to {
        opacity: 1;
        transform:
            translateX(-50%)
            translateY(0)
            scale(1);
    }
}


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

@media (max-width: 900px) {

    .investor-development.is-reveal-ready
    .investor-roadmap-progress {
        transform: scaleY(0);
    }

    .investor-development.is-reveal-ready
    .investor-roadmap-step .investor-roadmap-marker {
        transform: scale(0.55);
    }

    .investor-development.is-reveal-ready
    .investor-roadmap-current {
        transform: translateY(8px);
    }

    .investor-development.is-reveal-ready.is-visible
    .investor-roadmap-progress {
        animation:
            loykiProgressRevealMobile
            1.55s
            cubic-bezier(.2,.75,.25,1)
            0.35s
            forwards;
    }

    .investor-development.is-reveal-ready.is-visible
    .investor-roadmap-step:nth-of-type(1)
    .investor-roadmap-marker {
        animation:
            loykiTrackerMarkerRevealMobile
            0.45s
            cubic-bezier(.2,.8,.2,1)
            0.45s
            forwards;
    }

    .investor-development.is-reveal-ready.is-visible
    .investor-roadmap-step:nth-of-type(2)
    .investor-roadmap-marker {
        animation:
            loykiTrackerMarkerRevealMobile
            0.45s
            cubic-bezier(.2,.8,.2,1)
            0.82s
            forwards;
    }

    .investor-development.is-reveal-ready.is-visible
    .investor-roadmap-step:nth-of-type(3)
    .investor-roadmap-marker {
        animation:
            loykiTrackerMarkerRevealMobile
            0.50s
            cubic-bezier(.2,.8,.2,1)
            1.20s
            forwards,
            loykiActivePulse
            2.6s
            ease-in-out
            1.75s
            infinite;
    }

    .investor-development.is-reveal-ready.is-visible
    .investor-roadmap-step:nth-of-type(4)
    .investor-roadmap-marker,
    .investor-development.is-reveal-ready.is-visible
    .investor-roadmap-step:nth-of-type(5)
    .investor-roadmap-marker {
        animation:
            loykiTrackerMarkerRevealMobile
            0.45s
            ease
            1.62s
            forwards;
    }

    .investor-development.is-reveal-ready.is-visible
    .investor-roadmap-current {
        animation:
            loykiTrackerCurrentRevealMobile
            0.55s
            cubic-bezier(.2,.8,.2,1)
            1.40s
            forwards;
    }
}

@keyframes loykiTrackerMarkerRevealMobile {
    from {
        opacity: 0;
        transform: scale(0.55);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes loykiTrackerCurrentRevealMobile {
    from {
        opacity: 0;
        transform:
            translateY(8px)
            scale(0.92);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}


/* ----------------------------------------------------------
   ACCESSIBILITY
   ---------------------------------------------------------- */

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

    .investor-development.is-reveal-ready
    .investor-development-orbit-ring,
    .investor-development.is-reveal-ready
    .investor-roadmap-progress,
    .investor-development.is-reveal-ready
    .investor-roadmap-marker,
    .investor-development.is-reveal-ready
    .investor-roadmap-number,
    .investor-development.is-reveal-ready
    .investor-roadmap-step h3,
    .investor-development.is-reveal-ready
    .investor-roadmap-step > p,
    .investor-development.is-reveal-ready
    .investor-roadmap-state,
    .investor-development.is-reveal-ready
    .investor-roadmap-current {
        opacity: 1 !important;
        animation: none !important;
        transform: none !important;
    }
}
/* ==========================================================
   LOYKI INVESTOR HERO V2
   Interactive Sovereign AI Network
   ========================================================== */

.investor-hero {
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    padding: 82px 0 96px;
    background:
        radial-gradient(
            circle at 77% 46%,
            rgba(14, 165, 233, 0.10),
            transparent 27%
        ),
        radial-gradient(
            circle at 88% 20%,
            rgba(37, 99, 235, 0.07),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfdff 100%
        );
}

.investor-hero::after {
    display: none;
}

.investor-hero-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(540px, 1.08fr);
    gap: clamp(48px, 6vw, 100px);
    align-items: center;
}

.investor-hero .hero-content {
    max-width: 720px;
}

.investor-hero-copy h1 {
    max-width: 760px;
    font-size: clamp(3rem, 5.3vw, 5.4rem);
    line-height: 0.99;
    letter-spacing: -0.055em;
}

.investor-hero-copy .hero-lead {
    max-width: 690px;
}

.investor-hero-principles {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.investor-hero-principles span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid rgba(37, 99, 235, 0.10);
    border-radius: 999px;
    background: rgba(248, 251, 255, 0.86);
    font-family: "Inter", sans-serif;
    font-size: 0.73rem;
    font-weight: 650;
    color: #475569;
}

.investor-hero-principles i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0ea5e9;
    box-shadow: 0 0 10px rgba(14, 165, 233, 0.65);
}


/* ----------------------------------------------------------
   NETWORK SHELL
   ---------------------------------------------------------- */

.loyki-network {
    position: relative;
    min-width: 0;
    perspective: 1200px;
}

.loyki-network-glow {
    position: absolute;
    z-index: 0;
    width: 78%;
    aspect-ratio: 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(37, 99, 235, 0.13) 0%,
            rgba(14, 165, 233, 0.07) 36%,
            transparent 70%
        );
    filter: blur(8px);
    animation: loykiNetworkGlow 5s ease-in-out infinite;
}

.loyki-network-frame {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 700px;
    aspect-ratio: 1.22 / 1;
    margin-left: auto;
    overflow: hidden;
    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 32px;
    background:
        linear-gradient(
            rgba(255, 255, 255, 0.88),
            rgba(248, 252, 255, 0.91)
        ),
        linear-gradient(
            90deg,
            rgba(37, 99, 235, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            rgba(37, 99, 235, 0.035) 1px,
            transparent 1px
        );
    background-size:
        auto,
        34px 34px,
        34px 34px;
    box-shadow:
        0 40px 100px rgba(15, 23, 42, 0.10),
        0 4px 18px rgba(37, 99, 235, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
    transform: rotateY(-2deg) rotateX(1deg);
    transition:
        transform 0.55s cubic-bezier(.2,.75,.25,1),
        box-shadow 0.55s ease;
}

.loyki-network:hover .loyki-network-frame {
    transform: rotateY(0deg) rotateX(0deg) translateY(-4px);
    box-shadow:
        0 48px 120px rgba(15, 23, 42, 0.13),
        0 8px 28px rgba(37, 99, 235, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.loyki-network-topline {
    position: absolute;
    z-index: 8;
    top: 22px;
    left: 25px;
    right: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: "Sora", "Inter", sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    color: #64748b;
}

.loyki-network-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #2563eb;
}

.loyki-network-live i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.55);
}


/* ----------------------------------------------------------
   CONNECTIONS
   ---------------------------------------------------------- */

.loyki-network-lines {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.network-path {
    fill: none;
    stroke: url(#loykiLineGradient);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-dasharray: 8 10;
    opacity: 0;
    animation:
        loykiNetworkLineReveal
        1.2s
        ease
        forwards,
        loykiNetworkFlow
        10s
        linear
        infinite;
}

.path-1 {
    animation-delay: 0.35s, 1.55s;
}

.path-2 {
    animation-delay: 0.48s, 1.68s;
}

.path-3 {
    animation-delay: 0.61s, 1.81s;
}

.path-4 {
    animation-delay: 0.74s, 1.94s;
}

.path-5 {
    animation-delay: 0.87s, 2.07s;
}


/* ----------------------------------------------------------
   CORE
   ---------------------------------------------------------- */

.loyki-network-core {
    position: absolute;
    z-index: 5;
    width: 166px;
    height: 166px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.loyki-network-core-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(37, 99, 235, 0.18);
}

.loyki-network-core-ring.ring-a {
    inset: -16px;
    border-style: dashed;
    animation: loykiCoreRotate 24s linear infinite;
}

.loyki-network-core-ring.ring-b {
    inset: -31px;
    border-color: rgba(14, 165, 233, 0.10);
    animation: loykiCoreRotateReverse 34s linear infinite;
}

.loyki-network-core-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(37, 99, 235, 0.17);
    border-radius: 50%;
    background:
        radial-gradient(
            circle at 38% 28%,
            #ffffff 0%,
            #f5faff 58%,
            #eaf5ff 100%
        );
    box-shadow:
        0 22px 50px rgba(37, 99, 235, 0.15),
        0 0 0 9px rgba(37, 99, 235, 0.035),
        inset 0 1px 0 #ffffff;
    animation: loykiCoreBreath 4s ease-in-out infinite;
}

.loyki-core-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 7px;
    border-radius: 13px;
    background:
        linear-gradient(
            135deg,
            #2563eb,
            #0ea5e9
        );
    font-family: "Sora", sans-serif;
    font-size: 0.83rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: #ffffff;
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.25);
}

.loyki-network-core strong {
    font-family: "Sora", "Inter", sans-serif;
    font-size: 1.22rem;
    color: #0f172a;
}

.loyki-network-core small {
    margin-top: 4px;
    font-family: "Inter", sans-serif;
    font-size: 0.53rem;
    font-weight: 750;
    letter-spacing: 0.12em;
    color: #2563eb;
}


/* ----------------------------------------------------------
   SYSTEM NODES
   ---------------------------------------------------------- */

.loyki-network-node {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 11px;
    width: 168px;
    padding: 12px 14px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow:
        0 14px 32px rgba(15, 23, 42, 0.075),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    opacity: 0;
    transform: translateY(12px) scale(0.96);
    animation:
        loykiNodeReveal
        0.7s
        cubic-bezier(.2,.8,.2,1)
        forwards;
    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.loyki-network-node:hover {
    z-index: 7;
    transform: translateY(-4px) scale(1.025);
    border-color: rgba(14, 165, 233, 0.30);
    box-shadow:
        0 20px 42px rgba(15, 23, 42, 0.11),
        0 0 0 4px rgba(14, 165, 233, 0.04);
}

.loyki-network-node > span:last-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.loyki-network-node small {
    margin-bottom: 1px;
    font-family: "Sora", "Inter", sans-serif;
    font-size: 0.49rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    color: #2563eb;
}

.loyki-network-node strong {
    font-family: "Sora", "Inter", sans-serif;
    font-size: 0.82rem;
    line-height: 1.2;
    color: #0f172a;
}

.loyki-network-node em {
    margin-top: 2px;
    overflow: hidden;
    font-family: "Inter", sans-serif;
    font-size: 0.62rem;
    font-style: normal;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #64748b;
}

.loyki-node-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background:
        linear-gradient(
            145deg,
            rgba(37, 99, 235, 0.10),
            rgba(14, 165, 233, 0.06)
        );
}

.loyki-node-icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: #2563eb;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.node-knowledge {
    left: 5%;
    top: 15%;
    animation-delay: 0.35s;
}

.node-models {
    right: 5%;
    top: 15%;
    animation-delay: 0.48s;
}

.node-agents {
    left: 2%;
    top: 61%;
    animation-delay: 0.61s;
}

.node-approval {
    right: 2%;
    top: 61%;
    animation-delay: 0.74s;
}

.node-actions {
    left: 50%;
    bottom: 4%;
    transform:
        translateX(-50%)
        translateY(12px)
        scale(0.96);
    animation-name: loykiNodeRevealCentered;
    animation-delay: 0.87s;
}

.node-actions:hover {
    transform:
        translateX(-50%)
        translateY(-4px)
        scale(1.025);
}


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

.loyki-network-trust {
    position: absolute;
    z-index: 3;
    left: 25px;
    bottom: 22px;
    display: flex;
    gap: 7px;
}

.loyki-network-trust span {
    padding: 5px 8px;
    border: 1px solid rgba(37, 99, 235, 0.08);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.65);
    font-family: "Inter", sans-serif;
    font-size: 0.48rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    color: #94a3b8;
}


/* ----------------------------------------------------------
   AMBIENT DATA PULSES
   ---------------------------------------------------------- */

.loyki-network-pulse {
    position: absolute;
    z-index: 2;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22d3ee;
    box-shadow:
        0 0 0 4px rgba(34, 211, 238, 0.08),
        0 0 18px rgba(34, 211, 238, 0.70);
    pointer-events: none;
}

.pulse-1 {
    left: 29%;
    top: 35%;
    animation: loykiDataPulseOne 5.5s ease-in-out infinite;
}

.pulse-2 {
    right: 28%;
    top: 37%;
    animation: loykiDataPulseTwo 6.2s ease-in-out 1s infinite;
}

.pulse-3 {
    left: 49%;
    top: 62%;
    animation: loykiDataPulseThree 5.8s ease-in-out 0.5s infinite;
}


/* ----------------------------------------------------------
   HERO V2 KEYFRAMES
   ---------------------------------------------------------- */

@keyframes loykiNetworkGlow {
    0%,
    100% {
        opacity: 0.55;
        transform:
            translate(-50%, -50%)
            scale(0.96);
    }

    50% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            scale(1.04);
    }
}

@keyframes loykiNetworkLineReveal {
    from {
        opacity: 0;
        stroke-dashoffset: 80;
    }

    to {
        opacity: 1;
        stroke-dashoffset: 0;
    }
}

@keyframes loykiNetworkFlow {
    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -180;
    }
}

@keyframes loykiNodeReveal {
    from {
        opacity: 0;
        transform:
            translateY(12px)
            scale(0.96);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}

@keyframes loykiNodeRevealCentered {
    from {
        opacity: 0;
        transform:
            translateX(-50%)
            translateY(12px)
            scale(0.96);
    }

    to {
        opacity: 1;
        transform:
            translateX(-50%)
            translateY(0)
            scale(1);
    }
}

@keyframes loykiCoreRotate {
    to {
        transform: rotate(360deg);
    }
}

@keyframes loykiCoreRotateReverse {
    to {
        transform: rotate(-360deg);
    }
}

@keyframes loykiCoreBreath {
    0%,
    100% {
        box-shadow:
            0 22px 50px rgba(37, 99, 235, 0.13),
            0 0 0 9px rgba(37, 99, 235, 0.03),
            inset 0 1px 0 #ffffff;
    }

    50% {
        box-shadow:
            0 25px 60px rgba(37, 99, 235, 0.19),
            0 0 0 14px rgba(14, 165, 233, 0.045),
            inset 0 1px 0 #ffffff;
    }
}

@keyframes loykiDataPulseOne {
    0%,
    100% {
        transform: translate(0, 0);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    55% {
        transform: translate(54px, 45px);
        opacity: 1;
    }

    80% {
        opacity: 0;
    }
}

@keyframes loykiDataPulseTwo {
    0%,
    100% {
        transform: translate(0, 0);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    55% {
        transform: translate(-55px, 43px);
        opacity: 1;
    }

    80% {
        opacity: 0;
    }
}

@keyframes loykiDataPulseThree {
    0%,
    100% {
        transform: translate(0, 0);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    55% {
        transform: translate(0, -52px);
        opacity: 1;
    }

    80% {
        opacity: 0;
    }
}


/* ----------------------------------------------------------
   HERO V2 RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 1180px) {

    .investor-hero-layout {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(500px, 1.1fr);
        gap: 42px;
    }

    .investor-hero-copy h1 {
        font-size: clamp(2.8rem, 4.8vw, 4.5rem);
    }
}

@media (max-width: 1020px) {

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

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

    .investor-hero .hero-content {
        max-width: 820px;
    }

    .loyki-network {
        width: 100%;
        max-width: 760px;
        margin: 18px auto 0;
    }

    .loyki-network-frame {
        margin: 0 auto;
        transform: none;
    }
}

@media (max-width: 680px) {

    .investor-hero {
        padding: 54px 0 70px;
    }

    .investor-hero-copy h1 {
        font-size: clamp(2.55rem, 12vw, 3.7rem);
    }

    .investor-hero-principles {
        margin-top: 22px;
    }

    .loyki-network {
        margin-top: 8px;
    }

    .loyki-network-frame {
        min-height: 620px;
        aspect-ratio: auto;
        border-radius: 24px;
    }

    .loyki-network-core {
        width: 132px;
        height: 132px;
        top: 48%;
    }

    .loyki-network-node {
        width: 142px;
        padding: 10px;
    }

    .node-knowledge {
        left: 4%;
        top: 14%;
    }

    .node-models {
        right: 4%;
        top: 14%;
    }

    .node-agents {
        left: 3%;
        top: 62%;
    }

    .node-approval {
        right: 3%;
        top: 62%;
    }

    .node-actions {
        bottom: 5%;
    }

    .loyki-network-trust {
        display: none;
    }
}


/* ----------------------------------------------------------
   REDUCED MOTION
   ---------------------------------------------------------- */

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

    .loyki-network-glow,
    .network-path,
    .loyki-network-core-ring,
    .loyki-network-core-inner,
    .loyki-network-node,
    .loyki-network-pulse {
        animation: none !important;
    }

    .network-path,
    .loyki-network-node {
        opacity: 1;
    }
}
/* ==========================================================
   LOYKI INVESTOR EXPERIENCE V2.1
   Compact hero + branded core + visual investment thesis
   ========================================================== */


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

.investor-hero {
    min-height: auto;
    padding: 64px 0 70px;
}

.investor-hero-layout {
    grid-template-columns:
        minmax(0, 0.96fr)
        minmax(520px, 1.04fr);

    gap: clamp(40px, 5vw, 76px);
    align-items: center;
}

.investor-hero .hero-content {
    max-width: 700px;
}

.investor-hero-copy h1 {
    max-width: 720px;

    margin-bottom: 24px;

    font-size:
        clamp(
            3rem,
            4.55vw,
            4.7rem
        );

    line-height: 1.01;
    letter-spacing: -0.052em;
}

.investor-hero-copy .hero-lead {
    max-width: 650px;

    margin-bottom: 0;

    color: #53627a;
}

.investor-hero-principles {
    margin-top: 25px;
}

.investor-hero .hero-actions {
    margin-top: 27px;
}

.investor-hero .button-hero-secondary {
    border-color:
        rgba(37, 99, 235, 0.22);

    background:
        rgba(255, 255, 255, 0.72);

    color: #1648b8;
}

.investor-hero .button-hero-secondary:hover {
    border-color:
        rgba(37, 99, 235, 0.42);

    background: #ffffff;
}


/* ----------------------------------------------------------
   REAL LOYKI BRAND IN TRUSTED CORE
   ---------------------------------------------------------- */

.loyki-core-brand {
    width: 58px;
    height: 58px;

    margin-bottom: 5px;

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

    border-radius: 0;

    background: transparent;

    box-shadow: none;
}

.loyki-core-brand img {
    display: block;

    width: 58px;
    height: 58px;

    object-fit: contain;
}

.loyki-network-core strong {
    font-size: 1.3rem;
}

.loyki-network-core small {
    margin-top: 3px;
}


/* ----------------------------------------------------------
   NETWORK PROPORTIONS
   ---------------------------------------------------------- */

.loyki-network-frame {
    max-width: 670px;
}

.loyki-network-glow {
    width: 82%;
}


/* ----------------------------------------------------------
   INVESTOR PAGE RHYTHM
   ---------------------------------------------------------- */

.investor-section {
    padding: 80px 0;
}

.investor-section + .investor-section {
    margin-top: 0;
}


/* ----------------------------------------------------------
   INVESTMENT THESIS
   ---------------------------------------------------------- */

.investor-thesis-v21 {
    padding: 58px 0 62px;

    overflow: hidden;

    border-top:
        1px solid rgba(15, 23, 42, 0.055);

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(37, 99, 235, 0.045),
            transparent 34%
        ),
        #ffffff;
}

.investor-thesis-heading {
    max-width: 1080px;

    margin: 0 auto;

    text-align: center;
}

.investor-thesis-v21 h2 {
    max-width: 1020px;

    margin:
        12px auto
        19px;

    font-size:
        clamp(
            2.15rem,
            3.55vw,
            3.5rem
        );
}

.investor-thesis-v21 h2 span {
    display: block;

    color: #1765f3;
}

.investor-thesis-v21 .investor-lead {
    max-width: 920px;

    margin:
        0 auto
        38px;

    font-size: 1rem;
    line-height: 1.7;

    color: #64748b;
}


/* ----------------------------------------------------------
   THESIS PRINCIPLES
   ---------------------------------------------------------- */

.investor-thesis-principles {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    max-width: 1180px;

    margin: 0 auto;

    padding-top: 28px;

    border-top:
        1px solid rgba(15, 23, 42, 0.065);
}

.investor-thesis-principle {
    position: relative;

    display: grid;

    grid-template-columns:
        52px
        minmax(0, 1fr);

    gap: 17px;

    padding:
        4px
        clamp(22px, 3vw, 38px);
}

.investor-thesis-principle:first-child {
    padding-left: 0;
}

.investor-thesis-principle:last-child {
    padding-right: 0;
}

.investor-thesis-principle +
.investor-thesis-principle {
    border-left:
        1px solid rgba(37, 99, 235, 0.12);
}

.investor-thesis-icon {
    width: 52px;
    height: 52px;

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

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            rgba(37, 99, 235, 0.11),
            rgba(14, 165, 233, 0.055)
        );

    box-shadow:
        inset 0 0 0 1px
        rgba(37, 99, 235, 0.06);

    transition:
        transform 0.28s ease,
        background 0.28s ease;
}

.investor-thesis-principle:hover
.investor-thesis-icon {
    transform:
        translateY(-3px)
        scale(1.04);

    background:
        linear-gradient(
            145deg,
            rgba(37, 99, 235, 0.16),
            rgba(14, 165, 233, 0.08)
        );
}

.investor-thesis-icon svg {
    width: 25px;
    height: 25px;

    fill: none;

    stroke: #1765f3;
    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.investor-thesis-principle small {
    display: block;

    margin-bottom: 5px;

    font-family:
        "Sora",
        "Inter",
        sans-serif;

    font-size: 0.59rem;
    font-weight: 750;

    letter-spacing: 0.11em;

    color: #1648b8;
}

.investor-thesis-principle strong {
    display: block;

    margin-bottom: 5px;

    font-family:
        "Sora",
        "Inter",
        sans-serif;

    font-size: 0.91rem;
    line-height: 1.35;

    color: #0f172a;
}

.investor-thesis-principle p {
    margin: 0;

    font-size: 0.78rem;
    line-height: 1.55;

    color: #64748b;
}


/* ----------------------------------------------------------
   DESKTOP HEIGHT CONTROL
   ---------------------------------------------------------- */

@media (min-width: 1021px) {

    .investor-hero {
        min-height: 0;
    }

    .investor-hero-layout {
        min-height: 0;
    }
}


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

@media (max-width: 1180px) {

    .investor-hero-layout {
        grid-template-columns:
            minmax(0, 0.92fr)
            minmax(480px, 1.08fr);

        gap: 34px;
    }

    .investor-thesis-principle {
        padding-inline: 20px;
    }
}


@media (max-width: 1020px) {

    .investor-hero {
        padding:
            60px
            0
            70px;
    }

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

    .investor-section {
        padding: 70px 0;
    }

    .investor-thesis-principles {
        grid-template-columns: 1fr;

        max-width: 720px;
    }

    .investor-thesis-principle,
    .investor-thesis-principle:first-child,
    .investor-thesis-principle:last-child {
        padding: 23px 0;
    }

    .investor-thesis-principle +
    .investor-thesis-principle {
        border-left: 0;

        border-top:
            1px solid rgba(37, 99, 235, 0.10);
    }
}


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

@media (max-width: 680px) {

    .investor-hero {
        padding:
            46px
            0
            56px;
    }

    .investor-section {
        padding: 56px 0;
    }

    .investor-thesis-v21 {
        padding:
            50px
            0
            54px;
    }

    .investor-thesis-v21 .investor-lead {
        margin-bottom: 24px;
    }

    .investor-thesis-principle {
        grid-template-columns:
            46px
            minmax(0, 1fr);

        gap: 14px;
    }

    .investor-thesis-icon {
        width: 46px;
        height: 46px;
    }

    .investor-thesis-icon svg {
        width: 22px;
        height: 22px;
    }
}


/* ----------------------------------------------------------
   REDUCED MOTION
   ---------------------------------------------------------- */

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

    .investor-thesis-icon {
        transition: none;
    }
}
/* ==========================================================
   LOYKI INVESTOR HERO BRAND FIX V1
   Visible CI headline + authentic LoyKI master wordmark
   ========================================================== */


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

.investor-hero .investor-hero-copy h1 {
    color: #0A0F1C;
}

.investor-hero-title-main,
.investor-hero-title-accent {
    display: block;
}

.investor-hero-title-main {
    color: #0A0F1C;
}

.investor-hero-title-accent {
    margin-top: 0.08em;

    color: #166BFF;
}


/* ----------------------------------------------------------
   AUTHENTIC LOYKI MASTERLOGO IN TRUSTED CORE
   ---------------------------------------------------------- */

.loyki-core-masterlogo {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 112px;
    height: auto;

    margin:
        0 auto
        5px;
}

.loyki-core-masterlogo img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
}

.loyki-network-core-inner > small {
    display: block;

    margin-top: 1px;

    font-family:
        "Sora",
        "Inter",
        sans-serif;

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

    line-height: 1;

    letter-spacing: 0.14em;

    color: #64748b;
}


/* ----------------------------------------------------------
   CORE PROPORTION
   ---------------------------------------------------------- */

.loyki-network-core-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 680px) {

    .loyki-core-masterlogo {
        width: 96px;
    }

    .investor-hero-title-accent {
        margin-top: 0.06em;
    }
}
/* ==========================================================
   LOYKI INVESTOR HEADING STATUS FIX V1
   Main-site heading language + collision-free phase indicator
   ========================================================== */


/* ----------------------------------------------------------
   TWO-COLOR HEADING SYSTEM
   Same visual principle as loyki.ai/de/
   ---------------------------------------------------------- */

.investor-heading-split {
    color: var(--color-text);
}

.investor-heading-split > span {
    display: block;
    color: var(--color-blue);
}


/* Dark investor section:
   retain readable white first line, LoyKI accent second line. */

.investor-section-dark .investor-heading-split,
.investor-heading-split-dark {
    color: var(--color-white);
}

.investor-section-dark .investor-heading-split > span,
.investor-heading-split-dark > span {
    color: #78aaff;
}


/* ----------------------------------------------------------
   HERO
   Use the same central LoyKI blue token.
   ---------------------------------------------------------- */

.investor-hero-title-main {
    color: var(--color-text);
}

.investor-hero-title-accent {
    color: var(--color-blue);
}


/* ----------------------------------------------------------
   DEVELOPMENT STATUS
   Text and orbit now own separate grid areas.
   No absolute overlap.
   ---------------------------------------------------------- */

.investor-development-status {
    min-height: 310px;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        176px;

    align-items: center;
    gap: 30px;

    padding: 42px;
}

.investor-development-status-copy {
    min-width: 0;
}

.investor-development-status-copy
.investor-development-status-label {
    margin: 0 0 14px;

    color: var(--color-blue);
}

.investor-development-status-copy > strong {
    display: block;

    margin-bottom: 18px;

    font-family:
        "Sora",
        "Inter",
        sans-serif;

    font-size:
        clamp(
            1.55rem,
            2.4vw,
            2.2rem
        );

    line-height: 1.15;
    letter-spacing: -0.035em;

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

.investor-development-status-copy >
p:not(.investor-development-status-label) {
    max-width: 390px;

    margin: 0;

    font-size: 0.95rem;
    line-height: 1.7;

    color: #64748b;
}


/* Remove the former floating positioning completely. */

.investor-development-status
.investor-development-orbit {
    position: relative;

    width: 164px;
    height: 164px;

    right: auto;
    top: auto;
    bottom: auto;
    left: auto;

    justify-self: center;

    transform: none;
}


/* ----------------------------------------------------------
   TABLET
   Keep two columns while enough width exists.
   ---------------------------------------------------------- */

@media (max-width: 760px) {

    .investor-development-status {
        grid-template-columns: 1fr;

        min-height: 0;

        gap: 34px;

        padding: 30px;
    }

    .investor-development-status-copy >
    p:not(.investor-development-status-label) {
        max-width: none;
    }

    .investor-development-status
    .investor-development-orbit {
        width: 150px;
        height: 150px;

        right: auto;
        top: auto;
        bottom: auto;
        left: auto;

        justify-self: center;

        transform: none;
    }
}


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

@media (max-width: 520px) {

    .investor-development-status {
        padding: 26px 22px;
    }

    .investor-development-status-copy > strong {
        font-size: 1.55rem;
    }
}
/* ==========================================================
   LOYKI INVESTOR CI STATUS CTA V2
   Exact loyki.ai heading blue + collision-proof status layout
   ========================================================== */


/* ----------------------------------------------------------
   EXACT LOYKI.AI HEADING COLOR
   Canonical main-site value: #166bff
   ---------------------------------------------------------- */

.investor-hero .investor-hero-title-accent,
.investor-section .investor-heading-split > span,
.investor-thesis-v21 h2.investor-heading-split > span,
.investor-section-dark .investor-heading-split > span,
.investor-heading-split-dark > span {
    color: #166bff;
}


/* Keep first heading part consistent with loyki.ai */

.investor-hero .investor-hero-title-main,
.investor-section:not(.investor-section-dark)
.investor-heading-split {
    color: #0f172a;
}


/* Dark section keeps white primary text but uses
   the SAME canonical LoyKI blue for its accent. */

.investor-section-dark .investor-heading-split,
.investor-heading-split-dark {
    color: #ffffff;
}


/* ----------------------------------------------------------
   DEVELOPMENT STATUS
   Single-column internal layout.
   Orbit receives its own row and can never cover copy.
   ---------------------------------------------------------- */

.investor-development-status {
    display: grid;

    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;

    align-items: start;

    gap: 30px;

    min-height: 0;

    padding: 42px;
}

.investor-development-status-copy {
    grid-column: 1;
    grid-row: 1;

    min-width: 0;
    width: 100%;
}

.investor-development-status-copy > strong {
    max-width: none;

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

.investor-development-status-copy >
p:not(.investor-development-status-label) {
    max-width: 520px;
}


/* Orbit is now part of normal document flow.
   No absolute positioning, no text collision. */

.investor-development-status
.investor-development-orbit {
    position: relative;

    grid-column: 1;
    grid-row: 2;

    width: 164px;
    height: 164px;

    right: auto;
    top: auto;
    bottom: auto;
    left: auto;

    margin: 0 auto;

    justify-self: center;
    align-self: center;

    transform: none;
}


/* ----------------------------------------------------------
   TABLET / MOBILE
   Preserve the same collision-proof structure.
   ---------------------------------------------------------- */

@media (max-width: 900px) {

    .investor-development-status {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;

        min-height: 0;

        padding: 34px 30px;

        gap: 28px;
    }

    .investor-development-status
    .investor-development-orbit {
        position: relative;

        grid-column: 1;
        grid-row: 2;

        width: 150px;
        height: 150px;

        right: auto;
        top: auto;
        bottom: auto;
        left: auto;

        margin: 0 auto;

        transform: none;
    }
}


@media (max-width: 520px) {

    .investor-development-status {
        padding: 28px 22px;
    }

    .investor-development-status
    .investor-development-orbit {
        width: 142px;
        height: 142px;
    }
}
/* ==========================================================
   LOYKI INVESTOR EXPERIENCE V3
   Platform Map / Agentic Transition / Business Expansion /
   Strategic Value
   ========================================================== */


/* ----------------------------------------------------------
   SHARED
   ---------------------------------------------------------- */

.investor-platform-v3,
.investor-business-v3,
.investor-strategic-v3 {
    overflow: hidden;
}

.investor-platform-intro,
.investor-business-intro {
    max-width: 760px;
    margin-bottom: 48px;
}


/* ----------------------------------------------------------
   PLATFORM MAP
   ---------------------------------------------------------- */

.investor-platform-map {
    position: relative;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(240px, 0.9fr)
        minmax(0, 1fr);

    grid-template-areas:
        "knowledge core model"
        "local     core approval"
        "trusted   core audit";

    gap: 16px;

    margin-top: 44px;
}

.platform-node {
    position: relative;
    z-index: 2;

    min-height: 156px;

    padding: 24px;

    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.96),
            rgba(247,250,255,0.9)
        );

    box-shadow:
        0 18px 48px rgba(15,23,42,0.055);

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

.platform-node:hover {
    transform: translateY(-5px);

    border-color: rgba(22,107,255,0.28);

    box-shadow:
        0 24px 60px rgba(15,23,42,0.1);
}

.platform-node-index {
    position: absolute;

    top: 20px;
    right: 20px;

    font-family: "Sora","Inter",sans-serif;
    font-size: 0.72rem;
    font-weight: 700;

    color: rgba(22,107,255,0.5);
}

.platform-node small,
.business-pillar small,
.strategic-value-grid small,
.agentic-stage small {
    display: block;

    margin-bottom: 9px;

    font-family: "Sora","Inter",sans-serif;
    font-size: 0.62rem;
    font-weight: 700;

    letter-spacing: 0.13em;

    color: #166bff;
}

.platform-node h3 {
    margin-bottom: 10px;

    font-size: 1.05rem;

    color: #0f172a;
}

.platform-node p {
    margin: 0;

    font-size: 0.88rem;
    line-height: 1.62;

    color: #64748b;
}

.platform-node-knowledge { grid-area: knowledge; }
.platform-node-model     { grid-area: model; }
.platform-node-local     { grid-area: local; }
.platform-node-approval  { grid-area: approval; }
.platform-node-core      { grid-area: trusted; }
.platform-node-audit     { grid-area: audit; }


.platform-core {
    grid-area: core;

    position: relative;
    z-index: 3;

    min-height: 100%;

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

    padding: 38px 28px;

    overflow: hidden;

    border: 1px solid rgba(22,107,255,0.2);
    border-radius: 28px;

    text-align: center;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(0,212,255,0.12),
            transparent 34%
        ),
        linear-gradient(
            160deg,
            #f8fbff,
            #eef5ff
        );

    box-shadow:
        0 28px 80px rgba(22,107,255,0.11);
}

.platform-core-glow {
    position: absolute;

    width: 190px;
    height: 190px;

    border: 1px solid rgba(22,107,255,0.14);
    border-radius: 50%;

    animation:
        loykiPlatformPulse
        4.8s ease-in-out
        infinite;
}

.platform-core img {
    position: relative;
    z-index: 2;

    width: 150px;
    height: auto;

    margin-bottom: 18px;
}

.platform-core strong {
    position: relative;
    z-index: 2;

    margin-bottom: 10px;

    font-family: "Sora","Inter",sans-serif;
    font-size: 0.68rem;
    font-weight: 700;

    letter-spacing: 0.14em;

    color: #166bff;
}

.platform-core > span:last-child {
    position: relative;
    z-index: 2;

    max-width: 190px;

    font-size: 0.82rem;
    line-height: 1.55;

    color: #64748b;
}

.platform-flow {
    position: absolute;
    z-index: 1;

    pointer-events: none;

    opacity: 0.6;
}

.platform-flow-horizontal {
    top: 50%;
    left: 12%;
    right: 12%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(22,107,255,0.35),
            rgba(0,212,255,0.65),
            rgba(22,107,255,0.35),
            transparent
        );
}

.platform-flow-vertical {
    top: 10%;
    bottom: 10%;
    left: 50%;

    width: 1px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(22,107,255,0.3),
            rgba(0,212,255,0.6),
            rgba(22,107,255,0.3),
            transparent
        );
}

.platform-principle {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

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

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

    background: #f8fbff;
}

.platform-principle > span {
    flex: 0 0 auto;

    font-family: "Sora","Inter",sans-serif;
    font-size: 0.62rem;
    font-weight: 700;

    letter-spacing: 0.14em;

    color: #166bff;
}

.platform-principle strong {
    font-family: "Sora","Inter",sans-serif;
    font-size: 1rem;

    color: #0f172a;
}


@keyframes loykiPlatformPulse {

    0%,
    100% {
        transform: scale(0.9);
        opacity: 0.35;
    }

    50% {
        transform: scale(1.08);
        opacity: 0.8;
    }
}


/* ----------------------------------------------------------
   WHY NOW / AGENTIC TRANSITION
   ---------------------------------------------------------- */

.investor-why-v3 .container {
    max-width: 1240px;
}

.investor-why-copy {
    max-width: 850px;
}

.agentic-transition {
    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        28px
        minmax(0,1fr)
        28px
        minmax(0,1fr)
        28px
        minmax(0,1fr);

    align-items: stretch;

    gap: 10px;

    margin-top: 52px;
}

.agentic-stage {
    position: relative;

    min-height: 205px;

    padding: 24px 22px;

    border:
        1px solid
        rgba(255,255,255,0.12);

    border-radius: 20px;

    background:
        rgba(255,255,255,0.045);

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

.agentic-stage:hover {
    transform: translateY(-5px);

    border-color:
        rgba(0,212,255,0.3);

    background:
        rgba(255,255,255,0.075);
}

.agentic-stage-gate {
    border-color:
        rgba(22,107,255,0.5);

    background:
        linear-gradient(
            155deg,
            rgba(22,107,255,0.18),
            rgba(0,212,255,0.055)
        );
}

.agentic-stage-number {
    display: block;

    margin-bottom: 26px;

    font-family: "Sora","Inter",sans-serif;
    font-size: 0.72rem;
    font-weight: 700;

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

.agentic-stage h3 {
    margin-bottom: 10px;

    font-size: 1.08rem;

    color: #ffffff;
}

.agentic-stage p {
    margin: 0;

    font-size: 0.84rem;
    line-height: 1.62;

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

.agentic-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 1.35rem;

    color: rgba(0,212,255,0.7);
}

.agentic-thesis {
    display: grid;
    grid-template-columns: 64px 1fr;

    align-items: center;

    gap: 20px;

    max-width: 920px;

    margin-top: 38px;
}

.agentic-thesis-line {
    height: 2px;

    background:
        linear-gradient(
            90deg,
            #166bff,
            #00d4ff
        );
}

.agentic-thesis p {
    margin: 0;

    font-family: "Sora","Inter",sans-serif;
    font-size: 1.08rem;
    line-height: 1.55;

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

.investor-why-secondary {
    max-width: 800px;

    margin-top: 30px;

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


/* ----------------------------------------------------------
   BUSINESS MODEL
   ---------------------------------------------------------- */

.business-pillars {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));

    gap: 14px;

    margin-top: 42px;
}

.business-pillar {
    min-height: 220px;

    padding: 26px 24px;

    border: 1px solid rgba(15,23,42,0.08);
    border-radius: 20px;

    background:
        linear-gradient(
            150deg,
            #ffffff,
            #f8fbff
        );

    box-shadow:
        0 18px 45px rgba(15,23,42,0.05);

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

.business-pillar:hover {
    transform: translateY(-5px);

    border-color: rgba(22,107,255,0.28);
}

.business-pillar > span {
    display: block;

    margin-bottom: 30px;

    font-family: "Sora","Inter",sans-serif;
    font-size: 0.72rem;
    font-weight: 700;

    color: rgba(22,107,255,0.48);
}

.business-pillar h3 {
    margin-bottom: 10px;

    font-size: 1.05rem;

    color: #0f172a;
}

.business-pillar p {
    margin: 0;

    font-size: 0.86rem;
    line-height: 1.62;

    color: #64748b;
}

.business-expansion {
    margin-top: 22px;
    padding: 28px;

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            #0a0f1c,
            #111c31
        );

    box-shadow:
        0 26px 70px rgba(10,15,28,0.13);
}

.business-expansion-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 26px;
}

.business-expansion-head > span {
    font-family: "Sora","Inter",sans-serif;
    font-size: 0.62rem;
    font-weight: 700;

    letter-spacing: 0.14em;

    color: #00d4ff;
}

.business-expansion-head strong {
    font-family: "Sora","Inter",sans-serif;
    font-size: 0.95rem;

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

.business-expansion-flow {
    display: grid;

    grid-template-columns:
        1fr 28px
        1fr 28px
        1fr 28px
        1fr;

    align-items: center;

    gap: 8px;
}

.business-expansion-flow article {
    min-height: 108px;

    padding: 17px;

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

    background: rgba(255,255,255,0.045);
}

.business-expansion-flow article > span {
    display: block;

    margin-bottom: 14px;

    font-size: 0.68rem;

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

.business-expansion-flow small {
    display: block;

    margin-bottom: 5px;

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

    letter-spacing: 0.12em;

    color: #00d4ff;
}

.business-expansion-flow strong {
    font-size: 0.85rem;

    color: #ffffff;
}

.business-expansion-flow i {
    text-align: center;

    font-style: normal;
    font-size: 1.15rem;

    color: #00d4ff;
}


/* ----------------------------------------------------------
   STRATEGIC VALUE
   ---------------------------------------------------------- */

.investor-strategic-v3 {
    background:
        linear-gradient(
            180deg,
            #f7faff 0%,
            #ffffff 100%
        );
}

.strategic-heading {
    display: grid;
    grid-template-columns:
        minmax(0,1.15fr)
        minmax(300px,0.85fr);

    align-items: end;

    gap: 60px;

    margin-bottom: 48px;
}

.strategic-heading .investor-lead {
    margin: 0 0 8px;
}

.strategic-value-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));

    gap: 14px;
}

.strategic-value-grid article {
    min-height: 225px;

    padding: 25px;

    border: 1px solid rgba(15,23,42,0.075);
    border-radius: 20px;

    background: rgba(255,255,255,0.9);

    box-shadow:
        0 18px 45px rgba(15,23,42,0.045);
}

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

    width: 34px;
    height: 34px;

    margin-bottom: 26px;

    border-radius: 10px;

    font-family: "Sora","Inter",sans-serif;
    font-size: 0.62rem;
    font-weight: 700;

    color: #166bff;

    background: rgba(22,107,255,0.08);
}

.strategic-value-grid h3 {
    margin-bottom: 10px;

    font-size: 1rem;
    line-height: 1.35;

    color: #0f172a;
}

.strategic-value-grid p {
    margin: 0;

    font-size: 0.85rem;
    line-height: 1.62;

    color: #64748b;
}

.strategic-statement {
    display: grid;
    grid-template-columns: auto 1fr;

    align-items: center;

    gap: 28px;

    margin-top: 22px;
    padding: 28px 32px;

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            #0a0f1c,
            #13213a
        );
}

.strategic-statement > span {
    padding-right: 28px;

    border-right:
        1px solid
        rgba(255,255,255,0.14);

    font-family: "Sora","Inter",sans-serif;
    font-size: 0.72rem;
    font-weight: 700;

    letter-spacing: 0.16em;

    color: #00d4ff;
}

.strategic-statement p {
    margin: 0;

    font-family: "Sora","Inter",sans-serif;
    font-size: 1.15rem;
    line-height: 1.5;

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

.strategic-statement strong {
    color: #ffffff;
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 1040px) {

    .investor-platform-map {
        grid-template-columns: 1fr 1fr;

        grid-template-areas:
            "core      core"
            "knowledge model"
            "local     approval"
            "trusted   audit";
    }

    .platform-core {
        min-height: 280px;
    }

    .business-pillars,
    .strategic-value-grid {
        grid-template-columns: 1fr 1fr;
    }

    .agentic-transition {
        grid-template-columns: 1fr 1fr;

        gap: 14px;
    }

    .agentic-arrow {
        display: none;
    }

    .business-expansion-flow {
        grid-template-columns: 1fr 1fr;

        gap: 10px;
    }

    .business-expansion-flow i {
        display: none;
    }
}


@media (max-width: 760px) {

    .investor-platform-map {
        grid-template-columns: 1fr;

        grid-template-areas:
            "core"
            "knowledge"
            "model"
            "local"
            "approval"
            "trusted"
            "audit";
    }

    .platform-flow {
        display: none;
    }

    .platform-principle,
    .business-expansion-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .agentic-transition,
    .business-pillars,
    .business-expansion-flow,
    .strategic-value-grid,
    .strategic-heading {
        grid-template-columns: 1fr;
    }

    .agentic-stage {
        min-height: 0;
    }

    .agentic-thesis {
        grid-template-columns: 40px 1fr;
    }

    .strategic-heading {
        gap: 24px;
    }

    .strategic-statement {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .strategic-statement > span {
        padding-right: 0;
        padding-bottom: 16px;

        border-right: 0;
        border-bottom:
            1px solid
            rgba(255,255,255,0.14);
    }
}


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

    .platform-core-glow {
        animation: none;
    }

    .platform-node,
    .agentic-stage,
    .business-pillar {
        transition: none;
    }
}
/* ==========================================================
   LOYKI INVESTOR HERO DARK V1
   Investor hero aligned with LoyKI.ai visual language
   Header remains untouched.
   ========================================================== */

.investor-hero {
    position: relative;
    overflow: hidden;
    color: #ffffff;

    background:
        radial-gradient(
            circle at 76% 38%,
            rgba(22, 107, 255, 0.20) 0%,
            rgba(22, 107, 255, 0.08) 24%,
            transparent 50%
        ),
        radial-gradient(
            circle at 18% 82%,
            rgba(0, 212, 255, 0.08) 0%,
            transparent 36%
        ),
        linear-gradient(
            135deg,
            #08111f 0%,
            #0b1729 48%,
            #0d1d35 100%
        );

    border-bottom: 1px solid rgba(22, 107, 255, 0.16);
}


/* subtle technical background */

.investor-hero::before {
    content: "";
    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: 0.25;

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

    background-size: 48px 48px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,0.75),
            transparent 95%
        );
}


/* ambient LoyKI glow */

.investor-hero::after {
    content: "";

    position: absolute;

    width: 560px;
    height: 560px;

    right: -190px;
    top: -220px;

    pointer-events: none;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0,212,255,0.10),
            rgba(22,107,255,0.04) 42%,
            transparent 70%
        );

    filter: blur(8px);
}

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


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

.investor-hero .eyebrow {
    color: #00d4ff;
}

.investor-hero .investor-hero-title-main {
    color: #ffffff;
}

.investor-hero .investor-hero-title-accent {
    color: #166bff;
}

.investor-hero .investor-hero-copy > p:not(.eyebrow) {
    color: rgba(255,255,255,0.74);
}


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

.investor-hero .investor-hero-principles span {
    color: rgba(255,255,255,0.80);

    border-color:
        rgba(255,255,255,0.11);

    background:
        rgba(255,255,255,0.055);

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

.investor-hero .investor-hero-principles span::before {
    background: #00d4ff;

    box-shadow:
        0 0 10px
        rgba(0,212,255,0.38);
}


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

.investor-hero .btn-primary {
    color: #ffffff;

    border-color: #166bff;

    background:
        linear-gradient(
            135deg,
            #166bff,
            #3158df
        );

    box-shadow:
        0 14px 34px
        rgba(22,107,255,0.24);
}

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

    box-shadow:
        0 18px 42px
        rgba(22,107,255,0.32);
}

.investor-hero .btn-secondary {
    color: rgba(255,255,255,0.90);

    border-color:
        rgba(255,255,255,0.20);

    background:
        rgba(255,255,255,0.045);

    backdrop-filter: blur(10px);
}

.investor-hero .btn-secondary:hover {
    color: #ffffff;

    border-color:
        rgba(0,212,255,0.38);

    background:
        rgba(255,255,255,0.075);
}


/* ==========================================================
   SOVEREIGN NETWORK
   ========================================================== */

.investor-hero .loyki-network {
    border-color:
        rgba(120,170,255,0.17);

    background:
        radial-gradient(
            circle at 50% 47%,
            rgba(22,107,255,0.12),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            rgba(15,31,54,0.94),
            rgba(9,20,37,0.90)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,0.045),
        0 30px 80px
        rgba(0,0,0,0.24);
}

.investor-hero .loyki-network-label {
    color:
        rgba(255,255,255,0.48);
}

.investor-hero .loyki-network-status {
    color: #7ee7bc;
}

.investor-hero .loyki-network-status::before {
    background: #37d997;

    box-shadow:
        0 0 10px
        rgba(55,217,151,0.55);
}


/* ==========================================================
   NETWORK CONNECTIONS
   ========================================================== */

.investor-hero .loyki-network-line {
    opacity: 0.74;

    border-color:
        rgba(85,153,255,0.34);
}

.investor-hero .loyki-network-line::after {
    background:
        linear-gradient(
            90deg,
            transparent,
            #00d4ff,
            transparent
        );

    box-shadow:
        0 0 12px
        rgba(0,212,255,0.45);
}


/* ==========================================================
   NETWORK NODES
   ========================================================== */

.investor-hero .loyki-network-node {
    color: #ffffff;

    border-color:
        rgba(120,170,255,0.16);

    background:
        linear-gradient(
            145deg,
            rgba(25,43,70,0.94),
            rgba(15,29,50,0.94)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,0.045),
        0 14px 34px
        rgba(0,0,0,0.18);
}

.investor-hero .loyki-network-node:hover {
    border-color:
        rgba(0,212,255,0.38);

    background:
        linear-gradient(
            145deg,
            rgba(28,50,82,0.98),
            rgba(16,34,59,0.98)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,0.06),
        0 18px 42px
        rgba(0,0,0,0.24),
        0 0 30px
        rgba(22,107,255,0.08);
}

.investor-hero .loyki-network-node strong {
    color:
        rgba(255,255,255,0.95);
}

.investor-hero .loyki-network-node small {
    color:
        rgba(255,255,255,0.48);
}


/* ==========================================================
   NETWORK CORE
   ========================================================== */

.investor-hero .loyki-network-core {
    border-color:
        rgba(80,150,255,0.32);

    background:
        radial-gradient(
            circle at 50% 38%,
            rgba(22,107,255,0.22),
            rgba(12,28,50,0.97) 62%
        );

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

        0 0 0 10px
        rgba(22,107,255,0.035),

        0 24px 60px
        rgba(0,0,0,0.24),

        0 0 46px
        rgba(22,107,255,0.09);
}

.investor-hero .loyki-network-core::before {
    border-color:
        rgba(0,212,255,0.16);
}

.investor-hero .loyki-network-core small {
    color:
        rgba(255,255,255,0.48);
}


/* Masterlogo remains authentic */

.investor-hero .loyki-core-masterlogo img {
    filter: none;
}


/* ==========================================================
   NETWORK MICRO LABELS
   ========================================================== */

.investor-hero .loyki-network-footer,
.investor-hero .loyki-network-footer span {
    color:
        rgba(255,255,255,0.38);
}


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

@media (max-width: 900px) {

    .investor-hero {
        background:
            radial-gradient(
                circle at 50% 70%,
                rgba(22,107,255,0.14),
                transparent 42%
            ),
            linear-gradient(
                145deg,
                #08111f,
                #0c1b31
            );
    }
}

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

    .investor-hero .btn-primary,
    .investor-hero .btn-secondary,
    .investor-hero .loyki-network-node {
        transition: none;
    }
}

/* ==========================================================
   LOYKI NETWORK DARK INTEGRATION V1
   Precise dark integration of the existing animated network.
   Structure and animation remain unchanged.
   ========================================================== */


/* ----------------------------------------------------------
   NETWORK FRAME
   Actual visible outer network surface
   ---------------------------------------------------------- */

.investor-hero .loyki-network-frame {
    border-color:
        rgba(77, 145, 255, 0.24);

    background:
        radial-gradient(
            circle at 50% 48%,
            rgba(22, 107, 255, 0.15) 0%,
            rgba(22, 107, 255, 0.055) 30%,
            transparent 56%
        ),
        linear-gradient(
            rgba(13, 29, 52, 0.96),
            rgba(8, 20, 37, 0.97)
        ),
        linear-gradient(
            90deg,
            rgba(85, 153, 255, 0.055) 1px,
            transparent 1px
        ),
        linear-gradient(
            rgba(85, 153, 255, 0.055) 1px,
            transparent 1px
        );

    background-size:
        auto,
        auto,
        34px 34px,
        34px 34px;

    box-shadow:
        0 38px 90px rgba(0, 0, 0, 0.30),
        0 8px 34px rgba(22, 107, 255, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.investor-hero .loyki-network:hover .loyki-network-frame {
    box-shadow:
        0 46px 110px rgba(0, 0, 0, 0.34),
        0 10px 40px rgba(22, 107, 255, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
}


/* ----------------------------------------------------------
   NETWORK TOPLINE
   ---------------------------------------------------------- */

.investor-hero .loyki-network-topline {
    color:
        rgba(226, 236, 255, 0.52);
}

.investor-hero .loyki-network-live {
    color: #7ee7bc;
}


/* ----------------------------------------------------------
   CENTRAL TRUSTED CORE
   Remove the remaining white circle
   ---------------------------------------------------------- */

.investor-hero .loyki-network-core-inner {
    border-color:
        rgba(64, 145, 255, 0.34);

    background:
        radial-gradient(
            circle at 38% 28%,
            rgba(32, 62, 104, 0.98) 0%,
            rgba(17, 39, 69, 0.99) 48%,
            rgba(9, 24, 44, 1) 100%
        );

    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.32),
        0 0 0 9px rgba(22, 107, 255, 0.055),
        0 0 52px rgba(22, 107, 255, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.investor-hero .loyki-network-core-ring {
    border-color:
        rgba(65, 145, 255, 0.30);
}

.investor-hero .loyki-network-core-ring.ring-b {
    border-color:
        rgba(0, 212, 255, 0.18);
}

.investor-hero .loyki-network-core-inner > small {
    color:
        rgba(196, 218, 255, 0.58);
}


/* ----------------------------------------------------------
   MASTER LOGO
   Authentic SVG remains unchanged.
   Only provide a subtle presentation surface.
   ---------------------------------------------------------- */

.investor-hero .loyki-core-masterlogo {
    padding: 7px 10px;

    border:
        1px solid
        rgba(120, 170, 255, 0.13);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, 0.92);

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.18);
}

.investor-hero .loyki-core-masterlogo img {
    filter: none;
}


/* ----------------------------------------------------------
   NODES
   Dark glass hierarchy
   ---------------------------------------------------------- */

.investor-hero .loyki-network-node {
    border-color:
        rgba(100, 160, 255, 0.24);

    background:
        linear-gradient(
            145deg,
            rgba(24, 48, 82, 0.96),
            rgba(12, 29, 52, 0.97)
        );

    box-shadow:
        0 16px 36px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.investor-hero .loyki-network-node:hover {
    border-color:
        rgba(0, 212, 255, 0.48);

    background:
        linear-gradient(
            145deg,
            rgba(29, 60, 102, 0.98),
            rgba(14, 35, 63, 0.99)
        );

    box-shadow:
        0 20px 44px rgba(0, 0, 0, 0.30),
        0 0 28px rgba(22, 107, 255, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.075);
}

.investor-hero .loyki-network-node small {
    color: #58a6ff;
}

.investor-hero .loyki-network-node strong {
    color:
        rgba(255, 255, 255, 0.96);
}

.investor-hero .loyki-network-node em {
    color:
        rgba(214, 226, 244, 0.58);
}


/* ----------------------------------------------------------
   TRUST FOOTER
   POLICY / AUDIT / CONTROL
   ---------------------------------------------------------- */

.investor-hero .loyki-network-trust span {
    border-color:
        rgba(100, 160, 255, 0.15);

    background:
        rgba(255, 255, 255, 0.045);

    color:
        rgba(204, 221, 245, 0.48);
}


/* ----------------------------------------------------------
   CONNECTION PATHS
   Keep animation, improve dark-mode visibility
   ---------------------------------------------------------- */

.investor-hero .network-path {
    stroke:
        rgba(67, 153, 255, 0.48);
}

.investor-hero .loyki-network-pulse {
    background: #00d4ff;

    box-shadow:
        0 0 0 4px rgba(0, 212, 255, 0.10),
        0 0 20px rgba(0, 212, 255, 0.76);
}


/* ----------------------------------------------------------
   SECONDARY CTA
   CI-consistent instead of grey
   ---------------------------------------------------------- */

.investor-hero .btn-secondary {
    color: #ffffff;

    border:
        1px solid
        rgba(79, 148, 255, 0.48);

    background:
        linear-gradient(
            135deg,
            rgba(16, 42, 76, 0.92),
            rgba(12, 31, 57, 0.92)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.055),
        0 10px 26px rgba(0, 0, 0, 0.16);

    backdrop-filter: blur(10px);
}

.investor-hero .btn-secondary:hover {
    color: #ffffff;

    border-color:
        rgba(0, 212, 255, 0.58);

    background:
        linear-gradient(
            135deg,
            rgba(22, 58, 101, 0.98),
            rgba(14, 39, 71, 0.98)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.075),
        0 12px 30px rgba(0, 0, 0, 0.20),
        0 0 24px rgba(22, 107, 255, 0.10);
}

/* ==========================================================
   LOYKI SECONDARY CTA FINAL V1
   Final dark-glass treatment for investor hero secondary CTA
   ========================================================== */

.investor-hero a.btn-secondary {
    color: rgba(255, 255, 255, 0.94) !important;

    border:
        1px solid
        rgba(72, 145, 255, 0.58) !important;

    background:
        linear-gradient(
            135deg,
            rgba(18, 45, 79, 0.96),
            rgba(10, 28, 52, 0.96)
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 10px 28px rgba(0, 0, 0, 0.20),
        0 0 0 1px rgba(22, 107, 255, 0.04) !important;

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

.investor-hero a.btn-secondary:hover,
.investor-hero a.btn-secondary:focus-visible {
    color: #ffffff !important;

    border-color:
        rgba(0, 212, 255, 0.72) !important;

    background:
        linear-gradient(
            135deg,
            rgba(22, 62, 108, 0.98),
            rgba(12, 36, 67, 0.98)
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        0 14px 32px rgba(0, 0, 0, 0.24),
        0 0 24px rgba(22, 107, 255, 0.16) !important;
}

/* ==========================================================
   LOYKI ORIGINAL HERO SECONDARY CTA V1

   Investor hero uses the same visual treatment as the
   original LoyKI.ai .button-hero-secondary component.
   ========================================================== */

.investor-hero .button-hero-secondary {
    min-height: 52px;

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

    padding: 0 23px;

    color: var(--color-white);

    border:
        1px solid rgba(255, 255, 255, 0.35);

    border-radius: var(--radius-sm);

    background:
        rgba(255, 255, 255, 0.035);

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

    box-shadow: none;

    backdrop-filter: none;
    -webkit-backdrop-filter: none;

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

.investor-hero .button-hero-secondary:hover {
    transform: translateY(-1px);

    color: var(--color-white);

    border-color:
        rgba(255, 255, 255, 0.56);

    background:
        rgba(255, 255, 255, 0.075);

    box-shadow: none;
}