:root {
    /* --- Creative Genius Palette: "Code & Void" --- */

    /* Base Layers */
    --bg-color: #0B0C10;
    /* The Void (Deepest Gunmetal) */
    --surface-color: #1F2833;
    /* The Platform (Lighter Gunmetal) */
    --surface-hover: #26303E;
    /* Interactive Surface */
    --border-color: #45A29E;
    /* Muted Teal (Structure) */

    /* Typography */
    --text-primary: #C5C6C7;
    /* Mist White */
    --text-secondary: #889299;
    /* Muted Grey */

    /* Accents */
    --accent-primary: #66FCF1;
    /* Electric Cyan (The Spark) */
    --accent-secondary: #45A29E;
    /* Secondary Teal */
    --accent-glow: rgba(102, 252, 241, 0.1);

    --font-main: 'Outfit', sans-serif;
}

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

body {
    background-color: var(--surface-color);
    color: var(--text-primary);
    font-family: var(--font-main);
    overflow-x: hidden; /* Prevent horizontal jitter */
    overflow-y: auto; /* Enable native scroll fallback */
}

/* --- Specialist Scroll Lockdown --- */
html.has-scroll-smooth {
    overflow: hidden;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5vw;
    width: 100%;
}


/* --- Global Scrollbar Styling --- */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    /* For horizontal */
}

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

::-webkit-scrollbar-thumb {
    background: var(--surface-hover);
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-primary);
    box-shadow: 0 0 10px var(--accent-glow);
}



/* --- Locomotive Scrollbar (Custom Override) --- */
.c-scrollbar {
    background-color: var(--bg-color) !important;
    width: 10px !important;
}

.c-scrollbar_thumb {
    background-color: var(--surface-hover) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 4px !important;
    width: 8px !important;
    margin: 1px !important;
    opacity: 1 !important;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.c-scrollbar_thumb:hover {
    background-color: var(--accent-primary) !important;
    box-shadow: 0 0 10px var(--accent-glow);
    cursor: grab;
}


/* Navigation */
.fixed-nav {
    position: fixed;
    /* Fixed by default */
    top: 0;
    left: 0;
    width: 100%;
    padding: 0.7rem 5vw;
    /* Slightly reduced padding */
    z-index: 100;

    /* Glassmorphism Background */
    background: rgba(10, 10, 10, 0.8);
    /* Semi-transparent dark bg */
    backdrop-filter: blur(10px);
    /* Blur effect */
    -webkit-backdrop-filter: blur(10px);
    /* Safari support */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    /* Subtle border */
    transition: all 0.3s ease;

    /* Layout */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Center Navigation */
.nav-links-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* Let logo clicks pass through if overlapping, though unlikely */
}

.portfolio-glow-link {
    pointer-events: auto; /* Re-enable for the link itself */
    color: var(--accent-primary);
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 0.8rem;
    padding: 0.6rem 2rem;
    border: 1px solid var(--accent-primary);
    border-radius: 50px;
    background: rgba(102, 252, 241, 0.05);
    box-shadow: 0 0 15px var(--accent-glow);
    transition: all 0.3s ease;
    animation: portfolio-glow 3s infinite alternate ease-in-out;
}

.portfolio-glow-link:hover {
    background: var(--accent-primary);
    color: var(--bg-color);
    box-shadow: 0 0 30px var(--accent-primary);
    transform: scale(1.05);
}

@keyframes portfolio-glow {
    0% {
        box-shadow: 0 0 5px var(--accent-glow), 0 0 10px rgba(102, 252, 241, 0.1);
        border-color: rgba(102, 252, 241, 0.3);
    }
    100% {
        box-shadow: 0 0 20px var(--accent-glow), 0 0 40px rgba(102, 252, 241, 0.2);
        border-color: var(--accent-primary);
    }
}

.nav-logo {
    height: 55px;
    /* Constrain height */
    width: auto;
    display: block;
}

/* Mobile Menu Button (Cyber Staggered) */
.mobile-menu-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    /* Right align for staggered look */
    gap: 5px;
    cursor: pointer;
    width: 40px;
    /* Slightly wider */
    padding: 5px;
    z-index: 200;
}

.mobile-menu-btn span {
    display: block;
    height: 3px;
    background-color: var(--accent-primary);
    /* Electric Cylance */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-radius: 2px;
    box-shadow: 0 0 5px var(--accent-glow);
}

/* Staggered Lengths */
.mobile-menu-btn span:nth-child(1) {
    width: 100%;
}

.mobile-menu-btn span:nth-child(2) {
    width: 60%;
}

.mobile-menu-btn span:nth-child(3) {
    width: 80%;
}

/* Hover Effect: Align & Glow */
.mobile-menu-btn:hover span {
    width: 100%;
    background-color: #fff;
    box-shadow: 0 0 10px var(--accent-primary);
}

/* Desktop: Hide Menu Icon usually, but keeping it visible as per request for visual */
/* Desktop: Menu currently visible for review. Add display:none here to hide later. */

[data-scroll-container] {
    min-height: 100vh;
}

/* Typography */
h1 {
    font-size: clamp(3rem, 8vw, 8rem);
    line-height: 0.95;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: -1px;

    /* Subtle Gradient Text for World Class feel */
    background: linear-gradient(to bottom, #ffffff 60%, #888888 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

h2 {
    font-size: clamp(2rem, 4vw, 4rem);
    margin-bottom: 3rem;
    text-align: center;
}

/* Components */
.hero {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    position: relative;
    padding: 0 1rem;
    padding-top: 120px;
    /* Push content down from fixed header */
    padding-bottom: 3rem;
    /* Space for scroll prompt */

    /* Background Image */
    background-image: url('../images/about us.png');
    background-size: cover;
    /* Original size to prevent pixelation */
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--bg-color);
    /* Fallback base */
}

/* Overlay to ensure text readability */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(11, 12, 16, 0.85);
    /* Deep dark overlay */
    z-index: 0;
}

.hero h1,
.hero p,
.hero .scroll-down {
    position: relative;
    /* Lift text above overlay */
    z-index: 1;
}

.hero h1 {
    margin-top: auto;
    /* Push to center */
}

.hero p {
    margin-bottom: auto;
    /* Push scroll down to bottom */
}

.scroll-down {
    /* position: absolute; Removed to prevent overlap */
    /* bottom: 5vh; */
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-color);
    opacity: 0.7;
    animation: bounce 2s infinite;
    cursor: pointer;
    text-decoration: none;
    /* Remove underline from anchor */
}

.scroll-down span {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}

.projects-grid {
    /* Padding removed to allow full-width footer */
    background: var(--bg-color);
    position: relative;
}

.projects-grid .container {
    padding: 10vh 5vw 0;
}

/* Add left gutter on desktop for Floating Toggles */
@media (min-width: 900px) {
    .projects-grid .container {
        padding-left: 100px;
        /* Reserve space for fixed toggle at left: 2rem */
    }
}

.grid-layout {
    display: flex;
    flex-direction: column;
    padding-bottom: 10vh;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

/* Removed Grid Media Queries as we are now using Flex Column */

.project-card {
    background: #1a1a1a;
    padding: 2rem;
    border: 1px solid #333;
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.project-card:hover {
    transform: translateY(-10px);
    border-color: var(--accent-pink);
}

.project-card h3 {
    margin-bottom: 1rem;
    color: var(--accent-primary);
}

.project-card a {
    color: var(--text-color);
    text-decoration: none;
    border-bottom: 1px solid var(--accent-pink);
}

.project-title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.project-description {
    color: #ccc;
    font-size: 1rem;
}

/* --- Modern Footer --- */
.main-footer {
    background-color: var(--surface-color);
    border-top: 1px solid var(--border-color);
    padding: 2rem 5vw 1rem;
    /* Reduced from 5rem to 2rem */
    position: relative;
    z-index: 10;
    margin-top: 5rem;
    /* Separation from projects */
    width: 100%;
}

.footer-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    /* Reduced from 3rem */
    margin-bottom: 1.5rem;
    /* Reduced from 4rem */
}

/* Minimalist Override */
.footer-content.minimalist {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    /* Reduced from 2rem */
}

.minimalist .brand-col {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.minimalist .social-links {
    justify-content: center;
    margin-top: 0.5rem;
    /* Reduced from 1rem */
}

@media (min-width: 768px) {
    .footer-content {
        grid-template-columns: 2fr 1fr 1fr;
        /* Brand wider, then links */
    }

    /* Disable Grid for Minimalist */
    .footer-content.minimalist {
        display: flex;
    }
}

/* Columns */
.footer-col h4 {
    color: var(--text-primary);
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 2px;
    margin-bottom: 1.5rem;
    text-align: left;
}

/* Brand Column */
.brand-col .footer-logo {
    width: 55px;
    margin-bottom: 1rem;
    opacity: 0.9;
}

.footer-tagline {
    color: var(--text-secondary);
    margin-bottom: 2rem;
    max-width: 300px;
    font-size: 0.95rem;
    line-height: 1.6;
}

.social-links {
    display: flex;
    gap: 1rem;
}

.social-link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.8rem;
    transition: all 0.3s ease;
}

.social-link:hover {
    background: var(--accent-primary);
    color: var(--bg-color);
    box-shadow: 0 0 15px var(--accent-glow);
}

/* Links & Contact */
.footer-col ul {
    list-style: none;
}

.footer-col ul li {
    margin-bottom: 0.8rem;
}

.footer-col ul li a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-col ul li a:hover {
    color: var(--accent-primary);
    padding-left: 5px;
    /* Subtle slide */
}

.contact-col p {
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.btn-footer-cta {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.8rem 1.5rem;
    background: transparent;
    border: 1px solid var(--accent-primary);
    color: var(--accent-primary);
    text-decoration: none;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.btn-footer-cta:hover {
    background: var(--accent-primary);
    color: var(--bg-color);
    box-shadow: 0 0 15px var(--accent-glow);
}

/* Footer Bottom */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 2rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.project-card {
    background: #1a1a1a;
    padding: 2rem;
    border: 1px solid #333;
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.project-card:hover {
    transform: translateY(-10px);
    border-color: var(--accent-pink);
}

.project-card h3 {
    margin-bottom: 1rem;
    color: var(--accent-primary);
}

.project-card a {
    color: var(--text-color);
    text-decoration: none;
    border-bottom: 1px solid var(--accent-pink);
}

.project-title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.project-description {
    color: #ccc;
    font-size: 1rem;
}

/* --- Modern Footer --- */
.main-footer {
    background-color: var(--surface-color);
    border-top: 1px solid var(--border-color);
    padding: 2rem 5vw 1rem;
    /* Reduced from 5rem to 2rem */
    position: relative;
    z-index: 10;
    margin-top: 5rem;
    /* Separation from projects */
    width: 100%;
}

.footer-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    /* Reduced from 3rem */
    margin-bottom: 1.5rem;
    /* Reduced from 4rem */
}

/* Minimalist Override */
.footer-content.minimalist {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    /* Reduced from 2rem */
}

.minimalist .brand-col {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.minimalist .social-links {
    justify-content: center;
    margin-top: 0.5rem;
    /* Reduced from 1rem */
}

@media (min-width: 768px) {
    .footer-content {
        grid-template-columns: 2fr 1fr 1fr;
        /* Brand wider, then links */
    }

    /* Disable Grid for Minimalist */
    .footer-content.minimalist {
        display: flex;
    }
}

/* Columns */
.footer-col h4 {
    color: var(--text-primary);
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 2px;
    margin-bottom: 1.5rem;
    text-align: left;
}

/* Brand Column */
.brand-col .footer-logo {
    width: 55px;
    margin-bottom: 1rem;
    opacity: 0.9;
}

.footer-tagline {
    color: var(--text-secondary);
    margin-bottom: 2rem;
    max-width: 300px;
    font-size: 0.95rem;
    line-height: 1.6;
}

.social-links {
    display: flex;
    gap: 1rem;
}

.social-link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.8rem;
    transition: all 0.3s ease;
}

.social-link:hover {
    background: var(--accent-primary);
    color: var(--bg-color);
    box-shadow: 0 0 15px var(--accent-glow);
}

/* Links & Contact */
.footer-col ul {
    list-style: none;
}

.footer-col ul li {
    margin-bottom: 0.8rem;
}

.footer-col ul li a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-col ul li a:hover {
    color: var(--accent-primary);
    padding-left: 5px;
    /* Subtle slide */
}

.contact-col p {
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.btn-footer-cta {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.8rem 1.5rem;
    background: transparent;
    border: 1px solid var(--accent-primary);
    color: var(--accent-primary);
    text-decoration: none;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.btn-footer-cta:hover {
    background: var(--accent-primary);
    color: var(--bg-color);
    box-shadow: 0 0 15px var(--accent-glow);
}

/* Footer Bottom */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 2rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.footer-bottom .heart {
    color: var(--accent-primary);
}

/* --- Scroll To Top Button --- */
/* Integrated into .view-toggles, no extra styles needed */

/* --- Menu Overlay --- */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(11, 12, 16, 0.95);
    backdrop-filter: blur(20px);
    z-index: 90;
    /* Below nav (100) */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
}

.menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

.menu-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.menu-link {
    font-size: 3rem;
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
    /* overflow: hidden; Removed to allow shadow text to bleed */
    transition: color 0.3s ease;
}

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

.menu-link::before {
    content: attr(data-text);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.1);
    color: rgba(102, 252, 241, 0.1);
    z-index: -1;
    opacity: 0;
    transition: all 0.3s ease;
}

.menu-link:hover::before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.5);
}

/* Animate links in */
.menu-link {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.5s ease, transform 0.5s ease, color 0.3s ease;
}

/* Reveal Animation */
.menu-overlay.active .menu-link {
    opacity: 1;
    transform: translateY(0);
}

.menu-overlay.active .menu-link:nth-child(1) {
    transition-delay: 0.1s;
}

.menu-overlay.active .menu-link:nth-child(2) {
    transition-delay: 0.2s;
}

.menu-overlay.active .menu-link:nth-child(3) {
    transition-delay: 0.3s;
}

.menu-overlay.active .menu-link:nth-child(4) {
    transition-delay: 0.4s;
}

/* --- Hamburger Active State (X) --- */
.mobile-menu-btn.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
    width: 100%;
}

.mobile-menu-btn.active span:nth-child(2) {
    opacity: 0;
    transform: scale(0);
}

.mobile-menu-btn.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
    width: 100%;
}


/* --- Page Specific: About Us --- */

/* Distinct Page Hero */
.page-hero {
    min-height: 100vh;
    /* Increased height */
    padding: 20vh 5vw 10vh;
    /* More breathing room top/bottom */
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: radial-gradient(circle at 70% 30%, #1a222e 0%, var(--bg-color) 70%);
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

/* ... Grid Overlay Pattern ... */

.page-hero h1 {
    font-size: clamp(3rem, 7vw, 6rem);
    line-height: 1.1;
    max-width: 1100px;
    margin-bottom: 3rem;
    /* Increased margin */
    background: transparent;
    /* Ensure no gradient bg */
    -webkit-background-clip: border-box;
    background-clip: border-box;
    /* Standard property */
    -webkit-text-fill-color: currentColor;
    /* Reset to use the color property */
    color: var(--text-primary);
    opacity: 0;
    animation: slideUp 1s 0.5s forwards;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 10;
}

/* ... decoration ... */

/* Sections */
.about-section,
.origin-section,
.team-section,
.community-section {
    padding: 20vh 5vw;
    /* Much larger spacing as requested */
    background: var(--bg-color);
}

/* ... section label ... */

/* Split Layout */
.split-layout {
    display: flex;
    flex-direction: column;
    gap: 6rem;
    /* Increased gap */
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Center text on mobile */
}

@media (min-width: 900px) {
    .split-layout {
        flex-direction: row;
        gap: 10rem;
        /* Wide gap for premium feel */
        align-items: center;
        text-align: left;
        /* Reset alignment on desktop */
    }

    .split-layout.reverse {
        flex-direction: row-reverse;
    }

    .text-block.centered-mobile {
        text-align: left;
    }

    .text-block,
    .image-block {
        flex: 1;
        width: 100%;
        min-width: 0;
    }

    .text-block {
        padding-right: 3rem;
    }

    .split-layout.reverse .text-block {
        padding-right: 0;
        padding-left: 3rem;
    }
}

/* Grid Overlay Pattern */
.grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.5;
    z-index: 0;
    pointer-events: none;
}

.page-hero-content {
    position: relative;
    z-index: 2;
    max-width: 1200px;
}

.hero-subtitle {
    font-size: clamp(0.9rem, 1.5vw, 1.1rem);
    letter-spacing: 6px;
    text-transform: uppercase;
    color: var(--accent-primary);
    margin-bottom: 1.5rem;
    display: block;
    opacity: 0;
    animation: fadeIn 1s 0.2s forwards;
    padding-left: 5px;
    /* Alignment fix */
}

.page-hero h1 {
    font-size: clamp(3rem, 7vw, 6rem);
    /* Larger Typography */
    line-height: 1;
    max-width: 1100px;
    margin-bottom: 2.5rem;
    background: none;
    color: var(--text-primary);
    opacity: 0;
    animation: slideUp 1s 0.5s forwards;
    text-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
    /* Lift off bg */
}

.hero-desc {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    color: var(--text-secondary);
    max-width: 650px;
    line-height: 1.6;
    opacity: 0;
    animation: slideUp 1s 0.7s forwards;
    /* Removed border-left to avoid visual conflict with scroll indicator */
}

/* Abstract Decoration */
.hero-decoration {
    position: absolute;
    top: 20%;
    right: 5%;
    width: 40vw;
    height: 40vw;
    z-index: 1;
    opacity: 0.5;
    pointer-events: none;
    animation: spinSlow 60s linear infinite;
}

.code-circle {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px dashed rgba(255, 255, 255, 0.05);
    border-radius: 50%;
}

.code-line {
    position: absolute;
    top: 50%;
    left: -20%;
    width: 140%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
    transform: rotate(-45deg);
    opacity: 0.3;
}

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

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

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* Scroll Indicator */
.hero-scroll-indicator {
    position: absolute;
    bottom: 5vh;
    right: 5vw;
    /* Moved to right */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    z-index: 10;
}

.hero-scroll-indicator span {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    color: var(--text-secondary);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.hero-scroll-indicator .line {
    width: 1px;
    height: 60px;
    background: var(--accent-primary);
    animation: growLine 2s infinite ease-in-out;
}

@keyframes growLine {

    0%,
    100% {
        height: 30px;
        opacity: 0.5;
    }

    50% {
        height: 70px;
        opacity: 1;
    }
}

/* Sections */
.about-section {
    padding: 25vh 5vw;
    /* Increased padding top/bottom */
    background: var(--bg-color);
}

.origin-section,
.team-section,
.community-section {
    padding: 10vh 5vw;
    background: var(--bg-color);
}

.section-label {
    color: var(--accent-primary);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
    display: block;
}

/* Split Layout */
.split-layout {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    align-items: center;
    /* Center on mobile */
    justify-content: center;
}

@media (min-width: 900px) {
    .split-layout {
        flex-direction: row;
        gap: 8rem;
        align-items: center;
        /* Center vertical alignment */
    }

    .split-layout.reverse {
        flex-direction: row-reverse;
    }

    .text-block,
    .image-block {
        flex: 1;
        width: 100%;
        /* Ensure blocks take full available width in flex */
        min-width: 0;
        /* Prevent flex overflow */
    }

    .text-block {
        padding-right: 2rem;
    }

    .split-layout.reverse .text-block {
        padding-right: 0;
        padding-left: 2rem;
    }
}

.story-text p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.text-link {
    color: var(--accent-primary);
    text-decoration: none;
    position: relative;
    padding-bottom: 2px;
    transition: color 0.3s ease;
}

.text-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--accent-primary);
    transition: width 0.3s ease;
}

.text-link:hover::after {
    width: 100%;
}

/* Abstract Box */
.abstract-box {
    width: 100%;
    aspect-ratio: 1/1;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.big-char {
    font-size: 15rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.02);
    user-select: none;
}

/* Centered Text */
.centered-text {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.centered-text h3 {
    font-size: 3rem;
    margin-bottom: 2rem;
    color: var(--text-primary);
}

/* Team Grid */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 2rem;
    margin-top: 4rem;
}

.team-card {
    background: var(--surface-color);
    padding: 2rem;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
    cursor: default;
}

.team-card:hover {
    border-color: var(--accent-primary);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.member-role {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent-secondary);
    margin-bottom: 0.5rem;
}

.member-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

.member-line {
    width: 20px;
    height: 2px;
    background: var(--accent-primary);
    transition: width 0.3s ease;
}

.team-card:hover .member-line {
    width: 100%;
}

/* MESHED Box */
.meshed-box {
    width: 100%;
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, #1a1a1a 0%, #2c3e50 100%);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.meshed-box span {
    font-size: 5rem;
    font-weight: 700;
    color: var(--accent-primary);
}

.btn-outline {
    display: inline-block;
    padding: 1rem 2rem;
    border: 1px solid var(--accent-primary);
    color: var(--accent-primary);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 2rem;
    transition: all 0.3s ease;
}

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