:root {
    --bg-color: #F5F5F7;
    --card-bg: #FFFFFF;
    --text-primary: #111111;
    --text-secondary: #666666;
    --accent-color: #2E5CFF;
    --success-color: #00CC88;
    --warning-color: #FFB020;
    --border-color: #E5E5E5;
    --grid-gap: 1px;
}

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

body {
    background-color: var(--border-color);
    color: var(--text-primary);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Dynamic Canvas Background */
#network-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: var(--bg-color);
}

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: var(--accent-color);
}

/* Text Utilities */
.text-success {
    color: var(--success-color);
}

.highlight-green {
    position: relative;
    display: inline-block;
    color: var(--success-color);
}

.blur-text {
    filter: blur(4px);
    user-select: none;
    opacity: 0.7;
}

/* Grid System */
.grid-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    background-color: transparent;
    min-height: 100vh;
    gap: 1px;
}

/* Header */
header {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem;
    background: rgba(245, 245, 247, 0.95);
    /* Increased opacity, removed backdrop-filter to fix green flash */
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 100;
}

.logo-container {
    display: flex;
    align-items: center;
}

.logo-img {
    height: 20px;
    width: auto;
    display: block;
}

.logo-cursor {
    color: #555555;
    font-weight: 700;
    font-family: 'Fira Code', monospace;
    font-size: 1.0rem;
    line-height: 1;
    margin-left: 2px;
    animation: blink 1s step-end infinite;
}

.footer-logo {
    height: 20px;
    width: auto;
    display: block;
    margin-bottom: 0.5rem;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

nav ul {
    display: flex;
    gap: 2rem;
    list-style: none;
    font-size: 0.9rem;
    font-weight: 500;
    align-items: center;
}

/* Language Button */
.lang-btn {
    background: none;
    border: 1px solid var(--border-color);
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.8rem;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.lang-btn:hover {
    border-color: var(--text-primary);
    color: var(--text-primary);
}

/* Hero Section */
.hero {
    grid-column: 1 / -1;
    min-height: 85vh;
    padding: 2rem 2rem 6rem 2rem;
    /* Increased bottom padding to move content up */
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.hero-content {
    flex: 1;
    padding-right: 2rem;
    z-index: 2;
}

.hero h1 {
    font-size: clamp(3rem, 8vw, 7rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

.hero-strong {
    font-weight: 900;
    font-size: 1.05em;
    letter-spacing: -0.01em;
    text-shadow: 0 0.02em 0 var(--text-primary);
}

.hero p {
    font-size: 1.25rem;
    color: var(--text-secondary);
    max-width: 500px;
    margin-bottom: 3rem;
}

/* 3D Cube Animation - CLUSTER */
.hero-visual {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
    height: 400px;
}

.cube-container {
    width: 200px;
    height: 200px;
    position: relative;
    transform-style: preserve-3d;
}

.cube-cluster {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    animation: rotate 20s infinite linear;
}

.mini-cube {
    width: 100px;
    height: 100px;
    position: absolute;
    transform-style: preserve-3d;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    animation: breathe 4s ease-in-out infinite;
}

/* Face Styles */
.face {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 1px solid rgba(17, 17, 17, 0.8);
    background: rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s;
}

.front {
    transform: rotateY(0deg) translateZ(50px);
}

.back {
    transform: rotateY(180deg) translateZ(50px);
}

.right {
    transform: rotateY(90deg) translateZ(50px);
}

.left {
    transform: rotateY(-90deg) translateZ(50px);
}

.top {
    transform: rotateX(90deg) translateZ(50px);
}

.bottom {
    transform: rotateX(-90deg) translateZ(50px);
}

/* Face Colors per mini-cube? Or global? Let's stick to global minimalist */
.face {
    border-color: var(--text-primary);
    border-width: 1px;
}

/* Highlight some faces */
.front,
.back {
    border-color: var(--success-color);
    border-width: 1px;
}


/* Positions (2x2x2 Grid around center) 
   Translate X/Y/Z by +/- 50px to form a 200px cube block (since mini-cubes are 100px)
*/
.pos-1 {
    transform: translate3d(-50px, -50px, 50px);
}

/* Front Top Left */
.pos-2 {
    transform: translate3d(50px, -50px, 50px);
}

/* Front Top Right */
.pos-3 {
    transform: translate3d(-50px, 50px, 50px);
}

/* Front Bottom Left */
.pos-4 {
    transform: translate3d(50px, 50px, 50px);
}

/* Front Bottom Right */
.pos-5 {
    transform: translate3d(-50px, -50px, -50px);
}

/* Back Top Left */
.pos-6 {
    transform: translate3d(50px, -50px, -50px);
}

/* Back Top Right */
.pos-7 {
    transform: translate3d(-50px, 50px, -50px);
}

/* Back Bottom Left */
.pos-8 {
    transform: translate3d(50px, 50px, -50px);
}

/* Back Bottom Right */

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

    to {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

@keyframes breathe {

    0%,
    100% {
        /* Base positions are set via class, we use margin/transform hack or just scale? 
           Since transform is used for position, we can't easily override it in keyframes without repeating.
           Solution: Use a wrapper or manipulate the `translate3d` values.
           
           Actually, easier approach for breathing cluster:
           Use CSS variables for offsets? 
           Or simpler: animate the GAP.
           
           Let's try a transform scale on the mini-cube itself? No, that changes size.
           We want them to move apart.
           
           Let's rely on the `transform` defined in the classes.
           We need to target each pos individually in keyframes? That's verbose.
           
           Better: The `.mini-cube` has `transform` set inline/class. 
           We can wrap the content or use specific keyframes for each pos if we want true explosion.
           
           Alternative: `transform-origin`?
           
           Let's use a simpler visual trick:
           Scale the whole container? No.
           
           Let's define specific keyframes for the "expansion".
        */
    }
}

/* 
   Redefining animation strategy for breathing:
   Since we can't add to the transform easily, let's make the mini-cubes children of a 'mover' div if needed, 
   OR just define 8 keyframes. It's verbose but works.
*/

.pos-1 {
    animation: breathe-1 4.2s ease-in-out infinite;
    animation-delay: 0s;
}

.pos-2 {
    animation: breathe-2 3.8s ease-in-out infinite;
    animation-delay: 0.5s;
}

.pos-3 {
    animation: breathe-3 4.5s ease-in-out infinite;
    animation-delay: 0.2s;
}

.pos-4 {
    animation: breathe-4 4.0s ease-in-out infinite;
    animation-delay: 0.7s;
}

.pos-5 {
    animation: breathe-5 4.3s ease-in-out infinite;
    animation-delay: 0.3s;
}

.pos-6 {
    animation: breathe-6 3.9s ease-in-out infinite;
    animation-delay: 0.8s;
}

.pos-7 {
    animation: breathe-7 4.1s ease-in-out infinite;
    animation-delay: 0.4s;
}

.pos-8 {
    animation: breathe-8 4.4s ease-in-out infinite;
    animation-delay: 0.1s;
}

@keyframes breathe-1 {

    0%,
    100% {
        transform: translate3d(-50px, -50px, 50px);
    }

    50% {
        transform: translate3d(-80px, -80px, 80px);
    }
}

@keyframes breathe-2 {

    0%,
    100% {
        transform: translate3d(50px, -50px, 50px);
    }

    50% {
        transform: translate3d(80px, -80px, 80px);
    }
}

@keyframes breathe-3 {

    0%,
    100% {
        transform: translate3d(-50px, 50px, 50px);
    }

    50% {
        transform: translate3d(-80px, 80px, 80px);
    }
}

@keyframes breathe-4 {

    0%,
    100% {
        transform: translate3d(50px, 50px, 50px);
    }

    50% {
        transform: translate3d(80px, 80px, 80px);
    }
}

@keyframes breathe-5 {

    0%,
    100% {
        transform: translate3d(-50px, -50px, -50px);
    }

    50% {
        transform: translate3d(-80px, -80px, -80px);
    }
}

@keyframes breathe-6 {

    0%,
    100% {
        transform: translate3d(50px, -50px, -50px);
    }

    50% {
        transform: translate3d(80px, -80px, -80px);
    }
}

@keyframes breathe-7 {

    0%,
    100% {
        transform: translate3d(-50px, 50px, -50px);
    }

    50% {
        transform: translate3d(-80px, 80px, -80px);
    }
}

@keyframes breathe-8 {

    0%,
    100% {
        transform: translate3d(50px, 50px, -50px);
    }

    50% {
        transform: translate3d(80px, 80px, -80px);
    }
}

section[id] {
    scroll-margin-top: 120px;
}

/* Manifesto Section */
section#manifesto.manifesto {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    background: var(--border-color);
    gap: 1px;
}

.manifesto-item {
    background: var(--bg-color);
    padding: 4rem 2rem;
}

.manifesto-item h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.manifesto-item p {
    color: var(--text-secondary);
}

/* Ecosystem Section */
.ecosystem {
    grid-column: 1 / -1;
    padding: 6rem 2rem;
    background: var(--bg-color);
    border-bottom: 1px solid var(--border-color);
}

.section-header {
    margin-bottom: 4rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.section-title {
    font-size: 2.5rem;
    letter-spacing: -0.02em;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.project-card {
    background: var(--card-bg);
    padding: 2rem;
    border: 1px solid var(--border-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border-color: var(--success-color);
}

.stamp-free {
    position: absolute;
    top: 15px;
    right: 15px;
    border: 2px solid var(--success-color);
    color: var(--success-color);
    font-weight: 900;
    padding: 0.2rem 0.5rem;
    font-size: 1rem;
    line-height: 1;
    transform: rotate(15deg);
    border-radius: 4px;
    opacity: 0.8;
    z-index: 10;
    pointer-events: none;
    font-family: 'Fira Code', monospace;
}

/* --- STATUS STYLES --- */

/* 1. Live Status Dot */
/* 1. Live Status Dot */
.status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: var(--success-color);
    border-radius: 50%;
    margin-left: 8px;
    position: relative;
    box-shadow: none;
}

.status-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--success-color);
    z-index: -1;
    animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

@keyframes pulse-ring {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0.8;
    }

    100% {
        transform: translate(-50%, -50%) scale(3);
        opacity: 0;
    }
}

/* 2. Building (Card 2) */
.project-card.building-card {
    border-left: 4px solid var(--warning-color);
}

.project-card.building-card .project-tag {
    color: var(--warning-color);
    background: rgba(255, 176, 32, 0.1);
}

/* 3. Placeholder / Submit (Card 3) */
.project-card.placeholder-card {
    background-color: transparent;
    border: 2px dashed #CCC;
    cursor: pointer;
    background-image: repeating-linear-gradient(45deg,
            transparent,
            transparent 10px,
            rgba(0, 0, 0, 0.03) 10px,
            rgba(0, 0, 0, 0.03) 20px);
    transition: all 0.3s;
}

.project-card.placeholder-card:hover {
    border-color: var(--accent-color);
    background-color: rgba(46, 92, 255, 0.02);
    transform: translateY(-2px);
}

.project-card.placeholder-card .project-tag {
    background: #EAEAEA;
    color: #666;
}

.project-name {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
}

.project-tag {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--success-color);
    background: rgba(0, 204, 136, 0.1);
    padding: 0.2em 0.6em;
    border-radius: 4px;
    margin-bottom: 1rem;
    display: inline-block;
}

.project-desc {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

/* Voices/Community Section */
.voices {
    grid-column: 1 / -1;
    background: var(--text-primary);
    color: #fff;
    padding: 6rem 2rem;
    overflow: hidden;
}

.voice-slider {
    display: flex;
    gap: 4rem;
    animation: scroll 40s linear infinite;
    width: max-content;
}

.voice-item {
    min-width: 300px;
    max-width: 400px;
}

.voice-text {
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1.4;
    margin-bottom: 1.5rem;
}

.voice-author {
    font-size: 0.9rem;
    opacity: 0.6;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Call to Action */
.cta {
    grid-column: 1 / -1;
    padding: 8rem 2rem;
    background: var(--bg-color);
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    background: var(--text-primary);
    color: #fff;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    font-weight: 600;
    transition: background 0.3s;
}

.btn-primary:hover {
    background: var(--success-color);
    color: #fff;
}

/* Footer */
footer {
    grid-column: 1 / -1;
    padding: 4rem 2rem;
    background: var(--bg-color);
    display: flex;
    justify-content: space-between;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Animation Utilities */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

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

@media (max-width: 768px) {
    .hero {
        flex-direction: column;
        text-align: center;
    }

    .hero-content {
        padding-right: 0;
        margin-bottom: 3rem;
    }

    .hero h1 {
        font-size: 3rem;
    }

    .nav-links {
        display: none;
    }

    .voice-text {
        font-size: 1.2rem;
    }

    /* Update mobile styles for cluster */
    .cube-container {
        width: 150px;
        height: 150px;
    }

    .mini-cube {
        width: 75px;
        height: 75px;
        margin-top: -37.5px;
        margin-left: -37.5px;
    }

    .face {
        width: 75px;
        height: 75px;
    }

    .front {
        transform: rotateY(0deg) translateZ(37.5px);
    }

    .back {
        transform: rotateY(180deg) translateZ(37.5px);
    }

    .right {
        transform: rotateY(90deg) translateZ(37.5px);
    }

    .left {
        transform: rotateY(-90deg) translateZ(37.5px);
    }

    .top {
        transform: rotateX(90deg) translateZ(37.5px);
    }

    .bottom {
        transform: rotateX(-90deg) translateZ(37.5px);
    }

    /* Update animation keyframes for mobile? 
       Actually the keyframes use fixed pixels which might be too big for mobile.
       Let's use calc() or percentage if possible, or just accept they spread wide.
       The current keyframes use +/- 50px expanding to +/- 80px.
       On mobile (150px container), that's fine.
    */
}