* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header"
        "main"
        "footer";
    min-height: 100vh;
    background: #edf8ff;
    color: #081a35;
    font-family: "Trebuchet MS", "Segoe UI", sans-serif;
}

.header {
    padding: 1.125rem 3.5%;
}

.navbar {
    display: flex;
    align-items: center;
    min-height: 4.25rem;
    padding: 0.625rem 2rem 0.625rem 1.25rem;
    background-color: #ffffff;
    border: 1px solid #e8ebf0;
    border-radius: 1rem;
    box-shadow: 0 1.2rem 2rem rgba(24, 53, 101, 0.1);
    gap: 1rem;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    color: #0a2c68;
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: -0.03em;
    text-decoration: none;
}

.logo sup {
    margin-left: 0.08rem;
    font-size: 0.42rem;
    vertical-align: top;
}

.logo-mark {
    display: grid;
    width: 1.55rem;
    height: 1.55rem;
    place-items: center;
    border: 0.2rem solid #0a2c68;
    border-radius: 0.2rem 0.75rem 0.2rem 0.2rem;
    font-size: 1.15rem;
    line-height: 1;
}

.nav-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    list-style: none;
    gap: clamp(1rem, 2.15vw, 2rem);
    margin-left: auto;
}

.nav-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    white-space: nowrap;
    text-decoration: none;
    color: #4d6691;
    font-size: 0.98rem;
    font-weight: 400;
    transition: color 0.3s ease;
}

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

.chevron {
    width: 0.6rem;
    height: 0.6rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-0.15rem);
}

.labs-icon {
    position: relative;
    display: inline-block;
    width: 0.8rem;
    height: 0.7rem;
    border: 1.5px solid #173f7b;
    border-radius: 0.12rem 0.12rem 0.35rem 0.35rem;
    color: #173f7b;
}

.labs-icon::before {
    position: absolute;
    top: -0.45rem;
    left: 0.18rem;
    width: 0.3rem;
    height: 0.45rem;
    border: 1.5px solid #173f7b;
    border-bottom: 0;
    content: "";
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 1.65rem;
    flex-shrink: 0;
    margin-left: 0.3rem;
    padding-left: 1.65rem;
    border-left: 1px solid #e1e5ec;
}

.sign-in {
    color: #3d5784;
    font-size: 1rem;
    text-decoration: none;
    white-space: nowrap;
}

.buy-button {
    padding: 0.7rem 1.35rem;
    border-radius: 0.45rem;
    background-color: #3048d2;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 0.35rem 0.6rem rgba(48, 72, 210, 0.2);
}

.main {
    position: relative;
    width: min(calc(100% - 2rem), 1370px);
    min-width: 0;
    margin: 0 auto 7rem;
}

.hero {
    position: relative;
    min-height: 650px;
    overflow: hidden;
    border-radius: 1.7rem;
    isolation: isolate;
    background: #061a3a;
    color: #fff;
    box-shadow: 0 2rem 4rem rgba(14, 62, 113, 0.18);
}

.hero::before {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: linear-gradient(100deg, rgba(5, 22, 52, 0.98) 5%, rgba(8, 39, 86, 0.88) 47%, rgba(12, 86, 151, 0.75)), url("../images/background_image.png") center 57% / cover;
    content: "";
    opacity: 0.92;
}

.hero::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(circle at 74% 45%, rgba(37, 193, 255, 0.22), transparent 28%), linear-gradient(90deg, transparent 53%, rgba(52, 174, 255, 0.13) 100%);
    content: "";
}

.hero-circuit {
    position: absolute;
    inset: 0 0 0 43%;
    z-index: -1;
    opacity: 0.38;
    background-image: linear-gradient(90deg, transparent 98%, rgba(102, 202, 255, 0.45) 99%), linear-gradient(0deg, transparent 98%, rgba(102, 202, 255, 0.45) 99%);
    background-size: 88px 88px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 5%, transparent 74%);
    mask-image: radial-gradient(ellipse at center, #000 5%, transparent 74%);
}

.hero-content {
    position: relative;
    z-index: 2;
    width: 53%;
    padding: 5.4rem 0 2rem 7.5%;
}

.eyebrow, .section-kicker {
    color: #74dcff;
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.eyebrow { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 1.35rem; }
.eyebrow-dot { width: 0.42rem; height: 0.42rem; border-radius: 50%; background: #68dcff; box-shadow: 0 0 0.8rem #68dcff; }

h1 { margin-bottom: 1.35rem; font-size: clamp(2.6rem, 4.35vw, 4.7rem); line-height: 1.02; letter-spacing: -0.055em; }
h1 span { color: #7ddcff; }
.hero-description { max-width: 31rem; color: #bfd2eb; font-size: 0.98rem; line-height: 1.65; }
.hero-actions { display: flex; gap: 0.8rem; margin-top: 1.8rem; }
.button { display: inline-flex; align-items: center; gap: 0.8rem; border-radius: 0.55rem; padding: 0.88rem 1.18rem; font-size: 0.82rem; font-weight: 700; text-decoration: none; transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; }
.button:hover { transform: translateY(-3px); }
.button-primary { background: #dff7ff; color: #06234e; box-shadow: 0 0.4rem 1.2rem rgba(76, 206, 255, 0.22); }
.button-ghost { border: 1px solid rgba(207, 232, 255, 0.45); color: #f4fbff; }
.button-ghost:hover { background: rgba(255,255,255,0.1); }

.hero-stats { display: flex; gap: clamp(1.2rem, 3vw, 3.2rem); margin-top: 3rem; }
.stat { display: grid; gap: 0.22rem; }
.stat strong { font-size: 1.25rem; line-height: 1; }.stat strong span, .project-badge strong span { color: #73ddff; }
.stat small { color: #9bb7da; font-size: 0.62rem; }

.hero-visual { position: absolute; z-index: 1; top: 3.5rem; right: 1%; width: 59%; height: 84%; }
.hero-visual img { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 1rem 1.3rem rgba(0, 202, 255, 0.2)); animation: float 7s ease-in-out infinite; }
.visual-orbit { position: absolute; border: 1px solid rgba(104, 220, 255, 0.25); border-radius: 50%; transform: rotate(-22deg); }
.orbit-one { width: 42%; height: 15%; top: 50%; left: 31%; }.orbit-two { width: 52%; height: 21%; top: 45%; left: 26%; }
.scan-line { position: absolute; top: 20%; left: 12%; width: 60%; height: 1px; background: linear-gradient(90deg, transparent, #6bddff, transparent); box-shadow: 0 0 1rem #56d7ff; opacity: 0.5; animation: scan 5s ease-in-out infinite; }

.trust-panel { position: absolute; right: 6.5%; bottom: 2.25rem; z-index: 3; display: flex; align-items: center; gap: 1.1rem; }
.trust-label { color: #8caed4; font-size: 0.62rem; max-width: 5rem; text-transform: uppercase; letter-spacing: 0.08em; }
.trust-rating { display: grid; gap: 0.18rem; padding-left: 1rem; border-left: 1px solid rgba(159, 210, 255, 0.3); }.trust-rating strong { font-size: 0.82rem; }.trust-rating small { color: #94add0; font-size: 0.57rem; }.stars { color: #ffd66d; font-size: 0.7rem; letter-spacing: 0.08em; }.stars-soft { color: #a4d9ef; }

.innovation-card { position: relative; z-index: 5; display: grid; grid-template-columns: 0.87fr 1.13fr; width: 82%; min-height: 340px; margin: -4rem auto 0; overflow: hidden; border: 1px solid rgba(105, 194, 237, 0.4); border-radius: 1.2rem; background: linear-gradient(110deg, rgba(249, 253, 255, 0.97), rgba(214, 245, 255, 0.94)); box-shadow: 0 1.5rem 3rem rgba(12, 72, 118, 0.18); }
.innovation-copy { padding: 2.2rem 1rem 2rem 2rem; }.section-kicker { color: #1670a8; margin-bottom: 0.65rem; }.innovation-copy h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.08; letter-spacing: -0.05em; }.innovation-copy h2 span { color: #1a9ed0; }.innovation-copy > p:not(.section-kicker) { max-width: 22rem; margin: 0.85rem 0 1.25rem; color: #3c5974; font-size: 0.83rem; line-height: 1.55; }.feature-list { display: flex; flex-wrap: wrap; gap: 0.5rem; max-width: 27rem; margin-bottom: 1.4rem; }.feature-list span { padding: 0.48rem 0.7rem; border: 1px solid #d1e6ef; border-radius: 2rem; color: #3a5871; background: rgba(255,255,255,0.63); font-size: 0.65rem; }.feature-list b { margin-right: 0.28rem; color: #1489bd; }.button-dark { background: #082a5a; color: #fff; }.button-dark:hover { background: #104483; }
.innovation-visual { position: relative; min-height: 340px; overflow: hidden; }.innovation-visual::after { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(217, 248, 255, 0.35), transparent 28%); content: ""; }.innovation-visual img { width: 100%; height: 100%; object-fit: cover; }.project-badge { position: absolute; z-index: 2; right: 12%; bottom: 1.8rem; display: grid; min-width: 10rem; padding: 1rem; border: 1px solid rgba(115, 219, 255, 0.6); border-radius: 0.85rem; background: rgba(5, 34, 74, 0.92); color: #fff; box-shadow: 0 0.8rem 2rem rgba(5, 34, 74, 0.28); }.project-badge small { color: #a4c9e3; font-size: 0.55rem; }.project-badge strong { margin-top: 0.25rem; font-size: 1.45rem; }.project-badge em { color: #b4d4e7; font-size: 0.63rem; font-style: normal; }.badge-line { display: flex; gap: 0.25rem; margin-top: 0.65rem; }.badge-line i { width: 1rem; height: 0.18rem; border-radius: 1rem; background: #31cfff; }.badge-line i:nth-child(2), .badge-line i:nth-child(4) { opacity: 0.4; }

.software-showcase {
    position: relative;
    margin-top: 5.5rem;
    padding: 3.5rem 0 3.75rem;
    overflow: hidden;
    border: 1px solid rgba(105, 194, 237, 0.3);
    border-radius: 1.7rem;
    background:
        radial-gradient(circle at 12% 12%, rgba(75, 205, 255, 0.16), transparent 27%),
        linear-gradient(135deg, #061a3a 0%, #0a2d5a 68%, #0c4978 100%);
    box-shadow: 0 1.7rem 3.5rem rgba(14, 62, 113, 0.16);
    color: #fff;
}

.software-showcase::before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(90deg, transparent 98%, rgba(102, 202, 255, 0.16) 99%), linear-gradient(0deg, transparent 98%, rgba(102, 202, 255, 0.16) 99%);
    background-size: 72px 72px;
    content: "";
    opacity: 0.3;
    -webkit-mask-image: linear-gradient(90deg, #000, transparent 80%);
    mask-image: linear-gradient(90deg, #000, transparent 80%);
}

.software-heading {
    position: relative;
    z-index: 1;
    width: min(100% - 3rem, 660px);
    margin: 0 auto 2.4rem;
    text-align: center;
}

.software-heading .section-kicker { color: #74dcff; }
.software-heading h2 { margin-top: 0.65rem; font-size: clamp(1.75rem, 3vw, 2.65rem); line-height: 1.08; letter-spacing: -0.045em; }
.software-heading h2 span { color: #74dcff; }
.software-heading > p:last-child { max-width: 35rem; margin: 0.85rem auto 0; color: #a9c3e1; font-size: 0.88rem; line-height: 1.65; }

.software-marquee {
    position: relative;
    z-index: 1;
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.software-track {
    display: flex;
    width: max-content;
    will-change: transform;
    animation: software-scroll 30s linear infinite;
}

.software-marquee:hover .software-track,
.software-marquee:focus-within .software-track { animation-play-state: paused; }

.software-list {
    display: flex;
    flex-shrink: 0;
    align-items: stretch;
    gap: 1rem;
    padding: 0.5rem 1rem 0.75rem 0;
    list-style: none;
}

.software-card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(180px, 17vw, 225px);
    height: 112px;
    padding: 1.35rem 1.65rem;
    border: 1px solid rgba(174, 223, 255, 0.24);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 0.9rem 2rem rgba(0, 10, 34, 0.2);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.software-card:hover {
    transform: translateY(-5px);
    border-color: rgba(116, 220, 255, 0.8);
    box-shadow: 0 1.1rem 2.2rem rgba(0, 10, 34, 0.3), 0 0 1.4rem rgba(49, 207, 255, 0.16);
}

.software-card img { display: block; width: 100%; max-width: 165px; height: 58px; object-fit: contain; }
.software-card--icon { gap: 0.85rem; }
.software-card--icon img { flex: 0 0 auto; width: 44px; height: 44px; }
.software-card--icon span { color: #15365e; font-size: 0.82rem; font-weight: 700; line-height: 1.15; }

@keyframes software-scroll { to { transform: translateX(-50%); } }

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.8rem); } }
@keyframes scan { 0%, 100% { transform: translateY(0); opacity: 0; } 40%, 60% { opacity: 0.65; } 85% { transform: translateY(18rem); opacity: 0; } }

@media (max-width: 1050px) { .hero-content { padding-left: 6%; }.hero-visual { right: -8%; width: 65%; opacity: 0.75; }.innovation-card { width: 90%; } }
@media (max-width: 760px) { .main { width: calc(100% - 1rem); margin-bottom: 3rem; }.hero { min-height: 780px; border-radius: 1.2rem; }.hero-content { width: 100%; padding: 3rem 1.5rem 0; }.hero-content h1 { font-size: clamp(2.3rem, 10vw, 3.8rem); }.hero-description { max-width: 25rem; }.hero-visual { top: 18rem; right: -19%; width: 105%; opacity: 0.85; }.hero-stats { position: absolute; top: 34rem; left: 1.5rem; right: 1.5rem; justify-content: space-between; margin-top: 0; gap: 0.5rem; }.stat strong { font-size: 1rem; }.trust-panel { right: 1.5rem; bottom: 2rem; left: 1.5rem; justify-content: space-between; }.trust-label { display: none; }.innovation-card { grid-template-columns: 1fr; width: 94%; margin-top: -2rem; }.innovation-copy { padding: 1.7rem 1.3rem; }.innovation-visual { min-height: 255px; }.project-badge { right: 1rem; bottom: 1rem; } }
@media (max-width: 560px) { .header { padding: 0.75rem; }.navbar { min-height: 3.7rem; }.logo { font-size: 0.9rem; }.hero-actions { flex-wrap: wrap; }.hero-stats { top: 35rem; }.trust-panel { gap: 0.5rem; }.trust-rating { padding-left: 0.5rem; }.trust-rating small { font-size: 0.5rem; }.innovation-card { margin-top: -1rem; }.feature-list span { font-size: 0.6rem; } }

@media (max-width: 1050px) {
    .navbar {
        flex-wrap: wrap;
        padding: 0.75rem 1rem;
    }

    .nav-links {
        order: 3;
        flex-basis: 100%;
        justify-content: center;
        flex-wrap: wrap;
        margin: 0.25rem 0 0;
    }
}

@media (max-width: 560px) {
    .header {
        padding: 0.75rem;
    }

    .nav-actions {
        gap: 0.75rem;
        padding-left: 0.75rem;
    }

    .buy-button {
        padding: 0.6rem 0.8rem;
        font-size: 0.85rem;
    }

    .nav-links {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 0.8rem 1rem;
        width: 100%;
        padding: 0.35rem 0 0.2rem;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .nav-links::-webkit-scrollbar { display: none; }

    .nav-links a {
        font-size: 0.85rem;
    }

    .software-showcase {
        margin-top: 3.5rem;
        padding: 2.75rem 0 3rem;
        border-radius: 1.2rem;
    }

    .software-heading { width: calc(100% - 2rem); margin-bottom: 1.8rem; }
    .software-heading > p:last-child { font-size: 0.8rem; }
    .software-track { animation-duration: 24s; }
    .software-list { gap: 0.75rem; padding-right: 0.75rem; }
    .software-card { width: 165px; height: 94px; padding: 1rem 1.2rem; }
    .software-card img { height: 48px; }
    .software-card--icon { gap: 0.6rem; }
    .software-card--icon img { width: 36px; height: 36px; }
    .software-card--icon span { font-size: 0.7rem; }
}

@media (prefers-reduced-motion: reduce) {
    .software-track { animation-play-state: paused; }
}