/*
    AuroraLink Website Styles
    -------------------------
    This stylesheet defines the look and feel of the AuroraLink landing page.  It
    includes a modern dark colour palette with vibrant gradients inspired by
    auroras.  Feel free to tweak the CSS variables at the top of this file to
    adjust the colours for your brand.  The layout is fully responsive.
*/

:root {
    /* Primary gradient colours used across the site */
    --color-primary-start: #0ca5f5;
    --color-primary-end: #7e22ce;
    /* Neutral palette for backgrounds and text */
    --color-bg: #0b1523;
    --color-surface: #13233b;
    --color-surface-alt: #1f3354;
    --color-text: #e0e7ff;
    --color-muted: #aab7d9;
    /* Accent colours */
    --color-accent: #22c55e;
    --color-error: #ef4444;
}

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

html, body {
    height: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
        Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
}

/* Container for consistent horizontal padding */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 0;
}

/* Header */
.header {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 100;
    background-color: rgba(11, 21, 35, 0.9);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.logo-text {
    font-size: 1.5rem;
    font-weight: 700;
    text-decoration: none;
    background: linear-gradient(90deg, var(--color-primary-start), var(--color-primary-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.nav ul {
    list-style: none;
    display: flex;
    gap: 2rem;
}
.nav a {
    text-decoration: none;
    color: var(--color-text);
    font-weight: 500;
    transition: color 0.2s ease;
}
.nav a:hover,
.nav a:focus {
    color: var(--color-primary-start);
}

/* Mobile menu toggle */
.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    border: none;
    background: none;
    cursor: pointer;
}
.menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background-color: var(--color-text);
    transition: transform 0.3s ease;
}

/* Hero Section */
.hero {
    padding: 7rem 0 5rem;
    text-align: center;
    background: linear-gradient(180deg, rgba(11, 21, 35, 0.1), rgba(11, 21, 35, 0.5)),
        radial-gradient(circle at center top, var(--color-primary-start), var(--color-primary-end));
    background-size: cover;
    background-position: center;
}
.hero-title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 800;
    margin-bottom: 1rem;
    background: linear-gradient(90deg, var(--color-primary-start), var(--color-primary-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hero-subtitle {
    font-size: clamp(1rem, 2.2vw, 1.5rem);
    max-width: 650px;
    margin: 0 auto 2rem;
    color: var(--color-muted);
}
.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}
/* Button styles */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary {
    background-image: linear-gradient(90deg, var(--color-primary-start), var(--color-primary-end));
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}
.btn-secondary {
    background-color: var(--color-surface);
    color: var(--color-text);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.btn:hover,
.btn:focus {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
}

/* Sections */
section {
    padding: 5rem 0;
}
section h2 {
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 2rem;
    background: linear-gradient(90deg, var(--color-primary-start), var(--color-primary-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* About */
.about p {
    max-width: 800px;
    margin: 0 auto 1rem;
    color: var(--color-muted);
}

/* Services */
.services .service-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
}
.services .card {
    background-color: var(--color-surface);
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.services .card h3 {
    margin-bottom: 1rem;
    font-size: 1.4rem;
    color: var(--color-text);
}
.services .card p {
    color: var(--color-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}
.services .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

/* Contact */
.contact .contact-form {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}
.contact .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.contact label {
    font-weight: 500;
    color: var(--color-text);
}
.contact input,
.contact textarea {
    padding: 0.8rem;
    border-radius: 6px;
    border: none;
    background-color: var(--color-surface-alt);
    color: var(--color-text);
    font-size: 1rem;
}
.contact input::placeholder,
.contact textarea::placeholder {
    color: var(--color-muted);
}
.contact button[type="submit"] {
    align-self: flex-start;
    width: fit-content;
    margin-top: 0.5rem;
}
.contact-note {
    margin-top: 1rem;
    text-align: center;
    font-size: 0.9rem;
    color: var(--color-muted);
}

/* Footer */
.footer {
    background-color: var(--color-surface);
    padding: 2rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.footer .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.footer p {
    font-size: 0.9rem;
    color: var(--color-muted);
}
.footer-links {
    list-style: none;
    display: flex;
    gap: 1rem;
}
.footer-links a {
    text-decoration: none;
    color: var(--color-muted);
    font-size: 0.9rem;
    transition: color 0.2s ease;
}
.footer-links a:hover {
    color: var(--color-primary-start);
}

/* Responsive navigation */
@media (max-width: 768px) {
    .nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: rgba(19, 35, 59, 0.96);
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.4s ease;
    }
    .nav.open {
        max-height: 300px;
    }
    .nav ul {
        flex-direction: column;
        padding: 1rem;
    }
    .nav ul li {
        margin-bottom: 1rem;
    }
    .menu-toggle {
        display: flex;
    }
    .logo-text {
        font-size: 1.25rem;
    }
}