:root {
            --g: #173e2c;
            --g2: #24563c;
            --lime: #d8f36a;
            --cream: #f7f7f1;
            --ink: #18251d;
            --muted: #657168;
            --line: #e1e7df;
            --white: #fff
        }

        * {
            box-sizing: border-box
        }

        html {
            scroll-behavior: smooth
        }

        body {
            margin: 0;
            color: var(--ink);
            background: var(--cream);
            font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
            line-height: 1.55
        }

        a {
            color: inherit
        }

        .container {
            width: min(1080px, calc(100% - 36px));
            margin: auto
        }


        .brand {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 900;
            letter-spacing: -.04em
        }

        .brand-mark {
            display: grid;
            place-items: center;
            width: 38px;
            height: 38px;
            border-radius: 12px;
            background: var(--lime);
            color: var(--g)
        }

        .brand small {
            display: block;
            color: #d9e6dc;
            font-size: 11px;
            letter-spacing: .12em;
            text-transform: uppercase
        }

        .hero {
            padding: 48px 0 56px;
            color: white;
            background: radial-gradient(circle at 85% 10%, #386a48 0, transparent 34%), linear-gradient(135deg, #102d20, #1b4932)
        }

        .hero-grid {
            display: grid;
            grid-template-columns: 1.05fr .95fr;
            align-items: center;
            gap: 44px
        }

        .eyebrow {
            display: inline-block;
            padding: 7px 11px;
            border: 1px solid #668d5c;
            border-radius: 99px;
            color: var(--lime);
            font-size: 12px;
            font-weight: 850;
            letter-spacing: .1em;
            text-transform: uppercase
        }

        h1 {
            margin: 18px 0 16px;
            font-size: clamp(36px, 5vw, 58px);
            line-height: 1.04;
            letter-spacing: -.055em
        }

        .hero-copy {
            color: #e5eee7;
            font-size: clamp(17px, 2vw, 20px)
        }

        .hero-points {
            display: flex;
            flex-wrap: wrap;
            gap: 10px 16px;
            margin: 22px 0 26px;
            color: #e5eee7;
            font-size: 14px
        }

        .hero-points span:before {
            content: "✓";
            margin-right: 7px;
            color: var(--lime);
            font-weight: 900
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 100%;
            max-width: 430px;
            padding: 17px 22px;
            border: 0;
            border-radius: 12px;
            background: var(--lime);
            color: #142b1d;
            text-align: center;
            text-decoration: none;
            font-weight: 900;
            font-size: 15px;
            box-shadow: 0 10px 28px #0002;
            transition: .18s
        }

        .btn:hover {
            transform: translateY(-2px);
            filter: brightness(1.03)
        }

        .micro {
            width: 100%;
            max-width: 430px;
            margin: 11px 0 0;
            color: #d4e2d7;
            font-size: 12px;
            text-align: center;
        }

        .offer .micro {
         max-width: 100%;
         text-align: center;
        }       

        .visual-card {
            padding: 15px;
            border: 1px solid #ffffff2b;
            border-radius: 24px;
            background: #ffffff14;
            box-shadow: 0 30px 65px #0003;
            transform: rotate(1deg)
        }

        .visual-card img {
            display: block;
            width: 100%;
            border-radius: 15px;
            aspect-ratio: 4/3;
            object-fit: cover
        }

        .floating-tag {
            position: relative;
            float: right;
            margin: -35px -10px 0 0;
            padding: 13px 16px;
            border-radius: 13px;
            background: white;
            color: var(--g);
            font-size: 13px;
            font-weight: 850;
            box-shadow: 0 18px 50px #112d1e20
        }

        .floating-tag strong {
            display: block;
            font-size: 18px
        }

        section {
            padding: 66px 0
        }

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

        h2 {
            margin: 0 0 14px;
            font-size: clamp(29px, 4vw, 43px);
            line-height: 1.12;
            letter-spacing: -.045em
        }

        .lead {
            margin: 0;
            color: var(--muted);
            font-size: 17px
        }

        .mechanism {
            background: white
        }

        .mechanism-grid {
            display: grid;
            grid-template-columns: .9fr 1.1fr;
            gap: 42px;
            align-items: center
        }

        .mechanism-copy p {
            color: var(--muted)
        }

        .emphasis {
            padding: 17px 18px;
            border-left: 4px solid #9abf3c;
            border-radius: 0 12px 12px 0;
            background: #f3f8e9;
            font-weight: 800
        }

        .steps {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 13px
        }

        .step {
            min-height: 150px;
            padding: 20px;
            border: 1px solid var(--line);
            border-radius: 18px;
            background: #fbfcf8
        }

        .num {
            display: grid;
            place-items: center;
            width: 37px;
            height: 37px;
            margin-bottom: 15px;
            border-radius: 11px;
            background: var(--g);
            color: white;
            font-weight: 900
        }

        .step h3 {
            margin: 0 0 5px;
            font-size: 17px
        }

        .step p {
            margin: 0;
            color: var(--muted);
            font-size: 14px
        }

        .pain {
            background: #edf2e8
        }

        .pain-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            margin-top: 28px
        }

        .pain-card {
            padding: 22px;
            border: 1px solid #dce5d8;
            border-radius: 16px;
            background: #ffffffc7
        }

        .pain-icon {
            font-size: 25px
        }

        .pain-card h3 {
            margin: 9px 0 6px;
            font-size: 18px
        }

        .pain-card p {
            margin: 0;
            color: var(--muted);
            font-size: 14px
        }

        .method {
            background: white
        }

        .method-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 16px
        }

        .method-card {
            display: flex;
            gap: 15px;
            padding: 22px;
            border: 1px solid var(--line);
            border-radius: 17px;
            background: #fff
        }

        .method-icon {
            flex: 0 0 44px;
            display: grid;
            place-items: center;
            width: 44px;
            height: 44px;
            border-radius: 13px;
            background: #eef5e6;
            font-size: 22px
        }

        .method-card h3 {
            margin: 0 0 6px;
            font-size: 18px
        }

        .method-card p {
            margin: 0;
            color: var(--muted);
            font-size: 14px
        }

        .deliverables {
            background: #f0f3eb
        }

        .deliverable-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 22px
        }

        .deliverable {
            overflow: hidden;
            border: 1px solid #dce4d8;
            border-radius: 22px;
            background: white;
            box-shadow: 0 12px 34px #19322012
        }

        .mockup {
            min-height: 245px;
            display: grid;
            place-items: center;
            padding: 24px;
            background: linear-gradient(135deg, #dfead6, #f8f9f4)
        }

        
        
            .video-mockup {
            min-height: 245px;
            padding: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #dfead6, #f8f9f4);
            }

            .video-thumbnail {
            display: block;
            width: 100%;
            height: auto;
            object-fit: contain;
            border-radius: 10px;
            }



        .sheet-image {
            width: 100%;
            height: 245px;
            padding: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            background: linear-gradient(135deg, #dfead6, #f8f9f4);
        }

        .sheet-image img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            border-radius: 12px;
        }

        .laptop {
            width: 100%;
            max-width: 360px;
            padding: 9px;
            border: 2px solid #26392c;
            border-radius: 13px 13px 7px 7px;
            background: #202b23;
            box-shadow: 0 16px 26px #0002
        }

        .screen {
            min-height: 170px;
            padding: 16px;
            border-radius: 6px;
            background: white;
            color: var(--ink)
        }

        .screen-top {
            display: flex;
            justify-content: space-between;
            padding-bottom: 10px;
            border-bottom: 1px solid #e3e8e0;
            font-size: 11px;
            font-weight: 850
        }

        .play {
            display: grid;
            place-items: center;
            width: 56px;
            height: 56px;
            margin: 22px auto 10px;
            border-radius: 50%;
            background: var(--g);
            color: white;
            font-size: 22px;
            box-shadow: 0 0 0 8px #eaf1e5
        }

        .screen-caption {
            text-align: center;
            color: var(--muted);
            font-size: 11px
        }

        .laptop-base {
            width: 110%;
            height: 9px;
            margin-left: -5%;
            border-radius: 0 0 9px 9px;
            background: #4b574e
        }

        .sheet-window {
            width: 100%;
            max-width: 370px;
            padding: 13px;
            border: 1px solid #d9e1d6;
            border-radius: 14px;
            background: white;
            box-shadow: 0 18px 28px #0002;
            transform: rotate(-1deg)
        }

        .sheet-title {
            margin: 0 0 11px;
            font-size: 14px;
            font-weight: 900
        }

        .sheet-grid {
            display: grid;
            grid-template-columns: 1.1fr 1fr 1fr;
            gap: 4px;
            font-size: 10px
        }

        .sheet-grid span {
            padding: 8px 5px;
            border-radius: 4px;
            background: #f0f4ed
        }

        .sheet-grid span:nth-child(-n+3) {
            background: #24563c;
            color: white;
            font-weight: 800
        }

        .sheet-summary {
            display: flex;
            gap: 6px;
            margin-top: 10px
        }

        .sheet-summary div {
            flex: 1;
            padding: 9px 7px;
            border-radius: 7px;
            background: #eff6e7
        }

        .sheet-summary small {
            display: block;
            color: var(--muted);
            font-size: 9px
        }

        .sheet-summary strong {
            font-size: 12px
        }

        .deliverable-body {
            padding: 23px
        }

        .deliverable-body h3 {
            margin: 0 0 8px;
            font-size: 22px
        }

        .deliverable-body p {
            margin: 0;
            color: var(--muted);
            font-size: 15px
        }

        .offer {
            color: white;
            background: radial-gradient(circle at 15% 10%, #356447, transparent 35%), linear-gradient(135deg, #102d20, #173e2c)
        }

        .offer-card {
            max-width: 700px;
            margin: auto;
            padding: 34px;
            border: 1px solid #ffffff26;
            border-radius: 24px;
            background: #ffffff12;
            text-align: center
        }

        .offer .kicker {
            color: var(--lime)
        }

        .offer .lead {
            color: #e0e9e1
        }

        .old-price {
            margin: 24px 0 0;
            color: #d6e0d7
        }

        .price {
            margin: 0;
            color: var(--lime);
            font-size: clamp(48px, 8vw, 72px);
            font-weight: 950;
            letter-spacing: -.06em;
            line-height: 1.05
        }

        .offer-list {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 10px 20px;
            margin: 20px 0 25px;
            color: #e0e9e1;
            font-size: 14px
        }

        .offer-list span:before {
            content: "✓";
            margin-right: 7px;
            color: var(--lime);
            font-weight: 900
        }

        .faq {
            background: white
        }

        .faq-list {
            max-width: 800px;
            margin: auto
        }

        details {
            padding: 18px 0;
            border-bottom: 1px solid var(--line)
        }

        summary {
            cursor: pointer;
            font-weight: 850;
            list-style: none
        }

        summary::-webkit-details-marker {
            display: none
        }

        summary:after {
            content: "+";
            float: right;
            color: var(--g2);
            font-size: 22px;
            line-height: 1
        }

        details[open] summary:after {
            content: "−"
        }

        details p {
            margin: 12px 0 0;
            color: var(--muted)
        }

        .final-cta {
            padding: 54px 0;
            background: #e5eddd;
            text-align: center
        }

        .final-cta p {
            max-width: 680px;
            margin: 0 auto 22px;
            color: var(--muted);
            font-size: 17px
        }

        footer {
            padding: 24px 0 34px;
            color: #d5e1d7;
            background: #10271b;
            font-size: 12px
        }

        .footer-inner {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 20px
        }

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

        .footer-links a {
            color: #d5e1d7
        }

        .disclaimer {
            max-width: 540px;
            color: #aebfb2
        }

        @media(max-width:780px) {
            .hero {
                padding: 38px 0 42px
            }

            .hero-grid,
            .mechanism-grid {
                grid-template-columns: 1fr;
                gap: 30px
            }

            .hero-art {
                max-width: 540px;
                margin: auto
            }

            section {
                padding: 48px 0
            }

            .pain-grid {
                grid-template-columns: 1fr
            }

            .method-grid,
            .deliverable-grid {
                grid-template-columns: 1fr
            }

            .mockup {
                min-height: 220px
            }

            .footer-inner {
                flex-direction: column
            }
        }

        @media(max-width:420px) {
            .container {
                width: calc(100% - 26px)
            }

            h1 {
                font-size: 36px
            }

            .steps {
                gap: 9px
            }

            .step {
                padding: 15px;
                min-height: 150px
            }

            .step h3 {
                font-size: 15px
            }

            .step p {
                font-size: 13px
            }

            .offer-card {
                padding: 26px 18px
            }
        }