.breadcrumb {
background: var(--bg); padding: 20px 0;
border-bottom: 1px solid var(--border);
}
.breadcrumb-list {
display: flex; align-items: center; gap: 8px;
font-size: 13px; color: var(--fg-muted);
}
.breadcrumb-list a:hover { color: var(--accent); }
.breadcrumb-list .sep { color: var(--fg-tertiary); }
.breadcrumb-list .current { color: var(--fg); }
.hero-badges { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.badge {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; padding: 6px 14px;
border: 1px solid var(--border); border-radius: 980px;
background: var(--bg); color: var(--fg);
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
.badge-success { background: rgba(41,189,94,0.08); border-color: rgba(41,189,94,0.3); color: #1a8c3f; }
.badge-accent { background: rgba(0,102,204,0.06); border-color: rgba(0,102,204,0.25); color: var(--accent); }
.stats-banner { background: var(--bg); padding: 64px 0; border-bottom: 1px solid var(--border); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.stats-grid > div {
text-align: left; padding: 0 32px;
border-right: 1px solid var(--border);
}
.stats-grid > div:first-child { padding-left: 0; }
.stats-grid > div:last-child { border-right: none; }
.tabs { max-width: 920px; margin: 0 auto; }
.tabs-list-wrap { display: flex; justify-content: center; }
.tabs-list {
display: inline-flex; gap: 4px;
padding: 4px; background: var(--bg); border: 1px solid var(--border);
border-radius: 980px; margin: 0 auto 40px;
}
.tab-trigger {
padding: 9px 20px; border: none; background: transparent;
font: inherit; font-size: 14px; color: var(--fg-muted);
border-radius: 980px; transition: all 200ms;
}
.tab-trigger.active { background: var(--fg); color: var(--bg); }
.tab-trigger:hover:not(.active) { color: var(--fg); }
.tab-content { display: none; }
.tab-content.active { display: block; animation: nslvdFadeIn 200ms ease-out; }
@keyframes nslvdFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.item-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.item {
display: flex; align-items: flex-start; gap: 14px;
padding: 18px 20px;
background: var(--bg);
border: 1px solid var(--border); border-radius: 14px;
transition: border-color 200ms, transform 200ms;
}
.item:hover { border-color: var(--fg); transform: translateY(-1px); }
.item-icon {
flex-shrink: 0; width: 22px; height: 22px;
border-radius: 50%; background: rgba(41,189,94,0.12);
display: flex; align-items: center; justify-content: center;
color: var(--success); font-size: 13px; line-height: 1; margin-top: 1px;
}
.item-text { font-size: 15px; line-height: 1.45; color: var(--fg); }
.item-text strong { font-weight: 500; }
.timeline {
max-width: 880px; margin: 0 auto;
background: var(--bg);
border: 1px solid var(--border); border-radius: 18px;
overflow: hidden;
}
.timeline-row {
display: grid; grid-template-columns: 1fr 200px;
gap: 24px; align-items: center;
padding: 22px 28px;
border-bottom: 1px solid var(--border);
}
.timeline-row:last-child { border-bottom: none; }
.timeline-stage { font-size: 16px; font-weight: 500; color: var(--fg); }
.timeline-meta { font-size: 13px; color: var(--fg-muted); margin-top: 2px; }
.timeline-duration {
font-size: 18px; font-weight: 500; color: var(--fg);
font-variant-numeric: tabular-nums; text-align: right;
}
.pricing-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
max-width: 1100px; margin: 0 auto;
}
.price-card {
background: var(--bg);
border: 1px solid var(--border); border-radius: 18px;
padding: 36px 28px;
display: flex; flex-direction: column;
transition: border-color 200ms, transform 200ms;
}
.price-card:hover { border-color: var(--fg); }
.price-card.featured {
border-color: var(--fg); border-width: 2px;
box-shadow: 0 4px 24px rgba(0,0,0,0.04);
}
.price-card.featured .price-badge { display: inline-flex; }
.price-badge {
display: none;
align-self: flex-start;
font-size: 11px; padding: 4px 10px;
background: var(--fg); color: var(--bg);
border-radius: 980px; margin-bottom: 16px;
text-transform: uppercase; letter-spacing: 0.5px;
}
.price-name { font-size: 14px; color: var(--fg-muted); margin-bottom: 12px; }
.price-amount {
font-size: 40px; font-weight: 600; letter-spacing: -0.02em;
line-height: 1; margin-bottom: 8px; font-variant-numeric: tabular-nums;
}
.price-amount-sub { font-size: 15px; color: var(--fg-muted); margin-bottom: 28px; }
.price-features {
list-style: none; display: flex; flex-direction: column; gap: 10px;
margin-bottom: 28px; flex: 1; padding: 0;
}
.price-features li {
font-size: 14px; color: var(--fg);
display: flex; align-items: flex-start; gap: 10px; line-height: 1.45;
}
.price-features li::before {
content: '\2713'; color: var(--success); font-weight: 500;
flex-shrink: 0; margin-top: 1px;
}
.price-card .btn { width: 100%; }
.lawyer-large {
max-width: 720px; margin: 0 auto;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 22px;
padding: 40px;
display: grid; grid-template-columns: 96px 1fr auto; gap: 28px;
align-items: center;
}
.lawyer-large-avatar {
width: 96px; height: 96px; border-radius: 50%;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.18);
display: flex; align-items: center; justify-content: center;
font-size: 28px; font-weight: 500; color: var(--fg-on-dark);
}
.lawyer-large-name { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 6px; }
.lawyer-large-status {
font-size: 13px; color: var(--fg-muted-on-dark);
display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px;
}
.lawyer-large-status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
.lawyer-large-specs { font-size: 14px; color: var(--fg-muted-on-dark); line-height: 1.5; }
.lawyer-large-stats {
display: flex; flex-direction: column; gap: 4px; align-items: flex-end;
border-left: 1px solid rgba(255,255,255,0.15);
padding-left: 28px;
font-size: 13px; color: var(--fg-muted-on-dark);
}
.lawyer-large-stats strong {
color: var(--fg-on-dark); font-weight: 500; font-size: 28px;
letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.accordion { max-width: 880px; margin: 0 auto; }
.acc-item { border-bottom: 1px solid var(--border); }
.acc-trigger {
width: 100%; text-align: left;
padding: 24px 0;
background: transparent; border: none; font: inherit;
font-size: 19px; font-weight: 500; color: var(--fg);
letter-spacing: -0.01em;
display: flex; align-items: center; justify-content: space-between; gap: 24px;
cursor: pointer;
}
.acc-trigger:hover { color: var(--accent); }
.acc-icon {
flex-shrink: 0; width: 24px; height: 24px;
border-radius: 50%; border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
transition: transform 200ms, background 200ms, border-color 200ms;
color: var(--fg-muted); font-size: 14px; line-height: 1;
}
.acc-trigger[aria-expanded="true"] .acc-icon {
background: var(--fg); color: var(--bg); border-color: var(--fg);
transform: rotate(45deg);
}
.acc-content { max-height: 0; overflow: hidden; transition: max-height 250ms ease-out; }
.acc-content-inner {
padding: 0 0 24px 0;
font-size: 16px; color: var(--fg-muted); line-height: 1.6;
max-width: 680px;
}
.acc-content-inner p { margin-bottom: 12px; }
.acc-content-inner p:last-child { margin-bottom: 0; }
.acc-content-inner ul { padding-left: 18px; margin: 8px 0; }
.acc-content-inner li { margin-bottom: 4px; }
.acc-trigger[aria-expanded="true"] + .acc-content { max-height: 1200px; }
.form-card {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 18px;
padding: 28px;
text-align: left;
}
.form-row { display: flex; flex-direction: column; gap: 14px; }
.form-input {
height: 48px; padding: 0 18px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 12px;
color: var(--fg-on-dark);
font: inherit; font-size: 15px;
transition: border-color 200ms, background 200ms;
}
.form-input:focus {
outline: none; border-color: rgba(255,255,255,0.4);
background: rgba(255,255,255,0.1);
}
.form-input::placeholder { color: rgba(255,255,255,0.4); }
.form-textarea { min-height: 100px; padding: 14px 18px; resize: vertical; }
.form-card .btn { width: 100%; height: 48px; font-size: 15px; }
.form-note { font-size: 12px; color: var(--fg-muted-on-dark); margin-top: 14px; text-align: center; }
.or-divider {
display: flex; align-items: center; gap: 16px;
color: var(--fg-muted-on-dark); font-size: 13px; margin: 28px 0;
}
.or-divider::before, .or-divider::after {
content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.12);
}
.phone-link {
font-size: 24px; font-weight: 500; color: white;
letter-spacing: -0.01em; transition: opacity 200ms;
}
.phone-link:hover { opacity: 0.7; }
.form-card-light {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 22px;
padding: 36px;
box-shadow: 0 4px 24px rgba(0,0,0,0.04);
position: sticky; top: 80px;
}
.form-card-light h3 {
font-size: 24px; font-weight: 500;
letter-spacing: -0.015em; margin-bottom: 8px;
}
.form-card-light .form-sub { font-size: 14px; color: var(--fg-muted); margin-bottom: 24px; }
.form-card-light .form-row { display: flex; flex-direction: column; gap: 14px; }
.form-input-light {
height: 48px; padding: 0 18px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 12px;
color: var(--fg);
font: inherit; font-size: 15px;
transition: border-color 200ms;
}
.form-input-light:focus { outline: none; border-color: var(--fg); }
.form-input-light::placeholder { color: var(--fg-tertiary); }
textarea.form-input-light { min-height: 96px; padding: 14px 18px; resize: vertical; }
.form-card-light .btn { width: 100%; height: 48px; font-size: 15px; }
.form-card-light .form-note { font-size: 12px; color: var(--fg-muted); margin-top: 14px; text-align: center; }
.form-card-light .form-note a { color: var(--fg); text-decoration: underline; }
.form-or {
margin-top: 20px; padding-top: 20px;
border-top: 1px solid var(--border);
text-align: center;
}
.form-or-label { font-size: 12px; color: var(--fg-muted); margin-bottom: 6px; }
.form-or-phone {
display: block;
font-size: 18px; font-weight: 500; color: var(--fg);
letter-spacing: -0.01em;
}
.form-select {
height: 48px; padding: 0 44px 0 18px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 12px;
color: var(--fg);
font: inherit; font-size: 15px;
appearance: none; -webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2' aria-hidden="true"><polyline points='6 9 12 15 18 9'/></svg>");
background-repeat: no-repeat; background-position: right 16px center;
cursor: pointer; transition: border-color 200ms;
}
.form-select:focus { outline: none; border-color: var(--fg); }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.related-card {
padding: 28px 24px;
background: var(--bg); border: 1px solid var(--border);
border-radius: 14px;
display: flex; flex-direction: column; gap: 8px;
transition: border-color 200ms, transform 200ms;
}
.related-card:hover { border-color: var(--fg); transform: translateY(-2px); }
.related-eyebrow { font-size: 12px; color: var(--fg-muted); }
.related-title { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; }
.related-arrow {
margin-top: 12px; font-size: 14px; color: var(--accent);
opacity: 0; transition: opacity 200ms;
}
.related-card:hover .related-arrow { opacity: 1; }
.manifesto { max-width: 880px; margin: 0 auto; text-align: center; }
.manifesto-text {
font-size: 40px; font-weight: 500;
letter-spacing: -0.02em; line-height: 1.25;
color: var(--fg-on-dark);
}
.manifesto-text em { color: var(--fg-muted-on-dark); font-style: normal; }
.manifesto-sig {
margin-top: 48px; padding-top: 32px;
border-top: 1px solid rgba(255,255,255,0.15);
display: flex; justify-content: center; gap: 24px; align-items: center;
}
.manifesto-sig-avatar {
width: 48px; height: 48px; border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.14);
display: flex; align-items: center; justify-content: center;
font-weight: 500; font-size: 14px;
color: var(--fg-on-dark);
}
.manifesto-sig-text { text-align: left; font-size: 14px; color: var(--fg-muted-on-dark); }
.manifesto-sig-text strong {
color: var(--fg-on-dark); font-weight: 500;
display: block; margin-bottom: 2px; font-size: 15px;
}
.principles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.principle-card {
background: var(--bg);
border: 1px solid var(--border); border-radius: 18px;
padding: 36px 32px;
transition: border-color 200ms, transform 200ms;
}
.principle-card:hover { border-color: var(--fg); transform: translateY(-2px); }
.principle-icon {
width: 44px; height: 44px;
border-radius: 12px; background: rgba(0,102,204,0.08);
color: var(--accent);
display: flex; align-items: center; justify-content: center;
margin-bottom: 24px;
}
.principle-title {
font-size: 22px; font-weight: 500;
letter-spacing: -0.01em; line-height: 1.2;
margin-bottom: 12px;
}
.principle-text { font-size: 15px; color: var(--fg-muted); line-height: 1.55; }
.reqs {
max-width: 880px; margin: 0 auto;
background: var(--bg);
border: 1px solid var(--border); border-radius: 18px;
overflow: hidden;
}
.reqs-row {
display: grid; grid-template-columns: 240px 1fr;
gap: 24px;
padding: 22px 32px;
border-bottom: 1px solid var(--border);
align-items: baseline;
}
.reqs-row:last-child { border-bottom: none; }
.reqs-label { font-size: 13px; color: var(--fg-muted); }
.reqs-value { font-size: 16px; color: var(--fg); line-height: 1.5; }
.reqs-value strong { font-weight: 500; }
.team-preview { max-width: 920px; margin: 0 auto; text-align: center; }
.team-avatars { display: flex; justify-content: center; gap: 16px; margin-bottom: 32px; }
.team-avatar {
width: 80px; height: 80px; border-radius: 50%;
background: var(--bg-stone);
border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
font-weight: 500; font-size: 20px; color: var(--fg);
transition: transform 200ms;
}
.team-avatar:hover { transform: scale(1.05); }
.team-text {
font-size: 17px; color: var(--fg-muted); margin-bottom: 28px; line-height: 1.5;
max-width: 560px; margin-left: auto; margin-right: auto;
}
.filter-bar {
display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
margin-bottom: 56px;
}
.chip.active { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.team-grid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
max-width: 1100px; margin: 0 auto;
}
.team-card {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 22px;
padding: 36px;
display: grid; grid-template-columns: 80px 1fr; gap: 24px;
transition: border-color 200ms, transform 200ms;
}
.team-card:hover { border-color: var(--fg); transform: translateY(-2px); }
.team-card-avatar {
width: 80px; height: 80px; border-radius: 50%;
background: var(--bg-stone);
border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
font-weight: 500; font-size: 22px;
color: var(--fg);
}
.team-card-name { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 4px; }
.team-card-role {
font-size: 14px; color: var(--fg-muted); margin-bottom: 16px;
display: inline-flex; align-items: center; gap: 6px;
}
.team-card-role .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
.team-card-specs { font-size: 14px; color: var(--fg-muted); line-height: 1.5; margin-bottom: 20px; }
.team-card-stats {
display: flex; gap: 28px; padding-top: 16px;
border-top: 1px solid var(--border);
font-size: 13px; color: var(--fg-muted);
margin-bottom: 20px;
}
.team-card-stats strong {
display: block; color: var(--fg);
font-size: 18px; font-weight: 500;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em; margin-bottom: 2px;
}
.team-card-rate { font-size: 14px; color: var(--fg-muted); margin-bottom: 20px; }
.team-card-rate strong { color: var(--fg); font-weight: 500; }
.team-card-actions { display: flex; gap: 8px; }
.team-card-actions .btn { flex: 1; }
.join-card {
max-width: 720px; margin: 0 auto;
background: var(--bg-stone);
border-radius: 22px;
padding: 56px 48px;
text-align: center;
}
.join-h {
font-size: 36px; font-weight: 500;
letter-spacing: -0.02em; line-height: 1.2;
margin-bottom: 16px;
}
.join-text {
font-size: 17px; color: var(--fg-muted);
line-height: 1.5; margin-bottom: 28px;
max-width: 560px; margin-left: auto; margin-right: auto;
}
.contact-grid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
max-width: 920px; margin: 0 auto;
}
.contact-card {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 18px;
padding: 32px;
display: flex; flex-direction: column; gap: 12px;
transition: border-color 200ms, transform 200ms;
}
.contact-card:hover { border-color: var(--fg); transform: translateY(-2px); }
.contact-icon {
width: 44px; height: 44px;
border-radius: 12px; background: rgba(0,102,204,0.08);
color: var(--accent);
display: flex; align-items: center; justify-content: center;
margin-bottom: 8px;
}
.contact-label { font-size: 13px; color: var(--fg-muted); }
.contact-value {
font-size: 22px; font-weight: 500;
letter-spacing: -0.01em; line-height: 1.3;
color: var(--fg);
}
.contact-value a { color: var(--fg); transition: color 200ms; }
.contact-value a:hover { color: var(--accent); }
.contact-meta { font-size: 14px; color: var(--fg-muted); line-height: 1.5; }
.map-card {
max-width: 1100px; margin: 0 auto;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 22px;
overflow: hidden;
}
.map-iframe {
width: 100%; height: 380px;
background: var(--bg-stone);
border: none;
display: flex; align-items: center; justify-content: center;
color: var(--fg-muted); font-size: 14px;
}
.map-info {
display: grid; grid-template-columns: 1fr auto;
gap: 24px; padding: 24px 32px;
border-top: 1px solid var(--border);
align-items: center;
}
.map-info-text strong {
font-size: 16px; font-weight: 500; color: var(--fg);
display: block; margin-bottom: 4px;
}
.map-info-text span { font-size: 14px; color: var(--fg-muted); }
.hours-card {
max-width: 720px; margin: 0 auto;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 18px;
padding: 32px 36px;
}
.hours-row {
display: grid; grid-template-columns: 200px 1fr;
gap: 24px; padding: 14px 0;
border-bottom: 1px solid var(--border);
font-size: 15px;
}
.hours-row:last-child { border-bottom: none; }
.hours-day { color: var(--fg-muted); }
.hours-time { color: var(--fg); font-variant-numeric: tabular-nums; }
.hours-time.closed { color: var(--fg-muted); }
.hero-conv { background: var(--bg); padding: 64px 0 96px; }
.hero-conv-grid {
display: grid; grid-template-columns: 1fr 480px;
gap: 64px; align-items: start;
}
.hero-conv-left { padding-top: 24px; }
.hero-conv-eyebrow { font-size: 14px; color: var(--accent); margin-bottom: 16px; }
.hero-conv h1 {
font-size: 64px; font-weight: 600;
line-height: 1.05; letter-spacing: -0.03em;
margin-bottom: 20px;
}
.hero-conv-sub {
font-size: 19px; color: var(--fg-muted);
line-height: 1.5; margin-bottom: 28px;
}
.hero-conv-bullets {
list-style: none; display: flex; flex-direction: column; gap: 12px;
margin-bottom: 28px; padding: 0;
}
.hero-conv-bullets li {
display: flex; align-items: flex-start; gap: 12px;
font-size: 16px; color: var(--fg); line-height: 1.45;
}
.hero-conv-bullets li::before {
content: ''; flex-shrink: 0; width: 22px; height: 22px;
border-radius: 50%; background: rgba(41,189,94,0.12);
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2329bd5e' stroke-width='3' aria-hidden="true"><polyline points='20 6 9 17 4 12'/></svg>");
background-repeat: no-repeat; background-position: center;
margin-top: 1px;
}
.hero-conv-bullets li strong { font-weight: 500; }
.hero-conv-trust {
display: flex; gap: 24px; flex-wrap: wrap;
padding-top: 24px;
border-top: 1px solid var(--border);
font-size: 13px; color: var(--fg-muted);
}
.hero-conv-trust strong {
display: block; color: var(--fg);
font-size: 18px; font-weight: 500;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em; margin-bottom: 2px;
}
.process-timeline {
max-width: 920px; margin: 0 auto;
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 24px; position: relative;
}
.process-timeline::before {
content: ''; position: absolute;
top: 24px; left: 5%; right: 5%;
height: 1px; background: var(--border);
z-index: 0;
}
.process-step { position: relative; z-index: 1; text-align: center; }
.process-step-num {
width: 48px; height: 48px;
border-radius: 50%;
background: var(--fg); color: var(--bg);
display: flex; align-items: center; justify-content: center;
font-size: 16px; font-weight: 500;
margin: 0 auto 20px;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.process-step-title { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 6px; }
.process-step-text { font-size: 14px; color: var(--fg-muted); line-height: 1.5; }
.process-step-time {
margin-top: 8px; display: inline-block;
font-size: 12px; color: var(--accent);
padding: 3px 10px;
background: rgba(0,102,204,0.06);
border-radius: 980px;
}
.guarantees-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
max-width: 1100px; margin: 0 auto;
}
.guarantee-card {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 18px;
padding: 32px 28px;
}
.guarantee-icon {
width: 40px; height: 40px;
border-radius: 12px;
background: rgba(0,102,204,0.08);
color: var(--accent);
display: flex; align-items: center; justify-content: center;
margin-bottom: 20px;
}
.guarantee-title { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 8px; }
.guarantee-text { font-size: 14px; color: var(--fg-muted); line-height: 1.5; }
.tile-light + .tile, .tile-stone + .tile {  }
@media (max-width: 880px) {
.stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 0; }
.stats-grid > div { padding: 0 16px; border-right: none; }
.stats-grid > div:nth-child(odd) { border-right: 1px solid var(--border); }
.item-list { grid-template-columns: 1fr; }
.pricing-grid { grid-template-columns: 1fr; }
.lawyer-large { grid-template-columns: 1fr; text-align: center; padding: 28px 24px; }
.lawyer-large-avatar { margin: 0 auto; }
.lawyer-large-stats { border-left: none; border-top: 1px solid rgba(255,255,255,0.15); padding-left: 0; padding-top: 16px; align-items: center; }
.related-grid { grid-template-columns: 1fr; }
.timeline-row { grid-template-columns: 1fr; gap: 6px; }
.timeline-duration { text-align: left; }
.principles-grid { grid-template-columns: 1fr; }
.reqs-row { grid-template-columns: 1fr; gap: 4px; padding: 18px 20px; }
.team-grid { grid-template-columns: 1fr; }
.team-card { grid-template-columns: 1fr; padding: 28px 24px; }
.team-card-avatar { margin: 0 auto; }
.team-card-actions { flex-direction: column; }
.join-card { padding: 36px 24px; }
.join-h { font-size: 26px; }
.contact-grid { grid-template-columns: 1fr; }
.map-info { grid-template-columns: 1fr; }
.hours-row { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }
.hours-card { padding: 24px 20px; }
.hero-conv-grid { grid-template-columns: 1fr; gap: 40px; }
.form-card-light { position: static; padding: 28px 24px; }
.hero-conv h1 { font-size: 40px; }
.process-timeline { grid-template-columns: 1fr; }
.process-timeline::before { display: none; }
.guarantees-grid { grid-template-columns: 1fr; }
.manifesto-text { font-size: 26px; }
}
.on-dark .form-card input,
.on-dark .form-card textarea,
.on-dark .form-card select,
.on-dark form.nslvd-zayavka input,
.on-dark form.nslvd-zayavka textarea,
.on-dark form.nslvd-zayavka select {
background: rgba(255,255,255,0.06) !important;
border: 1px solid rgba(255,255,255,0.18) !important;
color: #f5f5f7 !important;
border-radius: 12px !important;
height: 48px;
padding: 0 18px;
font: inherit !important;
font-size: 15px !important;
box-shadow: none !important;
}
.on-dark .form-card textarea,
.on-dark form.nslvd-zayavka textarea {
min-height: 100px;
padding: 14px 18px !important;
height: auto;
resize: vertical;
}
.on-dark .form-card input::placeholder,
.on-dark .form-card textarea::placeholder,
.on-dark form.nslvd-zayavka input::placeholder,
.on-dark form.nslvd-zayavka textarea::placeholder {
color: rgba(255,255,255,0.4) !important;
opacity: 1;
}
.on-dark .form-card input:focus,
.on-dark .form-card textarea:focus,
.on-dark .form-card select:focus,
.on-dark form.nslvd-zayavka input:focus,
.on-dark form.nslvd-zayavka textarea:focus,
.on-dark form.nslvd-zayavka select:focus {
outline: none !important;
border-color: rgba(255,255,255,0.4) !important;
background: rgba(255,255,255,0.1) !important;
}
.form-card-light input,
.form-card-light textarea,
.form-card-light select,
form.nslvd-zayavka.form-card-light input,
form.nslvd-zayavka.form-card-light textarea,
form.nslvd-zayavka.form-card-light select {
background: #fff !important;
border: 1px solid var(--border) !important;
color: var(--fg) !important;
border-radius: 12px !important;
height: 48px;
padding: 0 18px;
font: inherit !important;
font-size: 15px !important;
box-shadow: none !important;
}
.form-card-light textarea {
min-height: 96px;
padding: 14px 18px !important;
height: auto;
resize: vertical;
}
.form-card-light input::placeholder,
.form-card-light textarea::placeholder {
color: var(--fg-tertiary) !important;
opacity: 1;
}
.form-card-light input:focus,
.form-card-light textarea:focus,
.form-card-light select:focus {
outline: none !important;
border-color: var(--fg) !important;
background: #fff !important;
}
.on-dark form.nslvd-zayavka button.btn-primary {
background: #fff !important;
color: var(--fg) !important;
height: 48px !important;
}
.on-dark form.nslvd-zayavka button.btn-primary:hover {
background: rgba(255,255,255,0.85) !important;
}
.entry-content > p:empty { display: none !important; }
.entry-content { font-size: inherit; line-height: inherit; }
.entry-content > * { max-width: 100% !important; }
.content-prose {
max-width: 760px;
margin: 0 auto;
font-size: 17px;
line-height: 1.65;
color: var(--fg);
}
.content-prose > h1 { display: none; }
.content-prose h2 {
font-size: 32px !important; font-weight: 500 !important;
letter-spacing: -0.02em; line-height: 1.2;
margin-top: 1.5em; margin-bottom: 0.5em;
color: var(--fg);
}
.content-prose h3 {
font-size: 21px !important; font-weight: 500 !important;
letter-spacing: -0.01em; line-height: 1.3;
margin-top: 1.4em; margin-bottom: 0.3em;
color: var(--fg);
}
.content-prose p {
font-size: 17px; line-height: 1.65;
color: var(--fg-muted); margin: 0 0 1em 0;
}
.content-prose p:first-of-type { margin-top: 0; }
.content-prose strong { color: var(--fg); font-weight: 500; }
.content-prose ul, .content-prose ol {
padding-left: 1.4em; margin: 0 0 1em 0;
}
.content-prose li {
font-size: 17px; line-height: 1.55;
color: var(--fg-muted); margin-bottom: 0.4em;
}
.content-prose li strong { color: var(--fg); }
.content-prose a {
color: var(--accent) !important;
text-decoration: underline; text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.content-prose a:hover { text-decoration: none; }
.content-prose table {
width: 100%; border-collapse: collapse;
margin: 1.5em 0; font-size: 15px;
border: 1px solid var(--border);
border-radius: 12px; overflow: hidden;
background: var(--bg);
}
.content-prose th, .content-prose td {
padding: 14px 18px; text-align: left;
border-bottom: 1px solid var(--border);
vertical-align: top;
}
.content-prose th {
font-weight: 500; font-size: 13px;
color: var(--fg-muted);
background: var(--bg-stone);
text-transform: uppercase; letter-spacing: 0.3px;
}
.content-prose tr:last-child td { border-bottom: none; }
.content-prose hr {
border: 0; height: 1px;
background: var(--border); margin: 2.5em 0;
}
.content-prose blockquote {
border-left: 3px solid var(--fg); padding-left: 20px;
margin: 1.5em 0; font-style: italic; color: var(--fg-muted);
}
.map-iframe iframe {
width: 100%; height: 380px; border: none; display: block;
}
.map-card .map-iframe {
padding: 0 !important; height: 380px !important;
display: block !important;
}
:root {
--success-bg: rgba(41,189,94,0.08);
--amber-bg: rgba(245,166,35,0.10);
--danger: #d92d20;
--danger-bg: rgba(217,45,32,0.08);
--info-bg: rgba(0,102,204,0.06);
}
.badge-warn { background: var(--amber-bg); border-color: rgba(245,166,35,0.35); color: #a85d00; }
.badge-danger { background: var(--danger-bg); border-color: rgba(217,45,32,0.25); color: #b42318; }
.urgent-band { background: linear-gradient(90deg, #2b1410 0%, #3d1f18 100%); color: white; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.urgent-band-inner { display: flex; align-items: center; gap: 16px; max-width: 1200px; margin: 0 auto; padding: 0 24px; font-size: 14px; }
.urgent-band-icon { width: 24px; height: 24px; border-radius: 50%; background: var(--danger); color: white; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 600; }
.urgent-band-text { flex: 1; line-height: 1.4; }
.urgent-band-text strong { color: white; font-weight: 500; }
.urgent-band-text em { font-style: normal; opacity: 0.7; }
.money-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1100px; margin: 0 auto; }
.money-card { background: var(--bg); border: 1px solid var(--border); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 12px; transition: border-color 200ms, transform 200ms; }
.money-card:hover { border-color: var(--fg); transform: translateY(-2px); }
.money-card-eyebrow { font-size: 12px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; }
.money-card-amount { font-size: 40px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; color: var(--fg); font-variant-numeric: tabular-nums; }
.money-card-amount-sub { font-size: 14px; color: var(--fg-muted); margin-top: -6px; }
.money-card-title { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.money-card-desc { font-size: 14px; color: var(--fg-muted); line-height: 1.5; flex: 1; }
.money-card-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 10px; border-radius: 980px; align-self: flex-start; margin-top: 4px; }
.money-card-status.auto { background: var(--success-bg); color: #1a8c3f; }
.money-card-status.apply { background: var(--info-bg); color: var(--accent); }
.money-card-status.special { background: var(--amber-bg); color: #a85d00; }
.money-card-status .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.callout-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1100px; margin: 0 auto; }
.callout { padding: 24px; border-radius: 16px; border: 1px solid var(--border); background: var(--bg); }
.callout-warn { border-color: rgba(245,166,35,0.3); background: var(--amber-bg); }
.callout-warn .callout-icon { color: #a85d00; }
.callout-info { border-color: rgba(0,102,204,0.25); background: var(--info-bg); }
.callout-info .callout-icon { color: var(--accent); }
.callout-success { border-color: rgba(41,189,94,0.3); background: var(--success-bg); }
.callout-success .callout-icon { color: #1a8c3f; }
.callout-danger { border-color: rgba(217,45,32,0.25); background: var(--danger-bg); }
.callout-danger .callout-icon { color: #b42318; }
.callout-icon { width: 36px; height: 36px; margin-bottom: 12px; }
.callout-title { font-size: 16px; font-weight: 500; margin-bottom: 8px; letter-spacing: -0.005em; }
.callout-text { font-size: 14px; color: var(--fg-muted); line-height: 1.5; }
.callout-text strong { color: var(--fg); font-weight: 500; }
.fact-stat { background: var(--bg-stone); border: 1px solid var(--border); border-radius: 20px; padding: 40px 32px; text-align: center; max-width: 720px; margin: 32px auto; }
.fact-stat-value { font-size: 72px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--fg); display: block; margin-bottom: 12px; }
.fact-stat-label { font-size: 17px; color: var(--fg-muted); line-height: 1.4; max-width: 480px; margin: 0 auto; }
.process-map { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; max-width: 1100px; margin: 0 auto; position: relative; }
.process-step { text-align: center; padding: 0 12px; position: relative; }
.process-step:not(:last-child)::after { content: ''; position: absolute; top: 28px; right: -50%; width: 100%; height: 1px; background: var(--border); z-index: 0; }
.process-step-icon { width: 56px; height: 56px; border-radius: 16px; background: var(--bg); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; position: relative; z-index: 1; color: var(--fg); }
.process-step.active .process-step-icon { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.process-step-num { font-size: 12px; color: var(--fg-muted); font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.process-step-title { font-size: 15px; font-weight: 500; letter-spacing: -0.005em; margin-bottom: 4px; }
.process-step-desc { font-size: 13px; color: var(--fg-muted); line-height: 1.45; }
.stage-timeline { max-width: 720px; margin: 0 auto; padding-left: 32px; border-left: 1px solid var(--border); position: relative; }
.stage-item { position: relative; padding: 0 0 32px 0; }
.stage-item:last-child { padding-bottom: 0; }
.stage-item::before { content: ''; position: absolute; top: 4px; left: -41px; width: 18px; height: 18px; border-radius: 50%; background: var(--bg); border: 2px solid var(--border); }
.stage-item.warn::before { border-color: var(--amber); background: var(--amber-bg); }
.stage-item.active::before { border-color: var(--accent); background: var(--accent); }
.stage-deadline { display: inline-block; font-size: 12px; color: var(--fg-muted); background: var(--bg-stone); padding: 3px 10px; border-radius: 980px; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.stage-deadline.urgent { background: var(--danger-bg); color: #b42318; }
.stage-title { font-size: 19px; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 8px; }
.stage-desc { font-size: 15px; color: var(--fg-muted); line-height: 1.5; }
.diag-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 1100px; margin: 0 auto; }
.diag-card { background: var(--bg); border: 1px solid var(--border); border-radius: 16px; padding: 22px 18px; display: flex; flex-direction: column; gap: 8px; transition: border-color 200ms; }
.diag-card:hover { border-color: var(--fg); }
.diag-card-icon { width: 28px; height: 28px; color: var(--fg-muted); }
.diag-card-title { font-size: 15px; font-weight: 500; letter-spacing: -0.005em; }
.diag-card-text { font-size: 13px; color: var(--fg-muted); line-height: 1.45; }
.punishment-scale { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; max-width: 1000px; margin: 0 auto 24px; border-radius: 16px; overflow: hidden; }
.punishment-step { padding: 24px 20px; background: var(--bg); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; position: relative; }
.punishment-step[data-level="1"] { background: rgba(254,243,199,0.4); border-color: rgba(245,166,35,0.2); }
.punishment-step[data-level="2"] { background: rgba(254,215,170,0.4); border-color: rgba(245,166,35,0.35); }
.punishment-step[data-level="3"] { background: rgba(254,202,202,0.4); border-color: rgba(217,45,32,0.25); }
.punishment-step[data-level="4"] { background: rgba(252,165,165,0.45); border-color: rgba(217,45,32,0.4); }
.punishment-step-level { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-muted); }
.punishment-step-name { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.punishment-step-penalty { font-size: 14px; color: var(--fg); line-height: 1.5; font-weight: 400; }
.punishment-step-article { font-size: 12px; color: var(--fg-muted); margin-top: auto; }
.compare-table { width: 100%; border-collapse: collapse; font-size: 15px; max-width: 1000px; margin: 0 auto; }
.compare-table thead th { text-align: left; padding: 14px 18px; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-muted); border-bottom: 1px solid var(--border); }
.compare-table tbody td { padding: 18px; border-bottom: 1px solid var(--border); vertical-align: top; color: var(--fg-muted); line-height: 1.5; }
.compare-table tbody td:first-child { color: var(--fg); font-weight: 500; width: 36%; }
.compare-table tbody tr:hover td { background: var(--bg-stone); }
.pricing-table { max-width: 880px; margin: 0 auto; background: var(--bg); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; }
.pricing-row { display: grid; grid-template-columns: 1.4fr 1fr; padding: 22px 28px; border-bottom: 1px solid var(--border); align-items: center; }
.pricing-row:last-child { border-bottom: none; }
.pricing-row:hover { background: var(--bg-stone); }
.pricing-row-title { font-size: 16px; font-weight: 500; letter-spacing: -0.005em; }
.pricing-row-sub { font-size: 13px; color: var(--fg-muted); margin-top: 4px; }
.pricing-row-price { font-size: 18px; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.pricing-row-price-sub { font-size: 12px; color: var(--fg-muted); margin-top: 2px; font-weight: 400; }
.pricing-note { text-align: center; margin-top: 24px; font-size: 14px; color: var(--fg-muted); }
.pricing-note strong { color: var(--fg); font-weight: 500; }
.calc-card { background: var(--bg-stone); border: 1px solid var(--border); border-radius: 24px; padding: 36px; max-width: 720px; margin: 0 auto; }
.calc-title { font-size: 22px; font-weight: 500; letter-spacing: -0.015em; margin-bottom: 8px; }
.calc-sub { font-size: 15px; color: var(--fg-muted); margin-bottom: 28px; line-height: 1.4; }
.calc-row { display: grid; grid-template-columns: 1fr auto; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--border); align-items: center; }
.calc-row:last-child { border-bottom: none; }
.calc-row-label { font-size: 15px; font-weight: 400; color: var(--fg); }
.calc-row-label small { display: block; color: var(--fg-muted); font-size: 12px; margin-top: 2px; }
.calc-control { display: flex; align-items: center; gap: 8px; }
.calc-stepper { display: flex; align-items: center; background: var(--bg); border: 1px solid var(--border); border-radius: 980px; overflow: hidden; }
.calc-stepper button { width: 36px; height: 36px; background: transparent; border: none; font-size: 18px; color: var(--fg); transition: background 150ms; }
.calc-stepper button:hover { background: var(--bg-stone); }
.calc-stepper-value { min-width: 36px; text-align: center; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.calc-select { height: 36px; padding: 0 36px 0 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 980px; font: inherit; font-size: 14px; appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2' aria-hidden="true"><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; }
.calc-result { margin-top: 28px; padding: 24px; background: var(--bg); border-radius: 16px; border: 1px solid var(--border); text-align: center; }
.calc-result-label { font-size: 13px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.calc-result-value { font-size: 44px; font-weight: 600; letter-spacing: -0.025em; line-height: 1; font-variant-numeric: tabular-nums; margin-bottom: 8px; }
.calc-result-sub { font-size: 13px; color: var(--fg-muted); line-height: 1.4; }
.checklist { max-width: 720px; margin: 0 auto; }
.checklist-item { display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--border); cursor: pointer; transition: opacity 200ms; }
.checklist-item:last-child { border-bottom: none; }
.checklist-box { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--border); background: var(--bg); flex-shrink: 0; margin-top: 1px; display: flex; align-items: center; justify-content: center; transition: background 150ms, border-color 150ms; }
.checklist-item.checked .checklist-box { background: var(--accent); border-color: var(--accent); }
.checklist-item.checked .checklist-box svg { opacity: 1; }
.checklist-box svg { width: 14px; height: 14px; color: white; opacity: 0; transition: opacity 150ms; }
.checklist-text { font-size: 15px; line-height: 1.5; color: var(--fg); flex: 1; }
.checklist-item.checked .checklist-text { text-decoration: line-through; color: var(--fg-muted); }
.checklist-result { margin-top: 20px; padding: 18px 24px; background: var(--success-bg); border: 1px solid rgba(41,189,94,0.3); border-radius: 12px; font-size: 14px; color: #1a8c3f; line-height: 1.5; text-align: center; transition: opacity 200ms; max-width: 720px; margin-left: auto; margin-right: auto; }
.emergency-block { background: linear-gradient(180deg, #1a1a1a 0%, #000 100%); color: white; padding: 56px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.emergency-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: #ff6052; font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 16px; }
.emergency-eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #ff6052; box-shadow: 0 0 12px #ff6052; animation: nslvd-pulse 1.4s ease-in-out infinite; }
@keyframes nslvd-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.85); } }
.emergency-h2 { font-size: 40px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; margin-bottom: 32px; max-width: 720px; color: white; }
.emergency-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 1100px; }
.emergency-step { display: flex; gap: 16px; padding: 20px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; }
.emergency-step-num { width: 32px; height: 32px; border-radius: 50%; background: white; color: black; display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 14px; flex-shrink: 0; }
.emergency-step-title { font-size: 16px; font-weight: 500; color: white; margin-bottom: 6px; }
.emergency-step-text { font-size: 14px; color: rgba(255,255,255,0.65); line-height: 1.5; }
.emergency-step-text a { color: #2997ff; }
.emergency-actions { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.comp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1100px; margin: 0 auto; }
.comp-card { background: var(--bg); border: 1px solid var(--border); border-radius: 20px; padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.comp-card-eyebrow { font-size: 12px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.comp-card-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--bg-stone); display: flex; align-items: center; justify-content: center; color: var(--fg); }
.comp-card-title { font-size: 22px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; }
.comp-card-amount { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--accent); }
.comp-card-amount-sub { font-size: 13px; color: var(--fg-muted); }
.comp-card-list { list-style: none; padding: 0; margin: 0; }
.comp-card-list li { font-size: 14px; color: var(--fg-muted); line-height: 1.5; padding: 6px 0; padding-left: 22px; position: relative; }
.comp-card-list li::before { content: '›'; position: absolute; left: 0; color: var(--fg-tertiary); }
.donut-display { display: grid; grid-template-columns: auto 1fr; gap: 48px; max-width: 880px; margin: 0 auto; align-items: center; }
.donut-svg { width: 240px; height: 240px; transform: rotate(-90deg); }
.donut-legend { list-style: none; }
.donut-legend li { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 16px; }
.donut-legend li:last-child { border-bottom: none; }
.donut-legend-dot { width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0; }
.donut-legend-label { flex: 1; color: var(--fg); }
.donut-legend-value { font-weight: 600; font-size: 18px; font-variant-numeric: tabular-nums; color: var(--fg); }
.tabs-list { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 32px; max-width: 880px; margin-left: auto; margin-right: auto; }
.tab-trigger { background: transparent; border: none; padding: 14px 20px; font: inherit; font-size: 15px; font-weight: 400; color: var(--fg-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 200ms, border-color 200ms; cursor: pointer; }
.tab-trigger:hover { color: var(--fg); }
.tab-trigger[aria-selected="true"] { color: var(--fg); font-weight: 500; border-bottom-color: var(--fg); }
.tab-content { display: none; max-width: 880px; margin: 0 auto; }
.tab-content[data-active="true"] { display: block; }
@media (max-width: 880px) {
.money-grid { grid-template-columns: 1fr; }
.comp-cards { grid-template-columns: 1fr; }
.callout-grid { grid-template-columns: 1fr; }
.process-map { grid-template-columns: 1fr; gap: 16px; }
.process-step:not(:last-child)::after { display: none; }
.diag-grid { grid-template-columns: repeat(2, 1fr); }
.punishment-scale { grid-template-columns: 1fr; gap: 0; }
.donut-display { grid-template-columns: 1fr; gap: 24px; }
.donut-svg { margin: 0 auto; }
.emergency-steps { grid-template-columns: 1fr; }
.emergency-h2 { font-size: 28px; }
.pricing-row { grid-template-columns: 1fr; gap: 8px; }
.pricing-row-price { text-align: left; }
.fact-stat-value { font-size: 52px; }
}
.dir-grid-v2 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 16px;
overflow: hidden;
margin-top: 8px;
}
@media (max-width: 1024px) { .dir-grid-v2 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .dir-grid-v2 { grid-template-columns: 1fr; } }
.dir-card-v2 {
display: flex; flex-direction: column;
padding: 28px 24px; min-height: 220px;
background: #0a0a0a; color: #f5f5f7 !important;
text-decoration: none !important;
position: relative;
transition: background 200ms;
}
.dir-card-v2:hover { background: #131313; }
.dir-card-v2:hover .dir-card-v2-arrow { transform: translate(3px, -3px); color: #60a5fa; }
.dir-card-v2-icon { margin-bottom: 16px; color: rgba(255,255,255,0.55); }
.dir-card-v2-icon svg { width: 28px; height: 28px; }
.dir-card-v2-title {
font-size: 17px; font-weight: 500;
margin-bottom: 14px; letter-spacing: -0.01em;
color: #f5f5f7;
}
.dir-card-v2-list {
flex: 1; font-size: 13px; line-height: 1.7;
color: rgba(255,255,255,0.55); margin-bottom: 14px;
}
.dir-card-v2-list-item {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dir-card-v2-meta {
font-size: 12px; color: rgba(255,255,255,0.4); letter-spacing: 0.02em;
}
.dir-card-v2-arrow {
position: absolute; top: 24px; right: 20px;
color: rgba(255,255,255,0.25);
transition: transform 200ms, color 200ms;
}
.dir-card-v2-trending {
position: absolute; top: 18px; right: 18px;
display: inline-flex; align-items: center; gap: 7px;
padding: 5px 10px 5px 11px;
background: rgba(41, 151, 255, 0.12);
border: 1px solid rgba(41, 151, 255, 0.32);
border-radius: 999px;
font-size: 11px; font-weight: 500;
color: #60a5fa; letter-spacing: 0.02em;
}
.dir-card-v2-trending::before {
content: ''; width: 7px; height: 7px;
background: #60a5fa; border-radius: 50%;
box-shadow: 0 0 0 0 rgba(96, 165, 250, 0.7);
animation: dirTrendPulse 1.6s ease-in-out infinite;
}
.dir-card-v2.is-trending .dir-card-v2-arrow { display: none; }
@keyframes dirTrendPulse {
0%   { box-shadow: 0 0 0 0   rgba(96,165,250, 0.6); }
70%  { box-shadow: 0 0 0 8px rgba(96,165,250, 0); }
100% { box-shadow: 0 0 0 0   rgba(96,165,250, 0); }
}