:root{
  --paper:#f4f2f7;
  --paper2:#fbfafc;
  --ink:#1e2028;
  --muted:#666874;
  --purple:#6d5f88;
  --purple2:#8b7ca6;
  --lavender:#ded7ea;
  --lavender2:#eee9f4;
  --deep:#25212d;
  --line:#d9d4e1;
  --white:#fff;
  --cream:#eee5d7;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial,"Microsoft YaHei","PingFang SC","Helvetica Neue",sans-serif;
  color:var(--ink);
  background:var(--paper2);
  font-size:16px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.shell{width:min(1180px,calc(100% - 40px));margin-inline:auto}
.skip-link{position:fixed;top:-70px;left:14px;z-index:999;background:#fff;padding:10px 15px;border-radius:8px;text-decoration:none}
.skip-link:focus{top:14px}

.site-header{
  position:sticky;top:0;z-index:70;background:rgba(248,247,250,.95);
  border-bottom:1px solid rgba(30,32,40,.08);backdrop-filter:blur(16px)
}
.header-row{min-height:74px;display:grid;grid-template-columns:190px 1fr auto;gap:28px;align-items:center}
.brand{display:inline-flex;min-width:max-content;text-decoration:none}
.logo-shell{display:inline-flex;align-items:center;padding:7px 10px;border:1px solid #ddd8e4;background:#fff;border-radius:10px}
.logo-shell img{height:35px;width:auto;max-width:170px;object-fit:contain}
.nav{display:flex;justify-content:center;gap:25px}
.nav a{text-decoration:none;color:#555864;font-size:14px}
.header-download{
  min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  padding:9px 18px;border-radius:999px;background:var(--deep);color:#fff;
  text-decoration:none;font-weight:900
}

.hero{background:linear-gradient(115deg,#f4f2f7 0%,#ebe6f0 100%);overflow:hidden}
.hero-grid{min-height:720px;display:grid;grid-template-columns:.96fr 1.04fr;gap:70px;align-items:center;padding:76px 0 84px}
.eyebrow{margin:0 0 12px;color:#8a7aa0;font-size:11px;font-weight:900;letter-spacing:.15em}
.eyebrow.dark{color:#746480}.eyebrow.light{color:#d7c8e8}
.hero h1{
  margin:0;font-size:clamp(50px,5.8vw,78px);line-height:1;letter-spacing:-.055em
}
.hero h1 em{display:inline-block;margin-top:10px;color:var(--purple);font-style:normal}
.hero-lead{max-width:680px;margin:28px 0 0;color:#5f616d;font-size:18px;line-height:1.9}
.hero-actions{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:34px}
.primary-btn{
  min-height:52px;display:inline-flex;align-items:center;justify-content:center;
  padding:12px 24px;border-radius:12px;background:var(--purple);color:#fff;
  text-decoration:none;font-weight:900
}
.secondary-link{text-decoration:none;font-weight:900;color:#4d465a}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.hero-meta span{padding:7px 11px;border:1px solid #cbc3d5;border-radius:999px;background:rgba(255,255,255,.5);font-size:12px;color:#655e6d}

.hero-visual{position:relative}
.device-sheet{
  position:relative;max-width:510px;margin-inline:auto;padding:24px 26px 68px;
  background:#fff;box-shadow:0 34px 80px rgba(67,56,83,.16);transform:rotate(-1deg)
}
.device-sheet::before{content:"";position:absolute;right:-18px;top:80px;width:36px;height:190px;background:var(--purple)}
.sheet-index{position:absolute;left:20px;top:18px;font-size:32px;font-weight:900;color:#d0c6da}
.sheet-label{position:absolute;right:26px;top:23px;color:#9587a5;font-size:10px;font-weight:900;letter-spacing:.14em}
.device-sheet img{max-height:480px;width:auto;margin:42px auto 0;object-fit:contain}
.sheet-note{
  position:absolute;left:26px;right:26px;bottom:22px;padding-top:13px;
  display:flex;justify-content:space-between;gap:20px;border-top:1px solid #e1dce6;
  color:#615c68;font-size:12px
}

.choose-section{padding:94px 0;background:#fff}
.section-title{max-width:800px;margin-bottom:38px}
.section-title h2,.timeline-side h2,.finish-copy h2,.retry-copy h2,.board-title h2,.related-grid h2,.faq-side h2,.final-section h2{
  margin:0;font-size:clamp(31px,3.3vw,46px);line-height:1.15;letter-spacing:-.04em
}
.section-title>p:last-child{color:var(--muted)}
.device-choice{border-top:1px solid var(--line)}
.device-row{
  min-height:140px;display:grid;grid-template-columns:70px 240px 1fr auto;gap:28px;
  align-items:center;border-bottom:1px solid var(--line)
}
.device-no{font-size:42px;font-weight:900;color:#c4bbcd}
.device-name small{font-size:10px;font-weight:900;letter-spacing:.13em;color:#8b7ca2}
.device-name h3{margin:3px 0 0;font-size:23px}
.device-row>p{color:var(--muted)}
.device-row>a{text-decoration:none;color:var(--purple);font-weight:900}

.download-section{padding:100px 0;background:var(--deep);color:#fff}
.download-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:80px}
.timeline-side{position:sticky;top:110px}
.timeline-side>p:last-child{color:#c3bec8}
.timeline{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.15)}
.timeline li{
  display:grid;grid-template-columns:70px 1fr;gap:18px;padding:27px 0;
  border-bottom:1px solid rgba(255,255,255,.15)
}
.timeline>li>span{color:#cbb7df;font-weight:900}
.timeline h3{margin:0;font-size:21px}
.timeline p{margin:6px 0 0;color:#bdb8c2}

.finish-section{padding:104px 0;background:#f3f0f6}
.finish-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:84px;align-items:center}
.finish-visual{margin:0;padding:18px;background:#fff;box-shadow:0 28px 70px rgba(74,63,86,.13)}
.visual-head{display:flex;justify-content:space-between;align-items:center;padding:2px 3px 13px;color:#8b8194;font-size:10px;font-weight:900;letter-spacing:.12em}
.finish-visual img{max-height:500px;width:auto;margin-inline:auto;object-fit:contain}
.finish-visual figcaption{padding-top:12px;text-align:center;color:#77717d;font-size:12px}
.finish-copy .lead{color:var(--muted)}
.finish-points{margin-top:30px;border-top:1px solid var(--line)}
.finish-points article{display:grid;grid-template-columns:48px 1fr;gap:18px;padding:20px 0;border-bottom:1px solid var(--line)}
.finish-points>article>span{color:var(--purple);font-size:12px;font-weight:900}
.finish-points h3{margin:0;font-size:19px}
.finish-points p{margin:5px 0 0;color:var(--muted)}
.inline-download{display:inline-block;margin-top:26px;color:var(--purple);text-decoration:none;font-weight:900}

.retry-section{padding:100px 0;background:#6e607f;color:#fff}
.retry-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:80px;align-items:start}
.retry-copy{position:sticky;top:110px}
.retry-copy>p:not(.eyebrow){color:#e3dce8}
.retry-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:50px;margin-top:24px;
  padding:11px 21px;border-radius:10px;background:#fff;color:#554662;text-decoration:none;font-weight:900
}
.retry-stage{display:grid;grid-template-columns:.78fr 1.22fr;gap:26px;align-items:center}
.icon-visual{
  min-height:440px;margin:0;padding:30px;display:flex;align-items:center;justify-content:center;
  background:#817190;border:1px solid rgba(255,255,255,.14)
}
.icon-visual img{max-height:360px;width:auto;object-fit:contain}
.retry-notes{border-top:1px solid rgba(255,255,255,.17)}
.retry-notes article{padding:23px 0;border-bottom:1px solid rgba(255,255,255,.17)}
.retry-notes strong{color:#f0e4ff}
.retry-notes p{margin:5px 0 0;color:#ddd4e3}

.download-board{padding:96px 0;background:#fff}
.board-title{max-width:760px;margin-bottom:36px}
.board-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--deep);border-left:1px solid var(--line)}
.board-grid article{min-height:270px;padding:28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.board-grid>article>span{display:block;margin-bottom:38px;color:#988aa7;font-size:12px;font-weight:900}
.board-grid h3{margin:0;font-size:21px}
.board-grid p{color:var(--muted)}
.board-grid a{display:inline-block;margin-top:20px;color:var(--purple);font-weight:900;text-decoration:none}

.related-section{padding:88px 0;background:#eee9f2}
.related-grid{display:grid;grid-template-columns:.66fr 1.34fr;gap:70px}
.related-links{border-top:1px solid #cec5d5}
.related-links a{
  min-height:88px;display:grid;grid-template-columns:120px 1fr 28px;gap:18px;align-items:center;
  border-bottom:1px solid #cec5d5;text-decoration:none
}
.related-links span{font-size:10px;font-weight:900;letter-spacing:.12em;color:#806f91}
.related-links strong{font-size:18px}.related-links b{font-size:20px;color:var(--purple)}

.faq-section{padding:100px 0;background:#faf9fb}
.faq-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:76px}
.faq-side{position:sticky;top:110px}
.faq-side>p:not(.eyebrow){color:var(--muted)}
.dark-btn{
  display:inline-flex;min-height:50px;align-items:center;justify-content:center;
  margin-top:22px;padding:11px 21px;border-radius:10px;background:var(--deep);color:#fff;text-decoration:none;font-weight:900
}
.faq-list{border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{cursor:pointer;list-style:none;padding:22px 4px;font-size:18px;font-weight:900}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";float:right;color:var(--purple)}
.faq-list details[open] summary::after{content:"−"}
.faq-list details p{margin:-2px 0 25px;padding-right:46px;color:var(--muted)}

.final-section{padding:76px 0;background:#ddd5e8}
.final-grid{display:grid;grid-template-columns:1fr auto;gap:45px;align-items:center}
.final-grid>div>span{color:#756687;font-size:11px;font-weight:900;letter-spacing:.14em}
.final-grid p{margin:9px 0 0;color:#645e69}
.final-grid>a{
  min-width:220px;min-height:56px;display:inline-flex;align-items:center;justify-content:center;
  padding:12px 24px;border-radius:10px;background:var(--deep);color:#fff;text-decoration:none;font-weight:900
}

.footer{padding:56px 0 94px;background:#1d1a22;color:#dedbe1}
.footer-grid{display:grid;grid-template-columns:1fr auto;gap:40px}
.footer-logo{display:inline-flex;padding:7px 9px;border:1px solid rgba(255,255,255,.1);background:#121015;border-radius:9px}
.footer-logo img{height:32px;width:auto;max-width:160px;object-fit:contain}
.footer-brand p{color:#9e98a3;font-size:13px}
.footer-links{display:flex;gap:20px;flex-wrap:wrap}
.footer-links a{color:#dedbe1;text-decoration:none;font-size:14px}
.mobile-download-bar{display:none}

@media(max-width:1040px){
  .nav{gap:15px}
  .hero-grid{grid-template-columns:1fr .84fr;gap:40px}
  .download-grid{grid-template-columns:1fr}
  .timeline-side{position:static}
  .retry-grid{grid-template-columns:1fr}
  .retry-copy{position:static}
}
@media(max-width:820px){
  .header-row{grid-template-columns:1fr auto}
  .nav{display:none}
  .hero-grid,.finish-grid,.related-grid,.faq-grid{grid-template-columns:1fr}
  .hero-grid{min-height:auto;padding:62px 0}
  .hero-visual{margin-top:10px}
  .device-sheet{max-width:600px}
  .device-row{grid-template-columns:60px 1fr}
  .device-row>p,.device-row>a{grid-column:2}
  .retry-stage{max-width:850px}
  .board-grid{grid-template-columns:1fr}
  .faq-side{position:static}
  .final-grid{grid-template-columns:1fr}
  .final-grid>a{width:100%}
}
@media(max-width:600px){
  body{font-size:15px;padding-bottom:62px}
  .shell{width:min(100% - 28px,1180px)}
  .header-row{min-height:66px}
  .logo-shell{padding:6px 8px}
  .logo-shell img{height:29px;max-width:145px}
  .header-download{padding:8px 13px;font-size:13px}
  .hero h1{font-size:clamp(41px,13vw,57px)}
  .hero-lead{font-size:16px}
  .hero-actions{flex-direction:column;align-items:stretch}
  .primary-btn{width:100%}
  .device-sheet{padding:18px 18px 66px}
  .device-sheet::before{display:none}
  .device-sheet img{max-height:330px}
  .choose-section,.download-section,.finish-section,.retry-section,.download-board,.related-section,.faq-section{padding:64px 0}
  .device-row{grid-template-columns:45px 1fr;gap:12px}
  .timeline li{grid-template-columns:45px 1fr}
  .finish-visual img{max-height:340px}
  .finish-points article{grid-template-columns:38px 1fr}
  .retry-stage{grid-template-columns:1fr}
  .icon-visual{min-height:auto}
  .icon-visual img{max-height:300px}
  .related-links a{grid-template-columns:86px 1fr 20px}
  .faq-list details p{padding-right:8px}
  .footer-grid{grid-template-columns:1fr}
  .footer-links{display:grid;grid-template-columns:1fr 1fr}
  .mobile-download-bar{
    position:fixed;left:0;right:0;bottom:0;z-index:100;height:60px;
    display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;
    padding:8px 14px;background:rgba(37,33,45,.98);color:#fff;
    border-top:1px solid rgba(255,255,255,.1)
  }
  .mobile-download-bar a{
    min-height:42px;display:inline-flex;align-items:center;justify-content:center;
    padding:8px 15px;border-radius:9px;background:#ded5ea;color:#2f2937;text-decoration:none;font-weight:900
  }
}