.nt-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--sp-8); align-items: center; padding: var(--sp-8) 0 var(--sp-7); }
.nt-hero h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(3rem, 7vw, 5rem); letter-spacing: -.01em; line-height: 1; max-width: 11ch; }
.nt-frame { position: relative; aspect-ratio: 3 / 2; border: 2px solid var(--ink); border-radius: var(--r-sm); display: grid; place-items: center; background: repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--ink) 5%, transparent) 14px 15px); }
.nt-frame::before, .nt-frame::after { content: ""; position: absolute; width: 28px; height: 28px; border: solid var(--accent); }
.nt-frame::before { top: -10px; left: -10px; border-width: 4px 0 0 4px; }
.nt-frame::after { bottom: -10px; right: -10px; border-width: 0 4px 4px 0; }
.nt-frame span { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink-3); text-align: center; padding: var(--sp-4); }
.destaque { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--sp-7); padding: var(--sp-7); border-radius: var(--r-xl); background: var(--surface-inverse); color: var(--ink-inverse); }
.destaque blockquote { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.25; letter-spacing: -.02em; }
.destaque p { color: color-mix(in srgb, var(--ink-inverse) 75%, transparent); }
.destaque .mono { color: color-mix(in srgb, var(--ink-inverse) 60%, transparent); }
.historias { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--sp-4); }
.historia { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.historia h3 { margin: 0; }
.historia p { margin: 0; font-size: var(--fs-sm); }
.historia .foot { margin-top: auto; display: flex; align-items: center; gap: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
@media (max-width: 860px) { .nt-hero, .destaque { grid-template-columns: 1fr; } .destaque { padding: var(--sp-6); } }