/* =============================================
  EGONEX - Emergency System Page
  Layout aligned to visual mockup.
  ============================================= */

.emergency-hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding-top: calc(var(--spacing-3xl) + var(--spacing-xl));
}

.emergency-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 50% at 30% 20%, color-mix(in oklab, var(--color-blue) 24%, transparent) 0%, transparent 70%),
        radial-gradient(ellipse 50% 60% at 70% 80%, color-mix(in oklab, var(--bg-dark-mid) 65%, transparent) 0%, transparent 60%),
        radial-gradient(circle at 80% 20%, color-mix(in oklab, var(--color-orange) 8%, transparent) 0%, transparent 40%);
    pointer-events: none;
}

.emergency-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(color-mix(in oklab, var(--text-on-dark) 3%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in oklab, var(--text-on-dark) 3%, transparent) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
}

.emergency-hero__content {
    position: relative;
    z-index: 1;
    max-width: 880px;
    margin-inline: auto;
}

.emergency-hero__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.48rem;
    margin-bottom: var(--spacing-md);
    padding: calc(var(--spacing-xs) - 2px) var(--spacing-md);
    border-radius: var(--radius-full);
    border: 1px solid color-mix(in oklab, var(--color-orange) 62%, transparent);
    background: linear-gradient(
        135deg,
        color-mix(in oklab, var(--color-orange) 22%, transparent) 0%,
        color-mix(in oklab, var(--color-blue) 28%, transparent) 100%
    );
    box-shadow:
        0 8px 24px color-mix(in oklab, var(--bg-dark) 40%, transparent),
        inset 0 0 0 1px color-mix(in oklab, var(--text-on-dark) 10%, transparent);
    color: color-mix(in oklab, var(--color-orange) 92%, var(--text-on-dark) 8%);
    font-size: clamp(0.66rem, 1.4vw, 0.74rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    text-align: center;
    text-wrap: balance;
    backdrop-filter: blur(6px);
}

.emergency-hero__badge::before {
    content: "";
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 50%;
    background: var(--color-orange);
    box-shadow:
        0 0 0 4px color-mix(in oklab, var(--color-orange) 20%, transparent),
        0 0 12px color-mix(in oklab, var(--color-orange) 45%, transparent);
    flex-shrink: 0;
}

.emergency-hero__title {
    color: var(--text-on-dark);
    font-size: clamp(var(--font-size-4xl), 6vw, 3.25rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.emergency-hero__headline {
    margin-top: var(--spacing-sm);
    color: color-mix(in oklab, var(--text-on-dark) 78%, transparent);
    font-size: clamp(var(--font-size-lg), 3.5vw, var(--font-size-2xl));
    font-weight: 500;
    line-height: 1.45;
}

.emergency-hero__accent {
    color: var(--color-orange);
    font-weight: 700;
}

.emergency-hero__description {
    max-width: 680px;
    margin: var(--spacing-md) auto 0;
    color: var(--text-on-dark-faint);
    font-size: var(--font-size-base);
}

.emergency-hero__actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
}

@media (prefers-reduced-motion: no-preference) {
    .emergency-hero__badge,
    .emergency-hero__title,
    .emergency-hero__headline,
    .emergency-hero__description,
    .emergency-hero__actions {
        opacity: 0;
        transform: translateY(var(--spacing-md));
        animation: emergency-hero-fade-up 620ms ease forwards;
    }

    .emergency-hero__badge {
        animation-delay: 40ms;
    }

    .emergency-hero__title {
        animation-delay: 110ms;
    }

    .emergency-hero__headline {
        animation-delay: 170ms;
    }

    .emergency-hero__description {
        animation-delay: 230ms;
    }

    .emergency-hero__actions {
        animation-delay: 290ms;
    }

    .has-js body[data-page="emergency-system"] main > .section:not(.emergency-hero) {
        opacity: 0;
        transform: translateY(var(--spacing-md));
        transition:
            opacity 560ms ease,
            transform 560ms ease;
        transition-delay: var(--section-reveal-delay, 0ms);
        will-change: opacity, transform;
    }

    .has-js body[data-page="emergency-system"] main > .section:not(.emergency-hero).is-revealed {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes emergency-hero-fade-up {
    from {
        opacity: 0;
        transform: translateY(var(--spacing-md));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.emergency-problem-grid {
    display: grid;
    gap: var(--spacing-md);
}

.emergency-problem-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--spacing-md);
    align-items: start;
}

.emergency-problem-item__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-red);
    background: color-mix(in oklab, var(--color-red) 12%, var(--bg-white));
}

.emergency-problem-item__icon svg {
    width: 20px;
    height: 20px;
    display: block;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.emergency-problem-item__title {
    color: var(--text-primary);
    font-size: var(--font-size-base);
    font-weight: 700;
}

.emergency-problem-item__text {
    margin-top: var(--spacing-xs);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.65;
}

.emergency-problem-grid .emergency-problem-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: var(--spacing-lg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    background: var(--bg-gray);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.emergency-problem-grid .emergency-problem-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.emergency-problem-grid .emergency-problem-item__icon {
    width: 56px;
    height: 56px;
    margin-bottom: var(--spacing-xs);
    border-radius: var(--radius-md);
    color: var(--color-red);
    background: color-mix(in oklab, var(--color-red) 14%, var(--bg-gray));
}

.emergency-problem-grid .emergency-problem-item__icon svg {
    width: 24px;
    height: 24px;
}

.emergency-problem-item__icon--fragile line,
.emergency-problem-item__icon--alterable .icon-cross {
    stroke: color-mix(in oklab, var(--color-red) 95%, #7f1d1d);
}

.emergency-problem-item__icon--alterable .icon-cross {
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.emergency-problem-grid .emergency-problem-item__title {
    font-size: var(--font-size-lg);
}

.emergency-problem-item__subtitle {
    margin-top: var(--spacing-xs);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    line-height: 1.5;
}

.emergency-problem-grid .emergency-problem-item__text {
    margin-top: var(--spacing-sm);
    width: 100%;
    text-align: left;
}

.emergency-pillars-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
}

.emergency-pillar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: var(--spacing-lg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    background: var(--bg-white);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.emergency-pillar:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.emergency-pillar__head {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    min-height: 48px;
}

.emergency-pillar__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-green);
    background: color-mix(in oklab, var(--color-green) 12%, var(--bg-white));
}

.emergency-pillar__icon svg {
    width: 22px;
    height: 22px;
    display: block;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.emergency-pillar__title {
    margin: 0;
    color: var(--text-primary);
    font-size: calc(var(--font-size-lg) + 2px);
    font-weight: 700;
    text-align: left;
    line-height: 1.25;
}

.emergency-pillar__accent {
    margin-top: var(--spacing-xs);
    width: 100%;
    color: var(--color-orange);
    font-size: clamp(calc(var(--font-size-xl) - 1px), 2.8vw, calc(var(--font-size-2xl) - 1px));
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.15;
    text-align: center;
}

.emergency-pillar__subtitle {
    margin-top: calc(var(--spacing-xs) + 4px);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
}

.emergency-pillar__text {
    margin-top: var(--spacing-sm);
    width: 100%;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.65;
    text-align: left;
}

.emergency-numbers {
    position: relative;
    overflow: hidden;
}

.emergency-numbers::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%, color-mix(in oklab, var(--color-blue) 10%, transparent) 0%, transparent 60%);
    pointer-events: none;
}

.emergency-numbers__inner {
    position: relative;
    z-index: 1;
}

.emergency-numbers .section__header {
    text-align: center;
}

.emergency-numbers .section__label {
    color: color-mix(in oklab, var(--text-on-dark) 45%, transparent);
}

.emergency-numbers .section__title {
    color: var(--text-on-dark);
}

.emergency-numbers__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: var(--spacing-xl);
    padding: var(--spacing-lg) var(--spacing-sm);
    border: 1px solid var(--border-on-dark);
    border-radius: var(--radius-lg);
    background: color-mix(in oklab, var(--bg-dark-mid) 70%, transparent);
}

.emergency-numbers__item {
    position: relative;
    text-align: center;
    padding: var(--spacing-sm) var(--spacing-md);
}

.emergency-numbers .emergency-numbers__value {
    color: var(--color-orange);
    font-size: clamp(var(--font-size-3xl), 4vw, 2.375rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.emergency-numbers__item-label {
    margin-top: 2px;
    color: color-mix(in oklab, var(--text-on-dark) 40%, transparent);
    font-size: 0.688rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.emergency-numbers__note {
    margin-top: var(--spacing-md);
    text-align: center;
    color: color-mix(in oklab, var(--text-on-dark) 25%, transparent);
    font-size: var(--font-size-xs);
    font-style: italic;
}

.emergency-usecases__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
}

.emergency-usecase-card {
    padding: var(--spacing-lg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    background: var(--bg-gray);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.emergency-usecase-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.emergency-usecase-card__icon {
    width: 44px;
    height: 44px;
    margin-bottom: var(--spacing-sm);
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-blue);
    background: var(--color-blue-light);
}

.emergency-usecase-card__icon svg {
    width: 20px;
    height: 20px;
    display: block;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.emergency-usecase-card__title {
    color: var(--text-primary);
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
}

.emergency-usecase-card__text {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.65;
}

.emergency-flow {
    padding-block: clamp(var(--spacing-xs), 1.6vw, var(--spacing-md));
}

.emergency-flow > .container {
    padding-inline: var(--spacing-md);
}

.emergency-flow .section__header {
    margin-bottom: 0;
}

.emergency-flow .section__label {
    color: color-mix(in oklab, var(--text-on-dark) 45%, transparent);
}

.emergency-flow .section__title {
    color: var(--text-on-dark);
}

.emergency-flow__diagram-wrap {
    position: relative;
    width: 100%;
    margin-top: var(--spacing-xs);
    padding: 8px 10px;
    border: 1px solid var(--border-on-dark);
    border-radius: var(--radius-xl);
    background: color-mix(in oklab, var(--bg-dark-mid) 72%, transparent);
    overflow: hidden;
}

.emergency-flow__diagram {
    width: 100%;
    height: auto;
    display: block;
}

.emergency-flow__diagram-controls {
    position: absolute;
    left: 10px;
    bottom: 8px;
    z-index: 2;
    display: flex;
}

.es-flow-connection {
    stroke: color-mix(in oklab, var(--color-blue) 24%, transparent);
    stroke-width: 2;
    fill: none;
    transition: stroke 420ms ease, stroke-width 420ms ease;
}

.es-flow-connection.is-active--primary {
    stroke: color-mix(in oklab, var(--color-orange) 70%, transparent);
    stroke-width: 2.4;
}

.es-flow-connection.is-active--confirm {
    stroke: color-mix(in oklab, var(--color-green) 68%, transparent);
    stroke-width: 2.4;
}

.es-flow-node {
    color: color-mix(in oklab, var(--color-blue-light) 75%, var(--color-blue));
    transition: color 460ms ease, filter 460ms ease;
    filter: drop-shadow(0 0 0 transparent);
}

.es-flow-node > rect:first-of-type {
    fill: color-mix(in oklab, var(--bg-dark-mid) 82%, var(--color-blue));
}

.es-flow-node rect {
    fill: none;
}

.es-flow-node rect,
.es-flow-node path,
.es-flow-node polyline,
.es-flow-node line,
.es-flow-node circle {
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 420ms ease, fill 420ms ease;
}

.es-flow-node path,
.es-flow-node polyline,
.es-flow-node line {
    fill: none;
}

.es-flow-node circle {
    fill: none;
}

.es-flow-node circle[fill] {
    fill: currentColor;
}

.es-flow-node circle[stroke="none"] {
    stroke: none;
}

.es-flow-node.is-active--primary {
    color: color-mix(in oklab, var(--color-orange) 88%, var(--text-on-dark));
    filter: drop-shadow(0 0 8px color-mix(in oklab, var(--color-orange) 42%, transparent));
}

.es-flow-node.is-active--confirm {
    color: color-mix(in oklab, var(--color-green) 86%, var(--text-on-dark));
    filter: drop-shadow(0 0 8px color-mix(in oklab, var(--color-green) 44%, transparent));
}

.es-flow-node.is-active--record {
    color: color-mix(in oklab, var(--color-green) 78%, var(--text-on-dark));
    filter: drop-shadow(0 0 10px color-mix(in oklab, var(--color-green) 50%, transparent));
}

.es-flow-node__label {
    fill: var(--text-on-dark);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.008em;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
    paint-order: stroke;
    stroke: color-mix(in oklab, var(--bg-dark) 72%, transparent);
    stroke-width: 0.8px;
}

.es-flow-node__label--small {
    font-size: 18px;
}

.es-flow-dot {
    opacity: 0;
    transition: opacity 240ms ease;
}

.es-flow-dot--primary {
    fill: var(--color-orange);
}

.es-flow-dot--confirm {
    fill: var(--color-green);
}

.emergency-flow__status {
    margin-top: var(--spacing-xs);
}

.emergency-flow__phases {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    flex: 1;
}

.emergency-flow__phases .phase {
    padding: var(--spacing-sm) var(--spacing-xs);
    border-bottom: 2px solid color-mix(in oklab, var(--text-on-dark) 12%, transparent);
    color: color-mix(in oklab, var(--text-on-dark) 36%, transparent);
    text-align: center;
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    transition: border-color 420ms ease, color 420ms ease;
}

.emergency-flow__phases .phase.completed {
    color: color-mix(in oklab, var(--text-on-dark) 84%, transparent);
}

.emergency-flow__phases .phase.completed--primary {
    border-bottom-color: color-mix(in oklab, var(--color-orange) 74%, transparent);
    color: color-mix(in oklab, var(--color-orange) 82%, var(--text-on-dark));
}

.emergency-flow__phases .phase.completed--confirm {
    border-bottom-color: color-mix(in oklab, var(--color-green) 74%, transparent);
    color: color-mix(in oklab, var(--color-green) 82%, var(--text-on-dark));
}

.emergency-flow__phases .phase.active {
    border-bottom-color: color-mix(in oklab, var(--text-on-dark) 70%, transparent);
    color: var(--text-on-dark);
}

.emergency-flow__phases .phase.active--primary {
    border-bottom-color: var(--color-orange);
    color: var(--color-orange);
}

.emergency-flow__phases .phase.active--confirm {
    border-bottom-color: var(--color-green);
    color: var(--color-green);
}

#es-flow-toggle {
    background: color-mix(in oklab, var(--color-blue) 15%, transparent);
    border: 1px solid color-mix(in oklab, var(--color-blue) 30%, transparent);
    color: color-mix(in oklab, var(--color-blue-light) 70%, var(--text-on-dark));
}

#es-flow-toggle:hover,
#es-flow-toggle:focus-visible {
    background: color-mix(in oklab, var(--color-blue) 24%, transparent);
    border-color: color-mix(in oklab, var(--color-blue) 60%, transparent);
}

.emergency-flow__note {
    margin: var(--spacing-sm) auto 0;
    max-width: none;
    text-align: center;
    color: color-mix(in oklab, var(--text-on-dark) 56%, transparent);
    font-size: var(--font-size-sm);
}

.emergency-canvas__grid {
    display: grid;
    gap: var(--spacing-xl);
    align-items: center;
}

.emergency-canvas .section__title {
    max-width: 24ch;
}

.emergency-canvas__title-accent {
    color: var(--color-orange);
}

.emergency-canvas .section__description {
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

.emergency-canvas__capabilities {
    list-style: none;
    padding: 0;
    margin: var(--spacing-md) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.emergency-canvas__capability {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.emergency-canvas__capability-title {
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: 700;
}

.emergency-canvas__capability-text {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.emergency-canvas__media {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.emergency-canvas__visual {
    --es-canvas-cycle: 8s;
    position: relative;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.emergency-canvas__controls {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-sm);
    position: static;
}

#es-canvas-toggle {
    min-width: 116px;
    border-color: color-mix(in oklab, var(--color-blue) 62%, var(--border-light));
    color: var(--color-blue);
    background: color-mix(in oklab, var(--bg-white) 88%, transparent);
}

#es-canvas-toggle:hover,
#es-canvas-toggle:focus-visible {
    border-color: var(--color-blue);
    background: color-mix(in oklab, var(--color-blue-light) 40%, var(--bg-white));
}

.emergency-canvas__diagram {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 12px 20px color-mix(in oklab, var(--color-blue) 16%, transparent));
}

.emergency-canvas__diagram text {
    font-family: var(--font-family);
}

.es-canvas-grid-dot {
    fill: color-mix(in oklab, var(--text-on-dark) 16%, transparent);
}

.es-canvas-scene {
    transform-origin: center center;
}

.es-canvas-scene--editor {
    opacity: 1;
    transform: translateY(-8px) scale(1.08);
}

.es-canvas-scene--app {
    opacity: 0;
    transform: translateY(-6px) scale(1.12);
}

.emergency-canvas__visual.is-complete .es-canvas-scene--editor {
    opacity: 0;
}

.emergency-canvas__visual.is-complete .es-canvas-scene--app {
    opacity: 1;
}

.es-canvas-editor__frame {
    fill: color-mix(in oklab, var(--bg-dark-mid) 90%, var(--bg-dark));
    stroke: color-mix(in oklab, var(--color-blue-light) 36%, transparent);
    stroke-width: 1.2;
}

.es-canvas-editor__toolbar {
    fill: color-mix(in oklab, var(--bg-dark-mid) 65%, var(--bg-dark-deep));
}

.es-canvas-editor__chrome {
    stroke: none;
}

.es-canvas-editor__chrome--red {
    fill: color-mix(in oklab, var(--color-red) 78%, var(--bg-dark-mid));
}

.es-canvas-editor__chrome--orange {
    fill: color-mix(in oklab, var(--color-orange) 78%, var(--bg-dark-mid));
}

.es-canvas-editor__chrome--green {
    fill: color-mix(in oklab, var(--color-green) 78%, var(--bg-dark-mid));
}

.es-canvas-editor__toolbar-label {
    fill: color-mix(in oklab, var(--text-on-dark) 82%, transparent);
    font-size: 14px;
    font-weight: 600;
    text-anchor: middle;
}

.es-canvas-editor__sidebar {
    fill: color-mix(in oklab, var(--bg-dark-mid) 70%, var(--bg-dark));
    stroke: color-mix(in oklab, var(--text-on-dark) 10%, transparent);
    stroke-width: 1;
}

.es-canvas-editor__sidebar-title {
    fill: color-mix(in oklab, var(--text-on-dark) 56%, transparent);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.es-canvas-source rect,
.es-canvas-widget rect {
    fill: color-mix(in oklab, var(--bg-dark-mid) 72%, var(--bg-dark));
    stroke-width: 1.6;
}

.es-canvas-source text {
    fill: color-mix(in oklab, var(--text-on-dark) 74%, transparent);
    font-size: 10px;
    font-weight: 600;
    text-anchor: middle;
}

.es-canvas-source path,
.es-canvas-source circle,
.es-canvas-widget path,
.es-canvas-widget circle {
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.es-canvas-source--alert rect,
.es-canvas-widget--alert rect {
    stroke: color-mix(in oklab, var(--color-red) 82%, transparent);
    fill: color-mix(in oklab, var(--color-red) 15%, var(--bg-dark-mid));
}

.es-canvas-source--alert path,
.es-canvas-source--alert circle,
.es-canvas-widget--alert path,
.es-canvas-widget--alert circle {
    stroke: color-mix(in oklab, var(--color-red) 86%, var(--text-on-dark));
}

.es-canvas-source--status rect,
.es-canvas-widget--status rect {
    stroke: color-mix(in oklab, var(--color-orange) 84%, transparent);
    fill: color-mix(in oklab, var(--color-orange) 16%, var(--bg-dark-mid));
}

.es-canvas-source--status rect[width="30"],
.es-canvas-widget--status rect[width="74"] {
    stroke: none;
    fill: color-mix(in oklab, var(--color-orange) 74%, transparent);
}

.es-canvas-source--chat rect,
.es-canvas-widget--chat rect {
    stroke: color-mix(in oklab, var(--color-blue) 78%, transparent);
    fill: color-mix(in oklab, var(--color-blue) 16%, var(--bg-dark-mid));
}

.es-canvas-source--chat path,
.es-canvas-widget--chat path {
    stroke: color-mix(in oklab, var(--color-blue-light) 88%, transparent);
}

.es-canvas-sidebar-fade-stop--start {
    stop-color: color-mix(in oklab, var(--bg-dark-mid) 4%, transparent);
    stop-opacity: 0;
}

.es-canvas-sidebar-fade-stop--end {
    stop-color: color-mix(in oklab, var(--bg-dark) 90%, var(--bg-dark-mid));
    stop-opacity: 0.96;
}

.es-canvas-sidebar__fade {
    pointer-events: none;
}

.es-canvas-source--more {
    opacity: 0.76;
}

.es-canvas-source--more rect {
    stroke: color-mix(in oklab, var(--text-on-dark) 38%, transparent);
    fill: color-mix(in oklab, var(--bg-dark-mid) 84%, var(--bg-dark));
}

.es-canvas-source--more path {
    stroke: color-mix(in oklab, var(--text-on-dark) 46%, transparent);
}

.es-canvas-source--more text {
    fill: color-mix(in oklab, var(--text-on-dark) 58%, transparent);
}

.es-canvas-editor__surface {
    fill: color-mix(in oklab, var(--bg-dark-mid) 88%, var(--bg-dark));
    stroke: color-mix(in oklab, var(--text-on-dark) 12%, transparent);
    stroke-width: 1;
}

.es-canvas-editor__surface-grid {
    stroke: color-mix(in oklab, var(--text-on-dark) 10%, transparent);
    stroke-width: 1;
}

.es-canvas-widget {
    opacity: 0;
    transform: translate(-168px, 0) scaleX(0.32);
    transform-origin: left center;
    will-change: transform, opacity;
}

.es-canvas-widget text {
    fill: color-mix(in oklab, var(--text-on-dark) 88%, transparent);
    font-size: 11px;
    font-weight: 600;
}

.es-canvas-app__halo {
    fill: color-mix(in oklab, var(--color-blue) 20%, transparent);
}

.es-canvas-app__phone {
    fill: color-mix(in oklab, var(--bg-dark) 90%, var(--bg-dark-mid));
    stroke: color-mix(in oklab, var(--color-blue) 24%, transparent);
    stroke-width: 1;
}

.es-canvas-app__screen {
    fill: var(--bg-white);
}

.es-canvas-app__notch {
    fill: color-mix(in oklab, var(--bg-dark) 18%, var(--border-light));
}

.es-canvas-app-widget--alert rect {
    fill: color-mix(in oklab, var(--color-red) 92%, var(--color-red));
}

.es-canvas-app-widget--alert text {
    fill: var(--text-on-dark);
    font-size: 10px;
    font-weight: 700;
    text-anchor: middle;
}

.es-canvas-app-widget--status rect {
    fill: color-mix(in oklab, var(--color-orange) 88%, var(--color-orange));
}

.es-canvas-app-widget--status circle {
    fill: color-mix(in oklab, var(--bg-white) 92%, transparent);
}

.es-canvas-app-widget--status text {
    fill: var(--text-on-dark);
    font-size: 10px;
    font-weight: 700;
    text-anchor: middle;
}

.es-canvas-app-widget--chat rect:first-child {
    fill: color-mix(in oklab, var(--color-blue) 90%, var(--color-blue));
}

.es-canvas-app-widget--chat rect:not(:first-child) {
    fill: color-mix(in oklab, var(--bg-white) 90%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
    @keyframes es-canvas-editor-fade {
        0%, 74% { opacity: 1; }
        80%, 100% { opacity: 0; }
    }

    @keyframes es-canvas-app-fade {
        0%, 76% { opacity: 0; }
        82%, 100% { opacity: 1; }
    }

    @keyframes es-canvas-widget-alert {
        0%, 8% {
            opacity: 0;
            transform: translate(-168px, 0) scaleX(0.32);
        }
        18%, 74% {
            opacity: 1;
            transform: translate(0, 0) scaleX(1);
        }
        80%, 100% {
            opacity: 0;
            transform: translate(0, 0) scaleX(1);
        }
    }

    @keyframes es-canvas-widget-status {
        0%, 22% {
            opacity: 0;
            transform: translate(-168px, 0) scaleX(0.32);
        }
        32%, 74% {
            opacity: 1;
            transform: translate(0, 0) scaleX(1);
        }
        80%, 100% {
            opacity: 0;
            transform: translate(0, 0) scaleX(1);
        }
    }

    @keyframes es-canvas-widget-chat {
        0%, 36% {
            opacity: 0;
            transform: translate(-168px, 0) scaleX(0.32);
        }
        46%, 74% {
            opacity: 1;
            transform: translate(0, 0) scaleX(1);
        }
        80%, 100% {
            opacity: 0;
            transform: translate(0, 0) scaleX(1);
        }
    }

    .emergency-canvas__visual.is-playing .es-canvas-scene--editor {
        animation: es-canvas-editor-fade var(--es-canvas-cycle) linear 1 both;
    }

    .emergency-canvas__visual.is-playing .es-canvas-scene--app {
        animation: es-canvas-app-fade var(--es-canvas-cycle) linear 1 both;
    }

    .emergency-canvas__visual.is-playing .es-canvas-widget--alert {
        animation: es-canvas-widget-alert var(--es-canvas-cycle) linear 1 both;
    }

    .emergency-canvas__visual.is-playing .es-canvas-widget--status {
        animation: es-canvas-widget-status var(--es-canvas-cycle) linear 1 both;
    }

    .emergency-canvas__visual.is-playing .es-canvas-widget--chat {
        animation: es-canvas-widget-chat var(--es-canvas-cycle) linear 1 both;
    }
}

@media (prefers-reduced-motion: reduce) {
    .es-canvas-scene--editor {
        opacity: 0;
    }

    .es-canvas-scene--app {
        opacity: 1;
    }
}

.emergency-architecture__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
}

.emergency-architecture-item {
    padding: var(--spacing-lg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    background: var(--bg-white);
    text-align: left;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.emergency-architecture-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.emergency-architecture-item__name {
    color: var(--color-blue);
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
}

.emergency-architecture-item__desc {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.emergency-technology-foundation__icon {
    width: 44px;
    height: 44px;
    margin-bottom: var(--spacing-sm);
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-blue);
    background: color-mix(in oklab, var(--color-blue) 16%, var(--bg-white));
    border: 1px solid color-mix(in oklab, var(--color-blue) 30%, transparent);
}

.emergency-technology-foundation__icon svg {
    width: 20px;
    height: 20px;
    display: block;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.emergency-technology__highlight {
    padding: var(--spacing-md) var(--spacing-lg);
    margin: var(--spacing-xs) 0;
    border: 1px solid color-mix(in oklab, var(--color-orange) 60%, transparent);
    background: color-mix(in oklab, var(--color-orange) 16%, transparent);
    border-radius: var(--radius-md);
    font-weight: 700;
    color: var(--text-on-dark);
    font-size: clamp(var(--font-size-lg), 2vw, var(--font-size-xl));
    line-height: 1.6;
    text-align: center;
}

.emergency-technology__highlight > span + span {
    margin-left: 0.35rem;
}

.emergency-technology__metric-number {
    color: var(--color-orange);
    font-weight: 800;
    letter-spacing: -0.01em;
    font-size: 1.08em;
    white-space: nowrap;
}

.emergency-technology__highlight-text {
    color: color-mix(in oklab, var(--text-on-dark) 92%, transparent);
    font-weight: 600;
}

.emergency-technology .section__header {
    margin-bottom: var(--spacing-lg);
}

.emergency-technology .section__description {
    margin-bottom: var(--spacing-md);
}

.emergency-technology__block + .emergency-technology__block {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-light);
}

.emergency-technology__kpi-panel {
    background: var(--bg-dark);
    border: 1px solid color-mix(in oklab, var(--text-on-dark) 14%, transparent);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-md);
    display: grid;
    gap: var(--spacing-sm);
}

.emergency-technology__kpi-panel .section__description {
    max-width: none;
    color: color-mix(in oklab, var(--text-on-dark) 84%, transparent);
}

.emergency-technology__lead {
    margin-bottom: 0;
    color: color-mix(in oklab, var(--text-on-dark) 92%, transparent);
    font-size: clamp(var(--font-size-base), 1.05vw, var(--font-size-lg));
    line-height: 1.62;
}

.emergency-technology__support {
    margin-top: 0;
    color: color-mix(in oklab, var(--text-on-dark) 88%, transparent);
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

.emergency-technology__kpi-points {
    list-style: none;
    margin: var(--spacing-xs) auto 0;
    padding: 0;
    display: grid;
    gap: var(--spacing-xs);
    width: min(100%, 42rem);
}

.emergency-technology__kpi-points li {
    position: relative;
    padding-left: 1rem;
    color: color-mix(in oklab, var(--text-on-dark) 82%, transparent);
    font-size: var(--font-size-sm);
    line-height: 1.55;
}

.emergency-technology__kpi-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.58em;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 999px;
    background: color-mix(in oklab, var(--color-orange) 88%, var(--text-on-dark));
}

.emergency-technology__subheading {
    margin-bottom: var(--spacing-xs);
    color: var(--text-primary);
    font-size: var(--font-size-xl);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.emergency-technology__grid {
    margin-top: var(--spacing-md);
}

.emergency-technology__cta {
    color: var(--text-on-dark);
    border-color: color-mix(in oklab, var(--text-on-dark) 35%, transparent);
    background: transparent;
    display: flex;
    width: fit-content;
    margin: var(--spacing-sm) auto 0;
}

.emergency-technology__cta:hover,
.emergency-technology__cta:focus-visible {
    color: var(--text-on-dark);
    border-color: color-mix(in oklab, var(--text-on-dark) 58%, transparent);
    background: color-mix(in oklab, var(--color-blue) 30%, transparent);
}

.emergency-security__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
}

.emergency-security-card {
    padding: var(--spacing-lg);
    border: 1px solid color-mix(in oklab, var(--color-green) 28%, var(--border-light));
    border-top: 3px solid color-mix(in oklab, var(--color-green) 46%, transparent);
    border-radius: var(--radius-lg);
    background: color-mix(in oklab, var(--bg-white) 93%, var(--color-green) 7%);
    min-height: 214px;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.emergency-security-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.emergency-security-card__icon {
    width: 40px;
    height: 40px;
    margin-bottom: var(--spacing-sm);
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-green);
    background: color-mix(in oklab, var(--color-green) 16%, var(--bg-white));
    border: 1px solid color-mix(in oklab, var(--color-green) 28%, transparent);
}

.emergency-security-card__icon svg {
    width: 20px;
    height: 20px;
    display: block;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.emergency-security-card__title {
    color: var(--text-primary);
    font-size: var(--font-size-base);
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
}

.emergency-security-card__text {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.65;
}

.emergency-cta {
    position: relative;
    overflow: hidden;
    text-align: center;
}

.emergency-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 40%, color-mix(in oklab, var(--color-orange) 8%, transparent) 0%, transparent 50%);
    pointer-events: none;
}

.emergency-cta__inner {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin-inline: auto;
}

.emergency-cta .section__title {
    color: var(--text-on-dark);
}

.emergency-cta .section__description {
    margin-inline: auto;
    color: color-mix(in oklab, var(--text-on-dark) 58%, transparent);
}

.emergency-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

@media (min-width: 768px) {
    .emergency-pillars-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .emergency-canvas__grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    }

    .emergency-numbers__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .emergency-numbers__item:nth-child(odd)::after {
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 40px;
        background: color-mix(in oklab, var(--text-on-dark) 10%, transparent);
    }

    .emergency-usecases__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .emergency-security__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .emergency-architecture__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .emergency-problem-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .emergency-pillars-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .emergency-numbers__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: var(--spacing-lg) 0;
    }

    .emergency-numbers__item::after {
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 40px;
        background: color-mix(in oklab, var(--text-on-dark) 10%, transparent);
    }

    .emergency-numbers__item:last-child::after {
        display: none;
    }

    .emergency-usecases__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .emergency-security__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .emergency-hero {
        padding-top: calc(var(--spacing-3xl) + var(--spacing-md));
    }

    .emergency-hero__badge {
        max-width: min(100%, 28rem);
        padding-inline: var(--spacing-sm);
        font-size: 0.63rem;
        letter-spacing: 0.09em;
    }

    .emergency-hero__badge::before {
        width: 0.42rem;
        height: 0.42rem;
    }

    .emergency-numbers__grid {
        gap: var(--spacing-sm);
        padding: var(--spacing-md);
    }

    .emergency-flow__status {
        margin-top: 4px;
    }

    .emergency-flow__diagram-wrap {
        padding: 6px;
    }

    .emergency-technology__kpi-panel {
        padding: var(--spacing-md);
        gap: var(--spacing-xs);
    }

    .emergency-technology__highlight {
        padding: var(--spacing-sm) var(--spacing-md);
        line-height: 1.5;
    }

    .emergency-technology__highlight > span + span {
        margin-left: 0.2rem;
    }

    .emergency-technology__metric-number {
        font-size: 1.03em;
    }

    .emergency-flow > .container {
        padding-inline: var(--spacing-xs);
    }

    .es-flow-node__label {
        font-size: 19px;
    }

    .es-flow-node__label--small {
        font-size: 19px;
    }

    .emergency-flow__phases {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 4px;
        overflow-x: visible;
        padding-bottom: 0;
    }

    .emergency-flow__phases .phase {
        font-size: calc(0.5rem - 1px);
        letter-spacing: 0.01em;
        line-height: 1.05;
        white-space: normal;
        overflow: hidden;
        padding: 4px 2px;
        min-height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .emergency-flow__note {
        font-size: calc(var(--font-size-sm) - 1px);
    }

    #es-flow-toggle {
        min-width: 44px;
        min-height: 24px;
        font-size: 0.5rem;
        line-height: 1;
        padding: 0.2rem 0.36rem;
        border-radius: 0.28rem;
    }

    .emergency-flow__diagram-controls {
        left: 6px;
        bottom: 6px;
    }

    .emergency-canvas .section__title {
        max-width: 100%;
    }

    .emergency-canvas__capabilities {
        margin-top: var(--spacing-sm);
        gap: var(--spacing-xs);
    }

    .emergency-canvas__capability-title,
    .emergency-canvas__capability-text {
        font-size: calc(var(--font-size-sm) - 1px);
    }

    .emergency-canvas__controls {
        margin-top: var(--spacing-xs);
    }

    .emergency-canvas__visual {
        padding: 0;
        --es-canvas-cycle: 6.6s;
    }

    #es-canvas-toggle {
        min-width: 86px;
        font-size: 0.72rem;
        padding: 0.35rem 0.75rem;
    }
}