/**
 * FILE: assets/css/services/predmetna-fotozjomka-vijskovogo-odyagu.css
 *
 * Prefix : .svc-vm-
 * @package ArtFocus
 */

/* ═══════════════════════════════════════════
   ЗМІННІ — scoped до wrap
═══════════════════════════════════════════ */
#svc-vm-wrap {
    --color-bg:         #0d0d0d;
    --color-bg-alt:     #111111;
    --color-bg-card:    #1a1a1a;
    --color-accent:     #c4a8a5;
    --color-accent-2:   #8b665e;
    --color-text:       #f5f5f0;
    --color-text-muted: #a0a09a;
    --color-border:     rgba(255,255,255,0.08);
    --font-main:        'Unbounded', sans-serif;
    --container-max:    1500px;
    --radius-card:      20px;
    --radius-btn:       50px;
    --transition:       0.35s cubic-bezier(0.4,0,0.2,1);

    font-family:            var(--font-main);
    background:             var(--color-bg);
    color:                  var(--color-text);
    -webkit-font-smoothing: antialiased;
    overflow-x:             hidden;
}

#svc-vm-wrap *,
#svc-vm-wrap *::before,
#svc-vm-wrap *::after {
    box-sizing: border-box;
}

/* ═══════════════════════════════════════════
   КОНТЕЙНЕР
═══════════════════════════════════════════ */
.svc-vm-w {
    max-width: var(--container-max);
    margin:    0 auto;
    padding:   0 64px;
    width:     100%;
}

/* ═══════════════════════════════════════════
   СЕКЦІЇ
═══════════════════════════════════════════ */
.svc-vm-sec { padding: 88px 0; }
.svc-vm-sec--alt { background: var(--color-bg-alt); }
.svc-vm-sec h2 {
    font-family:    var(--font-main);
    font-size:      clamp(22px, 3vw, 46px);
    font-weight:    400;
    letter-spacing: -0.025em;
    color:          var(--color-text);
    line-height:    1.1;
    margin-bottom:  48px;
}
.svc-vm-sec h2 strong {
    font-weight:             900;
    background:              linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip:         text;
}
.svc-vm-div {
    height:     1px;
    background: linear-gradient(90deg, transparent, var(--color-border) 30%, var(--color-border) 70%, transparent);
}

/* ═══════════════════════════════════════════
   КНОПКИ
═══════════════════════════════════════════ */
.svc-vm-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    padding:         14px 30px;
    font-family:     var(--font-main);
    font-size:       11px;
    font-weight:     700;
    letter-spacing:  0.1em;
    text-transform:  uppercase;
    text-decoration: none;
    border:          none;
    cursor:          pointer;
    border-radius:   var(--radius-btn);
    transition:      var(--transition);
    white-space:     nowrap;
}
.svc-vm-btn--fill {
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
    color:      #fff;
}
.svc-vm-btn--fill:hover {
    transform:  translateY(-2px);
    box-shadow: 0 10px 28px rgba(196,168,165,0.28);
}
.svc-vm-btn--ghost {
    background: transparent;
    color:      var(--color-text);
    border:     1px solid var(--color-border);
}
.svc-vm-btn--ghost:hover {
    border-color: var(--color-accent);
    color:        var(--color-accent);
}

/* ═══════════════════════════════════════════
   ОРБИ + GRID-ТЕКСТУРА
═══════════════════════════════════════════ */
.svc-vm-orb {
    position:       absolute;
    border-radius:  50%;
    pointer-events: none;
    filter:         blur(80px);
}
.svc-vm-orb--1 {
    width:      600px;
    height:     600px;
    background: radial-gradient(circle, rgba(196,168,165,0.12) 0%, transparent 70%);
    top:        -100px;
    left:       -100px;
    z-index:    1;
}
.svc-vm-orb--2 {
    width:      500px;
    height:     500px;
    background: radial-gradient(circle, rgba(139,102,94,0.10) 0%, transparent 70%);
    bottom:     50px;
    right:      -80px;
    z-index:    1;
}
.svc-vm-grid-tex {
    position:         absolute;
    inset:            0;
    background-image: linear-gradient(var(--color-border) 1px, transparent 1px),
                      linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
    background-size:  60px 60px;
    pointer-events:   none;
    z-index:          0;
    opacity:          0.4;
}

/* ═══════════════════════════════════════════
   SCROLL-REVEAL
═══════════════════════════════════════════ */
.svc-vm-reveal {
    opacity:    0;
    transform:  translateY(28px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.svc-vm-reveal.visible {
    opacity:   1;
    transform: translateY(0);
}

/* ═══════════════════════════════════════════
   1. HERO
═══════════════════════════════════════════ */
.svc-vm-hero {
    position:        relative;
    min-height:      90vh;
    display:         flex;
    align-items:     flex-end;
    padding-bottom:  72px;
    overflow:        hidden;
}
.svc-vm-hero__bg {
    position: absolute;
    inset:    0;
    z-index:  0;
}
.svc-vm-hero__bg img {
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center 35%;
    display:         block;
}
.svc-vm-hero__overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(150deg, rgba(13,13,13,.97) 0%, rgba(13,13,13,.72) 50%, rgba(13,13,13,.30) 100%);
    z-index:    1;
}
.svc-vm-hero__fade {
    position:   absolute;
    bottom:     0;
    left:       0;
    right:      0;
    height:     40%;
    background: linear-gradient(to top, var(--color-bg) 0%, transparent 100%);
    z-index:    2;
}
.svc-vm-hero__inner {
    position: relative;
    z-index:  3;
    width:    100%;
    
}
.svc-vm-hero__content { max-width: 780px; }
.svc-vm-hero h1 {
    font-family:    var(--font-main);
    font-size:      clamp(28px, 5.5vw, 76px);
    font-weight:    400;
    line-height:    1.04;
    letter-spacing: -0.025em;
    color:          var(--color-text);
    margin-bottom:  20px;
}
.svc-vm-hero h1 em {
    font-style:              normal;
    font-weight:             900;
    background:              linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip:         text;
}
.svc-vm-hero__sub {
    font-size:     clamp(13px, 1.4vw, 16px);
    font-weight:   400;
    color:         rgba(245,245,240,0.75);
    max-width:     560px;
    margin-bottom: 24px;
    line-height:   1.75;
}
.svc-vm-hero__price {
    font-size:     13px;
    font-weight:   400;
    color:         var(--color-text-muted);
    margin-bottom: 32px;
    letter-spacing: 0.05em;
}
.svc-vm-hero__price strong {
    color:       var(--color-accent);
    font-weight: 700;
}
.svc-vm-hero__cta {
    display:   flex;
    gap:       12px;
    flex-wrap: wrap;
}
.svc-vm-hero__stats {
    position:        absolute;
    right:           0;
    bottom:          72px;
    z-index:         4;
    display:         flex;
    border-left:     1px solid var(--color-border);
    backdrop-filter: blur(12px);
    background:      rgba(13,13,13,0.6);
}
.svc-vm-hero__stat {
    padding:      22px 32px;
    border-right: 1px solid var(--color-border);
    text-align:   center;
}
.svc-vm-hero__stat b {
    display:     block;
    font-family: var(--font-main);
    font-size:   28px;
    font-weight: 400;
    color:       var(--color-accent);
    line-height: 1;
}
.svc-vm-hero__stat span {
    display:        block;
    font-size:      9px;
    font-weight:    700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color:          var(--color-text-muted);
    margin-top:     5px;
}

/* ═══════════════════════════════════════════
   FORMATS
═══════════════════════════════════════════ */
.svc-vm-formats {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   3px;
}
.svc-vm-fcard {
    position:   relative;
    background: var(--color-bg-card);
    padding:    40px 36px;
    border:     1px solid transparent;
    overflow:   hidden;
    transition: var(--transition);
    border-radius: var(--radius-card);
}
.svc-vm-fcard::before {
    content:    '';
    position:   absolute;
    top:        0;
    left:       0;
    width:      2px;
    height:     0;
    background: linear-gradient(180deg, var(--color-accent), var(--color-accent-2));
    transition: height 0.4s ease;
}
.svc-vm-fcard:hover {
    border-color: var(--color-border);
    transform:    translateY(-4px);
    box-shadow:   0 20px 48px rgba(196,168,165,0.08);
}
.svc-vm-fcard:hover::before { height: 100%; }
.svc-vm-fcard__num {
    display:        block;
    font-size:      44px;
    font-weight:    900;
    color:          rgba(196,168,165,0.08);
    line-height:    1;
    margin-bottom:  12px;
    letter-spacing: -0.03em;
}
.svc-vm-fcard h3 {
    font-family:    var(--font-main);
    font-size:      13px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          var(--color-text);
    margin-bottom:  10px;
}
.svc-vm-fcard p {
    font-size:   13px;
    color:       var(--color-text-muted);
    line-height: 1.75;
}
.svc-vm-fcard__tag {
    display:        inline-block;
    margin-top:     18px;
    font-size:      9px;
    font-weight:    700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color:          var(--color-accent);
    border:         1px solid rgba(196,168,165,0.25);
    padding:        5px 12px;
    border-radius:  var(--radius-btn);
}

/* ═══════════════════════════════════════════
   ABOUT
═══════════════════════════════════════════ */
.svc-vm-about {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   64px;
    align-items:           start;
}
.svc-vm-about__lead {
    font-size:      clamp(18px, 2vw, 26px);
    font-weight:    400;
    color:          var(--color-text);
    line-height:    1.5;
    letter-spacing: -0.01em;
}
.svc-vm-about__lead strong {
    font-weight:             700;
    background:              linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip:         text;
}
.svc-vm-about__right {
    display:        flex;
    flex-direction: column;
    gap:            16px;
}
.svc-vm-about__p {
    font-size:   13.5px;
    color:       var(--color-text-muted);
    line-height: 1.85;
}
.svc-vm-about__p strong {
    color:       rgba(245,245,240,0.8);
    font-weight: 700;
}
.svc-vm-about__list {
    list-style:    none;
    display:       flex;
    flex-direction: column;
    gap:           8px;
    border-top:    1px solid var(--color-border);
    padding-top:   16px;
}
.svc-vm-about__list li {
    display:     flex;
    align-items: baseline;
    gap:         10px;
    font-size:   13px;
    color:       var(--color-text-muted);
    line-height: 1.6;
}
.svc-vm-about__list li::before {
    content:     '—';
    color:       var(--color-accent);
    flex-shrink: 0;
    font-weight: 700;
}

/* ═══════════════════════════════════════════
   STEPS
═══════════════════════════════════════════ */
.svc-vm-steps {
    display:               grid;
    grid-template-columns: repeat(5, 1fr);
    gap:                   0;
    position:              relative;
}
.svc-vm-steps::before {
    content:    '';
    position:   absolute;
    top:        27px;
    left:       10%;
    right:      10%;
    height:     1px;
    background: linear-gradient(90deg, transparent, var(--color-border) 25%, var(--color-border) 75%, transparent);
}
.svc-vm-step {
    text-align: center;
    padding:    0 14px;
    position:   relative;
    z-index:    1;
}
.svc-vm-step__n {
    width:          54px;
    height:         54px;
    border-radius:  50%;
    border:         1px solid var(--color-border);
    background:     var(--color-bg-alt);
    display:        flex;
    align-items:    center;
    justify-content: center;
    margin:         0 auto 18px;
    font-family:    var(--font-main);
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.1em;
    color:          var(--color-accent);
    transition:     var(--transition);
}
.svc-vm-step:hover .svc-vm-step__n {
    border-color: var(--color-accent);
    background:   rgba(196,168,165,0.1);
    box-shadow:   0 0 20px rgba(196,168,165,0.15);
}
.svc-vm-step h3 {
    font-family:    var(--font-main);
    font-size:      10px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom:  8px;
    color:          var(--color-text);
}
.svc-vm-step p {
    font-size:   12px;
    color:       var(--color-text-muted);
    line-height: 1.7;
}

/* ═══════════════════════════════════════════
   PRICE
═══════════════════════════════════════════ */
.svc-vm-price-wrap {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   3px;
    margin-bottom:         3px;
}
.svc-vm-pcard {
    background:    var(--color-bg-card);
    padding:       44px;
    border:        1px solid transparent;
    border-radius: var(--radius-card);
    transition:    var(--transition);
}
.svc-vm-pcard:hover { border-color: var(--color-border); }
.svc-vm-pcard--feat {
    background:   linear-gradient(140deg, #1f1a18, #140f0e);
    border-color: rgba(196,168,165,0.2) !important;
}
.svc-vm-pcard__lbl {
    display:        block;
    font-size:      9px;
    font-weight:    700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color:          var(--color-accent);
    margin-bottom:  8px;
}
.svc-vm-pcard h3 {
    font-family:   var(--font-main);
    font-size:     16px;
    font-weight:   400;
    color:         var(--color-text);
    margin-bottom: 4px;
}
.svc-vm-pcard__price {
    font-family:   var(--font-main);
    font-size:     52px;
    font-weight:   400;
    color:         var(--color-accent);
    line-height:   1;
    margin:        14px 0 4px;
}
.svc-vm-pcard__price sup {
    font-size:      16px;
    vertical-align: super;
    font-weight:    400;
    color:          var(--color-text-muted);
}
.svc-vm-pcard__price small {
    font-size:   18px;
    color:       var(--color-text-muted);
    font-weight: 400;
}
.svc-vm-pcard__per {
    font-size:     11px;
    color:         var(--color-text-muted);
    margin-bottom: 20px;
    letter-spacing: 0.04em;
}
.svc-vm-pcard__list {
    list-style:     none;
    display:        flex;
    flex-direction: column;
    gap:            8px;
}
.svc-vm-pcard__list li {
    font-size:   13px;
    color:       rgba(245,245,240,0.6);
    display:     flex;
    align-items: baseline;
    gap:         10px;
}
.svc-vm-pcard__list li::before {
    content:     '—';
    color:       var(--color-accent);
    flex-shrink: 0;
    font-weight: 700;
}
.svc-vm-price-side {
    display:        flex;
    flex-direction: column;
    gap:            3px;
}
.svc-vm-popt {
    background:    var(--color-bg-card);
    padding:       28px 32px;
    border:        1px solid transparent;
    border-radius: var(--radius-card);
    transition:    var(--transition);
    flex:          1;
}
.svc-vm-popt:hover { border-color: var(--color-border); }
.svc-vm-popt__lbl {
    display:        block;
    font-size:      9px;
    font-weight:    700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color:          var(--color-accent);
    margin-bottom:  6px;
}
.svc-vm-popt h3 {
    font-family:   var(--font-main);
    font-size:     14px;
    font-weight:   400;
    color:         var(--color-text);
    margin-bottom: 4px;
}
.svc-vm-popt__price {
    font-family:   var(--font-main);
    font-size:     32px;
    font-weight:   400;
    color:         var(--color-accent);
    line-height:   1;
    margin:        8px 0 4px;
}
.svc-vm-popt__price small {
    font-size:   14px;
    color:       var(--color-text-muted);
    font-weight: 400;
}
.svc-vm-popt__list {
    list-style:     none;
    display:        flex;
    flex-direction: column;
    gap:            6px;
    margin-top:     10px;
}
.svc-vm-popt__list li {
    font-size:   12.5px;
    color:       var(--color-text-muted);
    display:     flex;
    gap:         8px;
    align-items: baseline;
}
.svc-vm-popt__list li::before {
    content:     '·';
    color:       var(--color-accent);
    font-weight: 700;
}
.svc-vm-pextras {
    background:            var(--color-bg-card);
    padding:               22px 44px;
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   12px;
    border:                1px solid transparent;
    border-radius:         var(--radius-card);
    transition:            var(--transition);
    margin-bottom:         28px;
}
.svc-vm-pextras:hover { border-color: var(--color-border); }
.svc-vm-pext__lbl {
    display:        block;
    font-size:      9px;
    font-weight:    700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color:          var(--color-text-muted);
    margin-bottom:  4px;
}
.svc-vm-pext__val {
    font-family:    var(--font-main);
    font-size:      20px;
    font-weight:    400;
    color:          var(--color-text);
}
.svc-vm-pext__val small {
    font-size:   11px;
    color:       var(--color-text-muted);
}
.svc-vm-pext__val--note {
    font-family:    var(--font-main);
    font-size:      11px;
    color:          var(--color-text-muted);
    font-weight:    400;
    padding-top:    2px;
}
.svc-vm-price-cta {
    display:     flex;
    align-items: center;
    gap:         20px;
    flex-wrap:   wrap;
}
.svc-vm-price-note {
    font-size: 12px;
    color:     var(--color-text-muted);
}
.svc-vm-price-note a {
    color:           var(--color-accent);
    text-decoration: none;
}
.svc-vm-price-note a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════
   USP
═══════════════════════════════════════════ */
.svc-vm-usp {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   3px;
}
.svc-vm-ucard {
    padding:       32px 28px;
    background:    var(--color-bg-card);
    border:        1px solid transparent;
    border-radius: var(--radius-card);
    transition:    var(--transition);
    position:      relative;
    overflow:      hidden;
}
.svc-vm-ucard::before {
    content:    '';
    position:   absolute;
    top:        0;
    left:       0;
    width:      2px;
    height:     0;
    background: linear-gradient(180deg, var(--color-accent), var(--color-accent-2));
    transition: height 0.4s ease;
}
.svc-vm-ucard:hover {
    border-color: var(--color-border);
    transform:    translateY(-3px);
    box-shadow:   0 16px 40px rgba(196,168,165,0.07);
}
.svc-vm-ucard:hover::before { height: 100%; }
.svc-vm-ucard__icon {
    width:         40px;
    height:        40px;
    background:    rgba(196,168,165,0.08);
    border-radius: 10px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    margin-bottom: 16px;
    color:         var(--color-accent);
    transition:    var(--transition);
}
.svc-vm-ucard:hover .svc-vm-ucard__icon { background: rgba(196,168,165,0.15); }
.svc-vm-ucard h3 {
    font-family:    var(--font-main);
    font-size:      11px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          var(--color-text);
    margin-bottom:  8px;
}
.svc-vm-ucard p {
    font-size:   12.5px;
    color:       var(--color-text-muted);
    line-height: 1.75;
}

/* ═══════════════════════════════════════════
   PORTFOLIO + LIGHTBOX
═══════════════════════════════════════════ */
.svc-vm-port {
    display:               grid;
    grid-template-columns: repeat(5, 1fr);
    gap:                   3px;
}
.svc-vm-pi {
    position:     relative;
    overflow:     hidden;
    cursor:       pointer;
    background:   var(--color-bg-card);
    aspect-ratio: 3/4;
    border-radius: 8px;
}
.svc-vm-pi img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform 0.55s ease, opacity 0.3s ease;
    opacity:    0.8;
}
.svc-vm-pi:hover img {
    transform: scale(1.07);
    opacity:   1;
}
.svc-vm-pi__cap {
    position:    absolute;
    bottom:      0;
    left:        0;
    right:       0;
    padding:     12px 14px;
    background:  linear-gradient(to top, rgba(0,0,0,.85), transparent);
    font-family: var(--font-main);
    font-size:   9px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color:       rgba(245,245,240,0.7);
    opacity:     0;
    transform:   translateY(6px);
    transition:  0.25s ease;
}
.svc-vm-pi:hover .svc-vm-pi__cap {
    opacity:   1;
    transform: translateY(0);
}
.svc-vm-lb {
    display:         none;
    position:        fixed;
    inset:           0;
    background:      rgba(0,0,0,0.96);
    z-index:         9999;
    align-items:     center;
    justify-content: center;
    backdrop-filter: blur(10px);
}
.svc-vm-lb.on { display: flex; }
.svc-vm-lb img {
    max-width:     90vw;
    max-height:    90vh;
    object-fit:    contain;
    border-radius: 8px;
}
.svc-vm-lb__x {
    position:   absolute;
    top:        20px;
    right:      24px;
    background: rgba(255,255,255,0.1);
    border:     1px solid rgba(255,255,255,0.15);
    border-radius: 50%;
    width:      40px;
    height:     40px;
    color:      #fff;
    font-size:  20px;
    cursor:     pointer;
    opacity:    0.7;
    transition: 0.2s ease;
    line-height: 1;
    display:    flex;
    align-items: center;
    justify-content: center;
}
.svc-vm-lb__x:hover {
    opacity:    1;
    background: rgba(255,255,255,0.18);
}

/* ═══════════════════════════════════════════
   REVIEWS
═══════════════════════════════════════════ */
.svc-vm-review {
    display:         flex;
    align-items:     center;
    gap:             36px;
    padding:         48px 56px;
    background:      var(--color-bg-card);
    border:          1px solid var(--color-border);
    border-radius:   var(--radius-card);
    flex-wrap:       wrap;
    backdrop-filter: blur(8px);
}
.svc-vm-review__score {
    font-family:    var(--font-main);
    font-size:      72px;
    font-weight:    400;
    color:          var(--color-accent);
    line-height:    1;
    flex-shrink:    0;
}
.svc-vm-review__sep {
    width:       1px;
    height:      60px;
    background:  var(--color-border);
    flex-shrink: 0;
}
.svc-vm-review__info {
    display:        flex;
    flex-direction: column;
    gap:            5px;
    flex-shrink:    0;
}
.svc-vm-review__stars {
    font-size:      18px;
    color:          var(--color-accent);
    letter-spacing: 3px;
}
.svc-vm-review__lbl {
    font-size:      10px;
    font-weight:    700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:          var(--color-text-muted);
}
.svc-vm-review__txt {
    font-size:   13.5px;
    font-weight: 400;
    color:       rgba(245,245,240,0.45);
    max-width:   560px;
    line-height: 1.75;
    flex:        1;
    min-width:   180px;
}

/* ═══════════════════════════════════════════
   FAQ
═══════════════════════════════════════════ */
.svc-vm-faq {
    border:        1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow:      hidden;
}
.svc-vm-fitem { border-bottom: 1px solid var(--color-border); }
.svc-vm-fitem:last-child { border-bottom: none; }
.svc-vm-fq {
    width:           100%;
    background:      none;
    border:          none;
    color:           var(--color-text);
    text-align:      left;
    padding:         18px 28px;
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    gap:             14px;
    cursor:          pointer;
    font-family:     var(--font-main);
    font-size:       13px;
    font-weight:     400;
    transition:      background 0.2s ease;
    line-height:     1.5;
}
.svc-vm-fq:hover { background: var(--color-bg-card); }
.svc-vm-fq.on {
    background: var(--color-bg-card);
    color:      var(--color-accent);
}
.svc-vm-fic {
    width:           22px;
    height:          22px;
    min-width:       22px;
    border:          1px solid rgba(255,255,255,0.14);
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    font-size:       16px;
    color:           var(--color-accent);
    transition:      0.25s ease;
    font-weight:     400;
    line-height:     1;
}
.svc-vm-fq.on .svc-vm-fic {
    background:   linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
    border-color: transparent;
    color:        #fff;
    transform:    rotate(45deg);
}
.svc-vm-fa {
    display:     none;
    padding:     0 28px 16px;
    font-size:   13px;
    color:       var(--color-text-muted);
    line-height: 1.8;
    background:  var(--color-bg-card);
}
.svc-vm-fa.on { display: block; }

/* ═══════════════════════════════════════════
   CTA BANNER
═══════════════════════════════════════════ */
.svc-vm-cta-banner {
    position:              relative;
    overflow:              hidden;
    background:            linear-gradient(120deg, #1c1512 0%, #100c0a 100%);
    border:                1px solid rgba(196,168,165,0.2);
    border-radius:         var(--radius-card);
    padding:               64px 72px;
    display:               grid;
    grid-template-columns: 1fr auto;
    align-items:           center;
    gap:                   48px;
}
.svc-vm-cta-banner .svc-vm-grid-tex { opacity: 0.2; }
.svc-vm-cta-banner__content {
    position: relative;
    z-index:  2;
}
.svc-vm-orb--cta1 {
    width:      400px;
    height:     400px;
    background: radial-gradient(circle, rgba(196,168,165,0.15) 0%, transparent 70%);
    top:        -80px;
    left:       -80px;
    filter:     blur(60px);
}
.svc-vm-orb--cta2 {
    width:      350px;
    height:     350px;
    background: radial-gradient(circle, rgba(139,102,94,0.12) 0%, transparent 70%);
    bottom:     -60px;
    right:      -60px;
    filter:     blur(60px);
}
.svc-vm-cta-banner h2 {
    font-family:    var(--font-main);
    font-size:      clamp(22px, 3vw, 44px);
    font-weight:    400;
    color:          var(--color-text);
    margin-bottom:  10px !important;
    letter-spacing: -0.02em;
    line-height:    1.15;
}
.svc-vm-cta-banner h2 em {
    font-style:              normal;
    font-weight:             900;
    background:              linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip:         text;
}
.svc-vm-cta-banner p {
    font-size:   13.5px;
    color:       var(--color-text-muted);
    line-height: 1.75;
    max-width:   520px;
}
.svc-vm-cta-banner__btns {
    position:        relative;
    z-index:         2;
    display:         flex;
    flex-direction:  column;
    gap:             10px;
    flex-shrink:     0;
    min-width:       240px;
}

/* ═══════════════════════════════════════════
   CONTACTS
═══════════════════════════════════════════ */
.svc-vm-contacts {
    display:               grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:                   3px;
}
.svc-vm-cb {
    padding:       44px 40px;
    background:    var(--color-bg-card);
    border-radius: var(--radius-card);
    min-width:     0;
    overflow:      hidden;
}
.svc-vm-cb--dark { background: #080706; }
.svc-vm-cb--cta {
    background: linear-gradient(140deg, #1c1512, #100c0b);
    border:     1px solid rgba(196,168,165,0.2);
    display:    flex;
    flex-direction: column;
    justify-content: center;
    gap:        16px;
}
.svc-vm-cb h3 {
    font-family:   var(--font-main);
    font-size:     18px;
    font-weight:   400;
    color:         var(--color-text);
    margin-bottom: 16px;
    line-height:   1.25;
}
.svc-vm-cb--cta h3 {
    font-size:     22px;
    margin-bottom: 6px;
}
.svc-vm-cb__links {
    display:        flex;
    flex-direction: column;
    gap:            12px;
    overflow:       hidden;
}
.svc-vm-cb__links a {
    display:         flex;
    align-items:     flex-start;
    gap:             10px;
    font-size:       12.5px;
    color:           rgba(245,245,240,0.55);
    text-decoration: none;
    transition:      color 0.2s ease;
    overflow:        hidden;
    word-break:      break-word;
}
.svc-vm-cb__links a:hover { color: var(--color-accent); }
.svc-vm-icon {
    width:           16px;
    height:          16px;
    min-width:       16px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--color-accent);
    margin-top:      2px;
}
.svc-vm-sched {
    list-style:     none;
    display:        flex;
    flex-direction: column;
    gap:            8px;
}
.svc-vm-sched li {
    display:         flex;
    justify-content: space-between;
    font-size:       12.5px;
    color:           var(--color-text-muted);
    padding-bottom:  8px;
    border-bottom:   1px solid var(--color-border);
}
.svc-vm-sched li:last-child { border-bottom: none; }
.svc-vm-sched li span:last-child {
    color:       rgba(245,245,240,0.7);
    font-weight: 700;
}
.svc-vm-cb p {
    font-size:   12.5px;
    color:       var(--color-text-muted);
    line-height: 1.7;
}
.svc-vm-cb__btns {
    display:        flex;
    flex-direction: column;
    gap:            8px;
}

/* ═══════════════════════════════════════════
   АДАПТИВ — 1200px
═══════════════════════════════════════════ */
@media (max-width: 1200px) {
    .svc-vm-w { padding: 0 44px; }
    .svc-vm-hero__stats { display: none; }
    .svc-vm-port { grid-template-columns: repeat(4, 1fr); }
    .svc-vm-pextras { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════
   АДАПТИВ — 1024px
═══════════════════════════════════════════ */
@media (max-width: 1024px) {
    .svc-vm-w { padding: 0 32px; }
    .svc-vm-sec { padding: 64px 0; }
    .svc-vm-sec h2 { font-size: clamp(20px, 4vw, 36px); margin-bottom: 32px; }
    .svc-vm-formats { grid-template-columns: 1fr 1fr; }
    .svc-vm-about { grid-template-columns: 1fr; gap: 32px; }
    .svc-vm-steps { grid-template-columns: repeat(3, 1fr); row-gap: 32px; }
    .svc-vm-steps::before { display: none; }
    .svc-vm-price-wrap { grid-template-columns: 1fr; }
    .svc-vm-price-side { flex-direction: row; }
    .svc-vm-usp { grid-template-columns: repeat(2, 1fr); }
    .svc-vm-port { grid-template-columns: repeat(3, 1fr); }
    .svc-vm-review { padding: 32px 40px; gap: 24px; }
    .svc-vm-review__sep { display: none; }
    .svc-vm-cta-banner { grid-template-columns: 1fr; padding: 48px 40px; gap: 32px; }
    .svc-vm-cta-banner__btns { flex-direction: row; min-width: 0; }
    .svc-vm-contacts { grid-template-columns: 1fr 1fr; }
    .svc-vm-cb--cta { grid-column: 1 / -1; }
    .svc-vm-cb { padding: 32px 28px; }
}

/* ═══════════════════════════════════════════
   АДАПТИВ — 768px
═══════════════════════════════════════════ */
@media (max-width: 768px) {
    .svc-vm-w { padding: 0 18px; }
    .svc-vm-sec { padding: 48px 0; }
    .svc-vm-sec h2 { font-size: clamp(18px, 6vw, 28px); margin-bottom: 24px; }
    .svc-vm-hero { min-height: 100svh; padding-bottom: 40px; }
    .svc-vm-hero h1 { font-size: clamp(22px, 8vw, 40px); margin-bottom: 16px; }
    .svc-vm-hero__sub { font-size: 13px; margin-bottom: 20px; }
    .svc-vm-hero__cta { flex-direction: column; gap: 8px; }
    .svc-vm-hero__cta .svc-vm-btn { width: 100%; }
    .svc-vm-formats { grid-template-columns: 1fr; gap: 2px; }
    .svc-vm-fcard { padding: 24px 20px; }
    .svc-vm-steps { grid-template-columns: 1fr; gap: 0; }
    .svc-vm-step {
        display:     flex;
        align-items: flex-start;
        gap:         16px;
        text-align:  left;
        padding:     18px 0;
        border-bottom: 1px solid var(--color-border);
    }
    .svc-vm-step:last-child { border-bottom: none; }
    .svc-vm-step__n { margin: 0; flex-shrink: 0; width: 44px; height: 44px; }
    .svc-vm-step__text { flex: 1; }
    .svc-vm-step h3,
    .svc-vm-step p { text-align: left; }
    .svc-vm-price-side { flex-direction: column; }
    .svc-vm-pcard { padding: 24px 20px; }
    .svc-vm-pcard__price { font-size: 40px; }
    .svc-vm-pextras { grid-template-columns: 1fr 1fr; padding: 16px 18px; }
    .svc-vm-price-cta { flex-direction: column; align-items: stretch; gap: 10px; }
    .svc-vm-price-cta .svc-vm-btn { width: 100%; }
    .svc-vm-usp { grid-template-columns: 1fr 1fr; }
    .svc-vm-port { grid-template-columns: repeat(2, 1fr); gap: 2px; }
    .svc-vm-review { padding: 24px 20px; gap: 16px; flex-direction: column; align-items: flex-start; }
    .svc-vm-review__score { font-size: 52px; }
    .svc-vm-cta-banner { padding: 32px 24px; gap: 24px; }
    .svc-vm-cta-banner__btns { flex-direction: column; width: 100%; }
    .svc-vm-cta-banner__btns .svc-vm-btn { width: 100%; }
    .svc-vm-fq { padding: 15px 18px; font-size: 12.5px; }
    .svc-vm-fa { padding: 0 18px 15px; font-size: 12.5px; }
    .svc-vm-contacts { display: flex; flex-direction: column; gap: 3px; }
    .svc-vm-cb { padding: 24px 20px; width: 100%; }
    .svc-vm-cb h3 { font-size: 16px; margin-bottom: 12px; }
    .svc-vm-cb__btns .svc-vm-btn { width: 100%; }
}

/* ═══════════════════════════════════════════
   АДАПТИВ — 480px
═══════════════════════════════════════════ */
@media (max-width: 480px) {
    .svc-vm-w { padding: 0 14px; }
    .svc-vm-sec { padding: 36px 0; }
    .svc-vm-sec h2 { font-size: clamp(17px, 5vw, 22px); margin-bottom: 18px; }
    .svc-vm-hero { padding-bottom: 24px; }
    .svc-vm-hero h1 { font-size: clamp(20px, 8vw, 32px); }
    .svc-vm-hero__sub { font-size: 12.5px; margin-bottom: 18px; }
    .svc-vm-pcard { padding: 20px 16px; }
    .svc-vm-pcard__price { font-size: 32px; }
    .svc-vm-pextras { grid-template-columns: 1fr 1fr; padding: 14px 16px; gap: 8px; }
    .svc-vm-pext__val { font-size: 16px; }
    .svc-vm-usp { grid-template-columns: 1fr; }
    .svc-vm-port { grid-template-columns: repeat(2, 1fr); gap: 2px; }
    .svc-vm-review { padding: 20px 16px; gap: 12px; }
    .svc-vm-review__score { font-size: 42px; }
    .svc-vm-cta-banner { padding: 24px 16px; }
    .svc-vm-fq { padding: 13px 14px; font-size: 12px; }
    .svc-vm-fa { padding: 0 14px 13px; font-size: 11.5px; }
    .svc-vm-cb { padding: 20px 16px; }
    .svc-vm-cb h3 { font-size: 15px; margin-bottom: 10px; }
}