:root {
                --black: #0a0a0a;
                --dark: #111;
                --dark2: #1a1a1a;
                --dark3: #222;
                --dark4: #2c2c2c;
                --white: #f5f5f0;
                --cream: #e8e4dc;
                --warm: #b8b4aa;
                --gray: #888880;
                --gray-d: #555550;
                --green: #f1ff00;
                --green-l: #f7ff66;
                --green-dk: #bfcc00;
                --green-g: rgba(241, 255, 0, 0.15);
                --blue: #3b82f6;
                --blue-g: rgba(59, 130, 246, 0.12);
                --purple: #9333ea;
                --purple-g: rgba(147, 51, 234, 0.12);
                --orange: #f97316;
                --orange-g: rgba(249, 115, 22, 0.12);
                --coral: #f472b6;
                --teal: #14b8a6;
                --cyan: #22d3ee;
                --red: #ef4444;
                --fd: "Unbounded", cursive;
                --fb: "Instrument Sans", sans-serif;
                --fh: "Dela Gothic One", cursive;
                --fm: "JetBrains Mono", monospace;
            }
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            html {
                scroll-behavior: smooth;
                font-size: 16px;
            }
            body {
                font-family: var(--fb);
                background: var(--black);
                color: var(--white);
                line-height: 1.6;
                -webkit-font-smoothing: antialiased;
                overflow-x: hidden;
            }
            ::selection {
                background: var(--green);
                color: var(--black);
            }
            body::after {
                content: "";
                position: fixed;
                inset: 0;
                pointer-events: none;
                z-index: 10000;
                background: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
            }
            a {
                color: inherit;
                text-decoration: none;
            }

            /* ═══════ NAV ═══════ */
            .nav {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                z-index: 1000;
                height: 56px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 20px;
                background: rgba(10, 10, 10, 0.85);
                backdrop-filter: blur(20px) saturate(1.8);
                -webkit-backdrop-filter: blur(20px) saturate(1.8);
                border-bottom: 1px solid rgba(255, 255, 255, 0.06);
                transition: all 0.3s;
            }
            .nav-brand {
                display: flex;
                align-items: center;
                gap: 10px;
            }
            .nav-logo {
                width: 28px;
                height: 28px;
                background: var(--green);
                border-radius: 7px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-family: var(--fd);
                font-weight: 900;
                font-size: 10px;
                color: var(--black);
            }
            .nav-wordmark {
                font-family: var(--fd);
                font-weight: 700;
                font-size: 14px;
                letter-spacing: -0.5px;
            }
            .nav-wordmark span {
                color: var(--green);
            }
            .nav-links {
                display: none;
                list-style: none;
                gap: 24px;
            }
            .nav-links a {
                font-size: 13px;
                font-weight: 500;
                color: var(--warm);
                transition: color 0.2s;
                position: relative;
            }
            .nav-links a:hover {
                color: var(--white);
            }
            .nav-links a::after {
                content: "";
                position: absolute;
                bottom: -4px;
                left: 0;
                width: 0;
                height: 2px;
                background: var(--green);
                transition: width 0.3s;
            }
            .nav-links a:hover::after {
                width: 100%;
            }
            .nav-cta-btn {
                background: var(--green);
                color: var(--black);
                font-family: var(--fd);
                font-weight: 700;
                font-size: 12px;
                padding: 8px 18px;
                border-radius: 100px;
                border: none;
                cursor: pointer;
                letter-spacing: -0.3px;
                transition: all 0.2s;
            }
            .nav-cta-btn:hover {
                background: var(--green-l);
                transform: scale(1.03);
            }

            /* ═══════ HERO ═══════ */
            .hero {
                position: relative;
                min-height: 100svh;
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                padding: 76px 0 0;
                overflow: hidden;
            }
            .hero-visual {
                position: absolute;
                inset: 0;
                z-index: 0;
            }
            .hero-visual::before {
                content: "";
                position: absolute;
                inset: 0;
                background: radial-gradient(ellipse 80% 50% at 20% 80%, rgba(241, 255, 0, 0.18), transparent),
                    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(147, 51, 234, 0.12), transparent),
                    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(20, 184, 166, 0.08), transparent), var(--black);
            }
            .hero-visual::after {
                content: "";
                position: absolute;
                inset: 0;
                background: linear-gradient(0deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
                background-size: 40px 40px;
                mask-image: radial-gradient(ellipse 60% 50% at 50% 60%, rgba(0, 0, 0, 0.4), transparent);
            }
            .hero-content {
                position: relative;
                z-index: 2;
                padding: 40px 24px 48px;
            }
            .hero-badge {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                background: rgba(241, 255, 0, 0.1);
                border: 1px solid rgba(241, 255, 0, 0.15);
                border-radius: 100px;
                padding: 6px 16px;
                font-family: var(--fm);
                font-size: 11px;
                color: var(--green);
                margin-bottom: 24px;
                letter-spacing: 0.3px;
            }
            .hero-badge-dot {
                width: 6px;
                height: 6px;
                background: var(--green);
                border-radius: 50%;
                animation: pulse 2s infinite;
            }
            @keyframes pulse {
                0%,
                100% {
                    opacity: 1;
                }
                50% {
                    opacity: 0.3;
                }
            }
            .hero-title {
                font-family: var(--fh);
                font-size: clamp(42px, 12vw, 80px);
                line-height: 0.95;
                letter-spacing: -2px;
                margin-bottom: 20px;
                position: relative;
            }
            .hero-title .tw-line {
                display: block;
            }
            .tw-cursor {
                font-family: var(--fh);
                font-weight: 400;
                color: var(--green);
                animation: blink 0.55s step-end infinite;
            }
            @keyframes blink {
                0%,
                100% {
                    opacity: 1;
                }
                50% {
                    opacity: 0;
                }
            }
            .hero-title .accent {
                display: block;
                background: linear-gradient(135deg, var(--green), var(--green-l), var(--green));
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-size: 200% 100%;
                animation: shimmer 4s ease-in-out infinite;
            }
            @keyframes shimmer {
                0%,
                100% {
                    background-position: 0% 50%;
                }
                50% {
                    background-position: 100% 50%;
                }
            }
            .hero-desc {
                font-size: 16px;
                line-height: 1.7;
                color: var(--cream);
                max-width: 480px;
                margin-bottom: 32px;
            }
            .hero-desc strong {
                color: var(--white);
                font-weight: 600;
            }
            .hero-actions {
                display: flex;
                flex-direction: column;
                gap: 12px;
                margin-bottom: 48px;
            }
            .btn-w {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                font-family: var(--fd);
                font-weight: 700;
                font-size: 15px;
                letter-spacing: -0.3px;
                padding: 16px 32px;
                border-radius: 100px;
                border: none;
                cursor: pointer;
                transition: all 0.25s;
            }
            .btn-w-p {
                background: var(--green);
                color: var(--black);
            }
            .btn-w-p:hover {
                background: var(--green-l);
                transform: translateY(-1px);
                box-shadow: 0 8px 40px rgba(241, 255, 0, 0.2);
            }
            .btn-w-s {
                background: rgba(255, 255, 255, 0.08);
                color: var(--white);
                border: 1px solid rgba(255, 255, 255, 0.1);
            }
            .btn-w-s:hover {
                background: rgba(255, 255, 255, 0.12);
            }

            /* Phone */
            .hero-phone-wrap {
                display: flex;
                justify-content: center;
                padding: 0 24px 40px;
                position: relative;
                z-index: 2;
            }
            .hero-phone {
                width: 220px;
                height: 440px;
                background: var(--dark2);
                border-radius: 32px;
                border: 2.5px solid var(--dark4);
                position: relative;
                overflow: hidden;
                box-shadow:
                    0 0 0 1px rgba(255, 255, 255, 0.04),
                    0 30px 80px rgba(0, 0, 0, 0.6),
                    0 0 60px rgba(241, 255, 0, 0.08);
            }
            .hero-phone-notch {
                position: absolute;
                top: 0;
                left: 50%;
                transform: translateX(-50%);
                width: 90px;
                height: 22px;
                background: var(--black);
                border-radius: 0 0 14px 14px;
                z-index: 5;
            }
            .hero-phone-screen {
                height: 100%;
                display: flex;
                flex-direction: column;
            }
            .phone-prog {
                display: flex;
                gap: 3px;
                padding: 30px 12px 6px;
                z-index: 6;
            }
            .phone-seg {
                flex: 1;
                height: 2.5px;
                border-radius: 2px;
                background: rgba(255, 255, 255, 0.15);
            }
            .phone-seg.done {
                background: rgba(255, 255, 255, 0.45);
            }
            .phone-seg.active {
                background: var(--green);
                box-shadow: 0 0 6px rgba(241, 255, 0, 0.4);
            }
            .phone-card {
                flex: 1;
                margin: 8px;
                border-radius: 18px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                text-align: center;
                padding: 20px 16px;
                position: relative;
                overflow: hidden;
                background: linear-gradient(160deg, #0a2e1c, #061510, #0a1218);
            }
            .phone-card::before {
                content: "";
                position: absolute;
                top: -30%;
                left: -30%;
                width: 160%;
                height: 160%;
                background: radial-gradient(circle at 30% 35%, rgba(241, 255, 0, 0.15), transparent 50%);
            }
            .phone-card::after {
                content: "";
                position: absolute;
                inset: 0;
                background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
            }
            .phone-lbl {
                font-family: var(--fm);
                font-size: 8px;
                text-transform: uppercase;
                letter-spacing: 2px;
                color: var(--green);
                position: relative;
                z-index: 1;
                margin-bottom: 16px;
            }
            .phone-emoji {
                font-size: 36px;
                position: relative;
                z-index: 1;
                margin-bottom: 12px;
            }
            .phone-ttl {
                font-family: var(--fd);
                font-size: 18px;
                font-weight: 800;
                letter-spacing: -0.5px;
                position: relative;
                z-index: 1;
                margin-bottom: 6px;
            }
            .phone-sub {
                font-size: 11px;
                color: var(--warm);
                position: relative;
                z-index: 1;
                line-height: 1.4;
            }
            .phone-big {
                font-family: var(--fh);
                font-size: 44px;
                letter-spacing: -2px;
                background: linear-gradient(135deg, var(--green), var(--teal));
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                position: relative;
                z-index: 1;
                margin-top: 16px;
            }
            .phone-big-lbl {
                font-size: 10px;
                color: var(--gray);
                position: relative;
                z-index: 1;
                margin-top: 2px;
            }
            .phone-bot {
                padding: 8px 12px 14px;
                display: flex;
                justify-content: center;
            }
            .phone-share {
                background: var(--green);
                color: var(--black);
                font-family: var(--fd);
                font-weight: 700;
                font-size: 11px;
                padding: 10px 32px;
                border-radius: 100px;
            }

            /* ═══════ TOC — mobile only horizontal scroll ═══════ */
            .toc-mobile {
                padding: 24px 20px;
                overflow-x: auto;
                white-space: nowrap;
                -webkit-overflow-scrolling: touch;
                border-bottom: 1px solid rgba(255, 255, 255, 0.06);
                background: var(--dark);
                position: sticky;
                top: 0px;
                z-index: 100;
                text-align: center;
            }
            .toc-mobile::-webkit-scrollbar {
                display: none;
            }
            .toc-mobile a {
                display: inline-block;
                font-family: var(--fd);
                font-size: 12px;
                font-weight: 600;
                color: var(--gray);
                padding: 8px 16px;
                border-radius: 100px;
                border: 1px solid rgba(255, 255, 255, 0.06);
                margin-right: 8px;
                transition: all 0.2s;
                white-space: nowrap;
                letter-spacing: -0.3px;
            }
            .toc-mobile a:hover,
            .toc-mobile a.active {
                color: var(--black);
                background: var(--green);
                border-color: var(--green);
            }

            /* ═══════ SECTIONS ═══════ */
            .ws {
                padding: 80px 24px;
                border-bottom: 1px solid rgba(255, 255, 255, 0.06);
                position: relative;
                scroll-margin-top: 110px;
            }
            .sn {
                font-family: var(--fm);
                font-size: 11px;
                color: var(--green);
                letter-spacing: 2px;
                text-transform: uppercase;
                margin-bottom: 16px;
                display: block;
            }
            .sh {
                font-family: var(--fh);
                font-size: clamp(28px, 8vw, 48px);
                line-height: 1.05;
                letter-spacing: -1px;
                margin-bottom: 20px;
            }
            .sh .g {
                color: var(--green);
            }
            .sb {
                font-size: 16px;
                line-height: 1.75;
                color: var(--cream);
                max-width: 640px;
                margin-bottom: 16px;
            }
            .sb strong {
                color: var(--white);
                font-weight: 600;
            }

            /* Phone showcase */
            .phone-showcase {
                display: flex;
                gap: 16px;
                overflow-x: auto;
                padding: 40px 0 20px;
                -webkit-overflow-scrolling: touch;
                scroll-snap-type: x mandatory;
            }
            .phone-showcase::-webkit-scrollbar {
                display: none;
            }
            .sc-phone {
                flex: 0 0 200px;
                height: 400px;
                border-radius: 28px;
                position: relative;
                overflow: hidden;
                scroll-snap-align: center;
                border: 2px solid rgba(255, 255, 255, 0.06);
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                text-align: center;
                padding: 24px 16px;
                transition: all 0.3s;
            }
            .sc-phone:hover {
                transform: scale(1.02);
                border-color: rgba(255, 255, 255, 0.12);
            }
            .sc-phone::after {
                content: "";
                position: absolute;
                inset: 0;
                background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
                pointer-events: none;
            }
            .sc-phone:nth-child(1) {
                background: linear-gradient(160deg, #0d3a22, #051a0f);
            }
            .sc-phone:nth-child(2) {
                background: linear-gradient(160deg, #1a2d55, #0c1428);
            }
            .sc-phone:nth-child(3) {
                background: linear-gradient(160deg, #3a1560, #180a2e);
            }
            .sc-phone:nth-child(4) {
                background: linear-gradient(160deg, #4a2010, #201008);
            }
            .sc-phone:nth-child(5) {
                background: linear-gradient(160deg, #0a3535, #051a1a);
            }
            .sc-phone:nth-child(6) {
                background: linear-gradient(160deg, #3a1040, #1a0820);
            }
            .sc-tag {
                font-family: var(--fm);
                font-size: 9px;
                text-transform: uppercase;
                letter-spacing: 2px;
                margin-bottom: 16px;
                position: relative;
                z-index: 1;
            }
            .sc-phone:nth-child(1) .sc-tag {
                color: var(--green);
            }
            .sc-phone:nth-child(2) .sc-tag {
                color: var(--blue);
            }
            .sc-phone:nth-child(3) .sc-tag {
                color: var(--purple);
            }
            .sc-phone:nth-child(4) .sc-tag {
                color: var(--orange);
            }
            .sc-phone:nth-child(5) .sc-tag {
                color: var(--teal);
            }
            .sc-phone:nth-child(6) .sc-tag {
                color: var(--coral);
            }
            .sc-icon {
                font-size: 40px;
                margin-bottom: 14px;
                position: relative;
                z-index: 1;
            }
            .sc-title {
                font-family: var(--fd);
                font-size: 16px;
                font-weight: 800;
                letter-spacing: -0.5px;
                margin-bottom: 6px;
                position: relative;
                z-index: 1;
            }
            .sc-desc {
                font-size: 11px;
                color: var(--warm);
                line-height: 1.5;
                position: relative;
                z-index: 1;
            }

            /* Persona & feature cards */
            .persona-cards {
                display: grid;
                gap: 16px;
                padding-top: 40px;
            }
            .pc {
                background: var(--dark2);
                border: 1px solid rgba(255, 255, 255, 0.06);
                border-radius: 24px;
                padding: 32px 24px;
                position: relative;
                overflow: hidden;
                transition: all 0.3s;
            }
            .pc:hover {
                border-color: rgba(255, 255, 255, 0.1);
                transform: translateY(-2px);
            }
            .pc-glow {
                position: absolute;
                top: -40px;
                right: -40px;
                width: 150px;
                height: 150px;
                border-radius: 50%;
                opacity: 0.08;
                pointer-events: none;
            }
            .pc:nth-child(1) .pc-glow {
                background: var(--green);
            }
            .pc:nth-child(2) .pc-glow {
                background: var(--blue);
            }
            .pc:nth-child(3) .pc-glow {
                background: var(--purple);
            }
            .pc:nth-child(4) .pc-glow {
                background: var(--orange);
            }
            .pc-emoji {
                font-size: 32px;
                margin-bottom: 16px;
            }
            .pc h3 {
                font-family: var(--fd);
                font-size: 22px;
                font-weight: 800;
                letter-spacing: -0.5px;
                margin-bottom: 8px;
            }
            .pc > p {
                font-size: 14px;
                color: var(--warm);
                line-height: 1.7;
                margin-bottom: 20px;
            }
            .pc-tags {
                list-style: none;
                display: flex;
                flex-wrap: wrap;
                gap: 6px;
            }
            .pc-tags li {
                font-family: var(--fm);
                font-size: 10px;
                color: var(--cream);
                background: rgba(255, 255, 255, 0.05);
                border: 1px solid rgba(255, 255, 255, 0.06);
                padding: 5px 12px;
                border-radius: 100px;
            }

            /* Cycle cards */
            .cycle-block {
                padding: 40px 0;
            }
            .cycle-item {
                border-radius: 24px;
                padding: 36px 24px;
                margin-bottom: 16px;
                position: relative;
                overflow: hidden;
            }
            .cycle-item::after {
                content: "";
                position: absolute;
                inset: 0;
                background: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
                pointer-events: none;
            }
            .cycle-item.weekly {
                background: linear-gradient(145deg, #082a1a, #040f0a, #0a1510);
                border: 1px solid rgba(241, 255, 0, 0.1);
            }
            .cycle-item.monthly {
                background: linear-gradient(145deg, #0c1e40, #060e20, #0a1530);
                border: 1px solid rgba(59, 130, 246, 0.1);
            }
            .cycle-item.annual {
                background: linear-gradient(145deg, #2a0e4a, #120720, #1a0e30);
                border: 1px solid rgba(147, 51, 234, 0.1);
            }
            .cycle-freq {
                font-family: var(--fm);
                font-size: 11px;
                text-transform: uppercase;
                letter-spacing: 2px;
                margin-bottom: 12px;
                position: relative;
                z-index: 1;
            }
            .cycle-item.weekly .cycle-freq {
                color: var(--green);
            }
            .cycle-item.monthly .cycle-freq {
                color: var(--blue);
            }
            .cycle-item.annual .cycle-freq {
                color: var(--purple);
            }
            .cycle-name {
                font-family: var(--fh);
                font-size: 28px;
                letter-spacing: -0.5px;
                margin-bottom: 10px;
                position: relative;
                z-index: 1;
            }
            .cycle-desc {
                font-size: 14px;
                color: var(--cream);
                line-height: 1.7;
                margin-bottom: 24px;
                position: relative;
                z-index: 1;
            }
            .cycle-meta {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 12px;
                position: relative;
                z-index: 1;
            }
            .cm-box {
                background: rgba(255, 255, 255, 0.04);
                border-radius: 12px;
                padding: 14px;
            }
            .cm-lbl {
                font-family: var(--fm);
                font-size: 9px;
                text-transform: uppercase;
                letter-spacing: 1.5px;
                color: var(--gray);
                margin-bottom: 4px;
            }
            .cm-val {
                font-family: var(--fd);
                font-size: 20px;
                font-weight: 800;
            }

            /* B2B grid */
            .b2b-grid {
                display: grid;
                gap: 12px;
                padding-top: 32px;
            }
            .b2b {
                background: var(--dark2);
                border: 1px solid rgba(255, 255, 255, 0.06);
                border-radius: 20px;
                padding: 28px 22px;
                transition: all 0.3s;
            }
            .b2b:hover {
                border-color: rgba(255, 255, 255, 0.1);
            }
            .b2b-tag {
                font-family: var(--fm);
                font-size: 10px;
                text-transform: uppercase;
                letter-spacing: 1.5px;
                margin-bottom: 10px;
            }
            .b2b:nth-child(1) .b2b-tag {
                color: var(--green);
            }
            .b2b:nth-child(2) .b2b-tag {
                color: var(--blue);
            }
            .b2b:nth-child(3) .b2b-tag {
                color: var(--purple);
            }
            .b2b:nth-child(4) .b2b-tag {
                color: var(--orange);
            }
            .b2b:nth-child(5) .b2b-tag {
                color: var(--coral);
            }
            .b2b:nth-child(6) .b2b-tag {
                color: var(--teal);
            }
            .b2b h4 {
                font-family: var(--fd);
                font-size: 18px;
                font-weight: 700;
                letter-spacing: -0.5px;
                margin-bottom: 8px;
            }
            .b2b > p {
                font-size: 14px;
                color: var(--warm);
                line-height: 1.7;
            }

            /* Stats */
            .stats-strip {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 12px;
                padding: 40px 0;
            }
            .stat-block {
                background: var(--dark2);
                border: 1px solid rgba(255, 255, 255, 0.06);
                border-radius: 20px;
                padding: 28px 20px;
                text-align: center;
            }
            .stat-num {
                font-family: var(--fh);
                font-size: 32px;
                letter-spacing: -1px;
                margin-bottom: 4px;
            }
            .stat-block:nth-child(1) .stat-num {
                color: var(--green);
            }
            .stat-block:nth-child(2) .stat-num {
                color: var(--blue);
            }
            .stat-block:nth-child(3) .stat-num {
                color: var(--purple);
            }
            .stat-block:nth-child(4) .stat-num {
                color: var(--orange);
            }
            .stat-block:nth-child(5) .stat-num {
                color: var(--teal);
            }
            .stat-block:nth-child(6) .stat-num {
                color: var(--coral);
            }
            .stat-label {
                font-size: 11px;
                color: var(--gray);
                line-height: 1.4;
            }

            /* CTA */
            .app-cta {
                padding: 80px 24px;
                text-align: center;
                position: relative;
                overflow: hidden;
                border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            }
            .app-cta::before {
                content: "";
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 500px;
                height: 500px;
                background: radial-gradient(circle, rgba(241, 255, 0, 0.1), transparent 60%);
            }
            .app-cta-title {
                font-family: var(--fh);
                font-size: clamp(32px, 9vw, 56px);
                line-height: 1;
                letter-spacing: -1.5px;
                margin-bottom: 16px;
                position: relative;
            }
            .app-cta-title .g {
                color: var(--green);
            }
            .app-cta-sub {
                font-size: 16px;
                color: var(--cream);
                max-width: 440px;
                margin: 0 auto 36px;
                line-height: 1.7;
                position: relative;
            }
            .store-btns {
                display: flex;
                flex-direction: column;
                gap: 12px;
                align-items: center;
                position: relative;
            }
            .store-btn {
                display: flex;
                align-items: center;
                gap: 12px;
                background: var(--white);
                color: var(--black);
                padding: 14px 32px;
                border-radius: 14px;
                font-family: var(--fd);
                font-weight: 700;
                font-size: 14px;
                letter-spacing: -0.3px;
                transition: all 0.2s;
                min-width: 220px;
                justify-content: center;
            }
            .store-btn:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 30px rgba(255, 255, 255, 0.1);
            }
            .store-btn-sub {
                font-family: var(--fb);
                font-weight: 400;
                font-size: 11px;
                color: var(--gray-d);
                display: block;
            }

            /* ═══════ DOCS SECTION ═══════ */
            .docs-section {
                background: var(--dark);
                border-top: 4px solid var(--green);
            }
            .docs-header {
                padding: 80px 24px 40px;
                text-align: center;
                border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            }
            .docs-header .sh {
                margin-bottom: 12px;
            }

            /* Docs inline nav */
            .docs-nav {
                padding: 20px 24px;
                overflow-x: auto;
                white-space: nowrap;
                -webkit-overflow-scrolling: touch;
                border-bottom: 1px solid rgba(255, 255, 255, 0.06);
                background: rgba(17, 17, 17, 0.95);
                backdrop-filter: blur(12px);
                position: sticky;
                top: 56px;
                z-index: 99;
            }
            .docs-nav::-webkit-scrollbar {
                display: none;
            }
            .docs-nav a {
                display: inline-block;
                font-family: var(--fm);
                font-size: 11px;
                color: var(--gray);
                padding: 6px 14px;
                border-radius: 8px;
                margin-right: 6px;
                transition: all 0.2s;
                white-space: nowrap;
                border: 1px solid transparent;
            }
            .docs-nav a:hover {
                color: var(--white);
                background: rgba(255, 255, 255, 0.04);
            }
            .docs-nav a.doc-active {
                color: var(--green);
                border-color: rgba(241, 255, 0, 0.15);
                background: var(--green-g);
            }

            .doc-block {
                padding: 64px 24px;
                border-bottom: 1px solid rgba(255, 255, 255, 0.06);
                scroll-margin-top: 140px;
            }
            .doc-block .sn {
                font-size: 10px;
            }
            .doc-block .sh {
                font-size: clamp(24px, 6vw, 36px);
            }

            /* Docs tables */
            .doc-table {
                width: 100%;
                border-collapse: collapse;
                margin: 24px 0;
                font-size: 13px;
            }
            .doc-table thead {
                background: rgba(255, 255, 255, 0.03);
            }
            .doc-table th {
                font-family: var(--fd);
                font-weight: 600;
                font-size: 11px;
                text-transform: uppercase;
                letter-spacing: 1px;
                color: var(--gray);
                padding: 12px 14px;
                text-align: left;
                border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            }
            .doc-table td {
                padding: 12px 14px;
                border-bottom: 1px solid rgba(255, 255, 255, 0.06);
                color: var(--warm);
                vertical-align: top;
                font-size: 13px;
            }
            .doc-table tr:hover td {
                background: rgba(255, 255, 255, 0.02);
            }
            .doc-table .ck {
                color: var(--green);
                font-weight: 700;
            }

            /* Docs code block */
            .doc-code {
                background: rgba(255, 255, 255, 0.03);
                border: 1px solid rgba(255, 255, 255, 0.06);
                border-radius: 12px;
                margin: 24px 0;
                overflow: hidden;
            }
            .doc-code-head {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 10px 16px;
                background: rgba(255, 255, 255, 0.04);
                border-bottom: 1px solid rgba(255, 255, 255, 0.06);
                font-family: var(--fm);
                font-size: 12px;
                color: var(--gray);
            }
            .doc-code-dots {
                display: flex;
                gap: 6px;
            }
            .doc-code-dots span {
                width: 10px;
                height: 10px;
                border-radius: 50%;
            }
            .doc-code-dots span:nth-child(1) {
                background: #ff5f57;
            }
            .doc-code-dots span:nth-child(2) {
                background: #febc2e;
            }
            .doc-code-dots span:nth-child(3) {
                background: #28c840;
            }
            .doc-code-body {
                padding: 20px;
                font-family: var(--fm);
                font-size: 12px;
                line-height: 1.9;
                overflow-x: auto;
                color: var(--warm);
            }
            .doc-code-body .k {
                color: var(--cyan);
            }
            .doc-code-body .s {
                color: var(--green);
            }
            .doc-code-body .c {
                color: var(--gray);
                font-style: italic;
            }
            .doc-code-body .f {
                color: var(--purple);
            }

            /* Docs callout */
            .doc-callout {
                border-radius: 12px;
                padding: 20px 24px;
                margin: 24px 0;
                display: flex;
                gap: 14px;
                font-size: 14px;
                line-height: 1.7;
                background: var(--green-g);
                border: 1px solid rgba(241, 255, 0, 0.12);
            }
            .doc-callout-icon {
                font-size: 18px;
                flex-shrink: 0;
            }
            .doc-callout p {
                margin: 0;
                color: var(--white);
                font-size: 14px;
            }

            /* Docs flow */
            .doc-flow {
                display: flex;
                align-items: center;
                gap: 10px;
                margin: 24px 0;
                padding: 20px;
                background: rgba(255, 255, 255, 0.03);
                border: 1px solid rgba(255, 255, 255, 0.06);
                border-radius: 12px;
                overflow-x: auto;
            }
            .doc-flow-step {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 6px;
                min-width: 90px;
                text-align: center;
            }
            .doc-flow-icon {
                width: 44px;
                height: 44px;
                border-radius: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 18px;
            }
            .doc-flow-label {
                font-size: 11px;
                font-weight: 600;
            }
            .doc-flow-sub {
                font-size: 10px;
                color: var(--gray);
                font-family: var(--fm);
            }
            .doc-flow-arrow {
                color: var(--gray);
                font-size: 18px;
                flex-shrink: 0;
            }

            /* Docs tags */
            .dtag {
                display: inline-flex;
                font-family: var(--fm);
                font-size: 10px;
                padding: 3px 10px;
                border-radius: 4px;
                margin-right: 4px;
            }
            .dtag.gr {
                background: var(--green-g);
                color: var(--green);
            }
            .dtag.bl {
                background: var(--blue-g);
                color: var(--blue);
            }
            .dtag.pu {
                background: var(--purple-g);
                color: var(--purple);
            }
            .dtag.or {
                background: var(--orange-g);
                color: var(--orange);
            }
            .dtag.rd {
                background: rgba(239, 68, 68, 0.12);
                color: var(--red);
            }

            /* Articles */
            .articles-grid {
                display: grid;
                gap: 16px;
                padding: 40px 0;
            }
            .art {
                background: var(--dark2);
                border: 1px solid rgba(255, 255, 255, 0.06);
                border-radius: 20px;
                overflow: hidden;
                transition: all 0.3s;
            }
            .art:hover {
                border-color: rgba(255, 255, 255, 0.12);
                transform: translateY(-2px);
            }
            .art-img {
                height: 120px;
                position: relative;
                overflow: hidden;
            }
            .art:nth-child(1) .art-img {
                background: linear-gradient(135deg, #0a3520, #051510);
            }
            .art:nth-child(2) .art-img {
                background: linear-gradient(135deg, #152850, #0a1428);
            }
            .art:nth-child(3) .art-img {
                background: linear-gradient(135deg, #301050, #150828);
            }
            .art-img-icon {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                font-size: 40px;
                opacity: 0.6;
            }
            .art-body {
                padding: 18px;
            }
            .art-tag {
                font-family: var(--fm);
                font-size: 10px;
                text-transform: uppercase;
                letter-spacing: 1.5px;
                color: var(--green);
                margin-bottom: 6px;
            }
            .art-title {
                font-family: var(--fd);
                font-size: 15px;
                font-weight: 700;
                letter-spacing: -0.3px;
                line-height: 1.3;
                margin-bottom: 4px;
            }
            .art-ex {
                font-size: 12px;
                color: var(--gray);
                line-height: 1.5;
            }

            /* Footer */
            .footer {
                padding: 48px 24px 32px;
                border-top: 1px solid rgba(255, 255, 255, 0.06);
            }
            .footer-brand {
                display: flex;
                align-items: center;
                gap: 10px;
                margin-bottom: 24px;
            }
            .footer-links {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 32px;
                margin-bottom: 40px;
            }
            .footer-col h5 {
                font-family: var(--fd);
                font-size: 11px;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 1px;
                color: var(--gray);
                margin-bottom: 14px;
            }
            .footer-col a {
                display: block;
                font-size: 14px;
                color: var(--warm);
                padding: 4px 0;
                transition: color 0.2s;
            }
            .footer-col a:hover {
                color: var(--white);
            }
            .footer-bottom {
                padding-top: 24px;
                border-top: 1px solid rgba(255, 255, 255, 0.06);
                font-size: 12px;
                color: var(--gray-d);
            }
            .footer-bottom-links {
                display: flex;
                gap: 16px;
                margin-top: 8px;
            }
            .footer-bottom-links a {
                color: var(--gray);
                font-size: 12px;
            }
            .footer-bottom-links a:hover {
                color: var(--white);
            }

            /* Reveal */
            .reveal {
                opacity: 0;
                transform: translateY(24px);
                transition:
                    opacity 0.6s ease-out,
                    transform 0.6s ease-out;
            }
            .reveal.vis {
                opacity: 1;
                transform: translateY(0);
            }

            /* ═══════ DESKTOP ═══════ */
            @media (min-width: 768px) {
                .nav {
                    height: 64px;
                    padding: 0 40px;
                }
                .nav-links {
                    display: flex;
                }
                .hero-content {
                    padding: 60px 40px;
                }
                .hero-actions {
                    flex-direction: row;
                }
                .hero-phone {
                    width: 260px;
                    height: 520px;
                }
                .ws {
                    padding: 100px 40px;
                }
                .persona-cards {
                    grid-template-columns: 1fr 1fr;
                }
                .b2b-grid {
                    grid-template-columns: 1fr 1fr;
                }
                .stats-strip {
                    grid-template-columns: repeat(3, 1fr);
                }
                .articles-grid {
                    grid-template-columns: 1fr 1fr 1fr;
                }
                .footer-links {
                    grid-template-columns: repeat(4, 1fr);
                }
                .store-btns {
                    flex-direction: row;
                    justify-content: center;
                }
                .doc-block {
                    padding: 64px 40px;
                }
            }
            @media (min-width: 1024px) {
                .hero {
                    flex-direction: row;
                    align-items: center;
                    min-height: 100vh;
                }
                .hero-content {
                    flex: 1;
                    padding: 80px 50px;
                }
                .hero-phone-wrap {
                    flex: 0 0 auto;
                    padding: 0 80px 0 0;
                }
                .hero-phone {
                    width: 300px;
                    height: 600px;
                    border-radius: 36px;
                }
                .ws {
                    max-width: 840px;
                    margin-left: auto;
                    margin-right: auto;
                    padding-left: 0;
                    padding-right: 0;
                }
                .persona-cards {
                    grid-template-columns: repeat(4, 1fr);
                }
                .cycle-block {
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    gap: 20px;
                }
                .cycle-item {
                    margin-bottom: 0;
                }
                .b2b-grid {
                    grid-template-columns: repeat(3, 1fr);
                }
                .stats-strip {
                    grid-template-columns: repeat(6, 1fr);
                }
                .doc-block {
                    max-width: 840px;
                    margin-left: auto;
                    margin-right: auto;
                }
            }

            /* ═══════ PAGE SECTIONS ═══════ */
            .page-section {
                border-top: 4px solid rgba(255, 255, 255, 0.06);
                position: relative;
            }
            .page-section::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 400px;
                pointer-events: none;
                z-index: 0;
            }
            .page-section#p-experience::before {
                background: linear-gradient(180deg, rgba(241, 255, 0, 0.04), transparent);
            }
            .page-section#p-cycles::before {
                background: linear-gradient(180deg, rgba(59, 130, 246, 0.04), transparent);
            }
            .page-section#p-clubs::before {
                background: linear-gradient(180deg, rgba(147, 51, 234, 0.04), transparent);
            }
            .page-section#p-business::before {
                background: linear-gradient(180deg, rgba(249, 115, 22, 0.03), transparent);
            }
            .page-section#p-data::before {
                background: linear-gradient(180deg, rgba(34, 211, 238, 0.03), transparent);
            }
            .page-section#p-app::before {
                background: linear-gradient(180deg, rgba(241, 255, 0, 0.06), transparent);
            }
            /* Page Hero */
            .ph-hero {
                padding: 100px 24px 60px;
                position: relative;
                z-index: 1;
                scroll-margin-top: 80px;
            }
            .ph-hero .badge {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                background: var(--green-g);
                border: 1px solid rgba(241, 255, 0, 0.12);
                border-radius: 100px;
                padding: 6px 16px;
                font-family: var(--fm);
                font-size: 11px;
                color: var(--green);
                margin-bottom: 20px;
            }
            .ph-hero .badge .dot {
                width: 6px;
                height: 6px;
                background: var(--green);
                border-radius: 50%;
                animation: pulse 2s infinite;
            }
            .ph-hero h2 {
                font-family: var(--fh);
                font-size: clamp(32px, 9vw, 56px);
                line-height: 0.95;
                letter-spacing: -2px;
                margin-bottom: 18px;
            }
            .ph-hero h2 .g {
                color: var(--green);
            }
            .ph-hero .lead {
                font-size: 16px;
                line-height: 1.75;
                color: var(--cream);
                max-width: 580px;
                margin-bottom: 0;
            }
            .ph-hero .lead strong {
                color: var(--white);
            }
            /* Inner sections */
            .ps {
                padding: 64px 24px;
                border-bottom: 1px solid rgba(255, 255, 255, 0.06);
                position: relative;
                z-index: 1;
            }
            .ps-inner {
                max-width: 800px;
            }
            .ps .sn {
                font-family: var(--fm);
                font-size: 11px;
                color: var(--green);
                letter-spacing: 2px;
                text-transform: uppercase;
                margin-bottom: 14px;
                display: block;
            }
            .ps h3 {
                font-family: var(--fh);
                font-size: clamp(24px, 6vw, 36px);
                line-height: 1.05;
                letter-spacing: -1px;
                margin-bottom: 16px;
            }
            .ps h3 .g {
                color: var(--green);
            }
            .ps h4 {
                font-family: var(--fd);
                font-size: 18px;
                font-weight: 700;
                letter-spacing: -0.4px;
                margin: 28px 0 10px;
            }
            .ps p {
                font-size: 15px;
                line-height: 1.75;
                color: var(--cream);
                max-width: 680px;
                margin-bottom: 14px;
            }
            .ps p strong {
                color: var(--white);
                font-weight: 600;
            }
            /* Cards grid */
            .cg {
                display: grid;
                gap: 14px;
                margin: 28px 0;
            }
            .cg-c {
                background: var(--dark2);
                border: 1px solid rgba(255, 255, 255, 0.06);
                border-radius: 18px;
                padding: 26px 22px;
                transition: all 0.3s;
                position: relative;
                overflow: hidden;
            }
            .cg-c:hover {
                border-color: rgba(255, 255, 255, 0.1);
                transform: translateY(-2px);
            }
            .cg-c .ic {
                width: 40px;
                height: 40px;
                border-radius: 10px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 18px;
                margin-bottom: 14px;
            }
            .cg-c h5 {
                font-family: var(--fd);
                font-size: 16px;
                font-weight: 700;
                letter-spacing: -0.3px;
                margin-bottom: 6px;
            }
            .cg-c > p {
                font-size: 13px;
                color: var(--warm);
                margin: 0;
                line-height: 1.7;
            }
            .cg-c .glow {
                position: absolute;
                top: -40px;
                right: -40px;
                width: 130px;
                height: 130px;
                border-radius: 50%;
                opacity: 0.05;
                pointer-events: none;
            }
            /* Tags */
            .tg {
                display: flex;
                flex-wrap: wrap;
                gap: 6px;
                margin-top: 14px;
            }
            .tg span {
                font-family: var(--fm);
                font-size: 10px;
                padding: 4px 12px;
                border-radius: 100px;
                border: 1px solid rgba(255, 255, 255, 0.06);
                color: var(--cream);
                background: rgba(255, 255, 255, 0.04);
            }
            /* Cycle cards */
            .cyc-card {
                border-radius: 20px;
                padding: 32px 22px;
                margin-bottom: 14px;
                position: relative;
                overflow: hidden;
            }
            .cyc-card::after {
                content: "";
                position: absolute;
                inset: 0;
                background: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
                pointer-events: none;
            }
            .cyc-card.cw {
                background: linear-gradient(145deg, #082a1a, #040f0a);
                border: 1px solid rgba(241, 255, 0, 0.1);
            }
            .cyc-card.cm {
                background: linear-gradient(145deg, #0c1e40, #060e20);
                border: 1px solid rgba(59, 130, 246, 0.1);
            }
            .cyc-card.ca {
                background: linear-gradient(145deg, #2a0e4a, #120720);
                border: 1px solid rgba(147, 51, 234, 0.1);
            }
            .cyc-card .cf {
                font-family: var(--fm);
                font-size: 11px;
                text-transform: uppercase;
                letter-spacing: 2px;
                margin-bottom: 10px;
                position: relative;
                z-index: 1;
            }
            .cyc-card.cw .cf {
                color: var(--green);
            }
            .cyc-card.cm .cf {
                color: var(--blue);
            }
            .cyc-card.ca .cf {
                color: var(--purple);
            }
            .cyc-card .cn {
                font-family: var(--fh);
                font-size: 24px;
                letter-spacing: -0.5px;
                margin-bottom: 10px;
                position: relative;
                z-index: 1;
            }
            .cyc-card p {
                position: relative;
                z-index: 1;
            }
            .cyc-card .cmg {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 10px;
                position: relative;
                z-index: 1;
                margin-top: 18px;
            }
            .cyc-card .cmg .mb {
                background: rgba(255, 255, 255, 0.04);
                border-radius: 10px;
                padding: 12px;
            }
            .cyc-card .cmg .ml {
                font-family: var(--fm);
                font-size: 9px;
                text-transform: uppercase;
                letter-spacing: 1.5px;
                color: var(--gray);
                margin-bottom: 3px;
            }
            .cyc-card .cmg .mv {
                font-family: var(--fd);
                font-size: 18px;
                font-weight: 800;
            }
            /* Flow diagram */
            .fl {
                display: flex;
                align-items: center;
                gap: 10px;
                margin: 24px 0;
                padding: 18px;
                background: rgba(255, 255, 255, 0.03);
                border: 1px solid rgba(255, 255, 255, 0.06);
                border-radius: 12px;
                overflow-x: auto;
            }
            .fl-s {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 5px;
                min-width: 85px;
                text-align: center;
            }
            .fl-i {
                width: 42px;
                height: 42px;
                border-radius: 10px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 17px;
            }
            .fl-l {
                font-size: 11px;
                font-weight: 600;
            }
            .fl-u {
                font-size: 9px;
                color: var(--gray);
                font-family: var(--fm);
            }
            .fl-a {
                color: var(--gray);
                font-size: 16px;
                flex-shrink: 0;
            }
            /* Callout */
            .co {
                border-radius: 12px;
                padding: 18px 22px;
                margin: 24px 0;
                display: flex;
                gap: 12px;
                font-size: 14px;
                line-height: 1.7;
            }
            .co.ok {
                background: var(--green-g);
                border: 1px solid rgba(241, 255, 0, 0.12);
            }
            .co.info {
                background: var(--blue-g);
                border: 1px solid rgba(59, 130, 246, 0.12);
            }
            .co.warn {
                background: var(--orange-g);
                border: 1px solid rgba(249, 115, 22, 0.12);
            }
            .co-i {
                font-size: 17px;
                flex-shrink: 0;
            }
            .co p {
                margin: 0;
                color: var(--white);
                font-size: 14px;
                max-width: none;
            }
            /* Table */
            .tb {
                width: 100%;
                border-collapse: collapse;
                margin: 24px 0;
                font-size: 13px;
            }
            .tb thead {
                background: rgba(255, 255, 255, 0.03);
            }
            .tb th {
                font-family: var(--fd);
                font-weight: 600;
                font-size: 11px;
                text-transform: uppercase;
                letter-spacing: 1px;
                color: var(--gray);
                padding: 11px 13px;
                text-align: left;
                border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            }
            .tb td {
                padding: 11px 13px;
                border-bottom: 1px solid rgba(255, 255, 255, 0.06);
                color: var(--warm);
                vertical-align: top;
            }
            .tb tr:hover td {
                background: rgba(255, 255, 255, 0.02);
            }
            /* Stats grid */
            .sg {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 12px;
                margin: 28px 0;
            }
            .sg-b {
                background: var(--dark2);
                border: 1px solid rgba(255, 255, 255, 0.06);
                border-radius: 16px;
                padding: 22px 16px;
                text-align: center;
            }
            .sg-n {
                font-family: var(--fh);
                font-size: 30px;
                letter-spacing: -1px;
                margin-bottom: 2px;
            }
            .sg-l {
                font-size: 11px;
                color: var(--gray);
                line-height: 1.4;
            }
            /* Phone scroll */
            .phs {
                display: flex;
                gap: 14px;
                overflow-x: auto;
                padding: 28px 0;
                -webkit-overflow-scrolling: touch;
                scroll-snap-type: x mandatory;
            }
            .phs::-webkit-scrollbar {
                display: none;
            }
            .phs-c {
                flex: 0 0 170px;
                height: 340px;
                border-radius: 22px;
                position: relative;
                overflow: hidden;
                scroll-snap-align: center;
                border: 2px solid rgba(255, 255, 255, 0.06);
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                text-align: center;
                padding: 18px 12px;
                transition: all 0.3s;
            }
            .phs-c:hover {
                transform: scale(1.02);
                border-color: rgba(255, 255, 255, 0.12);
            }
            .phs-c::after {
                content: "";
                position: absolute;
                inset: 0;
                background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
                pointer-events: none;
            }
            .phs-c:nth-child(odd) {
                background: linear-gradient(160deg, #0d3a22, #051a0f);
            }
            .phs-c:nth-child(even) {
                background: linear-gradient(160deg, #1a2d55, #0c1428);
            }
            .phs-c:nth-child(3) {
                background: linear-gradient(160deg, #3a1560, #180a2e);
            }
            .phs-c:nth-child(4) {
                background: linear-gradient(160deg, #4a2010, #201008);
            }
            .phs-c:nth-child(5) {
                background: linear-gradient(160deg, #0a3535, #051a1a);
            }
            .phs-c:nth-child(6) {
                background: linear-gradient(160deg, #3a1040, #1a0820);
            }
            .phs-c:nth-child(7) {
                background: linear-gradient(160deg, #2a2a05, #141405);
            }
            .phs-c:nth-child(8) {
                background: linear-gradient(160deg, #0a2a3a, #051520);
            }
            .phs-t {
                font-family: var(--fm);
                font-size: 9px;
                text-transform: uppercase;
                letter-spacing: 2px;
                margin-bottom: 12px;
                position: relative;
                z-index: 1;
                color: var(--green);
            }
            .phs-i {
                font-size: 32px;
                margin-bottom: 10px;
                position: relative;
                z-index: 1;
            }
            .phs-n {
                font-family: var(--fd);
                font-size: 14px;
                font-weight: 800;
                letter-spacing: -0.4px;
                margin-bottom: 3px;
                position: relative;
                z-index: 1;
            }
            .phs-d {
                font-size: 10px;
                color: var(--warm);
                line-height: 1.4;
                position: relative;
                z-index: 1;
            }
            /* Code block */
            .cb {
                background: rgba(255, 255, 255, 0.03);
                border: 1px solid rgba(255, 255, 255, 0.06);
                border-radius: 12px;
                margin: 24px 0;
                overflow: hidden;
            }
            .cb-h {
                padding: 10px 16px;
                background: rgba(255, 255, 255, 0.04);
                border-bottom: 1px solid rgba(255, 255, 255, 0.06);
                font-family: var(--fm);
                font-size: 12px;
                color: var(--gray);
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
            .cb-dots {
                display: flex;
                gap: 6px;
            }
            .cb-dots span {
                width: 10px;
                height: 10px;
                border-radius: 50%;
            }
            .cb-dots span:nth-child(1) {
                background: #ff5f57;
            }
            .cb-dots span:nth-child(2) {
                background: #febc2e;
            }
            .cb-dots span:nth-child(3) {
                background: #28c840;
            }
            .cb-b {
                padding: 18px;
                font-family: var(--fm);
                font-size: 12px;
                line-height: 1.9;
                overflow-x: auto;
                color: var(--warm);
            }
            .cb-b .k {
                color: var(--cyan);
            }
            .cb-b .s {
                color: var(--green);
            }
            .cb-b .cm {
                color: var(--gray);
                font-style: italic;
            }
            .cb-b .f {
                color: var(--purple);
            }
            /* Section CTA */
            .s-cta {
                padding: 60px 24px;
                text-align: center;
                position: relative;
                overflow: hidden;
                border-bottom: 1px solid rgba(255, 255, 255, 0.06);
                z-index: 1;
            }
            .s-cta::before {
                content: "";
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 400px;
                height: 300px;
                background: radial-gradient(circle, rgba(241, 255, 0, 0.06), transparent 60%);
            }
            .s-cta h3 {
                font-family: var(--fh);
                font-size: clamp(24px, 6vw, 36px);
                line-height: 1;
                letter-spacing: -1px;
                margin-bottom: 12px;
                position: relative;
            }
            .s-cta h3 .g {
                color: var(--green);
            }
            .s-cta p {
                position: relative;
                text-align: center;
                max-width: 400px;
                margin: 0 auto 24px;
            }
            .btn-r {
                display: flex;
                flex-direction: column;
                gap: 10px;
                align-items: center;
                position: relative;
            }
            .btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                font-family: var(--fd);
                font-weight: 700;
                font-size: 14px;
                letter-spacing: -0.3px;
                padding: 14px 28px;
                border-radius: 100px;
                border: none;
                cursor: pointer;
                transition: all 0.25s;
            }
            .btn-p {
                background: var(--green);
                color: var(--black);
            }
            .btn-p:hover {
                background: var(--green-l);
                transform: translateY(-1px);
            }
            .btn-s {
                background: rgba(255, 255, 255, 0.08);
                color: var(--white);
                border: 1px solid rgba(255, 255, 255, 0.1);
            }
            .btn-s:hover {
                background: rgba(255, 255, 255, 0.12);
            }
            /* Dtag */
            .dtg {
                display: inline-flex;
                font-family: var(--fm);
                font-size: 10px;
                padding: 3px 10px;
                border-radius: 4px;
                margin-right: 4px;
            }
            .dtg.gr {
                background: var(--green-g);
                color: var(--green);
            }
            .dtg.bl {
                background: var(--blue-g);
                color: var(--blue);
            }
            .dtg.pu {
                background: var(--purple-g);
                color: var(--purple);
            }
            .dtg.or {
                background: var(--orange-g);
                color: var(--orange);
            }
            .dtg.rd {
                background: rgba(239, 68, 68, 0.12);
                color: var(--red);
            }
            /* Desktop for new sections */
            @media (min-width: 768px) {
                .ph-hero {
                    padding: 120px 40px 80px;
                }
                .ps {
                    padding: 80px 40px;
                }
                .ps-inner {
                    max-width: 800px;
                    margin: 0 auto;
                }
                .cg {
                    grid-template-columns: 1fr 1fr;
                }
                .sg {
                    grid-template-columns: repeat(3, 1fr);
                }
                .btn-r {
                    flex-direction: row;
                    justify-content: center;
                }
            }
            @media (min-width: 1024px) {
                .ps-inner {
                    max-width: 840px;
                }
                .cg.c3 {
                    grid-template-columns: repeat(3, 1fr);
                }
                .cg.c4 {
                    grid-template-columns: repeat(4, 1fr);
                }
                .sg.s6 {
                    grid-template-columns: repeat(6, 1fr);
                }
            }

@media (max-width: 650px) {

            .hero-content {
  position: relative;
  z-index: 2;
  padding: 55px 15px 15px;
}
}