/* =============================================
       HOMEPAGE — LENIS-STYLE OVERRIDES
       Pinned sections, horizontal scroll, clip reveals
       ============================================= */

    /* --- Scroll Progress --- */
    .scroll-progress {
        position: fixed; top: 0; left: 0;
        width: 100%; height: 3px;
        z-index: 10001; pointer-events: none;
    }
    .scroll-progress-bar {
        width: 100%; height: 100%;
        background: var(--accent);
        transform-origin: left;
        transform: scaleX(0);
    }

    /* --- Hero Fullscreen --- */
    .hero-full {
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: relative;
        overflow: hidden;
    }

    .hero-full-bg {
        position: absolute; inset: 0;
    }

    .hero-full-grid {
        position: absolute; inset: -30%;
        background-image:
            linear-gradient(var(--border-color) 1px, transparent 1px),
            linear-gradient(90deg, var(--border-color) 1px, transparent 1px);
        background-size: 80px 80px;
        opacity: 0.3;
    }

    .hero-full-glow {
        position: absolute;
        width: 800px; height: 800px;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        background: radial-gradient(circle, var(--glow) 0%, transparent 60%);
        filter: blur(60px);
    }

    .hero-full-orb {
        position: absolute;
        border-radius: 50%;
        filter: blur(100px);
    }
    .hero-full-orb-1 {
        width: 400px; height: 400px;
        top: 15%; right: 10%;
        background: var(--accent); opacity: 0.08;
    }
    .hero-full-orb-2 {
        width: 300px; height: 300px;
        bottom: 20%; left: 8%;
        background: var(--text-primary); opacity: 0.03;
    }

    .hero-full-content {
        position: relative; z-index: 2;
        max-width: 1000px;
        padding: 0 var(--container-padding);
    }

    /* Hero PHP tag markers — code chips above/below title */
    .hero-code-tag {
        font-family: var(--font-mono);
        font-size: clamp(11px, 1vw, 13px);
        letter-spacing: 0.02em;
        color: var(--text-tertiary);
        margin-bottom: 28px;
        opacity: 0.8;
    }
    .hero-code-tag .k { color: var(--accent); font-weight: 600; }
    .hero-code-tag .n { color: var(--text-primary); font-weight: 600; }
    .hero-code-tag-end {
        margin-top: 40px;
        margin-bottom: 0;
    }

    .hero-full-label {
        font-family: var(--font-mono);
        font-size: 12px;
        letter-spacing: 0.25em;
        text-transform: uppercase;
        color: var(--text-tertiary);
        margin-bottom: 40px;
        opacity: 0;
    }

    .hero-full-title {
        font-family: var(--font-display);
        font-size: clamp(52px, 9vw, 140px);
        font-weight: 900;
        line-height: 0.9;
        letter-spacing: -0.05em;
        margin-bottom: 30px;
    }

    .hero-full-title .line {
        display: block; overflow: hidden;
        padding-bottom: 0.08em;
    }

    .hero-full-title .line-inner {
        display: block; transform: translateY(110%);
        will-change: transform;
    }

    /* After split runs: line-inner is reset, letters take over */
    .hero-full-title.split .line-inner { transform: none; }

    .hero-full-title .letter {
        display: inline-block;
        transform: translateY(110%);
        will-change: transform, opacity;
        opacity: 0;
    }

    .hero-full-title .serif {
        font-family: var(--font-serif);
        font-weight: 400; font-style: italic;
    }

    .hero-full-subtitle {
        font-size: clamp(16px, 2vw, 22px);
        color: var(--text-secondary);
        line-height: 1.6;
        max-width: 550px;
        margin: 0 auto 50px;
        font-weight: 300;
        opacity: 0;
    }

    .hero-full-cta {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        opacity: 0;
    }

    .hero-full-scroll {
        position: absolute;
        bottom: 40px; left: 50%;
        transform: translateX(-50%);
        display: flex; flex-direction: column;
        align-items: center; gap: 12px;
    }

    .hero-full-scroll-line {
        width: 1px; height: 80px;
        background: var(--border-color);
        position: relative; overflow: hidden;
    }
    .hero-full-scroll-line::after {
        content: '';
        position: absolute; top: -100%; left: 0;
        width: 100%; height: 40%;
        background: var(--text-primary);
        animation: scrollPulse 2s infinite;
    }
    @keyframes scrollPulse {
        0% { top: -40%; }
        100% { top: 100%; }
    }
    .hero-full-scroll-text {
        font-family: var(--font-mono);
        font-size: 10px;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--text-tertiary);
    }

    /* --- Intro Text (scroll-driven text reveal) --- */
    .intro-text-section {
        padding: 200px 0;
        position: relative;
    }

    .intro-text {
        font-family: var(--font-display);
        font-size: clamp(28px, 4vw, 56px);
        font-weight: 700;
        line-height: 1.4;
        letter-spacing: -0.02em;
        max-width: 1000px;
    }

    .intro-text .word {
        display: inline-block;
        opacity: 0.15;
        transition: opacity 0.1s;
    }

    .intro-text .word.active {
        opacity: 1;
    }

    .intro-text .serif {
        font-family: var(--font-serif);
        font-weight: 400; font-style: italic;
    }

    /* --- Services stack (CSS sticky stacking cards, no pin) ---
       Each item sticks at top:0. Later items cover earlier ones as user
       scrolls. GSAP adds scale+fade on the covered item for depth.
       Structure identical to showcase pattern — sticky, not pinned. */
    .services-stack {
        position: relative;
    }

    .services-stack-item {
        position: sticky;
        top: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        padding: 80px 0;
        overflow: hidden;
        will-change: transform;
    }

    /* Solid alternating backgrounds so the card being stacked on top
       fully covers the one beneath (no transparency bleed-through) */
    .services-stack-item:nth-child(odd)  { background: var(--bg-primary); }
    .services-stack-item:nth-child(even) { background: var(--bg-secondary); }

    /* Inner wrapper is what we animate (scale/fade), so the background
       on .services-stack-item stays full-size and keeps covering. */
    .services-stack-item .services-stack-inner,
    .services-stack-item .services-stack-number {
        will-change: transform, opacity;
    }

    .services-stack-number {
        position: absolute;
        top: 50%;
        right: 4%;
        transform: translateY(-50%);
        font-family: var(--font-display);
        font-size: clamp(180px, 24vw, 380px);
        font-weight: 900;
        letter-spacing: -0.06em;
        line-height: 0.9;
        opacity: 0.05;
        z-index: 0;
        pointer-events: none;
        will-change: transform;
    }

    .services-stack-inner {
        position: relative;
        z-index: 2;
        width: 100%;
        max-width: var(--container-width);
        margin: 0 auto;
        padding: 0 var(--container-padding);
        display: grid;
        grid-template-columns: 1.1fr 0.9fr;
        gap: 80px;
        align-items: center;
    }

    .services-stack-content { max-width: 560px; }

    .services-stack-label {
        font-family: var(--font-mono);
        font-size: 11px;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--text-tertiary);
        margin-bottom: 24px;
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }

    .services-stack-label::before {
        content: '//';
        color: var(--accent);
        font-weight: 700;
        letter-spacing: 0;
        font-size: 13px;
    }

    .services-stack-title {
        font-family: var(--font-display);
        font-size: clamp(44px, 6.5vw, 92px);
        font-weight: 900;
        line-height: 0.95;
        letter-spacing: -0.04em;
        margin-bottom: 28px;
    }

    .services-stack-title .serif {
        font-family: var(--font-serif);
        font-weight: 400;
        font-style: italic;
    }

    .services-stack-desc {
        font-size: clamp(15px, 1.2vw, 18px);
        color: var(--text-secondary);
        line-height: 1.75;
        font-weight: 300;
        margin-bottom: 32px;
    }

    .services-stack-tags {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 40px;
    }

    .services-stack-tag {
        font-family: var(--font-mono);
        font-size: 11px;
        letter-spacing: 0.08em;
        padding: 7px 16px;
        border: 1px solid var(--border-color);
        border-radius: 100px;
        color: var(--text-secondary);
        background: var(--bg-card);
    }

    .services-stack-visual {
        position: relative;
        aspect-ratio: 4/3;
        border-radius: 24px;
        border: 1px solid var(--border-color);
        background: var(--bg-tertiary);
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .services-stack-visual-grid {
        position: absolute; inset: 0;
        background-image:
            linear-gradient(var(--border-color) 1px, transparent 1px),
            linear-gradient(90deg, var(--border-color) 1px, transparent 1px);
        background-size: 40px 40px;
        opacity: 0.35;
        mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 70%);
    }

    .services-stack-visual-orb {
        position: absolute;
        width: 60%; height: 60%;
        border-radius: 50%;
        background: radial-gradient(circle, var(--accent-dim) 0%, transparent 65%);
        filter: blur(30px);
    }

    .services-stack-visual-icon {
        position: relative;
        z-index: 1;
        font-size: clamp(100px, 12vw, 180px);
        opacity: 0.35;
        color: var(--text-primary);
    }

    /* --- Stats strip --- */
    .stats-strip {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        border-top: 1px solid var(--border-color);
        border-bottom: 1px solid var(--border-color);
    }

    .stats-strip-item {
        padding: 60px 40px;
        text-align: center;
        border-right: 1px solid var(--border-color);
    }

    .stats-strip-item:last-child { border-right: none; }

    .stats-strip-number {
        font-family: var(--font-display);
        font-size: clamp(40px, 5vw, 64px);
        font-weight: 900;
        letter-spacing: -0.04em;
        line-height: 1;
    }

    .stats-strip-number .accent { color: var(--accent); }

    .stats-strip-label {
        font-size: 14px;
        color: var(--text-secondary);
        margin-top: 10px;
        font-weight: 300;
    }

    /* --- Process (vertical pinned reveal) --- */
    .process-pinned {
        position: relative;
        background: var(--bg-primary);
    }

    .process-pinned-left {
        position: sticky;
        top: 0;
        height: 100vh;
        display: flex;
        align-items: center;
    }

    .process-pinned-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
    }

    .process-pinned-right {
        padding: 0;
    }

    .process-pinned-step {
        min-height: 100vh;
        display: flex;
        align-items: center;
        padding: 60px var(--container-padding) 60px 60px;
    }

    .process-pinned-step-number {
        font-family: var(--font-display);
        font-size: 100px;
        font-weight: 900;
        letter-spacing: -0.05em;
        opacity: 0.06;
        line-height: 1;
        margin-bottom: 20px;
    }

    .process-pinned-step h3 {
        font-family: var(--font-display);
        font-size: clamp(28px, 3vw, 42px);
        font-weight: 900;
        margin-bottom: 16px;
        letter-spacing: -0.03em;
    }

    .process-pinned-step p {
        font-size: 17px;
        color: var(--text-secondary);
        line-height: 1.7;
        font-weight: 300;
        max-width: 440px;
    }

    /* --- Marquee v2 (bigger, velocity-driven) --- */
    .marquee-v2 {
        padding: 50px 0;
        border-top: 1px solid var(--border-color);
        border-bottom: 1px solid var(--border-color);
        overflow: hidden;
        background: var(--bg-secondary);
    }

    .marquee-v2-track {
        display: flex; gap: 80px;
        animation: marqueeV2 25s linear infinite;
        width: max-content;
    }

    .marquee-v2-item {
        font-family: var(--font-display);
        font-size: clamp(24px, 3vw, 42px);
        font-weight: 800;
        letter-spacing: -0.02em;
        white-space: nowrap;
        color: var(--text-tertiary);
        display: flex; align-items: center; gap: 30px;
    }

    .marquee-v2-item .dot {
        width: 10px; height: 10px;
        background: var(--accent);
        border-radius: 50%;
        flex-shrink: 0;
    }

    @keyframes marqueeV2 {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }

    /* --- CTA fullscreen --- */
    .cta-full {
        min-height: 80vh;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: relative;
        overflow: hidden;
        background: var(--bg-primary);
    }

    .cta-full-bg-line {
        position: absolute;
        background: var(--border-color);
    }
    .cta-full-bg-line-h {
        height: 1px; width: 100%;
        top: 50%; left: 0;
    }
    .cta-full-bg-line-v {
        width: 1px; height: 100%;
        left: 50%; top: 0;
    }

    .cta-full-content { position: relative; z-index: 2; }

    .cta-full-title {
        font-family: var(--font-display);
        font-size: clamp(42px, 7vw, 100px);
        font-weight: 900;
        line-height: 1;
        letter-spacing: -0.05em;
        margin-bottom: 30px;
    }

    .cta-full-title .serif {
        font-family: var(--font-serif);
        font-weight: 400; font-style: italic;
    }

    .cta-full-desc {
        font-size: 18px;
        color: var(--text-secondary);
        max-width: 480px;
        margin: 0 auto 40px;
        line-height: 1.7;
        font-weight: 300;
    }

    .cta-full-actions {
        display: flex; align-items: center; justify-content: center;
        gap: 16px;
    }

    /* --- Responsive overrides --- */
    @media (max-width: 1024px) {
        .services-stack-inner { grid-template-columns: 1fr; gap: 40px; }
        .services-stack-visual { display: none; }
        .services-stack-number { font-size: clamp(120px, 18vw, 220px); }
        /* Mobile/tablet: disable sticky stacking — just stacked sections */
        .services-stack-item {
            position: relative;
            top: auto;
            height: auto;
            min-height: auto;
            padding: 100px 0;
            border-bottom: 1px solid var(--border-color);
        }
        .services-stack-item:last-child { border-bottom: none; }
        .process-pinned-grid { grid-template-columns: 1fr; }
        .process-pinned-left { display: none; }
        .process-pinned-step { min-height: auto; padding: 60px var(--container-padding); }
        .stats-strip { grid-template-columns: repeat(2, 1fr); }
        .stats-strip-item { border-bottom: 1px solid var(--border-color); }
    }

    @media (max-width: 768px) {
        .services-stack-number { display: none; }
        .services-stack-title { font-size: clamp(36px, 9vw, 56px); }
        .services-stack-item { padding: 80px 0; }
        .stats-strip { grid-template-columns: 1fr; }
        .cta-full-actions { flex-direction: column; }
    }