.night-page { --night-blue:#718adf; --night-cyan:#62b5f3; --night-gold:#f2c75c; --night-purple:#b18bf4; }
.night-page .hero { background:linear-gradient(110deg,rgba(113,138,223,.035),transparent 46%),var(--bg); }
.night-page .hero h1 { max-width:780px; }
.night-page .hero-glow-one { background:radial-gradient(circle,rgba(113,138,223,.16),transparent 68%); }
.night-page .night-visual::before { display:none; }
.night-visual { min-height:410px; }
.moon-glow { position:absolute; left:50%; top:48%; width:360px; height:360px; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle,rgba(113,138,223,.12),transparent 68%); }
.moon-disc { position:absolute; z-index:2; left:50%; top:47%; width:265px; height:265px; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid rgba(113,138,223,.23); border-radius:50%; background:radial-gradient(circle at 36% 30%,#2b3042,#191c28 62%,#10121a); box-shadow:0 38px 80px rgba(0,0,0,.5),inset -28px -22px 50px rgba(0,0,0,.28),0 0 60px rgba(113,138,223,.08); line-height:1; }
.moon-disc>span { color:var(--night-purple); font-size:11px; font-weight:700; letter-spacing:.28em; }.moon-disc>strong { margin:11px 0 7px; font-size:45px; letter-spacing:-.04em; }.moon-disc>small { color:#777d91; font-size:8px; letter-spacing:.18em; }
.clock-hand { position:absolute; left:50%; bottom:50%; width:1px; transform-origin:bottom; background:rgba(255,255,255,.16); }.hand-hour { height:70px; transform:rotate(165deg); }.hand-minute { height:94px; transform:rotate(45deg); background:rgba(113,138,223,.27); }
.night-orbit { position:absolute; left:50%; top:47%; width:410px; height:250px; transform:translate(-50%,-50%) rotate(-14deg); border:1px dashed rgba(113,138,223,.14); border-radius:50%; }
.time-card { position:absolute; z-index:4; min-width:118px; padding:12px 14px; display:flex; flex-direction:column; border:1px solid rgba(255,255,255,.1); border-radius:14px; background:rgba(27,28,39,.94); box-shadow:0 16px 36px rgba(0,0,0,.34); animation:float-card 5s ease-in-out infinite; }
.time-card b { font:700 17px "Yume Quicksand",sans-serif; }.time-card span { color:#777b88; font-size:8px; text-transform:uppercase; }
.card-start { left:-3%; top:13%; border-left:3px solid var(--night-blue); }.card-peak { right:-4%; top:12%; border-left:3px solid var(--night-purple); animation-delay:-1.7s; }.card-end { right:-2%; bottom:14%; border-left:3px solid var(--night-cyan); animation-delay:-3.4s; }
.cityline { position:absolute; z-index:3; left:7%; right:7%; bottom:7%; height:66px; display:flex; align-items:flex-end; gap:5px; opacity:.52; }.cityline i { flex:1; height:32px; border:1px solid rgba(113,138,223,.16); background:repeating-linear-gradient(0deg,transparent 0 8px,rgba(242,199,92,.12) 8px 10px),#151823; }.cityline i:nth-child(2){height:54px}.cityline i:nth-child(3){height:41px}.cityline i:nth-child(4){height:65px}.cityline i:nth-child(5){height:47px}.cityline i:nth-child(7){height:58px}
.star { position:absolute; z-index:5; color:var(--night-gold); }.star-a { left:14%; top:43%; }.star-b { right:16%; top:40%; color:var(--night-cyan); font-size:25px; }.star-c { left:24%; bottom:22%; color:var(--night-purple); font-size:8px; }

.night-timeline { display:grid; grid-template-columns:auto 1fr auto 1fr auto 1fr auto; gap:10px; align-items:center; margin:29px 0; }.night-timeline>span { display:flex; flex-direction:column; align-items:center; min-width:75px; }.night-timeline b { color:#85818a; font:700 12px "Yume Quicksand",sans-serif; }.night-timeline small { color:#5e5a63; font-size:8px; }.night-timeline>i { height:1px; background:#393943; }.night-timeline .active b { color:var(--night-purple); }.night-timeline .active-line { background:linear-gradient(90deg,var(--night-blue),var(--night-purple)); }
.night-definition { border-color:rgba(177,139,244,.18); background:rgba(177,139,244,.05); }.night-definition .definition-symbol { color:var(--night-purple); background:rgba(177,139,244,.11); font:700 13px "Yume Quicksand",sans-serif; }
.audience-compare { display:grid; grid-template-columns:1fr auto 1fr; gap:20px; align-items:center; margin:28px 0; }.audience-compare article { padding:21px; border:1px solid var(--line); border-radius:17px; background:rgba(255,255,255,.018); }.audience-compare article>span { color:var(--night-gold); font-size:9px; font-weight:700; letter-spacing:.13em; }.audience-compare article:last-child>span { color:var(--night-purple); }.audience-compare h3 { margin:9px 0 11px; font-size:14px; }.audience-compare ul { margin:0; padding-left:16px; color:#8d8992; font-size:10px; line-height:1.9; }.audience-compare>i { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; color:#66626b; background:#17171d; font:700 9px "Yume Quicksand",sans-serif; font-style:normal; }
.revenue-orbit { position:relative; min-height:270px; margin:28px 0; border:1px solid var(--line); border-radius:20px; background:radial-gradient(circle,rgba(113,138,223,.08),transparent 58%),#17171d; }.revenue-orbit::before { content:""; position:absolute; left:50%; top:50%; width:310px; height:155px; transform:translate(-50%,-50%) rotate(-8deg); border:1px dashed rgba(113,138,223,.15); border-radius:50%; }.revenue-core { position:absolute; z-index:2; left:50%; top:50%; width:90px; height:90px; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid rgba(113,138,223,.2); border-radius:50%; background:#202330; }.revenue-core small { color:var(--night-blue); font-size:8px; }.revenue-core strong { font-size:24px; }.revenue-item { position:absolute; z-index:3; padding:8px 11px; border:1px solid var(--line); border-radius:10px; color:#a5a1aa; background:#202028; font-size:9px; }.item-disc { left:8%; top:19%; }.item-stream { right:10%; top:17%; color:var(--night-cyan); }.item-global { right:7%; bottom:18%; color:var(--night-purple); }.item-goods { left:9%; bottom:16%; color:var(--night-gold); }
.night-reasons { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:27px; }.night-reasons article { min-height:190px; padding:20px; border:1px solid var(--line); border-radius:17px; background:rgba(255,255,255,.018); }.night-reasons span { color:var(--night-purple); font:700 10px "Yume Quicksand",sans-serif; }.night-reasons h3 { margin:14px 0 7px; font-size:13px; }.night-reasons p { margin:0; color:#89858e; font-size:10px; line-height:1.65; }.night-table-wrap { margin-top:22px; }.night-table { min-width:620px; }
.day-night-cards { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:27px 0; }.day-night-cards article { display:flex; gap:15px; padding:20px; border:1px solid var(--line); border-radius:17px; background:rgba(255,255,255,.018); }.day-night-cards article>span { flex:0 0 36px; display:grid; place-items:center; width:36px; height:36px; border-radius:11px; font-size:18px; }.day-card>span { color:var(--night-gold); background:rgba(242,199,92,.1); }.late-card>span { color:var(--night-purple); background:rgba(177,139,244,.1); }.day-night-cards h3 { margin:1px 0 5px; font-size:13px; }.day-night-cards p { margin:0; color:#89858e; font-size:10px; line-height:1.6; }
.night-steps li>span { border-color:rgba(113,138,223,.23); color:var(--night-blue); }.schedule-note { padding:15px 17px; border-left:3px solid var(--night-blue); border-radius:0 12px 12px 0; color:#918d96!important; background:rgba(113,138,223,.045); font-size:12px; }.night-conclusion { background:linear-gradient(145deg,rgba(113,138,223,.09),rgba(177,139,244,.025) 65%),var(--surface); border-color:rgba(113,138,223,.19); }.night-conclusion .conclusion-mark { color:var(--night-purple); }

@media(max-width:640px){
  .night-timeline { grid-template-columns:1fr; }.night-timeline>i { width:1px; height:15px; justify-self:center; }
  .audience-compare { grid-template-columns:1fr; }.audience-compare>i { justify-self:center; }
  .night-reasons { grid-template-columns:1fr; }.night-reasons article { min-height:auto; }.day-night-cards { grid-template-columns:1fr; }
  .revenue-orbit { min-height:310px; }.revenue-orbit::before { width:250px; }.revenue-item { font-size:8px; }.item-disc { left:4%; }.item-stream { right:4%; }.item-global { right:3%; }.item-goods { left:4%; }
}