/* ============================================================
   base.css  —  Variables · Reset · Premium Background · Nav · Hero
   ============================================================ */

html {
    scroll-behavior: smooth;
}

:root {
    --bg-primary:          #05050f;
    --bg-secondary:        #080815;
    --accent-cyan:         #00f5ff;
    --accent-cyan-glow:    rgba(0, 245, 255, 0.3);
    --accent-purple:       #8a2be2;
    --text-primary:        #ffffff;
    --text-secondary:      #cbd5e0;
    --text-tertiary:       #718096;
    --card-bg:             rgba(15, 22, 35, 0.78);
    --card-border:         rgba(0, 217, 255, 0.2);
    --gradient-start:      rgba(0, 217, 255, 0.1);
    --gradient-end:        rgba(138, 43, 226, 0.1);
    --sky-blue:            #87ceeb;
}

/* ================== PREMIUM CUSTOM SCROLLBAR ================== */
::-webkit-scrollbar {
    width: 3px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #034d57, #023a42);
    border-radius: 10px;
    box-shadow: 0 0 8px rgba(3, 77, 87, 0.4);
}

::-webkit-scrollbar-thumb:hover {
    background: #046b78;
    box-shadow: 0 0 15px rgba(3, 77, 87, 0.7);
}

/* Firefox fallback */
* {
    scrollbar-width: thin;
    scrollbar-color: #034d57 var(--bg-primary);
}

/* ================== BASE RESET & UTILITIES ================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Poppins', sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    overflow-x: hidden;
    line-height: 1.72;
    min-height: 100vh;
}

::selection       { background: rgba(0, 245, 255, 0.2); color: #00f5ff; }
::-moz-selection  { background: rgba(0, 245, 255, 0.2); color: #00f5ff; }

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
}





/* Aurora gentle sweep */
.aurora-layer {
    position: fixed; inset: 0; z-index: -2;
    background:
        linear-gradient(115deg, transparent 30%, rgba(0,245,255,0.02) 50%, transparent 70%),
        linear-gradient(245deg, transparent 30%, rgba(138,43,226,0.02) 50%, transparent 70%);
    pointer-events: none;
    animation: auroraSweep 18s ease-in-out infinite;
}
@keyframes auroraSweep {
    0%, 100% { opacity: 0.4; transform: translateY(0); }
    50%      { opacity: 0.6;    transform: translateY(-15px); }
}

/* Noise texture */
.noise-layer {
    position: fixed; inset: 0; z-index: -1;
    pointer-events: none;
    opacity: 0.035;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Vignette */
.vignette {
    position: fixed; inset: 0; z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.35) 100%);
}

#starfield { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 0; opacity: 0.8; pointer-events: none; }



.grid-pattern {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-image:
        linear-gradient(rgba(0,217,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,217,255,0.025) 1px, transparent 1px);
    background-size: 56px 56px;
    z-index: -2;
    mask-image: radial-gradient(ellipse at center, black 40%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 85%);
    animation: gridShimmer 4s infinite linear;
}

@keyframes gridShimmer { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.35; } }

/* ====================== NAVBAR ============================ */
.hero-nav {
    position: absolute;
    top: 1.5rem;
    left: 5%;
    width: calc(100% - 10%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 5;
}

.logo {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.125em;
    display: inline-flex;
    text-decoration: none; /* Prevents unintended blue link underline */
}

.logo-rs {
    color: #22d3ee;
    transition: all 300ms ease;
}

.logo-dev {
    color: #ffffff;
    transition: all 300ms ease;
}

.logo:hover .logo-rs,
.logo:hover .logo-dev {
    color: #67e8f9;
}

.nav-pill-wrap {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 50px;
    padding: 0.35rem 0.6rem;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    gap: 0.15rem;
    box-shadow: 0 4px 24px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.05);
}

.nav-links { display: flex; gap: 0.15rem; list-style: none; align-items: center; }

.nav-links a {
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    font-size: 0.79rem;
    font-weight: 500;
    letter-spacing: 0.6px;
    padding: 0.42rem 0.95rem;
    border-radius: 50px;
    transition: all 0.25s ease;
    font-family: 'Poppins', sans-serif;
    position: relative;
}

.nav-links a:hover  { color: var(--accent-cyan); background: rgba(0,217,255,0.10); }
.nav-links a.active {
    color: var(--accent-cyan);
    background: rgba(0,217,255,0.12);
    box-shadow: 0 0 12px rgba(0,217,255,0.15);
}

/* ====================== SECTIONS ========================== */
section {
    min-height: 100vh;
    padding: 5.25rem 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.container { max-width: 1200px; width: 100%; margin: 0 auto; }

/* ======================== HERO ============================ */
#home {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    padding: 8rem 5% 5.25rem;
}

.terminal-prompt {
    font-size: 0.875rem;
    color: #22d3ee;
    margin-bottom: 1.5rem;
    letter-spacing: 0.4em;
    animation: animate-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    font-weight: 500;
    text-transform: uppercase;
}
@keyframes animate-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

.hero-title {
    font-family: 'Inter', sans-serif;
    font-size: clamp(3.75rem, 8vw, 6rem);
    font-weight: 900;
    letter-spacing: -0.025em;
    margin-bottom: 1rem;
    line-height: normal;
    color: #ffffff;
    animation: fadeSlideUp 1s ease-out;
}

.hero-title .accent {
    background: linear-gradient(135deg, #00f5ff, #00bcd4);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 30px rgba(0, 245, 255, 0.5));
    -webkit-text-stroke: 1px transparent;
    display: inline-block;
    padding: 0;
    margin-left: 0.08em;
}

@keyframes fadeSlideUp  { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }

.hero-subtitle-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 8.4px;
    margin-bottom: 1.3rem;
    padding: 0.65rem 1.4rem;
    background: rgba(0,217,255,0.08);
    border: 1px solid rgba(0,217,255,0.2);
    border-radius: 50px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0,217,255,0.1), inset 0 1px 1px rgba(255,255,255,0.1);
    animation: fadeSlideUp 1s ease-out 0.2s backwards;
}

.hero-subtitle {
    font-family: 'Poppins', sans-serif;
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: 0.6px;
    line-height: 1.4;
    color: #a8d5ff;
    text-shadow: 0 0 10px rgba(0,229,255,0.3);
    display: inline-block;
}

.typing-cursor {
    display: inline-block;
    width: 3px; height: 1.2em;
    background: linear-gradient(180deg, #00e5ff 0%, rgba(0,229,255,0.2) 100%);
    margin-left: 4px;
    animation: cursorBlink 0.6s infinite;
    vertical-align: middle;
    border-radius: 50px;
}
@keyframes cursorBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.3; } }

.hero-description {
    font-family: 'Poppins', sans-serif;
    font-size: 1.01rem;
    color: var(--text-tertiary);
    max-width: 540px;
    margin: 0 auto 1.9rem;
    line-height: 1.72;
    animation: fadeSlideUp 1s ease-out 0.4s backwards;
    font-weight: 300;
    letter-spacing: 0.35px;
}

.cta-buttons {
    display: flex;
    gap: 0.88rem;
    justify-content: center;
    animation: fadeSlideUp 1s ease-out 0.6s backwards;
    flex-wrap: wrap;
}

.btn {
    --glow-x: 50%; --glow-y: 50%; --glow-alpha: 0.18;
    padding: 0.72rem 1.85rem;
    font-size: 0.765rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    font-family: 'Poppins', sans-serif;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    isolation: isolate;
    border: 1px solid rgba(0,217,255,0.38);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.btn::before {
    content: '';
    position: absolute; inset: -30%;
    background: radial-gradient(
        circle at var(--glow-x) var(--glow-y),
        rgba(0,217,255,0.42) 0%,
        rgba(0,217,255,var(--glow-alpha)) 22%,
        rgba(0,217,255,0.08) 42%,
        transparent 68%
    );
    opacity: 0; transform: scale(0.82);
    filter: blur(16px);
    transition: opacity 0.25s ease, transform 0.35s ease;
    z-index: -1;
}
.btn::after {
    content: '';
    position: absolute; inset: 1px;
    border-radius: inherit;
    background: linear-gradient(115deg, rgba(255,255,255,0.24), rgba(255,255,255,0.04) 32%, transparent 60%);
    opacity: 0.55; pointer-events: none; z-index: -1;
}

.btn:hover         { transform: translateY(-2px); }
.btn:hover::before { opacity: 1; transform: scale(1); }
.btn:active        { transform: translateY(0); }

.btn-primary {
    background: linear-gradient(135deg, rgba(0,217,255,0.95), rgba(130,246,255,0.88));
    color: var(--bg-primary);
    box-shadow: 0 0 18px rgba(0,217,255,0.28), 0 0 36px rgba(0,217,255,0.16);
}
.btn-primary:hover { box-shadow: 0 0 26px rgba(0,217,255,0.42), 0 0 54px rgba(0,217,255,0.24); }

.btn-secondary {
    background: rgba(0,217,255,0.08);
    color: var(--accent-cyan);
    border: 1px solid rgba(0,217,255,0.5);
    box-shadow: 0 0 14px rgba(0,217,255,0.16), inset 0 0 18px rgba(0,217,255,0.04);
}
.btn-secondary:hover {
    background: rgba(0,217,255,0.14);
    border-color: rgba(130,246,255,0.9);
    box-shadow: 0 0 24px rgba(0,217,255,0.32), 0 0 48px rgba(0,217,255,0.18);
}

.scroll-indicator {
    position: absolute; bottom: 1.05rem; left: 50%;
    transform: translateX(-50%);
    animation: bounce 2s infinite;
    opacity: 0.7; cursor: pointer;
}
.scroll-indicator svg { width: 21px; height: 21px; stroke: var(--accent-cyan); filter: drop-shadow(0 0 8px var(--accent-cyan-glow)); }

@keyframes bounce {
    0%,20%,50%,80%,100% { transform: translateX(-50%) translateY(0); }
    40% { transform: translateX(-50%) translateY(-8px); }
    60% { transform: translateX(-50%) translateY(-4px); }
}

/* ================== SECTION HEADERS ======================= */
.section-header    { text-align: center; margin-bottom: 2.7rem; }
.section-prompt    { font-size: 0.72rem; color: var(--accent-cyan); letter-spacing: 1.8px; margin-bottom: 0.44rem; font-weight: 500; }
.section-title     { font-family: 'Montserrat', sans-serif; font-size: clamp(1.85rem, 3.7vw, 2.9rem); font-weight: 800; margin-bottom: 0.55rem; }

.section-title .accent {
    color: var(--accent-cyan) !important;
    text-shadow: 0 0 20px var(--accent-cyan-glow);
    position: relative;
}
.section-title .accent::after {
    content: '';
    position: absolute;
    bottom: -10px; left: 0; right: 0;
    height: 3px;
    background: var(--accent-cyan);
    box-shadow: 0 0 10px var(--accent-cyan);
}





.fade-in { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; }
.mobile-navbar { display: none; }

/* ========================================================
   MOBILE OVERRIDES  (≤ 968px) — desktop untouched
   ======================================================== */
@media (max-width: 968px) {

    /* ── Hide the old desktop pill nav on mobile ── */
    .hero-nav { display: none !important; }

    /* ── NEW MOBILE NAVBAR ── */
    .mobile-navbar {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 2000;
        background: rgba(10, 10, 15, 0.7); /* Updated to 70% opacity */
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid rgba(0, 245, 255, 0.1);
        transition: box-shadow 0.4s ease, border-color 0.4s ease;
    }

    /* Scroll Glow Effect */
    .mobile-navbar.scrolled {
        box-shadow: 0 4px 20px rgba(0, 245, 255, 0.15);
        border-bottom-color: rgba(0, 245, 255, 0.3);
    }




    .mobile-nav-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 1.2rem;
        height: 48px; /* Further reduced height */
        box-sizing: border-box;
    }

    .mobile-logo {
        text-decoration: none;
        font-family: 'Courier New', Courier, monospace; /* Consistent with desktop */
        font-size: 1.1rem;
        font-weight: 700;
        letter-spacing: 0.125em;
    }

    .m-rs { color: var(--accent-cyan); }
    .m-dev { color: #ffffff; }

    .mobile-menu-toggle {
        background: none;
        border: none;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        gap: 5px;
        padding: 5px;
        width: 32px;
        align-items: flex-end;
    }

    .hamburger-line {
        width: 24px;
        height: 2px;
        background: var(--accent-cyan);
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    .mobile-menu-toggle.active .hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .mobile-menu-toggle.active .hamburger-line:nth-child(2) { opacity: 0; }
    .mobile-menu-toggle.active .hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* Dropdown Menu */
    .mobile-dropdown-menu {
        display: none;
        background: rgba(10, 10, 15, 0.95);
        border-bottom: 1px solid rgba(0, 245, 255, 0.15);
        padding: 1rem 0;
        max-height: 0;
        overflow: hidden;
    }

    .mobile-dropdown-menu.show {
        display: block;
        max-height: 500px;
        animation: slideDown 0.3s ease forwards;
    }

    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .mobile-nav-items {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.2rem;
    }

    .mobile-nav-items a {
        text-decoration: none;
        color: rgba(255, 255, 255, 0.85);
        font-size: 1.05rem;
        font-weight: 500;
        padding: 0.6rem 2rem;
        width: 100%;
        text-align: center;
        transition: all 0.2s ease;
    }

    /* Temporary flash highlight (Text only, no box) */
    .mobile-nav-items a.flash-highlight {
        color: var(--accent-cyan) !important;
        background: transparent !important; /* No background box */
        text-shadow: 0 0 10px rgba(0, 245, 255, 0.6);
    }

    /* Adjust hero padding for fixed header */
    #home { padding-top: 48px !important; }

    /* ── Terminal prompt: slightly smaller ── */
    .terminal-prompt {
        font-size: 0.6rem !important;
        letter-spacing: 0.22em !important;
        margin-bottom: 0.85rem !important;
    }
}




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