/* =========================================================
   想象构建 · 官方网站 样式表（第二版）
   Design: 《极黑》纯黑 + 渐变大标题 + 等高线
   ========================================================= */

/* ---------- 字体（本地自托管） ---------- */
@font-face { font-family:'Sora'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/sora-500.woff2') format('woff2'); }
@font-face { font-family:'Sora'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/sora-600.woff2') format('woff2'); }
@font-face { font-family:'Sora'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/sora-700.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/inter-600.woff2') format('woff2'); }

:root{
  --black:#000000;
  --panel:#0D0D0D;
  --panel-2:#151515;
  --white:#ffffff;
  --muted:rgba(255,255,255,.60);
  --faint:rgba(255,255,255,.38);
  --line:rgba(255,255,255,.12);
  --line-strong:rgba(255,255,255,.22);
  --mint:#8DF2A4;
  --mint-deep:#5fdd7c;
  --grad:linear-gradient(96deg,#7CF29B 0%,#6FD9E8 38%,#8FA6F5 68%,#C0A6F5 100%);
  --grad-soft:linear-gradient(120deg,#E9FBF0 0%,#E6F6FB 45%,#ECECFD 100%);
  --r-btn:10px;
  --r-card:18px;
  --maxw:1160px;
  --font-display:'Sora','PingFang SC','Microsoft YaHei',sans-serif;
  --font-body:'Inter','PingFang SC','Microsoft YaHei',-apple-system,BlinkMacSystemFont,sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; color:var(--white);
  background-color:#070A16;
  background-image:
    radial-gradient(1.4px 1.4px at 40px 60px, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px at 180px 130px, rgba(255,255,255,.38), transparent 60%),
    radial-gradient(1.7px 1.7px at 320px 50px, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1.1px 1.1px at 90px 250px, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1.5px 1.5px at 260px 300px, rgba(255,255,255,.40), transparent 60%),
    radial-gradient(1px 1px at 380px 210px, rgba(255,255,255,.32), transparent 60%),
    radial-gradient(1.3px 1.3px at 140px 380px, rgba(255,255,255,.38), transparent 60%),
    radial-gradient(1px 1px at 30px 150px, rgba(255,255,255,.30), transparent 60%);
  background-size:420px 420px;
  font-family:var(--font-body); font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* 极光光束（品牌色系：绿→青→紫） */
body::before{
  content:''; position:fixed; inset:-10% -10%; z-index:-1; pointer-events:none;
  background:
    linear-gradient(115deg,
      transparent 34%,
      rgba(124,242,155,.20) 44%,
      rgba(111,217,232,.34) 50%,
      rgba(124,92,255,.26) 56%,
      transparent 66%),
    radial-gradient(55% 45% at 12% 8%, rgba(124,92,255,.26), transparent 70%),
    radial-gradient(45% 40% at 88% 6%, rgba(111,217,232,.15), transparent 70%);
  filter:blur(46px);
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--font-display); font-weight:700; line-height:1.04; margin:0; letter-spacing:-.02em; }
p{ margin:0; }
:focus-visible{ outline:2px solid var(--mint); outline-offset:3px; border-radius:4px; }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px; }
.section{ padding-block:88px; }
.eyebrow{ font-size:.82rem; font-weight:500; color:var(--mint); letter-spacing:.02em; }
.lede{ color:var(--muted); font-size:1.1rem; line-height:1.75; }

/* ---------- 悬浮导航 ---------- */
.topwrap{ position:sticky; top:16px; z-index:60; padding-inline:24px; }
.topbar{
  max-width:var(--maxw); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:rgba(13,13,13,.82); backdrop-filter:blur(14px);
  border:1px solid var(--line); border-radius:16px;
  padding:12px 16px 12px 20px;
}
.brand{ display:inline-flex; align-items:center; gap:.65rem; font-family:var(--font-display); font-weight:700; }
.brand-mark{ width:34px; height:34px; display:grid; place-items:center; background:var(--white); color:var(--black); border-radius:10px; }
.brand-mark svg{ width:58%; height:58%; display:block; }
.nav{ display:flex; align-items:center; gap:1.75rem; font-size:.94rem; }
.nav > a{ color:var(--muted); transition:color .2s; }
.nav > a:hover, .nav > a.active{ color:var(--white); }
.nav-cta{ padding:.6rem 1.2rem; font-size:.9rem; background:var(--white); color:var(--black); font-weight:600; border-radius:var(--r-btn); }
.nav > a.nav-cta{ color:var(--black); }
.nav > a.nav-cta:hover{ color:var(--black); background:#ededed; }
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:8px; flex-direction:column; gap:5px; }
.nav-toggle span{ display:block; width:24px; height:2px; background:var(--white); border-radius:2px; }

/* ---------- 按钮 ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-family:var(--font-body); font-weight:600; font-size:.95rem; padding:.9rem 1.6rem; border-radius:var(--r-btn); border:1px solid transparent; cursor:pointer; transition:filter .2s, background .2s, transform .2s; }
.btn-mint{ background:var(--mint); color:#05230f; }
.btn-mint:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.btn-white{ background:var(--white); color:var(--black); }
.btn-white:hover{ background:#ededed; }
.btn-ghost{ border-color:var(--line-strong); color:var(--white); background:transparent; }
.btn-ghost:hover{ background:rgba(255,255,255,.07); }

/* ---------- 背景等高线（v3 已改用极光背景，隐藏） ---------- */
.bg-lines{ display:none; }

/* ---------- Hero ---------- */
.hero{ position:relative; padding-top:56px; padding-bottom:72px; overflow:hidden; }
.hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; }

.headline{ position:relative; }
.headline .ghost{ position:absolute; left:14px; top:-14px; z-index:0; }
.headline .main{ position:relative; z-index:1; }
.display-xl{ font-family:var(--font-display); font-weight:700; font-size:clamp(2.9rem,8.5vw,6.4rem); line-height:.98; letter-spacing:-.03em; }
.display-xl span{ display:block; }
.grad-text{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stroke-text{ -webkit-text-stroke:1.5px rgba(255,255,255,.30); color:transparent; }
.hero-side{ max-width:26rem; }
.hero-side .lede{ margin-bottom:1.75rem; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.85rem; }

/* 应用图标行（对应参考里的 logo 墙） */
.appbar{ position:relative; z-index:1; margin-top:56px; text-align:center; }
.appbar p{ color:var(--faint); font-size:.9rem; margin-bottom:1.4rem; }
.appbar-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:1.1rem; }
.app-chip{ display:inline-flex; align-items:center; gap:.6rem; color:var(--muted); font-size:.9rem; }
.app-chip i{ width:34px; height:34px; border-radius:10px; display:block; }

/* ---------- 渐变数据条 ---------- */
.stat-band{ background:var(--grad-soft); border-radius:22px; padding:clamp(1.75rem,4vw,2.75rem) clamp(1.5rem,5vw,3rem); color:#0B0B0B; }
.stat-band .row{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; text-align:center; }
.stat-band .num{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.8rem,4vw,2.8rem); color:#0B0B0B; letter-spacing:-.02em; }
.stat-band .lbl{ color:rgba(0,0,0,.6); font-size:.92rem; margin-top:.35rem; }

/* ---------- 通用区块标题 ---------- */
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-bottom:3rem; }
.section-head h2{ font-size:clamp(1.8rem,3.8vw,2.7rem); }
.section-head .meta{ color:var(--faint); font-size:.9rem; }

/* ---------- 关于 ---------- */
.about-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:48px; }
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:3rem; }
.stat .num{ font-family:var(--font-display); font-weight:700; font-size:2rem; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat .lbl{ color:var(--muted); font-size:.92rem; margin-top:.25rem; }

/* ---------- 应用卡片 ---------- */
.apps-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.app-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-card); padding:1.75rem; }
.app-card.featured{ border-color:transparent; background:linear-gradient(var(--panel),var(--panel)) padding-box, var(--grad) border-box; border:1px solid transparent; }
.app-icon{ width:54px; height:54px; border-radius:14px; }
.app-tag{ display:inline-block; margin-top:1.4rem; font-size:.72rem; padding:.3rem .7rem; border-radius:999px; background:rgba(255,255,255,.07); color:var(--muted); }
.app-tag.new{ background:rgba(141,242,164,.14); color:var(--mint); }
.app-card h3{ font-size:1.2rem; margin-top:.9rem; font-weight:600; font-family:var(--font-display); }
.app-card p{ color:var(--muted); font-size:.92rem; margin-top:.55rem; }
.app-card.pending{ border-style:dashed; background:transparent; display:flex; flex-direction:column; justify-content:center; min-height:210px; }
.app-card.pending h3{ color:var(--faint); }

/* ---------- CTA ---------- */
.cta-band{ border-radius:22px; padding:clamp(2.25rem,5vw,3.5rem); background:radial-gradient(120% 160% at 100% 0%, rgba(141,242,164,.16), transparent 55%), var(--panel); border:1px solid var(--line); }
.cta-band h2{ font-size:clamp(1.8rem,4vw,2.6rem); }
.cta-band p{ color:var(--muted); margin-top:1rem; max-width:34rem; }

/* ---------- 联系页 ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; }
.info-row{ display:flex; justify-content:space-between; gap:1.5rem; padding:1.1rem 0; border-bottom:1px solid var(--line); }
.info-row .k{ color:var(--faint); }
.info-row .v{ text-align:right; }
.form-field{ margin-bottom:1.25rem; }
.form-field label{ display:block; font-size:.85rem; color:var(--muted); margin-bottom:.5rem; }
.form-field input, .form-field textarea{ width:100%; background:var(--panel); border:1px solid var(--line); border-radius:12px; color:var(--white); font-family:inherit; font-size:.95rem; padding:.85rem 1rem; resize:vertical; }
.form-field input:focus, .form-field textarea:focus{ outline:none; border-color:var(--mint); }
.form-note{ font-size:.8rem; color:var(--faint); margin-top:1rem; }
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---------- 页脚 ---------- */
.site-footer{ border-top:1px solid var(--line); margin-top:40px; padding-top:56px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:40px; }
.footer-grid p{ color:var(--muted); font-size:.92rem; margin-top:1rem; max-width:22rem; }
.footer-col h4{ font-family:var(--font-display); font-size:.95rem; margin:0 0 1rem; }
.footer-company{ color:var(--faint); font-size:.82rem; margin:.1rem 0 .6rem; }
.footer-col a, .footer-col span{ display:block; color:var(--muted); font-size:.92rem; padding:.25rem 0; }
.footer-col a:hover{ color:var(--white); }
.footer-bottom{ border-top:1px solid var(--line); padding-block:24px; color:var(--faint); font-size:.85rem; }

/* ---------- 动画 ---------- */
.reveal{ opacity:0; transform:translateY(18px); animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards; }
.d-1{ animation-delay:.05s } .d-2{ animation-delay:.18s } .d-3{ animation-delay:.32s } .d-4{ animation-delay:.46s }
@keyframes rise{ to{ opacity:1; transform:none } }

/* ---------- 响应式 ---------- */
@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; gap:40px; }
  .headline .ghost{ left:10px; top:-10px; }
  .about-grid, .contact-grid{ grid-template-columns:1fr; gap:32px; }
  .apps-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .nav-toggle{ display:flex; }
  .nav{ position:fixed; left:24px; right:24px; top:84px; flex-direction:column; align-items:stretch; gap:.25rem; background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:1rem 1.25rem 1.25rem; transform:translateY(-12px); opacity:0; visibility:hidden; transition:opacity .25s, transform .25s, visibility .25s; }
  .nav.open{ opacity:1; transform:none; visibility:visible; }
  .nav > a{ padding:.75rem 0; border-bottom:1px solid var(--line); }
  .nav .nav-cta{ margin-top:.75rem; text-align:center; }
}
@media (max-width:560px){
  .section{ padding-block:64px; }
  .apps-grid{ grid-template-columns:1fr; }
  .stat-band .row{ grid-template-columns:1fr; gap:1.5rem; }
  .stats{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .info-row{ flex-direction:column; gap:.35rem; }
  .info-row .v{ text-align:left; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}