:root{
        --bg:#fbf6ef;
        --surface:#fffdfa;
        --surface-soft:#fff6ed;
        --surface-alt:#fff3e7;
        --text:#4b3329;
        --text-strong:#4d1915;
        --muted:#756055;
        --border:#ead7c3;
        --border-strong:#dcc1a1;
        --gold:#c9912e;
        --gold-dark:#9a6f1f;
        --green:#168b67;
        --green-dark:#0f6b4f;
        --shadow-xs:0 10px 24px rgba(69,29,19,.06);
        --shadow-sm:0 18px 40px rgba(69,29,19,.08);
        --shadow-md:0 30px 70px rgba(69,29,19,.12);
        --radius-xxl:34px;
        --radius-xl:26px;
        --radius-lg:22px;
        --container:1220px;
        --font-body:"Manrope", Arial, Helvetica, sans-serif;
        --font-heading:"Cormorant Garamond", Georgia, serif;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
        margin:0;
        font-family:var(--font-body);
        color:var(--text);
        line-height:1.65;
        background:
            radial-gradient(circle at top left, rgba(201,145,46,.09), transparent 24%),
            radial-gradient(circle at top right, rgba(106,39,34,.10), transparent 26%),
            linear-gradient(180deg,#fffdfa 0%, var(--bg) 42%, #fffdfa 100%);
    }

    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(var(--container), calc(100% - 32px));margin:auto}
    .section{padding:48px 0}

    /* =========================================================
       SECTION 05 : SHARED COMPONENTS
    ========================================================== */
    .section-card,
    .hero-panel,
    .hero-visual,
    .price-card,
    .info-card,
    .content-card,
    .aspect-intro-card,
    .aspect-summary-card,
    .feature-card,
    .method-card,
    .tool-card,
    .sample-card,
    .faq-card,
    .media-shell,
    .full-media-card,
    .video-shell,
    .cta-banner{
        background:linear-gradient(180deg, rgba(255,255,255,.97) 0%, rgba(255,248,240,.99) 100%);
        border:1px solid var(--border);
        box-shadow:var(--shadow-sm);
    }

    .section-card{
        border-radius:30px;
        padding:30px;
    }

    .eyebrow,
    .pill,
    .small-label{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        min-height:38px;
        padding:0 16px;
        border-radius:999px;
        border:1px solid rgba(106,39,34,.12);
        background:linear-gradient(180deg,#f8e8e4 0%, #f5e3df 100%);
        color:#6a2722;
        font-size:12px;
        font-weight:800;
        letter-spacing:.12em;
        text-transform:uppercase;
    }

    .eyebrow{margin-bottom:14px}
    .small-label{
        min-height:auto;
        padding:0;
        background:none;
        border:none;
        letter-spacing:.14em;
        font-size:11px;
        color:#7f7764;
    }
    .pill{
        min-height:30px;
        padding:0 12px;
        background:linear-gradient(180deg,#fff3d9 0%, #f7e4b4 100%);
        color:var(--gold-dark);
        border-color:#ecd5aa;
        letter-spacing:.10em;
        font-size:11px;
    }

    .section-head{margin-bottom:24px}
    .section-head h2,
    .hero-title,
    .price-title,
    .card-title,
    .sample-card h3,
    .info-card h3,
    .cta-banner h2,
    .content-card h3,
    .aspect-intro-card h3,
    .aspect-summary-card h3,
    .feature-block-copy h3{
        margin:0;
        font-family:var(--font-heading);
        letter-spacing:-.02em;
        line-height:1.04;
        color:var(--text-strong);
    }

    .section-head h2{font-size:clamp(34px,3.2vw,50px);margin-bottom:10px}
    .section-head p,
    .hero-desc,
    .content-card p,
    .aspect-intro-card p,
    .aspect-summary-card p,
    .feature-card p,
    .method-card p,
    .tool-card p,
    .sample-card p,
    .faq-card p,
    .info-card p,
    .cta-banner p,
    .feature-block-copy p,
    .tool-card li{
        color:var(--muted);
    }
    .section-head p{margin:0;max-width:920px;font-size:15px}

    .btn-row,
    .sample-actions{display:flex;flex-wrap:wrap;gap:12px}

    .btn{
        min-height:52px;
        min-width:150px;
        padding:0 20px;
        border-radius:16px;
        border:1px solid transparent;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        text-align:center;
        font-size:14px;
        font-weight:800;
        transition:.25s ease;
        cursor:pointer;
    }
    .btn:hover{transform:translateY(-1px)}
    .btn-primary{
        color:#412700;
        background:linear-gradient(135deg,#f7d9a3 0%, #dfb56a 55%, #c9912e 100%);
        border-color:#ddb66d;
        box-shadow:0 16px 28px rgba(201,145,46,.24);
    }
    .btn-secondary,
    .btn-outline{
        color:var(--text-strong);
        background:linear-gradient(180deg,#fffdfa 0%, #f8eddf 100%);
        border-color:var(--border-strong);
        box-shadow:var(--shadow-xs);
    }
    .btn-dark{
        color:#fff;
        background:linear-gradient(135deg,#6f2622 0%, #4d1815 100%);
        border-color:#59201c;
        box-shadow:0 16px 26px rgba(91,29,28,.20);
    }
    .btn-small{
        min-height:44px;
        min-width:132px;
        padding:0 14px;
        border-radius:12px;
        font-size:13px;
    }

    /* =========================================================
       SECTION 06 : HERO
    ========================================================== */
    .hero{padding:30px 0 36px}
    .hero-shell{
        padding:18px;
        border:1px solid var(--border);
        border-radius:var(--radius-xxl);
        overflow:hidden;
        background:
            radial-gradient(circle at 84% 12%, rgba(201,145,46,.15), transparent 18%),
            radial-gradient(circle at 15% 15%, rgba(255,255,255,.65), transparent 20%),
            linear-gradient(135deg,#fffdf9 0%, #fbf0e3 48%, #f6e6d9 100%);
        box-shadow:var(--shadow-md);
    }
    .hero-grid{
        display:grid;
        grid-template-columns:1.08fr .92fr;
        gap:18px;
    }
    .hero-panel,
    .hero-visual{border-radius:var(--radius-xl)}
    .hero-panel{
        padding:38px;
        display:flex;
        flex-direction:column;
        justify-content:center;
    }
    .hero-title{
        font-size:clamp(46px,4.7vw,76px);
        line-height:.95;
        margin-bottom:14px;
    }
    .hero-desc{
        margin:0;
        font-size:16px;
        max-width:760px;
    }
    .hero-tags{
        margin:24px 0;
        display:flex;
        flex-wrap:wrap;
        gap:10px;
    }
    .hero-tag{
        min-height:40px;
        padding:0 14px;
        border-radius:999px;
        display:inline-flex;
        align-items:center;
        gap:8px;
        background:linear-gradient(180deg,#fffdfa 0%, #fff4e7 100%);
        border:1px solid var(--border);
        box-shadow:var(--shadow-xs);
        font-size:13px;
        font-weight:700;
        color:#3c231a;
    }
    .hero-tag-dot{
        width:8px;
        height:8px;
        border-radius:50%;
        background:linear-gradient(135deg,#f4d8a6 0%, #c9912e 100%);
        box-shadow:0 0 0 4px rgba(201,145,46,.10);
    }
    .hero-visual{
        padding:18px;
        display:flex;
        align-items:center;
        justify-content:center;
    }
    .product-image-stage{
        width:100%;
        min-height:520px;
        border:1px dashed #d2e2d8;
        border-radius:20px;
        background:
            radial-gradient(circle at top right, rgba(201,145,46,.10), transparent 24%),
            linear-gradient(180deg, #fffdfc, #f4eadf);
        display:grid;
        place-items:center;
        overflow:hidden;
    }
    .product-image-stage img{
        width:100%;
        height:100%;
        object-fit:contain;
    }
    .snapshot-section{padding-top:18px}
    .snapshot-shell{
        padding:28px;
        border:1px solid var(--border);
        border-radius:30px;
        background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,252,250,.98));
        box-shadow:var(--shadow-lg);
    }
    .snapshot-table-wrap{overflow:auto}
    .snapshot-table{
        width:100%;
        border-collapse:separate;
        border-spacing:0;
        min-width:760px;
        background:#fff;
        border:1px solid var(--border);
        border-radius:22px;
        overflow:hidden;
        box-shadow:var(--shadow-sm);
    }
    .snapshot-table th,
    .snapshot-table td{
        padding:16px 18px;
        border-right:1px solid var(--border);
        border-bottom:1px solid var(--border);
        vertical-align:top;
    }
    .snapshot-table tr:last-child th,
    .snapshot-table tr:last-child td{border-bottom:none}
    .snapshot-table th:last-child,
    .snapshot-table td:last-child{border-right:none}
    .snapshot-table th{
        width:18%;
        background:linear-gradient(180deg,#fff8ee 0%,#f8ecdd 100%);
        color:var(--text-strong);
        font-family:var(--font-heading);
        font-size:24px;
        line-height:1.08;
        letter-spacing:-.02em;
    }
    .snapshot-table td{
        color:var(--text);
        font-weight:700;
        background:linear-gradient(180deg,#fffdfa 0%,#fff7ee 100%);
    }

    /* =========================================================
       SECTION 07 : CARDS / GRIDS
    ========================================================== */
    .value-grid,
    .methods-grid,
    .tools-grid,
    .faq-grid,
    .sample-grid{
        display:grid;
        gap:16px;
    }
    .value-grid{grid-template-columns:repeat(4, minmax(0,1fr))}
    .methods-grid{grid-template-columns:repeat(5, minmax(0,1fr))}
    .tools-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
    .faq-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
    .sample-grid{grid-template-columns:repeat(3, minmax(0,1fr))}

    .feature-card,
    .method-card,
    .tool-card,
    .faq-card,
    .sample-card,
    .content-card,
    .aspect-intro-card,
    .aspect-summary-card{
        border-radius:22px;
        padding:22px;
    }

    .card-title{font-size:30px;margin:0 0 8px}
    .feature-card p,
    .method-card p,
    .tool-card p,
    .faq-card p,
    .sample-card p,
    .content-card p,
    .aspect-intro-card p,
    .aspect-summary-card p{
        margin:0;
        font-size:14px;
    }

    .icon-badge{
        width:52px;
        height:52px;
        border-radius:16px;
        display:flex;
        align-items:center;
        justify-content:center;
        background:linear-gradient(135deg,#f4d8a6 0%, #c9912e 100%);
        color:#4d2500;
        box-shadow:0 10px 18px rgba(200,147,53,.12);
        margin-bottom:14px;
        font-weight:900;
    }

    .tool-card ul{
        margin:0;
        padding-left:20px;
    }
    .tool-card li{margin:0 0 10px}
    .tool-card li:last-child{margin-bottom:0}

    .content-card h3{margin:0 0 12px;font-size:34px}
    .content-card p{margin:0 0 14px;font-size:15px}
    .content-card p:last-child{margin-bottom:0}

    .sample-card{
        position:relative;
        overflow:hidden;
        min-height:250px;
        display:flex;
        flex-direction:column;
        justify-content:space-between;
    }
    .sample-card::before{
        content:"";
        position:absolute;
        inset:0 auto auto 0;
        width:100%;
        height:4px;
        background:linear-gradient(90deg,var(--gold) 0%, #ebc784 100%);
    }
    .sample-card h3{margin:6px 0 8px;font-size:30px;line-height:1.05}

    /* =========================================================
       SECTION 08 : ASPECTS
    ========================================================== */
    .aspects-intro{
        display:grid;
        grid-template-columns:1.15fr .85fr;
        gap:16px;
        margin-bottom:18px;
    }
    .aspect-intro-main h3,
    .aspect-summary-card h3{
        margin:8px 0 10px;
        font-size:34px;
    }
    .aspect-intro-card p,
    .aspect-summary-card p{margin:0 0 12px;font-size:15px}
    .aspect-intro-card p:last-child,
    .aspect-summary-card p:last-child{margin-bottom:0}

    /* =========================================================
       SECTION 09 : MEDIA / SCREENSHOTS
    ========================================================== */
    .media-shell{
        border-radius:24px;
        padding:14px;
        background:linear-gradient(180deg,#fffdf8 0%, #fff4e9 100%);
    }
    .media-wrap{
        position:relative;
        overflow:hidden;
        border-radius:24px;
        border:1px solid var(--border);
        background:linear-gradient(180deg,#381f1a 0%, #190d0b 100%);
        box-shadow:var(--shadow-md);
    }
    .media-track{
        display:flex;
        transition:transform .45s ease;
        will-change:transform;
    }
    .media-slide{
        min-width:100%;
        padding:16px;
    }
    .full-media-card{
        border-radius:20px;
        overflow:hidden;
    }
    .full-media-stage{
        width:100%;
        aspect-ratio:16 / 9;
        border-radius:18px;
        background:linear-gradient(180deg,#fffdfa 0%, #fdf2e6 100%);
        display:grid;
        place-items:center;
        overflow:hidden;
    }
    .full-media-stage img{
        width:100%;
        height:100%;
        object-fit:cover;
    }
    .full-media-placeholder{
        width:100%;
        height:100%;
        display:grid;
        place-items:center;
        text-align:center;
        color:#6b7885;
        font-weight:700;
        padding:18px;
        background:linear-gradient(180deg,#fffdfa 0%, #fdf2e6 100%);
    }

    .slider-nav{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:10px;
        margin-top:16px;
    }
    .slider-btn{
        width:44px;
        height:44px;
        border-radius:50%;
        border:1px solid var(--border-strong);
        background:linear-gradient(180deg,#fffdfa 0%, #f8eddf 100%);
        color:#6a2722;
        font-size:18px;
        font-weight:900;
        cursor:pointer;
        box-shadow:var(--shadow-xs);
        transition:.25s ease;
    }
    .slider-btn:hover{transform:translateY(-1px)}
    .slider-dots{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:8px;
    }
    .slider-dots .dot{
        width:10px;
        height:10px;
        border:none;
        padding:0;
        border-radius:50%;
        background:#d6c0a7;
        cursor:pointer;
        transition:.25s ease;
    }
    .slider-dots .dot.active{
        width:28px;
        border-radius:999px;
        background:linear-gradient(135deg,#e1b66f 0%, #c9912e 100%);
    }

    /* =========================================================
       SECTION 10 : FEATURE DETAIL BLOCKS
    ========================================================== */
    .feature-showcase{display:grid;gap:18px}
    .feature-block{
        position:relative;
        display:grid;
        grid-template-columns:1fr;
        gap:20px;
        border:1px solid var(--border);
        border-radius:28px;
        background:linear-gradient(180deg,#fffdfa 0%, #fff6ed 100%);
        box-shadow:var(--shadow-sm);
        overflow:hidden;
        padding:22px;
    }
    .feature-block::before{
        content:"";
        position:absolute;
        inset:0 auto auto 0;
        width:100%;
        height:4px;
        background:linear-gradient(90deg,var(--gold) 0%, #ebc784 100%);
    }
    .feature-block-media{
        width:100%;
        aspect-ratio:16 / 8;
        border:1px dashed #d2e2d8;
        border-radius:18px;
        background:linear-gradient(180deg,#fff9f1 0%, #f7e8d6 100%);
        display:grid;
        place-items:center;
        overflow:hidden;
    }
    .feature-block-media img{
        width:100%;
        height:100%;
        object-fit:cover;
    }
    .feature-block-copy h3{margin:0 0 10px;font-size:36px}
    .feature-block-copy p{margin:0 0 12px;font-size:15px}
    .feature-block-copy p:last-child{margin-bottom:0}
    .readmore-text{
        display:-webkit-box;
        -webkit-line-clamp:4;
        -webkit-box-orient:vertical;
        overflow:hidden;
    }
    .feature-block.expanded .readmore-text{
        display:block;
        -webkit-line-clamp:unset;
        overflow:visible;
    }
    .readmore-btn{
        margin-top:8px;
        min-height:40px;
        padding:0 16px;
        border-radius:12px;
        border:1px solid #ddb66d;
        background:linear-gradient(135deg,#f7d9a3 0%, #dfb56a 55%, #c9912e 100%);
        color:#412700;
        box-shadow:0 14px 26px rgba(201,145,46,.20);
        font-size:13px;
        font-weight:800;
        cursor:pointer;
    }

    /* =========================================================
       SECTION 11 : VIDEO / CTA
    ========================================================== */
    .video-shell{
        border-radius:24px;
        overflow:hidden;
    }
    .video-frame{
        width:100%;
        aspect-ratio:16 / 9;
        border-radius:24px;
        overflow:hidden;
        border:1px solid var(--border);
        background:linear-gradient(180deg,#381f1a 0%, #190d0b 100%);
        box-shadow:var(--shadow-md);
    }
    .video-frame iframe{
        width:100%;
        height:100%;
        display:block;
    }

    .cta-banner{
        overflow:hidden;
        position:relative;
        border-radius:30px;
        padding:30px;
        background:
            radial-gradient(circle at top right, rgba(201,145,46,.14), transparent 25%),
            linear-gradient(135deg,#fffdf9 0%, #f6ebde 100%);
    }
    .cta-banner h2{
        font-size:clamp(38px,3vw,46px);
        margin-bottom:10px;
    }
    .cta-banner p{
        margin:0 0 18px;
        max-width:820px;
    }

    /* =========================================================
       SECTION 12 : RESPONSIVE
    ========================================================== */
    @media (max-width:1150px){
        .hero-grid,
        .hero-below{grid-template-columns:1fr}
        .value-grid,
        .methods-grid,
        .sample-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
    }

    @media (max-width:900px){
        .value-grid,
        .methods-grid,
        .tools-grid,
        .sample-grid,
        .faq-grid{grid-template-columns:1fr}
        .aspects-intro{grid-template-columns:1fr}
    }

    @media (max-width:768px){
        .hero-shell{border-radius:24px}
        .feature-block{border-radius:22px}
    }

    @media (max-width:640px){
        .section{padding:36px 0}
        .section-card,
        .hero-panel,
        .hero-visual,
        .cta-banner{padding:22px}
        .hero-title{font-size:42px}
        .section-head h2{font-size:34px}
        .card-title,
        .price-title,
        .sample-card h3,
        .content-card h3,
        .feature-block-copy h3,
        .info-card h3,
        .aspect-intro-main h3,
        .aspect-summary-card h3{
            font-size:26px;
        }
        .btn{width:100%}
        .sale{font-size:34px}
    }

    @media (prefers-reduced-motion: reduce){
        html{scroll-behavior:auto}
        .media-track{transition:none}
        .btn:hover,
        .slider-btn:hover{transform:none}
    }