/* ============================================================
   Final CTA — dark consultation banner
   ============================================================ */
.final-cta {
    position: relative;
    z-index: 10;
    margin-top: clamp(-82px, -6vw, -48px);
    padding: clamp(16px, 2vw, 26px) clamp(18px, 4vw, 58px) clamp(38px, 5vw, 58px);
    background: var(--beige);
    overflow: hidden;
}

.final-cta-card {
    position: relative;
    isolation: isolate;
    width: min(1180px, 100%);
    min-height: 285px;
    margin: 0 auto;
    padding: clamp(32px, 4vw, 48px);
    border: 1px solid rgba(237, 240, 218, 0.20);
    border-radius: clamp(24px, 2.5vw, 32px);
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
    gap: clamp(34px, 5vw, 70px);
    align-items: stretch;
    color: #ffffff;
    background:
        radial-gradient(circle at 86% 18%, rgba(237, 240, 218, 0.14), transparent 26%),
        radial-gradient(circle at 8% 100%, rgba(45, 212, 191, 0.15), transparent 32%),
        linear-gradient(128deg, var(--teal-dark) 0%, var(--teal) 55%, #002f2f 100%);
    box-shadow:
        0 32px 80px rgba(8, 29, 19, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.final-cta-grid {
    position: absolute;
    z-index: -2;
    inset: 0;
    opacity: 0.32;
    background-image: radial-gradient(circle, rgba(219, 235, 203, 0.28) 1px, transparent 1.2px);
    background-size: 24px 24px;
    mask-image: linear-gradient(90deg, #000, rgba(0, 0, 0, 0.72), transparent 92%);
    -webkit-mask-image: linear-gradient(90deg, #000, rgba(0, 0, 0, 0.72), transparent 92%);
}

.final-cta-orbit {
    position: absolute;
    z-index: -1;
    width: 430px;
    aspect-ratio: 1;
    border: 1px dashed rgba(202, 224, 181, 0.16);
    border-radius: 50%;
    pointer-events: none;
}

.final-cta-orbit-one {
    top: -260px;
    right: 13%;
}

.final-cta-orbit-two {
    right: -220px;
    bottom: -300px;
    width: 560px;
}

.final-cta-copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.final-cta-kicker {
    width: fit-content;
    margin-bottom: 14px;
    padding: 7px 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(220, 238, 203, 0.24);
    border-radius: 999px;
    color: rgba(241, 249, 233, 0.82);
    background: rgba(255, 255, 255, 0.055);
    font-family: var(--font-head);
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.final-cta-kicker-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--beige);
    box-shadow: 0 0 0 5px rgba(237, 240, 218, 0.10), 0 0 16px rgba(237, 240, 218, 0.45);
}

.final-cta-copy h2 {
    max-width: 650px;
    margin: 0;
    color: #ffffff;
    font-family: var(--font-head);
    font-size: clamp(1.8rem, 3.2vw, 2.85rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.015em;
}

.final-cta-copy h2 .cta-ws-regular {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-style: normal;
}

.final-cta-copy h2 .cta-ws-thin {
    font-family: 'Work Sans', sans-serif;
    font-weight: 100;
    font-style: normal;
}

.final-cta-text {
    max-width: 610px;
    margin: 14px 0 0;
    color: rgba(239, 246, 232, 0.69);
    font-size: clamp(0.9rem, 1.2vw, 1.04rem);
    line-height: 1.7;
}

.final-cta-benefits {
    margin-top: auto;
    padding-top: 28px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
}

.final-cta-benefits span {
    padding: 6px 11px 6px 8px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(220, 238, 203, 0.18);
    border-radius: 999px;
    color: rgba(244, 250, 239, 0.82);
    background: rgba(255, 255, 255, 0.06);
    font-size: 0.72rem;
    font-weight: 700;
}

.final-cta-benefits svg {
    width: 17px;
    height: 17px;
    padding: 2px;
    border-radius: 50%;
    color: var(--beige);
    background: rgba(237, 240, 218, 0.12);
}

.final-cta-side {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.final-cta-side-heading {
    margin: 0 0 18px;
    color: #ffffff;
    font-family: var(--font-head);
    font-size: clamp(1.15rem, 1.8vw, 1.45rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-align: left;
}

.final-cta-facts {
    position: relative;
    height: 92px;
    margin-bottom: 0;
    flex: 1 1 auto;
}

.final-cta-fact {
    position: absolute;
    min-width: 104px;
    padding: 10px 13px;
    border: 1px solid rgba(230, 241, 220, 0.20);
    border-radius: 15px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.045));
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.11);
    isolation: isolate;
    overflow: hidden;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    animation: finalCtaFloat 4.6s ease-in-out infinite;
}

.final-cta-fact::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.final-cta-fact strong,
.final-cta-fact span {
    position: relative;
    z-index: 1;
    display: block;
}

.final-cta-fact strong {
    color: #f7fbf2;
    font-family: var(--font-head);
    font-size: 1.06rem;
    line-height: 1;
}

.final-cta-fact span {
    margin-top: 4px;
    color: rgba(235, 244, 226, 0.56);
    font-size: 0.53rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.final-cta-fact-projects {
    top: -4px;
    right: 2%;
}

.final-cta-fact-time {
    top: 22px;
    left: 0;
    animation-delay: -1.4s;
}

.final-cta-fact-custom {
    right: 29%;
    bottom: -2px;
    animation-delay: -2.8s;
}

@keyframes finalCtaFloat {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-1deg); }
    50% { transform: translate3d(0, -8px, 0) rotate(1deg); }
}

.final-cta-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: stretch;
    margin-top: auto;
    padding-top: 28px;
}

.final-cta-primary,
.final-cta-secondary {
    box-sizing: border-box;
    width: 100%;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    padding: 0 14px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-head);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: capitalize;
    text-align: center;
    line-height: 1;
    white-space: nowrap;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.final-cta-primary {
    border: 1px solid transparent;
    color: #132519;
    background: #f7f8f1;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}

.final-cta-primary svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.final-cta-primary:hover {
    transform: translateY(-3px);
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

.final-cta-primary:hover svg {
    transform: translateX(4px);
}

.final-cta-secondary {
    border: 1px solid rgba(230, 241, 220, 0.28);
    color: rgba(247, 250, 243, 0.92);
    background: rgba(255, 255, 255, 0.045);
}

.final-cta-secondary > span {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--beige);
    background: rgba(237, 240, 218, 0.12);
}

.final-cta-secondary svg {
    width: 14px;
    height: 14px;
}

.final-cta-secondary:hover {
    transform: translateY(-3px);
    border-color: rgba(237, 240, 218, 0.40);
    background: rgba(237, 240, 218, 0.09);
}

@media (max-width: 760px) {
    .final-cta-card {
        grid-template-columns: 1fr;
        gap: 28px;
        align-items: start;
    }

    .final-cta-copy {
        text-align: center;
        min-height: 0;
    }

    .final-cta-kicker,
    .final-cta-text {
        margin-left: auto;
        margin-right: auto;
    }

    .final-cta-benefits {
        justify-content: center;
        margin-top: 18px;
        padding-top: 0;
    }

    .final-cta-side {
        width: min(520px, 100%);
        margin: 0 auto;
        min-height: 0;
    }

    .final-cta-facts {
        flex: none;
        margin-bottom: 16px;
    }

    .final-cta-actions {
        margin-top: 0;
        padding-top: 0;
    }
}

@media (max-width: 560px) {
    .final-cta {
        margin-top: -34px;
        padding: 12px 14px 36px;
    }

    .final-cta-card {
        min-height: 0;
        padding: 30px 20px 22px;
        border-radius: 26px;
    }

    .final-cta-copy h2 {
        font-size: clamp(1.75rem, 9vw, 2.35rem);
    }

    .final-cta-copy h2 br {
        display: none;
    }

    .final-cta-kicker {
        font-size: 0.57rem;
        letter-spacing: 0.05em;
    }

    .final-cta-benefits {
        gap: 6px;
    }

    .final-cta-benefits span {
        padding-right: 10px;
        font-size: 0.63rem;
    }

    .final-cta-facts {
        height: auto;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 7px;
    }

    .final-cta-fact {
        position: static;
        min-width: 0;
        padding: 12px 7px;
        text-align: center;
        animation: none;
    }

    .final-cta-fact strong {
        font-size: 1rem;
    }

    .final-cta-fact span {
        font-size: 0.48rem;
    }

    .final-cta-primary,
    .final-cta-secondary {
        height: 44px;
        min-height: 44px;
        max-height: 44px;
        padding: 0 8px;
        font-size: 0.62rem;
        gap: 5px;
        white-space: normal;
    }

    .final-cta-secondary > span {
        width: 22px;
        height: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .final-cta-fact {
        animation: none;
    }
}
/* ============================================================
   apps4growth — Global Stylesheet
   Colors: #005353 (dark teal) | #EDF0DA (beige) | #000 (text)
   ============================================================ */

:root {
    --teal: #005353;
    --teal-dark: #003d3d;
    --teal-light: #0a6b6b;
    --beige: #ffffff;
    --beige-soft: #fdffef;
    --black: #000000;
    --white: #ffffff;

    --font-head: 'Poppins', sans-serif;
    --font-body: 'Inter', sans-serif;

    --header-height: 80px;
    --header-height-scrolled: 64px;
    --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   FAQ Voyage — 3D scroll FAQ reveal (9th)
   Reward ke baad sticky scene: core rotate + progress fill,
   aur FAQ cards scroll ke saath one-by-one unlock.
   ============================================================ */

.faq-voyage {
    position: relative;
    /* Quest ke upar thoda overlap — CTA jaisa seamless pull-up.
       z-index sticky par hai (track par nahi) taaki reverse scroll
       par body.is-scroll-up ladder kaam kare. */
    margin-top: clamp(-48px, -4vw, -24px);
    height: 380vh;
    background: var(--beige);
}

.faq-voyage-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    /* Quest (7) se upar — warna pinned quest FAQ ko cover karke atka deta hai */
    z-index: 8;
    background:
        radial-gradient(ellipse at 22% 18%, rgba(10, 107, 107, 0.18), transparent 45%),
        radial-gradient(ellipse at 80% 74%, rgba(251, 191, 36, 0.16), transparent 45%),
        linear-gradient(180deg, #f6f8ea 0%, #eef2db 52%, #f6f8ea 100%);
}

.faq-voyage-zoom {
    position: absolute;
    inset: 0;
    transform: scale(1.14);
    transform-origin: 50% 50%;
    will-change: transform, filter;
}

.faq-voyage-fade {
    position: absolute;
    inset: 0;
    background: var(--beige);
    opacity: 1;
    pointer-events: none;
    z-index: 10;
}

.faq-voyage-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(94, 234, 212, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(94, 234, 212, 0.05) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(circle at 50% 52%, #000 22%, transparent 70%);
    -webkit-mask-image: radial-gradient(circle at 50% 52%, #000 22%, transparent 70%);
    opacity: 0.65;
}

.faq-voyage-glow {
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(circle at 50% 40%, rgba(45, 212, 191, 0.16), transparent 35%),
        radial-gradient(circle at 28% 72%, rgba(251, 191, 36, 0.08), transparent 35%);
    filter: blur(6px);
    animation: faqVoyageGlow 11s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes faqVoyageGlow {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(2%, -3%) scale(1.06); }
}

.faq-voyage-stage {
    position: relative;
    z-index: 2;
    width: min(1100px, 94vw);
    height: 100%;
    margin: 0 auto;
    padding: calc(var(--header-height-scrolled) + 16px) 12px 24px;
    display: grid;
    grid-template-columns: minmax(280px, 0.95fr) minmax(300px, 1.05fr);
    gap: clamp(20px, 2vw, 34px);
    align-items: center;
}

.faq-voyage-head {
    grid-column: 1 / -1;
    text-align: center;
    max-width: 760px;
    margin: 0 auto 4px;
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.faq-voyage-kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-head);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #5eead4;
    margin-bottom: 10px;
}

.faq-voyage-kicker span {
    width: 26px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #5eead4);
}

.faq-voyage-kicker span:last-child {
    background: linear-gradient(90deg, #5eead4, transparent);
}

.faq-voyage-head h2 {
    color: var(--teal);
    font-size: clamp(1.42rem, 2.9vw, 2.2rem);
    margin-bottom: 6px;
}

.faq-voyage-head h2 em {
    font-style: normal;
    color: #fbbf24;
}

.faq-voyage-head p {
    color: rgba(0, 0, 0, 0.62);
    font-size: 0.94rem;
}

.faq-voyage-progress {
    grid-column: 1 / -1;
    width: min(520px, 88vw);
    height: 8px;
    margin: 0 auto;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.14);
    overflow: hidden;
    border: 1px solid rgba(45, 212, 191, 0.24);
}

.faq-voyage-progress-fill {
    display: block;
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0a6b6b, #2dd4bf, #fbbf24);
    box-shadow: 0 0 16px rgba(45, 212, 191, 0.45);
}

.faq-voyage-core-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 900px;
}

.faq-voyage-core {
    position: relative;
    width: clamp(220px, 30vw, 340px);
    height: clamp(260px, 32vw, 360px);
    border-radius: 26px;
    transform-style: preserve-3d;
    background: radial-gradient(circle at 35% 28%, rgba(94, 234, 212, 0.34), rgba(0, 83, 83, 0.10) 40%, rgba(1, 16, 15, 0.06) 70%);
    border: 1px solid rgba(0, 83, 83, 0.18);
    box-shadow:
        inset 0 0 44px rgba(45, 212, 191, 0.15),
        0 24px 60px rgba(0, 0, 0, 0.10),
        0 0 60px rgba(45, 212, 191, 0.12);
    will-change: transform;
}

.faq-voyage-app-tiles {
    position: absolute;
    inset: 9% 10%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 10px;
    align-content: center;
    transform: translateZ(26px);
    transform-origin: center;
    will-change: transform;
}

.faq-voyage-app-tile {
    width: 100%;
    min-height: 0;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #ffffff, #f8fbef);
    border: 1px solid rgba(255, 255, 255, 0.65);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 5px 7px;
    transform-origin: center;
    will-change: transform;
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

.faq-voyage-app-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 26% 24%, rgba(255, 255, 255, 0.42), transparent 36%),
        linear-gradient(135deg, var(--tile-start), var(--tile-end));
    z-index: 0;
}

.faq-voyage-app-tile::after {
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02));
    z-index: 0;
}

.faq-voyage-app-tile svg {
    position: relative;
    z-index: 1;
    width: clamp(28px, 36%, 42px);
    height: auto;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.18));
}

.faq-voyage-app-label {
    position: relative;
    z-index: 1;
    max-width: 100%;
    color: #ffffff;
    font-size: clamp(0.58rem, 0.9vw, 0.72rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.02em;
    text-align: center;
    white-space: nowrap;
    text-shadow: 0 2px 7px rgba(0, 0, 0, 0.24);
}

.faq-voyage-app-tile:nth-child(1) {
    --tile-start: #22c55e;
    --tile-end: #14b8a6;
}

.faq-voyage-app-tile:nth-child(2) {
    --tile-start: #3b82f6;
    --tile-end: #8b5cf6;
}

.faq-voyage-app-tile:nth-child(3) {
    --tile-start: #f59e0b;
    --tile-end: #ef4444;
}

.faq-voyage-app-tile:nth-child(4) {
    --tile-start: #ec4899;
    --tile-end: #a855f7;
}

.faq-voyage-app-tile:nth-child(5) {
    --tile-start: #f59e0b;
    --tile-end: #f97316;
}

.faq-voyage-app-tile:nth-child(6) {
    --tile-start: #0f766e;
    --tile-end: #2563eb;
}

.faq-voyage-ring {
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    border: 1.5px dashed rgba(94, 234, 212, 0.45);
    animation: faqVoyageSpin 9s linear infinite;
}

.faq-voyage-ring-2 {
    inset: 25%;
    border-color: rgba(251, 191, 36, 0.55);
    animation-duration: 12s;
    animation-direction: reverse;
}

.faq-voyage-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20%;
    aspect-ratio: 1 / 1;
    margin: -10%;
    border-radius: 50%;
    background: radial-gradient(circle, #fde68a, #f59e0b);
    box-shadow:
        0 0 30px rgba(251, 191, 36, 0.6),
        inset 0 0 14px rgba(255, 255, 255, 0.4);
}

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

.faq-voyage-list {
    display: grid;
    gap: 12px;
}

.faq-voyage-item {
    position: relative;
    padding: 15px 16px 14px 56px;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(246, 248, 234, 0.96));
    border: 1px solid rgba(0, 83, 83, 0.16);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        0 10px 24px rgba(0, 0, 0, 0.10);
    opacity: 0.3;
    transform: translateY(22px) scale(0.96) rotateX(-8deg);
    transition: opacity 0.35s ease, transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.faq-voyage-item.is-active {
    opacity: 1;
    transform: translateY(0) scale(1) rotateX(0deg);
    border-color: rgba(251, 191, 36, 0.5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 14px 34px rgba(0, 0, 0, 0.14),
        0 0 24px rgba(45, 212, 191, 0.12);
}

.faq-voyage-item-ico {
    position: absolute;
    top: 14px;
    left: 15px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-head);
    color: var(--teal);
    background: rgba(10, 107, 107, 0.10);
    border: 1px solid rgba(0, 83, 83, 0.16);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.05);
}

.faq-voyage-item-ico svg {
    width: 18px;
    height: 18px;
}

.faq-voyage-item h3 {
    font-size: 0.92rem;
    color: var(--teal);
    margin-bottom: 4px;
}

.faq-voyage-item p {
    font-size: 0.8rem;
    line-height: 1.45;
    color: rgba(0, 0, 0, 0.62);
}

@media (max-width: 1023.98px) {
    .faq-voyage {
        height: 420vh;
    }

    .faq-voyage-stage {
        grid-template-columns: 1fr;
        gap: 14px;
        padding-top: calc(var(--header-height-scrolled) + 12px);
    }

    .faq-voyage-core-wrap {
        order: 1;
    }

    .faq-voyage-list {
        order: 2;
        width: min(640px, 92vw);
        margin: 0 auto;
    }

    .faq-voyage-item {
        padding-left: 52px;
    }
}

@media (max-width: 767.98px) {
    .faq-voyage {
        height: 450vh;
    }

    .faq-voyage-zoom {
        transform: scale(1.08);
    }

    .faq-voyage-head p {
        font-size: 0.86rem;
    }

    .faq-voyage-core {
        width: min(70vw, 280px);
    }

    .faq-voyage-item {
        padding: 13px 12px 12px 48px;
        border-radius: 12px;
    }

    .faq-voyage-item-ico {
        left: 11px;
        width: 30px;
        height: 30px;
        border-radius: 9px;
    }

    .faq-voyage-item h3 {
        font-size: 0.84rem;
    }

    .faq-voyage-item p {
        font-size: 0.75rem;
    }
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    color: var(--black);
    background: var(--beige);
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-head);
    line-height: 1.2;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

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

/* ============================================================
   Buttons
   ============================================================ */

.btn {
    display: inline-block;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 12px 28px;
    border-radius: 50px;
    cursor: pointer;
    transition: var(--transition);
    border: 2px solid transparent;
}

.btn-primary {
    background: var(--teal);
    color: var(--beige);
}

.btn-primary:hover {
    background: var(--teal-dark);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 83, 83, 0.35);
}

.btn-outline {
    border-color: var(--teal);
    color: var(--teal);
    background: transparent;
}

.btn-outline:hover {
    background: var(--teal);
    color: var(--beige);
    transform: translateY(-3px);
}

.btn-nav {
    background: var(--beige);
    color: var(--teal);
    padding: 10px 24px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    appearance: none;
    -webkit-appearance: none;
}

.btn-nav:hover {
    background: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* ============================================================
   Header
   ============================================================ */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: var(--teal);
    transition: var(--transition);
    animation: headerSlideDown 0.7s ease both;
}

@keyframes headerSlideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
    transition: var(--transition);
}

/* Scrolled state — thoda compact + shadow + glass effect */
.site-header.scrolled {
    background: rgba(0, 83, 83, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.25);
}

.site-header.scrolled .header-inner {
    height: var(--header-height-scrolled);
}

/* ---------- Logo ---------- */

.logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.logo-img {
    height: 52px;
    width: auto;
    max-width: 220px;
    display: block;
    object-fit: contain;
    transition: height 0.3s ease, transform 0.3s ease;
}

.logo:hover .logo-img {
    transform: scale(1.03);
}

.site-header.scrolled .logo-img {
    height: 42px;
}

/* ---------- Navigation ---------- */

.main-nav {
    display: flex;
    align-items: center;
    gap: 36px;
}

.nav-list {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-link {
    position: relative;
    display: block;
    padding: 8px 14px;
    font-family: var(--font-head);
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--beige);
    transition: color 0.25s ease;
}

/* Animated underline */
.nav-link::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 2px;
    height: 2px;
    background: var(--beige);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
    transform: scaleX(1);
}

.nav-link:hover,
.nav-link.active {
    color: var(--white);
}

.submenu-arrow {
    width: 22px;
    height: 22px;
    margin-left: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    border: 1px solid rgba(237, 240, 218, 0.35);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 1rem;
    line-height: 1;
    transition: transform 0.25s ease;
}

.has-submenu {
    position: relative;
}

.services-submenu {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    width: 260px;
    padding: 10px;
    border: 1px solid rgba(0, 83, 83, 0.10);
    border-radius: 18px;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 10px);
    transition: opacity 0.22s ease, visibility 0.22s ease, transform 0.22s ease;
    background: #ffffff;
    box-shadow: 0 22px 55px rgba(0, 35, 35, 0.22);
}

.services-submenu::before {
    content: "";
    position: absolute;
    top: -20px;
    right: 0;
    left: 0;
    height: 20px;
}

.services-submenu a {
    padding: 11px 13px;
    border-radius: 10px;
    display: block;
    color: var(--teal-dark);
    font-family: var(--font-head);
    font-size: 0.82rem;
    font-weight: 600;
    transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.services-submenu a:hover,
.services-submenu a:focus-visible {
    color: var(--teal);
    background: rgba(0, 116, 110, 0.08);
    transform: translateX(3px);
}

.has-submenu:hover .services-submenu,
.has-submenu:focus-within .services-submenu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.has-submenu:hover .submenu-arrow,
.has-submenu:focus-within .submenu-arrow {
    transform: rotate(180deg);
}

/* ---------- Hamburger ---------- */

.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1100;
    padding: 8px;
}

.hamburger span {
    display: block;
    width: 100%;
    height: 3px;
    background: var(--beige);
    border-radius: 3px;
    transition: var(--transition);
}

.hamburger.open span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.hamburger.open span:nth-child(2) {
    opacity: 0;
    transform: translateX(-10px);
}

.hamburger.open span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/* ---------- Mobile overlay ---------- */

.nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    z-index: 999;
}

.nav-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* ============================================================
   Hero — 360° scroll sequence
   .hero-track lambi hai (400vh); uske andar .hero-sticky
   viewport par chipka rehta hai. Scroll progress se JS
   frame change karta hai — video jaisa feel.
   ============================================================ */

.hero-track {
    /* Har frame ke liye ~100vh scroll distance */
    height: 400vh;
    position: relative;
}

.hero-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding-top: var(--header-height);
    background:
        radial-gradient(circle at 80% 20%, rgba(0, 83, 83, 0.12), transparent 45%),
        radial-gradient(circle at 10% 80%, rgba(0, 83, 83, 0.10), transparent 40%),
        var(--beige);
}

.hero-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.25fr;
    align-items: center;
    gap: 28px;
}

.hero-content {
    text-align: left;
}

/* ---------- 360° visual ---------- */

.hero-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.hero-glow {
    position: absolute;
    width: 70%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 83, 83, 0.18), transparent 65%);
    filter: blur(10px);
    animation: glowPulse 4s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50%      { transform: scale(1.08); opacity: 1; }
}

.hero-frames {
    position: relative;
    width: min(820px, 100%);
    aspect-ratio: 1580 / 996;
    overflow: visible;
    background: transparent;
}

.hero-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    transition: opacity 0.35s ease;
    will-change: opacity;
    pointer-events: none;
    filter: drop-shadow(0 22px 36px rgba(0, 40, 40, 0.2));
}

.hero-frame.is-active {
    opacity: 1;
}

/* ---------- Rotation indicator ---------- */

.hero-rotation-ui {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
}

.rotation-degree {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--teal);
    min-width: 64px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    letter-spacing: 1px;
}

.rotation-dots {
    display: flex;
    gap: 8px;
}

.rotation-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(0, 83, 83, 0.25);
    transition: var(--transition);
}

.rotation-dots .dot.is-active {
    background: var(--teal);
    transform: scale(1.35);
}

/* ---------- Scroll hint ---------- */

.scroll-hint {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0.75;
}

.scroll-hint-text {
    font-family: var(--font-head);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--teal);
}

.scroll-hint-mouse {
    width: 24px;
    height: 38px;
    border: 2px solid var(--teal);
    border-radius: 14px;
    display: flex;
    justify-content: center;
    padding-top: 6px;
}

.scroll-hint-mouse span {
    width: 4px;
    height: 8px;
    border-radius: 4px;
    background: var(--teal);
    animation: scrollWheel 1.6s ease-in-out infinite;
}

@keyframes scrollWheel {
    0%   { transform: translateY(0); opacity: 1; }
    70%  { transform: translateY(12px); opacity: 0; }
    100% { transform: translateY(0); opacity: 0; }
}

.hero-badge {
    display: inline-block;
    background: var(--teal);
    color: var(--beige);
    font-family: var(--font-head);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 8px 20px;
    border-radius: 50px;
    margin-bottom: 24px;
    animation: fadeUp 0.8s ease 0.2s both;
}

.hero-content h1 {
    font-size: clamp(2.2rem, 5.5vw, 4rem);
    font-weight: 800;
    color: var(--black);
    margin-bottom: 20px;
    animation: fadeUp 0.8s ease 0.4s both;
}

.hero-content .highlight {
    color: var(--teal);
}

.hero-sub {
    max-width: 560px;
    margin: 0 0 36px;
    font-size: 1.05rem;
    color: rgba(0, 0, 0, 0.7);
    animation: fadeUp 0.8s ease 0.6s both;
}

.hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    animation: fadeUp 0.8s ease 0.8s both;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   Showcase — cinematic video scroll section
   .showcase-track lambi hai (200vh); andar sticky viewport.
   Scroll par video scale + text steps change hote hain (JS).
   ============================================================ */

.showcase-track {
    /* 3 steps + zoom ke liye enough scroll — reverse pe bhi
       section jaldi skip na ho */
    height: 320vh;
    position: relative;
    background: var(--teal-dark);
}

.showcase-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    z-index: 1;
    /* Opaque bg — scaled video ke gaps se hero na dikhe */
    background: var(--teal-dark);
}

/* ---------- Video background ---------- */

.showcase-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    /* JS scroll progress se scale badhata hai (zoom-in feel) */
    transform: scale(0.72);
    border-radius: 32px;
    overflow: hidden;
    will-change: transform, border-radius;
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45);
}

.showcase-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Dark gradient — left side text readable rahe */
.showcase-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(0, 40, 40, 0.82) 0%,
            rgba(0, 40, 40, 0.55) 38%,
            rgba(0, 40, 40, 0.15) 70%,
            rgba(0, 40, 40, 0.05) 100%);
}

/* ---------- Left text steps ---------- */

.showcase-content {
    position: relative;
    z-index: 2;
    width: 100%;
}

.showcase-steps {
    position: relative;
    max-width: 520px;
    min-height: 340px;
}

.showcase-step {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.55s ease, transform 0.55s ease;
    pointer-events: none;
}

.showcase-step.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.showcase-kicker {
    font-family: var(--font-head);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--beige);
    opacity: 0.85;
    margin-bottom: 16px;
}

.showcase-step h2 {
    font-size: clamp(2rem, 4.5vw, 3.4rem);
    font-weight: 800;
    color: var(--white);
    margin-bottom: 18px;
}

.showcase-step h2 span {
    color: var(--beige);
}

.showcase-text {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.85);
    max-width: 440px;
}

.showcase-actions {
    margin-top: 28px;
}

.btn-light {
    background: var(--beige);
    color: var(--teal);
}

.btn-light:hover {
    background: var(--white);
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

/* ---------- End fade (seamless handoff to next section) ---------- */

.showcase-endfade {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: var(--teal-dark);
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
}

/* ---------- Progress indicator ---------- */

.showcase-progress {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 36px;
}

.showcase-count {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--beige);
    letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
}

.showcase-bar {
    position: relative;
    width: 140px;
    height: 3px;
    border-radius: 3px;
    background: rgba(237, 240, 218, 0.25);
    overflow: hidden;
}

.showcase-bar span {
    position: absolute;
    inset: 0;
    transform-origin: left;
    transform: scaleX(0);
    background: var(--beige);
    border-radius: 3px;
    will-change: transform;
}

/* ============================================================
   Expertise — 3D scroll cards section
   .expertise-track lambi hai (600vh); andar sticky viewport.
   Background image sticky ke andar "fixed" jaisi rehti hai
   (subtle parallax), cards 3D me travel karte hain (JS).
   ============================================================ */

.expertise-track {
    /* Extra room: last card (04) hold + end-dive ke liye */
    height: 600vh;
    position: relative;
    background: var(--beige);
}

.expertise-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    z-index: 2;
}

/* ---------- Zoom-out reveal wrapper ---------- */
/* Showcase (fullscreen video) khatam hote hi ye pura scene
   scale(1.45) + blur se shuru hota hai; scroll par JS ise
   smoothly scale(1) par le aata hai — camera zoom-out feel. */

.expertise-zoom {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(1.45);
    transform-origin: 50% 50%;
    will-change: transform, filter;
}

.expertise-zoom .expertise-grid {
    margin: 0 auto;
}

/* Dark teal curtain — start par showcase jaisa dark,
   zoom ke saath fade hokar light section reveal karta hai */
.expertise-dark-fade {
    position: absolute;
    inset: 0;
    z-index: 6;
    background: var(--teal-dark);
    opacity: 1;
    pointer-events: none;
    will-change: opacity;
}

/* End fade — expertise ke aakhri hisse me scene services ke
   dark color me doob jaata hai; services ka curtain isi color
   se shuru hota hai, isliye 3 → 4 boundary invisible rehti hai */
.expertise-endfade {
    position: absolute;
    inset: 0;
    z-index: 7;
    background: #02100f;
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
}

/* ---------- Marketing zoom overlay (section 3 → 4) ---------- */
/* Expertise ke end par digital marketing ki pic fullscreen tak
   zoom hoti hai, phir services entry par small hokar fade out —
   peeche section 4 apne aap reveal hota hai (JS driven). */
.marketing-zoom {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    will-change: opacity;
}

.marketing-zoom img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(0.3);
    border-radius: 30px;
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
    will-change: transform, border-radius;
}

/* ---------- Fixed parallax background ---------- */

.expertise-bg {
    position: absolute;
    inset: -8% 0;
    will-change: transform;
}

.expertise-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.12);
    opacity: 0.35;
}

/* Light beige wash — text readable, airy feel */
.expertise-vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 70% 40%, rgba(237, 240, 218, 0.15) 0%, rgba(237, 240, 218, 0.75) 70%),
        linear-gradient(180deg, rgba(246, 248, 234, 0.88), rgba(237, 240, 218, 0.92));
}

/* ---------- Giant ghost word ---------- */

.expertise-ghost {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-head);
    font-weight: 800;
    font-size: clamp(6rem, 18vw, 17rem);
    letter-spacing: 0.05em;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(0, 83, 83, 0.08);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    will-change: transform;
}

/* ---------- Layout ---------- */

.expertise-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    align-items: center;
    gap: 48px;
    width: 100%;
}

.expertise-head {
    will-change: transform;
}

.expertise-kicker {
    font-family: var(--font-head);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--teal);
    opacity: 0.85;
    margin-bottom: 16px;
}

.expertise-head h2 {
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 800;
    color: var(--black);
    margin-bottom: 18px;
}

.expertise-head h2 span {
    color: var(--teal);
}

.expertise-sub {
    font-size: 1.05rem;
    color: rgba(0, 0, 0, 0.65);
    max-width: 420px;
}

/* Progress — teal on beige */
.expertise-progress {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 36px;
}

.expertise-count {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--teal);
    letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
}

.expertise-bar {
    position: relative;
    width: 140px;
    height: 3px;
    border-radius: 3px;
    background: rgba(0, 83, 83, 0.15);
    overflow: hidden;
}

.expertise-bar span {
    position: absolute;
    inset: 0;
    transform-origin: left;
    transform: scaleX(0);
    background: var(--teal);
    border-radius: 3px;
    will-change: transform;
}

/* ---------- 3D card stage ---------- */

.expertise-stage {
    position: relative;
    height: min(560px, 72vh);
    perspective: 1400px;
    perspective-origin: 50% 45%;
}

.expertise-card {
    position: absolute;
    inset: 0;
    margin: auto;
    max-width: 540px;
    height: fit-content;
    border-radius: 26px;
    overflow: hidden;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
    border: 1px solid rgba(0, 83, 83, 0.12);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow:
        0 20px 50px rgba(0, 83, 83, 0.12),
        0 4px 16px rgba(0, 0, 0, 0.06);
    /* JS scroll progress se transform + opacity drive hota hai */
    opacity: 0;
    transform-style: preserve-3d;
    will-change: transform, opacity;
    pointer-events: none;
}

.expertise-card.is-front {
    pointer-events: auto;
}

/* ---------- Card image banner ---------- */

.card-media {
    position: relative;
    height: 190px;
    overflow: hidden;
}

.card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Teal tint — image brand ke saath blend ho */
.card-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(0, 83, 83, 0.18) 0%,
        rgba(0, 61, 61, 0.05) 55%,
        rgba(255, 255, 255, 0.35) 100%);
}

.card-num {
    position: absolute;
    top: 18px;
    right: 24px;
    z-index: 2;
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 3rem;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.75);
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

/* ---------- Card body ---------- */

.card-body {
    position: relative;
    padding: 0 40px 34px;
}

/* Icon image ke edge par overlap karta hai */
.card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--teal), var(--teal-light));
    color: var(--beige);
    margin-top: -32px;
    margin-bottom: 16px;
    border: 3px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 28px rgba(0, 83, 83, 0.3);
}

.card-icon svg {
    width: 30px;
    height: 30px;
}

.expertise-card h3 {
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    font-weight: 700;
    color: var(--black);
    margin-bottom: 12px;
}

.expertise-card p {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.62);
    margin-bottom: 24px;
    line-height: 1.7;
}

.card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.card-tags span {
    font-family: var(--font-head);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--teal);
    padding: 7px 16px;
    border-radius: 50px;
    border: 1px solid rgba(0, 83, 83, 0.22);
    background: rgba(0, 83, 83, 0.05);
    transition: var(--transition);
}

.expertise-card.is-front .card-tags span:hover {
    background: var(--teal);
    color: var(--beige);
    border-color: var(--teal);
}

/* ============================================================
   Services — 3D ring carousel scroll section
   .services-track lambi hai (700vh); andar sticky viewport.
   Dark background image ke upar 6 glass panels ek 3D ring
   par lage hain; scroll par pura ring rotateY hota hai (JS).
   ============================================================ */

.services-track {
    /* Thoda zyada scroll: last card (06) hold + end-dive ke liye room */
    height: 700vh;
    position: relative;
    background: #02100f;
}

.services-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    z-index: 3;
}

/* Pinned state — section handoff ke dauran sticky viewport par
   fix ho jaata hai (JS toggle karta hai). position: fixed browser
   compositor par natively chalta hai, isliye koi jitter nahi —
   transition in-place crossfade jaisi dikhti hai, slide nahi.
   Har agla section peeche wale se HIGHER z-index rakho (1→10),
   warna pinned previous next ko cover karke atka rehta hai —
   FAQ→CTA jaisa smooth handoff isi ladder se aata hai. */
.showcase-sticky.is-pinned,
.expertise-sticky.is-pinned,
.services-sticky.is-pinned,
.stats-sticky.is-pinned,
.why-sticky.is-pinned,
.sol-sticky.is-pinned,
.quest-sticky.is-pinned,
.faq-voyage-sticky.is-pinned {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
}

/* Back-scroll: z-index ladder ulta — peeche wali section upar aaye
   (warna FAQ/Quest jaise high-z stickies peeche sections daba deti hain).
   final-cta sticky nahi hai — isko ladder se bahar rakho warna
   upar scroll par FAQ uske top ko cut kar deti hai. */
body.is-scroll-up .showcase-sticky { z-index: 9; }
body.is-scroll-up .expertise-sticky { z-index: 8; }
body.is-scroll-up .services-sticky { z-index: 7; }
body.is-scroll-up .stats-sticky { z-index: 6; }
body.is-scroll-up .why-sticky { z-index: 5; }
body.is-scroll-up .sol-sticky { z-index: 4; }
body.is-scroll-up .quest-sticky { z-index: 3; }
body.is-scroll-up .faq-voyage-sticky { z-index: 2; }
body.is-scroll-up .final-cta { z-index: 10; }

/* ---------- Zoom-in reveal wrapper ---------- */
/* Expertise (dark end) khatam hote hi ye pura scene halka
   zoomed + blur se shuru hota hai; scroll par JS ise smoothly
   scale(1) par le aata hai — same camera continue karne ki feel. */

.services-zoom {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(1.3);
    transform-origin: 50% 50%;
    will-change: transform, filter;
}

.services-zoom .services-layout {
    margin: 0 auto;
}

/* Dark curtain — start par expertise ke endfade jaisa dark,
   zoom ke saath fade hokar services scene reveal karta hai */
.services-dark-fade {
    position: absolute;
    inset: 0;
    z-index: 6;
    background: #02100f;
    opacity: 1;
    pointer-events: none;
    will-change: opacity;
}

/* ---------- Parallax background ---------- */

.services-bg {
    position: absolute;
    inset: -10% 0;
    will-change: transform;
}

.services-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.15);
}

/* Teal-dark wash — panels pop karein, text readable rahe */
.services-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 30%, rgba(0, 83, 83, 0.28), transparent 60%),
        linear-gradient(180deg,
            rgba(2, 16, 15, 0.92) 0%,
            rgba(2, 22, 21, 0.68) 45%,
            rgba(2, 16, 15, 0.94) 100%);
}

/* ---------- Giant ghost word ---------- */

.services-ghost {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-head);
    font-weight: 800;
    font-size: clamp(6rem, 17vw, 16rem);
    letter-spacing: 0.06em;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(237, 240, 218, 0.07);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    will-change: transform;
}

/* ---------- Layout ---------- */

.services-layout {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding-top: var(--header-height);
}

.services-head {
    text-align: center;
    will-change: transform;
    position: relative;
    z-index: 3;
    flex-shrink: 0;
    padding: 0 16px;
}

.services-kicker {
    font-family: var(--font-head);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--beige);
    opacity: 0.8;
    margin-bottom: 8px;
}

.services-head h2 {
    font-size: clamp(1.45rem, 2.6vw, 2.2rem);
    font-weight: 800;
    color: var(--white);
    line-height: 1.25;
}

.services-head h2 span {
    color: var(--beige);
}

/* ---------- 3D ring stage ---------- */

.services-stage {
    position: relative;
    width: 100%;
    height: min(440px, 54vh);
    perspective: 1600px;
    perspective-origin: 50% 42%;
}

.services-ring {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    /* JS scroll progress se rotateY drive hota hai */
    will-change: transform;
}

.service-panel {
    /* Default accent — har card apna colorful accent override karta hai */
    --sp1: rgb(10, 46, 44);
    --sp2: rgb(4, 26, 25);
    --spA: var(--teal);
    --spB: var(--teal-light);
    --spGlow: rgba(0, 107, 107, 0.14);

    position: absolute;
    top: 50%;
    left: 50%;
    width: min(360px, 82vw);
    margin-left: calc(min(360px, 82vw) / -2);
    transform: translateY(-50%);
    padding: 20px 22px 20px;
    border-radius: 22px;
    overflow: hidden;
    background: linear-gradient(160deg, var(--sp1), var(--sp2));
    border: 1px solid color-mix(in srgb, var(--spA) 35%, transparent);
    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.55),
        0 0 22px var(--spGlow),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    /* Ring par position + dim/bright JS se milta hai */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform, opacity, filter;
    pointer-events: none;
    cursor: pointer;
}

.service-panel.is-front {
    pointer-events: auto;
}

/* ---------- Colorful accents — background image se matching ----------
   Palette night-earth scene se li gayi hai: deep teal glass base,
   ocean cyan, golden city-lights, emerald, atmosphere blue.
   Cards colorful hain par scene ke saath blend karte hain. */

/* 01 CRM — ocean cyan */
.service-panel[data-service="0"] {
    --sp1: rgb(9, 62, 68);
    --sp2: rgb(3, 30, 33);
    --spA: #22d3ee;
    --spB: #14b8a6;
    --spGlow: rgba(34, 211, 238, 0.12);
}

/* 02 Production — golden city lights */
.service-panel[data-service="1"] {
    --sp1: rgb(74, 56, 15);
    --sp2: rgb(32, 26, 6);
    --spA: #fbbf24;
    --spB: #d97706;
    --spGlow: rgba(251, 191, 36, 0.1);
}

/* 03 Service Mgmt — atmosphere blue */
.service-panel[data-service="2"] {
    --sp1: rgb(12, 51, 74);
    --sp2: rgb(4, 24, 38);
    --spA: #38bdf8;
    --spB: #0e7490;
    --spGlow: rgba(56, 189, 248, 0.1);
}

/* 04 HR — emerald */
.service-panel[data-service="3"] {
    --sp1: rgb(10, 63, 44);
    --sp2: rgb(3, 30, 20);
    --spA: #34d399;
    --spB: #059669;
    --spGlow: rgba(52, 211, 153, 0.1);
}

/* 05 Inventory — warm copper (sodium lights) */
.service-panel[data-service="4"] {
    --sp1: rgb(77, 42, 16);
    --sp2: rgb(35, 18, 6);
    --spA: #fb923c;
    --spB: #c2610c;
    --spGlow: rgba(251, 146, 60, 0.1);
}

/* 06 Enterprise — violet / indigo (no dark teal) */
.service-panel[data-service="5"] {
    --sp1: rgb(46, 28, 74);
    --sp2: rgb(22, 12, 40);
    --spA: #a78bfa;
    --spB: #818cf8;
    --spGlow: rgba(167, 139, 250, 0.12);
}

/* ---------- Card top image strip ----------
   Image upar alag section me hai, content neeche —
   dono clearly visible. Negative margin se image
   card ke edges tak full-bleed jaati hai. */

.service-media {
    position: relative;
    margin: -20px -22px 12px;
    height: 145px;
    overflow: hidden;
    cursor: zoom-in;
}

.service-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    filter: none;
    transform: none;
}

/* Image ke bottom par accent tint fade — content ke
   gradient se smooth blend ke liye */
.service-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        transparent 55%,
        var(--sp1) 100%);
    pointer-events: none;
}

/* Service image fullscreen preview */
.service-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 28px;
    background: rgba(1, 12, 14, 0.9);
    backdrop-filter: blur(12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.service-lightbox.is-open {
    opacity: 1;
    visibility: visible;
}

.service-lightbox img {
    display: block;
    width: auto;
    max-width: min(1100px, 92vw);
    max-height: 86vh;
    border-radius: 18px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65);
    transform: scale(0.94);
    transition: transform 0.25s ease;
}

.service-lightbox.is-open img {
    transform: scale(1);
}

.service-lightbox-close {
    position: absolute;
    top: 22px;
    right: 24px;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
}

.service-num {
    position: absolute;
    top: 16px;
    right: 20px;
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 2.1rem;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px color-mix(in srgb, var(--spA) 75%, transparent);
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}

.service-panel h3 {
    font-size: clamp(1.05rem, 1.7vw, 1.3rem);
    font-weight: 700;
    color: var(--white);
    margin-bottom: 6px;
    line-height: 1.3;
}

.service-panel h3 a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    transition: color 0.25s ease;
}

.service-panel h3 a::after {
    content: "↗";
    color: var(--spA);
    font-size: 0.8em;
    transition: transform 0.25s ease;
}

.service-panel h3 a:hover {
    color: var(--spA);
}

.service-panel h3 a:hover::after {
    transform: translate(3px, -3px);
}

.service-panel p {
    font-size: 0.8rem;
    color: rgba(237, 240, 218, 0.85);
    line-height: 1.45;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.service-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 2px;
}

.service-tags span {
    font-family: var(--font-head);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: color-mix(in srgb, var(--spA) 70%, var(--white));
    padding: 5px 10px;
    border-radius: 50px;
    border: 1px solid color-mix(in srgb, var(--spA) 35%, transparent);
    background: color-mix(in srgb, var(--spA) 12%, transparent);
    transition: var(--transition);
}

.service-panel.is-front .service-tags span:hover {
    background: var(--spA);
    color: #02100f;
    border-color: var(--spA);
}

/* ---------- Front spotlight glow ---------- */

.services-spotlight {
    position: absolute;
    left: 50%;
    bottom: -6%;
    width: min(520px, 90vw);
    height: 120px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center,
        rgba(0, 107, 107, 0.18), transparent 70%);
    filter: blur(24px);
    pointer-events: none;
}

/* ---------- Progress ---------- */

.services-progress {
    display: none;
}

.services-count {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--beige);
    letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
}

.services-bar {
    position: relative;
    width: 140px;
    height: 3px;
    border-radius: 3px;
    background: rgba(237, 240, 218, 0.2);
    overflow: hidden;
}

.services-bar span {
    position: absolute;
    inset: 0;
    transform-origin: left;
    transform: scaleX(0);
    background: var(--beige);
    border-radius: 3px;
    will-change: transform;
}

/* ---------- End fade (services → stats seamless handoff) ---------- */

.services-endfade {
    position: absolute;
    inset: 0;
    z-index: 7;
    background: #02100f;
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
}

/* ============================================================
   Stats — 3D floating bubble section (5th)
   .stats-track lambi hai (300vh); andar sticky viewport.
   Services ke dark scene se same color me continue hota hai —
   user ko lagta hai wahi scene aage badh raha hai, naya
   section niche se aata hua feel nahi hota.
   Glass orbs 3D depth se pop-in hote hain, niche wavy layers
   drift karti hain, ambient bubbles upar rise karte hain.
   ============================================================ */

.stats-track {
    height: 300vh;
    position: relative;
    background: #02100f;
}

.stats-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    z-index: 4;
    background:
        radial-gradient(ellipse at 50% 120%, rgba(0, 83, 83, 0.45), transparent 60%),
        radial-gradient(ellipse at 15% 10%, rgba(0, 107, 107, 0.18), transparent 50%),
        linear-gradient(180deg, #02100f 0%, #032220 55%, #02312e 100%);
}

/* ---------- Zoom-out reveal wrapper ---------- */
/* Services (dark end) khatam hote hi ye pura scene halka
   zoomed + blur se shuru hota hai; scroll par JS ise smoothly
   scale(1) par le aata hai — same camera continue feel. */

.stats-zoom {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(1.3);
    transform-origin: 50% 50%;
    will-change: transform, filter;
}

/* Dark curtain — services ke endfade jaisa same dark color,
   zoom ke saath fade hokar stats scene reveal karta hai */
.stats-dark-fade {
    position: absolute;
    inset: 0;
    z-index: 6;
    background: #02100f;
    opacity: 1;
    pointer-events: none;
    will-change: opacity;
}

/* ---------- Aurora glows ---------- */

.stats-aurora {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.stats-aurora::before,
.stats-aurora::after {
    content: '';
    position: absolute;
    width: 55vw;
    height: 55vw;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.5;
}

.stats-aurora::before {
    top: -25%;
    left: -12%;
    background: radial-gradient(circle, rgba(45, 212, 191, 0.22), transparent 65%);
    animation: auroraDrift 14s ease-in-out infinite alternate;
}

.stats-aurora::after {
    bottom: -30%;
    right: -12%;
    background: radial-gradient(circle, rgba(0, 107, 107, 0.35), transparent 65%);
    animation: auroraDrift 18s ease-in-out infinite alternate-reverse;
}

@keyframes auroraDrift {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(6vw, 4vh) scale(1.15); }
}

/* ---------- Giant ghost word ---------- */

.stats-ghost {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-head);
    font-weight: 800;
    font-size: clamp(6rem, 17vw, 16rem);
    letter-spacing: 0.06em;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(237, 240, 218, 0.06);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    will-change: transform;
}

/* ---------- Ambient rising bubbles ---------- */

.stats-ambient {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.stats-ambient span {
    position: absolute;
    bottom: -80px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 30%,
        rgba(255, 255, 255, 0.16),
        rgba(45, 212, 191, 0.07) 45%,
        rgba(45, 212, 191, 0.02) 70%);
    border: 1px solid rgba(237, 240, 218, 0.09);
    animation: bubbleRise linear infinite;
}

.stats-ambient span:nth-child(1) { left: 6%;  width: 34px; height: 34px; animation-duration: 13s; animation-delay: 0s; }
.stats-ambient span:nth-child(2) { left: 18%; width: 16px; height: 16px; animation-duration: 10s; animation-delay: 2.5s; }
.stats-ambient span:nth-child(3) { left: 32%; width: 46px; height: 46px; animation-duration: 16s; animation-delay: 1s; }
.stats-ambient span:nth-child(4) { left: 47%; width: 20px; height: 20px; animation-duration: 11s; animation-delay: 4s; }
.stats-ambient span:nth-child(5) { left: 60%; width: 30px; height: 30px; animation-duration: 14s; animation-delay: 0.5s; }
.stats-ambient span:nth-child(6) { left: 72%; width: 14px; height: 14px; animation-duration: 9s;  animation-delay: 3s; }
.stats-ambient span:nth-child(7) { left: 84%; width: 40px; height: 40px; animation-duration: 15s; animation-delay: 1.8s; }
.stats-ambient span:nth-child(8) { left: 93%; width: 22px; height: 22px; animation-duration: 12s; animation-delay: 5s; }

@keyframes bubbleRise {
    0% {
        transform: translateY(0) translateX(0) scale(0.7);
        opacity: 0;
    }
    12% {
        opacity: 1;
    }
    100% {
        transform: translateY(-115vh) translateX(4vw) scale(1.1);
        opacity: 0;
    }
}

/* ---------- Layout ---------- */

.stats-layout {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding-top: var(--header-height);
}

.stats-head {
    text-align: center;
    will-change: transform, opacity;
}

.stats-kicker {
    font-family: var(--font-head);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--beige);
    opacity: 0.8;
    margin-bottom: 12px;
}

.stats-head h2 {
    font-size: clamp(2.2rem, 4.5vw, 3.6rem);
    font-weight: 800;
    color: var(--white);
}

.stats-head h2 span {
    color: #2dd4bf;
}

/* ---------- Bubble stage ---------- */

.stats-stage {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(18px, 3vw, 44px);
    width: 100%;
    max-width: 1080px;
    perspective: 1200px;
}

/* Bubble wrapper — JS scroll progress se depth pop-in
   (translateY + translateZ + scale + opacity) drive hota hai */
.stat-bubble {
    display: flex;
    justify-content: center;
    opacity: 0;
    transform-style: preserve-3d;
    will-change: transform, opacity;
    cursor: pointer;
    outline: none;
}

/* Idle float — har bubble alag rhythm par halka sa tairta hai */
.stat-float {
    animation: statFloat 6s ease-in-out infinite;
    will-change: transform;
}

.stat-bubble[data-stat="1"] .stat-float { animation-duration: 7s;   animation-delay: -2s; }
.stat-bubble[data-stat="2"] .stat-float { animation-duration: 6.5s; animation-delay: -4s; }
.stat-bubble[data-stat="3"] .stat-float { animation-duration: 7.5s; animation-delay: -1s; }

@keyframes statFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-16px); }
}

/* ---------- Glass orb ---------- */

.stat-orb {
    position: relative;
    width: clamp(150px, 16vw, 225px);
    aspect-ratio: 1;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    padding: 20px;
    background:
        radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.16), transparent 42%),
        radial-gradient(circle at 68% 82%, rgba(45, 212, 191, 0.16), transparent 55%),
        linear-gradient(160deg, rgba(0, 83, 83, 0.42), rgba(2, 22, 21, 0.75));
    border: 1px solid rgba(237, 240, 218, 0.16);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(45, 212, 191, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -18px 32px rgba(0, 83, 83, 0.28);
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

/* Glass shine — upar-left highlight bubble jaisa */
.stat-orb::before {
    content: '';
    position: absolute;
    top: 9%;
    left: 16%;
    width: 34%;
    height: 20%;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.32), transparent);
    filter: blur(3px);
    transform: rotate(-22deg);
    pointer-events: none;
}

.stat-bubble:hover .stat-orb,
.stat-bubble:focus-visible .stat-orb {
    transform: translateY(-6px) scale(1.035);
    border-color: rgba(45, 212, 191, 0.45);
    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.55),
        0 0 60px rgba(45, 212, 191, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -18px 32px rgba(0, 83, 83, 0.28);
}

.stat-value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 3px;
    font-family: var(--font-head);
    font-weight: 800;
    line-height: 1;
    color: var(--white);
    text-shadow: 0 0 24px rgba(45, 212, 191, 0.35);
}

.stat-num,
.stat-prefix {
    font-size: clamp(2.6rem, 4.5vw, 4rem);
    font-variant-numeric: tabular-nums;
}

.stat-suffix {
    font-size: clamp(1.1rem, 1.8vw, 1.6rem);
    font-weight: 700;
    color: #2dd4bf;
}

.stat-label {
    font-family: var(--font-head);
    font-size: clamp(0.72rem, 1vw, 0.88rem);
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    line-height: 1.45;
    color: rgba(237, 240, 218, 0.82);
}

.stat-explore {
    position: absolute;
    left: 50%;
    bottom: 14%;
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-head);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #5eead4;
    opacity: 0;
    transform: translate(-50%, 8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.stat-bubble:hover .stat-explore,
.stat-bubble:focus-visible .stat-explore {
    opacity: 1;
    transform: translate(-50%, 0);
}

.stat-bubble:focus-visible .stat-orb {
    outline: 2px solid #5eead4;
    outline-offset: 5px;
}

/* ---------- Interactive 3D stat detail ---------- */

.stat-detail-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 24px;
    perspective: 1500px;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear 0.45s;
}

.stat-detail-modal.is-open {
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.stat-detail-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 45%, rgba(0, 126, 116, 0.22), transparent 48%),
        rgba(1, 13, 12, 0.84);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.stat-detail-modal.is-open .stat-detail-backdrop {
    opacity: 1;
}

.stat-detail-card {
    position: relative;
    width: min(900px, 94vw);
    min-height: 400px;
    display: grid;
    grid-template-columns: 0.88fr 1.12fr;
    overflow: hidden;
    border: 1px solid rgba(94, 234, 212, 0.25);
    border-radius: 32px;
    background: linear-gradient(145deg, rgba(8, 55, 52, 0.97), rgba(2, 24, 23, 0.98));
    box-shadow:
        0 45px 120px rgba(0, 0, 0, 0.62),
        0 0 80px rgba(45, 212, 191, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.13);
    opacity: 0;
    transform: rotateX(18deg) rotateY(-12deg) translateY(55px) scale(0.82);
    transform-style: preserve-3d;
    transition: opacity 0.35s ease, transform 0.55s cubic-bezier(.2, .8, .2, 1);
}

.stat-detail-modal.is-open .stat-detail-card {
    opacity: 1;
    transform: rotateX(0) rotateY(0) translateY(0) scale(1);
}

.stat-detail-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, rgba(255, 255, 255, 0.08), transparent 28%);
}

.stat-detail-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 4;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(237, 240, 218, 0.18);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    color: var(--white);
    font-size: 1.65rem;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.3s ease, background 0.3s ease;
}

.stat-detail-close:hover,
.stat-detail-close:focus-visible {
    transform: rotate(90deg);
    background: rgba(45, 212, 191, 0.2);
    outline: none;
}

.stat-detail-visual {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 350px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 50%, rgba(45, 212, 191, 0.16), transparent 45%),
        linear-gradient(rgba(94, 234, 212, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(94, 234, 212, 0.045) 1px, transparent 1px),
        linear-gradient(145deg, rgba(0, 83, 83, 0.28), transparent);
    background-size: auto, 28px 28px, 28px 28px, auto;
}

.stat-detail-visual::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 310px;
    height: 310px;
    border: 1px solid rgba(94, 234, 212, 0.12);
    border-radius: 50%;
    box-shadow:
        0 0 0 35px rgba(94, 234, 212, 0.025),
        0 0 0 75px rgba(94, 234, 212, 0.018);
    transform: translate(-50%, -50%);
    animation: statVisualRing 8s linear infinite;
}

.stat-detail-visual::after {
    content: '';
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: 17%;
    height: 20px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    filter: blur(12px);
    animation: statShadowPulse 3s ease-in-out infinite;
}

.stat-visual-topline {
    position: absolute;
    z-index: 6;
    top: 24px;
    left: 26px;
    right: 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: rgba(237, 240, 218, 0.48);
    font-family: var(--font-head);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

.stat-visual-topline span {
    display: flex;
    align-items: center;
    gap: 7px;
}

.stat-visual-topline i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #5eead4;
    box-shadow: 0 0 12px #5eead4;
    animation: statLivePulse 1.7s ease-in-out infinite;
}

.stat-visual-topline b {
    color: rgba(94, 234, 212, 0.7);
    font-weight: 700;
}

.stat-visual-ghost {
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    color: transparent;
    -webkit-text-stroke: 1px rgba(94, 234, 212, 0.1);
    font-family: var(--font-head);
    font-size: clamp(8rem, 16vw, 13rem);
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    transform: translate(-50%, -56%) rotate(-9deg);
    user-select: none;
}

.stat-3d-scene {
    position: relative;
    width: 290px;
    height: 260px;
    display: grid;
    place-items: center;
    transform-style: preserve-3d;
    animation: statSceneFloat 5s ease-in-out infinite;
}

.stat-visual-halo {
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(94, 234, 212, 0.2), transparent 62%);
    filter: blur(7px);
    animation: statHaloPulse 3s ease-in-out infinite;
}

.stat-visual-card {
    position: absolute;
    width: 210px;
    height: 142px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 24px;
    background:
        linear-gradient(125deg, rgba(255, 255, 255, 0.17), transparent 42%),
        linear-gradient(145deg, rgba(8, 112, 104, 0.92), rgba(2, 38, 36, 0.96));
    box-shadow:
        20px 28px 50px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transform-style: preserve-3d;
}

.stat-visual-card::after {
    content: '';
    position: absolute;
    top: -55%;
    left: -40%;
    width: 45%;
    height: 210%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
    transform: rotate(28deg);
    animation: statCardShine 4.5s ease-in-out infinite;
}

.stat-visual-card-back {
    opacity: 0.45;
    transform: translate3d(-42px, -35px, -70px) rotateY(19deg) rotateZ(-7deg);
}

.stat-visual-card-back span {
    position: absolute;
    left: 24px;
    height: 8px;
    border-radius: 5px;
    background: rgba(237, 240, 218, 0.25);
}

.stat-visual-card-back span:nth-child(1) { top: 30px; width: 45px; }
.stat-visual-card-back span:nth-child(2) { top: 55px; width: 105px; }
.stat-visual-card-back span:nth-child(3) { top: 78px; width: 78px; }

.stat-visual-card-mid {
    opacity: 0.68;
    transform: translate3d(42px, 28px, -25px) rotateY(-17deg) rotateZ(6deg);
}

.stat-visual-card-mid > i {
    position: absolute;
    left: 24px;
    top: 28px;
    width: 42px;
    height: 42px;
    border: 7px solid rgba(94, 234, 212, 0.5);
    border-right-color: rgba(237, 240, 218, 0.16);
    border-radius: 50%;
}

.stat-visual-card-mid > span {
    position: absolute;
    left: 84px;
    height: 8px;
    border-radius: 5px;
    background: rgba(237, 240, 218, 0.24);
}

.stat-visual-card-mid > span:nth-of-type(1) { top: 34px; width: 72px; }
.stat-visual-card-mid > span:nth-of-type(2) { top: 56px; width: 48px; }

.stat-visual-card-front {
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 22px 25px;
    transform: translate3d(0, -2px, 65px) rotateX(-5deg) rotateY(8deg);
    animation: statFrontCard 4s ease-in-out infinite;
}

.stat-visual-card-front small {
    margin-bottom: 5px;
    color: rgba(237, 240, 218, 0.58);
    font-family: var(--font-head);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}

.stat-visual-card-front strong {
    color: #fff;
    font-family: var(--font-head);
    font-size: 2.65rem;
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.stat-visual-card-front > span {
    margin-top: 5px;
    color: #91f4e3;
    font-size: 0.72rem;
    font-weight: 700;
}

.stat-visual-progress {
    width: 100%;
    height: 5px;
    margin-top: 14px;
    overflow: hidden;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
}

.stat-visual-progress i {
    display: block;
    width: 76%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #5eead4, #edf0da);
    box-shadow: 0 0 15px rgba(94, 234, 212, 0.7);
    animation: statProgress 2.6s ease-in-out infinite alternate;
}

.stat-visual-particle {
    position: absolute;
    z-index: 5;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #5eead4;
    box-shadow: 0 0 22px #5eead4;
}

.particle-one { top: 17px; right: 42px; animation: statParticleOne 3.5s ease-in-out infinite; }
.particle-two { left: 18px; bottom: 48px; width: 7px; height: 7px; animation: statParticleTwo 4s ease-in-out infinite; }
.particle-three { right: 18px; bottom: 24px; width: 5px; height: 5px; background: #edf0da; animation: statParticleTwo 3s ease-in-out infinite reverse; }

/* Holographic stat sculpture */
.stat-holo-beam {
    position: absolute;
    z-index: 0;
    top: -22px;
    width: 230px;
    height: 270px;
    background: linear-gradient(180deg, rgba(94, 234, 212, 0), rgba(94, 234, 212, 0.13) 55%, rgba(94, 234, 212, 0));
    clip-path: polygon(38% 0, 62% 0, 92% 100%, 8% 100%);
    filter: blur(4px);
    animation: statBeamPulse 3s ease-in-out infinite;
}

.stat-holo-orbit {
    position: absolute;
    z-index: 3;
    width: 235px;
    height: 92px;
    border: 1px solid rgba(94, 234, 212, 0.46);
    border-radius: 50%;
    transform-style: preserve-3d;
}

.stat-holo-orbit-x {
    transform: rotate(-13deg);
    animation: statHoloOrbitX 7s linear infinite;
}

.stat-holo-orbit-y {
    width: 92px;
    height: 225px;
    border-color: rgba(237, 240, 218, 0.24);
    transform: rotate(22deg);
    animation: statHoloOrbitY 8s linear infinite reverse;
}

.stat-holo-orbit i {
    position: absolute;
    width: 13px;
    height: 13px;
    border: 2px solid rgba(255, 255, 255, 0.65);
    border-radius: 50%;
    background: #08a99c;
    box-shadow: 0 0 18px #5eead4;
}

.stat-holo-orbit-x i:first-child { left: 18px; top: 12px; }
.stat-holo-orbit-x i:last-child { right: 17px; bottom: 10px; width: 8px; height: 8px; }
.stat-holo-orbit-y i { right: 8px; top: 42px; width: 9px; height: 9px; background: #edf0da; }

.stat-holo-orb {
    position: relative;
    z-index: 4;
    width: 138px;
    height: 138px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.42), transparent 20%),
        radial-gradient(circle at 50% 62%, #0ba99c 0%, #00645e 52%, #012f2d 100%);
    box-shadow:
        0 0 0 8px rgba(94, 234, 212, 0.045),
        0 0 55px rgba(45, 212, 191, 0.42),
        0 28px 50px rgba(0, 0, 0, 0.42),
        inset -18px -22px 35px rgba(0, 35, 33, 0.55);
    animation: statHoloOrb 4s ease-in-out infinite;
}

.stat-holo-orb::after {
    content: '';
    position: absolute;
    inset: 7px;
    border: 1px dashed rgba(237, 240, 218, 0.22);
    border-radius: 50%;
    animation: statHoloSpin 12s linear infinite;
}

.stat-holo-glare {
    position: absolute;
    top: 14px;
    left: 27px;
    width: 48px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    filter: blur(5px);
    transform: rotate(-28deg);
}

.stat-holo-orb small {
    position: relative;
    z-index: 2;
    margin-bottom: 3px;
    color: rgba(237, 240, 218, 0.63);
    font-family: var(--font-head);
    font-size: 0.48rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.stat-holo-orb strong {
    position: relative;
    z-index: 2;
    color: #fff;
    font-family: var(--font-head);
    font-size: 2.65rem;
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 8px 24px rgba(0, 0, 0, 0.34);
}

.stat-holo-label {
    position: absolute;
    z-index: 7;
    top: 185px;
    min-width: 125px;
    padding: 7px 14px;
    border: 1px solid rgba(94, 234, 212, 0.24);
    border-radius: 20px;
    background: rgba(1, 36, 34, 0.84);
    box-shadow: 0 9px 25px rgba(0, 0, 0, 0.3);
    color: #91f4e3;
    font-size: 0.64rem;
    font-weight: 700;
    text-align: center;
    backdrop-filter: blur(8px);
}

.stat-holo-platform {
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: 0;
    width: 230px;
    height: 88px;
    border: 1px solid rgba(94, 234, 212, 0.36);
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(94, 234, 212, 0.16), rgba(0, 63, 59, 0.05) 58%, transparent 70%);
    box-shadow: 0 0 35px rgba(94, 234, 212, 0.12);
    transform: translateX(-50%) rotateX(62deg);
}

.stat-holo-platform span {
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(94, 234, 212, 0.22);
    border-radius: 50%;
}

.stat-holo-platform span:nth-child(2) { inset: 24px 40px; }
.stat-holo-platform span:nth-child(3) {
    inset: 35px 78px;
    border: 0;
    background: #5eead4;
    box-shadow: 0 0 28px #5eead4;
}

.stat-visual-metrics {
    position: absolute;
    z-index: 6;
    left: 24px;
    right: 24px;
    bottom: 22px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.stat-visual-metrics > span {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 11px;
    border: 1px solid rgba(94, 234, 212, 0.13);
    border-radius: 12px;
    background: rgba(1, 33, 31, 0.7);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
}

.stat-visual-metrics small {
    color: rgba(237, 240, 218, 0.47);
    font-size: 0.52rem;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.stat-visual-metrics strong {
    color: #edf0da;
    font-family: var(--font-head);
    font-size: 0.78rem;
    font-weight: 700;
}

.stat-detail-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 46px 52px 40px;
}

.stat-detail-kicker {
    margin-bottom: 10px;
    font-family: var(--font-head);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: #5eead4;
}

.stat-detail-content h2 {
    margin-bottom: 14px;
    color: var(--white);
    font-size: clamp(1.8rem, 3vw, 2.7rem);
    line-height: 1.12;
}

.stat-detail-content > p {
    margin-bottom: 18px;
    color: rgba(237, 240, 218, 0.72);
    line-height: 1.7;
}

.stat-detail-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.stat-detail-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 11px;
    border: 1px solid rgba(94, 234, 212, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.045);
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.78rem;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.35s ease, transform 0.35s ease, border-color 0.3s ease;
}

.stat-detail-modal.is-open .stat-detail-item {
    opacity: 1;
    transform: translateY(0);
}

.stat-detail-modal.is-open .stat-detail-item:nth-child(2) { transition-delay: 0.07s; }
.stat-detail-modal.is-open .stat-detail-item:nth-child(3) { transition-delay: 0.14s; }
.stat-detail-modal.is-open .stat-detail-item:nth-child(4) { transition-delay: 0.21s; }
.stat-detail-modal.is-open .stat-detail-item:nth-child(n+5) { transition-delay: 0.27s; }

.stat-detail-item::before {
    content: '✓';
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(45, 212, 191, 0.15);
    color: #5eead4;
    font-size: 0.66rem;
    font-weight: 800;
}

.stat-detail-link {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #5eead4;
    font-family: var(--font-head);
    font-size: 0.86rem;
    font-weight: 700;
}

.stat-detail-link span {
    transition: transform 0.3s ease;
}

.stat-detail-link:hover span {
    transform: translateX(5px);
}

@keyframes statSceneFloat {
    0%, 100% { transform: translateY(0) rotateY(-8deg); }
    50% { transform: translateY(-18px) rotateY(8deg); }
}

@keyframes statShadowPulse {
    0%, 100% { transform: scale(0.85); opacity: 0.5; }
    50% { transform: scale(1); opacity: 0.3; }
}

@keyframes statHaloPulse {
    0%, 100% { transform: scale(0.86); opacity: 0.58; }
    50% { transform: scale(1.08); opacity: 1; }
}

@keyframes statVisualRing {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes statLivePulse {
    0%, 100% { transform: scale(0.75); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; }
}

@keyframes statBeamPulse {
    0%, 100% { opacity: 0.35; transform: scaleX(0.82); }
    50% { opacity: 0.9; transform: scaleX(1.08); }
}

@keyframes statHoloOrbitX {
    from { transform: rotate(-13deg) rotateZ(0deg); }
    to { transform: rotate(-13deg) rotateZ(360deg); }
}

@keyframes statHoloOrbitY {
    from { transform: rotate(22deg) rotateY(0deg); }
    to { transform: rotate(22deg) rotateY(360deg); }
}

@keyframes statHoloOrb {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-9px) rotate(1deg); }
}

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

@keyframes statCardShine {
    0%, 35% { transform: translateX(-40px) rotate(28deg); opacity: 0; }
    55% { opacity: 1; }
    80%, 100% { transform: translateX(350px) rotate(28deg); opacity: 0; }
}

@keyframes statFrontCard {
    0%, 100% { transform: translate3d(0, -2px, 65px) rotateX(-5deg) rotateY(8deg); }
    50% { transform: translate3d(0, -10px, 72px) rotateX(-2deg) rotateY(3deg); }
}

@keyframes statProgress {
    from { width: 42%; }
    to { width: 92%; }
}

@keyframes statParticleOne {
    0%, 100% { transform: translate3d(0, 0, 20px); }
    50% { transform: translate3d(-40px, 35px, 80px); }
}

@keyframes statParticleTwo {
    0%, 100% { transform: translate3d(0, 0, 55px); }
    50% { transform: translate3d(28px, -45px, 10px); }
}

/* ---------- End fade (stats → why seamless handoff) ---------- */

.stats-endfade {
    position: absolute;
    inset: 0;
    z-index: 7;
    background: #02100f;
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
}

/* ---------- Wavy layers (bottom) ---------- */

.stats-waves {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: clamp(70px, 12vh, 130px);
    pointer-events: none;
}

.stats-waves .wave {
    position: absolute;
    bottom: 0;
    left: 0;
    /* 2x width — infinite horizontal drift ke liye path repeat hota hai */
    width: 200%;
    height: 100%;
}

.wave-back path {
    fill: rgba(0, 83, 83, 0.22);
}

.wave-mid path {
    fill: rgba(0, 107, 107, 0.3);
}

.wave-front path {
    fill: rgba(45, 212, 191, 0.16);
}

.wave-back  { animation: waveDrift 16s linear infinite; }
.wave-mid   { animation: waveDrift 11s linear infinite reverse; }
.wave-front { animation: waveDrift 8s  linear infinite; }

@keyframes waveDrift {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ============================================================
   Why Us — stairs + robot + rocket scene (6th)
   .why-track lambi hai (600vh); andar sticky viewport.
   Stats ke dark end se same color me continue hota hai.
   Scroll par robot SVG stairs chadhta hai, har stair par
   ek "Other agencies vs Apps4Growth" row flip-in hoti hai,
   top par pahunch kar rocket launch hota hai (sab JS-driven).
   ============================================================ */

.why-track {
    /* Compact track — robot lagataar chalta hai, isliye lambi
       track ki zaroorat nahi; chhoti track = snappy pacing */
    height: 420vh;
    position: relative;
    background: #02100f;
}

.why-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    z-index: 5;
    background:
        radial-gradient(ellipse at 85% 100%, rgba(251, 191, 36, 0.06), transparent 45%),
        radial-gradient(ellipse at 20% 15%, rgba(0, 107, 107, 0.22), transparent 55%),
        linear-gradient(200deg, #02100f 0%, #032a27 60%, #043b36 100%);
}

/* ---------- Zoom-out reveal wrapper ---------- */

.why-zoom {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(1.3);
    transform-origin: 50% 50%;
    will-change: transform, filter;
}

/* Dark curtain — stats ke endfade jaisa same dark color */
.why-dark-fade {
    position: absolute;
    inset: 0;
    z-index: 6;
    background: #02100f;
    opacity: 1;
    pointer-events: none;
    will-change: opacity;
}

/* ---------- Giant ghost word ---------- */

.why-ghost {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-head);
    font-weight: 800;
    font-size: clamp(6rem, 16vw, 15rem);
    letter-spacing: 0.06em;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(237, 240, 218, 0.06);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    will-change: transform;
}

/* ---------- Layout ---------- */

.why-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    align-items: center;
    gap: 32px;
    width: 100%;
    /* Header ke niche fit — content 100vh me hi rahe, cut na ho */
    padding-top: calc(var(--header-height) * 0.7);
    max-height: 100vh;
}

.why-copy {
    will-change: transform, opacity;
}

.why-kicker {
    font-family: var(--font-head);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #2dd4bf;
    opacity: 0.9;
    margin-bottom: 8px;
}

.why-copy h2 {
    /* vh-aware clamp — chhoti height wali screens par bhi fit */
    font-size: clamp(1.4rem, 2.6vw + 0.6vh, 2.5rem);
    font-weight: 800;
    color: var(--white);
    margin-bottom: 8px;
}

.why-copy h2 span {
    color: var(--beige);
}

.why-sub {
    font-size: clamp(0.82rem, 1.4vh, 0.95rem);
    color: rgba(237, 240, 218, 0.7);
    max-width: 460px;
    margin-bottom: clamp(12px, 2.4vh, 22px);
}

/* ---------- Versus rows ---------- */

.why-versus {
    display: flex;
    flex-direction: column;
    gap: 0; /* gap collapsed rows pe bhi space lete — margin sirf .is-on pe */
    perspective: 900px;
}

/* Har row JS class .is-on se flip-in hoti hai.
   Hidden rows space nahi leti — warna content 100vh se
   bahar jaake sticky overflow me cut ho jaata hai. */
.vs-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: 10px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateX(-46px) rotateY(-24deg);
    transform-origin: left center;
    transition:
        opacity 0.5s ease,
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        max-height 0.45s ease,
        margin 0.45s ease;
    will-change: transform, opacity;
    margin: 0;
}

.vs-row.is-on {
    opacity: 1;
    max-height: 96px;
    margin-top: clamp(7px, 1.3vh, 12px);
    transform: translateX(0) rotateY(0);
    overflow: visible;
}

.vs-side {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: clamp(7px, 1.3vh, 11px) 13px;
    border-radius: 13px;
}

.vs-them {
    background: rgba(120, 30, 30, 0.24);
    border: 1px solid rgba(248, 113, 113, 0.32);
}

.vs-us {
    background: rgba(45, 212, 191, 0.09);
    border: 1px solid rgba(45, 212, 191, 0.3);
    box-shadow: 0 0 24px rgba(45, 212, 191, 0.07);
}

/* Active (latest) row ka "us" side extra glow karta hai */
.vs-row.is-active .vs-us {
    background: rgba(45, 212, 191, 0.16);
    border-color: rgba(45, 212, 191, 0.55);
    box-shadow: 0 0 34px rgba(45, 212, 191, 0.18);
}

.vs-ico {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vs-ico svg {
    width: 15px;
    height: 15px;
}

.vs-x {
    background: rgba(248, 113, 113, 0.16);
    color: #f87171;
}

.vs-check {
    background: rgba(45, 212, 191, 0.18);
    color: #2dd4bf;
}

.vs-side small {
    display: block;
    font-family: var(--font-head);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(237, 240, 218, 0.5);
    margin-bottom: 2px;
}

.vs-us small {
    color: #2dd4bf;
}

.vs-them small {
    color: rgba(255, 255, 255, 0.72);
}

.vs-side p {
    font-size: 0.78rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.88);
}

.vs-them p {
    color: rgba(255, 255, 255, 0.9);
}

.vs-badge {
    align-self: center;
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 0.68rem;
    letter-spacing: 1px;
    color: var(--beige);
    background: rgba(237, 240, 218, 0.08);
    border: 1px solid rgba(237, 240, 218, 0.18);
    border-radius: 50px;
    padding: 5px 9px;
}

/* ---------- Progress + CTA ---------- */

.why-progress {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: clamp(12px, 2.2vh, 20px);
}

.why-count {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--beige);
    letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
}

.why-bar {
    position: relative;
    width: 140px;
    height: 3px;
    border-radius: 3px;
    background: rgba(237, 240, 218, 0.2);
    overflow: hidden;
}

.why-bar span {
    position: absolute;
    inset: 0;
    transform-origin: left;
    transform: scaleX(0);
    background: #2dd4bf;
    border-radius: 3px;
    will-change: transform;
}

/* CTA — rocket launch ke saath pop-in hota hai (JS class) */
.why-cta {
    margin-top: clamp(10px, 1.8vh, 16px);
    opacity: 0;
    transform: translateY(24px) scale(0.92);
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}

.why-cta.is-on {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* ---------- SVG scene: stairs, robot, rocket ---------- */

.why-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Scene ko viewport ke hisaab se chhota rakho */
    max-height: min(68vh, 480px);
}

.why-mobile-robot {
    display: none;
}

/* NOTE: filter/drop-shadow yahan mat lagana — SVG ke andar har
   frame transform change hota hai, filter poore scene ko har
   frame re-rasterize karwata hai (scroll jank ka sabab) */
.why-scene {
    width: 100%;
    max-width: min(520px, 100%);
    max-height: min(68vh, 480px);
    height: auto;
    overflow: visible;
}

/* Stars — twinkle */
.wstar {
    fill: rgba(237, 240, 218, 0.7);
    animation: wstarTwinkle 3s ease-in-out infinite;
}

.wstar:nth-child(2n) { animation-delay: -1s;   animation-duration: 2.4s; }
.wstar:nth-child(3n) { animation-delay: -2s;   animation-duration: 3.6s; }
.wstar:nth-child(5n) { animation-delay: -0.6s; animation-duration: 2.8s; }

@keyframes wstarTwinkle {
    0%, 100% { opacity: 0.25; }
    50%      { opacity: 0.95; }
}

/* Stairs — default dark, lit hone par teal glow (JS class .is-lit) */
.stair-top {
    fill: rgba(14, 86, 80, 0.95);
}

.stair-front {
    fill: rgba(4, 38, 36, 0.92);
    stroke: rgba(45, 212, 191, 0.18);
    stroke-width: 1;
}

.stair-glow {
    opacity: 0;
    transition: opacity 0.6s ease;
}

.wstair.is-lit .stair-glow {
    opacity: 1;
}

.stair-num {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 26px;
    fill: transparent;
    stroke: rgba(237, 240, 218, 0.22);
    stroke-width: 1;
    transition: stroke 0.5s ease, fill 0.5s ease;
}

.wstair.is-lit .stair-num {
    fill: rgba(45, 212, 191, 0.85);
    stroke: transparent;
}

/* Launch pad label */
.wpad-label {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 4px;
    fill: rgba(251, 191, 36, 0.75);
}

/* Robot — antenna/core pulse + eye blink (idle life) */
#whyRobot {
    will-change: transform;
}

.robot-antenna {
    animation: robotPulse 1.6s ease-in-out infinite;
}

.robot-core {
    animation: robotPulse 2.2s ease-in-out infinite reverse;
}

@keyframes robotPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

.robot-eye {
    transform-box: fill-box;
    transform-origin: center;
    animation: robotBlink 4s ease-in-out infinite;
}

@keyframes robotBlink {
    0%, 91%, 100% { transform: scaleY(1); }
    94%           { transform: scaleY(0.12); }
}

/* Hop ke dauran arms swing (JS class .is-walking) */
.robot-arm {
    transform-box: fill-box;
    transform-origin: top center;
    transition: transform 0.3s ease;
}

#whyRobot.is-walking .robot-arm-l { transform: rotate(24deg); }
#whyRobot.is-walking .robot-arm-r { transform: rotate(-24deg); }

/* Top par pahunch kar celebration — dono arms upar (JS class) */
#whyRobot.is-celebrating .robot-arm-l { transform: rotate(148deg); }
#whyRobot.is-celebrating .robot-arm-r { transform: rotate(-148deg); }

/* Rocket — idle hover jab tak launch nahi hua */
#whyRocketWrap {
    will-change: transform;
}

.rocket-inner {
    animation: rocketIdle 3.4s ease-in-out infinite;
}

@keyframes rocketIdle {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}

/* Launch state — scene par JS class .is-launching */
.why-scene.is-launching .rocket-inner {
    animation: rocketShake 0.18s linear infinite;
}

@keyframes rocketShake {
    0%   { transform: translate(-1.2px, 0.6px); }
    25%  { transform: translate(1.2px, -0.6px); }
    50%  { transform: translate(-0.8px, -0.8px); }
    75%  { transform: translate(1px, 0.8px); }
    100% { transform: translate(-1.2px, 0.6px); }
}

#whyFlame {
    will-change: transform;
}

.flame-inner {
    transform-box: fill-box;
    transform-origin: top center;
    animation: flameFlicker 0.24s ease-in-out infinite alternate;
}

@keyframes flameFlicker {
    from { transform: scaleY(0.85); }
    to   { transform: scaleY(1.12); }
}

/* Launch smoke — sirf launching me visible */
.why-smoke circle {
    fill: rgba(237, 240, 218, 0.08);
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}

.why-scene.is-launching .why-smoke circle {
    animation: smokePuff 1.4s ease-out infinite;
}

.why-scene.is-launching .why-smoke circle:nth-child(2) { animation-delay: 0.35s; }
.why-scene.is-launching .why-smoke circle:nth-child(3) { animation-delay: 0.7s; }

@keyframes smokePuff {
    0%   { opacity: 0;    transform: scale(0.5) translateY(0); }
    25%  { opacity: 0.85; }
    100% { opacity: 0;    transform: scale(2.4) translateY(-26px); }
}

/* Speed lines — launch ke waqt niche ki taraf daudti hain */
.wspeed {
    stroke: rgba(45, 212, 191, 0.55);
    stroke-width: 2.5;
    stroke-linecap: round;
    opacity: 0;
}

.why-scene.is-launching .wspeed {
    animation: speedFall 0.5s linear infinite;
}

.why-scene.is-launching .wspeed:nth-child(2) { animation-delay: 0.12s; }
.why-scene.is-launching .wspeed:nth-child(3) { animation-delay: 0.24s; }
.why-scene.is-launching .wspeed:nth-child(4) { animation-delay: 0.3s; }
.why-scene.is-launching .wspeed:nth-child(5) { animation-delay: 0.42s; }

@keyframes speedFall {
    0%   { opacity: 0;   transform: translateY(-30px); }
    30%  { opacity: 0.9; }
    100% { opacity: 0;   transform: translateY(120px); }
}

/* End fade — why ke aakhri hisse me scene dark me dive karta hai,
   taaki 7th (solutions) section seamlessly continue lage */
.why-endfade {
    position: absolute;
    inset: 0;
    z-index: 7;
    background: #02100f;
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
}

/* ============================================================
   Solutions — gate reveal story scene (7th)
   .sol-track lambi hai; andar sticky viewport.
   Act 1: band 3D gate + stressed businessman + stress chips.
   Act 2: scroll par doors rotateY se khulte hain, andar se
   roshni + apps4growth logo — banda happy (arms up).
   Act 3: camera gate ke through walk karta hai (scene zoom
   + white flash). Act 4: light stage par "Platforms for
   every department" pricing cards flip-in + live toggle.
   ============================================================ */

.sol-track {
    height: 560vh;
    position: relative;
    background: #02100f;
}

.sol-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    z-index: 6;
    background:
        radial-gradient(ellipse at 50% 100%, rgba(0, 107, 107, 0.25), transparent 60%),
        linear-gradient(180deg, #02100f 0%, #03211f 55%, #04302c 100%);
}

/* ---------- Zoom-out reveal wrapper ---------- */

.sol-zoom {
    position: absolute;
    inset: 0;
    transform: scale(1.3);
    transform-origin: 50% 50%;
    will-change: transform, filter;
}

/* Dark curtain — why ke endfade jaisa same dark color */
.sol-dark-fade {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: #02100f;
    opacity: 1;
    pointer-events: none;
    will-change: opacity;
}

/* End dive — solutions → quest seamless handoff */
.sol-endfade {
    position: absolute;
    inset: 0;
    z-index: 21;
    background: #02100f;
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
}

/* ---------- Giant ghost word ---------- */

.sol-ghost {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-head);
    font-weight: 800;
    font-size: clamp(5rem, 14vw, 13rem);
    letter-spacing: 0.06em;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(237, 240, 218, 0.05);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    will-change: transform;
}

/* ============================================
   Act 1–3: GATE SCENE
   ============================================ */

.gate-scene {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: 50% 42%;
    will-change: transform, opacity;
}

/* Story captions */
.gate-captions {
    position: absolute;
    top: calc(var(--header-height) + 1vh);
    left: 0;
    right: 0;
    text-align: center;
    z-index: 8;
    pointer-events: none;
}

.gate-cap {
    position: absolute;
    left: 0;
    right: 0;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.gate-cap.is-on {
    opacity: 1;
    transform: translateY(0);
}

.gate-cap-kicker {
    font-family: var(--font-head);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #2dd4bf;
    margin-bottom: 6px;
}

.gate-cap h2 {
    font-size: clamp(1.4rem, 2.4vw + 0.8vh, 2.4rem);
    font-weight: 800;
    color: var(--white);

}

.gate-cap h2 span {
    color: var(--beige);
}

.gate-cap[data-cap="1"] h2 span {
    color: #2dd4bf;
    display: none;

}

/* Floor glow under the gate */
.gate-floor {
    position: absolute;
    bottom: 6vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(760px, 90vw);
    height: 90px;
    background: radial-gradient(ellipse at center,
        rgba(45, 212, 191, 0.16), transparent 70%);
    filter: blur(4px);
    pointer-events: none;
}

/* ---------- The 3D gate ---------- */

.gate-wrap {
    position: relative;
    width: min(460px, 66vw);
    height: min(56vh, 430px);
    margin-top: 6vh;
}

/* Soft teal glow behind doors — keeps beige logo readable */
.gate-glow {
    position: absolute;
    inset: -22%;
    background: radial-gradient(ellipse at center,
        rgba(45, 212, 191, 0.35) 0%,
        rgba(6, 78, 72, 0.4) 38%,
        transparent 72%);
    filter: blur(14px);
    opacity: 0;
    will-change: opacity;
    pointer-events: none;
}

/* Behind the doors — logo reveal (dark so beige logo pops) */
.gate-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background:
        radial-gradient(ellipse at 50% 42%,
            rgba(18, 48, 44, 0.98) 0%,
            rgba(6, 28, 26, 0.98) 42%,
            rgba(2, 12, 11, 1) 100%);
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.gate-scene.is-open .gate-inner {
    opacity: 1;
}

.gate-logo {
    display: block;
    width: auto;
    height: clamp(42px, 9vw, 68px);
    max-width: min(78%, 280px);
    object-fit: contain;
    z-index: 2;
    filter: drop-shadow(0 0 18px rgba(245, 230, 190, 0.28));
}

.gate-tagline {
    font-family: var(--font-head);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color: rgba(232, 220, 185, 0.78);
    z-index: 2;
}

/* Rotating light rays behind logo */
.gate-rays {
    position: absolute;
    inset: -40%;
    animation: gateRaysSpin 14s linear infinite;
    animation-play-state: paused;
}

.gate-scene.is-open .gate-rays {
    animation-play-state: running;
}

.gate-rays span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 9%;
    margin: -4.5% 0 0 -100%;
    background: linear-gradient(90deg,
        transparent 8%, rgba(45, 212, 191, 0.14) 50%, transparent 92%);
}

.gate-rays span:nth-child(1) { transform: rotate(0deg); }
.gate-rays span:nth-child(2) { transform: rotate(36deg); }
.gate-rays span:nth-child(3) { transform: rotate(72deg); }
.gate-rays span:nth-child(4) { transform: rotate(108deg); }
.gate-rays span:nth-child(5) { transform: rotate(144deg); }

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

/* Gate frame — pillars + lintel */
.gate-frame {
    position: absolute;
    inset: 0;
    perspective: 1100px;
    perspective-origin: 50% 45%;
}

.gate-frame::before {
    content: '';
    position: absolute;
    inset: -14px -18px 0;
    border: 10px solid #06423c;
    border-bottom: none;
    border-radius: 16px 16px 0 0;
    box-shadow:
        inset 0 0 0 2px rgba(45, 212, 191, 0.25),
        0 0 34px rgba(45, 212, 191, 0.12);
    pointer-events: none;
    z-index: 6;
}

/* Doors — 3D swing (JS rotateY) */
.gate-door {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    background: linear-gradient(180deg, #0a5a52 0%, #063f39 55%, #042e2a 100%);
    box-shadow: inset 0 0 0 2px rgba(45, 212, 191, 0.22);
    will-change: transform;
    z-index: 4;
    overflow: hidden;
}

.gate-door-l {
    left: 0;
    transform-origin: left center;
    border-radius: 8px 0 0 0;
}

.gate-door-r {
    right: 0;
    transform-origin: right center;
    border-radius: 0 8px 0 0;
}

/* Door ke inset panels */
.gate-panel {
    position: absolute;
    left: 14%;
    right: 14%;
    border: 2px solid rgba(45, 212, 191, 0.3);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
}

.gate-panel:nth-child(1) { top: 7%;  height: 34%; }
.gate-panel:nth-child(2) { top: 47%; height: 40%; }

/* Emblem — dono doors par aadha-aadha circle, seam par milkar
   pura golden ring banata hai */
.gate-emblem {
    position: absolute;
    top: 50%;
    width: 34px;
    height: 68px;
    border: 3px solid rgba(251, 191, 36, 0.75);
    box-shadow: 0 0 18px rgba(251, 191, 36, 0.3);
}

.gate-emblem-l {
    right: 0;
    transform: translateY(-50%);
    border-right: none;
    border-radius: 68px 0 0 68px;
}

.gate-emblem-r {
    left: 0;
    transform: translateY(-50%);
    border-left: none;
    border-radius: 0 68px 68px 0;
}

/* Handles */
.gate-handle {
    position: absolute;
    top: 50%;
    width: 7px;
    height: 54px;
    transform: translateY(-50%);
    background: linear-gradient(180deg, #fbbf24, #b98a10);
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.4);
}

.gate-handle-l { right: 12%; }
.gate-handle-r { left: 12%; }

/* ---------- Stress chips (Act 1) ---------- */

.stress-chips {
    position: absolute;
    top: 65%;
    left: 50%;
    z-index: 7;
    pointer-events: none;
}

.stress-chip {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 11px;
    width: 190px;
    font-family: var(--font-head);
    color: #fff;
    background:
        linear-gradient(135deg, rgba(86, 26, 32, 0.92), rgba(31, 16, 22, 0.88));
    border: 1px solid rgba(248, 113, 113, 0.42);
    border-radius: 15px;
    padding: 11px 13px;
    box-shadow:
        0 14px 35px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    opacity: 0;
    transform: translate(var(--cx), calc(var(--cy) + 30px))
               rotate(var(--cr)) scale(0.75);
    transition: opacity 0.5s ease,
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
}

.stress-chip::after {
    content: '';
    position: absolute;
    top: 0;
    left: 15px;
    right: 15px;
    height: 2px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, transparent, #fb7185, transparent);
}

.stress-chip-icon {
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: #fecaca;
    font-size: 0.86rem;
    font-weight: 800;
    background: rgba(248, 113, 113, 0.14);
    border: 1px solid rgba(248, 113, 113, 0.28);
}

.stress-chip-icon svg {
    width: 19px;
    height: 19px;
}

.stress-chip-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.stress-chip-copy small {
    color: rgba(254, 202, 202, 0.7);
    font-size: 0.55rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.stress-chip-copy strong {
    white-space: nowrap;
    color: #fff3f3;
    font-size: clamp(0.67rem, 1vw, 0.8rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.15px;
}

/* Pop-in — halka float bhi (CSS var offsets ke around) */
.stress-chip.is-on {
    opacity: 1;
    transform: translate(var(--cx), var(--cy)) rotate(var(--cr)) scale(1);
    animation: chipFloat 3.2s ease-in-out infinite;
}

.stress-chip:nth-child(2n).is-on { animation-delay: -1.2s; }
.stress-chip:nth-child(3n).is-on { animation-delay: -2.1s; }

@keyframes chipFloat {
    0%, 100% { margin-top: 0; }
    50%      { margin-top: -9px; }
}

/* Gate khulte hi chips bahar fly-away hoti hain */
.stress-chip.is-off {
    opacity: 0;
    animation: none;
    transform: translate(calc(var(--cx) * 1.9), calc(var(--cy) * 1.9))
               rotate(calc(var(--cr) * 4)) scale(0.5);
    transition: opacity 0.45s ease,
                transform 0.6s cubic-bezier(0.55, 0, 0.85, 0.4);
}

/* ---------- Businessman ---------- */

.bizman-wrap {
    position: absolute;
    bottom: 7vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 8;
    will-change: transform;
}

.bizman {
    width: clamp(120px, 15vw, 185px);
    height: auto;
    overflow: visible;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.45));
}

/* Stressed pose (default) — jhuka hua, halka sway */
.bm-body,
.bm-head {
    transform-box: fill-box;
    transform-origin: bottom center;
    transition: transform 0.7s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.bizman .bm-head {
    transform: rotate(4deg) translateY(4px);
    animation: bmWorry 3s ease-in-out infinite;
}

@keyframes bmWorry {
    0%, 100% { transform: rotate(4deg) translateY(4px); }
    50%      { transform: rotate(-2.5deg) translateY(5px); }
}

.bm-arm {
    transform-box: fill-box;
    transform-origin: top center;
    transition: transform 0.7s cubic-bezier(0.34, 1.45, 0.64, 1);
}

/* Face swap — stressed default, happy hidden */
.bm-face {
    transition: opacity 0.35s ease;
}

.bm-face-happy { opacity: 0; }

/* Sweat drops — tapakti rehti hain */
.bm-sweat {
    transform-box: fill-box;
    transform-origin: top center;
    animation: bmSweat 1.8s ease-in infinite;
}

.bm-sweat-2 { animation-delay: -0.9s; }

@keyframes bmSweat {
    0%   { opacity: 0; transform: translateY(0) scale(0.6); }
    30%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(16px) scale(1); }
}

/* Stress squiggles pulse */
.bm-stress-marks {
    animation: bmStressPulse 2.2s ease-in-out infinite;
    transition: opacity 0.35s ease;
}

@keyframes bmStressPulse {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 1; }
}

/* Sparkles — happy hone par hi */
.bm-sparkles { opacity: 0; }

.bm-spark {
    transform-box: fill-box;
    transform-origin: center;
}

/* ========== HAPPY STATE (JS: .is-happy on #bizman) ========== */

.bizman.is-happy .bm-head {
    transform: rotate(0deg) translateY(0);
    animation: bmJoyBounce 1.6s ease-in-out infinite;
}

@keyframes bmJoyBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}

.bizman.is-happy .bm-face-stressed { opacity: 0; }
.bizman.is-happy .bm-face-happy    { opacity: 1; }
.bizman.is-happy .bm-stress-marks  { opacity: 0; animation: none; }
.bizman.is-happy .bm-sweat         { animation: none; opacity: 0; }

/* Dono arms celebration me upar — briefcase bhi hawa me! */
.bizman.is-happy .bm-arm-l { transform: rotate(150deg); }
.bizman.is-happy .bm-arm-r { transform: rotate(-150deg); }

.bizman.is-happy .bm-sparkles {
    opacity: 1;
    transition: opacity 0.4s ease 0.3s;
}

.bizman.is-happy .bm-spark {
    animation: bmSparkTwinkle 1.4s ease-in-out infinite;
}

.bizman.is-happy .bm-spark:nth-child(2) { animation-delay: -0.5s; }
.bizman.is-happy .bm-spark:nth-child(3) { animation-delay: -0.9s; }

@keyframes bmSparkTwinkle {
    0%, 100% { opacity: 0.2; transform: scale(0.6) rotate(0deg); }
    50%      { opacity: 1;   transform: scale(1.15) rotate(24deg); }
}

/* Pura banda happy me halka bounce */
.bizman.is-happy {
    animation: bmHop 1.6s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

@keyframes bmHop {
    0%, 100% { transform: translateY(0); }
    42%      { transform: translateY(-12px); }
    58%      { transform: translateY(-12px); }
}

/* ---------- Scroll hint ---------- */

.gate-hint {
    position: absolute;
    bottom: 2.6vh;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-head);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(237, 240, 218, 0.5);
    z-index: 8;
    transition: opacity 0.4s ease;
}

.gate-hint svg {
    width: 14px;
    height: 14px;
    animation: gateHintBob 1.6s ease-in-out infinite;
}

@keyframes gateHintBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(5px); }
}

/* ---------- White-light flash (walk-through) ---------- */

.gate-flash {
    position: absolute;
    inset: 0;
    z-index: 16;
    background: radial-gradient(ellipse at 50% 45%,
        #fffdf2 0%, #f2f6e9 55%, #e2ecdf 100%);
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
}

/* ============================================
   Act 4: SOLUTIONS STAGE (3D glass platform)
   White flash ke baad soft teal-depth stage —
   floating orbs, glass cards, mouse tilt.
   ============================================ */

.sol-stage {
    position: absolute;
    inset: 0;
    z-index: 14;
    display: flex;
    align-items: center;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% -10%, rgba(45, 212, 191, 0.18), transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(0, 83, 83, 0.12), transparent 45%),
        radial-gradient(ellipse at 10% 70%, rgba(0, 107, 107, 0.1), transparent 40%),
        linear-gradient(165deg, #e8f0e6 0%, #d4e4dc 42%, #c5d9d0 100%);
    opacity: 0;
    pointer-events: none;
    will-change: opacity, transform;
}

.sol-stage.is-live {
    pointer-events: auto;
}

/* Aurora blobs — stats-style depth */
.sol-aurora {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.sol-aurora::before,
.sol-aurora::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.55;
}

.sol-aurora::before {
    width: 48vw;
    height: 48vw;
    top: -18%;
    left: -8%;
    background: radial-gradient(circle, rgba(45, 212, 191, 0.35), transparent 68%);
    animation: auroraDrift 16s ease-in-out infinite alternate;
}

.sol-aurora::after {
    width: 42vw;
    height: 42vw;
    bottom: -22%;
    right: -6%;
    background: radial-gradient(circle, rgba(0, 83, 83, 0.28), transparent 68%);
    animation: auroraDrift 20s ease-in-out infinite alternate-reverse;
}

/* Perspective floor grid */
.sol-grid {
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: -5%;
    height: 55%;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(0, 83, 83, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 83, 83, 0.07) 1px, transparent 1px);
    background-size: 48px 48px;
    transform: perspective(600px) rotateX(58deg);
    transform-origin: center bottom;
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.55) 40%, transparent 95%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.55) 40%, transparent 95%);
    opacity: 0.7;
}

/* Rising ambient orbs */
.sol-orbs {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.sol-orbs span {
    position: absolute;
    bottom: -60px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 28%,
        rgba(255, 255, 255, 0.55),
        rgba(45, 212, 191, 0.18) 45%,
        rgba(0, 83, 83, 0.06) 70%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 8px 24px rgba(0, 83, 83, 0.12);
    animation: solOrbRise linear infinite;
}

.sol-orbs span:nth-child(1) { left: 8%;  width: 28px; height: 28px; animation-duration: 14s; animation-delay: 0s; }
.sol-orbs span:nth-child(2) { left: 22%; width: 14px; height: 14px; animation-duration: 11s; animation-delay: 2s; }
.sol-orbs span:nth-child(3) { left: 40%; width: 36px; height: 36px; animation-duration: 17s; animation-delay: 1s; }
.sol-orbs span:nth-child(4) { left: 58%; width: 18px; height: 18px; animation-duration: 12s; animation-delay: 4s; }
.sol-orbs span:nth-child(5) { left: 74%; width: 24px; height: 24px; animation-duration: 15s; animation-delay: 0.8s; }
.sol-orbs span:nth-child(6) { left: 88%; width: 16px; height: 16px; animation-duration: 10s; animation-delay: 3s; }

@keyframes solOrbRise {
    0%   { transform: translateY(0) translateX(0) scale(0.7); opacity: 0; }
    12%  { opacity: 0.9; }
    100% { transform: translateY(-110vh) translateX(3vw) scale(1.05); opacity: 0; }
}

.sol-layout {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: calc(var(--header-height) * 0.55);
}

/* ---------- Heading ---------- */

.sol-head {
    text-align: center;
    will-change: transform, opacity;
}

.sol-kicker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-family: var(--font-head);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 10px;
}

.sol-kicker-line {
    width: 46px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--teal), transparent);
}

.sol-head h2 {
    font-size: clamp(1.7rem, 3vw + 0.4vh, 2.7rem);
    font-weight: 800;
    color: #0c1f22;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 20px rgba(255, 255, 255, 0.4);
}

.sol-head h2 em {
    font-style: italic;
    font-weight: 700;
    background: linear-gradient(100deg, #005353, #2dd4bf 55%, #0a6b6b);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.sol-underline {
    display: block;
    width: 84px;
    height: 3px;
    margin: 14px auto 0;
    border-radius: 3px;
    background: linear-gradient(90deg, #005353, #2dd4bf);
    box-shadow: 0 0 12px rgba(45, 212, 191, 0.45);
}

/* ---------- Toggle row ---------- */

.sol-toggle-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: clamp(10px, 2vh, 18px);
    will-change: transform, opacity;
}

.sol-offer-line {
    max-width: 36rem;
    margin-left: 0;
    margin-right: auto;
    font-family: var(--font-head);
    font-size: clamp(0.9rem, 1.4vw, 1.05rem);
    font-weight: 600;
    line-height: 1.4;
    color: #0c1f22;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.sol-toggle-glass {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow:
        0 10px 28px rgba(0, 83, 83, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.sol-toggle-label {
    font-family: var(--font-head);
    font-size: 0.85rem;
    font-weight: 600;
    color: #7b8a80;
    transition: color 0.3s ease;
}

.sol-toggle-label.is-active {
    color: #0c1f22;
}

.sol-switch {
    position: relative;
    width: 56px;
    height: 30px;
    border: none;
    border-radius: 30px;
    background: linear-gradient(135deg, #005353, #0a6b6b);
    cursor: pointer;
    transition: background 0.3s ease, box-shadow 0.3s ease;
    flex: 0 0 auto;
    box-shadow: 0 0 16px rgba(45, 212, 191, 0.35);
}

.sol-switch[aria-checked="true"] {
    background: linear-gradient(135deg, #0a6b6b, #2dd4bf);
}

.sol-knob {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
    transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.sol-switch[aria-checked="true"] .sol-knob {
    transform: translateX(26px);
}

.sol-badge {
    font-family: var(--font-head);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--teal);
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 83, 83, 0.12);
    border-radius: 50px;
    padding: 8px 14px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 6px 16px rgba(0, 83, 83, 0.08);
}

/* ---------- Plan cards — exactly 5 visible per row ---------- */

.sol-cards {
    --sol-gap: clamp(14px, 1.5vw, 22px);
    --sol-side: clamp(20px, 3vw, 40px);
    /* 100vw based — % flex max-content track mein resolve nahi hota */
    --sol-card-w: calc((100vw - (var(--sol-side) * 2) - (var(--sol-gap) * 4)) / 5);
    position: relative;
    width: 100vw;
    max-width: 100vw;
    margin-top: clamp(10px, 1.8vh, 18px);
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 14px 0 8px;
    overflow: hidden;
    opacity: 0;
    will-change: opacity;
}

.sol-cards-track {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: var(--sol-gap);
    width: max-content;
    padding: 10px var(--sol-side) 14px;
    animation: solMarqueeRtl 60s linear infinite;
    animation-play-state: paused;
    will-change: transform;
}

.sol-cards-track.is-running {
    animation-play-state: running;
}

.sol-cards-track.is-running.is-paused,
.sol-cards-track.is-running:hover {
    animation-play-state: paused;
}

@keyframes solMarqueeRtl {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.sol-card {
    position: relative;
    flex: 0 0 var(--sol-card-w);
    width: var(--sol-card-w);
    min-width: var(--sol-card-w);
    max-width: var(--sol-card-w);
    box-sizing: border-box;
}

/* Face — static glass panel (no float / no tilt shake) */
.sol-card-face {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 16px 16px 18px;
    border-radius: 20px;
    background:
        linear-gradient(155deg, rgba(255, 255, 255, 0.94), rgba(248, 252, 248, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow:
        0 16px 36px rgba(0, 61, 61, 0.12),
        0 3px 12px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(0, 83, 83, 0.04);
    transition: box-shadow 0.35s ease, border-color 0.35s ease;
    color: #0c1f22;
}

.sol-card:hover .sol-card-face {
    border-color: rgba(45, 212, 191, 0.45);
    box-shadow:
        0 22px 44px rgba(0, 61, 61, 0.16),
        0 0 28px rgba(45, 212, 191, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* Sweeping shine across glass */
.sol-card-shine {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.sol-card-shine::after {
    content: '';
    position: absolute;
    top: -40%;
    left: -60%;
    width: 50%;
    height: 180%;
    background: linear-gradient(105deg,
        transparent 30%,
        rgba(255, 255, 255, 0.35) 48%,
        transparent 62%);
    transform: skewX(-18deg);
    animation: solShineSweep 7s ease-in-out infinite;
}

.sol-card[data-solcard="1"] .sol-card-shine::after { animation-delay: -2.4s; }
.sol-card[data-solcard="2"] .sol-card-shine::after { animation-delay: -4.2s; }
.sol-card[data-solcard="3"] .sol-card-shine::after { animation-delay: -1.1s; }
.sol-card[data-solcard="4"] .sol-card-shine::after { animation-delay: -3.3s; }
.sol-card[data-solcard="5"] .sol-card-shine::after { animation-delay: -5.1s; }
.sol-card[data-solcard="6"] .sol-card-shine::after { animation-delay: -0.7s; }
.sol-card[data-solcard="7"] .sol-card-shine::after { animation-delay: -2.9s; }
.sol-card[data-solcard="8"] .sol-card-shine::after { animation-delay: -4.6s; }
.sol-card[data-solcard="9"] .sol-card-shine::after { animation-delay: -1.6s; }
.sol-card[data-solcard="10"] .sol-card-shine::after { animation-delay: -3.8s; }
.sol-card[data-solcard="11"] .sol-card-shine::after { animation-delay: -5.5s; }

@keyframes solShineSweep {
    0%, 55%, 100% { left: -60%; opacity: 0; }
    60% { opacity: 1; }
    78% { left: 120%; opacity: 0.6; }
}

/* Alternate: odd = white, even = dark teal */
.sol-card:nth-child(even) {
    z-index: 2;
}

.sol-card:nth-child(even) .sol-card-face {
    background:
        radial-gradient(ellipse at 28% 0%, rgba(45, 212, 191, 0.28), transparent 50%),
        linear-gradient(165deg, #164038 0%, #0c2824 45%, #071a17 100%);
    border-color: rgba(45, 212, 191, 0.35);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow:
        0 32px 70px rgba(2, 24, 22, 0.5),
        0 0 50px rgba(45, 212, 191, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        inset 0 -20px 40px rgba(0, 0, 0, 0.3);
    color: #f4f7ef;
}

.sol-card:nth-child(even):hover .sol-card-face {
    border-color: rgba(45, 212, 191, 0.6);
    box-shadow:
        0 40px 80px rgba(2, 24, 22, 0.55),
        0 0 70px rgba(45, 212, 191, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.sol-card-featured {
    z-index: 3;
}

.sol-popular {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    white-space: nowrap;
    font-family: var(--font-head);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #0a1f1c;
    background: linear-gradient(135deg, #2dd4bf, #a7f3d0);
    border: none;
    border-radius: 50px;
    padding: 5px 12px;
    box-shadow: 0 4px 14px rgba(45, 212, 191, 0.4);
    animation: solBadgePulse 2.4s ease-in-out infinite;
}

@keyframes solBadgePulse {
    0%, 100% { box-shadow: 0 6px 20px rgba(45, 212, 191, 0.4); }
    50%      { box-shadow: 0 8px 28px rgba(45, 212, 191, 0.7); }
}

/* Icon + weeks row */
.sol-card-visual {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.sol-ico-3d {
    position: relative;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sol-ico-ring {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    border: 1.5px solid rgba(0, 83, 83, 0.18);
    background: linear-gradient(145deg, rgba(255,255,255,0.9), rgba(45, 212, 191, 0.12));
    box-shadow:
        0 8px 16px rgba(0, 83, 83, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.sol-card:nth-child(even) .sol-ico-ring {
    border-color: rgba(45, 212, 191, 0.4);
    background: linear-gradient(145deg, rgba(45, 212, 191, 0.25), rgba(0, 83, 83, 0.4));
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.35),
        0 0 20px rgba(45, 212, 191, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.sol-ico-core {
    position: relative;
    z-index: 1;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #005353, #0a6b6b);
    color: #edf0da;
    box-shadow:
        0 6px 14px rgba(0, 83, 83, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.sol-card:nth-child(even) .sol-ico-core {
    background: linear-gradient(160deg, #2dd4bf, #0a6b6b);
    color: #0a1f1c;
}

.sol-ico-core svg {
    width: 15px;
    height: 15px;
}

.sol-cat {
    font-family: var(--font-head);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: #1a3d34;
    margin-bottom: 2px;
    line-height: 1.3;
}

.sol-card:nth-child(even) .sol-cat {
    color: #a7f3d0;
}

.sol-time {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.sol-weeks {
    font-family: var(--font-head);
    font-size: clamp(1.45rem, 1.4vw + 0.7vh, 1.9rem);
    font-weight: 800;
    line-height: 1;
    color: #061614;
    font-variant-numeric: tabular-nums;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.sol-weeks.is-swapping {
    opacity: 0;
    transform: translateY(-8px);
}

.sol-weeks-unit {
    font-family: var(--font-head);
    font-size: 0.75rem;
    font-weight: 600;
    color: #3d5248;
}

.sol-card:nth-child(even) .sol-weeks {
    color: #ffffff;
    text-shadow: 0 0 20px rgba(45, 212, 191, 0.45);
}
.sol-card:nth-child(even) .sol-weeks-unit { color: rgba(237, 240, 218, 0.85); }

.sol-scope {
    display: none;
}

.sol-desc {
    font-size: 0.82rem;
    line-height: 1.4;
    font-weight: 500;
    color: #1a2e28;
    margin-top: 6px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 83, 83, 0.14);
}

.sol-card:nth-child(even) .sol-desc {
    color: #edf0da;
    border-bottom-color: rgba(255, 255, 255, 0.2);
}

.sol-feats {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 8px 0 12px;
    flex: 1;
}

.sol-feats li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.3;
    color: #0c1f22;
}

.sol-card:nth-child(even) .sol-feats li {
    color: #ffffff;
}

.sol-feat-ico {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: rgba(0, 83, 83, 0.1);
    border: 1px solid rgba(0, 83, 83, 0.16);
    color: #005353;
    box-shadow: 0 3px 8px rgba(0, 83, 83, 0.06);
}

.sol-feat-ico svg {
    width: 12px;
    height: 12px;
}

.sol-card:nth-child(even) .sol-feat-ico {
    background: rgba(45, 212, 191, 0.2);
    border-color: rgba(45, 212, 191, 0.45);
    color: #5eead4;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}

.sol-card:nth-child(even) .sol-cta {
    background: linear-gradient(135deg, #edf0da, #fff);
    color: #0a1f1c;
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

.sol-card:nth-child(even) .sol-cta:hover {
    background: #2dd4bf;
    color: #0a1f1c;
    box-shadow: 0 12px 28px rgba(45, 212, 191, 0.4);
}

.sol-cta {
    display: block;
    text-align: center;
    font-family: var(--font-head);
    font-size: 0.76rem;
    font-weight: 600;
    color: #061614;
    border: 1.5px solid rgba(0, 83, 83, 0.28);
    border-radius: 50px;
    padding: 9px 14px;
    margin-top: auto;
    background: rgba(255, 255, 255, 0.75);
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.sol-cta:hover {
    background: #005353;
    color: var(--white);
    border-color: transparent;
    box-shadow: 0 12px 28px rgba(0, 83, 83, 0.3);
}

.sol-cta-light {
    background: linear-gradient(135deg, #edf0da, #fff);
    color: #0a1f1c;
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

.sol-cta-light:hover {
    background: #2dd4bf;
    color: #0a1f1c;
    box-shadow: 0 12px 28px rgba(45, 212, 191, 0.4);
}

/* ============================================================
   Growth Quest — reward run (8th)
   Scroll-driven game: robot START → checkpoints → FINISH.
   Benefit cards unlock along the path. At FINISH: cracker
   burst + % discount popup, then CTA.
   ============================================================ */

.quest-track {
    height: 500vh;
    position: relative;
    background: #02100f;
}

.quest-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    z-index: 7;
    background:
        radial-gradient(ellipse at 70% 20%, rgba(251, 191, 36, 0.08), transparent 45%),
        radial-gradient(ellipse at 30% 80%, rgba(0, 107, 107, 0.28), transparent 55%),
        linear-gradient(180deg, #02100f 0%, #03211f 50%, #04302c 100%);
}

.quest-sticky.is-reward {
    overflow: hidden;
    align-items: center;
}

.quest-zoom {
    position: absolute;
    inset: 0;
    transform: scale(1.25);
    transform-origin: 50% 50%;
    will-change: transform, filter;
}

.quest-dark-fade {
    position: absolute;
    inset: 0;
    z-index: 30;
    background: #02100f;
    opacity: 1;
    pointer-events: none;
    will-change: opacity;
}

.quest-ghost {
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-head);
    font-weight: 800;
    font-size: clamp(4.5rem, 13vw, 12rem);
    letter-spacing: 0.08em;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(237, 240, 218, 0.05);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    will-change: transform;
}

.quest-aurora {
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(45, 212, 191, 0.12), transparent 40%),
        radial-gradient(ellipse at 85% 60%, rgba(251, 191, 36, 0.1), transparent 35%);
    pointer-events: none;
    animation: questAurora 12s ease-in-out infinite alternate;
}

@keyframes questAurora {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(-2%, 3%) scale(1.05); }
}

.quest-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(45, 212, 191, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(45, 212, 191, 0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at 50% 60%, #000 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 60%, #000 20%, transparent 70%);
    pointer-events: none;
    transform: perspective(600px) rotateX(58deg) translateY(12vh);
    transform-origin: 50% 100%;
}

.quest-stage {
    position: absolute;
    inset: 0;
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: calc(var(--header-height-scrolled) + 14px) 24px 28px;
    z-index: 2;
    box-sizing: border-box;
}

.quest-stage.is-reward {
    justify-content: flex-start;
    padding-bottom: 32px;
}

.quest-stage.is-reward .quest-head,
.quest-stage.is-reward .quest-hud {
    display: none;
}

.quest-stage.is-reward .quest-board-wrap {
    opacity: 0.72;
    transform: scale(0.96);
    filter: none;
    margin-top: 0;
}

.quest-stage.is-reward .quest-board {
    height: min(44vh, 360px);
}

.quest-stage.is-reward .quest-hint {
    opacity: 0 !important;
}

.quest-head {
    text-align: center;
    max-width: 640px;
    opacity: 0;
    transform: translateY(24px);
    will-change: opacity, transform;
    z-index: 4;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.quest-kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-head);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #5eead4;
    margin-bottom: 10px;
}

.quest-kicker-line {
    display: block;
    width: 28px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #5eead4);
}

.quest-kicker-line:last-child {
    background: linear-gradient(90deg, #5eead4, transparent);
}

.quest-head h2 {
    font-size: clamp(1.45rem, 3.2vw, 2.35rem);
    color: var(--beige);
    font-weight: 700;
}

.quest-head h2 em {
    font-style: normal;
    color: #fbbf24;
}

.quest-sub {
    margin-top: 8px;
    font-size: 0.92rem;
    color: rgba(237, 240, 218, 0.6);
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}

/* ---- Game HUD ---- */

.quest-hud {
    width: min(420px, 88vw);
    margin-top: 14px;
    padding: 12px 16px 14px;
    border-radius: 16px;
    background: rgba(4, 28, 26, 0.72);
    border: 1px solid rgba(45, 212, 191, 0.22);
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(237, 240, 218, 0.06);
    backdrop-filter: blur(10px);
    z-index: 4;
    opacity: 0;
    transform: translateY(16px);
    will-change: opacity, transform;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.quest-hud-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.quest-hud-tag {
    font-family: var(--font-head);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #5eead4;
}

.quest-hud-score {
    font-family: var(--font-head);
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(237, 240, 218, 0.65);
}

.quest-hud-track {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);
    overflow: visible;
}

.quest-hud-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0a6b6b, #2dd4bf, #fbbf24);
    box-shadow: 0 0 16px rgba(45, 212, 191, 0.45);
    transition: width 0.15s linear;
}

.quest-hud-gem {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    margin-left: -7px;
    border-radius: 50%;
    background: #0a2a28;
    border: 2px solid rgba(45, 212, 191, 0.35);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
    transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}

.quest-hud-gem[data-gem="0"] { left: 20%; }
.quest-hud-gem[data-gem="1"] { left: 40%; }
.quest-hud-gem[data-gem="2"] { left: 60%; }
.quest-hud-gem[data-gem="3"] { left: 80%; }

.quest-hud-gem.is-on {
    background: radial-gradient(circle, #fde68a, #f59e0b);
    border-color: #fbbf24;
    box-shadow: 0 0 14px rgba(251, 191, 36, 0.65);
    transform: scale(1.15);
}

/* ---- 3D board ---- */

.quest-board-wrap {
    position: relative;
    width: min(1000px, 92vw);
    flex-shrink: 0;
    padding: 0 12px;
    box-sizing: border-box;
    transition: opacity 0.45s ease, transform 0.45s ease, filter 0.45s ease;
}

.quest-stage.is-reward .quest-board-wrap {
    pointer-events: none;
}

.quest-board {
    position: relative;
    width: 100%;
    height: min(44vh, 360px);
    margin-top: 8px;
    perspective: 900px;
    transform-style: preserve-3d;
    overflow: visible;
}

.quest-board-dim {
    position: absolute;
    inset: 0;
    z-index: 15;
    border-radius: 24px;
    background: rgba(2, 16, 15, 0);
    pointer-events: none;
    transition: background 0.4s ease;
}

.quest-stage.is-reward .quest-board-dim {
    background: rgba(2, 16, 15, 0.55);
}

.quest-board-tilt {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform 0.12s ease-out;
    will-change: transform;
}

.quest-floor {
    position: absolute;
    inset: 8% 2% 0;
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(0, 83, 83, 0.15), rgba(2, 16, 15, 0.6)),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 40px,
            rgba(45, 212, 191, 0.04) 40px,
            rgba(45, 212, 191, 0.04) 41px
        );
    border: 1px solid rgba(45, 212, 191, 0.12);
    box-shadow:
        inset 0 0 60px rgba(0, 83, 83, 0.25),
        0 30px 60px rgba(0, 0, 0, 0.45);
    transform: rotateX(18deg) translateZ(-20px);
    transform-origin: 50% 100%;
    overflow: hidden;
}

.quest-path {
    position: absolute;
    inset: 0;
}

.quest-path-line {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.85;
}

.quest-route-glow {
    filter: drop-shadow(0 0 8px rgba(45, 212, 191, 0.6));
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    opacity: 0.95;
}

.quest-path-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%, rgba(45, 212, 191, 0.12), transparent 60%);
    pointer-events: none;
}

/* Pads */

.quest-pad {
    position: absolute;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transform: translate(-50%, -50%);
}

.quest-pad-start {
    left: 8%;
    top: 72%;
}

.quest-pad-end {
    left: 86%;
    top: 22%;
    z-index: 9;
}

.quest-pad-ring {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px dashed rgba(45, 212, 191, 0.45);
    background: radial-gradient(circle, rgba(45, 212, 191, 0.2), transparent 70%);
    box-shadow: 0 0 24px rgba(45, 212, 191, 0.25);
    animation: questPadPulse 2.4s ease-in-out infinite;
}

.quest-pad-end .quest-pad-ring {
    width: 64px;
    height: 64px;
    border-width: 2.5px;
    border-color: rgba(251, 191, 36, 0.55);
    background: radial-gradient(circle, rgba(251, 191, 36, 0.25), transparent 70%);
    box-shadow: 0 0 28px rgba(251, 191, 36, 0.3);
}

.quest-pad-end.is-open .quest-pad-ring {
    animation: none;
    border-style: solid;
    transform: scale(1.15);
}

@keyframes questPadPulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.08); opacity: 1; }
}

.quest-pad-label {
    font-family: var(--font-head);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: #5eead4;
    text-transform: uppercase;
}

.quest-pad-end .quest-pad-label {
    color: #fbbf24;
}

/* Treasure chest */

.quest-chest {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 56px;
    height: 46px;
    transform: translate(-50%, -62%);
    transform-style: preserve-3d;
    transition: transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1);
    filter: drop-shadow(0 4px 12px rgba(251, 191, 36, 0.35));
}

.quest-chest-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
    border-radius: 6px 6px 8px 8px;
    background: linear-gradient(180deg, #c9892e, #8a5a12);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}

.quest-chest-lid {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 16px;
    border-radius: 8px 8px 2px 2px;
    background: linear-gradient(180deg, #f0b54a, #c9892e);
    transform-origin: bottom center;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 -2px 8px rgba(251, 191, 36, 0.3);
}

.quest-chest-lock {
    position: absolute;
    top: 12px;
    left: 50%;
    width: 10px;
    height: 12px;
    margin-left: -5px;
    border-radius: 3px;
    background: #fbbf24;
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.6);
    z-index: 2;
}

.quest-pad-end.is-open .quest-chest-lid {
    transform: rotateX(-118deg) translateY(-4px);
}

.quest-pad-end.is-open .quest-chest {
    transform: translate(-50%, -62%) scale(1.12);
}

.quest-pad-end.is-open .quest-chest-lock {
    opacity: 0;
}

/* Path checkpoint nodes */

.quest-nodes {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

.quest-node {
    position: absolute;
    left: var(--nx);
    top: var(--ny);
    width: 22px;
    height: 22px;
    transform: translate(-50%, -50%) scale(0.5);
    border-radius: 50%;
    background: rgba(2, 16, 15, 0.9);
    border: 2px solid rgba(45, 212, 191, 0.25);
    box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.06);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, border-color 0.35s ease, box-shadow 0.35s ease, transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1), visibility 0.4s;
}

.quest-node::after {
    content: '';
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: rgba(45, 212, 191, 0.15);
}

.quest-node.is-on {
    opacity: 1;
    visibility: visible;
    border-color: #2dd4bf;
    box-shadow: 0 0 20px rgba(45, 212, 191, 0.45);
    transform: translate(-50%, -50%) scale(1.15);
}

.quest-node.is-on::after {
    background: radial-gradient(circle, #5eead4, #0a6b6b);
    animation: questNodePulse 1.6s ease-in-out infinite;
}

@keyframes questNodePulse {
    0%, 100% { opacity: 0.85; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.12); }
}

/* Benefit cards */

.quest-benefits {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
}

.quest-benefit {
    position: absolute;
    left: var(--bx);
    top: var(--by);
    transform: translate(-50%, -50%) scale(0.6) rotateY(-22deg);
    opacity: 0;
    visibility: hidden;
    z-index: 6;
    will-change: transform, opacity;
    pointer-events: none;
    transition: opacity 0.45s cubic-bezier(0.34, 1.4, 0.64, 1),
                transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1),
                visibility 0.45s;
}

.quest-benefit.is-on {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1) rotateY(0deg);
    pointer-events: auto;
}

.quest-benefit.is-pop .quest-benefit-face {
    animation: questCardPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes questCardPop {
    0% { transform: scale(1) rotateX(0deg); }
    40% { transform: scale(1.12) rotateX(-8deg); }
    100% { transform: scale(1) rotateX(0deg); }
}

.quest-benefit-face {
    position: relative;
    width: clamp(112px, 13vw, 140px);
    padding: 12px 11px 13px;
    border-radius: 14px;
    background: linear-gradient(155deg, rgba(10, 56, 52, 0.97), rgba(4, 28, 26, 0.98));
    border: 1px solid rgba(94, 234, 212, 0.35);
    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(237, 240, 218, 0.12);
    text-align: center;
    backdrop-filter: blur(10px);
    transition: box-shadow 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
    transform-style: preserve-3d;
}

.quest-benefit.is-on .quest-benefit-face {
    border-color: rgba(94, 234, 212, 0.55);
    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.45),
        0 0 24px rgba(45, 212, 191, 0.2),
        inset 0 1px 0 rgba(237, 240, 218, 0.1);
}

.quest-benefit-badge {
    position: absolute;
    top: -8px;
    right: -6px;
    padding: 3px 8px;
    border-radius: 999px;
    font-family: var(--font-head);
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #02100f;
    background: linear-gradient(135deg, #fde68a, #fbbf24);
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4);
    opacity: 0;
    transform: scale(0.6) translateY(6px);
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.quest-benefit.is-on .quest-benefit-badge {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.quest-benefit-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-bottom: 7px;
    border-radius: 10px;
    background: rgba(45, 212, 191, 0.18);
    color: #99f6e4;
    box-shadow: inset 0 0 0 1px rgba(94, 234, 212, 0.25);
}

.quest-benefit-ico svg {
    width: 18px;
    height: 18px;
}

.quest-benefit-face h3 {
    font-size: 0.82rem;
    font-weight: 700;
    color: #edf0da;
    margin-bottom: 3px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.quest-benefit-face p {
    font-size: 0.68rem;
    color: rgba(237, 240, 218, 0.82);
    line-height: 1.35;
}

.quest-stage.is-reward .quest-benefit {
    opacity: 0 !important;
    pointer-events: none;
}

/* Robot */

.quest-robot-wrap {
    position: absolute;
    left: 6%;
    top: 72%;
    z-index: 10;
    transform: translate(-50%, -78%);
    will-change: left, top, transform;
    pointer-events: none;
}

.quest-trail {
    position: absolute;
    left: 50%;
    top: 55%;
    width: 40px;
    height: 20px;
    margin-left: -20px;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.quest-trail.is-on {
    opacity: 1;
}

.quest-trail span {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2dd4bf;
    box-shadow: 0 0 10px #2dd4bf;
    animation: questTrail 0.6s ease-out infinite;
}

.quest-trail span:nth-child(1) { left: 4px; animation-delay: 0s; }
.quest-trail span:nth-child(2) { left: 16px; animation-delay: 0.12s; opacity: 0.7; }
.quest-trail span:nth-child(3) { left: 28px; animation-delay: 0.24s; opacity: 0.45; }

@keyframes questTrail {
    0% { transform: translateX(0) scale(1); opacity: 0.9; }
    100% { transform: translateX(-22px) scale(0.2); opacity: 0; }
}

.quest-robot {
    position: relative;
    width: 52px;
    height: 72px;
    transform-style: preserve-3d;
    animation: questBob 0.55s ease-in-out infinite;
}

.quest-robot.is-running {
    animation: questBob 0.35s ease-in-out infinite;
}

.quest-robot.is-celebrate {
    animation: questCelebrate 0.6s ease-in-out 3;
}

@keyframes questBob {
    0%, 100% { transform: translateY(0) rotateZ(-2deg); }
    50% { transform: translateY(-6px) rotateZ(2deg); }
}

@keyframes questCelebrate {
    0%, 100% { transform: translateY(0) scale(1); }
    40% { transform: translateY(-18px) scale(1.12) rotateZ(-8deg); }
    70% { transform: translateY(-4px) scale(1.05) rotateZ(6deg); }
}

.qr-shadow {
    position: absolute;
    bottom: -4px;
    left: 50%;
    width: 36px;
    height: 10px;
    margin-left: -18px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    filter: blur(3px);
}

.qr-antenna {
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 10px;
    margin-left: -1px;
    background: #5fc2b4;
}

.qr-antenna span {
    position: absolute;
    top: -5px;
    left: 50%;
    width: 8px;
    height: 8px;
    margin-left: -4px;
    border-radius: 50%;
    background: #2dd4bf;
    box-shadow: 0 0 10px #2dd4bf;
    animation: questAntenna 1.2s ease-in-out infinite;
}

@keyframes questAntenna {
    0%, 100% { box-shadow: 0 0 8px #2dd4bf; }
    50% { box-shadow: 0 0 16px #5eead4, 0 0 24px #2dd4bf; }
}

.qr-head {
    position: absolute;
    top: 10px;
    left: 50%;
    width: 34px;
    height: 26px;
    margin-left: -17px;
    border-radius: 12px;
    background: linear-gradient(180deg, #7dd3c8, #0a6b6b);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.qr-eye {
    position: absolute;
    top: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #02312e;
    box-shadow: inset 0 0 0 1.5px #edf0da;
}

.qr-eye-l { left: 7px; }
.qr-eye-r { right: 7px; }

.qr-mouth {
    position: absolute;
    bottom: 5px;
    left: 50%;
    width: 10px;
    height: 3px;
    margin-left: -5px;
    border-radius: 0 0 4px 4px;
    background: #02312e;
}

.qr-body {
    position: absolute;
    top: 34px;
    left: 50%;
    width: 38px;
    height: 28px;
    margin-left: -19px;
    border-radius: 12px;
    background: linear-gradient(180deg, #5fc2b4, #005353);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}

.qr-core {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: #02796d;
    box-shadow: 0 0 10px #2dd4bf;
}

.qr-arm {
    position: absolute;
    top: 36px;
    width: 8px;
    height: 22px;
    border-radius: 4px;
    background: #5fc2b4;
    transform-origin: top center;
}

.qr-arm-l {
    left: 2px;
    animation: questArmL 0.35s ease-in-out infinite;
}

.qr-arm-r {
    right: 2px;
    animation: questArmR 0.35s ease-in-out infinite;
}

.qr-leg {
    position: absolute;
    top: 58px;
    width: 9px;
    height: 14px;
    border-radius: 4px;
    background: #5fc2b4;
    transform-origin: top center;
}

.qr-leg-l {
    left: 12px;
    animation: questLegL 0.35s ease-in-out infinite;
}

.qr-leg-r {
    right: 12px;
    animation: questLegR 0.35s ease-in-out infinite;
}

.quest-robot:not(.is-running) .qr-arm-l,
.quest-robot:not(.is-running) .qr-arm-r,
.quest-robot:not(.is-running) .qr-leg-l,
.quest-robot:not(.is-running) .qr-leg-r {
    animation-play-state: paused;
}

@keyframes questArmL {
    0%, 100% { transform: rotate(18deg); }
    50% { transform: rotate(-22deg); }
}

@keyframes questArmR {
    0%, 100% { transform: rotate(-18deg); }
    50% { transform: rotate(22deg); }
}

@keyframes questLegL {
    0%, 100% { transform: rotate(-16deg); }
    50% { transform: rotate(18deg); }
}

@keyframes questLegR {
    0%, 100% { transform: rotate(16deg); }
    50% { transform: rotate(-18deg); }
}

/* Cracker + popper */

.quest-popper {
    position: absolute;
    left: 86%;
    top: 22%;
    z-index: 11;
    width: 36px;
    height: 36px;
    transform: translate(-50%, -50%) scale(0);
    color: #fbbf24;
    filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.6));
    pointer-events: none;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.quest-popper.is-pop {
    transform: translate(-50%, -50%) scale(1.2);
}

.quest-popper svg {
    width: 100%;
    height: 100%;
}

.quest-cracker {
    position: absolute;
    left: 86%;
    top: 22%;
    width: 0;
    height: 0;
    z-index: 12;
    pointer-events: none;
    opacity: 0;
}

.quest-cracker.is-burst {
    opacity: 1;
}

.quest-cracker span {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    opacity: 0;
}

.quest-cracker.is-burst span {
    animation: questCracker 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

.quest-cracker span:nth-child(1)  { --tx: 66px;   --ty: -24px; background: #fbbf24; animation-delay: 0s; }
.quest-cracker span:nth-child(2)  { --tx: 87px;   --ty: 23px;  background: #2dd4bf; animation-delay: 0.04s; }
.quest-cracker span:nth-child(3)  { --tx: 34px;   --ty: 49px;  background: #f87171; animation-delay: 0.08s; }
.quest-cracker span:nth-child(4)  { --tx: -9px;   --ty: 99px;  background: #a78bfa; animation-delay: 0.02s; }
.quest-cracker span:nth-child(5)  { --tx: -57px;  --ty: 48px;  background: #fbbf24; animation-delay: 0.06s; }
.quest-cracker span:nth-child(6)  { --tx: -85px;  --ty: 0;     background: #34d399; animation-delay: 0.1s; }
.quest-cracker span:nth-child(7)  { --tx: -50px;  --ty: -42px; background: #f472b6; animation-delay: 0.03s; }
.quest-cracker span:nth-child(8)  { --tx: -16px;  --ty: -94px; background: #2dd4bf; animation-delay: 0.07s; }
.quest-cracker span:nth-child(9)  { --tx: 28px;   --ty: -48px; background: #fbbf24; animation-delay: 0.05s; }
.quest-cracker span:nth-child(10) { --tx: 95px;   --ty: -55px; background: #60a5fa; animation-delay: 0.09s; }
.quest-cracker span:nth-child(11) { --tx: 92px;   --ty: 77px;  background: #fde68a; width: 5px; height: 14px; animation-delay: 0.05s; }
.quest-cracker span:nth-child(12) { --tx: -108px; --ty: -39px; background: #99f6e4; width: 4px; height: 12px; animation-delay: 0.08s; }
.quest-cracker span:nth-child(13) { --tx: 40px;   --ty: -80px; background: #f472b6; width: 6px; height: 6px; animation-delay: 0.11s; }
.quest-cracker span:nth-child(14) { --tx: -70px;  --ty: 80px;  background: #fde68a; width: 5px; height: 5px; animation-delay: 0.06s; }
.quest-cracker span:nth-child(15) { --tx: 120px;  --ty: 10px;  background: #34d399; width: 7px; height: 7px; animation-delay: 0.13s; }
.quest-cracker span:nth-child(16) { --tx: -30px;  --ty: -110px; background: #60a5fa; width: 5px; height: 8px; animation-delay: 0.04s; }
.quest-cracker span:nth-child(17) { --tx: 55px;   --ty: 95px;  background: #fbbf24; width: 6px; height: 6px; animation-delay: 0.09s; }
.quest-cracker span:nth-child(18) { --tx: -95px;  --ty: -70px; background: #a78bfa; width: 4px; height: 10px; animation-delay: 0.07s; }
.quest-cracker span:nth-child(19) { --tx: 15px;   --ty: 110px; background: #2dd4bf; width: 5px; height: 5px; animation-delay: 0.1s; }
.quest-cracker span:nth-child(20) { --tx: -120px; --ty: 25px;  background: #f87171; width: 6px; height: 6px; animation-delay: 0.05s; }

@keyframes questCracker {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) rotate(240deg) scale(0.3);
    }
}

/* Shockwave + flash */

.quest-shockwave {
    position: absolute;
    left: 86%;
    top: 22%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border-radius: 50%;
    border: 2px solid rgba(251, 191, 36, 0.7);
    opacity: 0;
    pointer-events: none;
    z-index: 9;
}

.quest-shockwave.is-burst {
    animation: questShockwave 0.9s ease-out forwards;
}

@keyframes questShockwave {
    0% { transform: scale(0.5); opacity: 0.9; }
    100% { transform: scale(14); opacity: 0; }
}

.quest-flash {
    position: absolute;
    inset: 0;
    z-index: 25;
    background: radial-gradient(circle at 86% 22%, rgba(251, 191, 36, 0.55), rgba(255, 255, 255, 0.15) 35%, transparent 60%);
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
}

/* Floating orbs */

.quest-orbs {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.quest-orbs span {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(94, 234, 212, 0.35), rgba(45, 212, 191, 0.05));
    filter: blur(1px);
    animation: questOrbFloat 8s ease-in-out infinite;
}

.quest-orbs span:nth-child(1) { width: 120px; height: 120px; top: 18%; left: 8%; animation-delay: 0s; }
.quest-orbs span:nth-child(2) { width: 80px;  height: 80px;  top: 62%; left: 82%; animation-delay: -2s; }
.quest-orbs span:nth-child(3) { width: 60px;  height: 60px;  top: 78%; left: 14%; animation-delay: -4s; }
.quest-orbs span:nth-child(4) { width: 100px; height: 100px; top: 28%; left: 72%; animation-delay: -1s; background: radial-gradient(circle at 30% 30%, rgba(251, 191, 36, 0.25), transparent); }
.quest-orbs span:nth-child(5) { width: 50px;  height: 50px;  top: 44%; left: 48%; animation-delay: -3s; }

@keyframes questOrbFloat {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(12px, -18px); }
}

/* Reward zone — finish par game board ke upar reveal */

.quest-reward-zone {
    width: min(400px, 92vw);
    margin-top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    z-index: 24;
    flex-shrink: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: max-height 0.55s ease, opacity 0.45s ease, transform 0.45s ease, margin-top 0.45s ease;
}

.quest-stage.is-reward .quest-reward-zone {
    position: absolute;
    left: 50%;
    top: 56%;
    width: min(400px, 92vw);
    max-height: 420px;
    overflow: visible;
    margin-top: 0;
    opacity: 1;
    transform: translate(-50%, -50%);
    pointer-events: auto;
}

/* Prize coupon popup */

.quest-prize {
    position: relative;
    left: auto;
    bottom: auto;
    top: auto;
    z-index: 1;
    width: 100%;
    transform: none;
    opacity: 1;
    pointer-events: auto;
}

.quest-prize.is-on .quest-prize-ticket {
    animation: questPrizeIn 0.55s cubic-bezier(0.34, 1.4, 0.64, 1);
}

@keyframes questPrizeIn {
    from { transform: scale(0.88) translateY(12px); opacity: 0.6; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}

.quest-prize-ribbon {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 18px;
    border-radius: 999px;
    font-family: var(--font-head);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #02100f;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    box-shadow: 0 6px 18px rgba(251, 191, 36, 0.45);
    z-index: 2;
}

.quest-prize-ticket {
    position: relative;
    padding: 22px 20px 18px;
    text-align: center;
    border-radius: 22px;
    background:
        linear-gradient(160deg, rgba(8, 48, 44, 0.96), rgba(2, 20, 18, 0.98));
    border: 1px solid rgba(251, 191, 36, 0.45);
    box-shadow:
        0 0 0 1px rgba(45, 212, 191, 0.15),
        0 24px 60px rgba(0, 0, 0, 0.55),
        0 0 80px rgba(251, 191, 36, 0.15);
    overflow: hidden;
    backdrop-filter: blur(12px);
}

.quest-prize-ticket::before,
.quest-prize-ticket::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border-radius: 50%;
    background: #02100f;
    box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.2);
}

.quest-prize-ticket::before { left: -8px; }
.quest-prize-ticket::after { right: -8px; }

.quest-prize-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.12) 50%, transparent 65%);
    transform: translateX(-120%);
    animation: questPrizeShine 2.8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes questPrizeShine {
    0%, 40% { transform: translateX(-120%); }
    60%, 100% { transform: translateX(120%); }
}

.quest-prize-burst {
    position: absolute;
    inset: -30%;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.25), transparent 55%);
    pointer-events: none;
    animation: questPrizeGlow 1.8s ease-in-out infinite;
}

@keyframes questPrizeGlow {
    0%, 100% { opacity: 0.5; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.05); }
}

.quest-prize-tag {
    position: relative;
    font-family: var(--font-head);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #5eead4;
    margin-bottom: 4px;
}

.quest-prize-num {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    line-height: 1;
}

.quest-prize-pct {
    font-family: var(--font-head);
    font-size: clamp(3rem, 8vw, 4.2rem);
    font-weight: 800;
    background: linear-gradient(180deg, #fde68a, #f59e0b);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 4px 12px rgba(251, 191, 36, 0.35));
    line-height: 1;
}

.quest-prize-sym {
    font-family: var(--font-head);
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    font-weight: 800;
    color: #fbbf24;
    margin-top: 10px;
}

.quest-prize-off {
    position: relative;
    margin-top: 2px;
    font-family: var(--font-head);
    font-size: 1rem;
    font-weight: 600;
    color: var(--beige);
    text-transform: lowercase;
}

.quest-prize-note {
    position: relative;
    margin-top: 8px;
    font-size: 0.72rem;
    color: rgba(237, 240, 218, 0.45);
}

.quest-prize-code {
    position: relative;
    margin-top: 10px;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    color: rgba(237, 240, 218, 0.7);
    background: rgba(0, 0, 0, 0.25);
    border: 1px dashed rgba(251, 191, 36, 0.35);
}

.quest-prize-code strong {
    color: #fbbf24;
    font-weight: 700;
}

/* Confetti */

.quest-confetti {
    position: absolute;
    inset: 0;
    z-index: 21;
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
}

.quest-confetti.is-on {
    opacity: 1;
}

.quest-confetti span {
    position: absolute;
    top: -10%;
    width: 8px;
    height: 14px;
    border-radius: 2px;
    opacity: 0;
}

.quest-confetti.is-on span {
    animation: questConfettiFall 2.4s ease-in forwards;
}

.quest-confetti span:nth-child(1)  { left: 8%;  background: #fbbf24; animation-delay: 0s; }
.quest-confetti span:nth-child(2)  { left: 16%; background: #2dd4bf; animation-delay: 0.08s; width: 6px; height: 10px; }
.quest-confetti span:nth-child(3)  { left: 24%; background: #f472b6; animation-delay: 0.15s; }
.quest-confetti span:nth-child(4)  { left: 32%; background: #60a5fa; animation-delay: 0.05s; }
.quest-confetti span:nth-child(5)  { left: 40%; background: #fde68a; animation-delay: 0.12s; }
.quest-confetti span:nth-child(6)  { left: 48%; background: #34d399; animation-delay: 0.2s; }
.quest-confetti span:nth-child(7)  { left: 56%; background: #a78bfa; animation-delay: 0.03s; }
.quest-confetti span:nth-child(8)  { left: 64%; background: #fbbf24; animation-delay: 0.1s; }
.quest-confetti span:nth-child(9)  { left: 72%; background: #2dd4bf; animation-delay: 0.18s; }
.quest-confetti span:nth-child(10) { left: 80%; background: #f87171; animation-delay: 0.06s; }
.quest-confetti span:nth-child(11) { left: 88%; background: #fde68a; animation-delay: 0.14s; }
.quest-confetti span:nth-child(12) { left: 12%; background: #99f6e4; animation-delay: 0.22s; width: 5px; }
.quest-confetti span:nth-child(13) { left: 28%; background: #fbbf24; animation-delay: 0.04s; height: 8px; }
.quest-confetti span:nth-child(14) { left: 44%; background: #2dd4bf; animation-delay: 0.16s; }
.quest-confetti span:nth-child(15) { left: 60%; background: #f472b6; animation-delay: 0.09s; }
.quest-confetti span:nth-child(16) { left: 76%; background: #60a5fa; animation-delay: 0.19s; }
.quest-confetti span:nth-child(17) { left: 92%; background: #34d399; animation-delay: 0.07s; }
.quest-confetti span:nth-child(18) { left: 20%; background: #a78bfa; animation-delay: 0.13s; height: 10px; }
.quest-confetti span:nth-child(19) { left: 52%; background: #fbbf24; animation-delay: 0.11s; width: 6px; }
.quest-confetti span:nth-child(20) { left: 68%; background: #fde68a; animation-delay: 0.17s; }

@keyframes questConfettiFall {
    0% { opacity: 1; transform: translateY(0) rotate(0deg); }
    100% { opacity: 0; transform: translateY(110vh) rotate(520deg); }
}

/* CTA */

.quest-cta {
    margin-top: 0;
    text-align: center;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    will-change: opacity, transform;
    z-index: 2;
    width: 100%;
}

.quest-cta.is-on .quest-cta-btn {
    animation: questCtaPop 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) 0.15s both;
}

@keyframes questCtaPop {
    from { transform: scale(0.92); opacity: 0.5; }
    to { transform: scale(1); opacity: 1; }
}

.quest-cta-btn {
    width: 100%;
    max-width: 340px;
    display: inline-block;
    text-align: center;
    padding: 14px 28px;
    font-size: 1rem;
    background: linear-gradient(135deg, #0a6b6b, #005353);
    border: 1px solid rgba(94, 234, 212, 0.35);
    box-shadow: 0 10px 28px rgba(0, 83, 83, 0.45);
}

.quest-cta-btn:hover {
    background: linear-gradient(135deg, #2dd4bf, #0a6b6b);
    color: #02100f;
    box-shadow: 0 14px 36px rgba(45, 212, 191, 0.4);
}

.quest-cta-hint {
    margin-top: 10px;
    font-size: 0.78rem;
    color: rgba(237, 240, 218, 0.45);
}

/* Hint */

.quest-hint {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: rgba(237, 240, 218, 0.5);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    z-index: 5;
    transition: opacity 0.3s ease;
}

.quest-hint svg {
    width: 18px;
    height: 18px;
    animation: questHintBounce 1.4s ease-in-out infinite;
}

@keyframes questHintBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
    .sol-cards-track,
    .sol-card-face,
    .sol-ico-ring,
    .sol-card-shine::after,
    .sol-orbs span,
    .sol-aurora::before,
    .sol-aurora::after,
    .sol-popular,
    .quest-aurora,
    .quest-robot,
    .quest-pad-ring,
    .qr-antenna span,
    .qr-arm-l, .qr-arm-r,
    .qr-leg-l, .qr-leg-r,
    .quest-hint svg,
    .quest-prize-burst,
    .quest-prize-shine,
    .quest-orbs span,
    .quest-trail span,
    .quest-node.is-on::after,
    .quest-confetti span {
        animation: none !important;
    }
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 900px) {

    .hamburger {
        display: flex;
    }

    /* Hero: mobile par stack + center */
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        text-align: center;
    }

    .hero-content {
        text-align: center;
        order: 2;
    }

    .hero-visual {
        order: 1;
    }

    .hero-frames {
        width: min(560px, 94vw);
    }

    .hero-content h1 {
        font-size: clamp(1.8rem, 6vw, 2.6rem);
    }

    .hero-sub {
        margin: 0 auto 28px;
    }

    .hero-actions {
        justify-content: center;
    }

    .scroll-hint {
        display: none;
    }

    /* Showcase: mobile adjustments */
    .showcase-media {
        transform: scale(0.9);
        border-radius: 20px;
    }

    .showcase-overlay {
        background: rgba(0, 40, 40, 0.6);
    }

    .showcase-steps {
        max-width: 100%;
        min-height: 300px;
    }

    .showcase-step h2 {
        font-size: clamp(1.7rem, 6vw, 2.4rem);
    }

    /* Expertise: mobile adjustments */
    .expertise-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        align-content: center;
    }

    .expertise-head {
        text-align: center;
    }

    .expertise-head h2 {
        font-size: clamp(2rem, 8vw, 2.8rem);
    }

    .expertise-head h2 br {
        display: none;
    }

    .expertise-sub {
        margin: 0 auto;
        font-size: 0.95rem;
    }

    .expertise-progress {
        justify-content: center;
        margin-top: 20px;
    }

    .expertise-stage {
        height: min(460px, 56vh);
        perspective: 1000px;
    }

    .expertise-card {
        max-width: min(480px, 92vw);
        border-radius: 20px;
    }

    .card-media {
        height: 130px;
    }

    .card-num {
        top: 14px;
        right: 18px;
        font-size: 2.2rem;
    }

    .card-body {
        padding: 0 24px 22px;
    }

    .card-icon {
        width: 50px;
        height: 50px;
        border-radius: 15px;
        margin-top: -25px;
        margin-bottom: 12px;
    }

    .card-icon svg {
        width: 25px;
        height: 25px;
    }

    .expertise-card p {
        font-size: 0.92rem;
        margin-bottom: 16px;
    }

    .expertise-ghost {
        font-size: clamp(4rem, 22vw, 8rem);
    }

    /* Services: mobile adjustments */
    .services-layout {
        gap: 8px;
    }

    .services-head h2 {
        font-size: clamp(1.3rem, 5.2vw, 1.85rem);
    }

    .services-stage {
        height: min(400px, 52vh);
        perspective: 1100px;
    }

    .service-panel {
        width: min(300px, 84vw);
        margin-left: calc(min(300px, 84vw) / -2);
        padding: 16px 18px 18px;
        border-radius: 18px;
    }

    .service-media {
        margin: -16px -18px 10px;
        height: 120px;
    }

    .service-num {
        top: 12px;
        right: 16px;
        font-size: 1.7rem;
    }

    .service-panel h3 {
        font-size: clamp(0.98rem, 3.8vw, 1.15rem);
    }

    .service-panel p {
        font-size: 0.76rem;
        margin-bottom: 10px;
        -webkit-line-clamp: 2;
    }

    .service-tags span {
        font-size: 0.6rem;
        padding: 4px 8px;
    }

    .services-ghost {
        font-size: clamp(3.6rem, 20vw, 7rem);
    }

    /* Stats: mobile adjustments — 2x2 bubble grid */
    .stats-layout {
        gap: 28px;
    }

    .stats-head h2 {
        font-size: clamp(1.8rem, 7vw, 2.6rem);
    }

    .stats-stage {
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(16px, 4vw, 32px);
        max-width: 520px;
    }

    .stat-orb {
        width: clamp(140px, 38vw, 200px);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .stat-float {
        animation: none;
    }

    .stat-num,
    .stat-prefix {
        font-size: clamp(2.2rem, 9vw, 3rem);
    }

    .stat-label {
        font-size: clamp(0.72rem, 2.6vw, 0.82rem);
        font-weight: 700;
        letter-spacing: 0.8px;
    }

    .stat-value {
        text-shadow: none;
    }

    .stats-ghost {
        font-size: clamp(3.6rem, 20vw, 7rem);
    }

    .stat-explore {
        bottom: 10%;
        opacity: 0.78;
        transform: translate(-50%, 0);
    }

    .stat-detail-modal {
        padding: 14px;
    }

    .stat-detail-card {
        width: min(560px, 94vw);
        max-height: 92vh;
        grid-template-columns: 1fr;
        overflow-y: auto;
        border-radius: 24px;
    }

    .stat-detail-visual {
        min-height: 175px;
    }

    .stat-3d-scene {
        transform: scale(0.52);
        animation-name: statSceneFloatMobile;
    }

    .stat-visual-topline {
        top: 10px;
        left: 14px;
        right: 14px;
        font-size: 0.48rem;
    }

    .stat-visual-metrics {
        left: 10px;
        right: 10px;
        bottom: 8px;
        gap: 5px;
    }

    .stat-visual-metrics > span {
        padding: 6px 7px;
        border-radius: 9px;
    }

    .stat-visual-metrics small {
        font-size: 0.44rem;
    }

    .stat-visual-metrics strong {
        font-size: 0.64rem;
    }

    .stat-detail-visual::after {
        bottom: 20%;
    }

    .stat-detail-content {
        padding: 22px 26px 26px;
    }

    .stat-detail-content h2 {
        padding-right: 28px;
    }

    .stat-detail-content > p {
        margin-bottom: 18px;
    }

    .stat-detail-list {
        margin-bottom: 22px;
    }

    @keyframes statSceneFloatMobile {
        0%, 100% { transform: scale(0.52) translateY(0) rotateY(-8deg); }
        50% { transform: scale(0.52) translateY(-14px) rotateY(8deg); }
    }

    /* Why Us: mobile adjustments — scene upar, copy niche */
    .why-layout {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(130px, 27vh) minmax(0, 1fr);
        gap: 4px;
        align-content: stretch;
        height: 100%;
        max-height: none;
        padding-top: calc(var(--header-height) + 4px);
        padding-bottom: 8px;
        box-sizing: border-box;
        transform: translateY(clamp(28px, 5vh, 42px));
    }

    .why-stage {
        order: -1;
        max-height: none;
        min-height: 0;
        overflow: visible;
    }

    .why-scene {
        max-width: min(340px, 88vw);
        max-height: calc(100% + 30px);
        transform: translateY(28px);
    }

    #whyRobot {
        opacity: 0;
    }

    .why-mobile-robot {
        position: absolute;
        z-index: 8;
        display: block;
        left: 10%;
        top: 90%;
        width: 48px;
        margin-top: 18px;
        pointer-events: none;
        transform: translate(-50%, -100%);
        filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.42));
        will-change: left, top, transform;
    }

    .why-mobile-robot svg {
        display: block;
        width: 100%;
        overflow: visible;
    }

    .why-mobile-robot.is-walking {
        animation: mobileRobotHop 0.55s ease-in-out infinite alternate;
    }

    @keyframes mobileRobotHop {
        to { transform: translate(-50%, calc(-100% - 6px)) rotate(3deg); }
    }

    .why-copy {
        position: relative;
        min-height: 0;
        margin-top: -4px;
    }

    .why-copy h2 {
        font-size: clamp(1.25rem, 5vw, 1.85rem);
        margin-bottom: 4px;
    }

    .why-kicker {
        margin-bottom: 4px;
        font-size: 0.68rem;
    }

    .why-sub {
        font-size: 0.8rem;
        margin-bottom: 8px;
    }

    .vs-row.is-on {
        max-height: 78px;
        margin-top: 6px;
    }

    .vs-side {
        padding: 6px 8px;
        border-radius: 10px;
        gap: 6px;
    }

    .vs-side small {
        font-size: 0.52rem;
    }

    .vs-side p {
        font-size: 0.68rem;
        line-height: 1.3;
    }

    .vs-ico {
        width: 20px;
        height: 20px;
    }

    .vs-ico svg {
        width: 11px;
        height: 11px;
    }

    .vs-badge {
        font-size: 0.55rem;
        padding: 3px 6px;
    }

    .why-progress {
        margin-top: 10px;
        gap: 8px;
    }

    .why-count {
        font-size: 0.76rem;
    }

    .why-bar {
        width: min(90px, 25vw);
    }

    .why-cta {
        position: static;
        display: none;
        margin: 10px 0 0;
    }

    .why-cta.is-on {
        display: flex;
        justify-content: flex-end;
    }

    .why-cta .btn {
        padding: 8px 12px;
        font-size: 0.7rem;
        white-space: nowrap;
    }

    .why-ghost {
        font-size: clamp(3rem, 18vw, 6rem);
    }

    /* Solutions: mobile adjustments — gate compact, cards stack */
    .gate-wrap {
        width: min(340px, 78vw);
        height: min(44vh, 330px);
        margin-top: 4vh;
    }

    .gate-cap h2 {
        font-size: clamp(1.15rem, 5.4vw, 1.7rem);
    }

    .bizman {
        width: clamp(96px, 26vw, 130px);
    }

    .bizman-wrap {
        bottom: 9vh;
    }

    .stress-chip {
        width: 132px;
        gap: 7px;
        padding: 7px 8px;
    }

    .stress-chip-icon {
        flex-basis: 26px;
        width: 26px;
        height: 26px;
        border-radius: 8px;
        font-size: 0.68rem;
    }

    .stress-chip-copy small {
        display: none;
    }

    .stress-chip-copy strong {
        font-size: 0.61rem;
    }

    .stress-chip[data-chip="0"] { --cx: -150px !important; --cy: -130px !important; }
    .stress-chip[data-chip="1"] { --cx: 18px   !important; --cy: -160px !important; }
    .stress-chip[data-chip="2"] { --cx: -150px !important; --cy: -20px  !important; }
    .stress-chip[data-chip="3"] { --cx: 18px   !important; --cy: -50px  !important; }

    .sol-ghost {
        font-size: clamp(3rem, 16vw, 6rem);
    }

    .sol-layout {
        padding-top: calc(var(--header-height) * 0.55);
    }

    .sol-head h2 {
        font-size: clamp(1.45rem, 6vw, 2.1rem);
    }

    .sol-toggle-row {
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 12px;
        gap: 8px;
        text-align: center;
    }

    .sol-offer-line {
        margin-left: auto;
        margin-right: auto;
        max-width: 22rem;
        font-size: 0.95rem;
    }

    .sol-cards {
        --sol-side: 16px;
        --sol-gap: 14px;
        --sol-card-w: min(300px, calc(100vw - 48px));
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        margin-top: 12px;
        max-height: none;
        overflow: hidden;
        padding: 12px 0 4px;
    }

    .sol-cards-track {
        gap: var(--sol-gap);
        padding: 8px var(--sol-side) 12px;
        animation-duration: 50s;
    }

    .sol-card {
        flex-basis: var(--sol-card-w);
        width: var(--sol-card-w);
    }

    .sol-card-face {
        padding: 16px 16px 17px;
        border-radius: 18px;
    }

    .sol-card-visual {
        margin-bottom: 8px;
    }

    .sol-ico-3d {
        width: 40px;
        height: 40px;
    }

    .sol-ico-core {
        width: 28px;
        height: 28px;
        border-radius: 9px;
    }

    .sol-ico-core svg {
        width: 14px;
        height: 14px;
    }

    .sol-weeks {
        font-size: 1.55rem;
    }

    .sol-feats {
        gap: 5px;
        margin: 7px 0 9px;
    }

    .sol-feat-ico {
        width: 22px;
        height: 22px;
        border-radius: 6px;
    }

    .sol-feat-ico svg {
        width: 11px;
        height: 11px;
    }

    /* Growth Quest: tablet / mobile */
    .quest-track {
        height: 400vh;
    }

    .quest-board {
        height: min(50vh, 380px);
    }

    .quest-board-wrap {
        width: 96vw;
        padding: 0 6px;
    }

    .quest-board-tilt {
        transform: none !important;
    }

    .quest-benefit {
        will-change: auto;
    }

    .quest-benefit-face {
        width: 164px;
        padding: 14px 12px 15px;
        background: #062f2c;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        transform-style: flat;
    }

    .quest-benefit-face h3 {
        font-size: 0.94rem;
        line-height: 1.2;
        text-shadow: none;
    }

    .quest-benefit-face p {
        font-size: 0.76rem;
        line-height: 1.4;
    }

    .quest-benefit-ico {
        width: 36px;
        height: 36px;
    }

    .quest-benefit[data-benefit="0"] { --bx: 20%; --by: 80%; }
    .quest-benefit[data-benefit="1"] { --bx: 30%; --by: 14%; }
    .quest-benefit[data-benefit="2"] { --bx: 75%; --by: 82%; }
    .quest-benefit[data-benefit="3"] { --bx: 73%; --by: 14%; }

    .quest-pad-end {
        left: 84%;
        top: 24%;
    }

    .quest-floor {
        transform: rotateX(12deg) translateZ(-10px);
    }

    .quest-board-wrap .quest-board {
        height: min(44vh, 340px);
    }

    .quest-stage.is-reward .quest-reward-zone {
        top: 56%;
        max-height: 480px;
    }

    .quest-hud {
        margin-top: 10px;
        padding: 10px 14px 12px;
    }

    .quest-hud-score {
        font-size: 0.65rem;
    }

    .quest-prize {
        bottom: auto;
        width: 100%;
    }

    .quest-stage.is-reward .quest-reward-zone {
        top: 56%;
    }

    .quest-prize-pct {
        font-size: clamp(2.8rem, 12vw, 3.6rem);
    }

    /* Slide-in mobile menu */
    .main-nav {
        position: fixed;
        top: 0;
        right: -320px;
        width: 300px;
        max-width: 85vw;
        height: 100vh;
        background: var(--teal);
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 12px;
        padding: 100px 32px 40px;
        transition: right var(--transition);
        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.3);
        z-index: 1050;
        overflow-y: auto;
    }

    .main-nav.open {
        right: 0;
    }

    .nav-list {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        width: 100%;
    }

    .nav-list li {
        width: 100%;
    }

    .nav-link {
        font-size: 1.1rem;
        padding: 12px 0;
        width: 100%;
        border-bottom: 1px solid rgba(237, 240, 218, 0.15);
    }

    .nav-link::after {
        display: none;
    }

    .submenu-arrow {
        float: right;
        margin-top: 0;
        margin-right: 4px;
    }

    .services-submenu {
        position: static;
        width: 100%;
        padding: 6px 0 10px 13px;
        border: 0;
        border-bottom: 1px solid rgba(237, 240, 218, 0.15);
        border-radius: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: transparent;
        box-shadow: none;
    }

    .services-submenu::before {
        display: none;
    }

    .services-submenu li {
        width: 100%;
    }

    .services-submenu a {
        padding: 8px 10px;
        color: rgba(237, 240, 218, 0.78);
        font-size: 0.82rem;
        font-weight: 500;
    }

    .services-submenu a:hover,
    .services-submenu a:focus-visible {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.07);
    }

    .has-submenu:hover .services-submenu,
    .has-submenu:focus-within .services-submenu {
        transform: none;
    }

    .nav-actions {
        flex-direction: column;
        width: 100%;
        gap: 10px;
        margin-top: 20px;
    }

    .btn-nav {
        width: 100%;
        text-align: center;
    }

    .site-header {
        animation: none;
        transform: none;
    }

    .site-header.scrolled {
        background: var(--teal);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .logo-img {
        height: 46px;
        max-width: 190px;
        image-rendering: auto;
        transition: none;
    }

    .site-header.scrolled .logo-img {
        height: 46px;
    }

    .logo:hover .logo-img {
        transform: none;
    }
}

@media (max-width: 480px) {

    :root {
        --header-height: 68px;
        --header-height-scrolled: 58px;
    }

    .logo-img {
        height: 44px;
        max-width: 185px;
        image-rendering: auto;
        transition: none;
    }

    .site-header.scrolled .logo-img {
        height: 44px;
    }

    .logo:hover .logo-img {
        transform: none;
    }

    .site-header {
        animation: none;
        transform: none;
    }

    .site-header.scrolled {
        background: var(--teal);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .container {
        padding: 0 16px;
    }

    .expertise-stage {
        height: min(430px, 54vh);
    }

    .card-media {
        height: 110px;
    }

    .card-body {
        padding: 0 18px 18px;
    }

    .card-tags span {
        font-size: 0.7rem;
        padding: 6px 12px;
    }

    /* Stats: chhote phones — compact orbs */
    .stats-stage {
        gap: 14px;
    }

    .stat-orb {
        width: clamp(128px, 42vw, 165px);
        padding: 14px;
    }

    .stats-waves {
        height: 60px;
    }

    /* Why Us: chhote phones — vs-badge hatao, rows compact */
    .vs-badge {
        display: none;
    }

    .vs-row {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .why-scene {
        max-width: 78vw;
    }

    /* Solutions: chhote phones */
    .gate-wrap {
        width: min(290px, 82vw);
        height: min(40vh, 290px);
    }

    .stress-chip {
        font-size: 0.58rem;
    }

    .sol-cards {
        max-height: none;
    }

    /* Growth Quest: mobile */
    .quest-track {
        height: 380vh;
    }

    .quest-stage {
        padding-top: calc(var(--header-height-scrolled) + 10px);
    }

    .quest-head h2 {
        font-size: clamp(1.25rem, 5vw, 1.7rem);
    }

    .quest-sub {
        font-size: 0.82rem;
    }

    .quest-board {
        height: min(48vh, 360px);
        margin-top: 8px;
    }

    .quest-board-wrap {
        width: 98vw;
        padding: 0 6px;
    }

    .quest-benefit[data-benefit="0"] { --bx: 22%; --by: 80%; }
    .quest-benefit[data-benefit="1"] { --bx: 25%; --by: 16%; }
    .quest-benefit[data-benefit="2"] { --bx: 75%; --by: 80%; }
    .quest-benefit[data-benefit="3"] { --bx: 75%; --by: 16%; }

    .quest-benefit-face {
        width: 145px;
        padding: 12px 10px 13px;
        background: #062f2c;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        transform-style: flat;
    }

    .quest-benefit-face h3 {
        font-size: 0.88rem;
        line-height: 1.2;
        text-shadow: none;
    }

    .quest-benefit-face p {
        font-size: 0.74rem;
        line-height: 1.4;
    }

    .quest-benefit-ico {
        width: 34px;
        height: 34px;
        margin-bottom: 6px;
    }

    .quest-benefit-ico svg {
        width: 17px;
        height: 17px;
    }

    .quest-robot {
        width: 42px;
        height: 60px;
        transform: scale(0.85);
    }

    .quest-pad-ring {
        width: 42px;
        height: 42px;
    }

    .quest-chest {
        width: 38px;
        height: 32px;
    }

    .quest-prize-ticket {
        padding: 20px 16px 16px;
    }

    .quest-cta {
        margin-top: 10px;
    }

    .quest-cta-btn {
        padding: 12px 24px;
        font-size: 0.9rem;
    }

    .quest-hint {
        bottom: 16px;
        font-size: 0.68rem;
    }

    .quest-ghost {
        font-size: clamp(3rem, 16vw, 6rem);
    }

    .quest-hud-gem {
        width: 11px;
        height: 11px;
        margin-top: -5px;
        margin-left: -5px;
    }

    .quest-node {
        width: 16px;
        height: 16px;
    }

    .quest-stage.is-reward .quest-reward-zone {
        top: 56%;
        max-height: 460px;
    }

    .quest-prize-code {
        font-size: 0.7rem;
        padding: 6px 10px;
    }
}

/* Short desktop / laptop screens — why section ko aur compact */
@media (max-height: 820px) and (min-width: 901px) {
    .why-layout {
        gap: 20px;
        padding-top: calc(var(--header-height) * 0.45);
    }

    .why-copy h2 {
        font-size: clamp(1.3rem, 2.2vw + 0.4vh, 2.1rem);
    }

    .why-sub {
        margin-bottom: 10px;
        font-size: 0.85rem;
    }

    .why-stage,
    .why-scene {
        max-height: min(62vh, 400px);
    }

    .vs-row.is-on {
        max-height: 78px;
        margin-top: 6px;
    }

    .vs-side {
        padding: 6px 10px;
    }

    .why-progress {
        margin-top: 10px;
    }

    .why-cta {
        margin-top: 8px;
    }

    /* Solutions: short desktops — gate + cards compact */
    .gate-wrap {
        height: min(52vh, 360px);
        margin-top: 7vh;
    }

    .sol-head h2 {
        font-size: clamp(1.45rem, 2.4vw + 0.3vh, 2.1rem);
    }

    .sol-cards {
        --sol-gap: 12px;
        --sol-side: clamp(14px, 2.5vw, 28px);
        --sol-card-w: calc((100vw - (var(--sol-side) * 2) - (var(--sol-gap) * 4)) / 5);
        margin-top: 10px;
    }

    .sol-cards-track {
        gap: var(--sol-gap);
        padding: 8px var(--sol-side) 12px;
    }

    .sol-card-face {
        padding: 14px 14px 15px;
    }

    .sol-ico-3d {
        width: 38px;
        height: 38px;
    }

    .sol-ico-core {
        width: 28px;
        height: 28px;
    }

    .sol-weeks {
        font-size: 1.45rem;
    }

    .sol-desc {
        font-size: 0.78rem;
        line-height: 1.35;
    }

    .sol-feats li {
        font-size: 0.76rem;
    }

    /* Growth Quest: short desktops */
    .quest-board {
        height: min(46vh, 360px);
    }

    .quest-head h2 {
        font-size: clamp(1.35rem, 2.2vw + 0.4vh, 2rem);
    }

    .quest-cta {
        margin-top: 10px;
    }
}

/* ============================================================
   Site Footer
   ============================================================ */
.site-footer {
    position: relative;
    z-index: 8;
    padding: 0;
    color: #ffffff;
    background: #002b28;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-family: var(--font-head);
}

.site-footer-inner {
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(0, 0.9fr)
        minmax(210px, 0.95fr)
        minmax(0, 1.2fr);
    gap: 0;
    align-items: stretch;
}

.footer-brand,
.footer-column,
.footer-headline {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    height: 100%;
    padding: clamp(32px, 3.5vw, 48px);
}

.footer-brand {
    background: #00403c;
    justify-content: flex-start;
    gap: 0;
}

.footer-brand-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-logo {
    width: 200px;
    margin: -8px 0 0 -4px;
    padding: 0;
    display: block;
    border-radius: 2px;
    overflow: hidden;
}

.footer-logo img {
    display: block;
    width: 100%;
    height: auto;
}

.footer-tagline {
    margin: 23px 0 0;
    color: #ffffff;
    font-family: 'Montserrat', var(--font-head);
    font-size: clamp(1.15rem, 1.6vw, 1.45rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.footer-contact-info {
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.footer-contact-info a {
    color: rgba(255, 255, 255, 0.88);
    font-family: var(--font-head);
    font-size: 0.88rem;
    font-weight: 400;
    line-height: 1.5;
    transition: color 0.25s ease;
}

.footer-contact-info a:hover {
    color: #ffffff;
}

.footer-column {
    gap: 0;
}

.footer-column--about {
    background: #002b28;
}

.footer-column--solutions {
    background: #00403c;
}

.footer-column--solutions a {
    white-space: nowrap;
}

.footer-column a {
    position: relative;
    display: inline-block;
    width: fit-content;
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--font-head);
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.35;
    text-decoration: none;
    transition: color 0.25s ease;
}

.footer-column a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.35s ease;
}

.footer-column a:hover {
    color: #ffffff;
}

.footer-column a:hover::after {
    transform: scaleX(1);
}

.footer-headline {
    background: #002b28;
    gap: 0;
}

.footer-headline h2 {
    margin: 0;
    color: #ffffff;
    font-family: 'Montserrat', var(--font-head);
    font-size: clamp(1.45rem, 2.0vw, 2.2rem);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.02em;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-headline-line {
    display: block;
    white-space: nowrap;
}

.footer-headline-bold {
    font-weight: 700;
}

.footer-headline-light {
    font-weight: 200;
}

.footer-bottom {
    width: 100%;
    margin: 0;
    padding: 12px clamp(20px, 3.5vw, 48px) 10px;
    padding-left: max(clamp(20px, 3.5vw, 48px), 110px);
    padding-right: max(clamp(20px, 3.5vw, 48px), 90px);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    background: #00403c    ;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--font-head);
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.3;
}

.footer-socials {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
}

.footer-socials a {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #ffffff;
    background-color: transparent;
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.footer-socials a:hover,
.footer-socials a:focus-visible {
    color: #002b28;
    background-color: #ffffff;
    border-color: #ffffff;
    transform: translateY(-3px);
}

.footer-socials svg {
    width: 15px;
    height: 15px;
    display: block;
    pointer-events: none;
}

.footer-bottom a {
    position: relative;
    display: inline-block;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color 0.25s ease;
}

.footer-bottom a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.35s ease;
}

.footer-bottom a:hover {
    color: #ffffff;
}

.footer-bottom a:hover::after {
    transform: scaleX(1);
}

@media (max-width: 960px) {
    .site-footer-inner {
        grid-template-columns: 1.15fr 0.9fr 0.9fr;
    }

    .footer-headline {
        grid-column: 1 / -1;
    }

    .footer-brand,
    .footer-column,
    .footer-headline {
        padding: 36px 28px;
        height: auto;
        justify-content: flex-start;
        gap: 20px;
    }

    .footer-column {
        gap: 14px;
    }

    .footer-column--solutions a {
        white-space: normal;
    }

    .footer-headline h2 {
        font-size: clamp(1.35rem, 3.2vw, 1.9rem);
    }

    .footer-headline-line {
        white-space: normal;
    }

    .footer-bottom {
        padding-left: clamp(20px, 3.5vw, 48px);
        padding-right: clamp(20px, 3.5vw, 48px);
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 8px 16px;
    }
}

@media (max-width: 700px) {
    .site-footer-inner {
        grid-template-columns: 1fr 1fr;
    }

    .footer-brand {
        grid-column: 1 / -1;
        align-items: center;
        text-align: center;
        padding: 28px 22px 24px;
        gap: 16px;
    }

    .footer-brand-top {
        align-items: center;
    }

    .footer-column {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        grid-column: auto;
        padding: 24px 18px;
        gap: 12px;
    }

    .footer-headline {
        grid-column: 1 / -1;
        align-items: center;
        text-align: center;
        padding: 28px 22px;
        gap: 16px;
    }

    .footer-headline h2 {
        align-items: center;
        text-align: center;
        font-size: clamp(1.4rem, 6.5vw, 1.85rem);
        line-height: 1.22;
    }

    .footer-logo {
        width: 160px;
        margin: 0 auto;
    }

    .footer-tagline {
        margin-top: 14px;
        font-size: 1.15rem;
    }

    .footer-contact-info {
        margin-top: 18px;
        align-items: center;
        gap: 8px;
    }

    .footer-contact-info a {
        font-size: 0.92rem;
        word-break: break-word;
    }

    .footer-column a {
        width: auto;
        max-width: 100%;
        font-size: 0.82rem;
        line-height: 1.45;
        padding: 2px 0;
    }

    .footer-socials {
        margin-top: 4px;
        justify-content: center;
        gap: 12px;
    }

    .footer-socials a {
        width: 38px;
        height: 38px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 6px;
        padding: 14px 20px 16px;
    }

    .footer-bottom p,
    .footer-bottom a {
        font-size: 0.75rem;
    }
}

@media (max-width: 400px) {
    .footer-brand,
    .footer-headline {
        padding: 24px 16px;
    }

    .footer-column {
        padding: 20px 14px;
        gap: 10px;
    }

    .footer-column a {
        font-size: 0.78rem;
    }

    .footer-logo {
        width: 140px;
    }

    .footer-tagline {
        font-size: 1.05rem;
    }

    .footer-headline h2 {
        font-size: 1.28rem;
    }

    .footer-socials a {
        width: 36px;
        height: 36px;
    }

    .footer-bottom {
        padding: 12px 16px 14px;
    }
}

/* ============================================================
   Services page — simple image card grid
   ============================================================ */
.services-page {
    background: var(--beige);
}

.services-page-list {
    position: relative;
    padding: clamp(72px, 9vw, 130px) 0;
    overflow: hidden;
    color: var(--teal-dark);
    background:
        radial-gradient(circle at 90% 6%, rgba(0, 116, 110, 0.10), transparent 27%),
        var(--beige);
}

.services-page-heading {
    max-width: 720px;
    margin-bottom: clamp(36px, 5vw, 62px);
}

.services-page-heading > p {
    margin: 0 0 12px;
    color: var(--teal);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.services-page-heading h2 {
    margin: 0;
    color: var(--teal-dark);
    font-size: clamp(2rem, 4vw, 3.75rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.055em;
}

.services-page-heading h2 em {
    color: var(--teal);
    font-style: italic;
    font-weight: 500;
}

.services-page-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2.3vw, 30px);
}

.services-page-card {
    position: relative;
    min-height: clamp(260px, 28vw, 390px);
    display: block;
    border-radius: clamp(20px, 2vw, 28px);
    overflow: hidden;
    isolation: isolate;
    background: var(--teal-dark);
    box-shadow: 0 18px 46px rgba(0, 61, 61, 0.14);
}

.services-page-card::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(180deg, transparent 34%, rgba(0, 34, 34, 0.36) 64%, rgba(0, 25, 25, 0.96) 100%);
}

.services-page-card img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    filter: none;
    transition: transform 0.55s ease;
    transform: scale(1.01);
}

.services-page-card:hover img {
    transform: scale(1.06);
}

.services-page-card-title {
    position: absolute;
    z-index: 2;
    right: clamp(20px, 2.2vw, 30px);
    bottom: clamp(20px, 2.2vw, 30px);
    left: clamp(20px, 2.2vw, 30px);
    display: flex;
    align-items: flex-end;
    gap: 14px;
}

.services-page-card-title span {
    flex: 0 0 auto;
    padding-bottom: 4px;
    color: rgba(237, 240, 218, 0.66);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.services-page-card-title h3 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.15rem, 1.8vw, 1.55rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.025em;
    text-shadow: 0 2px 10px rgba(0, 20, 20, 0.72);
}

.services-page-card:nth-child(2) .services-page-card-title h3 {
    white-space: nowrap;
}

@media (max-width: 900px) {
    .services-page-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .services-page-card:nth-child(2) .services-page-card-title h3 {
        white-space: normal;
    }
}

@media (max-width: 560px) {
    .services-page-grid {
        grid-template-columns: 1fr;
    }

    .services-page-card {
        min-height: 310px;
    }
}

/* ============================================================
   Individual service pages
   ============================================================ */
.service-detail-page {
    --model-accent: var(--mint);
    background: var(--beige);
}

.service-detail-page .about-breadcrumb {
    flex-wrap: wrap;
}

.service-detail-intro {
    padding: clamp(70px, 9vw, 125px) 0;
    color: var(--teal-dark);
    background: var(--beige);
}

.service-detail-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(380px, 1.1fr);
    gap: clamp(42px, 7vw, 100px);
    align-items: center;
}

.service-detail-kicker,
.service-detail-section-head > p,
.service-detail-cta-inner > div > p {
    margin: 0 0 13px;
    color: var(--teal);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.service-detail-copy h2,
.service-detail-section-head h2 {
    margin: 0;
    color: var(--teal-dark);
    font-size: clamp(2rem, 4vw, 3.8rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.055em;
}

.service-detail-copy h2 em {
    color: var(--teal);
    font-style: italic;
    font-weight: 500;
}

.service-detail-lead {
    max-width: 620px;
    margin: 24px 0 30px;
    color: rgba(0, 61, 61, 0.72);
    font-size: clamp(1rem, 1.35vw, 1.15rem);
    line-height: 1.8;
}

.service-detail-image {
    height: clamp(360px, 42vw, 560px);
    border-radius: clamp(24px, 3vw, 38px);
    overflow: hidden;
    box-shadow: 0 28px 70px rgba(0, 61, 61, 0.18);
}

.service-detail-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.service-detail-metrics {
    max-width: 620px;
    margin: 0 0 32px;
    padding: 20px 0;
    border-top: 1px solid rgba(0, 83, 83, 0.14);
    border-bottom: 1px solid rgba(0, 83, 83, 0.14);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.service-detail-metrics div {
    padding: 0 16px;
    border-right: 1px solid rgba(0, 83, 83, 0.14);
}

.service-detail-metrics div:first-child {
    padding-left: 0;
}

.service-detail-metrics div:last-child {
    border-right: 0;
}

.service-detail-metrics strong,
.service-detail-metrics span {
    display: block;
}

.service-detail-metrics strong {
    color: var(--teal);
    font-family: var(--font-head);
    font-size: clamp(1.35rem, 2vw, 1.85rem);
    line-height: 1;
}

.service-detail-metrics span {
    margin-top: 7px;
    color: rgba(0, 61, 61, 0.62);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.35;
}

/* Production management — responsive CSS 3D control room */
.production-model-wrap {
    position: relative;
    min-width: 0;
}

.production-model {
    --model-x: -7deg;
    --model-y: -10deg;
    position: relative;
    height: clamp(420px, 43vw, 590px);
    border: 1px solid rgba(0, 83, 83, 0.11);
    border-radius: clamp(26px, 3vw, 42px);
    overflow: hidden;
    perspective: 1100px;
    background:
        linear-gradient(rgba(0, 83, 83, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 83, 83, 0.045) 1px, transparent 1px),
        radial-gradient(circle at 58% 42%, rgba(66, 190, 158, 0.22), transparent 38%),
        #e9eddb;
    background-size: 38px 38px, 38px 38px, auto, auto;
    box-shadow: 0 34px 80px rgba(0, 61, 61, 0.16);
}

.production-model::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.55), transparent 32%, rgba(0, 61, 61, 0.07));
}

.production-model-glow {
    position: absolute;
    width: 52%;
    aspect-ratio: 1;
    left: 24%;
    top: 28%;
    border-radius: 50%;
    background: rgba(66, 190, 158, 0.25);
    filter: blur(55px);
}

.production-model-scene {
    position: absolute;
    width: 84%;
    height: 78%;
    left: 8%;
    top: 11%;
    transform-style: preserve-3d;
    transform: rotateX(var(--model-x)) rotateY(var(--model-y));
    transition: transform 180ms ease-out;
}

.production-floor {
    position: absolute;
    width: 76%;
    height: 58%;
    left: 12%;
    bottom: 7%;
    border: 2px solid rgba(0, 83, 83, 0.19);
    border-radius: 22px;
    transform: rotateX(62deg) translateZ(-34px);
    transform-style: preserve-3d;
    background:
        linear-gradient(90deg, rgba(0, 83, 83, 0.07) 1px, transparent 1px),
        linear-gradient(rgba(0, 83, 83, 0.07) 1px, transparent 1px),
        rgba(248, 249, 238, 0.9);
    background-size: 30px 30px;
    box-shadow: 0 28px 45px rgba(0, 61, 61, 0.13);
}

.production-line {
    position: absolute;
    width: 70%;
    height: 26px;
    left: 15%;
    top: 48%;
    padding: 4px 8px;
    border: 2px solid var(--teal-dark);
    border-radius: 8px;
    display: flex;
    justify-content: space-around;
    background: #cdd7c7;
    transform: translateZ(22px);
}

.production-line span {
    width: 15%;
    border-radius: 3px;
    background: var(--teal);
    box-shadow: 0 0 12px rgba(66, 190, 158, 0.65);
}

.production-machine {
    position: absolute;
    width: 18%;
    height: 34%;
    top: 13%;
    border: 2px solid var(--teal-dark);
    border-radius: 8px;
    background: linear-gradient(145deg, #ffffff, #dce3d4);
    transform: translateZ(30px);
    box-shadow: 8px 12px 0 rgba(0, 61, 61, 0.12);
}

.production-machine-one { left: 14%; }
.production-machine-two { left: 41%; }
.production-machine-three { right: 14%; }

.production-machine i {
    position: absolute;
    inset: 13% 16% 35%;
    border-radius: 4px;
    background: var(--teal-dark);
}

.production-machine i::after {
    content: "";
    position: absolute;
    width: 48%;
    height: 6px;
    left: 14%;
    top: 24%;
    border-radius: 10px;
    background: var(--mint);
    box-shadow: 0 11px 0 rgba(237, 240, 218, 0.42);
}

.production-machine b {
    position: absolute;
    width: 9px;
    height: 9px;
    right: 15%;
    bottom: 14%;
    border-radius: 50%;
    background: #48c78e;
    box-shadow: 0 0 0 4px rgba(72, 199, 142, 0.18);
    animation: productionPulse 1.8s ease-in-out infinite;
}

.production-route {
    position: absolute;
    width: 78%;
    height: 64%;
    left: 11%;
    top: 10%;
    border: 2px dashed rgba(0, 131, 131, 0.5);
    border-radius: 20px;
}

.service-visual-object {
    display: none;
}

.service-detail-page:not(.service-production-management) .production-line,
.service-detail-page:not(.service-production-management) .production-machine {
    display: none;
}

.service-detail-page:not(.service-production-management) .production-route {
    width: 68%;
    height: 68%;
    left: 16%;
    top: 14%;
    border-color: color-mix(in srgb, var(--model-accent) 64%, transparent);
    border-radius: 50%;
    animation: serviceRouteSpin 18s linear infinite;
}

.service-detail-page:not(.service-production-management) .service-visual-object {
    position: absolute;
    inset: 12%;
    display: block;
    transform-style: preserve-3d;
    transform: translateZ(36px);
}

.service-object-core {
    position: absolute;
    width: 32%;
    aspect-ratio: 1;
    left: 34%;
    top: 31%;
    border: 2px solid var(--teal-dark);
    border-radius: 18px;
    background: linear-gradient(145deg, #ffffff, color-mix(in srgb, var(--model-accent) 20%, #dce3d4));
    box-shadow: 10px 13px 0 rgba(0, 61, 61, 0.14), 0 18px 38px rgba(0, 61, 61, 0.16);
    transform: translateZ(38px);
}

.service-object-core i,
.service-object-core b {
    position: absolute;
    display: block;
}

.service-object-core i {
    width: 32%;
    aspect-ratio: 1;
    left: 34%;
    top: 18%;
    border-radius: 50%;
    background: var(--model-accent);
}

.service-object-core b {
    width: 58%;
    height: 22%;
    left: 21%;
    bottom: 20%;
    border-radius: 50% 50% 12px 12px;
    background: var(--teal-dark);
}

.service-visual-object > span {
    position: absolute;
    width: 15%;
    aspect-ratio: 1;
    border: 2px solid var(--teal-dark);
    border-radius: 12px;
    background: var(--model-accent);
    box-shadow: 6px 8px 0 rgba(0, 61, 61, 0.12);
}

.service-visual-object > span:nth-of-type(1) { left: 4%; top: 12%; }
.service-visual-object > span:nth-of-type(2) { right: 3%; top: 16%; }
.service-visual-object > span:nth-of-type(3) { left: 8%; bottom: 8%; }
.service-visual-object > span:nth-of-type(4) { right: 7%; bottom: 5%; }

.service-crm-applications {
    --model-accent: #75cdb7;
}

.service-service-management {
    --model-accent: #f3b96c;
}

.service-hr-employee-apps {
    --model-accent: #e99a8d;
}

.service-inventory-systems {
    --model-accent: #b9cf73;
}

.service-enterprise-solutions {
    --model-accent: #79b9cf;
}

.service-crm-applications .service-visual-object > span {
    border-radius: 50%;
}

.service-service-management .service-object-core {
    border-radius: 50%;
    box-shadow:
        0 0 0 10px color-mix(in srgb, var(--model-accent) 32%, transparent),
        10px 13px 0 rgba(0, 61, 61, 0.14);
}

.service-service-management .service-object-core i {
    width: 48%;
    left: 26%;
    top: 16%;
    border: 7px solid var(--model-accent);
    background: transparent;
}

.service-service-management .service-object-core b {
    width: 46%;
    height: 8%;
    left: 27%;
    bottom: 24%;
    border-radius: 10px;
}

.service-hr-employee-apps .service-visual-object > span {
    border-radius: 50% 50% 12px 12px;
}

.service-inventory-systems .service-object-core,
.service-inventory-systems .service-visual-object > span {
    border-radius: 4px;
    transform: rotate(45deg);
}

.service-inventory-systems .service-object-core i,
.service-inventory-systems .service-object-core b {
    border-radius: 3px;
    transform: rotate(-45deg);
}

.service-enterprise-solutions .service-object-core {
    width: 38%;
    left: 31%;
    top: 28%;
    border-radius: 5px;
    background:
        linear-gradient(90deg, transparent 48%, rgba(0, 61, 61, 0.14) 49% 51%, transparent 52%),
        linear-gradient(transparent 48%, rgba(0, 61, 61, 0.14) 49% 51%, transparent 52%),
        linear-gradient(145deg, #ffffff, color-mix(in srgb, var(--model-accent) 25%, #dce3d4));
}

.service-enterprise-solutions .service-object-core i {
    border-radius: 5px;
}

.service-enterprise-solutions .service-object-core b {
    height: 7px;
    border-radius: 10px;
}

.service-detail-page:not(.service-production-management) .production-model {
    background:
        linear-gradient(rgba(0, 83, 83, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 83, 83, 0.04) 1px, transparent 1px),
        radial-gradient(circle at 55% 46%, color-mix(in srgb, var(--model-accent) 35%, transparent), transparent 42%),
        #e9eddb;
    background-size: 38px 38px, 38px 38px, auto, auto;
}

.service-detail-page:not(.service-production-management) .production-chart i {
    background: linear-gradient(to top, var(--teal), var(--model-accent));
}

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

.production-panel,
.production-status {
    position: absolute;
    z-index: 2;
    border: 1px solid rgba(237, 240, 218, 0.2);
    color: #ffffff;
    background: rgba(0, 61, 61, 0.94);
    box-shadow: 0 22px 45px rgba(0, 61, 61, 0.23);
    backdrop-filter: blur(8px);
}

.production-panel {
    width: 52%;
    min-height: 42%;
    top: 1%;
    right: 0;
    padding: clamp(18px, 2.2vw, 28px);
    border-radius: 20px;
    transform: translateZ(85px);
}

.production-panel-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.11em;
}

.production-panel-top i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #48c78e;
    box-shadow: 0 0 0 5px rgba(72, 199, 142, 0.12);
}

.production-panel > strong,
.production-panel > small {
    display: block;
}

.production-panel > strong {
    margin-top: 17px;
    color: var(--beige);
    font-size: clamp(2rem, 4vw, 3.6rem);
    line-height: 1;
}

.production-panel > small {
    margin-top: 7px;
    color: rgba(255, 255, 255, 0.58);
    font-size: clamp(0.55rem, 1vw, 0.72rem);
}

.production-chart {
    height: clamp(52px, 8vw, 82px);
    margin-top: 18px;
    display: flex;
    align-items: flex-end;
    gap: clamp(5px, 1vw, 10px);
}

.production-chart i {
    width: 100%;
    height: var(--bar);
    border-radius: 4px 4px 1px 1px;
    background: linear-gradient(to top, var(--teal), var(--mint));
    transform-origin: bottom;
    animation: productionBars 2.8s ease-in-out infinite alternate;
}

.production-chart i:nth-child(even) {
    animation-delay: -1.2s;
}

.production-status {
    min-width: 112px;
    padding: 14px 17px;
    border-radius: 14px;
    transform: translateZ(110px);
}

.production-status-output {
    left: 0;
    top: 29%;
}

.production-status-quality {
    right: 5%;
    bottom: 5%;
}

.production-status span,
.production-status strong,
.production-status small {
    display: block;
}

.production-status span {
    color: var(--mint);
    font-size: 0.53rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.production-status strong {
    margin-top: 5px;
    font-size: 1.25rem;
}

.production-status small {
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.6rem;
}

.production-model-caption {
    margin: 18px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: rgba(0, 61, 61, 0.6);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.production-model-caption span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #48c78e;
    box-shadow: 0 0 0 5px rgba(72, 199, 142, 0.13);
}

@keyframes productionPulse {
    50% { opacity: 0.45; transform: scale(0.72); }
}

@keyframes productionBars {
    to { transform: scaleY(0.78); opacity: 0.72; }
}

.service-detail-advantages {
    padding: clamp(70px, 8vw, 110px) 0;
    color: #ffffff;
    background:
        radial-gradient(circle at 88% 16%, rgba(66, 190, 158, 0.16), transparent 28%),
        var(--teal-dark);
}

.service-detail-advantages .service-detail-section-head h2 {
    color: #ffffff;
}

.service-detail-advantages .service-detail-section-head > p {
    color: var(--beige);
}

.service-advantage-grid {
    margin-top: clamp(34px, 5vw, 58px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.service-advantage-grid article {
    min-height: 210px;
    padding: clamp(26px, 3vw, 38px);
    border: 1px solid rgba(237, 240, 218, 0.16);
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.045);
}

.service-advantage-grid span {
    color: rgba(237, 240, 218, 0.55);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.service-advantage-grid p {
    margin: 28px 0 0;
    color: #ffffff;
    font-family: var(--font-head);
    font-size: clamp(1.1rem, 1.7vw, 1.45rem);
    font-weight: 600;
    line-height: 1.45;
}

.production-workflow {
    padding: clamp(75px, 9vw, 125px) 0;
    color: var(--teal-dark);
    background: var(--beige);
}

.production-workflow-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.7fr);
    gap: clamp(42px, 8vw, 120px);
    align-items: end;
}

.production-workflow-head h2 em {
    color: var(--teal);
    font-style: italic;
    font-weight: 500;
}

.production-workflow-head > p {
    margin: 0 0 5px;
    color: rgba(0, 61, 61, 0.68);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0;
    text-transform: none;
}

.production-workflow-grid {
    position: relative;
    margin-top: clamp(42px, 6vw, 72px);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.production-workflow-grid::before {
    content: "";
    position: absolute;
    height: 1px;
    left: 4%;
    right: 4%;
    top: 27px;
    background: rgba(0, 83, 83, 0.18);
}

.production-workflow-grid article {
    position: relative;
    z-index: 1;
    padding-right: clamp(20px, 3vw, 42px);
}

.production-workflow-grid article > span {
    width: 55px;
    height: 55px;
    border: 1px solid rgba(0, 83, 83, 0.2);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--teal);
    background: var(--beige);
    font-size: 0.65rem;
    font-weight: 800;
    transition: color 200ms ease, background 200ms ease, transform 200ms ease;
}

.production-workflow-grid article:hover > span {
    color: #ffffff;
    background: var(--teal);
    transform: translateY(-4px);
}

.production-workflow-grid h3 {
    margin: 25px 0 12px;
    color: var(--teal-dark);
    font-size: clamp(1.05rem, 1.5vw, 1.3rem);
}

.production-workflow-grid p {
    margin: 0;
    color: rgba(0, 61, 61, 0.63);
    font-size: 0.9rem;
    line-height: 1.75;
}

.service-detail-features {
    position: relative;
    padding: clamp(75px, 9vw, 125px) 0;
    overflow: hidden;
    isolation: isolate;
    background:
        linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px),
        var(--teal-dark);
    background-size: 48px 48px;
}

.service-features-orb {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(2px);
}

.service-features-orb-one {
    width: clamp(280px, 34vw, 520px);
    aspect-ratio: 1;
    right: -12%;
    top: -22%;
    background: radial-gradient(circle, color-mix(in srgb, var(--model-accent) 22%, transparent), transparent 69%);
}

.service-features-orb-two {
    width: clamp(220px, 28vw, 430px);
    aspect-ratio: 1;
    left: -10%;
    bottom: -28%;
    background: radial-gradient(circle, rgba(66, 190, 158, 0.15), transparent 70%);
}

.service-detail-features-inner {
    position: relative;
}

.service-features-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.55fr);
    gap: clamp(36px, 8vw, 120px);
    align-items: end;
}

.service-detail-features .service-features-head h2 {
    color: #ffffff;
    font-size: clamp(2.15rem, 4vw, 3.7rem);
}

.service-features-head h2 em {
    color: var(--model-accent);
    font-style: italic;
    font-weight: 500;
}

.service-features-head > p {
    margin: 0 0 5px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.98rem;
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: 0;
    text-transform: none;
}

.service-feature-grid {
    margin: clamp(42px, 6vw, 72px) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: 14px;
    list-style: none;
}

.service-feature-card {
    position: relative;
    min-height: 190px;
    padding: clamp(22px, 2.5vw, 30px);
    border: 1px solid rgba(237, 240, 218, 0.13);
    border-radius: 22px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.045);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: border-color 250ms ease, background 250ms ease, transform 250ms ease, box-shadow 250ms ease;
}

.service-feature-card:nth-child(1),
.service-feature-card:nth-child(6),
.service-feature-card:nth-child(7),
.service-feature-card:nth-child(8) {
    grid-column: span 2;
}

.service-feature-card:nth-child(1),
.service-feature-card:nth-child(6) {
    background:
        radial-gradient(circle at 88% 5%, color-mix(in srgb, var(--model-accent) 24%, transparent), transparent 42%),
        rgba(255, 255, 255, 0.07);
}

.service-feature-card::after {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    right: -70px;
    bottom: -72px;
    border: 1px solid color-mix(in srgb, var(--model-accent) 28%, transparent);
    border-radius: 50%;
    transition: transform 350ms ease;
}

.service-feature-card:hover {
    border-color: color-mix(in srgb, var(--model-accent) 52%, transparent);
    background-color: rgba(255, 255, 255, 0.085);
    box-shadow: 0 22px 45px rgba(0, 20, 20, 0.22);
    transform: translateY(-6px);
}

.service-feature-card:hover::after {
    transform: scale(1.35);
}

.service-feature-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.service-feature-card-top span {
    color: color-mix(in srgb, var(--model-accent) 88%, #ffffff);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.service-feature-card-top i {
    width: 33px;
    height: 33px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.82rem;
    font-style: normal;
    transition: color 200ms ease, border-color 200ms ease, background 200ms ease, transform 200ms ease;
}

.service-feature-card:hover .service-feature-card-top i {
    border-color: var(--model-accent);
    color: var(--teal-dark);
    background: var(--model-accent);
    transform: rotate(45deg);
}

.service-feature-card > p {
    position: relative;
    z-index: 1;
    max-width: 290px;
    margin: 32px 0 12px;
    color: #ffffff;
    font-family: var(--font-head);
    font-size: clamp(1rem, 1.35vw, 1.22rem);
    font-weight: 600;
    line-height: 1.42;
}

.service-feature-line {
    width: 100%;
    height: 2px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
}

.service-feature-line::before {
    content: "";
    width: 34%;
    height: 100%;
    display: block;
    background: var(--model-accent);
    transform-origin: left;
    transition: width 350ms ease;
}

.service-feature-card:hover .service-feature-line::before {
    width: 100%;
}

.service-detail-cta {
    padding: clamp(28px, 4vw, 52px);
    background: #f8f9ee;
}

.service-detail-cta-inner {
    padding: clamp(34px, 5vw, 64px);
    border-radius: clamp(24px, 3vw, 36px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
    color: #ffffff;
    background: linear-gradient(128deg, var(--teal-dark), var(--teal));
}

.service-detail-cta-inner > div > p {
    color: var(--beige);
}

.service-detail-cta h2 {
    max-width: 760px;
    margin: 0;
    font-size: clamp(1.7rem, 3.4vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.045em;
}

.service-detail-cta a {
    flex: 0 0 auto;
    padding: 15px 22px;
    border-radius: 999px;
    color: var(--teal-dark);
    background: var(--beige);
    font-weight: 700;
}

@media (max-width: 900px) {
    .service-detail-intro-grid {
        grid-template-columns: 1fr;
    }

    .service-detail-image {
        height: 440px;
    }

    .service-advantage-grid {
        grid-template-columns: 1fr;
    }

    .production-workflow-head {
        grid-template-columns: 1fr;
    }

    .production-workflow-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 42px 24px;
    }

    .production-workflow-grid::before {
        display: none;
    }

    .service-features-head {
        grid-template-columns: 1fr;
    }

    .service-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-feature-card,
    .service-feature-card:nth-child(1),
    .service-feature-card:nth-child(6),
    .service-feature-card:nth-child(7),
    .service-feature-card:nth-child(8) {
        grid-column: span 1;
    }
}

@media (max-width: 600px) {
    .service-detail-image {
        height: 310px;
    }

    .service-feature-grid {
        grid-template-columns: 1fr;
    }

    .service-feature-card {
        min-height: 165px;
    }

    .service-detail-cta-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .service-detail-metrics {
        gap: 0;
    }

    .service-detail-metrics div {
        padding: 0 9px;
    }

    .production-model {
        height: 390px;
    }

    .production-model-scene {
        width: 92%;
        height: 82%;
        left: 4%;
        top: 9%;
    }

    .production-panel {
        width: 66%;
    }

    .production-status {
        min-width: 94px;
        padding: 11px 12px;
    }

    .production-status-output {
        top: 39%;
    }

    .production-status-quality {
        right: 0;
    }

    .production-workflow-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .production-workflow-grid article {
        display: grid;
        grid-template-columns: 55px 1fr;
        gap: 18px;
        padding-right: 0;
    }

    .production-workflow-grid h3 {
        margin-top: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .production-machine b,
    .production-chart i,
    .service-detail-page:not(.service-production-management) .production-route {
        animation: none;
    }

    .production-model-scene {
        transition: none;
    }
}

/* ============================================================
   About page — scroll-driven 3D company story
   ============================================================ */
.about-page {
    background: var(--teal-dark);
}

.about-page-hero {
    position: relative;
    min-height: clamp(250px, 30vw, 360px);
    padding-top: var(--header-height);
    overflow: hidden;
    display: flex;
    align-items: center;
    isolation: isolate;
    color: var(--teal-dark);
    background-color: var(--beige);
    background-image: url("../images/about/about-hero-bg.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.about-page-hero::before {
    content: none;
}

.about-page-hero-overlay {
    position: absolute;
    z-index: 0;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(237, 240, 218, 0.84) 0%, rgba(237, 240, 218, 0.54) 42%, rgba(237, 240, 218, 0.08) 100%),
        linear-gradient(0deg, rgba(237, 240, 218, 0.04), rgba(237, 240, 218, 0.04));
}

.about-page-hero-content {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-top: clamp(28px, 4vw, 48px);
    padding-bottom: clamp(32px, 5vw, 56px);
}

/* People-free, page-related breadcrumb imagery. */
.services-page .about-page-hero {
    background-image: url("../images/services-breadcrumb-bg.png") !important;
    background-position: center !important;
}

.career-page .about-page-hero {
    background-image: url("../images/career-breadcrumb-bg.png") !important;
    background-position: center !important;
}

.service-crm-applications .about-page-hero {
    background-image: url("../images/crm-breadcrumb-bg.png") !important;
    background-position: center !important;
}

.service-production-management .about-page-hero {
    background-image: url("../images/production-breadcrumb-bg.png") !important;
    background-position: center !important;
}

.service-service-management .about-page-hero {
    background-image: url("../images/service-management-breadcrumb-bg.png") !important;
    background-position: center !important;
}

.service-hr-employee-apps .about-page-hero {
    background-image: url("../images/hr-breadcrumb-bg.png") !important;
    background-position: center !important;
}

.service-inventory-systems .about-page-hero {
    background-image: url("../images/inventory-breadcrumb-bg.png") !important;
    background-position: center !important;
}

.service-enterprise-solutions .about-page-hero {
    background-image: url("../images/enterprise-breadcrumb-bg.png") !important;
    background-position: center !important;
}

.about-page-kicker {
    margin: 0 0 13px;
    color: var(--teal);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.about-page-hero h1 {
    margin: 0;
    color: var(--teal-dark);
    font-size: clamp(2.2rem, 4.5vw, 4.25rem);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.06em;
}

.about-breadcrumb {
    margin-top: 24px;
    display: flex;
    align-items: center;
    display: none;
    gap: 11px;
    color: rgba(0, 61, 61, 0.62);
    font-size: 0.78rem;
    font-weight: 600;
}

.about-breadcrumb a {
    color: var(--teal-dark);
    transition: color 0.2s ease;
}

.about-breadcrumb a:hover {
    color: var(--teal);
}

.about-breadcrumb span[aria-hidden="true"] {
    color: var(--teal);
}

/* Plain Journal page */
.journal-plain {
    padding: 72px 0 96px;
    background: var(--cream, #edf0da);
}

.journal-plain-inner {
    max-width: 640px;
}

.journal-plain-inner .about-page-kicker {
    color: var(--teal);
}

.journal-plain-inner h2 {
    margin: 0 0 16px;
    color: var(--teal-dark, #003d3d);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.03em;
}

.journal-plain-inner > p {
    margin: 0;
    color: rgba(0, 61, 61, 0.72);
    font-size: 1.05rem;
    line-height: 1.7;
}

/* ============================================================
   Journal feed — WP API grid + sidebar
   ============================================================ */
.journal-feed {
    padding: clamp(48px, 6vw, 88px) 0 clamp(72px, 8vw, 120px);
    background:
        radial-gradient(ellipse at 12% 0%, rgba(0, 83, 83, 0.05), transparent 42%),
        linear-gradient(180deg, #f7f8f2 0%, #ffffff 38%, #ffffff 100%);
}

.journal-feed-intro {
    max-width: 640px;
    margin-bottom: clamp(32px, 4vw, 48px);
}

.journal-feed-intro .about-page-kicker {
    color: var(--teal);
}

.journal-feed-intro h2 {
    margin: 0;
    color: var(--teal-dark);
    font-family: "Source Serif 4", Georgia, serif;
    font-size: clamp(1.75rem, 3.2vw, 2.55rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.journal-search-status {
    margin: 14px 0 0;
    color: #666;
    font-family: Inter, Poppins, sans-serif;
    font-size: 0.92rem;
    line-height: 1.5;
}

.journal-search-status strong {
    color: #111;
    font-weight: 600;
}

.journal-search-clear {
    margin-left: 10px;
    color: var(--teal);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.journal-search-clear:hover,
.journal-search-clear:focus-visible {
    color: #003f3c;
}

.journal-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
    gap: clamp(36px, 5vw, 64px);
    align-items: start;
}

.journal-posts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(28px, 3.5vw, 40px) clamp(20px, 2.5vw, 32px);
}

.journal-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.journal-card-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #d8ddd0;
}

.journal-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(0.35) contrast(1.05);
    transition: transform 0.55s ease, filter 0.45s ease;
}

.journal-card-link:hover .journal-card-media img,
.journal-card-link:focus-visible .journal-card-media img {
    transform: scale(1.04);
    filter: grayscale(0) contrast(1.02);
}

.journal-card-title {
    margin: 14px 0 6px;
    color: #111;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: clamp(1.05rem, 1.6vw, 1.28rem);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    transition: color 0.25s ease;
}

.journal-card-link:hover .journal-card-title,
.journal-card-link:focus-visible .journal-card-title {
    color: var(--teal);
}

.journal-card-date {
    display: block;
    color: #8a8a8a;
    font-family: Inter, Poppins, sans-serif;
    font-size: 0.82rem;
    font-weight: 400;
    letter-spacing: 0.01em;
}

.journal-sidebar {
    position: sticky;
    top: 96px;
}

.journal-search {
    display: flex;
    align-items: stretch;
    border: 1px solid #d6d6d6;
    background: #fff;
    margin-bottom: 36px;
}

.journal-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    padding: 12px 14px;
    font-family: Inter, Poppins, sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #222;
    background: transparent;
}

.journal-search input::placeholder {
    color: #9a9a9a;
}

.journal-search button {
    width: 46px;
    border: 0;
    background: #111;
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 0.25s ease;
}

.journal-search button:hover,
.journal-search button:focus-visible {
    background: var(--teal);
}

.journal-recent-title {
    margin: 0 0 18px;
    color: #111;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
}

.journal-recent-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.journal-recent-list a {
    display: block;
    color: #1a1a1a;
    text-decoration: none;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.35;
    transition: color 0.25s ease;
}

.journal-recent-list a:hover,
.journal-recent-list a:focus-visible {
    color: var(--teal);
}

.journal-recent-list time {
    display: block;
    margin-top: 4px;
    color: #8a8a8a;
    font-family: Inter, Poppins, sans-serif;
    font-size: 0.8rem;
}

.journal-recent-empty {
    margin: 0;
    color: #888;
    font-size: 0.9rem;
}

.journal-empty {
    padding: 40px 28px;
    border: 1px dashed rgba(0, 61, 61, 0.28);
    background: rgba(255, 255, 255, 0.7);
    color: var(--teal-dark);
}

.journal-empty p {
    margin: 0 0 10px;
    font-size: 1rem;
    line-height: 1.6;
}

.journal-empty p:last-child {
    margin-bottom: 0;
}

.journal-empty-hint {
    font-size: 0.88rem !important;
    color: rgba(0, 61, 61, 0.7);
}

.journal-empty-hint code {
    display: inline-block;
    margin-top: 6px;
    padding: 6px 8px;
    background: #edf0da;
    font-size: 0.8rem;
    word-break: break-all;
}

.journal-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 20px;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.journal-page-link {
    color: var(--teal);
    font-family: Inter, Poppins, sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

.journal-page-link:hover,
.journal-page-link:focus-visible {
    text-decoration: underline;
}

.journal-page-status {
    color: #777;
    font-size: 0.85rem;
}

.journal-page .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 980px) {
    .journal-layout {
        grid-template-columns: 1fr;
    }

    .journal-sidebar {
        position: static;
        order: -1;
    }

    .journal-search {
        margin-bottom: 28px;
    }
}

@media (max-width: 640px) {
    .journal-posts {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Journal article (single post)
   ============================================================ */
.journal-article-hero {
    position: relative;
    padding: clamp(88px, 12vw, 130px) 0 clamp(40px, 5vw, 64px);
    background: linear-gradient(180deg, #edf0da 0%, #f7f8f2 100%);
    overflow: hidden;
}

.journal-article-hero--cover {
    min-height: clamp(340px, 48vw, 460px);
    display: flex;
    align-items: flex-end;
    background: var(--teal-dark);
    color: #fff;
}

.journal-article-hero-media {
    position: absolute;
    inset: 0;
    background-image: var(--cover-image);
    background-size: cover;
    background-position: center;
    filter: grayscale(0.2) contrast(1.05);
    transform: scale(1.02);
}

.journal-article-hero-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0, 40, 40, 0.55) 0%, rgba(0, 40, 40, 0.72) 55%, rgba(0, 40, 40, 0.88) 100%);
}

.journal-article-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 920px;
}

.journal-article-hero h1 {
    margin: 10px 0 16px;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: clamp(1.85rem, 4vw, 3rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--teal-dark);
}

.journal-article-hero--cover h1 {
    color: #fff;
}

.journal-article-kicker {
    margin: 18px 0 0;
    color: var(--teal);
    font-family: Inter, Poppins, sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.journal-article-kicker--light {
    color: rgba(237, 240, 218, 0.92);
}

.journal-article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    color: rgba(0, 61, 61, 0.68);
    font-family: Inter, Poppins, sans-serif;
    font-size: 0.9rem;
}

.journal-article-meta--light {
    color: rgba(255, 255, 255, 0.82);
}

.about-breadcrumb--on-dark a,
.about-breadcrumb--on-dark span {
    color: rgba(255, 255, 255, 0.78);
}

.about-breadcrumb--on-dark a:hover,
.about-breadcrumb--on-dark a:focus-visible {
    color: #fff;
}

.about-breadcrumb--on-dark span[aria-current="page"] {
    color: #fff;
}

.journal-article-body {
    padding: clamp(40px, 5vw, 72px) 0 clamp(72px, 8vw, 110px);
    background: #fff;
}

.journal-article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 280px);
    gap: clamp(36px, 5vw, 64px);
    align-items: start;
}

.journal-article-figure {
    margin: 0 0 28px;
    overflow: hidden;
    background: #edf0da;
}

.journal-article-figure img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: cover;
}

.journal-prose {
    color: rgba(17, 24, 24, 0.9);
    font-family: Inter, Poppins, sans-serif;
    font-size: 1.05rem;
    line-height: 1.8;
}

.journal-prose > *:first-child {
    margin-top: 0;
}

.journal-prose h1,
.journal-prose h2,
.journal-prose h3,
.journal-prose h4 {
    margin: 1.6em 0 0.55em;
    color: var(--teal-dark);
    font-family: "Source Serif 4", Georgia, serif;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.015em;
}

.journal-prose h2 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); }
.journal-prose h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); }

.journal-prose p {
    margin: 0 0 1.15em;
    text-align: justify;
}

.journal-prose a {
    color: var(--teal);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.journal-prose ul,
.journal-prose ol {
    margin: 0 0 1.2em;
    padding-left: 1.25em;
}

.journal-prose li {
    margin-bottom: 0.45em;
}

.journal-prose img {
    max-width: 100%;
    height: auto;
    margin: 1.2em 0;
}

.journal-prose blockquote {
    margin: 1.4em 0;
    padding: 0.2em 0 0.2em 1em;
    border-left: 3px solid var(--teal);
    color: rgba(0, 61, 61, 0.82);
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 1.12rem;
}

.journal-prose figure {
    margin: 1.4em 0;
}

.journal-article-footer {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.journal-back-link {
    display: inline-flex;
    align-items: center;
    color: var(--teal);
    font-family: Inter, Poppins, sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
}

.journal-back-link:hover,
.journal-back-link:focus-visible {
    text-decoration: underline;
}

.journal-article-aside {
    position: sticky;
    top: 96px;
}

.journal-article-missing {
    padding: clamp(100px, 14vw, 140px) 0 96px;
    background: linear-gradient(180deg, #edf0da 0%, #fff 55%);
}

.journal-article-missing h1 {
    margin: 10px 0 12px;
    color: var(--teal-dark);
    font-family: "Source Serif 4", Georgia, serif;
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
}

.journal-article-missing p {
    margin: 0 0 22px;
    color: rgba(0, 61, 61, 0.72);
    max-width: 520px;
    line-height: 1.6;
}

@media (max-width: 980px) {
    .journal-article-layout {
        grid-template-columns: 1fr;
    }

    .journal-article-aside {
        position: static;
        order: 2;
        padding-top: 12px;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
    }
}

.about-story-track {
    position: relative;
    height: 430vh;
    color: var(--beige);
    background: var(--teal-dark);
}

.about-story-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 650px;
    overflow: hidden;
    display: flex;
    align-items: center;
    isolation: isolate;
    background:
        radial-gradient(circle at 15% 50%, rgba(237, 240, 218, 0.10), transparent 33%),
        linear-gradient(135deg, #002f2f 0%, var(--teal-dark) 55%, #001f1f 100%);
    perspective: 1400px;
}

.about-story-grid-lines {
    position: absolute;
    z-index: -3;
    inset: 0;
    opacity: 0.16;
    background-image:
        linear-gradient(rgba(237, 240, 218, 0.13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(237, 240, 218, 0.13) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 78%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 78%, transparent);
    transform: perspective(800px) rotateX(62deg) scale(1.8) translateY(25%);
    transform-origin: center bottom;
}

.about-story-aurora {
    position: absolute;
    z-index: -2;
    width: 42vw;
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.17;
    pointer-events: none;
}

.about-story-aurora-one {
    left: -20vw;
    top: 14%;
    background: #0a8b83;
}

.about-story-aurora-two {
    right: -24vw;
    bottom: -35%;
    background: var(--beige);
}

.about-story-word {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    color: transparent;
    -webkit-text-stroke: 1px rgba(237, 240, 218, 0.07);
    font-family: var(--font-head);
    font-size: clamp(8rem, 22vw, 24rem);
    font-weight: 800;
    letter-spacing: -0.08em;
    line-height: 1;
    transform: translate(-50%, -45%);
    pointer-events: none;
    white-space: nowrap;
}

.about-story-grid {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-top: var(--header-height);
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.92fr);
    gap: clamp(28px, 5vw, 78px);
    align-items: center;
}

.about-story-visual {
    position: relative;
    min-height: min(72vh, 720px);
    display: grid;
    place-items: center;
    transform-style: flat;
}

.about-story-image-wrap {
    position: relative;
    z-index: 3;
    width: min(100%, 690px);
    aspect-ratio: 4 / 3;
    border-radius: 0;
    overflow: visible;
    background: transparent;
    transform-style: flat;
    filter: none;
}

.about-story-image-wrap::after {
    display: none;
}

.about-cloud-art {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
    shape-rendering: geometricPrecision;
}

.about-story-scan {
    position: absolute;
    inset: 10% 7%;
    border-top: 1px solid rgba(237, 240, 218, 0.64);
    box-shadow: 0 -8px 24px rgba(0, 83, 83, 0.32);
    animation: aboutScan 4.8s ease-in-out infinite;
    pointer-events: none;
}

.about-story-halo {
    position: absolute;
    width: 72%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(13, 133, 125, 0.28), rgba(237, 240, 218, 0.05) 44%, transparent 70%);
    filter: blur(8px);
    transform: translateZ(-80px);
}

.about-story-orbit {
    position: absolute;
    z-index: 1;
    width: 72%;
    aspect-ratio: 1;
    border: 1px solid rgba(237, 240, 218, 0.18);
    border-radius: 50%;
    transform-style: preserve-3d;
    animation: aboutOrbit 14s linear infinite;
}

.about-story-orbit::before {
    content: "";
    position: absolute;
    top: 6%;
    left: 22%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--beige);
    box-shadow: 0 0 18px rgba(237, 240, 218, 0.72);
}

.about-story-orbit-one {
    transform: rotateX(70deg) rotateZ(-15deg);
}

.about-story-orbit-two {
    width: 90%;
    opacity: 0.62;
    animation-duration: 20s;
    animation-direction: reverse;
    transform: rotateY(72deg) rotateZ(20deg);
}

.about-float-card {
    position: absolute;
    z-index: 6;
    min-width: 220px;
    padding: 14px 18px 14px 13px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 17px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(0, 61, 61, 0.76);
    background: linear-gradient(145deg, #ffffff, var(--beige));
    box-shadow: 0 18px 42px rgba(0, 24, 24, 0.34), inset 0 1px #ffffff;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.35;
    animation: none;
}

.about-float-card strong {
    display: block;
    margin-bottom: 2px;
    color: var(--teal-dark);
    font-family: var(--font-head);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.about-float-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: var(--beige);
    background: var(--teal);
    box-shadow: 0 8px 18px rgba(0, 83, 83, 0.20);
}

.about-float-icon svg {
    width: 25px;
    height: 25px;
}

.about-float-card-apps {
    top: 1%;
    left: 0;
}

.about-float-card-cloud {
    top: 8%;
    right: 0;
}

.about-float-card-growth {
    right: 1%;
    bottom: 1%;
}

.about-story-copy {
    position: relative;
    z-index: 5;
    padding-right: clamp(0px, 2vw, 24px);
}

.about-story-eyebrow {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--beige);
    font-family: var(--font-head);
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.about-story-eyebrow span {
    width: 29px;
    height: 1px;
    background: var(--beige);
    box-shadow: 0 0 10px rgba(237, 240, 218, 0.55);
}

.about-story-title {
    max-width: 610px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(2.35rem, 4.25vw, 4.65rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.055em;
}

.about-story-title em {
    display: block;
    color: var(--beige);
    font-style: normal;
    text-shadow: 0 0 30px rgba(237, 240, 218, 0.16);
}

.about-story-steps {
    position: relative;
    min-height: 154px;
    margin-top: clamp(28px, 4vh, 42px);
}

.about-story-step {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 14px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(24px) rotateX(-8deg);
    transform-origin: top;
    transition: opacity 0.42s ease, transform 0.52s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.42s;
}

.about-story-step.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) rotateX(0);
}

.about-story-step-no {
    padding-top: 5px;
    color: rgba(237, 240, 218, 0.56);
    font-family: var(--font-head);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.about-story-step h2 {
    margin: 0 0 8px;
    color: var(--beige);
    font-size: clamp(1.05rem, 1.7vw, 1.45rem);
    font-weight: 600;
}

.about-story-step p {
    max-width: 580px;
    margin: 0;
    color: rgba(237, 240, 218, 0.62);
    font-size: clamp(0.84rem, 1.05vw, 0.98rem);
    line-height: 1.75;
}

.about-story-footer {
    display: grid;
    grid-template-columns: minmax(90px, 1fr) auto auto;
    gap: 14px;
    align-items: center;
}

.about-story-progress {
    height: 2px;
    overflow: hidden;
    background: rgba(237, 240, 218, 0.13);
}

.about-story-progress span {
    width: 25%;
    height: 100%;
    display: block;
    background: linear-gradient(90deg, #0a7b75, var(--beige));
    box-shadow: 0 0 10px rgba(237, 240, 218, 0.42);
    transform-origin: left;
}

.about-story-count {
    color: rgba(237, 240, 218, 0.34);
    font-family: var(--font-head);
    font-size: 0.64rem;
    letter-spacing: 0.08em;
}

.about-story-count b {
    color: var(--beige);
    font-weight: 700;
}

.about-story-link {
    margin-left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--beige);
    font-size: 0.7rem;
    font-weight: 700;
    transition: color 0.25s ease;
}

.about-story-link span {
    color: var(--beige);
    font-size: 1rem;
    transition: transform 0.25s ease;
}

.about-story-link:hover {
    color: #ffffff;
}

.about-story-link:hover span {
    transform: translate(3px, -3px);
}

.about-scroll-note {
    position: absolute;
    z-index: 8;
    left: 50%;
    bottom: 18px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: rgba(237, 240, 218, 0.36);
    font-size: 0.54rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transform: translateX(-50%);
}

.about-scroll-note span {
    width: 1px;
    height: 27px;
    background: linear-gradient(transparent, var(--beige));
    animation: aboutScroll 1.8s ease-in-out infinite;
}

@keyframes aboutFloat {
    0%, 100% { transform: translate3d(0, 0, 32px) rotateY(-2deg); }
    50% { transform: translate3d(0, -11px, 46px) rotateY(2deg); }
}

@keyframes aboutOrbit {
    to { rotate: 1 0 0 360deg; }
}

@keyframes aboutShine {
    0%, 55% { transform: translateX(-130%); }
    82%, 100% { transform: translateX(130%); }
}

@keyframes aboutScan {
    0%, 100% { transform: translateY(0); opacity: 0; }
    15% { opacity: 0.7; }
    75% { opacity: 0.5; }
    90% { transform: translateY(460px); opacity: 0; }
}

@keyframes aboutScroll {
    0%, 100% { transform: scaleY(0.25); transform-origin: top; opacity: 0.3; }
    50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
}

.about-vmv {
    position: relative;
    z-index: 5;
    min-height: 100svh;
    padding: clamp(54px, 6vw, 82px) 0;
    overflow: hidden;
    color: var(--teal-dark);
    background:
        linear-gradient(rgba(0, 83, 83, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 83, 83, 0.035) 1px, transparent 1px),
        #f8f8ee;
    background-size: 42px 42px;
}

.about-vmv-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    pointer-events: none;
}

.about-vmv-glow-one {
    width: 440px;
    height: 440px;
    top: 4%;
    right: -210px;
    background: radial-gradient(circle, rgba(0, 122, 115, 0.13), transparent 68%);
}

.about-vmv-glow-two {
    width: 520px;
    height: 520px;
    bottom: 6%;
    left: -280px;
    background: radial-gradient(circle, rgba(237, 240, 218, 0.9), transparent 70%);
}

.about-vmv-head {
    position: relative;
    max-width: 820px;
    margin: 0 auto clamp(28px, 3.5vw, 46px);
    text-align: center;
}

.about-vmv-head > p:first-child {
    margin: 0 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--teal);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.about-vmv-head > p:first-child span {
    width: 28px;
    height: 1px;
    background: var(--teal);
}

.about-vmv-head h2 {
    margin: 0;
    font-size: clamp(2.1rem, 4vw, 4.25rem);
    line-height: 1.02;
    letter-spacing: -0.06em;
}

.about-vmv-head h2 em {
    color: var(--teal);
    font-style: normal;
}

.about-vmv-head > p:last-child {
    max-width: 650px;
    margin: 15px auto 0;
    color: #527272;
    font-size: clamp(0.92rem, 1.2vw, 1.06rem);
    line-height: 1.75;
}

.about-vmv-tabs {
    position: relative;
    z-index: 3;
    width: fit-content;
    margin: 0 auto clamp(20px, 2.5vw, 30px);
    padding: 7px;
    border: 1px solid rgba(0, 83, 83, .14);
    border-radius: 999px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    background: rgba(255, 255, 255, .76);
    box-shadow: 0 16px 42px rgba(0, 61, 61, .08);
    backdrop-filter: blur(12px);
}

.about-vmv-tab {
    min-width: clamp(120px, 14vw, 180px);
    padding: 13px 22px;
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #527272;
    background: transparent;
    font-family: var(--font-head);
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    transition: color .3s ease, background .3s ease, transform .3s ease, box-shadow .3s ease;
}

.about-vmv-tab span {
    color: #8aa4a0;
    font-size: .58rem;
    letter-spacing: .08em;
}

.about-vmv-tab:hover {
    color: var(--teal);
    transform: translateY(-2px);
}

.about-vmv-tab.is-active {
    color: var(--beige);
    background: linear-gradient(135deg, var(--teal), var(--teal-dark));
    box-shadow: 0 10px 25px rgba(0, 61, 61, .22);
}

.about-vmv-tab.is-active span {
    color: rgba(237, 240, 218, .65);
}

.about-vmv-tab:focus-visible {
    outline: 3px solid rgba(0, 122, 115, .25);
    outline-offset: 3px;
}

.about-vmv-list {
    position: relative;
    perspective: 1500px;
}

.about-vmv-card {
    position: relative;
    min-height: 400px;
    padding: clamp(30px, 4vw, 54px);
    border: 1px solid rgba(0, 83, 83, 0.12);
    border-radius: clamp(26px, 3vw, 44px);
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(380px, 1.08fr);
    gap: clamp(30px, 5vw, 82px);
    align-items: center;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 28px 75px rgba(0, 61, 61, 0.1);
    opacity: 1;
    transform: translateZ(0);
    transform-origin: center bottom;
    transform-style: preserve-3d;
    animation: vmvPanelIn .68s cubic-bezier(.2, .8, .2, 1) both;
}

.about-vmv-card::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .38;
    background: radial-gradient(circle at 80% 20%, rgba(0, 122, 115, .14), transparent 32%);
    pointer-events: none;
}

.about-vmv-card[hidden] {
    display: none;
}

.about-vmv-card-dark {
    color: #ffffff;
    background:
        radial-gradient(circle at 84% 16%, rgba(111, 204, 177, .18), transparent 28%),
        linear-gradient(135deg, #003d3d, #005b57 58%, #003333);
    border-color: rgba(237, 240, 218, .15);
    box-shadow: 0 32px 85px rgba(0, 45, 45, .24);
}

.about-vmv-card-dark::before {
    background-image: radial-gradient(circle, rgba(237, 240, 218, .17) 1px, transparent 1.2px);
    background-size: 24px 24px;
    mask-image: linear-gradient(90deg, transparent, #000);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000);
}

.about-vmv-copy {
    position: relative;
    z-index: 2;
    transform: translateZ(42px);
}

.about-vmv-number {
    display: block;
    margin-bottom: clamp(18px, 2.5vw, 30px);
    color: var(--teal);
    font-family: var(--font-head);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.about-vmv-card-dark .about-vmv-number {
    color: var(--beige);
}

.about-vmv-copy h3 {
    max-width: 590px;
    margin: 0;
    font-size: clamp(1.8rem, 3vw, 3.25rem);
    line-height: 1.05;
    letter-spacing: -.05em;
}

.about-vmv-copy > p {
    max-width: 570px;
    margin: 16px 0 0;
    color: #527272;
    font-size: clamp(.88rem, 1.1vw, 1rem);
    line-height: 1.8;
}

.about-vmv-card-dark .about-vmv-copy > p {
    color: rgba(237, 240, 218, .72);
}

.about-vmv-tags {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.about-vmv-tags span {
    padding: 7px 12px;
    border: 1px solid rgba(0, 83, 83, .15);
    border-radius: 999px;
    color: #426b69;
    background: rgba(237, 240, 218, .54);
    font-size: .64rem;
    font-weight: 700;
}

.about-vmv-card-dark .about-vmv-tags span {
    border-color: rgba(237, 240, 218, .18);
    color: var(--beige);
    background: rgba(255, 255, 255, .06);
}

.about-vmv-visual {
    position: relative;
    z-index: 2;
    min-height: 285px;
    display: grid;
    place-items: center;
    transform: translateZ(74px);
    transform-style: preserve-3d;
}

.about-vmv-visual svg {
    position: relative;
    z-index: 2;
    width: min(100%, 475px);
    height: auto;
    overflow: visible;
    filter: saturate(1.02);
    animation: vmvFloat 5.5s ease-in-out infinite;
}

.about-vmv-card:nth-child(2) .about-vmv-visual svg {
    animation-delay: -.9s;
}

.about-vmv-card:nth-child(3) .about-vmv-visual svg {
    animation-delay: -1.8s;
}

.about-vmv-orbit {
    position: absolute;
    width: min(80%, 390px);
    aspect-ratio: 1;
    border: 1px dashed rgba(0, 83, 83, .2);
    border-radius: 50%;
    transform: rotateX(68deg) rotateZ(-12deg) translateZ(-20px);
    animation: vmvOrbit 16s linear infinite;
}

.about-vmv-card-dark .about-vmv-orbit {
    border-color: rgba(237, 240, 218, .22);
}

.about-vmv-orbit::after {
    content: "";
    position: absolute;
    top: 8%;
    left: 18%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--teal);
    box-shadow: 0 0 20px rgba(0, 122, 115, .8);
}

.about-vmv-card-dark .about-vmv-orbit::after {
    background: var(--beige);
    box-shadow: 0 0 20px rgba(237, 240, 218, .7);
}

@keyframes vmvFloat {
    0%, 100% { transform: translate3d(0, 0, 0) rotateY(-1.5deg); }
    50% { transform: translate3d(0, -13px, 18px) rotateY(1.5deg); }
}

@keyframes vmvOrbit {
    to { transform: rotateX(68deg) rotateZ(348deg) translateZ(-20px); }
}

@keyframes vmvPanelIn {
    from {
        opacity: 0;
        transform: translate3d(0, 28px, -70px) rotateX(4deg) scale(.975);
    }
    to {
        opacity: 1;
        transform: translateZ(0) rotateX(0) scale(1);
    }
}

@media (min-width: 761px) and (max-height: 850px) {
    .about-vmv {
        padding: 34px 0;
    }

    .about-vmv-head {
        margin-bottom: 22px;
    }

    .about-vmv-head h2 {
        font-size: clamp(2rem, 3.4vw, 3.35rem);
    }

    .about-vmv-head > p:last-child {
        margin-top: 10px;
        font-size: .88rem;
    }

    .about-vmv-tabs {
        margin-bottom: 18px;
    }

    .about-vmv-card {
        min-height: 350px;
        padding-top: 26px;
        padding-bottom: 26px;
    }

    .about-vmv-visual {
        min-height: 250px;
    }

    .about-vmv-visual svg {
        width: min(100%, 420px);
    }
}

.why-game {
    position: relative;
    z-index: 6;
    color: #ffffff;
    background: var(--teal-dark);
}

.why-game-track {
    position: relative;
    height: auto;
}

.why-game-stage {
    position: relative;
    min-height: 100svh;
    padding: clamp(64px, 7vw, 100px) 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    background:
        radial-gradient(circle at 78% 45%, rgba(0, 139, 129, .22), transparent 30%),
        linear-gradient(135deg, #002f2f 0%, #004c49 52%, #002828 100%);
    perspective: 1600px;
}

.why-game-grid {
    position: absolute;
    inset: 0;
    opacity: .16;
    background-image:
        linear-gradient(rgba(237, 240, 218, .16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(237, 240, 218, .16) 1px, transparent 1px);
    background-size: 48px 48px;
    transform: perspective(700px) rotateX(65deg) scale(1.8) translateY(22%);
    transform-origin: center bottom;
    mask-image: linear-gradient(transparent, #000 38%, #000);
    -webkit-mask-image: linear-gradient(transparent, #000 38%, #000);
}

.why-game-glow {
    position: absolute;
    right: 8%;
    bottom: -28%;
    width: 520px;
    aspect-ratio: 1;
    border: 1px solid rgba(237, 240, 218, .12);
    border-radius: 50%;
    box-shadow:
        0 0 0 70px rgba(237, 240, 218, .025),
        0 0 0 140px rgba(237, 240, 218, .018);
}

.why-game-shell {
    position: relative;
    z-index: 2;
    width: 100%;
}

.why-game-head {
    margin-bottom: clamp(22px, 3vh, 34px);
    display: flex;
    justify-content: space-between;
    gap: 40px;
    align-items: end;
}

.why-game-kicker {
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(237, 240, 218, .68);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.why-game-kicker span {
    width: 28px;
    height: 1px;
    background: var(--beige);
}

.why-game-head h2 {
    margin: 0;
    font-size: clamp(2.05rem, 3.6vw, 4rem);
    line-height: 1;
    letter-spacing: -.055em;
}

.why-game-head h2 em {
    color: var(--beige);
    font-style: normal;
}

.why-game-hud {
    min-width: min(490px, 48vw);
    padding: 12px 16px;
    border: 1px solid rgba(237, 240, 218, .16);
    border-radius: 14px;
    display: grid;
    grid-template-columns: 1.35fr .7fr .75fr .85fr;
    gap: 0;
    background: rgba(0, 28, 28, .56);
    box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 12px 35px rgba(0, 20, 20, .22);
    backdrop-filter: blur(12px);
}

.why-game-hud > div {
    padding: 0 12px;
    border-right: 1px solid rgba(237, 240, 218, .1);
}

.why-game-hud > div:last-child {
    border-right: 0;
}

.why-game-hud span {
    display: block;
    margin-bottom: 3px;
    color: rgba(237, 240, 218, .38);
    font-size: .48rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.why-game-hud strong {
    color: var(--beige);
    font-family: var(--font-head);
    font-size: .66rem;
    letter-spacing: .04em;
    white-space: nowrap;
}

.why-game-hud strong b {
    color: #76d4b7;
    font-size: .82rem;
}

.why-game-lives strong {
    color: #76d4b7;
    letter-spacing: .14em;
}

.why-game-status {
    height: 4px;
    margin-bottom: 18px;
    overflow: hidden;
    background: rgba(237, 240, 218, .1);
}

.why-game-status i {
    width: 33.333%;
    height: 100%;
    display: block;
    background: linear-gradient(90deg, #edf0da, #70c8ae);
    box-shadow: 0 0 12px rgba(237, 240, 218, .5);
    transition: width .55s cubic-bezier(.2, .8, .2, 1);
}

.why-game-board {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: clamp(18px, 2.5vw, 36px);
    align-items: stretch;
}

.why-game-levels {
    position: relative;
    padding: 12px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.why-game-levels::before {
    content: "";
    position: absolute;
    left: 17px;
    top: 17%;
    bottom: 17%;
    width: 1px;
    background: rgba(237, 240, 218, .16);
}

.why-game-levels button {
    position: relative;
    z-index: 2;
    padding: 0;
    border: 0;
    display: grid;
    grid-template-columns: 34px 1fr;
    grid-template-rows: auto auto;
    gap: 1px 8px;
    color: rgba(237, 240, 218, .38);
    text-align: left;
    background: transparent;
    cursor: pointer;
}

.why-game-levels button:disabled {
    cursor: not-allowed;
    opacity: .48;
}

.why-game-levels button span {
    width: 34px;
    height: 34px;
    grid-row: 1 / 3;
    border: 1px solid rgba(237, 240, 218, .18);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #003d3d;
    font-size: .58rem;
    font-weight: 800;
    transition: all .35s ease;
}

.why-game-levels button i {
    align-self: end;
    color: rgba(237, 240, 218, .3);
    font-size: .46rem;
    font-style: normal;
}

.why-game-levels button b {
    align-self: center;
    font-size: .61rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.why-game-levels button.is-active {
    color: var(--beige);
}

.why-game-levels button.is-complete span {
    color: var(--teal-dark);
    background: #75cfb3;
    border-color: #75cfb3;
}

.why-game-levels button.is-complete i {
    color: #75cfb3;
}

.why-game-levels button.is-active span {
    color: var(--teal-dark);
    background: var(--beige);
    border-color: var(--beige);
    box-shadow: 0 0 0 7px rgba(237, 240, 218, .07), 0 0 25px rgba(237, 240, 218, .28);
    transform: scale(1.08);
}

.why-game-cards {
    position: relative;
    height: min(53vh, 520px);
    min-height: 390px;
    transform-style: preserve-3d;
}

.why-game-card {
    position: absolute;
    inset: 0;
    padding: clamp(28px, 4vw, 56px);
    border: 1px solid rgba(237, 240, 218, .14);
    border-radius: clamp(24px, 3vw, 38px);
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .86fr);
    gap: clamp(24px, 4vw, 64px);
    align-items: center;
    background:
        radial-gradient(circle at 85% 10%, rgba(237, 240, 218, .11), transparent 28%),
        rgba(0, 42, 42, .72);
    box-shadow: 0 30px 80px rgba(0, 20, 20, .3), inset 0 1px rgba(255, 255, 255, .07);
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 80px, -180px) rotateX(11deg) scale(.88);
    transform-origin: center bottom;
    transition:
        opacity .5s ease,
        visibility .5s,
        transform .75s cubic-bezier(.2, .8, .2, 1);
    pointer-events: none;
}

.why-game-card::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .12;
    background-image: radial-gradient(circle, var(--beige) 1px, transparent 1px);
    background-size: 27px 27px;
    mask-image: linear-gradient(90deg, transparent 45%, #000);
    -webkit-mask-image: linear-gradient(90deg, transparent 45%, #000);
    pointer-events: none;
}

.why-game-card.is-before {
    transform: translate3d(0, -65px, -160px) rotateX(-10deg) scale(.9);
}

.why-game-card.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateZ(0) rotateX(0) scale(1);
    pointer-events: auto;
}

.why-game-copy,
.why-game-visual {
    position: relative;
    z-index: 2;
}

.why-game-level {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--beige);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.why-game-level i {
    padding: 5px 9px;
    border: 1px solid rgba(237, 240, 218, .17);
    border-radius: 999px;
    color: #99d4c1;
    background: rgba(255, 255, 255, .05);
    font-size: .52rem;
    font-style: normal;
    letter-spacing: .06em;
}

.why-game-copy h3 {
    max-width: 670px;
    margin: clamp(18px, 2.5vh, 28px) 0 0;
    font-size: clamp(1.65rem, 2.6vw, 3rem);
    line-height: 1.07;
    letter-spacing: -.045em;
}

.why-game-copy > p {
    max-width: 630px;
    margin: 16px 0 0;
    color: rgba(237, 240, 218, .62);
    font-size: clamp(.78rem, 1vw, .94rem);
    line-height: 1.7;
}

.why-game-copy ul {
    margin: 18px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 8px 14px;
    list-style: none;
}

.why-game-copy li {
    color: rgba(237, 240, 218, .78);
    font-size: .66rem;
    font-weight: 600;
    white-space: nowrap;
}

.why-game-copy li span {
    margin-right: 4px;
    color: #78d0b5;
}

.why-game-action {
    margin-top: 24px;
    padding: 13px 16px 13px 20px;
    border: 1px solid rgba(237, 240, 218, .25);
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 26px;
    color: var(--teal-dark);
    background: var(--beige);
    box-shadow: 0 12px 28px rgba(0, 20, 20, .24);
    font-family: var(--font-head);
    font-size: .7rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.why-game-action span {
    padding: 5px 8px;
    border-radius: 7px;
    color: var(--beige);
    background: var(--teal);
    font-size: .54rem;
    letter-spacing: .04em;
}

.why-game-action:hover {
    transform: translateY(-3px) scale(1.015);
    box-shadow: 0 17px 35px rgba(0, 20, 20, .3), 0 0 22px rgba(117, 207, 179, .13);
}

.why-game-action:active {
    transform: translateY(1px) scale(.985);
}

.why-game-visual {
    min-height: 300px;
    display: grid;
    place-items: center;
    transform-style: preserve-3d;
}

.why-game-visual svg {
    position: relative;
    z-index: 2;
    width: min(100%, 470px);
    height: auto;
    overflow: visible;
    animation: whyGameFloat 5s ease-in-out infinite;
}

.why-game-ring {
    position: absolute;
    width: min(82%, 340px);
    aspect-ratio: 1;
    border: 1px dashed rgba(237, 240, 218, .2);
    border-radius: 50%;
    transform: rotateX(67deg) rotateZ(-12deg);
    animation: whyGameRing 15s linear infinite;
}

.why-game-ring::after {
    content: "";
    position: absolute;
    top: 7%;
    left: 23%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--beige);
    box-shadow: 0 0 20px rgba(237, 240, 218, .7);
}

.why-game-xp {
    position: absolute;
    z-index: 3;
    right: 2%;
    bottom: 5%;
    padding: 8px 12px;
    border: 1px solid rgba(237, 240, 218, .18);
    border-radius: 10px;
    color: var(--beige);
    background: rgba(0, 45, 45, .85);
    box-shadow: 0 10px 25px rgba(0, 20, 20, .25);
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    animation: whyGamePulse 2.4s ease-in-out infinite;
}

.why-game-scroll {
    margin: 13px 0 0 110px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: rgba(237, 240, 218, .36);
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.why-game-scroll span {
    width: 32px;
    height: 1px;
    background: rgba(237, 240, 218, .35);
    animation: whyScrollLine 1.8s ease-in-out infinite;
}

.why-game-toast {
    position: absolute;
    z-index: 20;
    left: 50%;
    top: 50%;
    min-width: 220px;
    padding: 18px 24px;
    border: 1px solid rgba(237, 240, 218, .35);
    border-radius: 18px;
    color: var(--teal-dark);
    text-align: center;
    background: var(--beige);
    box-shadow: 0 25px 80px rgba(0, 20, 20, .45), 0 0 50px rgba(117, 207, 179, .18);
    opacity: 0;
    transform: translate(-50%, -50%) scale(.65) rotateX(20deg);
    visibility: hidden;
    pointer-events: none;
}

.why-game-toast strong,
.why-game-toast span {
    display: block;
}

.why-game-toast strong {
    font-family: var(--font-head);
    font-size: 1.05rem;
}

.why-game-toast span {
    margin-top: 4px;
    color: var(--teal);
    font-size: .65rem;
    font-weight: 700;
}

.why-game-toast.is-visible {
    animation: whyGameToast 1.05s cubic-bezier(.2, .8, .2, 1) both;
    visibility: visible;
}

.why-game-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.why-game-particles i {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #75cfb3;
    box-shadow: 0 0 14px #75cfb3;
    opacity: .25;
    animation: whyParticle 8s linear infinite;
}

.why-game-particles i:nth-child(1) { left: 8%; top: 72%; animation-delay: -1s; }
.why-game-particles i:nth-child(2) { left: 24%; top: 86%; animation-delay: -5s; }
.why-game-particles i:nth-child(3) { left: 47%; top: 78%; animation-delay: -3s; }
.why-game-particles i:nth-child(4) { left: 68%; top: 88%; animation-delay: -7s; }
.why-game-particles i:nth-child(5) { left: 82%; top: 72%; animation-delay: -2s; }
.why-game-particles i:nth-child(6) { left: 94%; top: 91%; animation-delay: -4s; }

.why-game-stage.is-level-complete .why-game-card.is-active {
    animation: whyCardWin .75s ease both;
}

@keyframes whyGameFloat {
    0%, 100% { transform: translate3d(0, 0, 24px) rotateY(-2deg); }
    50% { transform: translate3d(0, -12px, 42px) rotateY(2deg); }
}

@keyframes whyGameRing {
    to { transform: rotateX(67deg) rotateZ(348deg); }
}

@keyframes whyGamePulse {
    0%, 100% { transform: translateY(0); box-shadow: 0 10px 25px rgba(0, 20, 20, .25); }
    50% { transform: translateY(-5px); box-shadow: 0 15px 32px rgba(98, 203, 172, .16); }
}

@keyframes whyScrollLine {
    0%, 100% { transform: scaleX(.35); transform-origin: left; }
    50% { transform: scaleX(1); transform-origin: left; }
}

@keyframes whyGameToast {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.65) rotateX(20deg); }
    25%, 72% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotateX(0); }
    100% { opacity: 0; transform: translate(-50%, -65%) scale(.92) rotateX(-8deg); }
}

@keyframes whyCardWin {
    0%, 100% { filter: brightness(1); }
    45% { filter: brightness(1.28); box-shadow: 0 30px 100px rgba(117, 207, 179, .24); }
}

@keyframes whyParticle {
    0% { transform: translateY(80px) scale(.5); opacity: 0; }
    20% { opacity: .4; }
    100% { transform: translateY(-650px) scale(1.5); opacity: 0; }
}

.why-choice {
    position: relative;
    z-index: 6;
    color: #ffffff;
    background: var(--teal-dark);
}

.why-choice .why-game-stage {
    min-height: auto;
    padding: clamp(34px, 4vw, 52px) 0;
    background:
        radial-gradient(circle at 50% 0%, rgba(25, 139, 128, .24), transparent 36%),
        linear-gradient(145deg, #002f2f, #004b48 56%, #002b2b);
}

.why-choice .why-game-head {
    margin: 0 auto clamp(20px, 2.5vw, 30px);
    display: block;
    text-align: center;
}

.why-choice .why-game-kicker {
    justify-content: center;
}

.why-choice .why-game-head h2 {
    font-size: clamp(2rem, 3.4vw, 3.35rem);
    line-height: 1.06;
}

.why-choice .why-game-hud,
.why-choice .why-game-status,
.why-choice .why-game-levels,
.why-choice .why-game-scroll,
.why-choice .why-game-toast,
.why-choice .why-game-copy ul,
.why-choice .why-game-action,
.why-choice .why-game-xp {
    display: none;
}

.why-choice .why-game-board {
    display: block;
}

.why-choice .why-game-cards {
    height: auto;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2.3vw, 32px);
    perspective: 1400px;
}

.why-choice .why-game-card,
.why-choice .why-game-card.is-active,
.why-choice .why-game-card.is-before {
    position: relative;
    inset: auto;
    min-height: 325px;
    padding: clamp(18px, 1.8vw, 24px);
    border-color: rgba(237, 240, 218, .16);
    display: flex;
    flex-direction: column;
    gap: 22px;
    opacity: 1;
    visibility: visible;
    transform: translateZ(0) rotateX(0);
    pointer-events: auto;
    background:
        radial-gradient(circle at 50% 30%, rgba(103, 195, 169, .12), transparent 35%),
        rgba(0, 40, 40, .66);
    transition: transform .5s cubic-bezier(.2, .8, .2, 1), border-color .4s ease, box-shadow .4s ease;
}

.why-choice .why-game-card:nth-child(2) {
    transform: translateY(-18px);
    background:
        radial-gradient(circle at 50% 25%, rgba(237, 240, 218, .13), transparent 38%),
        linear-gradient(155deg, rgba(0, 93, 87, .92), rgba(0, 48, 48, .9));
}

.why-choice .why-game-card:hover {
    z-index: 3;
    border-color: rgba(237, 240, 218, .34);
    box-shadow: 0 34px 80px rgba(0, 20, 20, .38), 0 0 35px rgba(91, 190, 162, .1);
}

.why-choice .why-game-card:nth-child(2):hover {
    transform: translateY(-18px);
}

.why-choice .why-game-copy {
    order: 2;
    text-align: center;
}

.why-choice .why-game-level {
    justify-content: center;
    color: #86cdb8;
}

.why-choice .why-game-copy h3 {
    margin-top: 9px;
    font-size: clamp(1.35rem, 1.8vw, 1.9rem);
}

.why-choice .why-game-copy > p {
    max-width: 330px;
    margin: 7px auto 0;
    font-size: .75rem;
    line-height: 1.65;
}

.why-choice .why-game-visual {
    --model-turn: 0deg;
    --model-tilt: 0deg;
    --model-depth: 0px;
    order: 1;
    min-height: 145px;
    isolation: isolate;
    transform: perspective(1000px) rotateY(var(--model-turn)) rotateX(var(--model-tilt)) translateZ(var(--model-depth));
    transform-style: preserve-3d;
    transition: transform .12s linear;
    will-change: transform;
}

.why-choice .why-game-visual::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 14%;
    right: 14%;
    bottom: 5%;
    height: 18%;
    border: 1px solid rgba(237, 240, 218, .18);
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(93, 193, 164, .2), rgba(0, 25, 25, .08) 65%, transparent 70%);
    box-shadow: 0 18px 35px rgba(0, 15, 15, .32);
    transform: rotateX(66deg) translateZ(-26px);
}

.why-choice .why-game-visual::after {
    content: "";
    position: absolute;
    z-index: -2;
    width: 70%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(99, 202, 172, .12), transparent 66%);
    transform: translateZ(-45px);
}

.why-choice .why-game-visual svg {
    width: min(100%, 235px);
}

.why-choice .why-game-ring {
    width: min(75%, 250px);
}

.why-choice .why-game-card::after {
    mask-image: linear-gradient(transparent, #000);
    -webkit-mask-image: linear-gradient(transparent, #000);
}

@media (min-width: 761px) and (max-width: 900px) {
    .why-choice .why-game-cards {
        grid-template-columns: 1fr;
    }

    .why-choice .why-game-card,
    .why-choice .why-game-card.is-active,
    .why-choice .why-game-card.is-before,
    .why-choice .why-game-card:nth-child(2) {
        min-height: 300px;
        display: grid;
        grid-template-columns: minmax(260px, .8fr) 1fr;
        transform: none;
    }

    .why-choice .why-game-visual {
        min-height: 200px;
    }
}

.about-cta {
    position: relative;
    z-index: 5;
    padding: clamp(88px, 12vw, 160px) 0;
    overflow: hidden;
    color: var(--teal-dark);
    text-align: center;
    background:
        linear-gradient(rgba(248, 249, 235, .2), rgba(237, 240, 218, .28)),
        url("../images/about/about-cta-background.png") center / cover no-repeat;
}

.about-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.12;
    background-image: radial-gradient(circle, var(--teal) 1px, transparent 1.2px);
    background-size: 30px 30px;
    mask-image: radial-gradient(circle, #000, transparent 70%);
    -webkit-mask-image: radial-gradient(circle, #000, transparent 70%);
}

.about-cta-inner {
    position: relative;
}

.about-cta p {
    margin: 0 0 16px;
    color: var(--teal);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.about-cta h2 {
    max-width: 880px;
    margin: 0 auto;
    font-size: clamp(2.2rem, 5.3vw, 5.4rem);
    line-height: 1.02;
    letter-spacing: -0.055em;
}

.about-cta h2 em {
    color: var(--teal);
    font-style: normal;
}

.about-cta a {
    margin-top: 34px;
    padding: 14px 22px;
    border: 1px solid rgba(0, 61, 61, 0.22);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 22px;
    color: var(--beige);
    background: var(--teal-dark);
    font-size: 0.78rem;
    font-weight: 700;
    transition: background 0.25s ease, transform 0.25s ease;
}

.about-cta a:hover {
    color: #ffffff;
    background: var(--teal);
    transform: translateY(-3px);
}

.about-footer {
    margin-top: 0;
}

@media (max-width: 1020px) {
    .about-story-grid {
        grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
        gap: 24px;
    }

    .about-float-card-cloud {
        right: -2%;
    }

    .about-vmv-card {
        min-height: 390px;
        grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr);
        gap: 20px;
    }

    .why-game-card {
        grid-template-columns: minmax(0, 1fr) minmax(290px, .78fr);
        gap: 24px;
    }

    .why-game-copy ul {
        grid-template-columns: 1fr;
    }

    .why-game-visual {
        min-height: 250px;
    }
}

@media (max-width: 760px) {
    .about-story-track {
        height: 400vh;
    }

    .about-story-sticky {
        min-height: 680px;
        align-items: stretch;
    }

    .about-story-grid {
        height: 100%;
        padding-top: calc(var(--header-height) + 14px);
        padding-bottom: 36px;
        grid-template-columns: 1fr;
        grid-template-rows: minmax(245px, 42vh) 1fr;
        gap: 4px;
    }

    .about-story-visual {
        min-height: 0;
    }

    .about-story-image-wrap {
        width: min(92%, 430px);
    }

    .about-story-halo {
        width: 55%;
    }

    .about-story-orbit {
        width: 50%;
    }

    .about-story-orbit-two {
        width: 68%;
    }

    .about-float-card {
        min-width: 142px;
        padding: 8px 10px 8px 8px;
        gap: 8px;
        font-size: 0.55rem;
    }

    .about-float-card strong {
        font-size: 0.66rem;
    }

    .about-float-icon {
        width: 28px;
        height: 28px;
    }

    .about-float-icon svg {
        width: 16px;
        height: 16px;
    }

    .about-float-card-apps {
        top: 24%;
        left: 1%;
    }

    .about-float-card-cloud {
        top: 15%;
        right: 1%;
    }

    .about-float-card-growth {
        right: 2%;
        bottom: 7%;
    }

    .about-story-copy {
        align-self: start;
        padding-right: 0;
    }

    .about-story-eyebrow {
        margin-bottom: 8px;
        font-size: 0.56rem;
    }

    .about-story-title {
        max-width: 520px;
        font-size: clamp(1.75rem, 7.8vw, 2.65rem);
    }

    .about-story-title em {
        display: inline;
    }

    .about-story-steps {
        min-height: 128px;
        margin-top: 16px;
    }

    .about-story-step {
        grid-template-columns: 29px 1fr;
        gap: 8px;
    }

    .about-story-step h2 {
        margin-bottom: 4px;
        font-size: 0.93rem;
    }

    .about-story-step p {
        font-size: 0.72rem;
        line-height: 1.55;
    }

    .about-story-footer {
        gap: 9px;
    }

    .about-story-link {
        font-size: 0.6rem;
    }

    .about-scroll-note {
        display: none;
    }

    .about-vmv-tabs {
        width: 100%;
        padding: 5px;
        gap: 3px;
    }

    .about-vmv-tab {
        min-width: 0;
        padding: 11px 8px;
        gap: 6px;
        font-size: .7rem;
    }

    .about-vmv-card {
        min-height: auto;
        padding: 36px 24px 24px;
        grid-template-columns: 1fr;
        gap: 14px;
        transform: none !important;
    }

    .about-vmv-copy {
        transform: none;
    }

    .about-vmv-number {
        margin-bottom: 22px;
    }

    .about-vmv-copy h3 {
        font-size: clamp(1.8rem, 8vw, 2.65rem);
    }

    .about-vmv-visual {
        min-height: 260px;
        transform: none;
    }

    .about-vmv-visual svg {
        width: min(100%, 430px);
    }

    .why-game-track {
        height: auto;
    }

    .why-game-stage {
        position: relative;
        height: auto;
        min-height: 0;
        padding: 76px 0;
        overflow: hidden;
    }

    .why-game-head {
        margin-bottom: 28px;
        display: block;
    }

    .why-game-head h2 {
        font-size: clamp(2.15rem, 10vw, 3.4rem);
    }

    .why-game-hud {
        width: 100%;
        min-width: 0;
        margin-top: 22px;
        grid-template-columns: 1fr 1fr;
        gap: 12px 0;
    }

    .why-game-hud > div:nth-child(2) {
        border-right: 0;
    }

    .why-game-status {
        width: 100%;
        margin-top: 0;
    }

    .why-game-board {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .why-game-levels {
        padding: 0;
        flex-direction: row;
        justify-content: space-between;
    }

    .why-game-levels::before {
        top: 17px;
        right: 16%;
        bottom: auto;
        left: 16%;
        width: auto;
        height: 1px;
    }

    .why-game-levels button {
        grid-template-columns: 34px;
        grid-template-rows: 34px auto;
        justify-items: center;
        gap: 7px;
        text-align: center;
    }

    .why-game-levels button span {
        grid-row: auto;
    }

    .why-game-cards {
        height: auto;
        min-height: 0;
    }

    .why-game-card,
    .why-game-card.is-before {
        display: none;
    }

    .why-game-card.is-active {
        position: relative;
        inset: auto;
        min-height: 0;
        padding: 30px 22px 22px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 18px;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
    }

    .why-game-copy h3 {
        font-size: clamp(1.65rem, 7.7vw, 2.45rem);
    }

    .why-game-copy ul {
        grid-template-columns: 1fr;
    }

    .why-game-action {
        width: 100%;
        justify-content: space-between;
    }

    .why-game-visual {
        min-height: 235px;
    }

    .why-game-visual svg {
        width: min(100%, 390px);
    }

    .why-game-scroll {
        display: none;
    }

    .why-choice .why-game-stage {
        padding: 46px 0;
    }

    .why-choice .why-game-head {
        margin-bottom: 26px;
    }

    .why-choice .why-game-head h2 {
        font-size: clamp(1.9rem, 8.5vw, 2.65rem);
    }

    .why-choice .why-game-cards {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .why-choice .why-game-card,
    .why-choice .why-game-card.is-active,
    .why-choice .why-game-card.is-before,
    .why-choice .why-game-card:nth-child(2) {
        min-height: 320px;
        padding: 18px;
        display: flex;
        transform: none;
    }

    .why-choice .why-game-card:hover,
    .why-choice .why-game-card:nth-child(2):hover {
        transform: none;
    }

    .why-choice .why-game-visual {
        min-height: 150px;
    }
}

@media (max-width: 430px) {
    .about-story-grid {
        grid-template-rows: minmax(220px, 38vh) 1fr;
    }

    .about-float-card-cloud {
        display: none;
    }

    .about-story-title {
        font-size: clamp(1.55rem, 7.7vw, 2.05rem);
    }

    .about-story-steps {
        min-height: 136px;
    }

    .about-story-link {
        margin-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .about-story-image-wrap::after,
    .about-story-scan,
    .about-story-orbit,
    .about-float-card,
    .about-scroll-note span {
        animation: none !important;
    }

    .about-story-step {
        transition: none;
    }

    .about-vmv-card {
        opacity: 1;
        transform: none !important;
        transition: none;
        animation: none !important;
    }

    .about-vmv-visual svg,
    .about-vmv-orbit {
        animation: none !important;
    }

    .why-game-card {
        transition: none !important;
    }

    .why-game-visual svg,
    .why-game-ring,
    .why-game-xp,
    .why-game-scroll span {
        animation: none !important;
    }
}

/* Scroll-driven 3D Vision, Mission & Values */
.about-vmv {
    overflow: clip;
    padding-top: clamp(72px, 8vw, 118px);
    padding-bottom: clamp(90px, 12vw, 170px);
    background:
        radial-gradient(circle at 88% 8%, rgba(0, 122, 115, .13), transparent 25%),
        radial-gradient(circle at 5% 72%, rgba(196, 214, 173, .36), transparent 24%),
        linear-gradient(rgba(0, 83, 83, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 83, 83, .04) 1px, transparent 1px),
        #f8f8ee;
    background-size: auto, auto, 44px 44px, 44px 44px, auto;
}

.about-vmv-head {
    margin-bottom: clamp(38px, 6vw, 78px);
}

.about-vmv-head h2 {
    text-wrap: balance;
}

.about-vmv-tabs {
    position: sticky;
    top: calc(var(--header-height, 72px) + 14px);
    z-index: 20;
    margin-bottom: clamp(34px, 5vw, 64px);
    box-shadow: 0 18px 55px rgba(0, 61, 61, .13);
}

.about-vmv-tab {
    overflow: hidden;
}

.about-vmv-tab::after {
    content: "";
    position: absolute;
    right: 18px;
    bottom: 7px;
    left: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    opacity: 0;
    transform: scaleX(.2);
    transition: opacity .3s ease, transform .3s ease;
}

.about-vmv-tab.is-active::after {
    opacity: .45;
    transform: scaleX(1);
}

.about-vmv-list {
    padding-bottom: 8vh;
    perspective: 1800px;
    transform-style: preserve-3d;
}

.about-vmv-card {
    --vmv-scroll: 0;
    --vmv-abs: 0;
    --vmv-tilt: -1;
    position: sticky;
    top: calc(var(--header-height, 72px) + 105px);
    min-height: min(620px, 66vh);
    margin-bottom: 38vh;
    isolation: isolate;
    animation: none;
    transform:
        perspective(1600px)
        translate3d(0, calc(var(--vmv-scroll) * -18px), calc(var(--vmv-abs) * -90px))
        rotateX(calc(var(--vmv-scroll) * 5deg))
        rotateY(calc(var(--vmv-scroll) * var(--vmv-tilt) * 3deg))
        scale(calc(1 - var(--vmv-abs) * .045));
    transition: border-color .35s ease, box-shadow .35s ease, filter .35s ease;
    will-change: transform;
}

.about-vmv-card:nth-child(2) {
    --vmv-tilt: 1;
}

.about-vmv-card:nth-child(3) {
    --vmv-tilt: -1;
    margin-bottom: 0;
}

.about-vmv-card::after {
    content: attr(data-vmv-panel);
    position: absolute;
    right: clamp(20px, 4vw, 58px);
    bottom: -0.2em;
    z-index: 0;
    color: rgba(0, 83, 83, .035);
    font-family: var(--font-head);
    font-size: clamp(4.5rem, 11vw, 10rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.08em;
    text-transform: uppercase;
    pointer-events: none;
}

.about-vmv-card-dark::after {
    color: rgba(255, 255, 255, .035);
}

.about-vmv-card.is-active {
    border-color: rgba(0, 122, 115, .28);
    box-shadow: 0 42px 110px rgba(0, 61, 61, .19);
    filter: saturate(1.04);
}

.about-vmv-card-dark.is-active {
    border-color: rgba(237, 240, 218, .28);
    box-shadow: 0 45px 120px rgba(0, 40, 40, .34);
}

.about-vmv-copy,
.about-vmv-visual {
    transition: transform .2s linear;
}

.about-vmv-card .about-vmv-copy {
    transform: translateZ(54px) translateY(calc(var(--vmv-scroll) * 8px));
}

.about-vmv-card .about-vmv-visual {
    transform: translateZ(92px) translateY(calc(var(--vmv-scroll) * -12px));
}

@media (max-width: 760px) {
    .about-vmv {
        padding: 68px 0 88px;
    }

    .about-vmv-head {
        margin-bottom: 32px;
        text-align: left;
    }

    .about-vmv-head h2 {
        font-size: clamp(2.3rem, 11.5vw, 3.5rem);
    }

    .about-vmv-tabs {
        top: calc(var(--header-height, 66px) + 8px);
        margin-bottom: 26px;
        border-radius: 20px;
    }

    .about-vmv-tab {
        padding: 11px 5px;
        flex-direction: column;
        gap: 2px;
    }

    .about-vmv-tab::after {
        right: 24%;
        left: 24%;
        bottom: 5px;
    }

    .about-vmv-list {
        padding-bottom: 0;
    }

    .about-vmv-card,
    .about-vmv-card:nth-child(3) {
        position: relative;
        top: auto;
        min-height: 0;
        margin-bottom: 22px;
        border-radius: 28px;
        transform: none;
        will-change: auto;
    }

    .about-vmv-card:nth-child(3) {
        margin-bottom: 0;
    }

    .about-vmv-card .about-vmv-copy,
    .about-vmv-card .about-vmv-visual {
        transform: none;
    }

    .about-vmv-visual {
        min-height: 225px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .about-vmv-card,
    .about-vmv-card .about-vmv-copy,
    .about-vmv-card .about-vmv-visual {
        transform: none !important;
        transition: none !important;
    }
}

/* Modern VMV art direction */
.about-vmv::before {
    content: "GUIDE";
    position: absolute;
    top: 1.5%;
    left: 50%;
    color: rgba(0, 83, 83, .026);
    font-family: var(--font-head);
    font-size: clamp(8rem, 24vw, 23rem);
    font-weight: 800;
    line-height: .8;
    letter-spacing: -.09em;
    transform: translateX(-50%);
    pointer-events: none;
}

.about-vmv .container {
    position: relative;
    z-index: 2;
}

.about-vmv-head {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(260px, .55fr);
    gap: clamp(35px, 8vw, 120px);
    align-items: end;
    text-align: left;
}

.about-vmv-title > p {
    margin: 0 0 16px;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--teal);
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.about-vmv-title > p span {
    width: 34px;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--teal), #73c9ad);
}

.about-vmv-title h2 {
    max-width: 850px;
}

.about-vmv-title h2 em {
    position: relative;
    display: inline-block;
    background: linear-gradient(105deg, #007a73 12%, #34a884 62%, #005353);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.about-vmv-title h2 em::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -.08em;
    left: 0;
    height: 7px;
    border-radius: 100%;
    background: url("data:image/svg+xml,%3Csvg width='320' height='8' viewBox='0 0 320 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 6C83 1 231 1 318 5' fill='none' stroke='%2334a884' stroke-width='3' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.about-vmv-intro {
    padding: 0 0 8px clamp(20px, 3vw, 44px);
    border-left: 1px solid rgba(0, 83, 83, .17);
}

.about-vmv-intro p {
    margin: 0;
    color: #496f6c;
    font-size: clamp(.92rem, 1.2vw, 1.06rem);
    line-height: 1.75;
}

.about-vmv-intro > span {
    margin-top: 23px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--teal);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.about-vmv-intro > span i {
    position: relative;
    width: 25px;
    height: 38px;
    border: 1px solid rgba(0, 83, 83, .3);
    border-radius: 99px;
}

.about-vmv-intro > span i::after {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    width: 3px;
    height: 7px;
    border-radius: 99px;
    background: var(--teal);
    transform: translateX(-50%);
    animation: vmvScrollDot 1.8s ease-in-out infinite;
}

.about-vmv-tabs {
    border-color: rgba(255, 255, 255, .72);
    background: rgba(248, 250, 241, .72);
    box-shadow:
        0 18px 55px rgba(0, 61, 61, .13),
        inset 0 1px 0 rgba(255, 255, 255, .9);
}

.about-vmv-tab.is-active {
    background:
        radial-gradient(circle at 80% 20%, rgba(100, 221, 180, .28), transparent 38%),
        linear-gradient(135deg, #007a73, #003d3d);
}

.about-vmv-card {
    border-color: rgba(255, 255, 255, .78);
    background:
        radial-gradient(circle at 92% 8%, rgba(97, 210, 173, .2), transparent 32%),
        linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(239, 246, 229, .94));
    box-shadow:
        0 35px 95px rgba(0, 61, 61, .14),
        inset 0 1px 0 #fff;
}

.about-vmv-card::before {
    opacity: .62;
    background:
        linear-gradient(90deg, rgba(0, 122, 115, .09) 1px, transparent 1px),
        linear-gradient(rgba(0, 122, 115, .09) 1px, transparent 1px);
    background-size: 38px 38px;
    mask-image: linear-gradient(90deg, transparent 36%, #000);
    -webkit-mask-image: linear-gradient(90deg, transparent 36%, #000);
}

.about-vmv-card-dark {
    background:
        radial-gradient(circle at 83% 17%, rgba(90, 220, 174, .24), transparent 28%),
        radial-gradient(circle at 8% 95%, rgba(237, 240, 218, .08), transparent 25%),
        linear-gradient(135deg, #003532, #00625b 58%, #002f2e);
}

.about-vmv-card-dark::before {
    background-image: radial-gradient(circle, rgba(237, 240, 218, .2) 1px, transparent 1.4px);
    background-size: 25px 25px;
}

.about-vmv-card:nth-child(3) {
    background:
        radial-gradient(circle at 80% 20%, rgba(237, 191, 96, .16), transparent 28%),
        radial-gradient(circle at 15% 90%, rgba(66, 182, 145, .15), transparent 26%),
        linear-gradient(145deg, #ffffff, #f2f1df);
}

.about-vmv-visual {
    border-radius: clamp(22px, 3vw, 38px);
    background:
        radial-gradient(circle at 50% 45%, rgba(255, 255, 255, .9), rgba(218, 236, 220, .48) 52%, transparent 72%);
}

.about-vmv-card-dark .about-vmv-visual {
    background: radial-gradient(circle, rgba(112, 214, 179, .16), transparent 68%);
}

.about-vmv-number {
    width: fit-content;
    padding: 8px 13px;
    border: 1px solid rgba(0, 83, 83, .14);
    border-radius: 999px;
    background: rgba(255, 255, 255, .55);
}

.about-vmv-card-dark .about-vmv-number {
    border-color: rgba(237, 240, 218, .2);
    background: rgba(255, 255, 255, .07);
}

.about-vmv-tags span {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65);
    backdrop-filter: blur(8px);
}

@keyframes vmvScrollDot {
    0%, 100% { opacity: .35; transform: translate(-50%, 0); }
    50% { opacity: 1; transform: translate(-50%, 12px); }
}

@media (max-width: 760px) {
    .about-vmv::before {
        top: 2%;
        font-size: 35vw;
    }

    .about-vmv-head {
        display: block;
    }

    .about-vmv-title > p {
        margin-bottom: 12px;
    }

    .about-vmv-intro {
        margin-top: 24px;
        padding: 0;
        border-left: 0;
    }

    .about-vmv-intro > span {
        display: none;
    }

    .about-vmv-card {
        padding: 32px 21px 20px;
    }

    .about-vmv-number {
        margin-bottom: 18px;
    }

    .about-vmv-copy > p {
        line-height: 1.68;
    }

    .about-vmv-visual {
        border-radius: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .about-vmv-intro > span i::after {
        animation: none;
    }
}

/* Immersive editorial guides section */
.guides {
    position: relative;
    z-index: 5;
    padding: clamp(90px, 10vw, 150px) 0;
    overflow: clip;
    color: #fff;
    background: #032f2f;
}

.guides-noise {
    position: absolute;
    inset: 0;
    opacity: .13;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
    pointer-events: none;
}

.guides-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(4px);
    pointer-events: none;
}

.guides-orb-one {
    top: 2%;
    right: -220px;
    width: 620px;
    height: 620px;
    background: radial-gradient(circle, rgba(47, 207, 161, .22), transparent 68%);
}

.guides-orb-two {
    bottom: 8%;
    left: -260px;
    width: 560px;
    height: 560px;
    background: radial-gradient(circle, rgba(237, 240, 218, .12), transparent 68%);
}

.guides-shell {
    position: relative;
    display: grid;
    grid-template-columns: minmax(300px, .7fr) minmax(520px, 1.3fr);
    gap: clamp(60px, 9vw, 150px);
    align-items: start;
}

.guides-sidebar {
    position: sticky;
    top: calc(var(--header-height, 72px) + 46px);
    min-height: calc(100vh - var(--header-height, 72px) - 90px);
    display: flex;
    flex-direction: column;
}

.guides-kicker {
    margin: 0 0 25px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #003828;
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.guides-kicker span {
    width: 36px;
    height: 2px;
    background: #77d8bc;
}

.guides-sidebar h2 {
    max-width: 560px;
    margin: 0;
    font-size: clamp(2.7rem, 5.1vw, 5.4rem);
    line-height: .97;
    letter-spacing: -.065em;
}

.guides-sidebar h2 em {
    color: #edf0da;
    font-style: normal;
}

.guides-intro {
    max-width: 430px;
    margin: 28px 0 0;
    color: rgba(232, 246, 238, .64);
    font-size: clamp(.9rem, 1.1vw, 1.03rem);
    line-height: 1.75;
}

.guides-nav {
    width: min(100%, 430px);
    margin-top: clamp(38px, 6vh, 70px);
    border-top: 1px solid rgba(255, 255, 255, .13);
}

.guides-nav-btn {
    position: relative;
    width: 100%;
    padding: 17px 2px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .13);
    display: grid;
    grid-template-columns: 38px 1fr 30px;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, .42);
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: color .35s ease, padding .35s ease;
}

.guides-nav-btn span {
    font-family: var(--font-head);
    font-size: .6rem;
    letter-spacing: .12em;
}

.guides-nav-btn b {
    font-family: var(--font-head);
    font-size: .84rem;
    font-weight: 600;
}

.guides-nav-btn i {
    width: 28px;
    height: 28px;
    border: 1px solid currentColor;
    border-radius: 50%;
    transition: background .35s ease, transform .35s ease;
}

.guides-nav-btn i::after {
    content: "↗";
    display: grid;
    height: 100%;
    place-items: center;
    font-style: normal;
    font-size: .68rem;
}

.guides-nav-btn:hover,
.guides-nav-btn.is-active {
    padding-left: 10px;
    color: #edf0da;
}

.guides-nav-btn.is-active i {
    color: #003d3d;
    background: #77d8bc;
    transform: rotate(45deg);
}

.guides-scroll {
    margin: auto 0 0;
    padding-top: 30px;
    display: flex;
    align-items: center;
    gap: 11px;
    color: rgba(255, 255, 255, .4);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.guides-scroll span {
    width: 28px;
    height: 1px;
    background: #77d8bc;
    animation: guidesLine 1.8s ease-in-out infinite;
}

.guides-list {
    display: grid;
    gap: 9vh;
    perspective: 1600px;
}

.guides-card {
    --vmv-scroll: 0;
    --vmv-abs: 0;
    position: relative;
    min-height: min(440px, 56vh);
    padding: clamp(24px, 2.5vw, 36px);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: clamp(28px, 4vw, 52px);
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(300px, 1.1fr);
    gap: clamp(20px, 2.5vw, 36px);
    align-items: center;
    isolation: isolate;
    background: #eaf0df;
    box-shadow: 0 45px 100px rgba(0, 19, 19, .28);
    transform: none;
    transition: box-shadow .35s ease, border-color .35s ease;
    will-change: auto;
}

.guides-card-mission {
    color: #fff;
    background:
        radial-gradient(circle at 75% 38%, rgba(94, 221, 181, .22), transparent 30%),
        linear-gradient(145deg, #006760, #003b3a 65%);
}

.guides-card-values {
    background:
        radial-gradient(circle at 15% 15%, rgba(239, 190, 93, .2), transparent 28%),
        linear-gradient(145deg, #fff, #eeeacb);
}

.guides-card.is-active {
    border-color: rgba(119, 216, 188, .58);
    box-shadow: 0 55px 130px rgba(0, 18, 18, .42), 0 0 0 1px rgba(119, 216, 188, .1);
}

.guides-card-index {
    display: none;
}

.guides-card-mission .guides-card-index {
    color: rgba(255, 255, 255, .055);
}

.guides .about-vmv-copy {
    z-index: 3;
    align-self: start;
    transform: none;
}

.guides .about-vmv-number {
    margin: 0 0 18px;
    padding: 0;
    border: 0;
    color: #00746e;
    background: transparent;
    font-size: .68rem;
    letter-spacing: .16em;
}

.guides-card-mission .about-vmv-number {
    color: #8be1c6;
}

.guides .about-vmv-copy h3 {
    max-width: 620px;
    color: #003d3d;
    font-size: clamp(1.7rem, 2.3vw, 2.65rem);
}

.guides-card-mission .about-vmv-copy h3 {
    color: #fff;
}

.guides .about-vmv-copy > p {
    max-width: 630px;
    color: #527272;
    font-size: clamp(.82rem, .95vw, .94rem);
    line-height: 1.65;
}

.guides-card-mission .about-vmv-copy > p {
    color: rgba(237, 240, 218, .67);
}

.guides .about-vmv-tags span {
    border-color: rgba(0, 83, 83, .14);
    color: #426b69;
    background: rgba(255, 255, 255, .46);
}

.guides-card-mission .about-vmv-tags span {
    border-color: rgba(255, 255, 255, .15);
    color: #edf0da;
    background: rgba(255, 255, 255, .07);
}

.guides .about-vmv-visual {
    min-height: 250px;
    padding: 14px 0 14px clamp(18px, 2vw, 30px);
    border-left: 1px solid rgba(0, 83, 83, .12);
    overflow: hidden;
    transform: none;
}

.guides .about-vmv-visual svg {
    width: min(100%, 430px);
    shape-rendering: geometricPrecision;
    text-rendering: optimizeLegibility;
    filter: none;
    transform: none;
    animation: none;
}

.guides .about-vmv-orbit {
    display: none;
}

@keyframes guidesLine {
    0%, 100% { transform: scaleX(.35); transform-origin: left; opacity: .4; }
    50% { transform: scaleX(1); transform-origin: left; opacity: 1; }
}

@media (max-width: 980px) {
    .guides-shell {
        grid-template-columns: minmax(260px, .65fr) minmax(420px, 1.1fr);
        gap: 40px;
    }

    .guides-card {
        min-height: min(430px, 58vh);
        padding: 26px;
        grid-template-columns: minmax(0, .9fr) minmax(260px, 1.1fr);
        gap: 20px;
    }
}

@media (max-width: 760px) {
    .guides {
        padding: 74px 0 88px;
    }

    .guides-shell {
        display: block;
    }

    .guides-sidebar {
        position: relative;
        top: auto;
        min-height: 0;
    }

    .guides-sidebar h2 {
        font-size: clamp(2.75rem, 13vw, 4.15rem);
    }

    .guides-intro {
        margin-top: 20px;
    }

    .guides-nav {
        position: sticky;
        top: calc(var(--header-height, 66px) + 8px);
        z-index: 20;
        width: 100%;
        margin: 32px 0 38px;
        padding: 5px;
        border: 1px solid rgba(255, 255, 255, .13);
        border-radius: 18px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
        background: rgba(3, 47, 47, .84);
        backdrop-filter: blur(16px);
    }

    .guides-nav-btn {
        padding: 10px 4px;
        border: 0;
        border-radius: 13px;
        display: flex;
        flex-direction: column;
        gap: 3px;
        text-align: center;
    }

    .guides-nav-btn:hover,
    .guides-nav-btn.is-active {
        padding-left: 4px;
        color: #003d3d;
        background: #edf0da;
    }

    .guides-nav-btn i {
        display: none;
    }

    .guides-scroll {
        display: none;
    }

    .guides-list {
        gap: 24px;
    }

    .guides-card {
        min-height: 0;
        padding: 30px 21px 20px;
        border-radius: 28px;
        grid-template-columns: 1fr;
        transform: none;
        will-change: auto;
    }

    .guides-card-index {
        font-size: 7rem;
    }

    .guides .about-vmv-copy h3 {
        font-size: clamp(1.9rem, 9vw, 2.65rem);
    }

    .guides .about-vmv-visual {
        min-height: 210px;
        margin-top: 10px;
        padding: 14px 0 0;
        border-top: 1px solid rgba(0, 83, 83, .12);
        border-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .guides-card {
        transform: none !important;
    }

    .guides-scroll span {
        animation: none;
    }
}

/* Light theme — creates contrast with the dark section above */
.guides {
    color: #003d3d;
    background:
        linear-gradient(rgba(0, 83, 83, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 83, 83, .035) 1px, transparent 1px),
        #f7f7ed;
    background-size: 44px 44px;
}

.guides-noise {
    opacity: .035;
}

.guides-orb-one {
    background: radial-gradient(circle, rgba(47, 207, 161, .18), transparent 68%);
}

.guides-orb-two {
    background: radial-gradient(circle, rgba(211, 190, 105, .14), transparent 68%);
}

.guides-sidebar h2 {
    color: #003d3d;
}

.guides-sidebar h2 em {
    color: #008078;
}

.guides-intro {
    color: #587876;
}

.guides-nav {
    border-top-color: rgba(0, 83, 83, .14);
}

.guides-nav-btn {
    border-bottom-color: rgba(0, 83, 83, .14);
    color: rgba(0, 61, 61, .42);
}

.guides-nav-btn:hover,
.guides-nav-btn.is-active {
    color: #005b57;
}

.guides-nav-btn.is-active i {
    color: #fff;
    background: #007a73;
}

.guides-scroll {
    color: rgba(0, 61, 61, .47);
}

.guides-card,
.guides-card-mission,
.guides-card-values {
    color: #003d3d;
    border-color: rgba(0, 83, 83, .11);
    background:
        radial-gradient(circle at 85% 15%, rgba(75, 201, 161, .16), transparent 31%),
        linear-gradient(145deg, #ffffff, #edf2e3);
    box-shadow: 0 35px 90px rgba(0, 61, 61, .12);
}

.guides-card-mission {
    background:
        radial-gradient(circle at 83% 17%, rgba(0, 122, 115, .16), transparent 31%),
        linear-gradient(145deg, #e3f1e9, #f8faef);
}

.guides-card-values {
    background:
        radial-gradient(circle at 15% 15%, rgba(224, 184, 88, .18), transparent 30%),
        linear-gradient(145deg, #fffdf4, #eeecd7);
}

.guides-card.is-active {
    border-color: rgba(0, 122, 115, .32);
    box-shadow: 0 42px 100px rgba(0, 61, 61, .17), 0 0 0 1px rgba(0, 122, 115, .06);
}

.guides-card-mission .guides-card-index {
    color: rgba(0, 61, 61, .055);
}

.guides-card-mission .about-vmv-number {
    color: #00746e;
}

.guides-card-mission .about-vmv-copy h3 {
    color: #003d3d;
}

.guides-card-mission .about-vmv-copy > p {
    color: #527272;
}

.guides-card-mission .about-vmv-tags span {
    border-color: rgba(0, 83, 83, .14);
    color: #426b69;
    background: rgba(255, 255, 255, .52);
}

@media (max-width: 760px) {
    .guides-nav {
        border-color: rgba(0, 83, 83, .13);
        background: rgba(247, 247, 237, .88);
        box-shadow: 0 12px 35px rgba(0, 61, 61, .1);
    }

    .guides-nav-btn:hover,
    .guides-nav-btn.is-active {
        color: #edf0da;
        background: #005b57;
    }
}

/* ============================================================
   Left-edge robot buddy + WhatsApp float
   ============================================================ */
.float-robot {
    position: fixed;
    left: 0;
    bottom: -8px;
    z-index: 9999;
    display: block;
    text-decoration: none;
    color: inherit;
    filter: drop-shadow(0 10px 18px rgba(0, 61, 61, 0.22));
    transition: transform 0.25s ease, filter 0.25s ease;
}

.float-robot-figure {
    display: block;
    width: 92px;
    height: 110px;
    pointer-events: none;
}

.float-robot-text {
    position: absolute;
    left: 34px;
    top: 78px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 28px;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 61, 61, 0.18);
    font-family: var(--font-head);
    font-size: 9px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.01em;
    text-align: center;
    color: #005353;
    pointer-events: none;
}

.float-robot-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.float-robot-antenna {
    transform-origin: 50px 48px;
    animation: float-robot-antenna 2.4s ease-in-out infinite;
}

.float-robot-eye {
    transform-box: fill-box;
    transform-origin: center;
    animation: float-robot-blink 4.2s ease-in-out infinite;
}

.float-robot-grip {
    transform-origin: 30px 62px;
}

.float-robot-call {
    transform-origin: 74px 64px;
    animation: float-robot-wave 1.15s ease-in-out infinite;
}

.float-robot-call-hand {
    transform-origin: 104px 36px;
    animation: float-robot-hand 1.15s ease-in-out infinite;
}

.float-robot:hover {
    transform: translateX(3px);
    filter: drop-shadow(0 14px 22px rgba(0, 61, 61, 0.3));
}

.float-robot:focus-visible {
    outline: 3px solid rgba(0, 122, 115, 0.4);
    outline-offset: 4px;
    border-radius: 10px;
}

.whatsapp-float {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 14px;
    overflow: hidden;
    background: transparent;
    box-shadow: 0 12px 28px rgba(18, 140, 70, 0.38);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    animation: whatsapp-float-pulse 2.4s ease-in-out infinite;
}

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

.whatsapp-float:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 16px 34px rgba(18, 140, 70, 0.48);
    animation: none;
}

.whatsapp-float:focus-visible {
    outline: 3px solid rgba(37, 211, 102, 0.45);
    outline-offset: 3px;
}

@keyframes float-robot-wave {
    0%, 100% {
        transform: rotate(-16deg);
    }
    50% {
        transform: rotate(20deg);
    }
}

@keyframes float-robot-hand {
    0%, 100% {
        transform: rotate(-8deg);
    }
    50% {
        transform: rotate(16deg);
    }
}

@keyframes float-robot-antenna {
    0%, 100% {
        transform: rotate(-8deg);
    }
    50% {
        transform: rotate(8deg);
    }
}

@keyframes float-robot-blink {
    0%, 46%, 54%, 100% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(0.12);
    }
}

@keyframes whatsapp-float-pulse {
    0%, 100% {
        box-shadow: 0 12px 28px rgba(18, 140, 70, 0.38);
    }
    50% {
        box-shadow: 0 12px 28px rgba(18, 140, 70, 0.38), 0 0 0 12px rgba(37, 211, 102, 0.18);
    }
}

@media (max-width: 760px) {
    .float-robot {
        left: 0;
        bottom: -4px;
    }

    .float-robot-figure {
        width: 78px;
        height: 94px;
    }

    .float-robot-text {
        left: 28px;
        top: 66px;
        width: 36px;
        height: 24px;
        font-size: 8px;
        border-radius: 7px;
    }

    .whatsapp-float {
        right: 14px;
        bottom: 16px;
        width: 52px;
        height: 52px;
        border-radius: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .float-robot-antenna,
    .float-robot-eye,
    .float-robot-call,
    .float-robot-call-hand,
    .whatsapp-float {
        animation: none;
    }
}

/* ============================================================
   Schedule a Demo — contact form modal
   ============================================================ */
.demo-modal-open {
    overflow: hidden;
}

.demo-contact-modal {
    position: fixed;
    z-index: 10000;
    inset: 0;
    padding: 16px;
    display: grid;
    place-items: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.demo-contact-modal.is-open {
    visibility: visible;
    opacity: 1;
}

.demo-modal-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    border: 0;
    background: rgba(0, 35, 34, 0.72);
    backdrop-filter: blur(8px);
    cursor: pointer;
}

.demo-modal-panel {
    position: relative;
    width: min(560px, 100%);
    max-height: calc(100vh - 32px);
    padding: 28px 28px 24px;
    border-radius: 22px;
    overflow: hidden;
    color: #003d3d;
    background: #f7f8ef;
    box-shadow: 0 30px 90px rgba(0, 25, 24, 0.35);
    transform: translateY(16px) scale(0.98);
    transition: transform 0.25s ease;
}

.demo-contact-modal.is-open .demo-modal-panel {
    transform: none;
}

.demo-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(0, 65, 62, 0.16);
    border-radius: 50%;
    color: #003d3d;
    background: transparent;
    font: 400 1.4rem/1 Poppins, sans-serif;
    cursor: pointer;
}

.demo-modal-eyebrow {
    margin: 0 0 6px;
    color: #16786e;
    font: 700 0.65rem Poppins, sans-serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.demo-modal-panel h2 {
    margin: 0;
    padding-right: 36px;
    font: 700 clamp(1.35rem, 3.2vw, 1.85rem)/1.1 Poppins, sans-serif;
    letter-spacing: -0.04em;
}

.demo-modal-panel h2 em {
    color: #167b72;
    font-style: italic;
}

.demo-modal-intro {
    margin: 8px 0 16px;
    color: #526967;
    font: 500 0.82rem/1.45 Inter, sans-serif;
}

.demo-contact-form label {
    margin-bottom: 12px;
    display: block;
}

.demo-contact-form label > span {
    margin-bottom: 4px;
    display: block;
    color: #315d5a;
    font: 700 0.62rem Poppins, sans-serif;
    letter-spacing: 0.04em;
}

.demo-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.demo-contact-form input,
.demo-contact-form textarea {
    width: 100%;
    padding: 8px 0;
    border: 0;
    border-bottom: 1px solid #cfdcd5;
    border-radius: 0;
    outline: 0;
    color: #003d3d;
    background: transparent;
    font: 500 0.85rem Inter, sans-serif;
    transition: border-color 0.25s, box-shadow 0.25s;
}

.demo-contact-form textarea {
    resize: none;
    min-height: 52px;
    height: 52px;
}

.demo-contact-form input:focus,
.demo-contact-form textarea:focus {
    border-color: #16877b;
    box-shadow: 0 1px #16877b;
}

.demo-contact-form input::placeholder,
.demo-contact-form textarea::placeholder {
    color: #96aaa6;
}

.demo-form-status {
    min-height: 16px;
    margin: 0 0 8px;
    color: #16786e;
    font-size: 0.72rem;
}

.demo-form-status.is-error {
    color: #aa3e3e;
}

.demo-contact-form button[type="submit"] {
    width: 100%;
    padding: 13px 18px;
    border: 0;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #fff;
    background: #005353;
    font: 700 0.75rem Poppins, sans-serif;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(0, 83, 83, 0.18);
    transition: transform 0.3s, background 0.3s;
}

.demo-contact-form button[type="submit"]:hover {
    transform: translateY(-2px);
    background: #08756d;
}

.demo-contact-form button[type="submit"]:disabled {
    opacity: 0.65;
    cursor: wait;
    transform: none;
}

@media (max-width: 700px) {
    .demo-contact-modal {
        padding: 10px;
    }

    .demo-modal-panel {
        padding: 22px 18px 18px;
        max-height: calc(100vh - 20px);
        border-radius: 18px;
    }

    .demo-field-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .demo-modal-intro {
        margin-bottom: 12px;
    }
}

@media (max-height: 700px) {
    .demo-modal-panel {
        padding: 18px 20px 16px;
    }

    .demo-modal-intro {
        display: none;
    }

    .demo-contact-form label {
        margin-bottom: 8px;
    }

    .demo-contact-form textarea {
        min-height: 40px;
        height: 40px;
    }

    .demo-contact-form button[type="submit"] {
        padding: 11px 16px;
    }
}