/* =========================================
   DATA CENTER & NETWORKING SOLUTION PAGE STYLES
   ========================================= */

/* =========================================
   HERO — same animated gradient + spotlight
   treatment as the Solutions page hero, plus
   the Services sub-pages' back-link breadcrumb.
   ========================================= */
.cyb-hero {
    position: relative;
    min-height: 50vh;
    display: flex;
    align-items: center;
    padding: 6.5rem 0 3rem;
    overflow: hidden;
    isolation: isolate;

    --hero-mx: 50%;
    --hero-my: 50%;

    background: linear-gradient(135deg,
                var(--color-navy) 0%,
                var(--color-navy-dark) 50%,
                var(--color-navy) 100%);
    background-size: 200% auto;
    background-position: 0% center;
    animation: dcnHeroGradientShift 18s ease-in-out infinite;
}

@keyframes dcnHeroGradientShift {
    0%   { background-position: 0% center; }
    50%  { background-position: 100% center; }
    100% { background-position: 0% center; }
}

.cyb-hero::before {
    content: "";
    position: absolute;
    inset: -25%;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(38% 42% at 22% 28%, rgba(14, 23, 48, 0.55) 0%, rgba(14, 23, 48, 0) 66%),
        radial-gradient(34% 38% at 78% 70%, rgba(24, 38, 74, 0.60) 0%, rgba(24, 38, 74, 0) 68%),
        radial-gradient(30% 34% at 62% 16%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 70%);
    animation: dcnHeroAurora 26s ease-in-out infinite alternate;
}

@keyframes dcnHeroAurora {
    0%   { transform: translate3d(-3%, -2%, 0) scale(1); }
    50%  { transform: translate3d(3%, 3%, 0) scale(1.08); }
    100% { transform: translate3d(-2%, 2%, 0) scale(1.03); }
}

.cyb-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
    background: radial-gradient(circle 420px at var(--hero-mx) var(--hero-my),
                rgba(255, 255, 255, 0.20) 0%,
                rgba(14, 23, 48, 0.35) 38%,
                rgba(255, 255, 255, 0) 72%);
}

.cyb-hero.is-pointer-active::after { opacity: 1; }

.cyb-hero-container {
    position: relative;
    z-index: 1;
    width: 100%;
}

.hero-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    transition: color 0.3s ease, gap 0.3s ease;
}

.hero-back-link i {
    font-size: 0.7rem;
    transform: rotate(-90deg);
    transition: transform 0.3s ease;
}

.hero-back-link:hover {
    color: var(--color-white);
    gap: 0.75rem;
}

.cyb-hero .overline {
    color: var(--color-accent);
}

.cyb-hero h2 {
    color: var(--color-white);
    margin-bottom: 0;
}

.highlight-blue {
    color: var(--color-blue);
}

.cyb-hero h2 .highlight-blue {
    color: var(--color-accent);
}

@media (prefers-reduced-motion: reduce) {
    .cyb-hero,
    .cyb-hero::before {
        animation: none;
    }
}

@media (max-width: 640px) {
    .cyb-hero { padding: 6rem 0 6rem; }
}

/* =========================================
   SECTION 1 — INTRO (light bg)
   Layout is the site-wide .media-split standard
   from main.css.
   ========================================= */
.cyb-intro-section {
    background-color: var(--color-white);
}

.cyb-intro-section .desc-text {
    color: var(--color-gray);
    font-size: 1.02rem;
    line-height: 1.75;
    margin-bottom: 1.1rem;
}

.cyb-intro-section .desc-text:last-of-type {
    margin-bottom: 0;
}

.cyb-intro-section .media-frame {
    box-shadow: var(--shadow-md);
}

/* =========================================
   SECTION 2 — WHY IT MATTERS (dark bg)
   Reversed media-split; the "media" slot holds a
   custom reactive-vs-engineered growth comparison
   instead of a photo.
   ========================================= */
.cyb-why-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: var(--color-navy);
}

.cyb-why-section .overline {
    color: var(--color-accent);
}

.cyb-why-section .section-title {
    color: var(--color-white);
}

.cyb-why-section .desc-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.02rem;
    line-height: 1.75;
    margin-bottom: 1.1rem;
}

.cyb-why-section .desc-text:last-of-type {
    margin-bottom: 0;
}

/* ---- Growth comparison visual ---- */
.cyb-growth-frame {
    width: 100%;
    height: 100%;
    min-height: 320px;
    border-radius: 24px;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem;
    padding: 2.5rem 2.25rem;
}

.cyb-growth-kicker {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 0.25rem;
}

.cyb-growth-row-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    margin-bottom: 1rem;
}

.cyb-growth-row--reactive .cyb-growth-row-label { color: var(--color-gray); }
.cyb-growth-row--engineered .cyb-growth-row-label { color: var(--color-accent); }

.cyb-growth-path {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.cyb-growth-node {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 1rem;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.cyb-growth-connector {
    flex: 1;
    height: 2px;
    min-width: 20px;
}

.cyb-growth-row--reactive .cyb-growth-node {
    background-color: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.55);
    border: 1px dashed rgba(255, 255, 255, 0.28);
}

.cyb-growth-row--reactive .cyb-growth-connector {
    background-image: repeating-linear-gradient(90deg,
        rgba(255, 255, 255, 0.3) 0, rgba(255, 255, 255, 0.3) 6px,
        transparent 6px, transparent 12px);
}

.cyb-growth-row--engineered .cyb-growth-node {
    background-color: var(--color-blue);
    color: var(--color-white);
    box-shadow: 0 4px 14px rgba(40, 65, 162, 0.4);
}

.cyb-growth-row--engineered .cyb-growth-connector {
    background: linear-gradient(90deg, var(--color-blue), var(--color-accent));
    border-radius: 2px;
}

.cyb-growth-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.35rem 0.8rem;
    border-radius: 50px;
}

.cyb-growth-row--reactive .cyb-growth-tag {
    background-color: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.65);
}

.cyb-growth-row--engineered .cyb-growth-tag {
    background-color: rgba(94, 200, 229, 0.15);
    color: var(--color-accent);
}

.cyb-growth-divider {
    border-top: 1px dashed rgba(255, 255, 255, 0.14);
}

@media (max-width: 480px) {
    .cyb-growth-frame { padding: 2rem 1.5rem; }
    .cyb-growth-node { width: 36px; height: 36px; font-size: 0.88rem; }
}

/* =========================================
   SECTION 3 — CORE CAPABILITIES & BUSINESS
   OUTCOMES (light bg)
   Merged into one section: a shared overline/
   title/intro, then a two-column (6 + 6) list —
   the checkmark-list content pattern from the
   Services pages' Core Capabilities / Business
   Benefits pairing, restyled as white cards with
   a Solutions-family top accent so it sits
   directly on this page's light background.
   ========================================= */
.cyb-value-section {
    background: linear-gradient(
        to bottom,
        rgba(126, 138, 150, 0.28) 0%,
        rgba(126, 138, 150, 0.10) 45%,
        rgba(126, 138, 150, 0) 100%
    ),
    #f3f6fa;
}

.cyb-value-intro {
    margin: 0 auto 3.5rem;
}

.cyb-value-intro .desc-text {
    color: var(--color-gray);
    font-size: 1.05rem;
    line-height: 1.6;
}

.cyb-value-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem;
    align-items: start;
}

.cyb-value-col {
    position: relative;
    background-color: var(--color-white);
    border: 1px solid rgba(24, 38, 74, 0.08);
    border-radius: 20px;
    padding: 2rem 2rem 1.75rem;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.cyb-value-col::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-royal);
}

.cyb-value-col--outcomes::before {
    background: var(--color-royal);
}

.cyb-value-col h3 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.05rem;
    color: var(--color-navy);
    margin-bottom: 1.25rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid rgba(24, 38, 74, 0.08);
}

.cyb-value-col h3 i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: rgba(40, 65, 162, 0.1);
    color: var(--color-royal);
    font-size: 0.8rem;
    flex-shrink: 0;
}

.cyb-value-col--outcomes h3 i {
    background-color: rgba(40, 65, 162, 0.1);
    color: var(--color-royal);
}

.cyb-value-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.cyb-value-list li {
    position: relative;
    background-color: var(--color-light);
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 0.85rem 1rem 0.85rem 2.4rem;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.cyb-value-list li::before {
    content: "\f058";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 0.9rem;
    left: 0.9rem;
    color: var(--color-royal);
    font-size: 0.85rem;
    line-height: 1;
}

.cyb-value-list--outcomes li::before {
    content: "\f201";
    color: var(--color-royal);
}

.cyb-value-list li:hover {
    background-color: var(--color-white);
    border-color: rgba(40, 65, 162, 0.2);
    box-shadow: var(--shadow-sm);
    transform: translateX(3px);
}

.cyb-value-list--outcomes li:hover {
    border-color: rgba(40, 65, 162, 0.2);
}

.cyb-value-list li strong {
    display: block;
    color: var(--color-navy);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 0.15rem;
}

.cyb-value-list li span {
    color: var(--color-gray);
    font-size: 0.85rem;
    line-height: 1.5;
}


@media (max-width: 900px) {
    .cyb-value-columns {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   SECTION 4 — DATA CONSULT DELIVERY MODEL (dark bg)
   ICAS-style single row: icon circles with a numbered
   badge, connected by curved arrows that light up one
   after another on a loop (ambient, no click needed).
   The last connector (Operate -> Optimize) pulses both
   directions together, showing the continuous feedback
   loop between the two. Circles, badges and arrows are
   recoloured here to read clearly against the section's
   dark navy background instead of the reference's light
   card treatment.
   ========================================= */
.cyb-process-section {
    background-color: var(--color-navy);
}

.cyb-process-intro .overline {
    color: var(--color-accent);
}

.cyb-process-intro .section-title {
    color: var(--color-white);
}

.cyb-process-intro {
    margin: 0 auto 3.5rem;
}

.cyb-process-intro .desc-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.02rem;
    line-height: 1.7;
}

/* -----------------------------------------
   DELIVERY MODEL — ICAS-style single row: white icon
   circles with a numbered badge, connected by curved
   arrows that light up one after another on a loop.
   ----------------------------------------- */
.flow-track {
    display: flex;
    align-items: flex-start;
    padding-bottom: 70px;
}

.flow-node {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 0.5rem;
    cursor: pointer;
}

/* Zigzag stagger — the 2nd and 4th nodes (Architect, Operate) sit
   lower, matching the reference layout's alternating rhythm. */
.flow-node:nth-child(3),
.flow-node:nth-child(7) {
    transform: translateY(70px);
}

.flow-icon-wrap {
    position: relative;
    margin-bottom: 1.5rem;
}

.flow-icon {
    width: 116px;
    height: 116px;
    border-radius: 50%;
    background: var(--color-white);
    box-shadow: 0 14px 30px rgba(14, 23, 48, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.3rem;
    color: var(--color-blue);
    transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.35s ease;
}

.flow-node:hover .flow-icon {
    transform: translateY(-4px) scale(1.06);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.45);
}

.flow-badge {
    position: absolute;
    top: -2px;
    right: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-navy);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

.flow-node h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--color-white);
    margin: 0 0 0.5rem;
}

/* Descriptions are always visible now (no hover/tap gating). */
.flow-node p {
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.85rem;
    line-height: 1.55;
    margin: 0.35rem 0 0;
    max-width: 230px;
}

/* Curved connector arrows between nodes — a quick sequential glow
   plus a small dot that races along the curve during each arrow's
   turn. Muted rest colour lightened for visibility against navy. */
.flow-arrow {
    flex-shrink: 0;
    width: 70px;
    align-self: flex-start;
    margin-top: 0;
    color: rgba(255, 255, 255, 0.3);
    transform-origin: center;
}

.flow-arrow svg {
    display: block;
    width: 100%;
    height: 140px;
    overflow: visible;
}

.flow-dot {
    offset-rotate: 0deg;
    opacity: 0;
    r: 3.5;
    filter: drop-shadow(0 0 4px rgba(94, 200, 229, 0.9));
}

/* Long-cycle variant — arrows 1-3, each taking one 0.8s "turn" within
   a shared 4.8s loop (their own animation-delay staggers which turn
   is theirs: 0s / 0.8s / 1.6s). */
@keyframes flowArrowSequenceLong {
    0%      { color: rgba(255, 255, 255, 0.3); filter: none; transform: scale(1); }
    3.13%   { color: var(--color-accent); filter: drop-shadow(0 0 10px rgba(94, 200, 229, 0.95)); transform: scale(1.08); }
    12.50%  { color: rgba(255, 255, 255, 0.3); filter: none; transform: scale(1); }
    100%    { color: rgba(255, 255, 255, 0.3); filter: none; transform: scale(1); }
}

@keyframes flowDotTravelLong {
    0%      { offset-distance: 0%; opacity: 0; }
    1.04%   { opacity: 1; }
    12.50%  { offset-distance: 100%; opacity: 1; }
    13.54%  { opacity: 0; offset-distance: 100%; }
    100%    { opacity: 0; offset-distance: 100%; }
}

/* Triple-flash variant — the final connector pair (between the 4th
   and 5th nodes) lights both arrows together, three 0.8s pulses in a
   row (2.4s-4.8s of the shared 4.8s cycle), then the loop repeats. */
@keyframes flowArrowSequenceTriple {
    0%       { color: rgba(255, 255, 255, 0.3); filter: none; transform: scale(1); }
    50.000%  { color: rgba(255, 255, 255, 0.3); filter: none; transform: scale(1); }
    53.125%  { color: var(--color-accent); filter: drop-shadow(0 0 10px rgba(94, 200, 229, 0.95)); transform: scale(1.08); }
    62.500%  { color: rgba(255, 255, 255, 0.3); filter: none; transform: scale(1); }
    66.667%  { color: rgba(255, 255, 255, 0.3); filter: none; transform: scale(1); }
    69.792%  { color: var(--color-accent); filter: drop-shadow(0 0 10px rgba(94, 200, 229, 0.95)); transform: scale(1.08); }
    79.167%  { color: rgba(255, 255, 255, 0.3); filter: none; transform: scale(1); }
    83.333%  { color: rgba(255, 255, 255, 0.3); filter: none; transform: scale(1); }
    86.458%  { color: var(--color-accent); filter: drop-shadow(0 0 10px rgba(94, 200, 229, 0.95)); transform: scale(1.08); }
    95.833%  { color: rgba(255, 255, 255, 0.3); filter: none; transform: scale(1); }
    100%     { color: rgba(255, 255, 255, 0.3); filter: none; transform: scale(1); }
}

@keyframes flowDotTravelTriple {
    0%       { offset-distance: 0%; opacity: 0; }
    50.000%  { offset-distance: 0%; opacity: 0; }
    51.042%  { opacity: 1; }
    62.500%  { offset-distance: 100%; opacity: 1; }
    63.542%  { opacity: 0; offset-distance: 100%; }
    66.667%  { offset-distance: 0%; opacity: 0; }
    67.708%  { opacity: 1; }
    79.167%  { offset-distance: 100%; opacity: 1; }
    80.208%  { opacity: 0; offset-distance: 100%; }
    83.333%  { offset-distance: 0%; opacity: 0; }
    84.375%  { opacity: 1; }
    95.833%  { offset-distance: 100%; opacity: 1; }
    96.875%  { opacity: 0; offset-distance: 100%; }
    100%     { opacity: 0; offset-distance: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .flow-icon-wrap,
    .flow-arrow,
    .flow-arrow *,
    .flow-dot {
        animation: none;
    }
}

@media (max-width: 900px) {
    .flow-track {
        flex-direction: column;
        align-items: stretch;
        gap: 0;                          /* replaced by padding + border below */
        padding-bottom: 0;
    }

    .flow-node {
        display: grid;
        grid-template-columns: 68px 1fr;
        grid-template-rows: auto auto;
        column-gap: 1.1rem;
        row-gap: 0.2rem;
        align-items: start;
        text-align: left;
        padding: 1.5rem 0;                /* was the gap, now lives here */
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .flow-node:first-child {
        padding-top: 0;
    }

    .flow-node:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .flow-node:nth-child(3),
    .flow-node:nth-child(7) {
        transform: none;
    }

    .flow-icon-wrap {
        grid-column: 1;
        grid-row: 1 / 3;      /* spans both rows, no longer sets their height */
        margin-bottom: 0;
    }

    .flow-node h3 {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
        line-height: 1.2;
    }

    .flow-node p {
        grid-column: 2;
        grid-row: 2;
        margin: 0;
        max-width: none;
        text-align: left;
        line-height: 1.35;
    }

    .flow-arrow { display: none; }

    .flow-icon {
        width: 68px;
        height: 68px;
        font-size: 1.5rem;
    }

    .flow-badge {
        width: 26px;
        height: 26px;
        font-size: 0.62rem;
    }
}




/* =========================================
   SECTION 6 — FULL-BLEED VIDEO CTA
   Mirrors the site-wide .contact-cta banner treatment.
   ========================================= */
.cyb-cta-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: var(--color-white);
    padding: 3.5rem 0;
    text-align: center;
}

.cyb-cta-section .cta-bg-image,
.cyb-cta-section .cta-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    display: block;
    pointer-events: none;
}

.cyb-cta-section .cta-video-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(135deg,
                rgba(126, 138, 150, 0.13) 0%,
                rgba(243, 246, 250, 0.58) 50%,
                rgba(126, 138, 150, 0.13) 100%);
}

.cyb-cta-section .cta-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
}

.cyb-cta-section .cta-justify-heading {
    font-size: clamp(1.5rem, 2.9vw, 2.15rem) !important;
    color: var(--color-navy);
    text-align: center;
    margin: 0;
    line-height: 1.3;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.55);
}

.cyb-cta-section .cta-content h3 {
    color: var(--color-navy);
    font-size: 1.05rem;
    font-weight: 500;
    margin: 0;
    max-width: 720px;
}

/* main.css turns this button transparent-with-white-text on hover, which
   would vanish against the light band — flip it to navy instead. */
.cyb-cta-section .btn-solid-navy {
    background-color: var(--color-navy);
    color: var(--color-white);
    border-color: var(--color-navy);
}

.cyb-cta-section .btn-solid-navy:hover {
    background-color: transparent;
    color: var(--color-navy);
    border-color: var(--color-navy);
}

.cyb-cta-section .cta-button-group {
    margin: 0;
}

@media (max-width: 700px) {
    .cyb-cta-section { padding: 2.75rem 0; }
}