.design-page {
  --spec-line: #a8a8ad;
  --spec-grid: rgba(29, 29, 31, 0.055);
}

.design-page main > section { max-width: none; }
.design-page main > section:nth-of-type(even) { background: var(--color-bg-alt); }
.eyebrow {
  display: block;
  color: var(--color-brand-deep);
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
}

.design-hero {
  min-height: calc(100vh - 65px);
  display: grid;
  grid-template-columns: minmax(300px, .78fr) minmax(560px, 1.22fr);
  align-items: center;
  gap: clamp(48px, 7vw, 112px);
  padding: clamp(72px, 9vw, 128px) max(28px, calc((100vw - 1320px) / 2)) !important;
  overflow: hidden;
}
.design-hero__copy h1 {
  margin: 20px 0 26px;
  font-size: clamp(48px, 6vw, 82px);
  line-height: 1.02;
  letter-spacing: -.045em;
  font-weight: 600;
}
.design-hero__copy > p {
  margin: 0;
  max-width: 520px;
  color: var(--color-muted);
  font-size: clamp(17px, 1.5vw, 21px);
}
.design-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.design-meta span {
  padding: 7px 12px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-pill);
  color: var(--color-muted);
  font: 600 11px/1 "SF Mono", Menlo, monospace;
  letter-spacing: .06em;
}

.blueprint {
  position: relative;
  min-height: 620px;
  display: grid;
  place-items: center;
  border-radius: 28px;
  background-color: #fafafa;
  background-image:
    linear-gradient(var(--spec-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--spec-grid) 1px, transparent 1px);
  background-size: 24px 24px;
  box-shadow: inset 0 0 0 1px rgba(29,29,31,.06), var(--shadow-soft);
}
.sticker-spec {
  position: relative;
  width: min(74%, 640px);
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border: 6px solid #111;
  border-radius: 32px;
  background: #111;
  box-shadow: 18px 24px 60px rgba(102,126,234,.2);
}
.sticker-spec__row { display: flex; height: 100%; gap: 5px; }
.sticker-spec__half {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding-bottom: 48px;
  overflow: hidden;
}
.sticker-spec__half--nfc {
  background:
    radial-gradient(circle at 25% 25%, rgba(255,255,255,.16) 2px, transparent 3px) 0 0 / 24px 24px,
    linear-gradient(135deg,#667eea,#764ba2);
}
.sticker-spec__half--qr {
  background:
    linear-gradient(45deg,rgba(255,255,255,.1) 25%,transparent 25%) 0 0 / 22px 22px,
    linear-gradient(135deg,#f093fb,#f5576c);
}
.sticker-spec--meituan .sticker-spec__half--nfc {
  background:
    radial-gradient(circle at 25% 25%, rgba(255,255,255,.16) 2px, transparent 3px) 0 0 / 24px 24px,
    linear-gradient(135deg,#ffd100,#ffa500);
}
.sticker-spec--meituan .sticker-spec__half--qr {
  background:
    linear-gradient(45deg,rgba(255,255,255,.1) 25%,transparent 25%) 0 0 / 22px 22px,
    linear-gradient(135deg,#ff6b35,#f7931e);
}
.sticker-spec--dark .sticker-spec__half--nfc {
  background:
    radial-gradient(circle at 25% 25%, rgba(255,255,255,.11) 2px, transparent 3px) 0 0 / 24px 24px,
    linear-gradient(135deg,#2c3e50,#34495e);
}
.sticker-spec--dark .sticker-spec__half--qr {
  background:
    linear-gradient(45deg,rgba(255,255,255,.08) 25%,transparent 25%) 0 0 / 22px 22px,
    linear-gradient(135deg,#1a252f,#2c3e50);
}
.sticker-spec__half strong {
  color: #fff;
  font-size: clamp(13px, 1.25vw, 18px);
  letter-spacing: .08em;
  text-shadow: 0 2px 0 rgba(0,0,0,.2);
}
.nfc-mark {
  position: relative;
  width: 112px;
  height: 112px;
  border-radius: 24px;
  border: 4px solid rgba(255,255,255,.65);
  background: rgba(255,255,255,.15);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.nfc-mark__dot {
  position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #fff;
  left: 50%; top: 50%; transform: translate(-50%,-50%);
}
.nfc-mark__arc {
  position: absolute; left: 50%; top: 50%; border: 4px solid #fff; border-top-color: transparent;
  border-right-color: transparent; border-radius: 50%; transform: translate(-50%,-50%) rotate(-45deg);
}
.nfc-mark__arc--one { width: 44px; height: 44px; }
.nfc-mark__arc--two { width: 72px; height: 72px; opacity: .72; }
.qr-sample {
  width: 140px; height: 140px; padding: 12px; position: relative; border-radius: 18px;
  background: #fff; box-shadow: 0 9px 24px rgba(0,0,0,.15);
  display: grid; grid-template-columns: repeat(3,1fr); gap: 7px;
}
.qr-sample > i { position: absolute; width: 34px; height: 34px; border: 7px solid #111; }
.qr-sample > i:nth-child(1) { left: 12px; top: 12px; }
.qr-sample > i:nth-child(2) { right: 12px; top: 12px; }
.qr-sample > i:nth-child(3) { left: 12px; bottom: 12px; }
.qr-sample > span { background: #111; border-radius: 2px; }
.qr-sample > span:nth-of-type(2n) { transform: scale(.55); }
.sticker-spec__brand {
  position: absolute; z-index: 3; left: 50%; bottom: 20px; transform: translateX(-50%);
  padding: 9px 24px; border-radius: 999px; background: #111; color: #fff;
  border: 2px solid rgba(255,255,255,.18); white-space: nowrap;
  font-size: clamp(10px, 1vw, 14px); font-weight: 800; letter-spacing: .16em;
}

.measure, .callout { position: absolute; color: var(--color-muted); font: 600 10px/1 "SF Mono",Menlo,monospace; }
.measure--width { width: 74%; left: 13%; top: 54px; border-top: 1px solid var(--spec-line); text-align: center; }
.measure--width::before,.measure--width::after { content:""; position:absolute; top:-5px; height:10px; border-left:1px solid var(--spec-line); }
.measure--width::before { left:0; } .measure--width::after { right:0; }
.measure--width span { position: relative; top: -18px; padding: 0 8px; background: #fafafa; }
.measure--height { height: 61%; right: 36px; top: 19%; border-left: 1px solid var(--spec-line); }
.measure--height::before,.measure--height::after { content:""; position:absolute; left:-5px; width:10px; border-top:1px solid var(--spec-line); }
.measure--height::before { top:0; }.measure--height::after { bottom:0; }
.measure--height span { position:absolute; top:50%; left:9px; transform:translateY(-50%) rotate(90deg); white-space:nowrap; }
.measure--radius { left: 6%; top: 25%; padding-left: 76px; }
.measure--radius::before { content:""; position:absolute; left:0; top:6px; width:66px; border-top:1px solid var(--spec-line); transform:rotate(18deg); transform-origin:right; }
.callout { display:flex; gap:7px; align-items:center; }
.callout span { color:var(--color-ink); }.callout b { font-weight:500; }
.callout::before { content:""; width:54px; border-top:1px solid var(--spec-line); }
.callout--frame { left:4%; bottom:16%; }
.callout--split { left:42%; bottom:8%; }
.callout--split::before { width:34px; transform:rotate(-58deg); transform-origin:right; }
.callout--qr { right:5%; top:25%; flex-direction:row-reverse; }
.blueprint__index { position:absolute; right:24px; bottom:20px; color:#aaa; font:600 10px/1 "SF Mono",monospace; letter-spacing:.1em; }
.theme-control {
  position:absolute; left:22px; top:18px; display:flex; align-items:center; gap:8px;
  color:var(--color-muted-light); font:700 9px/1 "SF Mono",monospace; letter-spacing:.1em;
}
.theme-dot { width:22px; height:22px; padding:0; border:3px solid #fafafa; border-radius:50%; cursor:pointer; box-shadow:0 0 0 1px var(--color-divider); }
.theme-dot.is-active { box-shadow:0 0 0 2px var(--color-ink); }
.theme-dot--default { background:linear-gradient(135deg,#667eea,#f5576c); }
.theme-dot--meituan { background:linear-gradient(135deg,#ffd100,#ff6b35); }
.theme-dot--dark { background:linear-gradient(135deg,#34495e,#1a252f); }

.section-heading { max-width: 820px; margin: 0 auto clamp(48px,7vw,80px); text-align: center; }
.section-heading .eyebrow { margin-bottom: 18px; }
.section-heading p { max-width: 650px; margin: 18px auto 0; color: var(--color-muted); font-size: 18px; }
.spec-section,.color-section,.principles-section,.design-cta { padding-left:max(24px,calc((100vw - 1180px)/2)) !important; padding-right:max(24px,calc((100vw - 1180px)/2)) !important; }
.token-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.token-grid article { padding:28px; min-height:220px; background:#fff; border-radius:22px; box-shadow:var(--shadow-soft); }
.token-grid article > span { color:var(--color-brand); font:700 11px/1 "SF Mono",monospace; }
.token-grid strong { display:block; margin:38px 0 12px; font:600 clamp(20px,2vw,27px)/1.1 "SF Mono",Menlo,monospace; letter-spacing:-.04em; }
.token-grid p { margin:0; color:var(--color-muted); font-size:14px; }
.production-note { margin:24px 0 0; color:var(--color-muted-light); font-size:12px; text-align:center; }
.manufacture-strip {
  display:grid; grid-template-columns:repeat(4,1fr); margin-top:18px; overflow:hidden;
  border:1px solid var(--color-divider); border-radius:16px; background:rgba(255,255,255,.55);
}
.manufacture-strip span { padding:14px 16px; color:var(--color-muted); font-size:12px; text-align:center; border-right:1px solid var(--color-divider); }
.manufacture-strip span:last-child { border-right:0; }
.manufacture-strip b { color:var(--color-ink); margin-right:5px; }

.color-layout { display:grid; grid-template-columns:repeat(4,1fr); min-height:310px; overflow:hidden; border-radius:28px; box-shadow:var(--shadow-card); }
.color-card { display:flex; flex-direction:column; justify-content:flex-end; padding:28px; color:#fff; transition:flex .25s ease; }
.color-card:hover { flex:1.3; }
.color-card span { font:600 12px/1 "SF Mono",monospace; opacity:.72; }
.color-card strong { margin-top:7px; font-size:18px; }
.color-card--brand { background:#667eea; }.color-card--deep { background:#764ba2; }
.color-card--pink { background:#f5576c; }.color-card--ink { background:#111; }

.principles-section { display:grid; grid-template-columns:.9fr 1.1fr; gap:90px; align-items:start; }
.principles-copy { position:sticky; top:130px; }
.principles-copy h2 { text-align:left !important; margin-top:20px !important; }
.principle-list { list-style:none; margin:0; padding:0; border-top:1px solid var(--color-divider); }
.principle-list li { display:grid; grid-template-columns:60px 1fr; gap:22px; padding:32px 0; border-bottom:1px solid var(--color-divider); }
.principle-list li > span { color:var(--color-brand-deep); font:700 12px/1 "SF Mono",monospace; padding-top:6px; }
.principle-list strong { font-size:22px; }.principle-list p { margin:7px 0 0; color:var(--color-muted); }

.design-cta { text-align:center; background:#fff !important; }
.design-cta h2 { max-width:800px; margin:20px auto 36px !important; }
.design-cta .hero-actions { justify-content:center; }

.product-cta__actions { justify-content:center; margin:0; }

@media (max-width: 980px) {
  .design-hero { grid-template-columns:1fr; }
  .design-hero__copy { text-align:center; }.design-hero__copy > p { margin-inline:auto; }
  .design-meta { justify-content:center; }.blueprint { min-height:600px; }
  .token-grid { grid-template-columns:1fr 1fr; }
  .manufacture-strip { grid-template-columns:1fr 1fr; }
  .manufacture-strip span:nth-child(2) { border-right:0; }
  .manufacture-strip span:nth-child(-n+2) { border-bottom:1px solid var(--color-divider); }
  .principles-section { grid-template-columns:1fr; gap:48px; }.principles-copy { position:static; }
}
@media (max-width: 640px) {
  .design-hero { padding-inline:16px !important; }
  .blueprint { min-height:440px; border-radius:20px; }
  .sticker-spec { width:82%; border-width:4px; border-radius:20px; }
  .nfc-mark { width:66px; height:66px; border-radius:14px; }.nfc-mark__arc--one{width:28px;height:28px}.nfc-mark__arc--two{width:44px;height:44px}
  .qr-sample { width:82px;height:82px;padding:8px;gap:4px;border-radius:11px }.qr-sample>i{width:21px;height:21px;border-width:4px}.qr-sample>i:nth-child(1){left:8px;top:8px}.qr-sample>i:nth-child(2){right:8px;top:8px}.qr-sample>i:nth-child(3){left:8px;bottom:8px}
  .sticker-spec__half { gap:10px;padding-bottom:32px }.sticker-spec__brand{bottom:10px;padding:6px 12px}.measure--height,.measure--radius,.callout{display:none}.measure--width{top:42px;width:82%;left:9%}.blueprint__index{right:14px;bottom:13px}
  .token-grid { grid-template-columns:1fr; }.token-grid article{min-height:auto}.token-grid strong{margin-top:24px}
  .manufacture-strip { grid-template-columns:1fr; }.manufacture-strip span { border-right:0; border-bottom:1px solid var(--color-divider); }.manufacture-strip span:last-child{border-bottom:0}
  .color-layout { grid-template-columns:1fr 1fr; min-height:420px; }.color-card:hover{flex:1}
  .principles-copy h2 { text-align:center !important; }.principles-copy{text-align:center}
}

@media (prefers-reduced-motion: reduce) {
  .color-card { transition:none; }
}