/* Vicecity Sub Thai · หน้าดาวน์โหลด (เลย์เอาต์ hero ตามแบบ ai-runtime ใส่เนื้อหาของเรา) */
:root{
  --bg:#000000; --text:#ffffff; --muted:#8e8e8e; --nav-text:#2e2e2e; --pill-dark:#28282a; --sign-in-text:#c8c8c8;
  --nav-shadow:0 4px 14px rgba(0,0,0,.16);
  --trust-bg:#28282a; --trust-border:rgba(255,255,255,.4); --trust-text:#c4c2c3;
  --pink:#ff5ea8; --violet:#8b5cf6; --teal:#3ee6d2; --orange:#ff9a62;
  --font-sans:"Inter","Noto Sans Thai","Segoe UI",system-ui,sans-serif;
  --font-display:"Doto","Geist Pixel Circle",monospace;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html{background:#000;scroll-behavior:smooth}
body{margin:0;background:#000;color:var(--text);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:12px}
body.menu-open{overflow:hidden}

/* ================= HERO (หนึ่งหน้าจอเต็ม) ================= */
.hero{position:relative;height:100vh;height:100dvh;min-height:600px;overflow:hidden}
.bg{position:absolute;inset:0;background:#000;overflow:hidden;z-index:0}
.bg canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.bg::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.page{position:relative;display:flex;flex-direction:column;align-items:center;height:100%;
  padding:clamp(16px,2.4vh,28px) clamp(14px,3vw,32px)}

/* ---- header ---- */
.top{position:relative;z-index:31;display:flex;align-items:center;justify-content:center;gap:clamp(18px,2.8vw,28px);width:100%;max-width:720px;flex-shrink:0;
  animation:slideDown .7s var(--ease) both}
.logo{width:clamp(40px,4.4vw,46px);height:clamp(40px,4.4vw,46px);border-radius:50%;background:#fff;box-shadow:var(--nav-shadow);
  display:grid;place-items:center;flex:none;transition:transform .3s var(--ease)}
.logo:hover{transform:scale(1.04)}
.logo img{width:72%;height:72%;object-fit:contain;border-radius:22%}
.nav{flex:1;max-width:430px;height:clamp(44px,5.2vw,48px);padding:4px 8px;border-radius:999px;background:#fff;box-shadow:var(--nav-shadow);
  display:flex;align-items:center;justify-content:space-around}
.nav a{position:relative;text-decoration:none;color:var(--nav-text);font-weight:500;font-size:clamp(13px,1.4vw,15px);letter-spacing:-.01em;
  opacity:.5;padding:8px 10px;transition:opacity .25s}
.nav a:hover{opacity:.75}
.nav a.active{opacity:1}
.nav a.active::after,.sheet a.active::after{content:"";position:absolute;left:50%;bottom:5px;width:3px;height:3px;margin-left:-1.5px;border-radius:50%;
  background:#000;box-shadow:-5px 0 0 #000,5px 0 0 #000}
.signin{height:clamp(44px,5.2vw,48px);padding:0 22px;border-radius:999px;background:var(--pill-dark);color:var(--sign-in-text);box-shadow:var(--nav-shadow);
  display:inline-flex;align-items:center;text-decoration:none;font-weight:500;font-size:clamp(13px,1.4vw,15px);white-space:nowrap;
  transition:background .25s,color .25s,transform .25s var(--ease)}
.signin:hover{background:#323234;color:#fff;transform:translateY(-1px)}
.burger{display:none}

/* ---- hero content ---- */
.hero-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;max-width:900px;width:100%}
.trust{--trust-size:clamp(36px,4.5vw,42px);display:inline-flex;align-items:center;margin-bottom:clamp(16px,2.5vh,26px)}
.av{position:relative;width:var(--trust-size);height:var(--trust-size);border-radius:50%;background:var(--trust-bg);border:1px solid var(--trust-border);padding:5px;
  transition:transform .35s var(--ease)}
.av i{width:100%;height:100%;border-radius:50%;background:#fff;display:grid;place-items:center;color:#111;font-size:calc(var(--trust-size) * .34)}
.av + .av{margin-left:calc(var(--trust-size) * -.42)}
.av.a1{z-index:1}.av.a2{z-index:2}.av.a3{z-index:4}
.trust:hover .a1{transform:translateY(-2px)}.trust:hover .a2{transform:translateY(-4px)}.trust:hover .a3{transform:translateY(-2px)}
.trust-pill{height:var(--trust-size);margin-left:calc(var(--trust-size) * -.42);padding:0 16px 0 calc(var(--trust-size) * .58);border-radius:999px;
  background:var(--trust-bg);border:1px solid var(--trust-border);color:var(--trust-text);font-weight:500;font-size:clamp(12px,1.4vw,13.5px);
  display:inline-flex;align-items:center;white-space:nowrap;z-index:3}

.headline{margin:0;font-family:var(--font-display);font-weight:700;color:#fff;font-size:clamp(28px,6.2vw,80px);letter-spacing:-.04em;line-height:1.12;
  text-shadow:0 0 28px rgba(255,140,200,.35)}
.headline span{display:block;white-space:nowrap;overflow:hidden;opacity:0;transform:translateY(14px);animation:headlineFade .85s var(--ease) forwards}
.headline span:nth-child(1){animation-delay:.12s}
.headline span:nth-child(2){animation-delay:.3s}
.sub{max-width:min(540px,92%);margin:clamp(14px,2.2vh,22px) auto clamp(20px,3vh,30px);color:#d0d0d0;opacity:.8;line-height:1.6;font-weight:400;
  font-size:clamp(calc(13.5px + 2pt),calc(1.55vw + 2pt),calc(16.5px + 2pt))}
.cta-row{display:flex;flex-direction:column;align-items:center;gap:12px}
.cta{display:inline-flex;align-items:center;gap:10px;background:#fff;color:#000;text-decoration:none;font-weight:600;font-size:clamp(13.5px,1.5vw,14.5px);
  padding:clamp(11px,1.6vh,13px) clamp(22px,3vw,28px);border-radius:999px;
  box-shadow:0 0 0 1px rgba(255,255,255,.15),0 0 22px rgba(255,255,255,.32),0 0 44px rgba(255,255,255,.12);
  transition:transform .3s var(--ease),box-shadow .3s}
.cta:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 0 0 1px rgba(255,255,255,.25),0 0 30px rgba(255,255,255,.5),0 0 70px rgba(255,140,200,.3)}
.cta-alt{font-size:13px;color:#cfcfcf;opacity:.75;text-decoration:none}
.cta-alt:hover{opacity:1;text-decoration:underline}

/* ---- stats ---- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,2vw,24px);width:100%;max-width:920px;flex-shrink:0;text-align:center}
.stat .ic{font-family:var(--font-display);font-weight:700;font-size:clamp(22px,3vw,33px);color:#fff;line-height:1;margin-bottom:8px}
.stat .val{font-family:var(--font-sans);font-weight:600;font-size:clamp(18px,2.2vw,26px);letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.stat .lbl{color:var(--muted);font-size:clamp(11px,1.2vw,12.5px);margin-top:2px}

/* ---- เข้าฉาก ---- */
.anim{opacity:0;transform:translateY(22px) scale(.98);filter:blur(6px);animation:reveal .85s var(--ease) forwards;animation-delay:var(--d,0s)}
.cta.anim{animation-name:revealPulse}
.headline.anim{opacity:1;transform:none;filter:none;animation:none}
@keyframes reveal{to{opacity:1;transform:none;filter:none}}
@keyframes revealPulse{0%{opacity:0;transform:translateY(22px) scale(.98);filter:blur(6px)}70%{opacity:1;transform:translateY(0) scale(1.04);filter:none}100%{opacity:1;transform:none;filter:none}}
@keyframes headlineFade{to{opacity:1;transform:none}}
@keyframes slideDown{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:none}}
@keyframes overlayIn{from{opacity:0}to{opacity:1}}
@keyframes menuIn{from{opacity:0;transform:translateY(-10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes linkIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* scroll cue */
.cue{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:1;width:22px;height:34px;border-radius:12px;border:1.5px solid rgba(255,255,255,.35);opacity:.7}
.cue::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:#fff;animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{opacity:0;transform:translateY(-3px)}40%{opacity:1}100%{opacity:0;transform:translateY(10px)}}

/* ================= ส่วนล่าง ================= */
.wrap{max-width:1040px;margin:0 auto;padding:0 clamp(16px,3vw,28px)}
.block{position:relative;padding:clamp(80px,11vw,140px) 0}
.block.glow::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 0%,rgba(255,94,168,.12),transparent 70%),radial-gradient(50% 40% at 90% 100%,rgba(139,92,246,.1),transparent 70%)}
.kicker{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.06em;color:var(--pink);text-align:center;margin:0 0 10px}
h2{margin:0 0 14px;text-align:center;font-size:clamp(30px,4.6vw,54px);line-height:1.15;font-weight:600;letter-spacing:-.02em}
.lede{text-align:center;color:#a9a9b3;max-width:600px;margin:0 auto 46px;font-size:17px;line-height:1.6}
.rv{opacity:0;transform:translateY(30px);filter:blur(6px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)}
.rv.in{opacity:1;transform:none;filter:none}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}

/* download cards */
.dl-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:760px){.dl-grid{grid-template-columns:1fr}}
.dl{position:relative;border-radius:28px;padding:30px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);overflow:hidden;
  transition:transform .4s var(--ease)}
.dl:hover{transform:translateY(-4px)}
.dl.mine::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--a,0deg),var(--pink),var(--violet),var(--teal),var(--pink));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 5s linear infinite}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes spin{to{--a:360deg}}
.dl .os{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.dl .os i{font-size:38px;width:44px;text-align:center}
.dl .os b{display:block;font-size:24px;font-weight:600}
.dl .os small{color:#8e8e98;font-size:14px}
.dl .tag{position:absolute;top:24px;right:24px;font-size:12px;font-weight:600;padding:4px 10px;border-radius:99px;background:rgba(62,230,210,.14);color:var(--teal)}
.dl .tag.beta{background:rgba(255,154,98,.14);color:var(--orange)}
.dl ul{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:7px;color:#b4b4bd;font-size:15px}
.dl li{display:flex;gap:10px}
.dl li::before{content:"";flex:none;width:6px;height:6px;margin-top:9px;border-radius:50%;background:var(--pink);box-shadow:0 0 8px var(--pink)}
.dl .get{display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 8px 0 22px;border-radius:999px;background:#fff;color:#000;text-decoration:none;font-weight:600;
  box-shadow:0 0 22px rgba(255,255,255,.18);transition:transform .3s var(--ease)}
.dl .get:hover{transform:translateY(-2px)}
.dl .get .meta{margin-left:auto;margin-right:10px;font-weight:500;font-size:13px;color:#666}
.dl .get .go{width:40px;height:40px;border-radius:50%;background:#000;color:#fff;display:grid;place-items:center}
.dl .get.disabled{opacity:.45;pointer-events:none}
.dl .more{display:inline-block;margin-top:12px;font-size:14px;color:var(--teal);text-decoration:none;font-weight:600}

/* panel demo */
.callouts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
@media(max-width:760px){.callouts{grid-template-columns:repeat(2,1fr)}}
.co{position:relative;padding:18px 16px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);cursor:pointer;
  transition:transform .3s var(--ease),background .3s,border-color .3s}
.co:hover{transform:translateY(-3px);background:rgba(255,255,255,.07)}
.co.on{border-color:rgba(255,94,168,.7);background:rgba(255,94,168,.1);box-shadow:0 0 24px rgba(255,94,168,.2)}
.co .n{font-family:var(--font-display);font-weight:700;color:var(--pink);font-size:20px}
.co b{display:block;font-size:16px;font-weight:600;margin:4px 0 2px}
.co span{color:#9a9aa5;font-size:13px}
.stage{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:16/8;background:#1a1028 url("img/palms.webp") center/cover;border:1px solid rgba(255,255,255,.1)}
@media(max-width:760px){.stage{aspect-ratio:4/5}}
.stage::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.5))}
.mock{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:6px;padding:6px;border-radius:999px;
  background:rgba(14,10,24,.7);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.16)}
.mock img{height:24px;width:auto;margin:0 6px}
.mock button{font:inherit;font-size:12.5px;font-weight:600;color:#fff;background:rgba(255,255,255,.08);border:0;border-radius:999px;padding:7px 12px;cursor:pointer;white-space:nowrap;transition:background .2s}
.mock button.on{background:var(--pink)}
@media(max-width:760px){.mock{flex-wrap:wrap;justify-content:center;width:92%;border-radius:20px}}
.scene-en{position:absolute;left:50%;bottom:24%;transform:translateX(-50%);z-index:3;color:#fff;font-weight:600;font-size:clamp(12px,1.6vw,17px);text-shadow:0 1px 4px #000;width:90%;text-align:center}
.scene-sub{position:absolute;left:50%;bottom:7%;transform:translateX(-50%) translateY(8px);z-index:3;max-width:86%;text-align:center;padding:10px 22px;border-radius:16px;background:rgba(8,6,14,.72);
  color:#fff;font-weight:700;font-size:clamp(15px,2.2vw,24px);opacity:0;transition:opacity .3s,transform .3s var(--ease)}
.scene-sub.show{opacity:1;transform:translateX(-50%)}
.scene-card{position:absolute;right:5%;top:30%;z-index:3;width:min(300px,44%);padding:14px 16px;border-radius:16px;background:rgba(14,10,24,.82);border:1px solid rgba(255,255,255,.14);color:#fff;font-size:14px;display:none;cursor:move;touch-action:none}
.scene-card.show{display:block;animation:menuIn .35s var(--ease)}
.scene-card small{display:block;color:rgba(255,255,255,.5);font-size:11px;letter-spacing:.12em;margin-bottom:4px}
.hint{text-align:center;color:#8e8e98;font-size:14px;margin-top:14px}
.keys{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:24px}
@media(max-width:760px){.keys{grid-template-columns:repeat(2,1fr)}}
.keys div{display:flex;align-items:center;gap:10px;font-size:14px;color:#c4c4cc;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.kbd{min-width:34px;text-align:center;font-weight:700;font-size:12.5px;padding:2px 8px;border-radius:7px;background:#1c1c20;border:1px solid #3a3a42;border-bottom-width:3px;color:#fff}

/* support */
.support{display:grid;grid-template-columns:300px 1fr;gap:40px;align-items:center;padding:36px;border-radius:30px;background:linear-gradient(160deg,rgba(255,94,168,.1),rgba(139,92,246,.06) 60%,rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1)}
@media(max-width:760px){.support{grid-template-columns:1fr;padding:22px}}
.qr{background:#fff;border-radius:22px;padding:16px;transform:rotate(-2deg);box-shadow:0 30px 60px -20px rgba(255,94,168,.35);transition:transform .5s var(--ease)}
.qr:hover{transform:rotate(0) scale(1.02)}
.qr p{color:#555;font-size:12.5px;text-align:center;margin:10px 0 0}
.support .kicker,.support h2{text-align:left}
.support p{color:#c4c4cc;line-height:1.7;margin:0 0 12px}

/* FAQ */
.faq{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.faq details{border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:0 20px;transition:background .3s}
.faq details[open]{background:rgba(255,255,255,.07)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:12px;padding:18px 0;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-display);font-weight:700;color:var(--pink);font-size:20px;line-height:1;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:0 0 18px;color:#a9a9b3;line-height:1.7}

.social{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.social a{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 22px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);text-decoration:none;font-weight:500;transition:background .25s,transform .25s var(--ease)}
.social a:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
.social a[data-todo]{opacity:.45}
footer{border-top:1px solid rgba(255,255,255,.08);padding:26px 0 36px;color:#77777f;font-size:13px}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
footer a{text-decoration:none;color:#a9a9b3;margin-left:14px}

/* ================= มือถือ ================= */
@media(max-width:720px){
  .nav,.top>.signin{display:none}
  .top{justify-content:space-between}
  .logo{width:48px;height:48px}
  .burger{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--pill-dark);border:0;cursor:pointer;position:relative;z-index:31;box-shadow:var(--nav-shadow);transition:background .25s}
  .burger span{position:absolute;width:18px;height:1.5px;background:#fff;border-radius:2px;transition:transform .3s var(--ease),opacity .2s,background .25s}
  .burger span:nth-child(1){transform:translateY(-6.5px)}.burger span:nth-child(3){transform:translateY(6.5px)}
  .burger[aria-expanded="true"]{background:#fff}
  .burger[aria-expanded="true"] span{background:#000}
  .burger[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg)}
  .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .burger[aria-expanded="true"] span:nth-child(3){transform:rotate(-45deg)}
  .headline{font-size:clamp(30px,10.5vw,56px);letter-spacing:-.06em;line-height:1.08}
  .stats{grid-template-columns:1fr 1fr;row-gap:18px}
}
.overlay{position:fixed;inset:0;z-index:29;background:rgba(0,0,0,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:overlayIn .28s ease both}
.sheet{position:fixed;z-index:30;top:84px;left:0;right:0;margin:0 auto;width:min(92vw,420px);background:#fff;border-radius:28px;padding:22px 18px 20px;
  box-shadow:0 20px 60px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:4px;animation:menuIn .38s var(--ease) both}
.sheet a{position:relative;color:var(--nav-text);text-decoration:none;font-weight:500;font-size:18px;padding:14px 12px;border-radius:16px;opacity:0;animation:linkIn .4s var(--ease) forwards}
.sheet a:nth-child(1){animation-delay:.06s}.sheet a:nth-child(2){animation-delay:.11s}.sheet a:nth-child(3){animation-delay:.16s}.sheet a:nth-child(4){animation-delay:.21s}.sheet a:nth-child(5){animation-delay:.26s}
.sheet a:hover{background:#f3f3f5}
.sheet a.active::after{bottom:8px;left:24px;margin-left:0}
.sheet .sheet-signin{margin-top:8px;background:var(--pill-dark);color:#fff;text-align:center;border-radius:999px}
.overlay[hidden],.sheet[hidden]{display:none}
@media(max-width:420px){
  .trust{--trust-size:34px}
  .trust-pill{font-size:12px}
}
@media(max-height:700px){
  .trust{margin-bottom:10px}
  .sub{margin:10px auto 16px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .anim,.headline span,.rv,.sheet a{opacity:1!important;transform:none!important;filter:none!important}
}

/* ---- หน้าตาโปรแกรม ---- */
.showcase{display:flex;flex-direction:column;align-items:center;gap:22px;margin-bottom:46px}
.shot{position:relative;margin:0;width:100%;border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.14);background:#0b0712;
  box-shadow:0 40px 90px -30px rgba(255,94,168,.45),0 0 0 1px rgba(0,0,0,.4);transition:transform .5s var(--ease)}
.shot::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(600px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.12),transparent 45%)}
.shot img{width:100%;height:auto}
.shot.small{max-width:720px}
.shot figcaption{padding:12px 16px;font-size:14px;color:#a9a9b3;text-align:center;border-top:1px solid rgba(255,255,255,.08)}
.feat{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:860px){.feat{grid-template-columns:1fr 1fr}}
.f{padding:22px 18px;border-radius:20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);transition:transform .35s var(--ease),border-color .35s,background .35s}
.f:hover{transform:translateY(-4px);border-color:rgba(255,94,168,.5);background:rgba(255,94,168,.06)}
.f i{font-size:20px;color:var(--pink);margin-bottom:14px;display:block}
.f b{display:block;font-size:17px;font-weight:600;margin-bottom:4px}
.f span{color:#9a9aa5;font-size:14px;line-height:1.55}
.news{margin-top:18px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:0 20px}
.news summary{cursor:pointer;padding:16px 0;font-weight:500;color:#d6d6dc}
.news ul{margin:0 0 16px;padding-left:20px;color:#a9a9b3;line-height:1.8}
.stage{transition:filter .5s}
.stage.dark{filter:grayscale(.25) brightness(.5)}
.social a i{font-size:18px}