/* ==========================================================================
   OPC Turkey — visual system (October 2026)
   Product colours come from the products themselves:
     Kepware Server  → Velotic orange #ff4d00 on warm off-white, black type
     OPC Router      → the green ring and orange spheres of its own mark (inray)
     OPC Turkey      → the existing navy, with ASP blue where the ASP group appears
   Loaded after site.css; every rule here is additive.
   ========================================================================== */

:root {
    --kep: #ff4d00;
    --kep-hover: #ff6a2b;
    --kep-deep: #c23a00; /* orange for text on light surfaces (AA) */
    --kep-soft: #fff0e6;
    --kep-warm: #f7f6f5; /* Velotic's off-white */
    --kep-ink: #17100b;

    --rtr-deep: #123025;
    --rtr: #193e30;
    --rtr-leaf: #54866f;
    --rtr-leaf-text: #2f6b4f; /* leaf green for text on light surfaces (AA) */
    --rtr-orange: #f7ab59;
    --rtr-orange-deep: #e8943a;
    --rtr-soft: #eaf1ed;

    --inray-orange: #fd6220;
    --inray-navy: #002c52;
    --asp-blue: #388cd0;
    --asp-blue-deep: #2a6fae;
}

/* ---- buttons that take the colour of the page's product ------------------ */
.btn-product {
    background: var(--kep);
    color: var(--kep-ink);
    border: 0;
    font-weight: 700;
    box-shadow: 0 10px 24px -14px rgba(255, 77, 0, 0.9);
}
.btn-product:hover {
    background: var(--kep-hover);
    color: var(--kep-ink);
    transform: translateY(-1px);
}
.theme-router .btn-product {
    background: var(--rtr-orange);
    color: #241503;
    box-shadow: 0 10px 24px -14px rgba(247, 171, 89, 0.9);
}
.theme-router .btn-product:hover {
    background: #fbc17f;
    color: #241503;
}

/* ==========================================================================
   Product hero
   ========================================================================== */
.page-hero--product {
    position: relative;
    overflow: hidden;
    padding: 56px 0 0;
    border-bottom: 0;
    isolation: isolate;
}
.product-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
    gap: 56px;
    align-items: center;
    padding-bottom: 56px;
}
.page-hero--product .page-hero-copy {
    min-width: 0;
}
.page-hero--product h1 {
    max-width: 17ch;
    font-size: clamp(2.3rem, 4.4vw, 3.9rem);
    line-height: 1.04;
    letter-spacing: -0.025em;
}
.page-hero--product .page-lead {
    max-width: 52ch;
}
.product-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0 20px;
    font: 600 0.95rem var(--font);
    letter-spacing: 0.01em;
    text-transform: none; /* brand names keep their own case: Velotic, inray (Turkish upper-casing would spell them wrongly) */
}
.product-eyebrow img {
    width: auto;
    height: 22px;
}
.product-eyebrow i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.45;
}
.page-hero--product .breadcrumbs {
    margin-bottom: 22px;
}

/* Kepware Server: Velotic's warm off-white, a large orange disc behind the plate, black type */
.theme-kepware.page-hero--product,
.theme-kepware .page-hero--product {
    background: var(--kep-warm);
    color: var(--kep-ink);
}
.theme-kepware .page-hero--product h1 {
    color: #0d0805;
}
.theme-kepware .page-hero--product .page-lead {
    color: #3d3631;
}
.theme-kepware .page-hero--product .product-eyebrow {
    color: var(--kep-deep);
}
.theme-kepware .page-hero--product .breadcrumbs,
.theme-kepware .page-hero--product .breadcrumbs a {
    color: #6a615a;
}
.theme-kepware .page-hero--product .breadcrumbs li[aria-current] span {
    color: var(--kep-ink);
}
.theme-kepware .page-hero--product::before {
    content: "";
    position: absolute;
    z-index: -1;
    right: -140px;
    top: -170px;
    width: 640px;
    height: 640px;
    border-radius: 50%;
    background: var(--kep);
}
.theme-kepware .page-hero--product::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: -90px;
    bottom: -120px;
    width: 280px;
    height: 280px;
    border-radius: 44% 56% 62% 38% / 50% 42% 58% 50%;
    background: var(--kep-soft);
}
.theme-kepware .page-hero--product .link-arrow {
    color: var(--kep-ink);
    border-bottom: 2px solid var(--kep);
}

/* OPC Router: deep green with the leaf green and orange of its mark, white type */
.theme-router.page-hero--product,
.theme-router .page-hero--product {
    background:
        radial-gradient(900px 420px at 88% 0%, rgba(84, 134, 111, 0.55), transparent 62%),
        linear-gradient(180deg, var(--rtr) 0%, var(--rtr-deep) 100%);
    color: #fff;
}
.theme-router .page-hero--product h1 {
    color: #fff;
}
.theme-router .page-hero--product .page-lead {
    color: #cfe0d7;
}
.theme-router .page-hero--product .product-eyebrow {
    color: var(--rtr-orange);
}
.theme-router .page-hero--product .breadcrumbs,
.theme-router .page-hero--product .breadcrumbs a {
    color: #a9c4b6;
}
.theme-router .page-hero--product .breadcrumbs li[aria-current] span {
    color: #fff;
}
.theme-router .page-hero--product .breadcrumbs li + li::before {
    color: #5f8571;
}
.theme-router .page-hero--product .link-arrow {
    color: #fff;
    border-bottom: 2px solid var(--rtr-orange);
}
.theme-router .page-hero--product::before {
    content: "";
    position: absolute;
    z-index: -1;
    right: -80px;
    bottom: -150px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    border: 36px solid rgba(84, 134, 111, 0.28);
}
/* ---- the brand plate: what the product connects, drawn with the product's colours ---- */
.brand-plate {
    position: relative;
    z-index: 1;
    border-radius: 28px;
    padding: 18px 18px 8px;
    animation: bp-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.brand-plate svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}
.theme-kepware .brand-plate {
    background: #fff;
    box-shadow:
        0 40px 70px -34px rgba(120, 38, 0, 0.55),
        0 0 0 1px rgba(23, 16, 11, 0.06);
}
.theme-router .brand-plate {
    background: linear-gradient(160deg, #1f4a39 0%, #153427 100%);
    box-shadow:
        0 40px 70px -30px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}
.bp-chip rect {
    stroke-width: 1.5;
}
.bp-chip text {
    font: 600 17px var(--font);
    letter-spacing: -0.01em;
}
.bp-caption {
    font: 600 11px var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.bp-core-name {
    font: 700 21px var(--font);
}
.bp-core-sub {
    font: 600 12px var(--mono);
    letter-spacing: 0.12em;
}
.theme-kepware .bp-core-sub {
    text-transform: uppercase;
}
.bp-flow {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 7 9;
    animation: bp-dash 1.5s linear infinite;
}
.bp-flow--out {
    animation-duration: 1.9s;
}
.bp-chip {
    animation: bp-float 6.4s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}
.bp-pulse {
    fill: none;
    stroke-width: 2;
    transform-box: fill-box;
    transform-origin: center;
    animation: bp-pulse 3.2s ease-out infinite;
}
.bp-orbit {
    fill: none;
    stroke-width: 7;
    stroke-linecap: round;
}

/* Kepware colours */
.theme-kepware .bp-chip rect {
    fill: #fff7f2;
    stroke: rgba(255, 77, 0, 0.35);
}
.theme-kepware .bp-chip text {
    fill: var(--kep-ink);
}
.theme-kepware .bp-chip--client rect {
    fill: var(--kep-ink);
    stroke: var(--kep-ink);
}
.theme-kepware .bp-chip--client text {
    fill: #fff;
}
.theme-kepware .bp-flow {
    stroke: var(--kep);
}
.theme-kepware .bp-flow--out {
    stroke: var(--kep-ink);
}
.theme-kepware .bp-core rect {
    fill: var(--kep);
}
.theme-kepware .bp-core-name {
    fill: var(--kep-ink);
}
.theme-kepware .bp-core-sub {
    fill: rgba(23, 16, 11, 0.72);
}
.theme-kepware .bp-pulse {
    stroke: var(--kep);
}
.theme-kepware .bp-caption {
    fill: #7a6f66;
}

/* OPC Router colours */
.theme-router .bp-chip rect {
    fill: rgba(255, 255, 255, 0.07);
    stroke: rgba(255, 255, 255, 0.24);
}
.theme-router .bp-chip text {
    fill: #fff;
}
.theme-router .bp-chip--client rect {
    fill: var(--rtr-orange);
    stroke: var(--rtr-orange);
}
.theme-router .bp-chip--client text {
    fill: #241503;
}
.theme-router .bp-flow {
    stroke: var(--rtr-leaf);
}
.theme-router .bp-flow--out {
    stroke: var(--rtr-orange);
}
.theme-router .bp-core rect {
    fill: #fff;
}
.theme-router .bp-core-name,
.theme-router .bp-core-sub {
    fill: var(--rtr);
}
.theme-router .bp-pulse {
    stroke: var(--rtr-leaf);
}
.theme-router .bp-orbit {
    stroke: var(--rtr-leaf);
    opacity: 0.9;
}
.theme-router .bp-sphere {
    fill: var(--rtr-orange);
}
.theme-router .bp-sphere--b {
    fill: #fbc17f;
}
.theme-router .bp-caption {
    fill: #8fb3a1;
}

@keyframes bp-dash {
    to {
        stroke-dashoffset: -32;
    }
}
@keyframes bp-float {
    50% {
        transform: translateY(-5px);
    }
}
@keyframes bp-pulse {
    0% {
        transform: scale(0.9);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.35);
        opacity: 0;
    }
}
@keyframes bp-in {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
    }
}

/* ---- the family's own page navigation -------------------------------------- */
.product-tabs {
    position: relative;
    border-top: 1px solid var(--tabs-line, rgba(0, 0, 0, 0.1));
    background: var(--tabs-bg, #fff);
}
.product-tabs ul {
    display: flex;
    gap: 2px;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}
.product-tabs ul::-webkit-scrollbar {
    display: none;
}
.product-tabs a {
    display: block;
    padding: 17px 20px 15px;
    white-space: nowrap;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--tabs-ink, #3d3631);
    border-bottom: 3px solid transparent;
    transition:
        background-color 0.2s,
        color 0.2s,
        border-color 0.2s;
}
.product-tabs a:hover {
    background: var(--tabs-hover, #fff4ee);
    color: var(--tabs-ink-strong, #000);
}
.product-tabs a[aria-current="page"] {
    color: var(--tabs-ink-strong, #000);
    border-bottom-color: var(--tabs-accent, var(--kep));
}
.theme-kepware .product-tabs {
    --tabs-bg: #fff;
    --tabs-line: rgba(23, 16, 11, 0.1);
    --tabs-ink: #4b433d;
    --tabs-ink-strong: #0d0805;
    --tabs-hover: var(--kep-soft);
    --tabs-accent: var(--kep);
}
.theme-router .product-tabs {
    --tabs-bg: rgba(7, 24, 18, 0.55);
    --tabs-line: rgba(255, 255, 255, 0.12);
    --tabs-ink: #b8d0c3;
    --tabs-ink-strong: #fff;
    --tabs-hover: rgba(255, 255, 255, 0.07);
    --tabs-accent: var(--rtr-orange);
}

/* ---- product pages: the page body picks up the product's accent -------------- */
.theme-kepware {
    --accent: var(--kep);
    --accent-deep: var(--kep-deep);
    --accent-soft: #ffb899;
}
.theme-router {
    --accent: var(--rtr-leaf);
    --accent-deep: var(--rtr-leaf-text);
    --accent-soft: #bfd8ca;
}
.product-page .reading-nav a.is-active,
.product-page .reading-nav a:hover {
    color: var(--accent-deep);
}
.product-page .reading-nav nav {
    border-left-color: color-mix(in srgb, var(--accent) 35%, #e4e6f0);
}
.product-page .sc-facts {
    border-top: 3px solid var(--accent);
}
.product-page .sc-steps li::before {
    background: var(--accent);
    color: var(--kep-ink);
}
.theme-router.product-page .sc-steps li::before {
    color: #fff;
    background: var(--rtr-leaf-text);
}
.product-page .sc-card:hover,
.product-page .related-card:hover {
    border-color: var(--accent);
}
.product-page .article-body h2 {
    position: relative;
}
.product-page .article-body h2::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    margin-bottom: 14px;
    border-radius: 2px;
    background: var(--accent);
}

/* ---- the brand band under the content --------------------------------------- */
.brand-band {
    margin-top: 56px;
    padding: 44px 0;
    border-top: 4px solid var(--accent, var(--kep));
}
.brand-band--kepware {
    background: var(--kep-warm);
}
.brand-band--router {
    background: var(--rtr-soft);
    border-top-color: var(--rtr-leaf);
}
.brand-band-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 40px;
    align-items: center;
}
.brand-band-logos {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 26px 32px;
    border-radius: 20px;
    background: #fff;
    box-shadow:
        0 18px 40px -26px rgba(23, 16, 11, 0.4),
        0 0 0 1px rgba(23, 16, 11, 0.06);
}
.bb-logo img {
    display: block;
    width: auto;
}
.bb-logo--velotic img {
    height: 38px;
}
.bb-logo--router img {
    height: 50px;
}
.bb-logo--inray img {
    height: 40px;
}
.bb-x {
    font: 400 1.6rem var(--font);
    color: #9aa3ad;
}
.brand-band-copy h2 {
    font-size: clamp(1.35rem, 2.2vw, 1.8rem);
    margin-bottom: 10px;
}
.brand-band-copy p {
    max-width: 62ch;
    color: var(--muted);
}
.brand-band-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 24px;
    margin-top: 22px;
}
.brand-band--router .link-arrow {
    color: var(--rtr-leaf-text);
}
.brand-band--kepware .link-arrow {
    color: var(--kep-deep);
}

/* ==========================================================================
   Products hub: one card per family
   ========================================================================== */
.family-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    padding: 56px 0 24px;
}
.family-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 36px 36px 32px;
    border-radius: 24px;
    overflow: hidden;
    isolation: isolate;
    transition:
        transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
        box-shadow 0.35s;
}
.family-card:hover {
    transform: translateY(-4px);
}
.family-card--kepware {
    background: var(--kep-warm);
    color: var(--kep-ink);
    box-shadow:
        0 0 0 1px rgba(23, 16, 11, 0.08),
        0 24px 50px -34px rgba(120, 38, 0, 0.5);
}
.family-card--kepware::before {
    content: "";
    position: absolute;
    z-index: -1;
    right: -70px;
    top: -90px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: var(--kep);
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.family-card--kepware:hover::before {
    transform: scale(1.12) translate(-8px, 8px);
}
.family-card--router {
    background: linear-gradient(160deg, #1f4a39, var(--rtr-deep));
    color: #fff;
    box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.55);
}
.family-card--router::before {
    content: "";
    position: absolute;
    z-index: -1;
    right: -70px;
    top: -70px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    border: 30px solid rgba(84, 134, 111, 0.35);
    transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.family-card--router:hover::before {
    transform: rotate(40deg) scale(1.08);
}
.family-card--router::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: 64px;
    top: 52px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--rtr-orange);
    box-shadow: 34px -22px 0 -4px rgba(247, 171, 89, 0.8);
}
.family-logo {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 54px;
}
.family-logo img {
    height: 38px;
    width: auto;
}
.family-card--router .family-logo img.fl-router {
    height: 46px;
    padding: 6px 12px;
    border-radius: 12px;
    background: #fff;
}
.family-card--router .family-logo img.fl-inray {
    height: 26px;
}
.family-card h2 {
    font-size: 1.8rem;
    letter-spacing: -0.02em;
}
.family-card--kepware h2 {
    color: #0d0805;
}
.family-card--router h2 {
    color: #fff;
}
.family-card p {
    max-width: 40ch;
}
.family-card--kepware p {
    color: #4b433d;
}
.family-card--router p {
    color: #cfe0d7;
}
.family-subs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin-top: auto;
}
.family-subs a {
    display: inline-block;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    transition:
        background-color 0.2s,
        color 0.2s;
}
.family-card--kepware .family-subs a {
    background: #fff;
    color: var(--kep-ink);
    box-shadow: inset 0 0 0 1px rgba(23, 16, 11, 0.14);
}
.family-card--kepware .family-subs a:hover {
    background: var(--kep);
}
.family-card--router .family-subs a {
    background: rgba(255, 255, 255, 0.09);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.family-card--router .family-subs a:hover {
    background: var(--rtr-orange);
    color: #241503;
}
.family-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 22px;
}

/* ---- responsive ------------------------------------------------------------- */
@media (max-width: 960px) {
    .product-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
        padding-bottom: 40px;
    }
    .brand-plate {
        max-width: 520px;
    }
    /* stacked: the disc sits behind the plate only, never behind the text and buttons above it */
    .theme-kepware .page-hero--product::before {
        right: -150px;
        top: auto;
        bottom: -170px;
        width: 440px;
        height: 440px;
    }
    .brand-band-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
    .family-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (max-width: 560px) {
    .page-hero--product {
        padding-top: 36px;
    }
    .brand-band-logos {
        flex-wrap: wrap;
        gap: 12px;
        padding: 20px;
    }
    .bb-logo--velotic img {
        height: 32px;
    }
    .bb-logo--router img {
        height: 38px;
    }
    .bb-logo--inray img {
        height: 30px;
    }
    .bb-x {
        font-size: 1.3rem;
    }
    .family-card {
        padding: 28px 24px 26px;
    }
    /* narrow cards: the decorations keep to the corner, clear of the logos and the title */
    .family-card--kepware::before {
        right: -80px;
        top: -110px;
        width: 170px;
        height: 170px;
    }
    .family-card--router::after {
        right: 30px;
        top: 26px;
    }
    .bp-chip text {
        font-size: 19px;
    }
}

/* ---- motion preferences ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .bp-flow,
    .bp-chip,
    .bp-pulse,
    .brand-plate {
        animation: none !important;
    }
    .bp-sphere {
        display: none;
    }
    .family-card,
    .family-card::before {
        transition: none !important;
    }
}

/* ---- buttons inside product pages follow the product ----------------------- */
.theme-kepware .article-body .btn-primary,
.theme-kepware .btn-primary {
    background: var(--kep);
    color: var(--kep-ink);
}
.theme-kepware .article-body .btn-primary:hover,
.theme-kepware .btn-primary:hover {
    background: var(--kep-hover);
    color: var(--kep-ink);
}
.theme-router .article-body .btn-primary,
.theme-router .btn-primary {
    background: var(--rtr-leaf-text);
    color: #fff;
}
.theme-router .article-body .btn-primary:hover,
.theme-router .btn-primary:hover {
    background: var(--rtr);
    color: #fff;
}
.theme-kepware .btn-outline {
    border-color: var(--kep-ink);
    color: var(--kep-ink);
}
.theme-kepware .btn-outline:hover {
    background: var(--kep);
    border-color: var(--kep);
    color: var(--kep-ink);
}
.theme-router .btn-outline {
    border-color: var(--rtr-leaf-text);
    color: var(--rtr-leaf-text);
}
.theme-router .btn-outline:hover {
    background: var(--rtr-leaf-text);
    color: #fff;
}

/* ==========================================================================
   Home: the connection diagram in product colours
   field devices ........ ASP blue
   Kepware Server ....... Velotic orange
   OPC Router ........... its green ring, with orange packets
   enterprise systems ... OPC Turkey navy
   ========================================================================== */
.node-flow-section {
    background:
        radial-gradient(700px 320px at 8% 18%, rgba(56, 140, 208, 0.1), transparent 70%),
        radial-gradient(700px 320px at 92% 82%, rgba(255, 77, 0, 0.07), transparent 70%),
        var(--bg-alt);
}
.node-flow .flow-zone {
    stroke-width: 1.2;
}
.node-flow rect.flow-zone:nth-of-type(1) {
    fill: #f2f8fd;
    stroke: #c9e0f3;
}
.node-flow rect.flow-zone:nth-of-type(2) {
    fill: #fffaf6;
    stroke: #ffd9c2;
}
.node-flow rect.flow-zone:nth-of-type(3) {
    fill: #f6f5fb;
    stroke: #dcdaf0;
}
.node-flow .flow-col-label:nth-of-type(1) {
    fill: #2a6fae;
}
.node-flow .flow-col-label:nth-of-type(2) {
    fill: var(--kep-deep);
}
.node-flow .flow-col-label:nth-of-type(3) {
    fill: #29245c;
}
/* the phone diagram draws its labels last (over the paths), so they are coloured by name */
.node-flow--v .flow-col-label {
    paint-order: stroke;
    stroke: var(--bg-alt);
    stroke-width: 7px;
    stroke-linejoin: round;
}
.node-flow--v .flow-col-label--field {
    fill: #2a6fae;
}
.node-flow--v .flow-col-label--hub {
    fill: var(--kep-deep);
}
.node-flow--v .flow-col-label--clients {
    fill: #29245c;
}

/* paths and the packets that travel them */
.flow-path--field {
    stroke: var(--asp-blue);
    stroke-width: 2.2;
}
.flow-path--link {
    stroke: var(--kep);
    stroke-width: 2.4;
}
.flow-path--router {
    stroke: var(--rtr-leaf);
    stroke-width: 2.4;
}
.flow-path-direct {
    stroke: var(--kep);
    stroke-width: 1.8;
}
.flow-packet.pk-field {
    fill: #7cc0f5;
    filter: drop-shadow(0 0 4px rgba(56, 140, 208, 0.8));
}
.flow-packet.pk-link {
    fill: #ffb08a;
    filter: drop-shadow(0 0 5px rgba(255, 77, 0, 0.75));
}
.flow-packet.pk-router {
    fill: var(--rtr-orange);
    filter: drop-shadow(0 0 4px rgba(232, 148, 58, 0.8));
}
.flow-packet-direct {
    fill: #ff8a4d;
    filter: drop-shadow(0 0 4px rgba(255, 77, 0, 0.7));
}

/* nodes and hubs */
.node-flow .flow-node-g .flow-node {
    fill: #fff;
    stroke: var(--asp-blue);
    stroke-width: 2.4;
}
.node-flow .flow-node-g[transform*="translate(860"] .flow-node,
.node-flow .flow-node-g--client .flow-node {
    stroke: #29245c;
}
.flow-hub {
    fill: var(--kep);
}
.node-flow .flow-hub-text:not(.flow-hub-text-router) {
    fill: var(--kep-ink);
    font-weight: 700;
}
.flow-hub-router {
    fill: var(--rtr);
    stroke: var(--rtr-leaf);
    stroke-width: 2.5;
}
.node-flow .flow-hub-text.flow-hub-text-router {
    fill: #fff;
    font-weight: 700;
}
.node-flow .hop rect {
    fill: #fff;
    stroke: #d6d9e6;
}
.node-flow .flow-node-label {
    font-weight: 700;
}

/* flow tabs: the selected scenario takes the brand's orange */
.flow-tab[aria-selected="true"] {
    background: var(--kep);
    border-color: var(--kep);
    color: var(--kep-ink);
}
.flow-tab:hover {
    border-color: var(--kep);
}

/* caption card: orange to green, like the path of the data */
.flow-caption {
    border-left-width: 5px;
    border-image: linear-gradient(180deg, var(--kep) 0%, var(--rtr-leaf) 100%) 1;
}
.flow-caption-links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.flow-caption-links a[href$="kepware-server"] {
    color: var(--kep-deep);
}
.flow-caption-links a[href$="opc-router"] {
    color: var(--rtr-leaf-text);
}
.flow-caption-links a[href$="kepware-server"]::before,
.flow-caption-links a[href$="opc-router"]::before {
    content: "";
    width: 20px;
    height: 19px;
    background: center / contain no-repeat;
}
.flow-caption-links a[href$="kepware-server"]::before {
    background-image: url("../img/brand/velotic-mark-orange.svg");
}
.flow-caption-links a[href$="opc-router"]::before {
    background-image: url("../img/brand/opc-router-mark.svg?v=connubes-20261012");
}

/* legend */
.lg-blue {
    border-color: var(--asp-blue);
}
.lg-cyan {
    border-color: var(--rtr-leaf);
}
.lg-amber {
    border-color: var(--kep);
}
.lg-line {
    border-top-width: 3px;
}

/* ==========================================================================
   Solutions: one accent per sector, an animated architecture beside each
   ========================================================================== */
.page-hero--solutions {
    position: relative;
    overflow: hidden;
    padding: 84px 0 150px;
    background:
        radial-gradient(760px 340px at 90% -10%, rgba(255, 77, 0, 0.28), transparent 65%),
        radial-gradient(640px 320px at 0% 110%, rgba(56, 140, 208, 0.3), transparent 65%),
        linear-gradient(180deg, #14123a 0%, #0d0c22 100%);
    color: #fff;
    border-bottom: 0;
}
.page-hero--solutions .container {
    position: relative;
    z-index: 1;
}
.page-hero--solutions .page-kicker {
    color: var(--rtr-orange);
}
.page-hero--solutions h1 {
    color: #fff;
    max-width: 20ch;
}
.page-hero--solutions .page-lead {
    color: #c9c7e2;
}
.page-hero--solutions .page-actions {
    align-items: center;
    gap: 22px 32px;
}
.sx-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
}
.sx-jump a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: 0.86rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.05);
    transition:
        background-color 0.2s,
        border-color 0.2s;
}
.sx-jump a span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--sx);
}
.sx-jump a:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: var(--sx);
    color: #fff;
}
.sx-hero-lines {
    position: absolute;
    inset: auto 0 0 0;
    width: 100%;
    height: 120px; /* the streams live in the band under the content, never behind text */
    opacity: 0.85;
}
.sx-hero-lines path {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 2 12;
    animation: sx-stream 7s linear infinite;
}
.sx-hero-lines .l1 {
    stroke: #388cd0;
}
.sx-hero-lines .l2 {
    stroke: #ff6a2b;
    animation-duration: 9s;
}
.sx-hero-lines .l3 {
    stroke: #54866f;
    animation-duration: 11s;
}
@keyframes sx-stream {
    to {
        stroke-dashoffset: -280;
    }
}

.sx-list {
    padding-top: 24px;
}
.sx {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: 64px;
    align-items: center;
    padding: 64px 0;
    border-bottom: 1px solid var(--line);
}
.sx:last-child {
    border-bottom: 0;
}
.sx:nth-child(even) .sx-flow {
    order: -1;
}
.sx-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}
.sx-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--sx);
    color: #fff;
    box-shadow: 0 14px 26px -16px var(--sx);
}
.sx[style*="#ff4d00"] .sx-icon {
    color: var(--kep-ink);
}
.sx-no {
    font: 500 1.9rem var(--mono);
    color: var(--sx-ink);
    letter-spacing: -0.04em;
}
.sx-head .sec-kicker {
    margin: 0;
    color: var(--sx-ink);
}
.sx h2 {
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 18px;
}
.sx-text {
    max-width: 62ch;
    color: var(--muted);
}
.sx-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 22px 0 6px;
    list-style: none;
}
.sx-tags li {
    padding: 6px 13px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--sx-ink);
    background: color-mix(in srgb, var(--sx) 12%, #fff);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sx) 35%, #fff);
}
.sx .link-arrow {
    color: var(--sx-ink);
}

/* the architecture: four nodes joined by connectors that carry a moving dot */
.sx-flow {
    padding: 26px 26px 22px;
    border-radius: 24px;
    background: color-mix(in srgb, var(--sx) 8%, #fff);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sx) 30%, #fff);
}
.sx-flow ol {
    list-style: none;
    display: grid;
    gap: 0;
}
.sx-flow .n {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    border-radius: 16px;
    background: #fff;
    box-shadow:
        0 10px 22px -16px rgba(23, 19, 58, 0.35),
        0 0 0 1px rgba(23, 19, 58, 0.07);
}
.sx-flow .n + .n {
    margin-top: 30px;
}
.sx-flow .n + .n::before {
    content: "";
    position: absolute;
    left: 38px;
    top: -30px;
    width: 0;
    height: 30px;
    border-left: 2.5px dashed var(--c, #9aa3ad);
}
.sx-flow .n + .n::after {
    content: "";
    position: absolute;
    left: 34px;
    top: -30px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--c, #9aa3ad);
    box-shadow: 0 0 10px var(--c, #9aa3ad);
    animation: sx-drop 1.9s ease-in infinite;
    animation-delay: calc(var(--k, 0) * 0.45s);
}
.sx-flow .n-kep {
    --c: var(--asp-blue);
    --k: 0;
}
.sx-flow .n-rtr {
    --c: var(--kep);
    --k: 1;
}
.sx-flow .n-ent {
    --c: var(--rtr-leaf);
    --k: 2;
}
@keyframes sx-drop {
    0% {
        transform: translateY(0);
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    85% {
        opacity: 1;
    }
    100% {
        transform: translateY(26px);
        opacity: 0;
    }
}
.sx-flow .n-ic {
    display: grid;
    place-items: center;
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 14px;
}
.sx-flow .n-ic img {
    width: auto;
    height: 22px;
}
.sx-flow .n-field .n-ic {
    background: #e3f0fb;
    color: #2a6fae;
}
.sx-flow .n-kep .n-ic {
    background: var(--kep);
}
.sx-flow .n-kep b {
    color: var(--kep-deep);
}
.sx-flow .n-rtr .n-ic {
    background: var(--rtr);
}
.sx-flow .n-rtr .n-ic img {
    filter: none;
}
.sx-flow .n-rtr b {
    color: var(--rtr-leaf-text);
}
.sx-flow .n-ent .n-ic {
    background: #ebe9f7;
    color: #29245c;
}
.sx-flow .n-t {
    display: grid;
    line-height: 1.25;
}
.sx-flow .n-t b {
    font-size: 1rem;
}
.sx-flow .n-t small {
    color: var(--muted);
    font-size: 0.8rem;
}

/* project approach: numbered steps that draw their connecting line when they scroll into view */
.sx-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
    list-style: none;
    margin-top: 40px;
}
.sx-steps::before {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    top: 24px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--asp-blue), var(--kep), var(--rtr-leaf));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.3s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s;
}
.sx-steps.in-view::before {
    transform: scaleX(1);
}
html:not(.js) .sx-steps::before {
    transform: none;
}
.sx-steps li {
    position: relative;
}
.st-no {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    margin-bottom: 18px;
    border-radius: 50%;
    font: 700 1.1rem var(--font);
    color: #fff;
    background: var(--asp-blue);
    box-shadow: 0 0 0 6px var(--bg-alt);
}
.sx-steps li:nth-child(2) .st-no {
    background: var(--kep);
    color: var(--kep-ink);
}
.sx-steps li:nth-child(3) .st-no {
    background: var(--rtr-leaf-text);
}
.sx-steps li:nth-child(4) .st-no {
    background: #29245c;
}
.sx-steps h3 {
    font-size: 1.05rem;
    margin-bottom: 8px;
}
.sx-steps p {
    font-size: 0.9rem;
    color: var(--muted);
}

.resource-strip--brand {
    background:
        radial-gradient(520px 200px at 100% 0%, rgba(255, 77, 0, 0.22), transparent 70%),
        #14123a;
    color: #fff;
}
.resource-strip--brand h2 {
    color: #fff;
}
.resource-strip--brand p {
    color: #c9c7e2;
}

@media (max-width: 900px) {
    .sx {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
        padding: 44px 0;
    }
    .sx:nth-child(even) .sx-flow {
        order: 0;
    }
    .sx-steps {
        grid-template-columns: minmax(0, 1fr);
    }
    .sx-steps::before {
        left: 24px;
        right: auto;
        top: 24px;
        bottom: 24px;
        width: 3px;
        height: auto;
        transform: scaleY(0);
        transform-origin: top;
    }
    .sx-steps.in-view::before {
        transform: scaleY(1);
    }
    .sx-steps li {
        padding-left: 70px;
    }
    .st-no {
        position: absolute;
        left: 0;
        top: 0;
    }
}
@media (prefers-reduced-motion: reduce) {
    .sx-hero-lines path,
    .sx-flow .n + .n::after {
        animation: none !important;
    }
    .sx-steps::before {
        transform: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   Brand hero: dark navy with the three product colours streaming underneath
   (used by the library, corporate and support pages)
   ========================================================================== */
.page-hero--brand {
    position: relative;
    overflow: hidden;
    padding: 76px 0 140px;
    background:
        radial-gradient(760px 340px at 90% -10%, rgba(255, 77, 0, 0.26), transparent 65%),
        radial-gradient(640px 320px at 0% 110%, rgba(56, 140, 208, 0.28), transparent 65%),
        linear-gradient(180deg, #14123a 0%, #0d0c22 100%);
    color: #fff;
    border-bottom: 0;
}
.page-hero--brand .container {
    position: relative;
    z-index: 1;
}
.page-hero--brand .page-kicker,
.page-hero--brand .page-kicker a {
    color: var(--rtr-orange);
}
.page-hero--brand h1 {
    color: #fff;
    max-width: 20ch;
}
.page-hero--brand .page-lead {
    color: #c9c7e2;
}
.page-hero--brand .breadcrumbs,
.page-hero--brand .breadcrumbs a {
    color: #a9a7c9;
}
.page-hero--brand .breadcrumbs li[aria-current] span {
    color: #fff;
}
.brand-streams {
    position: absolute;
    inset: auto 0 0 0;
    width: 100%;
    height: 120px;
    opacity: 0.85;
}
.brand-streams path {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 2 12;
    animation: sx-stream 7s linear infinite;
}
.brand-streams .l1 {
    stroke: #388cd0;
}
.brand-streams .l2 {
    stroke: #ff6a2b;
    animation-duration: 9s;
}
.brand-streams .l3 {
    stroke: #54866f;
    animation-duration: 11s;
}
@media (prefers-reduced-motion: reduce) {
    .brand-streams path {
        animation: none !important;
    }
}

/* ==========================================================================
   Library: documents as cards, coloured by what they are about
   ========================================================================== */
.downloads-page .page-body {
    padding-top: 40px;
    padding-bottom: 80px;
}
.dl-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: -8px 0 30px;
}
.dl-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    background: #fff;
    color: var(--text);
    font: 600 0.88rem var(--font);
    cursor: pointer;
    transition:
        background-color 0.2s,
        border-color 0.2s,
        color 0.2s,
        transform 0.2s;
}
.dl-chip:hover {
    transform: translateY(-1px);
    border-color: var(--chip, var(--primary));
}
.dl-chip i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--chip, var(--primary));
}
.dl-chip span {
    font: 500 0.78rem var(--mono);
    color: var(--muted);
}
.dl-chip[aria-pressed="true"] {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.dl-chip[aria-pressed="true"] span {
    color: #c9c7e2;
}
.dl-chip--kepware {
    --chip: var(--kep);
}
.dl-chip--router {
    --chip: var(--rtr-leaf);
}
.dl-chip--opcua {
    --chip: #0ea5e9;
}
.dl-chip--guide {
    --chip: var(--asp-blue);
}
.dl-chip--kepware[aria-pressed="true"] {
    background: var(--kep);
    border-color: var(--kep);
    color: var(--kep-ink);
}
.dl-chip--kepware[aria-pressed="true"] span {
    color: rgba(23, 16, 11, 0.7);
}
.dl-chip--router[aria-pressed="true"] {
    background: var(--rtr);
    border-color: var(--rtr);
}
.dl-chip--opcua[aria-pressed="true"] {
    background: #0b78a8;
    border-color: #0b78a8;
}
.dl-chip--guide[aria-pressed="true"] {
    background: var(--asp-blue-deep);
    border-color: var(--asp-blue-deep);
}
.dl-chip[aria-pressed="true"] i {
    background: #fff;
}

.dl-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
}
.dl-card {
    --dl: var(--asp-blue);
    --dl-ink: #fff;
    --dl-btn: var(--asp-blue-deep);
    display: grid;
    grid-template-rows: auto 1fr auto;
    border-radius: 22px;
    overflow: hidden;
    background: #fff;
    box-shadow:
        0 0 0 1px rgba(23, 19, 58, 0.08),
        0 18px 40px -30px rgba(23, 19, 58, 0.45);
    transition:
        transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
        box-shadow 0.35s;
}
.dl-card[hidden] {
    display: none;
}
.dl-card:hover {
    transform: translateY(-5px);
    box-shadow:
        0 0 0 1px rgba(23, 19, 58, 0.1),
        0 28px 50px -28px rgba(23, 19, 58, 0.5);
}
.dl-card--kepware {
    --dl: var(--kep);
    --dl-ink: var(--kep-ink);
}
.dl-card--router {
    --dl: var(--rtr);
    --dl-ink: #fff;
}
.dl-card--opcua {
    --dl: #0b78a8;
    --dl-ink: #fff;
}
.dl-card--guide {
    --dl: #29245c;
    --dl-ink: #fff;
}
.dl-cover {
    position: relative;
    height: 118px;
    overflow: hidden;
    background: var(--dl);
    color: var(--dl-ink);
}
.dl-card--opcua .dl-cover {
    background: linear-gradient(120deg, #0b78a8 0%, #0ea5e9 100%);
}
.dl-card--guide .dl-cover {
    background:
        radial-gradient(220px 120px at 90% 100%, rgba(56, 140, 208, 0.65), transparent 70%),
        #29245c;
}
.dl-card--router .dl-cover {
    background:
        radial-gradient(200px 110px at 92% 0%, rgba(247, 171, 89, 0.4), transparent 70%),
        var(--rtr);
}
.dl-badge {
    position: absolute;
    left: 22px;
    top: 20px;
    padding: 4px 11px;
    border-radius: 999px;
    font: 700 0.72rem var(--mono);
    letter-spacing: 0.1em;
    background: rgba(255, 255, 255, 0.92);
    color: #17133a;
}
.dl-art {
    position: absolute;
    left: 22px;
    bottom: 18px;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.16);
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.dl-card--kepware .dl-art {
    background: rgba(255, 255, 255, 0.85);
}
.dl-art img {
    width: auto;
    height: 27px;
}
.dl-card:hover .dl-art {
    transform: translateY(-4px) rotate(-6deg);
}
/* a sheet of paper peeking out from the cover */
.dl-page {
    position: absolute;
    right: 28px;
    bottom: -26px;
    width: 92px;
    height: 112px;
    border-radius: 9px;
    background:
        linear-gradient(#d3d6e4, #d3d6e4) 14px 22px / 52px 4px no-repeat,
        linear-gradient(#d3d6e4, #d3d6e4) 14px 36px / 64px 4px no-repeat,
        linear-gradient(#d3d6e4, #d3d6e4) 14px 50px / 44px 4px no-repeat,
        linear-gradient(var(--dl), var(--dl)) 14px 68px / 28px 18px no-repeat,
        #fff;
    box-shadow: 0 14px 24px -14px rgba(0, 0, 0, 0.55);
    transform: rotate(7deg);
    transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.dl-card--kepware .dl-page {
    background:
        linear-gradient(#e6dfd9, #e6dfd9) 14px 22px / 52px 4px no-repeat,
        linear-gradient(#e6dfd9, #e6dfd9) 14px 36px / 64px 4px no-repeat,
        linear-gradient(#e6dfd9, #e6dfd9) 14px 50px / 44px 4px no-repeat,
        linear-gradient(var(--kep), var(--kep)) 14px 68px / 28px 18px no-repeat,
        #fff;
}
.dl-card:hover .dl-page {
    transform: rotate(0deg) translateY(-12px);
}
.dl-body {
    padding: 22px 26px 8px;
}
.dl-cat {
    margin-bottom: 8px;
    font: 700 0.76rem var(--font);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dl);
}
.dl-card--kepware .dl-cat {
    color: var(--kep-deep);
}
.dl-card--router .dl-cat {
    color: var(--rtr-leaf-text);
}
.dl-card--opcua .dl-cat {
    color: #0b78a8;
}
.dl-body h2 {
    font-size: 1.22rem;
    line-height: 1.28;
    letter-spacing: -0.012em;
    margin-bottom: 10px;
}
.dl-desc {
    font-size: 0.92rem;
    color: var(--muted);
}
.dl-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    list-style: none;
}
.dl-meta li {
    padding: 4px 11px;
    border-radius: 999px;
    font: 500 0.76rem var(--mono);
    color: #4f5662;
    background: #f1f2f7;
}
.dl-meta .is-direct {
    background: #e6f4ec;
    color: #176b3d;
}
.dl-meta .is-gated {
    background: #fff3e0;
    color: #8a5300;
}
.dl-btn {
    margin: 18px 26px 26px;
    justify-self: start;
    background: var(--dl-btn);
    color: #fff;
    box-shadow: none;
}
.dl-card--kepware .dl-btn {
    background: var(--kep);
    color: var(--kep-ink);
}
.dl-card--router .dl-btn {
    background: var(--rtr-orange);
    color: #241503;
}
.dl-card--opcua .dl-btn {
    background: #0b78a8;
}
.dl-card--guide .dl-btn {
    background: #29245c;
}
.dl-btn:hover {
    filter: brightness(1.08);
    color: inherit;
}
.dl-card--opcua .dl-btn:hover,
.dl-card--guide .dl-btn:hover {
    color: #fff;
}
.dl-card.reveal {
    transition-delay: calc(var(--i, 0) * 70ms);
}
@media (max-width: 760px) {
    .dl-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .page-hero--brand {
        padding: 52px 0 120px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .dl-card,
    .dl-art,
    .dl-page {
        transition: none !important;
    }
}
.page-body .dl-meta {
    padding: 0;
    margin-left: 0;
}
.page-body .dl-body h2 {
    margin: 0 0 10px;
}

/* OPC Turkey palette for the content blocks: ASP blue, Velotic orange, the router's green, the OPC navy */
:root {
    --vx-1: var(--asp-blue);
    --vx-1-ink: #2a6fae;
    --vx-2: var(--kep);
    --vx-2-ink: var(--kep-deep);
    --vx-2-on: var(--kep-ink);
    --vx-3: var(--rtr-leaf);
    --vx-3-ink: var(--rtr-leaf-text);
    --vx-4: #29245c;
    --vx-4-ink: #29245c;
}
.theme-kepware {
    --vx-1: var(--kep);
    --vx-1-ink: var(--kep-deep);
    --vx-2: #17100b;
    --vx-2-ink: #17100b;
    --vx-2-on: #fff;
    --vx-3: var(--kep);
    --vx-3-ink: var(--kep-deep);
    --vx-4: #17100b;
    --vx-4-ink: #17100b;
}
.theme-router {
    --vx-1: var(--rtr-leaf);
    --vx-1-ink: var(--rtr-leaf-text);
    --vx-2: var(--rtr-orange-deep);
    --vx-2-ink: #8f520f;
    --vx-2-on: #241503;
    --vx-3: var(--rtr);
    --vx-3-ink: var(--rtr);
    --vx-4: var(--rtr-leaf);
    --vx-4-ink: var(--rtr-leaf-text);
}
.product-page .sc-facts {
    border-top: 0;
}

/* ==========================================================================
   Content blocks (shared between the two sites; each defines its own --vx-* palette)
   facts → tinted tiles · steps → numbered line · cards → lift · timeline · partners · values
   ========================================================================== */
.page-body .sc-facts,
.article-body .sc-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    margin: 1.8em 0 2.4em;
    border: 0;
}
.page-body .sc-facts > div,
.article-body .sc-facts > div {
    --t: var(--vx-1);
    --ti: var(--vx-1-ink);
    padding: 18px 20px 20px;
    border: 0;
    border-radius: 16px;
    background: color-mix(in srgb, var(--t) 10%, #fff);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t) 26%, #fff);
}
.sc-facts > div:nth-child(4n + 2) {
    --t: var(--vx-2);
    --ti: var(--vx-2-ink);
}
.sc-facts > div:nth-child(4n + 3) {
    --t: var(--vx-3);
    --ti: var(--vx-3-ink);
}
.sc-facts > div:nth-child(4n + 4) {
    --t: var(--vx-4);
    --ti: var(--vx-4-ink);
}
.sc-facts dt {
    color: var(--ti);
}
.sc-facts dd {
    color: var(--text);
}

/* steps: a coloured number on a line that draws itself */
.page-body .sc-steps li,
.article-body .sc-steps li {
    --t: var(--vx-1);
    padding: 2px 0 30px 74px;
}
.sc-steps li:nth-child(4n + 2) {
    --t: var(--vx-2);
}
.sc-steps li:nth-child(4n + 3) {
    --t: var(--vx-3);
}
.sc-steps li:nth-child(4n + 4) {
    --t: var(--vx-4);
}
.sc-steps li::before {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--t);
    color: #fff;
    font: 700 1.1rem var(--font);
    content: counter(step);
}
.sc-steps li:nth-child(4n + 2)::before {
    color: var(--vx-2-on, #fff);
}
.sc-steps li:not(:last-child)::after {
    left: 23px;
    top: 52px;
    bottom: 4px;
    width: 2px;
    background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--t) 55%, #fff) 0 6px, transparent 6px 12px);
}
.sc-steps li strong {
    color: var(--text);
}

/* link cards */
.sc-card {
    transition:
        transform 0.25s,
        box-shadow 0.25s,
        border-color 0.25s;
}
.sc-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 30px -22px rgba(23, 19, 58, 0.5);
}
.sc-card b {
    transition: transform 0.25s;
}
.sc-card:hover b {
    transform: translateX(4px);
}

/* timeline: year on the left, a dot on the line, the milestone on the right */
.sc-timeline {
    list-style: none;
    margin: 2.2em 0 2.6em;
    padding: 0;
}
.page-body .sc-timeline,
.article-body .sc-timeline {
    padding-left: 0;
    margin-left: 0;
}
.sc-timeline li {
    --t: var(--vx-1);
    --ti: var(--vx-1-ink);
    position: relative;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    column-gap: 40px;
    padding: 0 0 36px;
    margin: 0;
}
.sc-timeline li:nth-child(4n + 2) {
    --t: var(--vx-2);
    --ti: var(--vx-2-ink);
}
.sc-timeline li:nth-child(4n + 3) {
    --t: var(--vx-3);
    --ti: var(--vx-3-ink);
}
.sc-timeline li:nth-child(4n + 4) {
    --t: var(--vx-4);
    --ti: var(--vx-4-ink);
}
.sc-timeline time {
    grid-row: 1 / span 2;
    padding-top: 1px;
    text-align: right;
    font: 600 1.45rem/1.2 var(--mono);
    letter-spacing: -0.04em;
    color: var(--ti);
}
.sc-timeline li::before {
    content: "";
    position: absolute;
    left: 96px;
    top: 7px;
    width: 14px;
    height: 14px;
    margin-left: 13px;
    border-radius: 50%;
    background: var(--t);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--t) 22%, #fff);
}
.sc-timeline li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 96px;
    top: 30px;
    bottom: 4px;
    width: 2px;
    margin-left: 19px;
    background: var(--line-strong);
}
.sc-timeline strong {
    display: block;
    font-size: 1.18rem;
    line-height: 1.3;
    color: var(--text);
    grid-column: 2;
    padding-left: 22px;
}
.sc-timeline span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    grid-column: 2;
    padding-left: 22px;
}

/* partner and product brand tiles */
.sc-partners {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
    gap: 14px;
    margin: 1.6em 0 2.4em;
    padding: 0;
}
.page-body .sc-partners,
.article-body .sc-partners {
    padding-left: 0;
    margin-left: 0;
}
.sc-partner {
    display: flex;
    flex-direction: column;
    gap: 18px;
    height: 100%;
    padding: 22px 20px 20px;
    border-radius: 20px;
    background: #fff;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.45;
    box-shadow: inset 0 0 0 1px var(--line);
    transition:
        transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
        box-shadow 0.3s;
}
.sc-partner img {
    align-self: flex-start;
    width: auto;
    height: 34px;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
}
.sc-partner:hover {
    transform: translateY(-4px);
    color: var(--text);
    box-shadow:
        inset 0 0 0 1px var(--line-strong),
        0 22px 36px -26px rgba(23, 19, 58, 0.5);
}
.sc-partner--kepware {
    background: #f7f6f5;
}
.sc-partner--kepware:hover {
    box-shadow:
        inset 0 0 0 2px #ff4d00,
        0 22px 36px -26px rgba(255, 77, 0, 0.55);
}
.sc-partner--router {
    background: #eaf1ed;
}
.sc-partner--router:hover {
    box-shadow:
        inset 0 0 0 2px #54866f,
        0 22px 36px -26px rgba(84, 134, 111, 0.6);
}
.sc-partner--inray {
    background: #eef3f8;
}
.sc-partner--inray:hover {
    box-shadow:
        inset 0 0 0 2px #fd6220,
        0 22px 36px -26px rgba(253, 98, 32, 0.5);
}
.sc-partner--asp {
    background: #eaf3fb;
}
.sc-partner--asp:hover {
    box-shadow:
        inset 0 0 0 2px #388cd0,
        0 22px 36px -26px rgba(56, 140, 208, 0.55);
}

/* value cards: an icon, a title, one sentence */
.sc-values {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin: 1.6em 0 2.4em;
    padding: 0;
}
.page-body .sc-values,
.article-body .sc-values {
    padding-left: 0;
    margin-left: 0;
}
.sc-values li {
    --t: var(--vx-1);
    --ti: var(--vx-1-ink);
    display: grid;
    gap: 6px;
    align-content: start;
    margin: 0;
    padding: 22px 22px 24px;
    border-radius: 20px;
    background: color-mix(in srgb, var(--t) 8%, #fff);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t) 24%, #fff);
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.sc-values li:hover {
    transform: translateY(-4px);
}
.sc-values li:nth-child(4n + 2) {
    --t: var(--vx-2);
    --ti: var(--vx-2-ink);
}
.sc-values li:nth-child(4n + 3) {
    --t: var(--vx-3);
    --ti: var(--vx-3-ink);
}
.sc-values li:nth-child(4n + 4) {
    --t: var(--vx-4);
    --ti: var(--vx-4-ink);
}
.sc-value-icon {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    margin-bottom: 8px;
    border-radius: 15px;
    background: var(--t);
    color: #fff;
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.sc-values li:nth-child(4n + 2) .sc-value-icon {
    color: var(--vx-2-on, #fff);
}
.sc-values li:hover .sc-value-icon {
    transform: rotate(-8deg) scale(1.06);
}
.sc-values strong {
    font-size: 1.08rem;
    color: var(--text);
}
.sc-values li > span:not(.sc-value-icon) {
    font-size: 0.92rem;
    color: var(--muted);
    line-height: 1.55;
}

/* scroll reveal for the blocks (visual.js adds .rv and numbers the children) */
.js .rv {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity 0.6s ease,
        transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.js .rv.in {
    opacity: 1;
    transform: none;
}
.js .rv > li,
.js .rv > div,
.js .rv > a {
    transition-delay: calc(var(--n, 0) * 70ms);
}
@media (max-width: 640px) {
    .sc-timeline li {
        grid-template-columns: 1fr;
        padding-left: 34px;
    }
    .sc-timeline time {
        grid-row: auto;
        text-align: left;
        margin-bottom: 4px;
    }
    .sc-timeline li::before {
        left: 0;
        margin-left: 0;
    }
    .sc-timeline li:not(:last-child)::after {
        left: 0;
        margin-left: 6px;
    }
    .sc-timeline strong,
    .sc-timeline span {
        grid-column: 1; /* column 2 would add an implicit column next to the year */
        padding-left: 0;
    }
}
@media (prefers-reduced-motion: reduce) {
    .js .rv {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .sc-card,
    .sc-card b,
    .sc-partner,
    .sc-values li,
    .sc-value-icon {
        transition: none !important;
    }
}

/* plain lists on corporate and policy pages (job posting, internship, policies): a tinted card with check marks */
.prose-page .article-body > ul:not([class]) {
    list-style: none;
    margin: 12px 0 30px;
    padding: 8px 24px 8px 24px;
    border-radius: 18px;
    background: color-mix(in srgb, var(--vx-1) 7%, #fff);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vx-1) 22%, #fff);
}
.prose-page .article-body > ul:not([class]) > li {
    position: relative;
    max-width: none;
    margin: 0;
    padding: 12px 0 12px 38px;
    border-bottom: 1px solid color-mix(in srgb, var(--vx-1) 16%, #fff);
}
.prose-page .article-body > ul:not([class]) > li:last-child {
    border-bottom: 0;
}
.prose-page .article-body > ul:not([class]) > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 15px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--vx-1) 20%, #fff);
}
.prose-page .article-body > ul:not([class]) > li::after {
    content: "";
    position: absolute;
    left: 0;
    top: 15px;
    width: 24px;
    height: 24px;
    background: var(--vx-1-ink);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9'/%3E%3C/svg%3E") center / 24px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9'/%3E%3C/svg%3E") center / 24px no-repeat;
}
.prose-page .article-body > h3 {
    display: inline-block;
    margin-top: 1.6em;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--vx-1-ink);
    background: color-mix(in srgb, var(--vx-1) 14%, #fff);
}
.prose-page .article-body > h2 {
    margin-top: 1.4em;
}

/* blog: category chips carry the colour of what they are about */
.chips-row .chip-link {
    position: relative;
}
.chips-row .chip-link::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--chip, #9aa3ad);
}
.chip-link--kepware { --chip: var(--kep); }
.chip-link--opc-router { --chip: var(--rtr-leaf); }
.chip-link--opc-teknolojileri { --chip: #0ea5e9; }
.chip-link--endustri-4-0 { --chip: var(--asp-blue); }
.chip-link--uygulama-rehberleri { --chip: #6d63c9; }
.chip-link--haberler { --chip: #e8943a; }
.chip-link--etkinlikler { --chip: #c4478f; }
.chips-row .chip-link[aria-current="page"]::before {
    background: #fff;
}