/* Project design tokens — landing surface.
   Apple contributes pacing, photography ratio and type hierarchy only.
   Brand blue, copy, layout and CTA geometry stay ours. */

:root{
  --apple-font:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Microsoft YaHei","Noto Sans SC","Segoe UI",sans-serif;
  --apple-ink:#1d1d1f;
  --apple-body:#48566b;
  --apple-muted:#6e6e73;
  --apple-canvas:#f5f5f7;
  --apple-surface:#ffffff;
  --apple-hairline:#e0e0e0;
  --apple-line:#c9ced6;
  --apple-line-strong:#aeb6c2;
  --apple-blue:#4564df;
  --apple-blue-deep:#3856cc;
  --apple-radius-card:18px;
  --apple-space-section:80px;
}

body{
  font-family:var(--apple-font);
  font-size:15px;
  line-height:1.7;
  color:var(--apple-ink);
  background:var(--apple-canvas);
}
a{color:var(--apple-blue)}
header{
  height:64px;
  padding:0 32px;
  gap:24px;
  background:var(--apple-surface);
  border-bottom:1px solid rgba(0,0,0,.08);
}
.brand{font-size:18px;font-weight:600;letter-spacing:.1px}
.mark{width:32px;height:32px;border-radius:8px;background:var(--apple-blue)}
nav{gap:24px;font-size:13px}
nav a{color:var(--apple-muted)}
nav a:hover{color:var(--apple-ink)}
nav .btn{color:#fff}
.btn{
  padding:11px 20px;
  border-radius:8px;
  font-size:14px;
  font-weight:500;
  line-height:1.2;
  background:var(--apple-blue);
}
.btn:hover{background:var(--apple-blue-deep)}
.btn.ghost{background:transparent;color:var(--apple-ink);border-color:var(--apple-line)}
.btn.ghost:hover{background:#fff;border-color:var(--apple-line-strong)}

main{
  max-width:1080px;
  padding:72px 32px 80px;
}
.hero{
  grid-template-columns:1.05fr .95fr;
  gap:56px;
  align-items:center;
}
.eyebrow{font-size:11px;letter-spacing:.14em;color:var(--apple-blue)}
h1{
  font-size:44px;
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.8px;
  margin:16px 0 20px;
  color:var(--apple-ink);
}
.hero-tail{white-space:nowrap}
.lead{
  font-size:17px;
  line-height:1.7;
  color:var(--apple-muted);
  max-width:560px;
}
.actions{gap:12px;margin-top:28px}
.note{font-size:12px;line-height:1.7;color:var(--apple-muted);margin-top:16px}

section{margin-top:var(--apple-space-section)}
h2{
  font-size:28px;
  font-weight:600;
  line-height:1.3;
  letter-spacing:-.4px;
  margin:0 0 14px;
  color:var(--apple-ink);
}
h3{font-size:16px;font-weight:600;line-height:1.5;margin:0 0 7px;color:var(--apple-ink)}
.grid,.prices{gap:16px}
.card,.price{
  padding:24px;
  border:1px solid var(--apple-hairline);
  border-radius:var(--apple-radius-card);
  background:var(--apple-surface);
}
.card p,.price p{color:var(--apple-muted);font-size:14px;line-height:1.7}
.price strong{font-size:32px;font-weight:600;letter-spacing:-.3px;margin:8px 0}
.price .hint{font-size:12px;color:var(--apple-muted)}
.faq details{
  padding:16px 18px;
  border-color:var(--apple-hairline);
  border-radius:12px;
  background:var(--apple-surface);
}
.faq summary{font-size:15px;font-weight:600}
.faq p{font-size:14px;line-height:1.75;color:var(--apple-muted)}
footer{
  margin-top:var(--apple-space-section);
  padding:32px 40px;
  background:var(--apple-canvas);
  border-top:1px solid var(--apple-hairline);
  color:var(--apple-muted);
  font-size:12px;
}
footer a{color:var(--apple-muted)}
footer a:hover{color:var(--apple-ink)}

/* The photo panel is the one heavy surface in the page; keep it singular. */
.hero-visual .glow{opacity:.62}
.photo-showcase{
  max-width:540px;
  border-radius:26px;
  box-shadow:0 30px 70px rgba(42,58,88,.14),inset 0 1px 0 rgba(255,255,255,.96);
}
.deck-card{box-shadow:0 18px 36px rgba(31,45,70,.2),0 2px 6px rgba(31,45,70,.1)}
.deck-card:hover{box-shadow:0 28px 50px rgba(31,45,70,.24),0 3px 8px rgba(31,45,70,.12)}

@media(max-width:860px){
  header{height:auto;min-height:60px;padding:12px 20px;gap:10px}
  main{padding:48px 20px 64px}
  .hero{grid-template-columns:1fr;gap:40px}
  .hero-visual{order:2;min-height:400px}
  .grid,.prices{grid-template-columns:1fr}
  h1{font-size:38px}
  h2{font-size:26px}
  section{margin-top:64px}
}
@media(max-width:520px){
  header{padding:10px 20px}
  .hero-visual{min-height:330px}
  h1{font-size:34px;letter-spacing:-.6px}
  h2{font-size:24px}
  .lead{font-size:16px}
  main{padding:40px 20px 56px}
  section{margin-top:56px}
  footer{padding:24px 20px}
}