/*
==========================================================
TRUSTLINE CYBER & CLOUD GROUP — ENTERPRISE DESIGN SYSTEM
Ported from the NoveraCloud Consultancy design system.
Palette, type scale and components unchanged — brand name only.
==========================================================
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
    /* Brand */
    --primary: #0A4D8C;
    --primary-dark: #073763;
    --primary-light: #2F80ED;
    --secondary: #0E7490;
    --secondary-light: #14B8A6;
    --accent: #F59E0B;
    --accent-dark: #B97A08;
    --success: #22C55E;
    --danger: #DC2626;
    /* Vibrant accent palette — introduced for the Cloud page only.
     Deliberately kept separate from --primary/--secondary/--accent
     so nothing else on the site (nav, dashboard, other pages) shifts
     color when this is added. */
    --violet: #A855F7;
    --violet-dark: #7C3AED;
    --magenta: #D946EF;
    --sunset: #FB923C;
    --grad-vibrant: linear-gradient(120deg,#7C3AED 0%,#D946EF 55%,#FB923C 100%);
    /* Neutrals */
    --dark: #081827;
    --dark-2: #0F172A;
    --light: #F8FAFC;
    --white: #FFFFFF;
    --text: #1E293B;
    --text-light: #4B5876;
    --border: #E2E8F0;
    /* Type */
    --font-body: 'Inter', "Segoe UI", Roboto, Arial, sans-serif;
    --font-mono: 'IBM Plex Mono', "Courier New", monospace;
    /* Shape */
    --radius-sm: 8px;
    --radius: 16px;
    --radius-lg: 26px;
    --shadow-sm: 0 8px 24px rgba(15,23,42,.06);
    --shadow: 0 20px 55px rgba(15,23,42,.10);
    --shadow-lg: 0 35px 85px rgba(15,23,42,.18);
    --transition: .32s cubic-bezier(.4,0,.2,1);
    --grad-line: linear-gradient(90deg, var(--primary-light), var(--secondary-light) 55%, var(--accent));
    --grad-hero: linear-gradient(150deg, #071726 0%, #0B3D91 48%, #0F766E 120%);
}

/*==========================================================
RESET
==========================================================*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background: var(--light);
    color: var(--text);
    line-height: 1.75;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    font-size: 16px;
}

img {
    display: block;
    max-width: 100%;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

button {
    font-family: inherit;
    border: none;
    background: none;
    cursor: pointer;
}

.container {
    width: 100%;
    max-width: 1280px;
    margin: auto;
    padding: 0 32px;
}

.section {
    padding: 120px 0;
    position: relative;
}

/* Global tilt-on-hover base — site.js sets the transform inline on
   mousemove; this makes the return-to-flat on mouseleave smooth
   instead of snapping. */
.tilt-card {
    transition: transform .35s cubic-bezier(.4,0,.2,1);
    will-change: transform;
}

:focus-visible {
    outline: 2px solid var(--primary-light);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/*==========================================================
SCROLL REVEAL (JS toggles .in-view) — still used by the
server-rendered sections (Mandate, Offer, Method, Impact, Trust).
The nav, stats strip, hero ledger and contact form are React
islands now and manage their own reveal/animation state instead.
==========================================================*/

[data-reveal] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1);
}

    [data-reveal].in-view {
        opacity: 1;
        transform: translateY(0);
    }

[data-reveal="stagger"] > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s ease, transform .6s ease;
}

[data-reveal="stagger"].in-view > * {
    opacity: 1;
    transform: translateY(0);
}

    [data-reveal="stagger"].in-view > *:nth-child(1) {
        transition-delay: .05s;
    }

    [data-reveal="stagger"].in-view > *:nth-child(2) {
        transition-delay: .15s;
    }

    [data-reveal="stagger"].in-view > *:nth-child(3) {
        transition-delay: .25s;
    }

    [data-reveal="stagger"].in-view > *:nth-child(4) {
        transition-delay: .35s;
    }

    [data-reveal="stagger"].in-view > *:nth-child(5) {
        transition-delay: .45s;
    }

/*==========================================================
TYPOGRAPHY — larger scale, higher-contrast body copy
==========================================================*/

h1, h2, h3, h4 {
    font-family: var(--font-body);
    color: var(--dark);
    font-weight: 800;
    letter-spacing: -.02em;
}

h1 {
    font-size: 60px;
    line-height: 1.1;
}

h2 {
    font-size: 42px;
    line-height: 1.2;
    margin-bottom: 18px;
}

h3 {
    font-size: 24px;
    line-height: 1.35;
    margin-bottom: 14px;
    font-weight: 700;
}

p {
    font-size: 18px;
    color: var(--text-light);
    line-height: 1.9;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--primary);
}

    .eyebrow::before {
        content: "";
        width: 24px;
        height: 2px;
        background: var(--accent);
        border-radius: 2px;
    }

.section-head {
    max-width: 700px;
    margin-bottom: 64px;
    position: relative;
}

    .section-head.center {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .section-head p {
        font-size: 19px;
        margin-top: 18px;
    }

    /* Reusable gradient word treatment for headings on white/light
   sections (mirrors the hero's h1 span, but in brand blue→teal
   rather than the hero's pale cyan, since this sits on white).
   Wrap the key word in <span> to apply, e.g.
   <h2>Our <span>Methodology</span></h2> */
    .section-head h2 span {
        background: linear-gradient(90deg,var(--primary),var(--secondary-light));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.rule {
    height: 1px;
    background: var(--border);
    width: 100%;
}

    .rule.dark {
        background: rgba(255,255,255,.14);
    }

    .rule.grad {
        height: 3px;
        background: var(--grad-line);
        border-radius: 3px;
    }

/*==========================================================
BUTTONS
==========================================================*/

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 32px;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .01em;
    transition: var(--transition);
    cursor: pointer;
    white-space: nowrap;
    border: none;
    position: relative;
    overflow: hidden;
}

/* Global ripple — spans injected by site.js on click, on any .btn
   on any page (including React-rendered buttons/links) */
.btn-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.55);
    transform: scale(0);
    pointer-events: none;
    animation: btnRipple .6s ease-out forwards;
}

.btn-outline .btn-ripple, .btn-outline-light .btn-ripple {
    background: rgba(255,255,255,.35);
}

@keyframes btnRipple {
    to {
        transform: scale(1);
        opacity: 0;
    }
}

@media(prefers-reduced-motion:reduce) {
    .btn-ripple {
        display: none;
    }
}

.btn-primary {
    background: linear-gradient(135deg,var(--primary),var(--primary-light));
    color: #fff;
    box-shadow: 0 14px 30px rgba(47,128,237,.28);
    position: relative;
    overflow: hidden;
}

    .btn-primary::after {
        content: "";
        position: absolute;
        top: 0;
        left: -60%;
        width: 40%;
        height: 100%;
        background: linear-gradient(115deg,transparent,rgba(255,255,255,.35),transparent);
        transform: skewX(-20deg);
        transition: left .55s ease;
    }

    .btn-primary:hover::after {
        left: 120%;
    }

    .btn-primary:hover {
        transform: translateY(-3px);
        box-shadow: 0 20px 42px rgba(47,128,237,.4);
    }

    .btn-primary:disabled {
        opacity: .6;
        cursor: not-allowed;
        transform: none;
    }

.btn-outline-light {
    background: transparent;
    border: 1.5px solid rgba(255,255,255,.4);
    color: #fff;
}

    .btn-outline-light:hover {
        background: #fff;
        color: var(--dark);
        border-color: #fff;
    }

.btn-accent {
    background: linear-gradient(135deg,var(--accent),var(--accent-dark));
    color: #fff;
    box-shadow: 0 14px 30px rgba(245,158,11,.3);
}

    .btn-accent:hover {
        transform: translateY(-3px);
        box-shadow: 0 20px 42px rgba(245,158,11,.42);
    }

/*==========================================================
NAVIGATION
==========================================================*/

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(248,250,252,.9);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    z-index: 1000;
    transition: var(--transition);
}

    .navbar.scrolled {
        box-shadow: 0 10px 30px rgba(15,23,42,.08);
        background: rgba(248,250,252,.98);
    }

.nav-container {
    width: 100%;
    height: 88px;
    padding: 0 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    transition: var(--transition);
}

.navbar.scrolled .nav-container {
    height: 74px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 13px;
    flex-shrink: 0;
}

.logo-mark {
    width: 46px;
    height: 46px;
    object-fit: contain;
    flex-shrink: 0;
    transition: var(--transition);
}

.navbar.scrolled .logo-mark {
    width: 40px;
    height: 40px;
}

.logo-text h2 {
    font-size: 19px;
    margin: 0;
    color: var(--dark);
    font-weight: 800;
    letter-spacing: -.01em;
}

.logo-text span {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-light);
    margin-top: 2px;
}

.nav-links {
    display: flex;
    gap: 38px;
    align-items: center;
}

    .nav-links > li {
        display: flex;
        align-items: center;
    }

    .nav-links a {
        font-size: 15px;
        font-weight: 600;
        color: var(--text);
        position: relative;
        padding: 6px 0;
        white-space: nowrap;
    }

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

        .nav-links a:hover {
            color: var(--primary);
        }

            .nav-links a:hover::after, .nav-links a.active::after {
                width: 100%;
            }

        .nav-links a.active {
            color: var(--primary);
        }

/* ---------- Solutions dropdown (desktop) ---------- */

.nav-has-dropdown {
    position: relative;
}

    .nav-has-dropdown > a {
        display: flex;
        align-items: center;
        gap: 6px;
    }

.nav-dropdown-caret {
    font-size: 10px;
    transition: transform .25s ease;
}

.nav-has-dropdown:hover .nav-dropdown-caret {
    transform: rotate(180deg);
}

.nav-dropdown {
    position: absolute;
    top: calc(100% + 18px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    width: 320px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 10px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
    z-index: 1200;
}

.nav-has-dropdown:hover .nav-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
/* invisible bridge so the mouse can travel from the link to the panel
   without the dropdown closing in the gap between them */
.nav-dropdown::before {
    content: "";
    position: absolute;
    top: -18px;
    left: 0;
    width: 100%;
    height: 18px;
}
/* small connector arrow pointing back up at the "Solutions" link,
   so the panel visually belongs to that trigger rather than floating */
.nav-dropdown::after {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: #fff;
    border-left: 1px solid var(--border);
    border-top: 1px solid var(--border);
    border-radius: 2px 0 0 0;
}

.nav-dropdown-heading {
    display: block;
    padding: 8px 14px 6px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-light);
}

.nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 10px;
    color: var(--text) !important;
    position: relative;
    overflow: hidden;
}

    .nav-dropdown-item::after {
        display: none;
    }

    .nav-dropdown-item:hover {
        background: var(--light);
    }

        .nav-dropdown-item:hover .nav-dropdown-item-icon {
            transform: scale(1.08);
        }

.nav-dropdown-item-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    transition: var(--transition);
}
/* Icon chip colour rotates through the same three-colour theme
   used everywhere else (method steps, outcomes, testimonials) */
.nav-dropdown-item:nth-child(2) .nav-dropdown-item-icon {
    background: linear-gradient(135deg,var(--danger),#EF4444);
}

.nav-dropdown-item:nth-child(3) .nav-dropdown-item-icon {
    background: linear-gradient(135deg,var(--primary),var(--primary-light));
}

.nav-dropdown-item:nth-child(4) .nav-dropdown-item-icon {
    background: linear-gradient(135deg,var(--secondary),var(--secondary-light));
}

.nav-dropdown-item:nth-child(5) .nav-dropdown-item-icon {
    background: linear-gradient(135deg,var(--accent-dark),var(--accent));
}

.nav-dropdown-item-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.nav-dropdown-item-label {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--dark);
}

.nav-dropdown-item:hover .nav-dropdown-item-label {
    color: var(--primary);
}

.nav-dropdown-item-sub {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--text-light);
    letter-spacing: .01em;
    line-height: 1.5;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

    .nav-actions .btn {
        padding: 13px 24px;
        font-size: 14px;
    }

.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border);
    flex-direction: column;
    gap: 5px;
}

    .nav-toggle span {
        display: block;
        width: 20px;
        height: 2px;
        background: var(--dark);
        transition: var(--transition);
    }

    .nav-toggle.open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .nav-toggle.open span:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle.open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

.mobile-menu {
    display: none;
    max-height: 0;
    overflow: hidden;
    background: var(--light);
    border-bottom: 1px solid var(--border);
    transition: max-height .4s ease;
}

    .mobile-menu.open {
        max-height: 440px;
    }

.mobile-menu-inner {
    padding: 14px 22px 26px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mobile-menu a {
    padding: 14px 4px;
    font-weight: 600;
    font-size: 16px;
    color: var(--dark);
    border-bottom: 1px solid var(--border);
}

.mobile-menu .mobile-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.mobile-menu-group {
    border-bottom: 1px solid var(--border);
}

.mobile-menu-group-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 4px;
    font-weight: 600;
    font-size: 16px;
    color: var(--dark);
    background: none;
    border: none;
    text-align: left;
}

    .mobile-menu-group-toggle i {
        font-size: 13px;
        color: var(--text-light);
        transition: transform .25s ease;
    }

    .mobile-menu-group-toggle.open i {
        transform: rotate(180deg);
    }

.mobile-menu-submenu {
    display: flex;
    flex-direction: column;
    padding: 0 0 12px 14px;
}

    .mobile-menu-submenu a {
        border-bottom: none;
        font-size: 14.5px;
        font-weight: 600;
        color: var(--primary);
        padding: 10px 4px;
    }

@media(max-width:1150px) {
    .nav-links {
        gap: 22px;
    }

        .nav-links a {
            font-size: 14px;
        }
}

@media(max-width:1000px) {
    .nav-links {
        display: none;
    }

    .nav-actions .btn-outline {
        display: none;
    }

    .nav-toggle {
        display: flex;
    }

    .mobile-menu {
        display: block;
    }

    .logo-text span {
        display: none;
    }
}

@media(max-width:600px) {
    .nav-container {
        padding: 0 20px;
        height: 76px;
    }
}

/*==========================================================
HERO
==========================================================*/

.hero {
    position: relative;
    padding: 195px 0 110px;
    background: var(--grad-hero);
    color: #fff;
    overflow: hidden;
}

    .hero::before {
        content: "";
        position: absolute;
        top: -180px;
        right: -180px;
        width: 700px;
        height: 700px;
        border-radius: 50%;
        background: radial-gradient(rgba(47,128,237,.22),transparent 70%);
    }

    .hero::after {
        content: "";
        position: absolute;
        bottom: -220px;
        left: -200px;
        width: 650px;
        height: 650px;
        border-radius: 50%;
        background: radial-gradient(rgba(20,184,166,.22),transparent 70%);
    }

/* tsParticles mounts into this div (see Index.cshtml's Scripts
   section) — sits behind .hero-grid (z-index:2) and above the two
   radial glows above. Falls back to just those glows with no
   particles if the CDN script fails to load, so the hero never
   looks broken. */
#hero-particles {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* Generic reusable version — used on interior pages (Cloud, and
   every page after it) instead of a new per-page ID rule each
   time. Same positioning as #hero-particles above; that one stays
   for backward compatibility with the homepage's existing JS. */
.particles-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

@keyframes heroFloat {
    0%,100% {
        transform: translateY(0) translateX(0);
        opacity: .5;
    }

    50% {
        transform: translateY(-22px) translateX(10px);
        opacity: 1;
    }
}

/* Hero text column entrance is now driven by a GSAP timeline
   (see Index.cshtml's Scripts section) rather than CSS keyframes,
   for finer easing/sequencing control. Elements start hidden here
   so there's no flash of unanimated content before GSAP runs;
   the inline script removes .gsap-init on load as a safety net
   in case the GSAP CDN fails. */
.hero-content.gsap-init > * {
    opacity: 0;
    transform: translateY(22px);
}

@media(prefers-reduced-motion:reduce) {
    .hero-content.gsap-init > * {
        opacity: 1;
        transform: none;
    }
}

/* Generic version of the same pattern — decoupled from the
   .hero-content class name so any page's hero/intro block can use
   it (Cloud's .cloud-hero-intro, and every interior page after it)
   without needing a new CSS rule per page. */
.gsap-stagger > * {
    opacity: 0;
    transform: translateY(22px);
}

@media(prefers-reduced-motion:reduce) {
    .gsap-stagger > * {
        opacity: 1;
        transform: none;
    }
}


/* Shorter hero for interior pages (Consulting, Impact) — same
   background/glow treatment, less vertical real estate since
   there's no ledger card to balance against */
.hero.page-hero {
    padding: 195px 0 90px;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 70px;
    align-items: start;
    position: relative;
    z-index: 2;
}

.hero-illustration {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 30px 60px rgba(3,10,25,.35));
    animation: floatCard 7s ease-in-out infinite;
}

.hero-content .eyebrow {
    color: #7DD3FC;
}

    .hero-content .eyebrow::before {
        background: var(--accent);
    }

.hero h1 {
    color: #fff;
    margin: 22px 0 26px;
    font-size: 56px;
}

    .hero h1 span {
        display: block;
        background: linear-gradient(90deg,#7DD3FC,#5EEAD4);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.hero-content p {
    font-size: 20px;
    color: rgba(255,255,255,.82);
    max-width: 580px;
    margin-bottom: 42px;
}

.hero-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 52px;
}

.hero-meta {
    display: flex;
    gap: 38px;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 13px;
    color: rgba(255,255,255,.6);
    letter-spacing: .02em;
}

    .hero-meta strong {
        color: #fff;
        font-weight: 700;
        font-size: 15px;
    }

/*==========================================================
PENTEST SCAN — new visual sitting above the posture ledger.
A dark terminal simulates a live security scan: lines type out
one at a time, a scan-line sweeps continuously, and an SVG ring
fills in step with progress. Once the scan "completes", two
result badges appear, then the whole thing resets and loops —
narratively leading straight into the findings ledger below.
==========================================================*/

.hero-visual {
    display: flex;
    flex-direction: column;
}

.pentest-scan {
    background: #0B0F1A;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(3,10,25,.4);
    position: relative;
    animation: floatCard 8s ease-in-out infinite;
}

@media(prefers-reduced-motion:reduce) {
    .pentest-scan {
        animation: none;
    }
}

.pentest-scan-chrome {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255,255,255,.1);
}

    .pentest-scan-chrome span {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: rgba(255,255,255,.25);
    }

        .pentest-scan-chrome span:nth-child(1) {
            background: #F87171;
        }

        .pentest-scan-chrome span:nth-child(2) {
            background: #FBBF24;
        }

        .pentest-scan-chrome span:nth-child(3) {
            background: #5EEAD4;
        }

    .pentest-scan-chrome b {
        margin-left: 10px;
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 600;
        color: rgba(255,255,255,.55);
    }

.pentest-scan-live {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .08em;
    color: #fff;
    background: rgba(220,38,38,.22);
    padding: 4px 10px;
    border-radius: 20px;
}

    .pentest-scan-live .cyber-status-dot {
        color: #F87171;
    }

.pentest-scan-main {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    padding: 20px 22px;
    align-items: center;
}

.pentest-scan-terminal {
    position: relative;
    overflow: hidden;
    min-height: 150px;
}

.pentest-scan-scanline {
    position: absolute;
    left: 0;
    right: 0;
    top: -22px;
    height: 26px;
    background: linear-gradient(180deg,transparent,rgba(94,234,212,.16),transparent);
    animation: scanSweep 2.6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes scanSweep {
    0% {
        top: -22px;
    }

    100% {
        top: 100%;
    }
}

@media(prefers-reduced-motion:reduce) {
    .pentest-scan-scanline {
        display: none;
    }
}

.pentest-scan-body {
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.9;
    color: #5EEAD4;
    min-height: 150px;
}

.pentest-scan-line.typing-cursor::after {
    content: "|";
    margin-left: 2px;
    color: #7DD3FC;
    animation: erpCursorBlink .8s steps(1) infinite;
}

.pentest-scan-ring {
    position: relative;
    width: 96px;
    height: 96px;
    flex-shrink: 0;
}

    .pentest-scan-ring svg {
        width: 100%;
        height: 100%;
        transform: rotate(-90deg);
    }

.ring-track {
    fill: none;
    stroke: rgba(255,255,255,.1);
    stroke-width: 6;
}

.ring-fill {
    fill: none;
    stroke: #5EEAD4;
    stroke-width: 6;
    stroke-linecap: round;
    transition: stroke-dashoffset .1s linear;
}

.pentest-scan-ring-label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .pentest-scan-ring-label b {
        font-family: var(--font-mono);
        font-size: 18px;
        color: #fff;
    }

    .pentest-scan-ring-label span {
        font-family: var(--font-mono);
        font-size: 8.5px;
        color: rgba(255,255,255,.5);
        text-transform: uppercase;
        letter-spacing: .05em;
    }

.pentest-scan-footer {
    display: flex;
    gap: 10px;
    padding: 0 22px 20px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .4s ease,transform .4s ease;
}

    .pentest-scan-footer.show {
        opacity: 1;
        transform: translateY(0);
    }

.pentest-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 20px;
}

    .pentest-badge.warn {
        background: rgba(245,158,11,.18);
        color: #FBBF24;
    }

    .pentest-badge.ok {
        background: rgba(34,197,94,.18);
        color: #5EEAD4;
    }

.hero-visual-link {
    display: flex;
    justify-content: center;
    padding: 8px 0;
    color: rgba(10,77,140,.35);
    font-size: 16px;
    animation: linkBounce 1.8s ease-in-out infinite;
}

@keyframes linkBounce {
    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(4px);
    }
}

@media(prefers-reduced-motion:reduce) {
    .hero-visual-link {
        animation: none;
    }
}

@media(max-width:600px) {
    .pentest-scan-main {
        grid-template-columns: 1fr;
    }

    .pentest-scan-ring {
        margin: 0 auto;
    }
}

/*==========================================================
LEDGER — posture evaluation card
Now driven by the PostureLedger React island: --score, row
opacity/transform and the staggered delays are all set inline
by the component. The old rowIn keyframe + nth-child delay
rules are intentionally removed here to avoid the two animation
systems fighting over the same properties.
==========================================================*/

.ledger {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    color: var(--dark);
    position: relative;
    animation: floatCard 7s ease-in-out infinite;
}

@keyframes floatCard {
    0%,100% {
        transform: translateY(0);
    }

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

.ledger::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: var(--grad-line);
}

.ledger-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 20px 26px 16px;
    border-bottom: 1px solid var(--border);
}

.ledger-head-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .ledger-head-title i {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        background: linear-gradient(135deg,var(--primary),var(--secondary));
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        flex-shrink: 0;
    }

.ledger-head h4 {
    font-family: var(--font-body);
    font-size: 14.5px;
    font-weight: 700;
    color: var(--dark);
}

    .ledger-head h4 small {
        display: block;
        font-family: var(--font-mono);
        font-size: 10.5px;
        font-weight: 500;
        color: var(--text-light);
        text-transform: uppercase;
        letter-spacing: .05em;
        margin-top: 2px;
    }

.ledger-stamp {
    font-family: var(--font-mono);
    font-size: 10.5px;
    padding: 5px 11px;
    border-radius: 20px;
    background: rgba(34,197,94,.12);
    color: #15803D;
    font-weight: 700;
    letter-spacing: .03em;
    white-space: nowrap;
}

.ledger-score-row {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 26px;
    background: var(--light);
    border-bottom: 1px solid var(--border);
}

.gauge {
    --score: 0;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    flex-shrink: 0;
    background: conic-gradient(var(--primary-light) calc(var(--score)*3.6deg), var(--border) 0);
    transition: background 1.1s cubic-bezier(.4,0,.2,1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gauge-inner {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px var(--border);
}

    .gauge-inner b {
        font-size: 21px;
        color: var(--dark);
        line-height: 1;
    }

    .gauge-inner span {
        font-family: var(--font-mono);
        font-size: 9px;
        color: var(--text-light);
        margin-top: 2px;
    }

.ledger-score-text h4 {
    font-size: 15px;
    margin-bottom: 3px;
}

.ledger-score-text p {
    font-size: 13px;
    margin: 0;
    line-height: 1.55;
}

.ledger-body {
    padding: 6px 26px 14px;
}

.ledger-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

    .ledger-row:last-child {
        border-bottom: none;
    }

    .ledger-row:hover {
        transform: translateX(3px);
    }

    .ledger-row.is-gap {
        background: linear-gradient(90deg,rgba(220,38,38,.06),transparent 60%);
    }

    .ledger-row.is-partial {
        background: linear-gradient(90deg,rgba(245,158,11,.07),transparent 60%);
    }

    .ledger-row.is-active {
        background: linear-gradient(90deg,rgba(34,197,94,.07),transparent 60%);
    }

    .ledger-row .bar {
        width: 4px;
        height: 32px;
        border-radius: 4px;
        flex-shrink: 0;
        align-self: center;
    }

    .ledger-row.is-gap .bar {
        background: var(--danger);
    }

    .ledger-row.is-partial .bar {
        background: var(--accent);
    }

    .ledger-row.is-active .bar {
        background: var(--success);
    }

    .ledger-row .label {
        font-size: 14.5px;
        font-weight: 700;
        color: var(--dark);
        flex: 1;
    }

        .ledger-row .label small {
            display: block;
            font-family: var(--font-mono);
            font-size: 10.5px;
            font-weight: 500;
            color: var(--text-light);
            margin-top: 3px;
            text-transform: uppercase;
            letter-spacing: .03em;
        }

.tag {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 6px 12px 6px 10px;
    border-radius: 20px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .tag::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .tag.gap {
        background: rgba(220,38,38,.10);
        color: var(--danger);
    }

        .tag.gap::before {
            background: var(--danger);
        }

    .tag.partial {
        background: rgba(245,158,11,.14);
        color: var(--accent-dark);
    }

        .tag.partial::before {
            background: var(--accent-dark);
        }

    .tag.active {
        background: rgba(34,197,94,.12);
        color: #15803D;
    }

        .tag.active::before {
            background: #15803D;
        }

/* Extra pulsing dot on the "Active" tag specifically — a live,
   ongoing status rather than a static gap/partial finding */
.tag-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #15803D;
    flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(21,128,61,.5);
    animation: tagLivePulse 1.8s infinite;
}

@keyframes tagLivePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(21,128,61,.5);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(21,128,61,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(21,128,61,0);
    }
}

@media(prefers-reduced-motion:reduce) {
    .tag-live-dot {
        animation: none;
    }
}

.ledger-footer {
    padding: 14px 26px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .ledger-footer a {
        font-size: 13.5px;
        font-weight: 700;
        color: var(--primary);
        display: flex;
        align-items: center;
        gap: 6px;
    }

        .ledger-footer a:hover {
            color: var(--primary-light);
        }

    .ledger-footer span {
        font-family: var(--font-mono);
        font-size: 11px;
        color: var(--text-light);
    }

@media(max-width:1050px) {
    .hero-grid {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .hero {
        padding: 165px 0 90px;
    }

        .hero h1 {
            font-size: 44px;
        }
}

@media(max-width:600px) {
    .hero h1 {
        font-size: 34px;
    }

    .hero-content p {
        font-size: 18px;
    }

    .hero-buttons .btn {
        width: 100%;
    }

    .ledger-head, .ledger-body, .ledger-score-row, .ledger-footer {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/*==========================================================
STATS STRIP
==========================================================*/

.stats-dashboard {
    background: linear-gradient(160deg,var(--dark) 0%,var(--dark-2) 100%);
    padding: 56px 0;
    position: relative;
    overflow: hidden;
}

.stats-dashboard-glow {
    position: absolute;
    top: -180px;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(rgba(47,128,237,.14),rgba(20,184,166,.08) 55%,transparent 75%);
    pointer-events: none;
}

.stats-dashboard-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    color: rgba(255,255,255,.55);
    margin-bottom: 32px;
    position: relative;
    z-index: 2;
}

    .stats-dashboard-head .cyber-status-dot {
        color: #5EEAD4;
    }

.stats-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
    position: relative;
    z-index: 2;
}

.stat-tile {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 32px 20px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.1);
    opacity: 0;
    transform: translateY(18px) scale(.94);
    animation: tilePowerOn .6s cubic-bezier(.2,.9,.3,1.3) forwards;
    animation-delay: calc(var(--i) * .15s);
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

    .stat-tile::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
    }

    .stat-tile:hover {
        transform: translateY(-6px);
        border-color: rgba(255,255,255,.22);
        box-shadow: 0 20px 40px rgba(0,0,0,.3);
    }

@keyframes tilePowerOn {
    0% {
        opacity: 0;
        transform: translateY(18px) scale(.94);
        filter: brightness(1);
    }

    60% {
        opacity: 1;
        filter: brightness(1.6);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: brightness(1);
    }
}

@media(prefers-reduced-motion:reduce) {
    .stat-tile {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

.stat-tile-icon {
    position: relative;
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .stat-tile-icon i {
        position: relative;
        z-index: 2;
        font-size: 19px;
        color: #fff;
    }

.stat-tile-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px dashed rgba(255,255,255,.3);
    animation: tileRingSpin 12s linear infinite;
}

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

@media(prefers-reduced-motion:reduce) {
    .stat-tile-ring {
        animation: none;
    }
}

/* Four distinct faded card backgrounds, solid-gradient icon
   badges (not just a glow), and matching colour-tinted numbers —
   so each tile carries its own identity end-to-end, not just the
   icon ring. */
.stat-tile:nth-child(1) {
    background: linear-gradient(160deg,rgba(47,128,237,.16),rgba(47,128,237,.02) 75%);
}

    .stat-tile:nth-child(1)::before {
        background: var(--primary-light);
    }

    .stat-tile:nth-child(1) .stat-tile-icon {
        background: radial-gradient(circle,rgba(47,128,237,.3),transparent 72%);
    }

        .stat-tile:nth-child(1) .stat-tile-icon i {
            background: linear-gradient(135deg,var(--primary),var(--primary-light));
            width: 38px;
            height: 38px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
        }

    .stat-tile:nth-child(1) .stat-tile-ring {
        border-color: rgba(47,128,237,.5);
    }

    .stat-tile:nth-child(1) h2 {
        color: #93C5FD;
    }

.stat-tile:nth-child(2) {
    background: linear-gradient(160deg,rgba(20,184,166,.16),rgba(20,184,166,.02) 75%);
}

    .stat-tile:nth-child(2)::before {
        background: var(--secondary-light);
    }

    .stat-tile:nth-child(2) .stat-tile-icon {
        background: radial-gradient(circle,rgba(20,184,166,.3),transparent 72%);
    }

        .stat-tile:nth-child(2) .stat-tile-icon i {
            background: linear-gradient(135deg,var(--secondary),var(--secondary-light));
            width: 38px;
            height: 38px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
        }

    .stat-tile:nth-child(2) .stat-tile-ring {
        border-color: rgba(20,184,166,.5);
    }

    .stat-tile:nth-child(2) h2 {
        color: #5EEAD4;
    }

.stat-tile:nth-child(3) {
    background: linear-gradient(160deg,rgba(245,158,11,.18),rgba(245,158,11,.02) 75%);
}

    .stat-tile:nth-child(3)::before {
        background: var(--accent);
    }

    .stat-tile:nth-child(3) .stat-tile-icon {
        background: radial-gradient(circle,rgba(245,158,11,.32),transparent 72%);
    }

        .stat-tile:nth-child(3) .stat-tile-icon i {
            background: linear-gradient(135deg,var(--accent-dark),var(--accent));
            width: 38px;
            height: 38px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
        }

    .stat-tile:nth-child(3) .stat-tile-ring {
        border-color: rgba(245,158,11,.55);
    }

    .stat-tile:nth-child(3) h2 {
        color: #FBBF24;
    }

.stat-tile:nth-child(4) {
    background: linear-gradient(160deg,rgba(125,211,252,.15),rgba(125,211,252,.02) 75%);
}

    .stat-tile:nth-child(4)::before {
        background: #7DD3FC;
    }

    .stat-tile:nth-child(4) .stat-tile-icon {
        background: radial-gradient(circle,rgba(125,211,252,.3),transparent 72%);
    }

        .stat-tile:nth-child(4) .stat-tile-icon i {
            background: linear-gradient(135deg,var(--primary-dark),var(--primary));
            width: 38px;
            height: 38px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
        }

    .stat-tile:nth-child(4) .stat-tile-ring {
        border-color: rgba(125,211,252,.55);
    }

    .stat-tile:nth-child(4) h2 {
        color: #7DD3FC;
    }

.stat-tile h2 {
    font-family: var(--font-mono);
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 8px;
    letter-spacing: -.01em;
}

.stat-tile p {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255,255,255,.68);
    margin: 0;
}

@media(max-width:800px) {
    .stats-dashboard-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:500px) {
    .stats-dashboard-grid {
        grid-template-columns: 1fr;
    }
}

/*==========================================================
MANDATE — image block on one side, a short tagline at the top
of the text column (not a full-width centered statement), then
Mission/Vision as icon pillars beneath it.
==========================================================*/

.mandate {
    background: #fff;
    position: relative;
    overflow: hidden;
}

    /* Soft ambient glow behind the image — echoes the hero's radial
   gradients, at low opacity since this section is on white */
    .mandate::before {
        content: "";
        position: absolute;
        top: -140px;
        left: -160px;
        width: 640px;
        height: 640px;
        border-radius: 50%;
        background: radial-gradient(rgba(47,128,237,.06),transparent 70%);
        pointer-events: none;
    }

.mandate-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 76px;
    align-items: start;
    position: relative;
    z-index: 2;
}

.mandate-image {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    height: 520px;
}

/* ---------- Alternating Ken Burns image cycle ----------
   Two images cross-fade continuously, each with its own slow
   zoom/pan direction, so the panel never sits static — replaces
   the single fixed photo. */
.mandate-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

    .mandate-img.img1 {
        animation: mandateFade1 12s ease-in-out infinite, mandateZoomIn 12s ease-in-out infinite;
    }

    .mandate-img.img2 {
        animation: mandateFade2 12s ease-in-out infinite, mandateZoomOut 12s ease-in-out infinite;
    }

@keyframes mandateFade1 {
    0%,42% {
        opacity: 1;
    }

    50%,92% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes mandateFade2 {
    0%,42% {
        opacity: 0;
    }

    50%,92% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes mandateZoomIn {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.09);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes mandateZoomOut {
    0% {
        transform: scale(1.09);
    }

    50% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.09);
    }
}

@media(prefers-reduced-motion:reduce) {
    .mandate-img {
        animation: none;
    }

        .mandate-img.img2 {
            opacity: 0;
        }

        .mandate-img.img1 {
            opacity: 1;
        }
}

.mandate-image-badge {
    position: absolute;
    bottom: 24px;
    left: 24px;
    right: 24px;
    background: rgba(8,24,39,.82);
    backdrop-filter: blur(8px);
    border-radius: var(--radius-sm);
    padding: 18px 22px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 14px;
}

    .mandate-image-badge i {
        font-size: 22px;
        color: var(--accent);
    }

    .mandate-image-badge span {
        font-size: 13.5px;
        font-weight: 600;
        line-height: 1.5;
    }

/* Short tagline, top of the text column — not full-width/centered */
.mandate-tagline {
    font-size: 32px;
    line-height: 1.3;
    margin-top: 14px;
    margin-bottom: 36px;
}

    .mandate-tagline span {
        display: inline;
        background: linear-gradient(90deg,var(--primary),var(--secondary));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

/* Mission / Vision — icon pillars, not plain stacked text */
.mandate-pillars {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mandate-pillar {
    display: flex;
    gap: 20px;
    padding: 22px 0;
    border-bottom: 1px solid var(--border);
}

    .mandate-pillar:last-child {
        border-bottom: none;
    }

.mandate-pillar-icon {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 13px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    box-shadow: 0 10px 22px rgba(10,77,140,.18);
    opacity: 0;
    transform: scale(.4) rotate(-25deg);
    animation: pillarIconDrop .6s cubic-bezier(.2,1.4,.4,1) forwards;
}

.mandate-pillar:nth-child(2) .mandate-pillar-icon {
    animation-delay: .15s;
}

@keyframes pillarIconDrop {
    to {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

@media(prefers-reduced-motion:reduce) {
    .mandate-pillar-icon {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

.mandate-pillar:nth-child(1) .mandate-pillar-icon {
    background: linear-gradient(135deg,var(--primary),var(--primary-light));
}

.mandate-pillar:nth-child(2) .mandate-pillar-icon {
    background: linear-gradient(135deg,var(--secondary),var(--secondary-light));
    box-shadow: 0 10px 22px rgba(14,116,144,.2);
}

/* Mission — expanding "target lock" rings pulsing outward from
   the bullseye, like the icon is continuously being evaluated */
.mandate-pillar-ping {
    position: absolute;
    inset: 0;
    border-radius: 13px;
    border: 1.5px solid rgba(10,77,140,.5);
    animation: pillarPing 2.4s ease-out infinite;
    animation-delay: 1s;
}

@keyframes pillarPing {
    0% {
        transform: scale(1);
        opacity: .8;
    }

    100% {
        transform: scale(1.7);
        opacity: 0;
    }
}

@media(prefers-reduced-motion:reduce) {
    .mandate-pillar-ping {
        animation: none;
        opacity: 0;
    }
}

/* Vision — binoculars sweep gently side to side, like scanning
   the horizon */
.mandate-pillar:nth-child(2) .mandate-pillar-icon i {
    display: inline-block;
    animation: visionSweep 3.6s ease-in-out 1.6s infinite;
}

@keyframes visionSweep {
    0%,100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-12deg);
    }

    75% {
        transform: rotate(12deg);
    }
}

@media(prefers-reduced-motion:reduce) {
    .mandate-pillar:nth-child(2) .mandate-pillar-icon i {
        animation: none;
    }
}

.mandate-pillar h3 {
    font-size: 20px;
    margin-bottom: 7px;
}

.mandate-pillar:nth-child(1) h3 {
    color: var(--primary);
}

.mandate-pillar:nth-child(2) h3 {
    color: var(--secondary);
}

.mandate-pillar p {
    font-size: 15.5px;
    line-height: 1.8;
    margin-bottom: 0;
}

.values-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid var(--border);
}

.value-pill {
    position: relative;
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .02em;
    padding: 9px 18px;
    border-radius: 30px;
    border: 1px solid var(--border);
    color: var(--primary);
    background: var(--light);
    opacity: 0;
    transform: translateY(10px) scale(.92);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.values-row.aos-animate .value-pill {
    animation: valuePillIn .55s cubic-bezier(.2,.8,.3,1.1) forwards;
}

    .values-row.aos-animate .value-pill:nth-child(1) {
        animation-delay: .05s;
    }

    .values-row.aos-animate .value-pill:nth-child(2) {
        animation-delay: .22s;
    }

    .values-row.aos-animate .value-pill:nth-child(3) {
        animation-delay: .39s;
    }

    .values-row.aos-animate .value-pill:nth-child(4) {
        animation-delay: .56s;
    }

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

@media(prefers-reduced-motion:reduce) {
    .value-pill {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

/* A single, refined light sweep crosses each pill right as it
   settles into place — plays once, not a looping gimmick */
.value-pill::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(115deg,transparent,rgba(255,255,255,.7),transparent);
    transform: skewX(-20deg);
}

.values-row.aos-animate .value-pill::after {
    animation: valuePillShimmer .7s ease forwards;
}

.values-row.aos-animate .value-pill:nth-child(1)::after {
    animation-delay: .35s;
}

.values-row.aos-animate .value-pill:nth-child(2)::after {
    animation-delay: .52s;
}

.values-row.aos-animate .value-pill:nth-child(3)::after {
    animation-delay: .69s;
}

.values-row.aos-animate .value-pill:nth-child(4)::after {
    animation-delay: .86s;
}

@keyframes valuePillShimmer {
    0% {
        left: -60%;
    }

    100% {
        left: 130%;
    }
}

@media(prefers-reduced-motion:reduce) {
    .value-pill::after {
        display: none;
    }
}

.value-pill:hover {
    transform: translateY(-3px);
    border-color: currentColor;
}

.value-pill:nth-child(1):hover {
    box-shadow: 0 10px 22px rgba(10,77,140,.22);
}

.value-pill:nth-child(2):hover {
    box-shadow: 0 10px 22px rgba(14,116,144,.22);
}

.value-pill:nth-child(3):hover {
    box-shadow: 0 10px 22px rgba(245,158,11,.24);
}

.value-pill:nth-child(4):hover {
    box-shadow: 0 10px 22px rgba(34,197,94,.22);
}

.value-pill:nth-child(1) {
    color: var(--primary);
    background: rgba(10,77,140,.06);
    border-color: rgba(10,77,140,.18);
}

.value-pill:nth-child(2) {
    color: var(--secondary);
    background: rgba(14,116,144,.07);
    border-color: rgba(14,116,144,.2);
}

.value-pill:nth-child(3) {
    color: var(--accent-dark);
    background: rgba(245,158,11,.08);
    border-color: rgba(245,158,11,.22);
}

.value-pill:nth-child(4) {
    color: #15803D;
    background: rgba(34,197,94,.08);
    border-color: rgba(34,197,94,.22);
}

@media(max-width:900px) {
    .mandate-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .mandate-image img {
        height: 320px;
    }

    .mandate-tagline {
        font-size: 28px;
        margin-bottom: 28px;
    }
}

@media(max-width:600px) {
    .mandate-tagline {
        font-size: 24px;
    }

    .mandate-pillar {
        gap: 14px;
    }

    .mandate-pillar-icon {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }
}

/*==========================================================
DISCIPLINES — interactive selector replacing the old card grid.
Three disciplines (Evaluate → Secure → Build), each mapped to
one theme colour already used elsewhere in the system:
  01 Evaluation   → primary blue   (the thesis/entry point)
  02 Cybersecurity → danger red     (same red used for alerts/critical states)
  03 Cloud & Tech  → secondary teal (cloud/build, matches the grad-line teal)
No new hues introduced — same palette, deliberately distributed.
==========================================================*/

.offer {
    background: var(--light);
    position: relative;
}

/*==========================================================
DISCIPLINES BANNER — two-column module: a dark blue intro
panel (reuses the exact hero gradient, so this section echoes
the hero rather than introducing a new background treatment)
beside the interactive tab explorer. One bordered/shadowed
shell wraps both halves as a single fancy unit.
==========================================================*/

.disciplines-banner {
    display: grid;
    grid-template-columns: .85fr 1.35fr;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    align-items: stretch;
}

.disciplines-intro {
    background: var(--grad-hero);
    color: #fff;
    padding: 56px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

    .disciplines-intro::before {
        content: "";
        position: absolute;
        top: -140px;
        right: -120px;
        width: 340px;
        height: 340px;
        border-radius: 50%;
        background: radial-gradient(rgba(47,128,237,.3),transparent 70%);
        pointer-events: none;
    }

    .disciplines-intro::after {
        content: "";
        position: absolute;
        bottom: -160px;
        left: -100px;
        width: 320px;
        height: 320px;
        border-radius: 50%;
        background: radial-gradient(rgba(20,184,166,.22),transparent 70%);
        pointer-events: none;
    }

    .disciplines-intro .eyebrow {
        color: #7DD3FC;
        position: relative;
        z-index: 2;
    }

        .disciplines-intro .eyebrow::before {
            background: var(--accent);
        }

    .disciplines-intro h2 {
        color: #fff;
        font-size: 34px;
        line-height: 1.28;
        margin: 16px 0 20px;
        position: relative;
        z-index: 2;
    }

        .disciplines-intro h2 span {
            display: block;
            background: linear-gradient(90deg,#7DD3FC,#5EEAD4);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

    .disciplines-intro p {
        color: rgba(255,255,255,.78);
        font-size: 15.5px;
        line-height: 1.85;
        position: relative;
        z-index: 2;
        margin-bottom: 0;
    }

.disciplines {
    --pillar-color: var(--primary);
    --pillar-color-light: var(--primary-light);
}

.disciplines-shell {
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: 0;
    background: #fff;
    min-height: 100%;
}

/* Progress line across the top — reinforces "one framework, one flow" */
.disciplines-progress {
    grid-column: 1 / -1;
    height: 3px;
    background: var(--border);
    position: relative;
}

.disciplines-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg,var(--primary-light),var(--danger) 50%,var(--secondary-light));
    clip-path: inset(0 calc(100% - var(--progress, 16.6%)) 0 0);
    transition: clip-path .5s cubic-bezier(.4,0,.2,1);
}

/* Left rail — the three tabs */
.disciplines-tabs {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border);
    background: var(--light);
}

.disciplines-tab {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 26px 24px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    position: relative;
    transition: var(--transition);
    background: transparent;
}

    .disciplines-tab:last-child {
        border-bottom: none;
    }

    .disciplines-tab:hover {
        background: rgba(10,77,140,.03);
    }

    .disciplines-tab::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: var(--tab-color);
        opacity: 0;
        transition: var(--transition);
    }

    .disciplines-tab.active::before {
        opacity: 1;
    }

    .disciplines-tab.active {
        background: #fff;
    }

.disciplines-tab-index {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-light);
    letter-spacing: .05em;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--border);
    transition: var(--transition);
}

.disciplines-tab.active .disciplines-tab-index {
    background: var(--tab-color);
    color: #fff;
}

.disciplines-tab-text strong {
    display: block;
    font-size: 15.5px;
    color: var(--dark);
    margin-bottom: 4px;
}

.disciplines-tab-text small {
    font-size: 12.5px;
    color: var(--text-light);
    line-height: 1.5;
    display: block;
}

.disciplines-tab.active .disciplines-tab-text strong {
    color: var(--tab-color);
}

/* Right panel — active discipline detail. Background/heading use
   color-mix() against the dynamic --pillar-color custom property
   set on the wrapper, so the faded tint and text colour update
   automatically for whichever discipline is active — no per-
   discipline CSS class needed. Falls back to plain white in
   browsers without color-mix() support (Safari <16.2, older
   Firefox) since the fallback declaration comes first. */
.disciplines-panel {
    padding: 48px 52px;
    display: flex;
    flex-direction: column;
    position: relative;
    background: #fff;
    background: linear-gradient(165deg, color-mix(in srgb, var(--pillar-color) 9%, #fff), #fff 75%);
    transition: background .5s ease;
    animation: disciplinePanelFlip .6s cubic-bezier(.4,0,.2,1) both;
    transform-origin: left center;
}

@keyframes disciplinePanelFlip {
    0% {
        opacity: 0;
        transform: perspective(1000px) rotateY(-18deg) translateX(-10px);
    }

    100% {
        opacity: 1;
        transform: perspective(1000px) rotateY(0deg) translateX(0);
    }
}

@media(prefers-reduced-motion:reduce) {
    .disciplines-panel {
        animation: none;
    }
}

.disciplines-panel-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pillar-color);
    margin-bottom: 18px;
}

.disciplines-panel-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,var(--pillar-color),var(--pillar-color-light));
    color: #fff;
    font-size: 22px;
    margin-bottom: 20px;
    box-shadow: 0 12px 26px rgba(0,0,0,.12);
}

.disciplines-panel h3 {
    font-size: 27px;
    margin-bottom: 14px;
    color: var(--pillar-color);
}

.disciplines-panel > p {
    font-size: 16.5px;
    line-height: 1.8;
    max-width: 620px;
    margin-bottom: 8px;
}

.disciplines-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    gap: 14px 24px;
    margin: 26px 0 32px;
}

.disciplines-feature {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.5;
    opacity: 0;
    transform: translateY(10px);
    animation: featureIn .45s ease forwards;
}

    .disciplines-feature i {
        margin-top: 5px;
    }

    .disciplines-feature i {
        color: var(--pillar-color);
        font-size: 13px;
        margin-top: 4px;
        flex-shrink: 0;
    }

@keyframes featureIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.disciplines-panel .btn {
    align-self: flex-start;
    margin-top: auto;
}

@media(max-width:1100px) {
    .disciplines-banner {
        grid-template-columns: 1fr;
    }

    .disciplines-intro {
        padding: 44px 40px;
    }

        .disciplines-intro h2 {
            font-size: 28px;
        }
}

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

    .disciplines-tabs {
        flex-direction: row;
        overflow-x: auto;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .disciplines-tab {
        flex-direction: column;
        align-items: flex-start;
        min-width: 220px;
        border-bottom: none;
        border-right: 1px solid var(--border);
    }

        .disciplines-tab::before {
            width: 100%;
            height: 4px;
            top: auto;
            bottom: 0;
        }

    .disciplines-panel {
        padding: 34px 26px;
    }

    .disciplines-feature-grid {
        grid-template-columns: 1fr;
    }
}

@media(max-width:600px) {
    .disciplines-panel h3 {
        font-size: 22px;
    }

    .disciplines-panel-icon {
        width: 44px;
        height: 44px;
        font-size: 19px;
    }

    .disciplines-intro {
        padding: 36px 26px;
    }

        .disciplines-intro h2 {
            font-size: 24px;
        }
}

/*==========================================================
EVIDENCE BOARD — "Every engagement follows the same evidence
trail" via a rail that fills in real time as the reader scrolls
past each step, and that step's node lighting up from dim to
full colour exactly when reached — driven by actual scroll
position (see the JS in this page's Scripts section), not an
autoplay loop. Genuinely interactive rather than decorative.
==========================================================*/

.evidence-timeline {
    background: #fff;
    position: relative;
    padding: 130px 0;
}

.timeline-layout {
    display: grid;
    grid-template-columns: 1fr .8fr;
    gap: 64px;
    align-items: start;
    margin-top: 72px;
}

.timeline-scroll {
    position: relative;
}

.timeline-rail {
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 34px;
    width: 3px;
    background: var(--border);
    border-radius: 2px;
    z-index: 1;
}

.timeline-rail-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: linear-gradient(180deg,var(--primary),var(--secondary),var(--accent-dark),var(--primary-dark));
    border-radius: 2px;
    transition: height .15s linear;
}

@media(prefers-reduced-motion:reduce) {
    .timeline-rail-fill {
        transition: none;
    }
}

.timeline-step {
    position: relative;
    display: flex;
    gap: 28px;
    padding-bottom: 56px;
}

    .timeline-step:last-child {
        padding-bottom: 0;
    }

.timeline-node {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    color: var(--border);
    transition: color .4s ease, border-color .4s ease, box-shadow .4s ease, transform .4s cubic-bezier(.2,1.3,.4,1);
}

.timeline-num {
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 10px;
    letter-spacing: .03em;
}

.timeline-node i {
    font-size: 19px;
}

/* Dim by default, light up in real colour once the scroll
   position reaches this step */
.timeline-step:nth-child(2) .timeline-node {
    --step-color: var(--primary);
}

.timeline-step:nth-child(3) .timeline-node {
    --step-color: var(--secondary);
}

.timeline-step:nth-child(4) .timeline-node {
    --step-color: var(--accent-dark);
}

.timeline-step:nth-child(5) .timeline-node {
    --step-color: var(--primary-dark);
}

.timeline-step.active .timeline-node {
    color: #fff;
    background: var(--step-color);
    border-color: var(--step-color);
    box-shadow: 0 12px 26px -4px var(--step-color);
    transform: scale(1.08);
}

.timeline-content {
    padding-top: 8px;
}

.timeline-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 8px;
    transition: color .4s ease, opacity .4s ease;
    opacity: .75;
}
/* Muted theme colour at rest instead of flat grey — the phase
   already reads as "part of the sequence" before it activates */
.timeline-step:nth-child(2) .timeline-tag {
    color: var(--primary);
}

.timeline-step:nth-child(3) .timeline-tag {
    color: var(--secondary);
}

.timeline-step:nth-child(4) .timeline-tag {
    color: var(--accent-dark);
}

.timeline-step:nth-child(5) .timeline-tag {
    color: var(--primary-dark);
}

.timeline-step.active .timeline-tag {
    color: var(--step-color);
    opacity: 1;
}

.timeline-content h3 {
    font-size: 22px;
    margin-bottom: 8px;
    color: var(--dark);
    transition: color .4s ease;
}

.timeline-step.active .timeline-content h3 {
    color: var(--step-color);
}

.timeline-content p {
    font-size: 15.5px;
    line-height: 1.8;
    margin: 0;
    color: var(--text-light);
    max-width: 460px;
}

/* ---------- Right-side process illustration ----------
   A vertical pipe with four stations, mirroring the same
   scroll-driven activation as the timeline on the left (see the
   JS): a needle rotates to point at whichever phase is currently
   active as the reader scrolls — a compass, not a second copy of
   the rail on the left — with two faint rings drifting slowly in
   the background for ambient motion between activations. */
.process-illustration {
    position: sticky;
    top: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 44px 24px;
    background: var(--light);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    min-height: 420px;
}

.compass {
    position: relative;
    width: 280px;
    height: 280px;
}

.compass-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px dashed var(--border);
}

    .compass-ring.r1 {
        animation: compassDrift 30s linear infinite;
    }

    .compass-ring.r2 {
        inset: 34px;
        animation: compassDrift 22s linear infinite reverse;
    }

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

@media(prefers-reduced-motion:reduce) {
    .compass-ring {
        animation: none;
    }
}

.compass-needle {
    position: absolute;
    bottom: 50%;
    left: 50%;
    width: 4px;
    height: 96px;
    transform-origin: bottom center;
    transform: translateX(-50%) rotate(0deg);
    background: linear-gradient(180deg,var(--danger),rgba(220,38,38,.15));
    border-radius: 4px 4px 0 0;
    z-index: 3;
    transition: transform .6s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 0 10px rgba(220,38,38,.4);
}

@media(prefers-reduced-motion:reduce) {
    .compass-needle {
        transition: none;
    }
}

.compass-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    z-index: 4;
    background: linear-gradient(135deg,var(--primary-dark),var(--primary));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    box-shadow: 0 10px 22px rgba(10,77,140,.3);
}

.process-station {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 84px;
}

.cs-n {
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
}

.cs-e {
    top: 50%;
    right: -8px;
    transform: translateY(-50%);
}

.cs-s {
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
}

.cs-w {
    top: 50%;
    left: -8px;
    transform: translateY(-50%);
}

.process-station-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--border);
    color: var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    transition: color .4s ease, border-color .4s ease, box-shadow .4s ease, transform .4s cubic-bezier(.2,1.3,.4,1);
}

.process-station span {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--text-light);
    transition: color .4s ease;
}

.process-station.cs-n {
    --step-color: var(--primary);
}

.process-station.cs-e {
    --step-color: var(--secondary);
}

.process-station.cs-s {
    --step-color: var(--accent-dark);
}

.process-station.cs-w {
    --step-color: var(--primary-dark);
}

.process-station.active .process-station-icon {
    color: #fff;
    background: var(--step-color);
    border-color: var(--step-color);
    box-shadow: 0 12px 26px -4px var(--step-color);
    transform: scale(1.14);
}

.process-station.active span {
    color: var(--step-color);
}

@media(max-width:960px) {
    .timeline-layout {
        grid-template-columns: 1fr;
    }

    .process-illustration {
        position: relative;
        top: 0;
        margin-top: 12px;
        min-height: 340px;
    }

    .compass {
        width: 240px;
        height: 240px;
    }
}

@media(max-width:600px) {
    .timeline-rail {
        left: 26px;
    }

    .timeline-node {
        width: 54px;
        height: 54px;
    }

    .timeline-num {
        font-size: 9px;
    }

    .timeline-node i {
        font-size: 16px;
    }

    .timeline-step {
        gap: 18px;
        padding-bottom: 44px;
    }
}

/*==========================================================
IMPACT PROGRAM — with sector images
==========================================================*/

.impact {
    background: linear-gradient(160deg,#081220 0%,#0B3D91 55%,#0F766E 130%);
    background-size: 220% 220%;
    animation: impactGradientShift 18s ease-in-out infinite;
    color: #fff;
    position: relative;
    overflow: hidden;
}

@keyframes impactGradientShift {
    0%,100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

@media(prefers-reduced-motion:reduce) {
    .impact {
        animation: none;
    }
}
/* Three balanced glows — blue, teal, amber — instead of one
   dominant blue-to-teal wash, so the section reads as "dark with
   full-palette accents" rather than "blue section" */
.impact::before {
    content: "";
    position: absolute;
    top: -250px;
    right: -180px;
    width: 650px;
    height: 650px;
    border-radius: 50%;
    background: radial-gradient(rgba(47,128,237,.16),transparent 72%);
}

.impact::after {
    content: "";
    position: absolute;
    bottom: -280px;
    left: -200px;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(rgba(20,184,166,.15),transparent 70%);
}

.impact-inner {
    position: relative;
    z-index: 2;
}

    .impact-inner::before {
        content: "";
        position: absolute;
        top: 20%;
        left: 38%;
        width: 420px;
        height: 420px;
        border-radius: 50%;
        background: radial-gradient(rgba(245,158,11,.1),transparent 70%);
        pointer-events: none;
        z-index: -1;
    }

.impact-top {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 70px;
    margin-bottom: 70px;
}

    .impact-top .eyebrow {
        color: #7DD3FC;
    }

        .impact-top .eyebrow::before {
            background: var(--accent);
        }

    .impact-top h2 {
        color: #fff;
    }

    .impact-top p {
        color: rgba(255,255,255,.8);
        font-size: 19px;
    }

/* Right-hand card — white/cream instead of the old dark-glass
   treatment, so it reads as a distinct "fact card" against the
   dark section rather than blending into it as more dark-blue */
.impact-model {
    background: linear-gradient(165deg,#FFFDF8,#FFFFFF);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 30px 70px rgba(3,10,25,.3);
    position: relative;
}

/* Connecting line running behind the three icon badges, with a
   glowing pulse travelling its length continuously once the
   card has revealed — a small mechanism, but genuine motion,
   not just a static fact list. */
.impact-model-connector {
    position: absolute;
    top: 44px;
    bottom: 44px;
    left: 46px;
    width: 2px;
    background: var(--border);
    z-index: 1;
}

.impact-model-pulse {
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transform: translateX(-50%);
    background: var(--primary-light);
    box-shadow: 0 0 12px 3px rgba(47,128,237,.55);
    animation: impactPulseTravel 4.5s ease-in-out infinite;
}

@keyframes impactPulseTravel {
    0% {
        top: 0;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        top: 100%;
        opacity: 0;
    }
}

@media(prefers-reduced-motion:reduce) {
    .impact-model-pulse {
        display: none;
    }
}

.impact-model-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 26px;
    border-bottom: 1px solid var(--border);
    opacity: 0;
    transform: translateX(-14px);
    transition: opacity .5s ease,transform .5s ease;
    position: relative;
    z-index: 2;
}

.impact-model-text {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--text);
    line-height: 1.7;
}

.impact-model-row:last-child {
    border-bottom: none;
}
/* Staggered reveal, keyed off AOS's own .aos-animate class on the
   parent (fires once the card scrolls into view) — a second, finer
   layer of motion inside the AOS-driven card itself */
.impact-model.aos-animate .impact-model-row:nth-child(2) {
    transition-delay: .15s;
}

.impact-model.aos-animate .impact-model-row:nth-child(3) {
    transition-delay: .32s;
}

.impact-model.aos-animate .impact-model-row:nth-child(4) {
    transition-delay: .49s;
}

.impact-model.aos-animate .impact-model-row {
    opacity: 1;
    transform: translateX(0);
}

@media(prefers-reduced-motion:reduce) {
    .impact-model-row {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.impact-model-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 15px;
    box-shadow: 0 8px 16px rgba(0,0,0,.16);
    transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}

.impact-model-row:hover .impact-model-icon {
    transform: scale(1.15) rotate(-6deg);
}

.impact-model-row:nth-child(2) {
    background: linear-gradient(90deg,rgba(10,77,140,.07),transparent);
    border-left: 4px solid var(--primary);
}

    .impact-model-row:nth-child(2) b {
        color: var(--primary);
    }

    .impact-model-row:nth-child(2) .impact-model-icon {
        background: linear-gradient(135deg,var(--primary),var(--primary-light));
    }

.impact-model-row:nth-child(3) {
    background: linear-gradient(90deg,rgba(14,116,144,.08),transparent);
    border-left: 4px solid var(--secondary);
}

    .impact-model-row:nth-child(3) b {
        color: var(--secondary);
    }

    .impact-model-row:nth-child(3) .impact-model-icon {
        background: linear-gradient(135deg,var(--secondary),var(--secondary-light));
    }

.impact-model-row:nth-child(4) {
    background: linear-gradient(90deg,rgba(245,158,11,.09),transparent);
    border-left: 4px solid var(--accent-dark);
}

    .impact-model-row:nth-child(4) b {
        color: var(--accent-dark);
    }

    .impact-model-row:nth-child(4) .impact-model-icon {
        background: linear-gradient(135deg,var(--accent-dark),var(--accent));
    }

.impact-sectors {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 24px;
}

.sector-block {
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.14);
    transition: var(--transition);
}

    .sector-block:hover {
        transform: translateY(-8px);
        box-shadow: var(--shadow-lg);
    }

/* Faded radial wash per sector, alternating angle for a bit of
   visual rhythm across the row, plus a slow ambient breathing
   glow so the row feels alive even before you hover it.
   Water = green, Education = brown, Health = blue. */
.sector-water {
    background: radial-gradient(140% 100% at 15% 0%,rgba(34,197,94,.2),rgba(34,197,94,.02) 65%);
    border-color: rgba(34,197,94,.32);
    animation: sectorBreathe 6s ease-in-out infinite;
}

.sector-education {
    background: radial-gradient(140% 100% at 85% 0%,rgba(139,94,52,.22),rgba(139,94,52,.02) 65%);
    border-color: rgba(139,94,52,.32);
    animation: sectorBreathe 6s ease-in-out infinite;
    animation-delay: 1.2s;
}

.sector-health {
    background: radial-gradient(140% 100% at 15% 0%,rgba(10,77,140,.2),rgba(10,77,140,.02) 65%);
    border-color: rgba(10,77,140,.32);
    animation: sectorBreathe 6s ease-in-out infinite;
    animation-delay: 2.4s;
}

@keyframes sectorBreathe {
    0%,100% {
        box-shadow: 0 0 0 rgba(0,0,0,0);
    }

    50% {
        box-shadow: 0 0 32px -6px currentColor;
    }
}

.sector-water {
    color: rgba(34,197,94,.35);
}

.sector-education {
    color: rgba(139,94,52,.35);
}

.sector-health {
    color: rgba(10,77,140,.35);
}

@media(prefers-reduced-motion:reduce) {
    .sector-water, .sector-education, .sector-health {
        animation: none;
    }
}

.sector-image {
    height: 150px;
    overflow: hidden;
}

    .sector-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: .5s;
    }

.sector-block:hover .sector-image img {
    transform: scale(1.08);
}

/* Icon micro-bounce on hover — small extra life on the card's
   own header icon, on top of the image zoom */
.sector-content i {
    transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}

.sector-block:hover .sector-content i {
    transform: scale(1.25) rotate(-6deg);
}

.sector-content {
    padding: 26px 24px;
}

.sector-water .sector-content {
    background: linear-gradient(165deg,rgba(34,197,94,.09),#fff 70%);
}

.sector-education .sector-content {
    background: linear-gradient(165deg,rgba(139,94,52,.1),#fff 70%);
}

.sector-health .sector-content {
    background: linear-gradient(165deg,rgba(10,77,140,.08),#fff 70%);
}

.sector-content i {
    font-size: 22px;
    margin-bottom: 14px;
    display: block;
}

.sector-water .sector-content i {
    color: #15803D;
}

.sector-education .sector-content i {
    color: #6B4423;
}

.sector-health .sector-content i {
    color: var(--primary);
}

.sector-content h3 {
    font-size: 19px;
}

.sector-water .sector-content h3 {
    color: #15803D;
}

.sector-education .sector-content h3 {
    color: #6B4423;
}

.sector-health .sector-content h3 {
    color: var(--primary);
}

.sector-content p {
    color: var(--text-light);
    font-size: 15px;
}

.sector-list {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

    .sector-list li {
        display: flex;
        align-items: flex-start;
        gap: 9px;
        font-size: 13.5px;
        font-weight: 600;
        line-height: 1.5;
        color: var(--text);
    }

        .sector-list li i {
            font-size: 12px;
            margin-top: 3px;
            flex-shrink: 0;
        }

.sector-water .sector-list li i {
    color: #15803D;
}

.sector-education .sector-list li i {
    color: #6B4423;
}

.sector-health .sector-list li i {
    color: var(--primary);
}

@media(max-width:1000px) {
    .impact-top {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .impact-sectors {
        grid-template-columns: 1fr;
    }
}

/*==========================================================
WATER SECTOR PAGE — dedicated deep-dive page for the Water
Sector Impact Program. Reuses .challenges-layout/.method-grid
from the Cloud page for consistency; adds a hero, a funding
model strip, and a pillar-card grid specific to this page.
==========================================================*/

.water-hero {
    position: relative;
    overflow: hidden;
    background: var(--grad-hero);
    padding: 170px 0 100px;
    color: #fff;
}

    .water-hero::before {
        content: "";
        position: absolute;
        top: -180px;
        right: -180px;
        width: 600px;
        height: 600px;
        border-radius: 50%;
        background: radial-gradient(rgba(47,128,237,.22),transparent 70%);
    }

    .water-hero::after {
        content: "";
        position: absolute;
        bottom: -200px;
        left: -180px;
        width: 560px;
        height: 560px;
        border-radius: 50%;
        background: radial-gradient(rgba(20,184,166,.2),transparent 70%);
    }

.water-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 2;
}

.water-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255,255,255,.65);
    margin-bottom: 20px;
}

    .water-breadcrumb:hover {
        color: #fff;
    }

.water-hero-content .eyebrow {
    color: #7DD3FC;
}

    .water-hero-content .eyebrow::before {
        background: var(--accent);
    }

.water-hero-content h1 {
    color: #fff;
    font-size: 42px;
    line-height: 1.25;
    margin: 16px 0 20px;
}

.water-hero-content p {
    color: rgba(255,255,255,.75);
    font-size: 16.5px;
    line-height: 1.85;
    max-width: 520px;
    margin-bottom: 30px;
}

.water-hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.water-hero-visual {
    position: relative;
}

    .water-hero-visual img {
        width: 100%;
        border-radius: var(--radius-lg);
        box-shadow: 0 30px 70px rgba(3,10,25,.4);
    }

.water-hero-badge {
    position: absolute;
    bottom: -22px;
    left: 24px;
    right: 24px;
    background: #fff;
    color: var(--dark);
    border-radius: var(--radius);
    padding: 18px 22px;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 14px;
}

    .water-hero-badge i {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg,var(--primary),var(--primary-light));
        color: #fff;
        font-size: 16px;
    }

    .water-hero-badge span {
        font-size: 13.5px;
        font-weight: 600;
        line-height: 1.5;
        color: var(--text);
    }

@media(max-width:1000px) {
    .water-hero-grid {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .water-hero-badge {
        position: static;
        margin-top: 20px;
    }
}

@media(max-width:600px) {
    .water-hero {
        padding: 150px 0 70px;
    }

    .water-hero-content h1 {
        font-size: 30px;
    }
}

/* Funding model strip */
.water-model-strip {
    background: var(--dark-2);
    padding: 0;
}

.water-model-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
}

.water-model-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 32px 30px;
    border-right: 1px solid rgba(255,255,255,.08);
}

    .water-model-item:last-child {
        border-right: none;
    }

    .water-model-item i {
        width: 42px;
        height: 42px;
        border-radius: 11px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg,var(--primary),var(--secondary));
        color: #fff;
        font-size: 18px;
    }

    .water-model-item b {
        display: block;
        color: #fff;
        font-size: 14px;
        margin-bottom: 3px;
    }

    .water-model-item span {
        display: block;
        color: rgba(255,255,255,.6);
        font-size: 13px;
        line-height: 1.5;
    }

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

    .water-model-item {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,.08);
    }

        .water-model-item:last-child {
            border-bottom: none;
        }
}

/* Pillar cards — "What We Do" for the water sector */
.water-pillars {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 24px;
}

.pillar-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px 30px;
    position: relative;
    overflow: hidden;
    transition: var(--transition);
}

    .pillar-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow);
        border-color: transparent;
    }

    .pillar-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
    }

.pillar-icon {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
}

.pillar-index {
    position: absolute;
    top: 28px;
    right: 28px;
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 13px;
    opacity: .35;
}

.pillar-card h3 {
    font-size: 19px;
}

.pillar-card > p {
    font-size: 15px;
    line-height: 1.75;
    margin-bottom: 16px;
}

.pillar-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .pillar-list li {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        font-size: 13.5px;
        font-weight: 600;
        color: var(--text);
        line-height: 1.5;
    }

        .pillar-list li i {
            color: var(--success);
            font-size: 12px;
            margin-top: 3px;
            flex-shrink: 0;
        }

.water-pillars .pillar-card:nth-child(1)::before {
    background: var(--primary);
}

.water-pillars .pillar-card:nth-child(1) .pillar-icon {
    background: linear-gradient(135deg,var(--primary),var(--primary-light));
}

.water-pillars .pillar-card:nth-child(1) .pillar-index {
    color: var(--primary);
}

.water-pillars .pillar-card:nth-child(2)::before {
    background: var(--secondary);
}

.water-pillars .pillar-card:nth-child(2) .pillar-icon {
    background: linear-gradient(135deg,var(--secondary),var(--secondary-light));
}

.water-pillars .pillar-card:nth-child(2) .pillar-index {
    color: var(--secondary);
}

.water-pillars .pillar-card:nth-child(3)::before {
    background: var(--accent-dark);
}

.water-pillars .pillar-card:nth-child(3) .pillar-icon {
    background: linear-gradient(135deg,var(--accent-dark),var(--accent));
}

.water-pillars .pillar-card:nth-child(3) .pillar-index {
    color: var(--accent-dark);
}

.water-pillars .pillar-card:nth-child(4)::before {
    background: #15803D;
}

.water-pillars .pillar-card:nth-child(4) .pillar-icon {
    background: linear-gradient(135deg,#15803D,var(--success));
}

.water-pillars .pillar-card:nth-child(4) .pillar-index {
    color: #15803D;
}

@media(max-width:800px) {
    .water-pillars {
        grid-template-columns: 1fr;
    }
}

/* Gallery — placeholder blocks until real site photography exists */
.water-gallery {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 20px;
}

.gallery-item {
    border-radius: var(--radius);
    overflow: hidden;
    min-height: 180px;
    position: relative;
}

.gallery-large {
    grid-row: 1 / 3;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
}

.gallery-placeholder {
    width: 100%;
    height: 100%;
    min-height: 180px;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg,var(--primary-dark),var(--secondary));
    color: rgba(255,255,255,.4);
    font-size: 34px;
}

.water-gallery-note {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--text-light);
    margin-top: 20px;
}

@media(max-width:800px) {
    .water-gallery {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }

    .gallery-large {
        grid-row: auto;
    }
}

/*==========================================================
WATER PAGE — SHARED SECTION HEADING TREATMENT. Distinct from
the pill-badge/icon-medallion header used on Cloud/Consulting:
here it's a thin vertical accent flag beside the eyebrow, and
the heading's highlighted word gets an animated underline that
draws in from the left rather than a gradient fill.
==========================================================*/

.section-head-water {
    max-width: 700px;
    margin-bottom: 56px;
    position: relative;
}

    .section-head-water.center {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

.section-head-water-line {
    display: inline-block;
    width: 3px;
    height: 16px;
    border-radius: 2px;
    background: var(--grad-line);
    margin-right: 10px;
    vertical-align: middle;
}

.section-head-water .eyebrow {
    display: inline-flex;
}

.section-head-water.center .eyebrow {
    justify-content: center;
}

.section-head-water.center .section-head-water-line {
    display: none;
}

.section-head-water p {
    font-size: 17px;
    color: var(--text-light);
    line-height: 1.8;
    margin-top: 16px;
}

.section-heading-styled {
    font-size: 32px;
    line-height: 1.32;
    margin: 14px 0 0;
    color: var(--dark);
}

    .section-heading-styled span {
        background: linear-gradient(90deg,var(--primary),var(--secondary-light));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

/*==========================================================
FUNDING MODEL CHAIN — three connected nodes joined by an
animated flowing line, replacing the old plain 3-column strip.
==========================================================*/

.model-chain {
    display: flex;
    align-items: center;
    background: var(--dark-2);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.model-chain-node {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 32px 28px;
    min-width: 0;
}

    .model-chain-node i {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 19px;
        color: #fff;
        background: linear-gradient(135deg,var(--primary),var(--secondary));
    }

    .model-chain-node div b {
        display: block;
        color: #fff;
        font-size: 14px;
        margin-bottom: 3px;
    }

    .model-chain-node div span {
        display: block;
        color: rgba(255,255,255,.6);
        font-size: 12.5px;
        line-height: 1.5;
    }

    .model-chain-node:nth-child(1) i {
        background: linear-gradient(135deg,var(--primary),var(--primary-light));
    }

    .model-chain-node:nth-child(3) i {
        background: linear-gradient(135deg,var(--secondary),var(--secondary-light));
    }

    .model-chain-node:nth-child(5) i {
        background: linear-gradient(135deg,var(--accent-dark),var(--accent));
    }

.model-chain-connector {
    width: 64px;
    flex-shrink: 0;
    height: 2px;
    background: rgba(255,255,255,.14);
    position: relative;
}

.model-chain-flow {
    position: absolute;
    top: 50%;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transform: translateY(-50%);
    background: #7DD3FC;
    box-shadow: 0 0 12px 3px rgba(125,211,252,.7);
    animation: modelChainFlow 2.6s ease-in-out infinite;
}

@keyframes modelChainFlow {
    0% {
        left: 0;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        left: calc(100% - 8px);
        opacity: 0;
    }
}

@media(prefers-reduced-motion:reduce) {
    .model-chain-flow {
        display: none;
    }
}

@media(max-width:900px) {
    .model-chain {
        flex-direction: column;
    }

    .model-chain-connector {
        width: 2px;
        height: 32px;
    }
}

/*==========================================================
GOVERNANCE GAP — "case file" findings log. Each entry carries
its own icon (not a repeated warning triangle) and a small
"FINDING" stamp that pops in with a stamp-hit animation once
the entry scrolls into view.
==========================================================*/

.report-layout {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 60px;
    align-items: start;
}

.report-intro-icon {
    width: 56px;
    height: 56px;
    border-radius: 15px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,#B91C1C,var(--danger));
    color: #fff;
    font-size: 23px;
    box-shadow: 0 14px 28px rgba(220,38,38,.26);
    position: relative;
}

    .report-intro-icon::before {
        content: "";
        position: absolute;
        inset: -7px;
        border-radius: 19px;
        border: 1.5px dashed rgba(220,38,38,.32);
        animation: reportIconSpin 15s linear infinite;
    }

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

@media(prefers-reduced-motion:reduce) {
    .report-intro-icon::before {
        animation: none;
    }
}

.report-case-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--danger);
    background: rgba(220,38,38,.08);
    border: 1px solid rgba(220,38,38,.22);
    padding: 7px 16px;
    border-radius: 30px;
    margin-bottom: 18px;
}

    .report-case-tag i {
        font-size: 8px;
    }

.report-intro h2.section-heading-styled {
    font-size: 34px;
    line-height: 1.28;
    letter-spacing: -.01em;
    margin-bottom: 22px;
    background: linear-gradient(100deg,var(--dark) 0%,var(--dark) 35%,var(--danger) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

    .report-intro h2.section-heading-styled span {
        background: none;
        -webkit-text-fill-color: inherit;
        color: inherit;
    }

.report-intro-lead {
    position: relative;
    padding: 22px 26px 22px 30px;
    margin-bottom: 0;
    background: var(--light);
    border-left: 3px solid var(--danger);
    border-radius: 0 12px 12px 0;
}

    .report-intro-lead::before {
        content: "\201C";
        position: absolute;
        top: -6px;
        left: 12px;
        font-family: Georgia,serif;
        font-size: 52px;
        line-height: 1;
        color: var(--danger);
        opacity: .18;
    }

    .report-intro-lead p {
        position: relative;
        font-size: 16.5px;
        line-height: 1.85;
        color: var(--text);
        margin: 0;
        font-weight: 500;
    }

.report-log {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.report-entry {
    position: relative;
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 16px;
    align-items: start;
    background: var(--light);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px 22px;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}

    .report-entry:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 34px rgba(15,23,42,.1);
    }

.report-entry-num {
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 13px;
    color: var(--border);
    padding-top: 2px;
    position: relative;
    z-index: 2;
}

.report-entry-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.report-entry p {
    position: relative;
    z-index: 2;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--text);
    margin: 0;
    font-weight: 500;
}

/* Six distinct fading backgrounds — each card its own theme
   colour, fading from a light tint down to transparent, instead
   of one flat background shared across all six findings */
.report-entry:nth-child(1) {
    background: linear-gradient(120deg,rgba(10,77,140,.1),var(--light) 65%);
}

    .report-entry:nth-child(1) .report-entry-icon {
        background: rgba(10,77,140,.12);
        color: var(--primary);
    }

    .report-entry:nth-child(1) .report-stamp {
        color: var(--primary);
        border-color: var(--primary);
    }

.report-entry:nth-child(2) {
    background: linear-gradient(120deg,rgba(14,116,144,.1),var(--light) 65%);
}

    .report-entry:nth-child(2) .report-entry-icon {
        background: rgba(14,116,144,.12);
        color: var(--secondary);
    }

    .report-entry:nth-child(2) .report-stamp {
        color: var(--secondary);
        border-color: var(--secondary);
    }

.report-entry:nth-child(3) {
    background: linear-gradient(120deg,rgba(245,158,11,.12),var(--light) 65%);
}

    .report-entry:nth-child(3) .report-entry-icon {
        background: rgba(245,158,11,.14);
        color: var(--accent-dark);
    }

    .report-entry:nth-child(3) .report-stamp {
        color: var(--accent-dark);
        border-color: var(--accent-dark);
    }

.report-entry:nth-child(4) {
    background: linear-gradient(120deg,rgba(220,38,38,.09),var(--light) 65%);
}

    .report-entry:nth-child(4) .report-entry-icon {
        background: rgba(220,38,38,.09);
        color: var(--danger);
    }

    .report-entry:nth-child(4) .report-stamp {
        color: var(--danger);
        border-color: var(--danger);
    }

.report-entry:nth-child(5) {
    background: linear-gradient(120deg,rgba(34,197,94,.1),var(--light) 65%);
}

    .report-entry:nth-child(5) .report-entry-icon {
        background: rgba(34,197,94,.12);
        color: #15803D;
    }

    .report-entry:nth-child(5) .report-stamp {
        color: #15803D;
        border-color: #15803D;
    }

.report-entry:nth-child(6) {
    background: linear-gradient(120deg,rgba(7,55,99,.1),var(--light) 65%);
}

    .report-entry:nth-child(6) .report-entry-icon {
        background: rgba(7,55,99,.12);
        color: var(--primary-dark);
    }

    .report-entry:nth-child(6) .report-stamp {
        color: var(--primary-dark);
        border-color: var(--primary-dark);
    }

.report-stamp {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 2;
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .1em;
    border: 1.5px solid currentColor;
    border-radius: 4px;
    padding: 2px 8px;
    opacity: .7;
    transform: rotate(-8deg) scale(1.4);
}

.report-entry.aos-animate .report-stamp {
    animation: stampHit .4s cubic-bezier(.2,1.4,.5,1) .3s both;
}

@keyframes stampHit {
    0% {
        transform: rotate(-8deg) scale(2.2);
        opacity: 0;
    }

    70% {
        opacity: .85;
    }

    100% {
        transform: rotate(-8deg) scale(1);
        opacity: .7;
    }
}

@media(prefers-reduced-motion:reduce) {
    .report-entry.aos-animate .report-stamp {
        animation: none;
        transform: rotate(-8deg) scale(1);
        opacity: .7;
    }
}

@media(max-width:900px) {
    .report-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

@media(max-width:560px) {
    .report-entry {
        grid-template-columns: auto 1fr;
    }

    .report-entry-num {
        display: none;
    }
}

/*==========================================================
INDEX CARDS — "What We Do" redesigned as horizontal library
card-catalogue rows instead of a 4-up grid. Checklist items
pop in with a staggered scale-in on hover rather than sitting
as static bullets.
==========================================================*/

.index-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 50px;
}

.index-card {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 22px;
    align-items: start;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 30px 32px;
    position: relative;
    overflow: hidden;
    transition: var(--transition);
}

    .index-card:hover {
        box-shadow: var(--shadow);
        transform: translateY(-3px);
    }

    .index-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
    }

.index-card-num {
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 34px;
    line-height: 1;
    color: var(--border);
    padding-top: 4px;
}

.index-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 21px;
    box-shadow: 0 10px 22px rgba(0,0,0,.14);
}

.index-card-body h3 {
    font-size: 19px;
    margin-bottom: 8px;
}

.index-card-body > p {
    font-size: 15px;
    line-height: 1.75;
    color: var(--text-light);
    margin-bottom: 16px;
}

.index-card-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
}

    .index-card-list li {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 13.5px;
        font-weight: 600;
        color: var(--text);
        opacity: 0;
        transform: scale(.85);
    }

.index-card.aos-animate .index-card-list li {
    animation: indexListPop .4s cubic-bezier(.2,1.4,.5,1) forwards;
    animation-delay: calc(.4s + var(--i) * .1s);
}

@keyframes indexListPop {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media(prefers-reduced-motion:reduce) {
    .index-card-list li {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

.index-card-list li i {
    color: var(--success);
    font-size: 13px;
}

.index-card:nth-child(1)::before {
    background: var(--primary);
}

.index-card:nth-child(1) .index-card-icon {
    background: linear-gradient(135deg,var(--primary),var(--primary-light));
}

.index-card:nth-child(1) .index-card-num, .index-card:nth-child(1) h3 {
    color: var(--primary);
}

.index-card:nth-child(2)::before {
    background: var(--secondary);
}

.index-card:nth-child(2) .index-card-icon {
    background: linear-gradient(135deg,var(--secondary),var(--secondary-light));
}

.index-card:nth-child(2) .index-card-num, .index-card:nth-child(2) h3 {
    color: var(--secondary);
}

.index-card:nth-child(3)::before {
    background: var(--accent-dark);
}

.index-card:nth-child(3) .index-card-icon {
    background: linear-gradient(135deg,var(--accent-dark),var(--accent));
}

.index-card:nth-child(3) .index-card-num, .index-card:nth-child(3) h3 {
    color: var(--accent-dark);
}

.index-card:nth-child(4)::before {
    background: #15803D;
}

.index-card:nth-child(4) .index-card-icon {
    background: linear-gradient(135deg,#15803D,var(--success));
}

.index-card:nth-child(4) .index-card-num, .index-card:nth-child(4) h3 {
    color: #15803D;
}

@media(max-width:700px) {
    .index-card {
        grid-template-columns: 1fr;
        padding: 24px 22px;
    }

    .index-card-num {
        display: none;
    }
}

/*==========================================================
FLOW STRIP — "How We Work" redesigned as a horizontal strip
with a travelling droplet icon running its full length on a
loop (water-themed), replacing the shared .method-grid so this
page doesn't repeat the homepage's Methodology layout.
==========================================================*/

.water-process-section {
    background: #fff;
    position: relative;
    overflow: hidden;
}

.water-process-glow {
    position: absolute;
    top: -180px;
    left: 50%;
    transform: translateX(-50%);
    width: 820px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(rgba(10,77,140,.07),rgba(20,184,166,.05) 55%,transparent 75%);
    pointer-events: none;
    z-index: 0;
}

.flow-strip-head-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 18px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,var(--primary),var(--secondary));
    color: #fff;
    font-size: 23px;
    box-shadow: 0 14px 28px rgba(10,77,140,.26);
    position: relative;
    z-index: 2;
}

.flow-strip {
    position: relative;
    margin-top: 60px;
}

.flow-strip-line {
    position: absolute;
    top: 26px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--border);
}

.flow-strip-drop {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    color: var(--primary-light);
    font-size: 15px;
    animation: flowStripTravel 7s ease-in-out infinite;
}

@keyframes flowStripTravel {
    0% {
        left: 0;
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    92% {
        opacity: 1;
    }

    100% {
        left: calc(100% - 15px);
        opacity: 0;
    }
}

@media(prefers-reduced-motion:reduce) {
    .flow-strip-drop {
        display: none;
    }
}

.flow-strip {
    display: flex;
    gap: 22px;
}

.flow-strip-step {
    flex: 1;
    min-width: 0;
    position: relative;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 34px 24px 28px;
    transition: transform .3s ease, box-shadow .3s ease;
}

    .flow-strip-step:hover {
        transform: translateY(-7px);
        box-shadow: 0 22px 44px rgba(15,23,42,.12);
    }

.flow-strip-badge {
    position: relative;
    z-index: 2;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 2px solid var(--border);
    color: var(--primary);
    font-size: 19px;
    margin-bottom: 18px;
    transition: var(--transition);
}

/* Fading tinted card background per step — same rotation used
   across the rest of this page (blue / teal / amber / navy) */
.flow-strip-step:nth-child(1) {
    background: linear-gradient(160deg,rgba(10,77,140,.08),#fff 70%);
}

.flow-strip-step:nth-child(2) {
    background: linear-gradient(160deg,rgba(14,116,144,.08),#fff 70%);
}

.flow-strip-step:nth-child(3) {
    background: linear-gradient(160deg,rgba(245,158,11,.09),#fff 70%);
}

.flow-strip-step:nth-child(4) {
    background: linear-gradient(160deg,rgba(7,55,99,.08),#fff 70%);
}

.flow-strip-step:nth-child(2) .flow-strip-badge {
    color: var(--secondary);
}

.flow-strip-step:nth-child(3) .flow-strip-badge {
    color: var(--accent-dark);
}

.flow-strip-step:nth-child(4) .flow-strip-badge {
    color: var(--primary-dark);
}

.flow-strip-step.aos-animate .flow-strip-badge {
    animation: flowBadgePop .5s cubic-bezier(.2,1.4,.5,1) both;
}

@keyframes flowBadgePop {
    0% {
        transform: scale(.5);
        border-color: transparent;
    }

    100% {
        transform: scale(1);
    }
}

@media(prefers-reduced-motion:reduce) {
    .flow-strip-step.aos-animate .flow-strip-badge {
        animation: none;
    }
}

.flow-strip-tag {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.flow-strip-step:nth-child(1) .flow-strip-tag {
    color: var(--primary);
}

.flow-strip-step:nth-child(2) .flow-strip-tag {
    color: var(--secondary);
}

.flow-strip-step:nth-child(3) .flow-strip-tag {
    color: var(--accent-dark);
}

.flow-strip-step:nth-child(4) .flow-strip-tag {
    color: var(--primary-dark);
}

.flow-strip-step h4 {
    font-size: 17px;
    margin-bottom: 8px;
}

.flow-strip-step p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-light);
    margin: 0;
}

@media(max-width:900px) {
    .flow-strip {
        flex-direction: column;
        gap: 20px;
    }

    .flow-strip-line, .flow-strip-drop {
        display: none;
    }
}

/*==========================================================
POLAROID GALLERY — real site photography with captions, framed
like polaroid photos with a slight alternating tilt that
straightens on hover.
==========================================================*/

.polaroid-gallery {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 32px;
    align-items: start;
    margin-top: 56px;
}

.polaroid {
    background: #fff;
    padding: 14px 14px 18px;
    border-radius: 6px;
    box-shadow: 0 20px 45px rgba(3,10,25,.16);
    transition: transform .3s ease, box-shadow .3s ease;
}

    .polaroid:nth-child(1) {
        transform: rotate(-2deg);
    }

    .polaroid:nth-child(2) {
        transform: rotate(1.5deg);
    }

    .polaroid:nth-child(3) {
        transform: rotate(-1.5deg);
    }

    .polaroid:hover {
        transform: rotate(0deg) translateY(-6px);
        box-shadow: 0 30px 60px rgba(3,10,25,.24);
    }

.polaroid-frame {
    position: relative;
    overflow: hidden;
    border-radius: 2px;
    background: var(--light);
}

.polaroid img {
    width: 100%;
    display: block;
    object-fit: cover;
}

.polaroid-fallback {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg,var(--primary-dark),var(--secondary));
    color: rgba(255,255,255,.45);
    font-size: 34px;
}

.polaroid-large .polaroid-frame, .polaroid-large img {
    aspect-ratio: 4/3.1;
}

.polaroid:not(.polaroid-large) .polaroid-frame, .polaroid:not(.polaroid-large) img {
    aspect-ratio: 1/1;
}

.polaroid figcaption {
    margin-top: 14px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-light);
    line-height: 1.5;
    padding: 0 4px;
}

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

    .polaroid {
        transform: none !important;
    }
}

/*==========================================================
TRUST — two-column banner: dark blue intro panel (same device
as the Disciplines section, so the two "premium panel" moments
on the page feel related) beside a connected vertical timeline
instead of a card grid. A thin gradient spine runs behind the
icons, tying the three reasons together as one continuous idea
rather than three separate boxes.
==========================================================*/

.trust {
    background: var(--light);
}

.trust-banner {
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    align-items: stretch;
}

.trust-intro {
    background: var(--grad-hero);
    color: #fff;
    padding: 56px 46px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

    .trust-intro::before {
        content: "";
        position: absolute;
        top: -130px;
        right: -110px;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background: radial-gradient(rgba(47,128,237,.3),transparent 70%);
        pointer-events: none;
    }

    .trust-intro::after {
        content: "";
        position: absolute;
        bottom: -150px;
        left: -100px;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background: radial-gradient(rgba(20,184,166,.22),transparent 70%);
        pointer-events: none;
    }

    .trust-intro .eyebrow {
        color: #7DD3FC;
        position: relative;
        z-index: 2;
    }

        .trust-intro .eyebrow::before {
            background: var(--accent);
        }

    .trust-intro h2 {
        color: #fff;
        font-size: 32px;
        line-height: 1.3;
        margin: 16px 0 18px;
        position: relative;
        z-index: 2;
    }

    .trust-intro p {
        color: rgba(255,255,255,.78);
        font-size: 15.5px;
        line-height: 1.85;
        position: relative;
        z-index: 2;
        margin-bottom: 0;
    }

.trust-timeline {
    background: #fff;
    padding: 16px 50px;
    position: relative;
}

    /* The connecting spine, running behind the icon column */
    .trust-timeline::before {
        content: "";
        position: absolute;
        top: 44px;
        bottom: 44px;
        left: 76px;
        width: 2px;
        background: linear-gradient(180deg,var(--primary-light),var(--secondary-light),var(--accent));
        opacity: .3;
    }

.trust-item {
    display: flex;
    gap: 24px;
    padding: 30px 0;
    border-bottom: 1px solid var(--border);
}

    .trust-item:last-child {
        border-bottom: none;
    }

.trust-item-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 52px;
    position: relative;
    z-index: 2;
}

.trust-item-num {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-light);
    margin-bottom: 10px;
    transition: var(--transition);
}

.trust-item-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--light);
    color: var(--text-light);
    font-size: 18px;
    border: 1px solid var(--border);
    transition: var(--transition);
}

.trust-item:hover .trust-item-icon {
    transform: scale(1.08);
    color: #fff;
    border-color: transparent;
}

.trust-item:nth-child(1):hover .trust-item-icon {
    background: linear-gradient(135deg,var(--primary),var(--primary-light));
    box-shadow: 0 10px 22px rgba(10,77,140,.28);
}

.trust-item:nth-child(2):hover .trust-item-icon {
    background: linear-gradient(135deg,var(--secondary),var(--secondary-light));
    box-shadow: 0 10px 22px rgba(14,116,144,.28);
}

.trust-item:nth-child(3):hover .trust-item-icon {
    background: linear-gradient(135deg,var(--accent-dark),var(--accent));
    box-shadow: 0 10px 22px rgba(245,158,11,.28);
}

.trust-item:nth-child(1):hover .trust-item-num {
    color: var(--primary);
}

.trust-item:nth-child(2):hover .trust-item-num {
    color: var(--secondary);
}

.trust-item:nth-child(3):hover .trust-item-num {
    color: var(--accent-dark);
}

.trust-item-body {
    padding-top: 2px;
}

    .trust-item-body h3 {
        font-size: 21px;
        margin-bottom: 8px;
        transition: var(--transition);
    }

.trust-item:nth-child(1):hover .trust-item-body h3 {
    color: var(--primary);
}

.trust-item:nth-child(2):hover .trust-item-body h3 {
    color: var(--secondary);
}

.trust-item:nth-child(3):hover .trust-item-body h3 {
    color: var(--accent-dark);
}

.trust-item-body p {
    font-size: 15.5px;
    line-height: 1.8;
    margin-bottom: 0;
}

@media(max-width:1000px) {
    .trust-banner {
        grid-template-columns: 1fr;
    }

    .trust-intro {
        padding: 44px 40px;
    }

        .trust-intro h2 {
            font-size: 27px;
        }
}

@media(max-width:600px) {
    .trust-timeline {
        padding: 12px 24px;
    }

        .trust-timeline::before {
            left: 46px;
        }

    .trust-item {
        gap: 16px;
    }

    .trust-item-marker {
        width: 34px;
    }

    .trust-item-icon {
        width: 34px;
        height: 34px;
        font-size: 15px;
    }

    .trust-item-body h3 {
        font-size: 18px;
    }
}

/*==========================================================
TESTIMONIALS — Swiper.js carousel. Swiper's own script/CSS are
loaded page-locally (see Index.cshtml's Scripts section), same
pattern as tsParticles/GSAP. Card styling and pagination colours
here are themed to match the rest of the system; Swiper supplies
only the slide/autoplay mechanics.
==========================================================*/

.testimonials-section {
    background: #fff;
    padding: 120px 0 100px;
}

.testimonials-swiper {
    padding: 12px 4px 56px;
    overflow: hidden;
}

.testimonial-card {
    height: auto;
    background: var(--light);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 36px 34px 30px;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Faded background per slide, matching the same three-colour
   rotation as the avatar/photo frame below — so the whole card
   carries the theme, not just the small avatar chip */
.testimonials-swiper .swiper-slide:nth-child(3n+1) .testimonial-card {
    background: linear-gradient(165deg,rgba(10,77,140,.07),var(--light) 70%);
}

.testimonials-swiper .swiper-slide:nth-child(3n+2) .testimonial-card {
    background: linear-gradient(165deg,rgba(14,116,144,.08),var(--light) 70%);
}

.testimonials-swiper .swiper-slide:nth-child(3n+3) .testimonial-card {
    background: linear-gradient(165deg,rgba(245,158,11,.09),var(--light) 70%);
}

/* Passport-size photo, top-left corner — placeholder illustrated
   silhouette (mixed male/female icon) until real client photos are
   available. Swap the <img>/icon inside .testimonial-photo for a
   real headshot later; the frame/positioning stays the same. */
.testimonial-photo {
    width: 52px;
    height: 64px;
    border-radius: 8px;
    flex-shrink: 0;
    overflow: hidden;
    border: 2px solid #fff;
    box-shadow: 0 8px 20px rgba(3,10,25,.16);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

    .testimonial-photo i {
        font-size: 26px;
        color: rgba(255,255,255,.9);
    }

    .testimonial-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.testimonial-quote-icon {
    font-size: 26px;
    color: var(--primary-light);
    opacity: .35;
    margin-bottom: 14px;
}

.testimonial-card p {
    font-size: 16px;
    line-height: 1.85;
    color: var(--text);
    font-weight: 500;
    flex: 1;
    margin-bottom: 26px;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.testimonial-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 14px;
}

.testimonial-author-text b {
    display: block;
    font-size: 14.5px;
    color: var(--dark);
}

.testimonial-author-text span {
    display: block;
    font-size: 12.5px;
    color: var(--text-light);
    margin-top: 2px;
}

/* Rotate avatar + photo-frame colour per slide position — same
   three-colour rotation used elsewhere (method steps, outcome icons) */
.testimonials-swiper .swiper-slide:nth-child(3n+1) .testimonial-avatar,
.testimonials-swiper .swiper-slide:nth-child(3n+1) .testimonial-photo {
    background: linear-gradient(135deg,var(--primary),var(--primary-light));
}

.testimonials-swiper .swiper-slide:nth-child(3n+2) .testimonial-avatar,
.testimonials-swiper .swiper-slide:nth-child(3n+2) .testimonial-photo {
    background: linear-gradient(135deg,var(--secondary),var(--secondary-light));
}

.testimonials-swiper .swiper-slide:nth-child(3n+3) .testimonial-avatar,
.testimonials-swiper .swiper-slide:nth-child(3n+3) .testimonial-photo {
    background: linear-gradient(135deg,var(--accent-dark),var(--accent));
}

/* Swiper pagination — recoloured to brand instead of Swiper's
   default black/blue */
.testimonials-swiper .swiper-pagination-bullet {
    background: var(--border);
    opacity: 1;
    width: 8px;
    height: 8px;
}

.testimonials-swiper .swiper-pagination-bullet-active {
    background: var(--primary);
    width: 22px;
    border-radius: 4px;
    transition: width .25s ease;
}

@media(max-width:600px) {
    .testimonials-section {
        padding: 80px 0 70px;
    }

    .testimonial-card {
        padding: 28px 24px 24px;
    }
}

/*==========================================================
OUTCOMES — icon-row grid used on the Consulting page. No
fabricated numbers/case studies here on purpose; these are
framed as what evidence-based work delivers, not unverifiable
client-specific stats.
==========================================================*/

.outcomes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    gap: 44px 36px;
}

.outcome-item {
    display: flex;
    flex-direction: column;
}

.outcome-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 21px;
    margin-bottom: 18px;
    box-shadow: 0 10px 22px rgba(0,0,0,.1);
}

.outcome-item:nth-child(1) .outcome-icon {
    background: linear-gradient(135deg,var(--primary),var(--primary-light));
}

.outcome-item:nth-child(2) .outcome-icon {
    background: linear-gradient(135deg,var(--secondary),var(--secondary-light));
    box-shadow: 0 10px 22px rgba(14,116,144,.22);
}

.outcome-item:nth-child(3) .outcome-icon {
    background: linear-gradient(135deg,var(--accent-dark),var(--accent));
    box-shadow: 0 10px 22px rgba(245,158,11,.24);
}

.outcome-item:nth-child(4) .outcome-icon {
    background: linear-gradient(135deg,#15803D,var(--success));
    box-shadow: 0 10px 22px rgba(34,197,94,.22);
}

.outcome-item h3 {
    font-size: 19px;
    margin-bottom: 8px;
}

.outcome-item:nth-child(1) h3 {
    color: var(--primary);
}

.outcome-item:nth-child(2) h3 {
    color: var(--secondary);
}

.outcome-item:nth-child(3) h3 {
    color: var(--accent-dark);
}

.outcome-item:nth-child(4) h3 {
    color: #15803D;
}

.outcome-item p {
    font-size: 15px;
    line-height: 1.75;
    margin-bottom: 0;
}

.outcome-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 700;
    margin-top: 14px;
    transition: var(--transition);
}

.outcome-item:nth-child(1) .outcome-link {
    color: var(--primary);
}

.outcome-item:nth-child(2) .outcome-link {
    color: var(--secondary);
}

.outcome-item:nth-child(3) .outcome-link {
    color: var(--accent-dark);
}

.outcome-link i {
    font-size: 12px;
    transition: transform .2s ease;
}

.outcome-link:hover i {
    transform: translateX(3px);
}

/*==========================================================
OUTCOME FLIP CARDS — "What This Delivers" on the Consulting
page. Front shows icon + title; back reveals the explanation on
hover, keyboard focus, or tap (via :focus-within so touch/
keyboard users aren't locked out of a hover-only interaction).
Same four-colour rotation as the old outcome-item grid.
==========================================================*/

.outcome-flip {
    perspective: 1200px;
    min-height: 230px;
    cursor: pointer;
    border-radius: var(--radius-lg);
}

    .outcome-flip:focus {
        outline: none;
    }

    .outcome-flip:focus-visible {
        outline: 2px solid var(--primary-light);
        outline-offset: 4px;
        border-radius: var(--radius-lg);
    }

.outcome-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 230px;
    transform-style: preserve-3d;
    transition: transform .65s cubic-bezier(.4,0,.2,1);
}

.outcome-flip:hover .outcome-flip-inner,
.outcome-flip:focus-within .outcome-flip-inner {
    transform: rotateY(180deg);
}

.outcome-flip-front, .outcome-flip-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: var(--radius-lg);
    padding: 30px 26px;
    display: flex;
    flex-direction: column;
}

.outcome-flip-front {
    background: #fff;
    border: 1px solid var(--border);
}

.outcome-flip-back {
    transform: rotateY(180deg);
    color: #fff;
    align-items: flex-start;
    justify-content: center;
}

    .outcome-flip-back p {
        font-size: 15px;
        line-height: 1.8;
        margin: 0;
        position: relative;
        z-index: 2;
        color: rgba(255,255,255,.92);
    }

.outcome-flip-front h3 {
    font-size: 18px;
    margin-bottom: auto;
}

.outcome-flip-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-light);
    letter-spacing: .02em;
}

    .outcome-flip-hint i {
        font-size: 12px;
    }

.outcome-flip:nth-child(1) .outcome-icon {
    background: linear-gradient(135deg,var(--primary),var(--primary-light));
}

.outcome-flip:nth-child(1) .outcome-flip-front h3 {
    color: var(--primary);
}

.outcome-flip:nth-child(1) .outcome-flip-back {
    background: linear-gradient(155deg,var(--primary-dark),var(--primary));
}

.outcome-flip:nth-child(2) .outcome-icon {
    background: linear-gradient(135deg,var(--secondary),var(--secondary-light));
    box-shadow: 0 10px 22px rgba(14,116,144,.22);
}

.outcome-flip:nth-child(2) .outcome-flip-front h3 {
    color: var(--secondary);
}

.outcome-flip:nth-child(2) .outcome-flip-back {
    background: linear-gradient(155deg,#0B4F4A,var(--secondary));
}

.outcome-flip:nth-child(3) .outcome-icon {
    background: linear-gradient(135deg,var(--accent-dark),var(--accent));
    box-shadow: 0 10px 22px rgba(245,158,11,.24);
}

.outcome-flip:nth-child(3) .outcome-flip-front h3 {
    color: var(--accent-dark);
}

.outcome-flip:nth-child(3) .outcome-flip-back {
    background: linear-gradient(155deg,#7A4A08,var(--accent-dark));
}

.outcome-flip:nth-child(4) .outcome-icon {
    background: linear-gradient(135deg,#15803D,var(--success));
    box-shadow: 0 10px 22px rgba(34,197,94,.22);
}

.outcome-flip:nth-child(4) .outcome-flip-front h3 {
    color: #15803D;
}

.outcome-flip:nth-child(4) .outcome-flip-back {
    background: linear-gradient(155deg,#0F4A24,#15803D);
}

@media(prefers-reduced-motion:reduce) {
    .outcome-flip-inner {
        transition: none;
    }
    /* No hover-based reveal for reduced-motion users — show the
     explanation directly beneath the title instead of behind a
     flip that won't animate smoothly */
    .outcome-flip {
        min-height: 0;
        perspective: none;
    }

    .outcome-flip-inner {
        position: static;
        transform: none !important;
    }

    .outcome-flip-front, .outcome-flip-back {
        position: static;
        backface-visibility: visible;
        transform: none;
    }

    .outcome-flip-back {
        color: var(--text);
        background: none !important;
        padding-top: 0;
    }

        .outcome-flip-back p {
            color: var(--text-light);
        }

    .outcome-flip-hint {
        display: none;
    }
}

@media(max-width:700px) {
    .outcome-flip {
        min-height: 210px;
    }

    .outcome-flip-inner {
        min-height: 210px;
    }
}

/*==========================================================
FRAMEWORK VENN — complete redesign of "Our Framework". Instead
of a two-column dark banner + linear flow line, this is now a
full-width intro (not paired with a dark side panel) followed
by an interlocking three-circle diagram — Evaluate, Secure,
Build shown as overlapping, gently pulsing circles converging
on a central "governance" core — with the shared Disciplines
explorer sitting in its own elevated shell beneath it.
==========================================================*/

.consulting-framework-section {
    position: relative;
    overflow: hidden;
    background: #fff;
}

.framework-glow {
    position: absolute;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(rgba(10,77,140,.07),rgba(20,184,166,.05) 55%,transparent 75%);
    pointer-events: none;
    z-index: 0;
}

.framework-intro {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}

    .framework-intro h2 {
        font-size: 36px;
        line-height: 1.3;
        color: var(--dark);
        margin-bottom: 18px;
    }

        .framework-intro h2 span {
            background: linear-gradient(90deg,var(--primary),var(--secondary-light));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

    .framework-intro p {
        font-size: 17px;
        line-height: 1.85;
        color: var(--text-light);
        margin: 0;
    }

.framework-venn {
    position: relative;
    width: 340px;
    height: 280px;
    margin: 64px auto 0;
    z-index: 2;
}

.venn-circle {
    position: absolute;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #fff;
    animation: vennPulse 6s ease-in-out infinite;
}

    .venn-circle i {
        font-size: 26px;
    }

    .venn-circle span {
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .07em;
        text-transform: uppercase;
    }

@keyframes vennPulse {
    0%,100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.045);
    }
}

@media(prefers-reduced-motion:reduce) {
    .venn-circle {
        animation: none;
    }
}

.venn-circle.c1 {
    top: 0;
    left: 8px;
    background: radial-gradient(circle at 35% 32%,var(--primary-light),var(--primary) 70%);
    opacity: .92;
}

.venn-circle.c2 {
    top: 0;
    right: 8px;
    background: radial-gradient(circle at 35% 32%,#EF4444,var(--danger) 70%);
    opacity: .92;
    animation-delay: 1.2s;
}

.venn-circle.c3 {
    bottom: 0;
    left: 85px;
    background: radial-gradient(circle at 35% 32%,var(--secondary-light),var(--secondary) 70%);
    opacity: .92;
    animation-delay: 2.4s;
}

.venn-core {
    position: absolute;
    top: 105px;
    left: 135px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 16px 34px rgba(3,10,25,.28);
    z-index: 3;
    color: var(--dark);
    font-size: 22px;
}

    .venn-core::before {
        content: "";
        position: absolute;
        inset: -6px;
        border-radius: 50%;
        border: 1.5px dashed rgba(10,77,140,.3);
        animation: vennCoreSpin 16s linear infinite;
    }

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

@media(prefers-reduced-motion:reduce) {
    .venn-core::before {
        animation: none;
    }
}

.framework-explorer-shell {
    margin-top: 64px;
    position: relative;
    z-index: 2;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

@media(max-width:600px) {
    .framework-intro h2 {
        font-size: 27px;
    }

    .framework-venn {
        transform: scale(.82);
        margin: 40px auto 0;
    }
}

/*==========================================================
HOW WE WORK — "How We Work" on the Consulting page, redesigned
as content-left / illustration-right rows (a different-per-step
illustration for each), replacing the earlier vertical roadmap.
Each row's image and text enter from opposite directions so they
visually converge, and the image floats gently on a loop.
==========================================================*/

.consulting-roadmap-section {
    background: var(--light);
}

.work-rows {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 56px;
}

.work-row {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 56px;
    align-items: center;
    padding: 44px 0;
    border-bottom: 1px solid var(--border);
}

    .work-row:last-child {
        border-bottom: none;
    }

.work-row-text {
    position: relative;
    padding-left: 26px;
}

    .work-row-text::before {
        content: "";
        position: absolute;
        top: 4px;
        bottom: 4px;
        left: 0;
        width: 3px;
        border-radius: 3px;
    }

.work-row-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

    .work-row-tag b {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        color: #fff;
        font-size: 10px;
    }

.work-row-text h3 {
    font-size: 24px;
    margin-bottom: 12px;
}

.work-row-text p {
    font-size: 15.5px;
    line-height: 1.85;
    color: var(--text-light);
    margin: 0;
    max-width: 520px;
}

.work-row-visual {
    position: relative;
    display: flex;
    justify-content: center;
}

.work-row-visual-inner {
    position: relative;
    width: 180px;
    height: 180px;
}

.work-row-visual img {
    width: 100%;
    height: 100%;
    border-radius: 24px;
    position: relative;
    z-index: 2;
    box-shadow: 0 26px 50px rgba(3,10,25,.22);
    animation: workImgFloat 6s ease-in-out infinite;
}

.work-row-visual-glow {
    position: absolute;
    inset: -16px;
    border-radius: 32px;
    filter: blur(28px);
    opacity: .35;
    z-index: 1;
}

@keyframes workImgFloat {
    0%,100% {
        transform: translateY(0);
    }

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

@media(prefers-reduced-motion:reduce) {
    .work-row-visual img {
        animation: none;
    }
}

.work-row:nth-child(1) .work-row-text::before {
    background: var(--primary);
}

.work-row:nth-child(1) .work-row-tag {
    color: var(--primary);
}

    .work-row:nth-child(1) .work-row-tag b {
        background: var(--primary);
    }

.work-row:nth-child(1) .work-row-visual-glow {
    background: var(--primary-light);
}

.work-row:nth-child(2) .work-row-text::before {
    background: var(--secondary);
}

.work-row:nth-child(2) .work-row-tag {
    color: var(--secondary);
}

    .work-row:nth-child(2) .work-row-tag b {
        background: var(--secondary);
    }

.work-row:nth-child(2) .work-row-visual-glow {
    background: var(--secondary-light);
}

.work-row:nth-child(3) .work-row-text::before {
    background: var(--accent-dark);
}

.work-row:nth-child(3) .work-row-tag {
    color: var(--accent-dark);
}

    .work-row:nth-child(3) .work-row-tag b {
        background: var(--accent-dark);
    }

.work-row:nth-child(3) .work-row-visual-glow {
    background: var(--accent);
}

.work-row:nth-child(4) .work-row-text::before {
    background: var(--primary-dark);
}

.work-row:nth-child(4) .work-row-tag {
    color: var(--primary-dark);
}

    .work-row:nth-child(4) .work-row-tag b {
        background: var(--primary-dark);
    }

.work-row:nth-child(4) .work-row-visual-glow {
    background: var(--primary);
}

@media(max-width:800px) {
    .work-row {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 32px 0;
    }

    .work-row-visual {
        order: -1;
    }
}

/*==========================================================
CLOUD HERO — back to the site's standard blue treatment (same
grad-hero/glow language every other page hero uses), not a
separate dark/violet identity. Three columns preserved: intro
+ CTA, quick-link list, floating card.
==========================================================*/

.cloud-hero {
    position: relative;
    overflow: hidden;
    background: var(--grad-hero);
    padding: 160px 0 100px;
    color: #fff;
}

    .cloud-hero::before {
        content: "";
        position: absolute;
        top: -180px;
        right: -180px;
        width: 700px;
        height: 700px;
        border-radius: 50%;
        background: radial-gradient(rgba(47,128,237,.22),transparent 70%);
    }

    .cloud-hero::after {
        content: "";
        position: absolute;
        bottom: -220px;
        left: -200px;
        width: 650px;
        height: 650px;
        border-radius: 50%;
        background: radial-gradient(rgba(20,184,166,.22),transparent 70%);
    }

.cloud-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 56px;
    align-items: center;
    position: relative;
    z-index: 2;
}

.cloud-hero-intro .eyebrow {
    color: #7DD3FC;
}

    .cloud-hero-intro .eyebrow::before {
        background: var(--accent);
    }

.cloud-hero-intro h1 {
    font-size: 46px;
    line-height: 1.15;
    margin: 16px 0 20px;
    color: #fff;
}

    .cloud-hero-intro h1 span {
        display: block;
        background: linear-gradient(90deg,#7DD3FC,#5EEAD4);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.cloud-hero-intro p {
    color: rgba(255,255,255,.68);
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 28px;
}

/* Three stacked service info-cards — replaces the old plain text
   link list + single floating card. Frosted glass on the dark
   hero, each with a small illustration and its own accent colour
   (blue/teal/amber, matching that service's SVG). Staggered
   data-aos delays in the markup make them appear one after
   another rather than all at once. */
.cloud-hero-services {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cloud-hero-service-card {
    display: flex;
    align-items: center;
    gap: 18px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    padding: 14px 20px 14px 14px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

    .cloud-hero-service-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
    }

    .cloud-hero-service-card:hover {
        background: rgba(255,255,255,.11);
        transform: translateX(6px);
        border-color: rgba(255,255,255,.22);
    }

    .cloud-hero-service-card img {
        width: 88px;
        height: 88px;
        border-radius: 16px;
        flex-shrink: 0;
        box-shadow: 0 12px 26px rgba(3,10,25,.35);
    }

.cloud-hero-service-text {
    flex: 1;
    min-width: 0;
}

    .cloud-hero-service-text h4 {
        color: #fff;
        font-size: 15px;
        margin-bottom: 3px;
    }

    .cloud-hero-service-text p {
        color: rgba(255,255,255,.6);
        font-size: 12.5px;
        line-height: 1.5;
        margin: 0;
        min-height: 1.5em;
    }
        /* Typewriter cursor — added by JS while typing, removed once done
   (see Cloud.cshtml's Scripts section). Blinks via steps() so it
   reads as a real terminal cursor, not a smooth fade. */
        .cloud-hero-service-text p.typing-cursor::after {
            content: "|";
            margin-left: 2px;
            color: #7DD3FC;
            animation: typeCursorBlink .8s steps(1) infinite;
        }

@keyframes typeCursorBlink {
    50% {
        opacity: 0;
    }
}

@media(prefers-reduced-motion:reduce) {
    .cloud-hero-service-text p.typing-cursor::after {
        animation: none;
    }
}

.cloud-hero-service-card > i {
    color: rgba(255,255,255,.5);
    font-size: 15px;
    flex-shrink: 0;
    transition: transform .25s ease, color .25s ease;
}

.cloud-hero-service-card:hover > i {
    transform: translateX(3px);
    color: #fff;
}

.cloud-hero-service-card:nth-child(1)::before {
    background: linear-gradient(180deg,var(--primary),var(--primary-light));
}

.cloud-hero-service-card:nth-child(2)::before {
    background: linear-gradient(180deg,var(--secondary),var(--secondary-light));
}

.cloud-hero-service-card:nth-child(3)::before {
    background: linear-gradient(180deg,var(--accent-dark),var(--accent));
}

@media(max-width:1100px) {
    .cloud-hero-grid {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .cloud-hero-services {
        max-width: 520px;
    }
}

@media(max-width:600px) {
    .cloud-hero {
        padding: 150px 0 70px;
    }

    .cloud-hero-intro h1 {
        font-size: 32px;
    }

    .cloud-hero-service-card {
        padding: 12px 16px 12px 12px;
        gap: 14px;
    }

        .cloud-hero-service-card img {
            width: 68px;
            height: 68px;
        }
}

/*==========================================================
CHALLENGES ("The Reality") — redesigned: a decorative icon
badge anchors the intro copy, the checklist sits inside a
lightly-tinted card with a blue top accent, and breakpoints are
tightened for a cleaner stack on tablet/mobile.
==========================================================*/

.challenges-layout {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 64px;
    align-items: start;
}

.challenges-badge {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,var(--primary),var(--primary-light));
    color: #fff;
    font-size: 22px;
    box-shadow: 0 12px 26px rgba(10,77,140,.22);
}

.challenges-card {
    background: var(--light);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 8px 32px;
    position: relative;
    overflow: hidden;
}

    .challenges-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: var(--grad-line);
    }

.challenges-list {
    display: flex;
    flex-direction: column;
}

.challenge-row {
    display: flex;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid var(--border);
}

    .challenge-row:last-child {
        border-bottom: none;
    }

    .challenge-row i {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(220,38,38,.09);
        color: var(--danger);
        font-size: 15px;
    }

    .challenge-row p {
        margin: 0;
        font-size: 15.5px;
        color: var(--text);
        line-height: 1.7;
        font-weight: 500;
    }

@media(max-width:1050px) {
    .challenges-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media(max-width:600px) {
    .challenges-card {
        padding: 6px 20px;
    }

    .challenge-row {
        gap: 12px;
        padding: 16px 0;
    }

        .challenge-row p {
            font-size: 14.5px;
        }
}

/*==========================================================
CLOUD SCAN — "The Reality" section, full redesign: dark
radar-scan theme instead of a plain white background, with an
animated concentric-ring radar icon, a scanning beam that
travels down a central spine, and the five gaps laid out as an
alternating zigzag timeline (not a flat horizontal grid).
==========================================================*/

.cloud-scan-section {
    background: linear-gradient(180deg,#050B14 0%,#0B1B2E 100%);
    padding: 130px 0;
    position: relative;
    overflow: hidden;
}

.cloud-scan-glow {
    position: absolute;
    top: -220px;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(rgba(47,128,237,.16),transparent 70%);
    pointer-events: none;
}

.cloud-scan-intro {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}

/* Animated radar — concentric pinging rings around a broadcast icon */
.cloud-scan-radar {
    position: relative;
    width: 70px;
    height: 70px;
    margin: 0 auto 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .cloud-scan-radar i {
        font-size: 26px;
        color: #7DD3FC;
        position: relative;
        z-index: 2;
    }

    .cloud-scan-radar .radar-ring {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 1.5px solid rgba(125,211,252,.55);
        animation: radarPing 3s ease-out infinite;
    }

        .cloud-scan-radar .radar-ring.r2 {
            animation-delay: 1s;
        }

        .cloud-scan-radar .radar-ring.r3 {
            animation-delay: 2s;
        }

@keyframes radarPing {
    0% {
        transform: scale(.4);
        opacity: .9;
    }

    100% {
        transform: scale(2.3);
        opacity: 0;
    }
}

@media(prefers-reduced-motion:reduce) {
    .cloud-scan-radar .radar-ring {
        animation: none;
        opacity: 0;
    }
}

.cloud-scan-intro .eyebrow {
    justify-content: center;
    gap: 9px;
    color: #7DD3FC;
}

    .cloud-scan-intro .eyebrow::before {
        background: var(--accent);
    }

    .cloud-scan-intro .eyebrow .cyber-status-dot {
        color: #7DD3FC;
    }

.cloud-scan-intro h2 {
    font-size: 34px;
    color: #fff;
    margin: 14px 0 16px;
}

    .cloud-scan-intro h2 span {
        background: linear-gradient(90deg,#7DD3FC,#5EEAD4);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.cloud-scan-intro p {
    font-size: 16.5px;
    color: rgba(255,255,255,.68);
    line-height: 1.85;
    margin-bottom: 0;
}

.cloud-scan-lead {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin: 56px 0 10px;
    position: relative;
    z-index: 2;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
}

    .cloud-scan-lead::before, .cloud-scan-lead::after {
        content: "";
        width: 40px;
        height: 1px;
        background: rgba(255,255,255,.18);
    }

/* Zigzag scanning timeline — replaces the old flat 3-column grid */
.cloud-scan-timeline {
    position: relative;
    max-width: 880px;
    margin: 60px auto 0;
    z-index: 2;
}

    .cloud-scan-timeline::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 2px;
        transform: translateX(-50%);
        background: linear-gradient(180deg,var(--primary-light),var(--secondary-light),var(--accent),var(--danger),var(--primary-dark));
        opacity: .4;
    }
    /* the scanning beam itself — a bright dot that travels the full
   length of the spine on a loop, like a radar sweep reading down
   the list of findings */
    .cloud-scan-timeline::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 0;
        width: 9px;
        height: 9px;
        transform: translate(-50%,-50%);
        border-radius: 50%;
        background: #7DD3FC;
        box-shadow: 0 0 18px 5px rgba(125,211,252,.65);
        animation: scanBeam 5s ease-in-out infinite;
    }

@keyframes scanBeam {
    0% {
        top: 0;
        opacity: 0;
    }

    6% {
        opacity: 1;
    }

    94% {
        opacity: 1;
    }

    100% {
        top: 100%;
        opacity: 0;
    }
}

@media(prefers-reduced-motion:reduce) {
    .cloud-scan-timeline::after {
        display: none;
    }
}

.scan-item {
    position: relative;
    width: 50%;
    padding: 0 42px 44px;
}

    .scan-item:nth-child(odd) {
        left: 0;
        text-align: right;
    }

    .scan-item:nth-child(even) {
        left: 50%;
        text-align: left;
    }

    .scan-item:last-child {
        padding-bottom: 0;
    }

    /* connector node on the spine per item */
    .scan-item::after {
        content: "";
        position: absolute;
        top: 24px;
        width: 13px;
        height: 13px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 0 0 4px rgba(255,255,255,.14);
        z-index: 2;
    }

    .scan-item:nth-child(odd)::after {
        right: -6.5px;
    }

    .scan-item:nth-child(even)::after {
        left: -6.5px;
    }

.scan-item-card {
    display: inline-block;
    text-align: left;
    max-width: 370px;
    width: 100%;
    background: #fff;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--radius);
    padding: 22px 24px;
    position: relative;
    overflow: hidden;
    transition: var(--transition);
    box-shadow: 0 20px 45px rgba(3,10,25,.28);
}

    .scan-item-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
    }

    .scan-item-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 26px 55px rgba(3,10,25,.34);
    }

.scan-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.scan-item .cloud-scan-num {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--primary);
}

.scan-item .cloud-scan-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

    .scan-item .cloud-scan-icon i {
        color: #fff;
        position: relative;
        z-index: 2;
    }
    /* soft pulsing ring behind each icon, staggered per item so all
   five don't pulse in sync — reads as ongoing "scanning" activity */
    .scan-item .cloud-scan-icon::before {
        content: "";
        position: absolute;
        inset: -4px;
        border-radius: 14px;
        box-shadow: 0 0 0 0 currentColor;
        animation: iconPulse 3.6s ease-out infinite;
    }

.scan-item:nth-child(2) .cloud-scan-icon::before {
    animation-delay: .6s;
}

.scan-item:nth-child(3) .cloud-scan-icon::before {
    animation-delay: 1.2s;
}

.scan-item:nth-child(4) .cloud-scan-icon::before {
    animation-delay: 1.8s;
}

.scan-item:nth-child(5) .cloud-scan-icon::before {
    animation-delay: 2.4s;
}

@keyframes iconPulse {
    0% {
        box-shadow: 0 0 0 0 currentColor;
        opacity: .45;
    }

    70% {
        box-shadow: 0 0 0 9px transparent;
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@media(prefers-reduced-motion:reduce) {
    .scan-item .cloud-scan-icon::before {
        animation: none;
    }
}

/* Body text inside each card is blue-themed regardless of that
   card's own icon colour — icons keep their five-colour rotation
   below, only the paragraph copy and number label unify to blue */
.scan-item p {
    font-size: 14.5px;
    color: var(--primary-dark);
    line-height: 1.7;
    margin: 0;
    font-weight: 500;
}

.scan-item:nth-child(1) .cloud-scan-icon {
    background: linear-gradient(135deg,var(--primary),var(--primary-light));
    color: var(--primary-light);
}

.scan-item:nth-child(1) .scan-item-card::before {
    background: var(--primary);
}

.scan-item:nth-child(2) .cloud-scan-icon {
    background: linear-gradient(135deg,var(--secondary),var(--secondary-light));
    color: var(--secondary-light);
}

.scan-item:nth-child(2) .scan-item-card::before {
    background: var(--secondary);
}

.scan-item:nth-child(3) .cloud-scan-icon {
    background: linear-gradient(135deg,var(--accent-dark),var(--accent));
    color: var(--accent);
}

.scan-item:nth-child(3) .scan-item-card::before {
    background: var(--accent);
}

.scan-item:nth-child(4) .cloud-scan-icon {
    background: linear-gradient(135deg,#B91C1C,var(--danger));
    color: #F87171;
}

.scan-item:nth-child(4) .scan-item-card::before {
    background: var(--danger);
}

.scan-item:nth-child(5) .cloud-scan-icon {
    background: linear-gradient(135deg,var(--primary-dark),var(--primary));
    color: var(--primary-light);
}

.scan-item:nth-child(5) .scan-item-card::before {
    background: var(--primary-dark);
}

@media(max-width:800px) {
    .cloud-scan-timeline::before {
        left: 20px;
    }

    .cloud-scan-timeline::after {
        left: 20px;
    }

    .scan-item {
        width: 100%;
        left: 0 !important;
        text-align: left !important;
        padding: 0 0 36px 52px;
    }

        .scan-item::after {
            left: 14px !important;
            right: auto !important;
        }

    .scan-item-card {
        max-width: none;
    }
}

@media(max-width:560px) {
    .cloud-scan-intro h2 {
        font-size: 26px;
    }
}

/*==========================================================
CLOUD SERVICES — redesigned: three white "medallion" cards
instead of the old dark image-card grid (dropped the stock SVG
imagery entirely). Each card centres on a large icon medallion
with a slow continuously-rotating gradient ring behind it, and
carries its own colour identity (blue/teal/amber) — mixed
across the row rather than one flat theme. The "Reach Out"
banner below is now a true 3D flip card that auto-rotates
through three colour-themed messages on a timer, with a single
fixed CTA button sitting outside the flip so it never moves.
==========================================================*/

.cloud-services-bg {
    background: var(--light);
    position: relative;
    overflow: hidden;
}

    .cloud-services-bg::before {
        content: "";
        position: absolute;
        top: -160px;
        right: -140px;
        width: 420px;
        height: 420px;
        border-radius: 50%;
        background: radial-gradient(rgba(47,128,237,.08),transparent 70%);
        pointer-events: none;
    }

    .cloud-services-bg::after {
        content: "";
        position: absolute;
        bottom: -180px;
        left: -140px;
        width: 420px;
        height: 420px;
        border-radius: 50%;
        background: radial-gradient(rgba(20,184,166,.07),transparent 70%);
        pointer-events: none;
    }

    .cloud-services-bg .container {
        position: relative;
        z-index: 2;
    }

.dark-services-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 28px;
}

.dark-service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 44px 30px 34px;
    color: var(--text);
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    transition: transform .3s ease, box-shadow .3s ease;
    overflow: hidden;
}

    .dark-service-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
    }

    .dark-service-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 26px 50px rgba(15,23,42,.12);
    }

/* Medallion — icon sits on a solid gradient disc, with a thin
   conic-gradient ring rotating slowly behind it continuously */
.dark-service-card-icon {
    position: relative;
    width: 78px;
    height: 78px;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .dark-service-card-icon::before {
        content: "";
        position: absolute;
        inset: -7px;
        border-radius: 50%;
        background: conic-gradient(from 0deg, var(--ring-color-1,var(--primary)), var(--ring-color-2,var(--primary-light)), transparent 65%, var(--ring-color-1,var(--primary)));
        animation: medallionSpin 7s linear infinite;
    }

    .dark-service-card-icon::after {
        content: "";
        position: absolute;
        inset: 4px;
        border-radius: 50%;
        background: #fff;
    }

    .dark-service-card-icon i {
        position: relative;
        z-index: 2;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 23px;
        color: #fff;
    }

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

@media(prefers-reduced-motion:reduce) {
    .dark-service-card-icon::before {
        animation: none;
    }
}

.dark-service-card h3 {
    font-size: 19px;
    margin-bottom: 10px;
    color: var(--dark);
}

.dark-service-desc {
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--text-light);
    margin-bottom: 18px;
}

.dark-service-learn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    font-size: 13.5px;
    font-weight: 700;
}

    .dark-service-learn i {
        font-size: 12px;
        transition: transform .2s ease;
    }

.dark-service-card:hover .dark-service-learn i {
    transform: translateX(3px);
}

/* Mixed colour identity per card — blue / teal / amber */
.dark-service-card:nth-child(1) {
    --ring-color-1: var(--primary);
    --ring-color-2: var(--primary-light);
}

    .dark-service-card:nth-child(1)::before {
        background: var(--primary);
    }

    .dark-service-card:nth-child(1) .dark-service-card-icon i {
        background: linear-gradient(135deg,var(--primary),var(--primary-light));
    }

    .dark-service-card:nth-child(1) .dark-service-learn {
        color: var(--primary);
    }

        .dark-service-card:nth-child(1) .dark-service-learn i {
            color: var(--primary);
        }

.dark-service-card:nth-child(2) {
    --ring-color-1: var(--secondary);
    --ring-color-2: var(--secondary-light);
}

    .dark-service-card:nth-child(2)::before {
        background: var(--secondary);
    }

    .dark-service-card:nth-child(2) .dark-service-card-icon i {
        background: linear-gradient(135deg,var(--secondary),var(--secondary-light));
    }

    .dark-service-card:nth-child(2) .dark-service-learn {
        color: var(--secondary);
    }

        .dark-service-card:nth-child(2) .dark-service-learn i {
            color: var(--secondary);
        }

.dark-service-card:nth-child(3) {
    --ring-color-1: var(--accent-dark);
    --ring-color-2: var(--accent);
}

    .dark-service-card:nth-child(3)::before {
        background: var(--accent-dark);
    }

    .dark-service-card:nth-child(3) .dark-service-card-icon i {
        background: linear-gradient(135deg,var(--accent-dark),var(--accent));
    }

    .dark-service-card:nth-child(3) .dark-service-learn {
        color: var(--accent-dark);
    }

        .dark-service-card:nth-child(3) .dark-service-learn i {
            color: var(--accent-dark);
        }

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

/* ---------- Reach-out banner: true 3D flip card ----------
   Two physical faces (front/back) using the standard flip-card
   technique (transform-style:preserve-3d + backface-visibility:
   hidden), so content always renders right-side-up regardless of
   which face is showing. A small script (see Cloud.cshtml's
   Scripts section) toggles .flipped on .reachout-flip-inner every
   ~4.5s and rewrites whichever face just went out of view with
   the next message/colour, so only two DOM faces are ever needed
   for any number of messages. The CTA button lives outside this
   flip entirely, so it's the one constant across every rotation. */
.dark-reachout {
    margin-top: 56px;
}

.reachout-flip {
    perspective: 1400px;
    margin-bottom: 22px;
}

.reachout-flip-inner {
    position: relative;
    width: 100%;
    min-height: 150px;
    transform-style: preserve-3d;
    transition: transform .8s cubic-bezier(.4,0,.2,1);
}

    .reachout-flip-inner.flipped {
        transform: rotateY(180deg);
    }

@media(prefers-reduced-motion:reduce) {
    .reachout-flip-inner {
        transition: opacity .4s ease;
    }

        .reachout-flip-inner.flipped {
            transform: none;
        }
}

.reachout-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: var(--radius-lg);
    padding: 48px 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

    .reachout-face.face-back {
        transform: rotateY(180deg);
    }

    .reachout-face::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 5px;
        height: 100%;
        background: var(--grad-line);
    }

    .reachout-face h3 {
        position: relative;
        z-index: 2;
        color: #fff;
        font-size: 26px;
        line-height: 1.4;
        max-width: 640px;
        margin: 0;
    }

    /* Three colour themes, applied via a class swapped in by JS */
    .reachout-face.theme-blue {
        background: linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 60%,var(--secondary) 130%);
    }

    .reachout-face.theme-teal {
        background: linear-gradient(135deg,#0B4F4A 0%,var(--secondary) 55%,var(--secondary-light) 130%);
    }

    .reachout-face.theme-amber {
        background: linear-gradient(135deg,#7A4A08 0%,var(--accent-dark) 55%,var(--accent) 130%);
    }

.reachout-cta-row {
    text-align: center;
}

@media(max-width:600px) {
    .dark-reachout {
        margin-top: 40px;
    }

    .reachout-face {
        padding: 34px 26px;
    }

        .reachout-face h3 {
            font-size: 20px;
        }

    .reachout-flip-inner {
        min-height: 190px;
    }
}

/*==========================================================
BENEFITS — redesigned: each card now has a soft drifting glow
blob behind it, a hexagonal icon frame (ties to the "network/
cloud node" motif without a full honeycomb layout), a diagonal
shimmer sweep on hover, and a numeral that fills solid on hover
instead of just fading. Same six-colour rotation as before
(primary, secondary, accent, success, primary-dark, deep teal),
mixed across the grid so no two neighbouring cards share a hue.
==========================================================*/

.benefits-section {
    position: relative;
    overflow: hidden;
}

.benefits-head-glow {
    position: absolute;
    top: -180px;
    left: 50%;
    transform: translateX(-50%);
    width: 820px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(rgba(10,77,140,.07),rgba(20,184,166,.05) 55%,transparent 75%);
    pointer-events: none;
    z-index: 0;
}

.benefits-head {
    max-width: 680px;
    margin: 0 auto 64px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.benefits-head-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,var(--primary),var(--secondary));
    color: #fff;
    font-size: 24px;
    box-shadow: 0 14px 30px rgba(10,77,140,.28);
    position: relative;
}

    .benefits-head-icon::before {
        content: "";
        position: absolute;
        inset: -8px;
        border-radius: 20px;
        border: 1.5px dashed rgba(10,77,140,.28);
        animation: benefitsIconSpin 14s linear infinite;
    }

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

@media(prefers-reduced-motion:reduce) {
    .benefits-head-icon::before {
        animation: none;
    }
}

.eyebrow-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--primary);
    background: rgba(10,77,140,.07);
    border: 1px solid rgba(10,77,140,.16);
    padding: 8px 18px;
    border-radius: 30px;
    margin-bottom: 20px;
}

.benefits-head h2 {
    font-size: 36px;
    line-height: 1.3;
    color: var(--dark);
    margin-bottom: 22px;
}

    .benefits-head h2 span {
        background: linear-gradient(90deg,var(--primary),var(--secondary-light));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.benefits-head-rule {
    display: block;
    width: 64px;
    height: 4px;
    margin: 0 auto;
    border-radius: 3px;
    background: var(--grad-line);
    position: relative;
    overflow: hidden;
}

    .benefits-head-rule::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(255,255,255,.6);
        animation: ruleSweep 2.6s ease-in-out infinite;
    }

@keyframes ruleSweep {
    0% {
        transform: translateX(-100%);
    }

    50% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(100%);
    }
}

@media(prefers-reduced-motion:reduce) {
    .benefits-head-rule::after {
        animation: none;
        display: none;
    }
}

@media(max-width:600px) {
    .benefits-head h2 {
        font-size: 27px;
    }
}

.benefit-spotlight-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 30px;
}

.benefit-spotlight {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 36px 30px 30px;
    position: relative;
    overflow: hidden;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

    .benefit-spotlight:hover {
        transform: translateY(-6px);
        box-shadow: 0 26px 50px rgba(15,23,42,.1);
        border-color: transparent;
    }

    /* Soft drifting glow blob — purely ambient colour wash behind
   the card content, contained within the card's own rounded
   corners (overflow:hidden above keeps it from bleeding out) */
    .benefit-spotlight::before {
        content: "";
        position: absolute;
        width: 190px;
        height: 190px;
        border-radius: 50%;
        top: -70px;
        right: -60px;
        filter: blur(38px);
        opacity: .16;
        z-index: 0;
        animation: blobDrift 10s ease-in-out infinite;
    }

@keyframes blobDrift {
    0%,100% {
        transform: translate(0,0) scale(1);
    }

    50% {
        transform: translate(-14px,16px) scale(1.12);
    }
}

@media(prefers-reduced-motion:reduce) {
    .benefit-spotlight::before {
        animation: none;
    }
}

/* Diagonal shimmer sweep on hover */
.benefit-spotlight::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(115deg,transparent,rgba(255,255,255,.55),transparent);
    transform: skewX(-20deg);
    transition: left .6s ease;
    z-index: 1;
    pointer-events: none;
}

.benefit-spotlight:hover::after {
    left: 130%;
}

.benefit-spotlight-num {
    position: absolute;
    top: 10px;
    right: 20px;
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 52px;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px currentColor;
    opacity: .16;
    pointer-events: none;
    z-index: 2;
    transition: opacity .3s ease, -webkit-text-stroke-width .3s ease;
}

.benefit-spotlight:hover .benefit-spotlight-num {
    opacity: .9;
    color: currentColor;
    -webkit-text-stroke-width: 0;
}

/* Hexagonal icon frame */
.benefit-spotlight-icon {
    width: 56px;
    height: 58px;
    clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 21px;
    margin-bottom: 22px;
    transition: transform .35s cubic-bezier(.34,1.56,.64,1);
    position: relative;
    z-index: 2;
}

.benefit-spotlight:hover .benefit-spotlight-icon {
    transform: scale(1.1) rotate(8deg);
}

.benefit-spotlight h3 {
    font-size: 18px;
    margin-bottom: 8px;
    position: relative;
    z-index: 2;
}

.benefit-spotlight p {
    font-size: 14.5px;
    line-height: 1.75;
    margin-bottom: 0;
    position: relative;
    z-index: 2;
}

.benefit-spotlight-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 0%;
    z-index: 2;
    transition: width .35s ease;
}

.benefit-spotlight:hover .benefit-spotlight-bar {
    width: 100%;
}

/* Six-colour rotation — numeral, icon, blob, underline and the
   card's own small heading all pick up the same hue per card. */
.benefit-spotlight:nth-child(1) {
    color: var(--primary);
}

    .benefit-spotlight:nth-child(1)::before {
        background: var(--primary-light);
    }

    .benefit-spotlight:nth-child(1) .benefit-spotlight-icon {
        background: linear-gradient(135deg,var(--primary),var(--primary-light));
        box-shadow: 0 10px 22px rgba(10,77,140,.22);
    }

    .benefit-spotlight:nth-child(1) .benefit-spotlight-bar {
        background: linear-gradient(90deg,var(--primary),var(--primary-light));
    }

    .benefit-spotlight:nth-child(1) h3 {
        color: var(--primary);
    }

.benefit-spotlight:nth-child(2) {
    color: var(--secondary);
}

    .benefit-spotlight:nth-child(2)::before {
        background: var(--secondary-light);
    }

    .benefit-spotlight:nth-child(2) .benefit-spotlight-icon {
        background: linear-gradient(135deg,var(--secondary),var(--secondary-light));
        box-shadow: 0 10px 22px rgba(14,116,144,.22);
    }

    .benefit-spotlight:nth-child(2) .benefit-spotlight-bar {
        background: linear-gradient(90deg,var(--secondary),var(--secondary-light));
    }

    .benefit-spotlight:nth-child(2) h3 {
        color: var(--secondary);
    }

.benefit-spotlight:nth-child(3) {
    color: var(--accent-dark);
}

    .benefit-spotlight:nth-child(3)::before {
        background: var(--accent);
    }

    .benefit-spotlight:nth-child(3) .benefit-spotlight-icon {
        background: linear-gradient(135deg,var(--accent-dark),var(--accent));
        box-shadow: 0 10px 22px rgba(245,158,11,.24);
    }

    .benefit-spotlight:nth-child(3) .benefit-spotlight-bar {
        background: linear-gradient(90deg,var(--accent-dark),var(--accent));
    }

    .benefit-spotlight:nth-child(3) h3 {
        color: var(--accent-dark);
    }

.benefit-spotlight:nth-child(4) {
    color: #15803D;
}

    .benefit-spotlight:nth-child(4)::before {
        background: var(--success);
    }

    .benefit-spotlight:nth-child(4) .benefit-spotlight-icon {
        background: linear-gradient(135deg,#15803D,var(--success));
        box-shadow: 0 10px 22px rgba(34,197,94,.22);
    }

    .benefit-spotlight:nth-child(4) .benefit-spotlight-bar {
        background: linear-gradient(90deg,#15803D,var(--success));
    }

    .benefit-spotlight:nth-child(4) h3 {
        color: #15803D;
    }

.benefit-spotlight:nth-child(5) {
    color: var(--primary-dark);
}

    .benefit-spotlight:nth-child(5)::before {
        background: var(--primary);
    }

    .benefit-spotlight:nth-child(5) .benefit-spotlight-icon {
        background: linear-gradient(135deg,var(--primary-dark),var(--primary));
        box-shadow: 0 10px 22px rgba(7,55,99,.26);
    }

    .benefit-spotlight:nth-child(5) .benefit-spotlight-bar {
        background: linear-gradient(90deg,var(--primary-dark),var(--primary));
    }

    .benefit-spotlight:nth-child(5) h3 {
        color: var(--primary-dark);
    }

.benefit-spotlight:nth-child(6) {
    color: #0F766E;
}

    .benefit-spotlight:nth-child(6)::before {
        background: var(--secondary-light);
    }

    .benefit-spotlight:nth-child(6) .benefit-spotlight-icon {
        background: linear-gradient(135deg,#0F766E,var(--secondary-light));
        box-shadow: 0 10px 22px rgba(15,118,110,.24);
    }

    .benefit-spotlight:nth-child(6) .benefit-spotlight-bar {
        background: linear-gradient(90deg,#0F766E,var(--secondary-light));
    }

    .benefit-spotlight:nth-child(6) h3 {
        color: #0F766E;
    }

@media(max-width:900px) {
    .benefit-spotlight-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:560px) {
    .benefit-spotlight-grid {
        grid-template-columns: 1fr;
    }

    .benefit-spotlight-num {
        font-size: 46px;
    }
}

/*==========================================================
CYBERSECURITY PAGE — entirely new component set, built only
for this page. Colour palette is the same brand variables used
everywhere else; the structures themselves are new: a live
status hero (no image/card column), an orbiting domain diagram,
a wave-rhythm incident lifecycle, a 24-hour coverage strip, and
a single-row alert banner instead of the two-column CTA box.
==========================================================*/

/* ---------- Hero: two floating cards on a neutral backdrop.
   Left card carries the blue brand gradient; right card is a
   colourful metrics cluster pulling in teal, amber, red and
   green — so the page opens with the full palette, not just blue. ---------- */

.cyber-hero {
    position: relative;
    overflow: hidden;
    background: var(--light);
    padding: 170px 0 110px;
}

    .cyber-hero::before {
        content: "";
        position: absolute;
        top: -220px;
        right: -200px;
        width: 700px;
        height: 700px;
        border-radius: 50%;
        background: radial-gradient(rgba(47,128,237,.08),transparent 65%);
        pointer-events: none;
    }

.cyber-hero-split {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 40px;
    align-items: center;
    position: relative;
    z-index: 2;
}

/* Left: floating blue card */
.cyber-hero-card-left {
    background: linear-gradient(155deg,var(--primary-dark) 0%,var(--primary) 55%,var(--secondary) 140%);
    border-radius: var(--radius-lg);
    color: #fff;
    padding: 56px 50px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 40px 80px rgba(7,55,99,.35);
    animation: floatCard 7s ease-in-out infinite;
}

    .cyber-hero-card-left::before {
        content: "";
        position: absolute;
        top: -140px;
        left: -100px;
        width: 280px;
        height: 280px;
        border-radius: 50%;
        background: radial-gradient(rgba(255,255,255,.12),transparent 70%);
        pointer-events: none;
    }

.cyber-hero-inner {
    position: relative;
    z-index: 2;
}

.cyber-hero .eyebrow {
    color: #7DD3FC;
}

    .cyber-hero .eyebrow::before {
        background: var(--accent);
    }

.cyber-hero h1 {
    color: #fff;
    font-size: 36px;
    line-height: 1.25;
    margin: 16px 0 18px;
}

    .cyber-hero h1 span {
        display: block;
        background: linear-gradient(90deg,#7DD3FC,#5EEAD4);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.cyber-hero p {
    color: rgba(255,255,255,.72);
    font-size: 15.5px;
    line-height: 1.8;
    margin-bottom: 28px;
}

.cyber-hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 0;
}

/* Right: floating multi-colour metrics card */
.cyber-hero-card-right {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 34px;
    box-shadow: 0 30px 65px rgba(15,23,42,.14);
    animation: floatCard 7s ease-in-out infinite;
    animation-delay: 1.4s;
}

.cyber-hero-metrics-title {
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-light);
    margin-bottom: 18px;
}

.cyber-metric-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.cyber-metric-tile {
    border-radius: 14px;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .cyber-metric-tile i {
        font-size: 19px;
    }

    .cyber-metric-tile b {
        font-size: 20px;
        line-height: 1;
    }

    .cyber-metric-tile span {
        font-size: 11.5px;
        color: var(--text-light);
        font-weight: 600;
    }

    .cyber-metric-tile.teal {
        background: linear-gradient(160deg,rgba(20,184,166,.1),transparent 75%);
    }

        .cyber-metric-tile.teal i, .cyber-metric-tile.teal b {
            color: var(--secondary);
        }

    .cyber-metric-tile.amber {
        background: linear-gradient(160deg,rgba(245,158,11,.1),transparent 75%);
    }

        .cyber-metric-tile.amber i, .cyber-metric-tile.amber b {
            color: var(--accent-dark);
        }

    .cyber-metric-tile.red {
        background: linear-gradient(160deg,rgba(220,38,38,.08),transparent 75%);
    }

        .cyber-metric-tile.red i, .cyber-metric-tile.red b {
            color: var(--danger);
        }

    .cyber-metric-tile.green {
        background: linear-gradient(160deg,rgba(34,197,94,.1),transparent 75%);
    }

        .cyber-metric-tile.green i, .cyber-metric-tile.green b {
            color: #15803D;
        }

.cyber-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.cyber-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--light);
    border: 1px solid var(--border);
    border-radius: 30px;
    padding: 7px 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
}

.cyber-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    color: var(--success);
    flex-shrink: 0;
    box-shadow: 0 0 0 0 currentColor;
    animation: cyberPulse 2s infinite;
}

@keyframes cyberPulse {
    0% {
        box-shadow: 0 0 0 0 currentColor;
    }

    70% {
        box-shadow: 0 0 0 8px transparent;
    }

    100% {
        box-shadow: 0 0 0 0 transparent;
    }
}

@media(max-width:960px) {
    .cyber-hero-split {
        grid-template-columns: 1fr;
    }

    .cyber-hero-card-right {
        order: -1;
    }
}

@media(max-width:600px) {
    .cyber-hero {
        padding: 150px 0 70px;
    }

    .cyber-hero-card-left {
        padding: 38px 28px;
    }

    .cyber-hero h1 {
        font-size: 27px;
    }

    .cyber-metric-grid {
        gap: 10px;
    }
}

/* ---------- Security Domains: orbit / hub-and-spoke diagram ---------- */

.cyber-orbit-section {
    background: #fff;
    padding: 130px 0;
}

/* Editorial split header — deliberately restrained: the only
   blue is a thin divider rule and a faint watermark icon. The
   heading itself stays neutral black, unlike the lifecycle
   section's filled banner above. */
.cyber-domains-head {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 36px 0;
    position: relative;
}

    .cyber-domains-head::before {
        content: "";
        position: absolute;
        left: 190px;
        top: 36px;
        bottom: 36px;
        width: 2px;
        background: linear-gradient(180deg,var(--primary-light),var(--secondary-light));
    }

.cyber-domains-label {
    padding-right: 30px;
    position: relative;
}

    .cyber-domains-label .eyebrow {
        margin-bottom: 18px;
    }

    .cyber-domains-label i {
        font-size: 44px;
        color: var(--primary-light);
        opacity: .16;
        display: block;
    }

.cyber-domains-content {
    padding-left: 36px;
}

    .cyber-domains-content h2 {
        color: var(--dark);
        margin-bottom: 14px;
        font-size: 34px;
        line-height: 1.25;
    }

        .cyber-domains-content h2 span {
            background: linear-gradient(90deg,var(--primary),var(--secondary-light));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

    .cyber-domains-content p {
        color: var(--text-light);
        max-width: 620px;
        margin: 0;
        font-size: 16.5px;
        line-height: 1.8;
        padding-left: 14px;
        border-left: 2px solid var(--border);
    }

@media(max-width:700px) {
    .cyber-domains-head {
        grid-template-columns: 1fr;
        padding: 28px 0;
    }

        .cyber-domains-head::before {
            display: none;
        }

    .cyber-domains-label {
        padding-right: 0;
        margin-bottom: 16px;
    }

        .cyber-domains-label i {
            display: none;
        }

    .cyber-domains-content {
        padding-left: 0;
    }

        .cyber-domains-content h2 {
            font-size: 25px;
        }
}

.cyber-orbit {
    position: relative;
    width: 520px;
    height: 520px;
    margin: 70px auto 0;
}

.cyber-orbit-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border: 1.5px dashed var(--border);
    border-radius: 50%;
}

    .cyber-orbit-ring.r1 {
        width: 380px;
        height: 380px;
        animation: orbitSpin 40s linear infinite;
    }

    .cyber-orbit-ring.r2 {
        width: 520px;
        height: 520px;
        animation: orbitSpinReverse 60s linear infinite;
    }

@keyframes orbitSpin {
    from {
        transform: translate(-50%,-50%) rotate(0deg);
    }

    to {
        transform: translate(-50%,-50%) rotate(360deg);
    }
}

@keyframes orbitSpinReverse {
    from {
        transform: translate(-50%,-50%) rotate(360deg);
    }

    to {
        transform: translate(-50%,-50%) rotate(0deg);
    }
}

@media(prefers-reduced-motion:reduce) {
    .cyber-orbit-ring {
        animation: none;
    }
}

.cyber-orbit-hub {
    position: absolute;
    top: 190px;
    left: 190px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: linear-gradient(135deg,var(--primary-dark),var(--primary));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 20px 45px rgba(10,77,140,.3);
    z-index: 3;
    animation: hubPulse 3.6s ease-in-out infinite;
}

    .cyber-orbit-hub i {
        font-size: 30px;
        margin-bottom: 6px;
    }

    .cyber-orbit-hub span {
        font-family: var(--font-mono);
        font-size: 10.5px;
        text-transform: uppercase;
        letter-spacing: .06em;
        opacity: .85;
    }

@keyframes hubPulse {
    0%,100% {
        box-shadow: 0 20px 45px rgba(10,77,140,.3),0 0 0 0 rgba(47,128,237,.35);
    }

    50% {
        box-shadow: 0 20px 45px rgba(10,77,140,.3),0 0 0 16px rgba(47,128,237,0);
    }
}

@media(prefers-reduced-motion:reduce) {
    .cyber-orbit-hub {
        animation: none;
    }
}

.cyber-orbit-node {
    position: absolute;
    width: 150px;
    text-align: center;
    z-index: 2;
}

.cyber-orbit-node-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    margin: 0 auto 10px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 21px;
    box-shadow: 0 12px 26px rgba(0,0,0,.16);
}

    .cyber-orbit-node-icon::before {
        content: "";
        position: absolute;
        inset: -5px;
        border-radius: 17px;
        box-shadow: 0 0 0 0 currentColor;
        animation: orbitNodeGlow 3.6s ease-out infinite;
    }

.cyber-orbit-node.n2 .cyber-orbit-node-icon::before {
    animation-delay: .6s;
}

.cyber-orbit-node.n3 .cyber-orbit-node-icon::before {
    animation-delay: 1.2s;
}

.cyber-orbit-node.n4 .cyber-orbit-node-icon::before {
    animation-delay: 1.8s;
}

.cyber-orbit-node.n5 .cyber-orbit-node-icon::before {
    animation-delay: 2.4s;
}

.cyber-orbit-node.n6 .cyber-orbit-node-icon::before {
    animation-delay: 3s;
}

@keyframes orbitNodeGlow {
    0% {
        box-shadow: 0 0 0 0 currentColor;
        opacity: .5;
    }

    70% {
        box-shadow: 0 0 0 8px transparent;
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@media(prefers-reduced-motion:reduce) {
    .cyber-orbit-node-icon::before {
        animation: none;
    }
}

.cyber-orbit-node h4 {
    font-size: 14px;
    margin-bottom: 4px;
    color: var(--dark);
}

.cyber-orbit-node p {
    font-size: 11.5px;
    color: var(--text-light);
    line-height: 1.5;
    margin: 0;
}

.cyber-orbit-node.n1 {
    left: 195px;
    top: 0px;
}

.cyber-orbit-node.n2 {
    left: 365px;
    top: 98px;
}

.cyber-orbit-node.n3 {
    left: 365px;
    top: 290px;
}

.cyber-orbit-node.n4 {
    left: 195px;
    top: 388px;
}

.cyber-orbit-node.n5 {
    left: 25px;
    top: 290px;
}

.cyber-orbit-node.n6 {
    left: 25px;
    top: 98px;
}

.cyber-orbit-node.n1 .cyber-orbit-node-icon {
    background: linear-gradient(135deg,var(--primary),var(--primary-light));
}

.cyber-orbit-node.n2 .cyber-orbit-node-icon {
    background: linear-gradient(135deg,var(--secondary),var(--secondary-light));
}

.cyber-orbit-node.n3 .cyber-orbit-node-icon {
    background: linear-gradient(135deg,var(--accent-dark),var(--accent));
}

.cyber-orbit-node.n4 .cyber-orbit-node-icon {
    background: linear-gradient(135deg,#B91C1C,var(--danger));
}

.cyber-orbit-node.n5 .cyber-orbit-node-icon {
    background: linear-gradient(135deg,#15803D,var(--success));
}

.cyber-orbit-node.n6 .cyber-orbit-node-icon {
    background: linear-gradient(135deg,var(--primary-dark),var(--primary));
}

@media(max-width:960px) {
    .cyber-orbit {
        width: 100%;
        height: auto;
        margin-top: 40px;
    }

    .cyber-orbit-ring {
        display: none;
    }

    .cyber-orbit-hub {
        position: static;
        margin: 0 auto 32px;
        width: 110px;
        height: 110px;
    }

    .cyber-orbit-node {
        position: static;
        width: 100%;
        display: flex;
        align-items: center;
        gap: 16px;
        text-align: left;
        margin-bottom: 22px;
    }

    .cyber-orbit-node-icon {
        margin: 0;
        flex-shrink: 0;
    }
}

/* ---------- Domain flip-card showcase, flanking the orbit ----------
   Six small cards, three per side, each auto-flipping on its own
   offset timer (pure CSS animation-delay via --i) so they cascade
   one after another continuously rather than flipping in sync. */

.domains-showcase {
    display: grid;
    grid-template-columns: .85fr 1.3fr;
    gap: 48px;
    align-items: center;
    margin-top: 20px;
}

/* ---------- Single bigger spotlight card ----------
   Cycles through all six domains one at a time (not six cards
   at once). Two physical faces alternate via the standard
   flip-card technique; JS rewrites whichever face just went out
   of view with the next domain before its next turn, so only
   two DOM nodes are needed for all six. */
.domain-spotlight {
    position: relative;
    perspective: 1400px;
    min-height: 260px;
}

.domain-spotlight-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: var(--radius-lg);
    padding: 40px 34px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 26px 55px rgba(0,0,0,.18);
    transition: transform .7s cubic-bezier(.4,0,.2,1);
    background: linear-gradient(135deg,var(--primary),var(--primary-light));
}

.domain-spotlight-back {
    transform: rotateY(180deg);
}

.domain-spotlight.flipped .domain-spotlight-face {
    transform: rotateY(180deg);
}

.domain-spotlight.flipped .domain-spotlight-back {
    transform: rotateY(360deg);
}

@media(prefers-reduced-motion:reduce) {
    .domain-spotlight-face {
        transition: opacity .4s ease;
    }

    .domain-spotlight.flipped .domain-spotlight-face {
        transform: none;
    }

    .domain-spotlight.flipped .domain-spotlight-back {
        transform: none;
    }
}

.domain-spotlight-face i {
    font-size: 34px;
    margin-bottom: 18px;
    opacity: .9;
}

.domain-spotlight-face h3 {
    color: #fff;
    font-size: 24px;
    margin-bottom: 12px;
}

.domain-spotlight-face p {
    color: rgba(255,255,255,.82);
    font-size: 15px;
    line-height: 1.75;
    margin: 0;
}

.domain-spotlight-dots {
    position: absolute;
    bottom: -30px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
}

    .domain-spotlight-dots span {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--border);
        transition: background .3s ease,transform .3s ease;
    }

        .domain-spotlight-dots span.active {
            background: var(--primary);
            transform: scale(1.3);
        }

.theme-1 {
    background: linear-gradient(135deg,var(--primary),var(--primary-light));
}

.theme-2 {
    background: linear-gradient(135deg,var(--secondary),var(--secondary-light));
}

.theme-3 {
    background: linear-gradient(135deg,var(--accent-dark),var(--accent));
}

.theme-4 {
    background: linear-gradient(135deg,#B91C1C,var(--danger));
}

.theme-5 {
    background: linear-gradient(135deg,#15803D,var(--success));
}

.theme-6 {
    background: linear-gradient(135deg,var(--primary-dark),var(--primary));
}

@media(max-width:1200px) {
    .domains-showcase {
        grid-template-columns: 1fr;
    }

    .domain-spotlight {
        max-width: 480px;
        margin: 0 auto;
    }

    .cyber-orbit {
        order: -1;
    }
}

/* ---------- Incident Response Lifecycle: wave-rhythm row ---------- */

.cyber-lifecycle-section {
    background: var(--light);
    padding: 130px 0;
}

.cyber-lifecycle-banner {
    background: linear-gradient(120deg,var(--primary-dark) 0%,var(--primary) 55%,var(--secondary) 130%);
    border-radius: var(--radius-lg);
    color: #fff;
    padding: 48px 56px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(7,55,99,.25);
}

    .cyber-lifecycle-banner::before {
        content: "";
        position: absolute;
        top: -140px;
        left: 50%;
        transform: translateX(-50%);
        width: 520px;
        height: 280px;
        border-radius: 50%;
        background: radial-gradient(rgba(255,255,255,.14),transparent 70%);
        pointer-events: none;
    }

    .cyber-lifecycle-banner .eyebrow {
        justify-content: center;
        color: #7DD3FC;
        position: relative;
        z-index: 2;
    }

        .cyber-lifecycle-banner .eyebrow::before {
            background: var(--accent);
        }

    .cyber-lifecycle-banner h2 {
        color: #fff;
        position: relative;
        z-index: 2;
        margin-top: 14px;
    }

    .cyber-lifecycle-banner p {
        color: rgba(255,255,255,.78);
        max-width: 620px;
        margin: 14px auto 0;
        position: relative;
        z-index: 2;
    }

@media(max-width:600px) {
    .cyber-lifecycle-banner {
        padding: 36px 28px;
    }
}

.lifecycle-flow {
    position: relative;
    margin-top: 60px;
}

.lifecycle-flow-line {
    position: absolute;
    top: 28px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--border);
    z-index: 1;
}

.lifecycle-flow-dot {
    position: absolute;
    top: 50%;
    left: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    transform: translateY(-50%);
    background: var(--primary-light);
    box-shadow: 0 0 14px 4px rgba(47,128,237,.55);
    animation: lifecycleFlowTravel 6s ease-in-out infinite;
}

@keyframes lifecycleFlowTravel {
    0% {
        left: 0;
        opacity: 0;
    }

    6% {
        opacity: 1;
    }

    94% {
        opacity: 1;
    }

    100% {
        left: calc(100% - 9px);
        opacity: 0;
    }
}

@media(prefers-reduced-motion:reduce) {
    .lifecycle-flow-dot {
        display: none;
    }
}

.cyber-lifecycle-row {
    display: flex;
    gap: 18px;
    margin-top: 0;
    position: relative;
    z-index: 2;
}

.cyber-lifecycle-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.cyber-lifecycle-badge {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 17px;
    box-shadow: 0 14px 28px rgba(0,0,0,.16);
}

.cyber-lifecycle-step h4 {
    font-size: 16.5px;
    margin-bottom: 8px;
}

.cyber-lifecycle-step p {
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-light);
}

.cyber-lifecycle-step:nth-child(1) .cyber-lifecycle-badge {
    background: linear-gradient(135deg,var(--primary),var(--primary-light));
}

.cyber-lifecycle-step:nth-child(2) .cyber-lifecycle-badge {
    background: linear-gradient(135deg,#B91C1C,var(--danger));
}

.cyber-lifecycle-step:nth-child(3) .cyber-lifecycle-badge {
    background: linear-gradient(135deg,var(--accent-dark),var(--accent));
}

.cyber-lifecycle-step:nth-child(4) .cyber-lifecycle-badge {
    background: linear-gradient(135deg,#15803D,var(--success));
}

.cyber-lifecycle-step:nth-child(5) .cyber-lifecycle-badge {
    background: linear-gradient(135deg,var(--secondary),var(--secondary-light));
}

@media(max-width:900px) {
    .cyber-lifecycle-row {
        flex-direction: column;
        gap: 0;
    }

    .cyber-lifecycle-step {
        flex-direction: row;
        text-align: left;
        align-items: flex-start;
        gap: 18px;
        margin: 0 !important;
        padding: 20px 0;
        border-bottom: 1px solid var(--border);
    }

        .cyber-lifecycle-step:last-child {
            border-bottom: none;
        }

    .cyber-lifecycle-badge {
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .lifecycle-flow-line, .lifecycle-flow-dot {
        display: none;
    }
}

/* ---------- Always-On Protection: 24-hour coverage strip ---------- */

.cyber-uptime-section {
    background: #fff;
    padding: 110px 0;
    text-align: center;
}

.cyber-uptime-strip {
    display: flex;
    gap: 3px;
    max-width: 760px;
    margin: 44px auto 14px;
    border-radius: 8px;
    overflow: hidden;
}

.cyber-uptime-segment {
    flex: 1;
    height: 34px;
    background: var(--border);
    animation: uptimeScan 4.8s linear infinite;
    animation-delay: calc(var(--i) * 0.2s);
}

@keyframes uptimeScan {
    0% {
        background: var(--border);
    }

    4%,8% {
        background: linear-gradient(180deg,var(--primary-light),var(--secondary-light));
    }

    12%,91.6% {
        background: var(--border);
    }

    100% {
        background: var(--border);
    }
}

@media(prefers-reduced-motion:reduce) {
    .cyber-uptime-segment {
        animation: none;
        background: linear-gradient(180deg,var(--primary-light),var(--secondary-light));
    }
}

.cyber-uptime-marks {
    display: flex;
    justify-content: space-between;
    max-width: 760px;
    margin: 0 auto;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-light);
}

/* ---------- Closing banner: diagonal-split, matching the ERP
   page's Assessment CTA structurally, but red/danger-themed to
   match this page's alert identity instead of blue. Same exact
   wording as before — just redistributed between the two panels
   (short question on the light left panel, the supporting line
   as the big statement on the colored right panel). ---------- */

.cyber-alert-cta {
    padding: 90px 0 140px;
    background: var(--light);
}

.cyber-split-box {
    display: flex;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    min-height: 220px;
}

.cyber-split-left {
    flex: 1;
    background: #fff;
    padding: 44px 44px 44px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cyber-split-left-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    flex-shrink: 0;
    position: relative;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(220,38,38,.1);
    color: var(--danger);
    font-size: 20px;
}

    .cyber-split-left-icon::before {
        content: "";
        position: absolute;
        inset: -5px;
        border-radius: 16px;
        box-shadow: 0 0 0 0 rgba(220,38,38,.4);
        animation: alertIconPulse 2.4s ease-out infinite;
    }

@keyframes alertIconPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(220,38,38,.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(220,38,38,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(220,38,38,0);
    }
}

@media(prefers-reduced-motion:reduce) {
    .cyber-split-left-icon::before {
        animation: none;
    }
}

.cyber-split-left h3 {
    font-size: 20px;
    margin-bottom: 0;
    color: var(--dark);
    line-height: 1.4;
}

.cyber-split-right {
    flex: 1.1;
    position: relative;
    color: #fff;
    overflow: hidden;
    padding: 44px 56px 44px 72px;
    margin-left: -40px;
    background: linear-gradient(120deg,#7A1515,var(--danger) 60%,#B91C1C);
    clip-path: polygon(11% 0, 100% 0, 100% 100%, 0 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .cyber-split-right::before {
        content: "";
        position: absolute;
        top: -100px;
        right: -60px;
        width: 260px;
        height: 260px;
        border-radius: 50%;
        background: radial-gradient(rgba(255,255,255,.14),transparent 70%);
        pointer-events: none;
    }

    .cyber-split-right p {
        position: relative;
        z-index: 2;
        color: #fff;
        font-size: 19px;
        line-height: 1.5;
        margin-bottom: 20px;
        font-weight: 600;
        max-width: 480px;
    }

@media(max-width:900px) {
    .cyber-split-box {
        flex-direction: column;
        min-height: 0;
    }

    .cyber-split-left {
        padding: 32px 28px;
    }

    .cyber-split-right {
        clip-path: none;
        margin-left: 0;
        padding: 32px 28px;
    }
}

@media(max-width:700px) {
    .cyber-split-box {
        flex-direction: column;
        align-items: stretch;
    }
}

/*==========================================================
ERP PAGE — entirely new component set. A quick-nav strip under
the hero, an editorial pull-quote overview, a chevron process
flow chain (the centrepiece — no other page uses interlocking
arrow shapes), a diagonal-split CTA, a native <details> FAQ
accordion, and a corner-ribbon closing card. Same brand palette
throughout, no new hues.
==========================================================*/

/* ---------- Hero + in-page quick-nav strip ---------- */

.erp-hero {
    position: relative;
    overflow: hidden;
    background: var(--grad-hero);
    color: #fff;
    padding: 170px 0 90px;
}

    .erp-hero::before {
        content: "";
        position: absolute;
        top: -200px;
        right: -160px;
        width: 620px;
        height: 620px;
        border-radius: 50%;
        background: radial-gradient(rgba(47,128,237,.22),transparent 70%);
        pointer-events: none;
    }

.erp-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 56px;
    align-items: center;
    position: relative;
    z-index: 2;
}

.erp-hero-copy {
    max-width: 640px;
}

.erp-hero .eyebrow {
    color: #7DD3FC;
}

    .erp-hero .eyebrow::before {
        background: var(--accent);
    }

.erp-hero h1 {
    color: #fff;
    font-size: 42px;
    line-height: 1.2;
    margin: 16px 0 18px;
}

    .erp-hero h1 span {
        display: block;
        background: linear-gradient(90deg,#7DD3FC,#5EEAD4);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.erp-hero p {
    color: rgba(255,255,255,.72);
    font-size: 16.5px;
    line-height: 1.85;
    margin-bottom: 30px;
    max-width: 600px;
}

.erp-hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

/* ---------- ERP simulation graphic ----------
   A stylised "live system" panel: window chrome, a hub-and-node
   diagram with pulses travelling outward on a loop, ticking
   stat counters (once scrolled into view), and an animated bar
   chart — reads as a system actually running rather than a
   static illustration. Purely illustrative/aria-hidden. */
.erp-sim {
    background: linear-gradient(155deg,#1A1428 0%,#241B33 55%,#1A1428 100%);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--radius-lg);
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 40px 80px rgba(3,10,25,.4);
    animation: floatCard 8s ease-in-out infinite;
}

.erp-sim-chrome {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255,255,255,.1);
}

    .erp-sim-chrome span {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: rgba(255,255,255,.25);
    }

        .erp-sim-chrome span:nth-child(1) {
            background: #F87171;
        }

        .erp-sim-chrome span:nth-child(2) {
            background: #FBBF24;
        }

        .erp-sim-chrome span:nth-child(3) {
            background: #5EEAD4;
        }

    .erp-sim-chrome b {
        margin-left: 10px;
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 600;
        color: rgba(255,255,255,.55);
    }

.erp-sim-diagram {
    position: relative;
    height: 210px;
    margin: 20px auto 0;
    width: 210px;
}

.erp-sim-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: conic-gradient(from 0deg,var(--primary),var(--secondary),var(--accent),#B91C1C,var(--primary));
    color: #fff;
    font-size: 22px;
    box-shadow: 0 14px 28px rgba(0,0,0,.4);
    animation: hubRotate 10s linear infinite;
}

    .erp-sim-hub i {
        animation: hubIconCounter 10s linear infinite;
        display: inline-block;
    }

@keyframes hubRotate {
    to {
        transform: translate(-50%,-50%) rotate(360deg);
    }
}

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

@media(prefers-reduced-motion:reduce) {
    .erp-sim-hub, .erp-sim-hub i {
        animation: none;
    }
}

.erp-sim-node {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    box-shadow: 0 10px 20px rgba(0,0,0,.3);
}

    .erp-sim-node.pos-top {
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        background: linear-gradient(135deg,var(--primary),var(--primary-light));
    }

    .erp-sim-node.pos-right {
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        background: linear-gradient(135deg,var(--secondary),var(--secondary-light));
    }

    .erp-sim-node.pos-bottom {
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        background: linear-gradient(135deg,var(--accent-dark),var(--accent));
    }

    .erp-sim-node.pos-left {
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        background: linear-gradient(135deg,#15803D,var(--success));
    }

.erp-sim-line {
    position: absolute;
    top: 50%;
    left: 50%;
    background: rgba(255,255,255,.16);
    z-index: 1;
}

    .erp-sim-line.line-top {
        width: 2px;
        height: 59px;
        top: calc(50% - 103px);
        transform: translateX(-50%);
    }

    .erp-sim-line.line-bottom {
        width: 2px;
        height: 59px;
        top: calc(50% + 44px);
        transform: translateX(-50%);
    }

    .erp-sim-line.line-left {
        height: 2px;
        width: 59px;
        left: calc(50% - 103px);
        transform: translateY(-50%);
    }

    .erp-sim-line.line-right {
        height: 2px;
        width: 59px;
        left: calc(50% + 44px);
        transform: translateY(-50%);
    }

.erp-sim-pulse {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    box-shadow: 0 0 10px 3px currentColor;
}

.line-top .erp-sim-pulse {
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    animation: pulseVert 2.4s linear infinite;
    color: var(--primary-light);
    background: currentColor;
}

.line-right .erp-sim-pulse {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    animation: pulseHoriz 2.4s linear infinite;
    color: var(--secondary-light);
    background: currentColor;
}

.line-bottom .erp-sim-pulse {
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    animation: pulseVert 2.4s linear infinite;
    color: var(--accent);
    background: currentColor;
}

.line-left .erp-sim-pulse {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    animation: pulseHoriz 2.4s linear infinite;
    color: var(--success);
    background: currentColor;
}

@keyframes pulseVert {
    0% {
        top: 0;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        top: 100%;
        opacity: 0;
    }
}

@keyframes pulseHoriz {
    0% {
        left: 0;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        left: 100%;
        opacity: 0;
    }
}

@media(prefers-reduced-motion:reduce) {
    .erp-sim-pulse {
        display: none;
    }

    .erp-sim {
        animation: none;
    }
}

.erp-sim-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-top: 1px solid rgba(255,255,255,.1);
    border-bottom: 1px solid rgba(255,255,255,.1);
}

.erp-sim-stat {
    padding: 18px 20px;
    text-align: center;
    position: relative;
}

    .erp-sim-stat:first-child {
        border-right: 1px solid rgba(255,255,255,.1);
    }

.erp-sim-stat-num, .erp-sim-stat-suffix {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 24px;
}

.erp-sim-stat:nth-child(1) .erp-sim-stat-num {
    color: #7DD3FC;
}

.erp-sim-stat:nth-child(2) .erp-sim-stat-num, .erp-sim-stat:nth-child(2) .erp-sim-stat-suffix {
    color: var(--accent);
}

.erp-sim-stat-label {
    display: block;
    font-size: 10.5px;
    color: rgba(255,255,255,.55);
    margin-top: 4px;
    letter-spacing: .02em;
}

.erp-sim-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 60px;
    padding: 16px 20px 0;
}

    .erp-sim-chart span {
        flex: 1;
        border-radius: 3px 3px 0 0;
        height: 0;
        animation: erpBarGrow 1s cubic-bezier(.2,.8,.2,1) forwards;
        animation-delay: var(--d);
    }

        .erp-sim-chart span:nth-child(1) {
            background: linear-gradient(180deg,#7DD3FC,var(--primary-light));
        }

        .erp-sim-chart span:nth-child(2) {
            background: linear-gradient(180deg,#5EEAD4,var(--secondary-light));
        }

        .erp-sim-chart span:nth-child(3) {
            background: linear-gradient(180deg,#FBBF24,var(--accent));
        }

        .erp-sim-chart span:nth-child(4) {
            background: linear-gradient(180deg,#86EFAC,var(--success));
        }

        .erp-sim-chart span:nth-child(5) {
            background: linear-gradient(180deg,#7DD3FC,var(--primary));
        }

        .erp-sim-chart span:nth-child(6) {
            background: linear-gradient(180deg,#5EEAD4,var(--secondary));
        }

        .erp-sim-chart span:nth-child(7) {
            background: linear-gradient(180deg,#FBBF24,var(--accent-dark));
        }

@keyframes erpBarGrow {
    to {
        height: var(--h);
    }
}

@media(prefers-reduced-motion:reduce) {
    .erp-sim-chart span {
        animation: none;
        height: var(--h);
    }
}

.erp-sim-live {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px 18px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: rgba(255,255,255,.6);
}

    .erp-sim-live .cyber-status-dot {
        color: #5EEAD4;
    }

@media(max-width:1100px) {
    .erp-hero-grid {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .erp-sim {
        max-width: 420px;
        margin: 0 auto;
    }
}

@media(max-width:600px) {
    .erp-hero {
        padding: 150px 0 60px;
    }

        .erp-hero h1 {
            font-size: 28px;
        }
}

.erp-quicknav-wrap {
    background: #fff;
    border-bottom: 1px solid var(--border);
    position: relative;
    z-index: 5;
}

.erp-quicknav {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 16px 0;
    flex-wrap: wrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

    .erp-quicknav::-webkit-scrollbar {
        display: none;
    }

    .erp-quicknav a {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        font-weight: 700;
        color: var(--text-light);
        padding: 10px 18px;
        border-radius: 30px;
        white-space: nowrap;
        border: 1px solid var(--border);
        position: relative;
        overflow: hidden;
        z-index: 1;
        transition: color .3s ease,border-color .3s ease,transform .2s ease;
    }

        .erp-quicknav a i {
            font-size: 12px;
            position: relative;
            z-index: 2;
            transition: transform .3s ease;
        }

        .erp-quicknav a span, .erp-quicknav a {
            position: relative;
        }

            .erp-quicknav a::before {
                content: "";
                position: absolute;
                inset: 0;
                z-index: 0;
                transform: scaleX(0);
                transform-origin: left;
                transition: transform .35s cubic-bezier(.4,0,.2,1);
            }

            .erp-quicknav a:hover::before {
                transform: scaleX(1);
            }

            .erp-quicknav a:hover {
                color: #fff;
                border-color: transparent;
                transform: translateY(-2px);
            }

                .erp-quicknav a:hover i {
                    transform: scale(1.15);
                }

            .erp-quicknav a.qn-1::before {
                background: linear-gradient(120deg,var(--primary),var(--primary-light));
            }

            .erp-quicknav a.qn-2::before {
                background: linear-gradient(120deg,var(--secondary),var(--secondary-light));
            }

            .erp-quicknav a.qn-3::before {
                background: linear-gradient(120deg,var(--accent-dark),var(--accent));
            }

            .erp-quicknav a.qn-4::before {
                background: linear-gradient(120deg,#15803D,var(--success));
            }

            .erp-quicknav a.qn-cta {
                margin-left: auto;
                color: #fff;
                border-color: transparent;
                background: linear-gradient(120deg,var(--primary-dark),var(--primary));
            }

                .erp-quicknav a.qn-cta:hover {
                    transform: translateY(-2px) scale(1.03);
                }

@media(max-width:700px) {
    .erp-quicknav a.qn-cta {
        margin-left: 0;
    }
}

@media(max-width:600px) {
    .erp-hero {
        padding: 150px 0 50px;
    }

        .erp-hero h1 {
            font-size: 28px;
        }
}

/* ---------- Overview: editorial pull-quote, not a card/grid ---------- */

.erp-overview {
    background: #fff;
    padding: 110px 0;
}

.erp-overview-layout {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 56px;
    align-items: center;
}

    .erp-overview-layout .eyebrow {
        margin-bottom: 14px;
    }

    .erp-overview-layout h2 {
        font-size: 30px;
        line-height: 1.3;
        color: var(--dark);
    }

.erp-overview-lead {
    font-size: 16px;
    line-height: 1.85;
    color: var(--text-light);
    margin: 18px 0 0;
}

    .erp-overview-lead strong {
        color: var(--dark);
    }

/* ---------- ERP control panel — all modules incl. CRM, each
   tile scanning "online" in sequence on a continuous loop, like
   a systems check running, each with its own colour so the row
   flickers through the full palette rather than one repeated
   hue. Faded grey backdrop instead of a dark theme. ---------- */
.erp-panel {
    background: linear-gradient(155deg,#E9EBEF 0%,#DDE1E6 55%,#E9EBEF 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(15,23,42,.12);
}

.erp-panel-chrome {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(15,23,42,.08);
}

    .erp-panel-chrome span {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: rgba(15,23,42,.15);
    }

        .erp-panel-chrome span:nth-child(1) {
            background: #F87171;
        }

        .erp-panel-chrome span:nth-child(2) {
            background: #FBBF24;
        }

        .erp-panel-chrome span:nth-child(3) {
            background: #34D399;
        }

    .erp-panel-chrome b {
        margin-left: 10px;
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 600;
        color: var(--text-light);
    }

.erp-panel-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 14px;
    padding: 28px;
    background-image: linear-gradient(rgba(15,23,42,.035) 1px,transparent 1px), linear-gradient(90deg,rgba(15,23,42,.035) 1px,transparent 1px);
    background-size: 26px 26px;
}

.erp-panel-tile {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(255,255,255,.6);
    padding: 22px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    color: var(--text-light);
    animation: panelScan 4.8s ease-in-out infinite;
    animation-delay: calc(var(--i) * .5s);
}

    .erp-panel-tile i {
        font-size: 22px;
        color: inherit;
        transition: color .4s ease;
    }

    .erp-panel-tile span {
        font-family: var(--font-mono);
        font-size: 10.5px;
        letter-spacing: .03em;
        color: inherit;
        font-weight: 600;
    }

    /* Each tile flickers to its own colour via a CSS custom property
   set per tile, rather than every tile flashing the same cyan */
    .erp-panel-tile:nth-child(1) {
        --flicker: 47,128,237;
    }

    .erp-panel-tile:nth-child(2) {
        --flicker: 20,184,166;
    }

    .erp-panel-tile:nth-child(3) {
        --flicker: 245,158,11;
    }

    .erp-panel-tile:nth-child(4) {
        --flicker: 34,197,94;
    }

    .erp-panel-tile:nth-child(5) {
        --flicker: 10,77,140;
    }

    .erp-panel-tile:nth-child(6) {
        --flicker: 236,72,153;
    }

@keyframes panelScan {
    0%,8% {
        background: rgba(255,255,255,.6);
        border-color: var(--border);
        color: var(--text-light);
        box-shadow: none;
    }

    14%,22% {
        background: rgba(var(--flicker),.14);
        border-color: rgba(var(--flicker),.55);
        color: rgb(var(--flicker));
        box-shadow: 0 0 20px -4px rgba(var(--flicker),.5);
    }

    30%,100% {
        background: rgba(255,255,255,.6);
        border-color: var(--border);
        color: var(--text-light);
        box-shadow: none;
    }
}

@media(prefers-reduced-motion:reduce) {
    .erp-panel-tile {
        animation: none;
    }
}

.erp-panel-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px 18px;
    border-top: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-light);
}

    .erp-panel-status .cyber-status-dot {
        color: var(--primary);
    }

@media(max-width:1000px) {
    .erp-overview-layout {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}

@media(max-width:500px) {
    .erp-panel-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

/* ---------- Evaluation terminal — simulates the posture
   evaluation "scanning" your systems, line by line, on a loop.
   Monospace, dark, with a faint scanline sweep for atmosphere. ---------- */
.erp-terminal {
    margin-top: 28px;
    background: #0B0F1A;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 24px 50px rgba(3,10,25,.28);
    position: relative;
}

    .erp-terminal::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 2;
        background: linear-gradient(rgba(255,255,255,.03) 50%,transparent 50%);
        background-size: 100% 4px;
    }

.erp-terminal-chrome {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    position: relative;
    z-index: 3;
}

    .erp-terminal-chrome span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255,255,255,.2);
    }

        .erp-terminal-chrome span:nth-child(1) {
            background: #F87171;
        }

        .erp-terminal-chrome span:nth-child(2) {
            background: #FBBF24;
        }

        .erp-terminal-chrome span:nth-child(3) {
            background: #5EEAD4;
        }

    .erp-terminal-chrome b {
        margin-left: 8px;
        font-family: var(--font-mono);
        font-size: 10.5px;
        font-weight: 500;
        color: rgba(255,255,255,.4);
    }

.erp-terminal-body {
    padding: 20px 20px 24px;
    min-height: 130px;
    position: relative;
    z-index: 3;
}

.erp-terminal-line {
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.9;
    color: #5EEAD4;
    white-space: pre-wrap;
}

    .erp-terminal-line.typing-cursor::after {
        content: "|";
        margin-left: 2px;
        color: #7DD3FC;
        animation: erpCursorBlink .8s steps(1) infinite;
    }

@keyframes erpCursorBlink {
    50% {
        opacity: 0;
    }
}

@media(prefers-reduced-motion:reduce) {
    .erp-terminal-line.typing-cursor::after {
        animation: none;
    }
}


@media(max-width:900px) {
    .erp-overview-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* ---------- Shared ERP section heading: icon medallion + pill
   eyebrow + gradient heading, used by How It Works and FAQ ---------- */
.section-head-erp {
    max-width: 680px;
    margin: 0 auto 20px;
    text-align: center;
}

.erp-head-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 18px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,var(--primary),var(--secondary));
    color: #fff;
    font-size: 23px;
    box-shadow: 0 14px 28px rgba(10,77,140,.24);
}

.section-head-erp p {
    margin-top: 16px;
    font-size: 16.5px;
    color: var(--text-light);
    line-height: 1.8;
}

/* ---------- Process flow: rotating connected wheel ----------
   Six modules fixed in a circle around a central hub — literally
   "one connected flow" rather than six separate tools. A
   continuously rotating light-sweep passes behind the nodes,
   each one glowing in sync as the sweep reaches it. A static
   legend below keeps every description readable at once. */

.erp-flow-section {
    background: var(--light);
    padding: 120px 0 130px;
}

.erp-wheel-wrap {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 56px;
    align-items: center;
    margin-top: 60px;
}

.erp-wheel {
    position: relative;
    width: 340px;
    height: 340px;
    flex-shrink: 0;
}

.erp-wheel-sweep {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    z-index: 1;
    background: conic-gradient(from 0deg,rgba(47,128,237,.35),transparent 30%);
    animation: wheelSweepRotate 8s linear infinite;
}

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

@media(prefers-reduced-motion:reduce) {
    .erp-wheel-sweep {
        animation: none;
        opacity: .2;
    }
}

.erp-wheel-ring {
    position: absolute;
    inset: 36px;
    border-radius: 50%;
    border: 1.5px dashed var(--border);
    z-index: 1;
}

.erp-wheel-hub {
    position: absolute;
    top: 170px;
    left: 170px;
    transform: translate(-50%,-50%);
    width: 74px;
    height: 74px;
    border-radius: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 26px;
    background: linear-gradient(135deg,var(--primary-dark),var(--primary));
    box-shadow: 0 16px 34px rgba(10,77,140,.32);
}

.erp-wheel-node {
    position: absolute;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 21px;
    transform: translate(-50%,-50%);
    box-shadow: 0 12px 26px rgba(0,0,0,.14);
    animation: wheelNodePulse 8s ease-in-out infinite;
    animation-delay: var(--d);
}

@keyframes wheelNodePulse {
    0%,92%,100% {
        box-shadow: 0 12px 26px rgba(0,0,0,.14);
        transform: translate(-50%,-50%) scale(1);
    }

    4% {
        box-shadow: 0 12px 26px rgba(0,0,0,.14),0 0 0 10px rgba(255,255,255,.25);
        transform: translate(-50%,-50%) scale(1.12);
    }
}

@media(prefers-reduced-motion:reduce) {
    .erp-wheel-node {
        animation: none;
    }
}

.erp-wheel-node.n1 {
    left: 170px;
    top: 45px;
    background: linear-gradient(135deg,var(--primary),var(--primary-light));
}

.erp-wheel-node.n2 {
    left: 278px;
    top: 108px;
    background: linear-gradient(135deg,var(--secondary),var(--secondary-light));
}

.erp-wheel-node.n3 {
    left: 278px;
    top: 232px;
    background: linear-gradient(135deg,var(--accent-dark),var(--accent));
}

.erp-wheel-node.n4 {
    left: 170px;
    top: 295px;
    background: linear-gradient(135deg,#15803D,var(--success));
}

.erp-wheel-node.n5 {
    left: 62px;
    top: 232px;
    background: linear-gradient(135deg,var(--primary-dark),var(--primary));
}

.erp-wheel-node.n6 {
    left: 62px;
    top: 108px;
    background: linear-gradient(135deg,#EC4899,#F472B6);
}

.erp-wheel-legend {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.erp-wheel-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.erp-wheel-item-bar {
    width: 4px;
    border-radius: 3px;
    flex-shrink: 0;
    align-self: stretch;
    min-height: 44px;
}

.erp-wheel-item h4 {
    font-size: 16px;
    margin-bottom: 4px;
}

.erp-wheel-item p {
    font-size: 13.5px;
    color: var(--text-light);
    line-height: 1.6;
    margin: 0;
}

.erp-wheel-item-bar.t1 {
    background: var(--primary);
}

.erp-wheel-item-bar.t2 {
    background: var(--secondary);
}

.erp-wheel-item-bar.t3 {
    background: var(--accent-dark);
}

.erp-wheel-item-bar.t4 {
    background: #15803D;
}

.erp-wheel-item-bar.t5 {
    background: var(--primary-dark);
}

.erp-wheel-item-bar.t6 {
    background: #EC4899;
}

@media(max-width:900px) {
    .erp-wheel-wrap {
        grid-template-columns: 1fr;
        justify-items: center;
    }
}

@media(max-width:400px) {
    .erp-wheel {
        transform: scale(.82);
    }
}

/* ---------- Diagonal-split mid-page CTA ---------- */

.erp-split-cta {
    padding: 100px 0;
    background: #fff;
}

.erp-split-box {
    display: flex;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    min-height: 220px;
}

.erp-split-left {
    flex: 1;
    background: var(--light);
    padding: 44px 44px 44px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .erp-split-left h3 {
        font-family: var(--font-mono);
        font-size: 12.5px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--primary);
        margin-bottom: 10px;
    }

    .erp-split-left p {
        margin: 0;
        color: var(--text-light);
        font-size: 15px;
    }

.erp-split-right {
    flex: 1.1;
    position: relative;
    color: #fff;
    padding: 44px 56px 44px 72px;
    margin-left: -40px;
    background: linear-gradient(120deg,var(--primary-dark),var(--primary) 60%,var(--secondary));
    clip-path: polygon(11% 0, 100% 0, 100% 100%, 0 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .erp-split-right h2 {
        color: #fff;
        font-size: 25px;
        margin-bottom: 16px;
    }

@media(max-width:900px) {
    .erp-split-box {
        flex-direction: column;
        min-height: 0;
    }

    .erp-split-left {
        padding: 32px 28px;
    }

    .erp-split-right {
        clip-path: none;
        margin-left: 0;
        padding: 32px 28px;
    }
}

/* ---------- Generic diagonal-split CTA ----------
   Same exact structure/markup as ERP's Assessment section
   above, generalised with colour modifier classes so every page
   can close on this same design with its own theme colour:
   .split-right.theme-teal / .theme-amber / .theme-green (blue
   is the default, matching ERP, so no modifier class is needed
   for a blue-themed page). ---------- */

.split-cta {
    padding: 100px 0;
    background: #fff;
}

.split-box {
    display: flex;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    min-height: 220px;
}

.split-left {
    flex: 1;
    background: var(--light);
    padding: 44px 44px 44px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .split-left h3 {
        font-family: var(--font-mono);
        font-size: 12.5px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--primary);
        margin-bottom: 10px;
    }

    .split-left p {
        margin: 0;
        color: var(--text-light);
        font-size: 15px;
    }

.split-right {
    flex: 1.1;
    position: relative;
    color: #fff;
    padding: 44px 56px 44px 72px;
    margin-left: -40px;
    background: linear-gradient(120deg,var(--primary-dark),var(--primary) 60%,var(--secondary));
    clip-path: polygon(11% 0, 100% 0, 100% 100%, 0 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .split-right h2 {
        color: #fff;
        font-size: 25px;
        margin-bottom: 16px;
    }

.split-left.theme-teal h3 {
    color: var(--secondary);
}

.split-right.theme-teal {
    background: linear-gradient(120deg,#0B4F4A,var(--secondary) 60%,var(--secondary-light));
}

.split-left.theme-amber h3 {
    color: var(--accent-dark);
}

.split-right.theme-amber {
    background: linear-gradient(120deg,#7A4A08,var(--accent-dark) 60%,var(--accent));
}

.split-left.theme-green h3 {
    color: #15803D;
}

.split-right.theme-green {
    background: linear-gradient(120deg,#0F4A24,#15803D 60%,var(--success));
}

.split-left.theme-pink h3 {
    color: #EC4899;
}

.split-right.theme-pink {
    background: linear-gradient(120deg,#831843,#EC4899 60%,#F472B6);
}

.split-left.theme-skyblue h3 {
    color: var(--primary-light);
}

.split-right.theme-skyblue {
    background: linear-gradient(120deg,var(--primary),var(--primary-light) 60%,#93C5FD);
}

@media(max-width:900px) {
    .split-box {
        flex-direction: column;
        min-height: 0;
    }

    .split-left {
        padding: 32px 28px;
    }

    .split-right {
        clip-path: none;
        margin-left: 0;
        padding: 32px 28px;
    }
}

/* ---------- FAQ: native <details>/<summary> accordion ---------- */

.erp-faq-section {
    background: var(--light);
    padding: 110px 0;
}

/* ---------- FAQ spotlight cards ----------
   A cursor-following glow (via the global .spotlight-card
   utility in site.js, which sets --mx/--my) plus a JS-driven
   expand/collapse — replacing the native <details> accordion
   with a 2-column grid so this reads differently from every
   other FAQ/accordion pattern on the site. */
.erp-faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    max-width: 920px;
    margin: 50px auto 0;
}

.erp-faq-spot {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

    .erp-faq-spot:hover {
        transform: translateY(-4px);
    }

    .erp-faq-spot::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: 0;
        background: radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.5),transparent 70%);
        transition: opacity .3s ease;
        z-index: 1;
    }

    .erp-faq-spot:hover::before {
        opacity: 1;
    }

    .erp-faq-spot.theme-blue {
        background: linear-gradient(165deg,rgba(10,77,140,.08),#fff 60%);
        border-color: rgba(10,77,140,.16);
    }

        .erp-faq-spot.theme-blue .erp-faq-icon, .erp-faq-spot.theme-blue .erp-faq-toggle-icon {
            color: var(--primary);
        }

        .erp-faq-spot.theme-blue.open {
            border-color: var(--primary);
            box-shadow: 0 16px 32px rgba(10,77,140,.14);
        }

    .erp-faq-spot.theme-teal {
        background: linear-gradient(165deg,rgba(14,116,144,.08),#fff 60%);
        border-color: rgba(14,116,144,.16);
    }

        .erp-faq-spot.theme-teal .erp-faq-icon, .erp-faq-spot.theme-teal .erp-faq-toggle-icon {
            color: var(--secondary);
        }

        .erp-faq-spot.theme-teal.open {
            border-color: var(--secondary);
            box-shadow: 0 16px 32px rgba(14,116,144,.14);
        }

    .erp-faq-spot.theme-amber {
        background: linear-gradient(165deg,rgba(245,158,11,.1),#fff 60%);
        border-color: rgba(245,158,11,.2);
    }

        .erp-faq-spot.theme-amber .erp-faq-icon, .erp-faq-spot.theme-amber .erp-faq-toggle-icon {
            color: var(--accent-dark);
        }

        .erp-faq-spot.theme-amber.open {
            border-color: var(--accent-dark);
            box-shadow: 0 16px 32px rgba(245,158,11,.16);
        }

    .erp-faq-spot.theme-green {
        background: linear-gradient(165deg,rgba(34,197,94,.09),#fff 60%);
        border-color: rgba(34,197,94,.18);
    }

        .erp-faq-spot.theme-green .erp-faq-icon, .erp-faq-spot.theme-green .erp-faq-toggle-icon {
            color: #15803D;
        }

        .erp-faq-spot.theme-green.open {
            border-color: #15803D;
            box-shadow: 0 16px 32px rgba(34,197,94,.14);
        }

.erp-faq-spot-toggle {
    position: relative;
    z-index: 2;
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 22px 24px;
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 700;
    font-size: 15px;
    color: var(--dark);
    font-family: inherit;
}

    .erp-faq-spot-toggle span {
        display: flex;
        align-items: center;
        gap: 12px;
    }

.erp-faq-icon {
    font-size: 17px;
    flex-shrink: 0;
    transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}

.erp-faq-spot:hover .erp-faq-icon {
    transform: scale(1.18) rotate(-6deg);
}

.erp-faq-toggle-icon {
    font-size: 13px;
    flex-shrink: 0;
    transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}

.erp-faq-spot.open .erp-faq-toggle-icon {
    transform: rotate(135deg) scale(1.1);
}

.erp-faq-spot-body {
    position: relative;
    z-index: 2;
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s cubic-bezier(.4,0,.2,1);
}

.erp-faq-spot.open .erp-faq-spot-body {
    max-height: 220px;
}

.erp-faq-spot-body p {
    padding: 0 24px 22px;
    font-size: 14px;
    line-height: 1.75;
    color: var(--text);
    margin: 0;
}

@media(max-width:800px) {
    .erp-faq-grid {
        grid-template-columns: 1fr;
    }
}

/*==========================================================
COMMUNICATIONS PAGE — entirely new component set again: an
organic-blob hero (not a card/grid), a chat-bubble conversation
strip, a horizontal snap-scroll feature carousel, a cross-
divided quadrant for 2FA, a circular dashed-arrow flow for USSD
(adapted from the reference image), a perforated receipt card
for Airtime, and a push-notification-styled closing banner.
==========================================================*/

/* ---------- Hero: organic blob backdrop behind the illustration ---------- */

.comm-hero {
    background: linear-gradient(180deg,#FDF8F0 0%,#FAF3E7 100%);
    padding: 170px 0 110px;
    overflow: hidden;
}

.comm-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 50px;
    align-items: center;
}

.comm-hero-content .eyebrow {
    margin-bottom: 16px;
}

.comm-hero-content h1 {
    font-size: 40px;
    line-height: 1.2;
    margin-bottom: 18px;
    background: linear-gradient(100deg,var(--primary-dark) 0%,var(--primary) 55%,var(--secondary) 130%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.comm-hero-content p {
    font-size: 16.5px;
    line-height: 1.85;
    color: var(--text-light);
    margin-bottom: 30px;
    max-width: 520px;
}

.comm-hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.comm-hero-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Chat-bubble shaped backdrop, replacing the old organic blob —
   a rounded square with one sharp corner reads as a speech
   bubble silhouette (matching a standard SMS/chat icon shape),
   with a small triangular tail. Positioned inside .comm-broadcast
   itself (not as an independent sibling) so it shares the exact
   same coordinate system as the phone/tower/recipients and stays
   concentric with them at every screen size, rather than the two
   being centered by two different, potentially-mismatched
   mechanisms. Gently breathes/rotates so it isn't static. */
.comm-hero-blob {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 340px;
    height: 340px;
    z-index: 1;
    background: linear-gradient(150deg,var(--primary-dark) 0%,var(--primary) 55%,var(--secondary-light) 130%);
    border-radius: 42% 42% 42% 6%;
    opacity: .45;
    animation: bubbleShapeBreathe 7s ease-in-out infinite;
}

    .comm-hero-blob::after {
        content: "";
        position: absolute;
        bottom: 14%;
        left: -2%;
        width: 34px;
        height: 34px;
        background: inherit;
        clip-path: polygon(0 0, 100% 100%, 0 100%);
    }

@keyframes bubbleShapeBreathe {
    0%,100% {
        transform: translate(-50%,-50%) scale(1) rotate(0deg);
    }

    50% {
        transform: translate(-50%,-50%) scale(1.05) rotate(2deg);
    }
}

@media(prefers-reduced-motion:reduce) {
    .comm-hero-blob {
        animation: none;
    }
}

/* ---------- SMS broadcast illustration ----------
   A broadcast tower pulses outward, a phone shows messages
   appearing/delivering in sequence, and three recipient icons
   sit around it as if receiving the broadcast — reads as "bulk
   SMS reaching many people" rather than a generic phone mockup. */
.comm-broadcast {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 420px;
    height: 440px;
    margin: 0 auto;
}

.comm-tower {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,var(--primary-dark),var(--primary));
    color: #fff;
    font-size: 22px;
    box-shadow: 0 14px 28px rgba(10,77,140,.32);
}

.comm-tower-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(10,77,140,.35);
    animation: towerPing 3s ease-out infinite;
}

    .comm-tower-ring.r2 {
        animation-delay: 1s;
    }

    .comm-tower-ring.r3 {
        animation-delay: 2s;
    }

@keyframes towerPing {
    0% {
        transform: scale(1);
        opacity: .8;
    }

    100% {
        transform: scale(3.6);
        opacity: 0;
    }
}

@media(prefers-reduced-motion:reduce) {
    .comm-tower-ring {
        animation: none;
        opacity: 0;
    }
}

.comm-phone {
    position: absolute;
    top: 96px;
    left: 50%;
    transform: translateX(-50%);
    width: 220px;
    height: 300px;
    background: #0B0F1A;
    border-radius: 28px;
    padding: 16px 12px;
    box-shadow: 0 30px 60px rgba(3,10,25,.3);
    z-index: 2;
    animation: floatCard 7s ease-in-out infinite;
}

.comm-phone-notch {
    width: 56px;
    height: 6px;
    border-radius: 4px;
    background: rgba(255,255,255,.15);
    margin: 0 auto 12px;
}

.comm-phone-screen {
    background: #fff;
    border-radius: 16px;
    height: calc(100% - 24px);
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
    overflow: hidden;
}

.comm-msg {
    align-self: flex-end;
    max-width: 88%;
    background: linear-gradient(135deg,var(--primary),var(--primary-light));
    color: #fff;
    border-radius: 12px 12px 2px 12px;
    padding: 8px 12px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.4;
    opacity: 0;
    transform: translateY(10px) scale(.9);
    animation: msgPop .5s cubic-bezier(.2,1.4,.5,1) forwards;
}

    .comm-msg.m1 {
        animation-delay: .3s;
    }

    .comm-msg.m2 {
        animation-delay: 1.4s;
        background: linear-gradient(135deg,var(--secondary),var(--secondary-light));
    }

    .comm-msg.m3 {
        animation-delay: 2.5s;
        background: linear-gradient(135deg,#15803D,var(--success));
    }

        .comm-msg.m3 i {
            margin-left: 4px;
        }

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

@media(prefers-reduced-motion:reduce) {
    .comm-msg {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

.comm-recipient {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 17px;
    box-shadow: 0 12px 24px rgba(0,0,0,.16);
    animation: recipientPulse 3s ease-in-out infinite;
}

    .comm-recipient.rp1 {
        bottom: 70px;
        left: 0;
        background: linear-gradient(135deg,var(--accent-dark),var(--accent));
        animation-delay: .3s;
    }

    .comm-recipient.rp2 {
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        background: linear-gradient(135deg,#15803D,var(--success));
        animation-delay: 1.4s;
    }

    .comm-recipient.rp3 {
        bottom: 70px;
        right: 0;
        background: linear-gradient(135deg,var(--secondary),var(--secondary-light));
        animation-delay: 2.5s;
    }

@keyframes recipientPulse {
    0%,80%,100% {
        box-shadow: 0 12px 24px rgba(0,0,0,.16),0 0 0 0 currentColor;
    }

    85% {
        box-shadow: 0 12px 24px rgba(0,0,0,.16),0 0 0 8px transparent;
    }
}

@media(prefers-reduced-motion:reduce) {
    .comm-recipient {
        animation: none;
    }
}

@media(max-width:600px) {
    .comm-broadcast {
        max-width: 300px;
        height: 380px;
    }

    .comm-phone {
        width: 180px;
        height: 250px;
    }
}

@media(max-width:960px) {
    .comm-hero-grid {
        grid-template-columns: 1fr;
    }

    .comm-hero-visual {
        margin-top: 20px;
    }

    .comm-hero-blob {
        width: 340px;
        height: 340px;
    }
}

@media(max-width:600px) {
    .comm-hero {
        padding: 150px 0 70px;
    }

    .comm-hero-content h1 {
        font-size: 28px;
    }
}

/* ---------- "Send the right message" — text beside a slowly
   rotating colour-wheel ring blending the full palette (blue,
   teal, amber, green), with the three principles fixed around
   its edge and a message icon anchoring the centre. Replaces
   the earlier hand-drawn bezier-arrow version. ---------- */

.comm-loop-section {
    background: #fff;
    padding: 120px 0;
}

.comm-loop-layout {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 64px;
    align-items: center;
}

.gear-col {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.comm-wheel-banner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg,var(--primary-dark),var(--primary));
    color: #fff;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 10px 20px;
    border-radius: 30px;
    margin-bottom: 36px;
    box-shadow: 0 12px 24px rgba(10,77,140,.24);
}

/* ---------- Interlocking gear cluster ----------
   Three gears meshed in a triangular arrangement, rotating
   continuously — two clockwise, one counter-clockwise, exactly
   like real interlocking gears — a literal mechanism for "one
   continuous loop" instead of a spinning wheel. Each gear's
   icon counter-rotates against its own gear so it stays upright
   while the toothed rim spins around it. */
.gear-cluster {
    position: relative;
    width: 260px;
    height: 230px;
    margin: 0 auto;
}

.gear {
    position: absolute;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .gear::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 8px dashed currentColor;
        opacity: .9;
    }

.gear-inner {
    position: relative;
    z-index: 2;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    box-shadow: 0 10px 22px rgba(3,10,25,.16);
    font-size: 24px;
}

.gear.g1 {
    top: 0;
    left: 32px;
    color: var(--primary);
    animation: gearSpinCW 14s linear infinite;
}

    .gear.g1 .gear-inner {
        color: var(--primary);
        animation: gearSpinCCW 14s linear infinite;
    }

.gear.g2 {
    top: 0;
    right: 0;
    color: var(--secondary);
    animation: gearSpinCCW 11s linear infinite;
}

    .gear.g2 .gear-inner {
        color: var(--secondary);
        animation: gearSpinCW 11s linear infinite;
    }

.gear.g3 {
    bottom: 0;
    left: 64px;
    color: var(--accent-dark);
    animation: gearSpinCW 17s linear infinite;
}

    .gear.g3 .gear-inner {
        color: var(--accent-dark);
        animation: gearSpinCCW 17s linear infinite;
    }

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

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

@media(prefers-reduced-motion:reduce) {
    .gear, .gear-inner {
        animation: none;
    }
}

.gear-labels {
    display: flex;
    gap: 28px;
    margin-top: 22px;
}

    .gear-labels span {
        font-family: var(--font-mono);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .gear-labels .gl1 {
        color: var(--primary);
    }

    .gear-labels .gl2 {
        color: var(--secondary);
    }

    .gear-labels .gl3 {
        color: var(--accent-dark);
    }

/* ---------- Text card ----------
   Clean white card (not another dark gradient box) with a
   travelling light that continuously chases its border —
   achieved with a rotating conic-gradient sitting behind the
   card, masked so only a thin ring shows through. No particle
   background anywhere here. */
.comm-loop-card {
    position: relative;
    border-radius: var(--radius-lg);
    padding: 3px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(3,10,25,.14);
}

    .comm-loop-card::before {
        content: "";
        position: absolute;
        z-index: 1;
        width: 220%;
        height: 220%;
        top: -60%;
        left: -60%;
        background: conic-gradient(from 0deg,var(--primary),var(--secondary),var(--accent),var(--primary));
        animation: chaseRotate 6s linear infinite;
    }

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

@media(prefers-reduced-motion:reduce) {
    .comm-loop-card::before {
        animation: none;
    }
}

.comm-loop-card-inner {
    position: relative;
    z-index: 2;
    background: #fff;
    border-radius: calc(var(--radius-lg) - 3px);
    padding: 44px 44px 44px 48px;
}

.comm-loop-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,var(--primary),var(--secondary));
    color: #fff;
    font-size: 21px;
    box-shadow: 0 12px 26px rgba(10,77,140,.24);
}

.comm-loop-card-inner .eyebrow-pill {
    margin-bottom: 16px;
}

.comm-loop-card-inner h2 {
    font-size: 30px;
    color: var(--dark);
    margin-bottom: 14px;
}

.comm-loop-card-inner p {
    color: var(--text-light);
    font-size: 15.5px;
    line-height: 1.85;
    margin-bottom: 24px;
}

.comm-bubbles-points {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.comm-bubbles-point {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    opacity: 0;
    transform: translateX(-14px);
    animation: pointPop .5s ease forwards;
}

.comm-loop-card.aos-animate .comm-bubbles-point.pt1 {
    animation-delay: .15s;
}

.comm-loop-card.aos-animate .comm-bubbles-point.pt2 {
    animation-delay: .35s;
}

.comm-loop-card.aos-animate .comm-bubbles-point.pt3 {
    animation-delay: .55s;
}

@keyframes pointPop {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media(prefers-reduced-motion:reduce) {
    .comm-bubbles-point {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

.comm-bubbles-point i {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    flex-shrink: 0;
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #fff;
}

.comm-bubbles-point span {
    font-size: 14px;
    color: var(--text);
    font-weight: 600;
    line-height: 1.6;
}

.comm-bubbles-point:nth-child(1) i {
    background: var(--primary);
}

.comm-bubbles-point:nth-child(2) i {
    background: var(--secondary);
}

.comm-bubbles-point:nth-child(3) i {
    background: var(--accent-dark);
}

@media(max-width:960px) {
    .comm-loop-layout {
        grid-template-columns: 1fr;
        gap: 44px;
        text-align: center;
    }

    .gear-labels {
        justify-content: center;
    }

    .comm-loop-card-inner p {
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media(max-width:600px) {
    .comm-loop-card-inner {
        padding: 32px 26px;
    }

    .gear-cluster {
        width: 220px;
        height: 200px;
    }

    .gear {
        width: 110px;
        height: 110px;
    }

    .gear-inner {
        width: 58px;
        height: 58px;
        font-size: 20px;
    }
}

/* ---------- SMS features: horizontal snap-scroll carousel ---------- */

.comm-scroll-section {
    background: linear-gradient(160deg,var(--dark) 0%,var(--dark-2) 100%);
    padding: 120px 0;
    position: relative;
    overflow: hidden;
}

    .comm-scroll-section::before {
        content: "";
        position: absolute;
        top: -220px;
        left: -160px;
        width: 520px;
        height: 520px;
        border-radius: 50%;
        background: radial-gradient(rgba(47,128,237,.16),transparent 70%);
        pointer-events: none;
    }

    .comm-scroll-section::after {
        content: "";
        position: absolute;
        bottom: -240px;
        right: -160px;
        width: 520px;
        height: 520px;
        border-radius: 50%;
        background: radial-gradient(rgba(20,184,166,.14),transparent 70%);
        pointer-events: none;
    }

/* Top card — solid white now (was translucent glass on the old
   blue bg), so it reads as a clear focal point against the dark
   background. Heading text sweeps with an animated gradient, and
   the "6 Features" badge pulses gently. */
.comm-scroll-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    background: #fff;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--radius-lg);
    padding: 36px 40px;
    box-shadow: 0 30px 60px rgba(3,10,25,.35);
}

    .comm-scroll-head .eyebrow {
        color: var(--primary);
        justify-content: center;
    }

        .comm-scroll-head .eyebrow::before {
            background: var(--accent);
        }

    .comm-scroll-head h2 {
        font-size: 27px;
        margin: 12px 0 16px;
        background: linear-gradient(90deg,var(--primary) 0%,var(--secondary) 25%,var(--accent-dark) 50%,var(--primary) 75%);
        background-size: 300% auto;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation: featureHeadingSweep 6s linear infinite;
    }

@keyframes featureHeadingSweep {
    to {
        background-position: 300% center;
    }
}

@media(prefers-reduced-motion:reduce) {
    .comm-scroll-head h2 {
        animation: none;
    }
}

.comm-scroll-count {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg,var(--primary),var(--secondary));
    border-radius: 20px;
    padding: 7px 18px;
    animation: featureBadgePulse 2.4s ease-in-out infinite;
}

@keyframes featureBadgePulse {
    0%,100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.06);
    }
}

@media(prefers-reduced-motion:reduce) {
    .comm-scroll-count {
        animation: none;
    }
}

@media(max-width:600px) {
    .comm-scroll-head {
        padding: 26px 22px;
    }
}

.comm-feature-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
    margin-top: 50px;
    position: relative;
    z-index: 2;
}

.comm-feature-card {
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;
    padding: 28px 24px;
    position: relative;
    overflow: hidden;
    transition: transform .3s ease;
}

    .comm-feature-card:hover {
        transform: translateY(-6px);
    }

    .comm-feature-card i {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        margin-bottom: 16px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 19px;
    }

    .comm-feature-card h4 {
        font-size: 16px;
        margin-bottom: 8px;
        color: #fff;
    }

    .comm-feature-card p {
        font-size: 13.5px;
        line-height: 1.7;
        color: rgba(255,255,255,.72);
        margin: 0;
    }

    /* Six faded backgrounds, one per topic, plus six genuinely
   different micro-animations on each icon — not the same
   shine-sweep repeated six times. */
    .comm-feature-card:nth-child(1) {
        background: linear-gradient(160deg,rgba(47,128,237,.16),rgba(47,128,237,.02) 70%);
    }

    .comm-feature-card:nth-child(2) {
        background: linear-gradient(160deg,rgba(94,234,212,.16),rgba(94,234,212,.02) 70%);
    }

    .comm-feature-card:nth-child(3) {
        background: linear-gradient(160deg,rgba(251,191,36,.18),rgba(251,191,36,.02) 70%);
    }

    .comm-feature-card:nth-child(4) {
        background: linear-gradient(160deg,rgba(134,239,172,.16),rgba(134,239,172,.02) 70%);
    }

    .comm-feature-card:nth-child(5) {
        background: linear-gradient(160deg,rgba(147,197,253,.16),rgba(147,197,253,.02) 70%);
    }

    .comm-feature-card:nth-child(6) {
        background: linear-gradient(160deg,rgba(236,72,153,.16),rgba(236,72,153,.02) 70%);
    }

    .comm-feature-card:nth-child(1) i {
        background: linear-gradient(135deg,#7DD3FC,var(--primary-light));
    }

    .comm-feature-card:nth-child(2) i {
        background: linear-gradient(135deg,#5EEAD4,var(--secondary-light));
    }

    .comm-feature-card:nth-child(3) i {
        background: linear-gradient(135deg,#FBBF24,var(--accent));
    }

    .comm-feature-card:nth-child(4) i {
        background: linear-gradient(135deg,#86EFAC,var(--success));
    }

    .comm-feature-card:nth-child(5) i {
        background: linear-gradient(135deg,#93C5FD,var(--primary));
    }

    .comm-feature-card:nth-child(6) i {
        background: linear-gradient(135deg,#EC4899,#F472B6);
    }

    /* 1. DND Allowed — toggle switch flicking on/off */
    .comm-feature-card:nth-child(1) i {
        animation: iconToggleFlip 3s ease-in-out infinite;
    }

@keyframes iconToggleFlip {
    0%,40% {
        transform: rotate(0);
    }

    50%,90% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 2. Send SMS 24×7 — clock hand ticking */
.comm-feature-card:nth-child(2) i {
    animation: iconClockTick 2s steps(12) infinite;
}

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

/* 3. Free API Integration — bracket pulse (code compiling) */
.comm-feature-card:nth-child(3) i {
    animation: iconApiPulse 1.8s ease-in-out infinite;
}

@keyframes iconApiPulse {
    0%,100% {
        transform: scale(1);
        letter-spacing: 0;
    }

    50% {
        transform: scale(1.12);
    }
}

/* 4. Delivery Reports — checkmark "draw" bounce */
.comm-feature-card:nth-child(4) i {
    animation: iconCheckBounce 2.4s ease-in-out infinite;
}

@keyframes iconCheckBounce {
    0%,100% {
        transform: translateY(0) scale(1);
    }

    30% {
        transform: translateY(-4px) scale(1.08);
    }

    45% {
        transform: translateY(0) scale(1);
    }
}

/* 5. Customised SMS — subtle shimmer sweep across just the icon */
.comm-feature-card:nth-child(5) i {
    position: relative;
    overflow: hidden;
}

    .comm-feature-card:nth-child(5) i::after {
        content: "";
        position: absolute;
        top: 0;
        left: -60%;
        width: 40%;
        height: 100%;
        background: linear-gradient(115deg,transparent,rgba(255,255,255,.6),transparent);
        transform: skewX(-20deg);
        animation: iconShimmer 2.6s ease-in-out infinite;
    }

@keyframes iconShimmer {
    0% {
        left: -60%;
    }

    50%,100% {
        left: 140%;
    }
}

/* 6. Regional Language — globe slowly rotating */
.comm-feature-card:nth-child(6) i {
    animation: iconGlobeSpin 5s linear infinite;
}

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

@media(prefers-reduced-motion:reduce) {
    .comm-feature-card i, .comm-feature-card i::after {
        animation: none;
    }
}

@media(max-width:900px) {
    .comm-feature-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:560px) {
    .comm-feature-grid {
        grid-template-columns: 1fr;
    }
}

.comm-scroll-hint {
    display: none;
}

/* ---------- OTP / 2FA: mirrored two-column — quad diagram on
   the LEFT this time, text on the RIGHT (opposite of the
   bubbles section above, which put text on the left) ---------- */

.comm-quad-section {
    background: var(--light);
    padding: 120px 0;
}

.comm-otp-layout {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 56px;
    align-items: center;
}

.comm-otp-head-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,var(--primary-dark),var(--primary));
    color: #fff;
    font-size: 21px;
    box-shadow: 0 12px 26px rgba(10,77,140,.24);
}

.comm-otp-text h2 {
    font-size: 28px;
    color: var(--dark);
    margin-bottom: 14px;
}

.comm-otp-lead {
    position: relative;
    margin-top: 6px;
    padding: 20px 24px 20px 26px;
    background: #fff;
    border-left: 3px solid var(--primary);
    border-radius: 0 12px 12px 0;
    box-shadow: var(--shadow-sm);
}

    .comm-otp-lead p {
        font-size: 15.5px;
        color: var(--text-light);
        line-height: 1.85;
        margin: 0;
    }

@media(max-width:960px) {
    .comm-otp-layout {
        grid-template-columns: 1fr;
    }

        .comm-otp-layout .comm-quad {
            order: 2;
        }
}

.comm-quad {
    position: relative;
    max-width: 640px;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    border: 1px solid rgba(10,77,140,.14);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: rgba(10,77,140,.045);
}

    .comm-quad::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        width: 1px;
        height: 100%;
        background: rgba(10,77,140,.14);
    }

    .comm-quad::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 1px;
        background: rgba(10,77,140,.14);
    }

.comm-quad-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg,var(--primary-dark),var(--primary));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 10px 22px rgba(10,77,140,.3);
    z-index: 3;
    animation: hubPulse 3.6s ease-in-out infinite;
}

.comm-quad-cell {
    padding: 32px 28px;
    position: relative;
    transition: background .3s ease, transform .3s ease;
    opacity: 0;
    transform: translateY(14px) scale(.96);
    animation: quadCellIn .5s ease forwards;
}

.comm-quad.aos-animate .comm-quad-cell:nth-child(1) {
    animation-delay: .1s;
}

.comm-quad.aos-animate .comm-quad-cell:nth-child(2) {
    animation-delay: .25s;
}

.comm-quad.aos-animate .comm-quad-cell:nth-child(3) {
    animation-delay: .4s;
}

.comm-quad.aos-animate .comm-quad-cell:nth-child(4) {
    animation-delay: .55s;
}

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

@media(prefers-reduced-motion:reduce) {
    .comm-quad-cell {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

.comm-quad-cell:hover {
    background: rgba(10,77,140,.06);
    transform: translateY(-4px);
}

.comm-quad-cell i {
    font-size: 22px;
    margin-bottom: 12px;
    display: block;
    transition: transform .3s cubic-bezier(.34,1.56,.64,1);
    animation: quadIconFloat 3.4s ease-in-out infinite;
}

.comm-quad-cell:nth-child(2) i {
    animation-delay: .5s;
}

.comm-quad-cell:nth-child(3) i {
    animation-delay: 1s;
}

.comm-quad-cell:nth-child(4) i {
    animation-delay: 1.5s;
}

@keyframes quadIconFloat {
    0%,100% {
        transform: translateY(0);
    }

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

@media(prefers-reduced-motion:reduce) {
    .comm-quad-cell i {
        animation: none;
    }
}

.comm-quad-cell:hover i {
    animation-play-state: paused;
    transform: scale(1.25) rotate(-8deg);
}

.comm-quad-cell h4 {
    font-size: 15.5px;
    margin-bottom: 6px;
    color: var(--primary);
}

.comm-quad-cell p {
    font-size: 13px;
    line-height: 1.65;
    color: var(--text-light);
    margin: 0;
}

.comm-quad-cell:nth-child(1) i {
    color: var(--primary);
}

.comm-quad-cell:nth-child(2) i {
    color: var(--secondary);
}

.comm-quad-cell:nth-child(3) i {
    color: var(--accent-dark);
}

.comm-quad-cell:nth-child(4) i {
    color: #15803D;
}

@media(max-width:700px) {
    .comm-quad {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        max-width: none;
    }

        .comm-quad::before, .comm-quad::after {
            display: none;
        }

    .comm-quad-hub {
        display: none;
    }

    .comm-quad-cell {
        border-bottom: 1px solid var(--border);
    }

        .comm-quad-cell:last-child {
            border-bottom: none;
        }
}

/* ---------- USSD: circular nodes with dashed-arrow connectors ---------- */

.comm-ussd-section {
    background: linear-gradient(180deg,#FDF8F0 0%,#FAF3E7 100%);
    padding: 120px 0;
    position: relative;
    overflow: hidden;
}

.comm-ussd-layout {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 56px;
    align-items: center;
    position: relative;
    z-index: 2;
    margin-bottom: 60px;
}

.comm-ussd-text-box {
    position: relative;
    overflow: hidden;
    background: var(--grad-hero);
    border-radius: var(--radius-lg);
    padding: 44px 44px 44px 48px;
}

    .comm-ussd-text-box::before {
        content: "";
        position: absolute;
        top: -140px;
        right: -100px;
        width: 320px;
        height: 320px;
        border-radius: 50%;
        background: radial-gradient(rgba(47,128,237,.28),transparent 70%);
        pointer-events: none;
    }

    .comm-ussd-text-box::after {
        content: "";
        position: absolute;
        bottom: -140px;
        left: -100px;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background: radial-gradient(rgba(20,184,166,.22),transparent 70%);
        pointer-events: none;
    }

.comm-ussd-text {
    position: relative;
    z-index: 2;
}

    .comm-ussd-text .eyebrow-pill {
        margin-bottom: 16px;
        color: #7DD3FC;
        background: rgba(125,211,252,.12);
        border-color: rgba(125,211,252,.28);
    }

    .comm-ussd-text h2 {
        font-size: 32px;
        font-weight: 800;
        color: #fff;
        margin-bottom: 16px;
        letter-spacing: -.01em;
    }

        .comm-ussd-text h2 span {
            background: linear-gradient(90deg,#7DD3FC,#5EEAD4);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

    .comm-ussd-text p {
        font-size: 16px;
        color: rgba(255,255,255,.75);
        line-height: 1.8;
        margin: 0;
        max-width: 460px;
    }

@media(max-width:600px) {
    .comm-ussd-text-box {
        padding: 32px 28px;
    }
}

/* ---------- Animated USSD phone visual ----------
   A phone dials the USSD code, then the menu options appear one
   at a time — the same "message pop" technique as the hero
   illustration, reused here for a USSD-specific screen instead
   of chat bubbles. */
.comm-ussd-visual {
    display: flex;
    justify-content: center;
}

.ussd-phone {
    width: 220px;
    background: #0B0F1A;
    border-radius: 28px;
    padding: 16px 12px;
    box-shadow: 0 30px 60px rgba(3,10,25,.25);
    animation: floatCard 7s ease-in-out infinite;
}

.ussd-phone-notch {
    width: 56px;
    height: 6px;
    border-radius: 4px;
    background: rgba(255,255,255,.15);
    margin: 0 auto 12px;
}

.ussd-phone-screen {
    background: #fff;
    border-radius: 16px;
    padding: 20px 16px;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ussd-dial {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 20px;
    color: var(--dark);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
    opacity: 0;
    animation: ussdDialIn .5s ease forwards;
}

@keyframes ussdDialIn {
    to {
        opacity: 1;
    }
}

.ussd-menu-item {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    background: var(--light);
    border-radius: 8px;
    padding: 10px 12px;
    opacity: 0;
    transform: translateX(-10px);
    animation: ussdMenuPop .45s ease forwards;
}

    .ussd-menu-item.mi1 {
        animation-delay: .6s;
    }

    .ussd-menu-item.mi2 {
        animation-delay: 1.05s;
    }

    .ussd-menu-item.mi3 {
        animation-delay: 1.5s;
    }

    .ussd-menu-item.mi4 {
        animation-delay: 1.95s;
        background: rgba(10,77,140,.08);
        color: var(--primary);
    }

@keyframes ussdMenuPop {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media(prefers-reduced-motion:reduce) {
    .ussd-phone {
        animation: none;
    }

    .ussd-dial, .ussd-menu-item {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

@media(max-width:900px) {
    .comm-ussd-layout {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .comm-ussd-text p {
        margin: 0 auto;
    }

    .comm-ussd-visual {
        margin-top: 20px;
    }
}

.ussd-steps {
    position: relative;
    display: flex;
    gap: 24px;
    margin-top: 60px;
}

.ussd-steps-line {
    position: absolute;
    top: 54px;
    left: 6%;
    right: 6%;
    height: 2px;
    background: var(--border);
    z-index: 1;
}

.ussd-steps-travel {
    position: absolute;
    top: 50%;
    left: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    transform: translateY(-50%);
    background: var(--primary-light);
    box-shadow: 0 0 12px 3px rgba(47,128,237,.55);
    animation: ussdStepsTravel 5s ease-in-out infinite;
}

@keyframes ussdStepsTravel {
    0% {
        left: 0;
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    92% {
        opacity: 1;
    }

    100% {
        left: calc(100% - 9px);
        opacity: 0;
    }
}

@media(prefers-reduced-motion:reduce) {
    .ussd-steps-travel {
        display: none;
    }
}

.ussd-step {
    flex: 1;
    position: relative;
    z-index: 2;
    text-align: center;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 34px 24px 28px;
    transition: transform .3s ease, box-shadow .3s ease;
}

    .ussd-step:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow);
    }

.ussd-step-num {
    position: absolute;
    top: 16px;
    right: 18px;
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 12px;
    color: var(--border);
}

.ussd-step-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin: 0 auto 18px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    animation: ussdIconPulse 3.6s ease-in-out infinite;
}

.ussd-step:nth-child(2) .ussd-step-icon {
    background: rgba(10,77,140,.09);
    color: var(--primary);
}

.ussd-step:nth-child(3) .ussd-step-icon {
    background: rgba(14,116,144,.1);
    color: var(--secondary);
    animation-delay: 1.2s;
}

.ussd-step:nth-child(4) .ussd-step-icon {
    background: rgba(245,158,11,.11);
    color: var(--accent-dark);
    animation-delay: 2.4s;
}

@keyframes ussdIconPulse {
    0%,85%,100% {
        box-shadow: 0 0 0 0 currentColor;
    }

    92% {
        box-shadow: 0 0 0 10px transparent;
    }
}

@media(prefers-reduced-motion:reduce) {
    .ussd-step-icon {
        animation: none;
    }
}

.ussd-step h4 {
    font-size: 16px;
    margin-bottom: 8px;
}

.ussd-step:nth-child(2) h4 {
    color: var(--primary);
}

.ussd-step:nth-child(3) h4 {
    color: var(--secondary);
}

.ussd-step:nth-child(4) h4 {
    color: var(--accent-dark);
}

.ussd-step p {
    font-size: 13.5px;
    color: var(--text-light);
    line-height: 1.7;
    margin: 0;
}

@media(max-width:800px) {
    .ussd-steps {
        flex-direction: column;
        gap: 16px;
    }

    .ussd-steps-line, .ussd-steps-travel {
        display: none;
    }
}

.comm-ussd-features {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 60px;
    padding-top: 44px;
    border-top: 1px solid var(--border);
}

.comm-ussd-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 30px;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    transition: transform .25s ease;
}

    .comm-ussd-chip:hover {
        transform: translateY(-3px);
    }

    .comm-ussd-chip:nth-child(1) {
        background: linear-gradient(135deg,var(--primary),var(--primary-light));
    }

    .comm-ussd-chip:nth-child(2) {
        background: linear-gradient(135deg,var(--secondary),var(--secondary-light));
    }

    .comm-ussd-chip:nth-child(3) {
        background: linear-gradient(135deg,var(--accent-dark),var(--accent));
    }

    .comm-ussd-chip i {
        color: #fff;
        font-size: 14px;
        opacity: .9;
    }

@media(max-width:900px) {
    .comm-ussd-flow {
        flex-direction: column;
        align-items: center;
    }

    .comm-ussd-arrow {
        display: none;
    }

    .comm-ussd-node {
        margin-bottom: 20px;
    }
}

/* ---------- Airtime: two-column — text + callout on the left,
   receipt card on the right. A third distinct two-column
   arrangement: no blob background (unlike bubbles), plain
   columns with a highlighted stat callout instead. ---------- */

.comm-receipt-section {
    background: var(--light);
    padding: 120px 0;
}

.comm-receipt-layout {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 56px;
    align-items: center;
}

.comm-receipt-text .eyebrow-pill {
    margin-bottom: 16px;
}

.comm-receipt-text h2 {
    font-size: 29px;
    color: var(--dark);
    margin-bottom: 14px;
}

.comm-receipt-text p {
    font-size: 15.5px;
    color: var(--text-light);
    line-height: 1.85;
    margin-bottom: 22px;
}

.comm-receipt-callout {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: 10px;
    padding: 16px 20px;
}

    .comm-receipt-callout i {
        color: var(--primary);
        font-size: 20px;
        flex-shrink: 0;
    }

    .comm-receipt-callout span {
        font-size: 13.5px;
        color: var(--text);
        font-weight: 600;
        line-height: 1.6;
    }

@media(max-width:900px) {
    .comm-receipt-layout {
        grid-template-columns: 1fr;
    }

        .comm-receipt-layout .comm-receipt {
            order: 2;
            margin-top: 20px;
        }
}

/* ---------- Live transaction receipt ----------
   The card now reads as a live-updating confirmation feed: a
   pulsing LIVE badge, each line has its own icon-specific
   animation (bell ring, lightning flash, percent bounce) tied
   to its own reveal moment, and once every line has landed a
   "Confirmed" stamp punches into the corner — directly paying
   off the "confirmation you can trust" headline. */
.comm-receipt {
    max-width: 360px;
    margin: 0;
    background: #fff;
    border-radius: 14px 14px 0 0;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
    animation: floatCard 8s ease-in-out infinite;
}

@media(prefers-reduced-motion:reduce) {
    .comm-receipt {
        animation: none;
    }
}

.comm-receipt-printhead {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 3;
    background: linear-gradient(90deg,transparent,var(--primary-light),transparent);
    animation: printSweep 2.2s ease-in-out .2s 1;
}

@keyframes printSweep {
    0% {
        top: 0;
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    92% {
        opacity: 1;
    }

    100% {
        top: 100%;
        opacity: 0;
    }
}

@media(prefers-reduced-motion:reduce) {
    .comm-receipt-printhead {
        display: none;
    }
}

.comm-receipt-live {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .08em;
    color: #fff;
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(4px);
    padding: 4px 10px;
    border-radius: 20px;
}

    .comm-receipt-live .cyber-status-dot {
        color: #5EEAD4;
    }

.comm-receipt-head {
    background: linear-gradient(135deg,var(--primary),var(--primary-light));
    color: #fff;
    padding: 22px 28px;
    border-radius: 14px 14px 0 0;
    text-align: center;
    position: relative;
}

    .comm-receipt-head i {
        font-size: 26px;
        margin-bottom: 8px;
        display: block;
    }

    .comm-receipt-head h4 {
        color: #fff;
        font-size: 16px;
        margin: 0;
    }

.comm-receipt-body {
    padding: 22px 26px 8px;
}

.comm-receipt-line {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px dashed var(--border);
    font-size: 13px;
    opacity: 0;
    transform: translateY(6px);
    animation: receiptLineIn .5s ease forwards;
    animation-delay: var(--d);
}

    .comm-receipt-line:last-child {
        border-bottom: none;
    }

@keyframes receiptLineIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media(prefers-reduced-motion:reduce) {
    .comm-receipt-line {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

.comm-receipt-line-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
}

    .comm-receipt-line-icon.bell {
        background: linear-gradient(135deg,var(--primary),var(--primary-light));
        animation: receiptBellRing .5s ease 1.1s 1;
    }

    .comm-receipt-line-icon.stack {
        background: linear-gradient(135deg,var(--accent-dark),var(--accent));
        animation: receiptFlash .5s ease 1.5s 1;
    }

    .comm-receipt-line-icon.percent {
        background: linear-gradient(135deg,#15803D,var(--success));
        animation: receiptBounce .5s ease 1.9s 1;
    }

@keyframes receiptBellRing {
    0%,100% {
        transform: rotate(0);
    }

    20% {
        transform: rotate(-14deg);
    }

    40% {
        transform: rotate(11deg);
    }

    60% {
        transform: rotate(-7deg);
    }

    80% {
        transform: rotate(4deg);
    }
}

@keyframes receiptFlash {
    0%,100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.6);
    }
}

@keyframes receiptBounce {
    0%,100% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.25);
    }
}

@media(prefers-reduced-motion:reduce) {
    .comm-receipt-line-icon {
        animation: none;
    }
}

.comm-receipt-line-label {
    flex: 1;
    color: var(--text-light);
    font-weight: 600;
}

.comm-receipt-line-value {
    font-weight: 700;
    color: var(--dark);
    font-size: 11.5px;
    background: var(--light);
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

    .comm-receipt-line-value.ok {
        background: rgba(34,197,94,.12);
        color: #15803D;
    }

/* Confirmation stamp — punches in once the last line has landed */
.comm-receipt-stamp {
    position: absolute;
    bottom: 60px;
    right: 24px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    color: #15803D;
    border: 2px solid #15803D;
    border-radius: 6px;
    padding: 4px 10px;
    text-transform: uppercase;
    transform: rotate(-10deg) scale(2.4);
    opacity: 0;
    animation: receiptStampIn .4s cubic-bezier(.2,1.4,.5,1) 2.4s forwards;
}

    .comm-receipt-stamp i {
        font-size: 12px;
    }

@keyframes receiptStampIn {
    0% {
        transform: rotate(-10deg) scale(2.4);
        opacity: 0;
    }

    70% {
        opacity: .9;
    }

    100% {
        transform: rotate(-10deg) scale(1);
        opacity: .85;
    }
}

@media(prefers-reduced-motion:reduce) {
    .comm-receipt-stamp {
        animation: none;
        transform: rotate(-10deg) scale(1);
        opacity: .85;
    }
}

.comm-receipt-perf {
    height: 16px;
    background: radial-gradient(circle,transparent 8px,#fff 8.5px) 0 -8px / 24px 16px repeat-x,var(--light);
}

.comm-receipt-tear {
    height: 22px;
    background: linear-gradient(135deg,transparent 8px,#fff 0) 0 0/14px 14px repeat-x;
}

@media(max-width:600px) {
    .comm-receipt-head, .comm-receipt-body {
        padding: 20px;
    }
}

/* ---------- Closing: push-notification banner ---------- */

.comm-notify-cta {
    background: #fff;
    padding: 60px 0 140px;
}

.comm-notify {
    max-width: 620px;
    margin: 0 auto;
    background: var(--dark);
    color: #fff;
    border-radius: 18px;
    padding: 22px 26px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 30px 60px rgba(3,10,25,.3);
}

.comm-notify-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,var(--primary),var(--secondary));
    font-size: 19px;
}

.comm-notify-text {
    flex: 1;
    min-width: 0;
}

    .comm-notify-text b {
        display: block;
        font-size: 14.5px;
    }

    .comm-notify-text span {
        display: block;
        font-size: 12.5px;
        color: rgba(255,255,255,.6);
        margin-top: 2px;
    }

.comm-notify .btn {
    flex-shrink: 0;
    padding: 10px 18px;
    font-size: 13px;
}

@media(max-width:600px) {
    .comm-notify {
        flex-direction: column;
        align-items: flex-start;
        border-radius: 16px;
    }

        .comm-notify .btn {
            width: 100%;
            justify-content: center;
        }
}

/*==========================================================
CUSTOM SOFTWARE DEVELOPMENT PAGE — new component set again:
a dark tech-arsenal tile grid, split advantage panels, a
numbered service ledger, a before/after legacy comparison, a
CSS-only tabbed offerings panel (radio-driven, no JS), and an
asymmetric bento-grid closing. Same brand palette throughout.
==========================================================*/

/* ---------- Hero: two columns — animated code editor left, copy right ---------- */

.csd-hero {
    position: relative;
    overflow: hidden;
    background: var(--grad-hero);
    color: #fff;
    padding: 170px 0 110px;
}

    .csd-hero::before {
        content: "";
        position: absolute;
        top: -200px;
        right: -160px;
        width: 640px;
        height: 640px;
        border-radius: 50%;
        background: radial-gradient(rgba(47,128,237,.22),transparent 70%);
        pointer-events: none;
    }

.csd-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 56px;
    align-items: center;
    position: relative;
    z-index: 2;
}

.csd-hero-inner {
    max-width: 640px;
}

.csd-hero .eyebrow {
    color: #7DD3FC;
}

    .csd-hero .eyebrow::before {
        background: var(--accent);
    }

.csd-hero h1 {
    color: #fff;
    font-size: 40px;
    line-height: 1.2;
    margin: 16px 0 20px;
}

    .csd-hero h1 span {
        display: block;
        background: linear-gradient(90deg,#7DD3FC,#5EEAD4);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.csd-hero p {
    color: rgba(255,255,255,.72);
    font-size: 16.5px;
    line-height: 1.85;
    margin-bottom: 30px;
    max-width: 560px;
}

.csd-hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

/* ---------- Live code editor visual ----------
   A function types itself out with basic syntax colouring, then
   a console prints a build/test result while a progress bar
   fills, before the whole cycle resets and loops — "code,
   functions running", as requested, rather than a static mockup. */
.csd-code-visual {
    background: #0B0F1A;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 40px 80px rgba(3,10,25,.4);
    animation: floatCard 8s ease-in-out infinite;
}

@media(prefers-reduced-motion:reduce) {
    .csd-code-visual {
        animation: none;
    }
}

.csd-code-chrome {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255,255,255,.1);
}

    .csd-code-chrome span {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: rgba(255,255,255,.25);
    }

        .csd-code-chrome span:nth-child(1) {
            background: #F87171;
        }

        .csd-code-chrome span:nth-child(2) {
            background: #FBBF24;
        }

        .csd-code-chrome span:nth-child(3) {
            background: #5EEAD4;
        }

    .csd-code-chrome b {
        margin-left: 10px;
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 600;
        color: rgba(255,255,255,.55);
    }

.csd-code-body {
    padding: 24px 22px;
    min-height: 180px;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.95;
}

.csd-code-line {
    white-space: pre;
    color: #E2E8F0;
}

    .csd-code-line .kw {
        color: #C084FC;
    }

    .csd-code-line .fn {
        color: #7DD3FC;
    }

    .csd-code-line .pr {
        color: #5EEAD4;
    }

    .csd-code-line .nm {
        color: #FBBF24;
    }

    .csd-code-line.typing-cursor::after {
        content: "|";
        margin-left: 2px;
        color: #7DD3FC;
        animation: erpCursorBlink .8s steps(1) infinite;
    }

.csd-code-console {
    border-top: 1px solid rgba(255,255,255,.1);
    padding: 16px 22px 20px;
}

.csd-code-console-line {
    font-family: var(--font-mono);
    font-size: 12px;
    color: rgba(255,255,255,.6);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    transition: color .3s ease;
}

    .csd-code-console-line i {
        color: #5EEAD4;
        font-size: 12px;
    }

    .csd-code-console-line.ok {
        color: #5EEAD4;
    }

.csd-code-progress {
    height: 5px;
    border-radius: 3px;
    background: rgba(255,255,255,.1);
    overflow: hidden;
}

.csd-code-progress-fill {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: 3px;
    background: linear-gradient(90deg,var(--primary-light),#5EEAD4);
    transition: width .4s ease;
}

@media(max-width:960px) {
    .csd-hero-grid {
        grid-template-columns: 1fr;
    }
}

@media(max-width:600px) {
    .csd-hero {
        padding: 150px 0 70px;
    }

        .csd-hero h1 {
            font-size: 28px;
        }

    .csd-code-body {
        min-height: 150px;
        font-size: 11.5px;
    }
}

/* ---------- Tech Arsenal: dark tile grid ---------- */

.csd-arsenal-section {
    background: var(--dark);
    color: #fff;
    padding: 120px 0;
}

.csd-arsenal-head {
    max-width: 600px;
    margin: 0 auto 56px;
    background: #fff;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--radius-lg);
    padding: 40px 44px;
    box-shadow: 0 20px 45px rgba(0,0,0,.25);
}

.csd-arsenal-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 18px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,var(--primary),var(--secondary));
    color: #fff;
    font-size: 23px;
    box-shadow: 0 14px 28px rgba(10,77,140,.3);
}

.csd-arsenal-head .eyebrow-pill {
    color: var(--primary);
    background: rgba(10,77,140,.08);
    border-color: rgba(10,77,140,.22);
    margin-bottom: 14px;
}

.csd-arsenal-head h2 {
    color: var(--dark);
    font-size: 30px;
    margin-bottom: 14px;
}

    .csd-arsenal-head h2 span {
        background: linear-gradient(90deg,var(--primary),var(--secondary));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.csd-arsenal-head p {
    color: var(--text-light);
}

.csd-arsenal-label {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: rgba(255,255,255,.55);
    margin: 44px 0 20px;
}

.csd-tech-grid {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 16px;
}

.csd-cloud-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 16px;
    max-width: 640px;
    margin: 0 auto;
}

.csd-tech-tile {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 14px;
    padding: 26px 14px;
    text-align: center;
    transition: var(--transition);
}

    .csd-tech-tile:hover {
        background: rgba(255,255,255,.09);
        border-color: rgba(255,255,255,.22);
        transform: translateY(-5px) scale(1.03);
        box-shadow: 0 16px 32px rgba(0,0,0,.28);
    }

.csd-tech-icon-wrap {
    position: relative;
    width: 44px;
    height: 44px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .csd-tech-icon-wrap i {
        font-size: 28px;
        position: relative;
        z-index: 2;
    }

.csd-tech-tile span {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: rgba(255,255,255,.85);
}

.tile-react .csd-tech-icon-wrap i {
    color: #7DD3FC;
}

.tile-node .csd-tech-icon-wrap i {
    color: #5EEAD4;
}

.tile-java .csd-tech-icon-wrap i {
    color: #FBBF24;
}

.tile-python .csd-tech-icon-wrap i {
    color: #93C5FD;
}

.tile-dotnet .csd-tech-icon-wrap i {
    color: #A7F3D0;
}

.tile-cloud .csd-tech-icon-wrap i {
    color: #F59E0B;
}

/* Distinct faded background per tile, matching its icon's own
   colour, instead of every card sharing the same flat tint */
.tile-react {
    background: linear-gradient(160deg,rgba(125,211,252,.16),rgba(125,211,252,.03) 75%);
}

.tile-node {
    background: linear-gradient(160deg,rgba(94,234,212,.16),rgba(94,234,212,.03) 75%);
}

.tile-java {
    background: linear-gradient(160deg,rgba(251,191,36,.18),rgba(251,191,36,.03) 75%);
}

.tile-python {
    background: linear-gradient(160deg,rgba(147,197,253,.16),rgba(147,197,253,.03) 75%);
}

.tile-dotnet {
    background: linear-gradient(160deg,rgba(167,243,208,.16),rgba(167,243,208,.03) 75%);
}

.tile-cloud {
    background: linear-gradient(160deg,rgba(245,158,11,.16),rgba(245,158,11,.03) 75%);
}

.tile-react:hover {
    background: linear-gradient(160deg,rgba(125,211,252,.24),rgba(125,211,252,.05) 75%);
}

.tile-node:hover {
    background: linear-gradient(160deg,rgba(94,234,212,.24),rgba(94,234,212,.05) 75%);
}

.tile-java:hover {
    background: linear-gradient(160deg,rgba(251,191,36,.26),rgba(251,191,36,.06) 75%);
}

.tile-python:hover {
    background: linear-gradient(160deg,rgba(147,197,253,.24),rgba(147,197,253,.05) 75%);
}

.tile-dotnet:hover {
    background: linear-gradient(160deg,rgba(167,243,208,.24),rgba(167,243,208,.05) 75%);
}

.tile-cloud:hover {
    background: linear-gradient(160deg,rgba(245,158,11,.24),rgba(245,158,11,.06) 75%);
}

.csd-tech-tile span {
    color: #F8FAFC;
    text-shadow: 0 1px 3px rgba(0,0,0,.35);
}

/* React — two electrons orbit the icon on tilted planes, like
   the React atom logo */
.orbit-electron {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #7DD3FC;
    box-shadow: 0 0 8px 2px rgba(125,211,252,.6);
    margin: -3px 0 0 -3px;
    z-index: 1;
    animation: electronOrbit1 3.2s linear infinite;
}

    .orbit-electron.o2 {
        animation: electronOrbit2 4.2s linear infinite reverse;
        background: #5EEAD4;
        box-shadow: 0 0 8px 2px rgba(94,234,212,.6);
    }

@keyframes electronOrbit1 {
    from {
        transform: rotate(0deg) translateX(26px) rotate(0deg) scaleY(.55);
    }

    to {
        transform: rotate(360deg) translateX(26px) rotate(-360deg) scaleY(.55);
    }
}

@keyframes electronOrbit2 {
    from {
        transform: rotate(60deg) translateX(26px) rotate(-60deg) scaleY(.55) rotate(60deg);
    }

    to {
        transform: rotate(420deg) translateX(26px) rotate(-420deg) scaleY(.55) rotate(60deg);
    }
}

@media(prefers-reduced-motion:reduce) {
    .orbit-electron {
        display: none;
    }
}

/* Node.js — the hexagon "heartbeats" with a steady double-pulse,
   like Node's event loop ticking */
.tile-node .csd-tech-icon-wrap i {
    animation: nodeHeartbeat 2.4s ease-in-out infinite;
}

@keyframes nodeHeartbeat {
    0%,100% {
        transform: scale(1);
    }

    10% {
        transform: scale(1.16);
    }

    20% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.1);
    }

    40% {
        transform: scale(1);
    }
}

@media(prefers-reduced-motion:reduce) {
    .tile-node .csd-tech-icon-wrap i {
        animation: none;
    }
}

/* Java — wisps of steam rise from the coffee cup */
.steam {
    position: absolute;
    bottom: 26px;
    width: 3px;
    height: 10px;
    border-radius: 3px;
    background: rgba(255,255,255,.5);
    z-index: 1;
    animation: javaSteam 2.4s ease-in infinite;
}

    .steam.s1 {
        left: 14px;
        animation-delay: 0s;
    }

    .steam.s2 {
        left: 24px;
        animation-delay: .8s;
    }

@keyframes javaSteam {
    0% {
        transform: translateY(0) scaleX(1);
        opacity: 0;
    }

    30% {
        opacity: .8;
    }

    100% {
        transform: translateY(-22px) scaleX(1.6);
        opacity: 0;
    }
}

@media(prefers-reduced-motion:reduce) {
    .steam {
        display: none;
    }
}

/* Python — a gentle slither, like the two intertwined snakes of
   the logo */
.tile-python .csd-tech-icon-wrap i {
    display: inline-block;
    animation: pythonSlither 2.6s ease-in-out infinite;
}

@keyframes pythonSlither {
    0%,100% {
        transform: skewX(0deg) rotate(0deg);
    }

    25% {
        transform: skewX(6deg) rotate(3deg);
    }

    75% {
        transform: skewX(-6deg) rotate(-3deg);
    }
}

@media(prefers-reduced-motion:reduce) {
    .tile-python .csd-tech-icon-wrap i {
        animation: none;
    }
}

/* .NET — a continuous rotating ring behind the icon, echoing
   the infinity-loop mark of modern .NET */
.dotnet-ring {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    z-index: 1;
    border: 1.5px dashed rgba(167,243,208,.5);
    animation: dotnetSpin 6s linear infinite;
}

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

@media(prefers-reduced-motion:reduce) {
    .dotnet-ring {
        animation: none;
    }
}

/* Cloud tiles — icons drift gently like real clouds, each on a
   slightly different rhythm so the row doesn't move in unison */
.tile-cloud .csd-tech-icon-wrap i {
    display: inline-block;
    animation: cloudDrift 4s ease-in-out infinite;
}

.tile-cloud:nth-child(2) .csd-tech-icon-wrap i {
    animation-delay: .6s;
    animation-duration: 4.6s;
}

.tile-cloud:nth-child(3) .csd-tech-icon-wrap i {
    animation-delay: 1.2s;
    animation-duration: 5.2s;
}

@keyframes cloudDrift {
    0%,100% {
        transform: translateX(0) translateY(0);
    }

    50% {
        transform: translateX(3px) translateY(-4px);
    }
}

@media(prefers-reduced-motion:reduce) {
    .tile-cloud .csd-tech-icon-wrap i {
        animation: none;
    }
}

@media(max-width:800px) {
    .csd-tech-grid {
        grid-template-columns: repeat(3,1fr);
    }
}

@media(max-width:500px) {
    .csd-tech-grid, .csd-cloud-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

/* ---------- Services: numbered ledger list ---------- */

.csd-ledger-section {
    background: linear-gradient(180deg,#F7FBFE 0%,#E4F1FA 45%,#AFDAF0 100%);
    padding: 120px 0;
    overflow: hidden;
}

    .csd-ledger-section .section-head {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

        .csd-ledger-section .section-head .eyebrow {
            justify-content: center;
            color: var(--primary-dark);
        }

            .csd-ledger-section .section-head .eyebrow::before {
                background: var(--accent);
            }

        .csd-ledger-section .section-head h2 {
            color: #0B2540;
        }

            .csd-ledger-section .section-head h2 span {
                background: linear-gradient(90deg,var(--primary-dark),var(--secondary));
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
            }

        .csd-ledger-section .section-head p {
            color: rgba(11,37,64,.65);
        }

.expertise-trail {
    position: relative;
    max-width: 920px;
    margin: 64px auto 0;
}

.expertise-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: var(--border);
    transform: translateX(-50%);
    z-index: 1;
}

.expertise-line-pulse {
    position: absolute;
    top: 0;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transform: translateX(-50%);
    background: var(--primary-light);
    box-shadow: 0 0 12px 3px rgba(47,128,237,.55);
    animation: expertiseLineTravel 6s ease-in-out infinite;
}

@keyframes expertiseLineTravel {
    0% {
        top: 0;
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    92% {
        opacity: 1;
    }

    100% {
        top: 100%;
        opacity: 0;
    }
}

@media(prefers-reduced-motion:reduce) {
    .expertise-line-pulse {
        display: none;
    }
}

.expertise-row {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 48px;
    padding: 34px 0;
}

    .expertise-row.reverse {
        flex-direction: row-reverse;
    }

.expertise-text {
    flex: 1;
    min-width: 0;
}

.expertise-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #fff;
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 13px;
    margin-bottom: 14px;
    box-shadow: 0 8px 18px rgba(0,0,0,.16);
}

    .expertise-num.n1 {
        background: linear-gradient(135deg,var(--primary),var(--primary-light));
    }

    .expertise-num.n2 {
        background: linear-gradient(135deg,var(--secondary),var(--secondary-light));
    }

    .expertise-num.n3 {
        background: linear-gradient(135deg,var(--accent-dark),var(--accent));
    }

    .expertise-num.n4 {
        background: linear-gradient(135deg,#15803D,var(--success));
    }

    .expertise-num.n5 {
        background: linear-gradient(135deg,var(--primary-dark),#0F766E);
    }

.expertise-text h3 {
    font-size: 20px;
    margin-bottom: 8px;
    color: #0B2540;
}

.expertise-text p {
    font-size: 14.5px;
    line-height: 1.75;
    color: rgba(11,37,64,.62);
    margin: 0;
    max-width: 340px;
}

.expertise-row:nth-child(2) .expertise-text h3 {
    color: var(--primary-dark);
}

.expertise-row:nth-child(3) .expertise-text h3 {
    color: #0F5C63;
}

.expertise-row:nth-child(4) .expertise-text h3 {
    color: #92400E;
}

.expertise-row:nth-child(5) .expertise-text h3 {
    color: #166534;
}

.expertise-row:nth-child(6) .expertise-text h3 {
    color: #0B3D57;
}

.expertise-row.reverse .expertise-text p {
    margin-left: auto;
}

/* Shared frame shell */
.expertise-frame {
    flex-shrink: 0;
    width: 220px;
    height: 150px;
    position: relative;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 20px 40px rgba(15,23,42,.1);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .3s ease;
}

.expertise-row:hover .expertise-frame {
    transform: translateY(-5px);
}

/* 1 — Custom Software: a tiny IDE, cursor blinking on the second
   line as if actively being written. Faded blue card backdrop. */
.frame-code {
    background: linear-gradient(160deg,rgba(47,128,237,.14),rgba(47,128,237,.02) 70%);
    display: block;
    padding: 14px;
}

    .frame-code .frame-chrome {
        display: flex;
        gap: 6px;
        padding: 8px 10px;
        background: #0B0F1A;
        border-radius: 10px 10px 0 0;
    }

        .frame-code .frame-chrome span {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: rgba(255,255,255,.2);
        }

            .frame-code .frame-chrome span:nth-child(1) {
                background: #F87171;
            }

            .frame-code .frame-chrome span:nth-child(2) {
                background: #FBBF24;
            }

            .frame-code .frame-chrome span:nth-child(3) {
                background: #5EEAD4;
            }

    .frame-code .frame-body {
        background: #0B0F1A;
        padding: 10px 16px 16px;
        font-family: var(--font-mono);
        font-size: 11.5px;
        border-radius: 0 0 10px 10px;
    }

    .frame-code .code-line {
        display: block;
        color: #7DD3FC;
        margin-bottom: 8px;
        opacity: 0;
        animation: codeLineReveal .5s ease forwards;
    }

        .frame-code .code-line.l1 {
            animation-delay: .3s;
        }

        .frame-code .code-line.l2 {
            animation-delay: 1s;
        }

@keyframes codeLineReveal {
    to {
        opacity: 1;
    }
}

@media(prefers-reduced-motion:reduce) {
    .frame-code .code-line {
        opacity: 1;
        animation: none;
    }
}

.frame-code .code-cursor {
    color: #5EEAD4;
    animation: erpCursorBlink .8s steps(1) infinite;
}

@media(prefers-reduced-motion:reduce) {
    .frame-code .code-cursor {
        animation: none;
    }
}

/* 2 — Mobile: a real mini app UI — header, two content cards and
   a bottom nav with the active tab cycling. Faded teal backdrop. */
.frame-phone {
    background: linear-gradient(160deg,rgba(20,184,166,.16),rgba(20,184,166,.03) 70%);
}

.phone-shell {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.phone-notch {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 88px;
    height: 126px;
    border-radius: 16px;
    background: #0B0F1A;
    box-shadow: 0 14px 26px rgba(0,0,0,.22);
}

.phone-badge {
    position: absolute;
    top: 6px;
    left: 50%;
    margin-left: 20px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--danger);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    animation: phoneBadgePing 2s ease-in-out infinite;
}

@keyframes phoneBadgePing {
    0%,100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.25);
    }
}

@media(prefers-reduced-motion:reduce) {
    .phone-badge {
        animation: none;
    }
}

.phone-screen {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: 76px;
    height: 110px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 6px 6px 5px;
    gap: 5px;
    z-index: 2;
}

.app-header {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 1px;
}

.app-logo {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    background: var(--secondary);
    flex-shrink: 0;
}

.app-title {
    flex: 1;
    height: 5px;
    border-radius: 3px;
    background: rgba(14,116,144,.2);
}

.app-card {
    height: 24px;
    border-radius: 6px;
    flex-shrink: 0;
    background: linear-gradient(120deg,rgba(20,184,166,.15),rgba(47,128,237,.12));
    opacity: 0;
    animation: appCardIn .5s ease forwards;
}

    .app-card.ac1 {
        animation-delay: .4s;
    }

    .app-card.ac2 {
        animation-delay: .75s;
    }

@keyframes appCardIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

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

@media(prefers-reduced-motion:reduce) {
    .app-card {
        opacity: 1;
        animation: none;
    }
}

.app-navbar {
    margin-top: auto;
    display: flex;
    justify-content: center;
    gap: 10px;
    padding-top: 4px;
}

.app-nav-icon {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border);
    transition: background .3s ease;
}

    .app-nav-icon.active {
        background: var(--secondary);
        animation: navCycle 3.6s ease-in-out infinite;
    }

@keyframes navCycle {
    0%,28% {
        background: var(--secondary);
    }

    33%,61% {
        background: var(--border);
    }

    66%,94% {
        background: var(--border);
    }
}

@media(prefers-reduced-motion:reduce) {
    .app-nav-icon.active {
        animation: none;
    }
}

/* 3 — Web: a browser frame showing the real URL and a mini site
   preview that "loads in" section by section, with a cursor
   clicking through it. Faded amber backdrop. */
.frame-browser {
    background: linear-gradient(160deg,rgba(245,158,11,.14),rgba(245,158,11,.02) 70%);
    flex-direction: column;
    align-items: stretch;
    padding: 10px;
}

.frame-chrome.browser {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: #fff;
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid var(--border);
}

    .frame-chrome.browser span {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--border);
        flex-shrink: 0;
    }

        .frame-chrome.browser span:nth-child(1) {
            background: #F87171;
        }

        .frame-chrome.browser span:nth-child(2) {
            background: #FBBF24;
        }

        .frame-chrome.browser span:nth-child(3) {
            background: #34D399;
        }

.browser-bar {
    flex: 1;
    height: 16px;
    margin-left: 8px;
    border-radius: 7px;
    background: var(--light);
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 8px;
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: 8px;
    color: var(--text-light);
    white-space: nowrap;
}

    .browser-bar i {
        font-size: 7px;
        color: var(--success);
        flex-shrink: 0;
    }

.browser-body {
    flex: 1;
    position: relative;
    background: #fff;
    border-radius: 0 0 8px 8px;
    overflow: hidden;
}

.site-preview {
    position: absolute;
    inset: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.site-hero {
    height: 26px;
    border-radius: 5px;
    flex-shrink: 0;
    background: linear-gradient(120deg,var(--primary-dark),var(--primary),var(--secondary));
    opacity: 0;
    animation: sitePreviewIn .5s ease forwards;
}

.site-block {
    height: 11px;
    border-radius: 4px;
    background: var(--light);
    opacity: 0;
    animation: sitePreviewIn .5s ease forwards;
}

    .site-block.sb1 {
        width: 90%;
        animation-delay: .5s;
    }

    .site-block.sb2 {
        width: 75%;
        animation-delay: .7s;
    }

    .site-block.sb3 {
        width: 85%;
        animation-delay: .9s;
    }

@keyframes sitePreviewIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

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

@media(prefers-reduced-motion:reduce) {
    .site-hero, .site-block {
        opacity: 1;
        animation: none;
    }
}

.cursor-arrow {
    position: absolute;
    top: 60%;
    left: 60%;
    font-size: 15px;
    color: var(--dark);
    z-index: 2;
    animation: cursorClick 3.2s ease-in-out infinite;
}

@keyframes cursorClick {
    0%,25% {
        transform: translate(-24px,-10px);
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    50%,60% {
        transform: translate(0,0) scale(.85);
        opacity: 1;
    }

    70% {
        opacity: 0;
    }

    100% {
        transform: translate(-24px,-10px);
        opacity: 0;
    }
}

@media(prefers-reduced-motion:reduce) {
    .cursor-arrow {
        animation: none;
        opacity: 0;
    }
}

.click-ripple {
    position: absolute;
    top: 60%;
    left: 60%;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    border: 2px solid var(--accent-dark);
    animation: clickRipple 3.2s ease-in-out infinite;
}

@keyframes clickRipple {
    0%,55% {
        transform: scale(0);
        opacity: 0;
    }

    62% {
        transform: scale(1);
        opacity: .8;
    }

    80% {
        transform: scale(2.2);
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@media(prefers-reduced-motion:reduce) {
    .click-ripple {
        display: none;
    }
}

/* 4 — API: two system nodes with data continuously travelling
   between them along a connecting line. Faded green backdrop. */
.frame-api {
    background: linear-gradient(160deg,rgba(34,197,94,.14),rgba(34,197,94,.02) 70%);
    gap: 0;
}

.api-node {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    flex-shrink: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    position: absolute;
    transition: transform .3s ease;
}

    .api-node.n-left {
        left: 28px;
        background: linear-gradient(135deg,var(--primary),var(--primary-light));
        animation: apiNodePulse 2.2s ease-in-out infinite;
    }

    .api-node.n-right {
        right: 28px;
        background: linear-gradient(135deg,#15803D,var(--success));
        animation: apiNodePulse 2.2s ease-in-out 1.1s infinite;
    }

@keyframes apiNodePulse {
    0%,100% {
        box-shadow: 0 0 0 0 rgba(0,0,0,0);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(21,128,61,0);
    }
}

.api-link {
    position: absolute;
    top: 50%;
    left: 76px;
    right: 76px;
    height: 2px;
    background: var(--border);
    transform: translateY(-50%);
}

.api-dot {
    position: absolute;
    top: 50%;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transform: translateY(-50%);
    background: var(--primary-light);
    box-shadow: 0 0 10px 3px rgba(47,128,237,.5);
    animation: apiDotTravel 2.2s ease-in-out infinite;
}

@keyframes apiDotTravel {
    0% {
        left: 0;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        left: calc(100% - 8px);
        opacity: 0;
    }
}

@media(prefers-reduced-motion:reduce) {
    .api-dot {
        display: none;
    }

    .api-node {
        animation: none;
    }
}

/* 5 — Cloud: a cloud icon with an upload arrow bouncing upward,
   plus a soft pulsing halo behind it. Faded navy backdrop. */
.frame-cloud {
    background: linear-gradient(160deg,rgba(7,55,99,.14),rgba(7,55,99,.02) 70%);
}

    .frame-cloud::before {
        content: "";
        position: absolute;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background: radial-gradient(rgba(20,184,166,.25),transparent 70%);
        animation: cloudHalo 2.6s ease-in-out infinite;
    }

@keyframes cloudHalo {
    0%,100% {
        transform: scale(1);
        opacity: .6;
    }

    50% {
        transform: scale(1.25);
        opacity: 1;
    }
}

@media(prefers-reduced-motion:reduce) {
    .frame-cloud::before {
        animation: none;
    }
}

.frame-cloud i.bi-cloud-fill {
    font-size: 56px;
    color: var(--secondary);
    opacity: .95;
    position: relative;
    z-index: 2;
}

.cloud-arrow {
    position: absolute;
    top: 38%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary);
    font-size: 13px;
    box-shadow: 0 6px 14px rgba(0,0,0,.14);
    animation: cloudArrowUp 1.8s ease-in-out infinite;
}

@keyframes cloudArrowUp {
    0%,100% {
        transform: translate(-50%,-50%) translateY(0);
        opacity: 1;
    }

    50% {
        transform: translate(-50%,-50%) translateY(-6px);
        opacity: .7;
    }
}

@media(prefers-reduced-motion:reduce) {
    .cloud-arrow {
        animation: none;
    }
}

@media(max-width:820px) {
    .expertise-line {
        display: none;
    }

    .expertise-row, .expertise-row.reverse {
        flex-direction: column;
        text-align: center;
        gap: 22px;
        padding: 28px 0;
        border-bottom: 1px solid var(--border);
    }

        .expertise-row:last-child {
            border-bottom: none;
        }

    .expertise-text p {
        margin-left: auto;
        margin-right: auto;
    }

    .expertise-frame {
        width: 100%;
        max-width: 280px;
    }
}

/* ---------- Modernization: before/after comparison ---------- */

/* ---------- Website Development & Hosting (new section) ---------- */

.csd-hosting-section {
    background: var(--light);
    padding: 130px 0;
    position: relative;
    overflow: hidden;
}

    .csd-hosting-section::before {
        content: "";
        position: absolute;
        top: -220px;
        right: -160px;
        width: 560px;
        height: 560px;
        border-radius: 50%;
        background: radial-gradient(rgba(47,128,237,.08),transparent 70%);
        pointer-events: none;
    }

.csd-hosting-layout {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 2;
}

.csd-hosting-icon {
    width: 58px;
    height: 58px;
    margin-bottom: 18px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,var(--primary),var(--secondary));
    color: #fff;
    font-size: 23px;
    box-shadow: 0 14px 28px rgba(10,77,140,.26);
}

.csd-hosting-layout .eyebrow-pill {
    margin-bottom: 16px;
}

.csd-hosting-layout h2 {
    margin-bottom: 16px;
}

.csd-hosting-layout > div:first-child > p {
    font-size: 16px;
    line-height: 1.85;
    color: var(--text-light);
    margin-bottom: 28px;
    max-width: 520px;
}

.csd-hosting-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.csd-hosting-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    transition: transform .25s ease, box-shadow .25s ease;
}

    .csd-hosting-feature:hover {
        transform: translateY(-4px) scale(1.02);
        box-shadow: var(--shadow);
    }

    .csd-hosting-feature i {
        width: 34px;
        height: 34px;
        border-radius: 9px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 15px;
        transition: transform .3s cubic-bezier(.34,1.56,.64,1);
    }

    .csd-hosting-feature:hover i {
        transform: scale(1.15) rotate(-6deg);
    }

    .csd-hosting-feature.f1 i {
        background: linear-gradient(135deg,var(--primary),var(--primary-light));
        animation: featPhoneTilt 2.8s ease-in-out infinite;
    }

    .csd-hosting-feature.f2 i {
        background: linear-gradient(135deg,var(--secondary),var(--secondary-light));
        animation: featSearchDrift 2.6s ease-in-out infinite;
    }

    .csd-hosting-feature.f3 i {
        background: linear-gradient(135deg,var(--accent-dark),var(--accent));
        position: relative;
    }

    .csd-hosting-feature.f4 i {
        background: linear-gradient(135deg,#15803D,var(--success));
        animation: featEnvelopeBounce 2.4s ease-in-out infinite;
    }

@keyframes featPhoneTilt {
    0%,100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-10deg);
    }

    75% {
        transform: rotate(10deg);
    }
}

@keyframes featSearchDrift {
    0%,100% {
        transform: translate(0,0);
    }

    50% {
        transform: translate(2px,-2px);
    }
}

@keyframes featEnvelopeBounce {
    0%,100% {
        transform: translateY(0);
    }

    20% {
        transform: translateY(-4px);
    }

    40% {
        transform: translateY(0);
    }
}

@media(prefers-reduced-motion:reduce) {
    .csd-hosting-feature.f1 i, .csd-hosting-feature.f2 i, .csd-hosting-feature.f4 i {
        animation: none;
    }
}

/* SSL shield gets a pulsing ring instead of an icon-transform,
   since a static lock reads better than a moving one */
.csd-hosting-feature.f3 i::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 12px;
    box-shadow: 0 0 0 0 rgba(245,158,11,.5);
    animation: featShieldPulse 2.2s ease-out infinite;
}

@keyframes featShieldPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(245,158,11,.5);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(245,158,11,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(245,158,11,0);
    }
}

@media(prefers-reduced-motion:reduce) {
    .csd-hosting-feature.f3 i::before {
        animation: none;
    }
}

.csd-hosting-feature span {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.5;
}

/* ---------- Premium offer card ----------
   A rotating shimmer runs continuously around the card's border
   (oversized conic-gradient layer + overflow:hidden mask — same
   reliable technique as the Communications page's "chase" card,
   not a literal rotating rectangle), a live mock browser bar
   types out a rotating cast of example domain names, and the
   CTA glows softly to draw the eye. */
.csd-offer-card {
    position: relative;
    border-radius: var(--radius-lg);
    padding: 3px;
    overflow: hidden;
    box-shadow: 0 40px 80px rgba(3,10,25,.18);
}

.csd-offer-shimmer {
    position: absolute;
    z-index: 1;
    width: 220%;
    height: 220%;
    top: -60%;
    left: -60%;
    background: conic-gradient(from 0deg,var(--primary),var(--secondary),var(--accent),var(--danger),var(--primary));
    animation: offerShimmerSpin 8s linear infinite;
}

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

@media(prefers-reduced-motion:reduce) {
    .csd-offer-shimmer {
        animation: none;
    }
}

.csd-offer-inner {
    position: relative;
    z-index: 2;
    background: #fff;
    border-radius: calc(var(--radius-lg) - 3px);
    padding: 44px 36px 32px;
    overflow: hidden;
}

.csd-offer-ribbon {
    position: absolute;
    top: 22px;
    right: -42px;
    width: 170px;
    text-align: center;
    background: linear-gradient(135deg,var(--accent-dark),var(--accent));
    color: #fff;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 6px 0;
    transform: rotate(45deg);
    box-shadow: 0 6px 14px rgba(245,158,11,.3);
    z-index: 3;
}

/* Live mock browser bar — the domain name types itself in a
   loop, cycling through a few example names */
.csd-offer-domain-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--light);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 26px;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--dark);
}

    .csd-offer-domain-bar i {
        color: var(--primary);
        font-size: 13px;
        flex-shrink: 0;
    }

.csd-offer-domain-cursor {
    color: var(--primary-light);
    animation: erpCursorBlink .8s steps(1) infinite;
}

@media(prefers-reduced-motion:reduce) {
    .csd-offer-domain-cursor {
        animation: none;
    }
}

.csd-offer-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
}

.csd-offer-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 21px;
    background: linear-gradient(135deg,var(--primary),var(--primary-light));
    box-shadow: 0 12px 24px rgba(10,77,140,.24);
    transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}

.csd-offer-item:hover .csd-offer-icon {
    transform: scale(1.12) rotate(-6deg);
}

.csd-offer-item:nth-child(4) .csd-offer-icon {
    background: linear-gradient(135deg,var(--secondary),var(--secondary-light));
    box-shadow: 0 12px 24px rgba(14,116,144,.24);
}

.csd-offer-item div {
    flex: 1;
    min-width: 0;
}

.csd-offer-item h4 {
    font-size: 16px;
    margin-bottom: 3px;
}

.csd-offer-item p {
    font-size: 13px;
    color: var(--text-light);
    margin: 0;
}

.csd-offer-tag {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
    color: #15803D;
    background: rgba(34,197,94,.12);
    border-radius: 20px;
    padding: 6px 14px;
    animation: offerTagPulse 2.2s ease-in-out infinite;
}

@keyframes offerTagPulse {
    0%,100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }
}

@media(prefers-reduced-motion:reduce) {
    .csd-offer-tag {
        animation: none;
    }
}

.csd-offer-divider {
    position: relative;
    height: 24px;
    margin-left: 26px;
}

    .csd-offer-divider::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 2px;
        background: var(--border);
    }

.csd-offer-pulse {
    position: absolute;
    top: 0;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    transform: translateX(-50%);
    background: var(--primary-light);
    box-shadow: 0 0 10px 3px rgba(47,128,237,.5);
    animation: offerPulseTravel 2.6s ease-in-out infinite;
}

@keyframes offerPulseTravel {
    0% {
        top: 0;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        top: 100%;
        opacity: 0;
    }
}

@media(prefers-reduced-motion:reduce) {
    .csd-offer-pulse {
        display: none;
    }
}

.csd-offer-cta {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 20px;
    position: relative;
    animation: offerCtaGlow 2.4s ease-in-out infinite;
}

@keyframes offerCtaGlow {
    0%,100% {
        box-shadow: 0 8px 20px rgba(245,158,11,.25);
    }

    50% {
        box-shadow: 0 8px 28px rgba(245,158,11,.5);
    }
}

@media(prefers-reduced-motion:reduce) {
    .csd-offer-cta {
        animation: none;
    }
}

.csd-offer-fineprint {
    text-align: center;
    font-size: 11.5px;
    color: var(--text-light);
    margin-top: 14px;
}

@media(max-width:960px) {
    .csd-hosting-layout {
        grid-template-columns: 1fr;
    }
}

@media(max-width:600px) {
    .csd-hosting-features {
        grid-template-columns: 1fr;
    }

    .csd-offer-inner {
        padding: 36px 24px 26px;
    }
}

.csd-compare-section {
    background: linear-gradient(180deg,#FDF8F0 0%,#FAF3E7 100%);
    padding: 120px 0;
}

.csd-compare-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: stretch;
}

.csd-modern-side {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
}

    .csd-modern-side .upgrade-visual {
        margin-top: 0;
        flex-shrink: 0;
    }

.csd-compare-intro-box {
    position: relative;
    overflow: hidden;
    background: var(--grad-hero);
    border-radius: var(--radius-lg);
    padding: 44px 44px 40px;
    box-shadow: 0 30px 60px rgba(3,10,25,.28);
}

    .csd-compare-intro-box::before {
        content: "";
        position: absolute;
        top: -140px;
        right: -100px;
        width: 320px;
        height: 320px;
        border-radius: 50%;
        background: radial-gradient(rgba(47,128,237,.28),transparent 70%);
        pointer-events: none;
    }

    .csd-compare-intro-box::after {
        content: "";
        position: absolute;
        bottom: -140px;
        left: -100px;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background: radial-gradient(rgba(20,184,166,.22),transparent 70%);
        pointer-events: none;
    }

    .csd-compare-intro-box .eyebrow-pill i {
        margin-right: 6px;
    }

    .csd-compare-intro-box .eyebrow-pill {
        color: #7DD3FC;
        background: rgba(125,211,252,.12);
        border-color: rgba(125,211,252,.28);
        position: relative;
        z-index: 2;
    }

    .csd-compare-intro-box h2 {
        color: #fff;
        margin-bottom: 16px;
        position: relative;
        z-index: 2;
    }

        .csd-compare-intro-box h2 span {
            background: linear-gradient(90deg,#7DD3FC,#5EEAD4);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

    .csd-compare-intro-box p {
        color: rgba(255,255,255,.75);
        font-size: 16px;
        line-height: 1.9;
        margin: 0;
        position: relative;
        z-index: 2;
    }

.csd-compare-tagline {
    font-size: 17px !important;
    font-weight: 600;
    color: #fff !important;
    padding-left: 14px;
    border-left: 2px solid #5EEAD4;
    margin-bottom: 20px !important;
    line-height: 1.6 !important;
}

/* ---------- System Upgrade visual ----------
   A gear continuously rotates with ping rings expanding behind
   it, a version number ticks from v1.0 to v2.0, and a progress
   bar counts up on a loop as if the upgrade is actively running. */
.upgrade-visual {
    margin-top: 24px;
    background: linear-gradient(160deg,#F7FBFE 0%,#DCEFFA 55%,#B9DEF0 100%);
    border: 1px solid rgba(10,77,140,.12);
    border-radius: var(--radius-lg);
    padding: 32px 36px;
    box-shadow: 0 20px 45px rgba(10,77,140,.12);
    text-align: center;
}

.upgrade-gear-ring {
    position: relative;
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .upgrade-gear-ring i {
        font-size: 32px;
        color: var(--primary);
        position: relative;
        z-index: 2;
        animation: upgradeGearSpin 4s linear infinite;
    }

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

@media(prefers-reduced-motion:reduce) {
    .upgrade-gear-ring i {
        animation: none;
    }
}

.upgrade-ping {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(47,128,237,.4);
    animation: upgradePing 2.6s ease-out infinite;
}

    .upgrade-ping.p2 {
        animation-delay: 1.3s;
    }

@keyframes upgradePing {
    0% {
        transform: scale(.7);
        opacity: .8;
    }

    100% {
        transform: scale(1.9);
        opacity: 0;
    }
}

@media(prefers-reduced-motion:reduce) {
    .upgrade-ping {
        animation: none;
        opacity: 0;
    }
}

.upgrade-version {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 20px;
    margin-bottom: 22px;
}

.upgrade-version-old {
    color: var(--text-light);
    text-decoration: line-through;
    text-decoration-color: var(--danger);
}

.upgrade-version i {
    color: var(--primary);
    font-size: 16px;
}

.upgrade-version-new {
    background: linear-gradient(90deg,var(--primary),var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.upgrade-progress-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.upgrade-progress-track {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: var(--light);
    overflow: hidden;
}

.upgrade-progress-fill {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: 4px;
    background: linear-gradient(90deg,var(--primary),var(--secondary));
    transition: width .1s linear;
}

.upgrade-progress-pct {
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--primary);
    width: 38px;
    text-align: right;
}

.upgrade-progress-label {
    display: block;
    margin-top: 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-light);
    letter-spacing: .03em;
}

@media(max-width:960px) {
    .csd-compare-layout {
        grid-template-columns: 1fr;
    }
}

@media(max-width:600px) {
    .csd-compare-intro-box {
        padding: 32px 26px;
    }

    .upgrade-visual {
        padding: 26px 24px;
    }
}

/* ---------- Auto-morphing transformation card ----------
   One card, always visible, that transforms itself on a loop:
   background, icon, heading and every row's wording crossfade
   from "legacy" to "modernised" and back — a live time-lapse of
   the same system rather than two static columns or a slider
   the reader has to operate. Toggled purely by adding/removing
   .is-after on the card (see the JS); everything else here is
   just transitions reacting to that one class change. */
.morph-card {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(150deg,#FEF2F2 0%,#fff 60%);
    border-radius: var(--radius-lg);
    box-shadow: 0 40px 80px rgba(3,10,25,.16);
    transition: background 1.2s ease, transform .3s ease, box-shadow .3s ease;
}

    .morph-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 46px 90px rgba(3,10,25,.2);
    }

    .morph-card.is-after {
        background: linear-gradient(150deg,#EFF9F7 0%,#fff 60%);
    }

.morph-card-clip {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: var(--radius-lg);
    z-index: 1;
}

.morph-card-glow {
    position: absolute;
    top: -140px;
    right: -100px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(rgba(220,38,38,.16),transparent 70%);
    transition: background 1.2s ease;
    pointer-events: none;
}

.morph-card.is-after .morph-card-glow {
    background: radial-gradient(rgba(20,184,166,.18),transparent 70%);
}

.morph-card-head {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 44px 34px 30px;
    border-bottom: 1px solid rgba(15,23,42,.07);
}

.morph-card-icon {
    position: relative;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
}

    .morph-card-icon i {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26px;
        transition: opacity .5s ease, transform .5s ease;
    }

    .morph-card-icon .icon-before {
        color: var(--danger);
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }

    .morph-card-icon .icon-after {
        color: #15803D;
        opacity: 0;
        transform: scale(.4) rotate(90deg);
    }

.morph-card.is-after .morph-card-icon .icon-before {
    opacity: 0;
    transform: scale(.4) rotate(-90deg);
}

.morph-card.is-after .morph-card-icon .icon-after {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.morph-card-head h3 {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 26px;
    margin: 0;
    font-size: 20px;
}

.morph-label {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: opacity .5s ease, transform .5s ease;
}

.label-before {
    color: var(--danger);
    opacity: 1;
    transform: translateY(0);
}

.label-after {
    color: #15803D;
    opacity: 0;
    transform: translateY(8px);
}

.morph-card.is-after .label-before {
    opacity: 0;
    transform: translateY(-8px);
}

.morph-card.is-after .label-after {
    opacity: 1;
    transform: translateY(0);
}

/* Small toggle pill showing which state is active, purely
   decorative but reinforces the transformation happening */
.morph-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: 20px;
    flex-shrink: 0;
    background: rgba(220,38,38,.15);
    transition: background 1.2s ease;
}

.morph-card.is-after .morph-toggle {
    background: rgba(34,197,94,.18);
}

.morph-toggle-dot {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--danger);
    transition: transform 1.2s cubic-bezier(.4,0,.2,1), background 1.2s ease;
}

.morph-card.is-after .morph-toggle-dot {
    transform: translateX(20px);
    background: #15803D;
}

.morph-card-body {
    position: relative;
    z-index: 2;
    padding: 28px 40px 38px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.morph-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(15,23,42,.05);
    opacity: 0;
    transform: translateX(-12px);
}

.morph-card.aos-animate .morph-row {
    animation: morphRowEntrance .5s ease forwards;
    animation-delay: calc(.15s + var(--i) * .1s);
}

@keyframes morphRowEntrance {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media(prefers-reduced-motion:reduce) {
    .morph-row {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

.morph-row:last-child {
    border-bottom: none;
}

.morph-icon {
    position: relative;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

    .morph-icon i {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        transition: opacity .45s ease, transform .45s ease;
        transition-delay: calc(var(--i) * .08s);
    }

    .morph-icon .icon-before {
        color: var(--danger);
        opacity: 1;
        transform: scale(1);
    }

    .morph-icon .icon-after {
        color: #15803D;
        opacity: 0;
        transform: scale(.3);
    }

.morph-card.is-after .morph-icon .icon-before {
    opacity: 0;
    transform: scale(.3);
}

.morph-card.is-after .morph-icon .icon-after {
    opacity: 1;
    transform: scale(1);
}

.morph-text {
    position: relative;
    flex: 1;
    min-width: 0;
    min-height: 1.6em;
    font-size: 14.5px;
    line-height: 1.6;
}

    .morph-text .label-before, .morph-text .label-after {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        transition: opacity .45s ease, transform .45s ease;
        transition-delay: calc(var(--i) * .08s);
    }

    .morph-text .label-before {
        color: var(--text);
        opacity: 1;
        transform: translateX(0);
    }

    .morph-text .label-after {
        color: var(--text);
        opacity: 0;
        transform: translateX(10px);
    }

.morph-card.is-after .morph-text .label-before {
    opacity: 0;
    transform: translateX(-10px);
}

.morph-card.is-after .morph-text .label-after {
    opacity: 1;
    transform: translateX(0);
}

@media(prefers-reduced-motion:reduce) {
    .morph-card, .morph-card-glow, .morph-card-icon i, .morph-label, .morph-toggle, .morph-toggle-dot, .morph-icon i, .morph-text .label-before, .morph-text .label-after {
        transition: none;
    }
}

@media(max-width:600px) {
    .morph-card-head {
        padding: 24px 22px;
        gap: 12px;
    }

    .morph-card-body {
        padding: 18px 22px 24px;
    }

    .morph-card-head h3 {
        font-size: 17px;
    }
}

.csd-offerings-section {
    background: var(--light);
    padding: 120px 0;
}

.csd-tabs {
    max-width: 900px;
    margin: 50px auto 0;
}

    .csd-tabs input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

.csd-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 0;
}

    .csd-tabs-nav label {
        cursor: pointer;
        padding: 13px 22px;
        border-radius: 10px;
        font-size: 13.5px;
        font-weight: 700;
        border: 1px solid transparent;
        transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
        position: relative;
        transform: scale(.97);
    }

        .csd-tabs-nav label::after {
            display: none;
        }

        .csd-tabs-nav label[for="csd-tab-1"] {
            background: linear-gradient(160deg,rgba(47,128,237,.14),rgba(47,128,237,.03) 75%);
            color: var(--primary);
            border-color: rgba(47,128,237,.18);
        }

        .csd-tabs-nav label[for="csd-tab-2"] {
            background: linear-gradient(160deg,rgba(20,184,166,.14),rgba(20,184,166,.03) 75%);
            color: var(--secondary);
            border-color: rgba(20,184,166,.2);
        }

        .csd-tabs-nav label[for="csd-tab-3"] {
            background: linear-gradient(160deg,rgba(245,158,11,.16),rgba(245,158,11,.03) 75%);
            color: var(--accent-dark);
            border-color: rgba(245,158,11,.22);
        }

        .csd-tabs-nav label[for="csd-tab-4"] {
            background: linear-gradient(160deg,rgba(34,197,94,.14),rgba(34,197,94,.03) 75%);
            color: #15803D;
            border-color: rgba(34,197,94,.2);
        }

        .csd-tabs-nav label[for="csd-tab-5"] {
            background: linear-gradient(160deg,rgba(7,55,99,.14),rgba(7,55,99,.03) 75%);
            color: var(--primary-dark);
            border-color: rgba(7,55,99,.2);
        }

        .csd-tabs-nav label:hover {
            transform: translateY(-2px);
        }

.csd-tab-panel {
    display: none;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 36px 40px;
    margin-top: 20px;
}

    .csd-tab-panel ul {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .csd-tab-panel li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: 14.5px;
        color: var(--text);
        line-height: 1.6;
        opacity: 0;
        transform: translateY(6px);
        animation: tabLiIn .4s ease forwards;
    }

        .csd-tab-panel li:nth-child(1) {
            animation-delay: .05s;
        }

        .csd-tab-panel li:nth-child(2) {
            animation-delay: .15s;
        }

        .csd-tab-panel li:nth-child(3) {
            animation-delay: .25s;
        }

@keyframes tabLiIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media(prefers-reduced-motion:reduce) {
    .csd-tab-panel li {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

.csd-tab-panel li i {
    color: var(--success);
    font-size: 13px;
    margin-top: 4px;
    flex-shrink: 0;
}

#csd-tab-1:checked ~ .csd-tabs-nav label[for="csd-tab-1"] {
    border-color: var(--primary);
    box-shadow: 0 10px 22px rgba(47,128,237,.18);
}

#csd-tab-2:checked ~ .csd-tabs-nav label[for="csd-tab-2"] {
    border-color: var(--secondary);
    box-shadow: 0 10px 22px rgba(20,184,166,.18);
}

#csd-tab-3:checked ~ .csd-tabs-nav label[for="csd-tab-3"] {
    border-color: var(--accent-dark);
    box-shadow: 0 10px 22px rgba(245,158,11,.2);
}

#csd-tab-4:checked ~ .csd-tabs-nav label[for="csd-tab-4"] {
    border-color: #15803D;
    box-shadow: 0 10px 22px rgba(34,197,94,.18);
}

#csd-tab-5:checked ~ .csd-tabs-nav label[for="csd-tab-5"] {
    border-color: var(--primary-dark);
    box-shadow: 0 10px 22px rgba(7,55,99,.2);
}

#csd-tab-1:checked ~ .csd-tabs-nav label[for="csd-tab-1"],
#csd-tab-2:checked ~ .csd-tabs-nav label[for="csd-tab-2"],
#csd-tab-3:checked ~ .csd-tabs-nav label[for="csd-tab-3"],
#csd-tab-4:checked ~ .csd-tabs-nav label[for="csd-tab-4"],
#csd-tab-5:checked ~ .csd-tabs-nav label[for="csd-tab-5"] {
    transform: scale(1.05);
}

#csd-tab-1:checked ~ #csd-panel-1,
#csd-tab-2:checked ~ #csd-panel-2,
#csd-tab-3:checked ~ #csd-panel-3,
#csd-tab-4:checked ~ #csd-panel-4,
#csd-tab-5:checked ~ #csd-panel-5 {
    display: block;
    animation: tabPanelIn .35s ease;
}

@keyframes tabPanelIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

@media(prefers-reduced-motion:reduce) {
    #csd-tab-1:checked ~ #csd-panel-1,
    #csd-tab-2:checked ~ #csd-panel-2,
    #csd-tab-3:checked ~ #csd-panel-3,
    #csd-tab-4:checked ~ #csd-panel-4,
    #csd-tab-5:checked ~ #csd-panel-5 {
        animation: none;
    }
}

@media(max-width:700px) {
    .csd-tabs-nav label {
        padding: 10px 14px;
        font-size: 12.5px;
    }

    .csd-tab-panel {
        padding: 26px 22px;
    }
}

/* ---------- Closing: asymmetric bento grid ---------- */

.csd-bento-section {
    background: #fff;
    padding: 60px 0 0;
}

/*==========================================================
CTA
==========================================================*/

.cta-section {
    padding: 200px 0 110px;
    background: #fff;
}

.cta-box {
    background: linear-gradient(150deg,rgba(10,77,140,.05) 0%,rgba(14,116,144,.045) 55%,rgba(20,184,166,.04) 140%),#fff;
    border: 1px solid rgba(10,77,140,.10);
    border-radius: var(--radius-lg);
    padding: 72px;
    display: grid;
    grid-template-columns: 1.3fr .7fr;
    gap: 40px;
    align-items: center;
    position: relative;
    overflow: hidden;
}

    .cta-box::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 5px;
        height: 100%;
        background: var(--grad-line);
    }

    .cta-box .eyebrow {
        color: var(--primary);
    }

        .cta-box .eyebrow::before {
            background: var(--accent);
        }

    .cta-box h2 {
        color: var(--dark);
        font-size: 38px;
    }

    .cta-box p {
        color: var(--text-light);
        font-size: 18px;
        margin-top: 14px;
    }

.cta-actions {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

    .cta-actions .btn {
        width: 100%;
    }

@media(max-width:900px) {
    .cta-box {
        grid-template-columns: 1fr;
        padding: 46px 32px;
    }

    .cta-section {
        padding: 165px 0 80px;
    }
}

/*==========================================================
CONTACT HERO — shorter than the standard page-hero since there's
no visual/card column, centred content, tsParticles + GSAP
entrance to match the rest of the site.
==========================================================*/

.contact-hero {
    position: relative;
    overflow: hidden;
    background: var(--grad-hero);
    color: #fff;
    padding: 190px 0 90px;
    text-align: center;
}

    .contact-hero::before {
        content: "";
        position: absolute;
        top: -180px;
        right: -160px;
        width: 600px;
        height: 600px;
        border-radius: 50%;
        background: radial-gradient(rgba(47,128,237,.22),transparent 70%);
    }

    .contact-hero::after {
        content: "";
        position: absolute;
        bottom: -200px;
        left: -160px;
        width: 560px;
        height: 560px;
        border-radius: 50%;
        background: radial-gradient(rgba(20,184,166,.2),transparent 70%);
    }

    .contact-hero .container {
        position: relative;
        z-index: 2;
    }

.contact-hero-content {
    max-width: 640px;
    margin: 0 auto;
}

    .contact-hero-content .eyebrow {
        justify-content: center;
        color: #7DD3FC;
    }

        .contact-hero-content .eyebrow::before {
            background: var(--accent);
        }

    .contact-hero-content h1 {
        color: #fff;
        font-size: 48px;
        margin: 16px 0 20px;
    }

        .contact-hero-content h1 span {
            background: linear-gradient(90deg,#7DD3FC,#5EEAD4);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

    .contact-hero-content p {
        color: rgba(255,255,255,.75);
        font-size: 17px;
        line-height: 1.85;
        margin-bottom: 30px;
    }

    .contact-hero-content .hero-buttons {
        justify-content: center;
        margin-bottom: 0;
    }

@media(max-width:600px) {
    .contact-hero {
        padding: 160px 0 70px;
    }

    .contact-hero-content h1 {
        font-size: 32px;
    }
}

/*==========================================================
CONTACT INFO CARDS — four cards mixed across the site's blue/
teal/amber/navy palette (not one flat repeated colour like a
typical "contact us" card row). Each icon sits on a pulsing
glow disc, and the whole card gets a diagonal shimmer sweep on
hover, same technique as the primary buttons.
==========================================================*/

.contact-info-section {
    padding-top: 0;
}

.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 24px;
    margin-top: -70px;
    position: relative;
    z-index: 3;
}

.contact-info-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 30px 26px;
    text-align: left;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 45px rgba(3,10,25,.1);
    transition: transform .3s ease, box-shadow .3s ease;
}

    .contact-info-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 28px 55px rgba(3,10,25,.16);
    }

    .contact-info-card::after {
        content: "";
        position: absolute;
        top: 0;
        left: -60%;
        width: 40%;
        height: 100%;
        background: linear-gradient(115deg,transparent,rgba(255,255,255,.5),transparent);
        transform: skewX(-20deg);
        transition: left .6s ease;
        pointer-events: none;
    }

    .contact-info-card:hover::after {
        left: 130%;
    }

.contact-info-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    margin-bottom: 18px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 21px;
}

    .contact-info-icon::before {
        content: "";
        position: absolute;
        inset: -6px;
        border-radius: 18px;
        box-shadow: 0 0 0 0 currentColor;
        animation: contactIconPulse 3.2s ease-out infinite;
    }

@keyframes contactIconPulse {
    0% {
        box-shadow: 0 0 0 0 currentColor;
        opacity: .4;
    }

    70% {
        box-shadow: 0 0 0 10px transparent;
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@media(prefers-reduced-motion:reduce) {
    .contact-info-icon::before {
        animation: none;
    }
}

.contact-info-card h3 {
    font-size: 16.5px;
    margin-bottom: 6px;
}

.contact-info-card p {
    font-size: 15px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 4px;
    line-height: 1.5;
}

.contact-info-sub {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-light);
}

.contact-info-card:nth-child(1) .contact-info-icon {
    background: linear-gradient(135deg,var(--primary),var(--primary-light));
    color: var(--primary-light);
}

.contact-info-card:nth-child(1) h3 {
    color: var(--primary);
}

.contact-info-card:nth-child(2) .contact-info-icon {
    background: linear-gradient(135deg,var(--secondary),var(--secondary-light));
    color: var(--secondary-light);
}

.contact-info-card:nth-child(2) h3 {
    color: var(--secondary);
}

.contact-info-card:nth-child(2) .contact-info-icon::before {
    animation-delay: .8s;
}

.contact-info-card:nth-child(3) .contact-info-icon {
    background: linear-gradient(135deg,var(--accent-dark),var(--accent));
    color: var(--accent);
}

.contact-info-card:nth-child(3) h3 {
    color: var(--accent-dark);
}

.contact-info-card:nth-child(3) .contact-info-icon::before {
    animation-delay: 1.6s;
}

.contact-info-card:nth-child(4) .contact-info-icon {
    background: linear-gradient(135deg,var(--primary-dark),var(--primary));
    color: var(--primary-light);
}

.contact-info-card:nth-child(4) h3 {
    color: var(--primary-dark);
}

.contact-info-card:nth-child(4) .contact-info-icon::before {
    animation-delay: 2.4s;
}

@media(max-width:900px) {
    .contact-info-grid {
        grid-template-columns: repeat(2,1fr);
        margin-top: -50px;
    }
}

@media(max-width:560px) {
    .contact-info-grid {
        grid-template-columns: 1fr;
    }
}

.contact-form-section {
    padding-top: 20px;
}

/*==========================================================
CONTACT FORM
==========================================================*/

.contact-form-card {
    max-width: 820px;
    margin: 56px auto 0;
    background: var(--light);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 56px;
}

.contact-form-head {
    margin-bottom: 32px;
}

    .contact-form-head h3 {
        font-size: 26px;
        margin-top: 14px;
        margin-bottom: 8px;
    }

    .contact-form-head p {
        font-size: 16px;
        margin: 0;
    }

.form-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    border-radius: var(--radius-sm);
    font-size: 14.5px;
    font-weight: 600;
    margin-bottom: 26px;
    line-height: 1.6;
}

    .form-alert i {
        font-size: 18px;
        margin-top: 1px;
        flex-shrink: 0;
    }

    .form-alert.success {
        background: rgba(34,197,94,.1);
        color: #15803D;
        border: 1px solid rgba(34,197,94,.25);
    }

    .form-alert.error {
        background: rgba(220,38,38,.08);
        color: var(--danger);
        border: 1px solid rgba(220,38,38,.22);
    }

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .form-field label {
        font-size: 13.5px;
        font-weight: 700;
        color: var(--dark);
        letter-spacing: .01em;
    }

        .form-field label span {
            color: var(--danger);
            margin-left: 3px;
        }

    .form-field input,
    .form-field textarea {
        font-family: var(--font-body);
        font-size: 15px;
        color: var(--text);
        background: #fff;
        border: 1.5px solid var(--border);
        border-radius: var(--radius-sm);
        padding: 13px 16px;
        transition: var(--transition);
        resize: vertical;
    }

        .form-field input:focus,
        .form-field textarea:focus {
            outline: none;
            border-color: var(--primary-light);
            box-shadow: 0 0 0 4px rgba(47,128,237,.12);
        }

.hp-field {
    position: absolute;
    left: -9999px;
    top: -9999px;
    height: 0;
    overflow: hidden;
}

.contact-form .btn {
    align-self: flex-start;
    margin-top: 6px;
}

@media(max-width:640px) {
    .contact-form-card {
        padding: 34px 24px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }
}

/*==========================================================
CLOSING CTA — glassmorphism, sits before the footer. Dark
gradient backdrop (same grad-hero family as the hero/disciplines
banners, so the page's last "premium" moment ties back to its
first) with a tsParticles field behind a frosted glass card.
Particles are initialised by page-level JS (see Index.cshtml's
Scripts section) into #closing-cta-particles; this block is
purely the static shell/fallback if JS is disabled.
==========================================================*/

.closing-cta-section {
    position: relative;
    overflow: hidden;
    background: var(--grad-hero);
    padding: 80px 0;
}

#closing-cta-particles {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.closing-cta-section .container {
    position: relative;
    z-index: 2;
}

.closing-cta-glass {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    background: rgba(255,255,255,.97);
    border: 1px solid rgba(15,23,42,.06);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 40px 90px rgba(3,10,25,.4);
    padding: 44px 48px;
    position: relative;
}

.closing-cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--primary);
    background: rgba(10,77,140,.07);
    border: 1px solid rgba(10,77,140,.16);
    padding: 8px 18px;
    border-radius: 30px;
    margin-bottom: 24px;
}

    .closing-cta-badge .cyber-status-dot {
        color: var(--primary);
    }

.closing-cta-glass h2 {
    color: var(--dark);
    font-size: 38px;
    line-height: 1.25;
    margin-bottom: 16px;
}

    .closing-cta-glass h2 span {
        display: inline;
        background: linear-gradient(90deg,var(--primary),var(--secondary-light));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.closing-cta-glass p {
    color: var(--text-light);
    font-size: 17px;
    line-height: 1.8;
    max-width: 480px;
    margin: 0 auto 36px;
}

.closing-cta-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

    /* Soft ambient glow pulse behind the primary button so it reads
   as the clear next step, without a hard focus ring */
    .closing-cta-actions .btn-accent {
        animation: ctaGlow 2.6s ease-in-out infinite;
    }

@keyframes ctaGlow {
    0%,100% {
        box-shadow: 0 14px 30px rgba(245,158,11,.3);
    }

    50% {
        box-shadow: 0 14px 44px rgba(245,158,11,.55);
    }
}

@media(prefers-reduced-motion:reduce) {
    .closing-cta-actions .btn-accent {
        animation: none;
    }
}

/* Small floating accent icons around the glass card — solid white
   chips (not translucent-on-dark anymore, since the card itself is
   now white) so they read as one consistent "card system" whether
   they sit over the dark section background or overlap the card
   edge. Each one picks up a different theme colour. */
.closing-cta-icon {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: 0 12px 26px rgba(3,10,25,.22);
    font-size: 18px;
    animation: heroFloat 8s ease-in-out infinite;
    z-index: 2;
}

    .closing-cta-icon.ci1 {
        top: -22px;
        left: 6%;
        animation-delay: 0s;
        color: var(--primary);
    }

    .closing-cta-icon.ci2 {
        bottom: -20px;
        right: 8%;
        color: var(--secondary);
        animation-delay: 2s;
    }

    .closing-cta-icon.ci3 {
        top: 36%;
        right: -22px;
        color: var(--accent-dark);
        animation-delay: 4s;
        display: none;
    }

@media(min-width:900px) {
    .closing-cta-icon.ci3 {
        display: flex;
    }
}

@media(prefers-reduced-motion:reduce) {
    .closing-cta-icon {
        animation: none;
    }
}

@media(max-width:600px) {
    .closing-cta-section {
        padding: 60px 0;
    }

    .closing-cta-glass {
        padding: 36px 26px;
    }

        .closing-cta-glass h2 {
            font-size: 28px;
        }

    .closing-cta-actions .btn {
        width: 100%;
    }
}

/*==========================================================
FOOTER
==========================================================*/

.footer {
    background: linear-gradient(180deg,#0A2547 0%,#071726 100%);
    color: rgba(255,255,255,.68);
    padding: 72px 0 28px;
    border-top: 1px solid rgba(255,255,255,.08);
    position: relative;
    overflow: hidden;
}

    .footer::before {
        content: "";
        position: absolute;
        top: -200px;
        left: 50%;
        transform: translateX(-50%);
        width: 600px;
        height: 400px;
        border-radius: 50%;
        background: radial-gradient(rgba(47,128,237,.10),transparent 72%);
        pointer-events: none;
    }

    .footer .container {
        position: relative;
        z-index: 2;
    }

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr .7fr 1fr;
    gap: 60px;
    padding-bottom: 50px;
}

.footer-brand .logo-text h2 {
    color: #fff;
}

.footer-brand p {
    margin-top: 18px;
    max-width: 340px;
    font-size: 15.5px;
    color: rgba(255,255,255,.6);
}

.footer h4 {
    font-family: var(--font-mono);
    font-size: 12.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
    margin-bottom: 22px;
    font-weight: 600;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

    .footer-links a {
        font-size: 15px;
        color: rgba(255,255,255,.78);
    }

        .footer-links a:hover {
            color: #7DD3FC;
        }

.footer-contact div {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    margin-bottom: 14px;
    color: rgba(255,255,255,.78);
}

.footer-contact i {
    color: var(--accent);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 28px;
    border-top: 1px solid rgba(255,255,255,.1);
    font-size: 14px;
}

.footer-social {
    display: flex;
    gap: 12px;
}

    .footer-social a {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255,255,255,.08);
        color: #fff;
    }

        .footer-social a:hover {
            background: var(--primary-light);
        }

/* Back to top */
.back-to-top {
    position: fixed;
    right: 28px;
    bottom: 28px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg,var(--primary),var(--primary-light));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 16px 36px rgba(10,77,140,.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: var(--transition);
    z-index: 900;
    font-size: 19px;
}

    .back-to-top.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .back-to-top:hover {
        background: linear-gradient(135deg,var(--secondary),var(--secondary-light));
    }

/* Critical fallback: keeps the mobile menu hidden even if this file
   is slow to load — mirrors the inline <style> the old PHP head had */
.mobile-menu {
    display: none;
    max-height: 0;
    overflow: hidden;
}

    .mobile-menu.open {
        display: block;
        max-height: 1000px;
    }

@media(max-width:768px) {
    .section {
        padding: 76px 0;
    }

    h1 {
        font-size: 38px;
    }

    h2 {
        font-size: 31px;
    }

    p {
        font-size: 16.5px;
    }

    .section-head {
        margin-bottom: 42px;
    }

    .container {
        padding: 0 22px;
    }

    .back-to-top {
        right: 18px;
        bottom: 18px;
        width: 46px;
        height: 46px;
    }
}

/*==========================================================
AUTH SCREEN — Sign In / multi-tenant client portal login.
Left: tenant-branded panel (logo/name swap per tenant; the
platform tagline strip at the bottom stays constant across every
tenant, since it's the one piece of copy that isn't swapped).
Right: the sign-in form itself, tenant-agnostic.
==========================================================*/

.auth-screen {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
}

/* ---------- Brand panel ---------- */
.auth-brand {
    position: relative;
    overflow: hidden;
    background: var(--grad-hero);
    color: #fff;
    padding: 56px 64px;
    display: flex;
    flex-direction: column;
}

.auth-brand-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

    .auth-brand-glow.g1 {
        top: -200px;
        right: -160px;
        width: 520px;
        height: 520px;
        background: radial-gradient(rgba(47,128,237,.26),transparent 70%);
    }

    .auth-brand-glow.g2 {
        bottom: -220px;
        left: -140px;
        width: 480px;
        height: 480px;
        background: radial-gradient(rgba(20,184,166,.2),transparent 70%);
    }

.auth-brand-logo {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    margin-bottom: 64px;
    opacity: 0;
    animation: authFadeDown .6s ease .1s forwards;
}

    .auth-brand-logo img {
        height: 34px;
        width: auto;
    }

    .auth-brand-logo span {
        font-size: 15.5px;
        font-weight: 700;
        color: #fff;
    }

.auth-brand-body {
    position: relative;
    z-index: 2;
    max-width: 460px;
}

    .auth-brand-body .tag {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-family: var(--font-mono);
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: #7DD3FC;
        background: rgba(125,211,252,.12);
        border: 1px solid rgba(125,211,252,.28);
        border-radius: 20px;
        padding: 7px 16px;
        margin-bottom: 20px;
        opacity: 0;
        animation: authFadeDown .6s ease .2s forwards;
    }

    .auth-brand-body h1 {
        font-size: 38px;
        line-height: 1.25;
        color: #fff;
        margin-bottom: 18px;
        opacity: 0;
        animation: authFadeDown .6s ease .3s forwards;
    }

        .auth-brand-body h1 span {
            display: block;
            background: linear-gradient(90deg,#7DD3FC,#5EEAD4);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

    .auth-brand-body > p {
        font-size: 15.5px;
        line-height: 1.85;
        color: rgba(255,255,255,.72);
        margin-bottom: 28px;
        opacity: 0;
        animation: authFadeDown .6s ease .4s forwards;
    }

.auth-brand-points {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

    .auth-brand-points li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: 14px;
        color: rgba(255,255,255,.85);
        line-height: 1.5;
        opacity: 0;
        transform: translateX(-10px);
        animation: authPointIn .5s ease forwards;
        animation-delay: calc(.55s + var(--i) * .12s);
    }

        .auth-brand-points li i {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            flex-shrink: 0;
            margin-top: 1px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            background: rgba(94,234,212,.18);
            color: #5EEAD4;
        }

@keyframes authFadeDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

@keyframes authPointIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media(prefers-reduced-motion:reduce) {
    .auth-brand-logo, .auth-brand-body .tag, .auth-brand-body h1, .auth-brand-body > p, .auth-brand-points li {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* ---------- Constant platform strip ---------- */
.auth-brand-platform {
    position: relative;
    z-index: 2;
    margin-top: auto;
    padding-top: 26px;
    border-top: 1px solid rgba(255,255,255,.14);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.auth-platform-badge {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 7px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #fff;
    background: rgba(255,255,255,.1);
    border-radius: 20px;
    padding: 6px 14px;
}

    .auth-platform-badge i {
        color: #7DD3FC;
        font-size: 11px;
    }

.auth-brand-tagline {
    font-size: 12.5px;
    color: rgba(255,255,255,.5);
    line-height: 1.6;
    max-width: 380px;
}

.auth-brand-foot {
    position: relative;
    z-index: 2;
    display: block;
    margin-top: 20px;
    font-size: 11.5px;
    color: rgba(255,255,255,.4);
}

/* ---------- Form side ---------- */
.auth-form-side {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 40px;
}

.auth-form-card {
    width: 100%;
    max-width: 410px;
    opacity: 0;
    animation: authFadeUp .6s ease .2s forwards;
}

@keyframes authFadeUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

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

@media(prefers-reduced-motion:reduce) {
    .auth-form-card {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

.auth-form-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,var(--primary),var(--secondary));
    color: #fff;
    font-size: 22px;
    box-shadow: 0 14px 28px rgba(10,77,140,.24);
}

.auth-form-card h2 {
    font-size: 26px;
    margin-bottom: 8px;
    color: var(--dark);
}

.auth-form-card > p {
    font-size: 14.5px;
    color: var(--text-light);
    margin-bottom: 32px;
}

/* Floating-label inputs */
.form-group.floating {
    position: relative;
    margin-bottom: 20px;
}

    .form-group.floating .form-control {
        width: 100%;
        padding: 22px 16px 10px 44px;
        border: 1.5px solid var(--border);
        border-radius: 10px;
        font-size: 14.5px;
        color: var(--dark);
        background: #fff;
        transition: border-color .25s ease, box-shadow .25s ease;
    }

        .form-group.floating .form-control:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 4px rgba(47,128,237,.12);
        }

    .form-group.floating label {
        position: absolute;
        left: 44px;
        top: 16px;
        font-size: 14.5px;
        color: var(--text-light);
        pointer-events: none;
        transition: all .2s ease;
    }

    .form-group.floating .form-control:focus + label,
    .form-group.floating .form-control:not(:placeholder-shown) + label {
        top: 7px;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .03em;
        text-transform: uppercase;
        color: var(--primary);
    }

.form-group-icon {
    position: absolute;
    left: 16px;
    top: 22px;
    color: var(--text-light);
    font-size: 14px;
    transition: color .25s ease;
}

.form-group.floating .form-control:focus ~ .form-group-icon {
    color: var(--primary);
}

.form-row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 26px;
    font-size: 13.5px;
}

.form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-light);
    cursor: pointer;
}

    .form-check input {
        accent-color: var(--primary);
        width: 15px;
        height: 15px;
    }

.form-link {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

    .form-link:hover {
        text-decoration: underline;
    }

.auth-submit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

    .auth-submit::after {
        content: "";
        position: absolute;
        top: 0;
        left: -60%;
        width: 40%;
        height: 100%;
        background: linear-gradient(115deg,transparent,rgba(255,255,255,.35),transparent);
        transform: skewX(-20deg);
        transition: left .6s ease;
    }

    .auth-submit:hover::after {
        left: 130%;
    }

.auth-footnote {
    text-align: center;
    font-size: 13px;
    color: var(--text-light);
    margin-top: 24px;
}

.auth-admin-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    font-size: 12.5px;
    color: var(--text-light);
}

    .auth-admin-link i {
        color: var(--primary);
        font-size: 13px;
    }

    .auth-admin-link a {
        color: var(--text-light);
        text-decoration: none;
        font-weight: 600;
    }

        .auth-admin-link a:hover {
            color: var(--primary);
        }

@media(max-width:960px) {
    .auth-screen {
        grid-template-columns: 1fr;
    }

    .auth-brand {
        padding: 44px 32px;
        min-height: 340px;
    }

    .auth-brand-body h1 {
        font-size: 28px;
    }

    .auth-form-side {
        padding: 44px 28px;
    }
}

@media(max-width:500px) {
    .auth-brand-logo {
        margin-bottom: 36px;
    }

    .auth-brand-platform {
        margin-top: 24px;
    }
}
/*==========================================================
SHOP — storefront
Self-contained. Every card dimension is stated explicitly
rather than derived, because the previous version had no
fixed heights anywhere: one oversized child could stretch a
card to thousands of pixels, which made a working four-column
grid look like a single column.
==========================================================*/

/*---------- Hero (narrow) ----------*/

.shop-hero {
    background: var(--grad-hero);
    padding: 128px 0 40px;
    position: relative;
    overflow: hidden;
}

    /* A slow ambient drift rather than particles. The homepage owns the
     particle field as its signature; repeating it here would dilute that,
     and the shop's job is to get out of the way of the products. */
    .shop-hero::before {
        content: "";
        position: absolute;
        top: -200px;
        right: -140px;
        width: 480px;
        height: 480px;
        border-radius: 50%;
        background: radial-gradient(rgba(94,234,212,.17),transparent 70%);
        animation: shopHeroDrift 18s ease-in-out infinite;
        pointer-events: none;
    }

    .shop-hero::after {
        content: "";
        position: absolute;
        bottom: -160px;
        left: -120px;
        width: 380px;
        height: 380px;
        border-radius: 50%;
        background: radial-gradient(rgba(125,211,252,.11),transparent 70%);
        animation: shopHeroDrift 22s ease-in-out infinite reverse;
        pointer-events: none;
    }

@keyframes shopHeroDrift {
    0%, 100% {
        transform: translate(0,0) scale(1);
    }

    50% {
        transform: translate(-24px,18px) scale(1.06);
    }
}

.shop-hero-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

    /* Children start hidden and GSAP reveals them, matching the homepage.
     Removing the class shows everything at once - the fallback when GSAP
     fails to load or motion is reduced. */
    .shop-hero-inner.gsap-init .eyebrow,
    .shop-hero-inner.gsap-init h1,
    .shop-hero-inner.gsap-init .shop-hero-search {
        opacity: 0;
        transform: translateY(22px);
    }

.shop-hero-copy .eyebrow {
    color: #7DD3FC;
}

    .shop-hero-copy .eyebrow::before {
        background: var(--accent);
    }

.shop-hero-copy h1 {
    color: #fff;
    font-size: 32px;
    line-height: 1.25;
    letter-spacing: -.02em;
    margin: 10px 0 0;
}

    .shop-hero-copy h1 span {
        background: linear-gradient(90deg,#7DD3FC,#5EEAD4);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.shop-hero-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 40px;
    padding: 6px 6px 6px 20px;
    flex: 1;
    min-width: 320px;
    max-width: 460px;
    transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
}

    .shop-hero-search:focus-within {
        border-color: rgba(125,211,252,.65);
        background: rgba(255,255,255,.16);
        box-shadow: 0 0 0 4px rgba(125,211,252,.09);
    }

    .shop-hero-search i {
        color: rgba(255,255,255,.55);
        font-size: 16px;
        transition: color .3s ease;
    }

    .shop-hero-search:focus-within i {
        color: #7DD3FC;
    }

    .shop-hero-search input {
        flex: 1;
        min-width: 0;
        background: none;
        border: none;
        outline: none;
        color: #fff;
        font-family: var(--font-body);
        font-size: 14.5px;
        padding: 11px 0;
    }

        .shop-hero-search input::placeholder {
            color: rgba(255,255,255,.45);
        }

    .shop-hero-search button {
        background: var(--accent);
        color: #fff;
        border-radius: 30px;
        padding: 11px 26px;
        font-family: var(--font-body);
        font-weight: 700;
        font-size: 14px;
        transition: var(--transition);
    }

        .shop-hero-search button:hover {
            background: var(--accent-dark);
            transform: translateY(-1px);
        }

/* Previous / next with a position indicator rather than numbered pages. With
   a catalogue this size, page 7 is not a destination anyone navigates to
   directly - and numbered pagination that wraps onto two lines on a phone is
   worse than nothing. */
.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 34px;
    padding-top: 26px;
    border-top: 1px solid var(--border);
}

.pager-step {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    transition: var(--transition);
}

    .pager-step:hover {
        border-color: var(--primary);
        color: var(--primary);
    }

.pager-off {
    opacity: .35;
    pointer-events: none;
}

.pager-count {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--text-light);
}
/*---------- Sub-hero (browse / product) ----------*/

.shop-subhero {
    background: var(--dark);
    padding: 128px 0 34px;
}

    .shop-subhero h1 {
        color: #fff;
        font-size: 30px;
        margin: 9px 0 6px;
    }

    .shop-subhero p {
        color: rgba(255,255,255,.7);
        font-size: 15px;
        max-width: 640px;
    }

.shop-crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(255,255,255,.55);
}

    .shop-crumbs a {
        color: rgba(255,255,255,.8);
    }

        .shop-crumbs a:hover {
            color: var(--accent);
        }

    .shop-crumbs i {
        font-size: 10px;
    }

/*---------- Category rail ----------*/

.shop-categories,
.shop-cat-rail {
    background: #fff;
    border-bottom: 1px solid var(--border);
    padding: 22px 0;
}

.shop-category-row,
.shop-cat-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.shop-category-chip,
.shop-cat-tile {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 20px;
    border-radius: 30px;
    border: 1.5px solid var(--border);
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    transition: var(--transition);
}

    .shop-category-chip i,
    .shop-cat-tile i {
        color: var(--primary);
        font-size: 14px;
    }

    .shop-category-chip:hover,
    .shop-cat-tile:hover {
        border-color: var(--primary);
        background: rgba(10,77,140,.04);
        transform: translateY(-2px);
    }

/*---------- Sections ----------*/

.shop-section,
.shop-band {
    padding: 56px 0;
}

.shop-section-alt,
.shop-band-alt {
    background: #fff;
}

.shop-section-head,
.shop-band-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

    .shop-band-head h2 {
        font-size: 22px;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .shop-band-head h2 i {
            color: var(--accent);
            font-size: 17px;
        }

    .shop-band-head a {
        font-size: 14px;
        font-weight: 600;
        color: var(--primary);
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .shop-section-head h2 {
        margin: 10px 0 0;
    }

/*==========================================================
PRODUCT GRID & CARD
The card is built from fixed dimensions on purpose. Anything
that can stretch - an aspect ratio, a flex:1, an unclamped
description - lets one long product name make a card taller
than the viewport, and the grid then reads as a column.
==========================================================*/
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(240px,1fr));
    gap: 22px;
}

.pcard {
    position: relative;
    display: flex;
    flex-direction: column;
    /* Grid items default to min-width:auto and refuse to shrink below their
     content. Without this a long word forces the track open and the
     remaining columns collapse to nothing. */
    min-width: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform .38s cubic-bezier(.4,0,.2,1), box-shadow .38s ease, border-color .38s ease;
}

    .pcard:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 44px rgba(8,24,39,.11);
        border-color: rgba(10,77,140,.22);
    }

/*---------- The signature: a rule that draws on hover ----------*/

.pcard-rule {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--grad-line);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s cubic-bezier(.4,0,.2,1);
    z-index: 4;
}

.pcard:hover .pcard-rule {
    transform: scaleX(1);
}

.pcard-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

/*---------- Image ----------*/

.pcard-media {
    position: relative;
    width: 100%;
    /* A fixed height rather than an aspect ratio: one number nothing else in
     the stylesheet can recalculate. */
    height: 210px;
    background: #fff;
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}

.pcard-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* contain rather than cover - product photography is shot on white with
     the item centred, and cropping to fill cuts the edges off exactly what
     someone is trying to look at. */
    object-fit: contain;
    padding: 16px;
    transition: opacity .5s ease, transform .55s cubic-bezier(.4,0,.2,1);
}

.pcard-img-b {
    opacity: 0;
}

.pcard:hover .pcard-img-a {
    transform: scale(1.07) translateY(-4px);
}

.pcard.has-swap:hover .pcard-img-a {
    opacity: 0;
}

.pcard.has-swap:hover .pcard-img-b {
    opacity: 1;
    transform: scale(1.04);
}

.pcard-noimg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--border);
    font-size: 34px;
}

/*---------- Tags ----------*/

.pcard-tags {
    position: absolute;
    top: 11px;
    left: 11px;
    right: 11px;
    display: flex;
    gap: 6px;
    z-index: 3;
    pointer-events: none;
}

.pcard-tag {
    padding: 4px 10px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .02em;
    color: #fff;
}

.pcard-tag-sale {
    background: var(--accent);
}

/* Availability tags sit right so a discount badge and a stock badge coexist
   rather than one covering the other. */
.pcard-tag-out {
    background: rgba(8,24,39,.86);
    margin-left: auto;
}

.pcard-tag-low {
    background: var(--danger);
    margin-left: auto;
}

/*---------- The peek bar ----------*/

/* Slides up on hover rather than sitting there permanently - a hint the card
   is clickable, not a piece of furniture. */
.pcard-peek {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px;
    background: linear-gradient(90deg,var(--primary),var(--secondary));
    color: #fff;
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    transform: translateY(100%);
    transition: transform .38s cubic-bezier(.4,0,.2,1);
    z-index: 2;
}

.pcard:hover .pcard-peek {
    transform: translateY(0);
}

/*---------- Body ----------*/

.pcard-body {
    padding: 15px 17px 17px;
}

.pcard-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 7px;
    min-height: 14px;
}

.pcard-cat {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--secondary);
}

.pcard-sku {
    font-family: var(--font-mono);
    font-size: 9.5px;
    color: var(--border);
    white-space: nowrap;
}

.pcard-name {
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.35;
    color: var(--dark);
    margin: 0 0 6px;
    /* Clamped so a long name cannot make one card taller than its neighbours
     and leave the row ragged. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .3s ease;
}

.pcard:hover .pcard-name {
    color: var(--primary);
}

.pcard-desc {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-light);
    margin: 0 0 13px;
    /* Fixed height, so every card's price line falls at the same point
     regardless of how much description there is. */
    height: 40px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/*---------- Price ----------*/

.pcard-price {
    padding-top: 12px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}

/* Mono numerals, because a price here is a specification rather than a
   shout. It also sits consistently with the SKU above it and the eyebrows
   used across the rest of the site. */
.pcard-amount {
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 600;
    color: var(--dark);
    letter-spacing: -.02em;
    transition: color .3s ease;
}

    .pcard-amount em {
        font-style: normal;
        font-size: 11px;
        font-weight: 500;
        color: var(--text-light);
        margin-right: 4px;
    }

.pcard:hover .pcard-amount {
    color: var(--primary);
}

.pcard-price s {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-light);
}

.pcard-price small {
    font-size: 10px;
    color: var(--text-light);
    margin-left: auto;
    letter-spacing: .02em;
}

/*---------- Button ----------*/

.pcard-form {
    margin: 0;
}

.pcard-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 12px;
    background: var(--light);
    border: none;
    border-top: 1px solid var(--border);
    color: var(--primary);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    overflow: hidden;
    transition: color .3s ease;
}

    /* The fill sweeps from the left rather than the background simply
     switching - it echoes the rule drawing across the top, so the whole
     hover reads as one gesture. */
    .pcard-btn::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg,var(--primary),var(--primary-light));
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .34s cubic-bezier(.4,0,.2,1);
    }

    .pcard-btn:hover::before {
        transform: scaleX(1);
    }

    .pcard-btn:hover {
        color: #fff;
    }

    .pcard-btn i,
    .pcard-btn span {
        position: relative;
        z-index: 1;
    }

.pcard-btn-off {
    color: var(--text-light);
    cursor: not-allowed;
    opacity: .6;
}

    .pcard-btn-off::before {
        display: none;
    }

    .pcard-btn-off:hover {
        color: var(--text-light);
    }

/*==========================================================
FILTER SIDEBAR
==========================================================*/

.filter-group {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

    .filter-group:last-of-type {
        border-bottom: none;
        margin-bottom: 12px;
    }

    .filter-group h4 {
        font-family: var(--font-mono);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--text-light);
        margin-bottom: 12px;
    }

.price-filter-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .price-filter-inputs input {
        width: 100%;
        min-width: 0;
        padding: 9px 10px;
        border: 1.5px solid var(--border);
        border-radius: var(--radius-sm);
        font-family: var(--font-mono);
        font-size: 13px;
        outline: none;
        transition: border-color .25s ease;
        background: #fff;
    }

        .price-filter-inputs input:focus {
            border-color: var(--primary);
        }

    .price-filter-inputs span {
        font-size: 12px;
        color: var(--text-light);
        flex-shrink: 0;
    }

.filter-apply {
    width: 100%;
    margin-top: 9px;
    padding: 9px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--primary);
    background: transparent;
    color: var(--primary);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: var(--transition);
}

    .filter-apply:hover {
        background: var(--primary);
        color: #fff;
    }

.filter-note {
    font-size: 11px;
    line-height: 1.6;
    color: var(--text-light);
    margin-top: 9px;
}

.filter-clear {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--danger);
    font-weight: 600;
}

    .filter-clear:hover {
        text-decoration: underline;
    }

.results-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.active-filter {
    display: inline-block;
    margin-left: 10px;
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(10,77,140,.07);
    color: var(--primary);
    font-family: var(--font-mono);
    font-size: 11px;
}

/*==========================================================
RESPONSIVE
==========================================================*/

@media(max-width:640px) {
    .product-grid {
        grid-template-columns: repeat(auto-fill,minmax(155px,1fr));
        gap: 14px;
    }

    .pcard-media {
        height: 150px;
    }

    .pcard-body {
        padding: 12px 13px 14px;
    }

    .pcard-name {
        font-size: 14px;
    }

    .pcard-desc {
        display: none;
    }

    .pcard-amount {
        font-size: 15.5px;
    }

    .pcard-sku {
        display: none;
    }

    /* The peek bar needs a hover to appear, which a touch device never
     provides. Hidden rather than left as dead markup. */
    .pcard-peek {
        display: none;
    }
}
/*---------- Browse layout ----------*/

.shop-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 36px;
    align-items: start;
}

.shop-sidebar {
    position: sticky;
    top: 100px;
    min-width: 0;
}

    .shop-sidebar h4 {
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: .06em;
        font-family: var(--font-mono);
        color: var(--text-light);
        margin-bottom: 12px;
    }

.shop-results {
    min-width: 0;
}

.shop-filter-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .shop-filter-list a {
        padding: 9px 13px;
        border-radius: var(--radius-sm);
        font-size: 14.5px;
        color: var(--text);
        border-left: 2px solid transparent;
    }

        .shop-filter-list a:hover {
            background: #fff;
            color: var(--primary);
        }

        .shop-filter-list a.active {
            background: #fff;
            color: var(--primary);
            font-weight: 700;
            border-left-color: var(--accent);
        }

.shop-result-count {
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 18px;
}

/*---------- Empty state ----------*/

.shop-empty {
    text-align: center;
    padding: 60px 24px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

    .shop-empty i {
        font-size: 42px;
        color: var(--border);
        display: block;
        margin-bottom: 16px;
    }

    .shop-empty h3 {
        margin-bottom: 9px;
    }

    .shop-empty p {
        max-width: 430px;
        margin: 0 auto 22px;
        font-size: 15px;
    }

/*---------- Closing banner ----------*/

.shop-assist {
    padding: 0 0 46px;
}

.shop-assist-inner {
    background: var(--dark);
    border-radius: var(--radius);
    padding: 24px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    flex-wrap: wrap;
}

    .shop-assist-inner h3 {
        color: #fff;
        font-size: 19px;
        margin: 0 0 4px;
    }

    .shop-assist-inner p {
        color: rgba(255,255,255,.65);
        font-size: 14.5px;
        margin: 0;
    }

/*==========================================================
BASKET & QUOTE REQUEST
==========================================================*/

.basket-flash {
    display: flex;
    align-items: center;
    gap: 9px;
    background: rgba(10,77,140,.06);
    border: 1px solid rgba(10,77,140,.18);
    border-radius: var(--radius-sm);
    padding: 13px 18px;
    margin-bottom: 22px;
    font-size: 14.5px;
    color: var(--primary-dark);
}

.basket-flash-warn {
    background: rgba(245,158,11,.08);
    border-color: rgba(245,158,11,.28);
    color: var(--accent-dark);
}

.basket-flash ul {
    margin: 0;
    padding: 0;
}

.basket-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 28px;
    align-items: start;
}

.basket-lines {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.basket-line {
    display: grid;
    grid-template-columns: 76px 1fr 76px 108px 32px;
    gap: 15px;
    align-items: center;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 18px;
    transition: var(--transition);
}

    .basket-line:hover {
        border-color: rgba(10,77,140,.22);
        box-shadow: var(--shadow-sm);
    }

.basket-line-media {
    width: 76px;
    height: 76px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--light);
}

    .basket-line-media img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 6px;
    }

.basket-line-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--border);
    font-size: 22px;
}

.basket-line-body {
    min-width: 0;
}

    .basket-line-body b {
        display: block;
        font-size: 15px;
        color: var(--dark);
    }

    .basket-line-body a:hover b {
        color: var(--primary);
    }

.basket-line-sku {
    display: block;
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-light);
    margin-top: 2px;
}

.basket-line-unit {
    display: block;
    font-size: 12.5px;
    color: var(--text-light);
    margin-top: 4px;
}

.basket-line-qty {
    margin: 0;
}

    .basket-line-qty input {
        width: 100%;
        padding: 9px 8px;
        border: 1.5px solid var(--border);
        border-radius: var(--radius-sm);
        font-family: var(--font-body);
        font-size: 14.5px;
        text-align: center;
        outline: none;
    }

        .basket-line-qty input:focus {
            border-color: var(--primary);
        }

.basket-line-total {
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 700;
    color: var(--dark);
    text-align: right;
}

.basket-line-remove {
    margin: 0;
}

    .basket-line-remove button {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: var(--light);
        color: var(--text-light);
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: var(--transition);
    }

        .basket-line-remove button:hover {
            background: var(--danger);
            color: #fff;
        }

.basket-summary {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    position: sticky;
    top: 100px;
    min-width: 0;
}

    .basket-summary h3 {
        font-size: 18px;
        margin-bottom: 16px;
    }

.basket-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 7px 0;
    font-size: 14.5px;
}

    .basket-summary-row span {
        color: var(--text-light);
    }

    .basket-summary-row b {
        font-family: var(--font-mono);
        color: var(--dark);
    }

.basket-summary-total {
    border-top: 1px solid var(--border);
    margin-top: 8px;
    padding-top: 14px;
}

    .basket-summary-total span {
        color: var(--dark);
        font-weight: 600;
    }

    .basket-summary-total b {
        font-size: 19px;
        color: var(--primary);
    }

.basket-summary-note {
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--text-light);
    margin: 16px 0 18px;
}

.basket-continue {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 14px;
    font-size: 14px;
    color: var(--text-light);
}

    .basket-continue:hover {
        color: var(--primary);
    }

/*---------- Quote request form ----------*/

.quote-form {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px;
    min-width: 0;
}

    .quote-form h3 {
        font-size: 18px;
        margin-bottom: 18px;
    }

.quote-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.quote-form .form-group {
    margin-bottom: 18px;
    min-width: 0;
}

.quote-form label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 7px;
}

.quote-form .form-control {
    width: 100%;
    padding: 12px 15px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 15px;
    outline: none;
    transition: var(--transition);
}

    .quote-form .form-control:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(10,77,140,.08);
    }

.quote-hint {
    display: block;
    font-size: 12.5px;
    color: var(--text-light);
    line-height: 1.6;
    margin-top: 6px;
}

.quote-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quote-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13.5px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

    .quote-item:last-child {
        border-bottom: none;
    }

    .quote-item b {
        font-family: var(--font-mono);
        color: var(--dark);
        white-space: nowrap;
    }

/*---------- Quote confirmation ----------*/

.quote-done {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 54px 34px;
}

.quote-done-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #DCFCE7;
    color: #15803D;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 29px;
    margin: 0 auto 22px;
}

.quote-done h1 {
    font-size: 29px;
    margin-bottom: 10px;
}

.quote-done-ref {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 12px;
}

.quote-done p {
    font-size: 15.5px;
}

.quote-done-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 26px;
    flex-wrap: wrap;
}

/*==========================================================
RESPONSIVE
==========================================================*/

@media(max-width:980px) {
    .shop-layout {
        grid-template-columns: 1fr;
    }

    .shop-sidebar {
        position: static;
    }

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

    .basket-summary {
        position: static;
    }

    .shop-hero-copy h1 {
        font-size: 26px;
    }

    .shop-subhero h1 {
        font-size: 26px;
    }

    .shop-hero-search {
        min-width: 100%;
    }
}

@media(max-width:640px) {
    .shop-hero {
        padding: 118px 0 32px;
    }

    .product-grid {
        grid-template-columns: repeat(auto-fill,minmax(155px,1fr));
        gap: 14px;
    }

    .pcard-media {
        height: 150px;
    }

    .pcard-body {
        padding: 12px 13px 14px;
    }

    .pcard-name {
        font-size: 14px;
    }

    .pcard-desc {
        display: none;
    }

    .pcard-price b {
        font-size: 15.5px;
    }

    .quote-form-row {
        grid-template-columns: 1fr;
    }

    .basket-line {
        grid-template-columns: 58px 1fr auto;
        gap: 12px;
    }

    .basket-line-media {
        width: 58px;
        height: 58px;
    }

    .basket-line-qty {
        grid-column: 2;
        width: 76px;
    }

    .basket-line-total {
        grid-column: 3;
    }

    .basket-line-remove {
        grid-column: 3;
        justify-self: end;
    }
}

.nav-basket {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--light);
    color: var(--primary);
    font-size: 17px;
    transition: var(--transition);
}

    .nav-basket:hover {
        background: var(--primary);
        color: #fff;
        transform: translateY(-2px);
    }

.nav-basket-count {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 20px;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*==========================================================
PRODUCT DETAIL
==========================================================*/

.pdp {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 44px;
    align-items: start;
}

/*---------- Gallery ----------*/

.pdp-gallery {
    min-width: 0;
    position: sticky;
    top: 100px;
}

.pdp-main {
    position: relative;
    width: 100%;
    height: 420px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

    .pdp-main img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 26px;
    }

.pdp-noimg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--border);
    font-size: 56px;
}

.pdp-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.pdp-thumb {
    width: 72px;
    height: 72px;
    padding: 0;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    cursor: pointer;
    transition: var(--transition);
}

    .pdp-thumb img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 5px;
    }

    .pdp-thumb:hover {
        border-color: var(--primary);
    }

    .pdp-thumb.active {
        border-color: var(--primary);
        box-shadow: 0 0 0 2px rgba(10,77,140,.15);
    }

/*---------- Detail column ----------*/

.pdp-detail {
    min-width: 0;
}

.pdp-cat {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--secondary);
    margin-bottom: 10px;
}

    .pdp-cat:hover {
        color: var(--primary);
    }

.pdp-detail h1 {
    font-size: 30px;
    line-height: 1.25;
    margin: 0 0 8px;
}

.pdp-sku {
    display: block;
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--text-light);
    margin-bottom: 18px;
}

.pdp-price {
    padding: 18px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: 18px;
}

    .pdp-price b {
        font-size: 30px;
        font-weight: 800;
        color: var(--dark);
        line-height: 1.1;
    }

    .pdp-price s {
        font-size: 16px;
        color: var(--text-light);
        margin-left: 10px;
    }

.pdp-vat {
    display: block;
    font-size: 13px;
    color: var(--text-light);
    margin-top: 6px;
}

/*---------- Stock ----------*/

.pdp-stock {
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 600;
}

    .pdp-stock i {
        margin-right: 5px;
    }

.pdp-stock-in {
    color: #15803D;
}

.pdp-stock-low {
    color: var(--accent-dark);
}

.pdp-stock-out {
    color: var(--danger);
}

.pdp-lead {
    font-size: 15.5px;
    line-height: 1.75;
    margin-bottom: 24px;
}

/*---------- Add to list ----------*/

.pdp-form {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.pdp-qty label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 5px;
}

.pdp-qty input {
    width: 78px;
    padding: 13px 10px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 15px;
    text-align: center;
    outline: none;
}

    .pdp-qty input:focus {
        border-color: var(--primary);
    }

.pdp-add {
    flex: 1;
    min-width: 200px;
    justify-content: center;
}

.pdp-note {
    font-size: 12.5px;
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 24px;
}

/*---------- Assurances ----------*/

.pdp-assure {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 20px;
    background: var(--light);
    border-radius: var(--radius);
}

    .pdp-assure div {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 13.5px;
        color: var(--text);
    }

    .pdp-assure i {
        color: var(--primary);
        font-size: 15px;
    }

/*---------- Full description ----------*/

.pdp-desc {
    margin-top: 48px;
    padding-top: 36px;
    border-top: 1px solid var(--border);
    max-width: 780px;
}

    .pdp-desc h2 {
        font-size: 22px;
        margin-bottom: 16px;
    }

.pdp-desc-body {
    font-size: 15.5px;
    line-height: 1.85;
    color: var(--text);
    /* Preserves the line breaks an admin typed, without needing them to
       write HTML in a textarea. */
    white-space: pre-wrap;
}

/*---------- Responsive ----------*/

@media(max-width:900px) {
    .pdp {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .pdp-gallery {
        position: static;
    }

    .pdp-main {
        height: 320px;
    }

    .pdp-detail h1 {
        font-size: 24px;
    }

    .pdp-price b {
        font-size: 25px;
    }
}
/* Stacked rather than side by side: an "Email quotation" label will not fit
   beside a "Quotation" button in a narrow sidebar, and truncating the label
   on the button that sends something to a client is the wrong thing to
   truncate. */
.order-action-pair {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .order-action-pair form {
        margin: 0;
    }

    .order-action-pair .btn {
        width: 100%;
        justify-content: flex-start;
    }

/* A distinct colour because this button leaves the building. Download and
   issue are reversible; sending a document to a client is not. */
.btn-email {
    background: var(--secondary);
    color: #fff;
    border: 1px solid var(--secondary);
}

    .btn-email:hover {
        background: #0b5f75;
        border-color: #0b5f75;
        color: #fff;
    }

/* Inside the payments table the pair sits horizontally - there is room, and
   a stacked pair would make every row twice as tall. */
.data-table .order-action-pair,
.data-table .table-actions {
    flex-direction: row;
}

    .data-table .table-actions .btn {
        width: auto;
    }

/*==========================================================
LEGAL PAGES
Documents rather than marketing. Narrow measure, generous
leading, and a sticky contents list — nobody reads a privacy
policy start to finish, they arrive looking for one clause.
==========================================================*/

.legal-hero {
    background: var(--grad-hero);
    padding: 128px 0 48px;
    position: relative;
    overflow: hidden;
}

    .legal-hero::before {
        content: "";
        position: absolute;
        top: -180px;
        right: -100px;
        width: 420px;
        height: 420px;
        border-radius: 50%;
        background: radial-gradient(rgba(94,234,212,.13),transparent 70%);
        pointer-events: none;
    }

.legal-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 720px;
}

.legal-kicker {
    display: inline-block;
    padding: 5px 13px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.06);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #7DD3FC;
}

.legal-hero h1 {
    color: #fff;
    font-size: 38px;
    letter-spacing: -.02em;
    margin: 16px 0 10px;
}

.legal-hero p {
    color: rgba(255,255,255,.72);
    font-size: 16.5px;
    margin: 0 0 18px;
}

.legal-updated {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: rgba(255,255,255,.45);
}

/*---------- Layout ----------*/

.legal-page {
    padding: 48px 0 90px;
    background: #fff;
}

.legal-layout {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 56px;
    align-items: start;
    max-width: 980px;
    margin: 0 auto;
}

/*---------- Contents ----------*/

.legal-toc {
    position: sticky;
    top: 100px;
    min-width: 0;
}

.legal-toc-head {
    display: block;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-light);
    margin-bottom: 14px;
}

.legal-toc nav {
    display: flex;
    flex-direction: column;
    /* A hairline the active marker slides along, rather than a border on
       each link — one continuous line reads as a single index. */
    border-left: 2px solid var(--border);
}

.legal-toc a {
    padding: 8px 0 8px 16px;
    margin-left: -2px;
    border-left: 2px solid transparent;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text-light);
    transition: color .2s ease, border-color .2s ease;
}

    .legal-toc a:hover {
        color: var(--primary);
    }

    .legal-toc a.active {
        color: var(--primary);
        border-left-color: var(--accent);
        font-weight: 600;
    }

/*---------- Document ----------*/

.legal-doc {
    min-width: 0;
    max-width: 660px;
}

.legal-draft {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 15px 18px;
    margin-bottom: 12px;
    background: rgba(245,158,11,.07);
    border: 1px solid rgba(245,158,11,.25);
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--accent-dark);
}

    .legal-draft i {
        font-size: 16px;
        flex-shrink: 0;
        margin-top: 2px;
    }

.legal-section {
    padding-top: 40px;
    /* Offsets the fixed nav when jumping to an anchor, so the heading does
       not land underneath it. */
    scroll-margin-top: 100px;
}

    .legal-section h2 {
        font-size: 24px;
        letter-spacing: -.01em;
        margin: 0 0 16px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--border);
        color: var(--dark);
    }

    .legal-section h3 {
        font-size: 16px;
        font-weight: 700;
        color: var(--dark);
        margin: 28px 0 10px;
    }

    .legal-section p {
        font-size: 16px;
        line-height: 1.85;
        color: var(--text-light);
        margin: 0 0 16px;
    }

    .legal-section a {
        color: var(--primary);
        font-weight: 600;
        text-decoration: underline;
        text-underline-offset: 2px;
    }

/* Numbered sections for the terms page. A CSS counter rather than numbers in
   the markup, so inserting a clause does not mean renumbering by hand. */
.legal-numbered {
    counter-reset: legal-section;
}

    .legal-numbered .legal-section h2 {
        counter-increment: legal-section;
        display: flex;
        align-items: baseline;
        gap: 12px;
    }

        .legal-numbered .legal-section h2::before {
            content: counter(legal-section);
            font-family: var(--font-mono);
            font-size: 15px;
            font-weight: 600;
            color: var(--accent);
        }

/*---------- Lists ----------*/

.legal-list {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}

    .legal-list li {
        position: relative;
        padding-left: 24px;
        margin-bottom: 10px;
        font-size: 15.5px;
        line-height: 1.75;
        color: var(--text-light);
    }

        /* A short rule rather than a bullet — quieter, and it echoes the
       eyebrow treatment used across the site. */
        .legal-list li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 12px;
            width: 11px;
            height: 2px;
            background: var(--accent);
            border-radius: 2px;
        }

        .legal-list li b {
            color: var(--text);
            font-weight: 700;
        }

/*---------- Callouts ----------*/

.legal-callout {
    padding: 16px 20px;
    margin: 0 0 18px;
    background: var(--light);
    border-left: 3px solid var(--primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 15px;
    line-height: 1.75;
    color: var(--text);
}

.legal-callout-warn {
    background: rgba(245,158,11,.06);
    border-left-color: var(--accent);
}

.legal-callout-good {
    background: rgba(34,197,94,.06);
    border-left-color: #22C55E;
}

.legal-note {
    font-size: 14.5px;
    color: var(--text-light);
    font-style: italic;
    margin: 0 0 16px;
}

/*---------- Split cards ----------*/

/* Two roles side by side rather than stacked paragraphs, because the whole
   point is the contrast between them. */
.legal-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 0 0 18px;
}

.legal-split-card {
    padding: 18px 20px;
    background: var(--light);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.legal-split-tag {
    display: block;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--secondary);
    margin-bottom: 8px;
}

.legal-split-card p {
    font-size: 14.5px;
    line-height: 1.7;
    margin: 0;
}

/*---------- Tables ----------*/

.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

    .legal-table th {
        text-align: left;
        padding: 11px 16px;
        background: var(--light);
        border-bottom: 1px solid var(--border);
        font-family: var(--font-mono);
        font-size: 10.5px;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--text-light);
        font-weight: 600;
    }

    .legal-table td {
        padding: 13px 16px;
        border-bottom: 1px solid var(--border);
        font-size: 14.5px;
        line-height: 1.6;
        color: var(--text-light);
        vertical-align: top;
    }

    .legal-table tr:last-child td {
        border-bottom: none;
    }

    .legal-table td:first-child {
        color: var(--text);
        font-weight: 600;
        width: 42%;
    }

/*---------- Footer ----------*/

.legal-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 56px;
    padding: 24px 28px;
    background: var(--light);
    border-radius: var(--radius);
}

    .legal-foot b {
        display: block;
        font-size: 16px;
        color: var(--dark);
        margin-bottom: 3px;
    }

    .legal-foot span {
        font-size: 14px;
        color: var(--text-light);
    }

/*---------- Responsive ----------*/

@media(max-width:900px) {
    .legal-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* The contents becomes a collapsible summary rather than disappearing —
       a mobile reader needs the index more, not less. */
    .legal-toc {
        position: static;
        margin-bottom: 28px;
        padding: 16px 18px;
        background: var(--light);
        border-radius: var(--radius-sm);
    }

        .legal-toc nav {
            border-left: none;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2px;
        }

        .legal-toc a {
            padding: 6px 0;
            margin-left: 0;
            border-left: none;
            font-size: 13px;
        }

            .legal-toc a.active {
                border-left: none;
            }

    .legal-split {
        grid-template-columns: 1fr;
    }

    .legal-hero h1 {
        font-size: 28px;
    }
}

@media(max-width:640px) {
    .legal-hero {
        padding: 118px 0 36px;
    }

    .legal-section h2 {
        font-size: 20px;
    }

    .legal-section p,
    .legal-list li {
        font-size: 15px;
    }

    .legal-table {
        font-size: 13px;
    }

        .legal-table td,
        .legal-table th {
            padding: 10px 12px;
        }

    .legal-toc nav {
        grid-template-columns: 1fr;
    }
}

.vat-toggle {
    display: inline-flex;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    overflow: hidden;
    font-size: .85rem;
}

.vat-toggle-btn {
    padding: 4px 12px;
    color: #475467;
    text-decoration: none;
}

    .vat-toggle-btn.active {
        background: #0b1e3d;
        color: #fff;
        font-weight: 600;
    }
/*==========================================================
SHOP PAGE — FIX OVERRIDES
Paste this block at the very end of your existing stylesheet
(after the SHOP section). CSS cascades, so these rules override
the originals below without you needing to hunt through the
6000-line file and edit in place.
==========================================================*/

/* FIX 1 — .btn-outline was using var(--dark) for its border and
   hover fill, which is #081827 (near-black). That's what made
   "Clear filters" and "Client Login" look black. Re-themed to
   the brand primary so it visually matches btn-primary. This
   affects every .btn-outline site-wide (by design — it's used
   as a matching pair with .btn-primary everywhere). */
.btn-outline {
    background: transparent;
    border: 1.5px solid var(--primary);
    color: var(--primary);
}

    .btn-outline:hover {
        background: var(--primary);
        color: #fff;
    }

/* FIX 2 — .shop-subhero (the "Mobile Phones / Showing results
   for..." breadcrumb bar) used flat background: var(--dark).
   Every other interior-page hero on the site uses var(--grad-hero)
   plus a soft radial glow — this brings the shop page in line. */
.shop-subhero {
    position: relative;
    overflow: hidden;
    background: var(--grad-hero);
    padding: 128px 0 34px;
}

    .shop-subhero::before {
        content: "";
        position: absolute;
        top: -160px;
        right: -120px;
        width: 420px;
        height: 420px;
        border-radius: 50%;
        background: radial-gradient(rgba(94,234,212,.16),transparent 70%);
        pointer-events: none;
    }

    .shop-subhero .container {
        position: relative;
        z-index: 2;
    }

/* FIX 3 — .vat-toggle-btn.active had a hardcoded background:
   #0b1e3d (not even a variable), so the "Excl. VAT" pill looked
   like a stray black chip. Rebuilt the whole toggle to match the
   pill/chip style used elsewhere (rounded pair, brand gradient
   for the active state). */
.vat-toggle {
    display: inline-flex;
    border: 1.5px solid var(--border);
    border-radius: 30px;
    overflow: hidden;
    font-size: 13px;
    background: #fff;
}

.vat-toggle-btn {
    padding: 8px 16px;
    color: var(--text-light);
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}

    .vat-toggle-btn:hover {
        color: var(--primary);
    }

    .vat-toggle-btn.active {
        background: linear-gradient(135deg,var(--primary),var(--primary-light));
        color: #fff;
    }

/* FIX 4 — .shop-assist-inner (the closing "Need something not
   listed?" banner) also used background: var(--dark). Swapped
   for the same hero gradient + glow treatment as the rest of the
   site's dark banners, so it doesn't read as an unstyled block. */
.shop-assist-inner {
    position: relative;
    overflow: hidden;
    background: var(--grad-hero);
    border-radius: var(--radius);
    padding: 28px 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    flex-wrap: wrap;
}

    .shop-assist-inner::before {
        content: "";
        position: absolute;
        top: -120px;
        right: -80px;
        width: 260px;
        height: 260px;
        border-radius: 50%;
        background: radial-gradient(rgba(47,128,237,.28),transparent 70%);
        pointer-events: none;
    }

    .shop-assist-inner > * {
        position: relative;
        z-index: 2;
    }

/* FIX 5 — the "Nothing matches" empty state used a flat grey
   funnel icon with no colour identity. Gave it a soft brand-tinted
   disc so the empty state doesn't feel broken/unstyled. */
.shop-empty {
    text-align: center;
    padding: 64px 24px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

    .shop-empty i {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 72px;
        height: 72px;
        margin: 0 auto 20px;
        border-radius: 50%;
        background: linear-gradient(135deg, rgba(10,77,140,.08), rgba(20,184,166,.08));
        color: var(--primary);
        font-size: 30px;
    }

    .shop-empty h3 {
        color: var(--dark);
    }

/* FIX 6 — filter apply / clear buttons and the sort list should
   feel like one system with the rest of the shop, not bare
   browser-default controls. Lightly themed without changing the
   markup you already have. */
.price-filter-inputs input:focus {
    box-shadow: 0 0 0 3px rgba(10,77,140,.1);
}

.filter-apply {
    font-weight: 700;
}

    .filter-apply:hover {
        box-shadow: 0 8px 18px rgba(10,77,140,.18);
    }

/* FIX 7 — form inputs on this page (search bar aside) should
   match the site's focus-ring treatment used in the contact form.
   Applies to price filter + any .form-control on shop pages. */
.shop-layout .form-control:focus,
.quote-form .form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(10,77,140,.1);
}