:root {
            --bg: #090d0f;
            --bg-2: #101719;
            --panel: #121a1d;
            --panel-2: #182326;
            --ink: #f4fbf7;
            --muted: #a7b8b2;
            --soft: #6f817a;
            --line: rgba(214, 255, 236, 0.14);
            --green: #18d6a6;
            --green-2: #087c61;
            --lime: #d8ff63;
            --orange: #ff982f;
            --paper: #eff7f2;
            --shadow: 0 36px 110px rgba(0, 0, 0, 0.44);
            --radius: 24px;
        }

        * { box-sizing: border-box; }
        html { 
            scroll-behavior: smooth; 
            scroll-padding-top: 100px;
            overflow-y: scroll;
        }

        body {
            margin: 0;
            color: var(--ink);
            background:
                linear-gradient(180deg, rgba(24, 214, 166, 0.07), transparent 560px),
                linear-gradient(135deg, #080b0d 0%, #101719 46%, #07100d 100%);
            font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
            line-height: 1.5;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        a { color: inherit; }
        img,
        video { display: block; max-width: 100%; }
        br.mobile-break { display: none; }

        .shell {
            width: min(1180px, calc(100% - 40px));
            margin: 0 auto;
        }

        .nav {
            position: sticky;
            top: 0;
            z-index: 20;
            width: 100%;
            background: rgba(10, 16, 17, 0.86);
            backdrop-filter: blur(18px);
            border-bottom: 1px solid var(--line);
        }

        .nav-shell {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            padding: 18px 0;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
            font-size: 20px;
            font-weight: 860;
            white-space: nowrap;
        }

        .brand-tmux { color: var(--orange); }

        .brand-mark {
            width: 44px;
            height: 44px;
            display: grid;
            place-items: center;
            padding: 1px;
            border: 1px solid rgba(244, 251, 247, 0.28);
            border-radius: 11px;
            background: rgba(244, 251, 247, 0.08);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.12),
                0 16px 34px rgba(0, 0, 0, 0.42);
            overflow: hidden;
        }

        .brand-mark img {
            width: 100%;
            height: 100%;
            border-radius: 9px;
            object-fit: cover;
            transform: scale(1.18);
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 7px;
            border: 1px solid var(--line);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.045);
        }

        .nav-links a,
        .lang-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 0;
            color: var(--muted);
            background: transparent;
            text-decoration: none;
            font-size: 13px;
            font-weight: 760;
            padding: 9px 12px;
            border-radius: 999px;
            cursor: pointer;
            white-space: nowrap;
        }

        .nav-links a:hover,
        .lang-btn:hover,
        .lang-btn.active {
            color: var(--ink);
            background: rgba(255, 255, 255, 0.08);
        }

        .nav-cta,
        .primary-btn,
        .secondary-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            font-weight: 860;
            border-radius: 999px;
        }

        .nav-cta {
            width: 214px;
            min-height: 42px;
            padding: 0 18px;
            color: #06100d;
            background: var(--lime);
            font-size: 13px;
            white-space: nowrap;
        }

        .hero {
            min-height: 720px;
            display: grid;
            grid-template-columns: minmax(0, 0.9fr) minmax(460px, 1.1fr);
            align-items: center;
            gap: 54px;
            padding: 68px 0 40px;
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--green);
            border: 1px solid rgba(24, 214, 166, 0.2);
            border-radius: 999px;
            background: rgba(24, 214, 166, 0.08);
            padding: 8px 13px;
            font-size: 13px;
            font-weight: 860;
            max-width: 100%;
        }

        .hero h1 {
            margin: 22px 0 20px;
            font-size: clamp(56px, 7.4vw, 106px);
            line-height: 0.92;
            letter-spacing: 0;
            font-weight: 900;
            overflow-wrap: anywhere;
        }

        html[lang="zh-TW"] .hero h1,
        html[lang="zh-Hans"] .hero h1,
        html[lang="ja"] .hero h1 {
            font-size: clamp(48px, 5.6vw, 78px);
            line-height: 1;
        }

        .accent { color: var(--green); }

        .hero-copy {
            max-width: 650px;
            margin: 0 0 34px;
            color: var(--muted);
            font-size: 21px;
            font-weight: 560;
            overflow-wrap: anywhere;
        }

        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }

        .primary-btn,
        .secondary-btn {
            min-height: 54px;
            padding: 0 24px;
            font-size: 16px;
        }

        .primary-btn {
            color: #06100d;
            background: var(--green);
            box-shadow: 0 18px 44px rgba(24, 214, 166, 0.22);
        }

        .primary-btn.download-cta {
            width: 276px;
            max-width: 100%;
            white-space: nowrap;
        }

        .secondary-btn {
            color: var(--ink);
            border: 1px solid var(--line);
            background: rgba(255, 255, 255, 0.055);
        }

        .proof {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 34px;
        }

        .proof span {
            display: inline-flex;
            align-items: center;
            min-height: 34px;
            padding: 0 12px;
            border: 1px solid var(--line);
            border-radius: 999px;
            color: #c4d5cf;
            background: rgba(255, 255, 255, 0.04);
            font-size: 13px;
            font-weight: 800;
            white-space: nowrap;
        }

        .hero-stage {
            position: relative;
            min-height: clamp(660px, 58vw, 720px);
        }

        .device-window {
            overflow: hidden;
            border: 1px solid var(--line);
            background: #050607;
            box-shadow: var(--shadow);
        }

        .device-window img,
        .device-window video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .ipad-shot {
            position: absolute;
            right: -22%;
            top: 15%;
            width: min(780px, 72vw);
            aspect-ratio: 2752 / 2064;
            border-radius: 22px;
            opacity: 0.88;
            transform: rotate(-3.2deg);
        }

        .ipad-shot img,
        .ipad-shot video {
            object-position: center;
        }

        .iphone-shot {
            position: absolute;
            left: 48%;
            top: 18%;
            z-index: 3;
            width: min(260px, 27vw);
            border-radius: 36px;
            border: 5px solid #0b0e10;
            box-shadow: 0 34px 90px rgba(0, 0, 0, 0.46);
            transform: rotate(5deg);
        }

        .status-panel {
            position: absolute;
            left: 30%;
            bottom: 8%;
            width: 280px;
            padding: 18px;
            border: 1px solid var(--line);
            border-radius: 18px;
            background: rgba(18, 26, 29, 0.84);
            box-shadow: 0 22px 70px rgba(0, 0, 0, 0.34);
            backdrop-filter: blur(16px);
        }

        .status-panel strong {
            display: block;
            margin-bottom: 6px;
            color: var(--ink);
            font-size: 15px;
        }

        .status-panel p {
            margin: 0;
            color: var(--muted);
            font-size: 13px;
            font-weight: 640;
        }

        .strip {
            overflow: hidden;
            padding: 22px 0 74px;
        }

        .strip-track {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 18px;
        }

        .mini-shot {
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: 18px;
            background: rgba(255, 255, 255, 0.04);
            box-shadow: 0 20px 58px rgba(0, 0, 0, 0.24);
        }

        .mini-shot img {
            width: 100%;
            aspect-ratio: 1242 / 2688;
            object-fit: cover;
            object-position: top;
        }

        .demo {
            padding: 18px 0 78px;
        }

        .demo-layout {
            display: grid;
            grid-template-columns: 1fr;
            align-items: center;
            gap: 24px;
            border-top: 1px solid var(--line);
            padding-top: 42px;
        }

        .demo-copy {
            display: grid;
            gap: 14px;
            align-content: start;
            max-width: 860px;
        }

        .demo-copy h2 {
            margin: 0;
            font-size: clamp(36px, 4.6vw, 64px);
            line-height: 1;
            letter-spacing: 0;
            overflow-wrap: anywhere;
        }

        .demo-copy p {
            max-width: 720px;
            margin: 0;
            color: var(--muted);
            font-size: 19px;
            font-weight: 560;
            overflow-wrap: anywhere;
        }

        .demo-media {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(160px, 0.28fr);
            align-items: end;
            gap: 18px;
        }

        .demo-frame,
        .demo-phone {
            position: relative;
            isolation: isolate;
            overflow: hidden;
            background: #050607;
            box-shadow: var(--shadow);
        }

        .demo-frame {
            padding: 13px;
            border: 1px solid #30383c;
            border-radius: 30px;
            background:
                linear-gradient(145deg, #20272b 0%, #07090a 42%, #151a1d 100%);
        }

        .demo-phone {
            justify-self: center;
            width: min(260px, 100%);
            padding: 9px;
            border: 1px solid #2b3134;
            border-radius: 44px;
            background:
                linear-gradient(145deg, #242a2d 0%, #050607 45%, #171c1f 100%);
        }

        .demo-frame::before {
            content: "";
            position: absolute;
            inset: 7px;
            z-index: 2;
            pointer-events: none;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 23px;
            box-shadow:
                inset 0 0 0 1px rgba(0, 0, 0, 0.62),
                inset 0 18px 42px rgba(255, 255, 255, 0.04),
                inset 0 -26px 42px rgba(0, 0, 0, 0.32);
        }

        .demo-frame::after {
            content: "";
            position: absolute;
            top: 11px;
            left: 50%;
            z-index: 3;
            width: 5px;
            height: 5px;
            border-radius: 999px;
            background: #1b2225;
            box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
            transform: translateX(-50%);
        }


        .demo-phone::after {
            content: "";
            position: absolute;
            inset: 7px;
            z-index: 2;
            pointer-events: none;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 37px;
            box-shadow:
                inset 0 0 0 1px rgba(0, 0, 0, 0.65),
                inset 0 16px 28px rgba(255, 255, 255, 0.045);
        }

        .demo-frame video,
        .demo-phone video {
            width: 100%;
            height: auto;
            display: block;
            border-radius: inherit;
            box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05);
            cursor: pointer;
        }

        .demo-frame video {
            aspect-ratio: 4 / 3;
            border-radius: 19px;
        }

        .demo-phone video {
            aspect-ratio: 886 / 1920;
            border-radius: 32px;
        }

        .section-head {
            max-width: 780px;
            margin: 0 auto 44px;
            text-align: center;
        }

        .section-head h2 {
            margin: 16px 0 14px;
            font-size: clamp(40px, 5.4vw, 74px);
            line-height: 0.98;
            letter-spacing: 0;
        }

        .section-head p {
            margin: 0;
            color: var(--muted);
            font-size: 19px;
            font-weight: 560;
            overflow-wrap: anywhere;
        }

        .features {
            padding: 82px 0 56px;
        }

        .feature-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            overflow: hidden;
            background: rgba(255, 255, 255, 0.035);
        }

        .feature-card {
            min-height: 260px;
            padding: 30px;
            border-right: 1px solid var(--line);
        }

        .feature-card:last-child { border-right: 0; }

        .feature-card strong {
            display: block;
            margin-bottom: 18px;
            color: var(--green);
            font-size: 13px;
            font-weight: 900;
        }

        .feature-card h3 {
            margin: 0 0 12px;
            font-size: 29px;
            line-height: 1.05;
            letter-spacing: 0;
            overflow-wrap: anywhere;
        }

        .feature-card p {
            margin: 0;
            color: var(--muted);
            font-size: 16px;
            font-weight: 560;
            overflow-wrap: anywhere;
        }

        .showcase {
            padding: 62px 0 34px;
        }

        .showcase-row {
            display: grid;
            grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
            align-items: center;
            gap: 52px;
            min-height: 640px;
            padding: 72px 0;
            border-top: 1px solid var(--line);
        }

        .showcase-row.reverse {
            grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
        }

        .showcase-copy strong {
            display: inline-flex;
            margin-bottom: 16px;
            color: var(--green);
            font-size: 13px;
            font-weight: 900;
        }

        .showcase-copy h2 {
            margin: 0 0 18px;
            font-size: clamp(38px, 4.8vw, 66px);
            line-height: 0.98;
            letter-spacing: 0;
            overflow-wrap: anywhere;
        }

        .showcase-copy p {
            margin: 0;
            color: var(--muted);
            font-size: 19px;
            font-weight: 560;
            overflow-wrap: anywhere;
        }

        .showcase-frame {
            overflow: hidden;
            width: 100%;
            aspect-ratio: 2752 / 2064;
            border: 1px solid var(--line);
            width: 100%;
            border-radius: 20px;
            background: #050607;
            box-shadow: var(--shadow);
        }

        .showcase-frame img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .crop-agents img { object-position: 52% 48%; }
        .crop-sessions img { object-position: 51% 48%; }
        .crop-files img { object-position: 38% 44%; }

        .phone-media {
            display: grid;
            place-items: center;
        }

        .phone-media img {
            width: min(360px, 100%);
            border-radius: 42px;
            border: 6px solid #0b0e10;
        }

        .plans {
            padding: 58px 0 18px;
        }

        .plan-panel {
            display: grid;
            grid-template-columns: 0.9fr 1.1fr;
            gap: 42px;
            align-items: center;
            padding: 42px;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background:
                linear-gradient(135deg, rgba(216, 255, 99, 0.08), transparent 32%),
                rgba(255, 255, 255, 0.045);
        }

        .plan-panel h2 {
            margin: 0 0 14px;
            font-size: clamp(36px, 4vw, 58px);
            line-height: 1;
            letter-spacing: 0;
            overflow-wrap: anywhere;
        }

        .plan-panel p {
            margin: 0;
            color: var(--muted);
            font-size: 18px;
            font-weight: 560;
            overflow-wrap: anywhere;
        }

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

        .plan-item {
            padding: 18px;
            border: 1px solid var(--line);
            border-radius: 16px;
            background: rgba(0, 0, 0, 0.16);
        }

        .plan-item strong {
            display: block;
            margin-bottom: 5px;
            color: var(--ink);
        }

        .plan-item span {
            color: var(--muted);
            font-size: 14px;
            font-weight: 560;
            overflow-wrap: anywhere;
        }

        .final-cta {
            margin: 86px 0;
            padding: 68px;
            border: 1px solid rgba(216, 255, 99, 0.22);
            border-radius: var(--radius);
            background:
                linear-gradient(135deg, rgba(24, 214, 166, 0.15), transparent 36%),
                linear-gradient(135deg, #111a1c, #09100d);
            text-align: center;
            box-shadow: var(--shadow);
        }

        .final-cta h2 {
            max-width: 780px;
            margin: 0 auto 18px;
            font-size: clamp(40px, 6vw, 80px);
            line-height: 0.96;
            letter-spacing: 0;
            overflow-wrap: anywhere;
        }

        .final-cta p {
            max-width: 680px;
            margin: 0 auto 30px;
            color: var(--muted);
            font-size: 19px;
            font-weight: 560;
        }

        footer {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            padding: 34px 0 60px;
            color: var(--soft);
            font-size: 14px;
            font-weight: 650;
        }

        .footer-links {
            display: flex;
            gap: 18px;
            flex-wrap: wrap;
        }

        .footer-links a {
            color: var(--soft);
            text-decoration: none;
        }

        [data-lang] { display: none; }
        [data-lang].active { display: initial; }
        div[data-lang].active,
        section[data-lang].active { display: block; }

        .cta-label-short { display: none !important; }
        .cta-label-long { display: none; }
        .cta-label-long.active { display: initial; }

        @media (max-width: 980px) {
            .nav-shell {
                align-items: flex-start;
            }

            .nav-links {
                max-width: 520px;
                flex-wrap: wrap;
                justify-content: flex-end;
                border-radius: 20px;
            }

            .hero,
            .showcase-row,
            .showcase-row.reverse,
            .plan-panel {
                grid-template-columns: 1fr;
            }

            .hero {
                min-height: auto;
                padding-top: 52px;
            }

            .section-head {
                max-width: 680px;
            }

            .hero-stage {
                min-height: clamp(620px, 78vw, 700px);
            }

            .ipad-shot {
                right: -24%;
                width: min(720px, 104vw);
            }

            .feature-grid {
                grid-template-columns: 1fr;
            }

            .feature-card {
                border-right: 0;
                border-bottom: 1px solid var(--line);
                min-height: auto;
            }

            .feature-card:last-child { border-bottom: 0; }

            .showcase-row.reverse .showcase-copy { order: 0; }
            .showcase-row.reverse .showcase-media,
            .showcase-row.reverse .phone-media { order: 1; }
        }

        @media (max-width: 640px) {
            br.mobile-break { display: block; }

            .shell {
                width: min(100% - 28px, 1180px);
            }

            .nav {
                position: static;
                border-bottom: 0;
            }

            .nav-shell {
                display: grid;
                grid-template-columns: minmax(0, 1fr) auto;
                align-items: center;
                gap: 8px 12px;
                padding: 12px 0;
            }

            .brand {
                font-size: 18px;
            }

            .brand-mark {
                width: 38px;
                height: 38px;
            }

            .nav-links {
                grid-column: 1 / -1;
                grid-row: 2;
                width: 100%;
                justify-content: flex-start;
                gap: 6px;
                padding: 5px;
                overflow-x: auto;
                overscroll-behavior-x: contain;
                scrollbar-width: none;
                flex-wrap: nowrap;
                border-radius: 999px;
            }

            .nav-links::-webkit-scrollbar {
                display: none;
            }

            .nav-cta {
                grid-column: 2;
                grid-row: 1;
                width: 104px;
                min-height: 36px;
                padding: 0 13px;
                font-size: 12px;
            }

            .cta-label-long,
            .cta-label-long.active {
                display: none !important;
            }

            .cta-label-short.active {
                display: initial !important;
            }

            .primary-btn.download-cta {
                width: 100%;
            }

            .primary-btn,
            .secondary-btn {
                width: 100%;
            }

            .hero {
                gap: 30px;
                padding-top: 40px;
            }

            .hero h1 {
                font-size: clamp(42px, 13vw, 52px);
            }

            html[lang="zh-TW"] .hero h1,
            html[lang="zh-Hans"] .hero h1,
            html[lang="ja"] .hero h1 {
                font-size: clamp(40px, 12.5vw, 50px);
            }

            .hero-copy {
                font-size: 18px;
            }

            .hero-stage {
                min-height: 430px;
                overflow: hidden;
            }

            .ipad-shot {
                left: -2%;
                right: auto;
                top: 32%;
                width: 105%;
            }

            .iphone-shot {
                left: auto;
                right: 2%;
                top: 7%;
                width: min(188px, 50vw);
                border-radius: 30px;
            }

            .status-panel {
                display: none;
            }

            .strip-track {
                display: flex;
                overflow-x: auto;
                padding-bottom: 8px;
                scroll-snap-type: x mandatory;
            }

            .mini-shot {
                flex: 0 0 172px;
                scroll-snap-align: start;
            }

            .demo {
                padding-bottom: 48px;
            }

            .demo-layout,
            .demo-media {
                grid-template-columns: 1fr;
            }

            .demo-media {
                gap: 14px;
            }

            .demo-frame {
                padding: 8px;
                border-radius: 22px;
            }

            .demo-frame::before {
                inset: 5px;
                border-radius: 17px;
            }

            .demo-frame::after {
                top: 8px;
                width: 4px;
                height: 4px;
            }

            .demo-frame video {
                border-radius: 14px;
            }

            .demo-phone {
                width: min(190px, 62vw);
                padding: 7px;
                border-radius: 34px;
            }


            .demo-phone::after {
                inset: 5px;
                border-radius: 29px;
            }

            .demo-phone video {
                border-radius: 25px;
            }

            .features,
            .showcase,
            .plans {
                padding: 48px 0;
            }

            .section-head {
                margin-bottom: 30px;
                text-align: left;
            }

            .section-head h2,
            .showcase-copy h2,
            .plan-panel h2,
            .final-cta h2 {
                font-size: clamp(34px, 10.5vw, 48px);
                line-height: 1.02;
            }

            .showcase-row {
                min-height: auto;
                padding: 44px 0;
                gap: 30px;
            }

            .plan-panel,
            .final-cta {
                padding: 26px;
            }

            footer {
                flex-direction: column;
                align-items: flex-start;
            }
        }

        @media (max-width: 380px) {
            .nav-links a,
            .lang-btn {
                padding: 8px 10px;
                font-size: 12px;
            }

            .hero-copy,
            .section-head p,
            .showcase-copy p,
            .plan-panel p,
            .final-cta p {
                font-size: 16px;
            }

            .feature-card {
                padding: 24px;
            }
        }