:root {
    --red: #e51d2a;
    --red-dark: #bd111d;
    --red-soft: #fff0f1;
    --ink: #101114;
    --muted: #6d7078;
    --line: #e5e6ea;
    --panel: #fff;
    --canvas: #f7f7f8;
    --green: #079a73;
    --green-soft: #e9f9f4;
    --violet: #7058ef;
    --violet-soft: #f1efff;
    --shadow: 0 18px 50px rgba(26, 28, 34, .09);
    --radius: 22px
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    min-width: 320px;
    background: var(--canvas);
    color: var(--ink);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased
}

button,
input {
    font: inherit
}

button {
    cursor: pointer
}

.hidden {
    display: none !important
}

.iti {
    width: 100%;
}

.app {
    display: grid;
    grid-template-columns: 276px minmax(0, 1fr);
    min-height: 100vh
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 34px 16px 18px;
    background: #fff;
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    font-size: 22px;
    font-weight: 850;
    letter-spacing: -.04em
}

.brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--red);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 22px;
    font-weight: 900;
    box-shadow: 0 8px 20px rgba(229, 29, 42, .22)
}

.brand small {
    display: block;
    margin-top: -2px;
    color: #92949a;
    font-size: 9px;
    letter-spacing: .08em
}

.progress-label {
    margin: 48px 12px 14px;
    color: #85878d;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .14em
}

.steps {
    display: grid;
    gap: 7px
}

.step {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 11px;
    align-items: center;
    padding: 10px;
    border-radius: 13px;
    color: #7a7d84;
    transition: .25s
}

.step-number {
    width: 32px;
    height: 32px;
    border: 1px solid #d8dae0;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 850
}

.step b {
    display: block;
    font-size: 13px
}

.step small {
    display: block;
    font-size: 10px
}

.step.active {
    background: #fff3f4;
    color: var(--red)
}

.step.active .step-number {
    border-color: var(--red);
    background: var(--red);
    color: #fff
}

.side-note {
    margin-top: auto;
    padding: 14px;
    border: 1px solid #ffd2d6;
    border-radius: 15px;
    background: #fff7f8;
    font-size: 11px;
    color: #66585a
}

.side-note strong {
    display: block;
    margin-bottom: 4px;
    color: var(--red);
    font-size: 12px
}

.content {
    min-width: 0;
    padding: 24px 30px 48px
}

.topbar {
    max-width: 1110px;
    margin: 0 auto 24px;
    padding: 13px 17px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 7px 26px rgba(22, 24, 30, .04)
}

.top-left {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800
}

.top-left .brand-mark {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    font-size: 18px
}

.demo-pill,
.secure-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid #dedfe3;
    border-radius: 999px;
    background: #fafafb;
    color: #60636b;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em
}

.demo-pill i,
.secure-pill i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--red)
}

.main {
    max-width: 1110px;
    margin: 0 auto
}

.view {
    display: none;
    animation: viewIn .42s ease both
}

.view.active {
    display: block
}

@keyframes viewIn {
    from {
        opacity: 0;
        transform: translateY(9px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.hero {
    display: grid;
    grid-template-columns: 1.04fr .96fr;
    gap: 22px;
    align-items: stretch;
    padding-top: 7vh
}

.hero-copy,
.assistant-card,
.form-card,
.company-panel,
.activation,
.analysis,
.result-card,
.contact-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow)
}

.hero-copy {
    padding: 38px;
    background: linear-gradient(145deg, #fff 30%, #fff2f3)
}

.eyebrow {
    margin: 0 0 10px;
    color: var(--red);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase
}

h1,
h2,
h3,
p {
    overflow-wrap: anywhere
}

.hero h1 {
    margin: 0;
    font-size: clamp(34px, 5vw, 58px);
    line-height: .98;
    letter-spacing: -.055em
}

.hero-copy>p:not(.eyebrow) {
    max-width: 580px;
    margin: 19px 0 0;
    color: var(--muted);
    font-size: 16px
}

.money-line {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 27px;
    padding: 14px;
    border-radius: 16px;
    background: #17181b;
    color: #fff
}

.money-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: var(--red);
    display: grid;
    place-items: center;
    font-size: 24px;
    font-weight: 900
}

.money-line b {
    display: block;
    font-size: 15px
}

.money-line span {
    color: #bfc1c6;
    font-size: 12px
}

.assistant-card {
    padding: 29px
}

.assistant-head {
    display: flex;
    align-items: center;
    gap: 12px
}

.ai-icon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background: #121316;
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 900
}

.assistant-head h2 {
    margin: 0;
    font-size: 21px
}

.assistant-head p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 12px
}

.feature-list {
    display: grid;
    gap: 9px;
    margin: 24px 0
}

.feature {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px;
    border: 1px solid #e8e9ed;
    border-radius: 14px;
    background: #fbfbfc
}

.feature span {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: var(--red-soft);
    color: var(--red);
    display: grid;
    place-items: center;
    font-weight: 900
}

.feature b {
    display: block;
    font-size: 13px
}

.feature small {
    display: block;
    color: var(--muted);
    font-size: 10px
}

.primary,
.secondary {
    min-height: 52px;
    border-radius: 14px;
    font-weight: 850;
    transition: .2s
}

.primary {
    width: 100%;
    border: 0;
    background: #111215;
    color: #fff
}

.primary:hover {
    background: var(--red);
    transform: translateY(-1px)
}

.primary:disabled {
    cursor: not-allowed;
    background: #9b9ca0;
    transform: none
}

.secondary {
    padding: 0 20px;
    border: 1px solid #dfe0e4;
    background: #fff;
    color: #53565d
}

.primary:focus-visible,
.secondary:focus-visible,
.choice:focus-visible,
.company:focus-visible,
input:focus-visible {
    outline: 3px solid rgba(229, 29, 42, .2);
    outline-offset: 2px
}

.flow {
    display: grid;
    grid-template-columns: 245px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
    padding-top: 4vh
}

.mini-progress {
    position: sticky;
    top: 94px;
    padding: 19px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff
}

.mini-progress h3 {
    margin: 0 0 15px;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase
}

.mini-steps {
    display: grid;
    gap: 6px
}

.mini-step {
    padding: 10px;
    border-radius: 11px;
    color: #96989e;
    font-size: 12px;
    font-weight: 750
}

.mini-step.active {
    background: var(--red-soft);
    color: var(--red)
}

.form-card {
    padding: 31px
}

.form-card h2,
.company-panel h2,
.activation h2,
.analysis h2,
.result-card h2,
.contact-card h2 {
    margin: 0;
    font-size: 29px;
    line-height: 1.08;
    letter-spacing: -.04em
}

.lead {
    margin: 10px 0 23px;
    color: var(--muted)
}

.field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px
}

.field label {
    display: block;
    margin: 0 0 7px;
    font-size: 12px;
    font-weight: 800
}

.field input {
    width: 100%;
    height: 51px;
    padding: 0 14px;
    border: 1px solid #dfe1e5;
    border-radius: 13px;
    background: #fafafb;
    color: var(--ink)
}

.question {
    margin-top: 20px
}

.question h3 {
    margin: 0 0 10px;
    font-size: 14px
}

.choice-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px
}

.choice {
    min-height: 72px;
    padding: 11px;
    border: 1px solid #e1e2e6;
    border-radius: 13px;
    background: #fff;
    color: #4f5259;
    text-align: left;
    font-size: 12px;
    font-weight: 750
}

.choice.selected {
    border-color: var(--red);
    background: var(--red-soft);
    color: var(--red);
    box-shadow: 0 0 0 2px rgba(229, 29, 42, .08)
}

.actions {
    display: flex;
    gap: 10px;
    margin-top: 23px
}

.actions .primary {
    flex: 1
}

.hint {
    margin-top: 12px;
    text-align: center;
    color: #96999f;
    font-size: 10px
}

.company-layout {
    display: grid;
    grid-template-columns: .72fr 1.28fr;
    gap: 20px;
    padding-top: 4vh
}

.company-intro {
    padding: 31px;
    border-radius: var(--radius);
    background: #151619;
    color: #fff;
    box-shadow: var(--shadow)
}

.company-intro .eyebrow {
    color: #ff7881
}

.company-intro h2 {
    margin: 0;
    font-size: 40px;
    line-height: 1.02;
    letter-spacing: -.05em
}

.company-intro p:last-child {
    color: #c2c4c9
}

.company-panel {
    padding: 25px
}

.selection-callout {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 15px 0;
    padding: 12px;
    border: 1px solid #ffb8bf;
    border-radius: 13px;
    background: var(--red-soft);
    color: #9e111d;
    transition: .25s
}

.selection-callout span {
    width: 29px;
    height: 29px;
    border-radius: 9px;
    background: var(--red);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 900
}

.selection-callout b {
    display: block;
    font-size: 12px
}

.selection-callout small {
    display: block;
    font-size: 10px
}

.selection-callout.done {
    border-color: #9ce1cb;
    background: var(--green-soft);
    color: #08765b
}

.selection-callout.done span {
    background: var(--green)
}

.company-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    max-height: 455px;
    padding: 2px 7px 2px 2px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-snap-type: y proximity;
    scrollbar-color: #c9cbd1 #f1f2f4;
    scrollbar-width: thin
}

.company-list::-webkit-scrollbar {
    width: 7px
}

.company-list::-webkit-scrollbar-track {
    background: #f1f2f4;
    border-radius: 999px
}

.company-list::-webkit-scrollbar-thumb {
    background: #c6c8ce;
    border-radius: 999px
}

.company {
    position: relative;
    padding: 14px;
    border: 1px solid #e1e2e6;
    border-radius: 16px;
    background: #fff;
    text-align: left;
    transition: .2s;
    scroll-snap-align: start
}

.company:hover {
    transform: translateY(-2px);
    border-color: #bbbcc1
}

.company.selected {
    border-color: var(--red);
    background: #fff7f8;
    box-shadow: 0 0 0 2px rgba(229, 29, 42, .08)
}

.company-head {
    display: flex;
    align-items: center;
    gap: 10px
}

.company-logo {
    width: 42px;
    height: 42px;
    border: 1px solid #e2e3e7;
    border-radius: 12px;
    background: #fff;
    display: grid;
    place-items: center;
    overflow: hidden
}

.company-logo svg {
    width: 30px;
    height: 30px
}

.company-logo img {
    width: 30px;
    height: 30px;
    object-fit: cover
}

.company-name {
    font-size: 16px;
    font-weight: 850
}

.company-sector {
    display: block;
    color: var(--muted);
    font-size: 10px
}

.income {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #eceef1
}

.income span {
    color: #777a81;
    font-size: 10px
}

.income b {
    color: var(--green);
    font-size: 13px
}

.company-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 9px
}

.company-detail {
    padding: 8px;
    border-radius: 9px;
    background: #f6f7f8
}

.company-detail span {
    display: block;
    color: #888b92;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .05em
}

.company-detail b {
    display: block;
    margin-top: 2px;
    color: #34363b;
    font-size: 9px;
    line-height: 1.3
}

.company-detail:first-child b {
    color: var(--green)
}

.company-panel>.primary {
    margin-top: 13px
}

.micro {
    margin: 10px 0 0;
    color: #96999f;
    text-align: center;
    font-size: 10px
}

.activation {
    max-width: 800px;
    margin: 6vh auto 0;
    padding: 34px;
    text-align: center;
    background: linear-gradient(145deg, #fff 25%, #fff3f4)
}

.sync {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 22px
}

.sync-logo {
    width: 68px;
    height: 68px;
    border: 1px solid #e1e2e6;
    border-radius: 20px;
    background: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 9px 22px rgba(24, 26, 31, .07);
    overflow: hidden
}

.sync-logo.k {
    background: var(--red);
    color: #fff;
    font-size: 31px;
    font-weight: 900
}

.sync-logo svg {
    width: 43px;
    height: 43px
}

.sync-logo img {
    width: 43px;
    height: 43px;
    object-fit: cover
}

.sync-arrow {
    width: 86px;
    height: 2px;
    background: #efbfc3;
    position: relative
}

.sync-arrow:after {
    content: "↔";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 29px;
    height: 29px;
    border-radius: 50%;
    background: #151619;
    color: #fff;
    display: grid;
    place-items: center
}

.activation .lead {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto
}

.facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    margin: 0 0 14px
}

.fact {
    padding: 14px;
    border: 1px solid #e5e1e4;
    border-radius: 14px;
    background: rgba(255, 255, 255, .84);
    text-align: left
}

.fact strong {
    display: block;
    color: var(--red);
    font-size: 14px
}

.fact span {
    color: var(--muted);
    font-size: 10px
}

.risk {
    margin-top: 12px;
    color: #8a6b39;
    font-size: 10px
}

.analysis {
    max-width: 820px;
    margin: 4vh auto 0;
    padding: 31px;
    text-align: center
}

.analysis-chart {
    margin-top: 22px;
    padding: 18px;
    border: 1px solid #e4e5e9;
    border-radius: 17px;
    background: #fafafb
}

.chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #686b72;
    font-size: 11px;
    font-weight: 800
}

.chart-head b {
    color: var(--green)
}

.chart-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 999px;
    background: #eafbf5;
    color: #087e61;
    font-size: 9px
}

.chart-live:before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00a77d;
    box-shadow: 0 0 0 4px rgba(0, 167, 125, .12);
    animation: pulseDot 1.5s infinite
}

.analysis-breakdown {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    margin: 12px 0
}

.analysis-breakdown span {
    padding: 9px;
    border: 1px solid #e4e6ea;
    border-radius: 10px;
    background: #fff;
    color: #7a7d84;
    font-size: 9px;
    text-align: left
}

.analysis-breakdown b {
    display: block;
    margin-top: 2px;
    color: #151619;
    font-size: 12px
}

.analysis-outcomes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 10px 0
}

.analysis-outcome {
    padding: 11px;
    border: 1px solid #dfe3e7;
    border-radius: 12px;
    background: #fff;
    text-align: left;
    opacity: .35;
    transform: translateY(4px);
    transition: .35s ease
}

.analysis-outcome.show {
    border-color: #bce8d9;
    background: #f3fffb;
    opacity: 1;
    transform: none
}

.analysis-outcome small {
    display: block;
    color: #7a7d84;
    font-size: 9px
}

.analysis-outcome strong {
    display: block;
    margin-top: 3px;
    color: var(--green);
    font-size: 18px
}

.balance-chart {
    position: relative;
    height: 210px;
    margin: 12px 0 4px;
    padding: 9px 7px 0;
    border: 1px solid #e2e5e9;
    border-radius: 15px;
    background: linear-gradient(180deg, #fff 0%, #f5f9fb 100%);
    overflow: hidden
}

.balance-chart:after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 82% 18%, rgba(0, 167, 125, .11), transparent 31%)
}

.balance-chart svg {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 172px;
    overflow: visible
}

.chart-grid line {
    stroke: #dfe4e8;
    stroke-width: 1;
    stroke-dasharray: 4 7
}

.balance-area {
    fill: url(#balanceGradient);
    opacity: .62
}

.balance-line-glow {
    fill: none;
    stroke: rgba(229, 29, 42, .18);
    stroke-width: 11;
    stroke-linecap: round;
    stroke-linejoin: round
}

.balance-line {
    fill: none;
    stroke: url(#lineGradient);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round
}

.chart-marker {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    transition: .3s ease
}

.chart-marker.show {
    opacity: 1;
    animation: markerIn .35s ease
}

.chart-marker circle {
    fill: #fff;
    stroke: var(--red);
    stroke-width: 3
}

.chart-marker text {
    fill: #33363b;
    font-size: 10px;
    font-weight: 850;
    paint-order: stroke;
    stroke: #fff;
    stroke-width: 4px;
    stroke-linejoin: round
}

.cursor-dot {
    fill: #fff;
    stroke: #00a77d;
    stroke-width: 4;
    filter: drop-shadow(0 0 5px rgba(0, 167, 125, .55))
}

.chart-days {
    position: absolute;
    z-index: 2;
    left: 19px;
    right: 19px;
    bottom: 8px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    color: #8a8d94;
    font-size: 8px;
    font-weight: 750
}

.chart-days span {
    text-align: center
}

.chart-days span:first-child {
    text-align: left
}

.chart-days span:last-child {
    text-align: right
}

.analysis-result {
    padding-top: 14px;
    border-top: 1px solid #dddfe4
}

.analysis-result small {
    display: block;
    color: #7c7f86;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em
}

.analysis-result strong {
    display: block;
    margin-top: 3px;
    color: var(--green);
    font-size: 38px;
    letter-spacing: -.04em
}

.analysis-result em {
    display: block;
    margin-top: 3px;
    color: #7a7d84;
    font-size: 10px;
    font-style: normal
}

.progress {
    height: 8px;
    margin: 18px 0 8px;
    border-radius: 999px;
    background: #eceef1;
    overflow: hidden
}

.progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--red), #ff7d85);
    transition: width .25s ease
}

.analysis-status {
    color: #73767d;
    font-size: 12px
}

.continue-wrap {
    display: none;
    margin-top: 18px
}

.continue-wrap.show {
    display: block;
    animation: viewIn .35s ease
}

@keyframes markerIn {
    0% {
        transform: scale(.4)
    }

    70% {
        transform: scale(1.2)
    }

    100% {
        transform: scale(1)
    }
}

@keyframes pulseDot {
    50% {
        box-shadow: 0 0 0 7px rgba(0, 167, 125, 0)
    }
}

.result-grid {
    display: grid;
    grid-template-columns: .84fr 1.16fr;
    gap: 20px;
    padding-top: 3vh
}

.result-card,
.contact-card {
    padding: 28px
}

.summary {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 23px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 18px;
    background: radial-gradient(circle at 86% 20%, rgba(229, 29, 42, .24), transparent 34%), linear-gradient(145deg, #151619, #2c2e34);
    color: #fff;
    box-shadow: 0 16px 35px rgba(20, 21, 24, .18);
    animation: summaryFloat 4.5s ease-in-out infinite
}

.summary:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -60%;
    left: -35%;
    width: 34%;
    height: 220%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .11), transparent);
    transform: rotate(18deg);
    animation: summaryShine 4.8s ease-in-out infinite
}

.summary-label {
    display: block;
    color: #c0c2c7;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em
}

.summary-repeat {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 7px;
    padding: 6px 9px;
    border: 1px solid rgba(116, 229, 191, .25);
    border-radius: 999px;
    background: rgba(7, 154, 115, .12);
    color: #82e7c5;
    font-size: 10px;
    font-weight: 800
}

.summary-repeat:before {
    content: "↻";
    font-size: 13px;
    animation: repeatSpin 3.8s linear infinite
}

.summary strong {
    display: block;
    margin: 12px 0 7px;
    font-size: 41px;
    text-shadow: 0 0 24px rgba(116, 229, 191, .12)
}

.summary p {
    margin: 0;
    color: #dddfe3;
    font-size: 12px
}

@keyframes summaryFloat {
    50% {
        transform: translateY(-3px);
        box-shadow: 0 21px 42px rgba(20, 21, 24, .22)
    }
}

@keyframes summaryShine {

    0%,
    58% {
        left: -35%;
        opacity: 0
    }

    68% {
        opacity: 1
    }

    88%,
    100% {
        left: 120%;
        opacity: 0
    }
}

@keyframes repeatSpin {
    to {
        transform: rotate(360deg)
    }
}

.summary-list {
    display: grid;
    gap: 9px;
    margin-top: 14px
}

.summary-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px solid #e4e5e8;
    border-radius: 13px;
    background: #fafafb;
    font-size: 12px
}

.summary-row b {
    color: var(--red);
    text-align: right
}

.notice {
    margin-top: 14px;
    padding: 13px;
    border-radius: 13px;
    background: #fff4e1;
    color: #725222;
    font-size: 11px
}

.contact-card .field-grid {
    margin-bottom: 13px
}

.contact-card .primary {
    margin-top: 15px
}

.privacy {
    margin: 9px 0 0;
    color: #91949a;
    text-align: center;
    font-size: 10px
}

.mobile-nav {
    display: none
}

.toast {
    position: fixed;
    z-index: 100;
    right: 22px;
    bottom: 22px;
    max-width: 360px;
    padding: 14px 17px;
    border-radius: 14px;
    background: #151619;
    color: #fff;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .2);
    opacity: 0;
    transform: translateY(130%);
    transition: .3s
}

.toast.show {
    opacity: 1;
    transform: none
}

.content {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(circle at 92% 9%, rgba(229, 29, 42, .09), transparent 23rem),
        radial-gradient(circle at 33% 88%, rgba(112, 88, 239, .07), transparent 26rem),
        var(--canvas)
}

.content:before {
    content: "";
    position: fixed;
    z-index: -1;
    width: 320px;
    height: 320px;
    right: 7vw;
    top: 18vh;
    border-radius: 50%;
    background: rgba(229, 29, 42, .055);
    filter: blur(40px);
    pointer-events: none;
    animation: ambient 8s ease-in-out infinite alternate
}

@keyframes ambient {
    to {
        transform: translate3d(-28px, 22px, 0) scale(1.08)
    }
}

.experience-hero {
    padding-top: clamp(24px, 6vh, 70px)
}

.hero-stage {
    position: relative;
    overflow: hidden;
    min-height: 520px;
    border-radius: 30px;
    background:
        radial-gradient(circle at 18% 15%, rgba(255, 255, 255, .15), transparent 15rem),
        linear-gradient(130deg, #171216 0%, #3a1017 45%, #e51d2a 125%);
    color: #fff;
    box-shadow: 0 30px 80px rgba(38, 16, 20, .22)
}

.hero-stage:before {
    content: "";
    position: absolute;
    width: 430px;
    height: 430px;
    right: -170px;
    top: -180px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 50%;
    box-shadow: 0 0 0 70px rgba(255, 255, 255, .025), 0 0 0 140px rgba(255, 255, 255, .018)
}

.hero-stage:after {
    content: "AI";
    position: absolute;
    right: 28px;
    bottom: -64px;
    color: rgba(255, 255, 255, .035);
    font-size: 250px;
    font-weight: 950;
    letter-spacing: -.12em;
    line-height: 1;
    pointer-events: none
}

.hero-stage-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: 28px;
    align-items: center;
    min-height: 520px;
    padding: 50px
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(10px);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .08em
}

.hero-badge i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #62e2b6;
    box-shadow: 0 0 0 5px rgba(98, 226, 182, .12)
}

.hero-message h1 {
    max-width: 650px;
    margin: 18px 0 0;
    font-size: clamp(42px, 5.2vw, 72px);
    line-height: .94;
    letter-spacing: -.065em
}

.hero-message h1 em {
    color: #ff7c85;
    font-style: normal
}

.hero-message>p {
    max-width: 580px;
    margin: 22px 0 0;
    color: rgba(255, 255, 255, .73);
    font-size: 17px
}

.wealth-console {
    position: relative;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 24px;
    background: rgba(255, 255, 255, .94);
    color: var(--ink);
    box-shadow: 0 25px 60px rgba(0, 0, 0, .23);
    backdrop-filter: blur(18px);
    transform: rotate(1.2deg)
}

.console-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px
}

.console-ai {
    display: flex;
    align-items: center;
    gap: 10px
}

.console-ai .ai-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--red);
    box-shadow: 0 7px 18px rgba(229, 29, 42, .22)
}

.console-ai b {
    display: block;
    font-size: 13px
}

.console-ai small {
    display: block;
    color: var(--muted);
    font-size: 10px
}

.console-live {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--green);
    font-size: 10px;
    font-weight: 850
}

.console-live i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    animation: pulse 1.8s ease-in-out infinite
}

@keyframes pulse {
    50% {
        box-shadow: 0 0 0 7px rgba(7, 154, 115, .1)
    }
}

.goal-showcase {
    position: relative;
    overflow: hidden;
    margin-top: 18px;
    padding: 18px;
    border: 1px solid #ffc8cd;
    border-radius: 18px;
    background: linear-gradient(135deg, #fff4f5, #fff);
    box-shadow: 0 12px 26px rgba(229, 29, 42, .08)
}

.goal-showcase:after {
    content: "$";
    position: absolute;
    right: -4px;
    top: -26px;
    color: rgba(229, 29, 42, .055);
    font-size: 105px;
    font-weight: 950;
    line-height: 1
}

.goal-label {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #777a81;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase
}

.goal-label span:last-child {
    padding: 4px 7px;
    border-radius: 999px;
    background: #fff;
    color: var(--red);
    box-shadow: 0 3px 10px rgba(229, 29, 42, .08)
}

.goal-number {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 7px
}

.goal-number strong {
    color: var(--red);
    font-size: 35px;
    line-height: 1;
    letter-spacing: -.055em;
    transition: .24s
}

.goal-number strong.changing {
    opacity: .2;
    transform: translateY(5px)
}

.goal-number span {
    color: #555860;
    font-size: 12px;
    font-weight: 800
}

.goal-buttons {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 14px
}

.goal-button {
    min-height: 36px;
    padding: 6px;
    border: 1px solid #e1e2e6;
    border-radius: 10px;
    background: #fff;
    color: #5f6269;
    font-size: 10px;
    font-weight: 850
}

.goal-button.selected {
    border-color: var(--red);
    background: var(--red);
    color: #fff;
    box-shadow: 0 7px 15px rgba(229, 29, 42, .18)
}

.goal-disclaimer {
    position: relative;
    z-index: 1;
    margin: 9px 0 0;
    color: #92959b;
    font-size: 9px
}

.capital-card {
    margin-top: 18px;
    padding: 18px;
    border-radius: 18px;
    background: linear-gradient(135deg, #15161a, #292b33);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07)
}

.capital-label {
    display: flex;
    justify-content: space-between;
    color: #bfc1c7;
    font-size: 10px;
    font-weight: 750
}

.capital-value {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 15px;
    margin-top: 7px
}

.capital-value strong {
    font-size: 42px;
    letter-spacing: -.055em;
    font-variant-numeric: tabular-nums
}

.capital-value span {
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(98, 226, 182, .13);
    color: #75e5bf;
    font-size: 10px;
    font-weight: 850;
    font-variant-numeric: tabular-nums
}

.capital-period {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    color: #a9acb3;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em
}

.capital-period b {
    color: #fff;
    font-size: 10px
}

.day-track {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
    margin-top: 7px
}

.day-chip {
    padding: 6px 2px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    background: rgba(255, 255, 255, .04);
    color: #7d8088;
    text-align: center;
    font-size: 8px;
    font-weight: 850;
    transition: .25s
}

.day-chip.active {
    border-color: rgba(98, 226, 182, .55);
    background: rgba(98, 226, 182, .12);
    color: #7ce6c1
}

.capital-disclaimer {
    margin: 8px 0 0;
    color: #8f9299;
    font-size: 8px;
    line-height: 1.35
}

.mini-chart {
    position: relative;
    height: 76px;
    margin-top: 11px
}

.mini-chart svg {
    width: 100%;
    height: 100%;
    overflow: visible
}

.line-run {
    stroke-dasharray: 430;
    stroke-dashoffset: 430
}

.chart-end-value {
    position: absolute;
    right: 0;
    top: 0;
    padding: 4px 7px;
    border-radius: 8px;
    background: rgba(98, 226, 182, .14);
    color: #77e4bf;
    font-size: 9px;
    font-weight: 900;
    opacity: 0;
    transform: translateY(5px);
    transition: .3s
}

.chart-end-value.show {
    opacity: 1;
    transform: none
}

.capital-results {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-top: 8px
}

.capital-result {
    padding: 8px 9px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 10px;
    background: rgba(255, 255, 255, .04)
}

.capital-result span {
    display: block;
    color: #8f9299;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .06em
}

.capital-result b {
    display: block;
    margin-top: 2px;
    color: #72e2bd;
    font-size: 12px;
    font-variant-numeric: tabular-nums
}

.preview-growth {
    width: 100%;
    min-height: 38px;
    margin-top: 9px;
    border: 0;
    border-radius: 10px;
    background: #fff;
    color: #151619;
    font-size: 10px;
    font-weight: 900;
    transition: .2s
}

.preview-growth:hover {
    background: #f4f4f5;
    transform: translateY(-1px)
}

.preview-growth.running {
    pointer-events: none;
    color: #777a81
}

.console-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-top: 12px
}

.console-metric {
    padding: 12px;
    border: 1px solid #e4e5e8;
    border-radius: 14px;
    background: #fff
}

.console-metric span {
    display: block;
    color: #85888f;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .07em
}

.console-metric b {
    display: block;
    margin-top: 3px;
    font-size: 14px
}

.console-metric b.red {
    color: var(--red)
}

.console-note {
    margin: 11px 0 0;
    color: #92959b;
    font-size: 9px;
    text-align: center
}

.start-cta {
    display: grid;
    grid-template-columns: 1fr minmax(280px, 430px);
    gap: 18px;
    align-items: center;
    margin-top: 14px;
    padding: 18px 20px;
    border: 1px solid #c9101c;
    border-radius: 19px;
    background: linear-gradient(115deg, #e51d2a, #b60c18);
    color: #fff;
    box-shadow: 0 18px 38px rgba(196, 14, 27, .2)
}

.start-cta b {
    display: block;
    font-size: 17px
}

.start-cta span {
    display: block;
    margin-top: 3px;
    color: rgba(255, 255, 255, .75);
    font-size: 12px
}

.start-cta .primary {
    background: #fff;
    color: #141518;
    box-shadow: 0 10px 24px rgba(77, 0, 8, .2)
}

.start-cta .primary:hover {
    background: #fff;
    transform: translateY(-2px)
}

.company-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px
}

.company-count {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid #dfe1e5;
    border-radius: 999px;
    background: #fafafb;
    color: #666970;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap
}

.company-count b {
    color: var(--red);
    font-size: 13px
}

.company-benefit {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    margin: 12px 0
}

.company-benefit span {
    padding: 9px;
    border: 1px solid #e8e9ed;
    border-radius: 11px;
    background: #fafafb;
    color: #686b72;
    font-size: 9px;
    font-weight: 750;
    text-align: center
}

.company-benefit b {
    color: var(--green)
}

.form-card,
.company-panel,
.activation,
.analysis,
.result-card,
.contact-card {
    border-color: #dedfe4;
    box-shadow: 0 22px 60px rgba(30, 32, 39, .08)
}

.form-card {
    background: linear-gradient(150deg, #fff 70%, #fff5f6)
}

.company-panel {
    background: linear-gradient(150deg, #fff 68%, #f6f3ff)
}

.company {
    background: linear-gradient(145deg, #fff, #fafafb)
}

.company.selected {
    background: linear-gradient(145deg, #fff5f6, #fff)
}

.activation {
    background:
        radial-gradient(circle at 15% 0%, rgba(229, 29, 42, .10), transparent 15rem),
        radial-gradient(circle at 90% 100%, rgba(112, 88, 239, .10), transparent 16rem), #fff
}

.analysis {
    background: linear-gradient(145deg, #fff 60%, #f3fffb)
}

.analysis-chart {
    background: linear-gradient(180deg, #fbfbfc, #f5f8fb)
}

.result-card {
    background: linear-gradient(150deg, #fff 66%, #fff4f5)
}

.contact-card {
    background: linear-gradient(150deg, #fff 70%, #f5f3ff)
}

/* Interactive company, synchronization, chart and result enhancements */
.company-details {
    display: none
}

.company-expanded {
    display: none;
    margin-top: 11px;
    padding: 11px;
    border: 1px solid #ffd0d4;
    border-radius: 12px;
    background: #fff
}

.company.selected .company-expanded {
    display: block;
    animation: viewIn .3s ease
}

.demo-days {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px
}

.demo-days span {
    padding: 7px 2px;
    border-radius: 8px;
    background: #f5f6f8;
    color: #777a81;
    text-align: center;
    font-size: 8px
}

.demo-days b {
    display: block;
    margin-top: 2px;
    color: var(--green);
    font-size: 10px
}

.company-insights {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 8px
}

.company-insights span {
    padding: 8px;
    border-radius: 9px;
    background: #fff6f7;
    color: #777a81;
    font-size: 8px
}

.company-insights b {
    display: block;
    margin-top: 2px;
    color: #2d3035;
    font-size: 9px;
    line-height: 1.3
}

.sync-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 16px
}

.sync-core {
    width: 74px;
    height: 68px;
    border: 1px solid #e1e2e6;
    border-radius: 20px;
    background: #151619;
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 9px 22px rgba(24, 26, 31, .07);
    font-size: 19px;
    font-weight: 900
}

.sync-core small {
    display: block;
    margin-top: -18px;
    color: #aeb1b7;
    font-size: 7px;
    letter-spacing: .08em
}

.sync-link {
    position: relative;
    width: 58px;
    height: 2px;
    background: #f1c5c9
}

.sync-link i {
    position: absolute;
    top: -3px;
    left: -2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 14px 4px rgba(229, 29, 42, .35);
    animation: syncPulse 1.45s ease-in-out infinite
}

.sync-link:nth-of-type(4) i {
    animation-delay: .72s
}

.sync-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
    margin: 0 auto 20px;
    max-width: 650px
}

.sync-step {
    padding: 9px 5px;
    border: 1px solid #e5e6ea;
    border-radius: 11px;
    background: #fafafb;
    color: #8b8e95;
    font-size: 9px;
    font-weight: 750;
    transition: .35s
}

.sync-step i {
    display: grid;
    place-items: center;
    width: 19px;
    height: 19px;
    margin: 0 auto 5px;
    border-radius: 50%;
    background: #e6e7ea;
    color: #fff;
    font-style: normal
}

.sync-step.done {
    border-color: #a9e4d2;
    background: #effbf7;
    color: #08775c
}

.sync-step.done i {
    background: var(--green)
}

@keyframes syncPulse {
    0% {
        left: -2px;
        opacity: 0
    }

    20% {
        opacity: 1
    }

    80% {
        opacity: 1
    }

    100% {
        left: calc(100% - 6px);
        opacity: 0
    }
}

.result-comparison {
    margin-top: 14px;
    overflow: hidden;
    border: 1px solid #e1e3e7;
    border-radius: 15px;
    background: #fff
}

.comparison-head,
.comparison-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 11px 13px
}

.comparison-head {
    background: #f4f5f7;
    color: #7d8087;
    font-size: 9px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .07em
}

.comparison-row {
    border-top: 1px solid #eceef1;
    font-size: 12px
}

.comparison-row b {
    color: var(--red);
    text-align: right
}

.comparison-row.total {
    background: #effbf7
}

.comparison-row.total b {
    color: var(--green);
    font-size: 16px
}

.result-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-top: 10px
}

.result-meta>span {
    min-width: 0;
    padding: 9px;
    border: 1px solid #e5e6ea;
    border-radius: 11px;
    background: #fafafb;
    color: #80838a;
    font-size: 9px
}

.result-meta>span>b {
    display: block;
    margin-top: 3px;
    color: #303238;
    font-size: 11px;
    line-height: 1.35;
    overflow-wrap: anywhere
}

.cabinet-view {
    position: relative;
    min-height: calc(100vh - 48px);
    overflow: hidden;
    border: 1px solid #dfe1e5;
    border-radius: 28px;
    background: #f1f3f5;
    box-shadow: 0 28px 80px rgba(24, 26, 31, .12)
}

.cabinet-blur {
    position: absolute;
    inset: -12px;
    display: grid;
    grid-template-columns: 220px 1fr;
    filter: blur(7px);
    opacity: .48;
    transform: scale(1.025);
    pointer-events: none;
    user-select: none
}

.cabinet-side {
    padding: 28px 20px;
    background: #17181b;
    color: #fff
}

.cabinet-side .brand {
    padding: 0
}

.cabinet-menu {
    display: grid;
    gap: 9px;
    margin-top: 48px
}

.cabinet-menu span {
    padding: 12px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .06);
    font-size: 12px
}

.cabinet-menu span:first-child {
    background: rgba(229, 29, 42, .38)
}

.cabinet-work {
    padding: 24px;
    background: #f6f7f8
}

.cabinet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 19px;
    border: 1px solid #e2e4e7;
    border-radius: 16px;
    background: #fff;
    font-weight: 850
}

.cabinet-head small {
    color: var(--green)
}

.cabinet-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 14px;
    margin-top: 14px
}

.cabinet-panel {
    padding: 20px;
    border: 1px solid #e2e4e8;
    border-radius: 18px;
    background: #fff
}

.cabinet-panel small {
    color: #85888f;
    font-size: 10px
}

.cabinet-panel strong {
    display: block;
    margin-top: 7px;
    font-size: 31px
}

.cabinet-gain {
    color: var(--green) !important
}

.cabinet-fake-chart {
    position: relative;
    height: 190px;
    margin-top: 20px;
    border-radius: 15px;
    background: repeating-linear-gradient(0deg, #fff, #fff 37px, #eef0f2 38px)
}

.cabinet-fake-chart svg {
    width: 100%;
    height: 100%
}

.cabinet-fake-chart path {
    fill: none;
    stroke: var(--red);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round
}

.cabinet-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid #eceef1;
    font-size: 12px
}

.cabinet-row:last-child {
    border-bottom: 0
}

.cabinet-row b {
    color: var(--green)
}

.cabinet-lock {
    position: relative;
    z-index: 2;
    min-height: calc(100vh - 48px);
    display: grid;
    place-items: center;
    padding: 28px;
    background: rgba(247, 248, 249, .32);
    backdrop-filter: blur(2px)
}

.verification-card {
    position: relative;
    isolation: isolate;
    width: min(100%, 510px);
    overflow: hidden;
    padding: 34px;
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 26px;
    background: rgba(255, 255, 255, .94);
    text-align: center;
    box-shadow: 0 28px 90px rgba(20, 22, 27, .24);
    animation: verificationIn .55s cubic-bezier(.2, .8, .2, 1) both
}

.verification-card:before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 220px;
    height: 220px;
    right: -110px;
    top: -120px;
    border-radius: 50%;
    background: rgba(229, 29, 42, .1);
    filter: blur(3px)
}

.verification-icon {
    position: relative;
    width: 76px;
    height: 76px;
    margin: 0 auto 21px;
    border-radius: 24px;
    background: linear-gradient(145deg, var(--red), #b80f1b);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 15px 32px rgba(229, 29, 42, .28)
}

.verification-icon:before {
    content: "";
    position: absolute;
    inset: -9px;
    border: 1px solid rgba(229, 29, 42, .2);
    border-radius: 30px;
    animation: verifyPulse 2s ease-out infinite
}

.verification-icon svg {
    width: 35px;
    height: 35px
}

.verification-card .eyebrow {
    margin-bottom: 9px
}

.verification-card h2 {
    margin: 0;
    font-size: 32px;
    line-height: 1.03;
    letter-spacing: -.045em
}

.verification-card>p {
    max-width: 410px;
    margin: 14px auto 0;
    color: #696c73;
    font-size: 14px
}

.verification-status {
    display: grid;
    gap: 8px;
    margin-top: 23px;
    text-align: left
}

.verification-status span {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 13px;
    border: 1px solid #e6e7ea;
    border-radius: 13px;
    background: #fafafb;
    color: #55585f;
    font-size: 12px;
    font-weight: 750
}

.verification-status i {
    width: 22px;
    height: 22px;
    border-radius: 8px;
    background: var(--green-soft);
    color: var(--green);
    display: grid;
    place-items: center;
    font-style: normal;
    font-weight: 900
}

.verification-status span:last-child i {
    background: var(--red-soft);
    color: var(--red);
    animation: phoneRing 1.8s ease-in-out infinite
}

.verification-note {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    margin-top: 17px !important;
    padding: 7px 10px;
    border-radius: 999px;
    background: #f4f5f7;
    color: #7a7d84 !important;
    font-size: 10px !important;
    font-weight: 750
}

.verification-note:before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--red)
}

body.cabinet-open .app {
    grid-template-columns: 1fr
}

body.cabinet-open .sidebar,
body.cabinet-open .topbar,
body.cabinet-open .mobile-nav {
    display: none
}

body.cabinet-open .content {
    padding: 24px
}

body.cabinet-open .main {
    max-width: 1400px
}

@keyframes verificationIn {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.97)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes verifyPulse {
    0% {
        transform: scale(.86);
        opacity: 0
    }

    35% {
        opacity: 1
    }

    100% {
        transform: scale(1.18);
        opacity: 0
    }
}

@keyframes phoneRing {

    0%,
    55%,
    100% {
        transform: rotate(0)
    }

    65% {
        transform: rotate(-11deg)
    }

    75% {
        transform: rotate(11deg)
    }

    85% {
        transform: rotate(-7deg)
    }
}

@media(max-width:920px) {
    .app {
        grid-template-columns: 1fr
    }

    .sidebar {
        display: none
    }

    .content {
        padding: 17px 16px 94px
    }

    .topbar {
        margin-bottom: 16px
    }

    .hero,
    .flow,
    .company-layout,
    .result-grid {
        grid-template-columns: 1fr;
        padding-top: 0
    }

    .mini-progress {
        display: none
    }

    .hero {
        gap: 12px
    }

    .hero-copy {
        padding: 27px
    }

    .hero h1 {
        font-size: 40px
    }

    .company-intro {
        min-height: auto
    }

    .company-intro h2 {
        font-size: 31px
    }

    .experience-hero {
        padding-top: 0
    }

    .hero-stage-inner {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 38px
    }

    .wealth-console {
        transform: none
    }

    .start-cta {
        grid-template-columns: 1fr auto
    }

    .mobile-nav {
        position: fixed;
        z-index: 80;
        left: 12px;
        right: 12px;
        bottom: max(10px, env(safe-area-inset-bottom));
        height: 68px;
        padding: 7px;
        border: 1px solid #dedfe3;
        border-radius: 20px;
        background: rgba(255, 255, 255, .95);
        backdrop-filter: blur(15px);
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        box-shadow: 0 15px 42px rgba(26, 28, 34, .16)
    }

    .mobile-step {
        border: 0;
        border-radius: 13px;
        background: transparent;
        color: #989aa0;
        font-size: 9px;
        font-weight: 800
    }

    .mobile-step span {
        display: block;
        margin: auto;
        width: 24px;
        height: 24px;
        padding-top: 5px;
        border-radius: 8px
    }

    .mobile-step.active {
        background: var(--red-soft);
        color: var(--red)
    }

    .mobile-step.active span {
        background: var(--red);
        color: #fff
    }

    .toast {
        left: 16px;
        right: 16px;
        bottom: 93px
    }
}

@media(max-width:600px) {
    .content {
        padding: 10px 9px 91px
    }

    .topbar {
        padding: 10px 11px;
        border-radius: 14px
    }

    .top-left {
        font-size: 14px
    }

    .top-left .brand-mark {
        width: 29px;
        height: 29px;
        font-size: 16px
    }

    .demo-pill {
        font-size: 8px;
        padding: 6px 8px
    }

    .secure-pill {
        display: none
    }

    .hero-copy,
    .assistant-card,
    .form-card,
    .company-panel,
    .result-card,
    .contact-card {
        padding: 20px;
        border-radius: 20px
    }

    .hero h1 {
        font-size: 34px
    }

    .hero-copy>p:not(.eyebrow) {
        font-size: 14px
    }

    .assistant-card {
        padding-top: 21px
    }

    .field-grid,
    .choice-grid,
    .facts {
        grid-template-columns: 1fr
    }

    .actions {
        flex-direction: column-reverse
    }

    .secondary {
        width: 100%
    }

    .company-intro {
        padding: 22px;
        border-radius: 20px
    }

    .company-list {
        grid-template-columns: 1fr;
        max-height: 440px;
        gap: 8px
    }

    .company {
        padding: 13px
    }

    .activation,
    .analysis {
        margin-top: 8px;
        padding: 22px 18px;
        border-radius: 20px
    }

    .activation h2,
    .analysis h2,
    .result-card h2,
    .contact-card h2 {
        font-size: 25px
    }

    .sync-logo,
    .sync-core {
        width: 53px;
        height: 53px;
        border-radius: 15px
    }

    .sync-link {
        width: 30px
    }

    .sync-steps {
        grid-template-columns: 1fr 1fr
    }

    .balance-chart {
        height: 195px
    }

    .balance-chart svg {
        height: 158px
    }

    .summary strong {
        font-size: 36px
    }

    .hero-stage {
        min-height: auto;
        border-radius: 22px
    }

    .hero-stage-inner {
        padding: 26px 20px 22px;
        gap: 25px
    }

    .hero-message h1 {
        font-size: 40px
    }

    .hero-message>p {
        font-size: 15px
    }

    .wealth-console {
        padding: 16px;
        border-radius: 19px
    }

    .capital-value strong {
        font-size: 36px
    }

    .goal-number strong {
        font-size: 31px
    }

    .goal-buttons {
        grid-template-columns: 1fr
    }

    .goal-button {
        min-height: 39px
    }

    .start-cta {
        grid-template-columns: 1fr;
        padding: 17px
    }

    .start-cta .primary {
        min-height: 56px
    }

    .company-panel-head {
        align-items: flex-start
    }

    .company-benefit {
        grid-template-columns: 1fr
    }

    .company-insights,
    .result-meta {
        grid-template-columns: 1fr
    }

    .content:before {
        display: none
    }

    body.cabinet-open .content {
        padding: 0
    }

    .cabinet-view {
        min-height: 100vh;
        border: 0;
        border-radius: 0
    }

    .cabinet-blur {
        grid-template-columns: 76px 1fr
    }

    .cabinet-side {
        padding: 20px 10px
    }

    .cabinet-side .brand span:last-child,
    .cabinet-menu span {
        font-size: 0
    }

    .cabinet-menu span {
        height: 42px
    }

    .cabinet-work {
        padding: 12px
    }

    .cabinet-grid {
        grid-template-columns: 1fr
    }

    .cabinet-grid .cabinet-panel:last-child {
        display: none
    }

    .cabinet-lock {
        min-height: 100vh;
        padding: 18px
    }

    .verification-card {
        padding: 27px 20px;
        border-radius: 22px
    }

    .verification-card h2 {
        font-size: 28px
    }

    .verification-card>p {
        font-size: 13px
    }
}

@media(prefers-reduced-motion:reduce) {

    *,
    *:before,
    *:after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important
    }
}