/* === RESET & BASE === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    background: #0a0a0a;
    color: #f0ebe3;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    letter-spacing: 0.01em;
    line-height: 1.65;
    overflow-x: hidden;
    min-height: 100vh;
}
a { color: #d4af37; text-decoration: none; position: relative; }
a:hover { color: #ff4466; }
a::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0;
    width: 0; height: 2px;
    background: #ff4466;
    transition: width 0.3s ease;
}
a:hover::after { width: 100%; }

/* === SCAN LINES === */
.scan-lines {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,0.08) 2px,
        rgba(0,0,0,0.08) 4px
    );
}

/* === ORGANIC BLOBS BACKGROUND === */
.blobs-container {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    will-change: transform;
}
.blob-1 {
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(255,68,102,0.2), transparent 70%);
    top: 10%; left: 30%;
    animation: blobDrift1 45s ease-in-out infinite;
}
.blob-2 {
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(212,175,55,0.15), transparent 70%);
    top: 50%; right: 10%;
    animation: blobDrift2 55s ease-in-out infinite;
}
.blob-3 {
    width: 350px; height: 350px;
    background: radial-gradient(circle, rgba(0,201,167,0.15), transparent 70%);
    bottom: 20%; left: 50%;
    animation: blobDrift3 40s ease-in-out infinite;
}
.blob-4 {
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(212,175,55,0.12), transparent 70%);
    top: 70%; left: 10%;
    animation: blobDrift4 50s ease-in-out infinite;
}
@keyframes blobDrift1 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(100px, 50px) rotate(120deg); }
    66% { transform: translate(-60px, 80px) rotate(240deg); }
}
@keyframes blobDrift2 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(-80px, -60px) rotate(-90deg); }
    66% { transform: translate(40px, -100px) rotate(-200deg); }
}
@keyframes blobDrift3 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(120px, -80px); }
}
@keyframes blobDrift4 {
    0%, 100% { transform: translate(0, 0); }
    40% { transform: translate(60px, -120px); }
    80% { transform: translate(-80px, 40px); }
}

/* === TERRAZZO === */
.terrazzo {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1s ease;
}
.terrazzo.visible { opacity: 1; }
.terrazzo-speck {
    position: absolute;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.terrazzo-speck.visible { opacity: 1; }

/* === DOTTED GRID OVERLAY === */
.main-content::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(circle, rgba(212,175,55,0.06) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* === SIDEBAR === */
.sidebar {
    position: fixed;
    top: 0; left: 0;
    width: clamp(240px, 22vw, 320px);
    height: 100vh;
    background: #0a0a0a;
    border-right: 1px solid rgba(212,175,55,0.15);
    z-index: 100;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.sidebar.visible {
    opacity: 1;
    transform: translateX(0);
}
.sidebar-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: 2rem 1rem;
    position: relative;
}
.sidebar-wordmark {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.85rem;
    color: #d4af37;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    margin-bottom: 3rem;
}
.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
}
.nav-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    transition: transform 0.25s ease;
}
.nav-icon:hover {
    transform: rotate(15deg) scale(1.15);
}
.nav-icon:hover svg polygon,
.nav-icon:hover svg circle,
.nav-icon:hover svg path,
.nav-icon:hover svg line {
    stroke: #f0d060;
}
.nav-icon::after { display: none; }
.nav-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: clamp(0.7rem, 0.9vw, 0.85rem);
    color: #6b6358;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.sidebar-line {
    flex: 1;
    width: 1px;
    background: #d4af37;
    margin: 2rem 0;
    animation: linePulse 3s ease-in-out infinite;
}
@keyframes linePulse {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.6; }
}
.sidebar-blob {
    margin-top: auto;
}
.morph-blob {
    animation: morphBlob 25s ease-in-out infinite;
}
@keyframes morphBlob {
    0% { d: path("M44.7,-76.4C58.8,-69.2,71.8,-59.1,79.6,-45.8C87.4,-32.5,90,-16.3,88.3,-0.9C86.7,14.4,80.8,28.8,72.4,41.4C64,54,53.1,64.8,40.1,72.2C27.1,79.6,13.6,83.6,-1.2,85.6C-16,87.7,-32,87.8,-44.4,80.4C-56.8,73,-65.6,58.1,-72.8,43.2C-80,28.3,-85.6,14.2,-85.8,-0.1C-86,-14.4,-80.8,-28.8,-72.4,-40.8C-64,-52.8,-52.4,-62.4,-39.4,-70.2C-26.4,-78,-13.2,-84,1.2,-86.1C15.6,-88.2,31.2,-86.4,44.7,-76.4Z"); }
    25% { d: path("M38.5,-65.5C51.4,-58.3,64.3,-50.3,72.6,-38.4C80.9,-26.5,84.6,-10.7,82.6,3.9C80.6,18.5,72.9,31.8,63.2,42.6C53.5,53.4,41.8,61.7,28.8,67.8C15.8,73.9,1.5,77.8,-13.3,77.1C-28.1,76.4,-43.4,71.1,-54.8,61.4C-66.2,51.7,-73.7,37.6,-78.3,22.3C-82.9,7,-84.6,-9.5,-80.1,-23.8C-75.6,-38.1,-64.9,-50.2,-51.8,-57.2C-38.7,-64.2,-23.2,-66.1,-8.5,-55.1C6.2,-44.1,25.6,-72.7,38.5,-65.5Z"); }
    50% { d: path("M42.1,-71.8C55.4,-64.3,67.6,-54.1,74.2,-41.1C80.8,-28.1,81.8,-12.3,79.5,2.4C77.2,17.1,71.6,30.7,63.1,42.1C54.6,53.5,43.2,62.7,30.2,69.1C17.2,75.5,2.6,79.1,-11.9,77.6C-26.4,76.1,-40.8,69.5,-52.6,60C-64.4,50.5,-73.6,38.1,-78,24C-82.4,9.9,-82,-5.9,-77.5,-19.8C-73,-33.7,-64.4,-45.7,-53,-54.2C-41.6,-62.7,-27.4,-67.7,-13.2,-60.4C1,-53.1,28.8,-79.3,42.1,-71.8Z"); }
    75% { d: path("M46.3,-79C60.1,-70.9,71.8,-59,78.5,-44.8C85.2,-30.6,86.9,-14.1,84.3,1.1C81.7,16.3,74.8,30.3,65.8,42.3C56.8,54.3,45.7,64.3,32.8,70.8C19.9,77.3,5.2,80.3,-9.3,78.7C-23.8,77.1,-38.1,70.9,-49.8,61.6C-61.5,52.3,-70.6,39.9,-75.9,25.8C-81.2,11.7,-82.7,-4.1,-79.1,-18.3C-75.5,-32.5,-66.8,-45.1,-55.1,-53.8C-43.4,-62.5,-28.7,-67.3,-14,-63.4C0.7,-59.5,32.5,-87.1,46.3,-79Z"); }
    100% { d: path("M44.7,-76.4C58.8,-69.2,71.8,-59.1,79.6,-45.8C87.4,-32.5,90,-16.3,88.3,-0.9C86.7,14.4,80.8,28.8,72.4,41.4C64,54,53.1,64.8,40.1,72.2C27.1,79.6,13.6,83.6,-1.2,85.6C-16,87.7,-32,87.8,-44.4,80.4C-56.8,73,-65.6,58.1,-72.8,43.2C-80,28.3,-85.6,14.2,-85.8,-0.1C-86,-14.4,-80.8,-28.8,-72.4,-40.8C-64,-52.8,-52.4,-62.4,-39.4,-70.2C-26.4,-78,-13.2,-84,1.2,-86.1C15.6,-88.2,31.2,-86.4,44.7,-76.4Z"); }
}

/* === MOBILE BAR === */
.mobile-bar {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 56px;
    background: #0a0a0a;
    border-bottom: 1px solid rgba(212,175,55,0.15);
    z-index: 200;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
}
.mobile-wordmark {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.85rem;
    color: #d4af37;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
.hamburger {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

/* === MAIN CONTENT === */
.main-content {
    margin-left: clamp(240px, 22vw, 320px);
    position: relative;
    z-index: 2;
}

/* === HERO VOID === */
.hero-void {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 4rem clamp(2rem, 5vw, 6rem);
    position: relative;
}
.hero-headline {
    position: relative;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: clamp(3rem, 10vw, 8rem);
    letter-spacing: -0.03em;
    line-height: 0.95;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.hero-headline.visible { opacity: 1; }
.glitch-layer {
    display: block;
    position: absolute;
    top: 0; left: 0;
    width: 100%;
}
.glitch-main {
    position: relative;
    color: #d4af37;
}
.glitch-r {
    color: #ff4466;
    mix-blend-mode: screen;
    opacity: 0.7;
    transform: translate(2px, -1px);
}
.glitch-g {
    color: #00c9a7;
    mix-blend-mode: screen;
    opacity: 0.7;
    transform: translate(-2px, 1px);
}
.glitch-b {
    color: #d4af37;
    mix-blend-mode: screen;
    opacity: 0.3;
    transform: translate(1px, 2px);
}
.hero-sub {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    color: #6b6358;
    margin-top: 2rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease 1.4s, transform 0.6s ease 1.4s;
}
.hero-sub.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Glitch animation */
@keyframes glitchJitter {
    0%, 95%, 100% { transform: translate(2px, -1px); }
    96% { transform: translate(-4px, 2px); }
    97% { transform: translate(6px, -3px); }
    98% { transform: translate(-2px, 4px); }
    99% { transform: translate(3px, -2px); }
}
@keyframes glitchJitter2 {
    0%, 95%, 100% { transform: translate(-2px, 1px); }
    96% { transform: translate(5px, -2px); }
    97% { transform: translate(-3px, 4px); }
    98% { transform: translate(4px, -1px); }
    99% { transform: translate(-5px, 3px); }
}
.hero-headline.visible .glitch-r {
    animation: glitchJitter 4s ease-in-out infinite;
}
.hero-headline.visible .glitch-g {
    animation: glitchJitter2 4s ease-in-out infinite;
}

/* === MANIFESTO STRIP === */
.manifesto-strip {
    background: #d4af37;
    padding: 3rem clamp(2rem, 5vw, 6rem);
    position: relative;
    z-index: 3;
    opacity: 0;
    transform: translateX(100px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.manifesto-strip.visible {
    opacity: 1;
    transform: translateX(0);
}
.manifesto-text {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    line-height: 1.2;
    color: #0a0a0a;
    letter-spacing: -0.02em;
}

/* === ZIGZAG DIVIDER === */
.zigzag-divider {
    height: 4px;
    background: repeating-linear-gradient(90deg, #d4af37, #d4af37 8px, transparent 8px, transparent 16px);
    position: relative;
    z-index: 3;
}

/* === FEATURE GRID === */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem 3.5rem;
    padding: 6rem clamp(2rem, 5vw, 6rem);
    position: relative;
    z-index: 3;
}
.glass-card {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(24px) saturate(1.2);
    -webkit-backdrop-filter: blur(24px) saturate(1.2);
    border: 1px solid rgba(212, 175, 55, 0.18);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    padding: 2rem;
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16,1,0.3,1),
                border-color 0.3s ease, box-shadow 0.3s ease;
}
.glass-card.visible {
    opacity: 1;
    transform: translateY(0);
}
.glass-card:hover {
    border-color: rgba(212, 175, 55, 0.45);
    box-shadow: 0 8px 32px rgba(212, 175, 55, 0.12);
    transform: translateY(-4px);
}
.card-1 { transition-delay: 0s; }
.card-2 { transition-delay: 0.15s; }
.card-3 { transition-delay: 0.3s; }
.card-graph {
    width: 100%;
    height: 150px;
    margin-bottom: 1.5rem;
    border-radius: 8px;
    overflow: hidden;
    background: #1a1a1a;
}
.card-graph svg { width: 100%; height: 100%; }
.card-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: clamp(0.7rem, 0.9vw, 0.85rem);
    color: #d4af37;
    display: block;
    margin-bottom: 0.5rem;
}
.card-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    color: #d4af37;
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
}
.card-desc {
    color: #f0ebe3;
    font-size: clamp(0.9rem, 1.1vw, 1rem);
    line-height: 1.6;
}

/* === ORGANIC INTERLUDE === */
.organic-interlude {
    min-height: 60vh;
    position: relative;
    z-index: 2;
    overflow: hidden;
}
.interlude-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
}
.ib-1 {
    width: 350px; height: 350px;
    background: radial-gradient(circle, rgba(212,175,55,0.25), transparent 70%);
    top: 10%; left: 20%;
    animation: ibFloat1 30s ease-in-out infinite;
}
.ib-2 {
    width: 250px; height: 250px;
    background: radial-gradient(circle, rgba(255,68,102,0.2), transparent 70%);
    top: 40%; right: 15%;
    animation: ibFloat2 25s ease-in-out infinite;
}
.ib-3 {
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(0,201,167,0.2), transparent 70%);
    bottom: 10%; left: 45%;
    animation: ibFloat3 35s ease-in-out infinite;
}
@keyframes ibFloat1 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(80px, 40px); }
}
@keyframes ibFloat2 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-60px, -50px); }
}
@keyframes ibFloat3 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-40px, 60px); }
}

/* === CLOSING STATEMENT === */
.closing-statement {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    position: relative;
    z-index: 3;
}
.closing-text {
    position: relative;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: clamp(3rem, 8vw, 7rem);
    letter-spacing: -0.03em;
    line-height: 0.95;
    text-align: center;
    opacity: 0;
    transition: opacity 0.8s ease;
}
.closing-text.visible { opacity: 1; }
.closing-text .glitch-main { color: #d4af37; }
.closing-text .glitch-r {
    color: #ff4466; mix-blend-mode: screen; opacity: 0.7;
    transform: translate(2px, -1px);
}
.closing-text .glitch-g {
    color: #00c9a7; mix-blend-mode: screen; opacity: 0.7;
    transform: translate(-2px, 1px);
}
.closing-text .glitch-b {
    color: #d4af37; mix-blend-mode: screen; opacity: 0.3;
    transform: translate(1px, 2px);
}
.closing-text.visible .glitch-r { animation: glitchJitter 4s ease-in-out infinite; }
.closing-text.visible .glitch-g { animation: glitchJitter2 4s ease-in-out infinite; }

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .sidebar { display: none; }
    .mobile-bar { display: flex; }
    .main-content { margin-left: 0; padding-top: 56px; }
    .hero-void { padding: 2rem 1.5rem; min-height: calc(100vh - 56px); }
    .feature-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 3rem 1.5rem;
    }
    .manifesto-strip { padding: 2rem 1.5rem; }
    .closing-statement { padding: 3rem 1.5rem; }
    .closing-text { font-size: clamp(2rem, 6vw, 4rem); }
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
    .blob, .interlude-blob, .morph-blob, .sidebar-line,
    .glitch-r, .glitch-g { animation: none !important; }
    .glitch-r, .glitch-g, .glitch-b { opacity: 0 !important; }
}