/* 18688.net 首页 · 定稿方向 A「大字招牌」(设计基准:design/2026-10-02-A-bigtype.dc.html + DESIGN.md)
   颜色/字号一律用下面的变量,页面里不写死色值。品牌红与子站 dl.18688.net 同一个。 */
:root{
  --bg:#f4f5f7;--ink:#14161b;--body:#4a4f5c;--mute:#6b7180;--line:#e2e5ea;
  --brand:#ff3b5c;            /* 品牌红:标题强调字、勾号 */
  --slab:#e0244a;             /* 红色大块底色:比品牌红压深一档,白字对比度 4.6:1 达标 */
  --on-slab:#fff;
  --chip:rgba(0,0,0,.2);      /* 红块上的"已上线"小标签底 */
  --btn:#14161b;--on-btn:#fff;/* 红块上的黑色按钮 */
  --frame:#14161b;            /* 手机边框 */
  --shadow:0 24px 60px -28px rgba(224,36,74,.55);
  --shadow-phone:0 30px 60px -20px rgba(0,0,0,.45);
  --r:24px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Microsoft YaHei","Segoe UI",Roboto,sans-serif;
  --font-display:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","PingFang SC","Microsoft YaHei",sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0e0f12;--ink:#f1f2f5;--body:#b5bac6;--mute:#8a909e;--line:#23262e;
  --brand:#ff4d6a;--btn:#0e0f12;
  --shadow:0 24px 60px -30px rgba(255,77,106,.45);
}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--font);-webkit-font-smoothing:antialiased}
.display{font-family:var(--font-display)}
.shell{max-width:1080px;margin:0 auto;padding:0 20px}

.top{display:flex;justify-content:space-between;align-items:center;height:64px}
.brand{font-weight:900;font-size:20px;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.brand b{color:var(--brand)}
.lang{border:1.5px solid var(--ink);background:transparent;color:var(--ink);border-radius:999px;padding:4px 14px;
  font:600 13px/1.4 var(--font);cursor:pointer}
.lang:active{transform:scale(.96)}

.hero{padding:28px 0 8px}
h1{text-wrap:balance;font-weight:900;font-size:clamp(40px,11vw,92px);line-height:1.04;letter-spacing:-.035em;margin:0 0 18px;max-width:11em}
h1 em{font-style:normal;color:var(--brand)}
.sub{font-size:clamp(16px,2.2vw,19px);color:var(--body);margin:0;max-width:30em}

/* 主角:红色大块 + 真实界面截图(永远浅色)斜着探出来 */
.slab{position:relative;display:grid;grid-template-columns:1fr;margin:36px 0 0;border-radius:var(--r);
  background:var(--slab);color:var(--on-slab);text-decoration:none;overflow:hidden;box-shadow:var(--shadow);
  min-height:420px;transition:transform .35s var(--ease)}
.slab:hover{transform:translateY(-3px)}
.slab:active{transform:scale(.99)}
.slab:focus-visible{outline:3px solid var(--brand);outline-offset:4px}
.slab .copy{position:relative;z-index:1;padding:28px 24px 0}
.slab .k{display:inline-block;font-size:13px;font-weight:700;background:var(--chip);border-radius:999px;padding:3px 12px;margin-bottom:14px}
.slab h2{font-weight:900;font-size:clamp(32px,7vw,56px);line-height:1.08;letter-spacing:-.03em;margin:0 0 10px}
.slab p{margin:0;font-size:16px;max-width:22em}
.slab .go{display:inline-flex;align-items:center;gap:10px;margin-top:20px;background:var(--btn);color:var(--on-btn);
  border-radius:999px;padding:12px 20px;font-weight:700;font-size:16px}
.slab .go i{font-style:normal;transition:transform .3s var(--ease)}
.slab:hover .go i{transform:translateX(4px)}
.phone{position:relative;justify-self:end;width:min(62%,260px);margin:26px 18px -70px 0;border-radius:28px;
  border:6px solid var(--frame);background:var(--frame);overflow:hidden;transform:rotate(-6deg);transform-origin:bottom right;
  box-shadow:var(--shadow-phone)}
.phone img{display:block;width:100%;height:auto}

.facts{display:flex;flex-wrap:wrap;gap:10px 28px;margin:30px 0 0;padding:0;list-style:none;font-weight:700;font-size:15px}
.facts li{display:flex;align-items:center;gap:8px}
.facts svg{color:var(--brand);flex:none}
.soon{margin:26px 0 0;color:var(--mute);font-size:14px}
.soon a{color:var(--ink);font-weight:600}
.foot{margin:56px 0 0;padding:20px 0 32px;border-top:1px solid var(--line);color:var(--mute);font-size:13px}

@media (min-width:860px){
  .hero{padding-top:56px}
  .slab{grid-template-columns:1.1fr .9fr;min-height:380px;align-items:center}
  .slab .copy{padding:48px 0 48px 48px}
  .phone{margin:40px 56px -120px 0;width:270px}
}
/* 适度动效:进场依次浮现,手机画面斜着落位;系统开了"减少动态"就全部不动 */
@media (prefers-reduced-motion:no-preference){
  /* 只在动画开始前套用起始帧(backwards),播完就放手,不锁住 transform,红块的悬停上浮/按下缩小才生效 */
  .rise{animation:rise .7s var(--ease) backwards;animation-delay:calc(var(--i)*90ms)}
  .phone{animation:tilt 1s .35s var(--ease) backwards}
}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
@keyframes tilt{from{opacity:0;transform:rotate(2deg) translateY(60px)}}
@media (prefers-reduced-motion:reduce){.slab,.slab .go i{transition:none}}