/* =========================================================
   NAVELYRA WEBSITE
   EOS-INSPIRED DESIGN SYSTEM
   ========================================================= */


/* =========================================================
   COLOR SYSTEM
   ========================================================= */

:root {
    --background: #07111C;

    --surface: #0C1826;
    --surface-light: #112235;

    --text: #F4F8FC;
    --muted: #8FA9C1;

    --accent: #69B7F5;
    --accent-soft: #A9D7FA;

    --border: rgba(143, 169, 193, 0.16);
}


/* =========================================================
   GLOBAL RESET
   ========================================================= */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html {
    scroll-behavior: smooth;
}


body {
    background:
        radial-gradient(
            circle at 75% 15%,
            rgba(105, 183, 245, 0.10),
            transparent 30%
        ),
        var(--background);

    color: var(--text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    line-height: 1.6;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.navbar {
    width: min(1200px, calc(100% - 48px));
    height: 80px;

    margin: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom: 1px solid var(--border);
}


 .brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    color: var(--text);
    text-decoration: none;

    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.18em;
}

.brand-symbol {
    width: 34px;
    height: 34px;

    object-fit: contain;
    flex-shrink: 0;
}


nav {
    display: flex;
    gap: 30px;
}


nav a {
    color: var(--muted);

    text-decoration: none;

    font-size: 14px;

    transition: color 0.2s ease;
}


nav a:hover {
    color: var(--accent-soft);
}


/* =========================================================
   HERO
   ========================================================= */

.hero {
    position: relative;

    width: min(1200px, calc(100% - 48px));
    min-height: 720px;

    margin: auto;

    display: flex;
    align-items: center;

    overflow: hidden;
}


.hero-content {
    position: relative;

    z-index: 2;

    max-width: 780px;
}


.eyebrow,
.section-label {
    color: var(--accent);

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 0.18em;
}


.hero h1 {
    max-width: 850px;

    margin-top: 22px;

    font-size: clamp(48px, 6vw, 82px);

    line-height: 1.02;

    letter-spacing: -0.045em;
}


.hero-description {
    max-width: 650px;

    margin-top: 28px;

    color: var(--muted);

    font-size: 19px;

    line-height: 1.7;
}


/* =========================================================
   HERO BUTTON
   ========================================================= */

.primary-button {
    display: inline-block;

    margin-top: 36px;

    padding: 13px 20px;

    border: 1px solid rgba(105, 183, 245, 0.38);

    border-radius: 100px;

    background: rgba(105, 183, 245, 0.09);

    color: var(--text);

    text-decoration: none;

    font-size: 14px;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}


.primary-button:hover {
    background: rgba(105, 183, 245, 0.16);

    border-color: rgba(105, 183, 245, 0.75);

    transform: translateY(-1px);
}


/* =========================================================
   EOS BLUE GLOW
   ========================================================= */

.orb {
    position: absolute;

    right: -120px;

    width: 520px;
    height: 520px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 35%,
            rgba(105, 183, 245, 0.46),
            rgba(50, 105, 160, 0.20) 45%,
            rgba(7, 17, 28, 0) 72%
        );

    filter: blur(2px);
}


/* =========================================================
   GENERAL SECTIONS
   ========================================================= */

.section {
    width: min(1200px, calc(100% - 48px));

    margin: auto;

    padding: 120px 0;

    border-top: 1px solid var(--border);
}


.section h2 {
    max-width: 820px;

    margin-top: 18px;

    font-size: clamp(34px, 4vw, 56px);

    line-height: 1.1;

    letter-spacing: -0.035em;
}


.section-copy {
    max-width: 700px;

    margin-top: 30px;

    color: var(--muted);

    font-size: 18px;
}


/* =========================================================
   TECHNOLOGY CARDS
   ========================================================= */

.cards {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 18px;

    margin-top: 56px;
}


.card {
    min-height: 400px;

    padding: 32px;

    border: 1px solid var(--border);

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(105, 183, 245, 0.055),
            rgba(255, 255, 255, 0.012)
        );

    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        background 0.2s ease;
}


.card:hover {
    transform: translateY(-3px);

    border-color: rgba(105, 183, 245, 0.30);

    background:
        linear-gradient(
            145deg,
            rgba(105, 183, 245, 0.085),
            rgba(255, 255, 255, 0.018)
        );
}


.card-number {
    color: var(--accent);

    font-size: 12px;

    letter-spacing: 0.12em;
}


.card h3 {
    margin-top: 55px;

    font-size: 32px;

    letter-spacing: -0.03em;
}


.card-subtitle {
    min-height: 72px;

    margin-top: 8px;

    color: var(--text);

    font-size: 14px;

    font-weight: 600;
}


.card > p:last-child {
    margin-top: 26px;

    color: var(--muted);

    font-size: 15px;
}


/* =========================================================
   DEVELOPMENT GRID
   ========================================================= */

.development-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 12px;

    margin-top: 50px;
}


.development-grid span {
    padding: 20px 22px;

    border: 1px solid var(--border);

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            rgba(105, 183, 245, 0.045),
            var(--surface)
        );

    color: #C7D9E8;

    font-size: 14px;

    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}


.development-grid span:hover {
    border-color: rgba(105, 183, 245, 0.30);

    background: var(--surface-light);
}


/* =========================================================
   FOOTER
   ========================================================= */

footer {
    width: min(1200px, calc(100% - 48px));

    margin: auto;

    padding: 60px 0 80px;

    display: flex;

    justify-content: space-between;

    gap: 30px;

    border-top: 1px solid var(--border);

    color: var(--muted);

    font-size: 13px;
}


footer strong {
    color: var(--text);

    letter-spacing: 0.15em;
}


footer p {
    margin-top: 8px;
}


.footer-status {
    text-align: right;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 800px) {

    nav {
        display: none;
    }


    .hero {
        min-height: 650px;
    }


    .orb {
        right: -300px;

        width: 500px;
        height: 500px;
    }


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


    .card {
        min-height: auto;
    }


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


    footer {
        flex-direction: column;
    }


    .footer-status {
        text-align: left;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 520px) {

    .navbar,
    .hero,
    .section,
    footer {
        width: min(100% - 32px, 1200px);
    }


    .hero h1 {
        font-size: 44px;
    }


    .section {
        padding: 90px 0;
    }


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

/* =========================================================
   CONTACT
   ========================================================= */

.contact-email {
    display: inline-block;

    margin-top: 28px;

    color: var(--accent);

    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: 600;

    text-decoration: none;

    border-bottom: 1px solid rgba(105, 183, 245, 0.35);

    transition:
        color 0.2s ease,
        border-color 0.2s ease;
}

.contact-email:hover {
    color: var(--accent-soft);

    border-color: var(--accent-soft);
}