:root {
    --navy: #020b24;
    --navy2: #06183d;
    --blue: #087cff;
    --cyan: #13b8ff;
    --purple: #7446ff;
    --magenta: #c943ff;
    --green: #20c978;
    --orange: #ff951d;
    --pink: #e43caa;
    --white: #fff;
    --text: #eef5ff;
    --muted: #a9bad3;
    --line: rgba(103, 170, 255, .25);
    --max: 1240px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--navy);
    color: var(--text);
    font-family: Inter, Segoe UI, Arial, sans-serif;
    line-height: 1.5;
}

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

button,
input {
    font: inherit;
}

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

header {
    height: 76px;
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(2, 11, 36, .91);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(90, 160, 255, .14);
}

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

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 900;
    letter-spacing: -.7px;
    font-size: 25px;
    line-height: 1;
}

.brand-mark {
    width: 130px;
    height: 30px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    position: relative;
}

.brand-mark:before {
    content: "";
    width: 130px;
    height: 30px;
    background-image: url('../images/rauzit-logo-small.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 27px;
    font-size: 13px;
    font-weight: 650;
}

.nav-links a {
    color: #d9e6f7;
}

.nav-links a:hover {
    color: #fff;
}

.nav-links .active {
    color: #fff;
    position: relative;
}

.nav-links .active:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    bottom: -14px;
    background: linear-gradient(90deg, #087cff, #7d4cff);
    box-shadow: 0 0 12px #087cff;
}

.phone {
    font-weight: 800;
    color: #eef5ff !important;
}

.phone span {
    color: #087cff;
    margin-right: 7px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 9px;
    padding: 12px 19px;
    font-size: 13px;
    font-weight: 850;
    border: 1px solid transparent;
    transition: .2s;
}

.btn-primary {
    background: linear-gradient(100deg, #087cff, #1265e8);
    box-shadow: 0 10px 28px rgba(8, 124, 255, .3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(8, 124, 255, .4);
}

.btn-outline {
    border-color: rgba(130, 194, 255, .5);
    background: rgba(4, 20, 50, .38);
}

.btn-outline:hover {
    border-color: #45b9ff;
    background: rgba(13, 74, 145, .25);
}

.mobile-toggle {
    display: none;
    border: 0;
    background: none;
    color: white;
    font-size: 27px;
}

.hero {
    position: relative;
    overflow: hidden;
    min-height: 590px;
    padding: 75px 0 115px;
    background:
        radial-gradient(circle at 72% 50%, rgba(238, 74, 107, .22), transparent 28%),
        radial-gradient(circle at 38% 20%, rgba(12, 115, 255, .3), transparent 39%),
        linear-gradient(110deg, #031034, #071c49 52%, #171447);
}

.hero:before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(2, 11, 36, .95) 0%, rgba(2, 11, 36, .8) 35%, rgba(2, 11, 36, .1) 74%),
        radial-gradient(circle at 4% 54%, rgba(0, 150, 255, .4), transparent 18%);
}

.hero:after {
    content: "";
    position: absolute;
    left: -20%;
    bottom: -70%;
    width: 85%;
    height: 95%;
    background: radial-gradient(ellipse, rgba(255, 93, 57, .3), transparent 64%);
    filter: blur(35px);
}

.hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: .92fr 1.08fr;
    gap: 42px;
    align-items: center;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(78, 176, 255, .42);
    border-radius: 30px;
    padding: 7px 12px;
    background: rgba(12, 70, 160, .35);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .35px;
    box-shadow: 0 0 25px rgba(8, 124, 255, .17);
}

.pill i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #5ac8ff;
    box-shadow: 0 0 8px #5ac8ff;
}

.hero h1 {
    font-size: clamp(45px, 5.2vw, 70px);
    line-height: 1.01;
    letter-spacing: -3.5px;
    margin: 19px 0 20px;
    max-width: 630px;
}

.gradient {
    background: linear-gradient(90deg, #0c96ff, #6e4cff, #df43ff);
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
}

.hero-copy {
    font-size: 15px;
    color: #d0dced;
    max-width: 570px;
    margin: 0 0 26px;
}

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

.trusted {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 27px;
}

.avatars {
    display: flex;
}

.avatar {
    width: 31px;
    height: 31px;
    border-radius: 50%;
    border: 2px solid #06183d;
    background: linear-gradient(135deg, #d4a17a, #7a4f3b);
    margin-left: -6px;
}

.avatar:first-child {
    margin-left: 0;
}

.avatar:nth-child(2) {
    background: linear-gradient(135deg, #e4bc9c, #79554a);
}

.avatar:nth-child(3) {
    background: linear-gradient(135deg, #8b5b3c, #1f2b3d);
}

.avatar:nth-child(4) {
    background: linear-gradient(135deg, #d4b095, #3c5068);
}

.trusted p {
    margin: 0;
    font-size: 11px;
    color: #b7c7dc;
    line-height: 1.35;
}

.trusted b {
    color: white;
}

.hero-art {
    height: 430px;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(129, 200, 255, .22);
    background-image: linear-gradient(90deg, rgba(2, 11, 36, .5), rgba(2, 11, 36, .5) 55%, rgba(2, 11, 36, .5)), url('../images/rauzit-chicago-hero.jpg');
    background-size: cover;
    background-position: center 48%;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .35);
}

.stars {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(#7ac7ff 1px, transparent 1px);
    background-size: 31px 31px;
    opacity: .14;
}

.sun {
    position: absolute;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    right: 25%;
    top: 31%;
    background: #ffc56e;
    box-shadow: 0 0 60px rgba(255, 179, 75, .7);
}

.water {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 31%;
    background: linear-gradient(180deg, rgba(17, 45, 83, .15), #061531);
    opacity: .95;
}

.skyline {
    position: absolute;
    bottom: 15%;
    left: 0;
    right: 0;
    height: 64%;
    display: flex;
    align-items: flex-end;
    gap: 5px;
    padding: 0 10px;
}

.bld {
    position: relative;
    flex: 1;
    background: linear-gradient(180deg, #122b51, #030b20);
    border: 1px solid rgba(102, 169, 236, .13);
}

.bld:after {
    content: "";
    position: absolute;
    inset: 10px 4px;
    background: repeating-linear-gradient(180deg, rgba(255, 197, 106, .9) 0 2px, transparent 2px 12px);
    opacity: .55;
}

.bld:nth-child(2) {
    height: 48%;
}

.bld:nth-child(4) {
    height: 69%;
}

.bld:nth-child(6) {
    height: 56%;
}

.bld:nth-child(8) {
    height: 100%;
}

.bld:nth-child(10) {
    height: 73%;
}

.bld:nth-child(12) {
    height: 59%;
}

.bld:nth-child(14) {
    height: 82%;
}

.trump {
    position: absolute;
    bottom: 15%;
    left: 56%;
    height: 91%;
    width: 8%;
    background: linear-gradient(90deg, #0a1936, #122e55, #07142b);
    border: 1px solid rgba(105, 177, 245, .18);
    box-shadow: 0 0 40px rgba(17, 134, 255, .13);
}

.trump:before {
    content: "";
    position: absolute;
    left: 46%;
    top: -17%;
    width: 5%;
    height: 18%;
    background: #86c9ff;
}

.trump:after {
    content: "";
    position: absolute;
    inset: 12px 7px;
    background: repeating-linear-gradient(180deg, #f6a95f 0 2px, transparent 2px 13px);
    opacity: .45;
}

.metric {
    position: absolute;
    left: 7%;
    right: 7%;
    bottom: 18px;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 17px 10px;
    background: rgba(10, 18, 38, .72);
    border: 1px solid rgba(130, 195, 255, .38);
    border-radius: 15px;
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .35);
}

.metric-item {
    text-align: center;
    border-right: 1px solid rgba(150, 196, 255, .2);
}

.metric-item:last-child {
    border: 0;
}

.metric strong {
    display: block;
    font-size: 22px;
}

.metric small {
    font-size: 10px;
    color: #d4dfef;
}

.metric-item:nth-child(1) strong {
    color: #168fff;
}

.metric-item:nth-child(2) strong {
    color: #a05cff;
}

.metric-item:nth-child(3) strong {
    color: #ff941d;
}

.metric-item:nth-child(4) strong {
    color: #9d59ff;
}

.trust-strip {
    position: relative;
    z-index: 10;
    margin-top: -48px;
}

.trust-grid {
    background: #f6f8fc;
    color: #11203b;
    border-radius: 17px;
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}

.trust-box {
    display: flex;
    gap: 12px;
    padding: 3px 20px;
    border-right: 1px solid #d8e0ea;
}

.trust-box:last-child {
    border: 0
}

.trust-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    flex: none;
    display: grid;
    place-items: center;
    color: white;
    font-size: 20px;
    font-weight: 900
}

.blue {
    background: #087cff
}

.green {
    background: #24c979
}

.orange {
    background: #ff9b16
}

.violet {
    background: #7046e9
}

.trust-box h3 {
    font-size: 12px;
    margin: 0 0 3px
}

.trust-box p {
    font-size: 10px;
    color: #5c6c82;
    margin: 0;
    line-height: 1.45
}

section {
    padding: 86px 0
}

.section-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 35px
}

.kicker {
    font-size: 10px;
    letter-spacing: 1.8px;
    color: #43bfff;
    font-weight: 900;
    text-transform: uppercase
}

.section-head h2 {
    font-size: clamp(31px, 4vw, 43px);
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin: 8px 0 11px
}

.section-head h2 span {
    background: linear-gradient(90deg, #0c9dff, #8549ff, #d640ff);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent
}

.section-head p {
    font-size: 14px;
    color: var(--muted);
    margin: 0
}

.services {
    background: radial-gradient(circle at 50% 0, rgba(12, 111, 255, .1), transparent 40%), #020b24
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 9px
}

.service {
    min-height: 330px;
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 17px 13px;
    background: linear-gradient(180deg, rgba(11, 37, 77, .86), rgba(4, 16, 40, .95));
    position: relative;
    overflow: hidden;
    transition: .2s
}

.service:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .3)
}

.service:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--a)
}

.service:nth-child(1) {
    --a: #087cff
}

.service:nth-child(2) {
    --a: #18bddd
}

.service:nth-child(3) {
    --a: #17c96e
}

.service:nth-child(4) {
    --a: #3b8cff
}

.service:nth-child(5) {
    --a: #df38ad
}

.service:nth-child(6) {
    --a: #ff8b18
}

.service:nth-child(7) {
    --a: #b13cff
}

.service-icon {
    width: 39px;
    height: 39px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--a) 23%, transparent);
    color: var(--a);
    font-size: 11px;
    font-weight: 900;
    margin-bottom: 16px
}

.service h3 {
    font-size: 13px;
    line-height: 1.25;
    margin: 5px 0 7px
}

.service-intro {
    font-size: 9.5px;
    color: #a9bdd6;
    line-height: 1.4;
    margin: 0 0 10px
}

.service-list {
    list-style: none;
    margin: 0;
    padding: 0 0 28px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px
}

.service-list li {
    font-size: 9.5px;
    line-height: 1.25;
    color: #dbe8f8;
    padding-left: 10px;
    position: relative
}

.service-list li:before {
    content: "";
    position: absolute;
    left: 0;
    top: .48em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--a);
    box-shadow: 0 0 6px color-mix(in srgb, var(--a) 65%, transparent)
}

.service-link {
    position: absolute;
    left: 13px;
    bottom: 13px;
    font-size: 10px;
    color: #d4e9ff;
    font-weight: 800
}

.circle-arrow {
    position: absolute;
    right: 12px;
    bottom: 11px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--a);
    display: grid;
    place-items: center;
    color: var(--a);
    font-size: 12px
}

.center {
    text-align: center;
    margin-top: 25px
}

.features {
    background: linear-gradient(180deg, #03102c, #061a3c)
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px
}

.feature {
    min-height: 150px;
    border-radius: 11px;
    position: relative;
    overflow: hidden;
    padding: 22px;
    background: #edf4fb;
    color: #071329
}

.feature h3 {
    font-size: 15px;
    line-height: 1.22;
    margin: 0 0 10px;
    position: relative;
    z-index: 2
}

.feature p {
    font-size: 10px;
    line-height: 1.45;
    max-width: 210px;
    position: relative;
    z-index: 2
}

.feature a {
    position: absolute;
    left: 22px;
    bottom: 18px;
    font-size: 10px;
    color: #086cf0;
    font-weight: 900;
    z-index: 3
}

.feature-art {
    position: absolute;
    right: -6px;
    bottom: -12px;
    width: 145px;
    height: 145px;
    border-radius: 45% 55% 35% 65%;
    opacity: .82
}

.security {
    background: linear-gradient(110deg, #eff8ff, #dcefff)
}

.security .feature-art {
    background: radial-gradient(circle, #fff 8%, #5daeff 9% 20%, transparent 21%), linear-gradient(145deg, #cce8ff, #4c9cf4);
    box-shadow: 0 0 50px rgba(22, 125, 255, .3)
}

.cloud {
    background: linear-gradient(110deg, #eff8ff, #e4efff)
}

.cloud .feature-art {
    background: radial-gradient(circle at 35% 30%, #fff 0 14%, transparent 15%), linear-gradient(145deg, #b8ddff, #397fd4)
}

.backup {
    background: linear-gradient(110deg, #fff1ed, #ffe1dc)
}

.backup .feature-art {
    background: radial-gradient(circle at 65% 30%, #fff 0 13%, transparent 14%), linear-gradient(145deg, #ffbea7, #e77757)
}

.ai {
    background: linear-gradient(110deg, #f8efff, #ebd9ff)
}

.ai .feature-art {
    background: radial-gradient(circle, #fff 0 10%, transparent 11%), linear-gradient(145deg, #d9b9ff, #9c57e6)
}

.chicago {
    background: #041435
}

.local-panel {
    border: 1px solid rgba(45, 137, 255, .5);
    border-radius: 15px;
    padding: 26px;
    display: grid;
    grid-template-columns: 1.1fr 1.45fr 1.1fr;
    gap: 25px;
    align-items: center;
    background: linear-gradient(145deg, #061d4b, #03102a)
}

.chicago-art {
    height: 220px;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    background: #061b43;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chicago-art img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
    border-radius: inherit;
}

.mini-sky {
    position: absolute;
    bottom: 23px;
    left: 5%;
    right: 5%;
    height: 65%;
    display: flex;
    align-items: flex-end;
    gap: 4px
}

.mini-b {
    flex: 1;
    background: #0a3970;
    border: 1px solid #1b71b8
}

.mini-b:nth-child(3) {
    height: 75%
}

.mini-b:nth-child(5) {
    height: 100%
}

.mini-b:nth-child(8) {
    height: 85%
}

.local-copy h2 {
    font-size: 26px;
    line-height: 1.12;
    margin: 7px 0 9px
}

.local-copy p {
    font-size: 11px;
    color: #a9bbd2;
    margin: 0
}

.local-points {
    display: grid;
    gap: 17px
}

.point {
    display: flex;
    gap: 10px
}

.point-icon {
    color: #28aaff;
    font-size: 18px
}

.point b {
    font-size: 11px
}

.point span {
    display: block;
    color: #91a7c2;
    font-size: 9px
}

.cta {
    padding: 54px 0;
    background: linear-gradient(95deg, #087cff, #5648e7 53%, #b23ae5);
    position: relative;
    overflow: hidden
}

.cta:after {
    content: "";
    position: absolute;
    right: -7%;
    top: -130px;
    width: 430px;
    height: 430px;
    background: radial-gradient(circle, rgba(255, 255, 255, .2), transparent 64%);
    filter: blur(15px)
}

.cta-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1.8fr auto;
    gap: 35px;
    align-items: center
}

.cta h2 {
    font-size: 29px;
    line-height: 1.05;
    margin: 0
}

.cta p {
    font-size: 12px;
    margin: 0;
    color: #edf4ff
}

.cta .btn {
    background: white;
    color: #6340dc;
    white-space: nowrap
}

footer {
    background: #01091d;
    padding: 45px 0 16px
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.45fr 1fr 1fr 1fr;
    gap: 30px
}

.footer-brand p {
    font-size: 10px;
    color: #8da1bb;
    max-width: 235px
}

.footer-title {
    font-size: 11px;
    font-weight: 900;
    margin-bottom: 12px
}

.footer-links a {
    display: block;
    color: #8297b3;
    font-size: 10px;
    margin: 7px 0
}

.contact a {
    display: block;
    color: #b6c6db;
    font-size: 10px;
    margin: 9px 0
}

.newsletter p {
    font-size: 10px;
    color: #879bb6
}

.newsletter-form {
    display: flex;
    border: 1px solid #284467;
    border-radius: 7px;
    overflow: hidden
}

.newsletter-form input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: white;
    padding: 9px;
    font-size: 10px
}

.newsletter-form button {
    border: 0;
    background: #087cff;
    color: white;
    padding: 0 12px;
    font-size: 10px;
    font-weight: 800
}

.copyright {
    border-top: 1px solid var(--line);
    margin-top: 32px;
    padding-top: 14px;
    color: #637a98;
    font-size: 9px;
    display: flex;
    justify-content: space-between
}

@media(max-width:1100px) {
    .nav-links {
        gap: 15px
    }

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

    .service {
        min-height: 300px
    }

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

    .trust-box {
        padding: 12px
    }

    .trust-box:nth-child(2) {
        border-right: 0
    }

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

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

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

    .nav-links {
        display: none
    }

    .mobile-toggle {
        display: block
    }

    .hero {
        padding: 62px 0 95px
    }

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

    .hero-art {
        height: 330px
    }

    .hero h1 {
        font-size: 48px;
        letter-spacing: -2.5px
    }

    .metric {
        left: 3%;
        right: 3%;
        bottom: 12px
    }

    .metric strong {
        font-size: 18px
    }

    .metric small {
        font-size: 8px
    }

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

    .trust-box {
        border-right: 0;
        border-bottom: 1px solid #d8e0ea
    }

    .trust-box:last-child {
        border-bottom: 0
    }

    section {
        padding: 68px 0
    }

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

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

    .local-panel {
        grid-template-columns: 1fr
    }

    .chicago-art {
        height: 200px
    }

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

    .cta-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 15px
    }

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

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

    .copyright {
        flex-direction: column;
        gap: 8px
    }
}

@media(max-width:480px) {
    .hero h1 {
        font-size: 41px
    }

    .hero-copy {
        font-size: 13px
    }

    .actions .btn {
        width: 100%
    }

    .hero-art {
        height: 275px
    }

    .metric {
        padding: 11px 3px
    }

    .metric strong {
        font-size: 15px
    }

    .metric small {
        font-size: 7px
    }

    .service-grid,
    .feature-grid {
        grid-template-columns: 1fr
    }

    .service {
        min-height: 250px
    }

    .feature {
        min-height: 205px
    }

    .local-points {
        grid-template-columns: 1fr
    }

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

    .newsletter-form {
        max-width: 330px
    }

    .chicago-art {
        height: 220px;
    }
}

/* ============================================
   Shared components for interior pages
   (extends the tokens/system above — same
   navy/blue/gradient language as the homepage)
   ============================================ */

/* Fix: wire up the mobile nav toggle (was declared but not connected) */
@media(max-width:780px) {
    .nav-links {
        position: fixed;
        top: 76px;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        padding: 22px 24px 28px;
        background: #040f2c;
        border-bottom: 1px solid var(--line);
        box-shadow: 0 20px 40px rgba(0, 0, 0, .35);
        opacity: 0;
        transform: translateY(-8px);
        pointer-events: none;
        transition: .18s
    }

    body.menu-open .nav-links {
        display: flex;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto
    }

    .nav-links .btn {
        width: 100%
    }
}

/* Interior page hero (About / Services / Contact / FAQ / Legal) */
.page-hero {
    position: relative;
    overflow: hidden;
    padding: 68px 0 64px;
    background:
        radial-gradient(circle at 78% 20%, rgba(238, 74, 107, .18), transparent 32%),
        radial-gradient(circle at 25% 15%, rgba(12, 115, 255, .28), transparent 42%),
        linear-gradient(110deg, #031034, #071c49 55%, #171447)
}

.page-hero:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 4% 40%, rgba(0, 150, 255, .28), transparent 22%)
}

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

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 16px
}

.breadcrumb a {
    color: #8ec4ff;
    font-weight: 700
}

.breadcrumb a:hover {
    color: #fff
}

.breadcrumb span {
    color: #4d6688
}

.page-hero h1 {
    font-size: clamp(34px, 4.4vw, 52px);
    line-height: 1.06;
    letter-spacing: -2px;
    margin: 0 0 14px;
    max-width: 700px
}

.page-hero-copy {
    font-size: 14px;
    color: #d0dced;
    max-width: 600px;
    margin: 0
}

.not-found-content {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding-top: 56px;
    padding-bottom: 56px
}

/* Prose (legal / long-form text pages) */
.prose {
    max-width: 780px;
    margin: 0 auto
}

.prose .updated {
    font-size: 11px;
    color: var(--muted);
    margin: 0 0 34px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 800
}

.prose h2 {
    font-size: 22px;
    letter-spacing: -.4px;
    margin: 38px 0 12px;
    color: var(--text)
}

.prose h2:first-of-type {
    margin-top: 0
}

.prose p {
    font-size: 14px;
    line-height: 1.75;
    color: #b7c7dc;
    margin: 0 0 16px
}

.prose ul {
    margin: 0 0 18px;
    padding-left: 20px
}

.prose li {
    font-size: 14px;
    line-height: 1.75;
    color: #b7c7dc;
    margin-bottom: 8px
}

.prose a {
    color: #43bfff;
    text-decoration: underline;
    text-underline-offset: 2px
}

.prose strong {
    color: #dbe8f8
}

/* About: story split */
.story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center
}

.story-copy p {
    font-size: 14px;
    line-height: 1.75;
    color: #b7c7dc;
    margin: 0 0 16px
}

.story-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 8px
}

.story-stat {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 18px;
    background: linear-gradient(180deg, rgba(11, 37, 77, .6), rgba(4, 16, 40, .85))
}

.story-stat strong {
    display: block;
    font-size: 26px;
    background: linear-gradient(90deg, #0c9dff, #8549ff);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent
}

.story-stat span {
    font-size: 11px;
    color: var(--muted)
}

.story-art {
    border: 1px solid rgba(45, 137, 255, .5);
    border-radius: 15px;
    padding: 26px;
    background: linear-gradient(145deg, #061d4b, #03102a);
    height: 100%
}

.story-art h3 {
    font-size: 15px;
    margin: 0 0 16px
}

.timeline {
    display: grid;
    gap: 16px
}

.timeline-item {
    display: flex;
    gap: 12px
}

.timeline-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #43bfff;
    box-shadow: 0 0 8px #43bfff;
    margin-top: 6px
}

.timeline-item b {
    display: block;
    font-size: 12px;
    color: var(--text)
}

.timeline-item span {
    font-size: 11px;
    color: var(--muted)
}

/* Value / principle cards (reuses the .service card language) */
.value-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px
}

.value-card {
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 24px 20px;
    background: linear-gradient(180deg, rgba(11, 37, 77, .86), rgba(4, 16, 40, .95));
    position: relative;
    overflow: hidden
}

.value-card:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--a)
}

.value-card:nth-child(1) {
    --a: #087cff
}

.value-card:nth-child(2) {
    --a: #20c978
}

.value-card:nth-child(3) {
    --a: #ff951d
}

.value-card:nth-child(4) {
    --a: #7446ff
}

.value-icon {
    width: 40px;
    height: 40px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--a) 23%, transparent);
    color: var(--a);
    font-size: 17px;
    font-weight: 900;
    margin-bottom: 15px
}

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

.value-card p {
    font-size: 11.5px;
    color: #a9bdd6;
    line-height: 1.55;
    margin: 0
}

/* Services page: full detail sections */
.services-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin: 0 0 8px
}

.services-nav a {
    font-size: 11px;
    font-weight: 800;
    padding: 8px 14px;
    border-radius: 30px;
    border: 1px solid var(--line);
    color: #c6d7ee;
    background: rgba(11, 37, 77, .4)
}

.services-nav a:hover {
    border-color: #45b9ff;
    color: #fff
}

.service-detail {
    padding: 54px 0;
    border-bottom: 1px solid var(--line);
    scroll-margin-top: 96px
}

.service-detail:last-child {
    border-bottom: 0
}

.service-detail-grid {
    display: grid;
    grid-template-columns: .85fr 1.35fr;
    gap: 44px;
    align-items: start
}

.service-detail-icon {
    width: 52px;
    height: 52px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--a) 23%, transparent);
    color: var(--a);
    font-size: 21px;
    font-weight: 900;
    margin-bottom: 18px
}

.service-detail h2 {
    font-size: 25px;
    letter-spacing: -.6px;
    margin: 0 0 12px
}

.service-detail-summary {
    font-size: 13.5px;
    color: var(--muted);
    line-height: 1.65;
    margin: 0
}

.detail-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 18px
}

.detail-list li {
    font-size: 12.5px;
    color: #dbe8f8;
    padding: 12px 14px 12px 32px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: rgba(11, 37, 77, .38);
    position: relative
}

.detail-list li:before {
    content: "";
    position: absolute;
    left: 13px;
    top: 15px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--a);
    box-shadow: 0 0 6px color-mix(in srgb, var(--a) 65%, transparent)
}

.service-detail:nth-of-type(1) {
    --a: #087cff
}

.service-detail:nth-of-type(2) {
    --a: #18bddd
}

.service-detail:nth-of-type(3) {
    --a: #17c96e
}

.service-detail:nth-of-type(4) {
    --a: #3b8cff
}

.service-detail:nth-of-type(5) {
    --a: #df38ad
}

.service-detail:nth-of-type(6) {
    --a: #ff8b18
}

.service-detail:nth-of-type(7) {
    --a: #b13cff
}

/* Contact page */
.contact-layout {
    display: grid;
    grid-template-columns: .85fr 1.3fr;
    gap: 40px;
    align-items: start
}

.contact-info {
    display: grid;
    gap: 14px
}

.info-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 18px;
    background: linear-gradient(180deg, rgba(11, 37, 77, .6), rgba(4, 16, 40, .85))
}

.info-icon {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(8, 124, 255, .18);
    color: #43bfff;
    font-size: 17px
}

.info-card h3 {
    font-size: 13px;
    margin: 0 0 4px
}

.info-card p,
.info-card a {
    display: block;
    margin: 0;
    font-size: 12px;
    color: #a9bdd6
}

.info-card a:hover {
    color: #fff
}

.contact-form-panel {
    border: 1px solid rgba(45, 137, 255, .5);
    border-radius: 15px;
    padding: 32px;
    background: linear-gradient(145deg, #061d4b, #03102a)
}

.contact-form-panel h2 {
    font-size: 20px;
    margin: 0 0 6px
}

.contact-form-panel>p {
    font-size: 12.5px;
    color: var(--muted);
    margin: 0 0 24px
}

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

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px
}

.form-row .field {
    margin-bottom: 0
}

.field label {
    font-size: 11px;
    font-weight: 800;
    color: #c6d7ee
}

.field input,
.field select,
.field textarea {
    background: rgba(2, 11, 36, .6);
    border: 1px solid rgba(130, 195, 255, .28);
    border-radius: 8px;
    padding: 12px 13px;
    color: var(--text);
    font-size: 13px;
    font-family: inherit
}

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

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: 2px solid #087cff;
    outline-offset: 1px;
    border-color: #087cff
}

.form-note {
    font-size: 10.5px;
    color: #7d93b0;
    margin-top: 6px
}

.form-success {
    margin: 16px 0 0;
    padding: 12px 14px;
    border: 1px solid rgba(84, 211, 157, .45);
    border-radius: 8px;
    background: rgba(36, 150, 103, .14);
    color: #9af0c5;
    font-size: 12px;
}

/* FAQ */
.faq-categories {
    display: grid;
    gap: 34px;
    max-width: 820px;
    margin: 0 auto
}

.faq-cat-title {
    font-size: 13px;
    font-weight: 900;
    color: #43bfff;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    margin: 0 0 14px
}

.faq-list {
    display: grid;
    gap: 10px
}

.faq-item {
    border: 1px solid var(--line);
    border-radius: 11px;
    background: linear-gradient(180deg, rgba(11, 37, 77, .5), rgba(4, 16, 40, .7));
    overflow: hidden
}

.faq-q {
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: 18px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    color: var(--text);
    font-size: 13.5px;
    font-weight: 750;
    cursor: pointer
}

.faq-q .plus {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(130, 195, 255, .4);
    display: grid;
    place-items: center;
    font-size: 14px;
    color: #43bfff;
    transition: .2s
}

.faq-item.open .faq-q .plus {
    transform: rotate(45deg)
}

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease
}

.faq-a p {
    padding: 0 20px 18px;
    margin: 0;
    font-size: 12.5px;
    color: #a9bdd6;
    line-height: 1.65
}

.faq-item.open .faq-a {
    max-height: 400px
}

.faq-cta {
    text-align: center;
    margin-top: 40px
}

.faq-cta p {
    font-size: 12.5px;
    color: var(--muted);
    margin: 0 0 16px
}

/* Responsive */
@media(max-width:1100px) {
    .value-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .service-detail-grid {
        grid-template-columns: 1fr;
        gap: 20px
    }

    .contact-layout {
        grid-template-columns: 1fr
    }
}

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

    .detail-list {
        grid-template-columns: 1fr
    }

    .form-row {
        grid-template-columns: 1fr
    }

    .page-hero {
        padding: 56px 0 48px
    }
}

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


/* Solutions / Resources */
.solution-grid .value-card,
.resource-grid .value-card {
    min-height: 255px;
    display: flex;
    flex-direction: column;
}

.solution-grid .service-link,
.resource-grid .service-link {
    margin-top: auto;
}

.solution-grid .value-card:nth-child(1) {
    --a: #087cff;
}

.solution-grid .value-card:nth-child(2) {
    --a: #20c978;
}

.solution-grid .value-card:nth-child(3) {
    --a: #ff951d;
}

.solution-grid .value-card:nth-child(4) {
    --a: #7446ff;
}

.resource-grid .value-card:nth-child(1) {
    --a: #087cff;
}

.resource-grid .value-card:nth-child(2) {
    --a: #20c978;
}

.resource-grid .value-card:nth-child(3) {
    --a: #7446ff;
}

.resource-grid .value-card:nth-child(4) {
    --a: #ff951d;
}