/* =========================================
   JUSTWEB OS — SERVICE PAGES (PREMIUM)
   services.css · /services/*.php
   ========================================= */

:root {
    --red:        #D93025;
    --red-glow:   rgba(217,48,37,.22);
    --red-soft:   rgba(217,48,37,.10);
    --red-mid:    rgba(217,48,37,.18);
    --blue:       #1A56E8;
    --blue-soft:  rgba(26,86,232,.10);
    --green:      #00C96B;
    --green-dim:  rgba(0,201,107,.55);
    --amber:      #F59E0B;

    --dark:       #0F1117;
    --dark-2:     #161B27;
    --dark-3:     #1C2235;
    --white:      #FFFFFF;
    --off-white:  #F7F6F2;
    --cream:      #F0EDE6;

    --ink:        #0E1018;
    --ink-mid:    #374151;
    --ink-soft:   #6B7280;
    --ink-faint:  #9CA3AF;

    --border-l:   rgba(0,0,0,.08);
    --border-d:   rgba(255,255,255,.07);
    --border-db:  rgba(255,255,255,.13);

    --font-b: 'Plus Jakarta Sans', sans-serif;
    --font-m: 'IBM Plex Mono', monospace;
    --ease:   cubic-bezier(0.16,1,0.3,1);
    --ease-b: cubic-bezier(0.34,1.56,0.64,1);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:var(--font-b); -webkit-font-smoothing:antialiased; overflow-x:hidden; background:var(--white); }
img,video { display:block; max-width:100%; }
a { text-decoration:none; color:inherit; }
.mono { font-family:var(--font-m); }

.container-wide { width:100%; max-width:1360px; margin:0 auto; padding:0 44px; }

/* ── COLOURS ─────────────────────────────── */
.c-red  { color:var(--red); }
.c-blue { color:var(--blue); }
.c-green{ color:var(--green); }

/* ── SHARED EYEBROW ─────────────────────── */
.sv-eye {
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--font-m); font-size:10px;
    letter-spacing:.18em; text-transform:uppercase;
    margin-bottom:18px;
}
.sv-eye.dark  { color:rgba(255,255,255,.38); }
.sv-eye.light { color:var(--ink-soft); }
.sv-eye__dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.sv-eye__dot.red   { background:var(--red); }
.sv-eye__dot.blue  { background:var(--blue); }
.sv-eye__dot.green {
    background:var(--green);
    box-shadow:0 0 0 0 var(--green-dim);
    animation:dotPulse 2.4s ease infinite;
}
@keyframes dotPulse { 0%{box-shadow:0 0 0 0 var(--green-dim)} 60%{box-shadow:0 0 0 7px transparent} 100%{box-shadow:0 0 0 0 transparent} }

/* ── BUTTONS ─────────────────────────────── */
.sv-btn-red {
    display:inline-flex; align-items:center; gap:10px;
    background:var(--red); color:#fff;
    font-size:15px; font-weight:700;
    padding:16px 32px; border-radius:8px; border:none;
    transition:background .3s,transform .2s,box-shadow .3s;
    white-space:nowrap; cursor:pointer;
}
.sv-btn-red:hover { background:#b82920; transform:translateY(-2px); box-shadow:0 16px 40px var(--red-glow); }
.sv-btn-red .arr { font-size:18px; transition:transform .3s var(--ease); }
.sv-btn-red:hover .arr { transform:translate(2px,-2px); }

.sv-btn-ghost {
    display:inline-flex; align-items:center; gap:6px;
    color:rgba(255,255,255,.7); font-size:15px; font-weight:600;
    padding:15px 0; border-bottom:1.5px solid rgba(255,255,255,.25);
    transition:color .25s,border-color .25s;
}
.sv-btn-ghost:hover { color:#fff; border-color:rgba(255,255,255,.7); }

.sv-btn-outline {
    display:inline-flex; align-items:center; gap:8px;
    color:var(--ink); font-family:var(--font-m);
    font-size:10px; font-weight:600; letter-spacing:.14em;
    padding:13px 24px; border:1.5px solid rgba(0,0,0,.16);
    border-radius:8px; transition:background .3s,color .3s;
}
.sv-btn-outline:hover { background:var(--ink); color:#fff; }

.sv-btn-wa {
    display:inline-flex; align-items:center; gap:10px;
    background:#25D366; color:#fff;
    font-size:15px; font-weight:700;
    padding:16px 32px; border-radius:8px; border:none;
    transition:background .3s,transform .2s,box-shadow .3s;
    white-space:nowrap; cursor:pointer;
}
.sv-btn-wa:hover { background:#1da850; transform:translateY(-2px); box-shadow:0 16px 40px rgba(37,211,102,.3); }
.sv-btn-wa .arr { font-size:18px; transition:transform .3s var(--ease); }
.sv-btn-wa:hover .arr { transform:translate(2px,-2px); }

/* ── REVEAL ─────────────────────────────── */
.reveal {
    opacity:0; transform:translateY(32px);
    transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.reveal.in { opacity:1; transform:translateY(0); }

@keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes countUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* ════════════════════════════════════════
   § 1  HERO — dark, immersive
   ════════════════════════════════════════ */
.sv-hero {
    position:relative; overflow:hidden;
    background:var(--dark); min-height:90vh;
    display:flex; align-items:center;
}

.sv-hero__photo { position:absolute; inset:0; z-index:0; }
.sv-hero__photo img { width:100%; height:100%; object-fit:cover; opacity:.2; }
.sv-hero__photo-scrim {
    position:absolute; inset:0;
    background:
        linear-gradient(90deg,var(--dark) 40%,rgba(15,17,23,.5) 100%),
        linear-gradient(180deg,var(--dark) 0%,transparent 15%,transparent 75%,var(--dark) 100%);
}

.sv-hero__grain {
    position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.034;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:180px;
}

/* Grid lines decoration */
.sv-hero::before {
    content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
    background-size:80px 80px;
}

/* Bottom accent line */
.sv-hero::after {
    content:''; position:absolute; bottom:0; left:0;
    width:100%; height:1px; z-index:10;
    background:linear-gradient(90deg,transparent,var(--red) 35%,var(--blue) 65%,transparent);
}

.sv-hero__inner {
    position:relative; z-index:5;
    padding:120px 0 80px; width:100%;
}

.sv-hero__breadcrumb {
    display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap;
    font-family:var(--font-m); font-size:10px; letter-spacing:.12em;
    color:rgba(255,255,255,.22); margin-bottom:28px;
    animation:fadeUp .8s var(--ease) .05s both;
}
.sv-hero__breadcrumb a { color:rgba(255,255,255,.38); transition:color .2s; }
.sv-hero__breadcrumb a:hover { color:rgba(255,255,255,.7); }
.sv-hero__breadcrumb span { color:rgba(255,255,255,.18); }

.sv-hero__layout {
    display:grid; grid-template-columns:1fr 380px; gap:60px; align-items:center;
}

/* Hero copy */
.sv-hero__tag {
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--font-m); font-size:9px; letter-spacing:.22em;
    color:var(--red); margin-bottom:20px;
    animation:fadeUp .8s var(--ease) .12s both;
}
.sv-hero__tag-dot { width:5px; height:5px; background:var(--red); border-radius:50%; }

.sv-hero__title {
    font-size:clamp(44px,6.5vw,88px);
    font-weight:800; line-height:.98; letter-spacing:-.04em; color:#fff;
    margin-bottom:24px;
    animation:fadeUp .8s var(--ease) .2s both;
}
.sv-hero__title em { font-style:normal; color:var(--red); }

.sv-hero__sub {
    font-size:17px; font-weight:400; line-height:1.75;
    color:rgba(255,255,255,.52); max-width:520px; margin-bottom:40px;
    animation:fadeUp .8s var(--ease) .28s both;
}

.sv-hero__actions {
    display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-bottom:48px;
    animation:fadeUp .8s var(--ease) .36s both;
}

/* Trust badges */
.sv-hero__trust {
    display:flex; align-items:center; gap:20px; flex-wrap:wrap;
    animation:fadeUp .8s var(--ease) .44s both;
}
.sv-hero__trust-item {
    display:flex; align-items:center; gap:8px;
    font-family:var(--font-m); font-size:10px; letter-spacing:.1em;
    color:rgba(255,255,255,.4);
}
.sv-hero__trust-item svg { width:14px; height:14px; color:var(--green); }
.sv-hero__trust-sep { width:1px; height:14px; background:rgba(255,255,255,.12); }

/* Hero right — glass card */
.sv-hero__card {
    background:rgba(255,255,255,.07);
    backdrop-filter:blur(28px) saturate(160%);
    -webkit-backdrop-filter:blur(28px) saturate(160%);
    border:1px solid rgba(255,255,255,.12);
    border-radius:20px; overflow:hidden;
    animation:fadeUp .9s var(--ease) .3s both;
}
.sv-hero__card::before {
    content:''; display:block; height:2px;
    background:linear-gradient(90deg,var(--red),var(--blue));
}
.sv-hero__card-header {
    padding:24px 28px; border-bottom:1px solid rgba(255,255,255,.07);
    font-family:var(--font-m); font-size:9px; letter-spacing:.18em;
    color:rgba(255,255,255,.35);
    display:flex; align-items:center; justify-content:space-between;
}
.sv-hero__card-live { display:flex; align-items:center; gap:7px; }
.sv-hero__card-live-dot {
    width:6px; height:6px; background:var(--green); border-radius:50%;
    box-shadow:0 0 0 0 var(--green-dim); animation:dotPulse 2.4s ease infinite;
}
.sv-hero__stat-grid { display:flex; flex-direction:column; gap:0; }
.sv-hero__stat {
    padding:20px 28px; border-bottom:1px solid rgba(255,255,255,.06);
    display:flex; align-items:center; justify-content:space-between;
}
.sv-hero__stat:last-child { border-bottom:none; }
.sv-hero__stat-label { font-family:var(--font-m); font-size:9px; letter-spacing:.14em; color:rgba(255,255,255,.3); }
.sv-hero__stat-val { font-size:20px; font-weight:800; color:#fff; letter-spacing:-.025em; }
.sv-hero__stat-val sup { font-size:.5em; color:var(--red); font-weight:700; vertical-align:super; }
.sv-hero__card-cta {
    padding:20px 28px; background:rgba(217,48,37,.12); border-top:1px solid rgba(217,48,37,.2);
}
.sv-hero__card-cta a {
    display:flex; align-items:center; justify-content:space-between;
    font-family:var(--font-m); font-size:10px; letter-spacing:.14em;
    color:var(--red); transition:gap .2s;
}
.sv-hero__card-cta a:hover { gap:16px; }

/* ════════════════════════════════════════
   § 2  TRUST BAR — white, social proof
   ════════════════════════════════════════ */
.sv-trust-bar {
    background:var(--white); padding:32px 0;
    border-bottom:1px solid rgba(0,0,0,.06);
}
.sv-trust-bar__inner {
    display:flex; align-items:center; justify-content:space-between;
    gap:32px; flex-wrap:wrap;
}
.sv-trust-bar__left {
    font-size:13px; color:var(--ink-soft);
    display:flex; align-items:center; gap:10px;
}
.sv-trust-bar__num {
    font-size:28px; font-weight:800; letter-spacing:-.03em; color:var(--ink);
}
.sv-trust-bar__logos {
    display:flex; align-items:center; gap:0;
    border-left:1px solid rgba(0,0,0,.08); padding-left:32px; flex-wrap:wrap;
}
.sv-trust-bar__logo {
    font-family:var(--font-m); font-size:10px; letter-spacing:.14em;
    color:var(--ink-faint); padding:0 20px;
    border-right:1px solid rgba(0,0,0,.06);
    white-space:nowrap;
}
.sv-trust-bar__logo:last-child { border-right:none; }

/* ════════════════════════════════════════
   § 3  PAIN SECTION — cream, empathy
   ════════════════════════════════════════ */
.sv-pain {
    background:var(--cream); padding:96px 0;
    border-bottom:1px solid rgba(0,0,0,.05);
}
.sv-pain__grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }

.sv-pain__label { font-family:var(--font-m); font-size:9px; letter-spacing:.22em; color:var(--red); display:block; margin-bottom:16px; }
.sv-pain__title { font-size:clamp(26px,3.2vw,42px); font-weight:800; letter-spacing:-.03em; line-height:1.15; color:var(--ink); margin-bottom:20px; }
.sv-pain__sub { font-size:15px; line-height:1.8; color:var(--ink-mid); }

.sv-pain__list { display:flex; flex-direction:column; gap:12px; }
.sv-pain__item {
    display:flex; align-items:flex-start; gap:14px;
    padding:18px 20px;
    background:var(--white); border:1px solid rgba(0,0,0,.07); border-radius:10px;
    transition:transform .3s var(--ease),box-shadow .3s ease,border-color .3s;
}
.sv-pain__item:hover { transform:translateX(5px); box-shadow:0 8px 24px rgba(0,0,0,.07); border-color:rgba(0,0,0,.14); }
.sv-pain__item-icon {
    width:32px; height:32px; border-radius:8px;
    background:var(--red-soft); border:1px solid rgba(217,48,37,.2);
    display:flex; align-items:center; justify-content:center;
    font-size:14px; flex-shrink:0;
    color:var(--red);
}
.sv-pain__item-text strong { display:block; font-size:14px; font-weight:700; color:var(--ink); margin-bottom:3px; }
.sv-pain__item-text span  { font-size:13px; color:var(--ink-soft); line-height:1.55; }

/* ════════════════════════════════════════
   § 4  FEATURES — white, tabbed
   ════════════════════════════════════════ */
.sv-feats { background:var(--white); padding:100px 0; border-bottom:1px solid rgba(0,0,0,.05); }

.sv-feats__hdr { margin-bottom:52px; }
.sv-feats__title { font-size:clamp(28px,3.5vw,48px); font-weight:800; letter-spacing:-.035em; color:var(--ink); margin-bottom:12px; }
.sv-feats__sub { font-size:15px; line-height:1.75; color:var(--ink-soft); max-width:580px; }

/* Tab nav */
.sv-tabs { display:flex; gap:4px; border-bottom:2px solid rgba(0,0,0,.07); margin-bottom:48px; }
.sv-tab-btn {
    padding:12px 20px; background:none; border:none; cursor:pointer;
    font-family:var(--font-b); font-size:14px; font-weight:600;
    color:var(--ink-soft); position:relative;
    transition:color .25s; white-space:nowrap;
}
.sv-tab-btn::after {
    content:''; position:absolute; bottom:-2px; left:0; width:100%; height:2px;
    background:var(--red); transform:scaleX(0); transform-origin:left;
    transition:transform .35s var(--ease);
}
.sv-tab-btn.active { color:var(--ink); }
.sv-tab-btn.active::after { transform:scaleX(1); }
.sv-tab-btn:hover { color:var(--ink); }

.sv-tab-pane { display:none; }
.sv-tab-pane.active { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; animation:paneSlide .4s var(--ease) both; }
@keyframes paneSlide { from{opacity:0;transform:translateX(16px)} to{opacity:1;transform:translateX(0)} }

.sv-feats__grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.sv-feat {
    padding:24px 22px;
    background:var(--off-white); border:1px solid rgba(0,0,0,.06); border-radius:12px;
    display:flex; align-items:flex-start; gap:14px;
    transition:transform .3s var(--ease),box-shadow .3s,border-color .3s,background .3s;
}
.sv-feat:hover { transform:translateY(-3px); box-shadow:0 12px 32px rgba(0,0,0,.08); border-color:rgba(0,0,0,.14); background:var(--white); }
.sv-feat__icon {
    width:36px; height:36px; border-radius:8px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-size:16px;
    background:rgba(217,48,37,.08); border:1px solid rgba(217,48,37,.14);
}
.sv-feat__icon.b { background:rgba(26,86,232,.08); border-color:rgba(26,86,232,.14); }
.sv-feat__icon.g { background:rgba(0,201,107,.08); border-color:rgba(0,201,107,.14); }
.sv-feat__body h4 { font-size:13px; font-weight:700; color:var(--ink); margin-bottom:4px; }
.sv-feat__body p  { font-size:12px; line-height:1.65; color:var(--ink-soft); }

/* Tab image */
.sv-feats__img {
    border-radius:16px; overflow:hidden;
    box-shadow:0 28px 64px rgba(0,0,0,.12);
    aspect-ratio:4/3; position:relative;
}
.sv-feats__img img { width:100%; height:100%; object-fit:cover; }
.sv-feats__img-badge {
    position:absolute; bottom:20px; left:20px;
    background:rgba(15,17,23,.85);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,.1); border-radius:10px;
    padding:12px 18px;
    font-family:var(--font-m); font-size:9px; letter-spacing:.14em; color:rgba(255,255,255,.6);
}
.sv-feats__img-badge strong { color:var(--green); display:block; font-size:18px; font-weight:800; letter-spacing:-.02em; margin-top:3px; }

/* ════════════════════════════════════════
   § 5  STATS — dark, animated counters
   ════════════════════════════════════════ */
.sv-stats {
    background:var(--dark-2); padding:96px 0;
    position:relative; overflow:hidden;
}
.sv-stats::before {
    content:''; position:absolute; inset:0; pointer-events:none;
    background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
    background-size:80px 80px;
}
.sv-stats__inner { position:relative; z-index:2; }
.sv-stats__hdr { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; margin-bottom:56px; flex-wrap:wrap; }
.sv-stats__title { font-size:clamp(26px,3.5vw,44px); font-weight:800; letter-spacing:-.03em; color:#fff; }
.sv-stats__title em { font-style:normal; color:var(--red); }
.sv-stats__cta-link {
    font-family:var(--font-m); font-size:10px; letter-spacing:.14em; color:rgba(255,255,255,.4);
    transition:color .2s; white-space:nowrap;
    display:flex; align-items:center; gap:8px;
}
.sv-stats__cta-link:hover { color:rgba(255,255,255,.8); }

/* Counters grid */
.sv-stats__grid {
    display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.06);
    border-radius:14px; overflow:hidden; margin-bottom:48px;
}
.sv-counter {
    background:var(--dark-2); padding:36px 32px;
    transition:background .3s;
}
.sv-counter:hover { background:rgba(255,255,255,.04); }
.sv-counter__n {
    font-size:clamp(36px,4.5vw,60px); font-weight:800;
    letter-spacing:-.05em; color:#fff; line-height:1; margin-bottom:6px;
}
.sv-counter__n sup { font-size:.42em; color:var(--red); font-weight:700; vertical-align:super; }
.sv-counter__n small { font-size:.35em; color:rgba(255,255,255,.4); vertical-align:super; letter-spacing:0; font-weight:600; }
.sv-counter__lbl { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:6px; }
.sv-counter__desc { font-size:12px; line-height:1.6; color:rgba(255,255,255,.28); }

/* Quote */
.sv-stats__quote {
    padding:32px 40px;
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
    border-left:3px solid var(--red); border-radius:0 12px 12px 0;
    display:flex; align-items:center; gap:40px; flex-wrap:wrap;
}
.sv-stats__quote-text { flex:1; font-size:17px; font-weight:500; line-height:1.75; color:rgba(255,255,255,.72); font-style:italic; }
.sv-stats__quote-attr { font-family:var(--font-m); font-size:9px; letter-spacing:.14em; color:rgba(255,255,255,.25); white-space:nowrap; }
.sv-stats__quote-stars { color:var(--amber); font-size:14px; letter-spacing:2px; display:block; margin-bottom:6px; }

/* ════════════════════════════════════════
   § 6  PROCESS — off-white, timeline
   ════════════════════════════════════════ */
.sv-process { background:var(--off-white); padding:100px 0; border-bottom:1px solid rgba(0,0,0,.05); }
.sv-process__hdr { margin-bottom:64px; }
.sv-process__title { font-size:clamp(26px,3.5vw,48px); font-weight:800; letter-spacing:-.03em; color:var(--ink); }
.sv-process__sub { font-size:15px; line-height:1.75; color:var(--ink-soft); max-width:520px; margin-top:12px; }

.sv-process__steps { display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; }

/* Connector line */
.sv-process__steps::before {
    content:''; position:absolute; top:28px; left:10%; width:80%; height:1px;
    background:linear-gradient(90deg,var(--red),var(--blue)); z-index:0;
}

.sv-process__step { padding:0 20px; position:relative; z-index:1; }
.sv-process__step-num {
    width:56px; height:56px; border-radius:50%;
    background:var(--white); border:2px solid rgba(0,0,0,.1);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-m); font-size:12px; font-weight:600;
    color:var(--red); margin-bottom:24px;
    box-shadow:0 4px 16px rgba(0,0,0,.08);
    transition:border-color .3s,box-shadow .3s;
}
.sv-process__step:hover .sv-process__step-num {
    border-color:var(--red); box-shadow:0 4px 24px var(--red-glow);
}
.sv-process__step h3 { font-size:16px; font-weight:700; color:var(--ink); margin-bottom:10px; letter-spacing:-.015em; }
.sv-process__step p  { font-size:13px; line-height:1.75; color:var(--ink-soft); }

/* ════════════════════════════════════════
   § 7  TESTIMONIALS — white
   ════════════════════════════════════════ */
.sv-testi { background:var(--white); padding:100px 0; border-bottom:1px solid rgba(0,0,0,.05); }
.sv-testi__hdr { margin-bottom:56px; }
.sv-testi__title { font-size:clamp(26px,3.5vw,46px); font-weight:800; letter-spacing:-.03em; color:var(--ink); }
.sv-testi__sub { font-size:15px; line-height:1.75; color:var(--ink-soft); max-width:520px; margin-top:12px; }

.sv-testi__grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; }

.sv-testi__card {
    background:var(--off-white); border:1px solid rgba(0,0,0,.07);
    border-radius:16px; padding:36px 32px;
    position:relative; overflow:hidden;
    transition:transform .35s var(--ease),box-shadow .35s ease,border-color .3s;
}
.sv-testi__card:hover { transform:translateY(-6px); box-shadow:0 20px 52px rgba(0,0,0,.09); border-color:rgba(0,0,0,.14); }
.sv-testi__card::before {
    content:''; position:absolute; top:0; left:0; width:100%; height:3px;
    background:linear-gradient(90deg,var(--red),var(--blue));
    transform:scaleX(0); transform-origin:left;
    transition:transform .4s var(--ease);
}
.sv-testi__card:hover::before { transform:scaleX(1); }
.sv-testi__card.featured { background:var(--ink); border-color:var(--ink); }
.sv-testi__card.featured .sv-testi__quote { color:rgba(255,255,255,.72); }
.sv-testi__card.featured .sv-testi__name { color:#fff; }
.sv-testi__card.featured .sv-testi__role { color:rgba(255,255,255,.4); }
.sv-testi__card.featured .sv-testi__stars { color:var(--amber); }

.sv-testi__stars { font-size:14px; letter-spacing:2px; color:var(--amber); margin-bottom:18px; }
.sv-testi__qmark { font-size:56px; line-height:.6; color:var(--red); font-family:Georgia,serif; margin-bottom:18px; opacity:.6; }
.sv-testi__quote { font-size:14px; font-weight:400; line-height:1.8; color:var(--ink-mid); margin-bottom:28px; font-style:normal; }
.sv-testi__foot { display:flex; align-items:center; gap:12px; }
.sv-testi__av { width:40px; height:40px; border-radius:50%; object-fit:cover; flex-shrink:0; border:2px solid rgba(0,0,0,.08); }
.sv-testi__name { font-size:13px; font-weight:700; color:var(--ink); display:block; }
.sv-testi__role { font-size:11px; color:var(--ink-soft); display:block; }

/* ════════════════════════════════════════
   § 8  COMPARISON TABLE — cream
   ════════════════════════════════════════ */
.sv-compare { background:var(--cream); padding:96px 0; border-bottom:1px solid rgba(0,0,0,.05); }
.sv-compare__hdr { margin-bottom:48px; }
.sv-compare__title { font-size:clamp(26px,3.5vw,46px); font-weight:800; letter-spacing:-.03em; color:var(--ink); }

.sv-compare__table {
    width:100%; border-collapse:collapse;
    background:var(--white); border-radius:14px; overflow:hidden;
    box-shadow:0 16px 48px rgba(0,0,0,.08);
}
.sv-compare__table thead tr { background:var(--ink); }
.sv-compare__table thead th {
    padding:20px 24px; text-align:left;
    font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}
.sv-compare__table thead th:first-child { color:rgba(255,255,255,.5); width:40%; }
.sv-compare__table thead th.jw { color:#fff; background:rgba(217,48,37,.2); }
.sv-compare__table thead th.other { color:rgba(255,255,255,.4); }

.sv-compare__table tbody tr { border-bottom:1px solid rgba(0,0,0,.06); transition:background .2s; }
.sv-compare__table tbody tr:last-child { border-bottom:none; }
.sv-compare__table tbody tr:hover { background:rgba(0,0,0,.02); }
.sv-compare__table tbody td { padding:18px 24px; font-size:14px; }
.sv-compare__table tbody td:first-child { font-weight:600; color:var(--ink-mid); }
.sv-compare__table tbody td.jw { background:rgba(217,48,37,.04); color:var(--ink); font-weight:500; }

.sv-check { display:inline-flex; align-items:center; gap:6px; }
.sv-check.yes { color:var(--green); }
.sv-check.no  { color:var(--ink-faint); }
.sv-check svg { width:16px; height:16px; }

/* ════════════════════════════════════════
   § 9  PRICING — dark
   ════════════════════════════════════════ */
.sv-pricing { background:var(--dark); padding:96px 0; border-bottom:1px solid rgba(255,255,255,.04); }
.sv-pricing__inner { position:relative; z-index:2; }

.sv-pricing__grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:48px; }

.sv-price-card {
    padding:40px; border:1px solid rgba(255,255,255,.08);
    border-radius:16px; background:rgba(255,255,255,.04);
    position:relative; overflow:hidden;
    transition:border-color .3s,background .3s;
}
.sv-price-card::before {
    content:''; position:absolute; top:0; left:0; width:100%; height:2px;
    background:linear-gradient(90deg,var(--red),var(--blue));
}
.sv-price-card.featured { background:rgba(217,48,37,.1); border-color:rgba(217,48,37,.35); }
.sv-price-card:hover { border-color:rgba(255,255,255,.18); }
.sv-price-card.featured:hover { border-color:rgba(217,48,37,.55); }

.sv-price-card__tag {
    font-family:var(--font-m); font-size:9px; letter-spacing:.18em;
    color:rgba(255,255,255,.35); display:block; margin-bottom:12px;
}
.sv-price-card__name { font-size:22px; font-weight:800; color:#fff; letter-spacing:-.025em; margin-bottom:20px; }
.sv-price-card__price {
    font-size:clamp(36px,4vw,52px); font-weight:800;
    letter-spacing:-.04em; color:#fff; margin-bottom:6px; line-height:1;
}
.sv-price-card__price small { font-size:.38em; color:rgba(255,255,255,.4); font-weight:600; letter-spacing:0; vertical-align:super; }
.sv-price-card__period { font-family:var(--font-m); font-size:10px; letter-spacing:.1em; color:rgba(255,255,255,.3); margin-bottom:32px; }
.sv-price-card__includes {
    font-family:var(--font-m); font-size:9px; letter-spacing:.16em;
    color:rgba(255,255,255,.28); display:block; margin-bottom:16px;
}
.sv-price-card__list { list-style:none; display:flex; flex-direction:column; gap:10px; margin-bottom:32px; }
.sv-price-card__list li {
    display:flex; align-items:flex-start; gap:10px;
    font-size:13px; color:rgba(255,255,255,.65);
}
.sv-price-card__list li::before { content:'✓'; color:var(--green); font-weight:700; flex-shrink:0; }

/* ════════════════════════════════════════
   § 10 FAQ — white, accordion
   ════════════════════════════════════════ */
.sv-faq { background:var(--white); padding:96px 0; border-bottom:1px solid rgba(0,0,0,.05); }
.sv-faq__grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.sv-faq__sticky { position:sticky; top:120px; }
.sv-faq__title { font-size:clamp(26px,3.5vw,46px); font-weight:800; letter-spacing:-.03em; color:var(--ink); margin-bottom:16px; }
.sv-faq__sub { font-size:15px; line-height:1.8; color:var(--ink-soft); margin-bottom:32px; }

.sv-faq__items { display:flex; flex-direction:column; gap:0; }
.sv-faq__item {
    border-bottom:1px solid rgba(0,0,0,.07);
}
.sv-faq__item:first-child { border-top:1px solid rgba(0,0,0,.07); }

.sv-faq__q {
    width:100%; background:none; border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:22px 0; text-align:left;
    font-family:var(--font-b); font-size:15px; font-weight:700;
    color:var(--ink); transition:color .2s;
}
.sv-faq__q:hover { color:var(--red); }
.sv-faq__q-arrow {
    width:24px; height:24px; border-radius:50%;
    background:rgba(0,0,0,.06); display:flex; align-items:center;
    justify-content:center; flex-shrink:0;
    font-size:14px; color:var(--ink-soft);
    transition:transform .35s var(--ease),background .2s;
}
.sv-faq__item.open .sv-faq__q-arrow { transform:rotate(45deg); background:var(--red); color:#fff; }
.sv-faq__item.open .sv-faq__q { color:var(--red); }

.sv-faq__a {
    max-height:0; overflow:hidden;
    transition:max-height .45s var(--ease), padding .35s ease;
    font-size:14px; line-height:1.8; color:var(--ink-soft);
    padding:0;
}
.sv-faq__item.open .sv-faq__a { max-height:400px; padding-bottom:20px; }

/* ════════════════════════════════════════
   § 11 FINAL CTA — dark, photo
   ════════════════════════════════════════ */
.sv-cta-final {
    background:var(--dark-2); padding:100px 0;
    position:relative; overflow:hidden;
}
.sv-cta-final__photo { position:absolute; inset:0; z-index:0; }
.sv-cta-final__photo img { width:100%; height:100%; object-fit:cover; opacity:.15; }
.sv-cta-final__photo-scrim { position:absolute; inset:0; background:linear-gradient(135deg,rgba(15,17,23,.94) 0%,rgba(22,27,39,.82) 100%); }

.sv-cta-final__inner { position:relative; z-index:5; display:grid; grid-template-columns:1fr 360px; gap:60px; align-items:center; }

.sv-cta-final__title { font-size:clamp(40px,6vw,80px); font-weight:800; letter-spacing:-.045em; color:#fff; line-height:1; margin-bottom:22px; }
.sv-cta-final__title em { font-style:normal; color:var(--red); }
.sv-cta-final__body { font-size:15px; line-height:1.75; color:rgba(255,255,255,.5); max-width:480px; margin-bottom:40px; }
.sv-cta-final__body strong { color:rgba(255,255,255,.85); }
.sv-cta-final__actions { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }

/* Glass info card */
.sv-cta-final__glass {
    background:rgba(255,255,255,.07);
    backdrop-filter:blur(28px) saturate(160%);
    -webkit-backdrop-filter:blur(28px) saturate(160%);
    border:1px solid rgba(255,255,255,.1);
    border-radius:18px; overflow:hidden;
}
.sv-cta-final__glass::before { content:''; display:block; height:2px; background:linear-gradient(90deg,var(--red),var(--blue)); }
.sv-cta-final__meta { padding:22px 28px; border-bottom:1px solid rgba(255,255,255,.06); }
.sv-cta-final__meta:last-child { border-bottom:none; }
.sv-cta-final__meta > span { font-family:var(--font-m); font-size:9px; letter-spacing:.18em; color:rgba(255,255,255,.28); display:block; margin-bottom:6px; }
.sv-cta-final__meta > strong { font-size:16px; font-weight:700; color:#fff; }

/* ════════════════════════════════════════
   FLOATING ELEMENTS
   ════════════════════════════════════════ */

/* Sticky CTA bar */
.sv-sticky-bar {
    position:fixed; bottom:0; left:0; width:100%; z-index:8000;
    background:rgba(15,17,23,.97);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    border-top:1px solid rgba(255,255,255,.08);
    padding:14px 44px;
    transform:translateY(100%);
    transition:transform .5s var(--ease);
}
.sv-sticky-bar.visible { transform:translateY(0); }
.sv-sticky-bar__inner {
    max-width:1360px; margin:0 auto;
    display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.sv-sticky-bar__text {
    font-size:14px; font-weight:600; color:rgba(255,255,255,.7);
}
.sv-sticky-bar__text strong { color:#fff; }
.sv-sticky-bar__actions { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.sv-sticky-bar__btn-primary {
    display:inline-flex; align-items:center; gap:8px;
    background:var(--red); color:#fff;
    font-size:13px; font-weight:700; padding:11px 22px; border-radius:6px;
    transition:background .25s; white-space:nowrap;
}
.sv-sticky-bar__btn-primary:hover { background:#b82920; }
.sv-sticky-bar__btn-secondary {
    font-family:var(--font-m); font-size:10px; letter-spacing:.12em;
    color:rgba(255,255,255,.4); transition:color .2s;
}
.sv-sticky-bar__btn-secondary:hover { color:rgba(255,255,255,.8); }

/* Floating WhatsApp */
.sv-wa-float {
    position:fixed; bottom:80px; right:28px; z-index:8001;
    width:60px; height:60px; border-radius:50%;
    background:#25D366; color:#fff;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 32px rgba(37,211,102,.45);
    transition:transform .3s var(--ease-b),box-shadow .3s;
    cursor:pointer;
}
.sv-wa-float:hover { transform:scale(1.12) translateY(-3px); box-shadow:0 16px 48px rgba(37,211,102,.55); }
.sv-wa-float svg { width:28px; height:28px; }

/* WhatsApp tooltip */
.sv-wa-float__tip {
    position:absolute; right:74px; top:50%; transform:translateY(-50%);
    background:rgba(15,17,23,.95); color:#fff;
    font-size:12px; font-weight:600; padding:8px 14px; border-radius:8px;
    white-space:nowrap; opacity:0; pointer-events:none;
    transition:opacity .25s; border:1px solid rgba(255,255,255,.1);
}
.sv-wa-float__tip::after {
    content:''; position:absolute; left:100%; top:50%; transform:translateY(-50%);
    border:6px solid transparent; border-left-color:rgba(15,17,23,.95);
}
.sv-wa-float:hover .sv-wa-float__tip { opacity:1; }

/* ════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════ */
@media(max-width:1100px){
    .container-wide { padding:0 28px; }
    .sv-hero__layout { grid-template-columns:1fr; }
    .sv-hero__card { max-width:480px; }
    .sv-pain__grid { grid-template-columns:1fr; gap:40px; }
    .sv-tab-pane.active { grid-template-columns:1fr; }
    .sv-feats__img { display:none; }
    .sv-stats__grid { grid-template-columns:1fr 1fr; }
    .sv-process__steps { grid-template-columns:1fr 1fr; gap:32px; }
    .sv-process__steps::before { display:none; }
    .sv-testi__grid { grid-template-columns:1fr 1fr; }
    .sv-pricing__grid { grid-template-columns:1fr; }
    .sv-faq__grid { grid-template-columns:1fr; }
    .sv-faq__sticky { position:static; }
    .sv-cta-final__inner { grid-template-columns:1fr; }
    .sv-cta-final__glass { max-width:440px; }
    .sv-trust-bar__logos { padding-left:20px; }
    .sv-trust-bar__logo { padding:0 12px; }
    .sv-sticky-bar { padding:14px 28px; }
}

@media(max-width:768px){
    .container-wide { padding:0 20px; }
    .sv-hero { min-height:80vh; }
    .sv-hero__title { font-size:clamp(40px,10vw,58px); }
    .sv-hero__actions { flex-direction:column; align-items:flex-start; gap:14px; }
    .sv-hero__trust { gap:12px; }
    .sv-stats__grid { grid-template-columns:1fr 1fr; }
    .sv-process__steps { grid-template-columns:1fr; gap:24px; }
    .sv-testi__grid { grid-template-columns:1fr; }
    .sv-compare__table { font-size:12px; }
    .sv-compare__table thead th, .sv-compare__table tbody td { padding:14px 16px; }
    .sv-cta-final__actions { flex-direction:column; align-items:flex-start; }
    .sv-trust-bar__inner { flex-direction:column; align-items:flex-start; }
    .sv-trust-bar__logos { border-left:none; padding-left:0; border-top:1px solid rgba(0,0,0,.07); padding-top:12px; flex-wrap:wrap; }
    .sv-sticky-bar { padding:12px 20px; }
    .sv-sticky-bar__text { display:none; }
    .sv-wa-float { bottom:70px; right:16px; }
}