/* Horizon Atlas page — reuse the existing site header and footer */
@import url('/css/home.css');

/* Page-specific styles */
.atlas-wrap {
    width: min(100% - 64px,1440px);
    margin-inline: auto
}

.atlas-hero {
    min-height: 290px;
    background: #151a2d url('/images/atlas/atlas-hero-bg.png') center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 55px 24px
}

.atlas-hero-logo {
    width: min(420px,75vw);
    height: auto;
    object-fit: contain
}

.atlas-starry {
    color: #fff;
    background: #090d1c url('/images/backgrounds/GalaxyBackground.png') center top/cover no-repeat
}

.atlas-overview {
    padding-block: 55px 70px
}

    .atlas-overview h1 {
        font-size: 24px;
        font-weight: 400;
        margin-bottom: 15px
    }

    .atlas-overview p {
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 60px
    }

.atlas-screenshot {
    display: block;
    width: 100%;
    height: auto;
    min-height: 220px;
    background: #f8f9ff;
    object-fit: contain;
    box-shadow: 0 8px 28px #0008
}

.atlas-infrastructure {
    border-top: 1px solid #ffffff4d;
    padding: 42px 0 50px
}

.atlas-infra-heading {
    text-align: center;
    margin-bottom: 65px
}

    .atlas-infra-heading h2 {
        font-size: clamp(26px,3.1vw,43px);
        font-weight: 300;
        margin-bottom: 12px
    }

    .atlas-infra-heading p {
        font-size: 17px;
        line-height: 1.5;
        color: #e3e5ef
    }

.atlas-feature-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 55px;
    max-width: 1240px;
    margin: 0 auto 65px
}

.atlas-feature {
    background: linear-gradient(135deg,#202638ed,#161b2bed);
    border: 1px solid #ffffff2e;
    box-shadow: 0 12px 25px #0007;
    text-align: center;
    padding: 30px 20px 25px;
    min-height: 330px;
    display: flex;
    flex-direction: column;
    align-items: center
}

.atlas-feature-icon {
    height: 145px;
    display: grid;
    place-items: center;
    color: white;
    font-size: 115px;
    line-height: 1;
    font-weight: 400
}

.atlas-code-icon {
    font-size: 84px;
    font-weight: 700
}

.atlas-browser-icon {
    font-size: 120px
}

.atlas-feature h3 {
    font-size: 19px;
    font-weight: 400;
    margin: 10px 0 16px
}

.atlas-feature p {
    font-size: 15px;
    color: #d3d6e0;
    line-height: 1.55;
    margin: 0
}

.atlas-consultation {
    font-size: 20px;
    line-height: 1.65;
    margin: 30px 0 0
}

.atlas-capabilities {
    padding-bottom: 70px
}

.atlas-capability {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    align-items: center;
    gap: 35px;
    min-height: 245px;
    border-bottom: 2px solid #ffffffa1
}

.atlas-capability-reverse {
    grid-template-columns: .8fr 1.2fr
}

.atlas-capability p {
    font-size: 22px;
    line-height: 1.7;
    max-width: 760px;
    margin: 0
}

.atlas-symbol {
    font-size: 130px;
    text-align: center;
    color: white;
    line-height: 1
}

.atlas-last-message {
    text-align: center;
    padding: 65px 0 10px
}

    .atlas-last-message p {
        font-size: 23px;
        margin-bottom: 45px
    }

.atlas-reach-button {
    display: inline-block;
    background: #9da8c2;
    color: #18254a;
    font-weight: 700;
    font-size: 20px;
    border-radius: 13px;
    padding: 15px 30px;
    box-shadow: 0 5px 12px #0008
}

    .atlas-reach-button:hover {
        background: #c2cce0
    }

@media(max-width:800px) {
    .atlas-wrap {
        width: min(100% - 36px,1440px)
    }

    .atlas-hero {
        min-height: 210px
    }

    .atlas-overview {
        padding-block: 35px 50px
    }

        .atlas-overview p {
            margin-bottom: 30px
        }

    .atlas-feature-grid {
        gap: 15px
    }

    .atlas-feature {
        padding: 18px 12px;
        min-height: 290px
    }

    .atlas-feature-icon {
        font-size: 75px;
        height: 100px
    }

    .atlas-code-icon {
        font-size: 50px
    }

    .atlas-feature h3 {
        font-size: 16px
    }

    .atlas-feature p {
        font-size: 13px
    }

    .atlas-capability p {
        font-size: 17px
    }

    .atlas-symbol {
        font-size: 90px
    }
}

@media(max-width:600px) {
    .atlas-feature-grid {
        grid-template-columns: 1fr;
        max-width: 430px
    }

    .atlas-feature {
        min-height: 0
    }

    .atlas-capability, .atlas-capability-reverse {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 35px 0
    }

        .atlas-capability-reverse .atlas-symbol {
            order: 2
        }

        .atlas-capability p {
            font-size: 17px
        }

    .atlas-symbol {
        font-size: 75px
    }

    .atlas-consultation {
        font-size: 17px
    }

    .atlas-infra-heading {
        margin-bottom: 35px
    }
}

.portal-video {
    display: block;
    width: 100%;
    max-width: 1400px;
    height: auto;
    margin: 30px auto 0;
    border-radius: 4px;
    object-fit: contain;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

/* ========================================
   FOOTER CONTENT LAYOUT
======================================== */

.footer-top {
    display: flex;
    align-items: flex-start;
    gap: 25px;
    margin-bottom: 30px;
}

    .footer-top img {
        width: 150px;
        height: auto;
        object-fit: contain;
        flex-shrink: 0;
    }

.footer-company-info {
    flex: 1;
}

.footer-tagline {
    font-size: 100px;
    line-height: 1.4;
    margin: 0 0 12px;
    font-weight: bold;
}

.footer-description {
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
}

/* Four footer columns */

.footer-grid {
    display: grid;
    grid-template-columns: 2.1fr 1fr 0.8fr 1.15fr;
    gap: 30px;
    align-items: start;
}

/* Contact form */

.footer-contact {
    min-width: 0;
}

    .footer-contact form {
        padding: 15px;
        border-radius: 10px;
    }

    .footer-contact h3 {
        font-size: 13px;
        margin: 0 0 12px;
        font-weight: 600;
        color: black;
    }

.footer-form-fields {
    display: grid;
    grid-template-columns: 1fr 1.8fr;
    gap: 10px;
}

.footer-form-left {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-form-fields input,
.footer-form-fields textarea {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 13px;
    padding: 10px;
}

.footer-form-fields textarea {
    height: 100%;
    min-height: 92px;
    resize: vertical;
}

.footer-contact button {
    display: block;
    width: 60%;
    margin: 15px auto 0;
    padding: 10px;
    cursor: pointer;
}

/* Links */

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

    .footer-links h3 {
        margin: 0 0 5px;
        font-size: 16px;
    }

    .footer-links a {
        display: block;
        font-size: 13px;
        text-decoration: none;
    }

/* Contact details */

.footer-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-detail {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.5;
}

    .footer-detail a {
        color: inherit;
        text-decoration: none;
    }

.footer-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #91c65b;
    color: #fff;
    font-size: 13px;
}



/* Copyright */

.footer .copyright {
    text-align: center;
    margin-top: 40px;
    font-size: 12px;
}

/* Responsive */

@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 30px;
    }
}

@media (max-width: 600px) {
    .footer-top {
        flex-direction: column;
    }

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

    .footer-form-fields {
        grid-template-columns: 1fr;
    }

        .footer-form-fields textarea {
            min-height: 100px;
        }
}


/* =====================================
   ATLAS ANIMATED SPACE BACKGROUND
===================================== */

.atlas-starry {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: radial-gradient( circle at 50% 25%, rgba(70, 130, 190, 0.22), transparent 45% ), linear-gradient( 135deg, #050f1c 0%, #0a1e35 50%, #133d60 100% );
}

    /* Keep all Atlas content above the stars */
    .atlas-starry > section {
        position: relative;
        z-index: 2;
    }

/* Background container */
.atlas-sky {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

/* Soft blue background glow */
.atlas-nebula {
    position: absolute;
    width: 1000px;
    height: 1000px;
    left: 50%;
    top: 35%;
    transform: translate(-50%, -50%);
    background: radial-gradient( circle, rgba(37, 109, 173, 0.16), rgba(37, 109, 173, 0.07) 35%, transparent 70% );
    filter: blur(40px);
}

/* Three star layers */
.atlas-star-layer {
    position: absolute;
    width: 120%;
    height: 120%;
    left: -10%;
    top: -10%;
    will-change: transform;
}

.atlas-star {
    position: absolute;
    border-radius: 50%;
    background: white;
    pointer-events: none;
}

    .atlas-star.small {
        width: 2px;
        height: 2px;
        opacity: 0.55;
    }

    .atlas-star.medium {
        width: 3px;
        height: 3px;
        opacity: 0.8;
        box-shadow: 0 0 4px rgba(255,255,255,0.8);
    }

    .atlas-star.large {
        width: 5px;
        height: 5px;
        opacity: 1;
        box-shadow: 0 0 6px rgba(255,255,255,0.95), 0 0 12px rgba(120,190,255,0.6);
    }

/* Twinkling */
.atlas-twinkle {
    animation: atlasTwinkle 3s ease-in-out infinite alternate;
}

@keyframes atlasTwinkle {
    from {
        opacity: 0.35;
        scale: 0.8;
    }

    to {
        opacity: 1;
        scale: 1.25;
    }
}

/* Shooting stars */
.atlas-shooting-star {
    position: absolute;
    width: 180px;
    height: 2px;
    background: linear-gradient( 90deg, transparent 0%, rgba(255,255,255,0.12) 30%, rgba(255,255,255,0.75) 82%, white 100% );
    border-radius: 100%;
    opacity: 0;
    filter: drop-shadow( 0 0 6px rgba(255,255,255,0.9) );
    transform-origin: right center;
    animation: atlasShootingStar 1.25s linear forwards;
}

    .atlas-shooting-star::after {
        content: "";
        position: absolute;
        width: 6px;
        height: 6px;
        right: -2px;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 50%;
        background: white;
        box-shadow: 0 0 8px white, 0 0 15px rgba(110,190,255,0.9), 0 0 30px rgba(110,190,255,0.5);
    }

@keyframes atlasShootingStar {
    0% {
        opacity: 0;
        transform: translate3d(0,0,0) rotate(var(--angle));
    }

    8%, 72% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate3d( var(--travel-x), var(--travel-y), 0 ) rotate(var(--angle));
    }
}

@media (prefers-reduced-motion: reduce) {
    .atlas-twinkle {
        animation: none;
    }

    .atlas-shooting-star {
        display: none;
    }
}

/* ========================================
   DESKTOP / MOBILE LOGO SWITCHING
======================================== */

/* DESKTOP */
.site-header .navbar > a > img:first-child,
.footer-top > img:first-child {
    display: block;
}

.site-header .navbar > a > img.logo-mobile,
.footer-top > img.logo-mobile {
    display: none;
}

/* MOBILE */
@media (max-width: 750px) {

    .site-header .navbar > a > img:first-child,
    .footer-top > img:first-child {
        display: none;
    }

    .site-header .navbar > a > img.logo-mobile,
    .footer-top > img.logo-mobile {
        display: block;
    }

    .site-header .navbar > a > img.logo-mobile {
        width: 120px;
        height: auto;
    }

    .footer-top > img.logo-mobile {
        width: 150px;
        height: auto;
    }
}

/* Hide Solutions and Quick Links on mobile */
@media (max-width: 750px) {
    .footer-grid > .footer-links {
        display: none;
    }
}



/* Mobile Get in Touch hidden on desktop */
.nav-contact-mobile {
    display: none;
}

@media (max-width: 750px) {

    .navbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

        /* Logo on the left */
        .navbar > a:first-child {
            flex-shrink: 0;
        }

    /* Get in Touch on the right */
    .nav-contact-mobile {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        background: #111934;
        color: white;
        padding: 12px 16px;
        border-radius: 18px;
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
    }

    /* Navigation links on second row */
    .navbar .nav-links {
        display: flex;
        flex-basis: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }

        /* Hide ONLY the original Get in Touch */
        .navbar .nav-links .nav-contact {
            display: none;
        }

        .navbar .nav-links a {
            font-size: 11px;
        }
}