/* Modern Reset & Base Variables */
:root {
    --bg-primary: #0a192f;
    --bg-secondary: #112240;
    --bg-card: rgba(17, 34, 64, 0.7);
    --text-primary: #ccd6f6;
    --text-heading: #e6f1ff;
    --accent: #64ffda;
    --accent-glow: rgba(100, 255, 218, 0.1);
    --danger: #ef4444;
    --warning: #f59e0b;
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;
    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    --nav-height: 80px;
}

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

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-heading);
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

/* Utilities */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.btn {
    display: inline-block;
    padding: 14px 32px;
    border-radius: 4px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition);
    border: 1px solid var(--accent);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-primary {
    background-color: rgba(100, 255, 218, 0.1);
    color: var(--accent);
}

.btn-primary:hover {
    background-color: rgba(100, 255, 218, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px var(--accent-glow);
}

.btn-solid {
    background-color: var(--accent);
    color: var(--bg-primary);
}

.btn-solid:hover {
    background-color: #4cdbb9;
    transform: translateY(-2px);
}

/* Navigation */
header {
    position: fixed;
    top: 0;
    width: 100%;
    height: var(--nav-height);
    background-color: rgba(10, 25, 47, 0.85);
    /* Glassmorphism base */
    backdrop-filter: blur(12px);
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.logo {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: -1px;
    display: flex;
    align-items: center;
    font-family: var(--font-heading);
}

.logo span {
    color: var(--text-heading);
    margin-left: 5px;
}

.nav-menu {
    display: flex;
    gap: 30px;
    align-items: center;
    /* Ensure vertical alignment of links and button */
}

/* Specific Header Button Style */
.header-btn {
    padding: 10px 24px !important;
    /* Compact padding for header */
    background: linear-gradient(135deg, var(--accent) 0%, #3b82f6 100%);
    color: var(--bg-primary) !important;
    border: none;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(100, 255, 218, 0.3);
    display: flex;
    /* Flex to center text specifically */
    align-items: center;
    justify-content: center;
    height: auto;
    font-size: 0.9rem;
    line-height: 1;
    /* Fix vertical alignment of text */
}

.header-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(100, 255, 218, 0.5);
    background: linear-gradient(135deg, #4cdbb9 0%, #2563eb 100%);
}

.nav-item {
    position: relative;
}

.nav-link {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
    padding: 10px 0;
}

.nav-link:hover {
    color: var(--accent);
}

/* Dropdown */
.dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background-color: var(--bg-secondary);
    min-width: 220px;
    padding: 15px 0;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    pointer-events: none;
    /* User interaction logic usually handled via hover */
    z-index: 10;
}

.nav-item:hover .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.dropdown-item {
    display: block;
    padding: 10px 20px;
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: var(--transition);
}

.dropdown-item:hover {
    color: var(--accent);
    background-color: rgba(100, 255, 218, 0.05);
    padding-left: 25px;
}

/* Mobile Menu Trigger */
.hamburger {
    display: none;
    cursor: pointer;
    background: none;
    border: none;
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: var(--accent);
    transition: var(--transition);
}

/* Hero Section */
.hero {
    padding-top: calc(var(--nav-height) + 60px);
    padding-bottom: 80px;
    min-height: 90vh;
    display: flex;
    align-items: center;
    position: relative;
    background: radial-gradient(circle at 80% 20%, rgba(100, 255, 218, 0.05) 0%, transparent 40%);
    overflow: hidden;
    /* Contain absolute shapes */
}

/* Abstract Animated Shapes */
.hero-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.shape-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    animation: float 10s infinite ease-in-out;
}

.shape-1 {
    top: -10%;
    right: -5%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--accent), transparent 70%);
    animation-delay: 0s;
}

.shape-2 {
    bottom: 10%;
    left: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, #3b82f6, transparent 70%);
    animation-delay: -5s;
}

.shape-3 {
    top: 40%;
    right: 30%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, #8b5cf6, transparent 70%);
    opacity: 0.2;
    animation-duration: 15s;
}

@keyframes float {
    0% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(30px, -50px) scale(1.1);
    }

    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }

    100% {
        transform: translate(0, 0) scale(1);
    }
}

.hero-content {
    max-width: 600px;
    position: relative;
    z-index: 2;
    /* Ensure content is above shapes */
}

.hero-tagline {
    color: var(--accent);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 20px;
    display: block;
    letter-spacing: 2px;
}

.hero h1 {
    font-size: 4rem;
    margin-bottom: 20px;
    line-height: 1.1;
}

.hero p {
    font-size: 1.1rem;
    margin-bottom: 40px;
    max-width: 500px;
}

.hero-buttons {
    display: flex;
    gap: 20px;
}

/* Features/Services Grid */
.section {
    padding: 100px 0;
}

.section-title {
    text-align: center;
    margin-bottom: 60px;
}

.section-title h2 {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.section-title span {
    color: var(--accent);
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.card {
    background-color: var(--bg-secondary);
    padding: 40px 30px;
    border-radius: 8px;
    transition: var(--transition);
    border: 1px solid rgba(255, 255, 255, 0.05);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.card:hover {
    transform: translateY(-10px);
    border-color: var(--accent);
    box-shadow: 0 20px 40px -15px rgba(2, 12, 27, 0.7);
}

.card-icon {
    font-size: 3rem;
    color: var(--accent);
    margin-bottom: 20px;
}

.card h3 {
    margin-bottom: 15px;
    font-size: 1.5rem;
}

.card p {
    color: #8892b0;
    font-size: 0.95rem;
    margin-bottom: 25px;
    flex-grow: 1;
    /* Pushes button down */
}

/* Pricing Cards */
.pricing-card {
    background-color: var(--bg-secondary);
    padding: 50px 30px;
    border-radius: 8px;
    text-align: center;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: var(--transition);
}

.pricing-card.featured {
    border-color: var(--accent);
    transform: scale(1.05);
    z-index: 2;
    background: linear-gradient(180deg, var(--bg-secondary) 0%, rgba(100, 255, 218, 0.02) 100%);
}

.pricing-header h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.price {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--text-heading);
    margin-bottom: 30px;
    display: block;
}

.price span {
    font-size: 1rem;
    color: var(--text-primary);
    font-weight: 400;
}

.features-list {
    text-align: left;
    margin-bottom: 40px;
    padding: 0 10px;
}

.features-list li {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: #8892b0;
}

.features-list li::before {
    content: "✓";
    color: var(--accent);
    margin-right: 10px;
    font-weight: bold;
}

/* Testimonials */
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.testimonial-card {
    background: var(--bg-card);
    padding: 30px;
    border-left: 3px solid var(--accent);
    font-style: italic;
}

.testimonial-author {
    margin-top: 20px;
    font-style: normal;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-heading);
}

.testimonial-role {
    font-size: 0.8rem;
    color: var(--accent);
    display: block;
}

/* Footer */
footer {
    background-color: #020c1b;
    padding: 60px 0 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    margin-bottom: 60px;
}

.footer-col h4 {
    margin-bottom: 20px;
    color: var(--text-heading);
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: #8892b0;
    font-size: 0.9rem;
}

.footer-links a:hover {
    color: var(--accent);
    padding-left: 5px;
}

.copyright {
    text-align: center;
    color: #8892b0;
    font-size: 0.8rem;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Contact Page Specifics */
.contact-hero {
    padding-top: 150px;
    padding-bottom: 60px;
    text-align: center;
}

.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 50px;
}

.contact-info-card {
    background-color: var(--bg-secondary);
    padding: 30px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.contact-info-card h4 {
    color: var(--accent);
    margin-bottom: 10px;
}

.form-group {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-heading);
}

input,
textarea,
select {
    width: 100%;
    padding: 12px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: var(--text-heading);
    font-family: var(--font-body);
}

input:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .hamburger {
        display: block;
        z-index: 1001;
    }

    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 70%;
        height: 100vh;
        background-color: var(--bg-secondary);
        flex-direction: column;
        justify-content: center;
        /* Center items vertically */
        align-items: center;
        /* Center items horizontally */
        gap: 20px;
        /* Reduce gap for mobile */
        transition: 0.3s;
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
        padding: 20px;
        /* Add padding */
        overflow-y: auto;
        /* Allow scrolling if content is tall */
    }

    .nav-menu.active {
        right: 0;
    }

    /* Mobile Dropdown Logic - Nested lists often better for mobile */
    .nav-item {
        width: 100%;
        text-align: center;
    }

    .dropdown {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        background-color: rgba(0, 0, 0, 0.2);
        /* Darker background for nested items */
        box-shadow: none;
        min-width: 100%;
        display: none;
        /* Hide by default on mobile, toggle with JS if needed, or show all */
        border: none;
        margin-top: 5px;
        padding-left: 0;
    }

    .nav-item:hover .dropdown {
        /* On hover doesn't work well on touch, usually click to toggle. 
            For this mockup, ensuring basic visibility or ignoring dropdowns on mobile 
            might be safer unless js is refined. Let's make them always visible for now 
            or hidden. */
        display: block;
    }

    .dropdown-item {
        padding: 8px 0;
        font-size: 0.85rem;
        color: #8892b0;
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    .contact-layout {
        grid-template-columns: 1fr;
    }
}