.brand-mark { width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; background: white; color: var(--brand); font-weight: 900; position: relative; }
.brand-mark::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); position: absolute; top: -2px; left: -2px; }
.page-header { display: flex; align-items: flex-start; gap: 16px; justify-content: space-between; margin-bottom: 18px; }
.page-header p { margin: 0; color: var(--ink-soft); }
.content-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(320px, .8fr); gap: 16px; }
.public-shell { min-height: 100vh; background: #f7fafc; }
.public-header { height: 72px; display: flex; align-items: center; gap: 18px; padding: 0 max(24px, calc((100vw - 1180px)/2)); background: rgba(255,255,255,.92); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; backdrop-filter: blur(10px); }
.public-nav { margin-inline-start: auto; display: flex; gap: 20px; color: var(--ink-soft); }
.hero { min-height: 620px; display: grid; place-items: center; padding: 80px 24px; background: radial-gradient(circle at 15% 25%, #dff7f1, transparent 34%), radial-gradient(circle at 85% 15%, #e8f1ff, transparent 36%), linear-gradient(180deg,#fff,#f5f9fc); }
.hero-inner { width: min(1120px,100%); display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(2.7rem, 6vw, 5.4rem); letter-spacing: -.055em; line-height: .98; }
.hero p { font-size: 1.15rem; color: var(--ink-soft); max-width: 650px; }
.hero-panel { padding: 22px; background: rgba(255,255,255,.88); border: 1px solid white; border-radius: 30px; box-shadow: var(--shadow-md); transform: rotate(-1deg); }
.public-section { padding: 70px 24px; }
.public-section-inner { width: min(1120px,100%); margin: auto; }
.service-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }