/* =========================================

   SERVICES PAGE — Premium Liquid Glass

========================================= */



/* ===== HERO ===== */

.sv-hero {

    background: white;

    padding: 90px 1.5rem 4rem;

    overflow: hidden;

}



.sv-hero__inner {

    max-width: 1320px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 4rem;

    align-items: center;

    min-height: 75vh;

}



.sv-hero__tag {

    display: inline-block;

    padding: 0.4rem 1.1rem;

    background: #FFF0E6;

    border-radius: 100px;

    font-size: 0.8rem;

    font-weight: 700;

    color: #FF6B00;

    margin-bottom: 1.5rem;

    letter-spacing: 0.04em;

    text-transform: uppercase;

}



.sv-hero__title {

    font-size: clamp(2.4rem, 4.5vw, 3.8rem);

    font-weight: 900;

    color: #0A1628;

    line-height: 1.1;

    letter-spacing: -0.04em;

    margin-bottom: 1.25rem;

    font-family: "Inter", sans-serif;

}



.sv-hero__accent { color: #FF6B00; }



.sv-hero__desc {

    font-size: 1rem;

    color: #666;

    line-height: 1.7;

    margin-bottom: 2rem;

    max-width: 480px;

}



.sv-hero__btns { display: flex; gap: 1rem; flex-wrap: wrap; }



.sv-hero__right { position: relative; }

.sv-hero__photos { position: relative; height: 500px; }



.sv-hero__photo {

    position: absolute;

    border-radius: 20px;

    background-size: cover;

    background-position: center;

    box-shadow: 0 20px 50px rgba(0,0,0,0.15);

}



.sv-hero__photo--1 { width: 65%; height: 380px; top: 0; right: 0; }

.sv-hero__photo--2 { width: 48%; height: 220px; bottom: 0; left: 0; }

.sv-hero__photo--3 { width: 36%; height: 160px; bottom: 40px; right: 5%; z-index: 2; }

.sv-hero__photo--4 { width: 30%; height: 130px; top: 20px; left: 5%; z-index: 2; }



/* ===== BUTTONS ===== */

.sv-btn {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.85rem 2rem;

    border-radius: 50px;

    font-weight: 700;

    font-size: 0.9rem;

    text-decoration: none;

    transition: all 0.25s cubic-bezier(0.22,1,0.36,1);

    font-family: "Inter", sans-serif;

}



.sv-btn--primary { background: #FF6B00; color: white; }

.sv-btn--primary:hover { background: #e55f00; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(255,107,0,0.3); color: white; }

.sv-btn--ghost { border: 1.5px solid #e0e0e0; color: #0A1628; }

.sv-btn--ghost:hover { border-color: #FF6B00; color: #FF6B00; }

.sv-btn--white { background: white; color: #0A1628; }

.sv-btn--white:hover { background: #FF6B00; color: white; transform: translateY(-2px); }

.sv-btn--outline-white { border: 1.5px solid rgba(255,255,255,0.4); color: white; }

.sv-btn--outline-white:hover { border-color: white; background: rgba(255,255,255,0.1); color: white; }



/* ===== STATS ===== */

.sv-stats {

    background: linear-gradient(135deg, #06101f 0%, #0d1f3c 100%);

    padding: 3rem 1.5rem;

    position: relative;

    overflow: hidden;

}



.sv-stats::before {

    content: "";

    position: absolute;

    top: -50%;

    left: 20%;

    width: 60%;

    height: 200%;

    background: radial-gradient(ellipse, rgba(255,107,0,0.06) 0%, transparent 60%);

    pointer-events: none;

}



.sv-stats__inner {

    max-width: 1320px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    z-index: 1;

}



.sv-stat { text-align: center; padding: 1.25rem 3rem; flex: 1; min-width: 120px; }

.sv-stat strong { display: block; font-size: 2.2rem; font-weight: 900; color: #FF6B00; font-family: "Inter", sans-serif; letter-spacing: -0.04em; }

.sv-stat span { font-size: 0.72rem; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.06em; }

.sv-stat__sep { width: 1px; height: 36px; background: rgba(255,255,255,0.07); flex-shrink: 0; }



/* ===== SECTION SHARED ===== */

.sv-section__head {

    text-align: center;

    margin-bottom: 4rem;

}



.sv-tag {

    display: inline-block;

    font-size: 0.78rem;

    font-weight: 700;

    color: #FF6B00;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    margin-bottom: 0.75rem;

}



.sv-title {

    font-size: clamp(1.8rem, 3vw, 2.6rem);

    font-weight: 900;

    color: #0A1628;

    line-height: 1.15;

    letter-spacing: -0.03em;

    margin-bottom: 0.75rem;

    font-family: "Inter", sans-serif;

}



.sv-sub { color: #888; font-size: 0.95rem; }



/* ===== SERVICES — LIQUID GLASS ===== */

.sv-section {

    padding: 5rem 1.5rem;

    background: radial-gradient(ellipse at 50% 0%, rgba(255,140,0,0.04) 0%, transparent 50%), #F8FAFC;

}



.sv-section__inner { max-width: 1320px; margin: 0 auto; }



.sv-services {

    display: flex;

    flex-direction: column;

    gap: 3rem;

}



.sv-service {

    position: relative;

    border-radius: 28px;

    overflow: hidden;

    height: 480px;

    cursor: pointer;

    opacity: 0;

    transform: translateY(48px);

    transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1),

                transform 0.7s cubic-bezier(0.22,1,0.36,1),

                box-shadow 0.4s cubic-bezier(0.22,1,0.36,1);

    box-shadow: 0 8px 32px rgba(0,0,0,0.10);

}



.sv-service.sv-visible {

    opacity: 1;

    transform: translateY(0);

}



.sv-service:hover {

    transform: translateY(-8px);

    box-shadow: 0 32px 80px rgba(0,0,0,0.18), 0 0 0 1px rgba(255,107,0,0.08);

}



/* Photo layer */

.sv-service__img {

    position: absolute;

    inset: 0;

    z-index: 0;

}



.sv-service__bg {

    position: absolute;

    inset: 0;

    background-size: cover;

    background-position: center;

    transition: transform 0.8s cubic-bezier(0.22,1,0.36,1);

}



.sv-service:hover .sv-service__bg {

    transform: scale(1.06);

}



/* Cinematic overlay */

.sv-service__img::after {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(

        to bottom,

        rgba(8,28,51,0.1) 0%,

        rgba(8,28,51,0.2) 40%,

        rgba(8,28,51,0.75) 75%,

        rgba(8,28,51,0.95) 100%

    );

    z-index: 1;

}



/* Number watermark */

.sv-service__num {

    position: absolute;

    top: 1.5rem;

    right: 2rem;

    font-size: 6rem;

    font-weight: 900;

    color: rgba(255,255,255,0.07);

    font-family: "Inter", sans-serif;

    line-height: 1;

    letter-spacing: -0.05em;

    z-index: 2;

    pointer-events: none;

}



/* Glass body */

.sv-service__body {

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    z-index: 3;

    padding: 2rem 2.5rem;

}



.sv-service__glass {

    background: rgba(255,255,255,0.08);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    border: 1px solid rgba(255,255,255,0.15);

    border-radius: 20px;

    padding: 1.75rem 2rem;

    transition: background 0.3s;

}



.sv-service:hover .sv-service__glass {

    background: rgba(255,255,255,0.12);

}



.sv-service__icon {

    font-size: 1.75rem;

    margin-bottom: 0.5rem;

    display: block;

}



.sv-service__glass h3 {

    font-size: clamp(1.4rem, 2.5vw, 1.8rem);

    font-weight: 900;

    color: white;

    letter-spacing: -0.03em;

    font-family: "Inter", sans-serif;

    margin-bottom: 0.5rem;

    line-height: 1.1;

}



.sv-service__glass p {

    font-size: 0.88rem;

    color: rgba(255,255,255,0.7);

    line-height: 1.6;

    margin-bottom: 1rem;

}



.sv-service__list {

    list-style: none;

    padding: 0;

    margin: 0 0 1.25rem;

    display: flex;

    gap: 0.5rem 1.25rem;

    flex-wrap: wrap;

}



.sv-service__list li {

    display: flex;

    align-items: center;

    gap: 0.4rem;

    font-size: 0.78rem;

    color: rgba(255,255,255,0.8);

    font-weight: 500;

}



.sv-service__list li::before {

    content: "✓";

    color: #FF8C3A;

    font-weight: 700;

    font-size: 0.72rem;

}



.sv-service__link {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.6rem 1.5rem;

    background: #FF6B00;

    color: white;

    border-radius: 50px;

    font-size: 0.82rem;

    font-weight: 700;

    text-decoration: none;

    transition: all 0.25s cubic-bezier(0.22,1,0.36,1);

    box-shadow: 0 4px 16px rgba(255,107,0,0.35);

}



.sv-service__link:hover {

    background: #e55f00;

    transform: translateY(-2px);

    box-shadow: 0 8px 24px rgba(255,107,0,0.45);

    color: white;

}



/* Wide layout — нечётные шире слева */

.sv-service--wide-left .sv-service__body { max-width: 60%; }

.sv-service--wide-right .sv-service__body { max-width: 60%; margin-left: auto; text-align: right; }

.sv-service--wide-right .sv-service__list { justify-content: flex-end; }



/* ===== WHY US — GLASSMORPHISM DARK ===== */

.sv-why {

    background: linear-gradient(160deg, #06101f 0%, #0d1f3c 60%, #081828 100%);

    padding: 6rem 1.5rem;

    position: relative;

    overflow: hidden;

}



.sv-why::before {

    content: "";

    position: absolute;

    top: -30%;

    right: -10%;

    width: 60%;

    height: 160%;

    background: radial-gradient(ellipse, rgba(255,107,0,0.07) 0%, transparent 60%);

    pointer-events: none;

}



.sv-why .sv-title { color: white !important; }

.sv-why .sv-tag { color: #FF8C3A !important; }



.sv-why__grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 1.25rem;

    margin-top: 3rem;

    position: relative;

    z-index: 1;

}



.sv-why__card {

    background: rgba(255,255,255,0.05);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    border: 1px solid rgba(255,255,255,0.08);

    border-radius: 20px;

    padding: 2rem;

    transition: all 0.35s cubic-bezier(0.22,1,0.36,1);

    opacity: 0;

    transform: translateY(32px);

}



.sv-why__card.sv-visible {

    opacity: 1;

    transform: translateY(0);

}



.sv-why__card:hover {

    background: rgba(255,255,255,0.09);

    border-color: rgba(255,107,0,0.25);

    transform: translateY(-6px);

    box-shadow: 0 20px 40px rgba(0,0,0,0.3);

}



.sv-why__icon { font-size: 2rem; margin-bottom: 1.25rem; display: block; }



.sv-why__card h3 {

    font-size: 1rem;

    font-weight: 700;

    color: white;

    margin-bottom: 0.6rem;

    font-family: "Inter", sans-serif;

}



.sv-why__card p {

    font-size: 0.82rem;

    color: rgba(255,255,255,0.5);

    line-height: 1.6;

}



/* ===== PROCESS — TIMELINE ===== */

.sv-process {

    padding: 6rem 1.5rem;

    background: #F8FAFC;

    position: relative;

    overflow: hidden;

}



.sv-process__inner { max-width: 1320px; margin: 0 auto; }



.sv-steps {

    display: grid;

    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;

    align-items: start;

    margin-top: 4rem;

    gap: 0;

}



.sv-step {

    background: white;

    border-radius: 20px;

    padding: 2rem 1.5rem;

    text-align: center;

    border: 1px solid rgba(0,0,0,0.06);

    box-shadow: 0 4px 20px rgba(0,0,0,0.05);

    position: relative;

    transition: all 0.35s cubic-bezier(0.22,1,0.36,1);

    opacity: 0;

    transform: translateY(32px);

}



.sv-step.sv-visible {

    opacity: 1;

    transform: translateY(0);

}



.sv-step:hover {

    transform: translateY(-6px);

    box-shadow: 0 20px 40px rgba(255,107,0,0.1);

    border-color: rgba(255,107,0,0.2);

}



.sv-step__num {

    position: absolute;

    top: -16px;

    left: 50%;

    transform: translateX(-50%);

    width: 32px;

    height: 32px;

    background: #FF6B00;

    border-radius: 50%;

    font-size: 0.72rem;

    font-weight: 800;

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: 0 4px 12px rgba(255,107,0,0.4);

}



.sv-step__icon { font-size: 2rem; margin: 0.5rem 0 0.75rem; display: block; }



.sv-step h3 {

    font-size: 0.95rem;

    font-weight: 700;

    color: #0A1628;

    margin-bottom: 0.5rem;

    font-family: "Inter", sans-serif;

}



.sv-step p { font-size: 0.78rem; color: #888; line-height: 1.5; }



.sv-step__arrow {

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0 0.75rem;

    margin-top: 2rem;

}



.sv-step__arrow::after {

    content: "";

    display: block;

    width: 100%;

    height: 2px;

    background: linear-gradient(to right, rgba(255,107,0,0.3), rgba(255,107,0,0.6), rgba(255,107,0,0.3));

    border-radius: 1px;

    position: relative;

}



/* ===== CTA ===== */

.sv-cta {

    background: linear-gradient(135deg, #06101f 0%, #0e2040 50%, #061528 100%);

    padding: 5rem 1.5rem;

    text-align: center;

    position: relative;

    overflow: hidden;

}



.sv-cta::before {

    content: "";

    position: absolute;

    top: -100px;

    right: -100px;

    width: 500px;

    height: 500px;

    background: radial-gradient(circle, rgba(255,107,0,0.12) 0%, transparent 70%);

}



.sv-cta::after {

    content: "";

    position: absolute;

    bottom: -80px;

    left: -80px;

    width: 400px;

    height: 400px;

    background: radial-gradient(circle, rgba(255,107,0,0.08) 0%, transparent 70%);

}



.sv-cta__inner { position: relative; z-index: 2; max-width: 600px; margin: 0 auto; }



.sv-cta h2 {

    font-size: clamp(1.8rem, 3.5vw, 2.8rem);

    font-weight: 900;

    color: white;

    margin-bottom: 0.75rem;

    font-family: "Inter", sans-serif;

    letter-spacing: -0.03em;

}



.sv-cta p { color: rgba(255,255,255,0.6); margin-bottom: 2rem; font-size: 0.95rem; }

.sv-cta__btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }



/* ===== MOBILE ===== */

@media (max-width: 1024px) {

    .sv-hero__inner { grid-template-columns: 1fr; min-height: auto; }

    .sv-hero__right { display: none; }

    .sv-why__grid { grid-template-columns: repeat(2, 1fr); }

    .sv-steps { grid-template-columns: 1fr 1fr; gap: 2rem 1rem; }

    .sv-step__arrow { display: none; }

}



@media (max-width: 768px) {

    .sv-hero { padding: 80px 1rem 3rem; }

    .sv-section { padding: 3rem 1rem; }

    .sv-why { padding: 3rem 1rem; }

    .sv-process { padding: 3rem 1rem; }

    .sv-service { height: 420px; }

    .sv-service--wide-left .sv-service__body,

    .sv-service--wide-right .sv-service__body { max-width: 100%; margin-left: 0; text-align: left; }

    .sv-service--wide-right .sv-service__list { justify-content: flex-start; }

    .sv-service__body { padding: 1rem 1.25rem; }

    .sv-service__glass { padding: 1.25rem; }

    .sv-why__grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }

    .sv-steps { grid-template-columns: 1fr; gap: 2rem; }

    .sv-stat { padding: 0.75rem 1rem; }

    .sv-stat__sep { display: none; }

    .sv-stat strong { font-size: 1.6rem; }

}



@media (max-width: 480px) {

    .sv-why__grid { grid-template-columns: 1fr; }

    .sv-service { height: 380px; }

}




.sv-service__icon { display: none; }




.sv-why__icon {

    color: #FF6B00 !important;

    filter: drop-shadow(0 0 8px rgba(255,107,0,0.6));

}



.sv-why__icon .lucide {

    width: 28px;

    height: 28px;

    stroke-width: 1.75;

}