/* ==========================================================================
   /constech - ConstBot page styles. Every selector is scoped under body.page-constech.
   Sections: hero (Moppi circle ticker), about (intro + stats + use cases with sticky
   chat mock + success case + "Mide, aprende"), process, cases, results overrides,
   FAQ overrides (heading inside the white card), CTA "Tablet" variant overrides.
   Breakpoints: >=1200 desktop, 768-1199 tablet, <768 phone.
   ========================================================================== */

/* ---------- Shared bits ------------------------------------------------ */
body.page-constech .tag { display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 40px; background: #f7f6f5; }
body.page-constech .tag--white { padding: 6px 16px; background: var(--c-white); }
body.page-constech .tag__icon { display: flex; align-items: center; justify-content: center; width: 29px; height: 29px; padding: 8px; border-radius: 30px; background: #7842ed; }
body.page-constech .tag__icon svg { width: 13px; height: 13px; fill: #faf2fa; }
body.page-constech .tag__title { font-family: var(--f-dm); font-weight: 500; font-size: 14px; line-height: 26px; letter-spacing: -0.5px; color: #131313; white-space: nowrap; }
body.page-constech .tag__title--mobile { display: none; }
/* near-invisible "Abstract Dots" texture used by the live cards/tags */
body.page-constech .dots { position: absolute; inset: 0; margin: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
body.page-constech .dots img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Hero: Moppi (Circle Ticker) ------------------------------- */
body.page-constech .hero { position: relative; z-index: 1; display: flex; flex-direction: row; align-items: flex-end; justify-content: center; height: 770px; width: 100%; overflow: visible; }
body.page-constech .hero__wrap { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px; flex: 1 0 0; width: 1px; height: 700px; overflow: hidden; pointer-events: none; }
body.page-constech .hero__spacer { flex: none; width: 100%; height: 100px; }
body.page-constech .hero__circle-wrap { position: relative; display: flex; align-items: center; justify-content: center; flex: none; width: 1114px; height: 1164px; padding: 50px 0 0; perspective: 1200px; }
body.page-constech .hero__circle { position: relative; width: 1114px; height: 1114px; flex: none; will-change: transform; animation: constech-spin 50s linear infinite; }
body.page-constech .hero__arm:nth-child(1) { --arm-rot: 0deg; }
body.page-constech .hero__arm:nth-child(2) { --arm-rot: 15deg; }
body.page-constech .hero__arm:nth-child(3) { --arm-rot: 30deg; }
body.page-constech .hero__arm:nth-child(4) { --arm-rot: 45deg; }
body.page-constech .hero__arm:nth-child(5) { --arm-rot: 60deg; }
body.page-constech .hero__arm:nth-child(6) { --arm-rot: 75deg; }
body.page-constech .hero__arm:nth-child(7) { --arm-rot: 90deg; }
body.page-constech .hero__arm:nth-child(8) { --arm-rot: 105deg; }
body.page-constech .hero__arm:nth-child(9) { --arm-rot: 120deg; }
body.page-constech .hero__arm:nth-child(10) { --arm-rot: 135deg; }
body.page-constech .hero__arm:nth-child(11) { --arm-rot: 150deg; }
body.page-constech .hero__arm:nth-child(12) { --arm-rot: 165deg; }
body.page-constech .hero__arm { position: absolute; top: 50%; left: 50%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; width: min-content; height: 100%; transform: translate(-50%, -50%) rotate(var(--arm-rot, 0deg)); }
body.page-constech .hero__card { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; width: 110px; height: 110px; padding: 5px; border-radius: 26px; background: rgba(8, 8, 8, 0.32); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); overflow: hidden; }
body.page-constech .hero__card--flip { transform: rotate(180deg); }
body.page-constech .hero__card-img { position: relative; width: 100%; height: 100%; border-radius: 22px; overflow: hidden; }
body.page-constech .hero__card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
body.page-constech .hero__card-border { position: absolute; inset: 0; border-radius: 22px; background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0%, rgba(255, 255, 255, 0.15) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -0.5px 0 rgba(255, 255, 255, 0.2), inset 0.5px 0 0 rgba(255, 255, 255, 0.2), inset -0.5px 0 0 rgba(255, 255, 255, 0.2); }
@keyframes constech-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
body.page-constech .hero__container { position: absolute; top: 330px; left: 50%; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px; width: 49%; max-width: 600px; transform: translateX(-50%); }
body.page-constech .hero__mascot { position: absolute; top: -298px; left: calc(49.5% - 227.5px); width: 455px; height: 682px; filter: contrast(1.09) hue-rotate(340deg) saturate(1.3); -webkit-mask-image: linear-gradient(#000 43.1629%, rgba(0, 0, 0, 0) 66%); mask-image: linear-gradient(#000 43.1629%, rgba(0, 0, 0, 0) 66%); pointer-events: none; }
body.page-constech .hero__mascot img { width: 100%; height: 100%; object-fit: cover; }
body.page-constech .hero__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 108px; width: 100%; }
/* "NEW Features" highlight tag: present in the live DOM but rendered at opacity 0 */
body.page-constech .hero__tag { position: relative; display: inline-flex; align-items: center; gap: 12px; height: 40px; padding: 6px 16px 6px 6px; border-radius: 40px; border: 1px solid rgba(79, 26, 214, 0.15); background: linear-gradient(rgba(255, 255, 255, 0.08) -100%, rgba(255, 255, 255, 0.05) 100%); opacity: 0; overflow: hidden; }
body.page-constech .hero__tag-overlay { position: absolute; inset: 0; opacity: 0.2; background: conic-gradient(rgba(255, 255, 255, 0.15) 0deg, rgba(255, 255, 255, 0) 72deg, rgba(79, 26, 214, 0.2) 360deg); }
body.page-constech .hero__tag-badge { position: relative; display: inline-flex; align-items: center; padding: 9px 20px; border-radius: 26px; background: #7842ed; font-family: var(--f-serif); font-size: 16px; line-height: 10px; letter-spacing: -0.5px; color: #faf2fa; }
body.page-constech .hero__tag-title { position: relative; font-family: var(--f-dm); font-weight: 500; font-size: 14px; line-height: 26px; letter-spacing: -0.5px; color: #131313; }
body.page-constech .hero__content { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; }
body.page-constech .hero__title { width: 100%; font-family: var(--f-dm); font-weight: 300; font-size: 51px; line-height: 50px; letter-spacing: -1.9px; text-align: center; color: #131313; }
body.page-constech .hero__body { max-width: 421px; font-family: var(--f-dm); font-weight: 400; font-size: 16px; line-height: 23px; letter-spacing: -0.5px; text-align: center; color: #131313; }
body.page-constech .hero__body--mobile { display: none; }
body.page-constech .hero__buttons { display: flex; align-items: center; justify-content: center; gap: 10px; }
body.page-constech .hero__buttons .btn { min-height: 46px; padding: 10px 28px; }

/* ---------- About container -------------------------------------------- */
body.page-constech .about { display: flex; flex-direction: column; gap: 10px; padding: 0 50px 70px; background: var(--c-bg); }
body.page-constech .about__wrapper { width: 100%; border-radius: var(--r-lg); background: linear-gradient(rgb(249, 247, 246) 0%, rgba(247, 244, 242, 0) 100%); }
body.page-constech .about__container { display: flex; flex-direction: column; gap: 0; padding: 120px 0 0; background: var(--c-white); border-radius: 70px; }
body.page-constech .about__heading { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 0 32px; }
body.page-constech .about__title { max-width: 1026px; font-family: var(--f-dm); font-weight: 300; font-size: 41px; line-height: 1.1; letter-spacing: -2.87px; text-align: center; color: var(--c-ink); }
body.page-constech .about__intro { max-width: 640px; font-family: var(--f-satoshi); font-weight: 400; font-size: 20px; line-height: 30px; letter-spacing: -0.4px; text-align: center; color: var(--c-text); }
body.page-constech .about__stats { display: flex; gap: 48px; width: 100%; max-width: 1100px; margin-top: 28px; padding: 28px 32px 4px; border-radius: var(--r-md); }
body.page-constech .about__stat { display: flex; flex-direction: column; gap: 10px; flex: 1 0 0; padding: 0 0 26px; border-bottom: 1px solid rgba(17, 16, 17, 0.1); }
body.page-constech .about__stat-n { font-family: var(--f-dm); font-weight: 300; font-size: 46px; line-height: 46px; letter-spacing: -2.3px; color: var(--c-text); }
body.page-constech .about__stat-label { font-family: var(--f-satoshi); font-weight: 400; font-size: 18px; line-height: 27px; color: var(--c-text); }

/* use cases: 4 text blocks (100vh each) + sticky chat mock on the right */
body.page-constech .usecases { padding: 0 60px; }
body.page-constech .usecases__container { display: flex; gap: 96px; width: 100%; max-width: 1160px; margin: 0 auto; border-radius: var(--r-lg); }
body.page-constech .usecases__texts { display: flex; flex-direction: column; gap: 10px; flex: 1 0 0; min-width: 0; }
body.page-constech .usecases__txt { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 24px; width: 100%; min-height: 100vh; }
body.page-constech .usecases__category { display: inline-flex; align-items: center; gap: 12px; padding: 7px 15px; /* live box 186x40 incl. border */ border-radius: var(--r-md); border: 1px solid rgba(17, 16, 17, 0.1); }
body.page-constech .usecases__category svg { width: 24px; height: 24px; flex: none; }
body.page-constech .usecases__category span { font-family: var(--f-satoshi); font-weight: 500; font-size: 14px; line-height: 21px; letter-spacing: 2.24px; text-transform: uppercase; white-space: nowrap; color: var(--c-ink-60); }
body.page-constech .usecases__title { width: 100%; font-family: var(--f-dm); font-weight: 300; font-size: 36px; line-height: 1.2; letter-spacing: -0.72px; color: var(--c-ink); text-wrap: balance; }
body.page-constech .usecases__desc { width: 100%; max-width: 640px; font-family: var(--f-satoshi); font-weight: 400; font-size: 20px; line-height: 30px; letter-spacing: -0.4px; color: var(--c-text); }
body.page-constech .usecases__img { position: relative; width: 100%; aspect-ratio: 560 / 481; border-radius: var(--r-md); overflow: hidden; }
body.page-constech .usecases__img img { width: 100%; height: 100%; object-fit: cover; }
body.page-constech .usecases__img--inline { display: none; }
body.page-constech .usecases__sticky { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: center; flex: none; width: 560px; height: 100vh; }
body.page-constech .usecases__media { position: relative; width: 560px; height: 481px; border-radius: var(--r-md); overflow: hidden; }
body.page-constech .usecases__layer { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s var(--ease-out); }
body.page-constech .usecases__layer img { width: 100%; height: 100%; object-fit: cover; }
body.page-constech .usecases__layer.is-active { opacity: 1; }

/* success case */
body.page-constech .success { display: flex; flex-direction: column; align-items: center; gap: 60px; padding: 0 0 89px; }
body.page-constech .success__top { display: flex; justify-content: center; width: 100%; padding: 0 120px; }
body.page-constech .success__content { display: flex; flex-direction: column; align-items: center; gap: 30px; width: 100%; max-width: 680px; }
body.page-constech .success__head { display: flex; flex-direction: column; align-items: center; gap: 30px; width: 100%; }
body.page-constech .success__title { display: flex; flex-direction: column; width: 100%; }
body.page-constech .success__h2 { font-family: var(--f-dm); font-weight: 400; font-size: 46px; line-height: 50px; letter-spacing: -1.9px; text-align: center; color: #080808; }
body.page-constech .success__line { display: block; }
body.page-constech .success__h2--mobile { display: none; }
body.page-constech .success__body { max-width: 463px; font-family: var(--f-dm); font-weight: 400; font-size: 16px; line-height: 26px; letter-spacing: -0.2px; text-align: center; color: #131313; }
body.page-constech .success__bottom { width: 100%; max-width: 1340px; padding: 0 96px; }
body.page-constech .success__compare { display: flex; justify-content: space-between; gap: 24px; padding: 40px; background: #f7f6f5; border-radius: 30px; }
body.page-constech .success__card { display: flex; flex-direction: column; width: 450px; max-width: 100%; flex: none; }
body.page-constech .success__card-head { display: flex; align-items: center; height: 50px; padding: 0 0 0 35px; }
body.page-constech .success__card-title { font-family: var(--f-dm); font-weight: 400; font-size: 20px; line-height: 50px; letter-spacing: -1.9px; color: var(--c-text); }
body.page-constech .success__card-title--serif { font-family: "Playfair Display", "Playfair Display Placeholder", serif; font-style: italic; }
body.page-constech .success__list { position: relative; display: flex; flex-direction: column; gap: 22px; padding: 30px; border-radius: 20px; }
body.page-constech .success__list--primary { background: var(--c-bg); }
body.page-constech .success__dots { position: absolute; inset: 0; border-radius: 20px; overflow: hidden; pointer-events: none; }
body.page-constech .success__dots img { width: 100%; height: 100%; object-fit: cover; }
body.page-constech .success__item { position: relative; display: flex; align-items: flex-start; gap: 10px; }
body.page-constech .success__icon { display: block; flex: none; width: 23px; height: 23px; }
body.page-constech .success__icon--neg { background: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 xmlns:xlink=%22http://www.w3.org/1999/xlink%22 viewBox=%220 0 23 23%22><path d=%22M 21.323 11.5 C 21.304 10.825 21.098 10.167 20.727 9.601 C 20.357 9.037 19.836 8.585 19.224 8.299 C 19.457 7.664 19.506 6.977 19.37 6.315 C 19.233 5.653 18.913 5.042 18.448 4.552 C 17.957 4.087 17.347 3.768 16.684 3.63 C 16.023 3.494 15.336 3.543 14.701 3.776 C 14.416 3.162 13.965 2.641 13.4 2.271 C 12.834 1.9 12.176 1.693 11.5 1.677 C 10.825 1.695 10.169 1.899 9.605 2.271 C 9.04 2.642 8.592 3.163 8.308 3.776 C 7.673 3.543 6.984 3.492 6.32 3.63 C 5.656 3.766 5.044 4.085 4.553 4.552 C 4.088 5.043 3.77 5.655 3.635 6.316 C 3.499 6.978 3.551 7.665 3.786 8.299 C 3.172 8.585 2.649 9.036 2.277 9.6 C 1.905 10.165 1.697 10.823 1.677 11.5 C 1.698 12.176 1.905 12.834 2.277 13.399 C 2.649 13.964 3.172 14.416 3.786 14.701 C 3.551 15.335 3.499 16.021 3.635 16.683 C 3.771 17.346 4.088 17.957 4.552 18.448 C 5.043 18.911 5.654 19.229 6.316 19.366 C 6.977 19.504 7.664 19.454 8.299 19.224 C 8.585 19.836 9.036 20.357 9.601 20.728 C 10.166 21.098 10.825 21.304 11.5 21.323 C 12.176 21.306 12.834 21.1 13.4 20.73 C 13.965 20.36 14.416 19.837 14.701 19.225 C 15.333 19.475 16.025 19.534 16.691 19.396 C 17.356 19.258 17.966 18.929 18.447 18.448 C 18.928 17.967 19.258 17.357 19.396 16.691 C 19.534 16.025 19.475 15.332 19.224 14.701 C 19.836 14.415 20.357 13.964 20.728 13.398 C 21.098 12.834 21.304 12.175 21.323 11.5 Z M 10.101 15.525 L 6.516 11.941 L 7.868 10.58 L 10.034 12.746 L 14.634 7.734 L 16.042 9.037 Z%22 fill=%22rgb(255,4,0)%22></path><path d=%22M 6 16 L 6 7 L 17 7 L 17 16 Z%22 fill=%22rgb(255,4,0)%22></path><path d=%22M 15.207 9.414 L 13.793 8 L 11.5 10.293 L 9.207 8 L 7.793 9.414 L 10.086 11.707 L 7.793 14 L 9.207 15.414 L 11.5 13.121 L 13.793 15.414 L 15.207 14 L 12.914 11.707 Z%22 fill=%22rgb(255,255,255)%22></path></svg>") center / contain no-repeat; }
body.page-constech .success__icon--pos { margin-top: 2px; }
body.page-constech .success__icon svg { width: 100%; height: 100%; }
body.page-constech .success__item-text { font-family: var(--f-dm); font-weight: 300; font-size: 16px; line-height: 26px; letter-spacing: -0.2px; color: #000; }
body.page-constech .success__item-text--h4 { font-size: 18px; letter-spacing: -0.5px; color: var(--c-text); }
body.page-constech .success__item--neg .success__icon { margin-top: 0; }

/* "Mide, aprende y mejora con datos reales." + tabs */
body.page-constech .measure { padding: 0 0 52px; }
body.page-constech .measure__inner { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 60px; }
body.page-constech .measure__tabs { position: absolute; top: 8px; right: 60px; display: flex; gap: 32px; }
body.page-constech .measure__tab { display: flex; flex-direction: column; gap: 12px; cursor: pointer; }
body.page-constech .measure__tab-label { font-family: var(--f-satoshi); font-weight: 500; font-size: 18px; line-height: 1.2; letter-spacing: -0.36px; white-space: nowrap; color: rgba(17, 16, 17, 0.4); transition: color 0.3s var(--ease-out); }
body.page-constech .measure__tab-line { display: block; height: 2px; border-radius: 4px; background: var(--c-ink-60); opacity: 0.12; transition: opacity 0.3s var(--ease-out); }
/* live: inactive tabs brighten on hover (text .4 -> .6, underline .12 -> .24) */
body.page-constech .measure__tab:not(.is-active):hover .measure__tab-label { color: rgba(17, 16, 17, 0.6); }
body.page-constech .measure__tab:not(.is-active):hover .measure__tab-line { opacity: 0.24; }
body.page-constech .measure__tab.is-active .measure__tab-label { color: var(--c-text); }
body.page-constech .measure__tab.is-active .measure__tab-line { opacity: 1; }
body.page-constech .measure__content { display: flex; flex-direction: column; gap: 4px; width: 409px; max-width: 100%; padding-top: 35px; }
body.page-constech .measure__title { font-family: var(--f-dm); font-weight: 300; font-size: 46px; line-height: 1.1; letter-spacing: -0.92px; color: var(--c-ink); }
body.page-constech .measure__title strong { font-weight: 400; }
body.page-constech .measure__text { font-family: var(--f-satoshi); font-weight: 400; font-size: 18px; line-height: 27px; color: var(--c-text); }
body.page-constech .measure__text--mobile { display: none; }
body.page-constech .measure__images { display: flex; align-items: flex-end; gap: 24px; height: 375px; margin-top: 49px; }
body.page-constech .measure__image1 { width: 410px; height: 375px; flex: none; border-radius: 64px; overflow: hidden; }
body.page-constech .measure__image1 svg { width: 100%; height: 100%; }
body.page-constech .measure__image2 { display: flex; flex-direction: column; width: 546px; flex: none; }
body.page-constech .measure__image2-bg { display: flex; align-items: center; justify-content: center; width: 546px; height: 514px; padding: 65px 26px 54px 27px; background: #f7f6f5; border-radius: 60px; }
body.page-constech .measure__image2-bg img { width: 493px; height: 395px; object-fit: cover; }

/* ---------- Nuestro Proceso ------------------------------------------- */
body.page-constech .process { display: flex; flex-direction: column; align-items: center; gap: 60px; }
body.page-constech .process__top { display: flex; justify-content: center; width: 100%; padding: 100px 0 0; }
body.page-constech .process__content { display: flex; flex-direction: column; align-items: center; gap: 30px; width: 100%; max-width: 630px; }
body.page-constech .process__taghead { display: flex; flex-direction: column; align-items: center; gap: 30px; width: 100%; }
body.page-constech .process__title { display: flex; flex-direction: column; gap: 10px; width: 100%; }
body.page-constech .process__h2 { display: flex; flex-direction: column; gap: 10px; font-family: var(--f-dm); font-weight: 400; font-size: 54px; line-height: 50px; letter-spacing: -1.9px; text-align: center; color: #080808; }
body.page-constech .process__line { display: block; }
body.page-constech .process__line--mobile { display: none; }
body.page-constech .process__body { max-width: 520px; font-family: var(--f-dm); font-weight: 400; font-size: 16px; line-height: 26px; letter-spacing: -0.2px; text-align: center; color: #131313; }
body.page-constech .process__body--mobile { display: none; }
body.page-constech .process__bottom { display: flex; gap: 10px; width: 100%; max-width: 1200px; padding: 30px; background: var(--c-white); border-radius: 30px; }
body.page-constech .process__card { position: relative; display: flex; flex-direction: column; gap: 22px; flex: 1 0 0; padding: 30px; background: var(--c-white); border-radius: 20px; }
body.page-constech .process__card-text { position: relative; display: flex; flex-direction: column; gap: 16px; }
body.page-constech .process__card-title { font-family: var(--f-dm); font-weight: 400; font-size: 28px; line-height: 30px; letter-spacing: -0.6px; text-align: center; color: var(--c-text); }
body.page-constech .process__card-body { font-family: var(--f-dm); font-weight: 400; font-size: 17px; line-height: 26px; letter-spacing: -0.5px; text-align: center; color: var(--c-ink-60); }

/* ---------- Casos reales de uso --------------------------------------- */
body.page-constech .cases { display: flex; flex-direction: column; align-items: center; gap: 57px; padding: 109px 80px 0; }
body.page-constech .cases__container { display: flex; flex-direction: column; align-items: center; gap: 60px; width: 100%; max-width: 1280px; padding: 100px 80px 60px; border-radius: 20px; }
body.page-constech .cases__content { display: flex; flex-direction: column; align-items: center; gap: 19px; width: 100%; max-width: 800px; }
body.page-constech .cases__title { font-family: var(--f-dm); font-weight: 400; font-size: 37px; line-height: 33px; letter-spacing: -1.9px; text-align: center; color: #2b2b2b; }
body.page-constech .cases__body { max-width: 450px; font-family: var(--f-dm); font-weight: 400; font-size: 16px; line-height: 26px; letter-spacing: -0.2px; text-align: center; color: #1c1c1c; }
body.page-constech .cases__cta { display: flex; justify-content: center; width: 100%; max-width: 500px; }
body.page-constech .cases__cta .btn { min-height: 46px; padding: 10px 28px; }
body.page-constech .cases__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; width: 100%; max-width: 1120px; }
body.page-constech .case-card { display: flex; flex-direction: column; gap: 22px; min-height: 255px; padding: 30px; background: var(--c-white); border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); } /* live: no hover effect on the cards */
body.page-constech .case-card__content { display: flex; flex-direction: column; gap: 19px; }
body.page-constech .case-card__middle { display: flex; flex-direction: column; gap: 0; }
body.page-constech .case-card__title { font-family: var(--f-dm); font-weight: 500; font-size: 24px; line-height: 26px; letter-spacing: -0.5px; color: #3d3d3d; }
body.page-constech .case-card__sub, body.page-constech .case-card__text { font-family: var(--f-dm); font-weight: 400; font-size: 16px; line-height: 26px; letter-spacing: -0.2px; color: #3d3d3d; }
body.page-constech .case-card__sep { display: block; width: 230px; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 100%); }
body.page-constech .cases__tags { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px; width: 100%; max-width: 896px; }
body.page-constech .cases__tag { position: relative; display: flex; background: var(--c-white); border-radius: 17px; }
body.page-constech .cases__tag .dots { top: -7px; bottom: -7px; border-radius: 100%; }
body.page-constech .cases__tag-inner { position: relative; display: flex; align-items: center; padding: 13px 14px; border-radius: 16px; }
body.page-constech .cases__tag-text { font-family: var(--f-dm); font-weight: 500; font-size: 16px; line-height: 26px; letter-spacing: -0.5px; white-space: nowrap; color: #424242; }

/* ---------- Results (testimonials variant B) page colours ------------- */
body.page-constech .results__container { padding: 120px 0 128px; }
body.page-constech .results__stat { font-weight: 500; line-height: 43.2px; letter-spacing: -0.72px; }
body.page-constech .results__stat .n { line-height: 120px; letter-spacing: -2px; }
body.page-constech .results__stat--tight { letter-spacing: -2px; }
body.page-constech .results__card--green { background: linear-gradient(rgb(255, 255, 255) 49.9067%, rgb(169, 223, 172) 100%); }
body.page-constech .results__card--green .results__stat, body.page-constech .results__card--green .results__caption { color: #6f9954; }
body.page-constech .results__card--lilac { background: #e5dbeb; }
body.page-constech .results__card--lilac .results__caption { color: #987da5; }
body.page-constech .results__card--purple { background: linear-gradient(rgb(255, 255, 255) 0%, rgb(216, 200, 250) 100%); }
body.page-constech .results__card--purple .results__caption { color: #94a1aa; }
body.page-constech .results__card--orange { background: linear-gradient(rgb(253, 253, 255) 0%, rgb(250, 228, 208) 100%); }
body.page-constech .results__card--orange .results__stat, body.page-constech .results__card--orange .results__caption { color: #c28951; }

/* ---------- FAQ: heading lives inside the white card on this page ------ */
body.page-constech .faq { gap: 0; }
body.page-constech .faq__container { display: flex; flex-direction: column; gap: 64px; padding: 120px 60px; }
body.page-constech .faq__heading { padding: 0; }
body.page-constech .faq__list { gap: 12px; width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 64px; }

/* ---------- Closing CTA: live page uses the "Tablet" variant at 1440 --- */
body.page-constech .cta-final { padding: 0 0 50px; }
body.page-constech .cta-final__container { gap: 84px; padding: 15px 30px 80px; }
body.page-constech .cta-final__card { width: 100%; min-height: 0; margin: 0; gap: 38px; padding: 99px 0 98px; border-radius: var(--r-md); }
body.page-constech .cta-final__title { max-width: 1132px; font-size: 51px; line-height: 0.9; letter-spacing: -0.04em; color: var(--c-ink); }
body.page-constech .site-footer__social { padding: 0; }
body.page-constech .site-footer__copy { padding: 0 60px; line-height: 1.2; }

/* ==========================================================================
   Tablet (768 - 1199)
   ========================================================================== */
@media (max-width: 1199px) {
  body.page-constech .hero__wrap { height: 657px; }
  body.page-constech .hero__mascot { width: 430px; height: 549px; top: -282px; left: calc(49.5% - 215px); -webkit-mask-image: linear-gradient(#000 43.1629%, rgba(0, 0, 0, 0) 77%); mask-image: linear-gradient(#000 43.1629%, rgba(0, 0, 0, 0) 77%); }
  body.page-constech .hero__container { width: 100%; }
  body.page-constech .usecases { padding: 0 40px; }
  body.page-constech .usecases__container { gap: 0; }
  body.page-constech .usecases__texts { gap: 128px; }
  body.page-constech .usecases__txt { min-height: 0; gap: 32px; }
  body.page-constech .usecases__img--inline { display: block; }
  body.page-constech .usecases__sticky { display: none; }
  body.page-constech .success__top { padding: 35px 50px; }
  body.page-constech .success__bottom { padding: 0 40px; }
  body.page-constech .success__compare { flex-direction: column; }
  body.page-constech .success__card { width: 100%; }
  body.page-constech .measure__inner { padding: 0 32px; }
  body.page-constech .measure__tabs { position: static; gap: clamp(4px, calc((100vw - 768px) / 6), 32px); overflow: visible; margin-bottom: 48px; } /* live tablet: the 4 labels sit ~4px apart from x=82 to 715, past the inner box */
  body.page-constech .measure__images { flex-wrap: wrap; height: auto; }
  body.page-constech .measure__image1 { display: none; }
  body.page-constech .measure__image2, body.page-constech .measure__image2-bg { width: 100%; }
  body.page-constech .measure__image2-bg { height: auto; padding: 60px; }
  body.page-constech .measure__image2-bg img { width: 100%; height: auto; }
  body.page-constech .process__bottom { flex-direction: column; }
  body.page-constech .cases { padding: 80px 40px 0; }
  body.page-constech .cases__container { padding: 80px 20px 60px; }
  body.page-constech .cases__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) and (max-width: 1199px) {
  /* live tablet variant: no stats row, "Mide" block uses the short copy centered, results grid shows columns 3-4 only */
  body.page-constech .about__stats { display: none; }
  body.page-constech .measure__content { width: 100%; align-items: center; text-align: center; }
  body.page-constech .measure__text--desktop { display: none; }
  body.page-constech .measure__text--mobile { display: block; max-width: 560px; }
  body.page-constech .results__col:not(.results__col--desktop) { display: none; }
}

/* ==========================================================================
   Phone (< 768)
   ========================================================================== */
@media (max-width: 767px) {
  body.page-constech .tag__title--desktop { display: none; }
  body.page-constech .tag__title--mobile { display: inline; }

  /* hero */
  body.page-constech .hero { flex-direction: column; align-items: center; height: auto; min-height: 590px; }
  body.page-constech .hero__wrap { flex: none; gap: 50px; width: 100%; height: 590px; }
  body.page-constech .hero__spacer { height: 50px; }
  body.page-constech .hero__circle-wrap { width: 870px; height: 920px; }
  body.page-constech .hero__circle { width: 870px; height: 870px; }
  body.page-constech .hero__card { width: 75px; height: 75px; }
  body.page-constech .hero__container { top: 262px; width: 100%; max-width: none; }
  body.page-constech .hero__mascot { width: 199px; height: 367px; top: -224px; left: calc(48.855% - 99.5px); -webkit-mask-image: linear-gradient(#000 58%, rgba(0, 0, 0, 0) 86%); mask-image: linear-gradient(#000 58%, rgba(0, 0, 0, 0) 86%); }
  body.page-constech .hero__inner { gap: 13px; padding: 0 20px; }
  body.page-constech .hero__content { gap: 18px; }
  body.page-constech .hero__title { margin: 0 -3px; width: calc(100% + 6px); font-size: 39px; line-height: 35px; }
  body.page-constech .hero__body { max-width: 263px; font-family: var(--f-satoshi); line-height: 24px; letter-spacing: -0.32px; }
  body.page-constech .hero__body--desktop { display: none; }
  body.page-constech .hero__body--mobile { display: block; color: var(--c-text); }
  body.page-constech .hero__buttons { flex-direction: column; width: 100%; }
  body.page-constech .hero__buttons .btn { width: 100%; min-height: 50px; }

  /* about */
  body.page-constech .about { padding: 80px 10px 20px; }
  body.page-constech .about__wrapper { border-radius: var(--r-md); }
  body.page-constech .about__container { gap: 14px; padding: 60px 0 0; border-radius: 48px; }
  body.page-constech .about__heading { padding: 0 20px; }
  body.page-constech .about__intro { font-size: 16px; line-height: 1.4; letter-spacing: normal; color: var(--c-ink); }
  body.page-constech .about__stats { flex-direction: column; gap: 32px; padding: 32px 10px 4px; }
  body.page-constech .about__stat { align-items: center; padding: 0 0 32px; }
  body.page-constech .about__stat-n { font-size: 73px; line-height: 73px; letter-spacing: -5.84px; }
  body.page-constech .about__stat-label { text-align: center; }
  body.page-constech .usecases { padding: 0 20px; }
  body.page-constech .usecases__texts { gap: 64px; }
  body.page-constech .usecases__txt { gap: 24px; }
  body.page-constech .usecases__title { font-size: 24px; line-height: 1.2; letter-spacing: -0.48px; }
  body.page-constech .usecases__txt--4 .usecases__desc { font-size: 16px; line-height: 1.4; letter-spacing: normal; color: var(--c-ink); }
  body.page-constech .success { gap: 50px; padding: 0; }
  body.page-constech .success__top { padding: 11px 10px; }
  body.page-constech .success__content { max-width: 460px; }
  body.page-constech .success__head { gap: 30px; }
  body.page-constech .success__title { gap: 3px; }
  body.page-constech .success__h2 { font-size: 28px; line-height: 36px; letter-spacing: -2px; }
  body.page-constech .success__h2--desktop { display: none; }
  body.page-constech .success__h2--mobile { display: block; }
  body.page-constech .success__body { max-width: 298px; font-family: var(--f-satoshi); line-height: 1.4; letter-spacing: normal; color: var(--c-ink); }
  body.page-constech .success__bottom { padding: 0 10px 20px; }
  body.page-constech .success__compare { gap: 10px; padding: 10px; }
  body.page-constech .success__card-head { justify-content: center; padding: 0; }
  body.page-constech .success__card-title { font-size: 23px; text-align: center; }
  body.page-constech .success__card-title--serif { font-size: 24px; line-height: 36px; letter-spacing: -2px; }
  body.page-constech .measure { padding: 33px 0 12px; } /* live: 33/40 but the card overflows the 626px inner box -> section 699px, card bottom 12px above the section end */
  body.page-constech .measure__inner { gap: 20px; padding: 0 20px; }
  body.page-constech .measure__tabs { margin: 0; gap: 32px; overflow: hidden; }
  body.page-constech .measure__content { gap: 20px; margin-top: 64px; padding-top: 0; } /* live: title 152px below the section top */
  body.page-constech .measure__title { font-size: 32px; letter-spacing: -0.64px; }
  body.page-constech .measure__title strong { font-family: var(--f-inter); font-weight: 700; }
  body.page-constech .measure__text { max-width: 280px; font-size: 16px; line-height: 1.4; color: var(--c-ink); }
  body.page-constech .measure__text--desktop { display: none; }
  body.page-constech .measure__text--mobile { display: block; }
  body.page-constech .measure__images { margin-top: 20px; padding-top: 12px; } /* live: card top 433px below the section top */
  body.page-constech .measure__image1 { display: none; }
  body.page-constech .measure__image2 { width: 100%; }
  body.page-constech .measure__image2-bg { width: 100%; height: auto; padding: 34px 49px; border-radius: var(--r-md); }
  body.page-constech .measure__image2-bg img { width: 100%; height: auto; }

  /* process */
  body.page-constech .process { gap: 50px; padding: 0 20px; }
  body.page-constech .process__top { padding: 0; }
  body.page-constech .process__content { gap: 30px; }
  body.page-constech .process__title { gap: 3px; }
  body.page-constech .process__h2 { gap: 3px; }
  body.page-constech .process__line--desktop { display: none; }
  body.page-constech .process__line--mobile { display: block; }
  body.page-constech .process__body--desktop { display: none; }
  body.page-constech .process__body--mobile { display: block; }
  body.page-constech .process__bottom { gap: 10px; padding: 0; }

  /* cases */
  body.page-constech .cases { gap: 50px; padding: 0 30px; }
  body.page-constech .cases__container { gap: 50px; padding: 79px 0 60px; }
  body.page-constech .cases__title { font-size: 33px; line-height: 34px; letter-spacing: -2px; }
  body.page-constech .cases__body { max-width: 238px; font-family: var(--f-satoshi); line-height: 1.4; letter-spacing: normal; color: var(--c-ink); }
  body.page-constech .cases__grid { grid-template-columns: 1fr; }
  body.page-constech .case-card { min-height: 0; }
  /* live quirk: the first card keeps a fixed 249px height on phones */
  body.page-constech .case-card:first-child { height: 249px; overflow: hidden; }
  body.page-constech .cases__tags { gap: 16px; }
  body.page-constech .cases__tag--s .cases__tag-inner { padding: 10px 16px; }

  /* results: only the first two columns exist on the live phone layout, column 2 shows text first */
  body.page-constech .results__container { gap: 48px; padding: 34px 0 63px; }
  body.page-constech .results__col--desktop { display: none; }
  body.page-constech .results__col--up { flex-direction: column-reverse; }
  body.page-constech .results__col--up .results__image { height: 270px; }
  body.page-constech .results__card { gap: 80px; }

  /* faq */
  body.page-constech .faq__container { gap: 32px; padding: 60px 24px 40px; }
  body.page-constech .faq__title { font-size: 32px; letter-spacing: -1.28px; }
  body.page-constech .faq__list { padding: 0; }

  /* cta */
  body.page-constech .cta-final { padding: 0 0 10px; }
  body.page-constech .cta-final__container { gap: 37px; padding: 19px 10px; }
  body.page-constech .cta-final__title { font-size: 48px; }
  body.page-constech .site-footer__copy { padding: 0; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  body.page-constech .hero__circle { animation: none; transform: rotate(75deg); }
  body.page-constech .usecases__layer, body.page-constech .case-card { transition: none; }
}