/* 自托管 Archivo（变体字重 400–700，latin 子集 35KB）。
   ⚠️ 原来挂的是 fonts.googleapis.com —— 那个 CSS 是渲染阻塞的，国内/弱网会一直等到超时，
   页面就表现为"半天打不开"。自托管后走 Cloudflare 缓存，和 styles.css 一样 HIT。
   中文不在这个字体里，照常走系统字体（苹方 / 思源黑体）。 */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;          /* 变体字体，一个文件覆盖整段字重 */
  font-display: swap;            /* 字体没到也先用后备字体画，不白屏 */
  src: url("/assets/fonts/archivo-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 精准球童官网 —— 设计系统
   定调：Arccos 品类骨架（航拍 + 弹道 + App 界面）+ 更克制的留白和配色。
   ⚠️ SVG 的 fill/stroke 表现属性不支持 var()，模板里一律写字面色值。 */

:root{
  --bone:#F2F1EC;   /* 页面底 */
  --paper:#FAFAF7;  /* 抬升的面 */
  --ink:#15181A;    /* 标题正文 */
  --muted:#656B66;  /* 次级文字 */
  --pine:#0F2D24;   /* 深草 —— 按钮、手机外壳 */
  --turf:#2E7D52;   /* 实时数据强调色 */
  --sand:#D9CFB4;   /* 沙坑 */
  --line:#DAD8D0;   /* 细线 */
  --radius:18px;
  --ui:"Archivo","Helvetica Neue","PingFang SC","Noto Sans SC",system-ui,sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bone); color:var(--ink);
  font-family:var(--ui); font-weight:400; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--turf); outline-offset:3px; }

.wrap{ max-width:1280px; margin-inline:auto; padding-inline:24px; }
.narrow{ max-width:760px; }

/* ── 顶栏 ───────────────────────────────── */
.masthead{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:22px; }
.mark{ font-weight:700; font-size:1.02rem; letter-spacing:.14em; text-transform:uppercase;
       color:var(--pine); text-decoration:none; }
.nav{ display:flex; gap:28px; align-items:center; }
.nav a{ font-size:.82rem; font-weight:500; color:var(--muted); text-decoration:none; transition:color .2s; }
.nav a:hover,.nav a:focus-visible{ color:var(--pine); }

/* ── 按钮 ───────────────────────────────── */
.btn{ display:inline-flex; align-items:center; gap:10px; font-size:.92rem; font-weight:600;
      text-decoration:none; padding:14px 26px; border-radius:999px; transition:all .25s; border:0; }
.btn-1{ background:var(--pine); color:#fff; }
.btn-1:hover,.btn-1:focus-visible{ background:#164034; }
.btn-2{ color:var(--pine); border:1px solid var(--line); background:transparent; }
.btn-2:hover,.btn-2:focus-visible{ border-color:var(--pine); }

/* ── Hero ───────────────────────────────── */
.hero{ display:grid; grid-template-columns:1fr 1.12fr; gap:56px; align-items:center; padding-block:46px 72px; }
.eyebrow{ font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
          color:var(--turf); margin:0 0 22px; }
h1{ font-size:clamp(2.5rem,5.2vw,3.9rem); font-weight:700; line-height:1.04;
    letter-spacing:-.025em; margin:0; text-wrap:balance; }
.lede{ margin:22px 0 0; max-width:42ch; font-size:1.04rem; line-height:1.66; color:var(--muted); }
.cta-row{ margin-top:32px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.meta{ margin-top:20px; font-size:.78rem; color:var(--muted); }

/* ── 航拍卡 ─────────────────────────────── */
.card{ position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3;
       background:#1B3B2C; box-shadow:0 18px 44px rgba(15,45,36,.18); }
.card > svg,.card > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.chip{ position:absolute; background:rgba(255,255,255,.96); border-radius:10px; padding:9px 13px;
       box-shadow:0 6px 18px rgba(0,0,0,.18); }
.chip-k{ font-size:.56rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
         color:var(--muted); display:block; margin-bottom:2px; }
.chip-v{ font-size:.86rem; font-weight:600; font-variant-numeric:tabular-nums; }
.chip-v em{ font-style:normal; color:var(--turf); }
.chip-tl{ top:14px; left:14px; }        /* 右上会被手机挡，放左上 */
.chip-bl{ bottom:14px; left:14px; display:flex; gap:20px; }
.pill{ position:absolute; background:rgba(14,28,22,.84); color:#fff; border-radius:999px;
       font-size:.63rem; font-weight:600; padding:4px 10px; font-variant-numeric:tabular-nums;
       transform:translate(-50%,-50%); white-space:nowrap; }

/* ── 手机 / App 界面 ────────────────────── */
.phone{ position:absolute; right:16px; bottom:16px; width:26%; max-width:166px; aspect-ratio:9/19;
        background:#0B1F18; border-radius:22px; padding:6px; box-shadow:0 14px 34px rgba(0,0,0,.4); }
.screen{ width:100%; height:100%; background:var(--pine); border-radius:17px; overflow:hidden;
         display:flex; flex-direction:column; color:#EAF0EC; }
.s-top{ display:flex; justify-content:space-between; align-items:baseline; padding:11px 11px 7px;
        border-bottom:1px solid rgba(255,255,255,.1); }
.s-hole{ font-size:.64rem; font-weight:700; white-space:nowrap; }
.s-par{ font-size:.44rem; font-weight:500; color:#9DB3A7; letter-spacing:.08em;
        text-transform:uppercase; white-space:nowrap; }
.s-map{ flex:1; position:relative; background:#143A2C; }
.s-map svg{ position:absolute; inset:0; width:100%; height:100%; }
.s-dist{ text-align:center; padding:7px 0 5px; }
.s-num{ font-size:1.42rem; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; }
.s-unit{ font-size:.46rem; color:#9DB3A7; letter-spacing:.13em; text-transform:uppercase; }
.s-row{ display:flex; border-top:1px solid rgba(255,255,255,.1); }
.s-cell{ flex:1; text-align:center; padding:6px 0; }
.s-cell + .s-cell{ border-left:1px solid rgba(255,255,255,.1); }
.s-k{ display:block; font-size:.42rem; color:#9DB3A7; letter-spacing:.1em; text-transform:uppercase; }
.s-v{ font-size:.6rem; font-weight:600; font-variant-numeric:tabular-nums; }
.s-club{ background:#17483A; padding:7px 11px; display:flex; justify-content:space-between; align-items:center; }
.s-club b{ font-size:.66rem; }
.s-club span{ font-size:.46rem; color:#8FD3AC; letter-spacing:.06em; }

/* ── 功能段 ─────────────────────────────── */
.feature{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; padding-block:62px; }
.feature:nth-child(even) .feature-media{ order:-1; }
.feature h2{ font-size:clamp(1.6rem,3vw,2.2rem); font-weight:700; letter-spacing:-.02em;
             margin:14px 0 0; text-wrap:balance; }
.feature p{ margin:16px 0 0; color:var(--muted); font-size:1rem; line-height:1.7; max-width:46ch; }
.kicker{ font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--turf); }
.feature-media{ border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; background:#20533A;
                position:relative; }
/* 照片未到位时的槽位标记 */
.slot{ position:absolute; inset:0; display:grid; place-items:center; text-align:center;
       color:rgba(255,255,255,.72); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
       line-height:2; padding:20px; }
.slot b{ display:block; color:#fff; font-weight:600; }

/* ── 收尾 CTA ───────────────────────────── */
.close{ background:var(--pine); color:#fff; border-radius:var(--radius); padding:56px 40px;
        text-align:center; margin-block:28px 72px; }
.close h2{ font-size:clamp(1.6rem,3vw,2.2rem); font-weight:700; letter-spacing:-.02em; margin:0; }
.close p{ color:#A9C0B3; margin:14px 0 28px; }
.close .btn-1{ background:#fff; color:var(--pine); }
.close .btn-1:hover{ background:#E8EFE9; }

/* ── 内页通用 ───────────────────────────── */
.page-head{ padding-block:40px 30px; }
.page-head h1{ font-size:clamp(2rem,4vw,2.9rem); }
.page-head .lede{ margin-top:16px; }

.blocks{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line);
         border-radius:var(--radius); overflow:hidden; margin-bottom:56px; }
.block{ background:var(--paper); padding:26px 28px; }
.block h3{ margin:0 0 8px; font-size:1.02rem; font-weight:600; }
.block p{ margin:0; color:var(--muted); line-height:1.75; font-size:.94rem; }

/* 下载页：按钮/二维码位置用块元素占位，上面写「即将上线」 */
.dl-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-bottom:28px; }
.dl-block{ background:var(--paper); border:1px solid var(--line); border-radius:14px;
           padding:26px; display:flex; flex-direction:column; gap:14px; min-height:188px; }
.dl-k{ font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.dl-soon{ flex:1; display:grid; place-items:center; background:#E9E8E1; border-radius:10px;
          color:var(--pine); font-weight:600; font-size:.9rem; letter-spacing:.06em; min-height:76px; }
.dl-note{ font-size:.78rem; color:var(--muted); }
.dl-qr .dl-soon{ aspect-ratio:1; max-width:120px; margin-inline:auto; width:100%; }

/* 正文型页面（隐私 / 协议） */
.prose{ padding-bottom:64px; }
.prose h2{ font-size:1.22rem; font-weight:600; margin:34px 0 10px; }
.prose h3{ font-size:1rem; font-weight:600; margin:24px 0 8px; }
.prose p,.prose li{ color:var(--muted); line-height:1.8; font-size:.95rem; }
.prose ul{ padding-left:20px; }
.notice{ background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--turf);
         border-radius:10px; padding:20px 22px; color:var(--muted); font-size:.94rem; line-height:1.75; }
.stamp{ font-size:.76rem; color:var(--muted); margin-top:28px; padding-top:18px; border-top:1px solid var(--line); }

.contact{ background:var(--pine); color:#fff; border-radius:var(--radius); padding:30px 32px;
          display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
          margin-bottom:46px; }
.contact .dl-k{ color:#9DB3A7; }
.contact a{ font-size:1.3rem; font-weight:700; text-decoration:none; letter-spacing:-.01em; }
.contact .dl-note{ color:#A9C0B3; }

/* ── 页脚 ───────────────────────────────── */
footer{ border-top:1px solid var(--line); padding-block:34px 44px; }
.foot{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center; }
.foot nav{ display:flex; gap:24px; flex-wrap:wrap; }
.foot a{ font-size:.84rem; color:var(--muted); text-decoration:none; }
.foot a:hover{ color:var(--pine); }
.foot small{ font-size:.78rem; color:var(--muted); }

/* ── 响应式 ─────────────────────────────── */
@media (max-width:900px){
  .hero,.feature{ grid-template-columns:1fr; gap:34px; }
  .hero{ padding-block:26px 48px; }
  .feature{ padding-block:40px; }
  .feature:nth-child(even) .feature-media{ order:0; }
  .nav{ display:none; }
  .phone{ width:34%; }
  .contact{ flex-direction:column; align-items:flex-start; }
}
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; scroll-behavior:auto; } }