@font-face {
    font-family: "Inter";
    src: url("assets/fonts/Inter-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Inter";
    src: url("assets/fonts/Inter-Medium.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Inter";
    src: url("assets/fonts/Inter-Bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
}

:root {
    --ink: #080808;
    --ink-soft: #141414;
    --text: #f7f3ed;
    --text-muted: rgba(247, 243, 237, 0.74);
    --line: rgba(255, 255, 255, 0.11);
    --signal-red: #ff4828;
    --signal-red-deep: #b01212;
    --signal-pink: #ffdfe5;
    --signal-orange: #ff9b3f;
    --signal-blue: #5e95ff;
    --signal-pink-hot: #ff69b4;
    --signal-green: #4bd37b;
    --shadow-strong: 0 40px 120px rgba(0, 0, 0, 0.45);
    --shadow-soft: 0 24px 60px rgba(0, 0, 0, 0.22);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-width: 320px;
    font-family: "Inter", "Segoe UI", sans-serif;
    color: var(--text);
    background: var(--ink);
}

.page-shell {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    opacity: 1;
    transform: none;
    filter: none;
}

.js body.is-loading {
    overflow: hidden;
}

.js body.is-loading .page-shell {
    opacity: 0;
    transform: translateY(24px) scale(0.985);
    filter: blur(10px);
    pointer-events: none;
}

.js body.is-ready .page-shell {
    opacity: 1;
    transform: none;
    filter: none;
    transition:
        opacity 800ms cubic-bezier(0.2, 0.7, 0.2, 1),
        transform 800ms cubic-bezier(0.2, 0.7, 0.2, 1),
        filter 800ms ease;
}

body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
}

body::before {
    background: linear-gradient(180deg, #040404, #090909 58%, #070707 100%);
    opacity: 1;
    transform: none;
    z-index: -2;
}

body::after {
    background: transparent;
    z-index: -1;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}

.liquid {
    --liquid-bg:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
        rgba(10, 10, 10, 0.78);
    --liquid-border: rgba(255, 255, 255, 0.12);
    --liquid-shadow: 0 24px 60px rgba(0, 0, 0, 0.24);
    --liquid-blur: 18px;
    border: 1px solid var(--liquid-border);
    background: var(--liquid-bg);
    backdrop-filter: blur(var(--liquid-blur));
    -webkit-backdrop-filter: blur(var(--liquid-blur));
    box-shadow: var(--liquid-shadow);
}

.page-shell::before {
    content: "";
    position: absolute;
    inset: 340px -12vw auto auto;
    width: 40vw;
    height: 40vw;
    min-width: 300px;
    min-height: 300px;
    background: transparent;
    filter: blur(30px);
    z-index: -1;
}

.intro-loader {
    position: fixed;
    inset: 0;
    z-index: 120;
    overflow: hidden;
    pointer-events: none;
    background: #000;
    opacity: 0;
    visibility: hidden;
}

.js body.is-loading .intro-loader {
    opacity: 1;
    visibility: visible;
}

.js body.is-ready .intro-loader {
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 520ms ease,
        visibility 0s linear 520ms;
}

.intro-loader__center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(104px, 11vw, 148px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    animation: intro-center 2.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.intro-loader__icon {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 18px 28px rgba(255, 255, 255, 0.08));
}

.intro-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(8, 8, 8, 0.72);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.25);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    opacity: 0;
    transform: translate(calc(-50% + var(--from-x)), calc(-50% + var(--from-y))) scale(0.6);
    animation: intro-badge-flight 2.16s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--delay);
    will-change: transform, opacity, filter;
}

.intro-badge::before {
    content: "";
    width: 10px;
    height: 10px;
    margin-right: 10px;
    border-radius: 50%;
    background: var(--badge-color);
    box-shadow: 0 0 18px var(--badge-shadow);
}

.intro-badge--construction {
    --from-x: -48vw;
    --from-y: 26vh;
    --land-x: -150px;
    --land-y: -72px;
    --delay: 0.08s;
    --badge-color: var(--signal-orange);
    --badge-shadow: rgba(255, 155, 63, 0.7);
}

.intro-badge--police {
    --from-x: 42vw;
    --from-y: -22vh;
    --land-x: 152px;
    --land-y: -38px;
    --delay: 0.24s;
    --badge-color: var(--signal-blue);
    --badge-shadow: rgba(94, 149, 255, 0.72);
}

.intro-badge--accident {
    --from-x: -38vw;
    --from-y: -26vh;
    --land-x: -116px;
    --land-y: 102px;
    --delay: 0.4s;
    --badge-color: var(--signal-red);
    --badge-shadow: rgba(255, 72, 40, 0.72);
}

.intro-badge--danger {
    --from-x: 34vw;
    --from-y: 30vh;
    --land-x: 138px;
    --land-y: 96px;
    --delay: 0.56s;
    --badge-color: #ffffff;
    --badge-shadow: rgba(255, 255, 255, 0.6);
}

.intro-badge--event {
    --from-x: -12vw;
    --from-y: 40vh;
    --land-x: -16px;
    --land-y: 154px;
    --delay: 0.72s;
    --badge-color: var(--signal-pink-hot);
    --badge-shadow: rgba(255, 105, 180, 0.72);
}

.intro-badge--traffic {
    --from-x: 36vw;
    --from-y: 12vh;
    --land-x: 24px;
    --land-y: -150px;
    --delay: 0.88s;
    --badge-color: var(--signal-green);
    --badge-shadow: rgba(75, 211, 123, 0.72);
}

.site-header {
    width: 100%;
    margin: 0;
}

main,
.site-footer {
    width: min(1280px, calc(100vw - 48px));
    margin: 0 auto;
}

section[id] {
    scroll-margin-top: 116px;
}

.site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    min-height: 0;
    pointer-events: none;
}

.header-actions {
    position: fixed;
    top: 20px;
    right: max(24px, calc((100vw - 1280px) / 2 + 24px));
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 14px;
    pointer-events: auto;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 10px;
    border-radius: 999px;
    --liquid-bg: rgba(8, 8, 8, 0.48);
    --liquid-border: var(--line);
    --liquid-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
    --liquid-blur: 12px;
}

.site-nav a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.95rem;
    color: var(--text-muted);
    transition: color 180ms ease;
}

.site-nav i {
    font-size: 1rem;
    opacity: 0.92;
}

.site-nav a:hover,
.site-nav a:focus-visible {
    color: var(--text);
}

.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 156px 24px 64px;
    min-height: min(76vh, 820px);
}

.hero::before,
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero::before {
    inset: -72px -6vw 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.54), rgba(0, 0, 0, 0.42) 22%, rgba(0, 0, 0, 0.72) 74%, rgba(8, 8, 8, 0.96) 100%),
        radial-gradient(circle at center, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0) 36%),
        url("assets/hero-map-dark.jpg") center 22% / cover no-repeat;
    transform: scale(1.03);
    z-index: -2;
}

.hero::after {
    inset: auto -6vw 0;
    height: 42%;
    background: linear-gradient(180deg, rgba(8, 8, 8, 0), rgba(8, 8, 8, 0.96));
    z-index: -1;
}

.hero-brand {
    position: absolute;
    top: 26px;
    left: max(24px, calc((100vw - 1280px) / 2 + 24px));
    z-index: 5;
    display: inline-flex;
    align-items: center;
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 220ms ease,
        transform 220ms ease;
}

.hero-brand img {
    width: clamp(118px, 11vw, 164px);
}

.js body.is-scrolled .hero-brand {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}

.hero-copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: min(1340px, 100%);
    text-align: center;
}

.eyebrow {
    margin: 0 0 16px;
    font-size: 0.82rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--signal-pink);
}

.eyebrow--dark {
    color: rgba(255, 118, 92, 0.78);
}

h1,
h2,
h3 {
    margin: 0;
    font-weight: 700;
}

h1 {
    max-width: 100%;
    font-size: clamp(5.1rem, 14.5vw, 12rem);
    line-height: 0.88;
    letter-spacing: -0.05em;
    text-shadow: 0 16px 36px rgba(0, 0, 0, 0.38);
    text-wrap: balance;
}

.hero-text,
.experience-intro p,
.workflow-copy p:last-child,
.category-card p,
.cta__copy p:last-child,
.experience-card p,
.workflow-step p,
.signal-band p {
    margin: 0;
    font-size: clamp(1rem, 1.2vw, 1.16rem);
    line-height: 1.7;
}

.hero-text {
    max-width: 34rem;
    margin-top: 22px;
    color: var(--text-muted);
    font-size: clamp(1.05rem, 1.5vw, 1.28rem);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin-top: 34px;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    padding: 0 22px;
    border-radius: 999px;
    font-size: 0.98rem;
    font-weight: 600;
    transition:
        transform 180ms ease,
        background 180ms ease,
        border-color 180ms ease,
        color 180ms ease;
}

.button:hover,
.button:focus-visible {
    transform: translateY(-2px);
}

.button-primary {
    background: linear-gradient(135deg, var(--signal-red), #ff8a74 160%);
    color: #140c0b;
    box-shadow: 0 18px 40px rgba(255, 72, 40, 0.28);
}

.button-primary i {
    font-size: 1.05rem;
}

.button-secondary {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text);
    backdrop-filter: blur(12px);
}

.hero-note {
    max-width: 34rem;
    margin: 20px 0 0;
    color: rgba(247, 243, 237, 0.72);
    font-size: 0.98rem;
    line-height: 1.6;
    text-align: center;
}

.hero-stage {
    min-height: 600px;
}

.signal-panel {
    position: relative;
    min-height: 600px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 38px;
    background: linear-gradient(180deg, rgba(15, 15, 15, 0.94), rgba(7, 7, 7, 0.98));
    box-shadow: var(--shadow-strong);
    overflow: hidden;
}

.signal-panel::before {
    content: "";
    position: absolute;
    inset: -20% -35% auto auto;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(255, 223, 229, 0.3), transparent 62%);
    filter: blur(12px);
}

.signal-panel::after {
    content: "";
    position: absolute;
    top: 52%;
    left: -18%;
    width: 150%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.66), transparent);
    transform: rotate(40deg);
    opacity: 0.55;
}

.signal-panel__background,
.signal-panel__grid {
    position: absolute;
    inset: 0;
}

.signal-panel__background {
    background: linear-gradient(180deg, rgba(6, 6, 6, 0.18), rgba(6, 6, 6, 0.9));
    opacity: 0.96;
}

.signal-panel__grid {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.9) 24%, rgba(0, 0, 0, 0.9) 100%);
    opacity: 0.18;
}

.card-kicker {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--signal-pink);
}

.device-frame {
    position: absolute;
    inset: 34px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 34px;
    background:
        linear-gradient(180deg, rgba(11, 11, 11, 0.92), rgba(8, 8, 8, 0.82)),
        rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.device-frame__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.device-frame__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff5f2, var(--signal-red));
    box-shadow: 0 0 16px rgba(255, 72, 40, 0.8);
}

.device-map {
    position: relative;
    flex: 1 1 auto;
    overflow: hidden;
    background:
        radial-gradient(circle at center, rgba(255, 255, 255, 0.08), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
}

.device-map::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 44px 44px;
    opacity: 0.24;
}

.device-map::after {
    content: "";
    position: absolute;
    inset: 16% 14% auto auto;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 223, 229, 0.18), transparent 70%);
    filter: blur(10px);
}

.device-map__pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 240px;
    height: 240px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: pulse-ring 3.5s ease-out infinite;
}

.device-map__pulse::before,
.device-map__pulse::after {
    content: "";
    position: absolute;
    inset: 22px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.device-map__pulse::after {
    inset: 52px;
}

.device-map__icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(42%, 220px);
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 28px 40px rgba(0, 0, 0, 0.4));
}

.map-chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.88rem;
    font-weight: 600;
    backdrop-filter: blur(16px);
}

.map-chip--construction {
    top: 20%;
    left: 12%;
    background: rgba(255, 155, 63, 0.18);
    color: #ffd2a2;
}

.map-chip--police {
    top: 26%;
    right: 10%;
    background: rgba(94, 149, 255, 0.18);
    color: #dbe8ff;
}

.map-chip--accident {
    bottom: 26%;
    left: 16%;
    background: rgba(255, 72, 40, 0.18);
    color: #ffd1ca;
}

.map-chip--traffic {
    bottom: 18%;
    right: 14%;
    background: rgba(75, 211, 123, 0.18);
    color: #d7ffe5;
}

.signal-band {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding-bottom: 112px;
}

.signal-band article {
    padding: 22px 22px 26px;
    border-radius: 28px;
    --liquid-bg:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
        rgba(255, 255, 255, 0.02);
    --liquid-border: var(--line);
    --liquid-shadow: 0 18px 40px rgba(0, 0, 0, 0.14);
    --liquid-blur: 12px;
}

.signal-band__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    color: var(--signal-pink);
    font-size: 1.15rem;
}

.signal-band__value {
    display: block;
    margin-bottom: 8px;
    font-size: clamp(2rem, 4vw, 3.2rem);
    letter-spacing: -0.04em;
    font-weight: 700;
}

.experience {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 34px;
    padding: 52px;
    border-radius: 42px;
    color: var(--text);
    --liquid-bg: rgba(13, 13, 13, 0.94);
    --liquid-border: var(--line);
    --liquid-shadow: var(--shadow-strong);
    --liquid-blur: 22px;
}

.experience-intro h2,
.workflow-copy h2,
.categories-header h2,
.cta h2 {
    max-width: 12ch;
    margin-bottom: 18px;
    font-size: clamp(2.6rem, 5vw, 4.7rem);
    line-height: 0.94;
    letter-spacing: -0.05em;
    text-wrap: balance;
}

.experience-intro p:last-child,
.categories-header p:last-child,
.cta__copy p:last-child {
    color: var(--text-muted);
}

.experience-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.experience-card {
    min-height: 190px;
    padding: 24px;
    border-radius: 28px;
    --liquid-bg:
        linear-gradient(180deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.015)),
        rgba(255, 255, 255, 0.018);
    --liquid-border: var(--line);
    --liquid-shadow: 0 18px 44px rgba(0, 0, 0, 0.16);
    --liquid-blur: 14px;
}

.experience-card--large {
    grid-column: span 2;
    min-height: 250px;
    background: rgba(255, 255, 255, 0.05);
}

.experience-card h3,
.workflow-step h3,
.category-card h3 {
    margin-bottom: 10px;
    font-size: 1.4rem;
}

.workflow {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    gap: 34px;
    align-items: start;
    padding: 118px 0;
}

.workflow-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.workflow-step {
    position: relative;
    min-height: 280px;
    padding: 26px;
    border-radius: 30px;
    overflow: hidden;
    --liquid-bg:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
        rgba(255, 255, 255, 0.02);
    --liquid-border: var(--line);
    --liquid-shadow: 0 22px 48px rgba(0, 0, 0, 0.16);
    --liquid-blur: 14px;
}

.workflow-step::before {
    content: "";
    position: absolute;
    top: -20%;
    right: -20%;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(255, 72, 40, 0.22), transparent 66%);
    filter: blur(6px);
}

.workflow-step__index {
    display: block;
    margin-bottom: 28px;
    color: rgba(255, 255, 255, 0.32);
    font-size: clamp(3rem, 5vw, 4.4rem);
    line-height: 1;
    font-weight: 700;
}

.categories {
    padding-bottom: 120px;
}

.categories-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.category-card {
    min-height: 200px;
    padding: 24px;
    border-radius: 30px;
    --liquid-bg:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
        rgba(255, 255, 255, 0.02);
    --liquid-border: var(--line);
    --liquid-shadow: 0 18px 44px rgba(0, 0, 0, 0.16);
    --liquid-blur: 14px;
}

.category-card__dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-bottom: 20px;
    border-radius: 50%;
}

.category-card--construction .category-card__dot {
    background: var(--signal-orange);
}

.category-card--police .category-card__dot {
    background: var(--signal-blue);
}

.category-card--accident .category-card__dot {
    background: var(--signal-red);
}

.category-card--danger .category-card__dot {
    background: #ffffff;
}

.category-card--event .category-card__dot {
    background: var(--signal-pink-hot);
}

.category-card--traffic .category-card__dot {
    background: var(--signal-green);
}

.cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: end;
    margin-bottom: 42px;
    padding: 34px;
    border-radius: 34px;
    --liquid-bg:
        linear-gradient(180deg, rgba(255, 255, 255, 0.036), rgba(255, 255, 255, 0.014)),
        rgba(255, 255, 255, 0.018);
    --liquid-border: var(--line);
    --liquid-shadow: 0 22px 52px rgba(0, 0, 0, 0.18);
    --liquid-blur: 16px;
}

.cta__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.cta__meta span {
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.04);
}

[data-reveal] {
    opacity: 1;
    transform: none;
}

.js body.has-scroll-reveal.is-ready [data-reveal] {
    opacity: 0;
    transform: translateY(34px) scale(0.985);
    filter: blur(6px);
    transition:
        opacity 700ms cubic-bezier(0.2, 0.7, 0.2, 1),
        transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1),
        filter 700ms ease;
}

.js body.has-scroll-reveal.is-ready [data-reveal].is-visible {
    opacity: 1;
    transform: none;
    filter: blur(0);
}

.site-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: auto;
    margin: 0;
    gap: 16px;
    padding: 18px 24px 44px;
    background: #000;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.96rem;
}

.site-footer__credit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.site-footer__credit i {
    color: #ff5f5f;
    font-size: 1.05rem;
}

.site-footer__link {
    border: 0;
    padding: 0;
    color: var(--text);
    font: inherit;
    background: transparent;
    cursor: pointer;
}

.privacy-modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
}

.privacy-modal.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.privacy-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.56);
    backdrop-filter: blur(6px);
}

.privacy-modal__card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(540px, calc(100vw - 28px));
    padding: 28px 28px 26px;
    border-radius: 28px;
    transform: translate(-50%, -50%);
    --liquid-bg:
        linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.01)),
        rgba(8, 8, 8, 0.94);
    --liquid-border: rgba(255, 255, 255, 0.14);
    --liquid-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
    --liquid-blur: 18px;
}

.privacy-modal__card h2 {
    margin-bottom: 14px;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 0.96;
}

.privacy-modal__card p:last-child {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.65;
}

.privacy-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--text);
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
}

.privacy-modal__close i {
    font-size: 1.1rem;
}

.cookie-banner {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 80;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: end;
    width: min(560px, calc(100vw - 32px));
    padding: 18px;
    border-radius: 24px;
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    --liquid-bg:
        linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.01)),
        rgba(8, 8, 8, 0.92);
    --liquid-border: rgba(255, 255, 255, 0.14);
    --liquid-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    --liquid-blur: 18px;
    transition:
        opacity 240ms ease,
        transform 240ms ease;
}

.cookie-banner.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.cookie-banner.is-hidden {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
}

.cookie-banner__copy strong {
    display: block;
    margin-bottom: 6px;
    font-size: 1rem;
}

.cookie-banner__copy p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.55;
}

.cookie-banner__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.cookie-banner__button {
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font: inherit;
    color: var(--text);
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
}

.cookie-banner__button--primary {
    border-color: transparent;
    color: #140c0b;
    background: linear-gradient(135deg, var(--signal-red), #ff8a74 160%);
}

.reveal {
    animation: fade-up 900ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.delay-1 {
    animation-delay: 160ms;
}

@keyframes fade-up {
    from {
        opacity: 0.78;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes intro-center {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.48) rotate(-10deg);
    }

    22% {
        opacity: 1;
    }

    58% {
        transform: translate(-50%, -50%) scale(1.04) rotate(0deg);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
}

@keyframes intro-badge-flight {
    0% {
        opacity: 0;
        filter: blur(14px);
        transform: translate(calc(-50% + var(--from-x)), calc(-50% + var(--from-y))) scale(0.56);
    }

    14% {
        opacity: 1;
        filter: blur(0);
    }

    56% {
        opacity: 1;
        filter: blur(0);
        transform: translate(calc(-50% + var(--land-x)), calc(-50% + var(--land-y))) scale(1);
    }

    76% {
        opacity: 1;
        filter: blur(0);
        transform: translate(calc(-50% + var(--land-x)), calc(-50% + var(--land-y))) scale(0.98);
    }

    100% {
        opacity: 0;
        filter: blur(10px);
        transform: translate(-50%, -50%) scale(0.22);
    }
}

@keyframes pulse-ring {
    0% {
        transform: translate(-50%, -50%) scale(0.92);
        opacity: 0.6;
    }

    50% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.08);
        opacity: 0.5;
    }
}

@media (max-width: 1080px) {
    .hero,
    .experience,
    .workflow,
    .cta {
        grid-template-columns: 1fr;
    }

    .hero {
        padding-top: 148px;
        min-height: 68vh;
    }

    .hero::before {
        inset: -56px -3vw 0;
    }

    .hero-stage {
        min-height: 560px;
    }

    .workflow-steps,
    .categories-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cta__meta {
        justify-content: flex-start;
    }

    .intro-badge--construction {
        --land-x: -126px;
        --land-y: -68px;
    }

    .intro-badge--police {
        --land-x: 132px;
        --land-y: -30px;
    }

    .intro-badge--accident {
        --land-x: -102px;
        --land-y: 92px;
    }

    .intro-badge--danger {
        --land-x: 116px;
        --land-y: 82px;
    }
}

@media (max-width: 780px) {
    main,
    .site-footer {
        width: min(1280px, calc(100vw - 28px));
    }

    .site-header {
        width: 100%;
    }

    .intro-loader__center {
        width: clamp(96px, 24vw, 136px);
    }

    .intro-badge {
        min-height: 42px;
        padding: 0 14px;
        font-size: 0.84rem;
    }

    .intro-badge--construction {
        --from-x: -46vw;
        --from-y: 28vh;
        --land-x: -92px;
        --land-y: -94px;
    }

    .intro-badge--police {
        --from-x: 40vw;
        --from-y: -26vh;
        --land-x: 92px;
        --land-y: -72px;
    }

    .intro-badge--accident {
        --from-x: -42vw;
        --from-y: -24vh;
        --land-x: -96px;
        --land-y: 82px;
    }

    .intro-badge--danger {
        --from-x: 38vw;
        --from-y: 26vh;
        --land-x: 98px;
        --land-y: 68px;
    }

    .intro-badge--event {
        --from-x: -20vw;
        --from-y: 40vh;
        --land-x: -8px;
        --land-y: 122px;
    }

    .intro-badge--traffic {
        --from-x: 20vw;
        --from-y: -38vh;
        --land-x: 10px;
        --land-y: -122px;
    }

    .header-actions {
        top: 16px;
        right: 14px;
        width: auto;
        flex-direction: row;
        align-items: center;
    }

    .site-nav {
        width: auto;
        justify-content: flex-end;
        gap: 10px;
        padding: 8px 12px;
    }

    .hero-brand {
        top: 18px;
        left: 14px;
    }

    .site-nav a span {
        display: none;
    }

    .site-nav a {
        min-width: 18px;
    }

    .hero {
        min-height: auto;
        padding: 142px 18px 40px;
    }

    h1 {
        font-size: clamp(3.9rem, 17vw, 6.3rem);
        line-height: 0.9;
    }

    .hero::before {
        inset: -44px -18px 0;
    }

    .hero-stage,
    .signal-panel {
        min-height: 520px;
    }

    .device-frame {
        inset: 18px;
    }

    .signal-band,
    .experience-grid,
    .workflow-steps,
    .categories-grid {
        grid-template-columns: 1fr;
    }

    .experience {
        padding: 28px;
        border-radius: 30px;
    }

    .experience-card--large {
        grid-column: span 1;
    }

    .workflow {
        padding: 92px 0;
    }

    .workflow-step {
        min-height: 220px;
    }

    .categories-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .cta {
        padding: 26px;
    }

    .site-footer {
        flex-direction: column;
        align-items: flex-start;
        padding: 18px 14px 44px;
    }

    .cookie-banner {
        right: 14px;
        bottom: 14px;
        grid-template-columns: 1fr;
    }

    .cookie-banner__actions {
        justify-content: flex-start;
    }
}

@media (max-width: 540px) {
    .intro-badge {
        min-height: 38px;
        padding: 0 12px;
        font-size: 0.76rem;
    }

    .intro-badge::before {
        width: 8px;
        height: 8px;
        margin-right: 8px;
    }

    .intro-badge--construction {
        --land-x: -72px;
        --land-y: -82px;
    }

    .intro-badge--police {
        --land-x: 72px;
        --land-y: -62px;
    }

    .intro-badge--accident {
        --land-x: -78px;
        --land-y: 72px;
    }

    .intro-badge--danger {
        --land-x: 76px;
        --land-y: 58px;
    }

    .intro-badge--event {
        --land-x: -6px;
        --land-y: 100px;
    }

    .intro-badge--traffic {
        --land-x: 8px;
        --land-y: -102px;
    }

    .site-nav {
        gap: 8px;
        font-size: 0.88rem;
    }

    .button {
        width: 100%;
    }

    .cookie-banner__button {
        width: 100%;
    }

    .map-chip {
        padding: 8px 12px;
        font-size: 0.78rem;
    }

    .map-chip--construction {
        top: 18%;
        left: 8%;
    }

    .map-chip--police {
        right: 6%;
    }

    .map-chip--accident {
        left: 10%;
    }

    .map-chip--traffic {
        right: 10%;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .intro-loader {
        display: none;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}