/* ==========================================================================
   AI1GROUP HOMEPAGE CSS
   Organised production stylesheet

   CONTENTS
   01. Core variables, layout and base components
   02. Cinematic parallax, cards and graphics
   03. Typography, kickers and contact details
   04. Polish and showcase motion
   05. Hero, group, approach and brand enhancements
   06. Hero graph and traffic-light sequences
   07. Expanded brand story and interactions
   08. Traffic-light system, logo network and About content
   09. Layout widths and About placement
   10. Customer-choice content and width refinements
   11. Graph and customer-card refinements
   12. Full-width section divider
   13. Legacy separator clean-up
   14. Existing spacing correction
   15. Final spacing system and About-fact animation
========================================================================== */

/* ==========================================================================
01. CORE VARIABLES, LAYOUT & BASE COMPONENTS
========================================================================== */

:root {
    --v4-black: #020504;
    --v4-black-2: #07100b;
    --v4-panel: #0b1710;
    --v4-panel-soft: #101d15;
    --v4-green: #73d600;
    --v4-green-bright: #9cff22;
    --v4-green-deep: #3e8700;
    --v4-gold: #f0d59a;
    --v4-white: #f7faf7;
    --v4-text: #dbe6de;
    --v4-muted: #91a297;
    --v4-line: rgba(156,255,34,.16);
    --v4-shadow: 0 28px 80px rgba(0,0,0,.42);
    --v4-radius: 28px;
}

.ai1-v4 {
    background: var(--v4-black);
    color: var(--v4-text);
    overflow: clip;
}

.ai1-v4 * {
    box-sizing: border-box;
}

.ai1-v4 img, .ai1-v4 video {
    display: block;
    max-width: 100%;
}

.ai1-v4-section {
    position: relative;
    padding: clamp(88px,10vw,150px) 0;
}

.ai1-v4-kicker {
    margin: 0 0 18px;
    color: var(--v4-green-bright);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .19em;
}

.ai1-v4 h1, .ai1-v4 h2, .ai1-v4 h3 {
    color: var(--v4-white);
    letter-spacing: -.045em;
}

.ai1-v4 h2 {
    margin: 0;
    font-size: clamp(2.5rem,5vw,5.4rem);
    line-height: 1;
}

.ai1-v4 p {
    line-height: 1.8;
}

.ai1-v4-heading {
    max-width: 880px;
    margin-bottom: clamp(46px,7vw,84px);
}

.ai1-v4-heading>p:last-child {
    max-width: 700px;
    color: var(--v4-muted);
    font-size: 1.08rem;
}

.ai1-v4-heading--split {
    display: grid;
    grid-template-columns: 1.15fr .75fr;
    gap: 60px;
    max-width: none;
    align-items: end;
}

.ai1-v4-heading--split>p {
    margin: 0;
}

.ai1-v4-heading--light h2, .ai1-v4-heading--light p {
    color: #fff;
}

.ai1-v4-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    padding: 0 24px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-weight: 800;
    text-decoration: none;
    transition: .25s ease;
}

.ai1-v4-button--primary {
    background: linear-gradient(135deg,var(--v4-green-bright),var(--v4-green-deep));
    color: #061006;
    box-shadow: 0 14px 34px rgba(115,214,0,.24);
}

.ai1-v4-button--primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(115,214,0,.34);
}

.ai1-v4-button--ghost {
    border-color: rgba(255,255,255,.18);
    background: rgba(255,255,255,.055);
    color: #fff;
    backdrop-filter: blur(12px);
}

.ai1-v4-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
}

.ai1-v4-hero {
    position: relative;
    isolation: isolate;
    min-height: min(940px,100svh);
    display: grid;
    align-items: center;
    padding: clamp(120px,14vh,180px) 0 clamp(90px,11vh,140px);
    overflow: hidden;
    background: #010302;
}

.ai1-v4-hero__video {
    position: absolute;
    inset: 0;
    z-index: -4;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.48) saturate(.9) contrast(1.06);
}

.ai1-v4-hero__veil {
    position: absolute;
    inset: 0;
    z-index: -3;
    background: linear-gradient(90deg,rgba(0,4,2,.94) 0%,rgba(0,4,2,.84) 44%,rgba(0,4,2,.44) 75%,rgba(0,4,2,.72) 100%),linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,5,2,.78));
}

.ai1-v4-hero__mesh {
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: .26;
    background-image: radial-gradient(circle at center,rgba(156,255,34,.35) 1px,transparent 1.8px);
    background-size: 34px 34px;
    mask-image: linear-gradient(90deg,#000,transparent 58%);
}

.ai1-v4-hero__inner {
    display: grid;
    grid-template-columns: minmax(0,1.05fr) minmax(420px,.95fr);
    gap: clamp(50px,8vw,110px);
    align-items: center;
}

.ai1-v4-hero__copy {
    max-width: 760px;
}

.ai1-v4-hero h1 {
    margin: 0;
    font-size: clamp(3.5rem,7vw,7.8rem);
    line-height: .92;
}

.ai1-v4-hero h1 span {
    color: var(--v4-green-bright);
}

.ai1-v4-hero__lead {
    max-width: 690px;
    margin: 26px 0 0;
    color: #b9c7be;
    font-size: clamp(1.05rem,1.35vw,1.24rem);
}

.ai1-v4-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 24px;
    margin-top: 30px;
    color: #93a197;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ai1-v4-trust span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai1-v4-trust i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--v4-green-bright);
    box-shadow: 0 0 12px rgba(156,255,34,.7);
}

.ai1-v4-hero__stage {
    position: relative;
}

.ai1-v4-orbit {
    position: absolute;
    inset: -10%;
    pointer-events: none;
}

.ai1-v4-orbit__ring {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(156,255,34,.12);
    border-radius: 50%;
    animation: v4spin 26s linear infinite;
}

.ai1-v4-orbit__ring--two {
    inset: 11%;
    border-style: dashed;
    animation-direction: reverse;
    animation-duration: 19s;
}

.ai1-v4-orbit__ring--three {
    inset: 23%;
    border-color: rgba(240,213,154,.12);
    animation-duration: 32s;
}

@keyframes v4spin {
    to {
        transform: rotate(360deg);
    }
}

.ai1-v4-stage-card {
    position: relative;
    z-index: 2;
    overflow: hidden;
    border: 1px solid rgba(156,255,34,.2);
    border-radius: 34px;
    background: linear-gradient(180deg,rgba(8,18,12,.94),rgba(3,8,5,.96));
    box-shadow: var(--v4-shadow),0 0 60px rgba(115,214,0,.07);
    backdrop-filter: blur(22px);
}

.ai1-v4-stage-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 10%,rgba(156,255,34,.1),transparent 38%);
    pointer-events: none;
}

.ai1-v4-stage-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .15em;
    color: var(--v4-muted);
}

.ai1-v4-stage-card__head b {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--v4-green-bright);
}

.ai1-v4-stage-card__head i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 12px currentColor;
}

.ai1-v4-stage-card__core {
    display: grid;
    place-items: center;
    padding: 34px 20px 24px;
    text-align: center;
}

.ai1-v4-stage-card__core img {
    width: min(58%,230px);
    filter: drop-shadow(0 18px 28px rgba(0,0,0,.45));
}

.ai1-v4-stage-card__core p {
    margin: 12px 0 0;
    color: var(--v4-gold);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.ai1-v4-stage-card__brands {
    display: grid;
    gap: 1px;
    background: rgba(255,255,255,.06);
}

.ai1-v4-stage-card__brands a {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 16px 20px;
    background: rgba(4,10,6,.96);
    color: #fff;
    text-decoration: none;
    transition: .25s;
}

.ai1-v4-stage-card__brands a:hover {
    background: rgba(156,255,34,.07);
    padding-left: 26px;
}

.ai1-v4-stage-card__brands img {
    width: 52px;
    height: 52px;
    object-fit: contain;
}

.ai1-v4-stage-card__brands span {
    display: grid;
}

.ai1-v4-stage-card__brands small {
    color: var(--v4-muted);
}

.ai1-v4-stage-card__brands a::after {
    content: "↗";
    font-weight: 800;
    color: var(--v4-green-bright);
}

.ai1-v4-scroll {
    position: absolute;
    right: 4vw;
    bottom: 30px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #98a59d;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
}

.ai1-v4-scroll i {
    width: 2px;
    height: 48px;
    background: linear-gradient(var(--v4-green-bright),transparent);
    animation: v4scroll 1.7s ease-in-out infinite;
}

@keyframes v4scroll {
    0%, 100% {
        transform: scaleY(.35);
        transform-origin: top;
    }
    50% {
        transform: scaleY(1);
    }
}

.ai1-v4-group {
    background: linear-gradient(180deg,#07100b,#0a1510);
}

.ai1-v4-group__grid {
    display: grid;
    grid-template-columns: 1fr .8fr;
    gap: clamp(48px,8vw,110px);
    align-items: start;
}

.ai1-v4-group__grid>div:last-child {
    padding-top: 24px;
}

.ai1-v4-group p {
    color: var(--v4-muted);
}

.ai1-v4-lead {
    font-size: 1.18rem;
    color: #d9e3dc!important;
}

.ai1-v4-brands {
    background: radial-gradient(circle at 50% 0,rgba(115,214,0,.08),transparent 30%),#eef3ef;
    color: #1b2b21;
}

.ai1-v4-brands h2, .ai1-v4-brands h3 {
    color: #102318;
}

.ai1-v4-brands .ai1-v4-heading>p:last-child {
    color: #607166;
}

.ai1-v4-brand-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 24px;
}

.ai1-v4-brand-card {
    --card-accent: #69c900;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(16,35,24,.1);
    border-radius: 30px;
    background: #fff;
    box-shadow: 0 22px 55px rgba(14,35,21,.09);
    transition: transform .35s ease,box-shadow .35s ease;
}

.ai1-v4-brand-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 32px 75px rgba(14,35,21,.16);
}

.ai1-v4-brand-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg,var(--card-accent),transparent);
}

.ai1-v4-brand-card--design {
    --card-accent: #79e100;
}

.ai1-v4-brand-card--security {
    --card-accent: #2e63d5;
}

.ai1-v4-brand-card__top {
    display: flex;
    justify-content: space-between;
    padding: 24px 26px 0;
    color: #617267;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .13em;
}

.ai1-v4-brand-card__top i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--card-accent);
    box-shadow: 0 0 12px color-mix(in srgb,var(--card-accent) 70%,transparent);
}

.ai1-v4-brand-card__visual {
    display: grid;
    place-items: center;
    min-height: 245px;
    margin: 18px 26px;
    border-radius: 24px;
    background: radial-gradient(circle,rgba(115,214,0,.12),transparent 64%),#f2f6f3;
}

.ai1-v4-brand-card--security .ai1-v4-brand-card__visual {
    background: radial-gradient(circle,rgba(46,99,213,.14),transparent 64%),#f2f6f3;
}

.ai1-v4-brand-card__visual img {
    width: min(58%,190px);
    transition: transform .35s ease;
}

.ai1-v4-brand-card:hover .ai1-v4-brand-card__visual img {
    transform: scale(1.06) rotate(-2deg);
}

.ai1-v4-brand-card__body {
    padding: 8px 28px 30px;
}

.ai1-v4-brand-card__eyebrow {
    margin: 0;
    color: #687a6f;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
}

.ai1-v4-brand-card h3 {
    margin: 10px 0 12px;
    font-size: 2rem;
}

.ai1-v4-brand-card__body>p:not(.ai1-v4-brand-card__eyebrow) {
    color: #65766b;
}

.ai1-v4-brand-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 22px 0;
}

.ai1-v4-brand-card__tags span {
    padding: 7px 10px;
    border-radius: 999px;
    background: #eef4ef;
    color: #3e5145;
    font-size: .75rem;
    font-weight: 700;
}

.ai1-v4-brand-card a, .ai1-v4-brand-card__soon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--card-accent);
    font-weight: 800;
    text-decoration: none;
}

.ai1-v4-parallax {
    position: relative;
    isolation: isolate;
    min-height: 620px;
    display: grid;
    align-items: center;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

.ai1-v4-parallax--manifesto {
    background-image: url("/templates/ai1group/images/backgrounds/manifesto.jpg");
}

.ai1-v4-parallax--projects {
    background-image: url("/templates/ai1group/images/backgrounds/projects.jpg");
    padding: clamp(90px,10vw,150px) 0;
}

.ai1-v4-parallax__shade {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg,rgba(1,5,3,.9),rgba(1,6,3,.56)),radial-gradient(circle at 75% 40%,rgba(115,214,0,.14),transparent 34%);
}

.ai1-v4-parallax__content {
    max-width: 1000px;
}

.ai1-v4-parallax h2 {
    font-size: clamp(3rem,6vw,6.6rem);
}

.ai1-v4-parallax h2 span {
    color: var(--v4-green-bright);
}

.ai1-v4-parallax p {
    max-width: 680px;
    color: #c7d2ca;
    font-size: 1.1rem;
}

.ai1-v4-showcase {
    overflow: hidden;
    border: 1px solid rgba(156,255,34,.18);
    border-radius: 30px;
    background: rgba(5,12,8,.84);
    box-shadow: var(--v4-shadow);
    backdrop-filter: blur(16px);
}

.ai1-v4-model {
    background: #08110c;
}

.ai1-v4-model__grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 18px;
}

.ai1-v4-model article {
    position: relative;
    min-height: 300px;
    padding: 30px;
    border: 1px solid rgba(156,255,34,.12);
    border-radius: 24px;
    background: linear-gradient(180deg,rgba(17,32,22,.92),rgba(7,16,10,.94));
    box-shadow: 0 18px 40px rgba(0,0,0,.2);
    transition: .3s;
}

.ai1-v4-model article:hover {
    transform: translateY(-8px);
    border-color: rgba(156,255,34,.36);
}

.ai1-v4-model article>span {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: rgba(156,255,34,.08);
    color: var(--v4-green-bright);
    font-size: 1.5rem;
}

.ai1-v4-model small {
    display: block;
    margin-top: 28px;
    color: var(--v4-green-bright);
    font-weight: 800;
    letter-spacing: .13em;
}

.ai1-v4-model h3 {
    margin: 12px 0 12px;
    font-size: 1.55rem;
}

.ai1-v4-model p {
    color: var(--v4-muted);
}

.ai1-v4-stats {
    padding: 70px 0;
    background: linear-gradient(90deg,#0a160f,#0f2116,#0a160f);
    border-block: 1px solid rgba(156,255,34,.12);
}

.ai1-v4-stats__grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
}

.ai1-v4-stats article {
    text-align: center;
    padding: 20px;
    border-right: 1px solid rgba(255,255,255,.08);
}

.ai1-v4-stats article:last-child {
    border-right: 0;
}

.ai1-v4-stats strong {
    display: block;
    color: var(--v4-green-bright);
    font-size: clamp(3rem,5vw,5.7rem);
    line-height: 1;
}

.ai1-v4-stats span {
    display: block;
    margin-top: 10px;
    color: var(--v4-muted);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ai1-v4-contact {
    background: radial-gradient(circle at 85% 15%,rgba(115,214,0,.12),transparent 30%),#020604;
}

.ai1-v4-contact__grid {
    display: grid;
    grid-template-columns: .88fr 1.12fr;
    gap: clamp(48px,8vw,110px);
}

.ai1-v4-contact__intro h2 span {
    color: var(--v4-green-bright);
}

.ai1-v4-contact__intro>p {
    color: var(--v4-muted);
}

.ai1-v4-contact__links {
    display: grid;
    gap: 12px;
    margin-top: 34px;
}

.ai1-v4-contact__links a {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 20px;
    border: 1px solid rgba(156,255,34,.11);
    border-radius: 16px;
    background: rgba(255,255,255,.035);
    text-decoration: none;
}

.ai1-v4-contact__links small {
    color: var(--v4-muted);
    font-weight: 700;
}

.ai1-v4-contact__links strong {
    color: #fff;
}

.ai1-v4-byte {
    display: grid;
    grid-template-columns: 86px 1fr;
    gap: 18px;
    align-items: center;
    margin-top: 26px;
    padding: 16px;
    border: 1px solid rgba(156,255,34,.12);
    border-radius: 20px;
    background: rgba(255,255,255,.03);
}

.ai1-v4-byte video {
    width: 86px;
    height: 86px;
    object-fit: cover;
    border-radius: 18px;
}

.ai1-v4-byte strong {
    color: var(--v4-green-bright);
    font-size: .7rem;
    letter-spacing: .13em;
}

.ai1-v4-byte p {
    margin: 5px 0 0;
    color: #b7c4bb;
}

.ai1-v4-form {
    overflow: hidden;
    border: 1px solid rgba(156,255,34,.16);
    border-radius: 30px;
    background: linear-gradient(180deg,rgba(11,24,16,.96),rgba(5,13,8,.98));
    box-shadow: var(--v4-shadow);
}

.ai1-v4-form__head {
    display: flex;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
    color: var(--v4-muted);
}

.ai1-v4-form__head b {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--v4-green-bright);
}

.ai1-v4-form__head i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 10px currentColor;
}

.ai1-v4-form__body {
    display: grid;
    gap: 18px;
    padding: clamp(24px,4vw,40px);
}

.ai1-v4-form__grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 18px;
}

.ai1-v4-form label {
    display: grid;
    gap: 8px;
}

.ai1-v4-form label>span {
    color: var(--v4-muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ai1-v4-form input, .ai1-v4-form select, .ai1-v4-form textarea {
    width: 100%;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    background: rgba(255,255,255,.035);
    color: #fff;
    font: inherit;
    outline: none;
}

.ai1-v4-form input, .ai1-v4-form select {
    min-height: 52px;
    padding: 0 14px;
}

.ai1-v4-form textarea {
    min-height: 150px;
    padding: 14px;
    resize: vertical;
}

.ai1-v4-form input:focus, .ai1-v4-form select:focus, .ai1-v4-form textarea:focus {
    border-color: rgba(156,255,34,.5);
    box-shadow: 0 0 0 4px rgba(156,255,34,.06);
}

.ai1-v4-form option {
    color: #111;
}

.ai1-v4-check {
    display: flex!important;
    align-items: flex-start;
    gap: 12px!important;
}

.ai1-v4-check input {
    width: 18px;
    height: 18px;
    min-height: 0;
    accent-color: var(--v4-green-bright);
}

.ai1-honeypot {
    position: absolute!important;
    left: -9999px!important;
}

/* Shared reveal motion is defined once in template.css. */

@media(max-width:1100px) {
    .ai1-v4-hero__inner {
        grid-template-columns: 1fr .8fr;
    }
    .ai1-v4-brand-grid {
        grid-template-columns: 1fr 1fr;
    }
    .ai1-v4-brand-card--security {
        grid-column: 1/-1;
    }
    .ai1-v4-model__grid {
        grid-template-columns: repeat(2,1fr);
    }
    .ai1-v4-contact__grid {
        grid-template-columns: 1fr;
    }
}

@media(max-width:820px) {
    .ai1-v4-hero {
        min-height: auto;
    }
    .ai1-v4-hero__inner, .ai1-v4-group__grid, .ai1-v4-heading--split {
        grid-template-columns: 1fr;
    }
    .ai1-v4-hero__stage {
        max-width: 620px;
    }
    .ai1-v4-scroll {
        display: none;
    }
    .ai1-v4-brand-grid {
        grid-template-columns: 1fr;
    }
    .ai1-v4-brand-card--security {
        grid-column: auto;
    }
    .ai1-v4-stats__grid {
        grid-template-columns: repeat(2,1fr);
    }
    .ai1-v4-stats article:nth-child(2) {
        border-right: 0;
    }
    .ai1-v4-stats article:nth-child(-n
    /**/
    +2) {
        border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .ai1-v4-parallax {
        background-attachment: scroll;
    }
}

@media(max-width:600px) {
    .ai1-v4-hero h1 {
        font-size: clamp(3.1rem,15vw,5.2rem);
    }
    .ai1-v4-actions {
        display: grid;
    }
    .ai1-v4-button {
        width: 100%;
    }
    .ai1-v4-stage-card__brands a {
        grid-template-columns: 50px 1fr;
    }
    .ai1-v4-stage-card__brands a::after {
        display: none;
    }
    .ai1-v4-model__grid, .ai1-v4-stats__grid, .ai1-v4-form__grid {
        grid-template-columns: 1fr;
    }
    .ai1-v4-stats article {
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .ai1-v4-stats article:last-child {
        border-bottom: 0;
    }
    .ai1-v4-contact__links a {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }
    .ai1-v4-byte {
        grid-template-columns: 70px 1fr;
    }
    .ai1-v4-byte video {
        width: 70px;
        height: 70px;
    }
}

@media(prefers-reduced-motion:reduce) {
    .ai1-v4-orbit__ring, .ai1-v4-scroll i {
        animation: none;
    }
}

/* ==========================================================================
02. CINEMATIC PARALLAX, BRAND CARDS & MODEL GRAPHICS
========================================================================== */

.ai1-v4 {
    --v4-green-bright: #91ff19;
    --v4-green: #68c900;
}

.ai1-v4 h1, .ai1-v4 h2, .ai1-v4 h3 {
    font-weight: 900;
    letter-spacing: -.055em;
}

.ai1-v4 p {
    font-weight: 500;
}

/* Every major section now behaves as a layered parallax scene. */

.ai1-v4-group, .ai1-v4-brands, .ai1-v4-model, .ai1-v4-contact, .ai1-v4-stats {
    isolation: isolate;
    overflow: hidden;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

.ai1-v4-group {
    background-image: linear-gradient(115deg,rgba(2,8,4,.96),rgba(5,18,10,.83)),url("/templates/ai1group/images/backgrounds/manifesto.jpg");
}

.ai1-v4-brands {
    background-image: linear-gradient(115deg,rgba(239,246,240,.95),rgba(233,243,234,.9)),url("/templates/ai1group/images/backgrounds/brands.jpg");
}

.ai1-v4-model {
    background-image: linear-gradient(115deg,rgba(1,8,4,.94),rgba(5,18,10,.86)),url("/templates/ai1group/images/backgrounds/operating-model.jpg");
}

.ai1-v4-contact {
    background-image: linear-gradient(115deg,rgba(1,6,3,.96),rgba(4,16,9,.88)),url("/templates/ai1group/images/backgrounds/contact.jpg");
}

.ai1-v4-stats {
    background-image: linear-gradient(90deg,rgba(5,18,10,.96),rgba(10,34,18,.9),rgba(5,18,10,.96)),url("/templates/ai1group/images/backgrounds/projects.jpg");
}

/* Brand cards: richer depth, animated circuits and logo-colour light. */

.ai1-v4-brand-card {
    border-radius: 36px;
    transform-style: preserve-3d;
    box-shadow: 0 28px 80px rgba(5,28,13,.13);
}

.ai1-v4-brand-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .42;
    background: linear-gradient(120deg,transparent 0 40%,color-mix(in srgb,var(--card-accent) 13%,transparent) 50%,transparent 60%), radial-gradient(circle at 85% 12%,color-mix(in srgb,var(--card-accent) 24%,transparent),transparent 28%);
    background-size: 220% 100%,100% 100%;
    animation: v5CardSweep 8s linear infinite;
}

.ai1-v4-brand-card:hover {
    transform: translateY(-14px) rotateX(1.5deg);
    box-shadow: 0 42px 100px rgba(5,28,13,.22),0 0 42px color-mix(in srgb,var(--card-accent) 18%,transparent);
}

.ai1-v4-brand-card__visual {
    position: relative;
    overflow: hidden;
    min-height: 270px;
    border: 1px solid color-mix(in srgb,var(--card-accent) 18%,transparent);
}

.ai1-v4-brand-card__visual::before, .ai1-v4-brand-card__visual::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb,var(--card-accent) 30%,transparent);
    animation: v5Orbit 14s linear infinite;
}

.ai1-v4-brand-card__visual::before {
    width: 210px;
    height: 210px;
}

.ai1-v4-brand-card__visual::after {
    width: 150px;
    height: 150px;
    border-style: dashed;
    animation-direction: reverse;
    animation-duration: 10s;
}

.ai1-v4-brand-card__visual img {
    position: relative;
    z-index: 2;
    animation: v5LogoFloat 4.8s ease-in-out infinite;
    filter: drop-shadow(0 20px 26px rgba(0,0,0,.2));
}

.ai1-v4-brand-card__tags span {
    border: 1px solid color-mix(in srgb,var(--card-accent) 14%,transparent);
    transition: .25s ease;
}

.ai1-v4-brand-card:hover .ai1-v4-brand-card__tags span {
    background: color-mix(in srgb,var(--card-accent) 10%,white);
    transform: translateY(-2px);
}

/* Why cards: real animated line graphics rather than tiny symbols. */

.ai1-v4-model__grid {
    gap: 22px;
}

.ai1-v4-model-card {
    min-height: 430px!important;
    padding: 0!important;
    overflow: hidden!important;
    border-radius: 30px!important;
    background: linear-gradient(160deg,rgba(13,31,19,.94),rgba(3,12,7,.97))!important;
}

.ai1-v4-model-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% 5%,rgba(145,255,25,.12),transparent 38%);
    opacity: .7;
}

.ai1-v4-model-card__graphic {
    position: relative;
    display: grid;
    place-items: center;
    height: 190px;
    margin: 0 0 28px;
    overflow: hidden;
    border-bottom: 1px solid rgba(145,255,25,.12);
    background: radial-gradient(circle at center,rgba(145,255,25,.1),transparent 55%), linear-gradient(rgba(145,255,25,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(145,255,25,.045) 1px,transparent 1px);
    background-size: auto,24px 24px,24px 24px;
}

.ai1-v4-model-card__graphic::after {
    content: "";
    position: absolute;
    inset: auto -30% 8px;
    height: 1px;
    background: linear-gradient(90deg,transparent,var(--v4-green-bright),transparent);
    animation: v5Scan 4s linear infinite;
}

.ai1-v4-model-card__graphic svg {
    width: 78%;
    height: 78%;
    overflow: visible;
    fill: rgba(145,255,25,.06);
    stroke: var(--v4-green-bright);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 8px rgba(145,255,25,.38));
}

.ai1-v4-model-card__graphic svg path, .ai1-v4-model-card__graphic svg circle, .ai1-v4-model-card__graphic svg rect {
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 520;
    stroke-dashoffset: 520;
    animation: v5Draw 4.8s ease-in-out infinite alternate;
}

.ai1-v4-model-card small, .ai1-v4-model-card h3, .ai1-v4-model-card>p {
    position: relative;
    z-index: 2;
    margin-left: 30px;
    margin-right: 30px;
}

.ai1-v4-model-card small {
    margin-top: 0!important;
}

.ai1-v4-model-card>p {
    margin-bottom: 32px;
}

.ai1-v4-model-card:hover {
    transform: translateY(-12px) scale(1.015)!important;
    box-shadow: 0 35px 80px rgba(0,0,0,.36),0 0 46px rgba(145,255,25,.08);
}

@keyframes v5CardSweep {
    to {
        background-position: -220% 0,0 0;
    }
}

@keyframes v5Orbit {
    to {
        transform: rotate(360deg);
    }
}

@keyframes v5LogoFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-9px) scale(1.035);
    }
}

@keyframes v5Scan {
    from {
        transform: translateX(-25%);
    }
    to {
        transform: translateX(125%);
    }
}

@keyframes v5Draw {
    45%, 100% {
        stroke-dashoffset: 0;
    }
}

@media(max-width:820px) {
    .ai1-v4-group, .ai1-v4-brands, .ai1-v4-model, .ai1-v4-contact, .ai1-v4-stats {
        background-attachment: scroll;
    }
}

@media(prefers-reduced-motion:reduce) {
    .ai1-v4-brand-card::after, .ai1-v4-brand-card__visual::before, .ai1-v4-brand-card__visual::after, .ai1-v4-brand-card__visual img, .ai1-v4-model-card__graphic::after, .ai1-v4-model-card__graphic svg * {
        animation: none!important;
    }
}

/* ==========================================================================
03. TYPOGRAPHY, KICKERS & CONTACT DETAILS
========================================================================== */

/* A single, consistent heading language across every homepage section. */

.ai1-v4 h1, .ai1-v4 h2, .ai1-v4 h3 {
    font-family: "Nunito Sans",system-ui,sans-serif;
}

.ai1-v4-hero h1 {
    max-width: 920px;
    font-size: clamp(3.7rem,6.7vw,7.25rem);
    line-height: .97;
    font-weight: 500;
    letter-spacing: -.055em;
}

.ai1-v4-hero h1 span {
    font-weight: 500;
}

.ai1-v4 h2, .ai1-v4-heading h2, .ai1-v4-contact__intro h2, .ai1-v4-parallax__content h2 {
    margin: 0;
    font-size: clamp(3rem,5vw,5.15rem);
    line-height: 1.02;
    font-weight: 500;
    letter-spacing: -.045em;
    color: var(--v4-white);
}

/* Keep the brands section dark so its heading can use the exact same system. */

.ai1-v4-brands {
    color: var(--v4-text);
    background-image: linear-gradient(115deg,rgba(2,8,4,.94),rgba(5,18,10,.88)), url("/templates/ai1group/images/backgrounds/brands.jpg");
}

.ai1-v4-brands h2 {
    color: var(--v4-white);
}

.ai1-v4-brands .ai1-v4-heading>p:last-child {
    color: var(--v4-muted);
}

/* Larger, identical kickers throughout. */

.ai1-v4-kicker, .ai1-v4-brand-card__eyebrow, .ai1-v4-model-card__eyebrow {
    font-size: .96rem;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.ai1-v4-kicker {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 22px;
    color: var(--v4-green-bright);
}

.ai1-v4-kicker::before {
    content: "";
    width: 42px;
    height: 2px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: linear-gradient(90deg,var(--v4-green-bright),rgba(156,255,34,.12));
    box-shadow: 0 0 16px rgba(156,255,34,.34);
}

/* Contact details become clean, large typographic links rather than UI boxes. */

.ai1-v4-contact__links {
    display: grid;
    gap: 22px;
    margin-top: 38px;
    padding: 0;
}

.ai1-v4-contact__links a {
    display: grid;
    grid-template-columns: 120px minmax(0,1fr);
    align-items: baseline;
    gap: 24px;
    padding: 0 0 18px;
    border: 0;
    border-bottom: 1px solid rgba(156,255,34,.16);
    border-radius: 0;
    background: transparent;
    text-decoration: none;
    transition: border-color .25s ease,transform .25s ease;
}

.ai1-v4-contact__links a:hover, .ai1-v4-contact__links a:focus-visible {
    transform: translateX(7px);
    border-bottom-color: rgba(156,255,34,.55);
}

.ai1-v4-contact__links small {
    color: var(--v4-green-bright);
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ai1-v4-contact__links strong {
    color: #fff;
    font-size: clamp(1.3rem,2vw,1.85rem);
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -.025em;
}

@media(max-width:820px) {
    .ai1-v4 h2, .ai1-v4-heading h2, .ai1-v4-contact__intro h2, .ai1-v4-parallax__content h2 {
        font-size: clamp(2.65rem,10vw,4.25rem);
    }
}

@media(max-width:600px) {
    .ai1-v4-hero h1 {
        font-size: clamp(3rem,14vw,4.8rem);
        line-height: 1;
    }
    .ai1-v4-kicker {
        font-size: .82rem;
    }
    .ai1-v4-kicker::before {
        width: 30px;
    }
    .ai1-v4-contact__links a {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}

/* ==========================================================================
04. POLISH, CONSISTENCY & SHOWCASE MOTION
========================================================================== */

/* Hero kicker keeps the text but loses the leading streak. */

.ai1-v4-hero .ai1-v4-kicker::before {
    display: none;
}

/* Larger unified kickers: grey type with the luminous green streak. */

.ai1-v4-kicker {
    gap: 18px;
    margin-bottom: 26px;
    color: #aab6ad;
    font-size: clamp(1rem,1.15vw,1.18rem);
    font-weight: 700;
    letter-spacing: .19em;
}

.ai1-v4-kicker::before {
    width: 56px;
    height: 3px;
    background: linear-gradient(90deg,#9cff22 0%,#73d600 58%,rgba(156,255,34,.08) 100%);
    box-shadow: 0 0 12px rgba(156,255,34,.55),0 0 28px rgba(115,214,0,.22);
    animation: ai1-v7-kicker-pulse 3.2s ease-in-out infinite;
}

/* Contact details become quiet, balanced typography with no rules or boxes. */

.ai1-v4-contact__links {
    gap: 18px;
    margin-top: 34px;
}

.ai1-v4-contact__links a {
    grid-template-columns: 120px minmax(0,1fr);
    gap: 24px;
    padding: 0;
    border: 0 !important;
    background: none !important;
    transform: none;
}

.ai1-v4-contact__links a:hover, .ai1-v4-contact__links a:focus-visible {
    transform: translateX(5px);
}

.ai1-v4-contact__links small, .ai1-v4-contact__links strong {
    font-size: 1rem;
    line-height: 1.45;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ai1-v4-contact__links small {
    color: var(--v4-green-bright);
}

.ai1-v4-contact__links strong {
    color: #f5f8f5;
    letter-spacing: .015em;
    text-transform: none;
}

/* Extra motion for the visual showcase, without making it look like a fruit machine. */

.ai1-v4-brand-card, .ai1-v4-model-card, .ai1-v4-stage-card, .ai1-v4-form, .ai1-v4-byte {
    transition: transform .42s cubic-bezier(.2,.75,.2,1), border-color .35s ease, box-shadow .35s ease, background .35s ease;
}

.ai1-v4-brand-card:hover, .ai1-v4-model-card:hover, .ai1-v4-stage-card:hover, .ai1-v4-form:hover, .ai1-v4-byte:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 80px rgba(0,0,0,.38),0 0 36px rgba(115,214,0,.08);
}

.ai1-v4-brand-card img {
    animation: ai1-v7-logo-float 5.5s ease-in-out infinite;
}

.ai1-v4-model-card svg, .ai1-v4-model-card__graphic, .ai1-v4-model-card__icon {
    animation: ai1-v7-graphic-drift 4.8s ease-in-out infinite;
    transform-origin: center;
}

.ai1-v4-model-card:nth-child(even) svg, .ai1-v4-model-card:nth-child(even) .ai1-v4-model-card__graphic, .ai1-v4-model-card:nth-child(even) .ai1-v4-model-card__icon {
    animation-delay: -2.4s;
}

.ai1-v4-button, .ai1-v4-brand-card a, .ai1-v4-contact__links a {
    position: relative;
    overflow: hidden;
}

.ai1-v4-button::after, .ai1-v4-brand-card a::after {
    content: "";
    position: absolute;
    top: -45%;
    bottom: -45%;
    left: -35%;
    width: 22%;
    pointer-events: none;
    background: linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
    transform: skewX(-18deg);
    transition: left .65s ease;
}

.ai1-v4-button:hover::after, .ai1-v4-brand-card a:hover::after {
    left: 125%;
}

@keyframes ai1-v7-kicker-pulse {
    0%, 100% {
        opacity: .72;
        transform: scaleX(.88);
        transform-origin: left;
    }
    50% {
        opacity: 1;
        transform: scaleX(1);
    }
}

@keyframes ai1-v7-logo-float {
    0%, 100% {
        transform: translateY(0) rotate(0);
    }
    50% {
        transform: translateY(-8px) rotate(-1deg);
    }
}

@keyframes ai1-v7-graphic-drift {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-6px) scale(1.025);
    }
}

@media(max-width:600px) {
    .ai1-v4-kicker {
        gap: 12px;
        font-size: .9rem;
        letter-spacing: .15em;
    }
    .ai1-v4-kicker::before {
        width: 38px;
    }
    .ai1-v4-contact__links a {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    .ai1-v4-contact__links small, .ai1-v4-contact__links strong {
        font-size: .92rem;
    }
}

/* The hero kicker now uses exactly the same treatment as every other section. */

.ai1-v4-hero .ai1-v4-kicker::before {
    display: block;
}

/* One definitive kicker system across the homepage. */

.ai1-v4-kicker {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    margin: 0 0 26px;
    color: #aab6ad;
    font-family: "Comfortaa",system-ui,sans-serif;
    font-size: clamp(1rem,1.15vw,1.18rem);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.ai1-v4-kicker::before {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: linear-gradient(90deg,#9cff22 0%,#73d600 58%,rgba(156,255,34,.08) 100%);
    box-shadow: 0 0 12px rgba(156,255,34,.55),0 0 28px rgba(115,214,0,.22);
    animation: ai1-v8-kicker-pulse 2.35s ease-in-out infinite;
}

/* Faster looping graphics in Why AI1Group. */

.ai1-v4-model-card svg, .ai1-v4-model-card__graphic, .ai1-v4-model-card__icon {
    animation-duration: 2.4s !important;
}

.ai1-v4-model-card:nth-child(2) svg, .ai1-v4-model-card:nth-child(2) .ai1-v4-model-card__graphic, .ai1-v4-model-card:nth-child(2) .ai1-v4-model-card__icon {
    animation-delay: -.6s !important;
}

.ai1-v4-model-card:nth-child(3) svg, .ai1-v4-model-card:nth-child(3) .ai1-v4-model-card__graphic, .ai1-v4-model-card:nth-child(3) .ai1-v4-model-card__icon {
    animation-delay: -1.2s !important;
}

.ai1-v4-model-card:nth-child(4) svg, .ai1-v4-model-card:nth-child(4) .ai1-v4-model-card__graphic, .ai1-v4-model-card:nth-child(4) .ai1-v4-model-card__icon {
    animation-delay: -1.8s !important;
}

.ai1-v4-model-card svg path, .ai1-v4-model-card svg circle, .ai1-v4-model-card svg line, .ai1-v4-model-card svg polyline {
    animation-duration: 2.6s !important;
}

/* Reveal timing is controlled centrally by template.css. */

@keyframes ai1-v8-kicker-pulse {
    0%, 100% {
        opacity: .68;
        transform: scaleX(.86);
        transform-origin: left;
    }
    50% {
        opacity: 1;
        transform: scaleX(1);
    }
}

@media(max-width:600px) {
    .ai1-v4-kicker {
        gap: 12px;
        font-size: .9rem;
        letter-spacing: .13em;
    }
    .ai1-v4-kicker::before {
        width: 38px;
    }
}

/* ==========================================================================
05. HERO, GROUP, APPROACH, BRAND & FOOTER ENHANCEMENTS
========================================================================== */

.ai1-v4 > section:not(.ai1-v4-hero) {
    position: relative;
}

/* A genuinely useful hero command card. */

.ai1-v4-stage-card {
    overflow: visible;
    background: linear-gradient(145deg,rgba(5,18,9,.94),rgba(1,7,4,.9));
    box-shadow: 0 34px 90px rgba(0,0,0,.55),0 0 70px rgba(126,255,0,.1);
}

.ai1-v4-stage-card::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(120deg,rgba(145,255,25,.55),transparent 28%,transparent 70%,rgba(213,179,106,.35));
    -webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.ai1-v4-stage-card__core {
    display: grid!important;
    grid-template-columns: 118px 1fr!important;
    align-items: center!important;
    gap: 1.4rem!important;
    text-align: left!important;
    padding: 1.4rem!important;
}

.ai1-v9-stage-emblem {
    position: relative;
    width: 112px;
    height: 112px;
    display: grid;
    place-items: center;
}

.ai1-v9-stage-emblem img {
    position: relative;
    z-index: 2;
    width: 88px!important;
    filter: drop-shadow(0 14px 20px rgba(0,0,0,.48));
    animation: ai1-v9-logo-float 4s ease-in-out infinite;
}

.ai1-v9-stage-emblem__ring {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(145,255,25,.32);
    border-radius: 50%;
    box-shadow: inset 0 0 28px rgba(145,255,25,.06),0 0 22px rgba(145,255,25,.08);
    animation: ai1-v9-spin 10s linear infinite;
}

.ai1-v9-stage-emblem__ring::before, .ai1-v9-stage-emblem__ring::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #91ff19;
    box-shadow: 0 0 13px currentColor;
}

.ai1-v9-stage-emblem__ring::before {
    top: 8%;
    left: 24%;
}

.ai1-v9-stage-emblem__ring::after {
    right: 5%;
    bottom: 28%;
    background: #d7b36a;
}

.ai1-v4-stage-card__core p {
    margin: 0 0 .35rem!important;
}

.ai1-v4-stage-card__core strong {
    font-size: clamp(1rem,1.5vw,1.24rem);
    line-height: 1.45;
    color: #fff;
}

.ai1-v9-stage-metrics {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px;
    padding: 0 1.2rem 1.2rem;
}

.ai1-v9-stage-metrics span {
    padding: 1rem .75rem;
    border: 1px solid rgba(145,255,25,.11);
    border-radius: 16px;
    background: rgba(255,255,255,.025);
    text-align: center;
}

.ai1-v9-stage-metrics b {
    display: block;
    color: #91ff19;
    font-size: 1.35rem;
}

.ai1-v9-stage-metrics small {
    display: block;
    margin-top: .25rem;
    color: rgba(255,255,255,.55);
    font-size: .66rem;
    line-height: 1.3;
}

.ai1-v4-stage-card__brands a img {
    width: 64px!important;
    height: 64px!important;
    object-fit: contain;
    transition: transform .35s ease,filter .35s ease;
}

.ai1-v4-stage-card__brands a:hover img {
    transform: scale(1.14) rotate(-4deg);
    filter: drop-shadow(0 0 18px rgba(145,255,25,.28));
}

@keyframes ai1-v9-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes ai1-v9-logo-float {
    50% {
        transform: translateY(-7px);
    }
}

/* Beefed-up group story. */

.ai1-v9-group-panel {
    position: relative;
    padding: clamp(1.6rem,4vw,2.6rem);
    border: 1px solid rgba(145,255,25,.14);
    border-radius: 28px;
    background: linear-gradient(145deg,rgba(8,23,13,.78),rgba(2,9,5,.68));
    box-shadow: 0 24px 70px rgba(0,0,0,.28);
    overflow: hidden;
}

.ai1-v9-group-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 85% 10%,rgba(145,255,25,.1),transparent 32%);
    pointer-events: none;
}

.ai1-v9-group-flow {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: .8rem;
    margin-top: 2rem;
}

.ai1-v9-group-flow span {
    padding: 1rem;
    border: 1px solid rgba(145,255,25,.12);
    border-radius: 18px;
    background: rgba(0,0,0,.22);
    text-align: center;
    transition: .3s ease;
}

.ai1-v9-group-flow span:hover {
    transform: translateY(-5px);
    border-color: rgba(145,255,25,.4);
    box-shadow: 0 16px 34px rgba(0,0,0,.25),0 0 22px rgba(145,255,25,.08);
}

.ai1-v9-group-flow b, .ai1-v9-group-flow small {
    display: block;
}

.ai1-v9-group-flow b {
    color: #fff;
}

.ai1-v9-group-flow small {
    margin-top: .25rem;
    color: rgba(255,255,255,.5);
}

.ai1-v9-group-flow i {
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg,transparent,#91ff19);
    position: relative;
    animation: ai1-v9-flow 1.8s ease-in-out infinite;
}

.ai1-v9-group-flow i::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #91ff19;
    box-shadow: 0 0 12px #91ff19;
    transform: translateY(-50%);
}

@keyframes ai1-v9-flow {
    50% {
        filter: brightness(1.8);
        transform: scaleX(1.12);
    }
}

/* More substantial approach section. */

.ai1-v9-approach {
    display: grid!important;
    grid-template-columns: minmax(0,.9fr) minmax(420px,1.1fr)!important;
    gap: clamp(3rem,7vw,7rem)!important;
    align-items: center!important;
}

.ai1-v9-approach__steps {
    display: grid;
    gap: 14px;
}

.ai1-v9-approach__steps article {
    position: relative;
    padding: 1.25rem 1.35rem 1.25rem 5.8rem;
    border: 1px solid rgba(145,255,25,.16);
    border-radius: 20px;
    background: rgba(1,8,4,.68);
    backdrop-filter: blur(10px);
    transition: .35s ease;
    overflow: hidden;
}

.ai1-v9-approach__steps article::before {
    content: "";
    position: absolute;
    left: 1.25rem;
    top: 50%;
    width: 3.35rem;
    height: 3.35rem;
    border-radius: 50%;
    transform: translateY(-50%);
    border: 1px solid rgba(145,255,25,.34);
    background: radial-gradient(circle,rgba(145,255,25,.16),transparent 66%);
    box-shadow: 0 0 24px rgba(145,255,25,.08);
    animation: ai1-v9-pulse 2.2s ease-in-out infinite;
}

.ai1-v9-approach__steps article::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 -25%;
    width: 18%;
    background: linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
    transform: skewX(-18deg);
    animation: ai1-v9-sweep 4.8s ease-in-out infinite;
}

.ai1-v9-approach__steps article:nth-child(2)::before, .ai1-v9-approach__steps article:nth-child(2)::after {
    animation-delay: .55s;
}

.ai1-v9-approach__steps article:nth-child(3)::before, .ai1-v9-approach__steps article:nth-child(3)::after {
    animation-delay: 1.1s;
}

.ai1-v9-approach__steps article:hover {
    transform: translateX(-8px);
    border-color: rgba(145,255,25,.42);
    box-shadow: 0 18px 50px rgba(0,0,0,.34);
}

.ai1-v9-approach__steps span {
    color: #91ff19;
    font-weight: 700;
}

.ai1-v9-approach__steps p {
    margin: .35rem 0 0!important;
    color: rgba(255,255,255,.68)!important;
    font-size: .9rem!important;
}

@keyframes ai1-v9-pulse {
    50% {
        transform: translateY(-50%) scale(1.12);
        box-shadow: 0 0 34px rgba(145,255,25,.2);
    }
}

@keyframes ai1-v9-sweep {
    0%, 60% {
        left: -25%;
        opacity: 0;
    }
    72% {
        opacity: 1;
    }
    100% {
        left: 120%;
        opacity: 0;
    }
}

/* Brand cards with more visual punch. */

.ai1-v4-brand-card {
    transform-style: preserve-3d;
    box-shadow: 0 24px 70px rgba(0,0,0,.32);
    transition: transform .42s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease,border-color .4s ease;
}

.ai1-v4-brand-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(125deg,transparent 15%,color-mix(in srgb,var(--card-accent) 11%,transparent) 47%,transparent 72%);
    transform: translateX(-110%);
    transition: transform .8s ease;
}

.ai1-v4-brand-card:hover {
    transform: translateY(-14px) scale(1.018);
    box-shadow: 0 38px 95px rgba(0,0,0,.46),0 0 46px color-mix(in srgb,var(--card-accent) 14%,transparent);
    border-color: color-mix(in srgb,var(--card-accent) 48%,transparent);
}

.ai1-v4-brand-card:hover::before {
    transform: translateX(110%);
}

.ai1-v4-brand-card__visual {
    background: radial-gradient(circle at 50% 48%,color-mix(in srgb,var(--card-accent) 16%,transparent),transparent 46%),rgba(0,0,0,.18);
}

.ai1-v4-brand-card__visual img {
    width: min(68%,250px)!important;
    filter: drop-shadow(0 24px 28px rgba(0,0,0,.46)) drop-shadow(0 0 18px color-mix(in srgb,var(--card-accent) 12%,transparent))!important;
}

.ai1-v4-brand-card:hover .ai1-v4-brand-card__visual img {
    transform: translateY(-8px) scale(1.09) rotate(-2deg);
}

/* Bigger Byte and a proper speech bubble. */

.ai1-v4-byte {
    display: grid!important;
    grid-template-columns: 140px 1fr!important;
    gap: 1.4rem!important;
    align-items: center!important;
    padding: 0!important;
    border: 0!important;
    background: transparent!important;
    overflow: visible!important;
}

.ai1-v4-byte__avatar {
    position: relative;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    padding: 7px;
    background: linear-gradient(145deg,rgba(145,255,25,.28),rgba(255,255,255,.04));
    box-shadow: 0 0 42px rgba(145,255,25,.14);
}

.ai1-v4-byte__avatar::before {
    content: "";
    position: absolute;
    inset: -9px;
    border: 1px dashed rgba(145,255,25,.28);
    border-radius: 50%;
    animation: ai1-v9-spin 14s linear infinite;
}

.ai1-v4-byte__avatar video {
    width: 100%!important;
    height: 100%!important;
    border-radius: 50%!important;
    object-fit: cover!important;
}

.ai1-v4-byte__bubble {
    position: relative;
    padding: 1.45rem 1.6rem;
    border: 1px solid rgba(145,255,25,.2);
    border-radius: 24px;
    background: linear-gradient(145deg,rgba(8,22,12,.92),rgba(2,8,4,.9));
    box-shadow: 0 22px 60px rgba(0,0,0,.3);
}

.ai1-v4-byte__bubble::before {
    content: "";
    position: absolute;
    left: -13px;
    top: 50%;
    width: 24px;
    height: 24px;
    background: #07150b;
    border-left: 1px solid rgba(145,255,25,.2);
    border-bottom: 1px solid rgba(145,255,25,.2);
    transform: translateY(-50%) rotate(45deg);
}

.ai1-v4-byte__bubble strong {
    color: #91ff19;
    letter-spacing: .13em;
}

.ai1-v4-byte__bubble p {
    margin: .55rem 0 0!important;
    font-size: 1rem!important;
    line-height: 1.7!important;
}

@media(max-width:900px) {
    .ai1-v9-approach {
        grid-template-columns: 1fr!important;
    }
    .ai1-v4-stage-card__core {
        grid-template-columns: 92px 1fr!important;
    }
    .ai1-v9-stage-emblem {
        width: 90px;
        height: 90px;
    }
    .ai1-v9-stage-emblem img {
        width: 72px!important;
    }
}

@media(max-width:680px) {
    .ai1-v9-stage-metrics {
        grid-template-columns: 1fr;
    }
    .ai1-v9-group-flow {
        grid-template-columns: 1fr;
    }
    .ai1-v9-group-flow i {
        width: 2px;
        height: 26px;
        margin: auto;
        background: linear-gradient(180deg,transparent,#91ff19);
    }
    .ai1-v4-byte {
        grid-template-columns: 1fr!important;
    }
    .ai1-v4-byte__avatar {
        width: 120px;
        height: 120px;
    }
    .ai1-v4-byte__bubble::before {
        left: 42px;
        top: -13px;
        transform: rotate(135deg);
    }
}

/* ==========================================================================
06. HERO GRAPH, TRAFFIC-LIGHT SEQUENCES & CARD DEPTH
========================================================================== */

/* Hero card: larger logos and a complete, thicker illuminated border. */

.ai1-v4-stage-card {
    border: 3px solid rgba(145,255,25,.48)!important;
    border-radius: 36px!important;
    box-shadow: 0 38px 100px rgba(0,0,0,.62), 0 0 0 1px rgba(240,213,154,.16), 0 0 70px rgba(145,255,25,.12), inset 0 0 46px rgba(145,255,25,.035)!important;
}

.ai1-v4-stage-card::after {
    inset: -3px!important;
    padding: 3px!important;
    background: conic-gradient(from var(--ai1-v10-border-angle,0deg),#91ff19,#f0d59a,#2e63d5,#5cf2bd,#91ff19)!important;
    animation: ai1-v10-border-spin 7s linear infinite!important;
    opacity: .75;
}

@property --ai1-v10-border-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

@keyframes ai1-v10-border-spin {
    to {
        --ai1-v10-border-angle: 360deg;
    }
}

.ai1-v4-stage-card__brands a {
    grid-template-columns: 78px 1fr auto!important;
    min-height: 88px;
    padding: 12px 20px!important;
}

.ai1-v4-stage-card__brands a img {
    width: 74px!important;
    height: 74px!important;
}

/* AI1Host-style animated graph inside the hero command card. */

.ai1-v10-stage-graph {
    margin: 0 1.2rem 1.2rem;
    padding: 1rem 1rem .7rem;
    overflow: hidden;
    border: 1px solid rgba(145,255,25,.18);
    border-radius: 18px;
    background: radial-gradient(circle at 82% 0,rgba(145,255,25,.12),transparent 38%), rgba(0,0,0,.22);
    box-shadow: inset 0 1px rgba(255,255,255,.035);
}

.ai1-v10-stage-graph__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .35rem;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .14em;
    color: rgba(255,255,255,.55);
}

.ai1-v10-stage-graph__head b {
    color: #91ff19;
}

.ai1-v10-stage-graph svg {
    width: 100%;
    height: 106px;
    overflow: visible;
}

.ai1-v10-stage-graph__grid line {
    stroke: rgba(255,255,255,.07);
    stroke-width: 1;
}

.ai1-v10-stage-graph__area {
    fill: url(#ai1-v10-graph-fill);
    opacity: 0;
    animation: ai1-v10-area-in 2.8s ease-in-out infinite alternate;
}

.ai1-v10-stage-graph__line {
    fill: none;
    stroke: url(#ai1-v10-graph-line);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 650;
    stroke-dashoffset: 650;
    filter: drop-shadow(0 0 8px rgba(145,255,25,.45));
    animation: ai1-v10-graph-draw 3.2s cubic-bezier(.2,.8,.2,1) infinite;
}

.ai1-v10-stage-graph__node {
    fill: #91ff19;
    stroke: #071007;
    stroke-width: 3;
    opacity: 0;
    filter: drop-shadow(0 0 8px #91ff19);
    animation: ai1-v10-node-pop 3.2s ease-in-out infinite;
}

.ai1-v10-stage-graph__node--one {
    animation-delay: .45s;
}

.ai1-v10-stage-graph__node--two {
    animation-delay: .9s;
}

.ai1-v10-stage-graph__node--three {
    animation-delay: 1.35s;
}

.ai1-v10-stage-graph__node--four {
    animation-delay: 1.8s;
}

@keyframes ai1-v10-graph-draw {
    0% {
        stroke-dashoffset: 650;
    }
    55%, 88% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: -650;
    }
}

@keyframes ai1-v10-area-in {
    0%, 18% {
        opacity: 0;
    }
    65%, 100% {
        opacity: 1;
    }
}

@keyframes ai1-v10-node-pop {
    0%, 15%, 100% {
        opacity: 0;
        transform: scale(.45);
        transform-origin: center;
    }
    35%, 80% {
        opacity: 1;
        transform: scale(1);
    }
}

/* The Group: three stages behave like a green traffic-light sequence. */

.ai1-v9-group-flow span {
    position: relative;
    isolation: isolate;
    min-height: 92px;
    display: grid;
    place-content: center;
    overflow: hidden;
    border-width: 2px!important;
    box-shadow: 0 16px 38px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.035);
    animation: ai1-v10-traffic-card 4.5s ease-in-out infinite;
}

.ai1-v9-group-flow span::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(circle at 50% 0,rgba(145,255,25,.32),transparent 58%);
    opacity: 0;
    animation: ai1-v10-traffic-glow 4.5s ease-in-out infinite;
}

.ai1-v9-group-flow span:nth-of-type(2), .ai1-v9-group-flow span:nth-of-type(2)::before {
    animation-delay: 1.5s;
}

.ai1-v9-group-flow span:nth-of-type(3), .ai1-v9-group-flow span:nth-of-type(3)::before {
    animation-delay: 3s;
}

@keyframes ai1-v10-traffic-card {
    0%, 24%, 100% {
        transform: translateY(0);
        border-color: rgba(145,255,25,.13);
        box-shadow: 0 16px 38px rgba(0,0,0,.28);
    }
    35%, 58% {
        transform: translateY(-8px) scale(1.035);
        border-color: rgba(145,255,25,.72);
        box-shadow: 0 24px 52px rgba(0,0,0,.36),0 0 32px rgba(145,255,25,.22);
    }
}

@keyframes ai1-v10-traffic-glow {
    0%, 24%, 100% {
        opacity: 0;
    }
    35%, 58% {
        opacity: 1;
    }
}

/* More room and richer storytelling below the brand cards. */

.ai1-v10-brands-summary {
    position: relative;
    max-width: 1040px;
    margin: clamp(2.5rem,5vw,4.5rem) auto 0;
    padding: clamp(1.5rem,3vw,2.2rem);
    border: 1px solid rgba(145,255,25,.2);
    border-radius: 26px;
    background: linear-gradient(140deg,rgba(145,255,25,.07),rgba(255,255,255,.025));
    box-shadow: 0 24px 60px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.04);
    text-align: center;
    overflow: hidden;
}

.ai1-v10-brands-summary::before {
    content: "";
    position: absolute;
    inset: -120% -30%;
    background: conic-gradient(from 180deg,transparent,rgba(145,255,25,.12),transparent 28%);
    animation: ai1-v10-summary-orbit 9s linear infinite;
    pointer-events: none;
}

.ai1-v10-brands-summary p {
    position: relative;
    margin: 0;
    color: rgba(255,255,255,.72);
    font-size: clamp(1rem,1.4vw,1.18rem);
    line-height: 1.8;
}

.ai1-v10-brands-summary strong {
    color: #fff;
}

.ai1-v10-brands-summary__signals {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px 18px;
    margin-top: 1.4rem;
    color: #91ff19;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ai1-v10-brands-summary__signals i {
    width: 34px;
    height: 1px;
    background: linear-gradient(90deg,transparent,#91ff19,transparent);
    animation: ai1-v10-signal-pulse 1.5s ease-in-out infinite;
}

@keyframes ai1-v10-summary-orbit {
    to {
        transform: rotate(360deg);
    }
}

@keyframes ai1-v10-signal-pulse {
    50% {
        transform: scaleX(1.45);
        filter: brightness(1.5);
    }
}

/* Brand cards: more lift, stronger framing, animated internal energy. */

.ai1-v4-brand-card {
    border: 2px solid color-mix(in srgb,var(--card-accent) 28%,transparent)!important;
    box-shadow: 0 30px 90px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.025)!important;
}

.ai1-v4-brand-card::after {
    opacity: .72!important;
    animation-duration: 4.8s!important;
}

.ai1-v4-brand-card__visual {
    min-height: 300px!important;
    box-shadow: inset 0 0 45px color-mix(in srgb,var(--card-accent) 8%,transparent);
}

.ai1-v4-brand-card:hover {
    transform: translateY(-18px) scale(1.028) rotateX(1.2deg)!important;
    box-shadow: 0 48px 110px rgba(0,0,0,.5),0 0 60px color-mix(in srgb,var(--card-accent) 24%,transparent)!important;
}

.ai1-v4-brand-card h3 {
    font-size: clamp(2rem,2.5vw,2.6rem)!important;
}

.ai1-v4-brand-card__body>p:not(.ai1-v4-brand-card__eyebrow) {
    font-size: 1rem;
    line-height: 1.75;
}

/* Our Approach: each globe now runs a sequential traffic-light cycle. */

.ai1-v9-approach__steps article {
    min-height: 112px;
    border-width: 2px!important;
    box-shadow: 0 18px 45px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.035);
    animation: ai1-v10-approach-card 4.5s ease-in-out infinite;
}

.ai1-v9-approach__steps article::before {
    width: 3.8rem!important;
    height: 3.8rem!important;
    background: radial-gradient(circle,#91ff19 0 14%,rgba(145,255,25,.28) 16%,rgba(145,255,25,.08) 50%,transparent 68%)!important;
    animation: ai1-v10-approach-light 4.5s ease-in-out infinite!important;
}

.ai1-v9-approach__steps article:nth-child(2), .ai1-v9-approach__steps article:nth-child(2)::before {
    animation-delay: 1.5s!important;
}

.ai1-v9-approach__steps article:nth-child(3), .ai1-v9-approach__steps article:nth-child(3)::before {
    animation-delay: 3s!important;
}

@keyframes ai1-v10-approach-card {
    0%, 24%, 100% {
        transform: translateX(0);
        border-color: rgba(145,255,25,.15);
        box-shadow: 0 18px 45px rgba(0,0,0,.3);
    }
    35%, 58% {
        transform: translateX(-10px) scale(1.018);
        border-color: rgba(145,255,25,.68);
        box-shadow: 0 28px 60px rgba(0,0,0,.4),0 0 34px rgba(145,255,25,.18);
    }
}

@keyframes ai1-v10-approach-light {
    0%, 24%, 100% {
        filter: brightness(.42);
        box-shadow: 0 0 10px rgba(145,255,25,.04);
    }
    35%, 58% {
        filter: brightness(1.6);
        box-shadow: 0 0 38px rgba(145,255,25,.48),0 0 70px rgba(145,255,25,.18);
    }
}

@media(max-width:680px) {
    .ai1-v4-stage-card__brands a {
        grid-template-columns: 68px 1fr!important;
    }
    .ai1-v4-stage-card__brands a img {
        width: 64px!important;
        height: 64px!important;
    }
    .ai1-v10-brands-summary__signals i {
        display: none;
    }
}

@media(prefers-reduced-motion:reduce) {
    .ai1-v4-stage-card::after, .ai1-v10-stage-graph__area, .ai1-v10-stage-graph__line, .ai1-v10-stage-graph__node, .ai1-v9-group-flow span, .ai1-v9-group-flow span::before, .ai1-v10-brands-summary::before, .ai1-v10-brands-summary__signals i, .ai1-v9-approach__steps article, .ai1-v9-approach__steps article::before {
        animation: none!important;
    }
}

/* ==========================================================================
07. EXPANDED BRAND STORY & SHOWCASE INTERACTIONS
========================================================================== */

.ai1-v11-brand-depth {
    margin-top: clamp(64px,8vw,110px);
}

.ai1-v11-brand-depth__intro {
    display: grid;
    grid-template-columns: minmax(0,.8fr) minmax(360px,1.2fr);
    gap: clamp(32px,6vw,90px);
    align-items: end;
    margin-bottom: clamp(34px,5vw,64px);
}

.ai1-v11-brand-depth__intro .ai1-v4-kicker {
    grid-column: 1/-1;
    margin-bottom: -10px;
}

.ai1-v11-brand-depth__intro h3 {
    margin: 0;
    color: #0d2417;
    font-size: clamp(2rem,3.5vw,4rem);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -.035em;
}

.ai1-v11-brand-depth__intro>p:last-child {
    margin: 0;
    color: #5f7165;
    font-size: clamp(1rem,1.25vw,1.16rem);
    line-height: 1.85;
}

.ai1-v11-capability-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 24px;
}

.ai1-v11-capability {
    --cap-accent: #73d600;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(26px,3vw,38px);
    border: 2px solid color-mix(in srgb,var(--cap-accent) 24%,#dfe8e1);
    border-radius: 34px;
    background: linear-gradient(155deg,rgba(255,255,255,.98),rgba(242,248,243,.92));
    box-shadow: 0 24px 70px rgba(10,37,19,.12);
    transition: transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease,border-color .45s ease;
}

.ai1-v11-capability--design {
    --cap-accent: #7ee600;
}

.ai1-v11-capability--security {
    --cap-accent: #3f6fdf;
}

.ai1-v11-capability::before {
    content: "";
    position: absolute;
    inset: -45% -25% auto;
    height: 65%;
    z-index: -1;
    background: radial-gradient(circle,color-mix(in srgb,var(--cap-accent) 20%,transparent),transparent 68%);
    transition: transform .6s ease;
}

.ai1-v11-capability::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .38;
    background-image: linear-gradient(color-mix(in srgb,var(--cap-accent) 8%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--cap-accent) 8%,transparent) 1px,transparent 1px);
    background-size: 30px 30px;
    mask-image: linear-gradient(#000,transparent 72%);
}

.ai1-v11-capability:hover {
    transform: translateY(-14px) scale(1.012);
    border-color: color-mix(in srgb,var(--cap-accent) 62%,#fff);
    box-shadow: 0 42px 100px rgba(10,37,19,.2),0 0 50px color-mix(in srgb,var(--cap-accent) 20%,transparent);
}

.ai1-v11-capability:hover::before {
    transform: translateY(30px) scale(1.12);
}

.ai1-v11-capability__signal {
    display: flex;
    gap: 7px;
    margin-bottom: 26px;
}

.ai1-v11-capability__signal i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: color-mix(in srgb,var(--cap-accent) 24%,#d6dfd8);
    animation: ai1-v11-signal 1.8s ease-in-out infinite;
}

.ai1-v11-capability__signal i:nth-child(2) {
    animation-delay: .18s;
}

.ai1-v11-capability__signal i:nth-child(3) {
    animation-delay: .36s;
}

.ai1-v11-capability__signal i:nth-child(4) {
    animation-delay: .54s;
}

.ai1-v11-capability__heading {
    display: grid;
    grid-template-columns: 74px 1fr;
    gap: 18px;
    align-items: center;
}

.ai1-v11-capability__heading img {
    width: 74px;
    filter: drop-shadow(0 12px 18px rgba(0,0,0,.2));
    animation: ai1-v11-logo-breathe 4s ease-in-out infinite;
}

.ai1-v11-capability__heading small {
    color: var(--cap-accent);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .13em;
}

.ai1-v11-capability h4 {
    margin: 7px 0 0;
    color: #102419;
    font-size: clamp(1.25rem,1.6vw,1.6rem);
    font-weight: 600;
    line-height: 1.25;
}

.ai1-v11-capability>p {
    margin: 24px 0 0;
    color: #607166;
}

.ai1-v11-capability ul {
    display: grid;
    gap: 11px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.ai1-v11-capability li {
    position: relative;
    padding-left: 20px;
    color: #31463a;
    font-size: .91rem;
    line-height: 1.55;
}

.ai1-v11-capability li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cap-accent);
    box-shadow: 0 0 12px color-mix(in srgb,var(--cap-accent) 55%,transparent);
}

.ai1-v11-capability__outcome {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid color-mix(in srgb,var(--cap-accent) 18%,#d9e4dc);
}

.ai1-v11-capability__outcome span {
    display: block;
    color: #718177;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ai1-v11-capability__outcome strong {
    display: block;
    margin-top: 7px;
    color: #102419;
    font-size: .92rem;
    line-height: 1.55;
}

.ai1-v11-connected-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(390px,.8fr);
    gap: clamp(34px,6vw,90px);
    align-items: center;
    margin-top: 28px;
    padding: clamp(34px,5vw,70px);
    border: 2px solid rgba(145,255,25,.28);
    border-radius: 40px;
    background: radial-gradient(circle at 78% 45%,rgba(63,111,223,.14),transparent 30%),radial-gradient(circle at 18% 15%,rgba(145,255,25,.13),transparent 34%),linear-gradient(145deg,#07140c,#020805);
    box-shadow: 0 34px 100px rgba(0,0,0,.32);
}

.ai1-v11-connected-card::before {
    content: "";
    position: absolute;
    inset: -2px;
    z-index: -2;
    border-radius: inherit;
    background: conic-gradient(from var(--v11-angle,0deg),transparent 12%,#91ff19 24%,#f0d59a 35%,transparent 48%,#3f6fdf 66%,transparent 80%);
    animation: ai1-v11-border-spin 8s linear infinite;
}

.ai1-v11-connected-card::after {
    content: "";
    position: absolute;
    inset: 2px;
    z-index: -1;
    border-radius: 38px;
    background: linear-gradient(145deg,#07140c,#020805);
}

.ai1-v11-connected-card__copy {
    position: relative;
    z-index: 2;
}

.ai1-v11-connected-card h3 {
    margin: 0;
    color: #fff;
    font-size: clamp(2rem,4vw,4.6rem);
    font-weight: 500;
    line-height: 1.05;
}

.ai1-v11-connected-card__copy>p:not(.ai1-v4-kicker) {
    color: rgba(255,255,255,.68);
    font-size: clamp(1rem,1.2vw,1.15rem);
}

.ai1-v11-connected-card__benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}

.ai1-v11-connected-card__benefits span {
    padding: 10px 14px;
    border: 1px solid rgba(145,255,25,.2);
    border-radius: 999px;
    background: rgba(145,255,25,.065);
    color: #dfffc7;
    font-size: .78rem;
    font-weight: 700;
    transition: .25s;
}

.ai1-v11-connected-card__benefits span:hover {
    transform: translateY(-3px);
    background: rgba(145,255,25,.13);
    box-shadow: 0 10px 24px rgba(145,255,25,.08);
}

.ai1-v11-network {
    position: relative;
    min-height: 360px;
}

.ai1-v11-network svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.ai1-v11-network__route {
    fill: none;
    stroke: rgba(145,255,25,.22);
    stroke-width: 2;
    stroke-dasharray: 7 10;
    animation: ai1-v11-route 3s linear infinite;
}

.ai1-v11-network__route--two {
    stroke: rgba(63,111,223,.35);
    animation-direction: reverse;
}

.ai1-v11-network__route--three {
    stroke: rgba(240,213,154,.3);
}

.ai1-v11-network__pulse {
    fill: none;
    stroke: rgba(145,255,25,.22);
    stroke-width: 2;
    transform-origin: 260px 180px;
    animation: ai1-v11-pulse 2.4s ease-out infinite;
}

.ai1-v11-network__pulse--two {
    animation-delay: 1.2s;
}

.ai1-v11-network__hub circle {
    fill: #0c1c11;
    stroke: #91ff19;
    stroke-width: 2;
}

.ai1-v11-network__hub text, .ai1-v11-network__node text {
    fill: #fff;
    text-anchor: middle;
    font-size: 13px;
    font-weight: 700;
}

.ai1-v11-network__node circle {
    fill: #08120c;
    stroke: rgba(255,255,255,.22);
    stroke-width: 2;
}

.ai1-v11-network__node text {
    font-size: 9px;
}

.ai1-v11-network__packet {
    fill: #91ff19;
    filter: drop-shadow(0 0 7px #91ff19);
}

.ai1-v11-network__packet--two {
    fill: #5f87ef;
    filter: drop-shadow(0 0 7px #5f87ef);
}

.ai1-v11-network__packet--three {
    fill: #f0d59a;
    filter: drop-shadow(0 0 7px #f0d59a);
}

.ai1-v11-network__status {
    position: absolute;
    left: 50%;
    bottom: 12px;
    display: flex;
    align-items: center;
    gap: 9px;
    transform: translateX(-50%);
    color: rgba(255,255,255,.58);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .13em;
    white-space: nowrap;
}

.ai1-v11-network__status i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #91ff19;
    box-shadow: 0 0 14px #91ff19;
    animation: ai1-v11-status 1.2s ease-in-out infinite;
}

[data-ai1-spotlight] {
    --spot-x: 50%;
    --spot-y: 50%;
}

[data-ai1-spotlight]>.ai1-v11-spotlight {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(360px circle at var(--spot-x) var(--spot-y),rgba(145,255,25,.12),transparent 64%);
    transition: opacity .25s;
}

[data-ai1-spotlight].is-spotlit>.ai1-v11-spotlight {
    opacity: 1;
}

@keyframes ai1-v11-signal {
    0%, 100% {
        transform: scale(.75);
        opacity: .35;
    }
    50% {
        transform: scale(1.35);
        opacity: 1;
        background: var(--cap-accent);
    }
}

@keyframes ai1-v11-logo-breathe {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-5px) scale(1.04);
    }
}

@keyframes ai1-v11-route {
    to {
        stroke-dashoffset: -34;
    }
}

@keyframes ai1-v11-pulse {
    0% {
        opacity: .8;
        transform: scale(.55);
    }
    100% {
        opacity: 0;
        transform: scale(1.45);
    }
}

@keyframes ai1-v11-status {
    0%, 100% {
        opacity: .35;
        transform: scale(.8);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

@property --v11-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes ai1-v11-border-spin {
    to {
        --v11-angle: 360deg;
    }
}

@media(max-width:1050px) {
    .ai1-v11-capability-grid {
        grid-template-columns: 1fr;
    }
    .ai1-v11-connected-card {
        grid-template-columns: 1fr;
    }
    .ai1-v11-network {
        min-height: 320px;
    }
    .ai1-v11-brand-depth__intro {
        grid-template-columns: 1fr;
    }
}

@media(max-width:680px) {
    .ai1-v11-capability {
        border-radius: 26px;
    }
    .ai1-v11-capability__heading {
        grid-template-columns: 58px 1fr;
    }
    .ai1-v11-capability__heading img {
        width: 58px;
    }
    .ai1-v11-connected-card {
        padding: 28px 20px;
        border-radius: 28px;
    }
    .ai1-v11-connected-card::after {
        border-radius: 26px;
    }
    .ai1-v11-network {
        min-height: 260px;
    }
    .ai1-v11-network__status {
        font-size: .58rem;
    }
}

@media(prefers-reduced-motion:reduce) {
    .ai1-v11-capability__signal i, .ai1-v11-capability__heading img, .ai1-v11-connected-card::before, .ai1-v11-network__route, .ai1-v11-network__pulse, .ai1-v11-network__status i {
        animation: none!important;
    }
    .ai1-v11-network__packet {
        display: none;
    }
}

/* ==========================================================================
08. TRAFFIC-LIGHT SYSTEM, LOGO NETWORK & ABOUT CONTENT
========================================================================== */

:root {
    --ai1-traffic-red: #ff4d57;
    --ai1-traffic-amber: #ffbf35;
    --ai1-traffic-green: #8cff16;
}

/* The Group: sequential traffic-light flow */

.ai1-v12-traffic-flow__stop {
    --traffic-colour: var(--ai1-traffic-green);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 118px;
    display: grid;
    place-content: center;
}

.ai1-v12-traffic-flow__stop--red {
    --traffic-colour: var(--ai1-traffic-red);
}

.ai1-v12-traffic-flow__stop--amber {
    --traffic-colour: var(--ai1-traffic-amber);
}

.ai1-v12-traffic-flow__stop--green {
    --traffic-colour: var(--ai1-traffic-green);
}

.ai1-v12-traffic-flow__stop em {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--traffic-colour);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--traffic-colour) 55%, transparent), 0 0 18px var(--traffic-colour);
    animation: ai1-v12-traffic-bloom 4.5s ease-in-out infinite;
}

.ai1-v12-traffic-flow__stop::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    opacity: 0;
    background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--traffic-colour) 24%, transparent), transparent 68%);
    animation: ai1-v12-card-traffic 4.5s ease-in-out infinite;
}

.ai1-v12-traffic-flow__stop--amber em, .ai1-v12-traffic-flow__stop--amber::after {
    animation-delay: 1.5s;
}

.ai1-v12-traffic-flow__stop--green em, .ai1-v12-traffic-flow__stop--green::after {
    animation-delay: 3s;
}

.ai1-v12-traffic-flow__stop b {
    transition: color .35s ease;
}

/* Connected advantage: real brand logos */

.ai1-v12-logo-network svg {
    overflow: visible;
}

.ai1-v12-logo-network__hub circle {
    fill: rgba(3, 16, 8, .96);
    stroke: var(--ai1-traffic-green);
    stroke-width: 3;
    animation: ai1-v12-hub-colour 4.5s ease-in-out infinite;
}

.ai1-v12-logo-network__hub image {
    transform-origin: 260px 180px;
    animation: ai1-v12-logo-breathe 3s ease-in-out infinite;
}

.ai1-v12-logo-network__node circle {
    fill: rgba(2, 10, 6, .95);
    stroke-width: 3;
}

.ai1-v12-logo-network__node--host circle {
    stroke: var(--ai1-traffic-red);
}

.ai1-v12-logo-network__node--design circle {
    stroke: var(--ai1-traffic-amber);
}

.ai1-v12-logo-network__node--security circle {
    stroke: var(--ai1-traffic-green);
}

.ai1-v12-logo-network__node image {
    transform-box: fill-box;
    transform-origin: center;
    animation: ai1-v12-network-logo-float 3.4s ease-in-out infinite;
    filter: drop-shadow(0 10px 16px rgba(0,0,0,.45));
}

.ai1-v12-logo-network__node--design image {
    animation-delay: .55s;
}

.ai1-v12-logo-network__node--security image {
    animation-delay: 1.1s;
}

.ai1-v12-logo-network .ai1-v11-network__route--one {
    stroke: color-mix(in srgb, var(--ai1-traffic-red) 55%, transparent);
}

.ai1-v12-logo-network .ai1-v11-network__route--two {
    stroke: color-mix(in srgb, var(--ai1-traffic-amber) 55%, transparent);
}

.ai1-v12-logo-network .ai1-v11-network__route--three {
    stroke: color-mix(in srgb, var(--ai1-traffic-green) 55%, transparent);
}

.ai1-v12-logo-network .ai1-v11-network__packet--one {
    fill: var(--ai1-traffic-red);
    filter: drop-shadow(0 0 9px var(--ai1-traffic-red));
}

.ai1-v12-logo-network .ai1-v11-network__packet--two {
    fill: var(--ai1-traffic-amber);
    filter: drop-shadow(0 0 9px var(--ai1-traffic-amber));
}

.ai1-v12-logo-network .ai1-v11-network__packet--three {
    fill: var(--ai1-traffic-green);
    filter: drop-shadow(0 0 9px var(--ai1-traffic-green));
}

/* Animated portfolio signals */

.ai1-v12-summary-signals {
    gap: 14px 18px;
}

.ai1-v12-summary-signals__item {
    --signal-colour: var(--ai1-traffic-green);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: .7rem 1rem;
    border: 1px solid color-mix(in srgb, var(--signal-colour) 28%, transparent);
    border-radius: 999px;
    color: rgba(255,255,255,.74) !important;
    background: color-mix(in srgb, var(--signal-colour) 5%, rgba(0,0,0,.2));
    animation: ai1-v12-signal-cycle 4.5s ease-in-out infinite;
}

.ai1-v12-summary-signals__item--red {
    --signal-colour: var(--ai1-traffic-red);
}

.ai1-v12-summary-signals__item--amber {
    --signal-colour: var(--ai1-traffic-amber);
    animation-delay: 1.5s;
}

.ai1-v12-summary-signals__item--green {
    --signal-colour: var(--ai1-traffic-green);
    animation-delay: 3s;
}

.ai1-v12-summary-signals__item i {
    width: 10px !important;
    height: 10px !important;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--signal-colour) !important;
    box-shadow: 0 0 14px var(--signal-colour);
    animation: none !important;
}

.ai1-v12-summary-signals > b {
    width: 38px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
}

/* Our Approach: traffic-light cards */

.ai1-v12-approach-lights__card {
    --traffic-colour: var(--ai1-traffic-green);
    border-width: 2px !important;
    border-color: color-mix(in srgb, var(--traffic-colour) 42%, transparent) !important;
    animation: ai1-v12-approach-cycle 4.5s ease-in-out infinite !important;
}

.ai1-v12-approach-lights__card--red {
    --traffic-colour: var(--ai1-traffic-red);
}

.ai1-v12-approach-lights__card--amber {
    --traffic-colour: var(--ai1-traffic-amber);
    animation-delay: 1.5s !important;
}

.ai1-v12-approach-lights__card--green {
    --traffic-colour: var(--ai1-traffic-green);
    animation-delay: 3s !important;
}

.ai1-v12-approach-lights__card::before {
    display: none !important;
}

.ai1-v12-approach-lights__card em {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    width: 3.65rem;
    height: 3.65rem;
    border-radius: 50%;
    transform: translateY(-50%);
    border: 2px solid color-mix(in srgb, var(--traffic-colour) 60%, transparent);
    background: radial-gradient(circle, var(--traffic-colour) 0 12%, color-mix(in srgb, var(--traffic-colour) 24%, transparent) 13% 35%, rgba(0,0,0,.65) 70%);
    box-shadow: 0 0 24px color-mix(in srgb, var(--traffic-colour) 35%, transparent), inset 0 0 24px rgba(0,0,0,.55);
    animation: ai1-v12-traffic-bloom 4.5s ease-in-out infinite;
}

.ai1-v12-approach-lights__card--amber em {
    animation-delay: 1.5s;
}

.ai1-v12-approach-lights__card--green em {
    animation-delay: 3s;
}

.ai1-v12-approach-lights__card span {
    color: var(--traffic-colour) !important;
}

/* Expanded About AI1Group block */

.ai1-v12-about-panel {
    grid-column: 1 / -1;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(260px,.72fr) minmax(0,1.28fr);
    gap: clamp(2rem,5vw,5rem);
    margin-top: clamp(2.8rem,6vw,5.5rem);
    padding: clamp(2rem,5vw,4.5rem);
    border: 1px solid rgba(145,255,25,.24);
    border-radius: 34px;
    background: radial-gradient(circle at 0 0, rgba(255,77,87,.08), transparent 28%), radial-gradient(circle at 100% 0, rgba(255,191,53,.08), transparent 30%), radial-gradient(circle at 50% 120%, rgba(140,255,22,.10), transparent 38%), rgba(1,8,4,.82);
    box-shadow: 0 30px 90px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.04);
    backdrop-filter: blur(16px);
}

.ai1-v12-about-panel::before {
    content: "";
    position: absolute;
    inset: -70% -20%;
    pointer-events: none;
    background: conic-gradient(from 180deg, transparent, rgba(145,255,25,.09), transparent 28%);
    animation: ai1-v12-about-orbit 12s linear infinite;
}

.ai1-v12-about-panel > * {
    position: relative;
    z-index: 1;
}

.ai1-v12-about-panel__intro h3 {
    margin: 1.2rem 0 0;
    color: #fff;
    font-size: clamp(1.8rem,3vw,3rem);
    line-height: 1.18;
    font-weight: 500;
}

.ai1-v12-about-panel__copy {
    display: grid;
    gap: 1rem;
}

.ai1-v12-about-panel__copy p {
    margin: 0 !important;
    color: rgba(255,255,255,.72) !important;
    font-size: clamp(.96rem,1.15vw,1.08rem) !important;
    line-height: 1.85 !important;
}

.ai1-v12-about-panel__facts {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 14px;
}

.ai1-v12-about-panel__facts span {
    --fact-colour: var(--ai1-traffic-red);
    position: relative;
    padding: 1.25rem 1.25rem 1.25rem 1.6rem;
    border: 1px solid color-mix(in srgb, var(--fact-colour) 30%, transparent);
    border-radius: 20px;
    background: rgba(0,0,0,.26);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.ai1-v12-about-panel__facts span:nth-child(2) {
    --fact-colour: var(--ai1-traffic-amber);
}

.ai1-v12-about-panel__facts span:nth-child(3) {
    --fact-colour: var(--ai1-traffic-green);
}

.ai1-v12-about-panel__facts span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 4px;
    border-radius: 99px;
    background: var(--fact-colour);
    box-shadow: 0 0 15px var(--fact-colour);
}

.ai1-v12-about-panel__facts span:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--fact-colour) 65%, transparent);
    box-shadow: 0 20px 44px rgba(0,0,0,.3), 0 0 26px color-mix(in srgb, var(--fact-colour) 12%, transparent);
}

.ai1-v12-about-panel__facts strong, .ai1-v12-about-panel__facts small {
    display: block;
}

.ai1-v12-about-panel__facts strong {
    color: #fff;
    font-size: 1rem;
}

.ai1-v12-about-panel__facts small {
    margin-top: .35rem;
    color: rgba(255,255,255,.56);
    line-height: 1.55;
}

@keyframes ai1-v12-traffic-bloom {
    0%, 26%, 100% {
        transform: translateY(-50%) scale(.82);
        opacity: .42;
        box-shadow: 0 0 0 0 transparent, 0 0 8px var(--traffic-colour);
    }
    10%, 20% {
        transform: translateY(-50%) scale(1.22);
        opacity: 1;
        box-shadow: 0 0 0 12px transparent, 0 0 30px var(--traffic-colour);
    }
}

.ai1-v12-traffic-flow__stop em {
    transform: scale(.82);
}

@keyframes ai1-v12-card-traffic {
    0%, 26%, 100% {
        opacity: 0;
        box-shadow: inset 0 0 0 transparent;
    }
    10%, 20% {
        opacity: 1;
        box-shadow: inset 0 0 40px color-mix(in srgb, var(--traffic-colour) 12%, transparent);
    }
}

@keyframes ai1-v12-signal-cycle {
    0%, 26%, 100% {
        transform: translateY(0) scale(.98);
        opacity: .55;
        box-shadow: none;
    }
    10%, 20% {
        transform: translateY(-5px) scale(1.04);
        opacity: 1;
        color: #fff;
        box-shadow: 0 12px 28px rgba(0,0,0,.25), 0 0 22px color-mix(in srgb, var(--signal-colour) 22%, transparent);
    }
}

@keyframes ai1-v12-approach-cycle {
    0%, 26%, 100% {
        transform: translateX(0);
        box-shadow: 0 12px 28px rgba(0,0,0,.18);
    }
    10%, 20% {
        transform: translateX(-10px) scale(1.015);
        border-color: var(--traffic-colour);
        box-shadow: 0 24px 56px rgba(0,0,0,.36), 0 0 34px color-mix(in srgb, var(--traffic-colour) 20%, transparent);
    }
}

@keyframes ai1-v12-logo-breathe {
    0%, 100% {
        transform: scale(.94);
    }
    50% {
        transform: scale(1.08);
    }
}

@keyframes ai1-v12-network-logo-float {
    0%, 100% {
        transform: translateY(0) rotate(0);
    }
    50% {
        transform: translateY(-8px) rotate(-2deg);
    }
}

@keyframes ai1-v12-hub-colour {
    0%, 100% {
        stroke: var(--ai1-traffic-red);
        filter: drop-shadow(0 0 10px var(--ai1-traffic-red));
    }
    33% {
        stroke: var(--ai1-traffic-amber);
        filter: drop-shadow(0 0 10px var(--ai1-traffic-amber));
    }
    66% {
        stroke: var(--ai1-traffic-green);
        filter: drop-shadow(0 0 12px var(--ai1-traffic-green));
    }
}

@keyframes ai1-v12-about-orbit {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 900px) {
    .ai1-v12-about-panel {
        grid-template-columns: 1fr;
    }
    .ai1-v12-about-panel__facts {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .ai1-v12-summary-signals {
        display: grid;
    }
    .ai1-v12-summary-signals > b {
        width: 1px;
        height: 18px;
        margin: auto;
    }
    .ai1-v12-summary-signals__item {
        justify-content: center;
    }
    .ai1-v12-about-panel {
        padding: 28px 20px;
        border-radius: 26px;
    }
    .ai1-v12-logo-network__node image {
        animation: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ai1-v12-traffic-flow__stop em, .ai1-v12-traffic-flow__stop::after, .ai1-v12-logo-network__hub circle, .ai1-v12-logo-network__hub image, .ai1-v12-logo-network__node image, .ai1-v12-summary-signals__item, .ai1-v12-approach-lights__card, .ai1-v12-approach-lights__card em, .ai1-v12-about-panel::before {
        animation: none !important;
    }
}

/* ==========================================================================
09. LAYOUT WIDTHS, CONTENT VISIBILITY & ABOUT PLACEMENT
========================================================================== */

/* Use the same full shell width for every major content block. */

.ai1-v11-brand-depth, .ai1-v11-connected-card, .ai1-v9-approach, .ai1-v13-about-section {
    width: 100%;
    max-width: none;
}

.ai1-v4-parallax__content.ai1-v9-approach {
    max-width: none;
}

/* Improve contrast in the detailed brands introduction. */

.ai1-v11-brand-depth__intro h3 {
    color: #f5fff7;
    text-shadow: 0 8px 34px rgba(0, 0, 0, .42);
}

.ai1-v11-brand-depth__intro > p:last-child {
    color: rgba(242, 250, 245, .78);
}

/* Give the network status its own breathing room below the diagram. */

.ai1-v11-network {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding-bottom: .5rem;
}

.ai1-v11-network svg {
    flex: 1 1 auto;
    min-height: 300px;
}

.ai1-v11-network__status {
    position: static;
    justify-content: center;
    transform: none;
    margin: 1.35rem auto 0;
    padding: .25rem 0;
    letter-spacing: .16em;
}

/* About AI1Group now belongs to The Group section and is no longer boxed. */

.ai1-v13-about-section {
    position: relative;
    display: grid;
    grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
    gap: clamp(2.5rem, 6vw, 6rem);
    margin-top: clamp(5rem, 9vw, 9rem);
    padding: clamp(4rem, 7vw, 7rem) 0 0;
}

.ai1-v13-about-section__intro, .ai1-v13-about-section__copy, .ai1-v13-about-section__facts {
    position: relative;
}

.ai1-v13-about-section__intro h3 {
    margin: 1.2rem 0 0;
    color: #fff;
    font-size: clamp(1.9rem, 3.2vw, 3.4rem);
    line-height: 1.16;
    font-weight: 500;
}

.ai1-v13-about-section__copy {
    display: grid;
    gap: 1.15rem;
}

.ai1-v13-about-section__copy p {
    margin: 0 !important;
    color: rgba(240, 248, 243, .76) !important;
    font-size: clamp(1rem, 1.18vw, 1.1rem) !important;
    line-height: 1.9 !important;
}

.ai1-v13-about-section__facts {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: .5rem;
}

.ai1-v13-about-section__facts span {
    --fact-colour: var(--ai1-traffic-red);
    position: relative;
    padding: 1.35rem 1.35rem 1.35rem 1.65rem;
    border-left: 3px solid var(--fact-colour);
    background: linear-gradient(90deg, color-mix(in srgb, var(--fact-colour) 8%, transparent), transparent 70%);
    transition: transform .3s ease, background .3s ease;
}

.ai1-v13-about-section__facts span:nth-child(2) {
    --fact-colour: var(--ai1-traffic-amber);
}

.ai1-v13-about-section__facts span:nth-child(3) {
    --fact-colour: var(--ai1-traffic-green);
}

.ai1-v13-about-section__facts span:hover {
    transform: translateY(-5px);
    background: linear-gradient(90deg, color-mix(in srgb, var(--fact-colour) 15%, transparent), transparent 80%);
}

.ai1-v13-about-section__facts strong, .ai1-v13-about-section__facts small {
    display: block;
}

.ai1-v13-about-section__facts strong {
    color: #fff;
    font-size: 1rem;
}

.ai1-v13-about-section__facts small {
    margin-top: .38rem;
    color: rgba(255,255,255,.58);
    line-height: 1.55;
}

@media (max-width: 900px) {
    .ai1-v13-about-section {
        grid-template-columns: 1fr;
    }
    .ai1-v13-about-section__facts {
        grid-template-columns: 1fr;
    }
    .ai1-v11-network svg {
        min-height: 260px;
    }
}

@media (max-width: 680px) {
    .ai1-v13-about-section {
        margin-top: 4rem;
        padding-top: 3.5rem;
    }
    .ai1-v11-network__status {
        margin-top: 1rem;
        font-size: .6rem;
    }
}

/* ==========================================================================
10. CUSTOMER-CHOICE CONTENT & WIDTH REFINEMENTS
========================================================================== */

/* Every primary content wrapper uses exactly the same shell width. */

.ai1-v4 .ai1-shell, .ai1-v4-parallax > .ai1-shell, .ai1-v4-parallax__content, .ai1-v4-group__grid, .ai1-v4-contact__grid, .ai1-v4-stats__grid {
    width: min(var(--v4-shell, 1320px), calc(100% - 48px)) !important;
    max-width: none !important;
    margin-inline: auto !important;
}

.ai1-v11-brand-depth, .ai1-v11-connected-card, .ai1-v9-approach, .ai1-v4-model__grid, .ai1-v13-about-section, .ai1-v14-why-more {
    width: 100% !important;
    max-width: none !important;
}

/* Expanded customer-facing explanation beneath the Why AI1Group cards. */

.ai1-v14-why-more {
    display: grid;
    grid-template-columns: minmax(270px, .72fr) minmax(0, 1.28fr);
    gap: clamp(2.5rem, 6vw, 6rem);
    margin-top: clamp(4.5rem, 8vw, 8rem);
    padding-top: clamp(3.5rem, 6vw, 6rem);
}

.ai1-v14-why-more__intro h3 {
    margin: 1rem 0 0;
    color: #fff;
    font-size: clamp(2rem, 3.4vw, 3.8rem);
    line-height: 1.12;
    font-weight: 500;
    letter-spacing: -.035em;
}

.ai1-v14-why-more__copy {
    display: grid;
    gap: 1.15rem;
}

.ai1-v14-why-more__copy p {
    margin: 0 !important;
    color: rgba(244,250,246,.78) !important;
    font-size: clamp(1rem, 1.16vw, 1.12rem) !important;
    line-height: 1.9 !important;
}

.ai1-v14-why-more__benefits {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: .5rem;
}

.ai1-v14-why-more__benefits article {
    --benefit-colour: #ff4d57;
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: start;
    min-height: 150px;
    padding: 1.5rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--benefit-colour) 42%, transparent);
    border-radius: 22px;
    background: radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--benefit-colour) 14%, transparent), transparent 36%), rgba(2,10,5,.72);
    box-shadow: 0 20px 50px rgba(0,0,0,.24);
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.ai1-v14-why-more__benefits article:nth-child(2) {
    --benefit-colour: #ffbf27;
}

.ai1-v14-why-more__benefits article:nth-child(3) {
    --benefit-colour: #91ff19;
}

.ai1-v14-why-more__benefits article::after {
    content: "";
    position: absolute;
    inset: auto -20% 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--benefit-colour), transparent);
    animation: ai1-v14-benefit-scan 3.6s ease-in-out infinite;
}

.ai1-v14-why-more__benefits article:nth-child(2)::after {
    animation-delay: 1.2s;
}

.ai1-v14-why-more__benefits article:nth-child(3)::after {
    animation-delay: 2.4s;
}

.ai1-v14-why-more__benefits article:hover {
    transform: translateY(-8px);
    border-color: var(--benefit-colour);
    box-shadow: 0 30px 70px rgba(0,0,0,.32), 0 0 34px color-mix(in srgb, var(--benefit-colour) 15%, transparent);
}

.ai1-v14-why-more__benefits span {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--benefit-colour) 16%, #020805);
    border: 1px solid var(--benefit-colour);
    color: var(--benefit-colour);
    font-size: .72rem;
    font-weight: 700;
    box-shadow: 0 0 22px color-mix(in srgb, var(--benefit-colour) 18%, transparent);
}

.ai1-v14-why-more__benefits strong {
    display: block;
    color: #fff;
    font-size: 1rem;
}

.ai1-v14-why-more__benefits p {
    margin: .45rem 0 0 !important;
    color: rgba(255,255,255,.62) !important;
    line-height: 1.65 !important;
    font-size: .9rem !important;
}

@keyframes ai1-v14-benefit-scan {
    0%, 15% {
        transform: translateX(-70%);
        opacity: 0;
    }
    35%, 65% {
        opacity: 1;
    }
    85%, 100% {
        transform: translateX(70%);
        opacity: 0;
    }
}

@media (max-width: 900px) {
    .ai1-v14-why-more {
        grid-template-columns: 1fr;
    }
    .ai1-v14-why-more__benefits {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
11. RESTORED GRAPH & CUSTOMER-CARD ANIMATION REFINEMENTS
========================================================================== */

/* Keep the restored graph layout with the approved red / amber / green line. */

.ai1-v10-stage-graph {
    border-color: rgba(92,140,255,.25) !important;
    background: linear-gradient(180deg, rgba(9,24,34,.96), rgba(7,18,27,.94)) !important;
}

.ai1-v10-stage-graph__line {
    stroke-width: 4px !important;
    filter: drop-shadow(0 0 5px rgba(255,87,87,.30)) drop-shadow(0 0 8px rgba(255,198,47,.28)) drop-shadow(0 0 11px rgba(130,255,0,.38)) !important;
}

.ai1-v10-stage-graph__node--one {
    fill: #ff5757 !important;
    filter: drop-shadow(0 0 8px #ff5757) !important;
}

.ai1-v10-stage-graph__node--two {
    fill: #ffc62f !important;
    filter: drop-shadow(0 0 8px #ffc62f) !important;
}

.ai1-v10-stage-graph__node--three, .ai1-v10-stage-graph__node--four {
    fill: #82ff00 !important;
    filter: drop-shadow(0 0 8px #82ff00) !important;
}

/* The portfolio summary now fills the same shell as every neighbouring block. */

.ai1-v10-brands-summary {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.ai1-v4-section, .ai1-v4-parallax, .ai1-v4-stats {
    position: relative !important;
}

/* The three customer-benefit cards now reveal independently and run as a
clear red / amber / green traffic-light sequence. */

.ai1-v14-why-more__benefits article {
    transform-origin: center bottom;
    animation: ai1-v17-benefit-traffic 6s ease-in-out infinite;
}

.ai1-v14-why-more__benefits article:nth-child(2) {
    animation-delay: 2s;
}

.ai1-v14-why-more__benefits article:nth-child(3) {
    animation-delay: 4s;
}

.ai1-v14-why-more__benefits article span {
    animation: ai1-v17-benefit-lamp 6s ease-in-out infinite;
}

.ai1-v14-why-more__benefits article:nth-child(2) span {
    animation-delay: 2s;
}

.ai1-v14-why-more__benefits article:nth-child(3) span {
    animation-delay: 4s;
}

@keyframes ai1-v17-benefit-traffic {
    0%, 24%, 100% {
        translate: 0 0;
        scale: 1;
        border-color: color-mix(in srgb, var(--benefit-colour) 42%, transparent);
        box-shadow: 0 20px 50px rgba(0,0,0,.24);
    }
    34%, 58% {
        translate: 0 -9px;
        scale: 1.025;
        border-color: var(--benefit-colour);
        box-shadow: 0 30px 72px rgba(0,0,0,.36), 0 0 36px color-mix(in srgb, var(--benefit-colour) 22%, transparent), inset 0 1px 0 rgba(255,255,255,.07);
    }
}

@keyframes ai1-v17-benefit-lamp {
    0%, 24%, 100% {
        filter: brightness(.72);
        box-shadow: 0 0 14px color-mix(in srgb, var(--benefit-colour) 14%, transparent);
    }
    34%, 58% {
        filter: brightness(1.45);
        box-shadow: 0 0 18px var(--benefit-colour), 0 0 42px color-mix(in srgb, var(--benefit-colour) 42%, transparent);
    }
}

/* ==========================================================================
12. SINGLE FULL-WIDTH SECTION DIVIDER
The only divider used across the homepage.
========================================================================== */

.ai1-v4-section, .ai1-v4-parallax, .ai1-v4-stats {
    position: relative;
}

.ai1-v4-section::before, .ai1-v4-parallax::before, .ai1-v4-stats::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 50;
    width: 100vw;
    height: 4px;
    transform: translateX(-50%);
    border: 0;
    border-radius: 0;
    pointer-events: none;
    background: linear-gradient( 90deg, transparent 0%, rgba(255, 72, 82, .9) 12%, rgba(255, 190, 38, .98) 37%, #b3ff22 61%, #76f000 87%, transparent 100% );
    box-shadow: 0 0 8px rgba(255, 190, 38, .32), 0 0 16px rgba(165, 255, 25, .72), 0 0 34px rgba(108, 238, 0, .38);
    animation: ai1-v18-divider-glow 3.4s ease-in-out infinite;
}

.ai1-v4-section::after, .ai1-v4-parallax::after, .ai1-v4-stats::after {
    content: none !important;
    display: none !important;
}

@keyframes ai1-v18-divider-glow {
    0%, 100% {
        opacity: .74;
        filter: brightness(.9);
    }
    50% {
        opacity: 1;
        filter: brightness(1.45);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ai1-v4-section::before, .ai1-v4-parallax::before, .ai1-v4-stats::before {
        animation: none;
    }
}

/* 13. LEGACY INTERNAL SEPARATOR CLEAN-UP */

.ai1-v13-about-section, .ai1-v14-why-more {
    border-top: 0 !important;
}

.ai1-v13-about-section::before, .ai1-v13-about-section::after, .ai1-v14-why-more::before, .ai1-v14-why-more::after {
    content: none !important;
    display: none !important;
}

/* ========================================================================== 
14. DEFINITIVE SPACING & VERTICAL RHYTHM SYSTEM
This final section owns homepage spacing. Earlier component rules control
appearance and animation; these rules provide one predictable layout rhythm.
========================================================================== */

:root {
    --ai1-space-section: clamp(84px, 7vw, 118px);
    --ai1-space-section-mobile: 64px;
    --ai1-space-heading: clamp(36px, 4vw, 58px);
    --ai1-space-block: clamp(28px, 3vw, 44px);
    --ai1-space-major: clamp(58px, 6vw, 86px);
    --ai1-space-card-gap: clamp(18px, 2vw, 28px);
}

/* --------------------------------------------------------------------------
14.1 Major section spacing
-------------------------------------------------------------------------- */

.ai1-v4-section, .ai1-v4-parallax, .ai1-v4-parallax--projects {
    min-height: 0;
    padding-top: var(--ai1-space-section) !important;
    padding-bottom: var(--ai1-space-section) !important;
}

.ai1-v4-parallax {
    display: block;
}

.ai1-v4-stats {
    padding-top: clamp(58px, 5vw, 78px) !important;
    padding-bottom: clamp(58px, 5vw, 78px) !important;
}

.ai1-v4 > section + section {
    margin-top: 0;
}

/* Keep content comfortably clear of the full-width glowing divider. */

.ai1-v4-section > .ai1-shell, .ai1-v4-parallax > .ai1-shell, .ai1-v4-stats > .ai1-shell {
    position: relative;
    z-index: 2;
}

/* --------------------------------------------------------------------------
14.2 Shared heading rhythm
-------------------------------------------------------------------------- */

.ai1-v4-heading {
    margin-top: 0;
    margin-bottom: var(--ai1-space-heading) !important;
}

.ai1-v4-heading > :first-child, .ai1-v9-approach__copy > :first-child, .ai1-v13-about-section__intro > :first-child, .ai1-v14-why-more__intro > :first-child, .ai1-v11-brand-depth__intro > :first-child {
    margin-top: 0;
}

.ai1-v4-heading > :last-child, .ai1-v9-approach__copy > :last-child, .ai1-v13-about-section__intro > :last-child, .ai1-v14-why-more__intro > :last-child, .ai1-v11-brand-depth__intro > :last-child {
    margin-bottom: 0;
}

.ai1-v4-kicker {
    margin-bottom: clamp(18px, 2vw, 24px) !important;
}

/* --------------------------------------------------------------------------
14.3 The Group and About AI1Group
-------------------------------------------------------------------------- */

.ai1-v4-group__grid {
    gap: clamp(42px, 6vw, 84px) !important;
    align-items: center;
}

.ai1-v4-group__grid > div:last-child {
    padding-top: 0 !important;
}

.ai1-v13-about-section {
    margin-top: var(--ai1-space-major) !important;
    padding-top: 0 !important;
    gap: clamp(36px, 5vw, 72px) !important;
}

.ai1-v13-about-section__copy {
    gap: 1rem !important;
}

.ai1-v13-about-section__facts {
    gap: var(--ai1-space-card-gap) !important;
    margin-top: var(--ai1-space-block) !important;
}

.ai1-v13-about-section__facts span {
    min-height: 118px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* --------------------------------------------------------------------------
14.4 Brands and connected portfolio content
-------------------------------------------------------------------------- */

.ai1-v4-brand-grid, .ai1-v11-capability-grid {
    gap: var(--ai1-space-card-gap) !important;
}

.ai1-v11-brand-depth {
    margin-top: var(--ai1-space-major) !important;
}

.ai1-v11-brand-depth__intro {
    margin-bottom: var(--ai1-space-heading) !important;
}

.ai1-v11-brand-depth__intro .ai1-v4-kicker {
    margin-bottom: 0 !important;
}

.ai1-v11-connected-card {
    margin-top: var(--ai1-space-block) !important;
}

.ai1-v10-brands-summary {
    margin-top: var(--ai1-space-block) !important;
}

/* --------------------------------------------------------------------------
14.5 Our Approach
-------------------------------------------------------------------------- */

.ai1-v4-parallax--manifesto {
    min-height: 0 !important;
}

.ai1-v9-approach {
    min-height: 0;
    gap: clamp(48px, 7vw, 96px) !important;
    align-items: center !important;
}

.ai1-v9-approach__copy, .ai1-v9-approach__steps {
    margin: 0;
}

.ai1-v9-approach__steps {
    gap: 16px !important;
}

/* --------------------------------------------------------------------------
14.6 Why AI1Group and customer-choice content
-------------------------------------------------------------------------- */

.ai1-v4-model__grid {
    gap: var(--ai1-space-card-gap) !important;
}

.ai1-v14-why-more {
    margin-top: var(--ai1-space-major) !important;
    padding-top: 0 !important;
    gap: clamp(36px, 5vw, 72px) !important;
}

.ai1-v14-why-more__copy {
    gap: 1rem !important;
}

.ai1-v14-why-more__benefits {
    gap: var(--ai1-space-card-gap) !important;
    margin-top: var(--ai1-space-block) !important;
}

/* --------------------------------------------------------------------------
14.7 Projects, statistics and contact
-------------------------------------------------------------------------- */

.ai1-v4-parallax--projects .ai1-v4-heading {
    margin-bottom: var(--ai1-space-heading) !important;
}

.ai1-v4-showcase {
    margin-top: 0;
}

.ai1-v4-contact__grid {
    align-items: start;
    gap: clamp(48px, 7vw, 96px) !important;
}

.ai1-v4-byte {
    margin-top: var(--ai1-space-block) !important;
}

.ai1-v4-contact__links {
    margin-top: var(--ai1-space-block) !important;
}

/* --------------------------------------------------------------------------
14.8 Responsive spacing
-------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .ai1-v4-section,     .ai1-v4-parallax,     .ai1-v4-parallax--projects {
        padding-top: clamp(68px, 10vw, 88px) !important;
        padding-bottom: clamp(68px, 10vw, 88px) !important;
    }
    .ai1-v13-about-section,     .ai1-v14-why-more,     .ai1-v11-brand-depth {
        margin-top: clamp(48px, 8vw, 68px) !important;
    }
    .ai1-v9-approach {
        gap: 44px !important;
    }
}

@media (max-width: 600px) {
    .ai1-v4-section,     .ai1-v4-parallax,     .ai1-v4-parallax--projects {
        padding-top: var(--ai1-space-section-mobile) !important;
        padding-bottom: var(--ai1-space-section-mobile) !important;
    }
    .ai1-v4-heading {
        margin-bottom: 36px !important;
    }
    .ai1-v13-about-section,     .ai1-v14-why-more,     .ai1-v11-brand-depth {
        margin-top: 48px !important;
    }
    .ai1-v13-about-section__facts,     .ai1-v14-why-more__benefits {
        margin-top: 24px !important;
    }
    .ai1-v4-contact__grid,     .ai1-v9-approach,     .ai1-v4-group__grid {
        gap: 40px !important;
    }
}

/* ========================================================================== 
   15. FINAL SPACING SYSTEM & ABOUT-FACT ANIMATION
   One shared rhythm for all homepage sections and content groups.
========================================================================== */

:root {
    --ai1-space-section: clamp(5.5rem, 8vw, 8rem);
    --ai1-space-section-mobile: clamp(4rem, 14vw, 5.5rem);
    --ai1-space-heading: clamp(2.5rem, 4vw, 4rem);
    --ai1-space-block: clamp(2rem, 3.5vw, 3.5rem);
    --ai1-space-grid: clamp(1rem, 1.8vw, 1.5rem);
}

.ai1-v4-section, .ai1-v4-parallax--projects, .ai1-v4-contact {
    padding-top: var(--ai1-space-section) !important;
    padding-bottom: var(--ai1-space-section) !important;
}

.ai1-v4-parallax--manifesto {
    min-height: 0 !important;
    padding-top: var(--ai1-space-section) !important;
    padding-bottom: var(--ai1-space-section) !important;
}

.ai1-v4-heading, .ai1-v4-heading--split {
    margin-bottom: var(--ai1-space-heading) !important;
}

.ai1-v13-about-section, .ai1-v14-why-more {
    margin-top: var(--ai1-space-section) !important;
    padding-top: 0 !important;
}

.ai1-v13-about-section__facts, .ai1-v14-why-more__benefits, .ai1-v4-brand-grid, .ai1-v11-capability-grid, .ai1-v4-model__grid {
    gap: var(--ai1-space-grid) !important;
}

.ai1-v11-brand-depth {
    margin-top: var(--ai1-space-section) !important;
}

.ai1-v11-connected-card, .ai1-v10-brands-summary {
    margin-top: var(--ai1-space-block) !important;
}

/* Animated About facts: red, amber and green sequence. */

.ai1-v13-about-section__facts span {
    --fact-delay: 0s;
    isolation: isolate;
    overflow: hidden;
    min-height: 110px;
    display: grid;
    align-content: center;
    border: 1px solid color-mix(in srgb, var(--fact-colour) 32%, transparent);
    border-left: 4px solid var(--fact-colour);
    border-radius: 18px;
    background: linear-gradient(110deg, color-mix(in srgb, var(--fact-colour) 8%, transparent), rgba(1, 8, 4, .62) 62%);
    box-shadow: 0 16px 38px rgba(0, 0, 0, .2);
    animation: ai1-about-fact-cycle 6s ease-in-out infinite;
    animation-delay: var(--fact-delay);
}

.ai1-v13-about-section__facts span:nth-child(2) {
    --fact-delay: 2s;
}

.ai1-v13-about-section__facts span:nth-child(3) {
    --fact-delay: 4s;
}

.ai1-v13-about-section__facts span::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 -32%;
    width: 24%;
    z-index: -1;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--fact-colour) 22%, white), transparent);
    transform: skewX(-18deg);
    animation: ai1-about-fact-sweep 6s ease-in-out infinite;
    animation-delay: var(--fact-delay);
}

.ai1-v13-about-section__facts span:hover {
    transform: translateY(-7px) scale(1.015);
    border-color: color-mix(in srgb, var(--fact-colour) 72%, transparent);
    box-shadow: 0 26px 60px rgba(0, 0, 0, .3), 0 0 30px color-mix(in srgb, var(--fact-colour) 18%, transparent);
}

@keyframes ai1-about-fact-cycle {
    0%, 24%, 100% {
        transform: translateY(0) scale(1);
        filter: brightness(.78);
    }
    34%, 58% {
        transform: translateY(-8px) scale(1.02);
        filter: brightness(1.14);
        box-shadow: 0 28px 64px rgba(0, 0, 0, .34), 0 0 32px color-mix(in srgb, var(--fact-colour) 20%, transparent);
    }
}

@keyframes ai1-about-fact-sweep {
    0%, 28% {
        left: -32%;
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    60% {
        left: 118%;
        opacity: 0;
    }
    100% {
        left: 118%;
        opacity: 0;
    }
}

@media (max-width: 900px) {
    .ai1-v4-section,     .ai1-v4-parallax--manifesto,     .ai1-v4-parallax--projects,     .ai1-v4-contact {
        padding-top: var(--ai1-space-section-mobile) !important;
        padding-bottom: var(--ai1-space-section-mobile) !important;
    }
    .ai1-v13-about-section,     .ai1-v14-why-more,     .ai1-v11-brand-depth {
        margin-top: var(--ai1-space-section-mobile) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ai1-v13-about-section__facts span,     .ai1-v13-about-section__facts span::after {
        animation: none !important;
    }
}

/* ==========================================================================
   16. CHOOSE YOUR ROUTE — CLEAN NAMESPACED REBUILD
   Conflict-free homepage navigation hub using a fixed 3 + 2 layout.
========================================================================== */

.ai1-route-hub {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: var(--ai1-space-section, clamp(5.5rem, 8vw, 8rem)) 0;
    background:
        radial-gradient(circle at 10% 18%, rgba(255, 77, 87, .075), transparent 27%),
        radial-gradient(circle at 88% 16%, rgba(145, 255, 25, .085), transparent 29%),
        radial-gradient(circle at 50% 100%, rgba(66, 223, 245, .05), transparent 38%),
        linear-gradient(180deg, #020604 0%, #06100a 100%);
}

.ai1-route-hub::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: .2;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(145, 255, 25, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(145, 255, 25, .05) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(#000, transparent 92%);
}

.ai1-route-hub::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -150px;
    z-index: -1;
    width: min(1100px, 90vw);
    height: 360px;
    pointer-events: none;
    transform: translateX(-50%);
    background: radial-gradient(ellipse, rgba(145, 255, 25, .1), transparent 68%);
    filter: blur(12px);
}

.ai1-route-hub__intro {
    max-width: 820px;
    margin-bottom: clamp(2.7rem, 5vw, 4.6rem);
}

.ai1-route-hub__intro h2 {
    margin: 0;
    color: #f7faf7;
    font-size: clamp(2.6rem, 5vw, 5.1rem);
    line-height: 1.04;
    font-weight: 600;
    letter-spacing: -.045em;
}

.ai1-route-hub__intro > p:last-child {
    max-width: 690px;
    margin: 1.2rem 0 0;
    color: rgba(225, 236, 228, .68);
    font-size: clamp(1rem, 1.2vw, 1.12rem);
    line-height: 1.8;
}

/* --------------------------------------------------------------------------
   16.1 Fixed equal-card grid
   Row one: three cards. Row two: two cards centred beneath them.
-------------------------------------------------------------------------- */

.ai1-route-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(1.35rem, 2vw, 2rem);
    align-items: stretch;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    perspective: 1400px;
}

.ai1-route-card:nth-child(1) { grid-column: 1 / span 2; }
.ai1-route-card:nth-child(2) { grid-column: 3 / span 2; }
.ai1-route-card:nth-child(3) { grid-column: 5 / span 2; }
.ai1-route-card:nth-child(4) { grid-column: 2 / span 2; }
.ai1-route-card:nth-child(5) { grid-column: 4 / span 2; }

/* --------------------------------------------------------------------------
   16.2 Equal card foundation
-------------------------------------------------------------------------- */

.ai1-route-card {
    --route-accent: #91ff19;
    --route-tint: rgba(145, 255, 25, .11);
    --route-index: 0;

    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    column-gap: 1.25rem;
    row-gap: .85rem;
    width: 100%;
    min-width: 0;
    min-height: 330px;
    padding: clamp(1.8rem, 2.3vw, 2.4rem);
    overflow: hidden;
    border: 2px solid color-mix(in srgb, var(--route-accent) 72%, transparent);
    border-radius: 30px;
    color: #fff !important;
    text-decoration: none !important;
    cursor: pointer;
    transform-style: preserve-3d;
    background:
        linear-gradient(135deg, var(--route-tint), transparent 58%),
        radial-gradient(circle at 18% 14%, color-mix(in srgb, var(--route-accent) 18%, transparent), transparent 43%),
        linear-gradient(150deg, rgba(8, 22, 13, .99), rgba(2, 8, 5, 1));
    box-shadow:
        0 28px 72px rgba(0, 0, 0, .42),
        0 0 34px color-mix(in srgb, var(--route-accent) 10%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, .055),
        inset 0 0 62px color-mix(in srgb, var(--route-accent) 7%, transparent);
    transition:
        transform .42s cubic-bezier(.2, .78, .2, 1),
        border-color .35s ease,
        box-shadow .4s ease,
        background .4s ease;
}

.ai1-route-card--red {
    --route-accent: #ff4d57;
    --route-tint: rgba(255, 77, 87, .12);
    --route-index: 0;
}

.ai1-route-card--amber {
    --route-accent: #ffbf35;
    --route-tint: rgba(255, 191, 53, .12);
    --route-index: 1;
}

.ai1-route-card--green {
    --route-accent: #91ff19;
    --route-tint: rgba(145, 255, 25, .12);
    --route-index: 2;
}

.ai1-route-card--cyan {
    --route-accent: #42dff5;
    --route-tint: rgba(66, 223, 245, .12);
    --route-index: 3;
}

.ai1-route-card--gold {
    --route-accent: #f0d59a;
    --route-tint: rgba(240, 213, 154, .12);
    --route-index: 4;
}

.ai1-route-card::before {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 0;
    z-index: 3;
    height: 4px;
    border-radius: 999px 999px 0 0;
    opacity: .78;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--route-accent), transparent);
    box-shadow: 0 0 22px color-mix(in srgb, var(--route-accent) 58%, transparent);
    animation: ai1RouteHubScan 5.8s ease-in-out infinite;
    animation-delay: calc(var(--route-index) * .65s);
}

.ai1-route-card::after {
    content: "";
    position: absolute;
    top: -38%;
    bottom: -38%;
    left: -34%;
    z-index: 4;
    width: 20%;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), transparent);
    transform: skewX(-18deg);
    transition: left .78s ease, opacity .25s ease;
}

.ai1-route-card__orbit {
    position: absolute;
    top: -72px;
    right: -70px;
    z-index: -1;
    width: 190px;
    height: 190px;
    border: 1px solid color-mix(in srgb, var(--route-accent) 36%, transparent);
    border-radius: 50%;
    opacity: .68;
    pointer-events: none;
    box-shadow: inset 0 0 46px color-mix(in srgb, var(--route-accent) 10%, transparent);
    animation: ai1RouteHubOrbit 13s linear infinite;
}

.ai1-route-card__orbit::before,
.ai1-route-card__orbit::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.ai1-route-card__orbit::before {
    inset: 26px;
    border: 1px dashed color-mix(in srgb, var(--route-accent) 28%, transparent);
}

.ai1-route-card__orbit::after {
    top: 22px;
    left: 36px;
    width: 10px;
    height: 10px;
    background: var(--route-accent);
    box-shadow: 0 0 16px var(--route-accent), 0 0 34px color-mix(in srgb, var(--route-accent) 42%, transparent);
    animation: ai1RouteHubLamp 4.5s ease-in-out infinite;
    animation-delay: calc(var(--route-index) * .55s);
}

.ai1-route-card__number {
    position: relative;
    z-index: 5;
    grid-column: 1;
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    margin: 0;
    border: 2px solid var(--route-accent);
    border-radius: 22px;
    color: var(--route-accent);
    background: radial-gradient(circle, color-mix(in srgb, var(--route-accent) 28%, transparent), rgba(3, 11, 6, .97) 72%);
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .04em;
    box-shadow: 0 0 24px color-mix(in srgb, var(--route-accent) 42%, transparent), inset 0 1px 0 rgba(255, 255, 255, .1);
    transition: transform .35s ease, box-shadow .35s ease;
}

.ai1-route-card__title {
    position: relative;
    z-index: 5;
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    min-width: 0;
    margin: 0;
    color: #fff;
    font-size: clamp(1.45rem, 1.8vw, 1.95rem);
    font-weight: 600;
    line-height: 1.22;
    text-wrap: balance;
}

.ai1-route-card__copy {
    position: relative;
    z-index: 5;
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    min-height: 3.55em;
    margin: 0;
    color: rgba(227, 238, 230, .72);
    font-size: clamp(.97rem, 1.05vw, 1.06rem);
    line-height: 1.72;
}

.ai1-route-card__action {
    position: relative;
    z-index: 5;
    grid-column: 1 / -1;
    grid-row: 3;
    align-self: end;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    min-height: 54px;
    margin-top: 1rem;
    padding: .8rem .85rem .8rem 1.05rem;
    border: 1px solid color-mix(in srgb, var(--route-accent) 50%, transparent);
    border-radius: 16px;
    color: #eef8f0;
    background: color-mix(in srgb, var(--route-accent) 9%, rgba(0, 0, 0, .34));
    font-size: .84rem;
    font-weight: 700;
    letter-spacing: .045em;
    text-transform: uppercase;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
    transition: transform .3s ease, background .3s ease, border-color .3s ease;
}

.ai1-route-card__action-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 1px solid color-mix(in srgb, var(--route-accent) 68%, transparent);
    border-radius: 50%;
    color: var(--route-accent);
    background: rgba(0, 0, 0, .26);
    font-size: 1rem;
    line-height: 1;
    animation: ai1RouteHubArrow 2.3s ease-in-out infinite;
    animation-delay: calc(var(--route-index) * .3s);
    transition: transform .3s ease, color .3s ease, background .3s ease, box-shadow .3s ease;
}

.ai1-route-card:hover,
.ai1-route-card:focus-visible {
    transform: translateY(-13px) scale(1.023) rotateX(1deg);
    border-color: var(--route-accent);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--route-accent) 20%, transparent), transparent 62%),
        radial-gradient(circle at 18% 14%, color-mix(in srgb, var(--route-accent) 27%, transparent), transparent 44%),
        linear-gradient(150deg, rgba(11, 29, 17, 1), rgba(2, 9, 5, 1));
    box-shadow:
        0 44px 100px rgba(0, 0, 0, .5),
        0 0 0 2px color-mix(in srgb, var(--route-accent) 22%, transparent),
        0 0 58px color-mix(in srgb, var(--route-accent) 25%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, .09),
        inset 0 0 72px color-mix(in srgb, var(--route-accent) 11%, transparent);
    outline: none;
}

.ai1-route-card:hover::after,
.ai1-route-card:focus-visible::after {
    left: 118%;
    opacity: 1;
}

.ai1-route-card:hover .ai1-route-card__number,
.ai1-route-card:focus-visible .ai1-route-card__number {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 0 30px color-mix(in srgb, var(--route-accent) 60%, transparent), 0 0 60px color-mix(in srgb, var(--route-accent) 22%, transparent);
}

.ai1-route-card:hover .ai1-route-card__action,
.ai1-route-card:focus-visible .ai1-route-card__action {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--route-accent) 82%, transparent);
    background: color-mix(in srgb, var(--route-accent) 16%, rgba(0, 0, 0, .3));
}

.ai1-route-card:hover .ai1-route-card__action-icon,
.ai1-route-card:focus-visible .ai1-route-card__action-icon {
    transform: translateX(6px) rotate(-8deg) scale(1.06);
    color: #061006;
    background: var(--route-accent);
    box-shadow: 0 0 24px color-mix(in srgb, var(--route-accent) 50%, transparent);
}

@keyframes ai1RouteHubScan {
    0%, 18% { transform: scaleX(.34) translateX(-70%); opacity: .24; }
    42%, 60% { transform: scaleX(1) translateX(0); opacity: 1; }
    82%, 100% { transform: scaleX(.34) translateX(70%); opacity: .24; }
}

@keyframes ai1RouteHubOrbit {
    to { transform: rotate(360deg); }
}

@keyframes ai1RouteHubLamp {
    0%, 100% { opacity: .42; transform: scale(.78); }
    45%, 60% { opacity: 1; transform: scale(1.18); }
}

@keyframes ai1RouteHubArrow {
    0%, 70%, 100% { transform: translateX(0); }
    82% { transform: translateX(5px); }
    90% { transform: translateX(1px); }
}

/* --------------------------------------------------------------------------
   16.3 Responsive layouts
-------------------------------------------------------------------------- */

@media (max-width: 1080px) {
    .ai1-route-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 900px;
    }

    .ai1-route-card:nth-child(n) {
        grid-column: auto;
    }

    .ai1-route-card:last-child {
        grid-column: 1 / -1;
        width: min(100%, 440px);
        justify-self: center;
    }
}

@media (max-width: 680px) {
    .ai1-route-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .ai1-route-card,
    .ai1-route-card:last-child {
        grid-column: auto;
        width: 100%;
        min-height: 285px;
        grid-template-columns: 60px minmax(0, 1fr);
        gap: .72rem 1rem;
        padding: 1.35rem;
        border-radius: 23px;
    }

    .ai1-route-card__number {
        width: 60px;
        height: 60px;
        border-radius: 18px;
        font-size: .92rem;
    }

    .ai1-route-card__title {
        font-size: 1.27rem;
    }

    .ai1-route-card__copy {
        font-size: .92rem;
        line-height: 1.65;
    }

    .ai1-route-card__orbit {
        width: 148px;
        height: 148px;
        top: -60px;
        right: -58px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ai1-route-card,
    .ai1-route-card::before,
    .ai1-route-card::after,
    .ai1-route-card__orbit,
    .ai1-route-card__orbit::after,
    .ai1-route-card__number,
    .ai1-route-card__action,
    .ai1-route-card__action-icon {
        animation: none !important;
        transition: none !important;
    }
}

/* ========================================================================== 
   17. BYTE FLOATING GUIDE — BOTTOM LEFT
   Homepage concierge, contextual speech and accessible quick-link panel.
========================================================================== */

.ai1-byte-guide {
    --byte-green: #91ff19;
    position: fixed;
    left: clamp(14px, 2vw, 28px);
    bottom: clamp(14px, 2vw, 26px);
    z-index: 9995;
    width: min(390px, calc(100vw - 28px));
    font-family: "Comfortaa", system-ui, sans-serif;
}

.ai1-byte-guide__launcher {
    position: relative;
    display: grid;
    grid-template-columns: 58px auto;
    gap: 12px;
    align-items: center;
    min-height: 72px;
    padding: 7px 18px 7px 7px;
    border: 1px solid rgba(145, 255, 25, .42);
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(145deg, rgba(8, 24, 13, .96), rgba(2, 9, 5, .98));
    box-shadow: 0 18px 48px rgba(0,0,0,.46), 0 0 30px rgba(145,255,25,.12), inset 0 1px rgba(255,255,255,.06);
    cursor: pointer;
    backdrop-filter: blur(18px);
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.ai1-byte-guide__launcher:hover,
.ai1-byte-guide__launcher:focus-visible,
.ai1-byte-guide.is-open .ai1-byte-guide__launcher {
    transform: translateY(-5px);
    border-color: var(--byte-green);
    box-shadow: 0 25px 60px rgba(0,0,0,.52), 0 0 42px rgba(145,255,25,.22);
    outline: none;
}

.ai1-byte-guide__avatar {
    position: relative;
    display: block;
    width: 58px;
    height: 58px;
    overflow: hidden;
    border: 2px solid rgba(145,255,25,.6);
    border-radius: 50%;
    background: #071109;
    box-shadow: 0 0 20px rgba(145,255,25,.22);
}

.ai1-byte-guide__avatar::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    border: 1px dashed rgba(145,255,25,.42);
    animation: ai1ByteGuideSpin 9s linear infinite;
}

.ai1-byte-guide__avatar video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ai1-byte-guide__launcher-copy {
    display: grid;
    gap: 3px;
    text-align: left;
}

.ai1-byte-guide__launcher-copy strong {
    color: #fff;
    font-size: .88rem;
    line-height: 1.2;
}

.ai1-byte-guide__launcher-copy small {
    color: var(--byte-green);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ai1-byte-guide__status {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--byte-green);
    box-shadow: 0 0 12px var(--byte-green);
    animation: ai1ByteGuideStatus 1.8s ease-in-out infinite;
}

.ai1-byte-guide__panel {
    position: absolute;
    left: 0;
    bottom: calc(100% + 14px);
    width: min(390px, calc(100vw - 28px));
    overflow: hidden;
    border: 1px solid rgba(145,255,25,.3);
    border-radius: 26px;
    background: linear-gradient(155deg, rgba(8,24,13,.985), rgba(2,8,5,.995));
    box-shadow: 0 30px 90px rgba(0,0,0,.58), 0 0 52px rgba(145,255,25,.14);
    backdrop-filter: blur(22px);
    transform-origin: left bottom;
    animation: ai1BytePanelIn .36s cubic-bezier(.2,.8,.2,1) both;
}

.ai1-byte-guide__head {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    padding: 20px 20px 16px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.ai1-byte-guide__head div { display: grid; gap: 5px; }
.ai1-byte-guide__head small { color: var(--byte-green); font-size: .64rem; font-weight: 700; letter-spacing: .14em; }
.ai1-byte-guide__head strong { color: #fff; font-size: 1.2rem; }

.ai1-byte-guide__close,
.ai1-byte-guide__speech button {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    color: rgba(255,255,255,.72);
    background: rgba(255,255,255,.04);
    cursor: pointer;
}

.ai1-byte-guide__message { padding: 16px 20px 4px; }
.ai1-byte-guide__message p { margin: 0; color: rgba(235,244,237,.7); font-size: .9rem; line-height: 1.7; }

.ai1-byte-guide__links {
    display: grid;
    gap: 8px;
    padding: 14px 14px 16px;
}

.ai1-byte-guide__links a {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 11px;
    align-items: center;
    min-height: 52px;
    padding: 8px 12px 8px 8px;
    border: 1px solid rgba(145,255,25,.11);
    border-radius: 15px;
    color: #fff;
    background: rgba(255,255,255,.025);
    text-decoration: none;
    transition: transform .25s ease, border-color .25s ease, background .25s ease;
}

.ai1-byte-guide__links a:hover,
.ai1-byte-guide__links a:focus-visible {
    transform: translateX(5px);
    border-color: rgba(145,255,25,.48);
    background: rgba(145,255,25,.07);
    outline: none;
}

.ai1-byte-guide__links span {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    color: var(--byte-green);
    background: rgba(145,255,25,.08);
}
.ai1-byte-guide__links b { font-size: .8rem; }
.ai1-byte-guide__links i { color: var(--byte-green); font-style: normal; }

.ai1-byte-guide__speech {
    position: absolute;
    left: 78px;
    bottom: 84px;
    width: min(310px, calc(100vw - 106px));
    padding: 16px 44px 16px 18px;
    border: 1px solid rgba(145,255,25,.34);
    border-radius: 20px 20px 20px 5px;
    background: linear-gradient(145deg, rgba(9,25,14,.98), rgba(2,9,5,.99));
    box-shadow: 0 24px 60px rgba(0,0,0,.48), 0 0 34px rgba(145,255,25,.12);
    animation: ai1ByteSpeechIn .38s cubic-bezier(.2,.8,.2,1) both;
}

.ai1-byte-guide__speech::after {
    content: "";
    position: absolute;
    left: -10px;
    bottom: 14px;
    width: 20px;
    height: 20px;
    border-left: 1px solid rgba(145,255,25,.34);
    border-bottom: 1px solid rgba(145,255,25,.34);
    background: #07170c;
    transform: rotate(45deg);
}

.ai1-byte-guide__speech button { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; }
.ai1-byte-guide__speech strong { color: var(--byte-green); font-size: .62rem; letter-spacing: .14em; }
.ai1-byte-guide__speech p { margin: 7px 0 0; color: rgba(238,246,240,.78); font-size: .83rem; line-height: 1.65; }
.ai1-byte-guide.is-speaking .ai1-byte-guide__avatar { animation: ai1ByteBounce .65s ease; }

@keyframes ai1ByteGuideSpin { to { transform: rotate(360deg); } }
@keyframes ai1ByteGuideStatus { 50% { opacity: .35; transform: scale(.78); } }
@keyframes ai1BytePanelIn { from { opacity: 0; transform: translateY(12px) scale(.96); } }
@keyframes ai1ByteSpeechIn { from { opacity: 0; transform: translateX(-12px) translateY(8px) scale(.96); } }
@keyframes ai1ByteBounce { 40% { transform: translateY(-8px) rotate(-4deg); } 70% { transform: translateY(2px) rotate(2deg); } }

@media (max-width: 600px) {
    .ai1-byte-guide { left: 12px; bottom: 12px; width: calc(100vw - 24px); }
    .ai1-byte-guide__launcher { grid-template-columns: 52px auto; min-height: 64px; padding: 6px 14px 6px 6px; }
    .ai1-byte-guide__avatar { width: 52px; height: 52px; }
    .ai1-byte-guide__panel { width: calc(100vw - 24px); }
    .ai1-byte-guide__speech { left: 0; bottom: 76px; width: min(310px, calc(100vw - 24px)); border-radius: 20px; }
    .ai1-byte-guide__speech::after { left: 24px; bottom: -10px; transform: rotate(-45deg); }
}

@media (prefers-reduced-motion: reduce) {
    .ai1-byte-guide *,
    .ai1-byte-guide *::before,
    .ai1-byte-guide *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ========================================================================== 
   18. CONNECTED ADVANTAGE — AUTHORITATIVE LIVE ECOSYSTEM
   Replaces all earlier connected-card layout rules.
========================================================================== */
.ai1-connected {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
    grid-template-areas: "visual copy";
    gap: clamp(3rem, 7vw, 7rem);
    align-items: center;
    min-height: 720px;
    margin-top: clamp(2rem, 4vw, 3.5rem);
    padding: clamp(2.2rem, 5vw, 5rem);
    overflow: hidden;
    border: 2px solid rgba(145,255,25,.34);
    border-radius: 42px;
    background:
        radial-gradient(circle at 22% 48%, rgba(145,255,25,.09), transparent 34%),
        radial-gradient(circle at 82% 18%, rgba(63,111,223,.10), transparent 30%),
        linear-gradient(145deg, #06120b, #010604 72%);
    box-shadow: 0 38px 110px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.04);
}
.ai1-connected::before {
    content: "";
    position: absolute;
    inset: -2px;
    z-index: -2;
    border-radius: inherit;
    background: conic-gradient(from var(--ai1-connected-angle,0deg), #91ff19, #f0d59a, #3f6fdf, #ff4d57, #91ff19);
    animation: ai1ConnectedBorder 10s linear infinite;
    opacity: .72;
}
.ai1-connected::after {
    content: "";
    position: absolute;
    inset: 2px;
    z-index: -1;
    border-radius: 39px;
    background: linear-gradient(145deg, rgba(6,18,11,.98), rgba(1,6,4,.99));
}
@property --ai1-connected-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes ai1ConnectedBorder { to { --ai1-connected-angle: 360deg; } }
.ai1-connected__visual { grid-area: visual; position: relative; min-height: 590px; display: grid; place-items: center; }
.ai1-connected__grid { position: absolute; inset: 4%; opacity: .16; background-image: linear-gradient(rgba(145,255,25,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(145,255,25,.08) 1px,transparent 1px); background-size: 34px 34px; mask-image: radial-gradient(circle,#000 24%,transparent 72%); }
.ai1-connected__network { position: relative; width: min(100%, 650px); transform: translateY(var(--home-parallax-y,0)); transition: transform .08s linear; }
.ai1-connected__network svg { width: 100%; overflow: visible; }
.ai1-connected__route { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 11 13; animation: ai1ConnectedRoute 1.7s linear infinite; }
.ai1-connected__route--host { stroke: url(#ai1-connected-route-a); }
.ai1-connected__route--design { stroke: url(#ai1-connected-route-b); }
.ai1-connected__route--security { stroke: url(#ai1-connected-route-c); }
@keyframes ai1ConnectedRoute { to { stroke-dashoffset: -48; } }
.ai1-connected__pulse { fill: none; stroke: rgba(145,255,25,.34); stroke-width: 2; transform-origin: 310px 250px; animation: ai1ConnectedPulse 3s ease-out infinite; }
.ai1-connected__pulse--two { animation-delay: 1.5s; }
@keyframes ai1ConnectedPulse { from { opacity:.8; transform:scale(.64); } to { opacity:0; transform:scale(1.42); } }
.ai1-connected__node circle { fill: rgba(2,10,5,.96); stroke-width: 3; transition: filter .3s ease, transform .3s ease; }
.ai1-connected__node--hub circle { stroke:#91ff19; }
.ai1-connected__node--host circle { stroke:#ff4d57; }
.ai1-connected__node--design circle { stroke:#ffbf35; }
.ai1-connected__node--security circle { stroke:#3f6fdf; }
.ai1-connected__node { animation: ai1ConnectedFloat 4.8s ease-in-out infinite; transform-origin: center; }
.ai1-connected__node--design { animation-delay:-1.6s; }
.ai1-connected__node--security { animation-delay:-3.2s; }
@keyframes ai1ConnectedFloat { 50% { transform:translateY(-7px) rotate(1deg); } }
.ai1-connected__packet { fill:#91ff19; filter:drop-shadow(0 0 9px #91ff19); }
.ai1-connected__packet--host { fill:#ff4d57; }
.ai1-connected__packet--design { fill:#ffbf35; }
.ai1-connected__packet--security { fill:#4f84ff; }
.ai1-connected__status { display:flex; justify-content:center; align-items:center; gap:.7rem; margin-top:-.5rem; color:rgba(235,243,237,.62); font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.ai1-connected__status i { width:9px; height:9px; border-radius:50%; background:#91ff19; box-shadow:0 0 16px #91ff19; animation:ai1ConnectedStatus 1.5s ease-in-out infinite; }
@keyframes ai1ConnectedStatus { 50% { transform:scale(1.35); opacity:.5; } }
.ai1-connected__byte { position:absolute; left:0; bottom:0; display:grid; grid-template-columns:88px minmax(0,240px); gap:1rem; align-items:center; }
.ai1-connected__byte video { width:88px; height:88px; object-fit:cover; border:2px solid rgba(145,255,25,.55); border-radius:50%; box-shadow:0 0 30px rgba(145,255,25,.18); }
.ai1-connected__byte div { position:relative; padding:1rem 1.1rem; border:1px solid rgba(145,255,25,.22); border-radius:18px; background:rgba(4,14,8,.92); box-shadow:0 18px 45px rgba(0,0,0,.3); }
.ai1-connected__byte div::before { content:""; position:absolute; left:-9px; top:50%; width:16px; height:16px; background:#06150b; border-left:1px solid rgba(145,255,25,.22); border-bottom:1px solid rgba(145,255,25,.22); transform:translateY(-50%) rotate(45deg); }
.ai1-connected__byte small { color:#91ff19; font-size:.62rem; font-weight:700; letter-spacing:.14em; }
.ai1-connected__byte p { margin:.35rem 0 0; color:#d4dfd7; font-size:.86rem; line-height:1.55; }
.ai1-connected__copy { grid-area: copy; max-width:620px; }
.ai1-connected__copy h3 { margin:0; color:#fff; font-size:clamp(2.8rem,5vw,5.9rem); font-weight:500; line-height:1.02; letter-spacing:-.055em; }
.ai1-connected__copy>p:not(.ai1-v4-kicker) { margin:1.5rem 0 0; color:rgba(224,234,227,.68); font-size:clamp(1rem,1.25vw,1.15rem); line-height:1.85; }
.ai1-connected__benefits { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.6rem; }
.ai1-connected__benefits span { padding:.7rem 1rem; border:1px solid rgba(145,255,25,.26); border-radius:999px; color:#dff0d8; background:rgba(145,255,25,.055); font-size:.78rem; font-weight:700; transition:.3s ease; }
.ai1-connected__benefits span:hover { transform:translateY(-3px); border-color:#91ff19; box-shadow:0 12px 30px rgba(0,0,0,.25),0 0 22px rgba(145,255,25,.12); }
@media(max-width:1050px){ .ai1-connected{grid-template-columns:1fr;grid-template-areas:"copy" "visual";min-height:0;} .ai1-connected__copy{max-width:none;} .ai1-connected__visual{min-height:570px;} }
@media(max-width:680px){ .ai1-connected{padding:1.5rem;border-radius:28px;} .ai1-connected::after{border-radius:25px;} .ai1-connected__copy h3{font-size:clamp(2.35rem,11vw,3.8rem);} .ai1-connected__visual{min-height:440px;} .ai1-connected__byte{position:relative;left:auto;bottom:auto;margin-top:-1rem;grid-template-columns:68px 1fr;} .ai1-connected__byte video{width:68px;height:68px;} }
@media(prefers-reduced-motion:reduce){ .ai1-connected::before,.ai1-connected__route,.ai1-connected__pulse,.ai1-connected__node,.ai1-connected__status i{animation:none!important;} .ai1-connected__packet{display:none;} }


/* ==========================================================================
   19. BYTE SPEECH POSITION REFINEMENT
   Keeps every contextual comment visibly attached to floating Byte.
========================================================================== */
.ai1-byte-guide__speech {
    left: 72px;
    bottom: 82px;
    transform-origin: left bottom;
}

.ai1-byte-guide__speech::after {
    left: -9px;
    bottom: 16px;
}

.ai1-byte-guide.is-speaking .ai1-byte-guide__launcher {
    border-color: rgba(145,255,25,.72);
    box-shadow: 0 24px 60px rgba(0,0,0,.52), 0 0 44px rgba(145,255,25,.2);
}

@media (max-width: 600px) {
    .ai1-byte-guide__speech {
        left: 0;
        bottom: 74px;
        width: min(320px, calc(100vw - 24px));
    }

    .ai1-byte-guide__speech::after {
        left: 24px;
        bottom: -10px;
    }
}

/* ========================================================================== 
   19. BYTE GUIDE RELIABILITY FIX
========================================================================== */
.ai1-byte-guide__panel[hidden],
.ai1-byte-guide__speech[hidden] { display:none !important; }
.ai1-byte-guide { display:block; pointer-events:none; }
.ai1-byte-guide__launcher,
.ai1-byte-guide__panel,
.ai1-byte-guide__speech { pointer-events:auto; }
.ai1-byte-guide__speech { z-index:3; }
.ai1-byte-guide__panel { z-index:4; }

/* ==========================================================================
   MOVED FROM components.css — HOMEPAGE PATHWAYS
   Homepage-specific rules belong here.
========================================================================== */
/* HOMEPAGE PATHWAYS AND TEAM DIRECTORY ---------------------------------- */
.ai1-home-pathways{position:relative;padding:clamp(82px,9vw,130px) 0;background:radial-gradient(circle at 15% 15%,rgba(145,255,25,.09),transparent 28rem),#06100a}
.ai1-home-pathways__grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:38px}.ai1-home-pathway{display:flex;min-height:190px;flex-direction:column;justify-content:space-between;padding:24px;border:1px solid var(--ai1x-line);border-radius:22px;background:linear-gradient(145deg,rgba(13,31,20,.96),rgba(4,12,7,.98));text-decoration:none;transition:.28s}.ai1-home-pathway:hover{transform:translateY(-7px);border-color:var(--ai1x-line-strong)}.ai1-home-pathway small{color:var(--ai1x-green);font-weight:800;letter-spacing:.12em}.ai1-home-pathway strong{font-size:1.25rem}.ai1-home-pathway span{color:var(--ai1x-muted);font-size:.88rem;line-height:1.6}
@media(max-width:1040px){.ai1-home-pathways__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.ai1-home-pathways__grid{grid-template-columns:1fr}}

/* ==========================================================================
   V4 HOME ROUTE CARDS
   Matches the illuminated customer-benefit card family.
========================================================================== */

.ai1-home-pathways {
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 20%, rgba(255, 77, 87, .06), transparent 24rem),
        radial-gradient(circle at 50% 0, rgba(255, 191, 53, .055), transparent 26rem),
        radial-gradient(circle at 88% 24%, rgba(145, 255, 25, .07), transparent 25rem),
        linear-gradient(180deg, #06100a, #020704);
}

.ai1-home-pathways__grid {
    gap: clamp(16px, 1.7vw, 24px);
    perspective: 1200px;
}

.ai1-home-pathway {
    --route-colour: #ff4d57;
    --route-delay: 0s;
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 18px;
    row-gap: 8px;
    align-content: center;
    min-height: 210px;
    padding: 28px 24px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--route-colour) 82%, transparent);
    border-radius: 28px;
    background:
        radial-gradient(circle at 15% 14%, color-mix(in srgb, var(--route-colour) 13%, transparent), transparent 34%),
        linear-gradient(145deg, rgba(7, 20, 12, .98), rgba(1, 8, 4, .99));
    box-shadow: 0 22px 52px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .035);
    transform-origin: center bottom;
    animation: ai1RouteTraffic 10s ease-in-out infinite;
    animation-delay: var(--route-delay);
    transition:
        transform .38s cubic-bezier(.2,.8,.2,1),
        border-color .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}

.ai1-home-pathway:nth-child(2) { --route-colour: #ffbf35; --route-delay: 2s; }
.ai1-home-pathway:nth-child(3) { --route-colour: #91ff19; --route-delay: 4s; }
.ai1-home-pathway:nth-child(4) { --route-colour: #4fd9ff; --route-delay: 6s; }
.ai1-home-pathway:nth-child(5) { --route-colour: #f0d59a; --route-delay: 8s; }

.ai1-home-pathway::before {
    position: absolute;
    inset: auto -24% 0;
    width: auto;
    height: 3px;
    content: "";
    background: linear-gradient(90deg, transparent, var(--route-colour), transparent);
    transform: translateX(-70%);
    transform-origin: center;
    animation: ai1RouteScan 5s ease-in-out infinite;
    animation-delay: var(--route-delay);
}

.ai1-home-pathway::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: auto;
    height: auto;
    content: "";
    border-radius: inherit;
    opacity: .42;
    background:
        linear-gradient(120deg, transparent 28%, color-mix(in srgb, var(--route-colour) 8%, transparent) 48%, transparent 68%),
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--route-colour) 12%, transparent), transparent 36%);
    filter: none;
    transition: opacity .35s ease;
}

.ai1-home-pathway__orb {
    position: absolute;
    top: -54px;
    left: -48px;
    z-index: -1;
    width: 150px;
    height: 150px;
    border: 1px solid color-mix(in srgb, var(--route-colour) 25%, transparent);
    border-radius: 50%;
    opacity: .62;
    animation: ai1RouteOrbit 14s linear infinite;
}

.ai1-home-pathway__orb::before,
.ai1-home-pathway__orb::after {
    position: absolute;
    inset: 18px;
    content: "";
    border: 1px dashed color-mix(in srgb, var(--route-colour) 18%, transparent);
    border-radius: inherit;
}

.ai1-home-pathway__orb::after {
    inset: 42px;
    border-style: solid;
}

.ai1-home-pathway small {
    position: relative;
    z-index: 2;
    display: grid;
    grid-row: 1 / span 2;
    width: 58px;
    height: 58px;
    place-items: center;
    align-self: start;
    border: 1px solid var(--route-colour);
    border-radius: 18px;
    color: var(--route-colour);
    background: color-mix(in srgb, var(--route-colour) 12%, #061008);
    box-shadow: 0 0 18px color-mix(in srgb, var(--route-colour) 22%, transparent);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .04em;
    animation: ai1RouteLamp 10s ease-in-out infinite;
    animation-delay: var(--route-delay);
}

.ai1-home-pathway strong {
    position: relative;
    z-index: 2;
    align-self: end;
    color: #fff;
    font-size: clamp(1.12rem, 1.35vw, 1.45rem);
    font-weight: 650;
    line-height: 1.25;
}

.ai1-home-pathway span:not(.ai1-home-pathway__orb) {
    position: relative;
    z-index: 2;
    grid-column: 2;
    color: rgba(226, 236, 229, .68);
    font-size: .9rem;
    line-height: 1.65;
}

.ai1-home-pathway > b {
    position: relative;
    z-index: 2;
    display: grid;
    grid-column: 3;
    grid-row: 1 / span 2;
    width: 40px;
    height: 40px;
    place-items: center;
    align-self: center;
    border: 1px solid color-mix(in srgb, var(--route-colour) 34%, transparent);
    border-radius: 50%;
    color: var(--route-colour);
    background: color-mix(in srgb, var(--route-colour) 7%, transparent);
    font-size: 1.1rem;
    transition: transform .3s ease, background .3s ease, box-shadow .3s ease;
}

.ai1-home-pathway:hover,
.ai1-home-pathway:focus-visible {
    transform: translateY(-12px) scale(1.025) !important;
    border-color: var(--route-colour);
    box-shadow:
        0 34px 76px rgba(0,0,0,.42),
        0 0 38px color-mix(in srgb, var(--route-colour) 20%, transparent),
        inset 0 1px 0 rgba(255,255,255,.07);
    outline: none;
}

.ai1-home-pathway:hover > b,
.ai1-home-pathway:focus-visible > b {
    transform: translateX(5px) rotate(-8deg);
    background: color-mix(in srgb, var(--route-colour) 15%, transparent);
    box-shadow: 0 0 24px color-mix(in srgb, var(--route-colour) 22%, transparent);
}

@keyframes ai1RouteTraffic {
    0%, 14%, 100% { filter: brightness(.82); }
    4%, 10% {
        filter: brightness(1.14);
        box-shadow: 0 30px 68px rgba(0,0,0,.38), 0 0 30px color-mix(in srgb, var(--route-colour) 16%, transparent);
    }
}

@keyframes ai1RouteLamp {
    0%, 14%, 100% { filter: brightness(.72); transform: scale(1); }
    4%, 10% {
        filter: brightness(1.55);
        transform: scale(1.06);
        box-shadow: 0 0 18px var(--route-colour), 0 0 38px color-mix(in srgb, var(--route-colour) 38%, transparent);
    }
}

@keyframes ai1RouteScan {
    0%, 16% { transform: translateX(-70%); opacity: 0; }
    24%, 42% { opacity: 1; }
    58%, 100% { transform: translateX(70%); opacity: 0; }
}

@keyframes ai1RouteOrbit { to { transform: rotate(360deg); } }

@media (max-width: 1040px) {
    .ai1-home-pathway { min-height: 190px; }
}

@media (max-width: 620px) {
    .ai1-home-pathway {
        grid-template-columns: 52px minmax(0, 1fr) 36px;
        min-height: 170px;
        padding: 22px 18px;
        border-radius: 23px;
    }

    .ai1-home-pathway small {
        width: 52px;
        height: 52px;
        border-radius: 16px;
    }

    .ai1-home-pathway > b {
        width: 36px;
        height: 36px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ai1-home-pathway,
    .ai1-home-pathway::before,
    .ai1-home-pathway__orb,
    .ai1-home-pathway small {
        animation: none !important;
    }
}