/* ================================================================
   WORMYTHOL — GAME STUDIO LANDING
   Cyberpunk Minimal Tech Aesthetic
   ================================================================ */

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

/* ===== PERFORMANCE GLOBAL ===== */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

img, video {
    content-visibility: auto;
    contain-intrinsic-size: auto 300px;
}

/* GPU-accelerated animations only */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== LOADER ===== */
.loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #000000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    overflow: hidden;
    will-change: opacity, visibility;
    contain: layout style;
}

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

/* Logo */
.loader-logo-img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    position: relative;
    z-index: 4;
    animation: loaderLogoIn 0.6s ease forwards;
}

/* Three dots */
.loader-dots {
    display: flex;
    gap: 8px;
}

.loader-dot {
    width: 4px;
    height: 4px;
    background: var(--yellow);
    animation: dotBlink 1s steps(1) infinite;
    will-change: opacity;
}

.loader-dot:nth-child(2) {
    animation-delay: 0.33s;
}

.loader-dot:nth-child(3) {
    animation-delay: 0.66s;
}

@keyframes loaderLogoIn {
    0%   { opacity: 0; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes dotBlink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.15; }
}

/* Pixel reveal overlay */
#revealCanvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    pointer-events: none;
    will-change: contents;
    contain: strict;
}

:root {
    --yellow: #FFE500;
    --cyan: #00E5C8;
    --magenta: #E54B8A;
    --pink: #E88ACD;
    --dark: #0d0d0d;
    --dark2: #141414;
    --dark3: #1a1a1a;
    --gray1: #888;
    --gray2: #555;
    --gray3: #333;
    --white: #f0f0f0;
    --sidebar-w: 458px;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --mono: 'JetBrains Mono', monospace;
}

html {
    scroll-behavior: smooth;
}

body {
    background: #000000;
    color: var(--white);
    font-family: var(--font);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeSpeed;
    position: relative;
    /* GPU layer for smooth scrolling */
    -webkit-overflow-scrolling: touch;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: url('../images/background-main.webp') repeat;
    background-size: 1920px 1029px;
    opacity: 0.08;
    mix-blend-mode: difference;
    z-index: 0;
    pointer-events: none;
    will-change: transform;
    transform: translateZ(0);
}



a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
img { display: block; max-width: 100%; content-visibility: auto; contain-intrinsic-size: auto 300px; }

::selection {
    background: var(--yellow);
    color: var(--dark);
}

/* ===== SCROLLBAR ===== */
html {
    scrollbar-width: thin;
    scrollbar-color: #333 #0a0a0a;
}
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #0a0a0a;
}
::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #FFE500;
}

/* ===== FIXED SIDEBAR ===== */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 458px;
    height: 100vh;
    background: #F9F91B;
    z-index: 1100;
    overflow: hidden;
    transition: width 0.6s cubic-bezier(0.77, 0, 0.175, 1),
                transform 0.55s cubic-bezier(0.77, 0, 0.175, 1);
    will-change: width, transform;
}

/* Sidebar slides to the right when menu is open */
body.menu-is-open .sidebar {
    transform: translateX(calc(100vw - 458px));
}

/* Sidebar slides in shrunk state — same behavior as block 1 */
body.sidebar-shrunk.menu-is-open .sidebar {
    transform: translateX(calc(100vw - 314px));
}

.sidebar-top {
    position: absolute;
    top: 34px;
    left: 256px;
    transition: left 0.5s ease, top 0.5s ease;
}
.menu-open-btn {
    background: none;
    border: none;
    cursor: pointer;
    width: 166px;
    height: 166px;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.5s ease, height 0.5s ease;
    will-change: transform;
}
.menu-open-btn:hover { transform: scale(1.08); }

/* Arrow rotates when menu is open */
body.menu-is-open .menu-open-btn {
    transform: rotate(180deg);
}
.menu-arrow-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sidebar-center {
    position: absolute;
    top: 460px;
    left: 256px;
    transition: left 0.5s ease, right 0.5s ease, top 0.5s ease;
}

.logo-circle {
    width: 156px;
    height: 156px;
    background: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.5s ease, height 0.5s ease;
}
.logo-img {
    width: 90%;
    height: 90%;
    object-fit: contain;
}

.sidebar-text {
    height: 171px;
    position: absolute;
    right: 30px;
    bottom: -1px;

    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);

    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 117px;
    font-weight: 800;
    color: #000;
    letter-spacing: -7px;
    line-height: 0.85;
    transition: all 0.5s ease, opacity 0.3s ease;
    will-change: opacity, font-size, right, bottom, letter-spacing;
}



/* ===== MOBILE (hidden on desktop) ===== */
.mobile-panel {
    display: none;
}

/* ===== MAIN SCROLL ===== */
.main-scroll {
    margin-left: var(--sidebar-w);
}

/* ===== HERO ===== */
.hero {
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    background: transparent;
    padding: 0 32px;
    width: 100%;
    max-width: 100vw;
}

.hero-inner {
    width: 100%;
    max-width: 1354px;
    min-height: 900px;
    display: flex;
    gap: 32px;
    align-items: stretch;
    position: relative;
    z-index: 2;
    padding: 0;
    margin-top: 68px;
    overflow: hidden;
}

/* Hero Images Column */
.hero-images {
    width: 315px;
    min-width: 315px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0;
}

.hero-img-card {
    width: 100%;
    flex: 1;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    contain: layout style;
    transform: translateZ(0);
}

.hero-img-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 128px 128px;
    opacity: 0.3;
    mix-blend-mode: multiply;
    z-index: 1;
    pointer-events: none;
}

.hero-img-placeholder {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.hero-img-real {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Shine sweep on hover */
.hero-img-shine {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,229,0,0.08), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
    z-index: 2;
    will-change: transform;
}
.hero-img-card:hover .hero-img-shine { transform: translateX(100%); }

/* Hero Content */
.hero-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0;
    position: relative;
}

.color-bars {
    display: flex;
    gap: 0;
    margin-bottom: 18px;
    padding: 0;
}
.bar { height: 16px; border-radius: 1px; }
.bar-yellow { width: 354px; background: #F9F91B; }
.bar-cyan { width: 284px; background: #06F8A7; }
.bar-magenta { width: 220px; background: #FE34F1; }

.hero-title {
    margin-bottom: 28px;
    padding: 0;
    margin-left: 0;
}

.title-line {
    display: flex;
    align-items: center;
    gap: 60px;
}

.title-text {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 267px;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 0.8;
    letter-spacing: -16px;
    margin: 0;
    padding: 0;
    word-break: break-word;
    overflow-wrap: break-word;
}

.wing-icon {
    width: 218px;
    height: 187px;
    object-fit: contain;
}

/* Quote */
.quote-block {
    margin: 0;
    padding: 0;
}

.quote-marks {
    display: flex;
    gap: 16px;
    margin-bottom: 14px;
}

.qm {
    width: 38px;
    height: 30px;
    object-fit: contain;
    display: inline-block;
}

.quote-main {
    width: 100%;
    max-width: 900px;
    font-family: 'Geist', sans-serif;
    font-size: 24px;
    font-weight: 300;
    color: #FFFFFF;
    text-transform: uppercase;
    line-height: 1.3;
    letter-spacing: 0;
    margin: 0 0 12px 0;
    padding: 0;
}

.quote-sub {
    width: 100%;
    max-width: 900px;
    font-family: 'Geist', sans-serif;
    font-size: 18px;
    font-weight: 300;
    color: #929292;
    line-height: 1.3;
    letter-spacing: 0;
    margin: 0;
    padding: 0;
}

/* Deco */
.hero-deco {
    margin-top: 24px;
    margin-left: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.deco-line {
    width: 100%;
    max-width: 598px;
    height: 6px;
    border: 1px solid #FFFFFF;
    box-sizing: border-box;
}

.deco-line-2 {
    width: 100%;
    max-width: 850px;
}

.deco-stripes-bar {
    width: 100%;
    max-width: 850px;
    height: 106px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-sizing: border-box;
    position: relative;
}

.deco-stripes-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 300%;
    height: 100%;
    background: repeating-linear-gradient(
        55deg,
        #888888 0px,
        #888888 16px,
        #555555 16.5px,
        #000000 17px,
        #000000 27px,
        #555555 27.5px,
        #888888 28px
    );
    animation: stripes-slide 8s linear infinite;
    will-change: transform;
}

@keyframes stripes-slide {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(33.333%);
    }
}



/* ================================================================
   FULLSCREEN MENU
   ================================================================ */
.menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    background: transparent;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear 0.65s;
}

.menu-overlay.is-open {
    visibility: visible;
    pointer-events: all;
    transition: visibility 0s linear 0s;
}

.menu-content {
    width: 100%;
    max-width: none;
    height: 100vh;
    background: #F9F91B;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transform: translateX(-100%);
    transition: transform 0.5s cubic-bezier(0.6, 0, 0.4, 1) 0.05s;
    will-change: transform;
    backface-visibility: hidden;
    overflow: hidden;
    padding: 0 60px 0 180px;
}

.menu-overlay.is-open .menu-content {
    transform: translateX(0);
    transition: transform 0.55s cubic-bezier(0.77, 0, 0.175, 1);
}

/* When sidebar is shrunk (block 2), menu fills full screen */
body.sidebar-shrunk .menu-overlay.is-open .menu-content {
    transform: translateX(0);
}

.menu-nav {
    display: flex;
    flex-direction: column;
    gap: 40px;
    overflow: hidden;
}

.menu-link {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: clamp(100px, 11vw, 175px);
    font-weight: 800;
    color: #000000;
    line-height: 0.8;
    letter-spacing: -0.06em;
    position: relative;
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 0.3s ease 0.05s, transform 0.3s ease 0.05s, color 0.25s ease;
    white-space: nowrap;
}

.menu-overlay.is-open .menu-link {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.4s ease, transform 0.4s ease, color 0.25s ease;
}

.menu-overlay.is-open .menu-link[data-index="1"] { transition-delay: 0.15s, 0.15s, 0s; }
.menu-overlay.is-open .menu-link[data-index="2"] { transition-delay: 0.22s, 0.22s, 0s; }
.menu-overlay.is-open .menu-link[data-index="3"] { transition-delay: 0.29s, 0.29s, 0s; }
.menu-overlay.is-open .menu-link[data-index="4"] { transition-delay: 0.36s, 0.36s, 0s; }

.menu-link.active {
    color: #000000;
}

.menu-link:hover { color: #E88ACD; }

.menu-sidebar-right {
    display: none;
}

.menu-overlay.is-open .menu-sidebar-right {
    transform: translateX(0);
    transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1) 0.08s;
}

.menu-close-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    transition: transform 0.3s ease;
}
.menu-close-btn:hover { transform: scale(1.15); }

.menu-arrow-back-img {
    width: 60px;
    height: 60px;
    display: block;
    transform: rotate(180deg);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.menu-sidebar-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.menu-logo-sm { width: 60px; height: 60px; }
.menu-logo-sm svg { width: 100%; height: 100%; }
.menu-logo-img { 
    width: 100%; 
    height: 100%; 
    object-fit: contain; 
    border-radius: 50%;
    transform: rotate(-90deg);
}

.menu-sidebar-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 28px;
    font-weight: 800;
    color: white;
    letter-spacing: 1px;
    line-height: 1;
    gap: 4px;
}

body.menu-is-open { overflow: hidden; }

/* ================================================================
   ANIMATIONS
   ================================================================ */
.fade-in {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.7s ease, transform 0.7s ease;
    will-change: opacity, transform;
    backface-visibility: hidden;
}

.fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
    will-change: auto;
}

/* ================================================================
   PROJECTS PAGE — proj-section
   ================================================================ */
.proj-section {
    position: relative;
    width: 100%;
    min-height: calc(100vh - 150px);
    display: flex;
    flex-direction: column;
    padding: 0 32px;
    padding-top: 48px;
}

.proj-inner {
    width: 100%;
    max-width: 1354px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.proj-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 140px;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 0.85;
    letter-spacing: -0.04em;
    margin: 0 0 40px 0;
}

/* ===== Project Cards Grid ===== */
.proj-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    width: 100%;
    max-width: 1354px;
    margin-bottom: 20px;
}

.proj-card {
    position: relative;
    grid-column: span 2;
    border-radius: 14px;
    padding: 32px 32px 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-decoration: none;
    overflow: hidden;
    min-height: 182px;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    contain: layout style;
}

.proj-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: url('../images/background-main.webp') repeat;
    background-size: 1920px 1029px;
    opacity: 0;
    mix-blend-mode: difference;
    z-index: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.proj-card:hover::before {
    opacity: 0.12;
}

.proj-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
}

/* Color variants */
.proj-card-yellow {
    background: #F9F91B;
}

/* Default desktop layout from mock: card 1 (2/5), card 2 (3/5) */
.proj-grid > .proj-card:not(.proj-card-gray):nth-child(2) {
    grid-column: span 3;
}

.proj-card-cyan {
    background: #0AF7A5;
}

.proj-card-gray {
    background: #929292;
}

/* Row 2: wide card (3/5) and narrow card (2/5) */
.proj-card-wide {
    grid-column: span 3;
}

.proj-card-narrow {
    grid-column: span 2;
}

/* Card content */
.proj-card-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.proj-card-name {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 46px;
    font-weight: 800;
    color: #000000;
    line-height: 0.9;
    letter-spacing: -0.03em;
}

.proj-card-desc {
    font-family: 'Geist', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #000000;
    line-height: 1.4;
    max-width: 320px;
}

/* Arrow in bottom-right corner */
.proj-card-arrow {
    position: absolute;
    bottom: 24px;
    right: 24px;
    z-index: 1;
    transition: transform 0.3s ease;
}

.proj-card:hover .proj-card-arrow {
    transform: translate(3px, 3px);
}

.proj-arrow-img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

/* Stripes bar under cards */
.proj-stripes-bar {
    width: 100%;
    max-width: 1354px;
    height: 80px;
    overflow: hidden;
    position: relative;
    margin-bottom: 0;
}

.proj-stripes-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 300%;
    height: 100%;
    background: repeating-linear-gradient(
        55deg,
        #888888 0px,
        #888888 16px,
        #555555 16.5px,
        #000000 17px,
        #000000 27px,
        #555555 27.5px,
        #888888 28px
    );
    animation: stripes-slide 8s linear infinite;
    will-change: transform;
}

/* ================================================================
   RESPONSIVE — LARGE DESKTOPS (1920px+)
   ================================================================ */
@media (min-width: 1921px) {
    .hero-inner,
    .about-cols,
    .create-inner,
    .team-inner,
    .footer-inner,
    .proj-inner {
        max-width: 1500px;
    }

    .proj-grid { max-width: 1500px; }
    .proj-stripes-bar { max-width: 1500px; }

    .footer {
        max-width: 1700px;
    }
}

/* ================================================================
   RESPONSIVE — LAPTOP L (1601px — 1800px)
   ================================================================ */
@media (max-width: 1800px) {
    .sidebar {
        width: 420px;
    }

    .sidebar-top {
        left: 225px;
        top: 32px;
    }

    .sidebar-center {
        left: 225px;
        top: 430px;
    }

    .sidebar-text {
        font-size: 105px;
        letter-spacing: -6px;
        right: 26px;
    }

    .menu-open-btn {
        width: 150px;
        height: 150px;
    }

    .logo-circle {
        width: 142px;
        height: 142px;
    }

    .main-scroll {
        margin-left: 420px;
    }

    body.menu-is-open .sidebar {
        transform: translateX(calc(100vw - 420px));
    }

    body.sidebar-shrunk.menu-is-open .sidebar {
        transform: translateX(calc(100vw - 314px));
    }

    .title-text {
        font-size: 220px;
        letter-spacing: -13px;
    }

    .wing-icon {
        width: 185px;
        height: 160px;
    }

    .title-line {
        gap: 45px;
    }

    .hero-inner {
        max-width: 1200px;
        min-height: 800px;
    }

    .hero-images {
        width: 280px;
        min-width: 280px;
    }

    .bar-yellow { width: 300px; }
    .bar-cyan { width: 240px; }
    .bar-magenta { width: 185px; }

    .quote-main { font-size: 22px; }
    .quote-sub { font-size: 16px; }

    .about-cols {
        max-width: 1200px;
    }

    .about-col {
        min-height: 740px;
    }

    .about-num {
        font-size: 320px;
    }

    .create-inner {
        max-width: 1200px;
    }

    .create-title {
        font-size: 120px;
    }

    .create-right {
        width: 460px;
        min-width: 460px;
        height: 870px;
    }

    .create-bars .bar-yellow { width: 300px; }
    .create-bars .bar-cyan { width: 240px; }
    .create-bars .bar-magenta { width: 100px; }

    .team-inner {
        max-width: 1200px;
    }

    .team-avatar,
    .team-avatar-lg,
    .team-avatar-arrow {
        width: 185px;
        height: 182px;
    }

    .proj-inner { max-width: 1200px; }
    .proj-grid { max-width: 1200px; }
    .proj-stripes-bar { max-width: 1200px; }
    .proj-title { font-size: 120px; }
    .proj-card { min-height: 195px; padding: 28px 28px 24px; }
    .proj-card-name { font-size: 40px; }
    .proj-card-desc { font-size: 15px; }

    .footer {
        max-width: 1350px;
    }
}

/* ================================================================
   RESPONSIVE — LAPTOP M (1441px — 1600px)
   ================================================================ */
@media (max-width: 1600px) {
    .sidebar {
        width: 380px;
    }

    .sidebar-top {
        left: 195px;
        top: 32px;
    }

    .sidebar-center {
        left: 195px;
        top: 400px;
    }

    .sidebar-text {
        font-size: 100px;
        letter-spacing: -5px;
        right: 24px;
    }

    .main-scroll {
        margin-left: 380px;
    }

    body.sidebar-shrunk .main-scroll {
        margin-left: 314px;
    }

    body.menu-is-open .sidebar {
        transform: translateX(calc(100vw - 380px));
    }

    body.sidebar-shrunk.menu-is-open .sidebar {
        transform: translateX(calc(100vw - 314px));
    }

    .menu-open-btn {
        width: 140px;
        height: 140px;
    }

    .logo-circle {
        width: 130px;
        height: 130px;
    }

    .title-text {
        font-size: 180px;
        letter-spacing: -10px;
    }

    .wing-icon {
        width: 150px;
        height: 128px;
    }

    .title-line {
        gap: 35px;
    }

    .hero-images {
        width: 260px;
        min-width: 260px;
    }

    .hero-inner {
        max-width: 1080px;
        min-height: 740px;
    }

    .bar-yellow { width: 270px; }
    .bar-cyan { width: 215px; }
    .bar-magenta { width: 165px; }

    .quote-main { font-size: 20px; }
    .quote-sub { font-size: 15px; }

    .about-cols {
        max-width: 1080px;
        gap: 24px;
    }

    .about-col {
        min-height: 640px;
        padding: 32px 24px;
    }

    .about-num {
        font-size: 260px;
    }

    .about-heading {
        font-size: 32px;
    }

    .about-text {
        max-width: 260px;
    }

    .create-inner {
        max-width: 1080px;
        gap: 32px;
    }

    .create-title {
        font-size: 100px;
    }

    .create-list li {
        font-size: 20px;
    }

    .create-right {
        width: 400px;
        min-width: 400px;
        height: 780px;
    }

    .create-quote-main { font-size: 22px; }
    .create-quote-sub { font-size: 16px; }

    .create-btn {
        width: 260px;
    }

    .create-bars .bar-yellow { width: 270px; }
    .create-bars .bar-cyan { width: 215px; }
    .create-bars .bar-magenta { width: 90px; }

    .team-inner {
        max-width: 1080px;
    }

    .team-title {
        font-size: 120px;
    }

    .team-avatar,
    .team-avatar-lg,
    .team-avatar-arrow {
        width: 160px;
        height: 158px;
    }

    .team-btn {
        font-size: 16px;
        padding: 12px 26px;
    }

    .proj-inner { max-width: 1080px; }
    .proj-grid { max-width: 1080px; }
    .proj-stripes-bar { max-width: 1080px; }
    .proj-title { font-size: 100px; }
    .proj-card { min-height: 180px; padding: 26px 26px 22px; }
    .proj-card-name { font-size: 36px; }
    .proj-card-desc { font-size: 14px; max-width: 280px; }
    .proj-arrow-img { width: 42px; height: 42px; }
    .proj-stripes-bar { height: 70px; }

    .footer {
        max-width: 1200px;
    }

    .footer-logo-text {
        font-size: 50px;
    }

    .footer-link {
        font-size: 30px;
    }

    .menu-content {
        padding: 0 50px 0 140px;
    }
}

/* ================================================================
   RESPONSIVE — LAPTOP S (1281px — 1440px)
   ================================================================ */
@media (max-width: 1440px) {
    .sidebar {
        width: 320px;
    }

    .sidebar-top {
        left: 155px;
        top: 28px;
    }

    .sidebar-center {
        left: 155px;
        top: 370px;
    }

    .sidebar-text {
        font-size: 80px;
        letter-spacing: -4px;
        right: 20px;
    }

    .main-scroll {
        margin-left: 320px;
    }

    body.menu-is-open .sidebar {
        transform: translateX(calc(100vw - 320px));
    }

    body.sidebar-shrunk.menu-is-open .sidebar {
        transform: translateX(calc(100vw - 280px));
    }

    body.sidebar-shrunk .sidebar {
        width: 280px;
    }

    body.sidebar-shrunk .sidebar-top {
        left: 190px;
        top: 28px;
    }

    body.sidebar-shrunk .sidebar-center {
        left: auto;
        right: 10px;
        top: 470px;
    }

    body.sidebar-shrunk .sidebar-text {
        font-size: 52px;
        right: 12px;
    }

    body.sidebar-shrunk .main-scroll {
        margin-left: 280px;
    }

    body.sidebar-shrunk .menu-open-btn {
        width: 66px;
        height: 66px;
    }

    body.sidebar-shrunk .logo-circle {
        width: 52px;
        height: 52px;
    }

    .menu-open-btn {
        width: 110px;
        height: 110px;
    }

    .logo-circle {
        width: 110px;
        height: 110px;
    }

    .title-text {
        font-size: 148px;
        letter-spacing: -8px;
    }

    .wing-icon {
        width: 124px;
        height: 108px;
    }

    .title-line {
        gap: 26px;
    }

    .hero-images {
        width: 230px;
        min-width: 230px;
    }

    .hero-inner {
        max-width: 960px;
        min-height: 680px;
        gap: 24px;
    }

    .bar-yellow { width: 230px; }
    .bar-cyan { width: 185px; }
    .bar-magenta { width: 140px; }

    .quote-main { font-size: 18px; }
    .quote-sub { font-size: 14px; }

    .about-section {
        margin-top: 120px;
    }

    .about-cols {
        max-width: 960px;
        gap: 20px;
    }

    .about-col {
        min-height: 560px;
        padding: 28px 20px;
    }

    .about-num {
        font-size: 210px;
    }

    .about-heading {
        font-size: 27px;
        letter-spacing: -1px;
    }

    .about-text {
        font-size: 14px;
        max-width: 230px;
    }

    .create-section {
        margin-top: 120px;
    }

    .create-inner {
        max-width: 960px;
        gap: 28px;
    }

    .create-title {
        font-size: 86px;
    }

    .create-list li {
        font-size: 18px;
    }

    .create-quote-main { font-size: 20px; }
    .create-quote-sub { font-size: 15px; }

    .create-right {
        width: 340px;
        min-width: 340px;
        height: 700px;
    }

    .create-btn {
        width: 220px;
        font-size: 18px;
    }

    .create-bars .bar-yellow { width: 230px; }
    .create-bars .bar-cyan { width: 185px; }
    .create-bars .bar-magenta { width: 80px; }

    .team-section {
        margin-top: 120px;
    }

    .team-inner {
        max-width: 960px;
    }

    .team-title {
        font-size: 100px;
        margin-bottom: 36px;
    }

    .team-quote-main { font-size: 24px; }
    .team-quote-sub { font-size: 17px; }
    .team-quote-cta { font-size: 18px; }

    .team-avatar,
    .team-avatar-lg,
    .team-avatar-arrow {
        width: 136px;
        height: 134px;
    }

    .team-arrow-img {
        width: 36px;
        height: 36px;
    }

    .team-btn {
        font-size: 15px;
        padding: 11px 22px;
    }

    .footer {
        max-width: 1060px;
        height: 140px;
        margin-top: 80px;
    }

    .footer-logo-text {
        font-size: 44px;
    }

    .footer-logo-circle {
        width: 48px;
        height: 48px;
    }

    .footer-link {
        font-size: 26px;
    }

    .menu-content {
        padding: 0 40px 0 100px;
    }

    .menu-link {
        font-size: clamp(80px, 10vw, 150px);
    }

    .proj-inner { max-width: 960px; }
    .proj-grid { max-width: 960px; gap: 16px; }
    .proj-stripes-bar { max-width: 960px; height: 60px; }
    .proj-title { font-size: 86px; margin-bottom: 32px; }
    .proj-card { min-height: 170px; padding: 24px 24px 20px; }
    .proj-card-name { font-size: 32px; }
    .proj-card-desc { font-size: 14px; max-width: 260px; }
    .proj-arrow-img { width: 38px; height: 38px; }
}

/* ================================================================
   RESPONSIVE — LAPTOP XS (1025px — 1280px)
   ================================================================ */
@media (max-width: 1280px) {
    .sidebar {
        width: 250px;
    }

    .sidebar-top {
        left: 115px;
        top: 24px;
    }

    .sidebar-center {
        left: 115px;
        top: 310px;
    }

    .sidebar-text {
        font-size: 64px;
        letter-spacing: -3px;
        right: 16px;
    }

    .main-scroll {
        margin-left: 250px;
    }

    body.menu-is-open .sidebar {
        transform: translateX(calc(100vw - 250px));
    }

    body.sidebar-shrunk.menu-is-open .sidebar {
        transform: translateX(calc(100vw - 220px));
    }

    body.sidebar-shrunk .sidebar {
        width: 220px;
    }

    body.sidebar-shrunk .sidebar-top {
        left: 140px;
        top: 24px;
    }

    body.sidebar-shrunk .sidebar-center {
        left: auto;
        right: 8px;
        top: 400px;
    }

    body.sidebar-shrunk .sidebar-text {
        font-size: 44px;
        right: 10px;
    }

    body.sidebar-shrunk .main-scroll {
        margin-left: 220px;
    }

    body.sidebar-shrunk .menu-open-btn {
        width: 60px;
        height: 60px;
    }

    body.sidebar-shrunk .logo-circle {
        width: 50px;
        height: 50px;
    }

    .menu-open-btn {
        width: 86px;
        height: 86px;
    }

    .logo-circle {
        width: 90px;
        height: 90px;
    }

    .title-text {
        font-size: 118px;
        letter-spacing: -6px;
    }

    .wing-icon {
        width: 98px;
        height: 85px;
    }

    .title-line {
        gap: 20px;
    }

    .hero-images {
        width: 195px;
        min-width: 195px;
    }

    .hero-inner {
        max-width: 820px;
        min-height: 600px;
        gap: 20px;
        margin-top: 48px;
    }

    .bar-yellow { width: 195px; }
    .bar-cyan { width: 155px; }
    .bar-magenta { width: 115px; }
    .bar { height: 12px; }

    .color-bars { margin-bottom: 14px; }

    .quote-main { font-size: 16px; }
    .quote-sub { font-size: 13px; }

    .hero-deco { gap: 12px; margin-top: 18px; }
    .deco-line { max-width: 360px; height: 4px; }
    .deco-line-2 { max-width: 520px; }
    .deco-stripes-bar { max-width: 520px; height: 65px; }

    .about-section {
        margin-top: 90px;
    }

    .about-cols {
        max-width: 820px;
        gap: 16px;
    }

    .about-col {
        min-height: 480px;
        padding: 24px 16px;
    }

    .about-num {
        font-size: 170px;
    }

    .about-heading {
        font-size: 22px;
        letter-spacing: -0.5px;
        margin-bottom: 14px;
    }

    .about-text {
        font-size: 13px;
        max-width: 210px;
    }

    .create-section {
        margin-top: 90px;
    }

    .create-inner {
        max-width: 820px;
        gap: 24px;
    }

    .create-title {
        font-size: 68px;
    }

    .create-list {
        margin-bottom: 24px;
    }

    .create-list li {
        font-size: 15px;
        padding-left: 20px;
    }

    .create-quote-main { font-size: 16px; }
    .create-quote-sub { font-size: 13px; }

    .create-right {
        width: 280px;
        min-width: 280px;
        height: 600px;
    }

    .create-btn {
        width: 190px;
        font-size: 15px;
        height: 44px;
    }

    .create-bars .bar-yellow { width: 195px; height: 12px; }
    .create-bars .bar-cyan { width: 155px; height: 12px; }
    .create-bars .bar-magenta { width: 70px; height: 12px; }

    .team-section {
        margin-top: 90px;
    }

    .team-inner {
        max-width: 820px;
    }

    .team-title {
        font-size: 78px;
        margin-bottom: 28px;
    }

    .team-quote-main { font-size: 20px; }
    .team-quote-sub { font-size: 15px; }
    .team-quote-cta { font-size: 15px; }

    .team-avatars {
        max-width: 820px;
    }

    .team-avatar,
    .team-avatar-lg,
    .team-avatar-arrow {
        width: 115px;
        height: 113px;
    }

    .team-arrow-img {
        width: 28px;
        height: 28px;
    }

    .team-btn {
        font-size: 14px;
        padding: 10px 18px;
    }

    .footer {
        max-width: 900px;
        height: 130px;
        padding: 0 28px;
        margin-top: 60px;
    }

    .footer-logo-text {
        font-size: 36px;
    }

    .footer-logo-circle {
        width: 40px;
        height: 40px;
    }

    .footer-desc {
        font-size: 12px;
    }

    .footer-link {
        font-size: 22px;
    }

    .footer-social {
        font-size: 14px;
    }

    .footer-email {
        font-size: 14px;
    }

    .menu-content {
        padding: 0 30px 0 70px;
    }

    .menu-link {
        font-size: clamp(65px, 8.5vw, 120px);
        gap: 30px;
    }

    .menu-nav {
        gap: 30px;
    }

    .proj-inner { max-width: 820px; }
    .proj-grid { max-width: 820px; gap: 14px; }
    .proj-stripes-bar { max-width: 820px; height: 50px; }
    .proj-title { font-size: 68px; margin-bottom: 28px; }
    .proj-card { min-height: 150px; padding: 22px 22px 20px; }
    .proj-card-name { font-size: 28px; }
    .proj-card-desc { font-size: 13px; max-width: 230px; }
    .proj-arrow-img { width: 34px; height: 34px; }
    .proj-card-arrow { bottom: 18px; right: 18px; }
}

/* ================================================================
   RESPONSIVE — TABLET (641px — 1024px)
   ================================================================ */
@media (max-width: 1024px) {
    :root { --sidebar-w: 80px; }

    .sidebar { width: 80px; }
    .sidebar-top { left: 8px; top: 14px; }
    .sidebar-center { left: 8px; top: 90px; }
    .sidebar-text { font-size: 22px; letter-spacing: -1px; right: 14px; }
    .menu-open-btn { width: 56px; height: 56px; }
    .logo-circle { width: 52px; height: 52px; }

    body.sidebar-shrunk .sidebar { width: 80px; }
    body.sidebar-shrunk .sidebar-top { left: 8px; top: 14px; }
    body.sidebar-shrunk .sidebar-center { left: auto; right: 8px; top: 90px; }
    body.sidebar-shrunk .sidebar-text { font-size: 22px; right: 14px; }
    body.sidebar-shrunk .main-scroll { margin-left: 80px; }
    body.sidebar-shrunk .menu-open-btn { width: 56px; height: 56px; }
    body.sidebar-shrunk .logo-circle { width: 52px; height: 52px; }

    body.menu-is-open .sidebar { transform: translateX(calc(100vw - 80px)); }
    body.sidebar-shrunk.menu-is-open .sidebar { transform: translateX(calc(100vw - 80px)); }

    .main-scroll { margin-left: 80px; }

    /* Hero */
    .hero-inner {
        flex-direction: column;
        max-width: 100%;
        min-height: auto;
        margin-top: 32px;
        gap: 20px;
    }
    .hero-images { flex-direction: row; width: 100%; min-width: unset; height: 200px; }
    .hero-content { padding: 24px 32px 24px 24px; }
    .title-text { font-size: clamp(56px, 9vw, 90px); letter-spacing: -3px; }
    .wing-icon { width: 60px; height: 52px; }
    .title-line { gap: 16px; }
    .bar-yellow { width: 160px; }
    .bar-cyan { width: 130px; }
    .bar-magenta { width: 100px; }
    .bar { height: 10px; }
    .quote-main { font-size: 16px; }
    .quote-sub { font-size: 13px; }
    .deco-line { max-width: 280px; height: 4px; }
    .deco-line-2 { max-width: 400px; }
    .deco-stripes-bar { max-width: 400px; height: 50px; }

    /* About */
    .about-section { margin-top: 60px; }
    .about-cols { flex-direction: column; max-width: 100%; gap: 20px; }
    .about-col { min-height: 340px; padding: 28px 24px; }
    .about-num { font-size: 160px; }
    .about-heading { font-size: 28px; }
    .about-text { font-size: 14px; max-width: 100%; }

    /* Create */
    .create-section { margin-top: 60px; padding: 0 28px; overflow-x: hidden; }
    .create-inner { flex-direction: column; max-width: 100%; gap: 28px; min-height: unset; }
    .create-title { font-size: 44px; max-width: 100%; }
    .create-list { min-height: unset; max-width: 100%; }
    .create-list li { font-size: 15px; }
    .create-quote-main { font-size: 16px; max-width: 100%; }
    .create-quote-sub { font-size: 13px; max-width: 100%; }
    .create-right { width: 100%; min-width: unset; height: auto; flex-direction: column; gap: 10px; }
    .create-card { width: 100%; aspect-ratio: 16/10; height: auto; border-radius: 12px; flex: none; }
    .create-cta { width: 100%; overflow: hidden; }
    .create-stripes { display: none; }
    .create-btn { width: 100%; border-radius: 8px; font-size: 15px; height: 42px; }
    .create-bars .bar-yellow { width: 56%; height: 10px; }
    .create-bars .bar-cyan { width: 45%; height: 10px; }
    .create-bars .bar-magenta { width: 34%; height: 10px; }

    /* Team */
    .team-section { margin-top: 60px; }
    .team-inner { max-width: 100%; }
    .team-title { font-size: 60px; margin-bottom: 24px; }
    .team-quote-main { font-size: 18px; }
    .team-quote-sub { font-size: 14px; }
    .team-quote-cta { font-size: 14px; }
    .team-avatars { flex-wrap: wrap; gap: 12px; justify-content: center; }
    .team-avatar,
    .team-avatar-lg,
    .team-avatar-arrow { width: 100px; height: 98px; }
    .team-btn { font-size: 13px; padding: 10px 16px; }
    .team-buttons { flex-wrap: wrap; gap: 8px; }

    /* Footer */
    .footer { max-width: 100%; height: auto; padding: 24px 28px; margin-top: 50px; border-radius: 10px; }
    .footer-inner { flex-direction: column; gap: 20px; }
    .footer-logo-text { font-size: 32px; }
    .footer-logo-circle { width: 36px; height: 36px; }
    .footer-link { font-size: 20px; }
    .footer-social { font-size: 13px; }
    .footer-email { font-size: 13px; }

    /* Menu */
    .menu-content { padding: 0 24px 0 40px; }
    .menu-link { font-size: clamp(50px, 8vw, 90px); }
    .menu-nav { gap: 24px; }

    /* Projects */
    .proj-inner { max-width: 100%; }
    .proj-grid { max-width: 100%; gap: 12px; grid-template-columns: 1fr; }
    .proj-stripes-bar { max-width: 100%; height: 44px; }
    .proj-title { font-size: 52px; margin-bottom: 24px; }
    .proj-card { min-height: 140px; padding: 22px 22px 20px; grid-column: auto; }
    .proj-card-name { font-size: 28px; }
    .proj-card-desc { font-size: 13px; max-width: 100%; }
    .proj-arrow-img { width: 32px; height: 32px; }
    .proj-card-arrow { bottom: 16px; right: 16px; }
    .proj-card-yellow,
    .proj-card-cyan,
    .proj-card-wide,
    .proj-card-narrow { grid-column: auto; }
    .proj-grid > .proj-card:not(.proj-card-gray):nth-child(2) { grid-column: auto; }
    .proj-section { padding-top: 32px; }
}

/* ================================================================
   RESPONSIVE — TABLET PORTRAIT (481px — 768px)
   ================================================================ */
@media (max-width: 768px) {
    :root { --sidebar-w: 0px; }

    html, body { overflow-x: hidden; max-width: 100vw; }
    .menu-overlay { display: none !important; }
    .sidebar { display: none !important; }
    .main-scroll { margin-left: 0 !important; padding-top: 90px; padding-bottom: 0; width: 100%; max-width: 100vw; overflow-x: hidden; }
    body.sidebar-shrunk .main-scroll { margin-left: 0 !important; }
    body.sidebar-shrunk .sidebar { display: none !important; }

    /* ===== MOBILE PANEL — just a wrapper ===== */
    .mobile-panel {
        display: contents !important;
    }

    /* ===== MOBILE HEADER — fixed top, slides down on open ===== */
    .mobile-header {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        top: 0; left: 0; right: 0;
        height: 90px;
        padding: 0 22px;
        background: #F9F91B;
        border-bottom: none;
        box-sizing: border-box;
        z-index: 1000;
        transform: translateY(0);
        transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
        will-change: transform;
    }
    body.mobile-menu-open .mobile-header {
        transform: translateY(calc(70vh - 104px));
        border-top: none;
    }
    .mobile-header-text {
        font-family: 'Bricolage Grotesque', sans-serif;
        font-size: clamp(54px, 12vw, 88px); font-weight: 800;
        color: #000; letter-spacing: -0.5px; line-height: 1.1;
    }
    .mobile-header-right { display: flex; align-items: center; gap: 18px; }
    .mobile-header-logo { width: 72px; height: 72px; background: #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
    .mobile-header-logo .logo-img { width: 80%; height: 80%; object-fit: contain; filter: none; transform: none; }
    .mobile-header-logo-img { width: 80%; height: 80%; object-fit: contain; filter: none; transform: none; }
    .mobile-header-menu-btn {
        background: none; border: none; cursor: pointer;
        padding: 0; display: flex; align-items: center; justify-content: center;
        width: 54px; height: 54px;
    }
    .mobile-header-arrow-img {
        width: 56px; height: 56px;
        object-fit: contain;
        filter: brightness(0);
        transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    /* rotate arrow when open */
    body.mobile-menu-open .mobile-header-arrow-img {
        transform: rotate(180deg);
    }

    /* ===== MOBILE OVERLAY — slides down from top, synced with header ===== */
    .mobile-overlay {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        position: fixed;
        top: 0; left: 0; right: 0;
        height: calc(70vh - 104px);
        background: #F9F91B;
        box-sizing: border-box;
        overflow-y: auto;
        z-index: 999;
        border-bottom: 3px solid #000;
        transform: translateY(-100%);
        transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
        will-change: transform;
    }
    body.mobile-menu-open .mobile-overlay {
        transform: translateY(0);
    }

    .mobile-menu-nav {
        display: flex;
        flex-direction: column;
        gap: 18px;
        padding: 30px 28px;
        width: 100%;
        box-sizing: border-box;
    }
    .mobile-menu-link {
        font-family: 'Bricolage Grotesque', sans-serif;
        font-size: clamp(70px, 17vw, 108px);
        font-weight: 800;
        color: #000;
        line-height: 0.95;
        letter-spacing: -0.04em;
        text-decoration: none;
        display: block;
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.3s ease-out, transform 0.3s ease-out, color 0.2s ease;
    }
    body.mobile-menu-open .mobile-menu-link {
        opacity: 1;
        transform: translateY(0);
    }
    body.mobile-menu-open .mobile-menu-link[data-index="1"] { transition-delay: 0.2s; }
    body.mobile-menu-open .mobile-menu-link[data-index="2"] { transition-delay: 0.28s; }
    body.mobile-menu-open .mobile-menu-link[data-index="3"] { transition-delay: 0.36s; }
    body.mobile-menu-open .mobile-menu-link[data-index="4"] { transition-delay: 0.44s; }
    .mobile-menu-link.active { color: #000000; }
    .mobile-menu-link:hover { color: #E88ACD; }

    body.mobile-menu-open { overflow: hidden; padding-bottom: 104px; }

    /* Prevent sidebar-shrunk from shrinking mobile header logo */
    body.sidebar-shrunk .mobile-header-logo { width: 72px !important; height: 72px !important; }

    /* Hero */
    .hero { padding: 0 16px; max-width: 100%; overflow: hidden; }
    .hero::after { display: none; }
    .hero-inner {
        flex-direction: column; padding: 32px 0 0;
        min-height: auto; margin-top: 0; gap: 0;
        max-width: 100%; overflow: hidden;
    }
    .hero-content { order: -1; padding: 0 0 14px; max-width: 100%; overflow: hidden; }
    .hero-images {
        order: 1;
        flex-direction: column;
        width: 100%;
        min-width: unset;
        height: auto;
        gap: 8px;
        padding: 0 0 14px;
    }
    .hero-img-card { width: 100%; aspect-ratio: 16/10; height: auto; border-radius: 12px; }
    /* Color bars */
    .color-bars { margin-bottom: 12px; }
    .bar { height: 14px; border-radius: 0; }
    .bar-yellow { width: 70%; }
    .bar-cyan { width: 57%; }
    .bar-magenta { width: 43%; }
    /* Title */
    .title-line { gap: 14px; flex-wrap: nowrap; align-items: flex-end; }
    .title-text { font-size: clamp(122px, 21vw, 160px); letter-spacing: -6px; line-height: 0.85; }
    .wing-icon { width: clamp(80px, 16vw, 106px); height: auto; margin-bottom: 6px; }
    .hero-title { margin-bottom: 18px; }
    /* Quotes */
    .quote-marks { margin-bottom: 10px; gap: 10px; }
    .qm { width: 52px; height: 42px; }
    /* Text */
    .quote-main { font-size: clamp(17px, 4.6vw, 22px); line-height: 1.22; margin-bottom: 10px; font-weight: 300; }
    .quote-sub { font-size: clamp(15px, 4vw, 19px); line-height: 1.35; }
    /* Deco */
    .hero-deco { margin-top: 16px; gap: 8px; }
    .deco-line { max-width: 70%; height: 6px; border: 1px solid #FFFFFF; }
    .deco-line-2 { max-width: 100%; }
    .deco-stripes-bar { max-width: 100%; height: 48px; }

    /* About */
    .about-section { margin-top: 48px; padding: 0 20px; }
    .about-cols { flex-direction: column; gap: 16px; }
    .about-col { min-height: 300px; padding: 26px 22px; }
    .about-num { font-size: 140px; }
    .about-heading { font-size: 26px; letter-spacing: -1px; }
    .about-text { font-size: 14px; max-width: 100%; }

    /* Create */
    .create-section { margin-top: 48px; padding: 0 20px; overflow-x: hidden; }
    .create-inner { flex-direction: column; gap: 24px; max-width: 100%; min-height: unset; }
    .create-title { font-size: clamp(28px, 5vw, 36px); max-width: 100%; line-height: 0.8; letter-spacing: -0.04em; }
    .create-list { max-width: 100%; min-height: unset; }
    .create-list li { font-size: 18px; line-height: 1.3; letter-spacing: 0; }
    .create-quote .quote-marks { gap: 12px; }
    .create-quote .qm { width: 52px; height: 42px; }
    .create-quote-main {
        width: 288px;
        height: 46px;
        max-width: 100%;
        font-family: 'Geist', 'Inter', sans-serif;
        font-size: 18px;
        font-weight: 300;
        line-height: 1.3;
        letter-spacing: 0;
        text-transform: uppercase;
        color: #FFFFFF;
    }
    .create-quote-sub {
        width: 288px;
        max-width: 100%;
        min-height: 147px;
        height: auto;
        font-family: 'Geist', 'Inter', sans-serif;
        font-size: 16px;
        font-weight: 300;
        line-height: 1.3;
        letter-spacing: 0;
        color: #929292;
    }
    .create-right { width: 100%; min-width: unset; height: auto; flex-direction: column; gap: 8px; }
    .create-card { width: 100%; aspect-ratio: 16/10; height: auto; border-radius: 12px; flex: none; }
    .create-cta { width: 100%; overflow: hidden; }
    .create-stripes { display: none; }
    .create-btn { width: 100%; border-radius: 8px; font-size: 16px; height: 50px; }
    .create-bars .bar-yellow { width: 56%; height: 14px; }
    .create-bars .bar-cyan { width: 45%; height: 14px; }
    .create-bars .bar-magenta { width: 34%; height: 14px; }

    /* Team */
    .team-section { margin-top: 48px; padding: 0 20px; }
    .team-inner { max-width: 100%; }
    .team-title { font-size: clamp(48px, 9vw, 64px); margin-bottom: 20px; }
    .team-quote-main { font-size: 17px; }
    .team-quote-sub { font-size: 14px; }
    .team-quote-cta { font-size: 14px; }
    .team-avatars { flex-wrap: wrap; gap: 10px; justify-content: center; }
    .team-avatar,
    .team-avatar-lg,
    .team-avatar-arrow { width: 90px; height: 88px; }
    .team-arrow-img { width: 28px; height: 28px; }
    .team-btn { font-size: 12px; padding: 10px 16px; }
    .team-buttons { flex-wrap: wrap; gap: 8px; }

    /* Footer */
    .footer { max-width: 100%; height: auto; padding: 22px 20px; margin-top: 44px; border-radius: 10px; }
    .footer-inner { flex-direction: column; gap: 18px; }
    .footer-logo-text { font-size: 30px; }
    .footer-logo-circle { width: 34px; height: 34px; }
    .footer-desc { font-size: 13px; }
    .footer-link { font-size: 20px; }
    .footer-social { font-size: 13px; }
    .footer-email { font-size: 13px; }

    /* Menu */
    .menu-content { padding: 0 20px 0 32px; }
    .menu-link { font-size: clamp(42px, 9vw, 60px); }
    .menu-nav { gap: 22px; }
    .menu-sidebar-right { display: none; }

    /* Projects */
    .proj-section { padding: 0 20px; padding-top: 24px; }
    .proj-grid { grid-template-columns: 1fr; gap: 10px; }
    .proj-stripes-bar { height: 40px; }
    .proj-title { font-size: clamp(42px, 8vw, 56px); margin-bottom: 22px; }
    .proj-card { min-height: 130px; padding: 20px 20px 18px; grid-column: auto; }
    .proj-card-name { font-size: 26px; }
    .proj-card-desc { font-size: 13px; max-width: 100%; }
    .proj-arrow-img { width: 30px; height: 30px; }
    .proj-card-arrow { bottom: 16px; right: 16px; }
    .proj-card-yellow,
    .proj-card-cyan,
    .proj-card-wide,
    .proj-card-narrow { grid-column: auto; }
    .proj-grid > .proj-card:not(.proj-card-gray):nth-child(2) { grid-column: auto; }
}

/* ================================================================
   RESPONSIVE — MOBILE (max-width: 640px)
   ================================================================ */
@media (max-width: 640px) {
    /* 640px */
    .main-scroll { padding-top: 86px; padding-bottom: 0; }
    .mobile-header { height: 100px; padding: 0 18px; }
    .mobile-overlay { height: calc(70vh - 100px); }
    body.mobile-menu-open { padding-bottom: 100px; }
    .mobile-header-text { font-size: clamp(50px, 12vw, 82px); }
    .mobile-header-logo { width: 72px; height: 72px; }
    .mobile-header-arrow-img { width: 50px; height: 50px; }
    .mobile-menu-link { font-size: clamp(62px, 15vw, 88px); }

    /* Hero */
    .hero { padding: 0 14px; }
    .hero-inner { padding: 28px 0 0; }
    .hero-img-card { aspect-ratio: 16/10; height: auto; border-radius: 10px; }
    .title-text { font-size: clamp(108px, 19vw, 140px); letter-spacing: -5px; line-height: 0.85; }
    .wing-icon { width: clamp(70px, 14vw, 94px); margin-bottom: 4px; }
    .title-line { gap: 12px; }
    .qm { width: 46px; height: 38px; }
    .quote-main { font-size: clamp(16px, 4.4vw, 20px); line-height: 1.22; max-width: 100%; }
    .quote-sub { font-size: clamp(14px, 3.8vw, 18px); max-width: 100%; }
    .deco-stripes-bar { height: 48px; }

    /* About */
    .about-section { margin-top: 40px; padding: 0 16px; }
    .about-col { min-height: 270px; padding: 24px 20px; }
    .about-num { font-size: 120px; }
    .about-heading { font-size: 24px; }
    .about-text { font-size: 13px; }

    /* Create */
    .create-section { margin-top: 40px; padding: 0 16px; overflow-x: hidden; }
    .create-inner { min-height: unset; }
    .create-title { font-size: clamp(24px, 5vw, 32px); max-width: 100%; line-height: 0.8; letter-spacing: -0.04em; }
    .create-list { min-height: unset; }
    .create-list li { font-size: 16px; line-height: 1.3; letter-spacing: 0; }
    .create-quote .qm { width: 46px; height: 38px; }
    .create-quote-main { font-size: clamp(16px, 4.4vw, 20px); max-width: 100%; }
    .create-quote-sub { font-size: clamp(14px, 4vw, 18px); max-width: 100%; }
    .create-right { height: auto; flex-direction: column; gap: 8px; }
    .create-card { width: 100%; aspect-ratio: 16/10; height: auto; border-radius: 10px; flex: none; }
    .create-btn { width: 186px; font-size: 15px; height: 46px; }
    .create-bars .bar-yellow { width: 56%; height: 12px; }
    .create-bars .bar-cyan { width: 45%; height: 12px; }
    .create-bars .bar-magenta { width: 34%; height: 12px; }

    /* Team */
    .team-section { margin-top: 40px; padding: 0 16px; }
    .team-title { font-size: clamp(40px, 12vw, 56px); margin-bottom: 18px; }
    .team-quote-main { font-size: 16px; }
    .team-quote-sub { font-size: 13px; }
    .team-quote-cta { font-size: 13px; }
    .team-avatar,
    .team-avatar-lg,
    .team-avatar-arrow { width: 76px; height: 74px; }
    .team-arrow-img { width: 24px; height: 24px; }
    .team-btn { font-size: 12px; padding: 10px 14px; }

    /* Footer */
    .footer { padding: 20px 16px; margin-top: 40px; }
    .footer-logo-text { font-size: 28px; }
    .footer-logo-circle { width: 32px; height: 32px; }
    .footer-desc { font-size: 13px; }
    .footer-link { font-size: 18px; }
    .footer-social { font-size: 12px; }
    .footer-email { font-size: 12px; }

    /* Menu */
    .menu-content { padding-left: 28px; }
    .menu-link { font-size: clamp(36px, 10vw, 52px); }

    /* Projects */
    .proj-section { padding: 0 16px; padding-top: 20px; }
    .proj-title { font-size: clamp(36px, 11vw, 50px); margin-bottom: 18px; }
    .proj-card { min-height: 120px; padding: 18px 18px 16px; }
    .proj-card-name { font-size: 24px; }
    .proj-card-desc { font-size: 12px; }
    .proj-arrow-img { width: 28px; height: 28px; }
    .proj-card-arrow { bottom: 14px; right: 14px; }
    .proj-stripes-bar { height: 36px; }
}

/* ================================================================
   RESPONSIVE — SMALL PHONE (max-width: 480px)
   ================================================================ */
@media (max-width: 480px) {
    /* 480px */
    .main-scroll { padding-top: 82px; padding-bottom: 0; }
    .mobile-header { height: 96px; padding: 0 16px; }
    .mobile-overlay { height: calc(70vh - 96px); }
    body.mobile-menu-open { padding-bottom: 96px; }
    .mobile-header-text { font-size: clamp(44px, 11vw, 74px); }
    .mobile-header-logo { width: 72px; height: 72px; }
    .mobile-header-arrow-img { width: 46px; height: 46px; }
    .mobile-menu-link { font-size: clamp(54px, 14vw, 76px); }

    /* Hero */
    .hero { padding: 0 12px; }
    .hero-inner { padding: 24px 0 0; }
    .hero-img-card { aspect-ratio: 16/10; height: auto; border-radius: 10px; }
    .title-text { font-size: clamp(96px, 17vw, 116px); letter-spacing: -4px; line-height: 0.85; }
    .wing-icon { width: clamp(62px, 13vw, 84px); margin-bottom: 3px; }
    .title-line { gap: 10px; }
    .quote-main { font-size: clamp(15px, 4.2vw, 18px); line-height: 1.22; }
    .quote-sub { font-size: clamp(13px, 3.6vw, 16px); }
    .qm { width: 42px; height: 34px; }
    .bar { height: 12px; }
    .bar-yellow { width: 68%; }
    .bar-cyan { width: 55%; }
    .bar-magenta { width: 41%; }
    .deco-stripes-bar { height: 48px; }

    /* About */
    .about-section { padding: 0 14px; }
    .about-col { min-height: 240px; padding: 20px 16px; }
    .about-num { font-size: 100px; }
    .about-heading { font-size: 22px; }
    .about-text { font-size: 12px; }

    /* Create */
    .create-section { padding: 0 14px; overflow-x: hidden; }
    .create-inner { min-height: unset; }
    .create-title { font-size: clamp(20px, 5.5vw, 28px); max-width: 100%; line-height: 0.8; letter-spacing: -0.04em; }
    .create-list { min-height: unset; }
    .create-list li { font-size: 15px; line-height: 1.3; letter-spacing: 0; }
    .create-quote .qm { width: 42px; height: 34px; }
    .create-quote-main { font-size: clamp(15px, 4.2vw, 18px); max-width: 100%; }
    .create-quote-sub { font-size: clamp(13px, 3.8vw, 16px); max-width: 100%; }
    .create-right { height: auto; flex-direction: column; gap: 8px; }
    .create-card { width: 100%; aspect-ratio: 16/10; height: auto; border-radius: 10px; flex: none; }
    .create-btn { width: 170px; font-size: 14px; height: 44px; }
    .create-bars .bar-yellow { width: 56%; height: 11px; }
    .create-bars .bar-cyan { width: 45%; height: 11px; }
    .create-bars .bar-magenta { width: 34%; height: 11px; }

    /* Team */
    .team-section { padding: 0 14px; }
    .team-title { font-size: clamp(36px, 11vw, 48px); }
    .team-avatar,
    .team-avatar-lg,
    .team-avatar-arrow { width: 64px; height: 62px; }
    .team-arrow-img { width: 22px; height: 22px; }
    .team-btn { font-size: 11px; padding: 9px 12px; }

    /* Footer */
    .footer { padding: 18px 14px; }
    .footer-logo-text { font-size: 26px; }
    .footer-link { font-size: 17px; }

    /* Menu */
    .menu-content { padding-left: 24px; }
    .menu-link { font-size: clamp(34px, 9.5vw, 46px); }

    /* Projects */
    .proj-section { padding: 0 14px; padding-top: 18px; }
    .proj-title { font-size: clamp(34px, 10vw, 44px); }
    .proj-card-name { font-size: 22px; }
    .proj-card-desc { font-size: 11px; }
    .proj-arrow-img { width: 26px; height: 26px; }
}

/* ================================================================
   RESPONSIVE — MINI PHONE (max-width: 375px)
   ================================================================ */
@media (max-width: 375px) {
    /* 375px */
    .main-scroll { padding-top: 76px; padding-bottom: 0; }
    .mobile-header { height: 90px; padding: 0 14px; }
    .mobile-overlay { height: calc(70vh - 90px); }
    body.mobile-menu-open { padding-bottom: 90px; }
    .mobile-header-text { font-size: clamp(38px, 10vw, 64px); }
    .mobile-header-logo { width: 72px; height: 72px; }
    .mobile-header-arrow-img { width: 42px; height: 42px; }
    .mobile-menu-link { font-size: clamp(48px, 13vw, 66px); }

    /* Hero */
    .hero { padding: 0 10px; }
    .hero-inner { padding: 20px 0 0; }
    .hero-img-card { aspect-ratio: 16/10; height: auto; border-radius: 8px; }
    .title-text { font-size: clamp(86px, 15vw, 100px); letter-spacing: -3px; line-height: 0.85; }
    .wing-icon { width: clamp(56px, 12vw, 74px); margin-bottom: 2px; }
    .title-line { gap: 8px; }
    .quote-main { font-size: 15px; line-height: 1.22; }
    .quote-sub { font-size: 13px; }
    .qm { width: 38px; height: 30px; }
    .bar { height: 11px; }
    .bar-yellow { width: 66%; }
    .bar-cyan { width: 53%; }
    .bar-magenta { width: 40%; }
    .deco-stripes-bar { height: 48px; }

    /* About */
    .about-section { padding: 0 12px; margin-top: 36px; }
    .about-col { min-height: 210px; padding: 18px 14px; }
    .about-num { font-size: 90px; }
    .about-heading { font-size: 20px; }
    .about-text { font-size: 11px; }

    /* Create */
    .create-section { padding: 0 12px; margin-top: 36px; overflow-x: hidden; }
    .create-inner { min-height: unset; }
    .create-title { font-size: clamp(18px, 6vw, 24px); max-width: 100%; line-height: 0.8; letter-spacing: -0.04em; }
    .create-list { min-height: unset; }
    .create-list li { font-size: 14px; padding-left: 16px; line-height: 1.3; letter-spacing: 0; }
    .create-quote .qm { width: 38px; height: 30px; }
    .create-quote-main { font-size: 16px; max-width: 100%; }
    .create-quote-sub { font-size: 14px; max-width: 100%; }
    .create-right { height: auto; flex-direction: column; gap: 8px; }
    .create-card { width: 100%; aspect-ratio: 16/10; height: auto; border-radius: 8px; flex: none; }
    .create-btn { width: 152px; font-size: 13px; height: 42px; border-radius: 6px 0 0 6px; }
    .create-bars .bar-yellow { width: 56%; height: 10px; }
    .create-bars .bar-cyan { width: 45%; height: 10px; }
    .create-bars .bar-magenta { width: 34%; height: 10px; }

    /* Team */
    .team-section { padding: 0 12px; margin-top: 36px; }
    .team-title { font-size: clamp(32px, 10vw, 42px); margin-bottom: 16px; }
    .team-quote-main { font-size: 14px; }
    .team-quote-sub { font-size: 12px; }
    .team-quote-cta { font-size: 12px; }
    .team-avatar,
    .team-avatar-lg,
    .team-avatar-arrow { width: 56px; height: 54px; }
    .team-arrow-img { width: 18px; height: 18px; }
    .team-btn { font-size: 10px; padding: 8px 10px; }

    /* Footer */
    .footer { padding: 16px 12px; margin-top: 36px; }
    .footer-logo-text { font-size: 22px; }
    .footer-logo-circle { width: 28px; height: 28px; }
    .footer-link { font-size: 15px; }
    .footer-social { font-size: 11px; }
    .footer-email { font-size: 11px; }

    /* Menu */
    .menu-content { padding-left: 18px; }
    .menu-link { font-size: clamp(30px, 9vw, 40px); }
    .menu-nav { gap: 20px; }

    /* Projects */
    .proj-section { padding: 0 12px; padding-top: 14px; }
    .proj-title { font-size: clamp(30px, 9vw, 40px); }
    .proj-card { min-height: 110px; padding: 16px 16px 14px; }
    .proj-card-name { font-size: 20px; }
    .proj-card-desc { font-size: 10px; }
    .proj-arrow-img { width: 24px; height: 24px; }
    .proj-card-arrow { bottom: 12px; right: 12px; }
    .proj-stripes-bar { height: 30px; }
}

/* ================================================================
   RESPONSIVE — ULTRA SMALL (max-width: 320px)
   ================================================================ */
@media (max-width: 320px) {
    /* 320px */
    .main-scroll { padding-top: 70px; padding-bottom: 0; }
    .mobile-header { height: 84px; padding: 0 12px; }
    .mobile-overlay { height: calc(70vh - 84px); }
    body.mobile-menu-open { padding-bottom: 84px; }
    .mobile-header-text { font-size: clamp(34px, 10vw, 56px); }
    .mobile-header-logo { width: 72px; height: 72px; }
    .mobile-header-arrow-img { width: 36px; height: 36px; }
    .mobile-header-right { gap: 10px; }
    .mobile-menu-link { font-size: clamp(42px, 12vw, 56px); }

    /* Hero */
    .hero { padding: 0 8px; }
    .hero-inner { padding: 18px 0 0; }
    .hero-img-card { aspect-ratio: 16/10; height: auto; border-radius: 8px; }
    .title-text { font-size: clamp(80px, 14vw, 90px); letter-spacing: -2px; line-height: 0.85; }
    .wing-icon { width: clamp(50px, 11vw, 66px); margin-bottom: 2px; }
    .title-line { gap: 6px; }
    .quote-main { font-size: 14px; line-height: 1.22; }
    .quote-sub { font-size: 12px; }
    .qm { width: 34px; height: 26px; }
    .bar { height: 10px; }
    .bar-yellow { width: 64%; }
    .bar-cyan { width: 51%; }
    .bar-magenta { width: 38%; }
    .deco-stripes-bar { height: 48px; }

    /* About */
    .about-section { padding: 0 10px; margin-top: 32px; }
    .about-col { min-height: 190px; padding: 16px 12px; }
    .about-num { font-size: 80px; }
    .about-heading { font-size: 18px; }
    .about-text { font-size: 10px; }

    /* Create */
    .create-section { padding: 0 10px; margin-top: 32px; overflow-x: hidden; }
    .create-inner { min-height: unset; }
    .create-title { font-size: clamp(16px, 5.5vw, 22px); max-width: 100%; line-height: 0.8; letter-spacing: -0.04em; }
    .create-list { min-height: unset; }
    .create-list li { font-size: 13px; padding-left: 14px; line-height: 1.3; letter-spacing: 0; }
    .create-quote .qm { width: 34px; height: 26px; }
    .create-quote-main { font-size: 15px; max-width: 100%; }
    .create-quote-sub { font-size: 13px; max-width: 100%; }
    .create-right { height: auto; flex-direction: column; gap: 8px; }
    .create-card { width: 100%; aspect-ratio: 16/10; height: auto; border-radius: 8px; flex: none; }
    .create-btn { width: 136px; font-size: 12px; height: 40px; }
    .create-bars .bar-yellow { width: 56%; height: 9px; }
    .create-bars .bar-cyan { width: 45%; height: 9px; }
    .create-bars .bar-magenta { width: 34%; height: 9px; }

    /* Team */
    .team-section { padding: 0 10px; margin-top: 32px; }
    .team-title { font-size: clamp(28px, 9vw, 38px); }
    .team-avatar,
    .team-avatar-lg,
    .team-avatar-arrow { width: 48px; height: 46px; }
    .team-arrow-img { width: 16px; height: 16px; }
    .team-btn { font-size: 9px; padding: 7px 9px; }
    .team-quote-main { font-size: 13px; }
    .team-quote-sub { font-size: 11px; }

    /* Footer */
    .footer { padding: 14px 10px; margin-top: 32px; }
    .footer-logo-text { font-size: 20px; }
    .footer-logo-circle { width: 24px; height: 24px; }
    .footer-link { font-size: 14px; }
    .footer-social { font-size: 10px; }
    .footer-email { font-size: 10px; }

    /* Menu */
    .menu-content { padding-left: 14px; }
    .menu-link { font-size: clamp(26px, 8vw, 34px); }

    /* Projects */
    .proj-section { padding: 0 10px; padding-top: 12px; }
    .proj-title { font-size: clamp(26px, 8vw, 34px); }
    .proj-card { min-height: 100px; padding: 14px 14px 12px; }
    .proj-card-name { font-size: 18px; }
    .proj-card-desc { font-size: 9px; }
    .proj-arrow-img { width: 22px; height: 22px; }
}

/* Fix: ensure sidebar shows on desktop */
@media (min-width: 769px) {
    .sidebar { display: flex !important; }
    .mobile-panel { display: none !important; }
}

/* Fix: ensure sidebar-shrunk doesn't break mobile */
@media (max-width: 768px) {
    body.sidebar-shrunk .sidebar { display: none !important; }
    body.sidebar-shrunk .main-scroll { margin-left: 0 !important; }
    body.sidebar-shrunk .sidebar-top,
    body.sidebar-shrunk .sidebar-center,
    body.sidebar-shrunk .sidebar-text { display: none !important; }
}

/* ===== ABOUT SECTION (3 columns) ===== */
.about-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-top: 180px;
    padding: 0 32px;
    content-visibility: auto;
    contain-intrinsic-size: auto 900px;
}

.about-cols {
    display: flex;
    width: 100%;
    max-width: 1354px;
    gap: 32px;
    padding: 0;
}

.about-col {
    flex: 1;
    min-height: 990px;
    position: relative;
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
    border-radius: 14px;
    contain: layout style;
}

.about-col::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: url('../images/background-main.webp') repeat;
    background-size: 1920px 1029px;
    opacity: 0.08;
    mix-blend-mode: difference;
    z-index: 0;
    pointer-events: none;
    transform: translateZ(0);
}

.about-col-yellow {
    background: #F9F91B;
}

.about-col-cyan {
    background: #06F8A7;
}

.about-col-pink {
    background: #FE34F1;
}

.about-num {
    position: absolute;
    display: block;
    width: auto;
    object-fit: contain;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}

/* 01 a little higher */
.about-col-yellow .about-num {
    height: clamp(165px, 19vw, 340px);
    bottom: 30px;
    left: clamp(-8px, -1.4vw, -28px);
}

/* 03 stays at bottom */
.about-col-pink .about-num {
    height: clamp(165px, 19vw, 340px);
    bottom: 30px;
    left: clamp(-8px, -1.4vw, -28px);
}

/* 02 stays at top */
.about-col-cyan .about-num {
    height: clamp(165px, 19vw, 340px);
    top: 30px;
    left: clamp(-8px, -1.4vw, -28px);
}

.about-heading {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 38px;
    font-weight: 800;
    color: #000000;
    line-height: 1.05;
    letter-spacing: -1.5px;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.about-text {
    font-family: 'Geist', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #000000;
    line-height: 1.5;
    position: relative;
    z-index: 1;
    max-width: 280px;
}

/* Col 2 (cyan) — content at bottom */
.about-col-cyan {
    justify-content: flex-end;
    padding-bottom: 60px;
}

/* Col 1 & 3 — content at top */
.about-col-yellow,
.about-col-pink {
    justify-content: flex-start;
    padding-top: 40px;
}

/* ===== ABOUT SECTION — FINAL MOBILE LAYOUT ===== */
@media (max-width: 768px) {
    .about-section {
        margin-top: 48px;
        padding: 0 16px;
    }

    .about-cols {
        flex-direction: column;
        align-items: center;
        max-width: 100%;
        gap: 12px;
    }

    .about-col {
        width: min(308px, 100%);
        min-height: 568px;
        padding: 20px 16px 18px;
        border-radius: 12px;
    }

    .about-heading {
        max-width: 100%;
        font-size: clamp(24px, 7vw, 30px);
        line-height: 1.03;
        letter-spacing: -0.6px;
        margin-bottom: 14px;
    }

    .about-text {
        max-width: 100%;
        font-size: clamp(13px, 4vw, 16px);
        line-height: 1.4;
    }

    .about-col-yellow,
    .about-col-pink {
        justify-content: flex-start;
        padding-top: 20px;
    }

    .about-col-cyan {
        justify-content: flex-end;
        padding-bottom: 24px;
    }

    .about-col-yellow .about-num,
    .about-col-pink .about-num {
        height: clamp(250px, 86vw, 330px);
        bottom: -14px;
        left: clamp(-64px, -16vw, -42px);
    }

    .about-col-cyan .about-num {
        height: clamp(250px, 86vw, 330px);
        top: -34px;
        left: clamp(-78px, -20vw, -52px);
    }
}

@media (max-width: 375px) {
    .about-section {
        margin-top: 40px;
        padding: 0 12px;
    }

    .about-col {
        width: min(308px, 100%);
        min-height: 540px;
        padding: 18px 14px 16px;
    }

    .about-heading {
        max-width: 100%;
        font-size: clamp(22px, 6.6vw, 26px);
        margin-bottom: 12px;
    }

    .about-text {
        max-width: 100%;
        font-size: clamp(12px, 3.9vw, 14px);
    }

    .about-col-cyan {
        padding-bottom: 20px;
    }

    .about-col-yellow .about-num,
    .about-col-pink .about-num {
        height: clamp(230px, 82vw, 300px);
        bottom: -12px;
        left: clamp(-58px, -16vw, -40px);
    }

    .about-col-cyan .about-num {
        height: clamp(230px, 82vw, 300px);
        top: -28px;
        left: clamp(-70px, -20vw, -48px);
    }
}

@media (max-width: 320px) {
    .about-section {
        margin-top: 36px;
        padding: 0 10px;
    }

    .about-col {
        min-height: 520px;
        padding: 16px 12px 14px;
    }

    .about-heading {
        max-width: 100%;
        font-size: clamp(20px, 6.4vw, 23px);
    }

    .about-text {
        max-width: 100%;
        font-size: 12px;
    }
}

/* ===== SIDEBAR SHRINK ON SCROLL ===== */

/* ===== BLOCK 3 — ЧТО МЫ СОЗДАЁМ ===== */
.create-section {
    position: relative;
    width: 100%;
    margin-top: 180px;
    padding: 0 32px;
    content-visibility: auto;
    contain-intrinsic-size: auto 1100px;
}

.create-inner {
    display: flex;
    gap: 40px;
    max-width: 1354px;
    width: 100%;
    min-height: 700px;
}

.create-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.create-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 140px;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 0.8;
    letter-spacing: -0.04em;
    margin: 0 0 32px 0;
    max-width: 608px;
}

.create-list {
    list-style: none;
    padding: 0;
    margin: 0 0 32px 0;
    width: 100%;
    max-width: 772px;
    min-height: 217px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.create-list li {
    font-family: 'Geist', 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 300;
    color: #FFFFFF;
    line-height: 1.3;
    text-transform: uppercase;
    padding-left: 24px;
    position: relative;
}

.create-list li::before {
    content: '\2022';
    position: absolute;
    left: 0;
    color: #FFFFFF;
}

.create-list li:first-child::before {
    content: '\2022';
}

.create-bars {
    display: flex;
    gap: 0;
    margin-bottom: 32px;
}

.create-bars .bar-yellow {
    width: 354px;
    height: 16px;
    background: #F9F91B;
}

.create-bars .bar-cyan {
    width: 284px;
    height: 16px;
    background: #06F8A7;
}

.create-bars .bar-magenta {
    width: 120px;
    height: 16px;
    background: #FE34F1;
}

.create-quote {
    margin-bottom: 32px;
}

.create-quote .quote-marks {
    display: flex;
    gap: 16px;
    margin-bottom: 14px;
}

.create-quote-main {
    font-family: 'Geist', 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 300;
    color: #FFFFFF;
    line-height: 1.3;
    text-transform: uppercase;
    margin: 0 0 12px 0;
    max-width: 755px;
}

.create-quote-sub {
    font-family: 'Geist', 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 300;
    color: #929292;
    line-height: 1.3;
    margin: 0;
    max-width: 755px;
}

.create-cta {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-top: 8px;
}

.create-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 323px;
    height: 51px;
    padding: 10px;
    background: #F9F91B;
    color: #000000;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 20px;
    font-weight: 800;
    border: none;
    border-radius: 8px 0 0 8px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    gap: 10px;
    position: relative;
    overflow: hidden;
    transition: background 0.3s ease;
    z-index: 1;
}

.create-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../images/background-main.webp') no-repeat center;
    background-size: 100% 100%;
    opacity: 0;
    mix-blend-mode: difference;
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.3s ease;
}

.create-btn:hover {
    background: #F9F91B;
}

.create-btn:hover::before {
    opacity: 0.38;
}

.create-stripes {
    flex: 1;
    max-width: 411px;
    height: 51px;
    position: relative;
    overflow: hidden;
}

.create-stripes::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 300%;
    height: 100%;
    background: repeating-linear-gradient(
        55deg,
        #888888 0px,
        #888888 16px,
        #555555 16.5px,
        #000000 17px,
        #000000 27px,
        #555555 27.5px,
        #888888 28px
    );
    animation: stripes-slide 8s linear infinite;
    will-change: transform;
}

/* Right column: 3 stacked cards */
.create-right {
    width: 518px;
    min-width: 518px;
    height: 962px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 20px;
}

.create-card {
    width: 100%;
    flex: 1;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    contain: layout style;
}

.create-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    opacity: 0.3;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 2;
}

.create-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(100%);
}

/* ===== BLOCK 4 — КОМАНДА ===== */
.team-section {
    position: relative;
    width: 100%;
    margin-top: 180px;
    padding: 0 32px;
    content-visibility: auto;
    contain-intrinsic-size: auto 800px;
}

.team-section::before {
    content: none;
}

.team-inner {
    max-width: 1354px;
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

.team-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 140px;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 0.8;
    letter-spacing: -0.04em;
    margin: 0 0 48px 0;
}

.team-quote {
    margin-bottom: 56px;
}

.team-quote .quote-marks {
    display: flex;
    gap: 16px;
    margin-bottom: 18px;
}

.team-quote-main {
    font-family: 'Geist', 'Inter', sans-serif;
    font-size: 28px;
    font-weight: 300;
    color: #FFFFFF;
    line-height: 1.4;
    text-transform: uppercase;
    margin: 0 0 16px 0;
    max-width: 755px;
}

.team-quote-sub {
    font-family: 'Geist', 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 300;
    color: #929292;
    line-height: 1.5;
    margin: 0 0 14px 0;
    max-width: 650px;
}

.team-quote-cta {
    font-family: 'Geist', 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 1.4;
    margin: 0;
}

/* Team avatars row */
.team-avatars {
    display: flex;
    width: 100%;
    max-width: 1354px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.team-avatar {
    width: 210px;
    height: 206px;
    border-radius: 1000px;
    overflow: hidden;
    flex-shrink: 0;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    cursor: default;
    will-change: transform;
    contain: layout style;
}

.team-avatar:hover {
    transform: scale(1.08) translateY(-6px);
    box-shadow: 0 12px 40px rgba(249, 249, 27, 0.15);
}

.team-avatar:not(.team-avatar-arrow) img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.4s ease;
}

.team-avatar:not(.team-avatar-arrow):hover img {
    filter: brightness(1.15) contrast(1.05);
}

/* Центральный аватар крупнее */
.team-avatar-lg {
    width: 210px;
    height: 206px;
}

/* Жёлтый круг — CTA кнопка */
.team-avatar-arrow {
    width: 210px;
    height: 206px;
    background: #F9F91B;
    border-radius: 1000px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.team-avatar-arrow:hover {
    transform: scale(1.12) translateY(-8px);
    box-shadow: 0 12px 50px rgba(249, 249, 27, 0.4);
}

.team-arrow-img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.team-avatar-arrow:hover .team-arrow-img {
    transform: translate(4px, 4px);
}

/* Team buttons */
.team-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 20px;
}

.team-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    color: #000000;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 18px;
    font-weight: 800;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    transition: none;
    z-index: 1;
}

.team-btn-yellow:hover,
.team-btn-yellow:focus-visible,
.team-btn-yellow:active {
    background:
        linear-gradient(rgba(249, 249, 27, 0.74), rgba(249, 249, 27, 0.74)),
        url('../images/background-main.webp') repeat center;
    background-size: auto, 240px auto;
}

.team-btn-cyan:hover,
.team-btn-cyan:focus-visible,
.team-btn-cyan:active {
    background:
        linear-gradient(rgba(6, 248, 167, 0.74), rgba(6, 248, 167, 0.74)),
        url('../images/background-main.webp') repeat center;
    background-size: auto, 240px auto;
}

.team-btn-pink:hover,
.team-btn-pink:focus-visible,
.team-btn-pink:active {
    background:
        linear-gradient(rgba(254, 52, 241, 0.74), rgba(254, 52, 241, 0.74)),
        url('../images/background-main.webp') repeat center;
    background-size: auto, 240px auto;
}

.team-btn:focus-visible {
    outline: 2px solid #000000;
    outline-offset: 2px;
}

.team-btn-yellow {
    background: #F9F91B;
}

.team-btn-cyan {
    background: #06F8A7;
}

.team-btn-pink {
    background: #FE34F1;
}

/* Deco lines */
.team-deco-line {
    width: 100%;
    max-width: 598px;
    height: 6px;
    border: 1px solid #FFFFFF;
    box-sizing: border-box;
}

.team-deco-line-2 {
    width: 100%;
    max-width: 850px;
    margin-top: 12px;
}

/* ===== FOOTER ===== */
.footer {
    max-width: 1510px;
    width: 100%;
    height: 150px;
    background: #F9F91B;
    margin-top: 40px;
    border-radius: 14px;
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 40px;
    margin-left: auto;
    margin-right: auto;
    content-visibility: auto;
    contain-intrinsic-size: auto 150px;
}

.footer::before {
    content: '';
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(249, 249, 27, 0.3) 50%, transparent 100%);
}

.footer-inner {
    max-width: 1354px;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
}

.footer-left {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-logo-text {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 63px;
    font-weight: 800;
    color: #000000;
    letter-spacing: -0.06em;
    line-height: 0.8;
}

.footer-logo-circle {
    width: 60px;
    height: 60px;
    background: #000000;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-logo-img {
    width: 85%;
    height: 85%;
    object-fit: contain;
}

.footer-desc {
    font-family: 'Geist', 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #000000;
    line-height: 1.4;
    margin: 0;
}

.footer-center {
    display: flex;
    align-items: flex-start;
}

.footer-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.footer-link {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 36px;
    font-weight: 800;
    color: #000000;
    text-decoration: none;
    letter-spacing: -0.06em;
    line-height: 0.8;
    transition: color 0.2s ease;
}

.footer-link-active {
    color: #E88ACD;
}

.footer-link:hover {
    color: #E88ACD;
}

.footer-right {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
}

.footer-social {
    font-family: 'Geist', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #000000;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-social-active {
    color: #E88ACD;
}

.footer-social:hover {
    color: #E88ACD;
}

.footer-arrow {
    font-size: 14px;
}

.footer-email {
    font-family: 'Geist', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #000000;
    text-decoration: none;
    margin-top: 4px;
}

.footer-email:hover {
    color: #E88ACD;
}

/* ===== SIDEBAR SHRINK ON SCROLL ===== */
.sidebar {
    transition: width 0.6s cubic-bezier(0.77, 0, 0.175, 1),
                transform 0.55s cubic-bezier(0.77, 0, 0.175, 1);
}

body.sidebar-shrunk .sidebar {
    width: 314px;
}

body.sidebar-shrunk .sidebar-top {
    left: 229px;
    top: 32px;
    transition: left 0.5s ease, top 0.5s ease;
}

body.sidebar-shrunk .menu-open-btn {
    width: 76px;
    height: 76px;
    transition: transform 0.5s ease, width 0.5s ease, height 0.5s ease;
}

body.sidebar-shrunk .sidebar-center {
    left: auto;
    right: 14px;
    top: auto;
    bottom: 360px;
    transition: left 0.5s ease, right 0.5s ease, top 0.5s ease, bottom 0.5s ease;
}

body.sidebar-shrunk .logo-circle {
    width: 60px;
    height: 60px;
    transition: width 0.5s ease, height 0.5s ease;
}

body.sidebar-shrunk .sidebar-text {
    font-size: 63px;
    right: 15px;
    bottom: -1px;
    height: auto;
    letter-spacing: -0.06em;
    line-height: 0.8;
    transition: font-size 0.5s ease, right 0.5s ease, bottom 0.5s ease, letter-spacing 0.5s ease, opacity 0.3s ease;
}

body.sidebar-shrunk .main-scroll {
    margin-left: 314px;
    transition: margin-left 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}

.main-scroll {
    transition: margin-left 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}

/* ===== SIDEBAR SHRINK — RESPONSIVE OVERRIDES ===== */
@media (max-width: 1800px) {
    body.sidebar-shrunk .main-scroll { margin-left: 314px; }
    body.sidebar-shrunk .sidebar-top { left: 225px; top: 32px; }
    body.sidebar-shrunk .sidebar-center { left: auto; right: 14px; top: auto; bottom: 340px; }
    body.sidebar-shrunk .logo-circle { width: 56px; height: 56px; }
    body.sidebar-shrunk .sidebar-text { font-size: 60px; right: 14px; }
}

@media (max-width: 1600px) {
    body.sidebar-shrunk .main-scroll { margin-left: 314px; }
    body.sidebar-shrunk .sidebar-top { left: 220px; top: 32px; }
    body.sidebar-shrunk .sidebar-center { left: auto; right: 14px; top: auto; bottom: 320px; }
    body.sidebar-shrunk .logo-circle { width: 54px; height: 54px; }
    body.sidebar-shrunk .sidebar-text { font-size: 58px; right: 14px; }
}

@media (max-width: 1440px) {
    body.sidebar-shrunk .sidebar { width: 280px; }
    body.sidebar-shrunk .sidebar-top { left: 190px; top: 28px; }
    body.sidebar-shrunk .menu-open-btn { width: 66px; height: 66px; }
    body.sidebar-shrunk .sidebar-center { left: auto; right: 12px; top: auto; bottom: 290px; }
    body.sidebar-shrunk .logo-circle { width: 52px; height: 52px; }
    body.sidebar-shrunk .sidebar-text { font-size: 52px; right: 12px; }
    body.sidebar-shrunk .main-scroll { margin-left: 280px; }
}

@media (max-width: 1280px) {
    body.sidebar-shrunk .sidebar { width: 220px; }
    body.sidebar-shrunk .sidebar-top { left: 140px; top: 24px; }
    body.sidebar-shrunk .menu-open-btn { width: 60px; height: 60px; }
    body.sidebar-shrunk .sidebar-center { left: auto; right: 10px; top: auto; bottom: 250px; }
    body.sidebar-shrunk .logo-circle { width: 50px; height: 50px; }
    body.sidebar-shrunk .sidebar-text { font-size: 44px; right: 10px; }
    body.sidebar-shrunk .main-scroll { margin-left: 220px; }
}

@media (max-width: 1024px) {
    body.sidebar-shrunk .sidebar { width: 80px; }
    body.sidebar-shrunk .sidebar-top { left: 8px; top: 14px; }
    body.sidebar-shrunk .menu-open-btn { width: 56px; height: 56px; }
    body.sidebar-shrunk .sidebar-center { left: auto; right: 8px; top: 90px; }
    body.sidebar-shrunk .logo-circle { width: 52px; height: 52px; }
    body.sidebar-shrunk .sidebar-text { font-size: 22px; right: 14px; }
    body.sidebar-shrunk .main-scroll { margin-left: 80px; }
}

/* ===== FINAL MOBILE OVERRIDES FOR MAIN PAGE BLOCKS (3, 4) ===== */
@media (max-width: 1024px) {
    .create-section { margin-top: 60px; padding: 0 28px; overflow-x: hidden; }
    .create-inner { flex-direction: column; max-width: 100%; gap: 28px; min-height: unset; }
    .create-title { font-size: 44px; max-width: 100%; }
    .create-list { min-height: unset; max-width: 100%; }
    .create-list li { font-size: 15px; }
    .create-quote-main { font-size: 16px; max-width: 100%; }
    .create-quote-sub { font-size: 13px; max-width: 100%; }
    .create-right { width: 100%; min-width: unset; height: auto; flex-direction: column; gap: 10px; }
    .create-card { width: 100%; aspect-ratio: 16/10; height: auto; border-radius: 12px; flex: none; }
    .create-cta { width: 100%; overflow: hidden; }
    .create-stripes { display: none; }
    .create-btn { width: 100%; border-radius: 8px; font-size: 15px; height: 42px; }

    .team-section { margin-top: 60px; padding: 0 28px; }
    .team-inner { max-width: 100%; }
    .team-title { font-size: 60px; margin-bottom: 24px; }
    .team-quote-main { font-size: 18px; }
    .team-quote-sub { font-size: 14px; }
    .team-quote-cta { font-size: 14px; }
    .team-avatars { flex-wrap: wrap; gap: 12px; justify-content: center; }
    .team-avatar,
    .team-avatar-lg,
    .team-avatar-arrow { width: 100px; height: 98px; }
    .team-buttons { flex-wrap: wrap; gap: 8px; }
}

@media (max-width: 768px) {
    .create-section { margin-top: 48px; padding: 0 20px; overflow-x: hidden; }
    .create-inner { flex-direction: column; gap: 24px; max-width: 100%; min-height: unset; }
    .create-title {
        width: 252px;
        height: 92px;
        max-width: 100%;
        font-size: 58px;
        line-height: 0.8;
        letter-spacing: -0.04em;
    }
    .create-list {
        width: 288px;
        max-width: 100%;
        min-height: 299px;
        height: auto;
    }
    .create-list li {
        font-family: 'Geist', 'Inter', sans-serif;
        font-size: 18px;
        font-weight: 300;
        line-height: 1.3;
        letter-spacing: 0;
        text-transform: uppercase;
        color: #FFFFFF;
    }
    .create-quote-main {
        width: 288px;
        max-width: 100%;
        min-height: 46px;
        height: auto;
        font-family: 'Geist', 'Inter', sans-serif;
        font-size: 18px;
        font-weight: 300;
        line-height: 1.3;
        letter-spacing: 0;
        text-transform: uppercase;
        color: #FFFFFF;
    }
    .create-quote-sub {
        width: 288px;
        max-width: 100%;
        min-height: 147px;
        height: auto;
        font-family: 'Geist', 'Inter', sans-serif;
        font-size: 16px;
        font-weight: 300;
        line-height: 1.3;
        letter-spacing: 0;
        color: #929292;
    }
    .create-right { width: 100%; min-width: unset; height: auto; flex-direction: column; gap: 8px; }
    .create-card { width: 100%; aspect-ratio: 16/10; height: auto; border-radius: 12px; flex: none; }
    .create-cta { width: 100%; overflow: hidden; }
    .create-stripes { display: none; }
    .create-btn { width: 100%; border-radius: 8px; font-size: 16px; height: 50px; }

    .team-section { margin-top: 48px; padding: 0 20px; }
    .team-inner {
        width: 100%;
        max-width: 100%;
        margin: 0;
        --team-mobile-content-width: 288px;
    }
    .team-title {
        width: 265px;
        height: 46px;
        max-width: 100%;
        font-family: 'Bricolage Grotesque', sans-serif;
        font-size: 58px;
        font-weight: 800;
        line-height: 0.8;
        letter-spacing: -0.04em;
        color: #FFFFFF;
        margin-bottom: 14px;
    }
    .team-quote {
        width: var(--team-mobile-content-width);
        max-width: 100%;
        margin-bottom: 22px;
    }
    .team-quote .quote-marks { gap: 10px; margin-bottom: 10px; }
    .team-quote-main {
        width: var(--team-mobile-content-width);
        max-width: 100%;
        min-height: 46px;
        height: auto;
        font-family: 'Geist', 'Inter', sans-serif;
        font-size: 18px;
        font-weight: 300;
        line-height: 1.3;
        letter-spacing: 0;
        text-transform: uppercase;
        color: #FFFFFF;
        margin-bottom: 10px;
    }
    .team-quote-sub {
        width: var(--team-mobile-content-width);
        max-width: 100%;
        min-height: 0;
        height: auto;
        font-family: 'Geist', 'Inter', sans-serif;
        font-size: 16px;
        font-weight: 300;
        line-height: 1.3;
        letter-spacing: 0;
        color: #929292;
        margin-bottom: 4px;
    }
    .team-quote-cta {
        width: var(--team-mobile-content-width);
        max-width: 100%;
        min-height: 46px;
        height: auto;
        font-family: 'Geist', 'Inter', sans-serif;
        font-size: 16px;
        font-weight: 300;
        line-height: 1.3;
        letter-spacing: 0;
        color: #929292;
        margin: 0;
    }
    .team-avatars {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 14px;
        margin-bottom: 18px;
    }
    .team-avatar,
    .team-avatar-lg {
        width: 159px;
        height: 156px;
        border-radius: 1000px;
    }
    .team-avatar-arrow {
        width: 159px;
        height: 156px;
        position: relative;
        border-radius: 1000px;
        background: #F9F91B;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .team-arrow-img {
        width: 48px;
        height: 48px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin: 0;
        transform: translate(-50%, -50%);
    }
    .team-avatar-arrow:hover .team-arrow-img {
        transform: translate(-50%, -50%);
    }
    .team-buttons {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        width: 100%;
        max-width: none;
        margin-bottom: 14px;
    }
    .team-btn {
        width: 100%;
        height: 51px;
        min-height: 51px;
        padding: 10px;
        gap: 10px;
        font-size: 16px;
        border-radius: 8px;
    }
    .team-deco-line,
    .team-deco-line-2 {
        width: 100%;
        height: 6px;
        border: 1px solid #FFFFFF;
        background: transparent;
        box-sizing: border-box;
    }
    .team-deco-line {
        max-width: 70%;
    }
    .team-deco-line-2 {
        max-width: 100%;
        margin-top: 8px;
    }

    .footer {
        width: 100%;
        max-width: 100%;
        height: auto;
        margin-top: 48px;
        padding: 28px 24px 24px;
        border-radius: 18px;
    }
    .footer-inner {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }
    .footer-left { gap: 16px; }
    .footer-brand {
        display: flex;
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 14px;
    }
    .footer-logo-circle {
        width: 84px;
        height: 84px;
    }
    .footer-logo-text {
        max-width: 288px;
        font-size: clamp(68px, 14vw, 96px);
        line-height: 0.82;
        letter-spacing: -0.04em;
    }
    .footer-desc {
        max-width: 288px;
        font-size: 17px;
        line-height: 1.22;
    }
    .footer-center { width: 100%; }
    .footer-nav { gap: 10px; }
    .footer-link {
        font-size: clamp(58px, 12vw, 82px);
        line-height: 0.84;
        letter-spacing: -0.04em;
    }
    .footer-right {
        width: 100%;
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 18px;
        row-gap: 12px;
        align-items: start;
    }
    .footer-social {
        grid-column: 1;
        justify-self: start;
        font-size: 16px;
        line-height: 1.25;
        white-space: nowrap;
    }
    .footer-arrow { font-size: 16px; }
    .footer-email {
        grid-column: 2;
        grid-row: 1 / span 3;
        justify-self: start;
        align-self: start;
        margin-top: 0;
        max-width: 168px;
        font-size: 16px;
        line-height: 1.2;
        word-break: break-word;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 640px) {
    .create-section { margin-top: 40px; padding: 0 16px; overflow-x: hidden; }
    .create-card { border-radius: 10px; }
    .create-stripes { display: none; }
    .create-btn { width: 100%; border-radius: 8px; font-size: 15px; height: 46px; }

    .team-section { margin-top: 40px; padding: 0 16px; }
    .team-inner { max-width: 100%; }
    .team-title { margin-bottom: 12px; }
    .team-arrow-img { width: 46px; height: 46px; }

    .footer {
        margin-top: 42px;
        padding: 24px 20px 20px;
        border-radius: 16px;
    }
    .footer-logo-circle { width: 78px; height: 78px; }
    .footer-logo-text { font-size: clamp(62px, 13vw, 88px); }
    .footer-desc { font-size: 16px; }
    .footer-link { font-size: clamp(52px, 11.5vw, 72px); }
    .footer-email { max-width: 156px; font-size: 15px; }
}

@media (max-width: 480px) {
    .create-section { padding: 0 14px; overflow-x: hidden; }
    .create-card { border-radius: 10px; }
    .create-stripes { display: none; }
    .create-btn { width: 100%; border-radius: 8px; font-size: 14px; height: 44px; }

    .team-section { padding: 0 14px; }
    .team-inner { max-width: 100%; }
    .team-arrow-img { width: 44px; height: 44px; }

    .footer {
        padding: 20px 16px 18px;
        border-radius: 14px;
    }
    .footer-logo-circle { width: 72px; height: 72px; }
    .footer-logo-text { font-size: clamp(54px, 12vw, 76px); max-width: 252px; }
    .footer-desc { font-size: 15px; max-width: 252px; }
    .footer-link { font-size: clamp(46px, 11vw, 62px); }
    .footer-right { column-gap: 14px; row-gap: 10px; }
    .footer-social { font-size: 14px; }
    .footer-email { max-width: 140px; font-size: 14px; }
}

@media (max-width: 375px) {
    .create-section { padding: 0 12px; margin-top: 36px; overflow-x: hidden; }
    .create-card { border-radius: 8px; }
    .create-stripes { display: none; }
    .create-btn { width: 100%; border-radius: 8px; font-size: 13px; height: 42px; }

    .team-section { padding: 0 12px; margin-top: 36px; }
    .team-inner { max-width: 100%; }
    .team-title { margin-bottom: 14px; }
    .team-arrow-img { width: 42px; height: 42px; }

    .footer {
        padding: 18px 14px 16px;
        border-radius: 12px;
    }
    .footer-logo-circle { width: 66px; height: 66px; }
    .footer-logo-text { font-size: clamp(48px, 11vw, 66px); max-width: 224px; }
    .footer-desc { font-size: 14px; max-width: 224px; }
    .footer-link { font-size: clamp(40px, 10.5vw, 54px); }
    .footer-social { font-size: 13px; }
    .footer-email { max-width: 126px; font-size: 13px; }
}

@media (max-width: 320px) {
    .create-section { padding: 0 10px; margin-top: 32px; overflow-x: hidden; }
    .create-card { border-radius: 8px; }
    .create-stripes { display: none; }
    .create-btn { width: 100%; border-radius: 8px; font-size: 12px; height: 40px; }

    .team-section { padding: 0 10px; margin-top: 32px; }
    .team-inner { max-width: 100%; }
    .team-arrow-img { width: 40px; height: 40px; }

    .footer {
        padding: 16px 12px 14px;
        border-radius: 10px;
    }
    .footer-logo-circle { width: 60px; height: 60px; }
    .footer-logo-text { font-size: clamp(42px, 10.5vw, 58px); max-width: 200px; }
    .footer-desc { font-size: 13px; max-width: 200px; }
    .footer-link { font-size: clamp(34px, 10vw, 46px); }
    .footer-social { font-size: 12px; }
    .footer-email { max-width: 110px; font-size: 12px; }
}

/* Final mobile footer card size/alignment */
@media (max-width: 768px) {
    .footer {
        width: min(344px, calc(100% - 20px));
        max-width: 344px;
        min-height: 586px;
        margin-left: auto;
        margin-right: auto;
        border-radius: 14px;
    }
}

/* Final mobile projects cards size */
@media (max-width: 768px) {
    .proj-section {
        padding: 0 16px;
        padding-top: 94px;
    }

    .proj-title {
        width: 288px;
        max-width: 100%;
        min-height: 46px;
        font-family: 'Bricolage Grotesque', sans-serif;
        font-size: 58px;
        font-weight: 800;
        line-height: 0.8;
        letter-spacing: -0.04em;
        color: #FFFFFF;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 28px;
        text-align: center;
    }

    .proj-grid {
        justify-items: center;
    }

    .proj-card {
        width: min(300px, 100%);
        max-width: 300px;
        height: 250px;
        min-height: 250px;
        border-radius: 14px;
    }

    .proj-card::before {
        border-radius: 14px;
    }

    .proj-card-name {
        width: 248px;
        max-width: 100%;
        min-height: 36px;
        font-family: 'Bricolage Grotesque', sans-serif;
        font-size: 36px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: -0.04em;
        color: #000000;
    }

    .proj-card-desc {
        width: 257px;
        max-width: 100%;
        min-height: 63px;
        font-family: 'Geist', 'Inter', sans-serif;
        font-size: 16px;
        font-weight: 300;
        line-height: 1.3;
        letter-spacing: 0;
        color: #000000;
    }

    .proj-card-arrow {
        top: 162px;
        left: 200px;
        right: auto;
        bottom: auto;
        width: 68px;
        height: 68px;
    }

    .proj-arrow-img {
        width: 68px;
        height: 68px;
    }
}

/* ===== RESPONSIVE — LARGE DESKTOP / ULTRAWIDE ===== */
@media (min-width: 1921px) {
    .hero,
    .about-section,
    .create-section,
    .team-section,
    .proj-section {
        padding-left: 40px;
        padding-right: 40px;
    }

    .hero-inner,
    .about-cols,
    .create-inner,
    .team-inner,
    .proj-inner,
    .proj-grid,
    .proj-stripes-bar,
    .footer-inner {
        max-width: 1560px;
        margin-left: auto;
        margin-right: auto;
    }

    .team-avatars {
        max-width: 1500px;
        margin-left: auto;
        margin-right: auto;
    }

    .footer {
        max-width: 1760px;
    }

    .menu-content { max-width: none; }
}

@media (min-width: 2560px) {
    .hero,
    .about-section,
    .create-section,
    .team-section,
    .proj-section {
        padding-left: 56px;
        padding-right: 56px;
    }

    .hero-inner,
    .about-cols,
    .create-inner,
    .team-inner,
    .proj-inner,
    .proj-grid,
    .proj-stripes-bar,
    .footer-inner {
        max-width: 1720px;
    }

    .team-avatars {
        max-width: 1560px;
    }

    .footer {
        max-width: 1920px;
    }

    .title-text {
        font-size: 286px;
        letter-spacing: -17px;
    }
}