/* ==========================================================================
   Ainygo — enhancements on top of the original design system (style.css).
   New components only: mega-nav, mobile drawer, GDPR consent, floating chat,
   and image-rich media blocks. Uses the existing design tokens.
   ========================================================================== */

/* ---------------- NAV ---------------- */
.site-nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.82);
  backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--br-hairline);
  transition: box-shadow .3s var(--ease), background .3s var(--ease);
}
.site-nav.scrolled { box-shadow: 0 6px 30px -22px rgba(0,0,0,0.4); background: rgba(255,255,255,0.94); }
.nav-row { max-width: 1280px; margin: 0 auto; padding: 0 24px; height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav-brand img { height: 30px; width: auto; display: block; }
.nav-main { display: flex; align-items: center; gap: 2px; }
.nav-item {
  position: relative; display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 13px; border-radius: 9px; font-size: 14.5px; font-weight: 500;
  color: var(--fg-dark); background: transparent; border: 0; cursor: pointer;
  letter-spacing: 0.1px; transition: color .15s var(--ease), background .15s var(--ease);
  font-family: inherit;
}
.nav-item:hover, .nav-item.active { color: var(--brand-blue); background: var(--brand-blue-soft); }
.nav-caret { transition: transform .2s var(--ease); }
.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-text-link { font-size: 14.5px; font-weight: 500; color: var(--fg-dark); }
.nav-text-link:hover { color: var(--brand-blue); }
.nav-burger { display: none; background: transparent; border: 0; color: var(--fg-black); padding: 8px; }

/* mega menu */
.nav-has-mega { position: static; }
.mega { position: absolute; left: 0; right: 0; top: 68px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s var(--ease); z-index: 99; padding-top: 10px; }
.nav-has-mega:hover .mega, .mega:hover { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-has-mega:hover .nav-caret { transform: rotate(180deg); }
.mega-inner { max-width: 1080px; margin: 0 auto; background: #fff; border: 1px solid var(--br-hairline); border-radius: 20px; box-shadow: var(--sh-lift); padding: 18px; display: grid; grid-template-columns: 280px 1fr 1fr; gap: 18px; }
.mega-promo { background: linear-gradient(160deg, var(--brand-blue-soft), #fff); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; }
.mega-promo-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-blue); }
.mega-promo h4 { font-size: 18px; font-weight: 600; color: var(--fg-black); margin: 10px 0 0; line-height: 1.25; letter-spacing: -0.01em; }
.mega-promo p { font-size: 13.5px; color: var(--fg-mid); margin: 8px 0 16px; line-height: 1.5; }
.mega-promo .btn { align-self: flex-start; margin-top: auto; }
.mega-h { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-warm); padding: 6px 12px 8px; }
.mega-link { display: flex; gap: 12px; padding: 11px 12px; border-radius: 12px; transition: background .14s var(--ease); }
.mega-link:hover { background: var(--bg-light); }
.mega-ico { flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--brand-blue-soft); color: var(--brand-blue); transition: background .15s var(--ease), color .15s var(--ease); }
.mega-link:hover .mega-ico { background: var(--brand-blue); color: #fff; }
.mega-ico svg { width: 21px; height: 21px; }
.mega-link strong { display: block; font-size: 14.5px; font-weight: 600; color: var(--fg-black); letter-spacing: -0.01em; }
.mega-link em { display: block; font-size: 12.5px; font-style: normal; color: var(--fg-warm); margin-top: 2px; }

/* ---------------- MOBILE DRAWER ---------------- */
.drawer-scrim { position: fixed; inset: 0; background: rgba(20,16,12,0.45); z-index: 200; opacity: 0; visibility: hidden; transition: .25s var(--ease); }
.drawer-scrim.open { opacity: 1; visibility: visible; }
.mobile-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(360px, 88vw); background: #fff; z-index: 201; transform: translateX(100%); transition: transform .3s var(--ease); display: flex; flex-direction: column; padding: 18px; overflow-y: auto; }
.mobile-drawer.open { transform: none; }
.drawer-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.drawer-top img { height: 28px; width: auto; }
.drawer-x { background: transparent; border: 0; color: var(--fg-black); padding: 8px; }
.drawer-nav { display: flex; flex-direction: column; gap: 2px; }
.drawer-nav > a, .drawer-acc-btn { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px; border-radius: 12px; color: var(--fg-black); font-size: 16px; font-weight: 500; background: transparent; border: 0; width: 100%; text-align: left; font-family: inherit; cursor: pointer; }
.drawer-nav > a:hover, .drawer-acc-btn:hover { background: var(--bg-light); }
.drawer-acc-panel { display: none; padding: 2px 0 8px 12px; }
.drawer-acc.open .drawer-acc-panel { display: block; }
.acc-pm { position: relative; width: 14px; height: 14px; flex: 0 0 auto; color: var(--fg-mid); }
.acc-pm::before, .acc-pm::after { content: ''; position: absolute; background: currentColor; border-radius: 2px; transition: opacity .2s var(--ease), transform .2s var(--ease); }
.acc-pm::before { top: 50%; left: 0; right: 0; height: 2px; transform: translateY(-50%); }
.acc-pm::after { left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); }
.drawer-acc.open .acc-pm { color: var(--brand-blue); }
.drawer-acc.open .acc-pm::after { opacity: 0; transform: translateX(-50%) scaleY(0); }
.drawer-acc-panel a { display: block; padding: 11px 12px; border-radius: 10px; color: var(--fg-mid); font-size: 14.5px; }
.drawer-acc-panel a:hover { background: var(--bg-light); color: var(--fg-black); }
.drawer-foot { margin-top: auto; padding-top: 18px; }

@media (max-width: 1024px) { .nav-main, .nav-cta .nav-text-link, .nav-cta .btn { display: none; } .nav-burger { display: inline-flex; } .mega { display: none; } }

/* ---------------- IMAGE / MEDIA BLOCKS (image-rich) ---------------- */
.media-frame { border-radius: 22px; overflow: hidden; box-shadow: var(--sh-lift); background: #fff; }
.media-frame img { width: 100%; height: auto; display: block; }
.media-frame.tall { aspect-ratio: 4/3; }
.media-cover { width: 100%; height: 100%; object-fit: cover; }

/* image card (service/work) */
.img-card { border-radius: 18px; overflow: hidden; background: #fff; box-shadow: var(--sh-card); transition: transform .25s var(--ease), box-shadow .25s var(--ease); display: flex; flex-direction: column; height: 100%; }
.img-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lift); }
.img-card-media { aspect-ratio: 16/10; overflow: hidden; position: relative; background: var(--bg-stone); }
.img-card-media img { width: 100%; height: 100%; object-fit: cover; }
.img-card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.img-card-cat { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-blue); }
.img-card-body h3 { font-size: 20px; font-weight: 600; color: var(--fg-black); margin-top: 8px; letter-spacing: -0.01em; }
.img-card-body p { font-size: 14.5px; color: var(--fg-mid); margin-top: 8px; line-height: 1.55; flex: 1; }
.img-card-body .link-blue { margin-top: 16px; }

/* photo industry tile with overlay caption */
.photo-tile { position: relative; border-radius: 16px; overflow: hidden; min-height: 200px; display: flex; align-items: flex-end; box-shadow: var(--sh-card); }
.photo-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,12,30,0.78), rgba(8,12,30,0.15) 55%, transparent); }
.photo-tile .pt-ico { position: absolute; top: 14px; left: 14px; z-index: 2; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,0.18); backdrop-filter: blur(4px); color: #fff; }
.photo-tile .pt-ico svg { width: 20px; height: 20px; }
.photo-tile h4 { position: relative; z-index: 2; color: #fff; font-size: 16px; font-weight: 600; padding: 16px 18px; letter-spacing: -0.01em; }

/* media split (image beside text) */
.media-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.media-split.rev .ms-text { order: 2; }
@media (max-width: 900px) { .media-split { grid-template-columns: 1fr; gap: 36px; } .media-split.rev .ms-text { order: 0; } }

/* logo strip */
.logo-strip { display: flex; flex-wrap: wrap; gap: 16px 48px; justify-content: center; align-items: center; }
.logo-strip span { font-weight: 700; font-size: 19px; color: var(--fg-black); opacity: .4; letter-spacing: -0.02em; }

/* ---------------- FOOTER (professional) ---------------- */
.site-foot { background: #0b0a12; color: #cfc9da; padding: clamp(54px,6vw,80px) 0 30px; border-top: 1px solid rgba(255,255,255,0.06); }
.site-foot > .container-xl { max-width: 1400px; }

/* top: brand (spans 2 rows) + 4 even link columns, with the promo filling row 2 beside the brand */
.foot-main { display: grid; grid-template-columns: 1.7fr repeat(4, 1fr); gap: clamp(22px,2.6vw,34px) clamp(28px,3.4vw,52px); align-items: start; }
.foot-brand { grid-column: 1; }
.foot-logo { height: 50px; width: auto; display: block; }
.foot-tag { font-size: 14px; color: #a8a2b8; line-height: 1.65; margin-top: 16px; max-width: 300px; }
.foot-status { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: #cfc9da; margin-top: 18px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 999px; padding: 6px 13px; }
.foot-dot { width: 8px; height: 8px; border-radius: 50%; background: #2fcf6a; box-shadow: 0 0 0 4px rgba(47,207,106,0.18); }
.foot-reach { margin-top: 18px; display: flex; flex-direction: column; gap: 9px; }
.foot-reach a, .foot-hours { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: #a8a2b8; }
.foot-reach a:hover { color: #fff; }
.foot-reach svg { width: 16px; height: 16px; flex: 0 0 auto; color: #6f6886; }

.foot-cols { display: contents; }
.foot-col { display: flex; flex-direction: column; gap: 11px; }
.foot-h { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: #7d7793; margin-bottom: 6px; }
.foot-col a { font-size: 14px; color: #bdb7cc; text-decoration: none; width: fit-content; transition: color .15s var(--ease), transform .15s var(--ease); }
.foot-col a:hover { color: #fff; transform: translateX(2px); }

/* subtle cross-promo strip (WP Fix Tech) — sits in row 2 across the link columns */
.foot-promo { grid-column: 1 / -1; align-self: start; display: flex; align-items: center; gap: 16px; margin-top: 4px; padding: 15px 20px; border-radius: 14px; text-decoration: none;
  background: linear-gradient(110deg, rgba(33,150,200,0.14), rgba(255,255,255,0.022) 62%);
  border: 1px solid rgba(255,255,255,0.08);
  transition: border-color .2s var(--ease), transform .2s var(--ease), background .2s var(--ease); }
.foot-promo:hover { border-color: rgba(70,180,222,0.42); transform: translateY(-1px); background: linear-gradient(110deg, rgba(40,165,215,0.22), rgba(255,255,255,0.04) 62%); }
.foot-promo-ic { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: #5fbbe0; }
.foot-promo-ic svg { width: 23px; height: 23px; }
.foot-promo-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.foot-promo-copy strong { font-size: 14px; font-weight: 700; color: #efedf5; letter-spacing: -.01em; }
.foot-promo-copy span { font-size: 14px; color: #968fab; line-height: 1.5; }
.foot-promo-copy em { font-style: normal; font-weight: 600; color: #b9b2ca; }
.foot-promo-cta { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: #5fbbe0; white-space: nowrap; }
.foot-promo:hover .foot-promo-cta { color: #82d0ef; }
.foot-promo-cta svg { transition: transform .2s var(--ease); }
.foot-promo:hover .foot-promo-cta svg { transform: translate(2px,-2px); }
@media (max-width: 640px) { .foot-promo { flex-wrap: wrap; } .foot-promo-cta { margin-left: 0; } }

/* secure payments strip */
.foot-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: clamp(34px,3.8vw,48px); padding-top: 26px; border-top: 1px solid rgba(255,255,255,0.07); }
.foot-pay-label { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8d86a0; }
.foot-pay-label svg { width: 16px; height: 16px; color: #2fcf6a; }
.foot-pay-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.foot-pay-badge { display: inline-flex; align-items: center; height: 30px; padding: 0 11px; border-radius: 7px; background: #fff; color: var(--pc, #1a1f71); font-size: 12px; font-weight: 800; letter-spacing: -.01em; box-shadow: 0 2px 8px -2px rgba(0,0,0,.4); border: 1px solid rgba(0,0,0,.06); white-space: nowrap; }
.foot-pay-by { font-size: 12px; color: #6f6886; margin-left: auto; }

/* bottom bar */
.foot-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 22px; margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.07); }
.foot-copy { font-size: 12.5px; color: #807a96; }
.foot-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 18px; }
.foot-legal a, .foot-legal button { font-family: inherit; font-weight: inherit; font-size: 15px; color: #a8a2b8; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; transition: color .15s var(--ease); }
.foot-legal a:hover, .foot-legal button:hover { color: #fff; }

/* fine print / disclaimers */
.foot-fine { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.05); }
.foot-fine p { font-size: 11.5px; line-height: 1.65; color: #6c6682; margin: 0 0 8px; max-width: none; }
.foot-fine strong { color: #948da8; }
.foot-fine a { color: #8d86a0; text-decoration: underline; text-underline-offset: 2px; }
.foot-fine a:hover { color: #fff; }

/* desktop only: brand spans two rows so the promo tucks into the blank space below the columns */
@media (min-width: 961px) {
  .foot-brand { grid-row: 1 / span 2; }
  .foot-promo { grid-column: 2 / -1; grid-row: 2; margin-top: 0; }
}
@media (max-width: 960px) {
  .foot-main { grid-template-columns: 1fr 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .foot-main { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .foot-pay-by { margin-left: 0; flex-basis: 100%; }
}
@media (max-width: 400px) { .foot-main { grid-template-columns: 1fr; } }

/* ---------------- FLOATING CHAT / WHATSAPP ---------------- */
.float-chat { position: fixed; right: 22px; bottom: 22px; z-index: 90; display: inline-flex; align-items: center; gap: 0; padding: 13px 20px 13px 15px; border-radius: 9999px; background: var(--brand-blue); color: #fff; box-shadow: var(--sh-blue); border: 0; font-weight: 600; font-size: 14.5px; cursor: pointer; transition: transform .18s var(--ease), opacity .22s var(--ease), visibility .22s var(--ease); animation: fcIn .6s var(--ease) .8s backwards; }
.float-chat:hover { transform: translateY(-2px); }
.float-chat svg { width: 20px; height: 20px; flex: 0 0 auto; transform-origin: 50% 62%; animation: fcWiggle 1.1s var(--ease) 1.7s 2; }
/* label emerges to the right after the icon lands (tablet + desktop) */
.float-chat-label { display: inline-block; overflow: hidden; white-space: nowrap; max-width: 0; margin-left: 0; opacity: 0; animation: fcLabel .5s var(--ease) 1.5s forwards; }
/* attention-grabbing pulse rings on load (runs a few times, then settles) */
.float-chat::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; box-shadow: 0 0 0 0 rgba(30,110,245,.5); animation: fcPulse 2.2s var(--ease) 1.5s 3; }
/* hidden while the Zoho SalesIQ chat window is open */
.float-chat.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px) scale(.96); }
.float-chat.is-hidden::before { animation: none; }
@keyframes fcIn { from { opacity: 0; transform: translateY(24px) scale(.8); } 60% { transform: translateY(-4px) scale(1.04); } to { opacity: 1; transform: none; } }
@keyframes fcLabel { to { max-width: 180px; margin-left: 9px; opacity: 1; } }
@keyframes fcPulse { 0% { box-shadow: 0 0 0 0 rgba(30,110,245,.5); } 70% { box-shadow: 0 0 0 20px rgba(30,110,245,0); } 100% { box-shadow: 0 0 0 0 rgba(30,110,245,0); } }
@keyframes fcWiggle { 0%,100% { transform: rotate(0); } 22% { transform: rotate(-14deg); } 48% { transform: rotate(12deg); } 72% { transform: rotate(-7deg); } }
/* phones: round icon-only button, no label */
@media (max-width: 600px) {
  .float-chat { padding: 0; width: 56px; height: 56px; justify-content: center; border-radius: 50%; }
  .float-chat-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .float-chat, .float-chat::before, .float-chat svg, .float-chat-label { animation: none !important; }
  .float-chat-label { max-width: 180px; margin-left: 9px; opacity: 1; }
}
.float-wa { position: fixed; right: 22px; bottom: 22px; z-index: 90; width: 56px; height: 56px; border-radius: 50%; background: #25D366; display: grid; place-items: center; box-shadow: 0 14px 30px -10px rgba(0,0,0,0.5); transition: transform .18s var(--ease); }
.float-wa:hover { transform: translateY(-2px) scale(1.04); }
.float-wa svg { width: 30px; height: 30px; }

/* ---------------- GDPR CONSENT ---------------- */
.consent { position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 300; max-width: 440px; background: #fff; border: 1px solid var(--br-hairline); border-radius: 18px; box-shadow: var(--sh-lift); padding: 24px; transform: translateY(180%); transition: transform .4s var(--ease); }
.consent.show { transform: none; }
.consent h4 { font-size: 17px; font-weight: 600; color: var(--fg-black); }
.consent p { font-size: 13.5px; color: var(--fg-mid); line-height: 1.55; margin-top: 8px; }
.consent p a { color: var(--brand-blue); text-decoration: underline; }
.consent-tg { margin-top: 14px; display: none; flex-direction: column; gap: 12px; }
.consent.detailed .consent-tg { display: flex; }
.consent-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.consent-row strong { font-size: 14px; font-weight: 600; color: var(--fg-black); display: block; }
.consent-row span { font-size: 12.5px; color: var(--fg-warm); }
.consent-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.consent-actions .btn { flex: 1 1 0; min-width: 0; white-space: nowrap; padding-left: 14px; padding-right: 14px; justify-content: center; }
/* simple mode shows Decline + Customize; detailed (customize) mode swaps them for Back */
.consent .consent-detail { display: none; }
.consent.detailed .consent-basic { display: none; }
.consent.detailed .consent-detail { display: inline-flex; align-items: center; }
.sw { position: relative; width: 42px; height: 24px; flex: none; }
.sw input { opacity: 0; width: 0; height: 0; }
.sw .sl { position: absolute; inset: 0; border-radius: 999px; background: #d8d3e0; transition: .2s; cursor: pointer; }
.sw .sl::before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px; border-radius: 50%; background: #fff; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
.sw input:checked + .sl { background: var(--brand-blue); }
.sw input:checked + .sl::before { transform: translateX(18px); }
.sw input:disabled + .sl { opacity: .55; }

/* nav burger color on mobile already inherits; ensure spacing */
@media (max-width: 1024px) { .nav-cta { gap: 4px; } }

/* ---------------- IMAGE SLOTS / PLACEHOLDERS ----------------
   Real Canva/photo assets drop into these <img> slots; until then the
   blocks render as intentional branded gradient areas (not broken). */
.media-frame { position: relative; }
.ph-hero { aspect-ratio: 21/9; background: linear-gradient(125deg, #1e6ef5 0%, #0ea5c9 55%, #083abd 100%); display: grid; place-items: center; }
.ph-hero::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.16) 1px, transparent 1px); background-size: 22px 22px; opacity: .5; }
.ph-feat { display: grid; place-items: center; }
.ph-build { background: linear-gradient(150deg, #1e6ef5, #083abd); }
.ph-grow  { background: linear-gradient(150deg, #0ea5c9, #1e6ef5); }
.ph-run   { background: linear-gradient(150deg, #6d4bf5, #1e6ef5); }
.ph-svc   { background: linear-gradient(150deg, var(--c1, #1e6ef5), var(--c2, #083abd)); display: grid; place-items: center; }
.ph-svc img, .ph-work img, .ph-ind img { position: relative; z-index: 1; }
.ph-glyph { position: relative; z-index: 0; width: 64px; height: 64px; display: grid; place-items: center; opacity: .96; }
.ph-glyph svg { width: 42px; height: 42px; }
.ph-work { background: linear-gradient(150deg, var(--c1, #1e6ef5), #083abd); }
.ph-ind { background: #0c1230; }
.ph-ind-0 { background: linear-gradient(160deg, #1e6ef5, #083abd); }
.ph-ind-1 { background: linear-gradient(160deg, #0ea5c9, #1e6ef5); }
.ph-ind-2 { background: linear-gradient(160deg, #6d4bf5, #1e6ef5); }
.ph-ind-3 { background: linear-gradient(160deg, #083abd, #0c1230); }
.ph-note { display: none; position: absolute; bottom: 12px; left: 12px; z-index: 2; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,0.28); padding: 5px 11px; border-radius: 999px; }
.ph-fallback .ph-note { display: inline-block; }
.ph-fallback img { display: none; }

/* ==========================================================================
   v2 POLISH — bolder type, full-width feel, richer feature visuals,
   industry marquee, single big quote. (Addresses: thin font, too many
   grid items, flat placeholders, full-width preference.)
   ========================================================================== */

/* Bolder, more confident display type */
.display    { font-weight: 600 !important; letter-spacing: -0.045em !important; }
.display-sm { font-weight: 600 !important; letter-spacing: -0.03em !important; }
h1 { font-weight: 600; } h2 { font-weight: 600; } h3 { font-weight: 600; }
.fix-card h4, .img-card-body h3, .feature-card h3 { font-weight: 700; }
.body-lg { color: var(--fg-mid); }

/* Section eyebrow a touch stronger */
.eyebrow { font-weight: 700; letter-spacing: 0.12em; }

/* ---- Feature rows: rich product mockups on a tinted full-width frame ---- */
.feat-wrap { background: linear-gradient(160deg, var(--brand-blue-soft) 0%, #fbfdff 100%); border-radius: 26px; padding: clamp(24px, 3.4vw, 46px); box-shadow: var(--sh-card); }
.mini { background: #fff; border-radius: 18px; box-shadow: var(--sh-lift); overflow: hidden; }
.mini-bar { display: flex; align-items: center; gap: 6px; padding: 12px 15px; border-bottom: 1px solid var(--br-hairline); background: var(--bg-near); }
.mini-bar i { width: 10px; height: 10px; border-radius: 50%; background: #e0ddea; display: block; }
.mini-bar i.on { background: var(--brand-blue); }
.mini-bar small { margin-left: 8px; font-size: 12px; color: var(--fg-warm); font-weight: 500; }
.mini-body { padding: 18px; }
.mini-row { display: flex; align-items: center; gap: 11px; padding: 12px 13px; border-radius: 13px; }
.mini-row + .mini-row { margin-top: 8px; }
.mini-row.sel { background: var(--brand-blue-soft); }
.mini-tag { font-size: 11px; font-weight: 700; letter-spacing: .03em; padding: 4px 10px; border-radius: 999px; }
.mini-tag.ok { background: #eafaf0; color: var(--ok); }
.mini-tag.bl { background: var(--brand-blue-soft); color: var(--brand-blue-deep); }
.mini-stat { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; color: var(--fg-black); }
.mini-stat.bl { color: var(--brand-blue); }
.svc-inline { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.svc-inline a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 9999px; background: #fff; box-shadow: var(--sh-card); font-size: 14px; font-weight: 600; color: var(--fg-black); transition: transform .16s var(--ease), box-shadow .16s var(--ease); }
.svc-inline a:hover { transform: translateY(-2px); box-shadow: var(--sh-lift); color: var(--brand-blue); }

/* ---- Industries: full-width marquee instead of an 8-tile grid ---- */
.ind-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.ind-track { display: flex; gap: 14px; width: max-content; animation: indmarq 42s linear infinite; }
.ind-marquee:hover .ind-track { animation-play-state: paused; }
.ind-chip { display: inline-flex; align-items: center; gap: 11px; padding: 15px 24px; border-radius: 9999px; background: #fff; box-shadow: var(--sh-card); font-size: 16px; font-weight: 600; color: var(--fg-black); white-space: nowrap; letter-spacing: -0.01em; }
.ind-chip svg { width: 20px; height: 20px; color: var(--brand-blue); }
@keyframes indmarq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ind-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; } .ind-marquee { -webkit-mask-image: none; mask-image: none; } }

/* ---- Work cards: real device mockups on a soft tint (no flat blocks) ---- */
.wk-media { aspect-ratio: 16/10; display: grid; place-items: center; padding: 26px 26px 0; overflow: hidden; }
.wk-1 { background: linear-gradient(160deg, #e8f0ff, #f6f9ff); }
.wk-2 { background: linear-gradient(160deg, #efeaff, #f7f5ff); }
.wk-3 { background: linear-gradient(160deg, #e6f6fb, #f3fbfd); }
.wk-media svg { width: 100%; height: auto; filter: drop-shadow(0 18px 30px rgba(20,30,60,0.16)); }

/* ---- Trustpilot-style reviews ---- */
.tp-head { text-align: center; margin-bottom: 44px; }
.tp-badge { display: inline-flex; align-items: center; gap: 10px; }
.tp-stars { display: inline-flex; gap: 3px; }
.tp-sq { width: 30px; height: 30px; background: #00b67a; display: grid; place-items: center; border-radius: 4px; }
.tp-sq svg { width: 19px; height: 19px; fill: #fff; }
.tp-score { margin-top: 14px; font-size: 16px; color: var(--fg-mid); }
.tp-score strong { color: var(--fg-black); font-weight: 700; }
.tp-rows { display: flex; flex-direction: column; gap: 18px; }
.tp-row { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.tp-track { display: flex; gap: 18px; width: max-content; animation: tpscroll 60s linear infinite; }
.tp-track.rev { animation-direction: reverse; }
.tp-row:hover .tp-track { animation-play-state: paused; }
.tp-card { width: 360px; flex: none; background: #fff; border: 1px solid var(--br-hairline); border-radius: 14px; padding: 22px; box-shadow: var(--sh-card); }
.tp-card .tp-mini { display: inline-flex; gap: 2px; margin-bottom: 13px; }
.tp-card .tp-mini i { width: 18px; height: 18px; background: #00b67a; border-radius: 3px; display: grid; place-items: center; }
.tp-card .tp-mini i svg { width: 12px; height: 12px; fill: #fff; }
.tp-card h5 { font-size: 15px; font-weight: 700; color: var(--fg-black); letter-spacing: -0.01em; }
.tp-card p { font-size: 14px; color: var(--fg-mid); margin-top: 6px; line-height: 1.55; }
.tp-card .tp-who { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.tp-card .tp-av { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(150deg, var(--brand-blue), var(--brand-blue-deep)); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 600; }
.tp-card .tp-nm { font-size: 13.5px; font-weight: 600; color: var(--fg-black); }
.tp-card .tp-vf { font-size: 12px; color: var(--ok); display: inline-flex; align-items: center; gap: 4px; }
@keyframes tpscroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .tp-track { animation: none; } }

/* ---- Industries: staggered elevated tile cloud (front.com style, on white) ---- */
.ind-cloud { display: grid; grid-template-columns: repeat(6, 1fr); gap: 44px 24px; max-width: 1000px; margin: 0 auto; }
.ind-cloud .it { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ind-cloud .it:nth-child(6n+1) { transform: translateY(0); }
.ind-cloud .it:nth-child(6n+2) { transform: translateY(28px); }
.ind-cloud .it:nth-child(6n+3) { transform: translateY(10px); }
.ind-cloud .it:nth-child(6n+4) { transform: translateY(32px); }
.ind-cloud .it:nth-child(6n+5) { transform: translateY(10px); }
.ind-cloud .it:nth-child(6n+6) { transform: translateY(28px); }
.ind-cloud .it .tile { width: 86px; height: 86px; border-radius: 22px; background: #fff; box-shadow: 0 14px 34px -14px rgba(20,30,60,0.22), inset 0 0 0 1px rgba(0,0,0,0.05); display: grid; place-items: center; transition: transform .22s var(--ease), box-shadow .22s var(--ease); }
.ind-cloud .it:hover .tile { transform: translateY(-5px); box-shadow: 0 22px 44px -16px rgba(20,30,60,0.3), inset 0 0 0 1px rgba(0,0,0,0.06); }
.ind-cloud .it .tile svg { width: 36px; height: 36px; }
.ind-cloud .it .lbl { font-size: 13px; font-weight: 600; color: var(--fg-mid); text-align: center; letter-spacing: -0.01em; }
@media (max-width: 860px) { .ind-cloud { grid-template-columns: repeat(4, 1fr); gap: 34px 18px; } }
@media (max-width: 560px) { .ind-cloud { grid-template-columns: repeat(3, 1fr); } .ind-cloud .it { transform: none !important; } }

/* ==========================================================================
   HERO SCROLL-ASSEMBLY (Steep-style): scattered cards converge into a
   dashboard as you scroll. JS sets --p (0 = scattered, 1 = assembled).
   ========================================================================== */
.asm { position: relative; width: 100%; max-width: 1040px; height: 600px; margin: 0 auto; --p: 0; }
.asm-el {
  position: absolute;
  opacity: calc(0.5 + 0.5 * var(--p));
  transform:
    translate(calc(var(--sx, 0) * (1 - var(--p)) * 1px), calc(var(--sy, 0) * (1 - var(--p)) * 1px))
    rotate(calc(var(--sr, 0) * (1 - var(--p)) * 1deg))
    scale(calc(0.9 + 0.1 * var(--p)));
  transition: transform .12s linear, opacity .12s linear;
  will-change: transform, opacity;
}
.asm-panel { background: #fff; border-radius: 18px; box-shadow: var(--sh-lift); }
/* Steep-style layout: central dashboard + corner blocks + cursors + ask bar */
.asm-core { top: 11%; left: 23%; width: 54%; z-index: 2; box-shadow: var(--sh-blue), var(--sh-lift); overflow: hidden; }
.asm-pink { top: 0;     left: 5%;  width: 21%; z-index: 4; }
.asm-blue { top: 7%;    right: 2%; width: 22%; z-index: 4; }
.asm-gray { bottom: 15%; left: 0;  width: 21%; z-index: 4; }
.asm-ask  { bottom: 1%; left: 23%; width: 54%; z-index: 5; }
.asm-cur-l { top: 43%; left: 17%; z-index: 6; }
.asm-cur-r { top: 27%; right: 13%; z-index: 6; }

/* colored corner blocks */
.asm-block { border-radius: 16px; padding: 15px 17px; box-shadow: var(--sh-lift); }
.asm-block .bk { font-size: 11.5px; font-weight: 600; opacity: .85; }
.asm-block .bv { font-size: 23px; font-weight: 700; letter-spacing: -.03em; margin-top: 3px; }
.asm-pink .asm-block { background: #ffe1ee; color: #b3216b; }
.asm-blue .asm-block { background: #e2ecff; color: #1647b8; }
.asm-gray .asm-block { background: #eef0f4; color: #3a3f4a; }
.asm-spark { display: flex; align-items: flex-end; gap: 4px; height: 26px; margin-top: 9px; }
.asm-spark span { flex: 1; border-radius: 3px 3px 0 0; background: currentColor; opacity: .4; }
.asm-spark span.hi { opacity: .9; }

/* ask-anything bar */
.asm-ask .bar { display: flex; align-items: center; gap: 11px; background: #fff; border-radius: 9999px; padding: 14px 16px; box-shadow: var(--sh-lift), inset 0 0 0 1px var(--br-hairline); }
.asm-ask .mag { width: 19px; height: 19px; color: var(--brand-blue); flex: none; }
.asm-ask .q { font-size: 14px; color: var(--fg-mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asm-ask .snd { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; background: var(--brand-blue); display: grid; place-items: center; flex: none; }
.asm-ask .snd svg { width: 15px; height: 15px; color: #fff; }

/* collaborator cursors */
.asm-cur svg { width: 24px; height: 24px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.22)); display: block; }
.asm-cur .nm { margin-top: -2px; margin-left: 12px; font-size: 11px; font-weight: 600; color: #fff; padding: 3px 9px; border-radius: 9px; white-space: nowrap; display: inline-block; }
.asm-cur-l .nm { background: #e0457b; } .asm-cur-l svg { color: #e0457b; }
.asm-cur-r .nm { background: #1e6ef5; } .asm-cur-r svg { color: #1e6ef5; }

/* card internals */
.asm-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--br-hairline); background: var(--bg-near); }
.asm-bar i { width: 9px; height: 9px; border-radius: 50%; background: #dcdce6; }
.asm-bar i.on { background: var(--brand-blue); }
.asm-bar small { margin-left: 6px; font-size: 11.5px; color: var(--fg-warm); font-weight: 500; }
.asm-pad { padding: 16px; }
.asm-mini { padding: 14px 16px; }
.asm-k { font-size: 11.5px; color: var(--fg-warm); font-weight: 600; letter-spacing: .02em; }
.asm-v { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; color: var(--fg-black); margin-top: 2px; }
.asm-v.bl { color: var(--brand-blue); }
.asm-row { display: flex; align-items: center; gap: 9px; padding: 9px 0; }
.asm-row + .asm-row { border-top: 1px solid var(--br-hairline); }
.asm-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.asm-row span { font-size: 12.5px; color: var(--fg-dark); font-weight: 500; }
.asm-tag { margin-left: auto; font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; }
.asm-tag.ok { background: #eafaf0; color: var(--ok); }
.asm-tag.bl { background: var(--brand-blue-soft); color: var(--brand-blue-deep); }
.asm-bars { display: flex; align-items: flex-end; gap: 6px; height: 60px; margin-top: 10px; }
.asm-bars span { flex: 1; border-radius: 5px 5px 0 0; background: var(--brand-blue-soft-2); }
.asm-bars span.hi { background: var(--brand-blue); }

@media (max-width: 820px) {
  .asm { height: 360px; max-width: 480px; --p: 1 !important; }
  .asm-core { top: 4%; left: 3%; width: 94%; }
  .asm-pink, .asm-blue, .asm-gray, .asm-ask, .asm-cur-l, .asm-cur-r { display: none; }
}
@media (prefers-reduced-motion: reduce) { .asm { --p: 1 !important; } }

/* ==========================================================================
   STEEP-STYLE PINNED SCROLL-ASSEMBLY HERO
   Headline centered; metric cards scattered to the edges; on scroll the
   section pins and the cards converge to centre while the headline fades.
   JS sets --p on .steep-hero (0 = scattered, 1 = assembled).
   ========================================================================== */
.steep-wrap { position: relative; height: 210vh; }
.steep-hero { position: sticky; top: 0; height: 100vh; min-height: 660px; overflow: hidden; display: grid; place-items: center; background: #fbfbfd; --p: 0; }
.steep-aura { position: absolute; inset: -12% -6%; pointer-events: none; filter: blur(18px);
  background:
    radial-gradient(38% 36% at 50% 46%, rgba(255,150,110,0.32), transparent 62%),
    radial-gradient(36% 40% at 33% 56%, rgba(150,120,240,0.26), transparent 64%),
    radial-gradient(34% 34% at 67% 52%, rgba(255,110,90,0.20), transparent 62%),
    radial-gradient(40% 40% at 60% 36%, rgba(120,170,255,0.22), transparent 64%); }
.steep-center { position: relative; z-index: 1; text-align: center; max-width: 800px; padding: 0 24px;
  opacity: clamp(0, calc(1 - var(--p) * 1.7), 1);
  transform: translateY(calc(var(--p) * -28px));
  transition: opacity .08s linear, transform .08s linear; }
.sh-card { position: absolute; background: #fff; border-radius: 16px; box-shadow: var(--sh-lift); z-index: 2;
  transform: translate(calc(var(--sx,0) * (1 - var(--p)) * 1px), calc(var(--sy,0) * (1 - var(--p)) * 1px)) scale(calc(0.95 + 0.05 * var(--p)));
  transition: transform .08s linear; will-change: transform; }
.sh-newusers { width: 34%; max-width: 470px; left: 16%; top: 26%; background: #e9f1fc; }
.sh-reg { width: 19%; max-width: 270px; right: 13%; top: 35%; background: #faeae1; }
.sh-activation { width: 23%; max-width: 320px; left: 20%; bottom: 12%; }
.sh-ask { width: 30%; max-width: 430px; left: 37%; bottom: 19%; border-radius: 18px; }
.sh-h { font-size: 12.5px; font-weight: 700; color: var(--fg-warm); letter-spacing: .01em; }
.sh-bars { display: flex; align-items: flex-end; gap: 3px; height: 54px; margin-top: 14px; }
.sh-bars span { flex: 1; border-radius: 2px 2px 0 0; background: #1e6ef5; }
.sh-reg-list { margin-top: 12px; display: flex; flex-direction: column; gap: 9px; }
.sh-reg-list div { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--fg-mid); }
.sh-reg-list div b { color: var(--fg-black); font-weight: 600; }
.sh-ring-wrap { position: relative; width: 64px; height: 64px; flex: none; }
.sh-ring-wrap .t { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; line-height: 1.1; }
.sh-ava { position: absolute; display: flex; align-items: flex-start; z-index: 6; }
.sh-ava .cur { width: 18px; height: 18px; filter: drop-shadow(0 3px 6px rgba(0,0,0,.2)); }
.sh-ava .av { margin-top: 6px; margin-left: -3px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; box-shadow: 0 4px 10px rgba(0,0,0,.18); }
.sh-ava-green .av { background: #c7f0d2; color: #1d7a3e; } .sh-ava-green .cur { color: #1d7a3e; }
.sh-ava-blue .av { background: #cfe0ff; color: #1e5fd0; } .sh-ava-blue .cur { color: #1e5fd0; }
@media (max-width: 920px) {
  .steep-wrap { height: auto; }
  .steep-hero { position: static; height: auto; min-height: 0; padding: 80px 0 48px; display: block; }
  .steep-center { opacity: 1 !important; transform: none !important; }
  .sh-card { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .steep-wrap { height: auto; }
  .steep-hero { position: static; height: auto; min-height: 0; padding: 80px 0 48px; display: block; }
  .steep-center { opacity: 1 !important; transform: none !important; }
  .sh-card { display: none; }
}

/* ==========================================================================
   STEEP-STYLE AURORA HERO BACKGROUND
   Soft multi-colour radial glow on a near-white canvas, fading to the page
   colour at the edges. Centred behind the headline.
   ========================================================================== */
.hero-aura { position: relative; overflow: hidden; background: #fbfbfd; }
.hero-aura-bg {
  position: absolute; inset: -25% -12% -35% -12%; z-index: 0; pointer-events: none; filter: blur(30px);
  background:
    radial-gradient(38% 42% at 50% 40%, rgba(255,150,110,0.34), transparent 60%),
    radial-gradient(34% 44% at 29% 52%, rgba(150,120,240,0.30), transparent 62%),
    radial-gradient(32% 40% at 71% 46%, rgba(255,110,90,0.24), transparent 60%),
    radial-gradient(40% 48% at 63% 33%, rgba(120,170,255,0.30), transparent 62%),
    radial-gradient(30% 36% at 42% 30%, rgba(255,196,120,0.22), transparent 60%);
  -webkit-mask-image: radial-gradient(75% 70% at 50% 42%, #000 55%, transparent 100%);
  mask-image: radial-gradient(75% 70% at 50% 42%, #000 55%, transparent 100%);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-aura-bg { animation: auraDrift 18s ease-in-out infinite alternate; }
}
@keyframes auraDrift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(0,-2%,0) scale(1.06); } }

/* ---------------- Logo slider (marquee) ---------------- */
.logo-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logo-track { display: flex; align-items: center; width: max-content; animation: logoScroll 32s linear infinite; }
.logo-marquee:hover .logo-track { animation-play-state: paused; }
.logo-track span { display: inline-flex; align-items: center; gap: 11px; margin-right: 64px; font-weight: 700; font-size: 19px; color: #000; opacity: 1; letter-spacing: -0.02em; white-space: nowrap; }
.logo-track span img { width: 22px; height: 22px; display: block; flex: 0 0 auto; }
.logo-track img[src$="microsoft365.svg"], .logo-track img[src$="googleworkspace.svg"] { height: 18px; width: 18px; }
@keyframes logoScroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .logo-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; gap: 20px 48px; }
  .logo-track span { margin-right: 0; }
  .logo-marquee { -webkit-mask-image: none; mask-image: none; }
}

/* ==========================================================================
   TEXT COLOR — use dark near-black for all text (override lighter greys).
   Loaded after style.css, so these win for every var() usage.
   ========================================================================== */
:root {
  --fg-dark: #0d0d0d;   /* headings / strong text */
  --fg-mid:  #161616;   /* body text (was #4e4e4e) */
  --fg-warm: #2e2e2e;   /* secondary / captions / meta (was #6b655d) */
}

/* ==========================================================================
   HEADER — Steep-style: transparent over the hero, solid white on scroll.
   Logo 50px tall, auto width. (Fixed so the hero aurora shows behind it.)
   ========================================================================== */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: transparent; border-bottom-color: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
}
.site-nav.scrolled {
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--br-hairline);
  box-shadow: 0 6px 30px -22px rgba(0,0,0,0.4);
}
.nav-row { height: 78px; }
.nav-brand img { height: 50px; width: auto; }
.mega { top: 78px; }

/* ---------------- Main menu links: 15px/500, blue hover/active, no bg ---------------- */
.nav-item { font-size: 15px; font-weight: 500; }
.nav-item:hover, .nav-item.active, .nav-has-mega:hover .nav-item { color: var(--brand-blue); background: transparent; }

/* ---------------- Mega menu: 3 big-icon cards (Build / Maintain / Grow) ---------------- */
.mega3 { max-width: 720px; margin: 0 auto; background: #fff; border: 1px solid var(--br-hairline); border-radius: 20px; box-shadow: var(--sh-lift); padding: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mega3-card { display: flex; flex-direction: column; padding: 22px 18px; border-radius: 16px; transition: background .15s var(--ease), transform .15s var(--ease); }
.mega3-card:hover { background: var(--bg-light); transform: translateY(-2px); }
.mega3-ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--brand-blue-soft); color: var(--brand-blue); margin-bottom: 16px; transition: background .15s var(--ease), color .15s var(--ease); }
.mega3-card:hover .mega3-ico { background: var(--brand-blue); color: #fff; }
.mega3-ico svg { width: 28px; height: 28px; }
.mega3-card h4 { font-size: 15.5px; font-weight: 600; color: var(--fg-black); letter-spacing: -0.01em; }
.mega3-card p { font-size: 12.5px; color: var(--fg-warm); margin-top: 6px; line-height: 1.45; }

/* ---------------- Mega menu hover fix ----------------
   1) Trigger fills full nav height + a padding-top bridge on the panel, so
      moving from the menu item down to the panel never crosses a dead gap.
   2) Panel is anchored under its trigger (not full-width), so moving the
      pointer left/right off the panel correctly closes it. */
.nav-main { align-self: stretch; }
.nav-has-mega { position: relative; height: 100%; display: flex; align-items: center; }
.mega { top: 100%; left: 0; right: auto; padding-top: 12px; }
.mega3 { margin: 0; width: 680px; max-width: calc(100vw - 40px); }

/* ---------------- Mega: centered panel + hover-intent (no off-screen) ----------------
   Panel is centered on screen and capped to the viewport width; opening/closing is
   driven by JS (.open) with a small delay so crossing the gap to a centered panel
   keeps it open, while leaving it (sideways or away) closes it. Empty area of the
   full-width container ignores the pointer so off-panel hover doesn't keep it open. */
.nav-has-mega { position: static; }
.mega { left: 0; right: 0; pointer-events: none; }
.mega3 { margin: 0 auto; width: 680px; max-width: calc(100vw - 32px); pointer-events: auto; }
.nav-has-mega.open > .mega { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-has-mega.open .nav-caret { transform: rotate(180deg); }

/* ---------------- Mega cards v2: 2-up + full-width 3rd, tinted, bigger icons ---------------- */
.mega3 { width: 540px; max-width: calc(100vw - 32px); grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; }
.mega3-card { padding: 20px 18px; align-items: flex-start; }
.mega3-card:nth-child(1) { background: #e9f1fc; }
.mega3-card:nth-child(1):hover { background: #dce8fb; }
.mega3-card:nth-child(2) { background: #e9f6f0; }
.mega3-card:nth-child(2):hover { background: #dcf0e6; }
.mega3-card:nth-child(3) { background: #f1ecfb; grid-column: 1 / -1; flex-direction: row; align-items: center; }
.mega3-card:nth-child(3):hover { background: #e8dffa; }
.mega3-card:hover { transform: translateY(-2px); }
.mega3-ico { width: 60px; height: 60px; border-radius: 17px; background: #fff; color: var(--brand-blue); margin-bottom: 15px; box-shadow: 0 6px 14px -6px rgba(20,40,90,0.22); flex: none; }
.mega3-ico svg { width: 30px; height: 30px; }
.mega3-card:nth-child(3) .mega3-ico { margin-bottom: 0; margin-right: 18px; }
.mega3-card:hover .mega3-ico { background: var(--brand-blue); color: #fff; }
.mega3-txt h4 { font-size: 18px; font-weight: 600; color: var(--fg-black); letter-spacing: -0.01em; }
.mega3-txt p { font-size: 14.5px; font-weight: 400; color: var(--fg-warm); margin-top: 5px; line-height: 1.4; }

/* ---------------- Anchor mega panels directly under their trigger ---------------- */
.nav-has-mega { position: relative; }
.mega { left: 0; right: auto; pointer-events: auto; }
.mega3 { margin: 0; }

/* ---------------- Mega v3: centered panel + full-height gradient side ---------------- */
.nav-has-mega { position: static; }
.mega { left: 0; right: 0; pointer-events: none; }
.mega3 {
  margin: 0 auto; pointer-events: auto;
  width: 760px; max-width: calc(100vw - 32px);
  display: grid; grid-template-columns: 215px 1fr; gap: 0;
  padding: 0; overflow: hidden;
}
.mega3-side { padding: 26px 24px; color: #fff; display: flex; flex-direction: column; justify-content: center; }
.mega3-side h3 { font-size: 34px; font-weight: 700; color: #fff; letter-spacing: -0.02em; line-height: 1.04; }
.mega3-side p { font-size: 13.5px; color: rgba(255,255,255,0.9); margin-top: 12px; line-height: 1.45; max-width: 165px; }
.mega3--build .mega3-side    { background: linear-gradient(160deg, #1e6ef5 0%, #0a3bbd 100%); }
.mega3--maintain .mega3-side { background: linear-gradient(160deg, #0ea5c9 0%, #0a5e86 100%); }
.mega3--grow .mega3-side     { background: linear-gradient(160deg, #7a3df0 0%, #4a169e 100%); }
.mega3-cards { padding: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .mega3 { grid-template-columns: 1fr; } .mega3-side { display: none; } }

/* ---------------- Mega v4: anchored below trigger, header + items ---------------- */
.nav-has-mega { position: relative; }
.mega { left: 0; right: auto; pointer-events: auto; }
.mega3 { margin: 0; width: 540px; max-width: calc(100vw - 24px); display: block; padding: 0; overflow: hidden; }
.mega3-head { padding: 22px 22px 6px; }
.mega3-head h3 { font-size: 26px; font-weight: 700; color: var(--fg-black); letter-spacing: -0.02em; line-height: 1.1; }
.mega3-head p { font-size: 14px; color: var(--fg-warm); margin-top: 9px; line-height: 1.5; }
.mega3-cards { padding: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Grow opens right-to-left only on narrower screens (< 1150px); left-to-right above that */
@media (max-width: 1149px) {
  .nav-has-mega--grow .mega { left: auto; right: 0; }
}

/* ---------------- Header: white always, minimal height, bolder links ---------------- */
.site-nav { background: #fff; border-bottom: 1px solid var(--br-hairline); backdrop-filter: none; -webkit-backdrop-filter: none; }
.site-nav.scrolled { background: #fff; }
.nav-row { height: 64px; }
.nav-item { font-weight: 600; }

/* ---------------- Hero trust badges: Trustpilot (4.5) + Google (5) ---------------- */
.hero-badges { display: flex; justify-content: center; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 30px; }
.rev-badge { display: inline-flex; flex-direction: column; align-items: center; gap: 7px; }
.rev-top { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--fg-black); letter-spacing: -0.01em; }
.rev-top svg { display: block; }
.rev-stars { display: inline-flex; align-items: center; gap: 3px; }
.tps { width: 21px; height: 21px; border-radius: 3px; display: grid; place-items: center; background: #00b67a; }
.tps svg { width: 13px; height: 13px; fill: #fff; }
.tps.half { background: linear-gradient(90deg, #00b67a 50%, #d6d6da 50%); }
.gstars { color: #fbbc04; font-size: 19px; line-height: 1; letter-spacing: 2px; }
.rev-div { width: 1px; height: 40px; background: var(--br-hairline); }
@media (max-width: 460px) { .rev-div { display: none; } }

.rev-sub { font-size: 12px; color: var(--fg-warm); font-weight: 500; letter-spacing: -0.01em; }

.rev-sub { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--fg-warm); font-weight: 500; letter-spacing: -0.01em; }
.rev-sub b { color: var(--fg-black); font-weight: 700; }
.rev-mk { display: block; flex: none; }

/* rated text back to a plain caption line */
.rev-sub { display: block; font-size: 12px; color: var(--fg-warm); font-weight: 500; letter-spacing: -0.01em; }

/* ---------------- Hero background globe (moving, opacity 0.5) ---------------- */
.hero-globe { position: absolute; right: -150px; top: 50%; transform: translateY(-50%); width: 560px; height: 560px; opacity: 0.5; z-index: 0; pointer-events: none; }
.hero-globe .globe-sphere { position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 62%, transparent 75%);
  mask-image: radial-gradient(circle at 50% 50%, #000 62%, transparent 75%); }
.hero-globe .globe-dots { position: absolute; inset: -6%; border-radius: 50%;
  background-image: radial-gradient(rgba(30,110,245,0.8) 1.3px, transparent 1.7px);
  background-size: 20px 20px;
  animation: globeSpin 18s linear infinite; }
@keyframes globeSpin { from { background-position: 0 0; } to { background-position: -200px 0; } }
.hero-globe .globe-shade { position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, rgba(255,255,255,0.55), transparent 52%);
  box-shadow: inset -30px -26px 70px rgba(8,58,189,0.16), inset 0 0 0 1px rgba(30,110,245,0.16); }
.hero-globe .globe-grid { position: absolute; inset: 0; width: 100%; height: 100%; animation: globeTilt 28s ease-in-out infinite alternate; }
@keyframes globeTilt { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@media (max-width: 900px) { .hero-globe { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero-globe .globe-dots, .hero-globe .globe-grid { animation: none; } }

/* Globe: full height of hero, fainter (0.3) */
.hero-globe { top: 0; right: -220px; width: auto; height: 100%; aspect-ratio: 1; transform: none; opacity: 0.3; }

/* Hero moving dot pattern (full-bleed background, replaces globe) */
.hero-dots { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.3;
  background-image: radial-gradient(rgba(30,110,245,0.7) 1.3px, transparent 1.7px);
  background-size: 22px 22px;
  animation: dotsMove 18s linear infinite; }
@keyframes dotsMove { from { background-position: 0 0; } to { background-position: -220px 0; } }
@media (prefers-reduced-motion: reduce) { .hero-dots { animation: none; } }

/* ==========================================================================
   "Everything under one roof" — creative full-bleed brand-gradient band
   ========================================================================== */
.uno { position: relative; overflow: hidden; padding: clamp(72px,9vw,120px) 0; color: #fff;
  background: linear-gradient(135deg, #1e6ef5 0%, #0d4fd0 46%, #082a8f 100%); }
.uno::before { content: ""; position: absolute; width: 640px; height: 640px; border-radius: 50%; top: -240px; left: -160px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,255,255,0.18), transparent 70%); }
.uno::after { content: ""; position: absolute; width: 560px; height: 560px; border-radius: 50%; bottom: -260px; right: -140px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(10,42,143,0.6), transparent 70%); }
.uno-bg { position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,0.12) 1px, transparent 1.4px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(130% 120% at 75% 12%, #000, transparent 72%);
  mask-image: radial-gradient(130% 120% at 75% 12%, #000, transparent 72%); }
.uno-inner { position: relative; max-width: 1300px; margin: 0 auto; padding: 0 24px; }
.uno-head { text-align: center; max-width: 740px; margin: 0 auto 56px; }
.uno-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,0.85); }
.uno-title { font-size: clamp(30px,4.4vw,52px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; color: #fff; margin-top: 14px; }
.uno-sub { font-size: clamp(16px,1.6vw,19px); color: rgba(255,255,255,0.84); line-height: 1.5; margin-top: 18px; }
.uno-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
@media (max-width: 900px) { .uno-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } }
.uno-card { position: relative; overflow: hidden; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 24px; padding: 34px 30px;
  transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease); }
.uno-card:hover { transform: translateY(-6px); background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.3); }
.uno-num { position: absolute; top: 16px; right: 22px; font-size: 62px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: rgba(255,255,255,0.1); }
.uno-ic { width: 60px; height: 60px; border-radius: 17px; display: grid; place-items: center; box-shadow: 0 12px 26px -10px rgba(0,0,0,0.5); }
.uno-ic svg { width: 30px; height: 30px; }
.ic-build { background: linear-gradient(150deg,#46a6ff,#1062e6); }
.ic-grow  { background: linear-gradient(150deg,#27c7d8,#0a8aa8); }
.ic-run   { background: linear-gradient(150deg,#9c7dff,#6a3df0); }
.uno-card h3 { font-size: 24px; font-weight: 700; color: #fff; letter-spacing: -0.02em; margin-top: 22px; }
.uno-card > p { font-size: 15px; color: rgba(255,255,255,0.84); line-height: 1.5; margin-top: 10px; }
.uno-links { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
.uno-links a { display: flex; align-items: center; justify-content: space-between; padding: 12px 15px; border-radius: 12px; background: rgba(255,255,255,0.07); color: #fff; font-size: 14.5px; font-weight: 500; transition: background .15s var(--ease); }
.uno-links a::after { content: "\2192"; opacity: .5; transition: transform .15s var(--ease), opacity .15s var(--ease); }
.uno-links a:hover { background: rgba(255,255,255,0.17); }
.uno-links a:hover::after { transform: translateX(3px); opacity: 1; }

/* ---------------- "Under one roof" big feature visuals (white section) ---------------- */
.feat-frame { border-radius: 26px; padding: clamp(20px,3vw,40px); background: linear-gradient(160deg, var(--brand-blue-soft) 0%, #f6f9ff 100%); box-shadow: var(--sh-card); }
.feat-frame.f-grow { background: linear-gradient(160deg, #e2f6fb 0%, #f4fbfd 100%); }
.feat-frame.f-run  { background: linear-gradient(160deg, #efeaff 0%, #f8f5ff 100%); }
.feat-shot { background: #fff; border-radius: 16px; box-shadow: var(--sh-lift); overflow: hidden; }
.shot-bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--br-hairline); background: var(--bg-near); }
.shot-bar i { width: 10px; height: 10px; border-radius: 50%; background: #e0ddea; }
.shot-bar i.on { background: var(--brand-blue); }
.shot-bar small { margin-left: 8px; font-size: 12px; color: var(--fg-warm); font-weight: 500; }
.shot-body { padding: clamp(16px,2.2vw,24px); }
.feat-metric { flex: 1; background: var(--bg-light); border-radius: 12px; padding: 14px; }
.feat-metric .k { font-size: 11.5px; color: var(--fg-warm); font-weight: 600; }
.feat-metric .v { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--fg-black); margin-top: 2px; }
.feat-status { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-radius: 11px; background: var(--bg-light); }
.feat-status + .feat-status { margin-top: 8px; }

/* ---------------- "Under one roof" — sticky stacking cards ---------------- */
.stack { position: relative; }
.stack-card { position: sticky; background: #fff; border-radius: 28px; box-shadow: var(--sh-lift); padding: clamp(26px,3.5vw,52px); }
.stack-card:nth-child(1) { top: 90px; }
.stack-card:nth-child(2) { top: 106px; margin-top: clamp(44px,6vw,76px); }
.stack-card:nth-child(3) { top: 122px; margin-top: clamp(44px,6vw,76px); }
.sc-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(30px,4.5vw,60px); align-items: center; }
@media (max-width: 920px) {
  .stack-card { position: static; margin-top: 26px; }
  .stack-card:nth-child(1) { margin-top: 0; }
  .sc-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (prefers-reduced-motion: reduce) { .stack-card { position: static; } }

/* ---- Stack cards: service icons top, short copy at bottom ---- */
.sc-grid { align-items: stretch; }
.sc-text { display: flex; flex-direction: column; min-height: 320px; }
.sc-icons { display: flex; gap: 12px; }
.sc-ic {
  width: 54px; height: 54px; border-radius: 15px;
  display: grid; place-items: center;
  background: var(--ic-bg, var(--brand-blue-soft));
  color: var(--ic, var(--brand-blue));
  border: 1px solid color-mix(in srgb, var(--ic, var(--brand-blue)) 22%, #fff);
  transition: background .16s var(--ease), color .16s var(--ease), transform .16s var(--ease), box-shadow .16s var(--ease);
}
.sc-ic:hover {
  background: var(--ic, var(--brand-blue)); color: #fff; transform: translateY(-2px);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--ic, var(--brand-blue)) 32%, transparent);
}
.sc-ic svg { width: 27px; height: 27px; }
.sc-bottom { margin-top: auto; padding-top: 48px; }
.sc-h { font-size: clamp(28px,3.4vw,42px); font-weight: 700; color: var(--fg-dark); letter-spacing: -0.02em; line-height: 1.05; }
.sc-d { font-size: clamp(17px,1.55vw,19.5px); color: var(--fg-mid); margin-top: 16px; line-height: 1.6; max-width: 500px; }
@media (max-width: 920px) {
  .sc-text { min-height: 0; }
  .sc-bottom { padding-top: 28px; }
}

/* ---- Stack card backgrounds tinted to match each image frame ---- */
.stack-card:nth-child(1) { background: linear-gradient(160deg, #eef4ff 0%, #f7faff 100%); }
.stack-card:nth-child(2) { background: linear-gradient(160deg, #e8f8fb 0%, #f5fcfd 100%); }
.stack-card:nth-child(3) { background: linear-gradient(160deg, #f1ecff 0%, #f9f6ff 100%); }
/* lift image frames off the now-tinted card so they still read */
.stack-card .feat-frame { box-shadow: 0 10px 30px rgba(15,23,42,.08); }
.stack-card:nth-child(1) .feat-frame { background: linear-gradient(160deg, #dfeaff 0%, #eef4ff 100%); }
.stack-card:nth-child(2) .feat-frame { background: linear-gradient(160deg, #d4f1f7 0%, #e8f8fb 100%); }
.stack-card:nth-child(3) .feat-frame { background: linear-gradient(160deg, #e6dcff 0%, #f1ecff 100%); }

/* ---- Stack cards: professional polish pass ---- */
.stack { counter-reset: scard; }
.stack-card {
  counter-increment: scard;
  border-radius: 30px;
  padding: clamp(30px,4vw,56px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent,#1e6ef5) 16%, #fff);
  box-shadow: 0 1px 2px rgba(16,24,40,.04),
              0 22px 60px -26px color-mix(in srgb, var(--accent,#1e6ef5) 38%, transparent);
}
/* per-card accent matches each card's tint family */
.stack-card:nth-child(1) { --accent: #1e6ef5; }
.stack-card:nth-child(2) { --accent: #0bb0c4; }
.stack-card:nth-child(3) { --accent: #7c5cff; }

/* numbered index, top-right */
.stack-card::before {
  content: "0" counter(scard) " / 03";
  position: absolute;
  top: clamp(30px,4vw,56px);
  right: clamp(30px,4vw,56px);
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 12.5px; font-weight: 600; letter-spacing: .14em;
  color: var(--accent); opacity: .6;
}

/* refined icon tiles */
.sc-ic { box-shadow: 0 1px 2px rgba(16,24,40,.05); }

/* CTA link */
.sc-cta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 24px;
  font-size: 15px; font-weight: 600; color: var(--accent);
  transition: gap .16s var(--ease);
}
.sc-cta:hover { gap: 13px; }
.sc-cta svg { width: 16px; height: 16px; }

/* image frame refinement */
.stack-card .feat-frame {
  border: 1px solid color-mix(in srgb, var(--accent) 18%, #fff);
  box-shadow: 0 16px 40px -18px color-mix(in srgb, var(--accent) 45%, transparent);
}
.feat-shot { box-shadow: 0 10px 30px -10px rgba(16,24,40,.22); }

/* ===================== Service pillars: alternating feature rows ===================== */
.pillars { display: flex; flex-direction: column; gap: clamp(26px, 3.4vw, 44px); }

/* neutralise the old sticky-stack behaviour & numbering */
.stack-card.pillar { position: static; top: auto; margin: 0; }
.stack-card.pillar::before { content: none !important; }

/* card chrome (kept from polish pass; gentle hover lift) */
.pillar { transition: transform .32s var(--ease), box-shadow .32s var(--ease); }
.pillar:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(16,24,40,.05),
              0 34px 70px -30px color-mix(in srgb, var(--accent,#1e6ef5) 46%, transparent);
}

/* two-column row, image and text balanced; reverse every other row */
.pillar .sc-grid { grid-template-columns: 1fr 1.04fr; gap: clamp(34px,5vw,72px); align-items: center; }
.pillar.pillar-rev .sc-text   { order: 2; }
.pillar.pillar-rev .feat-frame { order: 1; }

/* text column: natural top-down flow (icons → heading → desc → cta) */
.pillar .sc-text { display: block; min-height: 0; }
.pillar .sc-icons { margin-bottom: 26px; }
.pillar .sc-bottom { margin-top: 0; padding-top: 0; }
.pillar .sc-h { font-size: clamp(30px,3.2vw,44px); }

/* single-column on tablet/phone, image below text */
@media (max-width: 920px) {
  .pillar .sc-grid { grid-template-columns: 1fr; gap: 30px; }
  .pillar.pillar-rev .sc-text   { order: 1; }
  .pillar.pillar-rev .feat-frame { order: 2; }
  .pillar:hover { transform: none; }
}

/* ===================== Segmented showcase (Everything under one roof) ===================== */
.seg {
  display: inline-flex; gap: 4px; margin-top: 36px;
  padding: 5px; background: #eceef3; border: 1px solid var(--br-hairline);
  border-radius: 14px;
}
.seg-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 22px; border: none; background: transparent; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 600; color: var(--fg-warm);
  border-radius: 10px;
  transition: background .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
}
.seg-btn svg { width: 18px; height: 18px; }
.seg-btn:hover { color: var(--fg-dark); }
.seg-btn.active {
  background: #fff; color: var(--seg, #1e6ef5);
  box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 6px 16px -6px rgba(16,24,40,.2);
}

.showcase { position: relative; }
.show-panel { display: none; }
.show-panel.active { display: block; animation: showIn .4s var(--ease); }
@keyframes showIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.show-grid {
  display: grid; grid-template-columns: 1fr 1.06fr; gap: clamp(34px,5vw,72px);
  align-items: center;
  background: #fff; border: 1px solid var(--br-hairline); border-radius: 28px;
  padding: clamp(30px,4vw,56px);
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 30px 64px -34px rgba(16,24,40,.22);
}
.show-eyebrow {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, #fff);
  padding: 6px 13px; border-radius: 999px;
}
.show-h { font-size: clamp(28px,3vw,40px); font-weight: 700; letter-spacing: -.02em; line-height: 1.07; color: var(--fg-dark); margin-top: 16px; }
.show-d { font-size: clamp(16px,1.35vw,18px); color: var(--fg-mid); line-height: 1.6; margin-top: 14px; max-width: 480px; }

.show-services { display: flex; flex-direction: column; gap: 4px; margin-top: 24px; }
.svc-chip {
  display: flex; align-items: center; gap: 13px;
  padding: 9px 12px; margin: 0 -12px; border-radius: 13px;
  font-size: 15px; font-weight: 600; color: var(--fg-dark);
  transition: background .16s var(--ease);
}
.svc-chip:hover { background: var(--bg-light); }
.svc-ic {
  width: 40px; height: 40px; border-radius: 11px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--ic-bg); color: var(--ic);
  border: 1px solid color-mix(in srgb, var(--ic) 20%, #fff);
  transition: background .16s var(--ease), color .16s var(--ease);
}
.svc-ic svg { width: 21px; height: 21px; }
.svc-chip:hover .svc-ic { background: var(--ic); color: #fff; }
.svc-name { flex: 1; }
.svc-arr { width: 16px; height: 16px; color: var(--ic); opacity: 0; transform: translateX(-5px); transition: opacity .16s var(--ease), transform .16s var(--ease); }
.svc-chip:hover .svc-arr { opacity: 1; transform: none; }

.show-cta { display: flex; align-items: center; gap: 22px; margin-top: 30px; flex-wrap: wrap; }

/* showcase image frame: subtle accent tie-in */
.show-grid .feat-frame { border: 1px solid color-mix(in srgb, var(--accent) 16%, #fff); }

@media (max-width: 920px) {
  .seg { display: flex; width: 100%; margin-top: 28px; }
  .seg-btn { flex: 1; justify-content: center; padding: 11px 6px; }
  .show-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* showcase: image column = half width, full height of the panel */
.show-grid { grid-template-columns: 1fr 1fr; align-items: stretch; }
.show-grid .feat-frame {
  height: 100%;
  display: flex; flex-direction: column; justify-content: center;
}
@media (max-width: 920px) {
  .show-grid { grid-template-columns: 1fr; align-items: start; }
  .show-grid .feat-frame { height: auto; }
}

/* showcase image: remove top/bottom padding so the mockup fills the frame vertically */
.show-grid .feat-frame { padding-top: 0; padding-bottom: 0; justify-content: stretch; }
.show-grid .feat-shot { flex: 1 1 auto; width: 100%; display: flex; flex-direction: column; }
.show-grid .feat-shot .shot-body { flex: 1 1 auto; }
@media (max-width: 920px) {
  .show-grid .feat-frame { padding-top: clamp(20px,3vw,40px); padding-bottom: clamp(20px,3vw,40px); }
  .show-grid .feat-shot { flex: 0 0 auto; display: block; }
}

/* showcase: right visual as a full-bleed background — 50% width, 100% height, flush to card edges */
.show-grid {
  --pad: clamp(30px,4vw,56px);
  padding: var(--pad);
  overflow: hidden;
  align-items: stretch;
}
.show-grid .feat-frame {
  margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) calc(-1 * var(--pad)) 0;
  height: auto;
  border: none;
  border-radius: 0;
  padding: clamp(28px,3.4vw,48px);
  display: flex; align-items: center; justify-content: center;
}
.show-grid .feat-shot { flex: 0 0 auto; width: 100%; display: block; }
@media (max-width: 920px) {
  .show-grid .feat-frame {
    margin: 0;
    border-radius: 18px;
    padding: clamp(20px,3vw,40px);
  }
}

/* ===================== Why Ainygo: before -> after comparison ===================== */
.cmp {
  margin-top: 52px; background: #fff;
  border: 1px solid var(--br-hairline); border-radius: 24px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 30px 60px -38px rgba(16,24,40,.28);
}
.cmp-row { display: grid; grid-template-columns: 1fr 64px 1fr; align-items: stretch; }
.cmp-row + .cmp-row { border-top: 1px solid var(--br-hairline); }
.cmp-cell { display: flex; align-items: center; gap: 12px; padding: 17px 24px; font-size: 15.5px; line-height: 1.4; }
.cmp-cell.before { color: var(--fg-warm); }
.cmp-cell.after { background: #eef4ff; color: var(--fg-dark); font-weight: 600; }
.cmp-mid { display: grid; place-items: center; }
.cmp-arrow { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid var(--br-hairline); color: var(--brand-blue); box-shadow: 0 1px 2px rgba(16,24,40,.07); }
.cmp-arrow svg { width: 15px; height: 15px; }
.cmp-ic { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; }
.cmp-ic svg { width: 12px; height: 12px; }
.cmp-ic.x { background: #fbe3e4; color: #d64550; }
.cmp-ic.c { background: #d8f0e0; color: #15803d; }
.cmp-head .cmp-cell { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding-top: 16px; padding-bottom: 16px; }
.cmp-head .cmp-cell.before { color: var(--fg-warm); }
.cmp-head .cmp-cell.after { color: var(--brand-blue-deep); }

/* CTA shared by this section */
.vs-cta { text-align: center; margin-top: 40px; }
.vs-trust { margin-top: 14px; font-size: 13.5px; color: var(--fg-warm); font-weight: 500; }

@media (max-width: 760px) {
  .cmp-row { grid-template-columns: 1fr; }
  .cmp-mid { display: none; }
  .cmp-cell.before { padding-bottom: 9px; }
  .cmp-cell.after { padding-top: 9px; }
}

/* ---- Why Ainygo: section band + card polish ---- */
.bg-cool { background: linear-gradient(180deg, #f7faff 0%, #edf2fb 100%); }

.cmp { border-radius: 26px; box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 44px 84px -46px rgba(30,110,245,.42); }
.cmp-cell { padding: 19px 28px; font-size: 16px; }
.cmp-cell.after {
  background: #eaf1ff;
  box-shadow: inset 1px 0 0 color-mix(in srgb, var(--brand-blue) 22%, transparent);
}
.cmp-head .cmp-cell { padding-top: 18px; padding-bottom: 18px; }
.cmp-head .cmp-cell.after {
  box-shadow: inset 1px 0 0 color-mix(in srgb, var(--brand-blue) 22%, transparent),
              inset 0 3px 0 var(--brand-blue);
}
.cmp-vs {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--fg-dark); color: #fff; font-size: 11px; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase;
}
@media (max-width: 760px) {
  .cmp-cell.after { box-shadow: none; }
  .cmp-head .cmp-cell.after { box-shadow: inset 0 3px 0 var(--brand-blue); }
}

/* ===================== Type scale: -15% for default text below the hero ===================== */
/* Scoped to page content sections (excludes hero, nav, consent & footer which sit outside). */
#main section:not(.hero-aura) p          { font-size: 16px; }
#main section:not(.hero-aura) .body-lg   { font-size: 17px; }
#main section:not(.hero-aura) .body-md   { font-size: 13.6px; }
#main section:not(.hero-aura) .body-sm   { font-size: 12.75px; }
#main section:not(.hero-aura) .link-blue { font-size: 11.9px; }
#main section:not(.hero-aura) .btn       { font-size: 15px; }
#main section:not(.hero-aura) li         { font-size: 13.6px; }
@media (max-width: 1024px) {
  #main section:not(.hero-aura) .body-lg { font-size: 14px; }
}

/* ===================== Service cards: 2-up + 1 full width, image, tinted, clickable ===================== */
.svc-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 52px; }
.svc-card {
  display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--ic,#1e6ef5) 7%, #fff);
  border: 1px solid color-mix(in srgb, var(--ic,#1e6ef5) 16%, #fff);
  border-radius: 20px; overflow: hidden;
  color: inherit; text-decoration: none;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.svc-card:hover { transform: translateY(-4px); box-shadow: 0 26px 52px -28px color-mix(in srgb, var(--ic,#1e6ef5) 42%, transparent); }
.svc-img { width: 100%; height: 168px; object-fit: cover; display: block; }
.svc-body { padding: 26px 30px 30px; display: flex; flex-direction: column; }
.svc-body h3 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--fg-dark); }
.svc-body p { margin-top: 12px; color: var(--fg-mid); line-height: 1.6; }
.svc-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-weight: 600; color: var(--ic); transition: gap .16s var(--ease); }
.svc-card:hover .svc-more { gap: 11px; }
/* full-width card spans both columns: image 30% on the left, text right */
.svc-card.svc-wide { grid-column: 1 / -1; flex-direction: row; align-items: stretch; }
.svc-card.svc-wide .svc-img { width: 30%; height: auto; min-height: 210px; }
.svc-card.svc-wide .svc-body { flex: 1; justify-content: center; padding: 32px 38px; }
@media (max-width: 760px) {
  .svc-cards { grid-template-columns: 1fr; }
  .svc-card.svc-wide { flex-direction: column; }
  .svc-card.svc-wide .svc-img { width: 100%; min-height: 0; height: 168px; }
}

/* ===================== How we work (process steps) ===================== */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 52px; text-align: left; }
.step { background: #fff; border: 1px solid var(--br-hairline); border-radius: 18px; padding: 26px; }
.step-n { font-family: "Geist Mono", ui-monospace, SFMono-Regular, monospace; font-size: 14px; font-weight: 700; color: var(--brand-blue); }
.step h3 { font-size: 17px; font-weight: 700; color: var(--fg-dark); margin-top: 14px; }
.step p { margin-top: 10px; color: var(--fg-mid); line-height: 1.55; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .steps { grid-template-columns: 1fr; } }

/* ===================== Why Ainygo benefit cards ===================== */
.why-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 52px; }
.why-card {
  background: #fff; border: 1px solid var(--br-hairline); border-radius: 20px; padding: 28px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.why-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -28px rgba(16,24,40,.3); }
.why-ic {
  width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center;
  background: var(--ic-bg); color: var(--ic);
  border: 1px solid color-mix(in srgb, var(--ic) 20%, #fff);
}
.why-ic svg { width: 24px; height: 24px; }
.why-card h3 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--fg-dark); margin-top: 18px; }
.why-card p { margin-top: 10px; color: var(--fg-mid); line-height: 1.55; }
@media (max-width: 980px) { .why-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .why-cards { grid-template-columns: 1fr; } }

/* ===================== Why digital presence (two column) ===================== */
.container-full { width: 100%; max-width: 1700px; margin: 0 auto; padding: 0 clamp(24px,5vw,72px); }
.dp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,6vw,90px); align-items: center; }
.dp-img {
  width: 100%; height: 150px; object-fit: cover; object-position: center;
  border-radius: 16px; display: block;
  border: 1px solid var(--br-hairline);
  box-shadow: 0 22px 44px -28px rgba(16,24,40,.28);
}
.dp-h { font-size: clamp(28px,3.4vw,44px); font-weight: 700; letter-spacing: -.02em; line-height: 1.08; color: var(--fg-dark); margin-top: 30px; }
.dp-right .eyebrow { margin-bottom: 16px; }
.dp-right p { color: var(--fg-mid); line-height: 1.7; }
.dp-right p + p { margin-top: 18px; }
.dp-right .btn { margin-top: 30px; }
@media (max-width: 900px) { .dp-grid { grid-template-columns: 1fr; gap: 34px; } }

/* ===================== Category switcher: more prominent ===================== */
.seg {
  display: inline-flex; gap: 6px; margin-top: 42px;
  padding: 6px; background: #fff;
  border: 1px solid var(--br-hairline); border-radius: 999px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 14px 34px -18px rgba(16,24,40,.28);
}
.seg-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 30px; border: none; background: transparent; cursor: pointer;
  font: inherit; font-size: 15.5px; font-weight: 600; color: var(--fg-warm);
  border-radius: 999px;
  transition: background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.seg-btn svg { width: 19px; height: 19px; transition: transform .2s var(--ease); }
.seg-btn:hover { color: var(--fg-dark); background: var(--bg-light); }
.seg-btn.active {
  color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--seg,#1e6ef5) 88%, #fff), var(--seg,#1e6ef5));
  box-shadow: 0 8px 20px -5px color-mix(in srgb, var(--seg,#1e6ef5) 55%, transparent);
}
.seg-btn.active svg { transform: scale(1.06); }
@media (max-width: 920px) {
  .seg { display: flex; width: 100%; gap: 4px; }
  .seg-btn { flex: 1; justify-content: center; padding: 12px 8px; }
}

/* ===================== Industries: orbit animation ===================== */
.who-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,5vw,72px); align-items: center; }
.who-h { font-size: clamp(40px,5.2vw,72px); font-weight: 700; letter-spacing: -.02em; line-height: 1.04; color: var(--fg-dark); margin-top: 16px; }
@media (max-width: 900px) {
  .who-grid { grid-template-columns: 1fr; gap: 44px; text-align: center; }
  .who-text .body-lg { margin-left: auto; margin-right: auto; }
}
.orbits-block { display: flex; flex-direction: column; align-items: center; }
.orbits { position: relative; width: min(100%, 520px); aspect-ratio: 1; margin: 0 auto; }
.orbit {
  position: absolute; border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--brand-blue) 26%, #fff);
  will-change: transform;
}
.orbit-hub {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 132px; height: 132px; border-radius: 50%;
  background: #fff; border: 1px solid var(--br-hairline);
  box-shadow: 0 16px 40px -14px rgba(16,24,40,.34);
  display: grid; place-items: center; z-index: 3;
}
.orbit-hub img { width: 84px; height: auto; display: block; }
/* orbiting chip: outer centers on the point, inner counter-rotates to stay upright */
.orb-pos { position: absolute; transform: translate(-50%, -50%); }
.orb-ic { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 88px; will-change: transform; }
.orb-bub {
  width: 54px; height: 54px; border-radius: 50%;
  background: #fff; border: 1px solid var(--br-hairline);
  box-shadow: 0 8px 18px -6px rgba(16,24,40,.22);
  display: grid; place-items: center; color: inherit;
}
.orb-bub svg { width: 26px; height: 26px; }
.orb-lbl { font-size: 11.5px; font-weight: 600; color: var(--fg-dark); text-align: center; line-height: 1.2; background: rgba(247,248,250,.94); padding: 2px 8px; border-radius: 7px; }
@keyframes orbspin  { to { transform: rotate(360deg); } }
@keyframes orbspinr { to { transform: rotate(-360deg); } }
.ind-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) { .orbit, .orb-ic { animation: none !important; } }

/* ===================== Who we help: black band ===================== */
.who-dark { background: #0a0d14; }
.who-dark .eyebrow { color: #ffffff; }
.who-dark .who-h { color: #ffffff; }
.who-dark .body-lg { color: #ffffff; }
.who-dark .orbit { border-color: rgba(255,255,255,.85); }
.who-dark .orbit-hub { background: #fff; border-color: rgba(255,255,255,.5); box-shadow: 0 18px 46px -14px rgba(0,0,0,.6); }
.who-dark .orb-bub { background: #fff; border-color: rgba(255,255,255,.4); box-shadow: 0 10px 22px -8px rgba(0,0,0,.55); }
.who-dark .orb-lbl { color: #fff; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.12); }

/* ===================== How we work: vertical timeline (restored) ===================== */
.tl { position: relative; max-width: 940px; margin: 56px auto 0; }
.tl-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 4px; transform: translateX(-50%); background: linear-gradient(180deg, #1e6ef5, #7c5cff, #0d9488, #16a34a); border-radius: 4px; z-index: 0; }
.tl-dot { position: absolute; left: 50%; top: 0; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--brand-blue); transform: translate(-50%,-50%); box-shadow: 0 0 0 5px rgba(30,110,245,.15), 0 0 18px 2px rgba(30,110,245,.5); animation: tlmovev 8s ease-in-out infinite; }
@keyframes tlmovev { 0%,100% { top: 0; } 50% { top: 100%; } }
.tl-step { position: relative; display: grid; grid-template-columns: 1fr 88px 1fr; align-items: center; column-gap: 28px; padding: 24px 0; }
.tl-node { grid-column: 2; z-index: 2; width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; color: #fff; border: 4px solid #fff; background: linear-gradient(150deg, color-mix(in srgb, var(--c) 80%, #fff), var(--c)); box-shadow: 0 12px 26px -8px color-mix(in srgb, var(--c) 60%, transparent), 0 0 0 8px color-mix(in srgb, var(--c) 8%, transparent); }
.tl-node svg { width: 31px; height: 31px; }
.tl-card { position: relative; width: min(100%, 380px); background: color-mix(in srgb, var(--c) 5%, #fff); border: 1px solid color-mix(in srgb, var(--c) 16%, #fff); border-radius: 18px; padding: 26px 28px 27px; box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 18px 40px -30px rgba(16,24,40,.34); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.tl-card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -26px color-mix(in srgb, var(--c) 40%, transparent); }
.tl-step.left .tl-card { grid-column: 1; justify-self: end; border-right: 3px solid var(--c); }
.tl-step.right .tl-card { grid-column: 3; justify-self: start; border-left: 3px solid var(--c); }
.tl-step-label { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c); }
.tl-card h3 { font-size: 18.5px; font-weight: 700; letter-spacing: -.01em; color: var(--fg-dark); margin-top: 9px; }
.tl-card p { margin-top: 9px; color: var(--fg-mid); line-height: 1.6; }
.tl-node::before { content: ''; position: absolute; top: 50%; transform: translateY(-50%); height: 3px; border-radius: 2px; width: 30px; background: var(--c); }
.tl-step.left .tl-node::before { right: 100%; }
.tl-step.right .tl-node::before { left: 100%; }
@media (max-width: 720px) {
  .tl { margin-top: 40px; }
  .tl-line { left: 33px; }
  .tl-dot { display: none; }
  .tl-step { grid-template-columns: 78px 1fr; column-gap: 20px; padding: 14px 0; }
  .tl-node { grid-column: 1; }
  .tl-step.left .tl-card, .tl-step.right .tl-card { grid-column: 2; justify-self: start; width: 100%; border-left: 3px solid var(--c); border-right: 1px solid var(--br-hairline); }
  .tl-node::before { display: none; }
}
@media (prefers-reduced-motion: reduce) { .tl-dot { animation: none; } }

/* kill the legacy .tl-card::after connector line bleeding from style.css */
.tl-step .tl-card::after { content: none !important; display: none !important; }

/* ===================== Professional polish pass ===================== */
/* branded text selection */
::selection { background: rgba(30,110,245,.16); color: #083abd; }
::-moz-selection { background: rgba(30,110,245,.16); color: #083abd; }

/* balanced headings + orphan-free body copy on the new sections */
h2, h3, .display-sm, .dp-h, .who-h, .show-h, .vs-h, .svc-body h3, .tl-card h3 { text-wrap: balance; }
.body-lg, .svc-body p, .dp-right p, .tl-card p, .show-d, .vs-trust { text-wrap: pretty; }

/* tactile button press */
.btn:active { transform: translateY(1px); }

/* clickable service cards: clear cursor + keyboard focus */
.svc-card { cursor: pointer; }
.svc-card:focus-visible, .seg-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(30,110,245,.4); }

/* crisper, evenly-rounded media frames */
.dp-img, .svc-img { backface-visibility: hidden; }

/* ===================== Final CTA: bold branded band ===================== */
.cta-band {
  position: relative; overflow: hidden;
  border-radius: 30px;
  padding: clamp(56px,7vw,104px) 32px;
  background: radial-gradient(130% 150% at 50% -10%, #2a7bff 0%, #1a55d6 42%, #0b2a7a 100%);
  box-shadow: 0 44px 90px -44px rgba(11,42,122,.65);
  isolation: isolate;
}
.cta-glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(46% 60% at 82% 12%, rgba(255,255,255,.22), transparent 60%),
    radial-gradient(40% 55% at 12% 95%, rgba(120,180,255,.30), transparent 60%);
}
.cta-inner { position: relative; z-index: 1; }
.cta-band .eyebrow { color: #b9d3ff; }
.cta-band h2 { color: #ffffff; letter-spacing: -.02em; }
.cta-band .body-lg { color: rgba(255,255,255,.82); }
.cta-band .caption { color: rgba(255,255,255,.62); }
.cta-ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); }
.cta-ghost:hover { background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.85); }

/* ===================== Polish: hero aurora (cooler, smoother, on-brand) ===================== */
.hero-aura-bg {
  filter: blur(46px);
  background:
    radial-gradient(46% 54% at 26% 36%, rgba(110,155,255,0.30), transparent 64%),
    radial-gradient(42% 50% at 72% 33%, rgba(150,130,246,0.24), transparent 64%),
    radial-gradient(52% 56% at 52% 66%, rgba(96,200,235,0.17), transparent 66%),
    radial-gradient(34% 42% at 84% 60%, rgba(120,160,255,0.16), transparent 64%);
  -webkit-mask-image: radial-gradient(84% 80% at 50% 40%, #000 52%, transparent 100%);
  mask-image: radial-gradient(84% 80% at 50% 40%, #000 52%, transparent 100%);
}

/* ===================== Polish: larger, balanced orbit ===================== */
.who-grid { grid-template-columns: 1fr 1.08fr; }
.orbits { width: min(100%, 580px); }
@media (max-width: 900px) { .who-grid { grid-template-columns: 1fr; } }

/* ===================== Hero product showcase ===================== */
.hero-stage { position: relative; z-index: 1; margin-top: clamp(40px,5vw,66px); }
.hero-stage img { display: block; width: 100%; max-width: 1040px; margin: 0 auto; }
@media (max-width: 600px) { .hero-stage { margin-top: 34px; } }

/* ===================== Service page template ===================== */
.sp-hero { position: relative; overflow: hidden; padding-top: 200px !important; padding-bottom: 100px !important; background: #fbfbfd; }
.sp-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(36px,5vw,72px); align-items: center; }
.sp-h1 { font-size: clamp(34px,5vw,58px); font-weight: 700; letter-spacing: -.025em; line-height: 1.05; color: var(--fg-dark); margin-top: 14px; }
.sp-sub { margin-top: 20px; max-width: 560px; }
.sp-points { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sp-points li { display: flex; align-items: flex-start; gap: 11px; font-size: 15.5px; font-weight: 500; color: var(--fg-dark); }
.sp-tick { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 14%, #fff); color: var(--accent); }
.sp-tick svg { width: 12px; height: 12px; }
.sp-cta { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.sp-wa { background: #25d366; color: #fff; gap: 9px; } .sp-wa:hover { background: #1eb858; color: #fff; }
.sp-talk { gap: 10px; }
.sp-livedot { width: 8px; height: 8px; border-radius: 50%; background: #2bd576; flex: 0 0 auto; animation: spdotpulse 2s ease-in-out infinite; }
@keyframes spdotpulse { 0%,100% { box-shadow: 0 0 0 3px rgba(43,213,118,.25); } 50% { box-shadow: 0 0 0 7px rgba(43,213,118,0); } }
@media (prefers-reduced-motion: reduce) { .sp-livedot { animation: none; box-shadow: 0 0 0 3px rgba(43,213,118,.25); } }
.sp-hero-art { display: flex; justify-content: center; }
.sp-hero-img { width: 100%; max-width: 520px; border-radius: 20px; box-shadow: 0 30px 64px -30px color-mix(in srgb, var(--accent) 45%, transparent); }

/* prose */
.sp-prose { color: var(--fg-mid); }
.sp-prose h2 { font-size: clamp(26px,3vw,38px); font-weight: 700; letter-spacing: -.02em; color: var(--fg-dark); margin: 38px 0 0; }
.sp-prose h2:first-child { margin-top: 0; }
.sp-prose h3 { font-size: 21px; font-weight: 700; color: var(--fg-dark); margin: 28px 0 0; }
.sp-prose p { margin-top: 16px; line-height: 1.75; }
.sp-prose ul { margin: 16px 0 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.sp-prose ul li { position: relative; padding-left: 28px; line-height: 1.6; }
.sp-prose ul li::before { content: ''; position: absolute; left: 4px; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-blue); }
.sp-prose a { color: var(--brand-blue); font-weight: 600; }
.sp-prose strong { color: var(--fg-dark); }

/* feature cards */
.sp-features { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 52px; }
.sp-feature { background: #fff; border: 1px solid var(--br-hairline); border-radius: 18px; padding: 28px; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.sp-feature:hover { transform: translateY(-4px); box-shadow: 0 26px 52px -30px color-mix(in srgb, var(--accent,#1e6ef5) 40%, transparent); }
.sp-feat-ic { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; background: var(--abg); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 20%, #fff); }
.sp-feat-ic svg { width: 24px; height: 24px; }
.sp-feature h3 { font-size: 18.5px; font-weight: 700; letter-spacing: -.01em; color: var(--fg-dark); margin-top: 18px; }
.sp-feature p { margin-top: 10px; color: var(--fg-mid); line-height: 1.6; }

/* steps — connected stepper */
.sp-steps { position: relative; display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; margin-top: 60px; }
.sp-steps::after { content: ""; position: absolute; top: 27px; left: 12%; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); transform: translate(-50%,-50%); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 15%, transparent), 0 0 18px 2px color-mix(in srgb, var(--accent) 50%, transparent); z-index: 2; animation: spstepdot 8s ease-in-out infinite; }
@keyframes spstepdot { 0%,100% { left: 12%; } 50% { left: 88%; } }
.sp-step { position: relative; display: flex; flex-direction: column; }
.sp-step-head { position: relative; display: flex; justify-content: center; margin-bottom: 24px; }
.sp-step-head::before { content: ""; position: absolute; top: 50%; left: 50%; width: calc(100% + 24px); height: 2px; transform: translateY(-50%); z-index: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 42%, #fff), color-mix(in srgb, var(--accent) 10%, #fff)); }
.sp-step:last-child .sp-step-head::before { display: none; }
.sp-step-n { position: relative; z-index: 1; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #fff; border: 2px solid color-mix(in srgb, var(--accent) 28%, #fff); color: var(--accent); font-family: "Geist Mono", ui-monospace, monospace; font-weight: 700; font-size: 17px; box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--accent) 60%, transparent); transition: border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease); }
.sp-step-card { flex: 1; background: #fff; border: 1px solid var(--br-hairline); border-radius: 18px; padding: 26px 24px; text-align: center; box-shadow: 0 16px 38px -28px rgba(16,24,40,.42); transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.sp-step-card h3 { font-size: 17px; font-weight: 700; color: var(--fg-dark); }
.sp-step-card p { margin-top: 10px; color: var(--fg-mid); line-height: 1.6; font-size: 14.5px; }
.sp-step:hover .sp-step-card { transform: translateY(-5px); box-shadow: 0 28px 54px -30px rgba(16,24,40,.5); border-color: color-mix(in srgb, var(--accent) 32%, #fff); }
.sp-step:hover .sp-step-n { background: var(--accent); border-color: var(--accent); color: #fff; }

/* why list */
.sp-why { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px 40px; margin-top: 50px; }
.sp-why-item { display: flex; gap: 14px; align-items: flex-start; }
.sp-why-tick { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 14%, #fff); color: var(--accent); margin-top: 2px; }
.sp-why-tick svg { width: 15px; height: 15px; }
.sp-why-item h3 { font-size: 18px; font-weight: 700; color: var(--fg-dark); }
.sp-why-item p { margin-top: 7px; color: var(--fg-mid); line-height: 1.6; }

/* related */
.sp-related { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 40px; }
.sp-rel { display: inline-flex; align-items: center; gap: 8px; padding: 13px 20px; border-radius: 12px; background: #fff; border: 1px solid var(--br-hairline); font-weight: 600; color: var(--fg-dark); transition: border-color .18s var(--ease), transform .18s var(--ease), color .18s var(--ease); }
.sp-rel:hover { border-color: var(--brand-blue); color: var(--brand-blue); transform: translateY(-2px); }
.sp-rel svg { width: 14px; height: 14px; }

@media (max-width: 900px) {
  .sp-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .sp-hero-art { order: -1; }
  .sp-features { grid-template-columns: repeat(2,1fr); }
  .sp-steps { grid-template-columns: repeat(2,1fr); gap: 28px 24px; }
  .sp-step-head::before, .sp-steps::after { display: none; }
  .sp-why { grid-template-columns: 1fr; }
}
@media (max-width: 600px) { .sp-features { grid-template-columns: 1fr; } .sp-steps { grid-template-columns: 1fr; } }

/* ===================== Service hero: pill + trust + dark card ===================== */
.sp-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--abg); color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; border: 1px solid color-mix(in srgb, var(--accent) 20%, #fff); }
.sp-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.sp-h1 { margin-top: 18px; }
.sp-accent { color: var(--brand-blue); }
.sp-trust { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.sp-trust li { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--fg-mid); }
.sp-trust-chk { display: grid; place-items: center; color: var(--accent); }
.sp-trust-chk svg { width: 15px; height: 15px; }

.sp-card { background: linear-gradient(165deg, #13265f 0%, #0a1733 100%); border: 1px solid rgba(255,255,255,.06); border-radius: 24px; padding: clamp(28px,3vw,40px); color: #fff; box-shadow: 0 44px 90px -44px rgba(10,23,51,.7); }
.sp-card-label { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #7fa8ff; }
.sp-card-value { font-size: clamp(24px,2.6vw,34px); font-weight: 700; letter-spacing: -.02em; line-height: 1.12; margin-top: 12px; color: #fff; }
.sp-card-sub { margin-top: 12px; color: rgba(255,255,255,.72); font-size: 16px; line-height: 1.6; }
.sp-card-divider { height: 1px; background: rgba(255,255,255,.13); margin: 22px 0; }
.sp-card-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.sp-card-points li { position: relative; padding-left: 24px; color: rgba(255,255,255,.92); font-size: 17px !important; line-height: 1.5; }
.sp-card-points li::before { content: ''; position: absolute; left: 2px; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: #4f86ff; box-shadow: 0 0 0 3px rgba(79,134,255,.18); }
.sp-card-note { display: flex; gap: 11px; align-items: flex-start; margin-top: 22px; padding: 15px 18px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.82); font-size: 14px; line-height: 1.5; }
.sp-card-note svg { width: 18px; height: 18px; flex: 0 0 auto; color: #7fa8ff; margin-top: 1px; }

/* ===================== Service hero: inline review widgets ===================== */
.sp-reviews { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 26px; }
.sp-rev { display: inline-flex; align-items: center; gap: 9px; }
.sp-rev-sep { width: 1px; height: 22px; background: var(--br-hairline); }
.sp-stars { position: relative; display: inline-block; line-height: 1; font-size: 15px; letter-spacing: 1.5px; }
.sp-stars-bg { color: #d9dee8; }
.sp-stars-fill { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: var(--c); }
.sp-rev-label { font-size: 13.5px; color: var(--fg-warm); font-weight: 500; white-space: nowrap; }
.sp-rev-label strong { color: var(--fg-dark); font-weight: 700; }
@media (max-width: 480px) { .sp-rev-sep { display: none; } }

/* ===================== Service intro: 3-screenshot collage, premium ===================== */
.sp-intro-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,5vw,80px); align-items: center; }
.sp-intro-visual { position: relative; }
.sp-intro-visual::before { content: ''; position: absolute; inset: -14% -8% -8% -12%; z-index: 0; pointer-events: none; filter: blur(40px);
  background:
    radial-gradient(46% 52% at 38% 36%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 72%),
    radial-gradient(40% 46% at 76% 70%, color-mix(in srgb, #8b5cf6 26%, transparent), transparent 72%); }
.sp-collage { position: relative; z-index: 1; height: clamp(380px,42vw,540px); }
.sp-shot { position: absolute; top: 0; width: 56%; margin: 0; border-radius: 13px; overflow: hidden; background: #fff; border: 1px solid rgba(16,24,40,.08); box-shadow: 0 38px 70px -26px rgba(16,24,40,.5); transition: transform .35s var(--ease); }
.sp-shot-bar { display: flex; gap: 5px; padding: 8px 11px; background: #fafbfd; border-bottom: 1px solid var(--br-hairline); }
.sp-shot-bar i { width: 7px; height: 7px; border-radius: 50%; background: #e1e5ed; }
.sp-shot-bar i:first-child { background: color-mix(in srgb, var(--accent) 70%, #fff); }
.sp-shot img { display: block; width: 100%; }
.sp-shot.s1 { left: 0;   top: 12%; transform: rotate(-7deg); z-index: 1; }
.sp-shot.s2 { left: 22%; top: 0;   transform: rotate(-1deg); z-index: 2; }
.sp-shot.s3 { left: 44%; top: 15%; transform: rotate(6deg);  z-index: 3; }
.sp-intro-visual:hover .sp-shot.s1 { transform: rotate(-9deg) translate(-6px,-4px); }
.sp-intro-visual:hover .sp-shot.s3 { transform: rotate(8deg) translate(6px,-4px); }
.sp-intro-metric { position: absolute; z-index: 5; top: -10px; right: -8px; display: inline-flex; align-items: center; gap: 11px;
  background: #fff; border: 1px solid var(--br-hairline); border-radius: 14px; padding: 11px 15px; box-shadow: 0 22px 46px -18px rgba(16,24,40,.4); animation: spfloat 5.5s ease-in-out infinite; }
.sp-intro-metric-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto; color: #fff;
  background: linear-gradient(150deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #8b5cf6)); }
.sp-intro-metric-ic svg { width: 18px; height: 18px; }
.sp-intro-metric strong { display: block; font-size: 13.5px; color: var(--fg-dark); letter-spacing: -.01em; }
.sp-intro-metric span { font-size: 12px; color: var(--fg-mid); }
.sp-intro-highlights { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.sp-intro-hl { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--fg-dark);
  background: color-mix(in srgb, var(--accent) 8%, #fff); border: 1px solid color-mix(in srgb, var(--accent) 18%, #fff); }
.sp-intro-hl svg { width: 15px; height: 15px; color: var(--accent); flex: 0 0 auto; }
@media (max-width: 520px) { .sp-intro-metric { right: 4px; padding: 9px 12px; } .sp-intro-metric span { display: none; } }
@media (prefers-reduced-motion: reduce) { .sp-intro-metric { animation: none; } }
.sp-intro-chip { position: absolute; z-index: 4; left: 0; bottom: -6px; display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--br-hairline); border-radius: 14px; padding: 11px 16px; box-shadow: 0 18px 40px -18px rgba(16,24,40,.3); font-size: 13.5px; font-weight: 600; color: var(--fg-dark); }
.sp-intro-chip-ic { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 14%, #fff); color: var(--accent); flex: 0 0 auto; }
.sp-intro-chip-ic svg { width: 13px; height: 13px; }
.sp-intro-kicker { display: inline-flex; align-items: center; gap: 11px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.sp-intro-kicker::before { content: ''; width: 26px; height: 2px; border-radius: 2px; background: var(--accent); }
.sp-intro-h { font-size: clamp(28px,3.3vw,44px); font-weight: 700; letter-spacing: -.025em; line-height: 1.08; color: var(--fg-dark); margin-top: 18px; }
.sp-intro-body { margin-top: 20px; }
.sp-intro-body p { line-height: 1.8; color: var(--fg-mid); }
.sp-intro-body p:first-child { font-size: 18px !important; line-height: 1.7; color: var(--fg-dark); }
.sp-intro-body p + p { margin-top: 16px; }
.sp-intro-body a { color: var(--brand-blue); font-weight: 600; }
@media (max-width: 860px) { .sp-intro-grid2 { grid-template-columns: 1fr; gap: 56px; } .sp-collage { height: clamp(320px,72vw,440px); } .sp-shot { width: 58%; } }

/* ===================== What's included: alternating feature rows ===================== */
.sp-feat-rows { display: flex; flex-direction: column; gap: clamp(56px,8vw,112px); margin-top: clamp(48px,6vw,72px); }
.sp-feat-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,5vw,84px); align-items: center; }
.sp-feat-row:nth-child(even) .sp-feat-copy { order: 2; }
.sp-feat-row:nth-child(even) .sp-feat-art  { order: 1; }
.sp-feat-num { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: color-mix(in srgb, var(--accent) 12%, #fff); color: var(--accent); font-family: "Geist Mono", ui-monospace, monospace; font-weight: 700; font-size: 17px; border: 1px solid color-mix(in srgb, var(--accent) 20%, #fff); }
.sp-feat-copy h3 { font-size: clamp(24px,2.7vw,36px); font-weight: 700; letter-spacing: -.02em; line-height: 1.12; color: var(--fg-dark); margin-top: 18px; }
.sp-feat-copy p { margin-top: 16px; color: var(--fg-mid); line-height: 1.75; font-size: 17px !important; }
/* visual */
.sp-feat-stage { position: relative; border-radius: 24px; padding: clamp(28px,3.6vw,52px); background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 16%, #fff), color-mix(in srgb, var(--accent) 5%, #fff)); border: 1px solid color-mix(in srgb, var(--accent) 14%, #fff); }
.sp-feat-win { background: #fff; border: 1px solid var(--br-hairline); border-radius: 16px; overflow: hidden; box-shadow: 0 30px 60px -28px color-mix(in srgb, var(--accent) 50%, transparent); }
.sp-feat-win-bar { display: flex; gap: 6px; padding: 13px 16px; border-bottom: 1px solid var(--br-hairline); background: #fafbfd; }
.sp-feat-win-bar i { width: 9px; height: 9px; border-radius: 50%; background: #e1e5ed; }
.sp-feat-win-bar i:first-child { background: color-mix(in srgb, var(--accent) 70%, #fff); }
.sp-feat-win-body { padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.sp-feat-medallion { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 14%, #fff); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 22%, #fff); margin-bottom: 4px; }
.sp-feat-medallion svg { width: 28px; height: 28px; }
.sp-feat-skel { height: 11px; border-radius: 6px; background: #eef1f6; }
.sp-feat-skel.w92 { width: 92%; } .sp-feat-skel.w72 { width: 72%; } .sp-feat-skel.w52 { width: 52%; }
.sp-feat-chip { width: 128px; height: 36px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 16%, #fff); margin-top: 8px; }
/* feature screenshot placeholder inside browser frame */
.sp-feat-shot { line-height: 0; background: #fff; }
.sp-feat-shot img { display: block; width: 100%; height: auto; }
.sp-feat-badge { position: absolute; left: clamp(14px,2.2vw,32px); bottom: clamp(14px,2.2vw,32px); width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; background: #fff; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 24%, #fff); box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--accent) 55%, transparent); z-index: 2; }
.sp-feat-badge svg { width: 26px; height: 26px; }
@media (max-width: 820px) {
  .sp-feat-row { grid-template-columns: 1fr; gap: 28px; }
  .sp-feat-row:nth-child(even) .sp-feat-copy { order: 1; }
  .sp-feat-row:nth-child(even) .sp-feat-art  { order: 2; }
}

/* ===================== Demo gallery (very light blue) ===================== */
.sp-demo { background: color-mix(in srgb, var(--accent) 7%, #fff); }
.sp-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 52px; }
.sp-gallery-item { position: relative; display: block; padding: 0; border: 1px solid #dde6f5; border-radius: 16px; overflow: hidden; background: #fff; cursor: pointer; box-shadow: 0 18px 40px -26px rgba(16,24,40,.32); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.sp-gallery-item:hover { transform: translateY(-5px); box-shadow: 0 32px 64px -30px rgba(16,24,40,.42); }
.sp-gallery-item img { display: block; width: 100%; height: 250px; object-fit: cover; object-position: top center; }
.sp-gallery-zoom { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.94); color: var(--accent); opacity: 0; transform: scale(.85); transition: opacity .2s var(--ease), transform .2s var(--ease); box-shadow: 0 6px 16px -6px rgba(16,24,40,.4); }
.sp-gallery-item:hover .sp-gallery-zoom { opacity: 1; transform: scale(1); }
.sp-gallery-zoom svg { width: 18px; height: 18px; }
@media (max-width: 820px) { .sp-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .sp-gallery { grid-template-columns: 1fr; } }

/* lightbox */
.sp-lightbox { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(8,15,35,.84); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sp-lightbox.open { display: flex; }
.sp-lightbox img { max-width: min(900px, 92vw); max-height: 88vh; border-radius: 14px; box-shadow: 0 40px 100px -30px rgba(0,0,0,.6); }
.sp-lightbox-close { position: absolute; top: 20px; right: 24px; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255,255,255,.16); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.sp-lightbox-close:hover { background: rgba(255,255,255,.3); }

/* ===================== FAQ redesign (cards + circular toggle) ===================== */
.faq-list { display: flex; flex-direction: column; gap: 14px; max-width: 880px; margin: 44px auto 0; }
.faq-item { padding: 5px 26px; background: #fff; border: 1px solid var(--br-hairline); border-radius: 16px; box-shadow: 0 10px 30px -22px rgba(16,24,40,.28); overflow: hidden; transition: box-shadow .2s var(--ease); }
.faq-item.open { box-shadow: 0 22px 46px -26px rgba(16,24,40,.32); }
.faq-header { display: flex !important; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 2px 0; min-height: 56px; background: none; border: 0; text-align: left; cursor: pointer; font-family: inherit; }
.faq-header h4 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--fg-dark); margin: 0; }
.faq-toggle { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #eaf1ff; color: var(--brand-blue); font-size: 22px; font-weight: 400; line-height: 0; flex: 0 0 auto; transition: background .2s var(--ease), color .2s var(--ease), transform .28s var(--ease); }
.faq-item.open .faq-toggle { background: var(--brand-blue); color: #fff; transform: rotate(45deg); }
.faq-body { margin-top: 0 !important; max-height: 0; overflow: hidden; transition: max-height .32s var(--ease); }
.faq-item.open .faq-body { max-height: 640px; }
.faq-body-inner { padding: 2px 0 18px; color: var(--fg-mid); font-size: 15.5px; line-height: 1.7; }
.faq-body-inner a { color: var(--brand-blue); font-weight: 600; }

/* ===================== Final CTA (navy band) ===================== */
.sp-final { position: relative; overflow: hidden; border-radius: 30px; padding: clamp(48px,6vw,84px) clamp(28px,4vw,56px); text-align: center;
  background: linear-gradient(165deg, #ffffff 0%, color-mix(in srgb, var(--accent) 9%, #fff) 100%);
  border: 1px solid color-mix(in srgb, var(--accent) 16%, #fff); box-shadow: 0 40px 90px -50px color-mix(in srgb, var(--accent) 50%, rgba(16,24,40,.5)); }
.sp-final::before { content: ""; position: absolute; left: 50%; top: -34%; width: 62%; height: 84%; transform: translateX(-50%); z-index: 0; pointer-events: none; filter: blur(52px); opacity: .5;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--accent) 42%, transparent), transparent 70%); }
.sp-final > * { position: relative; z-index: 1; }
.sp-final-pill { display: inline-flex; align-items: center; gap: 9px; padding: 7px 16px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, #fff); border: 1px solid color-mix(in srgb, var(--accent) 24%, #fff); color: var(--accent); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.sp-final-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.sp-final-h { font-size: clamp(30px,4vw,52px); font-weight: 800; letter-spacing: -.025em; line-height: 1.08; color: var(--fg-dark); margin-top: 22px; }
.sp-final-sub { max-width: 560px; margin: 18px auto 0; color: var(--fg-mid); line-height: 1.6; }
.sp-final-cta { display: flex; justify-content: center; gap: 12px; margin-top: 34px; flex-wrap: wrap; }
.sp-final-primary { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 64%, #000)); color: #fff; box-shadow: 0 16px 32px -12px color-mix(in srgb, var(--accent) 60%, transparent); }
.sp-final-primary:hover { filter: brightness(1.06); color: #fff; }
.sp-final-ghost { background: #fff; color: var(--fg-dark); border: 1px solid var(--br-hairline); }
.sp-final-ghost:hover { background: #f4f6fb; color: var(--fg-dark); border-color: color-mix(in srgb, var(--accent) 30%, #fff); }
.sp-final-also { margin-top: 24px; font-size: 13px; color: var(--fg-mid); }
.sp-final-also a { color: var(--accent); font-weight: 600; }

/* ===================== IT support: creative rich sections ===================== */
.sp-rich-head { max-width: 720px; margin: 0 auto; text-align: center; }
.sp-rich-head h2 { margin-top: 14px; }
.sp-rich-head p { margin: 16px auto 0; max-width: 600px; color: var(--fg-mid); line-height: 1.6; }

/* lead statement */
.sp-rich-lead { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); }
.sp-lead { position: relative; padding-left: 30px; }
.sp-lead::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 4px; border-radius: 4px; background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 25%, #fff)); }
.sp-lead-quote { position: absolute; left: 18px; top: -28px; font-size: 90px; line-height: 1; color: color-mix(in srgb, var(--accent) 22%, #fff); font-family: Georgia, "Times New Roman", serif; pointer-events: none; }
.sp-lead .eyebrow { position: relative; }
.sp-lead-statement { position: relative; margin-top: 14px; font-size: clamp(22px, 2.6vw, 31px); font-weight: 700; letter-spacing: -.02em; line-height: 1.28; color: var(--fg-dark); }
.sp-lead-sub { margin-top: 18px; font-size: 17px; line-height: 1.7; color: var(--fg-mid); max-width: 640px; }

/* layered approach bento */
.sp-rich-approach { background: color-mix(in srgb, var(--accent) 6%, #fff); }
.sp-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 52px; }
.sp-pill-card { background: #fff; border: 1px solid var(--br-hairline); border-radius: 20px; padding: 28px 26px; box-shadow: 0 16px 40px -30px rgba(16,24,40,.4); transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.sp-pill-card:hover { transform: translateY(-5px); box-shadow: 0 30px 56px -32px rgba(16,24,40,.5); border-color: color-mix(in srgb, var(--accent) 30%, #fff); }
.sp-pill-ic { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 12%, #fff); color: var(--accent); }
.sp-pill-ic svg { width: 24px; height: 24px; }
.sp-pill-card h3 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--fg-dark); margin-top: 18px; }
.sp-pill-card p { margin-top: 10px; color: var(--fg-mid); line-height: 1.62; font-size: 14.7px; }
.sp-pill-card a { color: var(--accent); font-weight: 600; }
.sp-pill-cta { display: flex; flex-direction: column; justify-content: center; border-radius: 20px; padding: 30px 28px; color: #fff; background: linear-gradient(155deg, color-mix(in srgb, var(--accent) 88%, #000), color-mix(in srgb, var(--accent) 62%, #000)); box-shadow: 0 24px 50px -28px color-mix(in srgb, var(--accent) 70%, transparent); }
.sp-pill-cta h3 { color: #fff; font-size: 19px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.sp-pill-cta p { margin-top: 10px; color: rgba(255,255,255,.9); line-height: 1.55; font-size: 14.7px; }
.sp-pill-cta-link { margin-top: 16px; align-self: flex-start; font-weight: 700; color: #fff; border-bottom: 2px solid rgba(255,255,255,.45); padding-bottom: 2px; transition: border-color .2s var(--ease); }
.sp-pill-cta-link:hover { border-color: #fff; }

/* sectors chips */
.sp-sectors { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 44px; }
.sp-sectors-label { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--fg-mid); margin-right: 4px; }
.sp-sector { display: inline-flex; align-items: center; padding: 9px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--br-hairline); font-size: 13.5px; font-weight: 600; color: var(--fg-dark); }
.sp-sectors-note { text-align: center; max-width: 620px; margin: 22px auto 0; color: var(--fg-mid); line-height: 1.6; font-size: 15px; }
.sp-sectors-note a { color: var(--accent); font-weight: 600; }

/* headaches ledger */
.sp-pains { max-width: 760px; margin: 48px auto 0; display: flex; flex-direction: column; gap: 12px; }
.sp-pain { display: flex; align-items: flex-start; gap: 18px; background: #fff; border: 1px solid var(--br-hairline); border-radius: 16px; padding: 20px 24px; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.sp-pain:hover { transform: translateX(4px); box-shadow: 0 18px 40px -30px rgba(16,24,40,.4); }
.sp-pain-ic { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 14%, #fff); color: var(--accent); margin-top: 2px; }
.sp-pain-ic svg { width: 17px; height: 17px; }
.sp-pain-tx h4 { font-size: 16.5px; font-weight: 700; color: var(--fg-dark); letter-spacing: -.01em; }
.sp-pain-tx p { margin-top: 5px; color: var(--fg-mid); line-height: 1.55; font-size: 14.7px; }
.sp-trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; max-width: 760px; margin: 36px auto 0; padding-top: 28px; border-top: 1px solid var(--br-hairline); }
.sp-trust-row span { font-size: 14px; color: var(--fg-mid); }
.sp-trust-row strong { color: var(--fg-dark); font-weight: 700; }

@media (max-width: 900px) {
  .sp-pillars { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .sp-pillars { grid-template-columns: 1fr; }
  .sp-lead { padding-left: 22px; }
  .sp-trust-row { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
}

/* ===================== Web dev: choice cards + problem/fix ledger ===================== */
.sp-choice-tag { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, #fff); color: var(--accent); font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.sp-pill-card .sp-choice-best { display: block; margin-top: 14px; font-size: 13px; color: var(--fg-mid); }
.sp-pill-card .sp-choice-best strong { color: var(--fg-dark); font-weight: 700; }

.sp-fixes { max-width: 840px; margin: 50px auto 0; display: flex; flex-direction: column; gap: 14px; }
.sp-fix { display: grid; grid-template-columns: 1fr 1.15fr; background: #fff; border: 1px solid var(--br-hairline); border-radius: 16px; overflow: hidden; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.sp-fix:hover { transform: translateY(-3px); box-shadow: 0 22px 46px -30px rgba(16,24,40,.42); }
.sp-fix-problem, .sp-fix-solution { display: flex; gap: 13px; align-items: flex-start; padding: 22px 24px; }
.sp-fix-problem { background: #fafafb; }
.sp-fix-solution { border-left: 1px solid var(--br-hairline); }
.sp-fix-ic { flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; margin-top: 1px; }
.sp-fix-problem .sp-fix-ic { background: #fdecec; color: #e5484d; }
.sp-fix-solution .sp-fix-ic { background: color-mix(in srgb, var(--accent) 14%, #fff); color: var(--accent); }
.sp-fix-ic svg { width: 15px; height: 15px; }
.sp-fix-problem p { color: var(--fg-dark); font-weight: 600; font-size: 15px; line-height: 1.5; }
.sp-fix-solution p { color: var(--fg-mid); font-size: 14.7px; line-height: 1.55; }
.sp-fix-solution strong { color: var(--fg-dark); font-weight: 700; }

@media (max-width: 600px) {
  .sp-fix { grid-template-columns: 1fr; }
  .sp-fix-solution { border-left: 0; border-top: 1px solid var(--br-hairline); }
}

/* ===================== Web app: website-vs-app decision ===================== */
.sp-decide { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 860px; margin: 48px auto 0; }
.sp-decide-card { background: #fff; border: 1px solid var(--br-hairline); border-top: 3px solid var(--accent); border-radius: 16px; padding: 28px 26px; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.sp-decide-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -30px rgba(16,24,40,.42); }
.sp-decide-card h3 { margin-top: 14px; font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--fg-dark); }
.sp-decide-card p { margin-top: 9px; color: var(--fg-mid); line-height: 1.6; font-size: 14.7px; }
.sp-decide-card a { color: var(--accent); font-weight: 600; }
.sp-decide-note { text-align: center; max-width: 660px; margin: 24px auto 0; color: var(--fg-mid); line-height: 1.65; font-size: 15px; }
.sp-decide-note a { color: var(--accent); font-weight: 600; }
@media (max-width: 600px) { .sp-decide { grid-template-columns: 1fr; } }

/* =====================================================================
   BOLD POLISH: hero visual, depth, motion, trust band, testimonial
   ===================================================================== */

/* ---- Hero: vibrant gradient-mesh background + grain ---- */
.sp-hero { background:
  radial-gradient(120% 90% at 8% -12%, color-mix(in srgb, var(--accent) 20%, #fff) 0%, transparent 52%),
  radial-gradient(90% 80% at 98% -6%, color-mix(in srgb, #8b5cf6 16%, #fff) 0%, transparent 50%),
  radial-gradient(80% 70% at 55% 115%, color-mix(in srgb, var(--accent) 12%, #fff) 0%, transparent 55%),
  linear-gradient(180deg, #fbfcff 0%, #f5f8fe 100%); }
.sp-hero .hero-aura-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 56% at 22% 26%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 70%),
    radial-gradient(34% 50% at 82% 14%, color-mix(in srgb, #8b5cf6 30%, transparent), transparent 70%),
    radial-gradient(30% 48% at 64% 70%, color-mix(in srgb, #14b8c4 24%, transparent), transparent 72%);
  filter: blur(16px); opacity: .7; }
.sp-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---- Hero: layered product stage ---- */
.sp-hero-stage { position: relative; }
.sp-hero-glow { position: absolute; inset: -14%; z-index: 0; pointer-events: none; border-radius: 44px; filter: blur(40px); opacity: .55;
  background:
    radial-gradient(58% 58% at 72% 30%, color-mix(in srgb, var(--accent) 50%, transparent), transparent 70%),
    radial-gradient(52% 52% at 24% 82%, color-mix(in srgb, #8b5cf6 42%, transparent), transparent 70%); }
.sp-hero-stage .sp-card { position: relative; z-index: 1; }
.sp-hero-chip { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 9px; padding: 11px 15px; border-radius: 14px;
  background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 20px 44px -18px rgba(16,24,40,.45); font-size: 13px; color: var(--fg-dark); white-space: nowrap; }
.sp-hero-chip strong { font-weight: 800; }
.sp-hero-stars { color: #fbbc05; letter-spacing: 1px; font-size: 13px; }
.sp-hero-chip-rating { top: -20px; left: -30px; animation: spfloat 5s ease-in-out infinite; }
.sp-hero-mini { position: absolute; z-index: 0; bottom: -34px; left: -72px; width: 196px; border-radius: 13px; overflow: hidden;
  background: #fff; border: 1px solid var(--br-hairline); box-shadow: 0 34px 64px -26px rgba(16,24,40,.5); animation: spfloat 6.5s ease-in-out infinite reverse; }
.sp-hero-mini-bar { display: flex; gap: 5px; padding: 9px 12px; background: #fafbfd; border-bottom: 1px solid var(--br-hairline); }
.sp-hero-mini-bar i { width: 7px; height: 7px; border-radius: 50%; background: #e1e5ed; }
.sp-hero-mini-bar i:first-child { background: color-mix(in srgb, var(--accent) 70%, #fff); }
.sp-hero-mini img { display: block; width: 100%; }
@keyframes spfloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@media (max-width: 900px) { .sp-hero-mini { display: none; } .sp-hero-chip-rating { left: auto; right: 8px; top: -16px; } }
@media (prefers-reduced-motion: reduce) { .sp-hero-chip, .sp-hero-mini { animation: none; } }

/* ---- Background depth across sections ---- */
.sec-glow { position: relative; }
.sec-glow > .container-xl, .sec-glow > .container-lg, .sec-glow > .container-md { position: relative; z-index: 1; }
.sec-glow::before { content: ""; position: absolute; left: 50%; top: -10%; width: 70%; height: 60%; transform: translateX(-50%); z-index: 0; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); filter: blur(30px); }

/* ---- Trust band (animated stats + logo marquee) ---- */
.sp-trust { padding-top: clamp(40px,5vw,66px); padding-bottom: clamp(40px,5vw,66px); }
.sp-trust-bar { position: relative; display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; max-width: 1080px; margin: 0 auto;
  background: var(--br-hairline); border: 1px solid var(--br-hairline); border-radius: 24px; overflow: hidden; box-shadow: 0 36px 80px -46px rgba(16,24,40,.42); }
.sp-trust-bar::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 45%, #8b5cf6) 60%, #8b5cf6); }
.sp-stat { position: relative; text-align: center; background: #fff; padding: clamp(28px,3vw,40px) 18px; transition: background .25s var(--ease); }
.sp-stat:hover { background: color-mix(in srgb, var(--accent) 5%, #fff); }
.sp-stat-ic { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; margin-bottom: 16px; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, #fff); border: 1px solid color-mix(in srgb, var(--accent) 20%, #fff); }
.sp-stat-ic svg { width: 22px; height: 22px; }
.sp-stat-n { font-size: clamp(34px,4.4vw,52px); font-weight: 800; letter-spacing: -.03em; line-height: 1;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 50%, #8b5cf6)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sp-stat-l { margin-top: 11px; font-size: 13.5px; color: var(--fg-mid); line-height: 1.4; }
.sp-stat-stars { margin-top: 9px; font-size: 13px; letter-spacing: 2px; }
.sp-stat-stars.tp { color: #00b67a; }
.sp-stat-stars.gg { color: #fbbc05; }
@media (max-width: 680px) { .sp-trust-bar { grid-template-columns: repeat(2,1fr); } }
.sp-logobar { padding: clamp(26px,3vw,40px) 0; background: #fff; border-top: 1px solid var(--br-hairline); border-bottom: 1px solid var(--br-hairline); }
.sp-logobar .container-wide { display: flex; flex-direction: column; align-items: center; }
.sp-logos { margin-top: clamp(34px,4vw,52px); width: 100%; }
.sp-logobar .sp-logos { margin-top: 0; }
.sp-logos-head { text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--fg-mid); opacity: .7; margin-bottom: 20px; }
.sp-logos-vp { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.sp-logos-track { display: flex; align-items: center; width: max-content; animation: logoScroll 34s linear infinite; }
.sp-logos-track span { display: inline-flex; align-items: center; gap: 10px; margin-right: 52px; white-space: nowrap;
  font-weight: 700; font-size: 16px; letter-spacing: -.01em; color: var(--fg-black); opacity: 1; }
.sp-logos-track span img { height: 26px; width: 26px; object-fit: contain; flex: 0 0 auto; }
.sp-logos-track img[src$="microsoft365.svg"], .sp-logos-track img[src$="googleworkspace.svg"] { height: 22px; width: 22px; }
/* Microsoft 365 + Google Workspace files are colour; render them solid black to match the rest */
.logo-track img[src$="microsoft365.svg"], .logo-track img[src$="googleworkspace.svg"],
.sp-logos-track img[src$="microsoft365.svg"], .sp-logos-track img[src$="googleworkspace.svg"] { filter: brightness(0); }
@media (hover: none) { .sp-logos-track { animation-duration: 26s; } }
@media (prefers-reduced-motion: reduce) { .sp-logos-track { animation: none; } }
@media (max-width: 680px) { .sp-trust-stats { grid-template-columns: repeat(2,1fr); row-gap: 30px; } }

/* ---- Testimonial ---- */
.sp-tmny { position: relative; }
.sp-quote { position: relative; max-width: 760px; margin: 0 auto; text-align: center; background: #fff; border: 1px solid var(--br-hairline); border-radius: 24px;
  padding: clamp(38px,4.4vw,60px) clamp(28px,4vw,56px); box-shadow: 0 34px 76px -42px rgba(16,24,40,.45); }
.sp-quote::before { content: "\201C"; position: absolute; top: -26px; left: 50%; transform: translateX(-50%); width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; font: 700 42px/1 Georgia, serif; padding-top: 16px; color: #fff;
  background: linear-gradient(150deg, var(--accent), color-mix(in srgb, var(--accent) 58%, #000)); box-shadow: 0 18px 32px -12px color-mix(in srgb, var(--accent) 60%, transparent); }
.sp-quote-stars { color: #fbbc05; letter-spacing: 3px; font-size: 18px; }
.sp-quote blockquote { margin: 16px 0 0; font-size: clamp(19px,2.2vw,26px); font-weight: 600; letter-spacing: -.01em; line-height: 1.5; color: var(--fg-dark); }
.sp-quote figcaption { margin-top: 26px; display: inline-flex; align-items: center; gap: 13px; text-align: left; }
.sp-quote-av { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 15px; color: #fff;
  background: linear-gradient(150deg, var(--accent), color-mix(in srgb, var(--accent) 52%, #8b5cf6)); }
.sp-quote figcaption strong { display: block; color: var(--fg-dark); font-size: 15px; }
.sp-quote figcaption span { color: var(--fg-mid); font-size: 13.5px; }

/* ---- Motion: animated inline link underlines ---- */
.sp-sectors-note a, .sp-decide-note a, .sp-pill-card p a, .sp-decide-card p a, .sp-prose a, .sp-final-also a, .sp-lead-sub a {
  background-image: linear-gradient(var(--accent), var(--accent)); background-size: 0% 1.5px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .3s var(--ease); padding-bottom: 1px; }
.sp-sectors-note a:hover, .sp-decide-note a:hover, .sp-pill-card p a:hover, .sp-decide-card p a:hover, .sp-prose a:hover, .sp-final-also a:hover, .sp-lead-sub a:hover { background-size: 100% 1.5px; }

/* ---- Motion: button sheen ---- */
.btn-dark, .sp-talk, .sp-final-primary { position: relative; overflow: hidden; }
.btn-dark::after, .sp-talk::after, .sp-final-primary::after { content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.4), transparent); transform: skewX(-18deg); pointer-events: none; }
.btn-dark:hover::after, .sp-talk:hover::after, .sp-final-primary:hover::after { animation: btnsheen .75s ease; }
@keyframes btnsheen { to { left: 130%; } }

/* ---- Motion: staggered reveal for card grids ---- */
.sp-pillars.reveal, .sp-fixes.reveal, .sp-gallery.reveal, .sp-why.reveal, .sp-steps.reveal, .sp-decide.reveal { opacity: 1 !important; transform: none !important; }
.sp-pillars.reveal > *, .sp-fixes.reveal > *, .sp-gallery.reveal > *, .sp-why.reveal > *, .sp-steps.reveal > *, .sp-decide.reveal > * {
  opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.sp-pillars.reveal.in > *, .sp-fixes.reveal.in > *, .sp-gallery.reveal.in > *, .sp-why.reveal.in > *, .sp-steps.reveal.in > *, .sp-decide.reveal.in > * { opacity: 1; transform: none; }
.sp-pillars.reveal.in > *:nth-child(2), .sp-fixes.reveal.in > *:nth-child(2), .sp-gallery.reveal.in > *:nth-child(2), .sp-why.reveal.in > *:nth-child(2), .sp-steps.reveal.in > *:nth-child(2), .sp-decide.reveal.in > *:nth-child(2) { transition-delay: .08s; }
.sp-pillars.reveal.in > *:nth-child(3), .sp-fixes.reveal.in > *:nth-child(3), .sp-gallery.reveal.in > *:nth-child(3), .sp-why.reveal.in > *:nth-child(3), .sp-steps.reveal.in > *:nth-child(3) { transition-delay: .16s; }
.sp-pillars.reveal.in > *:nth-child(4), .sp-fixes.reveal.in > *:nth-child(4), .sp-gallery.reveal.in > *:nth-child(4), .sp-why.reveal.in > *:nth-child(4), .sp-steps.reveal.in > *:nth-child(4) { transition-delay: .24s; }
.sp-pillars.reveal.in > *:nth-child(5), .sp-fixes.reveal.in > *:nth-child(5), .sp-gallery.reveal.in > *:nth-child(5) { transition-delay: .32s; }
.sp-pillars.reveal.in > *:nth-child(6), .sp-gallery.reveal.in > *:nth-child(6) { transition-delay: .4s; }
@media (prefers-reduced-motion: reduce) {
  .sp-pillars.reveal > *, .sp-fixes.reveal > *, .sp-gallery.reveal > *, .sp-why.reveal > *, .sp-steps.reveal > *, .sp-decide.reveal > * { opacity: 1; transform: none; transition: none; }
}

/* ===================== OVERVIEW spotlight panel (bold) ===================== */
.sp-intro2-panel { position: relative; overflow: hidden; border-radius: clamp(24px,3vw,38px); padding: clamp(34px,4.6vw,72px);
  background: linear-gradient(150deg, #141c44 0%, #0c1430 58%, #0a1026 100%); box-shadow: 0 54px 110px -52px rgba(8,16,40,.72); }
.sp-intro2-panel::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .92;
  background:
    radial-gradient(42% 62% at 92% 6%, color-mix(in srgb, var(--accent) 58%, transparent), transparent 60%),
    radial-gradient(48% 64% at 8% 104%, color-mix(in srgb, #8b5cf6 42%, transparent), transparent 60%),
    radial-gradient(30% 42% at 64% 52%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%); }
.sp-intro2-panel::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.sp-intro2-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.04fr .96fr; gap: clamp(34px,4.4vw,64px); align-items: center; }

.sp-intro2-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--accent) 52%, #fff); }
.sp-intro2-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 28%, transparent); }
.sp-intro2-h { margin-top: 18px; font-size: clamp(28px,3.4vw,46px); font-weight: 800; letter-spacing: -.025em; line-height: 1.08; color: #fff; }
.sp-intro2-body { margin-top: 20px; }
.sp-intro2-body p { color: rgba(255,255,255,.72); line-height: 1.8; }
.sp-intro2-body p:first-child { font-size: 18px; color: rgba(255,255,255,.92); }
.sp-intro2-body p + p { margin-top: 14px; }
.sp-intro2-body a { color: color-mix(in srgb, var(--accent) 45%, #fff); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.sp-intro2-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.sp-intro2-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #fff;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sp-intro2-chip svg { width: 15px; height: 15px; color: color-mix(in srgb, var(--accent) 55%, #fff); flex: 0 0 auto; }

.sp-intro2-show { position: relative; min-height: clamp(300px,30vw,380px); }
.sp-intro2-glow { position: absolute; inset: -12%; z-index: 0; pointer-events: none; filter: blur(42px); opacity: .6;
  background: radial-gradient(55% 55% at 60% 42%, color-mix(in srgb, var(--accent) 60%, transparent), transparent 70%); }
.sp-intro2-win { position: absolute; margin: 0; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 44px 84px -30px rgba(0,0,0,.62); }
.sp-intro2-win-main { z-index: 2; top: 2%; left: 0; width: 82%; transform: rotate(-2deg); transition: transform .4s var(--ease); }
.sp-intro2-win-mini { z-index: 3; bottom: -6%; right: -2%; width: 52%; transform: rotate(3deg); transition: transform .4s var(--ease); }
.sp-intro2-show:hover .sp-intro2-win-main { transform: rotate(-3deg) translate(-6px,-4px); }
.sp-intro2-show:hover .sp-intro2-win-mini { transform: rotate(4deg) translate(6px,-4px); }
.sp-intro2-bar { display: flex; gap: 5px; padding: 8px 11px; background: #f3f5fa; border-bottom: 1px solid #e7ebf2; }
.sp-intro2-bar i { width: 7px; height: 7px; border-radius: 50%; background: #cfd6e4; }
.sp-intro2-bar i:first-child { background: var(--accent); }
.sp-intro2-win img { display: block; width: 100%; }
.sp-intro2-badge { position: absolute; z-index: 4; top: -7%; right: 2%; display: inline-flex; align-items: center; gap: 10px;
  background: #fff; border-radius: 13px; padding: 10px 14px; box-shadow: 0 24px 46px -16px rgba(0,0,0,.5); animation: spfloat 5.5s ease-in-out infinite; }
.sp-intro2-badge-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #fff; flex: 0 0 auto;
  background: linear-gradient(150deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #8b5cf6)); }
.sp-intro2-badge-ic svg { width: 17px; height: 17px; }
.sp-intro2-badge strong { display: block; font-size: 13px; color: var(--fg-dark); letter-spacing: -.01em; }
.sp-intro2-badge span { font-size: 11.5px; color: var(--fg-mid); }
@media (max-width: 860px) {
  .sp-intro2-grid { grid-template-columns: 1fr; gap: 52px; }
  .sp-intro2-show { order: -1; min-height: clamp(280px,64vw,360px); }
}
@media (prefers-reduced-motion: reduce) { .sp-intro2-badge { animation: none; } }

/* ===================== Wider, more expansive section widths ===================== */
.container-wide { max-width: 1440px; margin: 0 auto; padding: 0 clamp(20px,4vw,48px); }
@media (max-width: 640px) { .container-wide { padding-left: 18px; padding-right: 18px; } }
/* Overview panel: full-bleed dramatic band */
.sp-intro2-bleed { width: 100%; max-width: 1760px; margin: 0 auto; padding: 0 clamp(16px,3vw,48px); }

/* Tighter spacing between stacked same-colour sections (reviews / CTA) */
.sp-pt-sm { padding-top: clamp(30px,3.6vw,52px) !important; }
.sp-pb-sm { padding-bottom: clamp(30px,3.6vw,52px) !important; }

/* ===================== Reviews: dark anchor band ===================== */
.sp-reviews-dark { position: relative; overflow: hidden; padding: clamp(58px,6vw,92px) 0;
  background: radial-gradient(120% 130% at 50% -12%,
    color-mix(in srgb, var(--accent) 32%, #0c1630) 0%,
    color-mix(in srgb, var(--accent) 16%, #0a1126) 55%,
    #080d20 100%); }
.sp-reviews-dark::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .85;
  background:
    radial-gradient(40% 50% at 88% 6%, color-mix(in srgb, var(--accent) 42%, transparent), transparent 60%),
    radial-gradient(42% 56% at 8% 102%, color-mix(in srgb, #8b5cf6 30%, transparent), transparent 60%); }
.sp-reviews-dark .container-lg, .sp-reviews-dark .tp-rows { position: relative; z-index: 1; }
.sp-reviews-dark .tp-head .eyebrow { color: color-mix(in srgb, var(--accent) 55%, #fff); }
.sp-reviews-dark .tp-score { color: rgba(255,255,255,.74); }
.sp-reviews-dark .tp-score strong { color: #fff; }

/* ===================== Homepage hero: subtle lift only ===================== */
/* (hero-aura background + aurora kept as original; just a soft glow behind the showcase) */
.hero-stage { position: relative; }
.hero-stage::before { content: ""; position: absolute; left: 50%; top: 12%; width: 52%; height: 72%; transform: translateX(-50%); z-index: 0; pointer-events: none; filter: blur(50px); opacity: .38;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, #1e6ef5 30%, transparent), transparent 70%); }
.hero-stage-inner { position: relative; z-index: 1; max-width: 1040px; margin: 0 auto; }
.hero-stage-inner img { position: relative; z-index: 1; }

/* button sheen on homepage primary buttons */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after { content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.4), transparent); transform: skewX(-18deg); pointer-events: none; }
.btn-primary:hover::after { animation: btnsheen .75s ease; }

/* Homepage CTA: light variant (mirrors service-page ending after the dark reviews band) */
.cta-band-light { background: linear-gradient(165deg, #ffffff 0%, color-mix(in srgb, #1e6ef5 9%, #fff) 100%);
  border: 1px solid color-mix(in srgb, #1e6ef5 16%, #fff); box-shadow: 0 40px 90px -50px color-mix(in srgb, #1e6ef5 48%, rgba(16,24,40,.5)); }
.cta-band-light .cta-glow { background: radial-gradient(52% 62% at 50% 6%, color-mix(in srgb, #1e6ef5 30%, transparent), transparent 70%); }
.cta-band-light .eyebrow { color: #1e6ef5; }
.cta-band-light h2 { color: var(--fg-black); }
.cta-band-light .body-lg { color: var(--fg-mid); }
.cta-band-light .caption { color: var(--fg-mid); }
.cta-band-light .btn-white { background: linear-gradient(135deg, #1e6ef5, color-mix(in srgb, #1e6ef5 64%, #000)); color: #fff; box-shadow: 0 16px 32px -12px color-mix(in srgb, #1e6ef5 60%, transparent); }
.cta-band-light .btn-white:hover { filter: brightness(1.06); color: #fff; }
.cta-band-light .cta-ghost { background: #fff; color: var(--fg-dark); box-shadow: inset 0 0 0 1.5px var(--br-hairline); }
.cta-band-light .cta-ghost:hover { background: #f4f6fb; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #1e6ef5 30%, #fff); color: var(--fg-dark); }

/* ===================== Who we help: clean industry tiles (replaces orbit gimmick) ===================== */
.who-dark { background: radial-gradient(120% 130% at 85% -10%, #131a2e 0%, #0a0d14 60%); }
.who-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.who-tile { display: flex; align-items: center; gap: 13px; padding: 15px 16px; border-radius: 14px;
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09);
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); }
.who-tile:hover { background: rgba(255,255,255,.08); border-color: color-mix(in srgb, var(--c) 50%, rgba(255,255,255,.2)); transform: translateY(-3px); }
.who-tile-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex: 0 0 auto; color: var(--c);
  background: color-mix(in srgb, var(--c) 18%, transparent); border: 1px solid color-mix(in srgb, var(--c) 34%, transparent); }
.who-tile-ic svg { width: 20px; height: 20px; }
.who-tile-lbl { font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: rgba(255,255,255,.92); }
@media (max-width: 520px) { .who-tiles { grid-template-columns: 1fr; } }

/* ===================== Homepage: recent-work teaser cards ===================== */
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.work-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--br-hairline); border-radius: 18px; overflow: hidden;
  appearance: none; -webkit-appearance: none; font: inherit; text-align: left; color: inherit; cursor: pointer; width: 100%; padding: 0;
  box-shadow: 0 18px 44px -30px rgba(16,24,40,.35); transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.work-tag { align-self: flex-start; display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); border: 1px solid color-mix(in srgb, var(--c) 22%, #fff); border-radius: 999px; padding: 4px 10px; margin-bottom: 12px; }
.work-card:hover { transform: translateY(-5px); box-shadow: 0 34px 64px -30px rgba(16,24,40,.45); border-color: color-mix(in srgb, var(--c) 40%, #fff); }
.work-thumb { display: block; position: relative; background: #f3f5fa; border-bottom: 1px solid var(--br-hairline); }
.work-bar { display: flex; gap: 5px; padding: 9px 12px; background: #fafbfd; border-bottom: 1px solid var(--br-hairline); }
.work-bar i { width: 7px; height: 7px; border-radius: 50%; background: #d7dce6; }
.work-bar i:first-child { background: var(--c); }
.work-thumb img { display: block; width: 100%; height: 200px; object-fit: cover; object-position: top center; }
.work-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.work-body h3 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--fg-black); }
.work-body p { margin-top: 9px; color: var(--fg-mid); line-height: 1.6; font-size: 14.5px; flex: 1; }
.work-more { margin-top: 16px; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--c); }
.work-more .arr { transition: transform .2s var(--ease); }
.work-card:hover .work-more .arr { transform: translateX(3px); }
@media (max-width: 900px) { .work-grid { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; } }

/* ===================== Project details popup ===================== */
.proj-modal { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), visibility .25s var(--ease); }
.proj-modal.open { opacity: 1; visibility: visible; }
.proj-modal-scrim { position: absolute; inset: 0; background: rgba(12,10,20,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); cursor: pointer; }
.proj-modal-card { position: relative; z-index: 1; width: min(660px, 100%); max-height: 88vh; overflow: auto; background: #fff; border-radius: 22px; box-shadow: 0 50px 110px -40px rgba(0,0,0,.65); transform: translateY(16px) scale(.985); transition: transform .28s var(--ease); }
.proj-modal.open .proj-modal-card { transform: none; }
.proj-modal-x { position: absolute; top: 14px; right: 14px; z-index: 2; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: #fff; border: 1px solid var(--br-hairline); color: var(--fg-dark); cursor: pointer; box-shadow: 0 6px 16px -6px rgba(16,24,40,.3); transition: background .15s var(--ease); }
.proj-modal-x:hover { background: #f4f6fb; }
.proj-modal-x svg { width: 18px; height: 18px; }
.proj-modal-body { padding: clamp(26px, 4vw, 42px); }

.proj-d-tag { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--c, #1e6ef5); background: color-mix(in srgb, var(--c, #1e6ef5) 12%, #fff); border: 1px solid color-mix(in srgb, var(--c, #1e6ef5) 22%, #fff); border-radius: 999px; padding: 5px 12px; }
.proj-d-title { margin: 14px 0 0; font-size: clamp(22px, 3vw, 30px); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; color: var(--fg-black); }
.proj-d-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 20px; }
.proj-d-meta span { display: inline-flex; flex-direction: column; gap: 3px; background: #f4f6fb; border: 1px solid var(--br-hairline); border-radius: 11px; padding: 9px 13px; font-size: 13.5px; font-weight: 600; color: var(--fg-dark); }
.proj-d-meta strong { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-mid); }
.proj-d-body p { font-size: 15px; line-height: 1.72; color: var(--fg-dark); margin: 0 0 13px; }
.proj-d-body h4 { font-size: 14px; font-weight: 800; color: var(--fg-black); margin: 20px 0 11px; letter-spacing: .01em; }
.proj-d-body ul { list-style: none; margin: 0 0 6px; padding: 0; }
.proj-d-body li { position: relative; padding-left: 23px; margin-bottom: 9px; font-size: 14.5px; line-height: 1.6; color: var(--fg-dark); }
.proj-d-body li::before { content: ''; position: absolute; left: 3px; top: 9px; width: 7px; height: 7px; border-radius: 2px; background: var(--brand-blue); }
.proj-d-cta { margin-top: 24px; }

/* ===================== Homepage CTA: slim dark banner ===================== */
.cta-slim-sec { padding-top: clamp(40px,5vw,72px); padding-bottom: clamp(56px,6vw,88px); }
.cta-slim { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: clamp(24px,4vw,48px);
  border-radius: 22px; padding: clamp(28px,3.2vw,40px) clamp(28px,4vw,52px);
  background: radial-gradient(130% 200% at 100% 0%, #1b386f 0%, #0d1733 52%, #0a0f24 100%);
  box-shadow: 0 34px 80px -46px rgba(8,16,40,.72); }
.cta-slim-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .85;
  background:
    radial-gradient(40% 120% at 96% 0%, color-mix(in srgb, var(--accent, #1e6ef5) 45%, transparent), transparent 60%),
    radial-gradient(36% 120% at 4% 100%, color-mix(in srgb, #8b5cf6 30%, transparent), transparent 60%); }
.cta-slim-text { position: relative; z-index: 1; }
.cta-slim-text h2 { font-size: clamp(23px,2.7vw,34px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: #fff; }
.cta-slim-text p { margin-top: 8px; color: rgba(255,255,255,.72); font-size: 15px; line-height: 1.5; max-width: 540px; }
.cta-slim-actions { position: relative; z-index: 1; display: flex; gap: 12px; flex-shrink: 0; flex-wrap: wrap; }
@media (max-width: 760px) { .cta-slim { flex-direction: column; align-items: flex-start; } }

/* ===================== About page (corporate) ===================== */
.ab-hero { background: radial-gradient(120% 80% at 50% -20%, color-mix(in srgb, #1e6ef5 9%, #fff), #fff 60%); }
.ab-hero-h { font-size: clamp(34px,5vw,60px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; color: var(--fg-black); margin-top: 16px; }
.ab-hero-sub { max-width: 640px; margin: 22px auto 0; color: var(--fg-mid); font-size: 18px; line-height: 1.7; }
.ab-stat-strip { display: inline-flex; flex-wrap: wrap; justify-content: center; margin: clamp(40px,5vw,58px) auto 0; border: 1px solid var(--br-hairline); border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 22px 54px -40px rgba(16,24,40,.42); }
.ab-stat { padding: 20px 38px; text-align: center; }
.ab-stat + .ab-stat { border-left: 1px solid var(--br-hairline); }
.ab-stat-v { font-size: clamp(21px,2.4vw,28px); font-weight: 800; letter-spacing: -.02em; color: var(--fg-black); }
.ab-stat-l { margin-top: 5px; font-size: 13px; color: var(--fg-mid); }
@media (max-width: 560px) { .ab-stat-strip { flex-direction: column; width: 100%; max-width: 320px; } .ab-stat + .ab-stat { border-left: 0; border-top: 1px solid var(--br-hairline); } }

.ab-principles { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.ab-principle { background: #fff; border: 1px solid var(--br-hairline); border-radius: 18px; padding: 28px 24px; box-shadow: 0 14px 38px -30px rgba(16,24,40,.35); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.ab-principle:hover { transform: translateY(-4px); box-shadow: 0 26px 52px -32px rgba(16,24,40,.45); }
.ab-principle-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: color-mix(in srgb, #1e6ef5 12%, #fff); color: #1e6ef5; border: 1px solid color-mix(in srgb, #1e6ef5 20%, #fff); }
.ab-principle-ic svg { width: 22px; height: 22px; }
.ab-principle h3 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--fg-black); margin-top: 18px; }
.ab-principle p { margin-top: 9px; color: var(--fg-mid); line-height: 1.6; font-size: 14.5px; }

.ab-team { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.ab-member { background: #fff; border: 1px solid var(--br-hairline); border-radius: 18px; padding: 30px 24px; text-align: center; box-shadow: 0 16px 40px -30px rgba(16,24,40,.35); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.ab-member:hover { transform: translateY(-4px); box-shadow: 0 28px 54px -32px rgba(16,24,40,.45); }
.ab-avatar { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; margin: 0 auto; font-size: 23px; font-weight: 800; color: #fff; letter-spacing: .02em;
  background: linear-gradient(150deg, var(--c), color-mix(in srgb, var(--c) 58%, #000)); box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--c) 55%, transparent); }
.ab-member h3 { font-size: 17px; font-weight: 700; color: var(--fg-black); margin-top: 18px; }
.ab-role { margin-top: 4px; font-size: 13px; font-weight: 700; color: #1e6ef5; letter-spacing: .01em; }
.ab-member p { margin-top: 12px; color: var(--fg-mid); line-height: 1.6; font-size: 14px; }

@media (max-width: 900px) { .ab-principles, .ab-team { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px) { .ab-principles, .ab-team { grid-template-columns: 1fr; max-width: 380px; margin-left: auto; margin-right: auto; } }

/* ===================== About: colour + animation pass ===================== */
.ab-hero { position: relative; overflow: hidden; }
.ab-hero-orbs { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ab-orb { position: absolute; border-radius: 50%; filter: blur(54px); opacity: .34; }
.ab-orb.o1 { width: 360px; height: 360px; left: -70px; top: -90px; background: radial-gradient(circle at 50% 50%, #1e6ef5, transparent 70%); animation: abDriftA 15s ease-in-out infinite; }
.ab-orb.o2 { width: 320px; height: 320px; right: -50px; top: -70px; background: radial-gradient(circle at 50% 50%, #7c5cff, transparent 70%); animation: abDriftB 19s ease-in-out infinite; }
.ab-orb.o3 { width: 280px; height: 280px; left: 28%; bottom: -140px; background: radial-gradient(circle at 50% 50%, #0bb5c9, transparent 70%); animation: abDriftB 17s ease-in-out infinite reverse; }
.ab-orb.o4 { width: 240px; height: 240px; right: 20%; bottom: -120px; background: radial-gradient(circle at 50% 50%, #16a34a, transparent 70%); animation: abDriftA 21s ease-in-out infinite; }
@keyframes abDriftA { 0%,100% { transform: translate(0,0); } 50% { transform: translate(30px,22px); } }
@keyframes abDriftB { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-28px,26px); } }
.ab-grad { background: linear-gradient(120deg, #1e6ef5, #7c5cff 50%, #0bb5c9); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Our story + animated growth SVG */
.ab-story-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px,5vw,72px); align-items: center; }
.ab-story-text h2 { color: var(--fg-black); }
.ab-story-text p { margin-top: 16px; color: var(--fg-mid); line-height: 1.75; }
.ab-story-text p:first-of-type { font-size: 18px; color: var(--fg-dark); }
.ab-story-visual { position: relative; }
.ab-story-glow { position: absolute; inset: -8% -4% -4% -8%; z-index: 0; pointer-events: none; filter: blur(46px); opacity: .5;
  background: radial-gradient(45% 55% at 60% 35%, color-mix(in srgb,#1e6ef5 36%,transparent), transparent 70%), radial-gradient(40% 50% at 20% 85%, color-mix(in srgb,#7c5cff 30%,transparent), transparent 70%); }
.ab-growth { position: relative; z-index: 1; width: 100%; height: auto; display: block; filter: drop-shadow(0 30px 50px rgba(16,24,40,.18)); }
.ab-story-visual .ab-line { stroke-dasharray: 720; stroke-dashoffset: 720; }
.ab-story-visual.in .ab-line { animation: abDraw 2.4s var(--ease) forwards .2s; }
.ab-story-visual .ab-area { opacity: 0; }
.ab-story-visual.in .ab-area { animation: abFadeIn 1s var(--ease) forwards 1.8s; }
.ab-story-visual .ab-node, .ab-story-visual .ab-enddot, .ab-story-visual .ab-pulse { transform-box: fill-box; transform-origin: center; opacity: 0; }
.ab-story-visual.in .ab-node { animation: abPop .5s var(--ease) forwards; }
.ab-story-visual.in .ab-node.n1 { animation-delay: .9s; }
.ab-story-visual.in .ab-node.n2 { animation-delay: 1.45s; }
.ab-story-visual.in .ab-enddot { animation: abPop .5s var(--ease) forwards 2.1s; }
.ab-story-visual.in .ab-pulse { animation: abRing 2.6s ease-out infinite 2.5s; }
@keyframes abDraw { to { stroke-dashoffset: 0; } }
@keyframes abFadeIn { to { opacity: 1; } }
@keyframes abPop { 0% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } }
@keyframes abRing { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }
.ab-fchip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px; border-radius: 13px; background: rgba(255,255,255,.93); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--br-hairline); box-shadow: 0 18px 40px -16px rgba(16,24,40,.4); font-size: 12.5px; color: var(--fg-dark); white-space: nowrap; }
.ab-fchip strong { font-weight: 800; }
.ab-fchip-1 { top: 4%; left: -4%; animation: spfloat 5.5s ease-in-out infinite; }
.ab-fchip-2 { bottom: 8%; right: -3%; animation: spfloat 6.5s ease-in-out infinite reverse; }
.ab-fchip-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; flex: 0 0 auto; background: linear-gradient(150deg,#16a34a,#0bb5c9); }
.ab-fchip-ic svg { width: 16px; height: 16px; }
.ab-fchip-stars { color: #fbbc05; letter-spacing: 1px; }
@media (max-width: 860px) { .ab-story-grid { grid-template-columns: 1fr; gap: 40px; } .ab-story-visual { order: -1; } }
@media (max-width: 520px) { .ab-fchip { display: none; } }

/* By the numbers */
.ab-numgrid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.ab-num { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--br-hairline); border-radius: 18px; padding: 32px 22px; text-align: center; box-shadow: 0 16px 40px -30px rgba(16,24,40,.35); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.ab-num:hover { transform: translateY(-4px); box-shadow: 0 28px 54px -32px rgba(16,24,40,.45); }
.ab-num::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 45%, #8b5cf6)); }
.ab-num-v { font-size: clamp(26px,3.2vw,40px); font-weight: 800; letter-spacing: -.02em; line-height: 1; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 55%, #000)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ab-num-suf { font-size: .58em; font-weight: 800; }
.ab-num-l { margin-top: 12px; font-size: 13.5px; color: var(--fg-mid); line-height: 1.45; }
@media (max-width: 820px) { .ab-numgrid { grid-template-columns: repeat(2,1fr); } }

/* Principles: colourised (override earlier hardcoded blue) */
.ab-principle-ic { background: color-mix(in srgb, var(--c) 13%, #fff); color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 22%, #fff); }
.ab-principle:hover { border-color: color-mix(in srgb, var(--c) 38%, #fff); }

/* Why businesses trust us */
.ab-trust { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.ab-tcard { background: #fff; border: 1px solid var(--br-hairline); border-radius: 18px; padding: 30px 26px; box-shadow: 0 16px 40px -30px rgba(16,24,40,.35); transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.ab-tcard:hover { transform: translateY(-5px); box-shadow: 0 30px 56px -32px rgba(16,24,40,.46); border-color: color-mix(in srgb, var(--c) 36%, #fff); }
.ab-tcard-ic { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; color: #fff; background: linear-gradient(150deg, var(--c), color-mix(in srgb, var(--c) 60%, #000)); box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--c) 55%, transparent); }
.ab-tcard-ic svg { width: 24px; height: 24px; }
.ab-tcard h3 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--fg-black); margin-top: 20px; }
.ab-tcard p { margin-top: 10px; color: var(--fg-mid); line-height: 1.62; font-size: 14.7px; }
@media (max-width: 860px) { .ab-trust { grid-template-columns: 1fr; max-width: 540px; margin-left: auto; margin-right: auto; } }

/* Team: colour-aware avatar + role */
.ab-role { color: var(--c); }
.ab-member:hover .ab-avatar { box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 14%, transparent), 0 16px 32px -12px color-mix(in srgb, var(--c) 55%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .ab-orb, .ab-fchip, .ab-story-visual.in .ab-line, .ab-story-visual.in .ab-area, .ab-story-visual.in .ab-node, .ab-story-visual.in .ab-enddot, .ab-story-visual.in .ab-pulse { animation: none !important; }
  .ab-story-visual .ab-line { stroke-dashoffset: 0; }
  .ab-story-visual .ab-area, .ab-story-visual .ab-node, .ab-story-visual .ab-enddot { opacity: 1; }
}

/* ===================== About team: photo cards ===================== */
.ab-team { grid-template-columns: repeat(4,1fr); gap: 22px; }
.ab-member { padding: 0; text-align: left; overflow: hidden; border-radius: 20px; }
.ab-member-photo { position: relative; aspect-ratio: 1 / 1; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--c), color-mix(in srgb, var(--c) 50%, #000)); }
.ab-member-photo::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(130% 95% at 28% 0%, rgba(255,255,255,.18), transparent 55%); }
.ab-member-photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; z-index: 0; background: linear-gradient(180deg, transparent, rgba(0,0,0,.16)); }
.ab-member-photo img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease); }
.ab-member:hover .ab-member-photo img { transform: scale(1.06); }
.ab-member-mono { position: relative; z-index: 1; font-size: clamp(40px,4.8vw,60px); font-weight: 800; color: rgba(255,255,255,.96); letter-spacing: .02em;
  text-shadow: 0 8px 24px rgba(0,0,0,.25); }
.ab-member-info { padding: 22px 22px 26px; text-align: center; }
.ab-member-info h3 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--fg-black); margin-top: 0; }
.ab-member-info .ab-role { margin-top: 3px; font-size: 13px; font-weight: 700; color: var(--c); }
.ab-member-info p { margin-top: 12px; color: var(--fg-mid); line-height: 1.6; font-size: 14px; }
@media (max-width: 900px) { .ab-team { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px) { .ab-team { grid-template-columns: 1fr; max-width: 340px; margin-left: auto; margin-right: auto; } }

/* ===================== Contact form ===================== */
.cf-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 26px; align-items: start; }
.cf-card { background: #fff; border: 1px solid var(--br-hairline); border-radius: 20px; box-shadow: 0 18px 46px -34px rgba(16,24,40,.4); }
.cf-form { padding: clamp(26px,3vw,40px); }
.cf-form .eyebrow { display: block; }
.cf-intro { margin-top: 14px; color: var(--fg-mid); line-height: 1.6; }
.cf-error { margin-top: 18px; padding: 12px 16px; border-radius: 12px; background: #fdecec; border: 1px solid #f6c9c9; color: #b3261e; font-size: 14px; }
.cf-field { margin-top: 18px; }
.cf-field > label { display: block; font-size: 13px; font-weight: 700; color: var(--fg-dark); margin-bottom: 8px; }
.cf-opt { font-weight: 500; color: var(--fg-mid); }
.cf-field input, .cf-field textarea, .cf-select select { width: 100%; font: inherit; font-size: 15px; color: var(--fg-black); background: #f7f9fc;
  border: 1px solid var(--br-hairline); border-radius: 12px; padding: 13px 15px; transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease); }
.cf-field textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
.cf-field input::placeholder, .cf-field textarea::placeholder { color: #9aa3b2; }
.cf-field input:focus, .cf-field textarea:focus, .cf-select select:focus { outline: none; background: #fff; border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(30,110,245,.14); }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cf-select { position: relative; }
.cf-select select { appearance: none; -webkit-appearance: none; padding-right: 42px; cursor: pointer; }
.cf-chev { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--fg-mid); pointer-events: none; }
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cf-submit { margin-top: 24px; width: 100%; justify-content: center; }
.cf-fine { margin-top: 16px; font-size: 12.5px; color: var(--fg-mid); }
.cf-fine a, .cf-recaptcha a { color: var(--brand-blue); font-weight: 600; }
.cf-recaptcha { margin-top: 8px; font-size: 11.5px; color: var(--fg-mid); opacity: .8; }

.cf-aside { display: flex; flex-direction: column; gap: 18px; }
.cf-info { padding: 22px 24px; }
.cf-card-head { display: flex; align-items: flex-start; gap: 12px; }
.cf-card-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--brand-blue); background: #eaf1ff; border: 1px solid #d8e4ff; }
.cf-card-ic svg { width: 19px; height: 19px; }
.cf-card-head strong { display: block; font-size: 15px; font-weight: 700; color: var(--fg-black); }
.cf-card-head > div > span { font-size: 13px; color: var(--fg-mid); }
.cf-rows { margin-top: 16px; border-top: 1px solid var(--br-hairline); }
.cf-line { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--br-hairline); font-size: 14px; }
.cf-line:last-child { border-bottom: 0; }
.cf-line > span { color: var(--fg-mid); }
.cf-line a { color: var(--brand-blue); font-weight: 600; }
.cf-line > strong { color: var(--fg-black); font-weight: 700; font-size: 13.5px; }
.cf-urgent { padding: 24px; background: linear-gradient(160deg, #fff, #fff4ec); border-color: #fbd9bf; }
.cf-urgent-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: #f5862e; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.cf-urgent-tag svg { width: 13px; height: 13px; }
.cf-urgent h3 { margin-top: 14px; font-size: 18px; font-weight: 700; color: var(--fg-black); }
.cf-urgent p { margin-top: 9px; color: var(--fg-mid); line-height: 1.6; font-size: 14px; }
.cf-urgent-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-weight: 700; font-size: 14px; color: #d96a16; }
@media (max-width: 880px) { .cf-grid { grid-template-columns: 1fr; } }
@media (max-width: 460px) { .cf-row { grid-template-columns: 1fr; } }

/* ===================== Thank you page ===================== */
.ty-sec { position: relative; overflow: hidden; padding-top: clamp(120px,15vw,180px); padding-bottom: clamp(72px,9vw,120px); }
.ty-orbs { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ty-orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .3; }
.ty-orb.t1 { width: 360px; height: 360px; left: -60px; top: -60px; background: radial-gradient(circle, #22c55e, transparent 70%); }
.ty-orb.t2 { width: 320px; height: 320px; right: -50px; top: 10%; background: radial-gradient(circle, #0bb5c9, transparent 70%); }
.ty-check { position: relative; display: inline-block; }
.ty-check::before { content: ""; position: absolute; inset: -22px; border-radius: 50%; background: radial-gradient(circle, rgba(34,197,94,.32), transparent 65%); animation: tyGlow 2.6s ease-in-out infinite; }
.ty-check svg { position: relative; width: 96px; height: 96px; filter: drop-shadow(0 18px 30px rgba(16,160,80,.35)); }
.ty-badge { transform-box: fill-box; transform-origin: center; animation: tyPop .55s var(--ease) both; }
.ty-tick { stroke-dasharray: 64; stroke-dashoffset: 64; animation: tyDraw .5s var(--ease) forwards .45s; }
@keyframes tyPop { 0% { transform: scale(0); opacity: 0; } 62% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
@keyframes tyDraw { to { stroke-dashoffset: 0; } }
@keyframes tyGlow { 0%,100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.12); opacity: 1; } }
.ty-h { font-size: clamp(30px,4.4vw,52px); font-weight: 800; letter-spacing: -.025em; line-height: 1.08; color: var(--fg-black); margin-top: 14px; }
.ty-sub { max-width: 600px; margin: 18px auto 0; color: var(--fg-mid); font-size: 18px; line-height: 1.7; }
.ty-next { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; max-width: 760px; margin: 42px auto 0; text-align: left; }
.ty-step { display: flex; align-items: flex-start; gap: 12px; background: #fff; border: 1px solid var(--br-hairline); border-radius: 16px; padding: 18px 18px; box-shadow: 0 14px 36px -30px rgba(16,24,40,.35); }
.ty-step-n { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 800; color: #fff; background: linear-gradient(150deg,#22c55e,#0bb5c9); }
.ty-step strong { display: block; font-size: 14.5px; color: var(--fg-black); }
.ty-step span { font-size: 13px; color: var(--fg-mid); }
.ty-cta { display: flex; justify-content: center; gap: 12px; margin-top: 40px; flex-wrap: wrap; }
.ty-urgent { margin-top: 26px; font-size: 14px; color: var(--fg-mid); }
.ty-urgent a { color: var(--brand-blue); font-weight: 600; }
@media (max-width: 620px) { .ty-next { grid-template-columns: 1fr; max-width: 380px; } }
@media (prefers-reduced-motion: reduce) { .ty-badge, .ty-tick, .ty-check::before { animation: none !important; } .ty-tick { stroke-dashoffset: 0; } }

/* ===================== Contact page (colourful background across whole page) ===================== */
.contact-page { position: relative; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, #1e6ef5 11%, #fff) 0%, #f5f8fd 24%, #f5f8fd 100%); }
.contact-page > section { position: relative; z-index: 1; }
.contact-page-orbs { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ch-orb { position: absolute; border-radius: 50%; filter: blur(58px); opacity: .3; }
.ch-orb.c1 { width: 340px; height: 340px; left: -60px; top: -60px; background: radial-gradient(circle, #1e6ef5, transparent 70%); animation: abDriftA 16s ease-in-out infinite; }
.ch-orb.c2 { width: 320px; height: 320px; right: -50px; top: -40px; background: radial-gradient(circle, #7c5cff, transparent 70%); animation: abDriftB 19s ease-in-out infinite; }
.ch-orb.c3 { width: 300px; height: 300px; left: 8%; top: 46%; background: radial-gradient(circle, #0bb5c9, transparent 70%); animation: abDriftA 18s ease-in-out infinite reverse; }
.ch-orb.c4 { width: 280px; height: 280px; right: 4%; bottom: 4%; background: radial-gradient(circle, #16a34a, transparent 70%); animation: abDriftB 22s ease-in-out infinite; }

.contact-hero { position: relative; padding-top: clamp(120px,14vw,176px); padding-bottom: clamp(36px,5vw,64px); background: transparent; }
.contact-hero-h { font-size: clamp(34px,5vw,58px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; color: var(--fg-black); margin-top: 16px; }
.contact-hero-sub { max-width: 600px; margin: 20px auto 0; color: var(--fg-mid); font-size: 18px; line-height: 1.7; }
.cf-sec { background: transparent; }
@media (prefers-reduced-motion: reduce) { .ch-orb { animation: none; } }

/* ===================== Contact: proposal CTA box (replaces urgent) ===================== */
.cf-proposal { position: relative; overflow: hidden; padding: 28px 24px; color: #fff; border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(155deg, #2563eb 0%, #6d4bf0 100%); box-shadow: 0 30px 62px -34px rgba(50,40,180,.6); }
.cf-proposal-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .9;
  background: radial-gradient(55% 80% at 92% 0%, rgba(255,255,255,.26), transparent 60%), radial-gradient(55% 85% at 0% 100%, rgba(11,181,201,.45), transparent 60%); }
.cf-proposal > * { position: relative; z-index: 1; }
.cf-proposal-tag { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.cf-proposal-tag svg { width: 14px; height: 14px; }
.cf-proposal h3 { margin-top: 16px; font-size: 21px; font-weight: 800; letter-spacing: -.01em; color: #fff; }
.cf-proposal-tag { color: #fff; }
.cf-proposal p { margin-top: 9px; color: rgba(255,255,255,.86); line-height: 1.6; font-size: 14px; }
.cf-proposal-btn { margin-top: 18px; width: 100%; justify-content: center; background: #fff; color: var(--fg-dark); }
.cf-proposal-btn:hover { background: #eef1f6; color: var(--fg-dark); }

/* ===================== Contact: compact pass (no hero) ===================== */
.cf-form { padding: clamp(20px,2.4vw,30px); }
.cf-intro { font-size: 14px !important; margin-top: 10px; line-height: 1.55; }
.cf-field { margin-top: 13px; }
.cf-field > label { font-size: 12.5px; margin-bottom: 6px; }
.cf-field input, .cf-field textarea, .cf-select select { font-size: 14px; padding: 10px 13px; border-radius: 10px; }
.cf-field textarea { min-height: 96px; }
.cf-submit { margin-top: 18px; }
.cf-fine { margin-top: 12px; font-size: 13px !important; }
.cf-grid { gap: 22px; }
.cf-aside { gap: 16px; }
.cf-info { padding: 18px 20px; }
.cf-card-ic { width: 34px; height: 34px; border-radius: 10px; }
.cf-card-ic svg { width: 17px; height: 17px; }
.cf-card-head strong { font-size: 14px; }
.cf-card-head > div > span { font-size: 12.5px; }
.cf-rows { margin-top: 12px; }
.cf-line { padding: 9px 0; font-size: 13.5px; }
.cf-line > strong { font-size: 13px; }
.cf-proposal { padding: 22px; }
.cf-proposal h3 { font-size: 18px; margin-top: 12px; }
.cf-proposal p { font-size: 13.5px !important; margin-top: 8px; }
.cf-proposal-btn { margin-top: 16px; }

/* ===================== Request a proposal page ===================== */
.pr-page { position: relative; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, #1e6ef5 9%, #fff) 0%, #f5f8fd 22%, #f5f8fd 100%); }
.pr-page-orbs { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pr-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 26px; align-items: start; }

/* square service tiles */
.pr-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pr-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0; text-align: left; padding: 16px 14px; border-radius: 14px;
  background: #f7f9fc; border: 1.5px solid var(--br-hairline); cursor: pointer; font-family: inherit; transition: border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); }
.pr-tile:hover { border-color: color-mix(in srgb, #1e6ef5 40%, #fff); background: #fff; transform: translateY(-2px); }
.pr-tile-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: #eaf1ff; color: #1e6ef5; border: 1px solid #d8e4ff; transition: background .18s var(--ease), color .18s var(--ease); }
.pr-tile-ic svg { width: 20px; height: 20px; }
.pr-tile-l { margin-top: 11px; font-size: 14px; font-weight: 700; color: var(--fg-black); }
.pr-tile-s { margin-top: 2px; font-size: 11.5px; color: var(--fg-mid); line-height: 1.35; }
.pr-tile-check { position: absolute; top: 11px; right: 11px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #1e6ef5; color: #fff; opacity: 0; transform: scale(.5); transition: opacity .18s var(--ease), transform .18s var(--ease); }
.pr-tile-check svg { width: 12px; height: 12px; }
.pr-tile.active { border-color: #1e6ef5; background: #fff; box-shadow: 0 0 0 3px rgba(30,110,245,.12), 0 16px 36px -26px rgba(30,110,245,.5); }
.pr-tile.active .pr-tile-ic { background: linear-gradient(150deg, #1e6ef5, #6a4bf0); color: #fff; border-color: transparent; }
.pr-tile.active .pr-tile-check { opacity: 1; transform: scale(1); }
@media (max-width: 560px) { .pr-tiles { grid-template-columns: repeat(2, 1fr); } }

/* reveal animation for conditional + budget */
.pr-reveal[hidden] { display: none; }
.pr-reveal { animation: prReveal .35s var(--ease) both; }
@keyframes prReveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* selectable chips */
.pr-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.pr-chip { padding: 9px 15px; border-radius: 999px; background: #f7f9fc; border: 1.5px solid var(--br-hairline); cursor: pointer; font-family: inherit;
  font-size: 13.5px; font-weight: 600; color: var(--fg-dark); transition: border-color .16s var(--ease), background .16s var(--ease), color .16s var(--ease), transform .16s var(--ease); }
.pr-chip:hover { border-color: color-mix(in srgb, #1e6ef5 40%, #fff); }
.pr-chip.active { border-color: #1e6ef5; background: #1e6ef5; color: #fff; transform: translateY(-1px); }

/* budget range slider */
.pr-budget-field label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pr-budget-out { font-size: 18px; font-weight: 800; letter-spacing: -.02em;
  background: linear-gradient(135deg, #1e6ef5, #6a4bf0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pr-range { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 999px; background: #e7ebf2; outline: none; margin-top: 4px; cursor: pointer; }
.pr-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid #1e6ef5; box-shadow: 0 4px 12px -2px rgba(30,110,245,.5); cursor: grab; transition: transform .12s var(--ease); }
.pr-range::-webkit-slider-thumb:active { transform: scale(1.15); cursor: grabbing; }
.pr-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid #1e6ef5; box-shadow: 0 4px 12px -2px rgba(30,110,245,.5); cursor: grab; }
.pr-range::-moz-range-track { height: 8px; border-radius: 999px; background: transparent; }
.pr-scale { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--fg-mid); }
.pr-help { margin-top: 8px; font-size: 12.5px; color: var(--fg-mid); }

/* overview (right) */
.pr-overview { padding: 26px 24px; position: sticky; top: 88px; }
.pr-overview-h { margin-top: 12px; font-size: clamp(20px,2.4vw,26px); font-weight: 800; letter-spacing: -.02em; color: var(--fg-black); line-height: 1.15; }
.pr-overview-p { margin-top: 12px; color: var(--fg-mid); line-height: 1.65; font-size: 14px; }
.pr-get-label { margin-top: 22px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-mid); }
.pr-get { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.pr-get li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--fg-dark); }
.pr-get-ic { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #e3f6ea; color: #16a34a; margin-top: 1px; }
.pr-get-ic svg { width: 13px; height: 13px; }
.pr-reassure { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--br-hairline); font-size: 12.5px; color: var(--fg-mid); line-height: 1.6; }

@media (max-width: 880px) { .pr-grid { grid-template-columns: 1fr; } .pr-overview { position: static; } }

/* ===================== Proposal page: compact tiles, bigger labels, descriptions, currency, errors ===================== */
/* compact horizontal tiles (no description) */
.pr-tile { flex-direction: row; align-items: center; gap: 11px; padding: 12px 38px 12px 13px; }
.pr-tile-ic { width: 34px; height: 34px; border-radius: 9px; }
.pr-tile-ic svg { width: 18px; height: 18px; }
.pr-tile-l { margin-top: 0; font-size: 12.5px; font-weight: 700; line-height: 1.2; }
.pr-tile-check { top: 50%; right: 12px; transform: translateY(-50%) scale(.5); }
.pr-tile.active .pr-tile-check { transform: translateY(-50%) scale(1); }

/* bigger field labels + brief descriptions (override the compact 12.5px label) */
.pr-form .cf-field > label { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.cf-desc { margin: 0 0 9px !important; font-size: 12.5px !important; color: var(--fg-mid); line-height: 1.45; }

/* budget: label block, currency selector + readout row */
.pr-budget-field label { display: block; }
.pr-budget-row { display: flex; align-items: center; gap: 12px; margin-top: 2px; margin-bottom: 6px; }
.pr-currency-wrap { position: relative; flex: 0 0 auto; }
.pr-currency { appearance: none; -webkit-appearance: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--fg-black);
  background: #f7f9fc; border: 1.5px solid var(--br-hairline); border-radius: 10px; padding: 9px 32px 9px 12px; cursor: pointer; }
.pr-currency:focus { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(30,110,245,.14); }
.pr-currency-wrap .cf-chev { right: 10px; }
.pr-budget-out { font-size: 20px; }

/* validation / error states */
.cf-field.cf-invalid input, .cf-field.cf-invalid textarea, .cf-field.cf-invalid .cf-select select, .cf-field.cf-invalid .pr-currency {
  border-color: #e5484d !important; box-shadow: 0 0 0 3px rgba(229,72,77,.13) !important; }
.cf-field.cf-invalid .pr-tiles, .cf-field.cf-invalid .pr-chips { outline: 1.5px solid #f1b4b6; outline-offset: 5px; border-radius: 12px; }
.cf-err { margin: 7px 0 0 !important; font-size: 12px !important; color: #d3372b; font-weight: 600; }

/* ===================== Proposal page v2: stacked layout (overview on top, full-width form), roomier fields ===================== */
.pr-sec .container-lg { max-width: 940px; }

/* overview now sits above the form, centred and full width */
.pr-overview-top { text-align: center; max-width: 780px; margin: 0 auto 32px; }
.pr-overview-top .pr-overview-h { margin-top: 8px; font-size: clamp(26px, 3.4vw, 38px); }
.pr-overview-top .pr-overview-p { max-width: 640px; margin: 14px auto 0; font-size: 15px; }
.pr-overview-top .pr-get { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 11px 26px; margin-top: 22px; }
.pr-overview-top .pr-get li { font-size: 13.5px; }

/* form spans the full width with more breathing room between fields */
.pr-form { max-width: 100%; padding: clamp(24px, 3vw, 40px); }
.pr-form .cf-field { margin-top: 28px; }
.pr-form .cf-field:first-of-type { margin-top: 4px; }
.pr-form .cf-row { gap: 22px; margin-top: 28px; }
.pr-form .cf-row .cf-field { margin-top: 0; }
.pr-form .pr-tiles { grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 760px) { .pr-form .pr-tiles { grid-template-columns: repeat(2, 1fr); } }

/* required-field star */
.req { color: #e5484d; font-weight: 700; margin-left: 1px; }

/* budget reveal sits at the end of step 3 */
#prBudgetReveal[hidden] { display: none; }
.pr-budget-out { margin-bottom: 6px; }
.pr-rate-note { margin-top: 8px; font-size: 11.5px; color: var(--fg-mid); font-style: italic; }

/* ===================== Proposal page v3: 3-step wizard, richer tiles, bigger type ===================== */
/* step visibility + entrance */
.pr-step[hidden] { display: none; }
.pr-step { animation: prStepIn .4s var(--ease) both; }
@keyframes prStepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pr-step > .cf-field:first-child, .pr-step > .cf-row:first-child { margin-top: 6px; }

/* bigger, easy-to-read questions + descriptions */
.pr-form label.cf-q { font-size: 17px; font-weight: 800; color: var(--fg-black); letter-spacing: -.01em; margin-bottom: 5px; line-height: 1.3; }
.pr-form .cf-desc { font-size: 14px !important; line-height: 1.5; margin-bottom: 13px !important; }
.pr-form .cf-field input, .pr-form .cf-field textarea, .pr-form .cf-select select { font-size: 15px; padding: 13px 15px; border-radius: 12px; }

/* progress bar */
.pr-prog { margin: 2px 0 28px; }
.pr-prog-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 11px; gap: 12px; }
.pr-prog-count { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-mid); }
.pr-prog-count b { color: var(--brand-blue); }
.pr-prog-name { font-size: 14.5px; font-weight: 800; color: var(--fg-black); }
.pr-prog-track { height: 7px; border-radius: 999px; background: #e7ebf2; overflow: hidden; }
.pr-prog-fill { display: block; height: 100%; width: 33.33%; border-radius: 999px; background: linear-gradient(90deg, #1e6ef5, #6a4bf0); box-shadow: 0 2px 10px -2px rgba(30,110,245,.6); transition: width .45s cubic-bezier(.4,0,.2,1); }
.pr-prog-dots { display: flex; justify-content: space-between; margin-top: 13px; }
.pr-prog-dot { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--fg-mid); transition: color .25s var(--ease); }
.pr-prog-dot i { width: 25px; height: 25px; border-radius: 50%; display: grid; place-items: center; background: #eef1f6; color: var(--fg-mid); font-style: normal; font-size: 12px; font-weight: 800; border: 1.5px solid transparent; transition: all .25s var(--ease); }
.pr-prog-dot em { font-style: normal; }
.pr-prog-dot.is-active { color: var(--fg-black); }
.pr-prog-dot.is-active i { background: linear-gradient(150deg, #1e6ef5, #6a4bf0); color: #fff; box-shadow: 0 6px 16px -6px rgba(30,110,245,.7); transform: scale(1.06); }
.pr-prog-dot.is-done { color: var(--fg-dark); }
.pr-prog-dot.is-done i { background: #e3f6ea; color: #16a34a; border-color: #bfe9cd; }
@media (max-width: 560px) { .pr-prog-dot em { display: none; } }

/* RICH desktop service tiles (colour-coded, vertical). --tc is the per-service accent. */
.pr-form .pr-tiles { grid-template-columns: repeat(4, 1fr); gap: 13px; }
.pr-tile { flex-direction: column; align-items: flex-start; gap: 0; text-align: left; padding: 18px 16px 16px; min-height: 134px; border-radius: 16px; }
.pr-tile-ic { width: 42px; height: 42px; border-radius: 12px; background: color-mix(in srgb, var(--tc, #1e6ef5) 12%, #fff); color: var(--tc, #1e6ef5); border: 1px solid color-mix(in srgb, var(--tc, #1e6ef5) 24%, #fff); }
.pr-tile-ic svg { width: 21px; height: 21px; }
.pr-tile-l { margin-top: 13px; font-size: 15px; font-weight: 800; color: var(--fg-black); line-height: 1.2; }
.pr-tile-s { display: block; margin-top: 5px; font-size: 12px; color: var(--fg-mid); line-height: 1.4; }
.pr-tile-check { top: 12px; right: 12px; transform: scale(.5); background: var(--tc, #1e6ef5); }
.pr-tile:hover { border-color: color-mix(in srgb, var(--tc, #1e6ef5) 48%, #fff); box-shadow: 0 18px 36px -26px color-mix(in srgb, var(--tc, #1e6ef5) 80%, transparent); transform: translateY(-3px); }
.pr-tile.active { border-color: var(--tc, #1e6ef5); background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc, #1e6ef5) 15%, transparent), 0 18px 42px -26px var(--tc, #1e6ef5); }
.pr-tile.active .pr-tile-ic { background: var(--tc, #1e6ef5); color: #fff; border-color: transparent; }
.pr-tile.active .pr-tile-check { transform: scale(1); }
@media (max-width: 980px) { .pr-form .pr-tiles { grid-template-columns: repeat(3, 1fr); } }

/* COMPACT tiles on mobile only */
@media (max-width: 560px) {
  .pr-form .pr-tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pr-tile { flex-direction: row; align-items: center; gap: 11px; padding: 12px 32px 12px 12px; min-height: 0; }
  .pr-tile-ic { width: 34px; height: 34px; border-radius: 9px; }
  .pr-tile-ic svg { width: 18px; height: 18px; }
  .pr-tile-l { margin-top: 0; font-size: 13px; }
  .pr-tile-s { display: none; }
  .pr-tile-check { top: 50%; right: 10px; transform: translateY(-50%) scale(.5); }
  .pr-tile.active .pr-tile-check { transform: translateY(-50%) scale(1); }
}

/* wizard nav */
.pr-nav { display: flex; align-items: center; gap: 12px; margin-top: 32px; }
.pr-nav button[hidden] { display: none !important; } /* .btn sets display:inline-flex, which would otherwise beat the hidden attribute */
.pr-nav .pr-next, .pr-nav .pr-submit { margin-left: auto; }
.pr-back { background: #fff; color: var(--fg-dark); border: 1.5px solid var(--br-hairline); display: inline-flex; align-items: center; gap: 7px; }
.pr-back:hover { border-color: var(--brand-blue); color: var(--brand-blue); background: #f7f9fc; }

/* ===================== Proposal page v4: wider + visual polish ===================== */
.pr-sec .container-lg { max-width: 1080px; }

/* softer, deeper page backdrop */
.pr-page { background: linear-gradient(180deg, color-mix(in srgb, #1e6ef5 11%, #fff) 0%, #eef3fb 30%, #f6f8fc 100%); }

/* overview: badge eyebrow + pill highlights */
.pr-overview-top { max-width: 820px; margin-bottom: 38px; }
.pr-overview-top .eyebrow { display: inline-block; padding: 6px 14px; border-radius: 999px; background: #eaf1ff; border: 1px solid #d4e3ff; font-weight: 800; letter-spacing: .04em; }
.pr-overview-top .pr-overview-h { font-size: clamp(28px, 3.8vw, 42px); line-height: 1.08; }
.pr-overview-top .pr-overview-p { font-size: 15.5px; }
.pr-overview-top .pr-get { gap: 10px 12px; margin-top: 24px; }
.pr-overview-top .pr-get li { background: #fff; border: 1px solid var(--br-hairline); padding: 9px 15px 9px 11px; border-radius: 999px; box-shadow: 0 8px 22px -16px rgba(16,24,40,.55); font-weight: 600; }

/* form card: gradient top accent, deeper shadow, roomier */
.pr-form { position: relative; padding: clamp(28px, 3.2vw, 48px); border-radius: 22px; box-shadow: 0 40px 90px -56px rgba(16,24,40,.5), 0 2px 0 rgba(255,255,255,.6) inset; }
.pr-form::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 22px 22px 0 0; background: linear-gradient(90deg, #1e6ef5, #6a4bf0 55%, #0bb5c9); }

/* roomier tiles at full width */
@media (min-width: 981px) { .pr-tile { min-height: 142px; padding: 20px 18px 17px; } }

/* budget step as a highlighted panel with a big readout */
#prBudgetReveal { background: linear-gradient(180deg, #f2f7ff, #fbfcff); border: 1px solid #e1ebfb; border-radius: 18px; padding: 22px 22px 24px; }
#prBudgetReveal .cf-desc { margin-bottom: 16px !important; }
.pr-budget-out { font-size: clamp(28px, 3.6vw, 36px); margin-bottom: 10px; }
.pr-range { height: 9px; }
.pr-scale { margin-top: 10px; font-weight: 600; }

/* nav buttons a touch larger for the wider canvas */
.pr-nav .btn { padding: 13px 24px; }

/* ============================================================================
 * BLOG — listing + single post (category sidebar left, content right)
 * ========================================================================== */
/* whole-page background like the contact page: soft blue->white gradient + floating orbs.
   Orbs live in their own overflow-clipped layer so the sticky sidebar still works. */
.blg-page { position: relative;
  background: linear-gradient(180deg, color-mix(in srgb, #1e6ef5 11%, #fff) 0%, #f5f8fd 24%, #f5f8fd 100%); }
.blg-page-orbs { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.blg-page > section { position: relative; z-index: 1; }

/* header — centred hero text on the shared page background */
.blg-head-sec { position: relative; text-align: center; padding-top: clamp(100px, 11vw, 138px); padding-bottom: clamp(52px, 7vw, 86px); }
.blg-head-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.blg-head-grid { position: absolute; inset: 0; opacity: .6;
  background-image: linear-gradient(rgba(30,110,245,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(30,110,245,.07) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(110% 80% at 50% 0%, #000 35%, transparent 78%);
  mask-image: radial-gradient(110% 80% at 50% 0%, #000 35%, transparent 78%); }
.blg-head-orb { position: absolute; border-radius: 50%; filter: blur(60px); }
.blg-head-orb.o1 { width: 380px; height: 380px; top: -130px; left: -30px; background: radial-gradient(circle, #7aa8ff, transparent 64%); opacity: .5; }
.blg-head-orb.o2 { width: 340px; height: 340px; top: -90px; right: 4%; background: radial-gradient(circle, #b79cff, transparent 64%); opacity: .42; }
.blg-head-orb.o3 { width: 320px; height: 320px; bottom: -170px; right: -40px; background: radial-gradient(circle, #7fe3ef, transparent 66%); opacity: .36; }

.blg-head { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; }
.blg-head-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #1357d6; background: #eaf1ff; border: 1px solid #d4e3ff; }
.blg-head-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: #1e6ef5; box-shadow: 0 0 0 4px rgba(30,110,245,.18); }
.blg-head-h { margin-top: 18px; font-size: clamp(32px, 4.4vw, 50px); font-weight: 800; letter-spacing: -.025em; line-height: 1.07; color: var(--fg-black); }
.blg-head-p { margin: 16px auto 0; font-size: clamp(15.5px, 1.6vw, 17.5px); line-height: 1.65; color: var(--fg-mid); max-width: 600px; }

/* small breathing space before the posts */
.blg-head-sec + .blg-main-sec { position: relative; z-index: 2; margin-top: clamp(6px, 1.5vw, 16px); }

/* two-column layout */
.blg-layout { display: grid; grid-template-columns: 264px 1fr; gap: clamp(24px, 3vw, 46px); align-items: start; }

/* sidebar */
.blg-side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 18px; }
.blg-side-card { background: #fff; border: 1px solid var(--br-hairline); border-radius: 18px; padding: 20px; box-shadow: 0 18px 44px -34px rgba(16,24,40,.4); }
.blg-side-h { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-mid); margin: 0 0 12px; }
.blg-cats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.blg-cat { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 11px; text-decoration: none; color: var(--fg-dark); font-size: 14px; font-weight: 600; transition: background .16s var(--ease), color .16s var(--ease); }
.blg-cat:hover { background: #f4f7fc; }
.blg-cat-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cc, #1e6ef5); flex: 0 0 auto; }
.blg-cat-name { flex: 1; }
.blg-cat-count { font-size: 12px; font-weight: 700; color: var(--fg-mid); background: #eef1f6; border-radius: 999px; padding: 2px 9px; }
.blg-cat.is-active { background: color-mix(in srgb, var(--cc, #1e6ef5) 12%, #fff); color: var(--cc, #1e6ef5); }
.blg-cat.is-active .blg-cat-count { background: color-mix(in srgb, var(--cc, #1e6ef5) 18%, #fff); color: var(--cc, #1e6ef5); }

.blg-side-cta { background: linear-gradient(155deg, #1e6ef5, #6a4bf0); color: #fff; border-radius: 18px; padding: 20px; box-shadow: 0 22px 48px -28px rgba(30,110,245,.7); }
.blg-side-cta h3 { font-size: 16px; font-weight: 800; color: #fff; margin: 0; letter-spacing: -.01em; }
.blg-side-cta p { font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.85); margin: 8px 0 14px; }
.blg-side-cta .btn { background: #fff; color: #1338a6; }
.blg-side-cta .btn:hover { background: #f0f4ff; }

/* main column */
.blg-main-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.blg-main-head h2 { font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: var(--fg-black); margin: 0; }
.blg-count { font-size: 13px; font-weight: 600; color: var(--fg-mid); }
.blg-empty { color: var(--fg-mid); font-size: 15px; padding: 30px 0; }

.blg-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.blg-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--br-hairline); border-radius: 16px; overflow: hidden; box-shadow: 0 16px 40px -32px rgba(16,24,40,.45); transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.blg-card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -34px rgba(16,24,40,.5); border-color: color-mix(in srgb, var(--cc, #1e6ef5) 40%, #fff); }
.blg-card-media { position: relative; display: grid; place-items: center; height: 300px; overflow: hidden;
  background:
    radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.5px) 0 0 / 16px 16px,
    radial-gradient(120% 120% at 78% 12%, color-mix(in srgb, var(--cc, #1e6ef5) 78%, #fff) 0%, var(--cc, #1e6ef5) 42%, color-mix(in srgb, var(--cc, #1e6ef5) 52%, #14182e) 100%); }
.blg-card-media img { width: 100%; height: 100%; object-fit: cover; }
.blg-card-ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: #fff;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.32); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  box-shadow: 0 12px 26px -14px rgba(0,0,0,.55); transition: transform .25s var(--ease); }
.blg-card-ic svg { width: 25px; height: 25px; }
.blg-card:hover .blg-card-ic { transform: scale(1.09) rotate(-3deg); }
.blg-card-body { display: flex; flex-direction: column; gap: 9px; padding: 18px; flex: 1; }
.blg-tag { align-self: flex-start; font-size: 11.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; text-decoration: none; color: var(--cc, #1e6ef5); background: color-mix(in srgb, var(--cc, #1e6ef5) 12%, #fff); border: 1px solid color-mix(in srgb, var(--cc, #1e6ef5) 22%, #fff); border-radius: 999px; padding: 4px 11px; }
.blg-card-h { font-size: 17px; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; margin: 2px 0 0; }
.blg-card-h a { color: var(--fg-black); text-decoration: none; }
.blg-card-h a:hover { color: var(--brand-blue); }
.blg-card-x { font-size: 13.5px; line-height: 1.6; color: var(--fg-mid); margin: 0; flex: 1; }
.blg-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: 12px; color: var(--fg-mid); margin-top: 4px; }
.blg-dot { opacity: .6; }

/* breadcrumbs */
.blg-crumbs { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--fg-mid); margin-bottom: 18px; padding-top: clamp(108px, 13vw, 150px); }
.blg-crumbs a { color: var(--fg-mid); text-decoration: none; }
.blg-crumbs a:hover { color: var(--brand-blue); }
.blg-post-sec { padding-top: 0; }

/* article */
.blg-article { background: #fff; border: 1px solid var(--br-hairline); border-radius: 20px; padding: clamp(24px, 3vw, 44px); box-shadow: 0 26px 60px -42px rgba(16,24,40,.5); }
.blg-article-h { margin: 12px 0 0; font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; letter-spacing: -.025em; line-height: 1.12; color: var(--fg-black); }
.blg-article-meta { margin-top: 14px; font-size: 13px; }
.blg-byline { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.blg-byline a { color: inherit; text-decoration: none; }
.blg-byline a:hover { text-decoration: underline; }
.blg-byline-av { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(150deg, #1e6ef5, #6d5cff); color: #fff; font-size: 11px; font-weight: 700; object-fit: cover; }
img.blg-byline-av { object-position: center top; }
img.blg-author-av { object-fit: cover; object-position: center top; }
.blg-author { display: flex; gap: 16px; align-items: flex-start; margin: 36px 0 4px; padding: 22px; border: 1px solid #e8ecf4; border-radius: 16px; background: #f9fbfe; }
.blg-author-av { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(150deg, #1e6ef5, #6d5cff); color: #fff; font-size: 21px; font-weight: 700; }
.blg-author-name { margin: 2px 0 6px; font-size: 15px; font-weight: 700; color: #131a2b; }
.blg-author-name a { color: inherit; text-decoration: none; }
.blg-author-name a:hover { text-decoration: underline; }
.blg-author-role { font-weight: 500; color: #6a7286; }
.blg-author-bio { margin: 0; font-size: 13.5px; line-height: 1.6; color: #41495d; }
.blg-hero-media { position: relative; display: grid; place-items: center; height: clamp(300px, 44vw, 400px); border-radius: 14px; overflow: hidden; margin: 24px 0 28px;
  background:
    radial-gradient(rgba(255,255,255,.13) 1px, transparent 1.5px) 0 0 / 18px 18px,
    radial-gradient(120% 120% at 80% 10%, color-mix(in srgb, var(--cc, #1e6ef5) 78%, #fff) 0%, var(--cc, #1e6ef5) 44%, color-mix(in srgb, var(--cc, #1e6ef5) 50%, #14182e) 100%); }
.blg-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.blg-hero-media .blg-card-ic { width: 66px; height: 66px; border-radius: 18px; }
.blg-hero-media .blg-card-ic svg { width: 32px; height: 32px; }

/* article prose */
.blg-content { font-size: 16.5px; line-height: 1.8; color: var(--fg-dark); }
.blg-content > p { margin: 0 0 18px; }
.blg-content h2 { font-size: clamp(20px, 2.4vw, 25px); font-weight: 800; letter-spacing: -.02em; color: var(--fg-black); margin: 30px 0 12px; }
.blg-content a { color: var(--brand-blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.blg-content ul, .blg-content ol { margin: 0 0 18px; padding-left: 22px; }
.blg-content li { margin-bottom: 7px; }

.blg-article-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--br-hairline); }
.blg-back { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: var(--fg-dark); text-decoration: none; }
.blg-back:hover { color: var(--brand-blue); }

/* social share bar */
.blg-share { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.blg-share-label { font-size: 13px; font-weight: 800; color: var(--fg-mid); letter-spacing: .02em; margin-right: 2px; }
.blg-share-btn { position: relative; width: 38px; height: 38px; border-radius: 11px; display: inline-grid; place-items: center; cursor: pointer; color: var(--fg-dark); background: #fff; border: 1.5px solid var(--br-hairline); transition: color .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); }
.blg-share-btn svg { width: 17px; height: 17px; }
.blg-share-btn:hover { color: #fff; background: var(--sh, #1e6ef5); border-color: var(--sh, #1e6ef5); transform: translateY(-2px); box-shadow: 0 12px 22px -12px var(--sh, #1e6ef5); }
.blg-share-copy.is-copied { color: #fff; background: #16a34a; border-color: #16a34a; }
.blg-share-copy.is-copied::after { content: 'Copied'; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: #0c0a14; color: #fff; font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 6px; white-space: nowrap; pointer-events: none; }
@media (max-width: 620px) { .blg-share { justify-content: flex-start; } }

/* pagination */
.blg-pager { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 38px; }
.blg-pager-num, .blg-pager-arrow { min-width: 40px; height: 40px; padding: 0 11px; border-radius: 11px; display: inline-grid; place-items: center; font-size: 14px; font-weight: 700; color: var(--fg-dark); background: #fff; border: 1.5px solid var(--br-hairline); text-decoration: none; transition: color .16s var(--ease), background .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease), box-shadow .16s var(--ease); }
.blg-pager-num:hover, .blg-pager-arrow:not(.is-disabled):hover { border-color: var(--brand-blue); color: var(--brand-blue); transform: translateY(-2px); box-shadow: 0 12px 22px -14px rgba(30,110,245,.6); }
.blg-pager-num.is-active { background: linear-gradient(150deg, #1e6ef5, #6a4bf0); color: #fff; border-color: transparent; box-shadow: 0 12px 24px -12px rgba(30,110,245,.7); }
.blg-pager-arrow.is-disabled { opacity: .38; cursor: default; pointer-events: none; }

.blg-related { margin-top: 40px; }
.blg-related-h { font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--fg-black); margin: 0 0 18px; }

/* responsive */
@media (max-width: 860px) {
  .blg-layout { grid-template-columns: 1fr; }
  .blg-side { position: static; flex-direction: column; }
  .blg-side-card { order: 0; }
}
@media (max-width: 620px) {
  .blg-grid { grid-template-columns: 1fr; }
  .blg-article-foot { flex-direction: column; align-items: stretch; }
}

/* ============================================================================
 * Modern header navigation (hover-only mega menu)
 * ========================================================================== */
.nav-main { gap: 4px; }
.nav-item {
  padding: 9px 14px; border-radius: 11px; font-size: 16px; font-weight: 500; letter-spacing: .1px;
  color: var(--fg-dark); background: transparent;
  transition: color .18s var(--ease), background .18s var(--ease), transform .12s var(--ease);
}
/* hover / open trigger: soft tinted pill */
.nav-item:hover,
.nav-has-mega:hover .nav-item,
.nav-has-mega.open .nav-item {
  color: var(--brand-blue);
  background: color-mix(in srgb, var(--brand-blue) 9%, transparent);
}
.nav-item:active { transform: translateY(1px); }

/* current page: blue text + a small gradient underline (no pill) */
.nav-item.active { color: var(--brand-blue); background: transparent; }
.nav-item.active::after {
  content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: 2px;
  width: 18px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #1e6ef5, #6a4bf0);
}

/* plus / minus indicator on menus with a submenu (plus closed, minus open) */
.nav-pm { position: relative; width: 10px; height: 10px; flex: 0 0 auto; margin-left: 2px; opacity: 1; }
.nav-pm::before, .nav-pm::after { content: ''; position: absolute; background: currentColor; border-radius: 2px; transition: opacity .2s var(--ease), transform .2s var(--ease); }
.nav-pm::before { top: 50%; left: 0; right: 0; height: 1.8px; transform: translateY(-50%); }
.nav-pm::after { left: 50%; top: 0; bottom: 0; width: 1.8px; transform: translateX(-50%); }
.nav-has-mega:hover .nav-pm, .nav-has-mega.open .nav-pm { opacity: 1; }
.nav-has-mega:hover .nav-pm::after, .nav-has-mega.open .nav-pm::after { opacity: 0; transform: translateX(-50%) scaleY(0); }

/* mega panel: deeper, softer, slightly tinted hairline */
.mega3 {
  border-radius: 18px; padding: 12px;
  border: 1px solid color-mix(in srgb, #1e6ef5 12%, var(--br-hairline));
  box-shadow: 0 34px 80px -40px rgba(16,24,40,.55), 0 4px 14px -8px rgba(16,24,40,.18);
}
.mega3-card { border-radius: 14px; transition: background .16s var(--ease), transform .16s var(--ease), box-shadow .16s var(--ease); }
.mega3-card:hover { box-shadow: 0 18px 34px -22px rgba(16,24,40,.42); }
.mega3-ico { transition: background .16s var(--ease), color .16s var(--ease), transform .16s var(--ease); }
.mega3-card:hover .mega3-ico { transform: translateY(-2px) scale(1.04); }

/* ============================================================================
 * Legal pages (Privacy, Terms, Refund, Cookies, GDPR)
 * ========================================================================== */
.legal-page { position: relative; background: linear-gradient(180deg, color-mix(in srgb, #1e6ef5 11%, #fff) 0%, #f5f8fd 22%, #f5f8fd 100%); }
.legal-orbs { position: absolute; inset: 0 0 auto 0; height: 460px; z-index: 0; overflow: hidden; pointer-events: none; }
.legal-page > section { position: relative; z-index: 1; }

.legal-hero { text-align: center; padding-top: clamp(116px, 13vw, 168px); padding-bottom: clamp(28px, 4vw, 48px); }
.legal-hero-in { max-width: 720px; margin: 0 auto; }
.legal-badge { display: inline-block; padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #1357d6; background: #eaf1ff; border: 1px solid #d4e3ff; }
.legal-title { margin-top: 16px; font-size: clamp(30px, 4.2vw, 46px); font-weight: 800; letter-spacing: -.025em; line-height: 1.08; color: var(--fg-black); }
.legal-lede { margin: 14px auto 0; max-width: 640px; font-size: clamp(15px, 1.6vw, 17px); line-height: 1.65; color: var(--fg-mid); }
.legal-dates { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px; margin-top: 20px; }
.legal-dates span { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--fg-warm); background: #fff; border: 1px solid var(--br-hairline); border-radius: 999px; padding: 6px 13px; }
.legal-dates svg { width: 14px; height: 14px; color: var(--brand-blue); }

/* two-column: sticky TOC + content */
.legal-layout { display: grid; grid-template-columns: 256px 1fr; gap: clamp(26px, 3vw, 50px); align-items: start; }
.legal-toc { position: sticky; top: 92px; }
.legal-toc-card { background: #fff; border: 1px solid var(--br-hairline); border-radius: 18px; padding: 18px; box-shadow: 0 18px 44px -34px rgba(16,24,40,.4); }
.legal-toc-h { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-mid); margin: 0 0 10px; }
.legal-toc-card ol { list-style: none; margin: 0; padding: 0; counter-reset: none; display: flex; flex-direction: column; gap: 1px; }
.legal-toc-card ol a { display: flex; gap: 9px; align-items: baseline; padding: 8px 10px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--fg-dark); text-decoration: none; line-height: 1.35; transition: background .14s var(--ease), color .14s var(--ease); }
.legal-toc-card ol a:hover { background: #f4f7fc; color: var(--brand-blue); }
.legal-toc-n { flex: 0 0 auto; min-width: 18px; height: 18px; border-radius: 5px; display: inline-grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--brand-blue); background: var(--brand-blue-soft); }
.legal-toc-foot { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--br-hairline); }
.legal-toc-foot p { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--fg-mid); margin: 0 0 8px; }
.legal-toc-foot a { display: inline-block; font-size: 12.5px; font-weight: 600; color: var(--fg-dark); text-decoration: none; margin: 0 12px 4px 0; }
.legal-toc-foot a:hover { color: var(--brand-blue); }

/* content / prose */
.legal-content { min-width: 0; }
.legal-sec { scroll-margin-top: 92px; padding: 26px 0; border-bottom: 1px solid var(--br-hairline); }
.legal-sec:first-child { padding-top: 4px; }
.legal-sec > h2 { display: flex; align-items: center; gap: 12px; font-size: clamp(19px, 2.2vw, 24px); font-weight: 800; letter-spacing: -.02em; color: var(--fg-black); margin: 0 0 14px; }
.legal-sec-n { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: inline-grid; place-items: center; font-size: 14px; font-weight: 800; color: #fff; background: linear-gradient(150deg, #1e6ef5, #6a4bf0); }
.legal-content p { font-size: 15.5px; line-height: 1.75; color: var(--fg-dark); margin: 0 0 14px; }
.legal-content h3 { font-size: 16.5px; font-weight: 700; color: var(--fg-black); margin: 22px 0 10px; }
.legal-content ul, .legal-content ol.legal-list { margin: 0 0 16px; padding-left: 4px; list-style: none; }
.legal-content ul li, .legal-content ol.legal-list li { position: relative; padding-left: 24px; margin-bottom: 9px; font-size: 15px; line-height: 1.7; color: var(--fg-dark); }
.legal-content ul li::before { content: ''; position: absolute; left: 4px; top: 10px; width: 7px; height: 7px; border-radius: 2px; background: var(--brand-blue); }
.legal-content ol.legal-list { counter-reset: li; }
.legal-content ol.legal-list li { counter-increment: li; }
.legal-content ol.legal-list li::before { content: counter(li); position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--brand-blue); background: var(--brand-blue-soft); }
.legal-content a { color: var(--brand-blue); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.legal-content strong { color: var(--fg-black); }
.legal-callout { background: #fff; border: 1px solid var(--br-hairline); border-left: 3px solid var(--brand-blue); border-radius: 12px; padding: 16px 18px; margin: 0 0 16px; }
.legal-callout p:last-child { margin-bottom: 0; }
.legal-callout.warn { border-left-color: #e5484d; background: #fff7f7; }
.legal-callout.ok { border-left-color: #16a34a; background: #f4fbf6; }

.legal-meta-card { margin-top: 26px; background: #fff; border: 1px solid var(--br-hairline); border-radius: 16px; padding: 22px; box-shadow: 0 18px 44px -36px rgba(16,24,40,.4); }
.legal-meta-h { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-mid); margin: 0 0 10px; }
.legal-meta-card p { font-size: 14px; line-height: 1.6; color: var(--fg-dark); margin: 0 0 10px; }
.legal-meta-fine { font-size: 12.5px !important; color: var(--fg-mid) !important; }

@media (max-width: 880px) {
  .legal-layout { grid-template-columns: 1fr; }
  .legal-toc { position: static; }
  .legal-toc-card ol { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; }
}
@media (max-width: 520px) { .legal-toc-card ol { grid-template-columns: 1fr; } }

/* ---- Data-request + sub-processors (GDPR public) ---- */
.dr-card{background:#fff;border:1px solid #e7e2d8;border-radius:18px;padding:30px 32px;max-width:760px;margin:0 auto;box-shadow:0 18px 50px -34px rgba(20,30,60,.32)}
.dr-card--narrow{max-width:460px}
.dr-form{display:flex;flex-direction:column;gap:16px}
.dr-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.dr-field{display:flex;flex-direction:column;gap:6px}
.dr-field label{font-size:13.5px;font-weight:600;color:#2a3142}
.dr-field input,.dr-field textarea,.dr-form .adm-select select{width:100%;border:1px solid #d9dEEA;border-radius:10px;padding:11px 13px;font:inherit;font-size:15px;color:#1b2230;background:#fbfcfe}
.dr-field input:focus,.dr-field textarea:focus{outline:none;border-color:#1f6bff;background:#fff;box-shadow:0 0 0 3px rgba(31,107,255,.12)}
.dr-form .adm-select{position:relative;display:block}
.dr-form .adm-select select{appearance:none;-webkit-appearance:none}
.dr-note{font-size:12.5px;color:#6a7286;line-height:1.6;margin:2px 0 0}
.dr-note a,.dr-field a{color:#1f6bff;font-weight:600}
.dr-submit{align-self:flex-start;margin-top:4px}
.dr-link{background:none;border:0;color:#1f6bff;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;padding:0;text-decoration:underline}
.dr-alert{border-radius:10px;padding:12px 14px;font-size:13.5px;margin-bottom:4px}
.dr-alert--err{background:#fdecec;color:#b3261e;border:1px solid #f3c5c2}
.sp-table{width:100%;border-collapse:collapse;font-size:14.5px}
.sp-table th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#8a92a6;border-bottom:2px solid #eef1f6;padding:10px 12px}
.sp-table td{padding:13px 12px;border-bottom:1px solid #f0f2f7;color:#39404f;vertical-align:top}
.sp-table a{color:#1f6bff;font-weight:600}
@media (max-width:560px){.dr-row{grid-template-columns:1fr}.dr-card{padding:24px 20px}}