/* ===== TTastro 公用样式 ===== */
:root{
  --bg:#04060d; --ink:#e9eef7; --muted:#b7c2d4; --muted2:#93a0b4;
  --amber:#ffbe4d; --amber2:#ff8a4d; --line:rgba(255,255,255,.09);
  --disp:'Sora','Noto Sans SC',system-ui,sans-serif;
  --body:'Noto Sans SC','Sora',system-ui,sans-serif;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ background:var(--bg); color:var(--ink); font-family:var(--body); font-weight:300;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a{ color:var(--amber); text-decoration:none; } a:hover{ color:#ffd98a; }
#sky{ position:fixed; inset:0; z-index:0; display:block; opacity:0; animation:skyin 1.2s ease .05s forwards; }
@keyframes skyin{ to{ opacity:1; } }
.veil{ position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 80% at 50% 0%, transparent 40%, rgba(4,6,13,.55) 100%); }
.wrap{ position:relative; z-index:2; }

/* nav */
.nav{ position:fixed; top:0; left:0; right:0; z-index:20; display:flex; align-items:center;
  justify-content:space-between; padding:20px 44px; transition:background .3s, padding .3s; }
.nav.scrolled{ background:rgba(4,6,13,.72); backdrop-filter:blur(14px); padding:14px 44px;
  border-bottom:1px solid var(--line); }
.brand{ font-family:var(--disp); font-weight:800; font-size:22px; letter-spacing:2px; color:#fff; }
.brand b{ color:var(--amber); font-weight:800; }
.nav-r{ display:flex; align-items:center; gap:26px; }
.menu{ display:flex; gap:26px; font-size:14.5px; color:var(--muted); }
.menu a{ color:var(--muted); } .menu a:hover{ color:#fff; }
.menu a.active{ color:#fff; }
.ctrl{ display:flex; align-items:center; gap:10px; }
.pill{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--muted2);
  border:1px solid var(--line); padding:7px 13px; border-radius:999px; cursor:pointer; background:rgba(255,255,255,.02);
  transition:border-color .25s,color .25s,box-shadow .3s; user-select:none; }
.pill:hover{ border-color:rgba(255,190,77,.28); color:#fff; box-shadow:0 0 16px -5px rgba(255,190,77,.6); }
.pill svg{ display:block; }

/* 有趣的悬停描边：琥珀色沿边缘“绘制”一圈（圆角友好），画完停在完整描边+淡辉光 */
@property --tt-ang{ syntax:"<angle>"; inherits:false; initial-value:0deg; }
.pill, .btn2{ position:relative; }
.pill::before, .btn2::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.6px; pointer-events:none;
  background:conic-gradient(from -90deg, var(--amber) var(--tt-ang), rgba(255,190,77,0) 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  --tt-ang:0deg; opacity:0;
  transition:--tt-ang .6s cubic-bezier(.45,.05,.2,1), opacity .25s ease; }
.pill:hover::before, .btn2:hover::before{ --tt-ang:360deg; opacity:1; }

/* hero (homepage) */
.hero{ min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:120px 44px 60px; max-width:1180px; }
.eyebrow{ display:inline-flex; align-items:center; gap:12px; font-size:12.5px; letter-spacing:3px;
  color:#8ec7ff; text-transform:uppercase; margin-bottom:26px; }
.eyebrow::before{ content:""; width:30px; height:1px; background:#8ec7ff; }
h1.hero-t{ font-family:var(--disp); font-weight:800; font-size:clamp(42px,7vw,84px); line-height:1.05;
  margin:0 0 26px; color:#fff; letter-spacing:-1.5px; text-wrap:balance; max-width:14ch; }
h1.hero-t em{ font-style:normal; color:var(--amber); text-shadow:0 0 42px rgba(255,150,70,.5); }
.hero-sub{ font-size:clamp(16px,1.5vw,19px); line-height:1.8; color:var(--muted); max-width:620px; margin:0 0 38px; }
.cta{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.btn{ font-family:var(--disp); font-weight:600; font-size:16px; padding:15px 30px; border-radius:999px;
  background:linear-gradient(90deg,var(--amber),var(--amber2)); color:#1a1205; cursor:pointer;
  box-shadow:0 10px 34px rgba(255,150,70,.32); transition:transform .2s, box-shadow .2s; display:inline-block; }
.btn:hover{ transform:translateY(-2px); box-shadow:0 16px 44px rgba(255,150,70,.45); }
.btn2{ font-size:16px; padding:15px 28px; border-radius:999px; color:#dce4f0; cursor:pointer;
  border:1px solid rgba(255,255,255,.22); transition:border-color .25s,background .25s,box-shadow .3s; display:inline-block; }
.btn2:hover{ border-color:rgba(255,190,77,.25); background:rgba(255,255,255,.05); box-shadow:0 0 20px -6px rgba(255,190,77,.55); }
/* LP ramp */
.ramp-wrap{ margin-top:64px; max-width:760px; }
.ramp-lbl{ display:flex; justify-content:space-between; font-family:var(--disp); font-size:12px;
  letter-spacing:1px; color:var(--muted2); margin-bottom:9px; }
.ramp{ height:12px; border-radius:7px; position:relative; overflow:hidden;
  background:linear-gradient(90deg,#e23b2e 0%,#f2802e 15%,#f2c22e 30%,#8fbf2e 48%,#2f9e6a 66%,#1f6f8f 84%,#16304f 100%);
  box-shadow:0 0 30px rgba(242,150,46,.3); }
.ramp::after{ content:""; position:absolute; top:0; bottom:0; width:34%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  animation:sheen 4.5s ease-in-out infinite; }
@keyframes sheen{ 0%{ left:-40%; } 55%,100%{ left:110%; } }
.ramp-cap{ font-size:12.5px; color:var(--muted2); margin-top:11px; }
.scroll-hint{ margin-top:56px; display:flex; align-items:center; gap:10px; font-size:12px; letter-spacing:2px;
  color:var(--muted2); text-transform:uppercase; }
.mouse{ width:22px; height:34px; border:1.5px solid var(--muted2); border-radius:12px; position:relative; }
.mouse::after{ content:""; position:absolute; left:50%; top:6px; width:3px; height:6px; border-radius:2px;
  background:var(--muted2); transform:translateX(-50%); animation:wheel 1.6s ease-in-out infinite; }
@keyframes wheel{ 0%{ opacity:0; top:6px; } 30%{ opacity:1; } 60%{ opacity:0; top:15px; } 100%{ opacity:0; } }

/* sections */
section.blk{ position:relative; z-index:2; padding:110px 44px; max-width:1180px; margin:0 auto; }
.sec-eyebrow{ font-family:var(--disp); font-size:12.5px; letter-spacing:3px; color:var(--amber);
  text-transform:uppercase; margin-bottom:16px; }
h2.sec-t{ font-family:var(--disp); font-weight:700; font-size:clamp(28px,3.6vw,44px); color:#fff; margin:0 0 16px; letter-spacing:-.5px; }
.sec-p{ font-size:16px; line-height:1.8; color:var(--muted); max-width:600px; margin:0 0 44px; }
.cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.card{ background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  border:1px solid var(--line); border-radius:20px; padding:28px; transition:transform .3s, border-color .3s, box-shadow .3s; }
.card:hover{ transform:translateY(-6px); border-color:rgba(255,190,77,.4); box-shadow:0 20px 50px rgba(0,0,0,.4); }
.card .ic{ width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,190,77,.14); margin-bottom:18px; }
.card h4{ font-family:var(--disp); font-size:20px; color:#fff; margin:0 0 10px; }
.card p{ font-size:14px; color:var(--muted2); line-height:1.7; margin:0; }
/* gallery */
.gal{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:16px; height:340px; }
.gframe{ border-radius:14px; position:relative; overflow:hidden; border:1px solid var(--line); }
.gframe .cap{ position:absolute; left:16px; bottom:14px; font-family:var(--disp); font-size:15px; color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.6); }
.g1{ background:radial-gradient(80% 80% at 40% 40%, rgba(210,80,120,.75), rgba(40,20,60,.92)); }
.g2{ background:radial-gradient(90% 90% at 60% 45%, rgba(70,140,220,.75), rgba(10,20,50,.95)); }
.g3{ background:radial-gradient(90% 90% at 50% 55%, rgba(60,175,150,.65), rgba(10,32,30,.95)); }
.gnote{ margin-top:18px; font-size:13px; color:var(--muted2); }
/* about */
.about{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.soc{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.soc a{ display:inline-flex; align-items:center; gap:9px; font-size:14px; color:var(--muted);
  border:1px solid var(--line); padding:10px 16px; border-radius:999px; transition:border-color .2s,color .2s; }
.soc a:hover{ border-color:rgba(255,190,77,.5); color:#fff; }
.avatar{ aspect-ratio:1; border-radius:24px; background:
  radial-gradient(70% 70% at 40% 35%, rgba(120,90,210,.5), transparent 60%),
  radial-gradient(60% 60% at 70% 70%, rgba(0,170,150,.35), transparent 60%), #0a0f1c;
  border:1px solid var(--line); }
footer{ position:relative; z-index:2; border-top:1px solid var(--line); padding:34px 44px;
  display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--muted2);
  max-width:1180px; margin:0 auto; flex-wrap:wrap; gap:12px; }

/* ===== 子页公用 ===== */
/* 子页顶部（比首页 hero 矮） */
.pagehero{ position:relative; z-index:2; max-width:1180px; margin:0 auto; padding:170px 44px 30px; }
.pagehero h1{ font-family:var(--disp); font-weight:800; font-size:clamp(36px,5.2vw,60px); color:#fff;
  margin:14px 0 20px; letter-spacing:-1px; line-height:1.08; text-wrap:balance; }
.pagehero .lead{ font-size:clamp(16px,1.5vw,19px); line-height:1.8; color:var(--muted); max-width:660px; margin:0; }
.blk.tight{ padding:56px 44px; }
.lead2{ font-size:16px; line-height:1.85; color:var(--muted); max-width:720px; }
.lead2 + .lead2{ margin-top:18px; }
/* 特性网格（两列图文） */
.feat{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.feat .card{ display:flex; gap:18px; align-items:flex-start; }
.feat .card .ic{ flex:none; margin-bottom:0; }
.feat .card h4{ margin:2px 0 8px; font-size:18px; }
/* 访问方式（二维码） */
.access{ display:grid; grid-template-columns:220px 1fr; gap:40px; align-items:center;
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  border:1px solid var(--line); border-radius:22px; padding:34px; }
.qr{ width:220px; height:220px; border-radius:16px; background:#0a0f1c; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--muted2); font-size:13px; text-align:center; padding:14px; }
.steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.steps li{ display:flex; gap:14px; align-items:flex-start; font-size:15px; color:var(--muted); line-height:1.6; }
.steps .n{ flex:none; width:28px; height:28px; border-radius:50%; background:rgba(255,190,77,.14); color:var(--amber);
  font-family:var(--disp); font-weight:600; font-size:14px; display:flex; align-items:center; justify-content:center; }
.steps b{ color:#fff; font-weight:500; }
/* 版本时间线 */
.timeline{ position:relative; margin-top:8px; padding-left:26px; }
.timeline::before{ content:""; position:absolute; left:6px; top:6px; bottom:6px; width:2px;
  background:linear-gradient(180deg, rgba(255,190,77,.5), rgba(255,255,255,.06)); }
.tl{ position:relative; padding:0 0 34px 0; }
.tl::before{ content:""; position:absolute; left:-26px; top:5px; width:12px; height:12px; border-radius:50%;
  background:var(--amber); box-shadow:0 0 0 4px rgba(255,190,77,.16); }
.tl .ver{ font-family:var(--disp); font-size:13px; color:var(--amber); letter-spacing:1px; }
.tl h4{ font-family:var(--disp); font-size:19px; color:#fff; margin:6px 0 10px; }
.tl ul{ margin:0; padding-left:18px; color:var(--muted2); font-size:14px; line-height:1.75; }
.tl ul li{ margin-bottom:4px; }
/* 下载按钮区 */
.dl{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; margin-top:8px; }
.dl .note{ font-size:13px; color:var(--muted2); }

/* reveal */
.rv{ opacity:0; transform:translateY(34px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.rv.in{ opacity:1; transform:none; }
.hero .rv{ transition-duration:1.1s; }

@media(max-width:860px){
  .menu{ display:none; } .nav,.nav.scrolled{ padding:14px 22px; } .hero{ padding:110px 22px 50px; }
  section.blk{ padding:80px 22px; } .blk.tight{ padding:48px 22px; } .pagehero{ padding:130px 22px 20px; }
  .cards{ grid-template-columns:1fr; } .feat{ grid-template-columns:1fr; }
  .gal{ grid-template-columns:1fr; height:auto; } .gframe{ height:180px; }
  .about{ grid-template-columns:1fr; } .access{ grid-template-columns:1fr; justify-items:center; text-align:center; }
  footer{ padding:26px 22px; }
}
@media(prefers-reduced-motion:reduce){ .rv{ transition:none; opacity:1; transform:none; } .ramp::after{ animation:none; } #sky{ animation:none; opacity:1; } .pill::before,.btn2::before{ transition:opacity .2s ease; } }