:root {
    --navy: #061223;
    --navy2: #0a1c32;
    --blue: #168cff;
    --cyan: #36d9e7;
    --text: #10213a;
    --muted: #64748b;
    --line: #dce7f3;
    --white: #fff;
    --shadow: 0 18px 50px rgba(17,50,86,.1)
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    font-family: TimesNewRomans,Arial,sans-serif;
    color: var(--text);
    background: #f7fafc;
    font-size: 16px;
    line-height: 1.65
}

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

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

.header {
    position: fixed;
    z-index: 20;
    left: 0;
    right: 0;
    top: 0;
    background: rgba(6,18,35,.8);
    border-bottom: 1px solid rgba(255,255,255,.09);
    backdrop-filter: blur(16px)
}

.nav {
    height: 90px;
    display: flex;
    align-items: center;
    gap: 36px
}

.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #fff;
    margin-right: auto;
    line-height: 1
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    border: 1px solid #2ca7ff;
    color: #60d8ff;
    font-size: 16px;
    font-weight: 800;
    clip-path: polygon(12% 0,100% 0,100% 88%,88% 100%,0 100%,0 12%)
}

.brand b {
    display: block;
    letter-spacing: .1em
}

.brand small {
    display: block;
    font-size: 8px;
    letter-spacing: .14em;
    color: #9db0c6;
    margin-top: 7px
}

.menu {
    display: flex;
    gap: 28px;
    color: #d3dfec;
    font-size: 14px;
    font-weight: 600
}

.menu a {
    transition: .2s
}

.menu a:hover {
    color: #48c7ff
}

.languages {
    display: flex;
    padding: 3px;
    border-radius: 9px;
    background: rgba(255,255,255,.08)
}

.lang {
    border: 0;
    color: #9fb2c8;
    background: transparent;
    padding: 7px 9px;
    border-radius: 7px;
    font: 700 12px Manrope;
    cursor: pointer
}

.lang.active {
    background: #168cff;
    color: #fff
}

.menu-toggle {
    display: none;
    background: none;
    border: 0;
    padding: 5px
}

.menu-toggle span {
    display: block;
    width: 23px;
    height: 2px;
    background: white;
    margin: 5px
}

.hero {
    min-height: 760px;
    height: 100vh;
    max-height: 920px;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 75% 50%,#113e6c 0,transparent 28%),linear-gradient(135deg,#061223 20%,#09213c 100%);
    color: #fff
}

.hero-grid {
    height: 100%;
    display: grid;
    grid-template-columns: 1.12fr .88fr;
    align-items: center;
    position: relative;
    z-index: 2;
    padding-top: 70px
}

.eyebrow,.kicker {
    font-family: timesnewroman;
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
}

.eyebrow {
    color: #6cd9ff;
    display: flex;
    align-items: center;
    gap: 10px
}

.eyebrow span:first-child {
    width: 28px;
    height: 1px;
    background: #36d9e7
}

.hero h1 {
    font-size: clamp(52px,6.2vw,88px);
    letter-spacing: -.055em;
    line-height: .98;
    margin: 22px 0 28px;
    max-width: 750px
}

.hero h1 em {
    display: block;
    font-size: .49em;
    line-height: 1.15;
    font-style: normal;
    font-weight: 500;
    color: #89a6c3;
    letter-spacing: -.02em;
    margin-top: 14px
}

.lead {
    max-width: 670px;
    color: #b8c9da;
    font-size: 18px;
    line-height: 1.75
}

.hero-actions {
    display: flex;
    gap: 14px;
    margin-top: 38px;
    flex-wrap: wrap
}

.btn {
    min-height: 52px;
    padding: 13px 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    transition: .25s
}

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

.btn.primary {
    background: linear-gradient(120deg,#087ff0,#19a6ff);
    box-shadow: 0 14px 34px rgba(0,131,255,.3)
}

.btn.ghost {
    border: 1px solid #47617a;
    color: #e3edf6
}

.btn.light {
    background: white;
    color: #126fc6
}

.grid-lines {
    position: absolute;
    inset: 0;
    opacity: .1;
    background-image: linear-gradient(rgba(88,196,255,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(88,196,255,.25) 1px,transparent 1px);
    background-size: 70px 70px;
    mask-image: linear-gradient(to left,#000,transparent 72%)
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(1px)
}

.orb-a {
    width: 540px;
    height: 540px;
    right: -190px;
    top: -250px;
    border: 1px solid rgba(74,188,255,.18)
}

.orb-b {
    width: 320px;
    height: 320px;
    left: -170px;
    bottom: -170px;
    background: rgba(22,140,255,.08)
}

.ai-visual {
    height: 520px;
    display: grid;
    place-items: center;
    position: relative
}

.rings {
    position: relative;
    width: 320px;
    height: 320px;
    display: grid;
    place-items: center
}

.rings i {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(83,201,255,.28);
    border-radius: 50%;
    animation: pulse 4s ease-in-out infinite
}

.rings i:nth-child(2) {
    inset: 35px;
    border-style: dashed;
    animation-delay: -1.5s;
    animation-direction: reverse
}

.rings i:nth-child(3) {
    inset: 78px;
    border-width: 2px;
    animation-delay: -2.5s
}

.rings strong {
    font-size: 74px;
    letter-spacing: -.08em;
    text-shadow: 0 0 35px #1599ff;
    color: #cff5ff
}

.node {
    position: absolute;
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border: 1px solid #2875ae;
    background: #0a2745;
    border-radius: 50%;
    color: #5fdcff;
    font-size: 12px
}

.n1 {
    top: 32px;
    left: 58px
}

.n2 {
    right: 30px;
    top: 190px
}

.n3 {
    bottom: 28px;
    left: 110px
}

.scroll-down {
    position: absolute;
    z-index: 2;
    bottom: 28px;
    left: 50%;
    color: #70a4ca;
    border: 1px solid #31506c;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: grid;
    place-items: center
}

@keyframes pulse {
    50% {
        transform: scale(1.05);
        opacity: .6
    }
}

.section {
    background: currentColor;
    padding: 105px 0
}

.section-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: 50px;
    margin-bottom: 48px
}

.section h2 {
    font-size: clamp(34px,4vw,52px);
    letter-spacing: -.045em;
    line-height: 1.12;
    margin: 6px 0 0;
	color: #fff;
}

.section-head>p {
    color: #aab4c3;
    max-width: 560px;
    margin: 0
}

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

.card {
    background: #fff;
    border: 1px solid #e5edf5;
    border-radius: 14px;
    padding: 27px;
    min-height: 285px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: .25s
}

.card:after {
    content: "";
    position: absolute;
    width: 90px;
    height: 90px;
    border: 1px solid #e4eff9;
    border-radius: 50%;
    right: -45px;
    top: -45px
}

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

.card-top {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.icon {
    width: 48px;
    height: 48px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: #eaf6ff;
    color: #087de8;
    font-weight: 800;
    font-size: 20px
}

.status {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #078451;
    background: #e7f8f0;
    border-radius: 20px;
    padding: 5px 9px
}

.card h3 {
    font-size: 20px;
    margin: 22px 0 10px
}

.card p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--muted);
    margin: 0 0 23px
}

.card a {
    font-family: timesnewroman;
    margin-top: auto;
    color: #087de8;
    font-weight: 800;
    font-size: 13px
}

.card a span {
    margin-left: 6px
}

.about {
    background: #31418d
}

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

.about-art {
    height: 520px;
    background: linear-gradient(145deg,#061426,#0a3157);
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    display: grid;
    place-items: center
}

.about-art:before {
    content: "";
    width: 390px;
    height: 390px;
    border: 1px solid #185588;
    position: absolute;
    border-radius: 50%;
    box-shadow: 0 0 0 55px rgba(19,113,183,.06),0 0 0 110px rgba(19,113,183,.04)
}

.big-ai {
    position: relative;
    font-size: 110px;
    font-weight: 800;
    color: #d4f7ff;
    line-height: .72;
    text-shadow: 0 0 35px #1386d6
}

.big-ai span {
    display: block;
    font-size: 22px;
    letter-spacing: .42em;
    color: #62d5f3;
    margin-top: 29px;
    margin-left: 11px
}

.data-chip {
    position: absolute;
    background: rgba(4,24,43,.9);
    border: 1px solid #176ba4;
    color: #6bdcf8;
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 10px;
    letter-spacing: .12em
}

.chip-one {
    left: 24px;
    top: 35px
}

.chip-two {
    right: 25px;
    bottom: 36px
}

.about-copy>p:not(.kicker) {
    color: #b8c5d9
}

.stats {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 8px;
    margin-top: 14px;
    padding-top: 28px;
    border-top: 1px solid var(--line)
}

.stats div {
    display: flex;
    flex-direction: column
}

.stats strong {
    font-size: 38px;
    color: #bcc9d5
}

.stats span {
    font-size: 16px;
    color: #bcc9d5
}

.presentation {
    padding: 65px 0;
    background: darkslategrey;
    color: white
}

.presentation-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px
}

.presentation .kicker {
    color: #9fe9ff
}

.presentation h2 {
    margin-top: 0
}

.contact {
    background: #071526;
    color: #fff
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px
}

.contact-grid>div:first-child>p:last-child {
    color: #9dafc1;
    max-width: 500px
}

.contact-list {
    display: grid;
    gap: 12px
}

.contact-list>a,.contact-list>div {
    display: flex;
    gap: 18px;
    align-items: center;
    padding: 17px;
    border: 1px solid #213a52;
    border-radius: 10px;
    background: #0a1b2e
}

.contact-list>*>span {
    color: #49d6f0;
    font-size: 22px
}

.contact-list small,.contact-list b {
    display: block
}

.contact-list small {
    color: #7790a8;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .1em
}

.contact-list b {
    font-size: 14px;
    margin-top: 2px
}

footer {
    background: #040e1a;
    color: #7890a6;
    border-top: 1px solid #15273a;
    font-size: 12px
}

footer .wrap {
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

footer a {
    font-size: 20px;
    color: #52c9f0
}

@media(max-width: 900px) {
    .menu-toggle {
        display:block;
        order: 2
    }

    .languages {
        order: 3
    }

    .menu {
        position: absolute;
        left: 20px;
        right: 20px;
        top: 72px;
        background: #0b2037;
        border: 1px solid #263e56;
        padding: 18px;
        display: none;
        flex-direction: column;
        gap: 6px;
        border-radius: 10px
    }

    .menu.open {
        display: flex
    }

    .menu a {
        padding: 10px
    }

    .hero {
        height: auto;
        min-height: 760px
    }

    .hero-grid {
        grid-template-columns: 1fr;
        padding-top: 140px;
        padding-bottom: 80px
    }

    .ai-visual {
        position: absolute;
        right: -130px;
        opacity: .36
    }

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

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

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

    .about-art {
        height: 400px
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 45px
    }
}

@media(max-width: 600px) {
    .wrap {
        width:min(100% - 28px,1180px)
    }

    .nav {
        height: 70px;
        gap: 9px
    }

    .brand small {
        display: none
    }

    .brand-mark {
        width: 38px;
        height: 38px
    }

    .languages {
        margin-left: 2px
    }

    .lang {
        padding: 6px
    }

    .hero {
        min-height: 720px
    }

    .hero-grid {
        padding-top: 125px
    }

    .hero h1 {
        font-size: 49px
    }

    .hero h1 em {
        font-size: .44em
    }

    .lead {
        font-size: 16px
    }

    .ai-visual {
        right: -230px;
        top: 100px
    }

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

    .btn {
        width: 100%
    }

    .section {
        padding: 72px 0
    }

    .section-head {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-bottom: 30px
    }

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

    .card {
        min-height: 250px
    }

    .about-art {
        height: 320px
    }

    .big-ai {
        font-size: 80px
    }

    .stats {
        grid-template-columns: 1fr 1fr;
        gap: 22px
    }

    .presentation-box {
        display: block
    }

    .presentation .btn {
        margin-top: 24px
    }

    .contact-grid {
        gap: 30px
    }

    .contact-list b {
        font-size: 12px;
        word-break: break-word
    }
}

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

    .rings i {
        animation: none
    }

    .btn,.card {
        transition: none
    }
}

.brand-logo {
    display: block;
    width: auto;
    height: 75px;
}

.brand-mark {
    display: block;
    width: 90px;
    height: 90px;
    border: none;
    clip-path: none;
    background: transparent;
    flex-shrink: 0;
}

.brand-mark img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (max-width: 600px) {
    .brand-logo {
        height: 58px;
        width: 58px;
    }
}

.card .agent-button {
    width: fit-content;
    min-height: 42px;
    margin-top: auto;
    padding: 10px 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #ffffff;
    background: linear-gradient(135deg, #087ee9, #19a6ff);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 8px 20px rgba(8, 126, 233, 0.22);
    transition: 0.25s;
}

.card .agent-button svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.card .agent-button:hover {
    color: #ffffff;
    background: linear-gradient(135deg, #066bc8, #078fe7);
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(8, 126, 233, 0.32);
}
.about-art {
  width: auto;
  height: 520px;
  padding: 0;
  overflow: hidden;
  border-radius: 18px;
  background: #071526;
}

.about-art::before {
  display: none;
}

.about-image {
  display: block;
  width: auto;
  height: 100%;
  object-fit: cover;
  object-position: center;
}