/* ==========================================================================
   Service Benefits — Stacked Showcase
   Left content + right stacked floating images with glass cards
   ========================================================================== */

:root {
    --svb-primary: #FF6B00;
    --svb-primary-rgb: 255, 107, 0;
    --svb-dark: #0A1628;
    --svb-dark-rgb: 10, 22, 40;
    --svb-text: #1e293b;
    --svb-muted: #64748b;
    --svb-bg: #f4f6fb;
    --svb-white: #ffffff;
    --svb-border: rgba(10,22,40,0.06);
    --svb-ease: cubic-bezier(0.4,0,0.2,1);
    --svb-spring: cubic-bezier(0.34,1.56,0.64,1);
}

.svb { position: relative; padding: 100px 0; background: var(--svb-bg); overflow: hidden; }

/* Crosshatch / dot pattern */
.svb__pattern {
    position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.4;
    background-image: radial-gradient(rgba(var(--svb-primary-rgb),0.07) 1px, transparent 1px);
    background-size: 24px 24px;
}

.svb__inner { max-width: 1300px; margin: 0 auto; padding: 0 40px; position: relative; z-index: 1; }

.svb__grid {
    display: grid; grid-template-columns: 1fr 1.2fr;
    gap: 64px; align-items: center;
}

/* Reveal */
[data-svb-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--svb-ease), transform 0.7s var(--svb-spring); }
[data-svb-reveal].svb-visible { opacity: 1; transform: translateY(0); }
[data-svb-delay="1"]{transition-delay:.08s}[data-svb-delay="2"]{transition-delay:.16s}
[data-svb-delay="3"]{transition-delay:.24s}[data-svb-delay="4"]{transition-delay:.32s}
[data-svb-delay="5"]{transition-delay:.40s}[data-svb-delay="6"]{transition-delay:.48s}

/* ==========================================================================
   LEFT — Content
   ========================================================================== */

.svb__left { display: flex; flex-direction: column; }

/* Eyebrow — road-line + truck style */
.svb__eyebrow {
    display: inline-flex; align-items: center; gap: 12px;
    margin-bottom: 18px;
}

.svb__eyebrow-road {
    display: inline-flex; align-items: center; height: 2px; flex-shrink: 0;
}

.svb__eyebrow-road-line {
    display: block; width: 48px; height: 2px;
    background: repeating-linear-gradient(90deg, var(--svb-primary) 0px, var(--svb-primary) 8px, transparent 8px, transparent 14px);
    opacity: 0.5;
}

.svb__eyebrow-truck {
    width: 16px; height: 16px; color: var(--svb-primary);
    flex-shrink: 0; margin-left: -2px;
    animation: svb-drive 3s ease-in-out infinite;
}
@keyframes svb-drive { 0%,100%{transform:translateX(0)} 50%{transform:translateX(6px)} }

.svb__eyebrow-text {
    font-size: 12px; font-weight: 700; letter-spacing: 2.5px;
    text-transform: uppercase; color: var(--svb-primary);
}

/* Title */
.svb__title {
    font-size: clamp(32px,3.8vw,50px); font-weight: 800;
    line-height: 1.08; color: var(--svb-text);
    margin: 0 0 20px; letter-spacing: -0.03em;
}
.svb__hl { color: var(--svb-primary); }

/* Desc */
.svb__desc { font-size: 15px; line-height: 1.7; color: var(--svb-muted); margin: 0 0 32px; max-width: 440px; }

/* ==========================================================================
   SERVICE ITEMS
   ========================================================================== */

.svb__services { display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; }

.svb__svc {
    display: flex; align-items: center; gap: 16px;
    padding: 16px 20px; border-radius: 16px;
    background: var(--svb-white); border: 1px solid var(--svb-border);
    text-decoration: none; color: var(--svb-text);
    transition: all 0.35s var(--svb-ease);
    position: relative; overflow: hidden;
}

/* Shine sweep */
.svb__svc::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(var(--svb-primary-rgb),0.04) 50%, transparent 60%);
    transform: translateX(-100%); transition: transform 0.6s var(--svb-ease);
    pointer-events: none;
}
.svb__svc:hover::after { transform: translateX(100%); }

.svb__svc:hover {
    border-color: rgba(var(--svb-primary-rgb),0.15);
    box-shadow: 0 8px 28px rgba(var(--svb-dark-rgb),0.06);
    transform: translateX(6px);
}

.svb__svc-icon {
    width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
    background: rgba(var(--svb-primary-rgb),0.07);
    border: 1px solid rgba(var(--svb-primary-rgb),0.1);
    color: var(--svb-primary);
    display: flex; align-items: center; justify-content: center;
    transition: all 0.35s var(--svb-ease);
}
.svb__svc-icon svg { width: 20px; height: 20px; }
.svb__svc:hover .svb__svc-icon { background: var(--svb-primary); border-color: var(--svb-primary); color: #fff; box-shadow: 0 4px 14px rgba(var(--svb-primary-rgb),0.3); }

.svb__svc-body { flex: 1; min-width: 0; }
.svb__svc-title { display: block; font-size: 15px; font-weight: 700; color: var(--svb-text); transition: color 0.2s; }
.svb__svc:hover .svb__svc-title { color: var(--svb-primary); }
.svb__svc-desc { display: block; font-size: 12.5px; color: var(--svb-muted); margin-top: 2px; }

.svb__svc-arrow {
    width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
    background: var(--svb-bg); display: flex;
    align-items: center; justify-content: center;
    color: var(--svb-muted); transition: all 0.35s var(--svb-ease);
    opacity: 0; transform: translateX(-8px);
}
.svb__svc-arrow svg { width: 16px; height: 16px; }
.svb__svc:hover .svb__svc-arrow { opacity: 1; transform: translateX(0); color: var(--svb-primary); background: rgba(var(--svb-primary-rgb),0.08); }

/* CTA */
.svb__cta {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 15px 30px; border-radius: 14px;
    background: var(--svb-primary); color: #fff;
    font-size: 15px; font-weight: 700; text-decoration: none;
    box-shadow: 0 4px 20px rgba(var(--svb-primary-rgb),0.3);
    transition: all 0.35s var(--svb-ease);
    align-self: flex-start;
}
.svb__cta svg { width: 18px; height: 18px; transition: transform 0.3s var(--svb-ease); }
.svb__cta:hover { transform: translateY(-3px); box-shadow: 0 8px 32px rgba(var(--svb-primary-rgb),0.45); }
.svb__cta:hover svg { transform: translateX(4px); }

/* ==========================================================================
   RIGHT — Stacked images
   ========================================================================== */

.svb__right { position: relative; }

.svb__stack {
    position: relative; width: 100%; min-height: 520px;
}

/* Image frames */
.svb__frame { position: absolute; border-radius: 20px; overflow: hidden; box-shadow: 0 20px 60px rgba(var(--svb-dark-rgb),0.12); }
.svb__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

.svb__frame--main {
    top: 0; right: 0; width: 80%; height: 70%;
    z-index: 1; border-radius: 22px;
    animation: svb-float-a 7s ease-in-out infinite;
}

.svb__frame--secondary {
    bottom: 0; left: 0; width: 55%; height: 55%;
    z-index: 2; border-radius: 18px;
    border: 4px solid var(--svb-white);
    box-shadow: 0 24px 64px rgba(var(--svb-dark-rgb),0.15);
    animation: svb-float-b 8s 1.5s ease-in-out infinite;
}

.svb__frame--tertiary {
    top: 10%; left: 5%; width: 30%; height: 28%;
    z-index: 3; border-radius: 14px;
    border: 3px solid var(--svb-white);
    box-shadow: 0 12px 40px rgba(var(--svb-dark-rgb),0.1);
    animation: svb-float-c 6s 3s ease-in-out infinite;
}

@keyframes svb-float-a { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes svb-float-b { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-8px) rotate(-1deg)} }
@keyframes svb-float-c { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-6px) rotate(1deg)} }

/* Glass cards */
.svb__glass {
    position: absolute; z-index: 4;
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 16px; padding: 14px 18px;
    box-shadow: 0 12px 40px rgba(var(--svb-dark-rgb),0.1);
}

/* Stat card */
.svb__glass--stat {
    bottom: 15%; right: 5%;
    min-width: 160px;
    animation: svb-float-a 6s 2s ease-in-out infinite;
}

.svb__glass-val {
    display: block; font-size: 28px; font-weight: 900; color: var(--svb-primary);
    line-height: 1; letter-spacing: -0.02em;
}
.svb__glass-label { display: block; font-size: 11px; font-weight: 600; color: var(--svb-muted); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.5px; }

.svb__glass-chart {
    display: block; width: 100%; height: 24px; margin-top: 8px;
    color: var(--svb-primary); opacity: 0.6;
}

/* Badge card */
.svb__glass--badge {
    top: 5%; right: 15%;
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 700; color: var(--svb-text);
    animation: svb-float-c 7s 1s ease-in-out infinite;
}

.svb__glass-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 8px rgba(34,197,94,0.5);
    animation: svb-pulse 2s ease-in-out infinite;
}

/* Floating plus button */
.svb__fab {
    position: absolute; bottom: 5%; right: 0; z-index: 5;
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--svb-primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 28px rgba(var(--svb-primary-rgb),0.4);
    cursor: default;
    animation: svb-float-b 5s ease-in-out infinite;
}
.svb__fab svg { width: 22px; height: 22px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
    .svb__grid { grid-template-columns: 1fr; gap: 48px; }
    .svb__stack { min-height: 420px; max-width: 560px; margin: 0 auto; }
}

@media (max-width: 768px) {
    .svb { padding: 64px 0; }
    .svb__inner { padding: 0 20px; }
    .svb__title { font-size: 30px; }
    .svb__stack { min-height: 340px; }
    .svb__frame--main { width: 85%; height: 65%; }
    .svb__frame--secondary { width: 50%; height: 50%; }
    .svb__frame--tertiary { width: 35%; height: 30%; }
    .svb__glass--stat { right: 0; bottom: 10%; }
    .svb__fab { display: none; }
}

@media (max-width: 480px) {
    .svb { padding: 48px 0; }
    .svb__inner { padding: 0 16px; }
    .svb__title { font-size: 26px; }
    .svb__desc { font-size: 14px; }
    .svb__svc { padding: 14px 16px; gap: 12px; }
    .svb__svc-icon { width: 38px; height: 38px; border-radius: 10px; }
    .svb__svc-icon svg { width: 18px; height: 18px; }
    .svb__svc-arrow { display: none; }
    .svb__stack { min-height: 280px; }
    .svb__frame--tertiary { display: none; }
    .svb__glass--badge { display: none; }
    .svb__glass--stat { padding: 10px 14px; }
    .svb__glass-val { font-size: 22px; }
    .svb__cta { width: 100%; justify-content: center; }
}

/* Motion / Editor */
@media (prefers-reduced-motion: reduce) {
    .svb__frame, .svb__glass, .svb__fab, .svb__eyebrow-truck { animation: none !important; }
    [data-svb-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
    .svb__svc::after { display: none; }
}

.elementor-editor-active [data-svb-reveal] { opacity: 1 !important; transform: none !important; }
.elementor-editor-active .svb__frame,
.elementor-editor-active .svb__glass,
.elementor-editor-active .svb__fab,
.elementor-editor-active .svb__eyebrow-truck { animation: none !important; }