/* usmoments.app 首页。法律页面仍用 style.css；这里只管首页。
   记忆点只有一个：图标里那两枚交叠的玻璃圆。其余保持安静。 */

:root {
  --paper: #F7F3EE;
  --linen: #EDE6DA;
  --ink: #2B2B2B;
  --taupe: #6B645A;
  --faint: #9C9388;
  --brass: #B08D57;
  --rule: #D8CEBC;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; border-radius: 4px; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; }

/* ── top bar ─────────────────────────────────────────────── */
.bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 28px 0;
}
.bar .mark {
  font-family: var(--serif); font-style: italic; font-size: 26px; letter-spacing: .5px;
  text-decoration: none; color: var(--ink);
}
.bar nav { display: flex; gap: 28px; font-size: 15px; }
.bar nav a { text-decoration: none; color: var(--taupe); }
.bar nav a:hover { color: var(--ink); }

/* ── buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 54px; padding: 0 30px; border-radius: 27px;
  background: var(--ink); color: var(--paper);
  font-family: var(--serif); font-style: italic; font-size: 21px; letter-spacing: .3px;
  text-decoration: none;
  transition: background-color .2s ease;
}
.btn:hover { background: #3d3a36; }
.note { color: var(--faint); font-size: 14px; margin-top: 14px; }

/* ── hero ────────────────────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: 48px;
  min-height: calc(100vh - 110px);
  padding: 24px 0 72px;
}
.hero h1 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(46px, 6.4vw, 86px);
  line-height: 1.02; letter-spacing: -.5px;
  margin: 0 0 26px;
  max-width: 11ch;
}
.hero p.lead {
  font-size: 19px; line-height: 1.6; color: var(--taupe);
  max-width: 30em; margin: 0 0 36px;
}

/* 两枚圆：后面那枚偏暖金、实一些；前面那枚是磨砂玻璃，"us" 压印在上面。
   加载时两枚从两侧靠拢到交叠 —— 整页唯一的自动动画。 */
.discs {
  position: relative;
  width: min(100%, 520px);
  aspect-ratio: 1 / 1;
  justify-self: center;
}
.disc {
  position: absolute;
  width: 64%; aspect-ratio: 1 / 1; border-radius: 50%;
}
.disc.back {
  left: 4%; top: 6%;
  background:
    radial-gradient(circle at 38% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 55%),
    linear-gradient(160deg, #E3D4BC, #D3BE9C);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -14px 30px rgba(120, 92, 56, .12),
    0 30px 60px -28px rgba(80, 58, 30, .35);
}
.disc.front {
  right: 4%; bottom: 6%;
  background:
    radial-gradient(circle at 34% 26%, rgba(255,255,255,.55), rgba(255,255,255,0) 58%),
    linear-gradient(165deg, rgba(246,240,231,.92), rgba(233,223,207,.88));
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,.9),
    inset 0 0 0 1px rgba(255,255,255,.55),
    inset 0 -18px 34px rgba(120, 92, 56, .10),
    0 40px 70px -30px rgba(80, 58, 30, .40);
  display: flex; align-items: center; justify-content: center;
}
.disc.front span {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(64px, 9vw, 118px);
  line-height: 1; letter-spacing: -1px;
  color: #8C7B66;
  /* 压印：上沿一道暗、下沿一道亮 */
  text-shadow: 0 -1px 0 rgba(70, 52, 30, .35), 0 1.5px 0 rgba(255,255,255,.85);
  transform: translate(6%, 4%);
}

@media (prefers-reduced-motion: no-preference) {
  .disc.back  { animation: drift-left 1.6s cubic-bezier(.2,.7,.1,1) .15s both; }
  .disc.front { animation: drift-right 1.6s cubic-bezier(.2,.7,.1,1) .15s both; }
  .disc.front span { animation: appear .9s ease 1.1s both; }
}
@keyframes drift-left  { from { transform: translate(-18%, -6%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes drift-right { from { transform: translate(18%, 6%);  opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }

/* ── features ────────────────────────────────────────────── */
.features { padding-top: 40px; padding-bottom: 40px; }
.features > h2, .promise h2, .closing h2 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(36px, 4.4vw, 56px); line-height: 1.08;
  margin: 0 0 18px; max-width: 16ch;
}
.features > p.intro { color: var(--taupe); max-width: 34em; margin: 0 0 40px; }

.feature {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 72px;
  align-items: center;
  padding: 56px 0;
  border-top: 1px solid var(--rule);
}
.feature:nth-of-type(even) { grid-template-columns: 1fr 300px; }
.feature:nth-of-type(even) .shot { order: 2; }
.feature h3 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(30px, 3.2vw, 40px); line-height: 1.12;
  margin: 0 0 14px; max-width: 18ch;
}
.feature p { color: var(--taupe); margin: 0; max-width: 28em; }

/* 截图：iPhone 的比例和圆角，不画假边框 */
.shot { margin: 0; }
.shot img {
  width: 100%; aspect-ratio: 1179 / 2556; object-fit: cover;
  border-radius: 38px;
  box-shadow: 0 0 0 1px rgba(43,43,43,.06), 0 40px 70px -40px rgba(60, 45, 25, .45);
  background: var(--linen);
}
/* 截图还没放进来时，整行退成纯文字 */
.feature.no-shot,
.feature.no-shot:nth-of-type(even) { grid-template-columns: 1fr; padding: 44px 0; }
.feature.no-shot .shot { display: none; }
.feature.no-shot > div {
  display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: baseline;
}
.feature.no-shot h3 { margin: 0; }
@media (max-width: 860px) {
  .feature.no-shot > div { grid-template-columns: 1fr; gap: 12px; }
}

/* ── promise ─────────────────────────────────────────────── */
.promise {
  background: var(--linen);
  margin-top: 64px;
  padding: 104px 0;
}
.promise .grid {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 72px; align-items: start;
}
.promise p.intro { color: var(--taupe); margin: 0 0 22px; max-width: 26em; }
.promise ul { list-style: none; margin: 0; padding: 0; }
.promise li {
  font-family: var(--serif); font-size: 24px; line-height: 1.35;
  padding: 20px 0; border-top: 1px solid var(--rule);
}
.promise li:last-child { border-bottom: 1px solid var(--rule); }
.promise a.more { font-size: 15px; color: var(--taupe); text-decoration-color: var(--brass); text-underline-offset: 4px; }

/* ── closing ─────────────────────────────────────────────── */
.closing { text-align: center; padding: 120px 0 96px; }
.closing .mini {
  position: relative; width: 120px; height: 84px; margin: 0 auto 34px;
}
.closing .mini i {
  position: absolute; top: 0; width: 84px; height: 84px; border-radius: 50%;
}
.closing .mini i:first-child { left: 0; background: linear-gradient(160deg, #E6D9C5, #D9C6A8); }
.closing .mini i:last-child {
  right: 0; background: linear-gradient(165deg, rgba(250,246,240,.9), rgba(236,227,213,.85));
  box-shadow: inset 0 1px 1px rgba(255,255,255,.9), 0 14px 28px -16px rgba(80,58,30,.45);
}
.closing h2 { margin-left: auto; margin-right: auto; }
.closing p { color: var(--taupe); margin: 0 auto 34px; max-width: 28em; }

/* ── footer ──────────────────────────────────────────────── */
footer.site {
  border-top: 1px solid var(--rule);
  padding: 30px 0 48px;
  display: flex; flex-wrap: wrap; gap: 26px; align-items: center;
  font-size: 14px; color: var(--faint);
}
footer.site a { color: var(--faint); text-decoration: none; }
footer.site a:hover { color: var(--ink); }
footer.site .spacer { flex: 1; }

/* ── small screens ───────────────────────────────────────── */
@media (max-width: 860px) {
  .bar nav { gap: 18px; }
  .hero { grid-template-columns: 1fr; min-height: 0; gap: 8px; padding-top: 8px; }
  .discs { order: -1; width: min(86%, 380px); }
  .feature, .feature:nth-of-type(even) { grid-template-columns: 1fr; gap: 32px; padding: 44px 0; }
  .feature:nth-of-type(even) .shot { order: 0; }
  .shot { max-width: 260px; }
  .promise { padding: 72px 0; }
  .promise .grid { grid-template-columns: 1fr; gap: 28px; }
  .promise li { font-size: 21px; }
  .closing { padding: 88px 0 72px; }
}
@media (max-width: 420px) {
  .wrap { padding: 0 20px; }
  .bar nav a.hide-sm { display: none; }
}