/* ==========================================================
   青提 AI · 产品详情页样式（全分辨率适配）
   ========================================================== */
:root{ --p-accent:#3ddc97; --p-accent2:#4cc9f0; }
body[data-product] .nav.solid{background:rgba(6,10,16,.78)}

/* ---------------- HERO ---------------- */
.phero{position:relative;padding:calc(112px + env(safe-area-inset-top)) 0 72px;overflow:hidden}
.phero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(900px 520px at 18% 10%,color-mix(in srgb,var(--p-accent) 16%,transparent),transparent 62%),
             radial-gradient(760px 480px at 88% 78%,color-mix(in srgb,var(--p-accent2) 15%,transparent),transparent 62%);
}
.phero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
.crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-3);margin-bottom:22px}
.crumb a{color:var(--ink-2);transition:color .25s}
.crumb a:hover{color:var(--p-accent)}
.crumb i{font-style:normal;opacity:.5}
.ptag{display:inline-block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--p-accent);
  border:1px solid color-mix(in srgb,var(--p-accent) 34%,transparent);background:color-mix(in srgb,var(--p-accent) 8%,transparent);
  padding:5px 13px;border-radius:999px}
.phero h1{font-size:clamp(34px,5.4vw,62px);margin:18px 0 0;letter-spacing:-.035em}
.phero .en{font-size:12.5px;letter-spacing:.2em;color:var(--ink-3);margin-top:8px}
.phero .slogan{margin-top:20px;font-size:clamp(17px,2.1vw,23px);font-weight:600;
  background:linear-gradient(100deg,var(--p-accent),var(--p-accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.phero .desc{margin-top:16px;color:var(--ink-2);font-size:15.6px;max-width:620px}
.phero-actions{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.pstats{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px;padding-top:26px;border-top:1px solid var(--line)}
.pstats div{min-width:96px}
.pstats b{display:block;font-size:clamp(22px,2.8vw,32px);font-weight:800;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.pstats span{font-size:12.5px;color:var(--ink-3)}
.pvis{position:relative;height:400px;border-radius:26px;border:1px solid var(--line);overflow:hidden;
  background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--p-accent) 12%,transparent),transparent 66%),rgba(255,255,255,.012)}
.pvis canvas{position:absolute;inset:0;width:100%;height:100%}
.pvis .pv-badge{position:absolute;left:20px;bottom:18px;font-size:12px;color:var(--ink-3);letter-spacing:.1em}

/* ---------------- 通用区块 ---------------- */
.psec{padding:88px 0;position:relative}
.psec.alt{background:linear-gradient(180deg,transparent,rgba(255,255,255,.018),transparent)}
.psec-head{max-width:760px;margin-bottom:44px}
.psec-head h2{font-size:clamp(25px,3.4vw,40px);margin-top:14px}
.psec-head p{margin-top:14px;color:var(--ink-2)}
.psec-tag{display:inline-block;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--p-accent);
  border:1px solid color-mix(in srgb,var(--p-accent) 32%,transparent);border-radius:999px;padding:5px 12px}

/* 概述 */
.psum{display:grid;grid-template-columns:1.35fr .65fr;gap:40px;align-items:start}
.psum p{color:var(--ink-2);font-size:16px;margin-bottom:16px}
.pfacts{border:1px solid var(--line);border-radius:20px;background:var(--panel);padding:24px}
.pfacts h4{margin:0 0 14px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.pfacts li{list-style:none;display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-top:1px solid var(--line);font-size:14.4px}
.pfacts li:first-of-type{border-top:0}
.pfacts li span{color:var(--ink-3);text-align:right}
.pfacts li b{color:#fff;font-weight:600}
.pfacts ul{margin:0;padding:0}

/* 亮点 */
.hl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.hl{position:relative;padding:26px 24px;border-radius:18px;border:1px solid var(--line);
  background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
  transition:transform .4s var(--ease),border-color .35s;overflow:hidden}
.hl::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;
  background:linear-gradient(90deg,var(--p-accent),var(--p-accent2));opacity:.7}
.hl h4{margin:0 0 10px;font-size:18px}
.hl p{font-size:14.2px;color:var(--ink-3)}
.hl .no{position:absolute;right:16px;top:12px;font-size:34px;font-weight:800;color:rgba(255,255,255,.05);line-height:1}

/* 功能清单 */
.pfilter{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:20px}
.pmeta{font-size:14px;color:var(--ink-3);margin-bottom:22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pmeta b{color:#fff;font-size:18px;font-variant-numeric:tabular-nums}
.pmeta .bar{flex:1;min-width:120px;height:5px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.pmeta .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--p-accent),var(--p-accent2))}
.pmod-head{grid-column:1/-1;display:flex;align-items:baseline;gap:12px;margin:20px 0 2px;padding-top:14px;border-top:1px dashed var(--line)}
.pmod-head i{font-style:normal;font-size:12px;color:var(--p-accent);border:1px solid color-mix(in srgb,var(--p-accent) 34%,transparent);border-radius:6px;padding:2px 8px}
.pmod-head h3{font-size:19px}
.pmod-head span{font-size:13.4px;color:var(--ink-3)}
.flist{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,276px),1fr));gap:13px}
.fitem{position:relative;padding:18px 19px;border-radius:15px;border:1px solid var(--line);background:var(--panel);transition:transform .3s var(--ease),border-color .3s}
.fitem h4{margin:0 0 7px;font-size:16px}
.fitem p{margin:0;font-size:13.6px;color:var(--ink-3)}
.fitem .num{position:absolute;right:14px;top:14px;font-size:11px;color:var(--ink-3);opacity:.55;font-variant-numeric:tabular-nums}

/* 场景 */
.sc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:14px}
.sc{padding:22px;border-radius:16px;border:1px solid var(--line);background:var(--panel);transition:transform .35s var(--ease),border-color .3s}
.sc h4{margin:0 0 8px;font-size:16.5px;display:flex;align-items:center;gap:9px}
.sc h4::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--p-accent);box-shadow:0 0 10px var(--p-accent)}
.sc p{font-size:13.8px;color:var(--ink-3)}

/* 流程 */
.psteps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:16px;counter-reset:st}
.pstep{position:relative;padding:24px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.01))}
.pstep b{display:block;font-size:30px;font-weight:800;letter-spacing:-.04em;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.15));-webkit-background-clip:text;background-clip:text;color:transparent}
.pstep h4{margin:8px 0 8px;font-size:17px}
.pstep p{font-size:13.8px;color:var(--ink-3)}

/* 环境表 */
.ptable{width:100%;border-collapse:collapse;font-size:14.6px}
.ptable th{text-align:left;padding:15px 22px;background:rgba(255,255,255,.045);font-size:12.5px;letter-spacing:.14em;color:var(--ink-3);text-transform:uppercase;font-weight:600}
.ptable td{padding:15px 22px;border-top:1px solid var(--line);color:var(--ink-2)}
.ptable td:first-child{color:#fff;font-weight:600;width:28%}
.ptable td:nth-child(2){color:var(--p-accent);width:30%}
.ptable tr:hover td{background:rgba(255,255,255,.025)}

/* FAQ */
.faq{border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa-q{width:100%;text-align:left;background:none;border:0;color:var(--ink);font-family:inherit;font-size:16.5px;font-weight:600;
  padding:20px 44px 20px 0;cursor:pointer;position:relative;transition:color .25s}
.qa-q:hover{color:var(--p-accent)}
.qa-q::after{content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:22px;color:var(--p-accent);transition:transform .3s var(--ease)}
.qa.open .qa-q::after{transform:translateY(-50%) rotate(45deg)}
.qa-a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.qa-a p{padding:0 40px 20px 0;font-size:14.6px;color:var(--ink-2)}

/* 相关产品 */
.rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px}
.rel{display:block;padding:24px;border-radius:18px;border:1px solid var(--line);
  background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.012));transition:transform .35s var(--ease),border-color .3s}
.rel em{font-style:normal;font-size:11.5px;letter-spacing:.14em;color:var(--ink-3)}
.rel h4{margin:8px 0 8px;font-size:18px}
.rel p{font-size:13.6px;color:var(--ink-3)}
.rel .goo{margin-top:14px;font-size:13.5px;font-weight:600;color:var(--p-accent)}

/* 底部 CTA */
.pcta{padding:96px 0;text-align:center;border-top:1px solid var(--line);background:linear-gradient(180deg,transparent,rgba(255,255,255,.02))}
.pcta h2{font-size:clamp(24px,3.6vw,42px)}
.pcta p{margin-top:16px;color:var(--ink-2)}
.pcta .btns{display:flex;gap:14px;justify-content:center;margin-top:30px;flex-wrap:wrap}

/* hover（仅真悬停设备） */
@media (hover:hover) and (pointer:fine){
  .hl:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--p-accent) 45%,transparent)}
  .fitem:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--p-accent) 42%,transparent)}
  .sc:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--p-accent) 40%,transparent)}
  .rel:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--p-accent) 45%,transparent)}
}

/* ---------------- 响应式 ---------------- */
@media (min-width:1600px){ .psec{padding:104px 0} .pvis{height:440px} }
@media (max-width:1180px){
  .phero-grid{grid-template-columns:1fr;gap:32px}
  .pvis{height:320px;order:-1}
  .hl-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1024px){
  .psum{grid-template-columns:1fr;gap:28px}
  .psec{padding:76px 0}
}
@media (max-width:880px){
  .phero{padding:calc(96px + env(safe-area-inset-top)) 0 56px}
  .phero-actions .btn{flex:1;justify-content:center;min-width:150px}
  .pstats{gap:12px 18px}
  .pstats div{min-width:calc(50% - 18px)}
}
@media (max-width:680px){
  .psec{padding:60px 0}
  .psec-head{margin-bottom:30px}
  .hl-grid{grid-template-columns:1fr}
  .pvis{height:250px;border-radius:20px}
  .pstats div{min-width:calc(50% - 14px)}
  .qa-q{font-size:15.4px;padding:17px 40px 17px 0}
  .qa-a p{font-size:14px;padding-right:24px}
  .pcta{padding:72px 0}
  .pcta .btns .btn{width:100%;justify-content:center}
}
@media (max-width:400px){
  .phero h1{font-size:clamp(28px,9vw,38px)}
  .pstats div{min-width:100%}
  .pvis{height:210px}
  .pfacts{padding:18px}
  .pfacts li{flex-direction:column;gap:2px}
  .pfacts li span{text-align:left}
}
/* 表格卡片化 */
@media (max-width:760px){
  .ptable thead{display:none}
  .ptable tr{display:block;padding:13px 15px;border-top:1px solid var(--line)}
  .ptable tbody tr:first-child{border-top:0}
  .ptable td{display:block;padding:4px 0;border:0;width:auto !important;font-size:14px}
  .ptable td::before{content:attr(data-label);display:block;font-size:11px;letter-spacing:.12em;color:var(--ink-3);text-transform:uppercase}
  .ptable td:first-child{font-size:15.4px;padding-bottom:5px}
  .ptable td:first-child::before{display:none}
  .ptable tr:hover td{background:transparent}
}

/* ==========================================================
   详情页差异化：5 套变体 + 独有区块组件
   ========================================================== */

/* ---------- 变体 B（数字人剧场）：居中全宽 Banner ---------- */
body[data-variant="b"] .phero-grid{grid-template-columns:1fr;gap:30px;text-align:center}
body[data-variant="b"] .phero-copy{max-width:840px;margin:0 auto}
body[data-variant="b"] .phero .desc{margin-left:auto;margin-right:auto}
body[data-variant="b"] .phero-actions{justify-content:center}
body[data-variant="b"] .pstats{justify-content:center}
body[data-variant="b"] .crumb{justify-content:center}
body[data-variant="b"] .pvis{height:360px;order:0;border-radius:26px}
body[data-variant="b"] .psum{grid-template-columns:1fr}
body[data-variant="b"] .pfacts{display:grid;grid-template-columns:repeat(2,1fr);gap:0 26px}

/* ---------- 变体 C（24h 直播间）：时钟装饰 ---------- */
.pv-clock{position:absolute;right:24px;bottom:20px;text-align:center;pointer-events:none}
.pv-clock b{display:block;font-size:38px;font-weight:800;letter-spacing:-.04em;line-height:1;
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.3));-webkit-background-clip:text;background-clip:text;color:transparent}
.pv-clock span{font-size:11px;letter-spacing:.16em;color:var(--ink-3)}
.pv-clock i{display:block;width:54px;height:54px;margin:8px auto 0;border-radius:50%;
  border:2px solid var(--p-accent);border-top-color:transparent;opacity:.85;animation:spin 6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:680px){ .pv-clock b{font-size:30px} .pv-clock i{width:42px;height:42px} }

/* ---------- 变体 D（设备选择）：Hero 内切换器 ---------- */
.dev-switch{margin-top:26px;border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:14px}
.ds-tabs{display:flex;gap:8px;flex-wrap:wrap}
.ds{padding:8px 17px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.02);
  color:var(--ink-2);font-family:inherit;font-size:14px;cursor:pointer;transition:all .3s var(--ease)}
.ds.on{background:linear-gradient(100deg,var(--p-accent),var(--p-accent2));color:#04130d;border-color:transparent;font-weight:700}
.ds-body{margin-top:13px;font-size:14.4px;color:var(--ink-2)}
.ds-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.ds-tags span{font-size:12px;padding:4px 11px;border-radius:999px;border:1px solid var(--line);color:var(--ink-3)}

/* ---------- 变体 E（能力墙）：浏览器窗口框 ---------- */
.pv-browser{position:absolute;left:0;right:0;top:0;height:34px;z-index:3;display:flex;align-items:center;
  gap:6px;padding:0 14px;background:rgba(255,255,255,.05);border-bottom:1px solid var(--line)}
.pv-browser i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22)}
.pv-browser i:nth-child(1){background:#ff5f57}
.pv-browser i:nth-child(2){background:#febc2e}
.pv-browser i:nth-child(3){background:#28c840}
.pv-browser em{margin-left:14px;font-style:normal;font-size:11.5px;color:var(--ink-3);letter-spacing:.05em}
body[data-variant="e"] .pvis canvas{top:34px;height:calc(100% - 34px)}

/* ================= 功能清单 · 5 种形态 ================= */
/* b：表格化 */
.flist.tbl{display:block}
.frow{display:grid;grid-template-columns:250px 1fr;gap:22px;padding:22px 0;border-top:1px solid var(--line)}
.frow:first-child{border-top:0}
.fm i{font-style:normal;font-size:12px;color:var(--p-accent);border:1px solid color-mix(in srgb,var(--p-accent) 34%,transparent);
  border-radius:6px;padding:2px 8px}
.fm h4{margin:10px 0 6px;font-size:17.5px}
.fm em{font-style:normal;font-size:12px;color:var(--ink-3)}
.fi{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:10px}
.fi span{display:block;padding:12px 14px;border-radius:12px;border:1px solid var(--line);
  background:var(--panel);font-size:13.3px;color:var(--ink-3);transition:transform .3s var(--ease),border-color .3s}
.fi span b{display:block;color:#fff;font-size:14.4px;font-weight:600;margin-bottom:3px}
@media (hover:hover){ .fi span:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--p-accent) 42%,transparent)} }
@media (max-width:820px){ .frow{grid-template-columns:1fr;gap:14px} }

/* c：时间轴 */
.flist.tl{display:block}
.ftl{position:relative;display:grid;grid-template-columns:62px 1fr;gap:18px}
.ftl::before{content:"";position:absolute;left:30px;top:56px;bottom:-10px;width:1px;background:var(--line)}
.ftl:last-child::before{display:none}
.ftl .node{width:52px;height:52px;margin-top:4px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:18px;color:var(--p-accent);background:rgba(255,255,255,.04);
  border:1px solid color-mix(in srgb,var(--p-accent) 40%,transparent);box-shadow:0 0 24px -8px var(--p-accent)}
.ftl .body{padding-bottom:30px}
.ftl .body h4{font-size:18px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ftl .body h4 em{font-style:normal;font-size:12px;color:var(--ink-3);border:1px solid var(--line);border-radius:999px;padding:2px 9px}
.ftl .sub{font-size:13.6px;color:var(--ink-3);margin:7px 0 13px}
.ftl .items{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,258px),1fr));gap:10px}
.ftl .it{padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--panel)}
.ftl .it b{display:block;font-size:14.4px;margin-bottom:3px}
.ftl .it span{font-size:12.9px;color:var(--ink-3)}
@media (max-width:680px){
  .ftl{grid-template-columns:44px 1fr;gap:12px}
  .ftl .node{width:38px;height:38px;font-size:15px}
  .ftl::before{left:18px;top:42px}
}

/* d：紧凑双列 */
.flist.compact{grid-template-columns:1fr 1fr;gap:11px}
.flist.compact .fitem{padding:15px 16px}
@media (max-width:760px){ .flist.compact{grid-template-columns:1fr} }

/* e：能力墙 */
.flist.wall{display:block}
.fwall-mod{margin-bottom:32px}
.wm{margin-bottom:14px}
.wm i{font-style:normal;font-size:12px;color:var(--p-accent);border:1px solid color-mix(in srgb,var(--p-accent) 34%,transparent);
  border-radius:6px;padding:2px 8px}
.wm h4{display:inline-block;margin-left:10px;font-size:19px}
.wm span{display:block;margin-top:5px;font-size:13.4px;color:var(--ink-3)}
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,176px),1fr));gap:10px}
.wb{padding:14px;border-radius:12px;border:1px solid var(--line);
  background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.012));transition:transform .3s var(--ease),border-color .3s}
.wb b{display:block;font-size:14.4px;margin-bottom:4px}
.wb span{font-size:12.6px;color:var(--ink-3)}
@media (hover:hover){ .wb:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--p-accent) 45%,transparent)} }

/* ================= 独有区块组件 ================= */
.xblock{position:relative}
.xhead{max-width:740px;margin-bottom:26px}
.xhead h3{font-size:clamp(21px,2.6vw,30px);margin:12px 0 10px}
.xhead p{color:var(--ink-2);font-size:15px}
.x-foot{margin-top:18px;font-size:13.5px;color:var(--ink-3);border-left:2px solid var(--p-accent);padding-left:14px}

/* compare */
.x-compare{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--panel)}
.xc-row{display:flex;align-items:stretch}
.xc-row>*{flex:1 1 0;min-width:0;padding:14px 20px;border-top:1px solid var(--line);font-size:14.3px;color:var(--ink-2)}
.xc-row .k{flex:0 0 132px;color:var(--ink-3);font-size:13.3px;background:rgba(255,255,255,.02)}
.xc-head{border-top:0}
.xc-head b{font-size:15px;color:#fff;font-weight:700}
.xc-head b:last-of-type{color:var(--p-accent)}
/* 最后一列 = 本产品，加淡底色突出 */
.xc-row>*:last-child{background:color-mix(in srgb,var(--p-accent) 5%,transparent)}
.xc-head b:last-of-type{background:color-mix(in srgb,var(--p-accent) 9%,transparent)}
.x-foot{margin-top:14px;font-size:13.4px;color:var(--ink-3)}
@media (max-width:760px){
  .xc-row{display:block}
  .xc-row>*{display:block;padding:10px 16px}
  .xc-row .k{background:rgba(255,255,255,.05)}
  .xc-row>*:last-child{background:transparent}
  .xc-head{display:none}
}

/* pricing */
.x-price{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.xp{padding:24px;border-radius:16px;border:1px solid var(--line);background:var(--panel)}
.xp.main{border-color:color-mix(in srgb,var(--p-accent) 45%,transparent);
  background:color-mix(in srgb,var(--p-accent) 8%,transparent)}
.xp em{font-style:normal;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.xp h4{margin:8px 0 6px;font-size:17px}
.xp b{display:block;font-size:26px;color:var(--p-accent);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.xp p{margin-top:8px;font-size:13.5px;color:var(--ink-3)}
@media (max-width:880px){ .x-price{grid-template-columns:1fr} }

/* hardware */
.x-hard{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.xh{padding:24px;border-radius:16px;border:1px solid var(--line);background:var(--panel)}
.xh.warn{border-color:rgba(255,124,88,.45);background:rgba(255,124,88,.07)}
.xh .lv{font-size:22px;font-weight:800;color:#fff;letter-spacing:-.02em}
.xh .nn{font-size:13.6px;color:var(--p-accent);margin:4px 0 10px}
.xh p{font-size:13.5px;color:var(--ink-3)}
.xh em{display:inline-block;margin-top:12px;font-style:normal;font-size:11.5px;padding:3px 11px;
  border-radius:999px;border:1px solid var(--line);color:var(--ink-3)}
@media (max-width:880px){ .x-hard{grid-template-columns:1fr} }

/* generations */
.x-gen{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.xg{padding:18px 14px;border-radius:14px;border:1px solid var(--line);background:var(--panel);transition:transform .3s var(--ease),border-color .3s}
.xg .dot{width:8px;height:8px;border-radius:50%;background:var(--p-accent);box-shadow:0 0 10px var(--p-accent);margin-bottom:10px}
.xg .v{font-size:13px;color:var(--ink-3)}
.xg b{display:block;font-size:16px;margin:2px 0 8px}
.xg p{font-size:12.6px;color:var(--ink-3)}
.xg em{display:block;margin-top:9px;font-style:normal;font-size:11.5px;color:var(--cyan)}
@media (hover:hover){ .xg:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--p-accent) 42%,transparent)} }
@media (max-width:1024px){ .x-gen{grid-template-columns:repeat(3,1fr)} }
@media (max-width:680px){ .x-gen{grid-template-columns:1fr 1fr} }

/* timeline */
.x-tl{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.xt{padding:22px;border-radius:16px;border:1px solid var(--line);background:var(--panel)}
.xt .t{font-size:13px;color:var(--p-accent);letter-spacing:.05em;font-variant-numeric:tabular-nums}
.xt h4{margin:8px 0 8px;font-size:17px}
.xt p{font-size:13.5px;color:var(--ink-3)}
.xt em{display:block;margin-top:12px;font-style:normal;font-size:12px;color:var(--ink-3);
  border-top:1px dashed var(--line);padding-top:10px}
@media (max-width:1024px){ .x-tl{grid-template-columns:1fr 1fr} }
@media (max-width:680px){ .x-tl{grid-template-columns:1fr} }

/* platforms */
.x-plat{display:flex;flex-wrap:wrap;gap:10px}
.x-plat span{padding:11px 22px;border-radius:12px;border:1px solid var(--line);background:var(--panel);
  font-size:15px;transition:transform .3s var(--ease),border-color .3s,color .3s}
@media (hover:hover){ .x-plat span:hover{transform:translateY(-3px);border-color:var(--p-accent);color:var(--p-accent)} }

/* business */
.x-biz{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.xb{padding:24px;border-radius:16px;border:1px solid var(--line);
  background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.012))}
.xb h4{margin-bottom:9px;font-size:17px}
.xb p{font-size:13.7px;color:var(--ink-3)}
@media (max-width:880px){ .x-biz{grid-template-columns:1fr} }

/* billing */
.x-bill{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.xl{padding:26px;border-radius:16px;border:1px solid var(--line);background:var(--panel)}
.xl h4{font-size:17px}
.xl b{display:block;margin:8px 0 6px;font-size:27px;color:var(--p-accent);letter-spacing:-.02em}
.xl p{font-size:13.7px;color:var(--ink-3)}
@media (max-width:880px){ .x-bill{grid-template-columns:1fr} }

/* notes */
.x-note{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.xn{padding:20px;border-radius:14px;border:1px solid var(--line);border-left:2px solid var(--p-accent);background:var(--panel)}
.xn b{display:block;margin-bottom:6px;font-size:15px}
.xn p{font-size:13.4px;color:var(--ink-3)}
@media (max-width:880px){ .x-note{grid-template-columns:1fr} }