/* Cattech: shared navigation, single-page sections and responsive motion scenes. */
:root {
    --ink:#192c26;
    --green:#21744e;
    --muted:#66716b;
    --line:#e1e7e2;
    --pale:#f5f7f5;
    --font:"Segoe UI",Arial,sans-serif;
    --header-height:76px;
}

* {
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;
    scroll-padding-top:calc(var(--header-height) + 10px);
}

body {
    margin:0;
    background:#fff;
    color:var(--ink);
    font-family:var(--font);
    -webkit-font-smoothing:antialiased;
}

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

button, summary {
    font:inherit;
}

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

button {
    cursor:pointer;
}

button:focus-visible, a:focus-visible, summary:focus-visible {
    outline:3px solid #319e6b;
    outline-offset:6px;
}

button {
    color:inherit;
}

img {
    max-width:100%;
}

[hidden] {
    display:none!important;
}

.shell {
    width:calc(100% - 112px);
    max-width:1320px;
    margin-inline:auto;
}

.skip {
    position:fixed;
    z-index:100;
    left:20px;
    top:-70px;
    padding:15px;
    background:white;
}

.skip:focus {
    top:10px;
}

.header {
    height:var(--header-height);
    background:#ffffffed;
    position:sticky;
    top:0;
    z-index:20;
    border-bottom:1px solid #e8ece7;
    backdrop-filter:blur(18px);
}

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

.brand {
    display:inline-flex;
    align-items:center;
    gap:9px;
    font-size:36px;
    letter-spacing:-1.8px;
    font-weight:650;
    line-height:1;
}

.brand img {
    flex-shrink:0;
}

.brand > span {
    /* Align the visible letterforms with the mark, rather than the font's line box. */
    transform:translateY(-.08em);
}

.header .brand > span {
    transform:translateY(-.12em);
}

.header-brand {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    flex-shrink:0;
    gap:0;
}

.brand-tagline {
    margin:-3px 0 0 0;
    font-size:10px;
    line-height:1.3;
    color:var(--muted);
    white-space:nowrap;
}

.nav {
    display:flex;
    gap:32px;
    margin-left:auto;
    font-size:14px;
    font-weight:500;
}

.nav a {
    padding:12px 0;
    position:relative;
}

.nav a:after {
    content:"";
    position:absolute;
    left:0;
    bottom:4px;
    height:2px;
    width:0;
    background:var(--green);
    transition:width .2s;
}

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

.menu-toggle {
    display:none;
}

.eyebrow {
    font-size:11px;
    letter-spacing:1.6px;
    font-weight:650;
    display:flex;
    align-items:center;
    gap:10px;
    margin:0 0 25px;
}

.dot {
    width:6px;
    height:6px;
    border-radius:100%;
    background:var(--green);
    display:inline-block;
    flex-shrink:0;
}

h1 {
    font-size:clamp(50px,5.25vw,78px);
    font-weight:500;
    letter-spacing:-4.1px;
    line-height:1.08;
    margin:4px 0 25px;
}

h1>span {
    color:var(--green);
}

/* Home introduction and shared calls to action. */
.hero {
    display:grid;
    grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
    align-items:center;
    gap:56px 80px;
    padding-block:80px 48px;
}

.hero-label {
    margin:0 0 24px;
    color:var(--green);
    font-size:15px;
    font-weight:500;
}

.hero h1 {
    margin:0;
    font-size:clamp(48px,5.2vw,76px);
    font-weight:500;
    letter-spacing:-3.6px;
    line-height:1.1;
}

.hero-intro {
    max-width:425px;
    padding-top:35px;
}

.hero-description {
    margin:0 0 17px;
    font-size:21px;
    line-height:1.5;
    letter-spacing:-.35px;
}

.hero-detail {
    margin:0;
    color:var(--muted);
    font-size:14px;
    line-height:1.8;
}

.hero-actions {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:20px;
    margin-top:27px;
}

.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:13px 22px;
    border-radius:3px;
    font-size:14px;
    font-weight:500;
    line-height:1.5;
    transition:background .2s;
}

.button-dark {
    background:var(--green);
    color:white;
}

.button-dark:hover {
    background:#185b3c;
}

.button-light {
    background:#f2f8f4;
    color:#203c2d;
}

.button-light:hover {
    background:#d1edda;
}

.text-link {
    display:inline-block;
    padding-block:8px;
    font-size:13px;
    font-weight:500;
    text-decoration:underline;
    text-decoration-color:#aabbb0;
    text-underline-offset:5px;
}

.text-link:hover {
    color:var(--green);
    text-decoration-color:currentColor;
}

.contact {
    background:#edf3ee;
    border-top:1px solid var(--line);
}

.contact-content {
    display:grid;
    grid-template-columns:1.3fr 1fr;
    align-items:center;
    gap:80px;
    padding-block:76px;
}

.contact .eyebrow {
    color:var(--green);
    margin-bottom:22px;
}

.contact h2 {
    font-size:clamp(34px,3.8vw,52px);
    letter-spacing:-1.9px;
    line-height:1.16;
}

.contact-details {
    max-width:390px;
}

.contact-details p {
    margin:0 0 25px;
    font-size:15px;
    line-height:1.8;
    color:#52685b;
}

.contact-email {
    display:inline-block;
    margin-left:22px;
    padding-block:10px;
    color:#365c43;
    font-size:14px;
    text-underline-offset:4px;
}

.contact-email:hover {
    text-decoration:underline;
}

.contact-address {
    margin:24px 0 0;
    font-style:normal;
    font-size:14px;
    line-height:1.8;
    color:#52685b;
}

@media(max-width:900px) {
    .hero {
        gap:40px;
        padding-block:55px 35px;
    }

    .hero h1 {
        font-size:clamp(40px,5.5vw,50px);
        letter-spacing:-2.2px;
    }

    .hero-intro {
        padding-top:0;
    }

    .hero-description {
        font-size:18px;
    }

    .hero-actions {
        gap:10px 18px;
        margin-top:20px;
    }

    .contact-content {
        gap:40px;
        padding-block:60px;
    }

    .contact-email {
        display:block;
        margin:12px 0 0;
    }
}

@media(max-width:680px) {
    .hero {
        grid-template-columns:1fr;
        gap:28px;
        padding-block:40px 30px;
    }

    .hero-label {
        font-size:13px;
        margin-bottom:20px;
    }

    .hero h1 {
        font-size:clamp(38px,9.8vw,62px);
        letter-spacing:-2px;
    }

    .hero-intro {
        max-width:440px;
    }

    .hero-description {
        font-size:19px;
        margin-bottom:12px;
    }

    .hero-detail {
        font-size:13px;
    }

    .hero-actions {
        gap:14px 20px;
        margin-top:23px;
    }

    .button {
        font-size:13px;
        padding-inline:19px;
    }

    .contact-content {
        grid-template-columns:1fr;
        gap:25px;
        padding-block:48px;
    }

    .contact h2 {
        font-size:clamp(32px,8.8vw,46px);
        letter-spacing:-1.3px;
    }

    .contact-details p {
        font-size:14px;
        margin-bottom:20px;
    }

    .contact-email {
        display:inline-block;
        margin:8px 0 0 18px;
        font-size:13px;
    }
}

.references {
    border-top:1px solid var(--line);
    padding-top:23px;
    padding-bottom:36px;
}

.capabilities {
    background:var(--pale);
    padding:84px 0 86px;
    border-top:1px solid #eaf0eb;
    border-bottom:1px solid #eaf0eb;
}

.section-heading {
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:40px;
    margin-bottom:47px;
}

.section-heading .eyebrow {
    color:var(--green);
    margin-bottom:19px;
}

h2 {
    font-size:42px;
    font-weight:500;
    line-height:1.19;
    letter-spacing:-1.65px;
    margin:0;
}

.section-heading>p {
    font-size:14px;
    line-height:1.8;
    color:var(--muted);
    margin:0 35px 3px 0;
}

.capability-layout {
    display:grid;
    grid-template-columns:1fr 1.07fr;
    gap:65px;
}

.capability-list details {
    border-top:1px solid #d8e1d9;
}

.capability-list details:last-child {
    border-bottom:1px solid #d8e1d9;
}

.capability-list summary {
    display:flex;
    align-items:center;
    gap:19px;
    cursor:pointer;
    list-style:none;
    min-height:83px;
}

.capability-list summary::-webkit-details-marker {
    display:none;
}

.item-number {
    font-size:11px;
    color:#86948b;
    font-variant-numeric:tabular-nums;
}

.capability-list h3 {
    font-size:19px;
    letter-spacing:-.4px;
    font-weight:500;
    margin:0;
}

.item-symbol {
    font-size:25px;
    font-weight:300;
    margin-left:auto;
}

.capability-list details[open] .item-symbol {
    font-size:0;
}

.capability-list details[open] .item-symbol:after {
    content:"−";
    font-size:25px;
}

.capability-list details[open] h3 {
    color:var(--green);
}

.detail-copy {
    padding:0 20px 28px 33px;
}

.detail-copy p {
    font-size:14px;
    line-height:1.8;
    color:var(--muted);
    margin:0 0 18px;
}

.tags {
    font-size:10px;
    color:var(--green);
    line-height:1.8;
}

.tags i {
    font-style:normal;
    margin:0 6px;
    color:#a2afa5;
}

.collaboration {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:100px;
    padding-top:88px;
    padding-bottom:88px;
}

.collab-heading .eyebrow {
    color:var(--green);
    margin-bottom:22px;
}

.collab-heading>p:not(.eyebrow) {
    font-size:15px;
    line-height:1.8;
    color:var(--muted);
    max-width:360px;
    margin:22px 0 27px;
}

.collab-options article {
    display:flex;
    gap:24px;
    padding:27px 0;
    border-bottom:1px solid var(--line);
}

.collab-options article:first-child {
    padding-top:0;
}

.collab-options h3 {
    font-size:19px;
    font-weight:500;
    letter-spacing:-.3px;
    margin:0 0 10px;
}

.collab-options p {
    font-size:14px;
    line-height:1.8;
    color:var(--muted);
    margin:0;
    max-width:390px;
}

.footer {
    padding-top:35px;
    padding-bottom:35px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}

.footer .brand {
    font-size:29px;
}

.footer p {
    font-size:9px;
    color:#7d8980;
    letter-spacing:.1px;
    margin:9px 0 0;
}

.footer address {
    font-style:normal;
    font-size:11px;
    line-height:1.9;
    color:#7d8980;
}

.footer-end {
    display:flex;
    align-items:center;
    gap:42px;
    font-size:10px;
    color:#7d8980;
}

.footer-end a {
    color:#31493a;
}

@media(max-width:1150px) {
    .shell {
        width:calc(100% - 72px);
    }

    .nav {
        gap:23px;
    }

    .nav-wrap {
        gap:25px;
    }

    h1 {
        letter-spacing:-2.8px;
    }

    .capability-layout {
        gap:35px;
    }

    .section-heading>p {
        margin-right:0;
    }

    .capability-list h3 {
        font-size:17px;
    }

    .collaboration {
        gap:55px;
    }

    h2 {
        font-size:37px;
    }
}

@media(max-width:900px) {
    .shell {
        width:calc(100% - 48px);
    }

    .nav-wrap {
        gap:15px;
    }

    .nav {
        gap:18px;
        font-size:12px;
    }

    .brand {
        font-size:31px;
    }

    :root {
        --header-height:72px;
    }

    h1 {
        font-size:47px;
        letter-spacing:-2.5px;
    }

    .capabilities {
        padding:62px 0;
    }

    .section-heading {
        align-items:start;
        gap:28px;
    }

    .section-heading>p {
        font-size:12px;
    }

    .section-heading h2 {
        font-size:31px;
    }

    .capability-layout {
        grid-template-columns:1fr 1fr;
        gap:26px;
    }

    .capability-list summary {
        gap:10px;
        min-height:74px;
    }

    .capability-list h3 {
        font-size:15px;
    }

    .detail-copy {
        padding-left:23px;
        padding-right:0;
    }

    .detail-copy p {
        font-size:12px;
    }

    .collaboration {
        gap:35px;
        padding-top:65px;
        padding-bottom:65px;
    }

    .collaboration h2 {
        font-size:32px;
    }

    .collab-options h3 {
        font-size:17px;
    }

    .collab-options p {
        font-size:12px;
    }

    .collab-options article {
        gap:15px;
    }

    .collab-heading>p:not(.eyebrow) {
        font-size:13px;
    }

    .footer-end {
        gap:15px;
        flex-direction:column;
        align-items:end;
    }
}

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

    :root {
        --header-height:64px;
    }

    .brand {
        font-size:30px;
    }

    .brand img {
        width:26px;
        height:30px;
    }

    .brand-tagline {
        font-size:9px;
    }

    .nav-wrap {
        gap:16px;
    }

    .menu-toggle {
        display:flex;
        width:24px;
        height:34px;
        border:0;
        background:none;
        padding:5px 0;
        flex-direction:column;
        justify-content:center;
        gap:6px;
    }

    .menu-toggle span {
        height:1.5px;
        width:22px;
        background:var(--ink);
        transition:transform .2s;
    }

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

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

    .nav {
        display:none;
        position:absolute;
        top:var(--header-height);
        left:0;
        right:0;
        background:#fff;
        border-bottom:1px solid var(--line);
        padding:16px 24px 22px;
        gap:12px;
        font-size:15px;
    }

    .nav.is-open {
        display:flex;
        flex-direction:column;
    }

    h1 {
        font-size:clamp(43px,11.6vw,68px);
        letter-spacing:-2.8px;
        margin:0 0 20px;
        line-height:1.08;
    }

    .references {
        padding-top:17px;
        padding-bottom:24px;
    }

    .capabilities {
        padding:48px 0;
    }

    .section-heading {
        flex-direction:column;
        gap:19px;
        margin-bottom:28px;
    }

    .eyebrow {
        font-size:9px;
        letter-spacing:1.3px;
    }

    .section-heading .eyebrow {
        margin-bottom:16px;
    }

    .section-heading h2 {
        font-size:31px;
        letter-spacing:-1.3px;
    }

    .section-heading>p {
        font-size:13px;
        line-height:1.8;
    }

    .section-heading .desktop-br {
        display:none;
    }

    .capability-layout {
        grid-template-columns:1fr;
        gap:30px;
    }

    .capability-list h3 {
        font-size:17px;
    }

    .capability-list summary {
        min-height:72px;
        gap:15px;
    }

    .detail-copy {
        padding-left:29px;
        padding-bottom:23px;
    }

    .detail-copy p {
        font-size:13px;
    }

    .tags {
        font-size:9px;
    }

    .collaboration {
        grid-template-columns:1fr;
        gap:35px;
        padding-top:49px;
        padding-bottom:48px;
    }

    .collab-heading .eyebrow {
        margin-bottom:17px;
    }

    .collab-heading h2 {
        font-size:33px;
    }

    .collab-heading>p:not(.eyebrow) {
        font-size:14px;
        max-width:none;
        margin-top:18px;
        margin-bottom:22px;
    }

    .collab-options article {
        gap:20px;
        padding:23px 0;
    }

    .collab-options h3 {
        font-size:17px;
    }

    .collab-options p {
        font-size:13px;
    }

    .footer {
        flex-wrap:wrap;
        gap:23px;
        padding-block:30px;
    }

    .footer .brand {
        font-size:27px;
    }

    .footer p {
        font-size:8px;
    }

    .footer address {
        font-size:10px;
        margin-left:auto;
    }

    .footer-end {
        border-top:1px solid var(--line);
        width:100%;
        padding-top:20px;
        flex-direction:row;
        justify-content:space-between;
        font-size:10px;
    }
}

@media(max-width:370px) {
    .shell {
        width:calc(100% - 32px);
    }

    .nav-wrap {
        gap:12px;
    }

    .desktop-br {
        display:none;
    }

    .capability-list h3 {
        font-size:15px;
    }

    .footer address {
        margin-left:0;
    }

    h2 {
        font-size:29px;
    }

    .collab-heading h2 {
        font-size:30px;
    }
}

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

    *, *:before, *:after {
        animation:none!important;
        transition:none!important;
    }
}

@media(max-width:680px) {

    .capability-list {
        min-width:0;
    }
}

.nav {
    gap: 38px;
    font-size: 14px;
}

.references {
    padding-top: 36px;
    padding-bottom: 42px;
}

.footer address {
    font-size: 12px;
}

@media (max-width: 900px) {
    .nav {
        gap: 25px;
        font-size: 13px;
    }
}

@media (max-width: 680px) {
    .menu-toggle {
        margin-left: auto;
    }

    .nav {
        gap: 12px;
        font-size: 15px;
    }

    .references {
        padding-top: 27px;
        padding-bottom: 28px;
    }

    .footer address {
        font-size: 11px;
    }
}

.references {
    display:grid;
    grid-template-columns:245px 1fr 125px;
    align-items:center;
    gap:35px;
    padding-block:27px;
    min-height:150px;
}

.reference-intro .eyebrow {
    font-size:9px;
    color:var(--green);
    margin-bottom:10px;
    letter-spacing:1.4px;
}

.reference-intro h2 {
    font-size:23px;
    letter-spacing:-.6px;
}

.reference-carousel {
    min-width:0;
}

.reference-slides {
    list-style:none;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:32px;
    padding:0;
    margin:0;
    align-items:center;
}

.reference-slides li {
    display:none;
    justify-content:center;
    align-items:center;
    height:100px;
}

.reference-slides img {
    width:140px;
    height:100px;
    object-fit:contain;
    filter:grayscale(1);
    opacity:.92;
    mix-blend-mode:multiply;
}

.capability-list h3 {
    font-size:18px;
}

.capability-list summary {
    min-height:76px;
}

.system-stage {
    position:relative;
    overflow:hidden;
    min-height:495px;
    border:1px solid #d9e3dc;
    border-radius:8px;
    background:#edf3ee;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:52px 30px 38px;
    align-self:stretch;
}

.system-caption {
    position:absolute;
    top:23px;
    left:25px;
    right:25px;
    display:flex;
    gap:9px;
    align-items:center;
    font-size:9px;
    letter-spacing:1px;
    color:#4d6a57;
}

.system-caption>span:last-child {
    margin-left:auto;
    font-variant-numeric:tabular-nums;
    letter-spacing:2px;
    font-size:8px;
}

.system-message {
    margin:10px 0 10px;
    text-align:center;
}

.system-message h3 {
    font-size:27px;
    line-height:1.25;
    font-weight:500;
    letter-spacing:-.8px;
    margin:0 0 12px;
}

.system-message p {
    font-size:12px;
    color:#657b6c;
    line-height:1.7;
    margin:0;
}

.diagram-note {
    position:absolute;
    bottom:16px;
    right:22px;
    font-size:8px;
    color:#73857a;
}

@media(max-width:1150px) {
    .references {
        grid-template-columns:215px 1fr 110px;
        gap:20px;
    }

    .reference-slides {
        gap:10px;
    }

    .reference-slides img {
        width:120px;
    }

    .capability-list h3 {
        font-size:16px;
    }

    .system-message h3 {
        font-size:24px;
    }
}

@media(max-width:900px) {
    .references {
        grid-template-columns:165px 1fr 100px;
        gap:15px;
    }

    .reference-intro h2 {
        font-size:20px;
    }

    .reference-slides img {
        width:100px;
        height:90px;
    }

    .reference-slides {
        gap:9px;
    }

    .reference-intro .eyebrow {
        font-size:8px;
    }

    .capability-layout {
        grid-template-columns:1.1fr 1fr;
        gap:25px;
    }

    .capability-list h3 {
        font-size:14px;
    }

    .system-stage {
        padding-inline:15px;
    }

    .system-caption {
        left:17px;
        right:17px;
        font-size:7px;
    }

    .system-message h3 {
        font-size:22px;
    }

    .system-message p {
        font-size:11px;
    }
}

@media(max-width:680px) {
    .references {
        grid-template-columns:1fr 100px;
        gap:0 20px;
        padding-block:25px;
        min-height:0;
    }

    .reference-intro {
        grid-column:1;
        grid-row:1;
    }

    .reference-carousel {
        grid-column:1/-1;
        grid-row:2;
        margin-top:15px;
    }

    .reference-slides {
        grid-template-columns:repeat(2,1fr);
        gap:30px;
        padding-inline:25px;
    }

    .reference-slides img {
        width:135px;
        height:100px;
    }

    .reference-intro h2 {
        font-size:23px;
    }

    .reference-intro .eyebrow {
        font-size:8px;
    }

    .capability-layout {
        grid-template-columns:1fr;
    }

    .capability-list h3 {
        font-size:16px;
    }

    .system-stage {
        min-height:420px;
        padding:50px 20px 35px;
    }

    .system-caption {
        font-size:8px;
        left:20px;
        right:20px;
    }

    .system-message h3 {
        font-size:26px;
    }

    .system-message p {
        font-size:12px;
    }

    .system-message {
        margin-top:20px;
    }
}

@media(max-width:370px) {
    .capability-list h3 {
        font-size:14px;
    }

    .system-message h3 {
        font-size:24px;
    }

    .reference-slides {
        padding-inline:10px;
    }

    .reference-slides img {
        width:115px;
    }
}

.references {
    grid-template-columns:245px minmax(0,1fr);
    gap:50px;
}

.reference-carousel {
    overflow:hidden;
    mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
    min-height:100px;
}

.reference-slides {
    display:block;
    position:relative;
    height:100px;
    padding:0;
    margin:0;
}

.reference-slides li {
    display:flex;
    position:absolute;
    left:0;
    top:0;
    height:100px;
    justify-content:center;
    align-items:center;
    animation:none;
    will-change:transform;
}

.reference-slides img {
    width:150px;
    height:110px;
    max-width:90%;
    filter:grayscale(1);
    opacity:1;
    object-fit:contain;
    transition:filter .18s ease;
}

@media (hover:hover) and (pointer:fine) {
    .reference-slides img:hover {
        filter:grayscale(0);
    }
}

.system-stage {
    background:linear-gradient(145deg,#f3f7f4,#e9f0eb);
    border-color:#dce6df;
    border-radius:14px;
    padding:63px 27px 39px;
    min-height:530px;
    box-shadow:inset 0 1px 0 #fff;
}

.system-caption {
    top:25px;
    left:27px;
    right:27px;
    font-size:9px;
    letter-spacing:1px;
}

.system-caption .dot {
    width:5px;
    height:5px;
}

.system-visual {
    position:relative;
    width:100%;
    container-type:inline-size;
    margin:auto 0 0;
}

.scene {
    position:relative;
    aspect-ratio:560/360;
    width:100%;
    animation:scene-in .35s cubic-bezier(.18,.75,.25,1);
    isolation:isolate;
}

@keyframes scene-in {
    from {
        opacity:0;
        transform:translateY(12px) scale(.97);
    }

    to {
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

.scene:before {
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:radial-gradient(#6e987c2b .8px,transparent .8px);
    background-size:18px 18px;
    mask-image:radial-gradient(ellipse,#000,transparent 70%);
}

.system-message {
    margin:20px 0 auto;
    padding-top:5px;
}

.system-message h3 {
    font-size:26px;
    letter-spacing:-.7px;
}

.system-message p {
    font-size:12px;
}

.scene-routes {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    fill:none;
    stroke:#a3beae;
    stroke-width:1.3;
}

.route-packets {
    stroke:#3b8259;
    stroke-width:2;
    stroke-dasharray:12 194;
    stroke-linecap:round;
    animation:route-current 1.5s linear infinite;
}

@keyframes route-current {
    to {
        stroke-dashoffset:-206;
    }
}

.orbit-rings {
    position:absolute;
    left:50%;
    top:50%;
    width:39%;
    aspect-ratio:1;
    transform:translate(-50%,-50%);
    border:1px solid #b8d0c24a;
    border-radius:50%;
    box-shadow:0 0 0 22px #b8d0c21c,0 0 0 23px #b8d0c238,0 0 0 43px #b8d0c214;
}

.orbit-node {
    position:absolute;
    width:28%;
    height:19%;
    background:#ffffffdf;
    border:1px solid #d1dfd6;
    border-radius:10px;
    display:flex;
    align-items:center;
    padding:0 12px;
    gap:9px;
    box-shadow:0 8px 18px #2447310b;
    z-index:2;
}

.orbit-node>span {
    display:grid;
    place-items:center;
    width:30px;
    height:30px;
    background:#eef5ef;
    border-radius:8px;
    color:#4c7c5c;
    flex-shrink:0;
}

.orbit-node svg {
    width:18px;
    height:18px;
}

.orbit-node b {
    font-size:11px;
    font-weight:500;
    white-space:nowrap;
}

.orbit-n1 {
    left:3%;
    top:17%;
}

.orbit-n2 {
    left:3%;
    top:64%;
}

.orbit-n3 {
    right:3%;
    top:17%;
}

.orbit-n4 {
    right:3%;
    top:64%;
}

.integration-core {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:20%;
    aspect-ratio:1;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:8px;
    background:linear-gradient(145deg,#386c4f,#153d28);
    color:#d8eee0;
    border:1px solid #447758;
    border-radius:25%;
    box-shadow:0 14px 30px #285c3d24,inset 0 1px 0 #d7efdf55;
}

.integration-core svg {
    width:34px;
    height:34px;
}

.integration-core small {
    font-size:6px;
    letter-spacing:1.4px;
    color:#9ebda7;
}

.connection-chip {
    position:absolute;
    bottom:4%;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    gap:6px;
    font-size:9px;
    color:#678873;
}

.connection-chip i {
    width:5px;
    height:5px;
    border-radius:50%;
    background:#42865d;
    box-shadow:0 0 0 4px #42865d10;
}

.workflow-wire {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    fill:none;
    stroke:#b2c9bb;
    stroke-width:1.5;
}

.workflow-tile {
    position:absolute;
    width:33%;
    height:28%;
    padding:12px 15px;
    background:#fff;
    border:1px solid #d5e3d9;
    border-radius:10px;
    box-shadow:0 10px 20px #21452b09;
    animation:workflow-light 4s infinite;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
}

.workflow-tile>span {
    width:28px;
    height:28px;
    border-radius:8px;
    display:grid;
    place-items:center;
    background:#eef5ef;
    color:#3b7750;
}

.workflow-tile svg {
    width:17px;
    height:17px;
}

.workflow-tile small {
    text-align:right;
    font:9px Consolas,monospace;
    color:#96aa9c;
}

.workflow-tile b {
    grid-column:1/-1;
    font-size:12px;
    font-weight:500;
    margin-top:5px;
}

.workflow-a {
    left:6%;
    top:10%;
}

.workflow-b {
    right:6%;
    top:10%;
    animation-delay:1s;
}

.workflow-c {
    right:6%;
    bottom:12%;
    animation-delay:2s;
}

.workflow-d {
    left:6%;
    bottom:12%;
    animation-delay:3s;
}

@keyframes workflow-light {
    0%,24%,100% {
        border-color:#c9dacf;
        box-shadow:0 10px 20px #21452b09;
    }

    8%,17% {
        border-color:#6ca881;
        box-shadow:0 0 0 3px #78ab8814,0 10px 20px #21452b09;
    }
}

.workflow-center {
    position:absolute;
    top:44%;
    width:100%;
    text-align:center;
    font-size:9px;
    line-height:1.7;
    color:#8a9c90;
}

.workflow-center strong {
    font-weight:500;
    color:#5d7c67;
}

.cloud-halo {
    position:absolute;
    width:44%;
    aspect-ratio:1;
    left:28%;
    top:-1%;
    border-radius:50%;
    background:radial-gradient(#c3dccc55,transparent 70%);
    border:1px solid #b5cebe44;
    box-shadow:0 0 0 24px #bdd5c616,0 0 0 25px #bdd5c62a;
}

.cloud-form {
    position:absolute;
    left:34%;
    top:5%;
    width:32%;
    height:40%;
    color:#fff;
    filter:drop-shadow(0 12px 15px #3c684c18);
    animation:cloud-drift 3.5s ease-in-out infinite;
}

.cloud-form>svg {
    width:100%;
    height:100%;
    fill:#fff;
    stroke:#85af94;
    stroke-width:.5;
}

.cloud-form>span {
    position:absolute;
    bottom:22%;
    right:8%;
    width:31px;
    height:31px;
    border:1px solid #cfdfd3;
    background:#e2f0e4;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:#3b8153;
}

.cloud-form>span svg {
    width:16px;
    height:16px;
}

@keyframes cloud-drift {
    0%,100% {
        transform:translateY(0);
    }

    50% {
        transform:translateY(-7px);
    }
}

.cloud-streams {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    fill:none;
    stroke:#afc9b8;
    stroke-width:1.3;
}

.cloud-streams .route-packets {
    animation-direction:reverse;
}

.cloud-chip {
    position:absolute;
    font-size:8px;
    border:1px solid #d7e4db;
    background:#ffffffce;
    border-radius:30px;
    color:#789682;
    padding:7px 11px;
}

.cloud-chip-a {
    top:29%;
    left:3%;
}

.cloud-chip-b {
    top:11%;
    right:0;
}

.cloud-sources {
    position:absolute;
    bottom:14%;
    left:9%;
    right:9%;
    display:flex;
    justify-content:space-between;
    gap:12px;
}

.cloud-sources>span {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    width:29%;
    font-size:10px;
    color:#51705b;
}

.cloud-sources svg {
    width:48px;
    height:48px;
    padding:12px;
    background:#fff;
    border-radius:12px;
    border:1px solid #d3e0d7;
    box-shadow:0 8px 20px #2b563811;
}

.performance-window, .insight-card {
    position:absolute;
    top:9%;
    left:6%;
    right:6%;
    background:#fff;
    border:1px solid #d5e3da;
    box-shadow:0 18px 35px #315b3d12;
    border-radius:12px;
    padding:16px 19px;
    transform:rotate(-2deg);
}

.viz-card-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:11px;
    color:#3d5c47;
}

.viz-card-header>span {
    display:flex;
    align-items:center;
    gap:7px;
}

.viz-card-header svg {
    width:16px;
    height:16px;
    color:#6b9378;
}

.viz-card-header>i {
    width:5px;
    height:5px;
    background:#6ba580;
    border-radius:50%;
    box-shadow:0 0 0 3px #eaf3ec;
}

.signal-chart {
    margin-top:16px;
}

.signal-chart svg {
    width:100%;
    display:block;
}

.chart-grid {
    stroke:#e8eee9;
    stroke-width:1;
    fill:none;
}

.signal-ghost {
    stroke:#bac9c0;
    stroke-width:1;
    stroke-dasharray:3 4;
    fill:none;
}

.signal-main, .insight-line {
    fill:none;
    stroke:#397e55;
    stroke-width:2.5;
    stroke-linecap:round;
    stroke-dasharray:600;
    animation:draw-insight 3s ease-in-out infinite;
}

.signal-point {
    fill:#e2f1e6;
    stroke:#397e55;
    stroke-width:2;
}

@keyframes draw-insight {
    0% {
        stroke-dashoffset:600;
    }

    40%,100% {
        stroke-dashoffset:0;
    }
}

.resource-rows {
    display:grid;
    gap:9px;
    margin-top:15px;
}

.resource-rows>div {
    display:flex;
    gap:12px;
    align-items:center;
    font-size:8px;
    color:#799082;
}

.resource-rows span {
    width:90px;
}

.resource-rows i {
    height:4px;
    flex:1;
    border-radius:4px;
    background:#edf3ef;
}

.resource-rows b {
    display:block;
    height:100%;
    width:72%;
    background:#7ca88a;
    border-radius:4px;
}

.resource-rows>div:nth-child(2) b {
    width:56%;
    background:#b7cfc0;
}

.resource-rows em {
    font-size:7px;
    font-style:normal;
    width:35px;
    text-align:right;
    color:#6b967a;
}

.performance-badge {
    position:absolute;
    bottom:4%;
    left:50%;
    transform:translateX(-50%) rotate(2deg);
    display:flex;
    align-items:center;
    gap:8px;
    background:#234d34;
    color:#d7e8dc;
    padding:11px 19px;
    border-radius:8px;
    font-size:10px;
    box-shadow:0 10px 20px #274e3320;
    white-space:nowrap;
}

.performance-badge svg {
    width:16px;
    height:16px;
}

.insight-card {
    top:5%;
    left:3%;
    right:9%;
    transform:rotate(-3deg);
    padding-bottom:15px;
}

.insight-chart {
    position:relative;
    padding-left:27px;
    margin-top:26px;
}

.insight-chart>svg {
    width:100%;
    display:block;
    overflow:visible;
}

.chart-y {
    position:absolute;
    left:0;
    top:5px;
    bottom:20px;
    display:flex;
    justify-content:space-between;
    flex-direction:column;
    color:#98a99d;
    font-size:6px;
}

.chart-marker {
    stroke:#90b39d;
    stroke-width:1;
    stroke-dasharray:4 4;
}

.chart-pulse {
    animation:chart-pulse 1.5s ease-in-out infinite;
    transform-origin:285px 40px;
}

@keyframes chart-pulse {
    0%,100% {
        opacity:.8;
        transform:scale(.8);
    }

    70% {
        opacity:0;
        transform:scale(1.8);
    }
}

.chart-tooltip {
    position:absolute;
    right:7%;
    top:-7px;
    padding:7px 9px;
    border:1px solid #dbe8df;
    background:#f7fbf8;
    border-radius:5px;
    font-size:7px;
    color:#5e866b;
    box-shadow:0 5px 12px #3a614311;
}

.chart-tooltip span {
    margin-left:7px;
}

.insight-bottom {
    display:flex;
    gap:16px;
    margin-top:16px;
    font-size:7px;
    color:#819587;
    white-space:nowrap;
}

.insight-bottom span {
    display:flex;
    align-items:center;
    gap:4px;
}

.insight-bottom i {
    width:4px;
    height:4px;
    border-radius:50%;
    background:#4f8e63;
}

.insight-bottom span:nth-child(2) i {
    background:#9bbda7;
}

.insight-bottom span:nth-child(3) i {
    background:#c0d3c7;
}

.insight-mini {
    position:absolute;
    bottom:1%;
    right:0;
    width:38%;
    padding:14px 15px 12px;
    background:#214a33;
    border:1px solid #416f51;
    border-radius:10px;
    box-shadow:0 16px 26px #2b4e3924;
    transform:rotate(4deg);
}

.insight-mini>span {
    font-size:8px;
    color:#bcd5c4;
    letter-spacing:.3px;
}

.insight-mini>div {
    display:flex;
    gap:4px;
    align-items:flex-end;
    height:43px;
    margin-top:10px;
}

.insight-mini i {
    width:7%;
    height:var(--bar);
    background:#a6cbb1;
    border-radius:2px 2px 0 0;
    transform-origin:bottom;
    animation:insight-bar 3s ease-in-out infinite;
    animation-delay:calc(var(--i)*35ms);
}

@keyframes insight-bar {
    0%,100% {
        transform:scaleY(.65);
    }

    40%,75% {
        transform:scaleY(1);
    }
}

.offscreen * {
    animation-play-state:paused!important;
}

@media(max-width:1150px) {
    .references {
        grid-template-columns:215px minmax(0,1fr);
        gap:30px;
    }

    .system-stage {
        padding-inline:22px;
    }

    .orbit-node {
        padding-inline:9px;
        gap:7px;
    }

    .orbit-node b {
        font-size:9px;
    }

    .orbit-node>span {
        width:25px;
        height:25px;
    }

    .orbit-node svg {
        width:15px;
        height:15px;
    }

    .integration-core svg {
        width:29px;
        height:29px;
    }

    .workflow-tile {
        padding:10px 12px;
    }

    .workflow-tile b {
        font-size:10px;
    }

    .system-message h3 {
        font-size:24px;
    }
}

@media(max-width:900px) {
    .references {
        grid-template-columns:165px minmax(0,1fr);
        gap:20px;
    }

    .reference-slides img {
        width:120px;
        height:100px;
    }

    .system-stage {
        padding:58px 16px 35px;
    }

    .system-caption {
        left:18px;
        right:18px;
        font-size:7px;
    }

    .orbit-node {
        padding:0 6px;
        gap:4px;
        border-radius:7px;
    }

    .orbit-node>span {
        width:20px;
        height:23px;
        border-radius:5px;
    }

    .orbit-node svg {
        width:13px;
        height:13px;
    }

    .orbit-node b {
        font-size:7px;
    }

    .integration-core small {
        font-size:4px;
        letter-spacing:1px;
    }

    .integration-core svg {
        width:23px;
        height:23px;
    }

    .integration-core {
        gap:4px;
    }

    .system-message h3 {
        font-size:22px;
    }

    .connection-chip {
        font-size:7px;
    }

    .workflow-tile {
        padding:7px 9px;
    }

    .workflow-tile>span {
        width:22px;
        height:22px;
    }

    .workflow-tile svg {
        width:13px;
        height:13px;
    }

    .workflow-tile b {
        font-size:8px;
    }

    .workflow-tile small {
        font-size:7px;
    }

    .workflow-center {
        font-size:7px;
    }

    .cloud-chip {
        font-size:6px;
        padding:5px 8px;
    }

    .cloud-sources>span {
        font-size:8px;
        gap:8px;
    }

    .cloud-sources svg {
        width:36px;
        height:36px;
        padding:9px;
    }

    .cloud-form>span {
        width:23px;
        height:23px;
    }

    .cloud-form>span svg {
        width:12px;
        height:12px;
    }

    .performance-window, .insight-card {
        padding:12px;
    }

    .viz-card-header {
        font-size:8px;
    }

    .viz-card-header svg {
        width:12px;
        height:12px;
    }

    .signal-chart {
        margin-top:9px;
    }

    .resource-rows {
        gap:6px;
        margin-top:9px;
    }

    .resource-rows>div {
        font-size:6px;
        gap:7px;
    }

    .resource-rows span {
        width:65px;
    }

    .resource-rows em {
        font-size:5px;
        width:26px;
    }

    .performance-badge {
        font-size:7px;
        padding:8px 13px;
    }

    .insight-chart {
        padding-left:21px;
        margin-top:19px;
    }

    .insight-bottom {
        gap:9px;
        font-size:5px;
        margin-top:12px;
    }

    .chart-tooltip {
        font-size:5px;
        padding:5px 7px;
    }

    .chart-y {
        font-size:5px;
    }

    .insight-mini {
        padding:10px;
    }

    .insight-mini>span {
        font-size:6px;
    }

    .insight-mini>div {
        height:28px;
        gap:3px;
        margin-top:7px;
    }
}

@media(max-width:680px) {
    .references {
        grid-template-columns:1fr;
        gap:8px;
        padding-block:25px;
    }

    .reference-intro {
        grid-column:1;
        grid-row:1;
    }

    .reference-carousel {
        grid-column:1;
        grid-row:2;
        margin-top:6px;
        min-height:100px;
    }

    .reference-slides {
        padding:0;
        grid-template-columns:none;
    }

    .reference-slides img {
        width:140px;
        height:108px;
    }

    .system-stage {
        min-height:440px;
        padding:56px 20px 35px;
    }

    .system-message {
        margin-top:18px;
    }

    .system-message h3 {
        font-size:25px;
    }

    .system-message p {
        font-size:11px;
    }

    .system-caption {
        left:21px;
        right:21px;
        font-size:8px;
    }

    .orbit-node {
        gap:6px;
        padding-inline:7px;
    }

    .orbit-node b {
        font-size:8px;
    }

    .orbit-node>span {
        width:23px;
        height:26px;
    }

    .orbit-node svg {
        width:14px;
        height:14px;
    }

    .integration-core svg {
        width:26px;
        height:26px;
    }

    .integration-core small {
        font-size:4px;
    }

    .connection-chip {
        font-size:8px;
    }

    .workflow-tile b {
        font-size:9px;
    }

    .workflow-tile>span {
        width:25px;
        height:25px;
    }

    .workflow-center {
        font-size:8px;
    }

    .cloud-sources>span {
        font-size:9px;
    }

    .cloud-sources svg {
        width:39px;
        height:39px;
        padding:10px;
    }

    .cloud-chip {
        font-size:7px;
    }

    .viz-card-header {
        font-size:9px;
    }

    .performance-badge {
        font-size:8px;
    }

    .insight-chart {
        margin-top:22px;
    }

    .insight-mini>div {
        height:33px;
    }

    .insight-mini>span {
        font-size:7px;
    }

    .insight-bottom {
        font-size:5px;
        gap:10px;
    }

    .resource-rows>div {
        font-size:7px;
    }

    .resource-rows em {
        font-size:6px;
    }

    .chart-tooltip {
        font-size:6px;
    }

    .chart-y {
        font-size:5px;
    }
}

@media(max-width:370px) {

    .system-stage {
        padding-inline:14px;
        min-height:410px;
    }

    .system-message h3 {
        font-size:23px;
    }

    .system-caption {
        font-size:7px;
        left:17px;
        right:17px;
    }

    .orbit-node {
        gap:4px;
        padding-inline:5px;
    }

    .orbit-node b {
        font-size:7px;
    }

    .orbit-node>span {
        width:19px;
        height:21px;
    }

    .workflow-tile b {
        font-size:8px;
    }

    .cloud-chip {
        font-size:6px;
    }

    .insight-mini>div {
        height:25px;
    }

    .viz-card-header {
        font-size:8px;
    }

    .resource-rows span {
        width:62px;
    }

    .resource-rows>div {
        font-size:6px;
    }

    .insight-bottom {
        gap:8px;
        font-size:4.5px;
    }

    .chart-tooltip {
        font-size:5px;
    }
}

@media(prefers-reduced-motion:reduce) {
    .system-stage * {
        animation:none!important;
    }

    .reference-carousel {
        overflow-x:auto;
        mask-image:none;
    }

    .reference-slides {
        display:flex;
        width:max-content;
        gap:25px;
    }

    .reference-slides li {
        position:static;
        display:flex;
        width:135px;
        transform:none!important;
    }
}


/* All brands remain available before JavaScript loads and with reduced motion. */
.reference-carousel:not(.is-animated) { overflow-x: auto; mask-image: none; }
.reference-carousel:not(.is-animated) .reference-slides { display: flex; width: max-content; gap: 25px; }
.reference-carousel:not(.is-animated) .reference-slides li { position: static; width: 135px; flex-shrink: 0; transform: none; }