:root {
    --navy: #07152f;
    --navy-2: #0b2147;
    --blue: #1769ff;
    --cyan: #12c8e8;
    --violet: #7657ff;
    --emerald: #1bc98e;
    --ink: #10203d;
    --muted: #60708e;
    --bg: #f5f8fc;
    --surface: #fff;
    --line: #dce5f1;
    --shadow: 0 18px 50px rgba(8,25,56,.12);
    --r-sm: 12px;
    --r: 20px;
    --r-lg: 32px;
    --container: 1180px;
    --header: 76px;
    --ease: 180ms ease
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    font: 16px/1.65 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
    color: var(--ink);
    background: var(--surface);
    -webkit-font-smoothing: antialiased
}

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

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

button, input, select, textarea {
    font: inherit
}

.container {
    width: min(calc(100% - 40px),var(--container));
    margin: auto
}

.skip {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 1000;
    padding: 10px 16px;
    background: #fff;
    transform: translateY(-150%)
}

    .skip:focus {
        transform: none
    }

.header {
    height: var(--header);
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(7,21,47,.94);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255,255,255,.1)
}

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

.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #fff;
    font-weight: 800;
    letter-spacing: -.02em;
    white-space: nowrap
}

.mark {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg,var(--cyan),var(--blue) 44%,var(--violet));
    font-size: 14px;
    box-shadow: 0 8px 22px rgba(23,105,255,.3)
}

.brand small {
    display: block;
    color: #9eb3d2;
    font-size: 10px;
    letter-spacing: .2em;
    font-weight: 600
}

.navlinks {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-left: auto
}

    .navlinks a {
        color: #c6d3e7;
        font-size: 14px;
        font-weight: 650;
        transition: color var(--ease)
    }

        .navlinks a:hover, .navlinks a[aria-current=page] {
            color: #fff
        }

.menu {
    display: none;
    margin-left: auto;
    border: 1px solid #50617e;
    background: transparent;
    color: #fff;
    border-radius: 10px;
    padding: 9px 12px
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 20px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-weight: 750;
    cursor: pointer;
    transition: transform var(--ease),box-shadow var(--ease),background var(--ease)
}

    .btn:hover {
        transform: translateY(-2px)
    }

    .btn:active {
        transform: none
    }

    .btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
        outline: 3px solid #73e4f5;
        outline-offset: 3px
    }

.btn-primary {
    color: #fff;
    background: linear-gradient(135deg,var(--blue),var(--violet));
    box-shadow: 0 12px 30px rgba(23,105,255,.28)
}

.btn-light {
    background: #fff;
    color: var(--navy)
}

.btn-outline {
    border-color: #b9c8dc;
    color: var(--ink);
    background: transparent
}

.header .btn {
    min-height: 42px;
    padding: 0 16px;
    color: #fff
}

.hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: radial-gradient(circle at 82% 24%,rgba(118,87,255,.28),transparent 30%),radial-gradient(circle at 60% 90%,rgba(18,200,232,.15),transparent 32%),var(--navy);
    padding: 92px 0 82px
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.04fr .96fr;
    gap: 64px;
    align-items: center
}

.eyebrow {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    color: #57dcf0;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase
}

    .eyebrow:before {
        content: "";
        width: 28px;
        height: 2px;
        background: currentColor
    }

.hero h1, .page-hero h1 {
    font-size: clamp(2.65rem,5vw,4.7rem);
    line-height: 1.04;
    letter-spacing: -.055em;
    margin: 18px 0 22px
}

.gradient-text {
    background: linear-gradient(90deg,#fff,#6ee7f6 55%,#b7a9ff);
    -webkit-background-clip: text;
    color: transparent
}

.hero p {
    color: #b8c9e0;
    font-size: 18px;
    max-width: 650px
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px
}

.trust {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 34px;
    color: #dce6f5;
    font-weight: 650
}

    .trust strong {
        font-size: 28px;
        color: #fff
    }

.visual {
    position: relative;
    min-height: 470px
}

.dashboard {
    position: absolute;
    inset: 30px 0 30px 28px;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.17);
    border-radius: 28px;
    background: rgba(255,255,255,.07);
    box-shadow: 0 36px 80px rgba(0,0,0,.3);
    backdrop-filter: blur(12px);
    transform: perspective(1000px) rotateY(-7deg)
}

.dash-top {
    height: 38px;
    display: flex;
    gap: 7px;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,.1)
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #526584
}

.dash-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 13px;
    padding-top: 14px
}

.panel {
    min-height: 118px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 15px;
    background: rgba(3,16,38,.55);
    padding: 16px
}

    .panel.wide {
        grid-column: 1/-1;
        min-height: 145px
    }

.bars {
    display: flex;
    height: 80px;
    gap: 9px;
    align-items: flex-end
}

    .bars i {
        flex: 1;
        border-radius: 5px 5px 0 0;
        background: linear-gradient(var(--cyan),var(--blue));
        opacity: .9
    }

.metric {
    font-size: 28px;
    font-weight: 800
}

.mini {
    font-size: 12px;
    color: #93a7c4
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 17px
}

.chip {
    padding: 7px 10px;
    border-radius: 8px;
    background: #163568;
    color: #a9c9ff;
    font-size: 11px
}

.section {
    padding: 92px 0
}

    .section.alt {
        background: var(--bg)
    }

    .section.dark {
        background: var(--navy);
        color: #fff
    }

.heading {
    max-width: 720px;
    margin-bottom: 42px
}

    .heading.center {
        text-align: center;
        margin-inline: auto
    }

    .heading h2 {
        font-size: clamp(2rem,3.6vw,3.3rem);
        line-height: 1.12;
        letter-spacing: -.045em;
        margin: 12px 0 15px
    }

    .heading p, .muted {
        color: var(--muted)
    }

.dark .heading p, .dark .muted {
    color: #aebfd7
}

.grid {
    display: grid;
    gap: 20px
}

.grid-2 {
    grid-template-columns: repeat(2,1fr)
}

.grid-3 {
    grid-template-columns: repeat(3,1fr)
}

.grid-4 {
    grid-template-columns: repeat(4,1fr)
}

.card {
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: #fff;
    box-shadow: 0 8px 28px rgba(8,25,56,.05);
    transition: transform var(--ease),box-shadow var(--ease),border-color var(--ease)
}

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

.icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    margin-bottom: 20px;
    color: var(--blue);
    background: #edf4ff
}

    .icon svg {
        width: 24px;
        height: 24px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.8
    }

.card h3 {
    font-size: 19px;
    margin: 0 0 8px
}

.card p {
    color: var(--muted);
    margin: 0
}

.card-link {
    display: inline-block;
    color: var(--blue);
    font-weight: 750;
    margin-top: 18px
}

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center
}

.checks {
    display: grid;
    gap: 15px;
    margin-top: 25px
}

.check {
    display: flex;
    gap: 12px
}

    .check:before {
        content: "✓";
        width: 24px;
        height: 24px;
        flex: 0 0 24px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: #dff9f0;
        color: #087a53;
        font-weight: 900
    }

.platform {
    padding: 28px;
    border-radius: var(--r-lg);
    background: linear-gradient(145deg,#102852,#07152f);
    border: 1px solid #28426c
}

.flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap
}

.node {
    padding: 14px 18px;
    border: 1px solid #3e5d8d;
    background: #122e5e;
    border-radius: 12px;
    font-weight: 750
}

.arrow {
    color: var(--cyan)
}

.subnodes {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 22px
}

    .subnodes span {
        padding: 8px 12px;
        background: rgba(118,87,255,.14);
        color: #cabfff;
        border-radius: 9px;
        font-size: 13px
    }

.timeline {
    border-left: 2px solid #b9d3fa;
    margin-left: 12px;
    padding-left: 28px
}

    .timeline article {
        position: relative;
        margin-bottom: 28px
    }

        .timeline article:before {
            content: "";
            position: absolute;
            width: 14px;
            height: 14px;
            border: 4px solid #fff;
            border-radius: 50%;
            background: var(--blue);
            left: -36px;
            top: 6px;
            box-shadow: 0 0 0 1px var(--blue)
        }

.process {
    counter-reset: step
}

.step {
    position: relative;
    padding: 24px 20px 24px 60px;
    border-top: 1px solid var(--line)
}

    .step:before {
        counter-increment: step;
        content: counter(step);
        position: absolute;
        left: 8px;
        top: 20px;
        width: 34px;
        height: 34px;
        border-radius: 10px;
        display: grid;
        place-items: center;
        background: var(--navy);
        color: #fff;
        font-weight: 800
    }

.showcase {
    overflow: hidden;
    border-radius: var(--r-lg);
    background: #091a39;
    color: #fff;
    padding: 30px
}

.tabs {
    display: flex;
    gap: 8px;
    overflow: auto;
    padding-bottom: 12px
}

.tab {
    white-space: nowrap;
    border: 1px solid #395073;
    color: #b4c3d8;
    background: transparent;
    border-radius: 9px;
    padding: 9px 13px;
    cursor: pointer
}

    .tab.active {
        background: var(--blue);
        border-color: var(--blue);
        color: #fff
    }

.screen {
    display: none;
    grid-template-columns: 190px 1fr;
    min-height: 310px;
    border: 1px solid #294164;
    border-radius: 16px;
    overflow: hidden;
    background: #0d244b
}

    .screen.active {
        display: grid
    }

.side {
    padding: 22px;
    border-right: 1px solid #294164
}

    .side b {
        display: block;
        margin-bottom: 26px
    }

    .side span {
        display: block;
        padding: 8px;
        margin: 5px 0;
        color: #91a6c4;
        font-size: 12px
    }

.main-ui {
    padding: 24px
}

.ui-cards {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px
}

.ui-card {
    background: #132f5e;
    border-radius: 11px;
    padding: 14px
}

.chart {
    height: 125px;
    margin-top: 18px;
    border-radius: 11px;
    background: linear-gradient(180deg,rgba(18,200,232,.18),transparent),repeating-linear-gradient(0deg,transparent,transparent 29px,#25466f 30px)
}

.cta {
    padding: 55px;
    border-radius: var(--r-lg);
    background: linear-gradient(120deg,var(--blue),var(--violet));
    color: #fff;
    display: flex;
    justify-content: space-between;
    gap: 30px;
    align-items: center
}

    .cta h2 {
        font-size: clamp(1.8rem,4vw,3rem);
        margin: 0
    }

.page-hero {
    padding: 78px 0;
    background: radial-gradient(circle at 80%,rgba(118,87,255,.25),transparent 30%),var(--navy);
    color: #fff
}

    .page-hero h1 {
        font-size: clamp(2.5rem,5vw,4rem);
        margin-bottom: 14px
    }

    .page-hero p {
        color: #b8c9e0;
        font-size: 18px;
        max-width: 720px
    }

.breadcrumb {
    color: #8edfeb;
    font-size: 14px
}

.details {
    display: grid;
    gap: 18px
}

.detail {
    padding: 25px;
    border-bottom: 1px solid var(--line)
}

.tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

.tag {
    padding: 9px 13px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: #385074;
    background: #fff
}

.form {
    display: grid;
    gap: 18px
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px
}

.field label {
    display: block;
    font-weight: 700;
    margin-bottom: 7px
}

.field input, .field select, .field textarea {
    width: 100%;
    border: 1px solid #bdcadd;
    border-radius: 11px;
    padding: 13px 14px;
    background: #fff;
    color: var(--ink)
}

.field textarea {
    min-height: 140px;
    resize: vertical
}

.field small {
    color: var(--muted)
}

.consent {
    display: flex;
    gap: 10px;
    align-items: flex-start
}

.honeypot {
    position: absolute;
    left: -10000px
}

.alert {
    display: none;
    padding: 14px;
    border-radius: 10px
}

    .alert.show {
        display: block
    }

    .alert.info {
        background: #e8f3ff;
        color: #164b88
    }

.contact-panel {
    padding: 32px;
    border-radius: var(--r);
    background: var(--navy);
    color: #fff
}

.placeholder {
    padding: 14px;
    border: 1px dashed #5e7393;
    border-radius: 10px;
    color: #b8c9e0;
    margin-top: 12px
}

.footer {
    background: #050f23;
    color: #a9b8ce;
    padding: 64px 0 24px
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(3,1fr);
    gap: 40px
}

.footer h3 {
    color: #fff;
    font-size: 14px
}

.footer a {
    display: block;
    margin: 8px 0;
    font-size: 14px
}

    .footer a:hover {
        color: #fff
    }

.foot-bottom {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid #20304d;
    margin-top: 42px;
    padding-top: 22px;
    font-size: 13px
}

.backtop {
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 12px;
    background: var(--blue);
    color: #fff;
    box-shadow: var(--shadow);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--ease)
}

    .backtop.show {
        opacity: 1;
        pointer-events: auto
    }

.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: .6s ease
}

    .reveal.visible {
        opacity: 1;
        transform: none
    }

@media(max-width:980px) {
    .navlinks {
        position: fixed;
        inset: var(--header) 0 auto;
        background: var(--navy);
        padding: 22px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        border-top: 1px solid #30425f
    }

        .navlinks.open {
            display: flex
        }

    .menu {
        display: block
    }

    .header .btn {
        display: none
    }

    .hero-grid, .split {
        grid-template-columns: 1fr
    }

    .visual {
        min-height: 390px
    }

    .grid-4 {
        grid-template-columns: repeat(2,1fr)
    }

    .grid-3 {
        grid-template-columns: repeat(2,1fr)
    }

    .footer-grid {
        grid-template-columns: repeat(2,1fr)
    }
}

@media(max-width:640px) {
    .container {
        width: min(calc(100% - 28px),var(--container))
    }

    .nav {
        gap: 10px
    }

    .brand {
        font-size: 14px
    }

        .brand small {
            display: none
        }

    .mark {
        width: 36px;
        height: 36px
    }

    .hero, .section {
        padding: 68px 0
    }

        .hero h1 {
            font-size: 2.55rem
        }

    .visual {
        min-height: 340px
    }

    .dashboard {
        inset: 10px 0;
        transform: none
    }

    .grid-2, .grid-3, .grid-4, .form-row {
        grid-template-columns: 1fr
    }

    .cta {
        padding: 34px 24px;
        align-items: flex-start;
        flex-direction: column
    }

    .screen.active {
        grid-template-columns: 1fr
    }

    .side {
        display: none
    }

    .ui-cards {
        grid-template-columns: 1fr
    }

    .footer-grid {
        grid-template-columns: 1fr
    }

    .foot-bottom {
        flex-direction: column
    }

    .actions .btn {
        width: 100%
    }

    .flow {
        align-items: stretch;
        flex-direction: column
    }

    .arrow {
        transform: rotate(90deg);
        text-align: center
    }
}

@media(max-width:370px) {
    .brand {
        font-size: 12px
    }

    .mark {
        width: 32px;
        height: 32px
    }

    .menu {
        padding: 8px 9px;
        font-size: 13px
    }
}

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

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

    .reveal {
        opacity: 1;
        transform: none
    }
}

/* Single-page Elevon presentation */
.one-page section {
    scroll-margin-top: var(--header)
}

.brand-logo {
    height: 64px;
    overflow: hidden
}

    .brand-logo img {
        width: 58px;
        height: 64px;
        object-fit: cover;
        object-position: 50% 12%
    }

.color-home {
    background: radial-gradient(circle at 78% 20%,rgba(255,43,138,.25),transparent 26%),radial-gradient(circle at 54% 95%,rgba(18,200,232,.22),transparent 34%),var(--navy)
}

.color-about {
    background: linear-gradient(135deg,#f3fbff 0%,#faf7ff 50%,#effff9 100%)
}

.color-solutions {
    background: linear-gradient(145deg,#fff5f9,#f5f6ff 45%,#ecfbff)
}

.color-services {
    background: linear-gradient(135deg,#fff9e9,#f4fff8 55%,#eff7ff)
}

.color-tech {
    background: radial-gradient(circle at 14% 20%,rgba(18,200,232,.17),transparent 28%),radial-gradient(circle at 90% 85%,rgba(118,87,255,.2),transparent 30%),var(--navy)
}

.color-leadership {
    background: linear-gradient(125deg,#f1f3ff,#fff4fa)
}

.color-contact {
    background: linear-gradient(135deg,#edfbff,#f6f1ff)
}

.glass-stat {
    min-height: 430px;
    padding: 35px;
    display: grid;
    place-items: center;
    text-align: center;
    border: 1px solid rgba(255,255,255,.8);
    border-radius: var(--r-lg);
    background: rgba(255,255,255,.7);
    box-shadow: var(--shadow);
    backdrop-filter: blur(14px)
}

    .glass-stat img {
        max-height: 310px;
        width: auto
    }

.ceo-placeholder {
    aspect-ratio: 4/5;
    max-width: 430px;
    width: 100%;
    margin: auto;
    border-radius: var(--r-lg);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 32px;
    color: #fff;
    background: radial-gradient(circle at 50% 34%,#9daee3 0 15%,transparent 16%),radial-gradient(ellipse at 50% 78%,#52689f 0 32%,transparent 33%),linear-gradient(145deg,#172f63,#7256cb 65%,#ff3d8d);
    box-shadow: var(--shadow)
}

    .ceo-placeholder span {
        font-weight: 900;
        letter-spacing: .18em
    }

    .ceo-placeholder small {
        color: #d9e1ff
    }

.lead-role {
    color: var(--blue);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase
}

.contact-grid {
    display: grid;
    grid-template-columns: .78fr 1.22fr;
    gap: 22px
}

.contact-panel address {
    font-style: normal;
    color: #c8d5e8
}

.contact-panel a:hover {
    text-decoration: underline
}

.modal-note {
    display: block;
    color: #9fb1cc;
    margin-top: 18px
}

.map-wrap {
    min-height: 520px;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    background: #dce5f1
}

    .map-wrap iframe {
        border: 0;
        width: 100%;
        height: 100%;
        min-height: 520px
    }

.footer-single {
    text-align: center;
    display: grid;
    justify-items: center;
    gap: 10px
}

    .footer-single img {
        height: 105px;
        width: 95px;
        object-fit: cover;
        object-position: 50% 10%;
        border-radius: 12px
    }

    .footer-single a {
        display: inline
    }

.one-page .card {
    background: rgba(255,255,255,.88)
}

@media(max-width:780px) {
    .contact-grid {
        grid-template-columns: 1fr
    }

    .map-wrap, .map-wrap iframe {
        min-height: 400px
    }

    .brand-logo img {
        width: 52px
    }

    .glass-stat {
        min-height: auto
    }

    .ceo-placeholder {
        max-width: 330px
    }
}

/* Icon-led panels */
.icon-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden
}

.icon svg, .service-icon svg, .mini-icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round
}

.solution-card {
    position: relative;
    overflow: hidden;
    border-top: 3px solid var(--accent,var(--blue));
    background: linear-gradient(145deg,#fff,var(--wash,#edf4ff)) !important
}

    .solution-card:after {
        content: "";
        position: absolute;
        width: 90px;
        height: 90px;
        border-radius: 50%;
        right: -34px;
        top: -40px;
        background: var(--accent);
        opacity: .08
    }

    .solution-card .icon {
        color: var(--accent);
        background: var(--wash)
    }

.c-blue {
    --accent: #1769ff;
    --wash: #edf4ff
}

.c-violet {
    --accent: #7657ff;
    --wash: #f2efff
}

.c-pink {
    --accent: #e72b83;
    --wash: #fff0f7
}

.c-orange {
    --accent: #ef7b16;
    --wash: #fff5e9
}

.c-green {
    --accent: #10a875;
    --wash: #eafbf5
}

.c-cyan {
    --accent: #08a9c4;
    --wash: #eafcff
}

.c-indigo {
    --accent: #334fc4;
    --wash: #eef1ff
}

.c-magenta {
    --accent: #b62ac7;
    --wash: #fcf0ff
}

.service-card {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    background: linear-gradient(145deg,rgba(255,255,255,.98),rgba(238,246,255,.9)) !important
}

.service-icon {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg,var(--blue),var(--violet));
    box-shadow: 0 10px 22px rgba(50,91,214,.22)
}

.feature-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 26px
}

.feature-panel {
    display: flex;
    gap: 12px;
    align-items: center;
    min-height: 82px;
    padding: 15px;
    border: 1px solid var(--feature-line);
    border-radius: 16px;
    background: var(--feature-bg);
    font-weight: 700;
    color: #22385a
}

.mini-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    color: var(--feature-color);
    background: #fff;
    box-shadow: 0 6px 16px rgba(8,25,56,.08)
}

    .mini-icon svg {
        width: 20px;
        height: 20px
    }

.feature-panel.aqua {
    --feature-bg: #e9fbfd;
    --feature-line: #b8edf3;
    --feature-color: #078fa7
}

.feature-panel.violet {
    --feature-bg: #f2efff;
    --feature-line: #d8ceff;
    --feature-color: #694be0
}

.feature-panel.blue {
    --feature-bg: #edf4ff;
    --feature-line: #c8dcff;
    --feature-color: #1769ff
}

.feature-panel.green {
    --feature-bg: #ebfbf5;
    --feature-line: #c0eedc;
    --feature-color: #0b976a
}

@media(max-width:780px) {
    .feature-panels {
        grid-template-columns: 1fr
    }

    .service-card {
        padding: 22px
    }
}

.node svg, .tech-subgrid svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round
}

.tech-panel .node {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    box-shadow: 0 10px 24px rgba(0,0,0,.18)
}

    .tech-panel .node svg {
        color: #62e0f3
    }

.tech-subgrid {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 10px;
    margin-top: 25px
}

    .tech-subgrid span {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 66px;
        padding: 12px;
        border: 1px solid #3b5680;
        border-radius: 13px;
        background: linear-gradient(145deg,rgba(118,87,255,.16),rgba(18,200,232,.08));
        color: #d8e5f7;
        font-size: 13px;
        text-align: center
    }

    .tech-subgrid svg {
        color: #78e2f1;
        flex: 0 0 auto
    }

@media(max-width:780px) {
    .tech-subgrid {
        grid-template-columns: 1fr 1fr
    }

    .tech-panel {
        padding: 24px
    }
}

@media(max-width:420px) {
    .tech-subgrid {
        grid-template-columns: 1fr
    }
}

.one-page .section {
    padding: 64px 0
}

.one-page .hero {
    padding: 68px 0 60px
}

.one-page .heading {
    margin-bottom: 30px
}

    .one-page .heading h2 {
        margin-top: 8px;
        margin-bottom: 10px
    }

.one-page .grid {
    gap: 16px
}

.one-page .card {
    padding: 22px
}

    .one-page .card .icon {
        margin-bottom: 15px
    }

    .one-page .card h3 {
        margin-bottom: 5px
    }

.one-page .feature-panels {
    margin-top: 20px
}

.one-page .feature-panel {
    min-height: 70px;
    padding: 12px
}

.one-page .glass-stat {
    min-height: 360px;
    padding: 26px
}

    .one-page .glass-stat img {
        max-height: 260px
    }

.one-page .platform {
    padding: 24px
}

.one-page .ceo-placeholder {
    max-width: 360px
}

.one-page .contact-grid {
    align-items: stretch
}

.one-page .contact-panel {
    padding: 28px
}

.map-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #cbd8e9;
    border-radius: var(--r);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 20px 45px rgba(8,25,56,.13)
}

.map-card-head {
    min-height: 76px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(135deg,#fff,#f4f7ff)
}

    .map-card-head strong, .map-card-head small {
        display: block
    }

    .map-card-head small {
        color: var(--muted);
        margin-top: 1px
    }

    .map-card-head a {
        margin-left: auto;
        color: var(--blue);
        font-size: 13px;
        font-weight: 800
    }

.map-pin {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg,var(--blue),var(--violet));
    font-size: 24px
}

.map-wrap {
    flex: 1;
    min-height: 390px;
    border-radius: 0;
    box-shadow: none;
    background: #dce5f1
}

    .map-wrap iframe {
        min-height: 390px
    }

.one-page .footer {
    padding-top: 46px
}

@media(max-width:780px) {
    .one-page .section {
        padding: 52px 0
    }

    .one-page .hero {
        padding: 54px 0 48px
    }

    .one-page .heading {
        margin-bottom: 24px
    }

    .one-page .glass-stat {
        min-height: 280px
    }

    .map-card-head {
        align-items: flex-start;
        flex-wrap: wrap
    }

        .map-card-head a {
            margin-left: 54px
        }

    .map-wrap, .map-wrap iframe {
        min-height: 340px
    }
}

/* Premium motion system and structural hero containment */
:root {
    --duration-fast: 140ms;
    --duration-normal: 240ms;
    --duration-slow: 680ms;
    --ease: cubic-bezier(.2,.7,.2,1);
    --ease-enter: cubic-bezier(.16,1,.3,1);
    --hover-lift: -4px;
    --shadow-hover: 0 22px 54px rgba(8,25,56,.16)
}

.hero-grid {
    grid-template-columns: minmax(0,1.04fr) minmax(0,.96fr);
    gap: clamp(30px,5vw,64px)
}

    .hero-grid > * {
        min-width: 0
    }

.visual {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: clip;
    padding: 28px 14px
}

.dashboard {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: 560px;
    min-width: 0;
    box-sizing: border-box;
    transform: perspective(1000px) rotateY(-3deg);
    overflow: hidden
}

.dash-grid, .panel, .chips {
    min-width: 0
}

.chip, .mini, .metric {
    overflow-wrap: anywhere
}

.dashboard:after {
    content: "";
    position: absolute;
    inset: -70% auto -70% -35%;
    width: 24%;
    background: linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent);
    transform: skewX(-16deg);
    animation: dashboard-shine 7s 1.4s ease-in-out infinite;
    pointer-events: none
}

.hero:before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom,#000,transparent 86%);
    pointer-events: none
}

.color-home {
    background-size: 130% 130%;
    animation: hero-gradient 14s ease-in-out infinite alternate
}

.visual {
    animation: dashboard-float 6s ease-in-out infinite
}

.panel.wide {
    position: relative
}

    .panel.wide:after {
        content: "";
        position: absolute;
        left: 16px;
        right: 16px;
        bottom: 10px;
        height: 2px;
        background: linear-gradient(90deg,transparent,var(--cyan),var(--violet),transparent);
        background-size: 200% 100%;
        animation: data-flow 3.5s linear infinite
    }

.header {
    transition: background var(--duration-normal) var(--ease),border-color var(--duration-normal) var(--ease),box-shadow var(--duration-normal) var(--ease)
}

    .header.scrolled {
        background: rgba(5,15,35,.985);
        border-bottom-color: rgba(116,151,206,.2);
        box-shadow: 0 10px 30px rgba(1,9,24,.22)
    }

.navlinks a {
    position: relative;
    padding: 8px 0
}

    .navlinks a:after {
        content: "";
        position: absolute;
        left: 50%;
        right: 50%;
        bottom: 2px;
        height: 2px;
        border-radius: 2px;
        background: linear-gradient(90deg,var(--cyan),var(--violet));
        transition: left var(--duration-normal) var(--ease),right var(--duration-normal) var(--ease)
    }

    .navlinks a:hover:after, .navlinks a:focus-visible:after, .navlinks a.active:after {
        left: 0;
        right: 0
    }

    .navlinks a.active {
        color: #fff
    }

.btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform var(--duration-fast) var(--ease),box-shadow var(--duration-normal) var(--ease),border-color var(--duration-normal) var(--ease),background-position var(--duration-normal) var(--ease)
}

    .btn:before {
        content: "";
        position: absolute;
        z-index: -1;
        inset: -100% auto -100% -35%;
        width: 25%;
        background: rgba(255,255,255,.18);
        transform: skewX(-18deg) translateX(-300%);
        transition: transform 480ms var(--ease)
    }

    .btn:hover:before {
        transform: skewX(-18deg) translateX(650%)
    }

    .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 34px rgba(23,105,255,.24)
    }

    .btn:active {
        transform: translateY(0)
    }

    .btn:disabled {
        opacity: .58;
        cursor: not-allowed;
        transform: none;
        box-shadow: none
    }

    .btn.loading:after {
        content: "";
        width: 15px;
        height: 15px;
        border: 2px solid currentColor;
        border-right-color: transparent;
        border-radius: 50%;
        animation: spin .7s linear infinite
    }

.card, .feature-panel, .node, .tech-subgrid span, .contact-panel, .map-card {
    transition: transform var(--duration-normal) var(--ease),box-shadow var(--duration-normal) var(--ease),border-color var(--duration-normal) var(--ease),background var(--duration-normal) var(--ease)
}

    .card:hover, .card:focus-within, .feature-panel:hover, .node:hover, .tech-subgrid span:hover {
        transform: translateY(var(--hover-lift));
        box-shadow: var(--shadow-hover);
        border-color: #a9c3e6
    }

        .card:hover .icon, .service-card:hover .service-icon {
            transform: translateY(-2px);
            filter: saturate(1.12)
        }

.icon, .service-icon {
    transition: transform var(--duration-normal) var(--ease),filter var(--duration-normal) var(--ease)
}

.reveal {
    opacity: 1;
    transform: none
}

.js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--duration-slow) var(--ease-enter),transform var(--duration-slow) var(--ease-enter);
    transition-delay: var(--stagger,0ms)
}

    .js .reveal.visible {
        opacity: 1;
        transform: none
    }

.hero-grid > div:first-child > * {
    animation: hero-enter 700ms var(--ease-enter) both
}

.hero-grid > div:first-child > .eyebrow {
    animation-delay: 50ms
}

.hero-grid > div:first-child > h1 {
    animation-delay: 130ms
}

.hero-grid > div:first-child > p {
    animation-delay: 210ms
}

.hero-grid > div:first-child > .actions {
    animation-delay: 290ms
}

.hero-grid > div:first-child > .trust {
    animation-delay: 370ms
}

.hero-grid > .visual {
    animation: hero-enter 800ms 310ms var(--ease-enter) both,dashboard-float 6s 1.2s ease-in-out infinite
}

@keyframes hero-enter {
    from {
        opacity: 0;
        transform: translateY(18px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes dashboard-float {
    0%,100% {
        translate: 0 0
    }

    50% {
        translate: 0 -7px
    }
}

@keyframes dashboard-shine {
    0%,70% {
        transform: skewX(-16deg) translateX(-300%)
    }

    100% {
        transform: skewX(-16deg) translateX(750%)
    }
}

@keyframes hero-gradient {
    to {
        background-position: 70% 30%
    }
}

@keyframes data-flow {
    to {
        background-position: -200% 0
    }
}

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

@media(max-width:980px) {
    .hero-grid {
        grid-template-columns: minmax(0,1fr)
    }

    .visual {
        width: 100%;
        max-width: 680px;
        min-height: 360px;
        margin-inline: auto
    }

    .dashboard {
        transform: none
    }

    .navlinks {
        display: flex;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        pointer-events: none;
        transition: opacity var(--duration-normal) var(--ease),transform var(--duration-normal) var(--ease),visibility var(--duration-normal)
    }

        .navlinks.open {
            opacity: 1;
            visibility: visible;
            transform: none;
            pointer-events: auto
        }
}

@media(max-width:640px) {
    .visual {
        min-height: 300px;
        padding: 14px 0
    }

    .dashboard {
        width: 100%;
        padding: 14px
    }

    .dash-grid {
        grid-template-columns: minmax(0,1fr) minmax(0,.8fr)
    }

    .panel {
        padding: 12px
    }

        .panel.wide {
            min-height: 112px
        }

    .bars {
        height: 66px
    }

    .hero-grid > .visual {
        animation: hero-enter 700ms 260ms var(--ease-enter) both
    }
}

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

    .color-home, .visual, .hero-grid > .visual, .hero-grid > div:first-child > *, .dashboard:after, .panel.wide:after, .btn.loading:after {
        animation: none !important
    }

    .js .reveal {
        opacity: 1;
        transform: none;
        transition: none
    }

    .card:hover, .feature-panel:hover, .node:hover, .tech-subgrid span:hover, .btn:hover {
        transform: none
    }
}

@media(max-width:480px) {
    .visual {
        min-height: 245px
    }

    .dashboard .panel {
        min-height: 94px
    }

        .dashboard .panel.wide {
            display: none
        }

    .dashboard .dash-grid {
        grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr)
    }

    .dashboard .bars {
        height: 55px
    }

    .dashboard .chips {
        gap: 5px;
        margin-top: 9px
    }

    .dashboard .chip {
        padding: 5px 7px;
        font-size: 10px
    }

    .dashboard .metric {
        font-size: 22px
    }

    .hero .trust {
        margin-top: 24px
    }
}

/* Reusable high-contrast brand treatment */
.site-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    color: #fff;
    text-decoration: none;
    border-radius: 10px;
    transition: opacity var(--duration-normal) var(--ease)
}

    .site-brand:hover {
        opacity: .92
    }

    .site-brand:focus-visible {
        outline: 3px solid #73e4f5;
        outline-offset: 4px
    }

.site-brand__mark {
    display: block;
    flex: 0 0 auto;
    width: auto;
    object-fit: contain
}

.site-brand__identity {
    display: grid;
    min-width: 0;
    line-height: 1
}

.site-brand__name {
    color: #fff;
    font-size: 21px;
    font-weight: 820;
    letter-spacing: -.035em
}

.site-brand__descriptor {
    margin-top: 3px;
    color: #cbd5e5;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .22em;
    text-transform: uppercase
}

.site-brand__tagline {
    margin-top: 6px;
    color: #75dff0;
    font-size: 8px;
    font-weight: 750;
    letter-spacing: .065em;
    text-transform: uppercase;
    white-space: nowrap
}

    .site-brand__tagline i {
        color: #d9e1ed;
        font-style: normal;
        margin-inline: 3px
    }

.site-brand--header {
    height: var(--header);
    flex: 0 1 auto
}

    .site-brand--header .site-brand__mark {
        height: 50px
    }

    .site-brand--header .site-brand__tagline {
        display: none
    }

.site-brand--footer {
    justify-content: center;
    text-align: left
}

    .site-brand--footer .site-brand__mark {
        height: 66px
    }

    .site-brand--footer .site-brand__name {
        font-size: 27px
    }

    .site-brand--footer .site-brand__descriptor {
        font-size: 10px
    }

    .site-brand--footer .site-brand__tagline {
        font-size: 9px
    }

.footer-single > img {
    display: none
}

@media(min-width:1280px) {
    .site-brand--header .site-brand__tagline {
        display: block
    }
}

/* About and leadership editorial panels */
.color-about,.color-leadership{position:relative;overflow:hidden}.color-about:before,.color-leadership:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle at 12% 15%,rgba(18,200,232,.09),transparent 24%),linear-gradient(rgba(23,105,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(23,105,255,.025) 1px,transparent 1px);background-size:auto,38px 38px,38px 38px}.color-leadership:before{background-image:radial-gradient(circle at 88% 22%,rgba(118,87,255,.12),transparent 28%),linear-gradient(rgba(118,87,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(118,87,255,.025) 1px,transparent 1px)}.color-about>.container,.color-leadership>.container{position:relative}.about-heading,.leadership-heading{max-width:760px;margin-bottom:28px}.about-heading h2,.leadership-heading h2{font-size:clamp(2rem,3.6vw,3.15rem);line-height:1.1;letter-spacing:-.045em;margin:9px 0 10px}.about-heading p,.leadership-heading p{max-width:680px;margin:0;color:var(--muted);font-size:17px}.about-layout{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);gap:20px;align-items:stretch}.about-story,.evolution-panel{position:relative;min-width:0;padding:clamp(24px,3vw,36px);border:1px solid rgba(134,166,207,.42);border-radius:var(--r);overflow:hidden;box-shadow:0 18px 45px rgba(8,25,56,.09)}.about-story{background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(239,248,255,.91))}.about-story__accent{position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--blue),var(--cyan),var(--violet))}.about-intro{max-width:650px;margin:0 0 13px;color:#203b64;font-size:clamp(1.08rem,1.5vw,1.24rem);font-weight:690;line-height:1.5}.about-story>p:not(.about-intro){max-width:690px;color:var(--muted);margin:0}.experience-card{display:flex;align-items:center;gap:18px;margin-top:24px;padding:18px;border:1px solid #c9dcf4;border-radius:16px;background:rgba(255,255,255,.8);box-shadow:inset 0 1px rgba(255,255,255,.9)}.experience-card>strong{flex:0 0 auto;font-size:clamp(2.25rem,4vw,3.2rem);line-height:1;background:linear-gradient(135deg,var(--blue),var(--cyan));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.experience-card span,.experience-card small{display:block}.experience-card b{color:#19365d}.experience-card small{margin-top:3px;color:var(--muted)}.about-capabilities{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 0;padding:0;list-style:none}.about-capabilities li{display:flex;align-items:center;gap:10px;padding:11px;border:1px solid #d7e5f4;border-radius:13px;background:rgba(255,255,255,.68);font-size:13px}.about-capabilities .mini-icon{width:34px;height:34px;flex-basis:34px}.evolution-panel{color:#fff;background:radial-gradient(circle at 100% 0,rgba(118,87,255,.25),transparent 36%),linear-gradient(145deg,#102a55,#091932);border-color:#314b75}.evolution-panel:after{content:"";position:absolute;width:180px;height:180px;right:-90px;bottom:-100px;border:1px solid rgba(18,200,232,.22);border-radius:50%}.evolution-panel__top{display:flex;align-items:center;gap:12px}.evolution-panel__top .mini-icon{color:#fff;background:linear-gradient(135deg,var(--blue),var(--violet))}.evolution-panel__top small{color:#72dceb;font-weight:750;text-transform:uppercase;letter-spacing:.1em}.evolution-panel h3{margin:2px 0 0;font-size:22px}.evolution-path{position:relative;display:grid;gap:0;margin:25px 0 20px;padding:0;list-style:none}.evolution-path:before{content:"";position:absolute;left:17px;top:24px;bottom:24px;width:2px;background:linear-gradient(var(--cyan),var(--violet))}.evolution-path li{position:relative;display:flex;align-items:center;gap:14px;padding:11px 0}.evolution-path li>span{position:relative;z-index:1;width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;border:1px solid #5275a8;border-radius:11px;background:#122e5d;color:#77e2f1;font-size:11px;font-weight:800}.evolution-path b,.evolution-path small{display:block}.evolution-path small{color:#9fb2cc}.evolution-note{display:flex;gap:11px;padding:14px;border:1px solid #344f78;border-radius:13px;background:rgba(255,255,255,.045)}.evolution-note svg{width:22px;height:22px;flex:0 0 22px;fill:none;stroke:#5ee0f2;stroke-width:1.8}.evolution-note p{margin:0;color:#bdcbe0;font-size:13px}.leadership-heading{text-align:center;margin-inline:auto}.leadership-heading p{margin-inline:auto}.leadership-panel{display:grid;grid-template-columns:minmax(0,.9fr) 1px minmax(0,1.1fr);gap:clamp(24px,3vw,42px);align-items:center;padding:clamp(25px,4vw,44px);border:1px solid #d8d8ef;border-radius:var(--r-lg);background:radial-gradient(circle at 0 0,rgba(23,105,255,.08),transparent 27%),linear-gradient(145deg,rgba(255,255,255,.96),rgba(247,242,255,.93));box-shadow:0 22px 55px rgba(33,30,79,.11);overflow:hidden}.leadership-profile{display:grid;grid-template-columns:150px minmax(0,1fr);gap:22px;align-items:center}.leadership-profile .ceo-placeholder{max-width:150px;aspect-ratio:4/5;padding:16px;border-radius:18px}.leadership-profile .ceo-placeholder span{font-size:11px}.leadership-identity h3{font-size:clamp(1.7rem,2.5vw,2.25rem);margin:4px 0 9px}.leadership-identity p{margin:0;color:var(--muted)}.leadership-divider{width:1px;height:85%;background:linear-gradient(transparent,rgba(23,105,255,.42),rgba(118,87,255,.4),transparent)}.principles-label{display:block;margin-bottom:13px;color:#4c3e8e;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.leadership-principles ul{display:grid;gap:9px;margin:0;padding:0;list-style:none}.leadership-principles li{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #dedcf0;border-radius:14px;background:rgba(255,255,255,.68);transition:transform var(--duration-normal) var(--ease),border-color var(--duration-normal) var(--ease),box-shadow var(--duration-normal) var(--ease)}.leadership-principles li:hover,.leadership-principles li:focus-visible{transform:translateY(-2px);border-color:#b7b0e7;box-shadow:0 12px 26px rgba(52,46,111,.1);outline:none}.leadership-principles li:nth-child(2n) .mini-icon{color:#7b46c8;background:#f4edff}.leadership-principles b,.leadership-principles small{display:block}.leadership-principles small{margin-top:1px;color:var(--muted)}
@media(max-width:900px){.about-layout,.leadership-panel{grid-template-columns:1fr}.leadership-divider{width:100%;height:1px;background:linear-gradient(90deg,transparent,rgba(23,105,255,.42),rgba(118,87,255,.4),transparent)}.evolution-panel{min-height:auto}}
@media(max-width:560px){.about-heading,.leadership-heading{margin-bottom:21px}.about-story,.evolution-panel,.leadership-panel{padding:21px}.about-capabilities{grid-template-columns:1fr}.experience-card{align-items:flex-start}.leadership-profile{grid-template-columns:100px minmax(0,1fr);gap:15px}.leadership-profile .ceo-placeholder{max-width:100px;padding:10px}.leadership-profile .ceo-placeholder small{display:none}.leadership-principles li{align-items:flex-start}}
@media(max-width:380px){.leadership-profile{grid-template-columns:1fr}.leadership-profile .ceo-placeholder{max-width:140px;margin:0}.experience-card{flex-direction:column;gap:9px}}
@media(prefers-reduced-motion:reduce){.leadership-principles li:hover,.leadership-principles li:focus-visible{transform:none}}

@media(max-width:1080px) {
    .nav {
        gap: 18px
    }

    .navlinks {
        gap: 16px
    }

    .site-brand--header .site-brand__name {
        font-size: 19px
    }
}

@media(max-width:980px) {
    .site-brand--header {
        margin-right: auto
    }

        .site-brand--header .site-brand__mark {
            height: 42px
        }

        .site-brand--header .site-brand__name {
            font-size: 20px
        }

    .nav .menu {
        margin-left: 0
    }
}

@media(max-width:420px) {
    .site-brand {
        gap: 8px
    }

    .site-brand--header .site-brand__mark {
        height: 36px
    }

    .site-brand--header .site-brand__name {
        font-size: 17px
    }

    .site-brand--header .site-brand__descriptor {
        font-size: 8px;
        letter-spacing: .16em
    }

    .site-brand--footer {
        align-items: center
    }

        .site-brand--footer .site-brand__mark {
            height: 54px
        }

        .site-brand--footer .site-brand__name {
            font-size: 23px
        }

        .site-brand--footer .site-brand__tagline {
            font-size: 7px
        }
}

/* Multicolour brand tagline */
:root {
    --tagline-innovate: #38bdf8;
    --tagline-develop: #f472b6;
    --tagline-elevate: #4ade80;
    --tagline-bullet-one: #a78bfa;
    --tagline-bullet-two: #fbbf24
}

.site-brand__tagline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: clamp(.28rem,.55vw,.55rem);
    margin-top: 6px;
    font-size: clamp(.5rem,.7vw,.62rem);
    font-weight: 650;
    letter-spacing: clamp(.055em,.1vw,.1em);
    line-height: 1.35;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap
}

.site-brand__tagline-word--innovate {    
    color: var(--tagline-innovate);
    text-shadow: 0 0 9px rgba(56,189,248,.12)
}

.site-brand__tagline-word--develop {    
    color: var(--tagline-develop);
    text-shadow: 0 0 9px rgba(244,114,182,.1)
}

.site-brand__tagline-word--elevate {    
    color: var(--tagline-elevate);
    text-shadow: 0 0 9px rgba(74,222,128,.1)
}

.site-brand__tagline-bullet--one {
    color: var(--tagline-bullet-one)
}

.site-brand__tagline-bullet--two {
    color: var(--tagline-bullet-two)
}

.site-brand--footer {
    justify-content: center
}

    .site-brand--footer .site-brand__identity {
        justify-items: center;
        text-align: center
    }

    .site-brand--footer .site-brand__tagline {
        display: inline-flex;
        font-size: clamp(.58rem,1vw,.72rem);
        gap: clamp(.32rem,.8vw,.68rem)
    }

@media(max-width:370px) {
    .site-brand--footer .site-brand__tagline {
        font-size: .52rem;
        gap: .25rem;
        letter-spacing: .045em
    }
}

/* Refined gradient tagline and structurally centred footer brand */
:root {
    --tagline-innovate-gradient: linear-gradient(90deg,#2563eb 0%,#22d3ee 100%);
    --tagline-develop-gradient: linear-gradient(90deg,#db2777 0%,#fb7185 100%);
    --tagline-elevate-gradient: linear-gradient(90deg,#059669 0%,#4ade80 100%)
}

.site-brand__tagline-word {
    display: inline-block
}

.site-brand__tagline-word--innovate {
    color: #38bdf8;
    background: var(--tagline-innovate-gradient);
    text-shadow: 0 0 9px rgba(34,211,238,.11)
}

.site-brand__tagline-word--develop {
    color: #f472b6;
    background: var(--tagline-develop-gradient);
    text-shadow: 0 0 9px rgba(251,113,133,.1)
}

.site-brand__tagline-word--elevate {
    color: #4ade80;
    background: var(--tagline-elevate-gradient);
    text-shadow: 0 0 9px rgba(74,222,128,.1)
}

@supports ((-webkit-background-clip:text) or (background-clip:text)) {
    .site-brand__tagline-word {
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent
    }
}

.site-brand--header .site-brand__tagline {
    font-size: calc(clamp(.54rem,.62vw,.64rem) - 1px);
    letter-spacing: clamp(.055em,.1vw,.1em);
    gap: .225rem;
    line-height: 1.2
}

@media(min-width:1280px) {
    .site-brand--header .site-brand__tagline {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;
        white-space: nowrap
    }
}

.site-footer {
    position: relative;
    overflow: hidden
}

    .site-footer:before {
        content: "";
        position: absolute;
        width: min(720px,90vw);
        height: 220px;
        left: 50%;
        top: -120px;
        translate: -50% 0;
        border-radius: 50%;
        background: radial-gradient(ellipse,rgba(35,107,255,.12),rgba(118,87,255,.05) 42%,transparent 72%);
        pointer-events: none
    }

.site-footer__container {
    position: relative
}

.site-footer__brand-row {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    text-align: center
}

.site-brand--footer {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    text-align: center
}

    .site-brand--footer .site-brand__mark {
        display: block;
        width: auto;
        height: 72px;
        max-width: 100%;
        margin-inline: auto;
        filter: drop-shadow(0 7px 13px rgba(20,113,255,.15))
    }

    .site-brand--footer .site-brand__identity {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        text-align: center
    }

    .site-brand--footer .site-brand__name {
        color: #fff;
        font-size: 27px
    }

    .site-brand--footer .site-brand__tagline {
        font-size: clamp(.68rem,1.1vw,.86rem);
        letter-spacing: clamp(.07em,.15vw,.14em);
        gap: clamp(.32rem,.7vw,.65rem);
        justify-content: center;
        text-align: center;
        white-space: nowrap
    }

.site-footer__brand-description {
    max-width: 640px;
    margin: 14px auto 0;
    color: #a9b8ce;
    text-align: center
}

.site-footer__links-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 24px;
    margin-top: 28px;
    padding: 22px 0;
    border-top: 1px solid #20304d;
    border-bottom: 1px solid #20304d;
    text-align: center
}

    .site-footer__links-row a {
        display: inline;
        margin: 0;
        color: #a9b8ce;
        font-size: 14px;
        transition: color var(--duration-fast) var(--ease)
    }

        .site-footer__links-row a:hover, .site-footer__links-row a:focus-visible {
            color: #fff
        }

.site-footer__bottom {
    margin-top: 0;
    border-top: 0
}

.footer-single {
    display: none
}

@media(max-width:480px) {
    .site-brand--footer .site-brand__mark {
        height: 60px
    }

    .site-brand--footer .site-brand__name {
        font-size: 23px
    }

    .site-brand--footer .site-brand__tagline {
        font-size: clamp(.53rem,2.5vw,.64rem);
        letter-spacing: .045em;
        gap: clamp(.2rem,1.5vw,.34rem)
    }

    .site-footer__links-row {
        gap: 8px 16px;
        margin-top: 22px;
        padding: 18px 0
    }

    .site-footer__bottom {
        text-align: center;
        align-items: center
    }
}