:root{--bg:#fbf9fd;--card:#fff;--ink:#1d1726;--dim:#6b6278;--line:#e9e3f0;--accent:#7b4dff;--accent-ink:#fff;
--soon:#fff4d6;--soon-ink:#7a5a00;--build:#eef0f4;--build-ink:#555}
@media (prefers-color-scheme:dark){:root{--bg:#160f1f;--card:#211832;--ink:#ece6f5;--dim:#a99fba;--line:#33284a;
--accent:#b79cff;--accent-ink:#1a1225;--soon:#3a2f10;--soon-ink:#ffd66b;--build:#2a2438;--build-ink:#bdb5cc}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.7 -apple-system,"Segoe UI","Apple SD Gothic Neo","Malgun Gothic",sans-serif}
a{color:var(--accent)}.wrap{max-width:880px;margin:0 auto;padding:0 16px}.dim{color:var(--dim)}
.top{border-bottom:1px solid var(--line);background:var(--card)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:700}
.brand img{border-radius:8px}nav{display:flex;gap:16px}nav a{color:var(--ink);text-decoration:none;font-size:.95rem}
nav a:hover{color:var(--accent)}main{padding:24px 16px 48px}
.hero{padding:40px 0 16px}.hero h1{font-size:clamp(1.8rem,5vw,2.6rem);line-height:1.25;margin:0 0 12px}
.hero p{max-width:40em;color:var(--dim);margin:0}
h2{font-size:1.25rem;margin:40px 0 12px}
.cards{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px}
.card a,.card.building{display:flex;gap:14px;padding:16px;color:var(--ink);text-decoration:none;align-items:flex-start}
.card a:hover{border-radius:16px;box-shadow:0 0 0 2px var(--accent)}.card img{border-radius:14px;flex:none}
.card .ph{width:64px;height:64px;border-radius:14px;background:var(--build);flex:none}
.tag{color:var(--dim);font-size:.92rem;margin-top:2px}
.badge{display:inline-block;margin-top:8px;font-size:.78rem;padding:2px 10px;border-radius:99px;background:var(--build);color:var(--build-ink)}
.badge.soon{background:var(--soon);color:var(--soon-ink)}.badge.live{background:var(--accent);color:var(--accent-ink)}
.app-head{display:flex;gap:20px;align-items:center;padding:24px 0}.app-head img{border-radius:22px;flex:none}
.app-head h1{margin:0;font-size:1.9rem;line-height:1.2}
.feature{width:100%;height:auto;border-radius:16px;border:1px solid var(--line);margin:8px 0 16px}
.points{padding-left:1.2em}.points li{margin:4px 0}
.btn{display:inline-block;margin-top:8px;padding:10px 18px;border-radius:12px;background:var(--accent);color:var(--accent-ink);text-decoration:none;font-weight:700}
.plain{list-style:none;padding:0}.plain li{padding:12px 0;border-top:1px solid var(--line)}
.plain li:last-child{border-bottom:1px solid var(--line)}.plain a{text-decoration:none}
.big{font-size:1.3rem;font-weight:700}.links{margin-top:24px}
.foot{border-top:1px solid var(--line);padding:24px 0 40px;font-size:.88rem;color:var(--dim)}.foot .wrap>div{margin:2px 0}
@media (max-width:520px){.app-head{flex-direction:column;align-items:flex-start}nav{gap:12px}}