/* Global Vars & Reset */
:root {
    --bg-dark: #0f1117;
    --bg-card: rgba(255, 255, 255, 0.03);
    --bg-card-hover: rgba(255, 255, 255, 0.07);
    --primary: #3b82f6;
    --secondary: #06b6d4;
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --border-light: rgba(255, 255, 255, 0.1);
    --font-main: 'Inter', sans-serif;
    --font-code: 'JetBrains Mono', monospace;
    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --shadow-glow: 0 0 20px rgba(59, 130, 246, 0.15);
}

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: var(--font-main);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    position: relative;
}

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

/* Nano Banano: Noise Texture Overlay */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.03;
    pointer-events: none;
    z-index: 9999;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Unique Section Backgrounds */
.bg-circuit {
    background-color: #0b0d12;
    background-image:
        radial-gradient(#1e293b 15%, transparent 16%),
        radial-gradient(#1e293b 15%, transparent 16%);
    background-size: 60px 60px;
    background-position: 0 0, 30px 30px;
    position: relative;
}

.bg-circuit::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, transparent 20%, #0f1117 90%);
    pointer-events: none;
}

/* Dynamic Aurora Gradient */
.bg-aurora {
    position: relative;
    overflow: hidden;
}

.bg-aurora::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg at 50% 50%,
            rgba(59, 130, 246, 0.05) 0deg,
            rgba(6, 182, 212, 0.05) 120deg,
            rgba(15, 23, 42, 0) 240deg,
            rgba(59, 130, 246, 0.05) 360deg);
    animation: rotateAurora 20s linear infinite;
    z-index: -1;
    filter: blur(60px);
}

@keyframes rotateAurora {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* bg-cyber-grid: Perspective terminal style grid */
.bg-cyber-grid {
    background-color: #0c0e14;
    background-image:
        linear-gradient(rgba(59, 130, 246, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59, 130, 246, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: center center;
    position: relative;
    overflow: hidden;
}

.bg-cyber-grid::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, transparent 0%, #0f1117 80%);
}

/* bg-shards: Abstract geometric nodes */
.bg-shards {
    background: #0f1117;
    position: relative;
    overflow: hidden;
}

.bg-shards::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18 L34 2 L56 18 L44 44 Z' fill='rgba(6, 182, 212, 0.03)'/%3E%3Cpath d='M70 60 L90 70 L80 90 Z' fill='rgba(59, 130, 246, 0.03)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    opacity: 0.5;
}

/* bg-deep-space: Subtle star-like dots with nebula */
.bg-deep-space {
    background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
    position: relative;
    overflow: hidden;
}

.bg-deep-space::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    box-shadow: 10vw 20vh 1px 0px rgba(255, 255, 255, 0.2),
        40vw 10vh 2px 1px rgba(255, 255, 255, 0.1),
        70vw 30vh 1px 0px rgba(255, 255, 255, 0.2),
        20vw 80vh 1px 1px rgba(255, 255, 255, 0.1),
        85vw 60vh 2px 0px rgba(255, 255, 255, 0.2);
    animation: twinkle 5s ease-in-out infinite;
}

@keyframes twinkle {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.8;
    }
}

/* Holographic Card Upgrade */
.glass-card {
    background: rgba(20, 22, 30, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5);
}

/* The 'Scanner' Effect on Card Hover */
.glass-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.05),
            transparent);
    transform: skewX(-25deg);
    transition: 0.5s;
    pointer-events: none;
}

.glass-card:hover::after {
    left: 150%;
    transition: 0.7s ease-in-out;
}

.glass-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(6, 182, 212, 0.3);
    box-shadow:
        0 20px 50px -10px rgba(0, 0, 0, 0.7),
        0 0 15px rgba(6, 182, 212, 0.2) inset;
    background: rgba(20, 22, 30, 0.8);
}

/* Tech borders for cards (corner accents) */
.glass-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 20px;
    padding: 1px;
    background: linear-gradient(135deg, transparent 40%, rgba(59, 130, 246, 0.3), transparent 60%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
    line-height: 1.2;
}

h1 {
    font-size: 3.5rem;
    background: linear-gradient(to right, #fff, #94a3b8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

h2 {
    font-size: 2.5rem;
}

h3 {
    font-size: 1.75rem;
}

p {
    margin-bottom: 1.5rem;
    color: var(--text-muted);
}

.text-gradient {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

code {
    font-family: var(--font-code);
    background: rgba(0, 0, 0, 0.3);
    padding: 0.2em 0.4em;
    border-radius: 4px;
    font-size: 0.9em;
    color: var(--secondary);
}

/* Layout */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Improved Hero Grid */
.hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.03) 2px, transparent 2.5px),
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 50px 50px, 100px 100px, 100px 100px;
    background-position: 0 0, 0 0, 0 0;
    mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
    animation: moveGrid 30s linear infinite;
    z-index: 0;
}

@keyframes moveGrid {
    0% {
        background-position: 0 0, 0 0, 0 0;
    }

    100% {
        background-position: 50px 50px, 100px 100px, 100px 100px;
    }
}

/* Enhanced Section Spacing & Separators */
section {
    padding: 8rem 0;
    position: relative;
    z-index: 1;
}

section+section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    width: 80%;
    height: 1px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.3) 0%, transparent 70%);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 2rem;
    font-weight: 600;
    border-radius: 50px;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    font-size: 1rem;
    letter-spacing: 0.02em;
}

.btn-primary {
    background: var(--primary);
    color: white;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

.btn-secondary {
    background: transparent;
    border: 1px solid var(--border-light);
    color: var(--text-main);
    backdrop-filter: blur(5px);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--text-main);
}

/* Navbar */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 1.5rem 0;
    transition: var(--transition);
}

.navbar.scrolled {
    padding: 1rem 0;
    background: rgba(15, 17, 23, 0.8);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-light);
}

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

.logo {
    font-size: 1.5rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.logo span {
    color: var(--primary);
}

.nav-links {
    display: flex;
    gap: 2rem;
}

.nav-links a {
    font-weight: 500;
    font-size: 0.95rem;
    position: relative;
    opacity: 0.8;
}

.nav-links a:hover,
.nav-links a.active {
    opacity: 1;
    color: var(--primary);
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary);
    transition: width 0.3s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after {
    width: 100%;
}

.burger {
    display: none;
    cursor: pointer;
    flex-direction: column;
    gap: 6px;
    z-index: 1001;
}

.burger span {
    width: 25px;
    height: 2px;
    background: var(--text-main);
    transition: var(--transition);
}

/* Legacy card styles removed, see "Holographic Card Upgrade" above */

/* Hero definition adjusted */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding-top: 5rem;
}

/* Heavy Mesh Hero Background */
.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: #0f1117;
    background-image:
        radial-gradient(at 10% 10%, hsla(220, 60%, 20%, 0.5) 0px, transparent 50%),
        radial-gradient(at 90% 0%, hsla(190, 70%, 20%, 0.5) 0px, transparent 50%),
        radial-gradient(at 20% 80%, hsla(260, 60%, 15%, 0.5) 0px, transparent 50%),
        radial-gradient(at 80% 90%, hsla(200, 70%, 15%, 0.5) 0px, transparent 50%);
    filter: blur(60px);
}

/* .hero-grid is now defined globally above to ensure visibility */
.hero-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    z-index: 2;
}

.hero-subtitle {
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.85rem;
    color: var(--secondary);
    margin-bottom: 1rem;
    display: inline-block;
    padding: 0.5rem 1rem;
    background: rgba(6, 182, 212, 0.1);
    border-radius: 20px;
    border: 1px solid rgba(6, 182, 212, 0.2);
}

/* Features/Grid */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.icon-box {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(6, 182, 212, 0.1));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    color: var(--primary);
}

/* Form Styles */
.contact-form {
    max-width: 600px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-control {
    width: 100%;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    color: var(--text-main);
    font-family: var(--font-main);
    transition: var(--transition);
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

/* Footer */
footer {
    border-top: 1px solid var(--border-light);
    padding: 4rem 0 2rem;
    background: rgba(15, 17, 23, 0.5);
}

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

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid var(--border-light);
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Mobile Nav */
@media (max-width: 768px) {
    h1 {
        font-size: 2.5rem;
    }

    .burger {
        display: flex;
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background: var(--bg-dark);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: 0.5s ease;
        z-index: 1000;
    }

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

    .nav-links a {
        font-size: 1.5rem;
    }
}

/* Animations */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.delay-100 {
    transition-delay: 0.1s;
}

.delay-200 {
    transition-delay: 0.2s;
}

.delay-300 {
    transition-delay: 0.3s;
}

/* SVG Icons Styles */
.svg-icon {
    width: 32px;
    height: 32px;
    fill: currentColor;
}