/* ==========================================================================
   Homepage conversion layer (loaded on the homepage only, after the theme CSS).
   Goal of every block: keep a real visitor moving — understand → try → verify → contact.
   Scoped under .cro so nothing leaks onto other pages. One family (Barlow), navy/cobalt identity,
   ONE action colour (orange #c2410c, 5.2:1 with white), green only for WhatsApp.
   ========================================================================== */
.cro {
    --navy: #0b3c8a; --deep: #061a3d; --ink: #14213d; --muted: #4b5563; --line: #e3eaf5; --tint: #f5f8fd;
    --cobalt: #1f6fff; --cta: #c2410c; --cta-h: #9a3412; --wa: #0f7b45;
    font-family: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); overflow-x: clip;
}
.cro *, .cro *::before, .cro *::after { box-sizing: border-box; }
.cro h1, .cro h2, .cro h3, .cro p { font-family: inherit; text-transform: none; }
.cro a:focus-visible, .cro button:focus-visible, .cro input:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; }

/* ---------- Buttons ---------- */
.cro-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 12px 26px; border: 2px solid transparent; border-radius: 8px; font: 700 16px/1.2 "Barlow", sans-serif; letter-spacing: .01em; text-align: center; text-decoration: none; cursor: pointer; transition: transform .22s cubic-bezier(.2, .7, .2, 1), box-shadow .22s ease, background-color .22s ease, color .22s ease; }
.cro-btn:hover { transform: translateY(-2px); text-decoration: none; }
.cro-btn:active { transform: translateY(0) scale(.98); }
.cro-btn { position: relative; overflow: hidden; }
/* Glossy top sheen, shared by every button so the whole family reads as one consistent "3D" language
   (same technique as the offer/chat edge tabs and the footer's circular social icons). */
.cro-btn::before { content: ""; position: absolute; top: 1px; left: 10%; right: 10%; height: 45%; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0)); border-radius: 50% 50% 30% 30% / 60% 60% 20% 20%; }
.cro-btn--primary {
    background: linear-gradient(200deg, #e8632a 0%, var(--cta) 55%, var(--cta-h) 100%);
    color: #fff;
    box-shadow: 0 8px 22px rgba(194, 65, 12, .38), inset 0 1px 1px rgba(255, 255, 255, .45), inset 0 -3px 5px rgba(0, 0, 0, .2);
}
.cro-btn--primary::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent); transform: skewX(-20deg); animation: cro-shine 4.5s ease-in-out 1.6s infinite; }
.cro-btn--primary:hover {
    background: linear-gradient(200deg, #ef7539 0%, var(--cta-h) 55%, #7a2a0e 100%);
    color: #fff;
    box-shadow: 0 12px 28px rgba(194, 65, 12, .48), inset 0 1px 1px rgba(255, 255, 255, .5), inset 0 -3px 5px rgba(0, 0, 0, .24);
}
.cro-btn--ghost {
    background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .02));
    color: #fff;
    border-color: rgba(255, 255, 255, .55);
    box-shadow: 0 6px 16px rgba(4, 10, 26, .22), inset 0 1px 1px rgba(255, 255, 255, .18);
}
.cro-btn--ghost:hover {
    background: #fff;
    border-color: #fff;
    color: var(--navy);
    box-shadow: 0 10px 22px rgba(4, 10, 26, .28);
}
.cro-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 12px; }
.cro-btn--wa {
    background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .02));
    color: #fff;
    border-color: rgba(255, 255, 255, .7);
    box-shadow: 0 6px 16px rgba(4, 10, 26, .22), inset 0 1px 1px rgba(255, 255, 255, .18);
}
.cro-btn--wa:hover {
    background: linear-gradient(200deg, #2fa66b 0%, var(--wa) 55%, #0a5c34 100%);
    border-color: var(--wa);
    color: #fff;
    box-shadow: 0 10px 22px rgba(15, 123, 69, .4), inset 0 1px 1px rgba(255, 255, 255, .45);
}
.cro-btn--navy {
    background: linear-gradient(160deg, #3a7bdc 0%, var(--navy) 55%, #082a63 100%);
    color: #fff;
    box-shadow: 0 8px 22px rgba(11, 60, 138, .38), inset 0 1px 1px rgba(255, 255, 255, .45), inset 0 -3px 5px rgba(0, 0, 0, .2);
}
.cro-btn--navy:hover {
    background: linear-gradient(160deg, #4c8ae8 0%, #082f6e 55%, #051c45 100%);
    color: #fff;
    box-shadow: 0 12px 28px rgba(11, 60, 138, .48), inset 0 1px 1px rgba(255, 255, 255, .5), inset 0 -3px 5px rgba(0, 0, 0, .24);
}

/* ---------- Hero: a problem, one action, real proof ---------- */
.cro-hero { position: relative; isolation: isolate; overflow: hidden; background: #061633; color: #fff; padding: clamp(158px, 16vw, 198px) 0 clamp(126px, 12vw, 166px); }
.cro-hero__media { position: absolute; inset: 0; z-index: -2; display: block; }
.cro-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 68% center; }
/* two slow light orbs (transform only, no layout cost) */
.cro-hero::after { content: ""; position: absolute; z-index: -1; right: -140px; top: -160px; width: 680px; height: 680px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(37, 117, 255, .42), transparent 67%); animation: cro-float 14s ease-in-out infinite alternate; }
.cro-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(3, 12, 30, .96) 0%, rgba(3, 12, 30, .88) 49%, rgba(3, 12, 30, .50) 100%), linear-gradient(rgba(145, 192, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(145, 192, 255, .07) 1px, transparent 1px); background-size: auto, 46px 46px, 46px 46px; }
.cro-hero__grid { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(330px, .78fr); gap: clamp(36px, 6vw, 78px); align-items: center; }
.cro-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 20px; padding: 8px 13px; border: 1px solid rgba(255, 178, 122, .38); border-radius: 999px; background: rgba(255, 138, 61, .1); font: 700 12px/1.2 "Barlow", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #ffc092; }
.cro-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ff8a3d; box-shadow: 0 0 0 5px rgba(255, 138, 61, .14); flex: none; }
.cro-hero h1 { max-width: 15ch; margin: 0 0 20px; font: 800 clamp(38px, 5vw, 64px)/1.02 "Barlow", sans-serif; letter-spacing: -.035em; color: #fff; text-wrap: balance; }
.cro-hero h1 span { display: block; background: linear-gradient(100deg, #ffb27a 0%, #ff7a2c 62%, #ffc89d 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cro-lead { max-width: 58ch; margin: 0 0 26px; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.65; color: rgba(255, 255, 255, .92); }
.cro-audit { display: flex; flex-wrap: wrap; gap: 8px; max-width: 630px; margin: 0 0 12px; padding: 7px; border: 1px solid rgba(173, 207, 255, .28); border-radius: 14px; background: rgba(255, 255, 255, .10); box-shadow: 0 18px 42px rgba(0, 0, 0, .22); backdrop-filter: blur(12px); }
.cro-audit input { flex: 1 1 260px; min-width: 0; min-height: 52px; padding: 12px 16px; border: 2px solid transparent; border-radius: 9px; background: #fff; color: var(--ink); font: 500 16px/1.2 "Barlow", sans-serif; }
.cro-audit input::placeholder { color: #6b7280; }
.cro-audit input:focus { border-color: var(--cobalt); box-shadow: 0 0 0 4px rgba(31, 111, 255, .3); outline: 0; }
.cro-micro { margin: 0 0 20px; font-size: 14.5px; color: rgba(255, 255, 255, .8); }
.cro-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0; font-size: 15.5px; color: rgba(255, 255, 255, .9); }
.cro-alt a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.cro-alt a:hover { color: #ffb27a; }
.cro-hero .cro-card { position: relative; padding: 22px; border: 1.5px solid transparent; border-radius: 22px; background: linear-gradient(rgba(7, 27, 66, .84), rgba(5, 21, 51, .9)) padding-box, conic-gradient(from var(--cro-a), rgba(255, 255, 255, .16) 0 55%, rgba(255, 138, 61, .95) 75%, rgba(120, 175, 255, .95) 90%, rgba(255, 255, 255, .16) 100%) border-box; backdrop-filter: blur(14px); box-shadow: 0 32px 70px -26px rgba(0, 0, 0, .82); animation: cro-rise .62s cubic-bezier(.2, .7, .2, 1) both, cro-spin 8s linear infinite; animation-delay: var(--d, 0ms), 0s; }
.cro-card__status { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: 12px; color: #c9dcff; }
.cro-card__status span { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.cro-card__status i { width: 7px; height: 7px; border-radius: 50%; background: #48e49a; box-shadow: 0 0 0 5px rgba(72, 228, 154, .12); animation: cro-dot 1.8s ease-in-out infinite; }
.cro-card__status b { padding: 5px 8px; border-radius: 6px; background: rgba(255, 138, 61, .15); color: #ffc092; font-size: 11px; }
.cro-card h2 { margin: 0 0 14px; font: 700 18px/1.3 "Barlow", sans-serif; color: #fff; }
.cro-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.cro-card li { opacity: 0; animation: cro-rise .55s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(760ms + var(--i, 0) * 90ms); display: flex; align-items: center; gap: 12px; padding: 10px 34px 10px 14px; font-size: 15.5px; color: #fff; background: linear-gradient(90deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04)); box-shadow: inset 3px 0 0 #ff8a3d; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); transition: translate .3s cubic-bezier(.2, .7, .2, 1); }
.cro-card li:hover { translate: 5px 0; }
.cro-card li svg { width: 18px; height: 18px; flex: none; color: #ff9a5c; }
.cro-card li svg path { stroke-dasharray: 26; animation: cro-tick .6s ease-out both; animation-delay: calc(980ms + var(--i, 0) * 90ms); }
.cro-card p { margin: 14px 0 0; font-size: 14.5px; color: rgba(255, 255, 255, .8); }

/* hero entrance: one time, transform + opacity, no JS */
@keyframes cro-rise { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }
.cro-rise { animation: cro-rise .62s cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--d, 0ms); }
/* The hero h1 and lead paragraph are the LCP candidates: opacity 0 + delay kept them out of LCP until the animation
   finished. They now slide in visible from the first paint (transform only, no delay). */
@keyframes cro-rise-lcp { from { transform: translate3d(0, 12px, 0); } to { transform: none; } }
h1.cro-rise, .cro-lead.cro-rise { animation-name: cro-rise-lcp; animation-delay: 0ms; }
@media (prefers-reduced-motion: reduce) { .cro-rise { animation: none; } }

/* ---------- Shared motion primitives (transform / opacity only) ---------- */
@property --cro-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes cro-spin { to { --cro-a: 360deg; } }
@keyframes cro-shine { 0% { left: -45%; } 55%, 100% { left: 130%; } }
@keyframes cro-float { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-36px, 28px, 0) scale(1.08); } }
@keyframes cro-pop { from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes cro-tick { from { stroke-dashoffset: 26; } to { stroke-dashoffset: 0; } }
@keyframes cro-ring { 0% { box-shadow: 0 0 0 0 rgba(31, 111, 255, .4); } 100% { box-shadow: 0 0 0 9px rgba(31, 111, 255, 0); } }
@keyframes cro-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.7); } }

/* ---------- Proof panel: floats over the hero's lower edge (real figures only — rendered from the database / CMS) ---------- */
.cro-proof { position: relative; z-index: 3; margin-top: calc(-1 * clamp(46px, 5vw, 66px)); padding: 0 0 clamp(20px, 3vw, 36px); background: #fff; }

/* ---------- Section spacing (50px between sections) now lives sitewide in front-polish.css. Homepage-only extra: */
/* blog carousel carries its own 50px bottom padding under the dots — that would add to the gap above the FAQ */
.home-sections #blog-section .tablets-carousel { padding-bottom: 0 !important; }
.cro-proof__panel { position: relative; isolation: isolate; overflow: hidden; border-radius: 22px; background: radial-gradient(90% 140% at 0% 0%, rgba(31, 111, 255, .35), transparent 60%), linear-gradient(135deg, #061a3d 0%, #0b3c8a 62%, #0a2c6e 100%); box-shadow: 0 30px 60px -24px rgba(6, 26, 61, .65), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.cro-proof__panel::before { content: ""; position: absolute; inset: 0; z-index: 2; padding: 1.5px; border-radius: inherit; pointer-events: none; background: conic-gradient(from var(--cro-a), transparent 0 58%, rgba(255, 138, 61, .95) 76%, rgba(120, 175, 255, .95) 90%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: cro-spin 7s linear infinite; }
.cro-proof__panel::after { content: ""; position: absolute; top: 0; bottom: 0; left: -45%; width: 38%; z-index: 0; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .08), transparent); transform: skewX(-18deg); animation: cro-shine 8s ease-in-out infinite; }
.cro-proof__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); }
.cro-proof__item { position: relative; display: flex; flex-direction: column; align-items: center; padding: 28px 14px 24px; text-align: center; }
.cro-proof__item + .cro-proof__item::before { content: ""; position: absolute; left: 0; top: 20%; bottom: 20%; width: 1px; background: linear-gradient(transparent, rgba(255, 255, 255, .24), transparent); }
.cro-proof__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 12px; border-radius: 15px; color: #a9ceff; background: linear-gradient(145deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .16); transition: transform .35s cubic-bezier(.2, .7, .2, 1), color .3s, box-shadow .35s; }
.cro-proof__icon svg { width: 23px; height: 23px; }
.cro-proof__item:hover .cro-proof__icon { transform: translateY(-5px) rotate(-5deg); color: #ffb27a; box-shadow: 0 12px 28px rgba(255, 138, 61, .35); }
.cro-proof__value { display: block; font: 800 clamp(28px, 3.2vw, 40px)/1.05 "Barlow", sans-serif; letter-spacing: -.01em; color: #fff; font-variant-numeric: tabular-nums; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .cro-proof__value { background: linear-gradient(180deg, #fff 30%, #bcd6ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
}
.cro-proof__label { display: block; margin-top: 7px; font-size: 15px; line-height: 1.4; color: rgba(255, 255, 255, .78); }
.cro-proof__label a { color: #9cc4ff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cro-proof__label a:hover { color: #ffb27a; }

/* scroll reveal (JS adds .cro-anim first, then .is-in when the block is seen — with no JS everything simply shows) */
.cro-anim .cro-proof__item { opacity: 0; transform: translate3d(0, 20px, 0); }
.cro-anim.is-in .cro-proof__item { opacity: 1; transform: none; transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 90ms + 80ms); }

/* ---------- Selector: one question routes the visitor to the right service ---------- */
.cro-sec { position: relative; isolation: isolate; overflow: hidden; padding: clamp(40px, 5vw, 72px) 0 clamp(56px, 6.5vw, 92px); background: #fff; }
.cro-sec::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(55% 45% at 8% 0%, rgba(31, 111, 255, .10), transparent 70%), radial-gradient(48% 42% at 96% 100%, rgba(255, 106, 31, .10), transparent 70%); -webkit-mask-image: linear-gradient(transparent, #000 140px, #000 calc(100% - 120px), transparent); mask-image: linear-gradient(transparent, #000 140px, #000 calc(100% - 120px), transparent); }
.cro-head { max-width: 720px; margin: 0 auto clamp(26px, 3.4vw, 42px); text-align: center; }
.cro-kicker { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 14px; padding: 7px 15px; border-radius: 999px; background: #eaf1ff; border: 1px solid #d3e2ff; font: 700 12.5px/1 "Barlow", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--navy); }
.cro-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ff6a1f; animation: cro-dot 1.8s ease-in-out infinite; }
.cro-head h2 { margin: 0 0 12px; font: 800 clamp(28px, 3.4vw, 42px)/1.15 "Barlow", sans-serif; letter-spacing: -.015em; color: #073965; text-wrap: balance; }
.cro-head h2::after { content: ""; display: block; width: 72px; height: 4px; margin: 14px auto 0; border-radius: 4px; background: linear-gradient(90deg, #ff6a1f, #1f6fff); transform-origin: center; }
.cro-head p { margin: 0; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.6; color: var(--muted); }
.cro-anim .cro-head h2::after { transform: scaleX(0); }
.cro-anim.is-in .cro-head h2::after { transform: none; transition: transform .8s cubic-bezier(.2, .7, .2, 1) .25s; }

.cro-pick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0 0 24px; padding: 0; list-style: none; }
.cro-pick li { display: flex; }
.cro-pick button { position: relative; isolation: isolate; display: flex; align-items: flex-start; gap: 14px; width: 100%; height: 100%; min-height: 100px; padding: 18px 16px; text-align: left; border: 2px solid var(--line); border-radius: 16px; background: #fff; color: var(--navy); font: 700 16.5px/1.3 "Barlow", sans-serif; cursor: pointer; box-shadow: 0 12px 26px -16px rgba(11, 60, 138, .3); transition: border-color .25s, box-shadow .3s, transform .3s cubic-bezier(.2, .7, .2, 1), background-color .25s; }
.cro-pick button::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; pointer-events: none; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(31, 111, 255, .14), transparent 65%); transition: opacity .3s; }
.cro-pick button:hover { transform: translateY(-5px); border-color: #b4c9f0; box-shadow: 0 22px 36px -18px rgba(11, 60, 138, .4); }
.cro-pick button:hover::after { opacity: 1; }
.cro-pick__ico { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: #eef4ff; color: var(--navy); transition: background-color .3s, color .3s, transform .35s cubic-bezier(.2, .7, .2, 1); }
.cro-pick__ico svg { width: 23px; height: 23px; }
.cro-pick button:hover .cro-pick__ico { transform: scale(1.08) rotate(-4deg); }
.cro-pick__txt { flex: 1 1 auto; align-self: center; }
.cro-pick__arrow { flex: none; align-self: center; width: 20px; height: 20px; color: #ff6a1f; opacity: 0; transform: translateX(-8px); transition: opacity .25s, transform .3s cubic-bezier(.2, .7, .2, 1); }
.cro-pick button:hover .cro-pick__arrow, .cro-pick button[aria-selected="true"] .cro-pick__arrow { opacity: 1; transform: none; }
.cro-pick button[aria-selected="true"] { border-color: transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #ff6a1f, #1f6fff) border-box; box-shadow: 0 24px 40px -18px rgba(31, 111, 255, .5); }
.cro-pick button[aria-selected="true"] .cro-pick__ico { background: linear-gradient(135deg, #0b3c8a, #1f6fff); color: #fff; animation: cro-ring 2.2s ease-out infinite; }
.cro-anim .cro-pick li { opacity: 0; transform: translate3d(0, 22px, 0); }
.cro-anim.is-in .cro-pick li { opacity: 1; transform: none; transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 90ms + 200ms); }

.cro-panel { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(22px, 4vw, 52px); align-items: center; padding: clamp(26px, 3.6vw, 46px); border-radius: 24px; color: #fff; background: radial-gradient(80% 120% at 100% 0%, rgba(31, 111, 255, .5), transparent 62%), linear-gradient(135deg, #061a3d 0%, #0b3c8a 100%); box-shadow: 0 34px 64px -30px rgba(6, 26, 61, .7); }
.cro-panel::before { content: ""; position: absolute; z-index: -1; right: -90px; bottom: -150px; width: 360px; height: 360px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255, 106, 31, .4), transparent 66%); animation: cro-float 12s ease-in-out infinite alternate; }
.cro-panel::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(70% 90% at 0% 0%, #000, transparent); mask-image: radial-gradient(70% 90% at 0% 0%, #000, transparent); }
.cro-panel h3 { margin: 0 0 12px; font: 800 clamp(22px, 2.4vw, 30px)/1.2 "Barlow", sans-serif; letter-spacing: -.01em; color: #fff; text-wrap: balance; }
.cro-panel p { margin: 0 0 22px; max-width: 62ch; font-size: 17px; line-height: 1.7; color: rgba(255, 255, 255, .88); }
.cro-panel__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.cro-panel__cta .cro-btn--wa { color: #fff; border-color: rgba(255, 255, 255, .55); }
.cro-panel__cta .cro-btn--wa:hover { color: #fff; }
.cro-chips { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.cro-chips li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; font: 600 15.5px/1.3 "Barlow", sans-serif; color: #fff; background: linear-gradient(135deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05)); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(6px); transition: transform .3s cubic-bezier(.2, .7, .2, 1), background-color .3s; }
.cro-chips li:hover { transform: translateX(6px); }
.cro-chips svg { flex: none; width: 20px; height: 20px; color: #ffb27a; }
.cro-chips svg path { stroke-dasharray: 26; }
/* rich panel (home "What do you need?"): intro, focus grid, fit checklist, note, CTA — side highlights on the right */
.cro-panel--rich { align-items: start; }
.cro-panel__eyebrow { display: inline-block; margin-bottom: 10px; font: 700 13px/1.2 "Barlow", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #ffb27a; }
.cro-panel--rich p { margin-bottom: 12px; }
.cro-panel__sub { margin: 24px 0 12px; font: 700 14px/1.2 "Barlow", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.cro-focus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.cro-focus li { padding: 14px 16px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; background: rgba(255, 255, 255, .06); transition: border-color .25s, background-color .25s, transform .25s; }
.cro-focus li:hover { border-color: rgba(255, 178, 122, .55); background: rgba(255, 255, 255, .1); transform: translateY(-2px); }
.cro-focus b { display: block; margin-bottom: 4px; font: 700 16.5px/1.25 "Barlow", sans-serif; color: #fff; }
.cro-focus span { display: block; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .78); }
.cro-fit { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cro-fit li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .9); }
.cro-fit svg { flex: none; width: 18px; height: 18px; margin-top: 3px; color: #ffb27a; }
.cro-panel__note { margin: 24px 0 22px; padding: 16px 18px; border-left: 3px solid #ff6a1f; border-radius: 0 14px 14px 0; background: rgba(255, 106, 31, .1); }
.cro-panel__note strong { display: block; margin-bottom: 4px; font: 800 17px/1.3 "Barlow", sans-serif; color: #fff; }
.cro-panel__note span { display: block; font-size: 15.5px; line-height: 1.6; color: rgba(255, 255, 255, .85); }
.cro-panel--rich .cro-panel__ctanote { margin: 10px 0 0; font-size: 14.5px; color: rgba(255, 255, 255, .7); }
.cro-panel--rich { grid-template-columns: minmax(0, 1.55fr) minmax(0, .8fr); align-items: stretch; }
.cro-panel--rich p { max-width: none; }
.cro-panel__num { position: absolute; z-index: -1; right: 28px; bottom: -34px; font: 900 clamp(120px, 14vw, 210px)/1 "Barlow", sans-serif; color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, .07); pointer-events: none; }
.cro-panel__side { position: relative; padding: 22px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 20px; background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02)); }
.cro-panel__sidein { display: flex; flex-direction: column; height: 100%; }
.cro-panel__side .cro-panel__note { margin: 18px 0 16px; }
.cro-panel__side .cro-panel__note span { font-size: 14.5px; }
.cro-panel__side .cro-panel__cta { display: grid; gap: 10px; margin-top: auto; }
.cro-panel__side .cro-panel__cta .cro-btn { width: 100%; justify-content: center; }
.cro-panel__side .cro-panel__ctanote { margin: 10px 0 0; text-align: center; font-size: 14px; }
.cro-panel__sidehead { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.cro-panel__sideico { display: grid; flex: none; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, #ff6a1f, #ff9a4d); color: #fff; box-shadow: 0 12px 24px -10px rgba(255, 106, 31, .8); }
.cro-panel__sideico svg { width: 24px; height: 24px; }
.cro-panel__sidehead small { display: block; font: 700 12px/1.2 "Barlow", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.cro-panel__sidehead b { display: block; margin-top: 2px; font: 800 19px/1.2 "Barlow", sans-serif; color: #fff; }
.cro-panel__sidelink { display: block; margin-top: 16px; font: 600 14.5px/1.45 "Barlow", sans-serif; color: #ffb27a; }
.cro-panel__sidelink:hover { color: #fff; text-decoration: none; }
.cro-panel__sidelink span { display: inline-block; transition: transform .25s; }
.cro-panel__sidelink:hover span { transform: translateX(4px); }
/* staggered entrance each time a panel opens (display none → grid restarts the animations) */
.cro-anim.is-in .cro-panel--rich:not([hidden]) .cro-panel__main > * { animation: cro-pop .55s cubic-bezier(.2, .7, .2, 1) both; }
.cro-anim.is-in .cro-panel--rich:not([hidden]) .cro-panel__main > :nth-child(2) { animation-delay: .06s; }
.cro-anim.is-in .cro-panel--rich:not([hidden]) .cro-panel__main > :nth-child(n+3) { animation-delay: .12s; }
.cro-anim.is-in .cro-panel--rich:not([hidden]) .cro-focus li,
.cro-anim.is-in .cro-panel--rich:not([hidden]) .cro-fit li { animation: cro-pop .5s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms + 220ms); }
.cro-fit li:nth-child(1) { --i: 0; } .cro-fit li:nth-child(2) { --i: 1; } .cro-fit li:nth-child(3) { --i: 2; } .cro-fit li:nth-child(4) { --i: 3; } .cro-fit li:nth-child(5) { --i: 4; }
.cro-anim.is-in .cro-panel--rich:not([hidden]) .cro-panel__side { animation: cro-side-in .7s cubic-bezier(.2, .7, .2, 1) .15s both; }
@keyframes cro-side-in { from { opacity: 0; transform: translate3d(24px, 0, 0); } to { opacity: 1; transform: none; } }
.cro-anim.is-in .cro-panel--rich:not([hidden]) .cro-panel__num { animation: cro-num-in 1s cubic-bezier(.2, .7, .2, 1) .1s both; }
@keyframes cro-num-in { from { opacity: 0; transform: translate3d(0, 30px, 0); } to { opacity: 1; transform: none; } }
.cro-panel__note { transition: transform .25s, background-color .25s; }
.cro-panel__note:hover { transform: translateX(4px); background: rgba(255, 106, 31, .15); }
.cro-need-end__card { transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s; }
.cro-need-end__card:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -24px rgba(11, 60, 138, .45); }
.cro-anim .cro-need-end__card { opacity: 0; transform: translate3d(0, 24px, 0); }
.cro-anim.is-in .cro-need-end__card { opacity: 1; transform: none; transition: opacity .7s ease .3s, transform .8s cubic-bezier(.2, .7, .2, 1) .3s, box-shadow .3s; }
.cro-anim.is-in .cro-need-end__card--dark { transition-delay: .45s, .45s, 0s; }
.cro-anim.is-in .cro-need-end__card:hover { transform: translateY(-4px); transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
    .cro-panel--rich *, .cro-anim .cro-need-end__card { animation: none !important; opacity: 1 !important; transform: none !important; }
}
.cro-chips--rich { position: static; }
.cro-chips--rich li { align-items: flex-start; }
.cro-chips--rich svg { margin-top: 2px; }
.cro-chips--rich b { display: block; font: 700 16px/1.3 "Barlow", sans-serif; color: #fff; }
.cro-chips--rich span { display: block; margin-top: 2px; font: 400 14.5px/1.45 "Barlow", sans-serif; color: rgba(255, 255, 255, .78); }
/* closing cards under the panels */
.cro-need-end { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; margin-top: 22px; }
.cro-need-end__card { padding: clamp(22px, 3vw, 34px); border: 1px solid var(--line); border-radius: 22px; background: var(--tint); }
.cro-need-end__card h3 { margin: 6px 0 10px; font: 800 clamp(21px, 2.2vw, 27px)/1.2 "Barlow", sans-serif; color: var(--deep); }
.cro-need-end__card p { margin: 0 0 18px; font-size: 16.5px; line-height: 1.6; color: var(--muted); }
.cro-need-end__card .cro-btn--wa { color: #0f7b45; border-color: #25a265; background: #fff; box-shadow: none; }
.cro-need-end__card .cro-btn--wa:hover { color: #fff; }
.cro-need-end__card--dark { border: 0; color: #fff; background: radial-gradient(80% 120% at 100% 0%, rgba(255, 106, 31, .35), transparent 62%), linear-gradient(135deg, #061a3d 0%, #0b3c8a 100%); }
.cro-need-end__card--dark h3 { color: #fff; }
.cro-need-end__card--dark p { color: rgba(255, 255, 255, .85); }
.cro-need-end__card--dark .cro-btn--wa { color: #fff; border-color: rgba(255, 255, 255, .7); background: transparent; }
@media (max-width: 991px) {
    .cro-panel--rich { grid-template-columns: minmax(0, 1fr); }
    .cro-panel__sidein { position: static; }
    .cro-panel__num { font-size: 120px; right: 12px; bottom: -20px; }
    .cro-need-end { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575px) {
    .cro-focus { grid-template-columns: minmax(0, 1fr); }
    .cro-need-end .cro-btn { width: 100%; }
}
.cro-js .cro-panel[hidden] { display: none; }
.cro-anim .cro-panel { opacity: 0; }
.cro-anim.is-in .cro-panel:not([hidden]) { animation: cro-pop .6s cubic-bezier(.2, .7, .2, 1) both; }
.cro-anim.is-in .cro-panel:not([hidden]) .cro-chips li { animation: cro-pop .55s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 90ms + 180ms); }
.cro-anim.is-in .cro-panel:not([hidden]) .cro-chips svg path { animation: cro-tick .6s ease-out both; animation-delay: calc(var(--i, 0) * 90ms + 420ms); }
.cro-hint { margin: 0 0 4px; text-align: center; font-size: 15px; color: var(--muted); }

/* ---------- Mobile thumb bar: Call | WhatsApp | Free audit ---------- */
.cro-bar { display: none; }
@media (max-width: 767px) {
    .cro-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; display: grid; grid-template-columns: 1fr 1fr 1.2fr; box-shadow: 0 -4px 18px rgba(0, 0, 0, .22); }
    .cro-bar a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 8px; font: 700 15px/1.1 "Barlow", sans-serif; color: #fff; text-decoration: none; }
    .cro-bar a:nth-child(1) { background: #0b3c8a; }
    .cro-bar a:nth-child(2) { background: #0f7b45; }
    .cro-bar a:nth-child(3) { background: #c2410c; }
    .cro-bar svg { width: 18px; height: 18px; flex: none; }
    body.cro-has-bar { padding-bottom: 54px; }
    body.cro-has-bar .dw-edge-tab--chat { display: none; }             /* the bar already carries WhatsApp */
    body.cro-has-bar #scrollUp { bottom: 74px !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .cro-hero { padding: 128px 0 96px; }
    .cro-panel { grid-template-columns: minmax(0, 1fr); }
    .cro-hero__grid { grid-template-columns: minmax(0, 1fr); }
    .cro-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
    .cro-hero { padding: 112px 0 88px; }
    .cro-audit .cro-btn, .cro-hero__cta .cro-btn { width: 100%; }
    .cro-proof__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cro-proof__item { padding: 20px 10px 18px; }
    .cro-proof__item + .cro-proof__item::before { display: none; }
    .cro-proof__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .cro-proof__icon { width: 42px; height: 42px; margin-bottom: 8px; }
    .cro-proof__label { font-size: 15px; }
    .cro-pick { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .cro-pick button { min-height: 72px; padding: 14px; }
    .cro-panel { padding: 22px 18px; border-radius: 18px; }
    .cro-panel__cta .cro-btn { width: 100%; }
}
@media (hover: none) { .cro-pick button::after { display: none; } }
@media (prefers-reduced-motion: reduce) {
    .cro *, .cro *::before, .cro *::after { animation: none !important; transition: none !important; }
    .cro-anim .cro-proof__item, .cro-anim .cro-pick li, .cro-anim .cro-panel, .cro-card li { opacity: 1 !important; transform: none !important; }
    .cro-anim .cro-head h2::after { transform: none !important; }
    .cro-btn:hover, .cro-pick button:hover, .cro-card li:hover, .cro-chips li:hover { transform: none; translate: none; }
}

/* ---------- Hero proof line ---------- */
.cro-trustline { margin: -6px 0 18px; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, .74); }
.cro-hero .cro-trustline { margin: 16px 0 0; }
.cro-trustline a { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(255, 178, 122, .7); text-underline-offset: 3px; }
.cro-trustline a:hover { color: #ffb27a; }
/* service line under the hero CTAs: plain text look, each item a real link to its service page */
.cro-hero__services { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 10px 0 0; padding: 0; list-style: none; font: 600 15px/1.4 "Barlow", sans-serif; color: rgba(255, 255, 255, .86); }
.cro-hero__services li { display: flex; align-items: center; }
.cro-hero__services li + li::before { content: ""; width: 4px; height: 4px; margin: 0 12px; border-radius: 50%; background: #ff8a3d; }
.cro-hero__services a { display: inline-block; padding: 6px 0; color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.cro-hero__services a:hover { color: #fff; border-bottom-color: #ff8a3d; }
.cro-card .cro-card__cta { width: 100%; margin-top: 18px; min-height: 48px; font-size: 15.5px; }
@media (max-width: 575px) { .cro-hero__services { font-size: 14px; } .cro-hero__services li + li::before { margin: 0 9px; } }
/* ---------- Why us: six benefit cards ---------- */
.cro-why { position: relative; isolation: isolate; overflow: hidden; padding: clamp(56px, 6.5vw, 96px) 0; background: linear-gradient(180deg, #f5f8fd, #fff 70%); }
.cro-why::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(45% 40% at 100% 0%, rgba(31, 111, 255, .09), transparent 70%), radial-gradient(40% 40% at 0% 100%, rgba(255, 106, 31, .08), transparent 70%); }
.cro-why__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.cro-why__card { position: relative; overflow: hidden; padding: 26px 22px 24px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 18px 36px -26px rgba(11, 60, 138, .4); transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s, border-color .3s; }
.cro-why__card::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: linear-gradient(90deg, #ff6a1f, #1f6fff); transform: scaleX(.16); transform-origin: left; transition: transform .55s cubic-bezier(.2, .7, .2, 1); }
.cro-why__card:hover { transform: translateY(-7px); border-color: #b9cdf3; box-shadow: 0 30px 48px -26px rgba(11, 60, 138, .5); }
.cro-why__card:hover::before { transform: scaleX(1); }
.cro-why__num { position: absolute; right: 16px; top: 8px; font: 800 44px/1 "Barlow", sans-serif; color: rgba(11, 60, 138, .07); pointer-events: none; }
.cro-why__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; color: #fff; background: linear-gradient(135deg, #0b3c8a, #1f6fff); box-shadow: 0 12px 24px -10px rgba(31, 111, 255, .6); transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.cro-why__ico svg { width: 22px; height: 22px; }
.cro-why__card:hover .cro-why__ico { transform: rotate(-6deg) scale(1.08); }
.cro-why__card h3 { margin: 18px 0 8px; font: 700 clamp(17px, 1.3vw, 19px)/1.25 "Barlow", sans-serif; color: #073965; }
.cro-why__card p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--muted); }
.cro-why__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(28px, 4vw, 46px); }
.cro-anim .cro-why__card { opacity: 0; transform: translate3d(0, 24px, 0); }
.cro-anim.is-in .cro-why__card { opacity: 1; transform: none; transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .2, 1), box-shadow .35s, border-color .3s; transition-delay: calc(var(--i, 0) * 90ms + 120ms), calc(var(--i, 0) * 90ms + 120ms), 0s, 0s; }
.cro-anim.is-in .cro-why__card:hover { transform: translateY(-7px); transition-delay: 0s; }
@media (max-width: 1199px) { .cro-why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .cro-why__card { padding: 28px 24px 26px; } .cro-why__num { font-size: 54px; } .cro-why__ico { width: 48px; height: 48px; } .cro-why__ico svg { width: 24px; height: 24px; } .cro-why__card h3 { font-size: clamp(19px, 2vw, 22px); } .cro-why__card p { font-size: 16px; } }
@media (max-width: 575px) { .cro-why__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; } .cro-why__card { padding: 24px 20px; } .cro-why__cta .cro-btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .cro-anim .cro-why__card { opacity: 1 !important; transform: none !important; } }
/* four longer, multi-paragraph cards: 2 x 2 on desktop, one column on phones */
.cro-why__grid--2 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.cro-why__grid--2 .cro-why__card { padding: 28px 22px 24px; }
@media (min-width: 1200px) {
    .cro-why__grid--2 .cro-why__card h3 { font-size: 19.5px; }
    .cro-why__grid--2 .cro-why__card p:not(.cro-why__kicker), .cro-why__lines li { font-size: 14.5px; line-height: 1.6; }
    .cro .cro-why__kicker { font-size: 11.5px; letter-spacing: .1em; }
}
@media (min-width: 768px) and (max-width: 1199px) { .cro-why__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cro .cro-why__kicker { margin: 18px 0 0; font: 700 12.5px/1.3 "Barlow", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #c2410c; }
.cro-why__grid--2 .cro-why__card h3 { margin: 8px 0 12px; font-size: clamp(20px, 1.7vw, 23px); }
.cro-why__grid--2 .cro-why__card p + p { margin-top: 10px; }
.cro-why__grid--2 .cro-why__card p:not(.cro-why__kicker) { font-size: 15.5px; }
.cro-why__lines { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.cro-why__lines li { position: relative; padding-left: 16px; font: 600 15.5px/1.5 "Barlow", sans-serif; color: #073965; }
.cro-why__lines li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: #ff6a1f; }
.cro-why__grid--2 .cro-why__card { display: flex; flex-direction: column; align-items: flex-start; }
.cro-why__grid--2 .cro-why__card > * { max-width: 100%; }
.cro .cro-why__grid--2 .cro-why__card > .cro-why__close { align-self: stretch; margin-top: auto; }
.cro-why__grid--2 .cro-why__card > :nth-last-child(2) { margin-bottom: 14px; }
.cro .cro-why__card .cro-why__close { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-weight: 700; color: #073965; }
.cro .cro-why__note { max-width: 640px; margin: 16px auto 0; text-align: center; font-size: 15.5px; line-height: 1.6; color: var(--muted); }
@media (max-width: 767px) { .cro-why__grid--2 { grid-template-columns: minmax(0, 1fr); gap: 16px; } .cro-why__grid--2 .cro-why__card { padding: 26px 20px 24px; } }

/* ---------- Offers popup: every live offer, one per screen, inside a device ----------
   Desktop: a laptop with a browser bar. Mobile: a full-height phone. Slides move with transform only.
   Card styles (.cro-path__*) are the Start / Grow / Scale growth-path cards; no prices anywhere. */
html.dwo-lock, html.dwo-lock body { overflow: hidden; }
/* Base modal positioning (display/position/inset/z-index) used to live ONLY in critical-home.css
   (homepage-only), so the popup couldn't actually appear as a fullscreen overlay on any other
   page — .is-open only ever toggled display:flex (style.min.css, loaded everywhere), but with no
   position:fixed/inset/z-index it just sat inline in the page instead of floating on top.
   Duplicated here, in the one stylesheet this partial always loads for itself now, so the popup
   is fully self-contained regardless of which page includes it. */
.dw-promo-overlay { display: none; position: fixed; inset: 0; z-index: 99999; align-items: center; justify-content: center; }
.dwo.dw-promo-overlay { padding: 24px; overflow: hidden; background: radial-gradient(60% 60% at 50% 40%, rgba(31, 111, 255, .22), transparent 70%), rgba(3, 10, 26, .8); backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s ease; }
.dwo.dw-promo-overlay.is-shown { opacity: 1; }

/* "Offers" edge-tab trigger button — same problem as above: lived only in critical-home.css
   (homepage-only). Duplicated here in full (base + hover/focus + pseudo-elements + badge/count +
   chat/promo variants + keyframes + mobile/reduced-motion overrides) so the manual-open trigger
   also looks and behaves correctly on every page, not just the homepage. */
.dw-edge-tab { position: fixed; top: 50%; bottom: auto; left: auto; transform: translateY(-50%); z-index: 9997; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 12px; width: 42px; padding: 20px 0 14px; margin: 0; border: 0; overflow: visible; color: #fff; text-decoration: none; cursor: pointer; box-shadow: rgba(4, 10, 26, .55) 0 14px 30px -12px; transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s, width .35s; }
.dw-edge-tab:hover, .dw-edge-tab:focus-visible { color: #fff; text-decoration: none; }
.dw-edge-tab:focus-visible { outline: #ffb27a solid 3px; outline-offset: 2px; }
.dw-edge-tab::before { content: ""; position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.dw-edge-tab::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: 1; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .3), transparent); transform: skewX(-16deg); animation: dwEdgeShine 5s ease-in-out infinite; }
.dw-edge-tab__label { position: relative; z-index: 2; writing-mode: vertical-rl; transform: rotate(180deg); font: 700 13.5px/1.2 "Barlow", sans-serif; letter-spacing: .04em; white-space: nowrap; }
.dw-edge-tab__badge { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; font-size: 17px; color: #fff; animation: dwEdgeRing 2.6s ease-out infinite; }
.dw-edge-tab__badge::before { content: ""; position: absolute; top: 8%; left: 14%; right: 14%; height: 45%; border-radius: 50%; background: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); pointer-events: none; }
.dw-edge-tab__count { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #0b3c8a; color: #fff; font: 800 10.5px/18px "Barlow", sans-serif; text-align: center; box-shadow: rgba(0, 0, 0, .35) 0 2px 6px; }
.dw-edge-tab--chat { right: 0; border-radius: 14px 0 0 14px; background: linear-gradient(160deg, #123a7a 0%, #0b3c8a 55%, #082a63 100%); }
.dw-edge-tab--chat:hover { transform: translateY(-50%) translateX(-5px); box-shadow: rgba(4, 10, 26, .65) 0 18px 36px -12px; }
.dw-edge-tab--chat .dw-edge-tab__badge { background: #25d366; }
.dw-edge-tab--promo { left: 0; border-radius: 0 14px 14px 0; background-color: #f85603; background-image: linear-gradient(200deg, #ff8a3d 0%, #f85603 55%, #c94202 100%); }
.dw-edge-tab--promo::after { left: auto; right: -60%; animation-name: dwEdgeShineRev; }
.dw-edge-tab--promo:hover { transform: translateY(-50%) translateX(5px); box-shadow: rgba(4, 10, 26, .65) 0 18px 36px -12px; }
.dw-edge-tab--promo .dw-edge-tab__badge { background: #0b3c8a; }

@keyframes dwEdgeShine { 0%, 45% { left: -60%; } 70%, 100% { left: 130%; } }
@keyframes dwEdgeShineRev { 0%, 45% { right: -60%; } 70%, 100% { right: 130%; } }
@keyframes dwEdgeRing {
    0% { box-shadow: rgba(0, 0, 0, .35) 0 6px 16px, rgba(255, 255, 255, .45) 0 0 0 0; }
    70% { box-shadow: rgba(0, 0, 0, .35) 0 6px 16px, rgba(255, 255, 255, 0) 0 0 0 9px; }
    100% { box-shadow: rgba(0, 0, 0, .35) 0 6px 16px, rgba(255, 255, 255, 0) 0 0 0 0; }
}

@media (max-width: 767px) {
    .dw-edge-tab--chat { display: none; }
    .dw-edge-tab { width: 38px; padding: 16px 0 12px; gap: 10px; }
    .dw-edge-tab__label { font-size: 12px; }
    .dw-edge-tab__badge { width: 32px; height: 32px; font-size: 15px; }
    .dw-edge-tab--promo { width: 36px; padding: 16px 0 12px; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .dw-edge-tab::after { animation: none; display: none; }
    .dw-edge-tab__badge { animation: none; }
    .dw-edge-tab:hover { transform: translateY(-50%); }
}
.dwo-device { position: relative; width: min(1100px, 94vw); opacity: 0; transform: translate3d(0, 28px, 0) scale(.96); transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .35s ease; }
.dwo.is-shown .dwo-device { opacity: 1; transform: none; }

/* laptop lid + screen */
.dwo-frame { position: relative; padding: 16px 16px 20px; border-radius: 22px 22px 12px 12px; background: linear-gradient(160deg, #1b2436, #0b1220 60%); box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.dwo-cam { position: absolute; top: 6px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #2c3a55; box-shadow: inset 0 0 0 1.5px #111a2b; }
.dwo-screen { display: flex; flex-direction: column; height: min(660px, calc(100vh - 150px)); overflow: hidden; border-radius: 8px; background: #f5f8fd; }
.dwo-base { position: relative; height: 16px; margin: 0 -48px; border-radius: 2px 2px 18px 18px; background: linear-gradient(180deg, #e6eaf1 0%, #b6bfcd 60%, #8e98a9 100%); box-shadow: 0 24px 40px -18px rgba(0, 0, 0, .7); }
.dwo-base span { position: absolute; top: 0; left: 50%; width: 16%; height: 6px; transform: translateX(-50%); border-radius: 0 0 10px 10px; background: #9aa4b5; }

/* browser bar */
.dwo-bar { flex: none; display: flex; align-items: center; gap: 14px; height: 46px; padding: 0 10px 0 16px; background: #eaeff7; border-bottom: 1px solid #d9e2f0; }
.dwo-dots { display: flex; gap: 7px; }
.dwo-dots i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.dwo-dots i:nth-child(2) { background: #febc2e; }
.dwo-dots i:nth-child(3) { background: #28c840; }
.dwo-url { display: inline-flex; align-items: center; gap: 7px; flex: 0 1 380px; min-width: 0; padding: 6px 12px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px #dbe3f0; font: 500 13px/1.2 "Barlow", sans-serif; color: #4b5563; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dwo-url svg { flex: none; width: 13px; height: 13px; color: #0f7b45; }
.dwo .dwo-title { flex: 1 1 auto; margin: 0; text-align: right; font: 800 12.5px/1 "Barlow", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dwo-close {
    flex: none;
    margin-left: auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    background: linear-gradient(160deg, #3a7bdc 0%, var(--navy) 55%, #082a63 100%);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(11, 60, 138, .35), inset 0 1px 1px rgba(255, 255, 255, .3);
    transition: transform .2s cubic-bezier(.2, .7, .2, 1), box-shadow .2s ease;
}
.dwo-close svg { width: 16px; height: 16px; }
.dwo-close:hover {
    transform: scale(1.08) rotate(90deg);
    box-shadow: 0 9px 20px rgba(11, 60, 138, .45), inset 0 1px 1px rgba(255, 255, 255, .35);
}

/* slider */
.dwo-viewport { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; touch-action: pan-y; }
.dwo-track { display: flex; height: 100%; margin: 0; padding: 0; list-style: none; transition: transform .55s cubic-bezier(.22, .8, .24, 1); will-change: transform; }
.dwo.is-dragging .dwo-track { transition: none; }
.dwo.is-dragging a { pointer-events: none; }
.dwo-slide { flex: 0 0 100%; min-width: 0; height: 100%; display: flex; }
.dwo-slide .cro-path__card { height: 100%; align-content: center; overflow-y: auto; overscroll-behavior: contain; border: 0; border-radius: 0; box-shadow: none; padding: clamp(28px, 4.2vw, 58px) clamp(28px, 5vw, 70px); }
.dwo-slide .cro-path__card::before { height: 4px; transform: scaleX(1); }

/* footer: pager + "not sure?" */
.dwo-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 10px 18px; background: #fff; border-top: 1px solid var(--line); }
.dwo-nav { display: flex; align-items: center; gap: 10px; }
.dwo-nav[hidden] { display: none; }
.dwo-btn { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid #cfdcf3; border-radius: 50%; background: #fff; color: var(--navy); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.dwo-btn svg { width: 19px; height: 19px; }
.dwo-btn:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.dwo-btn:disabled { opacity: .4; cursor: default; background: #fff; color: var(--navy); border-color: #cfdcf3; }
.dwo-count { margin: 0; min-width: 58px; text-align: center; font: 700 14.5px/1 "Barlow", sans-serif; letter-spacing: .08em; color: var(--muted); font-variant-numeric: tabular-nums; }
.dwo-now { color: var(--navy); font-weight: 800; }
.dwo-pager { display: flex; margin: 0; padding: 0; list-style: none; }
.dwo-pager button { display: grid; place-items: center; width: 28px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer; }
.dwo-pager button::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: #c3d2ec; transition: width .35s cubic-bezier(.2, .7, .2, 1), background-color .3s; }
.dwo-pager button[aria-current="true"]::before { width: 24px; background: linear-gradient(90deg, #ff6a1f, #1f6fff); }
.dwo-help { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 18px; font: 500 14.5px/1.3 "Barlow", sans-serif; color: var(--muted); }
.dwo-help__link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-weight: 700; color: var(--navy); text-decoration: none; }
.dwo-help__link:hover { color: var(--cta); text-decoration: none; }
.dwo-help__link--wa, .dwo-help__link--wa:hover { color: var(--wa); }
.dwo-arrow { flex: none; width: 17px; height: 17px; transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.dwo a:hover .dwo-arrow, .dwo a:focus-visible .dwo-arrow { transform: translateX(4px); }

/* ---- growth-path card (Start = light, Grow = featured royal blue, Scale = deep navy) ---- */
.cro-path__card { --c-title: #073965; --c-text: var(--muted); --c-soft: #eef4ff; --c-acc: var(--cobalt); --c-line: var(--line);
    position: relative; isolation: isolate; overflow: hidden; flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    grid-template-areas: "main list" "foot list"; gap: 6px clamp(26px, 3.4vw, 48px); padding: clamp(28px, 3.2vw, 42px);
    border: 1px solid var(--c-line); border-radius: 20px; background: #fff; color: var(--c-text); }
.cro-path__card--solo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "foot"; max-width: none; }
.cro-path__card::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: linear-gradient(90deg, #ff6a1f, #1f6fff); }
.cro-path__main { grid-area: main; }
.cro-path__list { grid-area: list; align-self: center; padding: clamp(20px, 2.2vw, 28px); border-radius: 16px; background: var(--c-soft); }
.cro-path__foot { grid-area: foot; align-self: end; }
.cro-path__top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 18px; }
.cro-path__ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; color: #fff; background: linear-gradient(135deg, #0b3c8a, #1f6fff); box-shadow: 0 12px 24px -12px rgba(31, 111, 255, .7); transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.cro-path__ico svg { width: 23px; height: 23px; }
.cro-path__card:hover .cro-path__ico { transform: rotate(-6deg) scale(1.08); }
.cro-path__label { font: 800 14px/1 "Barlow", sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--c-title); }
.cro-path__badge { margin-left: auto; padding: 6px 11px; border-radius: 999px; background: #fff; color: #9a3412; font: 800 11.5px/1 "Barlow", sans-serif; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .35); }
.cro-path__badge::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 7px 1px 0; border-radius: 50%; background: #ff6a1f; vertical-align: middle; }
.cro-path__stage { margin: 0 0 6px; font: italic 600 15px/1.4 "Barlow", sans-serif; color: var(--c-acc); }
.cro .cro-path__card h3 { margin: 0 0 12px; font: 800 clamp(24px, 2.5vw, 36px)/1.12 "Barlow", sans-serif; letter-spacing: -.02em; color: var(--c-title); text-wrap: balance; }
.cro-path__text { margin: 0 0 18px; font-size: 16.5px; line-height: 1.6; color: var(--c-text); }
.cro-path__list-title { margin: 0 0 12px; font: 700 12.5px/1 "Barlow", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--c-title); opacity: .8; }
.cro-path__list ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cro-path__list li { display: flex; align-items: flex-start; gap: 10px; font: 600 15.5px/1.35 "Barlow", sans-serif; color: var(--c-title); }
.cro-path__list li svg { flex: none; width: 12px; height: 12px; margin-top: 1px; padding: 4px; box-sizing: content-box; border-radius: 50%; color: #fff; background: var(--c-acc); }
.cro-path__value { margin: 0 0 20px; padding-left: 14px; border-left: 3px solid #ff6a1f; font-size: 15.5px; line-height: 1.55; font-weight: 500; color: var(--c-text); }
.cro .cro-path__cta { width: auto; }
.cro-path .cro-btn--primary::after, .dwo .cro-btn--primary::after { animation: none; }
.dwo .cro-btn--primary:hover::after { left: 130%; transition: left .7s ease; }
.dwo .cro-btn--primary:hover { box-shadow: 0 12px 30px rgba(194, 65, 12, .45), 0 0 0 4px rgba(255, 106, 31, .14); }
.cro-path__cta .dwo-arrow { width: 18px; height: 18px; }
.cro-path__micro { display: flex; align-items: center; gap: 7px; margin: 12px 0 0; font-size: 14px; font-weight: 600; color: var(--c-text); }
.cro-path__micro svg { flex: none; width: 16px; height: 16px; color: var(--c-acc); }
.cro-path__card--grow { --c-title: #fff; --c-text: rgba(255, 255, 255, .88); --c-soft: rgba(255, 255, 255, .1); --c-acc: #ffb27a; --c-line: rgba(255, 255, 255, .22);
    background: radial-gradient(70% 90% at 100% 0%, rgba(125, 182, 255, .42), transparent 62%), linear-gradient(145deg, #0b3c8a 0%, #1450c8 58%, #1f6fff 100%); }
.cro-path__card--scale { --c-title: #fff; --c-text: rgba(255, 255, 255, .82); --c-soft: rgba(255, 255, 255, .06); --c-acc: #ffb27a; --c-line: rgba(145, 192, 255, .2);
    background: radial-gradient(60% 80% at 100% 0%, rgba(31, 111, 255, .3), transparent 62%), linear-gradient(150deg, #061a3d 0%, #0a2654 100%); }
.cro-path__card--scale::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .6; background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(70% 90% at 100% 0%, #000, transparent); mask-image: radial-gradient(70% 90% at 100% 0%, #000, transparent); }
.cro-path__card--grow .cro-path__list, .cro-path__card--scale .cro-path__list { border: 1px solid rgba(255, 255, 255, .14); }
.cro-path__card--grow .cro-path__ico, .cro-path__card--scale .cro-path__ico { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.cro-path__card--grow .cro-path__list li svg, .cro-path__card--scale .cro-path__list li svg { color: #7a2e0e; background: #ffc092; }
/* ticks draw in each time a card comes on screen (one-off, never looping) */
.dwo-slide.is-active .cro-path__list li svg path { stroke-dasharray: 26; animation: cro-tick .5s ease-out both; animation-delay: calc(var(--i, 0) * 70ms + 200ms); }
.dwo-slide.is-active .cro-path__main, .dwo-slide.is-active .cro-path__list, .dwo-slide.is-active .cro-path__foot { animation: cro-pop .55s cubic-bezier(.2, .7, .2, 1) both; }
.dwo-slide.is-active .cro-path__list { animation-delay: .08s; }
.dwo-slide.is-active .cro-path__foot { animation-delay: .14s; }

@media (max-width: 991px) {
    .cro-path__card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "list" "foot"; gap: 18px; }
    .cro-path__text { margin-bottom: 0; }
    .dwo-slide .cro-path__card { align-content: start; }
    .dwo .dwo-title { display: none; }
    .dwo-help__q { display: none; }
    .dwo-screen { height: min(880px, calc(100vh - 150px)); }
}

/* ---- phone: the offers open as a full-height mobile screen ---- */
@media (max-width: 767px) {
    .dwo.dw-promo-overlay { padding: 10px; }
    .dwo-device { width: 100%; max-width: 440px; height: calc(100vh - 20px); height: calc(100dvh - 20px); }
    .dwo-frame { height: 100%; padding: 9px; border-radius: 44px; background: linear-gradient(160deg, #273247, #0b1220 55%); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8), inset 0 0 0 1.5px rgba(255, 255, 255, .12); }
    .dwo-cam { top: 19px; width: 84px; height: 24px; margin-left: -42px; border-radius: 20px; background: #000; box-shadow: none; z-index: 3; }
    .dwo-screen { height: 100%; border-radius: 35px; }
    .dwo-base { display: none; }
    .dwo-bar { height: auto; padding: 46px 10px 8px 22px; gap: 10px; background: #fff; }
    .dwo-dots, .dwo-url { display: none; }
    .dwo .dwo-title { display: block; text-align: left; font-size: 12px; }
    .dwo-slide .cro-path__card { padding: 22px 20px 26px; }
    .cro-path__top { margin-bottom: 14px; }
    .cro-path__ico { width: 42px; height: 42px; }
    .cro .cro-path__card h3 { font-size: 25px; }
    .cro-path__text { font-size: 15.5px; line-height: 1.55; }
    .cro-path__list { padding: 14px 16px; }
    .cro-path__list-title { display: none; }
    .cro-path__list ul { gap: 7px; }
    .cro-path__list li { font-size: 15px; }
    .cro-path__value { margin-bottom: 16px; font-size: 15px; }
    .cro .cro-path__cta { width: 100%; }
    .dwo-foot { flex-direction: column; gap: 2px; padding: 6px 12px 20px; position: relative; }
    .dwo-foot::after { content: ""; position: absolute; bottom: 7px; left: 50%; width: 120px; height: 4px; margin-left: -60px; border-radius: 4px; background: #14213d; opacity: .85; }
    .dwo-nav { gap: 6px; }
    .dwo-help { justify-content: center; gap: 0 18px; font-size: 14px; }
    .dwo-help__link { min-height: 36px; }
}
@media (max-width: 767px) and (max-height: 900px) { .dwo .cro-path__value { display: none; } }   /* keep the CTA on screen */
@media (max-width: 360px) { .dwo-help__link--wa { display: none; } }
@media (prefers-reduced-motion: reduce) {
    .dwo *, .dwo-device, .dwo.dw-promo-overlay { transition: none !important; animation: none !important; }
}

/* ---------- Selector tab switch: the outgoing panel fades+lifts out before the next one is unhidden, instead of an
   instant cut. The incoming panel needs no rule here — .cro-anim.is-in .cro-panel:not([hidden]) above already plays its
   cro-pop entrance (plus the chip stagger and checkmark draw) every time `hidden` is removed, on both mobile and desktop. */
.cro-panel--out { transition: opacity .22s ease, transform .22s cubic-bezier(.4, 0, 1, 1); opacity: 0; transform: translate3d(0, -10px, 0); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .cro-panel--out { transition: none; opacity: 1; transform: none; } }

/* ---------- Portfolio: write-up (1/3) + the live site itself, running in a browser frame (2/3) ---------- */
.cro-work__list { display: grid; gap: clamp(28px, 4vw, 44px); }
.cro-work__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(24px, 4vw, 52px); align-items: center; }
.cro-work__row:nth-child(even) { direction: rtl; }
.cro-work__row:nth-child(even) > * { direction: ltr; }
.cro-work__col h3 { margin: 14px 0 10px; font: 800 clamp(22px, 2.4vw, 28px)/1.25 "Barlow", sans-serif; letter-spacing: -.01em; color: #073965; }
.cro-work__col h3 a { color: inherit; text-decoration: none; }
.cro-work__col h3 a:hover { color: var(--cta); }
.cro-work__col > p { margin: 0 0 16px; font-size: 16.5px; line-height: 1.65; color: var(--muted); }
.cro-work__cat { background: #fff5ec; border-color: #ffd8b3; color: var(--cta); }
.cro-work__cat::before { display: none; }
.cro-work__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.cro-work__meta li { padding: 6px 13px; border-radius: 999px; background: var(--tint); border: 1px solid var(--line); font: 600 13px/1.3 "Barlow", sans-serif; color: var(--navy); }
.cro-work__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.cro-work__more { display: flex; justify-content: center; margin-top: clamp(32px, 4vw, 48px); }

/* the browser-frame preview: a real macOS-style chrome bar (dots + url + open-in-new-tab) around the live iframe */
.cro-browser { position: relative; isolation: isolate; overflow: hidden; border-radius: 16px; background: #eef2f9; box-shadow: 0 26px 54px -26px rgba(11, 60, 138, .45), 0 0 0 1px var(--line); }
.cro-browser__bar { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: #eef1f6; border-bottom: 1px solid #dfe6f1; }
.cro-browser__dots { display: flex; gap: 6px; flex: none; }
.cro-browser__dots i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.cro-browser__dots i:nth-child(1) { background: #ff5f57; }
.cro-browser__dots i:nth-child(2) { background: #febc2e; }
.cro-browser__dots i:nth-child(3) { background: #28c840; }
.cro-browser__url { display: flex; align-items: center; gap: 7px; flex: 1 1 auto; min-width: 0; padding: 6px 12px; border-radius: 7px; background: #fff; font: 500 13px/1.2 "Barlow", sans-serif; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cro-browser__url svg { flex: none; width: 14px; height: 14px; color: #16a34a; }
.cro-browser__open { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; color: var(--navy); transition: background-color .2s, color .2s; }
.cro-browser__open:hover { background: #e3eaf5; color: var(--cta); }
.cro-browser__open svg { width: 16px; height: 16px; }
.cro-browser__screen { position: relative; aspect-ratio: 16 / 10; background: #fff; }
.cro-browser__screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cro-browser--static img { display: block; width: 100%; height: auto; }

.cro-anim .cro-work__row { opacity: 0; transform: translate3d(0, 26px, 0); }
.cro-anim.is-in .cro-work__row { opacity: 1; transform: none; transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 140ms + 80ms); }
.cro-anim .cro-work__preview .cro-browser { transform: scale(.96); transition: transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 140ms + 200ms); }
.cro-anim.is-in .cro-work__preview .cro-browser { transform: none; }

@media (max-width: 991px) {
    .cro-work__row, .cro-work__row:nth-child(even) { grid-template-columns: minmax(0, 1fr); direction: ltr; }
    .cro-work__row .cro-work__preview { order: -1; }
}
@media (max-width: 575px) {
    .cro-browser__url { font-size: 12px; }
    .cro-work__cta .cro-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .cro-anim .cro-work__row, .cro-anim .cro-work__preview .cro-browser { opacity: 1 !important; transform: none !important; }
}

/* ---------- Services: outcome-led image cards (image = the service's featured image from admin > Services) ---------- */
.cro-services { position: relative; isolation: isolate; overflow: hidden; padding: clamp(52px, 6vw, 88px) 0; background: linear-gradient(180deg, #fff 0%, #f5f8fd 100%); }
.cro-services::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(40% 35% at 0% 20%, rgba(31, 111, 255, .08), transparent 70%), radial-gradient(40% 35% at 100% 90%, rgba(255, 106, 31, .08), transparent 70%); }
.cro-services__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.cro-services__card { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 18px 40px -30px rgba(11, 60, 138, .45); transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s, border-color .3s; }
.cro-services__card::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: linear-gradient(90deg, #ff6a1f, #1f6fff); transform: scaleX(0); transform-origin: left; transition: transform .55s cubic-bezier(.2, .7, .2, 1); }
.cro-services__card:hover { transform: translateY(-8px); border-color: #c4d5f3; box-shadow: 0 34px 60px -30px rgba(11, 60, 138, .55); }
.cro-services__card:hover::after, .cro-services__card:focus-within::after { transform: scaleX(1); }

/* image: slow zoom + a navy wash that lifts on hover */
.cro-services__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #e8eef8; }
.cro-services__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.01); transition: transform .9s cubic-bezier(.2, .7, .2, 1), filter .5s; }
.cro-services__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 26, 61, .05) 30%, rgba(6, 26, 61, .55) 100%); transition: opacity .5s; }
.cro-services__card:hover .cro-services__media img { transform: scale(1.08); filter: saturate(1.08); }
.cro-services__card:hover .cro-services__media::after { opacity: .7; }
.cro-services__tag { position: absolute; left: 16px; top: 16px; z-index: 1; max-width: calc(100% - 32px); padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .94); box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .35); font: 700 12px/1.2 "Barlow", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cro-services__body { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; padding: 0 26px 26px; }
.cro-services__ico { position: relative; z-index: 2; display: grid; place-items: center; width: 54px; height: 54px; margin: -27px 0 16px; border-radius: 16px; color: #fff; background: linear-gradient(135deg, #0b3c8a, #1f6fff); box-shadow: 0 14px 26px -12px rgba(31, 111, 255, .75), 0 0 0 4px #fff; transition: transform .4s cubic-bezier(.2, .7, .2, 1), background .4s; }
.cro-services__ico svg { width: 24px; height: 24px; }
.cro-services__card:hover .cro-services__ico { transform: translateY(-4px) rotate(-6deg); background: linear-gradient(135deg, #c2410c, #ff6a1f); }
.cro-services__card h3 { margin: 0 0 10px; font: 800 clamp(19px, 1.7vw, 22px)/1.25 "Barlow", sans-serif; letter-spacing: -.01em; color: #073965; text-wrap: balance; }
.cro-services__card h3 a { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .4s cubic-bezier(.2, .7, .2, 1), color .25s; }
.cro-services__card h3 a:hover { color: var(--cta); background-size: 100% 2px; }
.cro-services__card p { margin: 0 0 22px; font-size: 15.5px; line-height: 1.65; color: var(--muted); }

/* animated pill button: colour fills in from the left, arrow chip slides forward */
.cro-services__link { position: relative; isolation: isolate; overflow: hidden; align-self: flex-start; margin-top: auto; display: inline-flex; align-items: center; gap: 12px; min-height: 46px; padding: 5px 6px 5px 20px; border: 1.5px solid #f3c9b3; border-radius: 999px; font: 700 15px/1.2 "Barlow", sans-serif; color: var(--cta); text-decoration: none; transition: color .35s, border-color .35s, box-shadow .35s; }
.cro-services__link::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(100deg, #c2410c, #ff6a1f); transform: translateX(-101%); transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.cro-services__arrow { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; background: var(--cta); transition: transform .45s cubic-bezier(.2, .7, .2, 1), background-color .35s, color .35s; }
.cro-services__arrow svg { width: 16px; height: 16px; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.cro-services__card:hover .cro-services__link, .cro-services__link:focus-visible { color: #fff; border-color: transparent; box-shadow: 0 12px 26px -10px rgba(194, 65, 12, .6); text-decoration: none; }
.cro-services__card:hover .cro-services__link::before, .cro-services__link:focus-visible::before { transform: none; }
.cro-services__card:hover .cro-services__arrow, .cro-services__link:focus-visible .cro-services__arrow { background: #fff; color: var(--cta); transform: translateX(3px); }
.cro-services__card:hover .cro-services__arrow svg { transform: rotate(-45deg); }
.cro-services__link:active { transform: scale(.97); }

.cro-services__more { display: flex; justify-content: center; margin-top: clamp(32px, 4vw, 46px); }
.cro-services__all svg { width: 18px; height: 18px; transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.cro-services__all:hover svg { transform: translateX(5px); }

.cro-anim .cro-services__card { opacity: 0; transform: translate3d(0, 28px, 0); }
.cro-anim.is-in .cro-services__card { opacity: 1; transform: none; transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .2, 1), box-shadow .4s, border-color .3s; transition-delay: calc(var(--i, 0) * 90ms + 80ms), calc(var(--i, 0) * 90ms + 80ms), 0s, 0s; }
.cro-anim.is-in .cro-services__card:hover { transform: translateY(-8px); transition-delay: 0s; }

@media (max-width: 991px) { .cro-services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (max-width: 575px) { .cro-services__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; } .cro-services__body { padding: 0 20px 22px; } .cro-services__link { align-self: stretch; justify-content: space-between; } }
@media (hover: none) { .cro-services__card:hover, .cro-anim.is-in .cro-services__card:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) { .cro-anim .cro-services__card { opacity: 1 !important; transform: none !important; } .cro-services__card:hover, .cro-services__card:hover .cro-services__media img { transform: none; } }

/* Home "About" section: H2 heading styled like the other section titles (h3), plus the CTA note + trust line */
.about .section-title h2 { margin: 0; font-family: "Playfair Display", serif; font-weight: 700; letter-spacing: .3px; text-transform: none; color: #073965; font-size: 34px; line-height: 1.08; display: inline-block; }
@media (max-width: 991px) { .about .section-title h2 { font-size: 28px; line-height: 38px; } }
@media (max-width: 767px) { .about .section-title h2 { font-size: 24px; line-height: 34px; } }
/* About section v2: two-column grid inside the container — readable copy column, framed image, CTA block, trust chips */
.about--v2 { padding-bottom: clamp(56px, 7vw, 96px); }
.about--v2 .section-title { margin-bottom: clamp(30px, 4vw, 52px); }
.about-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.about-lead { margin: 0 0 16px; padding-left: 16px; border-left: 4px solid #ff6a1f; font: 700 clamp(19px, 1.8vw, 23px)/1.35 "Barlow", sans-serif; color: #073965; }
.about--v2 .about-text p { margin: 0 0 14px; font-size: 16.5px; line-height: 1.7; color: #4b5563; }
.about-result { margin: 18px 0 0; padding: 16px 18px; border-radius: 14px; background: #f3f7fd; font-size: 16.5px; line-height: 1.6; color: #4b5563; }
.about-result strong { color: #073965; }
.about-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 26px; }
.about-cta .btn { flex: none; }
.about--v2 .about-cta-note { flex: 1 1 260px; margin: 0; font-size: 15px; line-height: 1.55; color: #5a6472; }
.about--v2 .about-cta-trust { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.about--v2 .about-cta-trust li { padding: 6px 12px; border: 1px solid #dbe5f5; border-radius: 999px; background: #fff; font: 600 13.5px/1.2 "Barlow", sans-serif; color: #073965; }
.about-media { position: sticky; top: 110px; }
.about-media::before { content: ""; position: absolute; inset: 18px -14px -14px 18px; z-index: 0; border-radius: 26px; background: linear-gradient(135deg, rgba(31, 111, 255, .14), rgba(255, 106, 31, .14)); }
.about--v2 .about-img { position: relative; z-index: 1; display: block; width: 100%; height: auto; border-radius: 22px; box-shadow: 0 30px 60px -30px rgba(7, 57, 101, .45); }
@media (max-width: 991px) {
    .about-grid { grid-template-columns: minmax(0, 1fr); }
    .about-media { position: relative; top: auto; order: -1; max-width: 560px; margin: 0 auto; width: 100%; }
}
@media (max-width: 575px) {
    .about-cta .btn { width: 100%; text-align: center; }
    .about-media::before { inset: 10px -6px -6px 10px; }
}
/* About v2: note + service tags in a card under the image */
.about-media__card { position: relative; z-index: 2; margin: -38px 20px 0; padding: 18px 20px; border: 1px solid #e3eaf5; border-radius: 18px; background: #fff; box-shadow: 0 24px 44px -26px rgba(7, 57, 101, .45); }
.about-media__top { display: flex; align-items: flex-start; gap: 14px; }
.about-media__icon { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, #ff6a1f, #ff9a4d); color: #fff; box-shadow: 0 10px 20px -10px rgba(255, 106, 31, .8); }
.about-media__icon svg { width: 22px; height: 22px; }
.about--v2 .about-media__card .about-cta-note { flex: 1; margin: 0; font-size: 15.5px; line-height: 1.55; color: #31415a; }
.about--v2 .about-media__card .about-cta-trust { margin: 14px 0 0; padding-top: 14px; border-top: 1px dashed #dbe5f5; }
.about--v2 .about-media__card .about-cta-trust li { background: #f3f7fd; border-color: #e3eaf5; transition: background-color .2s, color .2s, border-color .2s; }
.about--v2 .about-media__card .about-cta-trust li:hover { background: #073965; border-color: #073965; color: #fff; }
.about-media::before { bottom: 60px; }
@media (max-width: 575px) { .about-media__card { margin: -24px 10px 0; padding: 16px; } }


/* ================= Hero (2026-10 design): copy + visual + enquiry form, stats bar below ================= */
.cro-hero { padding: 170px 0 0; background: radial-gradient(45% 55% at 58% 20%, rgba(12, 58, 134, .75) 0%, rgba(12, 58, 134, 0) 70%), linear-gradient(115deg, #06173a 0%, #071d47 55%, #0a1f49 100%); }
.cro-hero::before, .cro-hero::after { display: none; }
.cro-hero .container { width: 100%; max-width: 1640px; padding-left: 52px; padding-right: 52px; }
.cro-hero__grid { grid-template-columns: minmax(0, 540px) minmax(0, 1fr) 396px; gap: 0; align-items: stretch; }
.cro-hero__copy { position: relative; z-index: 2; padding-bottom: 40px; }
.cro-eyebrow { gap: 9px; margin-bottom: 14px; padding: 8px 16px; border-color: rgba(120, 165, 255, .32); background: rgba(14, 42, 96, .75); color: #fff; font: 500 15px/1.2 "Barlow", sans-serif; letter-spacing: 0; text-transform: none; }
.cro-eyebrow::before { display: none; }
.cro-eyebrow svg { width: 20px; height: 20px; flex: none; }
.cro-hero h1 { max-width: none; margin: 0; font: 800 clamp(40px, 3.7vw, 62px)/1.06 "Barlow", sans-serif; letter-spacing: -.01em; text-wrap: wrap; }
.cro-hero h1 span { display: block; background: none; color: #ff7a1a; -webkit-text-fill-color: #ff7a1a; }
.cro-hero__swoosh { display: block; width: 230px; height: 10px; margin: 2px 0 8px 304px; }
.cro-lead { max-width: 520px; margin-bottom: 16px; font-size: clamp(16px, 1.25vw, 20px); line-height: 1.42; color: #fff; }
.cro-hero__features { display: flex; gap: 22px; margin: 0 0 20px; padding: 0; list-style: none; }
.cro-hero__features li { display: flex; align-items: center; gap: 12px; max-width: 165px; font: 600 14px/1.25 "Barlow", sans-serif; color: #fff; }
.cro-hero__features span { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border: 1px solid rgba(255, 138, 61, .65); border-radius: 50%; color: #ff8a3d; background: rgba(255, 122, 26, .08); }
.cro-hero__features svg { width: 26px; height: 26px; }
.cro-hero__cta { flex-wrap: nowrap; gap: 18px; margin-bottom: 18px; }
.cro-hero .cro-btn { min-height: 56px; padding: 12px 22px; border-radius: 10px; white-space: nowrap; font: 700 clamp(16px, 1.15vw, 19px)/1.2 "Barlow", sans-serif; text-transform: none; letter-spacing: 0; }
.cro-hero .cro-btn::before, .cro-hero .cro-btn::after { display: none; }
.cro-hero .cro-btn svg { width: 24px; height: 24px; flex: none; }
.cro-hero .cro-btn--primary { border-color: transparent; background: linear-gradient(90deg, #ff8a1f, #f4640a); color: #fff; box-shadow: 0 10px 26px -10px rgba(255, 122, 26, .8); }
.cro-hero .cro-btn--ghost { border: 2px solid #fff; background: transparent; color: #fff; box-shadow: none; }
.cro-hero__ticks { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 0; padding: 0; list-style: none; font: 500 14px/1.3 "Barlow", sans-serif; color: #fff; }
.cro-hero__ticks li { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.cro-hero__ticks svg { width: 16px; height: 16px; color: #ff8a3d; }
.cro-hero__visual { position: relative; z-index: 1; display: block; align-self: end; margin: 0 -8px 0 -14px; min-width: 0; }
.cro-hero__visual img { display: block; width: 100%; height: auto; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 93%, transparent 100%), linear-gradient(180deg, transparent 0, #000 7%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 93%, transparent 100%), linear-gradient(180deg, transparent 0, #000 7%); mask-composite: intersect; }
.cro-hero__form { position: relative; z-index: 2; align-self: start; margin-bottom: 40px; padding: 24px 28px 16px 32px; border: 1.5px solid rgba(90, 160, 255, .7); border-radius: 20px; background: rgba(7, 26, 66, .88); box-shadow: 0 0 34px rgba(36, 120, 255, .35), -6px -6px 22px -10px rgba(255, 138, 61, .9); backdrop-filter: blur(10px); }
.cro-hero__form h2 { margin: 0 0 12px; font: 800 clamp(30px, 2.25vw, 37px)/1.02 "Barlow", sans-serif; color: #fff; }
.cro-hero__form h2 span { display: block; color: #ff7a1a; }
.cro-hero__form .cro-btn { min-height: 50px; }
.cro-hero__form > p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.35; color: #fff; }
.cro-field { position: relative; margin-bottom: 13px; }
.cro-field > svg { position: absolute; left: 13px; top: 11px; z-index: 2; width: 24px; height: 24px; fill: none; stroke: #e6eeff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.cro-field input { display: block; width: 100%; height: 46px; margin: 0; padding: 7px 14px 7px 48px; border: 1px solid rgba(135, 170, 230, .4); border-radius: 8px; background-color: rgba(66, 92, 140, .32); color: #fff; font: 500 16px/1.3 "Barlow", sans-serif; box-shadow: none; outline: 0; }
.cro-field input::placeholder { color: #e6eeff; opacity: 1; }
.cro-field input:focus { border-color: #ff8a3d; box-shadow: 0 0 0 3px rgba(255, 138, 61, .25); }
.cro-field.has-error input { border-color: #ff6b6b; box-shadow: 0 0 0 3px rgba(255, 107, 107, .25); }

/* Phone field: country-code select + number input, same box styling as every other .cro-field input (border, radius, height, colors, font). */
.cro-field--phone .cro-phone-group { display: flex; gap: 8px;  }
.cro-phone-code,
.cro-phone-number { display: block; height: 46px; margin: 0; border: 1px solid rgba(135, 170, 230, .4); border-radius: 8px; background-color: rgba(66, 92, 140, .32); color: #fff; font: 500 16px/1.3 "Barlow", sans-serif; box-shadow: none; outline: 0; }
/* 84px comfortably fits the longest option text now ("🇦🇪 +971") without truncating — the full
   country name lives in the title tooltip instead of being crammed into this box (see the blade
   comment next to the <option> tags for why). */
.cro-phone-code { flex: 0 0 84px; min-width: 0; padding: 7px 4px; font-size: 14px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.cro-phone-code option { color: #16213d; font-size: 14px; text-align: left; }
.cro-phone-number { flex: 1 1 auto; min-width: 0; padding: 7px 14px; }
.cro-phone-number::placeholder { color: #e6eeff; opacity: 1; }
.cro-phone-code:focus,
.cro-phone-number:focus { border-color: #ff8a3d; box-shadow: 0 0 0 3px rgba(255, 138, 61, .25); }
.cro-field--phone.has-error .cro-phone-code,
.cro-field--phone.has-error .cro-phone-number { border-color: #ff6b6b; box-shadow: 0 0 0 3px rgba(255, 107, 107, .25); }

@media (max-width: 420px) {
    .cro-phone-code { flex-basis: 76px; font-size: 12.5px; padding: 7px 2px; }
}
.cro-hero__form .cro-btn { width: 100%; margin-top: 2px; }
.cro-hero__form .cro-btn[disabled] { opacity: .7; cursor: wait; }
.cro-hero__safe { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px 0 0; font-size: 13px; line-height: 1.3; color: #fff; }
.cro-hero__safe svg { width: 19px; height: 19px; flex: none; }
.cro-tech { position: relative; z-index: 2; overflow: hidden; padding: 16px 0; }
.cro-tech__track { display: flex; width: max-content; animation: cro-tech-slide 55s linear infinite; }
.cro-tech:hover .cro-tech__track, .cro-tech:focus-within .cro-tech__track { animation-play-state: paused; }
.cro-tech ul { display: flex; align-items: center; flex: none; margin: 0; padding: 0; list-style: none; }
.cro-tech li { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: none; width: 112px; }
.cro-tech img { display: block; width: 48px; height: 48px; }
.cro-tech span { font: 600 14px/1.25 "Barlow", sans-serif; color: #fff; text-align: center; white-space: nowrap; }
@keyframes cro-tech-slide { to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) {
    .cro-tech__track { width: auto; animation: none; }
    .cro-tech ul { flex-wrap: wrap; justify-content: center; row-gap: 16px; padding: 0 12px; }
    .cro-tech ul[aria-hidden] { display: none; }
}

.cro-proof { margin-top: 0; padding: 0; background: #071a3f; border-top: 1px solid rgba(120, 165, 255, .32); }
.cro-proof .container { width: 100%; max-width: 1640px; padding-left: 24px; padding-right: 24px; }
.cro-stats { display: flex; justify-content: space-between; margin: 0; padding: 20px 0; list-style: none; }
.cro-stats li { display: flex; align-items: center; gap: 12px; padding: 0 18px; flex: 0 1 auto; color: #fff; font: 500 clamp(16px, 1.25vw, 20px)/1.3 "Barlow", sans-serif; }
.cro-stats li:first-child { padding-left: 0; }
.cro-stats li:last-child { padding-right: 0; }
.cro-stats li + li { border-left: 1px solid rgba(120, 165, 255, .32); }
.cro-stats svg { width: 38px; height: 38px; flex: none; color: #4aa3ff; }
.cro-stats b { display: block; font: 700 clamp(16px, 1.1vw, 18px)/1.25 "Barlow", sans-serif; color: #fff; }
.cro-stats span { display: block; font-size: clamp(13px, .85vw, 14.5px); color: rgba(255, 255, 255, .85); }
.cro-stats a { color: inherit; text-decoration: underline; text-decoration-color: #ff8a3d; text-underline-offset: 3px; }

@media (max-width: 1399px) {
    .cro-hero__grid { grid-template-columns: minmax(0, 490px) minmax(0, 1fr) 350px; }
    .cro-hero__features { gap: 12px; }
    .cro-hero__features li { font-size: 13px; }
    .cro-hero__features span { width: 44px; height: 44px; }
    .cro-hero__swoosh { margin-left: 200px; }
    .cro-hero .cro-btn { padding: 10px 16px; font-size: 15px; }
    .cro-hero .container { padding-left: 50px; padding-right: 50px; }
    .cro-stats li { gap: 12px; padding: 0 14px; }
    .cro-stats svg { width: 36px; height: 36px; }
}
@media (max-width: 1199px) {
    .cro-hero__grid { grid-template-columns: minmax(0, 1fr) 350px; gap: 28px; position: relative; }
    .cro-hero { padding-top: 196px; }
    .cro-hero__visual { display: none; }
    .cro-hero__form { grid-column: 2; grid-row: 1; }
}
@media (max-width: 991px) {
    .cro-hero { padding-top: 120px; }
    .cro-hero__cta { flex-wrap: wrap; }
    .cro-hero__grid { display: block; }
    .cro-hero__copy { padding-bottom: 28px; }
    .cro-hero__visual { display: block; max-width: 480px; margin: 0 auto 24px; }
    .cro-hero__form { margin-bottom: 36px; padding: 24px 20px 18px; }
    .cro-stats { flex-wrap: wrap; gap: 18px 0; }
    .cro-stats li, .cro-stats li:first-child { width: 50%; padding: 0 10px; }
    .cro-stats li + li { border-left: 0; }
}
@media (max-width: 767px) {
    .cro-hero { padding-top: 112px; }
    .cro-hero .container { padding-left: 18px; padding-right: 18px; }
    .cro-hero .cro-btn { padding: 12px 18px; font-size: 17px; }
    .cro-eyebrow { font-size: 14px; }
    .cro-hero__swoosh { width: 170px; margin-left: 110px; }
    .cro-hero__features { flex-direction: column; gap: 10px; }
    .cro-hero__features li { max-width: none; font-size: 15px; }
    .cro-hero .cro-btn { width: 100%; }
    .cro-hero__cta { gap: 12px; }
    .cro-proof { display: none; }
}