:root {
    --brand: #197FA0;
    --brand-dark: #126D8A;
    --brand-light: #E5F4F8;
    --brand-xlit: #F1F9FB;
    --navy: #123F5A;
    --navy-dark: #092D43;
    --navy-mid: #0E5674;
    --nav-bar-bg: #0C111D;
    --txt-primary: #122C3A;
    --txt-sec: #536B78;
    --txt-muted: #607985;
    --border: #DCE9EE;
    --soft-bg: #F1F8FA;
    --sunshine: #56C3DC;
    --coral: #45B1CC;
    --mint: #69b4d1;
    --shadow-lg: 0 24px 70px rgba(4, 9, 21, .18)
}

*,
*:before,
*:after {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    font-family: Inter, system-ui, sans-serif;
    background: #fff;
    color: var(--txt-primary);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased
}

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

button {
    font: inherit
}

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

.font-display {
    font-family: 'Plus Jakarta Sans', sans-serif
}

.s-white {
    background: #fff;
    color: var(--txt-primary)
}

.s-soft {
    background: var(--soft-bg);
    color: var(--txt-primary)
}

.s-brand-lt {
    background: var(--brand-xlit);
    color: var(--txt-primary)
}

.s-navy {
    background: var(--navy);
    color: #e9eff2
}

.s-navy-dk {
    background: var(--navy-dark);
    color: #e9eff2
}

.container {
    max-width: 1280px;
    margin: auto;
    padding: 0 24px
}

.container.narrow {
    max-width: 1000px
}

.section {
    padding: 68px 0
}

.section-sm {
    padding: 44px 0
}

.grid {
    display: grid
}

.two,
.three,
.four {
    display: grid
}

.two {
    grid-template-columns: 1fr 1fr;
    gap: 80px
}

.three {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px
}

.four {
    grid-template-columns: repeat(4, 1fr);
    gap: 0
}

.eyebrow-light,
.eyebrow-dark {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 16px
}

.eyebrow-light {
    color: var(--brand-dark)
}

.eyebrow-dark {
    color: #83a9b8
}

h1,
h2,
h3,
h4 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    margin: 0
}

p {
    margin: 0
}

.section-title {
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.03em
}

.lead {
    font-size: 16px;
    line-height: 1.8;
    color: var(--txt-sec)
}

.muted {
    color: var(--txt-muted)
}

.btn-primary,
.btn-ghost,
.btn-ghost-inv {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: .2s;
    border: 1px solid transparent
}

.btn-primary {
    background: var(--brand);
    color: #fff
}

.btn-primary:hover {
    background: var(--brand-dark);
    transform: translateY(-1px);
    box-shadow: 0 8px 28px rgba(25, 127, 160, .32)
}

.btn-ghost {
    color: var(--txt-sec);
    border-color: var(--border);
    background: transparent
}

.btn-ghost:hover {
    border-color: var(--brand);
    color: var(--brand);
    background: var(--brand-xlit)
}

.btn-ghost-inv {
    color: rgba(255, 255, 255, .75);
    border-color: rgba(255, 255, 255, .18);
    background: transparent
}

.btn-ghost-inv:hover {
    border-color: rgba(255, 255, 255, .5);
    color: #fff;
    background: rgba(255, 255, 255, .06)
}

.btn-primary .arrow,
.btn-ghost .arrow,
.btn-ghost-inv .arrow {
    transition: transform .2s
}

.btn-primary:hover .arrow,
.btn-ghost:hover .arrow,
.btn-ghost-inv:hover .arrow {
    transform: translateX(3px)
}

.nav-base {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(231, 237, 240, .8);
    box-shadow: 0 1px 12px rgba(25, 127, 160, .04)
}

.nav-inner {
    height: 76px;
    max-width: 1280px;
    margin: auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Plus Jakarta Sans';
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -.02em
}

.logo-mark {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: var(--brand);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800
}

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

.nav-links a {
    font-size: 13px;
    color: var(--txt-sec);
    font-weight: 500;
    transition: .2s
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--brand)
}

.nav-cta {
    padding: 10px 18px !important;
    color: #fff !important;
    background: var(--brand);
    border-radius: 7px
}

.nav-cta:hover {
    background: var(--brand-dark) !important
}

.menu-btn {
    display: none;
    background: none;
    border: 0;
    font-size: 26px;
    color: var(--txt-primary);
    cursor: pointer
}

.hero {
    min-height: 760px;
    padding: 150px 0 90px;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden
}

.hero:before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 70% 60% at 65% 45%, rgba(25, 127, 160, .07), transparent 70%), radial-gradient(ellipse 50% 40% at 20% 60%, rgba(25, 127, 160, .05), transparent 70%)
}

.hero:after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .035;
    pointer-events: none;
    background-image: radial-gradient(rgba(25, 127, 160, .8) 1px, transparent 1px);
    background-size: 32px 32px
}

.hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 56px;
    align-items: center
}

.hero-kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    color: var(--txt-sec);
    font-size: 13px
}

.dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand)
}

.hero h1 {
    font-size: clamp(3rem, 5.5vw, 4.6rem);
    line-height: 1.03;
    letter-spacing: -.045em;
    margin-bottom: 24px
}

.brand-text {
    color: var(--brand)
}

.hero-copy {
    font-size: 16.5px;
    line-height: 1.7;
    max-width: 500px;
    color: var(--txt-sec);
    margin-bottom: 30px
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 34px
}

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

.trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 15px;
    border: 1px solid var(--border);
    border-radius: 100px;
    background: #fff;
    color: var(--txt-sec);
    font-size: 12px;
    font-weight: 500
}

.hero-panel,
.mockup {
    background: #fff;
    border: 1px solid rgba(25, 127, 160, .12);
    border-radius: 20px;
    box-shadow: 0 24px 72px rgba(6, 38, 58, .12), 0 0 0 1px rgba(25, 127, 160, .08);
    overflow: hidden
}

.anim-float {
    animation: float 7s ease-in-out infinite
}

.panel-head {
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(25, 127, 160, .1);
    background: linear-gradient(90deg, #F4FAFB, #fff)
}

.panel-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    font: 600 13px 'Plus Jakarta Sans'
}

.mini-mark {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: var(--brand);
    color: #fff;
    display: grid;
    place-items: center;
    font: bold 10px 'Plus Jakarta Sans'
}

.live {
    font-size: 11px;
    color: var(--brand);
    display: flex;
    gap: 6px;
    align-items: center
}

.metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 20px
}

.metric {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 13px 15px
}

.metric small {
    display: block;
    color: var(--txt-muted);
    font-size: 10.5px;
    margin-bottom: 6px
}

.metric strong {
    font: 700 18px 'Plus Jakarta Sans'
}

.metric span {
    display: block;
    color: var(--brand);
    font-size: 10px;
    margin-top: 4px
}

.chart-area {
    padding: 0 20px 20px;
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 12px
}

.chart-card,
.course-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    padding: 14px
}

.bars {
    height: 110px;
    display: flex;
    align-items: end;
    gap: 7px
}

.bars i {
    flex: 1;
    background: linear-gradient(180deg, #285e74, #e9eff2);
    border-radius: 5px 5px 2px 2px
}

.course-card h4 {
    font-size: 11px;
    margin-bottom: 8px
}

.course-line {
    height: 5px;
    background: #e9eff2;
    border-radius: 4px;
    margin: 7px 0
}

.course-line b {
    display: block;
    height: 100%;
    background: var(--brand);
    border-radius: 4px
}

.stats-wrap {
    padding: 20px 0
}

.stats-grid {
    align-items: stretch
}

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

.stat {
    padding: 8px 16px;
    text-align: center;
    border-right: 1px solid var(--border)
}

.stat:last-child {
    border: 0
}

.stat-icon {
    width: 18px;
    height: 18px;
    margin: 0 auto 8px;
    color: var(--brand);
    display: grid;
    place-items: center
}

.stat-icon svg {
    width: 18px;
    height: 18px
}

.stat-num {
    font: 800 clamp(1.65rem, 2.7vw, 2.2rem)/1 'Plus Jakarta Sans';
    letter-spacing: -.035em;
    color: var(--brand)
}

.stat-label {
    font-size: 11.5px;
    color: var(--txt-muted);
    margin-top: 5px
}

.card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    transition: .22s
}

.card:hover {
    border-color: var(--brand);
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(25, 127, 160, .1)
}

.about-grid {
    align-items: start
}

.standards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 32px
}

.standard {
    text-align: center;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff
}

.standard strong {
    display: block;
    color: var(--brand);
    font: 700 15px 'Plus Jakarta Sans'
}

.standard small {
    color: var(--txt-muted);
    font-size: 11px
}

.capability-row {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 18px 0;
    border-bottom: 1px solid var(--border);
    transition: .2s
}

.capability-row:hover {
    padding-left: 4px
}

.cap-num {
    font: 700 12px 'Plus Jakarta Sans';
    color: var(--txt-muted);
    min-width: 24px
}

.icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--brand-light);
    border: 1px solid rgba(25, 127, 160, .2);
    display: grid;
    place-items: center;
    color: var(--brand);
    flex-shrink: 0
}

.capability-row:hover .icon-wrap {
    background: var(--brand);
    color: #fff
}

.cap-title {
    font: 600 14.5px/1.3 'Plus Jakarta Sans';
    margin-bottom: 4px
}

.cap-desc {
    font-size: 13px;
    line-height: 1.55;
    color: var(--txt-muted)
}

.service-grid {
    margin-top: 45px
}

.service-card {
    padding: 24px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    transition: .22s
}

.service-card:hover {
    border-color: rgba(25, 127, 160, .45);
    transform: translateY(-3px);
    background: rgba(255, 255, 255, .055)
}

.service-card h3 {
    font-size: 15px;
    color: #fff;
    margin: 16px 0 8px
}

.service-card p {
    font-size: 13px;
    line-height: 1.65;
    color: rgba(232, 244, 248, .55)
}

.service-number {
    color: #83a9b8;
    font: 700 11px 'Plus Jakarta Sans';
    letter-spacing: .1em
}

.product-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 32px 0 38px
}

.product-tab {
    padding: 11px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: var(--txt-sec);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500
}

.product-tab.active {
    background: var(--brand-light);
    border-color: rgba(25, 127, 160, .35);
    color: var(--brand)
}

.product-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 60px;
    align-items: center
}

.product-copy h3 {
    font-size: 26px;
    margin: 6px 0 12px
}

.feature-list {
    display: grid;
    gap: 10px;
    margin: 20px 0 28px
}

.feature-list div {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-size: 13px;
    color: var(--txt-sec)
}

.check {
    color: var(--brand);
    font-weight: 800
}

.product-preview {
    border: 1px solid rgba(25, 127, 160, .1);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(6, 38, 58, .1)
}

.preview-body {
    padding: 18px;
    background: #fff
}

.dashboard-mini {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

.mini-panel {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px;
    background: #fff
}

.mini-panel h5 {
    font-size: 10px;
    color: var(--txt-muted);
    margin: 0 0 7px
}

.mini-panel strong {
    font: 700 19px 'Plus Jakarta Sans'
}

.progress {
    height: 6px;
    background: #e9eff2;
    border-radius: 5px;
    margin-top: 10px
}

.progress b {
    display: block;
    height: 100%;
    background: var(--brand);
    border-radius: 5px
}

.ai-section {
    position: relative;
    overflow: hidden
}

.ai-grid {
    align-items: start
}

.flow {
    position: relative;
    padding-left: 16px
}

.flow:before {
    content: "";
    position: absolute;
    left: 29px;
    top: 14px;
    bottom: 14px;
    width: 2px;
    background: linear-gradient(180deg, rgba(25, 127, 160, .8), rgba(25, 127, 160, .15))
}

.flow-item {
    display: flex;
    gap: 15px;
    position: relative;
    margin-bottom: 16px
}

.flow-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: rgba(25, 127, 160, .18);
    border: 2px solid rgba(25, 127, 160, .4);
    z-index: 1
}

.flow-item:first-child .flow-dot,
.flow-item:nth-child(3) .flow-dot,
.flow-item:last-child .flow-dot {
    background: var(--brand)
}

.flow-item:first-child .flow-dot:after,
.flow-item:nth-child(3) .flow-dot:after,
.flow-item:last-child .flow-dot:after {
    content: "";
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%
}

.flow-item:not(:first-child):not(:nth-child(3)):not(:last-child) .flow-dot:after {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--brand);
    border-radius: 50%
}

.flow-item strong {
    display: block;
    color: #fff;
    font: 600 13.5px 'Plus Jakarta Sans';
    margin-top: 2px
}

.flow-item span {
    font-size: 12px;
    color: rgba(232, 244, 248, .45)
}

.ai-features {
    display: grid;
    gap: 10px
}

.ai-feature {
    display: flex;
    gap: 14px;
    padding: 15px;
    border-radius: 12px;
    border: 1px solid rgba(25, 127, 160, .15);
    background: rgba(255, 255, 255, .03);
    transition: .2s
}

.ai-feature:hover {
    background: rgba(25, 127, 160, .08);
    border-color: rgba(25, 127, 160, .35)
}

.ai-feature h3 {
    font-size: 14px;
    color: #fff;
    margin-bottom: 4px
}

.ai-feature p {
    font-size: 13px;
    line-height: 1.55;
    color: rgba(232, 244, 248, .55)
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    position: relative
}

.process-grid:before {
    content: "";
    position: absolute;
    top: 27px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: var(--border)
}

.process-grid:after {
    content: "";
    position: absolute;
    top: 27px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: var(--brand);
    transform-origin: left;
    animation: grow 1.4s ease both
}

.step {
    text-align: center;
    padding: 0 18px;
    position: relative;
    z-index: 1
}

.step-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--brand);
    color: #fff;
    display: grid;
    place-items: center;
    margin: 0 auto 18px;
    box-shadow: 0 4px 20px rgba(25, 127, 160, .25)
}

.step small {
    font: 700 11px 'Plus Jakarta Sans';
    color: var(--brand);
    letter-spacing: .12em
}

.step h3 {
    font-size: 16px;
    margin: 7px 0
}

.step p {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--txt-sec)
}

.why-grid {
    align-items: start
}

.difference {
    padding: 24px;
    border-radius: 16px;
    background: var(--brand-xlit);
    border: 1px solid rgba(25, 127, 160, .15);
    margin-top: 24px
}

.difference-label {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--txt-muted);
    margin-bottom: 15px
}

.difference li {
    display: flex;
    gap: 9px;
    margin: 10px 0;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--txt-sec)
}

.pillar-list {
    display: grid;
    gap: 14px
}

.pillar {
    padding: 20px;
    display: flex;
    gap: 18px
}

.pillar h3 {
    font-size: 15px;
    margin-bottom: 6px
}

.pillar p {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--txt-sec)
}

.portfolio-grid {
    margin-top: 42px
}

.portfolio-card {
    overflow: hidden
}

.portfolio-visual {
    height: 220px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e9eff2, #F7FBFC);
    border-bottom: 1px solid var(--border)
}

.browser {
    width: 88%;
    height: 150px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: 0 12px 30px rgba(6, 38, 58, .1);
    overflow: hidden
}

.browser-top {
    height: 24px;
    background: #F4F7F9;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 5px;
    padding-left: 9px
}

.browser-top i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #C7D3D9
}

.browser-body {
    display: grid;
    grid-template-columns: 28% 72%;
    height: 126px
}

.browser-side {
    background: var(--navy);
    padding: 10px
}

.browser-side b {
    display: block;
    width: 60%;
    height: 5px;
    background: #83a9b8;
    border-radius: 3px;
    margin-bottom: 14px
}

.browser-side span {
    display: block;
    height: 4px;
    background: rgba(255, 255, 255, .15);
    margin: 7px 0;
    border-radius: 3px
}

.browser-main {
    padding: 12px
}

.browser-main h5 {
    font-size: 9px;
    margin-bottom: 10px
}

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

.browser-cards i {
    height: 50px;
    background: #e9eff2;
    border-radius: 5px;
    border: 1px solid #DDECEF
}

.portfolio-content {
    padding: 20px
}

.portfolio-content h3 {
    font-size: 17px;
    margin-bottom: 7px
}

.portfolio-content p {
    font-size: 13px;
    line-height: 1.6;
    color: var(--txt-sec)
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 15px
}

.tag {
    font-size: 10.5px;
    padding: 5px 8px;
    border-radius: 100px;
    background: var(--brand-light);
    color: var(--brand)
}

.contact-section {
    position: relative;
    overflow: hidden;
    text-align: center
}

.contact-section:before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .04;
    background-image: radial-gradient(rgba(255, 255, 255, .8) 1px, transparent 1px);
    background-size: 24px 24px
}

.contact-content {
    position: relative;
    max-width: 800px;
    margin: auto
}

.contact-content h2 {
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    line-height: 1.1;
    color: #fff;
    margin-bottom: 18px
}

.contact-content h2 span {
    color: #83a9b8
}

.contact-content p {
    max-width: 650px;
    margin: 0 auto 30px;
    font-size: 16px;
    line-height: 1.7;
    color: rgba(232, 244, 248, .6)
}

.contact-points {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 25px;
    color: rgba(232, 244, 248, .4);
    font-size: 12.5px
}

footer {
    background: var(--navy-dark);
    color: #e9eff2;
    padding: 44px 0 22px
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.7fr repeat(4, 1fr);
    gap: 38px;
    padding: 34px 0
}

.footer-brand p {
    max-width: 240px;
    font-size: 13.5px;
    line-height: 1.65;
    color: #AFC5CF;
    margin: 18px 0
}

.footer-contact {
    display: grid;
    gap: 7px;
    font-size: 13px;
    color: #AFC5CF
}

.footer-col h3 {
    font-size: 13px;
    margin-bottom: 15px
}

.footer-col a {
    display: block;
    font-size: 13px;
    color: #AFC5CF;
    margin: 10px 0;
    transition: .2s
}

.footer-col a:hover {
    color: #fff
}

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

.footer-bottom p,
.footer-bottom a {
    font-size: 12.5px;
    color: #AFC5CF
}

.footer-legal {
    display: flex;
    gap: 24px
}

.page-hero {
    padding: 128px 0 54px;
    background: var(--soft-bg);
    position: relative
}

.page-hero h1 {
    max-width: 780px;
    font-size: clamp(2.8rem, 5vw, 4.2rem);
    line-height: 1.05;
    margin-bottom: 18px
}

.page-hero p {
    max-width: 700px;
    font-size: 16px;
    line-height: 1.75;
    color: var(--txt-sec)
}

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

.field {
    display: grid;
    gap: 7px
}

.field.full {
    grid-column: 1/-1
}

.field label {
    font-size: 12px;
    font-weight: 600;
    color: var(--txt-sec)
}

.field input,
.field textarea,
.field select {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 13px;
    font: 14px Inter;
    background: #fff;
    outline: none
}

.field input:focus,
.field textarea:focus,
.field select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(25, 127, 160, .08)
}

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

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

.reveal.visible {
    opacity: 1;
    transform: translateY(0)
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0) rotate(0)
    }

    40% {
        transform: translateY(-14px) rotate(.6deg)
    }

    70% {
        transform: translateY(-7px) rotate(-.4deg)
    }
}

@keyframes grow {
    from {
        transform: scaleX(0)
    }

    to {
        transform: scaleX(1)
    }
}

@keyframes pulse {

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

    50% {
        opacity: .6;
        transform: scale(1.35)
    }
}

.pulse {
    animation: pulse 2s ease-in-out infinite
}

.icon {
    width: 18px;
    height: 18px;
    display: inline-block
}

.small-icon {
    width: 16px;
    height: 16px
}

@media(max-width:960px) {
    .nav-inner {
        position: relative
    }

    .nav-links {
        position: absolute;
        top: 100%;
        right: 24px;
        left: 24px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 12px 18px 18px;
        border: 1px solid var(--border);
        border-radius: 0 0 12px 12px;
        background: #fff;
        box-shadow: 0 12px 24px rgba(9, 45, 67, .12)
    }

    .nav-links.open {
        display: flex
    }

    .nav-links a {
        padding: 11px 0
    }

    .nav-links .nav-cta {
        margin-top: 8px;
        text-align: center
    }

    .menu-btn {
        display: block
    }

    .hero-grid,
    .two,
    .product-grid {
        grid-template-columns: 1fr;
        gap: 45px
    }

    .hero {
        padding-top: 125px
    }

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

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

    .process-grid {
        gap: 35px
    }

    .process-grid:before,
    .process-grid:after {
        display: none
    }

    .footer-grid {
        grid-template-columns: 1.5fr 1fr 1fr;
        gap: 35px
    }

    .footer-col:nth-last-child(-n+2) {
        display: none
    }
}

@media(max-width:640px) {
    .container {
        padding: 0 18px
    }

    .section {
        padding: 48px 0
    }

    .hero {
        min-height: auto;
        padding: 125px 0 70px
    }

    .hero h1 {
        font-size: clamp(2.5rem, 12vw, 3.3rem)
    }

    .metrics,
    .chart-area,
    .dashboard-mini {
        grid-template-columns: 1fr
    }

    .three,
    .four {
        grid-template-columns: 1fr
    }

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

    .stats-grid .stat {
        padding: 10px 6px;
        border-right: 1px solid var(--border);
        border-bottom: 1px solid var(--border)
    }

    .stats-grid .stat:nth-child(2n) {
        border-right: 0
    }

    .stats-grid .stat:nth-last-child(-n + 2) {
        border-bottom: 0
    }

    .standards,
    .form-grid {
        grid-template-columns: 1fr
    }

    .field.full {
        grid-column: auto
    }

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

    .footer-brand {
        grid-column: 1/-1
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start
    }

    .footer-legal {
        flex-wrap: wrap
    }

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

    .contact-points {
        flex-direction: column;
        gap: 10px
    }

    .page-hero {
        padding: 112px 0 42px
    }
}

/* Bright, playful learning theme */
body {
    background: #fff;
    color: var(--txt-primary)
}

.nav-base {
    background: rgba(255, 255, 255, .92);
    border-bottom-color: rgba(235, 231, 244, .85);
    box-shadow: 0 4px 20px rgba(48, 38, 95, .06)
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--brand)
}

.nav-cta {
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(104, 70, 223, .2)
}



.hero {
    background: linear-gradient(135deg, #FFF9EC 0%, #FFFDF7 48%, #F5F0FF 100%)
}

.hero-grid {
    grid-template-columns: 1.3fr 1fr;
    gap: 40px
}

.hero:before {
    background:
        radial-gradient(ellipse 42% 48% at 78% 44%, rgba(255, 200, 87, .2), transparent 72%),
        radial-gradient(ellipse 48% 55% at 40% 65%, rgba(104, 70, 223, .09), transparent 72%)
}

.hero:after {
    opacity: .1;
    background-image: radial-gradient(rgba(104, 70, 223, .52) 1px, transparent 1px)
}

.hero-kicker .dot {
    background: var(--coral)
}

.brand-text {
    background: linear-gradient(100deg, var(--brand) 10%, #9B52D6 55%, #F07877 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent
}

.btn-primary {
    border-radius: 999px;
    box-shadow: 0 7px 18px rgba(104, 70, 223, .18)
}

.btn-primary:hover {
    box-shadow: 0 10px 24px rgba(104, 70, 223, .28)
}

.btn-ghost {
    border-radius: 999px;
    background: rgba(255, 255, 255, .78)
}

.trust-pill {
    border-color: #E9E3F5;
    box-shadow: 0 3px 10px rgba(48, 38, 95, .035)
}

.trust-pill:nth-child(2) .dot {
    background: #3292b8
}

.trust-pill:nth-child(3) .dot {
    background: #F2AA38
}

.hero-panel,
.mockup {
    border: 1px solid rgba(104, 70, 223, .14);
    border-radius: 26px;
    box-shadow: 0 28px 72px rgba(48, 38, 95, .13), 0 0 0 6px rgba(255, 255, 255, .65)
}

.panel-head {
    border-color: rgba(104, 70, 223, .1);
    background: linear-gradient(100deg, #F2EDFF, #FFF8E9)
}

.mini-mark,
.logo-mark {
    border-radius: 9px;
    background: linear-gradient(145deg, var(--brand), #9877FF)
}

.live {
    color: #247b9d
}

.metric {
    border-radius: 15px;
    background: #FFFEFC
}

.metric:nth-child(2) {
    background: #F5F1FF
}

.metric:nth-child(3) {
    background: #FFF7E6
}

.metric span {
    color: #267b9d
}

.bars i {
    background: linear-gradient(180deg, #8B6AFF, #D5C9FF)
}

.bars i:nth-child(3n + 2) {
    background: linear-gradient(180deg, #FF9A86, #FFE0D8)
}

.bars i:nth-child(3n) {
    background: linear-gradient(180deg, #48a4c9, #c9e7f3)
}

.course-line {
    background: #F0EBFF
}

.course-line b,
.progress b {
    background: linear-gradient(90deg, var(--brand), #A183FF)
}

.stat:nth-child(2) .stat-icon,
.stat:nth-child(2) .stat-num {
    color: #F07877
}

.stat:nth-child(3) .stat-icon,
.stat:nth-child(3) .stat-num {
    color: #2783a8
}

.stat:nth-child(4) .stat-icon,
.stat:nth-child(4) .stat-num {
    color: #E6A52F
}

.card,
.standard,
.mini-panel {
    border-radius: 18px;
    border-color: #ECE8F5
}

.card:hover {
    border-color: rgba(104, 70, 223, .4);
    box-shadow: 0 14px 32px rgba(48, 38, 95, .1)
}

.icon-wrap {
    border-radius: 13px;
    background: #F0EBFF;
    border-color: #E4DAFF
}

.service-card {
    border-radius: 20px;
    background: rgba(255, 255, 255, .055);
    border-color: rgba(255, 255, 255, .12)
}

.service-card:nth-child(3n + 1) .service-number {
    color: #D0BFFF
}

.service-card:nth-child(3n + 2) .service-number {
    color: #FFD77E
}

.service-card:nth-child(3n) .service-number {
    color: #7cc5e2
}

.service-card:hover {
    border-color: rgba(255, 200, 87, .55);
    background: rgba(255, 255, 255, .09)
}

.product-tab {
    border-radius: 999px
}

.product-tab.active {
    background: #F0EBFF;
    border-color: #D9CCFF
}

.product-preview {
    border-color: #E7DFFF;
    border-radius: 22px;
    box-shadow: 0 22px 58px rgba(48, 38, 95, .12)
}

.mini-panel:nth-child(2) .progress b {
    background: linear-gradient(90deg, #FF887B, #FFC0A9)
}

.mini-panel:nth-child(3) .progress b {
    background: linear-gradient(90deg, #3494ba, #8ccde7)
}

.flow:before {
    background: linear-gradient(180deg, rgba(255, 200, 87, .9), rgba(104, 70, 223, .25))
}

.flow-dot {
    background: rgba(255, 200, 87, .16);
    border-color: rgba(255, 200, 87, .45)
}

.flow-item:first-child .flow-dot,
.flow-item:nth-child(3) .flow-dot,
.flow-item:last-child .flow-dot {
    background: var(--sunshine)
}

.flow-item:not(:first-child):not(:nth-child(3)):not(:last-child) .flow-dot:after {
    background: var(--sunshine)
}

.ai-feature {
    border-radius: 16px;
    border-color: rgba(255, 255, 255, .13)
}

.ai-feature:hover {
    background: rgba(255, 200, 87, .08);
    border-color: rgba(255, 200, 87, .4)
}

.step-icon {
    border-radius: 19px;
    background: linear-gradient(145deg, var(--brand), #9877FF);
    box-shadow: 0 8px 20px rgba(104, 70, 223, .25)
}

.step:nth-child(2) .step-icon {
    background: linear-gradient(145deg, #FF786E, #FFB18C)
}

.step:nth-child(3) .step-icon {
    background: linear-gradient(145deg, #2584aa, #72bfdd)
}

.step:nth-child(4) .step-icon {
    background: linear-gradient(145deg, #E2A22C, #FFD576)
}

.difference {
    border-radius: 20px;
    background: linear-gradient(135deg, #F4F0FF, #FFF9ED);
    border-color: #E7DFFF
}

.portfolio-visual {
    background: linear-gradient(135deg, #F1ECFF, #FFF4E2)
}

.browser-cards i:nth-child(3n + 1) {
    background: #F0EBFF;
    border-color: #E1D7FF
}

.browser-cards i:nth-child(3n + 2) {
    background: #FFF0E8;
    border-color: #FFE0D2
}

.browser-cards i:nth-child(3n) {
    background: #e9f4f9;
    border-color: #cfe7f0
}

.tag {
    background: #F0EBFF;
    color: #5C3BCB
}

.contact-section {
    background: linear-gradient(125deg, #30265F, #49347D 65%, #60418B)
}

.contact-section:before {
    background-image: radial-gradient(rgba(255, 200, 87, .9) 1px, transparent 1px)
}

.contact-content h2 span {
    color: var(--sunshine)
}

footer {
    background: #21183F
}

.page-hero {
    overflow: hidden;
    background: linear-gradient(115deg, #FFF8E9 0%, #FFFCF6 58%, #F3EFFF 100%)
}

.page-hero:after {
    content: "";
    position: absolute;
    width: 330px;
    height: 330px;
    right: max(5%, calc((100vw - 1280px) / 2));
    top: 62px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(255, 200, 87, .3), rgba(255, 120, 110, .13) 42%, rgba(104, 70, 223, .08) 70%, transparent 71%);
    pointer-events: none
}

.page-hero .container {
    position: relative;
    z-index: 1
}

.field input,
.field textarea,
.field select {
    border-radius: 12px
}

.field input:focus,
.field textarea:focus,
.field select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(104, 70, 223, .12)
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid rgba(255, 170, 65, .8);
    outline-offset: 3px
}

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

/* Content sections: brighter surfaces and stronger readable text contrast. */
main > .s-white {
    background: #ffffff;
    color: #10243d
}

main > .s-soft {
    background: #f3f7fb;
    color: #10243d
}

main > .s-brand-lt {
    background: #eaf4f8;
    color: #10243d
}

main > .s-white .lead,
main > .s-soft .lead,
main > .s-brand-lt .lead {
    color: #4d6378
}

main > .s-white .muted,
main > .s-soft .muted,
main > .s-brand-lt .muted {
    color: #526b82
}

main > .s-white .card,
main > .s-soft .card,
main > .s-brand-lt .card,
main > .s-white .service-card,
main > .s-soft .service-card,
main > .s-brand-lt .service-card {
    border-color: #d5e2ec;
    background: #ffffff;
    color: #10243d
}

main > .s-white .card p,
main > .s-soft .card p,
main > .s-brand-lt .card p,
main > .s-white .service-card p,
main > .s-soft .service-card p,
main > .s-brand-lt .service-card p {
    color: #526b82
}

body { background: var(--navy-dark); color: var(--txt-primary) }
body:before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: .25; background-image: linear-gradient(rgba(90, 200, 243,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(90, 200, 243,.035) 1px, transparent 1px); background-size: 42px 42px }
.s-white { background: #f8fbff; color: #112038 }
.s-soft { background: #eef4fa; color: #112038 }
.s-brand-lt { background: #ebf4f8; color: #112038 }
.s-navy { background: #101a2e; color: #eff5ff }
.s-navy-dk { background: #080d1a; color: #eff5ff }
.container { max-width: 1320px }

.nav-base { background: rgba(8,13,26,.76); border-bottom: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 10px 35px rgba(0,0,0,.12) }
.nav-base.is-scrolled { background: rgba(8,13,26,.92); border-bottom-color: rgba(90, 200, 243,.25) }
.nav-inner { min-height: 78px }
.logo img { filter: brightness(0) invert(1); width: 142px; height: auto }
.nav-links a { color: #b7c4d8; font-weight: 600; transition: color .25s ease, transform .25s ease }
.nav-links a:hover, .nav-links a.active { color: var(--brand); transform: translateY(-1px) }
.nav-cta { background: var(--brand) !important; color: #0d171b !important; border-radius: 999px !important; box-shadow: 0 0 0 0 rgba(90, 200, 243,.35); transition: box-shadow .25s ease, transform .25s ease !important }
.nav-cta:hover { box-shadow: 0 0 0 7px rgba(90, 200, 243,.12); transform: translateY(-2px) !important }
.scroll-progress { height: 2px; background: transparent }
.scroll-progress span { background: linear-gradient(90deg, var(--brand), var(--mint), var(--sunshine)); box-shadow: 0 0 10px rgba(90, 200, 243,.75) }

.hero, .page-hero { background: radial-gradient(circle at 78% 12%, rgba(94, 194, 234,.2), transparent 28%), radial-gradient(circle at 12% 20%, rgba(90, 200, 243,.13), transparent 30%), #0b1324 }
.hero:before, .page-hero:after { opacity: .7; background: radial-gradient(circle, rgba(90, 200, 243,.18) 1px, transparent 1.5px); background-size: 20px 20px; mask-image: linear-gradient(135deg, black, transparent 70%) }
.hero h1, .page-hero h1 { letter-spacing: -.06em; text-shadow: 0 12px 35px rgba(0,0,0,.24) }
.hero .brand-text { color: var(--brand); text-shadow: 0 0 28px rgba(90, 200, 243,.22) }
.hero-copy, .page-hero p { color: #b9c7dc }
.hero-kicker { color: var(--mint) }
.hero-kicker .dot { background: var(--brand); box-shadow: 0 0 0 6px rgba(90, 200, 243,.1), 0 0 20px var(--brand) }
.btn-primary { background: var(--brand); color: #0b1820; border-radius: 999px; box-shadow: 0 10px 30px rgba(90, 200, 243,.2); transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease, background .25s ease }
.btn-primary:hover { background: #78d6fb; color: #0b1820; transform: translateY(-3px) scale(1.02); box-shadow: 0 16px 38px rgba(90, 200, 243,.3) }
.btn-ghost { color: #d5e0ef; border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.05); border-radius: 999px }
.btn-ghost:hover { color: var(--brand); border-color: var(--brand); background: rgba(90, 200, 243,.09) }
.hero-carousel-controls { color: #c4d1e3 }
.carousel-dot { border-color: rgba(255,255,255,.55) !important }
.carousel-dot.is-active { background: var(--brand) !important; border-color: var(--brand) !important; box-shadow: 0 0 14px rgba(90, 200, 243,.65) }
.hero-slide img { filter: saturate(.8) contrast(1.08); opacity: .7 }
.hero-shade { background: linear-gradient(90deg, rgba(8,13,26,.96) 0%, rgba(8,13,26,.65) 47%, rgba(8,13,26,.38) 100%) }

.section-title { color: inherit; letter-spacing: -.055em }
.eyebrow-light { color: #2081a8; letter-spacing: .14em }
.s-navy .eyebrow-dark, .s-navy-dk .eyebrow-dark { color: var(--brand) }
.lead { color: #63748d }
.s-navy .lead, .s-navy-dk .lead { color: #a8b6cc }
.rule { background: currentColor; opacity: .12 }
.stats-wrap { background: #101a2e; color: #eff5ff }
.stats-wrap .rule { background: var(--brand); opacity: .25 }
.stat { position: relative; padding: 20px 24px; border-right: 1px solid rgba(255,255,255,.1) }
.stat:last-child { border-right: 0 }
.stat-icon { color: var(--brand); filter: drop-shadow(0 0 7px rgba(90, 200, 243,.4)) }
.stat-num { color: #fff; font-weight: 800; letter-spacing: -.06em }
.stat-label { color: #99aac2 }

.card, .service-card, .portfolio-card, .product-offering, .pillar, .ai-feature, .home-solution-card, .home-partner .card { border: 1px solid rgba(83,107,139,.18); border-radius: 22px; box-shadow: 0 12px 32px rgba(23,47,77,.06); transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .35s ease }
.card:hover, .service-card:hover, .portfolio-card:hover, .product-offering:hover, .pillar:hover, .ai-feature:hover, .home-solution-card:hover, .home-partner .card:hover { transform: translateY(-8px); border-color: rgba(32, 129, 168,.38); box-shadow: var(--shadow-lg) }
.s-navy .card, .s-navy .service-card, .s-navy .ai-feature, .s-navy .product-offering, .s-navy-dk .card { background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.12); color: #eff5ff }
.s-navy .card:hover, .s-navy .service-card:hover, .s-navy .ai-feature:hover { border-color: rgba(90, 200, 243,.6); background: rgba(90, 200, 243,.07) }
.product-offering { overflow: hidden; position: relative }
.product-offering:before { content: ''; position: absolute; width: 80px; height: 80px; right: -25px; top: -25px; border-radius: 50%; background: rgba(90, 200, 243,.14); transition: transform .4s ease }
.product-offering:hover:before { transform: scale(2.2) }
.offering-toggle { position: relative; z-index: 1 }
.offering-title { transition: color .25s ease }
.product-offering:hover .offering-title { color: #2081a8 }
.s-navy .product-offering:hover .offering-title { color: var(--brand) }

.home-about-visual img, .portfolio-visual img, .page-hero img { border-radius: 24px }
.home-about-visual { border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-lg) }
.home-about-visual figcaption { background: rgba(8,13,26,.82); color: #fff; backdrop-filter: blur(12px) }
.home-about-list li:before, .home-about-list li span { color: #2081a8 }
.home-journey { background: #eef4fa }
.home-journey-step { position: relative; border-top: 2px solid rgba(32, 129, 168,.18); transition: border-color .3s ease, transform .3s ease }
.home-journey-step.is-current { border-color: #2081a8; transform: translateY(-5px) }
.home-journey-step .step-number, .process-number { color: #2081a8; text-shadow: 0 0 18px rgba(32, 129, 168,.2) }

.client-logos { background: #0b1324; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08) }
.client-logos img { filter: grayscale(1) brightness(0) invert(1); opacity: .55; transition: opacity .25s ease, filter .25s ease, transform .25s ease }
.client-logos img:hover { opacity: 1; filter: none; transform: translateY(-3px) }
footer { background: #080d1a; color: #aebdd1; border-top: 1px solid rgba(90, 200, 243,.13) }
footer .logo { color: #fff }
footer .logo-mark { background: var(--brand); color: #0d171b }
.footer-col h3 { color: #fff }
.footer-col a:hover, .footer-legal a:hover { color: var(--brand) }

.scroll-reveal { transition-duration: .8s; transition-timing-function: cubic-bezier(.22,1,.36,1) }
.depth-scene { position: relative; isolation: isolate }
.depth-scene:before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 10% 10%, rgba(32, 129, 168,.06), transparent 28%) }
.cursor-glow { position: fixed; width: 280px; height: 280px; border-radius: 50%; pointer-events: none; z-index: 999; background: radial-gradient(circle, rgba(90, 200, 243,.09), transparent 68%); transform: translate(-50%,-50%); opacity: 0; transition: opacity .3s ease }
@media (hover: hover) { body:hover .cursor-glow { opacity: 1 } }
@media (max-width: 960px) { .nav-links.open { background: rgba(8,13,26,.96); border: 1px solid rgba(90, 200, 243,.2); border-radius: 18px; padding: 18px; box-shadow: var(--shadow-lg) } .stat { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1) } }
@media (max-width: 640px) { .hero-shade { background: linear-gradient(90deg, rgba(8,13,26,.92), rgba(8,13,26,.55)) } .card, .service-card, .portfolio-card, .product-offering { border-radius: 17px } .cursor-glow { display: none } }
@media (prefers-reduced-motion: reduce) { .card:hover, .service-card:hover, .portfolio-card:hover, .product-offering:hover, .pillar:hover, .ai-feature:hover, .home-solution-card:hover { transform: none } }

/* Keep the homepage metrics together as one responsive row. */
.stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stats-grid .stat {
    min-width: 0;
    padding-inline: clamp(3px, 1.5vw, 16px);
    border-right: 1px solid var(--border);
    border-bottom: 0;
}

.stats-grid .stat:last-child {
    border-right: 0;
}

.stats-grid .stat-label {
    font-size: clamp(8px, 1.65vw, 11.5px);
    line-height: 1.25;
}

@media (max-width: 640px) {
    .stats-wrap {
        padding-inline: 0;
    }

    .stats-grid .stat {
        padding-block: 8px;
    }

    .stats-grid .stat-label {
        overflow-wrap: anywhere;
    }
}

/* Brand lockup: use the exact Nowiles logo cyan as the primary accent. */
.logo img { filter: none !important }
.nav-cta { background: var(--brand) !important; color: #fff !important }
.nav-cta:hover { box-shadow: 0 0 0 7px rgba(25,127,160,.16) !important }
.scroll-progress span { background: linear-gradient(90deg, #1d4b5d, #285e74, #83a9b8) !important }
.hero .brand-text { color: #b0d0dd; text-shadow: 0 0 28px rgba(67,185,210,.25) }
.hero-kicker .dot { background: #b0d0dd; box-shadow: 0 0 0 6px rgba(67,185,210,.12), 0 0 20px #83a9b8 }
.btn-primary { background: var(--brand) !important; color: #fff !important; box-shadow: 0 10px 30px rgba(25,127,160,.24) }
.btn-primary:hover { background: #83a9b8 !important; color: #082b3a !important; box-shadow: 0 16px 38px rgba(25,127,160,.3) }
.carousel-dot.is-active { background: var(--sunshine) !important; border-color: var(--sunshine) !important; box-shadow: 0 0 14px rgba(67,185,210,.65) }
.stat-icon, .stat-num { color: #83a9b8 }
.home-journey-step.is-current { border-color: #285e74 }
.product-offering:before { background: rgba(25,127,160,.14) }
.s-navy .card:hover, .s-navy .service-card:hover, .s-navy .ai-feature:hover { border-color: rgba(67,185,210,.65); background: rgba(25,127,160,.1) }
.card:hover, .service-card:hover, .portfolio-card:hover, .product-offering:hover, .pillar:hover, .ai-feature:hover, .home-solution-card:hover, .home-partner .card:hover { border-color: rgba(25,127,160,.42) }
footer { border-top-color: rgba(25,127,160,.28) }
footer .logo-mark { background: #285e74; color: #fff }
.footer-col a:hover, .footer-legal a:hover, .nav-links a:hover, .nav-links a.active { color: #83a9b8 }
.cursor-glow, body .cursor-glow { background: radial-gradient(circle, rgba(67,185,210,.12), transparent 68%) !important }


/* Homepage motion system: staged entrances, soft depth, and slow image movement. */
.home-hero .hero-content > * {
    opacity: 0;
    animation: hero-content-in .8s cubic-bezier(.22, 1, .36, 1) forwards;
}

.home-hero .hero-content h1 {
    animation-delay: .12s
}

.home-hero .hero-content .hero-copy {
    animation-delay: .24s
}

.home-hero .hero-content .hero-actions {
    animation-delay: .36s
}

.home-hero .hero-carousel-controls {
    animation: hero-controls-in .9s .48s cubic-bezier(.22, 1, .36, 1) both
}

.home-hero .hero-shade {
    background: linear-gradient(105deg, rgba(5, 31, 48, .91) 0%, rgba(7, 48, 69, .72) 48%, rgba(7, 48, 69, .38) 100%);
}

.home-hero:after {
    animation: pattern-drift 18s linear infinite
}

.portfolio-cta {
    margin-top: 25px
}

.contact-response {
    justify-content: center;
    color: rgba(232, 244, 248, .55) !important
}

.contact-section .hero-kicker.contact-response {
    color: rgba(232, 244, 248, .55) !important
}

.contact-section .hero-kicker.contact-response .dot {
    background: #7ce1ed
}

.noscript-nav,
.noscript-footer {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 24px;
    background: #fff;
    color: var(--txt-primary);
    font-size: 13px;
}

.noscript-nav {
    justify-content: center;
    border-bottom: 1px solid var(--border)
}

.noscript-nav a:hover,
.noscript-footer a:hover {
    color: var(--brand)
}

.noscript-footer {
    justify-content: center;
    flex-wrap: wrap;
    background: var(--navy);
    color: #e8f4f8;
}

.noscript-footer p {
    margin: 0
}

.scroll-reveal {
    opacity: 0;
    filter: blur(7px);
    transition: opacity .7s ease, filter .7s ease, transform .8s cubic-bezier(.22, 1, .36, 1) var(--scroll-delay, 0ms)
}

.scroll-reveal.is-visible {
    opacity: 1;
    filter: blur(0)
}

@keyframes hero-content-in {
    from {
        opacity: 0;
        transform: translate3d(0, 22px, 0)
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

@keyframes hero-controls-in {
    from {
        opacity: 0;
        transform: translate3d(18px, 0, 0)
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

@keyframes pattern-drift {
    from {
        background-position: 0 0
    }
    to {
        background-position: 30px 30px
    }
}

@media (hover: hover) {
    .home-journey-step,
    .home-partner .card,
    .product-offering {
        transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s ease, border-color .3s ease
    }

    .home-journey-step:hover,
    .product-offering:hover {
        transform: translateY(-7px);
        box-shadow: 0 18px 42px rgba(14, 78, 99, .12)
    }
}

@media (max-width: 640px) {
    .noscript-nav {
        flex-wrap: wrap;
        gap: 12px 18px
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-hero .hero-content > *,
    .home-hero .hero-carousel-controls {
        opacity: 1;
        animation: none
    }

    .scroll-reveal,
    .scroll-reveal.is-visible {
        opacity: 1;
        filter: none
    }
}

@media (max-width: 640px) {
    .hero h1 {
        font-size: clamp(2rem, 9.5vw, 3rem)
    }

    .page-hero:after {
        width: 220px;
        height: 220px;
        right: -100px;
        top: 75px
    }
}

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

/* Nowiles blue theme */
.s-white {
    background: #FBFDFE
}

.s-soft,
.s-brand-lt {
    background: #F0F8FB
}

.eyebrow-dark {
    color: #77D6EA
}

.nav-base {
    background: rgba(255, 255, 255, .96);
    border-bottom-color: rgba(214, 232, 239, .9);
    box-shadow: 0 5px 24px rgba(9, 45, 67, .07);
    transition: background .25s, box-shadow .25s
}

.nav-base.is-scrolled {
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 8px 28px rgba(9, 45, 67, .12)
}

.nav-inner {
    transition: height .25s
}

.nav-base.is-scrolled .nav-inner {
    height: 66px
}

.nav-cta {
    border-radius: 7px;
    box-shadow: 0 6px 16px rgba(25, 127, 160, .19)
}

.nav-cta:hover {
    background: var(--brand-dark) !important
}

.scroll-progress {
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    overflow: hidden;
    pointer-events: none
}

.scroll-progress span {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #1B7898, #83a9b8, #b0d0dd);
    transform: scaleX(var(--scroll-progress, 0));
    transform-origin: left center;
    will-change: transform
}

.hero {
    min-height: 770px;
    background: linear-gradient(122deg, #0A3551 0%, #0B5272 54%, #126A87 100%)
}

.hero:before {
    background:
        radial-gradient(ellipse 50% 55% at 82% 38%, rgba(67, 190, 218, .3), transparent 72%),
        radial-gradient(ellipse 45% 60% at 20% 82%, rgba(32, 144, 177, .3), transparent 74%)
}

.hero:after {
    opacity: .19;
    background-image: radial-gradient(rgba(145, 231, 245, .76) .8px, transparent .8px);
    background-size: 26px 26px
}

.hero h1 {
    color: #fff
}

.brand-text {
    background: linear-gradient(100deg, #7CE1ED 0%, #52C9E0 55%, #B1F0F1 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent
}

.hero-kicker,
.hero-copy {
    color: rgba(235, 249, 252, .78)
}

.hero-kicker .dot {
    background: #81E1E8
}

.hero .btn-primary {
    color: #0D4B66;
    background: #fff;
    box-shadow: 0 9px 26px rgba(2, 30, 48, .19)
}

.hero .btn-primary:hover {
    color: #08344D;
    background: #EAFBFE
}

.hero .btn-ghost {
    color: #fff;
    border-color: rgba(232, 248, 251, .36);
    background: rgba(255, 255, 255, .07)
}

.hero .btn-ghost:hover {
    border-color: rgba(232, 248, 251, .72);
    background: rgba(255, 255, 255, .13)
}

.trust-pill {
    color: rgba(239, 250, 252, .86);
    border-color: rgba(226, 246, 250, .24);
    background: rgba(255, 255, 255, .075);
    box-shadow: none
}

.trust-pill .dot,
.trust-pill:nth-child(2) .dot,
.trust-pill:nth-child(3) .dot {
    background: #6ED6E5
}

.trust-pill:nth-child(2) .dot {
    background: #67b9d9
}

.trust-pill:nth-child(3) .dot {
    background: #B0EAF1
}

.hero-panel,
.mockup {
    border: 1px solid rgba(113, 207, 226, .35);
    border-radius: 18px;
    box-shadow: 0 28px 75px rgba(1, 25, 41, .28), 0 0 0 5px rgba(220, 249, 252, .08)
}

.panel-head {
    border-color: #DCECF1;
    background: linear-gradient(100deg, #EAF7FA, #F9FCFD)
}

.mini-mark,
.logo-mark {
    border-radius: 6px;
    background: var(--brand)
}

.metric,
.chart-card,
.course-card,
.mini-panel {
    border-color: #dce4e7;
    border-radius: 11px
}

.metric:nth-child(2),
.metric:nth-child(3) {
    background: #F5FAFC
}

.metric span,
.live,
.check {
    color: #166584
}

.bars i,
.bars i:nth-child(3n + 2),
.bars i:nth-child(3n) {
    background: linear-gradient(180deg, #27A8C6, #A9E2ED)
}

.bars i:nth-child(3n + 2) {
    background: linear-gradient(180deg, #397EB1, #B7D7EB)
}

.bars i:nth-child(3n) {
    background: linear-gradient(180deg, #429abd, #bcddea)
}

.course-line,
.progress {
    background: #E8F3F6
}

.course-line b,
.progress b,
.product-tab.active {
    background: var(--brand)
}

.stat:nth-child(2) .stat-icon,
.stat:nth-child(2) .stat-num,
.stat:nth-child(3) .stat-icon,
.stat:nth-child(3) .stat-num,
.stat:nth-child(4) .stat-icon,
.stat:nth-child(4) .stat-num {
    color: var(--brand)
}

.card,
.standard {
    border-color: var(--border);
    border-radius: 14px
}

.card:hover {
    border-color: rgba(25, 127, 160, .55);
    box-shadow: 0 14px 36px rgba(13, 76, 103, .11)
}

.icon-wrap {
    background: var(--brand-light);
    border-color: rgba(25, 127, 160, .2)
}

.service-card {
    border-radius: 14px;
    border-color: rgba(223, 244, 249, .15);
    background: rgba(255, 255, 255, .045)
}

.service-card .service-number,
.service-card:nth-child(3n + 1) .service-number,
.service-card:nth-child(3n + 2) .service-number,
.service-card:nth-child(3n) .service-number {
    color: #83DDEB
}

.service-card:hover {
    border-color: rgba(96, 209, 229, .48);
    background: rgba(255, 255, 255, .075)
}

.product-tab {
    border-radius: 7px
}

.product-tab.active {
    color: #fff;
    border-color: var(--brand)
}

.product-preview {
    border-color: #D5E8EF;
    border-radius: 17px
}

.mini-panel:nth-child(2) .progress b,
.mini-panel:nth-child(3) .progress b {
    background: var(--brand)
}

.flow:before {
    background: linear-gradient(180deg, rgba(93, 214, 232, .9), rgba(25, 127, 160, .18))
}

.flow-dot {
    background: rgba(75, 186, 211, .17);
    border-color: rgba(100, 209, 228, .44)
}

.flow-item:first-child .flow-dot,
.flow-item:nth-child(3) .flow-dot,
.flow-item:last-child .flow-dot {
    background: #26A2C2
}

.flow-item:not(:first-child):not(:nth-child(3)):not(:last-child) .flow-dot:after {
    background: #70D8E6
}

.ai-feature {
    border-radius: 12px;
    border-color: rgba(130, 211, 226, .2)
}

.ai-feature:hover {
    background: rgba(39, 164, 192, .13);
    border-color: rgba(102, 205, 223, .45)
}

.step-icon,
.step:nth-child(2) .step-icon,
.step:nth-child(3) .step-icon,
.step:nth-child(4) .step-icon {
    border-radius: 14px;
    background: linear-gradient(145deg, #167B9A, #37B2CE);
    box-shadow: 0 7px 20px rgba(19, 112, 145, .24)
}

.step:nth-child(3) .step-icon {
    background: linear-gradient(145deg, #137F8E, #47C5C8)
}

.difference {
    border-radius: 15px;
    background: linear-gradient(135deg, #EDF8FB, #F8FCFD);
    border-color: #D7EAF0
}

.portfolio-visual {
    background: linear-gradient(135deg, #E2F2F7, #F4FAFC)
}

.browser-cards i:nth-child(3n + 1),
.browser-cards i:nth-child(3n + 2),
.browser-cards i:nth-child(3n) {
    background: #E7F4F8;
    border-color: #D3E9EF
}

.browser-side {
    background: #164B68
}

.browser-side b {
    background: #5AC5DC
}

.tag {
    background: #E5F3F7;
    color: #176B87
}

.contact-section {
    isolation: isolate;
    background: linear-gradient(125deg, #e4f8fb 0%, #f5fcfd 52%, #def5f9 100%)
}

.contact-section:before {
    position: absolute;
    z-index: 0;
    content: "";
    inset: 0;
    background:
        radial-gradient(circle, rgba(255, 255, 255, .92) 0 2px, transparent 3px) 8% 22% / 14px 14px no-repeat,
        radial-gradient(circle, rgba(25, 127, 160, .32) 0 3px, transparent 4px) 19% 76% / 18px 18px no-repeat,
        radial-gradient(circle, rgba(255, 255, 255, .82) 0 1px, transparent 2px) 31% 42% / 8px 8px no-repeat,
        radial-gradient(circle, rgba(25, 127, 160, .26) 0 2px, transparent 3px) 44% 83% / 13px 13px no-repeat,
        radial-gradient(circle, rgba(255, 255, 255, .86) 0 3px, transparent 4px) 57% 18% / 19px 19px no-repeat,
        radial-gradient(circle, rgba(25, 127, 160, .25) 0 1px, transparent 2px) 69% 69% / 9px 9px no-repeat,
        radial-gradient(circle, rgba(255, 255, 255, .8) 0 2px, transparent 3px) 82% 33% / 15px 15px no-repeat,
        radial-gradient(circle, rgba(25, 127, 160, .28) 0 3px, transparent 4px) 94% 82% / 20px 20px no-repeat;
    pointer-events: none;
    animation: cta-particles-drift 13s ease-in-out infinite alternate;
    will-change: transform
}

.contact-section:after {
    position: absolute;
    z-index: 0;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(25, 127, 160, .2) 50%, transparent 50%) 14% 54% / 13px 13px no-repeat,
        linear-gradient(135deg, rgba(255, 255, 255, .8) 50%, transparent 50%) 27% 14% / 8px 8px no-repeat,
        linear-gradient(135deg, rgba(25, 127, 160, .16) 50%, transparent 50%) 38% 67% / 19px 19px no-repeat,
        linear-gradient(135deg, rgba(255, 255, 255, .76) 50%, transparent 50%) 52% 35% / 11px 11px no-repeat,
        linear-gradient(135deg, rgba(25, 127, 160, .18) 50%, transparent 50%) 65% 88% / 15px 15px no-repeat,
        linear-gradient(135deg, rgba(255, 255, 255, .84) 50%, transparent 50%) 77% 57% / 20px 20px no-repeat,
        linear-gradient(135deg, rgba(25, 127, 160, .18) 50%, transparent 50%) 89% 19% / 10px 10px no-repeat;
    content: "";
    pointer-events: none;
    animation: cta-diamonds-drift 17s ease-in-out infinite alternate;
    will-change: transform
}

.contact-content {
    z-index: 1
}

@keyframes cta-particles-drift {
    from {
        transform: perspective(700px) translate3d(0, 0, 0) scale(.9)
    }
    to {
        transform: perspective(700px) translate3d(12px, -17px, 28px) scale(1.12)
    }
}

@keyframes cta-diamonds-drift {
    from {
        transform: perspective(700px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0, 0, 0)
    }
    to {
        transform: perspective(700px) rotateX(16deg) rotateY(-12deg) rotateZ(30deg) translate3d(-14px, 12px, 24px)
    }
}

.contact-section .hero-kicker {
    color: var(--navy-dark) !important
}

.contact-section .hero-kicker .dot {
    background: var(--navy-dark)
}

.contact-content h2,
.contact-content h2 span {
    color: var(--navy-dark)
}

.contact-content p,
.contact-points {
    color: rgba(9, 45, 67, .82)
}

.contact-section .btn-primary {
    color: #fff;
    background: var(--navy-dark);
    box-shadow: 0 8px 20px rgba(9, 45, 67, .18)
}

.contact-section .btn-primary:hover {
    background: #244b5b
}

@media (prefers-reduced-motion: reduce) {
    .contact-section:before,
    .contact-section:after {
        animation: none;
        will-change: auto
    }
}

footer {
    background: #10262f
}

.page-hero {
    background: linear-gradient(115deg, #EAF6FA 0%, #F5FAFC 58%, #E6F3F8 100%)
}

.page-hero:after {
    background: radial-gradient(circle at 35% 35%, rgba(69, 181, 207, .27), rgba(25, 127, 160, .14) 48%, rgba(25, 127, 160, .06) 70%, transparent 71%)
}

.field input,
.field textarea,
.field select {
    border-radius: 8px
}

.field input:focus,
.field textarea:focus,
.field select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(25, 127, 160, .12)
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid rgba(73, 181, 207, .76);
    outline-offset: 3px
}

.scroll-reveal {
    opacity: 1;
    transform: translate3d(0, 16px, 0);
    transition: transform .55s cubic-bezier(.22, 1, .36, 1) var(--scroll-delay, 0ms)
}

.scroll-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0)
}

.card.scroll-reveal.is-visible:hover {
    transform: translate3d(0, -4px, 0)
}

.hero {
    background: linear-gradient(125deg, #FFFFFF 0%, #F7FBFD 58%, #EEF7FA 100%)
}

.hero:before {
    background:
        radial-gradient(ellipse 44% 52% at 82% 42%, rgba(91, 190, 214, .16), transparent 72%),
        radial-gradient(ellipse 42% 52% at 18% 78%, rgba(25, 127, 160, .08), transparent 72%)
}

.hero:after {
    opacity: .075;
    background-image: radial-gradient(rgba(25, 127, 160, .7) .8px, transparent .8px);
    background-size: 30px 30px
}

.hero h1 {
    color: var(--txt-primary)
}

.brand-text {
    background: linear-gradient(100deg, #176D8B, #20A3C2 72%, #60C7D8);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent
}

.hero-kicker,
.hero-copy {
    color: var(--txt-sec)
}

.hero-kicker .dot {
    background: var(--brand)
}

.hero .btn-primary {
    color: #fff;
    background: var(--brand);
    box-shadow: 0 8px 22px rgba(25, 127, 160, .22)
}

.hero .btn-primary:hover {
    color: #fff;
    background: var(--brand-dark)
}

.hero .btn-ghost {
    color: var(--txt-sec);
    border-color: var(--border);
    background: rgba(255, 255, 255, .8)
}

.hero .btn-ghost:hover {
    color: var(--brand);
    border-color: var(--brand);
    background: #F2FAFC
}

.trust-pill {
    color: var(--txt-sec);
    border-color: var(--border);
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 3px 10px rgba(9, 45, 67, .035)
}

.trust-pill .dot,
.trust-pill:nth-child(2) .dot,
.trust-pill:nth-child(3) .dot {
    background: var(--brand)
}

.trust-pill:nth-child(2) .dot {
    background: #4290af
}

.trust-pill:nth-child(3) .dot {
    background: #56BFD0
}

.btn-primary,
.btn-ghost,
.btn-ghost-inv {
    border-radius: 8px
}

.nav-cta {
    border-radius: 7px
}

.card,
.standard,
.mini-panel {
    border-radius: 13px
}

.s-white {
    background: #fff
}

.s-soft,
.s-brand-lt {
    background: #F2F8FA
}

.page-hero {
    background: linear-gradient(115deg, #F2F8FA 0%, #FFFFFF 58%, #e9eff2 100%)
}

.page-hero:after {
    background: radial-gradient(circle at 35% 35%, rgba(69, 181, 207, .21), rgba(25, 127, 160, .1) 48%, rgba(25, 127, 160, .04) 70%, transparent 71%)
}

/* Give the solutions hero and services section a clear visual handoff. */
body[data-page="solutions"] .page-hero {
    background:
        radial-gradient(circle at 78% 18%, rgba(67, 185, 210, .16), transparent 30%),
        linear-gradient(135deg, #07101f 0%, #0b1729 56%, #10263a 100%) !important;
    border-bottom: 1px solid rgba(67, 185, 210, .2);
}

body[data-page="solutions"] main > .s-navy {
    background:
        linear-gradient(180deg, #172b46 0%, #14243b 100%) !important;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

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

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

}

@media (max-width: 640px) {
    .page-hero:after {
        width: 220px;
        height: 220px;
        right: -100px;
        top: 75px
    }
}

/* Learning-focused homepage imagery */
.hero {
    min-height: 740px;
    padding: 150px 0 130px;
    background: #103F59
}

.hero:before {
    z-index: 1;
    background:
        radial-gradient(ellipse 45% 60% at 75% 35%, rgba(40, 161, 190, .2), transparent 72%),
        linear-gradient(90deg, rgba(7, 39, 59, .88) 0%, rgba(9, 51, 74, .74) 48%, rgba(8, 54, 77, .48) 100%)
}

.hero:after {
    z-index: 1;
    opacity: .13;
    background-image: radial-gradient(rgba(213, 245, 250, .84) .8px, transparent .8px);
    background-size: 30px 30px
}

.hero-carousel {
    position: absolute;
    inset: 0;
    display: grid;
    align-items: center;
    overflow: hidden;
    isolation: isolate
}

.hero-carousel-track,
.hero-slide,
.hero-slide img,
.hero-shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%
}

.hero-slide {
    z-index: -2;
    overflow: hidden;
    opacity: 0;
    transition: opacity 1.2s ease
}

.hero-slide.is-active {
    opacity: 1
}

.hero-slide img {
    object-fit: cover;
    object-position: center 42%;
    transform: scale(1.045);
    transition: transform 7s ease
}

.hero-slide.is-active img {
    transform: scale(1)
}

.hero-shade {
    z-index: -1;
    background: linear-gradient(90deg, rgba(6, 37, 56, .88), rgba(8, 48, 70, .74) 53%, rgba(8, 49, 69, .45))
}

.hero:before {
    background: linear-gradient(90deg, rgba(6, 37, 56, .28), rgba(8, 48, 70, .12) 53%, rgba(8, 49, 69, .08))
}

.hero-grid {
    position: relative;
    z-index: 2;
    width: 100%;
    grid-template-columns: 1fr;
    align-items: center
}

.hero-content {
    max-width: 790px
}

.hero-content .hero-kicker,
.hero-content .hero-copy {
    color: rgba(255, 255, 255, .86)
}

.hero-content .hero-kicker .dot {
    background: #7CE1ED
}

.hero-content h1 {
    color: #fff
}

.hero-content .brand-text {
    background: linear-gradient(100deg, #83E4EF, #56C4DD 72%, #d1ecf6);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent
}

.hero-content .hero-copy {
    max-width: 620px
}

.hero-content .btn-primary {
    color: #0D4B66;
    background: #fff
}

.hero-content .btn-primary:hover {
    color: #08344D;
    background: #EAFBFE
}

.hero-content .btn-ghost {
    color: #fff;
    border-color: rgba(232, 248, 251, .45);
    background: rgba(255, 255, 255, .08)
}

.hero-content .btn-ghost:hover {
    color: #fff;
    border-color: rgba(232, 248, 251, .8);
    background: rgba(255, 255, 255, .15)
}

.hero-content .trust-pill {
    color: rgba(255, 255, 255, .9);
    border-color: rgba(226, 246, 250, .3);
    background: rgba(255, 255, 255, .1)
}

.hero-content .trust-pill .dot {
    background: #74DDE9
}

.hero-carousel-controls {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 34px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    color: rgba(255, 255, 255, .84)
}

.carousel-dots {
    display: flex;
    align-items: center;
    gap: 9px
}

.carousel-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: width .25s ease, border-radius .25s ease, background .25s ease
}

.carousel-dot.is-active {
    width: 28px;
    border-color: #fff;
    border-radius: 8px;
    background: #fff
}

.carousel-count {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    letter-spacing: .08em
}

.carousel-toggle {
    padding: 7px 11px;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 6px;
    background: rgba(4, 37, 57, .35);
    color: #fff;
    font-size: 11px;
    cursor: pointer
}

.carousel-toggle:hover {
    background: rgba(255, 255, 255, .16)
}

.home-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 56px;
    margin-bottom: 38px
}

.home-section-heading > div {
    max-width: 620px
}

.home-section-heading .section-title {
    font-size: clamp(2rem, 3.5vw, 2.8rem)
}

.home-section-heading > .lead {
    max-width: 470px
}

.home-about {
    position: relative;
    overflow: hidden;
    padding: 48px 0 52px;
    background: linear-gradient(115deg, #F8FCFD 0%, #FFFFFF 55%, #F0F9FB 100%)
}

.home-about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr);
    align-items: center;
    gap: clamp(36px, 6vw, 88px)
}

.home-about-content {
    max-width: 700px
}

.home-about .eyebrow-light {
    margin-bottom: 8px
}

.home-about .section-title {
    font-size: clamp(1.8rem, 3.5vw, 2.65rem)
}

.home-about-copy {
    margin-top: 16px;
    color: var(--txt-sec);
    font-size: 15px;
    line-height: 1.75
}

.home-about-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 24px;
    margin: 22px 0 26px;
    padding: 0;
    list-style: none
}

.home-about-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 600
}

.home-about-list li span {
    color: var(--brand);
    font-size: 20px;
    font-weight: 800
}

.home-about-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--brand-dark);
    font-size: 14px;
    font-weight: 700
}

.home-about-link span {
    transition: transform .2s ease
}

.home-about-link:hover span {
    transform: translateX(4px)
}

.home-about-visual {
    position: relative;
    min-height: 370px;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(25, 127, 160, .2);
    border-radius: 16px;
    background: #EAF4F7;
    box-shadow: 0 20px 48px rgba(9, 45, 67, .12)
}

.home-about-visual > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
    filter: saturate(.82) contrast(1.03);
    transition: transform .7s cubic-bezier(.2, .75, .25, 1)
}

.home-about-visual:hover > img {
    transform: scale(1.035)
}

.home-about-visual:after {
    position: absolute;
    inset: 55% 0 0;
    background: linear-gradient(180deg, transparent, rgba(5, 36, 54, .48));
    content: "";
    pointer-events: none
}

.home-about-visual figcaption {
    position: absolute;
    z-index: 1;
    right: 18px;
    bottom: 18px;
    left: 18px;
    display: grid;
    gap: 6px;
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 10px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 10px 28px rgba(7, 42, 62, .12);
    color: var(--txt-primary)
}

.home-about-visual figcaption span {
    color: var(--brand-dark);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase
}

.home-about-visual figcaption strong {
    max-width: 390px;
    font: 700 17px/1.4 'Plus Jakarta Sans'
}

.home-solution-grid {
    align-items: stretch
}

.home-solution-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--txt-primary)
}

.home-solution-card > img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: transform .65s cubic-bezier(.2, .75, .25, 1)
}

.home-solution-card:hover > img {
    transform: scale(1.045)
}

.home-solution-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px
}

.home-solution-copy .eyebrow-light {
    margin-bottom: 10px
}

.home-solution-copy h3 {
    margin-bottom: 10px;
    font-size: 19px;
    line-height: 1.35
}

.home-solution-copy p {
    margin-bottom: 20px;
    color: var(--txt-sec);
    font-size: 13px;
    line-height: 1.7
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: auto;
    color: var(--brand);
    font-size: 13px;
    font-weight: 600
}

.text-link span {
    transition: transform .2s ease
}

.home-solution-card:hover .text-link span {
    transform: translateX(4px)
}

.home-journey-grid {
    position: relative;
    gap: 24px;
    margin: 52px 0 34px
}

.home-journey-step {
    position: relative;
    padding: 25px 20px 22px;
    border: 1px solid #dce4e7;
    border-radius: 13px;
    background: rgba(255, 255, 255, .82)
}

.home-journey-grid:before {
    position: absolute;
    top: 44px;
    right: 8%;
    left: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(25, 127, 160, .28), transparent);
    content: "";
    pointer-events: none
}

.home-journey-step {
    z-index: 1;
    transition: transform .65s cubic-bezier(.22, 1, .36, 1), border-color .45s ease, box-shadow .45s ease, background-color .45s ease
}

.home-journey-step.is-current {
    border-color: rgba(25, 127, 160, .5);
    background: #fff;
    box-shadow: 0 20px 46px rgba(14, 78, 99, .14);
    transform: translateY(-8px)
}

.home-journey-step.is-current > span {
    background: var(--brand);
    color: #fff;
    box-shadow: 0 0 0 7px rgba(86, 195, 220, .16), 0 8px 18px rgba(25, 127, 160, .2)
}

.home-journey-step > span {
    display: grid;
    width: 38px;
    height: 38px;
    margin-bottom: 20px;
    place-items: center;
    border-radius: 50%;
    background: var(--brand-light);
    color: var(--brand-dark);
    font: 700 12px 'Plus Jakarta Sans'
}

.home-journey-step h3 {
    margin-bottom: 9px;
    font-size: 15px;
    line-height: 1.45
}

.home-journey-step p {
    color: var(--txt-sec);
    font-size: 12.5px;
    line-height: 1.65
}

.about-visual {
    position: relative;
    min-height: 415px;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #164B68;
    box-shadow: 0 20px 50px rgba(9, 45, 67, .14)
}

.about-visual > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.about-visual:after {
    position: absolute;
    inset: 25% 0 0;
    background: linear-gradient(180deg, transparent, rgba(7, 42, 62, .88));
    content: ""
}

.about-visual figcaption {
    position: absolute;
    z-index: 1;
    right: 25px;
    bottom: 24px;
    left: 25px;
    display: grid;
    gap: 10px;
    color: #fff
}

.about-visual .eyebrow-dark {
    margin: 0;
    color: #A8EAF1
}

.about-visual figcaption strong {
    max-width: 440px;
    font: 700 21px/1.35 'Plus Jakarta Sans'
}

.about-visual-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    color: rgba(255, 255, 255, .84);
    font-size: 11px
}

.about-visual-tags i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #83DDEB
}

.portfolio-visual {
    position: relative;
    display: block;
    padding: 0;
    overflow: hidden;
    background: #174B68
}

.portfolio-visual > img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: transform .65s cubic-bezier(.2, .75, .25, 1)
}

.portfolio-card:hover .portfolio-visual > img {
    transform: scale(1.045)
}

.portfolio-visual:after {
    position: absolute;
    inset: 45% 0 0;
    background: linear-gradient(180deg, transparent, rgba(5, 36, 54, .7));
    content: "";
    pointer-events: none
}

.portfolio-image-label {
    position: absolute;
    z-index: 1;
    bottom: 15px;
    left: 17px;
    color: #fff;
    font: 600 12px 'Plus Jakarta Sans'
}

@media (max-width: 960px) {
    .hero {
        min-height: 720px
    }

    .home-about-grid {
        grid-template-columns: minmax(0, 1fr) minmax(280px, .82fr);
        gap: 28px
    }

    .home-about-visual {
        min-height: 340px
    }

    .home-section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px
    }

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

@media (max-width: 640px) {
    .hero {
        min-height: 690px;
        padding: 125px 0 115px
    }

    .home-about {
        padding: 32px 0 34px
    }

    .home-about-grid {
        grid-template-columns: 1fr;
        gap: 28px
    }

    .home-about-list {
        gap: 10px 16px;
        margin-top: 18px
    }

    .home-about-list li {
        align-items: flex-start;
        gap: 8px;
        font-size: 14px
    }

    .home-about-visual {
        min-height: 280px
    }

    .hero-grid {
        gap: 0
    }

    .hero-content .hero-kicker {
        align-items: flex-start;
        line-height: 1.5
    }

    .hero-carousel-controls {
        bottom: 25px
    }

    .home-section-heading {
        margin-bottom: 27px
    }

    .home-solution-card > img {
        height: 205px
    }

    .home-journey-grid {
        grid-template-columns: 1fr;
        gap: 13px;
        margin-top: 32px
    }

    .about-visual {
        min-height: 340px
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-slide,
    .hero-slide img,
    .home-solution-card > img,
    .portfolio-visual > img {
        transition-duration: .01ms
    }
}

/* Distinct direction, depth, and image treatment across learning pages */
main {
    overflow-x: clip
}

.scroll-reveal.from-left {
    --reveal-x: -18px;
    --reveal-y: 0px;
    --reveal-z: 0px;
    --reveal-rotate: 0deg
}

.scroll-reveal.from-right {
    --reveal-x: 18px;
    --reveal-y: 0px;
    --reveal-z: 0px;
    --reveal-rotate: 0deg
}

.scroll-reveal.from-back {
    --reveal-x: 0px;
    --reveal-y: 16px;
    --reveal-z: 0px;
    --reveal-rotate: 0deg
}

.scroll-reveal.from-front {
    --reveal-x: 0px;
    --reveal-y: -12px;
    --reveal-z: 0px;
    --reveal-rotate: 0deg
}

.scroll-reveal[class*="from-"] {
    transform: perspective(1100px) translate3d(var(--reveal-x), var(--reveal-y), var(--reveal-z)) rotate(var(--reveal-rotate));
    transform-style: preserve-3d
}

.scroll-reveal[class*="from-"].is-visible {
    transform: perspective(1100px) translate3d(0, 0, 0) rotate(0)
}

.card.scroll-reveal[class*="from-"].is-visible:hover {
    transform: perspective(1100px) translate3d(0, -5px, 12px) rotateX(1deg)
}

section.depth-scene {
    position: relative;
    isolation: isolate;
    overflow: hidden
}

section.depth-scene > .container {
    position: relative;
    z-index: 1
}

section.depth-scene:before,
section.depth-scene:after {
    position: absolute;
    z-index: 0;
    width: clamp(220px, 34vw, 440px);
    aspect-ratio: 1;
    border: 1px solid rgba(25, 127, 160, .12);
    border-radius: 50%;
    content: "";
    pointer-events: none;
    transform-style: preserve-3d
}

section.depth-scene:before {
    top: -27%;
    right: -9%;
    background:
        radial-gradient(circle at 33% 35%, rgba(106, 212, 231, .2), transparent 48%),
        radial-gradient(circle at 68% 65%, rgba(25, 127, 160, .1), transparent 59%);
    box-shadow: inset -22px -20px 55px rgba(25, 127, 160, .08), 0 20px 60px rgba(25, 127, 160, .035);
    animation: depth-orbit 24s ease-in-out infinite alternate
}

section.depth-scene:after {
    right: 9%;
    bottom: -38%;
    width: clamp(140px, 20vw, 260px);
    border-color: rgba(25, 127, 160, .14);
    background: radial-gradient(circle at 35% 34%, rgba(255, 255, 255, .85), rgba(80, 178, 203, .09) 43%, rgba(25, 127, 160, .035) 69%, transparent 70%);
    box-shadow: inset 8px 10px 24px rgba(255, 255, 255, .7), 0 16px 46px rgba(25, 127, 160, .05);
    animation: depth-orbit-reverse 22s ease-in-out infinite alternate
}

/* Modern section backdrop: layered glow + technical grid, without oversized circles. */
section.depth-scene {
    background-image:
        linear-gradient(135deg, rgba(25,127,160,.05), transparent 40%),
        linear-gradient(315deg, rgba(67,185,210,.045), transparent 46%);
}
section.depth-scene:before,
section.depth-scene:after {
    display: block;
    border: 0;
    pointer-events: none;
}
section.depth-scene:before {
    top: -150px;
    right: -75px;
    width: 340px;
    height: 340px;
    border-radius: 42% 58% 64% 36%;
    background: radial-gradient(circle at 35% 35%, rgba(67,185,210,.22), rgba(25,127,160,.08) 45%, transparent 72%);
    box-shadow: none;
    filter: blur(2px);
    opacity: .8;
    animation: modern-section-glow 16s ease-in-out infinite alternate;
}
section.depth-scene:after {
    inset: 0;
    width: auto;
    height: auto;
    right: auto;
    bottom: auto;
    aspect-ratio: auto;
    border-radius: 0;
    background-image:
        linear-gradient(rgba(25,127,160,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(25,127,160,.08) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: linear-gradient(135deg, rgba(0,0,0,.65), transparent 62%);
    opacity: .32;
    animation: modern-section-grid 22s linear infinite;
}
@keyframes modern-section-glow {
    from { transform: translate3d(0, 0, 0) rotate(-8deg) scale(.96) }
    to { transform: translate3d(-28px, 18px, 0) rotate(8deg) scale(1.06) }
}
@keyframes modern-section-grid {
    from { background-position: 0 0, 0 0 }
    to { background-position: 36px 18px, 18px 36px }
}
@media (prefers-reduced-motion: reduce) {
    section.depth-scene:before,
    section.depth-scene:after { animation: none }
}

.service-card {
    padding: 0 0 22px;
    overflow: hidden
}

.service-image {
    display: block;
    width: 100%;
    height: 170px;
    margin-bottom: 20px;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.2, .75, .25, 1)
}

.service-card:hover .service-image {
    transform: scale(1.045)
}

.service-card > :not(.service-image) {
    margin-right: 22px;
    margin-left: 22px
}

.service-card h3 {
    margin-top: 12px
}

.product-image {
    display: block;
    width: 100%;
    height: clamp(180px, 24vw, 285px);
    object-fit: cover
}

.page-feature-visual,
.commitment-visual,
.contact-visual {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--brand-light)
}

.page-feature-visual {
    margin: 25px 0 0;
    min-height: 230px
}

.page-feature-visual img,
.commitment-visual img,
.contact-visual img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: inherit;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.2, .75, .25, 1)
}

.page-feature-visual:hover img,
.commitment-visual:hover img,
.contact-visual:hover img {
    transform: scale(1.035)
}

.page-feature-visual figcaption,
.commitment-visual figcaption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 34px 18px 16px;
    background: linear-gradient(transparent, rgba(8, 45, 65, .8));
    color: #fff;
    font: 600 13px/1.5 'Plus Jakarta Sans'
}

.commitment-visual {
    height: 280px;
    margin: 24px 0 0
}

.contact-visual {
    height: 205px;
    margin-top: 22px
}

.home-solution-card,
.portfolio-card,
.service-card {
    transform-style: preserve-3d;
    backface-visibility: hidden
}

.home-solution-card:hover,
.portfolio-card:hover {
    transform: perspective(1000px) translateY(-5px) rotateX(1deg) rotateY(-.8deg)
}

@keyframes depth-orbit {
    0% {
        transform: perspective(900px) rotateX(9deg) rotateY(-14deg) translate3d(0, 0, 0)
    }
    100% {
        transform: perspective(900px) rotateX(-8deg) rotateY(12deg) translate3d(-18px, 16px, 24px)
    }
}

@keyframes depth-orbit-reverse {
    0% {
        transform: perspective(800px) rotateX(-12deg) rotateY(15deg) translate3d(0, 0, 0)
    }
    100% {
        transform: perspective(800px) rotateX(10deg) rotateY(-11deg) translate3d(15px, -13px, 18px)
    }
}

@media (max-width: 640px) {
    .service-image {
        height: 190px
    }

    .page-feature-visual {
        min-height: 190px
    }

    .commitment-visual {
        height: 220px
    }

    .contact-visual {
        height: 180px
    }
}

@media (prefers-reduced-motion: reduce) {
    section.depth-scene:before,
    section.depth-scene:after {
        animation: none
    }

    .scroll-reveal[class*="from-"],
    .scroll-reveal[class*="from-"].is-visible {
        opacity: 1;
        transform: none;
        transition: none
    }
}

/* Give the homepage hero the spacious split composition used by the reference. */
.hero {
    min-height: 680px;
    padding: 112px 0 96px;
    background: linear-gradient(120deg, #10262f 0%, #0d405a 62%, #10536d 100%)
}

.hero:before {
    z-index: 0;
    background:
        radial-gradient(ellipse 38% 58% at 86% 48%, rgba(71, 177, 201, .19), transparent 74%),
        radial-gradient(ellipse 42% 66% at 3% 92%, rgba(25, 127, 160, .16), transparent 74%)
}

.hero:after {
    z-index: 0;
    opacity: .075;
    background-image: radial-gradient(rgba(213, 245, 250, .72) .75px, transparent .75px);
    background-size: 28px 28px
}

.hero-carousel {
    z-index: 1;
    display: flex;
    align-items: center;
    pointer-events: none
}

.hero-carousel-track {
    inset: 82px max(32px, calc((100vw - 1320px) / 2)) 106px 53%;
    width: auto;
    height: auto;
    overflow: hidden;
    border: 1px solid rgba(170, 225, 238, .3);
    border-radius: 28px;
    background: #dcebf0;
    box-shadow: 0 28px 72px rgba(14, 67, 90, .16)
}

.hero-slide {
    z-index: 0
}

.hero-slide img {
    object-position: center 42%
}

.hero-shade {
    inset: 82px max(32px, calc((100vw - 1320px) / 2)) 106px 53%;
    width: auto;
    height: auto;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(10, 51, 70, .02) 45%, rgba(6, 37, 56, .55) 100%)
}

.hero-grid {
    z-index: 2;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    align-items: center
}

.hero-content {
    max-width: 590px
}

.hero-content .hero-kicker,
.hero-content .hero-copy {
    color: rgba(235, 247, 250, .82)
}

.hero-content .hero-kicker {
    font-weight: 600;
    letter-spacing: .01em
}

.hero-content .hero-kicker .dot {
    background: #73d8e8;
    animation: none
}

.hero-content h1 {
    color: #fff;
    font-size: clamp(3.2rem, 5.3vw, 4.65rem);
    line-height: 1.08;
    letter-spacing: -.055em
}

.hero-content .brand-text {
    background-image: linear-gradient(100deg, #6aaec9, #6aaec9 72%, #6aaec9)
}

.hero-content .hero-copy {
    max-width: 530px;
    margin-top: 22px;
    font-size: 16px;
    line-height: 1.75
}

.hero-content .btn-primary {
    color: #fff;
    background: #1689aa;
    box-shadow: 0 10px 24px rgba(2, 19, 31, .2)
}

.hero-content .btn-primary:hover {
    color: #fff;
    background: #117493
}

.hero-content .btn-ghost {
    color: #fff;
    border-color: rgba(232, 248, 251, .42);
    background: rgba(255, 255, 255, .08)
}

.hero-content .btn-ghost:hover {
    color: #fff;
    border-color: rgba(232, 248, 251, .8);
    background: rgba(255, 255, 255, .15)
}

.hero-content .trust-pill {
    color: rgba(242, 250, 252, .9);
    border-color: rgba(226, 246, 250, .25);
    background: rgba(255, 255, 255, .075);
    box-shadow: 0 3px 10px rgba(5, 28, 42, .12)
}

.hero-content .trust-pill .dot {
    background: #68d4e6
}

.hero-proof-card {
    position: absolute;
    z-index: 2;
    right: max(calc((100vw - 1320px) / 2 + 26px), 56px);
    top: 50%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 17px 13px 13px;
    border: 1px solid rgba(255, 255, 255, .66);
    border-radius: 13px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 12px 36px rgba(5, 40, 59, .18);
    color: var(--txt-primary);
    pointer-events: none;
    transform: translateY(-50%)
}

.hero-proof-mark {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 10px;
    background: var(--brand-light);
    color: var(--brand-dark);
    font: 800 21px 'Plus Jakarta Sans'
}

.hero-proof-card strong,
.hero-proof-card small {
    display: block
}

.hero-proof-card strong {
    font: 700 12px 'Plus Jakarta Sans'
}

.hero-proof-card small {
    margin-top: 4px;
    color: var(--txt-sec);
    font-size: 10px
}

.hero-carousel-controls {
    position: absolute;
    z-index: 3;
    right: max(calc((100vw - 1320px) / 2 + 18px), 50px);
    bottom: 122px;
    left: 53%;
    margin: 0;
    width: auto;
    max-width: none;
    justify-content: flex-end;
    gap: 15px;
    padding: 0 20px;
    color: #fff;
    pointer-events: auto
}

.home-partner {
    background: linear-gradient(125deg, #d9f3f7 0%, #eaf9fb 52%, #d0eff4 100%)
}

.home-partner .lead {
    margin-top: 16px
}

.home-partner-links {
    gap: 12px
}

.home-partner .card {
    display: block;
    padding: 20px
}

.home-partner .card p {
    margin-top: 8px;
    font-size: 12.5px;
    line-height: 1.5
}

.home-partner .card {
    border-color: rgba(25, 127, 160, .13);
    background: linear-gradient(145deg, #197b99, #145a77);
    box-shadow: 0 8px 24px rgba(14, 78, 99, .055)
}

.home-partner .card,
.home-partner .card strong,
.home-partner .card .muted {
    color: #fff
}

.home-partner .card .muted {
    color: rgba(255, 255, 255, .76)
}

.home-partner .card:hover {
    border-color: rgba(126, 222, 235, .65);
    background: linear-gradient(145deg, #238ba8, #176987);
    box-shadow: 0 14px 30px rgba(14, 78, 99, .1)
}

.carousel-dot {
    border-color: rgba(255, 255, 255, .9)
}

.carousel-dot.is-active {
    background: #fff
}

.carousel-toggle {
    border-color: rgba(255, 255, 255, .56);
    border-radius: 999px;
    background: rgba(8, 43, 61, .42);
    padding: 7px 13px
}

@media (max-width: 960px) {
    .hero {
        min-height: 720px;
        padding: 125px 0 115px;
        background: linear-gradient(120deg, #10262f 0%, #0d405a 62%, #10536d 100%)
    }

    .hero:before {
        z-index: 0;
        background: linear-gradient(90deg, rgba(6, 37, 56, .88) 0%, rgba(9, 51, 74, .74) 56%, rgba(8, 54, 77, .48) 100%)
    }

    .hero:after {
        z-index: 0;
        opacity: .09
    }

    .hero-carousel {
        z-index: 1;
        display: grid;
        align-items: center;
        pointer-events: auto
    }

    .hero-carousel-track {
        inset: 0;
        width: auto;
        height: auto;
        border: 0;
        border-radius: 0;
        box-shadow: none
    }

    .hero-slide {
        z-index: -2
    }

    .hero-shade {
        inset: 0;
        width: auto;
        height: auto;
        border-radius: 0;
        background: linear-gradient(90deg, rgba(6, 37, 56, .88), rgba(8, 48, 70, .74) 56%, rgba(8, 49, 69, .45))
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 0
    }

    .hero-content {
        max-width: 650px
    }

    .hero-content .hero-kicker,
    .hero-content .hero-copy {
        color: rgba(255, 255, 255, .88)
    }

    .hero-content h1 {
        color: #fff;
        font-size: clamp(3rem, 8vw, 4.6rem)
    }

    .hero-content .brand-text {
        background-image: linear-gradient(100deg, #83e4ef, #56c4dd 72%, #d1ecf6)
    }

    .hero-content .btn-primary {
        color: #0d4b66;
        background: #fff
    }

    .hero-content .btn-primary:hover {
        color: #08344d;
        background: #eafbfe
    }

    .hero-content .btn-ghost {
        color: #fff;
        border-color: rgba(232, 248, 251, .5);
        background: rgba(255, 255, 255, .08)
    }

    .hero-content .btn-ghost:hover {
        color: #fff;
        border-color: rgba(232, 248, 251, .8);
        background: rgba(255, 255, 255, .15)
    }

    .hero-content .trust-pill {
        color: rgba(255, 255, 255, .92);
        border-color: rgba(226, 246, 250, .35);
        background: rgba(255, 255, 255, .1)
    }

    .hero-content .trust-pill .dot {
        background: #74dde9
    }

    .hero-carousel-controls {
        right: 0;
        bottom: 36px;
        left: 0;
        margin: 0;
        width: 100%;
        padding: 0 24px;
        justify-content: flex-end
    }

    .hero-proof-card {
        display: none
    }
}

@media (max-width: 640px) {
    .hero {
        min-height: 620px;
        padding: 100px 0 82px;
        background: linear-gradient(145deg, #10262f 0%, #0d405a 65%, #10536d 100%)
    }

    .hero:before {
        z-index: 0;
        background:
            radial-gradient(ellipse 85% 72% at 100% 0%, rgba(86, 195, 220, .2), transparent 74%),
            radial-gradient(ellipse 65% 70% at 0% 100%, rgba(25, 127, 160, .18), transparent 75%)
    }

    .hero:after,
    .hero-carousel-track,
    .hero-shade {
        display: none
    }

    .hero-content {
        max-width: 100%
    }

    .hero-content h1 {
        max-width: 12ch;
        font-size: clamp(2.45rem, 10.5vw, 3.15rem);
        line-height: 1.06;
        letter-spacing: -.045em
    }

    .hero-content .hero-kicker {
        max-width: 34ch;
        color: #fff;
        font-size: 12px;
        line-height: 1.5;
        text-shadow: 0 1px 10px rgba(3, 24, 36, .55)
    }

    .hero-content .hero-kicker .dot {
        flex: 0 0 7px;
        margin-top: 4px;
        background: #6aaec9
    }

    .hero-content .hero-copy {
        max-width: 38ch;
        margin-top: 17px;
        color: rgba(255, 255, 255, .96);
        font-size: 15px;
        line-height: 1.65;
        text-shadow: 0 1px 10px rgba(3, 24, 36, .55)
    }

    .hero-content .brand-text {
        background-image: none;
        color: #6aaec9
    }

    .hero-actions {
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 22px
    }

    .hero-content .btn-primary {
        color: #10262f;
        background: #fff;
        box-shadow: 0 8px 22px rgba(3, 24, 36, .24)
    }

    .hero-content .btn-ghost {
        border-color: rgba(255, 255, 255, .6);
        background: rgba(5, 36, 53, .34);
        text-shadow: 0 1px 8px rgba(3, 24, 36, .35)
    }

    .hero:before {
        background: linear-gradient(105deg, rgba(5, 35, 52, .91) 0%, rgba(7, 46, 66, .84) 62%, rgba(8, 51, 70, .78) 100%)
    }

    .hero:after {
        opacity: .035
    }

    .hero-shade {
        background: linear-gradient(105deg, rgba(5, 35, 52, .78), rgba(7, 46, 66, .68) 62%, rgba(8, 51, 70, .6))
    }

    .hero-carousel-controls {
        display: none
    }

    .carousel-toggle {
        display: none
    }
}

.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible {
    outline: 2px solid rgba(25, 127, 160, .42);
    outline-offset: 2px;
    box-shadow: none
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

.custom-select {
    position: relative
}

.custom-select-field {
    position: relative;
    z-index: 3
}

.custom-select-trigger {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 13px;
    color: var(--txt-primary);
    background: #fff;
    font: 14px Inter;
    text-align: left;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s
}

.custom-select-trigger:hover,
.custom-select.is-open .custom-select-trigger {
    border-color: var(--brand)
}

.custom-select-trigger:focus-visible {
    outline: 2px solid rgba(25, 127, 160, .42);
    outline-offset: 2px
}

.custom-select-arrow {
    width: 8px;
    height: 8px;
    margin: -4px 2px 0 12px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s
}

.custom-select.is-open .custom-select-arrow {
    margin-top: 4px;
    transform: rotate(225deg)
}

.custom-select-options {
    position: absolute;
    z-index: 20;
    top: calc(100% + 5px);
    right: 0;
    left: 0;
    display: grid;
    padding: 5px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(9, 45, 67, .16)
}

.custom-select-options[hidden] {
    display: none
}

.custom-select-option {
    width: 100%;
    border: 0;
    border-radius: 6px;
    padding: 10px 11px;
    color: var(--txt-primary);
    background: transparent;
    font: 14px Inter;
    text-align: left;
    cursor: pointer;
    transition: color .15s, background-color .15s
}

.custom-select-option:hover,
.custom-select-option:focus-visible {
    color: #fff;
    background: var(--brand);
    outline: none
}

.hero {
    min-height: 680px;
    padding: 130px 0 105px
}

.hero-carousel {
    z-index: 0
}

.hero-carousel-track {
    inset: 0;
    width: auto;
    height: auto;
    z-index: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none
}

.hero-slide {
    z-index: 0
}

.hero-slide img {
    object-position: center top;
    filter: brightness(.72) saturate(.88)
}

.hero-shade {
    inset: 0;
    width: auto;
    height: auto;
    z-index: 1;
    border-radius: 0;
    background: linear-gradient(90deg, rgba(4, 31, 48, .58), rgba(4, 31, 48, .68) 50%, rgba(4, 31, 48, .58))
}

.hero-grid {
    z-index: 2;
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center
}

.hero-content {
    width: 100%;
    max-width: 1120px;
    text-shadow: 0 2px 16px rgba(2, 22, 35, .48)
}

.hero-content h1 {
    font-size: clamp(3.5rem, 5.8vw, 5.25rem)
}

.hero-content .hero-kicker,
.hero-content .hero-copy,
.hero-content .hero-actions {
    justify-content: center;
    margin-right: auto;
    margin-left: auto
}

.hero-content .hero-copy {
    max-width: 900px;
    font-size: 18px
}

.hero-proof-card {
    top: 116px;
    right: max(calc((100vw - 1320px) / 2 + 18px), 32px);
    transform: none
}

.hero-carousel-controls {
    right: 0;
    bottom: 26px;
    left: 0;
    width: 100%;
    justify-content: center;
    padding: 0 18px
}

@media (max-width: 960px) {
    .hero {
        min-height: 680px;
        padding: 130px 0 100px
    }

    .hero:before {
        background: none
    }

    .hero-carousel-track {
        inset: 0
    }

    .hero-shade {
        inset: 0;
        z-index: 1;
        background: linear-gradient(90deg, rgba(4, 31, 48, .6), rgba(4, 31, 48, .72) 50%, rgba(4, 31, 48, .6))
    }

    .hero-grid {
        justify-items: center
    }

    .hero-content {
        width: 100%;
        max-width: 860px
    }

    .hero-content h1 {
        font-size: clamp(3rem, 8vw, 4.6rem)
    }

    .hero-content h1,
    .hero-content .hero-kicker,
    .hero-content .hero-copy {
        margin-right: auto;
        margin-left: auto
    }

    .hero-content .hero-kicker {
        justify-content: center
    }

    .hero-content .hero-copy {
        max-width: 38ch;
        font-size: 15px
    }

    .hero-actions {
        justify-content: center
    }

    .hero-carousel-controls {
        display: flex;
        bottom: 24px
    }
}

@media (max-width: 640px) {
    .hero {
        min-height: 620px;
        padding: 100px 0 82px
    }

    .hero:before {
        background: none
    }

    .hero:after {
        opacity: .035
    }

    .hero-carousel-track,
    .hero-shade {
        display: block
    }

    .hero-slide img {
        object-position: center top
    }

    .hero-content {
        width: 100%;
        max-width: 100%
    }

    .hero-content h1 {
        max-width: 100%;
        font-size: clamp(2.45rem, 10.5vw, 3.15rem);
        text-shadow: 0 2px 18px rgba(3, 24, 36, .28)
    }

    .hero-content .hero-kicker {
        max-width: 100%;
        text-align: center
    }

    .hero-content .hero-copy {
        max-width: 38ch;
        color: rgba(255, 255, 255, .96)
    }

    .hero-carousel-controls {
        display: flex;
        bottom: 20px;
        justify-content: center;
        gap: 12px;
        padding: 0 12px
    }

    .carousel-toggle {
        display: block
    }
}

.hero-slide:nth-child(2) img {
    object-position: center 46%
}

.hero-slide:nth-child(3) img {
    object-position: center 40%
}

@media (max-width: 640px) {
    .hero-slide:nth-child(2) img {
        object-position: 55% center
    }

    .hero-slide:nth-child(3) img {
        object-position: 62% center
    }
}

@media (max-width: 640px) {
    .home-journey-grid:before {
        top: 0;
        right: auto;
        bottom: 0;
        left: 19px;
        width: 1px;
        height: auto;
        background: linear-gradient(180deg, transparent, rgba(25, 127, 160, .28), transparent)
    }

    .home-partner.section {
        padding: 36px 0
    }

    .home-partner .container.two {
        gap: 24px
    }

    .home-partner .section-title {
        font-size: clamp(1.8rem, 8vw, 2.25rem);
        line-height: 1.12
    }

    .home-partner .lead {
        margin-top: 12px
    }

    .home-partner-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px
    }

    .home-partner .card {
        padding: 14px
    }

    .home-partner .card.scroll-reveal[class*="from-"] {
        transform: translate3d(0, 14px, 0)
    }

    .home-partner .card.scroll-reveal[class*="from-"].is-visible {
        transform: translate3d(0, 0, 0)
    }

    .home-partner .card strong {
        font-size: 14px
    }

    .home-partner .card p {
        margin-top: 6px;
        font-size: 11.5px;
        line-height: 1.4
    }
}

.client-logos {
    overflow: hidden;
    padding: 26px 0;
    background: #fff
}

.client-logo-viewport {
    overflow: hidden;
    width: min(100%, 1280px);
    margin: 0 auto
}

.client-logo-track,
.client-logo-set {
    display: flex;
    width: max-content;
    align-items: center
}

.client-logo-track {
    animation: client-logo-scroll 36s linear infinite
}

.client-logo-viewport:hover .client-logo-track {
    animation-play-state: paused
}

.client-logo-set {
    flex: 0 0 auto;
    gap: clamp(44px, 6vw, 92px);
    padding-right: clamp(44px, 6vw, 92px)
}

.client-logo-set img {
    display: block;
    width: 150px;
    height: 64px;
    flex: 0 0 150px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .62;
    transition: filter .25s ease, opacity .25s ease, transform .25s ease
}

.client-logo-set img:hover {
    filter: grayscale(0) brightness(1.12);
    opacity: 1;
    transform: scale(1.08)
}

@keyframes client-logo-scroll {
    to {
        transform: translateX(-50%)
    }
}

@media (max-width: 640px) {
    .client-logos {
        padding: 20px 0
    }

    .client-logo-set {
        gap: 38px;
        padding-right: 38px
    }

    .client-logo-set img {
        width: 126px;
        height: 52px;
        flex-basis: 126px
    }
}

@media (prefers-reduced-motion: reduce) {
    .client-logo-track {
        width: 100%;
        animation: none;
        flex-direction: column
    }

    .client-logo-set:first-child {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 16px;
        width: 100%;
        padding-right: 0
    }

    .client-logo-set:first-child img {
        width: 100%;
        height: 56px;
        flex: auto
    }

    .client-logo-set[aria-hidden="true"] {
        display: none
    }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
    .client-logo-set:first-child {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px
    }

    .client-logo-set:first-child img {
        height: 48px
    }
}

.nav-dropdown {
    position: relative
}

.nav-links .nav-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px
}

.nav-dropdown-icon {
    width: 7px;
    height: 7px;
    margin-top: -3px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s ease
}

.nav-dropdown:hover .nav-dropdown-icon,
.nav-dropdown:focus-within .nav-dropdown-icon {
    margin-top: 3px;
    transform: rotate(225deg)
}

.nav-dropdown.active > .nav-dropdown-trigger {
    color: var(--brand)
}

.nav-submenu {
    position: absolute;
    z-index: 2;
    top: 100%;
    left: -16px;
    display: none;
    min-width: 220px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(9, 45, 67, .14)
}

.nav-dropdown:hover .nav-submenu,
.nav-dropdown:focus-within .nav-submenu {
    display: grid;
    gap: 2px
}

.nav-links .nav-submenu a {
    padding: 10px 12px;
    border-radius: 6px;
    color: var(--txt-sec);
    white-space: nowrap
}

.nav-links .nav-submenu a:hover,
.nav-links .nav-submenu a.active {
    background: var(--brand-xlit);
    color: var(--brand-dark)
}

.product-offering-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px
}

.product-offering {
    display: flex;
    min-height: 310px;
    flex-direction: column;
    align-items: flex-start;
    padding: 28px;
    border-color: #DDECF1;
    background: linear-gradient(145deg, #F2FAFC, #EAF6FA);
    transition: border-color .22s, transform .22s, box-shadow .22s
}

.offering-number {
    display: grid;
    width: 48px;
    height: 48px;
    margin: 0 auto 24px;
    place-items: center;
    border-radius: 14px;
    background: var(--brand);
    color: #fff;
    font: 700 14px 'Plus Jakarta Sans';
    box-shadow: 0 8px 18px rgba(25, 127, 160, .2)
}

.product-offering .eyebrow-light {
    margin-bottom: 10px
}

.product-offering h2,
.product-offering h3 {
    font-size: clamp(18px, 1.6vw, 21px);
    line-height: 1.3
}

.product-offering p,
.product-suite-card p {
    margin: 12px 0 18px;
    color: var(--txt-sec);
    font-size: 14px;
    line-height: 1.7
}

.home-offering-grid .product-offering p {
    margin-bottom: 8px
}

.home-offering-grid .product-offering {
    min-height: 0;
    padding-bottom: 22px;
    border-color: #D0E7EE;
    background: linear-gradient(145deg, #EAF7FA, #DDEFF5)
}

.home-offering-grid .product-offering .text-link {
    margin-top: auto
}

.product-offering .text-link,
.product-suite-card .text-link {
    margin-top: auto;
    color: var(--brand-dark);
    font-size: 13px;
    font-weight: 700
}

.product-offering:hover {
    border-color: rgba(25, 127, 160, .42);
    box-shadow: 0 16px 36px rgba(13, 76, 103, .11);
    transform: translateY(-4px)
}

.product-offering:hover p {
    color: var(--brand-dark)
}

.product-suite .section-title {
    margin-top: 4px;
    font-size: clamp(2rem, 3.5vw, 2.8rem)
}

.product-suite > .container > .lead {
    margin-top: 12px
}

.product-suite-grid {
    gap: 18px;
    margin-top: 30px
}

.product-suite-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 220px;
    padding: 24px
}

.product-suite-card .eyebrow-light {
    margin-bottom: 8px
}

.product-suite-card h3 {
    font-size: 18px
}

.product-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
    align-items: center;
    gap: clamp(36px, 6vw, 76px)
}

.product-detail-copy .section-title {
    margin: 4px 0 16px;
    font-size: clamp(2rem, 3.5vw, 2.8rem)
}

.product-detail-features {
    display: grid;
    gap: 13px;
    margin: 24px 0 30px
}

.product-detail-features > div {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--txt-sec);
    font-size: 14px;
    line-height: 1.55
}

.product-detail-features > div > span {
    flex: 0 0 auto;
    color: var(--brand);
    font-weight: 800
}

.product-detail-visual {
    overflow: hidden;
    margin: 0;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: #eef3fb;
    box-shadow: 0 20px 56px rgba(9, 45, 67, .12)
}

.product-detail-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.product-detail-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px
}

.product-detail-cta .section-title {
    max-width: 700px;
    margin-top: 8px;
    font-size: clamp(1.8rem, 3.4vw, 2.6rem)
}

.admin-dashboard-heading {
    max-width: 760px;
}

.admin-dashboard-heading .section-title {
    margin: 8px 0 14px;
}

.admin-dashboard-visual {
    overflow: hidden;
    margin: 36px 0 0;
    border: 1px solid rgba(83, 107, 139, .2);
    border-radius: 22px;
    background: #f8fbff;
    box-shadow: 0 24px 70px rgba(23, 47, 77, .12);
}

.admin-dashboard-visual img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 960px) {
    .product-offering-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .product-offering {
        min-height: 285px;
        padding: 24px
    }

    .product-detail-grid {
        grid-template-columns: 1fr;
        gap: 34px
    }

    .product-detail-visual {
        width: 100%;
        max-height: 460px
    }

    .nav-dropdown {
        display: flex;
        flex-direction: column;
        align-items: stretch
    }

    .nav-links .nav-dropdown-trigger {
        justify-content: space-between;
        padding: 11px 0
    }

    .nav-submenu {
        position: static;
        display: grid;
        min-width: 0;
        gap: 0;
        padding: 0 0 6px 12px;
        border: 0;
        border-left: 2px solid var(--brand-light);
        border-radius: 0;
        background: transparent;
        box-shadow: none
    }

    .nav-links .nav-submenu a {
        padding: 9px 10px
    }
}

@media (max-width: 640px) {
    .product-offering-grid {
        grid-template-columns: 1fr;
        gap: 14px
    }

    .product-offering {
        min-height: 0;
        padding: 22px
    }

    .offering-number {
        width: 42px;
        height: 42px;
        margin: 0 auto 18px
    }

    .product-suite-grid {
        grid-template-columns: 1fr;
        gap: 12px
    }

    .product-suite-card {
        min-height: 190px;
        padding: 21px
    }

    .product-detail-grid {
        gap: 28px
    }

    .product-detail-visual {
        border-radius: 14px
    }

    .product-detail-cta {
        align-items: flex-start;
        flex-direction: column
    }
}

.hero:before {
    z-index: 1;
    background:
        radial-gradient(ellipse 52% 62% at 20% 35%, rgba(86, 195, 220, .22), transparent 72%),
        radial-gradient(ellipse 48% 58% at 82% 72%, rgba(25, 127, 160, .24), transparent 74%);
    opacity: .48;
    transform-origin: center;
    animation: hero-gradient-drift 22s ease-in-out infinite alternate
}

.hero {
    background-color: var(--navy-dark)
}

@keyframes hero-gradient-drift {
    from {
        transform: scale(1.03) translate3d(-1%, 0, 0)
    }

    to {
        transform: scale(1.06) translate3d(1%, 1%, 0)
    }
}

.tenant-section-heading {
    max-width: 760px;
    margin-bottom: 34px
}

.tenant-section-heading .section-title {
    margin-bottom: 12px;
    font-size: clamp(2rem, 3.5vw, 2.8rem)
}

.tenant-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px
}

.tenant-feature-card {
    padding: 23px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: #fff;
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease
}

.tenant-feature-card:hover {
    transform: translateY(-3px);
    border-color: rgba(25, 127, 160, .35);
    box-shadow: 0 12px 30px rgba(9, 45, 67, .08)
}

.tenant-feature-index {
    color: var(--brand-dark);
    font: 700 10px 'Plus Jakarta Sans';
    letter-spacing: .07em
}

.tenant-feature-card h3 {
    margin: 12px 0 8px;
    font-size: 18px
}

.tenant-feature-card > p {
    min-height: 42px;
    color: var(--txt-sec);
    font-size: 12.5px;
    line-height: 1.6
}

.tenant-feature-card ul {
    display: grid;
    gap: 11px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none
}

.tenant-feature-card li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--txt-sec);
    font-size: 12px;
    line-height: 1.55
}

.tenant-feature-card li:before {
    flex: 0 0 auto;
    color: var(--brand);
    content: "✓";
    font-weight: 800
}

.corporate-feature-points {
    display: grid;
    gap: 10px;
    margin-top: 22px
}

.corporate-feature-points p {
    position: relative;
    margin: 0;
    padding-left: 15px;
    color: var(--txt-sec);
    font-size: 11.5px;
    line-height: 1.45
}

.corporate-feature-points p:before {
    position: absolute;
    top: 0;
    left: 0;
    content: "\\2713";
    content: "•";
    color: var(--brand);
    font-size: 16px;
    content: "\2713";
    line-height: 1.1
}

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

    .tenant-feature-card > p {
        min-height: 0
    }
}

@media (max-width: 640px) {
    .hero:before {
        opacity: .32
    }

    .tenant-feature-card {
        padding: 20px
    }

}

.offering-toggle {
    display: grid;
    width: 100%;
    gap: 10px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer
}

.offering-toggle .eyebrow-light {
    margin-bottom: 0
}

.offering-title {
    font: 700 clamp(18px, 1.6vw, 21px)/1.3 'Plus Jakarta Sans', sans-serif
}

.offering-details p {
    margin: 12px 0 8px;
    color: var(--txt-sec);
    font-size: 14px;
    line-height: 1.7
}

.offering-details {
    display: flex;
    flex: 1;
    flex-direction: column
}

.offering-details[hidden] {
    display: none
}

.offering-details .text-link {
    margin-top: 8px
}

.offering-toggle:focus-visible {
    outline: 3px solid rgba(73, 181, 207, .76);
    outline-offset: 5px;
    border-radius: 3px
}

@media (min-width: 641px) {
    .offering-toggle {
        cursor: default
    }
}

@media (max-width: 640px) {
    .home-offering-grid.is-accordion {
        gap: 12px
    }

    .home-offering-grid.is-accordion .product-offering {
        min-height: 0;
        padding: 20px
    }

    .home-offering-grid.is-accordion .offering-toggle {
        position: relative;
        gap: 8px;
        padding-right: 34px
    }

    .home-offering-grid.is-accordion .offering-toggle:after {
        position: absolute;
        top: 50%;
        right: 2px;
        display: grid;
        width: 26px;
        height: 26px;
        place-items: center;
        border: 1px solid rgba(25, 127, 160, .25);
        border-radius: 50%;
        color: var(--brand-dark);
        content: "+";
        font: 500 19px/1 Inter, sans-serif;
        transform: translateY(-50%)
    }

    .home-offering-grid.is-accordion .offering-toggle[aria-expanded="true"]:after {
        content: "−"
    }

    .home-offering-grid.is-accordion .offering-title {
        font-size: 18px
    }

    .home-offering-grid.is-accordion .offering-details p {
        margin-top: 12px;
        font-size: 13.5px
    }
}

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

    *,
    *:before,
    *:after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important
    }

    .scroll-reveal[class*="from-"],
    .scroll-reveal[class*="from-"].is-visible {
        transform: none !important
    }
}

body { background: var(--navy-dark); color: var(--txt-primary) }
body:before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: .25; background-image: linear-gradient(rgba(90, 200, 243,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(90, 200, 243,.035) 1px, transparent 1px); background-size: 42px 42px }
.s-white { background: #f8fbff; color: #112038 }
.s-soft, .s-brand-lt { background: #eef4fa; color: #112038 }
.s-navy { background: #101a2e; color: #eff5ff }
.s-navy-dk { background: #080d1a; color: #eff5ff }
.nav-base { background: rgba(8,13,26,.82) !important; border-bottom: 1px solid rgba(255,255,255,.1) !important; box-shadow: 0 10px 35px rgba(0,0,0,.14) !important; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px) }
.nav-base.is-scrolled { background: rgba(8,13,26,.95) !important; border-bottom-color: rgba(90, 200, 243,.28) !important }
.nav-links a { color: #b7c4d8 }
.nav-links a:hover, .nav-links a.active { color: var(--brand) }
.nav-cta { background: var(--brand) !important; color: #0d171b !important; border-radius: 999px !important; box-shadow: 0 0 0 0 rgba(90, 200, 243,.35) !important }
.nav-cta:hover { box-shadow: 0 0 0 7px rgba(90, 200, 243,.12) !important; transform: translateY(-2px) }
.logo img { filter: brightness(0) invert(1) }
.scroll-progress span { background: linear-gradient(90deg, var(--brand), var(--mint), var(--sunshine)) }
.hero, .page-hero { background: radial-gradient(circle at 78% 12%, rgba(94, 194, 234,.2), transparent 28%), radial-gradient(circle at 12% 20%, rgba(90, 200, 243,.13), transparent 30%), #0b1324 !important }
.hero:before, .page-hero:after { opacity: .7; background: radial-gradient(circle, rgba(90, 200, 243,.18) 1px, transparent 1.5px); background-size: 20px 20px }
.hero h1, .page-hero h1 { letter-spacing: -.06em; text-shadow: 0 12px 35px rgba(0,0,0,.24) }
.hero .brand-text { color: var(--brand); text-shadow: 0 0 28px rgba(90, 200, 243,.22) }
.hero-copy, .page-hero p { color: #b9c7dc }
.hero-kicker .dot { background: var(--brand); box-shadow: 0 0 0 6px rgba(90, 200, 243,.1), 0 0 20px var(--brand) }
.btn-primary { background: var(--brand) !important; color: #0b1820 !important; border-radius: 999px; box-shadow: 0 10px 30px rgba(90, 200, 243,.2) }
.btn-primary:hover { background: #78d6fb !important; transform: translateY(-3px) scale(1.02); box-shadow: 0 16px 38px rgba(90, 200, 243,.3) }
.btn-ghost { color: #d5e0ef; border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.05); border-radius: 999px }
.btn-ghost:hover { color: var(--brand); border-color: var(--brand); background: rgba(90, 200, 243,.09) }
.hero-shade { background: linear-gradient(90deg, rgba(8,13,26,.96) 0%, rgba(8,13,26,.65) 47%, rgba(8,13,26,.38) 100%) !important }
.stats-wrap { background: #101a2e !important; color: #eff5ff }
.stats-wrap .rule { background: var(--brand); opacity: .25 }
.stat { border-right-color: rgba(255,255,255,.1) }
.stat-icon, .stat-num { color: var(--brand) }
.stat-label { color: #99aac2 }
.card, .service-card, .portfolio-card, .product-offering, .pillar, .ai-feature, .home-solution-card, .home-partner .card { border: 1px solid rgba(83,107,139,.18); border-radius: 22px; box-shadow: 0 12px 32px rgba(23,47,77,.06); transition: transform .55s cubic-bezier(.22,1,.36,1), box-shadow .55s ease, border-color .35s ease }
.card:hover, .service-card:hover, .portfolio-card:hover, .product-offering:hover, .pillar:hover, .ai-feature:hover, .home-solution-card:hover, .home-partner .card:hover { transform: translateY(-8px); border-color: rgba(32, 129, 168,.42); box-shadow: 0 24px 70px rgba(4,9,21,.18) }
.s-navy .card, .s-navy .service-card, .s-navy .ai-feature, .s-navy .product-offering, .s-navy-dk .card { background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.12); color: #eff5ff }
.s-navy .card:hover, .s-navy .service-card:hover, .s-navy .ai-feature:hover { border-color: rgba(90, 200, 243,.6); background: rgba(90, 200, 243,.07) }
.product-offering { overflow: hidden; position: relative }
.product-offering:before { content: ''; position: absolute; width: 80px; height: 80px; right: -25px; top: -25px; border-radius: 50%; background: rgba(90, 200, 243,.14); transition: transform .55s cubic-bezier(.22,1,.36,1) }
.product-offering:hover:before { transform: scale(2.2) }
.home-about-visual { border-radius: 24px; overflow: hidden; box-shadow: 0 24px 70px rgba(4,9,21,.18) }
.home-about-visual figcaption { background: rgba(8,13,26,.82); color: #fff; backdrop-filter: blur(12px) }
.home-journey-step { border-top-color: rgba(32, 129, 168,.18); transition: border-color .4s ease, transform .55s cubic-bezier(.22,1,.36,1) }
.home-journey-step.is-current { border-color: #2081a8; transform: translateY(-5px) }
.client-logos { background: #fff; border-color: rgba(18,44,58,.12) }
.client-logos img { filter: grayscale(1); opacity: .62; transition: opacity .3s ease, filter .3s ease, transform .3s ease }
.client-logos img:hover { opacity: 1; filter: grayscale(0); transform: translateY(-3px) }
footer { background: #080d1a; color: #aebdd1; border-top-color: rgba(90, 200, 243,.13) }
footer .logo-mark { background: var(--brand); color: #0d171b }
.footer-col h3 { color: #fff }
.footer-col a:hover, .footer-legal a:hover { color: var(--brand) }
.scroll-reveal { transition-duration: .95s; transition-timing-function: cubic-bezier(.22,1,.36,1) }
.depth-scene:before { background: radial-gradient(circle at 10% 10%, rgba(32, 129, 168,.06), transparent 28%) }
.logo img { filter: none !important }
.nav-base .logo img { width: 210px; height: auto }
.contact-section .hero-kicker { color: rgba(232,244,248,.72) !important }
.contact-section .hero-kicker .dot { background: #83a9b8 !important }
.contact-section .contact-content h2 { color: #fff !important }
.contact-section .contact-content h2 span { color: #b0d0dd !important }
.contact-section .contact-content p { color: rgba(232,244,248,.72) !important }
.contact-section .contact-points { color: #C8D5E3 !important }
.field input,
.field textarea,
.custom-select-trigger,
.custom-select-option {
    box-sizing: border-box;
    color: #182d35;
    font: 14px/1.4 Inter, sans-serif;
}
.field input::placeholder,
.field textarea::placeholder {
    color: #182d35;
    opacity: 1;
}
.field input,
.field textarea,
.custom-select-trigger {
    padding: 12px 13px;
    border-radius: 8px;
}
.custom-select-option { padding: 10px 11px }
.nav-cta { background: var(--brand) !important; color: #fff !important }
.nav-cta:hover { box-shadow: 0 0 0 7px rgba(25,127,160,.16) !important }
.scroll-progress span { background: linear-gradient(90deg, #1d4b5d, #285e74, #83a9b8) !important }
.hero .brand-text { color: var(--mint); text-shadow: 0 0 28px rgba(67,185,210,.25) }
.hero-kicker .dot { background: var(--mint); box-shadow: 0 0 0 6px rgba(67,185,210,.12), 0 0 20px var(--mint) }
.btn-primary { background: var(--brand) !important; color: #fff !important; box-shadow: 0 10px 30px rgba(25,127,160,.24) !important }
.btn-primary:hover { background: var(--brand-dark) !important; color: #fff !important; box-shadow: 0 16px 38px rgba(25,127,160,.3) !important }
.carousel-dot.is-active { background: #83a9b8 !important; border-color: #83a9b8 !important; box-shadow: 0 0 14px rgba(67,185,210,.65) }
.stat-icon, .stat-num { color: var(--sunshine) }
.home-journey-step.is-current { border-color: #285e74 }
.product-offering:before { background: rgba(25,127,160,.14) }
.s-navy .card:hover, .s-navy .service-card:hover, .s-navy .ai-feature:hover { border-color: rgba(67,185,210,.65); background: rgba(25,127,160,.1) }
.card:hover, .service-card:hover, .portfolio-card:hover, .product-offering:hover, .pillar:hover, .ai-feature:hover, .home-solution-card:hover, .home-partner .card:hover { border-color: rgba(25,127,160,.42) }
footer { border-top-color: rgba(25,127,160,.28) }
footer .logo-mark { background: #285e74; color: #fff }
.footer-col a:hover, .footer-legal a:hover, .nav-links a:hover, .nav-links a.active { color: #83a9b8 }
.cursor-glow { background: radial-gradient(circle, rgba(67,185,210,.12), transparent 68%) }
.cursor-wave-dot { position: fixed; top: 0; left: 0; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; pointer-events: none; z-index: 999; background: #83a9b8; box-shadow: 0 0 12px rgba(67,185,210,.58); opacity: calc(.68 - (var(--wave-index) * .055)); transition: opacity .2s ease }
.cursor-wave-canvas { display: none }
.cursor-glow { position: fixed; width: 280px; height: 280px; border-radius: 50%; pointer-events: none; z-index: 999; background: radial-gradient(circle, rgba(90, 200, 243,.09), transparent 68%); transform: translate(-50%,-50%); opacity: 0; transition: opacity .3s ease }
@media (hover: hover) { body:hover .cursor-glow { opacity: 1 } }
@media (max-width: 960px) { .nav-links.open { background: rgba(8,13,26,.96); border: 1px solid rgba(90, 200, 243,.2); border-radius: 18px; padding: 18px; box-shadow: 0 24px 70px rgba(4,9,21,.18) } .stat { border-right: 0 } }
@media (max-width: 640px) { .hero-shade { background: linear-gradient(90deg, rgba(8,13,26,.92), rgba(8,13,26,.55)) !important } .card, .service-card, .portfolio-card, .product-offering { border-radius: 17px } .cursor-glow, .cursor-wave-dot, .cursor-wave-canvas { display: none } }
@media (prefers-reduced-motion: reduce) { .card:hover, .service-card:hover, .portfolio-card:hover, .product-offering:hover, .pillar:hover, .ai-feature:hover, .home-solution-card:hover { transform: none } }

/* Page signatures: each route gets one distinctive motion cue. */
@keyframes home-signature {
    0%, 100% { transform: scale(1) translate3d(0, 0, 0); opacity: .62 }
    50% { transform: scale(1.08) translate3d(2%, -2%, 0); opacity: .9 }
}
@keyframes about-signature {
    from { transform: rotate(-2deg) scale(1.02); filter: saturate(.85) }
    to { transform: rotate(2deg) scale(1.06); filter: saturate(1.15) }
}
@keyframes solutions-signature {
    from { transform: translateY(24px) rotateX(8deg); opacity: 0 }
    to { transform: translateY(0) rotateX(0); opacity: 1 }
}
@keyframes products-signature {
    0% { transform: translateY(18px) scale(.97); opacity: 0 }
    70% { transform: translateY(-4px) scale(1.01); opacity: 1 }
    100% { transform: translateY(0) scale(1); opacity: 1 }
}
@keyframes portfolio-signature {
    0%, 100% { transform: translateY(0) rotate(0) }
    50% { transform: translateY(-8px) rotate(.7deg) }
}
@keyframes process-signature {
    from { transform: scaleX(.25); transform-origin: left center; opacity: .35 }
    to { transform: scaleX(1); transform-origin: left center; opacity: 1 }
}
@keyframes contact-signature {
    0%, 100% { box-shadow: 0 18px 45px rgba(25,127,160,.08) }
    50% { box-shadow: 0 24px 65px rgba(25,127,160,.2) }
}
@keyframes why-signature {
    from { transform: translateX(-18px); opacity: 0 }
    to { transform: translateX(0); opacity: 1 }
}
@keyframes ai-signature {
    from { transform: rotate(0deg) scale(.96); opacity: .45 }
    to { transform: rotate(360deg) scale(1); opacity: 1 }
}
@keyframes curiasity-signature {
    0%, 100% { transform: translateY(0) }
    50% { transform: translateY(-10px) }
}
@keyframes behavioural-signature {
    from { clip-path: inset(0 100% 0 0); opacity: .2 }
    to { clip-path: inset(0 0 0 0); opacity: 1 }
}
@keyframes compliance-signature {
    from { transform: translateX(22px) scale(.98); opacity: 0 }
    to { transform: translateX(0) scale(1); opacity: 1 }
}

body[data-page="home"] .hero:before { animation: home-signature 12s ease-in-out infinite }
body[data-page="about"] .page-hero img { animation: about-signature 8s ease-in-out infinite alternate }
body[data-page="solutions"] .service-card { animation: solutions-signature .8s both; animation-delay: calc(var(--card-index, 0) * 90ms) }
body[data-page="solutions"] .service-card:nth-child(2) { --card-index: 1 }
body[data-page="solutions"] .service-card:nth-child(3) { --card-index: 2 }
body[data-page="solutions"] .service-card:nth-child(4) { --card-index: 3 }
body[data-page="solutions"] .service-card:nth-child(5) { --card-index: 4 }
body[data-page="solutions"] .service-card:nth-child(6) { --card-index: 5 }
body[data-page="products"] .product-suite-card { animation: products-signature .9s both; animation-delay: calc(var(--card-index, 0) * 120ms) }
body[data-page="products"] .product-suite-card:nth-child(2) { --card-index: 1 }
body[data-page="products"] .product-suite-card:nth-child(3) { --card-index: 2 }
body[data-page="portfolio"] .portfolio-card:nth-child(odd) { animation: portfolio-signature 7s ease-in-out infinite }
body[data-page="portfolio"] .portfolio-card:nth-child(even) { animation: portfolio-signature 8s 1s ease-in-out infinite reverse }
body[data-page="process"] .process-grid:after { content: ""; display: block; grid-column: 1 / -1; height: 2px; background: linear-gradient(90deg, transparent, #83a9b8, transparent); animation: process-signature 1.6s ease-out both }
body[data-page="contact"] .s-white .container.two > .card { animation: contact-signature 6s ease-in-out infinite }
body[data-page="why-Nowiles"] .pillar { animation: why-signature .75s both; animation-delay: calc(var(--pillar-index, 0) * 110ms) }
body[data-page="why-Nowiles"] .pillar:nth-child(2) { --pillar-index: 1 }
body[data-page="why-Nowiles"] .pillar:nth-child(3) { --pillar-index: 2 }
body[data-page="why-Nowiles"] .pillar:nth-child(4) { --pillar-index: 3 }
body[data-page="ai-learning"] .flow { animation: ai-signature 18s linear infinite }
body[data-page="curiasity-lms"] .product-detail-visual { animation: curiasity-signature 5s ease-in-out infinite }
body[data-page="behavioural-skills-training"] .product-detail-features { animation: behavioural-signature 1.2s cubic-bezier(.22,1,.36,1) both }
body[data-page="compliance-training"] .product-detail-visual { animation: compliance-signature 1.1s cubic-bezier(.22,1,.36,1) both }

/* Homepage hero video: full-bleed 16:9 frame across the full viewport width. */
.home-hero {
    height: max(56.25vw, 680px);
    min-height: 0;
    padding: 0;
    overflow: hidden;
}
.hero-video {
    position: absolute;
    inset: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: #0b1324;
}
.hero-video-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    /* Fill the complete viewport width; hero height follows the source 16:9 ratio. */
    object-fit: cover;
    object-position: center center;
    background: #0b1324;
    filter: brightness(.62) saturate(.8) contrast(1.06);
}
.hero-video .hero-shade {
    z-index: 1;
    background: linear-gradient(90deg, rgba(4,31,48,.86), rgba(4,31,48,.58) 52%, rgba(4,31,48,.42));
}
.hero-video + .hero-grid { position: relative; z-index: 2 }

/* Editorial scroll treatment: cinematic transitions without locking the page to snap points. */
main > section { scroll-margin-top: 76px }
.scroll-reveal {
    filter: blur(4px);
    transition: transform .8s cubic-bezier(.22,1,.36,1) var(--scroll-delay, 0ms), filter .8s ease var(--scroll-delay, 0ms);
}
.scroll-reveal.is-visible { filter: blur(0) }
.s-navy .section-title,
.s-navy-dk .section-title {
    color: #f4f8ff;
    text-wrap: balance;
}
.s-white .section-title,
.s-soft .section-title {
    text-wrap: balance;
}
.section > .container > .eyebrow-light,
.page-hero .eyebrow-light {
    letter-spacing: .16em;
}
.s-navy .eyebrow-light,
.s-navy-dk .eyebrow-light { color: #b0d0dd }

@media (prefers-reduced-motion: reduce) {
    .scroll-reveal { filter: none; transition: none }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page] .hero:before,
    body[data-page] .page-hero img,
    body[data-page] .service-card,
    body[data-page] .product-suite-card,
    body[data-page] .portfolio-card,
    body[data-page] .process-grid:after,
    body[data-page] .s-white .container.two > .card,
    body[data-page] .pillar,
    body[data-page] .flow,
    body[data-page] .product-detail-visual,
     body[data-page] .product-detail-features { animation: none !important }
}

/* Final content contrast pass: keep the dark chrome and banners unchanged. */
main > .s-white { background: #ffffff; color: #10243d }
main > .s-soft { background: #f3f7fb; color: #10243d }
main > .s-brand-lt { background: #eaf4f8; color: #10243d }
main > .s-white .lead,
main > .s-soft .lead,
main > .s-brand-lt .lead { color: #4d6378 }
main > .s-white .muted,
main > .s-soft .muted,
main > .s-brand-lt .muted { color: #526b82 }
main > .s-white .card,
main > .s-soft .card,
main > .s-brand-lt .card,
main > .s-white .service-card,
main > .s-soft .service-card,
main > .s-brand-lt .service-card {
    border-color: #d5e2ec;
    background: #ffffff;
    color: #10243d
}
main > .s-white .card p,
main > .s-soft .card p,
main > .s-brand-lt .card p,
main > .s-white .service-card p,
main > .s-soft .service-card p,
main > .s-brand-lt .service-card p { color: #526b82 }

/* Keep the home partner cards readable on the light content surface. */
main > .s-soft.home-partner .card,
main > .s-soft.home-partner .card strong { color: #10243d }
main > .s-soft.home-partner .card p,
main > .s-soft.home-partner .card .muted { color: #526b82 }
main > .s-soft.home-partner .card:hover,
main > .s-soft.home-partner .card:hover strong,
main > .s-soft.home-partner .card:hover p,
main > .s-soft.home-partner .card:hover .muted { color: #ffffff }

/* Accessible accent colors: use a darker teal on light content surfaces while
   retaining the brighter treatment on dark banners. */
main > .s-white .eyebrow-light,
main > .s-soft .eyebrow-light,
main > .s-brand-lt .eyebrow-light,
main > .s-white .eyebrow-dark,
main > .s-soft .eyebrow-dark,
main > .s-brand-lt .eyebrow-dark,
body[data-page="solutions"] .solution-services .eyebrow-light {
    color: #085a7b;
}

body[data-page="solutions"] .solution-hero .eyebrow-light {
    color: #2081a8;
}

main > .s-navy .eyebrow-light,
main > .s-navy-dk .eyebrow-light {
    color: #b0d0dd;
}

/* Light content surfaces need the dark text token, not the banner token. */
main > .s-white .muted,
main > .s-soft .muted,
main > .s-brand-lt .muted,
main > .s-white .cap-desc,
main > .s-soft .cap-desc,
main > .s-brand-lt .cap-desc,
main > .s-white .feature-list div,
main > .s-soft .feature-list div,
main > .s-brand-lt .feature-list div,
main > .s-white .tenant-feature-card > p,
main > .s-soft .tenant-feature-card > p,
main > .s-brand-lt .tenant-feature-card > p,
main > .s-white .tenant-feature-card li,
main > .s-soft .tenant-feature-card li,
main > .s-brand-lt .tenant-feature-card li,
main > .s-white .field label,
main > .s-soft .field label,
main > .s-brand-lt .field label {
    color: #526b82;
}

main > .s-white p,
main > .s-soft p,
main > .s-brand-lt p,
main > .s-white li,
main > .s-soft li,
main > .s-brand-lt li,
main > .s-white .product-detail-features > div strong,
main > .s-soft .product-detail-features > div strong,
main > .s-brand-lt .product-detail-features > div strong {
    color: #526b82;
}

/* Keep product submenu labels crisp against the white dropdown surface. */
.nav-links .nav-submenu a {
    color: #10243d;
    font-weight: 600;
}

.nav-links .nav-submenu a:hover,
.nav-links .nav-submenu a.active {
    color: #1d4b5d;
}

main > .s-white .product-detail-features > div,
main > .s-soft .product-detail-features > div,
main > .s-brand-lt .product-detail-features > div,
main > .s-white .cap-num,
main > .s-soft .cap-num,
main > .s-brand-lt .cap-num,
main > .s-white .standard small,
main > .s-soft .standard small,
main > .s-brand-lt .standard small {
    color: #526b82;
}

/* Make the light service canvas explicit for contrast tools and high-contrast modes. */
body[data-page="solutions"] .solution-services {
    background-color: #f4f8fb;
}

/* Solutions page refresh: a calmer service gallery with a focused dark CTA. */
body[data-page="solutions"] .solution-hero {
    min-height: 0;
    display: block;
    align-items: flex-start;
    text-align: left;
    background:
        radial-gradient(circle at 78% 12%, rgba(94, 194, 234, .2), transparent 28%),
        radial-gradient(circle at 12% 20%, rgba(90, 200, 243, .13), transparent 30%),
        #0b1324 !important;
}

body[data-page="solutions"] .solution-hero .container {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-top: 0;
    padding-bottom: 0;
}

body[data-page="solutions"] .solution-hero h1 {
    max-width: 780px;
}

body[data-page="solutions"] .solution-hero p {
    max-width: 700px;
    margin: 0;
    font-size: 16px;
    line-height: 1.75;
}

body[data-page="solutions"] .solution-services {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 92% 12%, rgba(67, 185, 210, .12), transparent 24%),
        linear-gradient(180deg, #f4f8fb 0%, #edf5f7 100%);
}

body[data-page="solutions"] .solution-services .container {
    position: relative;
    z-index: 1;
}

body[data-page="solutions"] .solution-intro {
    max-width: 700px;
    margin-top: 16px;
}

body[data-page="solutions"] .service-grid {
    gap: 22px;
    margin-top: 42px;
}

body[data-page="solutions"] .solution-services .service-card {
    position: relative;
    overflow: hidden;
    padding: 0 0 26px;
    background: #ffffff;
    border: 1px solid #d6e4eb;
    border-radius: 24px;
    box-shadow: 0 14px 36px rgba(23, 61, 86, .08);
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease, border-color .35s ease;
}

body[data-page="solutions"] .solution-services .service-card:hover {
    transform: translateY(-8px);
    border-color: #35a8bd;
    box-shadow: 0 24px 50px rgba(23, 61, 86, .15);
}

body[data-page="solutions"] .solution-services .service-image {
    height: 184px;
    margin-bottom: 22px;
    object-fit: cover;
    filter: saturate(.9);
    transition: transform .55s cubic-bezier(.22, 1, .36, 1), filter .35s ease;
}

body[data-page="solutions"] .solution-services .service-card:hover .service-image {
    filter: saturate(1.08);
    transform: scale(1.045);
}

body[data-page="solutions"] .solution-services .service-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 26px;
    margin-bottom: 2px;
    color: #117b9c;
    background: #e5f6f8;
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: .12em;
}

body[data-page="solutions"] .solution-services .service-card h3 {
    color: #10243d;
    font-size: 1.12rem;
    line-height: 1.3;
    margin-top: 12px;
}

body[data-page="solutions"] .solution-services .service-card p {
    color: #526b82;
    font-size: .91rem;
    line-height: 1.7;
    margin-top: 10px;
}

body[data-page="solutions"] main > .solution-cta {
    background:
        radial-gradient(circle at 82% 20%, rgba(67, 185, 210, .18), transparent 28%),
        linear-gradient(135deg, #0b1729 0%, #112942 100%) !important;
}

body[data-page="solutions"] .solution-cta .section-title {
    color: #f4fbff;
}

body[data-page="solutions"] .solution-cta .lead {
    color: #b9c9da;
}

body[data-page="solutions"] .solution-cta-button {
    margin-top: 25px;
}

/* Keep homepage hero media decorative so the CTA links always receive clicks. */
body[data-page="home"] .hero-video-media,
body[data-page="home"] .hero-shade {
    pointer-events: none;
}

body[data-page="home"] .hero-grid {
    position: relative;
    z-index: 3;
}

body[data-page="home"] .hero-actions a {
    position: relative;
    z-index: 4;
    pointer-events: auto;
}

body[data-page="home"] .hero-actions.scroll-reveal {
    opacity: 1;
    filter: none;
    transform: none !important;
}

@media (max-width: 700px) {
    body[data-page="solutions"] .solution-hero {
        min-height: 0;
    }

    body[data-page="solutions"] .solution-hero .container {
        padding-top: 0;
        padding-bottom: 0;
    }

    body[data-page="solutions"] .solution-services .service-image {
        height: 200px;
    }

    body[data-page="solutions"] .solution-cta-button {
        width: 100%;
        justify-content: center;
    }
}

/* Match Corporate tenant points to the two-column layout used by the other tenants. */
.corporate-feature-points p {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    position: static;
    padding-left: 0;
}

.corporate-feature-points p strong {
    flex: 0 0 132px;
}

.corporate-feature-points p::before {
    position: static;
    flex: 0 0 auto;
}

.tenant-feature-toggle {
    display: none;
}

@media (max-width: 700px) {
    .nav-links.open .nav-submenu a {
        color: #dbe8f4;
        font-weight: 600;
    }

    .nav-links.open .nav-submenu a:hover,
    .nav-links.open .nav-submenu a:focus-visible,
    .nav-links.open .nav-submenu a.active {
        background: rgba(67, 185, 210, .14);
        color: #b0d0dd;
    }

    .tenant-feature-card {
        position: relative;
        padding-right: 70px;
    }

    .tenant-feature-toggle {
        position: absolute;
        top: 22px;
        right: 20px;
        display: grid;
        width: 34px;
        height: 34px;
        place-items: center;
        border: 1px solid #b8dce8;
        border-radius: 50%;
        background: #f0f9fb;
        color: #1d4b5d;
        font: 600 22px/1 'Plus Jakarta Sans', sans-serif;
        cursor: pointer;
        transition: background .2s ease, border-color .2s ease, color .2s ease;
    }

    .tenant-feature-toggle:hover,
    .tenant-feature-toggle:focus-visible {
        border-color: #285e74;
        background: #285e74;
        color: #ffffff;
        outline: none;
    }

    .tenant-feature-card:not(.is-expanded) .tenant-feature-content {
        display: none;
    }

    .tenant-feature-card.is-expanded .tenant-feature-content {
        display: grid;
        animation: tenant-features-open .22s ease-out both;
    }
}

@keyframes tenant-features-open {
    from { opacity: 0; transform: translateY(-5px) }
    to { opacity: 1; transform: translateY(0) }
}

@media (prefers-reduced-motion: reduce) {
    .tenant-feature-card.is-expanded .tenant-feature-content {
        animation: none;
    }
}

/* =================================
   BENCHSKILL CORPORATE SECTION
================================= */

.benchskill-section {
    color: #112038;
    background: #f4f7fb;
}

.benchskill-heading {
    max-width: 780px;
    margin: 0 auto 38px;
    text-align: center;
}

.benchskill-heading .lead {
    margin-top: 14px;
}

.benchskill-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.benchskill-card {
    padding: 21px;
    background: #fff;
    border: 1px solid #e2e9f2;
    border-radius: 15px;
    transition: .25s ease;
}

.benchskill-card:hover {
    transform: translateY(-4px);
    border-color: var(--brand);
    box-shadow: 0 12px 28px rgba(16, 26, 46, .07);
}

.benchskill-card > span {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-bottom: 13px;
    border-radius: 9px;
    background: var(--brand-light);
    color: var(--brand-dark);
    font: 700 11px 'Plus Jakarta Sans';
}

.benchskill-card h3 {
    margin-bottom: 8px;
    font-size: 15px;
    color: #112038;
}

.benchskill-card p {
    font-size: 12.5px;
    line-height: 1.65;
    color: #52647b;
}

.benchskill-highlight {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 32px;
    align-items: center;
    margin-top: 38px;
    padding: 28px;
    background: #fff;
    border: 1px solid #e2e9f2;
    border-radius: 19px;
}

.benchskill-highlight-copy h3 {
    margin-bottom: 12px;
    font-size: clamp(22px, 2.5vw, 29px);
    line-height: 1.25;
    color: #112038;
}

.benchskill-highlight-copy > p {
    color: #52647b;
    font-size: 13px;
    line-height: 1.75;
}

.benchskill-highlight-copy ul {
    padding-left: 18px;
    margin: 17px 0 22px;
}

.benchskill-highlight-copy li {
    margin: 7px 0;
    color: #52647b;
    font-size: 12.5px;
}

.benchskill-preview {
    margin: 0;
    padding: 9px;
    border: 1px solid #e2e9f2;
    border-radius: 13px;
    background: #f4f7fb;
}

.benchskill-preview img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.benchskill-preview figcaption {
    padding: 8px 0 2px;
    text-align: center;
    color: #71819a;
    font-size: 10px;
}

/* Tablet */
@media (max-width: 960px) {
    .benchskill-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .benchskill-highlight {
        grid-template-columns: 1fr;
    }
}

/* Mobile */
@media (max-width: 640px) {
    .benchskill-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .benchskill-card {
        padding: 18px;
    }

    .benchskill-highlight {
        padding: 19px;
        gap: 22px;
    }

    .benchskill-heading {
        margin-bottom: 28px;
    }
}


/* Nowiles brand refresh */
.logo img {
    display: block;
    width: 190px;
    height: auto;
    max-height: 58px;
    object-fit: contain;
}
.nav-inner > .logo img { width: 220px; max-height: 68px; }
.footer-brand .logo img { width: 190px; max-height: 62px; }
@media (max-width: 640px) {
    .nav-inner > .logo img { width: 174px; max-height: 56px; }
    .footer-brand .logo img { width: 170px; }
}

/* Nowiles solutions and industries page refinements */
.industry-symbol {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    margin: 0 0 18px;
    border-radius: 12px;
    background: var(--brand-light);
    color: var(--brand);
    font-size: 22px;
    font-weight: 700;
}
.industry-card, .digital-solution-grid .service-card {
    min-height: 100%;
}
.industry-card .text-link, .service-card .text-link {
    display: inline-flex;
    margin-top: 16px;
    color: var(--brand-dark);
    font-weight: 650;
    font-size: 13px;
}
.solution-approach-grid { margin-top: 36px; }
.solution-intro { max-width: 760px; margin: 16px 0 34px; }
@media (max-width: 760px) {
    .industries-grid, .digital-solution-grid { grid-template-columns: 1fr; }
}

/* Industry detail pages */
.industry-detail-hero p { max-width: 700px; }
.industry-perspective .two { align-items: start; }
.industry-body-copy {
    margin-top: 18px;
    color: var(--txt-sec);
    line-height: 1.8;
}
.industry-focus-heading {
    margin: 28px 0 12px;
    font: 700 17px 'Plus Jakarta Sans', sans-serif;
}
.industry-focus-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 24px;
    padding: 0;
    margin: 0;
    list-style: none;
}
.industry-focus-list li {
    position: relative;
    padding: 10px 12px 10px 30px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--brand-xlit);
    color: var(--txt-primary);
    font-size: 14px;
}
.industry-focus-list li:before {
    content: "✓";
    position: absolute;
    left: 12px;
    color: var(--brand);
    font-weight: 800;
}
.industry-detail-grid { margin-top: 34px; }
.industry-detail-card {
    padding: 26px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(24, 45, 53,.04);
}
.industry-detail-card h3 { margin-bottom: 10px; }
.industry-detail-card p { color: var(--txt-sec); line-height: 1.7; }
.industry-detail-card .industry-symbol { margin-bottom: 14px; }
@media (max-width: 760px) {
    .industry-perspective .two { grid-template-columns: 1fr; gap: 24px; }
    .industry-focus-list { grid-template-columns: 1fr; }
}


/* Keep the blue wordmark readable on a light navigation surface. */
.nav-base,
.nav-base.is-scrolled {
    background: rgba(255,255,255,.97) !important;
    border-bottom: 1px solid rgba(16, 56, 72,.12) !important;
    box-shadow: 0 5px 24px rgba(9,45,67,.07) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.nav-base .logo img {
    filter: none !important;
    width: 190px;
    max-height: 62px;
    object-fit: contain;
}
.nav-base .nav-links a:not(.nav-cta) {
    color: #243e48 !important;
}
.nav-base .nav-links a:not(.nav-cta):hover,
.nav-base .nav-links a:not(.nav-cta).active {
    color: #285e74 !important;
}
.nav-base .menu-btn { color: #243e48 !important; }
footer .footer-brand .logo {
    display: inline-flex;
    background: #fff;
    padding: 8px 12px;
    border-radius: 8px;
}
footer .footer-brand .logo img { filter: none !important; }
@media (max-width: 640px) {
    .nav-base .logo img { width: 165px; max-height: 54px; }
}

/* Responsive full-width video hero */
@media (max-width: 767px) {
    .home-hero {
        height: 680px;
        min-height: 680px;
    }
    .hero-video-media {
        object-fit: cover;
        object-position: center center;
    }
}

/* Final Nowiles hero layout: restore the original hero height and keep the navbar above it. */
body[data-page="home"] .home-hero {
    position: relative;
    height: auto !important;
    min-height: 680px !important;
    margin-top: 80px;
    padding: 130px 0 105px !important;
    overflow: hidden;
}
body[data-page="home"] .home-hero .hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
body[data-page="home"] .home-hero .hero-video-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
body[data-page="home"] .nav-base {
    z-index: 1000;
    background: rgba(255,255,255,.98) !important;
}
body[data-page="home"] .home-partner .container.two {
    align-items: center;
}
body[data-page="home"] .home-partner-links {
    align-content: center;
}
@media (max-width: 767px) {
    body[data-page="home"] .home-hero {
        min-height: 620px !important;
        margin-top: 80px;
        padding: 100px 0 82px !important;
    }
}

@media (max-width: 960px) {
    .nav-base .nav-links.open {
        z-index: 1001;
        max-height: calc(100vh - 90px);
        max-height: calc(100dvh - 90px);
        overflow-y: auto;
        overscroll-behavior: contain;
        background: #fff !important;
        border: 1px solid var(--border) !important;
        box-shadow: 0 12px 28px rgba(9, 45, 67, .16) !important;
    }

    .nav-base .nav-links.open a:not(.nav-cta) {
        color: var(--txt-primary) !important;
    }

    .nav-base .nav-links.open a:not(.nav-cta):hover,
    .nav-base .nav-links.open a:not(.nav-cta):focus-visible,
    .nav-base .nav-links.open a:not(.nav-cta).active {
        color: var(--brand-dark) !important;
    }

    .nav-base .nav-links.open .nav-submenu a:hover,
    .nav-base .nav-links.open .nav-submenu a:focus-visible,
    .nav-base .nav-links.open .nav-submenu a.active {
        background: var(--brand-light);
    }
}

.stats-wrap .stat-icon,
.stats-wrap .stat-num {
    color: var(--brand) !important;
}

.nav-base,
.nav-base.is-scrolled {
    background: var(--nav-bar-bg) !important;
    border-bottom-color: rgba(86, 195, 220, .2) !important;
    box-shadow: 0 8px 26px rgba(0, 0, 0, .24) !important;
}

body[data-page="home"] .nav-base {
    background: var(--nav-bar-bg) !important;
}

.nav-base .logo img,
footer .footer-brand .logo img {
    filter: none !important;
}

.nav-base .nav-links a:not(.nav-cta) {
    color: var(--brand-light) !important;
}

.nav-base .nav-links a:not(.nav-cta):hover,
.nav-base .nav-links a:not(.nav-cta).active {
    color: var(--sunshine) !important;
}

.nav-base .menu-btn {
    color: var(--brand-light) !important;
}

footer .footer-brand .logo {
    background: transparent;
    padding: 0;
}

.nav-base .nav-links .nav-submenu a {
    color: var(--txt-primary) !important;
}

.nav-base .nav-links .nav-submenu a:hover,
.nav-base .nav-links .nav-submenu a:focus-visible,
.nav-base .nav-links .nav-submenu a.active {
    background: var(--brand-light);
    color: var(--brand-dark) !important;
}

@media (min-width: 961px) {
    .nav-base .nav-links .nav-dropdown:last-of-type .nav-submenu {
        right: 0;
        left: auto;
        max-width: calc(100vw - 32px);
    }

    .nav-base .nav-links .nav-submenu a {
        white-space: normal;
    }
}

.page-hero h1 {
    color: #fff;
}