:root {
     /* 1) Paste your image URL here (or a local path like "images/hero.jpg") */
     --hero-image: url("../../assets/virtual-assistant/Administrative Assistants.svg");

     --vi1: url("../../assets/virtual-assistant/Personal\ Assistants.svg");
     --vi2: url("../../assets/virtual-assistant/Administrative\ Assistants.svg");
     --vi3: url("../../assets/virtual-assistant/Data\ Entry\ Experts.svg");
     --vi4: url("../../assets/virtual-assistant/Executive\ Assistants.svg");
     --vi5: url("../../assets/virtual-assistant/Lead\ Generation\ Specialists.svg");
     --vi6: url("../../assets/virtual-assistant/E-Commerce\ VAs.svg");
     --vi7: url("../../assets/virtual-assistant/Property\ Management\ VAs.svg");
     --vi8: url("../../assets/virtual-assistant/Logistics\ &\ Dispatch\ VAs.svg");
     --vi9: url("../../assets/virtual-assistant/Microsoft\ Excel\ Specialists.svg");
     --vi10: url("../../assets/virtual-assistant/Bookkeeping\ &\ Accounting\ Experts.svg");
     --vi11: url("../../assets/virtual-assistant/Customer\ Support\ Executives.svg");
     --vi12: url("../../assets/virtual-assistant/Social\ Media\ Managers.svg");


     --ink: #161616;
     --muted: #5d5d5d !important;
     --mint: #5ff5df;
     --teal: #0f9488;
     --panel: #f3f3f3;
     --ease: cubic-bezier(.2, .7, .2, 1);
     --va-font: var(--site-font);
     --bgfeq: #f1f1f1;
 }

 body {
     font-family: var(--va-font)
 }

 .hero {
     position: relative;
     min-height: 100vh;
     display: flex;
     align-items: flex-end;
     color: #fff;
     background: #0f2a33;
     overflow: hidden;
 }

 .compare {
     background: var(--bgfeq);
 }


 /* Background video */
 .hero-video {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     z-index: 0;
 }


 /* Overlay */
 .hero-overlay {
     position: absolute;
     inset: 0;
     background: rgba(0, 0, 0, 0.45);
     z-index: 1;
 }


 /* Background photo, slow zoom */
 .hero-bg {
     position: absolute;
     inset: 0;
     background: var(--hero-image) center top / cover no-repeat;
     animation: slowZoom 18s ease-in-out infinite alternate;
 }

 /* Fallback: blurred office lights that drift. Visible behind the photo,
       so the hero still looks good if the image fails to load. */
 .bokeh {
     position: absolute;
     inset: 0;
     z-index: 0;
     background: linear-gradient(135deg, #16414d 0%, #0f2a33 60%, #0a1a20 100%);
 }

 .bokeh span {
     position: absolute;
     border-radius: 50%;
     background: rgba(150, 230, 240, .35);
     filter: blur(28px);
     animation: drift 9s ease-in-out infinite alternate;
 }

 .bokeh span:nth-child(1) {
     width: 140px;
     height: 140px;
     top: 10%;
     left: 6%;
 }

 .bokeh span:nth-child(2) {
     width: 90px;
     height: 90px;
     top: 22%;
     left: 30%;
     animation-delay: -3s;
 }

 .bokeh span:nth-child(3) {
     width: 170px;
     height: 170px;
     top: 8%;
     left: 52%;
     animation-delay: -5s;
 }

 .bokeh span:nth-child(4) {
     width: 110px;
     height: 110px;
     top: 30%;
     left: 72%;
     animation-delay: -2s;
 }

 .bokeh span:nth-child(5) {
     width: 80px;
     height: 80px;
     top: 40%;
     left: 15%;
     animation-delay: -6s;
 }

 /* Dark gradient for readable text */
 .hero::after {
     content: "";
     position: absolute;
     inset: 0;
     z-index: 1;
     background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .15) 45%, rgba(0, 0, 0, .85) 100%);
 }

 .hero-bg {
     z-index: 0;
 }

 .hero .container {
     position: relative;
     z-index: 2;
     padding-bottom: 13rem;
 }

 .hero-title {
     font-weight: 600;
     letter-spacing: -0.04em;
     line-height: 1.1;
     font-size: clamp(2.2rem, 5.5vw, 4.2rem);
 }

 .hero-sub {
     font-size: clamp(1rem, 1.6vw, 1.25rem);
     color: var(--hero-image);
 }

 .hero-sub .price {
     font-weight: 600;
     border-bottom: 2px dotted #fff;
 }

 .btn-hire {
     background: #5ff5df;
     color: #0b2b2a;
     font-weight: 500;
     padding: .75rem 1.6rem;
     border: 0;
     border-radius: 50rem;
     transition: background .2s, transform .2s;
 }

 .btn-hire:hover {
     background: #86fbea;
     color: #0b2b2a;
     transform: translateY(-2px);
 }

 .btn-hire:focus-visible {
     outline: 3px solid #fff;
     outline-offset: 3px;
 }

 /* Entrance sequence: title line 1, line 2, subtitle, button */
 .reveal {
     opacity: 0;
     transform: translateY(24px);
     animation: rise .8s cubic-bezier(.2, .7, .2, 1) forwards;
 }

 .d1 {
     animation-delay: .15s;
 }

 .d2 {
     animation-delay: .35s;
 }

 .d3 {
     animation-delay: .55s;
 }

 .d4 {
     animation-delay: .75s;
 }

 /* Button pulse ring after it appears */
 .btn-hire.pulse {
     position: relative;
 }

 .btn-hire.pulse::after {
     content: "";
     position: absolute;
     inset: 0;
     border-radius: inherit;
     border: 2px solid #5ff5df;
     opacity: 0;
     animation: ring 2.4s ease-out 1.8s infinite;
 }

 .cookie-btn {
     position: fixed;
     left: 20px;
     bottom: 20px;
     width: 50px;
     height: 50px;
     border-radius: 50%;
     border: 0;
     background: #1f5c47;
     color: #fff;
     display: grid;
     place-items: center;
     z-index: 10;
 }

 @keyframes rise {
     to {
         opacity: 1;
         transform: none;
     }
 }

 @keyframes slowZoom {
     from {
         transform: scale(1);
     }

     to {
         transform: scale(1.08);
     }
 }

 @keyframes drift {
     from {
         transform: translate(0, 0);
     }

     to {
         transform: translate(40px, 24px);
     }
 }

 @keyframes ring {
     0% {
         opacity: .8;
         transform: scale(1);
     }

     100% {
         opacity: 0;
         transform: scale(1.35);
     }
 }

 @media (prefers-reduced-motion: reduce) {

     .hero-bg,
     .bokeh span,
     .btn-hire.pulse::after {
         animation: none;
     }

     .reveal {
         animation: none;
         opacity: 1;
         transform: none;
     }
 }


 .t-card-1 {
     background-image: var(--t-img-card-1);
     background-size: cover;
     background-position: center;
 }

 /* ======================== */

 .services {
     padding: 5rem 0 6rem;
 }

 /* TL;DR box */
 .tldr {
     max-width: 720px;
     margin: 0 auto 3.5rem;
     padding: .9rem 1.25rem;
     background: #f1f1f1;
     border-radius: 12px;
     font-size: .8rem;
     line-height: 1.5;
     color: #555;
     text-align: center;
 }

 .tldr strong {
     display: block;
     font-size: clamp(1.3rem, 2.8vw, 1.7rem);
     margin-bottom: .15rem;
     color: #222;
 }

 .tldr span {
     display: block;
     font-size: clamp(0.875rem, 1vw, 1rem);
     font-weight: 500;
 }


 .section-title {
     font-weight: 600;
     letter-spacing: -0.03em;
     font-size: clamp(1.75rem, 4vw, 2.9rem);
 }

 .section-sub {
     max-width: 900px;
     margin: .75rem auto 0;
     color: #555;
     font-size: clamp(1.3rem, 2.8vw, 1.7rem);
     font-weight: 600;
 }


 .services-container {
     padding-left: clamp(1rem, 10vw, 10rem);
     padding-right: clamp(1rem, 10vw, 10rem);
 }

 /* Grid cards */
 .grid {
     margin-top: 3rem;
 }

 .va-card {
     position: relative;
     display: block;
     height: 300px;
     border-radius: 14px;
     overflow: hidden;
     color: #fff;
     text-decoration: none;
     isolation: isolate;
     background: #222;
     transform: translateY(0);
     transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s;
 }

 .va-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 24px 40px -16px rgba(0, 0, 0, .45);
     color: #fff;
 }

 .va-card:focus-visible {
     outline: 3px solid #5ff5df;
     outline-offset: 3px;
 }

 /* Photo layer: set --img per card. Gradient shows if the image fails. */
 .va-img {
     position: absolute;
     inset: 0;
     z-index: -2;
     transition: transform .9s cubic-bezier(.2, .7, .2, 1);

 }

 .vi1 {
     background: var(--vi1) center / cover no-repeat, var(--fallback);
 }

 .vi2 {
     background: var(--vi2) center / cover no-repeat, var(--fallback);
 }

 .vi3 {
     background: var(--vi3) center / cover no-repeat, var(--fallback);
 }

 .vi4 {
     background: var(--vi4) center / cover no-repeat, var(--fallback);
 }

 .vi5 {
     background: var(--vi5) center / cover no-repeat, var(--fallback);
 }

 .vi6 {
     background: var(--vi6) center / cover no-repeat, var(--fallback);
 }

 .vi7 {
     background: var(--vi7) center / cover no-repeat, var(--fallback);
 }

 .vi8 {
     background: var(--vi8) center / cover no-repeat, var(--fallback);
 }

 .vi9 {
     background: var(--vi9) center / cover no-repeat, var(--fallback);
 }

 .vi10 {
     background: var(--vi10) center / cover no-repeat, var(--fallback);
 }

 .vi11 {
     background: var(--vi11) center / cover no-repeat, var(--fallback);
 }

 .vi12 {
     background: var(--vi12) center / cover no-repeat, var(--fallback);
 }











 .va-card {
     position: relative;
     min-height: clamp(360px, 45vw, 650px);
     overflow: hidden;
 }

 .va-card:hover .va-img {
     transform: scale(1.1);
 }

 /* Bottom shade */
 .va-card::before {
     content: "";
     position: absolute;
     inset: 0;
     z-index: -1;
     background: linear-gradient(to top, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .2) 45%, rgba(0, 0, 0, 0) 70%);
 }

 /* Cursor-following light */
 .va-card::after {
     content: "";
     position: absolute;
     inset: 0;
     z-index: -1;
     background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .22), transparent 60%);
     opacity: 0;
     transition: opacity .3s;
 }

 .va-card:hover::after {
     opacity: 1;
 }

 .va-body {
     position: absolute;
     left: 0;
     right: 0;
     bottom: 1rem;
     padding: 1.1rem 1.2rem;
     transform: translateY(34px);
     transition: transform .5s cubic-bezier(.2, .7, .2, 1);
 }

 .va-card:hover .va-body,
 .va-card:focus-visible .va-body {
     transform: translateY(0);
 }

 .va-title {
     font-weight: 600;
     font-size: clamp(1.2rem, 2.5vw, 1.5rem);
     margin: 0;
     color: var(--hero-image);
 }

 .va-desc {
     margin: .35rem 0 0;
     font-size: clamp(0.875rem, 1vw, 1rem);
     line-height: 1.4;
     color: rgba(255, 255, 255, .85);
     opacity: 0;
     transition: opacity .4s .05s;
 }

 .va-card:hover .va-desc,
 .va-card:focus-visible .va-desc {
     opacity: 1;
 }

 .va-arrow {
     position: absolute;
     top: 1rem;
     right: 1rem;
     width: 38px;
     height: 38px;
     border-radius: 50%;
     background: #5ff5df;
     color: #0b2b2a;
     display: grid;
     place-items: center;
     opacity: 0;
     transform: translate(-8px, 8px) scale(.8);
     transition: opacity .35s, transform .45s cubic-bezier(.2, .7, .2, 1);
 }

 .va-card:hover .va-arrow,
 .va-card:focus-visible .va-arrow {
     opacity: 1;
     transform: none;
 }

 /* Fallback backgrounds (one per card) */
 .f1 {
     --fallback: linear-gradient(135deg, #1f2a44, #4a5a7a 60%, #b7a58e);
 }

 .f2 {
     --fallback: linear-gradient(135deg, #12333f, #2b6a80 60%, #86c3d4);
 }

 .f3 {
     --fallback: linear-gradient(135deg, #2b4a2a, #6f9a4d 55%, #e8c46a);
 }

 .f4 {
     --fallback: linear-gradient(135deg, #2a2a2a, #55585f 60%, #a9b0bd);
 }

 .f5 {
     --fallback: linear-gradient(135deg, #1b2d5a, #3b6fd1 60%, #cfe0ff);
 }

 .f6 {
     --fallback: linear-gradient(135deg, #3a2a52, #7a5fb0 60%, #ddd0f5);
 }

 /* Card image URLs: replace with your own */
 .c1 {
     --img: url("../../assets/virtual-assistant/personal_assistants.webp");
 }

 .c2 {
     --img: url("../../assets/virtual-assistant/administrative_assistants.webp");
 }

 .c3 {
     --img: url("../../assets/virtual-assistant/data_entry_experts.webp");
 }

 .c4 {
     --img: url("../../assets/virtual-assistant/executive_assistants.webp");
 }

 .c5 {
     --img: url("../../assets/virtual-assistant/lead_generation.webp");
 }

 .c6 {
     --img: url("../../assets/virtual-assistant/e-commerce_VAs.webp");
 }

 /* View more button: fill sweeps in from the left */
 .btn-more {
     position: relative;
     overflow: hidden;
     margin-top: 3rem;
     padding: .8rem 3rem;
     border: 1px solid #111;
     border-radius: 50rem;
     background: #fff;
     color: #111;
     font-size: clamp(0.875rem, 1vw, 1rem);
     font-weight: 500;
     z-index: 0;
     transition: color .35s;
     font-weight: 700;
 }

 .btn-more::before {
     content: "";
     position: absolute;
     inset: 0;
     background: #111;
     transform: translateX(-101%);
     transition: transform .45s cubic-bezier(.2, .7, .2, 1);
     z-index: -1;
 }

 .btn-more:hover {
     color: #fff;
 }

 .btn-more:hover::before {
     transform: none;
 }

 .btn-more svg {
     transition: transform .35s;
     margin-left: .3rem;
 }

 .btn-more:hover svg {
     transform: translateY(2px);
 }



 /* Touch devices: always show the description */
 @media (hover: none) {
     .va-body {
         transform: none;
     }

     .va-desc {
         opacity: 1;
     }
 }

 @media (prefers-reduced-motion: reduce) {

     .va-img,
     .va-body,
     .va-card {
         transition: none;
     }
 }

 /* ========================================3  */


 * {
     -webkit-tap-highlight-color: transparent;
 }

 html {
     overflow-x: hidden;
 }

 body {
     font-family: 'Inter', system-ui, sans-serif;
     color: var(--ink);
     background: #fff;
     overflow-x: hidden;
 }

 section {
     padding: clamp(2.5rem, 6vw, 4.5rem) 0;
 }

 img {
     max-width: 100%;
 }

 .sec-title {
     font-weight: 600;
     letter-spacing: -0.02em;
     font-size: clamp(1.75rem, 4vw, 2.9rem);
 }

 .sec-sub {
     color: var(--muted);
     font-size: clamp(1.3rem, 2.8vw, 1.7rem);
     max-width: 1200px;
     margin: .6rem auto 0;
     font-weight: 600;
 }


 /* ---------- Outline pill button ---------- */
 .btn-pill {
     position: relative;
     overflow: hidden;
     z-index: 0;
     padding: .55rem 1.3rem;
     font-size: .85rem;
     font-weight: 500;
     background: #fff;
     color: var(--ink);
     border: 1px solid var(--ink);
     border-radius: 50rem;
     transition: color .35s;
 }

 .btn-pill::before {
     content: "";
     position: absolute;
     inset: 0;
     z-index: -1;
     background: var(--ink);
     transform: translateX(-101%);
     transition: transform .45s var(--ease);
 }

 .btn-pill:hover,
 .btn-pill:focus-visible {
     color: #fff;
 }

 .btn-pill:hover::before,
 .btn-pill:focus-visible::before {
     transform: none;
 }

 /* ---------- Testimonials carousel ---------- */
 .t-wrap {
     position: relative;
     overflow: hidden;
     margin-top: 2rem;
     padding: 6px 0;
     touch-action: pan-y;
     user-select: none;
 }

 .t-track {
     display: flex;
     gap: 16px;
     transition: transform .8s var(--ease);
     will-change: transform;
 }

 .t-track.dragging {
     transition: none;
 }

 .t-slide {
     flex: 0 0 900px;
     max-width: 90vw;
     display: flex;
     background: var(--panel);
     border-radius: 14px;
     overflow: hidden;
     opacity: .45;
     filter: grayscale(1);
     transform: scale(.95);
     transition: opacity .7s, filter .7s, transform .7s var(--ease);
 }

 .t-slide.active {
     opacity: 1;
     filter: none;
     transform: scale(1);
 }

 .t-photo {
     position: relative;
     flex: 0 0 42%;
     min-height: 400px;
     /* background: var(--fb); */
     display: grid;
     place-items: center;
     font-size: 2rem;
     font-weight: 600;
     color: rgba(255, 255, 255, .75);
 }


 .t-photo-a {
     width: 100%;
     height: 100%;
     min-height: 450px;
     background: url("../../assets/virtual-assistant/Amanda-Haas.jpg") center / cover no-repeat;
 }

 .t-photo-b {
     width: 100%;
     height: 100%;
     min-height: 450px;
     background: url("../../assets/virtual-assistant/Ajinkya-Pradhan.jpg") center / cover no-repeat;
 }

 .t-photo-c {
     width: 100%;
     height: 100%;
     min-height: 450px;
     background: url("../../assets/virtual-assistant/Haleigh-Fischer.jpg") center / cover no-repeat;
 }


 .t-photo::after {
     content: "";
     position: absolute;
     inset: 0;
     background: var(--img) center / cover no-repeat;
 }

 .t-play {
     position: absolute;
     right: 10px;
     bottom: 10px;
     z-index: 2;
     width: 30px;
     height: 30px;
     border: 0;
     border-radius: 50%;
     background: #fff;
     display: grid;
     place-items: center;
 }

 .t-slide.active .t-play::after {
     content: "";
     position: absolute;
     inset: 0;
     border-radius: 50%;
     border: 2px solid #fff;
     animation: ring 2s ease-out infinite;
 }

 .t-play svg {
     width: 10px;
     height: 10px;
     margin-left: 2px;
 }

 .t-body {
     padding: 4.1rem 1.1rem 1.1rem 1.2rem;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     gap: .6rem;
 }

 .t-quote-mark {
     font-size: 4rem;
     line-height: .8;
     color: var(--ink);
     font-family: Georgia, serif;
 }

 .t-text {
     font-size: clamp(1rem, 1.5vw, 1.125rem);
     line-height: 1.55;
     margin: .3rem 0 0;
     color: var(--ink)
 }

 .t-slide.active .t-text {
     font-weight: 500;
 }

 .t-name {
     font-size: .8rem;
     font-weight: 600;
     margin: 0;
 }

 .t-role {
     font-size: .7rem;
     color: var(--muted);
     margin: 0;
 }

 .t-arrow {
     position: absolute;
     top: 50%;
     z-index: 3;
     width: 34px;
     height: 34px;
     margin-top: -17px;
     border: 1px solid #ccc;
     border-radius: 50%;
     background: #fff;
     font-size: 1.1rem;
     line-height: 1;
     display: grid;
     place-items: center;
     transition: transform .25s, background .25s, color .25s;
 }

 .t-arrow:hover {
     background: var(--ink);
     color: #fff;
     transform: scale(1.12);
 }

 .t-arrow.prev {
     left: 12px;
 }

 .t-arrow.next {
     right: 12px;
 }

 .t-dots {
     display: flex;
     justify-content: center;
     gap: 8px;
     margin-top: 1rem;
 }

 .t-dots button {
     width: 8px;
     height: 8px;
     padding: 0;
     border: 0;
     border-radius: 50rem;
     background: #cfcfcf;
     transition: width .4s var(--ease), background .3s;
 }

 .t-dots button.on {
     width: 24px;
     background: var(--ink);
 }

 /* ---------- How it works ---------- */
 .steps {
     padding-left: clamp(1rem, 5vw, 7rem);
     padding-right: clamp(1rem, 5vw, 7rem);
     /* max-width: 1040px; */
     margin: 2.5rem auto 0;
 }

 .step {
     height: 100%;
     padding: 1.5rem 1.1rem 1.3rem;
     text-align: center;
     background: #fff;
     border: 1px solid #cfcfcf;
     border-radius: 12px;
     transition: transform .45s var(--ease), border-color .3s, box-shadow .45s;
 }

 .step:hover {
     transform: translateY(-8px);
     border-color: var(--teal);
     box-shadow: 0 18px 30px -18px rgba(15, 148, 136, .55);
 }

 .step-icon {
     position: relative;
     width: clamp(60px, 10vw, 100px);
     height: clamp(60px, 10vw, 100px);
     margin: 0 auto 1rem;
     border: 1px solid #d4d4d4;
     border-radius: 50%;
     display: grid;
     place-items: center;
     transition: background .3s, border-color .3s;
 }

 .step:hover .step-icon {
     background: #e7fbf8;
     border-color: var(--teal);
 }

 .step-icon svg {
     width: clamp(35px, 5vw, 50px);
     height: clamp(35px, 5vw, 50px);
 }

 .step-num {
     position: absolute;
     right: -4px;
     bottom: -4px;
     width: 20px;
     height: 20px;
     border-radius: 50%;
     background: var(--teal);
     color: #fff;
     font-size: .7rem;
     font-weight: 600;
     display: grid;
     place-items: center;
     transform: scale(0);
 }


 .step h3 {
     font-size: clamp(1.2rem, 2.5vw, 1.5rem);
     font-weight: 700;
     margin: 0 0 .5rem;
 }

 .step p {
     font-size: clamp(0.875rem, 1vw, 1rem);
     line-height: 1.55;
     color: var(--muted);
     margin: 0;
     font-weight: 500;
 }

 /* ---------- Free trial + form ---------- */
 .trial h2 {
     font-size: clamp(1.75rem, 4vw, 2.5rem);
     font-weight: 800;
     margin-bottom: .5rem;
 }

 .trial .lead-sm {
     font-size: clamp(1.2rem, 2.5vw, 1.5rem);
     color: var(--muted);
     margin-bottom: 1.3rem;
     max-width: 340px;
     font-weight: 600;
 }

 .perk {
     display: flex;
     align-items: center;
     gap: .7rem;
     font-size: clamp(0.875rem, 1vw, 1rem);
     font-weight: 500;
     margin-bottom: .9rem;
     opacity: 0;
     transform: translateX(-16px);
     transition: opacity .6s, transform .7s var(--ease);
     transition-delay: calc(var(--i, 0) * 130ms + 300ms);
 }

 .in .perk {
     opacity: 1;
     transform: none;
 }

 .perk svg {
     width: clamp(28px, 4vw, 40px);
     height: clamp(28px, 4vw, 40px);
     color: #2d5bd8;
     flex: none;
 }

 .form-card {
     background: var(--panel);
     border-radius: 16px;
     padding: clamp(1.1rem, 3vw, 1.8rem);
     max-width: 520px;
     margin-left: auto;
 }

 .f-label {
     font-size: clamp(0.875rem, 1vw, 1rem);
     font-weight: 600;
     margin-bottom: .3rem;
     display: block;
 }

 .f-label b {
     color: #d33;
 }

 .f-input {
     width: 100%;
     font-size: 1rem;
     padding: .5rem .65rem;
     background: #fff;
     border: 1px solid #9a9a9a;
     border-radius: 6px;
     outline: none;
     transition: border-color .25s, box-shadow .25s, transform .25s;
 }

 .f-input:focus {
     border-color: var(--teal);
     box-shadow: 0 0 0 3px rgba(15, 148, 136, .2);
     transform: translateY(-1px);
 }

 textarea.f-input {
     height: 96px;
     resize: vertical;
 }

 .captcha {
     display: flex;
     align-items: center;
     gap: .7rem;
     width: 100%;
     max-width: 250px;
     margin: 1.1rem auto;
     padding: .8rem;
     background: #fafafa;
     border: 1px solid #d3d3d3;
     border-radius: 4px;
     font-size: .8rem;
 }

 .captcha input {
     width: 22px;
     height: 22px;
     accent-color: var(--teal);
 }

 .btn-submit {
     position: relative;
     overflow: hidden;
     width: 100%;
     padding: .75rem;
     border: 0;
     border-radius: 50rem;
     background: var(--mint);
     font-size: clamp(0.875rem, 1vw, 1rem);
     font-weight: 600;
     color: #0b2b2a;
     transition: transform .25s, background .3s, color .3s;
 }

 .btn-submit::after {
     content: "";
     position: absolute;
     top: 0;
     left: -60%;
     width: 40%;
     height: 100%;
     background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .7), transparent);
     transform: skewX(-20deg);
 }

 .btn-submit:hover {
     transform: translateY(-2px);
 }

 .btn-submit:hover::after {
     animation: shine .8s;
 }

 .btn-submit.done {
     background: #1f9d6b;
     color: #fff;
 }

 /* ---------- Profiles ---------- */
 .profiles {
     max-width: 1270px;
     margin: 2rem auto 0;
 }

 .profile {
     position: relative;
     height: 450px;
     border-radius: 12px;
     overflow: hidden;
     background: linear-gradient(#e6e6e6, #cdcdcd);
     transition: transform .5s var(--ease), box-shadow .5s;
 }

 .profile:hover {
     transform: translateY(-8px);
     box-shadow: 0 22px 34px -18px rgba(0, 0, 0, .5);
 }

 .p-img {
     position: absolute;
     inset: 0;
     background: var(--img) center bottom / cover no-repeat;
     transition: transform .9s var(--ease);
 }

 .p-img-1 {
     width: 100%;
     height: 100%;
     min-height: 450px;
     background: url("../../assets/virtual-assistant/Administrative-Assistant.jpg") center / cover no-repeat;
 }

 .p-img-2 {
     width: 100%;
     height: 100%;
     min-height: 450px;
     background: url("../../assets/virtual-assistant/Customer-Support-Associate.jpg") center / cover no-repeat;
 }

 .p-img-3 {
     width: 100%;
     height: 100%;
     min-height: 450px;
     background: url("../../assets/virtual-assistant/Data\ Entry\ Specialist.jpg") center / cover no-repeat;
 }


 .profile:hover .p-img {
     transform: scale(1.06);
 }

 .p-avatar {
     position: absolute;
     left: 50%;
     top: 14%;
     width: 120px;
     height: 160px;
     margin-left: -60px;
     border-radius: 60px 60px 8px 8px;
     background: var(--fb);
     opacity: .85;
 }

 .p-body {
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     padding: 2rem .9rem .9rem;
     background: linear-gradient(transparent, rgba(255, 255, 255, .95) 45%);
 }

 .p-name {
     font-size: clamp(1.2rem, 2.5vw, 1.5rem);
     font-weight: 600;
     margin: 0;
     color: var(--ink);
 }

 .p-role {
     font-size: clamp(0.8rem, 1.5vw, 0.95rem);
     color: var(--link);
     margin: 0 0 .5rem;
     font-weight: 500;
 }

 .tags {
     display: flex;
     flex-wrap: wrap;
     gap: 6px;
 }

 .tag {
     font-size: clamp(0.8rem, 1.5vw, 0.95rem);
     padding: 3px 9px;
     background: #fff;
     border: 1px solid #999;
     border-radius: 50rem;
     transition: transform .35s var(--ease), background .3s, color .3s;
     transition-delay: calc(var(--t, 0) * 50ms);
     font-weight: 500;
 }

 .profile:hover .tag {
     transform: translateY(-3px);
     background: var(--ink);
     color: #fff;
 }

 /* ---------- Keyframes ---------- */
 @keyframes pop {
     0% {
         transform: scale(0);
     }

     70% {
         transform: scale(1.3);
     }

     100% {
         transform: scale(1);
     }
 }

 @keyframes ring {
     0% {
         opacity: .9;
         transform: scale(1);
     }

     100% {
         opacity: 0;
         transform: scale(1.7);
     }
 }

 @keyframes shine {
     to {
         left: 130%;
     }
 }

 /* ---------- Responsive ---------- */
 @media (max-width: 991.98px) {
     .form-card {
         margin: 2rem auto 0;
     }

     .trial .lead-sm {
         max-width: none;
     }
 }

 @media (max-width: 767.98px) {
     .t-slide {
         flex-basis: 78vw;
     }

     .t-arrow {
         display: none;
     }

     /* swipe instead */
     .profile {
         height: 380px;
     }
 }

 @media (max-width: 575.98px) {
     .t-slide {
         flex-direction: column;
         flex-basis: 84vw;
     }

     .t-photo {
         flex-basis: 170px;
         min-height: 170px;
     }

     .profile {
         height: 400px;
     }

     .btn-pill {
         width: 100%;
         max-width: 320px;
     }
 }

 /* Touch screens: no hover, so keep tags styled and skip lift effects */
 @media (hover: none) {

     .step:hover,
     .profile:hover {
         transform: none;
         box-shadow: none;
     }

     .profile:hover .p-img {
         transform: none;
     }

     .profile:hover .tag {
         transform: none;
         background: #fff;
         color: inherit;
     }
 }

 @media (prefers-reduced-motion: reduce) {

     *,
     *::before,
     *::after {
         animation: none !important;
         transition: none !important;
     }

     .reveal,
     .perk {
         opacity: 1;
         transform: none;
     }

     .step-num {
         transform: scale(1);
     }
 }








 /* ================= TOOLS ================= */
 .tools {
     background: #efefef;
     padding: clamp(2.5rem, 6vw, 4.5rem) 0;
 }

 .tools .sec-sub {
     color: var(--muted);
 }

 .tool-card {
     display: flex;
     max-width: 1000px;
     min-height: 500px;
     margin: 2.5rem auto 0;
     background: #fff;
     border: 1px solid #cfcfcf;
     border-radius: 16px;
     overflow: hidden;
 }

 .tool-left {
     flex: 0 0 46%;
     position: relative;
     display: flex;
     align-items: center;
     gap: 14px;
     padding: 1.5rem 1.5rem 1.5rem 1.2rem;
     background: linear-gradient(90deg, #e2e2e2, #e8e8e8);
 }

 .tool-right {
     flex: 1;
     padding: clamp(4rem, 12vw, 12rem) clamp(1rem, 4vw, 1.5rem);
 }

 /* up / down buttons */
 .tool-nav {
     display: flex;
     flex-direction: column;
     gap: 10px;
 }

 .tool-nav button {
     width: 26px;
     height: 26px;
     border-radius: 50%;
     border: 0;
     display: grid;
     place-items: center;
     background: #cfcfcf;
     color: #666;
     transition: transform .25s, background .25s, color .25s;
 }

 .tool-nav button.dark {
     background: var(--ink);
     color: #fff;
 }

 .tool-nav button:hover {
     transform: scale(1.15);
     background: var(--ink);
     color: #fff;
 }

 .tool-nav svg {
     width: 12px;
     height: 12px;
 }

 .bubble-wrap {
     flex: 1;
     min-width: 0;
 }

 .bubble {
     position: relative;
     background: #fff;
     border-radius: 14px;
     padding: .9rem 1rem;
     font-size: clamp(0.875rem, 1vw, 1rem);
     line-height: 1.5;
     box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .25);
 }

 .bubble::after {
     content: "";
     position: absolute;
     right: -7px;
     top: 22px;
     width: 14px;
     height: 14px;
     background: #fff;
     transform: rotate(45deg);
     border-radius: 2px;
 }

 .bubble b {
     font-weight: 600;
 }

 .pill-opt {
     display: flex;
     align-items: center;
     gap: .5rem;
     margin-top: .6rem;
     padding: .4rem .75rem;
     background: #fff;
     border: 1px solid #cfcfcf;
     border-radius: 50rem;
     font-size: clamp(0.875rem, 1vw, 1rem);
     font-weight: 600;
     width: max-content;
     max-width: 100%;
     text-align: left;
     transition: transform .3s var(--ease), background .3s, color .3s, border-color .3s;
 }

 .pill-opt:hover {
     transform: translateX(4px);
     border-color: var(--ink);
 }

 .pill-opt.on {
     background: var(--ink);
     color: #fff;
     border-color: var(--ink);
 }

 .pill-opt svg {
     width: 13px;
     height: 13px;
     flex: none;
 }

 .cat-title {
     font-size: clamp(0.875rem, 1vw, 1rem);
     font-weight: 900;
     margin: 0 0 .7rem;
 }

 .tiles {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
 }

 .tile {
     width: 82px;
     border: 1px solid #d5d5d5;
     border-radius: 8px;
     overflow: hidden;
     text-align: center;
     background: #fff;
     opacity: 0;
     transform: scale(.7) translateY(10px);
     animation: tilePop .55s var(--ease) forwards;
     animation-delay: calc(var(--n)*70ms);
     transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
 }

 .tile:hover {
     transform: translateY(-5px) scale(1.04);
     box-shadow: 0 12px 20px -12px rgba(0, 0, 0, .4);
     border-color: #999;
 }

 .tile-logo {
     height: 56px;
     display: grid;
     place-items: center;
 }

 .tile-logo span {
     width: 34px;
     height: 34px;
     border-radius: 9px;
     display: grid;
     place-items: center;
     color: #fff;
     font-weight: 600;
     font-size: .95rem;
     background: var(--c);
 }

 .tile-logo img {
     width: 34px;
     height: 34px;
     object-fit: contain;
 }

 .tile-name {
     display: block;
     font-size: clamp(0.875rem, 1vw, 1rem);
     font-weight: 500;
     padding: 3px 2px;
     background: #efefef;
     border-top: 1px solid #dcdcdc;
 }

 .swap-out {
     animation: fadeOut .25s forwards;
 }

 .swap-in {
     animation: slideIn .5s var(--ease) both;
 }

 /* ================= INDUSTRIES ================= */
 .industries {
     position: relative;
     min-height: clamp(430px, 60vw, 850px);
     display: grid;
     place-items: center;
     padding: 4rem 0;
     color: #fff;
     overflow: hidden;
     background: #101a1c;
 }

 .ind-bg {
     position: absolute;
     inset: 0;
     background: var(--img) center/cover no-repeat, var(--fb);
     opacity: 0;
     transform: scale(1.05);
     transition: opacity 1s ease;
 }

 .ind-bg.on {
     opacity: 1;
     animation: kb 14s ease-in-out infinite alternate;
 }

 .industries::before {
     content: "";
     position: absolute;
     inset: 0;
     z-index: 1;
     background: linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, .65));
 }

 .ind-inner {
     position: relative;
     z-index: 2;
     text-align: center;
     padding-top: clamp(4rem, 12vw, 12rem);
 }

 .ind-inner .sec-sub {
     color: rgba(255, 255, 255, .85);
     font-size: clamp(1.2rem, 2.5vw, 1.5rem);
     min-height: 5.2em;
 }

 .ind-tabs {
     position: relative;
     display: inline-flex;
     gap: 2px;
     margin-top: 1.4rem;
     padding-inline: clamp(1rem, 4vw, 4rem);
     background: rgba(255, 255, 255, .92);
     border-radius: 12px;
     max-width: 100%;
     overflow-x: auto;
     scrollbar-width: none;
 }

 .ind-tabs::-webkit-scrollbar {
     display: none;
 }

 .ind-slider {
     position: absolute;
     top: 5px;
     left: 0;
     height: calc(100% - 10px);
     background: var(--ink);
     border-radius: 8px;
     transition: transform .45s var(--ease), width .45s var(--ease);
     z-index: 0;
 }

 .ind-tab {
     position: relative;
     z-index: 1;
     flex: none;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 4px;
     min-width: 76px;
     padding: .55rem .8rem;
     border: 0;
     background: transparent;
     color: var(--ink);
     font-size: clamp(0.875rem, 1vw, 1rem);
     font-weight: 500;
     border-radius: 8px;
     transition: color .3s;
 }

 .ind-tab svg {
     width: clamp(28px, 4vw, 40px);
     height: clamp(28px, 4vw, 40px);
 }

 .ind-tab.on {
     color: #fff;
 }

 .btn-pill {
     position: relative;
     overflow: hidden;
     z-index: 0;
     margin-top: 1.6rem;
     padding: .55rem 1.3rem;
     font-size: clamp(0.875rem, 1vw, 1rem);
     font-weight: 800;
     background: transparent;
     color: #fff;
     border: 1px solid #fff;
     border-radius: 50rem;
     transition: color .35s;
 }

 .btn-pill::before {
     content: "";
     position: absolute;
     inset: 0;
     z-index: -1;
     background: #fff;
     transform: translateX(-101%);
     transition: transform .45s var(--ease);
 }

 .btn-pill:hover {
     color: var(--ink);
 }

 .btn-pill:hover::before {
     transform: none;
 }

 /* keyframes */
 @keyframes tilePop {
     to {
         opacity: 1;
         transform: none;
     }
 }

 @keyframes fadeOut {
     to {
         opacity: 0;
         transform: translateY(-8px);
     }
 }

 @keyframes slideIn {
     from {
         opacity: 0;
         transform: translateY(14px);
     }

     to {
         opacity: 1;
         transform: none;
     }
 }

 @keyframes kb {
     from {
         transform: scale(1.05);
     }

     to {
         transform: scale(1.14);
     }
 }

 /* responsive */
 @media (max-width:767.98px) {
     .tool-card {
         flex-direction: column;
         min-height: 0;
     }

     .tool-left {
         flex-basis: auto;
         padding: 1.3rem 1rem;
     }

     .bubble::after {
         display: none;
     }

     .tool-nav {
         flex-direction: column;
     }

     .tile {
         width: calc(33.333% - 6px);
     }
 }

 @media (max-width:479.98px) {
     .tile {
         width: calc(50% - 4px);
     }

     .ind-tab {
         min-width: 68px;
         padding: .5rem .6rem;
     }

     .btn-pill {
         width: 100%;
         max-width: 300px;
     }
 }

 @media (prefers-reduced-motion:reduce) {

     *,
     *::before,
     *::after {
         animation: none !important;
         transition: none !important;
     }

     .reveal {
         opacity: 1;
         transform: none;
     }

     .tile {
         opacity: 1;
         transform: none;
     }
 }

 /* ============================================== */

 section {
     padding: clamp(2.5rem, 6vw, 4.5rem) 0;
 }




 /* ================= COMPARISON TABLE ================= */
 .cmp-wrap {
     max-width: 820px;
     margin: 2.2rem auto 0;
     background: #fff;
     border-radius: 14px;
     overflow: hidden;
     box-shadow: 0 20px 40px -30px rgba(0, 0, 0, .35);
 }

 .cmp {
     width: 100%;
     border-collapse: collapse;
     table-layout: fixed;
 }

 .cmp thead th {
     background: var(--ink);
     color: #fff;
     font-size: clamp(0.875rem, 1vw, 1rem);
     font-weight: 600;
     padding: 1rem 1.1rem;
     text-align: left;
     border-right: 1px solid rgba(255, 255, 255, .14);
 }

 .cmp thead th:last-child {
     border-right: 0;
 }

 .cmp thead th:first-child {
     width: 22%;
 }

 .cmp thead th.hl {
     position: relative;
 }

 .cmp thead th.hl::after {
     content: "";
     position: absolute;
     left: 0;
     bottom: 0;
     height: 3px;
     width: 100%;
     background: #5ff5df;
     transform: scaleX(0);
     transform-origin: left;
     transition: transform .9s var(--ease) .8s;
 }

 .in .cmp thead th.hl::after {
     transform: scaleX(1);
 }

 .cmp tbody tr {
     border-bottom: 1px solid #e1e1e1;
     position: relative;
     opacity: 0;
     transform: translateX(-18px);
     transition: opacity .6s ease, transform .7s var(--ease), background .3s;
     transition-delay: calc(var(--r)*90ms + .2s);
 }

 .cmp tbody tr:last-child {
     border-bottom: 0;
 }

 .in .cmp tbody tr {
     opacity: 1;
     transform: none;
 }

 .cmp td {
     padding: 1rem 1.1rem;
     font-size: clamp(0.875rem, 1vw, 1rem);
     line-height: 1.5;
     color: #333;
     vertical-align: middle;
     border-right: 1px solid #e1e1e1;
 }

 .cmp td:last-child {
     border-right: 0;
 }

 .cmp td:first-child {
     font-weight: 600;
     color: var(--ink);
 }

 /* hover: row tint + accent bar + emphasise Virtual Employees answer */
 .cmp tbody tr:hover {
     background: #f5fdfb;
     transition-delay: 0s;
 }

 .cmp tbody tr td:first-child {
     box-shadow: inset 0 0 0 #5ff5df;
     transition: box-shadow .35s var(--ease);
 }

 .cmp tbody tr:hover td:first-child {
     box-shadow: inset 4px 0 0 #5ff5df;
 }

 .cmp tbody tr:hover td:last-child {
     color: #0b5d55;
     font-weight: 500;
 }

 /* ================= CASE STUDIES ================= */
 .cs-grid {
     max-width: 1200px;
     margin: 2.5rem auto 0;
 }

 .cs-card {
     display: block;
     color: inherit;
     text-decoration: none;
 }

 .cs-img {
     position: relative;
     height: 450px;
     border-radius: 14px;
     overflow: hidden;
     background: var(--img) center/cover no-repeat, var(--fb);
     isolation: isolate;
 }

 .cs-img .zoom {
     position: absolute;
     inset: 0;
     background: var(--img) center/cover no-repeat;
     transition: transform .9s var(--ease);
     z-index: -1;
 }

 .cs-img::before {
     content: attr(data-label);
     position: absolute;
     inset: 0;
     display: grid;
     place-items: center;
     z-index: -2;
     font-size: 1.4rem;
     font-weight: 600;
     color: rgba(255, 255, 255, .8);
     letter-spacing: -.01em;
 }

 .cs-img::after {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(transparent 55%, rgba(0, 0, 0, .25));
     opacity: 0;
     transition: opacity .4s;
 }

 .cs-card:hover .zoom {
     transform: scale(1.08);
 }

 .cs-card:hover .cs-img::after {
     opacity: 1;
 }

 .cs-badge {
     position: absolute;
     right: 14px;
     bottom: 12px;
     z-index: 2;
     padding: .25rem .7rem;
     border-radius: 50rem;
     background: rgba(255, 255, 255, .92);
     font-size: .65rem;
     font-weight: 600;
     transform: translateY(8px);
     opacity: 0;
     transition: transform .4s var(--ease), opacity .4s;
 }

 .cs-card:hover .cs-badge,
 .cs-card:focus-visible .cs-badge {
     transform: none;
     opacity: 1;
 }

 .cs-title {
     margin: .9rem .2rem .4rem;
     font-size: clamp(0.875rem, 1vw, 1rem);
     font-weight: 600;
     line-height: 1.45;
     transition: color .3s;
 }

 .cs-card:hover .cs-title {
     color: var(--link);
 }

 .cs-more {
     position: relative;
     display: inline-flex;
     align-items: center;
     gap: .3rem;
     margin-left: .2rem;
     font-size: clamp(0.875rem, 1vw, 1rem);
     color: var(--link);
 }

 .cs-more::after {
     content: "";
     position: absolute;
     left: 0;
     bottom: -2px;
     height: 1px;
     width: calc(100% - 1rem);
     background: var(--link);
     transform-origin: left;
     transition: transform .4s var(--ease);
 }

 .cs-card:hover .cs-more::after {
     transform: scaleX(1.2);
 }

 .cs-more i {
     font-style: normal;
     display: inline-block;
     transition: transform .3s var(--ease);
 }

 .cs-card:hover .cs-more i {
     transform: translateX(5px);
 }

 .cs-card:focus-visible {
     outline: 3px solid var(--link);
     outline-offset: 4px;
     border-radius: 14px;
 }

 .btn-pill {
     position: relative;
     overflow: hidden;
     z-index: 0;
     margin-top: 2.5rem;
     padding: .55rem 1.3rem;
     font-size: .85rem;
     font-weight: 500;
     background: #fff;
     color: var(--ink);
     border: 1px solid var(--ink);
     border-radius: 50rem;
     transition: color .35s;
 }

 .btn-pill::before {
     content: "";
     position: absolute;
     inset: 0;
     z-index: -1;
     background: var(--ink);
     transform: translateX(-101%);
     transition: transform .45s var(--ease);
 }

 .btn-pill:hover {
     color: #fff;
 }

 .btn-pill:hover::before {
     transform: none;
 }

 /* ================= RESPONSIVE ================= */
 @media (max-width:767.98px) {
     .cmp thead {
         display: none;
     }

     .cmp,
     .cmp tbody,
     .cmp tr,
     .cmp td {
         display: block;
         width: 100%;
     }

     .cmp tbody tr {
         padding: .9rem 1rem;
     }

     .cmp td {
         border: 0;
         padding: .3rem 0;
         font-size: .85rem;
     }

     .cmp td:first-child {
         font-size: .95rem;
         padding-bottom: .4rem;
     }

     .cmp td[data-label]::before {
         content: attr(data-label);
         display: block;
         font-size: .65rem;
         font-weight: 600;
         color: var(--muted);
         margin-bottom: 1px;
     }

     .cmp td:last-child {
         margin-top: .2rem;
         padding: .5rem .7rem;
         background: #eefbf8;
         border-radius: 8px;
     }

     .cmp tbody tr:hover td:first-child {
         box-shadow: none;
     }

     .cs-img {
         height: 220px;
     }
 }

 @media (max-width:479.98px) {
     .btn-pill {
         width: 100%;
         max-width: 320px;
     }
 }

 @media (hover:none) {
     .cs-badge {
         opacity: 1;
         transform: none;
     }
 }

 @media (prefers-reduced-motion:reduce) {

     *,
     *::before,
     *::after {
         animation: none !important;
         transition: none !important;
     }

     .reveal,
     .cmp tbody tr {
         opacity: 1;
         transform: none;
     }

     .cmp thead th.hl::after {
         transform: scaleX(1);
     }
 }

 /*======================================= */


 .articles {
     padding: clamp(3rem, 7vw, 5rem) 0;
 }




 .art-grid {
     padding-left: clamp(1rem, 10vw, 10rem);
     padding-right: clamp(1rem, 10vw, 10rem);
     margin: 2.5rem auto 0;
 }

 .art-card {
     display: block;
     color: inherit;
     text-decoration: none;
 }

 .art-card:focus-visible {
     outline: 3px solid #2b55d6;
     outline-offset: 5px;
     border-radius: 20px;
 }

 .art-img {
     position: relative;
     aspect-ratio: 4/3;
     border-radius: 20px;
     overflow: hidden;
     background: var(--fb);
     isolation: isolate;
     transition: transform .5s var(--ease), box-shadow .5s;
 }

 .art-img::before {
     content: attr(data-label);
     position: absolute;
     inset: 0;
     z-index: -2;
     display: grid;
     place-items: center;
     padding: 1rem;
     text-align: center;
     font-weight: 600;
     font-size: 1.1rem;
     color: rgba(255, 255, 255, .8);
 }

 .art-img .zoom {
     position: absolute;
     inset: 0;
     z-index: -1;
     background: var(--img) center/cover no-repeat;
     transition: transform 1s var(--ease);
 }

 .art-card:hover .art-img {
     transform: translateY(-6px);
     box-shadow: 0 26px 40px -24px rgba(0, 0, 0, .5);
 }

 .art-card:hover .zoom {
     transform: scale(1.09);
 }

 /* "Read this blog" overlay */
 .art-img::after {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(transparent 45%, rgba(0, 0, 0, .6));
     opacity: 0;
     transition: opacity .45s;
 }

 .art-read {
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 2;
     display: flex;
     justify-content: flex-end;
     align-items: center;
     gap: .35rem;
     padding: 1rem 1.2rem;
     color: #fff;
     font-size: .9rem;
     font-weight: 500;
     opacity: 0;
     transform: translateY(14px);
     transition: opacity .4s, transform .5s var(--ease);
 }

 .art-read i {
     font-style: normal;
     display: inline-block;
     transition: transform .35s var(--ease);
 }

 .art-card:hover .art-img::after {
     opacity: 1;
 }

 .art-card:hover .art-read,
 .art-card:focus-visible .art-read {
     opacity: 1;
     transform: none;
 }

 .art-card:hover .art-read i {
     transform: translateX(5px);
 }

 .art-title {
     margin: 1rem 0 .5rem;
     font-size: clamp(1rem, 1.6vw, 1.12rem);
     font-weight: 500;
     line-height: 1.4;
     letter-spacing: -.01em;
 }

 .art-title span {
     background: linear-gradient(currentColor, currentColor) 0 100%/0 1.5px no-repeat;
     transition: background-size .5s var(--ease);
     padding-bottom: 2px;
 }

 .art-card:hover .art-title span {
     background-size: 100% 1.5px;
 }

 .art-meta {
     font-size: clamp(0.875rem, 1vw, 1rem);
     color: var(--muted);
     margin: 0;
 }

 .btn-pill {
     position: relative;
     overflow: hidden;
     z-index: 0;
     margin-top: 2.8rem;
     padding: .6rem 1.4rem;
     font-size: .85rem;
     font-weight: 500;
     background: #fff;
     color: var(--ink);
     border: 1px solid var(--ink);
     border-radius: 50rem;
     transition: color .35s;
 }

 .btn-pill::before {
     content: "";
     position: absolute;
     inset: 0;
     z-index: -1;
     background: var(--ink);
     transform: translateX(-101%);
     transition: transform .45s var(--ease);
 }

 .btn-pill i {
     font-style: normal;
     display: inline-block;
     transition: transform .3s var(--ease);
 }

 .btn-pill:hover {
     color: #fff;
 }

 .btn-pill:hover::before {
     transform: none;
 }

 .btn-pill:hover i {
     transform: translateX(4px);
 }

 /* touch screens: no hover, so keep the "Read this blog" label visible */
 @media (hover:none) {
     .art-read {
         opacity: 1;
         transform: none;
     }

     .art-img::after {
         opacity: 1;
     }

     .art-card:hover .art-img {
         transform: none;
         box-shadow: none;
     }

     .art-card:hover .zoom {
         transform: none;
     }
 }

 @media (max-width:479.98px) {
     .btn-pill {
         width: 100%;
         max-width: 320px;
     }
 }

 @media (prefers-reduced-motion:reduce) {

     *,
     *::before,
     *::after {
         transition: none !important;
         animation: none !important;
     }

     .reveal {
         opacity: 1;
         transform: none;
     }
 }


 /* ======================================== */

 .faq {
     padding: clamp(3rem, 7vw, 5rem) 0;
     background: var(--bgfeq);
 }

 .faq-title {
     font-weight: 600;
     letter-spacing: -.03em;
     font-size: clamp(1.9rem, 5vw, 2.9rem);
 }



 .faq-list {
     max-width: 800px;
     margin: 2.2rem auto 0;
     display: flex;
     flex-direction: column;
     gap: 8px;
 }

 /* one item = wrapper (reveal) + inner card (hover / open animation) */
 .faq-item {
     border: 1px solid #d3d3d3;
     border-radius: 14px;
     background: #f0f0f0;
     overflow: hidden;
     transition: background .35s, border-color .35s, box-shadow .45s var(--ease), transform .35s var(--ease);
 }

 .faq-item:hover {
     border-color: #b5b5b5;
     transform: translateX(3px);
 }

 .faq-item.open {
     background: #fff;
     border-color: var(--blue);
     box-shadow: 0 18px 30px -22px rgba(43, 85, 214, .55);
     transform: none;
 }

 .faq-q {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 1rem;
     padding: 1rem 1.2rem;
     border: 0;
     background: transparent;
     text-align: left;
     font: inherit;
     font-size: clamp(0.875rem, 1vw, 1rem);
     font-weight: 500;
     color: var(--ink);
 }

 .faq-q:focus-visible {
     outline: 3px solid var(--blue);
     outline-offset: -3px;
     border-radius: 14px;
 }

 .faq-chev {
     flex: none;
     width: 18px;
     height: 18px;
     transition: transform .5s var(--ease);
 }

 .faq-item.open .faq-chev {
     transform: rotate(180deg);
 }

 /* smooth height with grid rows (no JS measuring) */
 .faq-a {
     display: grid;
     grid-template-rows: 0fr;
     transition: grid-template-rows .55s var(--ease);
 }

 .faq-item.open .faq-a {
     grid-template-rows: 1fr;
 }

 .faq-a>div {
     overflow: hidden;
 }

 .faq-a p {
     margin: 0;
     padding: 0 1.2rem 1.3rem;
     font-size: clamp(0.875rem, 1vw, 1rem);
     line-height: 1.65;
     color: var(--muted);
     opacity: 0;
     transform: translateY(-8px);
     transition: opacity .4s ease, transform .5s var(--ease);
 }

 .faq-item.open .faq-a p {
     opacity: 1;
     transform: none;
     transition-delay: .15s;
 }

 .btn-pill {
     position: relative;
     overflow: hidden;
     z-index: 0;
     margin-top: 2.2rem;
     padding: .6rem 1.4rem;
     font-size: clamp(0.875rem, 1vw, 1rem);
     font-weight: 800;
     background: #fff;
     color: var(--ink);
     border: 1px solid var(--ink);
     border-radius: 50rem;
     transition: color .35s;
 }

 .btn-pill::before {
     content: "";
     position: absolute;
     inset: 0;
     z-index: -1;
     background: var(--ink);
     transform: translateX(-101%);
     transition: transform .45s var(--ease);
 }

 .btn-pill i {
     font-style: normal;
     display: inline-block;
     transition: transform .3s var(--ease);
 }

 .btn-pill:hover {
     color: #fff;
 }

 .btn-pill:hover::before {
     transform: none;
 }

 .btn-pill:hover i {
     transform: translateX(4px);
 }

 @media (hover:none) {
     .faq-item:hover {
         transform: none;
         border-color: #d3d3d3;
     }

     .faq-item.open:hover {
         border-color: var(--blue);
     }
 }

 @media (max-width:479.98px) {
     .btn-pill {
         width: 100%;
         max-width: 320px;
     }

     .faq-q {
         padding: .9rem 1rem;
     }

     .faq-a p {
         padding: 0 1rem 1.1rem;
     }
 }

 @media (prefers-reduced-motion:reduce) {

     *,
     *::before,
     *::after {
         transition: none !important;
         animation: none !important;
     }

     .reveal {
         opacity: 1;
         transform: none;
     }
 }


 .cases {
     padding: clamp(2.5rem, 6vw, 4rem) 0;
 }

 .cs-card {
     display: flex;
     flex-direction: column;
     height: 100%;
     color: inherit;
     text-decoration: none;
     background: transparent;
     border-radius: 28px;
     overflow: hidden;
     transition: background .4s ease, transform .5s var(--ease), box-shadow .5s var(--ease);
 }

 .cs-card:hover,
 .cs-card:focus-visible {
     background: #fff;
     transform: translateY(-8px);
     box-shadow: 0 28px 44px -28px rgba(0, 0, 0, .4);
 }

 .cs-card:focus-visible {
     outline: 3px solid var(--link);
     outline-offset: 4px;
 }

 .cs-img {
     position: relative;
     aspect-ratio: 4/3;
     border-radius: 28px;
     overflow: hidden;
     background: var(--fb);
     isolation: isolate;
     flex: none;
 }

 .cs-img::before {
     content: attr(data-label);
     position: absolute;
     inset: 0;
     z-index: -2;
     display: grid;
     place-items: center;
     padding: 1rem;
     text-align: center;
     font-size: 1.5rem;
     font-weight: 600;
     color: rgba(255, 255, 255, .85);
 }

 .cs-img .zoom {
     position: absolute;
     inset: 0;
     z-index: -1;
     background: var(--img) center/cover no-repeat;
     transition: transform 1.1s var(--ease);
 }

 .cs-card:hover .zoom,
 .cs-card:focus-visible .zoom {
     transform: scale(1.07);
 }

 /* soft light sweep across the photo on hover */
 .cs-img::after {
     content: "";
     position: absolute;
     top: 0;
     left: -70%;
     width: 45%;
     height: 100%;
     background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
     transform: skewX(-18deg);
 }

 .cs-card:hover .cs-img::after {
     animation: sweep 1s ease;
 }

 .cs-body {
     padding: 1.3rem 1.5rem 1.6rem;
 }

 .cs-title {
     margin: 0 0 .75rem;
     font-size: clamp(1.05rem, 1.9vw, 1.3rem);
     font-weight: 500;
     line-height: 1.45;
     letter-spacing: -.01em;
 }

 .cs-more {
     display: inline-flex;
     align-items: center;
     gap: .45rem;
     font-size: 1rem;
     color: var(--link);
 }

 .cs-more span {
     position: relative;
     padding-bottom: 1px;
 }

 .cs-more span::after {
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     height: 1px;
     background: var(--link);
     transform-origin: left;
     transition: transform .45s var(--ease);
 }

 .cs-card:hover .cs-more span::after {
     transform: scaleX(1.0);
     animation: underlineRedraw .6s var(--ease);
 }

 .cs-more svg {
     width: 14px;
     height: 14px;
     transition: transform .35s var(--ease);
 }

 .cs-card:hover .cs-more svg {
     transform: translateX(6px);
 }

 @keyframes sweep {
     to {
         left: 130%;
     }
 }

 @keyframes underlineRedraw {
     from {
         transform: scaleX(0);
     }

     to {
         transform: scaleX(1);
     }
 }

 /* touch screens: no hover, so show the white card state */
 @media (hover:none) {
     .cs-card {
         background: #fff;
     }

     .cs-card:hover {
         transform: none;
         box-shadow: none;
     }
 }

 @media (max-width:575.98px) {

     .cs-card,
     .cs-img {
         border-radius: 22px;
     }

     .cs-body {
         padding: 1.1rem 1.2rem 1.4rem;
     }
 }

 @media (prefers-reduced-motion:reduce) {

     *,
     *::before,
     *::after {
         transition: none !important;
         animation: none !important;
     }

     .reveal {
         opacity: 1;
         transform: none;
     }
 }


 .cta-wrap {
     padding: clamp(1rem, 2.5vw, 2rem) clamp(.6rem, 1vw, 1rem) 0;
 }

 /* ---------- CTA panel ---------- */
 .cta {
     position: relative;
     overflow: hidden;
     background: #fff;
     border-radius: 20px;
     text-align: center;
     padding: clamp(4rem, 11vw, 8.5rem) 1.25rem;
     isolation: isolate;
     opacity: 0;
     transform: translateY(40px) scale(.98);
     transition: opacity .9s ease, transform 1s var(--ease);
 }

 .cta.in {
     opacity: 1;
     transform: none;
 }

 /* drifting soft orbs + dot grid in the background */
 .cta::before {
     content: "";
     position: absolute;
     inset: 0;
     z-index: -2;
     background-image: radial-gradient(#e6e6e6 1.2px, transparent 1.2px);
     background-size: 26px 26px;
     -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
     mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
 }

 .orb {
     position: absolute;
     z-index: -1;
     border-radius: 50%;
     filter: blur(50px);
     opacity: .55;
     animation: drift 10s ease-in-out infinite alternate;
 }

 .orb.o1 {
     width: 260px;
     height: 260px;
     left: 6%;
     top: 10%;
     background: #bff9ef;
 }

 .orb.o2 {
     width: 220px;
     height: 220px;
     right: 8%;
     bottom: 6%;
     background: #d6f0ff;
     animation-delay: -4s;
 }

 .orb.o3 {
     width: 140px;
     height: 140px;
     right: 30%;
     top: 6%;
     background: #e9ffe0;
     animation-delay: -7s;
 }

 .cta-title {
     max-width: 760px;
     margin: 0 auto 1.6rem;
     font-weight: 600;
     letter-spacing: -.03em;
     line-height: 1.18;
     font-size: clamp(1.5rem, 3.4vw, 2.2rem);
 }

 .cta-title .num {
     display: inline-block;
     font-variant-numeric: tabular-nums;
     background: linear-gradient(transparent 62%, rgba(95, 245, 223, .55) 62%);
     padding: 0 .12em;
 }

 /* heading words rise in */
 .cta-title .w {
     display: inline-block;
     opacity: 0;
     transform: translateY(16px);
     transition: opacity .6s ease, transform .7s var(--ease);
     transition-delay: calc(.25s + var(--w)*35ms);
 }

 .cta.in .cta-title .w {
     opacity: 1;
     transform: none;
 }

 .btn-cta {
     position: relative;
     overflow: hidden;
     display: inline-block;
     padding: .7rem 1.5rem;
     border: 0;
     border-radius: 50rem;
     background: var(--mint);
     color: #0b2b2a;
     font-size: .85rem;
     font-weight: 600;
     text-decoration: none;
     transition: transform .3s var(--ease), box-shadow .3s;
     opacity: 0;
     transform: translateY(14px);
 }

 .cta.in .btn-cta {
     opacity: 1;
     transform: none;
     transition: opacity .7s ease 1.2s, transform .7s var(--ease) 1.2s, box-shadow .3s;
 }

 .cta.in .btn-cta.ready {
     transition: transform .3s var(--ease), box-shadow .3s;
 }

 .btn-cta:hover {
     transform: translateY(-3px);
     box-shadow: 0 14px 24px -12px rgba(18, 168, 154, .8);
     color: #0b2b2a;
 }

 .btn-cta:active {
     transform: translateY(0) scale(.97);
 }

 .btn-cta:focus-visible {
     outline: 3px solid var(--ink);
     outline-offset: 3px;
 }

 .btn-cta::before {
     content: "";
     position: absolute;
     inset: 0;
     border-radius: inherit;
     border: 2px solid var(--mint);
     opacity: 0;
 }

 .cta.in .btn-cta.ready::before {
     animation: ring 2.6s ease-out 1s infinite;
 }

 .btn-cta::after {
     content: "";
     position: absolute;
     top: 0;
     left: -60%;
     width: 40%;
     height: 100%;
     background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .7), transparent);
     transform: skewX(-20deg);
 }

 .btn-cta:hover::after {
     animation: shine .8s;
 }

 /* ---------- Read more block ---------- */
 .more {
     max-width: 1200px;
     margin: clamp(2.5rem, 6vw, 4rem) auto clamp(2.5rem, 6vw, 4rem);
     padding: 0 1.25rem;
     font-size: .8rem;
 }

 .more h3 {
     font-size: .82rem;
     font-weight: 600;
     margin: 0 0 .5rem;
 }

 .more p {
     margin: 0 0 .6rem;
     color: var(--muted);
     line-height: 1.7;
 }

 .more-extra {
     display: grid;
     grid-template-rows: 0fr;
     transition: grid-template-rows .6s var(--ease);
 }

 .more-extra>div {
     overflow: hidden;
 }

 .more-extra p {
     opacity: 0;
     transform: translateY(-6px);
     transition: opacity .4s ease, transform .5s var(--ease);
 }

 .more.open .more-extra {
     grid-template-rows: 1fr;
 }

 .more.open .more-extra p {
     opacity: 1;
     transform: none;
     transition-delay: .15s;
 }

 .more-btn {
     display: inline-flex;
     align-items: center;
     gap: .3rem;
     padding: 0;
     border: 0;
     background: none;
     font-size: .78rem;
     font-weight: 600;
     color: var(--ink);
 }

 .more-btn svg {
     width: 11px;
     height: 11px;
     transition: transform .5s var(--ease);
 }

 .more.open .more-btn svg {
     transform: rotate(180deg);
 }

 .more-btn:hover span {
     text-decoration: underline;
     text-underline-offset: 3px;
 }

 .more-btn:focus-visible {
     outline: 2px solid var(--ink);
     outline-offset: 3px;
     border-radius: 4px;
 }

 .reveal {
     opacity: 0;
     transform: translateY(24px);
     transition: opacity .8s ease, transform .9s var(--ease);
 }

 .reveal.in {
     opacity: 1;
     transform: none;
 }

 @keyframes drift {
     to {
         transform: translate(40px, 26px) scale(1.12);
     }
 }

 @keyframes ring {
     0% {
         opacity: .8;
         transform: scale(1);
     }

     100% {
         opacity: 0;
         transform: scale(1.4);
     }
 }

 @keyframes shine {
     to {
         left: 130%;
     }
 }

 @media (max-width:575.98px) {
     .orb.o3 {
         display: none;
     }

     .btn-cta {
         padding: .8rem 1.6rem;
     }
 }

 @media (prefers-reduced-motion:reduce) {

     *,
     *::before,
     *::after {
         animation: none !important;
         transition: none !important;
     }

     .cta,
     .reveal,
     .cta .w,
     .btn-cta {
         opacity: 1;
         transform: none;
     }
 }







 /* Lets CSS animate a number (count-up). Browsers without support simply show the final number. */
 @property --n1 {
     syntax: '<integer>';
     inherits: false;
     initial-value: 4500;
 }

 @property --n2 {
     syntax: '<integer>';
     inherits: false;
     initial-value: 48;
 }

 .cta-wrap {
     padding: clamp(1rem, 2.5vw, 2rem) clamp(.6rem, 1vw, 1rem) 0;
 }

 /* ---------- CTA panel ---------- */
 .cta {
     position: relative;
     overflow: hidden;
     isolation: isolate;
     background: #fff;
     border-radius: 20px;
     text-align: center;
     padding: clamp(4rem, 11vw, 8.5rem) 1.25rem;
     animation: panelIn 1s var(--ease) both;
 }

 /* dot pattern + drifting orbs */
 .cta::before {
     content: "";
     position: absolute;
     inset: 0;
     z-index: -2;
     background-image: radial-gradient(#e6e6e6 1.2px, transparent 1.2px);
     background-size: 26px 26px;
     -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
     mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
 }

 .orb {
     position: absolute;
     z-index: -1;
     border-radius: 50%;
     filter: blur(50px);
     opacity: .55;
     animation: drift 10s ease-in-out infinite alternate;
 }

 .o1 {
     width: 260px;
     height: 260px;
     left: 6%;
     top: 10%;
     background: #bff9ef;
 }

 .o2 {
     width: 220px;
     height: 220px;
     right: 8%;
     bottom: 6%;
     background: #d6f0ff;
     animation-delay: -4s;
 }

 .o3 {
     width: 140px;
     height: 140px;
     right: 30%;
     top: 6%;
     background: #e9ffe0;
     animation-delay: -7s;
 }

 .cta-title {
     max-width: 850px;
     margin: 0 auto 1.6rem;
     font-weight: 600;
     letter-spacing: -.03em;
     line-height: 1.18;
     font-size: clamp(1.5rem, 3.4vw, 2.2rem);
     animation: rise .9s var(--ease) .35s both;
 }

 /* CSS-only count-up: the number is drawn by a counter, animated from 0 */
 .num {
     display: inline-block;
     padding: 0 .12em;
     font-variant-numeric: tabular-nums;
     background: linear-gradient(transparent 62%, rgba(95, 245, 223, .55) 62%) 0 0/0% 100% no-repeat;
     animation: hl .8s var(--ease) 1.4s forwards;
 }

 .num::after {
     content: counter(c) attr(data-suffix);
 }

 .n1 {
     counter-reset: c var(--n1);
     animation: count1 1.8s cubic-bezier(.2, .8, .2, 1) .6s both, hl .8s var(--ease) 1.4s forwards;
 }

 .n2 {
     counter-reset: c var(--n2);
     animation: count2 1.6s cubic-bezier(.2, .8, .2, 1) .6s both, hl .8s var(--ease) 1.4s forwards;
 }

 .btn-cta {
     position: relative;
     overflow: hidden;
     display: inline-block;
     padding: .7rem 1.5rem;
     border-radius: 50rem;
     background: var(--mint);
     color: #0b2b2a;
     font-size: .85rem;
     font-weight: 600;
     text-decoration: none;
     transition: transform .3s var(--ease), box-shadow .3s;
     animation: rise .8s var(--ease) 1.2s both;
 }

 .btn-cta:hover {
     transform: translateY(-3px);
     box-shadow: 0 14px 24px -12px rgba(18, 168, 154, .8);
     color: #0b2b2a;
 }

 .btn-cta:active {
     transform: scale(.97);
 }

 .btn-cta:focus-visible {
     outline: 3px solid var(--ink);
     outline-offset: 3px;
 }

 .btn-cta::before {
     content: "";
     position: absolute;
     inset: 0;
     border-radius: inherit;
     border: 2px solid var(--mint);
     opacity: 0;
     animation: ring 2.6s ease-out 2.2s infinite;
 }

 .btn-cta::after {
     content: "";
     position: absolute;
     top: 0;
     left: -60%;
     width: 40%;
     height: 100%;
     background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .7), transparent);
     transform: skewX(-20deg);
 }

 .btn-cta:hover::after {
     animation: shine .8s;
 }

 /* ---------- Read more (checkbox technique, no JS) ---------- */
 .more {
     max-width: 900px;
     margin: clamp(2.5rem, 6vw, 4rem) auto;
     padding: 0 1.25rem;
     font-size: .8rem;
     animation: rise .9s var(--ease) .9s both;
 }

 .more h3 {
     font-size: clamp(0.875rem, 1vw, 1rem);
     font-weight: 900;
     margin: 0 0 .5rem;
 }

 .more p {
     margin: 0 0 .6rem;
     color: var(--muted);
     line-height: 1.7;
     font-size: clamp(0.875rem, 1vw, 1rem);
 }

 .more-toggle {
     position: absolute;
     opacity: 0;
     pointer-events: none;
 }

 /* hidden but keyboard focusable */
 .more-extra {
     display: grid;
     grid-template-rows: 0fr;
     transition: grid-template-rows .6s var(--ease);
 }

 .more-extra>div {
     overflow: hidden;
 }

 .more-extra p {
     opacity: 0;
     transform: translateY(-6px);
     transition: opacity .4s ease, transform .5s var(--ease);
 }

 .more-toggle:checked~.more-extra {
     grid-template-rows: 1fr;
 }

 .more-toggle:checked~.more-extra p {
     opacity: 1;
     transform: none;
     transition-delay: .15s;
 }

 .more-label {
     display: inline-flex;
     align-items: center;
     gap: .3rem;
     font-size: clamp(0.875rem, 1vw, 1rem);
     font-weight: 600;
     cursor: pointer;
     user-select: none;
 }

 .more-label svg {
     width: 11px;
     height: 11px;
     transition: transform .5s var(--ease);
 }

 .more-label:hover .t {
     text-decoration: underline;
     text-underline-offset: 3px;
 }

 .more-label .less {
     display: none;
 }

 .more-toggle:checked~.more-label .less {
     display: inline;
 }

 .more-toggle:checked~.more-label .read {
     display: none;
 }

 .more-toggle:checked~.more-label svg {
     transform: rotate(180deg);
 }

 .more-toggle:focus-visible~.more-label {
     outline: 2px solid var(--ink);
     outline-offset: 3px;
     border-radius: 4px;
 }

 /* ---------- Keyframes ---------- */
 @keyframes panelIn {
     from {
         opacity: 0;
         transform: translateY(40px) scale(.98);
     }

     to {
         opacity: 1;
         transform: none;
     }
 }

 @keyframes rise {
     from {
         opacity: 0;
         transform: translateY(18px);
     }

     to {
         opacity: 1;
         transform: none;
     }
 }

 @keyframes drift {
     to {
         transform: translate(40px, 26px) scale(1.12);
     }
 }

 @keyframes ring {
     0% {
         opacity: .8;
         transform: scale(1);
     }

     100% {
         opacity: 0;
         transform: scale(1.4);
     }
 }

 @keyframes shine {
     to {
         left: 130%;
     }
 }

 @keyframes hl {
     to {
         background-size: 100% 100%;
     }
 }

 @keyframes count1 {
     from {
         --n1: 0;
     }

     to {
         --n1: 4500;
     }
 }

 @keyframes count2 {
     from {
         --n2: 0;
     }

     to {
         --n2: 48;
     }
 }

 @media (max-width:575.98px) {
     .o3 {
         display: none;
     }

     .btn-cta {
         padding: .8rem 1.6rem;
     }
 }

 @media (prefers-reduced-motion:reduce) {

     *,
     *::before,
     *::after {
         animation: none !important;
         transition: none !important;
     }

     .num {
         background-size: 100% 100%;
     }
 }

 .extra-card {
     /* max-height: 500px; */
     opacity: 1;
     transform: translateY(0);
     overflow: hidden;
     transition:
         max-height 0.6s ease,
         opacity 0.4s ease,
         transform 0.5s ease,
         margin 0.5s ease;
 }


 .extra-card.is-hidden {
     max-height: 0;
     opacity: 0;
     transform: translateY(30px);
     pointer-events: none;
     margin-top: 0 !important;
 }


 #viewMoreBtn svg {
     transition: transform 0.35s ease;
 }

 #viewMoreBtn.active svg {
     transform: rotate(180deg);
 }