/* ─────────────────────────────────────────────
   Global Styles
──────────────────────────────────────────── */
body{margin:0;font-family:'Inter', sans-serif;background-color:#0d1a2d;color:#ffffff;overflow-x:hidden;}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.highlight-core {
    color: #0FCCC6;
    font-weight: 800; /* Made thicker */
}

/* ─────────────────────────────────────────────
   Layout: Container & Graphic (Adjusted for new layout)
──────────────────────────────────────────── */
main {
    position: relative;
    z-index: 1; /* Ensure content is above the canvas */
    padding-top: 50px; /* Space for the fixed header */
}

/* ─────────────────────────────────────────────
   Top Navigation Bar
──────────────────────────────────────────── */
.top-bar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    background-color:rgba(0, 0, 0, 0.7); /* Semi-transparent black */
    padding:1rem 2rem;
    border-bottom:1px solid #333;
    flex-wrap:wrap;
    position: fixed; /* Keep top bar fixed */
    width: 100%;
    top: 0;
    left: 0;
    z-index: 100; /* Ensure it's above other content */
    box-sizing: border-box; /* Include padding in width */
}
.brand{display:flex;align-items:center;gap:1rem;}
.brand img{height:40px; /* Smaller logo */
    filter: brightness(1.5); /* Make logo brighter to stand out on dark background */
}
.brand-text{display:flex;flex-direction:column;color:white;}
.brand-name{font-weight:800;font-size:1.2rem; /* Smaller brand name */
    display: flex; /* Make it a flex container to align "Quantum" and "LeapLabs" */
    align-items: center;
    gap: 0.2em; /* Space between words */
}
.brand-name .highlight-core {
    margin-left: -0.2em; /* Adjust overlap if needed */
}
.brand-subtitle{
    font-family:'Stint Ultra Expanded', cursive; /* Reverted font-family */
    font-weight:bold;
    font-size:0.9rem; /* Reverted font-size */
    color:#ffa500; /* Reverted color */
    margin-top: 0.1em;
}
.brand-subtitle a {color: inherit;font: inherit;text-decoration: none;}
.brand-subtitle a:hover { text-decoration: underline;}
.top-nav{display:flex;gap:1.5rem; /* Increased gap */
    flex-wrap:wrap;
    margin-top:0; /* Align with header */
}
.top-nav a{
    color:#ffffff; /* White text for nav links */
    background-color:transparent; /* No background */
    padding:0.5rem 0; /* Only vertical padding */
    text-decoration:none;
    border-radius:0; /* No border radius */
    font-weight:bold;
    transition:color 0.3s ease; /* Transition for color change */
    position: relative; /* For underline effect */
}
.top-nav a:hover{
    color:#0FCCC6; /* Highlight color on hover */
}
.top-nav a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -3px; /* Position below text */
    left: 0;
    background-color: #0FCCC6;
    transition: width 0.3s ease-in-out;
}
.top-nav a:hover::after {
    width: 100%;
}

.button{
    background-color:#0FCCC6;
    color:#fff;
    padding:0.8rem 1.8rem; /* Larger button */
    border-radius:5px; /* Slightly rounded corners */
    text-decoration:none;
    font-weight:600; /* More prominent */
    font-size:1rem;
    display: inline-block; /* Allow padding and margin */
    margin-top: 20px; /* Space from heading */
    transition: background-color 0.3s ease;
}
.button:hover {
    background-color: #0c9e97; /* Darker shade on hover */
}

/* ─────────────────────────────────────────────
   Hero Section
──────────────────────────────────────────── */
.hero-section {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 70vh; /* Make hero section tall enough */
    text-align: center;
    padding: 100px 20px 50px 20px; /* Top padding to clear fixed header */
    box-sizing: border-box;
    position: relative; /* For z-index context */
    z-index: 2; /* Ensure hero content is above canvas */
}

.hero-content {
    max-width: 800px;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.4); /* Subtle background for readability */
    border-radius: 10px;
}

.hero-content h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    color: #ffffff;
    text-shadow: 0 0 10px rgba(0, 204, 255, 0.5); /* Subtle glow */
}

/* ─────────────────────────────────────────────
   Services Grid
──────────────────────────────────────────── */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive grid columns */
    gap: 30px; /* Space between cards */
    padding: 50px 20px;
    max-width: 1200px;
    margin: 0 auto;
    position: relative; /* For z-index context */
    z-index: 2; /* Ensure cards are above canvas */
}

.service-card {
    background-color: rgba(25, 38, 59, 0.9); /* Darker blue with transparency */
    border-radius: 10px;
    padding: 25px;
    text-align: left;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    border: 1px solid #1a2c4a; /* Subtle border */
    display: flex; /* Flex container for content */
    flex-direction: column;
    justify-content: space-between; /* Push button to bottom */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

.service-card h3 {
    font-size: 1.8rem;
    color: #0FCCC6; /* Highlight color for headings */
    margin-bottom: 10px;
}

.service-card p {
    font-size: 1rem;
    color: #cccccc;
    line-height: 1.6;
    flex-grow: 1; /* Allow paragraph to take up available space */
    margin-bottom: 20px; /* Space before button */
}

.card-button {
    background-color: #0FCCC6; /* Same as main button */
    color: #fff;
    padding: 0.6rem 1.2rem;
    border-radius: 3px;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    display: inline-block; /* For button styling */
    align-self: flex-start; /* Align button to the left within the card */
    transition: background-color 0.3s ease;
}

.card-button:hover {
    background-color: #0c9e97;
}

/* Placeholder card for grid alignment */
.service-card.placeholder {
    background-color: transparent;
    border: none;
    box-shadow: none;
}


/* ─────────────────────────────────────────────
   Responsive graphic: 1126px till 769px (Adjusted)
──────────────────────────────────────────── */
@media (max-width:1126px) {
    .hero-content h1 {
        font-size: 3rem;
    }
}


/* ─────────────────────────────────────────────
   Responsive: ≤768px (Adjusted)
──────────────────────────────────────────── */
@media(max-width:768px){
    .top-bar {
        flex-direction: column;
        align-items: center;
        padding: 1rem;
    }
    .brand {
        margin-bottom: 1rem;
    }
    .top-nav {
        gap: 0.8rem;
        justify-content: center;
    }
    .top-nav a {
        font-size: 0.9rem;
        padding: 0.5rem 0.8rem;
    }
    .hero-section {
        min-height: 60vh;
        padding-top: 150px; /* More space for stacked header */
    }
    .hero-content h1 {
        font-size: 2.5rem;
    }
    .services-grid {
        grid-template-columns: 1fr; /* Stack cards on small screens */
        padding: 30px 15px;
    }
    .service-card {
        padding: 20px;
    }
    .service-card h3 {
        font-size: 1.5rem;
    }
    .service-card p {
        font-size: 0.9rem;
    }
}

/* ─────────────────────────────────────────────
   Responsive: ≤480px (Optional decor hiding)
──────────────────────────────────────────── */
 @media(max-width:480px){
    .hero-content h1 {
        font-size: 2rem;
    }
    .button {
        padding: 0.6rem 1.2rem;
        font-size: 0.9rem;
    }
    .brand img{height:35px;}
    .brand-name{font-size:1rem;}
    .brand-subtitle{font-size:0.6rem;font-family:monospace;}
 }