/* =====================================================================
   simidiot.com — Simulated Intelligence Diagnostic & Operational Testing
   Monolithic intelligence bureau carved from living marble.
   Bento-box grid + blobitecture + procedural SVG marble + glassmorphism.
   ===================================================================== */

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

html {
    background: #0A0A0A;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: "Space Mono", ui-monospace, "Courier New", monospace;
    font-size: clamp(0.9rem, 1.4vw, 1.1rem);
    line-height: 1.65;
    letter-spacing: 0.02em;
    color: #1A1A1A;
    background: #0A0A0A;
    overflow-x: hidden;
    min-height: 100vh;
}

img,
svg {
    display: block;
    max-width: 100%;
}

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

p {
    margin: 0;
}

/* ---------- Hidden SVG defs ---------- */
.svg-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

/* ---------- Continuous Marble Slab Background (Parallax) ---------- */
.marble-slab-container {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.marble-slab {
    position: absolute;
    inset: -10vh -5vw -10vh -5vw;
    background:
        radial-gradient(ellipse at 20% 10%, rgba(176, 176, 176, 0.20) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(107, 107, 107, 0.25) 0%, transparent 55%),
        radial-gradient(ellipse at 50% 50%, rgba(46, 46, 46, 0.40) 0%, rgba(10, 10, 10, 1) 70%),
        linear-gradient(135deg, #0A0A0A 0%, #1A1A1A 40%, #2E2E2E 60%, #0A0A0A 100%);
    background-size: 200% 200%, 200% 200%, 100% 100%, 100% 100%;
    background-position: 0% 0%, 100% 100%, 0 0, 0 0;
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

.marble-slab::before,
.marble-slab::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.marble-slab::before {
    background:
        repeating-linear-gradient(
            112deg,
            transparent 0px,
            transparent 90px,
            rgba(176, 176, 176, 0.06) 91px,
            rgba(107, 107, 107, 0.10) 95px,
            transparent 96px,
            transparent 220px
        ),
        repeating-linear-gradient(
            38deg,
            transparent 0px,
            transparent 140px,
            rgba(176, 176, 176, 0.04) 141px,
            rgba(229, 229, 229, 0.04) 144px,
            transparent 145px,
            transparent 320px
        );
    mix-blend-mode: screen;
    opacity: 0.85;
}

.marble-slab::after {
    background:
        radial-gradient(ellipse at 30% 80%, rgba(245, 245, 245, 0.05) 0%, transparent 35%),
        radial-gradient(ellipse at 70% 20%, rgba(176, 176, 176, 0.06) 0%, transparent 40%);
    mix-blend-mode: overlay;
}

/* ---------- Persistent Blobitecture Navigation Blob ---------- */
.nav-blob {
    position: fixed;
    top: 24px;
    left: 24px;
    width: 84px;
    height: 84px;
    z-index: 100;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-blob:hover {
    transform: scale(1.08);
}

.blob-svg {
    width: 100%;
    height: 100%;
    animation: nav-rotate 30s linear infinite;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.55));
    transition: filter 0.4s ease;
}

.nav-blob:hover .blob-svg {
    filter: drop-shadow(0 6px 22px rgba(245, 245, 245, 0.18));
    animation-play-state: running;
}

@keyframes nav-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.blob-svg path {
    transition: fill 0.4s ease;
}

.blob-text {
    fill: #0A0A0A;
    font-family: "Space Mono", monospace;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.04em;
    /* Counter-rotate so text stays upright */
    transform-origin: 50% 50%;
    animation: nav-counter-rotate 30s linear infinite;
}

@keyframes nav-counter-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}

/* Pulse on hover */
.nav-blob::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 245, 245, 0.20) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.nav-blob:hover::before {
    opacity: 1;
    animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50%      { transform: scale(1.18); opacity: 0.9; }
}

/* Radial menu */
.nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-blob:hover .nav-menu,
.nav-blob.is-open .nav-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.nav-link {
    display: inline-block;
    font-family: "Space Mono", monospace;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #E8E8E8;
    padding: 6px 12px;
    background: rgba(10, 10, 10, 0.65);
    border: 1px solid rgba(232, 232, 232, 0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    white-space: nowrap;
}

.nav-link:hover {
    background: rgba(245, 245, 245, 0.92);
    color: #0A0A0A;
    border-color: #F5F5F5;
}

/* ---------- Skeleton Loader ---------- */
.skeleton-loader {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: #0A0A0A;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 1px;
    padding: 24px;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

.skeleton-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.skel-cell {
    grid-column: var(--gc);
    grid-row: var(--gr);
    border: 1px solid #2E2E2E;
    background: transparent;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
    animation: skel-draw 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: var(--d);
}

@keyframes skel-draw {
    0%   { opacity: 0; transform: scaleX(0); }
    60%  { opacity: 1; transform: scaleX(1); }
    100% { opacity: 1; transform: scaleX(1); }
}

/* ---------- Page wrapper ---------- */
.page {
    position: relative;
    z-index: 1;
}

/* ---------- Section Tag (band header strip) ---------- */
.section-tag {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 28px;
    font-family: "Space Mono", monospace;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #B0B0B0;
    background: #0A0A0A;
    border-bottom: 1px solid #2E2E2E;
}

.section-tag-light {
    color: #4A4A4A;
    background: #F5F5F5;
    border-bottom: 1px solid #B0B0B0;
}

/* ---------- Bands ---------- */
.band {
    position: relative;
    width: 100%;
    background: transparent;
}

.band-1 { background: #0A0A0A; }
.band-2 { background: #1A1A1A; }
.band-3 { background: #F5F5F5; }
.band-4 { background: #0A0A0A; }

/* ---------- Band Dividers (organic blob breaks) ---------- */
.band-divider {
    position: relative;
    width: 100%;
    height: 80px;
    line-height: 0;
    overflow: hidden;
}

.band-divider svg {
    width: 100%;
    height: 100%;
    display: block;
}

.band-divider-1 { background: #1A1A1A; }
.band-divider-2 { background: #F5F5F5; }
.band-divider-3 { background: #0A0A0A; }

/* ---------- Bento Grid Base ---------- */
.bento {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(12, 1fr);
    gap: 1px;
    background: #000000; /* hairline */
    padding: 1px;
}

/* ---------- Cell Base ---------- */
.cell {
    position: relative;
    overflow: hidden;
    min-height: 0;
    background: #0A0A0A;
    transition: box-shadow 0.4s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Cell Variants: Backgrounds ---------- */
.cell-marble-light {
    background: #F5F5F5;
    color: #1A1A1A;
}

.cell-marble-light::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            115deg,
            transparent 0px,
            transparent 60px,
            rgba(107, 107, 107, 0.08) 61px,
            rgba(176, 176, 176, 0.10) 64px,
            transparent 65px,
            transparent 180px
        ),
        repeating-linear-gradient(
            42deg,
            transparent 0px,
            transparent 90px,
            rgba(107, 107, 107, 0.05) 91px,
            transparent 95px,
            transparent 240px
        ),
        radial-gradient(ellipse at 30% 30%, #FFFFFF 0%, #F5F5F5 60%, #E8E8E8 100%);
    pointer-events: none;
    z-index: 0;
}

.cell-dark {
    background: #1A1A1A;
    color: #E8E8E8;
}

.cell-dark::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            118deg,
            transparent 0px,
            transparent 70px,
            rgba(176, 176, 176, 0.06) 71px,
            rgba(232, 232, 232, 0.04) 74px,
            transparent 75px,
            transparent 200px
        ),
        radial-gradient(ellipse at 70% 60%, #2E2E2E 0%, #1A1A1A 70%);
    pointer-events: none;
    z-index: 0;
}

.cell-glass {
    background: rgba(255, 255, 255, 0.04);
    color: #1A1A1A;
    backdrop-filter: blur(16px) saturate(110%);
    -webkit-backdrop-filter: blur(16px) saturate(110%);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.cell-glass-dark {
    background: rgba(255, 255, 255, 0.06);
    color: #E8E8E8;
    backdrop-filter: blur(16px) saturate(110%);
    -webkit-backdrop-filter: blur(16px) saturate(110%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.20);
}

.cell-glass-dark::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            120deg,
            transparent 0px,
            transparent 50px,
            rgba(245, 245, 245, 0.025) 51px,
            transparent 55px,
            transparent 140px
        );
    pointer-events: none;
    z-index: 0;
}

.cell-glass-dark:hover {
    box-shadow: 0 14px 48px rgba(0, 0, 0, 0.40);
    border-color: rgba(245, 245, 245, 0.22);
}

.cell-glass:hover {
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
}

.cell-void-light {
    background: #FFFFFF;
}

.cell-void-white {
    background: #F5F5F5;
}

.cell-void-black {
    background: #0A0A0A;
}

/* ---------- BAND 1: Hero Bento Layout ---------- */
.bento-1 {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(4, minmax(140px, 1fr));
    min-height: 100vh;
}

.cell-hero {
    grid-column: 1 / 9;
    grid-row: 1 / 4;
}

.bento-1 > .cell-data:nth-of-type(1) { /* EST */
    grid-column: 9 / 13;
    grid-row: 1 / 2;
}

.bento-1 > .cell-data:nth-of-type(2) { /* SYSTEM REV */
    grid-column: 9 / 13;
    grid-row: 2 / 3;
}

.bento-1 > .cell-status {
    grid-column: 9 / 11;
    grid-row: 3 / 4;
}

.bento-1 > .cell-void-light {
    grid-column: 11 / 13;
    grid-row: 3 / 4;
}

.bento-1 > .cell-marble-light {
    grid-column: 1 / 4;
    grid-row: 4 / 5;
}

.bento-1 > .cell-data.cell-dark {
    grid-column: 4 / 8;
    grid-row: 4 / 5;
}

/* The remaining cell after bento-1 layout — fill cell at columns 8-12, row 4 */
.bento-1 > .cell-data:last-of-type { /* PERSONNEL */
    grid-column: 8 / 13;
    grid-row: 4 / 5;
}

/* ---------- Hero Cell ---------- */
.cell-hero {
    background: #0A0A0A;
    color: #F5F5F5;
    padding: 0;
}

.marble-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.marble-bg svg {
    width: 100%;
    height: 100%;
}

.marble-bg-dark {
    background: linear-gradient(135deg, #0A0A0A 0%, #1A1A1A 50%, #0A0A0A 100%);
}

.marble-bg-light {
    background: linear-gradient(135deg, #F5F5F5 0%, #E8E8E8 50%, #F5F5F5 100%);
}

.hero-marble {
    opacity: 0.55;
}

.cell-content {
    position: relative;
    z-index: 2;
    padding: clamp(28px, 4vw, 64px);
    height: 100%;
    width: 100%;
}

.cell-content-hero {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(20px, 3vw, 40px);
}

.hero-classification {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 32px;
    font-family: "Space Mono", monospace;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #6B6B6B;
}

.class-tag {
    position: relative;
    padding-left: 14px;
}

.class-tag::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 6px;
    height: 6px;
    background: #F5F5F5;
    transform: translateY(-50%);
    border-radius: 1px;
}

.hero-title {
    font-family: "Space Grotesk", "Space Mono", sans-serif;
    font-weight: 300;
    font-size: clamp(4rem, 10vw, 9rem);
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: #FFFFFF;
    text-transform: uppercase;
    font-feature-settings: "ss01";
    text-shadow: 0 4px 28px rgba(0, 0, 0, 0.45);
    margin: 0;
}

.hero-subtitle {
    font-family: "Space Mono", monospace;
    font-size: clamp(0.85rem, 1.2vw, 1rem);
    color: #6B6B6B;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    max-width: 56ch;
    margin-top: -8px;
}

.hero-divider {
    width: 80px;
    height: 1px;
    background: #6B6B6B;
    margin: 8px 0;
}

.hero-epigraph {
    font-family: "Cormorant Garamond", "Lora", Georgia, serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.2rem, 2.4vw, 1.8rem);
    line-height: 1.45;
    color: #B0B0B0;
    max-width: 60ch;
}

/* ---------- Data Cells ---------- */
.cell-data {
    padding: clamp(18px, 2.4vw, 36px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    position: relative;
}

.cell-data > * {
    position: relative;
    z-index: 1;
}

.data-label {
    font-family: "Space Mono", monospace;
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #6B6B6B;
}

.data-label-light {
    color: #B0B0B0;
}

.data-value {
    font-family: "Space Grotesk", "Space Mono", sans-serif;
    font-weight: 300;
    font-size: clamp(1.8rem, 3.4vw, 2.8rem);
    letter-spacing: -0.02em;
    color: #1A1A1A;
    line-height: 1;
    font-feature-settings: "ss01";
}

.data-value-light {
    color: #F5F5F5;
}

.data-value-sm {
    font-family: "Space Mono", monospace;
    font-size: clamp(1rem, 1.6vw, 1.3rem);
    font-weight: 700;
    color: #1A1A1A;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.data-value-light.data-value-sm,
.data-value-sm.data-value-light {
    color: #E8E8E8;
}

.data-sub {
    font-family: "Space Mono", monospace;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: #6B6B6B;
    text-transform: uppercase;
}

.data-sub-light {
    color: #B0B0B0;
}

/* Status cell with mini blob indicator */
.cell-status {
    background: #0A0A0A;
    color: #E8E8E8;
}

.cell-status .data-label {
    color: #B0B0B0;
}

.cell-status .data-value-sm {
    color: #F5F5F5;
}

.cell-status .data-sub {
    color: #6B6B6B;
}

.status-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.status-dot {
    width: 12px;
    height: 12px;
    background: #F5F5F5;
    border-radius: 50% 45% 50% 45%;
    animation: pulse-dot 2.4s ease-in-out infinite;
    box-shadow: 0 0 12px rgba(245, 245, 245, 0.55);
}

@keyframes pulse-dot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.35); opacity: 0.6; }
}

/* Floating blobs */
.cell-void-light,
.cell-void-white {
    display: flex;
    align-items: center;
    justify-content: center;
}

.floating-blob {
    width: 60%;
    height: 60%;
    max-width: 140px;
    max-height: 140px;
    animation: blob-float 18s ease-in-out infinite;
}

.mini-blob {
    width: 50%;
    max-width: 90px;
}

.blob-rotate {
    animation: blob-rotate 24s linear infinite;
}

.blob-rotate-slow {
    animation: blob-rotate 38s linear infinite;
}

.blob-rotate-rev {
    animation: blob-rotate-rev 30s linear infinite;
}

@keyframes blob-float {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25%      { transform: translate(4px, -6px) rotate(8deg); }
    50%      { transform: translate(-3px, 4px) rotate(-6deg); }
    75%      { transform: translate(5px, 3px) rotate(4deg); }
}

@keyframes blob-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes blob-rotate-rev {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}

/* ---------- BAND 2: Methodology Bento Layout ---------- */
.bento-2 {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(5, minmax(120px, 1fr));
    min-height: 100vh;
}

.bento-2 > .cell-statement:nth-of-type(1) {
    grid-column: 1 / 5;
    grid-row: 1 / 2;
}

.bento-2 > .cell-statement:nth-of-type(2) {
    grid-column: 1 / 5;
    grid-row: 2 / 3;
}

.bento-2 > .cell-void-white {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
}

.bento-2 > .cell-statement:nth-of-type(3) {
    grid-column: 3 / 5;
    grid-row: 3 / 4;
}

.bento-2 > .cell-blob-monument {
    grid-column: 5 / 13;
    grid-row: 1 / 5;
}

.bento-2 > .cell-tiny:nth-of-type(1) {
    grid-column: 1 / 4;
    grid-row: 4 / 6;
}

.bento-2 > .cell-void-black {
    grid-column: 4 / 5;
    grid-row: 4 / 6;
}

.bento-2 > .cell-tiny:nth-of-type(2) {
    grid-column: 5 / 9;
    grid-row: 5 / 6;
}

.bento-2 > .cell-tiny:nth-of-type(3) {
    grid-column: 9 / 13;
    grid-row: 5 / 6;
}

/* Statement cells */
.cell-statement {
    padding: clamp(20px, 2.4vw, 36px);
}

.statement {
    font-family: "Space Mono", monospace;
    font-size: clamp(0.95rem, 1.4vw, 1.15rem);
    line-height: 1.55;
    color: #1A1A1A;
    letter-spacing: 0.01em;
    margin-top: 12px;
}

.statement-light {
    color: #E8E8E8;
}

/* Glass-dark statement override - use class chain */
.cell-glass.cell-statement .data-label {
    color: #4A4A4A;
}

/* Blob monument (large blob with marble) */
.cell-blob-monument {
    background: #1A1A1A;
    padding: clamp(30px, 4vw, 60px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.blob-frame {
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-clip-path: path('M50%,5% C78%,5% 95%,28% 92%,52% C90%,78% 70%,95% 48%,93% C22%,90% 5%,68% 8%,42% C11%,18% 28%,5% 50%,5% Z');
    clip-path: path('M50%,5% C78%,5% 95%,28% 92%,52% C90%,78% 70%,95% 48%,93% C22%,90% 5%,68% 8%,42% C11%,18% 28%,5% 50%,5% Z');
}

/* Use SVG-friendly clip-path with viewBox-relative coords via percentage:
   But CSS clip-path: path() doesn't accept percentages — we instead use a
   shape and inset that approximates a blob. Use a robust approach below. */
.blob-frame {
    -webkit-clip-path: none;
    clip-path: none;
    overflow: hidden;
    border-radius: 48% 52% 46% 54% / 52% 44% 56% 48%;
    animation: blob-morph 20s ease-in-out infinite;
    box-shadow:
        inset 0 0 0 1px rgba(245, 245, 245, 0.18),
        0 24px 60px rgba(0, 0, 0, 0.45);
}

.blob-frame-2 {
    border-radius: 56% 44% 50% 50% / 48% 60% 40% 52%;
    animation-duration: 28s;
}

@keyframes blob-morph {
    0%, 100% {
        border-radius: 48% 52% 46% 54% / 52% 44% 56% 48%;
    }
    25% {
        border-radius: 58% 42% 54% 46% / 44% 56% 44% 56%;
    }
    50% {
        border-radius: 44% 56% 50% 50% / 56% 48% 52% 44%;
    }
    75% {
        border-radius: 52% 48% 60% 40% / 48% 52% 48% 52%;
    }
}

.blob-marble {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.blob-marble svg {
    width: 100%;
    height: 100%;
}

.blob-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 8% 12%;
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.10) 0%, rgba(10, 10, 10, 0.45) 100%);
}

.blob-tag {
    font-family: "Space Mono", monospace;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #B0B0B0;
    padding: 6px 12px;
    border: 1px solid rgba(245, 245, 245, 0.22);
    background: rgba(10, 10, 10, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    margin-bottom: 18px;
}

.blob-title {
    font-family: "Space Grotesk", "Space Mono", sans-serif;
    font-weight: 300;
    font-size: clamp(1.8rem, 4.2vw, 3.6rem);
    line-height: 0.96;
    letter-spacing: -0.03em;
    color: #FFFFFF;
    text-transform: uppercase;
    font-feature-settings: "ss01";
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.55);
    margin-bottom: 16px;
}

.blob-caption {
    font-family: "Cormorant Garamond", "Lora", Georgia, serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(0.95rem, 1.4vw, 1.2rem);
    color: #E8E8E8;
    line-height: 1.5;
}

.cell-tiny {
    padding: 18px 24px;
}

/* ---------- BAND 3: Data Wall Layout ---------- */
.bento-3 {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(4, minmax(140px, 1fr));
    background: #F5F5F5;
    min-height: 100vh;
}

.bento-3 > .cell {
    background: #F5F5F5;
}

/* Data wall metric cells: alternate sizes for bento feel */
.bento-3 > .cell-metric:nth-of-type(1) { grid-column: 1 / 5; grid-row: 1 / 2; }
.bento-3 > .cell-metric:nth-of-type(2) { grid-column: 5 / 9; grid-row: 1 / 2; }
.bento-3 > .cell-metric:nth-of-type(3) { grid-column: 9 / 13; grid-row: 1 / 2; }

.bento-3 > .cell-blob-ornament:nth-of-type(1) {
    grid-column: 1 / 4;
    grid-row: 2 / 4;
}

.bento-3 > .cell-metric:nth-of-type(4) { grid-column: 4 / 7; grid-row: 2 / 3; }
.bento-3 > .cell-metric:nth-of-type(5) { grid-column: 7 / 10; grid-row: 2 / 3; }

.bento-3 > .cell-blob-marble-small {
    grid-column: 10 / 13;
    grid-row: 2 / 4;
}

.bento-3 > .cell-metric:nth-of-type(6) { grid-column: 4 / 6; grid-row: 3 / 4; }
.bento-3 > .cell-metric:nth-of-type(7) { grid-column: 6 / 8; grid-row: 3 / 4; }
.bento-3 > .cell-metric:nth-of-type(8) { grid-column: 8 / 10; grid-row: 3 / 4; }
.bento-3 > .cell-metric:nth-of-type(9) { grid-column: 1 / 5; grid-row: 4 / 5; }
.bento-3 > .cell-metric:nth-of-type(10) { grid-column: 5 / 9; grid-row: 4 / 5; }

.bento-3 > .cell-blob-ornament:nth-of-type(2) {
    grid-column: 9 / 13;
    grid-row: 4 / 5;
}

/* Glass-dark cells against light marble bg — make them dark glass panels */
.bento-3 .cell-glass-dark {
    background: rgba(10, 10, 10, 0.78);
    backdrop-filter: blur(16px) saturate(110%);
    -webkit-backdrop-filter: blur(16px) saturate(110%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #E8E8E8;
}

/* Add a marble texture peeking through behind cells */
.bento-3::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            118deg,
            transparent 0px,
            transparent 80px,
            rgba(107, 107, 107, 0.12) 81px,
            rgba(176, 176, 176, 0.10) 86px,
            transparent 87px,
            transparent 240px
        ),
        repeating-linear-gradient(
            42deg,
            transparent 0px,
            transparent 140px,
            rgba(107, 107, 107, 0.06) 141px,
            transparent 145px,
            transparent 360px
        ),
        radial-gradient(ellipse at 30% 20%, #FFFFFF 0%, #F5F5F5 50%, #E8E8E8 100%);
    pointer-events: none;
    z-index: 0;
}

.bento-3 {
    position: relative;
}

.bento-3 > .cell {
    z-index: 1;
}

/* Metric cells */
.cell-metric {
    padding: clamp(20px, 2.4vw, 36px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 14px;
}

.metric-num {
    font-family: "Space Mono", monospace;
    font-size: clamp(2.2rem, 4.5vw, 3.8rem);
    font-weight: 700;
    line-height: 1;
    color: #F5F5F5;
    letter-spacing: -0.01em;
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.metric-num .pct {
    font-size: 0.55em;
    font-weight: 400;
    color: #B0B0B0;
    letter-spacing: 0.04em;
    margin-left: 4px;
}

.metric-label {
    font-family: "Space Mono", monospace;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #B0B0B0;
    line-height: 1.4;
}

/* Blob ornament cells */
.cell-blob-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.cell-blob-ornament .floating-blob {
    width: 70%;
    height: 70%;
    max-width: 220px;
    max-height: 220px;
}

/* Small blob marble cell */
.cell-blob-marble-small {
    background: #F5F5F5;
    padding: clamp(20px, 2.4vw, 32px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cell-blob-marble-small .blob-frame {
    aspect-ratio: 1 / 1;
    max-width: 100%;
    max-height: 100%;
    width: 90%;
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.12),
        0 16px 38px rgba(0, 0, 0, 0.18);
}

/* ---------- BAND 4: Archive / Epigraph ---------- */
.bento-4 {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: minmax(50vh, auto) repeat(2, minmax(120px, auto));
    min-height: 100vh;
}

.bento-4 > .cell {
    background: #0A0A0A;
}

.cell-epigraph {
    grid-column: 1 / 13;
    grid-row: 1 / 2;
    background: #F5F5F5;
    color: #1A1A1A;
    padding: clamp(40px, 6vw, 96px);
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cell-epigraph .marble-bg-light {
    opacity: 0.7;
}

.epigraph-content {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(18px, 2.4vw, 32px);
}

.epigraph-marker {
    font-family: "Space Mono", monospace;
    font-size: 0.78rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #6B6B6B;
}

.epigraph-quote {
    font-family: "Cormorant Garamond", "Lora", Georgia, serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.4rem, 3vw, 2.4rem);
    line-height: 1.4;
    color: #2E2E2E;
    letter-spacing: 0.005em;
}

.epigraph-attr {
    font-family: "Space Mono", monospace;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #4A4A4A;
}

/* Contact / Filing */
.cell-contact {
    grid-column: 1 / 5;
    grid-row: 2 / 3;
    padding: clamp(22px, 2.4vw, 36px);
}

.bento-4 > .cell-data.cell-glass.cell-contact {
    grid-column: 5 / 9;
    grid-row: 2 / 3;
    background: rgba(10, 10, 10, 0.55);
    border: 1px solid rgba(245, 245, 245, 0.12);
    color: #E8E8E8;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.bento-4 > .cell-data.cell-glass.cell-contact .data-label {
    color: #B0B0B0;
}

.cell-final {
    grid-column: 9 / 13;
    grid-row: 2 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cell-final .floating-blob {
    width: 60%;
    max-width: 160px;
}

.blob-final {
    animation: blob-float 22s ease-in-out infinite, blob-rotate 50s linear infinite;
}

.cell-colophon {
    grid-column: 1 / 13;
    grid-row: 3 / 4;
    background: #F5F5F5;
    color: #1A1A1A;
    min-height: 120px;
}

.cell-colophon .colophon {
    font-family: "Space Mono", monospace;
    font-size: 0.78rem;
    line-height: 1.7;
    color: #4A4A4A;
    letter-spacing: 0.04em;
    max-width: 96ch;
    margin-top: 10px;
}

.contact-line {
    font-family: "Space Mono", monospace;
    font-size: 0.82rem;
    line-height: 1.7;
    color: #E8E8E8;
    letter-spacing: 0.04em;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cell-glass.cell-contact .contact-line {
    color: #1A1A1A;
}

.bento-4 > .cell-data.cell-glass.cell-contact .contact-line {
    color: #E8E8E8;
}

.contact-email {
    font-weight: 700;
    color: #F5F5F5;
    letter-spacing: 0.06em;
    border-bottom: 1px dashed rgba(245, 245, 245, 0.30);
    padding-bottom: 4px;
    width: fit-content;
}

.cell-glass.cell-contact .contact-email {
    color: #0A0A0A;
    border-bottom-color: rgba(10, 10, 10, 0.30);
}

.bento-4 > .cell-data.cell-glass.cell-contact .contact-email {
    color: #F5F5F5;
}

.redact {
    display: inline-block;
    width: 200px;
    max-width: 60%;
    height: 12px;
    background: #4A4A4A;
    border-radius: 1px;
}

.redact-sm {
    display: inline-block;
    width: 80px;
    height: 10px;
    background: #4A4A4A;
    border-radius: 1px;
    vertical-align: middle;
}

.cell-glass.cell-contact .redact,
.cell-glass.cell-contact .redact-sm {
    background: #B0B0B0;
}

/* ---------- Hover treatments on glass cells ---------- */
.cell-data.cell-glass:hover,
.cell-data.cell-glass-dark:hover {
    transform: translateY(-2px);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ---------- Responsive: Tablet ---------- */
@media (max-width: 1024px) {
    .bento-1,
    .bento-2,
    .bento-3,
    .bento-4 {
        grid-template-columns: repeat(6, 1fr);
    }

    .cell-hero { grid-column: 1 / 7; grid-row: 1 / 3; }
    .bento-1 > .cell-data:nth-of-type(1) { grid-column: 1 / 4; grid-row: 3 / 4; }
    .bento-1 > .cell-data:nth-of-type(2) { grid-column: 4 / 7; grid-row: 3 / 4; }
    .bento-1 > .cell-status { grid-column: 1 / 4; grid-row: 4 / 5; }
    .bento-1 > .cell-void-light { grid-column: 4 / 7; grid-row: 4 / 5; }
    .bento-1 > .cell-marble-light { grid-column: 1 / 3; grid-row: 5 / 6; }
    .bento-1 > .cell-data.cell-dark { grid-column: 3 / 7; grid-row: 5 / 6; }
    .bento-1 > .cell-data:last-of-type { grid-column: 1 / 7; grid-row: 6 / 7; }

    .bento-2 > .cell-statement:nth-of-type(1) { grid-column: 1 / 7; grid-row: 1 / 2; }
    .bento-2 > .cell-statement:nth-of-type(2) { grid-column: 1 / 7; grid-row: 2 / 3; }
    .bento-2 > .cell-void-white { grid-column: 1 / 4; grid-row: 3 / 4; }
    .bento-2 > .cell-statement:nth-of-type(3) { grid-column: 4 / 7; grid-row: 3 / 4; }
    .bento-2 > .cell-blob-monument { grid-column: 1 / 7; grid-row: 4 / 6; min-height: 50vh; }
    .bento-2 > .cell-tiny:nth-of-type(1) { grid-column: 1 / 4; grid-row: 6 / 7; }
    .bento-2 > .cell-void-black { grid-column: 4 / 7; grid-row: 6 / 7; }
    .bento-2 > .cell-tiny:nth-of-type(2) { grid-column: 1 / 4; grid-row: 7 / 8; }
    .bento-2 > .cell-tiny:nth-of-type(3) { grid-column: 4 / 7; grid-row: 7 / 8; }

    .bento-3 > .cell-metric:nth-of-type(1) { grid-column: 1 / 4; grid-row: 1 / 2; }
    .bento-3 > .cell-metric:nth-of-type(2) { grid-column: 4 / 7; grid-row: 1 / 2; }
    .bento-3 > .cell-metric:nth-of-type(3) { grid-column: 1 / 7; grid-row: 2 / 3; }
    .bento-3 > .cell-blob-ornament:nth-of-type(1) { grid-column: 1 / 4; grid-row: 3 / 4; }
    .bento-3 > .cell-metric:nth-of-type(4) { grid-column: 4 / 7; grid-row: 3 / 4; }
    .bento-3 > .cell-metric:nth-of-type(5) { grid-column: 1 / 4; grid-row: 4 / 5; }
    .bento-3 > .cell-blob-marble-small { grid-column: 4 / 7; grid-row: 4 / 5; }
    .bento-3 > .cell-metric:nth-of-type(6) { grid-column: 1 / 4; grid-row: 5 / 6; }
    .bento-3 > .cell-metric:nth-of-type(7) { grid-column: 4 / 7; grid-row: 5 / 6; }
    .bento-3 > .cell-metric:nth-of-type(8) { grid-column: 1 / 4; grid-row: 6 / 7; }
    .bento-3 > .cell-metric:nth-of-type(9) { grid-column: 4 / 7; grid-row: 6 / 7; }
    .bento-3 > .cell-metric:nth-of-type(10) { grid-column: 1 / 7; grid-row: 7 / 8; }
    .bento-3 > .cell-blob-ornament:nth-of-type(2) { grid-column: 1 / 7; grid-row: 8 / 9; }

    .cell-epigraph { grid-column: 1 / 7; }
    .cell-contact { grid-column: 1 / 7; }
    .bento-4 > .cell-data.cell-glass.cell-contact { grid-column: 1 / 7; grid-row: 3 / 4; }
    .cell-final { grid-column: 1 / 7; grid-row: 4 / 5; min-height: 200px; }
    .cell-colophon { grid-column: 1 / 7; grid-row: 5 / 6; }
}

/* ---------- Responsive: Mobile ---------- */
@media (max-width: 768px) {
    .nav-blob {
        width: 64px;
        height: 64px;
        top: 16px;
        left: 16px;
    }

    .blob-text {
        font-size: 26px;
    }

    .bento-1,
    .bento-2,
    .bento-3,
    .bento-4 {
        grid-template-columns: 1fr;
        grid-auto-rows: minmax(180px, auto);
        grid-template-rows: none;
    }

    .bento-1 > .cell,
    .bento-2 > .cell,
    .bento-3 > .cell,
    .bento-4 > .cell {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        min-height: 180px;
    }

    .cell-hero {
        min-height: 100vh;
    }

    .cell-blob-monument,
    .cell-epigraph {
        min-height: 70vh;
    }

    .hero-title {
        font-size: clamp(3rem, 14vw, 5.5rem);
    }

    .blob-title {
        font-size: clamp(1.6rem, 8vw, 2.6rem);
    }

    .epigraph-quote {
        font-size: clamp(1.2rem, 5vw, 1.8rem);
    }

    .section-tag {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .floating-blob,
    .cell-blob-ornament .floating-blob {
        max-width: 160px;
        max-height: 160px;
    }
}