/* =========================================
   CREATOR MENTORING // SYSTEM CORE CSS
   VERSION 2.0 (DOT MATRIX // TERMINAL)
   ========================================= */

:root {
    /* COLORS */
    --color-void-black: #050505;
    --color-static-white: #E0E0E0;
    --color-terminal-green: #00E091;
    --color-structure-grey: #333333;
    --color-matrix-dot: rgba(255, 255, 255, 0.15);

    /* FONTS */
    --font-primary: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* SPACING */
    --spacing-container: 1200px;
    --spacing-section: 120px;
}

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

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--color-void-black);
    color: var(--color-static-white);
    font-family: var(--font-primary);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    position: relative;
    background-image: radial-gradient(var(--color-structure-grey) 1px, transparent 0);
    background-size: 40px 40px;
    /* Minimal dot grid everywhere */
}

/* SCANLINE OVERLAY */
body::after {
    content: " ";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 9999;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
}

/* UTILITIES */
.container {
    max-width: var(--spacing-container);
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
}

.mono-text,
.mono-label,
.btn-primary,
h3,
.phase {
    font-family: var(--font-mono);
}

.mono-label {
    font-size: 0.8rem;
    color: var(--color-terminal-green);
    letter-spacing: 1px;
    display: block;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.mono-label::before {
    content: "[ ";
    color: #555;
}

.mono-label::after {
    content: " ]";
    color: #555;
}

.text-green {
    color: var(--color-terminal-green);
}

.section-dark {
    background-color: var(--color-void-black);
    padding: var(--spacing-section) 0;
    position: relative;
    border-top: 1px solid var(--color-structure-grey);
}

.section-black {
    background-color: #000;
    padding: var(--spacing-section) 0;
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--color-structure-grey);
}

h1,
h2,
h3 {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.03em;
}

h2 {
    font-family: var(--font-mono);
    /* Terminal Headers */
    font-size: 3rem;
    line-height: 1.1;
    margin-bottom: 2rem;
    border-bottom: 2px solid var(--color-structure-grey);
    display: inline-block;
    padding-bottom: 1rem;
}

h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    letter-spacing: 0;
    text-transform: uppercase;
}

a {
    text-decoration: none;
    color: inherit;
}

/* BUTTONS */
.btn-primary {
    display: inline-block;
    background-color: var(--color-terminal-green);
    color: var(--color-void-black);
    font-weight: 700;
    padding: 1rem 2rem;
    text-transform: uppercase;
    border: 2px solid var(--color-terminal-green);
    transition: all 0.2s steps(5);
    position: relative;
    overflow: hidden;
    box-shadow: 4px 4px 0 var(--color-structure-grey);
}

.btn-primary:hover {
    background-color: transparent;
    color: var(--color-terminal-green);
    box-shadow: none;
}

.btn-primary.large {
    font-size: 1.2rem;
    padding: 1.5rem 3rem;
}

/* HERO SECTION */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    /* Higher opacity for dot matrix visibility */
    filter: contrast(1.2) brightness(1.1);
}

.hero-bg .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, transparent 40%, #050505 90%);
    /* Vignette only */
}


.hero-content {
    position: relative;
    z-index: 2;
    /* padding-top: 4rem; Removed to center content properly in full screen mode */
    background: rgba(5, 5, 5, 0.7);
    /* Improved readability against dots */
    /* padding: 2rem; Removed to avoid double padding with inner container */
    border: 1px solid var(--color-structure-grey);
    backdrop-filter: blur(2px);
}

.hero h1 {
    font-size: 4rem;
    line-height: 0.95;
    margin-bottom: 2rem;
    font-family: var(--font-primary);
}

.hero-sub {
    font-size: 1.25rem;
    max-width: 600px;
    margin-bottom: 3rem;
    font-family: var(--font-mono);
}

/* HUD ELEMENTS replaced by ASCII Lines */
.hud-line {
    display: none;
}

/* GLITCH EFFECT */
.glitch-text {
    position: relative;
}

.glitch-text::before,
.glitch-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* GRID LAYOUTS */
.grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.grid-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.grid-4col {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 4rem;
}

/* DOT MATRIX CARDS */
.card.glass {
    background: #000;
    border: 1px solid var(--color-structure-grey);
    padding: 2rem;
    position: relative;
    backdrop-filter: none;
    box-shadow: 10px 10px 0 #111;
}

.card.glass::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    background: var(--color-structure-grey);
}

.card.glass:hover {
    border-color: var(--color-terminal-green);
    transform: translate(-5px, -5px);
    box-shadow: 15px 15px 0 var(--color-terminal-green);
}

.card.glass:hover::after {
    background: var(--color-terminal-green);
}

.card-number {
    font-family: var(--font-mono);
    color: var(--color-terminal-green);
    display: block;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    border-bottom: 1px dashed var(--color-structure-grey);
    padding-bottom: 0.5rem;
}

/* CARD GRID CONNECTOR */
.card-connector-grid {
    position: relative;
}

@media (min-width: 900px) {
    .card-connector-grid::before {
        content: '';
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        width: 100%;
        height: 1px;
        border-top: 1px dashed var(--color-structure-grey);
        z-index: 0;
        pointer-events: none;
    }
}

/* VISUAL BLOCK (Problem Section) */
.visual-block {
    height: 400px;
    border: 1px dashed var(--color-structure-grey);
    background-image: radial-gradient(var(--color-structure-grey) 1px, transparent 0);
    background-size: 20px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (min-width: 901px) {
    .timeline+h3 {
        position: relative;
    }

    .timeline+h3::before {
        content: '';
        position: absolute;
        left: calc(50% - 400px);
        /* Aligns with max-width 800px centered timeline left border */
        top: -4rem;
        /* Reaches up to the timeline */
        bottom: -2.5rem;
        /* Reaches down to the grid */
        width: 2px;
        border-left: 2px dashed var(--color-structure-grey);
        z-index: 0;
        /* Behind text */
    }
}


/* TIMELINE (System Compilation) */
.timeline {
    margin-top: 4rem;
    position: relative;
    border-left: 2px dashed var(--color-structure-grey);
    padding-left: 4rem;
}

.module-row {
    position: relative;
    margin-bottom: 4rem;
}

.module-row::before {
    content: '';
    position: absolute;
    left: -4.6rem;
    top: 1.5rem;
    width: 20px;
    height: 20px;
    background: #000;
    border: 2px solid var(--color-terminal-green);
    border-radius: 50%;
}

.module-meta {
    font-family: var(--font-mono);
    color: var(--color-terminal-green);
    margin-bottom: 0.5rem;
}

.module-content {
    background: #000;
    border: 1px solid var(--color-structure-grey);
    padding: 2rem;
}

.module-content h3 {
    font-family: var(--font-mono);
}

/* LISTS */
.check-list {
    list-style: none;
    margin: 1.5rem 0;
}

.check-list li {
    margin-bottom: 0.5rem;
    padding-left: 2rem;
    position: relative;
    font-family: var(--font-mono);
    font-size: 0.95rem;
}

.check-list li::before {
    content: '[X]';
    position: absolute;
    left: 0;
    color: var(--color-terminal-green);
}

/* TEXT BLOCK STYLES */
.text-block.glass-hard {
    background: #000;
    border: 1px solid var(--color-terminal-green);
    /* Hard Green Border */
    box-shadow: none;
}

/* SYSTEM SECTION */
.system-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.system-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
    filter: grayscale(100%);
}

.overlay-strong {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #050505 0%, transparent 50%, #050505 100%);
}

.price-tag {
    font-family: var(--font-mono);
    border: 2px solid var(--color-terminal-green);
    padding: 1rem;
    display: inline-block;
    background: rgba(0, 224, 145, 0.1);
}

/* FOOTER */
.footer {
    padding: 8rem 0 4rem;
    border-top: 2px solid var(--color-structure-grey);
    background: #000;
}

.footer p {
    color: #555;
    font-family: var(--font-mono);
}

/* ANIMATIONS */
/* ANIMATIONS - REVEAL SYSTEM */
.reveal {
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.5, 0, 0, 1);
    transform: translateY(30px);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal.reveal-left {
    transform: translateX(-30px);
}

.reveal.reveal-right {
    transform: translateX(30px);
}

.reveal.reveal-scale {
    transform: scale(0.95);
}

.reveal.visible.reveal-left,
.reveal.visible.reveal-right {
    transform: translateX(0);
}

.reveal.visible.reveal-scale {
    transform: scale(1);
}

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

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

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

/* RESPONSIVE */
@media (max-width: 900px) {
    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2rem;
    }

    .grid-2col,
    .grid-3col,
    .grid-4col {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .timeline {
        border-left: none;
        padding-left: 0;
    }

    .module-row::before {
        display: none;
    }

    .hero-content {
        background: rgba(5, 5, 5, 0.9);
    }
}

/* Main Navigation */
.main-nav .nav-links a:hover {
    color: #fff !important;
    text-shadow: 0 0 8px var(--color-terminal-green);
    transition: all 0.3s ease;
}

.main-nav .nav-links a.active {
    color: var(--color-terminal-green) !important;
    border-bottom: 2px solid var(--color-terminal-green);
    padding-bottom: 3px;
}


.blink {
    animation: blinker 1s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

/* MOBILE OPTIMIZATION */
@media (max-width: 768px) {

    /* Navigation: Burger Menu Layout */
    .main-nav {
        padding: 1rem 1.5rem !important;
        background: rgba(5, 5, 5, 0.9);
        /* Ensure readable on scroll */
        backdrop-filter: blur(10px);
        position: fixed !important;
        /* Ensure it stays fixed */
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        height: auto;
    }

    .container {
        padding: 0;
        /* Reset container padding inside nav */
    }

    /* Fix Hero Overlap: Push content down and stop centering if too tall */
    .hero-content {
        justify-content: flex-start !important;
        padding-top: 5rem !important;
        /* Reduced from 6rem */
        height: auto !important;
        min-height: 100vh;
    }

    /* Logo Scaling */
    .logo {
        font-size: 0.85rem !important;
        white-space: nowrap;
    }

    /* Add space between text and image in stacks (e.g. Stake section) */
    .text-block {
        margin-bottom: 3rem !important;
    }

    /* Burger Toggle Style */
    .burger-menu {
        display: block !important;
        cursor: pointer;
        color: var(--color-terminal-green);
        z-index: 101;
        font-weight: bold;
        font-size: 0.9rem;
    }

    /* Mobile Overlay Menu */
    .nav-links {
        display: none !important;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .nav-links.active {
        display: flex !important;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(5, 5, 5, 0.98);
        justify-content: center;
        align-items: center;
        gap: 3rem;
        z-index: 99;
        opacity: 1;
    }

    .nav-links.active a {
        display: block !important;
        font-size: 1.5rem !important;
        margin-left: 0 !important;
    }

    /* BUTTON in Menu */
    .nav-links.active a[href="#pricing"] {
        background: var(--color-terminal-green);
        color: var(--color-void-black) !important;
        padding: 1rem 2rem;
        border-radius: 4px;
        font-weight: 800;
    }


    /* TYPOGRAPHY & SPACING REFINEMENTS */

    /* Hero Section - Aggressive Compression for Mobile Fold */
    .hero h1,
    h1.glitch-text {
        font-size: 2rem !important;
        /* Slightly smaller */
        line-height: 1.1 !important;
        margin-bottom: 1rem !important;
        /* Reduced margin */
        letter-spacing: -0.5px !important;
    }

    .hero p,
    .hero-content p {
        font-size: 1rem !important;
        line-height: 1.4 !important;
        max-width: 95% !important;
        margin-bottom: 1.5rem !important;
        /* Override inline 3rem */
    }

    /* Specific overrides for Mission Parameter container if possible via generic selector or adjust inline in HTML next if needed. 
       Using adjacent sibling selector or specific targeting to catch the div after p */
    .hero-content .container>div.reveal {
        margin-bottom: 1.5rem !important;
        /* Override inline 3rem of mission param div */
    }

    .hero-content .check-list li {
        margin-bottom: 0.5rem;
    }


    /* BUTTON in Menu */
    .nav-links.active a[href="#pricing"] {
        background: var(--color-terminal-green);
        color: var(--color-void-black) !important;
        padding: 1rem 2rem;
        border-radius: 4px;
        font-weight: 800;
    }


    /* TYPOGRAPHY & SPACING REFINEMENTS */

    /* Hero Section */
    .hero h1,
    h1.glitch-text {
        font-size: 2.2rem !important;
        line-height: 1.1 !important;
        margin-bottom: 1.5rem !important;
        letter-spacing: -0.5px !important;
    }

    .hero p,
    .hero-content p {
        font-size: 1rem !important;
        line-height: 1.5 !important;
        max-width: 90% !important;
    }

    /* Global Sections */
    .section-dark,
    .section-black {
        padding: 4rem 0 !important;
    }

    h2 {
        font-size: 1.8rem !important;
        line-height: 1.2 !important;
        margin-bottom: 1.5rem !important;
    }

    h3 {
        font-size: 1.3rem !important;
        margin-bottom: 1rem !important;
    }

    p {
        font-size: 1rem;
    }

    /* Grid Resets */
    .grid-2col,
    .grid-3col,
    .grid-4col {
        grid-template-columns: 1fr !important;
        gap: 2.5rem !important;
    }

    /* Hide HUD lines on mobile */
    .hud-line {
        display: none !important;
    }

    /* Adjust specific containers */
    .container-full,
    .container {
        padding: 0 1.5rem;
        /* Consistent side padding */
    }
}

/* ARCHITECT VISUAL ADJUSTMENTS */
.architect-visual {
    width: 100%;
    max-height: 400px;
    object-fit: contain;
    border-radius: 4px;
    filter: grayscale(100%);
    margin-top: 223px;
}

@media (max-width: 768px) {
    .architect-visual {
        height: 265px;
        margin-top: 200px;
    }
}