/* ==========================================================================
   Services pages (/services/, area pages, service pages). Premium theme v3:
   dark headers with real photos, light content, dark contrast bands.
   Simple, lighter layouts on phones.
   ========================================================================== */
:root {
    --sv-ink: #0B1023;
    --sv-night: #07051A;
    --sv-night-2: #110C2E;
    --sv-violet: #7B3CF5;
    --sv-pink: #E9358F;
    --sv-orange: #FF8A2E;
    --sv-line: rgba(15, 23, 42, .08);
    --sv-line-dark: rgba(255, 255, 255, .1);
    --sv-text: #475569;
    --sv-grad: linear-gradient(110deg, #8B5CF6, #EC4899 55%, #FB923C);
    --sv-ease: cubic-bezier(.16, 1, .3, 1);
    --sv-r: 24px;
    --sv-nav: var(--nav-height, 76px);
}

/* ---------- motion helpers (no-JS and reduced motion show everything) ---------- */
.sv-js [data-sv-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--sv-ease), transform 1s var(--sv-ease); transition-delay: calc(var(--d, 0) * 70ms); }
.sv-js [data-sv-reveal="fade"] { transform: none; }
.sv-js [data-sv-reveal="scale"] { transform: scale(.96); }
.sv-js [data-sv-reveal].is-in { opacity: 1; transform: none; }
.sv-rise { animation: svRise 1s var(--sv-ease) both; animation-delay: calc(var(--d, 0) * 100ms + 60ms); }
@keyframes svRise { from { opacity: .01; transform: translateY(22px); } }  /* .01, not 0: looks the same, but Chrome counts the text as painted (LCP) from the first frame */
.sv-w { display: inline-block; opacity: 0; transform: translateY(.45em); animation: svWord .8s var(--sv-ease) forwards; animation-delay: calc(var(--w) * 45ms + 150ms); }
@keyframes svWord { to { opacity: 1; transform: none; } }

/* ---------- shared ---------- */
.sv-sec { position: relative; padding: clamp(4.5rem, 9vw, 7.5rem) 0; }
.sv-sec-sm { padding: clamp(2rem, 4vw, 3rem) 0; }
.sv-soft { background: #F7F6FC; }
.sv-dark { position: relative; color: #fff; background: var(--sv-night); overflow: hidden; isolation: isolate; }
.sv-dark .container { position: relative; z-index: 2; }
.sv-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.sv-glow { background: radial-gradient(55% 60% at 8% 0%, rgba(109, 40, 217, .42), transparent 70%), radial-gradient(50% 55% at 100% 100%, rgba(219, 39, 119, .28), transparent 70%); }
.sv-dark::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 72px 72px; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000, transparent 80%); mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000, transparent 80%); }
.sv-kick { display: inline-flex; align-items: center; gap: .6rem; font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #6D28D9; text-decoration: none; }
.sv-kick::before { content: ''; width: 28px; height: 2px; border-radius: 2px; background: var(--sv-grad); }
a.sv-kick:hover { color: #4C1D95; }
.sv-dark .sv-kick { color: #C4B5FD; }
.sv-grad { background: var(--sv-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sv-h2 { margin: .9rem 0 0; font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.05; letter-spacing: -.035em; color: var(--sv-ink); }
.sv-dark .sv-h2 { color: #fff; }
.sv-sub { margin: 1rem 0 0; max-width: 620px; font-size: 1.08rem; line-height: 1.65; color: var(--sv-text); }
.sv-dark .sv-sub { color: rgba(226, 232, 255, .72); }
.sv-head { margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }
.sv-head-c { text-align: center; }
.sv-head-c .sv-sub { margin-left: auto; margin-right: auto; }
.sv-head-row { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1rem 2rem; }
.sv-link { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; color: #6D28D9; text-decoration: none; }
.sv-link i { transition: transform .35s var(--sv-ease); }
.sv-link:hover { color: #4C1D95; }
.sv-link:hover i, a:hover .sv-arrow, a:hover > .sv-link i { transform: translateX(5px); }
.sv-dark .sv-link { color: #DDD6FE; }
.sv-arrow { transition: transform .35s var(--sv-ease); }
.sv-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.sv-btn-glass { display: inline-flex; align-items: center; gap: .55rem; color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2); }
.sv-btn-glass:hover { color: #fff; background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .35); transform: translateY(-2px); }
.sv-btn-light { display: inline-flex; align-items: center; gap: .55rem; color: var(--sv-ink); background: #fff; border: 1px solid #fff; }
.sv-btn-light:hover { color: var(--sv-ink); transform: translateY(-2px); box-shadow: 0 18px 40px -16px rgba(167, 139, 250, .7); }
.sv-crumbs { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 1.6rem; padding: 0; list-style: none; font-size: .84rem; color: rgba(226, 232, 255, .55); }
.sv-crumbs li + li::before { content: '/'; margin-right: .35rem; opacity: .5; }
.sv-crumbs a { color: rgba(226, 232, 255, .7); text-decoration: none; }
.sv-crumbs a:hover { color: #fff; }
.sv-crumbs [aria-current] { color: #fff; font-weight: 600; }
.sv-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; font-size: 1.1rem; color: #fff; background: linear-gradient(135deg, #7C3AED, #DB2777); box-shadow: 0 12px 24px -12px rgba(124, 58, 237, .8); }
.sv-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.sv-chips span { padding: .38rem .8rem; border-radius: 999px; font-size: .8rem; font-weight: 600; color: #4C1D95; background: #F3EEFF; }
.sv-dark .sv-chips span { color: #E9D5FF; background: rgba(255, 255, 255, .07); border: 1px solid var(--sv-line-dark); }

/* ---------- page headers ---------- */
.sv-hero { padding: calc(var(--sv-nav) + clamp(3rem, 7vw, 5rem)) 0 clamp(3rem, 6vw, 4.5rem); }
.sv-hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: clamp(2.5rem, 6vw, 5rem); }
.sv-title { margin: 1rem 0 1.2rem; font-size: clamp(2.5rem, 5.6vw, 4.6rem); line-height: 1; letter-spacing: -.045em; color: #fff; }
.sv-lead { margin: 0 0 2.1rem; max-width: 560px; font-size: clamp(1.05rem, 1.5vw, 1.22rem); line-height: 1.6; color: rgba(226, 232, 255, .78); }
.sv-ticks { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: 1.8rem 0 0; padding: 0; list-style: none; font-size: .9rem; font-weight: 600; color: rgba(226, 232, 255, .75); }
.sv-ticks i { margin-right: .4rem; color: #4ADE80; }
.sv-photo { position: relative; margin: 0; }
.sv-photo-frame { position: relative; overflow: hidden; border-radius: 28px; aspect-ratio: 5 / 4; background: var(--sv-night-2); box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .1); }
.sv-photo-frame img, .sv-photo-frame video { width: 100%; height: 100%; object-fit: cover; animation: svSettle 1.6s var(--sv-ease) both; }
@keyframes svSettle { from { transform: scale(1.08); } }
.sv-photo-frame::after { content: ''; position: absolute; inset: 0; background: linear-gradient(200deg, transparent 55%, rgba(7, 5, 26, .55)); }
.sv-photo::before { content: ''; position: absolute; inset: 10% -6% -8% 8%; z-index: -1; background: radial-gradient(closest-side, rgba(236, 72, 153, .3), transparent); }
.sv-tag { position: absolute; left: -1.2rem; bottom: 1.8rem; z-index: 2; display: flex; align-items: center; gap: .75rem; padding: .8rem 1.1rem .8rem .8rem; border-radius: 18px; background: rgba(17, 12, 46, .92); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .7); }
.sv-tag strong { display: block; font-size: .95rem; color: #fff; }
.sv-tag small { display: block; font-size: .76rem; color: rgba(226, 232, 255, .6); }
.sv-tag .sv-icon { width: 40px; height: 40px; border-radius: 12px; font-size: .95rem; }
.sv-dock { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); margin-top: clamp(3rem, 6vw, 4.5rem); border-radius: 22px; background: rgba(255, 255, 255, .04); border: 1px solid var(--sv-line-dark); overflow: hidden; }
.sv-dock > div { padding: 1.4rem 1.6rem; }
.sv-dock > div + div { border-left: 1px solid var(--sv-line-dark); }
.sv-dock strong { display: block; font-family: var(--font-heading); font-size: clamp(1.35rem, 2.4vw, 1.9rem); line-height: 1.1; letter-spacing: -.02em; color: #fff; }
.sv-dock span { display: block; margin-top: .35rem; font-size: .86rem; color: rgba(226, 232, 255, .62); }

/* area header: fanned photos of its services */
.sv-fan { position: relative; aspect-ratio: 1 / .92; }
.sv-fan .sv-fan-item { position: absolute; margin: 0; overflow: hidden; border-radius: 22px; box-shadow: 0 40px 80px -36px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .12); background: var(--sv-night-2); }
.sv-fan .sv-fan-item img { width: 100%; height: 100%; object-fit: cover; }
.sv-fan .sv-fan-cap { position: absolute; left: .7rem; bottom: .7rem; padding: .35rem .7rem; border-radius: 999px; font-size: .74rem; font-weight: 700; color: #fff; background: rgba(7, 5, 26, .6); }
.sv-fan .sv-fan-item:nth-child(1) { left: 0; top: 10%; width: 62%; height: 62%; z-index: 2; }
.sv-fan .sv-fan-item:nth-child(2) { right: 0; top: 0; width: 46%; height: 44%; }
.sv-fan .sv-fan-item:nth-child(2) .sv-fan-cap { left: auto; right: .7rem; max-width: calc(100% - 1.4rem); white-space: nowrap; overflow: hidden; }
.sv-fan .sv-fan-item:nth-child(3) { right: 4%; bottom: 0; width: 54%; height: 48%; z-index: 3; }

/* overview header */
.sv-ohero { text-align: center; padding-bottom: 0; }
.sv-ohero .sv-title { max-width: 980px; margin-left: auto; margin-right: auto; font-size: clamp(2.6rem, 6.4vw, 5.4rem); }
.sv-ohero .sv-lead { margin-left: auto; margin-right: auto; }
.sv-ohero .sv-actions { justify-content: center; }
.sv-counts { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem 3rem; margin: 2.6rem 0 0; padding: 0; list-style: none; }
.sv-counts strong { display: block; font-family: var(--font-heading); font-size: clamp(2rem, 3.6vw, 2.8rem); line-height: 1; letter-spacing: -.03em; color: #fff; }
.sv-counts span { font-size: .84rem; color: rgba(226, 232, 255, .6); }
.sv-reel { position: relative; z-index: 2; margin-top: clamp(3rem, 6vw, 4.5rem); padding-bottom: clamp(3.5rem, 7vw, 5rem); overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.sv-reel-track { display: flex; gap: 1.1rem; width: max-content; animation: svMarquee var(--sv-dur, 60s) linear infinite; }
.sv-reel:hover .sv-reel-track { animation-play-state: paused; }
.sv-reel-card { position: relative; flex-shrink: 0; width: clamp(240px, 24vw, 320px); aspect-ratio: 4 / 5; overflow: hidden; border-radius: 22px; color: #fff; text-decoration: none; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
.sv-reel-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--sv-ease); }
.sv-reel-card:hover img { transform: scale(1.08); }
.sv-reel-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(7, 5, 26, .9)); }
.sv-reel-card > span { position: absolute; z-index: 1; left: 1.2rem; right: 1.2rem; bottom: 1.1rem; text-align: left; }
.sv-reel-card strong { display: block; font-size: 1.2rem; }
.sv-reel-card small { font-size: .8rem; color: rgba(226, 232, 255, .7); }
.sv-reel-card i { position: absolute; z-index: 1; right: 1rem; top: 1rem; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); }
.sv-reel-card:hover { color: #fff; }
@keyframes svMarquee { to { transform: translateX(-50%); } }

/* ---------- floating section menu (desktop only) ---------- */
.sv-dock-nav { position: fixed; left: 50%; bottom: 1.4rem; z-index: 60; display: flex; align-items: center; gap: .2rem; padding: .35rem; border-radius: 999px; background: rgba(11, 16, 35, .96); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 20px 50px -18px rgba(11, 16, 35, .7); transform: translate(-50%, 140%); opacity: 0; transition: transform .6s var(--sv-ease), opacity .4s; }
.sv-dock-nav.is-on { transform: translate(-50%, 0); opacity: 1; }
.sv-dock-nav a { position: relative; z-index: 1; padding: .55rem 1rem; border-radius: 999px; font-size: .84rem; font-weight: 700; color: rgba(226, 232, 255, .7); text-decoration: none; white-space: nowrap; transition: color .3s; }
.sv-dock-nav a:hover, .sv-dock-nav a.is-active { color: #fff; }
.sv-dock-nav .sv-pill { position: absolute; z-index: 0; top: .35rem; bottom: .35rem; left: 0; width: 0; border-radius: 999px; background: linear-gradient(110deg, #7C3AED, #DB2777); transition: transform .5s var(--sv-ease), width .5s var(--sv-ease); }
.sv-dock-nav .sv-ring { position: relative; z-index: 1; width: 30px; height: 30px; margin-left: .2rem; }
.sv-dock-nav .sv-ring circle { fill: none; stroke-width: 3; }
.sv-dock-nav .sv-ring .bg { stroke: rgba(255, 255, 255, .12); }
.sv-dock-nav .sv-ring .fg { stroke: url(#svRingGrad); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; }
#overview, #included, #why, #plans, #process, #faq, #services, #areas { scroll-margin-top: calc(var(--sv-nav) + 24px); }

/* ---------- service page: overview ---------- */
.sv-over { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.sv-statement { margin: 1.1rem 0 1.5rem; font-family: var(--font-heading); font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.3; letter-spacing: -.02em; color: var(--sv-ink); }
.sv-statement p { margin: 0; font: inherit; color: inherit; letter-spacing: inherit; }
.sv-statement p + p { margin-top: 1.1rem; font-family: var(--font-sans); font-size: 1.04rem; line-height: 1.8; letter-spacing: 0; color: var(--sv-text); }
.sv-prose { font-size: 1.04rem; line-height: 1.8; color: var(--sv-text); }
.sv-prose p { margin: 0 0 1rem; font-size: inherit; line-height: inherit; color: inherit; }
.sv-prose ul { margin: 1.2rem 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.sv-prose li { position: relative; padding-left: 1.7rem; color: var(--sv-ink); font-weight: 600; }
.sv-prose li::before { content: ''; position: absolute; left: 0; top: .55em; width: 10px; height: 10px; border-radius: 3px; background: var(--sv-grad); transform: rotate(45deg); }
.sv-over .sv-chips { margin-top: 1.4rem; }
.sv-over-media { position: sticky; top: calc(var(--sv-nav) + 24px); }
.sv-over-photo { margin: 0; overflow: hidden; border-radius: 28px; aspect-ratio: 4 / 3.3; background: #EEE; box-shadow: 0 40px 80px -50px rgba(43, 28, 120, .7); }
.sv-over-photo img, .sv-lede-photo img { width: 100%; height: 100%; object-fit: cover; }
.sv-fit { position: relative; z-index: 2; margin: -5.5rem 1.4rem 0; padding: 1.5rem; border-radius: 22px; background: #fff; border: 1px solid rgba(255, 255, 255, .7); box-shadow: 0 30px 60px -30px rgba(43, 28, 120, .45); }
.sv-fit small { display: block; font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #6D28D9; }
.sv-fit p { margin: .45rem 0 0; font-size: 1rem; line-height: 1.55; color: var(--sv-ink); }
.sv-fit dl { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: 1.1rem 0 0; }
.sv-fit dl div { padding: .7rem .8rem; border-radius: 14px; background: #F5F3FF; }
.sv-fit dt { font-size: .72rem; font-weight: 700; color: #6B7280; }
.sv-fit dd { margin: .15rem 0 0; font-family: var(--font-heading); font-size: 1.1rem; font-weight: 800; color: var(--sv-ink); }

/* ---------- service page: what's included (dark band) ---------- */
.sv-inc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 26px; overflow: hidden; background: rgba(13, 9, 36, .92); border: 1px solid var(--sv-line-dark); }
.sv-inc { position: relative; padding: 2rem 1.8rem 2.1rem; isolation: isolate; box-shadow: 1px 1px 0 var(--sv-line-dark); transition: background .4s; }
.sv-inc::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(139, 92, 246, .22), transparent 60%); opacity: 0; transition: opacity .4s; }
.sv-inc:hover::before { opacity: 1; }
.sv-inc-n { position: absolute; right: 1.5rem; top: 1.5rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; color: rgba(196, 181, 253, .5); }
.sv-inc h3 { margin: 1.4rem 0 .5rem; font-size: 1.12rem; color: #fff; }
.sv-inc p { margin: 0; font-size: .94rem; line-height: 1.6; color: rgba(226, 232, 255, .62); }
.sv-inc-grid.is-checklist .sv-inc { display: flex; align-items: center; gap: 1rem; padding: 1.4rem 1.6rem; }
.sv-inc-grid.is-checklist .sv-inc h3 { margin: 0; }
.sv-inc-grid.is-checklist .sv-inc-n { display: none; }

/* ---------- service page: why (sticky photo + list) ---------- */
.sv-why { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.sv-why-media { position: sticky; top: calc(var(--sv-nav) + 24px); }
.sv-why-photo { position: relative; margin: 2rem 0 0; overflow: hidden; border-radius: 26px; aspect-ratio: 5 / 4; box-shadow: 0 40px 80px -50px rgba(43, 28, 120, .7); }
.sv-why-photo img { width: 100%; height: 100%; object-fit: cover; }
.sv-why-count { position: absolute; left: 1.2rem; bottom: 1.2rem; padding: .5rem .9rem; border-radius: 999px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; font-weight: 600; color: #fff; background: rgba(7, 5, 26, .6); }
.sv-why-list { margin: 0; padding: 0; list-style: none; }
.sv-why-list li { display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; padding: 2rem 0; border-top: 1px solid var(--sv-line); transition: opacity .5s; }
.sv-why-list li:last-child { border-bottom: 1px solid var(--sv-line); }
.sv-js .sv-why-list.is-live li { opacity: .38; }
.sv-js .sv-why-list.is-live li.is-active { opacity: 1; }
.sv-why-n { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 800; color: #A78BFA; padding-top: .3rem; }
.sv-why-list li.is-active .sv-why-n { background: var(--sv-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sv-why-list h3 { margin: 0 0 .5rem; font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.25; letter-spacing: -.015em; color: var(--sv-ink); }
.sv-why-list p { margin: 0; font-size: 1.02rem; line-height: 1.65; color: var(--sv-text); }

/* ---------- steps (service + area pages) ---------- */
.sv-steps { position: relative; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 1.6rem; margin: 0; padding: 0; list-style: none; }
.sv-steps::before { content: ''; position: absolute; left: 0; right: 0; top: 23px; height: 2px; background: rgba(124, 58, 237, .14); }
.sv-steps::after { content: ''; position: absolute; left: 0; top: 23px; height: 2px; width: 0; background: var(--sv-grad); transition: width 2s var(--sv-ease); }
.sv-steps.is-in::after { width: 100%; }
.sv-step { position: relative; z-index: 1; padding-top: 4rem; }
.sv-step-n { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; font-family: var(--font-heading); font-size: .95rem; font-weight: 800; color: #6D28D9; background: #fff; border: 2px solid rgba(124, 58, 237, .25); transition: background .6s, color .6s, border-color .6s, transform .6s var(--sv-ease); transition-delay: calc(var(--i) * 260ms + 200ms); }
.sv-steps.is-in .sv-step-n { color: #fff; background: linear-gradient(135deg, #7C3AED, #DB2777); border-color: transparent; transform: scale(1.06); }
.sv-step h3 { margin: 0 0 .4rem; font-size: 1.08rem; color: var(--sv-ink); }
.sv-step p { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--sv-text); }
.sv-dark .sv-steps::before { background: rgba(255, 255, 255, .12); }
.sv-dark .sv-step-n { color: #C4B5FD; background: var(--sv-night); border-color: rgba(196, 181, 253, .35); }
.sv-dark .sv-step h3 { color: #fff; }
.sv-dark .sv-step p { color: rgba(226, 232, 255, .65); }

/* ---------- FAQ ---------- */
.sv-faq { max-width: 860px; margin: 0 auto; }
.sv-faq .accordion-item { margin: 0; border: 0; border-bottom: 1px solid var(--sv-line); border-radius: 0; background: none; box-shadow: none; }
.sv-faq .accordion-item:first-child { border-top: 1px solid var(--sv-line); }
.sv-faq .accordion-item.open { box-shadow: none; }
.sv-faq .accordion-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem .2rem; }
.sv-faq .accordion-header h3, .sv-faq .accordion-header h4 { margin: 0; font-size: clamp(1.02rem, 1.6vw, 1.18rem); color: var(--sv-ink); }
.sv-faq .accordion-item.open .accordion-header h3, .sv-faq .accordion-item.open .accordion-header h4 { color: #6D28D9; }
.sv-faq .accordion-icon { position: static; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin: 0; border-radius: 50%; background: #F3EEFF; color: #6D28D9; transition: transform .45s var(--sv-ease), background .3s, color .3s; }
.sv-faq .accordion-item.open .accordion-icon { transform: rotate(45deg); background: #6D28D9; color: #fff; }
.sv-faq .accordion-body-inner { padding: 0 3rem 1.5rem .2rem; font-size: 1rem; line-height: 1.7; color: var(--sv-text); }
.sv-faq-foot { margin-top: 2.4rem; text-align: center; color: var(--sv-text); }
.sv-faq-foot a { margin-left: .4rem; }

/* ---------- service cards (related, area lists on phones) ---------- */
.sv-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
.sv-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--sv-r); text-decoration: none; color: inherit; background: #fff; border: 1px solid var(--sv-line); transition: transform .5s var(--sv-ease), box-shadow .5s var(--sv-ease); }
.sv-card:hover { color: inherit; transform: translateY(-6px); box-shadow: 0 40px 70px -40px rgba(43, 28, 120, .55); }
.sv-card-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #EEE; }
.sv-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--sv-ease); }
.sv-card:hover .sv-card-media img { transform: scale(1.07); }
.sv-card-body { display: flex; flex: 1; flex-direction: column; padding: 1.4rem 1.4rem 1.5rem; }
.sv-card-body small { font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #DB2777; }
.sv-card-body h3 { margin: .4rem 0 .45rem; font-size: 1.2rem; color: var(--sv-ink); }
.sv-card-body p { flex: 1; margin: 0 0 1.1rem; font-size: .94rem; line-height: 1.6; color: var(--sv-text); }
.sv-card-meta { margin: -.4rem 0 1rem; font-size: .84rem; font-weight: 700; color: #15803D; }

/* ---------- area page: interactive service list ---------- */
.sv-lede { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.sv-lede-photo { margin: 0; overflow: hidden; border-radius: 28px; aspect-ratio: 5 / 4; box-shadow: 0 40px 80px -50px rgba(43, 28, 120, .7); }
.sv-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--sv-line); }
.sv-row { display: grid; grid-template-columns: 4.5rem minmax(0, 1.1fr) minmax(0, 1.4fr) auto; align-items: center; gap: 1.5rem; padding: 1.7rem .5rem; border-bottom: 1px solid var(--sv-line); color: inherit; text-decoration: none; position: relative; transition: padding .5s var(--sv-ease), background .4s; }
.sv-row::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #F5F3FF, transparent); opacity: 0; transition: opacity .4s; }
.sv-row:hover { color: inherit; padding-left: 1.4rem; }
.sv-row:hover::before { opacity: 1; }
.sv-row-n { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; color: #A78BFA; }
.sv-row h3 { margin: 0; font-size: clamp(1.25rem, 2.2vw, 1.7rem); letter-spacing: -.02em; color: var(--sv-ink); }
.sv-row p { margin: 0; font-size: .97rem; line-height: 1.55; color: var(--sv-text); }
.sv-row-go { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; color: var(--sv-ink); border: 1px solid var(--sv-line); transition: background .4s, color .4s, transform .5s var(--sv-ease); }
.sv-row:hover .sv-row-go { color: #fff; background: var(--sv-ink); transform: rotate(-45deg); }
.sv-row-thumb { display: none; }
.sv-preview { position: fixed; z-index: 30; left: 0; top: 0; width: 300px; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.85) rotate(-4deg); transition: opacity .35s, transform .5s var(--sv-ease); box-shadow: 0 40px 80px -30px rgba(11, 16, 35, .6); }
.sv-preview.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-2deg); }
.sv-preview img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- area page: why (dark band) ---------- */
.sv-reasons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.sv-reason { display: flex; gap: 1.1rem; align-items: flex-start; padding: 1.6rem; border-radius: 22px; background: rgba(255, 255, 255, .04); border: 1px solid var(--sv-line-dark); transition: background .4s, border-color .4s, transform .5s var(--sv-ease); }
.sv-reason:hover { background: rgba(255, 255, 255, .07); border-color: rgba(196, 181, 253, .3); transform: translateY(-3px); }
.sv-reason > i { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; font-size: .8rem; color: #0B1023; background: linear-gradient(135deg, #A78BFA, #F9A8D4); }
.sv-reason h3 { margin: .25rem 0 0; font-size: 1.08rem; line-height: 1.4; color: #fff; }
.sv-reason p { margin: .45rem 0 0; font-size: .94rem; line-height: 1.6; color: rgba(226, 232, 255, .65); }

.sv-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.sv-note { display: flex; gap: 1rem; padding: 1.5rem; border-radius: 22px; background: linear-gradient(135deg, #FFF7ED, #FDF2F8); border: 1px solid rgba(219, 39, 119, .12); }
.sv-note h3 { margin: 0 0 .3rem; font-size: 1.05rem; color: var(--sv-ink); }
.sv-note p { margin: 0; line-height: 1.6; color: var(--sv-text); }
.sv-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.2rem; }
.sv-tier { display: flex; flex-direction: column; padding: 2rem 1.8rem; border-radius: var(--sv-r); background: #fff; border: 1px solid var(--sv-line); transition: transform .5s var(--sv-ease), box-shadow .5s; }
.sv-tier:hover { transform: translateY(-5px); box-shadow: 0 40px 70px -44px rgba(43, 28, 120, .55); }
.sv-tier.is-pick { color: #fff; background: radial-gradient(120% 80% at 100% 0%, rgba(219, 39, 119, .35), transparent 60%), linear-gradient(160deg, #110C2E, #2E1065); border-color: transparent; }
.sv-tier small { font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #DB2777; }
.sv-tier.is-pick small { color: #F9A8D4; }
.sv-tier h3 { margin: .7rem 0 .3rem; font-size: 1.5rem; color: var(--sv-ink); }
.sv-tier.is-pick h3 { color: #fff; }
.sv-tier-sub { font-size: .92rem; font-weight: 700; color: #6D28D9; }
.sv-tier.is-pick .sv-tier-sub { color: #DDD6FE; }
.sv-tier p { flex: 1; margin: 1rem 0 1.5rem; line-height: 1.65; color: var(--sv-text); }
.sv-tier.is-pick p { color: rgba(226, 232, 255, .75); }
.sv-tier.is-pick .sv-link { color: #fff; }

/* ---------- marquee of technologies ---------- */
.sv-tech { padding: clamp(2.5rem, 5vw, 3.5rem) 0; overflow: hidden; border-top: 1px solid var(--sv-line); border-bottom: 1px solid var(--sv-line); }
.sv-tech-title { margin: 0 0 1.3rem; text-align: center; font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #64748B; }
.sv-marquee { display: flex; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.sv-marquee + .sv-marquee { margin-top: .7rem; }
.sv-marquee-track { display: flex; flex-shrink: 0; gap: 2.6rem; margin: 0; padding: 0 1.3rem; list-style: none; animation: svMarquee2 var(--sv-dur, 50s) linear infinite; }
.sv-marquee-rev .sv-marquee-track { animation-direction: reverse; }
@keyframes svMarquee2 { to { transform: translateX(-100%); } }
.sv-marquee-track li { flex-shrink: 0; font-family: var(--font-heading); font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 700; letter-spacing: -.01em; color: #64748B; white-space: nowrap; transition: color .3s; }
.sv-marquee-track li:hover { color: var(--sv-ink); }

/* ---------- overview: big statement + area bento ---------- */
.sv-statement-big { max-width: 1040px; margin: 0 auto; text-align: center; font-family: var(--font-heading); font-size: clamp(1.5rem, 3.2vw, 2.6rem); line-height: 1.3; letter-spacing: -.02em; color: var(--sv-ink); }
.sv-js .sv-statement-big .sv-fill { color: #8A8AA3; transition: color .4s; }  /* unlit words still pass 3:1 contrast */
.sv-js .sv-statement-big .sv-fill.is-lit { color: var(--sv-ink); }
.sv-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 300px; gap: 1.1rem; }
.sv-area { position: relative; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; border-radius: 26px; color: #fff; text-decoration: none; isolation: isolate; background: var(--sv-night-2); }
.sv-area:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.sv-area:nth-child(6) { grid-column: span 2; }
.sv-area > img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--sv-ease); }
.sv-area::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(7, 5, 26, .1) 20%, rgba(7, 5, 26, .9)); transition: background .5s; }
.sv-area:hover { color: #fff; }
.sv-area:hover > img { transform: scale(1.08); }
.sv-area:hover::after { background: linear-gradient(180deg, rgba(46, 16, 101, .45), rgba(7, 5, 26, .95)); }
.sv-area-body { position: relative; z-index: 2; padding: 1.5rem; }
.sv-area-top { position: absolute; z-index: 2; left: 1.5rem; right: 1.5rem; top: 1.3rem; display: flex; justify-content: space-between; align-items: center; }
.sv-area-top em { font-style: normal; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; color: rgba(255, 255, 255, .75); }
.sv-area-top i { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); }
.sv-area h3 { margin: 0; font-size: clamp(1.3rem, 2.2vw, 1.8rem); line-height: 1.1; letter-spacing: -.02em; color: #fff; }
.sv-area:nth-child(1) h3, .sv-area:nth-child(6) h3 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
.sv-area p { margin: .5rem 0 0; font-size: .92rem; line-height: 1.5; color: rgba(226, 232, 255, .78); }
.sv-area ul { display: flex; flex-wrap: wrap; gap: .35rem; margin: .9rem 0 0; padding: 0; list-style: none; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s var(--sv-ease), opacity .4s; }
.sv-area:hover ul, .sv-area:focus-visible ul { max-height: 160px; opacity: 1; }
.sv-area li { padding: .25rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 600; background: rgba(255, 255, 255, .14); }
.sv-area-count { display: inline-block; margin-top: .8rem; font-size: .8rem; font-weight: 700; color: #F9A8D4; }

.sv-engage { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; }
.sv-engage-card { padding: 2rem 1.8rem; border-radius: var(--sv-r); background: #fff; border: 1px solid var(--sv-line); transition: transform .5s var(--sv-ease), box-shadow .5s; }
.sv-engage-card:hover { transform: translateY(-5px); box-shadow: 0 40px 70px -44px rgba(43, 28, 120, .55); }
.sv-engage-card h3 { margin: 1.3rem 0 .45rem; font-size: 1.2rem; color: var(--sv-ink); }
.sv-engage-card p { margin: 0; line-height: 1.6; color: var(--sv-text); }

.sv-hhead { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem 2rem; margin-bottom: 3.4rem; }
.sv-hire-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .9rem; margin: 3.5rem 0 1.6rem; }
.sv-hire-link { display: flex; align-items: center; gap: .9rem; padding: 1.1rem 1.2rem; border-radius: 18px; color: #fff; text-decoration: none; background: rgba(255, 255, 255, .05); border: 1px solid var(--sv-line-dark); transition: background .3s, transform .4s var(--sv-ease); }
.sv-hire-link:hover { color: #fff; background: rgba(255, 255, 255, .1); transform: translateY(-3px); }
.sv-hire-link > span:nth-child(2) { flex: 1; }
.sv-hire-link strong { display: block; }
.sv-hire-link small { display: block; font-size: .82rem; color: rgba(226, 232, 255, .6); }
.sv-hire-link .sv-icon { width: 40px; height: 40px; border-radius: 12px; font-size: .9rem; }

/* ---------- closing call to action ---------- */
.sv-cta { padding: clamp(5rem, 10vw, 8rem) 0; text-align: center; }
.sv-cta .sv-h2 { max-width: 820px; margin-left: auto; margin-right: auto; font-size: clamp(2.2rem, 5vw, 4rem); }
.sv-cta .sv-sub { margin-left: auto; margin-right: auto; }
.sv-cta .sv-actions { justify-content: center; margin-top: 2.2rem; }

/* ---------- gallery spacing ---------- */
.sv-gallery-sec { padding-top: 0; }

/* ==========================================================================
   Tablets and phones: simpler layouts, lighter motion
   ========================================================================== */
@media (max-width: 1080px) {
    .sv-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2.5rem; }
    .sv-steps::before, .sv-steps::after { display: none; }
    .sv-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sv-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 260px; }
    .sv-area:nth-child(1), .sv-area:nth-child(6) { grid-column: span 2; grid-row: span 1; }
    .sv-inc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .sv-hero-grid, .sv-over, .sv-why, .sv-lede { grid-template-columns: 1fr; }
    .sv-over-media, .sv-why-media { position: static; }
    .sv-photo-frame { transform: none; aspect-ratio: 16 / 10; }
    .sv-tag { left: .8rem; bottom: .8rem; }
    .sv-fan { aspect-ratio: auto; height: 300px; }
    .sv-fan .sv-fan-item:nth-child(2) { display: none; }
    .sv-fan .sv-fan-item:nth-child(1) { width: 70%; height: 80%; top: 0; }
    .sv-fan .sv-fan-item:nth-child(3) { width: 55%; height: 60%; }
    .sv-row { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 1rem; padding: 1.2rem 0; }
    .sv-row:hover { padding-left: 0; }
    .sv-row-n { display: none; }
    .sv-row-thumb { display: block; width: 64px; height: 64px; border-radius: 14px; overflow: hidden; }
    .sv-row-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .sv-row-text { grid-column: 2; }
    .sv-row > p { display: none; }
    .sv-row-text small { display: block; margin-top: .25rem; font-size: .86rem; line-height: 1.45; color: var(--sv-text); }
    .sv-preview { display: none; }
    .sv-why-list li { padding: 1.4rem 0; }
    .sv-js .sv-why-list.is-live li { opacity: 1; }
    .sv-dock-nav { display: none; }
}
@media (min-width: 901px) { .sv-row-text small { display: none; } }
@media (max-width: 640px) {
    .sv-sec { padding: 3.6rem 0; }
    .sv-hero { padding-top: calc(var(--sv-nav) + 2rem); }
    .sv-title { font-size: clamp(2.1rem, 9.5vw, 2.7rem); line-height: 1.05; }
    .sv-ohero .sv-title { font-size: clamp(2.2rem, 10vw, 2.9rem); }
    .sv-lead { font-size: 1.02rem; margin-bottom: 1.6rem; }
    .sv-actions { flex-direction: column; align-items: stretch; }
    .sv-actions .btn { justify-content: center; }
    .sv-ohero .sv-actions { align-items: stretch; }
    .sv-ticks { gap: .4rem 1rem; font-size: .84rem; }
    .sv-tag { display: none; }
    .sv-photo::before { display: none; }
    .sv-dock { grid-template-columns: 1fr; margin-top: 2rem; }
    .sv-dock > div { padding: 1rem 1.2rem; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
    .sv-dock > div + div { border-left: 0; border-top: 1px solid var(--sv-line-dark); }
    .sv-dock strong { font-size: 1.15rem; }
    .sv-dock span { margin: 0; text-align: right; }
    .sv-counts { gap: 1rem 2rem; }
    .sv-reel-card { width: 210px; }
    .sv-h2 { font-size: clamp(1.75rem, 7.5vw, 2.2rem); }
    .sv-statement { font-size: 1.3rem; }
    .sv-fit { margin: -3rem .8rem 0; padding: 1.2rem; }
    .sv-over-photo { aspect-ratio: 4 / 3; }
    .sv-inc-grid { grid-template-columns: 1fr; }
    .sv-inc { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; padding: 1.3rem 1.2rem; }
    .sv-inc .sv-icon { grid-row: span 2; width: 42px; height: 42px; }
    .sv-inc h3 { margin: 0 0 .3rem; font-size: 1.02rem; }
    .sv-inc-n { display: none; }
    .sv-why-photo { display: none; }
    .sv-why-list li { grid-template-columns: 1fr; gap: .3rem; }
    .sv-steps { grid-template-columns: 1fr; gap: 0; margin-left: 1.2rem; padding-left: 1.6rem; border-left: 2px solid rgba(124, 58, 237, .18); }
    .sv-dark .sv-steps { border-left-color: rgba(255, 255, 255, .12); }
    .sv-step { padding: 0 0 1.8rem 1.4rem; }
    .sv-step-n { left: -2.95rem; width: 38px; height: 38px; font-size: .8rem; }
    .sv-cards { grid-template-columns: 1fr; }
    .sv-bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .sv-area, .sv-area:nth-child(1), .sv-area:nth-child(6) { min-height: 300px; }
    .sv-area-body { padding: 4.6rem 1.25rem 1.3rem; }
    .sv-area-top { left: 1.25rem; right: 1.25rem; top: 1.1rem; }
    .sv-area::after { background: linear-gradient(180deg, rgba(7, 5, 26, .15) 0%, rgba(7, 5, 26, .45) 40%, rgba(7, 5, 26, .9) 100%); }
    .sv-area-body { max-height: none; overflow: visible; }
    .sv-area p { color: rgba(236, 240, 255, .9); }
    .sv-area h3, .sv-area:nth-child(1) h3, .sv-area:nth-child(6) h3 { font-size: 1.55rem; }
    .sv-area:nth-child(1), .sv-area:nth-child(6) { grid-column: auto; }
    .sv-area ul { max-height: none; opacity: 1; }
    .sv-reasons { grid-template-columns: 1fr; }
    .sv-reason { padding: 1.2rem; }
    .sv-faq .accordion-body-inner { padding-right: .2rem; }
    .sv-marquee-track { gap: 1.8rem; }
}
@media (prefers-reduced-motion: reduce) {
    .sv-rise, .sv-w, .sv-glow::before, .sv-glow::after, .sv-photo-frame img, .sv-photo-frame video, .sv-tag, .sv-fan .sv-fan-item, .sv-reel-track, .sv-marquee-track { animation: none !important; }
    .sv-w { opacity: 1; transform: none; }
    .sv-js [data-sv-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
    .sv-steps::after { width: 100%; transition: none; }
    .sv-js .sv-why-list.is-live li { opacity: 1; }
    .sv-js .sv-statement-big .sv-fill { color: var(--sv-ink); }
}

/* performance: moving strips only run while on screen */
.sv-reel:not(.is-playing) .sv-reel-track, .sv-marquee:not(.is-playing) .sv-marquee-track { animation-play-state: paused; }
.sv-js .sv-statement-big .sv-fill { transition: none; }

/* ---------- area page: scroll-driven services showcase ---------- */
.sv-show { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.sv-show-media { position: sticky; top: calc(var(--sv-nav) + 32px); height: min(620px, calc(100vh - var(--sv-nav) - 64px)); border-radius: 30px; overflow: hidden; background: var(--sv-night-2); box-shadow: 0 50px 90px -50px rgba(43, 28, 120, .7); }
.sv-show-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .7s ease, transform 1.2s var(--sv-ease); }
.sv-show-media img.is-on { opacity: 1; transform: none; }
.sv-show-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(7, 5, 26, .55)); pointer-events: none; }
.sv-show-count { position: absolute; z-index: 1; left: 1.5rem; bottom: 1.3rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9rem; color: rgba(255, 255, 255, .7); }
.sv-show-count b { color: #fff; font-size: 1.15rem; }
.sv-show-list { margin: 0; padding: 0; list-style: none; }
.sv-show-item { border-top: 1px solid var(--sv-line); }
.sv-show-item:last-child { border-bottom: 1px solid var(--sv-line); }
.sv-show-item > a { display: block; padding: clamp(2rem, 5vh, 3.2rem) 0; color: inherit; text-decoration: none; opacity: .32; transition: opacity .5s ease; }
.sv-show-item.is-on > a, .sv-show-item > a:hover, .sv-show-item > a:focus-visible { opacity: 1; }
.sv-show-thumb { display: none; }
.sv-show-n { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; color: #A78BFA; }
.sv-show-item h3 { margin: .5rem 0 .6rem; font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.05; letter-spacing: -.035em; color: var(--sv-ink); }
.sv-show-item p { margin: 0; max-width: 520px; font-size: 1.05rem; line-height: 1.6; color: var(--sv-text); }
.sv-show-item ul { display: grid; gap: .45rem; margin: 1.2rem 0 0; padding: 0; list-style: none; max-height: 0; overflow: hidden; transition: max-height .6s var(--sv-ease); }
.sv-show-item.is-on ul { max-height: 200px; }
.sv-show-item ul li { font-size: .95rem; font-weight: 600; color: var(--sv-ink); }
.sv-show-item ul i { margin-right: .5rem; font-size: .75rem; color: #16A34A; }
.sv-show-go { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.4rem; font-weight: 800; color: #6D28D9; }
.sv-show-go i { transition: transform .35s var(--sv-ease); }
.sv-show-item > a:hover .sv-show-go i { transform: translateX(5px); }
.sv-show-go em { margin-left: .8rem; font-style: normal; font-weight: 700; color: #15803D; }

/* ---------- service page: overview ---------- */
.sv-ov-head { max-width: 980px; }
.sv-ov-head .sv-statement { font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.22; }
.sv-ov-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; margin-top: clamp(2rem, 4vw, 3rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--sv-line); }
.sv-ov-body .sv-chips { margin-top: 1.6rem; }
.sv-ov-card { position: sticky; top: calc(var(--sv-nav) + 32px); padding: 1.8rem; border-radius: 26px; color: #fff; background: radial-gradient(120% 70% at 100% 0%, rgba(219, 39, 119, .32), transparent 60%), linear-gradient(160deg, #110C2E, #2E1065); box-shadow: 0 40px 80px -45px rgba(46, 16, 101, .9); }
.sv-ov-row { padding-bottom: 1.1rem; margin-bottom: 1.1rem; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.sv-ov-row small { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #C4B5FD; }
.sv-ov-row p { margin: .5rem 0 0; font-size: 1rem; line-height: 1.55; color: rgba(236, 233, 255, .9); }
.sv-ov-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.sv-ov-kv strong { font-family: var(--font-heading); font-size: 1.25rem; color: #fff; }
.sv-ov-tick { margin: .55rem 0; font-size: .92rem; color: rgba(236, 233, 255, .85); }
.sv-ov-tick i { margin-right: .5rem; color: #4ADE80; }
.sv-ov-btn { width: 100%; justify-content: center; margin-top: 1.3rem; }
.sv-ov-note { display: block; margin-top: .8rem; text-align: center; font-size: .8rem; color: rgba(226, 232, 255, .55); }

@media (max-width: 900px) {
    .sv-show { grid-template-columns: 1fr; gap: 0; }
    .sv-show-media { display: none; }
    .sv-show-item > a { opacity: 1; padding: 1.6rem 0; }
    .sv-show-thumb { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 20px; margin-bottom: 1.1rem; }
    .sv-show-item ul { max-height: none; }
    .sv-show-item h3 { font-size: 1.6rem; }
    .sv-ov-grid { grid-template-columns: 1fr; }
    .sv-ov-card { position: static; }
}
@media (prefers-reduced-motion: reduce) {
    .sv-show-media img, .sv-show-item > a, .sv-show-item ul { transition: none !important; }
}

/* ---------- area page: introduction ---------- */
.sv-lede { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.sv-lede-big { margin: 1.2rem 0 0; font-family: var(--font-heading); font-size: clamp(1.7rem, 3.2vw, 2.7rem); line-height: 1.18; letter-spacing: -.03em; color: var(--sv-ink); }
.sv-js .sv-lede-big .sv-fill { color: #D4D4E2; }
.sv-js .sv-lede-big .sv-fill.is-lit { color: var(--sv-ink); }
.sv-lede-more { margin: 1.4rem 0 0; max-width: 560px; font-size: 1.05rem; line-height: 1.75; color: var(--sv-text); }
.sv-lede-stats { display: flex; flex-wrap: wrap; gap: 0; margin: 2.2rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--sv-line); }
.sv-lede-stats li { flex: 1 1 0; min-width: 120px; padding: 1.3rem 1.2rem 0 0; }
.sv-lede-stats li + li { padding-left: 1.2rem; border-left: 1px solid var(--sv-line); }
.sv-lede-stats strong { display: block; font-family: var(--font-heading); font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1; letter-spacing: -.04em; background: var(--sv-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sv-lede-stats span { display: block; margin-top: .4rem; font-size: .85rem; font-weight: 600; color: var(--sv-text); }
.sv-lede-art { position: relative; margin: 0; aspect-ratio: 4 / 4.4; border-radius: 30px; overflow: visible; }
.sv-lede-art img { width: 100%; height: 100%; object-fit: cover; border-radius: 30px; box-shadow: 0 50px 90px -50px rgba(43, 28, 120, .75); }
.sv-js [data-sv-reveal="clip"] { opacity: 1; transform: none; clip-path: inset(12% 12% 12% 12% round 30px); transition: clip-path 1.3s var(--sv-ease); }
.sv-js [data-sv-reveal="clip"].is-in { clip-path: inset(-20% -20% -20% -20% round 30px); }
.sv-ring-badge { position: absolute; right: -1.6rem; top: -1.6rem; width: 128px; height: 128px; filter: drop-shadow(0 18px 30px rgba(11, 16, 35, .35)); }
.sv-ring-badge text { font-family: var(--font-heading); font-size: 10.5px; font-weight: 800; letter-spacing: 1px; fill: #fff; }
.sv-ring-badge text { transform-box: view-box; transform-origin: 60px 60px; animation: svSpin 16s linear infinite; }
@keyframes svSpin { to { transform: rotate(360deg); } }
.sv-lede-card { position: absolute; left: -1.6rem; bottom: 2rem; display: flex; align-items: center; gap: .9rem; padding: .9rem 1.2rem .9rem .9rem; border-radius: 20px; background: #fff; box-shadow: 0 30px 60px -28px rgba(43, 28, 120, .55); }
.sv-lede-icons { display: flex; }
.sv-lede-icons i { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-left: -10px; border-radius: 50%; font-size: .85rem; color: #fff; background: linear-gradient(135deg, #7C3AED, #DB2777); box-shadow: 0 0 0 3px #fff; }
.sv-lede-icons i:first-child { margin-left: 0; }
.sv-lede-icons i:nth-child(2) { background: linear-gradient(135deg, #2563EB, #22D3EE); }
.sv-lede-icons i:nth-child(3) { background: linear-gradient(135deg, #DB2777, #FB923C); }
.sv-lede-icons i:nth-child(4) { background: linear-gradient(135deg, #059669, #4ADE80); }
.sv-lede-card strong { display: block; font-size: .98rem; color: var(--sv-ink); }
.sv-lede-card small { display: block; font-size: .78rem; color: var(--sv-text); }
@media (max-width: 900px) {
    .sv-lede { grid-template-columns: 1fr; }
    .sv-lede-art { aspect-ratio: 16 / 11; margin-top: 1rem; }
    .sv-ring-badge { width: 96px; height: 96px; right: .6rem; top: -1.2rem; }
    .sv-lede-card { left: .8rem; bottom: .8rem; }
}
@media (max-width: 640px) {
    .sv-lede-stats li { min-width: 0; padding-right: .6rem; }
    .sv-lede-stats li + li { padding-left: .8rem; }
    .sv-lede-stats strong { font-size: 1.8rem; }
}
@media (prefers-reduced-motion: reduce) {
    .sv-ring-badge text { animation: none; }
    .sv-js [data-sv-reveal="clip"] { clip-path: none; transition: none; }
    .sv-js .sv-lede-big .sv-fill { color: var(--sv-ink); }
}

/* header photos are links */
.sv-fan .sv-fan-item { display: block; cursor: pointer; transition: transform .5s var(--sv-ease), box-shadow .5s; }
.sv-fan .sv-fan-item img, .sv-fan .sv-fan-item video { transition: transform 1s var(--sv-ease); }
.sv-fan .sv-fan-item:hover { z-index: 5; transform: translateY(-6px); box-shadow: 0 50px 90px -36px rgba(0, 0, 0, .9), 0 0 0 2px rgba(196, 181, 253, .6); }
.sv-fan .sv-fan-item:hover img { transform: scale(1.06); }
.sv-fan .sv-fan-cap { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; }
.sv-fan .sv-fan-cap i { font-size: .65rem; opacity: .8; }
.sv-fan .sv-fan-item:focus-visible { outline: 3px solid #A78BFA; outline-offset: 3px; }
.sv-photo-frame a { display: block; width: 100%; height: 100%; }

/* area intro: calmer, balanced layout */
.sv-lede { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.sv-lede-big { font-size: clamp(1.5rem, 2.5vw, 2.15rem); line-height: 1.25; letter-spacing: -.025em; }
.sv-lede-art { aspect-ratio: 5 / 4.2; }
.sv-ring-badge { right: 1.1rem; top: 1.1rem; width: 112px; height: 112px; }
.sv-lede-card { left: 1.1rem; bottom: 1.1rem; }
.sv-js [data-sv-reveal="clip"].is-in { clip-path: inset(0 0 0 0 round 30px); }
@media (max-width: 900px) { .sv-ring-badge { width: 88px; height: 88px; right: .8rem; top: .8rem; } }

/* area intro v3: editorial two columns, no photo (the header has the photos) */
.sv-ed { display: grid; grid-template-columns: minmax(0, 3.2fr) minmax(0, 8.8fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.sv-ed-side { position: sticky; top: calc(var(--sv-nav) + 40px); display: flex; flex-direction: column; gap: 2rem; }
.sv-ed-badge { display: inline-block; width: 128px; height: 128px; transition: transform .5s var(--sv-ease); }
.sv-ed-badge:hover { transform: scale(1.06) rotate(-6deg); }
.sv-ed-badge .sv-ring-badge { position: static; width: 100%; height: 100%; }
.sv-ed-main .sv-lede-big { margin-top: 0; max-width: 880px; font-size: clamp(1.6rem, 2.8vw, 2.5rem); line-height: 1.22; }
.sv-ed-main .sv-lede-more { max-width: 720px; }
.sv-ed-icons { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.8rem; }
.sv-ed-icons a { display: inline-flex; align-items: center; gap: .55rem; padding: .45rem .9rem .45rem .45rem; border-radius: 999px; font-size: .86rem; font-weight: 700; color: var(--sv-ink); text-decoration: none; background: #fff; border: 1px solid var(--sv-line); transition: border-color .3s, transform .3s var(--sv-ease); }
.sv-ed-icons a:hover { border-color: rgba(124, 58, 237, .35); transform: translateY(-2px); color: var(--sv-ink); }
.sv-ed-icons i { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; font-size: .72rem; color: #fff; background: linear-gradient(135deg, #7C3AED, #DB2777); }
.sv-ed-main .sv-lede-stats { max-width: 720px; }
@media (max-width: 900px) {
    .sv-ed { grid-template-columns: 1fr; gap: 1.2rem; }
    .sv-ed-side { position: static; flex-direction: row; align-items: center; justify-content: space-between; }
    .sv-ed-badge { width: 88px; height: 88px; }
}

/* area intro v4: bento */
.sv-bx { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: minmax(420px, auto) auto; gap: 1.1rem; }
.sv-bx-card { position: relative; overflow: hidden; border-radius: 28px; isolation: isolate; }
.sv-bx-text { grid-column: 1 / 3; display: flex; flex-direction: column; padding: clamp(2rem, 3.5vw, 3rem); color: #fff; background: var(--sv-night); }
.sv-bx-text > *:not(.sv-glow) { position: relative; z-index: 1; }
.sv-bx-text .sv-kick { color: #C4B5FD; }
.sv-bx-big { margin: 1.2rem 0 0; font-family: var(--font-heading); font-size: clamp(1.45rem, 2.2vw, 2rem); line-height: 1.28; letter-spacing: -.02em; color: #fff; }
.sv-js .sv-bx-big .sv-fill { color: rgba(255, 255, 255, .22); }
.sv-js .sv-bx-big .sv-fill.is-lit { color: #fff; }
.sv-bx-more { margin: 1.2rem 0 0; font-size: 1rem; line-height: 1.7; color: rgba(226, 232, 255, .7); }
.sv-bx-link { margin-top: auto; padding-top: 1.8rem; display: inline-flex; align-items: center; gap: .55rem; align-self: flex-start; font-weight: 800; color: #fff; text-decoration: none; }
.sv-bx-link i { transition: transform .35s var(--sv-ease); }
.sv-bx-link:hover { color: #F9A8D4; }
.sv-bx-link:hover i { transform: translateY(4px); }
.sv-bx-photo { grid-column: 3 / 5; display: block; background: var(--sv-night-2); box-shadow: 0 50px 90px -50px rgba(43, 28, 120, .7); }
.sv-bx-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--sv-ease); }
.sv-bx-photo:hover img { transform: scale(1.06); }
.sv-bx-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(7, 5, 26, .6)); }
.sv-bx-strip { position: absolute; z-index: 1; left: 1.1rem; right: 1.1rem; bottom: 1.1rem; display: flex; align-items: center; gap: .9rem; padding: .85rem 1rem; border-radius: 20px; background: rgba(255, 255, 255, .94); box-shadow: 0 20px 40px -20px rgba(7, 5, 26, .6); color: var(--sv-ink); }
.sv-bx-strip strong { display: block; font-size: .98rem; }
.sv-bx-strip small { display: block; font-size: .8rem; color: var(--sv-text); }
.sv-bx-stat { display: flex; flex-direction: column; justify-content: flex-end; min-height: 190px; padding: 1.5rem; background: #fff; border: 1px solid var(--sv-line); transition: transform .5s var(--sv-ease), box-shadow .5s; }
.sv-bx-stat:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -40px rgba(43, 28, 120, .5); }
.sv-bx-stat > i { position: absolute; right: 1.3rem; top: 1.3rem; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; color: #6D28D9; background: #F3EEFF; }
.sv-bx-stat strong { font-family: var(--font-heading); font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1; letter-spacing: -.04em; background: var(--sv-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sv-bx-stat span { margin-top: .6rem; font-size: .9rem; line-height: 1.4; color: var(--sv-text); }
.sv-bx-cta { display: flex; align-items: center; gap: 1rem; padding: 1.3rem; color: #fff; text-decoration: none; background: radial-gradient(120% 90% at 100% 0%, rgba(219, 39, 119, .4), transparent 60%), linear-gradient(150deg, #110C2E, #2E1065); transition: transform .5s var(--sv-ease); }
.sv-bx-cta:hover { color: #fff; transform: translateY(-4px); }
.sv-bx-cta .sv-ring-badge { position: static; flex-shrink: 0; width: 104px; height: 104px; filter: none; }
.sv-bx-cta strong { display: block; font-size: 1.05rem; line-height: 1.25; }
.sv-bx-cta small { display: block; margin-top: .3rem; font-size: .8rem; color: rgba(226, 232, 255, .65); }
.sv-js [data-sv-reveal="clip"].sv-bx-photo { clip-path: inset(10% 10% 10% 10% round 28px); }
.sv-js [data-sv-reveal="clip"].sv-bx-photo.is-in { clip-path: inset(0 0 0 0 round 28px); }
@media (max-width: 1080px) {
    .sv-bx { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
    .sv-bx-text, .sv-bx-photo { grid-column: 1 / -1; }
    .sv-bx-photo { min-height: 340px; }
}
@media (max-width: 640px) {
    .sv-bx { gap: .8rem; }
    .sv-bx-text { padding: 1.6rem; }
    .sv-bx-photo { min-height: 240px; }
    .sv-bx-stat { min-height: 150px; padding: 1.1rem; }
    .sv-bx-stat > i { width: 32px; height: 32px; right: 1rem; top: 1rem; font-size: .8rem; }
    .sv-bx-stat strong { font-size: 2.2rem; }
    .sv-bx-stat span { font-size: .8rem; }
    .sv-bx-cta { grid-column: 1 / -1; }
    .sv-bx-cta .sv-ring-badge { width: 84px; height: 84px; }
    .sv-bx-stat-3 { display: none; }
    .sv-bx-strip { left: .7rem; right: .7rem; bottom: .7rem; padding: .6rem .8rem; gap: .7rem; }
    .sv-bx-strip .sv-lede-icons i { width: 30px; height: 30px; margin-left: -8px; font-size: .7rem; }
    .sv-bx-strip .sv-lede-icons i:nth-child(n+4) { display: none; }
    .sv-bx-strip strong { font-size: .9rem; }
}

/* Service area cards: on hover the description makes way for the service chips, so nothing is pushed out of the card */
@media (min-width: 761px) { .sv-area-body { max-height: calc(100% - 4.4rem); overflow: hidden; } }
.sv-area p { max-height: 7rem; overflow: hidden; transition: max-height .5s var(--sv-ease), opacity .3s, margin .5s; }
@media (hover: hover) {
    .sv-area:hover p, .sv-area:focus-visible p { max-height: 0; opacity: 0; margin-top: 0; }
    .sv-area:nth-child(1):hover p, .sv-area:nth-child(6):hover p { max-height: 7rem; opacity: 1; margin-top: .5rem; }   /* big cards have room */
}
.sv-area li.is-more { background: rgba(249, 168, 212, .2); color: #FBCFE8; }

/* ---------- Secondary buttons ("All service areas →", "Explore Web Apps & SaaS →", "Book a free call →")
   A white pill with a soft violet edge and the arrow in a gradient circle, like the hero's main button; a frosted
   version on dark sections. The gradient .btn-primary stays the one main action. ---------- */
.sv-link, .sv-show-go {
    display: inline-flex; align-items: center; gap: .65rem; padding: .55rem .55rem .55rem 1.15rem; border-radius: 999px;
    font-size: .95rem; font-weight: 700; line-height: 1.2; color: #4C1D95; text-decoration: none;
    background: #fff; border: 1.5px solid rgba(123, 60, 245, .22); box-shadow: 0 10px 22px -16px rgba(76, 29, 149, .55);
    transition: transform .3s var(--sv-ease), border-color .3s, background .3s, box-shadow .3s, color .3s;
}
.sv-link > i, .sv-show-go > i {
    display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; font-size: .78rem; color: #fff;
    background: linear-gradient(135deg, #2D5BFF, #7B3CF5 60%, #FF3D9A); box-shadow: 0 6px 14px -6px rgba(123, 60, 245, .8);
    transition: transform .35s var(--sv-ease);
}
.sv-link:hover, a:hover > .sv-link, .sv-show-item > a:hover .sv-show-go {
    color: #3B0F7A; background: #F8F5FF; border-color: rgba(123, 60, 245, .5); transform: translateY(-2px);
    box-shadow: 0 16px 28px -16px rgba(76, 29, 149, .6);
}
.sv-link:hover > i, a:hover > .sv-link > i, .sv-show-item > a:hover .sv-show-go > i { transform: translateX(3px); }
.sv-link:focus-visible { outline: 3px solid rgba(123, 60, 245, .4); outline-offset: 3px; }
/* on dark sections and the highlighted plan: frosted glass */
.sv-dark .sv-link, .hm-mg-run .sv-link, .sv-tier.is-pick .sv-link {
    color: #fff; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .26); box-shadow: none;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.sv-dark .sv-link:hover, .hm-mg-run .sv-link:hover, .sv-tier.is-pick .sv-link:hover { color: #fff; background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .5); }
/* "Explore …" on a service row: the starting price sits just after the pill */
.sv-show-go { margin-top: 1.4rem; }
.sv-show-go em { order: 3; margin: 0 .35rem 0 -.1rem; font-size: .84rem; }
/* inside a sentence (FAQ footer) the pill sits on the line */
.sv-faq-foot .sv-link { margin-left: .35rem; vertical-align: middle; }
@media (max-width: 560px) { .sv-link, .sv-show-go { font-size: .9rem; padding: .5rem .5rem .5rem 1rem; } .sv-link > i, .sv-show-go > i { width: 28px; height: 28px; } }

/* Main gradient pill used under reviews and in the FAQ box: the one action of that section */
.hm-cta-btn { position: relative; display: inline-flex; align-items: center; gap: .7rem; padding: 1rem 1.6rem 1rem 1.9rem; border-radius: 999px; font: 700 1.02rem/1 var(--font-sans);
    color: #fff !important; text-decoration: none; background: linear-gradient(110deg, #2D5BFF, #7B3CF5 55%, #FF3D9A); background-size: 160% 100%;
    box-shadow: 0 16px 34px -14px rgba(123, 60, 245, .85); transition: transform .3s var(--sv-ease), box-shadow .3s, background-position .5s; }
.hm-cta-btn i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: .8rem; background: rgba(255, 255, 255, .22); transition: transform .3s var(--sv-ease); }
.hm-cta-btn:hover { transform: translateY(-2px); background-position: 100% 0; box-shadow: 0 22px 40px -14px rgba(123, 60, 245, 1); }
.hm-cta-btn:hover i { transform: translateX(3px); }
.hm-cta-btn:focus-visible { outline: 3px solid rgba(123, 60, 245, .45); outline-offset: 3px; }

/* Under the homepage reviews */
.hm-quotes-more { display: flex; flex-direction: column; align-items: center; gap: .9rem; margin-top: 2.8rem; text-align: center; }
.hm-quotes-proof { display: inline-flex; align-items: center; gap: .6rem; font-size: .92rem; font-weight: 600; color: #475467; }
.hm-quotes-proof .hm-stars { display: inline-flex; gap: 2px; color: #F5B301; font-size: .85rem; }

/* FAQ "Still have a question?" box */
.sv-faq-cta { display: flex; align-items: center; gap: 1.1rem 1.4rem; max-width: 900px; margin: 2.4rem auto 0; padding: 1.3rem 1.5rem; border-radius: 22px;
    background: linear-gradient(120deg, #F6F3FF, #EEF5FF); border: 1px solid rgba(123, 60, 245, .14); }
.sv-faq-cta-ic { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; color: #fff; font-size: 1.15rem;
    background: linear-gradient(135deg, #2D5BFF, #7B3CF5); box-shadow: 0 12px 22px -12px rgba(123, 60, 245, .8); }
.sv-faq-cta-text { flex: 1; min-width: 0; text-align: left; }
.sv-faq-cta-text strong { display: block; font: 800 1.12rem/1.3 var(--font-heading); color: var(--sv-ink, #0B1022); }
.sv-faq-cta-text span { font-size: .92rem; color: #5B6478; }
.sv-faq-cta-btns { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }
@media (max-width: 760px) {
    .sv-faq-cta { flex-direction: column; text-align: center; }
    .sv-faq-cta-text { text-align: center; }
    .sv-faq-cta-btns { justify-content: center; width: 100%; }
    .sv-faq-cta-btns a { width: 100%; justify-content: center; }
}