/* roulang page: index */
:root{
--fire:#B13228;--fire-deep:#8E241C;--amber:#C4A35A;--ink:#1A1614;--paper:#F4EFE6;--steam:#FCFAF6;--tea:#3E6B4A;--soy:#8A4B2F;--text:#2A2420;--muted:#6B5E55;--line:rgba(26,22,20,.12);--shadow:0 10px 28px rgba(26,22,20,.08);--radius:14px;--btn-r:8px;--max:1240px;--nav-h:108px;--space:104px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden}
body{font-family:"Noto Sans SC","Source Han Sans SC",sans-serif;font-size:17px;line-height:1.82;color:var(--text);background:var(--steam);padding-bottom:76px}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
ul{list-style:none}
.container{width:min(var(--max),100%);margin:0 auto;padding:0 5vw}
.skip{position:absolute;left:-999px;top:8px;background:var(--fire);color:#fff;padding:8px 14px;border-radius:8px;z-index:80}
.skip:focus{left:8px}
.kicker{display:flex;align-items:center;gap:12px;color:var(--soy);font-size:13px;letter-spacing:.08em;margin-bottom:14px}
.kicker:before{content:"";width:56px;height:3px;background:var(--amber);border-radius:2px}
h1,h2,h3,.serif{font-family:"Noto Serif SC","Source Han Serif SC",serif;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
h2{font-size:clamp(26px,3.2vw,40px);line-height:1.28;margin-bottom:.55em}
h3{font-size:22px;line-height:1.35}
p{margin:0 0 1em}
section{padding:var(--space) 0;position:relative}
.bg-paper{background:var(--paper)}
.bg-steam{background:var(--steam)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 22px;border-radius:var(--btn-r);font-weight:600;transition:all .2s ease;border:1.5px solid transparent}
.btn:after{content:"→";transition:transform .2s}
.btn:hover:after{transform:translateX(2px)}
.btn-primary{background:var(--fire);color:#fff}
.btn-primary:hover,.btn-primary:active{background:var(--fire-deep);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-ghost:hover{background:rgba(196,163,90,.2);border-color:var(--amber)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-line:hover{background:var(--amber);border-color:var(--amber)}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.badge{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:999px;border:1px solid var(--amber);color:#f7ead0;font-size:13px;background:rgba(26,22,20,.28)}
.site-header{position:sticky;top:0;z-index:40}
.infobar{height:38px;background:var(--ink);color:#f3e7d4;display:flex;align-items:center;font-size:13px}
.infobar .container{display:flex;align-items:center;justify-content:space-between;gap:16px}
.infobar a{color:#f3e7d4}
.infobar a:hover{color:var(--amber)}
.trust{opacity:.9}
.mainnav{background:var(--paper);border-bottom:1px solid var(--line);transition:padding .2s}
.mainnav .container{display:flex;align-items:center;justify-content:space-between;min-height:70px;gap:18px}
.logo{display:flex;align-items:center;gap:10px;font-family:"Noto Serif SC",serif;font-weight:700;font-size:18px;color:var(--ink);white-space:nowrap}
.logo-mark{width:34px;height:34px;flex:none}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{padding:10px 12px;min-height:44px;display:inline-flex;align-items:center;color:var(--text);position:relative}
.nav-links a:hover{color:var(--fire)}
.nav-links a.active:after,.nav-links a:hover:after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;background:var(--fire)}
.hamburger{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;gap:5px}
.hamburger span{display:block;height:2px;background:var(--ink);border-radius:2px}
.drawer{position:fixed;inset:0 0 0 auto;width:80%;max-width:360px;background:var(--steam);transform:translateX(100%);transition:transform .28s;z-index:50;padding:28px 22px;display:flex;flex-direction:column;box-shadow:-12px 0 32px rgba(26,22,20,.16)}
.drawer.open{transform:none}
.drawer a{min-height:48px;display:flex;align-items:center;font-size:18px;border-bottom:1px solid var(--line)}
.drawer-cta{margin-top:auto}
.overlay{position:fixed;inset:0;background:rgba(26,22,20,.45);opacity:0;pointer-events:none;transition:opacity .28s;z-index:45}
.overlay.show{opacity:1;pointer-events:auto}
.site-header.compact .infobar{max-height:0;overflow:hidden;opacity:0}
.site-header.compact .mainnav .container{min-height:58px}
.hero{padding:0;height:min(100vh,920px);min-height:88vh;position:relative;color:#fff;overflow:hidden}
.slides{position:absolute;inset:0}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .6s;background-size:cover;background-position:center}
.slide.active{opacity:1}
.slide:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(26,22,20,.58),rgba(26,22,20,.46) 46%,rgba(26,22,20,.32))}
.hero-copy{position:relative;z-index:2;height:100%;display:flex;align-items:center;padding:120px 0 90px}
.hero h1{font-size:clamp(30px,4.6vw,52px);color:#fff;max-width:16ch;margin-bottom:18px}
.hero .lead{max-width:38em;color:#f4eadc;margin-bottom:26px;font-size:18px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:22px}
.hero-badges{display:flex;flex-wrap:wrap;gap:8px}
.hero-ctrl{position:absolute;z-index:3;bottom:28px;left:5vw;right:5vw;display:flex;align-items:center;justify-content:space-between;gap:12px}
.dots{display:flex;gap:8px}
.dots button{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.35)}
.dots button.on{background:var(--amber);width:22px;border-radius:8px}
.arrow,.pause{width:44px;height:44px;border:1px solid rgba(255,255,255,.45);color:#fff;border-radius:8px;background:rgba(26,22,20,.28)}
.arrow:hover,.pause:hover{border-color:var(--amber);color:var(--amber)}
.sell-row{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:var(--ink);color:#f6eee3}
.sell-item{padding:36px 28px;border-right:1px solid rgba(196,163,90,.22)}
.sell-item:last-child{border-right:0}
.num{font-family:"Noto Serif SC",serif;font-variant-numeric:tabular-nums;color:var(--amber);font-size:28px;display:block;margin-bottom:8px}
.sell-item h3{color:#fff;margin-bottom:10px}
.sell-item p{color:#e7d8c4;margin:0 0 .7em;font-size:15px}
.fit{color:var(--amber);font-size:14px;margin:0}
.intro-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.intro-pic{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line)}
.intro-pic img{width:100%;height:520px;object-fit:cover}
.facts{margin-top:8px;padding:16px 18px;background:var(--paper);border-left:3px solid var(--fire);border-radius:0 10px 10px 0;color:var(--ink)}
.mod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.mod{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s,border-color .2s;min-height:100%}
.mod:hover{transform:translateY(-4px);border-color:var(--fire);box-shadow:0 16px 30px rgba(177,50,40,.12)}
.mod img{width:100%;object-fit:cover}
.mod-a img{height:168px}
.mod-b{display:grid;grid-template-columns:10px 1fr}
.mod-b .bar{background:var(--fire)}
.mod-b img{height:120px}
.mod-c img{height:220px}
.mod-d{display:grid;grid-template-columns:.9fr 1.1fr}
.mod-d img{height:100%;min-height:180px}
.mod-e img{height:110px}
.mod-f{position:relative;color:#fff}
.mod-f img{height:260px;filter:grayscale(.15)}
.mod-f .body{position:absolute;inset:auto 0 0;padding:20px;background:linear-gradient(transparent,rgba(26,22,20,.82))}
.mod-f h3,.mod-f p{color:#fff}
.body{padding:18px 18px 22px}
.tag{display:inline-block;font-size:12px;color:var(--soy);border:1px solid var(--amber);border-radius:999px;padding:2px 8px;margin-bottom:8px}
.scenes{background:var(--ink) url("/assets/images/ca9002e409a5ac6c.webp") center/cover no-repeat;color:#f6eee3}
.scenes:before{content:"";position:absolute;inset:0;background:rgba(26,22,20,.72)}
.scenes .container{position:relative;z-index:1}
.scenes h2,.scenes .kicker{color:#f8f1e4}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}
.tabs button{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(196,163,90,.4);color:#f6eee3}
.tabs button.on{background:var(--fire);border-color:var(--fire)}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative}
.step{background:rgba(252,250,246,.06);border:1px solid rgba(196,163,90,.28);border-radius:12px;padding:18px}
.ui{margin-top:12px;border:1px dashed rgba(243,231,212,.4);border-radius:8px;padding:10px;font-size:13px;line-height:1.7;color:#efe3d2}
.ui b{color:var(--amber);display:block;margin-bottom:4px}
.prod-grid{display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:auto auto;gap:18px}
.prod{position:relative;border-radius:var(--radius);overflow:hidden;min-height:240px;box-shadow:var(--shadow);border:1px solid var(--line)}
.prod.big{grid-row:1 / span 2;min-height:520px}
.prod img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.prod .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,22,20,.1),rgba(26,22,20,.78));padding:24px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff}
.prod h3{color:#fff;margin-bottom:8px}
.philosophy{background:var(--ink);color:#f4eadc}
.philosophy h2{color:#fff}
.philo-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px}
.idea{padding:18px 0;border-bottom:1px solid rgba(196,163,90,.2)}
.idea strong{display:block;color:#fff;font-size:18px;margin-bottom:6px}
.slice-wrap{display:grid;gap:16px}
.slice{display:grid;grid-template-columns:140px 1fr;gap:14px;align-items:center;border:1px solid var(--fire);border-radius:12px;overflow:hidden;background:#221c19}
.slice img{width:140px;height:110px;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.slice p{margin:0;color:#e8dccb;font-size:15px}
.stories{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.quote{background:#fff;border-radius:var(--radius);padding:28px 24px 24px;box-shadow:var(--shadow);position:relative;border:1px solid var(--line)}
.quote:nth-child(2){margin-top:28px}
.quote:nth-child(3){margin-top:12px}
.quote:before{content:"「";font-family:"Noto Serif SC",serif;font-size:64px;line-height:1;color:var(--fire);position:absolute;top:6px;left:14px;opacity:.35}
.quote p{position:relative;z-index:1}
.who{color:var(--muted);font-size:14px;margin:0}
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.stat{text-align:center;padding:22px 8px;background:#fff;border-radius:12px;border:1px solid var(--line)}
.stat b{display:block;font-family:"Noto Serif SC",serif;font-size:40px;color:var(--fire);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.stat span{color:var(--muted);font-size:14px}
.compare-table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.compare-table th,.compare-table td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.compare-table th{background:var(--ink);color:#f6eee3;font-weight:600}
.compare-table td:last-child{color:var(--tea);font-weight:500}
.m-compare{display:none}
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rev{background:#fff;border-radius:12px;padding:22px;border-left:4px solid var(--amber);box-shadow:var(--shadow);min-width:0}
.rev h3{font-size:16px;margin-bottom:8px}
.biz-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.biz{padding:22px;background:#fff;border-radius:14px;border:1px solid var(--line);min-height:220px}
.biz a{color:var(--fire);font-weight:600}
.deploy{display:grid;grid-template-columns:1.1fr .9fr;gap:36px}
.olist{counter-reset:step}
.olist li{counter-increment:step;padding:16px 0 16px 58px;position:relative;border-bottom:1px solid var(--line)}
.olist li:before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:16px;font-family:"Noto Serif SC",serif;color:var(--fire);font-size:20px}
.check li{padding:10px 0 10px 28px;position:relative}
.check li:before{content:"";width:10px;height:10px;border-radius:50%;background:var(--tea);position:absolute;left:0;top:16px}
.news-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.news{background:#fff;border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);display:flex;flex-direction:column}
.news img{height:150px;width:100%;object-fit:cover}
.news .body{flex:1}
.date{color:var(--soy);font-size:13px}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item button{width:100%;text-align:left;min-height:56px;padding:14px 8px;display:flex;justify-content:space-between;gap:12px;font-family:"Noto Serif SC",serif;font-size:18px}
.faq-item .ans{display:none;padding:0 8px 16px;background:var(--paper);color:var(--text)}
.faq-item.open .ans{display:block}
.faq-item button span{color:var(--fire);font-size:22px}
.guard{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:28px}
.gcard{background:var(--paper);border-radius:12px;padding:18px;border:1px solid var(--line)}
.gcard b{display:block;color:var(--fire);font-size:22px;font-family:"Noto Serif SC",serif;margin-bottom:4px}
.form{background:#fff;border-radius:16px;padding:28px;box-shadow:var(--shadow);border:1px solid var(--line)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
label{font-size:14px;color:var(--muted)}
.req{color:var(--fire)}
input,select,textarea{min-height:44px;border:1px solid var(--line);border-radius:8px;background:var(--steam);padding:8px 12px}
input:focus,select:focus,textarea:focus{border-color:var(--fire);outline:none;box-shadow:0 0 0 3px rgba(177,50,40,.12)}
textarea{min-height:90px;resize:vertical}
.ok{background:rgba(62,107,74,.12);color:var(--tea);padding:12px 14px;border-radius:8px;margin-bottom:12px}
.err{background:rgba(138,75,47,.12);color:var(--soy);padding:12px 14px;border-radius:8px;margin-bottom:12px}
.site-footer{background:var(--ink);color:#e9dccb;padding:72px 0 28px}
.foot-grid{display:grid;grid-template-columns:1.3fr .8fr .9fr 1fr;gap:28px;margin-bottom:36px}
.site-footer a{color:#e9dccb}
.site-footer a:hover{color:var(--amber)}
.site-footer h3{color:#fff;font-size:16px;margin-bottom:12px}
.foot-copy{border-top:1px solid rgba(255,255,255,.08);padding-top:16px;font-size:13px;color:#cbbba8}
.dock{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 5vw;transform:translateY(110%);transition:transform .25s,opacity .25s;box-shadow:0 -8px 20px rgba(26,22,20,.2)}
.dock.show{transform:none}
.dock.dim{opacity:.35;pointer-events:none}
.dock-m{display:none;gap:8px}
@media (max-width:1280px){
.mod-d{grid-template-columns:1fr}
.mod-d img{height:140px}
}
@media (max-width:1024px){
:root{--space:80px}
.nav-links,.nav-cta{display:none}
.hamburger{display:flex}
.intro-grid,.philo-grid,.deploy,.prod-grid{grid-template-columns:1fr}
.prod.big{grid-row:auto;min-height:320px}
.mod-grid{grid-template-columns:repeat(2,1fr)}
.stats{grid-template-columns:repeat(3,1fr)}
.news-grid,.biz-grid,.timeline{grid-template-columns:1fr 1fr}
.reviews{grid-template-columns:1fr 1fr}
.foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
:root{--space:64px}
.infobar .trust{display:none}
.hero{min-height:92vh}
.sell-row,.stories,.reviews,.biz-grid,.news-grid,.guard,.stats,.fields,.timeline{grid-template-columns:1fr}
.sell-item{border-right:0;border-bottom:1px solid rgba(196,163,90,.22)}
.mod-grid{grid-template-columns:1fr}
.compare-table{display:none}
.m-compare{display:grid;gap:12px}
.m-card{background:#fff;border-radius:12px;padding:16px;border:1px solid var(--line)}
.slice{grid-template-columns:1fr}
.slice img{width:100%;height:160px}
.quote:nth-child(2),.quote:nth-child(3){margin-top:0}
.dock-d{display:none}
.dock-m{display:flex;width:100%}
.dock-m .btn{flex:1}
.foot-grid{grid-template-columns:1fr}
.intro-pic img{height:280px}
}
@media (max-width:375px){
body{font-size:16px}
.hero h1{font-size:30px}
.stat b{font-size:32px}
}