/* TimeTrails · 时光轨迹 — shared site styles
   简洁 · 优雅 · 科技感 / clean · elegant · tech */

:root{
  --bg:#0a0e1a;
  --bg-2:#0c1222;
  --text:#e8eef8;
  --muted:#9aabc2;
  --faint:#6f7f96;
  --card:rgba(255,255,255,.045);
  --card-2:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.16);
  --accent:#22d3ee;
  --accent-2:#38bdf8;
  --brand:#0ea5e9;
  --violet:#818cf8;
  --link:#7dd3fc;
  --grad:linear-gradient(135deg,#22d3ee 0%,#38bdf8 45%,#818cf8 100%);
  --shadow:0 20px 50px rgba(0,0,0,.45);
  --radius:18px;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f6f8fc; --bg-2:#eef2f8; --text:#0f1b2d; --muted:#4b5a6e; --faint:#7b8aa0;
    --card:rgba(255,255,255,.75); --card-2:#ffffff; --line:rgba(15,27,45,.10); --line-strong:rgba(15,27,45,.16);
    --link:#0369a1; --shadow:0 18px 40px rgba(20,40,80,.14);
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--text); background:var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,"PingFang SC","Noto Sans CJK SC","Hiragino Sans GB","Microsoft YaHei",Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji",sans-serif;
  line-height:1.7; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* ambient mesh background */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 50% at 12% -5%, rgba(34,211,238,.20), transparent 60%),
    radial-gradient(55% 45% at 100% 0%, rgba(129,140,248,.20), transparent 60%),
    radial-gradient(50% 45% at 50% 110%, rgba(14,165,233,.14), transparent 60%),
    linear-gradient(180deg,var(--bg),var(--bg-2));
}
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; display:block}
h1,h2,h3{line-height:1.25; letter-spacing:-.01em}

.container{max-width:1080px; margin:0 auto; padding:0 20px}
.gradient-text{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(14px);
  background:color-mix(in oklab, var(--bg) 72%, transparent); border-bottom:1px solid var(--line)}
.nav .container{display:flex; align-items:center; justify-content:space-between; height:64px; gap:16px}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.02em; color:var(--text)}
.brand:hover{text-decoration:none}
.brand img{width:30px; height:30px; border-radius:9px}
.brand .zh{color:var(--muted); font-weight:600; font-size:14px; margin-left:2px}
.nav-links{display:flex; align-items:center; gap:22px; font-size:15px}
.nav-links a{color:var(--muted); font-weight:500}
.nav-links a:hover{color:var(--text); text-decoration:none}
.nav-cta{padding:8px 15px; border-radius:999px; background:var(--grad); color:#04121f !important; font-weight:700}
.nav-cta:hover{text-decoration:none; filter:brightness(1.05)}
@media (max-width:640px){ .nav-links a:not(.nav-cta){display:none} }

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:9px; padding:13px 22px; border-radius:999px;
  font-weight:700; font-size:15px; border:1px solid transparent; cursor:pointer; transition:transform .15s ease, filter .15s ease, background .15s ease}
.btn:hover{text-decoration:none; transform:translateY(-2px)}
.btn-primary{background:var(--grad); color:#04121f}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{background:var(--card-2); color:var(--text); border-color:var(--line-strong)}
.btn-ghost:hover{background:var(--card)}

/* ---------- hero ---------- */
.hero{padding:72px 0 40px}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center}
.eyebrow{display:inline-flex; align-items:center; gap:8px; padding:6px 13px; border-radius:999px;
  border:1px solid var(--line-strong); background:var(--card); color:var(--muted); font-size:13px; font-weight:600}
.eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent)}
.hero h1{font-size:clamp(34px,5.2vw,60px); margin:20px 0 0; font-weight:850; letter-spacing:-.03em}
.hero .lead{font-size:clamp(16px,1.6vw,19px); color:var(--muted); margin:18px 0 0; max-width:34em}
.hero .cta{display:flex; gap:14px; margin-top:30px; flex-wrap:wrap}
.hero .note{margin-top:16px; color:var(--faint); font-size:13px}

/* device mockup */
.device{justify-self:center; width:min(300px,80vw); aspect-ratio:9/19; border-radius:40px;
  padding:12px; background:linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.03));
  border:1px solid var(--line-strong); box-shadow:var(--shadow); position:relative}
.device .screen{height:100%; border-radius:30px; overflow:hidden; position:relative;
  background:radial-gradient(120% 90% at 10% 0%, rgba(34,211,238,.28), transparent 55%),
             radial-gradient(120% 90% at 100% 100%, rgba(129,140,248,.30), transparent 55%),
             linear-gradient(180deg,#0b1226,#0a1020)}
.device .notch{position:absolute; top:14px; left:50%; transform:translateX(-50%); width:96px; height:20px; border-radius:12px; background:rgba(0,0,0,.55); z-index:2}
.device svg{position:absolute; inset:0; width:100%; height:100%}

/* ---------- sections ---------- */
.section{padding:56px 0}
.section-head{text-align:center; max-width:40em; margin:0 auto 40px}
.section-head .eyebrow{margin-bottom:14px}
.section-head h2{font-size:clamp(26px,3.4vw,38px); margin:0; font-weight:800; letter-spacing:-.02em}
.section-head p{color:var(--muted); margin:12px 0 0}

/* feature grid */
.features{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.feature{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px; transition:border-color .2s, transform .2s}
.feature:hover{border-color:var(--line-strong); transform:translateY(-3px)}
.icon{width:46px; height:46px; border-radius:13px; display:grid; place-items:center; margin-bottom:16px;
  background:linear-gradient(135deg, rgba(34,211,238,.22), rgba(129,140,248,.22)); border:1px solid var(--line-strong)}
.icon svg{width:24px; height:24px; stroke:var(--accent); fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.feature h3{margin:0 0 6px; font-size:18px}
.feature p{margin:0; color:var(--muted); font-size:15px}

/* privacy highlight band */
.band{background:var(--card); border:1px solid var(--line); border-radius:26px; padding:40px; text-align:center}
.band h2{font-size:clamp(24px,3vw,34px); margin:0 0 10px; letter-spacing:-.02em}
.band p{color:var(--muted); max-width:40em; margin:0 auto}
.pills{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:22px}
.pill{padding:8px 15px; border-radius:999px; background:var(--card-2); border:1px solid var(--line-strong); color:var(--text); font-size:14px; font-weight:600}

/* ---------- content / prose (privacy, support) ---------- */
.page-hero{padding:56px 0 8px; text-align:center}
.page-hero h1{font-size:clamp(30px,4.4vw,46px); margin:16px 0 0; font-weight:850; letter-spacing:-.02em}
.page-hero p{color:var(--muted); margin:12px auto 0; max-width:40em}
.panel{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px 28px}
.panel + .panel{margin-top:18px}
.prose{max-width:820px; margin:0 auto}
.prose h2{font-size:21px; margin:34px 0 10px; padding-top:6px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:17px; margin:20px 0 6px}
.prose p{color:var(--muted); margin:8px 0}
.prose ul{color:var(--muted); margin:8px 0; padding-left:20px}
.prose li{margin:6px 0}
.prose strong{color:var(--text)}
.kv{display:grid; grid-template-columns:120px 1fr; gap:10px 18px}
.kv dt{color:var(--faint); font-size:14px}
.kv dd{margin:0}

/* faq */
.faq details{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:4px 18px; overflow:hidden}
.faq details + details{margin-top:12px}
.faq summary{cursor:pointer; font-weight:650; padding:14px 0; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--accent); font-size:22px; font-weight:400; transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details > div{color:var(--muted); padding:0 0 16px; margin-top:-4px}
.faq ol{color:var(--muted); margin:6px 0; padding-left:20px}

/* contact + qr */
.contact-grid{display:grid; grid-template-columns:1.3fr .7fr; gap:18px; align-items:stretch}
.qr{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center}
.qr img{width:180px; height:180px; border-radius:14px; background:#fff; padding:8px; border:1px solid var(--line-strong)}
.qr small{color:var(--faint); margin-top:10px}
pre.info{white-space:pre-wrap; word-break:break-word; background:color-mix(in oklab,var(--text) 8%, transparent);
  padding:14px; border-radius:12px; border:1px solid var(--line); font-size:12.5px; color:var(--muted); margin:12px 0}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line); margin-top:40px; padding:40px 0}
.footer .container{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center}
.footer .brand{font-size:16px}
.foot-links{display:flex; gap:20px; flex-wrap:wrap; font-size:14px}
.foot-links a{color:var(--muted)}
.foot-note{color:var(--faint); font-size:13px; width:100%}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none; transition:none} html{scroll-behavior:auto} }

/* ---------- responsive ---------- */
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr; gap:36px}
  .hero{padding:48px 0 20px}
  .device{order:-1}
  .features{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
  .kv{grid-template-columns:1fr}
  .kv dt{margin-top:8px}
}
@media (max-width:560px){
  .features{grid-template-columns:1fr}
  .band{padding:28px 20px}
  .panel{padding:22px 18px}
}