/* Talai (talaih.cn) - 26-10-15 第2站 独立骨架：三张倾斜卡轨道英雄区 / 两列编号清单 / 2×2网格图廊 / 横向时间轴 / 左列表右面板FAQ / 2列卡片墙评价 / 深色横条下载 */
:root{
  --ink:#1a1216;
  --ink-2:#120c10;
  --paper:#ffffff;
  --tint:#fdeef4;
  --tint-2:#f8e2ec;
  --main:#f2277b;
  --main-d:#d4175f;
  --sun:#ffc91f;
  --sun-t:#fff8e3;
  --line:#eed9e3;
  --line-2:#e0c4d2;
  --muted:#7d6b76;
  --text:#2a2028;
  --sh-1:-12px 12px 0 0 #f7dde8;
  --sh-2:0 10px 0 0 #1a1216;
  --sh-3:14px 10px 0 -4px #f9e3ec;
  --sh-4:-16px -8px 0 -6px #fff2cd;
  --sh-5:0 16px 0 -8px #f6d9e6;
  --sh-6:12px 12px 0 -6px #fae7ef;
  --sh-7:-12px 14px 0 -8px #fff4d6;
  --sh-8:10px 10px 0 0 #ffc91f;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--text);font:16px/1.85 "Microsoft YaHei","PingFang SC","Hiragino Sans GB",Arial,sans-serif;overflow-x:hidden}
img{max-width:100%;height:auto;display:block;border:0;border-radius:0}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
button{font:inherit;border:0;background:none;cursor:pointer;border-radius:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:1140px;margin:0 auto;padding:0 22px}
[id]{scroll-margin-top:84px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 26px;font-size:15px;font-weight:700;border:2px solid var(--ink);border-radius:0;transition:transform .16s ease,background .16s ease,color .16s ease}
.btn-lg{height:56px;padding:0 32px;font-size:16px}
.btn-main{background:var(--main);border-color:var(--main);color:#fff}
.btn-main:hover{background:var(--main-d);border-color:var(--main-d);transform:translate(-2px,-2px)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff;transform:translate(-2px,-2px)}
.btn-alt{background:var(--sun);border-color:var(--sun);color:var(--ink)}
.btn-alt:hover{background:#ffd94f;transform:translate(-2px,-2px)}

/* 顶栏 */
.tlbar{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.96);border-bottom:3px solid var(--main);backdrop-filter:blur(6px)}
.tlbar-in{display:flex;align-items:center;gap:20px;height:68px}
.tllogo{display:flex;align-items:center;gap:10px;flex:none}
.tllogo img{width:40px;height:40px;border:1px solid var(--line-2)}
.tllogo-t{display:flex;flex-direction:column;line-height:1.2}
.tllogo-t strong{font-size:18px}
.tllogo-t small{font-size:11px;color:var(--muted);letter-spacing:.06em}
.tlmenu{display:flex;align-items:center;gap:4px;margin-left:auto}
.tlmenu a{padding:8px 12px;font-size:14.5px;color:#5c4b56}
.tlmenu a:hover{color:var(--main)}
.tlmenu a.on{color:var(--main);font-weight:700;background:var(--tint)}
.tlbar-r{display:flex;align-items:center;gap:12px;flex:none}
.tlbar-cta{height:42px;padding:0 20px;font-size:14px}
.burger{display:none;width:44px;height:44px;border:2px solid var(--ink);flex-direction:column;justify-content:center;align-items:center;gap:5px}
.burger span{display:block;width:20px;height:2px;background:var(--ink)}

/* 英雄区 */
.tlhero{position:relative;background:var(--tint);padding:56px 0 62px;border-bottom:1px solid var(--line-2)}
.tlhero-in{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center}
.tlhero-l{background:#fff;border:1px solid var(--line-2);border-left:6px solid var(--main);padding:32px 30px 28px;box-shadow:var(--sh-1)}
.kick{display:flex;align-items:center;gap:9px;font-size:13px;letter-spacing:.12em;color:var(--muted)}
.kick-k{display:inline-grid;place-items:center;width:28px;height:22px;background:var(--main);color:#fff;font-size:12px;font-weight:800;letter-spacing:0}
.kick-light{color:var(--sun-t)}
.kick-light .kick-k{background:var(--sun);color:var(--ink)}
.tlhero-l h1{margin:16px 0 12px;font-size:74px;line-height:1;font-weight:900;color:var(--ink);letter-spacing:-.02em}
.tlhero-lead{font-size:16.5px;line-height:1.95;color:#4f4450;max-width:560px}
.tlhero-acts{display:flex;flex-wrap:wrap;gap:14px;margin:26px 0 20px}
.tlhero-tags{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.tlhero-tags li{font-size:13.5px;padding:6px 14px;border:1px solid var(--main);color:var(--main);background:rgba(242,39,123,.06)}
.tlhero-note{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--muted);border-top:1px dashed var(--line-2);padding-top:14px;max-width:520px}
.beat{width:9px;height:9px;background:var(--sun);flex:none}

/* 三张倾斜卡轨道 */
.tlhero-r{display:flex;flex-direction:column;align-items:center;gap:26px}
.cardrail{display:flex;align-items:center;justify-content:center;padding:10px 0 22px;width:100%}
.rail-card{position:relative;width:34%;max-width:215px;background:#fff;border:2px solid var(--ink);overflow:hidden}
.rail-card img{width:100%;height:auto}
.rc-1{transform:rotate(-6deg) translateY(16px);z-index:1;border-color:var(--ink);box-shadow:-6px 8px 0 0 rgba(26,18,22,.14)}
.rc-2{transform:rotate(0deg) translateY(-12px);z-index:3;margin:0 -20px;border-color:var(--main);box-shadow:8px 8px 0 0 rgba(242,39,123,.22)}
.rc-3{transform:rotate(6deg) translateY(16px);z-index:1;border-color:var(--sun);box-shadow:6px -8px 0 0 rgba(255,201,31,.45)}
.rail-tag{position:absolute;left:0;bottom:0;background:var(--sun);color:var(--ink);font-size:12px;font-weight:800;padding:5px 12px;letter-spacing:.06em}
.rail-data{display:flex;align-items:center;gap:14px;background:var(--ink);color:#fff;padding:14px 24px;border-left:5px solid var(--sun);align-self:stretch;justify-content:center}
.rail-data b{font-size:26px;font-weight:900;color:var(--sun)}
.rail-data span{font-size:13px;color:#c9bcc4}

/* 数据条 */
.tlband{background:var(--ink);padding:0}
.tlband-in{display:grid;grid-template-columns:repeat(4,1fr);background:var(--ink-2);box-shadow:var(--sh-2)}
.bd{padding:30px 16px;text-align:center;border-right:1px solid #3a2c34}
.bd:last-child{border-right:0}
.bd b{display:block;font-size:40px;line-height:1.1;font-weight:900;color:var(--sun)}
.bd span{font-size:13.5px;color:#cbbdc5;letter-spacing:.08em}

/* 区块与区块头 */
.tlblock{padding:74px 0}
.tlblock-a{background:var(--paper)}
.tlblock-b{background:var(--tint)}
.tlblock-c{background:var(--paper);border-top:4px solid var(--main)}
.tlblock-d{background:var(--sun-t)}
.tlblock-e{background:var(--paper);border-top:2px solid var(--ink)}
.tlhead{margin-bottom:36px;padding-left:18px;border-left:6px solid var(--sun)}
.tlhead h2{margin:10px 0 0;font-size:29px;line-height:1.3;font-weight:900;color:var(--ink)}
.tlhead-p{margin-top:8px;font-size:14.5px;color:var(--muted);line-height:1.8;max-width:680px}

/* 两列编号清单 */
.tllist{display:grid;grid-template-columns:1fr 1fr;gap:0 30px;background:#fff;border:1px solid var(--line-2);padding:26px 28px;box-shadow:var(--sh-3)}
.llist-col{display:flex;flex-direction:column}
.li{display:grid;grid-template-columns:56px 1fr;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.llist-col .li:last-child{border-bottom:0}
.li-no{font-size:26px;line-height:1.1;font-weight:900;color:var(--main);letter-spacing:-.02em;border-right:1px solid var(--line);padding-right:10px}
.li:nth-child(2) .li-no{color:var(--ink)}
.llist-col:last-child .li:nth-child(1) .li-no{color:var(--sun)}
.li h3{font-size:17.5px;font-weight:800;color:var(--ink)}
.li p{margin-top:6px;font-size:14.5px;line-height:1.8;color:#5b4f58}

/* 2×2 图廊 */
.tlgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px;background:#fff;border:1px solid var(--line-2);padding:24px;box-shadow:var(--sh-4)}
.tlcell{position:relative;margin:0;border:1px solid var(--line-2);background:var(--tint);padding:14px 14px 0}
.tlcell-no{position:absolute;left:14px;top:14px;z-index:2;background:var(--ink);color:#fff;font-size:12px;font-weight:800;padding:3px 9px;letter-spacing:.08em}
.tlcell img{width:100%;max-width:450px;margin:0 auto;height:auto}
.tlcell figcaption{padding:12px 0 14px;text-align:center;font-size:14px;font-weight:700;color:var(--ink);border-top:1px solid var(--line-2);margin-top:12px}
.tlgrid-tip{margin-top:18px;text-align:center;font-size:13px;color:var(--muted)}

/* 横向时间轴 */
.tlaxis{position:relative;display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--line-2);padding:26px 24px;box-shadow:var(--sh-5)}
.tlaxis::before{content:"";position:absolute;left:52px;right:52px;top:72px;height:2px;background:var(--ink)}
.ax-i{position:relative;padding:96px 18px 6px;border-right:1px dashed var(--line-2)}
.ax-i:last-child{border-right:0}
.ax-dot{position:absolute;left:18px;top:52px;width:42px;height:42px;display:grid;place-items:center;background:var(--main);color:#fff;font-weight:900;font-size:15px;border:2px solid var(--ink);z-index:2}
.ax-i:nth-child(2) .ax-dot{background:var(--ink)}
.ax-i:nth-child(3) .ax-dot{background:var(--sun);color:var(--ink)}
.ax-i:nth-child(4) .ax-dot{background:#fff;color:var(--main)}
.ax-i h3{font-size:17px;font-weight:800;color:var(--ink)}
.ax-i h3::after{content:"";display:block;width:38px;height:2px;background:var(--sun);margin:8px 0 10px}
.ax-i p{font-size:14px;line-height:1.8;color:#5b4f58}

/* 左列表 + 右面板 FAQ */
.tlqa{display:grid;grid-template-columns:340px 1fr;background:#fff;border:1px solid var(--line-2);box-shadow:var(--sh-6)}
.qa-list{display:flex;flex-direction:column;border-right:1px solid var(--line-2);background:var(--tint)}
.qa-btn{display:flex;align-items:center;gap:12px;text-align:left;padding:16px 18px;font-size:14.5px;color:#5b4f58;border-bottom:1px solid var(--line);border-left:4px solid transparent}
.qa-btn:last-child{border-bottom:0}
.qa-btn:hover{background:#fff;color:var(--main)}
.qa-btn.is-on{background:#fff;color:var(--main);font-weight:700;border-left-color:var(--main)}
.qa-n{flex:none;font-size:13px;font-weight:900;color:var(--muted);letter-spacing:.06em}
.qa-btn.is-on .qa-n{color:var(--main)}
.qa-panes{padding:30px 32px;display:flex;flex-direction:column;justify-content:center}
.qa-pane h3{font-size:20px;font-weight:900;color:var(--ink);padding-bottom:12px;border-bottom:2px solid var(--sun)}
.qa-pane p{margin-top:16px;font-size:15px;line-height:1.95;color:#4f4450}
.qa-pane[hidden]{display:none}

/* 2列卡片墙评价 */
.tlwall{display:grid;grid-template-columns:1fr 1fr;gap:20px;background:#fff;border:1px solid var(--line-2);padding:22px;box-shadow:var(--sh-7)}
.wcard{background:var(--paper);border:1px solid var(--line);border-left:5px solid var(--main);padding:20px 22px;display:flex;flex-direction:column}
.wcard:nth-child(2n){border-left-color:var(--sun)}
.wcard:nth-child(3n){border-left-color:var(--ink)}
.wcard p{font-size:14.8px;line-height:1.9;color:#463c48;flex:1}
.wcard footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding-top:12px;border-top:1px dashed var(--line-2)}
.wcard footer b{font-size:13.5px;color:var(--main)}
.wcard footer time{font-size:12.5px;color:var(--muted);letter-spacing:.04em}

/* 深色横条下载 */
.tlcta{background:var(--ink);padding:0}
.cta-box{display:grid;grid-template-columns:1fr auto;gap:34px;align-items:center;background:var(--ink-2);border-top:5px solid var(--main);padding:46px 34px;box-shadow:var(--sh-8)}
.cta-txt h2{margin:12px 0 10px;font-size:30px;font-weight:900;color:#fff}
.cta-p{font-size:14.5px;line-height:1.9;color:#c4b7bf;max-width:560px}
.cta-act{display:flex;flex-direction:column;align-items:center;gap:10px}
.cta-note{font-size:12.5px;color:#a898a2;letter-spacing:.06em}

/* 页脚 */
.tlfoot{background:var(--tint);padding:54px 0 28px;border-top:1px solid var(--line-2)}
.tlfoot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px}
.tlfoot-logo{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.tlfoot-logo img{width:36px;height:36px;border:1px solid var(--line-2)}
.tlfoot-logo b{font-size:17px}
.tlfoot-logo p{font-size:12px;color:var(--muted)}
.tlfoot-note{font-size:13.5px;line-height:1.85;color:#5f5260;max-width:400px}
.tlfoot-col h4{font-size:14px;color:var(--ink);margin-bottom:14px;padding-bottom:8px;border-bottom:2px solid var(--main)}
.tlfoot-col li{margin-bottom:9px}
.tlfoot-col a{font-size:13.5px;color:#5b4f58}
.tlfoot-col a:hover{color:var(--main)}
.tlfoot-copy{margin-top:32px;padding-top:20px;border-top:1px solid var(--line-2);text-align:center}
.tlfoot-copy p{font-size:12.5px;color:var(--muted);line-height:1.9}

/* 悬浮按钮 */
.backtop{position:fixed;right:24px;bottom:160px;z-index:99989;width:46px;height:46px;display:grid;place-items:center;background:var(--ink);color:#fff;font-size:19px;border:2px solid var(--ink);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease}
.backtop.show{opacity:1;visibility:visible;transform:translateY(0)}
.backtop:hover{background:var(--main);border-color:var(--main)}

.rv{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}

@media (max-width:980px){
  .tlhero-in{grid-template-columns:1fr;gap:36px}
  .tlhero-l{padding:26px 22px 22px;box-shadow:-8px 8px 0 0 #f7dde8}
  .tlhero-l h1{font-size:54px}
  .tlaxis::before{left:38px;right:38px;top:66px}
  .tlfoot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body{font-size:15.5px}
  .wrap{padding:0 16px}
  [id]{scroll-margin-top:72px}
  .tlmenu{position:absolute;left:0;right:0;top:68px;flex-direction:column;align-items:stretch;background:#fff;border-bottom:3px solid var(--main);display:none;padding:6px 0}
  .tlmenu.open{display:flex}
  .tlmenu a{padding:14px 20px;font-size:16px;border-bottom:1px solid var(--line)}
  .tlmenu a.on{background:var(--tint)}
  .burger{display:flex}
  .tlbar-cta{display:none}
  .tlhero{padding:34px 0 42px}
  .tlhero-l h1{font-size:44px}
  .tlhero-lead{font-size:15.5px;line-height:1.9}
  .tlhero-acts{gap:10px}
  .btn-lg{height:50px;padding:0 22px;font-size:15px}
  .cardrail{padding:4px 0 14px}
  .rail-card{flex:1 1 0;width:auto;max-width:170px}
  .rc-1{transform:rotate(-5deg) translateY(10px)}
  .rc-2{transform:none;margin:0 -14px}
  .rc-3{transform:rotate(5deg) translateY(10px)}
  .rail-data{padding:12px 18px}
  .rail-data b{font-size:22px}
  .tlband-in{grid-template-columns:repeat(2,1fr)}
  .bd{border-right:0;border-bottom:1px solid #3a2c34;padding:22px 12px}
  .bd b{font-size:32px}
  .tlblock{padding:50px 0}
  .tlhead{border-left-width:5px;padding-left:14px;margin-bottom:24px}
  .tlhead h2{font-size:22px}
  .tllist{grid-template-columns:1fr;padding:18px 16px;box-shadow:12px 8px 0 -4px #f9e3ec}
  .li{grid-template-columns:48px 1fr;padding:15px 0}
  .li-no{font-size:22px}
  .tlgrid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding:14px;box-shadow:-12px -6px 0 -6px #fff2cd;-webkit-overflow-scrolling:touch}
  .tlcell{flex:0 0 74%;padding:12px 12px 0;scroll-snap-align:center}
  .tlaxis{grid-template-columns:1fr 1fr;padding:18px 16px;box-shadow:0 12px 0 -8px #f6d9e6}
  .tlaxis::before{display:none}
  .ax-i{padding:66px 12px 6px;border-right:0;border-bottom:1px dashed var(--line-2)}
  .ax-dot{left:12px;top:20px;width:38px;height:38px;font-size:14px}
  .tlqa{grid-template-columns:1fr;box-shadow:12px 12px 0 -6px #fae7ef}
  .qa-list{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line-2);-webkit-overflow-scrolling:touch}
  .qa-btn{flex:0 0 auto;white-space:nowrap;border-bottom:0;border-left:0;border-right:1px solid var(--line);padding:14px 14px}
  .qa-btn.is-on{border-left:0;box-shadow:inset 0 -3px 0 0 var(--main)}
  .qa-panes{padding:22px 18px}
  .qa-pane h3{font-size:18px}
  .tlwall{grid-template-columns:1fr;padding:14px;box-shadow:-10px 12px 0 -8px #fff4d6}
  .cta-box{grid-template-columns:1fr;gap:22px;padding:34px 20px;box-shadow:8px 8px 0 0 #ffc91f}
  .cta-txt h2{font-size:24px}
  .tlfoot-grid{grid-template-columns:1fr;gap:24px}
  .tlfoot-note{max-width:none}
  .backtop{right:16px;bottom:150px;width:42px;height:42px;font-size:17px}
}
@media (max-width:400px){
  .tlhero-l h1{font-size:38px}
  .tlcell{flex:0 0 82%}
}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .btn{transition:none}
}