:root {
    --bg: #0a0a0f;
    --fg: #f0f0f5;
    --card: #12121a;
    --primary: #00c950;
    --primary-fg: #0a0a0f;
    --primary-hover: #00a63e;
    --secondary: #1a1a25;
    --muted-fg: #8a8a9a;
    --border: #2a2a3a;
    --radius-sm: 0.5rem;
    --radius: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-3xl: 1.75rem;
    --green: #4ade80;
    --green-dim: #86efac;
    --green-bg: rgba(74,222,128,0.1);
    --green-border: rgba(74,222,128,0.2)
}

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

html {
    scroll-behavior: smooth
}

body {
    font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    background-color: var(--bg);
    color: var(--fg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5
}

[hidden] {
    display: none !important
}

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

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

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    line-height: inherit
}

ul {
    list-style: none
}

input,textarea,select {
    font-family: inherit;
    font-size: inherit
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem
}

@media (min-width: 1024px) {
    .container {
        padding:0 2rem
    }
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: inherit;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
    padding: 0.875rem 2rem;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.2s,border-color 0.2s,color 0.2s,box-shadow 0.2s,opacity 0.2s;
    text-decoration: none;
    border: 1.5px solid transparent;
    white-space: nowrap
}

.btn--primary {
    background: var(--primary);
    color: var(--primary-fg);
    border-color: var(--primary)
}

.btn--primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover)
}

.btn--outline {
    background: transparent;
    border-color: rgba(240,240,245,0.3);
    color: var(--fg)
}

.btn--outline:hover {
    background: rgba(240,240,245,0.1)
}

.btn--outline-dark {
    background: transparent;
    border-color: var(--border);
    color: var(--fg)
}

.btn--outline-dark:hover {
    background: var(--secondary)
}

.btn--lg {
    font-size: 1rem;
    padding: 1.25rem 2rem
}

.btn--sm {
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.5rem 0.875rem
}

.section-header {
    text-align: center;
    max-width: 42rem;
    margin: 0 auto
}

.section-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary)
}

.section-title {
    margin-top: 0.75rem;
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--fg);
    line-height: 1.2
}

@media (min-width: 640px) {
    .section-title {
        font-size:2.25rem
    }
}

@media (min-width: 1024px) {
    .section-title {
        font-size:3.125rem
    }
}

.section-desc {
    margin-top: 1rem;
    font-size: 1.125rem;
    line-height: 1.75;
    color: var(--muted-fg)
}

@keyframes float {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-10px)
    }
}

@keyframes pulse-glow {
    0%,100% {
        box-shadow: 0 0 20px rgba(80, 162, 255,0.3)
    }

    50% {
        box-shadow: 0 0 40px rgba(212,164,74,0.6)
    }
}

@keyframes dot-pulse {
    0%,100% {
        opacity: 1
    }

    50% {
        opacity: 0.4
    }
}

@keyframes ping {
    75%,100% {
        transform: scale(2);
        opacity: 0
    }
}

.animate-float {
    animation: float 3s ease-in-out infinite
}

.animate-pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite
}

.animate-dot-pulse {
    animation: dot-pulse 2s ease-in-out infinite
}

.animate-ping {
    animation: ping 3s cubic-bezier(0,0,0.2,1) infinite
}

.lead-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem
}

.lead-modal[hidden] {
    display: none
}

.lead-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px)
}

.lead-modal__card {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 26rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 1.5rem;
    overflow: clip;
    animation: lmIn 0.22s ease both
}

@media (min-width: 640px) {
    .lead-modal__card {
        grid-template-columns:1fr 1fr;
        max-width: 52rem
    }
}

@keyframes lmIn {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(10px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.lead-modal__close {
    position: absolute;
    top: 0.875rem;
    right: 0.875rem;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(26,26,37,0.85);
    color: var(--muted-fg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s,color 0.2s,background 0.2s;
    z-index: 2
}

.lead-modal__close:hover {
    border-color: var(--muted-fg);
    color: var(--fg);
    background: rgba(40,40,55,0.95)
}

.lead-modal__close svg {
    width: 0.875rem;
    height: 0.875rem
}

.lead-modal__left {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    padding: 2.5rem 2rem;
    background: linear-gradient(150deg,#1c1507 0%,#100d02 60%,#0d0b06 100%);
    border-right: 1px solid rgba(212,164,74,0.12);
    position: relative;
    overflow: hidden;
    min-height: 0
}

@media (min-width: 640px) {
    .lead-modal__left {
        display:flex
    }
}

.lead-modal__left::before {
    content: '';
    position: absolute;
    top: -5rem;
    right: -5rem;
    width: 16rem;
    height: 16rem;
    border-radius: 50%;
    background: radial-gradient(circle,rgba(212,164,74,0.13) 0%,transparent 65%);
    pointer-events: none
}

.lead-modal__left::after {
    content: '';
    position: absolute;
    bottom: -3rem;
    left: -3rem;
    width: 12rem;
    height: 12rem;
    border-radius: 50%;
    background: radial-gradient(circle,rgba(212,164,74,0.07) 0%,transparent 65%);
    pointer-events: none
}

.lead-modal__left-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.875rem;
    border-radius: 2rem;
    background: rgba(212,164,74,0.12);
    border: 1px solid rgba(80, 162, 255,0.3);
    color: var(--primary);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1.5rem;
    align-self: flex-start
}

.lead-modal__left-title {
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--fg);
    line-height: 1.25;
    margin-bottom: 1.75rem
}

.lead-modal__left-title span {
    color: var(--primary)
}

.lead-modal__left-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    flex: 1
}

.lead-modal__left-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: 0.875rem;
    color: rgba(240,240,245,0.82);
    line-height: 1.45
}

.lead-modal__left-list li::before {
    content: '';
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 0.1rem;
    background: rgba(212,164,74,0.15) url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23d4a44a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 68% no-repeat;
    border: 1px solid rgba(212,164,74,0.35)
}

.lead-modal__left-bottom {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(212,164,74,0.12)
}

.lead-modal__left-stars {
    display: block;
    color: var(--primary);
    font-size: 1rem;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem
}

.lead-modal__left-rating-text {
    font-size: 0.75rem;
    color: var(--muted-fg)
}

.lead-modal__right {
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    max-height: 90dvh
}

@media (min-width: 640px) {
    .lead-modal__right {
        padding:2.5rem;
        max-height: 85dvh
    }
}

.lead-modal__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--fg);
    margin-bottom: 0.375rem
}

.lead-modal__desc {
    font-size: 0.875rem;
    color: var(--muted-fg);
    margin-bottom: 1.5rem;
    line-height: 1.5
}

.lead-modal__form {
    display: flex;
    flex-direction: column;
    gap: 0.875rem
}

.lead-modal__field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem
}

.lead-modal__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted-fg);
    padding-left: 0.25rem
}

.lead-modal__input {
    width: 100%;
    height: 2.875rem;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    background: rgba(20,20,30,0.8);
    padding: 0 1rem;
    font-size: 0.9375rem;
    font-family: inherit;
    color: var(--fg);
    outline: none;
    transition: border-color 0.2s,box-shadow 0.2s
}

.lead-modal__input::placeholder {
    color: var(--muted-fg)
}

.lead-modal__input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(212,164,74,0.12)
}

.lead-modal__input.is-error {
    border-color: #ef4444
}

.lead-modal__methods {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 0.5rem
}

.lead-modal__method {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.625rem 0.25rem;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    background: rgba(26,26,37,0.6);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--muted-fg);
    cursor: pointer;
    transition: border-color 0.2s,background 0.2s,color 0.2s;
    font-family: inherit
}

.lead-modal__method svg {
    width: 1.125rem;
    height: 1.125rem
}

.lead-modal__method:hover {
    border-color: rgba(80, 162, 255,0.4);
    color: var(--fg)
}

.lead-modal__method--active {
    border-color: var(--primary);
    background: rgba(212,164,74,0.1);
    color: var(--fg)
}

.lead-modal__method[data-method="whatsapp"].lead-modal__method--active {
    border-color: #25D366;
    background: rgba(37,211,102,0.1);
    color: #25D366
}

.lead-modal__method[data-method="telegram"].lead-modal__method--active {
    border-color: #2AABEE;
    background: rgba(42,171,238,0.1);
    color: #2AABEE
}

.lead-modal__submit {
    width: 100%;
    height: 3rem;
    font-size: 1rem;
    margin-top: 0.25rem;
    gap: 0.5rem
}

.lead-modal__privacy {
    font-size: 0.6875rem;
    color: var(--muted-fg);
    text-align: center;
    line-height: 1.5;
    margin-top: -0.25rem
}

.lead-modal__privacy a {
    text-decoration: underline
}

.lead-modal__success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem 0 1rem;
    gap: 0.5rem
}

.lead-modal__success-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--green-bg);
    border: 1px solid var(--green-border);
    color: var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.25rem
}

.lead-modal__success-icon svg {
    width: 1.5rem;
    height: 1.5rem
}

.lead-modal__success-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--fg)
}

.lead-modal__success-desc {
    font-size: 0.875rem;
    color: var(--muted-fg)
}

.lead-modal__divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0 1rem;
    font-size: 0.75rem;
    color: var(--muted-fg)
}

.lead-modal__divider::before,.lead-modal__divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border)
}

.lead-modal__contacts {
    display: flex;
    flex-direction: column;
    gap: 0.5rem
}

.lead-modal__contact {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    background: rgba(26,26,37,0.5);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fg);
    text-decoration: none;
    transition: border-color 0.2s,background 0.2s
}

.lead-modal__contact svg {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0
}

.lead-modal__contact--phone:hover {
    border-color: rgba(212,164,74,0.5)
}

.lead-modal__contact--whatsapp svg {
    color: #25D366
}

.lead-modal__contact--whatsapp:hover {
    border-color: #25D366;
    background: rgba(37,211,102,0.06)
}

.lead-modal__contact--telegram svg {
    color: #2AABEE
}

.lead-modal__contact--telegram:hover {
    border-color: #2AABEE;
    background: rgba(42,171,238,0.06)
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    transition: background 0.3s,border-color 0.3s,box-shadow 0.3s
}

.header--scrolled {
    background: rgba(10,10,15,0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 4px 24px rgba(0,0,0,0.4)
}

.header__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0.75rem 1rem
}

@media (min-width: 1024px) {
    .header__container {
        padding:0.75rem 2rem
    }
}

.header__logo {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0
}

.header__logo-text {
    font-size: 1.325rem;
    font-weight: 700;
    color: var(--fg);
    line-height: 1
}

.header__logo-text span {
    color: var(--primary)
}

.header__nav {
    display: none;
    align-items: center;
    gap: 1.5rem
}

@media (min-width: 1024px) {
    .header__nav {
        display:flex
    }
}

.header__nav-link {
    font-size: 0.875rem;
    color: var(--muted-fg);
    transition: color 0.2s;
    white-space: nowrap
}

.header__nav-link:hover {
    color: var(--primary)
}

.header__nav-item {
    position: relative
}

.header__nav-trigger {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--muted-fg);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s;
    white-space: nowrap
}

.header__nav-trigger:hover {
    color: var(--primary)
}

.header__nav-item--open .header__nav-trigger {
    color: var(--primary)
}

.header__nav-trigger-chevron {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
    transition: transform 0.25s
}

.header__nav-item--open .header__nav-trigger-chevron {
    transform: rotate(180deg)
}

.header__dropdown {
    position: absolute;
    top: calc(100% + 1rem);
    left: -1.5rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    padding: 1rem;
    box-shadow: 0 24px 64px rgba(0,0,0,0.6),0 0 0 1px rgba(255,255,255,0.03);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 0.2s,transform 0.2s;
    z-index: 100
}

.header__nav-item--open .header__dropdown {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0)
}

.header__dropdown-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem
}

.header__dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: var(--radius-xl);
    transition: background 0.15s
}

.header__dropdown-item:hover {
    background: rgba(255,255,255,0.04)
}

.header__dropdown-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-lg);
    background: rgba(212,164,74,0.08);
    color: var(--primary);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    flex-shrink: 0;
    line-height: 1.2;
    text-align: center;
    transition: background 0.15s,color 0.15s;
    overflow: hidden
}

.header__dropdown-item:hover .header__dropdown-badge {
    background: var(--primary);
    color: var(--primary-fg)
}

.header__dropdown-body {
    flex: 1;
    min-width: 0
}

.header__dropdown-name {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fg);
    line-height: 1.3;
    transition: color 0.15s
}

.header__dropdown-item:hover .header__dropdown-name {
    color: var(--primary)
}

.header__dropdown-desc {
    display: block;
    font-size: 0.75rem;
    color: var(--muted-fg);
    margin-top: 0.2rem;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.header__dropdown-price {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary);
    flex-shrink: 0;
    white-space: nowrap;
    opacity: 0.75;
    transition: opacity 0.15s
}

.header__dropdown-item:hover .header__dropdown-price {
    opacity: 1
}

.header__dropdown-sep {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.75rem 0 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted-fg)
}

.header__dropdown-sep::before,.header__dropdown-sep::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.07)
}

.header__dropdown-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem;
    margin-bottom: 0.25rem
}

.header__dropdown-link {
    display: block;
    padding: 0.4rem 0.625rem;
    border-radius: var(--radius);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--muted-fg);
    transition: background 0.15s,color 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.header__dropdown-link:hover,.header__dropdown-link--active {
    background: rgba(212,164,74,0.08);
    color: var(--primary)
}

.header__dropdown-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255,255,255,0.06)
}

.header__dropdown-footer-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--muted-fg);
    transition: color 0.15s
}

.header__dropdown-footer-link:hover {
    color: var(--primary)
}

.header__dropdown-footer-link svg {
    width: 0.875rem;
    height: 0.875rem
}

.header__dropdown-footer-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--primary);
    transition: opacity 0.15s
}

.header__dropdown-footer-cta:hover {
    opacity: 0.8
}

.header__dropdown-footer-cta svg {
    width: 0.875rem;
    height: 0.875rem
}

.header__mobile-cat {
    display: flex;
    flex-direction: column
}

.header__mobile-cat-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--muted-fg);
    background: none;
    border: none;
    cursor: pointer;
    border-radius: var(--radius);
    text-align: left;
    transition: background 0.2s,color 0.2s
}

.header__mobile-cat-trigger:hover {
    background: var(--secondary);
    color: var(--fg)
}

.header__mobile-cat--open .header__mobile-cat-trigger {
    color: var(--primary);
    background: rgba(212,164,74,0.06)
}

.header__mobile-cat-chevron {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    transition: transform 0.25s
}

.header__mobile-cat--open .header__mobile-cat-chevron {
    transform: rotate(180deg)
}

.header__mobile-cat-list {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease
}

.header__mobile-cat--open .header__mobile-cat-list {
    grid-template-rows: 1fr
}

.header__mobile-cat-list-inner {
    overflow: hidden
}

.header__mobile-sublink {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem 0.625rem 1.5rem;
    border-radius: var(--radius);
    transition: background 0.15s
}

.header__mobile-sublink:hover {
    background: var(--secondary)
}

.header__mobile-sublink-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius);
    background: rgba(212,164,74,0.08);
    color: var(--primary);
    font-size: 0.6rem;
    font-weight: 800;
    flex-shrink: 0;
    line-height: 1.2;
    text-align: center
}

.header__mobile-sublink-body {
    flex: 1;
    min-width: 0
}

.header__mobile-sublink-name {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--fg);
    line-height: 1.3
}

.header__mobile-sublink-desc {
    display: block;
    font-size: 0.75rem;
    color: var(--muted-fg);
    margin-top: 0.1rem
}

.header__actions {
    display: none;
    align-items: center;
    gap: 1rem
}

@media (min-width: 1024px) {
    .header__actions {
        display:flex
    }
}

.header__phone {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--fg);
    transition: color 0.2s;
    white-space: nowrap
}

.header__phone:hover {
    color: var(--primary)
}

.header__phone-icon {
    width: 1rem;
    height: 1rem;
    color: var(--primary);
    flex-shrink: 0
}

.header__burger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: var(--fg);
    flex-shrink: 0
}

@media (min-width: 1024px) {
    .header__burger {
        display:none
    }
}

.header__burger-svg {
    width: 1.5rem;
    height: 1.5rem
}

.header__mobile {
    display: none;
    border-top: 1px solid var(--border);
    background: rgba(10,10,15,0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px)
}

.header__mobile--open {
    display: block
}

@media (min-width: 1024px) {
    .header__mobile,.header__mobile--open {
        display:none !important
    }
}

.header__mobile-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1rem
}

.header__mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem
}

.header__mobile-link {
    display: block;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--muted-fg);
    border-radius: var(--radius);
    transition: background 0.2s,color 0.2s
}

.header__mobile-link:hover {
    background: var(--secondary);
    color: var(--fg)
}

.header__mobile-bottom {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border)
}

.header__mobile-phone {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fg)
}

.header__mobile-phone svg {
    width: 1rem;
    height: 1rem;
    color: var(--primary);
    flex-shrink: 0
}

.footer {
    border-top: 1px solid var(--border);
    background: rgba(10,10,15,0.6)
}

.footer__container {
    padding-top: 3.5rem;
    padding-bottom: 2rem
}

.footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem
}

@media (min-width: 640px) {
    .footer__grid {
        grid-template-columns:1fr 1fr;
        gap: 2rem 3rem
    }
}

@media (min-width: 1024px) {
    .footer__grid {
        grid-template-columns:2fr 1.5fr 1.1fr 1.5fr;
        gap: 0 3rem;
        align-items: start
    }
}

.footer__logo {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem
}

.footer__logo-text {
    font-size: 1.325rem;
    font-weight: 700;
    color: var(--fg);
    line-height: 1
}

.footer__logo-text span {
    color: var(--primary)
}

.footer__desc {
    margin-top: 0.875rem;
    font-size: 0.8125rem;
    line-height: 1.75;
    color: var(--muted-fg);
    max-width: 22rem
}

.footer__socials {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem
}

.hero__messengers {
	border: 1px solid var(--primary);
	padding: 15px;
	border-radius: 16px;
}

.footer__social {
    display: flex;
    align-items: center;
    justify-content: center;
	padding: 10px 12px;
	gap: 10px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    color: var(--muted-fg);
    transition: border-color 0.2s,color 0.2s,background 0.2s
}

.footer__social:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(212,164,74,0.06)
}

.footer__social svg {
    width: 1.2rem;
    height: 1.2rem
}

.footer__col-title {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3)
}

.footer__col-list {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem
}

.footer__col-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3125rem 0;
    font-size: 0.8125rem;
    color: var(--muted-fg);
    transition: color 0.15s;
    cursor: pointer
}

a.footer__col-link:hover {
    color: var(--fg)
}

.footer__col-link svg {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
    color: var(--primary);
    opacity: 0.5;
    transition: opacity 0.15s
}

a.footer__col-link:hover svg {
    opacity: 0.9
}

.footer__col-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 1.125rem;
    padding: 0 0.3rem;
    border-radius: 0.2rem;
    background: rgba(212,164,74,0.08);
    color: var(--primary);
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    flex-shrink: 0;
    transition: background 0.15s
}

a.footer__col-link:hover .footer__col-badge {
    background: rgba(212,164,74,0.18)
}

.footer__bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.05);
    text-align: center
}

@media (min-width: 640px) {
    .footer__bottom {
        flex-direction:row;
        justify-content: space-between;
        text-align: left
    }
}

.footer__copyright {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.22)
}

.footer__legal {
    display: flex;
    align-items: center;
    gap: 1.25rem
}

.footer__legal-link {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.22);
    transition: color 0.2s
}

.footer__legal-link:hover {
    color: var(--muted-fg)
}

.footer__inn {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.22)
}

.messenger {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.625rem
}

.messenger__btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1.125rem;
    border-radius: 2rem;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    transition: transform 0.2s,box-shadow 0.2s,opacity 0.2s;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25)
}

.messenger__btn:hover {
    transform: translateX(-3px);
    opacity: 0.93
}

.messenger__btn--phone {
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--fg);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3)
}

.messenger__btn--phone:hover {
    border-color: rgba(212,164,74,0.5);
    box-shadow: 0 6px 28px rgba(0,0,0,0.4)
}

.messenger__btn--wa {
    background: #8a0194;
    box-shadow: 0 4px 20px rgba(37,211,102,0.3)
}

.messenger__btn--wa:hover {
    box-shadow: 0 6px 28px rgba(37,211,102,0.45)
}

.messenger__btn--tg {
    background: #27a7e7;
    box-shadow: 0 4px 20px rgba(39,167,231,0.3)
}

.messenger__btn--tg:hover {
    box-shadow: 0 6px 28px rgba(39,167,231,0.45)
}

.messenger__btn-text {
    line-height: 1
}

.messenger__icon {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    opacity: 0.9
}

.hero {
    position: relative;
    min-height: 100dvh;
    display: flex;
    align-items: center
}

.hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0
}

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

.hero__bg-overlay {
    position: absolute;
    inset: 0
}

.hero__bg-overlay--lr {
    background: linear-gradient( to right,#0a0a0f,rgba(10,10,15,0.95) 40%,rgba(10,10,15,0.7) )
}

.hero__bg-overlay--tb {
    background: linear-gradient( to top,#0a0a0f,rgba(10,10,15,0.3) 50%,rgba(10,10,15,0.5) )
}

.hero__container {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-top: 7rem;
    padding-bottom: 2rem
}

@media (min-width: 1024px) {
    .hero__container {
        padding-top:10rem;
        padding-bottom: 5rem
    }
}

.hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center
}

@media (min-width: 1024px) {
    .hero__grid {
        grid-template-columns:1fr 440px
    }
}

@media (min-width: 1280px) {
    .hero__grid {
        grid-template-columns:1fr 480px
    }
}

.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid rgba(80, 162, 255,0.3);
    background: rgba(212,164,74,0.1);
    border-radius: 9999px;
    padding: 0.5rem 1rem;
    margin-bottom: 1.5rem
}

.hero__badge-dot {
    display: block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--primary);
    flex-shrink: 0
}

.hero__badge-text {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--primary)
}

.hero__title {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--fg)
}

@media (min-width: 640px) {
    .hero__title {
        font-size:3rem
    }
}

@media (min-width: 1024px) {
    .hero__title {
        font-size:3.75rem
    }
}

.hero__title-accent {
    color: var(--primary)
}

.hero__desc {
    margin-top: 1.5rem;
    font-size: 1.125rem;
    line-height: 1.75;
    color: var(--muted-fg);
    max-width: 36rem
}

.hero__features {
    display: flex;
    gap: 1rem;
    margin-top: 2rem
}

.hero__feature {
    display: flex;
    align-items: center;
    gap: 0.75rem
}

.hero__feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius);
    background: rgba(212,164,74,0.15);
    color: var(--primary);
    flex-shrink: 0
}

.hero__feature-icon svg {
    width: 1rem;
    height: 1rem
}

.hero__feature-text {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--fg)
}

.hero__cta {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2.5rem
}

@media (min-width: 640px) {
    .hero__cta {
        flex-direction:row;
        align-items: center
    }
}

.hero__btn {
    flex-shrink: 0
}

.hero__messengers {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    color: var(--muted-fg);
    flex-wrap: wrap
}

@media (max-width: 768px) {
    .hero__messengers {
        font-size:0.775rem
    }
}

.hero__messenger-text {
    white-space: nowrap;
	font-size: 24px;
}

.hero__messenger-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    border-radius: var(--radius);
    font-weight: 500;
    color: var(--muted-fg);
    transition: color 0.2s,background 0.2s;
	font-size: 24px;
	border: 1px solid var(--border);
	color: white;
}

.telegram {
	background: #259cd8;
	color: white;
}

.max {
	background: #81028b;
	color: white;
}

.hero__messenger-link:hover {
    color: var(--fg);
    background: rgba(26,26,37,0.8);
	border: 1px solid var(--primary);
}

.hero__messenger-divider {
    color: var(--border)
}

.hero__visual {
    display: none
}

@media (min-width: 1024px) {
    .hero__visual {
        display:block
    }
}

.hero__visual-inner {
    position: relative
}

.hero__card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border);
    box-shadow: 0 25px 50px rgba(0,0,0,0.5),0 0 50px rgba(80, 162, 255,0.05);
    aspect-ratio: 4/3
}

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

.hero__card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,rgba(10,10,15,0.9) 0%,rgba(10,10,15,0.2) 50%,transparent 100%)
}

.hero__card-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between
}

.hero__card-cats-label {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary);
    margin-bottom: 0.375rem
}

.hero__card-cats-list {
    display: flex;
    align-items: center;
    gap: 0.375rem
}

.hero__card-cat {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius);
    border: 1px solid rgba(80, 162, 255,0.3);
    background: rgba(212,164,74,0.15);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--primary);
    backdrop-filter: blur(4px)
}

.hero__card-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: var(--radius-xl);
    border: 1px solid var(--green-border);
    background: var(--green-bg);
    padding: 0.5rem 0.75rem;
    backdrop-filter: blur(4px);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--green-dim)
}

.hero__card-status-dot {
    display: block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--green);
    flex-shrink: 0
}

.hero__float {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    background: rgba(18,18,26,0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 0.75rem;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5)
}

.hero__float--tr {
    top: -1rem;
    right: -1rem
}

.hero__float--bl {
    bottom: -0.75rem;
    left: -1rem
}

.hero__float-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius);
    background: rgba(212,164,74,0.15);
    color: var(--primary);
    flex-shrink: 0
}

.hero__float-icon--green {
    background: rgba(74,222,128,0.15);
    color: var(--green-dim)
}

.hero__float-icon svg {
    width: 1rem;
    height: 1rem
}

.hero__float-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem
}

.hero__float-value {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--fg);
    line-height: 1
}

.hero__float-label {
    font-size: 0.6875rem;
    color: var(--muted-fg)
}

.hero__glow {
    position: absolute;
    inset: -1.5rem;
    z-index: -1;
    border-radius: 1.5rem;
    background: rgba(80, 162, 255,0.05);
    filter: blur(2rem)
}

.hero__dash {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "clients rating" "clients success" "status status";
    gap: 0.625rem
}

.hero__dash-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 1.125rem 1.25rem
}

.hero__dash-card--clients {
    grid-area: clients;
    display: flex;
    flex-direction: column;
    border-color: rgba(80, 162, 255,0.4);
}

.hero__dash-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem
}

.hero__dash-label {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--muted-fg);
    text-transform: uppercase;
    letter-spacing: 0.06em
}

.hero__dash-trend {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--green-dim);
    background: var(--green-bg);
    border: 1px solid var(--green-border);
    border-radius: 2rem;
    padding: 0.2rem 0.5rem
}

.hero__dash-num {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--fg);
    line-height: 1;
    letter-spacing: -0.03em;
    margin: 0.5rem 0 1rem
}

.hero__dash-num--sm {
    font-size: 2rem
}

.hero__dash-plus {
    font-size: 1.5rem;
    color: var(--primary)
}

.hero__dash-bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 3.5rem;
    margin-top: auto
}

.hero__dash-bar {
    flex: 1;
    height: calc(var(--h,0.5) * 100%);
    border-radius: 3px;
    background: var(--primary);
    transform-origin: bottom center;
    animation: dashBarIn 0.7s ease both
}

.hero__dash-bar:nth-child(1) {
    animation-delay: 0.05s
}

.hero__dash-bar:nth-child(2) {
    animation-delay: 0.12s
}

.hero__dash-bar:nth-child(3) {
    animation-delay: 0.19s
}

.hero__dash-bar:nth-child(4) {
    animation-delay: 0.26s
}

.hero__dash-bar:nth-child(5) {
    animation-delay: 0.33s
}

.hero__dash-bar:nth-child(6) {
    animation-delay: 0.40s
}

.hero__dash-bar:nth-child(7) {
    animation-delay: 0.47s
}

.hero__dash-bar--hi {
    background: var(--primary);
    box-shadow: 0 0 10px rgba(212,164,74,0.35)
}

@keyframes dashBarIn {
    from {
        transform: scaleY(0)
    }

    to {
        transform: scaleY(1)
    }
}

.hero__dash-card--rating {
    grid-area: rating;
    display: flex;
    flex-direction: column;
    gap: 0.25rem
}

.hero__dash-stars {
    font-size: 0.9375rem;
    color: var(--primary);
    letter-spacing: 0.08em;
    line-height: 1
}

.hero__dash-card--success {
    grid-area: success;
    display: flex;
    align-items: center;
    gap: 0.875rem
}

.hero__dash-ring {
    position: relative;
    width: 3.25rem;
    height: 3.25rem;
    flex-shrink: 0
}

.hero__dash-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg)
}

.hero__dash-ring-track {
    fill: none;
    stroke: var(--secondary);
    stroke-width: 3.5
}

.hero__dash-ring-fill {
    fill: none;
    stroke: var(--green);
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-dasharray: 106.8;
    stroke-dashoffset: 2.14;
    animation: dashRingIn 1.4s ease 0.3s both
}

@keyframes dashRingIn {
    from {
        stroke-dashoffset: 106.8
    }

    to {
        stroke-dashoffset: 2.14
    }
}

.hero__dash-ring-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--green-dim)
}

.hero__dash-card--status {
    grid-area: status;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 1.125rem 1.25rem
}

.hero__dash-status {
    display: flex;
    align-items: center;
    gap: 0.5rem
}

.hero__dash-status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--green);
    flex-shrink: 0
}

.hero__dash-status-text {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--muted-fg);
    text-transform: uppercase;
    letter-spacing: 0.06em
}

.hero__dash-status-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap
}

.hero__dash-cats {
    display: flex;
    gap: 0.3rem
}

.hero__dash-cat {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.375rem;
    border: 1px solid rgba(80, 162, 255,0.4);
    background: rgba(80, 162, 255,0.08);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--primary)
}

.hero__dash-delivery {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--muted-fg)
}

.trust-bar {
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: rgba(14,14,20,0.8)
}

.trust-bar::before,.trust-bar::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 6rem;
    z-index: 2;
    pointer-events: none
}

.trust-bar::before {
    left: 0;
    background: linear-gradient(to right,rgba(14,14,20,1),transparent)
}

.trust-bar::after {
    right: 0;
    background: linear-gradient(to left,rgba(14,14,20,1),transparent)
}

.trust-bar__track-wrap {
    display: flex;
    overflow: hidden
}

.trust-bar__track {
    display: flex;
    align-items: center;
    gap: 0;
    white-space: nowrap;
    animation: tickerScroll 40s linear infinite;
    will-change: transform
}

.trust-bar__track:hover {
    animation-play-state: paused
}

@keyframes tickerScroll {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(-50%)
    }
}

.trust-bar__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem 1.25rem;
    flex-shrink: 0
}

.trust-bar__item-icon {
    display: flex;
    align-items: center;
    color: var(--primary);
    flex-shrink: 0
}

.trust-bar__item-icon svg {
    width: 0.875rem;
    height: 0.875rem
}

.trust-bar__item-text {
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(240,240,245,0.7);
    letter-spacing: 0.01em
}

.trust-bar__sep {
    font-size: 0.375rem;
    color: rgba(212,164,74,0.35);
    flex-shrink: 0;
    padding: 0 0.25rem
}

.services {
    position: relative;
    padding: 5rem 0
}

@media (min-width: 1024px) {
    .services {
        padding:7rem 0
    }
}

.services__header {
    margin-bottom: 3.5rem
}

.services__grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr
}

@media (min-width: 640px) {
    .services__grid {
        grid-template-columns:repeat(2,1fr)
    }
}

@media (min-width: 1024px) {
    .services__grid {
        grid-template-columns:repeat(3,1fr)
    }
}

.services__card {
    position: relative;
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s,box-shadow 0.3s,border-color 0.3s
}

.services__card:hover {
    border-color: rgba(80, 162, 255,0.4);
    box-shadow: 0 20px 40px rgba(80, 162, 255,0.05)
}

.services__card:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px
}

.services__card--popular {
    border-color: var(--primary)
}

.services__card-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 20;
    background: var(--primary);
    color: var(--primary-fg);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 1rem;
    border-radius: 9999px
}

.services__card-img-wrap {
    position: relative;
    height: 11rem;
    overflow: hidden
}

.services__card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s
}

.services__card:hover .services__card-img {
    transform: scale(1.1)
}

.services__card-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,var(--card) 0%,rgba(18,18,26,0.4) 50%,transparent 100%)
}

.services__card-cat {
    position: absolute;
    bottom: 0.75rem;
    left: 1rem;
    z-index: 1;
    display: inline-block;
    background: rgba(212,164,74,0.9);
    color: var(--primary-fg);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius);
    backdrop-filter: blur(4px)
}

.services__card-body {
    background: var(--card);
    padding: 1.25rem
}

.services__card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--fg)
}

.services__card-desc {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--muted-fg)
}

.services__card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border)
}

.services__card-price {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--primary)
}

.services__card-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem
}

@media (max-width: 768px) {
    .services__card-footer {
        flex-direction:column;
        align-items: unset;
        gap: 12px
    }

    .services__card-actions {
        justify-content: space-between
    }
}

.services__card-detail {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--muted-fg);
    transition: border-color 0.2s,color 0.2s
}

.services__card-detail:hover {
    border-color: rgba(80, 162, 255,0.4);
    color: var(--primary)
}

.services__card-order {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: var(--radius);
    background: var(--primary);
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary-fg);
    transition: background 0.2s;
    border: none;
    cursor: pointer
}

.services__card-order:hover {
    background: var(--primary-hover)
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem
}

.modal--open {
    display: flex
}

.modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px)
}

.modal__dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 32rem;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    padding: 1.5rem
}

@media (max-width: 768px) {
    .modal {
        padding:0
    }

    .modal__dialog {
        max-height: 100vh;
        border-radius: 0
    }
}

.modal__dialog::-webkit-scrollbar {
    display: none
}

.modal__dialog {
    -ms-overflow-style: none;
    scrollbar-width: none
}

.modal__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    color: var(--muted-fg);
    transition: background 0.2s,color 0.2s
}

.modal__close:hover {
    background: var(--secondary);
    color: var(--fg)
}

.modal__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-right: 1.5rem
}

.modal__header-thumb {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-xl);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--secondary)
}

.modal__header-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.modal__header-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--fg)
}

.modal__header-desc {
    font-size: 0.875rem;
    color: var(--muted-fg);
    margin-top: 0.25rem
}

.modal__features {
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    background: rgba(26,26,37,0.3);
    padding: 1rem;
    margin-bottom: 0.75rem
}

.modal__feature {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.25rem 0
}

.modal__feature-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: rgba(212,164,74,0.15);
    flex-shrink: 0
}

.modal__feature-check svg {
    width: 0.75rem;
    height: 0.75rem;
    color: var(--primary)
}

.modal__feature-text {
    font-size: 0.875rem;
    color: var(--fg)
}

.modal__meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 0.75rem;
    margin-top: 0.75rem;
    border-top: 1px solid var(--border)
}

.modal__meta-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--muted-fg)
}

.modal__meta-item svg {
    width: 0.875rem;
    height: 0.875rem;
    color: var(--primary);
    flex-shrink: 0
}

.modal__price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(80, 162, 255,0.3);
    background: rgba(80, 162, 255,0.05);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem
}

.modal__price-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--muted-fg)
}

.modal__price-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary)
}

.modal__form {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.modal__field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem
}

.modal__field-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--fg)
}

.modal__field-optional {
    color: var(--muted-fg);
    font-weight: 400
}

.modal__field-input,.modal__field-textarea {
    width: 100%;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    background: rgba(26,26,37,0.5);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--fg);
    outline: none;
    transition: border-color 0.2s,box-shadow 0.2s;
    resize: none
}

.modal__field-input::placeholder,.modal__field-textarea::placeholder {
    color: var(--muted-fg)
}

.modal__field-input:focus,.modal__field-textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary)
}

.modal__submit {
    width: 100%;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem
}

.modal__privacy {
    text-align: center;
    font-size: 0.75rem;
    color: var(--muted-fg)
}

.modal__success-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
    text-align: center
}

.modal__success-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: rgba(212,164,74,0.15);
    color: var(--primary)
}

.modal__success-title {
    margin-top: 1rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--fg)
}

.modal__success-desc {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--muted-fg);
    max-width: 24rem
}

.modal__success-btn {
    margin-top: 1.5rem
}

.benefits {
    position: relative;
    padding: 5rem 0;
    background: rgba(26,26,37,0.3)
}

@media (min-width: 1024px) {
    .benefits {
        padding:7rem 0
    }
}

.benefits__inner {
    display: flex;
    flex-direction: column;
    gap: 3.5rem
}

@media (min-width: 1024px) {
    .benefits__inner {
        flex-direction:row;
        gap: 5rem
    }
}

.benefits__left {
    flex-shrink: 0
}

@media (min-width: 1024px) {
    .benefits__left {
        width:40%
    }
}

.benefits__sticky {
    position: static
}

@media (min-width: 1024px) {
    .benefits__sticky {
        position:sticky;
        top: 7rem
    }
}

.benefits__title {
    margin-top: 0.75rem;
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--fg);
    line-height: 1.2
}

@media (min-width: 640px) {
    .benefits__title {
        font-size:2.25rem
    }
}

.benefits__title-accent {
    color: var(--primary)
}

.benefits__desc {
    margin-top: 1rem;
    font-size: 1.125rem;
    line-height: 1.75;
    color: var(--muted-fg)
}

.benefits__img-wrap {
    margin-top: 2rem;
    overflow: hidden;
    border-radius: var(--radius-2xl)
}

.benefits__img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block
}

.benefits__right {
    flex: 1
}

.benefits__grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr
}

@media (min-width: 640px) {
    .benefits__grid {
        grid-template-columns:repeat(2,1fr)
    }
}

.benefits__item {
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border);
    background: var(--card);
    padding: 1.5rem;
    transition: border-color 0.3s,box-shadow 0.3s
}

.benefits__item:hover {
    border-color: rgba(80, 162, 255,0.4);
    box-shadow: 0 8px 30px rgba(80, 162, 255,0.05)
}

.benefits__item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-xl);
    background: rgba(212,164,74,0.1);
    color: var(--primary);
    transition: background 0.3s,color 0.3s
}

.benefits__item:hover .benefits__item-icon {
    background: var(--primary);
    color: var(--primary-fg)
}

.benefits__item-icon svg {
    width: 1.25rem;
    height: 1.25rem
}

.benefits__item-title {
    margin-top: 1rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--fg)
}

.benefits__item-desc {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--muted-fg)
}

.cta-banner {
    position: relative;
    overflow: hidden;
    padding: 4rem 0
}

@media (min-width: 1024px) {
    .cta-banner {
        padding:5rem 0
    }
}

.cta-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--primary)
}

.cta-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 50%,rgba(0,0,0,0.1),transparent 60%)
}

.cta-banner__container {
    position: relative;
    z-index: 1
}

.cta-banner__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    text-align: center
}

@media (min-width: 1024px) {
    .cta-banner__inner {
        flex-direction:row;
        text-align: left
    }
}

.cta-banner__text {
    flex: 1
}

.cta-banner__title {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--primary-fg);
    line-height: 1.2
}

@media (min-width: 640px) {
    .cta-banner__title {
        font-size:2.25rem
    }
}

.cta-banner__desc {
    margin-top: 0.75rem;
    font-size: 1.125rem;
    color: rgba(10,10,15,0.8)
}

.cta-banner__actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex-shrink: 0
}

@media (min-width: 640px) {
    .cta-banner__actions {
        flex-direction:row
    }
}

.cta-banner__btn {
    font-size: 1rem;
    font-weight: 700;
    padding: 1.25rem 2rem;
    border-radius: var(--radius)
}

.cta-banner__btn--primary {
    background: var(--primary-fg);
    color: var(--primary);
    border: 1.5px solid var(--primary-fg)
}

.cta-banner__btn--primary:hover {
    background: rgba(10,10,15,0.9)
}

.cta-banner__btn--outline {
    background: transparent;
    color: var(--primary-fg);
    border: 1.5px solid rgba(10,10,15,0.3)
}

.cta-banner__btn--outline:hover {
    background: rgba(10,10,15,0.1)
}

.process {
    position: relative;
    padding: 5rem 0
}

@media (min-width: 1024px) {
    .process {
        padding:7rem 0
    }
}

.process__grid {
    display: grid;
    gap: 1.5rem;
    margin-top: 3.5rem;
    grid-template-columns: 1fr
}

@media (min-width: 640px) {
    .process__grid {
        grid-template-columns:repeat(2,1fr)
    }
}

@media (min-width: 1024px) {
    .process__grid {
        grid-template-columns:repeat(3,1fr)
    }
}

.process__step {
    position: relative;
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border);
    background: var(--card);
    padding: 1.5rem;
    transition: border-color 0.3s,box-shadow 0.3s
}

.process__step:hover {
    border-color: rgba(80, 162, 255,0.4);
    box-shadow: 0 8px 30px rgba(80, 162, 255,0.05)
}

.process__step-top {
    display: flex;
    align-items: flex-start;
    gap: 1rem
}

.process__step-num {
    font-size: 2.5rem;
    font-weight: 900;
    color: rgba(80, 162, 255,0.2);
    line-height: 1;
    flex-shrink: 0
}

.process__step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-xl);
    background: rgba(80, 162, 255,0.1);
    color: var(--primary);
    flex-shrink: 0;
    transition: background 0.3s,color 0.3s
}

.process__step:hover .process__step-icon {
    background: var(--primary);
    color: var(--primary-fg)
}

.process__step-icon svg {
    width: 1.25rem;
    height: 1.25rem
}

.process__step-title {
    margin-top: 1rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--fg)
}

.process__step-desc {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--muted-fg)
}

.guarantee {
    position: relative;
    padding: 4rem 0
}

@media (min-width: 1024px) {
    .guarantee {
        padding:5rem 0
    }
}

.guarantee__inner {
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
    border: 1px solid var(--border);
    background: var(--card)
}

.guarantee__deco {
    position: absolute;
    width: 16rem;
    height: 16rem;
    border-radius: 50%;
    background: rgba(80, 162, 255,0.05);
    filter: blur(3rem);
    pointer-events: none
}

.guarantee__deco--tr {
    top: 0;
    right: 0
}

.guarantee__deco--bl {
    bottom: 0;
    left: 0
}

.guarantee__inner {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 2rem
}

@media (min-width: 1024px) {
    .guarantee__inner {
        flex-direction:row;
        align-items: center;
        gap: 3rem;
        padding: 3rem
    }
}

.guarantee__image {
    flex-shrink: 0
}

@media (min-width: 1024px) {
    .guarantee__image {
        width:40%
    }
}

.guarantee__img {
    border-radius: var(--radius-2xl);
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block
}

.guarantee__content {
    flex: 1
}

.guarantee__title {
    margin-top: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--fg);
    line-height: 1.2
}

@media (min-width: 640px) {
    .guarantee__title {
        font-size:1.875rem
    }
}

.guarantee__desc {
    margin-top: 0.75rem;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--muted-fg)
}

.guarantee__grid {
    display: grid;
    gap: 1rem;
    margin-top: 1.5rem;
    grid-template-columns: 1fr
}

@media (min-width: 640px) {
    .guarantee__grid {
        grid-template-columns:repeat(2,1fr)
    }
}

.guarantee__item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem
}

.guarantee__item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius);
    background: rgba(212,164,74,0.1);
    color: var(--primary);
    flex-shrink: 0
}

.guarantee__item-icon svg {
    width: 1rem;
    height: 1rem
}

.guarantee__item-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--fg)
}

.guarantee__item-desc {
    font-size: 0.75rem;
    color: var(--muted-fg);
    margin-top: 0.125rem
}

.reviews {
    position: relative;
    padding: 5rem 0;
    background: rgba(26,26,37,0.3)
}

@media (min-width: 1024px) {
    .reviews {
        padding:7rem 0
    }
}

.reviews__platforms {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 2.5rem;
    cursor: pointer
}

.reviews__platform {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: 10px;
    background: #ffffff;
    overflow: hidden;
    padding: 10px 20px
}

.reviews__platform img {
    max-height: 80px
}

.reviews__platform-name {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--fg)
}

.reviews__platform-stars {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    color: var(--primary)
}

.reviews__platform-stars svg {
    width: 1rem;
    height: 1rem
}

.reviews__platform-rating {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--primary)
}

.reviews__grid {
    display: grid;
    gap: 1.5rem;
    margin-top: 3rem;
    grid-template-columns: 1fr
}

@media (min-width: 640px) {
    .reviews__grid {
        grid-template-columns:repeat(2,1fr)
    }
}

@media (min-width: 1024px) {
    .reviews__grid {
        grid-template-columns:repeat(3,1fr)
    }
}

.reviews__card {
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border);
    background: var(--card);
    padding: 1.5rem;
    transition: border-color 0.3s,box-shadow 0.3s
}

.reviews__card-stars {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    color: var(--primary)
}

.reviews__card-stars svg {
    width: 1rem;
    height: 1rem
}

.reviews__card-text {
    margin-top: 1rem;
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--muted-fg)
}

.reviews__card-footer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border)
}

.reviews__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: rgba(212,164,74,0.15);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--primary);
    flex-shrink: 0;
    overflow: hidden
}

.reviews__info-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fg)
}

.reviews__info-meta {
    font-size: 0.75rem;
    color: var(--muted-fg);
    margin-top: 0.125rem
}

.calculator {
    position: relative;
    padding: 5rem 0
}

@media (min-width: 1024px) {
    .calculator {
        padding:7rem 0
    }
}

.calculator__wrap {
    margin: 3.5rem auto 0
}

.calculator__inner {
    border-radius: 1.5rem;
    border: 1px solid var(--border);
    background: var(--card);
    padding: 1.75rem
}

@media (min-width: 640px) {
    .calculator__inner {
        padding:2.5rem
    }
}

@media (min-width: 1024px) {
    .calculator__inner {
        padding:3rem
    }
}

.calculator__progress {
    margin-bottom: 2.75rem;
    padding-bottom: 2.25rem;
    border-bottom: 1px solid var(--border)
}

.calculator__progress-track {
    display: flex;
    align-items: flex-start;
    max-width: 36rem;
    margin: auto
}

.calculator__progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0
}

.calculator__progress-dot {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: transparent;
    color: var(--muted-fg);
    font-size: 0.85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.3s,background 0.3s,color 0.3s
}

.calculator__progress-dot svg {
    width: 0.875rem;
    height: 0.875rem
}

.calculator__progress-step--active .calculator__progress-dot {
    border-color: var(--primary);
    background: var(--primary);
    color: #000
}

.calculator__progress-step--done .calculator__progress-dot {
    border-color: var(--primary);
    background: var(--primary);
    color: #000
}

.calculator__progress-lbl {
    font-size: 0.875rem;
    color: var(--muted-fg);
    white-space: nowrap;
    transition: color 0.3s
}

.calculator__progress-step--active .calculator__progress-lbl {
    color: var(--fg);
    font-weight: 600
}

.calculator__progress-step--done .calculator__progress-lbl {
    color: var(--primary)
}

.calculator__progress-line {
    flex: 1;
    height: 2px;
    background: var(--border);
    margin: 1.125rem 0.5rem 0;
    transition: background 0.4s
}

.calculator__progress-line--done {
    background: var(--primary)
}

.calculator__step-panel {
    animation: calcFadeIn 0.3s ease both
}

@keyframes calcFadeIn {
    from {
        opacity: 0;
        transform: translateY(14px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.calculator__step-nav {
    margin-bottom: 1.5rem
}

.calculator__back {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--muted-fg);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    transition: color 0.2s
}

.calculator__back:hover {
    color: var(--fg)
}

.calculator__back svg {
    width: 1rem;
    height: 1rem
}

.calculator__step-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--fg);
    line-height: 1.2;
    margin-bottom: 0.5rem
}

@media (min-width: 768px) {
    .calculator__step-title {
        font-size:1.875rem
    }
}

.calculator__step-hint {
    font-size: 0.9375rem;
    color: var(--muted-fg);
    margin-bottom: 2rem
}

.calculator__cats {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 0.75rem
}

@media (min-width: 480px) {
    .calculator__cats {
        grid-template-columns:repeat(3,1fr)
    }
}

@media (min-width: 900px) {
    .calculator__cats {
        grid-template-columns:repeat(6,1fr)
    }
}

.calculator__cat {
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    background: rgba(26,26,37,0.5);
    padding: 1.375rem 0.75rem 1.125rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s,background 0.2s,transform 0.18s,box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem
}

.calculator__cat:hover {
    border-color: rgba(212,164,74,0.5);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15)
}

.calculator__cat--active {
    border-color: var(--primary);
    background: rgba(212,164,74,0.1);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15)
}

.calculator__cat-icon {
    width: 1.875rem;
    height: 1.875rem;
    color: var(--muted-fg);
    transition: color 0.2s
}

.calculator__cat:hover .calculator__cat-icon,.calculator__cat--active .calculator__cat-icon {
    color: var(--primary)
}

.calculator__cat-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--fg);
    line-height: 1.2
}

.calculator__cat-name {
    display: block;
    font-size: 0.6875rem;
    color: var(--muted-fg);
    line-height: 1.2
}

.calculator__quiz-layout {
    display: grid;
    gap: 1.5rem
}

@media (min-width: 1024px) {
    .calculator__quiz-layout {
        grid-template-columns:1fr 17rem;
        gap: 2.5rem;
        align-items: start
    }
}

.calculator__quiz-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

@media (max-width: 1023px) {
    .calculator__quiz-sidebar {
        display:none
    }
}

.calculator__sidebar-card,.calculator__sidebar-trust {
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    background: rgba(26,26,37,0.5);
    padding: 1.25rem
}

.calculator__sidebar-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted-fg);
    margin-bottom: 1rem
}

.calculator__sidebar-title svg {
    width: 0.875rem;
    height: 0.875rem;
    color: var(--primary);
    flex-shrink: 0
}

.calculator__sidebar-rows {
    display: flex;
    flex-direction: column;
    gap: 0.75rem
}

.calculator__sidebar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8125rem
}

.calculator__sidebar-key {
    color: var(--muted-fg)
}

.calculator__sidebar-val {
    font-weight: 600;
    color: var(--muted-fg);
    font-style: italic
}

.calculator__sidebar-val.is-set {
    color: var(--primary);
    font-style: normal
}

.calculator__sidebar-trust {
    display: flex;
    flex-direction: column;
    gap: 0.875rem
}

.calculator__sidebar-trust-item {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: 0.8125rem;
    color: var(--muted-fg);
    line-height: 1.4
}

.calculator__sidebar-trust-item svg {
    width: 0.9375rem;
    height: 0.9375rem;
    color: var(--primary);
    flex-shrink: 0;
    margin-top: 0.1rem
}

.calculator__step-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border)
}

.calculator__next {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-xl);
    background: var(--primary);
    color: #000;
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    font-family: inherit;
    transition: opacity 0.2s,transform 0.15s,box-shadow 0.2s
}

.calculator__next:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(80, 162, 255,0.3)
}

.calculator__next:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none
}

.calculator__next svg {
    width: 1rem;
    height: 1rem
}

.calculator__options-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 42rem
}

.calculator__option {
    display: flex;
    align-items: center;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    background: rgba(26,26,37,0.5);
    padding: 1.125rem 1.375rem;
    cursor: pointer;
    transition: border-color 0.2s,background 0.2s,transform 0.18s;
    font-family: inherit;
    text-align: left;
    width: 100%
}

.calculator__option:hover {
    border-color: rgba(212,164,74,0.5);
    transform: translateX(5px)
}

.calculator__option--active {
    border-color: var(--primary);
    background: rgba(212,164,74,0.1);
    transform: translateX(5px)
}

.calculator__option-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 1
}

.calculator__option-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--fg)
}

.calculator__option-meta {
    font-size: 0.8125rem;
    color: var(--muted-fg)
}

.calculator__option-extra {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--primary);
    flex-shrink: 0;
    margin-left: 1rem
}

.calculator__option-badge {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.3rem 0.625rem;
    border-radius: 2rem;
    background: rgba(212,164,74,0.15);
    color: var(--primary);
    flex-shrink: 0;
    margin-left: 1rem
}

.calculator__result-grid {
    display: grid;
    gap: 2.5rem
}

@media (min-width: 768px) {
    .calculator__result-grid {
        grid-template-columns:1fr 1fr;
        gap: 2.5rem;
        align-items: start
    }
}

@media (min-width: 1100px) {
    .calculator__result-grid {
        grid-template-columns:1fr 1fr 18rem;
        gap: 3rem
    }
}

.calculator__result-price-col {
}

.calculator__result-form-col {
}

.calculator__expert {
    border-radius: var(--radius-xl);
    border: 1px solid rgba(212,164,74,0.2);
    background: rgba(212,164,74,0.04);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.125rem
}

@media (min-width: 768px) and (max-width:1099px) {
    .calculator__expert {
        grid-column:span 2;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1.5rem
    }

    .calculator__expert-head {
        flex-shrink: 0
    }

    .calculator__expert-quote {
        flex: 1;
        min-width: 200px
    }
}

.calculator__expert-head {
    display: flex;
    align-items: center;
    gap: 1rem
}

.calculator__expert-avatar {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid rgba(80, 162, 255,0.4)
}

.calculator__expert-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top
}

.calculator__expert-name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--fg);
    line-height: 1.2
}

.calculator__expert-role {
    font-size: 0.8125rem;
    color: var(--muted-fg);
    margin-top: 0.125rem
}

.calculator__expert-stats {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--muted-fg);
    margin-top: 0.25rem
}

.calculator__expert-stats span:nth-child(2) {
    color: var(--border)
}

.calculator__expert-quote {
    font-size: 0.875rem;
    color: var(--muted-fg);
    line-height: 1.65;
    border-left: 2px solid rgba(212,164,74,0.5);
    padding-left: 0.875rem;
    margin: 0;
    font-style: italic
}

.calculator__expert-rating {
    display: flex;
    align-items: center;
    gap: 0.5rem
}

.calculator__expert-stars {
    color: var(--primary);
    font-size: 0.9375rem;
    letter-spacing: 0.05em
}

.calculator__expert-rating-val {
    font-size: 0.8125rem;
    color: var(--muted-fg)
}

.calculator__expert-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem
}

.calculator__expert-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.625rem;
    border-radius: 2rem;
    background: rgba(212,164,74,0.1);
    border: 1px solid rgba(212,164,74,0.2);
    color: var(--primary);
    font-size: 0.6875rem;
    font-weight: 600
}

.calculator__expert-badge svg {
    width: 0.75rem;
    height: 0.75rem
}

.calculator__result-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 1rem;
    border-radius: 2rem;
    background: rgba(74,222,128,0.12);
    border: 1px solid rgba(74,222,128,0.25);
    color: #4ade80;
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: 1.75rem
}

.calculator__result-badge svg {
    width: 1rem;
    height: 1rem
}

.calculator__summary-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted-fg)
}

.calculator__summary-total {
    font-size: 3.25rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
    letter-spacing: -0.03em;
    margin-top: 0.375rem;
    margin-bottom: 0.25rem
}

.calculator__breakdown {
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 1rem 1.125rem;
    border-radius: var(--radius-xl);
    background: rgba(0,0,0,0.25);
    border: 1px solid var(--border)
}

.calculator__breakdown-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.875rem
}

.calculator__breakdown-key {
    color: var(--muted-fg)
}

.calculator__breakdown-val {
    font-weight: 600;
    color: var(--fg)
}

.calculator__back--result {
    margin-top: 1.75rem
}

.calculator__form-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--fg);
    margin-bottom: 0.375rem
}

.calculator__form-desc {
    font-size: 0.875rem;
    color: var(--muted-fg);
    margin-bottom: 1.75rem;
    line-height: 1.5
}

.calculator__form {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.calculator__form-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem
}

.calculator__form-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted-fg);
    padding-left: 0.25rem
}

.calculator__form-input {
    width: 100%;
    height: 3rem;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    background: rgba(26,26,37,0.8);
    padding: 0 1rem;
    font-size: 0.9375rem;
    font-family: inherit;
    color: var(--fg);
    outline: none;
    transition: border-color 0.2s,box-shadow 0.2s
}

.calculator__form-input::placeholder {
    color: var(--muted-fg)
}

.calculator__form-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(212,164,74,0.12)
}

.calculator__form-input.is-error {
    border-color: #ef4444
}

.calculator__contact-methods {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 0.625rem
}

.calculator__contact-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 0.875rem 0.5rem;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    background: rgba(26,26,37,0.5);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted-fg);
    cursor: pointer;
    transition: border-color 0.2s,background 0.2s,color 0.2s,transform 0.15s;
    font-family: inherit
}

.calculator__contact-btn:hover {
    border-color: rgba(80, 162, 255,0.4);
    color: var(--fg);
    transform: translateY(-1px)
}

.calculator__contact-btn svg {
    width: 1.25rem;
    height: 1.25rem
}

.calculator__contact-btn--active {
    border-color: var(--primary);
    background: rgba(212,164,74,0.1);
    color: var(--fg)
}

.calculator__contact-btn[data-method="whatsapp"].calculator__contact-btn--active {
    border-color: #25D366;
    background: rgba(37,211,102,0.1);
    color: #25D366
}

.calculator__contact-btn[data-method="telegram"].calculator__contact-btn--active {
    border-color: #2AABEE;
    background: rgba(42,171,238,0.1);
    color: #2AABEE
}

.calculator__form-btn {
    width: 100%;
    height: 3.25rem;
    font-size: 1rem;
    gap: 0.5rem;
    margin-top: 0.25rem
}

.calculator__form-note {
    font-size: 0.6875rem;
    color: var(--muted-fg);
    text-align: center;
    line-height: 1.5
}

.calculator__form-note a {
    text-decoration: underline;
    transition: color 0.2s
}

.calculator__form-note a:hover {
    color: var(--primary)
}

.calculator__success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 4rem 1rem;
    gap: 0.75rem
}

.calculator__success-icon {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: rgba(74,222,128,0.15);
    border: 1px solid rgba(74,222,128,0.3);
    color: #4ade80;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem
}

.calculator__success-icon svg {
    width: 2rem;
    height: 2rem
}

.calculator__success-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--fg)
}

.calculator__success-desc {
    font-size: 0.9375rem;
    color: var(--muted-fg)
}

.faq {
    position: relative;
    padding: 5rem 0;
    background: rgba(26,26,37,0.3)
}

@media (min-width: 1024px) {
    .faq {
        padding:7rem 0
    }
}

.faq__inner {
    display: flex;
    flex-direction: column;
    gap: 3rem
}

@media (min-width: 1024px) {
    .faq__inner {
        flex-direction:row;
        gap: 5rem
    }
}

.faq__left {
    flex-shrink: 0
}

@media (min-width: 1024px) {
    .faq__left {
        width:40%
    }
}

.faq__sticky {
    position: static
}

@media (min-width: 1024px) {
    .faq__sticky {
        position:sticky;
        top: 7rem
    }
}

.faq__title {
    margin-top: 0.75rem;
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--fg);
    line-height: 1.2
}

@media (min-width: 640px) {
    .faq__title {
        font-size:2.25rem
    }
}

.faq__desc {
    margin-top: 1rem;
    font-size: 1.125rem;
    line-height: 1.75;
    color: var(--muted-fg)
}

.faq__btn {
    display: inline-flex;
    margin-top: 1.5rem
}

.faq__right {
    flex: 1
}

.faq__list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem
}

.faq__item {
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    background: var(--card);
    overflow: hidden;
    transition: border-color 0.2s
}

.faq__item--open {
    border-color: rgba(80, 162, 255,0.4)
}

.faq__question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    text-align: left;
    cursor: pointer;
    transition: color 0.2s
}

.faq__question:hover .faq__question-text {
    color: var(--primary)
}

.faq__question-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fg);
    transition: color 0.2s;
    line-height: 1.5
}

.faq__item--open .faq__question-text {
    color: var(--primary)
}

.faq__question-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--muted-fg);
    flex-shrink: 0;
    transition: transform 0.3s
}

.faq__item--open .faq__question-icon {
    transform: rotate(180deg)
}

.faq__answer {
    padding: 0 1.5rem 1.25rem
}

.faq__answer-text {
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--muted-fg)
}

.contact {
    position: relative;
    padding: 5rem 0
}

@media (min-width: 1024px) {
    .contact {
        padding:7rem 0
    }
}

.contact__body {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 64rem;
    margin: 3.5rem auto 0
}

@media (min-width: 1024px) {
    .contact__body {
        flex-direction:row;
        gap: 3rem
    }
}

.contact__info {
    flex-shrink: 0
}

@media (min-width: 1024px) {
    .contact__info {
        width:40%
    }
}

.contact__info-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem
}

.contact__info-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem
}

.contact__info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-xl);
    background: rgba(212,164,74,0.1);
    color: var(--primary);
    flex-shrink: 0
}

.contact__info-icon svg {
    width: 1.25rem;
    height: 1.25rem
}

.contact__info-label {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted-fg)
}

.contact__info-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--fg);
    display: block;
    margin-top: 0.125rem
}

.contact__info-value--link {
    transition: color 0.2s
}

.contact__info-value--link:hover {
    color: var(--primary)
}

.contact__info-sub {
    font-size: 0.875rem;
    color: var(--muted-fg);
    margin-top: 0.125rem
}

.contact__proof {
    margin-top: 2rem;
    border-radius: var(--radius-2xl);
    border: 1px solid rgba(80, 162, 255,0.3);
    background: rgba(80, 162, 255,0.05);
    padding: 1.25rem
}

.contact__proof-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--fg)
}

.contact__proof-sub {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--muted-fg)
}

.contact__proof-avatars {
    display: flex;
    align-items: center;
    margin-top: 0.75rem
}

.contact__proof-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 2px solid var(--card);
    background: rgba(212,164,74,0.2);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary);
    margin-left: -0.5rem;
    overflow: hidden
}

.contact__proof-avatar:first-child {
    margin-left: 0
}

.contact__proof-count {
    display: flex;
    align-items: center;
    height: 2rem;
    border-radius: 9999px;
    border: 2px solid var(--card);
    background: rgba(212,164,74,0.1);
    padding: 0 0.625rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary);
    margin-left: -0.5rem
}

.contact__form-wrap {
    flex: 1
}

.contact__form-card {
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border);
    background: var(--card);
    padding: 1.5rem
}

@media (min-width: 640px) {
    .contact__form-card {
        padding:2rem
    }
}

.contact__form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem
}

.contact__field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem
}

.contact__field-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--fg)
}

.contact__field-optional {
    color: var(--muted-fg);
    font-weight: 400
}

.contact__field-input,.contact__field-select,.contact__field-textarea {
    width: 100%;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    background: rgba(26,26,37,0.5);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--fg);
    outline: none;
    transition: border-color 0.2s,box-shadow 0.2s;
    appearance: none;
    -webkit-appearance: none;
    resize: none
}

.contact__field-input::placeholder,.contact__field-textarea::placeholder {
    color: var(--muted-fg)
}

.contact__field-input:focus,.contact__field-select:focus,.contact__field-textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary)
}

.contact__field-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8a9a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
    cursor: pointer
}

.contact__submit {
    width: 100%;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem
}

.contact__privacy {
    text-align: center;
    font-size: 0.75rem;
    color: var(--muted-fg)
}

.contact__success {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1rem
}

.contact__success-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: rgba(212,164,74,0.15);
    color: var(--primary)
}

.contact__success-title {
    margin-top: 1rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--fg)
}

.contact__success-desc {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--muted-fg);
    max-width: 24rem
}

.contact__success-btn {
    margin-top: 1.5rem
}

.seo-article {
    border-top: 1px solid var(--border);
    background: rgba(26,26,37,0.2);
    padding: 4rem 0
}

@media (min-width: 1024px) {
    .seo-article {
        padding:5rem 0
    }
}

.seo-article__container {
    margin: 0 auto;
    padding: 0 1rem
}

@media (min-width: 640px) {
    .seo-article__container {
        padding:0 1.5rem
    }
}

@media (min-width: 1024px) {
    .seo-article__container {
        padding:0 2rem
    }
}

.seo-article__article h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--fg);
    line-height: 1.3
}

@media (min-width: 640px) {
    .seo-article__article h2 {
        font-size:1.875rem
    }
}

.seo-article__article p {
    margin-top: 1rem;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--muted-fg)
}

.seo-article__article strong {
    color: var(--fg)
}

.seo-article__collapsible {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.7s ease-in-out;
    margin-top: 20px
}

.seo-article__collapsible--open {
    max-height: 5000px
}

.seo-article__article h3 {
    margin-top: 2rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--fg)
}

.seo-article__quote {
    margin: 1.5rem 0;
    padding-left: 1rem;
    border-left: 4px solid var(--primary);
    font-style: italic;
    color: var(--muted-fg)
}

.seo-article__toggle-wrap {
    position: relative;
    margin-top: 1rem
}

.seo-article__fade {
    position: absolute;
    top: -5rem;
    left: 0;
    right: 0;
    height: 5rem;
    background: linear-gradient(to top,rgba(26,26,37,0.2),transparent);
    pointer-events: none;
    opacity: 0.8;
    transition: opacity 0.3s
}

.seo-article__fade--hidden {
    opacity: 0;
    pointer-events: none
}

.seo-article__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
    transition: color 0.2s;
    background: none;
    border: none
}

.seo-article__toggle:hover {
    color: var(--primary-hover)
}

.seo-article__toggle-icon {
    width: 1rem;
    height: 1rem;
    transition: transform 0.3s
}

.seo-article__toggle-icon--rotated {
    transform: rotate(180deg)
}

.sp-hero {
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: flex-end
}

.sp-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1
}

.sp-hero__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.sp-hero__bg-overlay-tb {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,var(--bg) 0%,rgba(10,10,15,0.8) 50%,rgba(10,10,15,0.4) 100%)
}

.sp-hero__bg-overlay-lr {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right,rgba(10,10,15,0.9) 0%,rgba(10,10,15,0.5) 50%,transparent 100%)
}

.sp-hero__inner {
    position: relative;
    z-index: 10;
    width: 100%;
    padding: 8rem 0 4rem
}

@media (min-width: 1024px) {
    .sp-hero__inner {
        padding:8rem 0 5rem
    }
}

.sp-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--muted-fg);
    margin-bottom: 1.5rem;
    flex-wrap: wrap
}

.sp-breadcrumb a {
    transition: color 0.2s
}

.sp-breadcrumb a:hover {
    color: var(--primary)
}

.sp-breadcrumb svg {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0
}

.sp-breadcrumb__current {
    color: var(--fg);
    font-weight: 500
}

.sp-hero__content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem
}

@media (min-width: 1024px) {
    .sp-hero__content {
        flex-direction:row;
        align-items: flex-end;
        justify-content: space-between
    }
}

.sp-hero__left {
    max-width: 40rem
}

.sp-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid rgba(80, 162, 255,0.3);
    background: rgba(212,164,74,0.1);
    border-radius: 9999px;
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary)
}

.sp-hero__title {
    margin-top: 1rem;
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--fg)
}

@media (min-width: 640px) {
    .sp-hero__title {
        font-size:2.25rem
    }
}

@media (min-width: 1024px) {
    .sp-hero__title {
        font-size:3rem
    }
}

.sp-hero__desc {
    margin-top: 1rem;
    font-size: 1.125rem;
    line-height: 1.75;
    color: var(--muted-fg)
}

.sp-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem
}

.sp-hero__phone {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fg);
    transition: color 0.2s
}

.sp-hero__phone:hover {
    color: var(--primary)
}

.sp-hero__phone svg {
    width: 1rem;
    height: 1rem;
    color: var(--primary)
}

.sp-hero__price-card {
    flex-shrink: 0;
    border-radius: var(--radius-2xl);
    border: 1px solid rgba(80, 162, 255,0.3);
    background: rgba(18,18,26,0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 1.5rem;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.4)
}

@media (min-width: 1024px) {
    .sp-hero__price-card {
        min-width:260px
    }
}

.sp-hero__price-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--muted-fg)
}

.sp-hero__price-value {
    margin-top: 0.25rem;
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--primary)
}

.sp-hero__price-meta {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem
}

.sp-hero__price-meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--muted-fg)
}

.sp-hero__price-meta-item svg {
    width: 1rem;
    height: 1rem;
    color: var(--primary);
    flex-shrink: 0
}

.sp-highlights {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: rgba(26,26,37,0.5);
    padding: 2.5rem 0
}

.sp-highlights__grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 1.5rem
}

@media (min-width: 1024px) {
    .sp-highlights__grid {
        grid-template-columns:repeat(4,1fr)
    }
}

.sp-highlights__item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem
}

.sp-highlights__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-lg);
    background: rgba(212,164,74,0.15);
    color: var(--primary);
    flex-shrink: 0
}

.sp-highlights__icon svg {
    width: 1rem;
    height: 1rem
}

.sp-highlights__text {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--fg);
    line-height: 1.4
}

.sp-includes {
    padding: 4rem 0
}

@media (min-width: 1024px) {
    .sp-includes {
        padding:6rem 0
    }
}

.sp-includes__inner {
    display: flex;
    flex-direction: column;
    gap: 3rem
}

@media (min-width: 1024px) {
    .sp-includes__inner {
        flex-direction:row;
        gap: 5rem
    }
}

.sp-includes__left {
    flex-shrink: 0
}

@media (min-width: 1024px) {
    .sp-includes__left {
        width:40%;
        position: sticky;
        top: 7rem;
        align-self: flex-start
    }
}

.sp-includes__eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--primary)
}

.sp-includes__title {
    margin-top: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--fg);
    line-height: 1.25
}

@media (min-width: 640px) {
    .sp-includes__title {
        font-size:1.875rem
    }
}

.sp-includes__title-accent {
    color: var(--primary)
}

.sp-includes__desc {
    margin-top: 0.75rem;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--muted-fg)
}

.sp-includes__img {
    margin-top: 1.5rem;
    overflow: hidden;
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border)
}

.sp-includes__img img {
    width: 100%;
    height: 14rem;
    object-fit: cover;
    display: block
}

.sp-includes__right {
    flex: 1
}

.sp-includes__list {
    display: grid;
    gap: 1rem
}

.sp-includes__item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border);
    background: var(--card);
    padding: 1.25rem;
    transition: border-color 0.3s,box-shadow 0.3s
}

.sp-includes__item:hover {
    border-color: rgba(80, 162, 255,0.4);
    box-shadow: 0 10px 15px -3px rgba(80, 162, 255,0.05)
}

.sp-includes__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-xl);
    background: rgba(212,164,74,0.1);
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 700;
    flex-shrink: 0;
    transition: background 0.2s,color 0.2s
}

.sp-includes__item:hover .sp-includes__num {
    background: var(--primary);
    color: var(--primary-fg)
}

.sp-includes__item-text {
    font-size: 1rem;
    font-weight: 600;
    color: var(--fg);
    line-height: 1.4;
    padding-top: 0.125rem
}

.sp-requirements {
    margin-top: 2.5rem;
    border-radius: var(--radius-2xl);
    border: 1px solid rgba(80, 162, 255,0.3);
    background: rgba(80, 162, 255,0.05);
    padding: 1.5rem
}

.sp-requirements__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--fg)
}

.sp-requirements__title svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--primary);
    flex-shrink: 0
}

.sp-requirements__list {
    margin-top: 1rem;
    display: grid;
    gap: 0.75rem
}

@media (min-width: 640px) {
    .sp-requirements__list {
        grid-template-columns:repeat(2,1fr)
    }
}

.sp-requirements__item {
    display: flex;
    align-items: center;
    gap: 0.625rem
}

.sp-requirements__check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: rgba(212,164,74,0.15);
    flex-shrink: 0
}

.sp-requirements__check svg {
    width: 0.75rem;
    height: 0.75rem;
    color: var(--primary)
}

.sp-requirements__item-text {
    font-size: 0.875rem;
    color: var(--fg)
}

.sp-process {
    padding: 4rem 0;
    background: rgba(26,26,37,0.3)
}

@media (min-width: 1024px) {
    .sp-process {
        padding:6rem 0
    }
}

.sp-process__head {
    max-width: 40rem;
    margin: 0 auto;
    text-align: center
}

.sp-process__eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--primary)
}

.sp-process__title {
    margin-top: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--fg)
}

@media (min-width: 640px) {
    .sp-process__title {
        font-size:1.875rem
    }
}

@media (min-width: 1024px) {
    .sp-process__title {
        font-size:2.25rem
    }
}

.sp-process__desc {
    margin-top: 0.75rem;
    font-size: 1rem;
    color: var(--muted-fg);
    line-height: 1.75
}

.sp-process__grid {
    display: grid;
    gap: 1.5rem;
    margin-top: 3rem
}

@media (min-width: 640px) {
    .sp-process__grid {
        grid-template-columns:repeat(2,1fr)
    }
}

@media (min-width: 1024px) {
    .sp-process__grid {
        grid-template-columns:repeat(4,1fr)
    }
}

.sp-process__step {
    position: relative;
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border);
    background: var(--card);
    padding: 1.5rem;
    transition: border-color 0.3s,box-shadow 0.3s
}

.sp-process__step:hover {
    border-color: rgba(80, 162, 255,0.4);
    box-shadow: 0 10px 15px -3px rgba(80, 162, 255,0.05)
}

.sp-process__step-connector {
    display: none
}

@media (min-width: 1024px) {
    .sp-process__step-connector {
        display:block;
        position: absolute;
        right: -0.75rem;
        top: 50%;
        width: 1.5rem;
        height: 1px;
        background: var(--border)
    }
}

.sp-process__step:last-child .sp-process__step-connector {
    display: none
}

.sp-process__step-num {
    font-size: 2.5rem;
    font-weight: 900;
    color: rgba(212,164,74,0.2);
    line-height: 1
}

.sp-process__step-title {
    margin-top: 0.75rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--fg)
}

.sp-process__step-desc {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--muted-fg)
}

.sp-guarantees {
    padding: 4rem 0
}

@media (min-width: 1024px) {
    .sp-guarantees {
        padding:6rem 0
    }
}

.sp-guarantees__card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-3xl,1.5rem);
    border: 1px solid var(--border);
    background: var(--card)
}

.sp-guarantees__deco-1,.sp-guarantees__deco-2 {
    position: absolute;
    width: 16rem;
    height: 16rem;
    border-radius: 50%;
    background: rgba(80, 162, 255,0.05);
    filter: blur(3rem);
    pointer-events: none
}

.sp-guarantees__deco-1 {
    top: 0;
    right: 0
}

.sp-guarantees__deco-2 {
    bottom: 0;
    left: 0
}

.sp-guarantees__inner {
    position: relative;
    padding: 2rem
}

@media (min-width: 1024px) {
    .sp-guarantees__inner {
        padding:3rem
    }
}

.sp-guarantees__head {
    max-width: 40rem;
    margin: 0 auto;
    text-align: center
}

.sp-guarantees__eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--primary)
}

.sp-guarantees__title {
    margin-top: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--fg)
}

@media (min-width: 640px) {
    .sp-guarantees__title {
        font-size:1.875rem
    }
}

.sp-guarantees__grid {
    display: grid;
    gap: 1.5rem;
    margin-top: 2.5rem
}

@media (min-width: 640px) {
    .sp-guarantees__grid {
        grid-template-columns:repeat(2,1fr)
    }
}

@media (min-width: 1024px) {
    .sp-guarantees__grid {
        grid-template-columns:repeat(4,1fr)
    }
}

.sp-guarantees__item {
    text-align: center
}

.sp-guarantees__item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius-2xl);
    background: rgba(212,164,74,0.1);
    color: var(--primary);
    margin: 0 auto
}

.sp-guarantees__item-icon svg {
    width: 1.5rem;
    height: 1.5rem
}

.sp-guarantees__item-title {
    margin-top: 1rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--fg)
}

.sp-guarantees__item-desc {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--muted-fg);
    line-height: 1.6
}

.sp-cta {
    position: relative;
    overflow: hidden;
    padding: 4rem 0
}

@media (min-width: 1024px) {
    .sp-cta {
        padding:5rem 0
    }
}

.sp-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--primary)
}

.sp-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 50%,rgba(0,0,0,0.1),transparent 60%)
}

.sp-cta__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    text-align: center
}

@media (min-width: 1024px) {
    .sp-cta__inner {
        flex-direction:row;
        text-align: left
    }
}

.sp-cta__text {
    flex: 1
}

.sp-cta__title {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--primary-fg)
}

@media (min-width: 640px) {
    .sp-cta__title {
        font-size:2.25rem
    }
}

.sp-cta__desc {
    margin-top: 0.75rem;
    font-size: 1.125rem;
    color: rgba(10,10,15,0.8)
}

.sp-cta__actions {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

@media (min-width: 640px) {
    .sp-cta__actions {
        flex-direction:row
    }
}

.sp-cta__btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: var(--radius-xl);
    background: var(--primary-fg);
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
    cursor: pointer;
    border: none;
    transition: background 0.2s
}

.sp-cta__btn-primary:hover {
    background: rgba(240,240,245,0.9)
}

.sp-cta__btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: var(--radius-xl);
    border: 1.5px solid rgba(10,10,15,0.3);
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-fg);
    background: transparent;
    transition: background 0.2s
}

.sp-cta__btn-secondary:hover {
    background: rgba(10,10,15,0.1)
}

.sp-faq {
    padding: 4rem 0;
    background: rgba(26,26,37,0.3)
}

@media (min-width: 1024px) {
    .sp-faq {
        padding:6rem 0
    }
}

.sp-faq__inner {
    display: flex;
    flex-direction: column;
    gap: 3rem
}

@media (min-width: 1024px) {
    .sp-faq__inner {
        flex-direction:row;
        gap: 5rem
    }
}

.sp-faq__left {
    flex-shrink: 0
}

@media (min-width: 1024px) {
    .sp-faq__left {
        width:40%;
        position: sticky;
        top: 7rem;
        align-self: flex-start
    }
}

.sp-faq__eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--primary)
}

.sp-faq__title {
    margin-top: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--fg);
    line-height: 1.3
}

@media (min-width: 640px) {
    .sp-faq__title {
        font-size:1.875rem
    }
}

.sp-faq__desc {
    margin-top: 0.75rem;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--muted-fg)
}

.sp-faq__right {
    flex: 1
}

.sp-faq__list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem
}

.sp-faq__item {
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    background: var(--card);
    overflow: hidden;
    transition: border-color 0.2s
}

.sp-faq__item--open {
    border-color: rgba(80, 162, 255,0.4)
}

.sp-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1.25rem 1.5rem;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    gap: 1rem
}

.sp-faq__question-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fg);
    line-height: 1.4;
    transition: color 0.2s
}

.sp-faq__item--open .sp-faq__question-text {
    color: var(--primary)
}

.sp-faq__chevron {
    width: 1rem;
    height: 1rem;
    color: var(--muted-fg);
    flex-shrink: 0;
    transition: transform 0.3s
}

.sp-faq__item--open .sp-faq__chevron {
    transform: rotate(180deg)
}

.sp-faq__answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease
}

.sp-faq__item--open .sp-faq__answer {
    grid-template-rows: 1fr
}

.sp-faq__answer-inner {
    overflow: hidden
}

.sp-faq__answer-text {
    padding: 0 1.5rem 1.25rem;
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--muted-fg)
}

.sp-other {
    padding: 4rem 0
}

@media (min-width: 1024px) {
    .sp-other {
        padding:6rem 0
    }
}

.sp-other__head {
    max-width: 40rem;
    margin: 0 auto;
    text-align: center
}

.sp-other__eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--primary)
}

.sp-other__title {
    margin-top: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--fg)
}

@media (min-width: 640px) {
    .sp-other__title {
        font-size:1.875rem
    }
}

.sp-other__grid {
    display: grid;
    gap: 1rem;
    margin-top: 2.5rem
}

@media (min-width: 640px) {
    .sp-other__grid {
        grid-template-columns:repeat(2,1fr)
    }
}

@media (min-width: 1024px) {
    .sp-other__grid {
        grid-template-columns:repeat(5,1fr)
    }
}

.sp-other__card {
    display: block;
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border);
    background: var(--card);
    padding: 1.25rem;
    transition: border-color 0.3s,box-shadow 0.3s,transform 0.3s
}

.sp-other__card:hover {
    border-color: rgba(80, 162, 255,0.4);
    box-shadow: 0 10px 15px -3px rgba(80, 162, 255,0.05);
    transform: translateY(-4px)
}

.sp-other__card-img-wrap {
    overflow: hidden;
    border-radius: var(--radius-xl)
}

.sp-other__card-img {
    width: 100%;
    height: 7rem;
    object-fit: cover;
    transition: transform 0.5s;
    display: block
}

.sp-other__card:hover .sp-other__card-img {
    transform: scale(1.1)
}

.sp-other__card-cat {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary)
}

.sp-other__card-name {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--fg)
}

.sp-other__card-price {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--primary)
}

.sp-seo {
    border-top: 1px solid var(--border);
    background: rgba(26,26,37,0.2);
    padding: 4rem 0
}

@media (min-width: 1024px) {
    .sp-seo {
        padding:5rem 0
    }
}

.sp-seo__article {
    margin: 0 auto
}

.sp-seo__title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--fg)
}

@media (min-width: 640px) {
    .sp-seo__title {
        font-size:1.875rem
    }
}

.sp-seo__first {
    margin-top: 1.5rem;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--muted-fg)
}

.sp-seo__collapsible {
    overflow: hidden;
    transition: max-height 0.7s ease-in-out;
    max-height: 0
}

.sp-seo__collapsible--expanded {
    max-height: 5000px
}

.sp-seo__paragraph {
    margin-top: 1rem;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--muted-fg)
}

.sp-seo__toggle-wrap {
    position: relative;
    margin-top: 1rem
}

.sp-seo__fade {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    height: 5rem;
    background: linear-gradient(to top,rgba(26,26,37,0.2),transparent);
    pointer-events: none;
    transition: opacity 0.3s
}

.sp-seo__fade--hidden {
    opacity: 0
}

.sp-seo__toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s
}

.sp-seo__toggle-btn:hover {
    color: rgba(212,164,74,0.8)
}

.sp-seo__toggle-btn svg {
    width: 1rem;
    height: 1rem;
    transition: transform 0.3s
}

.sp-seo__toggle-btn--expanded svg {
    transform: rotate(180deg)
}

.sp-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s
}

.sp-modal-overlay--open {
    opacity: 1;
    pointer-events: all
}

.sp-modal {
    width: 100%;
    max-width: 32rem;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border);
    background: var(--card);
    padding: 1.5rem;
    transform: scale(0.97);
    transition: transform 0.25s
}

.sp-modal-overlay--open .sp-modal {
    transform: scale(1)
}

.sp-modal__close {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 0.5rem
}

.sp-modal__close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: none;
    background: var(--secondary);
    color: var(--muted-fg);
    cursor: pointer;
    transition: color 0.2s
}

.sp-modal__close-btn:hover {
    color: var(--fg)
}

.sp-modal__close-btn svg {
    width: 1rem;
    height: 1rem
}

.sp-modal__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--fg)
}

.sp-modal__desc {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--muted-fg)
}

.sp-modal__price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(80, 162, 255,0.3);
    background: rgba(80, 162, 255,0.05);
    padding: 0.75rem 1rem;
    margin: 1rem 0
}

.sp-modal__price-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--muted-fg)
}

.sp-modal__price-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary)
}

.sp-modal__form {
    display: flex;
    flex-direction: column;
    gap: 0.875rem
}

.sp-modal__field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem
}

.sp-modal__label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--fg)
}

.sp-modal__optional {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--muted-fg)
}

.sp-modal__input,.sp-modal__textarea {
    width: 100%;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0.6875rem 1rem;
    font-size: 0.875rem;
    font-family: inherit;
    color: var(--fg);
    outline: none;
    transition: border-color 0.2s,background 0.2s
}

.sp-modal__input::placeholder,.sp-modal__textarea::placeholder {
    color: rgba(255,255,255,0.2)
}

.sp-modal__input:hover,.sp-modal__textarea:hover {
    border-color: rgba(80, 162, 255,0.3)
}

.sp-modal__input:focus,.sp-modal__textarea:focus {
    border-color: var(--primary);
    background: rgba(212,164,74,0.03);
    box-shadow: 0 0 0 3px rgba(212,164,74,0.08)
}

.sp-modal__textarea {
    resize: vertical;
    min-height: 4.5rem;
    line-height: 1.6
}

.sp-modal__submit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.25rem
}

.sp-modal__privacy {
    text-align: center;
    font-size: 0.75rem;
    color: var(--muted-fg)
}

.sp-modal__privacy a {
    text-decoration: underline;
    transition: color 0.2s
}

.sp-modal__privacy a:hover {
    color: var(--primary)
}

.sp-modal__success {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 1rem
}

.sp-modal__success-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: rgba(212,164,74,0.15);
    color: var(--primary)
}

.sp-modal__success-title {
    margin-top: 1rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--fg)
}

.sp-modal__success-desc {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--muted-fg);
    max-width: 20rem
}

.r2-hero {
    padding-top: 7rem;
    padding-bottom: 3rem
}

@media (min-width: 1024px) {
    .r2-hero {
        padding-top:9rem;
        padding-bottom: 4rem
    }
}

.r2-hero__inner {
    max-width: 52rem
}

.r2-hero__sup {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--primary);
    margin-bottom: 1.25rem
}

.r2-hero__sup-dot {
    display: block;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: var(--primary);
    animation: pulse-glow 2s ease-in-out infinite;
    flex-shrink: 0
}

.r2-hero__title {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--fg)
}

@media (min-width: 640px) {
    .r2-hero__title {
        font-size:3.5rem
    }
}

@media (min-width: 1024px) {
    .r2-hero__title {
        font-size:4.5rem
    }
}

.r2-hero__title-accent {
    color: var(--primary)
}

.r2-hero__meta {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: 1.25rem;
    flex-wrap: wrap
}

.r2-hero__meta-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    color: var(--muted-fg)
}

.r2-hero__meta-item svg {
    width: 0.875rem;
    height: 0.875rem;
    color: var(--primary);
    flex-shrink: 0
}

.r2-hero__meta-sep {
    width: 1px;
    height: 0.875rem;
    background: var(--border)
}

.r2-search {
    margin-top: 2rem;
    max-width: 36rem
}

.r2-search__wrap {
    position: relative;
    display: flex;
    align-items: center
}

.r2-search__icon {
    position: absolute;
    left: 1rem;
    width: 1rem;
    height: 1rem;
    color: var(--muted-fg);
    pointer-events: none;
    flex-shrink: 0
}

.r2-search__input {
    width: 100%;
    height: 3rem;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    background: transparent;
    padding: 0 2.75rem 0 2.75rem;
    font-size: 0.9375rem;
    color: var(--fg);
    outline: none;
    transition: border-color 0.2s,box-shadow 0.2s
}

.r2-search__input::placeholder {
    color: var(--muted-fg)
}

.r2-search__input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px rgba(212,164,74,0.25)
}

.r2-search__clear {
    position: absolute;
    right: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: none;
    background: var(--secondary);
    color: var(--muted-fg);
    cursor: pointer;
    transition: color 0.15s
}

.r2-search__clear:hover {
    color: var(--fg)
}

.r2-search__clear svg {
    width: 0.75rem;
    height: 0.75rem
}

.r2-search__hint {
    margin-top: 0.625rem;
    font-size: 0.8125rem;
    color: var(--muted-fg)
}

.r2-alpha {
    position: sticky;
    top: 60px;
    z-index: 40;
    border-bottom: 1px solid var(--border);
    background: rgba(10,10,15,0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px)
}

.r2-alpha__inner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0
}

.r2-alpha__scroll {
    display: flex;
    align-items: center;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 0.125rem
}

.r2-alpha__scroll::-webkit-scrollbar {
    display: none
}

.r2-alpha__btn {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md,0.375rem);
    border: none;
    background: transparent;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--muted-fg);
    cursor: pointer;
    transition: color 0.15s,background 0.15s
}

.r2-alpha__btn:hover:not(:disabled) {
    color: var(--primary);
    background: rgba(212,164,74,0.08)
}

.r2-alpha__btn--active {
    color: var(--primary) !important;
    font-weight: 700
}

.r2-alpha__btn:disabled {
    color: rgba(138,138,154,0.2);
    cursor: default
}

.r2-alpha__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    padding-left: 0.5rem;
    border-left: 1px solid var(--border)
}

.r2-alpha__action-btn {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--muted-fg);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-md,0.375rem);
    transition: color 0.15s,background 0.15s;
    white-space: nowrap
}

.r2-alpha__action-btn:hover {
    color: var(--primary);
    background: rgba(212,164,74,0.08)
}

.r2-list {
    padding: 2rem 0 5rem
}

.r2-list__groups {
    display: flex;
    flex-direction: column
}

.r2-group {
    border-bottom: 1px solid var(--border)
}

.r2-group__head {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 2rem 0 0.75rem
}

.r2-group__letter {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--primary);
    width: 1.5rem;
    flex-shrink: 0
}

.r2-group__count {
    font-size: 0.75rem;
    color: var(--muted-fg)
}

.r2-region {
    border-top: 1px solid rgba(255,255,255,0.04)
}

.r2-region__row {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 1rem;
    padding: 0.875rem 0;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: opacity 0.15s
}

.r2-region__row:hover .r2-region__name {
    color: var(--primary)
}

.r2-region__index {
    font-size: 0.6875rem;
    font-weight: 500;
    color: rgba(138,138,154,0.4);
    width: 1.5rem;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums
}

.r2-region__name {
    flex: 1;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--fg);
    transition: color 0.15s;
    line-height: 1.4
}

.r2-region--open .r2-region__name {
    color: var(--primary)
}

.r2-region__badge {
    font-size: 0.75rem;
    color: var(--muted-fg);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums
}

.r2-region__chevron {
    width: 0.875rem;
    height: 0.875rem;
    color: var(--muted-fg);
    flex-shrink: 0;
    transition: transform 0.25s ease,color 0.15s
}

.r2-region--open .r2-region__chevron {
    transform: rotate(90deg);
    color: var(--primary)
}

.r2-region__cities {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease
}

.r2-region--open .r2-region__cities {
    grid-template-rows: 1fr
}

.r2-region__cities-inner {
    overflow: hidden
}

.r2-region__cities-body {
    padding: 0 0 1.25rem 2.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem
}

.r2-city-tag {
    display: inline-flex;
    align-items: center;
    font-size: 0.8125rem;
    color: var(--muted-fg);
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    border: 1px solid rgba(255,255,255,0.07);
    background: rgba(255,255,255,0.03);
    transition: color 0.15s,border-color 0.15s,background 0.15s;
    line-height: 1.4
}

.r2-city-tag:hover {
    color: var(--primary);
    border-color: rgba(80, 162, 255,0.3);
    background: rgba(212,164,74,0.06)
}

.r2-empty {
    padding: 5rem 0;
    text-align: center
}

.r2-empty__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--fg)
}

.r2-empty__desc {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--muted-fg)
}

.r2-empty__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--primary);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: opacity 0.15s
}

.r2-empty__btn:hover {
    opacity: 0.75
}

.r2-cta {
    border-top: 1px solid var(--border);
    padding: 4rem 0
}

.r2-cta__inner {
    display: flex;
    flex-direction: column;
    gap: 2rem
}

@media (min-width: 768px) {
    .r2-cta__inner {
        flex-direction:row;
        align-items: center;
        justify-content: space-between;
        gap: 3rem
    }
}

.r2-cta__text {
}

.r2-cta__title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--fg);
    letter-spacing: -0.02em
}

.r2-cta__desc {
    margin-top: 0.5rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--muted-fg)
}

.r2-cta__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    flex-wrap: wrap
}

.hero--landing .hero__grid {
    grid-template-columns: 1fr !important
}

.hero--landing .hero__content {
    max-width: 52rem
}

.lp-benefits {
    padding: 4rem 0;
    border-top: 1px solid var(--border)
}

.lp-benefits__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem
}

@media (min-width: 640px) {
    .lp-benefits__grid {
        grid-template-columns:repeat(2,1fr)
    }
}

@media (min-width: 1024px) {
    .lp-benefits__grid {
        grid-template-columns:repeat(4,1fr)
    }
}

.lp-benefits__card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    transition: border-color 0.2s
}

.lp-benefits__card:hover {
    border-color: rgba(80, 162, 255,0.3)
}

.lp-benefits__icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius);
    background: rgba(212,164,74,0.1);
    border: 1px solid rgba(212,164,74,0.2);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem
}

.lp-benefits__icon svg {
    width: 1.125rem;
    height: 1.125rem
}

.lp-benefits__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--fg);
    margin-bottom: 0.5rem
}

.lp-benefits__desc {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--muted-fg)
}

.lp-process {
    padding: 4rem 0;
    border-top: 1px solid var(--border)
}

.lp-process__header {
    margin-bottom: 3rem
}

.lp-process__steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem
}

@media (min-width: 768px) {
    .lp-process__steps {
        grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
        align-items: stretch;
        gap: 0
    }
}

.lp-process__step {
    padding: 1.5rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl)
}

.lp-process__step-num {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: rgba(212,164,74,0.15);
    border: 1px solid rgba(80, 162, 255,0.3);
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.875rem
}

.lp-process__step-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--fg);
    margin-bottom: 0.375rem
}

.lp-process__step-desc {
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--muted-fg)
}

.lp-process__connector {
    display: none
}

@media (min-width: 768px) {
    .lp-process__connector {
        display:flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        flex-shrink: 0
    }

    .lp-process__connector::after {
        content: '';
        display: block;
        width: 100%;
        height: 1px;
        background: var(--border)
    }
}

.cp-hero {
    position: relative;
    overflow: hidden;
    padding-top: 7rem;
    padding-bottom: 4rem
}

@media (min-width: 1024px) {
    .cp-hero {
        padding-top:9rem;
        padding-bottom: 5rem
    }
}

.cp-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top,rgba(212,164,74,0.08),transparent 60%);
    pointer-events: none
}

.cp-hero__inner {
    max-width: 48rem;
    margin: 0 auto;
    text-align: center
}

.cp-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid rgba(80, 162, 255,0.3);
    background: rgba(212,164,74,0.1);
    border-radius: 9999px;
    padding: 0.5rem 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--primary)
}

.cp-hero__badge svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0
}

.cp-hero__title {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--fg)
}

@media (min-width: 640px) {
    .cp-hero__title {
        font-size:3rem
    }
}

@media (min-width: 1024px) {
    .cp-hero__title {
        font-size:3.75rem
    }
}

.cp-hero__title-accent {
    color: var(--primary)
}

.cp-hero__desc {
    margin-top: 1.5rem;
    font-size: 1.125rem;
    line-height: 1.75;
    color: var(--muted-fg);
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto
}

.cp-trust {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: rgba(18,18,26,0.5)
}

.cp-trust__grid {
    display: grid;
    grid-template-columns: repeat(2,1fr)
}

@media (min-width: 1024px) {
    .cp-trust__grid {
        grid-template-columns:repeat(4,1fr)
    }
}

.cp-trust__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 1rem;
    text-align: center
}

@media (min-width: 1024px) {
    .cp-trust__item:not(:last-child) {
        border-right:1px solid var(--border)
    }
}

.cp-trust__icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--primary)
}

.cp-trust__value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--fg);
    line-height: 1
}

.cp-trust__label {
    font-size: 0.75rem;
    color: var(--muted-fg)
}

.cp-main {
    padding: 4rem 0
}

@media (min-width: 1024px) {
    .cp-main {
        padding:6rem 0
    }
}

.cp-main__inner {
    display: flex;
    flex-direction: column;
    gap: 3rem
}

@media (min-width: 1024px) {
    .cp-main__inner {
        flex-direction:row;
        gap: 4rem
    }
}

.cp-info {
    flex-shrink: 0
}

@media (min-width: 1024px) {
    .cp-info {
        width:40%
    }
}

.cp-info__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--fg)
}

@media (min-width: 640px) {
    .cp-info__title {
        font-size:1.875rem
    }
}

.cp-info__desc {
    margin-top: 0.75rem;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--muted-fg)
}

.cp-methods {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem
}

.cp-method {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border);
    background: var(--card);
    padding: 1rem
}

.cp-method--accent {
    border-color: rgba(80, 162, 255,0.3);
    background: rgba(80, 162, 255,0.05)
}

.cp-method__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-xl);
    background: rgba(212,164,74,0.1);
    color: var(--primary);
    flex-shrink: 0
}

.cp-method--accent .cp-method__icon {
    background: var(--primary);
    color: var(--primary-fg)
}

.cp-method__icon svg {
    width: 1.25rem;
    height: 1.25rem
}

.cp-method__label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted-fg)
}

.cp-method__value {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--fg);
    transition: color 0.2s
}

a.cp-method__value:hover {
    color: var(--primary)
}

.cp-method__sub {
    font-size: 0.875rem;
    color: var(--muted-fg)
}

.cp-messengers {
    margin-top: 2rem
}

.cp-messengers__title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--fg);
    margin-bottom: 0.75rem
}

.cp-messengers__list {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap
}

.cp-messengers__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    background: var(--card);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--fg);
    transition: border-color 0.2s,color 0.2s
}

.cp-messengers__btn:hover {
    border-color: rgba(80, 162, 255,0.4);
    color: var(--primary)
}

.cp-messengers__dot {
    display: block;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    flex-shrink: 0
}

.cp-map {
    margin-top: 2rem;
    overflow: hidden;
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border);
    background: var(--card)
}

.cp-map__placeholder {
    position: relative;
    aspect-ratio: 16/9;
    background: var(--secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem
}

.cp-map__grid {
    position: absolute;
    inset: 0;
    opacity: 0.03;
    background-image: linear-gradient(rgba(212,164,74,1) 1px,transparent 1px),linear-gradient(90deg,rgba(212,164,74,1) 1px,transparent 1px);
    background-size: 40px 40px
}

.cp-map__pin {
    width: 2rem;
    height: 2rem;
    color: var(--primary);
    position: relative;
    z-index: 1
}

.cp-map__address {
    text-align: center;
    position: relative;
    z-index: 1
}

.cp-map__address-main {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--fg)
}

.cp-map__address-sub {
    font-size: 0.75rem;
    color: var(--muted-fg)
}

.cp-form-col {
    flex: 1
}

.cp-form-card {
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border);
    background: var(--card);
    padding: 1.5rem
}

@media (min-width: 640px) {
    .cp-form-card {
        padding:2rem
    }
}

@media (min-width: 1024px) {
    .cp-form-card {
        position:sticky;
        top: 6rem
    }
}

.cp-form-card__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--fg)
}

@media (min-width: 640px) {
    .cp-form-card__title {
        font-size:1.5rem
    }
}

.cp-form-card__desc {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--muted-fg)
}

.cp-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 1.5rem
}

.cp-form__row {
    display: grid;
    gap: 1.25rem
}

@media (min-width: 640px) {
    .cp-form__row {
        grid-template-columns:repeat(2,1fr)
    }
}

.cp-form__privacy a {
    text-decoration: underline;
    transition: color 0.2s
}

.cp-form__privacy a:hover {
    color: var(--primary)
}

.cp-cta {
    position: relative;
    overflow: hidden;
    padding: 4rem 0
}

@media (min-width: 1024px) {
    .cp-cta {
        padding:5rem 0
    }
}

.cp-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--primary)
}

.cp-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 50%,rgba(0,0,0,0.1),transparent 60%)
}

.cp-cta__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    text-align: center
}

@media (min-width: 1024px) {
    .cp-cta__inner {
        flex-direction:row;
        text-align: left
    }
}

.cp-cta__text {
    flex: 1
}

.cp-cta__title {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--primary-fg)
}

@media (min-width: 640px) {
    .cp-cta__title {
        font-size:2.25rem
    }
}

.cp-cta__desc {
    margin-top: 0.75rem;
    font-size: 1.125rem;
    color: rgba(10,10,15,0.8)
}

.cp-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: var(--radius-xl);
    background: var(--primary-fg);
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
    transition: background 0.2s;
    flex-shrink: 0;
    white-space: nowrap
}

.cp-cta__btn:hover {
    background: rgba(240,240,245,0.9)
}

.cp-cta__btn svg {
    width: 1.25rem;
    height: 1.25rem
}

.e404 {
    min-height: 80vh;
    display: flex;
    align-items: center;
    padding: 5rem 0 4rem
}

.e404__container {
    max-width: 760px
}

.e404__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2.5rem
}

.e404__deco {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    user-select: none
}

.e404__num {
    font-size: clamp(6rem,18vw,10rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.05em;
    background: linear-gradient(135deg,var(--gold) 0%,var(--gold-dim) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0.25
}

.e404__shield {
    width: clamp(80px,15vw,130px);
    filter: drop-shadow(0 0 24px rgba(212,164,74,0.25));
    animation: e404-float 4s ease-in-out infinite
}

@keyframes e404-float {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-10px)
    }
}

.e404__eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.5rem
}

.e404__title {
    font-size: clamp(1.75rem,5vw,2.75rem);
    font-weight: 800;
    color: var(--white);
    line-height: 1.2;
    margin-bottom: 1rem
}

.e404__desc {
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.7;
    max-width: 480px;
    margin: 0 auto
}

.e404__actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center
}

.e404__btn-main {
    min-width: 180px
}

.e404__btn-contacts {
    min-width: 180px
}

.e404__links {
    width: 100%
}

.e404__links-label {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 1rem
}

.e404__links-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 0.625rem;
    margin-bottom: 1.25rem
}

.e404__link-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.875rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: border-color 0.2s,background 0.2s,transform 0.15s
}

.e404__link-card:hover {
    border-color: var(--gold);
    background: rgba(212,164,74,0.06);
    transform: translateY(-2px)
}

.e404__link-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    background: rgba(212,164,74,0.12);
    color: var(--gold);
    border-radius: 4px;
    letter-spacing: 0.03em
}

.e404__link-name {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500
}

.e404__links-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.875rem
}

.e404__link {
    font-size: 0.875rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s
}

.e404__link:hover {
    color: var(--gold)
}

.e404__links-sep {
    color: var(--border)
}

@media (max-width: 600px) {
    .e404__links-grid {
        grid-template-columns:repeat(2,1fr)
    }

    .e404__num {
        font-size: 5rem
    }

    .e404__shield {
        width: 70px
    }

    .hero__features {
        flex-direction: column
    }
}

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

    .e404__actions {
        flex-direction: column;
        align-items: stretch
    }
}