:root {
    --landing-orange: #f4511e;
    --landing-orange-2: #ff7a3d;
    --landing-coral: #ff4667;
    --landing-ink: #10233f;
    --landing-ink-2: #1d3555;
    --landing-muted: #65758a;
    --landing-line: #e6ebf2;
    --landing-bg: #f7f9fc;
    --landing-white: #fff;
    --landing-shadow: 0 24px 70px rgba(16, 35, 63, .14);
    --landing-radius: 24px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body.landing-body {
    margin: 0;
    min-width: 320px;
    color: var(--landing-ink);
    background: var(--landing-white);
    font-family: "Aptos", "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

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

.landing-body a {
    color: inherit;
    text-decoration: none;
}

.landing-body svg {
    width: 1.15em;
    height: 1.15em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.landing-body h1,
.landing-body h2,
.landing-body h3,
.landing-body p {
    margin-top: 0;
}

.landing-body h1,
.landing-body h2,
.landing-body h3,
.landing-brand strong,
.landing-primary,
.landing-login {
    font-family: "Bahnschrift", "Aptos Display", sans-serif;
}

.landing-skip {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 1000;
    padding: 10px 16px;
    color: #fff !important;
    background: var(--landing-orange);
    border-radius: 8px;
    transform: translateY(-160%);
    transition: transform .2s ease;
}

.landing-skip:focus {
    transform: translateY(0);
}

.landing-header {
    position: fixed;
    inset: 38px 0 auto;
    z-index: 100;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    transition: background .25s ease, box-shadow .25s ease, color .25s ease;
}

.landing-header.is-scrolled {
    color: var(--landing-ink);
    background: rgba(255, 255, 255, .94);
    border-bottom-color: var(--landing-line);
    box-shadow: 0 10px 35px rgba(16, 35, 63, .08);
    backdrop-filter: blur(16px);
}

.landing-nav {
    width: min(1200px, calc(100% - 48px));
    height: 78px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.landing-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    flex: 0 0 auto;
}

.landing-brand > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(145deg, var(--landing-orange-2), var(--landing-orange));
    border-radius: 13px;
    box-shadow: 0 8px 22px rgba(244, 81, 30, .28);
    font: 800 24px/1 "Bahnschrift", sans-serif;
}

.landing-brand div {
    display: grid;
    line-height: 1;
}

.landing-brand strong {
    font-size: 18px;
    letter-spacing: .08em;
}

.landing-brand small {
    margin-top: 5px;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .19em;
    opacity: .68;
}

.landing-nav nav {
    display: flex;
    align-items: center;
    gap: 34px;
    font-size: 14px;
    font-weight: 700;
}

.landing-nav nav a {
    position: relative;
    padding: 26px 0;
}

.landing-nav nav a::after {
    content: "";
    position: absolute;
    right: 50%;
    bottom: 20px;
    left: 50%;
    height: 2px;
    background: var(--landing-orange);
    transition: left .2s ease, right .2s ease;
}

.landing-nav nav a:hover::after,
.landing-nav nav a:focus-visible::after {
    right: 0;
    left: 0;
}

.landing-login,
.landing-primary,
.landing-secondary,
.landing-price-card a {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: 12px;
    font-weight: 700;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.landing-login {
    padding: 0 18px;
    color: #fff !important;
    background: var(--landing-orange);
    box-shadow: 0 9px 24px rgba(244, 81, 30, .25);
}

.landing-login:hover,
.landing-primary:hover,
.landing-price-card a:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(244, 81, 30, .34);
}

.landing-offer {
    position: fixed;
    inset: 0 0 auto;
    z-index: 110;
    min-height: 38px;
    padding: 8px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #fff;
    background: #08182f;
    font-size: 11px;
    letter-spacing: .08em;
}

.landing-offer > span {
    width: 7px;
    height: 7px;
    background: #5ee58b;
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(94, 229, 139, .14);
    animation: landing-pulse 1.8s infinite;
}

.landing-offer a {
    color: #ff936c;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.landing-hero {
    position: relative;
    min-height: 850px;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 80% 34%, rgba(244, 81, 30, .21), transparent 30%),
        radial-gradient(circle at 12% 85%, rgba(30, 111, 244, .14), transparent 31%),
        linear-gradient(125deg, #08172d 0%, #102743 55%, #07172d 100%);
}

.landing-grid-lines {
    position: absolute;
    inset: 0;
    opacity: .08;
    background-image: linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}

.landing-hero-inner {
    position: relative;
    z-index: 2;
    width: min(1200px, calc(100% - 48px));
    min-height: 790px;
    margin: auto;
    padding: 128px 0 78px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(430px, .92fr);
    align-items: center;
    gap: 58px;
}

.landing-copy {
    position: relative;
    z-index: 5;
}

.landing-eyebrow,
.landing-kicker,
.landing-section-head > span,
.landing-pricing > div:first-child > span {
    color: var(--landing-orange);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
}

.landing-eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #ff9c77;
}

.landing-eyebrow i {
    width: 24px;
    height: 2px;
    background: var(--landing-orange);
}

.landing-copy h1 {
    max-width: 720px;
    margin: 24px 0;
    font-size: clamp(47px, 5.25vw, 76px);
    line-height: .99;
    letter-spacing: -.045em;
}

.landing-copy h1 span {
    color: transparent;
    background: linear-gradient(100deg, #ff8e63, #ff4e35);
    -webkit-background-clip: text;
    background-clip: text;
}

.landing-copy > p {
    max-width: 610px;
    margin-bottom: 31px;
    color: #b9c6d7;
    font-size: 17px;
}

.landing-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.landing-primary {
    min-height: 56px;
    padding: 0 24px;
    color: #fff !important;
    background: linear-gradient(135deg, var(--landing-orange-2), var(--landing-orange));
    box-shadow: 0 15px 38px rgba(244, 81, 30, .26);
}

.landing-primary svg {
    fill: currentColor;
    stroke: none;
}

.landing-secondary {
    min-height: 56px;
    padding: 0 22px;
    color: #d9e3ef !important;
    border: 1px solid rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .05);
}

.landing-secondary:hover {
    background: rgba(255, 255, 255, .1);
}

.landing-trust {
    margin-top: 34px;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    color: #8498b1;
    font-size: 12px;
    font-weight: 700;
}

.landing-trust span {
    display: flex;
    align-items: center;
    gap: 7px;
}

.landing-trust svg {
    color: #ff8358;
}

.landing-visual {
    position: relative;
    min-height: 590px;
    isolation: isolate;
}

.landing-orbit {
    position: absolute;
    z-index: -1;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
}

.orbit-one {
    inset: 2% -10% 0 0;
    animation: landing-spin 28s linear infinite;
}

.orbit-two {
    inset: 12% 0 12% 10%;
    border-style: dashed;
    animation: landing-spin 22s linear infinite reverse;
}

.landing-phone {
    position: absolute;
    margin: 0;
    overflow: hidden;
    background: #111;
    border: 7px solid #f3f5f7;
    border-radius: 31px;
    box-shadow: 0 42px 80px rgba(0, 0, 0, .48), inset 0 0 0 1px #aeb6c1;
}

.landing-phone::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: 7px;
    left: 50%;
    width: 50px;
    height: 5px;
    background: rgba(0,0,0,.55);
    border-radius: 9px;
    transform: translateX(-50%);
}

.landing-phone img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.landing-phone-back {
    width: 222px;
    aspect-ratio: 853 / 1844;
    top: 59px;
    left: 22px;
    opacity: .83;
    transform: rotate(-8deg);
}

.landing-phone-front {
    z-index: 3;
    width: 278px;
    aspect-ratio: 900 / 1599;
    top: 14px;
    right: 16px;
    transform: rotate(4deg);
}

.landing-phone-front figcaption {
    position: absolute;
    right: 10px;
    bottom: 10px;
    left: 10px;
    padding: 8px 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #fff;
    background: rgba(9, 21, 37, .74);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 9px;
    backdrop-filter: blur(8px);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
}

.landing-phone-front figcaption i,
.console-preview > span i,
.media-status > i {
    width: 7px;
    height: 7px;
    background: #46df7b;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(70, 223, 123, .15);
}

.landing-metric,
.landing-product-pop {
    position: absolute;
    z-index: 7;
    color: var(--landing-ink);
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(255,255,255,.8);
    box-shadow: 0 18px 45px rgba(0,0,0,.22);
    backdrop-filter: blur(14px);
}

.landing-metric {
    min-width: 120px;
    padding: 13px 15px;
    display: grid;
    border-radius: 15px;
}

.landing-metric span,
.landing-product-pop small {
    color: #8592a3;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .1em;
}

.landing-metric strong {
    font: 800 25px/1.15 "Bahnschrift", sans-serif;
}

.landing-metric small {
    color: #39ad64;
    font-size: 9px;
    font-weight: 800;
}

.metric-health {
    top: 46px;
    left: -18px;
    animation: landing-float 5s ease-in-out infinite;
}

.metric-shops {
    right: -21px;
    bottom: 112px;
    animation: landing-float 5.8s ease-in-out .6s infinite;
}

.landing-product-pop {
    left: -24px;
    bottom: 52px;
    min-width: 230px;
    padding: 13px;
    display: flex;
    align-items: center;
    gap: 11px;
    border-radius: 16px;
    animation: landing-float 6.2s ease-in-out 1s infinite;
}

.landing-product-pop > span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: #fff;
    background: var(--landing-orange);
    border-radius: 11px;
}

.landing-product-pop div {
    display: grid;
}

.landing-product-pop strong {
    font-size: 12px;
}

.landing-reactions {
    position: absolute;
    z-index: 8;
    right: -4px;
    bottom: 28px;
    width: 110px;
    height: 390px;
    overflow: hidden;
    pointer-events: none;
}

.landing-reaction {
    --reaction-x: 0px;
    position: absolute;
    bottom: -45px;
    left: var(--reaction-left, 40px);
    width: var(--reaction-size, 28px);
    height: var(--reaction-size, 28px);
    color: var(--reaction-color, #ff4667);
    filter: drop-shadow(0 7px 9px rgba(0,0,0,.25));
    animation: landing-reaction-rise var(--reaction-duration, 3.8s) cubic-bezier(.2,.64,.28,1) forwards;
}

.landing-reaction svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
    stroke: #fff;
    stroke-width: 1.3;
}

.landing-platform-strip {
    position: relative;
    z-index: 4;
    min-height: 60px;
    padding: 14px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 22px;
    color: #9fafc3;
    background: rgba(5, 16, 31, .75);
    border-top: 1px solid rgba(255,255,255,.08);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .13em;
}

.landing-platform-strip i {
    width: 4px;
    height: 4px;
    background: var(--landing-orange);
    border-radius: 50%;
}

.landing-section {
    width: min(1200px, calc(100% - 48px));
    margin: auto;
    padding: 108px 0;
}

.landing-section-head {
    max-width: 760px;
    margin: 0 auto 53px;
    text-align: center;
}

.landing-section-head h2,
.landing-control-copy h2,
.landing-media-copy h2,
.landing-pricing h2 {
    margin: 13px 0 17px;
    font-size: clamp(35px, 4vw, 52px);
    line-height: 1.08;
    letter-spacing: -.035em;
}

.landing-section-head p,
.landing-control-copy > p,
.landing-media-copy > p {
    color: var(--landing-muted);
}

.landing-feature-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.landing-feature-cards article,
.landing-capability-grid article {
    padding: 29px;
    background: #fff;
    border: 1px solid var(--landing-line);
    border-radius: var(--landing-radius);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.landing-feature-cards article:hover,
.landing-capability-grid article:hover {
    transform: translateY(-7px);
    border-color: rgba(244,81,30,.3);
    box-shadow: var(--landing-shadow);
}

.landing-feature-cards article > span,
.landing-capability-grid article > span,
.landing-mini-grid div > span {
    width: 52px;
    height: 52px;
    margin-bottom: 24px;
    display: grid;
    place-items: center;
    color: var(--landing-orange);
    background: #fff1eb;
    border-radius: 16px;
    font-size: 23px;
}

.landing-feature-cards small {
    color: var(--landing-orange);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
}

.landing-feature-cards h3,
.landing-capability-grid h3 {
    margin: 10px 0 12px;
    font-size: 21px;
    line-height: 1.25;
}

.landing-feature-cards p,
.landing-capability-grid p {
    color: var(--landing-muted);
    font-size: 14px;
}

.landing-feature-cards b {
    color: var(--landing-orange);
    font-size: 12px;
}

.landing-control {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 15% 10%, rgba(244,81,30,.18), transparent 25%),
        linear-gradient(135deg, #0b1b32, #122e4c);
}

.landing-control::after {
    content: "";
    position: absolute;
    width: 480px;
    height: 480px;
    right: -180px;
    bottom: -270px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
    box-shadow: 0 0 0 70px rgba(255,255,255,.025), 0 0 0 140px rgba(255,255,255,.018);
}

.landing-control-inner {
    position: relative;
    z-index: 2;
    width: min(1200px, calc(100% - 48px));
    margin: auto;
    padding: 112px 0;
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    align-items: center;
    gap: 70px;
}

.landing-control-copy > p {
    color: #aebdce;
}

.landing-control-copy ul {
    margin: 30px 0 0;
    padding: 0;
    display: grid;
    gap: 16px;
    list-style: none;
}

.landing-control-copy li {
    display: flex;
    align-items: center;
    gap: 14px;
}

.landing-control-copy li > i {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: #ff8c62;
    background: rgba(244, 81, 30, .12);
    border: 1px solid rgba(244, 81, 30, .25);
    border-radius: 12px;
}

.landing-control-copy li span {
    display: grid;
}

.landing-control-copy li strong {
    font-size: 14px;
}

.landing-control-copy li small {
    color: #879aae;
}

.landing-console {
    overflow: hidden;
    background: #f6f8fb;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 22px;
    box-shadow: 0 40px 80px rgba(0,0,0,.34);
    transform: perspective(1200px) rotateY(-3deg) rotateX(2deg);
}

.landing-console > header {
    min-height: 53px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 15px;
    color: #6f7b8c;
    background: #fff;
    border-bottom: 1px solid #e3e7ed;
    font-size: 9px;
    letter-spacing: .08em;
}

.landing-console > header div {
    display: flex;
    gap: 5px;
}

.landing-console > header div span {
    width: 8px;
    height: 8px;
    background: #ff6a52;
    border-radius: 50%;
}

.landing-console > header div span:nth-child(2) { background: #ffc445; }
.landing-console > header div span:nth-child(3) { background: #4cd67d; }
.landing-console > header strong { color: var(--landing-ink); }
.landing-console > header small { margin-left: auto; color: #21ad56; font-weight: 800; }

.console-grid {
    padding: 16px;
    display: grid;
    grid-template-columns: 1.4fr .78fr;
    gap: 12px;
}

.console-preview {
    position: relative;
    height: 330px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: #7f2415;
    border-radius: 15px;
    isolation: isolate;
}

.console-preview::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -24px;
    background: linear-gradient(rgba(65, 18, 12, .32), rgba(65, 18, 12, .48)), url('/assets/landing-live-orange.webp') center / cover no-repeat;
    filter: blur(18px);
    transform: scale(1.08);
}

.console-preview img {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 12px 25px rgba(38, 9, 5, .3));
}

.console-preview > span {
    position: absolute;
    z-index: 2;
    top: 10px;
    left: 10px;
    padding: 6px 9px;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #fff;
    background: rgba(7,18,32,.75);
    border-radius: 7px;
    font-size: 8px;
    font-weight: 800;
}

.console-side {
    display: grid;
    gap: 9px;
}

.console-side > div,
.console-chart {
    padding: 14px;
    display: grid;
    color: var(--landing-ink);
    background: #fff;
    border: 1px solid #e6eaf0;
    border-radius: 13px;
}

.console-side small,
.console-chart > span {
    color: #8793a3;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .09em;
}

.console-side strong {
    font: 800 27px/1.2 "Bahnschrift", sans-serif;
}

.console-side em {
    color: #31ad5f;
    font-size: 9px;
    font-style: normal;
}

.console-chart {
    grid-column: 1 / -1;
}

.console-chart > div {
    height: 60px;
    margin-top: 12px;
    display: flex;
    align-items: end;
    gap: 8px;
}

.console-chart i {
    width: 100%;
    height: var(--h);
    background: linear-gradient(to top, var(--landing-orange), #ff9d72);
    border-radius: 4px 4px 1px 1px;
}

.landing-media {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    align-items: center;
    gap: 90px;
}

.landing-media-visual {
    position: relative;
    min-height: 590px;
}

.landing-media-visual::before {
    content: "";
    position: absolute;
    inset: 11% -8% 4% 9%;
    background: linear-gradient(135deg, #fff0e9, #ffd9ce);
    border-radius: 49% 51% 38% 62% / 53% 33% 67% 47%;
}

.landing-media-visual figure {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 50%;
    width: 280px;
    aspect-ratio: 900 / 1599;
    margin: 0;
    overflow: hidden;
    border: 8px solid #fff;
    border-radius: 28px;
    box-shadow: var(--landing-shadow);
    transform: translateX(-50%) rotate(-3deg);
}

.landing-media-visual figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-script,
.media-status {
    position: absolute;
    z-index: 4;
    padding: 14px 16px;
    background: rgba(255,255,255,.95);
    border: 1px solid #fff;
    border-radius: 15px;
    box-shadow: 0 18px 45px rgba(16,35,63,.18);
}

.media-script {
    top: 110px;
    left: 0;
    display: grid;
}

.media-script small,
.media-status small {
    color: var(--landing-orange);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .1em;
}

.media-script strong { font-size: 14px; }
.media-script p { margin: 2px 0 0; color: var(--landing-muted); font-size: 10px; }

.media-status {
    right: -8px;
    bottom: 54px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.media-status span { display: grid; }
.media-status strong { font-size: 12px; }

.landing-media-copy > p {
    max-width: 610px;
    font-size: 16px;
}

.landing-mini-grid {
    margin-top: 32px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.landing-mini-grid > div {
    padding: 17px;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 12px;
    border: 1px solid var(--landing-line);
    border-radius: 15px;
}

.landing-mini-grid div > span {
    width: 40px;
    height: 40px;
    margin: 0;
    grid-row: 1 / 3;
    border-radius: 12px;
    font-size: 18px;
}

.landing-mini-grid strong { font-size: 13px; }
.landing-mini-grid small { color: var(--landing-muted); font-size: 10px; }

.landing-capabilities {
    padding-top: 80px;
}

.landing-capability-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.landing-capability-grid article {
    padding: 24px;
}

.landing-capability-grid article > span {
    width: 46px;
    height: 46px;
    margin-bottom: 18px;
    border-radius: 14px;
    font-size: 20px;
}

.landing-capability-grid h3 { font-size: 17px; }

.landing-pricing {
    width: min(1200px, calc(100% - 48px));
    margin: 0 auto 80px;
    padding: 62px;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: 56px;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 90% 10%, rgba(255,255,255,.13), transparent 30%),
        linear-gradient(125deg, #f4511e, #ff7043);
    border-radius: 30px;
    box-shadow: 0 30px 70px rgba(244,81,30,.22);
}

.landing-pricing > div:first-child > span { color: #ffe1d5; }
.landing-pricing h2 { margin-bottom: 0; }

.landing-price-card {
    padding: 25px;
    color: var(--landing-ink);
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 24px 50px rgba(121,43,18,.19);
}

.landing-price-card > small {
    color: var(--landing-orange);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
}

.landing-price-card > strong {
    margin-top: 5px;
    display: block;
    font: 700 23px/1.25 "Bahnschrift", sans-serif;
}

.landing-price-card p {
    margin: 10px 0 18px;
    color: var(--landing-muted);
    font-size: 13px;
}

.landing-price-card a {
    min-height: 48px;
    width: 100%;
    color: #fff;
    background: var(--landing-ink);
}

.landing-footer {
    min-height: 190px;
    padding: 50px max(24px, calc((100% - 1200px) / 2));
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 65px;
    color: #aeb9c7;
    background: #09192f;
}

.landing-footer .landing-brand { color: #fff; }
.landing-footer p { max-width: 560px; margin: 0; font-size: 13px; }

.landing-footer-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.landing-zalo-contact {
    min-height: 54px;
    padding: 7px 14px 7px 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 15px;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.landing-zalo-contact > span:first-child {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: #fff;
    background: #0877e8;
    border-radius: 11px;
}

.landing-zalo-contact svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.landing-zalo-contact > span:last-child {
    display: grid;
    gap: 2px;
    white-space: nowrap;
}

.landing-zalo-contact small {
    color: #aeb9c7;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .11em;
}

.landing-zalo-contact strong {
    color: #fff;
    font-size: 14px;
    letter-spacing: .02em;
}

.landing-zalo-contact:hover {
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .26);
    transform: translateY(-2px);
}

.landing-footer-login {
    min-height: 46px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    color: #ff8a61;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

[data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s ease, transform .7s ease;
}

[data-reveal-delay="1"] { transition-delay: .12s; }
[data-reveal-delay="2"] { transition-delay: .24s; }

[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

.landing-body :focus-visible {
    outline: 3px solid #ffb295;
    outline-offset: 3px;
}

@keyframes landing-pulse {
    50% { box-shadow: 0 0 0 8px rgba(94, 229, 139, 0); }
}

@keyframes landing-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-11px); }
}

@keyframes landing-spin {
    to { transform: rotate(360deg); }
}

@keyframes landing-reaction-rise {
    0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-9deg) scale(.65); }
    12% { opacity: 1; }
    58% { transform: translate3d(var(--reaction-x), -210px, 0) rotate(8deg) scale(1); }
    100% { opacity: 0; transform: translate3d(calc(var(--reaction-x) * -.55), -410px, 0) rotate(-5deg) scale(.82); }
}

@media (max-width: 1100px) {
    .landing-nav nav { display: none; }
    .landing-hero-inner { grid-template-columns: minmax(0, 1fr) 430px; gap: 25px; }
    .landing-copy h1 { font-size: clamp(45px, 6vw, 63px); }
    .landing-phone-back { left: 0; }
    .landing-phone-front { right: 0; }
    .metric-health { left: -8px; }
    .metric-shops { right: -10px; }
    .landing-control-inner { gap: 40px; }
    .landing-capability-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 850px) {
    .landing-hero { min-height: auto; }
    .landing-hero-inner { padding-top: 145px; grid-template-columns: minmax(0, 1fr); text-align: center; }
    .landing-copy > p { margin-right: auto; margin-left: auto; }
    .landing-eyebrow, .landing-actions, .landing-trust { justify-content: center; }
    .landing-visual { width: min(520px, 100%); margin: 0 auto; min-height: 570px; }
    .landing-feature-cards { grid-template-columns: 1fr; }
    .landing-control-inner, .landing-media { grid-template-columns: minmax(0, 1fr); }
    .landing-control-copy { text-align: center; }
    .landing-control-copy li { max-width: 520px; margin: auto; text-align: left; }
    .landing-console { width: min(620px, 100%); margin: auto; transform: none; }
    .landing-media { gap: 45px; }
    .landing-media-visual { width: min(500px, 100%); margin: auto; }
    .landing-media-copy { text-align: center; }
    .landing-media-copy > p { margin-right: auto; margin-left: auto; }
    .landing-mini-grid { text-align: left; }
    .landing-pricing { grid-template-columns: 1fr; text-align: center; }
    .landing-price-card { text-align: left; }
    .landing-footer { grid-template-columns: 1fr; gap: 20px; text-align: center; }
    .landing-footer .landing-brand { justify-self: center; }
    .landing-footer p { margin: auto; }
    .landing-footer-actions { justify-content: center; }
}

@media (max-width: 600px) {
    .landing-header { top: 36px; }
    .landing-nav { width: calc(100% - 28px); height: 66px; }
    .landing-brand > span { width: 38px; height: 38px; border-radius: 11px; }
    .landing-brand strong { font-size: 16px; }
    .landing-brand small { font-size: 7px; }
    .landing-login { min-height: 42px; padding: 0 13px; font-size: 12px; }
    .landing-login span { display: none; }
    .landing-offer { min-height: 36px; gap: 8px; padding: 7px 12px; text-align: center; font-size: 8px; }
    .landing-offer a { display: none; }
    .landing-hero-inner, .landing-section, .landing-control-inner { width: calc(100% - 30px); }
    .landing-hero-inner { padding-top: 125px; }
    .landing-eyebrow { font-size: 9px; letter-spacing: .11em; }
    .landing-copy h1 { margin: 18px 0; font-size: clamp(40px, 12vw, 54px); }
    .landing-copy > p { font-size: 15px; }
    .landing-actions { flex-direction: column; }
    .landing-primary, .landing-secondary { width: 100%; }
    .landing-trust { gap: 11px 15px; font-size: 10px; }
    .landing-visual { min-height: 495px; transform-origin: top center; margin-bottom: -50px; }
    .landing-visual.is-visible { transform: scale(.9); }
    .landing-phone-back { width: 190px; top: 65px; left: 3%; }
    .landing-phone-front { width: 230px; right: 2%; }
    .metric-health { top: 37px; left: 0; }
    .metric-shops { right: 0; bottom: 85px; }
    .landing-product-pop { left: 0; bottom: 28px; min-width: 205px; }
    .landing-reactions { right: 0; }
    .landing-platform-strip { gap: 10px 14px; font-size: 8px; }
    .landing-platform-strip span:nth-of-type(n+4), .landing-platform-strip i:nth-of-type(n+3) { display: none; }
    .landing-section { padding: 78px 0; }
    .landing-section-head { margin-bottom: 35px; }
    .landing-section-head h2, .landing-control-copy h2, .landing-media-copy h2, .landing-pricing h2 { font-size: 35px; }
    .landing-feature-cards article { padding: 24px; }
    .landing-control-inner { padding: 78px 0; }
    .console-grid { grid-template-columns: 1fr; }
    .console-preview { height: 300px; }
    .console-side { grid-template-columns: repeat(3, 1fr); grid-column: 1; }
    .console-side > div { padding: 10px; }
    .console-side strong { font-size: 20px; }
    .console-chart { grid-column: 1; }
    .landing-media-visual { min-height: 540px; }
    .landing-media-visual figure { width: 250px; }
    .media-script { top: 80px; }
    .media-status { right: 0; bottom: 40px; }
    .landing-mini-grid { grid-template-columns: 1fr; }
    .landing-capability-grid { grid-template-columns: 1fr; }
    .landing-pricing { width: calc(100% - 30px); margin-bottom: 50px; padding: 35px 20px; border-radius: 24px; }
    .landing-footer { padding: 45px 24px; }
    .landing-footer-actions { flex-direction: column; }
    .landing-zalo-contact { width: min(100%, 290px); justify-content: flex-start; }
    .landing-footer-login { justify-content: center; }
}

@media (max-width: 420px) {
    .landing-brand small { display: none; }
    .landing-copy h1 { font-size: 37px; }
    .landing-media { overflow: hidden; }
    .landing-visual { left: auto; width: 410px; margin-left: 50%; margin-bottom: -90px; }
    .landing-visual[data-reveal] { transform: translateX(-50%) translateY(22px) scale(.82); }
    .landing-visual[data-reveal].is-visible { transform: translateX(-50%) scale(.82); }
    .landing-media-visual { left: auto; width: 410px; margin-left: 50%; margin-bottom: -55px; }
    .landing-media-visual[data-reveal] { transform: translateX(-50%) translateY(22px) scale(.87); }
    .landing-media-visual[data-reveal].is-visible { transform: translateX(-50%) scale(.87); }
    .console-preview { height: 260px; }
    .console-side { grid-template-columns: 1fr 1fr; }
    .console-side > div:last-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    [data-reveal] { opacity: 1; transform: none; }
    .landing-reactions { display: none; }
}