:root{
            --bg:#f8f3ea;
            --bg-alt:#fbf7ef;
            --bg-soft:#fffdfa;
            --bg-soft-2:#fff9f1;
            --ink:#2c2318;
            --ink-soft:#4a3b2b;
            --muted:#7c6b57;
            --line:#e9dfd0;
            --line-strong:#decfb7;
            --brand:#8f6627;
            --brand-2:#a97a31;
            --accent:#d2a04b;
            --accent-soft:#fff4de;
            --gold-line:#ecd9ab;
            --success:#5f7f42;
            --radius-xl:34px;
            --radius-lg:28px;
            --radius-md:22px;
            --radius-sm:16px;
            --shadow-xs:0 8px 18px rgba(44,35,24,.04);
            --shadow-sm:0 12px 28px rgba(44,35,24,.06);
            --shadow:0 22px 52px rgba(44,35,24,.08);
            --shadow-lg:0 34px 84px rgba(44,35,24,.10);
            --max:1240px;
        }

        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;
            color:var(--ink);
            background:
                radial-gradient(circle at top left, rgba(210,160,75,.15), transparent 24%),
                radial-gradient(circle at top right, rgba(188,146,76,.10), transparent 22%),
                radial-gradient(circle at 50% 0%, rgba(255,255,255,.72), transparent 36%),
                linear-gradient(180deg,#f8f3ea 0%,#fbf7ef 26%,#fdfaf5 62%,#ffffff 100%);
            line-height:1.58;
            -webkit-font-smoothing:antialiased;
            text-rendering:optimizeLegibility;
        }

        img{display:block;max-width:100%}
        a{text-decoration:none;color:inherit}
        button{font:inherit}
        iframe{display:block;width:100%;border:0}
        .container{width:min(calc(100% - 32px), var(--max));margin-inline:auto}
        .section{padding:38px 0}

        .btn{
            min-height:52px;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:10px;
            padding:0 22px;
            border-radius:16px;
            border:1px solid transparent;
            font-weight:800;
            transition:.22s ease;
            cursor:pointer;
            white-space:nowrap;
            text-align:center;
        }
        .btn:hover{transform:translateY(-1px)}
        .btn-primary{
            background:linear-gradient(180deg,#c79a4a 0%,#9d6f2a 100%);
            color:#fff;
            border-color:#a97730;
            box-shadow:0 18px 34px rgba(157,111,42,.22);
        }
        .btn-secondary{
            background:linear-gradient(180deg,#fffaf1 0%,#f6ead0 100%);
            color:#7a5822;
            border-color:#e6d1a8;
            box-shadow:var(--shadow-xs);
        }

        .card{
            background:linear-gradient(180deg,#fffdfa 0%,#fff8ee 100%);
            border:1px solid var(--line);
            border-radius:var(--radius-lg);
            box-shadow:var(--shadow);
        }

        .section-shell{
            padding:28px;
            background:linear-gradient(180deg,rgba(255,253,250,.98) 0%,rgba(255,248,238,.98) 100%);
            border:1px solid #ebe0cf;
            border-radius:32px;
            box-shadow:0 24px 60px rgba(44,35,24,.07);
        }

        .kicker{
            display:inline-block;
            margin-bottom:10px;
            font-size:13px;
            font-weight:900;
            letter-spacing:.11em;
            text-transform:uppercase;
            color:var(--brand);
        }

        .section-head{
            display:flex;
            align-items:end;
            justify-content:space-between;
            gap:18px;
            margin-bottom:24px;
        }
        .section-head h2{
            margin:0;
            font-size:clamp(30px,4vw,46px);
            line-height:1.03;
            letter-spacing:-.035em;
            color:#302517;
        }
        .section-head p{
            margin:8px 0 0;
            max-width:760px;
            color:var(--muted);
        }

        .section-detail{
            padding:28px;
            margin-bottom:18px;
            background:linear-gradient(180deg,#fffdfa 0%,#fff8ef 100%);
            border:1px solid #ebe0cf;
        }
        .section-detail p{
            margin:0 0 16px;
            color:var(--muted);
        }
        .section-detail p:last-child{margin-bottom:0}

        /* =========================================================
           HERO
        ========================================================== */
        .hero{padding:22px 0 18px}
        .hero-shell{
            position:relative;
            overflow:hidden;
            border-radius:var(--radius-xl);
            border:1px solid #e8dcc8;
            background:
                radial-gradient(circle at 100% 0%, rgba(210,160,75,.10), transparent 25%),
                radial-gradient(circle at 0% 100%, rgba(185,142,69,.12), transparent 28%),
                linear-gradient(135deg,#fffdfa 0%,#fff7eb 52%,#fffdf9 100%);
            box-shadow:var(--shadow-lg);
        }
        .hero-grid{
            display:grid;
            grid-template-columns:1.02fr .98fr;
            gap:34px;
            align-items:center;
            padding:42px;
        }
        .hero-badge{
            display:inline-flex;
            align-items:center;
            gap:10px;
            min-height:40px;
            padding:0 14px;
            border-radius:999px;
            background:linear-gradient(180deg,#fff7e7 0%,#ffefcf 100%);
            border:1px solid #efd49d;
            color:#7a5a17;
            font-size:13px;
            font-weight:900;
            margin-bottom:18px;
        }
        .hero h1{
            margin:0;
            font-size:clamp(36px,5vw,62px);
            line-height:1.01;
            letter-spacing:-.05em;
            color:#2a2117;
        }
        .hero .lead{
            margin:16px 0 0;
            max-width:720px;
            color:var(--muted);
            font-size:17px;
        }
        .hero-chips{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-top:22px;
        }
        .hero-chip{
            min-height:40px;
            display:inline-flex;
            align-items:center;
            padding:0 14px;
            border-radius:999px;
            background:linear-gradient(180deg,#fffdfa 0%,#fff8ef 100%);
            border:1px solid #e7dcc9;
            box-shadow:var(--shadow-xs);
            color:#5a4630;
            font-size:14px;
            font-weight:800;
        }
        .hero-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            margin-top:26px;
        }

        .hero-stage{
            position:relative;
            padding:18px;
            border-radius:28px;
            border:1px solid #ebe0cf;
            background:linear-gradient(180deg,#fffdfa 0%,#fff8ef 100%);
            box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
        }
        .hero-stage::before{
            content:"";
            position:absolute;
            inset:14px;
            border:1px dashed rgba(169,122,49,.18);
            border-radius:22px;
            pointer-events:none;
        }
        .hero-stage img{
            width:100%;
            border-radius:20px;
            box-shadow:0 20px 40px rgba(44,35,24,.14);
        }

        /* =========================================================
           OVERVIEW + PRODUCT INFO
        ========================================================== */
        .about-grid{
            display:grid;
            grid-template-columns:1fr;
            gap:18px;
        }
        .info-card{
            padding:28px;
            border:1px solid #ebe0cf;
            margin-bottom:22px;
        }
        .info-grid{
            display:grid;
            grid-template-columns:repeat(3,1fr);
            gap:14px;
        }
        .info-item{
            padding:18px;
            border-radius:18px;
            border:1px solid #ebdfcd;
            background:linear-gradient(180deg,#fffdfa 0%,#fff8ef 100%);
        }
        .info-item span{
            display:block;
            margin-bottom:6px;
            color:#8a775f;
            font-size:13px;
            font-weight:800;
            letter-spacing:.04em;
            text-transform:uppercase;
        }
        .info-item strong{
            display:block;
            font-size:16px;
            line-height:1.35;
            color:#33271a;
        }
        .price-line{
            display:flex;
            gap:8px;
            flex-wrap:wrap;
            align-items:center;
        }
        .price-old{
            color:#9a8b79;
            text-decoration:line-through;
            font-weight:700;
            font-style:normal;
        }
        .price-new{
            color:#7a8e46;
            font-size:20px;
            font-weight:900;
            font-style:normal;
        }

        /* =========================================================
           HIGHLIGHTS
        ========================================================== */
        .highlights-grid{
            display:grid;
            grid-template-columns:repeat(3,1fr);
            gap:18px;
        }
        .highlight-card{
            padding:22px;
            background:linear-gradient(180deg,#fffdfa 0%,#fff8ee 100%);
            border:1px solid #ebe0cf;
        }
        .highlight-head{
            display:flex;
            align-items:flex-start;
            gap:14px;
        }
        .highlight-icon{
            width:52px;
            height:52px;
            border-radius:18px;
            display:grid;
            place-items:center;
            background:linear-gradient(135deg,#fff4de 0%,#f7e4bb 100%);
            color:#9a6f2d;
            font-size:22px;
            flex:0 0 auto;
        }
        .highlight-card h3{
            margin:0 0 8px;
            font-size:19px;
            line-height:1.2;
            color:#2f2417;
        }
        .highlight-card p{
            margin:0;
            color:var(--muted);
        }

        /* =========================================================
           SCREENSHOT SLIDER
        ========================================================== */
        .showcase-shell{
            padding:18px;
            overflow:hidden;
            background:linear-gradient(180deg,#fffdfa 0%,#fff8ef 100%);
            border:1px solid #ebe0cf;
        }
        .slider-window{
            overflow:hidden;
            border-radius:24px;
        }
        .slider-track{
            display:flex;
            transition:transform .45s ease;
        }
        .shot-card{
            min-width:100%;
            overflow:hidden;
            border-radius:24px;
            border:1px solid #eadfce;
            background:#fff;
            box-shadow:var(--shadow-xs);
        }
        .shot-card img{
            width:100%;
            aspect-ratio:16/9;
            object-fit:cover;
            background:#f2ede4;
        }
        .slider-controls{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
            margin-top:16px;
        }
        .slider-buttons{
            display:flex;
            gap:10px;
        }
        .slider-btn{
            width:46px;
            height:46px;
            display:grid;
            place-items:center;
            border:none;
            border-radius:50%;
            background:linear-gradient(180deg,#fffaf1 0%,#f7ecd4 100%);
            border:1px solid #e2cfaa;
            color:#855f24;
            font-size:20px;
            font-weight:900;
            cursor:pointer;
            box-shadow:var(--shadow-xs);
        }
        .slider-dots{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
            align-items:center;
            justify-content:center;
        }
        .slider-dots button{
            width:10px;
            height:10px;
            border:none;
            border-radius:999px;
            padding:0;
            background:#dbcaa7;
            cursor:pointer;
        }
        .slider-dots button.active{
            width:30px;
            background:linear-gradient(180deg,#c79a4a 0%,#9d6f2a 100%);
        }

        /* =========================================================
           VIDEO DEMO
        ========================================================== */
        .video-shell{
            padding:18px;
            background:linear-gradient(180deg,#fffdfa 0%,#fff8ef 100%);
            border:1px solid #ebe0cf;
        }
        .video-grid{
            display:grid;
            grid-template-columns:1fr;
            gap:18px;
            align-items:stretch;
        }
        .video-frame{
            overflow:hidden;
            border-radius:24px;
            border:1px solid #eadfce;
            background:#000;
            box-shadow:var(--shadow-xs);
        }
        .video-frame iframe{
            aspect-ratio:16/9;
            min-height:100%;
        }
        .video-copy{
            padding:26px;
            border-radius:24px;
            border:1px solid #ebe0cf;
            background:linear-gradient(180deg,#fffdfa 0%,#fff8ef 100%);
            box-shadow:var(--shadow-xs);
            display:flex;
            flex-direction:column;
            justify-content:center;
        }
        .video-copy small{
            display:block;
            margin-bottom:8px;
            font-size:12px;
            font-weight:900;
            letter-spacing:.08em;
            text-transform:uppercase;
            color:var(--brand);
        }
        .video-copy h3{
            margin:0 0 10px;
            font-size:28px;
            line-height:1.08;
            color:#302517;
        }
        .video-copy p{
            margin:0;
            color:var(--muted);
        }

        /* =========================================================
           SAMPLE TABS
        ========================================================== */
        .samples-shell{
            overflow:hidden;
            padding:0;
            background:linear-gradient(180deg,#fffdfa 0%,#fff8ef 100%);
            border:1px solid #ebe0cf;
        }
        .samples-top{
            padding:22px 22px 16px;
            border-bottom:1px solid #eee1cf;
            background:linear-gradient(180deg,#fffdfa 0%,#fff6e8 100%);
        }
        .sample-tabs{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-bottom:10px;
        }
        .sample-tab{
            min-height:46px;
            padding:0 18px;
            border:none;
            border-radius:999px;
            background:#fff;
            border:1px solid #e5d7c0;
            color:#6b5538;
            font-weight:900;
            cursor:pointer;
            box-shadow:var(--shadow-xs);
        }
        .sample-tab.active{
            background:linear-gradient(180deg,#c79a4a 0%,#9d6f2a 100%);
            border-color:#a97730;
            color:#fff;
        }
        .samples-top p{
            margin:0;
            color:var(--muted);
        }
        .sample-panel{
            display:none;
            padding:22px;
        }
        .sample-panel.active{
            display:block;
        }
        .sample-feature{
            display:grid;
            grid-template-columns:1.02fr .98fr;
            gap:18px;
            align-items:stretch;
        }
        .sample-copy,
        .sample-actions-box{
            padding:24px;
            border:1px solid #ebe0cf;
            border-radius:24px;
            background:linear-gradient(180deg,#fffdfa 0%,#fff8ef 100%);
            box-shadow:var(--shadow-xs);
        }
        .sample-badge{
            display:inline-flex;
            align-items:center;
            min-height:32px;
            padding:0 12px;
            border-radius:999px;
            background:#f7e9ca;
            color:#805a20;
            font-size:12px;
            font-weight:900;
            letter-spacing:.05em;
            text-transform:uppercase;
            margin-bottom:14px;
        }
        .sample-copy h3{
            margin:0 0 10px;
            font-size:24px;
            line-height:1.15;
            color:#302517;
        }
        .sample-copy p{
            margin:0;
            color:var(--muted);
        }
        .sample-actions-box h4{
            margin:0 0 10px;
            font-size:18px;
            color:#302517;
        }
        .sample-actions-box p{
            margin:0 0 16px;
            color:var(--muted);
        }
        .sample-actions{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:10px;
        }
        .sample-actions a{
            min-height:44px;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            border-radius:14px;
            border:1px solid #e2d1b2;
            background:linear-gradient(180deg,#fffaf1 0%,#f7ecd4 100%);
            color:#7b5821;
            font-size:14px;
            font-weight:900;
            text-align:center;
        }
        .sample-actions a.primary{
            background:linear-gradient(180deg,#c79a4a 0%,#9d6f2a 100%);
            color:#fff;
            border-color:#a97730;
        }

        /* =========================================================
           CORE MODULES
        ========================================================== */
        .module-grid{
            display:grid;
            grid-template-columns:repeat(3,1fr);
            gap:18px;
        }
        .module-card{
            padding:24px;
            background:linear-gradient(180deg,#fffdfa 0%,#fff8ee 100%);
            border:1px solid #ebe0cf;
        }
        .module-card h3{
            margin:0 0 10px;
            font-size:22px;
            line-height:1.15;
            color:#302517;
        }
        .module-card p{
            margin:0 0 14px;
            color:var(--muted);
        }
        .module-list{
            margin:0;
            padding-left:18px;
            display:grid;
            gap:8px;
        }
        .module-list li{color:#5a4630}

        /* =========================================================
           TAB-BASED CONTENT EXPLORER
        ========================================================== */
        .toc-shell{
            padding:22px;
            background:linear-gradient(180deg,#fffdfa 0%,#fff8ef 100%);
            border:1px solid #ebe0cf;
        }
        .toc-tabs{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-bottom:18px;
        }
        .toc-tab{
            min-height:46px;
            padding:0 18px;
            border:none;
            border-radius:999px;
            background:#fff;
            border:1px solid #e5d7c0;
            color:#6b5538;
            font-weight:900;
            cursor:pointer;
            box-shadow:var(--shadow-xs);
        }
        .toc-tab.active{
            background:linear-gradient(180deg,#c79a4a 0%,#9d6f2a 100%);
            border-color:#a97730;
            color:#fff;
        }
        .toc-panel{
            display:none;
            padding:24px;
            border-radius:24px;
            border:1px solid #ebe0cf;
            background:linear-gradient(180deg,#fffdfa 0%,#fff8ef 100%);
            box-shadow:var(--shadow-xs);
        }
        .toc-panel.active{
            display:block;
        }
        .toc-panel h3{
            margin:0 0 8px;
            font-size:26px;
            line-height:1.12;
            color:#302517;
        }
        .toc-panel p{
            margin:0 0 16px;
            color:var(--muted);
        }
        .content-columns{
            display:grid;
            grid-template-columns:repeat(2,1fr);
            gap:10px 18px;
            margin:0;
            padding-left:18px;
        }
        .content-columns li{color:#5a4630}

        /* =========================================================
           RESPONSIVE
        ========================================================== */
        @media (max-width:1080px){
            .hero-grid,
            .video-grid,
            .sample-feature,
            .module-grid{
                grid-template-columns:1fr;
            }
            .info-grid{
                grid-template-columns:repeat(2,1fr);
            }
        }

        @media (max-width:880px){
            .highlights-grid{grid-template-columns:1fr}
            .info-grid{grid-template-columns:1fr}
        }

        @media (max-width:760px){
            .section{padding:28px 0}
            .hero-grid,
            .info-card,
            .showcase-shell,
            .video-shell,
            .toc-shell,
            .section-detail,
            .section-shell{
                padding-left:20px;
                padding-right:20px;
            }
            .hero-grid{padding-top:26px;padding-bottom:26px}
            .section-head{
                flex-direction:column;
                align-items:start;
            }
            .content-columns{
                grid-template-columns:1fr;
            }
        }

        @media (max-width:640px){
            .hero-actions{
                flex-direction:column;
                align-items:stretch;
            }
            .btn{width:100%}
            .sample-actions{grid-template-columns:1fr}
        }

        @media (prefers-reduced-motion: reduce){
            html{scroll-behavior:auto}
            *,*::before,*::after{animation:none !important;transition:none !important}
        }