/* =========================================
   HERO SECTION STYLES (ADDED FOR STABILITY)
   ========================================= */
.hero {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    /* Align title to bottom area roughly */
}

.hero__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

#hero-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 10 !important;
    /* Force above video */
    touch-action: none;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.hero__title {
    position: absolute;
    bottom: 80px;
    left: 0;
    width: 100%;
    text-align: center;
    /* CHANGED: Lowered z-index slightly (below loader's 9999) but above video */
    z-index: 9990;
    color: #000;
    font-family: 'Neue Montreal', sans-serif;
    font-size: 15vw;
    font-weight: 900;
    margin: 0;
    pointer-events: none;

    /* CHANGED: Removed !important so we can toggle it with CSS */
    opacity: 1;
    visibility: visible;
    transform: none;

    /* ADDED: Smooth fade in transition */
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* =========================================
   ADVANCED FOOTER STYLES (RESPONSIVE UPDATE)
   ========================================= */

/* --- TYPED EFFECT STYLES --- */
[data-fls-typed] {
    position: relative;
    display: inline-block;
    line-height: 1;
    --tsw-fill: #fff;
    --tsw-stroke: #fff;
    --tsw-stroke-w: 1px;
    --tsw-dur: 0.45s;
    --tsw-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

[data-fls-typed] .tsw__base,
[data-fls-typed] .tsw__alt {
    display: inline-block;
    white-space: wrap;
    letter-spacing: -0.02em;
    font-size: inherit;
}

[data-fls-typed] .tsw__base {
    position: relative;
    z-index: 1;
    color: var(--tsw-fill);
}

[data-fls-typed] .tsw__alt {
    position: absolute;
    inset: 0;
    z-index: 2;
    color: transparent;
    font-family: "Bodoni Moda", serif;
    font-style: italic;
    -webkit-text-stroke: var(--tsw-stroke-w) var(--tsw-stroke);
    -webkit-text-fill-color: transparent;
    pointer-events: none;
}

[data-fls-typed] .char {
    display: inline-block;
    transition: opacity var(--tsw-dur) var(--tsw-ease),
        transform var(--tsw-dur) var(--tsw-ease);
    will-change: opacity, transform;
}

/* Hover States */
[data-fls-typed] .tsw__base .char {
    opacity: 1;
    transform: translateY(0);
}

[data-fls-typed] .tsw__alt .char {
    opacity: 0;
    transform: translateY(0.15em);
}

[data-fls-typed].is-hover .tsw__base .char,
[data-fls-typed]:hover .tsw__base .char {
    opacity: 0;
    transform: translateY(-0.05em);
}

[data-fls-typed].is-hover .tsw__alt .char,
[data-fls-typed]:hover .tsw__alt .char {
    transform: translateY(-0.05em);
    opacity: 1;
}
/* --- EXACT REPLICA FOOTER (FINAL FIXED VERSION) --- */
#exact-footer {
    background-color: #000000;
    color: #ffffff;
    font-family: 'Neue Montreal', sans-serif;
    
    /* VITAL FIX: min-height ensures it grows if content is too tall */
    min-height: 100vh;
    width: 100%;
    
    display: flex;
    flex-direction: column;
    
    border-top: 1px solid #333;
    box-sizing: border-box;
    position: relative;
    z-index: 10;
    
    /* Ensure no content is accidentally clipped */
    overflow: visible; 
}

/* 1. TOP SECTION */
.top-row {
    width: 100%;
    border-bottom: 1px solid #333;
    padding: 4rem 3rem 2rem 3rem; /* Exact padding from image */
    box-sizing: border-box;
}

.headline-text {
    font-family: 'Presicav', sans-serif; /* Bold Header Font */
    font-size: 14vw; /* Huge responsive text */
    line-height: 0.85;
    text-transform: uppercase;
    margin: 0;
    letter-spacing: -0.02em;
    color: #fff;
}

/* 2. MIDDLE GRID */
.main-grid {
    /* Flex-grow pushes the bottom bar down, but allows content to expand */
    flex-grow: 1;
    display: grid;
    /* Columns ratios: CTA slightly wider, Dir narrower, Net wide */
    grid-template-columns: 1.2fr 0.9fr 1.2fr; 
    width: 100%;
    border-bottom: 1px solid #333;
}

.grid-col {
    border-right: 1px solid #333;
    padding: 3rem; /* Match image padding */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes top/bottom content apart */
    position: relative;
    box-sizing: border-box;
}

.grid-col:last-child {
    border-right: none;
}

/* Common Labels */
.label-text {
    font-size: 0.7rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    display: block;
    margin-bottom: 1.5rem;
}

/* --- Column 1: CTA --- */
.col-cta {
    align-items: flex-start;
}

.sub-heading {
    font-size: 3rem;
    font-weight: 400;
    line-height: 1.1;
    margin: 0;
    color: #fff;
}

.red-circle-cta {
    width: 150px;
    height: 150px;
    background-color: #d91c24; /* Marker Red */
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #fff;
    font-weight: 700;
    font-size: 0.8rem;
    line-height: 1.4;
    text-align: center;
    margin-top: 4rem; /* Spacing from text */
    transition: transform 0.2s ease;
}

.red-circle-cta:hover {
    transform: scale(1.05);
}

/* --- Column 2: Directory --- */
.dir-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2rem;
    width: 100%;
}

.dir-header .label-text {
    align-self: flex-start;
}

.pulsing-dot {
    width: 8px;
    height: 8px;
    background-color: #fff;
    border-radius: 50%;
    margin-top: 10px; /* Space below label */
}

.dir-links {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.dir-links li {
    border-bottom: 1px solid #333;
    border-top: 1px solid transparent; /* Keeps spacing consistent */
}

/* Add border to top of first item to match visual list style if needed */
.dir-links li:first-child {
    border-top: 1px solid #333; 
}

.dir-links li a {
    display: block;
    padding: 1rem 0;
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    transition: padding-left 0.2s, color 0.2s;
}

.dir-links li a:hover {
    color: #999;
    padding-left: 10px;
}

/* --- Column 3: Network --- */
.col-net {
    justify-content: space-between;
}

.pill-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.pill-btn {
    border: 1px solid #333;
    padding: 10px 20px;
    border-radius: 100px;
    color: #fff;
    text-decoration: none;
    font-size: 0.85rem;
    background: transparent;
    transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

.pill-btn:hover {
    border-color: #fff;
    background-color: #fff;
    color: #000;
}

.input-section {
    width: 100%;
    margin-top: 4rem;
}

.loop-form {
    display: flex;
    border-bottom: 1px solid #fff;
    padding-bottom: 10px;
    align-items: center;
    position: relative;
}

.loop-form input {
    background: transparent;
    border: none;
    color: #666;
    width: 100%;
    font-size: 0.9rem;
    text-transform: uppercase;
    outline: none;
    font-family: inherit;
    letter-spacing: 0.05em;
}

.loop-form input:focus {
    color: #fff;
}

.enter-icon {
    background: none;
    border: none;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    padding: 0;
    position: absolute;
    right: 0;
}
/* 3. BOTTOM BAR (Aligned to Right) */
.bottom-bar {
    flex-shrink: 0;
    
    display: flex;
    /* KEY CHANGE: Push everything to the end (right) */
    justify-content: flex-end; 
    align-items: center;
    
    /* Add space between the three items */
    gap: 3rem; 
    
    padding: 1.5rem 3rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
    background-color: #000;
    border-top: 1px solid #333;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 10px;
    
    /* KEY CHANGE: Remove fixed width so they sit next to each other */
    width: auto; 
}

.red-dot {
    color: #d91c24;
    font-size: 1.2em;
    line-height: 0;
    margin-bottom: 2px;
}

/* RESPONSIVE: Stack them on mobile if needed */
@media (max-width: 768px) {
    .bottom-bar {
        flex-direction: column;
        justify-content: center;
        gap: 1rem;
    }
}
/* --- RESPONSIVE ADJUSTMENTS --- */
/* Matches behavior to ensure visibility on all devices */

@media (max-width: 1024px) {
    .headline-text {
        font-size: 12vw;
    }
    .main-grid {
        grid-template-columns: 1fr 1fr;
    }
    .col-cta { 
        grid-column: span 2; 
        border-right: none; 
        border-bottom: 1px solid #333; 
        flex-direction: row; 
        align-items: center;
        gap: 2rem;
    }
    .red-circle-cta { margin-top: 0; }
    .col-dir { border-right: 1px solid #333; }
}

@media (max-width: 768px) {
    #exact-footer { height: auto; }
    .top-row { padding: 2rem; }
    .main-grid { grid-template-columns: 1fr; display: flex; flex-direction: column;}
    .grid-col { border-right: none; border-bottom: 1px solid #333; padding: 2rem; }
    .bottom-bar { 
        flex-direction: column; 
        gap: 1rem; 
        padding: 2rem;
    }
    .meta-item { width: 100%; justify-content: center !important; }
}

/* --- GRID & LAMP --- */
.footer-grid {
    display: grid;
    /* Desktop Default */
    grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
    gap: 2vw;
    padding-top: 4vh;
    align-items: start;
}

/* Lamp Logic */
.footer-lamp-wrapper {
    position: relative;
    width: 100%;
    /* Adapts to column width */
    max-width: 250px;
    height: 180px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #0a0a0a;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.footer-lamp-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    width: 30px;
    height: 6px;
    background: #D3AF37;
    z-index: 4;
}

.lamp {
    position: absolute;
    top: 0;
    width: 20px;
    height: 100px;
    transform-origin: top center;
    animation: swing 3s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
    z-index: 5;
}

.lamp .line {
    width: 2px;
    height: 100%;
    background: #D3AF37;
    margin: 0 auto;
}

.lamp .base {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: 30px;
    height: 15px;
    background: #D3AF37;
    border-radius: 20px 20px 0 0;
}

.light {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 80px;
    top: 5px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 70%);
    opacity: 0.6;
    pointer-events: none;
}

.lamp-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.lamp-text span {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    mix-blend-mode: overlay;
}

@keyframes swing {
    from {
        transform: rotate(25deg);
    }

    to {
        transform: rotate(-25deg);
    }
}

/* Links */
.footer-grid h4 {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 1.5vh;
    text-transform: uppercase;
}

.footer-grid ul {
    list-style: none;
}

.footer-grid li {
    margin-bottom: 0.5vh;
}

.hover-link {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s;
}

.hover-link:hover {
    color: #D3AF37;
}

.newsletter-form {
    display: flex;
    border-bottom: 1px solid #333;
}

.newsletter-form input {
    background: none;
    border: none;
    color: white;
    padding: 10px 0;
    outline: none;
    width: 100%;
}

.newsletter-form button {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    padding-top: 2vh;
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: #555;
    font-size: 0.8rem;
}

/* =========================================
   RESPONSIVE MEDIA QUERIES
   ========================================= */

/* --- TABLET (landscape & smaller laptops) --- */
@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        /* Switch to 2 columns */
        gap: 3rem;
    }

    .footer-cta-section {
        align-items: flex-start;
    }

    .cta-big-text {
        font-size: 4rem;
    }
}

/* --- MOBILE (portrait) --- */
@media (max-width: 768px) {

    /* Allow footer to grow naturally on mobile, remove 100vh forcing */
    #advanced-footer {
        height: auto;
        min-height: auto;
    }

    .footer-container {
        padding: 4rem 5vw 2rem 5vw;
        height: auto;
    }

    /* CTA Section: Stack vertically */
    .footer-cta-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 2rem;
        padding-bottom: 2rem;
    }

    .cta-text-wrapper {
        width: 100%;
    }

    .cta-big-text {
        font-size: 3rem;
        /* Smaller font for mobile */
    }

    .magnetic-button {
        width: 140px;
        height: 140px;
        align-self: flex-start;
        /* Align button to left */
    }

    /* Grid: Stack all columns vertically */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
        padding-top: 2rem;
    }

    /* Adjust Lamp size for mobile column */
    .footer-lamp-wrapper {
        width: 100%;
        max-width: 100%;
    }

    /* Bottom Bar: Stack copyright and back to top */
    .footer-bottom {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
        text-align: center;
        margin-top: 3rem;
    }
}

/* --- MOBILE STYLES FOR CONTENT SECTIONS --- */
@media screen and (max-width: 768px) {

    /* 1. Base Paragraph Style (Default Red #e71d25) */
    .content .article p {
        font-size: 18px !important;
        line-height: 1.6 !important;
        color: #333333;
        margin-bottom: 20px;
        padding: 15px;
        background-color: #f9f9f9;
        border-radius: 8px;
        border-left: 3px solid #e71d25;
        /* Default: Red Marker */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    }

    /* 2. Black Marker (The 2nd Heading group) */
    /* Target the 2 paragraphs following the 2nd H4 */
    .content .article h4:nth-of-type(2)+p,
    .content .article h4:nth-of-type(2)+p+p {
        border-left-color: #000000 !important;
    }

    /* 3. Blue Marker (The 3rd Heading group) */
    /* Target the 2 paragraphs following the 3rd H4 */
    .content .article h4:nth-of-type(3)+p,
    .content .article h4:nth-of-type(3)+p+p {
        border-left-color: #0056b3 !important;
        /* Standard Blue */
    }

    /* 4. Green Marker (The 4th Heading group) */
    /* Target the 2 paragraphs following the 4th H4 */
    .content .article h4:nth-of-type(4)+p,
    .content .article h4:nth-of-type(4)+p+p {
        border-left-color: #28a745 !important;
        /* Standard Green */
    }

    /* Heading Styles */
    .content .article h4 {
        font-size: 22px !important;
        margin-top: 40px;
        margin-bottom: 15px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
}
#threejs-marker-container {
    position: fixed; /* Keeps the marker stuck to the screen */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 500; /* Ensures it sits above backgrounds but below the loader */
    pointer-events: none; /* Allows you to click buttons underneath the marker */
    overflow: hidden;
}

/* Ensure the loader covers the marker initially */
.loader-screen {
    z-index: 9999; 
}

/* =========================================
           GLOBAL & ANIMATIONS
           ========================================= */
@keyframes stroke {
    from {
        stroke-dashoffset: 5414.29;
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes reveal {
    from {
        clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
        opacity: 0;
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        scale: .2;
    }
}

@keyframes revealText {
    from {
        clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%);
    }
}

html {
    background-color: rgb(255, 255, 255);
}

body {
    margin: 0;
    overflow-x: hidden;
    overscroll-behavior: none;
}

body.is-loading {
    overflow: hidden;
    height: 100vh;
}

/* =========================================
           GLOBAL CURSOR STYLES
           ========================================= */
#global-cursor-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    pointer-events: none;
    mix-blend-mode: difference;
}

/* =========================================
           3D MARKER CANVAS STYLES
           ========================================= */
/* =========================================
   3D MARKER CANVAS STYLES (DESKTOP DEFAULT)
   ========================================= */
#marker-3d-canvas {
    position: fixed;
    top: 40%;
    /* Vertically center */
    right: 0vw;
    /* Position on right (slightly off-screen for style) */
    transform: translateY(-50%);
    /* Center alignment adjustment */

    /* Desktop Size */
    width: 60vh;
    height: 60vh;

    /* Layering */
    z-index: 5;
    /* Behind text, above video */
    pointer-events: none;
    background: transparent;
    transition: opacity 0.1s linear;
}

@media (max-width: 768px) {
    /* ... existing mobile styles ... */

    /* 3D Model: Move to bottom right and shrink for mobile */
    #marker-3d-canvas {
        width: 50vh !important;
        /* Smaller size for phone */
        height: 50vh !important;

        top: auto;
        /* Unset vertical centering */
        bottom: 5vh;
        /* Align to bottom */
        /* Push further right to not block text */
        transform: none;
        /* Remove the desktop centering transform */
    }
}

.page-header {
    align-items: center;
    display: flex;
    height: 100vh;
    justify-content: center;
    background: transparent;
}

.page-header h1 {
    color: white;
    font-size: 3rem;
}

/* =========================================
           LOADER STYLES
           ========================================= */
.loader-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f4f4f4;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    font-family: 'Neue Montreal', sans-serif;
}

.loader-content {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: relative;
}

.willem__h1 {
    white-space: nowrap;
    justify-content: center;
    font-size: clamp(3rem, 12vw, 12.5em);
    font-weight: 500;
    line-height: .75;
    display: flex;
    position: relative;
    color: #201d1d;
}

.willem__h1-start,
.willem__h1-end {
    display: flex;
    overflow: hidden;
}

.willem__h1-start {
    justify-content: flex-end;
    width: auto;
}

.willem__h1-end {
    justify-content: flex-start;
    width: auto;
}

.willem__letter {
    display: block;
    position: relative;
}

.willem-loader__box {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 0;
    display: flex;
    position: relative;
    margin: 0 0.1em;
}

.willem-loader__box-inner {
    justify-content: center;
    align-items: center;
    min-width: 1em;
    height: 95%;
    display: flex;
    position: relative;
}

.willem__growing-image {
    justify-content: center;
    align-items: center;
    width: 0%;
    height: 100%;
    display: flex;
    position: absolute;
    overflow: hidden;
}

.willem__growing-image-wrap {
    width: 100%;
    min-width: 1em;
    height: 100%;
    position: absolute;
}

.willem__cover-image,
.willem__cover-image-extra {
    pointer-events: none;
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.willem__cover-image-extra.is--1 {
    z-index: 3;
}

.willem__cover-image-extra.is--2 {
    z-index: 2;
}

.willem__cover-image-extra.is--3 {
    z-index: 1;
}

/* =========================================
           SECTION 2: URBANIST STYLES
           ========================================= */
:root {
    --theme-main-bg: #b9dcff;
    --theme-sub-bg: #f2fbfe;
    --theme-text: #070f36;
    --theme-title: #8dc9f4;
    --font-sans: "Urbanist", sans-serif;
}

#urbanist-integration {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    font-family: var(--font-sans);
    color: var(--theme-text);
    isolation: isolate;
    z-index: 20;
    background: white;
}

#urbanist-integration .urbanist-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    object-fit: cover;
}

#urbanist-integration .content-layer {
    position: absolute;
    inset: 0;
    padding-inline: min(10vw, 100px);
    z-index: 1;
    pointer-events: none;
}

#urbanist-integration h1 {
    font-size: clamp(10vw, 250px, 20vw);
    color: var(--theme-title);
    margin: 0;
    line-height: 1;
}

#urbanist-integration p {
    width: clamp(5vw, 250px, 80vw);
    font-size: clamp(1vw, 12px, 1.5vw);
    font-weight: 600;
    text-wrap: balance;
    color: var(--theme-text);
    line-height: 1.3;
}

#urbanist-integration .desc-1 {
    margin-top: 2rem;
}

#urbanist-integration .desc-2 {
    position: absolute;
    bottom: 5vh;
    left: min(40vw, 300px);
}

#urbanist-integration .desc-3 {
    position: absolute;
    top: 50%;
    right: 10vw;
}

#panes-container {
    width: 300vw;
    display: flex;
    height: 100%;
}

.pane {
    position: relative;
    height: 100%;
    width: 100vw;
}

.urbanist-floating-img {
    position: absolute;
    right: 0;
    top: 50%;
    width: max(20vw, 400px);
    translate: -100% 0;
    border-radius: 12px;
    display: block;
}

.pane:nth-of-type(2) .urbanist-floating-img {
    aspect-ratio: 1/1;
    object-fit: cover;
    translate: -200% -70%;
    width: max(15vw, 300px);
}

.pane:nth-of-type(3) .urbanist-floating-img {
    translate: -150% -50%;
}

.line-svg {
    grid-row: 1;
    grid-column: 1;
    height: calc(100% - 10rem);
    top: 25cqb;
    min-width: 300px;
    z-index: 1;
    pointer-events: none;
}

.anim-overview-stroke {
    stroke-dasharray: 5414.29;
    stroke-dashoffset: 5414.29;
    animation: stroke linear forwards;
    animation-timeline: view();
    animation-range: cover 0% cover 75%;
}

.container {
    grid-column: 1;
    grid-row: 1;
    margin: 0 auto;
    max-width: 1272px;
    z-index: 2;
}

#scroll-section h2 {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    color: #333;
    font-size: 62px;
    font-weight: 900;
    letter-spacing: .02em;
    margin: 0;
    padding-top: 72px;
    position: relative;
    width: 50%;
    text-align: right;
    animation: revealText linear both;
    animation-timeline: view();
    animation-range: 25% 60%;
}

.layout-container {
    padding-top: 8rem;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}

.box {
    background-color: rgb(255, 239, 239);
    color: #333;
    padding: 4rem;
    opacity: 1;
    scale: 1;
    animation: scaleIn linear both;
    animation-timeline: view();
    animation-range: 0% 40vh;
}

.box h3 {
    font-size: 42px;
    font-weight: 900;
    line-height: 1.1;
    margin: 0 0 18px;
}

.box p {
    font-size: 18px;
    line-height: 1.25;
    margin: 0 0 2em;
}

.box-1 {
    grid-column: 3 / span 3;
    grid-row: span 2;
}

.image-1 {
    grid-column: 1 / span 2;
    grid-row: 2 / span 2;
    margin-top: 100px;
}

.image-2 {
    align-self: end;
    grid-column: 6 / span 1;
    grid-row: 5;
}

.image-3 {
    grid-column: 1 / span 2;
    justify-self: end;
    margin-top: 3rem;
}

.box-2 {
    grid-column: 2 / span 3;
    margin-top: 3rem;
    grid-row: span 2;
}

.box-3 {
    grid-column: 3 / span 3;
    margin-top: 8em;
}

.box-4 {
    grid-column: 1 / span 3;
    margin-top: 12rem;
    margin-bottom: -5rem;
}

.bottom-spacer {
    height: 10vh;
}

/* =========================================
           SECTION 4: PERSPECTIVE ZOOM STYLES
           ========================================= */
#perspective-wrap {
    background-color: #1f1f1f;
    color: #ffffff;
    font-family: "Roboto", sans-serif;
    position: relative;
    z-index: 30;
}

.zoom-container {
    height: 100vh;
    width: 100%;
    overflow: hidden;
    position: relative;
    perspective: 100vh;
    transform-style: preserve-3d;
    background-color: #1f1f1f;
}

.heading-zoom {
    font-size: clamp(3rem, 5vw, 6rem);
    line-height: 1.1;
    text-align: center;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateZ(-2000px);
    white-space: nowrap;
    z-index: 10;
    pointer-events: none;
    font-weight: 900;
    text-transform: uppercase;
    color: white;
}

.zoom-item {
    position: absolute;
    transform-style: preserve-3d;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.zoom-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.zoom-item:nth-child(2) {
    left: 15vw;
    top: 21%;
    width: 15vw;
}

.zoom-item:nth-child(3) {
    left: 29%;
    top: 15%;
    width: 12vw;
}

.zoom-item:nth-child(4) {
    left: 36%;
    top: 3%;
    width: 15vw;
}

.zoom-item:nth-child(5) {
    right: 30%;
    top: 11%;
    width: 10vw;
}

.zoom-item:nth-child(6) {
    right: 7%;
    top: 28%;
    width: 18vw;
}

.zoom-item:nth-child(7) {
    bottom: 32%;
    right: 3.5%;
    width: 8vw;
}

.zoom-item:nth-child(8) {
    bottom: 13.5%;
    left: 16%;
    width: 14vw;
}

.zoom-item:nth-child(9) {
    bottom: 24%;
    left: 29%;
    width: 9vw;
}

.zoom-item:nth-child(10) {
    bottom: 46%;
    left: 7.5%;
    width: 8vw;
}

.zoom-item:nth-child(11) {
    bottom: 5.5%;
    right: 15%;
    width: 18vw;
}

.zoom-item:nth-child(12) {
    bottom: 10.5%;
    right: 38%;
    width: 12vw;
}

.zoom-item:nth-child(13) {
    right: 4%;
    top: 5%;
    width: 9vw;
}

.section-stick {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
    color: white;
    position: relative;
    z-index: 50;
}

.reveal-text-style {
    font-size: 3rem;
    text-align: center;
    width: 80%;
    font-weight: 700;
    line-height: 1.25;
    color: white;
}

@media (min-width: 768px) {
    .reveal-text-style {
        font-size: 4.5rem;
    }
}

.opacity-reveal {
    opacity: 0.2;
}

.opacity-reveal span {
    transition: opacity 0.1s;
}

.spacer-black {
    height: 50vh;
    background: #000;
}

/* =========================================
           SECTION 5: ALICE INTEGRATION STYLES
           ========================================= */
#alice-wrapper {
    --font-open-sans: "Open Sans", serif;
    --color-white: hsla(0, 0%, 100%, 1);
    --color-black: hsla(0, 0%, 0%, 1);
    font-family: var(--font-open-sans);
    font-size: 1rem;
    line-height: 1.75;
    background-color: var(--color-white);
    color: var(--color-black);
    position: relative;
    z-index: 60;
}

#alice-wrapper .intro {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 100vh;
}

#alice-wrapper .intro__heading {
    font-size: clamp(1.875rem, 8.083vw + -0.217rem, 6.25rem);
    line-height: clamp(2.813rem, 9.815vw + 0.273rem, 8.125rem);
    text-align: center;
    margin: 0;
}

#alice-wrapper .content {
    background-color: white;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 1;
    padding: 6.25rem 0;
}

#alice-wrapper .article {
    max-width: 41.25rem;
    padding: 0 1.5rem;
}

#alice-wrapper .hero-reveal {
    background-color: var(--color-black);
    position: relative;
    min-height: 100vh;
    overflow: hidden;
}

#alice-wrapper .hero-reveal__header {
    align-items: center;
    background-color: var(--color-white);
    color: var(--color-black);
    display: flex;
    font-size: clamp(3.125rem, 12.61vw + -0.138rem, 15.625rem);
    line-height: clamp(4.688rem, 15.763vw + 0.609rem, 20.313rem);
    font-weight: 900;
    justify-content: center;
    left: 0;
    min-height: 100vh;
    position: relative;
    top: 0;
    will-change: transform, clip-path;
    z-index: 1;
    width: 100%;
}

#alice-wrapper .hero-reveal_split {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100%;
}

#alice-wrapper .hero-reveal_split_item {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
    margin: 0;
}

#alice-wrapper .hero-reveal_split_item p {
    margin: 0;
}

#alice-wrapper .hero-reveal_split_item:nth-child(1) {
    clip-path: inset(0 0 50% 0);
}

#alice-wrapper .hero-reveal_split_item:nth-child(2) {
    clip-path: inset(50% 0 0 0);
    left: 0;
    position: absolute;
    top: 0;
}

#alice-wrapper .hero-reveal__content {
    color: var(--color-white);
    display: flex;
    justify-content: center;
    padding: 0;
    position: relative;
    margin-top: -60vh; 
    pointer-events: none;
}

#alice-wrapper .hero-reveal__content-inner {
    max-width: 31.25rem;
    position: relative;
    padding: 0 1.5rem;
}

#alice-wrapper .hero-reveal__content-p {
    padding-bottom: 8rem;
    position: relative;
    z-index: 2;
}
/* =========================================
   DESKTOP LAYOUT REDESIGN (Alice Section)
   ========================================= */
@media (min-width: 769px) {

    /* 1. Widen the Container */
    #alice-wrapper .hero-reveal__content-inner {
        max-width: 1100px; /* Much wider to fit columns */
        margin: 0 auto;
        padding: 0 2rem;
    }

    /* 2. Create a 2-Column Grid Layout */
    #alice-wrapper .hero-reveal__content-p {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Two equal columns */
        gap: 3rem 5rem; /* Space between rows and columns */
        text-align: left;
        padding-bottom: 15vh;
        margin-top: 5vh; /* Adjust vertical position */
    }

    /* 3. Small, Technical Typography */
    #alice-wrapper .hero-reveal__content-p p {
        font-size: 0.95rem !important; /* Smaller, precise size */
        line-height: 1.9 !important; /* Airy line-height for readability */
        color: rgba(255, 255, 255, 0.7); /* Softer white for reading comfort */
        margin-bottom: 0; /* Remove default margins, grid handles spacing */
        font-weight: 400;
        letter-spacing: 0.03em;
        max-width: 100%; /* Ensure it fills the column */
        
        /* Reset mobile overrides */
        border: none;
        padding: 0;
    }

    /* 4. High-Contrast Highlights */
    #alice-wrapper .hero-reveal__content-p p b {
        color: #ffffff; /* Pure white */
        font-weight: 700;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Subtle underline */
    }

    /* 5. The Quote (Last Paragraph) - Feature Layout */
    /* This spans across the bottom like a footer */
    #alice-wrapper .hero-reveal__content-p p:last-child {
        grid-column: 1 / -1; /* Span full width */
        margin-top: 4rem;
        
        /* New Look */
        font-family: 'Bodoni Moda', serif; /* Optional: If you have it, or fallback */
        font-size: 2.5rem !important;
        font-weight: 300;
        font-style: italic;
        line-height: 1.2 !important;
        
        text-align: center;
        color: #ffffff;
        opacity: 1;
        
        /* Remove the side border from previous design */
        border-left: none;
        padding-left: 0;
    }

    /* Add a small decorative separator above the quote */
    #alice-wrapper .hero-reveal__content-p p:last-child::before {
        content: "✦";
        display: block;
        font-size: 1.5rem;
        color: rgba(255, 255, 255, 0.4);
        margin-bottom: 2rem;
        font-style: normal;
    }
}
@media (max-width: 768px) {
    #alice-wrapper .hero-reveal__content-p {
        padding: 0 1rem;
    }
}

#alice-wrapper .hero-reveal__content-p p {
    margin-bottom: 2rem;
    line-height: 1.6;
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.95);
    min-width: 200px;
    /* prevent flex crushing */

    word-break: normal !important;
    overflow-wrap: normal !important;
    /* Let browser decide */
    -webkit-hyphens: none !important;
    -moz-hyphens: none !important;
    hyphens: none !important;
}

/* Quote emphasis */
#alice-wrapper .hero-reveal__content-p p:last-child {
    font-size: 1.5rem;
    font-weight: 300;
    opacity: 0.8;
    border-left: 2px solid white;
    padding-left: 1.5rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

#alice-wrapper .hero-reveal__parallax {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

#alice-wrapper .hero-reveal__parallax img {
    position: absolute;
    will-change: transform;
}

#alice-wrapper .hero-reveal__parallax-clock {
    left: -6rem;
    top: -25rem;
}

#alice-wrapper .hero-reveal__parallax-book {
    left: -12.5rem;
    top: -25rem;
}

#alice-wrapper .hero-reveal__parallax-alice {
    left: 50%;
    transform: translateX(-50%);
    top: -31.25rem;
    max-width: 200px;
}

#alice-wrapper .hero-reveal__parallax-kattle {
    left: 31.25rem;
    filter: blur(2px);
    top: -18.75rem;
}

#alice-wrapper .hero-reveal__parallax-card {
    left: 25rem;
    filter: blur(2px);
    z-index: 1;
    top: -25rem;
}

/* =========================================
           LOGO STYLES
           ========================================= */
.header__menu h1.logo {
    margin: 0;
    line-height: 1;
}

.header__menu h1.logo a {
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    font-size: 2.25rem;
    color: black !important;
    /* Force Black */
    text-decoration: none;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    display: inline-block;
    transition: color 0.3s ease, transform 0.3s ease;
    z-index: 1000;
    position: relative;
}

.header__menu h1.logo a:hover {
    color: var(--theme-title, #e0e0e0);
}

/* =========================================
           SECTION 6: CAROUSEL STYLES
           ========================================= */
#carousel-section {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: rgb(211, 216, 203);
    z-index: 70;
}

#carousel-section .slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#carousel-section .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
    background: #dbdbdb;
    overflow: hidden;
    will-change: clip-path;
}

#slide-1 {
    z-index: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

#slide-2 {
    z-index: 2;
    clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
}

#slide-3 {
    z-index: 3;
    clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
}

#slide-4 {
    z-index: 4;
    clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
}

#carousel-section .slide.dark {
    background: #0c0c0c;
}

#carousel-section .slide.light {
    background: #dbdbdb;
}

#carousel-section .slide-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
    pointer-events: none;
}

#carousel-section .slide-content h1 {
    font-family: 'Roboto', sans-serif;
    font-size: 15vw;
    text-transform: uppercase;
    font-weight: 900;
    color: #000;
    margin: 0;
    line-height: 0.9;
}

#carousel-section .slide.dark .slide-content h1 {
    color: #dbdbdb;
}

#carousel-section .slide-img {
    position: absolute;
    width: 250px;
    height: 150vh;
    filter: saturate(0);
}

#carousel-section .slide-img img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 250px;
    height: 600px;
    object-fit: cover;
}

#carousel-section .slide-img-1 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-20deg);
}

#carousel-section .slide-img-2 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(20deg);
}

.scroll-hint {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Urbanist', sans-serif;
    color: #888;
    font-size: 0.8rem;
    z-index: 20;
    pointer-events: none;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* =========================================
           SECTION 7: LIQUID BACKGROUND STYLES
           ========================================= */
#liquid-section {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: #000;
    z-index: 80;
}

#liquid-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.liquid-overlay {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    pointer-events: auto;
}

.liquid-overlay a {
    color: #fff;
    text-decoration: none;
    text-shadow: 1px 1px 2px black;
    font-family: 'Montserrat', sans-serif;
}

/* =========================================
           RESPONSIVE MEDIA QUERIES (NEW ADDITION)
           ========================================= */

@media (max-width: 1024px) {
    #scroll-section h2 {
        width: 80%;
        font-size: 48px;
    }

    .container {
        padding: 0 2rem;
    }
}

@media (max-width: 768px) {

    .hero__title,
    .hero__title span {
        font-size: 20vw !important;
        /* Larger Size */
        z-index: 20 !important;
        /* Above canvas */
        color: black !important;
        /* Force Black */
        pointer-events: none;
        /* Non-blocking */
        position: relative;
    }

    .header__menu h1.logo a {
        font-size: 1.5rem;
        color: black !important;
        /* Force Black Logo */
        z-index: 1000 !important;
        position: relative;
    }

    #scroll-section {
        padding-block-start: 5vh;
    }

    .line-svg {
        display: none;
    }

    .layout-container {
        display: flex;
        flex-direction: column;
        gap: 40px;
        padding-top: 4rem;
    }

    .box-1,
    .box-2,
    .box-3,
    .box-4,
    .image-1,
    .image-2,
    .image-3 {
        grid-column: auto;
        grid-row: auto;
        margin: 0 !important;
        width: 100%;
        box-sizing: border-box;
    }

    .image-2,
    .image-3 {
        justify-self: center;
        align-self: center;
    }

    #scroll-section h2 {
        width: 100%;
        text-align: center;
        font-size: 36px;
        padding-top: 20px;
    }

    .box {
        padding: 2rem;
    }

    .box h3 {
        font-size: 32px;
    }

    #urbanist-integration .content-layer {
        padding-inline: 5vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #urbanist-integration h1 {
        font-size: 18vw;
    }

    #urbanist-integration p {
        width: 90vw;
        font-size: 16px;
    }

    #urbanist-integration .desc-2,
    #urbanist-integration .desc-3 {
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
        top: auto;
        margin-top: 1.5rem;
    }

    .urbanist-floating-img {
        width: 50vw;
        top: 75%;
        left: 50%;
        right: auto;
        translate: -50% -50% !important;
    }

    .pane:nth-of-type(2) .urbanist-floating-img,
    .pane:nth-of-type(3) .urbanist-floating-img {
        translate: -50% -50% !important;
    }

    .heading-zoom {
        font-size: 3rem;
    }

    .zoom-container {
        background-color: white;
    }

    .zoom-item {
        width: 40vw !important;
        max-height: 30vh;
    }

    .zoom-item:nth-child(2) {
        left: 5%;
        top: 15%;
    }

    .zoom-item:nth-child(3) {
        left: 55%;
        top: 10%;
    }

    .zoom-item:nth-child(4) {
        left: 10%;
        top: 60%;
    }

    .zoom-item:nth-child(5) {
        right: 5%;
        top: 40%;
    }

    .zoom-item:nth-child(6) {
        right: 50%;
        top: 80%;
    }

    .reveal-text-style {
        font-size: 1.8rem;
        width: 90%;
    }

    .section-stick {
        margin-bottom: -1100px;
    }

    #carousel-section .slide-content h1 {
        font-size: 20vw;
    }

    #carousel-section .slide-img {
        width: 200px;
        height: 100vh;
    }

    #carousel-section .slide-img img {
        width: 200px;
        height: 400px;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding-top: 2rem;
    }

    .footer-left {
        height: auto;
        text-align: center;
        align-items: center;
    }

    .footer-right {
        height: auto;
        align-items: center;
        text-align: center;
    }

    .footer-big-text {
        font-size: 18vw;
    }

    .footer-links {
        flex-direction: column;
        gap: 2rem;
        margin-top: 2rem;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
        padding-bottom: 2rem;
    }

    #alice-wrapper .intro__heading {
        font-size: 3rem;
    }

    #alice-wrapper .hero-reveal__header {
        font-size: 4rem;
    }

    /* Responsive Marker Adjustment */
    #marker-3d-canvas {
        width: 60vh;
        height: 60vh;
        right: -10vw;
        /* Push slightly off screen for mobile */
        top: 50%;

        /* Lower it slightly */
    }
}

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Host+Grotesk:ital,wght@0,300..800;1,300..800&display=swap");

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

.viewport-section {
    position: relative;
    width: 100vw;
    height: 100svh;
    padding: 2em;
    overflow: hidden;
}

.content-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 2rem;
    position: relative;
    z-index: 20;
}
/* --- CRITICAL FIX: SOLID WORD BLOCKS --- */
.content-wrapper h1 .word {
    display: inline-block !important; /* Treats the word as a solid block */
    white-space: nowrap !important;   /* Prevents the block from breaking inside */
}

/* Ensure the spaces between words allow breaking */
.content-wrapper h1 {
    display: block !important;
    flex-wrap: wrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    width: 90% !important; /* Ensure container width constraints */
}

@media (max-width: 768px) {
    .content-wrapper h1 {
        /* Ensure font size allows words to fit */
        font-size: clamp(1.8rem, 8vw, 3rem) !important; 
        
        /* Disable breaking logic */
        word-break: normal !important;
        overflow-wrap: normal !important;
        -webkit-hyphens: none !important;
        hyphens: none !important;
    }
}
.content-wrapper h1 {
    width: 90%;
    color: #121212;
    font-size: 5rem;
    font-weight: 900;
    line-height: 1;
}

/* Container setup */
.viewport-section {
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* Initial State */
.intro-viewport .content-wrapper,
.action-trigger-zone .content-wrapper,
.conclusion-viewport .content-wrapper {
    opacity: 1;
    will-change: transform, opacity;
    /* Optimizes performance */
}

/* Text setup */
.char {
    display: inline-block;
    opacity: 0;
}

/* --- Section Specific Colors --- */

/* Intro (Previously Hero) - New Color: Electric Violet */
.intro-viewport .content-wrapper {
    background: #fe6d38;
}

/* Action Zone (Previously CTA) - New Color: Neon Cyan */
.action-trigger-zone .content-wrapper {
    background: #c6fe69;
    color: #050511;
    /* Dark text for contrast */
}

.action-trigger-zone .content-wrapper h1 {
    color: #050511;
}

/* Conclusion (Previously Outro) - New Color: Hot Pink */
.conclusion-viewport .content-wrapper {
    background: #7a78ff;
}

/* Narrative & Capabilities Borders */
.narrative-segment .content-wrapper,
.capabilities-segment .content-wrapper {
    border: 0.15rem dashed rgba(100, 100, 120, 0.5);
}

/* --- Typography & Animation Styles --- */

.kinetic-typography-block {
    width: 85%;
}

.kinetic-typography-block p {
    color: #121212;
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.25;
}

.kinetic-typography-block .token-unit {
    display: inline-block;
    position: relative;
    margin-right: 0.2rem;
    margin-bottom: 0.2rem;
    padding: 0.1rem 0.2rem;
    border-radius: 2rem;
    will-change: background-color, opacity;
}

.kinetic-typography-block .token-unit.highlight-anchor {
    margin: 0 0.4rem 0.2rem 0.2rem;
}

.kinetic-typography-block .token-unit span {
    position: relative;
}

/* Highlighters */
.kinetic-typography-block .token-unit span.emphasis-pill {
    border-radius: 2rem;
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 0.1rem 0;
    color: #ffffff;
}

.kinetic-typography-block .token-unit span.emphasis-pill::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% + 1rem);
    height: calc(100% + 0.4rem);
    background-color: #fff;
    border-radius: 2rem;
    z-index: -1;
}

/* Group 1: Electric Violet Fill */
.kinetic-typography-block .token-unit span.emphasis-pill.designed::before,
.kinetic-typography-block .token-unit span.emphasis-pill.smooth::before,
.kinetic-typography-block .token-unit span.emphasis-pill.control::before {
    background-color: #7a78ff;
}

/* Group 2: Hot Pink Fill */
.kinetic-typography-block .token-unit span.emphasis-pill.ideas::before,
.kinetic-typography-block .token-unit span.emphasis-pill.natural::before,
.kinetic-typography-block .token-unit span.emphasis-pill.performance::before {
    background-color: #fe6d38;
}

/* Group 3: Neon Cyan Fill */
.kinetic-typography-block .token-unit span.emphasis-pill.creation::before,
.kinetic-typography-block .token-unit span.emphasis-pill.attention::before,
.kinetic-typography-block .token-unit span.emphasis-pill.value::before {
    background-color: #c6fe69;
}

/* Initial State */
.kinetic-typography-block .token-unit,
.kinetic-typography-block .token-unit span {
    opacity: 0;
}
/* --- FIX FOR BIG TEXT CARDS ON MOBILE --- */
@media (max-width: 768px) {
    .content-wrapper h1 {
        /* 1. Disable all forms of word breaking/splitting */
        -webkit-hyphens: none !important;
        -moz-hyphens: none !important;
        -ms-hyphens: none !important;
        hyphens: none !important;
        word-break: keep-all !important; /* Strongest rule: Keep words together */
        overflow-wrap: normal !important;

        /* 2. Resize font so words actually fit on screen */
        /* This prevents the browser from FORCING a break because the word is too big */
        font-size: clamp(2rem, 8vw, 3rem) !important; 
        
        /* 3. Layout adjustments */
        width: 90% !important;
        line-height: 1.2 !important;
    }
}
@media (max-width: 1000px) {
    .content-wrapper h1 {
        width: 90%;
        font-size: 2rem;
    }

    .kinetic-typography-block {
        width: 90%;
    }

    .kinetic-typography-block p {
        font-size: 1.25rem;
    }

    .kinetic-typography-block .token-unit {
        margin-right: 0.1rem;
        margin-bottom: 0.15rem;
        padding: 0.1rem 0.2rem;
    }

    .kinetic-typography-block .token-unit.highlight-anchor {
        margin: 0 0.2rem 0.1rem 0.1rem;
    }
}

/* =========================================
   NEW SECTION 4: GRID SCROLL STYLES (EXACT MATCH)
   ========================================= */
#grid-scroll-wrapper {
    position: relative;
    z-index: 30;
    background-color: #ffffff;
    width: 100%;
}

.gs-track {
    min-height: 250vh;
    /* Determines scroll length */
    position: relative;
}

.gs-content {
    height: 100vh;
    width: 100%;
    position: sticky;
    top: 0;
    overflow: hidden;
    background: #ffffff;
    display: flex;
    place-items: center;
    align-content: center;
}

/* Heading Style */
.gs-heading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Roboto', sans-serif;

    font-weight: 900;
    font-size: clamp(3rem, 12vw, 10rem);
    /* Matches the fluid typography feel */
    color: #1f1f1f;
    z-index: 1;
    /* Behind the images */
    text-align: center;
    margin: 0;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}

/* The Grid Container */
.gs-grid {
    --gs-offset: 0;
    --gs-container-width: 1600px;
    /* Exact gap logic from reference */
    --gs-gap: clamp(10px, 7.35vw, 80px);

    width: var(--gs-container-width);
    max-width: calc(100% - 4rem);
    display: grid;
    /* 5 columns, 3 rows */
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(3, auto);
    gap: var(--gs-gap);
    margin: 0 auto;
    align-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: 2;
}

/* Images Style - Exact Match */
.gs-grid img {
    width: 100%;
    aspect-ratio: 4 / 5;
    /* Exact aspect ratio */
    object-fit: cover;
    border-radius: 1rem;
    /* Exact border radius */
    display: block;
}

/* Layers using subgrid */
.gs-grid>.gs-layer {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
}

/* Layer 1: Outer edges */
.gs-grid>.gs-layer:nth-of-type(1) div:nth-of-type(odd) {
    grid-column: 1;
}

.gs-grid>.gs-layer:nth-of-type(1) div:nth-of-type(even) {
    grid-column: -2;
}

/* Layer 2: Inner columns */
.gs-grid>.gs-layer:nth-of-type(2) div:nth-of-type(odd) {
    grid-column: calc(2 + var(--gs-offset));
}

.gs-grid>.gs-layer:nth-of-type(2) div:nth-of-type(even) {
    grid-column: calc(-3 - var(--gs-offset));
}

/* Layer 3: Center column top and bottom */
.gs-grid>.gs-layer:nth-of-type(3) div:first-of-type {
    grid-column: calc(3 + var(--gs-offset));
    grid-row: 1;
}

.gs-grid>.gs-layer:nth-of-type(3) div:last-of-type {
    grid-column: calc(3 + var(--gs-offset));
    grid-row: -1;
}

/* Center Scaler Image */
.gs-scaler {
    position: relative;
    grid-area: 2 / calc(3 + var(--gs-offset));
    z-index: 2;
    width: 100%;
    height: 100%;
}

.gs-scaler img {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    object-fit: cover;
    border-radius: 1rem;
    width: 100%;
    height: 100%;
}

/* Exact Mobile Logic */
@media (max-width: 600px) {
    .gs-grid {
        grid-template-columns: repeat(3, 1fr);
        --gs-offset: -1;
    }

    .gs-grid>.gs-layer:nth-of-type(1) {
        display: none;
    }
}

/* =========================================
   NEW SECTION 2: WEBGL SLIDER STYLES
   ========================================= */
.slider {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.slider__text {
    position: absolute;
    top: 50%;
    left: calc(2rem + 3vw);
    transform: translateY(-50%);
    z-index: 10;
    font-size: calc(1rem + 4vw);
    text-transform: uppercase;
    line-height: 1.075;
    color: #fff;
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
    pointer-events: none;
}

.slider__text-line {
    overflow: hidden;
}

.slider__inner {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

.slider__nav {
    position: absolute;
    top: 50%;
    right: 5vw;
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
}

.slider-bullet {
    display: flex;
    align-items: center;
    padding: 1rem 0;
}

.slider-bullet__text {
    color: #fff;
    font-size: 0.65rem;
    margin-right: 1rem;
}

.slider-bullet__line {
    background-color: #fff;
    height: 1px;
    width: 1rem;
}

.slider canvas {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    filter: blur(8px) brightness(0.9);
    transform: scale(1.1);
    /* Scale up slightly to hide blurred edges */
}

.slide {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    opacity: 0;
    /* Hidden by default, JS handles it */
    visibility: hidden;
}

.slide__content {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

.slide__img {
    position: relative;
    width: 25vw;
    height: 70vh;
    padding: 0;
    margin: 0;
    min-width: 12.5rem;
    transform-origin: top;
}

.slide__img:first-child {
    top: -1.5rem;
    margin-right: 2rem;
}

.slide__img:last-child {
    bottom: -1.5rem;
}

.slide__img img {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scroll.js-scroll {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Urbanist', sans-serif;
    font-size: 0.8rem;
    z-index: 10;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    .mobile-hidden {
        display: none !important;
    }
}

/* =========================================
   NEW REDESIGN: MARKER FEATURE GRID
   ========================================= */

/* Make the wrapper wide enough */
#alice-wrapper .content {
    max-width: 100vw;
    width: 100%;
    padding: 8vh 5vw;
    background: #f4f4f4;
    /* Subtle gray bg for contrast with glass cards */
    display: flex;
    justify-content: center;
}

.marker-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    width: 100%;
    max-width: 1800px;
    /* Wide layout */
}

/* Glassmorphism Card Style */
.feature-card {
    position: relative;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    overflow: hidden;
    opacity: 0;
    /* Hidden initially for stats animation */
    /* Subtle 3D lift */
    transform: translateY(30px);
}

.feature-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.9);
}

/* Top Neon borders */
.card-red {
    border-top: 4px solid #e71d25;
}

.card-black {
    border-top: 4px solid #000000;
}

.card-blue {
    border-top: 4px solid #0056b3;
}

.card-green {
    border-top: 4px solid #28a745;
}

/* Dynamic Shadows (Neon Glow on Hover) */
.card-red:hover {
    box-shadow: 0 20px 40px rgba(231, 29, 37, 0.15);
}

.card-black:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.card-blue:hover {
    box-shadow: 0 20px 40px rgba(0, 86, 179, 0.15);
}

.card-green:hover {
    box-shadow: 0 20px 40px rgba(40, 167, 69, 0.15);
}

/* Typography */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding-bottom: 1rem;
}

.card-number {
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    font-size: 2rem;
    opacity: 0.2;
}

.card-label {
    font-family: 'Arial', sans-serif;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: bold;
    color: #555;
    border: 1px solid #ddd;
    padding: 4px 8px;
    border-radius: 4px;
}

.feature-card h3 {
    font-family: 'Neue Montreal', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    margin: 0 0 1rem 0;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

.feature-highlight {
    font-family: 'Roboto', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    /* Color match per card */
}

/* Specific text colors */
.card-red h3,
.card-red .feature-highlight {
    color: #e71d25;
}

.card-black h3,
.card-black .feature-highlight {
    color: #000000;
}

.card-blue h3,
.card-blue .feature-highlight {
    color: #0056b3;
}

.card-green h3,
.card-green .feature-highlight {
    color: #28a745;
}

.feature-desc {
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #444;
    font-weight: 400;
}

/* Responsive */
@media (max-width: 1024px) {
    .marker-features-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .marker-features-grid {
        grid-template-columns: 1fr;
    }

    .feature-card {
        margin-bottom: 1rem;
    }
}


/* --- PLAYGROUND SECTION --- */
#drawing-playground {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: #f4f4f4;
    /* Premium off-white */
    overflow: hidden;
    cursor: crosshair !important;
    /* Force crosshair, override custom cursor */

    /* SNAP SCROLL LOGIC */
    scroll-snap-align: start;
    scroll-margin-top: 0;
}

/* Ensure the parent container supports snapping */
html,
body {
    scroll-snap-type: y proximity;
    /* Allows snapping but doesn't trap you */
}

.playground-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Grid Pattern (Subtle & High-Res) */
.grid-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
    background-size: 40px 40px;
    background-image:
        linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
}

.grid-layer.visible {
    opacity: 1;
}

#playground-canvas {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
}

/* --- UI TOOLBAR (Floating & Smooth) --- */
.playground-ui {
    position: absolute;
    top: 50%;
    left: 30px;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 15px;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.5);
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 60px;
    /* Collapsed state */
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.4s ease;
    overflow: hidden;
}

/* Hover expansion */
.playground-ui:hover {
    width: 240px;
    align-items: flex-start;
    padding: 25px;
}

.ui-header {
    opacity: 0;
    width: 0;
    height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease 0.1s;
}

.playground-ui:hover .ui-header {
    opacity: 1;
    width: auto;
    height: auto;
    margin-bottom: 10px;
}

.ui-header h3 {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
    color: #000;
}

/* Tools Container */
.tools-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.playground-ui:hover .tools-group {
    flex-direction: row;
    flex-wrap: wrap;
}

/* Color Dots */
.color-picker {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.playground-ui:hover .color-picker {
    flex-direction: row;
}

.color-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

.color-btn:hover {
    transform: scale(1.1);
}

.color-btn.active {
    transform: scale(1.3);
    border-color: #000;
    z-index: 2;
}

/* Action Buttons */
/* --- TOOL BUTTON STYLES (UPDATED) --- */
.tool-btn,
.action-btn {
    padding: 12px;
    /* Uniform padding */
    border-radius: 8px;
    border: 1px solid transparent;
    background: #f2f2f2;
    color: #666;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* Fill container width */
}

/* SVG Icon Styling */
.tool-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: fill 0.2s;
}

/* Text Handling: Hidden by default (Collapsed state) */
.tool-btn span {
    display: none;
    margin-left: 10px;
    opacity: 0;
    white-space: nowrap;
}

/* --- HOVER EXPANSION LOGIC --- */

/* When hovering the main container, allow text to show */
.playground-ui:hover .tool-btn {
    width: auto;
    /* Allow buttons to grow */
    padding: 10px 16px;
    justify-content: flex-start;
    /* Align icon-text to left */
}

.playground-ui:hover .tool-btn span {
    display: inline-block;
    opacity: 1;
    animation: fadeIn 0.3s ease forwards;
}

/* Active State Colors */
.tool-btn.active {
    background: #111;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
}

.tool-btn:hover:not(.active) {
    background: #e0e0e0;
    color: #000;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateX(-5px);
    }

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

/* =========================================
   BASE STYLES (Desktop Default)
   ========================================= */

/* Default Icon Placeholder (Square) */
.tool-btn::before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    background: currentColor;
    border-radius: 2px;
}

/* Hide text by default in collapsed state */
.tool-btn span {
    display: none;
    margin-left: 8px;
}

/* Active State */
.tool-btn.active {
    background: #000;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Action Button (Clear/Reset) */
.action-btn {
    background: transparent;
    border-color: #eee;
    width: 100%;
    margin-top: auto;
}

.action-btn:hover {
    background: #d91c24;
    color: #fff;
    border-color: #d91c24;
}

/* Navigation Arrows (Bottom Right) */
.playground-nav {
    position: absolute;
    right: 30px;
    bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 20;
}

.nav-arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #eee;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-arrow:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    background: #000;
    color: #fff;
    border-color: #000;
}

/* Cursor Utility */
body.hide-cursor .custom-cursor,
body.hide-cursor #global-cursor-canvas {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: none !important;
    pointer-events: none !important;
}

/* =========================================
   DESKTOP HOVER EFFECTS (Non-Mobile Only)
   ========================================= */
/* We wrap this in a media query so mobile doesn't weirdly expand on tap */
@media (min-width: 769px) {

    .playground-ui:hover .tool-btn,
    .playground-ui:hover .action-btn {
        width: auto;
        padding: 8px 12px;
    }

    .playground-ui:hover .tool-btn span {
        display: inline;
    }

    .playground-ui:hover .tool-btn::before {
        display: none;
        /* Hide placeholder icon when text shows */
    }
}

/* =========================================
   MOBILE RESPONSIVE FIX
   ========================================= */
@media (max-width: 768px) {

    .playground-ui {
        /* 1. Ensure the bar fits within the screen width */
        width: calc(100% - 40px) !important;
        max-width: 100vw;
        height: auto !important;

        /* 2. Switch to Horizontal Row */
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        /* Start from left */

        /* 3. Reset Positioning (Keep your original coordinates) */
        bottom: 20px;
        left: 20px;
        top: auto;
        transform: none;

        padding: 10px 15px !important;
        gap: 10px;
        /* Consistent gap between all items */
    }

    /* Prevent the "Hover to Expand" effect on mobile */
    .playground-ui:hover {
        width: calc(100% - 40px) !important;
    }

    /* =========================================
       VISIBILITY & SIZING (The "Minimized" Look)
       ========================================= */

    /* 1. Hide ALL text labels to save space */
    .ui-header,
    .tools-group span,
    .action-btn span,
    .tool-btn span {
        display: none !important;
    }

    /* 2. Reset Tools Group to flow horizontally */
    .tools-group {
        display: flex !important;
        flex-direction: row !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 8px;
    }

    /* 3. Make Buttons Square & Visible */
    .tool-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        /* Prevents squishing */
        padding: 0 !important;

        display: flex !important;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
    }

    /* Ensure icons show up */
    .tool-btn::before {
        display: block !important;
        margin: 0 !important;
    }

    /* 4. Fix Color Picker */
    .color-picker {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px;
        margin: 0 8px !important;
        /* Add slight separation */
    }

    /* =========================================
       THE POSITION FIX (Action Button)
       ========================================= */

    /* On Desktop, this was 'margin-top: auto' (bottom). 
       On Mobile, we change it to 'margin-left: auto' 
       to push it to the far right side of the row. */
    .action-btn {
        margin-top: 0 !important;
        margin-left: auto !important;
        /* Pushes button to the right end */

        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    /* Adjust Nav Arrows to not overlap */
    .playground-nav {
        bottom: 90px;
        right: 20px;
    }
}/* Container: Adjusted hit area for the larger text */
.black-hole-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: auto;          
    height: auto;        
    padding: 20px 40px;   /* Increased padding for a better magnetic hit area */
    background: transparent; 
    border: none;
    cursor: pointer;
    text-decoration: none;
    z-index: 10;
    overflow: visible;
}

.magnetic-wrap {
    display: inline-block;
    position: relative;
    padding: 20px;
}

/* Main Text: Bigger, Bolder, Darker */
.btn-text {
    font-family: 'Inter', sans-serif;
    font-size: 3rem;      /* Significantly larger */
    font-weight: 800;     /* Extra Bold */
    color: #000000;       /* Solid Black for white background */
    line-height: 1;       /* Tighter line height for large text */
    letter-spacing: -1px; /* Tighter tracking for a modern feel */
    z-index: 2;
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* Hover Text: Adjusted contrast and position */
.btn-text-hover {
    position: absolute;
    opacity: 0;
    font-size: 0.85rem;
    font-weight: 500;     /* Medium weight */
    letter-spacing: 3px;  /* Wide spacing for contrast */
    text-transform: uppercase;
    color: #333333;       /* Dark Grey */
    
    /* Position logic */
    top: 100%;            
    transform: translateY(-5px); /* Start slightly higher */
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
    white-space: nowrap;
}

/* Hover Interaction */
.black-hole-btn:hover .btn-text-hover {
    opacity: 1;
    transform: translateY(10px); /* Slide down distance */
}

/* Main text slight lift on hover */
.black-hole-btn:hover .btn-text {
    transform: translateY(-5px);
}
/* Liquid Effect */
.black-hole-btn::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.black-hole-btn:hover::after {
    opacity: 1;
    transform: scale(1.2);
}

/* Transition Overlay */
.transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    z-index: 9999;
    transform: scaleY(0);
    transform-origin: bottom;
    pointer-events: none;
}