/* CSS Variables & Hacker Theme */
:root {
    --bg-main: #0e1116;
    --bg-secondary: #0f1720;
    --bg-card: #050505;

    /* Neon Colors */
    --neon-blue: #7ddcff;
    --neon-dark: #004a7c;
    --text-main: #ffffff;
    --text-muted: #9aa4af;
    --text-code: #0f0;

    --font-display: 'Share Tech Mono', monospace;
    --font-heading: 'Share Tech Mono', monospace;
    --font-body: 'Space Grotesk', system-ui, sans-serif;

    --border-neon: 1px solid var(--neon-blue);
    --glow: 0 0 10px var(--neon-blue), 0 0 20px var(--neon-blue);
    --glow-soft: 0 0 5px var(--neon-blue);
}

/* Reset */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline: none;
}

html {
    scroll-behavior: smooth;
}

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

/* Typography & Glitch Utils */
h1,
h2,
h3,
h4,
h5,
h6,
.btn,
.nav-logo {
    font-family: var(--font-display);
    color: var(--text-main);
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
    /* Ensure no underlines on headers */
}

a {
    text-decoration: none;
    /* Global remove underline */
    color: inherit;
}

.glitch {
    position: relative;
    color: var(--text-main);
}

/* Tighter Glitch Effect */
.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
}

.glitch::before {
    left: 1px;
    /* Reduced offset */
    text-shadow: -1px 0 red;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim 4s infinite linear alternate-reverse;
}

.glitch::after {
    left: -1px;
    /* Reduced offset */
    text-shadow: -1px 0 blue;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim 2 4s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
    0% {
        clip: rect(42px, 9999px, 44px, 0);
    }

    5% {
        clip: rect(12px, 9999px, 59px, 0);
    }

    10% {
        clip: rect(48px, 9999px, 29px, 0);
        opacity: 0.3;
    }

    15% {
        clip: rect(42px, 9999px, 73px, 0);
    }

    100% {
        clip: rect(63px, 9999px, 27px, 0);
    }
}

/* Animated Backgrounds (Grid & Scanlines) */
.cyber-grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image:
        linear-gradient(rgba(125, 220, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125, 220, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    perspective: 1000px;
    transform: translateZ(-200px);
    z-index: -2;
    animation: grid-scroll 30s linear infinite;
    pointer-events: none;
}

@keyframes grid-scroll {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(40px);
    }
}

.scanlines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1));
    background-size: 100% 3px;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.2;
}

.footer-logo {
    display: block;
    margin-bottom: 5px;
    color: var(--neon-blue);
    text-shadow: var(--glow-soft);
}

.footer p {
    margin: 0;
    opacity: 0.7;
}

.footer-legal {
    font-size: 0.75rem;
    opacity: 0.5;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1rem;
    width: 60%;
    margin: 0 auto;
}

/* Background Distant Light Logo - Foggy Effect - ENHANCED */
.logo-background {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80vw;
    /* Even Larger for full coverage */
    max-width: 1000px;
    z-index: -1;
    pointer-events: none;
    opacity: 0.15;
    /* Increased opacity for visibility */
    /* Stronger blur and brightness for that "foggy light" look */
    filter: blur(60px) brightness(2.5) drop-shadow(0 0 120px rgba(125, 220, 255, 0.7));
    animation: fog-pulse 12s infinite alternate ease-in-out;
    mix-blend-mode: screen;
    /* Helps it blend like light */
}

@keyframes fog-pulse {
    0% {
        filter: blur(60px) brightness(2.0) drop-shadow(0 0 100px rgba(125, 220, 255, 0.5));
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 0.12;
    }

    100% {
        filter: blur(40px) brightness(3.0) drop-shadow(0 0 180px rgba(125, 220, 255, 0.9));
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 0.2;
    }
}

/* Nav Logo Update */
.nav-logo img {
    height: 60px;
    /* Kept large size */
    width: auto;
    filter: drop-shadow(0 0 8px var(--neon-blue));
    transition: 0.3s;
}

.nav-logo:hover img {
    filter: drop-shadow(0 0 20px var(--neon-blue));
    transform: scale(1.05);
}

/* Navbar */
.navbar {
    position: fixed;
    width: 100%;
    background: rgba(14, 17, 22, 0.95);
    border-bottom: 1px solid rgba(125, 220, 255, 0.1);
    z-index: 100;
    padding: 0.8rem 0;
}

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
    z-index: 101;
}

.mobile-menu-toggle .bar {
    width: 25px;
    height: 3px;
    background-color: var(--neon-blue);
    border-radius: 2px;
    transition: 0.3s;
    box-shadow: 0 0 5px var(--neon-blue);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Ensures vertical centering */
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
}

.nav-logo {
    display: flex;
    align-items: center;
    /* Center logo img and text */
    gap: 12px;
    font-size: 1.2rem;
}

.nav-links {
    display: flex;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-item {
    font-size: 0.85rem;
    color: var(--text-muted);
    transition: 0.3s;
    position: relative;
    padding-bottom: 2px;
}

.nav-item:hover {
    color: var(--neon-blue);
    text-shadow: var(--glow-soft);
}

.nav-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 1px;
    background: var(--neon-blue);
    transition: 0.3s;
}

.nav-item:hover::after {
    width: 100%;
}

/* Sections */
.section {
    padding: 6rem 0;
    /* Increased from default if it was smaller, or just ensuring it's ample */
    position: relative;
    z-index: 1;
}

/* Specific spacing for Methodology to clear previous elements */
#metodologia {
    padding-top: 8rem;
    /* Extra space for Defense Protocol title */
}

/* Buttons */
.btn {
    padding: 0.7rem 1.4rem;
    border: 1px solid var(--neon-blue);
    background: transparent;
    color: var(--neon-blue);
    cursor: pointer;
    font-size: 0.85rem;
    transition: 0.3s;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    display: inline-block;
}

.btn:hover {
    background: rgba(125, 220, 255, 0.1);
    box-shadow: var(--glow);
    text-shadow: var(--glow-soft);
}

/* Hero Section */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero-title {
    font-size: 4rem;
    /* Larger */
    margin-bottom: 1.5rem;
    line-height: 1.1;
    /* Cyber Text Glow */
    text-shadow:
        0 0 5px rgba(125, 220, 255, 0.8),
        0 0 10px rgba(125, 220, 255, 0.5),
        0 0 20px rgba(125, 220, 255, 0.3);
    letter-spacing: 4px;
}

.hero-subtitle {
    font-size: 1.1rem;
    margin-bottom: 2.5rem;
    color: var(--text-muted);
    min-height: 1.6em;
    /* Prevent jump when typing */
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero-status {
    border: 1px solid rgba(125, 220, 255, 0.3);
    padding: 0.4rem 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 2rem;
    background: rgba(5, 5, 5, 0.8);
    font-size: 0.8rem;
}

.status-dot {
    width: 8px;
    height: 8px;
    background: var(--neon-blue);
    border-radius: 50%;
    box-shadow: var(--glow);
    animation: blink 1s infinite alternate;
}

@keyframes blink {
    from {
        opacity: 1;
    }

    to {
        opacity: 0.3;
    }
}

/* Cards (Services & Capabilities) */
.services-grid,
.capabilities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    /* Wider cards */
    gap: 2rem;
    padding-top: 2rem;
}

.section-title {
    font-size: 2.5rem;
    /* Larger */
    text-align: center;
    margin-bottom: 0.5rem;
    text-shadow: 0 0 10px rgba(125, 220, 255, 0.4);
    letter-spacing: 3px;
    border-bottom: 1px solid transparent;
    /* Fix spacing issues */
    display: inline-block;
}

.section-header {
    text-align: center;
    /* Ensure grid centering */
}

.section-subtitle {
    text-align: center;
    color: var(--text-muted);
    font-size: 1rem;
    margin-bottom: 1.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.section-line {
    width: 0;
    height: 2px;
    background: var(--neon-blue);
    margin: 0 auto 3rem;
    animation: expandLine 1.5s forwards ease-in-out;
}

@keyframes expandLine {
    to {
        width: 80px;
        box-shadow: var(--glow);
    }
}

/* Refined Cards - Tier 2 (Depth & Professionalism) */
.service-card,
.capability-card {
    background: #050505;
    padding: 2.5rem;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8);
    /* Inner depth */
}

/* Hover Effect: Smart Glow */
.service-card:hover,
.capability-card:hover {
    transform: translateY(-5px);
    border-color: rgba(125, 220, 255, 0.4);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(125, 220, 255, 0.05);
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background: var(--neon-blue);
    transform: scaleY(0);
    transition: transform 0.4s ease;
    transform-origin: bottom;
}

.service-card:hover::before {
    transform: scaleY(1);
}

.service-icon svg,
.cap-icon svg {
    width: 36px;
    height: 36px;
    stroke-width: 1.5;
    /* Thinner lines for elegance */
}

.service-icon,
.cap-icon {
    margin-bottom: 1.2rem;
    color: var(--neon-blue);
    background: rgba(125, 220, 255, 0.05);
    /* Very subtle blocking */
    padding: 10px;
    border-radius: 4px;
    display: inline-flex;
    border: 1px solid rgba(125, 220, 255, 0.1);
}

.service-title,
h3 {
    margin-bottom: 0.3rem;
    color: var(--text-main);
    font-size: 1.1rem;
    letter-spacing: 0.5px;
}

.service-alias {
    font-size: 0.75rem;
    color: var(--neon-blue);
    font-family: var(--font-display);
    opacity: 0.8;
    margin-bottom: 0.8rem;
    display: block;
}

.service-desc,
p {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* Timeline (NIST Style) */
.timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    height: 100%;
    width: 1px;
    background: rgba(125, 220, 255, 0.2);
}

.timeline-item {
    width: 50%;
    padding: 1.5rem 3rem;
    position: relative;
    box-sizing: border-box;
}

.timeline-item:nth-child(odd) {
    left: 0;
    text-align: right;
    border-right: 1px solid rgba(125, 220, 255, 0.3);
}

.timeline-item:nth-child(even) {
    left: 50%;
    border-left: 1px solid rgba(125, 220, 255, 0.3);
}

.timeline-dot {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--bg-main);
    border: 2px solid var(--neon-blue);
    border-radius: 50%;
    top: 25px;
    z-index: 10;
}

.timeline-item:nth-child(odd) .timeline-dot {
    right: -6px;
}

.timeline-item:nth-child(even) .timeline-dot {
    left: -6px;
}

.timeline-content h4 {
    color: var(--text-main);
    font-size: 1.1rem;
    margin-bottom: 0.3rem;
}

.methodology-footer {
    text-align: center;
    margin-top: 3rem;
    color: var(--text-muted);
    font-family: var(--font-display);
    font-size: 0.9rem;
    opacity: 0.7;
    letter-spacing: 1px;
}

/* --- Footer (Minimalist Centered) --- */
.footer {
    border-top: 1px solid rgba(125, 220, 255, 0.1);
    /* Subtle Cyan Tint */
    background: #0b0e13;
    padding: 1.5rem 0;
    margin-top: 6rem;
    position: relative;
    z-index: 10;
}

.footer-centered {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    /* Allow wrap on mobile */
    text-align: center;
}

.footer-text {
    font-size: 0.8rem;
    color: var(--text-muted);
    opacity: 0.7;
    letter-spacing: 0.5px;
    font-family: var(--font-body);
}

.footer-separator {
    color: var(--neon-blue);
    opacity: 0.5;
    font-size: 0.6rem;
    /* Smaller bullet */
    display: inline-block;
    padding-top: 2px;
    /* Visual optical alignment */
}

/* Responsive */
@media (max-width: 600px) {
    .footer-centered {
        flex-direction: column;
        gap: 0.5rem;
    }

    .footer-separator {
        display: none;
        /* Hide separator on mobile stack */
    }
}

/* --- Contact Console (Premium) --- */
.contact-console {
    background: rgba(5, 5, 5, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    padding: 3rem 4rem;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    /* Inset Highlight for depth */
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.03),
        0 10px 40px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

/* Signal Line Pulse */
.signal-line {
    width: 60px;
    height: 3px;
    background: var(--neon-blue);
    margin: 1rem auto;
    box-shadow: var(--glow-soft);
    animation: signal-pulse 2s infinite alternate;
}

@keyframes signal-pulse {
    0% {
        opacity: 0.5;
    }
}

/* --- Contact Console (Premium) --- */
.contact-console {
    background: rgba(5, 5, 5, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    padding: 3rem 4rem;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    /* Inset Highlight for depth */
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.03),
        0 10px 40px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

/* Signal Line Pulse */
.signal-line {
    width: 60px;
    height: 3px;
    background: var(--neon-blue);
    margin: 1rem auto;
    box-shadow: var(--glow-soft);
    animation: signal-pulse 2s infinite alternate;
}

@keyframes signal-pulse {
    0% {
        opacity: 0.5;
        width: 60px;
    }

    100% {
        opacity: 1;
        width: 100px;
        box-shadow: 0 0 15px var(--neon-blue);
    }
}

.console-header {
    text-align: center;
    margin-bottom: 3rem;
}

.console-title {
    font-size: 2.2rem;
    margin-bottom: 0.5rem;
    letter-spacing: 2px;
}

.console-subtitle {
    color: var(--text-muted);
    font-size: 1rem;
    opacity: 0.8;
}

/* Console Grid Layout */
.console-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 3rem;
}

.console-block {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.action-block {
    align-items: flex-end;
}

.console-label {
    font-family: var(--font-display);
    color: var(--neon-blue);
    font-size: 0.75rem;
    margin-bottom: 0.8rem;
    letter-spacing: 1px;
    opacity: 0.7;
}

/* Code Pill (Email) */
.code-pill {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 0.8rem 1.2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
}

.code-pill:hover {
    border-color: var(--neon-blue);
    box-shadow: 0 0 15px rgba(125, 220, 255, 0.1);
    transform: translateY(-1px);
}

.code-pill:active {
    transform: translateY(1px);
}

.email-text {
    font-family: 'Space Mono', monospace;
    /* or fallback */
    font-size: 1rem;
    color: var(--text-main);
    letter-spacing: 0.5px;
}

.copy-icon {
    color: var(--text-muted);
    transition: 0.3s;
}

.code-pill:hover .copy-icon {
    color: var(--neon-blue);
}

.pill-status {
    font-size: 0.65rem;
    background: rgba(125, 220, 255, 0.1);
    color: var(--neon-blue);
    padding: 2px 6px;
    border-radius: 2px;
    margin-left: auto;
    opacity: 0;
    transition: 0.3s;
}

.code-pill:hover .pill-status {
    opacity: 1;
}

.console-meta {
    margin-top: 0.8rem;
    display: flex;
    gap: 1.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    opacity: 0.6;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Console Button */
.btn-console {
    padding: 1rem 2.5rem;
    font-size: 1rem;
    letter-spacing: 1.5px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(125, 220, 255, 0.05);
    /* Slight tint */
}

.btn-console:hover {
    background: var(--neon-blue);
    color: #000;
    box-shadow: 0 0 25px rgba(125, 220, 255, 0.4);
}

/* --- Smart Glitch (Controlled) --- */
.service-title {
    position: relative;
    display: inline-block;
}

.service-title.glitch-active::before,
.service-title.glitch-active::after {
    content: attr(data-text);
    /* Requires JS to ensure data-text matches */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Ensure background matches to simulate cut */
    background: #050505;
}

/* For cards with backgrounds, we might need specific handling if transparent breaks it, 
   but transparent usually works for the 'slice' effect if text shadow is clean. 
   Actually, for the slice to look like a 'shift', having the background match is better,
   but difficult generically. 
   Strategy: Just clip text. */

.service-title.glitch-active::before {
    left: 2px;
    text-shadow: -1px 0 #ff00c1;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    animation: glitch-slice-1 0.4s infinite linear alternate-reverse;
}

.service-title.glitch-active::after {
    left: -2px;
    text-shadow: -1px 0 #00fff9;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    animation: glitch-slice-2 0.4s infinite linear alternate-reverse;
}

@keyframes glitch-slice-1 {
    0% {
        clip-path: inset(20% 0 80% 0);
    }

    20% {
        clip-path: inset(60% 0 10% 0);
    }

    40% {
        clip-path: inset(10% 0 50% 0);
    }

    60% {
        clip-path: inset(80% 0 5% 0);
    }

    80% {
        clip-path: inset(30% 0 40% 0);
    }

    100% {
        clip-path: inset(50% 0 30% 0);
    }
}

@keyframes glitch-slice-2 {
    0% {
        clip-path: inset(10% 0 60% 0);
    }

    20% {
        clip-path: inset(30% 0 20% 0);
    }

    40% {
        clip-path: inset(70% 0 10% 0);
    }

    60% {
        clip-path: inset(20% 0 50% 0);
    }

    80% {
        clip-path: inset(60% 0 30% 0);
    }

    100% {
        clip-path: inset(15% 0 80% 0);
    }
}

@media (prefers-reduced-motion: reduce) {

    .service-title.glitch-active::before,
    .service-title.glitch-active::after {
        display: none;
    }
}


/* Responsive Adjustments for Console */
@media(max-width: 768px) {
    .contact-console {
        padding: 2rem;
    }

    .console-grid {
        flex-direction: column;
        gap: 2rem;
        align-items: stretch;
    }

    .action-block {
        align-items: stretch;
    }

    .btn-console {
        justify-content: center;
    }
}

/* Drawer (Replaces Modal) */
.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;
}

.drawer-overlay[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
}

.service-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 500px;
    max-width: 90vw;
    height: 100%;
    background: rgba(10, 13, 18, 0.98);
    border-left: 1px solid var(--neon-blue);
    z-index: 2100;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    display: flex;
    flex-direction: column;
    box-shadow: -10px 0 50px rgba(0, 0, 0, 0.8);
}

.service-drawer[aria-hidden="false"] {
    transform: translateX(0);
}

.drawer-header {
    padding: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
}

.drawer-title {
    font-size: 1.4rem;
    color: var(--text-main);
}

.drawer-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
}

.drawer-close:hover {
    color: var(--neon-blue);
}

.drawer-content {
    flex: 1;
    padding: 2rem;
    overflow-y: auto;
}

.drawer-status-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    color: var(--neon-blue);
    font-size: 0.8rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(125, 220, 255, 0.1);
    padding-bottom: 1rem;
}

.status-indicator {
    color: var(--neon-blue);
    animation: blink 2s infinite;
    font-size: 1.2rem;
}

.drawer-section {
    margin-bottom: 2.5rem;
}

.drawer-subtitle {
    color: var(--text-muted);
    font-size: 0.8rem;
    letter-spacing: 1.5px;
    margin-bottom: 1rem;
    display: block;
}

.drawer-text {
    line-height: 1.7;
    color: var(--text-body);
}

.drawer-list {
    list-style: none;
    padding-left: 0;
}

.drawer-list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.8rem;
    color: var(--text-body);
    font-size: 0.95rem;
}

.drawer-list li::before {
    content: '>';
    position: absolute;
    left: 0;
    color: var(--neon-blue);
    font-family: monospace;
}

.drawer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.03);
    padding: 1.5rem;
    border-radius: 4px;
    margin-bottom: 2rem;
}

.drawer-meta {
    font-family: var(--font-display);
    color: var(--text-main);
    font-size: 0.9rem;
}

.drawer-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag {
    background: rgba(125, 220, 255, 0.1);
    color: var(--neon-blue);
    padding: 0.3rem 0.8rem;
    font-size: 0.75rem;
    border: 1px solid rgba(125, 220, 255, 0.2);
    font-family: var(--font-display);
}

.drawer-footer {
    padding: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.5);
    text-align: center;
}

.drawer-contact-mini {
    margin-top: 1rem;
    color: var(--text-muted);
    font-size: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.mono-text {
    font-family: var(--font-display);
    color: var(--text-main);
}

/* Frameworks Bar */
.frameworks-bar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.3);
    padding: 1.5rem 0;
    overflow: hidden;
}

.marquee-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.framework-list {
    display: flex;
    gap: 2rem;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0.7;
    font-family: var(--font-display);
    color: var(--text-muted);
}

.fw-item {
    letter-spacing: 1px;
    font-weight: 600;
    font-size: 0.9rem;
}

.fw-separator {
    color: var(--neon-dark);
}

.fw-caption {
    font-size: 0.7rem;
    color: var(--neon-blue);
    opacity: 0.6;
    letter-spacing: 2px;
    margin-top: 5px;
}

/* Toast */
.toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: #000;
    border: 1px solid var(--neon-blue);
    color: var(--neon-blue);
    padding: 1rem;
    font-family: var(--font-display);
    box-shadow: var(--glow);
    opacity: 0;
    transform: translateY(20px);
    transition: 0.3s;
    z-index: 3000;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive Updates */
@media(max-width: 768px) {
    .service-drawer {
        width: 100%;
        top: 60px;
        height: calc(100% - 60px);
    }

    .drawer-grid {
        grid-template-columns: 1fr;
    }

    .timeline::before {
        left: 0;
    }

    .timeline-item {
        width: 100%;
        padding-left: 2rem;
        text-align: left;
    }

    .timeline-item:nth-child(odd) {
        text-align: left;
        border: none;
        border-left: 1px solid rgba(125, 220, 255, 0.3);
    }

    .timeline-item:nth-child(even) {
        left: 0;
    }

    .timeline-item:nth-child(odd) .timeline-dot {
        left: -6px;
        right: auto;
    }

    /* --- Mobile Navigation & Layout Fixes --- */
    .nav-cta {
        display: none;
        /* Hide 'INIT_CONSULTATION' button on mobile to save space */
    }

    .nav-logo {
        font-size: 1rem;
        /* Slightly smaller text */
        gap: 8px;
    }

    .nav-logo img {
        height: 40px;
        /* Smaller logo icon */
    }

    .mobile-menu-toggle {
        display: flex;
        margin-left: auto;
        /* Push to right if needed, though flex justify-between handles it */
    }

    .nav-links {
        display: none;
        /* Hidden by default on mobile */
        flex-direction: column;
        position: absolute;
        top: 100%;
        /* Below navbar */
        left: 0;
        width: 100%;
        background: rgba(14, 17, 22, 0.98);
        padding: 2rem;
        border-bottom: 1px solid var(--neon-blue);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9);
        gap: 1.5rem;
        text-align: center;
    }

    .nav-links.active {
        display: flex;
    }

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

    .hero-subtitle {
        font-size: 1rem;
        padding: 0 1rem;
    }

    .section-title {
        font-size: 1.8rem;
    }

    .console-title {
        font-size: 1.5rem;
    }

    .services-grid,
    .capabilities-grid {
        grid-template-columns: 1fr;
        /* Single column on mobile */
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .contact-console {
        padding: 1.5rem;
    }

    .console-grid {
        gap: 1.5rem;
    }

    .drawer-overlay {
        z-index: 2000;
    }

    .service-drawer {
        width: 85vw;
        max-width: none;
        top: 0;
        height: 100%;
    }
}