/* SKYCRAFT — основные стили интерфейса.
   Размеры и цвета вынесены в переменные, чтобы дизайн было проще менять. */

:root {
    color-scheme: dark;
    --background: #090d17;
    --surface: #101524;
    --surface-raised: #151b2e;
    --line: #222b40;
    --text: #e0e7f7;
    --muted: #a1b0ce;
    --subtle: #788aaf;
    --accent: #4941d9;
    --accent-hover: #5953ee;
    --accent-light: #9998ff;
    --header-height: 88px;
    --footer-height: 86px;
    --page-padding: clamp(32px, 5.8vw, 112px);
    --font-ui: "Bahnschrift", "Arial Narrow", "Segoe UI", sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    min-height: 100%;
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    background: var(--background);
    color: var(--text);
    font-family: var(--font-ui);
    -webkit-font-smoothing: antialiased;
}

button,
select,
input {
    font: inherit;
}

button {
    cursor: pointer;
}

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

button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible {
    outline: 2px solid #aaa8ff;
    outline-offset: 4px;
}

[hidden] {
    display: none !important;
}

.site-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.topbar {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex: 0 0 var(--header-height);
    padding: 0 2.5%;
    border-bottom: 1px solid #1d2536;
    background: #0a0e18;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 17px;
    min-width: 0;
    color: #a7b5d4;
    font-size: 27px;
    font-weight: 800;
    letter-spacing: 0.015em;
}

.brand:hover {
    color: #d6e0f7;
}

.brand-symbol {
    display: block;
    width: 53px;
    height: 40px;
    flex: 0 0 auto;
}

.account-controls,
.user-button,
.balance-button {
    display: flex;
    align-items: center;
}

.account-controls {
    gap: 27px;
}

.popover-anchor {
    position: relative;
}

.balance-button {
    height: 51px;
    min-width: 146px;
    gap: 14px;
    padding: 0 25px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: transparent;
    color: var(--text);
    font-size: 20px;
}

.balance-button:hover,
.user-button:hover {
    background-color: #141a2a;
}

.balance-button-divider {
    height: 18px;
    margin-left: auto;
    border-left: 1px solid #253049;
}

.user-button {
    height: 51px;
    gap: 13px;
    padding: 0 2px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--muted);
    font-size: 19px;
}

.icon {
    width: 21px;
    height: 21px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.user-icon {
    width: 20px;
    height: 20px;
}

.chevron-icon {
    width: 16px;
    height: 16px;
    margin-left: 2px;
}

.popover {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 20;
    width: 280px;
    padding: 20px;
    border: 1px solid #334060;
    border-radius: 9px;
    background: #111827;
    box-shadow: 0 15px 50px #0009;
}

.popover strong {
    display: block;
    margin-bottom: 10px;
    font-size: 18px;
}

.popover p {
    margin: 0 0 12px;
    font-size: 34px;
    font-weight: 700;
}

.popover p span {
    color: var(--subtle);
    font-size: 14px;
}

.popover small {
    display: block;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.45;
}

.user-popover a,
.user-popover button {
    display: block;
    width: 100%;
    margin-top: 13px;
    padding: 11px 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    color: var(--text);
    text-align: left;
    font-size: 16px;
}

.user-popover a:hover,
.user-popover button:hover {
    color: var(--accent-light);
}

.page-content {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    min-width: 0;
}

.hero {
    position: relative;
    isolation: isolate;
    display: flex;
    flex: 1 0 auto;
    min-height: max(680px, calc(100dvh - var(--header-height) - var(--footer-height)));
    overflow: hidden;
    background: #090d17;
}

.hangar-backdrop,
.hangar-backdrop::before,
.hangar-backdrop::after {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hangar-backdrop {
    z-index: -1;
    background: radial-gradient(circle at 75% 50%, #121a29, #090d17 70%);
}

.hangar-backdrop::before {
    content: "";
    left: auto;
    width: min(81%, 1500px);
    background-image: url("../assets/hangar-drone.webp");
    background-repeat: no-repeat;
    background-position: right 49%;
    background-size: cover;
    opacity: 0.94;
}

.hangar-backdrop::after {
    content: "";
    background:
        linear-gradient(90deg,
            #090d17 0%,
            rgba(9, 13, 23, 0.97) 19%,
            rgba(9, 13, 23, 0.73) 33%,
            rgba(9, 13, 23, 0.16) 53%,
            rgba(9, 13, 23, 0.04) 100%),
        linear-gradient(0deg,
            rgba(9, 13, 23, 0.96) 0%,
            rgba(9, 13, 23, 0.42) 13%,
            transparent 38%),
        linear-gradient(180deg, rgba(9, 13, 23, 0.04) 30%, rgba(9, 13, 23, 0.2) 100%);
}

.hero--home {
    align-items: center;
    padding: 62px var(--page-padding) 96px;
}

.hero-content {
    position: relative;
    z-index: 1;
    width: min(100%, 590px);
    margin-right: auto;
    top: 20px;
}

.eyebrow {
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.065em;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 0 0 32px;
}

.accent-line {
    display: inline-block;
    width: 24px;
    height: 2px;
    background: #6159ff;
}

.hero-title {
    margin: 0;
    font-size: clamp(52px, 4.2vw, 83px);
    font-weight: 900;
    line-height: 0.985;
    letter-spacing: -0.018em;
    text-transform: uppercase;
    width: 125%;
    transform: scaleX(0.8);
    transform-origin: left center;
}

.hero-description {
    margin: 25px 0 44px;
    color: var(--muted);
    font-size: clamp(18px, 1.22vw, 23px);
    font-weight: 400;
    line-height: 1.55;
}

.hero-actions {
    display: grid;
    gap: 15px;
    width: min(100%, 500px);
}

.action-card {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 102px;
    padding: 18px 23px;
    border: 1px solid #323d58;
    border-radius: 7px;
    background: rgba(15, 20, 35, 0.83);
    color: var(--text);
    transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.action-card:hover {
    border-color: #7779ba;
    background: #1b2139;
    transform: translateX(4px);
}

.action-card--primary {
    border-color: #6e64f5;
    background: #4941d9;
}

.action-card--primary:hover {
    border-color: #a8a4ff;
    background: var(--accent-hover);
}

.action-icon {
    display: block;
    width: 32px;
    height: 32px;
    margin-right: 22px;
    flex: 0 0 auto;
    fill: none;
    stroke: #aebde2;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wrench-icon {
    fill: #aebde2;
    stroke: none;
}

.action-copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.action-copy strong {
    font-size: 27px;
    font-weight: 700;
    line-height: 1.18;
}

.action-copy small {
    color: var(--subtle);
    font-size: 18px;
    font-weight: 400;
}

.action-card--primary .action-copy small {
    color: #bac3ff;
}

.action-arrow {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    fill: none;
    stroke: #aebde2;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.system-status {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 26px 0 0;
    color: var(--subtle);
    font-size: 16px;
}

.status-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #a5a1ff;
}

.hangar-number {
    position: absolute;
    top: 53px;
    right: 8.2%;
    display: flex;
    align-items: center;
    gap: 13px;
    color: #8799b8;
    font-size: 12px;
    letter-spacing: 0.1em;
    opacity: 0.8;
}

.hangar-number span {
    width: 33px;
    height: 1px;
    background: #8799b8;
}

.drone-info {
    position: absolute;
    right: clamp(52px, 7.8vw, 150px);
    bottom: 29px;
    z-index: 1;
    min-width: 375px;
    color: var(--text);
}

.drone-category {
    margin: 0 0 1px;
    padding-left: 14px;
    color: #8294b7;
    font-size: 10px;
    letter-spacing: 0.04em;
}

.drone-info h2 {
    margin: 0 0 21px;
    padding-left: 12px;
    border-left: 3px solid #635bff;
    font-size: 23px;
    font-weight: 600;
}

.drone-specs {
    display: grid;
    grid-template-columns: 72px 114px 82px;
    gap: 10px;
    border-top: 1px solid #30384a;
    padding-top: 17px;
}

.drone-specs > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.drone-specs strong {
    color: #a6b5d3;
    font-size: 21px;
    font-weight: 400;
}

.drone-specs span {
    color: #8294b7;
    font-size: 14px;
}

.status-footer {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    flex: 0 0 var(--footer-height);
    min-height: var(--footer-height);
    padding: 0 2.5%;
    border-top: 1px solid #20283a;
    background: #0a0e18;
    color: var(--subtle);
}

.footer-controls {
    display: flex;
    align-items: center;
    gap: 26px;
}

.footer-control {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border: 0;
    background: none;
    color: var(--subtle);
    font-size: 16px;
    white-space: nowrap;
}

.footer-control:hover {
    color: #d1dafa;
}

.footer-control .icon {
    width: 20px;
    height: 20px;
}

.muted-stroke {
    display: none;
}

.is-muted .muted-stroke {
    display: block;
}

.footer-separator {
    height: 19px;
    border-left: 1px solid #253049;
}

.footer-quote {
    margin: 0;
    font-size: 15px;
    font-style: italic;
    white-space: nowrap;
}

.version {
    justify-self: end;
    font-size: 11px;
    letter-spacing: 0.065em;
    white-space: nowrap;
}

/* Дополнительные страницы доступны через главное меню. */

.hero--subpage {
    align-items: center;
    padding: 90px var(--page-padding);
}

.hero--subpage .hangar-backdrop::before {
    opacity: 0.43;
}

.hero--subpage .hangar-backdrop::after {
    background: linear-gradient(90deg, #090d17 0%, rgba(9, 13, 23, 0.82) 57%, rgba(9, 13, 23, 0.45) 100%);
}

.subpage-inner {
    position: relative;
    z-index: 1;
    width: min(100%, 850px);
}

.subpage-inner .hero-title {
    font-size: clamp(48px, 4vw, 76px);
}

.subpage-inner .hero-description {
    margin-bottom: 35px;
}

.feature-panel {
    width: min(100%, 650px);
    padding: 29px 32px;
    border: 1px solid #36415d;
    border-radius: 8px;
    background: rgba(13, 18, 32, 0.92);
    backdrop-filter: blur(8px);
}

.feature-panel-label {
    color: var(--accent-light);
    font-size: 12px;
    letter-spacing: 0.1em;
}

.feature-panel h2 {
    margin: 15px 0 9px;
    font-size: 29px;
}

.feature-panel p {
    color: var(--muted);
    font-size: 17px;
    line-height: 1.55;
}

.feature-panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 27px;
}

.compact-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 47px;
    padding: 11px 17px;
    border: 1px solid #465372;
    border-radius: 5px;
    background: #171e31;
    color: #e2e8fa;
    font-size: 16px;
    transition: background-color 150ms ease;
}

.compact-button:hover {
    background: #2a3350;
}

.compact-button--primary {
    border-color: #6a64e6;
    background: var(--accent);
}

.compact-button--primary:hover {
    background: var(--accent-hover);
}

.field-label {
    display: block;
    margin: 22px 0 9px;
    color: var(--muted);
    font-size: 16px;
}

.builder-select {
    width: 100%;
    max-width: 450px;
    min-height: 49px;
    padding: 10px 15px;
    border: 1px solid #485470;
    border-radius: 5px;
    background: #151d2e;
    color: var(--text);
    font-size: 17px;
}

.builder-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    max-width: 450px;
    margin: 24px 0;
}

.builder-stats > div {
    display: grid;
    gap: 9px;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: #111829;
}

.builder-stats small {
    color: var(--subtle);
    font-size: 13px;
}

.builder-stats strong {
    font-size: 20px;
    font-weight: 600;
}

.builder-message {
    min-height: 24px;
    margin-bottom: 0;
    font-size: 14px !important;
}

.back-link {
    display: inline-block;
    margin-top: 12px;
    color: var(--muted);
    font-size: 15px;
}

.back-link:hover {
    color: white;
}

/* Модальное окно настроек. */

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(2, 5, 11, 0.8);
    backdrop-filter: blur(8px);
}

.settings-dialog {
    width: min(100%, 520px);
    padding: 30px;
    border: 1px solid #46516d;
    border-radius: 11px;
    background: #111827;
    box-shadow: 0 22px 90px rgba(0, 0, 0, 0.55);
}

.dialog-header {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 23px;
}

.dialog-header .eyebrow {
    margin: 0 0 8px;
    color: var(--accent-light);
}

.dialog-header h2 {
    margin: 0;
    font-size: 33px;
}

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 37px;
    height: 37px;
    border: 1px solid #38445d;
    border-radius: 6px;
    background: #1a2234;
    color: var(--text);
}

.icon-button:hover {
    background: #303950;
}

.setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 19px 0;
    border-top: 1px solid var(--line);
    cursor: pointer;
}

.setting-row strong,
.setting-row small {
    display: block;
}

.setting-row strong {
    margin-bottom: 6px;
    font-size: 17px;
}

.setting-row small {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.4;
}

.switch-input {
    position: relative;
    appearance: none;
    width: 46px;
    height: 25px;
    flex: 0 0 auto;
    border: 1px solid #586277;
    border-radius: 30px;
    background: #343b4c;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.switch-input::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #d9e1f1;
    transition: transform 150ms ease;
}

.switch-input:checked {
    border-color: #8884ff;
    background: var(--accent);
}

.switch-input:checked::before {
    transform: translateX(21px);
}

.setting-volume-row {
    padding: 16px 0 20px;
    border-top: 1px solid var(--line);
}

.setting-volume-heading,
.setting-volume-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.setting-volume-heading {
    margin-bottom: 12px;
    font-size: 15px;
    font-weight: 600;
}

#setting-volume-value {
    min-width: 44px;
    color: var(--accent-light);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

#setting-sound-volume {
    min-width: 0;
    flex: 1;
    accent-color: #7772ff;
    cursor: pointer;
}

#setting-sound-volume:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.sound-preview-button {
    flex: 0 0 auto;
    padding: 10px 12px;
    border: 1px solid #515e86;
    border-radius: 6px;
    background: #222c46;
    color: #d9e3ff;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.sound-preview-button:hover:not(:disabled) {
    background: #354270;
}

.sound-preview-button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.dialog-save-button {
    width: 100%;
    min-height: 48px;
    margin-top: 19px;
    border: 1px solid #7772ff;
    border-radius: 5px;
    background: var(--accent);
    color: white;
    font-size: 18px;
    font-weight: 600;
}

.dialog-save-button:hover {
    background: var(--accent-hover);
}

body.modal-open {
    overflow: hidden;
}

body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* Компактные экраны: основные действия остаются на виду. */

@media (max-width: 1100px) {
    .hero--home {
        padding-top: 95px;
        padding-bottom: 240px;
    }

    .hangar-backdrop::before {
        width: 100%;
        background-position: 65% center;
        opacity: 0.63;
    }

    .hangar-backdrop::after {
        background:
            linear-gradient(90deg, #090d17 0%, rgba(9, 13, 23, 0.94) 38%, rgba(9, 13, 23, 0.3) 100%),
            linear-gradient(0deg, #090d17 0%, transparent 38%);
    }

    .hero-content {
        width: min(100%, 530px);
    }

    .drone-info {
        right: var(--page-padding);
        bottom: 30px;
    }

    .hero-title {
        font-size: clamp(50px, 6vw, 70px);
    }
}

@media (max-width: 700px) {
    :root {
        --header-height: 74px;
        --footer-height: 92px;
        --page-padding: 22px;
    }

    .topbar {
        padding: 0 20px;
        gap: 8px;
    }

    .brand {
        gap: 9px;
        font-size: 19px;
        letter-spacing: 0;
    }

    .brand-symbol {
        width: 36px;
        height: 30px;
    }

    .account-controls {
        gap: 7px;
    }

    .balance-button {
        min-width: auto;
        height: 41px;
        gap: 5px;
        padding: 0 8px;
        font-size: 15px;
    }

    .balance-button .icon {
        width: 15px;
        height: 15px;
    }

    .balance-button-divider {
        display: none;
    }

    .user-button {
        height: 41px;
        gap: 4px;
        font-size: 14px;
    }

    .user-icon {
        display: none;
    }

    .chevron-icon {
        width: 13px;
    }

    .popover {
        width: min(270px, calc(100vw - 30px));
    }

    .hero {
        min-height: calc(100dvh - var(--header-height) - var(--footer-height));
    }

    .hero--home {
        display: block;
        padding: 92px var(--page-padding) 242px;
    }

    .hangar-backdrop::before {
        background-size: auto 85%;
        background-position: 45% top;
        opacity: 0.43;
    }

    .hangar-backdrop::after {
        background:
            linear-gradient(90deg, rgba(9, 13, 23, 0.86), rgba(9, 13, 23, 0.58)),
            linear-gradient(0deg, #090d17 0%, rgba(9, 13, 23, 0.55) 36%, transparent 100%);
    }

    .hangar-number {
        top: 26px;
        right: 22px;
        font-size: 10px;
    }

    .hero-title {
        font-size: clamp(41px, 10vw, 61px);
    }

    .breadcrumb {
        margin-bottom: 27px;
        font-size: 11px;
    }

    .hero-description {
        margin: 25px 0 32px;
        font-size: 18px;
    }

    .desktop-break {
        display: none;
    }

    .hero-actions {
        gap: 12px;
    }

    .action-card {
        min-height: 86px;
        padding: 14px 16px;
    }

    .action-icon {
        width: 26px;
        height: 26px;
        margin-right: 13px;
    }

    .action-copy strong {
        font-size: 23px;
    }

    .action-copy small {
        font-size: 15px;
    }

    .system-status {
        font-size: 14px;
    }

    .drone-info {
        right: auto;
        bottom: 29px;
        left: var(--page-padding);
        min-width: 0;
        width: calc(100% - 2 * var(--page-padding));
    }

    .drone-info h2 {
        font-size: 20px;
    }

    .drone-specs {
        grid-template-columns: 1fr 1.35fr 1fr;
    }

    .drone-specs strong {
        font-size: 18px;
    }

    .drone-specs span {
        font-size: 12px;
    }

    .status-footer {
        grid-template-columns: 1fr auto;
        padding: 0 20px;
        gap: 5px;
    }

    .footer-controls {
        gap: 12px;
    }

    .footer-control {
        gap: 6px;
        font-size: 13px;
    }

    .footer-control .icon {
        width: 17px;
        height: 17px;
    }

    .footer-separator {
        height: 14px;
    }

    .footer-quote {
        display: none;
    }

    .version {
        font-size: 9px;
    }

    .hero--subpage {
        padding: 70px 22px;
    }

    .feature-panel {
        padding: 22px 18px;
    }

    .feature-panel h2 {
        font-size: 24px;
    }

    .feature-panel p {
        font-size: 15px;
    }

    .builder-stats {
        gap: 7px;
    }

    .builder-stats > div {
        padding: 11px 8px;
    }

    .builder-stats strong {
        font-size: 15px;
    }

    .settings-dialog {
        padding: 22px;
    }
}

@media (max-width: 380px) {
    .brand {
        font-size: 16px;
    }

    .brand-symbol {
        width: 30px;
    }

    .hero-title {
        font-size: 38px;
    }

    .version {
        display: none;
    }

    .status-footer {
        display: flex;
        justify-content: center;
    }
}


/* SKYCRAFT 0.6 — живой GLB-ангар в главном меню. */
.hero--home { background: #0a0f19; }
.home-three-stage {
    position: absolute;
    inset: 0 0 0 31%;
    overflow: hidden;
    z-index: 0;
    background: radial-gradient(ellipse at 55% 45%, #25364e, #0a0f19 80%);
}
.home-drone-canvas {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: grab;
    touch-action: pan-y;
}
.home-drone-canvas:active { cursor: grabbing; }
.home-three-overlay {
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, #090d17 0%, rgba(9,13,23,.70) 11%, transparent 39%),
        linear-gradient(0deg, #090d17 0%, rgba(9,13,23,.25) 21%, transparent 46%),
        linear-gradient(180deg, rgba(9,13,23,.05) 55%, rgba(9,13,23,.25) 100%);
}
.home-3d-status, .home-view-hint {
    position: absolute;
    z-index: 2;
    right: 7%;
    color: #a4b5d0;
    font-size: 12px;
    letter-spacing: .03em;
    pointer-events: none;
    text-align: right;
}
.home-3d-status { top: 86px; }
.home-3d-status[data-error="true"] { color: #ff9b9b; }
.home-3d-status[data-loaded="true"] { display: none; }
.home-view-hint { bottom: 166px; opacity: .72; }
.home-view-hint span { color: #a5a1ff; font-size: 20px; vertical-align: middle; }
.hero--home .hero-content { z-index: 2; pointer-events: none; }
.hero--home .hero-actions, .hero--home .hero-actions a { pointer-events: auto; }
.hero--home .drone-info { z-index: 2; pointer-events: none; }
.hero--home .hangar-number { z-index: 2; }
@media (max-width: 1100px) {
    .home-three-stage { left: 21%; }
    .home-three-overlay {
        background:
            linear-gradient(90deg, #090d17 0%, rgba(9,13,23,.68) 18%, transparent 90%),
            linear-gradient(0deg, #090d17 0%, rgba(9,13,23,.48) 30%, transparent 74%);
    }
    .home-view-hint { bottom: 160px; }
}
@media (max-width: 700px) {
    .home-three-stage { inset: 165px 0 158px 0; opacity: .83; }
    .home-view-hint { bottom: 10px; right: 20px; font-size: 10px; }
    .home-3d-status { top: 12px; right: 20px; }
    .home-three-overlay {
        background:
            linear-gradient(180deg, #090d17 0%, rgba(9,13,23,.66) 19%, transparent 48%, #090d17 100%),
            linear-gradient(90deg, rgba(9,13,23,.55), transparent 75%);
    }
    .hero--home .hero-content { position: relative; }
}