:root {
    --pink: #ff009f;
    --pink-bright: #ff36ba;
    --pink-deep: #c9007f;
    --violet: #7c4dff;
    --dark: #07070a;
    --dark-soft: #0d0d12;
    --panel: #111118;
    --panel-2: #15151d;
    --light: #f4f4f6;
    --light-2: #ececef;
    --ink: #0a0a0e;
    --text: #f8f8fb;
    --muted-dark: #a7a7b3;
    --muted-light: #666672;
    --line-dark: rgba(255, 255, 255, .1);
    --line-light: rgba(9, 9, 14, .1);
    --shadow: 0 32px 100px rgba(0, 0, 0, .34);
    --shell: min(1240px, calc(100% - 48px));
    --display: "Michroma", "Eurostile", "Bank Gothic", sans-serif;
    --tech: "Oxanium", "Arial Narrow", sans-serif;
    --body: "Inter", system-ui, sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background: var(--dark);
}

body {
    margin: 0;
    overflow-x: hidden;
    background: var(--dark);
    color: var(--text);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.menu-open {
    overflow: hidden;
}

::selection {
    background: var(--pink);
    color: #fff;
}

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

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

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

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

h1,
h2,
h3,
h4,
p {
    margin-top: 0;
}

h1,
h2 {
    font-family: var(--display);
    font-weight: 400;
    letter-spacing: -.045em;
}

h3,
h4,
.button,
.eyebrow,
.kicker,
.main-nav,
.nav-cta,
.service-kicker,
.project-meta,
.tag-list,
.footer-label {
    font-family: var(--tech);
}

h1 {
    margin-bottom: 28px;
    font-size: clamp(48px, 5.45vw, 82px);
    line-height: 1.075;
}

h2 {
    margin-bottom: 24px;
    font-size: clamp(38px, 4.45vw, 66px);
    line-height: 1.12;
}

h3 {
    margin-bottom: 15px;
    font-size: 26px;
    line-height: 1.18;
}

em {
    color: var(--pink);
    font-style: normal;
}

.shell {
    width: var(--shell);
    margin-inline: auto;
}

.section {
    position: relative;
    padding: 126px 0;
}

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

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

.site-noise {
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    opacity: .032;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

.cursor-glow {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    pointer-events: none;
    opacity: .18;
    background: radial-gradient(circle, rgba(255, 0, 159, .26), transparent 68%);
    filter: blur(16px);
    transform: translate3d(-50%, -50%, 0);
}

.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    height: 88px;
    background: #07070a;
    border-bottom: 1px solid rgba(255, 255, 255, .055);
    transition: height .3s ease, background .3s ease, box-shadow .3s ease;
}

.site-header.scrolled {
    height: 76px;
    background: rgba(7, 7, 10, .96);
    box-shadow: 0 14px 46px rgba(0, 0, 0, .28);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.nav-wrap {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 34px;
}

.brand {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    width: 214px;
    height: 63px;
    overflow: visible;
    background: transparent !important;
}

.brand img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
    background: transparent !important;
    border: 0;
    box-shadow: none;
    filter: drop-shadow(0 0 14px rgba(255, 0, 159, .16));
}

.main-nav {
    margin-left: auto;
}

.main-nav ul {
    display: flex;
    align-items: center;
    gap: 29px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-nav a {
    position: relative;
    display: block;
    color: #d9d9e1;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .105em;
    text-transform: uppercase;
    transition: color .25s ease;
}

.main-nav a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -9px;
    left: 0;
    height: 1px;
    background: var(--pink);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .25s ease;
}

.main-nav a:hover,
.main-nav .current-menu-item > a {
    color: #fff;
}

.main-nav a:hover::after,
.main-nav .current-menu-item > a::after {
    transform: scaleX(1);
    transform-origin: left;
}

.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 17px 11px;
    border: 1px solid var(--pink);
    border-radius: 999px;
    background: var(--pink);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .035em;
    box-shadow: 0 9px 35px rgba(255, 0, 159, .24);
    transition: transform .25s ease, box-shadow .25s ease;
}

.nav-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 44px rgba(255, 0, 159, .34);
}

.menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: transparent;
}

.menu-toggle span {
    display: block;
    width: 26px;
    height: 2px;
    margin: 6px auto;
    background: #fff;
    transition: transform .25s ease, opacity .25s ease;
}

.menu-toggle[aria-expanded="true"] span:first-child {
    transform: translateY(4px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:last-child {
    transform: translateY(-4px) rotate(-45deg);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-height: 54px;
    padding: 14px 23px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .035em;
    cursor: pointer;
    transition: transform .25s ease, background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
}

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

.button-primary {
    background: var(--pink);
    color: #fff;
    box-shadow: 0 12px 42px rgba(255, 0, 159, .24);
}

.button-primary:hover {
    background: var(--pink-bright);
    box-shadow: 0 16px 52px rgba(255, 0, 159, .34);
}

.button-secondary {
    border-color: rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .045);
    color: #fff;
}

.button-secondary:hover,
.button-outline:hover {
    border-color: var(--pink);
    color: #fff;
}

.button-outline {
    border-color: rgba(255, 255, 255, .18);
    color: #fff;
}

.button-dark {
    background: var(--ink);
    color: #fff;
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 5px;
    border-bottom: 1px solid currentColor;
    font-family: var(--tech);
    font-weight: 600;
    transition: color .25s ease, gap .25s ease;
}

.text-link:hover {
    gap: 18px;
    color: var(--pink);
}

.kicker,
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--pink);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.eyebrow {
    margin-bottom: 27px;
    padding: 9px 13px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    background: rgba(255, 255, 255, .035);
    color: #e6e6ec;
}

.eyebrow > span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pink);
    box-shadow: 0 0 14px var(--pink);
}

.section-head {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, .65fr);
    align-items: end;
    gap: 80px;
    margin-bottom: 66px;
}

.section-head h2 {
    max-width: 850px;
    margin: 16px 0 0;
}

.section-head > p {
    margin: 0 0 5px;
    color: inherit;
    opacity: .68;
    font-size: 16px;
    line-height: 1.8;
}

.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .75s ease, transform .75s cubic-bezier(.2, .7, .2, 1);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Hero */
.hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: 920px;
    padding: 136px 0 90px;
    overflow: hidden;
    background: #07070a;
}

#network-canvas {
    position: absolute;
    inset: 0;
    z-index: -3;
    width: 100%;
    height: 100%;
    opacity: .58;
}

.hero-grid-bg,
.page-hero-grid {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image:
        linear-gradient(rgba(255, 255, 255, .026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .026) 1px, transparent 1px);
    background-size: 68px 68px;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .95) 4%, rgba(0, 0, 0, .72) 68%, transparent 100%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .95) 4%, rgba(0, 0, 0, .72) 68%, transparent 100%);
}

.hero-glow {
    position: absolute;
    top: 14%;
    right: -11%;
    z-index: -2;
    width: 59%;
    height: 70%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(255, 0, 159, .24) 0, rgba(255, 0, 159, .095) 34%, transparent 72%);
    filter: blur(24px);
    pointer-events: none;
}

.hero-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, .98fr) minmax(470px, .9fr);
    align-items: center;
    gap: 66px;
}

.hero-copy {
    position: relative;
    z-index: 5;
}

.hero-copy h1 {
    max-width: 770px;
    color: #fbfbfd;
}

.hero-copy h1 em {
    display: block;
    margin-top: 6px;
    background: linear-gradient(90deg, #ff2bb5 0%, #ff009f 54%, #b54cff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 22px rgba(255, 0, 159, .13));
}

.hero-lead {
    max-width: 690px;
    margin-bottom: 0;
    color: #c8c8d2;
    font-size: 17px;
    line-height: 1.85;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 34px;
}

.hero-stats {
    display: flex;
    gap: 44px;
    margin-top: 48px;
}

.hero-stats > div {
    position: relative;
    padding-right: 44px;
}

.hero-stats > div:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 0;
    width: 1px;
    height: 45px;
    background: rgba(255, 255, 255, .12);
}

.hero-stats strong {
    display: block;
    color: #fff;
    font-family: var(--tech);
    font-size: 28px;
    font-weight: 600;
    line-height: 1;
}

.hero-stats span {
    display: block;
    max-width: 110px;
    margin-top: 9px;
    color: #8f8f9b;
    font-size: 11px;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: .075em;
}

.hero-visual {
    position: relative;
    z-index: 3;
}

.system-window {
    position: relative;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .012));
    box-shadow: 0 45px 130px rgba(0, 0, 0, .64), 0 0 88px rgba(255, 0, 159, .09), inset 0 1px rgba(255, 255, 255, .1);
    transition: transform .18s ease;
}

.window-top {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 47px;
    padding: 0 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    color: #777783;
    font-family: var(--tech);
    font-size: 9px;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.window-top b {
    color: #bcbcc7;
    font-weight: 500;
}

.window-top > span:last-child {
    justify-self: end;
}

.window-dots {
    display: flex;
    gap: 6px;
}

.window-dots i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #454550;
}

.window-dots i:first-child {
    background: var(--pink);
    box-shadow: 0 0 10px rgba(255, 0, 159, .8);
}

.dashboard {
    display: grid;
    grid-template-columns: 62px 1fr;
    min-height: 516px;
    overflow: hidden;
    border-radius: 0 0 20px 20px;
    background: linear-gradient(145deg, #101017, #08080d);
}

.dash-sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 17px;
    padding: 17px 11px;
    border-right: 1px solid rgba(255, 255, 255, .065);
    background: rgba(255, 255, 255, .018);
}

.dash-logo {
    display: grid;
    place-items: center;
    width: 33px;
    height: 33px;
    margin-bottom: 13px;
    border: 1px solid rgba(255, 0, 159, .6);
    border-radius: 8px;
    color: var(--pink);
    font-family: var(--display);
    font-size: 14px;
}

.dash-sidebar i {
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: rgba(255, 255, 255, .04);
}

.dash-sidebar i.active {
    border: 1px solid rgba(255, 0, 159, .65);
    background: rgba(255, 0, 159, .1);
    box-shadow: inset 0 0 14px rgba(255, 0, 159, .08);
}

.dash-main {
    padding: 24px 25px 23px;
}

.dash-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.dash-header small {
    color: #656571;
    font-family: var(--tech);
    font-size: 9px;
    letter-spacing: .12em;
}

.dash-header h2 {
    margin: 5px 0 0;
    font-family: var(--tech);
    font-size: 23px;
    font-weight: 500;
    letter-spacing: -.02em;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid rgba(72, 255, 156, .16);
    border-radius: 999px;
    background: rgba(72, 255, 156, .055);
    color: #8cefb7;
    font-size: 9px;
    white-space: nowrap;
}

.status-pill i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #55e995;
    box-shadow: 0 0 10px #55e995;
}

.dash-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 22px;
}

.dash-kpis > div {
    min-height: 78px;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 10px;
    background: rgba(255, 255, 255, .025);
}

.dash-kpis span {
    display: block;
    color: #6e6e79;
    font-size: 9px;
}

.dash-kpis strong {
    display: block;
    margin-top: 7px;
    font-family: var(--tech);
    font-size: 22px;
    font-weight: 500;
}

.dash-kpis strong small {
    color: var(--pink);
    font-size: 10px;
}

.chart-panel {
    position: relative;
    height: 213px;
    margin-top: 11px;
    padding: 14px 14px 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 11px;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 100% 45px, 70px 100%;
}

.chart-head {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    color: #8b8b96;
    font-size: 9px;
}

.chart-head b {
    color: var(--pink-bright);
    font-weight: 500;
}

.chart-svg {
    position: absolute;
    right: 15px;
    bottom: 24px;
    left: 15px;
    width: calc(100% - 30px);
    height: 150px;
    overflow: visible;
}

.chart-area {
    fill: url(#chartFill);
}

.chart-line {
    fill: none;
    stroke: var(--pink-bright);
    stroke-width: 2.6;
    stroke-linecap: round;
}

.chart-line-glow {
    stroke-width: 11;
    opacity: .13;
    filter: blur(5px);
}

.chart-axis {
    position: absolute;
    right: 14px;
    bottom: 5px;
    left: 14px;
    display: flex;
    justify-content: space-between;
    color: #555561;
    font-size: 7px;
}

.dash-bottom {
    display: grid;
    grid-template-columns: 1fr 94px;
    gap: 13px;
    margin-top: 11px;
}

.task-list {
    display: grid;
    gap: 4px;
}

.task-list > div {
    display: grid;
    grid-template-columns: 9px 1fr auto;
    align-items: center;
    gap: 8px;
    min-height: 29px;
    padding: 0 9px;
    border: 1px solid rgba(255, 255, 255, .055);
    border-radius: 7px;
    color: #82828e;
    font-size: 8px;
}

.task-list i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #595965;
}

.task-list i.done {
    background: var(--pink);
    box-shadow: 0 0 8px var(--pink);
}

.task-list b {
    color: #555561;
    font-weight: 400;
}

.health-ring {
    display: grid;
    place-items: center;
    align-content: center;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 10px;
    background:
        radial-gradient(circle at center, #0d0d13 54%, transparent 55%),
        conic-gradient(var(--pink) 0 94%, #292932 94% 100%);
}

.health-ring span {
    font-family: var(--tech);
    font-size: 16px;
}

.health-ring small {
    color: var(--pink);
    font-size: 7px;
}

.health-ring p {
    margin: 1px 0 0;
    color: #6a6a75;
    font-size: 7px;
}

.floating-tag {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 43px;
    padding: 9px 13px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 10px;
    background: rgba(12, 12, 17, .84);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
    backdrop-filter: blur(12px);
    font-family: var(--tech);
    font-size: 9px;
}

.floating-tag span {
    color: #777783;
}

.floating-tag b {
    color: var(--pink-bright);
    font-size: 13px;
}

.floating-tag i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #55e995;
    box-shadow: 0 0 8px #55e995;
}

.tag-one {
    bottom: 46px;
    left: -30px;
}

.tag-two {
    top: 88px;
    right: -35px;
}

.scroll-cue {
    position: absolute;
    bottom: 27px;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 13px;
    color: #656570;
    font-family: var(--tech);
    font-size: 9px;
    letter-spacing: .18em;
    transform: translateX(-50%);
}

.scroll-cue span {
    display: block;
    width: 38px;
    height: 1px;
    background: linear-gradient(90deg, var(--pink), transparent);
}

.capability-strip {
    position: relative;
    z-index: 4;
    overflow: hidden;
    color: #fff;
    background: #09090d;
    border-top: 1px solid rgba(255, 255, 255, .07);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.capability-strip::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: min(94vw, 1480px);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(255, 0, 159, .72) 22%, rgba(181, 76, 255, .45) 50%, rgba(255, 0, 159, .72) 78%, transparent);
    box-shadow: 0 0 22px rgba(255, 0, 159, .18);
}

.capability-systembar-inner {
    display: grid;
    grid-template-columns: minmax(195px, .74fr) minmax(620px, 3fr) auto;
    align-items: stretch;
    min-height: 88px;
}

.capability-systembar-label {
    display: flex;
    align-items: center;
    gap: 13px;
    padding-right: 27px;
    border-right: 1px solid rgba(255, 255, 255, .08);
}

.capability-status-dot {
    position: relative;
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--pink);
    box-shadow: 0 0 0 5px rgba(255, 0, 159, .08), 0 0 18px rgba(255, 0, 159, .48);
}

.capability-status-dot::after {
    content: "";
    position: absolute;
    inset: -7px;
    border: 1px solid rgba(255, 0, 159, .18);
    border-radius: inherit;
    animation: capability-pulse 2.8s ease-out infinite;
}

.capability-systembar-label div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.capability-systembar-label small {
    color: var(--pink);
    font-family: var(--tech);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .15em;
}

.capability-systembar-label strong {
    color: #f4f4f8;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
}

.capability-systembar-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(82px, 1fr));
    min-width: 0;
}

.capability-systembar-grid a {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    padding: 17px 14px;
    border-right: 1px solid rgba(255, 255, 255, .065);
    color: #a7a7b2;
    transition: color .25s ease, background .25s ease, transform .25s ease;
}

.capability-systembar-grid a::after {
    content: "";
    position: absolute;
    right: 14px;
    bottom: 0;
    left: 14px;
    height: 2px;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(90deg, var(--pink), #b54cff);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s cubic-bezier(.2, .7, .2, 1);
    box-shadow: 0 0 18px rgba(255, 0, 159, .3);
}

.capability-systembar-grid a:hover,
.capability-systembar-grid a:focus-visible {
    color: #fff;
    background: linear-gradient(180deg, rgba(255, 0, 159, .065), rgba(255, 0, 159, .015));
    transform: translateY(-2px);
}

.capability-systembar-grid a:hover::after,
.capability-systembar-grid a:focus-visible::after {
    transform: scaleX(1);
}

.capability-systembar-grid i {
    color: #5d5d69;
    font-family: var(--tech);
    font-size: 8px;
    font-style: normal;
    letter-spacing: .08em;
    transition: color .25s ease;
}

.capability-systembar-grid a:hover i,
.capability-systembar-grid a:focus-visible i {
    color: var(--pink);
}

.capability-systembar-grid span {
    overflow: hidden;
    color: inherit;
    font-family: var(--tech);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .06em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.capability-systembar-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 146px;
    padding: 0 20px;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    background: linear-gradient(135deg, rgba(255, 0, 159, .13), rgba(181, 76, 255, .08));
    transition: background .25s ease, color .25s ease;
}

.capability-systembar-link span {
    color: var(--pink);
    transition: transform .25s ease;
}

.capability-systembar-link:hover {
    background: linear-gradient(135deg, rgba(255, 0, 159, .22), rgba(181, 76, 255, .13));
}

.capability-systembar-link:hover span {
    transform: translate(2px, -2px);
}

@keyframes capability-pulse {
    0% { opacity: .65; transform: scale(.6); }
    75%, 100% { opacity: 0; transform: scale(1.45); }
}

@media (max-width: 1250px) {
    .capability-systembar-inner {
        grid-template-columns: minmax(180px, .8fr) minmax(520px, 3fr);
    }

    .capability-systembar-link {
        display: none;
    }

    .capability-systembar-grid {
        grid-template-columns: repeat(8, minmax(70px, 1fr));
    }

    .capability-systembar-grid a {
        padding-inline: 10px;
    }
}

@media (max-width: 940px) {
    .capability-systembar-inner {
        display: block;
        min-height: 0;
        padding: 18px 0 14px;
    }

    .capability-systembar-label {
        padding: 0 18px 14px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .07);
    }

    .capability-systembar-grid {
        display: flex;
        overflow-x: auto;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
    }

    .capability-systembar-grid::-webkit-scrollbar {
        display: none;
    }

    .capability-systembar-grid a {
        flex: 0 0 145px;
        min-height: 68px;
        padding: 14px 18px;
        scroll-snap-align: start;
    }
}

@media (max-width: 560px) {
    .capability-systembar-label strong {
        font-size: 11px;
    }

    .capability-systembar-grid a {
        flex-basis: 132px;
    }
}

/* Services */
.services-section {
    overflow: hidden;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 17px;
}

.service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 390px;
    padding: 27px 27px 25px;
    overflow: hidden;
    border: 1px solid rgba(10, 10, 14, .09);
    border-radius: 18px;
    background: linear-gradient(150deg, #fff 0%, #f7f7f9 100%);
    box-shadow: 0 18px 52px rgba(12, 7, 15, .045);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.service-card::before {
    content: "";
    position: absolute;
    top: -100px;
    right: -100px;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 0, 159, .14), transparent 68%);
    opacity: 0;
    transition: opacity .35s ease;
}

.service-card:hover {
    z-index: 2;
    border-color: rgba(255, 0, 159, .24);
    box-shadow: 0 26px 72px rgba(19, 7, 21, .1);
    transform: translateY(-7px);
}

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

.service-card-top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 64px;
    color: var(--pink);
    font-family: var(--tech);
    font-size: 12px;
}

.service-card-top i {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(10, 10, 14, .11);
    border-radius: 10px;
    color: var(--ink);
    font-style: normal;
    transition: background .25s ease, color .25s ease, transform .25s ease;
}

.service-card:hover .service-card-top i {
    background: var(--pink);
    color: #fff;
    transform: rotate(7deg);
}

.service-kicker {
    position: relative;
    margin-bottom: 11px;
    color: #8c8c96;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .11em;
}

.service-card h3,
.service-card h2 {
    position: relative;
    margin-bottom: 17px;
    font-family: var(--tech);
    font-size: 25px;
    font-weight: 600;
    letter-spacing: -.03em;
}

.service-card > p:not(.service-kicker) {
    position: relative;
    margin-bottom: 25px;
    color: #676772;
    font-size: 14px;
    line-height: 1.75;
}

.service-card > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: auto;
    color: var(--ink);
    font-family: var(--tech);
    font-size: 12px;
    font-weight: 700;
}

.service-card > a span {
    color: var(--pink);
}

.section-link-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 42px;
}

/* Platform */
.platform-section {
    overflow: hidden;
}

.platform-glow {
    position: absolute;
    top: 7%;
    right: -8%;
    width: 58%;
    height: 84%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(255, 0, 159, .16), transparent 67%);
    filter: blur(30px);
    pointer-events: none;
}

.platform-layout {
    position: relative;
    display: grid;
    grid-template-columns: .82fr 1.18fr;
    align-items: center;
    gap: 90px;
}

.platform-copy h2 {
    max-width: 680px;
    margin-top: 16px;
}

.platform-copy > p {
    max-width: 610px;
    color: var(--muted-dark);
    font-size: 17px;
}

.feature-list {
    margin: 38px 0 34px;
    border-top: 1px solid var(--line-dark);
}

.feature-list > div {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 17px;
    padding: 19px 0;
    border-bottom: 1px solid var(--line-dark);
}

.feature-list span {
    color: var(--pink);
    font-family: var(--tech);
    font-size: 11px;
}

.feature-list p {
    margin: 0;
    color: #8f8f9b;
    font-size: 14px;
}

.feature-list b {
    display: inline-block;
    min-width: 145px;
    color: #fff;
    font-weight: 600;
}

.platform-visual {
    position: relative;
    min-height: 620px;
}

.module {
    position: absolute;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 17px;
    background: rgba(17, 17, 24, .82);
    box-shadow: 0 35px 90px rgba(0, 0, 0, .44);
    backdrop-filter: blur(18px);
}

.module-main {
    top: 56px;
    right: 16px;
    width: 71%;
    min-height: 470px;
    transform: rotate(2deg);
}

.module-data {
    top: 0;
    left: 0;
    width: 43%;
    min-height: 235px;
    transform: rotate(-4deg);
}

.module-server {
    bottom: 16px;
    left: 6%;
    width: 42%;
    min-height: 205px;
    transform: rotate(3deg);
}

.module-head {
    display: flex;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    color: #777783;
    font-family: var(--tech);
    font-size: 9px;
    letter-spacing: .08em;
}

.module-head b {
    color: var(--pink);
    font-weight: 500;
}

.module-body {
    padding: 22px;
}

.module-chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 11px;
    height: 198px;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 11px;
    background: linear-gradient(rgba(255, 255, 255, .026) 1px, transparent 1px);
    background-size: 100% 39px;
}

.module-chart-bars i {
    flex: 1;
    height: var(--h);
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, var(--pink-bright), rgba(255, 0, 159, .22));
    box-shadow: 0 0 20px rgba(255, 0, 159, .1);
}

.module-row {
    display: flex;
    justify-content: space-between;
    margin-top: 18px;
    color: #8e8e99;
    font-size: 11px;
}

.module-row b {
    color: #fff;
    font-family: var(--tech);
}

.module-progress {
    height: 5px;
    margin-top: 8px;
    overflow: hidden;
    border-radius: 10px;
    background: #2b2b34;
}

.module-progress i {
    display: block;
    width: 78%;
    height: 100%;
    background: linear-gradient(90deg, var(--pink), var(--pink-bright));
    animation: breathe 3s ease-in-out infinite;
}

@keyframes breathe {
    50% { width: 91%; }
}

.module-mini {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    margin-top: 16px;
}

.module-mini > div {
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 8px;
}

.module-mini span {
    display: block;
    color: #666672;
    font-size: 8px;
}

.module-mini b {
    display: block;
    margin-top: 5px;
    font-family: var(--tech);
    font-size: 16px;
}

.data-nodes {
    position: relative;
    height: 130px;
    margin: 15px;
}

.data-nodes i {
    position: absolute;
    z-index: 2;
    width: 13px;
    height: 13px;
    border: 2px solid var(--pink);
    border-radius: 50%;
    background: #111118;
    box-shadow: 0 0 15px rgba(255, 0, 159, .46);
}

.data-nodes i:nth-child(1) { top: 12px; left: 20px; }
.data-nodes i:nth-child(2) { top: 83px; left: 48px; }
.data-nodes i:nth-child(3) { top: 45px; left: 46%; }
.data-nodes i:nth-child(4) { top: 10px; right: 26px; }
.data-nodes i:nth-child(5) { right: 16px; bottom: 10px; }

.data-nodes span {
    position: absolute;
    inset: 18px 23px;
    background:
        linear-gradient(23deg, transparent 47%, rgba(255, 0, 159, .35) 49%, rgba(255, 0, 159, .35) 51%, transparent 53%),
        linear-gradient(-28deg, transparent 47%, rgba(255, 255, 255, .12) 49%, rgba(255, 255, 255, .12) 51%, transparent 53%);
}

.module-data p,
.module-server p {
    margin: 0 15px 15px;
    color: #73737f;
    font-size: 10px;
}

.server-lines {
    display: grid;
    gap: 12px;
    padding: 24px 18px 16px;
}

.server-lines i {
    position: relative;
    height: 29px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 7px;
    background: rgba(255, 255, 255, .025);
}

.server-lines i::after {
    content: "";
    position: absolute;
    top: 11px;
    right: 11px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #55e995;
    box-shadow: 0 0 8px #55e995;
}

.platform-core {
    position: absolute;
    top: 46%;
    left: 39%;
    z-index: 8;
    display: grid;
    place-items: center;
    width: 116px;
    height: 116px;
    border: 1px solid rgba(255, 0, 159, .58);
    border-radius: 50%;
    background: rgba(7, 7, 10, .91);
    box-shadow: 0 0 70px rgba(255, 0, 159, .25), inset 0 0 25px rgba(255, 0, 159, .08);
    transform: translate(-50%, -50%);
}

.platform-core::before,
.platform-core::after {
    content: "";
    position: absolute;
    inset: -13px;
    border: 1px solid rgba(255, 0, 159, .18);
    border-radius: 50%;
    animation: orbitPulse 3.5s ease-in-out infinite;
}

.platform-core::after {
    inset: -28px;
    animation-delay: .5s;
}

@keyframes orbitPulse {
    50% { opacity: .32; transform: scale(1.06); }
}

.platform-core i {
    position: absolute;
    top: 16px;
    right: 20px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pink);
    box-shadow: 0 0 13px var(--pink);
}

.platform-core span {
    color: #fff;
    font-family: var(--display);
    font-size: 10px;
    line-height: 1.55;
    text-align: center;
}

/* Process */
.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--line-light);
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
}

.process-card {
    position: relative;
    min-height: 360px;
    padding: 31px;
    border-right: 1px solid var(--line-light);
    transition: background .3s ease, transform .3s ease;
}

.process-card:last-child {
    border-right: 0;
}

.process-card:hover {
    z-index: 2;
    background: #faf5f8;
}

.process-card > span {
    color: var(--pink);
    font-family: var(--tech);
    font-size: 11px;
}

.process-icon {
    display: grid;
    place-items: center;
    width: 70px;
    height: 70px;
    margin: 74px 0 45px;
    border: 1px solid var(--line-light);
    border-radius: 16px;
    color: var(--pink);
    font-family: var(--tech);
    font-size: 27px;
    background: #fafafd;
    transition: transform .3s ease, background .3s ease, color .3s ease;
}

.process-card:hover .process-icon {
    background: var(--pink);
    color: #fff;
    transform: rotate(6deg);
}

.process-card h3 {
    font-weight: 600;
}

.process-card p {
    margin: 0;
    color: var(--muted-light);
    font-size: 14px;
}

/* Projects */
.projects-section {
    overflow: hidden;
}

.project-showcase {
    display: grid;
    gap: 104px;
}

.project-item {
    display: grid;
    grid-template-columns: minmax(0, 1.22fr) minmax(330px, .78fr);
    align-items: center;
    gap: 72px;
}

.project-item:nth-child(even) .project-visual {
    order: 2;
}

.project-item:nth-child(even) .project-info {
    order: 1;
}

.project-visual,
.archive-project-visual {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 470px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 20px;
    transition: transform .35s ease, box-shadow .35s ease;
}

.project-visual:hover,
.archive-project-visual:hover {
    transform: translateY(-7px);
    box-shadow: 0 35px 85px rgba(0, 0, 0, .3);
}

.project-visual-1 {
    background: radial-gradient(circle at 70% 26%, rgba(255, 0, 159, .38), transparent 34%), linear-gradient(135deg, #1a0b16, #09090e);
}

.project-visual-2 {
    background: radial-gradient(circle at 24% 20%, rgba(82, 143, 255, .27), transparent 34%), linear-gradient(135deg, #0c1220, #09090e);
}

.project-visual-3 {
    background: radial-gradient(circle at 75% 25%, rgba(134, 80, 255, .3), transparent 35%), linear-gradient(135deg, #160d23, #09090e);
}

.project-visual img,
.archive-project-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-mockup {
    width: 82%;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 15px;
    background: rgba(10, 10, 15, .84);
    box-shadow: 0 34px 90px rgba(0, 0, 0, .42);
    transform: perspective(1100px) rotateX(3deg) rotateY(-6deg);
}

.project-mockup-top {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 13px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    color: #7f7f8b;
    font-family: var(--tech);
    font-size: 8px;
}

.project-mockup-top i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4c4c57;
}

.project-mockup-top i:first-child {
    background: var(--pink);
}

.project-mockup-top span {
    margin-left: auto;
}

.project-mockup-body {
    display: grid;
    grid-template-columns: 54px 1fr;
    min-height: 320px;
}

.project-mockup-body aside {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;
    padding-top: 23px;
    border-right: 1px solid rgba(255, 255, 255, .06);
}

.project-mockup-body aside b {
    width: 25px;
    height: 25px;
    border-radius: 7px;
    background: rgba(255, 255, 255, .05);
}

.project-mockup-body aside b:first-child {
    border: 1px solid rgba(255, 0, 159, .5);
    background: rgba(255, 0, 159, .09);
}

.project-mockup-body > div {
    position: relative;
    padding: 34px 25px;
}

.project-mockup-body > div > span {
    display: block;
    width: 45%;
    height: 8px;
    margin-bottom: 11px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .08);
}

.project-mockup-body > div > span:nth-child(2) {
    width: 73%;
}

.project-mockup-body > div > span:nth-child(3) {
    width: 61%;
}

.mockup-chart {
    position: absolute;
    right: 25px;
    bottom: 26px;
    left: 25px;
    height: 145px;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 10px;
    background:
        linear-gradient(150deg, transparent 49%, rgba(255, 0, 159, .92) 50%, rgba(255, 0, 159, .92) 51%, transparent 52%),
        linear-gradient(rgba(255, 255, 255, .027) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .027) 1px, transparent 1px);
    background-size: 100% 100%, 100% 36px, 55px 100%;
}

.project-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 20px;
}

.project-meta span {
    padding: 6px 9px;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 999px;
    color: #9797a2;
    font-size: 9px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.project-info h3 {
    margin-bottom: 20px;
    font-family: var(--display);
    font-size: clamp(32px, 3.2vw, 48px);
    font-weight: 400;
    letter-spacing: -.04em;
}

.project-info > p {
    color: var(--muted-dark);
    line-height: 1.8;
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 26px 0;
}

.tag-list span {
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 7px;
    color: #81818c;
    font-size: 9px;
}

/* Technology */
.technology-section {
    background: #0a0a0e;
    color: #fff;
}

.technology-layout {
    display: grid;
    grid-template-columns: .84fr 1.16fr;
    align-items: center;
    gap: 100px;
}

.technology-copy > p {
    color: var(--muted-dark);
    font-size: 17px;
}

.technology-points {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 30px;
}

.technology-points span {
    padding: 9px 12px;
    border: 1px solid var(--line-dark);
    border-radius: 8px;
    color: #9c9ca7;
    font-family: var(--tech);
    font-size: 10px;
}

.technology-terminal {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 18px;
    background: #0d0d13;
    box-shadow: var(--shadow), 0 0 80px rgba(255, 0, 159, .07);
}

.terminal-head {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 48px;
    padding: 0 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.terminal-head > span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #454550;
}

.terminal-head > span:first-child {
    background: var(--pink);
}

.terminal-head b {
    margin-left: auto;
    color: #73737e;
    font-family: var(--tech);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .07em;
}

.terminal-body {
    padding: 31px 30px 27px;
    font-family: var(--tech);
    font-size: 13px;
}

.terminal-body p {
    display: grid;
    grid-template-columns: 34px 1fr;
    margin-bottom: 15px;
    color: #d9d9e1;
}

.terminal-body p > i {
    color: #44444f;
    font-style: normal;
}

.term-muted { color: #6d6d78; }
.term-pink { color: var(--pink-bright); }
.term-green { color: #68e8a1; }

.terminal-status {
    display: flex;
    justify-content: space-between;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    color: #8d8d98;
}

.terminal-status span {
    display: flex;
    align-items: center;
    gap: 9px;
}

.terminal-status span i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #55e995;
    box-shadow: 0 0 9px #55e995;
}

.terminal-status b {
    color: var(--pink);
}

/* About */
.about-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 100px;
}

.about-visual {
    position: relative;
    min-height: 570px;
    overflow: hidden;
    border-radius: 20px;
    background:
        linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px),
        radial-gradient(circle at 65% 38%, rgba(255, 0, 159, .22), transparent 34%),
        #0b0b10;
    background-size: 60px 60px, 60px 60px, auto, auto;
}

.about-word {
    position: absolute;
    top: 29px;
    left: 29px;
    color: rgba(255, 255, 255, .055);
    font-family: var(--display);
    font-size: clamp(68px, 9vw, 120px);
    letter-spacing: -.08em;
}

.about-orbit {
    position: absolute;
    top: 50%;
    left: 52%;
    display: grid;
    place-items: center;
    width: 190px;
    height: 190px;
    border: 1px solid rgba(255, 0, 159, .4);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.about-orbit::before,
.about-orbit::after {
    content: "";
    position: absolute;
    inset: -45px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 50%;
}

.about-orbit::after {
    inset: -95px;
    border-color: rgba(255, 0, 159, .12);
}

.about-orbit i {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--pink);
    box-shadow: 0 0 14px var(--pink);
}

.about-orbit i:first-child { top: -5px; left: 47%; }
.about-orbit i:nth-child(2) { right: -5px; bottom: 42px; }

.about-orbit span {
    display: grid;
    place-items: center;
    width: 105px;
    height: 105px;
    border-radius: 50%;
    background: var(--pink);
    color: #fff;
    font-family: var(--display);
    font-size: 38px;
    box-shadow: 0 0 55px rgba(255, 0, 159, .32);
}

.about-visual > p {
    position: absolute;
    bottom: 30px;
    left: 30px;
    margin: 0;
    color: #7f7f8b;
    font-family: var(--tech);
    font-size: 10px;
    letter-spacing: .13em;
    line-height: 1.75;
}

.about-copy h2 {
    margin-top: 17px;
    font-size: clamp(35px, 4vw, 56px);
}

.about-copy > p {
    color: var(--muted-light);
    font-size: 16px;
}

.about-values {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 32px 0;
}

.about-values span {
    position: relative;
    padding: 13px 14px 13px 36px;
    border: 1px solid var(--line-light);
    border-radius: 9px;
    font-family: var(--tech);
    font-size: 11px;
}

.about-values span::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 14px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pink);
    transform: translateY(-50%);
}

/* FAQ */
.faq-section {
    background: #0a0a0e;
    color: #fff;
}

.faq-layout {
    display: grid;
    grid-template-columns: .65fr 1.35fr;
    gap: 100px;
}

.faq-intro {
    position: sticky;
    top: 120px;
    align-self: start;
}

.faq-intro h2 {
    margin-top: 16px;
    font-size: clamp(36px, 4vw, 54px);
}

.faq-intro > p {
    color: var(--muted-dark);
}

.faq-item {
    border-top: 1px solid var(--line-dark);
}

.faq-item:last-child {
    border-bottom: 1px solid var(--line-dark);
}

.faq-item button {
    display: grid;
    grid-template-columns: 48px 1fr 24px;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 88px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    text-align: left;
    cursor: pointer;
}

.faq-item button > span {
    color: var(--pink);
    font-family: var(--tech);
    font-size: 10px;
}

.faq-item button b {
    font-family: var(--tech);
    font-size: 19px;
    font-weight: 500;
}

.faq-item button i {
    position: relative;
    width: 20px;
    height: 20px;
}

.faq-item button i::before,
.faq-item button i::after {
    content: "";
    position: absolute;
    top: 9px;
    left: 2px;
    width: 16px;
    height: 1px;
    background: #7b7b86;
    transition: transform .25s ease;
}

.faq-item button i::after {
    transform: rotate(90deg);
}

.faq-item.open button i::after {
    transform: rotate(0);
}

.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .35s ease;
}

.faq-answer > p {
    min-height: 0;
    margin: 0;
    overflow: hidden;
    color: #9b9ba6;
}

.faq-item.open .faq-answer {
    grid-template-rows: 1fr;
}

.faq-item.open .faq-answer > p {
    padding: 0 48px 29px 62px;
}

/* Final CTA */
.final-cta {
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.final-cta-glow {
    position: absolute;
    right: -10%;
    bottom: -60%;
    width: 70%;
    height: 130%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(255, 0, 159, .25), transparent 67%);
    pointer-events: none;
}

.final-cta-layout {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 320px;
    align-items: center;
    gap: 100px;
}

.final-cta h2 {
    max-width: 880px;
    margin-top: 17px;
}

.final-cta p {
    max-width: 690px;
    color: var(--muted-dark);
}

.final-cta-action {
    display: grid;
    justify-items: center;
    gap: 21px;
}

.cta-circle {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    width: 238px;
    height: 238px;
    padding: 34px;
    border-radius: 50%;
    background: var(--pink);
    color: #fff;
    box-shadow: 0 0 90px rgba(255, 0, 159, .26);
    transition: transform .3s ease, box-shadow .3s ease;
}

.cta-circle:hover {
    transform: rotate(-4deg) scale(1.03);
    box-shadow: 0 0 120px rgba(255, 0, 159, .4);
}

.cta-circle span {
    font-family: var(--display);
    font-size: 18px;
    line-height: 1.45;
}

.cta-circle i {
    align-self: start;
    font-family: var(--tech);
    font-size: 26px;
    font-style: normal;
}

.final-cta-action > p {
    margin: 0;
    color: #777783;
    font-size: 11px;
    text-align: center;
}

/* Page heroes */
.page-hero,
.detail-hero {
    position: relative;
    isolation: isolate;
    min-height: 650px;
    padding: 188px 0 100px;
    overflow: hidden;
    background: #07070a;
}

.page-hero-glow {
    position: absolute;
    top: 8%;
    right: -8%;
    z-index: -1;
    width: 58%;
    height: 86%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(255, 0, 159, .2), transparent 68%);
    filter: blur(24px);
}

.page-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1040px;
}

.page-hero-inner h1 {
    max-width: 1040px;
}

.page-hero-inner > p {
    max-width: 760px;
    margin-bottom: 0;
    color: #b7b7c2;
    font-size: 19px;
    line-height: 1.8;
}

.generic-page {
    background: var(--light);
    color: var(--ink);
}

.prose {
    max-width: 850px;
}

.prose h2 {
    margin: 48px 0 20px;
    font-size: clamp(31px, 3.6vw, 48px);
}

.prose h3 {
    margin: 34px 0 14px;
}

.prose p,
.prose li {
    color: var(--muted-light);
    font-size: 17px;
    line-height: 1.85;
}

.prose a {
    color: var(--pink-deep);
    text-decoration: underline;
}

/* Services page */
.services-page-intro {
    display: grid;
    grid-template-columns: .5fr 1fr;
    gap: 70px;
    margin-bottom: 56px;
}

.services-page-intro > p {
    max-width: 680px;
    color: var(--muted-light);
    font-size: 17px;
}

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

.service-card-detailed {
    min-height: 550px;
    padding: 34px;
}

.service-card-detailed .service-card-top {
    margin-bottom: 42px;
}

.service-card-detailed h2 {
    font-size: 32px;
}

.service-card-detailed ul {
    display: grid;
    gap: 9px;
    margin: 9px 0 28px;
    padding: 0;
    list-style: none;
}

.service-card-detailed li {
    position: relative;
    padding-left: 20px;
    color: #686873;
    font-size: 13px;
}

.service-card-detailed li::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 0;
    width: 7px;
    height: 1px;
    background: var(--pink);
}

.service-combination-layout {
    display: grid;
    grid-template-columns: 1fr .75fr;
    align-items: end;
    gap: 100px;
}

.service-combination h2,
.project-cta h2,
.service-next h2,
.project-next h2 {
    margin-top: 16px;
    font-size: clamp(38px, 4.2vw, 58px);
}

.service-combination-layout > div:last-child p {
    color: var(--muted-dark);
}

/* Project archive */
.projects-archive {
    background: #0a0a0e;
    color: #fff;
}

.project-archive-list {
    display: grid;
    gap: 120px;
}

.archive-project {
    display: grid;
    grid-template-columns: 52px minmax(0, 1.1fr) minmax(350px, .8fr);
    align-items: center;
    gap: 40px;
}

.archive-project-index {
    align-self: start;
    padding-top: 16px;
    color: var(--pink);
    font-family: var(--tech);
    font-size: 11px;
}

.archive-project-visual {
    min-height: 430px;
}

.archive-project-copy h2 {
    margin-bottom: 18px;
    font-size: clamp(32px, 3.5vw, 52px);
}

.archive-project-copy > p {
    color: var(--muted-dark);
}

/* About page */
.about-story-layout {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 120px;
}

.about-story-layout h2 {
    margin-top: 16px;
    font-size: clamp(40px, 4.4vw, 60px);
}

.about-story-copy p {
    color: var(--muted-light);
    font-size: 21px;
    line-height: 1.75;
}

.principles-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--line-dark);
    border-radius: 18px;
    overflow: hidden;
}

.principles-grid article {
    min-height: 315px;
    padding: 30px;
    border-right: 1px solid var(--line-dark);
}

.principles-grid article:last-child {
    border-right: 0;
}

.principles-grid article > span {
    color: var(--pink);
    font-family: var(--tech);
    font-size: 10px;
}

.principles-grid h3 {
    margin-top: 92px;
    font-size: 27px;
}

.principles-grid p {
    color: var(--muted-dark);
    font-size: 14px;
}

.disciplines-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 110px;
}

.disciplines-visual {
    position: relative;
    min-height: 580px;
}

.discipline-core,
.discipline-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.discipline-core {
    display: grid;
    place-items: center;
    width: 150px;
    height: 150px;
    background: var(--pink);
    color: #fff;
    font-family: var(--display);
    font-size: 22px;
    box-shadow: 0 0 80px rgba(255, 0, 159, .25);
}

.discipline-ring {
    width: 330px;
    height: 330px;
    border: 1px solid rgba(10, 10, 14, .14);
}

.ring-two {
    width: 520px;
    height: 520px;
    border-style: dashed;
    animation: rotate 30s linear infinite;
}

@keyframes rotate {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.discipline-label {
    position: absolute;
    padding: 9px 12px;
    border: 1px solid var(--line-light);
    border-radius: 7px;
    background: #fff;
    font-family: var(--tech);
    font-size: 9px;
    box-shadow: 0 14px 40px rgba(10, 10, 14, .06);
}

.label-a { top: 7%; left: 39%; }
.label-b { top: 29%; right: 2%; }
.label-c { right: 11%; bottom: 17%; }
.label-d { bottom: 6%; left: 22%; }
.label-e { top: 35%; left: 0; }

.disciplines-layout > div:last-child > p {
    color: var(--muted-light);
    font-size: 17px;
}

.team-section {
    background: #0a0a0e;
    color: #fff;
}

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

.team-card {
    overflow: hidden;
    border: 1px solid var(--line-dark);
    border-radius: 17px;
    background: var(--panel);
}

.team-card img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.team-card > div {
    padding: 24px;
}

.team-card span {
    color: var(--pink);
    font-family: var(--tech);
    font-size: 10px;
}

.team-card p {
    color: var(--muted-dark);
}

/* Contact */
.contact-page-section {
    background: #0a0a0e;
}

.contact-page-layout {
    display: grid;
    grid-template-columns: .72fr 1.28fr;
    align-items: start;
    gap: 80px;
}

.contact-sidebar {
    position: sticky;
    top: 110px;
}

.contact-sidebar h2 {
    margin-top: 16px;
    font-size: clamp(38px, 4vw, 54px);
}

.contact-sidebar > p {
    color: var(--muted-dark);
}

.contact-direct {
    display: grid;
    margin-top: 35px;
    border-top: 1px solid var(--line-dark);
}

.contact-direct > a,
.contact-direct > div {
    position: relative;
    display: grid;
    gap: 3px;
    padding: 19px 40px 19px 0;
    border-bottom: 1px solid var(--line-dark);
}

.contact-direct span {
    color: #696975;
    font-family: var(--tech);
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.contact-direct b {
    font-weight: 500;
}

.contact-direct i {
    position: absolute;
    top: 23px;
    right: 3px;
    color: var(--pink);
    font-style: normal;
}

.contact-note {
    display: grid;
    grid-template-columns: 8px 1fr;
    gap: 12px;
    margin-top: 28px;
    padding: 16px;
    border: 1px solid rgba(72, 255, 156, .14);
    border-radius: 10px;
    background: rgba(72, 255, 156, .045);
}

.contact-note i {
    width: 7px;
    height: 7px;
    margin-top: 7px;
    border-radius: 50%;
    background: #55e995;
    box-shadow: 0 0 9px #55e995;
}

.contact-note p {
    margin: 0;
    color: #8da798;
    font-size: 12px;
}

.blnk-contact-form {
    position: relative;
    padding: 38px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 20px;
    background: linear-gradient(145deg, #121219, #0d0d12);
    box-shadow: 0 35px 100px rgba(0, 0, 0, .28);
}

.form-intro {
    margin-bottom: 30px;
}

.form-intro > span {
    color: var(--pink);
    font-family: var(--tech);
    font-size: 10px;
    letter-spacing: .13em;
}

.form-intro h3 {
    margin: 8px 0 10px;
    font-size: 30px;
}

.form-intro p {
    margin: 0;
    color: #858590;
    font-size: 13px;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 17px;
}

.blnk-contact-form label {
    display: block;
    color: #acacb6;
    font-family: var(--tech);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .045em;
}

.blnk-contact-form input,
.blnk-contact-form textarea,
.blnk-contact-form select {
    width: 100%;
    margin-top: 8px;
    padding: 14px 15px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 9px;
    outline: 0;
    background: #0b0b10;
    color: #fff;
    font-family: var(--body);
    font-size: 14px;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.blnk-contact-form input:focus,
.blnk-contact-form textarea:focus,
.blnk-contact-form select:focus {
    border-color: rgba(255, 0, 159, .65);
    box-shadow: 0 0 0 3px rgba(255, 0, 159, .08);
}

.blnk-contact-form > label {
    margin-top: 17px;
}

.form-consent {
    display: grid !important;
    grid-template-columns: 18px 1fr;
    gap: 11px;
    align-items: start;
    color: #7d7d88 !important;
    font-family: var(--body) !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
}

.form-consent input {
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    accent-color: var(--pink);
}

.form-consent a {
    color: #c6c6ce;
    text-decoration: underline;
}

.form-submit-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 27px;
}

.form-status {
    margin: 0;
    color: #8f8f99;
    font-size: 12px;
}

.honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.next-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--line-light);
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
}

.next-steps-grid article {
    min-height: 285px;
    padding: 30px;
    border-right: 1px solid var(--line-light);
}

.next-steps-grid article:last-child {
    border-right: 0;
}

.next-steps-grid span {
    color: var(--pink);
    font-family: var(--tech);
    font-size: 10px;
}

.next-steps-grid h3 {
    margin-top: 84px;
}

.next-steps-grid p {
    color: var(--muted-light);
}

/* Service detail */
.detail-hero-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 300px;
    align-items: end;
    gap: 90px;
}

.detail-hero h1 {
    max-width: 900px;
}

.detail-hero p {
    max-width: 720px;
    color: #b7b7c2;
    font-size: 18px;
}

.back-link {
    display: inline-block;
    margin-bottom: 30px;
    color: #787884;
    font-family: var(--tech);
    font-size: 11px;
}

.detail-hero-number {
    position: relative;
    display: grid;
    place-items: center;
    width: 260px;
    height: 260px;
    justify-self: end;
    border: 1px solid rgba(255, 0, 159, .35);
    border-radius: 50%;
    box-shadow: inset 0 0 45px rgba(255, 0, 159, .07), 0 0 80px rgba(255, 0, 159, .08);
}

.detail-hero-number::before,
.detail-hero-number::after {
    content: "";
    position: absolute;
    inset: 27px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
}

.detail-hero-number::after {
    inset: 63px;
    background: rgba(255, 0, 159, .08);
}

.detail-hero-number span {
    position: relative;
    z-index: 2;
    color: var(--pink);
    font-family: var(--display);
    font-size: 46px;
}

.service-detail-section {
    background: #fff;
    color: var(--ink);
}

.service-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: start;
    gap: 100px;
}

.service-prose {
    max-width: 760px;
}

.service-sidebar {
    position: sticky;
    top: 110px;
    padding: 28px;
    border: 1px solid var(--line-light);
    border-radius: 16px;
    background: #f7f7f9;
}

.service-sidebar ul {
    display: grid;
    gap: 12px;
    margin: 22px 0 28px;
    padding: 0;
    list-style: none;
}

.service-sidebar li {
    position: relative;
    padding: 0 0 12px 20px;
    border-bottom: 1px solid var(--line-light);
    color: #5f5f69;
    font-size: 13px;
}

.service-sidebar li::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 0;
    width: 7px;
    height: 1px;
    background: var(--pink);
}

.service-sidebar .button {
    width: 100%;
}

.outcome-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.outcome-grid article {
    min-height: 450px;
    padding: 37px;
    border: 1px solid var(--line-light);
    border-radius: 18px;
    background: #fff;
}

.outcome-grid h2 {
    margin-top: 18px;
    font-size: 38px;
}

.outcome-grid ul {
    display: grid;
    gap: 14px;
    margin-top: 35px;
    padding: 0;
    list-style: none;
}

.outcome-grid li {
    display: grid;
    grid-template-columns: 25px 1fr;
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line-light);
    color: var(--muted-light);
}

.outcome-grid li i {
    color: var(--pink);
    font-style: normal;
}

/* Project detail */
.project-detail-head {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 300px;
    align-items: end;
    gap: 80px;
}

.project-detail-head h1 {
    max-width: 980px;
}

.project-detail-head > div:first-child > p {
    max-width: 760px;
    color: #b7b7c2;
    font-size: 18px;
}

.project-tech-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 25px;
    border: 1px solid var(--line-dark);
    border-radius: 14px;
    background: rgba(255, 255, 255, .025);
}

.project-tech-panel .kicker {
    margin-bottom: 8px;
}

.project-tech-panel b {
    color: #a2a2ad;
    font-size: 13px;
    font-weight: 500;
}

.project-feature-image {
    position: relative;
    z-index: 3;
    margin-top: -70px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 22px;
    background: radial-gradient(circle at 72% 28%, rgba(255, 0, 159, .32), transparent 35%), #101016;
    box-shadow: 0 45px 110px rgba(0, 0, 0, .4);
}

.project-feature-image img {
    width: 100%;
    max-height: 760px;
    object-fit: cover;
}

.project-feature-generated {
    display: grid;
    place-items: center;
    min-height: 650px;
}

.project-feature-generated .project-mockup {
    width: 74%;
}

.project-metrics {
    background: #0a0a0e;
}

.project-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-right: 1px solid var(--line-dark);
    border-left: 1px solid var(--line-dark);
}

.project-metrics-grid > div {
    display: flex;
    flex-direction: column;
    min-height: 150px;
    justify-content: center;
    padding: 30px;
    border-right: 1px solid var(--line-dark);
}

.project-metrics-grid > div:last-child {
    border-right: 0;
}

.project-metrics strong {
    color: var(--pink);
    font-family: var(--display);
    font-size: 32px;
    font-weight: 400;
}

.project-metrics span {
    margin-top: 8px;
    color: #777783;
    font-family: var(--tech);
    font-size: 11px;
}

.project-case-section {
    background: #0a0a0e;
}

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

.case-grid article {
    min-height: 430px;
    padding: 32px;
    border: 1px solid var(--line-dark);
    border-radius: 17px;
    background: #101016;
}

.case-grid h2 {
    margin-top: 75px;
    font-family: var(--tech);
    font-size: 28px;
    font-weight: 600;
}

.case-grid p {
    color: var(--muted-dark);
    font-size: 14px;
}

.project-prose {
    color: var(--ink);
}

/* Footer */
.site-footer {
    position: relative;
    padding: 80px 0 25px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    background: #050507;
    color: #fff;
}

.footer-main {
    display: grid;
    grid-template-columns: 1.5fr .55fr .8fr;
    gap: 90px;
}

.brand-footer {
    width: 210px;
    height: 62px;
}

.footer-brand-wrap > p {
    max-width: 390px;
    margin-top: 22px;
    color: #777783;
}

.footer-socials {
    display: flex;
    gap: 18px;
    margin-top: 25px;
}

.footer-socials a {
    color: #a5a5af;
    font-family: var(--tech);
    font-size: 11px;
}

.footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.footer-label {
    margin-bottom: 12px;
    color: var(--pink);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.footer-column a,
.footer-column > span:not(.footer-label) {
    color: #858590;
    font-size: 13px;
    transition: color .2s ease;
}

.footer-column a:hover {
    color: #fff;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 65px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .065);
    color: #5f5f69;
    font-size: 11px;
}

.footer-bottom > span:last-child {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-bottom i {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #4f4f59;
}

.not-found {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 150px 0 90px;
}

.not-found-inner {
    max-width: 920px;
}

.not-found p {
    color: var(--muted-dark);
    font-size: 18px;
}

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

.post-card {
    padding: 28px;
    border: 1px solid var(--line-dark);
    border-radius: 15px;
    background: var(--panel);
}

.post-card > span {
    color: var(--pink);
    font-family: var(--tech);
    font-size: 10px;
}

.post-card h2 {
    margin-top: 55px;
    font-size: 28px;
}

.post-card p {
    color: var(--muted-dark);
}

@media (max-width: 1120px) {
    .main-nav ul { gap: 20px; }
    .hero-layout { grid-template-columns: minmax(0, .9fr) minmax(430px, 1fr); gap: 35px; }
    h1 { font-size: clamp(45px, 5vw, 70px); }
    .service-grid { grid-template-columns: repeat(2, 1fr); }
    .platform-layout { gap: 50px; }
    .project-item { gap: 45px; }
    .technology-layout { gap: 55px; }
    .about-layout { gap: 55px; }
    .faq-layout { gap: 55px; }
}

@media (max-width: 980px) {
    :root { --shell: min(100% - 36px, 760px); }
    .cursor-glow { display: none; }
    .site-header { height: 76px; }
    .site-header.scrolled { height: 70px; }
    .brand { width: 185px; height: 54px; }
    .menu-toggle { display: block; }
    .nav-cta { display: none; }
    .main-nav {
        position: fixed;
        inset: 70px 0 0;
        z-index: 90;
        display: grid;
        align-content: start;
        padding: 50px 26px;
        background: rgba(7, 7, 10, .985);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-12px);
        transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
    }
    .main-nav.open { opacity: 1; visibility: visible; transform: none; }
    .main-nav ul { flex-direction: column; align-items: flex-start; gap: 0; }
    .main-nav li { width: 100%; border-bottom: 1px solid rgba(255, 255, 255, .08); }
    .main-nav a { padding: 18px 0; font-size: 17px; }
    .main-nav a::after { display: none; }
    .hero { min-height: auto; padding: 130px 0 80px; }
    .hero-layout,
    .platform-layout,
    .technology-layout,
    .about-layout,
    .faq-layout,
    .final-cta-layout,
    .service-combination-layout,
    .about-story-layout,
    .disciplines-layout,
    .contact-page-layout,
    .detail-hero-layout,
    .service-detail-layout,
    .project-detail-head {
        grid-template-columns: 1fr;
    }
    .hero-layout { gap: 70px; }
    .hero-copy h1 em { display: inline; }
    .hero-glow { top: 42%; right: -30%; width: 120%; height: 58%; }
    .hero-visual { width: min(100%, 680px); margin-inline: auto; }
    .hero-stats { gap: 27px; }
    .system-window { transform: none !important; }
    .tag-one { left: 0; }
    .tag-two { right: 0; }
    .section { padding: 95px 0; }
    .section-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 50px; }
    .service-grid { grid-template-columns: repeat(2, 1fr); }
    .platform-layout { gap: 65px; }
    .platform-visual { min-height: 590px; }
    .process-grid { grid-template-columns: repeat(2, 1fr); }
    .process-card:nth-child(2) { border-right: 0; }
    .process-card:nth-child(-n+2) { border-bottom: 1px solid var(--line-light); }
    .project-item,
    .archive-project {
        grid-template-columns: 1fr;
    }
    .project-item:nth-child(even) .project-visual,
    .project-item:nth-child(even) .project-info { order: initial; }
    .project-visual { min-height: 430px; }
    .project-showcase { gap: 90px; }
    .about-visual { min-height: 520px; }
    .faq-intro,
    .contact-sidebar,
    .service-sidebar { position: static; }
    .final-cta-action { justify-items: start; }
    .page-hero,
    .detail-hero { min-height: auto; padding: 150px 0 85px; }
    .service-grid-page { grid-template-columns: 1fr; }
    .services-page-intro { grid-template-columns: 1fr; gap: 18px; }
    .archive-project-index { display: none; }
    .principles-grid { grid-template-columns: repeat(2, 1fr); }
    .principles-grid article:nth-child(2) { border-right: 0; }
    .principles-grid article:nth-child(-n+2) { border-bottom: 1px solid var(--line-dark); }
    .team-grid { grid-template-columns: repeat(2, 1fr); }
    .detail-hero-number { justify-self: start; }
    .outcome-grid,
    .case-grid { grid-template-columns: 1fr; }
    .project-tech-panel { max-width: 420px; }
    .project-feature-image { margin-top: -30px; }
    .project-feature-generated { min-height: 500px; }
    .footer-main { grid-template-columns: 1.2fr 1fr; }
    .footer-brand-wrap { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
    :root { --shell: min(100% - 28px, 580px); }
    body { font-size: 15px; }
    h1 { font-size: clamp(40px, 12vw, 54px); }
    h2 { font-size: clamp(34px, 10vw, 46px); }
    .brand { width: 158px; height: 48px; }
    .hero { padding-top: 112px; }
    .eyebrow { font-size: 9px; letter-spacing: .11em; }
    .hero-lead { font-size: 15px; }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .hero-actions .button { width: 100%; }
    .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
    .hero-stats > div { padding: 0 9px; text-align: center; }
    .hero-stats > div:first-child { padding-left: 0; }
    .hero-stats > div:last-child { padding-right: 0; }
    .hero-stats > div:not(:last-child)::after { height: 50px; }
    .hero-stats strong { font-size: 23px; }
    .hero-stats span { margin-inline: auto; font-size: 8px; }
    .window-top { grid-template-columns: 1fr 1fr; }
    .window-top > span:last-child { display: none; }
    .window-top b { justify-self: end; }
    .dashboard { grid-template-columns: 43px 1fr; min-height: 430px; }
    .dash-sidebar { padding-inline: 6px; }
    .dash-logo { width: 29px; height: 29px; }
    .dash-sidebar i { width: 24px; height: 24px; }
    .dash-main { padding: 17px 14px; }
    .dash-header h2 { font-size: 17px; }
    .status-pill { display: none; }
    .dash-kpis { grid-template-columns: repeat(2, 1fr); }
    .dash-kpis > div:nth-child(3) { display: none; }
    .chart-panel { height: 185px; }
    .chart-svg { height: 125px; }
    .dash-bottom { grid-template-columns: 1fr; }
    .health-ring { display: none; }
    .floating-tag { display: none; }
    .scroll-cue { display: none; }
    .section { padding: 78px 0; }
    .section-head { margin-bottom: 38px; }
    .service-grid { grid-template-columns: 1fr; }
    .service-card { min-height: 360px; }
    .service-card-top { margin-bottom: 46px; }
    .platform-copy > p,
    .technology-copy > p { font-size: 15px; }
    .feature-list > div { grid-template-columns: 33px 1fr; }
    .feature-list b { display: block; min-width: 0; }
    .platform-visual { min-height: 520px; }
    .module-main { top: 65px; right: 0; width: 86%; min-height: 390px; }
    .module-data { left: 0; width: 56%; min-height: 190px; }
    .module-server { bottom: 0; left: 0; width: 53%; min-height: 165px; }
    .module-chart-bars { height: 145px; padding: 17px; gap: 7px; }
    .module-mini > div:nth-child(3) { display: none; }
    .module-mini { grid-template-columns: 1fr 1fr; }
    .platform-core { left: 48%; width: 93px; height: 93px; }
    .process-grid { grid-template-columns: 1fr; }
    .process-card { min-height: 290px; border-right: 0; border-bottom: 1px solid var(--line-light); }
    .process-card:last-child { border-bottom: 0; }
    .process-icon { margin: 50px 0 34px; }
    .project-item { gap: 35px; }
    .project-visual,
    .archive-project-visual { min-height: 310px; }
    .project-mockup { width: 90%; }
    .project-mockup-body { min-height: 240px; }
    .mockup-chart { height: 100px; }
    .project-info h3 { font-size: 32px; }
    .technology-terminal { margin-top: 15px; }
    .terminal-body { padding: 24px 18px; font-size: 11px; overflow-x: auto; }
    .terminal-body p { min-width: 420px; }
    .about-visual { min-height: 430px; }
    .about-orbit { width: 145px; height: 145px; }
    .about-orbit::before { inset: -35px; }
    .about-orbit::after { inset: -72px; }
    .about-orbit span { width: 82px; height: 82px; font-size: 28px; }
    .about-values { grid-template-columns: 1fr; }
    .faq-item button { grid-template-columns: 34px 1fr 20px; min-height: 82px; }
    .faq-item button b { font-size: 15px; }
    .faq-item.open .faq-answer > p { padding: 0 20px 25px 48px; }
    .final-cta-layout { gap: 50px; }
    .cta-circle { width: 205px; height: 205px; }
    .page-hero,
    .detail-hero { padding: 126px 0 72px; }
    .page-hero-inner > p,
    .detail-hero p { font-size: 16px; }
    .service-card-detailed { min-height: 510px; padding: 27px; }
    .service-combination-layout { gap: 30px; }
    .archive-project { gap: 25px; }
    .about-story-copy p { font-size: 17px; }
    .principles-grid { grid-template-columns: 1fr; }
    .principles-grid article { min-height: 270px; border-right: 0; border-bottom: 1px solid var(--line-dark); }
    .principles-grid article:last-child { border-bottom: 0; }
    .principles-grid h3 { margin-top: 62px; }
    .disciplines-visual { min-height: 430px; overflow: hidden; }
    .discipline-ring { width: 245px; height: 245px; }
    .ring-two { width: 390px; height: 390px; }
    .discipline-core { width: 115px; height: 115px; }
    .discipline-label { font-size: 7px; }
    .team-grid { grid-template-columns: 1fr; }
    .contact-page-layout { gap: 50px; }
    .blnk-contact-form { padding: 24px 20px; }
    .form-grid { grid-template-columns: 1fr; }
    .form-submit-row { align-items: flex-start; flex-direction: column; }
    .next-steps-grid { grid-template-columns: 1fr; }
    .next-steps-grid article { min-height: 230px; border-right: 0; border-bottom: 1px solid var(--line-light); }
    .next-steps-grid article:last-child { border-bottom: 0; }
    .next-steps-grid h3 { margin-top: 54px; }
    .detail-hero-number { width: 190px; height: 190px; }
    .service-detail-layout { gap: 50px; }
    .outcome-grid article { min-height: 390px; padding: 28px; }
    .project-feature-image { width: calc(100% - 20px); }
    .project-feature-generated { min-height: 350px; }
    .project-feature-generated .project-mockup { width: 90%; }
    .project-metrics-grid { grid-template-columns: 1fr; }
    .project-metrics-grid > div { min-height: 110px; border-right: 0; border-bottom: 1px solid var(--line-dark); }
    .case-grid article { min-height: 350px; }
    .case-grid h2 { margin-top: 52px; }
    .footer-main { grid-template-columns: 1fr; gap: 38px; }
    .footer-brand-wrap { grid-column: auto; }
    .footer-bottom { flex-direction: column; gap: 8px; }
    .post-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}
/* Feinschliff: kompakter Systemzustands-Ring */
.health-ring{position:relative;overflow:hidden;background:rgba(255,255,255,.025)}
.health-ring::before{content:"";position:absolute;width:58px;height:58px;border-radius:50%;background:radial-gradient(circle at center,#0d0d13 54%,transparent 55%),conic-gradient(var(--pink) 0 94%,#292932 94% 100%);box-shadow:0 0 18px rgba(255,0,159,.12)}
.health-ring span,.health-ring p{position:relative;z-index:1}

/* ==========================================================
   V6.1 – Realistische, animierte Projekt-Systeme
   ========================================================== */
.project-visual,
.archive-project-visual {
    padding: 18px;
}

.project-system {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 430px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 15px;
    background: #080d15;
    box-shadow: 0 25px 70px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .035);
    transform-style: preserve-3d;
    will-change: transform;
}

.project-system-detail {
    min-height: min(720px, 56vw);
    border-radius: 20px;
}

.project-system img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.system-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(3, 7, 13, .28), transparent 18%, transparent 82%, rgba(3, 7, 13, .28)), linear-gradient(0deg, rgba(3, 7, 13, .26), transparent 24%);
}

/* eGrid */
.project-system-egrid {
    background: #050b14;
}

.egrid-dashboard-image {
    position: absolute;
    inset: 0;
    animation: egrid-dashboard-drift 10s ease-in-out infinite alternate;
}

.project-system-egrid::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 73% 31%, rgba(72, 106, 255, .12), transparent 27%), radial-gradient(circle at 86% 44%, rgba(255, 0, 159, .08), transparent 24%);
    mix-blend-mode: screen;
}

.system-scan {
    position: absolute;
    z-index: 2;
    top: -26%;
    right: 0;
    left: 0;
    height: 24%;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(60, 128, 255, .035) 35%, rgba(76, 146, 255, .14) 50%, rgba(60, 128, 255, .035) 65%, transparent);
    animation: system-scan 6.5s linear infinite;
}

.system-live {
    position: absolute;
    z-index: 5;
    top: 18px;
    right: 18px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid rgba(110, 255, 167, .22);
    border-radius: 999px;
    color: #c7fbd8;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .04em;
    background: rgba(6, 18, 18, .72);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .2);
    backdrop-filter: blur(12px);
}

.system-live i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #53e78b;
    box-shadow: 0 0 0 0 rgba(83, 231, 139, .42);
    animation: live-pulse 1.8s ease-out infinite;
}

.system-cursor {
    position: absolute;
    z-index: 7;
    top: 37%;
    left: 47%;
    width: 12px;
    height: 18px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .9));
    animation: cursor-tour 8s cubic-bezier(.45, 0, .35, 1) infinite;
}

.system-cursor::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-top: 14px solid #fff;
    border-right: 8px solid transparent;
    transform: rotate(-16deg);
}

.system-cursor::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 7px;
    width: 5px;
    height: 8px;
    border-radius: 2px;
    background: #fff;
    transform: rotate(-33deg);
}

.system-toast,
.itb-notification,
.cms-publish-toast {
    position: absolute;
    z-index: 8;
    right: 18px;
    bottom: 18px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 10px;
    color: #dfe8f5;
    font-size: 9px;
    background: rgba(8, 14, 24, .88);
    box-shadow: 0 17px 40px rgba(0, 0, 0, .35);
    backdrop-filter: blur(16px);
    animation: toast-cycle 7s ease-in-out infinite;
}

.system-toast i,
.itb-notification > i,
.cms-publish-toast > i {
    display: grid;
    place-items: center;
    width: 19px;
    height: 19px;
    border-radius: 6px;
    color: #05120a;
    font-style: normal;
    font-weight: 800;
    background: #5dea95;
}

.egrid-activity-line {
    position: absolute;
    z-index: 4;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.egrid-activity-line path {
    fill: none;
    stroke: rgba(87, 142, 255, .76);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 9 12;
    filter: drop-shadow(0 0 6px rgba(63, 120, 255, .55));
    animation: egrid-flow 4.5s linear infinite;
}

/* ITB – reale Website-Vorschau */
.project-system-itb {
    color: #10243a;
    background: #f1f7fb;
}

.itb-browser-bar {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 1fr minmax(140px, 2fr) 1fr;
    align-items: center;
    height: 42px;
    padding: 0 14px;
    border-bottom: 1px solid #dfe8ef;
    background: #f9fbfd;
}

.browser-dots {
    display: flex;
    gap: 5px;
}

.browser-dots i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d3dde6;
}

.browser-dots i:first-child { background: #ed6c67; }
.browser-dots i:nth-child(2) { background: #e7bb52; }
.browser-dots i:nth-child(3) { background: #62bd76; }

.browser-address {
    justify-self: center;
    width: min(100%, 235px);
    padding: 6px 12px;
    border: 1px solid #e1e8ee;
    border-radius: 7px;
    color: #6f8190;
    font-size: 8px;
    text-align: center;
    background: #fff;
}

.browser-actions {
    justify-self: end;
    color: #83919e;
}

.itb-site {
    position: absolute;
    top: 42px;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    background: linear-gradient(135deg, #f9fcfe 0%, #eef6fa 100%);
}

.itb-site::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -70px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(22, 147, 210, .2), rgba(22, 147, 210, .035) 48%, transparent 69%);
    animation: itb-glow 7s ease-in-out infinite alternate;
}

.itb-site-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 20px;
    height: 58px;
    padding: 0 25px;
    border-bottom: 1px solid rgba(18, 56, 84, .08);
    background: rgba(255, 255, 255, .78);
    backdrop-filter: blur(9px);
}

.itb-mark {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-right: auto;
}

.itb-mark span {
    color: #006e9f;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.06em;
}

.itb-mark small {
    max-width: 65px;
    color: #668094;
    font-size: 5px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .12em;
}

.itb-site-header nav {
    display: flex;
    gap: 18px;
    color: #64798a;
    font-size: 7px;
}

.itb-site-header > b {
    padding: 8px 11px;
    border-radius: 6px;
    color: #fff;
    font-size: 7px;
    background: #057faf;
}

.itb-hero-ui {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: 20px;
    min-height: 235px;
    padding: 25px 30px 18px;
}

.itb-hero-copy small {
    color: #1281ac;
    font-size: 6px;
    font-weight: 700;
    letter-spacing: .17em;
}

.itb-hero-copy h4 {
    margin: 10px 0 10px;
    color: #123047;
    font-size: clamp(22px, 2.5vw, 34px);
    line-height: 1.05;
    letter-spacing: -.04em;
}

.itb-hero-copy h4 em {
    color: #0581b0;
    font-style: normal;
}

.itb-hero-copy p {
    margin: 0 0 14px;
    color: #6b8191;
    font-size: 8px;
}

.itb-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 7px;
}

.itb-buttons b {
    padding: 8px 12px;
    border-radius: 6px;
    color: #fff;
    background: #0a81ad;
    box-shadow: 0 9px 22px rgba(3, 118, 165, .18);
}

.itb-buttons span { color: #567183; }

.itb-tech-card {
    position: relative;
    min-height: 185px;
    padding: 18px;
    overflow: hidden;
    border: 1px solid rgba(19, 103, 143, .16);
    border-radius: 17px;
    background: linear-gradient(155deg, rgba(255, 255, 255, .96), rgba(225, 240, 247, .84));
    box-shadow: 0 26px 55px rgba(41, 93, 118, .16);
}

.itb-heat-orbit {
    position: absolute;
    top: 17px;
    left: 50%;
    width: 132px;
    height: 132px;
    border: 1px solid rgba(4, 127, 176, .14);
    border-radius: 50%;
    transform: translateX(-50%);
}

.itb-heat-orbit::before,
.itb-heat-orbit::after {
    content: '';
    position: absolute;
    border: 1px solid rgba(4, 127, 176, .12);
    border-radius: 50%;
}

.itb-heat-orbit::before { inset: 16px; }
.itb-heat-orbit::after { inset: 34px; background: rgba(4, 127, 176, .06); }

.itb-heat-orbit i {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    margin: -3px;
    border-radius: 50%;
    background: #0c8abd;
    box-shadow: 0 0 14px rgba(12, 138, 189, .55);
    animation: itb-orbit 5s linear infinite;
}

.itb-heat-orbit i:nth-child(2) { animation-delay: -1.65s; }
.itb-heat-orbit i:nth-child(3) { animation-delay: -3.3s; }

.itb-heat-orbit span {
    position: absolute;
    z-index: 3;
    inset: 0;
    display: grid;
    place-items: center;
    color: #0a6e98;
    font-size: 22px;
    font-weight: 700;
}

.itb-status {
    position: absolute;
    right: 14px;
    bottom: 13px;
    left: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 10px;
    border-radius: 9px;
    color: #6a8291;
    font-size: 6px;
    background: rgba(255, 255, 255, .8);
}

.itb-status span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.itb-status span i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #4ac77b;
    box-shadow: 0 0 0 4px rgba(74, 199, 123, .12);
}

.itb-status b { color: #087aa7; }

.itb-services-ui {
    position: absolute;
    right: 24px;
    bottom: 18px;
    left: 24px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.itb-services-ui article {
    display: grid;
    grid-template-columns: 24px 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    padding: 10px;
    border: 1px solid rgba(18, 77, 108, .09);
    border-radius: 10px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 10px 22px rgba(47, 94, 117, .08);
    animation: itb-card-float 5s ease-in-out infinite;
}

.itb-services-ui article:nth-child(2) { animation-delay: -.8s; }
.itb-services-ui article:nth-child(3) { animation-delay: -1.6s; }
.itb-services-ui article:nth-child(4) { animation-delay: -2.4s; }

.itb-services-ui i {
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 21px;
    height: 21px;
    border-radius: 6px;
    color: #0581b0;
    font-size: 10px;
    font-style: normal;
    background: #e8f5fa;
}

.itb-services-ui b { color: #244258; font-size: 7px; }
.itb-services-ui span { color: #8194a1; font-size: 5px; }

.itb-notification {
    right: 17px;
    bottom: 17px;
    color: #2f4e62;
    background: rgba(255, 255, 255, .94);
    border-color: rgba(13, 112, 153, .16);
    animation-delay: -2s;
}

.itb-notification span,
.cms-publish-toast span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.itb-notification b,
.cms-publish-toast b { color: inherit; font-size: 8px; }

/* BLNK CMS – reale Inhaltsverwaltung */
.project-system-cms {
    color: #cfd7e6;
    background: #090b12;
}

.cms-topbar {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 1fr minmax(160px, 1.2fr) 1fr;
    align-items: center;
    height: 45px;
    padding: 0 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    background: #0c0f17;
}

.cms-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
}

.cms-brand span {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 1px solid rgba(255, 0, 159, .45);
    border-radius: 6px;
    color: var(--pink);
    font-family: var(--tech);
    background: rgba(255, 0, 159, .08);
}

.cms-search {
    justify-self: center;
    width: min(100%, 245px);
    padding: 7px 9px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 7px;
    color: #6f7786;
    font-size: 7px;
    background: #11151e;
}

.cms-search kbd {
    float: right;
    color: #828a98;
    font-family: inherit;
}

.cms-user {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 7px;
}

.cms-user i {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(145deg, #30394a, #161b26);
}

.cms-layout {
    position: absolute;
    top: 45px;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: 112px 1fr;
}

.cms-sidebar {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 17px 10px;
    border-right: 1px solid rgba(255, 255, 255, .055);
    background: #0c0f16;
}

.cms-sidebar small {
    margin: 7px 7px 3px;
    color: #565f70;
    font-size: 5px;
    letter-spacing: .12em;
}

.cms-sidebar span {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 8px;
    border-radius: 6px;
    color: #7d8797;
    font-size: 7px;
}

.cms-sidebar span.active {
    color: #f7f8fb;
    background: linear-gradient(90deg, rgba(255, 0, 159, .14), rgba(255, 0, 159, .035));
}

.cms-sidebar span i {
    width: 14px;
    color: #8c96a7;
    font-style: normal;
}

.cms-sidebar span.active i { color: var(--pink); }

.cms-sidebar span b {
    margin-left: auto;
    padding: 1px 5px;
    border-radius: 999px;
    color: #fff;
    font-size: 5px;
    background: var(--pink);
}

.cms-main {
    min-width: 0;
    padding: 18px;
    background: radial-gradient(circle at 82% 0%, rgba(255, 0, 159, .055), transparent 33%), #090b12;
}

.cms-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.cms-heading small {
    color: var(--pink);
    font-size: 5px;
    letter-spacing: .13em;
}

.cms-heading h4 {
    margin: 3px 0 0;
    color: #fff;
    font-size: 14px;
}

.cms-heading button {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 9px;
    border: 1px solid rgba(89, 231, 143, .18);
    border-radius: 7px;
    color: #aeeec7;
    font-size: 6px;
    background: rgba(50, 176, 103, .06);
}

.cms-heading button i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #59e78f;
    box-shadow: 0 0 0 0 rgba(89, 231, 143, .4);
    animation: live-pulse 1.8s ease-out infinite;
}

.cms-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 12px;
}

.cms-editor-card,
.cms-preview-card {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: 11px;
    background: #0e121b;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .22);
}

.cms-tabs {
    display: flex;
    gap: 18px;
    height: 35px;
    padding: 0 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .055);
    color: #667083;
    font-size: 6px;
}

.cms-tabs > * {
    display: flex;
    align-items: center;
}

.cms-tabs b {
    position: relative;
    color: #fff;
}

.cms-tabs b::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--pink);
}

.cms-editor-card > label {
    display: block;
    padding: 11px 14px 0;
    color: #788295;
    font-size: 6px;
}

.cms-editor-card input,
.cms-editor-card textarea {
    display: block;
    width: 100%;
    margin-top: 5px;
    padding: 8px 9px;
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: 6px;
    outline: 0;
    color: #dce3ee;
    font-family: inherit;
    font-size: 7px;
    line-height: 1.4;
    background: #0a0d14;
    resize: none;
}

.cms-editor-card textarea { height: 48px; }

.cms-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 11px 14px;
}

.cms-fields label {
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, .065);
    border-radius: 6px;
    color: #667185;
    font-size: 5px;
    background: #0a0d14;
}

.cms-fields span {
    display: block;
    margin-top: 4px;
    color: #d9dfeb;
    font-size: 7px;
}

.cms-save {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 14px;
    border-top: 1px solid rgba(255, 255, 255, .055);
    color: #6d788a;
    font-size: 5px;
}

.cms-save span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.cms-save span i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #58df8b;
}

.cms-save b {
    padding: 6px 9px;
    border-radius: 5px;
    color: #fff;
    background: var(--pink);
}

.cms-preview-top,
.cms-preview-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 34px;
    padding: 0 12px;
    color: #8a93a2;
    font-size: 6px;
}

.cms-preview-top { border-bottom: 1px solid rgba(255, 255, 255, .055); }
.cms-preview-meta { border-top: 1px solid rgba(255, 255, 255, .055); }
.cms-preview-meta b { color: #62df90; }

.cms-mini-site {
    position: relative;
    min-height: 226px;
    padding: 25px 18px;
    overflow: hidden;
    background: radial-gradient(circle at 75% 35%, rgba(255, 0, 159, .25), transparent 31%), linear-gradient(145deg, #080910, #12101a);
}

.cms-mini-site::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: .12;
    background-image: linear-gradient(rgba(255, 255, 255, .11) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .11) 1px, transparent 1px);
    background-size: 24px 24px;
}

.cms-mini-site > * { position: relative; z-index: 2; }
.cms-mini-site small { color: var(--pink); font-size: 5px; letter-spacing: .16em; }
.cms-mini-site h5 { margin: 11px 0 6px; color: #fff; font-size: 19px; line-height: 1.05; }
.cms-mini-site h5 em { color: var(--pink); font-style: normal; }
.cms-mini-site p { margin: 0 0 12px; color: #858a98; font-size: 6px; }
.cms-mini-site > b { display: inline-block; padding: 7px 9px; border-radius: 5px; color: #fff; font-size: 5px; background: var(--pink); }

.cms-mini-orbit {
    position: absolute;
    z-index: 1;
    right: 12px;
    bottom: 17px;
    width: 88px;
    height: 88px;
    border: 1px solid rgba(255, 0, 159, .24);
    border-radius: 50%;
    animation: cms-orbit-rotate 10s linear infinite;
}

.cms-mini-orbit::before {
    content: '';
    position: absolute;
    inset: 13px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 50%;
}

.cms-mini-orbit i {
    position: absolute;
    top: -3px;
    left: 50%;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    border-radius: 50%;
    background: var(--pink);
    box-shadow: 0 0 12px var(--pink);
}

.cms-mini-orbit span {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font-family: var(--tech);
    font-size: 29px;
    transform: rotate(0);
}

.cms-publish-toast {
    right: 16px;
    bottom: 16px;
    animation-delay: -4s;
}

/* generisches realistisches Dashboard */
.project-system-generic { padding: 0; }
.generic-appbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 43px;
    padding: 0 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    color: #dce5f2;
    font-size: 8px;
    background: #0c1119;
}
.generic-appbar b { display: flex; align-items: center; gap: 5px; color: #79dca0; font-size: 6px; }
.generic-appbar b i { width: 5px; height: 5px; border-radius: 50%; background: #55df8b; }
.generic-layout { display: grid; grid-template-columns: 55px 1fr; min-height: 387px; }
.generic-layout aside { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 17px; border-right: 1px solid rgba(255,255,255,.055); }
.generic-layout aside strong { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid rgba(255,0,159,.4); border-radius: 7px; color: var(--pink); font-family: var(--tech); font-size: 11px; }
.generic-layout aside i { width: 22px; height: 22px; border-radius: 6px; background: rgba(255,255,255,.045); }
.generic-layout aside i.active { background: rgba(255,0,159,.12); border: 1px solid rgba(255,0,159,.28); }
.generic-layout main { padding: 22px; }
.generic-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.generic-kpis span { padding: 12px; border: 1px solid rgba(255,255,255,.065); border-radius: 9px; background: #0d131c; }
.generic-kpis small { display: block; color: #778295; font-size: 6px; }
.generic-kpis b { display: block; margin-top: 5px; color: #fff; font-size: 17px; }
.generic-chart { display: flex; align-items: end; gap: 8px; height: 130px; margin-top: 13px; padding: 18px; border: 1px solid rgba(255,255,255,.065); border-radius: 9px; background: #0d131c; }
.generic-chart i { flex: 1; height: 35%; border-radius: 3px 3px 0 0; background: linear-gradient(#5c7cff, #315ee9); animation: generic-bars 4s ease-in-out infinite alternate; }
.generic-chart i:nth-child(2) { height: 58%; animation-delay: -.4s; }
.generic-chart i:nth-child(3) { height: 46%; animation-delay: -.8s; }
.generic-chart i:nth-child(4) { height: 77%; animation-delay: -1.2s; }
.generic-chart i:nth-child(5) { height: 64%; animation-delay: -1.6s; }
.generic-chart i:nth-child(6) { height: 88%; animation-delay: -2s; }
.generic-chart i:nth-child(7) { height: 73%; animation-delay: -2.4s; }
.generic-table { display: grid; gap: 7px; margin-top: 13px; }
.generic-table span { height: 28px; border: 1px solid rgba(255,255,255,.055); border-radius: 7px; background: linear-gradient(90deg, rgba(255,255,255,.045) 26%, transparent 26% 39%, rgba(255,255,255,.035) 39% 62%, transparent 62% 75%, rgba(255,255,255,.035) 75%); }

.project-feature-system {
    margin-top: -78px;
    margin-bottom: 0;
    position: relative;
    z-index: 5;
}

.project-feature-system .project-system {
    box-shadow: 0 45px 110px rgba(0, 0, 0, .38);
}

@keyframes egrid-dashboard-drift {
    0% { transform: scale(1.012) translate3d(0, 0, 0); }
    100% { transform: scale(1.03) translate3d(-.35%, -.3%, 0); }
}

@keyframes system-scan {
    from { transform: translateY(0); }
    to { transform: translateY(530%); }
}

@keyframes live-pulse {
    70% { box-shadow: 0 0 0 7px rgba(83, 231, 139, 0); }
    100% { box-shadow: 0 0 0 0 rgba(83, 231, 139, 0); }
}

@keyframes cursor-tour {
    0%, 12% { transform: translate3d(0, 0, 0); }
    28% { transform: translate3d(126px, -78px, 0); }
    45% { transform: translate3d(207px, 28px, 0); }
    62% { transform: translate3d(80px, 102px, 0); }
    80% { transform: translate3d(-118px, 51px, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

@keyframes toast-cycle {
    0%, 12% { opacity: 0; transform: translateY(14px) scale(.97); }
    20%, 70% { opacity: 1; transform: translateY(0) scale(1); }
    82%, 100% { opacity: 0; transform: translateY(9px) scale(.98); }
}

@keyframes egrid-flow {
    to { stroke-dashoffset: -84; }
}

@keyframes itb-glow {
    to { transform: translate3d(-25px, 18px, 0) scale(1.06); }
}

@keyframes itb-orbit {
    from { transform: rotate(0deg) translateX(61px) rotate(0deg); }
    to { transform: rotate(360deg) translateX(61px) rotate(-360deg); }
}

@keyframes itb-card-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@keyframes cms-orbit-rotate {
    to { transform: rotate(360deg); }
}

@keyframes generic-bars {
    to { filter: brightness(1.22); transform: scaleY(.88); transform-origin: bottom; }
}

@media (max-width: 1050px) {
    .project-system { min-height: 390px; }
    .itb-site-header nav { display: none; }
    .itb-hero-ui { min-height: 216px; }
    .itb-services-ui { grid-template-columns: repeat(2, 1fr); }
    .itb-services-ui article:nth-child(n+3) { display: none; }
    .cms-layout { grid-template-columns: 88px 1fr; }
    .cms-sidebar { padding-inline: 7px; }
    .cms-sidebar span { padding-inline: 6px; font-size: 6px; }
}

@media (max-width: 760px) {
    .project-visual,
    .archive-project-visual { padding: 9px; }
    .project-system { min-height: 300px; border-radius: 11px; }
    .project-system-detail { min-height: 340px; }
    .system-live { top: 10px; right: 10px; }
    .system-toast,
    .itb-notification,
    .cms-publish-toast { right: 9px; bottom: 9px; }
    .system-cursor,
    .egrid-activity-line { display: none; }
    .itb-browser-bar { height: 34px; }
    .itb-site { top: 34px; }
    .itb-site-header { height: 45px; padding-inline: 14px; }
    .itb-site-header > b { display: none; }
    .itb-hero-ui { min-height: 160px; padding: 16px; }
    .itb-hero-copy h4 { font-size: 20px; }
    .itb-hero-copy p { display: none; }
    .itb-tech-card { min-height: 135px; }
    .itb-heat-orbit { width: 94px; height: 94px; }
    .itb-heat-orbit i { animation-name: none; }
    .itb-heat-orbit span { font-size: 17px; }
    .itb-services-ui { right: 12px; bottom: 10px; left: 12px; }
    .itb-services-ui article { padding: 7px; }
    .cms-topbar { height: 36px; grid-template-columns: 1fr 1fr; }
    .cms-search { display: none; }
    .cms-layout { top: 36px; grid-template-columns: 62px 1fr; }
    .cms-sidebar span { justify-content: center; padding: 6px; }
    .cms-sidebar span:not(.active) { opacity: .72; }
    .cms-sidebar span i { width: auto; }
    .cms-sidebar span { font-size: 0; }
    .cms-sidebar small { font-size: 0; height: 4px; }
    .cms-sidebar span b { display: none; }
    .cms-main { padding: 11px; }
    .cms-heading h4 { font-size: 10px; }
    .cms-grid { grid-template-columns: 1fr; }
    .cms-preview-card { display: none; }
    .cms-editor-card textarea { height: 42px; }
    .project-feature-system { margin-top: -38px; }
}

@media (prefers-reduced-motion: reduce) {
    .egrid-dashboard-image,
    .system-scan,
    .system-live i,
    .system-cursor,
    .system-toast,
    .egrid-activity-line path,
    .itb-site::before,
    .itb-heat-orbit i,
    .itb-services-ui article,
    .itb-notification,
    .cms-heading button i,
    .cms-mini-orbit,
    .cms-publish-toast,
    .generic-chart i {
        animation: none !important;
    }
}

/* =========================================================
   V6.2 – Realistische Systemdarstellungen & lebendiger Ablauf
   ========================================================= */

/* Hero: echte Produktoberfläche statt abstraktem Diagramm */
.hero {
    min-height: 980px;
    padding-bottom: 110px;
}

.hero-layout {
    grid-template-columns: minmax(420px, .82fr) minmax(660px, 1.18fr);
    gap: clamp(38px, 4vw, 82px);
}

.hero-copy { max-width: 680px; }
.hero-product-visual { min-width: 0; }

.hero-product-stage {
    position: relative;
    width: min(100%, 860px);
    min-height: 690px;
    margin-left: auto;
    perspective: 1400px;
}

.hero-product-stage::before {
    content: "";
    position: absolute;
    inset: 7% -8% 3% 9%;
    z-index: -2;
    border-radius: 44%;
    background: radial-gradient(ellipse at 54% 45%, rgba(56, 112, 255, .2), rgba(255, 0, 159, .12) 38%, transparent 72%);
    filter: blur(38px);
}

.hero-product-stage::after {
    content: "";
    position: absolute;
    right: 2%;
    bottom: 3%;
    left: 10%;
    z-index: -1;
    height: 12%;
    border-radius: 50%;
    background: rgba(0, 0, 0, .72);
    filter: blur(32px);
    transform: perspective(500px) rotateX(70deg);
}

.hero-app-window {
    position: absolute;
    top: 35px;
    right: 0;
    width: 95%;
    min-height: 610px;
    overflow: hidden;
    border: 1px solid rgba(149, 172, 218, .2);
    border-radius: 18px;
    background: #0b111c;
    box-shadow: 0 55px 130px rgba(0, 0, 0, .63), 0 0 100px rgba(64, 105, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .07);
    transform: rotateY(-2deg) rotateX(1deg);
    transform-origin: center;
    transition: transform .22s ease;
}

.hero-app-topbar {
    display: grid;
    grid-template-columns: 88px 1fr auto;
    align-items: center;
    min-height: 48px;
    padding: 0 14px;
    border-bottom: 1px solid rgba(145, 165, 201, .12);
    background: #0e1521;
}

.hero-app-topbar .window-dots { gap: 6px; }
.hero-app-topbar .window-dots i { width: 7px; height: 7px; }

.hero-app-search {
    display: flex;
    align-items: center;
    gap: 9px;
    width: min(100%, 330px);
    height: 30px;
    padding: 0 10px;
    border: 1px solid rgba(139, 159, 195, .14);
    border-radius: 7px;
    color: #8490a6;
    background: rgba(255, 255, 255, .018);
    font-size: 9px;
}

.hero-app-search span { color: #aeb9cb; font-size: 14px; }
.hero-app-search kbd {
    margin-left: auto;
    padding: 3px 6px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 4px;
    color: #6f7b91;
    background: #111a28;
    font-family: var(--body);
    font-size: 7px;
}

.hero-app-actions { display: flex; align-items: center; gap: 9px; }
.hero-app-actions i,
.hero-app-actions span {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 6px;
    background: rgba(255, 255, 255, .025);
}
.hero-app-actions i::before { content: ""; width: 7px; height: 7px; border: 1px solid #8c9ab0; border-radius: 50%; }
.hero-app-actions i:nth-child(2)::before { border-radius: 2px; transform: rotate(45deg); }
.hero-app-actions span { color: #fff; background: linear-gradient(145deg, #ff169e, #7540ff); font-family: var(--tech); font-size: 9px; }

.hero-app-shell { display: grid; grid-template-columns: 132px 1fr; min-height: 562px; }

.hero-app-sidebar {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 16px 10px 14px;
    border-right: 1px solid rgba(145, 165, 201, .1);
    background: #0c131e;
}

.hero-app-brand { display: flex; align-items: center; gap: 8px; margin: 0 6px 18px; color: #f3f6ff; font-family: var(--tech); font-size: 9px; }
.hero-app-brand b { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid rgba(255, 0, 159, .45); border-radius: 7px; color: #ff42b8; background: rgba(255, 0, 159, .08); font-size: 12px; }
.hero-app-sidebar > small { margin: 0 7px 7px; color: #556276; font-size: 6px; letter-spacing: .13em; }
.hero-app-sidebar > a { display: flex; align-items: center; gap: 9px; min-height: 31px; margin: 2px 0; padding: 0 8px; border: 1px solid transparent; border-radius: 6px; color: #7f8ca1; font-size: 8px; }
.hero-app-sidebar > a i { display: grid; place-items: center; width: 17px; height: 17px; color: #718099; font-style: normal; font-size: 10px; }
.hero-app-sidebar > a.active { border-color: rgba(64, 127, 255, .34); color: #b8d0ff; background: linear-gradient(90deg, rgba(50, 114, 255, .17), rgba(50, 114, 255, .04)); }
.hero-app-sidebar > a.active i { color: #4d8cff; }

.hero-sidebar-status {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: auto;
    padding: 10px 8px;
    border: 1px solid rgba(87, 211, 142, .12);
    border-radius: 7px;
    background: rgba(45, 163, 100, .035);
}
.hero-sidebar-status > i { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: #45db88; box-shadow: 0 0 10px rgba(69, 219, 136, .8); animation: hero-status-pulse 2.4s ease-in-out infinite; }
.hero-sidebar-status span { display: grid; gap: 2px; color: #5d6a7c; font-size: 6px; line-height: 1.2; }
.hero-sidebar-status b { color: #9db3a7; font-size: 7px; font-weight: 600; }

.hero-app-main { min-width: 0; padding: 18px 18px 15px; background: radial-gradient(circle at 80% 2%, rgba(48, 100, 215, .075), transparent 32%), #0a101a; }

.hero-app-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 15px; }
.hero-app-title small { color: #4c87ff; font-size: 6px; font-weight: 700; letter-spacing: .08em; }
.hero-app-title h3 { margin: 3px 0 0; color: #f5f7fb; font-family: var(--body); font-size: 17px; font-weight: 650; letter-spacing: -.03em; }
.hero-app-title button,
.custom-system-heading button { min-height: 29px; padding: 0 11px; border: 0; border-radius: 6px; color: #fff; background: linear-gradient(135deg, #3f80ff, #6b4dff); box-shadow: 0 8px 22px rgba(52, 111, 255, .25); font-size: 7px; font-weight: 600; }

.hero-app-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.hero-app-kpis article {
    min-width: 0;
    padding: 11px;
    border: 1px solid rgba(142, 160, 193, .12);
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .028), rgba(255, 255, 255, .008));
}
.hero-app-kpis span { display: block; overflow: hidden; color: #78869b; font-size: 6.5px; white-space: nowrap; text-overflow: ellipsis; }
.hero-app-kpis strong { display: block; margin-top: 4px; color: #f4f7fd; font-family: var(--body); font-size: 19px; font-weight: 600; line-height: 1; }
.hero-app-kpis strong sup { font-size: 8px; }
.hero-app-kpis small { display: block; margin-top: 6px; color: #5f6b7e; font-size: 5.5px; }
.hero-app-kpis small i { color: #4ca0ff; font-style: normal; }
.hero-app-kpis small.green { color: #67d895; }
.hero-app-kpis small.green i { display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: #48d986; box-shadow: 0 0 8px rgba(72, 217, 134, .7); }

.hero-app-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 8px; margin-top: 8px; }
.hero-app-grid > article { border: 1px solid rgba(142, 160, 193, .12); border-radius: 9px; background: rgba(255, 255, 255, .014); }

.ui-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #dce3ef; font-size: 7.5px; font-weight: 600; }
.ui-card-head b { color: #66758a; font-size: 5.8px; font-weight: 500; }
.ui-card-head b .live-dot { display: inline-block; width: 5px; height: 5px; margin-right: 3px; border-radius: 50%; background: #43dc86; box-shadow: 0 0 8px rgba(67, 220, 134, .75); }

.hero-activity-card { padding: 12px 13px 9px; }
.hero-chart-legend { display: flex; gap: 13px; margin-top: 8px; color: #627086; font-size: 5.5px; }
.hero-chart-legend span { display: flex; align-items: center; gap: 4px; }
.hero-chart-legend i { width: 5px; height: 5px; border-radius: 50%; background: #4a83ff; }
.hero-chart-legend span:nth-child(2) i { background: #b14cff; }
.hero-activity-card svg { width: 100%; height: 119px; margin-top: 4px; overflow: visible; }
.hero-chart-grid path { fill: none; stroke: rgba(136, 156, 190, .1); stroke-width: 1; }
.hero-ui-area { fill: url(#heroUiFill); }
.hero-ui-line { fill: none; stroke: #4d83ff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 820; stroke-dashoffset: 820; animation: hero-chart-draw 2.7s .45s cubic-bezier(.2, .75, .2, 1) forwards; }
.hero-ui-line-shadow { stroke: rgba(72, 122, 255, .42); stroke-width: 12; filter: blur(7px); }
.hero-chart-point { fill: #fff; stroke: #4e88ff; stroke-width: 4; filter: drop-shadow(0 0 7px #4e88ff); animation: hero-chart-point 3s ease-in-out infinite; }
.hero-chart-days { display: grid; grid-template-columns: repeat(7, 1fr); color: #556276; font-size: 5px; text-align: center; }

.hero-project-card { padding: 12px 12px 10px; }
.hero-project-row { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 7px; margin-top: 13px; }
.hero-project-row > i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; color: #7ba8ff; background: rgba(64, 125, 255, .1); font-style: normal; font-size: 7px; font-weight: 700; }
.hero-project-row > i.pink { color: #ff71c8; background: rgba(255, 0, 159, .1); }
.hero-project-row > i.green { color: #5cdf96; background: rgba(67, 220, 134, .1); }
.hero-project-row span { display: grid; min-width: 0; gap: 2px; }
.hero-project-row b { overflow: hidden; color: #d7deea; font-size: 6.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.hero-project-row small { color: #59667a; font-size: 5px; }
.hero-project-row em { color: #91a0b5; font-size: 6px; font-style: normal; }
.hero-project-bar { height: 3px; margin: 6px 0 0 31px; overflow: hidden; border-radius: 10px; background: #1b2533; }
.hero-project-bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3d7cff, #8b55ff); animation: hero-project-fill 2.2s 1s ease forwards; }

.hero-table-card { grid-column: 1 / -1; padding: 11px 13px 8px; }
.hero-table-row { display: grid; grid-template-columns: 25px 1fr auto; align-items: center; gap: 8px; min-height: 38px; border-top: 1px solid rgba(139, 158, 190, .08); }
.hero-table-row:first-of-type { margin-top: 8px; }
.event-icon { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; color: #65df9d; background: rgba(70, 217, 139, .09); font-size: 8px; }
.event-icon.sync { color: #6ba0ff; background: rgba(70, 129, 255, .1); animation: spin 3.6s linear infinite; }
.event-icon.shield { color: #cd75ff; background: rgba(181, 79, 255, .1); }
.hero-table-row p { display: grid; gap: 2px; margin: 0; }
.hero-table-row p b { color: #cbd3e0; font-size: 6.5px; font-weight: 550; }
.hero-table-row p small { color: #536074; font-size: 5px; }
.hero-table-row em { padding: 3px 6px; border-radius: 10px; color: #72dca1; background: rgba(68, 217, 138, .07); font-size: 5px; font-style: normal; }
.hero-table-row:nth-child(3) em { color: #79a4ff; background: rgba(68, 123, 217, .08); }
.hero-table-row:nth-child(4) em { color: #c78aff; background: rgba(173, 79, 225, .08); }

.hero-phone-card {
    position: absolute;
    right: -18px;
    bottom: -7px;
    z-index: 5;
    width: 148px;
    min-height: 300px;
    padding: 18px 12px 12px;
    border: 1px solid rgba(172, 189, 220, .22);
    border-radius: 24px;
    background: linear-gradient(160deg, rgba(17, 25, 39, .98), rgba(8, 13, 22, .99));
    box-shadow: 0 30px 70px rgba(0, 0, 0, .58), inset 0 1px 0 rgba(255, 255, 255, .08);
    transform: rotate(3deg);
    animation: hero-phone-float 5.8s ease-in-out infinite;
}
.phone-speaker { position: absolute; top: 8px; left: 50%; width: 37px; height: 3px; border-radius: 4px; background: #263246; transform: translateX(-50%); }
.phone-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.phone-head b { color: #f5f7ff; font-family: var(--tech); font-size: 8px; }
.phone-head i { width: 19px; height: 19px; border-radius: 50%; background: linear-gradient(145deg, #ff209f, #6c55ff); }
.hero-phone-card > small { color: #5b6a80; font-size: 5.5px; letter-spacing: .09em; }
.hero-phone-card h4 { margin: 4px 0 11px; color: #f3f6fb; font-family: var(--body); font-size: 17px; }
.phone-ring { position: relative; display: grid; place-items: center; width: 74px; height: 74px; margin: 2px auto 14px; border-radius: 50%; background: conic-gradient(#4f84ff 0 75%, #1b2636 75% 100%); }
.phone-ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #0d1522; }
.phone-ring span { position: relative; color: #fff; font-family: var(--tech); font-size: 15px; }
.phone-ring sup { font-size: 6px; }
.phone-task { display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 7px; min-height: 41px; border-top: 1px solid rgba(255, 255, 255, .07); }
.phone-task > i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; color: #69a0ff; background: rgba(70, 128, 255, .1); font-style: normal; font-size: 7px; }
.phone-task span { display: grid; gap: 2px; }
.phone-task b { color: #d5dce8; font-size: 6px; font-weight: 550; }
.phone-task small { color: #58667a; font-size: 5px; }

.hero-deploy-card,
.hero-sync-badge {
    position: absolute;
    z-index: 6;
    display: flex;
    align-items: center;
    border: 1px solid rgba(159, 180, 216, .17);
    background: rgba(12, 19, 31, .94);
    box-shadow: 0 22px 55px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .06);
    backdrop-filter: blur(18px);
}
.hero-deploy-card { left: -12px; bottom: 34px; width: 290px; min-height: 64px; justify-content: space-between; gap: 10px; padding: 10px 13px; border-radius: 12px; animation: hero-card-float 5.2s ease-in-out infinite; }
.hero-deploy-card > div { display: flex; align-items: center; gap: 9px; }
.hero-deploy-card > div > i { width: 9px; height: 9px; border: 2px solid #58df96; border-radius: 50%; box-shadow: 0 0 12px rgba(88, 223, 150, .55); }
.hero-deploy-card span,
.hero-sync-badge span { display: grid; gap: 3px; }
.hero-deploy-card b,
.hero-sync-badge b { color: #dce4ef; font-size: 7px; font-weight: 600; }
.hero-deploy-card small,
.hero-sync-badge span { color: #68768a; font-size: 5.5px; }
.hero-deploy-card strong { color: #64e09c; font-family: var(--tech); font-size: 8px; font-weight: 500; }
.hero-sync-badge { top: 5px; right: 66px; min-width: 177px; gap: 9px; padding: 9px 12px; border-radius: 10px; animation: hero-card-float 6.2s .8s ease-in-out infinite; }
.hero-sync-badge > i { width: 8px; height: 8px; border-radius: 50%; background: #4e85ff; box-shadow: 0 0 12px rgba(78, 133, 255, .8); animation: hero-status-pulse 2s ease-in-out infinite; }

@keyframes hero-chart-draw { to { stroke-dashoffset: 0; } }
@keyframes hero-chart-point { 50% { transform: translateY(-2px); opacity: .7; } }
@keyframes hero-project-fill { to { width: var(--progress); } }
@keyframes hero-status-pulse { 50% { opacity: .42; transform: scale(.78); } }
@keyframes hero-phone-float { 50% { transform: rotate(1deg) translateY(-9px); } }
@keyframes hero-card-float { 50% { transform: translateY(-7px); } }

/* 02: realistische individuelle Projektplattform */
.platform-section { padding-top: 132px; padding-bottom: 148px; }
.platform-layout { grid-template-columns: minmax(360px, .68fr) minmax(700px, 1.32fr); gap: clamp(40px, 5vw, 92px); }
.platform-product-visual { min-height: 690px; }

.platform-product-visual::before {
    content: "";
    position: absolute;
    inset: 10% -7% 1% 9%;
    z-index: -1;
    border-radius: 45%;
    background: radial-gradient(ellipse, rgba(57, 105, 255, .18), rgba(255, 0, 159, .08) 45%, transparent 72%);
    filter: blur(38px);
}

.custom-system-window {
    position: absolute;
    top: 28px;
    right: 0;
    width: 96%;
    min-height: 610px;
    overflow: hidden;
    border: 1px solid rgba(147, 169, 208, .19);
    border-radius: 17px;
    background: #0a1019;
    box-shadow: 0 46px 115px rgba(0, 0, 0, .58), 0 0 100px rgba(52, 96, 232, .07), inset 0 1px 0 rgba(255, 255, 255, .06);
    transform: rotateY(2deg) rotateX(1deg);
    transition: transform .2s ease;
}

.custom-system-top { display: grid; grid-template-columns: 80px 1fr auto; align-items: center; min-height: 42px; padding: 0 13px; border-bottom: 1px solid rgba(144, 164, 198, .1); color: #657286; background: #0d1420; font-size: 7px; }
.custom-system-top > span { justify-self: center; font-family: var(--tech); letter-spacing: .04em; }
.custom-system-top > b { display: flex; align-items: center; gap: 5px; color: #70dc9f; font-size: 6px; font-weight: 600; }
.custom-system-top > b i { width: 5px; height: 5px; border-radius: 50%; background: #50db8d; box-shadow: 0 0 8px #50db8d; animation: hero-status-pulse 2s infinite; }

.custom-system-shell { display: grid; grid-template-columns: 118px 1fr; min-height: 568px; }
.custom-system-nav { padding: 14px 9px; border-right: 1px solid rgba(143, 163, 197, .1); background: #0c131e; }
.custom-system-logo { display: grid; place-items: center; width: 27px; height: 27px; margin: 0 6px 17px; border: 1px solid rgba(255, 0, 159, .38); border-radius: 7px; color: #ff4cb8; background: rgba(255, 0, 159, .07); font-family: var(--tech); font-size: 11px; }
.custom-system-nav > small { display: block; margin: 0 7px 7px; color: #4e5b6f; font-size: 5.5px; letter-spacing: .12em; }
.custom-system-nav > a { display: flex; align-items: center; gap: 8px; min-height: 31px; margin: 2px 0; padding: 0 8px; border: 1px solid transparent; border-radius: 6px; color: #6f7d91; font-size: 7px; }
.custom-system-nav > a i { display: grid; place-items: center; width: 16px; height: 16px; color: #66758b; font-style: normal; font-size: 9px; }
.custom-system-nav > a.active { border-color: rgba(65, 126, 255, .3); color: #b2c9f6; background: linear-gradient(90deg, rgba(56, 116, 244, .16), rgba(56, 116, 244, .03)); }
.custom-system-nav > a.active i { color: #5790ff; }

.custom-system-main { padding: 16px; background: radial-gradient(circle at 70% -10%, rgba(50, 102, 222, .07), transparent 34%), #090f18; }
.custom-system-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.custom-system-heading small { color: #4d86ff; font-size: 5.5px; font-weight: 700; }
.custom-system-heading h3 { margin: 2px 0 1px; color: #f3f6fb; font-family: var(--body); font-size: 17px; font-weight: 650; }
.custom-system-heading p { margin: 0; color: #637084; font-size: 6px; }
.custom-system-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 13px; }
.custom-system-kpis article { padding: 10px; border: 1px solid rgba(143, 163, 197, .11); border-radius: 7px; background: rgba(255, 255, 255, .016); }
.custom-system-kpis span { display: block; color: #6b788c; font-size: 5.5px; }
.custom-system-kpis strong { display: block; margin-top: 4px; color: #eef3fb; font-size: 17px; font-weight: 600; line-height: 1; }
.custom-system-kpis sup { font-size: 7px; }
.custom-system-kpis small { display: block; margin-top: 5px; color: #536073; font-size: 5px; }
.custom-system-kpis small.positive { color: #56d891; }
.custom-system-kpis small.warning { color: #ff9c57; }

.custom-system-content { display: grid; grid-template-columns: 1.26fr .74fr; gap: 8px; margin-top: 8px; }
.custom-system-content > article { border: 1px solid rgba(143, 163, 197, .11); border-radius: 8px; background: rgba(255, 255, 255, .014); }
.custom-timeline-card { position: relative; min-height: 214px; padding: 12px; overflow: hidden; }
.custom-timeline-head { display: grid; grid-template-columns: 110px repeat(4, 1fr); margin: 14px 0 7px; color: #536175; font-size: 5px; text-align: center; }
.custom-timeline-head span:first-child { text-align: left; }
.custom-timeline-row { display: grid; grid-template-columns: 110px 1fr; align-items: center; min-height: 43px; border-top: 1px solid rgba(137, 157, 188, .08); }
.custom-timeline-row p { display: flex; align-items: center; gap: 6px; margin: 0; color: #9ca8ba; font-size: 6px; }
.custom-timeline-row p i { width: 5px; height: 5px; border-radius: 50%; background: #4e88ff; }
.custom-timeline-row p i.dot-purple { background: #8e63ff; }
.custom-timeline-row p i.dot-pink { background: #ff4ebc; }
.custom-timeline-row > div { position: relative; height: 16px; border-radius: 4px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 24.7%, rgba(255,255,255,.07) 25% 25.3%); }
.custom-timeline-row > div > i { position: absolute; top: 3px; left: var(--left); width: 0; height: 10px; border-radius: 4px; background: linear-gradient(90deg, #3d7dff, #7563ff); box-shadow: 0 0 12px rgba(61, 125, 255, .2); animation: timeline-grow 2.4s .5s ease forwards; }
.custom-timeline-row:nth-child(4) > div > i { background: linear-gradient(90deg, #7e5dff, #b04fff); }
.custom-timeline-row:nth-child(5) > div > i { background: linear-gradient(90deg, #b64cff, #ff45b4); }
.custom-timeline-now { position: absolute; top: 47px; bottom: 17px; left: 64%; width: 1px; background: rgba(255, 78, 187, .5); box-shadow: 0 0 8px rgba(255, 78, 187, .4); }
.custom-timeline-now span { position: absolute; top: -3px; left: 50%; padding: 2px 4px; border-radius: 3px; color: #ff81ce; background: #2a1425; font-size: 4px; transform: translate(-50%, -100%); }

.custom-work-card { min-height: 214px; padding: 12px; }
.custom-task { display: grid; grid-template-columns: 23px 1fr auto; align-items: center; gap: 7px; min-height: 47px; border-top: 1px solid rgba(137, 157, 188, .08); }
.custom-task:first-of-type { margin-top: 10px; }
.custom-task > i { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 6px; color: #ff7777; background: rgba(255, 80, 80, .09); font-style: normal; font-size: 7px; }
.custom-task > i.mid { color: #f5b15d; background: rgba(245, 177, 93, .08); }
.custom-task > i.low { color: #55dc94; background: rgba(85, 220, 148, .08); }
.custom-task span { display: grid; gap: 2px; min-width: 0; }
.custom-task b { overflow: hidden; color: #c7d0de; font-size: 6px; font-weight: 550; white-space: nowrap; text-overflow: ellipsis; }
.custom-task small { color: #536073; font-size: 4.8px; }
.custom-task em { color: #ff7777; font-size: 4.8px; font-style: normal; }
.custom-task:nth-child(3) em { color: #f5b15d; }
.custom-task:nth-child(4) em { color: #55dc94; }

.custom-activity-card { grid-column: 1 / -1; min-height: 142px; padding: 11px 12px; display: grid; grid-template-columns: 1fr repeat(3, 1.3fr); align-items: center; gap: 8px; }
.custom-activity-card .ui-card-head { align-self: stretch; flex-direction: column; align-items: flex-start; justify-content: center; padding-right: 10px; border-right: 1px solid rgba(137, 157, 188, .08); }
.custom-activity-card > div:not(.ui-card-head) { display: grid; grid-template-columns: 25px 1fr; align-items: center; gap: 7px; }
.activity-avatar { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; color: #73a5ff; background: rgba(66, 126, 255, .1); font-style: normal; font-size: 5px; font-weight: 700; }
.activity-avatar.pink { color: #ff7aca; background: rgba(255, 57, 170, .1); }
.activity-avatar.green { color: #66df9e; background: rgba(70, 220, 143, .1); }
.custom-activity-card p { display: grid; gap: 3px; margin: 0; }
.custom-activity-card p b { color: #c5cedc; font-size: 5.7px; font-weight: 550; }
.custom-activity-card p small { color: #536073; font-size: 4.7px; }

.custom-mobile-preview {
    position: absolute;
    right: -26px;
    bottom: -12px;
    z-index: 5;
    width: 145px;
    min-height: 296px;
    padding: 15px 11px;
    border: 1px solid rgba(150, 171, 207, .2);
    border-radius: 23px;
    background: linear-gradient(155deg, #111a29, #080e17);
    box-shadow: 0 29px 72px rgba(0, 0, 0, .58), inset 0 1px 0 rgba(255,255,255,.07);
    transform: rotate(2.6deg);
    animation: hero-phone-float 6.3s .5s ease-in-out infinite;
}
.mobile-preview-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 21px; color: #e9eef6; font-size: 7px; }
.mobile-preview-top i { width: 7px; height: 7px; border-radius: 50%; background: #53dc92; box-shadow: 0 0 8px rgba(83, 220, 146, .8); }
.custom-mobile-preview > small { color: #5a687c; font-size: 5px; letter-spacing: .08em; }
.mobile-progress-ring { position: relative; display: grid; place-items: center; width: 78px; height: 78px; margin: 12px auto 14px; border-radius: 50%; background: conic-gradient(#4c84ff 0 62%, #bf4fff 62% 78%, #202a3a 78%); }
.mobile-progress-ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #0d1521; }
.mobile-progress-ring span { position: relative; color: #fff; font-family: var(--tech); font-size: 15px; }
.mobile-progress-ring sup { font-size: 6px; }
.mobile-preview-row { display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 7px; min-height: 42px; border-top: 1px solid rgba(255, 255, 255, .07); }
.mobile-preview-row > i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; color: #8190a6; background: rgba(255,255,255,.04); font-style: normal; font-size: 6px; }
.mobile-preview-row > i.blue { color: #72a4ff; background: rgba(66,126,255,.1); }
.mobile-preview-row > i.pink { color: #ff77ca; background: rgba(255,56,171,.09); animation: spin 4.5s linear infinite; }
.mobile-preview-row span { display: grid; gap: 2px; }
.mobile-preview-row b { color: #cdd5e2; font-size: 5.8px; font-weight: 550; }
.mobile-preview-row small { color: #58667a; font-size: 4.7px; }

.custom-data-panel,
.custom-notification {
    position: absolute;
    z-index: 6;
    display: flex;
    align-items: center;
    border: 1px solid rgba(153, 175, 211, .17);
    border-radius: 11px;
    background: rgba(11, 18, 30, .94);
    box-shadow: 0 22px 52px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255,255,255,.05);
    backdrop-filter: blur(16px);
}
.custom-data-panel { top: 0; right: 55px; min-width: 250px; gap: 9px; padding: 10px 12px; animation: hero-card-float 5.8s .9s ease-in-out infinite; }
.custom-data-icon { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 7px; color: #70a2ff; background: rgba(62, 124, 255, .1); font-size: 13px; }
.custom-data-panel > div:nth-child(2) { display: grid; gap: 3px; }
.custom-data-panel b { color: #d6deeb; font-size: 6.5px; }
.custom-data-panel span { color: #637186; font-size: 5px; }
.custom-data-panel em { margin-left: auto; color: #66df9d; font-family: var(--tech); font-size: 7px; font-style: normal; }
.custom-notification { left: 8px; bottom: 23px; width: 280px; gap: 9px; padding: 10px 12px; animation: hero-card-float 6.4s ease-in-out infinite; }
.custom-notification > i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #68df9f; background: rgba(72, 219, 143, .09); font-style: normal; font-size: 8px; }
.custom-notification span { display: grid; gap: 3px; color: #637186; font-size: 5px; }
.custom-notification b { color: #d6deeb; font-size: 6.5px; }

@keyframes timeline-grow { to { width: var(--width); } }

/* 03: lebendiger, greifbarer Ablauf */
.process-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(180deg, #f9fafc 0%, #f2f5fa 52%, #fff 100%);
}

.process-orbit { position: absolute; z-index: -1; border: 1px solid rgba(255, 0, 159, .08); border-radius: 50%; pointer-events: none; }
.process-orbit::before,
.process-orbit::after { content: ""; position: absolute; border: 1px solid rgba(61, 123, 255, .07); border-radius: 50%; }
.process-orbit-one { top: 110px; right: -390px; width: 790px; height: 790px; }
.process-orbit-one::before { inset: 90px; }
.process-orbit-one::after { inset: 205px; }
.process-orbit-two { bottom: 140px; left: -260px; width: 530px; height: 530px; }
.process-orbit-two::before { inset: 65px; }
.process-orbit-two::after { inset: 140px; }

.process-heading { margin-bottom: 34px; }
.process-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin-bottom: 38px;
    overflow: hidden;
    border: 1px solid #dce2ec;
    border-radius: 14px;
    background: #dce2ec;
    box-shadow: 0 18px 46px rgba(25, 42, 72, .07);
}
.process-summary > div { display: grid; grid-template-columns: 35px 1fr; align-items: center; gap: 11px; min-height: 84px; padding: 15px 18px; background: rgba(255, 255, 255, .91); }
.process-summary > div > span { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(255, 0, 159, .15); border-radius: 9px; color: var(--pink); background: rgba(255, 0, 159, .035); font-family: var(--tech); font-size: 8px; }
.process-summary p { display: grid; gap: 4px; margin: 0; }
.process-summary b { color: #121827; font-size: 12px; font-weight: 650; }
.process-summary small { color: #748095; font-size: 10px; }

.process-experience { position: relative; display: grid; gap: 18px; }
.process-rail { position: absolute; top: 0; bottom: 0; left: 50%; z-index: 0; width: 2px; background: linear-gradient(to bottom, transparent, #d7deea 5%, #d7deea 95%, transparent); transform: translateX(-50%); }
.process-rail i { display: block; width: 100%; height: 0; background: linear-gradient(to bottom, #4b84ff, #9b4fff, #ff36ae); box-shadow: 0 0 17px rgba(135, 73, 255, .3); transition: height 1.2s ease; }
.process-experience.is-running .process-rail i { height: 100%; }

.process-step {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(280px, .72fr) minmax(480px, 1.28fr);
    align-items: stretch;
    gap: 34px;
    min-height: 360px;
    padding: 22px;
    border: 1px solid #dce2ec;
    border-radius: 20px;
    background: rgba(255, 255, 255, .84);
    box-shadow: 0 18px 55px rgba(23, 39, 69, .065), inset 0 1px 0 rgba(255,255,255,.9);
    backdrop-filter: blur(16px);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.process-step:nth-child(odd) { grid-template-columns: minmax(480px, 1.28fr) minmax(280px, .72fr); }
.process-step:nth-child(odd) .process-step-copy { order: 2; }
.process-step:nth-child(odd) .process-deliverable { order: 1; }
.process-step::before { content: ""; position: absolute; top: 50%; left: 50%; z-index: 4; width: 13px; height: 13px; border: 4px solid #fff; border-radius: 50%; background: #a8b2c2; box-shadow: 0 0 0 1px #ced6e3; transform: translate(-50%, -50%); transition: background .3s ease, box-shadow .3s ease, transform .3s ease; }
.process-step.is-active { border-color: rgba(87, 121, 206, .28); box-shadow: 0 28px 75px rgba(25, 45, 82, .12), 0 0 0 1px rgba(255,0,159,.035); transform: translateY(-2px); }
.process-step.is-active::before { background: var(--pink); box-shadow: 0 0 0 1px rgba(255,0,159,.28), 0 0 22px rgba(255,0,159,.38); transform: translate(-50%, -50%) scale(1.1); }

.process-step-copy { align-self: center; padding: 28px clamp(10px, 2vw, 28px); }
.process-number { display: grid; place-items: center; width: 45px; height: 45px; margin-bottom: 28px; border: 1px solid rgba(255, 0, 159, .16); border-radius: 12px; color: var(--pink); background: rgba(255, 0, 159, .035); font-family: var(--tech); font-size: 11px; }
.process-step-copy > small { color: #6d7a8e; font-family: var(--tech); font-size: 8px; letter-spacing: .12em; }
.process-step-copy h3 { margin: 8px 0 12px; color: #111827; font-family: var(--body); font-size: clamp(26px, 2.4vw, 38px); font-weight: 670; letter-spacing: -.04em; }
.process-step-copy > p { max-width: 470px; margin: 0; color: #68758a; font-size: 14px; line-height: 1.75; }
.process-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 22px; }
.process-tags span { padding: 7px 10px; border: 1px solid #dbe2ec; border-radius: 30px; color: #566277; background: #f8fafc; font-size: 9px; font-weight: 550; }

.process-deliverable { position: relative; align-self: stretch; min-height: 315px; overflow: hidden; border: 1px solid rgba(142, 158, 188, .18); border-radius: 15px; color: #dce4ef; background: linear-gradient(145deg, #101827, #080e17); box-shadow: 0 25px 60px rgba(18, 31, 55, .22), inset 0 1px 0 rgba(255, 255, 255, .06); opacity: .76; transform: scale(.985); transition: opacity .35s ease, transform .35s ease, box-shadow .35s ease; }
.process-step.is-active .process-deliverable { opacity: 1; transform: scale(1); box-shadow: 0 30px 70px rgba(15, 28, 52, .28), 0 0 45px rgba(70, 120, 255, .06), inset 0 1px 0 rgba(255,255,255,.07); }
.deliverable-head { display: flex; align-items: center; justify-content: space-between; min-height: 42px; padding: 0 14px; border-bottom: 1px solid rgba(143, 160, 191, .1); color: #cdd6e4; background: rgba(255, 255, 255, .015); font-size: 8px; font-weight: 600; }
.deliverable-head b { display: flex; align-items: center; gap: 5px; color: #6e7c91; font-size: 6px; font-weight: 500; }
.deliverable-head b i { width: 5px; height: 5px; border-radius: 50%; background: #51da8d; box-shadow: 0 0 8px #51da8d; animation: hero-status-pulse 2s infinite; }

.board-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; }
.board-columns > div { min-height: 190px; padding: 12px; border: 1px solid rgba(142, 159, 190, .11); border-radius: 9px; background: rgba(255,255,255,.015); }
.board-columns small { display: block; margin-bottom: 10px; color: #657389; font-size: 6px; font-weight: 700; letter-spacing: .08em; }
.board-columns p { display: flex; align-items: center; gap: 8px; min-height: 42px; margin: 0 0 7px; padding: 8px; border: 1px solid rgba(142, 159, 190, .09); border-radius: 7px; color: #aeb9c9; background: rgba(255,255,255,.015); font-size: 7px; }
.board-columns p i { display: grid; place-items: center; width: 17px; height: 17px; border: 1px solid rgba(77, 136, 255, .33); border-radius: 5px; color: #70a2ff; font-style: normal; font-size: 6px; }
.board-columns p.note-pink { border-left: 2px solid #ff4bb8; background: rgba(255, 64, 176, .045); }
.board-columns p.note-blue { border-left: 2px solid #4c87ff; background: rgba(73, 126, 255, .045); }
.board-columns p.note-green { border-left: 2px solid #4edb8c; background: rgba(73, 219, 140, .045); }
.board-footer { display: flex; align-items: center; justify-content: space-between; margin: 0 14px 14px; padding: 10px 12px; border: 1px solid rgba(78, 216, 139, .12); border-radius: 8px; color: #7e8b9e; background: rgba(69, 213, 133, .025); font-size: 6px; }
.board-footer b { color: #5dde97; font-family: var(--tech); font-size: 7px; }

.wireframe-canvas { position: relative; display: grid; grid-template-columns: 52px 1fr; min-height: 230px; margin: 13px; overflow: hidden; border: 1px solid rgba(143, 160, 191, .1); border-radius: 9px; background: #0d1521; }
.wireframe-canvas > aside { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 15px; border-right: 1px solid rgba(143,160,191,.09); }
.wireframe-canvas > aside i { width: 23px; height: 23px; border: 1px solid rgba(143,160,191,.1); border-radius: 6px; background: rgba(255,255,255,.02); }
.wireframe-canvas > aside i:first-child { border-color: rgba(76,132,255,.3); background: rgba(76,132,255,.1); }
.wireframe-canvas > main { padding: 13px; }
.wf-top { width: 54%; height: 10px; margin-bottom: 13px; border-radius: 5px; background: #243044; }
.wf-hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 12px; min-height: 93px; padding: 13px; border: 1px solid rgba(143,160,191,.1); border-radius: 8px; background: rgba(255,255,255,.015); }
.wf-hero span { border-radius: 6px; background: linear-gradient(#2a364a 0 12%, transparent 12% 25%, #222d3f 25% 33%, transparent 33% 46%, #1c2636 46% 52%, transparent 52%); }
.wf-hero i { border: 1px solid rgba(76, 132, 255, .18); border-radius: 7px; background: linear-gradient(135deg, rgba(74,132,255,.14), rgba(174,77,255,.08)); }
.wf-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 9px; }
.wf-cards i { height: 62px; border: 1px solid rgba(143,160,191,.1); border-radius: 7px; background: linear-gradient(145deg, rgba(255,255,255,.025), rgba(255,255,255,.005)); }
.wireframe-comment { position: absolute; right: 12px; bottom: 13px; display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 7px; min-width: 175px; padding: 8px; border: 1px solid rgba(78,216,139,.16); border-radius: 8px; background: rgba(10,18,29,.96); box-shadow: 0 12px 30px rgba(0,0,0,.35); animation: hero-card-float 5.8s ease-in-out infinite; }
.wireframe-comment > i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #63df9b; background: rgba(78,216,139,.08); font-style: normal; font-size: 7px; }
.wireframe-comment span { display: grid; gap: 2px; }
.wireframe-comment b { color: #d2dbe7; font-size: 6px; }
.wireframe-comment small { color: #647186; font-size: 5px; }
.prototype-toolbar { display: flex; align-items: center; gap: 12px; height: 35px; padding: 0 13px; border-top: 1px solid rgba(143,160,191,.09); color: #607086; font-size: 6px; }
.prototype-toolbar b { margin-left: auto; padding: 6px 9px; border-radius: 5px; color: #cfe0ff; background: rgba(66,126,255,.12); font-size: 5.5px; }

.dev-ui-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 10px; padding: 14px; }
.dev-code { position: relative; min-height: 215px; padding: 14px; border: 1px solid rgba(143,160,191,.1); border-radius: 9px; background: #0a111c; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.dev-code p { display: flex; gap: 10px; margin: 0 0 16px; color: #abb7c9; font-size: 7px; }
.dev-code em { color: #3f4b5f; font-style: normal; }
.code-pink { color: #ff64c2; }
.code-green { color: #6ee0a4; }
.code-blue { color: #6da0ff; }
.code-muted { color: #59667b; }
.typing-caret { position: absolute; left: 56px; bottom: 45px; width: 1px; height: 12px; background: #7ea8ff; animation: caret-blink .8s steps(1) infinite; }
.dev-tests { min-height: 215px; padding: 14px; border: 1px solid rgba(143,160,191,.1); border-radius: 9px; background: rgba(255,255,255,.012); }
.dev-tests small { display: block; margin-bottom: 11px; color: #647287; font-size: 6px; font-weight: 700; }
.dev-tests p { display: flex; align-items: center; gap: 7px; min-height: 36px; margin: 0; border-top: 1px solid rgba(143,160,191,.08); color: #aeb8c8; font-size: 6px; }
.dev-tests p i { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 5px; color: #61de99; background: rgba(73,217,141,.08); font-style: normal; font-size: 6px; }
.dev-tests p i.spin { color: #71a0ff; background: rgba(66,126,255,.09); animation: spin 3s linear infinite; }
.dev-progress { display: flex; align-items: center; gap: 10px; margin: 0 14px 14px; }
.dev-progress > span { flex: 1; height: 5px; overflow: hidden; border-radius: 10px; background: #1a2636; }
.dev-progress > span i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4a84ff, #bd4fff); animation: dev-progress 3.2s .6s ease forwards; }
.dev-progress b { color: #748399; font-size: 6px; font-weight: 500; }

.launch-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 14px 14px 0; }
.launch-kpis > div { padding: 10px; border: 1px solid rgba(143,160,191,.1); border-radius: 8px; background: rgba(255,255,255,.014); }
.launch-kpis span { display: block; color: #67758a; font-size: 5.5px; }
.launch-kpis strong { display: block; margin-top: 4px; color: #edf2fa; font-size: 18px; font-weight: 600; }
.launch-kpis sup { color: #59df98; font-size: 7px; }
.process-launch-ui svg { width: calc(100% - 28px); height: 112px; margin: 8px 14px 0; overflow: visible; }
.launch-grid { fill: none; stroke: rgba(143,160,191,.09); stroke-width: 1; }
.launch-area { fill: url(#heroUiFill); opacity: .7; }
.launch-line { fill: none; stroke: #4d86ff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 760; stroke-dashoffset: 760; animation: hero-chart-draw 2.8s .3s ease forwards; }
.launch-event { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 8px; margin: 0 14px 14px; padding: 9px; border: 1px solid rgba(75,218,141,.13); border-radius: 8px; background: rgba(73,217,141,.025); }
.launch-event > i { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; color: #66df9d; background: rgba(75,218,141,.08); font-style: normal; font-size: 7px; }
.launch-event span { display: grid; gap: 2px; }
.launch-event b { color: #d4dce8; font-size: 6.5px; }
.launch-event small { color: #637186; font-size: 5px; }
.launch-event em { color: #65df9c; font-family: var(--tech); font-size: 5px; font-style: normal; }

.process-cta { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 38px; padding: 25px 28px; border: 1px solid #dce2ec; border-radius: 16px; background: #fff; box-shadow: 0 18px 48px rgba(24, 42, 72, .065); }
.process-cta p { max-width: 690px; margin: 0; color: #718096; font-size: 13px; }
.process-cta p span { display: block; margin-bottom: 4px; color: #151b29; font-size: 16px; font-weight: 650; }

@keyframes caret-blink { 50% { opacity: 0; } }
@keyframes dev-progress { to { width: 78%; } }

/* Responsive V6.2 */
@media (max-width: 1320px) {
    .hero-layout { grid-template-columns: minmax(390px, .8fr) minmax(600px, 1.2fr); }
    .hero-product-stage { transform: scale(.92); transform-origin: right center; }
    .platform-layout { grid-template-columns: minmax(340px, .68fr) minmax(610px, 1.32fr); }
    .platform-product-visual { transform: scale(.94); transform-origin: right center; }
}

@media (max-width: 1120px) {
    .hero-layout,
    .platform-layout { grid-template-columns: 1fr; }
    .hero-product-stage { width: min(100%, 860px); margin-inline: auto; transform: none; }
    .platform-product-visual { width: min(100%, 830px); margin-inline: auto; transform: none; }
    .platform-layout { gap: 75px; }
    .process-step,
    .process-step:nth-child(odd) { grid-template-columns: minmax(250px, .72fr) minmax(400px, 1.28fr); }
}

@media (max-width: 840px) {
    .hero-product-stage { min-height: 610px; }
    .hero-app-window { width: 100%; min-height: 550px; }
    .hero-app-shell { grid-template-columns: 100px 1fr; min-height: 500px; }
    .hero-app-sidebar > a { padding-inline: 6px; }
    .hero-app-kpis { grid-template-columns: repeat(2, 1fr); }
    .hero-app-kpis article:nth-child(3),
    .hero-app-kpis article:nth-child(4) { display: none; }
    .hero-app-grid { grid-template-columns: 1fr; }
    .hero-project-card { display: none; }
    .hero-activity-card svg { height: 145px; }
    .hero-phone-card { right: -6px; }
    .hero-deploy-card { left: 8px; }

    .platform-product-visual { min-height: 630px; }
    .custom-system-window { width: 100%; }
    .custom-system-shell { grid-template-columns: 96px 1fr; }
    .custom-system-content { grid-template-columns: 1fr; }
    .custom-work-card { display: none; }
    .custom-activity-card { min-height: 128px; }

    .process-summary { grid-template-columns: 1fr; }
    .process-summary > div:not(:last-child) { border-bottom: 1px solid #dce2ec; }
    .process-rail { left: 24px; }
    .process-step,
    .process-step:nth-child(odd) { grid-template-columns: 1fr; gap: 12px; padding: 16px 16px 16px 40px; }
    .process-step:nth-child(odd) .process-step-copy,
    .process-step:nth-child(odd) .process-deliverable { order: initial; }
    .process-step::before { top: 44px; left: 24px; }
    .process-step-copy { padding: 16px 10px 10px; }
    .process-number { margin-bottom: 18px; }
    .process-deliverable { min-height: 300px; }
}

@media (max-width: 680px) {
    .hero { padding-bottom: 82px; }
    .hero-product-stage { min-height: 470px; margin-top: -18px; }
    .hero-app-window { top: 18px; min-height: 430px; border-radius: 13px; }
    .hero-app-topbar { grid-template-columns: 52px 1fr auto; min-height: 38px; padding: 0 9px; }
    .hero-app-search { height: 24px; font-size: 0; }
    .hero-app-search::after { content: "Unternehmenszentrale durchsuchen"; color: #7d899d; font-size: 6px; }
    .hero-app-search kbd { display: none; }
    .hero-app-actions i { display: none; }
    .hero-app-shell { grid-template-columns: 54px 1fr; min-height: 392px; }
    .hero-app-sidebar { padding: 10px 6px; }
    .hero-app-brand { justify-content: center; margin: 0 0 13px; }
    .hero-app-brand span,
    .hero-app-sidebar > small,
    .hero-app-sidebar > a span,
    .hero-sidebar-status span { display: none; }
    .hero-app-sidebar > a { justify-content: center; min-height: 29px; padding: 0; }
    .hero-sidebar-status { justify-content: center; margin-top: auto; padding: 8px; }
    .hero-app-main { padding: 11px 9px; }
    .hero-app-title { margin-bottom: 9px; }
    .hero-app-title h3 { font-size: 12px; }
    .hero-app-title p,
    .hero-app-title button { display: none; }
    .hero-app-kpis { gap: 5px; }
    .hero-app-kpis article { padding: 8px; }
    .hero-app-kpis strong { font-size: 15px; }
    .hero-activity-card { padding: 9px; }
    .hero-activity-card svg { height: 105px; }
    .hero-table-card { padding: 8px; }
    .hero-table-row { min-height: 32px; }
    .hero-table-row:nth-of-type(4) { display: none; }
    .hero-phone-card { right: -3px; bottom: -27px; width: 104px; min-height: 214px; padding: 14px 9px 8px; border-radius: 18px; }
    .phone-head { margin-bottom: 11px; }
    .hero-phone-card h4 { font-size: 12px; }
    .phone-ring { width: 52px; height: 52px; margin-bottom: 9px; }
    .phone-ring span { font-size: 11px; }
    .phone-task { min-height: 31px; grid-template-columns: 17px 1fr; }
    .phone-task > i { width: 16px; height: 16px; }
    .phone-task b { font-size: 4.6px; }
    .phone-task small { font-size: 4px; }
    .hero-deploy-card { bottom: -9px; left: 0; width: 210px; min-height: 48px; padding: 8px 9px; }
    .hero-sync-badge { top: 0; right: 13px; min-width: 135px; padding: 7px 8px; }

    .platform-section { padding-top: 88px; padding-bottom: 98px; }
    .platform-product-visual { min-height: 465px; margin-top: -5px; }
    .custom-system-window { top: 18px; min-height: 426px; border-radius: 12px; }
    .custom-system-top { grid-template-columns: 53px 1fr auto; min-height: 34px; padding: 0 8px; }
    .custom-system-top > span { font-size: 5px; }
    .custom-system-shell { grid-template-columns: 52px 1fr; min-height: 392px; }
    .custom-system-nav { padding: 9px 5px; }
    .custom-system-logo { margin: 0 auto 11px; }
    .custom-system-nav > small,
    .custom-system-nav > a span { display: none; }
    .custom-system-nav > a { justify-content: center; padding: 0; min-height: 29px; }
    .custom-system-main { padding: 10px 8px; }
    .custom-system-heading h3 { font-size: 12px; }
    .custom-system-heading p,
    .custom-system-heading button { display: none; }
    .custom-system-kpis { grid-template-columns: repeat(2, 1fr); gap: 5px; margin-top: 8px; }
    .custom-system-kpis article:nth-child(3),
    .custom-system-kpis article:nth-child(4) { display: none; }
    .custom-timeline-card { min-height: 190px; padding: 9px; }
    .custom-timeline-head { grid-template-columns: 72px repeat(4,1fr); }
    .custom-timeline-row { grid-template-columns: 72px 1fr; min-height: 38px; }
    .custom-activity-card { min-height: 86px; grid-template-columns: 1fr 1fr; padding: 8px; }
    .custom-activity-card .ui-card-head { display: none; }
    .custom-activity-card > div:last-child { display: none; }
    .custom-mobile-preview { right: -2px; bottom: -23px; width: 101px; min-height: 214px; padding: 11px 8px; border-radius: 17px; }
    .mobile-preview-top { margin-bottom: 12px; }
    .mobile-progress-ring { width: 56px; height: 56px; margin: 8px auto; }
    .mobile-progress-ring span { font-size: 11px; }
    .mobile-preview-row { min-height: 31px; grid-template-columns: 17px 1fr; }
    .mobile-preview-row > i { width: 16px; height: 16px; }
    .custom-data-panel { top: 0; right: 8px; min-width: 178px; padding: 7px 8px; }
    .custom-notification { left: 0; bottom: -4px; width: 208px; padding: 8px; }

    .process-summary { margin-bottom: 24px; }
    .process-summary > div { min-height: 72px; padding: 12px; }
    .process-summary b { font-size: 11px; }
    .process-summary small { font-size: 9px; }
    .process-experience { gap: 13px; }
    .process-step,
    .process-step:nth-child(odd) { min-height: auto; padding: 10px 10px 10px 32px; border-radius: 15px; }
    .process-rail { left: 17px; }
    .process-step::before { top: 30px; left: 17px; width: 9px; height: 9px; border-width: 3px; }
    .process-step-copy { padding: 12px 7px 7px; }
    .process-number { width: 36px; height: 36px; margin-bottom: 14px; }
    .process-step-copy h3 { font-size: 25px; }
    .process-step-copy > p { font-size: 13px; }
    .process-tags { margin-top: 15px; }
    .process-tags span { padding: 6px 8px; font-size: 8px; }
    .process-deliverable { min-height: 250px; border-radius: 11px; }
    .board-columns { gap: 6px; padding: 9px; }
    .board-columns > div { min-height: 154px; padding: 8px; }
    .board-columns p { min-height: 33px; padding: 5px; font-size: 5.5px; }
    .wireframe-canvas { grid-template-columns: 38px 1fr; min-height: 185px; margin: 9px; }
    .wireframe-canvas > main { padding: 8px; }
    .wf-hero { min-height: 74px; padding: 8px; }
    .wf-cards i { height: 45px; }
    .wireframe-comment { right: 7px; bottom: 8px; min-width: 135px; padding: 6px; }
    .dev-ui-grid { grid-template-columns: 1fr; padding: 9px; }
    .dev-code { min-height: 150px; padding: 10px; }
    .dev-code p { margin-bottom: 11px; font-size: 5.5px; }
    .dev-tests { display: none; }
    .launch-kpis { gap: 5px; padding: 9px 9px 0; }
    .launch-kpis > div { padding: 7px; }
    .launch-kpis strong { font-size: 13px; }
    .process-launch-ui svg { width: calc(100% - 18px); height: 85px; margin-inline: 9px; }
    .launch-event { margin: 0 9px 9px; }
    .process-cta { flex-direction: column; align-items: stretch; padding: 20px; }
    .process-cta .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-ui-line,
    .launch-line { stroke-dashoffset: 0; animation: none; }
    .hero-project-bar i { width: var(--progress); animation: none; }
    .custom-timeline-row > div > i { width: var(--width); animation: none; }
    .dev-progress > span i { width: 78%; animation: none; }
    .hero-phone-card,
    .hero-deploy-card,
    .hero-sync-badge,
    .custom-mobile-preview,
    .custom-data-panel,
    .custom-notification,
    .wireframe-comment { animation: none; }
}

/* ==========================================================
   V6.3 – ITB Website-Preview überarbeitet
   ========================================================== */
.project-system-itb {
    color: #10243a;
    background: #ebe6df;
}

.itb-real-site {
    position: absolute;
    inset: 42px 0 0;
    overflow: hidden;
    background: #ebe6df;
}

.itb-real-site::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--itb-bg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    transform: scale(1.015);
    filter: saturate(.96) contrast(1.02);
}

.itb-real-site::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(246, 241, 235, .98) 0%, rgba(246, 241, 235, .95) 22%, rgba(246, 241, 235, .82) 42%, rgba(246, 241, 235, .42) 64%, rgba(246, 241, 235, .14) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(12, 24, 41, .04) 65%, rgba(12, 24, 41, .10) 100%);
}

.itb-real-copy-panel,
.itb-real-mini-panel,
.itb-real-services,
.itb-notification {
    position: relative;
    z-index: 2;
}

.itb-real-copy-panel {
    width: min(44%, 340px);
    margin: 26px 0 0 28px;
    padding: 18px 18px 16px;
    border: 1px solid rgba(16, 62, 94, .09);
    border-radius: 18px;
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 18px 45px rgba(72, 94, 114, .12), inset 0 1px 0 rgba(255, 255, 255, .55);
    backdrop-filter: blur(10px);
}

.itb-real-copy-panel small {
    display: block;
    color: #2a7cad;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: .18em;
}

.itb-real-copy-panel h4 {
    margin: 9px 0 10px;
    color: #193247;
    font-size: clamp(23px, 2.4vw, 34px);
    line-height: 1.03;
    letter-spacing: -.045em;
}

.itb-real-copy-panel h4 em {
    color: #0c8cc2;
    font-style: normal;
}

.itb-real-copy-panel p {
    margin: 0 0 14px;
    color: #607385;
    font-size: 8px;
    line-height: 1.65;
}

.itb-copy-points {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
}

.itb-copy-points span {
    padding: 6px 9px;
    border: 1px solid rgba(13, 97, 137, .13);
    border-radius: 999px;
    color: #38576c;
    font-size: 6px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, .7);
}

.itb-real-mini-panel {
    position: absolute;
    top: 24px;
    right: 28px;
    width: min(28%, 206px);
    padding: 13px 14px;
    border: 1px solid rgba(9, 39, 60, .08);
    border-radius: 14px;
    color: #29455b;
    background: rgba(255, 255, 255, .66);
    box-shadow: 0 16px 42px rgba(78, 101, 118, .13);
    backdrop-filter: blur(10px);
}

.itb-mini-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    padding: 6px 8px;
    border-radius: 999px;
    color: #476073;
    font-size: 6px;
    font-weight: 700;
    background: rgba(247, 251, 253, .88);
}

.itb-mini-chip i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3cbe72;
    box-shadow: 0 0 0 5px rgba(60, 190, 114, .13);
    animation: pulse-dot 2.3s ease-in-out infinite;
}

.itb-mini-stats {
    display: grid;
    grid-template-columns: repeat(2, auto 1fr);
    gap: 6px 10px;
    align-items: center;
}

.itb-mini-stats b {
    color: #0e5479;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.04em;
}

.itb-mini-stats span {
    color: #677b8c;
    font-size: 6px;
    line-height: 1.4;
}

.itb-real-services {
    position: absolute;
    right: 22px;
    bottom: 24px;
    left: 22px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(8, 25, 44, .98), rgba(9, 25, 49, .96));
    box-shadow: 0 22px 56px rgba(11, 25, 40, .18), 0 0 36px rgba(9, 126, 182, .08);
}

.itb-real-services article {
    position: relative;
    min-height: 136px;
    padding: 20px 18px 16px;
    color: #f4f7fa;
}

.itb-real-services article + article {
    border-left: 1px solid rgba(255, 255, 255, .08);
}

.itb-real-services h5 {
    margin: 0 0 8px;
    color: #f6f9fc;
    font-size: clamp(17px, 1.8vw, 26px);
    line-height: 1;
    letter-spacing: -.035em;
}

.itb-real-services b {
    display: block;
    margin-bottom: 10px;
    color: #ffffff;
    font-size: 10px;
    line-height: 1.25;
}

.itb-real-services p {
    margin: 0 0 14px;
    color: rgba(230, 239, 247, .84);
    font-size: 7px;
    line-height: 1.65;
}

.itb-real-services span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 7px;
    color: #fff;
    font-size: 7px;
    font-weight: 700;
    background: linear-gradient(135deg, #1e8bff, #0d79d6);
    box-shadow: 0 10px 22px rgba(30, 139, 255, .18);
}

.itb-notification {
    right: 16px;
    bottom: 16px;
    color: #2f4e62;
    background: rgba(255, 255, 255, .94);
    border-color: rgba(13, 112, 153, .16);
    animation-delay: -2s;
}

.project-system-detail.project-system-itb .itb-real-copy-panel {
    width: min(38%, 420px);
    margin: 42px 0 0 42px;
    padding: 24px 24px 20px;
}
.project-system-detail.project-system-itb .itb-real-copy-panel small { font-size: 9px; }
.project-system-detail.project-system-itb .itb-real-copy-panel p { font-size: 10px; }
.project-system-detail.project-system-itb .itb-copy-points span { font-size: 8px; padding: 8px 12px; }
.project-system-detail.project-system-itb .itb-real-mini-panel {
    top: 36px;
    right: 36px;
    width: min(26%, 250px);
    padding: 17px 18px;
}
.project-system-detail.project-system-itb .itb-mini-chip { font-size: 8px; padding: 7px 10px; }
.project-system-detail.project-system-itb .itb-mini-stats b { font-size: 18px; }
.project-system-detail.project-system-itb .itb-mini-stats span { font-size: 7px; }
.project-system-detail.project-system-itb .itb-real-services {
    right: 34px;
    bottom: 34px;
    left: 34px;
}
.project-system-detail.project-system-itb .itb-real-services article {
    min-height: 170px;
    padding: 24px 24px 20px;
}
.project-system-detail.project-system-itb .itb-real-services b { font-size: 13px; }
.project-system-detail.project-system-itb .itb-real-services p { font-size: 9px; }
.project-system-detail.project-system-itb .itb-real-services span { min-height: 28px; font-size: 8px; }

@media (max-width: 1180px) {
    .itb-real-copy-panel { width: min(50%, 340px); }
    .itb-real-mini-panel { width: min(30%, 200px); }
}

@media (max-width: 980px) {
    .itb-real-copy-panel {
        width: auto;
        max-width: 360px;
        margin: 18px 18px 0;
        padding: 16px;
    }

    .itb-real-mini-panel {
        top: 18px;
        right: 18px;
        width: 176px;
    }

    .itb-real-services {
        right: 16px;
        bottom: 16px;
        left: 16px;
    }

    .itb-real-services article {
        min-height: 118px;
        padding: 14px 12px;
    }
}

@media (max-width: 760px) {
    .itb-real-site::after {
        background:
            linear-gradient(180deg, rgba(246, 241, 235, .92) 0%, rgba(246, 241, 235, .82) 35%, rgba(246, 241, 235, .30) 70%, rgba(246, 241, 235, .14) 100%),
            linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(12, 24, 41, .04) 65%, rgba(12, 24, 41, .10) 100%);
    }

    .itb-real-copy-panel {
        max-width: none;
        margin: 16px;
    }

    .itb-real-mini-panel {
        display: none;
    }

    .itb-real-services {
        grid-template-columns: 1fr;
    }

    .itb-real-services article + article {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .08);
    }
}

@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(60, 190, 114, .18); }
    55% { box-shadow: 0 0 0 8px rgba(60, 190, 114, 0); }
}

/* ==========================================================
   V6.4 – ITB Projektbild 1:1 eingebunden
   ========================================================== */
.project-system-itb-exact {
    display: grid;
    place-items: center;
    padding: 18px;
    background: #f0ede8;
}

.project-system-itb-exact::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(255,255,255,.22), transparent 32%);
    pointer-events: none;
}

.itb-project-image-exact {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    border-radius: 12px;
    box-shadow: 0 18px 38px rgba(18, 25, 34, .14);
    background: #f7f5f1;
}

.project-system-detail.project-system-itb-exact {
    padding: 26px;
    background: #f3efe9;
}

.project-system-detail.project-system-itb-exact .itb-project-image-exact {
    border-radius: 16px;
}

@media (max-width: 760px) {
    .project-system-itb-exact,
    .project-system-detail.project-system-itb-exact {
        padding: 10px;
    }

    .itb-project-image-exact {
        border-radius: 10px;
    }
}

/* ==========================================================
   V6.5 – Breiteres Desktop-Layout
   ========================================================== */
:root {
    --shell: min(1540px, calc(100% - 56px));
}

@media (min-width: 1321px) {
    .hero {
        min-height: 940px;
        padding-top: 128px;
    }

    .hero-layout {
        grid-template-columns: minmax(630px, .9fr) minmax(760px, 1.1fr);
        gap: clamp(44px, 3.2vw, 62px);
    }

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

    .hero-copy h1 {
        max-width: 730px;
        font-size: clamp(58px, 4.25vw, 76px);
        line-height: 1.08;
    }

    .hero-lead {
        max-width: 660px;
    }

    .hero-product-stage {
        width: min(100%, 930px);
        min-height: 690px;
    }

    .hero-app-window {
        width: 94%;
    }

    .hero-deploy-card {
        left: 10px;
    }

    .platform-layout {
        grid-template-columns: minmax(440px, .72fr) minmax(780px, 1.28fr);
        gap: clamp(54px, 4vw, 88px);
    }

    .platform-product-visual {
        width: min(100%, 960px);
        margin-left: auto;
    }

    .project-showcase,
    .service-grid,
    .technology-layout,
    .about-layout,
    .faq-layout,
    .final-cta-layout {
        width: 100%;
    }
}

@media (min-width: 1720px) {
    :root {
        --shell: min(1620px, calc(100% - 72px));
    }

    .hero-layout {
        grid-template-columns: minmax(680px, .9fr) minmax(820px, 1.1fr);
    }

    .hero-product-stage {
        width: min(100%, 980px);
    }
}

@media (max-width: 1320px) {
    :root {
        --shell: min(1240px, calc(100% - 48px));
    }
}

@media (max-width: 680px) {
    :root {
        --shell: calc(100% - 30px);
    }
}