:root{
            --text:#2f2417;
            --heading:#8a5a1c;
            --muted:#7b6955;
            --brand:#c07f22;
            --brand-2:#945f1a;
            --brand-soft:#fff0dc;
            --line:#eadcc7;
            --line-strong:#dcc8aa;
            --shadow:0 14px 34px rgba(92,65,29,.08);
            --shadow-2:0 8px 18px rgba(92,65,29,.05);
            --container:1200px;
        }

        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            font-family:Inter,Segoe UI,Roboto,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.55;
            -webkit-font-smoothing:antialiased;
            text-rendering:optimizeLegibility;
        }

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

        .btn{
            min-height:48px;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            padding:0 18px;
            border-radius:14px;
            font-weight:800;
            border:1px solid transparent;
            cursor:pointer;
            transition:.18s ease;
            text-align:center;
            gap:8px;
            white-space:nowrap;
        }
        .btn:hover{transform:translateY(-1px)}
        .btn-primary{
            color:#fff;
            background:linear-gradient(180deg,var(--brand),var(--brand-2));
            box-shadow:0 10px 24px rgba(192,127,34,.22);
        }
        .btn-secondary{
            background:linear-gradient(180deg,#fffaf0 0%, #fff2d9 100%);
            border-color:var(--line);
            color:var(--brand-2);
            box-shadow:var(--shadow-2);
        }
        .btn-secondary:hover{
            border-color:var(--line-strong);
            background:#fff7ea;
        }

        .page-head{
            padding:34px 0 12px;
        }
        .page-head-shell{
            background:
                radial-gradient(circle at 100% 0%, rgba(239,179,92,.16), transparent 28%),
                linear-gradient(135deg,#fffdf8 0%, #fff7ea 100%);
            border:1px solid var(--line);
            border-radius:30px;
            padding:28px;
            box-shadow:var(--shadow);
            position:relative;
            overflow:hidden;
        }
        .page-head-shell:after{
            content:"";
            position:absolute;
            right:-80px;
            top:-80px;
            width:240px;
            height:240px;
            border-radius:50%;
            background:radial-gradient(circle, rgba(192,127,34,.10), rgba(192,127,34,0) 68%);
            pointer-events:none;
        }

        .page-head-grid{
            display:grid;
            grid-template-columns:minmax(0,1fr) 470px;
            gap:28px;
            align-items:center;
            position:relative;
            z-index:1;
        }

        .page-head-visual{
            width:100%;
            max-width:470px;
            min-height:320px;
            margin-left:auto;
            display:flex;
            align-items:center;
            justify-content:center;
            border-radius:24px;
            background:linear-gradient(145deg,#fff9ee,#fff3df);
            border:1px solid var(--line);
            padding:16px 18px;
        }

        .page-head-visual img{
            width:100%;
            max-width:470px;
            max-height:320px;
            object-fit:contain;
            filter:drop-shadow(0 18px 28px rgba(148,95,26,.12));
        }

        .pill{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:8px 14px;
            border-radius:999px;
            background:linear-gradient(180deg,#fff5e6,#fff0dc);
            border:1px solid #f2dec2;
            color:var(--brand-2);
            font-weight:800;
            font-size:.88rem;
            margin-bottom:14px;
        }
        .pill:before{
            content:"";
            width:9px;
            height:9px;
            border-radius:50%;
            background:var(--brand);
            box-shadow:0 0 0 6px rgba(192,127,34,.12);
        }


        .page-title,
        .hero-left h2,
        .section-head h2,
        .sample-card h3,
        .intro-title{
            color:var(--heading);
        }
        .page-title{
            margin:0 0 12px;
            font-size:clamp(2rem,1.55rem + 2vw,3.6rem);
            line-height:1;
            letter-spacing:-.05em;
            white-space:nowrap;
        }
        .page-text{
            margin:0;
            max-width:72ch;
            color:#5c4738;
            font-size:1.02rem;
        }

        .page-head-actions{
            margin-top:20px;
            display:flex;
            flex-wrap:wrap;
            gap:12px;
        }

        .page-short-links{
            margin-top:16px;
            display:flex;
            flex-wrap:wrap;
            gap:10px;
        }
        .page-short-links a{
            min-height:40px;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            padding:0 14px;
            border-radius:999px;
            background:#fffaf0;
            border:1px solid var(--line);
            box-shadow:var(--shadow-2);
            font-size:.92rem;
            font-weight:700;
            color:#2e3441;
        }

        .head-divider{
            height:1px;
            background:linear-gradient(90deg, transparent 0%, rgba(92,65,29,.14) 12%, rgba(92,65,29,.14) 88%, transparent 100%);
            margin-top:18px;
        }

        .hero{
            padding:18px 0 8px;
        }
        .hero-shell{
            display:grid;
            grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
            gap:20px;
            align-items:stretch;
        }
        .hero-left,
        .hero-right-card{
            background:linear-gradient(180deg,#fffdf8 0%,#fff7e8 100%);
            border:1px solid var(--line);
            border-radius:28px;
            box-shadow:var(--shadow);
        }
        .hero-left{
            padding:28px;
        }
        .hero-left h2{
            margin:0 0 10px;
            font-size:1.55rem;
            line-height:1.08;
        }
        .hero-left p{
            margin:0;
            color:var(--muted);
        }

        .hero-micro{
            display:grid;
            grid-template-columns:repeat(2,minmax(0,1fr));
            gap:12px;
            margin:20px 0 20px;
        }
        .micro{
            padding:14px;
            border-radius:18px;
            background:linear-gradient(180deg,#fffdf8 0%, #fff7ea 100%);
            border:1px solid var(--line);
        }
        .micro strong{
            display:block;
            font-size:1rem;
            line-height:1.1;
            margin-bottom:4px;
        }
        .micro span{
            display:block;
            font-size:.86rem;
            color:var(--muted);
            line-height:1.4;
        }

        .hero-right-card{
            padding:22px;
            background:
                radial-gradient(circle at 100% 0%, rgba(227,165,72,.12), transparent 32%),
                linear-gradient(180deg,#fffefe 0%, #fff7f8 100%);
        }
        .price-badge{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:8px 12px;
            border-radius:999px;
            background:#fff8ec;
            border:1px solid #f0ddc0;
            color:var(--brand-2);
            font-weight:800;
            font-size:.82rem;
            margin-bottom:14px;
        }
        .product-shot{
            display:grid;
            grid-template-columns:150px 1fr;
            gap:16px;
            align-items:center;
        }
        .product-shot img{
            width:150px;
            margin-inline:auto;
            filter:drop-shadow(0 14px 24px rgba(148,95,26,.12));
        }
        .price-copy h3{
            margin:0 0 8px;
            font-size:1.28rem;
            line-height:1.08;
            color:#171b23;
        }
        .price-row{
            display:flex;
            align-items:flex-end;
            gap:10px;
            flex-wrap:wrap;
            margin-bottom:12px;
        }
        .price-row strong{
            font-size:2rem;
            line-height:1;
            letter-spacing:-.04em;
            color:var(--brand-2);
        }
        .price-row span{
            text-decoration:line-through;
            color:#a7797f;
            font-weight:700;
        }

        .meta-grid{
            display:grid;
            grid-template-columns:repeat(2,minmax(0,1fr));
            gap:10px;
            margin-top:16px;
        }
        .meta-item{
            padding:12px;
            border-radius:16px;
            background:#ffffff;
            border:1px solid var(--line);
        }
        .meta-item b{
            display:block;
            font-size:.82rem;
            color:var(--brand-2);
            margin-bottom:4px;
            font-weight:800;
        }
        .meta-item span{
            display:block;
            color:#2d3443;
            font-size:.92rem;
            line-height:1.35;
        }

        .section-head{
            display:flex;
            align-items:end;
            justify-content:space-between;
            gap:20px;
            margin-bottom:22px;
        }
        .section-head .copy{
            max-width:760px;
        }
        .kicker{
            display:inline-block;
            margin-bottom:10px;
            color:var(--brand-2);
            background:var(--brand-soft);
            padding:8px 12px;
            border-radius:999px;
            font-weight:800;
            font-size:.86rem;
        }
        .section-head h2{
            margin:0 0 8px;
            font-size:clamp(1.75rem,1.2rem + 1.3vw,2.8rem);
            line-height:1.08;
            letter-spacing:-.04em;
        }
        .section-head p{
            margin:0;
            color:var(--muted);
        }

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

        #about-product{
            padding:24px 0 0;
        }
        .intro-title{
            margin:0;
            font-size:1.02rem;
            line-height:1.8;
            color:#212936;
            font-weight:600;
        }

        /* =========================================================
           FEATURES
        ========================================================== */
         #about-product{
        padding:24px 0 28px;
    }

    #contents{
        padding-top:36px;
    }
        #contents{padding-top:0}
        #contents .section-head{
            justify-content:center;
            text-align:center;
        }
        #contents .section-head .copy{
            max-width:900px;
            margin:0 auto;
        }

        .feature-wrap{
            position:relative;
        }
        .feature-list-shell{
            position:relative;
            overflow:hidden;
            max-height:430px;
            transition:max-height .3s ease;
        }
        .feature-list-shell.is-open{
            max-height:5000px;
        }
        .feature-list-shell.is-collapsed:after{
            content:"";
            position:absolute;
            left:0;
            right:0;
            bottom:0;
            height:80px;
            background:linear-gradient(180deg, rgba(255,255,255,0) 0%, #ffffff 88%);
            pointer-events:none;
        }

        .feature-sections{
            display:grid;
            grid-template-columns:1fr;
            gap:22px;
        }

        .feature-section h3{
            margin:0 0 12px;
            font-size:1.06rem;
            line-height:1.2;
            color:var(--heading);
        }

        .feature-grid{
            margin:0;
            padding:0;
            list-style:none;
            display:grid;
            grid-template-columns:repeat(2,minmax(0,1fr));
            gap:0 26px;
        }

        .feature-grid li{
            position:relative;
            padding:0 0 12px 22px;
            margin:0 0 12px;
            color:#394252;
            line-height:1.68;
            border-bottom:1px dashed rgba(92,65,29,.14);
        }

        .feature-grid li:last-child{
            margin-bottom:0;
        }

        .feature-grid li:before{
            content:"•";
            position:absolute;
            left:4px;
            top:0;
            color:var(--brand);
            font-size:1.2rem;
            line-height:1.2;
            font-weight:900;
        }

        .read-toggle-wrap{
            margin-top:18px;
            display:flex;
            justify-content:center;
        }
        .read-toggle{
            min-height:46px;
            border:none;
            border-radius:999px;
            padding:0 20px;
            font-weight:800;
            color:var(--brand-2);
            background:linear-gradient(135deg,#fff1f2 0%, #fff8ef 100%);
            border:1px solid rgba(182,15,28,.10);
            box-shadow:var(--shadow-2);
            cursor:pointer;
        }

        /* =========================================================
           SLIDER
        ========================================================== */
        .showcase{
            display:grid;
            grid-template-columns:minmax(0,1fr) 320px;
            gap:18px;
        }
        .gallery-card{
            background:linear-gradient(180deg,#fffdf8 0%,#fff7e8 100%);
            border:1px solid var(--line);
            border-radius:28px;
            padding:18px;
            box-shadow:var(--shadow);
        }

        .slider-stage{
            position:relative;
            aspect-ratio:16/9.2;
            overflow:hidden;
            border-radius:20px;
            background:#fffdf8;
            border:1px solid var(--line);
        }
        .slider-slide{
            position:absolute;
            inset:0;
            opacity:0;
            visibility:hidden;
            transition:opacity .35s ease;
            display:flex;
            align-items:center;
            justify-content:center;
            padding:18px;
        }
        .slider-slide.active{
            opacity:1;
            visibility:visible;
        }
        .slider-slide img{
            width:100%;
            height:100%;
            object-fit:contain;
        }

        .slider-nav{
            position:absolute;
            top:50%;
            transform:translateY(-50%);
            width:42px;
            height:42px;
            border:none;
            border-radius:999px;
            display:grid;
            place-items:center;
            background:rgba(255,250,240,.92);
            color:var(--brand-2);
            box-shadow:var(--shadow-2);
            cursor:pointer;
            z-index:3;
            font-size:1.7rem;
            font-weight:900;
            line-height:1;
        }
        .slider-prev{left:12px}
        .slider-next{right:12px}
        .slider-nav:hover{background:#fff}

        .gallery-copy strong{
            display:block;
            font-size:1rem;
            line-height:1.2;
            margin:14px 0 4px;
        }
        .gallery-copy span{
            display:block;
            color:var(--muted);
            font-size:.92rem;
        }

        .slider-dots{
            display:flex;
            align-items:center;
            justify-content:center;
            gap:8px;
            margin-top:14px;
        }
        .slider-dots button{
            width:10px;
            height:10px;
            border:none;
            border-radius:999px;
            padding:0;
            background:#dcc8aa;
            cursor:pointer;
        }
        .slider-dots button.active{
            background:var(--brand);
        }

        .showcase-side{
            display:grid;
            gap:14px;
        }
        .side-card{
            background:linear-gradient(180deg,#fffdf8 0%,#fff7e8 100%);
            border:1px solid var(--line);
            border-radius:24px;
            padding:18px;
            box-shadow:var(--shadow);
        }
        .side-card h3{
            margin:0 0 8px;
            font-size:1.04rem;
            line-height:1.2;
            color:var(--heading);
        }
        .side-card p{
            margin:0;
            color:var(--muted);
            font-size:.94rem;
        }

        /* =========================================================
           FAQ
        ========================================================== */
        .faq-wrap{
            display:grid;
            grid-template-columns:repeat(2,minmax(0,1fr));
            gap:14px;
        }
        .faq{
            background:linear-gradient(180deg,#fffdf8 0%,#fff7e8 100%);
            border:1px solid var(--line);
            border-radius:22px;
            box-shadow:var(--shadow-2);
            overflow:hidden;
            align-self:start;
        }
        .faq-q{
            width:100%;
            border:none;
            background:transparent;
            text-align:left;
            cursor:pointer;
            padding:18px 20px;
            display:flex;
            justify-content:space-between;
            gap:16px;
            font-weight:800;
            color:var(--heading);
        }
        .faq-q span:last-child{
            flex:0 0 auto;
        }
        .faq-a{
            display:grid;
            grid-template-rows:0fr;
            transition:grid-template-rows .22s ease;
        }
        .faq-a > div{
            overflow:hidden;
            padding:0 20px;
            color:var(--muted);
        }
        .faq.open .faq-a{
            grid-template-rows:1fr;
        }
        .faq.open .faq-a > div{
            padding-bottom:18px;
        }

        .reveal{
            opacity:0;
            transform:translateY(16px);
            transition:opacity .5s ease, transform .5s ease;
        }
        .reveal.show{
            opacity:1;
            transform:none;
        }

        @media (max-width:1100px){
            .page-head-grid,
            .hero-shell,
            .showcase{
                grid-template-columns:1fr;
            }

            .faq-wrap{
                grid-template-columns:1fr 1fr;
            }

            .page-head-visual{
                margin-inline:auto;
            }
        }

        @media (max-width:860px){
            .hero-shell,
            .showcase,
            .faq-wrap{
                grid-template-columns:1fr;
            }

            .feature-grid{
                grid-template-columns:1fr;
            }

            .page-head-shell,
            .hero-left,
            .hero-right-card,
            .section-card,
            .gallery-card,
            .side-card,
            .faq{
                border-radius:22px;
            }

            .page-head-shell,
            .hero-left,
            .section-card{
                padding:24px;
            }

            .product-shot{
                grid-template-columns:1fr;
            }

            .product-shot img{
                width:140px;
            }

            .page-head-visual{
                min-height:250px;
                max-width:100%;
            }

            .page-head-visual img{
                max-height:250px;
            }

            .page-title{
                white-space:normal;
            }
        }

        @media (max-width:640px){
            .hero-micro,
            .meta-grid,
            .faq-wrap{
                grid-template-columns:1fr;
            }

            .page-head-actions,
            .page-short-links{
                flex-direction:column;
                align-items:stretch;
            }

            .btn,
            .page-short-links a{
                width:100%;
            }

            .section{
                padding:48px 0;
            }
        }

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