/* Chomotkar Agency: front-end styles */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-body, 'Poppins', sans-serif); font-size: 15px; line-height: 1.65; color: var(--text, #1d1e22); background: #fff; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-head, 'Syne', sans-serif); margin: 0; line-height: 1.15; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.cag-i { flex: none; }
.screen-reader-text { position: absolute; left: -9999px; }
.screen-reader-text:focus { left: 8px; top: 8px; z-index: 999; background: #fff; padding: 8px 12px; border-radius: 8px; }

.cag-container { width: min(1180px, 100% - 48px); margin-inline: auto; }
.cag-container--narrow { width: min(780px, 100% - 48px); }

/* Buttons */
.cag-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--primary); background: var(--primary); color: #fff; padding: 14px 28px; border-radius: 14px; font: 500 14px/1.2 var(--font-body); cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s; }
.cag-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 35%, transparent); }
.cag-btn--sm { padding: 10px 20px; font-size: 13px; border-radius: 12px; }
.cag-btn--ghost { background: transparent; color: var(--text); border-color: rgba(0,0,0,.15); }
.cag-btn--ghost:hover { box-shadow: none; border-color: var(--text); }
.cag-btn--light { background: #fff; color: var(--primary); border-color: #fff; }
.cag-btn--light:hover { box-shadow: 0 10px 24px rgba(0,0,0,.2); }

/* Titles */
.cag-title { font-size: clamp(26px, 3.3vw, 38px); font-weight: 700; letter-spacing: -.01em; }
.cag-title .hl { display: block; color: var(--primary); }
.cag-h1 { font-size: clamp(34px, 5.6vw, 62px); font-weight: 700; line-height: 1.08; }

/* Header */
.cag-header { background: #fff; z-index: 50; position: relative; transition: box-shadow .2s; }
.cag-header.is-sticky { position: sticky; top: 0; }
body.admin-bar .cag-header.is-sticky { top: 32px; }
.cag-header.is-scrolled { box-shadow: 0 6px 24px rgba(0,0,0,.06); }
.cag-header__in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 18px 0; }
.cag-logo { display: inline-flex; align-items: center; gap: 9px; justify-self: start; font-family: var(--font-head); font-weight: 700; font-size: 22px; }
.cag-logo img { max-height: 38px; width: auto; }
.cag-logo__mark { color: var(--primary); display: inline-flex; }
.cag-logo__mark svg { fill: currentColor; stroke: currentColor; stroke-width: 1; }
.cag-nav ul { display: flex; gap: 38px; }
.cag-nav a { font-size: 13px; font-weight: 500; position: relative; padding: 6px 0; }
.cag-nav a::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--primary); transition: width .2s; }
.cag-nav a:hover::after { width: 100%; }
.cag-header__actions { display: flex; align-items: center; gap: 12px; justify-self: end; }
.cag-burger { display: none; width: 42px; height: 42px; border: 0; background: transparent; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; padding: 0; }
.cag-burger span { display: block; width: 24px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .2s, opacity .2s; }
.cag-burger[aria-expanded=true] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cag-burger[aria-expanded=true] span:nth-child(2) { opacity: 0; }
.cag-burger[aria-expanded=true] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Hero */
.cag-hero { background: #fff; padding: 28px 0 0; text-align: center; overflow: hidden; }
.cag-badge { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 22px; font-size: 12.5px; font-weight: 600; }
.cag-avatars { display: inline-flex; }
.cag-avatars img, .cag-avatar { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; object-fit: cover; margin-left: -9px; background: #ddd; }
.cag-avatars > :first-child { margin-left: 0; }
.cag-avatar--0 { background: linear-gradient(135deg, #f3c9a8, #d99a73); }
.cag-avatar--1 { background: linear-gradient(135deg, #b8c4ff, #7c8cf0); }
.cag-avatar--2 { background: linear-gradient(135deg, #ffd6e0, #f08ca8); }
.cag-avatar--3 { background: linear-gradient(135deg, #c9f0dd, #6fcf9f); }
.cag-lead { max-width: 480px; margin: 22px auto 0; font-size: 14.5px; color: #3a3c44; }
.cag-hero__btns { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 28px; }


/* Sections */
.cag-section { background: var(--bg); padding: 84px 0 0; }
.cag-section:last-of-type { padding-bottom: 90px; }
.cag-stats + .cag-section { padding-top: 70px; }
.cag-sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 36px; }
.cag-sec-head__desc { max-width: 340px; margin: 0; font-size: 13.5px; }
.cag-sec-head--center { justify-content: center; text-align: center; }

/* Offices */
.cag-offices { display: grid; gap: 14px; grid-template-columns: 1fr; }
.cag-offices--2 { grid-template-columns: 1.55fr 1fr; }
.cag-offices--3 { grid-template-columns: 1.4fr 1fr 1fr; }
.cag-office { position: relative; display: block; border-radius: calc(var(--radius) + 2px); overflow: hidden; min-height: 300px; background: #ccd6ec; }
.cag-office img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.cag-office:hover img { transform: scale(1.05); }
.cag-office__arrow { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; background: #fff; display: grid; place-items: center; transition: transform .2s; }
.cag-office:hover .cag-office__arrow { transform: translateX(3px); }
.cag-office__label { position: absolute; left: 16px; bottom: 16px; background: #fff; border-radius: 22px; padding: 14px 26px 14px 22px; display: flex; flex-direction: column; max-width: calc(100% - 32px); }
.cag-office__label strong { font-family: var(--font-head); font-size: 15px; display: flex; align-items: center; gap: 8px; }
.cag-office__label strong::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.cag-office__label em { font-style: normal; font-size: 13.5px; }

/* Cards & grids */
.cag-grid { display: grid; gap: 16px; }
.cag-grid--3 { grid-template-columns: repeat(3, 1fr); }
.cag-card { background: #fff; border-radius: var(--radius); padding: 28px; }
.cag-service { display: flex; flex-direction: column; min-height: 230px; transition: transform .25s, box-shadow .25s; }
.cag-service:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(0,0,0,.08); }
.cag-ico { width: 46px; height: 46px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; }
.cag-service h3 { font-size: 17px; margin: 22px 0 8px; font-family: var(--font-body); font-weight: 600; }
.cag-service p { font-size: 13.5px; color: #4a4c55; margin: 0; }
.cag-more { margin-top: auto; padding-top: 22px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; transition: gap .2s; }
.cag-more:hover { gap: 12px; color: var(--primary); }
.cag-tone-blue { background: color-mix(in srgb, var(--primary) 13%, #fff); color: var(--primary); }
.cag-tone-coral { background: #ffe9e2; color: #e5522e; }
.cag-tone-teal { background: #d9f3f1; color: #0d8a85; }
.cag-tone-amber { background: #fff1d6; color: #c77a00; }
.cag-tone-pink { background: #ffe4f1; color: #d63384; }
.cag-tone-sky { background: #dff1ff; color: #1b82d1; }
.cag-tone-green { background: #dcf5e8; color: #178a56; }
.cag-tone-gray { background: #e8edf7; color: #38435f; }

/* Portfolio */
.cag-work { padding: 12px; display: block; transition: transform .25s, box-shadow .25s; }
.cag-work:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(0,0,0,.08); }
.cag-work__img { display: block; border-radius: calc(var(--radius) - 8px); overflow: hidden; aspect-ratio: 4 / 3; background: #e1e8f6; }
.cag-work__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.cag-work:hover .cag-work__img img { transform: scale(1.05); }
.cag-work__body { display: block; padding: 16px 12px 8px; }
.cag-work__body small { display: inline-block; font-size: 11.5px; font-weight: 600; color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, #fff); padding: 3px 10px; border-radius: 99px; margin-bottom: 8px; }
.cag-work__body strong { display: block; font-family: var(--font-body); font-weight: 600; font-size: 16px; }

/* Process */
.cag-dark { background: var(--dark); color: #fff; border-radius: calc(var(--radius) + 12px); padding: 64px 48px; }
.cag-dark .cag-title { color: #fff; }
.cag-dark .cag-sec-head { margin-bottom: 44px; }
.cag-steps { display: grid; gap: 24px; grid-template-columns: repeat(4, 1fr); }
.cag-steps--1 { grid-template-columns: 1fr; }
.cag-steps--2 { grid-template-columns: repeat(2, 1fr); }
.cag-steps--3 { grid-template-columns: repeat(3, 1fr); }
.cag-steps li { border-top: 1px solid rgba(255,255,255,.18); padding-top: 22px; }
.cag-steps__n { font-family: var(--font-head); font-size: 40px; font-weight: 700; color: var(--primary); display: block; margin-bottom: 14px; line-height: 1; }
.cag-steps h3 { font-size: 18px; margin-bottom: 8px; font-family: var(--font-body); font-weight: 600; }
.cag-steps p { font-size: 13.5px; color: #b9bbc4; margin: 0; }

/* Testimonials */
.cag-quote { margin: 0; display: flex; flex-direction: column; gap: 18px; }
.cag-stars { display: flex; gap: 3px; color: #f5a623; }
.cag-stars svg { fill: currentColor; }
.cag-quote blockquote { margin: 0; font-size: 14.5px; color: #3a3c44; }
.cag-quote figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.cag-quote figcaption img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.cag-avatar--lg { width: 44px; height: 44px; margin: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--primary) 14%, #fff); color: var(--primary); font-weight: 700; border: 0; font-family: var(--font-head); }
.cag-quote strong { display: block; font-size: 14px; }
.cag-quote small { color: #6b6e78; font-size: 12.5px; }

/* CTA */
.cag-cta__box { background: var(--primary); color: #fff; border-radius: calc(var(--radius) + 12px); padding: 72px 32px; text-align: center; position: relative; overflow: hidden; }
.cag-cta__box::before, .cag-cta__box::after { content: ''; position: absolute; border-radius: 50%; background: rgba(255,255,255,.08); }
.cag-cta__box::before { width: 360px; height: 360px; left: -120px; top: -160px; }
.cag-cta__box::after { width: 280px; height: 280px; right: -80px; bottom: -140px; }
.cag-cta__box > * { position: relative; z-index: 1; }
.cag-cta__title { font-size: clamp(28px, 4vw, 46px); color: #fff; }
.cag-cta__title .hl { color: #fff; opacity: .85; }
.cag-cta__box p { max-width: 520px; margin: 18px auto 28px; opacity: .9; }

/* Contact */
.cag-contact { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: start; }
.cag-contact__info p { margin-top: 18px; max-width: 420px; }
.cag-contact__list { display: flex; flex-direction: column; gap: 14px; margin-top: 26px; }
.cag-contact__list li { display: flex; align-items: center; gap: 14px; font-weight: 500; }
.cag-form { display: flex; flex-direction: column; gap: 16px; padding: 32px; }
.cag-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cag-form label span { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.cag-form input, .cag-form textarea { width: 100%; border: 1px solid #d3dcf0; background: #f9fbff; border-radius: 14px; padding: 13px 16px; font: inherit; color: inherit; transition: border-color .15s, box-shadow .15s; }
.cag-form input:focus, .cag-form textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 15%, transparent); background: #fff; }
.cag-form .cag-btn { align-self: flex-start; }
.cag-form__trap { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.cag-alert { padding: 12px 16px; border-radius: 12px; font-size: 14px; }
.cag-alert--ok { background: #dff7ea; color: #0f6b3f; }
.cag-alert--err { background: #fde8e8; color: #a3262b; }

/* Footer */

/* Inner pages */
.cag-inner { background: var(--bg); padding: 70px 0 90px; min-height: 55vh; }
.cag-inner__title { margin-bottom: 30px; }
.cag-content { font-size: 16px; }
.cag-content h2, .cag-content h3 { margin: 1.6em 0 .6em; }
.cag-content img { border-radius: 18px; }
.cag-content a { color: var(--primary); text-decoration: underline; }
.cag-entry__meta { color: #6b6e78; font-size: 13px; margin-bottom: 8px; }
.cag-entry__img { margin-bottom: 28px; border-radius: var(--radius); overflow: hidden; }
.cag-post { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.cag-post > *:not(.cag-post__img) { margin-left: 24px; margin-right: 24px; }
.cag-post__img img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.cag-post__title { font-size: 19px; margin: 20px 24px 8px; font-family: var(--font-body); font-weight: 600; }
.cag-post .cag-more { margin-bottom: 24px; }
.navigation.pagination { margin-top: 36px; }
.nav-links { display: flex; gap: 8px; justify-content: center; }
.page-numbers { padding: 8px 14px; border-radius: 10px; background: #fff; }
.page-numbers.current { background: var(--primary); color: #fff; }
.cag-404 { text-align: center; }
.cag-404__code { font-family: var(--font-head); font-size: clamp(80px, 16vw, 160px); font-weight: 800; color: var(--primary); line-height: 1; margin-bottom: 10px; }
.cag-404 .cag-btn { margin-top: 12px; }

/* Reveal animation */
.js body:not(.cag-no-anim) [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.js body:not(.cag-no-anim) [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.js body:not(.cag-no-anim) [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Tablet */
@media (max-width: 960px) {
	.cag-header__in { grid-template-columns: 1fr auto; }
	.cag-burger { display: flex; }
	.cag-nav { display: none; position: absolute; left: 24px; right: 24px; top: calc(100% - 4px); background: #fff; border-radius: 22px; padding: 14px 22px; box-shadow: 0 20px 50px rgba(0,0,0,.14); }
	.cag-nav.is-open { display: block; }
	.cag-nav ul { flex-direction: column; gap: 0; }
	.cag-nav li a { display: block; padding: 13px 0; font-size: 15px; }
	.cag-nav li + li { border-top: 1px solid #eee; }
	.cag-nav a::after { display: none; }
	.cag-grid--3 { grid-template-columns: repeat(2, 1fr); }
	.cag-offices--2, .cag-offices--3 { grid-template-columns: 1fr; }
	.cag-office { min-height: 240px; }
	.cag-steps, .cag-steps--3 { grid-template-columns: repeat(2, 1fr); }
	.cag-contact { grid-template-columns: 1fr; gap: 32px; }
	.cag-sec-head { align-items: flex-end; }
}
@media (max-width: 720px) {
	body.admin-bar .cag-header.is-sticky { top: 46px; }
	.cag-container { width: min(1180px, 100% - 32px); }
	.cag-sec-head { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 26px; }
	.cag-sec-head--center { align-items: center; }
	.cag-section { padding-top: 60px; }
	.cag-grid--3 { gap: 12px; }
	.cag-card { padding: 22px; }
	.cag-dark { padding: 44px 24px; }
	.cag-steps, .cag-steps--2, .cag-steps--3 { grid-template-columns: 1fr; }
	.cag-cta__box { padding: 52px 22px; }
	.cag-form { padding: 22px; }
	.cag-form__row { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
	.cag-office { min-height: 200px; }
	.cag-office__label { padding: 12px 18px; border-radius: 18px; }
}

/* Clients */
.cag-eyebrow { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, #fff); padding: 6px 14px; border-radius: 99px; margin-bottom: 16px; }
.cag-clients__head > div { max-width: 620px; }
.cag-clients__desc { margin: 14px auto 0; font-size: 14.5px; color: #4a4c55; }
.cag-clients__wall { background: #fff; border-radius: calc(var(--radius) + 8px); padding: 34px 0; display: flex; flex-direction: column; gap: 16px; overflow: hidden; -webkit-mask-image: none; }
.cag-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.cag-marquee__track { display: flex; width: max-content; animation: cagMarquee var(--dur, 30s) linear infinite; }
.cag-marquee.is-reverse .cag-marquee__track { animation-direction: reverse; }
.cag-marquee:hover .cag-marquee__track { animation-play-state: paused; }
@keyframes cagMarquee { to { transform: translateX(-50%); } }
.cag-client { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 76px; min-width: 190px; padding: 0 28px; margin-right: 16px; border-radius: 20px; background: var(--bg); border: 1px solid transparent; transition: background .25s, border-color .25s, transform .25s, box-shadow .25s; flex: none; }
.cag-client:hover { background: #fff; border-color: #d3dcf0; transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.07); }
.cag-client img { max-height: 36px; max-width: 140px; width: auto; object-fit: contain; transition: filter .25s, opacity .25s; }
.is-gray .cag-client img { filter: grayscale(1); opacity: .65; }
.is-gray .cag-client:hover img { filter: none; opacity: 1; }
.cag-client__mark { width: 34px; height: 34px; border-radius: 11px; background: var(--text); color: #fff; display: grid; place-items: center; font: 700 16px/1 var(--font-head); transition: background .25s; }
.cag-client__name { font: 700 17px/1 var(--font-head); letter-spacing: -.01em; color: var(--text); opacity: .75; transition: opacity .25s, color .25s; white-space: nowrap; }
.cag-client:hover .cag-client__mark { background: var(--primary); }
.cag-client:hover .cag-client__name { opacity: 1; color: var(--primary); }
.cag-clients__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; padding: 0 34px; }
.cag-clients__grid .cag-client { margin: 0; min-width: 0; }
@media (max-width: 720px) {
	.cag-clients__wall { padding: 22px 0; }
	.cag-client { height: 62px; min-width: 150px; padding: 0 20px; }
	.cag-clients__grid { padding: 0 16px; grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
	.cag-marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; row-gap: 12px; }
	.cag-marquee__track [aria-hidden=true] { display: none; }
}
body.cag-no-anim .cag-marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; row-gap: 12px; padding: 0 20px; }
body.cag-no-anim .cag-marquee__track [aria-hidden=true] { display: none; }

/* ===== v1.2 polish & mobile refinements ===== */
html, body { overflow-x: clip; }
::selection { background: var(--primary); color: #fff; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 6px; }

.cag-header { border-bottom: 1px solid transparent; }
.cag-header.is-scrolled { border-bottom-color: #eee; background: rgba(255,255,255,.92); backdrop-filter: saturate(160%) blur(12px); }
.cag-hero { position: relative; background: radial-gradient(60% 55% at 50% 0%, color-mix(in srgb, var(--primary) 9%, #fff) 0%, #fff 70%); }
.cag-badge { background: #fff; border: 1px solid #ececf0; padding: 6px 16px 6px 8px; border-radius: 99px; box-shadow: 0 4px 14px rgba(20,20,40,.05); }
.cag-card { box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 8px 24px rgba(15,30,90,.04); }
.cag-btn { letter-spacing: .005em; }
.cag-sec-head__desc { color: #4a4c55; }

@media (max-width: 960px) {
	.cag-header__in { padding: 14px 0; }
	.cag-nav { left: 16px; right: 16px; }
}
@media (max-width: 720px) {
	body { font-size: 14.5px; }
	.cag-hero { padding-top: 14px; }
	.cag-badge { margin-bottom: 18px; font-size: 12px; }
	.cag-h1 { font-size: clamp(32px, 9.4vw, 44px); }
	.cag-lead { font-size: 14px; margin-top: 16px; padding: 0 4px; }
	.cag-hero__btns { margin-top: 22px; gap: 10px; }
	.cag-hero__btns .cag-btn { flex: 1 1 140px; padding: 13px 18px; }
	.cag-title { font-size: clamp(24px, 7vw, 30px); }
	/* two-up compact cards like the mobile mockup */
	.cag-grid--3 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.cag-card { padding: 18px 16px; border-radius: 22px; }
	.cag-service { min-height: 0; }
	.cag-service h3 { font-size: 15px; margin: 14px 0 6px; }
	.cag-service p { font-size: 12.5px; }
	.cag-more { padding-top: 14px; font-size: 12.5px; }
	.cag-ico { width: 40px; height: 40px; }
	.cag-office { min-height: 210px; border-radius: 24px; }
	.cag-offices { gap: 10px; }
	.cag-work { grid-column: 1 / -1; }
	.cag-work__img { aspect-ratio: 16 / 10; }
	.cag-quote { grid-column: 1 / -1; }
	.cag-contact__list li { font-size: 14px; }
	.cag-form .cag-btn { width: 100%; }
}
@media (max-width: 520px) {
	.cag-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 360px) {
	.cag-grid--3 { grid-template-columns: 1fr; }
}

/* ===== v1.5 Header, split hero, editorial stats, clients ===== */
.cag-header, .cag-header.is-sticky, .cag-header.is-scrolled { position: sticky; position: -webkit-sticky; top: 0; z-index: 100; background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
.cag-header { border-bottom: 1px solid #e8edf8; }
.cag-header.is-scrolled { box-shadow: 0 8px 26px rgba(20,20,40,.08); }
body.admin-bar .cag-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .cag-header { top: 46px; } }
html { scroll-padding-top: 84px; }

/* Hero: copy left, visual right */
.cag-hero { text-align: left; overflow: visible; padding: 56px 0 96px;
	background: radial-gradient(700px 420px at 85% 10%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 70%), #fff; }
.cag-hero__in { display: grid; grid-template-columns: 1.02fr 1fr; gap: 56px; align-items: center; }
.cag-proof { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 26px; padding: 6px 18px 6px 8px; background: #fff; border: 1px solid #ececf0; border-radius: 99px; box-shadow: 0 6px 18px rgba(20,20,40,.05); }
.cag-proof__txt { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.cag-proof__txt b { font-size: 12.5px; font-weight: 600; }
.cag-proof .cag-stars { gap: 1px; }
.cag-hero .cag-h1 { font-size: clamp(38px, 5vw, 68px); line-height: 1.04; letter-spacing: -.025em; text-align: left; }
.cag-hero .cag-lead { margin: 24px 0 0; max-width: 500px; font-size: 16px; color: #4a4c55; }
.cag-hero__btns { justify-content: flex-start; margin-top: 32px; }
.cag-hero__btns .cag-btn { padding: 16px 30px; }

.cag-vis { position: relative; width: 100%; aspect-ratio: 1 / 1.02; max-width: 580px; margin-left: auto; }
.cag-vis__bg { position: absolute; inset: 0; border-radius: 44px 44px 44px 120px; overflow: hidden;
	background:
		radial-gradient(60% 40% at 80% 18%, rgba(255,255,255,.28), transparent 70%),
		linear-gradient(155deg, color-mix(in srgb, var(--primary) 78%, #fff) 0%, var(--primary) 55%, color-mix(in srgb, var(--primary) 82%, #000) 100%);
	box-shadow: 0 40px 80px color-mix(in srgb, var(--primary) 30%, transparent); }
.cag-vis__bg::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.35) 1.2px, transparent 1.4px); background-size: 20px 20px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); }
.cag-hero__photo { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; border-radius: 0 0 44px 120px; overflow: hidden; }
.cag-hero__photo img { width: 100%; display: block; }
.cag-hero__photo.is-blend { mix-blend-mode: multiply; }
.cag-hero__photo.is-blend img { filter: contrast(1.05); }

.cag-growth { position: absolute; z-index: 3; left: -34px; top: 9%; width: 218px; padding: 16px 18px 12px; background: #fff; border-radius: 24px; box-shadow: 0 24px 50px rgba(20,30,80,.2); color: var(--primary); animation: cagFloat 7s ease-in-out infinite; }
.cag-growth__top { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; font-weight: 600; color: #4a4c55; }
.cag-growth__top i { width: 26px; height: 26px; border-radius: 50%; background: #dff7ea; color: #1fb26b; display: grid; place-items: center; }
.cag-growth strong { display: block; margin-top: 6px; font: 700 34px/1.05 var(--font-head); color: var(--text); letter-spacing: -.02em; }
.cag-growth__chart { display: block; width: 100%; height: 52px; margin: 4px 0 2px; }
.cag-growth small { font-size: 11.5px; color: #7a7c86; }

.cag-ring { position: absolute; z-index: 3; right: 6%; top: 6%; width: 126px; height: 126px; border-radius: 50%; background: #fff; box-shadow: 0 20px 44px rgba(20,30,80,.2); display: grid; place-items: center; }
.cag-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: cagSpin 22s linear infinite; }
.cag-ring__t { font: 700 10.5px var(--font-body); fill: var(--text); letter-spacing: 1px; text-transform: uppercase; }
.cag-ring__c { position: relative; width: 52px; height: 52px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; }
.cag-ring__c svg { position: static; animation: none; width: 24px; height: 24px; fill: currentColor; }
@keyframes cagSpin { to { transform: rotate(360deg); } }

.cag-chip { position: absolute; z-index: 4; display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 20px; padding: 12px 22px 12px 12px; box-shadow: 0 20px 44px rgba(20,30,80,.2); text-align: left; animation: cagFloat 6s ease-in-out infinite; }
.cag-chip .cag-ico { background: color-mix(in srgb, var(--primary) 12%, #fff); color: var(--primary); width: 44px; height: 44px; }
.cag-chip strong { display: block; font: 700 18px/1.1 var(--font-head); }
.cag-chip small { display: block; font-size: 12px; color: #5b5d66; margin-top: 3px; }
.cag-chip--1 { right: -26px; top: 41%; animation-delay: -2s; }
.cag-chip--2 { left: -30px; bottom: 7%; animation-delay: -4s; }
@keyframes cagFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Stats: editorial row on soft background */
.cag-stats { position: relative; margin-top: -48px; z-index: 5; background: var(--bg); border-radius: 56px 56px 0 0; padding: 64px 0 0; }
.cag-ticker { background: var(--dark); color: #fff; border-radius: 99px; overflow: hidden; padding: 18px 0; margin-bottom: 56px; -webkit-mask-image: none; }
.cag-ticker__track { display: flex; width: max-content; animation: cagMarquee 38s linear infinite; }
.cag-ticker__set { display: flex; align-items: center; flex: none; }
.cag-ticker__set span { font: 600 17px/1 var(--font-head); padding: 0 26px; white-space: nowrap; }
.cag-ticker__set i { color: var(--primary); display: inline-flex; }
.cag-ticker__set i svg { fill: currentColor; }
.cag-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; }
.cag-stats__grid--1 { grid-template-columns: 1fr; }
.cag-stats__grid--2 { grid-template-columns: repeat(2, 1fr); }
.cag-stats__grid--3 { grid-template-columns: repeat(3, 1fr); }
.cag-stats__grid--5 { grid-template-columns: repeat(5, 1fr); gap: 24px; }
.cag-stat { position: relative; padding-top: 22px; border-top: 1.5px solid rgba(0,0,0,.14); display: flex; flex-direction: column; gap: 6px; }
.cag-stat::before { content: ''; position: absolute; left: 0; top: -2px; width: 44px; height: 3px; background: var(--text); border-radius: 3px; }
.cag-stat__ico { position: absolute; right: 0; top: 20px; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--primary); display: grid; place-items: center; box-shadow: 0 6px 16px rgba(15,30,90,.08); }
.cag-stat__value { font: 700 clamp(46px, 5.6vw, 76px)/1 var(--font-head); letter-spacing: -.035em; color: var(--text); }
.cag-stat__value sup { font-size: .5em; vertical-align: top; position: relative; top: .1em; margin-left: 2px; color: var(--primary); letter-spacing: 0; }
.cag-stat__label { font-size: 14px; font-weight: 500; color: #4a4c55; }
.cag-stat--hl::before { background: var(--primary); width: 72px; }
.cag-stat--hl .cag-stat__value { color: var(--primary); }
.cag-stats + .cag-section { padding-top: 90px; }
.cag-stats + .cag-section, .cag-stats { background: var(--bg); }
.cag-stats { padding-bottom: 0; }

/* Clients */
.cag-client { height: 100px; width: 236px; min-width: 0; padding: 0 28px; margin-right: 16px; }
.cag-client img { width: 100%; height: 60px; max-width: none; max-height: none; object-fit: contain; }
.cag-client__mark { width: 40px; height: 40px; font-size: 18px; }
.cag-client__name { font-size: 19px; }
.cag-clients__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 0 30px; }
.cag-clients__grid .cag-client { width: auto; margin: 0; }

@media (max-width: 1100px) {
	.cag-chip--1 { right: -8px; } .cag-chip--2 { left: -8px; } .cag-growth { left: -10px; }
}
@media (max-width: 960px) {
	.cag-hero { padding: 36px 0 84px; }
	.cag-hero__in { grid-template-columns: 1fr; gap: 44px; }
	.cag-vis { margin: 0 auto; max-width: 560px; }
	.cag-stats__grid, .cag-stats__grid--5 { grid-template-columns: repeat(2, 1fr); gap: 40px 28px; }
	.cag-clients__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Mobile ---- */
@media (max-width: 720px) {
	.cag-hero { padding: 24px 0 72px; }
	.cag-hero__in { gap: 32px; }
	.cag-proof { margin-bottom: 18px; padding-right: 14px; }
	.cag-hero .cag-h1 { font-size: clamp(34px, 10vw, 46px); }
	.cag-hero .cag-lead { font-size: 14.5px; margin-top: 16px; }
	.cag-hero__btns { margin-top: 22px; gap: 10px; }
	.cag-hero__btns .cag-btn { flex: 1 1 150px; padding: 14px 18px; }
	/* visual becomes a tidy stacked card */
	.cag-vis { aspect-ratio: auto; max-width: none; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "growth ring" "chips chips" "photo photo"; gap: 10px; padding: 14px 14px 0; align-items: center; }
	.cag-vis__bg { border-radius: 30px 30px 30px 72px; }
	.cag-growth, .cag-ring, .cag-chip, .cag-hero__photo { position: relative; left: auto; right: auto; top: auto; bottom: auto; animation: none; }
	.cag-growth { grid-area: growth; width: auto; padding: 13px 14px 8px; border-radius: 20px; }
	.cag-growth strong { font-size: 28px; }
	.cag-growth__chart { height: 36px; }
	.cag-ring { grid-area: ring; width: 92px; height: 92px; }
	.cag-ring__t { font-size: 10px; }
	.cag-ring__c { width: 38px; height: 38px; } .cag-ring__c svg { width: 18px; height: 18px; }
	.cag-chip { padding: 9px 12px 9px 9px; gap: 9px; border-radius: 16px; box-shadow: 0 10px 24px rgba(20,30,80,.16); }
	.cag-chip .cag-ico { width: 34px; height: 34px; }
	.cag-chip strong { font-size: 15px; } .cag-chip small { font-size: 11px; }
	.cag-vis .cag-chip { grid-area: chips; }
	.cag-vis .cag-chip--1 { grid-column: 1 / 2; } .cag-vis .cag-chip--2 { grid-column: 2 / 3; }
	.cag-hero__photo { grid-area: photo; margin: 4px -14px 0; border-radius: 0 0 30px 72px; }
	/* Stats */
	.cag-stats { margin-top: -40px; border-radius: 36px 36px 0 0; padding-top: 44px; }
	.cag-ticker { margin-bottom: 40px; padding: 14px 0; }
	.cag-ticker__set span { font-size: 15px; padding: 0 20px; }
	.cag-stats__grid, .cag-stats__grid--3, .cag-stats__grid--5 { grid-template-columns: repeat(2, 1fr); gap: 34px 20px; }
	.cag-stat { padding-top: 18px; }
	.cag-stat__ico { width: 34px; height: 34px; top: 14px; }
	.cag-stat__ico svg { width: 17px; height: 17px; }
	.cag-stat__value { font-size: clamp(40px, 12vw, 52px); }
	.cag-stat__label { font-size: 13px; }
	.cag-stats + .cag-section { padding-top: 64px; }
	/* Clients */
	.cag-client { height: 80px; width: 190px; padding: 0 20px; }
	.cag-client img { height: 46px; }
	.cag-clients__wall { padding: 22px 0; }
}
@media (max-width: 420px) {
	.cag-vis { grid-template-areas: "growth ring" "chip1 chip2" "photo photo"; }
	.cag-vis .cag-chip--1 { grid-area: chip1; } .cag-vis .cag-chip--2 { grid-area: chip2; }
	.cag-chip small { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cag-ring svg, .cag-chip, .cag-growth, .cag-ticker__track { animation: none; } }

/* v1.5.1 static client grid = hairline logo wall; lighter duotone; balanced headings */
.cag-clients__wall:has(.cag-clients__grid) { padding: 0; }
.cag-clients__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; padding: 0; background: #dde5f5; }
.cag-clients__grid .cag-client { width: auto; height: 104px; margin: 0; border-radius: 0; background: #fff; border: 0; box-shadow: none; transform: none; padding: 0 22px; min-width: 0; }
.cag-clients__grid .cag-client:hover { background: var(--bg); box-shadow: none; transform: none; }
.cag-clients__grid .cag-client img { height: 56px; }
.cag-clients__grid .cag-client__mark { background: var(--bg); color: var(--text); }
.cag-clients__grid .cag-client:hover .cag-client__mark { background: var(--primary); color: #fff; }
@media (max-width: 960px) { .cag-clients__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) {
	.cag-clients__grid { grid-template-columns: repeat(2, 1fr); }
	.cag-clients__grid .cag-client { width: auto; height: 92px; flex-direction: column; gap: 8px; padding: 0 12px; }
	.cag-clients__grid .cag-client img { height: 44px; }
	.cag-clients__grid .cag-client__mark { width: 32px; height: 32px; font-size: 15px; border-radius: 10px; }
	.cag-clients__grid .cag-client__name { font-size: 14px; }
	.cag-clients__wall:has(.cag-clients__grid) { border-radius: 24px; }
}
.cag-vis__bg { background:
		radial-gradient(60% 40% at 80% 18%, rgba(255,255,255,.3), transparent 70%),
		linear-gradient(155deg, color-mix(in srgb, var(--primary) 70%, #fff) 0%, color-mix(in srgb, var(--primary) 92%, #fff) 55%, var(--primary) 100%); }
.cag-hero__photo.is-blend img { filter: contrast(1.02) brightness(1.08); }
.cag-title, .cag-h1 { text-wrap: balance; }

/* ===== v1.6 Process timeline ===== */
.cag-proc{list-style:none;margin:0;padding:0;display:grid;gap:22px;grid-template-columns:repeat(4,1fr);position:relative;counter-reset:p}
.cag-proc--1{grid-template-columns:1fr}.cag-proc--2{grid-template-columns:repeat(2,1fr)}.cag-proc--3{grid-template-columns:repeat(3,1fr)}
.cag-proc::before{content:"";position:absolute;left:8%;right:8%;top:27px;border-top:2px dashed color-mix(in srgb,var(--primary) 35%,transparent)}
.cag-proc__item{position:relative;padding-top:0}
.cag-proc__node{position:relative;z-index:1;width:56px;height:56px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font:700 18px var(--font-head);box-shadow:0 0 0 8px var(--bg),0 10px 22px rgba(29,78,216,.28);margin:0 0 20px 24px}
.cag-proc__card{background:#fff;border:1px solid #dde5f5;border-radius:var(--radius);padding:24px;height:calc(100% - 76px)}
.cag-proc__card .cag-ico{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;margin-bottom:14px;background:color-mix(in srgb,var(--primary) 12%,#fff);color:var(--primary)}
.cag-proc__card h3{font-size:18px;margin:0 0 8px}
.cag-proc__card p{font-size:14px;margin:0;color:#55607c}
.cag-process{background:var(--bg)}
@media(max-width:960px){.cag-proc,.cag-proc--3{grid-template-columns:repeat(2,1fr)}.cag-proc::before{display:none}}
@media(max-width:620px){
.cag-proc,.cag-proc--2,.cag-proc--3{grid-template-columns:1fr;gap:18px;padding-left:34px}
.cag-proc::before{display:block;left:21px;right:auto;top:20px;bottom:20px;border-top:0;border-left:2px dashed color-mix(in srgb,var(--primary) 35%,transparent)}
.cag-proc__node{position:absolute;left:-34px;top:14px;margin:0;width:42px;height:42px;font-size:15px;box-shadow:0 0 0 6px var(--bg)}
.cag-proc__card{height:auto;padding:20px}}

/* ===== v1.6 Footer (flat, full width) ===== */
.cag-footer{background:var(--dark);color:#b4c0de;position:relative;overflow:hidden;padding:76px 0 0;margin:0;border-radius:0}
.cag-footer::before{content:"";position:absolute;width:520px;height:520px;right:-160px;top:-260px;background:radial-gradient(circle,color-mix(in srgb,var(--primary) 45%,transparent),transparent 70%);pointer-events:none}
.cag-footer .cag-container{position:relative}
.cag-footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1.2fr 1.4fr;gap:44px;padding-bottom:52px}
.cag-footer__brand p{margin:18px 0 22px;font-size:14px;line-height:1.7;max-width:340px}
.cag-footer h4{color:#fff;font:600 15px var(--font-body);margin:0 0 18px;letter-spacing:.02em}
.cag-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.cag-footer a{color:#b4c0de;text-decoration:none;font-size:14px;transition:color .2s}
.cag-footer a:hover{color:#fff}
.cag-footer__contact li{display:flex;gap:10px;align-items:flex-start;font-size:14px}
.cag-footer__contact svg{flex:none;color:var(--accent2);margin-top:2px}
.cag-social{display:flex;gap:10px;flex-wrap:wrap}
.cag-social a{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#fff}
.cag-social a:hover{background:var(--primary)}
.cag-footer__bottom{border-top:1px solid rgba(255,255,255,.1);padding:22px 0;display:flex;justify-content:space-between;gap:16px;align-items:center;font-size:13px}
.cag-footer__bottom a{display:inline-flex;gap:6px;align-items:center}
@media(max-width:960px){.cag-footer__grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.cag-footer{padding-top:56px}.cag-footer__grid{grid-template-columns:1fr 1fr;gap:34px 20px}.cag-footer__grid>:first-child,.cag-footer__grid>:last-child{grid-column:1/-1}.cag-footer__bottom{flex-direction:column;align-items:flex-start}}
.cag-sec-head__p{max-width:380px;margin:0;color:#55607c;font-size:15px}
.cag-cta__box{background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--primary) 55%,var(--dark)))}
.cag-cta__box::after{background:color-mix(in srgb,var(--accent2) 35%,transparent)}
.cag-ticker i{color:var(--accent2)}
@media(max-width:620px){.cag-sec-head__p{max-width:none}}

.cag-logo img{max-height:46px;height:auto}
.cag-footer .cag-logo img{max-height:46px}
@media(max-width:620px){.cag-logo img{max-width:158px!important;max-height:34px}.cag-footer .cag-logo img{max-width:180px!important;max-height:40px}}