/* ==========================================================================
   DESIGN SYSTEM & VARIABLES
   ========================================================================== */
:root {
    --bg-color: #070708;
    --text-color: #e6e6fa;
    --accent-color: #8a2be2;
    --accent-glow: rgba(138, 43, 226, 0.35);
    --border-color: #1a1a1e;
    --muted-color: #7b7b8f;
    --font-serif: 'Cinzel', 'Playfair Display', serif;
    --font-sans: 'Plus Jakarta Sans', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    --grid-line-color: rgba(230, 230, 250, 0.02);
}

/* ==========================================================================
   LOADING SCREEN PRELOADER
   ========================================================================== */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #050506;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
}

.preloader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.preloader-symbol {
    font-size: 2.5rem;
    color: var(--accent-color);
    animation: rotateSymbol 4s linear infinite;
    text-shadow: 0 0 15px var(--accent-glow);
}

.preloader-bar-wrap {
    width: 200px;
    height: 2px;
    background-color: rgba(230, 230, 250, 0.05);
    position: relative;
    overflow: hidden;
    border-radius: 1px;
}

.preloader-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #a78bfa, #8a2be2);
    box-shadow: 0 0 8px var(--accent-glow);
}

.preloader-text {
    font-size: 0.65rem;
    color: var(--muted-color);
    letter-spacing: 3px;
    animation: flickerText 1.5s infinite alternate;
}

@keyframes flickerText {
    0% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* ==========================================================================
   RESET & GLOBAL STYLES
   ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-sans);
    font-weight: 300;
    line-height: 1.6;
    overflow-x: hidden;
    scroll-behavior: auto; /* Managed by Lenis */
}

/* Violet Radial Gradients and Grain Background */
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at 80% 20%, rgba(138, 43, 226, 0.08) 0%, transparent 50%),
                radial-gradient(circle at 15% 75%, rgba(90, 24, 154, 0.06) 0%, transparent 60%);
    pointer-events: none;
    z-index: 2;
}

.grain-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 3;
}

/* Lenis Custom Smooth Scroll Styles */
html.lenis {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overflow: clip;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

/* ==========================================================================
   CUSTOM INTERACTIVE CURSOR
   ========================================================================== */
#custom-cursor,
#custom-cursor-dot {
    display: none;
    pointer-events: none;
    position: fixed;
    transform: translate(-50%, -50%);
}

@media (hover: hover) and (pointer: fine) {
    html, body, a, button, .btn, .time-slot, .day {
        cursor: none;
    }

    #custom-cursor {
        display: block;
        width: 32px;
        height: 32px;
        border: 1px solid var(--accent-color);
        border-radius: 50%;
        z-index: 9999;
        transition: width 0.3s ease, height 0.3s ease, background-color 0.3s ease;
        mix-blend-mode: difference;
    }

    #custom-cursor-dot {
        display: block;
        width: 6px;
        height: 6px;
        background-color: var(--accent-color);
        border-radius: 50%;
        z-index: 10000;
    }

    #custom-cursor.hovered {
        width: 56px;
        height: 56px;
        background-color: rgba(138, 43, 226, 0.1);
        border-color: rgba(138, 43, 226, 0.6);
    }
}

/* ==========================================================================
   FINE GRID LINES OVERLAY
   ========================================================================== */
.grid-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 5;
    padding: 0 10%;
}

.grid-line {
    width: 1px;
    height: 100%;
    background-color: var(--grid-line-color);
}

/* ==========================================================================
   SIDEBAR NAVIGATION
   ========================================================================== */
.sidebar-nav {
    position: fixed;
    right: 4%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
}

.nav-indicator-wrap {
    display: flex;
    flex-direction: column;
    gap: 22px;
    align-items: flex-end;
}

.nav-dot {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    color: var(--muted-color);
    font-size: 0.8rem;
    transition: color 0.3s ease;
}

.dot-num {
    font-family: var(--font-mono);
    font-size: 1.15rem;
    opacity: 0.7;
    transition: opacity 0.3s ease, color 0.3s ease;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.dot-label {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.75rem;
    opacity: 0;
    transform: translateX(15px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    color: var(--text-color);
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.9);
}

.nav-dot:hover .dot-label,
.nav-dot.active .dot-label {
    opacity: 1;
    transform: translateX(0);
}

.nav-dot:hover,
.nav-dot.active {
    color: var(--text-color);
}

.nav-dot.active .dot-num {
    color: var(--accent-color);
    opacity: 1;
    font-weight: 700;
}

/* ==========================================================================
   SITE HEADER
   ========================================================================== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    padding: 0 10%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 90;
    background-color: rgba(7, 7, 8, 0.85);
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-symbol {
    font-size: 1.2rem;
    color: var(--accent-color);
    animation: rotateSymbol 10s linear infinite;
}

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

.logo-text {
    font-family: var(--font-serif);
    font-weight: 800;
    letter-spacing: 3px;
    font-size: 1.1rem;
}

.header-nav {
    display: flex;
    gap: 40px;
}

.header-nav a {
    text-decoration: none;
    color: var(--text-color);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 2px;
    transition: color 0.3s ease;
}

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

.hover-underline {
    position: relative;
}

.hover-underline::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 1px;
    bottom: -4px;
    left: 0;
    background-color: var(--accent-color);
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

.hover-underline:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.header-status {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pulse-dot {
    width: 6px;
    height: 6px;
    background-color: #00ff66;
    border-radius: 50%;
    box-shadow: 0 0 10px #00ff66;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { transform: scale(0.9); opacity: 0.8; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(0.9); opacity: 0.8; }
}

.status-text {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 1px;
    color: var(--muted-color);
}

/* ==========================================================================
   BACKGROUND 3D CANVAS
   ========================================================================== */
#canvas-container {
    position: fixed;
    top: 0;
    right: 0;
    width: 50%;
    height: 100vh;
    z-index: 1;
    pointer-events: none;
    opacity: 0.85;
}

/* ==========================================================================
   CONTAINERS & PANELS
   ========================================================================== */
.main-content {
    position: relative;
    z-index: 10;
}

.panel {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 120px 10%;
    border-bottom: 1px solid var(--border-color);
    position: relative;
    background: transparent;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.monospace {
    font-family: var(--font-mono);
}

.serif {
    font-family: var(--font-serif);
}

.font-gradient {
    background: linear-gradient(45deg, #a78bfa, #8a2be2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.font-muted {
    color: var(--muted-color);
    font-size: 0.85rem;
}

.section-label {
    font-size: 0.75rem;
    color: var(--accent-color);
    letter-spacing: 4px;
    margin-bottom: 40px;
    display: block;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 400;
    letter-spacing: 2px;
    line-height: 1.2;
    margin-bottom: 30px;
}

/* ==========================================================================
   00 HERO SECTION
   ========================================================================== */
.hero-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.hero-label {
    font-size: 0.8rem;
    letter-spacing: 5px;
    color: var(--muted-color);
    margin-bottom: 25px;
}

.hero-title {
    font-size: clamp(3rem, 7vw, 6rem);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -2px;
    margin-bottom: 60px;
    color: var(--text-color);
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 80px;
}

.hero-desc .lead {
    font-size: 1.2rem;
    color: var(--muted-color);
    margin-bottom: 40px;
    max-width: 500px;
}

.hero-cta-wrap {
    display: flex;
    gap: 20px;
}

.btn {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 2px;
    padding: 16px 32px;
    text-decoration: none;
    border-radius: 2px;
    transition: all 0.3s ease;
    cursor: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn-primary {
    background-color: var(--accent-color);
    color: #fff;
    border: 1px solid var(--accent-color);
    box-shadow: 0 4px 15px var(--accent-glow);
}

.btn-primary:hover {
    background-color: transparent;
    color: var(--accent-color);
    box-shadow: none;
}

.btn-secondary {
    background-color: transparent;
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.btn .arrow {
    transition: transform 0.3s ease;
}

.btn:hover .arrow {
    transform: translateY(4px);
}

.hero-aside {
    border-left: 1px solid var(--border-color);
    padding-left: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    font-size: 0.8rem;
}

.aside-item {
    display: flex;
    justify-content: space-between;
}

.aside-key {
    color: var(--muted-color);
}

.aside-val {
    font-weight: 600;
}

/* ==========================================================================
   01 MANIFESTO SECTION
   ========================================================================== */
.manifesto-container {
    max-width: 900px;
}

.manifesto-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.scroll-reveal-text {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    line-height: 1.4;
    color: var(--muted-color);
}

/* GSAP Span Reveals */
.reveal-word {
    display: inline-block;
    opacity: 0.15;
    transition: opacity 0.1s ease;
}

.reveal-word.active {
    color: var(--text-color);
    opacity: 1;
}

.manifesto-author {
    font-size: 1.1rem;
    letter-spacing: 3px;
    color: var(--accent-color);
    align-self: flex-end;
}

/* ==========================================================================
   02 ABOUT SECTION
   ========================================================================== */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
}

.about-intro {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.about-lead {
    font-size: 1.15rem;
    color: var(--muted-color);
}

.about-cards {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.about-card {
    border: 1px solid var(--border-color);
    background-color: rgba(22, 22, 26, 0.2);
    padding: 30px;
    position: relative;
    border-radius: 4px;
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.about-card:hover {
    border-color: var(--accent-color);
    transform: translateY(-5px);
}

.card-num {
    font-size: 0.75rem;
    color: var(--accent-color);
    margin-bottom: 15px;
    display: block;
}

.about-card h3 {
    font-size: 1.4rem;
    font-weight: 400;
    margin-bottom: 12px;
}

.about-card p {
    font-size: 0.9rem;
    color: var(--muted-color);
}

/* ==========================================================================
   03 NUMBERS / STATS SECTION
   ========================================================================== */
.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 60px;
    margin-bottom: 60px;
}

.stat-box {
    text-align: center;
    border: 1px solid var(--border-color);
    padding: 40px 20px;
    background-color: rgba(22, 22, 26, 0.1);
    border-radius: 4px;
}

.stat-number {
    font-size: 4rem;
    line-height: 1;
    margin-bottom: 15px;
    color: var(--text-color);
}

.stat-label {
    font-size: 0.7rem;
    letter-spacing: 2px;
    margin-bottom: 10px;
    color: var(--accent-color);
}

.stat-sub {
    font-size: 0.75rem;
}

.skills-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
}

.skills-column h4 {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 15px;
}

.skills-column p {
    color: var(--muted-color);
    font-size: 0.95rem;
    margin-bottom: 25px;
}

.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 15px;
    font-size: 0.8rem;
    color: var(--accent-color);
}

.tech-tags span {
    border: 1px solid var(--border-color);
    padding: 4px 12px;
    border-radius: 20px;
    background-color: rgba(138, 43, 226, 0.05);
}

/* ==========================================================================
   04 TIMELINE / JOURNEY SECTION
   ========================================================================== */
.timeline {
    position: relative;
    margin-top: 60px;
    padding-bottom: 40px;
}

.timeline-line {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: calc(100% - 100px);
    background-color: var(--border-color);
}

.timeline-nodes {
    display: flex;
    flex-direction: column;
    gap: 60px;
    position: relative;
}

.timeline-node {
    width: 45%;
    position: relative;
    padding: 30px;
    border: 1px solid var(--border-color);
    background-color: rgba(22, 22, 26, 0.15);
    border-radius: 4px;
    transition: border-color 0.3s ease;
}

.timeline-node:hover {
    border-color: var(--accent-color);
}

.timeline-node:nth-child(odd) {
    align-self: flex-start;
}

.timeline-node:nth-child(even) {
    align-self: flex-end;
}

.node-dot {
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: var(--accent-color);
    border-radius: 50%;
    top: 40px;
    box-shadow: 0 0 10px var(--accent-glow);
}

.timeline-node:nth-child(odd) .node-dot {
    right: -5.5%;
}

.timeline-node:nth-child(even) .node-dot {
    left: -5.5%;
}

.node-year {
    font-size: 0.8rem;
    color: var(--accent-color);
    letter-spacing: 2px;
    margin-bottom: 10px;
    font-weight: 700;
}

.timeline-node h3 {
    font-size: 1.4rem;
    font-weight: 400;
    margin-bottom: 10px;
}

.node-desc {
    font-size: 0.9rem;
    color: var(--muted-color);
}

/* ==========================================================================
   05 WORK SECTION
   ========================================================================== */
.work-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.work-card {
    border: 1px solid var(--border-color);
    background-color: rgba(22, 22, 26, 0.15);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.1s ease, border-color 0.3s ease;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.work-card:hover {
    border-color: var(--accent-color);
}

.work-img-wrap {
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    position: relative;
}

.work-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.work-card:hover .work-img {
    transform: scale(1.05);
}

.work-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(7, 7, 8, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.work-card:hover .work-overlay {
    opacity: 1;
}

.work-view {
    font-size: 0.75rem;
    color: var(--accent-color);
    letter-spacing: 2px;
    border: 1px solid var(--accent-color);
    padding: 10px 20px;
    background-color: rgba(138, 43, 226, 0.1);
}

.work-details {
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex-grow: 1;
}

.work-meta {
    font-size: 0.7rem;
    color: var(--muted-color);
    letter-spacing: 1px;
}

.work-title {
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 1px;
}

.work-desc {
    font-size: 0.85rem;
    color: var(--muted-color);
    flex-grow: 1;
}

.work-tags {
    display: flex;
    gap: 10px;
    font-size: 0.7rem;
    color: var(--accent-color);
    margin-top: 10px;
}

.work-tags span {
    border: 1px solid rgba(230, 230, 250, 0.05);
    background-color: rgba(255, 255, 255, 0.02);
    padding: 3px 10px;
    border-radius: 3px;
}

/* ==========================================================================
   06 CONTACT SECTION
   ========================================================================== */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    margin-bottom: 60px;
}

.contact-desc {
    font-size: 1.1rem;
    color: var(--muted-color);
    margin-bottom: 40px;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.contact-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contact-label {
    font-size: 0.75rem;
    color: var(--muted-color);
    letter-spacing: 2px;
}

.contact-value {
    font-size: 1.2rem;
    color: var(--text-color);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.contact-value:hover {
    color: var(--accent-color);
}

.social-links {
    display: flex;
    gap: 25px;
}

.social-links a {
    font-size: 0.85rem;
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

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

/* SCHEDULER CARD WIDGET */
.contact-scheduler {
    display: flex;
    justify-content: center;
}

.scheduler-card {
    border: 1px solid var(--border-color);
    background-color: rgba(22, 22, 26, 0.3);
    padding: 40px;
    border-radius: 4px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.scheduler-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 20px;
}

.scheduler-avatar {
    width: 45px;
    height: 45px;
    background-color: var(--accent-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 0 10px var(--accent-glow);
}

.scheduler-name {
    font-size: 0.8rem;
    letter-spacing: 2px;
    font-weight: 700;
}

.scheduler-time {
    font-size: 0.75rem;
}

.scheduler-calendar {
    margin-bottom: 25px;
}

.calendar-month {
    font-size: 0.75rem;
    letter-spacing: 2px;
    margin-bottom: 15px;
    text-align: center;
    color: var(--accent-color);
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    text-align: center;
}

.calendar-day-header {
    font-size: 0.7rem;
    color: var(--muted-color);
    font-weight: 700;
    margin-bottom: 8px;
}

.day {
    font-size: 0.8rem;
    padding: 8px 0;
    border-radius: 2px;
    cursor: none;
    transition: all 0.2s ease;
}

.day:not(.muted):hover {
    background-color: var(--border-color);
    color: var(--accent-color);
}

.day.active {
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
}

.day.muted {
    color: rgba(230, 230, 250, 0.15);
    pointer-events: none;
}

.scheduler-times {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
}

.time-slot {
    flex: 1;
    text-align: center;
    font-size: 0.75rem;
    border: 1px solid var(--border-color);
    padding: 10px 0;
    border-radius: 2px;
    cursor: none;
    transition: all 0.2s ease;
}

.time-slot:hover,
.time-slot.active {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background-color: rgba(138, 43, 226, 0.05);
}

.btn-block {
    width: 100%;
    justify-content: center;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-color);
    padding-top: 40px;
    margin-top: 60px;
    font-size: 0.65rem;
    color: var(--muted-color);
    letter-spacing: 1px;
}

/* ==========================================================================
   RESPONSIVE LAYOUT MEDIA QUERIES
   ========================================================================== */
@media (max-width: 1024px) {
    .grid-overlay {
        padding: 0 5%;
    }
    .panel {
        padding: 100px 5%;
    }
    #canvas-container {
        width: 100%;
        opacity: 0.4;
    }
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .hero-aside {
        border-left: none;
        border-top: 1px solid var(--border-color);
        padding-left: 0;
        padding-top: 30px;
    }
    .about-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .stats-row {
        grid-template-columns: repeat(2, 1fr);
    }
    .skills-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .work-grid {
        grid-template-columns: 1fr 1fr;
    }
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }
}

@media (max-width: 768px) {
    .site-header {
        padding: 0 5%;
    }
    .header-nav {
        display: none; /* simple burger menu usually, hidden for layout simplicity */
    }
    .sidebar-nav {
        display: none;
    }
    .hero-title {
        font-size: 3.5rem;
    }
    .stats-row {
        grid-template-columns: 1fr;
    }
    .work-grid {
        grid-template-columns: 1fr;
    }
    .timeline-line {
        left: 20px;
    }
    .timeline-node {
        width: calc(100% - 40px);
        align-self: flex-start !important;
        margin-left: 40px;
    }
    .node-dot {
        left: -26px !important;
        right: auto !important;
    }
    .site-footer {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
}

/* ==========================================================================
   MANIFESTO SENTENCE LINE REVEALS
   ========================================================================== */
.manifesto-line {
    display: block;
    opacity: 0.15;
    transform: translateY(15px);
    transition: opacity 0.6s ease, transform 0.6s ease, color 0.4s ease;
    margin-bottom: 12px;
}

.manifesto-line.active {
    opacity: 1;
    transform: translateY(0);
    color: var(--text-color);
}

/* ==========================================================================
   ABOUT 3D INTERACTIVE TOTEM
   ========================================================================== */
.about-image-wrap {
    width: 100%;
    max-width: 380px;
    aspect-ratio: 1;
    border: 1px solid var(--border-color);
    background-color: rgba(22, 22, 26, 0.2);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    align-self: start;
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: border-color 0.3s ease;
}

.about-image-wrap:hover {
    border-color: var(--accent-color);
}

.about-image-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform: translateZ(30px);
}

.about-img-totem {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) sepia(30%) hue-rotate(250deg) saturate(280%) contrast(110%);
    opacity: 0.7;
    transition: filter 0.6s ease, opacity 0.6s ease, transform 0.6s ease;
}

.about-image-wrap:hover .about-img-totem {
    filter: grayscale(0%) sepia(0%) hue-rotate(0deg) saturate(100%) contrast(100%);
    opacity: 1;
    transform: scale(1.03);
}

.about-img-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.1) 0%, transparent 100%);
    pointer-events: none;
    transition: opacity 0.6s ease;
}

.about-image-wrap:hover .about-img-overlay {
    opacity: 0;
}

/* Adjust about grid for three columns or side image layout */
.about-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 60px;
    align-items: start;
}

@media (max-width: 1024px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .about-image-wrap {
        max-width: 100%;
        aspect-ratio: 16/9;
    }
}


/* ==========================================================================
   CODEX POLISH PASS: PURPLE GRAIN, MANIFESTO, KATANA STAGE
   ========================================================================== */
:root {
    --bg-color: #06050a;
    --text-color: #f3efff;
    --accent-color: #a855f7;
    --accent-2: #c4b5fd;
    --accent-glow: rgba(168, 85, 247, 0.45);
    --border-color: rgba(216, 180, 254, 0.13);
    --muted-color: #a7a0b8;
    --font-sans: 'Syne', 'Plus Jakarta Sans', sans-serif;
}

html, body {
    background:
        radial-gradient(circle at 72% 18%, rgba(168, 85, 247, 0.22), transparent 34vw),
        radial-gradient(circle at 18% 72%, rgba(76, 29, 149, 0.34), transparent 42vw),
        linear-gradient(135deg, #07050c 0%, #100819 44%, #050508 100%);
}

body::before {
    background:
        radial-gradient(circle at 78% 18%, rgba(192, 132, 252, 0.18) 0%, transparent 42%),
        radial-gradient(circle at 18% 82%, rgba(109, 40, 217, 0.2) 0%, transparent 48%),
        linear-gradient(115deg, rgba(255,255,255,0.035), transparent 34%, rgba(168,85,247,0.06));
    z-index: 2;
}

.grain-overlay {
    opacity: 0.8;
    mix-blend-mode: screen;
    background-size: 180px 180px;
}

#preloader {
    background:
        radial-gradient(circle at 50% 45%, rgba(168, 85, 247, 0.18), transparent 34%),
        #050409;
    transition: opacity 0.75s ease, visibility 0.75s ease;
}

#preloader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.preloader-mark {
    width: 78px;
    height: 78px;
    position: relative;
    display: grid;
    place-items: center;
}

.preloader-symbol {
    position: relative;
    z-index: 2;
    animation: preloaderPulse 1.65s ease-in-out infinite;
}

.preloader-ring {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(196, 181, 253, 0.24);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    box-shadow: 0 0 28px rgba(168, 85, 247, 0.28), inset 0 0 20px rgba(168, 85, 247, 0.12);
    animation: preloaderSweep 1.35s cubic-bezier(.65, 0, .35, 1) infinite;
}

@keyframes preloaderSweep {
    to { transform: rotate(360deg); }
}

@keyframes preloaderPulse {
    0%, 100% { transform: scale(0.92); opacity: 0.65; }
    50% { transform: scale(1.08); opacity: 1; text-shadow: 0 0 24px var(--accent-glow); }
}

.preloader-bar-wrap {
    width: min(280px, 64vw);
    height: 3px;
    background: rgba(243, 239, 255, 0.08);
}

.preloader-bar {
    background: linear-gradient(90deg, #7c3aed, #e9d5ff, #a855f7);
}

.site-header {
    background-color: rgba(6, 5, 10, 0.68);
    border-bottom-color: rgba(216, 180, 254, 0.12);
}

.logo-symbol {
    animation-duration: 18s;
}

.hero-title {
    font-family: 'Syne', var(--font-serif);
    letter-spacing: 0;
    text-shadow: 0 10px 44px rgba(0, 0, 0, 0.45);
}

.hero-desc .lead {
    color: #cfc7df;
}

.hero-aside {
    position: relative;
    gap: 20px;
    padding: 34px;
    border: 1px solid rgba(216, 180, 254, 0.18);
    background: linear-gradient(145deg, rgba(24, 18, 36, 0.74), rgba(92, 35, 150, 0.16));
    box-shadow: 0 24px 90px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    overflow: hidden;
}

.hero-aside::before {
    content: "";
    position: absolute;
    inset: -1px;
    background: linear-gradient(120deg, rgba(216, 180, 254, 0.2), transparent 32%, rgba(168, 85, 247, 0.2));
    pointer-events: none;
}

.aside-kicker {
    position: relative;
    color: var(--accent-2);
    font-size: 0.67rem;
    letter-spacing: 3px;
}

.aside-manifesto {
    position: relative;
    font-size: clamp(1.3rem, 2vw, 2rem);
    line-height: 1.12;
    color: #fff;
    letter-spacing: 0.5px;
}

.aside-item {
    position: relative;
}

.highlight-purple,
.font-gradient-bold {
    color: #c084fc;
    text-shadow: 0 0 22px rgba(168, 85, 247, 0.38);
}

.font-gradient,
.font-gradient-bold {
    background: linear-gradient(90deg, #f5f3ff, #c084fc 35%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#manifesto {
    overflow: hidden;
}

#manifesto::before,
#about::before {
    content: "";
    position: absolute;
    inset: 8% 0 auto auto;
    width: 44vw;
    height: 70vh;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.12), transparent 66%);
    filter: blur(20px);
    pointer-events: none;
}

.manifesto-container {
    max-width: 1030px;
}

.scroll-reveal-text {
    font-family: 'Syne', var(--font-sans);
    font-weight: 700;
    color: rgba(243, 239, 255, 0.18);
}

.manifesto-line {
    opacity: 0;
    transform: translateY(34px) rotateX(12deg);
    transform-origin: left center;
    filter: blur(8px);
    will-change: transform, opacity, filter;
}

.manifesto-line.active {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
    filter: blur(0);
    color: #f8f5ff;
}

.manifesto-author {
    color: #d8b4fe;
    text-shadow: 0 0 18px rgba(168, 85, 247, 0.38);
}

.about-image-wrap {
    border-color: rgba(216, 180, 254, 0.18);
    background: radial-gradient(circle at 60% 30%, rgba(168, 85, 247, 0.2), rgba(14, 10, 22, 0.74));
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255,255,255,0.03) inset;
}

.about-image-wrap::before {
    content: "";
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(216, 180, 254, 0.14);
    transform: translateZ(45px);
    z-index: 2;
    pointer-events: none;
}

.about-img-totem {
    filter: grayscale(100%) hue-rotate(238deg) saturate(280%) contrast(122%) brightness(0.82);
    opacity: 0.82;
}

.about-image-wrap:hover .about-img-totem {
    filter: grayscale(0%) sepia(0%) hue-rotate(0deg) saturate(105%) contrast(104%) brightness(1.04);
}

#canvas-container {
    width: 58%;
    opacity: 0.96;
    filter: saturate(1.14) contrast(1.05);
}

.work-card,
.about-card,
.stat-box,
.timeline-node,
.scheduler-card {
    background: rgba(15, 12, 22, 0.46);
    border-color: rgba(216, 180, 254, 0.12);
    backdrop-filter: blur(8px);
}

@media (max-width: 1024px) {
    .hero-aside { padding: 26px; }
    #canvas-container { width: 100%; opacity: 0.42; }
}

@media (max-width: 768px) {
    .hero-title { font-size: clamp(3rem, 15vw, 4.4rem); }
    .hero-cta-wrap { flex-direction: column; align-items: flex-start; }
    .hero-aside { font-size: 0.72rem; }
    .scroll-reveal-text { font-size: clamp(1.55rem, 8vw, 2.3rem); }
}


/* ==========================================================================
   CODEX REVISION 02: PINNED MANIFESTO + SPOTLIGHT IMAGE
   ========================================================================== */
#manifesto.panel {
    min-height: 620vh;
    align-items: flex-start;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom-color: rgba(216, 180, 254, 0.08);
}

#manifesto .manifesto-container {
    position: sticky;
    top: 0;
    height: 100vh;
    max-width: none;
    display: grid;
    align-items: center;
    padding: 108px 0 70px;
}

#manifesto .section-label {
    position: absolute;
    left: 0;
    top: 116px;
    z-index: 6;
}

.manifesto-stage {
    position: relative;
    min-height: calc(100vh - 178px);
    display: grid;
    place-items: center;
    isolation: isolate;
}

.manifesto-content {
    position: relative;
    z-index: 5;
    width: min(980px, 88vw);
    min-height: 52vh;
    display: grid;
    place-items: center;
    pointer-events: none;
}

.scroll-reveal-text {
    position: relative;
    width: 100%;
    min-height: clamp(240px, 36vh, 410px);
    display: grid;
    place-items: center;
    text-align: center;
    line-height: 1.02;
}

.manifesto-line {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    margin: 0;
    opacity: 0;
    transform: translateY(58px) scale(0.965);
    filter: blur(16px);
    color: rgba(243, 239, 255, 0.18);
    font-size: clamp(2.2rem, 6.3vw, 7.1rem);
    letter-spacing: 0;
    text-wrap: balance;
    max-width: 980px;
    will-change: transform, opacity, filter;
}

.manifesto-line.active {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    color: #fffaff;
    text-shadow: 0 26px 90px rgba(0, 0, 0, 0.72), 0 0 38px rgba(168, 85, 247, 0.22);
}

.manifesto-line.exiting {
    opacity: 0;
    transform: translateY(-58px) scale(0.985);
    filter: blur(14px);
}

.manifesto-author {
    position: absolute;
    right: 2vw;
    bottom: 6vh;
    opacity: 0.64;
    font-size: clamp(0.72rem, 1vw, 1.05rem);
}

.manifesto-visual {
    --mx: 50%;
    --my: 50%;
    position: absolute;
    left: max(1vw, 12px);
    top: 50%;
    width: min(42vw, 560px);
    aspect-ratio: 0.86;
    transform: translateY(-50%);
    overflow: hidden;
    border: 1px solid rgba(216, 180, 254, 0.13);
    background: #09070d;
    box-shadow: 0 36px 100px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255,255,255,0.035);
    z-index: 2;
    opacity: 0.42;
}

.manifesto-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(255,255,255,0.04) 50%, rgba(0,0,0,0.12) 50%) 0 0 / 100% 4px,
        radial-gradient(circle at var(--mx) var(--my), rgba(216, 180, 254, 0.5), transparent 18%);
    mix-blend-mode: screen;
    opacity: 0.8;
    z-index: 3;
    pointer-events: none;
}

.manifesto-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--mx) var(--my), transparent 0 12%, rgba(5, 4, 8, 0.74) 28%, rgba(5, 4, 8, 0.96) 100%);
    z-index: 4;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.manifesto-visual-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: pixelated;
    filter: grayscale(1) contrast(1.45) brightness(0.54) blur(0.2px);
    transform: scale(1.08);
    opacity: 0.82;
}

.manifesto-visual-light {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,0.36), rgba(192,132,252,0.2) 10%, transparent 24%);
    mix-blend-mode: screen;
    z-index: 5;
    pointer-events: none;
}

.about-grid {
    align-items: start;
}

.about-image-wrap {
    position: sticky;
    top: 118px;
    width: min(44vw, 540px);
    max-width: 540px;
    aspect-ratio: 0.88;
    --mx: 50%;
    --my: 50%;
}

.about-image-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(255,255,255,0.05) 50%, rgba(0,0,0,0.16) 50%) 0 0 / 100% 5px,
        radial-gradient(circle at var(--mx) var(--my), rgba(245, 243, 255, 0.46), rgba(168, 85, 247, 0.18) 12%, transparent 26%);
    mix-blend-mode: screen;
    z-index: 4;
    pointer-events: none;
}

.about-img-overlay {
    opacity: 1;
    background: radial-gradient(circle at var(--mx) var(--my), transparent 0 14%, rgba(8, 6, 12, 0.68) 30%, rgba(8, 6, 12, 0.94) 100%);
    z-index: 3;
}

.about-img-totem {
    image-rendering: pixelated;
    filter: grayscale(1) contrast(1.5) brightness(0.58);
    opacity: 0.9;
}

.about-image-wrap:hover .about-img-totem {
    filter: grayscale(1) contrast(1.65) brightness(0.68);
    opacity: 1;
    transform: scale(1.04);
}

.about-content {
    min-height: 130vh;
}

.about-cards {
    padding-top: 18vh;
}

.about-card {
    transform-origin: center top;
}

@media (max-width: 1024px) {
    #manifesto.panel { min-height: 560vh; }
    #manifesto .section-label { left: 5%; }
    .manifesto-visual {
        left: 50%;
        width: min(74vw, 520px);
        transform: translate(-50%, -50%);
        opacity: 0.28;
    }
    .manifesto-content { width: min(92vw, 900px); }
    .about-image-wrap {
        position: relative;
        top: auto;
        width: 100%;
        max-width: 100%;
        aspect-ratio: 16 / 10;
    }
    .about-content { min-height: auto; }
    .about-cards { padding-top: 0; }
}

@media (max-width: 768px) {
    #manifesto.panel { min-height: 520vh; }
    .manifesto-line { font-size: clamp(2rem, 12vw, 4.8rem); }
    .manifesto-author { left: 5%; right: auto; bottom: 5vh; }
    .manifesto-visual { width: 88vw; opacity: 0.22; }
}


/* Manifesto sweep needs full-width 3D space. */
#canvas-container {
    left: 0;
    right: auto;
    width: 100%;
    opacity: 0.9;
}

#manifesto .manifesto-container {
    position: relative;
}

#manifesto .manifesto-stage::after {
    content: "";
    position: absolute;
    inset: 18% 10% 12%;
    background: radial-gradient(circle at 50% 50%, rgba(5, 4, 8, 0.12), rgba(5, 4, 8, 0.42) 60%, transparent 78%);
    z-index: 3;
    pointer-events: none;
}


/* ==========================================================================
   CODEX FINAL READABILITY PASS
   ========================================================================== */
#manifesto.panel {
    min-height: 520vh;
}

.manifesto-stage {
    min-height: calc(100vh - 178px);
}

.manifesto-content {
    width: min(1180px, 94vw);
    min-height: 42vh;
}

.scroll-reveal-text {
    min-height: clamp(150px, 24vh, 260px);
    line-height: 1;
}

.manifesto-line {
    width: 100%;
    max-width: 1180px;
    padding-inline: 2vw;
    font-size: clamp(1.65rem, 4.15vw, 4.45rem);
    line-height: 1;
    white-space: nowrap;
    text-align: center;
    justify-items: center;
    text-wrap: nowrap;
    overflow: visible;
    transform: translateY(42px) scale(0.975);
    filter: blur(12px);
}

.manifesto-line.active {
    transform: translateY(0) scale(1);
    text-shadow: 0 18px 70px rgba(0, 0, 0, 0.76), 0 0 28px rgba(168, 85, 247, 0.18);
}

.manifesto-line.exiting {
    transform: translateY(-42px) scale(0.985);
    filter: blur(11px);
}

.manifesto-author,
.manifesto-visual,
.manifesto-visual-light,
.manifesto-visual-img {
    display: none !important;
}

#manifesto .manifesto-stage::after {
    inset: 26% 12% 20%;
    background: radial-gradient(circle at 50% 50%, rgba(5, 4, 8, 0.04), rgba(5, 4, 8, 0.34) 58%, transparent 78%);
}

.about-image-wrap {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    overflow: visible;
}

.about-image-wrap::before {
    display: none;
}

.about-image-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform: none;
    overflow: visible;
}

.about-img-totem {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transform: scale(1.04);
    transition: transform 0.5s ease, opacity 0.35s ease, filter 0.35s ease;
}

.about-img-base {
    image-rendering: pixelated;
    filter: grayscale(1) contrast(1.42) brightness(0.62);
    opacity: 0.86;
    z-index: 1;
}

.about-img-color {
    image-rendering: auto;
    filter: saturate(1.12) contrast(1.08) brightness(1.03);
    opacity: 1;
    z-index: 2;
    clip-path: circle(0% at var(--mx) var(--my));
}

.about-image-wrap:hover .about-img-color {
    clip-path: circle(18% at var(--mx) var(--my));
}

.about-image-wrap:hover .about-img-base {
    filter: grayscale(1) contrast(1.5) brightness(0.56);
    opacity: 0.74;
}

.about-image-wrap::after {
    inset: -8%;
    background:
        radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,0.32), rgba(192,132,252,0.2) 12%, transparent 30%),
        linear-gradient(rgba(255,255,255,0.035) 50%, rgba(0,0,0,0.11) 50%) 0 0 / 100% 5px;
    mix-blend-mode: screen;
    opacity: 0.92;
    z-index: 4;
}

.about-img-overlay {
    inset: -10%;
    opacity: 1;
    background: radial-gradient(circle at var(--mx) var(--my), transparent 0 24%, rgba(6, 5, 10, 0.22) 42%, rgba(6, 5, 10, 0.58) 100%);
    z-index: 3;
    pointer-events: none;
}

.about-image-wrap:hover .about-img-totem {
    transform: scale(1.07);
}

.about-image-wrap:hover .about-img-overlay {
    opacity: 1;
}

@media (max-width: 1024px) {
    #manifesto.panel { min-height: 500vh; }
    .manifesto-content { width: 96vw; }
    .manifesto-line { font-size: clamp(1.35rem, 5.5vw, 3.2rem); }
}

@media (max-width: 768px) {
    #manifesto.panel { min-height: 470vh; }
    .manifesto-line { font-size: clamp(1.05rem, 6.1vw, 2.25rem); padding-inline: 1vw; }
    .about-image-wrap { aspect-ratio: 1; }
}


/* ==========================================================================
   CODEX HOTFIX: CONTAIN MANIFESTO + RELIABLE WOLF
   ========================================================================== */
#manifesto.panel {
    height: 560vh;
    min-height: 560vh;
    display: block;
    padding-top: 0;
    padding-bottom: 0;
    overflow: clip;
    contain: paint;
}

#manifesto .manifesto-container {
    position: sticky !important;
    top: 0;
    height: 100vh;
    max-width: none;
    display: grid;
    align-items: center;
    padding: 108px 0 70px;
    transform: none !important;
}

#about {
    z-index: 12;
    background: linear-gradient(180deg, rgba(6,5,10,0.84), rgba(6,5,10,0.72));
}

.manifesto-content {
    width: min(1120px, 92vw);
    min-height: 30vh;
}

.scroll-reveal-text {
    min-height: 190px;
}

.manifesto-line {
    font-size: clamp(1.45rem, 3.65vw, 3.85rem);
    max-width: 1120px;
}

.about-image-wrap {
    clip-path: polygon(3% 72%, 16% 62%, 25% 50%, 38% 38%, 54% 27%, 68% 16%, 82% 18%, 94% 36%, 98% 45%, 90% 49%, 77% 47%, 68% 53%, 77% 67%, 88% 78%, 79% 84%, 65% 75%, 54% 67%, 44% 73%, 34% 86%, 24% 84%, 28% 73%, 20% 69%, 12% 82%, 4% 86%);
}

.about-image-inner,
.about-img-totem {
    clip-path: inherit;
}

.about-img-base,
.about-img-color {
    content-visibility: auto;
}

.about-img-color {
    clip-path: circle(0% at var(--mx) var(--my));
}

.about-image-wrap:hover .about-img-color {
    clip-path: circle(24% at var(--mx) var(--my));
}

.about-image-wrap::after {
    background:
        radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,0.38), rgba(192,132,252,0.24) 16%, transparent 36%),
        linear-gradient(rgba(255,255,255,0.035) 50%, rgba(0,0,0,0.11) 50%) 0 0 / 100% 5px;
}

.site-footer {
    justify-content: flex-start;
}

@media (max-width: 1024px) {
    #manifesto.panel { height: 520vh; min-height: 520vh; }
    .manifesto-line { font-size: clamp(1.25rem, 5vw, 3rem); }
}

@media (max-width: 768px) {
    #manifesto.panel { height: 500vh; min-height: 500vh; }
    .manifesto-line { font-size: clamp(1rem, 5.8vw, 2.1rem); }
}


/* ==========================================================================
   CODEX FINAL FIX: ROBUST MANIFESTO + FULL WOLF COLOR REVEAL
   ========================================================================== */
#manifesto.panel {
    height: 520vh;
    min-height: 520vh;
    overflow: hidden;
}

#manifesto .manifesto-container {
    position: sticky !important;
    top: 0;
    height: 100vh;
    transform: none !important;
}

.manifesto-line {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.manifesto-line.active {
    opacity: 1;
    visibility: visible;
}

.about-image-wrap,
.about-image-inner,
.about-img-totem {
    clip-path: none !important;
}

.about-image-wrap {
    overflow: hidden !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.about-image-inner {
    overflow: hidden;
    border-radius: 4px;
}

.about-img-totem {
    object-fit: cover;
    transform: scale(1.02);
}

.about-img-base {
    filter: grayscale(1) contrast(1.28) brightness(0.62) !important;
    opacity: 0.92;
    image-rendering: pixelated;
}

.about-img-color {
    filter: saturate(1.12) contrast(1.06) brightness(1.02) !important;
    opacity: 1;
    clip-path: circle(0% at var(--mx) var(--my)) !important;
}

.about-image-wrap:hover .about-img-color {
    clip-path: circle(30% at var(--mx) var(--my)) !important;
}

.about-image-wrap::after {
    background: none !important;
}

.about-img-overlay {
    background: radial-gradient(circle at var(--mx) var(--my), transparent 0 31%, rgba(6, 5, 10, 0.26) 46%, rgba(6, 5, 10, 0.62) 100%) !important;
}

.about-image-wrap:hover .about-img-base {
    opacity: 0.78;
}

.about-image-wrap:hover .about-img-totem {
    transform: scale(1.04);
}


/* ==========================================================================
   CODEX LAST PASS: VISIBLE MANIFESTO + LIVING COLOR BLOB
   ========================================================================== */
.manifesto-line {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(34px) scale(0.985) !important;
    filter: blur(10px) !important;
    transition: opacity 0.32s ease, visibility 0.32s ease, transform 0.32s ease, filter 0.32s ease !important;
}

.manifesto-line.before-active {
    transform: translateY(-34px) scale(0.985) !important;
}

.manifesto-line.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
    filter: blur(0) !important;
}

.about-image-wrap {
    --blob-a: 0%;
    --blob-b: 0%;
    --blob-c: 0%;
}

.about-img-color {
    clip-path: none !important;
    -webkit-mask-image:
        radial-gradient(ellipse calc(24% + var(--blob-a)) calc(18% + var(--blob-b)) at var(--mx) var(--my), #000 0 58%, transparent 72%),
        radial-gradient(ellipse calc(13% + var(--blob-b)) calc(10% + var(--blob-c)) at calc(var(--mx) + 9%) calc(var(--my) - 7%), #000 0 48%, transparent 70%),
        radial-gradient(ellipse calc(12% + var(--blob-c)) calc(15% + var(--blob-a)) at calc(var(--mx) - 8%) calc(var(--my) + 8%), #000 0 45%, transparent 68%);
    mask-image:
        radial-gradient(ellipse calc(24% + var(--blob-a)) calc(18% + var(--blob-b)) at var(--mx) var(--my), #000 0 58%, transparent 72%),
        radial-gradient(ellipse calc(13% + var(--blob-b)) calc(10% + var(--blob-c)) at calc(var(--mx) + 9%) calc(var(--my) - 7%), #000 0 48%, transparent 70%),
        radial-gradient(ellipse calc(12% + var(--blob-c)) calc(15% + var(--blob-a)) at calc(var(--mx) - 8%) calc(var(--my) + 8%), #000 0 45%, transparent 68%);
    -webkit-mask-composite: source-over;
    mask-composite: add;
}

.about-image-wrap:hover .about-img-color {
    clip-path: none !important;
}

.about-img-overlay {
    background: radial-gradient(ellipse calc(38% + var(--blob-c)) calc(30% + var(--blob-b)) at var(--mx) var(--my), transparent 0 38%, rgba(6, 5, 10, 0.24) 58%, rgba(6, 5, 10, 0.58) 100%) !important;
}


/* ==========================================================================
   ABSOLUTE FINAL: MANIFESTO TEXT NEVER DISAPPEARS
   ========================================================================== */
#manifesto.panel {
    height: 520vh !important;
    min-height: 520vh !important;
    overflow: hidden !important;
}

#manifesto .manifesto-container {
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
}

.manifesto-line {
    opacity: 0 !important;
    visibility: hidden !important;
    display: grid !important;
    transform: translateY(30px) scale(0.985) !important;
    filter: blur(8px) !important;
    transition: opacity 260ms ease, visibility 260ms ease, transform 260ms ease, filter 260ms ease !important;
}

.manifesto-line.before-active {
    transform: translateY(-30px) scale(0.985) !important;
}

.manifesto-line.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
    filter: blur(0) !important;
}

.about-img-color {
    -webkit-mask-image:
        radial-gradient(ellipse calc(31% + var(--blob-a)) calc(24% + var(--blob-b)) at var(--mx) var(--my), #000 0 60%, transparent 76%),
        radial-gradient(ellipse calc(16% + var(--blob-b)) calc(13% + var(--blob-c)) at calc(var(--mx) + 10%) calc(var(--my) - 8%), #000 0 50%, transparent 73%),
        radial-gradient(ellipse calc(15% + var(--blob-c)) calc(18% + var(--blob-a)) at calc(var(--mx) - 9%) calc(var(--my) + 9%), #000 0 48%, transparent 72%) !important;
    mask-image:
        radial-gradient(ellipse calc(31% + var(--blob-a)) calc(24% + var(--blob-b)) at var(--mx) var(--my), #000 0 60%, transparent 76%),
        radial-gradient(ellipse calc(16% + var(--blob-b)) calc(13% + var(--blob-c)) at calc(var(--mx) + 10%) calc(var(--my) - 8%), #000 0 50%, transparent 73%),
        radial-gradient(ellipse calc(15% + var(--blob-c)) calc(18% + var(--blob-a)) at calc(var(--mx) - 9%) calc(var(--my) + 9%), #000 0 48%, transparent 72%) !important;
}


/* ==========================================================================
   REAL FINAL: MANIFESTO AS NORMAL STICKY SLIDES, NO TEXT JS
   ========================================================================== */
#manifesto.panel {
    height: auto !important;
    min-height: auto !important;
    display: block !important;
    align-items: initial !important;
    padding: 0 10% !important;
    overflow: visible !important;
    contain: none !important;
}

#manifesto .manifesto-container {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    max-width: none !important;
    display: block !important;
    padding: 0 !important;
    transform: none !important;
}

#manifesto .section-label {
    position: sticky !important;
    top: 108px !important;
    left: auto !important;
    margin: 0 !important;
    padding-top: 118px !important;
    z-index: 8 !important;
}

.manifesto-stage,
.manifesto-content,
.scroll-reveal-text {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    pointer-events: auto !important;
}

.scroll-reveal-text {
    margin: 0 !important;
    padding: 0 0 18vh !important;
    line-height: 1 !important;
}

.manifesto-line,
.manifesto-line.active,
.manifesto-line.before-active,
.manifesto-line.exiting {
    position: sticky !important;
    inset: auto !important;
    top: 42vh !important;
    width: 100% !important;
    max-width: none !important;
    height: 100vh !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 2vw !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    transform: none !important;
    color: #fffaff !important;
    font-size: clamp(1.45rem, 3.55vw, 3.8rem) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-align: center !important;
    text-wrap: nowrap !important;
    text-shadow: 0 18px 70px rgba(0,0,0,0.8), 0 0 28px rgba(168,85,247,0.2) !important;
    transition: none !important;
}

.manifesto-line + .manifesto-line {
    margin-top: -62vh !important;
}

#about {
    position: relative !important;
    z-index: 30 !important;
}

.about-img-color {
    -webkit-mask-image:
        radial-gradient(ellipse calc(38% + var(--blob-a)) calc(29% + var(--blob-b)) at var(--mx) var(--my), #000 0 60%, transparent 78%),
        radial-gradient(ellipse calc(19% + var(--blob-b)) calc(15% + var(--blob-c)) at calc(var(--mx) + 10%) calc(var(--my) - 8%), #000 0 52%, transparent 75%),
        radial-gradient(ellipse calc(18% + var(--blob-c)) calc(21% + var(--blob-a)) at calc(var(--mx) - 9%) calc(var(--my) + 9%), #000 0 50%, transparent 74%) !important;
    mask-image:
        radial-gradient(ellipse calc(38% + var(--blob-a)) calc(29% + var(--blob-b)) at var(--mx) var(--my), #000 0 60%, transparent 78%),
        radial-gradient(ellipse calc(19% + var(--blob-b)) calc(15% + var(--blob-c)) at calc(var(--mx) + 10%) calc(var(--my) - 8%), #000 0 52%, transparent 75%),
        radial-gradient(ellipse calc(18% + var(--blob-c)) calc(21% + var(--blob-a)) at calc(var(--mx) - 9%) calc(var(--my) + 9%), #000 0 50%, transparent 74%) !important;
}

@media (max-width: 768px) {
    #manifesto.panel { padding: 0 5% !important; }
    .manifesto-line,
    .manifesto-line.active,
    .manifesto-line.before-active,
    .manifesto-line.exiting {
        font-size: clamp(1rem, 5.6vw, 2.1rem) !important;
        white-space: normal !important;
        text-wrap: balance !important;
    }
}


/* ==========================================================================
   PINNED FINAL: IN-PLACE MANIFESTO ANIMATION
   ========================================================================== */
#manifesto.panel {
    height: 620vh !important;
    min-height: 620vh !important;
    display: block !important;
    padding: 0 10% !important;
    overflow: hidden !important;
    contain: paint !important;
}

#manifesto .manifesto-container {
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    max-width: none !important;
    display: grid !important;
    align-items: center !important;
    padding: 108px 0 70px !important;
    transform: none !important;
}

#manifesto .section-label {
    position: absolute !important;
    top: 118px !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 10 !important;
}

.manifesto-stage,
.manifesto-content,
.scroll-reveal-text {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: calc(100vh - 178px) !important;
    min-height: calc(100vh - 178px) !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
}

.manifesto-line,
.manifesto-line.active,
.manifesto-line.before-active,
.manifesto-line.exiting {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 2vw !important;
    display: grid !important;
    place-items: center !important;
    opacity: 0 !important;
    visibility: hidden !important;
    color: #fffaff !important;
    font-size: clamp(1.45rem, 3.55vw, 3.75rem) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-align: center !important;
    text-wrap: nowrap !important;
    transform: translateY(56px) scale(0.965) !important;
    filter: blur(14px) !important;
    text-shadow: 0 18px 70px rgba(0,0,0,0.82), 0 0 28px rgba(168,85,247,0.2) !important;
    transition: opacity 420ms ease, visibility 420ms ease, transform 520ms cubic-bezier(.2,.8,.2,1), filter 520ms ease !important;
}

.manifesto-line.is-before {
    transform: translateY(-56px) scale(0.985) !important;
    filter: blur(12px) !important;
}

.manifesto-line.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
    filter: blur(0) !important;
}

#manifesto .manifesto-stage::after {
    content: "" !important;
    position: absolute !important;
    inset: 20% 12% 16% !important;
    background: radial-gradient(circle at 50% 50%, rgba(5,4,8,0.06), rgba(5,4,8,0.36) 58%, transparent 78%) !important;
    z-index: 3 !important;
    pointer-events: none !important;
}

#about {
    position: relative !important;
    z-index: 30 !important;
}

@media (max-width: 768px) {
    #manifesto.panel { padding: 0 5% !important; }
    .manifesto-line,
    .manifesto-line.active,
    .manifesto-line.before-active,
    .manifesto-line.exiting {
        font-size: clamp(1rem, 5.7vw, 2.15rem) !important;
        white-space: normal !important;
        text-wrap: balance !important;
    }
}


/* ==========================================================================
   QWYX DECK FIX: ISOLATED VISIBLE MANIFESTO
   ========================================================================== */
.old-manifesto-content {
    display: none !important;
}

#manifesto.panel {
    height: 620vh !important;
    min-height: 620vh !important;
    display: block !important;
    padding: 0 10% !important;
    overflow: hidden !important;
    contain: paint !important;
}

#manifesto .manifesto-container {
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    max-width: none !important;
    display: grid !important;
    align-items: center !important;
    padding: 108px 0 70px !important;
    transform: none !important;
}

.qwyx-manifesto-deck {
    position: relative !important;
    z-index: 20 !important;
    width: min(1180px, 92vw) !important;
    height: calc(100vh - 178px) !important;
    min-height: calc(100vh - 178px) !important;
    margin: 0 auto !important;
    display: grid !important;
    place-items: center !important;
    pointer-events: none !important;
}

.qwyx-line {
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0;
    visibility: hidden;
    color: #fffaff !important;
    font-family: 'Syne', 'Plus Jakarta Sans', sans-serif !important;
    font-size: clamp(1.45rem, 3.45vw, 3.7rem) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    text-align: center !important;
    text-shadow: 0 18px 70px rgba(0,0,0,0.82), 0 0 28px rgba(168,85,247,0.24) !important;
    will-change: opacity, transform, filter !important;
}

.qwyx-line span {
    color: #c084fc !important;
    text-shadow: 0 0 32px rgba(168,85,247,0.5) !important;
}

#manifesto .manifesto-stage::after {
    z-index: 3 !important;
}

@media (max-width: 768px) {
    #manifesto.panel { padding: 0 5% !important; }
    .qwyx-line {
        font-size: clamp(1.05rem, 5.5vw, 2.1rem) !important;
        white-space: normal !important;
        text-wrap: balance !important;
    }
}


/* ==========================================================================
   CLEAN FLOW MANIFESTO: VISIBLE BY DEFAULT
   ========================================================================== */
.manifesto-flow-section.panel {
    display: block !important;
    min-height: auto !important;
    height: auto !important;
    padding: 0 10% 12vh !important;
    overflow: visible !important;
    contain: none !important;
    background: linear-gradient(180deg, rgba(7,5,12,0.12), rgba(30,10,48,0.18), rgba(7,5,12,0.08)) !important;
}

.manifesto-flow-container {
    max-width: none !important;
    padding-top: 112px !important;
}

.manifesto-flow-container .section-label {
    position: sticky !important;
    top: 104px !important;
    z-index: 12 !important;
    margin-bottom: 0 !important;
}

.manifesto-flow-copy {
    position: relative !important;
    z-index: 14 !important;
    width: min(1180px, 92vw) !important;
    margin: 0 auto !important;
    padding: 18vh 0 20vh !important;
}

.flow-line {
    min-height: 82vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fffaff !important;
    font-family: 'Syne', 'Plus Jakarta Sans', sans-serif !important;
    font-size: clamp(1.45rem, 3.5vw, 3.75rem) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    text-wrap: nowrap !important;
    text-shadow: 0 18px 70px rgba(0,0,0,0.82), 0 0 28px rgba(168,85,247,0.22) !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}

.flow-line span {
    color: #c084fc !important;
    text-shadow: 0 0 32px rgba(168,85,247,0.5) !important;
}

@supports (animation-timeline: view()) {
    .flow-line {
        animation: qwyxFlowIn both ease-out;
        animation-timeline: view();
        animation-range: entry 20% cover 42%;
    }
}

@keyframes qwyxFlowIn {
    0% { opacity: 0; transform: translateY(54px) scale(0.975); filter: blur(12px); }
    45% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
    100% { opacity: 1; transform: translateY(-8px) scale(1); filter: blur(0); }
}

@media (max-width: 768px) {
    .manifesto-flow-section.panel { padding: 0 5% 8vh !important; }
    .flow-line {
        min-height: 72vh !important;
        font-size: clamp(1.05rem, 5.6vw, 2.15rem) !important;
        white-space: normal !important;
        text-wrap: balance !important;
    }
}


/* ==========================================================================
   SAFE LETTER FADE: TEXT STAYS READABLE
   ========================================================================== */
.flow-line {
    gap: 0 !important;
}

.flow-char,
.flow-space,
.flow-accent-word {
    display: inline-block !important;
}

.flow-accent-word {
    color: #c084fc !important;
    text-shadow: 0 0 32px rgba(168,85,247,0.5) !important;
}

.flow-char {
    opacity: 0.34;
    transform: translateY(12px);
    filter: blur(5px);
    transition:
        opacity 420ms ease,
        transform 520ms cubic-bezier(.2,.8,.2,1),
        filter 520ms ease;
    transition-delay: calc(min(var(--i), 34) * 18ms);
    will-change: opacity, transform, filter;
}

.flow-space {
    width: 0.34em;
}

.flow-line.letters-in .flow-char {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.flow-line:not(.letters-in) .flow-char {
    opacity: 0.22;
    transform: translateY(-8px);
    filter: blur(3px);
}

@media (prefers-reduced-motion: reduce) {
    .flow-char {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}


/* ==========================================================================
   MOBILE 320 AND NAV ALIGN POLISH
   ========================================================================== */
@media (min-width: 769px) {
    .sidebar-nav {
        right: 3.2% !important;
        width: 112px !important;
    }

    .nav-indicator-wrap {
        align-items: center !important;
        gap: 24px !important;
    }

    .nav-dot {
        width: 112px !important;
        justify-content: center !important;
        position: relative !important;
        gap: 0 !important;
    }

    .dot-num {
        display: block !important;
        width: 24px !important;
        text-align: center !important;
    }

    .dot-label {
        position: absolute !important;
        right: 34px !important;
        width: 92px !important;
        text-align: right !important;
        transform: translateX(8px) !important;
    }

    .nav-dot:hover .dot-label,
    .nav-dot.active .dot-label {
        transform: translateX(0) !important;
    }
}

.about-image-wrap {
    touch-action: pan-y !important;
}

@media (max-width: 360px) {
    .site-header {
        height: 64px !important;
        padding: 0 14px !important;
    }

    .logo-text {
        font-size: 0.9rem !important;
        letter-spacing: 2px !important;
    }

    .header-status {
        display: none !important;
    }

    .panel {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .hero-title {
        font-size: clamp(2.55rem, 17vw, 3.35rem) !important;
        line-height: 0.98 !important;
        margin-bottom: 36px !important;
    }

    .hero-grid {
        gap: 28px !important;
    }

    .hero-desc .lead {
        font-size: 0.98rem !important;
        max-width: 100% !important;
    }

    .hero-cta-wrap {
        width: 100% !important;
        gap: 12px !important;
    }

    .btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 13px 14px !important;
        font-size: 0.66rem !important;
        letter-spacing: 1.3px !important;
        white-space: normal !important;
        text-align: center !important;
    }

    .hero-aside {
        padding: 20px !important;
    }

    .aside-manifesto {
        font-size: 1.12rem !important;
        line-height: 1.16 !important;
    }

    .aside-item {
        gap: 10px !important;
        align-items: flex-start !important;
    }

    .aside-key,
    .aside-val {
        font-size: 0.68rem !important;
        overflow-wrap: anywhere !important;
    }

    .manifesto-flow-section.panel {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .manifesto-flow-copy {
        width: 100% !important;
        padding-top: 12vh !important;
    }

    .flow-line {
        min-height: 70vh !important;
        font-size: clamp(1.06rem, 9.2vw, 1.72rem) !important;
        line-height: 1.12 !important;
        white-space: normal !important;
        text-wrap: balance !important;
        overflow-wrap: anywhere !important;
        padding-inline: 0 !important;
    }

    .flow-char,
    .flow-space,
    .flow-accent-word {
        white-space: normal !important;
    }

    .about-grid,
    .stats-row,
    .skills-grid,
    .work-grid,
    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

    .section-title {
        font-size: clamp(1.7rem, 10vw, 2.25rem) !important;
        line-height: 1.12 !important;
    }

    .about-lead,
    .contact-desc {
        font-size: 0.98rem !important;
    }

    .about-image-wrap {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 1 / 1 !important;
    }

    .about-card,
    .scheduler-card {
        padding: 22px !important;
    }

    .stat-number {
        font-size: 3rem !important;
    }

    .social-links,
    .scheduler-times {
        flex-direction: column !important;
    }

    .contact-value {
        font-size: 0.98rem !important;
        overflow-wrap: anywhere !important;
    }

    .site-footer {
        font-size: 0.58rem !important;
    }
}


/* ==========================================================================
   MANIFESTO MOBILE/TABLET READABILITY FINAL
   ========================================================================== */
@media (max-width: 1024px) {
    .manifesto-flow-section.panel {
        padding-left: clamp(16px, 5vw, 44px) !important;
        padding-right: clamp(16px, 5vw, 44px) !important;
        padding-bottom: 8vh !important;
    }

    .manifesto-flow-container {
        padding-top: 92px !important;
    }

    .manifesto-flow-copy {
        width: 100% !important;
        max-width: 680px !important;
        padding-top: 8vh !important;
        padding-bottom: 10vh !important;
    }

    .flow-line {
        min-height: auto !important;
        padding: 26vh 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-content: center !important;
        align-items: center !important;
        justify-content: center !important;
        column-gap: 0 !important;
        row-gap: 0.04em !important;
        font-size: clamp(1.18rem, 4.4vw, 2.45rem) !important;
        line-height: 1.14 !important;
        white-space: normal !important;
        text-wrap: balance !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        max-width: 100% !important;
    }

    .flow-char,
    .flow-space {
        flex: 0 0 auto !important;
        min-width: 0 !important;
    }

    .flow-space {
        width: 0.36em !important;
    }

    .flow-accent-word {
        display: contents !important;
    }

    .flow-char {
        transform: translateY(7px) !important;
        filter: blur(3px) !important;
        transition-delay: calc(min(var(--i), 26) * 10ms) !important;
    }

    .flow-line.letters-in .flow-char {
        transform: translateY(0) !important;
        filter: blur(0) !important;
    }

    .flow-line:not(.letters-in) .flow-char {
        transform: translateY(-4px) !important;
        filter: blur(2px) !important;
    }
}

@media (max-width: 600px) {
    .manifesto-flow-section.panel {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .manifesto-flow-container {
        padding-top: 78px !important;
    }

    .manifesto-flow-container .section-label {
        top: 74px !important;
        font-size: 0.62rem !important;
        letter-spacing: 2.2px !important;
    }

    .manifesto-flow-copy {
        max-width: 100% !important;
        padding-top: 5vh !important;
    }

    .flow-line {
        padding: 22vh 0 !important;
        min-height: auto !important;
        font-size: clamp(0.98rem, 7vw, 1.55rem) !important;
        line-height: 1.2 !important;
        letter-spacing: 0 !important;
        text-shadow: 0 12px 42px rgba(0,0,0,0.82), 0 0 20px rgba(168,85,247,0.2) !important;
    }

    .flow-space {
        width: 0.32em !important;
    }
}

@media (max-width: 340px) {
    .manifesto-flow-section.panel {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .flow-line {
        padding: 20vh 0 !important;
        font-size: clamp(0.88rem, 6.35vw, 1.26rem) !important;
        line-height: 1.24 !important;
    }

    .flow-space {
        width: 0.28em !important;
    }

    .flow-char {
        transition-delay: calc(min(var(--i), 20) * 7ms) !important;
    }
}