:root { --orange:#ff5a14; --ink:#151515; --paper:#f6f4ef; --muted:#77736d; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif; }
a { color:inherit; text-decoration:none; }
.shell { width:min(1180px,calc(100% - 48px)); margin:0 auto; }
.nav { height:108px; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:10; }
.brand { display:block; }
.wordmark { display:inline-flex; align-items:baseline; gap:5px; font-weight:900; letter-spacing:-.1em; line-height:.8; }
.wordmark span { color:var(--orange); font-size:37px; }
.wordmark em { color:var(--ink); font-size:20px; font-style:normal; letter-spacing:-.07em; }
.navLinks { display:flex; gap:38px; font-size:13px; font-weight:700; letter-spacing:.12em; }
.navLinks a:hover { color:var(--orange); }
.hero { min-height:690px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; padding-bottom:70px; }
.kicker { display:flex; align-items:center; gap:12px; font-size:12px; font-weight:800; letter-spacing:.22em; margin:0 0 30px; }
.kicker span { width:28px; height:3px; background:var(--orange); }
.hero h1 { font-size:clamp(48px,6vw,84px); line-height:1.06; letter-spacing:-.065em; margin:0; max-width:770px; }
.hero h1 span,.manifesto h2 span { color:var(--orange); }
.heroLead { max-width:560px; font-size:18px; line-height:1.9; color:var(--muted); margin:34px 0; }
.textLink { display:inline-flex; align-items:center; gap:18px; font-size:14px; font-weight:800; letter-spacing:.08em; border-bottom:2px solid var(--ink); padding-bottom:8px; }
.textLink i { color:var(--orange); font-size:20px; font-style:normal; }
.heroArt { height:560px; position:relative; }
.orbit { position:absolute; border:1px solid #d5d0c7; border-radius:50%; inset:28px 5px 28px 5px; transform:rotate(-18deg); }
.orbitTwo { inset:95px 75px; transform:rotate(28deg); border-color:#e4b7a4; }
.tile,.bolt { position:absolute; display:grid; place-items:center; font-weight:900; box-shadow:0 24px 60px #a44a2025; }
.tile { width:126px; height:126px; border-radius:30px; background:var(--orange); color:white; font-size:54px; }
.tileA { left:8%; top:14%; transform:rotate(-12deg); }
.tileB { right:4%; bottom:12%; transform:rotate(13deg); background:#ffd62e; color:var(--ink); }
.bolt { width:210px; height:210px; left:38%; top:31%; border-radius:50%; background:#fff; border:42px solid var(--ink); color:var(--orange); font-size:40px; transform:rotate(12deg); }
.miniDot { position:absolute; width:19px; height:19px; border-radius:50%; background:var(--orange); }
.d1{left:15%;bottom:17%}.d2{right:16%;top:15%;background:#ffd62e}.d3{right:11%;top:22%;width:9px;height:9px;background:var(--ink)}
.manifesto { background:var(--ink); color:white; padding:110px 0; }
.manifestoGrid { display:grid; grid-template-columns:1fr 2.7fr; column-gap:70px; }
.manifestoGrid>p:first-child { font-size:11px; letter-spacing:.22em; font-weight:800; color:#a7a39c; padding-top:12px; }
.manifesto h2 { font-size:clamp(34px,4vw,58px); line-height:1.22; letter-spacing:-.04em; margin:0; }
.manifestoBody { grid-column:2; max-width:700px; color:#aaa7a2; font-size:16px; line-height:1.9; margin:38px 0 0; }
.games { padding:120px 0 0; }
.sectionHead h2 { font-size:clamp(44px,6vw,76px); letter-spacing:-.06em; line-height:1.05; margin:0 0 90px; }
.game { padding:95px 0; overflow:hidden; }
.gameGrid { min-height:650px; display:grid; grid-template-columns:.82fr 1.18fr; gap:70px; align-items:center; }
.gameNo { font:700 11px monospace; letter-spacing:.18em; color:#9e9991; margin-bottom:44px; }
.gameTitle { display:flex; gap:18px; align-items:center; }
.gameTitle img { width:80px; height:80px; border-radius:20px; box-shadow:0 14px 30px #0002; }
.gameTitle p { margin:0 0 7px; color:var(--orange); font-size:10px; font-weight:900; letter-spacing:.18em; }
.gameTitle h3 { margin:0; font-size:30px; letter-spacing:-.035em; }
.game h4 { font-size:clamp(30px,3.4vw,50px); line-height:1.2; letter-spacing:-.05em; margin:48px 0 24px; }
.gameDesc { color:var(--muted); font-size:16px; line-height:1.9; max-width:490px; }
.game ul { display:flex; flex-wrap:wrap; gap:14px 24px; padding:0; margin:30px 0 0; list-style:none; font-size:13px; font-weight:700; }
.game li span { color:var(--orange); margin-right:7px; }
.phoneStage { height:650px; position:relative; }
.blob { position:absolute; inset:80px 0 40px 70px; border-radius:46% 54% 53% 47% / 40% 47% 53% 60%; background:#ffdac8; transform:rotate(-7deg); }
.phone { position:absolute; width:248px; padding:9px; border-radius:38px; background:#161616; box-shadow:0 35px 70px #5d311b35; }
.phone img { display:block; width:100%; border-radius:30px; }
.speaker { position:absolute; width:68px; height:17px; background:#161616; top:8px; left:50%; transform:translateX(-50%); border-radius:0 0 12px 12px; z-index:2; }
.phone1 { top:25px; left:16%; transform:rotate(-8deg); }
.phone2 { bottom:0; right:8%; transform:rotate(8deg); }
.unscrew { background:#efede7; }
.unscrew .gameGrid { grid-template-columns:1.18fr .82fr; }
.unscrew .gameCopy { order:2; }
.unscrew .phoneStage { order:1; }
.unscrew .blob { background:#d9eeca; inset:60px 60px 50px 0; }
.unscrew .phone1 { left:4%; }.unscrew .phone2 { right:13%; }
.values { background:var(--orange); color:white; padding:105px 0; }
.valuesGrid { display:grid; grid-template-columns:repeat(3,1fr); gap:70px; }
.values strong { font:700 12px monospace; opacity:.65; }
.values h3 { font-size:25px; margin:28px 0 15px; }
.values p { opacity:.8; line-height:1.8; margin:0; font-size:14px; }
footer { background:var(--ink); color:white; padding:65px 0; }
.footerGrid { display:grid; grid-template-columns:1fr 1fr 1fr; align-items:end; }
.footerBrand .wordmark span { font-size:30px; }.footerBrand .wordmark em { color:white; font-size:16px; }
.footerBrand p { color:#85827e; margin:8px 0 0; font-size:13px; }
.copyright { color:#77736f; font-size:10px; letter-spacing:.14em; text-align:center; }
footer a { text-align:right; color:var(--orange); font-weight:700; font-size:13px; }
@media(max-width:800px){.shell{width:min(100% - 30px,1180px)}.nav{height:84px}.brand{width:98px;height:55px}.navLinks{gap:18px;font-size:11px}.hero{grid-template-columns:1fr;padding-top:55px}.heroArt{height:430px}.manifestoGrid{grid-template-columns:1fr}.manifestoBody{grid-column:1}.gameGrid,.unscrew .gameGrid{grid-template-columns:1fr}.phoneStage{height:590px}.unscrew .gameCopy,.unscrew .phoneStage{order:initial}.valuesGrid{grid-template-columns:1fr;gap:52px}.footerGrid{grid-template-columns:1fr;gap:35px;align-items:start}.copyright,footer a{text-align:left}.game{padding:70px 0}.games{padding-top:80px}.sectionHead h2{margin-bottom:45px}}
@media(max-width:480px){.hero h1{font-size:48px}.heroLead{font-size:16px}.heroArt{height:360px}.tile{width:86px;height:86px;font-size:38px;border-radius:22px}.bolt{width:150px;height:150px;border-width:30px;left:35%}.manifesto{padding:80px 0}.gameTitle img{width:66px;height:66px}.phone{width:190px;border-radius:30px}.phone img{border-radius:23px}.phoneStage{height:480px}.phone1{left:3%}.phone2{right:2%}.gameGrid{gap:35px}}
