:root {
    --color-primary: #2aa7df;
    --color-primary-dark: #126891;
    --color-primary-light: #e7f6fc;
    --color-background: #f7fafc;
    --color-surface: #ffffff;
    --color-surface-muted: #eef4f8;
    --color-text: #1f2933;
    --color-text-muted: #667382;
    --color-border: #d8e4ec;
    --color-dark: #17212b;
    --shadow-sm: 0 10px 24px rgba(24, 44, 61, .07);
    --shadow-md: 0 24px 60px rgba(24, 44, 61, .11);
    --radius: 8px;
    --container: 1180px;
    --header-height: 76px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--color-text);
    background: var(--color-background);
    line-height: 1.6;
    text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible {
    outline: 3px solid rgba(42,167,223,.42);
    outline-offset: 3px;
}
p { margin: 0 0 1rem; }
h1, h2, h3 { margin: 0; line-height: 1.08; letter-spacing: 0; color: var(--color-dark); }
h1 { font-size: clamp(2.35rem, 6vw, 4.65rem); max-width: 900px; }
h2 { font-size: clamp(2rem, 4vw, 3.1rem); max-width: 860px; }
h3 { font-size: 1.15rem; }
.container { width: min(var(--container), calc(100% - 40px)); margin: 0 auto; }
.screen-reader-text, .skip-link {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}
.skip-link:focus {
    width: auto;
    height: auto;
    clip: auto;
    z-index: 1000;
    top: 10px;
    left: 10px;
    padding: 10px 14px;
    background: var(--color-dark);
    color: #fff;
}
.eyebrow {
    margin-bottom: 14px;
    color: var(--color-primary-dark);
    font-weight: 800;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 12px 18px;
    border-radius: var(--radius);
    font-weight: 750;
    border: 1px solid transparent;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.button:hover { transform: translateY(-1px); }
.button-primary { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-sm); }
.button-primary:hover { background: var(--color-primary-dark); }
.button-secondary { background: #fff; color: var(--color-primary-dark); border-color: var(--color-border); }
.button-small { min-height: 40px; padding: 9px 14px; font-size: .92rem; }
.text-link { color: var(--color-primary-dark); font-weight: 800; }

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: var(--header-height);
    background: rgba(255,255,255,.9);
    border-bottom: 1px solid rgba(216,228,236,.8);
    backdrop-filter: blur(16px);
}
.header-inner {
    min-height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 850;
    color: var(--color-dark);
}
.brand-mark {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    box-shadow: var(--shadow-sm);
}
.brand-text { font-size: 1.08rem; }
.site-nav { display: flex; align-items: center; gap: 14px; min-width: 0; }
.nav { display: flex; align-items: center; gap: clamp(10px, 1.25vw, 18px); margin: 0; padding: 0; list-style: none; min-width: 0; }
.nav a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    color: var(--color-text-muted);
    font-weight: 650;
    font-size: clamp(.86rem, .88vw, .95rem);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"], .nav-current a { color: var(--color-primary-dark); border-bottom-color: var(--color-primary); }
.language-switch {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--color-text-muted);
    font-weight: 750;
    font-size: .84rem;
    white-space: nowrap;
}
.language-switch a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 2px;
}
.language-switch a:hover, .language-switch .is-active { color: var(--color-primary-dark); }
.nav-toggle { display: none; background: transparent; border: 0; padding: 8px; border-radius: var(--radius); }
.nav-toggle span:not(.screen-reader-text) { display: block; width: 24px; height: 2px; background: var(--color-dark); margin: 5px 0; }

.hero {
    position: relative;
    padding: 70px 0 56px;
    overflow: hidden;
    background:
        radial-gradient(circle at 15% 10%, rgba(42,167,223,.13), transparent 34%),
        linear-gradient(180deg, #fff 0%, var(--color-background) 100%);
}
.hero-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(360px, .82fr); gap: clamp(34px, 5vw, 76px); align-items: center; }
.hero h1 {
    max-width: 760px;
    font-size: clamp(3.05rem, 5.25vw, 5.6rem);
    line-height: .98;
}
.hero-lead { margin-top: 24px; max-width: 720px; font-size: clamp(1.04rem, 1.18vw, 1.18rem); color: var(--color-text-muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

.tech-visual {
    position: relative;
    min-height: 420px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background:
        linear-gradient(120deg, rgba(255,255,255,.82), rgba(231,246,252,.84)),
        repeating-linear-gradient(90deg, transparent 0 42px, rgba(18,104,145,.06) 43px 44px),
        repeating-linear-gradient(0deg, transparent 0 42px, rgba(18,104,145,.05) 43px 44px);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.tech-map { position: absolute; inset: 0; width: 100%; height: 100%; padding: 28px; }
.tech-line { fill: none; stroke: rgba(18,104,145,.24); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 7 9; }
.tech-core rect,
.tech-item rect {
    fill: url(#techNode);
    stroke: rgba(42,167,223,.32);
    stroke-width: 2;
    filter: drop-shadow(0 12px 22px rgba(24,44,61,.1));
}
.tech-core path,
.tech-item path {
    fill: none;
    stroke: #126891;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.tech-core text,
.tech-item text {
    fill: #182c3d;
    font-size: 18px;
    font-weight: 850;
    text-anchor: middle;
}
.tech-core text { font-size: 15px; fill: #126891; }

.competence-cycle {
    --cycle-progress: 0%;
    padding: 26px 0 34px;
    background:
        linear-gradient(180deg, #fff, var(--color-primary-light));
    border-block: 1px solid var(--color-border);
}
.competence-cycle-track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    padding: 0 0 28px;
}
.cycle-line {
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 13px;
    height: 2px;
    background: rgba(18,104,145,.16);
    border-radius: 999px;
    overflow: hidden;
}
.cycle-line span {
    display: block;
    width: var(--cycle-progress);
    height: 100%;
    background: var(--color-primary);
    transition: width .42s ease;
}
.cycle-step {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 4px;
    min-width: 0;
    min-height: 68px;
    padding: 10px 8px;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: #526171;
    cursor: pointer;
    font: inherit;
    text-align: center;
    transition: color .22s ease, background-color .22s ease, transform .22s ease;
}
.cycle-step::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -21px;
    width: 12px;
    height: 12px;
    transform: translateX(-50%);
    border: 2px solid #fff;
    border-radius: 50%;
    background: #b5d3df;
    box-shadow: 0 0 0 1px rgba(18,104,145,.18);
}
.cycle-step span {
    color: var(--color-primary-dark);
    font-weight: 850;
    font-size: .78rem;
}
.cycle-step strong {
    display: block;
    overflow-wrap: anywhere;
    font-size: .98rem;
    line-height: 1.18;
}
.cycle-step.is-active,
.cycle-step[aria-selected="true"] {
    color: var(--color-dark);
    background: rgba(231,246,252,.86);
    transform: translateY(-2px);
}
.cycle-step.is-active::after,
.cycle-step[aria-selected="true"]::after {
    background: var(--color-primary);
    box-shadow: 0 0 0 7px rgba(42,167,223,.14);
}
.competence-cycle-panels {
    min-height: 154px;
    padding: 24px 26px;
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(42,167,223,.2);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.cycle-panel {
    display: block;
    padding: 6px 0;
}
.js .cycle-panel {
    display: none;
    opacity: 0;
    transform: translateY(5px);
}
.js .cycle-panel.is-active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    transition: opacity .26s ease, transform .26s ease;
}
.cycle-panel h2 {
    margin-bottom: 8px;
    color: var(--color-dark);
    font-size: clamp(1.28rem, 2vw, 1.72rem);
}
.cycle-panel p {
    max-width: 820px;
    margin: 0;
    color: var(--color-text-muted);
    font-size: 1.04rem;
    font-weight: 450;
    line-height: 1.6;
}
.cycle-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 36px;
    margin-top: 16px;
}
.cycle-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 10px;
    color: var(--color-primary-dark);
    background: var(--color-primary-light);
    border: 1px solid rgba(42,167,223,.2);
    border-radius: 999px;
    font-size: .86rem;
    font-weight: 750;
}
.usecase-list span {
    padding: 10px 13px;
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    border: 1px solid rgba(42,167,223,.2);
    border-radius: 999px;
    font-weight: 750;
    font-size: .9rem;
}
@media (prefers-reduced-motion: reduce) {
    .cycle-line span,
    .cycle-step,
    .cycle-panel {
        transition: none !important;
        transform: none !important;
    }
    .js .cycle-panel { display: block; opacity: 1; }
    .cycle-line span { width: 100%; }
}
.section { padding: 72px 0; }
.section-tint { background: #fff; border-block: 1px solid var(--color-border); }
.compact-section { padding-top: 42px; }
.section-heading { margin-bottom: 34px; }
.section-heading p:not(.eyebrow) { max-width: 720px; color: var(--color-text-muted); font-size: 1.05rem; }
.section-action { margin-top: 28px; }
.cards-cta { margin-top: 34px; text-align: center; }
.service-grid, .industry-grid, .trust-grid, .insight-grid, .solution-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.service-grid-balanced,
.solution-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.solution-grid article:nth-child(5) { grid-column-start: 2; }
.service-card, .industry-grid article, .trust-grid article, .insight-card, .process-grid article, .solution-grid article {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.service-card {
    min-height: 100%;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.service-card:hover {
    transform: translateY(-3px);
    border-color: rgba(42,167,223,.42);
    box-shadow: 0 18px 42px rgba(24, 44, 61, .12);
}
.service-card-link { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 18px; min-height: 100%; padding: 24px; }
.service-icon {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: linear-gradient(180deg, #eef9fd, #dff2fa);
    color: var(--color-primary-dark);
    font-weight: 850;
    border: 1px solid rgba(42,167,223,.18);
}
.service-icon img { width: 36px; height: 36px; object-fit: contain; }
.service-icon svg {
    width: 32px;
    height: 32px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.service-card-body { display: flex; flex-direction: column; min-width: 0; }
.solution-grid article { padding: 24px; min-height: 100%; }
.solution-grid .service-icon { margin-bottom: 18px; }
.solution-grid h2 { margin-bottom: 10px; font-size: 1.28rem; }
.service-card h3, .industry-grid h2, .industry-grid h3, .trust-grid h2, .trust-grid h3, .insight-card h3 { margin-bottom: 10px; }
.industry-grid h2, .trust-grid h2 { font-size: 1.24rem; }
.service-card p, .industry-grid p, .trust-grid p, .insight-card p, .solution-grid p { color: var(--color-text-muted); }
.service-card .text-link { margin-top: auto; padding-top: 12px; }
.card-kicker { margin-bottom: 7px; color: var(--color-primary-dark) !important; font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.industry-grid article, .trust-grid article, .insight-card a, .insight-card { padding: 24px; }
.split-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: 44px; align-items: center; }
.split-grid p { color: var(--color-text-muted); max-width: 640px; }
.usecase-list { display: flex; flex-wrap: wrap; gap: 12px; padding: 26px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.usecase-list span,
.lab-feature-points span,
.hero-benefit-card span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    font-weight: 800;
    font-size: .9rem;
}
.process-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.process-grid article { padding: 24px; position: relative; }
.process-grid span { display: inline-flex; margin-bottom: 20px; color: var(--color-primary-dark); font-weight: 850; }
.process-grid p { color: var(--color-text-muted); }

.service-explorer-section,
.solution-bento-section { padding-top: 34px; padding-bottom: 88px; }
.service-explorer {
    display: grid;
    grid-template-columns: minmax(260px, .34fr) minmax(0, .66fr);
    gap: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: var(--shadow-md);
}
.service-explorer-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 18px;
    background: linear-gradient(180deg, #f8fcfe, #eef6fa);
    border-right: 1px solid var(--color-border);
}
.explorer-tab {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 58px;
    padding: 10px 12px;
    border: 0;
    border-left: 3px solid transparent;
    border-radius: var(--radius);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    font: inherit;
    text-align: left;
    min-width: 0;
}
.explorer-tab strong {
    min-width: 0;
    color: inherit;
    font-size: 1rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.explorer-tab.is-active,
.explorer-tab[aria-selected="true"] {
    border-left-color: var(--color-primary);
    background: var(--color-primary-light);
    color: var(--color-dark);
}
.service-icon.mini {
    width: 34px;
    height: 34px;
    border-radius: 10px;
}
.service-icon.mini svg { width: 20px; height: 20px; }
.service-explorer-panels {
    position: relative;
    min-height: 560px;
    padding: 46px;
    background:
        radial-gradient(circle at 90% 12%, rgba(42,167,223,.12), transparent 30%),
        repeating-linear-gradient(90deg, transparent 0 36px, rgba(18,104,145,.04) 37px 38px),
        #fff;
}
.explorer-panel { display: block; min-width: 0; }
.js .explorer-panel { display: none; opacity: 0; transform: translateY(4px); }
.js .explorer-panel.is-active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    transition: opacity .22s ease, transform .22s ease;
}
.explorer-panel .service-icon { margin-bottom: 22px; }
.explorer-panel h2 { margin-bottom: 16px; font-size: clamp(2rem, 3vw, 2.85rem); }
.explorer-panel p {
    max-width: 700px;
    color: var(--color-text-muted);
    font-size: 1.08rem;
    line-height: 1.65;
}
.explorer-panel ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 18px;
    max-width: 760px;
    margin: 24px 0;
    padding-left: 1.1rem;
    color: var(--color-text);
}
.explorer-panel li { margin: 0; }

.solution-bento {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: minmax(190px, auto);
    gap: 18px;
}
.bento-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 26px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    transition: border-color .18s ease, transform .18s ease;
}
.bento-card:hover { transform: translateY(-2px); border-color: rgba(42,167,223,.44); }
.bento-large { grid-column: span 6; grid-row: span 2; }
.bento-medium { grid-column: span 6; }
.bento-small { grid-column: span 4; }
.bento-tint { background: var(--color-primary-light); }
.bento-dark {
    background: var(--color-dark);
    color: #fff;
}
.bento-dark h2, .bento-dark p, .bento-dark strong { color: #fff; }
.bento-card .service-icon { margin-bottom: 18px; }
.bento-card h2 { margin-bottom: 12px; font-size: clamp(1.35rem, 2vw, 2rem); }
.bento-card p {
    max-width: 540px;
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1.55;
}
.bento-card div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 18px;
}
.bento-card div span {
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(42,167,223,.11);
    color: var(--color-primary-dark);
    font-size: .82rem;
    font-weight: 750;
}
.bento-dark div span { background: rgba(255,255,255,.14); color: #fff; }
.bento-card strong { margin-top: 18px; color: var(--color-primary-dark); }

.services-overview-section { padding-top: 42px; }
.service-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.service-detail-card,
.outcome-grid article,
.lab-card-grid article,
.focus-grid article,
.expertise-card,
.project-card,
.experience-panel,
.open-source-panel,
.digital-lab {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.service-detail-card,
.focus-grid article,
.expertise-card,
.project-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 24px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.service-detail-card:hover,
.lab-card-grid article:hover,
.outcome-grid article:hover,
.focus-grid article:hover,
.expertise-card:hover,
.project-card:hover {
    transform: translateY(-2px);
    border-color: rgba(42,167,223,.42);
    box-shadow: 0 18px 42px rgba(24, 44, 61, .12);
}
.service-detail-card .service-icon,
.focus-grid .service-icon,
.expertise-card .service-icon,
.lab-card-grid .service-icon { margin-bottom: 18px; }
.service-detail-card h3,
.focus-grid h3,
.lab-card-grid h3,
.outcome-grid h3 { margin-bottom: 10px; font-size: 1.18rem; }
.service-detail-card p,
.outcome-grid p,
.focus-grid p,
.expertise-card p,
.project-card p,
.lab-card-grid p,
.lab-intro-grid p,
.digital-lab p,
.experience-panel p { color: var(--color-text-muted); }
.service-detail-card ul {
    margin: 8px 0 18px;
    padding-left: 1.1rem;
    color: var(--color-text);
}
.service-benefit {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--color-border);
}
.service-detail-card .text-link { padding-top: 8px; }
.outcome-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}
.outcome-grid article { padding: 22px; min-height: 100%; }
.focus-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}
.focus-grid article { min-height: 100%; padding: 24px; }
.focus-grid .text-link { margin-top: auto; padding-top: 14px; }
.expertise-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.expertise-card.featured { grid-column: span 2; }
.expertise-feature-grid,
.project-preview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: 20px;
}
.expertise-feature-card,
.lab-feature,
.international-strip,
.project-preview-grid article {
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
}
.expertise-feature-card {
    position: relative;
    overflow: hidden;
    padding: 30px;
    background: #fff;
}
.expertise-feature-card h2 { font-size: clamp(1.65rem, 2.4vw, 2.55rem); }
.expertise-feature-card p { color: var(--color-text-muted); }
.expertise-feature-card ul { margin: 18px 0 0; padding-left: 1.1rem; }
.lab-feature-card {
    background:
        radial-gradient(circle at 88% 14%, rgba(42,167,223,.18), transparent 32%),
        linear-gradient(135deg, #fff, #eef9fd);
}
.facility-feature-card {
    background:
        repeating-linear-gradient(90deg, transparent 0 34px, rgba(18,104,145,.05) 35px 36px),
        linear-gradient(135deg, #fff, #f7fafc);
}
.facility-map {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin: 20px 0 10px;
}
.facility-map span {
    display: grid;
    place-items: center;
    min-height: 54px;
    padding: 8px;
    border: 1px solid rgba(42,167,223,.22);
    border-radius: var(--radius);
    background: rgba(255,255,255,.78);
    color: var(--color-primary-dark);
    font-weight: 800;
    font-size: .84rem;
    text-align: center;
}
.expertise-card h2,
.project-card h2 { margin-bottom: 12px; font-size: clamp(1.4rem, 2.2vw, 2rem); }
.expertise-card ul {
    margin: 12px 0 0;
    padding-left: 1.1rem;
    color: var(--color-text);
}
.expertise-card .button { margin-top: 18px; align-self: flex-start; }
.open-source-panel {
    display: grid;
    grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
    gap: 38px;
    padding: 34px;
}
.dark-focus-section {
    background:
        radial-gradient(circle at 86% 16%, rgba(42,167,223,.18), transparent 34%),
        linear-gradient(135deg, #10202e, #182c3d);
}
.dark-panel {
    background: transparent;
    border-color: rgba(255,255,255,.16);
    box-shadow: none;
}
.dark-panel h2,
.dark-panel p,
.dark-panel li,
.dark-panel .tech-note { color: #fff; }
.dark-panel .eyebrow { color: #8bd5f3; }
.dark-panel .check-list li::before { color: #8bd5f3; }
.dark-panel .tech-note { border-top-color: rgba(255,255,255,.18); opacity: .82; }
.international-strip {
    display: grid;
    grid-template-columns: minmax(0, .86fr) minmax(0, 1fr);
    gap: 30px;
    align-items: center;
    padding: 30px;
    background:
        linear-gradient(90deg, #fff, #f4fbfe);
}
.international-strip p { color: var(--color-text-muted); }
.open-source-panel p { color: var(--color-text-muted); }
.tech-note {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
    font-size: .94rem;
}
.project-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.project-card div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 18px;
}
.project-card div span {
    padding: 6px 9px;
    border-radius: 999px;
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    font-size: .82rem;
    font-weight: 750;
}
.process-grid-five { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.lab-feature-section {
    padding-top: 30px;
    background: linear-gradient(180deg, var(--color-background), #fff);
}
.lab-feature {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: 34px;
    align-items: center;
    padding: 34px;
    background:
        radial-gradient(circle at 100% 0%, rgba(42,167,223,.18), transparent 34%),
        linear-gradient(135deg, #fff, #eef9fd);
}
.lab-feature h2 {
    max-width: 560px;
    font-size: clamp(1.72rem, 2.45vw, 2.65rem);
    hyphens: auto;
    overflow-wrap: normal;
}
.lab-feature p { color: var(--color-text-muted); }
.lab-feature-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.lab-feature-points span {
    min-height: 68px;
    border-radius: var(--radius);
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(42,167,223,.2);
}
.project-preview-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.project-preview-grid article {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 24px;
    background: #fff;
}
.project-preview-grid h3 { margin-bottom: 12px; font-size: 1.1rem; }
.project-preview-grid p { color: var(--color-text-muted); font-size: .98rem; }
.project-preview-grid .text-link { margin-top: auto; padding-top: 14px; }

.lab-hero {
    padding: 62px 0 50px;
    background:
        linear-gradient(135deg, #fff 0%, #eef9fd 55%, var(--color-background) 100%);
    border-bottom: 1px solid var(--color-border);
    overflow: hidden;
}
.lab-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(430px, .8fr);
    gap: 50px;
    align-items: center;
}
.lab-hero h1 { font-size: clamp(2.35rem, 4.9vw, 4.25rem); }
.lab-hero p:not(.eyebrow) {
    max-width: 760px;
    color: var(--color-text-muted);
    font-size: 1.08rem;
}
.lab-hero-lead {
    margin-top: 22px;
    color: var(--color-primary-dark) !important;
    font-size: clamp(1.25rem, 2vw, 1.65rem) !important;
    line-height: 1.32;
    font-weight: 800;
}
.trust-line {
    margin-top: 24px !important;
    color: var(--color-primary-dark) !important;
    font-size: .92rem !important;
    font-weight: 800;
}
.lab-intro-grid,
.digital-lab,
.experience-panel {
    display: grid;
    grid-template-columns: minmax(220px, .42fr) minmax(0, 1fr);
    gap: 46px;
    align-items: start;
}
.lab-benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 24px;
}
.lab-benefits span,
.target-grid span {
    padding: 14px 16px;
    color: var(--color-primary-dark);
    background: #fff;
    border: 1px solid rgba(42,167,223,.22);
    border-radius: var(--radius);
    font-weight: 800;
}
.lab-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.lab-card-grid article {
    min-height: 100%;
    padding: 24px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.digital-lab {
    padding: 34px;
    background:
        radial-gradient(circle at 92% 10%, rgba(42,167,223,.14), transparent 28%),
        linear-gradient(135deg, var(--color-dark), #126891);
}
.digital-lab h2,
.digital-lab p,
.digital-lab .eyebrow { color: #fff; }
.digital-lab p { color: rgba(255,255,255,.76); }
.check-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.check-list li {
    position: relative;
    padding-left: 28px;
    color: var(--color-text);
}
.check-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 12px;
    height: 7px;
    border-left: 2px solid var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    transform: rotate(-45deg);
}
.open-source-panel .check-list li,
.light-list li { color: var(--color-text); }
.digital-lab .check-list li,
.dark-panel.open-source-panel .check-list li { color: rgba(255,255,255,.88); }
.target-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.experience-panel {
    padding: 34px;
    grid-template-columns: minmax(280px, .62fr) minmax(0, 1.38fr);
}
.experience-panel h2,
.open-source-panel h2 {
    font-size: clamp(1.75rem, 2.55vw, 2.28rem);
}
.experience-panel .check-list li { color: var(--color-text); }
.check-list.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lab-closing {
    background: var(--color-dark);
    color: #fff;
}
.lab-closing h2 { color: #fff; }
.lab-closing p {
    max-width: 760px;
    color: rgba(255,255,255,.74);
    font-size: 1.08rem;
}

.page-hero { padding: 50px 0 28px; background: linear-gradient(180deg, #fff, var(--color-background)); }
.page-template-page-leistungen .page-hero,
.page-leistungen .page-hero { padding: 44px 0 24px; }
.page-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, .98fr) minmax(320px, .62fr);
    gap: 36px;
    align-items: center;
}
.compact-hero h1 {
    max-width: 820px;
    font-size: clamp(2rem, 3.6vw, 3.28rem);
    overflow-wrap: normal;
}
.compact-hero p:not(.eyebrow) { max-width: 690px; color: var(--color-text-muted); font-size: 1.06rem; }
.page-template-page-leistungen .section,
.page-leistungen .section { padding-top: 26px; }
.hero-benefit-card {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    gap: 10px;
    min-height: 176px;
    padding: 24px;
    border: 1px solid rgba(42,167,223,.24);
    border-radius: 14px;
    background:
        repeating-linear-gradient(90deg, transparent 0 32px, rgba(18,104,145,.05) 33px 34px),
        linear-gradient(135deg, #fff, #eef9fd);
    box-shadow: var(--shadow-sm);
}
.content-body {
    max-width: 820px;
    padding: 54px 0 88px;
    font-size: 1.06rem;
}
.content-body h2 { font-size: 2rem; margin: 2.2rem 0 1rem; }
.content-body h3 { margin: 1.6rem 0 .7rem; }
.content-body ul { padding-left: 1.2rem; }
.content-body li { margin-bottom: .45rem; }
.about-enhanced { background: var(--color-background); }
.about-visual-hero {
    padding: 54px 0 38px;
    background:
        linear-gradient(135deg, #fff 0%, #eef9fd 54%, #f7fafc 100%);
    border-bottom: 1px solid var(--color-border);
    overflow: hidden;
}
.about-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(480px, 1fr);
    gap: 58px;
    align-items: center;
}
.about-hero-copy h1 {
    font-size: clamp(3.4rem, 5vw, 4.8rem);
}
.about-claim {
    margin-top: 18px;
    max-width: 760px;
    color: var(--color-primary-dark);
    font-size: clamp(1.35rem, 2.1vw, 1.85rem);
    line-height: 1.25;
    font-weight: 800;
}
.about-intro {
    max-width: 820px;
    margin-top: 22px;
    color: var(--color-text-muted);
    font-size: 1.08rem;
    line-height: 1.65;
}
.about-network-visual {
    position: relative;
    min-height: 300px;
    border: 1px solid rgba(42,167,223,.2);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.78), rgba(231,246,252,.82)),
        repeating-linear-gradient(90deg, transparent 0 34px, rgba(18,104,145,.06) 35px 36px),
        repeating-linear-gradient(0deg, transparent 0 34px, rgba(18,104,145,.05) 35px 36px);
    box-shadow: var(--shadow-sm);
}
.network-core {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: 82px;
    height: 82px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--color-border);
    color: var(--color-primary-dark);
    font-weight: 900;
    box-shadow: var(--shadow-sm);
}
.network-node {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 0 0 9px rgba(42,167,223,.13);
}
.node-one { left: 18%; top: 24%; }
.node-two { right: 18%; top: 30%; }
.node-three { left: 28%; bottom: 20%; }
.node-four { right: 26%; bottom: 22%; }
.network-line {
    position: absolute;
    left: 20%;
    right: 20%;
    top: 50%;
    height: 1px;
    background: rgba(18,104,145,.22);
    transform-origin: center;
}
.line-a { transform: rotate(18deg); }
.line-b { transform: rotate(-24deg); }
.line-c { transform: rotate(90deg); opacity: .7; }
.about-lab-visual {
    position: relative;
    width: min(100%, 560px);
    min-height: 398px;
    justify-self: center;
    align-self: center;
    background: transparent;
    overflow: visible;
}
.about-lab-visual::before {
    content: "";
    position: absolute;
    inset: 34px 44px 42px 28px;
    border-radius: 48% 52% 46% 54%;
    background: linear-gradient(135deg, rgba(42,167,223,.15), rgba(255,255,255,.34));
}
.lab-system-svg {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 650 / 392;
}
.lab-grid {
    fill: none;
    stroke: rgba(18,104,145,.06);
    stroke-width: 1;
}
.lab-ambient { fill: rgba(255,255,255,.34); }
.lab-bg-grid {
    fill: none;
    stroke: rgba(18,104,145,.06);
    stroke-width: 1;
}
.lab-zone-label {
    fill: var(--color-primary-dark);
    font: 850 13px/1 var(--font-sans);
    letter-spacing: .09em;
    opacity: .74;
}
.flow-line {
    fill: none;
    stroke: rgba(18,104,145,.38);
    stroke-width: 2.4;
    stroke-linecap: round;
}
.data-line {
    fill: none;
    stroke: rgba(18,104,145,.44);
    stroke-width: 3;
    stroke-linecap: round;
}
.data-line.primary { stroke: rgba(42,167,223,.68); }
.data-line.secondary { stroke: rgba(42,167,223,.5); }
.data-line.return {
    stroke: rgba(18,104,145,.3);
    stroke-dasharray: 7 8;
}
.flow-dot {
    fill: var(--color-primary);
    opacity: .86;
    filter: drop-shadow(0 0 8px rgba(42,167,223,.42));
}
.data-pulse {
    fill: var(--color-primary);
    opacity: .9;
    filter: drop-shadow(0 0 8px rgba(42,167,223,.48));
}
.return-pulse {
    fill: var(--color-primary-dark);
    opacity: .74;
}
.dot-c { fill: var(--color-primary-dark); opacity: .7; }
.lab-device text,
.gateway text,
.it-system text {
    fill: var(--color-primary-dark);
    font: 760 12px/1 var(--font-sans);
}
.lab-system-svg .metric-text { font-size: 13px; }
.lab-system-svg .micro-text { font-size: 10px; font-weight: 800; }
.lab-system-svg .caption-text { font-size: 12px; font-weight: 780; }
.lab-system-svg .status-text { font-size: 10.5px; font-weight: 800; dominant-baseline: middle; }
.device-body {
    fill: url(#labDeviceFace);
    stroke: rgba(18,104,145,.22);
    stroke-width: 1.5;
}
.large-device .device-body {
    fill: url(#labPanelFill);
    stroke: rgba(18,104,145,.38);
    stroke-width: 2.2;
}
.device-header,
.device-display,
.control-panel,
.gateway-box,
.dashboard-card,
.server-card,
.network-strip rect {
    fill: url(#labAccentFill);
    stroke: rgba(18,104,145,.34);
    stroke-width: 2;
}
.device-top,
.device-display {
    fill: #f8fcfe;
    stroke: rgba(18,104,145,.16);
}
.device-door {
    fill: #fff;
    stroke: rgba(18,104,145,.18);
}
.device-window {
    fill: rgba(42,167,223,.1);
    stroke: rgba(42,167,223,.25);
}
.device-shelf,
.device-lock,
.device-base,
.device-warning,
.device-warning-mark,
.door-handle,
.air-curve,
.lab-context,
.gateway-port,
.shield-mark,
.shield-check,
.gateway-link,
.door-status-icon,
.chart-axis,
.chart-line,
.db-body,
.factory-icon,
.server-lines,
.network-strip path {
    fill: none;
    stroke: var(--color-primary-dark);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.air-curve,
.chart-line.temp { stroke: var(--color-primary); }
.air-curve.second,
.chart-line.rh { stroke: rgba(18,104,145,.54); }
.device-warning {
    stroke: rgba(18,104,145,.35);
    animation: lab-warning 11s ease-in-out infinite;
}
.device-warning-mark {
    stroke: rgba(18,104,145,.42);
    animation: lab-warning 11s ease-in-out infinite;
}
.device-port { fill: rgba(18,104,145,.42); }
.sensor-point,
.door-ok-dot,
.network-strip circle {
    fill: var(--color-primary);
    stroke: #fff;
    stroke-width: 2;
}
.door-status-icon {
    fill: none;
    stroke: var(--color-primary-dark);
    stroke-width: 2;
}
.alarm-dot {
    fill: rgba(18,104,145,.34);
    stroke: #fff;
    stroke-width: 2;
}
.status-dot {
    fill: var(--color-primary);
    animation: lab-status 3.8s ease-in-out infinite;
}
.status-dot.small { animation-delay: .8s; }
.status-pill {
    fill: rgba(66,185,131,.12);
    stroke: rgba(66,185,131,.42);
    stroke-width: 1.4;
}
.alarm-pill {
    fill: rgba(219,126,42,.08);
    stroke: rgba(219,126,42,.3);
    stroke-width: 1.4;
}
.chip-dot { transform-box: fill-box; transform-origin: center; }
.db-top {
    fill: rgba(42,167,223,.08);
    stroke: var(--color-primary-dark);
    stroke-width: 2.2;
}
.data-prod-caption { font-size: 10.4px !important; }
.lab-node rect {
    fill: rgba(255,255,255,.88);
    stroke: rgba(42,167,223,.24);
    stroke-width: 1.5;
}
.lab-node path,
.lab-node circle,
.lab-node ellipse {
    fill: none;
    stroke: var(--color-primary-dark);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.node-security rect { fill: rgba(234,246,251,.94); }
.node-monitoring rect { fill: rgba(255,255,255,.96); }
.node-production rect { fill: rgba(248,252,254,.96); }
@keyframes lab-status {
    0%, 100% { opacity: .72; transform: scale(1); transform-origin: 42px 37px; }
    50% { opacity: 1; transform: scale(1.26); transform-origin: 42px 37px; }
}
@keyframes lab-warning {
    0%, 68%, 100% { stroke: rgba(18,104,145,.35); }
    74%, 80% { stroke: rgba(219,126,42,.72); }
}
.about-stats {
    position: relative;
    z-index: 2;
    margin-top: -22px;
}
.about-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.about-stats-grid div {
    padding: 22px 24px;
    border-right: 1px solid var(--color-border);
}
.about-stats-grid div:last-child { border-right: 0; }
.about-stats-grid strong {
    display: block;
    color: var(--color-dark);
    font-size: 1.18rem;
    line-height: 1.2;
}
.about-stats-grid span {
    display: block;
    margin-top: 5px;
    color: var(--color-text-muted);
    font-weight: 650;
}
.about-content-grid {
    display: grid;
    grid-template-columns: minmax(220px, .42fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}
.about-section { padding-block: 58px; }
.about-section-heading {
    position: relative;
    padding-top: 4px;
}
.about-section-heading::after {
    content: "";
    display: block;
    width: 64px;
    height: 3px;
    margin-top: 18px;
    border-radius: 999px;
    background: var(--color-primary);
}
.about-section-heading h2 { font-size: clamp(1.72rem, 2.7vw, 2.45rem); }
.about-copy {
    max-width: 780px;
    color: var(--color-text-muted);
    font-size: 1.08rem;
    line-height: 1.65;
}
.about-copy p:last-child { margin-bottom: 0; }
.about-process {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 24px;
}
.about-process span {
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #fff;
    color: var(--color-dark);
    font-weight: 750;
}
.about-process strong {
    display: block;
    color: var(--color-primary-dark);
    font-size: .82rem;
    margin-bottom: 4px;
}
.about-values-heading { margin-bottom: 24px; }
.about-values-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.about-values-grid article {
    min-height: 100%;
    padding: 24px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.about-values-grid article:hover {
    transform: translateY(-3px);
    border-color: rgba(42,167,223,.42);
    box-shadow: 0 18px 42px rgba(24, 44, 61, .12);
}
.about-card-icon {
    display: block;
    width: 40px;
    height: 40px;
    margin-bottom: 16px;
    border-radius: 12px;
    border: 1px solid rgba(42,167,223,.26);
    background:
        linear-gradient(135deg, rgba(42,167,223,.16), rgba(255,255,255,.8)),
        radial-gradient(circle at 70% 30%, var(--color-primary) 0 4px, transparent 5px);
}
.about-values-grid h3 { margin-bottom: 10px; }
.about-values-grid p {
    margin-bottom: 0;
    color: var(--color-text-muted);
}
.about-team-section {
    background:
        linear-gradient(180deg, var(--color-background), #fff);
}
.about-team-grid {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(300px, .65fr);
    gap: 42px;
    align-items: center;
}
.about-team-grid h2 {
    margin-bottom: 18px;
    font-size: clamp(1.72rem, 2.7vw, 2.45rem);
}
.competence-map {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 28px;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    background:
        linear-gradient(180deg, #fff, var(--color-primary-light));
    box-shadow: var(--shadow-sm);
}
.competence-map::before,
.competence-map::after {
    content: "";
    position: absolute;
    background: rgba(18,104,145,.18);
}
.competence-map::before { left: 50%; top: 28px; bottom: 28px; width: 1px; }
.competence-map::after { top: 50%; left: 28px; right: 28px; height: 1px; }
.competence-map span {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    min-height: 86px;
    padding: 14px;
    text-align: center;
    color: var(--color-primary-dark);
    background: rgba(255,255,255,.84);
    border: 1px solid rgba(42,167,223,.22);
    border-radius: var(--radius);
    font-weight: 800;
}
.about-statement {
    padding: 48px 0;
    background:
        linear-gradient(135deg, var(--color-dark), #126891);
}
.about-statement p {
    max-width: 900px;
    margin: 0;
    color: #fff;
    font-size: clamp(1.55rem, 2.6vw, 2.35rem);
    line-height: 1.22;
    font-weight: 850;
    padding-left: 22px;
    border-left: 4px solid var(--color-primary);
}
.post-feature-image { margin-bottom: 34px; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.page-feature-image { margin-top: 28px; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.kg-width-wide {
    width: min(1040px, calc(100vw - 40px));
    max-width: none;
    margin-left: 50%;
    transform: translateX(-50%);
}
.kg-width-full {
    width: 100vw;
    max-width: none;
    margin-left: 50%;
    transform: translateX(-50%);
}
.kg-width-full img,
.kg-width-wide img {
    width: 100%;
}
.kg-card { margin: 2rem 0; }
.kg-image { border-radius: var(--radius); }
.comments-wrap { margin-top: 48px; }

.final-cta { padding: 66px 0; background: var(--color-dark); color: #fff; }
.final-cta h2 { color: #fff; }
.final-cta p { color: rgba(255,255,255,.75); max-width: 720px; }
.final-cta .eyebrow { color: #8bd5f3; }
.final-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.site-footer { padding: 58px 0 24px; background: #fff; border-top: 1px solid var(--color-border); }
.footer-grid { display: grid; grid-template-columns: 1.35fr .8fr .9fr 1fr .8fr; gap: 28px; }
.footer-grid p, .footer-grid li { color: var(--color-text-muted); }
.footer-grid h3 { margin-bottom: 14px; font-size: .95rem; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 8px; }
.footer-bottom { margin-top: 38px; padding-top: 20px; border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: .9rem; }

@media (max-width: 1120px) {
    .brand-text { font-size: 1rem; }
    .button-small { padding-inline: 12px; }
    .hero h1 { font-size: clamp(2.65rem, 5.4vw, 4.35rem); }
    .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(320px, .78fr); gap: 34px; }
    .tech-visual { min-height: 360px; }
    .nav-toggle { display: block; }
    .site-nav {
        position: fixed;
        left: 20px;
        right: 20px;
        top: calc(var(--header-height) + 10px);
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 20px;
        background: #fff;
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        box-shadow: var(--shadow-md);
    }
    .site-nav.is-open { display: flex; }
    .nav { flex-direction: column; align-items: stretch; gap: 4px; }
    .nav a { width: 100%; min-height: 44px; border-bottom: 0; }
    .language-switch { padding-top: 6px; border-top: 1px solid var(--color-border); }
    .nav-cta { width: 100%; }
}

@media (max-width: 980px) {
    .hero-grid, .split-grid, .page-hero-grid, .lab-feature, .international-strip { grid-template-columns: 1fr; }
    .lab-hero-grid,
    .lab-intro-grid,
    .digital-lab,
    .experience-panel { grid-template-columns: 1fr; gap: 24px; }
    .about-hero-grid, .about-content-grid, .about-team-grid { grid-template-columns: 1fr; gap: 24px; }
    .about-network-visual,
    .about-lab-visual { min-height: 260px; max-width: 520px; justify-self: start; }
    .about-stats-grid, .about-values-grid { grid-template-columns: 1fr; }
    .about-stats-grid div { border-right: 0; border-bottom: 1px solid var(--color-border); }
    .about-stats-grid div:last-child { border-bottom: 0; }
    .about-process { grid-template-columns: 1fr; }
    .tech-visual { min-height: 340px; }
    .service-grid, .industry-grid, .trust-grid, .insight-grid, .solution-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .service-detail-grid,
    .focus-grid,
    .expertise-grid,
    .project-grid,
    .lab-card-grid,
    .outcome-grid,
    .target-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .expertise-card.featured { grid-column: span 2; }
    .open-source-panel { grid-template-columns: 1fr; gap: 24px; }
    .expertise-feature-grid,
    .project-preview-grid { grid-template-columns: 1fr; }
    .check-list.compact { grid-template-columns: 1fr; }
    .solution-grid article:nth-child(5) { grid-column-start: auto; }
    .process-grid, .process-grid-five, .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .service-explorer { grid-template-columns: 1fr; }
    .service-explorer-nav { border-right: 0; border-bottom: 1px solid var(--color-border); }
    .service-explorer-panels { min-height: 0; padding: 24px; }
    .explorer-panel ul { grid-template-columns: 1fr; }
    .solution-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
    .bento-large, .bento-medium, .bento-small { grid-column: span 1; grid-row: auto; }
    .competence-cycle { padding: 22px 0; }
    .competence-cycle-track { grid-template-columns: 1fr; padding-bottom: 0; gap: 8px; }
    .cycle-line { display: none; }
    .cycle-step {
        justify-items: start;
        min-height: 0;
        padding: 14px 16px;
        background: rgba(255,255,255,.76);
        border: 1px solid var(--color-border);
        text-align: left;
    }
    .cycle-step::after { display: none; }
    .cycle-step strong { font-size: 1rem; }
    .competence-cycle-panels {
        min-height: 0;
        margin-top: 10px;
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
    }
    .cycle-panel {
        margin-top: 8px;
        padding: 16px;
        background: #fff;
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        box-shadow: var(--shadow-sm);
    }
    .cycle-tags { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .flow-dot,
    .data-pulse,
    .status-dot,
    .device-warning,
    .device-warning-mark {
        animation: none !important;
    }
    .flow-pulses { display: none; }
    .data-flow { display: none; }
}

@media (max-width: 640px) {
    .container { width: min(100% - 28px, var(--container)); }
    .hero { padding: 44px 0 34px; }
    .hero h1 { font-size: clamp(2.35rem, 13vw, 3.25rem); line-height: 1.02; }
    .hero-lead { font-size: 1.02rem; }
    .section { padding: 54px 0; }
    .page-hero { padding: 38px 0 24px; }
    .service-grid, .industry-grid, .trust-grid, .insight-grid, .solution-grid, .process-grid, .footer-grid,
    .service-detail-grid, .focus-grid, .expertise-grid, .project-grid, .lab-card-grid, .outcome-grid, .target-grid, .lab-benefits { grid-template-columns: 1fr; }
    .expertise-card.featured { grid-column: auto; }
    .service-card-link { grid-template-columns: 54px minmax(0, 1fr); padding: 20px; }
    .service-icon { width: 54px; height: 54px; }
    .service-icon svg { width: 28px; height: 28px; }
    .about-lab-visual { max-width: 100%; min-height: 238px; }
    .lab-hero { padding: 46px 0 34px; }
    .digital-lab,
    .experience-panel { padding: 24px; }
    .lab-zone-label { display: none; }
    .final-cta-inner { flex-direction: column; align-items: flex-start; }
    .hero-actions .button { width: 100%; }
    .tech-visual { min-height: 270px; }
    .tech-map { padding: 14px; }
    .tech-core text,
    .tech-item text { font-size: 17px; }
    .lab-feature,
    .expertise-feature-card,
    .international-strip { padding: 22px; }
    .lab-feature-points,
    .facility-map { grid-template-columns: 1fr; }
    .hero-benefit-card { min-height: 0; padding: 18px; }
    .service-explorer-section,
    .solution-bento-section { padding-bottom: 64px; }
    .service-explorer { border-radius: var(--radius); }
    .service-explorer-nav { padding: 12px; }
    .explorer-tab { min-height: 54px; }
    .service-explorer-panels { padding: 18px; }
    .explorer-panel h2 { font-size: 1.72rem; }
    .solution-bento { grid-template-columns: 1fr; }
    .bento-card { padding: 22px; }
}