.brand-hero { padding: clamp(125px, 17vw, 210px) 0 clamp(76px, 10vw, 130px); border-bottom: 1px solid var(--line); background: linear-gradient(120deg, var(--paper) 62%, var(--teal) 62%); }
.brand-hero .display { max-width: 850px; }
.brand-hero .display span { color: var(--teal-bright); }
.brand-hero .lede { max-width: 680px; }
.brand-section { padding: clamp(70px, 9vw, 125px) 0; border-bottom: 1px solid var(--line); }
.brand-head { display: grid; grid-template-columns: .35fr 1fr; gap: 30px; margin-bottom: 48px; }
.brand-head h2 { margin: 0; font: 400 clamp(2.7rem, 6vw, 5.5rem)/.9 var(--font-display); text-transform: uppercase; }
.brand-copy { max-width: 780px; }
.brand-copy > :first-child { margin-top: 0; }
.principles, .voice-grid, .logo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.principle, .voice-card { min-height: 230px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.38); }
.principle b { display: block; color: var(--ink); font: 400 3.4rem var(--font-display); }
.principle h3, .voice-card h3 { margin: 16px 0 10px; font: 400 1.8rem var(--font-display); text-transform: uppercase; }
.principle p, .voice-card p { margin: 0; }
.principle p + p { margin-top: 12px; opacity: .65; }
.principle .zh { display: inline; margin-top: 0; }
.canvas-demo { padding: clamp(28px, 5vw, 60px); border: 1px solid var(--line); border-radius: 24px; background: var(--paper); box-shadow: var(--shadow); }
.canvas-demo h3 { margin: 0; font: 400 clamp(2.6rem, 6vw, 5.5rem)/.9 var(--font-display); text-transform: uppercase; }
.canvas-demo h3 span { color: var(--teal-bright); }
.palette { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 34px; }
.swatch { min-height: 190px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; display: flex; align-items: flex-end; font: 10px/1.5 var(--font-mono); }
.swatch.dark { color: var(--white); }
.swatch-navy { background: #0d0e2b; }
.swatch-midnight { background: #1e2050; }
.swatch-teal { background: #00c2c7; }
.swatch-teal-deep { background: #006f74; color: var(--white); }
.swatch-mist { background: #b4b6c8; }
.swatch-paper { background: #f3f1e9; }
.swatch-orange { background: #ff7657; }
.swatch-white { background: #fff; }
.logo-grid { grid-template-columns: repeat(2, 1fr); }
.logo-card { min-height: 310px; padding: 32px; border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.logo-card.dark { background: var(--ink); color: var(--white); }
.logo-card.light { border: 1px solid var(--line); background: var(--white); }
.logo-card img { width: min(100%, 300px); max-height: 150px; object-fit: contain; }
.logo-card .button { margin-top: 24px; }
.logo-card.dark .button { border-color: var(--white); background: var(--white); color: var(--ink); }
.spec-list { padding-left: 20px; }
.spec-list li { margin: 9px 0; }
.type-row { display: grid; grid-template-columns: 180px 1fr; gap: 30px; align-items: baseline; padding: 25px 0; border-top: 1px solid var(--line); }
.type-row .label { font: 10px var(--font-mono); text-transform: uppercase; }
.type-display { font: 400 clamp(2.7rem, 6vw, 5.5rem)/.9 var(--font-display); }
.type-body { font: 1.1rem/1.7 var(--font-body); }
.type-mono { font: .9rem/1.7 var(--font-mono); }
.language-rule { padding: 30px; border-left: 5px solid var(--teal-bright); background: var(--ink); color: var(--white); }
.language-rule .zh { color: var(--teal-bright); }
.loader-demo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; min-height: 380px; padding: clamp(36px, 6vw, 72px); border-radius: 24px; background: var(--ink); color: var(--white); text-align: center; overflow: hidden; }
.loader-demo .ios-spinner { position: relative; left: auto; top: auto; transform: none; width: 116px; height: 116px; }
.loader-demo .eyebrow { margin: 0; color: var(--teal-bright); }
.loader-demo p { margin: 0; max-width: 560px; color: rgba(255,255,255,.72); }
.loader-demo .loader-rule { font-size: .95rem; line-height: 1.7; }
.brand-space { margin-top: 40px; }
.voice-space { margin-top: 36px; }

@media (max-width: 900px) { .principles, .voice-grid { grid-template-columns: 1fr; } .palette { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 700px) { .brand-hero { background: var(--paper); } .brand-head, .logo-grid, .type-row { grid-template-columns: 1fr; } .brand-head { gap: 8px; } .palette { grid-template-columns: repeat(2, 1fr); } .swatch { min-height: 135px; } .loader-demo { min-height: 300px; gap: 20px; } .loader-demo .ios-spinner { width: 92px; height: 92px; } }