/* Home page specific */
.architecture-visual {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 42px rgba(13, 25, 38, 0.08);
    overflow: hidden;
}
.architecture-visual svg {
    display: block;
    height: auto;
    max-width: 100%;
    width: 100%;
}
.hero-visual {
    max-width: 620px;
}
.architecture-map {
    max-width: 1120px;
    margin: 0 auto;
}
.svg-shell {
    fill: color-mix(in srgb, var(--panel-strong) 58%, transparent);
    stroke: var(--line);
}
.svg-zone {
    fill: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
    stroke: var(--line);
    stroke-width: 1.5;
}
.zone-client {
    stroke: color-mix(in srgb, var(--teal) 38%, var(--line));
}
.zone-reach {
    stroke: color-mix(in srgb, var(--blue) 40%, var(--line));
}
.zone-scope {
    stroke: color-mix(in srgb, var(--green) 40%, var(--line));
}
.zone-resource {
    stroke: color-mix(in srgb, var(--warning) 40%, var(--line));
}
.svg-kicker {
    fill: var(--teal);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.6px;
}
.svg-title {
    fill: var(--muted);
    font-family: var(--font-body);
    font-size: 18px;
}
.svg-zone-label {
    fill: var(--text);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 800;
}
.svg-node rect {
    filter: drop-shadow(0 8px 18px rgba(13, 25, 38, 0.1));
    stroke-width: 1.5;
}
.svg-node text {
    fill: #18222b;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 800;
}
.svg-mesh-core circle:first-child {
    fill: color-mix(in srgb, var(--blue) 10%, transparent);
    stroke: color-mix(in srgb, var(--blue) 48%, var(--line));
    stroke-width: 1.8;
}
.svg-mesh-core circle:nth-child(2) {
    fill: color-mix(in srgb, var(--teal) 18%, var(--panel));
    stroke: color-mix(in srgb, var(--teal) 72%, var(--line));
    stroke-dasharray: 7 6;
    stroke-width: 2.2;
}
.svg-mesh-core text {
    fill: var(--text);
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 800;
}
.svg-path-label {
    fill: var(--muted);
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.7px;
}
.svg-small {
    fill: #5f6c77;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
}
.node-agent rect {
    fill: #d1faf5;
    stroke: #26a69a;
}
.node-reach rect {
    fill: #dce8ff;
    stroke: #5878d8;
}
.node-scope rect {
    fill: #d9f7d6;
    stroke: #1d8f52;
}
.node-resource rect {
    fill: #f3eee6;
    stroke: #c98b52;
}
.svg-flow {
    fill: none;
    marker-end: url(#hero-arrow);
    stroke: color-mix(in srgb, var(--muted) 58%, transparent);
    stroke-linecap: round;
    stroke-width: 1.7;
}
.architecture-map .svg-flow {
    marker-end: url(#arch-arrow);
    stroke-width: 1.8;
}
.svg-arrow-fill {
    fill: color-mix(in srgb, var(--muted) 58%, transparent);
}
.svg-audit {
    fill: color-mix(in srgb, var(--panel-strong) 86%, transparent);
    stroke: color-mix(in srgb, var(--muted) 30%, transparent);
    stroke-dasharray: 6 5;
    stroke-width: 1.5;
}
.svg-audit-title {
    fill: var(--text);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 800;
}
.svg-audit-line {
    fill: none;
    stroke: color-mix(in srgb, var(--muted) 50%, transparent);
    stroke-dasharray: 5 6;
    stroke-linecap: round;
    stroke-width: 1.7;
}
:root[data-theme="dark"] .svg-node rect {
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.22));
}
.use-case-grid .card {
    border: 1px solid var(--line);
    transition: border-color 0.2s, transform 0.2s;
}
.use-case-grid .card:hover {
    border-color: rgba(94, 231, 216, 0.4);
}

/* Responsive */
@media (max-width: 768px) {
    .hero h1 { font-size: 2.25rem; }
    .hero .lead { font-size: 1rem; }
    .architecture-visual {
        overflow-x: auto;
    }
    .hero-visual svg {
        min-width: 520px;
    }
    .architecture-map svg {
        min-width: 900px;
    }
}