:root{
            --bg:#fffaf4;
            --surface:#fffdf8;
            --text:#2f2417;
            --heading:#8a5a1c;
            --muted:#7b6955;
            --line:#eadcc7;
            --line-strong:#dcc8aa;
            --primary:#c07f22;
            --primary-dark:#945f1a;
            --success:#7a5a20;
            --shadow:0 14px 34px rgba(92,65,29,.08);
            --shadow-soft:0 8px 18px rgba(92,65,29,.05);
            --radius-lg:24px;
            --max:1200px;
        }

        *{box-sizing:border-box}

        html{
            scroll-behavior:smooth;
        }

        html,
        body{
            width:100%;
            max-width:100%;
            overflow-x:hidden;
        }

        body{
            margin:0;
            min-width:320px;
            font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
            color:var(--text);
            background:
                radial-gradient(circle at top left, rgba(192,127,34,.08), transparent 24%),
                radial-gradient(circle at top right, rgba(239,179,92,.10), transparent 22%),
                linear-gradient(180deg, #fffdf9 0%, #fdf6ec 44%, #fffaf4 100%);
            line-height:1.6;
        }

        img,
        video,
        iframe,
        svg,
        canvas{
            display:block;
            max-width:100%;
        }

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

        button{
            font:inherit;
        }

        main{
            padding:18px 0 34px;
        }

        section{
            padding:18px 0;
        }

        .container{
            width:min(var(--max), calc(100% - 24px));
            margin-inline:auto;
            min-width:0;
        }

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

        .section-card{
            padding:22px;
        }

        .section-head{
            display:flex;
            justify-content:space-between;
            align-items:flex-start;
            gap:12px;
            flex-wrap:wrap;
            margin-bottom:16px;
            min-width:0;
        }

        .section-head > *{
            min-width:0;
        }

        .section-head h2{
            margin:0;
            font-size:clamp(22px,3vw,30px);
            line-height:1.15;
            letter-spacing:-.02em;
            overflow-wrap:anywhere;
            color:var(--heading);
        }

        .section-head p{
            margin:6px 0 0;
            max-width:72ch;
            color:var(--muted);
            overflow-wrap:anywhere;
        }

        .btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:8px;
            min-height:46px;
            padding:12px 16px;
            border-radius:12px;
            border:1px solid transparent;
            font-weight:800;
            font-size:15px;
            transition:.2s ease;
            cursor:pointer;
        }

        .btn-primary{
            color:#fff;
            background:linear-gradient(180deg,var(--primary),var(--primary-dark));
            box-shadow:0 10px 24px rgba(192,127,34,.22);
        }

        .btn-primary:hover{
            transform:translateY(-1px);
        }

        .btn-outline{
            background:linear-gradient(180deg,#fffaf0 0%,#fff2d9 100%);
            color:var(--primary-dark);
            border-color:var(--line);
        }

        .btn-outline:hover{
            border-color:var(--line-strong);
            color:var(--primary-dark);
            background:#fff7ea;
        }

        /* =========================================================
           HERO
        ========================================================== */
        .page-header{
            background:
                radial-gradient(900px 260px at 10% 0%, rgba(192,127,34,.10), transparent 60%),
                radial-gradient(850px 260px at 90% 10%, rgba(227,165,72,.10), transparent 60%),
                linear-gradient(180deg,#fffdf8 0%,#fff7ea 100%);
            border-bottom:1px solid var(--line);
            padding:22px 0 28px;
        }

        .hero-wrap{
            display:grid;
            grid-template-columns:1.12fr .88fr;
            gap:18px;
            align-items:stretch;
            min-width:0;
        }

        .hero-left,
        .hero-right{
            min-width:0;
            padding:22px;
        }

        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:8px 12px;
            border-radius:999px;
            border:1px solid #f2dec2;
            background:linear-gradient(180deg,#fff5e6,#fff0dc);
            color:var(--primary-dark);
            font-size:13px;
            font-weight:800;
        }

        h1{
            margin:14px 0 10px;
            font-size:clamp(28px,4vw,44px);
            line-height:1.08;
            letter-spacing:-.03em;
            overflow-wrap:anywhere;
            color:var(--heading);
        }

        .hero-desc{
            margin:0;
            max-width:64ch;
            color:var(--muted);
            font-size:16px;
            overflow-wrap:anywhere;
        }

        .cta-row{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-top:14px;
            min-width:0;
        }

        .quick-links{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
            margin-top:14px;
            min-width:0;
            -webkit-overflow-scrolling:touch;
            scrollbar-width:thin;
        }

        .quick-links a{
            flex:0 0 auto;
            white-space:nowrap;
            padding:8px 12px;
            border:1px solid var(--line);
            border-radius:999px;
            background:#fffaf0;
            font-size:13px;
            font-weight:700;
        }

        .quick-links a:hover{
            border-color:var(--line-strong);
            color:var(--primary-dark);
            background:#fff7ea;
        }

        .product-visual{
            position:relative;
            min-height:290px;
            display:grid;
            place-items:center;
            border:1px solid var(--line);
            border-radius:18px;
            overflow:hidden;
            background:linear-gradient(145deg,#fff9ee,#fff3df);
        }

        .product-visual img{
            width:100%;
            height:100%;
            object-fit:contain;
            padding:16px;
        }

        .ribbon{
            position:absolute;
            top:12px;
            right:12px;
            z-index:2;
            padding:6px 10px;
            border-radius:999px;
            border:1px solid #eed8b6;
            background:#fff3df;
            color:var(--success);
            font-size:12px;
            font-weight:900;
        }

        /* =========================================================
           ABOUT
        ========================================================== */
        .intro-card{
            border:1px solid var(--line);
            border-radius:18px;
            background:linear-gradient(180deg,#fffdf8,#fff7ea);
            padding:16px;
        }

        .intro-title{
            margin:0 0 12px;
            font-size:17px;
            font-weight:800;
            line-height:1.55;
            overflow-wrap:anywhere;
            color:var(--heading);
        }

        .quote-bar{
            border:1px solid #f0ddc0;
            background:#fff8ec;
            border-radius:16px;
            padding:14px;
        }

        .intro-quote{
            margin:0;
            color:#5c4738;
            font-size:14px;
            line-height:1.75;
            font-weight:600;
            overflow-wrap:anywhere;
        }

        /* =========================================================
           PRODUCT INFORMATION
        ========================================================== */
        .info-compact{
            display:grid;
            gap:12px;
        }

        .ic-block{
            border:1px solid var(--line);
            border-radius:18px;
            background:linear-gradient(180deg,#fffdf8,#fff7ea);
            padding:14px;
        }

        .ic-title{
            margin-bottom:10px;
            font-size:15px;
            font-weight:900;
            color:var(--heading);
        }

        .ic-price-row{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:10px;
            min-width:0;
        }

        .ic-pillbox{
            display:grid;
            gap:4px;
            min-width:0;
            padding:12px;
            border:1px solid var(--line);
            border-radius:16px;
            background:linear-gradient(180deg,#fffdf8 0%,#fff7e8 100%);
        }

        .ic-label{
            font-size:12px;
            font-weight:900;
            color:var(--muted);
        }

        .ic-value{
            font-size:20px;
            font-weight:900;
            line-height:1.2;
            overflow-wrap:anywhere;
            color:var(--primary-dark);
        }

        .ic-value small{
            font-size:12px;
            color:var(--muted);
            font-weight:800;
        }

        .ic-note{
            font-size:12px;
            color:var(--muted);
        }

        .strike{
            text-decoration:line-through;
            color:#94a3b8;
            font-weight:800;
            font-size:14px;
            margin-right:6px;
        }

        .ic-grid{
            display:grid;
            grid-template-columns:repeat(3, minmax(0, 1fr));
            gap:10px;
            min-width:0;
        }

        .ic-card{
            min-width:0;
            border:1px solid var(--line);
            border-radius:16px;
            background:linear-gradient(180deg,#fffdf8 0%,#fff7ea 100%);
            padding:12px;
            display:grid;
            gap:4px;
        }

        .ic-k{
            font-size:12px;
            font-weight:900;
            color:var(--muted);
        }

        .ic-v{
            font-size:13.5px;
            font-weight:800;
            line-height:1.45;
            overflow-wrap:anywhere;
        }

        /* =========================================================
           VIDEO DEMO
        ========================================================== */
        .demo-grid{
            display:grid;
            grid-template-columns:1.06fr .94fr;
            gap:14px;
            align-items:stretch;
            min-width:0;
        }

        .media-box{
            position:relative;
            min-width:0;
            min-height:260px;
            overflow:hidden;
            border:1px solid var(--line);
            border-radius:18px;
            background:#1b160f;
            color:#fff;
        }

        .media-box iframe{
            width:100%;
            height:100%;
            min-height:260px;
            border:0;
        }

        .play-badge{
            position:absolute;
            top:12px;
            left:12px;
            z-index:2;
            padding:6px 10px;
            border-radius:999px;
            border:1px solid rgba(255,255,255,.22);
            background:rgba(47,36,23,.55);
            font-size:12px;
            backdrop-filter:blur(6px);
        }

        .demo-copy{
            min-width:0;
            border:1px solid var(--line);
            border-radius:18px;
            background:linear-gradient(180deg,#fffdf8 0%,#fff7ea 100%);
            padding:18px;
            display:grid;
            align-content:start;
            gap:10px;
        }

        .demo-copy h3{
            margin:0;
            font-size:21px;
            line-height:1.2;
            overflow-wrap:anywhere;
            color:var(--heading);
        }

        .demo-copy p{
            margin:0;
            color:var(--muted);
            overflow-wrap:anywhere;
        }

        .demo-copy ul{
            margin:4px 0 0;
            padding-left:18px;
            color:#5c4738;
        }

        .demo-copy li{
            margin:5px 0;
        }

        /* =========================================================
           SCREENSHOTS
        ========================================================== */
        .shots-slider{
            min-width:0;
            outline:none;
        }

        .shots-viewport{
            overflow:hidden;
            border:1px solid var(--line);
            border-radius:20px;
            background:linear-gradient(180deg,#fffdf8 0%,#fff7ea 100%);
            box-shadow:var(--shadow-soft);
        }

        .shots-track{
            display:flex;
            transition:transform .45s ease;
            will-change:transform;
        }

        .shots-slide{
            min-width:100%;
            padding:16px;
            display:grid;
            gap:12px;
            background:linear-gradient(180deg,#fffdf8 0%,#fff7ea 100%);
        }

        .shots-frame{
            position:relative;
            aspect-ratio:16 / 10;
            border:1px solid var(--line);
            border-radius:18px;
            overflow:hidden;
            background:
                radial-gradient(circle at top right, rgba(192,127,34,.08), transparent 30%),
                linear-gradient(180deg,#fffdf8,#fff7ea);
        }

        .shots-frame img{
            width:100%;
            height:100%;
            object-fit:contain;
            background:#fffdf8;
            padding:10px;
        }

        .shots-caption{
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:12px;
            min-width:0;
        }

        .shots-caption h3{
            margin:0;
            font-size:18px;
            line-height:1.3;
            overflow-wrap:anywhere;
            color:var(--heading);
        }

        .shots-count{
            flex:0 0 auto;
            padding:6px 10px;
            border:1px solid #f2dec2;
            border-radius:999px;
            background:#fff8ec;
            color:var(--primary-dark);
            font-size:12px;
            font-weight:800;
        }

        .shots-controls{
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:12px;
            padding:12px 2px 0;
        }

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

        .shot-dot{
            width:10px;
            height:10px;
            padding:0;
            border:1px solid var(--line-strong);
            border-radius:999px;
            background:#fffaf0;
            cursor:pointer;
            transition:.2s ease;
        }

        .shot-dot.active{
            background:var(--primary);
            border-color:var(--primary);
            transform:scale(1.05);
        }

        .shots-nav{
            display:flex;
            gap:8px;
        }

        .icon-btn{
            width:38px;
            height:38px;
            border-radius:12px;
            border:1px solid var(--line);
            background:linear-gradient(180deg,#fffaf0 0%,#fff2d9 100%);
            cursor:pointer;
            font-size:18px;
            font-weight:900;
            line-height:1;
            transition:.2s ease;
            color:var(--primary-dark);
        }

        .icon-btn:hover{
            border-color:var(--line-strong);
            color:var(--primary-dark);
            background:#fff7ea;
        }

        .icon-btn:disabled{
            opacity:.5;
            cursor:not-allowed;
        }

        /* =========================================================
           DOWNLOAD SAMPLES & DOCUMENTS
        ========================================================== */
        .downloads-card{
            padding:28px;
        }

        .downloads-layout{
            display:grid;
            grid-template-columns:.92fr 1.08fr;
            gap:16px;
            min-width:0;
        }

        .downloads-panel{
            min-width:0;
            border:1px solid var(--line);
            border-radius:20px;
            background:linear-gradient(180deg,#fffdf8 0%,#fff7ea 100%);
            padding:16px;
        }

        .downloads-panel h3{
            margin:0 0 6px;
            font-size:18px;
            line-height:1.25;
            color:var(--heading);
        }

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

        .downloads-stack{
            display:grid;
            gap:12px;
        }

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

        .download-btn{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:14px;
            min-width:0;
            min-height:68px;
            padding:16px 18px;
            border-radius:16px;
            border:1px solid #f0ddc0;
            background:linear-gradient(180deg,#fff8ec 0%, #fff3df 100%);
            transition:all .25s ease;
        }

        .download-btn:hover{
            transform:translateY(-2px);
            border-color:#dcc8aa;
            box-shadow:0 10px 22px rgba(192,127,34,.12);
        }

        .download-btn__copy{
            min-width:0;
            display:grid;
            gap:2px;
        }

        .download-btn__title{
            font-size:16px;
            font-weight:700;
            color:var(--text);
            overflow-wrap:anywhere;
        }

        .download-btn__meta{
            font-size:12px;
            color:var(--muted);
            font-weight:700;
        }

        .download-btn__icon{
            width:34px;
            height:34px;
            flex-shrink:0;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            border-radius:999px;
            border:1px solid #eed8b6;
            background:#fffdf8;
            color:var(--primary-dark);
            font-size:16px;
            line-height:1;
        }

        /* =========================================================
           LIST OF CONTENTS
        ========================================================== */
        .ms-contents-section{
            padding:32px 0;
        }

        .ms-contents-card{
            padding:28px;
            border-radius:24px;
            background:linear-gradient(180deg,#fffdf8 0%,#fff7ea 100%);
            border:1px solid var(--line);
            box-shadow:0 12px 34px rgba(92,65,29,.06);
        }

        .ms-contents-head{
            margin-bottom:18px;
        }

        .ms-contents-head h2{
            margin:0 0 8px;
            font-size:clamp(28px,3.2vw,36px);
            line-height:1.15;
            font-weight:800;
            color:var(--heading);
            letter-spacing:-.02em;
        }

        .ms-contents-head p{
            margin:0;
            max-width:760px;
            font-size:15px;
            line-height:1.7;
            color:var(--muted);
        }

        .ms-contents-tabs{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-bottom:18px;
            min-width:0;
            -webkit-overflow-scrolling:touch;
            scrollbar-width:thin;
        }

        .ms-contents-tab{
            appearance:none;
            flex:0 0 auto;
            white-space:nowrap;
            border:1px solid var(--line);
            background:#fffaf0;
            color:var(--primary-dark);
            border-radius:999px;
            padding:10px 14px;
            font-size:13px;
            font-weight:700;
            line-height:1.2;
            cursor:pointer;
            transition:all .2s ease;
        }

        .ms-contents-tab:hover{
            border-color:var(--line-strong);
            background:#fff7ea;
            color:var(--primary-dark);
        }

        .ms-contents-tab.active{
            border-color:#945f1a;
            background:linear-gradient(180deg,#c07f22,#945f1a);
            color:#fff;
            box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
        }

        .ms-contents-accordion{
            display:block;
        }

        .ms-contents-item{
            display:none;
            border:1px solid var(--line);
            border-radius:20px;
            overflow:hidden;
            background:linear-gradient(180deg,#fffdf8 0%,#fff7ea 100%);
        }

        .ms-contents-item.active{
            display:block;
        }

        .ms-contents-header{
            padding:18px 20px 14px;
            border-bottom:1px solid #efe4d0;
            background:linear-gradient(180deg,#fffdf8 0%,#fff8ec 100%);
        }

        .ms-contents-title{
            display:block;
            margin:0;
            font-size:18px;
            line-height:1.3;
            font-weight:800;
            color:var(--heading);
            overflow-wrap:anywhere;
        }

        .ms-contents-subtitle{
            display:block;
            margin-top:5px;
            font-size:13px;
            line-height:1.55;
            color:var(--muted);
            font-weight:600;
            overflow-wrap:anywhere;
        }

        .ms-contents-panel{
            display:block;
            padding:18px 20px 20px;
            background:#fffcf7;
        }

        .ms-contents-grid{
            display:grid;
            grid-template-columns:repeat(2, minmax(0, 1fr));
            gap:14px;
            padding-top:16px;
            min-width:0;
        }

        .ms-contents-box{
            min-width:0;
            border:1px solid var(--line);
            border-radius:18px;
            background:linear-gradient(180deg,#fffdf8 0%,#fff7ea 100%);
            padding:16px 16px 14px;
        }

        .ms-contents-box--full{
            grid-column:1 / -1;
        }

        .ms-contents-box h3{
            margin:0 0 12px;
            font-size:15px;
            line-height:1.35;
            font-weight:800;
            color:var(--heading);
            overflow-wrap:anywhere;
        }

        .ms-contents-list{
            margin:0;
            padding-left:18px;
            display:grid;
            gap:8px;
            color:#5c4738;
        }

        .ms-contents-list li{
            font-size:14px;
            line-height:1.55;
            overflow-wrap:anywhere;
        }

        /* =========================================================
           FEATURES
        ========================================================== */
        .feature-grid{
            display:grid;
            grid-template-columns:repeat(4, minmax(0, 1fr));
            gap:12px;
            min-width:0;
        }

        .feature{
            min-width:0;
            min-height:148px;
            padding:14px;
            border:1px solid var(--line);
            border-radius:16px;
            background:linear-gradient(180deg,#fffdf8 0%,#fff7ea 100%);
        }

        .feature h3{
            margin:0 0 8px;
            font-size:15px;
            line-height:1.35;
            overflow-wrap:anywhere;
            color:var(--heading);
        }

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

        /* =========================================================
           VERSIONS
        ========================================================== */
        .versions-grid{
            display:grid;
            grid-template-columns:repeat(3, minmax(0, 1fr));
            gap:12px;
            min-width:0;
        }

        .version-card{
            min-width:0;
            display:flex;
            flex-direction:column;
            overflow:hidden;
            border:1px solid var(--line);
            border-radius:16px;
            background:linear-gradient(180deg,#fffdf8 0%,#fff7ea 100%);
        }

        .version-thumb{
            min-height:140px;
            display:grid;
            place-items:center;
            text-align:center;
            padding:12px;
            border-bottom:1px solid var(--line);
            background:linear-gradient(140deg,#fff5e6,#fff0dc);
            color:#5c4738;
            font-weight:900;
        }

        .version-body{
            display:grid;
            gap:8px;
            padding:14px;
            min-width:0;
        }

        .version-body h3{
            margin:0;
            font-size:16px;
            overflow-wrap:anywhere;
            color:var(--heading);
        }

        .version-body p{
            margin:0;
            color:var(--muted);
            font-size:14px;
            min-height:46px;
            overflow-wrap:anywhere;
        }

        /* =========================================================
           FAQ
        ========================================================== */
        .faq-grid{
            display:grid;
            grid-template-columns:repeat(2, minmax(0, 1fr));
            gap:12px;
            min-width:0;
        }

        .faq{
            min-width:0;
            padding:14px;
            border:1px solid var(--line);
            border-radius:16px;
            background:linear-gradient(180deg,#fffdf8 0%,#fff7ea 100%);
        }

        .faq h3{
            margin:0 0 8px;
            font-size:15px;
            line-height:1.35;
            overflow-wrap:anywhere;
            color:var(--heading);
        }

        .faq p{
            margin:0;
            color:var(--muted);
            font-size:14px;
            overflow-wrap:anywhere;
        }

        /* =========================================================
           RESPONSIVE
        ========================================================== */
        @media (max-width: 991px){
            .hero-wrap,
            .demo-grid,
            .downloads-layout,
            .faq-grid,
            .ms-contents-grid{
                grid-template-columns:1fr;
            }

            .feature-grid,
            .versions-grid{
                grid-template-columns:repeat(2, minmax(0, 1fr));
            }

            .hero-left,
            .hero-right,
            .section-card,
            .downloads-card,
            .ms-contents-card{
                padding:18px;
            }

            .product-visual{
                min-height:240px;
            }
        }

        @media (max-width: 767px){
            .container{
                width:min(var(--max), calc(100% - 16px));
            }

            main{
                padding:14px 0 24px;
            }

            section{
                padding:14px 0;
            }

            .card{
                border-radius:20px;
            }

            .hero-left,
            .hero-right,
            .section-card,
            .downloads-card,
            .ms-contents-card{
                padding:16px;
            }

            .cta-row{
                display:grid;
                grid-template-columns:1fr;
            }

            .btn{
                width:100%;
            }

            .quick-links,
            .ms-contents-tabs{
                flex-wrap:nowrap;
                overflow-x:auto;
                padding-bottom:4px;
            }

            .ic-price-row,
            .ic-grid,
            .downloads-grid,
            .feature-grid,
            .versions-grid{
                grid-template-columns:1fr;
            }

            .media-box,
            .media-box iframe{
                min-height:220px;
            }

            .shots-slide{
                padding:12px;
            }

            .shots-frame{
                aspect-ratio:4 / 3;
            }

            .shots-caption{
                align-items:flex-start;
                flex-direction:column;
            }

            .shots-controls{
                flex-direction:column;
                align-items:stretch;
            }

            .shots-nav{
                justify-content:flex-end;
            }

            .ms-contents-header{
                padding:16px 16px 12px;
            }

            .ms-contents-panel{
                padding:16px;
            }
        }

        @media (max-width: 480px){
            .container{
                width:calc(100% - 12px);
            }

            .hero-left,
            .hero-right,
            .section-card,
            .downloads-card,
            .ms-contents-card{
                padding:14px;
            }

            h1{
                font-size:clamp(24px, 8vw, 34px);
            }

            .section-head h2{
                font-size:24px;
            }

            .hero-desc,
            .section-head p,
            .intro-quote{
                font-size:14px;
            }

            .download-btn{
                padding:14px 16px;
                min-height:60px;
            }

            .download-btn__title{
                font-size:15px;
            }

            .ms-contents-box{
                padding:12px;
            }

            .ms-contents-box h3{
                font-size:14px;
            }

            .icon-btn{
                width:34px;
                height:34px;
            }
        }