:root {
        --bg: #050509;
        --bg-alt: #0c0f18;
        --accent1: #ff6a00;
        --accent2: #ff3b3b;
        --accent-soft: rgba(255, 106, 0, 0.18);
        --text: #f5f5f5;
        --text-muted: #a0a4b8;
        --border-soft: rgba(255, 255, 255, 0.08);
        --card-bg: rgba(10, 14, 24, 0.9);
        --radius-xl: 20px;
        --radius-xxl: 32px;
        --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.8);
    }

    @import url('fonts/fonts.css');

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

    body {
        font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
        background: radial-gradient(circle at top, #181b28 0, #050509 55%, #000 100%);
        color: var(--text);
        line-height: 1.6;
        overflow-x: hidden;
    }

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

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

.preloader svg {
    fill: #5e627e
}

.preloader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: #151720;
    z-index: 999999;
    transform: translateY(100%);
    transition: all .7s cubic-bezier(.86, 0, .07, 1) .55s;
    min-height: 180px
}

.preloader-is--active .preloader-overlay {
    transform: translateY(0)
}

.preloader-inner {
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: z
}

.preloader-is--active .site-content {
    opacity: 0;
    overflow: hidden;
    transform: scale(1.5)
}

.preloader--no-transform .site-content {
    overflow: auto;
    transform: none
}

.pong-loader {
    top: 36.5%;
    height: 20px;
    width: 3px;
    background-color: transparent;
    animation: x .75s ease-out infinite;
    transform: translateZ(0)
}

.pong-loader,
.pong-loader:before {
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0
}

.pong-loader:before {
    content: "";
    top: 7.5px;
    width: 5px;
    height: 5px;
    background-color: #fd9129;
    border-radius: 50%;
    animation: y .6s ease-out infinite
}

@keyframes x {
    0% {
        box-shadow: -12.5px -5px 0 #fff, 12.5px 5px 0 #fff
    }

    50% {
        box-shadow: -12.5px 8px 0 #fff, 12.5px -5px 0 #fff
    }

    to {
        box-shadow: -12.5px -5px 0 #fff, 12.5px 5px 0 #fff
    }
}

@keyframes y {
    0% {
        transform: translateX(-10px) scaleY(1.2)
    }

    25% {
        transform: scaleX(1.2)
    }

    50% {
        transform: translateX(7.5px) scaleY(1.2)
    }

    75% {
        transform: scaleX(1.2)
    }

    to {
        transform: translateX(-10px)
    }
}

@keyframes z {
    0% {
        opacity: 0;
        transform: translate3d(0, 30px, 0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

    /* Layout */

    .page {
        min-height: 100vh;
        position: relative;
        isolation: isolate;
    }

    .page::before,
    .page::after {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        opacity: 0.4;
        mix-blend-mode: screen;
        z-index: -1;
    }

    .page::before {
        background:
            radial-gradient(circle at 15% 10%, rgba(255, 106, 0, 0.18), transparent 55%),
            radial-gradient(circle at 80% 20%, rgba(255, 59, 59, 0.2), transparent 60%),
            radial-gradient(circle at 90% 80%, rgba(255, 255, 255, 0.05), transparent 55%);
    }

    .page::after {
        background-image: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.55) 0,
            rgba(0, 0, 0, 0.9) 40%,
            #000 100%);
    }

    .container {
        width: 100%;
        max-width: 1180px;
        margin: 0 auto;
        padding: 0 1.5rem;
    }

    /* Navbar */

    header {
        position: sticky;
        top: 0;
        z-index: 999;
        backdrop-filter: blur(22px);
        background: linear-gradient(to bottom,
            rgba(5, 5, 12, 0.95),
            rgba(5, 5, 12, 0.85),
            transparent);
        border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    }

    .nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 0.25rem;
        gap: 1.5rem;
    }

    .logo {
        display: flex;
        align-items: center;
        gap: 0.85rem;
    }

    .logo-mark {
        width: 40px;
        height: 40px;
        border-radius: 14px;
        background:
            linear-gradient(135deg, var(--accent1), var(--accent2));
        box-shadow: 0 0 22px rgba(255, 106, 0, 0.7);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Bebas Neue", system-ui;
        letter-spacing: 0.06em;
        font-size: 1.4rem;
    }

    .logo-text-main {
        font-family: "Bebas Neue", system-ui;
        font-size: 1.5rem;
        letter-spacing: 0.12em;
    }

    .logo-subline {
        font-size: 0.75rem;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.15em;
    }

    .nav-right {
        display: flex;
        align-items: center;
        gap: 2rem;
    }

    .nav-links {
        display: flex;
        align-items: center;
        gap: 1.4rem;
        font-size: 0.9rem;
    }

    .nav-links a {
        position: relative;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.18em;
        font-weight: 500;
        font-size: 0.7rem;
    }

    .nav-links a::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -0.25rem;
        width: 0;
        height: 2px;
        border-radius: 999px;
        background: linear-gradient(90deg, var(--accent1), var(--accent2));
        transition: width 0.2s ease-out;
    }

    .nav-links a:hover::after {
        width: 100%;
    }

    .nav-cta {
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        padding: 0.35rem 1rem;
        font-size: 0.7rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        background: radial-gradient(circle at top left,
            rgba(255, 255, 255, 0.15),
            rgba(5, 5, 9, 0.9));
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        cursor: pointer;
    }

    .nav-cta span:last-child {
        font-size: 0.85rem;
        transform: translateY(0.5px);
    }

    .nav-toggle {
        display: none;
        cursor: pointer;
        border-radius: 999px;
        border: 1px solid var(--border-soft);
        padding: 0.2rem 0.6rem;
        font-size: 0.85rem;
        background: rgba(0, 0, 0, 0.7);
    }

    /* Hero */

    .hero {
        padding: 4.5rem 0 4rem;
    }

    .hero-grid {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 2.2fr);
        gap: 2.8rem;
        align-items: center;
    }

    .hero-tagline {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.3rem 0.9rem;
        border-radius: 999px;
        border: 1px solid var(--border-soft);
        background: rgba(5, 5, 15, 0.9);
        margin-bottom: 1.2rem;
        font-size: 0.75rem;
        color: var(--text-muted);
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .hero-tag-dot {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: radial-gradient(circle, var(--accent2), var(--accent1));
        box-shadow: 0 0 12px rgba(255, 59, 59, 0.8);
    }

    .hero-title {
        font-family: "Bebas Neue", system-ui;
        font-size: clamp(2rem, 4vw + 1.4rem, 3rem);
        line-height: 1.05;
        letter-spacing: 0.18em;
    }

    .hero-title span {
        display: block;
    }

    .hero-title-highlight {
        background: linear-gradient(90deg, var(--accent1), var(--accent2));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .hero-subline {
        margin-top: 1rem;
        color: var(--text-muted);
        max-width: 32rem;
        font-size: 0.98rem;
    }

    .hero-meta {
        margin-top: 1.8rem;
        display: flex;
        flex-wrap: wrap;
        gap: 1.2rem;
        font-size: 0.8rem;
        color: var(--text-muted);
    }

    .hero-meta-block span:first-child {
        text-transform: uppercase;
        letter-spacing: 0.16em;
        font-size: 0.72rem;
        color: #e0e0e0;
        opacity: 0.85;
    }

    .hero-meta-block span:last-child {
        display: block;
        font-size: 0.78rem;
        margin-top: 0.12rem;
    }

    .hero-actions {
        margin-top: 2.1rem;
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        align-items: center;
    }


    .landing-detail,
    .landing-detail-cover {
        display: none
    }

    .landing-detail-cover span,
    .landing-detail span {
        position: absolute;
        top: 50%;
        border-style: solid;
        transform: rotate(45deg)
    }

    .landing-detail-cover span:first-child,
    .landing-detail span:first-child {
        width: 100px;
        height: 100px;
        margin-top: -50px;
        border-width: 32px
    }

    .landing-detail-cover span:nth-child(2),
    .landing-detail span:nth-child(2) {
        width: 200px;
        height: 200px;
        margin-top: -100px;
        border-width: 26px
    }

    .landing-detail-cover span:last-child,
    .landing-detail span:last-child {
        width: 282px;
        height: 282px;
        margin-top: -141px;
        border-width: 20px
    }

    .landing-detail--left,
    .landing-detail-cover--left {
        left: -199px
    }

    .landing-detail--left span,
    .landing-detail-cover--left span {
        left: 50%
    }

    .preloader-is--active.site-layout--landing .landing-detail--left span,
    .preloader-is--active.site-layout--landing .landing-detail-cover--left span {
        left: -100%
    }

    .landing-detail--left span:first-child,
    .landing-detail-cover--left span:first-child {
        margin-left: -50px
    }

    .site-layout--landing .landing-detail--left span:first-child,
    .site-layout--landing .landing-detail-cover--left span:first-child {
        transition: left .7s cubic-bezier(.86, 0, .07, 1) .8s;
        border-color: #ff0000;
    }

    .landing-detail--left span:nth-child(2),
    .landing-detail-cover--left span:nth-child(2) {
        margin-left: -100px
    }

    .site-layout--landing .landing-detail--left span:nth-child(2),
    .site-layout--landing .landing-detail-cover--left span:nth-child(2) {
        transition: left .7s cubic-bezier(.86, 0, .07, 1) 1s;
        border-color: #fe601c;
    }

    .landing-detail--left span:last-child,
    .landing-detail-cover--left span:last-child {
        margin-left: -141px
    }

    .site-layout--landing .landing-detail--left span:last-child,
    .site-layout--landing .landing-detail-cover--left span:last-child {
        transition: left .7s cubic-bezier(.86, 0, .07, 1) 1.2s;
        border-color: #fdc137;
    }

    .landing-detail--right,
    .landing-detail-cover--right {
        right: -199px
    }

    .landing-detail--right span,
    .landing-detail-cover--right span {
        right: 50%
    }

    .preloader-is--active.site-layout--landing .landing-detail--right span,
    .preloader-is--active.site-layout--landing .landing-detail-cover--right span {
        right: -100%
    }

    .landing-detail--right span:first-child,
    .landing-detail-cover--right span:first-child {
        margin-right: -50px
    }

    .site-layout--landing .landing-detail--right span:first-child,
    .site-layout--landing .landing-detail-cover--right span:first-child {
        transition: right .7s cubic-bezier(.86, 0, .07, 1) .8s;
        border-color: #ff0000;
    }

    .landing-detail--right span:nth-child(2),
    .landing-detail-cover--right span:nth-child(2) {
        margin-right: -100px
    }

    .site-layout--landing .landing-detail--right span:nth-child(2),
    .site-layout--landing .landing-detail-cover--right span:nth-child(2) {
        transition: right .7s cubic-bezier(.86, 0, .07, 1) 1s;
        border-color: #fe601c;
    }

    .landing-detail--right span:last-child,
    .landing-detail-cover--right span:last-child {
        margin-right: -141px
    }

    .site-layout--landing .landing-detail--right span:last-child,
    .site-layout--landing .landing-detail-cover--right span:last-child {
        transition: right .7s cubic-bezier(.86, 0, .07, 1) 1.2s;
        border-color: #fdc137;
    }

    .landing-detail span {
        border-color: #68ff01
    }

    .landing-detail-cover {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 46%, 0 46%);
        clip-path: polygon(0 0, 100% 0, 100% 46%, 0 46%)
    }

    .landing-detail-cover span {
        border-color: #ccff3a
    }

    @media (min-width:1600px) {
        .landing-detail,
        .landing-detail-cover {
            position: fixed;
            top: 50%;
            display: block;
            width: 398px;
            height: 398px;
            transform-origin: top;
            transform: translateY(-50%)
        }
    }

    .svg-filters {
        display: block;
        width: 0;
        height: 0
    }

    .demo-icons-list .df-icon {
        width: 32px;
        height: 32px;
        fill: #444
    }

    .site-overlay {
        left: 0;
        z-index: 1100;
        width: 100%;
        height: calc(100% - 72px);
        position: fixed;
        background-color: transparent;
        visibility: hidden;
        opacity: 0;
        transition: visibility 0s, opacity .32s ease
    }

    body:not(.cursor-is--active) .site-overlay {
        cursor: pointer
    }

    @media (min-width:1920px) {
        .site-overlay {
            height: calc(100% - 100px)
        }
    }

    .btn-primary {
        position: relative;
        border-radius: 999px;
        padding: 0.85rem 1.7rem;
        border: none;
        outline: none;
        cursor: pointer;
        font-size: 0.82rem;
        text-transform: uppercase;
        letter-spacing: 0.18em;
        font-weight: 600;
        color: #fff;
        background: radial-gradient(circle at top left,
            rgba(255, 255, 255, 0.26),
            transparent 45%),
            linear-gradient(120deg, var(--accent1), var(--accent2));
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.85);
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        overflow: hidden;
    }

    .btn-primary::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.18),
            transparent 40%);
        transform: translateX(-120%);
        transition: transform 0.45s ease-out;
    }

    .btn-primary:hover::after {
        transform: translateX(120%);
    }

    .btn-secondary {
        border-radius: 999px;
        padding: 0.82rem 1.4rem;
        border: 1px dashed rgba(255, 255, 255, 0.38);
        background-color: rgba(6, 8, 16, 0.9);
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.16em;
        color: var(--text-muted);
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        cursor: pointer;
    }

    .btn-secondary span:last-child {
        font-size: 1rem;
    }

    .hero-right {
        position: relative;
    }

    .hero-card {
        position: relative;
        border-radius: var(--radius-xxl);
        padding: 1.7rem 1.6rem 1.5rem;
        background: linear-gradient(145deg, rgba(8, 10, 18, 0.96), rgba(5, 5, 9, 0.96));
        border: 1px solid rgba(255, 255, 255, 0.07);
        box-shadow: var(--shadow-soft);
        overflow: hidden;
    }

    .hero-card::before {
        content: "";
        position: absolute;
        inset: -40%;
        background-image: linear-gradient(120deg,
            rgba(255, 106, 0, 0.06) 0,
            rgba(255, 59, 59, 0.16) 35%,
            transparent 70%);
        mix-blend-mode: screen;
        opacity: 0.9;
        pointer-events: none;
    }

    .hero-card-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
        position: relative;
        z-index: 1;
    }

    .hero-card-title {
        font-size: 0.8rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #f8f8f8;
    }

    .hero-chip {
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.16em;
        padding: 0.26rem 0.7rem;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.24);
        background: rgba(0, 0, 0, 0.55);
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        color: var(--text-muted);
    }

    .hero-chip-dot {
        width: 6px;
        height: 6px;
        border-radius: 999px;
        background: radial-gradient(circle, #4ade80, #15803d);
        box-shadow: 0 0 10px rgba(74, 222, 128, 0.9);
    }

    .hero-diagram {
        position: relative;
        margin-top: 0.8rem;
        border-radius: 20px;
        padding: 1.1rem 1rem;
        background:
            radial-gradient(circle at top, rgba(255, 255, 255, 0.08), transparent 60%),
            linear-gradient(135deg, rgba(10, 12, 22, 0.92), rgba(5, 5, 14, 0.95));
        border: 1px solid rgba(255, 255, 255, 0.06);
        z-index: 1;
    }

    .diagram-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.7rem;
        align-items: center;
    }

    .diagram-node {
        border-radius: 999px;
        padding: 0.5rem 0.7rem;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.16em;
        text-align: center;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background-color: rgba(3, 6, 15, 0.8);
        color: var(--text-muted);
        position: relative;
        overflow: hidden;
    }

    .diagram-node::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at top,
            rgba(255, 255, 255, 0.12),
            transparent 60%);
        opacity: 0;
        transition: opacity 0.3s ease-out;
    }

    .diagram-node.center {
        background:
            radial-gradient(circle at top, rgba(255, 255, 255, 0.18), transparent 65%),
            linear-gradient(135deg, var(--accent1), var(--accent2));
        color: #fff;
        border-color: transparent;
        font-weight: 600;
        box-shadow: 0 0 24px rgba(255, 106, 0, 0.7);
    }

    .diagram-node.center::after {
        display: none;
    }

    .diagram-node:hover::after {
        opacity: 1;
    }

    .diagram-connector {
        grid-column: span 3;
        height: 22px;
        position: relative;
        margin: 0.2rem 0;
    }

    .diagram-line {
        position: absolute;
        left: 3%;
        right: 3%;
        top: 50%;
        transform: translateY(-50%);
        height: 1px;
        background-image: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.4),
            transparent);
        opacity: 0.6;
    }

    .diagram-pulse {
        position: absolute;
        top: 50%;
        left: 12%;
        transform: translate(-50%, -50%);
        width: 9px;
        height: 9px;
        border-radius: 999px;
        background: radial-gradient(circle, var(--accent2), var(--accent1));
        box-shadow: 0 0 14px rgba(255, 59, 59, 0.9);
        animation: pulse 1.8s infinite ease-out;
    }

    .hero-card-bottom {
        margin-top: 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.9rem;
        font-size: 0.7rem;
        color: var(--text-muted);
        position: relative;
        z-index: 1;
    }

    .hero-card-metric-label {
        font-size: 0.68rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        opacity: 0.9;
    }

    .hero-card-metric-value {
        font-size: 0.88rem;
        margin-top: 0.18rem;
        color: #f5f5f5;
    }

    .hero-badge {
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.22);
        padding: 0.38rem 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.16em;
        font-size: 0.68rem;
        background: rgba(0, 0, 0, 0.8);
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
    }

    .hero-badge span:last-child {
        font-size: 0.8rem;
    }

    .hero-float-tag {
        position: absolute;
        right: 4%;
        top: -11%;
        padding: 0.4rem 0.9rem;
        border-radius: 999px;
        background: rgba(0, 0, 0, 0.9);
        border: 1px solid rgba(255, 255, 255, 0.18);
        font-size: 0.66rem;
        text-transform: uppercase;
        letter-spacing: 0.16em;
        color: var(--text-muted);
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.9);
    }

    .hero-float-tag span:last-child {
        background: linear-gradient(90deg, var(--accent1), var(--accent2));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .hero-code-strip {
        margin-top: 0.9rem;
        padding: 0.45rem 0.7rem;
        border-radius: 999px;
        font-family: "Menlo", "SF Mono", ui-monospace, monospace;
        font-size: 0.68rem;
        background-color: rgba(0, 0, 0, 0.8);
        border: 1px solid rgba(255, 255, 255, 0.16);
        color: #e2e8f0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        position: relative;
    }

    .hero-code-strip::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.25),
            transparent);
        transform: translateX(-120%);
        animation: code-glow 3.4s infinite;
        opacity: 0.4;
    }

    /* Sections */

    section {
        padding: 3.5rem 0;
        position: relative;
        z-index: 1;
    }

    .section-header {
        margin-bottom: 2rem;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .section-kicker {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.18em;
        color: var(--accent1);
    }

    .section-title {
        margin-top: 0.4rem;
        font-size: 1.6rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        font-weight: 800;
    }

    .section-sub {
        max-width: 28rem;
        font-size: 0.9rem;
        color: var(--text-muted);
    }

    /* About */

    .about-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 2fr);
        gap: 2.3rem;
        align-items: center;
    }

    .about-text p {
        font-size: 0.96rem;
        color: var(--text-muted);
        margin-bottom: 1.1rem;
    }

    .about-highlight {
        display: flex;
        gap: 1.4rem;
        flex-wrap: wrap;
        margin-top: 0.6rem;
    }

    .about-pill {
        padding: 0.4rem 0.9rem;
        border-radius: 999px;
        border: 1px solid var(--border-soft);
        font-size: 0.75rem;
        color: var(--text-muted);
        background: rgba(3, 6, 18, 0.9);
        text-transform: uppercase;
        letter-spacing: 0.14em;
    }

    .ecosystem {
        border-radius: var(--radius-xl);
        padding: 1.4rem 1.3rem;
        background: radial-gradient(circle at top, rgba(255, 255, 255, 0.18), transparent 65%),
            linear-gradient(135deg, rgba(7, 9, 18, 0.96), rgba(5, 5, 11, 0.98));
        border: 1px solid rgba(255, 255, 255, 0.09);
        box-shadow: var(--shadow-soft);
        position: relative;
        overflow: hidden;
    }

    .ecosystem-title {
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.18em;
        color: #f8fafc;
        margin-bottom: 0.9rem;
    }

    .ecosystem-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
        margin-top: 0.4rem;
    }

    .eco-node {
        border-radius: 18px;
        padding: 0.5rem;
        background: rgba(2, 6, 23, 0.9);
        border: 1px solid rgba(148, 163, 184, 0.3);
        font-size: 0.7rem;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 0.16em;
        color: var(--text-muted);
        position: relative;
        overflow: hidden;
    }

    .eco-node::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at top,
            rgba(255, 255, 255, 0.18),
            transparent 60%);
        opacity: 0;
        transition: opacity 0.25s ease-out;
    }

    .eco-node.center {
        background:
            radial-gradient(circle at top, rgba(255, 255, 255, 0.2), transparent 65%),
            linear-gradient(135deg, var(--accent1), var(--accent2));
        color: #fff;
        border-color: transparent;
        font-weight: 700;
        box-shadow: 0 0 27px rgba(255, 106, 0, 0.75);
    }

    .eco-node:hover::before {
        opacity: 1;
    }

    .eco-connector-line {
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle at center,
            rgba(148, 163, 184, 0.25),
            transparent 65%);
        opacity: 0.45;
        mix-blend-mode: screen;
        pointer-events: none;
    }

    /* Services */

    .services {
        border-top: 1px solid rgba(148, 163, 184, 0.15);
        border-bottom: 1px solid rgba(148, 163, 184, 0.12);
        background: radial-gradient(circle at top, rgba(15, 23, 42, 0.6), transparent 60%);
    }

    .services-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1.6rem;
    }

    .service-card {
        border-radius: var(--radius-xl);
        padding: 1.3rem 1.2rem;
        background: var(--card-bg);
        border: 1px solid var(--border-soft);
        box-shadow: 0 14px 40px rgba(0, 0, 0, 0.75);
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        position: relative;
        overflow: hidden;
    }

    .service-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at top,
            rgba(255, 255, 255, 0.1),
            transparent 60%);
        opacity: 0;
        transition: opacity 0.2s ease-out;
        pointer-events: none;
    }

    .service-card:hover::before {
        opacity: 1;
    }

    .service-icon {
        font-size: 1.35rem;
        margin-bottom: 0.2rem;
    }

    .service-title {
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 0.16em;
        font-weight: 700;
    }

    .service-body {
        font-size: 0.86rem;
        color: var(--text-muted);
    }

    .service-tag {
        margin-top: auto;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.16em;
        color: var(--accent1);
        opacity: 0.9;
    }

    /* Partners */

    .partners-row {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        align-items: center;
    }

    .partners-logos {
        display: flex;
        flex-wrap: wrap;
        gap: 0.8rem;
        align-items: center;
    }

    .partner-logo {
        min-width: 85px;
        /*border-radius: 999px;*/
        padding: 0.45rem 0.9rem;
        /*border: 1px solid rgba(148, 163, 184, 0.3);*/
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.16em;
        color: var(--text-muted);
        /*background: rgba(15, 23, 42, 0.85);
      backdrop-filter: blur(10px);*/
        white-space: nowrap;
    }

    .partners-copy {
        font-size: 0.86rem;
        color: var(--text-muted);
    }

    /* Team */

    .team-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 2fr);
        gap: 2.2rem;
        align-items: center;
    }

    .team-avatars {
        display: flex;
        gap: 1.2rem;
        flex-wrap: wrap;
    }

    .avatar-card {
        width: 145px;
        border-radius: 26px;
        padding: 0.9rem 0.85rem;
        background:
            linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(3, 7, 18, 0.98));
        border: 1px solid rgba(148, 163, 184, 0.5);
        box-shadow: var(--shadow-soft);
        position: relative;
        overflow: hidden;
    }

    .avatar-pixels {
        width: 76px;
        height: 76px;
        margin: 0 auto 0.7rem;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: 1fr;
        gap: 2px;
        background-color: #020617;
        padding: 4px;
        border-radius: 18px;
        box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.9);
    }

    .avatar-pixel {
        border-radius: 3px;
        background-color: #1f2937;
    }

    .avatar-pixel.accent {
        background: linear-gradient(135deg, var(--accent1), var(--accent2));
    }

    .avatar-name {
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.16em;
        text-align: center;
        margin-bottom: 0.18rem;
    }

    .avatar-role {
        font-size: 0.7rem;
        text-align: center;
        color: var(--text-muted);
    }

    .team-text p {
        font-size: 0.95rem;
        color: var(--text-muted);
        margin-bottom: 1rem;
    }

    .team-pill-row {
        display: flex;
        flex-wrap: wrap;
        gap: 0.7rem;
        margin-top: 0.4rem;
    }

    .team-pill {
        border-radius: 999px;
        padding: 0.3rem 0.8rem;
        border: 1px solid var(--border-soft);
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.16em;
        color: var(--text-muted);
    }

    /* Kontakt */

    .contact {
        border-top: 1px solid rgba(148, 163, 184, 0.15);
    }

    .contact-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr);
        gap: 2.4rem;
        align-items: flex-start;
    }

    .contact-text p {
        font-size: 0.95rem;
        color: var(--text-muted);
        margin-bottom: 1rem;
    }

    .contact-highlight {
        border-radius: var(--radius-xl);
        padding: 0.9rem 1rem;
        background: rgba(15, 23, 42, 0.9);
        border: 1px dashed rgba(148, 163, 184, 0.45);
        font-size: 0.8rem;
        color: var(--text-muted);
    }

    .contact-highlight strong {
        color: #e5e7eb;
    }

    .contact-form {
        border-radius: var(--radius-xl);
        padding: 1.5rem;
        background: radial-gradient(circle at top, rgba(255, 255, 255, 0.1), transparent 65%),
            linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(3, 7, 18, 0.98));
        border: 1px solid rgba(148, 163, 184, 0.5);
        box-shadow: var(--shadow-soft);
    }

    .form-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .form-field {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        font-size: 0.8rem;
    }

    .form-field label {
        text-transform: uppercase;
        letter-spacing: 0.16em;
        font-size: 0.68rem;
        color: #e5e7eb;
    }

    .form-field input,
    .form-field textarea {
        border-radius: 12px;
        border: 1px solid rgba(148, 163, 184, 0.6);
        background: rgba(15, 23, 42, 0.9);
        padding: 0.55rem 0.7rem;
        font-size: 0.8rem;
        color: var(--text);
        outline: none;
        font-family: inherit;
    }

    .form-field input::placeholder,
    .form-field textarea::placeholder {
        color: rgba(148, 163, 184, 0.55);
    }

    .form-field input:focus,
    .form-field textarea:focus {
        border-color: var(--accent1);
        box-shadow: 0 0 0 1px rgba(255, 106, 0, 0.7);
    }

    .form-field textarea {
        min-height: 110px;
        resize: vertical;
    }

    .form-note {
        margin-top: 0.6rem;
        font-size: 0.7rem;
        color: var(--text-muted);
    }

    .form-actions {
        margin-top: 1rem;
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        align-items: center;
        flex-wrap: wrap;
    }

    .form-hint {
        font-size: 0.72rem;
        color: var(--text-muted);
    }

    /* Footer */

    footer {
        border-top: 1px solid rgba(148, 163, 184, 0.25);
        padding: 1.5rem 0 2rem;
        margin-top: 2rem;
        background: radial-gradient(circle at top, rgba(15, 23, 42, 0.4), transparent 55%);
    }

    .footer-grid {
        display: flex;
        justify-content: space-between;
        gap: 1.5rem;
        flex-wrap: wrap;
        align-items: center;
        font-size: 0.78rem;
        color: var(--text-muted);
    }

    .footer-brand {
        display: flex;
        align-items: center;
        gap: 0.7rem;
    }

    .footer-pixel-logo {
        width: 26px;
        height: 26px;
        border-radius: 8px;
        background:
            linear-gradient(135deg, var(--accent1), var(--accent2));
        position: relative;
        overflow: hidden;
    }

    .footer-pixel-logo::before,
    .footer-pixel-logo::after {
        content: "";
        position: absolute;
        inset: 4px;
        border-radius: 4px;
        border: 1px solid rgba(0, 0, 0, 0.65);
    }

    .footer-pixel-logo::after {
        inset: 9px 6px 6px 9px;
        background: rgba(0, 0, 0, 0.8);
    }

    .footer-links {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .footer-links a {
        text-transform: uppercase;
        letter-spacing: 0.16em;
        font-size: 0.7rem;
    }

    .footer-meta {
        text-transform: uppercase;
        letter-spacing: 0.16em;
        font-size: 0.66rem;
        color: var(--text-muted);
    }

    .footer-meta span {
        background: linear-gradient(90deg, var(--accent1), var(--accent2));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    /* Scroll animations */

    .fade-in {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity 0.55s ease-out, transform 0.55s ease-out;
    }

    .fade-in.visible {
        opacity: 1;
        transform: translateY(0);
    }

    /* Keyframes */

    @keyframes pulse {
        0% {
            transform: translate(-50%, -50%) scale(1);
            opacity: 1;
        }

        60% {
            transform: translate(-50%, -50%) scale(1.8);
            opacity: 0;
        }

        100% {
            transform: translate(-50%, -50%) scale(1.8);
            opacity: 0;
        }
    }

    @keyframes code-glow {
        0% {
            transform: translateX(-120%);
        }

        55% {
            transform: translateX(120%);
        }

        100% {
            transform: translateX(120%);
        }
    }

    /* Responsive */
    @media (max-width: 960px) {
        .hero-grid,
        .about-grid,
        .contact-grid,
        .team-grid {
            grid-template-columns: minmax(0, 1fr);
        }

        .hero {
            padding-top: 3.3rem;
        }

        .hero-right {
            order: -1;
        }

        .hero-float-tag {
            top: -14%;
        }

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

    @media (max-width: 768px) {
        .nav-right {
            display: none;
        }

        .nav-toggle {
            display: inline-flex;
        }

        .nav.open .nav-right {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            position: absolute;
            right: 1.5rem;
            top: 3.1rem;
            padding: 0.9rem 1.1rem;
            background: rgba(3, 7, 18, 0.98);
            border-radius: 18px;
            border: 1px solid rgba(148, 163, 184, 0.3);
            box-shadow: 0 20px 44px rgba(0, 0, 0, 0.9);
        }

        .nav-links {
            flex-direction: column;
            align-items: flex-end;
        }

        .hero-actions {
            flex-direction: column;
            align-items: flex-start;
        }

        .services-grid {
            grid-template-columns: minmax(0, 1fr);
        }

        .section-header {
            flex-direction: column;
            align-items: flex-start;
        }
    }

    @media (max-width: 480px) {
        .container {
            padding: 0 1.1rem;
        }

        .hero-title {
            font-size: 2.4rem;
        }

        .hero-card {
            padding: 1.4rem 1.2rem 1.3rem;
        }

        .contact-form {
            padding: 1.2rem;
        }

        .form-grid {
            grid-template-columns: minmax(0, 1fr);
        }
    }


    .hero-fullscreen {
        position: relative;
        width: 100%;
        height: 100vh;
        background: url("../img/team.jpg") center center/cover no-repeat;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        overflow: hidden;
    }

    .hero-overlay {
        position: absolute;
        inset: 0;
        /*background: rgba(0,0,0,0.65);
  backdrop-filter: blur(2px);*/
    }

    .hero-content {
        position: relative;
        z-index: 2;
        max-width: 900px;
        padding: 2rem;
    }

    .hero-logo {
        width: 160px;
        margin-bottom: 1.5rem;
        opacity: 0.92;
    }

    .hero-claim {
        font-family: "Bebas Neue", sans-serif;
        font-size: clamp(2.8rem, 4vw + 1rem, 5rem);
        color: white;
        letter-spacing: 0.12em;
        line-height: 1.05;
        margin-bottom: 1rem;
    }

    .hero-claim span {
        background: linear-gradient(90deg, #ff6a00, #ff3b3b);
        -webkit-background-clip: text;
        color: transparent;
    }

    .hero-sub {
        color: #d0d0d0;
        font-size: 1.1rem;
        margin-bottom: 2.5rem;
    }

    .hero-scroll-indicator {
        color: #fff;
        font-size: 0.9rem;
        opacity: 0.75;
        animation: fadeScroll 2.4s infinite ease-in-out;
    }

    .scroll-arrow {
        font-size: 1.6rem;
        margin-top: 0.3rem;
    }

    @keyframes fadeScroll {
        0% {
            opacity: 0.2;
            transform: translateY(0);
        }

        50% {
            opacity: 1;
            transform: translateY(6px);
        }

        100% {
            opacity: 0.2;
            transform: translateY(0);
        }
    }