.order-hero {
    position:   relative;
    padding:    100px 0 96px;
    overflow:   hidden;
    background: transparent;
}

.order-hero__bg {
    position:   absolute;
    inset:      0;
    background:
        var(--gradient-hero),
        linear-gradient(180deg, rgba(10, 10, 31, 0.55) 0%, rgba(10, 10, 31, 0.32) 42%, rgba(10, 10, 31, 0.78) 100%),
        url("../../img/bg.jpg") center / cover no-repeat;
    pointer-events: none;
}

.order-hero__wrp {
    position:   relative;
    z-index:    2;
    max-width:  720px;
    margin:     0 auto;
    text-align: center;
}

.order-hero__wrp::before {
    content:        '';
    position:       absolute;
    z-index:        -1;
    top:            50%;
    left:           50%;
    width:          120%;
    height:         150%;
    transform:      translate(-50%, -50%);
    background:     radial-gradient(ellipse 50% 50% at 50% 50%, rgba(10, 10, 31, 0.55) 0%, transparent 72%);
    pointer-events: none;
}

.order-hero__title {
    font-size:      64px;
    font-weight:    600;
    line-height:    1.05;
    margin-bottom:  20px;
    letter-spacing: -0.02em;
}

.order-hero__desc {
    font-size:     17px;
    line-height:   1.7;
    max-width:     520px;
    margin:        0 auto 40px;
}

.order-hero__badges {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             12px;
    flex-wrap:       wrap;
    margin-bottom:   40px;
}

.order-badge {
    display:       flex;
    align-items:   center;
    gap:           8px;
    padding:       8px 16px;
    background:    var(--color-card);
    border:        1px solid var(--color-border);
    border-radius: 40px;
    font-size:     13px;
    color:         var(--color-muted);
}

.order-badge svg {
    width:       16px;
    height:      16px;
    color:       var(--color-primary);
    flex-shrink: 0;
}

.packages { padding: var(--section-gap) 0; }

.packages__grid {
    display:     flex;
    gap:         24px;
    align-items: flex-start;
}

.packages__grid > * { flex: 1; }

.pkg-card {
    background:     var(--color-card);
    border:         1px solid var(--color-border);
    border-radius:  var(--radius-xl);
    box-shadow:     var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    padding:        32px;
    display:        flex;
    flex-direction: column;
    gap:            24px;
    position:       relative;
    transition:     transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.pkg-card:hover {
    transform:    translateY(-4px);
    border-color: var(--color-border-hover);
    box-shadow:   var(--shadow), var(--shadow-glow), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.pkg-card--popular {
    border-color: rgba(230, 57, 82, 0.5);
    background:   linear-gradient(180deg, rgba(230, 57, 82, 0.08) 0%, var(--color-card) 52%);
    transform:    scale(1.04);
    box-shadow:   var(--shadow), var(--shadow-glow), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.pkg-card--popular:hover {
    transform: scale(1.04) translateY(-4px);
}

.pkg-card__badge {
    position:      absolute;
    top:           -14px;
    left:          50%;
    transform:     translateX(-50%);
    padding:       5px 18px;
    background:    var(--gradient-accent);
    color:         #fff;
    font-size:     12px;
    font-weight:   700;
    border-radius: 20px;
    white-space:   nowrap;
}

.pkg-card__head { text-align: center; }

.pkg-card__name {
    font-size:     18px;
    font-weight:   700;
    margin-bottom: 16px;
}

.pkg-card__price {
    display:     flex;
    align-items: baseline;
    justify-content: center;
    gap:         4px;
}

.pkg-card__price strong {
    font-size:   48px;
    font-weight: 900;
    background:  var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip:         text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
}

.pkg-card__price span {
    font-size:   22px;
    font-weight: 700;
    color:       var(--color-muted);
}

.pkg-card__features {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    flex:           1;
}

.pkg-card__features li {
    display:     flex;
    align-items: flex-start;
    gap:         10px;
    font-size:   14px;
    color:       var(--color-muted);
}

.pkg-card__features svg {
    width:       16px;
    height:      16px;
    color:       var(--color-primary);
    flex-shrink: 0;
    margin-top:  2px;
}

.pkg-card__cta { width: 100%; justify-content: center; }

.order-process {
    padding:    var(--section-gap) 0;
    background: var(--color-bg-alt);
}

.order-steps {
    display:         flex;
    gap:             24px;
    max-width:       960px;
    margin:          0 auto;
    justify-content: center;
}

.order-steps > * { flex: 1; }

.order-step {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    gap:            16px;
}

.order-step__num {
    width:           56px;
    height:          56px;
    background:      var(--gradient-accent);
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       18px;
    font-weight:     900;
    color:           #fff;
    flex-shrink:     0;
}

.order-step__title {
    font-family: var(--font-body);
    font-size:   16px;
    font-weight: 600;
}

.order-step p { font-size: 14px; line-height: 1.6; }

.order-form-section { padding: var(--section-gap) 0; }

.order-form-wrap {
    display:     flex;
    gap:         64px;
    align-items: flex-start;
}

.order-form__info { flex: 2; }
.order-form__form { flex: 3; }

.order-form__info h2 {
    font-size:      36px;
    font-weight:    600;
    letter-spacing: -0.02em;
    margin-bottom:  16px;
}

.order-form__info > p {
    font-size:     15px;
    line-height:   1.7;
    margin-bottom: 32px;
}

.order-offer {
    background:    var(--glass-bg);
    border:        1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow:    var(--glass-shadow), var(--glass-highlight);
    -webkit-backdrop-filter: blur(var(--glass-blur));
            backdrop-filter: blur(var(--glass-blur));
    padding:       24px;
    margin-bottom: 32px;
}

.order-offer__head {
    display:         flex;
    align-items:     baseline;
    justify-content: space-between;
    gap:             12px;
    padding-bottom:  18px;
    margin-bottom:   18px;
    border-bottom:   1px solid var(--color-border);
}

.order-offer__label {
    font-size:      12px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color:          var(--color-muted);
}

.order-offer__price {
    display:     flex;
    align-items: baseline;
    gap:         4px;
}

.order-offer__price strong {
    font-size:   40px;
    font-weight: 800;
    line-height: 1;
    background:  var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip:         text;
    -webkit-text-fill-color: transparent;
}

.order-offer__price span {
    font-size:   22px;
    font-weight: 700;
    color:       var(--color-secondary);
}

.order-offer__features {
    display:        flex;
    flex-direction: column;
    gap:            12px;
    list-style:     none;
}

.order-offer__features li {
    display:     flex;
    align-items: center;
    gap:         10px;
    font-size:   14px;
    color:       var(--color-text);
}

.order-offer__features svg {
    width:       18px;
    height:      18px;
    color:       var(--color-primary);
    flex-shrink: 0;
}

.order-form__contacts {
    display:        flex;
    flex-direction: column;
    gap:            12px;
}

.order-contact-btn {
    display:         flex;
    align-items:     center;
    gap:             10px;
    padding:         14px 20px;
    border-radius:   var(--radius);
    font-size:       14px;
    font-weight:     600;
    text-decoration: none;
    transition:      all var(--transition);
    background:      var(--gradient-accent);
    color:           #fff;
}

.order-contact-btn--ghost {
    background:   var(--color-card);
    border:       1px solid var(--color-border);
    color:        var(--color-text);
}

.order-contact-btn:hover,
.order-contact-btn--ghost:hover {
    transform:  translateY(-2px);
    box-shadow: var(--shadow-sm);
    color:      #fff;
}

.order-contact-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.order-form__form {
    background:    var(--glass-bg);
    border:        1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    box-shadow:    var(--glass-shadow), var(--glass-highlight);
    -webkit-backdrop-filter: blur(var(--glass-blur));
            backdrop-filter: blur(var(--glass-blur));
    padding:       36px;
}

.order-form__form form,
.order-form__form .jet-form-builder {
    display:        flex;
    flex-direction: column;
    gap:            20px;
}

.order-form__form label {
    display:       block;
    margin-bottom: 6px;
    font-size:     13px;
    font-weight:   600;
    color:         var(--color-text);
}

.order-form__form .jet-form-builder__label-text {
    margin-bottom: 8px;
}

.order-form__form input[type="text"],
.order-form__form input[type="email"],
.order-form__form input[type="tel"],
.order-form__form input[type="url"],
.order-form__form input[type="number"],
.order-form__form input[type="date"],
.order-form__form input[type="time"],
.order-form__form input[type="search"],
.order-form__form .jet-form-builder__field.text-field,
.order-form__form .jet-form-builder__field.select-field,
.order-form__form .jet-form-builder__field.text-area-field,
.order-form__form select,
.order-form__form textarea {
    width:         100%;
    background:    rgba(255, 255, 255, 0.05);
    border:        1px solid var(--glass-border);
    border-radius: var(--radius);
    padding:       12px 16px;
    font-size:     14px;
    font-family:   inherit;
    color:         var(--color-text);
    transition:    border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.order-form__form input::placeholder,
.order-form__form textarea::placeholder { color: var(--color-muted); }

.order-form__form input:focus,
.order-form__form select:focus,
.order-form__form textarea:focus,
.order-form__form .jet-form-builder__field:focus {
    border-color: var(--color-primary);
    background:   rgba(255, 255, 255, 0.07);
    outline:      none;
    box-shadow:   0 0 0 3px rgba(255, 59, 99, 0.18);
}

.order-form__form select,
.order-form__form .jet-form-builder__field.select-field {
    cursor:             pointer;
    -webkit-appearance: none;
    appearance:         none;
    background-image:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B87A8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:  no-repeat;
    background-position: right 12px center;
    background-size:    16px;
    padding-right:      40px;
}

.order-form__form textarea { min-height: 120px; resize: vertical; }

.order-form__form .jet-form-builder__field-label.for-radio {
    display:     inline-flex;
    align-items: center;
    gap:         8px;
    margin:      0 18px 8px 0;
    font-weight: 500;
    color:       var(--color-text);
    cursor:      pointer;
}

.order-form__form .field-type-radio-field > .jet-form-builder__label,
.order-form__form .field-type-checkbox-field > .jet-form-builder__label {
    margin-bottom: 12px;
}

.order-form__form .for-radio span::before {
    width:         18px !important;
    height:        18px !important;
    min-width:     18px !important;
    box-sizing:    border-box !important;
    border:        2px solid var(--glass-border) !important;
    border-radius: 50% !important;
    background:    var(--glass-bg-strong) !important;
    box-shadow:    none !important;
    margin:        0 !important;
    transition:    border-color var(--transition), background var(--transition);
}

.order-form__form .radio-field:checked + span::before {
    border-color: var(--color-primary) !important;
    background:   radial-gradient(circle, var(--color-primary) 0 4px, var(--glass-bg-strong) 5px) !important;
}

.order-form__form button[type="submit"],
.order-form__form .jet-form-builder__action-button {
    width:           100%;
    justify-content: center;
    background:      var(--gradient-accent);
    color:           #fff;
    border:          none;
    padding:         16px 36px;
    border-radius:   var(--radius);
    font-size:       16px;
    font-weight:     700;
    cursor:          pointer;
    transition:      all var(--transition);
}

.order-form__form button[type="submit"]:hover,
.order-form__form .jet-form-builder__action-button:hover {
    transform:  translateY(-2px);
    box-shadow: 0 8px 32px rgba(230, 57, 82, 0.42);
}

.order-form__form .jet-form-builder-messages-wrap,
.order-form__form .jet-form-builder__cf-msg {
    padding:       16px;
    border-radius: var(--radius);
    font-size:     14px;
}
.order-form__form .jet-form-builder-messages-wrap:empty {
    display: none;
}
.order-form__form .jet-form-builder-messages-wrap--success { background: rgba(34, 197, 94, 0.1); color: #22C55E; border: 1px solid rgba(34, 197, 94, 0.2); }
.order-form__form .jet-form-builder-messages-wrap--error   { background: rgba(239, 68, 68, 0.1); color: #EF4444; border: 1px solid rgba(239, 68, 68, 0.2); }

.order-seo { padding: 20px 0 100px; }

.order-seo__inner {
    max-width:     860px;
    margin:        0 auto;
    background:    var(--glass-bg);
    border:        1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    box-shadow:    var(--glass-shadow), var(--glass-highlight);
    -webkit-backdrop-filter: blur(var(--glass-blur));
            backdrop-filter: blur(var(--glass-blur));
    padding:       48px 56px;
}

.order-seo .section-tag { margin-bottom: 16px; }

.order-seo__title {
    font-size:      38px;
    font-weight:    600;
    line-height:    1.12;
    letter-spacing: -0.02em;
    margin-bottom:  24px;
}

.order-seo p {
    font-size:     16px;
    line-height:   1.8;
    color:         var(--color-muted);
    margin-bottom: 22px;
}

.order-seo p:last-of-type { margin-bottom: 0; }

.order-seo h3 {
    position:      relative;
    font-size:     22px;
    font-weight:   600;
    color:         var(--color-text);
    margin:        34px 0 12px;
    padding-left:  16px;
}

.order-seo h3::before {
    content:       '';
    position:      absolute;
    left:          0;
    top:           0.18em;
    bottom:        0.18em;
    width:         4px;
    border-radius: 4px;
    background:     var(--gradient-accent);
}

.order-seo__cta { margin-top: 32px; }

@media (max-width: 1024px) {
    .order-hero__title { font-size: 44px; }
    .packages__grid    { flex-direction: column; max-width: 480px; margin: 0 auto; }
    .pkg-card--popular,
    .pkg-card--popular:hover { transform: translateY(-4px); }
    .order-steps       { flex-wrap: wrap; }
    .order-steps > *   { flex: 0 0 calc(50% - 12px); }
    .order-form-wrap   { flex-direction: column; gap: 40px; }
}

@media (max-width: 768px) {
    .order-hero          { padding: 60px 0; }
    .order-hero__title   { font-size: 32px; }
    .order-hero__badges  { flex-direction: column; align-items: center; }
    .order-steps         { flex-direction: column; max-width: 400px; margin: 0 auto; }
    .order-steps > *     { flex: 0 0 auto; width: 100%; }
    .order-seo__inner    { padding: 32px 24px; }
    .order-seo__title    { font-size: 28px; }
    .order-seo h3        { font-size: 19px; }
    .order-form-wrap     { flex-direction: column; gap: 32px; }
    .order-form__form    { padding: 24px 20px; width: 100%; }
}

@media (max-width: 560px) {
    .order-hero__title   { font-size: 26px; }
    .order-form__info h2 { font-size: 24px; }
    .order-form__form    { padding: 20px 16px; }
    .order-contact-btn   { font-size: 13px; padding: 12px 16px; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .order-offer,
    .order-form__form,
    .order-seo__inner { background: var(--color-card); }
}