/* Scott · Sites — aurora glass theme */
:root {
  --ink:#0b2540; --muted:#46607a; --sky:#0ea5e9; --sky-d:#0369a1; --indigo:#6366f1;
  --glass:rgba(255,255,255,.55); --glass-strong:rgba(255,255,255,.72); --glass-line:rgba(255,255,255,.85);
  --grad:linear-gradient(100deg,#0ea5e9 0%,#6366f1 100%);
  --shadow:0 24px 70px rgba(14,116,184,.14), 0 2px 6px rgba(11,37,64,.04);
  --blur:blur(22px) saturate(1.4);
  --wa:#1fa855;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:96px; }
body { margin:0; min-height:100vh; color:var(--ink); background:#f0f9ff; font-family:Manrope,"Noto Sans SC","PingFang SC","Microsoft YaHei",Arial,sans-serif; font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
body::before { content:""; position:fixed; inset:-10%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(38% 46% at 12% 14%, #a5e4ff 0%, transparent 70%),
    radial-gradient(40% 50% at 88% 10%, #c7d2fe 0%, transparent 70%),
    radial-gradient(46% 54% at 72% 92%, #7dd3fc 0%, transparent 70%),
    radial-gradient(40% 50% at 8% 88%, #dbeafe 0%, transparent 70%),
    #f0f9ff; }
a { color:var(--sky-d); text-underline-offset:3px; }
img { max-width:100%; }
.wrap { max-width:1160px; margin:0 auto; padding:0 24px; }
h1,h2,h3 { margin:0; line-height:1.06; letter-spacing:-.035em; font-weight:800; }
p { margin:0 0 12px; }
html[lang="zh-CN"] h1, html[lang="zh-CN"] h2, html[lang="zh-CN"] h3 { letter-spacing:0; line-height:1.28; }
html[lang="zh-CN"] body { line-height:1.75; }
.ico { width:22px; height:22px; flex:none; }
.grad-text, .hero h1 em { font-style:normal; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* glass surface */
.glass { background:var(--glass); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); border:1px solid var(--glass-line); box-shadow:var(--shadow); }

/* ---------- nav ---------- */
.top { position:sticky; top:14px; z-index:20; padding:0 24px; }
.top .bar { max-width:1160px; margin:14px auto 0; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px 10px 20px; border-radius:999px; }
.brand { display:flex; align-items:center; gap:8px; font-weight:800; font-size:17px; color:var(--ink); text-decoration:none; white-space:nowrap; }
.brand b { font-weight:500; margin-left:5px; color:var(--muted); }
.brand span { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; font-size:18px; }
.top-right { display:flex; align-items:center; gap:14px; }
.small-cta { font-weight:700; font-size:14.5px; text-decoration:none; color:var(--ink); }
.langs { display:flex; gap:2px; }
.langs a { padding:7px 13px; border-radius:999px; font-size:13px; font-weight:800; color:var(--ink); text-decoration:none; transition:background .2s; }
.langs a:hover { background:rgba(255,255,255,.7); }
.langs a[aria-current="page"] { background:var(--ink); color:#fff; }

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:16px 26px; border-radius:16px; font-weight:700; font-size:16.5px; text-decoration:none; transition:transform .2s, box-shadow .2s, background .2s; }
.btn:hover { transform:translateY(-2px); }
.btn-dark { background:var(--ink); color:#fff; box-shadow:0 14px 30px rgba(11,37,64,.22); }
.btn-dark .ico { color:#4ade80; }
.btn-light { background:rgba(255,255,255,.78); color:var(--ink); border:1px solid var(--glass-line); }
.btn-light:hover { background:#fff; }

/* ---------- hero ---------- */
.hero { padding:44px 0 72px; overflow:hidden; }
.hero .wrap { display:grid; grid-template-columns:1.12fr .88fr; gap:40px; align-items:center; }
.hero-card { padding:48px; border-radius:34px; }
.chip { display:inline-flex; align-items:center; gap:8px; margin-bottom:22px; padding:7px 14px; border-radius:999px; background:rgba(255,255,255,.85); color:var(--sky-d); font-size:13px; font-weight:800; }
.chip::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--sky); box-shadow:0 0 0 4px rgba(14,165,233,.18); }
.hero h1 { font-size:clamp(38px,5vw,62px); margin-bottom:18px; }
.lead { font-size:18.5px; color:var(--muted); max-width:32em; }
.cta-row { display:flex; flex-wrap:wrap; gap:10px; margin:28px 0 24px; }
.trust { display:flex; flex-wrap:wrap; gap:8px 20px; margin:0; padding:0; list-style:none; font-size:14px; font-weight:700; color:var(--ink); }
.trust li { display:flex; align-items:center; gap:7px; }
.trust .ico { width:18px; height:18px; padding:3px; border-radius:50%; background:var(--grad); color:#fff; }

.stage { position:relative; justify-self:center; padding:20px 0; }
.phone { width:min(286px,72vw); padding:10px; border-radius:44px; background:rgba(11,37,64,.92); box-shadow:0 44px 90px rgba(3,105,161,.33), 0 0 0 1px rgba(255,255,255,.25) inset; }
.phone img { display:block; width:100%; height:auto; border-radius:34px; }
.stage .phone { transform:rotate(-4deg); }
.float { position:absolute; padding:12px 16px; border-radius:18px; background:var(--glass-strong); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid var(--glass-line); box-shadow:0 16px 36px rgba(14,116,184,.2); font-weight:800; font-size:15px; white-space:nowrap; }
.float small { display:block; font-size:12px; font-weight:600; color:var(--muted); }
.float.f1 { left:-84px; top:80px; }
.float.f2 { right:-64px; bottom:92px; }
.stage-cap { margin-top:22px; text-align:center; font-size:13.5px; color:var(--muted); font-weight:600; }

/* ---------- sections ---------- */
.block { padding:72px 0; }
.head { max-width:660px; margin:0 auto 40px; text-align:center; }
.kicker { display:inline-block; margin-bottom:14px; padding:6px 14px; border-radius:999px; background:rgba(255,255,255,.75); border:1px solid var(--glass-line); color:var(--sky-d); font-size:12.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.head h2 { font-size:clamp(30px,3.8vw,44px); margin-bottom:14px; }
.head p { color:var(--muted); font-size:18px; margin:0; }

/* cards */
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.card { padding:30px 28px; border-radius:26px; transition:transform .25s, background .25s; }
.card:hover { transform:translateY(-4px); background:var(--glass-strong); }
.badge { width:52px; height:52px; margin-bottom:20px; border-radius:16px; display:grid; place-items:center; background:var(--grad); color:#fff; box-shadow:0 12px 26px rgba(99,102,241,.3); }
.badge .ico { width:26px; height:26px; }
.card h3 { font-size:19px; margin-bottom:8px; }
.card p { margin:0; color:var(--muted); font-size:16px; }

/* case */
.case-panel { display:grid; grid-template-columns:.8fr 1.2fr; gap:56px; align-items:center; padding:56px; border-radius:36px; }
.case-panel .phone { transform:rotate(3deg); justify-self:center; width:min(260px,70vw); }
.case-panel h2 { font-size:clamp(30px,3.6vw,42px); margin:6px 0 12px; }
.case-panel .desc { color:var(--muted); font-size:17.5px; }
.checks { list-style:none; padding:0; margin:20px 0 26px; display:grid; gap:11px; }
.checks li { display:flex; gap:12px; align-items:flex-start; }
.checks .ico { width:24px; height:24px; padding:4px; margin-top:1px; border-radius:50%; background:var(--grad); color:#fff; }
.quote { margin:0 0 26px; padding:22px 24px; border-radius:22px; background:rgba(255,255,255,.75); border:1px solid var(--glass-line); }
.quote .stars { color:#f5b301; letter-spacing:2px; font-size:16px; margin-bottom:6px; }
.quote p { margin:0 0 10px; font-size:20px; font-weight:700; line-height:1.4; letter-spacing:-.01em; }
.quote cite { font-style:normal; font-size:14px; font-weight:600; color:var(--muted); }

/* demos */
.demos { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.demo { display:flex; flex-direction:column; border-radius:28px; overflow:hidden; color:var(--ink); text-decoration:none; transition:transform .3s, box-shadow .3s; }
.demo:hover { transform:translateY(-6px); box-shadow:0 34px 80px rgba(14,116,184,.22); }
.demo .shot { display:block; margin:10px 10px 0; border-radius:20px; overflow:hidden; aspect-ratio:16/10; background:#dbeafe; }
.demo .shot img { display:block; width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .6s; }
.demo:hover .shot img { transform:scale(1.04); }
.demo .meta { display:flex; flex-direction:column; gap:4px; padding:20px 22px 22px; }
.demo small { color:var(--sky-d); font-size:12.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.demo b { font-size:20px; letter-spacing:-.02em; }
.demo .meta > span { color:var(--muted); font-size:15px; }
.demo em { display:inline-flex; align-items:center; gap:6px; margin-top:10px; font-style:normal; font-weight:800; font-size:15px; }
.demo em .ico { width:18px; height:18px; transition:transform .25s; }
.demo:hover em .ico { transform:translate(2px,-2px); }

/* price */
.price-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:20px; align-items:stretch; }
.price-card { position:relative; padding:40px; border-radius:30px; background:linear-gradient(var(--glass-strong),var(--glass-strong)) padding-box, var(--grad) border-box; border:2px solid transparent; backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); box-shadow:0 30px 80px rgba(99,102,241,.18); }
.tag { display:inline-block; padding:6px 13px; border-radius:999px; background:var(--ink); color:#fff; font-size:12.5px; font-weight:800; letter-spacing:.04em; }
.price-card .big { margin:18px 0 4px; font-size:clamp(38px,4.6vw,52px); font-weight:800; line-height:1.1; letter-spacing:-.035em; }
.price-card .terms { color:var(--muted); font-size:15px; margin-bottom:22px; }
.price-card .checks { margin:0; gap:10px; }
.maint { padding:34px; border-radius:30px; }
.maint h3 { font-size:19px; margin-bottom:6px; }
.maint .amount { font-size:28px; font-weight:800; margin-bottom:12px; }
.maint .fine { margin:18px 0 0; padding-top:16px; border-top:1px dashed rgba(11,37,64,.15); color:var(--muted); font-size:13.5px; line-height:1.55; }

/* steps */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:s; }
.step { padding:28px 24px; border-radius:26px; }
.step::before { counter-increment:s; content:"0" counter(s); display:block; margin-bottom:14px; font-size:40px; font-weight:800; line-height:1; letter-spacing:-.04em; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.step b { display:block; margin-bottom:6px; font-size:18px; }
.step span { color:var(--muted); font-size:15.5px; }

/* faq */
.faq { max-width:800px; margin:0 auto; display:grid; gap:12px; }
.faq details { padding:4px 26px; border-radius:22px; transition:background .2s; }
.faq details[open] { background:var(--glass-strong); }
.faq summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 0; font-weight:700; font-size:17px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; flex:none; width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:var(--ink); color:#fff; font-size:20px; font-weight:600; transition:transform .25s; }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq details p { margin:0 0 20px; color:var(--muted); }

/* final cta */
.final { position:relative; overflow:hidden; isolation:isolate; padding:72px 32px; border-radius:40px; text-align:center; color:#fff; background:#0b2540; box-shadow:0 40px 90px rgba(11,37,64,.3); }
.final::before { content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(50% 70% at 15% 10%, rgba(14,165,233,.55), transparent 70%), radial-gradient(50% 70% at 90% 100%, rgba(99,102,241,.55), transparent 70%); }
.final h2 { font-size:clamp(30px,4vw,48px); margin-bottom:12px; }
.final p { font-size:18px; color:rgba(255,255,255,.85); max-width:34em; margin:0 auto; }
.final .btn { margin-top:30px; background:#fff; color:var(--ink); box-shadow:0 14px 34px rgba(0,0,0,.25); }
.final .btn .ico { color:var(--wa); }
.final-btns { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:30px; }
.final-btns .btn { margin-top:0; }
.final .btn-wechat { background:#07c160; color:#fff; border:0; font-family:inherit; cursor:pointer; }
.final .btn-wechat .ico { color:#fff; }
.final .contact { margin-top:22px; font-size:15px; color:rgba(255,255,255,.85); }
.final .contact a { color:#fff; }

footer { padding:36px 0 48px; text-align:center; color:var(--muted); font-size:14px; font-weight:600; }

.float-wa { position:fixed; right:20px; bottom:20px; z-index:30; width:58px; height:58px; border-radius:50%; display:grid; place-items:center; background:var(--wa); color:#fff; box-shadow:0 14px 30px rgba(31,168,85,.42); transition:transform .2s; }
.float-wa:hover { transform:scale(1.06); }
.float-wa .ico { width:30px; height:30px; }

/* ---------- responsive ---------- */
@media (max-width:960px) {
  .hero .wrap, .case-panel, .price-grid { grid-template-columns:1fr; }
  .hero .wrap { gap:36px; }
  .grid3, .demos { grid-template-columns:1fr; }
  .demos { max-width:560px; margin:0 auto; }
  .steps { grid-template-columns:1fr 1fr; }
  .case-panel { padding:40px 32px; }
  .case-panel .phone { display:none; }
  .float.f1 { left:-28px; top:60px; }
  .float.f2 { right:-24px; bottom:80px; }
}
@media (max-width:560px) {
  body { font-size:16px; }
  .wrap, .top { padding:0 14px; }
  .top { top:10px; }
  .top .bar { margin-top:10px; padding:8px 8px 8px 16px; }
  .small-cta { display:none; }
  .langs a { padding:6px 10px; }
  .hero { padding:28px 0 56px; }
  .hero-card { padding:30px 22px; border-radius:28px; }
  .lead { font-size:17px; }
  .cta-row .btn { width:100%; }
  .float { font-size:14px; padding:10px 13px; }
  .float.f1 { left:-12px; }
  .float.f2 { right:-10px; }
  .block { padding:52px 0; }
  .head p { font-size:16.5px; }
  .card, .step { padding:24px 22px; }
  .steps { grid-template-columns:1fr; }
  .case-panel { padding:28px 20px; border-radius:28px; }
  .quote p { font-size:18px; }
  .price-card { padding:28px 22px; }
  .maint { padding:26px 22px; }
  .faq details { padding:2px 18px; }
  .final { padding:52px 20px; border-radius:30px; }
}
@media (prefers-reduced-motion:reduce) {
  * { transition:none !important; scroll-behavior:auto !important; }
}