/* ============================================
   RESET & VARIABLES - PURE BLACK THEME
   ============================================ */
:root {
    --bg-left: #000000;
    /* Absolute Black */
    --text-primary: #FFFFFF;
    --text-muted: #999999;
    --border-dim: #222222;
    --border-bright: #444444;

    --accent: #7F5AF0;
    /* Electric Purple */

    --font-heading: 'Playfair Display', serif;
    --font-mono: 'JetBrains Mono', monospace;
    --font-body: 'Inter', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

body {
    background-color: var(--bg-left);
    color: var(--text-primary);
    font-family: var(--font-body);
    overflow-x: hidden;
}

/* ============================================
   SPLIT LAYOUT
   ============================================ */
.split-layout {
    display: flex;
    min-height: 100vh;
}

/* LEFT COLUMN (2/3) - SCROLLABLE */
.content-area {
    width: 66.666%;
    background-color: var(--bg-left);
    padding: 6rem 8rem;
    position: relative;
    border-right: 1px solid var(--border-dim);
    z-index: 2;
}

@media (max-width: 1200px) {
    .content-area {
        padding: 4rem 5rem;
    }
}

@media (max-width: 900px) {
    .split-layout {
        flex-direction: column;
    }

    .content-area {
        width: 100%;
        border-right: none;
        padding: 3rem;
    }

    .sidebar-area {
        width: 100%;
        height: auto;
        position: relative;
        padding: 4rem 2rem;
    }

    .sidebar-bg {
        height: 120%;
        top: -10%;
    }
}

/* RIGHT COLUMN (1/3) - STICKY */
.sidebar-area {
    width: 33.333%;
    height: 100vh;
    position: sticky;
    top: 0;
    right: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.sidebar-bg {
    position: absolute;
    inset: 0;
    height: 120%;
    top: -10%;
    background: url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=2670&auto=format&fit=crop') center/cover;
    filter: grayscale(100%) brightness(0.3) contrast(1.2);
    z-index: -1;
    will-change: transform;
}

/* ============================================
   CONTENT STYLING (LEFT)
   ============================================ */
/* HEADER */
.content-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 3rem;
    margin-bottom: 8rem;
}

.brand-name {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* LOGO STYLING - WHITE ON BLACK */
.site-logo {
    height: 54px;
    /* Significantly larger */
    width: auto;
    filter: invert(1) brightness(200%);
    display: block;
}

.mini-nav a {
    color: var(--text-muted);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    text-transform: uppercase;
    transition: color 0.2s;
    margin-right: 2rem;
}

.mini-nav a:hover {
    color: white;
}

.mobile-brand-container {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.site-logo.mobile {
    height: 40px;
    width: auto;
}

/* HERO TEXT */
.hero-text-section {
    margin-bottom: 10rem;
}

.hero-eyebrow {
    font-family: var(--font-mono);
    color: var(--accent);
    font-size: 0.85rem;
    margin-bottom: 2rem;
    display: inline-block;
    border: 1px solid var(--border-dim);
    padding: 0.5rem 1rem;
}

.hero-headline {
    font-family: var(--font-heading);
    font-size: 5.5rem;
    line-height: 0.95;
    font-weight: 400;
    margin-bottom: 2.5rem;
}

.hero-headline .highlight {
    color: var(--text-muted);
    font-style: italic;
    font-family: var(--font-heading);
}

.hero-subline {
    font-size: 1.2rem;
    color: var(--text-muted);
    max-width: 480px;
    line-height: 1.7;
    margin-left: 5px;
}

/* BENTO GRID */
.section-label {
    font-family: var(--font-mono);
    text-transform: uppercase;
    color: var(--text-muted);
    font-size: 0.8rem;
    border-bottom: 1px solid var(--border-dim);
    padding-bottom: 1.5rem;
    margin-bottom: 4rem;
}

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

.bento-card {
    background: #0A0A0A;
    border: 1px solid var(--border-dim);
    aspect-ratio: 1/1.2;
    /* Slightly taller for vertical layout */
    position: relative;
    padding: 2.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    /* Top, Center, Bottom */
    transition: all 0.4s ease;
    overflow: hidden;
    text-align: center;
}

.bento-card:hover,
.bento-card.active {
    border-color: #555;
    background: #111;
}

/* TOP: Header */
.card-header-center {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card-idx {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--accent);
    margin-bottom: 0.5rem;
    display: block;
    opacity: 0.8;
}

.card-title {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 400;
    margin: 0;
    color: white;
}

/* CENTER: Icon Wrapper */
.icon-wrapper-center {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* BOTTOM: Description */
.card-desc {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.5;
    max-width: 90%;
    margin-top: 1rem;
}


/* SVG STYLES & ANIMATIONS */
.topic-icon {
    width: 120px;
    /* LARGE, per request */
    height: 120px;
    color: white;
    stroke-width: 1;
    display: block;
    overflow: visible;
    transition: transform 0.4s ease;
}

.bento-card:hover .topic-icon {
    transform: scale(1.1);
    /* Subtle grow on hover */
}

.topic-icon path,
.topic-icon rect,
.topic-icon circle,
.topic-icon line {
    vector-effect: non-scaling-stroke;
}

/* 1. TECH: Pulse */
.bento-card:hover .chip-core,
.bento-card.active .chip-core {
    animation: chipPulse 1.5s infinite alternate;
}

@keyframes chipPulse {
    from {
        opacity: 0.3;
    }

    to {
        opacity: 1;
        fill: var(--accent);
    }
}

/* 2. AI: Network active */
.bento-card:hover .ai-node,
.bento-card.active .ai-node {
    animation: nodeFlash 1s infinite alternate;
}

.bento-card:hover .n2,
.bento-card.active .n2 {
    animation-delay: 0.2s;
}

.bento-card:hover .n3,
.bento-card.active .n3 {
    animation-delay: 0.4s;
}

@keyframes nodeFlash {
    from {
        opacity: 0.3;
    }

    to {
        opacity: 1;
        fill: var(--accent);
    }
}

/* 3. STARTUP: Rocket Hover */
.bento-card:hover .rocket-body,
.bento-card.active .rocket-body {
    animation: rocketFloat 2s ease-in-out infinite;
}

.bento-card:hover .rocket-fire,
.bento-card.active .rocket-fire {
    animation: fireFlicker 0.1s infinite alternate;
    opacity: 1;
}

@keyframes rocketFloat {

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

    50% {
        transform: translateY(-4px);
    }
}

@keyframes fireFlicker {
    from {
        opacity: 0.5;
    }

    to {
        opacity: 1;
    }
}

/* 4. DESIGN: Assemble */
.bento-card:hover .shape,
.bento-card.active .shape {
    transform-box: fill-box;
    transform-origin: center;
    animation: shapeSpin 4s linear infinite;
}

.bento-card:hover .s2,
.bento-card.active .s2 {
    animation-direction: reverse;
}

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

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

/* 5. ROBOTICA: Waving Arm */
.robot-arm-left {
    transform-origin: 12px 24px;
    transform: rotate(0deg);
}

.bento-card.active .robot-arm-left,
.bento-card:hover .robot-arm-left {
    animation: robotWave 1s ease-in-out infinite;
}

@keyframes robotWave {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-20deg);
    }

    50% {
        transform: rotate(10deg);
    }

    75% {
        transform: rotate(-10deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

/* 6. INNOVATION: Lightbulb */
.bento-card:hover .bulb-glass,
.bento-card.active .bulb-glass {
    stroke: var(--accent);
}

.bento-card:hover .bulb-rays,
.bento-card.active .bulb-rays {
    animation: turnOn 0.5s forwards;
}

@keyframes turnOn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* FOOTER */
.main-footer {
    margin-top: 10rem;
    padding-top: 4rem;
    border-top: 1px solid var(--border-dim);
    display: flex;
    flex-direction: column;
    /* Changed from row to column to stack elements */
    gap: 4rem;
    width: 100%;
}

.footer-cols {
    display: flex;
    /* Back to flex for columns to ensure left alignment */
    gap: 5rem;
    width: 100%;
}

.f-col {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.f-col h4 {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #888;
    /* Slightly brighter */
    margin-bottom: 1rem;
    letter-spacing: 0.05em;
}

.sidebar-legal-text {
    font-family: var(--font-body);
    font-size: 0.7rem;
    color: #999;
    /* LIGHTER */
    line-height: 1.5;
    margin: 1.5rem 0;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-legal {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-top: 0;
    /* spacing handled by gap in main-footer */
    border-top: none;
    margin-top: 0;
    max-width: 800px;
}

.legal-text {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: #AAAAAA;
    /* LIGHTER - High Contrast */
    line-height: 1.7;
}

.copy-text {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: #666;
    /* Slightly darker than text but visible */
    text-transform: uppercase;
}

.f-col a {
    color: white;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s;
}

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

.copy-text {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--border-dim);
    text-transform: uppercase;
}

.footer-legal {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-dim);
    margin-top: 2rem;
}

.legal-text {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: #666;
    line-height: 1.6;
    max-width: 800px;
}

.legal-text strong {
    color: var(--text-muted);
    font-weight: 600;
}

.legal-text a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
}

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


/* SIDEBAR & WIDGET (RIGHT) */
.sidebar-content {
    width: 100%;
    max-width: 400px;
}

.newsletter-widget {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 3rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    transition: transform 0.1s linear;
}

.widget-title {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.widget-desc {
    color: #ccc;
    font-size: 1rem;
    line-height: 1.5;
}

.input-row {
    position: relative;
    border-bottom: 1px solid white;
}

.sidebar-input {
    width: 100%;
    background: transparent;
    border: none;
    padding: 1rem 0;
    color: white;
    font-family: var(--font-mono);
    font-size: 1rem;
    outline: none;
}

.sidebar-input::placeholder {
    color: #555;
}

.sidebar-submit {
    width: 100%;
    background: white;
    color: black;
    border: none;
    padding: 1.25rem;
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: background 0.3s;
    margin-top: 1rem;
}

.sidebar-submit:hover {
    background: var(--accent);
    color: white;
}

.sidebar-helpers {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    transition: opacity 0.5s ease;
}

.sidebar-helpers.hidden {
    opacity: 0;
    pointer-events: none;
}

.helper-row {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.helper-row a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    transition: color 0.3s ease;
    letter-spacing: 0.05em;
}

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

.helper-scroll-hint {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: #333;
    margin-top: 2rem;
}

/* ============================================
   COOKIE BANNER
   ============================================ */
.cookie-banner {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 380px;
    background: #FFFFFF;
    /* High Contrast White */
    color: #000000;
    border: 4px solid #000000;
    /* Brutalist Border */
    padding: 2rem;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    box-shadow: 0 20px 50px rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    font-family: var(--font-body);
    pointer-events: none;
}

/* State when Visible */
.cookie-banner.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Explosion State */
.cookie-banner.explode {
    transform: scale(1.1) rotate(5deg);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.cookie-header {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.cookie-icon-svg {
    width: 32px;
    height: 32px;
    color: #C08552;
    /* Biscuit Color (Tertiary) */
    animation: cookieSpin Physics 4s infinite;
}

@keyframes cookieSpinPhysics {
    0% {
        transform: rotate(0deg);
    }

    10% {
        transform: rotate(-10deg);
    }

    /* Anticipation */
    35% {
        transform: rotate(380deg);
    }

    /* Spin fast past 360 */
    50% {
        transform: rotate(360deg);
    }

    /* Settle */
    100% {
        transform: rotate(360deg);
    }

    /* Pause */
}

.cookie-title {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    color: #000000;
    font-weight: 700;
}

.cookie-text {
    font-size: 0.9rem;
    color: #333333;
    line-height: 1.5;
    font-weight: 500;
}

.cookie-text a {
    color: #000000;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 700;
}

.cookie-actions {
    display: flex;
    gap: 1rem;
}

.cookie-btn {
    flex: 1;
    padding: 1rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    text-transform: uppercase;
    cursor: pointer;
    border: 2px solid #000000;
    background: transparent;
    color: #000000;
    transition: all 0.2s;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.cookie-btn:hover {
    background: #f0f0f0;
    transform: translateY(-2px);
    box-shadow: 4px 4px 0px #000000;
}

.cookie-btn.primary {
    background: #000000;
    color: #FFFFFF;
}

.cookie-btn.primary:hover {
    background: #333;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.5);
}

@media (max-width: 600px) {
    .cookie-banner {
        width: calc(100% - 2rem);
        right: 1rem;
        bottom: 1rem;
        padding: 1.5rem;
    }
}

/* Particle CSS */
.cookie-particle {
    position: fixed;
    top: 0;
    left: 0;
    width: 28px;
    height: 28px;
    /* Cookie Particles (No Border) */
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 10001;
    opacity: 1;
    transition: opacity 1s ease;
}

.cookie-particle.v1 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 2C7 2 3 6 3 11c0 2.5 1 5 3 6.5 2 1.5 5 2.5 8 2.5 4 0 7-3 8-7 0-3-2-6-5-8-1-1-3-2-5-2Z' fill='%23E0C097'/%3E%3Ccircle cx='8' cy='8' r='1' fill='black'/%3E%3Ccircle cx='14' cy='7' r='1' fill='black'/%3E%3Ccircle cx='11' cy='12' r='1.5' fill='black'/%3E%3Ccircle cx='16' cy='13' r='1' fill='black'/%3E%3Ccircle cx='7' cy='15' r='1' fill='black'/%3E%3C/svg%3E");
}

.cookie-particle.v2 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M14 2.5C10 2.5 6 4.5 5 9c-.5 2.5 1 5.5 3 7.5 2 2 5 3 8 3 3 0 5-2 5-5 0-1-.5-1.5-1-1.5-.5 0-1-.5-1-1s.5-1 0-1.5c-.5-.5-1 0-1.5-.5-.5-.5-.5-1.5-1-2-.5-.5 0-1.5-.5-2-.5-.5-1.5-.5-2-2.5Z' fill='%23E0C097'/%3E%3Ccircle cx='9' cy='10' r='1' fill='black'/%3E%3Ccircle cx='12' cy='14' r='1.5' fill='black'/%3E%3Ccircle cx='15' cy='16' r='1' fill='black'/%3E%3Ccircle cx='7' cy='13' r='1' fill='black'/%3E%3C/svg%3E");
}

.cookie-particle.v3 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M10 2C6 2 3 5 3 9c0 3 2 6 5 7 1 0 2-1 3-2 .5-.5 1 0 1.5-.5.5-.5 0-1 .5-1.5.5-.5 0-1-.5-2 .5-1 1-1 1.5-1.5.5-.5 0-1-.5-1.5C13 6 12 2 10 2Z' fill='%23E0C097'/%3E%3Ccircle cx='7' cy='6' r='1' fill='black'/%3E%3Ccircle cx='8' cy='10' r='1.5' fill='black'/%3E%3Ccircle cx='6' cy='12' r='1' fill='black'/%3E%3C/svg%3E");
}

/* Crumbs */
.crumb-particle {
    position: fixed;
    width: 4px;
    height: 4px;
    background: #3D2618;
    /* Dark Chocolate */
    pointer-events: none;
    z-index: 10002;
    border-radius: 1px;
    transition: opacity 1s ease;
}

/* ============================================
   MILK CUP ANIMATION (LAYERED)
   ============================================ */
.milk-scene {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10005;
    pointer-events: none;
    display: none;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
}

.milk-scene.active {
    display: flex;
}

.milk-cup {
    width: 150px;
    height: 150px;
    position: relative;
    transform: translateX(120vw);
    /* Far right start */
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.milk-cup.center {
    transform: translateX(0);
}

.milk-cup.depart {
    transition: transform 0.6s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    transform: translateX(-120vw) rotate(-15deg);
}

/* Z-INDEX LAYERING FOR DUNK */
.cup-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.cup-layer.back {
    z-index: 1;
    /* Behind Cookie */
}

.cup-layer.front {
    z-index: 3;
    /* In Front of Cookie */
}

.actor-cookie {
    width: 0;
    height: 0;
    position: absolute;
    top: -100px;
    left: 50%;
    /* Center horizontally relative to cup */
    transform: translateX(-50%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M14 2.5C10 2.5 6 4.5 5 9c-.5 2.5 1 5.5 3 7.5 2 2 5 3 8 3 3 0 5-2 5-5 0-1-.5-1.5-1-1.5-.5 0-1-.5-1-1s.5-1 0-1.5c-.5-.5-1 0-1.5-.5-.5-.5-.5-1.5-1-2-.5-.5 0-1.5-.5-2-.5-.5-1.5-.5-2-2.5Z' fill='%23E0C097'/%3E%3Ccircle cx='9' cy='10' r='1' fill='black'/%3E%3Ccircle cx='12' cy='14' r='1.5' fill='black'/%3E%3Ccircle cx='15' cy='16' r='1' fill='black'/%3E%3Ccircle cx='7' cy='13' r='1' fill='black'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2;
    /* Sandwiched */
    transition: width 0.4s ease, height 0.4s ease, top 0.4s ease;
    /* Appear trans */
    opacity: 0;
}

.actor-cookie.appear {
    width: 70px;
    /* Bigger cookie */
    height: 70px;
    top: -60px;
    /* Hovering above cup */
    opacity: 1;
}

.actor-cookie.dunk {
    /* Use Animation for the dunk motion */
    animation: realDunk 1.5s ease-in-out forwards;
}

@keyframes realDunk {
    0% {
        transform: translateX(-50%) translateY(0);
    }

    40% {
        transform: translateX(-50%) translateY(80px);
    }

    /* DEEP DUNK (Inside cup) */
    60% {
        transform: translateX(-50%) translateY(80px);
    }

    /* Hold */
    100% {
        transform: translateX(-50%) translateY(80px);
        opacity: 0;
    }

    /* Disappear inside */
}

/* Steam */
.steam-particle {
    position: absolute;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    filter: blur(8px);
    z-index: 0;
    opacity: 0;
}

.milk-cup.center .steam-particle {
    animation: steamRise 2s infinite;
}

.s1 {
    width: 15px;
    height: 30px;
    top: 10px;
    left: 40px;
    animation-delay: 0s;
}

.s2 {
    width: 20px;
    height: 40px;
    top: 5px;
    left: 60px;
    animation-delay: 0.5s;
}

.s3 {
    width: 12px;
    height: 25px;
    top: 15px;
    left: 80px;
    animation-delay: 1s;
}

@keyframes steamRise {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        transform: translateY(-40px) scale(1.5);
        opacity: 0;
    }
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

/* 1. TABLET / SMALL LAPTOP (< 1200px) */
/* Already handled in existing styles: .content-area padding reduces */

/* 2. TABLET PORTRAIT / LARGE MOBILE (< 900px) */
/* Already handled: Split layout becomes column layout */

/* 3. MOBILE (< 600px) - ADDITIONAL TWEAKS */
@media (max-width: 600px) {

    /* Global Layout */
    .content-area {
        padding: 2rem 1.5rem;
        /* Tighter padding for mobile */
    }

    .sidebar-area {
        padding: 3rem 1.5rem;
    }

    /* Hero Section */
    .hero-headline {
        font-size: 3rem;
        /* Smaller headline */
        margin-bottom: 1.5rem;
    }

    .hero-subline {
        font-size: 1rem;
        width: 100%;
        max-width: 100%;
        margin-left: 0;
    }

    .content-header {
        flex-direction: column;
        /* Stack logo and nav if needed, or keep row but adjust gap */
        align-items: flex-start;
        gap: 1.5rem;
        margin-bottom: 4rem;
    }

    .mini-nav {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .mini-nav a {
        margin-right: 0;
        font-size: 0.75rem;
    }

    /* Bento Grid - 1 Column */
    .bento-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .bento-card {
        padding: 2rem 1rem;
        aspect-ratio: auto;
        /* Remove fixed aspect ratio constraint */
        min-height: 300px;
        /* Ensure logical height */
    }

    /* Footer - Stack Columns */
    .main-footer {
        flex-direction: column;
        gap: 3rem;
        margin-top: 6rem;
    }

    .footer-cols {
        flex-direction: column;
        gap: 2rem;
    }

    /* Cookie Banner - Mobile Optimization */
    .cookie-banner {
        width: calc(100% - 2rem);
        right: 1rem;
        bottom: 1rem;
        padding: 1.5rem;
    }

    .cookie-actions {
        flex-direction: column;
        /* Easy tap targets */
    }

    .cookie-btn {
        padding: 1.2rem;
        /* Larger touch area */
    }

    /* Milk Scene scaling */
    .milk-cup {
        width: 100px;
        height: 100px;
    }

    /* Adjust actor cookie size and position for smaller cup */
    .actor-cookie.appear {
        width: 60px;
        height: 60px;
        top: -40px;
        right: 20px;
    }

    @keyframes dunkAction {
        0% {
            transform: translateY(0);
        }

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

        /* Reduced dunk depth */
        60% {
            transform: translateY(40px);
        }

        100% {
            transform: translateY(-15px);
            opacity: 0;
        }
    }
}

/* ============================================
   MOBILE NAVBAR & LAYOUT ADJUSTMENTS (< 900px)
   ============================================ */

/* Default: Hidden */
.mobile-navbar {
    display: none;
}

@media (max-width: 900px) {

    /* 1. Show Mobile Navbar */
    .mobile-navbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 70px;
        /* Fixed height */
        background: rgba(10, 10, 10, 0.95);
        /* Dark Glass */
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        border-bottom: 1px solid var(--border-dim);
        padding: 0 1.5rem;
        z-index: 9000;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
    }

    .mobile-brand-container {
        display: flex;
        align-items: center;
        gap: 0.8rem;
    }

    .site-logo.mobile {
        height: 40px;
        /* Larger for mobile too */
        width: auto;
    }

    .mobile-logo {
        font-family: var(--font-heading);
        font-size: 1.2rem;
        font-weight: 700;
        color: white;
        letter-spacing: -0.02em;
    }

    .mobile-subscribe {
        display: flex;
        gap: 0.5rem;
    }

    .mobile-subscribe input {
        background: #1a1a1a;
        border: 1px solid var(--border-dim);
        color: white;
        padding: 0.5rem 0.8rem;
        font-family: var(--font-mono);
        font-size: 0.8rem;
        width: 160px;
        border-radius: 4px;
        outline: none;
    }

    .mobile-subscribe input:focus {
        border-color: var(--accent);
    }

    .mobile-subscribe button {
        background: white;
        color: black;
        border: none;
        padding: 0 1rem;
        font-family: var(--font-mono);
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        cursor: pointer;
        border-radius: 4px;
    }

    /* 2. Hide Sidebar Rule & Widget */
    .sidebar-area {
        display: none !important;
    }

    /* 3. Adjust Content Area Layout */
    .content-area {
        width: 100%;
        border-right: none;
        padding-top: 100px;
        /* Make space for fixed navbar */
    }

    .split-layout {
        flex-direction: column;
    }

    /* Hide internal desktop header slightly to avoid dupe or spacing issues if needed, 
       but usually we keep it for navigation links. 
       Let's reduce the top margin of the brand name inside content since we have navbar.
    */
    .content-header {
        margin-bottom: 4rem;
        /* Reduced from 8rem */
    }

    /* On very small screens, shrink input */
    @media (max-width: 400px) {
        .mobile-subscribe input {
            width: 120px;
        }

        .mobile-logo {
            display: none;
            /* Hide logo to prioritize input space on tiny screens */
        }

        .mobile-navbar {
            justify-content: center;
        }
    }
}