/* ===== FEATURE BAND (Problems / Solutions — full-bleed colored section
   with a header, a decorative illustration, and a vertical icon+text list;
   pattern inspired by HAER's "Solusi" section, rebuilt with our own
   colors, icons, and an original illustration) ===== */
.feature-band {
  background: var(--secondary);
  padding: var(--section-spacing) 0;
  position: relative;
}

.feature-band--dark {
  background: var(--primary);
}

/* Sticky-overlap: the Solutions band scrolls up and over the
   announce strip above it, visually "closing" over it — matches the
   reference layout where the blue band slides up to cover the
   lighter announcement strip as the user scrolls down. */
.feature-band--sticky {
  position: sticky;
  top: 0;
  z-index: 2;
  /*border-radius: 28px 28px 0 0;*/
  box-shadow: 0 -24px 48px rgba(16, 24, 40, 0.12);
}

.feature-band-header {
  max-width: 680px;
  margin: 0 auto 56px;
  text-align: center;
}

/* Compact header for the Solutions band — smaller type to match the
   reference (short, tight heading rather than a hero-scale one). */
.feature-band-header--compact {
  max-width: 640px;
  margin: 0 auto 40px;
}

.feature-band-header--compact h2 {
  font-size: clamp(1.05rem, 1.6vw, 1.375rem);
  line-height: var(--lh-snug);
  font-weight: var(--fw-bold);
}

.feature-band-header--compact p {
  font-size: var(--fs-xs);
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}

.feature-band-body--compact {
  gap: 48px;
}

.feature-band-list--compact {
  gap: 20px;
}

.feature-band-list--compact .feature-band-item {
  grid-template-columns: 40px 1fr;
  gap: 14px;
}

.feature-band-list--compact .feature-band-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  font-size: 1.1rem;
}

.feature-band-list--compact .feature-band-text h3 {
  font-size: var(--fs-body);
  margin-bottom: 3px;
}

.feature-band-list--compact .feature-band-text p {
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
}

.feature-band-header h2,
.feature-band-header p {
  color: #fff;
}

.feature-band-header p {
  color: rgba(255, 255, 255, 0.78);
  margin-top: 12px;
}

.eyebrow--light {
  color: var(--accent);
}

.feature-band-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.feature-band-illustration {
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-band-illustration svg {
  width: 100%;
  max-width: 420px;
  height: auto;
}

.feature-band-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.feature-band-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  align-items: flex-start;
}

.feature-band-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.feature-band-text h3 {
  color: #fff;
  font-size: var(--fs-h3);
  margin-bottom: 6px;
}

.feature-band-text p {
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--fs-body);
}

/* ===== WHY CHOOSE (image + text list) ===== */
.why-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 40px;
}

.why-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 20px;
  padding: 28px 0;
  border-top: 1px solid var(--border);
  cursor: default;
}

.why-item:last-child {
  border-bottom: 1px solid var(--border);
}

.why-item .why-num {
  font-weight: var(--fw-bold);
  color: var(--text-faint);
  font-size: var(--fs-body-lg);
}

.why-item h4 {
  margin-bottom: 8px;
}

.why-item p {
  font-size: var(--fs-small);
}

/* ===== FEATURES GRID ===== */
.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 8px;
}

.feature-card {
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.feature-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}

.feature-card h4 {
  font-size: 1.05rem;
}

.feature-card p {
  font-size: var(--fs-small);
}

/* ===== CTA BAND ===== */
.cta-band {
  background: var(--secondary);
  border-radius: var(--radius-lg);
  padding: 72px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-band::after {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255,255,255,0.10), transparent 70%);
  top: -100px;
  right: -100px;
}

.cta-band h2,
.cta-band p {
  color: #fff;
  position: relative;
}

.cta-band p {
  color: rgba(255,255,255,0.75);
  max-width: 500px;
  margin: 16px auto 0;
}

.cta-band .btn {
  margin-top: 32px;
  position: relative;
}

/* ===== FAQ ===== */
.faq-list {
  max-width: 760px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 4px;
  text-align: left;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-lg);
  color: var(--primary);
}

.faq-question .faq-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface-alt);
  transition: transform var(--transition-fast), background var(--transition-fast);
  font-size: 1rem;
}

.faq-item.is-open .faq-icon {
  transform: rotate(45deg);
  background: var(--secondary);
  color: #fff;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-base);
}

.faq-answer p {
  padding: 0 4px 24px;
  font-size: var(--fs-body);
}

/* ===== BLOG ===== */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.blog-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.blog-card-media {
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, var(--surface-alt), var(--border));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  overflow: hidden;
}

.blog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-card-media a {
  display: block;
  width: 100%;
  height: 100%;
}

.blog-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.blog-card-date {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  font-weight: var(--fw-medium);
}

.blog-card-body h3 {
  font-size: 1.15rem;
  line-height: var(--lh-snug);
}

.blog-card-link {
  margin-top: auto;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--secondary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.blog-card-link .arrow {
  transition: transform var(--transition-fast);
}

.blog-card:hover .blog-card-link .arrow {
  transform: translateX(4px);
}

/* ===== TEAM ===== */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.team-card {
  overflow: hidden;
  text-align: left;
}

.team-photo {
  aspect-ratio: 1;
  background: linear-gradient(135deg, var(--surface-alt), var(--border));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  overflow: hidden;
}

.team-photo img {
  width: 100%; height: 100%; object-fit: cover;
}

.team-info {
  padding: 20px;
}

.team-info h4 {
  font-size: 1.05rem;
}

.team-role {
  font-size: var(--fs-small);
  color: var(--secondary);
  font-weight: var(--fw-medium);
  margin: 4px 0 10px;
}

.team-info p {
  font-size: var(--fs-xs);
}

/* Experts wide-row style */
.expert-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  padding: 32px 0;
  border-top: 1px solid var(--border);
  align-items: start;
}

.expert-row:last-child { border-bottom: 1px solid var(--border); }

.expert-photo {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--surface-alt), var(--border));
  overflow: hidden;
}

.expert-photo img { width: 100%; height: 100%; object-fit: cover; }

.expert-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.expert-tags span {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--surface-alt);
  color: var(--text-muted);
}

/* ===== VALUE / DIFFERENTIATOR PILLS (About page) ===== */
.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.value-card {
  padding: 32px 28px;
}

.value-card .value-icon {
  font-size: 1.8rem;
  margin-bottom: 18px;
}

/* ===== BADGE LIST (Waitlist benefits) ===== */
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.benefit-card {
  padding: 28px;
}

.benefit-card .feature-icon {
  margin-bottom: 16px;
}

.benefit-card h4 {
  font-size: 1rem;
  margin-bottom: 8px;
}

.benefit-card p {
  font-size: var(--fs-small);
}

.feature-pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.feature-pill-list span {
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--text);
}

/* ===== RESPONSIVE COMPONENTS ===== */
@media (max-width: 1199px) {
  .features-grid { grid-template-columns: repeat(3, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .value-grid { grid-template-columns: repeat(2, 1fr); }
  .benefit-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-band-body { gap: 40px; }
}

@media (max-width: 809px) {
  .feature-band-body {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .feature-band-illustration {
    order: -1;
  }
  .feature-band-illustration svg {
    max-width: 280px;
  }
  .feature-band-header {
    margin-bottom: 40px;
  }
  .expert-row {
    grid-template-columns: 100px 1fr;
    gap: 20px;
  }
}

@media (max-width: 600px) {
  .features-grid,
  .team-grid,
  .value-grid,
  .benefit-grid,
  .blog-grid {
    grid-template-columns: 1fr;
  }
  .cta-band {
    padding: 48px 24px;
  }
  .why-item {
    grid-template-columns: 32px 1fr;
  }
  .expert-row {
    grid-template-columns: 1fr;
  }
  .expert-photo {
    max-width: 160px;
  }
}


/* =========================================================
   WHY CHOOSE CEFAT — editorial mosaic
   Inspired by the supplied reference: blue rounded tiles,
   asymmetric composition, large typography and bottom visuals.
   ========================================================= */

.why-choose-section {
  background: #fff;
  overflow: hidden;
}

.why-choose-container {
  max-width: 1380px;
}

.why-choose-header {
  max-width: 760px;
  margin-bottom: 54px;
}

.why-choose-header h2 {
  font-size: clamp(2.25rem, 4vw, 3.05rem);
  line-height: 1.12;
  letter-spacing: -0.045em;
  color: #202020;
}

.why-choose-header p {
  margin-top: 14px;
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  color: #303030;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: minmax(310px, 1fr) minmax(310px, 1fr);
  grid-template-areas:
    "top-left top-left top-left top-mid top-mid top-mid tall tall"
    "bottom-left bottom-left bottom-mid bottom-mid bottom-mid bottom-small tall tall";
  gap: 18px;
  min-height: 638px;
}

.why-card {
  --why-blue: #2f80ed;
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 23px;
  background: var(--why-blue);
  color: #fff;
  padding: 26px 23px 22px;
  isolation: isolate;
  transform: translateZ(0);
  box-shadow: 0 10px 30px rgba(47, 128, 237, 0.07);
  transition:
    transform .55s var(--ease-entrance),
    box-shadow .55s var(--ease-entrance),
    filter .55s var(--ease-entrance);
}

.why-card::before {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  right: -95px;
  top: -105px;
  background: rgba(255,255,255,.075);
  z-index: -1;
  transition: transform .65s var(--ease-entrance);
}

.why-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 34%;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.045));
  pointer-events: none;
  z-index: -1;
}

.why-card:hover {
  transform: translateY(-7px) rotateX(1deg);
  box-shadow: 0 22px 44px rgba(47, 128, 237, 0.19);
  filter: saturate(1.04);
}

.why-card:hover::before {
  transform: scale(1.35);
}

.why-card--tall { grid-area: tall; }
.why-card--top-left { grid-area: top-left; }
.why-card--top-mid { grid-area: top-mid; }
.why-card--bottom-left { grid-area: bottom-left; }
.why-card--bottom-mid { grid-area: bottom-mid; }
.why-card--bottom-small { grid-area: bottom-small; }

.why-card-copy {
  position: relative;
  z-index: 4;
  max-width: 100%;
}

.why-card h3 {
  margin: 0;
  max-width: 470px;
  color: #fff;
  font-size: clamp(1.08rem, 1.65vw, 1.42rem);
  line-height: 1.24;
  letter-spacing: -0.025em;
}

.why-card p {
  max-width: 540px;
  margin-top: 12px;
  color: rgba(255,255,255,.96);
  font-size: clamp(.88rem, 1.15vw, 1.03rem);
  line-height: 1.45;
}

.why-card-index {
  display: block;
  margin-bottom: 12px;
  color: rgba(255,255,255,.48);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
}

.why-card--tall {
  padding: 27px 22px 20px;
}

.why-card--tall h3 {
  font-size: clamp(1.12rem, 1.55vw, 1.45rem);
}

.why-card--tall .why-card-copy {
  max-width: 290px;
}

.why-card--bottom-small h3 {
  font-size: clamp(1rem, 1.35vw, 1.18rem);
}

.why-card--bottom-small p {
  font-size: .9rem;
}

/* --- Decorative pseudo-illustrations --- */
.why-visual {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 48%;
  pointer-events: none;
  transition: transform .7s var(--ease-entrance);
}

.why-card:hover .why-visual {
  transform: translateY(-5px) scale(1.025);
}

/* Business */
.why-visual--business .why-person {
  position: absolute;
  bottom: 27px;
  width: 30px;
  height: 62px;
  border-radius: 18px 18px 10px 10px;
  background: #f8fafc;
  color: transparent;
  box-shadow: 0 -16px 0 -8px #f4b183;
}
.why-visual--business .p1 { left: 66%; transform: scale(.92); }
.why-visual--business .p2 { left: 75%; bottom: 30px; transform: scale(.72); }
.why-store {
  position: absolute;
  left: 25%;
  bottom: 25px;
  width: 95px;
  height: 65px;
  border-radius: 10px 10px 4px 4px;
  background: #d9e7fb;
  color: #2f80ed;
  font-size: 50px;
  line-height: 60px;
  text-align: center;
  box-shadow: 0 10px 0 -5px rgba(16,24,40,.14);
}
.why-box {
  position: absolute;
  left: 47%;
  bottom: 18px;
  width: 58px;
  height: 40px;
  background: #f7c77c;
  border-radius: 5px;
  color: transparent;
  transform: rotate(-8deg);
}

/* Simple / laptop */
.why-visual--simple .why-laptop {
  position: absolute;
  left: 32%;
  bottom: 20px;
  width: 150px;
  height: 93px;
  border: 9px solid #dbe8f9;
  border-bottom-width: 15px;
  border-radius: 10px;
  background: #fff;
  color: transparent;
  transform: perspective(400px) rotateY(-7deg);
  box-shadow: 0 20px 0 -12px rgba(16,24,40,.25);
}
.why-screen {
  position: absolute;
  left: 44%;
  bottom: 52px;
  width: 72px;
  height: 48px;
  border-radius: 7px;
  background: #2f80ed;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 28px;
  box-shadow: 0 8px 18px rgba(16,24,40,.16);
}
.why-cursor {
  position: absolute;
  left: 67%;
  bottom: 85px;
  font-size: 44px;
  color: #fff;
  text-shadow: 2px 4px 0 rgba(16,24,40,.16);
  transform: rotate(-12deg);
}
.why-orb {
  position: absolute;
  left: 26%;
  bottom: 74px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
}

/* Secure */
.why-visual--secure .why-shield {
  position: absolute;
  left: 39%;
  bottom: 13px;
  width: 88px;
  height: 108px;
  display: grid;
  place-items: center;
  color: #2f80ed;
  font-size: 56px;
  background: #fff;
  clip-path: polygon(50% 0, 92% 17%, 86% 67%, 50% 100%, 14% 67%, 8% 17%);
  filter: drop-shadow(0 9px 8px rgba(16,24,40,.16));
}
.why-lock {
  position: absolute;
  left: 55%;
  bottom: 43px;
  z-index: 3;
  width: 30px;
  height: 34px;
  border-radius: 7px;
  background: #2f80ed;
  color: #fff;
  font-size: 23px;
  text-align: center;
  line-height: 34px;
}
.why-user {
  position: absolute;
  left: 23%;
  bottom: 25px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #f4b183;
  color: transparent;
  box-shadow: 0 25px 0 7px #fff;
}
.why-cloud {
  position: absolute;
  right: 17%;
  bottom: 25px;
  color: rgba(255,255,255,.8);
  font-size: 60px;
}

/* Analytics */
.why-visual--analytics .why-dashboard {
  position: absolute;
  left: 38%;
  bottom: 15px;
  width: 132px;
  height: 82px;
  padding: 12px;
  border-radius: 9px;
  background: #dbe8f9;
  color: #2f80ed;
  font-size: 44px;
  line-height: 50px;
  box-shadow: 0 13px 0 -7px rgba(16,24,40,.18);
}
.why-bar {
  position: absolute;
  bottom: 18px;
  width: 13px;
  border-radius: 8px 8px 2px 2px;
  background: #fff;
}
.why-bar.b1 { left: 54%; height: 35px; }
.why-bar.b2 { left: 58%; height: 58px; }
.why-bar.b3 { left: 62%; height: 78px; }
.why-visual--analytics .p3 {
  position: absolute;
  right: 17%;
  bottom: 26px;
  width: 42px;
  height: 64px;
  border-radius: 22px 22px 10px 10px;
  background: #fff;
  color: transparent;
  box-shadow: 0 -18px 0 -8px #f4b183;
}

/* Support */
.why-visual--support .why-chat {
  position: absolute;
  left: 24%;
  bottom: 58px;
  width: 84px;
  height: 52px;
  border-radius: 12px;
  background: #243fb4;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  letter-spacing: 5px;
}
.why-headset {
  position: absolute;
  left: 48%;
  bottom: 14px;
  width: 65px;
  height: 65px;
  border: 12px solid #f4b183;
  border-bottom-color: transparent;
  border-radius: 50%;
  color: transparent;
}
.why-dot {
  position: absolute;
  left: 65%;
  bottom: 73px;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ff5e83;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}
.why-monitor {
  position: absolute;
  right: 15%;
  bottom: 12px;
  width: 64px;
  height: 50px;
  border: 6px solid #dbe8f9;
  border-radius: 7px;
  background: #fff;
  color: transparent;
}

/* Money / tall card */
.why-visual--money {
  height: 55%;
}
.why-pig {
  position: absolute;
  left: 18%;
  bottom: 62px;
  z-index: 3;
  font-size: clamp(5rem, 8vw, 8.2rem);
  line-height: 1;
  filter: drop-shadow(0 10px 6px rgba(16,24,40,.13));
  transform: rotate(-7deg);
}
.why-hand {
  position: absolute;
  right: 3%;
  bottom: 62px;
  z-index: 2;
  width: 62%;
  height: 80px;
  border-radius: 60px 18px 18px 60px;
  background: #f8f8f8;
  transform: rotate(-9deg);
  box-shadow: inset -8px -4px 0 rgba(0,0,0,.06);
}
.why-chart {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 48px;
  background:
    linear-gradient(90deg, transparent 0 10%, rgba(255,255,255,.9) 10% 12%, transparent 12% 25%, rgba(255,255,255,.9) 25% 27%, transparent 27% 40%, rgba(255,255,255,.9) 40% 42%, transparent 42%);
  opacity: .65;
}
.why-coin {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #f6c76b;
  color: #9a6616;
  font-weight: 800;
  border: 3px solid #e6ad4d;
  box-shadow: 0 7px 0 rgba(16,24,40,.08);
}
.why-coin.c1 { left: 4%; bottom: 18px; }
.why-coin.c2 { left: 13%; bottom: 42px; transform: scale(.78); }
.why-coin.c3 { right: 4%; bottom: 25px; transform: scale(.9); }

/* Staggered motion for the illustration layers */
.why-card:hover .why-coin.c1 { animation: whyFloat .9s ease-in-out infinite alternate; }
.why-card:hover .why-coin.c2 { animation: whyFloat 1.1s .1s ease-in-out infinite alternate; }
.why-card:hover .why-coin.c3 { animation: whyFloat .8s .15s ease-in-out infinite alternate; }

@keyframes whyFloat {
  from { transform: translateY(0) rotate(0deg); }
  to { transform: translateY(-9px) rotate(5deg); }
}

@media (max-width: 1100px) {
  .why-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(280px, auto));
    grid-template-areas:
      "top-left top-left top-left top-mid top-mid top-mid"
      "bottom-left bottom-left bottom-mid bottom-mid bottom-mid bottom-small"
      "tall tall tall tall tall tall";
  }
  .why-card--tall {
    min-height: 410px;
  }
  .why-visual--money {
    height: 58%;
  }
}

@media (max-width: 809px) {
  .why-choose-header {
    margin-bottom: 36px;
  }

  .why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "top-left top-left"
      "top-mid top-mid"
      "bottom-left bottom-small"
      "bottom-mid bottom-mid"
      "tall tall";
    min-height: 0;
    gap: 14px;
  }

  .why-card {
    min-height: 330px;
    padding: 23px 20px 18px;
    border-radius: 20px;
  }

  .why-card--tall {
    min-height: 430px;
  }

  .why-card h3 {
    font-size: 1.12rem;
  }

  .why-card p {
    font-size: .88rem;
  }

  .why-visual--business .p1 { left: 60%; }
  .why-visual--business .p2 { left: 70%; }
  .why-store { left: 18%; }
  .why-visual--simple .why-laptop { left: 24%; }
  .why-screen { left: 38%; }
  .why-cursor { left: 64%; }
  .why-visual--analytics .why-dashboard { left: 27%; }
}

@media (max-width: 520px) {
  .why-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "top-left"
      "top-mid"
      "bottom-left"
      "bottom-mid"
      "bottom-small"
      "tall";
  }

  .why-card,
  .why-card--tall {
    min-height: 310px;
  }

  .why-visual {
    height: 46%;
  }

  .why-visual--money {
    height: 54%;
  }

  .why-pig {
    left: 13%;
    font-size: 6rem;
  }

  .why-hand {
    right: -10%;
    width: 68%;
  }
}

/* =========================================================
   FEATURE SHOWCASE — reference-inspired two-column layout
   ========================================================= */
.features-showcase-section {
  padding-top: 76px;
  padding-bottom: 88px;
  background: #fff;
}

.features-showcase-container {
  max-width: 1080px;
}

.features-showcase-header {
  max-width: 920px;
  margin: 0 auto 52px;
  text-align: center;
}

.features-showcase-header h2 {
  margin-bottom: 12px;
  font-size: clamp(2rem, 3.4vw, 2.65rem);
  line-height: 1.12;
  letter-spacing: -0.045em;
  font-weight: 800;
}

.features-showcase-header p {
  max-width: 820px;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.45;
  color: #3f3f46;
}

.features-showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
  max-width: 1000px;
  margin: 0 auto;
}

.feature-showcase-card {
  min-height: 120px;
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #e4e4e7;
  border-radius: 16px;
  background: #fff;
  color: #202020;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(24, 24, 27, .02);
  transform: translateZ(0);
  transition: transform .35s cubic-bezier(.2,.75,.25,1),
              box-shadow .35s ease,
              border-color .35s ease;
}

.feature-showcase-card:hover {
  transform: translateY(-4px);
  border-color: #d4d4d8;
  box-shadow: 0 16px 32px rgba(24, 24, 27, .08);
}

.feature-showcase-icon {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eef0f3;
  color: #4a9fe7;
  padding: 14px;
  overflow: hidden;
}

.feature-showcase-icon svg {
  width: 84px;
  height: 84px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .96;
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}

.feature-showcase-card:hover .feature-showcase-icon svg {
  transform: translateY(-2px) scale(1.045) rotate(-1deg);
}

.feature-showcase-copy {
  min-width: 0;
  padding: 17px 18px 15px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.feature-showcase-copy h3 {
  margin: 0 0 5px;
  color: #252525;
  font-size: 17px;
  line-height: 1.22;
  letter-spacing: -.025em;
  font-weight: 750;
}

.feature-showcase-copy p {
  margin: 0;
  color: #55555d;
  font-size: 14px;
  line-height: 1.38;
}

.feature-showcase-help {
  grid-column: 2;
  border-color: rgba(47,128,237,.35);
  background: #2f80ed;
  color: #fff;
}

.feature-showcase-help .feature-showcase-icon {
  background: rgba(255,255,255,.04);
  color: #fff;
}

.feature-showcase-help .feature-showcase-copy h3,
.feature-showcase-help .feature-showcase-copy p {
  color: #fff;
}

.feature-showcase-help .feature-showcase-copy h3 {
  font-size: 18px;
}

.feature-showcase-help .feature-showcase-copy p {
  color: rgba(255,255,255,.92);
}

.feature-help-arrow {
  float: right;
  margin-left: 8px;
  font-size: 22px;
  line-height: .9;
  font-weight: 400;
  opacity: .9;
  transition: transform .3s ease;
}

.feature-showcase-help:hover .feature-help-arrow {
  transform: translateX(5px);
}

@media (max-width: 900px) {
  .features-showcase-container {
    max-width: 760px;
  }
  .features-showcase-grid {
    grid-template-columns: 1fr;
    max-width: 680px;
  }
  .feature-showcase-help {
    grid-column: auto;
  }
}

@media (max-width: 560px) {
  .features-showcase-section {
    padding-top: 56px;
    padding-bottom: 64px;
  }
  .features-showcase-header {
    margin-bottom: 32px;
  }
  .features-showcase-header h2 {
    font-size: 30px;
  }
  .features-showcase-header p {
    font-size: 14px;
  }
  .features-showcase-grid {
    gap: 12px;
  }
  .feature-showcase-card {
    min-height: 108px;
    grid-template-columns: 96px minmax(0, 1fr);
    border-radius: 14px;
  }
  .feature-showcase-icon {
    padding: 9px;
  }
  .feature-showcase-icon svg {
    width: 68px;
    height: 68px;
  }
  .feature-showcase-copy {
    padding: 13px 13px 12px 14px;
  }
  .feature-showcase-copy h3,
  .feature-showcase-help .feature-showcase-copy h3 {
    font-size: 15px;
  }
  .feature-showcase-copy p {
    font-size: 12.5px;
    line-height: 1.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .feature-showcase-card,
  .feature-showcase-icon svg,
  .feature-help-arrow {
    transition: none;
  }
}

/* ===== CEFAT SOLUTION SHOWCASE — lightweight, animated SVG layout ===== */
.solution-showcase {
  padding: 76px 0 88px;
  overflow: hidden;
}
.solution-showcase-header {
  max-width: 860px;
  margin-bottom: 54px;
}
.solution-showcase-header h2 {
  font-size: clamp(1.7rem, 2.6vw, 2rem);
  line-height: 1.35;
  letter-spacing: -0.025em;
}
.solution-showcase-header p {
  font-size: 0.875rem;
  line-height: 1.4;
  margin-top: 12px;
}
.solution-showcase-body {
  display: grid;
  grid-template-columns: minmax(420px, .92fr) minmax(480px, 1.08fr);
  gap: clamp(44px, 6vw, 86px);
  align-items: center;
}
.solution-visual-wrap {
  min-width: 0;
}
.solution-visual {
  width: min(100%, 560px);
  margin: 0 auto;
  aspect-ratio: 560 / 520;
  position: relative;
}
.solution-visual-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.solution-person { transform-origin: 315px 300px; transform-box: fill-box; animation: cefatPersonFloat 5.8s ease-in-out infinite; }
.solution-laptop { transform-origin: 280px 450px; animation: cefatLaptopFloat 5.4s ease-in-out infinite; }
.solution-chart { stroke-dasharray: 110; stroke-dashoffset: 110; animation: cefatChartDraw 3.2s ease-in-out infinite alternate; }
.solution-chart-dot { animation: cefatPulse 2.2s ease-in-out infinite; transform-origin: 386px 333px; }
.solution-float--coin { animation: cefatFloatA 4.6s ease-in-out infinite; }
.solution-float--spark { animation: cefatFloatB 3.8s ease-in-out infinite; transform-origin: 445px 96px; }
.solution-float--mini-chart { animation: cefatFloatC 5s ease-in-out infinite; }
.solution-float--coin2 { animation: cefatFloatB 4.1s ease-in-out infinite reverse; }
.solution-showcase-list { gap: 25px; }
.solution-showcase-list .feature-band-item {
  grid-template-columns: 62px 1fr;
  gap: 16px;
  transition: transform .24s ease;
}
.solution-showcase-list .feature-band-item:hover { transform: translateX(5px); }
.solution-showcase-list .feature-band-icon {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: rgba(255,255,255,.13);
  color: #fff;
  font-size: 0;
}
.solution-showcase-list .feature-band-icon svg { width: 34px; height: 34px; }
.solution-showcase-list .feature-band-text h3 {
  font-size: 1.08rem;
  line-height: 1.35;
  margin-bottom: 5px;
}
.solution-showcase-list .feature-band-text p {
  font-size: .875rem;
  line-height: 1.45;
  max-width: 610px;
}

@keyframes cefatPersonFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@keyframes cefatLaptopFloat { 0%,100%{transform:translateY(0)}50%{transform:translateY(4px)} }
@keyframes cefatChartDraw { to { stroke-dashoffset:0; } }
@keyframes cefatPulse { 0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.25);opacity:.7} }
@keyframes cefatFloatA { 0%,100%{transform:translate(0,0)}50%{transform:translate(4px,-10px)} }
@keyframes cefatFloatB { 0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(-5px,8px) rotate(5deg)} }
@keyframes cefatFloatC { 0%,100%{transform:translate(0,0)}50%{transform:translate(-5px,-8px)} }

@media (max-width: 900px) {
  .solution-showcase { padding: 62px 0 70px; }
  .solution-showcase-body { grid-template-columns: 1fr; gap: 34px; }
  .solution-visual { max-width: 430px; }
  .solution-showcase-list { max-width: 720px; margin: 0 auto; width: 100%; }
}
@media (max-width: 600px) {
  .solution-showcase { padding: 48px 0 58px; }
  .solution-showcase-header { margin-bottom: 30px; }
  .solution-showcase-header h2 { font-size: 1.35rem; line-height: 1.32; }
  .solution-showcase-header p { font-size: .78rem; margin-top: 8px; }
  .solution-visual { max-width: 330px; }
  .solution-showcase-body { gap: 28px; }
  .solution-showcase-list { gap: 20px; }
  .solution-showcase-list .feature-band-item { grid-template-columns: 46px 1fr; gap: 12px; }
  .solution-showcase-list .feature-band-icon { width: 46px; height: 46px; border-radius: 13px; }
  .solution-showcase-list .feature-band-icon svg { width: 27px; height: 27px; }
  .solution-showcase-list .feature-band-text h3 { font-size: .95rem; }
  .solution-showcase-list .feature-band-text p { font-size: .76rem; line-height: 1.4; }
}
@media (prefers-reduced-motion: reduce) {
  .solution-person,.solution-laptop,.solution-chart,.solution-chart-dot,.solution-float--coin,.solution-float--spark,.solution-float--mini-chart,.solution-float--coin2 { animation: none !important; }
  .solution-showcase-list .feature-band-item { transition: none; }
}
.solution-visual.solution-focus-1 .solution-chart-dot,
.solution-visual.solution-focus-3 .solution-chart-dot { animation-duration: .8s; }
.solution-visual.solution-focus-2 .solution-float--coin2,
.solution-visual.solution-focus-4 .solution-float--coin { transform: translateY(-8px) scale(1.04); }
.solution-visual.solution-focus-5 .solution-float--mini-chart { transform: translate(-5px,-8px) scale(1.04); }

/* Professional illustration polish */
.solution-person { filter: drop-shadow(0 10px 12px rgba(12,36,76,.08)); }
.solution-character { transform-origin: 280px 420px; }
@media (max-width:600px){ .solution-person { filter:none; } }

/* ===== CEFAT Solutions — rebuilt lightweight Lottie visual ===== */
.solution-visual {
  width: min(100%, 600px);
  aspect-ratio: 600 / 520;
  position: relative;
  margin: 0 auto;
}
.solution-lottie {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.solution-lottie svg { display:block; width:100% !important; height:100% !important; overflow:visible; }
.solution-lottie-fallback { display:none; }
.solution-lottie.is-loading { opacity:.01; }
.solution-lottie.is-ready { opacity:1; transition:opacity .25s ease; }

@media (max-width:900px){
  .solution-visual { max-width:460px; }
}
@media (max-width:600px){
  .solution-visual { max-width:340px; }
}
@media (prefers-reduced-motion: reduce){
  .solution-lottie { opacity:1 !important; }
}

/* Lottie failure state: reveal the existing lightweight fallback instead of leaving a blank visual. */
.solution-lottie.is-error { display:none; }
.solution-visual:has(.solution-lottie.is-error) .solution-lottie-fallback {
  display:block;
}

/* Modern no-Lottie fallback — dashboard-only, no human subject. */
.solution-lottie-fallback{position:absolute;inset:0;display:none;pointer-events:none;overflow:hidden}
.solution-lottie.is-error + .solution-lottie-fallback{display:block}
.fallback-orbit{position:absolute;border:1px solid rgba(255,255,255,.16);border-radius:50%;animation:fallbackOrbit 7s ease-in-out infinite}
.fallback-orbit--one{width:250px;height:250px;left:8%;top:24%}
.fallback-orbit--two{width:150px;height:150px;right:5%;top:12%;animation-delay:-2s}
.fallback-coin{position:absolute;left:7%;top:14%;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:#ffca28;color:#0d1b3e;font-weight:900;font-size:1.1rem;box-shadow:0 14px 30px rgba(8,31,72,.12);animation:fallbackFloat 4.8s ease-in-out infinite}
.fallback-dashboard{position:absolute;left:17%;top:18%;width:68%;height:58%;padding:24px;border-radius:26px;background:rgba(245,250,255,.96);box-shadow:0 28px 60px rgba(7,35,78,.18);transform:rotate(-2deg);animation:fallbackDashboard 6s ease-in-out infinite}
.fallback-accent{height:7px;width:58%;border-radius:99px;background:#1db9a6;margin-bottom:20px}
.fallback-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.fallback-kpis i{height:42px;border-radius:12px;background:#dfeaff;position:relative;overflow:hidden}
.fallback-kpis i:nth-child(2){background:#e0f6f1}.fallback-kpis i:nth-child(3){background:#fff1bd}
.fallback-kpis i:after{content:"";position:absolute;left:10px;bottom:10px;width:38%;height:5px;border-radius:5px;background:#327ff0}
.fallback-kpis i:nth-child(2):after{background:#1db9a6}.fallback-kpis i:nth-child(3):after{background:#f1b800}
.fallback-chart{height:52%;position:relative;border-radius:18px;background:#fff;padding:18px;overflow:hidden}
.fallback-bars{position:absolute;left:20px;bottom:18px;height:70%;display:flex;align-items:flex-end;gap:9px}.fallback-bars i{display:block;width:22px;border-radius:7px 7px 3px 3px;background:#68b5f8;animation:fallbackBars 3.4s ease-in-out infinite alternate}.fallback-bars i:nth-child(2){height:55%;background:#327ff0;animation-delay:.15s}.fallback-bars i:nth-child(3){height:76%;background:#1db9a6;animation-delay:.3s}.fallback-bars i:nth-child(4){height:92%;background:#ffca28;animation-delay:.45s}.fallback-bars i:first-child{height:34%}
.fallback-trend{position:absolute;left:48%;top:53%;width:42%;height:4px;border-radius:4px;background:#327ff0;transform:rotate(-18deg);box-shadow:26px -12px 0 -1px #327ff0,52px -23px 0 -1px #327ff0;transform-origin:left center}
.fallback-chart b{position:absolute;right:7%;top:23%;width:18px;height:18px;border-radius:50%;background:#ffca28;animation:fallbackPulse 2.1s ease-in-out infinite}
.fallback-check{position:absolute;right:7%;top:34%;width:58px;height:58px;border-radius:18px;background:#1db9a6;color:#fff;display:grid;place-items:center;font-weight:900;font-size:1.7rem;box-shadow:0 16px 32px rgba(8,31,72,.14);animation:fallbackFloat 4.2s ease-in-out infinite reverse}
.fallback-doc{position:absolute;right:4%;bottom:14%;width:78px;height:62px;border-radius:16px;background:rgba(255,255,255,.95);box-shadow:0 16px 32px rgba(8,31,72,.12);padding:17px 15px;animation:fallbackFloat 5.2s ease-in-out infinite}.fallback-doc i{display:block;height:6px;border-radius:5px;background:#327ff0;margin-bottom:9px}.fallback-doc i:last-child{width:62%;background:#1db9a6}
@keyframes fallbackFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes fallbackDashboard{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(-1deg) translateY(-5px)}}
@keyframes fallbackBars{from{transform:scaleY(.94);transform-origin:bottom}to{transform:scaleY(1.03);transform-origin:bottom}}
@keyframes fallbackPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
@keyframes fallbackOrbit{0%,100%{transform:rotate(0deg) scale(1)}50%{transform:rotate(8deg) scale(1.03)}}
@media(max-width:600px){
  .solution-lottie-fallback{transform:scale(.94)}
  .fallback-dashboard{left:12%;width:76%;padding:17px;border-radius:21px}
  .fallback-coin{width:48px;height:48px;font-size:.85rem}.fallback-check{width:46px;height:46px;border-radius:14px;font-size:1.3rem}.fallback-doc{width:62px;height:50px}
  .fallback-bars i{width:16px}
}
@media(prefers-reduced-motion:reduce){.fallback-orbit,.fallback-coin,.fallback-dashboard,.fallback-bars i,.fallback-chart b,.fallback-check,.fallback-doc{animation:none!important}}

/* Modern Lottie interaction state */
.solution-visual.is-interactive .solution-lottie svg { filter: drop-shadow(0 12px 24px rgba(7,35,78,.10)); }
.solution-visual.is-interactive .solution-lottie { transform: translateY(-2px); transition: transform .28s ease, filter .28s ease; }
@media (prefers-reduced-motion: reduce){ .solution-visual.is-interactive .solution-lottie{transform:none} }
/* ===== CEFAT SOLUTIONS RICH ILLUSTRATION ===== */
.solution-visual{width:min(100%,600px);aspect-ratio:600/520;position:relative;margin:0 auto}
.solution-lottie{position:absolute;inset:0;width:100%;height:100%;z-index:2}.solution-lottie svg{width:100%!important;height:100%!important;overflow:visible;display:block}
.solution-lottie-fallback{position:absolute;inset:0;z-index:1;display:none}.solution-lottie.is-error + .solution-lottie-fallback{display:block}.solution-fallback-rich{font-size:0}
.rf-dashboard{position:absolute;left:17%;top:23%;width:66%;height:58%;background:rgba(255,255,255,.97);border-radius:28px;box-shadow:0 18px 45px rgba(5,30,75,.16);padding:8%;animation:rfFloat 5.8s ease-in-out infinite}.rf-top{height:11%;border-radius:10px;background:#dce9ff;display:flex;align-items:center;padding:0 6%;gap:5%}.rf-top b{width:13px;height:13px;border-radius:50%;background:#2f80ed}.rf-top em{width:8px;height:8px;border-radius:50%;background:#1db9a6}.rf-top em:last-child{background:#ffca28}.rf-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:5%;margin-top:8%}.rf-kpis span{height:42px;border-radius:11px;background:#eef4ff;position:relative;overflow:hidden}.rf-kpis span:after{content:"";position:absolute;left:18%;top:50%;width:52%;height:5px;border-radius:5px;background:#2f80ed}.rf-kpis span:nth-child(2):after{background:#1db9a6}.rf-kpis span:nth-child(3):after{background:#ffca28}.rf-chart{position:relative;margin-top:7%;height:42%;border-radius:15px;background:#f6f9ff;overflow:hidden;padding:7%;display:flex;align-items:flex-end;gap:5%}.rf-chart i{display:block;width:10%;border-radius:6px 6px 2px 2px;background:#54aaf4;animation:rfBar 2.4s ease-in-out infinite}.rf-chart i:nth-child(1){height:30%}.rf-chart i:nth-child(2){height:48%;background:#2f80ed;animation-delay:.12s}.rf-chart i:nth-child(3){height:66%;background:#1db9a6;animation-delay:.24s}.rf-chart i:nth-child(4){height:84%;background:#ffca28;animation-delay:.36s}.rf-chart b{position:absolute;left:43%;bottom:28%;width:42%;height:34%;border-top:5px solid #2f80ed;border-radius:50%;transform:rotate(-18deg)}.rf-chart strong{position:absolute;right:8%;top:16%;width:12px;height:12px;border-radius:50%;background:#ffca28;animation:rfPulse 1.5s infinite}.rf-mini{position:absolute;right:-11%;bottom:-13%;width:30%;height:23%;background:#eef6ff;border-radius:16px;box-shadow:0 12px 30px rgba(5,30,75,.12);padding:8%;animation:rfMini 4.5s ease-in-out infinite}.rf-mini b{display:block;height:5px;width:58%;background:#1db9a6;border-radius:4px;margin-bottom:13px}.rf-mini i{display:block;height:4px;width:75%;background:#9db9dd;border-radius:4px;margin:7px 0}.rf-mini i:last-child{width:48%;background:#2f80ed}.rf-coin{position:absolute;display:grid;place-items:center;border-radius:50%;font-weight:800;font-family:Arial,sans-serif}.rf-coin-a{left:8%;top:15%;width:66px;height:66px;background:#ffca28;color:#0d1b3e;animation:rfCoin 4.8s ease-in-out infinite}.rf-coin-b{right:8%;top:43%;width:42px;height:42px;background:#1db9a6;color:white;animation:rfCoin 4.1s ease-in-out infinite reverse}.rf-doc{position:absolute;left:6%;bottom:15%;width:95px;height:118px;border-radius:18px;background:#fff;box-shadow:0 14px 28px rgba(5,30,75,.13);padding:17px;transform:rotate(-7deg);animation:rfDoc 5.2s ease-in-out infinite}.rf-doc span{display:block;width:42px;height:8px;border-radius:4px;background:#2f80ed;margin-bottom:18px}.rf-doc i{display:block;width:62px;height:6px;border-radius:4px;background:#dce7f6;margin:12px 0}.rf-doc i:last-child{width:38px;background:#1db9a6}.rf-check{position:absolute;right:11%;top:16%;width:58px;height:58px;border-radius:50%;background:#1db9a6;color:white;display:grid;place-items:center;font-size:31px;font-weight:800;box-shadow:0 12px 24px rgba(5,30,75,.14);animation:rfPulse 2.2s infinite}.rf-orbit{position:absolute;border:2px solid rgba(255,255,255,.28);border-radius:50%;animation:rfOrbit 8s linear infinite}.rf-orbit-a{left:4%;top:32%;width:180px;height:180px}.rf-orbit-b{right:2%;bottom:8%;width:140px;height:140px;animation-direction:reverse}.rf-spark{position:absolute;color:white;font-size:24px;animation:rfSpark 2.6s ease-in-out infinite}.rf-spark-a{right:4%;top:8%}.rf-spark-b{left:22%;bottom:8%;animation-delay:.8s}
@keyframes rfFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}@keyframes rfBar{0%,100%{transform:scaleY(.96);transform-origin:bottom}50%{transform:scaleY(1.06);transform-origin:bottom}}@keyframes rfPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.82}}@keyframes rfMini{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes rfCoin{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-12px) rotate(5deg)}}@keyframes rfDoc{0%,100%{transform:rotate(-7deg) translateY(0)}50%{transform:rotate(-4deg) translateY(-8px)}}@keyframes rfOrbit{to{transform:rotate(360deg)}}@keyframes rfSpark{0%,100%{transform:scale(.8) rotate(0);opacity:.65}50%{transform:scale(1.15) rotate(12deg);opacity:1}}
.solution-visual.is-interactive .rf-dashboard{animation-duration:3.4s}.solution-visual.is-interactive .rf-coin-a{animation-duration:2.8s}.solution-visual.is-interactive .rf-check{animation-duration:1.1s}.solution-focus-1 .rf-chart strong,.solution-focus-3 .rf-chart strong{animation-duration:.55s}.solution-focus-2 .rf-doc{transform:rotate(-2deg) translateY(-7px) scale(1.03)}.solution-focus-4 .rf-coin-a{transform:translateY(-8px) scale(1.06)}.solution-focus-5 .rf-mini{transform:translateY(-10px) scale(1.04)}
@media(max-width:600px){.solution-visual{max-width:350px}.rf-coin-a{width:48px;height:48px;font-size:13px}.rf-coin-b{width:32px;height:32px}.rf-doc{width:68px;height:84px;padding:12px}.rf-doc span{width:30px;height:5px;margin-bottom:10px}.rf-doc i{width:42px;height:4px;margin:8px 0}.rf-check{width:44px;height:44px;font-size:23px}.rf-orbit-a{width:130px;height:130px}.rf-orbit-b{width:100px;height:100px}.rf-spark{font-size:17px}}
@media(prefers-reduced-motion:reduce){.rf-dashboard,.rf-chart i,.rf-chart strong,.rf-mini,.rf-coin,.rf-doc,.rf-check,.rf-orbit,.rf-spark{animation:none!important}}


/* =========================================================
   CEFAT — THE EVERYDAY FINANCE STRUGGLE
   Distinct warm problem-state visual: scattered tools -> month-end pressure.
   ========================================================= */
.feature-band--struggle{position:relative;overflow:hidden;background:radial-gradient(circle at 14% 18%,rgba(255,190,24,.12),transparent 25%),radial-gradient(circle at 84% 78%,rgba(255,102,82,.10),transparent 28%),#101828;padding:clamp(76px,8vw,108px) 0 clamp(82px,9vw,118px)}
.feature-band--struggle:before,.feature-band--struggle:after{content:"";position:absolute;border-radius:50%;pointer-events:none}.feature-band--struggle:before{width:340px;height:340px;left:-180px;bottom:-160px;background:rgba(255,190,24,.07)}.feature-band--struggle:after{width:300px;height:300px;right:-150px;top:-140px;background:rgba(47,128,237,.08)}
.feature-band--struggle .feature-band-header{max-width:780px;margin-bottom:56px;position:relative;z-index:2}.feature-band--struggle .eyebrow--light{color:#ffca28}.feature-band--struggle .feature-band-header h2{letter-spacing:-.035em}.feature-band--struggle .feature-band-header p{color:rgba(255,255,255,.68)}
.feature-band--struggle .feature-band-body{grid-template-columns:minmax(420px,.96fr) minmax(0,1.04fr);gap:70px;position:relative;z-index:2}.feature-band--struggle .feature-band-list{gap:14px}.feature-band--struggle .feature-band-item{grid-template-columns:46px minmax(0,1fr);gap:15px;padding:17px 18px 17px 14px;border:1px solid rgba(255,255,255,.09);border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.035));box-shadow:0 10px 26px rgba(0,0,0,.10);transition:transform .35s var(--ease-out),border-color .35s ease,background .35s ease}.feature-band--struggle .feature-band-item:hover{transform:translateX(6px);border-color:rgba(255,202,40,.35);background:linear-gradient(135deg,rgba(255,255,255,.11),rgba(255,255,255,.045))}.feature-band--struggle .feature-band-icon{width:46px;height:46px;border-radius:14px;background:rgba(255,202,40,.12);border:1px solid rgba(255,202,40,.16);font-size:1.25rem}.feature-band--struggle .feature-band-text h3{font-size:1rem;margin-bottom:4px}.feature-band--struggle .feature-band-text p{font-size:.79rem;line-height:1.48;color:rgba(255,255,255,.64)}
.problem-illustration{min-height:470px}.problem-visual{width:min(100%,620px);aspect-ratio:620/470;position:relative;margin:auto;isolation:isolate}.problem-orbit{position:absolute;border:1px dashed rgba(255,255,255,.12);border-radius:50%;animation:problemOrbit 18s linear infinite}.problem-orbit--a{width:360px;height:360px;left:130px;top:55px}.problem-orbit--b{width:230px;height:230px;left:195px;top:120px;border-color:rgba(255,202,40,.15);animation-direction:reverse;animation-duration:13s}.problem-connectors{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}.problem-connectors path{fill:none;stroke:rgba(255,202,40,.32);stroke-width:2;stroke-dasharray:7 8;animation:problemDash 3.8s linear infinite}.problem-card,.problem-center,.problem-noise{position:absolute;z-index:3}.problem-card{border-radius:17px;background:rgba(255,255,255,.96);color:#101828;box-shadow:0 18px 40px rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.5)}
.problem-card--sheet{left:4%;top:9%;width:178px;height:148px;padding:18px;transform:rotate(-7deg);animation:problemFloatA 5.6s ease-in-out infinite}.problem-card--sheet .problem-card-kicker{display:block;font-size:9px;font-weight:800;letter-spacing:.12em;color:#6b7280;margin-bottom:13px}.problem-card--sheet b,.problem-card--sheet i{display:block;height:7px;border-radius:5px;background:#d9e3f2;margin:9px 0;width:92%}.problem-card--sheet b{width:56%;background:#2f80ed}.problem-card--sheet i.short{width:65%}.problem-mini-bars{display:flex;align-items:flex-end;gap:7px;height:36px;margin-top:13px}.problem-mini-bars em{width:13px;border-radius:4px 4px 2px 2px;background:#54aaf4;height:35%;animation:problemBars 2.2s ease-in-out infinite}.problem-mini-bars em:nth-child(2){height:58%;background:#2f80ed;animation-delay:.15s}.problem-mini-bars em:nth-child(3){height:78%;background:#1db9a6;animation-delay:.3s}.problem-mini-bars em:nth-child(4){height:48%;background:#ffca28;animation-delay:.45s}
.problem-card--chat{right:2%;top:10%;width:178px;min-height:105px;padding:17px 16px;transform:rotate(5deg);animation:problemFloatB 5.1s ease-in-out infinite}.problem-chat-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#ffca28;margin-right:4px}.problem-chat-dot:nth-child(2){background:#2f80ed}.problem-chat-dot:nth-child(3){background:#1db9a6}.problem-card--chat strong{display:block;font-size:15px;margin-top:12px}.problem-card--chat small{display:block;color:#8a8c94;font-size:9px;margin-top:7px}
.problem-card--tax{left:3%;bottom:7%;width:176px;min-height:94px;padding:16px;display:flex;align-items:center;gap:13px;transform:rotate(5deg);animation:problemFloatB 5.8s ease-in-out infinite reverse}.problem-tax-symbol{display:grid;place-items:center;width:47px;height:47px;border-radius:14px;background:#fff2c7;color:#b77900;font-size:24px;font-weight:800}.problem-card--tax b{display:block;font-size:15px}.problem-card--tax small{display:block;color:#8a8c94;font-size:9px;margin-top:5px}
.problem-card--files{right:2%;bottom:8%;width:178px;min-height:102px;padding:15px 16px;transform:rotate(-5deg);animation:problemFloatA 5.3s ease-in-out infinite reverse}.problem-file{display:inline-grid;place-items:center;width:36px;height:39px;border-radius:9px;background:#ffe8e5;color:#d9574d;font-size:8px;font-weight:800;margin-right:6px;box-shadow:0 4px 10px rgba(16,24,40,.08)}.problem-file--blue{background:#e8f1ff;color:#2f80ed}.problem-file--yellow{background:#fff5d9;color:#b77900}.problem-card--files b{display:block;font-size:13px;margin-top:13px}
.problem-center{left:50%;top:50%;transform:translate(-50%,-50%);width:250px;min-height:178px;padding:23px 24px 21px;border-radius:28px;background:linear-gradient(145deg,#17233a,#0e1627);border:1px solid rgba(255,255,255,.14);box-shadow:0 26px 55px rgba(0,0,0,.28);animation:problemCenterFloat 5.4s ease-in-out infinite;z-index:5}.problem-center-ring{position:absolute;inset:-10px;border-radius:34px;border:1px solid rgba(255,202,40,.22);animation:problemPulse 2.8s ease-in-out infinite}.problem-calendar{display:flex;align-items:center;justify-content:space-between;gap:10px}.problem-calendar b{font-size:11px;line-height:1.05;letter-spacing:.1em;color:#dce7f6}.problem-calendar strong{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#ffca28;color:#101828;font-size:20px}.problem-center-copy{margin-top:22px}.problem-center-copy b{display:block;color:#fff;font-size:18px;letter-spacing:-.02em}.problem-center-copy small{display:block;color:rgba(255,255,255,.58);font-size:10px;line-height:1.45;margin-top:6px;max-width:190px}
.problem-noise{display:grid;place-items:center;border-radius:50%;font-weight:800;z-index:6;animation:problemNoise 3.6s ease-in-out infinite}.problem-noise--1{left:46%;top:5%;width:30px;height:30px;background:#ff6b5f;color:white;transform:rotate(-8deg)}.problem-noise--2{right:43%;bottom:1%;width:27px;height:27px;background:#ffca28;color:#101828;animation-delay:.7s}.problem-noise--3{left:43%;top:42%;width:34px;height:34px;background:#1db9a6;color:white;font-size:10px;animation-delay:1.1s}
@keyframes problemFloatA{0%,100%{transform:translate3d(0,0,0) rotate(-7deg)}50%{transform:translate3d(0,-8px,0) rotate(-4deg)}}@keyframes problemFloatB{0%,100%{transform:translate3d(0,0,0) rotate(5deg)}50%{transform:translate3d(0,-9px,0) rotate(2deg)}}@keyframes problemCenterFloat{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 6px))}}@keyframes problemBars{0%,100%{transform:scaleY(.9);transform-origin:bottom}50%{transform:scaleY(1.12);transform-origin:bottom}}@keyframes problemPulse{0%,100%{transform:scale(.98);opacity:.5}50%{transform:scale(1.025);opacity:1}}@keyframes problemNoise{0%,100%{transform:scale(.9) rotate(-4deg);opacity:.7}50%{transform:scale(1.08) rotate(4deg);opacity:1}}@keyframes problemOrbit{to{transform:rotate(360deg)}}@keyframes problemDash{to{stroke-dashoffset:-30}}

/* HERO — purposeful light sweep on the CEFAT word */
.hero h1 .highlight{display:inline-block;overflow:visible;text-shadow:0 0 0 rgba(47,128,237,0)}.hero h1 .highlight::before{content:"";position:absolute;width:7px;height:7px;right:-9px;top:18%;border-radius:50%;background:#ffca28;box-shadow:0 0 0 5px rgba(255,202,40,.10),0 0 22px rgba(255,202,40,.7);opacity:.25;animation:cefatWordBeacon 4.8s ease-in-out infinite;pointer-events:none}.hero h1 .highlight::after{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;transform:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08) 20%,rgba(255,255,255,.9) 50%,rgba(255,255,255,.08) 80%,transparent);filter:blur(.5px);opacity:0;animation:cefatWordShine 5.5s cubic-bezier(.3,.6,.3,1) infinite;pointer-events:none}@keyframes cefatWordShine{0%,20%{left:-60%;opacity:0}30%{opacity:1}62%{left:120%;opacity:.9}72%,100%{left:120%;opacity:0}}@keyframes cefatWordBeacon{0%,58%,100%{transform:scale(.72);opacity:.18}66%{transform:scale(1.18);opacity:1}74%{transform:scale(.9);opacity:.38}}

/* Actual Lottie mount + visible fallback while runtime initializes. */
.solution-lottie{position:absolute;inset:0;width:100%;height:100%;z-index:4;opacity:0;pointer-events:none}.solution-lottie.is-loading{opacity:.02}.solution-lottie.is-loading + .solution-lottie-fallback{display:block}.solution-lottie.is-ready{opacity:1;transition:opacity .35s ease}.solution-lottie.is-ready + .solution-lottie-fallback{display:none}.solution-lottie svg{width:100%!important;height:100%!important;display:block;overflow:visible}.solution-visual.is-interactive .solution-lottie{filter:drop-shadow(0 18px 28px rgba(4,25,60,.12))}

@media(max-width:809px){.feature-band--struggle{padding:68px 0 74px}.feature-band--struggle .feature-band-body{grid-template-columns:1fr;gap:34px}.feature-band--struggle .feature-band-illustration{order:-1;min-height:370px}.problem-visual{max-width:520px}.problem-card--sheet,.problem-card--chat{transform:scale(.9) rotate(-7deg);transform-origin:center}.problem-card--chat{transform:scale(.9) rotate(5deg)}.problem-card--tax{transform:scale(.9) rotate(5deg)}.problem-card--files{transform:scale(.9) rotate(-5deg)}}
@media(max-width:600px){.feature-band--struggle .feature-band-header{margin-bottom:34px}.feature-band--struggle .feature-band-header h2{font-size:1.55rem}.feature-band--struggle .feature-band-header p{font-size:.78rem}.feature-band--struggle .feature-band-item{padding:14px;grid-template-columns:42px minmax(0,1fr);gap:12px}.feature-band--struggle .feature-band-icon{width:42px;height:42px;border-radius:12px;font-size:1.1rem}.feature-band--struggle .feature-band-text h3{font-size:.9rem}.feature-band--struggle .feature-band-text p{font-size:.72rem}.problem-illustration{min-height:315px}.problem-visual{width:100%;max-width:390px}.problem-card--sheet{left:0;top:8%;width:130px;height:112px;padding:12px}.problem-card--chat{right:0;top:9%;width:130px;min-height:82px;padding:12px}.problem-card--tax{left:0;bottom:5%;width:132px;min-height:72px;padding:11px}.problem-card--files{right:0;bottom:5%;width:132px;min-height:76px;padding:11px}.problem-card--chat strong,.problem-card--files b,.problem-card--tax b{font-size:11px}.problem-card--chat small,.problem-card--tax small{font-size:7px}.problem-file{width:27px;height:30px;font-size:6px;margin-right:3px}.problem-tax-symbol{width:34px;height:34px;border-radius:9px;font-size:18px}.problem-center{width:174px;min-height:128px;padding:16px 17px;border-radius:20px}.problem-center-copy{margin-top:14px}.problem-center-copy b{font-size:13px}.problem-center-copy small{font-size:8px}.problem-calendar b{font-size:8px}.problem-calendar strong{width:29px;height:29px;border-radius:9px;font-size:15px}.problem-center-ring{inset:-7px;border-radius:25px}.problem-orbit--a{width:250px;height:250px;left:70px;top:35px}.problem-orbit--b{width:160px;height:160px;left:115px;top:80px}.problem-noise--1{left:43%;top:2%;width:24px;height:24px}.problem-noise--2{right:41%;bottom:0;width:22px;height:22px}.problem-noise--3{left:42%;top:42%;width:27px;height:27px;font-size:8px}}
@media(prefers-reduced-motion:reduce){.problem-orbit,.problem-connectors path,.problem-card,.problem-center,.problem-mini-bars em,.problem-center-ring,.problem-noise,.hero h1 .highlight::before,.hero h1 .highlight::after{animation:none!important}}

/* =========================================================
   CEFAT — SOLUTIONS STORY ILLUSTRATION
   Visual language: one transaction -> one connected financial system -> growth.
   Built with lightweight HTML/CSS/SVG rather than a remote Lottie runtime.
   ========================================================= */
.solution-showcase-body{align-items:center}
.solution-visual-wrap{min-width:0}
.solution-scene{
  width:min(100%,620px);aspect-ratio:620/500;position:relative;margin:0 auto;
  isolation:isolate;overflow:visible;
}
.solution-scene:before{
  content:"";position:absolute;inset:7% 10%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.10),rgba(255,255,255,0) 66%);
  filter:blur(2px);z-index:0;pointer-events:none;
}
.solution-scene-orbit{position:absolute;border:1px dashed rgba(255,255,255,.16);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);z-index:0;pointer-events:none}
.solution-scene-orbit--outer{width:430px;height:430px;animation:solutionOrbit 22s linear infinite}
.solution-scene-orbit--inner{width:300px;height:300px;border-color:rgba(29,185,166,.22);animation:solutionOrbitReverse 15s linear infinite}
.solution-scene-connectors{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible;pointer-events:none}
.solution-scene-connectors .connector{fill:none;stroke:rgba(255,255,255,.22);stroke-width:2;stroke-dasharray:5 8;animation:solutionConnector 3.8s linear infinite}
.solution-scene-connectors .connector--growth{stroke:rgba(255,202,40,.40);animation-duration:2.8s}
.solution-scene-connectors .connector-dot{fill:#fff;filter:drop-shadow(0 0 6px rgba(255,255,255,.75));opacity:.8}
.solution-node{
  position:absolute;z-index:4;display:flex;align-items:center;gap:10px;width:178px;min-height:66px;
  padding:10px 12px;border:1px solid rgba(255,255,255,.18);border-radius:18px;
  background:rgba(255,255,255,.96);color:#10203b;box-shadow:0 18px 38px rgba(7,35,78,.16);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease,filter .3s ease;
  animation:solutionNodeFloat 5.4s ease-in-out infinite;
}
.solution-node:hover,.solution-node.is-focus{transform:translateY(-7px) scale(1.045);border-color:rgba(255,202,40,.85);box-shadow:0 22px 44px rgba(7,35,78,.24);z-index:8}
.solution-node-icon{width:38px;height:38px;flex:0 0 38px;border-radius:12px;display:grid;place-items:center;background:#e9f3ff;color:#2f80ed;font-size:19px;font-weight:900}
.solution-node b{display:block;font-size:10px;letter-spacing:.08em;line-height:1.1}
.solution-node small{display:block;margin-top:4px;color:#64748b;font-size:8px;line-height:1.25}
.solution-node--growth{left:50%;top:1%;transform:translateX(-50%);width:190px;justify-content:center;animation-delay:-.8s}
.solution-node--growth .solution-node-icon{background:#fff4c7;color:#d99d00}
.solution-node--ledger{left:1%;top:18%;transform:rotate(-4deg);animation-delay:-1.4s}
.solution-node--approval{right:1%;top:18%;transform:rotate(4deg);animation-delay:-2.2s}
.solution-node--tax{left:1%;bottom:15%;transform:rotate(4deg);animation-delay:-.5s}
.solution-node--tax .solution-node-icon{background:#fff0e9;color:#e25d4f}
.solution-node--secure{right:1%;bottom:15%;transform:rotate(-4deg);animation-delay:-3s}
.solution-node--secure .solution-node-icon{background:#e2f8f4;color:#119f8c}
.solution-core{
  position:absolute;left:50%;top:50%;width:258px;height:190px;transform:translate(-50%,-50%);z-index:5;
  padding:17px 18px;border-radius:28px;background:linear-gradient(145deg,#fdfefe,#eaf3ff);
  border:1px solid rgba(255,255,255,.85);box-shadow:0 28px 60px rgba(5,30,70,.25);overflow:hidden;
  animation:solutionCoreFloat 5.6s ease-in-out infinite;
}
.solution-core:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.65),transparent 45%);pointer-events:none}
.solution-core-top{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}
.solution-core-top span{font-size:13px;font-weight:900;letter-spacing:-.02em;color:#0d1b3e}
.solution-core-top em{font-style:normal;font-size:7px;font-weight:900;letter-spacing:.08em;padding:5px 7px;border-radius:99px;background:#dff8f3;color:#0f9c88}
.solution-core-kpi{display:flex;align-items:end;gap:7px;margin-top:10px;position:relative;z-index:2}
.solution-core-kpi small{position:absolute;top:-2px;left:0;font-size:7px;color:#7b8798}
.solution-core-kpi strong{font-size:19px;color:#10203b;line-height:1;margin-top:15px;letter-spacing:-.04em}
.solution-core-kpi b{font-size:8px;color:#139e8c;margin-bottom:1px}
.solution-core-chart{height:68px;margin-top:13px;border-radius:14px;background:#fff;display:flex;align-items:end;gap:7px;padding:10px 12px 8px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(13,27,62,.04)}
.solution-core-chart i{display:block;width:13px;height:var(--h);border-radius:5px 5px 2px 2px;background:#68b5f8;transform-origin:bottom;animation:solutionBars 2.5s ease-in-out infinite}
.solution-core-chart i:nth-child(2){background:#3e8df1;animation-delay:.12s}.solution-core-chart i:nth-child(3){background:#1db9a6;animation-delay:.24s}.solution-core-chart i:nth-child(4){background:#5caef5;animation-delay:.36s}.solution-core-chart i:nth-child(5){background:#2f80ed;animation-delay:.48s}.solution-core-chart i:nth-child(6){background:#ffca28;animation-delay:.6s}
.solution-core-chart span{position:absolute;left:8%;right:7%;top:24px;height:2px;background:#2f80ed;transform:rotate(-11deg);transform-origin:left center;box-shadow:45px -9px 0 -1px #2f80ed,90px -19px 0 -1px #2f80ed,135px -31px 0 -1px #2f80ed;opacity:.8;animation:solutionTrend 2.8s ease-in-out infinite}
.solution-core-footer{display:flex;justify-content:space-between;margin-top:8px;position:relative;z-index:2;color:#748094;font-size:6px;font-weight:800}
.solution-core-pulse{position:absolute;width:16px;height:16px;right:18px;top:54px;border-radius:50%;background:#ffca28;box-shadow:0 0 0 0 rgba(255,202,40,.45);animation:solutionPulse 2.1s ease-out infinite}
.solution-float{position:absolute;z-index:6;display:grid;place-items:center;font-weight:900;box-shadow:0 12px 24px rgba(6,30,70,.15);animation:solutionFloat 4.6s ease-in-out infinite}
.solution-float--coin{left:18%;top:10%;width:48px;height:48px;border-radius:50%;background:#ffca28;color:#0d1b3e;font-size:12px;animation-delay:-1s}
.solution-float--check{right:18%;bottom:8%;width:40px;height:40px;border-radius:13px;background:#1db9a6;color:white;font-size:18px;animation-delay:-2.4s}
.solution-float--spark{left:20%;bottom:11%;color:#fff;font-size:24px;box-shadow:none;background:transparent;animation-duration:3.4s}
.solution-float--doc{right:17%;top:7%;width:42px;height:50px;border-radius:10px;background:#fff;color:#2f80ed;font-size:8px;transform:rotate(8deg);animation-duration:5.2s}
.solution-scene.has-focus .solution-node:not(.is-focus){opacity:.62;filter:saturate(.72)}
.solution-scene.has-focus .solution-core{box-shadow:0 30px 70px rgba(5,30,70,.32)}
.solution-scene.has-focus .solution-scene-connectors .connector{stroke:rgba(255,255,255,.13)}
.solution-scene.has-focus .solution-node.is-focus{opacity:1;filter:none}
.solution-scene[data-focus="1"] .connector--ledger,.solution-scene[data-focus="2"] .connector--approval,.solution-scene[data-focus="3"] .connector--tax,.solution-scene[data-focus="4"] .connector--secure,.solution-scene[data-focus="5"] .connector--growth{stroke:#ffca28;stroke-width:3;stroke-dasharray:4 6}
@keyframes solutionOrbit{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes solutionOrbitReverse{to{transform:translate(-50%,-50%) rotate(-360deg)}}
@keyframes solutionConnector{to{stroke-dashoffset:-52}}
@keyframes solutionNodeFloat{0%,100%{margin-top:0}50%{margin-top:-6px}}
@keyframes solutionCoreFloat{0%,100%{margin-top:0}50%{margin-top:-5px}}
@keyframes solutionBars{0%,100%{transform:scaleY(.92)}50%{transform:scaleY(1.08)}}
@keyframes solutionTrend{0%,100%{opacity:.55;transform:rotate(-11deg) scaleX(.94)}50%{opacity:1;transform:rotate(-11deg) scaleX(1.02)}}
@keyframes solutionPulse{0%{box-shadow:0 0 0 0 rgba(255,202,40,.48);transform:scale(.92)}65%{box-shadow:0 0 0 11px rgba(255,202,40,0);transform:scale(1)}100%{box-shadow:0 0 0 0 rgba(255,202,40,0);transform:scale(.92)}}
@keyframes solutionFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-9px) rotate(3deg)}}

.solution-showcase-list .feature-band-item.is-solution-focus{transform:translateX(8px);background:rgba(255,255,255,.17);border-color:rgba(255,202,40,.38)}
@media(max-width:900px){
  .solution-scene{max-width:560px}.solution-showcase-body{gap:42px}
}
@media(max-width:600px){
  .solution-scene{max-width:390px;aspect-ratio:390/390}.solution-scene-orbit--outer{width:310px;height:310px}.solution-scene-orbit--inner{width:220px;height:220px}
  .solution-node{width:132px;min-height:54px;padding:8px 9px;gap:7px;border-radius:14px}.solution-node-icon{width:30px;height:30px;flex-basis:30px;border-radius:9px;font-size:14px}.solution-node b{font-size:7px}.solution-node small{font-size:6px}.solution-node--growth{width:150px;top:0}.solution-node--ledger{left:0;top:17%}.solution-node--approval{right:0;top:17%}.solution-node--tax{left:0;bottom:12%}.solution-node--secure{right:0;bottom:12%}
  .solution-core{width:184px;height:145px;padding:12px 13px;border-radius:20px}.solution-core-top span{font-size:10px}.solution-core-top em{font-size:5px;padding:4px 5px}.solution-core-kpi{margin-top:8px}.solution-core-kpi strong{font-size:14px;margin-top:13px}.solution-core-kpi b{font-size:6px}.solution-core-chart{height:50px;margin-top:8px;padding:7px 8px;gap:4px}.solution-core-chart i{width:9px}.solution-core-chart span{top:18px}.solution-core-footer{margin-top:5px;font-size:5px}.solution-core-pulse{width:11px;height:11px;right:12px;top:40px}.solution-float--coin{width:35px;height:35px;left:17%;top:8%;font-size:9px}.solution-float--doc{width:31px;height:38px;right:16%;top:7%;font-size:6px}.solution-float--check{width:31px;height:31px;right:17%;bottom:7%;font-size:14px}.solution-float--spark{font-size:18px;left:18%;bottom:8%}
}
@media(prefers-reduced-motion:reduce){.solution-scene-orbit,.solution-scene-connectors .connector,.solution-node,.solution-core,.solution-core-chart i,.solution-core-chart span,.solution-core-pulse,.solution-float{animation:none!important}.solution-showcase-list .feature-band-item{transition:none!important}}


/* ===== WAITLIST CTA ILLUSTRATION ===== */
.cta-band-waitlist {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  align-items: center;
  gap: 28px;
  text-align: left;
  padding: 46px 44px 42px;
  isolation: isolate;
}
.cta-band-waitlist::before {
  content: '';
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  left: 42%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,255,255,.14), transparent 68%);
  pointer-events: none;
}
.cta-band-copy { position: relative; z-index: 3; }
.cta-band-waitlist h2 { max-width: 650px; margin: 8px 0 0; }
.cta-band-waitlist p { margin: 14px 0 0; max-width: 610px; }
.cta-band-waitlist .btn { margin-top: 24px; }
.cta-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.9);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
}
.waitlist-illustration {
  position: relative;
  min-height: 310px;
  z-index: 2;
  display: grid;
  place-items: center;
  perspective: 800px;
}
.waitlist-illustration svg { width: 100%; max-width: 520px; overflow: visible; }
.waitlist-orbit {
  position: absolute;
  width: 280px;
  height: 160px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  transform: rotate(-18deg);
  pointer-events: none;
}
.waitlist-orbit-a { animation: waitlistOrbit 7s ease-in-out infinite; }
.waitlist-orbit-b { width: 220px; height: 120px; transform: rotate(28deg); opacity: .55; animation: waitlistOrbit 9s ease-in-out infinite reverse; }
.waitlist-rp {
  position: absolute;
  top: 14px;
  left: 9%;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #ffc928;
  color: #0d1b3e;
  font-weight: 900;
  font-size: .85rem;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  animation: waitlistFloat 3.8s ease-in-out infinite;
}
.waitlist-spark { position: absolute; color: #fff; font-size: 20px; animation: waitlistSpark 2.8s ease-in-out infinite; }
.spark-a { right: 8%; top: 12%; }
.spark-b { left: 18%; bottom: 8%; color: #ffc928; animation-delay: .8s; }
.wl-ticket { animation: waitlistFloat 5s ease-in-out infinite; transform-origin: center; }
.wl-dashboard { animation: dashboardFloat 4.6s ease-in-out infinite; transform-origin: center; }
.wl-chart { stroke-dasharray: 180; stroke-dashoffset: 180; animation: chartDraw 2.8s cubic-bezier(.2,.8,.2,1) infinite alternate; }
.wl-chart-dot { animation: chartPulse 1.8s ease-in-out infinite; }
.wl-growth { animation: growthFloat 3.6s ease-in-out infinite; transform-origin: 405px 60px; }
.wl-confetti { animation: confettiFloat 3.5s ease-in-out infinite; transform-origin: center; }
.c2 { animation-delay: .6s; } .c3 { animation-delay: 1.1s; } .c4 { animation-delay: 1.7s; }
.cta-band-waitlist:hover .wl-dashboard { animation-duration: 2.6s; }
.cta-band-waitlist:hover .wl-chart { animation-duration: 1.5s; }
.cta-band-waitlist:hover .wl-growth { animation-duration: 2.1s; }
.cta-band-waitlist:hover .waitlist-orbit { opacity: .9; }
@keyframes waitlistFloat { 0%,100% { transform: translate3d(0,0,0) rotate(-1deg); } 50% { transform: translate3d(0,-10px,0) rotate(1deg); } }
@keyframes dashboardFloat { 0%,100% { transform: translate3d(0,3px,0); } 50% { transform: translate3d(0,-7px,0); } }
@keyframes growthFloat { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(7px,-7px,0); } }
@keyframes chartDraw { from { stroke-dashoffset: 180; } to { stroke-dashoffset: 0; } }
@keyframes chartPulse { 0%,100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.45); opacity: 1; } }
@keyframes confettiFloat { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-8px) rotate(8deg); } }
@keyframes waitlistOrbit { 0%,100% { transform: rotate(-18deg) scale(1); } 50% { transform: rotate(-8deg) scale(1.05); } }
@keyframes waitlistSpark { 0%,100% { opacity:.35; transform: scale(.8) rotate(0deg); } 50% { opacity:1; transform: scale(1.2) rotate(18deg); } }
@media (prefers-reduced-motion: reduce) {
  .waitlist-illustration *, .waitlist-orbit, .waitlist-rp { animation: none !important; }
}

/* =========================================================
   WHY CHOOSE CEFAT — semantic illustration rebuild
   Each visual explains the card instead of acting as decoration.
   ========================================================= */
.why-visual {
  height: 50%;
  bottom: 0;
  z-index: 2;
  pointer-events: none;
}
.why-card--tall .why-visual { height: 67%; }
.why-visual svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.why-visual svg * { vector-effect: non-scaling-stroke; }

/* Small & medium businesses: storefront + small team + gear */
.why-visual--smb svg { filter: drop-shadow(0 10px 8px rgba(8,28,70,.10)); }
.why-smb-store rect:first-child { fill:#dcecff; }
.why-smb-store path { fill:#fff; stroke:#fff; stroke-width:5; stroke-linejoin:round; }
.why-smb-store rect:nth-of-type(2) { fill:#2f80ed; opacity:.35; }
.why-smb-store rect:nth-of-type(3) { fill:#fff; opacity:.75; }
.why-smb-person circle { fill:#ffd3b2; }
.why-smb-person path { fill:#fff; }
.why-smb-person--a { animation: whyBob 2.8s ease-in-out infinite; transform-origin:300px 140px; }
.why-smb-person--b { animation: whyBob 3.2s .3s ease-in-out infinite; transform-origin:346px 140px; }
.why-smb-gear circle:first-child { fill:#ffc928; }
.why-smb-gear path { stroke:#fff; stroke-width:4; stroke-linecap:round; }
.why-smb-gear circle:last-child { fill:#2f80ed; }

/* Simple & fast: laptop dashboard + cursor */
.why-simple-laptop rect:first-child { fill:#dcecff; stroke:#fff; stroke-width:5; }
.why-simple-laptop rect:nth-child(2) { fill:#2f80ed; opacity:.94; stroke:#fff; stroke-width:3; }
.why-simple-laptop path { fill:#fff; opacity:.95; }
.why-simple-ui rect:first-child { fill:#fff; }
.why-simple-ui path { stroke:#2f80ed; stroke-width:4; stroke-linecap:round; }
.why-simple-ui rect:nth-of-type(2) { fill:#fff; opacity:.9; }
.why-simple-ui rect:nth-of-type(3) { fill:#1db9a6; opacity:.9; }
.why-simple-click circle { fill:#ffc928; opacity:.96; }
.why-simple-click path { fill:#0d1b3e; }
.why-simple-dot { fill:#fff; opacity:.65; animation: whyPulse 1.8s ease-in-out infinite; }
.why-simple-click { animation: whyClick 2.7s ease-in-out infinite; transform-origin:322px 78px; }

/* Affordable pricing: wallet + stackable coins + growth */
.why-afford-wallet path:first-child { fill:#dcecff; }
.why-afford-wallet path:nth-child(2) { fill:#fff; opacity:.98; }
.why-afford-wallet path:nth-child(3) { fill:#2f80ed; opacity:.9; }
.why-afford-wallet circle { fill:#ffc928; }
.why-afford-coins ellipse { fill:#ffc928; stroke:#fff; stroke-width:3; }
.why-afford-coins rect { fill:#f6b817; stroke:#fff; stroke-width:3; }
.why-afford-growth path { fill:none; stroke:#fff; stroke-width:8; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:160; stroke-dashoffset:160; animation: whyDraw 2.8s ease-in-out infinite; }
.why-afford-growth path:last-child { stroke-width:7; stroke-dasharray:none; stroke-dashoffset:0; }
.why-afford-rp { fill:#ffc928; }
.why-afford-rp + text { fill:#0d1b3e; font:700 20px Arial,sans-serif; }
.why-afford-spark { fill:#fff; animation: whyPulse 2s ease-in-out infinite; }
.why-afford-coins { animation: whyFloatCoins 3.2s ease-in-out infinite; transform-origin:170px 340px; }

/* Secure data: cloud + shield + document */
.why-secure-cloud path { fill:#dcecff; stroke:#fff; stroke-width:4; }
.why-secure-shield path:first-child { fill:#fff; }
.why-secure-shield path:last-child { fill:none; stroke:#2f80ed; stroke-width:7; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:55; stroke-dashoffset:55; animation: whyDrawCheck 2.8s ease-in-out infinite; }
.why-secure-lock rect { fill:#0d1b3e; }
.why-secure-lock path { fill:none; stroke:#ffc928; stroke-width:5; stroke-linecap:round; }
.why-secure-doc rect { fill:#fff; stroke:#dcecff; stroke-width:4; }
.why-secure-doc path { fill:none; stroke:#2f80ed; stroke-width:4; stroke-linecap:round; }
.why-secure-shield { animation: whyShield 3s ease-in-out infinite; transform-origin:210px 115px; }

/* Smarter decisions: dashboard + data + insight */
.why-analytics-board rect:first-child { fill:#dcecff; stroke:#fff; stroke-width:4; }
.why-analytics-board rect:not(:first-child) { fill:#fff; opacity:.95; }
.why-analytics-bars rect { fill:#fff; animation: whyBars 2.6s ease-in-out infinite alternate; transform-origin:bottom; }
.why-analytics-bars rect:nth-child(2) { animation-delay:.15s; }
.why-analytics-bars rect:nth-child(3) { animation-delay:.3s; }
.why-analytics-line { fill:none; stroke:#ffc928; stroke-width:6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:150; stroke-dashoffset:150; animation: whyDraw 2.5s ease-in-out infinite; }
.why-analytics-dot { fill:#1db9a6; animation: whyPulse 1.8s ease-in-out infinite; }
.why-analytics-insight circle { fill:#fff; stroke:#1db9a6; stroke-width:4; }
.why-analytics-insight path { fill:none; stroke:#1db9a6; stroke-width:5; stroke-linecap:round; stroke-linejoin:round; }
.why-analytics-insight { animation: whyInsight 2.6s ease-in-out infinite; transform-origin:334px 124px; }

/* Professional support: conversation + headset + notification */
.why-support-chat rect { fill:#dcecff; stroke:#fff; stroke-width:4; }
.why-support-chat path { fill:#dcecff; }
.why-support-chat circle { fill:#2f80ed; }
.why-support-headset circle { fill:#fff; stroke:#dcecff; stroke-width:5; }
.why-support-headset path { fill:none; stroke:#fff; stroke-width:8; stroke-linecap:round; stroke-linejoin:round; }
.why-support-alert { fill:#ff5e83; animation: whyPulse 1.6s ease-in-out infinite; }
.why-support-alert + path { fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; }
.why-support-headset { animation: whyHeadset 3s ease-in-out infinite; transform-origin:290px 100px; }

.why-card:hover .why-visual--smb .why-smb-gear { animation: whyGear 1.2s ease-in-out infinite; transform-origin:286px 136px; }
.why-card:hover .why-visual--simple .why-simple-click { animation-duration:1.4s; }
.why-card:hover .why-visual--affordable .why-afford-coins { animation-duration:1.5s; }
.why-card:hover .why-visual--secure .why-secure-shield { animation-duration:1.5s; }
.why-card:hover .why-visual--analytics .why-analytics-insight { animation-duration:1.3s; }
.why-card:hover .why-visual--support .why-support-headset { animation-duration:1.5s; }

@keyframes whyBob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }
@keyframes whyPulse { 0%,100% { opacity:.55; transform:scale(.94); } 50% { opacity:1; transform:scale(1.08); } }
@keyframes whyClick { 0%,100% { transform:translate(0,0); } 45% { transform:translate(-9px,8px); } 65% { transform:translate(0,0); } }
@keyframes whyDraw { 0% { stroke-dashoffset:160; opacity:.55; } 65%,100% { stroke-dashoffset:0; opacity:1; } }
@keyframes whyDrawCheck { 0%,20% { stroke-dashoffset:55; } 60%,100% { stroke-dashoffset:0; } }
@keyframes whyFloatCoins { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-7px); } }
@keyframes whyShield { 0%,100% { transform:translateY(0) rotate(0); } 50% { transform:translateY(-5px) rotate(-2deg); } }
@keyframes whyBars { from { transform:scaleY(.78); } to { transform:scaleY(1); } }
@keyframes whyInsight { 0%,100% { transform:scale(.96); } 50% { transform:scale(1.08); } }
@keyframes whyHeadset { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-4px); } }
@keyframes whyGear { from { transform:rotate(0); } to { transform:rotate(25deg); } }

@media (max-width:809px) {
  .why-card--tall .why-visual { height: 58%; }
  .why-visual { height: 47%; }
}
@media (prefers-reduced-motion: reduce) {
  .why-visual *,
  .why-card:hover .why-visual * { animation: none !important; }
}

/* =========================================================
   WHY CHOOSE CEFAT — final proportional layout correction
   Keep copy and illustration in clearly separated visual zones.
   ========================================================= */
.why-card {
  --why-copy-zone: 50%;
}
.why-card-copy {
  z-index: 5;
  max-width: min(92%, 520px);
  position: relative;
  padding-right: 8px;
}
.why-visual {
  z-index: 1;
  left: 7%;
  right: 7%;
  width: 86%;
  height: 40%;
  bottom: 4%;
  transform-origin: center bottom;
  opacity: .98;
}
.why-card--tall .why-visual {
  left: 8%;
  right: 8%;
  width: 84%;
  height: 50%;
  bottom: 3%;
}
.why-card--top-left .why-visual,
.why-card--top-mid .why-visual,
.why-card--bottom-left .why-visual,
.why-card--bottom-mid .why-visual {
  height: 39%;
}
.why-card--bottom-small .why-visual {
  height: 37%;
  left: 10%;
  width: 80%;
}
/* A soft transition keeps the illustration visually below the copy zone. */
.why-visual::before {
  content: "";
  position: absolute;
  left: -2%; right: -2%; top: -18px;
  height: 28px;
  background: linear-gradient(180deg, rgba(47,128,237,0), rgba(47,128,237,.12));
  pointer-events: none;
  z-index: 0;
}
.why-visual svg {
  position: relative;
  z-index: 1;
}

@media (max-width: 1100px) {
  .why-card-copy { max-width: 78%; }
  .why-visual { height: 40%; }
  .why-card--tall .why-visual { height: 47%; }
}

@media (max-width: 809px) {
  .why-card-copy { max-width: 88%; }
  .why-visual,
  .why-card--top-left .why-visual,
  .why-card--top-mid .why-visual,
  .why-card--bottom-left .why-visual,
  .why-card--bottom-mid .why-visual { height: 40%; }
  .why-card--tall .why-visual { height: 46%; }
}

@media (max-width: 520px) {
  .why-card,
  .why-card--tall { min-height: 320px; }
  .why-card-copy { max-width: 100%; padding-right: 0; }
  .why-card h3 { max-width: 94%; }
  .why-card p { max-width: 92%; }
  .why-visual,
  .why-card--top-left .why-visual,
  .why-card--top-mid .why-visual,
  .why-card--bottom-left .why-visual,
  .why-card--bottom-mid .why-visual,
  .why-card--bottom-small .why-visual { 
    left: 5%; right: 5%; width: 90%; height: 37%; bottom: 3%;
  }
  .why-card--tall .why-visual { height: 43%; }
}

@media (max-width: 380px) {
  .why-card,
  .why-card--tall { min-height: 300px; }
  .why-card { padding: 20px 18px 16px; }
  .why-card h3 { font-size: 1.02rem; line-height: 1.2; }
  .why-card p { font-size: .82rem; line-height: 1.35; }
  .why-visual,
  .why-card--tall .why-visual { height: 35%; }
}