/* Styles for service2create.html only, moved out of the page so browsers can cache them (#15). */
        /* ══════════════════════════════════════════════════════════
           LATO — LOCAL fonts
        ══════════════════════════════════════════════════════════ */
        @font-face { font-family: 'Lato'; src: url('fonts/lato-light.woff2') format('woff2'), url('fonts/lato-light.ttf') format('truetype'); font-weight: 300; font-style: normal;  font-display: swap; }
        @font-face { font-family: 'Lato'; src: url('fonts/lato-lightitalic.woff2') format('woff2'), url('fonts/lato-lightitalic.ttf') format('truetype'); font-weight: 300; font-style: italic;  font-display: swap; }
        @font-face { font-family: 'Lato'; src: url('fonts/lato-regular.woff2') format('woff2'), url('fonts/lato-regular.ttf') format('truetype'); font-weight: 400; font-style: normal;  font-display: swap; }
        @font-face { font-family: 'Lato'; src: url('fonts/lato-bold.woff2') format('woff2'), url('fonts/lato-bold.ttf') format('truetype'); font-weight: 700; font-style: normal;  font-display: swap; }
        @font-face { font-family: 'Lato'; src: url('fonts/lato-black.woff2') format('woff2'), url('fonts/lato-black.ttf') format('truetype'); font-weight: 900; font-style: normal;  font-display: swap; }
        @font-face { font-family: 'Lato'; src: url('fonts/lato-blackitalic.woff2') format('woff2'), url('fonts/lato-blackitalic.ttf') format('truetype'); font-weight: 900; font-style: italic;  font-display: swap; }

        /* ══════════════════════════════════════════════════════════
           TOKENS
        ══════════════════════════════════════════════════════════ */
        :root {
            --prussian:    #02263F;
            --airforce:    #5F99BB;
            --veridian:    #138E32;
            --sky:         #ADDDF6;
            --alice:       #F0F6FA;
            --orange:      #E6532B;
            --yellow:      #EEAD00;
            --dark-grey:   #38484F;
            --light-grey:  #ABB2B6;
            --white:       #FFFFFF;
            --nav-h:       80px;
        }

        /* ══════════════════════════════════════════════════════════
           RESET & BASE
        ══════════════════════════════════════════════════════════ */
        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            font-family: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
            background: var(--prussian);
            color: var(--sky);
            overflow-x: hidden;
        }
        a { text-decoration: none; color: inherit; }
        ul { list-style: none; }
        img { max-width: 100%; display: block; }

        .page-wrap { position: relative; z-index: 1; }
        .container { max-width: 1240px; margin: 0 auto; padding: 0 48px; }

        /* ══════════════════════════════════════════════════════════
           NAV BAR
        ══════════════════════════════════════════════════════════ */
        .site-nav {
            position: fixed;
            top: 0; left: 0; right: 0;
            z-index: 1000;
            font-family: 'Lato', sans-serif;
        }
        .nav-bar {
            display: flex;
            align-items: center;
            height: var(--nav-h);
            padding: 0;
            position: relative;
            transition: box-shadow 0.4s ease;
        }
        .nav-bar::before {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(2, 38, 63, 0.94);
            backdrop-filter: blur(22px) saturate(1.6);
            -webkit-backdrop-filter: blur(22px) saturate(1.6);
            opacity: 0;
            transition: opacity 0.4s ease;
            pointer-events: none;
            z-index: 0;
        }
        .site-nav.scrolled .nav-bar::before { opacity: 1; }
        .site-nav.scrolled .nav-bar {
            box-shadow: 0 1px 0 rgba(95,153,187,0.12), 0 8px 40px rgba(0,0,0,0.45);
        }
        .nav-bar > * { position: relative; z-index: 1; }
        .nav-logo { display: flex; align-items: center; flex-shrink: 0; margin-right: 12px; flex-direction: column; align-items: flex-start; gap: 3px; }
        .nav-logo img { height: 26px; width: auto; display: block; }
        .nav-logo-divider { width: 1px; height: 22px; background: rgba(255,255,255,0.25); margin: 0 20px; flex-shrink: 0; }
        .nav-logo img.nav-logo-s2c { height: 10px; width: auto; display: block; opacity: 1; margin-top: 4px; position: relative; z-index: 2; }
        .nav-item {
            display: flex; align-items: center; gap: 4px;
            padding: 8px 10px; border-radius: 8px;
            font-size: 0.7rem; font-weight: 700;
            color: rgba(255,255,255,0.92);
            white-space: nowrap; cursor: pointer; letter-spacing: 0.03em;
            transition: background 0.18s, color 0.18s;
            border: none; background: none;
        }
        .nav-item .ti { font-size: 0.7rem; opacity: 0.6; transition: transform 0.22s; }
        .nav-item:hover, .nav-item.on { color: #fff; background: rgba(95,153,187,0.14); }
        .nav-item.on .ti-chevrons-down { transform: rotate(180deg); }
        .nav-inner {
            max-width: 1400px; margin: 0 auto; padding: 0 20px 0 24px;
            width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-between;
        }
        .nav-center {
            display: flex; align-items: center; gap: 2px;
            flex: 1; justify-content: center; margin: 0 6px;
        }
        .nav-divider { width: 1px; height: 18px; background: rgba(255,255,255,0.2); margin: 0 6px; }
        .nav-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
        .icon-btn {
            width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
            border-radius: 8px; border: none; background: none;
            color: rgba(255,255,255,0.7); font-size: 1.05rem; cursor: pointer;
            transition: background 0.18s, color 0.18s;
        }
        .icon-btn:hover, .icon-btn.on { background: rgba(95,153,187,0.14); color: #fff; }
        .lang-btn {
            display: flex; align-items: center; gap: 5px; padding: 7px 12px;
            border-radius: 30px; border: 1px solid rgba(95,153,187,0.25); background: none;
            font-family: 'Lato', sans-serif; font-size: 0.72rem; font-weight: 700;
            color: #fff; cursor: pointer; letter-spacing: 0.04em;
            transition: all 0.18s;
        }
        .lang-btn:hover, .lang-btn.on { background: rgba(95,153,187,0.12); border-color: rgba(95,153,187,0.45); color: #fff; }
        .cta-btn-secondary {
            padding: 7px 10px; border-radius: 30px; border: none;
            background: var(--sky);
            box-shadow: none;
            font-family: 'Lato', sans-serif; font-size: 0.72rem; font-weight: 700;
            color: var(--prussian); cursor: pointer; letter-spacing: 0.03em; transition: all 0.2s; white-space: nowrap;
        }
        .cta-btn-secondary:hover { transform: translateY(-1px); background: #c8eaf8; box-shadow: 0 6px 20px rgba(173,221,246,0.35); color: var(--prussian); }
        .cta-btn {
            padding: 7px 10px; border-radius: 30px; border: none;
            background: var(--orange);
            box-shadow: none;
            font-family: 'Lato', sans-serif; font-size: 0.72rem; font-weight: 700;
            color: #fff; cursor: pointer; letter-spacing: 0.03em; transition: all 0.2s; white-space: nowrap;
        }
        .cta-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(230,83,43,0.55); }
        .nav-mobile-toggle { display: none; flex-direction: column; gap: 5px; margin-left: auto; background: none; border: none; cursor: pointer; padding: 6px; }
        .nav-mobile-toggle span { display: block; width: 26px; height: 2px; background: #fff; border-radius: 2px; transition: all 0.25s; }

        /* Mega panels */
        .mega-panel {
            display: none; position: absolute; top: var(--nav-h); left: 0; right: 0;
            background: rgba(240, 246, 250, 0.98);
            backdrop-filter: blur(28px) saturate(1.5); -webkit-backdrop-filter: blur(28px) saturate(1.5);
            border-top: 1px solid rgba(2,38,63,0.08); border-bottom: 1px solid rgba(2,38,63,0.06);
            box-shadow: 0 24px 64px rgba(2,38,63,0.28); padding: 20px 40px 24px; animation: megaIn 0.2s ease;
        }
        .mega-panel.show { display: block; }
        @keyframes megaIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
        .mega-cols { display: flex; gap: 26px; flex-wrap: wrap; max-width: 1160px; margin: 0 auto; justify-content: center; }
        .mega-col { min-width: 140px; flex: 1; }
        .col-label { font-family: 'Lato', sans-serif; font-size: 0.6rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); margin-bottom: 9px; padding-bottom: 6px; border-bottom: 1px solid rgba(2,38,63,0.12); }
        .mega-link { display: flex; align-items: center; gap: 8px; font-family: 'Lato', sans-serif; font-size: 0.8rem; font-weight: 700; color: rgba(2,38,63,0.72); padding: 4px 0; cursor: pointer; transition: color 0.15s; line-height: 1.4; }
        .mega-link .ti { font-size: 0.82rem; color: var(--airforce); flex-shrink: 0; }
        .mega-link:hover { color: var(--prussian); }
        .mega-link.primary { color: var(--prussian); font-weight: 700; margin-bottom: 4px; }
        .mega-link.primary .ti { color: var(--airforce); }
        .url-hint { font-size: 0.6rem; color: rgba(2,38,63,0.4); font-family: 'Lato', sans-serif; margin: 1px 0 4px 20px; }
        .tag { display: inline-block; font-size: 0.6rem; font-weight: 900; background: var(--orange); color: #fff; padding: 1px 6px; border-radius: 20px; margin-left: 4px; letter-spacing: 0.04em; }
        .mega-footer { margin: 14px auto 0; padding-top: 11px; border-top: 1px solid rgba(2,38,63,0.1); display: flex; gap: 20px; flex-wrap: wrap; max-width: 1160px; justify-content: center; }
        .mega-footer-link { display: flex; align-items: center; gap: 6px; font-family: 'Lato', sans-serif; font-size: 0.74rem; font-weight: 700; color: var(--airforce); cursor: pointer; transition: color 0.15s; }
        .mega-footer-link:hover { color: var(--prussian); }
        .mega-divider { width: 1px; height: 14px; background: rgba(2,38,63,0.2); align-self: center; }
        #panel-platform .mega-footer { justify-content: flex-end; }
        #panel-platform .mega-footer-link { color: rgba(2,38,63,0.4); font-weight: 400; font-size: 0.68rem; }
        #panel-platform .mega-link { font-weight: 700; }
        #panel-solutions .mega-link { font-weight: 700; }
        #panel-solutions .mega-footer { justify-content: flex-end; }
        #panel-solutions .mega-footer-link { color: rgba(2,38,63,0.4); font-weight: 400; font-size: 0.68rem; }
        #panel-company .mega-link { font-weight: 700; }
        #panel-company .mega-footer { justify-content: flex-end; }
        #panel-company .mega-footer-link { color: rgba(2,38,63,0.4); font-weight: 400; font-size: 0.68rem; }
        #panel-nd .mega-link { font-weight: 700; }
        #panel-nd .mega-footer { justify-content: flex-end; }
        #panel-nd .mega-footer-link { color: rgba(2,38,63,0.4); font-weight: 400; font-size: 0.68rem; }
        #panel-resources .mega-link { font-weight: 700; }
        #panel-resources .mega-footer { justify-content: flex-end; }
        #panel-resources .mega-footer-link { color: rgba(2,38,63,0.4); font-weight: 400; font-size: 0.68rem; }
        #panel-docs .mega-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 40px; max-width: 1180px; margin: 0 auto; }
        #panel-docs .mega-link { font-weight: 700; }
        #panel-docs .mega-link .ti { margin-top: 2px; align-self: flex-start; }
        #panel-docs .mega-col:nth-child(5) { grid-column-start: 2; }

        /* Search panel */
        .search-panel { display: none; position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 999; background: rgba(2, 38, 63, 0.97); backdrop-filter: blur(28px) saturate(1.5); -webkit-backdrop-filter: blur(28px) saturate(1.5); border-top: 1px solid rgba(95,153,187,0.15); border-bottom: 1px solid rgba(95,153,187,0.1); box-shadow: 0 24px 64px rgba(0,0,0,0.55); padding: 24px 40px 28px; animation: megaIn 0.2s ease; }
        .search-panel.show { display: block; }
        .search-wrap { position: relative; }
        .search-wrap .ti { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 1.1rem; color: rgba(95,153,187,0.6); }
        .search-input { width: 100%; padding: 12px 16px 12px 42px; border-radius: 10px; border: 1px solid rgba(95,153,187,0.25); background: rgba(95,153,187,0.07); font-family: 'Lato', sans-serif; font-size: 1rem; font-weight: 400; color: #fff; outline: none; transition: border-color 0.2s; }
        .search-input::placeholder { color: rgba(173,221,246,0.4); }
        .search-input:focus { border-color: rgba(95,153,187,0.6); }
        .search-hints { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
        .search-hint { font-family: 'Lato', sans-serif; font-size: 0.8rem; font-weight: 700; color: rgba(173,221,246,0.7); padding: 5px 14px; border-radius: 20px; background: rgba(95,153,187,0.1); border: 1px solid rgba(95,153,187,0.18); cursor: pointer; transition: all 0.15s; }
        .search-hint:hover { background: rgba(95,153,187,0.2); color: #fff; }

        /* Language panel */
        .lang-panel { display: none; position: absolute; top: var(--nav-h); right: 40px; width: 480px; background: rgba(240,246,250,0.98); backdrop-filter: blur(28px) saturate(1.5); -webkit-backdrop-filter: blur(28px) saturate(1.5); border: 1px solid rgba(2,38,63,0.08); border-radius: 14px; box-shadow: 0 24px 64px rgba(2,38,63,0.28); padding: 20px; animation: megaIn 0.2s ease; }
        .lang-panel.show { display: block; }
        .lang-label { font-family: 'Lato', sans-serif; font-size: 0.65rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(2,38,63,0.12); }
        .lang-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
        .lang-opt { font-family: 'Lato', sans-serif; font-size: 0.88rem; font-weight: 400; color: rgba(2,38,63,0.72); padding: 8px 12px; border-radius: 8px; cursor: pointer; transition: all 0.15s; }
        .lang-opt:hover { background: rgba(95,153,187,0.14); color: var(--prussian); }
        .lang-opt.active { color: var(--prussian); font-weight: 700; background: rgba(95,153,187,0.18); }

        /* Nav inline search */
        .nav-search-wrap { position: relative; display: flex; align-items: center; }
        .nav-search-wrap .ti-search { position: absolute; left: 10px; font-size: 0.82rem; color: rgba(173,221,246,0.45); pointer-events: none; }
        .nav-search-input { width: 98px; padding: 7px 10px 7px 27px; border-radius: 30px; border: 1px solid rgba(95,153,187,0.22); background: rgba(95,153,187,0.07); font-family: 'Lato', sans-serif; font-size: 0.72rem; font-weight: 700; color: #fff; outline: none; transition: width 0.25s ease, border-color 0.2s, background 0.2s; }
        .nav-search-input::placeholder { color: #F0F8FF; }
        .nav-search-input:focus { width: 240px; border-color: rgba(95,153,187,0.55); background: rgba(95,153,187,0.12); }
        .lang-opt .ti { font-size: 0.75rem; margin-right: 4px; }

        /* ══════════════════════════════════════════════════════════
           PAGE STRUCTURE
        ══════════════════════════════════════════════════════════ */
        .page-spacer { height: var(--nav-h); }
        .hero-breadcrumb { position: absolute; top: calc(var(--nav-h) / 2 + 50px); left: 50%; transform: translateX(-50%); width: 100%; max-width: 1400px; padding: 0 24px 0 40px; z-index: 900; display: flex; align-items: center; gap: 8px; font-family: 'Lato', sans-serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: none; color: rgba(173,221,246,0.7); }

        .fancy-word {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-weight: 300;
            font-style: italic;
            font-size: 1.18em;
            letter-spacing: -0.01em;
        }

        /* Shared eyebrow + oversize heading (site convention) */
        .blog-eyebrow {
            font-family: 'Lato', sans-serif;
            font-size: clamp(0.65rem, 1.1vw, 0.85rem);
            font-weight: 900;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: var(--orange);
            display: block;
            margin-bottom: 12px;
        }
        .blog-oversize-heading {
            font-family: 'Lato', sans-serif;
            font-size: clamp(3rem, 7vw, 7rem);
            font-weight: 900;
            line-height: 0.92;
            letter-spacing: -0.03em;
            color: #ffffff;
            margin-bottom: 48px;
        }
        .blog-oversize-heading em {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-style: italic;
            font-weight: 300;
            font-size: 1.15em;
        }
        .blog-oversize-heading.prussian-text { color: var(--prussian); }

        /* Scroll-reveal */
        .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); }
        .reveal.in { opacity: 1; transform: translateY(0); }
        .reveal-d1 { transition-delay: 0.12s; --d: 0.12s; }
        .reveal-d2 { transition-delay: 0.24s; --d: 0.24s; }
        .reveal-d3 { transition-delay: 0.36s; --d: 0.36s; }
        .reveal-d4 { transition-delay: 0.48s; }
        @media (prefers-reduced-motion: reduce) {
            .reveal { opacity: 1; transform: none; transition: none; }
        }

        /* ══════════════════════════════════════════════════════════
           HERO — animated network canvas
        ══════════════════════════════════════════════════════════ */
        .s2c-hero {
            position: relative;
            min-height: calc(84vh - var(--nav-h));
            display: flex;
            align-items: center;
            overflow: hidden;
            background: var(--prussian);
        }
        /* Hero artwork — full composition, natural framing */
        .s2c-hero::before { content: none; }
        .s2c-hero > .hero-media { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center center;
            z-index: 0; }
        .s2c-hero::after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            background:
                linear-gradient(100deg, rgba(2,38,63,0.42) 0%, rgba(2,38,63,0.16) 52%, rgba(2,38,63,0.02) 100%),
                linear-gradient(180deg, rgba(2,38,63,0.06) 0%, transparent 22%, transparent 82%, rgba(2,38,63,0.45) 100%);
        }
        .hero-inner {
            position: relative;
            z-index: 2;
            width: 100%;
            padding: 140px 0 54px;
        }
        .hero-top { margin-bottom: 22px; }
        .hero-bottom {
            display: grid;
            grid-template-columns: 0.9fr 1.1fr;
            gap: 48px;
            align-items: start;
        }
        .hero-copy { display: flex; flex-direction: column; }
        /* Matches cloud.html .oversize-label so every S2C Platform hero
           carries the same eyebrow */
        .hero-eyebrow {
            display: block;
            font-family: 'Lato', sans-serif;
            font-size: clamp(0.85rem, 1.1vw, 1rem);
            font-weight: 900;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--orange);
            margin-bottom: 16px;
        }
        @keyframes dotPulse {
            0%   { box-shadow: 0 0 0 0 rgba(19,142,50,0.55); }
            70%  { box-shadow: 0 0 0 9px rgba(19,142,50,0); }
            100% { box-shadow: 0 0 0 0 rgba(19,142,50,0); }
        }
        .hero-heading {
            font-family: 'Lato', sans-serif;
            font-size: clamp(50px, 7vw, 104px);
            font-weight: 900;
            line-height: 1.02;
            letter-spacing: -0.035em;
            margin: 0;
        }
        .hero-heading .h-line {
            display: block;
            overflow: hidden;
            padding-bottom: 0.1em;
        }
        .hero-heading .h-word { white-space: nowrap; }
        .hero-heading .h-line:nth-child(2) { margin-top: 0.02em; }
        .hero-heading .h-word {
            display: inline-block;
            transform: translateY(110%);
            animation: wordUp 0.9s cubic-bezier(0.16,1,0.3,1) forwards;
            color: #ffffff;
        }
        .hero-heading .h-line:nth-child(1) .h-word { color: var(--prussian); }
        .hero-heading .fancy-word { color: var(--sky); font-size: 1.12em; }
        .hero-heading .fancy-line {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-weight: 300;
            font-style: italic;
            font-size: 1.14em;
            letter-spacing: -0.01em;
            color: var(--sky);
        }
        .hero-heading .h-line:nth-child(1) .h-word { animation-delay: 0.15s; }
        .hero-heading .h-line:nth-child(2) .h-word { animation-delay: 0.3s; }
        .hero-heading .h-line:nth-child(3) .h-word { animation-delay: 0.45s; }
        .hero-heading .h-with {
            margin-top: -0.06em;
        }
        .hero-heading .h-with .h-word {
            display: inline-flex;
            align-items: center;
        }
        .hero-heading .h-with img {
            height: 1.15em;
            width: auto;
        }
        @keyframes wordUp {
            to { transform: translateY(0); }
        }
        @media (prefers-reduced-motion: reduce) {
            .hero-heading .h-word { transform: none; animation: none; }
        }
        .hero-sub {
            font-size: 1.05rem;
            font-weight: 300;
            color: #ffffff;
            line-height: 1.7;
            max-width: 760px;
            margin-bottom: 14px;
            opacity: 0;
            animation: fadeUp 0.9s ease 0.7s forwards;
        }
        .hero-sub strong { font-weight: 700; color: #fff; }
        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(16px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .hero-ctas {
            display: flex;
            gap: 14px;
            flex-wrap: wrap;
            opacity: 0;
            animation: fadeUp 0.9s ease 1s forwards;
        }
        .hero-cta-main {
            display: inline-flex; align-items: center; gap: 9px;
            padding: 14px 32px; border-radius: 30px; border: none;
            background: linear-gradient(130deg, #b83d1a 0%, var(--orange) 100%);
            box-shadow: none;
            font-family: 'Lato', sans-serif; font-size: 0.95rem; font-weight: 700;
            color: #fff; cursor: pointer; letter-spacing: 0.03em; transition: all 0.22s;
        }
        .hero-cta-main:hover { transform: translateY(-2px); box-shadow: 0 12px 38px rgba(230,83,43,0.6); }
        .hero-cta-main .ti { font-size: 1rem; }
        .hero-cta-ghost {
            display: inline-flex; align-items: center; gap: 9px;
            padding: 14px 30px; border-radius: 30px;
            border: 1px solid rgba(173,221,246,0.4);
            background: rgba(2,38,63,0.4);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            font-family: 'Lato', sans-serif; font-size: 0.95rem; font-weight: 700;
            color: var(--sky); cursor: pointer; letter-spacing: 0.03em; transition: all 0.22s;
        }
        .hero-cta-ghost:hover { background: rgba(95,153,187,0.18); border-color: var(--sky); color: #fff; transform: translateY(-2px); }

        /* Hero monitor visual */
        .hero-visual {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 420px;
            margin-top: -56px;
        }
        /* Luminous halo sitting UNDER the screens */
        .hero-glow {
            position: relative;
            z-index: 0;
            width: 122%;
            height: 60px;
            margin-top: 10px;
            background: radial-gradient(ellipse at center, rgba(173,221,246,0.95) 0%, rgba(95,153,187,0.6) 40%, rgba(95,153,187,0.28) 62%, transparent 80%);
            filter: blur(28px);
            pointer-events: none;
        }
        .hero-visual .monitor-glow {
            position: absolute;
            width: 70%;
            height: 60%;
            top: 18%;
            left: 15%;
            background:
                radial-gradient(ellipse at 40% 40%, rgba(95,153,187,0.35) 0%, transparent 65%),
                radial-gradient(ellipse at 70% 65%, rgba(230,83,43,0.22) 0%, transparent 60%);
            filter: blur(46px);
        }
        .hero-visual img {
            position: relative;
            z-index: 1;
            width: 116%;
            max-width: none;
            filter: drop-shadow(0 40px 70px rgba(0,0,0,0.55));
            animation: fadeUp 1.1s ease 0.55s backwards;
        }
        @media (prefers-reduced-motion: reduce) {
            .hero-visual img { animation: none; }
        }
        .hero-scroll-hint {
            position: absolute;
            bottom: 26px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            color: rgba(173,221,246,0.5);
            font-size: 0.62rem;
            font-weight: 900;
            letter-spacing: 0.3em;
            text-transform: uppercase;
        }
        .hero-scroll-hint .chev {
            width: 11px; height: 11px;
            border-right: 2px solid currentColor;
            border-bottom: 2px solid currentColor;
            transform: rotate(45deg);
            animation: chevronPulseDown 1.6s ease-in-out infinite;
        }
        .hero-scroll-hint .chev:nth-child(2) { margin-top: -7px; animation-delay: 0.2s; }
        @keyframes chevronPulseDown {
            0%, 100% { opacity: 0.15; }
            50% { opacity: 0.9; }
        }
        /* section-transition scroll chevron (same motif as the hero, repeated at each section boundary) */
        .sec-chev { position: relative; height: 0; z-index: 5; pointer-events: none; color: rgba(2,38,63,0.45); }
        .sec-chev.on-dark { color: rgba(255,255,255,0.6); }
        .sec-chev.on-light { color: rgba(2,38,63,0.45); }
        .sec-chev span { position: absolute; left: 50%; width: 16px; height: 16px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: translateX(-50%) rotate(45deg); animation: chevronPulseDown 1.6s ease-in-out infinite; }
        .sec-chev span:nth-child(1) { top: -44px; }
        .sec-chev span:nth-child(2) { top: -34px; animation-delay: 0.2s; }
        :root[data-theme="dark"] .sec-chev.on-light { color: rgba(173,221,246,0.55); }

        /* ══════════════════════════════════════════════════════════
           INDUSTRY MARQUEE
        ══════════════════════════════════════════════════════════ */
        .industry-marquee {
            background: #011a2e;
            border-top: 1px solid rgba(95,153,187,0.14);
            border-bottom: 1px solid rgba(95,153,187,0.14);
            padding: 13px 0;
            position: relative;
        }
        .marquee-flex {
            display: flex;
            align-items: center;
            gap: 40px;
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }
        .marquee-viewport {
            flex: 1;
            min-width: 0;
            overflow: hidden;
            -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
        }
        .marquee-track {
            display: flex;
            width: max-content;
            animation: marqueeScroll 60s linear infinite;
        }
        .industry-marquee:hover .marquee-track { animation-play-state: paused; }
        @keyframes marqueeScroll {
            from { transform: translateX(0); }
            to   { transform: translateX(-50%); }
        }
        @media (prefers-reduced-motion: reduce) {
            .marquee-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
        }
        .marquee-set { display: flex; align-items: center; gap: 64px; padding-right: 64px; }
        .marquee-label {
            flex-shrink: 0;
            white-space: nowrap;
            text-align: left;
            font-size: 0.62rem;
            font-weight: 900;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: rgba(173,221,246,0.45);
        }
        @media (max-width: 820px) {
            .marquee-flex { flex-direction: column; align-items: flex-start; gap: 14px; padding: 0 20px; }
            .marquee-viewport { width: 100%; }
        }
        .logo-word {
            font-family: 'Lato', sans-serif;
            font-weight: 900;
            font-size: 1.3rem;
            letter-spacing: -0.01em;
            color: rgba(255,255,255,0.38);
            white-space: nowrap;
            filter: grayscale(1);
            transition: color 0.25s;
        }
        .logo-word:hover { color: rgba(255,255,255,0.85); }

        /* ══════════════════════════════════════════════════════════
           UNIFIED VIEW + STATS
        ══════════════════════════════════════════════════════════ */
        .unified-section {
            background: var(--prussian);
            padding: 110px 0 90px;
            position: relative;
            overflow: hidden;
        }
        .unified-section::before {
            content: '';
            position: absolute;
            width: 720px; height: 720px;
            border-radius: 50%;
            right: -280px; top: -180px;
            background: radial-gradient(circle, rgba(95,153,187,0.12) 0%, transparent 65%);
            pointer-events: none;
        }
        .unified-grid {
            display: grid;
            grid-template-columns: 1.15fr 0.85fr;
            gap: 72px;
            align-items: start;
        }
        .unified-body {
            font-size: 1.02rem;
            font-weight: 300;
            color: rgba(255,255,255,0.94);
            line-height: 1.8;
            margin-bottom: 22px;
            max-width: 560px;
        }
        .unified-body strong { color: #fff; font-weight: 700; }
        .unified-points { margin-top: 34px; display: flex; flex-direction: column; gap: 18px; }
        .u-point { display: flex; gap: 16px; align-items: flex-start; }
        .u-point-icon {
            width: 42px; height: 42px; flex-shrink: 0;
            border-radius: 12px;
            display: flex; align-items: center; justify-content: center;
            background: rgba(95,153,187,0.12);
            border: 1px solid rgba(95,153,187,0.25);
            color: var(--sky);
            font-size: 1.15rem;
        }
        .u-point h4 { font-size: 1rem; font-weight: 900; color: #fff; letter-spacing: -0.01em; margin-bottom: 4px; }
        .u-point p { font-size: 0.9rem; font-weight: 300; color: rgba(173,221,246,0.65); line-height: 1.65; }

        /* Stat tiles — same reversed-out treatment as cloud.html: light tiles on
           the dark frame, each opening with a full block of its own accent colour
           that the icon sits on */
        .stats-panel {
            display: flex;
            flex-direction: column;
            gap: 16px;
            position: sticky;
            top: calc(var(--nav-h) + 24px);
        }
        .stat-card {
            --accent: var(--airforce);
            background: rgba(255,255,255,0.94);
            backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
            /* no border: a 1px light edge sat outside the accent block and read as a
               white sliver down the left of every tile */
            border: none;
            border-radius: 16px; overflow: hidden;
            box-shadow: 0 14px 36px rgba(1,16,28,0.28);
            display: flex; align-items: stretch;
            transition: box-shadow 0.25s, background 0.25s, transform 0.25s;
        }
        /* --accent is the colour block, --ink the glyph and the figure */
        /* --ink set separately here: the pale sky block is right, but sky as the
           figure colour put "20+" at 1.45:1 on the white card */
        .stat-card.c-sky      { --accent: var(--sky); --ink: #2e6a8e; }
        .stat-card.c-airforce { --accent: var(--airforce); }
        /* a lighter blue than --prussian: with the accent block the same colour as
           the zone behind it, the card's rounded-corner anti-aliasing showed as a
           white hairline curve on the left corners */
        .stat-card.c-prussian { --accent: #134E78; }
        .stat-card.c-orange   { --accent: var(--orange); }
        .stat-card:hover { background: #fff; box-shadow: 0 22px 52px rgba(1,16,28,0.4); transform: translateX(4px); }
        /* Full-height block of accent, with the circle centred on it */
        .stat-icon {
            width: 96px; flex-shrink: 0; background: var(--accent);
            display: flex; align-items: center; justify-content: center;
        }
        .stat-icon .ti {
            width: 48px; height: 48px; border-radius: 50%;
            background: rgba(255,255,255,0.94);
            color: var(--ink, var(--accent)); font-size: 1.3rem;
            display: flex; align-items: center; justify-content: center;
        }
        .stat-content { padding: 24px 28px; }
        .stat-value {
            font-family: 'Lato', sans-serif;
            font-size: 2rem; font-weight: 900;
            color: var(--ink, var(--accent));
            line-height: 1; letter-spacing: -0.02em;
            margin-bottom: 4px;
            display: flex; align-items: baseline;
        }
        .stat-value .suffix { font-size: 0.7em; margin-left: 1px; }
        .stat-label { font-family: 'Lato', sans-serif; font-size: 0.85rem; font-weight: 300; color: rgba(2,38,63,0.72); line-height: 1.5; }
        /* The copy inside each tile rises a beat after the tile itself */
        .stat-card .stat-value, .stat-card .stat-label { opacity: 0; transform: translateY(12px); transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1); }
        .stat-card.in .stat-value, .stat-card.in .stat-label { opacity: 1; transform: translateY(0); }
        .stat-card.in .stat-value { transition-delay: calc(var(--d, 0s) + 0.18s); }
        .stat-card.in .stat-label { transition-delay: calc(var(--d, 0s) + 0.28s); }
        @media (prefers-reduced-motion: reduce) {
            .stat-card .stat-value, .stat-card .stat-label { opacity: 1; transform: none; transition: none; }
        }

        /* ══════════════════════════════════════════════════════════
           PRODUCT SHOWCASE — light zone, tabbed screens
        ══════════════════════════════════════════════════════════ */
        .showcase-zone {
            background: var(--alice);
            padding: 100px 0 110px;
            position: relative;
            overflow: hidden;
        }
        .showcase-grid {
            display: grid;
            grid-template-columns: 0.9fr 1.1fr;
            gap: 48px;
            align-items: center;
        }
        .showcase-intro {
            font-size: 1rem;
            font-weight: 300;
            color: var(--dark-grey);
            line-height: 1.75;
            max-width: 480px;
            margin-top: 26px;
        }
        .showcase-intro strong { color: var(--prussian); font-weight: 700; }
        .showcase-tabs { display: flex; flex-direction: column; gap: 14px; margin-top: 30px; }
        .show-tab {
            text-align: left;
            border: 1px solid rgba(2,38,63,0.1);
            border-radius: 16px;
            background: #fff;
            padding: 20px 24px;
            cursor: pointer;
            font-family: 'Lato', sans-serif;
            transition: all 0.25s;
            box-shadow: 0 2px 10px rgba(2,38,63,0.04);
            position: relative;
            overflow: hidden;
        }
        .show-tab::before {
            content: '';
            position: absolute;
            left: 0; top: 0; bottom: 0;
            width: 4px;
            background: var(--orange);
            transform: scaleY(0);
            transition: transform 0.3s ease;
            transform-origin: top;
        }
        .show-tab:hover { border-color: rgba(2,38,63,0.25); transform: translateX(3px); }
        .show-tab.active { border-color: rgba(230,83,43,0.4); box-shadow: 0 10px 30px rgba(2,38,63,0.12); }
        .show-tab.active::before { transform: scaleY(1); }
        .show-tab h4 {
            display: flex; align-items: center; gap: 10px;
            font-size: 1rem; font-weight: 900; color: var(--prussian); letter-spacing: -0.01em;
        }
        .show-tab h4 .ti { color: var(--airforce); font-size: 1.15rem; }
        .show-tab.active h4 .ti { color: var(--orange); }
        .show-tab p {
            font-size: 0.86rem; font-weight: 300; color: var(--dark-grey); line-height: 1.6;
            max-height: 0; overflow: hidden; opacity: 0;
            transition: max-height 0.35s ease, opacity 0.35s ease, margin-top 0.35s ease;
        }
        .show-tab.active p { max-height: 120px; opacity: 1; margin-top: 8px; }
        .showcase-visual {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .showcase-visual::before {
            content: '';
            position: absolute;
            width: 76%; height: 68%;
            top: 14%; left: 12%;
            border-radius: 40px;
            background:
                radial-gradient(ellipse at 30% 30%, rgba(95,153,187,0.3) 0%, transparent 60%),
                radial-gradient(ellipse at 75% 70%, rgba(230,83,43,0.15) 0%, transparent 55%);
            filter: blur(38px);
        }
        .showcase-screens { position: relative; width: 100%; }
        .showcase-screens img {
            width: 100%;
            filter: drop-shadow(0 30px 50px rgba(2,38,63,0.28));
            transition: opacity 0.5s ease, transform 0.5s ease;
            position: absolute;
            inset: 0;
            opacity: 0;
            transform: scale(0.97);
            pointer-events: none;
        }
        .showcase-screens img.current {
            position: relative;
            opacity: 1;
            transform: scale(1);
            pointer-events: auto;
        }
        .showcase-footer {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 28px;
            flex-wrap: wrap;
            margin-top: 56px;
            padding-top: 28px;
            border-top: 1px solid rgba(2,38,63,0.1);
        }
        .showcase-footer-note {
            font-size: 0.88rem;
            font-weight: 300;
            color: var(--dark-grey);
        }
        .showcase-footer-note strong { color: var(--prussian); font-weight: 700; }
        .showcase-footer-link {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            font-size: 0.88rem;
            font-weight: 700;
            color: var(--orange);
            letter-spacing: 0.03em;
            transition: gap 0.2s, color 0.2s;
        }
        .showcase-footer-link:hover { gap: 12px; color: #b83d1a; }

        /* ══════════════════════════════════════════════════════════
           AI ASSISTANT — dark zone with live chat demo
        ══════════════════════════════════════════════════════════ */
        .ai-zone {
            background:
                radial-gradient(ellipse at 15% 20%, rgba(95,153,187,0.14) 0%, transparent 55%),
                radial-gradient(ellipse at 88% 80%, rgba(230,83,43,0.1) 0%, transparent 50%),
                linear-gradient(175deg, #011a2e 0%, var(--prussian) 60%, #012743 100%);
            padding: 110px 0;
            position: relative;
            overflow: hidden;
        }
        .ai-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 64px;
            align-items: center;
        }
        .ai-lead {
            font-size: 1.02rem;
            font-weight: 300;
            color: rgba(173,221,246,0.8);
            line-height: 1.8;
            margin-bottom: 30px;
            max-width: 500px;
        }
        .ai-lead strong { color: #fff; font-weight: 700; }
        /* What the assistant does — a plain ruled list rather than a ragged
           row of pills */
        .ai-features {
            list-style: none;
            margin: 0; padding: 0;
            max-width: 500px;
        }
        /* dividers between items only, none top or bottom */
        .ai-features li + li { border-top: 1px solid rgba(95,153,187,0.22); }
        .ai-features li {
            display: flex; align-items: center; gap: 14px;
            padding: 13px 2px;
            font-size: 0.92rem;
            font-weight: 400;
            color: #fff;
            letter-spacing: 0.01em;
            transition: color 0.2s, padding-left 0.2s;
        }
        .ai-features li .ti {
            font-size: 1.05rem;
            color: var(--orange);
            flex-shrink: 0;
            width: 22px;
            text-align: center;
        }
        .ai-features li:hover { color: var(--sky); padding-left: 6px; }

        /* Chat window — fixed static footprint (no layout shift as messages arrive) */
        .ai-chat {
            border-radius: 22px;
            background: rgba(1, 22, 40, 0.75);
            border: 1px solid rgba(95,153,187,0.25);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            box-shadow: 0 30px 80px rgba(0,0,0,0.5), inset 0 1px 0 rgba(173,221,246,0.08);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        .ai-chat-bar {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 16px 22px;
            border-bottom: 1px solid rgba(95,153,187,0.15);
            background: rgba(2,38,63,0.6);
        }
        .ai-chat-bar .ai-avatar {
            width: 34px; height: 34px;
            border-radius: 10px;
            background: linear-gradient(135deg, var(--orange) 0%, #b83d1a 100%);
            display: flex; align-items: center; justify-content: center;
            color: #fff; font-size: 1.05rem;
            box-shadow: 0 4px 14px rgba(230,83,43,0.4);
        }
        .ai-chat-bar h5, .ai-chat-bar h3 { font-size: 0.9rem; font-weight: 900; color: #fff; letter-spacing: 0.01em; }
        .ai-chat-bar span { font-size: 0.68rem; font-weight: 700; color: var(--orange); display: flex; align-items: center; gap: 5px; letter-spacing: 0.08em; text-transform: uppercase; }
        .ai-chat-bar span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); animation: dotPulse 2s ease-out infinite; }
        .ai-chat-bar .bar-meta { margin-left: auto; display: flex; gap: 6px; }
        .ai-chat-bar .bar-meta i { width: 9px; height: 9px; border-radius: 50%; background: rgba(173,221,246,0.15); }
        .ai-chat-body {
            padding: 26px 22px;
            height: 400px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            gap: 16px;
            justify-content: flex-end;
        }
        .chat-msg {
            max-width: 85%;
            padding: 13px 18px;
            border-radius: 16px;
            font-size: 0.88rem;
            line-height: 1.6;
            animation: msgIn 0.4s cubic-bezier(0.16,1,0.3,1);
        }
        @keyframes msgIn {
            from { opacity: 0; transform: translateY(12px) scale(0.97); }
            to   { opacity: 1; transform: translateY(0) scale(1); }
        }
        .chat-msg.user {
            align-self: flex-end;
            background: rgba(95,153,187,0.22);
            border: 1px solid rgba(95,153,187,0.3);
            color: #fff;
            font-weight: 400;
            border-bottom-right-radius: 4px;
        }
        .chat-msg.bot {
            align-self: flex-start;
            background: rgba(2,38,63,0.7);
            border: 1px solid rgba(230,83,43,0.3);
            color: var(--sky);
            font-weight: 300;
            border-bottom-left-radius: 4px;
        }
        .chat-msg.bot strong { color: #fff; font-weight: 700; }
        .chat-msg.bot .ti { color: var(--orange); margin-right: 6px; }
        .chat-typing {
            align-self: flex-start;
            display: flex;
            gap: 5px;
            padding: 14px 18px;
            border-radius: 16px;
            border-bottom-left-radius: 4px;
            background: rgba(2,38,63,0.7);
            border: 1px solid rgba(95,153,187,0.2);
        }
        .chat-typing i {
            width: 7px; height: 7px; border-radius: 50%;
            background: var(--airforce);
            animation: typingBounce 1.2s ease-in-out infinite;
        }
        .chat-typing i:nth-child(2) { animation-delay: 0.15s; }
        .chat-typing i:nth-child(3) { animation-delay: 0.3s; }
        @keyframes typingBounce {
            0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
            30% { transform: translateY(-5px); opacity: 1; }
        }
        .ai-chat-input {
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 0 22px 22px;
            padding: 13px 20px;
            border-radius: 30px;
            border: 1px solid rgba(95,153,187,0.28);
            background: rgba(2,38,63,0.55);
        }
        .ai-chat-input .cursor-line {
            flex: 1;
            min-width: 0;
            font-size: 0.88rem;
            font-weight: 400;
            color: rgba(173,221,246,0.85);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .ai-chat-input .cursor-line::after {
            content: '';
            display: inline-block;
            width: 2px; height: 1em;
            background: var(--sky);
            margin-left: 2px;
            vertical-align: text-bottom;
            animation: caretBlink 0.9s steps(1) infinite;
        }
        @keyframes caretBlink { 50% { opacity: 0; } }
        .ai-chat-input .send-orb {
            width: 34px; height: 34px; flex-shrink: 0;
            border-radius: 50%;
            background: var(--orange);
            display: flex; align-items: center; justify-content: center;
            color: #fff; font-size: 0.95rem;
            box-shadow: 0 4px 14px rgba(230,83,43,0.45);
        }

        /* ══════════════════════════════════════════════════════════
           MODULES GRID — white zone
        ══════════════════════════════════════════════════════════ */
        .modules-zone {
            background: #ffffff;
            padding: 100px 0 110px;
        }
        .modules-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
            gap: 18px;
        }
        /* Each module page's hero image sits in a band across the top of its tile,
           completely unwashed, with the copy on solid prussian beneath. This is what
           lets the artwork read at full strength: no overlay is needed because no
           text sits on top of it. */
        .module-card {
            border-radius: 18px;
            padding: 0;
            background: var(--prussian);
            border: 1px solid rgba(95,153,187,0.28);
            box-shadow: 0 2px 12px rgba(2,38,63,0.18);
            transition: all 0.28s cubic-bezier(0.16,1,0.3,1);
            position: relative;
            overflow: hidden;
            cursor: pointer;
            display: flex; flex-direction: column;
        }
        .module-shot {
            height: 132px; flex-shrink: 0;
            background: var(--card-img) center / cover no-repeat;
            border-bottom: 1px solid rgba(95,153,187,0.22);
        }
        .module-body { padding: 0 24px 26px; display: flex; flex-direction: column; flex: 1; }
        /* each tile carries the hero image from its own module page */
        .module-card:nth-child(1)  { --card-img: url('images/core-hero-right.webp'); }                                      /* Core Inventory */
        .module-card:nth-child(2)  { --card-img: url('images/service2create-global-network-inventory.webp'); }                                                   /* GIS */
        .module-card:nth-child(3)  { --card-img: url('images/ip-management-module-network.webp'); }                                            /* IP Management */
        .module-card:nth-child(4)  { --card-img: url('images/subsea-cable-network-inventory-use-case.webp'); }                                                    /* Leased Line */
        .module-card:nth-child(5)  { --card-img: url('images/blue-orange-light-speed-lines-tile.webp'); }                                                   /* Telephone Numbers */
        .module-card:nth-child(6)  { --card-img: url('images/hero-neon-integration.webp'); }                                /* Integration */
        .module-card:nth-child(7)  { --card-img: url('images/reporting-dashboard-module.webp'); }                                         /* Reporting & Dashboards */
        .module-card:nth-child(8)  { --card-img: url('images/order-trouble-ticket-module.webp'); } /* Orders & Trouble Tickets */
        .module-card:nth-child(9)  { --card-img: url('images/impact-analysis-module-network-connections.webp'); }         /* Impact Analysis */
        .module-card:nth-child(10) { --card-img: url('images/smart-warehouse-digital-inventory-tile.jpg'); }                                           /* Warehouse & Spares */
        .module-card:hover {
            transform: translateY(-6px);
            border-color: rgba(173,221,246,0.75);
            box-shadow: 0 18px 44px rgba(1,16,28,0.5);
        }
        /* the icon straddles the image band and the copy below it */
        .module-icon {
            width: 46px; height: 46px;
            border-radius: 13px;
            display: flex; align-items: center; justify-content: center;
            background: var(--prussian);
            border: 1px solid rgba(173,221,246,0.3);
            color: var(--sky);
            font-size: 1.3rem;
            margin: -23px 0 16px;
            position: relative; z-index: 1;
            transition: all 0.28s;
        }
        .module-card:hover .module-icon {
            background: var(--airforce);
            border-color: var(--airforce);
            color: #fff;
            box-shadow: 0 8px 20px rgba(95,153,187,0.45);
        }
        .module-card h4, .module-card h3 {
            font-size: 1rem; font-weight: 900; color: #fff;
            letter-spacing: -0.015em; line-height: 1.25; margin-bottom: 8px;
        }
        .module-card p {
            font-size: 0.82rem; font-weight: 300; color: rgba(255,255,255,0.9); line-height: 1.55;
        }
        .module-card .mod-arrow {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            /* auto, not a fixed gap: pushes Explore to the bottom of the body so it
               lands on the same line across all ten tiles regardless of how many
               lines the description runs to */
            margin-top: auto;
            align-self: flex-end;
            padding-top: 14px;
            font-size: 0.74rem;
            font-weight: 700;
            color: var(--orange);
            letter-spacing: 0.05em;
            transition: color 0.2s, gap 0.2s;
        }
        /* the chevron glyph sits high against the cap height of the label, so nudge
           it down to sit optically on the same line */
        .module-card .mod-arrow .ti { transform: translateY(1.5px); }
        .module-card:hover .mod-arrow { color: #fff; gap: 9px; }
        /* the heading sits inside this row (only the eyebrow is above it); the
           right-hand CTA stack that sat alongside it is parked for Phase 2 */
        .modules-intro {
            display: flex; align-items: flex-start; justify-content: flex-start;
            gap: 56px; flex-wrap: wrap; margin-bottom: 48px;
        }
        .modules-intro-main { flex: 1 1 520px; min-width: 0; }
        .modules-intro-copy {
            font-size: 1.02rem; font-weight: 300; color: var(--dark-grey);
            line-height: 1.75; max-width: 560px;
        }
        .modules-intro-copy strong { color: var(--prussian); font-weight: 700; }

        /* ══════════════════════════════════════════════════════════
           GIS SPOTLIGHT — alice zone
        ══════════════════════════════════════════════════════════ */
        .gis-zone {
            background: var(--alice);
            padding: 100px 0 110px;
            overflow: hidden;
        }
        .gis-grid {
            display: grid;
            grid-template-columns: 1.05fr 0.95fr;
            gap: 56px;
            /* top-aligned, so the feature panel sits up level with the section
               intro rather than being centred against the taller video column */
            align-items: start;
        }
        .gis-visual {
            position: relative;
            border-radius: 22px;
            overflow: hidden;
            box-shadow: 0 30px 70px rgba(2,38,63,0.25);
            border: 1px solid rgba(2,38,63,0.1);
        }
        .gis-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
        .gis-visual:hover img { transform: scale(1.04); }
        .gis-visual .gis-badge {
            position: absolute;
            top: 20px; left: 20px;
            display: inline-flex; align-items: center; gap: 8px;
            padding: 8px 16px;
            border-radius: 30px;
            background: rgba(2,38,63,0.8);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1px solid rgba(173,221,246,0.3);
            font-size: 0.7rem; font-weight: 900;
            letter-spacing: 0.14em; text-transform: uppercase;
            color: #fff;
        }
        .gis-badge .ti { color: var(--orange); }
        .gis-feature-list { display: flex; flex-direction: column; gap: 6px; margin-top: 30px; }
        .gis-feat {
            display: flex; gap: 15px; align-items: flex-start;
            padding: 14px 16px;
            border-radius: 14px;
            transition: background 0.2s;
        }
        .gis-feat:hover { background: rgba(95,153,187,0.1); }
        .gis-feat .ti {
            font-size: 1.2rem;
            color: var(--veridian);
            flex-shrink: 0;
            margin-top: 2px;
        }
        .gis-feat h4, .gis-feat h3 { font-size: 0.95rem; font-weight: 900; color: var(--prussian); margin-bottom: 3px; letter-spacing: -0.01em; }
        .gis-feat p { font-size: 0.86rem; font-weight: 300; color: var(--dark-grey); line-height: 1.6; }

        /* ══════════════════════════════════════════════════════════
           BENEFITS — dark zone, numbered rows
        ══════════════════════════════════════════════════════════ */
        .benefits-zone {
            background: var(--prussian);
            padding: 110px 0 90px;
            position: relative;
            overflow: hidden;
        }
        /* Artwork across the top of the section, full width, no overlay at all.
           Melanie asked for the blue removed completely so the raw image can be
           judged before deciding what it needs. */
        .benefits-zone::before {
            content: '';
            position: absolute;
            inset: 0;
            /* the hero's own artwork, flipped top-to-bottom only (the left-to-right
               mirror was applied then flipped back). Scrim lives on ::after so it
               stays upright. */
            background: url('images/service2create-network-inventory-platform.webp') center center / cover no-repeat;
            transform: scale(1, -1);
            pointer-events: none;
        }
        /* One even wash, top to bottom. There used to be a second 270deg gradient
           laying blue in from the right edge (0.62 fading out by 70%) to knock back
           the yellow end of the artwork — it read as a dirty cast over the picture
           and is gone. Do not reinstate it. */
        .benefits-zone::after {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            /* Kept deliberately minimal at Melanie's call — she reads the rows fine
               at this level and the artwork is the point. WCAG-wise the small desc
               copy wants ~0.65 here, so 0.35 is a judgement call in favour of the
               picture, not an oversight. Don't raise it back without asking. */
            background: linear-gradient(180deg,
                rgba(2,38,63,0) 0%,
                rgba(2,38,63,0.10) 14%,
                rgba(2,38,63,0.22) 25%,
                rgba(2,38,63,0.30) 32%,
                rgba(2,38,63,0.35) 37%,
                rgba(2,38,63,0.35) 100%);
        }
        .benefits-zone > .container { position: relative; z-index: 1; }
        /* the eyebrow and heading sit over the artwork, so they carry their own
           contrast. The eyebrow is white here rather than the site's orange: it is
           the smallest type on the page and orange peaks at 2.85 over this artwork,
           where white reaches 11+ */
        .benefits-zone .blog-eyebrow { color: #fff; }
        .benefits-zone .blog-eyebrow,
        .benefits-zone .blog-oversize-heading { text-shadow: 0 1px 4px rgba(1,16,28,0.24); }
        .benefit-rows { display: flex; flex-direction: column; }
        .benefit-row {
            display: grid;
            grid-template-columns: 120px 1fr 1.2fr;
            gap: 36px;
            align-items: center;
            padding: 22px 8px;
            border-top: 1px solid rgba(95,153,187,0.14);
            transition: background 0.25s, padding 0.25s;
        }
        .benefit-row:last-child { border-bottom: 1px solid rgba(95,153,187,0.14); }
        .benefit-row:hover { background: rgba(95,153,187,0.05); padding-left: 20px; }
        .benefit-num {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-style: italic;
            font-weight: 300;
            font-size: clamp(3.4rem, 5vw, 5rem);
            line-height: 1;
            color: var(--prussian);
            transition: color 0.25s;
        }
        .benefit-row:hover .benefit-num { color: #fff; }
        .benefit-title {
            font-size: clamp(1.4rem, 2.2vw, 1.9rem);
            font-weight: 900;
            letter-spacing: -0.02em;
            /* sky, not orange: orange needs background luminance <= 0.044 over this
               artwork, i.e. a ~0.96 wash. A light ink lets the wash stay minimal. */
            color: var(--sky);
            line-height: 1.15;
        }
        .benefit-desc {
            font-size: 0.95rem;
            font-weight: 300;
            color: rgba(255,255,255,0.9);
            line-height: 1.7;
        }
        .benefit-desc strong { color: #fff; font-weight: 700; }
        /* The two CTAs sit under the section heading now, as solid buttons. Both are
           filled rather than ghosted: an outlined button disappears against artwork
           this busy, which is why the S2C Designer pair was reversed out too. */
        .benefits-cta { display: flex; flex-wrap: wrap; gap: 14px; margin: -18px 0 62px; }
        .bcta-primary, .bcta-secondary {
            display: inline-flex; align-items: center; gap: 9px;
            padding: 14px 30px; border-radius: 30px;
            font-family: 'Lato', sans-serif; font-size: 0.92rem; font-weight: 700;
            letter-spacing: 0.03em; text-decoration: none; white-space: nowrap;
            transition: all 0.22s;
        }
        .bcta-primary {
            background: var(--sky); border: 1.5px solid var(--sky); color: var(--prussian);
            box-shadow: 0 6px 22px rgba(173,221,246,0.28);
        }
        .bcta-primary:hover { background: #fff; border-color: #fff; transform: translateY(-2px); box-shadow: 0 12px 32px rgba(173,221,246,0.42); }
        .bcta-secondary {
            background: rgba(2,38,63,0.92); border: 1px solid rgba(173,221,246,0.26); color: var(--sky);
            box-shadow: 0 6px 22px rgba(1,16,28,0.35);
        }
        .bcta-secondary:hover { background: var(--prussian); border-color: rgba(173,221,246,0.5); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 32px rgba(1,16,28,0.5); }
        .bcta-primary .ti, .bcta-secondary .ti { font-size: 1rem; }

        /* ══════════════════════════════════════════════════════════
           FAQ — dark zone accordion
        ══════════════════════════════════════════════════════════ */
        .faq-zone {
            background: #011a2e;
            padding: 100px 0 110px;
            border-top: 1px solid rgba(95,153,187,0.1);
        }
        .faq-grid {
            display: grid;
            grid-template-columns: 0.8fr 1.2fr;
            gap: 64px;
            align-items: start;
        }
        .faq-side { position: sticky; top: calc(var(--nav-h) + 24px); }
        .faq-side-note {
            font-size: 0.95rem;
            font-weight: 300;
            color: rgba(255,255,255,0.94);
            line-height: 1.75;
            max-width: 380px;
            margin-bottom: 26px;
        }
        .faq-side-note strong { color: #fff; font-weight: 700; }
        /* Flat filled blue button */
        .faq-all-link {
            display: inline-flex; align-items: center; gap: 9px;
            padding: 14px 30px; border-radius: 30px;
            border: none;
            background: var(--airforce);
            box-shadow: 0 6px 22px rgba(95,153,187,0.32);
            font-family: 'Lato', sans-serif; font-size: 0.95rem; font-weight: 700;
            color: #fff; cursor: pointer; letter-spacing: 0.03em;
            text-decoration: none; white-space: nowrap;
            transition: all 0.22s;
        }
        .faq-all-link:hover { background: #4d88ab; transform: translateY(-2px); box-shadow: 0 12px 34px rgba(95,153,187,0.45); }
        .faq-all-link .ti { font-size: 1rem; }
        .faq-list { display: flex; flex-direction: column; gap: 12px; }
        .faq-item {
            border-radius: 16px;
            border: 1px solid rgba(95,153,187,0.16);
            background: rgba(95,153,187,0.05);
            overflow: hidden;
            transition: border-color 0.25s, background 0.25s;
        }
        .faq-item.open { border-color: rgba(230,83,43,0.4); background: rgba(95,153,187,0.08); }
        .faq-q {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            padding: 20px 24px;
            border: none;
            background: none;
            cursor: pointer;
            text-align: left;
            font-family: 'Lato', sans-serif;
            font-size: 1rem;
            font-weight: 700;
            color: #fff;
            letter-spacing: -0.01em;
            transition: color 0.2s;
        }
        .faq-q:hover { color: var(--sky); }
        .faq-q .faq-chev {
            width: 30px; height: 30px; flex-shrink: 0;
            border-radius: 50%;
            border: 1px solid rgba(95,153,187,0.3);
            display: flex; align-items: center; justify-content: center;
            color: var(--airforce);
            font-size: 0.85rem;
            transition: transform 0.3s ease, background 0.25s, color 0.25s, border-color 0.25s;
        }
        .faq-item.open .faq-chev {
            transform: rotate(180deg);
            background: var(--orange);
            border-color: var(--orange);
            color: #fff;
        }
        .faq-a {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease;
        }
        .faq-a-inner {
            padding: 0 24px 22px;
            font-size: 0.92rem;
            font-weight: 300;
            color: rgba(173,221,246,0.75);
            line-height: 1.75;
        }
        .faq-a-inner strong { color: #fff; font-weight: 700; }
        @media (max-width: 1100px) {
            .faq-grid { grid-template-columns: 1fr; gap: 40px; }
            .faq-side { position: static; }
        }

        /* ══════════════════════════════════════════════════════════
           VIDEO PLACEHOLDER (reusable)
        ══════════════════════════════════════════════════════════ */
        .video-ph {
            position: relative;
            border-radius: 16px;
            overflow: hidden;
            aspect-ratio: 16 / 9;
            background:
                radial-gradient(ellipse at 65% 30%, rgba(95,153,187,0.22) 0%, transparent 60%),
                linear-gradient(150deg, #02344f 0%, #011a2e 100%);
            border: 1px solid rgba(95,153,187,0.22);
            display: flex; align-items: center; justify-content: center;
            cursor: pointer;
            transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
        }
        .video-ph:hover { border-color: rgba(95,153,187,0.55); transform: translateY(-3px); box-shadow: 0 18px 44px rgba(0,0,0,0.35); }
        .video-ph .vp-play {
            width: 56px; height: 56px; border-radius: 50%;
            background: rgba(230,83,43,0.95);
            display: flex; align-items: center; justify-content: center;
            color: #fff; font-size: 1.4rem;
            box-shadow: 0 10px 30px rgba(230,83,43,0.5);
            transition: transform 0.25s;
            z-index: 1;
        }
        .video-ph .vp-play i { margin-left: 3px; }
        .video-ph:hover .vp-play { transform: scale(1.12); }
        /* A real clip inside the same shell (mirrors about.html's office video):
           the <video> fills the 16:9 box beneath the button and label; once
           playing, the big button and the caption fade so the native controls
           are unobstructed. The shell's gradient shows until the first frame decodes. */
        .video-ph video {
            position: absolute; inset: 0;
            width: 100%; height: 100%;
            object-fit: cover; border-radius: 16px;
            display: block; cursor: pointer;
        }
        .video-ph .vp-play { transition: transform 0.25s, opacity 0.3s; }
        .video-ph .vp-play.hidden { opacity: 0; pointer-events: none; }
        .video-ph .vp-label { transition: opacity 0.3s; }
        .video-ph.playing .vp-label { opacity: 0; }
        .video-ph.has-video { aspect-ratio: 1782 / 780; }
        .video-ph.has-video video { object-fit: contain; background: #011a2e; }
        .video-ph.vp-169 { aspect-ratio: 16 / 9; }
        .video-ph.vp-169 video { object-fit: cover; background: #011a2e; }
        .video-ph .vp-label {
            position: absolute; bottom: 14px; left: 16px;
            font-size: 0.66rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase;
            color: rgba(173,221,246,0.65);
            z-index: 1;
        }
        .vp-caption { margin-top: 14px; font-size: 0.98rem; font-weight: 900; color: #fff; letter-spacing: -0.01em; }
        .vp-sub { margin-top: 4px; font-size: 0.84rem; font-weight: 300; color: rgba(173,221,246,0.6); line-height: 1.5; }

        .platform-videos {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 22px;
            margin-top: 68px;
        }
        .platform-videos.single { grid-template-columns: 1fr; max-width: 880px; margin-left: auto; margin-right: auto; }
        .video-ph[data-yt] img, .video-ph[data-yt] iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; border-radius: 16px; }
        .video-ph[data-yt].playing { transform: none; }

        /* ══════════════════════════════════════════════════════════
           OSS / BSS LAYERS — light zone
        ══════════════════════════════════════════════════════════ */
        .oss-zone { background: var(--alice); padding: 100px 0 110px; overflow: hidden; }
        .oss-grid {
            display: grid;
            grid-template-columns: 0.82fr 1.18fr;
            gap: 60px;
            align-items: center;
        }
        .oss-lead {
            font-size: 1.02rem; font-weight: 300; color: var(--dark-grey);
            line-height: 1.8; margin-bottom: 30px; max-width: 460px;
        }
        .oss-lead strong { color: var(--prussian); font-weight: 700; }
        .oss-layers {
            display: grid; grid-template-columns: repeat(3, 1fr);
            gap: 22px; margin-top: 64px;
        }
        /* one colour per layer: blue for the systems above, orange for the S2C core,
           green for the live network below */
        /* one colour per layer, carried by a solid band across the top of the tile
           that the label sits in, rather than a rule above it */
        .oss-layer {
            --accent: var(--airforce);
            display: flex; flex-direction: column; align-items: stretch;
            border-radius: 16px; overflow: hidden;
            padding: 0;
            background: var(--tint, #fff);
            border: 1px solid var(--edge, rgba(2,38,63,0.09));
            box-shadow: 0 2px 12px rgba(2,38,63,0.05);
        }
        .oss-layer.l-oss { --accent: var(--airforce); --tint: rgba(95,153,187,0.12); --edge: rgba(95,153,187,0.34); }
        .oss-layer.l-s2c { --accent: var(--orange);   --tint: rgba(230,83,43,0.10); --edge: rgba(230,83,43,0.30); }
        .oss-layer.l-net { --accent: var(--prussian); --tint: rgba(2,38,63,0.07);   --edge: rgba(2,38,63,0.20); }
        .oss-layer .oss-num {
            display: block;
            background: var(--accent);
            padding: 12px 26px;
            font-size: 0.68rem; font-weight: 900; letter-spacing: 0.1em;
            color: #fff;
        }
        .oss-layer > div { padding: 20px 26px 26px; }
        .oss-layer h4, .oss-layer h3 { font-size: 0.98rem; font-weight: 900; color: var(--prussian); margin-bottom: 3px; letter-spacing: -0.01em; }
        .oss-layer p { font-size: 0.86rem; font-weight: 300; color: var(--dark-grey); line-height: 1.6; }
        .oss-visual {
            border-radius: 18px;
            background: #fff;
            padding: 22px;
            border: 1px solid rgba(2,38,63,0.1);
            box-shadow: 0 30px 70px rgba(2,38,63,0.18);
        }
        .oss-visual img { width: 100%; height: auto; display: block; }
        .oss-caption {
            text-align: center; margin-top: 14px;
            font-size: 0.76rem; font-weight: 700; letter-spacing: 0.06em;
            color: rgba(2,38,63,0.45); text-transform: uppercase;
        }

        /* ══════════════════════════════════════════════════════════
           S2C DESIGNER — dark background image override
        ══════════════════════════════════════════════════════════ */
        #s2c-designer-gis { position: relative; background: var(--prussian); }
        #s2c-designer-gis::before {
            content: ''; position: absolute; inset: 0;
            background: url('images/s2cdesigner/s2c-designer-gis-background.webp') center center / cover no-repeat;
            opacity: 0.9;
        }
        #s2c-designer-gis::after {
            content: ''; position: absolute; inset: 0;
            background: linear-gradient(180deg, rgba(2,38,63,0.5) 0%, rgba(2,38,63,0.32) 50%, rgba(2,38,63,0.58) 100%);
        }
        #s2c-designer-gis > .container { position: relative; z-index: 1; }
        #s2c-designer-gis .blog-oversize-heading.prussian-text { color: #fff; }
        #s2c-designer-gis .showcase-intro { color: rgba(173,221,246,0.82); }
        #s2c-designer-gis .showcase-intro strong { color: #fff; }
        #s2c-designer-gis .gis-visual { border-color: rgba(95,153,187,0.28); box-shadow: 0 30px 70px rgba(0,0,0,0.45); }
        /* The photo behind this section is light in places, so the feature copy
           sits on its own frosted tile rather than straight on the image */
        #s2c-designer-gis .gis-feat-panel {
            background: rgba(1,22,40,0.82);
            backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
            border: 1px solid rgba(95,153,187,0.28);
            border-radius: 22px;
            padding: 30px 30px 34px;
            box-shadow: 0 30px 70px rgba(0,0,0,0.45), inset 0 1px 0 rgba(173,221,246,0.08);
        }
        #s2c-designer-gis .gis-feat-panel .gis-feature-list { margin-top: 0; }
        #s2c-designer-gis .gis-feat h4, #s2c-designer-gis .gis-feat h3 { color: #fff; }
        #s2c-designer-gis .gis-feat p { color: rgba(255,255,255,0.88); }
        #s2c-designer-gis .gis-feat .ti { color: #57b9b2; }
        #s2c-designer-gis .gis-feat:hover { background: rgba(87,185,178,0.12); }
        /* Teal button pair, same as the S2C Designer page; the lighter teal is
           the one that reads on a dark frame */
        .s2c-btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
        /* the pair has to clear the narrower right-hand column here, so the
           horizontal padding comes in a little from the S2C Designer original */
        #s2c-designer-gis .s2c-btn-row .btn-demo,
        #s2c-designer-gis .s2c-btn-row .btn-ghost-teal { padding: 14px 26px; }
        .btn-demo { display: inline-flex; align-items: center; gap: 9px; padding: 14px 32px; border-radius: 30px; border: none; background: #138e96; box-shadow: 0 6px 26px rgba(19,142,150,0.45); font-family: 'Lato', sans-serif; font-size: 0.95rem; font-weight: 700; color: #fff; cursor: pointer; letter-spacing: 0.03em; transition: all 0.22s; text-decoration: none; white-space: nowrap; }
        .btn-demo:hover { background: #0f7178; transform: translateY(-2px); box-shadow: 0 12px 38px rgba(19,142,150,0.6); }
        .btn-demo .ti { font-size: 1rem; }
        /* reversed out rather than a ghost: the teal-on-transparent version vanished
           against this section's busy green artwork */
        .btn-ghost-teal { display: inline-flex; align-items: center; gap: 9px; padding: 14px 32px; border-radius: 30px; border: 1.5px solid #0B5258; background: #0B5258; box-shadow: 0 6px 22px rgba(1,16,28,0.32); font-family: 'Lato', sans-serif; font-size: 0.95rem; font-weight: 700; color: #fff; cursor: pointer; letter-spacing: 0.03em; transition: all 0.22s; text-decoration: none; white-space: nowrap; }
        .btn-ghost-teal:hover { background: #fff; border-color: #fff; color: #0B5258; transform: translateY(-2px); box-shadow: 0 12px 34px rgba(1,16,28,0.4); }
        .btn-ghost-teal .ti { font-size: 1rem; }

        /* ══════════════════════════════════════════════════════════
           AI SECTION — right-column stack (chat + video)
        ══════════════════════════════════════════════════════════ */
        .ai-right { display: flex; flex-direction: column; gap: 22px; }

        /* ══════════════════════════════════════════════════════════
           ENE REPLACEMENT — Ericsson Network Engineer call-out
        ══════════════════════════════════════════════════════════ */
        .ene-zone { position: relative; padding: 100px 0 104px; overflow: hidden; background: #06283f; }
        .ene-zone::before {
            content: ""; position: absolute; inset: 0; z-index: 0;
            background: url('images/vc4-s2c-ericsson-network-engineer-replacement-v1.webp') center/cover no-repeat;
            filter: brightness(1.45);
        }
        .ene-zone::after {
            content: ""; position: absolute; inset: 0; z-index: 0;
            background: linear-gradient(90deg, rgba(2,38,63,0.66) 0%, rgba(2,38,63,0.46) 40%, rgba(2,38,63,0.2) 72%, rgba(2,38,63,0.04) 100%);
        }
        .ene-zone > .container { position: relative; z-index: 1; }
        .ene-zone .blog-eyebrow { color: var(--orange); }
        .ene-zone .blog-oversize-heading { color: #fff; margin-bottom: 40px; max-width: none; }
        .ene-grid { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 56px; align-items: start; }
        .ene-inner { max-width: 520px; }
        .ene-lead { font-size: 1.02rem; font-weight: 300; color: rgba(214,234,247,0.92); line-height: 1.7; margin: 0 0 30px; }
        .ene-lead strong { color: #fff; font-weight: 700; }
        .ene-btns { display: flex; flex-wrap: wrap; gap: 16px; }
        .ene-zone .hero-cta-main { background: var(--orange); background-image: none; }
        .ene-mig {
            background: rgba(6,32,52,0.62); border: 1px solid rgba(173,221,246,0.22);
            border-radius: 22px; padding: 34px 36px 30px; backdrop-filter: blur(4px);
            box-shadow: 0 24px 60px rgba(1,16,28,0.4);
        }
        .ene-mig-head { font-size: 0.66rem; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sky); margin-bottom: 22px; }
        .ene-steps { list-style: none; margin: 0; padding: 0; }
        .ene-steps li { position: relative; padding: 0 0 18px 34px; }
        .ene-steps li:last-child { padding-bottom: 0; }
        .ene-steps li::before { content: ""; position: absolute; left: 0; top: 1px; width: 15px; height: 15px; border-radius: 50%;
    /* 3-D sphere: specular highlight top-left, shade bottom-right, over the step colour */
    background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.9) 0, rgba(255,255,255,0.35) 18%, rgba(255,255,255,0) 45%), radial-gradient(circle at 68% 78%, rgba(0,0,0,0.38) 0, rgba(0,0,0,0) 60%), var(--c, var(--orange));
    box-shadow: 0 0 0 4px rgba(173,221,246,0.12), inset -1px -2px 3px rgba(0,0,0,0.3), 0 3px 6px rgba(1,16,28,0.55); }
        .ene-steps li::after { content: ""; position: absolute; left: 7px; top: 16px; width: 2px; height: calc(100% - 16px); background: linear-gradient(rgba(173,221,246,0.4), rgba(173,221,246,0.08)); }
        .ene-steps li:last-child::after { display: none; }
        .ene-steps li span { display: block; font-size: 0.98rem; font-weight: 700; color: #fff; letter-spacing: -0.01em; line-height: 1.25; }
        /* Horizontal migration path: sits between the lead and the button */
        .ene-grid { grid-template-columns: 1fr; }
        .ene-inner { max-width: none; }
        .ene-lead { max-width: 620px; }
        .ene-mig { margin: 0 0 34px; padding: 30px 32px 28px; }
        @media (min-width: 721px) {
            .ene-steps { display: grid; grid-template-columns: repeat(9, 1fr); gap: 12px; }
            .ene-steps li { padding: 30px 0 0; text-align: center; }
            .ene-steps li::before { left: 50%; top: 0; transform: translateX(-50%); }
            .ene-steps li::after { left: calc(50% + 8px); top: 7px; width: calc(100% - 4px); height: 2px; background: linear-gradient(90deg, rgba(173,221,246,0.4), rgba(173,221,246,0.08)); }
            .ene-steps li span { font-size: 0.86rem; }
        }
        @media (max-width: 900px) { .ene-grid { grid-template-columns: 1fr; gap: 40px; } .ene-inner, .ene-lead { max-width: none; } }
        @media (max-width: 720px) { .ene-zone { padding: 74px 0 80px; } .ene-mig { padding: 28px 24px 24px; } }

        /* ══════════════════════════════════════════════════════════
           MOBILE APP — white zone
        ══════════════════════════════════════════════════════════ */
        .mobile-zone { background: #ffffff; padding: 100px 0 110px; overflow: hidden; }
        .mobile-lead {
            font-size: 1.02rem; font-weight: 300; color: var(--dark-grey);
            line-height: 1.8; margin-bottom: 30px; max-width: 720px;
        }
        .mobile-lead strong { color: var(--prussian); font-weight: 700; }

        /* device / platform chips */
        /* Runs on — a plain ruled list, same convention as the AI feature list
           rather than a row of pills */
        .dev-chips {
            list-style: none; margin: 0; padding: 0;
            max-width: 340px;
        }
        .dev-chips li + li { border-top: 1px solid rgba(2,38,63,0.12); }
        .dev-chips li {
            display: flex; align-items: center; gap: 13px;
            padding: 11px 2px;
            font-size: 0.9rem; font-weight: 400; color: var(--prussian);
            transition: color 0.2s, padding-left 0.2s;
        }
        .dev-chips li .ti { font-size: 1.05rem; color: var(--airforce); flex-shrink: 0; width: 20px; text-align: center; }
        .dev-chips li:hover { color: var(--airforce); padding-left: 5px; }

        /* Phones — Melanie's own device art, images/screen-display/phone-mockup.png
           (538x1070, transparent glass), used once per phone. Each screengrab sits
           BEHIND the PNG at the glass aperture and the PNG on top masks it, so the
           frame, notch, rails and buttons are entirely hers: nothing here draws any
           device chrome — no backgrounds, borders, radii or shadows on our side.
           Aperture measured from the PNG's alpha channel: glass 442x957 (1:2.165),
           left 9.108%, top 3.645%, width 82.156%, height 89.439%.
           Re-measure if the PNG is ever replaced. */
        .phone-row {
            display: grid; grid-template-columns: repeat(3, 1fr);
            gap: 40px 48px; margin: 60px auto 0; max-width: 900px;
        }
        .phone { margin: 0; text-align: center; }
        .phone-cap {
            display: block; margin: 0 0 22px;
            font-size: 1.08rem; font-weight: 900; color: var(--prussian);
            line-height: 1.25; letter-spacing: -0.015em;
        }
        .phone-cap span {
            display: block; margin: 7px auto 0; max-width: 250px;
            font-size: 0.86rem; font-weight: 300; color: var(--dark-grey); line-height: 1.6;
            letter-spacing: 0;
        }
        .phone-device { position: relative; width: 100%; aspect-ratio: 538 / 1070; }
        .phone-png {
            position: absolute; inset: 0; width: 100%; height: 100%; display: block;
            z-index: 2; pointer-events: none;
        }
        .phone-grab {
            position: absolute; z-index: 1; display: block;
            /* The grab's box starts BELOW the notch, not at the glass top: the notch
               bottom is at 6.916% of the PNG (y=74/1070), so 7.3% clears it. The
               header row of every grab is therefore fully visible; the glass bottom
               stays at 93.084%, so the height shrinks to 85.784% and the extra crop
               (6-9%) comes off the bottom, per Melanie. The strip beside the notch
               shows the page's white through the transparent glass, which matches
               the grabs' white header bar — the mobile zone must stay white for this
               to read cleanly. */
            left: 9.108%; top: 7.3%; width: 82.156%; height: 85.784%;
            /* cover, per Melanie: the grab FILLS its box with nothing behind it.
               Anchored to the TOP. The grabs have had their mock status-bar / island
               strip cut off at source, so they open on the app header. */
            object-fit: cover; object-position: center top;
        }

        /* sub-band heading, one step down from the oversize section heading */
        .mob-subhead {
            font-family: 'Lato', sans-serif;
            /* sits between the old sub-band size and the 7rem section headings: big
               enough not to read as the odd small one, still a clear step down */
            font-size: clamp(2.5rem, 5.2vw, 4.6rem);
            font-weight: 900; line-height: 1.02; letter-spacing: -0.025em;
            color: var(--prussian);
            margin-bottom: 34px;
        }
        .mob-subhead em {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-style: italic; font-weight: 300; font-size: 1.12em;
        }

        /* configurability pillars */
        .cfg-band { margin-top: 96px; }
        .cfg-lead {
            font-size: 1.02rem; font-weight: 300; color: var(--dark-grey);
            line-height: 1.8; max-width: 720px; margin: 0 0 44px;
        }
        .cfg-lead strong { color: var(--prussian); font-weight: 700; }
        .cfg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
        /* Image band across the top of each tile, then the tile's colour band with
           icon and title, then the copy. The image is set per tile as --shot (and
           --shot-pos) inline, so the pairing is visible in the markup. No overlay:
           no text sits on the image, so it needs none. Most of these blog images
           carry a white VC4 watermark in a top corner — --shot-pos is chosen per
           image to keep that corner out of the shallow band. */
        .tile-shot {
            height: 116px; flex-shrink: 0;
            background: var(--shot) var(--shot-pos, center) / cover no-repeat;
            border-bottom: 1px solid rgba(95,153,187,0.2);
        }
        /* Styled to match the migration cards on ericsson-network-engineer-replacement.html
           (.op-card): one uniform alice card with a sky hairline, image band on top, a
           round prussian icon disc straddling the seam, prussian title, grey copy.
           No colour bands or tinted bodies — those were the earlier scheme. */
        .cfg-card, .arch-item {
            position: relative;
            background: var(--alice);
            border: 1px solid rgba(95,153,187,0.22);
            border-radius: 18px; overflow: hidden; padding: 0;
            box-shadow: 0 2px 12px rgba(2,38,63,0.05);
            display: flex; flex-direction: column;
            transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
        }
        .cfg-card:hover, .arch-item:hover {
            transform: translateY(-6px);
            border-color: rgba(95,153,187,0.55);
            box-shadow: 0 20px 48px rgba(2,38,63,0.16);
        }
        /* was a solid colour band; now the card's header block — icon disc + title */
        .tile-band {
            padding: 0 22px;
            display: flex; flex-direction: column; align-items: flex-start;
        }
        /* icon badge inside the picture, top left, as on the gis-module.html module tiles */
        .tile-shot { position: relative; }
        .tile-shot .tile-ico {
            position: absolute; top: 12px; left: 12px;
            width: 36px; height: 36px; border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            background: rgba(2,38,63,0.72); backdrop-filter: blur(4px);
            color: #fff; font-size: 1rem;
            transition: background 0.28s;
        }
        .cfg-card:hover .tile-ico, .arch-item:hover .tile-ico { background: var(--orange); }
        .tile-band h4, .tile-band h5, .tile-band h3 {
            font-size: 1.02rem; font-weight: 900; color: var(--prussian);
            letter-spacing: -0.02em; margin: 20px 0 10px; line-height: 1.15;
        }
        .tile-body { padding: 0 22px 24px; }
        .tile-body p { font-size: 0.82rem; font-weight: 300; color: var(--dark-grey); line-height: 1.6; }
        /* delivery facts — same tiles, no divider above */
        .arch-row {
            display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
            margin-top: 20px;
        }

        @media (max-width: 1100px) {
            .platform-videos { grid-template-columns: 1fr; max-width: 460px; }
            .platform-videos.single { max-width: 720px; }
            .oss-grid { grid-template-columns: 1fr; gap: 40px; }
            .oss-layers { grid-template-columns: 1fr; gap: 14px; margin-top: 40px; }
            .cfg-grid, .arch-row { grid-template-columns: 1fr; }
            .arch-row { gap: 26px; }
            .phone-row { grid-template-columns: repeat(2, 1fr); max-width: 600px; }
        }
        @media (max-width: 680px) {
            .platform-videos { gap: 16px; }
            .phone-row { grid-template-columns: 1fr; max-width: 290px; }
        }

        /* ══════════════════════════════════════════════════════════
           FINAL CTA BAND
        ══════════════════════════════════════════════════════════ */
        .final-cta-wrap { background: var(--prussian); padding: 0 0 100px; }
        .final-cta {
            border-radius: 24px;
            position: relative;
            overflow: hidden;
            padding: 60px 64px;
            text-align: center;
            /* Artwork carries the band: no mesh animation, and only a light scrim
               for text contrast instead of the old heavy blue wash */
            /* anchored to the bottom of the artwork: now the heading has moved out
               the block is short, and `center` cropped to the brightest band of the
               image, which took the orange tagline to 1:1. The lower half is far
               darker (mean 0.02-0.07 against 0.35 mid-frame). */
            background:
                linear-gradient(140deg, rgba(2,38,63,0.30) 0%, rgba(1,26,46,0.44) 100%),
                url('images/service2create-network-inventory-platform.webp') center bottom / cover no-repeat;
            border: 1px solid rgba(95,153,187,0.25);
        }
        .final-cta > * { position: relative; z-index: 1; }
        /* sits on the section's own prussian background, above the artwork block,
           so it needs no scrim of its own */
        /* a bold lead-in line at sub-copy size, sitting directly above the sub copy
           inside the block; the stacked tagline carries the display weight now */
        .final-cta-heading {
            font-size: 1rem;
            font-weight: 700;
            line-height: 1.7;
            letter-spacing: 0;
            color: #fff;
            text-align: left;
            margin-bottom: 10px;
            text-shadow: 0 1px 10px rgba(1,16,28,0.6);
        }
        .final-cta-heading .fancy-word { color: var(--sky); }
        .final-cta-heading .fc-main { display: block; }
        /* Copy + buttons left, the three-part tagline stacked right */
        .final-cta-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 56px;
            /* the copy column is much shorter than the tagline stack, so centre it
               against those three lines rather than letting it hang from the top */
            align-items: center;
            text-align: left;
        }
        .fc-tag-stack { display: flex; flex-direction: column; gap: 0; }
        /* plain Lato, no italic serif */
        .fc-tag-stack .fc-tag-line {
            font-family: 'Lato', sans-serif;
            font-weight: 900;
            font-style: normal;
            font-size: clamp(2.1rem, 4.6vw, 3.8rem);
            line-height: 1.1;
            letter-spacing: -0.03em;
            text-shadow: 0 3px 18px rgba(1,16,28,0.55);
        }
        .final-cta-sub {
            font-size: 1rem;
            font-weight: 300;
            color: #fff;
            max-width: 520px;
            margin: 0 0 34px;
            line-height: 1.7;
            text-shadow: 0 1px 10px rgba(1,16,28,0.6);
        }
        .final-cta-btns { display: flex; gap: 14px; justify-content: flex-start; flex-wrap: wrap; }
        /* the pair has to clear the copy column, so the padding comes in a little */
        .final-cta-btns .hero-cta-main, .final-cta-btns .hero-cta-ghost { padding-left: 24px; padding-right: 24px; }

        /* -- Full footer -- */
        .site-footer-full {
            background: #011628;
            font-family: 'Lato', sans-serif;
            position: relative;
            z-index: 1;
        }
        .footer-top {
            padding: 72px 0 56px;
            border-top: 1px solid rgba(95,153,187,0.15);
        }
        .footer-grid {
            display: grid;
            grid-template-columns: 1.6fr repeat(5, 1fr);
            gap: 40px;
        }
        .footer-logo { height: 36px; width: auto; margin-bottom: 12px; }
        .footer-logo-s2c { height: 12px; width: auto; margin-bottom: 20px; display: block; }
        .footer-tagline {
            font-size: 0.82rem;
            font-weight: 300;
            color: rgba(255,255,255,0.92);
            line-height: 1.7;
            margin-bottom: 20px;
        }
        .footer-contact {
            display: flex;
            flex-direction: column;
            gap: 6px;
            margin-bottom: 24px;
        }
        .footer-contact a {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.82rem;
            font-weight: 400;
            color: rgba(255,255,255,0.92);
            transition: color 0.18s;
        }
        .footer-contact a:hover { color: #f0f8ff; }
        .footer-contact a .ti { font-size: 0.85rem; color: #ffffff; flex-shrink: 0; }
        .footer-social {
            display: flex;
            gap: 10px;
        }
        .social-icon-btn {
            width: 36px; height: 36px;
            border-radius: 8px;
            border: 1px solid rgba(240,248,255,0.2);
            background: rgba(240,248,255,0.05);
            display: flex; align-items: center; justify-content: center;
            color: #ffffff;
            font-size: 1rem;
            transition: all 0.18s;
            cursor: pointer;
        }
        .social-icon-btn:hover {
            background: rgba(240,248,255,0.14);
            border-color: rgba(240,248,255,0.5);
            color: #fff;
        }
        .footer-login-btn {
            display: inline-flex; align-items: center;
            margin-top: 12px; padding: 8px 20px;
            border-radius: 30px;
            border: 1px solid rgba(95,153,187,0.22);
            background: rgba(95,153,187,0.07);
            font-family: 'Lato', sans-serif; font-size: 0.72rem; font-weight: 700;
            color: #fff; letter-spacing: 0.04em; cursor: pointer;
            transition: background 0.2s, border-color 0.2s;
        }
        .footer-login-btn:hover { background: rgba(95,153,187,0.14); border-color: rgba(95,153,187,0.45); }
        .footer-col-heading {
            font-size: 0.62rem;
            font-weight: 900;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--orange);
            margin-bottom: 14px;
            margin-top: 0;
        }
        .footer-col ul {
            list-style: none;
            padding: 0; margin: 0;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .footer-col ul li a {
            font-size: 0.85rem;
            font-weight: 300;
            color: rgba(255,255,255,0.92);
            transition: color 0.18s;
            line-height: 1.4;
        }
        .footer-col ul li a:hover { color: #fff; }
        .footer-creds .container {
            display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
            gap: 14px 36px; padding-top: 26px; padding-bottom: 26px;
            border-top: 1px solid rgba(255,255,255,0.1);
        }
        .footer-cred {
            display: inline-flex; align-items: center; gap: 9px;
            font-family: 'Lato', sans-serif; font-size: 0.78rem; font-weight: 400;
            letter-spacing: 0.05em; color: rgba(255,255,255,0.7);
        }
        .footer-cred .ti { font-size: 1.05rem; color: var(--orange); }
        .footer-bottom {
            border-top: 1px solid rgba(95,153,187,0.1);
            padding: 20px 0;
        }
        .footer-bottom-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            flex-wrap: wrap;
        }
        .footer-copy {
            font-size: 0.78rem;
            font-weight: 400;
            color: rgba(255,255,255,0.7);
        }
        .footer-legal {
            display: flex;
            gap: 24px;
        }
        .footer-legal a {
            font-size: 0.78rem;
            font-weight: 400;
            letter-spacing: 0.05em;
            color: rgba(255,255,255,0.7);
            transition: color 0.2s;
        }
        .footer-legal a:hover { color: #f0f8ff; }
        @media (max-width: 1100px) {
            .footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 36px; }
        }
        @media (max-width: 680px) {
            .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
            .footer-top { padding: 48px 0 40px; }
        }
        @media (max-width: 420px) {
            .footer-grid { grid-template-columns: 1fr; }
        }

        /* ══════════════════════════════════════════════════════════
           RESPONSIVE
        ══════════════════════════════════════════════════════════ */
        @media (max-width: 1100px) {
            .nav-bar .nav-item, .nav-right .lang-btn, .nav-right .cta-btn { display: none; }
            .nav-mobile-toggle { display: flex; }
            .hero-inner { padding: 100px 0 70px; }
            .hero-bottom { grid-template-columns: 1fr; gap: 36px; }
            .hero-top { margin-bottom: 30px; }
            .hero-visual { min-height: 0; }
            .unified-grid { grid-template-columns: 1fr; gap: 48px; }
            .stats-panel { position: static; }
            .showcase-grid, .ai-grid, .gis-grid { grid-template-columns: 1fr; gap: 44px; }
            .benefit-row { grid-template-columns: 80px 1fr; }
            .benefit-desc { grid-column: 2; }
        }
        @media (max-width: 680px) {
            .final-cta { padding: 56px 28px; }
            .benefit-row { grid-template-columns: 1fr; gap: 12px; }
            .stat-icon { width: 68px; }
            .stat-content { padding: 20px 22px; }
        }
        /* Two columns only while the copy column is still wide enough to keep both
           buttons on one row; below that the grid goes full width so they stay
           side by side rather than stacking */
        @media (max-width: 1260px) {
            .final-cta-grid { grid-template-columns: 1fr; gap: 30px; }
        }
        @media (max-width: 600px) {
            .container { padding: 0 20px; }
            .s2c-hero { min-height: 0; }
            .hero-heading { font-size: clamp(46px, 13vw, 64px); }
        }


        /* ══════════════════════════════════════════════════════════
           BRANDED CURSOR — gradient orange disc (matches "Book a Demo"
           button) with white double-chevron; reverses out on clickables.
           Transparent outside the disc. Static, CSS-only, real-mouse only.
        ══════════════════════════════════════════════════════════ */
        @media (hover: hover) and (pointer: fine) {
            body {
                cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2730%27%20height%3D%2730%27%20viewBox%3D%270%200%2040%2040%27%3E%3Cdefs%3E%3CradialGradient%20id%3D%27g%27%20cx%3D%2738%25%27%20cy%3D%2732%25%27%20r%3D%2775%25%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23f0824f%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23E6532B%27%2F%3E%3C%2FradialGradient%3E%3Cfilter%20id%3D%27s%27%20x%3D%27-60%25%27%20y%3D%27-60%25%27%20width%3D%27220%25%27%20height%3D%27220%25%27%3E%3CfeDropShadow%20dx%3D%270%27%20dy%3D%271.6%27%20stdDeviation%3D%272%27%20flood-color%3D%27%2302263F%27%20flood-opacity%3D%270.4%27%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Ccircle%20cx%3D%2720%27%20cy%3D%2720%27%20r%3D%2715%27%20fill%3D%27url%28%23g%29%27%20filter%3D%27url%28%23s%29%27%2F%3E%3Cg%20transform%3D%27translate%2820%2020%29%20rotate%2845%29%20scale%280.78%29%27%20fill%3D%27none%27%20stroke%3D%27%23FFFFFF%27%20stroke-width%3D%272.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M-1.5%20-6L-7.5%200L-1.5%206%27%2F%3E%3Cpath%20d%3D%27M7.5%20-6L1.5%200L7.5%206%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 15 15, auto !important;

            }
            a, button, summary, label[for], [onclick], [role="button"],
            .op-card, .uc-card, .pillar-card, .resource-card, .industry-card,
            .film-card, .stat-card, .module-card, .ind-chip, .q-card,
            .nav-item, .lang-btn, .icon-btn, .cta-btn, .cta-btn-secondary,
            .hero-cta-main, .hero-cta-ghost, .mega-link, .mega-footer-link,
            .faq-q, .show-tab, .spot-dot, .lang-opt, .search-hint,
            .footer-login-btn, .social-icon-btn, .nav-mobile-toggle,
            input[type="submit"], input[type="button"], input[type="checkbox"],
            input[type="radio"], select {
                cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2730%27%20height%3D%2730%27%20viewBox%3D%270%200%2040%2040%27%3E%3Cdefs%3E%3CradialGradient%20id%3D%27g%27%20cx%3D%2738%25%27%20cy%3D%2732%25%27%20r%3D%2775%25%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23ffffff%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23eaf2f8%27%2F%3E%3C%2FradialGradient%3E%3Cfilter%20id%3D%27s%27%20x%3D%27-60%25%27%20y%3D%27-60%25%27%20width%3D%27220%25%27%20height%3D%27220%25%27%3E%3CfeDropShadow%20dx%3D%270%27%20dy%3D%271.6%27%20stdDeviation%3D%272%27%20flood-color%3D%27%2302263F%27%20flood-opacity%3D%270.4%27%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Ccircle%20cx%3D%2720%27%20cy%3D%2720%27%20r%3D%2715%27%20fill%3D%27url%28%23g%29%27%20filter%3D%27url%28%23s%29%27%2F%3E%3Cg%20transform%3D%27translate%2820%2020%29%20rotate%2845%29%20scale%280.78%29%27%20fill%3D%27none%27%20stroke%3D%27%23E6532B%27%20stroke-width%3D%272.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M-1.5%20-6L-7.5%200L-1.5%206%27%2F%3E%3Cpath%20d%3D%27M7.5%20-6L1.5%200L7.5%206%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 15 15, pointer !important;

            }
            input[type="text"], input[type="email"], input[type="search"],
            input[type="tel"], input[type="number"], input[type="password"],
            input[type="url"], textarea, [contenteditable="true"] {
                cursor: text !important;
            }
        }
        /* ══════════════════════════════════════════════════════════
           NOTEPAD WIDGET — persistent note-taking pop-up
        ══════════════════════════════════════════════════════════ */
        .np-fab {
            position: fixed; right: 24px; bottom: 24px; z-index: 1200;
            display: inline-flex; align-items: center; gap: 6px;
            padding: 8px 13px; border: none; border-radius: 30px;
            background: var(--orange);
            color: #fff; font-family: 'Lato', sans-serif; font-weight: 700;
            font-size: 0.72rem; letter-spacing: 0.03em; cursor: pointer;
            box-shadow: 0 5px 18px rgba(230,83,43,0.4);
            transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
        }
        .np-fab:hover { background: #b83d1a; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(230,83,43,0.55); }
        .np-fab .ti { font-size: 0.95rem; }
        .np-fab .np-badge {
            min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px;
            background: #fff; color: var(--orange); font-size: 0.58rem; font-weight: 900;
            display: none; align-items: center; justify-content: center;
        }
        .np-fab .np-badge.show { display: inline-flex; }
        .np-hidden { display: none !important; }

        /* music + Notes dock (Notes stays in the corner, music sits to its left) */
        .fab-dock { position: fixed; right: 24px; bottom: 24px; z-index: 1200; display: flex; align-items: center; gap: 12px; }
        .fab-dock .np-fab { position: static; right: auto; bottom: auto; z-index: auto; }
        .music-wrap { position: relative; display: inline-flex; }
        .music-fab {
            display: inline-flex; align-items: center; justify-content: center;
            width: 34px; height: 34px; padding: 0; border: none; border-radius: 50%;
            background: var(--prussian); backdrop-filter: blur(10px);
            color: #fff; cursor: pointer;
            box-shadow: 0 5px 18px rgba(0,0,0,0.26), inset 0 0 0 1px rgba(95,153,187,0.3);
            transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
        }
        .music-fab:hover { transform: translateY(-2px); background: #013a5f; box-shadow: 0 12px 30px rgba(2,38,63,0.45), inset 0 0 0 1px rgba(95,153,187,0.5); }
        /* volume / mute popover */
        .music-pop {
            position: absolute; bottom: calc(100% + 10px); right: 0;
            display: flex; align-items: center; gap: 10px;
            padding: 10px 14px; border-radius: 24px;
            background: rgba(2,38,63,0.72); backdrop-filter: blur(10px);
            box-shadow: 0 10px 26px rgba(0,0,0,0.32), inset 0 0 0 1px rgba(95,153,187,0.35);
            opacity: 0; visibility: hidden; transform: translateY(6px);
            transition: opacity 0.18s, transform 0.18s, visibility 0.18s; white-space: nowrap;
        }
        .music-wrap:hover .music-pop, .music-wrap:focus-within .music-pop { opacity: 1; visibility: visible; transform: none; }
        .music-mute { background: none; border: none; padding: 0; cursor: pointer; color: var(--sky); display: inline-flex; }
        .music-mute .ti { font-size: 1.15rem; }
        .music-vol { -webkit-appearance: none; appearance: none; width: 96px; height: 4px; border-radius: 3px; background: rgba(255,255,255,0.28); outline: none; cursor: pointer; }
        .music-vol::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--orange); border: 2px solid #fff; cursor: pointer; }
        .music-vol::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--orange); border: 2px solid #fff; cursor: pointer; }
        .music-fab .m-icon .ti { font-size: 1rem; color: var(--airforce); display: block; }
        .music-fab.playing .m-icon { display: none; }
        .music-eq { display: none; align-items: flex-end; gap: 2px; height: 14px; }
        .music-fab.playing .music-eq { display: inline-flex; }
        .music-eq i { width: 3px; background: var(--orange); border-radius: 2px; transform-origin: bottom; animation: eqBar 0.9s ease-in-out infinite; }
        .music-eq i:nth-child(1) { height: 7px; animation-delay: 0s; }
        .music-eq i:nth-child(2) { height: 14px; animation-delay: 0.22s; }
        .music-eq i:nth-child(3) { height: 9px; animation-delay: 0.44s; }
        @keyframes eqBar { 0%,100% { transform: scaleY(0.45); } 50% { transform: scaleY(1); } }
        @media (prefers-reduced-motion: reduce) { .music-fab { transition: none; } .music-eq i { animation: none; } }

        .np-panel {
            position: fixed; right: 24px; bottom: 24px; z-index: 1201;
            width: min(360px, calc(100vw - 32px));
            max-height: min(560px, calc(100vh - 48px));
            display: flex; flex-direction: column; border-radius: 18px; overflow: hidden;
            background: rgba(255,255,255,0.98);
            border: 1px solid rgba(2,38,63,0.12);
            box-shadow: 0 30px 80px rgba(2,38,63,0.35);
            font-family: 'Lato', sans-serif;
            transform-origin: bottom right;
            animation: npIn 0.22s cubic-bezier(0.16,1,0.3,1);
        }
        @keyframes npIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
        @media (prefers-reduced-motion: reduce) { .np-panel { animation: none; } .np-fab { transition: none; } }
        .np-head {
            display: flex; align-items: center; gap: 10px; padding: 14px 16px;
            background: linear-gradient(130deg, #02263F, #012743); color: #fff;
        }
        .np-head .np-avatar {
            width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
            background: linear-gradient(135deg, var(--orange), #b83d1a);
            display: flex; align-items: center; justify-content: center;
            font-size: 1rem; box-shadow: 0 4px 12px rgba(230,83,43,0.4);
        }
        .np-head h4 { display: flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 900; letter-spacing: 0.01em; }
        .np-head p { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sky); }
        .np-head .np-ctrls { margin-left: auto; display: flex; gap: 4px; }
        .np-iconbtn {
            width: 30px; height: 30px; border: none; background: rgba(255,255,255,0.1);
            border-radius: 8px; color: #fff; font-size: 1rem; cursor: pointer;
            display: flex; align-items: center; justify-content: center; transition: background 0.18s;
        }
        .np-iconbtn:hover { background: rgba(255,255,255,0.22); }
        .np-body { padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; overflow: auto; }
        .np-status { display: inline-flex; align-items: center; gap: 4px; font-size: 0.75rem; font-weight: 700; color: var(--orange); opacity: 0; transition: opacity 0.3s; }
        .np-status.show { opacity: 1; }
        .np-textarea {
            width: 100%; min-height: 110px; height: 130px; resize: vertical;
            border: 1px solid rgba(2,38,63,0.14); border-radius: 12px; padding: 12px 14px;
            font-family: 'Lato', sans-serif; font-size: 0.9rem; line-height: 1.6;
            color: var(--dark-grey); outline: none; transition: border-color 0.2s; background: #fff;
        }
        .np-textarea:focus { border-color: var(--airforce); }
        .np-textarea::placeholder { color: rgba(56,72,79,0.45); }
        .np-foot { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; border-top: 1px solid rgba(2,38,63,0.1); background: var(--alice); }
        .np-foot-row { display: flex; gap: 8px; }
        .np-btn {
            flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
            padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(2,38,63,0.14);
            background: #fff; color: var(--prussian); font-family: 'Lato', sans-serif;
            font-weight: 700; font-size: 0.8125rem; cursor: pointer; transition: all 0.18s;
        }
        .np-btn:hover { border-color: rgba(2,38,63,0.3); }
        .np-btn.primary { border: none; background: var(--orange); color: #fff; box-shadow: 0 4px 14px rgba(230,83,43,0.4); }
        .np-btn.primary:hover { background: #b83d1a; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(230,83,43,0.55); }
        .np-btn .ti { font-size: 0.95rem; }
        .np-btn.np-clear { flex: 0 0 auto; width: 42px; color: var(--dark-grey); }
        .np-btn.np-clear:hover { border-color: rgba(230,83,43,0.45); color: var(--orange); }
        .np-toast {
            position: fixed; right: 24px; bottom: 92px; z-index: 1202;
            background: var(--prussian); color: #fff; font-family: 'Lato', sans-serif;
            font-size: 0.8125rem; font-weight: 700; padding: 10px 16px; border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.35);
            opacity: 0; transform: translateY(8px); transition: opacity 0.25s, transform 0.25s; pointer-events: none;
        }
        .np-toast.show { opacity: 1; transform: none; }
        @media (max-width: 600px) { .np-panel, .fab-dock { right: 12px; bottom: 12px; } .np-toast { right: 12px; } }

        .theme-btn {
            display: inline-flex; align-items: center; justify-content: center;
            width: 29px; height: 29px; padding: 0;
            border-radius: 50%; border: 1px solid rgba(95,153,187,0.25); background: none;
            color: #fff; cursor: pointer; transition: all 0.18s;
        }
        .theme-btn:hover { background: rgba(95,153,187,0.12); border-color: rgba(95,153,187,0.45); }
        .theme-btn .ti { font-size: 0.9rem; }
        .theme-btn .m-sun { display: none; }
        :root[data-theme="dark"] .theme-btn .m-moon { display: none; }
        :root[data-theme="dark"] .theme-btn .m-sun { display: inline-block; color: var(--yellow); }
        /* ── DARK MODE (page body) ── */
        :root[data-theme="dark"] :is(.showcase-zone,.modules-zone,.gis-zone) {
            --prussian: #e9f3fb; --dark-grey: #bcd6ea; --alice: #05233a;
        }
        :root[data-theme="dark"] .modules-zone { background: #072e4c; }
        :root[data-theme="dark"] :is(.show-tab,.module-card) { background: rgba(95,153,187,0.08); border-color: rgba(95,153,187,0.22); }
        :root[data-theme="dark"] .module-icon { background: rgba(173,221,246,0.12); border-color: rgba(95,153,187,0.3); }
        :root[data-theme="dark"] .showcase-footer { border-top-color: rgba(95,153,187,0.22); }